:root{--primary-color: #4f46e5;--bg-color: #f3f4f6;--sidebar-width: 240px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg-color)}.app{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background-color:#1f2937;color:#fff;display:flex;flex-direction:column;position:fixed;height:100vh}.sidebar-header{padding:20px;border-bottom:1px solid #374151}.sidebar-header h2{font-size:1.25rem;font-weight:600}.sidebar-nav{flex:1;padding:16px 0}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#9ca3af;text-decoration:none;border:none;background:none;width:100%;cursor:pointer;font-size:.875rem;transition:all .2s}.nav-item:hover{background-color:#374151;color:#fff}.nav-item.active{background-color:var(--primary-color);color:#fff}.sidebar-footer{padding:16px 0;border-top:1px solid #374151}.main-content{flex:1;margin-left:var(--sidebar-width);padding:24px}.dashboard h1{font-size:1.875rem;font-weight:600;margin-bottom:24px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:32px}.stat-card{background:#fff;padding:24px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.stat-card h3{font-size:.875rem;font-weight:500;color:#6b7280;margin-bottom:8px}.stat-value{font-size:2rem;font-weight:600;color:#111827}.recent-calls{background:#fff;padding:24px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.recent-calls h2{font-size:1.25rem;font-weight:600;margin-bottom:16px}table{width:100%;border-collapse:collapse}table th,table td{padding:12px;text-align:left;border-bottom:1px solid #e5e7eb}table th{font-size:.75rem;font-weight:500;color:#6b7280;text-transform:uppercase}table td{font-size:.875rem;color:#374151}table tbody tr:hover{background-color:#f9fafb}.revenue-page{padding:0}.page-header{margin-bottom:32px}.page-header h1{font-size:1.875rem;font-weight:600;color:#111827;margin-bottom:4px}.page-header p{font-size:.875rem;color:#6b7280}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:#6b7280}.loading-spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#4f46e5;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:32px}.stat-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;display:flex;gap:16px;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.stat-card.total-revenue .stat-icon{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.stat-card.transactions .stat-icon{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.stat-card.subscriptions .stat-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.stat-card.avg-value .stat-icon{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.stat-content{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:.875rem;color:#6b7280}.stat-value{font-size:1.75rem;font-weight:700;color:#111827}.stat-change{font-size:.75rem;display:flex;align-items:center;gap:4px}.stat-change.positive{color:#10b981}.stat-change.negative{color:#ef4444}.charts-section{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-bottom:32px}.chart-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.chart-header{padding:20px 24px;border-bottom:1px solid #e5e7eb}.chart-header h2{font-size:1.125rem;font-weight:600;color:#111827;margin-bottom:4px}.chart-subtitle{font-size:.75rem;color:#6b7280}.chart-body{padding:24px}.bar-chart{display:flex;flex-direction:column;gap:16px}.bar-item{display:flex;align-items:center;gap:16px}.bar-label{width:60px;font-size:.875rem;color:#6b7280}.bar-container{flex:1;height:32px;background:#f3f4f6;border-radius:6px;overflow:hidden}.bar{height:100%;background:linear-gradient(90deg,#4f46e5,#6366f1);border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:12px;min-width:60px;transition:width .3s ease}.bar-value{font-size:.75rem;font-weight:500;color:#fff}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;color:#9ca3af}.empty-icon{font-size:3rem;margin-bottom:16px;opacity:.5}.empty-state p{font-size:1rem;font-weight:500;margin-bottom:4px}.empty-state span{font-size:.875rem}.revenue-breakdown{display:flex;flex-direction:column;gap:20px}.breakdown-item{display:flex;flex-direction:column;gap:8px}.breakdown-header{display:flex;justify-content:space-between;align-items:center}.breakdown-label{font-size:.875rem;color:#374151}.breakdown-value{font-size:.875rem;font-weight:600;color:#111827}.breakdown-bar{height:8px;background:#f3f4f6;border-radius:4px;overflow:hidden}.breakdown-progress{height:100%;background:linear-gradient(90deg,#4f46e5,#6366f1);border-radius:4px}.breakdown-progress.secondary{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.breakdown-progress.tertiary{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.breakdown-percent{font-size:.75rem;color:#6b7280}.table-section{margin-bottom:32px}.table-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.table-card .table-header{padding:20px 24px;border-bottom:1px solid #e5e7eb}.table-card .table-header h2{font-size:1.125rem;font-weight:600;color:#111827}.revenue-table{width:100%;border-collapse:collapse}.revenue-table th{padding:16px 24px;text-align:left;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;background:#f9fafb;border-bottom:1px solid #e5e7eb}.revenue-table td{padding:16px 24px;font-size:.875rem;color:#374151;border-bottom:1px solid #e5e7eb}.revenue-table tbody tr:hover{background:#f9fafb}.revenue-table tbody tr:last-child td{border-bottom:none}.month-cell{font-weight:500;color:#111827}.revenue-cell{font-weight:600;color:#111827}.transaction-cell,.avg-cell{color:#6b7280}.growth-cell span{font-weight:500;padding:4px 8px;border-radius:4px;font-size:.75rem}.growth-cell .positive{background:#d1fae5;color:#059669}.growth-cell .negative{background:#fee2e2;color:#dc2626}.growth-cell .neutral{background:#f3f4f6;color:#6b7280}.empty-row{text-align:center;padding:48px!important;color:#9ca3af}