:root{color-scheme:dark;--bg:#161916;--fg:#faf6f1;--muted:#b9bcb4;--panel:#222722;--line:#41483f;--accent:#ee7427}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px "Helvetica Neue",Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:46px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}
.cabinet-header{max-width:1440px;margin:auto;padding:24px 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px}.cabinet-header img{display:block;width:189px;height:auto}.back-link{font-size:14px;color:var(--muted);white-space:nowrap}.demo-banner{border-block:1px solid var(--line);padding:12px 5vw;font-size:12px;color:var(--muted);line-height:1.6;letter-spacing:.04em}
.cabinet-layout{max-width:1440px;margin:auto;padding:48px 5vw 64px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:60px}.cabinet-layout:has(nav[hidden]){grid-template-columns:1fr}#screen{min-width:0;outline:none}#cabinet-nav{display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:24px}#cabinet-nav button{background:transparent;color:var(--muted);border:0;text-align:left;padding:15px 18px;font-size:15px}#cabinet-nav button[aria-current=page]{background:var(--accent);color:#161916;font-weight:700}
h1{font-size:clamp(36px,4.6vw,66px);font-weight:800;line-height:1.02;letter-spacing:-2.8px;margin:12px 0 24px;text-transform:uppercase;overflow-wrap:break-word}h2{font-size:25px;letter-spacing:-.7px;margin:0 0 16px}h3{font-size:20px;margin:0 0 12px}p{line-height:1.65;margin:12px 0 20px}.muted{color:var(--muted)}.eyebrow{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}.note{font-size:13px;color:var(--muted);line-height:1.6}.badge{display:inline-block;border:1px solid var(--line);padding:7px 10px;font-size:12px;line-height:1.4}.status{color:#b3e5c3}.status.paused{color:#ffc29a}.row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.card{padding:28px;background:var(--panel);border:1px solid var(--line);min-width:0}.dashboard,.tariff-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.balance{background:var(--accent);color:#161916;border-color:var(--accent)}.balance .muted,.balance .note{color:#3e291c}.balance .badge{border-color:#68402a}.balance-value{display:block;font-size:clamp(44px,5.2vw,76px);letter-spacing:-3px;font-weight:800;margin:24px 0 12px}.value{font-size:42px;font-weight:700;letter-spacing:-1.8px}.value small{font-size:15px;letter-spacing:0;font-weight:400}.tariff-current{border:2px solid var(--accent)}.price{font-size:23px;font-weight:600}.price small{font-size:13px;font-weight:400;color:var(--muted)}
.primary,.secondary,.action{border:1px solid var(--line);padding:15px 20px;color:var(--fg);background:var(--panel);font-weight:600}.primary{background:var(--accent);color:#161916;border-color:var(--accent)}.balance .primary{background:#161916;color:white;border-color:#161916;width:100%}.secondary:hover,.action:hover{border-color:var(--accent)}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.action{text-align:left;padding:26px;font-size:20px}.action span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:10px}.welcome{max-width:880px;padding:30px 0}.welcome h1{font-size:clamp(48px,7vw,100px);margin:30px 0}.welcome p{max-width:580px}.welcome .primary{margin-top:20px}.pause-card{max-width:620px;margin-top:28px}label{display:block;font-weight:600}input,textarea{display:block;width:100%;min-width:0;background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:14px;margin-top:12px;min-height:48px}input[type=date]{max-width:100%}.field-error{color:#ffc29a;min-height:20px;margin-top:8px}.profile-details{margin:0;line-height:1.6}.profile-details div{padding:14px 0;border-bottom:1px solid var(--line)}dt{font-size:13px;color:var(--muted)}dd{margin:5px 0 0;overflow-wrap:anywhere}.history{list-style:none;padding:0;margin:0}.history li{padding:18px 0;border-bottom:1px solid var(--line);line-height:1.6}.history time{display:block;font-size:12px;color:var(--muted)}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.support-panel{max-width:820px;border:1px solid var(--line);background:var(--panel)}.support-head{padding:22px;border-bottom:1px solid var(--line)}.support-head strong{display:block;margin-bottom:8px}.chat-log{padding:24px;min-height:220px}.message-bubble{padding:20px;border:1px solid var(--line);max-width:580px;font-size:15px;line-height:1.7}.chat-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.chat-quick button{font-size:13px;padding:10px 14px}.chat-compose{padding:20px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}.chat-compose textarea{margin:0;resize:none;flex:1}.chat-compose button{flex-shrink:0}button:disabled{opacity:.5;cursor:default}.chat-disclosure{padding:0 20px 18px;margin:0;font-size:12px;color:var(--muted)}
.cabinet-footer{border-top:1px solid var(--line);max-width:1440px;margin:auto;padding:24px 5vw;color:var(--muted);font-size:12px;line-height:1.7}.toast:empty{display:none}.toast{position:fixed;bottom:24px;right:24px;left:auto;max-width:calc(100vw - 32px);padding:15px 22px;background:var(--fg);color:#161916;border-left:5px solid var(--accent);z-index:30;font-size:14px;box-shadow:0 4px 28px #0005}dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:30px;overflow:auto}dialog::backdrop{background:#000b}
@media(max-width:1000px){.cabinet-layout{gap:30px;grid-template-columns:170px minmax(0,1fr)}.dashboard,.profile-grid{grid-template-columns:1fr}.card{padding:24px}.tariff-grid{gap:14px}.tariff-grid .row{display:block}.tariff-grid .price{margin-top:14px}}
@media(max-width:700px){.cabinet-header{padding:18px 5vw}.cabinet-header img{width:150px}.demo-banner{font-size:11px;letter-spacing:0}.cabinet-layout{display:block;padding:30px 5vw 40px}h1{font-size:36px;letter-spacing:-1.5px}h2{font-size:23px}.welcome{padding:0}.welcome h1{font-size:52px;letter-spacing:-2px}.card{padding:22px}.dashboard,.tariff-grid,.actions,.profile-grid{grid-template-columns:1fr;gap:16px}.balance-value{font-size:58px}.actions{grid-template-columns:1fr 1fr}.action{padding:18px 14px;font-size:16px}.action span{font-size:12px}.button-row>*{flex:1 1 180px}.tariff-grid .row{display:flex}.tariff-grid .price{margin-top:0}.cabinet-layout #cabinet-nav{position:fixed;inset:auto 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;z-index:20;background:var(--panel);border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom))}.cabinet-layout #cabinet-nav button{font-size:11px;padding:14px 2px;min-height:48px;text-align:center;overflow-wrap:anywhere}.cabinet-footer{padding-bottom:calc(104px + env(safe-area-inset-bottom))}.toast{bottom:calc(85px + env(safe-area-inset-bottom));left:16px;right:16px}.support-head,.chat-log{padding:18px}.chat-compose{padding:16px;gap:8px}.chat-compose button{padding:12px;font-size:13px}.message-bubble{font-size:14px;padding:16px}dialog{padding:22px}.note{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:360px){.cabinet-layout #cabinet-nav button{font-size:10px;padding-inline:0;white-space:nowrap}}

/* Consistent rhythm, readable cards and touch navigation across all six screens. */
html{scroll-padding-bottom:110px}
body{line-height:1.5}
button,a,input,textarea{touch-action:manipulation}
.cabinet-header{padding-block:22px}
.cabinet-header .back-link{border:1px solid var(--line);padding:12px 18px;color:var(--fg)}
.demo-banner{background:#1c201c;letter-spacing:.02em}
.cabinet-layout{gap:40px;padding-top:40px;grid-template-columns:190px minmax(0,1fr)}
#cabinet-nav{border:1px solid var(--line);padding:8px;background:#1c201c}
#cabinet-nav button{display:flex;align-items:center;gap:12px;line-height:1.3;min-height:52px;padding:14px}
#cabinet-nav svg{width:21px;height:21px;flex-shrink:0}
#cabinet-nav button:hover:not([aria-current]){background:var(--panel);color:var(--fg)}
h1{font-size:clamp(36px,4.2vw,60px);line-height:1.08;letter-spacing:-2px;text-wrap:balance;margin-bottom:30px}
h2,h3{text-wrap:balance;line-height:1.3}
#screen>.muted{max-width:65ch;margin-bottom:28px}
.card{padding:28px;box-shadow:0 10px 30px #0000000c}
.dashboard .card{display:flex;flex-direction:column}
.dashboard .card .button-row{margin-top:auto;padding-top:24px}
.balance .primary{margin-top:auto}
.balance-value{line-height:1.1}
.tariff-grid .card{display:flex;flex-direction:column;gap:12px}
.tariff-grid h2{margin:0}
.tariff-grid .row{align-items:baseline}
.tariff-grid .row:first-child{align-items:center;min-height:44px}
.tariff-grid .price{white-space:nowrap}
.tariff-grid .value{font-size:clamp(32px,3vw,42px)}
.tariff-grid .value small{display:block;font-size:13px;margin-top:4px}
.tariff-grid .card>p{margin:8px 0 16px}
.tariff-grid .card>button{margin-top:auto;width:100%}
.tariff-current{position:relative;background:linear-gradient(140deg,#ee742713,var(--panel));border-width:1px}
.tariff-current .badge{background:var(--accent);border-color:var(--accent);color:#161916;font-weight:700}
.profile-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.profile-grid>section{min-width:0}
.profile-grid>section:last-child{padding:28px;border:1px solid var(--line)}
.history{max-height:560px;overflow:auto;overscroll-behavior:contain}
.history li{overflow-wrap:anywhere}
.support-panel{max-width:none}
.support-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.support-head strong{margin:0}
.support-head>.muted{font-size:13px;max-width:240px}
.chat-log{min-height:260px}
.chat-compose textarea{font-size:16px;min-height:56px}
.pause-card .primary{width:100%}
.back-link,.primary,.secondary,.action,#cabinet-nav button{transition:background-color .18s,border-color .18s,transform .18s}
dialog{border-top:3px solid var(--accent);overscroll-behavior:contain}
dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}
body:has(dialog[open]){overflow:hidden}
.toast{line-height:1.5;max-width:min(440px,calc(100vw - 32px))}
@media(hover:hover){.primary:hover:not(:disabled){filter:brightness(1.1)}.action:hover{background:#30372e;transform:translateY(-2px)}}
@media(max-width:1100px){.cabinet-layout{grid-template-columns:165px minmax(0,1fr);gap:26px}.profile-grid{grid-template-columns:1fr}.tariff-grid .row{display:flex;flex-wrap:wrap;gap:10px}.tariff-grid .price{margin:0}}
@media(max-width:700px){
 .cabinet-header{padding-block:16px}.cabinet-header img{width:140px}.cabinet-header .back-link{font-size:12px;padding:10px 12px}.demo-banner{font-size:11px;padding-block:10px}
 .cabinet-layout{display:block;padding-top:30px;padding-bottom:32px}h1{font-size:clamp(32px,8.7vw,44px);line-height:1.08;letter-spacing:-1.3px;margin:12px 0 26px}.welcome h1{font-size:clamp(44px,12vw,68px)}
 .card,.profile-grid>section:last-child{padding:22px}.balance-value{font-size:56px;margin:20px 0 12px}.dashboard .card .button-row{padding-top:8px}.tariff-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tariff-grid .card{padding:18px}.tariff-grid h2{font-size:21px}.tariff-grid .row{display:flex;gap:8px}.tariff-grid .row:first-child{min-height:64px;align-content:start}.tariff-grid .badge{font-size:10px;padding:5px 8px}.tariff-grid .card>p{font-size:13px}.tariff-grid .price{font-size:20px}.tariff-grid .secondary{padding:12px 8px;font-size:13px;min-height:48px}
 .cabinet-layout #cabinet-nav{padding:8px 4px calc(8px + env(safe-area-inset-bottom));border-inline:0;box-shadow:0 -6px 24px #0003}.cabinet-layout #cabinet-nav button{flex-direction:column;gap:6px;justify-content:center;min-height:56px;font-size:10px;padding:6px 2px;white-space:nowrap}.cabinet-layout #cabinet-nav svg{width:21px;height:21px}.cabinet-layout #cabinet-nav button[aria-current]{background:#ee74271a;color:#ffa465;box-shadow:inset 0 2px var(--accent)}
 .support-head{padding:18px}.chat-log{min-height:220px}.chat-compose{flex-direction:column;align-items:stretch}.chat-compose textarea{flex:auto}.chat-compose button{width:100%}.chat-quick button{flex:1 1 110px}.actions{gap:12px}.action{line-height:1.4}.toast{bottom:calc(92px + env(safe-area-inset-bottom));font-size:13px;padding:14px 16px}.cabinet-footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}
@media(max-width:480px){.tariff-grid{grid-template-columns:1fr}.tariff-grid .row:first-child{min-height:44px}.tariff-grid .value small{display:inline}.tariff-grid .card>p{font-size:14px}.tariff-grid .secondary{font-size:14px}.actions{grid-template-columns:1fr}.balance-value{font-size:50px}}
@media(prefers-reduced-motion:no-preference){#screen>h1,.welcome,.dashboard,.tariff-grid,.pause-card,.profile-grid{animation:cabinet-enter .26s ease-out}dialog[open]{animation:cabinet-enter .18s ease-out}@keyframes cabinet-enter{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
