/* ============================================================
ПОЛНЫЙ ДОСТУП — Shared Base Styles
base.css | Load after vars.css in every user-facing template.
Contains: reset · nav chrome · lang/theme · avatar ·
cards · forms · alerts · toast · section-label
============================================================ */
/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text1);min-height:100vh;transition:background var(--transition),color var(--transition)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
input,select,textarea{font-family:var(--font)}
/* ── NAV ──────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;background:rgba(13,26,17,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
[data-theme="light"] .nav{background:rgba(244,247,245,.95)}
/* Header content is centered to --container-max so the logo (left) and control
cluster (right) align with the page content on every app page. The full-width
bar (bg/border) still spans edge-to-edge. Full-screen pages (vault file
manager) opt out with .nav-inner.full to use the whole width. */
.nav-inner{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--sp-6);display:flex;align-items:center;gap:var(--sp-4)}
.nav-inner.full{max-width:none}
.nav-logo{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
.nav-wordmark{font-size:var(--text-sm);font-weight:700;color:var(--text1);white-space:nowrap}
/* margin-left:auto keeps the right group pinned to the right edge even when the
middle flex element (e.g. .nav-tabs, flex:1) is hidden on mobile — otherwise
logo + controls collapse together on the left. */
.nav-right{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;margin-left:auto}
/* ── LANG SWITCH + THEME TOGGLE ──────────────────────────── */
.lang-sw{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:2px;gap:2px}
.lb{padding:2px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;color:var(--text2);transition:all var(--transition);cursor:pointer}
.lb.on{background:var(--cta);color:#fff}
.theme-btn{width:32px;height:32px;border-radius:var(--radius-full);background:var(--surface);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
/* ── BACK BUTTON (profile / settings) ────────────────────── */
.back-btn{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--text2);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);border:1px solid var(--border);transition:all var(--transition)}
.back-btn:hover{border-color:var(--border2);color:var(--text1)}
/* ── AVATAR ───────────────────────────────────────────────── */
.avatar{width:34px;height:34px;border-radius:var(--radius-full);background:var(--cta);color:#fff;font-size:var(--text-sm);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex-shrink:0;user-select:none}
.avatar-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-md);padding:var(--sp-2);min-width:180px;display:none;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.avatar-menu.open{display:block}
.avatar-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text2);cursor:pointer;transition:all var(--transition)}
.avatar-item:hover{background:var(--surface2);color:var(--text1)}
.avatar-item.danger{color:#ef4444}
.avatar-item.danger:hover{background:rgba(239,68,68,.08)}
.avatar-sep{height:1px;background:var(--border);margin:var(--sp-1) 0}
/* ── CARDS ────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.card-body{padding:var(--sp-6) var(--sp-8)}
/* ── FORMS ────────────────────────────────────────────────── */
/* Labels use caps-tracking to read as category names, not shouting */
.form-group{margin-bottom:var(--sp-6)}
.form-group label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text2);margin-bottom:var(--sp-2)}
.form-input{width:100%;padding:var(--sp-3) var(--sp-4);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text1);font-size:var(--text-base);line-height:var(--lh-body);transition:border-color var(--transition)}
.form-input:focus{outline:none;border-color:var(--accent)}
.form-input:disabled{opacity:.45;cursor:not-allowed}
.form-input::placeholder{color:var(--text3)}
.form-note{font-size:var(--text-xs);color:var(--text3);margin-top:var(--sp-2);line-height:var(--lh-body)}
/* ── PRIMARY BUTTON ───────────────────────────────────────── */
.btn-primary{width:100%;padding:var(--sp-3) var(--sp-6);background:var(--cta);color:#fff;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:600;transition:background var(--transition);display:flex;align-items:center;justify-content:center;gap:var(--sp-2)}
.btn-primary:hover{background:var(--cta-h)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
/* ── ALERTS ───────────────────────────────────────────────── */
.alert{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--sp-6);line-height:var(--lh-body)}
.alert-ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok)}
.alert-err{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err)}
/* ── TOAST ────────────────────────────────────────────────── */
/* z-index above every modal overlay (max 900) — a toast under a
backdrop-filter layer gets blurred and becomes unreadable */
.toast{position:fixed;bottom:var(--sp-8);right:var(--sp-6);background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-6);font-size:var(--text-sm);color:var(--text1);box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;transform:translateY(8px);transition:all .3s ease;z-index:1000;pointer-events:none;display:flex;align-items:center;gap:var(--sp-2)}
.toast.show{opacity:1;transform:translateY(0)}
/* ── CONFIRM / ALERT DIALOG (dialog.js) ───────────────────── */
/* Styled replacement for window.confirm/alert — mirrors the order modal */
.cdlg-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);opacity:0;pointer-events:none;transition:opacity .2s ease}
.cdlg-overlay.open{opacity:1;pointer-events:auto}
.cdlg{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:var(--sp-8);width:100%;max-width:420px;transform:translateY(12px);transition:transform .2s ease}
.cdlg-overlay.open .cdlg{transform:translateY(0)}
.cdlg-icon{width:56px;height:56px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);color:var(--accent);background:var(--surface2)}
.cdlg-icon.danger{color:#ef4444;background:rgba(239,68,68,.1)}
.cdlg-title{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--sp-1)}
.cdlg-msg{font-size:var(--text-sm);color:var(--text2);margin:var(--sp-2) 0 var(--sp-6);line-height:var(--lh-body)}
.cdlg-actions{display:flex;gap:var(--sp-3);justify-content:flex-end}
.cdlg-btn-cancel{padding:var(--sp-3) var(--sp-6);border-radius:var(--radius-md);border:1px solid var(--border2);color:var(--text2);font-size:var(--text-sm);font-weight:600;transition:all var(--transition)}
.cdlg-btn-cancel:hover{border-color:var(--accent);color:var(--accent)}
.cdlg-btn-ok{padding:var(--sp-3) var(--sp-6);border-radius:var(--radius-md);background:var(--cta);border:1px solid transparent;color:#fff;font-size:var(--text-sm);font-weight:700;transition:all var(--transition)}
.cdlg-btn-ok:hover{filter:brightness(1.1)}
.cdlg-btn-ok.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#ef4444}
.cdlg-btn-ok.danger:hover{background:rgba(239,68,68,.2);border-color:#ef4444;filter:none}
/* ── SECTION LABEL ────────────────────────────────────────── */
/* Uppercase tracking makes it read as a category, not a heading */
.section-label{font-size:var(--text-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text3);margin-bottom:var(--sp-3)}
/* ============================================================
UTILITY LAYER
Small, token-based classes that replace one-off inline styles.
Genuinely dynamic values (width:${pct}%, background:${color})
still belong inline — those are data, not style.
============================================================ */
/* ── LAYOUT / FLEX ────────────────────────────────────────── */
.row {display:flex;align-items:center}
.row-between{display:flex;align-items:center;justify-content:space-between}
.col {display:flex;flex-direction:column}
.center {display:flex;align-items:center;justify-content:center}
.wrap {flex-wrap:wrap}
.grow {flex:1}
.w-full {width:100%}
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)}
/* ── SPACING (only the steps templates actually use) ──────── */
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-6{margin-top:var(--sp-6)}
.mt-8{margin-top:var(--sp-8)} .mt-12{margin-top:var(--sp-12)}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
/* ── TEXT ─────────────────────────────────────────────────── */
.text-center{text-align:center} .text-right{text-align:right}
.text-muted {color:var(--text2)} .text-subtle{color:var(--text3)}
.text-danger{color:var(--err)} .text-ok{color:var(--ok)}
.text-xs{font-size:var(--text-xs)} .text-sm{font-size:var(--text-sm)} .text-base{font-size:var(--text-base)}
.fw-semibold{font-weight:var(--fw-semibold)} .fw-bold{font-weight:var(--fw-bold)}
/* Inline caps micro-label (nav sub-brand, chip) — like .section-label but no margin */
.caps-label{font-size:var(--text-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text3)}
/* ── VISIBILITY / STATE ───────────────────────────────────── */
.hidden{display:none !important}
.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
/* ── EMPTY / PLACEHOLDER STATE ────────────────────────────── */
.empty-state{text-align:center;padding:var(--sp-10);color:var(--text3);font-size:var(--text-sm)}
.empty-state.span-grid{grid-column:1/-1}
/* ── METER / PROGRESS BAR ─────────────────────────────────── */
/* Track is the class; the fill WIDTH stays inline (it's a live value):
*/
.meter{height:6px;background:var(--surface2);border-radius:var(--radius-full);overflow:hidden}
.meter-fill{display:block;height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width .3s ease}
/* ── COLOR CHIP (plan / bucket icon) ──────────────────────── */
/* background stays inline (dynamic per plan): style="background:${pl.color}" */
.color-chip{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--accent)}
/* ── SCALABLE ICON BOX ────────────────────────────────────── */
/* Give this a size (class or inline w/h) and drop an icon in it — the icon
scales to the box width. Must be a BLOCK container, not flex: Chromium (Blink,
incl. Yandex Browser) fails to size an