/* Кабинет и админка: поверх site.css, те же токены. */
.app { padding-block: 24px 64px; display: grid; gap: 24px; }
.app h1 { font-size: clamp(24px, 4vw, 32px); line-height: 1.2; }
.app h2 { font-size: 20px; line-height: 28px; }
.small { font-size: 13px; line-height: 18px; }
.head { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
.head .eyebrow a { color: inherit; }
.block { display: grid; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-cell); padding: 24px; display: grid; gap: 12px; align-content: start; }
.auth { display: grid; max-width: 420px; width: 100%; margin: 24px auto 0; }
.form { display: grid; gap: 12px; }
.app label { display: grid; gap: 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.app input, .app select { font: 400 16px/24px var(--font-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; width: 100%; min-width: 0; }
.app input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.inline { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.inline .grow { flex: 1 1 240px; }
.inline.tight { gap: 6px; margin-top: 6px; }
.inline.tight input { width: 150px; padding: 4px 8px; font-size: 14px; }
.btn.sm { padding: 4px 12px; font-size: 14px; line-height: 20px; }
.linkbtn { background: none; border: 0; padding: 0; font: 600 16px/24px var(--font-sans); color: var(--ink); cursor: pointer; }
.linkbtn:hover { color: var(--brand); }
.top nav form { display: inline; }
.flash { padding: 12px 16px; border-radius: var(--radius-cell); font-weight: 600; }
.flash.ok { background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.flash.bad { background: color-mix(in srgb, #b42318 14%, var(--surface)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-cell); padding: 16px 20px; display: grid; gap: 4px; align-content: start; color: var(--ink); text-decoration: none; min-width: 0; }
a.tile:hover { border-color: var(--brand); }
.tile.off { opacity: .6; }
.tile .big { font: 700 28px/1.1 var(--font-display); letter-spacing: -.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.big.neg, td.neg { color: #b42318; }
.big.warn { color: var(--brand); }
.mono { font-family: var(--font-mono); }
.list { width: 100%; border-collapse: collapse; font-size: 15px; }
.list th { text-align: left; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.list td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.list .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 600; background: var(--paper); border: 1px solid var(--line); }
.pill.new { background: color-mix(in srgb, var(--saffron) 25%, var(--surface)); border-color: transparent; }
.pill.paid { background: color-mix(in srgb, var(--success) 18%, var(--surface)); border-color: transparent; }
.pill.cancelled { color: var(--ink-muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs a { padding: 6px 12px; border-radius: var(--radius-cell); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.tabs a[aria-current] { background: var(--ink); color: var(--paper); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 18px; border-bottom: 1px solid var(--line); }
.bar { flex: 1 1 0; min-width: 4px; height: var(--h); background: var(--brand); border-radius: 3px 3px 0 0; position: relative; }
.bar span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 11px; line-height: 16px; color: var(--ink-muted); display: none; white-space: nowrap; }
.bar:hover span, .bar:last-child span { display: block; }
.bars-axis { display: flex; justify-content: space-between; }
@media (max-width: 640px) { .list .hide-sm { display: none; } }
.buyform { gap: 20px; }
.packs-pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.packs-pick legend { font-size: 13px; color: var(--ink-muted); margin-bottom: 8px; }
.pick { position: relative; display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-cell); cursor: pointer; background: var(--paper); }
.pick input { position: absolute; opacity: 0; }
.pick:has(input:checked) { border: 2px solid var(--brand); padding: 13px 15px; background: var(--surface); }
.pick:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.pick .qty { font: 700 22px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pick .price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pick.hot .price { background: var(--saffron); color: var(--on-saffron); justify-self: start; padding: 0 8px; border-radius: var(--radius-sm); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.grid2 .wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.methods { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.methods legend { font-size: 13px; color: var(--ink-muted); margin-bottom: 8px; }
.method { display: flex !important; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-cell); cursor: pointer; background: var(--paper); color: var(--ink) !important; font-size: 15px !important; }
.method > span { display: grid; gap: 2px; }
.method input { width: auto !important; margin-top: 4px; accent-color: var(--brand); }
.method:has(input:checked) { border: 2px solid var(--brand); padding: 13px 15px; background: var(--surface); }
/* реквизиты организации нужны только для счёта */
.buyform:has(input[name="method"][value="card"]:checked) .org { display: none; }
.keycard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-cell); padding: 16px 20px; display: grid; gap: 12px; }
.keyhead { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.keyhead .grow { flex: 1 1 260px; }
.keyhead .grow input { width: 100%; max-width: 360px; font-weight: 600; }
.keyval { display: flex; gap: 8px; align-items: center; }
.keyval code { font-size: 18px; letter-spacing: .04em; padding: 4px 10px; background: var(--paper); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.revoke { justify-self: start; }
.linkbtn.danger { color: #b42318; font-size: 13px; font-weight: 600; }