/* =========================================
   SpeedBikeGo — Modern Compact v6 (themes)
   Light/Dark + iOS-style translucency (light)
   ========================================= */

/* ========= Theme tokens ========= */

/* Dark (default / backward-compat) */
:root{
  /* Base */
  --bg:#0b111a; --layer:#111a27; --layer2:#162133; --border:#223047;
  --text:#e7eef8; --muted:#9eb0c6; --accent:#3ea2ff;
  --ok:#43e07a; --warn:#ffd166; --danger:#ff6b6b;

  --radius:12px; --radius-sm:10px; --appbar-h:56px;
  --fs:15px; --fs-sm:13px; --lh:1.45;

  --card-min:220px; --card-max:280px;

  /* Derived shades */
  --bg-2: color-mix(in oklab, var(--bg), white 4%);
  --text-2: color-mix(in oklab, var(--text), black 10%);
  --text-3: color-mix(in oklab, var(--text), black 30%);
  --hover-bg: rgba(255,255,255,.06);
  --soft-bg: color-mix(in oklab, var(--layer) 92%, black 8%);
  --overlay: rgba(0,0,0,.5);
  --table-stripe: color-mix(in oklab, var(--layer), white 2%);
  --link: var(--accent);
  --link-hover: color-mix(in oklab, var(--accent), white 20%);
  --code-bg:#0e141f;
  --kbd-bg: color-mix(in oklab, var(--layer2), white 6%);

  /* AppBar / table head */
  --appbar-opacity: 82%;
  --appbar-bg: color-mix(in oklab, var(--layer) var(--appbar-opacity), transparent);
  --appbar-border: rgba(34,48,71,.7);
  --table-head-bg: color-mix(in oklab, var(--layer) 95%, transparent);
  --table-head-bg-sticky: color-mix(in oklab, var(--layer) 98%, transparent);

  /* Buttons */
  --btn-hover-border: #355074;
  --btn-primary-bg:#0f1c2a; --btn-primary-border:#2a506e;
  --btn-danger-bg:#2a1515;  --btn-danger-border:#6a2e2e; --btn-danger-text:#ffd7d7;
  --btn-outline-border:#33465f;

  /* Calendar states */
  --paid-bg: rgba(75,226,122,0.18); --paid-border:#2b6a42; --paid-solid:#2ecc71;
  --res-bg:  rgba(255,209,102,0.18); --res-border:#5c4a1f; --res-solid:#f39c12;

  /* Accents for outlines */
  --today-outline: color-mix(in oklab, var(--text) 35%, transparent);

  /* Elevation (mostly unused in dark to save perf) */
  --surface-blur: 0px;
  --shadow-1: 0 6px 20px rgba(0,0,0,.28);
  --inner-1: inset 0 1px 0 rgba(255,255,255,.03);
  --card-bg: var(--layer);
  --card-stroke: var(--border);
}

/* Light theme — “Tahoe soft glass” */
html[data-theme="light"]{
  /* Base */
  --bg:#eef2f7;
  --layer:#e7ecf4;
  --layer2:#dde4ef;
  --border:#c4d0e3;

  --text:#0b1526;
  --muted:#55647a;
  --accent:#6a63ff; /* мягкий фиолетовый в синеву */
  --ok:#1a9a58; --warn:#b07200; --danger:#c63b3b;

  /* ГЛАВНЫЙ ГРАДИЕНТ (усиленный фиолетовый, без чистого белого) */
  --page-bg:
    radial-gradient(1200px 800px at 85% -10%, rgba(164,130,255,.45), transparent 65%),
    radial-gradient(900px 600px at 12% 0%, rgba(255,160,220,.36), transparent 60%),
    radial-gradient(1600px 900px at -10% 110%, rgba(120,190,255,.22), transparent 60%),
    linear-gradient(180deg, #ede9ff 0%, #f0ecff 38%, #eef2f9 100%);

  /* Derived */
  --bg-2: color-mix(in oklab, var(--bg), black 6%);
  --text-2: color-mix(in oklab, var(--text), white 12%);
  --text-3: color-mix(in oklab, var(--text), white 32%);
  --hover-bg: rgba(10,20,40,.06);
  --soft-bg: color-mix(in oklab, var(--layer) 92%, black 8%);
  --overlay: rgba(10,20,40,.42);
  --table-stripe: color-mix(in oklab, var(--layer), black 3%);
  --link: color-mix(in oklab, var(--accent), #3aa2ff 15%);
  --link-hover: color-mix(in oklab, var(--accent), black 14%);
  --code-bg:#f5f7fb;
  --kbd-bg: color-mix(in oklab, var(--layer2), black 6%);

  /* Translucent bars */
  --appbar-opacity: 78%;
  --appbar-bg: color-mix(in oklab, var(--layer) var(--appbar-opacity), transparent);
  --appbar-border: color-mix(in oklab, var(--border), black 12%);
  --table-head-bg: color-mix(in oklab, var(--layer) 92%, transparent);
  --table-head-bg-sticky: color-mix(in oklab, var(--layer) 96%, transparent);

  /* Glass surfaces */
  --surface-blur: 12px;
  --shadow-1: 0 10px 30px rgba(28,54,90,.12);
  --inner-1: inset 0 1px 0 rgba(255,255,255,.55);
  --card-bg: color-mix(in oklab, var(--layer) 92%, transparent);
  --card-stroke: color-mix(in oklab, var(--border), black 6%);

  /* Buttons */
  --btn-hover-border: rgba(10,20,40,.18);
  --btn-primary-bg:#e7f0ff; --btn-primary-border:#9bc2ff;
  --btn-danger-bg:#ffe9e9;  --btn-danger-border:#f3b3b3; --btn-danger-text:#9b0000;
  --btn-outline-border:#c8d6ea;

  /* Calendar */
  --paid-bg: color-mix(in oklab, var(--ok) 20%, transparent);
  --paid-border: color-mix(in oklab, var(--ok), black 12%);
  --paid-solid: color-mix(in oklab, var(--ok), white 6%);
  --res-bg: color-mix(in oklab, var(--warn) 22%, transparent);
  --res-border: color-mix(in oklab, var(--warn), black 12%);
  --res-solid: color-mix(in oklab, var(--warn), black 6%);

  --today-outline: color-mix(in oklab, var(--text) 35%, transparent);
}

/* Auto light: те же токены, если нет [data-theme] */
@media (prefers-color-scheme: light){
  html:not([data-theme]){ color-scheme: light; }
  html:not([data-theme]) :root{
    --bg:#eef2f7; --layer:#e7ecf4; --layer2:#dde4ef; --border:#c4d0e3;
    --text:#0b1526; --muted:#55647a; --accent:#6a63ff;
    --ok:#1a9a58; --warn:#b07200; --danger:#c63b3b;

    --page-bg:
      radial-gradient(1200px 800px at 85% -10%, rgba(164,130,255,.45), transparent 65%),
      radial-gradient(900px 600px at 12% 0%, rgba(255,160,220,.36), transparent 60%),
      radial-gradient(1600px 900px at -10% 110%, rgba(120,190,255,.22), transparent 60%),
      linear-gradient(180deg, #ede9ff 0%, #f0ecff 38%, #eef2f9 100%);

    --bg-2: color-mix(in oklab, var(--bg), black 6%);
    --text-2: color-mix(in oklab, var(--text), white 12%);
    --text-3: color-mix(in oklab, var(--text), white 32%);
    --hover-bg: rgba(10,20,40,.06);
    --soft-bg: color-mix(in oklab, var(--layer) 92%, black 8%);
    --overlay: rgba(10,20,40,.42);
    --table-stripe: color-mix(in oklab, var(--layer), black 3%);
    --link: color-mix(in oklab, var(--accent), #3aa2ff 15%);
    --link-hover: color-mix(in oklab, var(--accent), black 14%);
    --code-bg:#f5f7fb;
    --kbd-bg: color-mix(in oklab, var(--layer2), black 6%);

    --appbar-opacity: 78%;
    --appbar-bg: color-mix(in oklab, var(--layer) var(--appbar-opacity), transparent);
    --appbar-border: color-mix(in oklab, var(--border), black 12%);
    --table-head-bg: color-mix(in oklab, var(--layer) 92%, transparent);
    --table-head-bg-sticky: color-mix(in oklab, var(--layer) 96%, transparent);

    --surface-blur: 12px;
    --shadow-1: 0 10px 30px rgba(28,54,90,.12);
    --inner-1: inset 0 1px 0 rgba(255,255,255,.55);
    --card-bg: color-mix(in oklab, var(--layer) 92%, transparent);
    --card-stroke: color-mix(in oklab, var(--border), black 6%);

    --btn-hover-border: rgba(10,20,40,.18);
    --btn-primary-bg:#e7f0ff; --btn-primary-border:#9bc2ff;
    --btn-danger-bg:#ffe9e9;  --btn-danger-border:#f3b3b3; --btn-danger-text:#9b0000;
    --btn-outline-border:#c8d6ea;

    --paid-bg: color-mix(in oklab, var(--ok) 20%, transparent);
    --paid-border: color-mix(in oklab, var(--ok), black 12%);
    --paid-solid: color-mix(in oklab, var(--ok), white 6%);
    --res-bg: color-mix(in oklab, var(--warn) 22%, transparent);
    --res-border: color-mix(in oklab, var(--warn), black 12%);
    --res-solid: color-mix(in oklab, var(--warn), black 6%);

    --today-outline: color-mix(in oklab, var(--text) 35%, transparent);
  }
}

/* =========================================
   Base & layout
   ========================================= */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:var(--fs); line-height:var(--lh);
  /* слойный фон: градиенты + базовый цвет */
  background: var(--page-bg, var(--bg));
  /* фиксируем все слои, чтобы градиент был «по всему фону» */
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat;
  color:var(--text);
  padding-top:calc(var(--appbar-h) + env(safe-area-inset-top,0px));
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:12px 16px}
@media (max-width:480px){.container{padding-inline:12px}}
h1{margin:6px 0 0;font-weight:700;font-size:clamp(20px,3.4vw,28px)}
.muted{color:var(--muted)}

/* ---------- Header / App bars ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  background:var(--appbar-bg);
  border-bottom:1px solid var(--appbar-border);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:var(--appbar-h);padding-top:env(safe-area-inset-top,0px)
}
.nav-left{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap}
.nav-left::-webkit-scrollbar{display:none}
.nav-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
.tag{display:inline-flex;align-items:center;gap:6px;padding:8px 8px;border-radius:var(--radius-sm);color:var(--text);transition:background .15s ease,transform .06s ease}
.tag:hover{background:var(--hover-bg);text-decoration:none}
.tag:active{transform:translateY(1px)}
@media (max-width:640px){.nav-left .tag:nth-child(n+3){display:none}}

/* ---------- Buttons ---------- */
.btn,button,input[type="submit"],input[type="button"],input[type="reset"]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:34px;padding:6px 10px;border-radius:10px;font-weight:600;letter-spacing:.2px;
  background:var(--layer);border:1px solid var(--border);color:var(--text);
  box-shadow:var(--inner-1);
  transition:transform .08s ease,filter .18s ease,border-color .18s ease,background .18s ease;
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none
}
.btn:hover,button:hover,input[type="submit"]:hover,input[type="button"]:hover{filter:brightness(1.05);border-color:var(--btn-hover-border)}
.btn:active,button:active{transform:translateY(1px)}
.btn:disabled,button:disabled{opacity:.6;cursor:not-allowed}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--hover-bg);border-color:var(--btn-hover-border)}
.btn-danger{background:var(--btn-danger-bg);border-color:var(--btn-danger-border);color:var(--btn-danger-text)}
.btn-outline{background:transparent;border-color:var(--btn-outline-border)}
.btn-outline:hover{background:var(--hover-bg)}
.btn-sm{min-height:30px;padding:4px 8px;border-radius:8px}
.btn-lg{min-height:42px;padding:10px 14px;border-radius:12px}
.btn-icon{width:30px;min-width:30px;height:30px;padding:0;justify-content:center;border-radius:8px}
.btn-icon.btn-danger{color:var(--btn-danger-text)}

/* Живой primary только в светлой теме */
html[data-theme="light"] .btn-primary{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 22%, transparent),
      color-mix(in oklab, var(--accent) 10%, transparent));
  border-color: color-mix(in oklab, var(--accent), black 20%);
  color: color-mix(in oklab, var(--text), white 6%);
  box-shadow:
    0 8px 22px color-mix(in oklab, var(--accent), black 30% / 20%),
    var(--inner-1);
}
html[data-theme="light"] .btn-primary:hover{
  filter: none;
  transform: translateY(0);
  box-shadow:
    0 10px 26px color-mix(in oklab, var(--accent), black 30% / 26%),
    var(--inner-1);
}

/* ---------- Cards grid (catalog) ---------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),var(--card-max)));justify-content:center}
.card{
  background:var(--card-bg);
  border:1px solid var(--card-stroke);
  border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-1), var(--inner-1);
  -webkit-backdrop-filter:saturate(140%) blur(var(--surface-blur));
  backdrop-filter:saturate(140%) blur(var(--surface-blur));
}
.card .pad{padding:10px}
.card h3{margin:0;font-size:15px}
.card .muted{font-size:13px}
.media{position:relative;width:100%;aspect-ratio:16/9;background:color-mix(in oklab, var(--bg), black 8%);border-bottom:1px solid var(--border);overflow:hidden}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.line-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:2.2em}

/* ---------- Forms ---------- */
.input,select,.file{
  width:100%;min-height:34px;padding:8px 10px;border-radius:10px;
  background:var(--layer2);color:var(--text);border:1px solid var(--border);
  -webkit-backdrop-filter: blur(calc(var(--surface-blur) * .6));
  backdrop-filter: blur(calc(var(--surface-blur) * .6));
  box-shadow: var(--inner-1);
}
textarea.input{min-height:64px;max-height:120px;resize:vertical}
.file{max-width:200px}
.file::-webkit-file-upload-button{visibility:hidden}
.file::file-selector-button{visibility:hidden}
.file{position:relative}
.file:before{
  content:'Выберите файл';position:absolute;left:6px;top:4px;bottom:4px;
  display:inline-flex;align-items:center;padding:0 8px;border-radius:8px;
  background:var(--hover-bg);border:1px solid var(--btn-hover-border);pointer-events:none;font-size:12px;color:var(--text)
}
label{display:block;margin:8px 0 6px;color:var(--muted)}
.form-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

/* компактные inline-формы в таблицах */
.row-form{
  display:grid;
  grid-template-columns:200px 140px 100px 140px 200px minmax(180px,1fr);
  gap:6px;
  align-items:center;
}
.row-form > .input,
.row-form > select,
.row-form > .file{ min-width:0 }
@media (max-width:1000px){
  .row-form{ grid-template-columns:1fr 1fr 100px 140px 1fr; grid-auto-rows:minmax(34px,auto) }
}
@media (max-width:680px){
  .row-form{ grid-template-columns:1fr 1fr; grid-auto-rows:minmax(34px,auto) }
}

/* ---------- Alerts & misc ---------- */
.alert{padding:10px;border-radius:12px;border:1px solid var(--border);background:var(--soft-bg);box-shadow:var(--inner-1)}
.alert-err{
  border-color: color-mix(in oklab, var(--danger), black 40%);
  background: color-mix(in oklab, var(--danger) 18%, var(--bg));
  color: color-mix(in oklab, var(--danger), white 65%);
}
.hr{height:1px;background:var(--border);margin:10px 0}
.footer{border-top:1px solid var(--border);text-align:center;padding:16px;color:var(--muted)} /* legacy */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border-radius:8px;font-size:12px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.badge-ok{color:var(--ok);border-color:color-mix(in oklab, var(--ok), black 40%)}
.badge-warn{color:var(--warn);border-color:color-mix(in oklab, var(--warn), black 55%)}
.badge-muted{color:var(--muted)}

/* ---------- Tables (compact) ---------- */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--inner-1);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(calc(var(--surface-blur) * .5));
  backdrop-filter: blur(calc(var(--surface-blur) * .5));
}
.table th,
.table td{
  border-bottom:1px solid var(--border);
  padding:6px 8px;
  text-align:left;
  font-size:var(--fs-sm);
  vertical-align:top;
}
.table tr:last-child td{ border-bottom:none }

/* НЕ sticky по умолчанию */
.table th{
  color:var(--muted);
  font-weight:600;
  background:var(--table-head-bg);
}

/* sticky только для .table.sticky thead th  */
.table.sticky thead th{
  position:sticky;
  top:calc(var(--appbar-h) + env(safe-area-inset-top, 0px) + 6px);
  z-index:3;
  background:var(--table-head-bg-sticky);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* утилиты */
.cell-ellipsis{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-ell-sm{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-center{text-align:center}

/* ---------- Calendar ---------- */
.legend{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.legend .box{display:inline-flex;align-items:center;gap:6px}
.legend .dot{width:14px;height:14px;border-radius:4px;border:1px solid var(--border);background:transparent}
.legend .dot.dot-paid{background:var(--paid-bg);border-color:var(--paid-border)}
.legend .dot.dot-res{background:var(--res-bg);border-color:var(--res-border)}
.calendar-wrap{margin-top:14px;background:var(--card-bg);border:1px solid var(--card-stroke);border-radius:14px;box-shadow:var(--shadow-1),var(--inner-1);-webkit-backdrop-filter:blur(var(--surface-blur));backdrop-filter:blur(var(--surface-blur))}
.calendar-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
.calendar14{display:flex;gap:6px;overflow-x:auto;padding:10px 12px;-webkit-overflow-scrolling:touch}
.day{width:52px;min-width:52px;height:68px;border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;text-align:center;background:var(--layer)}
.day .wd{color:var(--muted);font-size:11px}.day .d{font-weight:700;margin-top:2px}
.day-free{background:transparent}.day-reserved{background:var(--res-bg);border-color:var(--res-border)}.day-paid{background:var(--paid-bg);border-color:var(--paid-border)}
.day.today{outline:1px dashed var(--accent);outline-offset:2px}

/* --- Tiny calendar on catalog cards --- */
.cal-tiny{
  display:flex;
  gap:3px;
  align-items:center;
  margin-top:8px;
  flex-wrap:nowrap;
  overflow:hidden;
}
.cal-tiny .cell{
  width:10px;height:8px;border-radius:2px;
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  background: transparent;flex:0 0 auto;
}
.cal-tiny .cell.paid{ background:var(--paid-solid); border-color:color-mix(in oklab, var(--paid-solid) 80%, transparent); }
.cal-tiny .cell.reserved{ background:var(--res-solid); border-color:color-mix(in oklab, var(--res-solid) 80%, transparent); }
.cal-tiny .cell.free{ background:transparent; }
.cal-tiny .cell.today{ outline:1px solid var(--today-outline); outline-offset:1px; }

/* компактная легенда (прячется на узких экранах) */
.legend-tiny{
  display:flex;gap:10px;align-items:center;margin-top:6px;
  font-size:.78rem;opacity:.8;
}
.legend-tiny .dot{
  width:10px;height:8px;border-radius:2px;display:inline-block;margin-right:6px;
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);vertical-align:middle;
}
.legend-tiny .dot.paid{ background:var(--paid-solid); border-color:color-mix(in oklab, var(--paid-solid) 80%, transparent); }
.legend-tiny .dot.reserved{ background:var(--res-solid); border-color:color-mix(in oklab, var(--res-solid) 80%, transparent); }
.legend-tiny .dot.free{ background:transparent; }
@media (max-width:480px){
  .legend-tiny{ display:none; }
  .cal-tiny{ gap:2px; }
  .cal-tiny .cell{ width:8px; height:7px; }
}

/* ---------- Mobile menu ---------- */
.menu-toggle{display:none}
@media (max-width:860px){.menu-toggle{display:inline-flex}}
.mobile-menu{position:fixed;inset:0;z-index:1100;display:none}
.mobile-menu.open{display:block}
.mobile-menu[hidden]{display:none}
.mobile-menu::before{content:"";position:absolute;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%)}
.mobile-menu .panel{position:absolute;left:0;right:0;top:calc(var(--appbar-h) + env(safe-area-inset-top,0px));max-height:calc(100% - var(--appbar-h) - env(safe-area-inset-top,0px));overflow:auto;background:var(--card-bg);border-top:1px solid var(--card-stroke);border-bottom:1px solid var(--card-stroke);border-radius:0 0 14px 14px;padding:12px 12px 16px;box-shadow:var(--shadow-1),var(--inner-1);-webkit-backdrop-filter:blur(var(--surface-blur));backdrop-filter:blur(var(--surface-blur))}
.mobile-menu .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mobile-menu .list{display:flex;flex-direction:column;gap:10px}
.mobile-menu .list a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--soft-bg)}
.mobile-menu .list a:hover{background:var(--hover-bg)}

/* ---------- MODALS ---------- */
.modal{position:fixed;inset:0;z-index:1200;display:none}
.modal.open{display:block}
.modal::before{content:"";position:absolute;inset:0;background:var(--overlay);backdrop-filter:blur(6px)}
.modal .dialog{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(720px,92vw);background:var(--card-bg);border:1px solid var(--card-stroke);
  border-radius:16px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.45), var(--inner-1);
  -webkit-backdrop-filter: blur(var(--surface-blur));
  backdrop-filter: blur(var(--surface-blur));
}
.modal .head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.modal .body{padding:12px 14px}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 14px;border-top:1px solid var(--border)}

/* ---------- Focus ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}

/* =========================================================
   Footer v2 — fixed bottom, sidebar-safe
   ========================================================= */

:root{ --footer-cap: 20svh; --sidebar-w: 240px; }
@supports not (height: 1svh){
  :root{ --footer-cap: 20vh; }
}
@media (max-width:1024px){ :root{ --sidebar-w: 0px; } }

.site-footer{
  position:fixed; bottom:0; left:var(--sidebar-w); right:0;
  background:var(--bg-2);
  border-top:1px solid var(--border);
  color:var(--text-2);
  z-index:50;
  max-height:var(--footer-cap);
  overflow:hidden;
  margin:0;
  box-sizing:border-box;
}

.site-footer-inner{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:8px 12px;
  max-height:calc(var(--footer-cap) - 2px);
  overflow:auto;
  box-sizing:border-box;
}

.footer-accord{
  background:var(--soft-bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px 8px;
}
.footer-accord > summary{
  list-style:none; cursor:pointer; user-select:none;
  font-weight:600; display:flex; align-items:center; gap:8px; outline:none;
  font-size:.95rem;
}
.footer-accord > summary::-webkit-details-marker{ display:none; }
.footer-accord > summary::after{
  content:'▾'; margin-left:auto; opacity:.6;
}
.footer-accord[open] > summary::after{ transform:rotate(180deg); }

.footer-list{ display:grid; gap:4px; margin-top:8px; }
.footer-list a{ color:var(--text-2); opacity:.9; text-decoration:none; }
.footer-list a:hover{ opacity:1; text-decoration:underline; }

.footer-contact{ display:flex; align-items:center; gap:8px; min-height:24px; }
.footer-contact .mono{ font-family:ui-monospace, Menlo, Consolas, "SF Mono", monospace; font-size:.92em; }
.copyright{ margin-top:6px; font-size:.9em; color:var(--text-3); }

html,body{ min-height:100%; }
body{ padding-bottom: calc(var(--footer-cap) + 12px); }

@media (max-width:1200px){
  .site-footer-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .site-footer-inner{ grid-template-columns:1fr; }
}

html, body{ overflow-x:hidden; }
.site-footer, .site-footer-inner{ box-sizing:border-box; }

/* === Footer: двухколоночные "Разделы" === */
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
.footer-list .subhead { font-size: 0.86rem; font-weight: 600; letter-spacing: .01em; opacity: .85; margin-bottom: 6px; }
.footer-list { gap: 5px; }
@media (max-width: 768px) { .footer-cols { grid-template-columns: 1fr; } }

/* Жёсткий кап футера */
.site-footer { --footer-cap: 15svh; max-block-size: var(--footer-cap); overflow: hidden; contain: layout paint; }
@supports not (height: 1svh) { .site-footer { max-block-size: 15vh; } }
.site-footer-inner { max-block-size: 100%; overflow: auto; }

/* === Жёсткий лимит высоты футера + явный внутренний скролл === */
.site-footer {
  --footer-cap-desktop: 18svh;
  --footer-cap-mobile: 24svh;
  max-block-size: var(--footer-cap-desktop);
  overflow: hidden;
  contain: layout paint;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  color: var(--text-2);
}
@media (max-width: 768px) { .site-footer { max-block-size: var(--footer-cap-mobile); } }
@supports not (height: 1svh) {
  .site-footer { max-block-size: 18vh; }
  @media (max-width: 768px) { .site-footer { max-block-size: 24vh; } }
}

.site-footer-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px 16px;
  padding: 8px 12px;
  max-block-size: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: start; }
@media (max-width: 768px) { .site-footer-inner { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; } }

.footer-accord { background: var(--soft-bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; }
.footer-accord > summary { list-style: none; cursor: pointer; user-select: none; font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.footer-accord > summary::-webkit-details-marker { display: none; }
.footer-accord[open] > summary::after { transform: rotate(180deg); }

.footer-list { display: grid; gap: 5px; margin-top: 6px; }
.footer-list .subhead { font-size: .86rem; font-weight: 600; opacity: .85; margin-bottom: 4px; }
.footer-list a { text-decoration: none; color: var(--text-2); opacity: .92; white-space: nowrap; }
.footer-list a:hover { opacity: 1; text-decoration: underline; }

.footer-contact { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.footer-contact .mono { font-family: ui-monospace, Menlo, Consolas, "SF Mono", monospace; font-size: .9em; }

/* Нижняя центральная плашка */
.footer-bottom { text-align: center; padding: 10px 8px; font-size: .92rem; color: var(--text-3); background: var(--bg); border-top: 1px solid var(--border); }

/* === FOOTER с копирайтом внутри (колонка) === */
.site-footer-inner { display: flex; flex-direction: column; block-size: 100%; }
.site-footer-main { flex: 1 1 auto; overflow: auto; padding: 8px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.footer-bottom { flex: 0 0 auto; text-align: center; padding: 8px 10px; font-size: .92rem; color: var(--text-3); background: var(--bg); border-top: 1px solid var(--border); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: start; }
@media (max-width: 768px) { .site-footer-main { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; } }
.site-footer-inner{ min-block-size: 0; min-height: 0; }
.site-footer-main{ min-block-size: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.footer-bottom{ position: relative; z-index: 1; }

/* ===== Footer: колонки по 4 пункта ===== */
.site-footer { --footer-cap-desktop: 18svh; --footer-cap-mobile: 24svh; max-block-size: var(--footer-cap-desktop); overflow: hidden; contain: layout paint; }
@media (max-width: 768px){ .site-footer{ max-block-size: var(--footer-cap-mobile); } }
@supports not (height: 1svh){ .site-footer{ max-block-size: 18vh; } @media (max-width:768px){ .site-footer{ max-block-size: 24vh; } } }

.site-footer-inner{ display:flex; flex-direction:column; block-size:100%; min-height:0; }
.site-footer-main{ flex:1 1 auto; min-height:0; overflow:auto; padding:8px 12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px; }
.footer-bottom{ flex:0 0 auto; text-align:center; padding:8px 10px; font-size:.92rem; color:var(--text-3); background:var(--bg); border-top:1px solid var(--border); }

.footer-cols.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; align-items:start; }
@media (max-width:768px){ .site-footer-main{ grid-template-columns:1fr; } .footer-cols.two{ grid-template-columns:1fr; } }

.footer-links-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(140px,1fr); gap:6px 16px; align-items:start; }
.footer-col{ display:grid; gap:5px; list-style:none; margin:0; padding:0; }
.site-footer .footer-links-grid{ grid-auto-columns:minmax(120px,1fr); }
@media (max-width:768px){ .site-footer .footer-links-grid{ grid-auto-columns:minmax(110px,1fr); } }

.footer-accord{ background: var(--soft-bg); border:1px solid var(--border); border-radius:10px; padding:6px 8px; }
.footer-accord > summary{ list-style:none; cursor:pointer; user-select:none; font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:8px; }
.footer-accord > summary::-webkit-details-marker{ display:none; }
.footer-accord > summary::after{ content:'▾'; margin-left:auto; opacity:.6; }
.footer-accord[open] > summary::after{ transform:rotate(180deg); }

.footer-list{ display:grid; gap:5px; margin-top:6px; }
.footer-list .subhead, .footer-cat .subhead{ font-size:.86rem; font-weight:600; opacity:.85; margin-bottom:4px; }
.footer-contact{ display:flex; align-items:center; gap:8px; min-height:22px; }
.footer-contact .mono{ font-family: ui-monospace, Menlo, Consolas, "SF Mono", monospace; font-size:.9em; }

/* === HOTFIX: карточки каталога + мини-календарь === */
.card .pad .badge{ flex-shrink:0; }
.card .pad strong{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .pad .muted{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .media img{ display:block; max-width:100%; height:auto; }

/* мини-календарь в карточке */
.cal-mini{ display:grid; grid-auto-flow:column; grid-auto-columns:10px; gap:2px; align-items:center; }
.cal-mini .box{ height:8px; border-radius:2px; }

/* bottom-sheet: лучше себя ведёт на iOS */
.sheet{ contain:layout paint; }
.sheet .panel{ max-height:min(80dvh,80vh); }
.sheet .body{ overscroll-behavior:contain; }

/* ===== MOBILE FIX PACK ===== */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > table{ min-width: 640px; border-collapse: collapse; }
.table-scroll th, .table-scroll td{ white-space:nowrap; }

@media (max-width: 768px){ .hide-mobile{ display:none !important; } }
@media (min-width: 769px){ .hide-desktop{ display:none !important; } }

@media (max-width: 768px){
  .mobile-top{ backdrop-filter:none; background: color-mix(in oklab, var(--bg), black 2%); }
  .mobile-menu .panel{ backdrop-filter:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* Лёгкий режим, включается через .fx-lite (см. JS) */
.fx-lite .mobile-top,
.fx-lite .mobile-menu .panel{ backdrop-filter:none !important; }
.fx-lite *{ animation: none !important; transition: none !important; }

/* Большие списки карточек: быстрее рендерятся */
.grid > .card{ content-visibility: auto; contain-intrinsic-size: 320px 420px; }

.cal-mini{ overflow:hidden; }

/* ==== Mobile fixes: owner/admin таблицы ==== */
@media (max-width: 768px){
  table td{ vertical-align: top; }
  table input, table select, table textarea{
    min-width: 0;
    max-width: 100%;
  }
  table input[type="file"]{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
  }
  .row-fields, .fields, .cell-fields, .form-inline{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .row-fields > *, .fields > *, .cell-fields > *, .form-inline > *{
    flex: 1 1 140px;
    min-width: 0;
  }
  .row-fields input[type="file"],
  .fields input[type="file"],
  .cell-fields input[type="file"],
  .form-inline input[type="file"]{
    flex: 1 0 100%;
  }
}

/* ==== Главная: центр на мобиле ==== */
@media (max-width: 768px){
  .container > h1:first-of-type{
    text-align: center;
    margin-top: 8px;
    line-height: 1.2;
  }
  .container > .muted:first-of-type{
    text-align: center;
    margin: 6px 0 12px;
  }
  .form-actions form{
    justify-content: center;
    width: 100%;
  }
  .form-actions form .input{
    flex: 1 1 140px;
    min-width: 0;
  }
}

/* ==== Прячем мобильный бар и bottom-sheet, копирайт остаётся ==== */
@media (max-width: 768px){
  .mobile-footer-bar{ display: none !important; }
  .footer-sheet{ display: none !important; }
}

/* ==== SBGO hotfixes 2025-09-01 ==== */
body{ padding-top: var(--appbar-h) !important; }

.container > h1:first-of-type{
  text-align:center; margin:8px 0 6px; line-height:1.2;
}
.container > .muted:first-of-type{
  text-align:center; margin:6px 0 12px;
}

@media (max-width:768px){
  :root{ --appbar-h: 48px; }
}

@media (max-width:768px){
  .mobile-footer-bar,
  .mobile-bottom-nav,
  .mobile-quickbar,
  .bottom-nav,
  .quickbar,
  .dock,
  nav[role="toolbar"][data-mobile]{
    display:none !important;
  }
}

@media (max-width:768px){
  table input[type="file"]{
    display:block;
    width:100%;
    max-width:100% !important;
    margin:6px 0;
  }
}

/* ==== SBGO mobile hard fixes ==== */
.container > h1:first-of-type{ text-align:center; margin:6px 0 4px; line-height:1.2; }
.container > .muted:first-of-type{ text-align:center; margin:2px 0 10px; }

@media (max-width:768px){
  .mobile-top .mobile-nav{ padding: 4px 0; }
  .container{ padding-top: 6px !important; }
}

@media (max-width:768px){
  .site-footer .site-footer-main{ display:none !important; }
  .mobile-footer-bar,
  .mobile-bottom-nav,
  .mobile-quickbar,
  .footer-toolbar,
  .footer-actions,
  .footer-nav,
  .bottom-nav,
  .quick-nav,
  .quickbar,
  .dock,
  nav[role="toolbar"][data-mobile]{
    display:none !important;
  }
}

/* ==== File uploader (универсально) ==== */
.file-uploader{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 6px 0;
}
.file-uploader__btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--soft-bg);
  text-decoration: none; cursor: pointer; user-select: none;
}
.file-uploader__btn:hover{ background: var(--hover-bg); }
.file-uploader__name{
  flex: 1 1 160px;
  min-width: 0;
  font-size: .92rem; opacity: .85;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.file-uploader input[type="file"]{
  position: absolute !important;
  inset: 0 auto auto 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

@media (max-width: 768px){
  .file-uploader{ flex-direction: column; align-items: stretch; gap: 6px; }
  .file-uploader__btn{ width: 100%; }
  .file-uploader__name{ width: 100%; }
}

/* ==== Desktop: центрируем строку поиска на главной ==== */
@media (min-width: 980px){
  .container > .form-actions{
    display: flex;
    justify-content: center;
    margin: 10px auto 18px;
  }
  .container > .form-actions form{
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 900px;
  }
  .container > .form-actions form .input{
    width: clamp(220px, 24vw, 340px) !important;
    min-width: 0;
  }
  .container > .form-actions form .btn{
    height: 44px;
    padding: 0 18px;
  }
}

/* ==== Language switcher (chips) ==== */
.lang-switch{ margin:4px 6px 2px; }
.lang-switch .lang-title{ font-size:.78rem; opacity:.7; margin-bottom:6px; }
.lang-switch .lang-row{ display:flex; flex-wrap:wrap; gap:8px; }
.lang-switch .lang-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  border:1px solid var(--border);
  background: var(--soft-bg);
  text-decoration:none;
}
.lang-switch .lang-chip:hover{ background: var(--hover-bg); }
.lang-switch .lang-chip.is-active{
  border-color: color-mix(in oklab, var(--accent), transparent 40%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent), transparent 65%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 16%, transparent), color-mix(in oklab, var(--accent) 6%, transparent));
}
.lang-variant-mobile .lang-chip{ padding:10px 14px; flex:1 1 auto; justify-content:center; }

/* ====== Language dropdown (modern) ====== */
.lang-dd{ position: relative; display: block; margin: 6px; }
.lang-dd .lang-trigger{
  width: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--soft-bg);
  cursor: pointer; user-select: none;
}
.lang-dd .lang-trigger:hover{ background: var(--hover-bg); }
.lang-dd .lang-trigger .chev{ margin-left:auto; opacity:.8; }

.lang-dd .lang-menu{
  position: absolute; inset: auto 0  auto 0;
  top: calc(100% + 6px);
  z-index: 1200;
  background: color-mix(in oklab, var(--layer), var(--bg) 6%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 6px;
  display: grid; gap: 4px;
  min-width: 220px;
}
.lang-dd .lang-item{
  display:flex; align-items:center; gap:10px;
  padding: 8px 10px; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;
}
.lang-dd .lang-item:hover{
  background: var(--hover-bg);
  border-color: color-mix(in oklab, var(--border), transparent 50%);
}
.lang-dd .lang-item.is-active{
  border-color: color-mix(in oklab, var(--accent), transparent 40%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 16%, transparent), color-mix(in oklab, var(--accent) 6%, transparent));
}
.lang-dd .badge{
  width: 28px; height: 20px; border-radius: 6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; letter-spacing:.5px; font-weight:700;
  color:color-mix(in oklab, var(--accent), white 65%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent), black 40%), color-mix(in oklab, var(--accent), black 55%));
  border:1px solid color-mix(in oklab, var(--accent), transparent 60%);
}
.lang-dd .mark{ margin-left:auto; opacity:.9; }

/* === Home catalog — no-crop image fix === */
.grid .card .media{
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  background: color-mix(in oklab, var(--bg), black 12%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width:1100px){
  .grid .card .media{ aspect-ratio: 16 / 10; }
}
.grid .card .media > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
}
.grid .card > a{ display:block; }

/* === PATCH: file input в модалках === */
.modal .file{ 
  position: static !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.modal .file::before,
.modal .file::after{ content: none !important; display:none !important; }
.modal input[type="file"]{
  display:block; width:100%; max-width:100%; margin:6px 0;
}

/* Карточка объявления: CTA внизу */
.card.bike-card, .bike-card { display:flex; flex-direction:column; }
.bike-card .card-body { display:flex; flex-direction:column; gap:8px; min-height:100%; }
.bike-card .more-btn, .bike-card a.more, .bike-card .btn-more { margin-top:auto; }

/* ===== SBGO patch 2025-09-06 ===== */
.grid > article.card{ display:flex !important; flex-direction:column !important; min-height:0; }
.grid > article.card > .pad{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0; }
.grid > article.card .btn-row{ margin-top:auto !important; }
.grid > article.card .cal-tiny{ margin-top:8px; overflow:hidden; }
@media (max-width:768px){ .mbar, #sheet{ display:none !important; } }
html, body{ overflow-x:hidden; }

/* === SBGO Light glass overrides for topbar & sidebar (force) === */
html[data-theme="light"]{
  --tb-bg: color-mix(in oklab, var(--layer) 82%, transparent);
  --tb-border: color-mix(in oklab, var(--border), black 12%);
  --tb-btn-bg: color-mix(in oklab, var(--layer2) 88%, transparent);
  --tb-btn-border: color-mix(in oklab, var(--border), black 8%);
  --tb-pop-bg: color-mix(in oklab, var(--layer) 92%, transparent);

  /* синхронно усиливаем фон (дублируем основную схему, чтобы точно не перебивалось) */
  --page-bg:
    radial-gradient(1200px 800px at 85% -10%, rgba(164,130,255,.45), transparent 65%),
    radial-gradient(900px 600px at 12% 0%, rgba(255,160,220,.36), transparent 60%),
    radial-gradient(1600px 900px at -10% 110%, rgba(120,190,255,.22), transparent 60%),
    linear-gradient(180deg, #ede9ff 0%, #f0ecff 38%, #eef2f9 100%);
}

/* Topbar */
.topbar{
  background: var(--tb-bg) !important;
  border-bottom: 1px solid var(--tb-border) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px) !important;
  backdrop-filter: saturate(160%) blur(12px) !important;
}
.topbar .tb-btn{
  background: var(--tb-btn-bg) !important;
  border-color: var(--tb-btn-border) !important;
}
.lang-pop{
  background: var(--tb-pop-bg) !important;
  border-color: var(--tb-btn-border) !important;
  box-shadow: var(--shadow-1), var(--inner-1) !important;
}

/* Sidebar panel */
.sidebar{
  background: var(--tb-bg) !important;
  border-right: 1px solid var(--tb-border) !important;
  -webkit-backdrop-filter: saturate(140%) blur(var(--surface-blur)) !important;
  backdrop-filter: saturate(140%) blur(var(--surface-blur)) !important;
}

/* Группы user/owner/admin/banking */
.sidebar .group{
  background: var(--card-bg) !important;
  border: 1px solid var(--card-stroke) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-1), var(--inner-1) !important;
}
.sidebar .group > summary{
  background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--layer2) 86%, transparent),
      color-mix(in oklab, var(--layer) 86%, transparent)
  ) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 12px 12px 0 0 !important;
}
.sidebar .nav a{ border: 1px solid transparent; }
.sidebar .nav a:hover{ background: var(--hover-bg); border-color: var(--btn-hover-border); }

/* Метки внизу сайдбара (баланс/роль) */
.meta-stack .tag{
  background: var(--card-bg) !important;
  border-color: var(--card-stroke) !important;
  box-shadow: var(--inner-1) !important;
}

/* Мобильная панель меню — тоже «стекло» */
.mobile-menu .panel{
  background: var(--card-bg) !important;
  border-top: 1px solid var(--card-stroke) !important;
  border-bottom: 1px solid var(--card-stroke) !important;
  box-shadow: var(--shadow-1), var(--inner-1) !important;
  -webkit-backdrop-filter: blur(var(--surface-blur)) !important;
  backdrop-filter: blur(var(--surface-blur)) !important;
}
/* === Global UI glass tokens (site-wide) === */
:root{
  /* по умолчанию «комфортно»: 85% матовости и 12px blur */
  --ui-glass: 85%;
  --ui-blur: 12px;
}
/* подтягиваем эти значения в светлой теме */
html[data-theme="light"]{
  --card-bg: color-mix(in oklab, var(--layer) var(--ui-glass), transparent);
  --surface-blur: var(--ui-blur);
  /* шапка синхронно с «матовостью» */
  --appbar-opacity: var(--ui-glass);
}