/* Два стиля приложения. Подключается после styles.css; на <html> стоит data-style="air" или "tea" (public/js/appstyle.js).
   air — «Светлый воздух»: светлый тёплый фон, крупные заголовки с засечками, мягкие карточки без рамок, круглые кнопки, зелёные переключатели, плавающая нижняя панель.
   tea — «Тёмное чайное»: тёмно-коричневый фон, золотые акценты, золотые переключатели, нижняя панель с золотой меткой.
   Цвета экранов лежат в styles.css в виде переменных; здесь значения переменных для обеих тем и оформление «каркаса» (шапка, панель, карточки, кнопки, поля).
   Описание: docs/appstyle.md. */

/* ---------- Светлый воздух (по умолчанию) ---------- */
html[data-style=air]{
  color-scheme:light;
  --dark:#3A2416; --on-dark:#FBF6EA; --cream:#F4EFE4; --white:#FFFDF8; --surface-2:#F8F3E8;
  --sand:#EFE5CF; --sand-2:#EFE4CC; --line:rgba(58,36,22,.14); --muted:#6B5645; --text:#2E1D12;
  --gold:#B8893B; --gold-ink:#86601C; --green:#4F6B3A; --green-ink:#4F6B3A; --green-bg:#E8EFDD; --green-line:#B9C9A3;
  --red:#A63A2B; --red-ink:#A63A2B; --red-bg:#F6DAD3;
  --pre:#F1D9A0; --tint-soft:#FFFBF0; --tint-gold:#FFF3D4;
  --ink-brown:#5B3F2B; --green-deep:#2F3D22; --red-deep:#7A2A1D; --gold-deep:#5B3F12; --on-gold:#2A1A0E;
  --shadow-soft:0 1px 2px rgba(58,36,22,.06); --shadow-btn:0 1px 3px rgba(58,36,22,.16);
  --switch-on:#4F6B3A; --switch-off:rgba(58,36,22,.22); --switch-knob:#fff; --switch-knob-on:#fff;
  --navh:calc(92px + env(safe-area-inset-bottom));
}
html[data-style=air] .top{background:transparent;color:var(--text);gap:12px;padding-bottom:4px}
html[data-style=air] .top::before{filter:brightness(.62) saturate(1.5);opacity:.9}
html[data-style=air] .top h1{font-size:34px;line-height:1.05;letter-spacing:-.01em;color:var(--text)}
html[data-style=air] .top .sub,html[data-style=air] .top .time small{color:var(--muted)}
html[data-style=air] .iconbtn{border:0;border-radius:50%;background:var(--white);color:var(--text);box-shadow:var(--shadow-btn)}
html[data-style=air] .chip{border:0;background:var(--white);color:var(--text);box-shadow:var(--shadow-soft)}
html[data-style=air] .chip.on,html[data-style=air] .top .chip.on{background:var(--dark);color:var(--on-dark);border:0}
html[data-style=air] .top .chip{background:var(--white);border:0;color:var(--text);box-shadow:var(--shadow-soft)}
html[data-style=air] .helpbtn{border:0;background:var(--white);color:var(--muted);box-shadow:var(--shadow-btn)}
html[data-style=air] .card{border:0;border-radius:20px;box-shadow:var(--shadow-soft);padding:13px 14px}
html[data-style=air] .card.pre{box-shadow:inset 0 0 0 1.5px var(--gold)}
html[data-style=air] .card.urgent{border:0;box-shadow:inset 0 0 0 2px var(--red)}
html[data-style=air] .stat{border:0;border-radius:16px;box-shadow:var(--shadow-soft)}
html[data-style=air] .bigbtn{border-radius:28px;min-height:54px}
html[data-style=air] .bigbtn.ghost{background:var(--white);border:0;color:var(--text);box-shadow:var(--shadow-btn)}
html[data-style=air] .smallbtn{border:0;border-radius:22px;background:var(--white);color:var(--text);box-shadow:var(--shadow-btn)}
html[data-style=air] .smallbtn.solid{background:var(--dark);color:var(--on-dark)}
html[data-style=air] .smallbtn.gold{background:var(--gold);color:var(--on-gold)}
html[data-style=air] .smallbtn.danger{background:var(--red-bg);color:var(--red-deep)}
html[data-style=air] .smallbtn.done{background:var(--green-bg);color:var(--green-deep)}
html[data-style=air] input[type=text],html[data-style=air] input[type=tel],html[data-style=air] input[type=email],html[data-style=air] input[type=url],html[data-style=air] input[type=search],
html[data-style=air] input[type=date],html[data-style=air] input[type=time],html[data-style=air] input[type=number],html[data-style=air] input[type=password],html[data-style=air] select,html[data-style=air] textarea{
  background:var(--surface-2);border:1.5px solid var(--line)}
/* карточки списков и разделов: без рамки, с мягкой тенью (список собран из styles.css: фон --white и рамка --line, скругление от 12 px) */
html[data-style=air] :is(
  .bd-net,
  .br-c,
  .ck-rule,
  .fh-q,
  .fin .f-card,
  .fin .f-kpi-tile,
  .fin .f-list-card,
  .fin .f-mini-card,
  .fin .f-rec-card,
  .fin .f-toc-row,
  .fin .mm-dish,
  .gd-grow,
  .grp,
  .gstat,
  .ins-repb,
  .les-row,
  .mk-kpi,
  .morder,
  .mrow,
  .nextstep,
  .ocperson,
  .op-card,
  .qv-heard,
  .sal-tile,
  .scheme,
  .setrow,
  .task,
  .tierrow,
  .total,
  .tr-row,
  .vrow,
  details.addbox,
  details.sect){border-color:transparent;box-shadow:var(--shadow-soft)}
html[data-style=air] .nav{left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));max-width:calc(520px - 32px);height:68px;padding:6px;border:0;border-radius:34px;
  background:rgba(255,253,248,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 28px rgba(58,36,22,.2),inset 0 0 0 1px rgba(255,255,255,.8)}
html[data-style=air] .nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 2px;border-radius:28px}
html[data-style=air] .nav a.on{background:rgba(58,36,22,.09);color:var(--text)}
html[data-style=air] .nav a.on::before{display:none}
html[data-style=air] .nav a .i{font-size:19px}
html[data-style=air] .bar{background:linear-gradient(to top,var(--cream) 72%,rgba(244,239,228,0));border-top:0;padding-top:20px}
html[data-style=air] .fa-top,html[data-style=air] .chead .cnew{border:0;background:var(--white);color:var(--text);box-shadow:var(--shadow-btn)}
html[data-style=air] .chead{background:var(--cream);color:var(--text)}
html[data-style=air] .chead .chsub{color:var(--muted)}
/* экран входа тёмный фирменный в обеих темах: общее оформление полей в «воздухе» его поле не трогает */
html[data-style=air] .login input{background:rgba(247,238,220,.08);border:1.5px solid rgba(188,124,57,.65);color:#F7EEDC}
html[data-style=air] .login input:focus{background:rgba(247,238,220,.12);border-color:#E8CFA3;box-shadow:0 0 0 3px rgba(188,124,57,.28)}
html[data-style=air] .sheet{border-radius:26px 26px 0 0}
html[data-style=air] .sheet-x{border:0;border-radius:50%;box-shadow:var(--shadow-btn)}

/* ---------- Тёмное чайное ---------- */
html[data-style=tea]{
  color-scheme:dark;
  --dark:#D4A24C; --on-dark:#1C110A; --cream:#1C110A; --white:#2A1A10; --surface-2:#1C110A;
  --sand:#35210F; --sand-2:#3A2818; --line:rgba(232,207,163,.2); --muted:#C4B393; --text:#F5EBD6;
  --gold:#D4A24C; --gold-ink:#E0B565; --green:#4F6B3A; --green-ink:#A9CC85; --green-bg:#233019; --green-line:#4A6636;
  --red:#B5483A; --red-ink:#FF9A8A; --red-bg:#3A1C16;
  --pre:#5A4421; --tint-soft:#2E1E10; --tint-gold:#3D2A12;
  --ink-brown:#E3D2B0; --green-deep:#C5DDA8; --red-deep:#F4B8AA; --gold-deep:#EFD59A; --on-gold:#1C110A;
  --shadow-soft:none; --shadow-btn:none;
  --switch-on:#D4A24C; --switch-off:#4A372A; --switch-knob:#BFAE90; --switch-knob-on:#1C110A;
  --navh:calc(66px + env(safe-area-inset-bottom));
}
html[data-style=tea],html[data-style=tea] body{background:#1C110A}
html[data-style=tea] body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 70% at 50% 0%,#4A2E1B 0%,#2A1A10 45%,#1C110A 100%)}
html[data-style=tea] .top{background:transparent;color:var(--text)}
html[data-style=tea] .top h1,html[data-style=tea] .top .time b{color:#E8CFA3}
html[data-style=tea] .top .sub,html[data-style=tea] .top .time small{color:var(--muted)}
html[data-style=tea] .iconbtn{border:1.5px solid rgba(212,162,76,.6);background:rgba(245,235,214,.06);color:#E8CFA3}
html[data-style=tea] .chip{border-color:rgba(232,207,163,.28);background:rgba(245,235,214,.05);color:var(--text)}
html[data-style=tea] .chip.on,html[data-style=tea] .top .chip.on{background:var(--dark);border-color:var(--dark);color:var(--on-dark)}
html[data-style=tea] .top .chip{background:rgba(245,235,214,.05);border-color:rgba(232,207,163,.28);color:var(--text)}
html[data-style=tea] .card{border:1px solid var(--line);border-radius:18px}
html[data-style=tea] .card.pre{border-color:rgba(212,162,76,.55);background:#32200F}
html[data-style=tea] .h{color:#D4A24C;letter-spacing:.16em}
html[data-style=tea] .bigbtn{border-radius:16px;font-weight:800}
html[data-style=tea] .bigbtn.ghost,html[data-style=tea] .smallbtn{background:transparent;border:1.5px solid rgba(212,162,76,.6);color:#E8CFA3}
html[data-style=tea] .smallbtn.solid{background:var(--dark);border-color:var(--dark);color:var(--on-dark)}
html[data-style=tea] .smallbtn.gold{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
html[data-style=tea] .smallbtn.danger{border-color:var(--red-ink);color:var(--red-ink)}
html[data-style=tea] .smallbtn.done{background:var(--green-bg);border-color:var(--green-line);color:var(--green-deep)}
html[data-style=tea] input[type=text],html[data-style=tea] input[type=tel],html[data-style=tea] input[type=email],html[data-style=tea] input[type=url],html[data-style=tea] input[type=search],
html[data-style=tea] input[type=date],html[data-style=tea] input[type=time],html[data-style=tea] input[type=number],html[data-style=tea] input[type=password],html[data-style=tea] select,html[data-style=tea] textarea{
  background:var(--surface-2);border:1.5px solid rgba(232,207,163,.3);color:var(--text)}
html[data-style=tea] input:focus,html[data-style=tea] select:focus,html[data-style=tea] textarea:focus{outline:none;border-color:#D4A24C;box-shadow:0 0 0 3px rgba(212,162,76,.22)}
html[data-style=tea] .nav{background:#1C110A;border-top:1px solid var(--line)}
html[data-style=tea] .nav a{color:rgba(241,228,200,.72)}
html[data-style=tea] .nav a.on{color:#E0B565}
html[data-style=tea] .nav a.on::before{background:#D4A24C;box-shadow:0 0 10px rgba(212,162,76,.55)}
html[data-style=tea] .bar{background:#1C110A}
html[data-style=tea] .sheet-bg{background:rgba(0,0,0,.6)}
html[data-style=tea] .fin{--surface-1:#2A1A10;--text-primary:#F5EBD6;--text-secondary:#C4B393;--muted:#B5A586;--grid:#3A2818;--baseline:#5A4531;--border:rgba(232,207,163,.2);
  --delta-up:#8FD08F;--delta-down:#FF9A8A;--warn:#F0B25A}

/* ---------- тёмное чайное: бледные плашки из styles.css (цвета заданы там прямо) переводим в тёмные тона, иначе светлый текст теряется ---------- */
html[data-style=tea] :is(.cpins,.promo,.card.ann.festive,.sf-step.now,.pk-card.on,.op-card.op-hard,.crec[data-state=check],.crec[data-state=failed],.crec[data-state=saved],.countdown,.cmsg .creplybtn.pin.on){background:var(--tint-gold);color:var(--text)}
html[data-style=tea] :is(.now-items,.off-card.past,.kb-when span,.kb-cat,.fin .rc-day,.fin .ck-verdict,.dishimg-btn,.dishimg-big){background:var(--tint-soft)}
html[data-style=tea] :is(.viewcard,.vrow.on,.fin .ev-find){background:rgba(111,163,208,.14);border-color:rgba(111,163,208,.55)}
html[data-style=tea] :is(.must,.crow.hot,.cmsg .cbub.tome,.card.ocalert,.fin .mm-t-down){background:var(--red-bg)}
html[data-style=tea] :is(.rentline.ok,.ct-row.me,.bd-guest.came,.kb-bar){background:var(--green-bg)}
html[data-style=tea] .must-i{color:var(--red-deep);border-top-color:rgba(244,184,170,.3)}
html[data-style=tea] .notables{background:var(--tint-gold);border-color:#B07A1C;border-left-color:#D4A24C;color:var(--text)}
html[data-style=tea] .notables.today{background:#4A3214;border-color:#D4A24C;border-left-color:#E06A55;box-shadow:none}
html[data-style=tea] .notables b{color:var(--gold-deep)}
html[data-style=tea] .notables .small{color:var(--muted)}
html[data-style=tea] .promo-note{color:var(--red-ink)}
html[data-style=tea] .poster{background:linear-gradient(135deg,#3D2A12 0%,#4A3314 55%,#5A4421 100%);box-shadow:none}
html[data-style=tea] .poster::after{display:none}
html[data-style=tea] .poster.bday{background:linear-gradient(135deg,#3A1C16 0%,#4A241B 55%,#5A2D21 100%);box-shadow:none}
html[data-style=tea] .poster-later{border-color:rgba(232,207,163,.4)}
html[data-style=tea] .qv{background:linear-gradient(180deg,var(--tint-gold),var(--tint-soft))}
html[data-style=tea] .qv-mic{box-shadow:none}

/* там, где «тёмный» фон в светлой теме нужен тёмным и в чайной (в ней --dark золотой), задаём его прямо */
html[data-style=tea] :is(a.gm-card,.gm-hero,a.ct-strip,.ins-hero){background:linear-gradient(135deg,#4A2E1B 0%,#2A1A10 100%);color:#F5EBD6;border-color:rgba(212,162,76,.55);box-shadow:none}
html[data-style=tea] :is(.holdmark.whole,.wholeday){background:#4A3214;color:#F5EBD6;border-color:#D4A24C}
html[data-style=tea] .chead{background:#1C110A;color:var(--text);border-bottom:1px solid var(--line)}
html[data-style=tea] .chead .chtitle{color:#E8CFA3}
html[data-style=tea] .chead .chsub{color:var(--muted)}
html[data-style=tea] .chead .cnew,html[data-style=tea] .chead .cbtn{background:rgba(245,235,214,.06);border:1.5px solid rgba(212,162,76,.6);color:#E8CFA3}
html[data-style=tea] .cmsg.mine .vplay{--vp-ink:#1C110A;--vp-on:#E8CFA3;--vp-rail:rgba(28,17,10,.35);--vp-fill:#1C110A;--vp-text:#3A2818;--vp-bad:#7A2A1D}

html[data-style=tea] .cmsg.mine .cdec.approved{color:#2F3D22}
html[data-style=tea] .cmsg.mine .cdec.rework{color:#7A2A1D}
html[data-style=tea] .cmsg.mine .cquote{background:rgba(28,17,10,.14);border-left-color:#1C110A}

/* ---------- переключатели «включить / выключить» (обе темы) ----------
   Любая галочка-настройка в приложении выглядит как переключатель 51×31: подпись слева, переключатель справа.
   Галочками остаются выбор из списка: «кому адресовано» (.grp), отметки в списках (.rc-row, .ii-row, .op-head) и всё, что помечено классом plain. */
input[type=checkbox]:not(.plain,.grp input,.rc-row input,.ii-row input,.op-head input){appearance:none;-webkit-appearance:none;position:relative;flex:none;order:2;margin:0 0 0 auto;width:51px;height:31px;border-radius:16px;border:0;background:var(--switch-off,rgba(58,36,22,.22));transition:background .2s;cursor:pointer}
input[type=checkbox]:not(.plain,.grp input,.rc-row input,.ii-row input,.op-head input)::after{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--switch-knob,#fff);box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .2s,background .2s}
input[type=checkbox]:not(.plain,.grp input,.rc-row input,.ii-row input,.op-head input):checked{background:var(--switch-on,#4F6B3A)}
input[type=checkbox]:not(.plain,.grp input,.rc-row input,.ii-row input,.op-head input):checked::after{transform:translateX(20px);background:var(--switch-knob-on,#fff)}
input[type=checkbox]:not(.plain,.grp input,.rc-row input,.ii-row input,.op-head input):disabled{opacity:.45;cursor:default}
input[type=checkbox]:not(.plain,.grp input,.rc-row input,.ii-row input,.op-head input):focus-visible{outline:3px solid var(--gold);outline-offset:2px}
label:not(.grp):has(> input[type=checkbox]:not(.plain)){display:flex;align-items:center;gap:12px;min-height:44px}