:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #edf6ff; background: #050a11; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 80% -10%, rgba(43,126,212,.2), transparent 34rem), #050a11; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 235px minmax(0,1fr); }
aside { position: sticky; top: 0; height: 100vh; padding: 27px 21px; display: flex; flex-direction: column; border-right: 1px solid rgba(135,184,232,.16); background: rgba(4,10,17,.88); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 850; }
.brand img { width: 43px; height: 43px; object-fit: contain; }
.owner-label { margin: 28px 0 12px; color: #65788d; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
nav { display: grid; gap: 6px; }
nav a, .back-link { padding: 12px 13px; border-radius: 12px; color: #8fa1b6; text-decoration: none; }
nav a:hover, nav a.active { color: #eaf5ff; background: rgba(64,145,226,.12); }
.back-link { margin-top: auto; }
main { padding: clamp(24px,4vw,52px); }
header, .panel-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.header-tools { display: flex; align-items: end; gap: 12px; }
.theme-toggle { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(135,194,250,.25); border-radius: 50%; color: #ffd37d; background: rgba(13,27,44,.8); cursor: pointer; font-size: 1.05rem; }
.eyebrow { margin: 0 0 7px; color: #65b1fb; font-size: .68rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2.2rem,5vw,4rem); letter-spacing: -.055em; }
@media (min-width: 1100px) { h1 { max-width: 590px; white-space: nowrap; font-size: clamp(2.2rem, 4vw, 3.4rem); } }
h2 { margin-bottom: 20px; font-size: 1.45rem; }
#period-form { display: flex; align-items: end; gap: 9px; }
#period-form label { display: grid; gap: 5px; color: #7e91a5; font-size: .68rem; }
input, #period-form button { min-height: 40px; padding: 0 11px; border: 1px solid rgba(135,194,250,.25); border-radius: 11px; color: #dceeff; background: rgba(13,27,44,.8); }
#period-form button { color: #06111d; background: linear-gradient(145deg,#b9dfff,#55aaff); font-weight: 800; cursor: pointer; }
.status { min-height: 22px; margin: 16px 0; color: #7e91a5; }
.status.error { color: #ff9696; }
.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.metric, .panel, .gate { border: 1px solid rgba(135,184,232,.16); border-radius: 21px; background: rgba(13,25,41,.8); box-shadow: 0 22px 60px rgba(0,0,0,.16); }
.metric { min-height: 155px; padding: 22px; display: flex; flex-direction: column; }
.metric span, .metric small { color: #8295a9; }
.metric strong { margin: auto 0 8px; font-size: clamp(1.65rem,3vw,2.5rem); letter-spacing: -.04em; }
.metric.revenue { background: radial-gradient(circle at 90% 0,rgba(68,153,240,.22),transparent 10rem),rgba(13,25,41,.8); }
.metric.profit strong { color: #77e2ba; }
.panel { margin-top: 14px; padding: 24px; }
.panel-head > span { color: #74879b; font-size: .78rem; }
.waterfall { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.waterfall div { min-height: 91px; padding: 13px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 14px; color: #8497aa; background: rgba(255,255,255,.035); font-size: .7rem; }
.waterfall b { color: #dcecff; font-size: 1rem; }
.waterfall .total { color: #80dcbc; background: rgba(62,192,143,.09); }
.waterfall .total b { color: #80e5bd; }
.definition { margin: 18px 0 0; color: #697d91; font-size: .74rem; line-height: 1.5; }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.provider-list { display: grid; gap: 11px; }
.provider-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px; color: #94a7ba; font-size: .82rem; }
.provider-bar { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.055); }
.provider-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3f96eb,#82c8ff); }
.provider-row b { color: #dcecff; }
.usage { margin: 0; display: grid; gap: 12px; }
.usage div { padding-bottom: 11px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(135,184,232,.12); }
.usage dt { color: #8295a9; }
.usage dd { margin: 0; font-weight: 800; }
.gate { max-width: 580px; padding: 30px; }
.gate p { color: #8fa1b6; }
.gate a { color: #77bfff; }
[hidden] { display: none !important; }
:root[data-theme="light"] { color: #342719; background: #f4ecdf; }
:root[data-theme="light"] body { background: radial-gradient(circle at 80% -10%, rgba(220,165,78,.24), transparent 34rem), #f4ecdf; }
:root[data-theme="light"] aside { border-color: rgba(145,99,35,.18); background: rgba(255,250,241,.9); }
:root[data-theme="light"] .owner-label, :root[data-theme="light"] nav a, :root[data-theme="light"] .back-link, :root[data-theme="light"] .status { color: #786a58; }
:root[data-theme="light"] nav a:hover, :root[data-theme="light"] nav a.active { color: #4a3214; background: rgba(191,130,44,.12); }
:root[data-theme="light"] .eyebrow { color: #a56818; }
:root[data-theme="light"] .theme-toggle, :root[data-theme="light"] input { color: #5e431e; border-color: rgba(159,105,32,.23); background: rgba(255,251,243,.9); }
:root[data-theme="light"] #period-form label, :root[data-theme="light"] .metric span, :root[data-theme="light"] .metric small, :root[data-theme="light"] .panel-head > span, :root[data-theme="light"] .definition, :root[data-theme="light"] .provider-row, :root[data-theme="light"] .usage dt { color: #796b58; }
:root[data-theme="light"] #period-form button { color: #3b270e; border-color: rgba(169,110,30,.25); background: linear-gradient(145deg,#ffe9b5,#dba14a); }
:root[data-theme="light"] .metric, :root[data-theme="light"] .panel, :root[data-theme="light"] .gate { border-color: rgba(155,106,40,.17); background: rgba(255,251,244,.86); box-shadow: 0 22px 60px rgba(89,58,20,.1); }
:root[data-theme="light"] .metric.revenue { background: radial-gradient(circle at 90% 0,rgba(222,165,75,.25),transparent 10rem),rgba(255,251,244,.9); }
:root[data-theme="light"] .metric.profit strong, :root[data-theme="light"] .waterfall .total b { color: #258260; }
:root[data-theme="light"] .waterfall div { color: #7b6c59; background: rgba(106,71,25,.045); }
:root[data-theme="light"] .waterfall b, :root[data-theme="light"] .provider-row b { color: #49341a; }
:root[data-theme="light"] .waterfall .total { color: #28765c; background: rgba(49,151,112,.1); }
:root[data-theme="light"] .provider-bar { background: rgba(104,69,24,.09); }
:root[data-theme="light"] .provider-bar i { background: linear-gradient(90deg,#b97820,#ecc475); }
:root[data-theme="light"] .usage div { border-color: rgba(145,99,35,.14); }
@media (max-width: 950px) { .admin-shell { display:block; } aside { position:static; width:auto; height:auto; padding:16px; flex-direction:row; align-items:center; } .owner-label, aside nav { display:none; } .back-link { margin:0 0 0 auto; } .metrics { grid-template-columns:repeat(2,1fr); } .waterfall { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 620px) { main { padding:22px 14px 90px; } header { align-items:start; flex-direction:column; } .header-tools { width: 100%; align-items: start; } #period-form { flex: 1; display:grid; grid-template-columns:1fr 1fr; } #period-form button { grid-column:1/-1; } .metrics, .split { grid-template-columns:1fr; } .metric { min-height:125px; } .waterfall { grid-template-columns:repeat(2,1fr); } .provider-row { grid-template-columns:90px 1fr; } .provider-row b { grid-column:2; } }