@import url('/cabinet/assets/cabinet-desktop-20261017.css');

#renew-settings label { display:block; margin:16px 0 8px; font-weight:600; }
#renew-duration { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:#111; font:inherit; }
#renew-settings button { width:100%; margin-top:12px; white-space:normal; }
#renew-settings p { line-height:1.65; overflow-wrap:anywhere; }
#renew-duration:focus-visible { outline:2px solid #ddd; outline-offset:2px; }

/* Shared heading rhythm: content panels start on the same baseline. */
.topup-panel .panel-heading,.history-panel .panel-heading,.devices-panel .panel-heading { display:flex; align-items:center; min-height:34px; margin:0 0 20px; }
.topup-panel .panel-heading .compact,.history-panel .panel-heading .compact,.devices-panel .panel-heading .compact,.account-panel>.compact { display:none; }
.topup-panel h2,.history-panel h2,.devices-panel h2,.account-panel h2 { margin:0; font-size:24px; line-height:1.35; letter-spacing:-.3px; }
.topup-panel .status,.devices-panel .status { flex:none; min-height:30px; display:inline-flex; align-items:center; padding:4px 11px; margin:0; font-size:12px; line-height:1.4; }
.topup-copy { margin:0 0 12px; font-size:15px; line-height:1.65; }
.topup-panel>.compact,.topup-form>.compact { margin:0; color:var(--muted); font-size:14px; line-height:1.65; letter-spacing:normal; text-transform:none; font-weight:400; }
.topup-form { margin-top:20px; gap:10px; }
.topup-presets { display:flex; flex-wrap:wrap; gap:8px; border:0; padding:0; margin:0 0 10px; }
.topup-presets button { min-width:72px; min-height:42px; margin:0; padding:9px 14px; font-size:14px; line-height:1.4; border-radius:8px; }
.topup-form label { margin:4px 0 0; font-size:14px; line-height:1.5; font-weight:600; }
.topup-form input { margin:0; height:50px; width:100%; }
.topup-form .topup-submit { margin:0; min-height:50px; width:100%; }
.topup-form>.compact { margin-top:8px; }

/* Receipts are a separate row, so a long history cannot stretch the form. */
#simple-wallet { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.history-panel { display:flex; flex-direction:column; min-width:0; }
.history-panel .panel-heading { flex:none; }
.history-list { min-width:0; margin-top:0; }
.history-item { min-height:66px; padding:14px 0; gap:6px 16px; }
.history-title { min-width:0; font-size:15px; font-weight:650; line-height:1.45; }
.history-meta { font-size:12px; line-height:1.5; margin-top:3px; }
.history-amount { font-size:15px; line-height:1.45; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.history-toggle { width:100%; min-height:46px; margin-top:18px; padding:10px 16px; font-size:14px; line-height:1.5; }
.history-panel .empty { flex:1; display:flex; align-items:center; justify-content:center; padding:32px 0; margin:0; font-size:15px; }
#receipts-panel { grid-column:1/-1; width:100%; min-width:0; padding:28px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
#receipts-panel h3 { margin:0 0 12px; font-size:22px; line-height:1.35; letter-spacing:-.3px; }
#receipts-message { max-width:74ch; margin:0 0 18px; font-size:14px; line-height:1.6; }
#receipts-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px 24px; }
.receipt-item { min-width:0; max-width:700px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; gap:12px 20px; margin:0; padding:18px 0 0; border-top:1px solid var(--line); }
.receipt-item>p,.receipt-item>a { grid-column:1; margin:0; font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.receipt-item>p:first-child { font-weight:600; }
.receipt-item>img { grid-column:2; grid-row:1/4; width:112px; height:112px; border-radius:6px; }
#receipts-refresh { width:auto; min-width:190px; margin-top:22px; }

.device-row>div { min-width:0; }
.device-name,.device-detail { overflow-wrap:anywhere; }
.device-remove { flex-shrink:0; }
.account-panel h2 { margin-bottom:24px; }
.account-row { display:grid; grid-template-columns:minmax(90px,140px) minmax(0,1fr); gap:16px; align-items:start; }
.account-row strong { max-width:none; min-width:0; text-align:right; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.account-panel .support-link { display:inline-block; margin-top:20px; }
.account-panel .account-logout { margin-top:18px; }
.configuration-field h3 { line-height:1.5; }
.subscription-tools .balance { text-align:left; }
.subscription-tools .balance>span,.subscription-tools .balance strong { align-self:stretch; text-align:left; white-space:normal; }

@media(min-width:1000px) {
 .history-list { max-height:480px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#555 transparent; }
 .history-panel .history-toggle { margin-top:auto; }
 .history-list:not(:empty) { margin-bottom:18px; }
}
@media(max-width:999px) {
 .topup-panel h2,.history-panel h2,.devices-panel h2,.account-panel h2 { font-size:22px; }
 #receipts-panel { padding:22px; }
 #receipts-panel h3 { font-size:21px; }
 .history-item { min-height:68px; }
 #receipts-refresh { width:100%; }
 .device-row { align-items:flex-start; gap:12px; }
 .device-remove { min-height:40px; padding:0 12px; font-size:13px; }
}
@media(max-width:440px) {
 .receipt-item { grid-template-columns:minmax(0,1fr); }
 .receipt-item>img { grid-column:1; grid-row:auto; }
 .topup-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .topup-presets button { min-width:0; width:100%; }
}

/* 22.10: compact four-section cabinet. Existing layout/import chain retained. */
.dashboard { position:relative; }
.topbar { min-height:48px; padding:0; border-bottom:0; }
.top-actions #account-open { display:none; }
.welcome { padding-right:150px; min-height:78px; }
.welcome .compact { display:none; }
.dashboard-refresh { position:absolute; right:0; top:6px; text-align:right; max-width:220px; }
.dashboard-refresh button { min-height:44px; font-size:14px; }
#account-refresh-message { font-size:12px; line-height:1.4; margin:8px 0 0; color:var(--muted); }
#simple-subscription { grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr); }
.subscription-panel { min-height:570px; padding:32px; }
.subscription-panel .status { padding:6px 12px; border-radius:6px; background:#303030; font-size:13px; }
.subscription-panel .status:before { display:none; }
.subscription-panel h2 { font-size:30px; }
.connection-overview { padding-top:30px; }
#connection-headline { font-size:28px; }
#connection-caption { font-size:15px; }
.subscription-facts { margin:24px 0 30px; padding-top:0; border-top:0; gap:22px 0; }
.subscription-facts dd { font-size:24px; }
.subscription-facts dt { font-size:14px; }
.subscription-tools { padding:32px; gap:24px; }
.subscription-tools .balance>span { font-size:15px; }
.subscription-tools .balance strong { font-size:42px; }
.tools-configure h2 { font-size:22px; }
.balance-breakdown { margin:6px 0; }
#configuration .panel-heading { align-items:center; margin-bottom:24px; }
#configuration .panel-heading h2 { margin:0; }
#configuration-close { padding:10px 0 10px 12px; }
.history-scope { font-size:13px; line-height:1.5; margin:0 0 16px; }
.history-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.65fr); gap:6px 12px; margin-bottom:16px; }
.history-controls label:first-child { grid-column:1; grid-row:1; }
.history-controls input { grid-column:1; grid-row:2; }
.history-controls label[for=history-filter] { grid-column:2; grid-row:1; }
.history-controls select { grid-column:2; grid-row:2; }
.history-controls input,.history-controls select { width:100%; min-width:0; height:44px; padding:10px 12px; background:#111; color:var(--text); border:1px solid #454545; border-radius:8px; font:inherit; font-size:14px; }
.history-controls input:focus-visible,.history-controls select:focus-visible { outline:2px solid #ddd; outline-offset:2px; }
#connect-dialog { width:min(640px,calc(100% - 32px)); padding:28px; max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--line-strong); border-radius:16px; background:#181818; color:var(--text); }
#connect-dialog::backdrop { background:rgb(0 0 0 / 75%); }
#connect-dialog h2 { font-size:26px; line-height:1.3; margin:0; }
#connect-dialog .panel-heading { align-items:center; gap:16px; margin-bottom:16px; }
#connect-dialog .panel-heading button { flex:none; width:42px; padding:0; }
#connect-dialog p { font-size:14px; line-height:1.6; }
#connect-dialog>.action { width:100%; margin:20px 0 16px; font-size:14px; padding:12px; }
#connect-dialog>.compact { text-transform:none; letter-spacing:0; font-weight:400; margin:0; }
.connect-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.connect-option { display:flex; flex-direction:column; gap:12px; padding:20px; color:var(--text); background:#101010; border:1px solid #454545; border-radius:10px; text-decoration:none; }
.connect-option:hover { border-color:#eee; background:#222; }
.connect-option strong { display:flex; justify-content:space-between; font-size:22px; }
.connect-option>span { font-size:14px; line-height:1.5; color:var(--muted); }
.connect-option .connect-option-action { margin-top:auto; color:#fff; font-weight:650; padding-top:10px; }
.connect-option[hidden] { display:none; }
.auth-stage { grid-template-columns:minmax(0,1fr) minmax(320px,420px); gap:56px; min-height:calc(100svh - 180px); padding:48px 0; }
.auth-copy h1 { font-size:clamp(36px,4.4vw,58px); line-height:1.08; letter-spacing:-2px; }
.auth-copy p:last-child { font-size:16px; max-width:38ch; }
.auth-panel .auth-logo { display:none; }
.auth-panel .backup-form label { font-size:14px; }
.auth-panel #telegram-hint { font-size:14px; }
.auth-panel .bot-link { background:transparent; color:var(--text); border-color:#505050; font-size:14px; }
#auth-status:empty { display:none; }
.password-visibility { justify-self:end; font-size:13px; }
body:has(#dashboard.hidden) #account-open { display:none; }
body:has(#dashboard.hidden) .topbar { min-height:78px; }
button:disabled { opacity:.55; cursor:wait; }
[hidden] { display:none!important; }
@media(min-width:1900px) {
 .dashboard-refresh { top:24px; }
 .subscription-panel { min-height:580px; padding:36px; }
 .subscription-tools { padding:36px; }
}
@media(min-width:1000px) and (max-width:1199px) {
 #simple-subscription { grid-template-columns:minmax(0,1.2fr) minmax(250px,1fr); }
 .subscription-panel,.subscription-tools { padding:22px; }
 #connection-headline { font-size:25px; }
 .subscription-facts dd { font-size:20px; }
}
@media(max-width:999px) {
 .top-actions #account-open { display:none; }
 .welcome { padding-right:0; min-height:0; margin-bottom:20px; }
 .welcome h1 { font-size:30px; }
 .dashboard-refresh { position:static; display:flex; align-items:center; gap:12px; text-align:left; max-width:none; margin:0 0 20px; }
 #account-refresh-message { margin:0; }
 #simple-navigation { grid-template-columns:repeat(4,minmax(0,1fr)); }
 #simple-navigation .desktop-account-tab { display:flex; }
 #simple-navigation button { font-size:11px; }
 #simple-navigation button[aria-selected=true] { border-radius:8px; background:#292929; }
 .subscription-panel { min-height:0; padding:22px; }
 .subscription-tools { padding:22px; }
 #connection-headline { font-size:24px; }
 .subscription-facts dd { font-size:20px; }
 .subscription-tools .balance strong { font-size:34px; }
 .auth-stage { display:flex; flex-direction:column; align-items:stretch; gap:24px; min-height:0; padding:32px 0 10px; }
 .auth-copy h1 { font-size:38px; letter-spacing:-1.2px; }
 .auth-copy p:last-child { margin-bottom:0; }
 .auth-stage .auth-panel { max-width:none; }
}
@media(max-width:440px) {
 .shell { padding-left:18px; padding-right:18px; }
 .history-controls { grid-template-columns:1fr; }
 .history-controls label[for=history-filter] { grid-column:1; grid-row:3; margin-top:8px; }
 .history-controls select { grid-column:1; grid-row:4; }
 #connect-dialog { padding:22px; }
 .connect-options { grid-template-columns:1fr; }
 .connect-option { padding:16px; }
}
