:root{--bg:#f7f7fb;--panel:#fff;--text:#101827;--muted:#6b7280;--border:#e5e7eb;--blue:#2f80ed;--green:#10b981;--purple:#9333ea;--orange:#ea580c;--red:#ef4444;--shadow:0 18px 50px #0f172a14;--pie-0:#3b82f6;--pie-1:#10b981;--pie-2:#f59e0b;--pie-3:#8b5cf6;--pie-4:#ef4444;--pie-5:#06b6d4;--pie-6:#ec4899;--pie-7:#f97316;--pie-8:#84cc16;--pie-9:#a855f7;--pie-10:#14b8a6;--pie-11:#f43f5e;--pie-12:#6366f1}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}.login-page{background:radial-gradient(circle at 80% 10%,#2f80ed33,#0000 30%),radial-gradient(circle at 25% 80%,#10b98129,#0000 32%),linear-gradient(135deg,#f8fafc,#eef2ff);grid-template-columns:minmax(360px,480px) 1fr;align-items:center;gap:48px;min-height:100vh;padding:42px;display:grid}.login-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow);background:#ffffffe6;border:1px solid #fffc;border-radius:32px;padding:34px}.login-brand{align-items:center;gap:16px;margin-bottom:28px;display:flex}.brand-mark{color:#fff;background:#1d4ed8;border-radius:20px;place-items:center;width:60px;height:60px;display:grid;box-shadow:0 12px 28px #1d4ed840}.brand-mark.small{border-radius:14px;width:42px;height:42px}.eyebrow{color:var(--blue);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:12px;font-weight:700}.login-card h1{margin:2px 0 0;font-size:38px}.login-form{gap:18px;display:grid}.login-form label{color:#374151;gap:8px;font-weight:700;display:grid}.login-form input,.search-box input{border:1px solid var(--border);background:#fff;border-radius:16px;outline:none;width:100%;padding:14px 16px}.login-form input:focus,.search-box input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2f80ed1f}.login-error{color:#991b1b;background:#fee2e2;border-radius:14px;padding:12px 14px;font-weight:700}.demo-account{color:var(--muted);gap:6px;margin-top:22px;font-size:14px;display:grid}.demo-account strong{color:var(--text)}.login-preview{min-height:520px;position:relative}.floating-card{width:330px;box-shadow:var(--shadow);background:#ffffffdb;border:1px solid #ffffffe6;border-radius:28px;align-items:center;gap:18px;padding:24px;display:flex;position:absolute}.floating-card svg{width:42px;height:42px}.floating-card b{font-size:28px;display:block}.floating-card span{color:var(--muted)}.card-green{color:var(--green);top:42px;left:60px}.card-blue{color:var(--blue);top:210px;right:70px}.card-purple{color:var(--purple);bottom:62px;left:180px}.app-shell{grid-template-columns:280px 1fr;min-height:100vh;display:grid}.sidebar{color:#fff;background:#0f172a;flex-direction:column;gap:28px;height:100vh;padding:24px;display:flex;position:sticky;top:0}.sidebar-brand{align-items:center;gap:14px;display:flex}.sidebar-brand strong{font-size:18px;display:block}.sidebar-brand span,.sidebar-user span{color:#94a3b8;font-size:13px}.sidebar nav{gap:10px;display:grid}.nav-item{color:#cbd5e1;text-align:left;background:0 0;border:0;border-radius:15px;align-items:center;gap:12px;padding:13px 14px;display:flex}.sidebar-user{background:#ffffff14;border-radius:18px;align-items:center;gap:12px;margin-top:auto;padding:14px;display:flex}.avatar{color:#1d4ed8;background:#dbeafe;border-radius:50%;place-items:center;width:42px;height:42px;font-weight:900;display:grid}.content{min-width:0;padding:32px}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:28px;display:flex}.topbar h1{letter-spacing:-.04em;margin:0 0 8px;font-size:clamp(32px,4vw,54px);line-height:1}.topbar p{color:var(--muted);margin:0}.topbar-actions{align-items:center;gap:12px;display:flex}.primary-btn,.ghost-btn,.icon-btn{border:0;border-radius:14px;justify-content:center;align-items:center;gap:10px;min-height:44px;padding:0 18px;font-weight:800;display:inline-flex}.primary-btn{background:var(--blue);color:#fff;box-shadow:0 12px 24px #2f80ed38}.ghost-btn{color:#334155;border:1px solid var(--border);background:#fff}.icon-btn{border:1px solid var(--border);background:#fff;width:46px;padding:0}.full-width{width:100%}.mobile-only{display:none}.metric-grid{grid-template-columns:repeat(4,minmax(180px,1fr));gap:24px;margin-bottom:24px;display:grid}.metric-card{border:1px solid var(--border);background:#fff;border-radius:20px;align-items:flex-start;gap:22px;min-height:180px;padding:28px;display:flex;box-shadow:0 8px 24px #0f172a0a}.metric-icon{background:#ffffffb3;border-radius:14px;place-items:center;width:56px;height:56px;display:grid}.metric-icon svg{width:32px;height:32px}.metric-card span{font-size:17px;font-weight:800;display:block}.metric-card strong{margin:10px 0;font-size:clamp(28px,3vw,40px);line-height:1.15;display:block}.metric-card small{color:var(--muted);font-size:15px}.metric-card.green{color:#16a34a;background:#effdf5;border-color:#bbf7d0}.metric-card.blue{color:#2563eb;background:#eff6ff;border-color:#bfdbfe}.metric-card.purple{color:#9333ea;background:#fbf5ff;border-color:#e9d5ff}.metric-card.orange{color:#ea580c;background:#fff7ed;border-color:#fed7aa}.dashboard-grid{gap:24px;display:grid}.two-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.one-column{grid-template-columns:1fr}.compact-top{margin-top:24px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:20px;min-width:0;padding:28px;box-shadow:0 8px 24px #0f172a0b}.panel h2{letter-spacing:-.02em;margin:0 0 24px;font-size:clamp(22px,2vw,30px)}.bar-chart{grid-template-rows:1fr 34px;grid-template-columns:56px 1fr;gap:0 14px;height:360px;display:grid}.bar-chart.tall{height:430px}.y-axis{color:#6b7280;flex-direction:column;justify-content:space-between;padding:4px 0 52px;font-size:16px;display:flex}.bars{background-image:linear-gradient(0deg,#9ca3af47 1px,#0000 1px);background-size:100% 25%;border-bottom:1px solid #9ca3af;border-left:1px solid #9ca3af;grid-template-columns:repeat(4,1fr);align-items:end;gap:12px;padding:10px 12px 0;display:grid}.bar-group{grid-template-rows:1fr 42px;place-items:end center;gap:10px;min-width:0;height:100%;display:grid}.bar-pair{justify-content:center;align-items:end;gap:9px;width:100%;height:100%;display:flex}.bar{border-radius:8px 8px 0 0;width:min(28px,30%);min-height:4px;transition:height .3s}.bar.revenue{background:var(--blue)}.bar.count{background:var(--green)}.bar-group>span{color:#52525b;white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.legend{color:#3b82f6;grid-column:2;justify-content:center;align-items:end;gap:18px;font-weight:700;display:flex}.legend span{align-items:center;gap:8px;display:inline-flex}.legend i{border-radius:3px;width:18px;height:12px;display:inline-block}.legend-count{background:var(--green)}.legend-revenue{background:var(--blue)}.pie-layout{grid-template-columns:1fr 220px;align-items:center;gap:28px;min-height:360px;display:grid}.pie-layout.large{grid-template-columns:minmax(280px,520px) 1fr}.pie{aspect-ratio:1;border-radius:50%;width:min(340px,80vw);margin:auto;position:relative;box-shadow:inset 0 0 0 1px #fffc,0 18px 40px #3b82f61f}.pie-hole{text-align:center;color:#334155;background:#fff;border-radius:50%;place-items:center;font-size:14px;font-weight:900;display:grid;position:absolute;inset:34%}.pie-labels{gap:13px;font-weight:700;display:grid}.pie-labels span{color:#475569;justify-content:space-between;align-items:center;gap:8px;display:flex}.pie-labels i{border-radius:4px;flex:none;width:14px;height:14px}.pie-labels b{color:#111827;margin-left:auto}.trend-chart{min-height:230px}.trend-chart svg{width:100%;height:190px;overflow:visible}.axis{stroke:#cbd5e1;stroke-width:2px}.trend-path{fill:none;stroke:var(--blue);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.trend-dot{fill:#fff;stroke:var(--blue);stroke-width:4px}.trend-labels{color:var(--muted);justify-content:space-between;font-weight:700;display:flex}.summary-row{grid-template-columns:repeat(4,minmax(150px,1fr));gap:16px;display:grid}.summary-box{border:1px solid var(--border);background:#f8fafc;border-radius:18px;gap:8px;padding:18px;display:grid}.summary-box span{color:var(--muted);font-weight:800}.summary-box strong{font-size:24px}.summary-box small{color:var(--green);font-weight:800}.table-toolbar{justify-content:space-between;gap:14px;margin-bottom:18px;display:flex}.search-box{flex:1;max-width:520px;position:relative}.search-box svg{color:var(--muted);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.search-box input{padding-left:44px}.table-wrap{border:1px solid var(--border);border-radius:18px;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:780px}th,td{text-align:left;border-bottom:1px solid var(--border);padding:16px 18px}th{color:#475569;text-transform:uppercase;letter-spacing:.05em;background:#f8fafc;font-size:13px}td{color:#334155}tbody tr:hover{background:#f8fafc}.status{border-radius:999px;padding:5px 10px;font-size:12px;font-style:normal;font-weight:900;display:inline-flex}.status.success,.status.active{color:#047857;background:#d1fae5}.status.pending,.status.trial{color:#92400e;background:#fef3c7}.status.failed,.status.inactive{color:#991b1b;background:#fee2e2}.empty-state{text-align:center;color:var(--muted);padding:24px}.mini-list{gap:14px;display:grid}.mini-row{border:1px solid var(--border);border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:14px;display:flex}.mini-row strong{display:block}.mini-row span{color:var(--muted)}.user-cards{gap:14px;display:grid}.player-card{border:1px solid var(--border);border-radius:18px;grid-template-columns:42px 1fr auto auto;align-items:center;gap:14px;padding:16px;display:grid}.player-card strong{display:block}.player-card span{color:var(--muted)}.settings-grid{gap:16px;display:grid}.settings-card,.switch-row{border:1px solid var(--border);background:#f8fafc;border-radius:18px;justify-content:space-between;align-items:center;gap:16px;padding:18px;display:flex}.settings-card{justify-content:flex-start}.settings-card svg{color:var(--blue)}.settings-card strong,.settings-card span{display:block}.settings-card span{color:var(--muted)}.switch-row input{width:22px;height:22px;accent-color:var(--blue)}@media (width<=1180px){.page-tabs{scrollbar-width:thin;align-items:center;gap:10px;margin-top:-8px;padding:4px 0 22px;display:flex;overflow-x:auto}.page-tab{border:1px solid var(--border);color:#475569;background:#fff;border-radius:999px;flex:none;align-items:center;gap:8px;min-height:42px;padding:0 14px;font-weight:900;display:inline-flex;box-shadow:0 8px 20px #0f172a0a}.page-tab:hover,.page-tab.active{color:#fff;background:#1d4ed8;border-color:#1d4ed8}.metric-grid{grid-template-columns:repeat(2,1fr)}.two-columns{grid-template-columns:1fr}}@media (width<=900px){.login-page{grid-template-columns:1fr;padding:22px}.login-preview{display:none}.app-shell{grid-template-columns:1fr}.sidebar{z-index:20;width:280px;transition:transform .2s;position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.content{padding:20px}.mobile-only{display:inline-flex}.topbar{align-items:center}.topbar-actions{flex-wrap:wrap;justify-content:flex-end}.summary-row{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.topbar{grid-template-columns:auto 1fr;display:grid}.topbar-actions{grid-column:1/-1;justify-content:stretch}.topbar-actions .primary-btn,.topbar-actions .ghost-btn{flex:1}.page-tabs{scrollbar-width:thin;align-items:center;gap:10px;margin-top:-8px;padding:4px 0 22px;display:flex;overflow-x:auto}.page-tab{border:1px solid var(--border);color:#475569;background:#fff;border-radius:999px;flex:none;align-items:center;gap:8px;min-height:42px;padding:0 14px;font-weight:900;display:inline-flex;box-shadow:0 8px 20px #0f172a0a}.page-tab:hover,.page-tab.active{color:#fff;background:#1d4ed8;border-color:#1d4ed8}.metric-grid{grid-template-columns:1fr}.metric-card{min-height:150px}.panel{padding:20px}.bar-chart{grid-template-columns:42px 1fr;height:300px}.pie-layout,.pie-layout.large,.summary-row{grid-template-columns:1fr}.table-toolbar{flex-direction:column}.player-card{grid-template-columns:42px 1fr}.player-card b,.player-card em{grid-column:2}}.svg-chart-wrap{width:100%;min-height:360px}.svg-chart{width:100%;height:auto;display:block;overflow:visible}.grid-line{stroke:#d1d5db;stroke-width:1.2px;stroke-dasharray:5 5}.axis-line{stroke:#6b7280;stroke-width:1.4px}.tick-label,.x-label{fill:#5f6368;font-size:20px;font-weight:700}.x-label{font-size:18px}.registration-failed{fill:var(--red)}.registration-success{fill:var(--blue)}.registration-total{fill:var(--green)}.revenue-line,.dau-line{fill:none;stroke-width:3px;stroke-linejoin:round;stroke-linecap:round}.revenue-line{stroke:#10b981}.dau-line{stroke:#2f80ed}.revenue-area,.dau-area{opacity:1}.renewal-line{fill:none;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}.renewal-dot{fill:#fff;stroke-width:4px}.renewal-today{stroke:#10b981}.renewal-yesterday{stroke:#64748b}.renewal-two-days{stroke:#94a3b8}.renewal-three-days{stroke:#cbd5e1}.chart-legend{align-items:center;gap:18px;margin-top:-8px;font-size:18px;font-weight:800;display:flex}.chart-legend.centered{justify-content:center}.chart-legend.wrap{flex-wrap:wrap}.chart-legend span{align-items:center;gap:8px;display:inline-flex}.chart-legend i{border-radius:3px;width:16px;height:12px;display:inline-block}.legend-failed{background:var(--red)}.legend-success{background:var(--blue)}.legend-total{background:var(--green)}.legend-renewal-today{background:#10b981}.legend-renewal-yesterday{background:#64748b}.legend-renewal-two-days{background:#94a3b8}.legend-renewal-three-days{background:#cbd5e1}@media (width<=640px){.tick-label,.x-label{font-size:18px}.chart-legend{gap:12px;font-size:15px}.svg-chart-wrap{min-height:300px}}.revenue-report-page{gap:28px;display:grid}.revenue-hero-card{color:#fff;background:radial-gradient(circle at 72% 10%,#ffffff29,#0000 28%),linear-gradient(115deg,#22c55e 0%,#10b981 48%,#14b8a6 100%);border-radius:24px;justify-content:space-between;align-items:center;min-height:250px;padding:42px 48px;display:flex;overflow:hidden;box-shadow:0 18px 42px #10b98138}.revenue-hero-content{gap:16px;display:grid}.revenue-hero-content span{letter-spacing:.06em;opacity:.9;font-size:17px;font-weight:900}.revenue-hero-content strong{letter-spacing:-.04em;font-size:clamp(44px,6vw,70px);line-height:1}.revenue-hero-content small{opacity:.9;font-size:23px;font-weight:700}.revenue-hero-icon{opacity:.32;flex:none;width:155px;height:155px}.revenue-period-grid{grid-template-columns:repeat(3,minmax(220px,1fr));gap:28px;display:grid}.revenue-mini-card,.revenue-gradient-card{border-radius:18px;min-height:210px;padding:30px 34px;box-shadow:0 12px 34px #0f172a14}.revenue-mini-card{border:1px solid var(--border);background:#fff;align-content:start;gap:12px;display:grid}.revenue-card-head{justify-content:space-between;align-items:center;gap:14px;display:flex}.revenue-card-head h3{margin:0;font-size:24px;line-height:1.2}.revenue-card-head h3 svg{vertical-align:-5px;margin-right:8px}.trend-down,.revenue-card-head span{color:#dc2626;align-items:center;gap:7px;font-size:18px;font-weight:900;display:inline-flex}.revenue-card-head .trend-up{color:#16a34a}.revenue-card-head .trend-down{color:#dc2626}.revenue-card-head .trend-flat{color:#64748b}.revenue-mini-card>strong{letter-spacing:-.04em;margin-top:18px;font-size:clamp(36px,4vw,48px);line-height:1}.currency-label,.revenue-mini-card small{color:#6b7280;font-size:19px;font-weight:700}.revenue-gradient-card{color:#fff;border:0;align-content:center;gap:14px;display:grid}.revenue-gradient-card .revenue-card-head span{color:#fffc}.revenue-gradient-card strong{letter-spacing:-.035em;font-size:clamp(32px,4vw,42px);line-height:1}.revenue-gradient-card small{opacity:.86;font-size:18px;font-weight:700}.revenue-gradient-card.yellow{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.revenue-gradient-card.purple{background:linear-gradient(135deg,#a855f7,#6366f1)}.revenue-gradient-card.pink{background:linear-gradient(135deg,#ec4899,#f43f5e)}.insight-list{gap:16px;display:grid}.insight-list div{border:1px solid var(--border);background:#f8fafc;border-radius:18px;padding:18px}.insight-list strong,.insight-list span{display:block}.insight-list strong{margin-bottom:6px;font-size:18px}.insight-list span{color:var(--muted);line-height:1.5}@media (width<=1180px){.revenue-period-grid{grid-template-columns:1fr}}@media (width<=640px){.revenue-hero-card{min-height:210px;padding:28px}.revenue-hero-icon{display:none}.revenue-mini-card,.revenue-gradient-card{min-height:180px;padding:24px}.revenue-card-head{align-items:flex-start}}.page-tabs{scrollbar-width:thin;align-items:center;gap:10px;margin-top:-8px;padding:4px 0 22px;display:flex;overflow-x:auto}.page-tab{border:1px solid var(--border);color:#475569;background:#fff;border-radius:999px;flex:none;align-items:center;gap:8px;min-height:42px;padding:0 14px;font-weight:900;display:inline-flex;box-shadow:0 8px 20px #0f172a0a}.page-tab:hover,.page-tab.active{color:#fff;background:#1d4ed8;border-color:#1d4ed8}.sidebar{background:linear-gradient(#2563eb 0%,#1d4ed8 48%,#1e40af 100%);overflow-y:auto}.sidebar-brand span,.sidebar-user span{color:#ffffffb8}.sidebar nav{gap:12px}.nav-item{color:#ffffffe0;border:1px solid #0000;min-height:64px;font-size:18px;font-weight:900;line-height:1.18;position:relative}.nav-item:hover,.nav-item.active{color:#fff;background:#ffffff21}.nav-item.nav-transaction.active{background:linear-gradient(135deg,#facc15 0%,#fb923c 48%,#ef4444 100%);border-color:#ffffff47;box-shadow:0 14px 30px #ef444447}.nav-icon{background:#ffffff1f;border-radius:14px;flex:none;place-items:center;width:42px;height:42px;display:inline-grid}.nav-label{flex:1;min-width:0}.nav-badge{color:#fff;background:#ffffff2e;border-radius:999px;place-items:center;width:27px;height:27px;font-size:14px;font-weight:1000;display:inline-grid;position:absolute;top:-7px;right:-5px}.active .nav-badge{background:#ef4444}.success-btn{color:#fff;background:#16a34a;border:0;border-radius:14px;justify-content:center;align-items:center;gap:10px;min-height:44px;padding:0 18px;font-weight:800;display:inline-flex;box-shadow:0 12px 24px #16a34a38}.button-badge{color:#fff;background:#ffffff38;border-radius:999px;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:12px;display:inline-grid}.charging-history-page{gap:24px;display:grid}.charging-page-actions{flex-wrap:wrap;justify-content:flex-end;gap:14px;margin-top:-8px;display:flex}.charging-stat-grid{grid-template-columns:repeat(4,minmax(190px,1fr));gap:24px;display:grid}.charging-stat-card{color:#fff;border-radius:18px;justify-content:space-between;align-items:center;gap:18px;min-height:170px;padding:28px;display:flex;overflow:hidden;box-shadow:0 14px 34px #0f172a1f}.charging-stat-card.blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.charging-stat-card.green{background:linear-gradient(135deg,#22c55e,#16a34a)}.charging-stat-card.red{background:linear-gradient(135deg,#ef4444,#dc2626)}.charging-stat-card.purple{background:linear-gradient(135deg,#a855f7,#9333ea)}.charging-stat-card span,.charging-stat-card small{opacity:.9;font-weight:800;display:block}.charging-stat-card strong{letter-spacing:-.04em;margin:12px 0 6px;font-size:clamp(34px,4vw,48px);line-height:1;display:block}.charging-stat-icon svg{opacity:.6;width:70px;height:70px}.charging-filter-grid{grid-template-columns:repeat(4,minmax(180px,1fr));gap:18px;display:grid}.charging-filter-grid input,.charging-filter-grid select{color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:12px;outline:none;width:100%;min-height:58px;padding:0 18px;font-weight:650}.charging-filter-grid input::placeholder{color:#9ca3af}.charging-filter-grid input:focus,.charging-filter-grid select:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2f80ed1f}.charging-filter-actions{gap:12px;margin-top:20px;display:flex}.charging-table-wrap table{min-width:1160px}.placeholder-card{color:#334155;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:18px;align-items:center;gap:18px;min-height:180px;padding:26px;display:flex}.placeholder-card svg{color:var(--blue)}.placeholder-card strong,.placeholder-card span{display:block}.placeholder-card strong{margin-bottom:6px;font-size:24px}.placeholder-card span{color:var(--muted)}@media (width<=1280px){.charging-stat-grid,.charging-filter-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.charging-page-actions{justify-content:stretch}.charging-page-actions button{flex:1}.charging-stat-grid,.charging-filter-grid{grid-template-columns:1fr}.charging-filter-actions{flex-direction:column}}.danger-btn{cursor:pointer;color:#fff;background:#dc2626;border:none;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;display:inline-flex}.danger-btn:hover{background:#b91c1c}