@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Comfortaa:wght@600;700&display=swap');

:root{
  --bg:#0a0a0a; --surface:#141414; --surface2:#1b1b1b; --line:#262626; --line2:#333;
  --text:#f6f6f6; --muted:#8a8a8a; --white:#ffffff; --onwhite:#0a0a0a;
  --ok:#62d07f; --skip:#777; --crit:#ff6b6b; --accentdim:#e9e4d8; --gold:#e6b662;
}
/* светлая тема — переопределяет те же переменные */
body.light{
  --bg:#f5f4f1; --surface:#ffffff; --surface2:#f0eee9; --line:#e6e3dc; --line2:#d6d2c8;
  --text:#1a1814; --muted:#857f74; --white:#1c1a17; --onwhite:#ffffff;
  --ok:#2f9e54; --skip:#9a9488; --crit:#d6443f; --accentdim:#3a342a; --gold:#b07f1f;
}
body{transition:background .25s,color .25s;}
/* мелкие правки светлой темы */
body.light .bar{background:#e4e1d9;}
body.light .tile.admin p{opacity:.7;}
body.light .field::placeholder{color:#a6a094;}
body.light .tbadge.done{background:#d7efe0;color:#2f9e54;}
/* кнопка темы */
.thbtn{width:38px;height:38px;border-radius:11px;background:var(--surface);border:1px solid var(--line);
  color:var(--text);font-size:17px;line-height:1;cursor:pointer;flex:none;display:flex;
  align-items:center;justify-content:center;}
.thbtn:active{transform:scale(.94);}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--text);
  overscroll-behavior:none;-webkit-font-smoothing:antialiased;}
#app{max-width:640px;margin:0 auto;padding:18px 18px 48px;min-height:100%;}

/* ───────── таймлайн «Мой день» ───────── */
.tl{margin:6px 0 4px;}
.tl-item{display:flex;gap:12px;position:relative;}
.tl-rail{width:30px;flex:none;display:flex;flex-direction:column;align-items:center;}
.tl-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--line2);background:var(--bg);flex:none;margin-top:5px;}
.tl-item.done .tl-dot{background:var(--ok);border-color:var(--ok);}
.tl-item.cur .tl-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(230,182,98,.16);}
.tl-item.urgent .tl-dot{background:var(--crit);border-color:var(--crit);}
.tl-line{flex:1;width:2px;background:var(--line);margin:4px 0 2px;min-height:14px;}
.tl-item:last-child .tl-line{display:none;}
.tl-card{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:15px;
  padding:12px 14px;margin-bottom:11px;cursor:pointer;}
.tl-item.cur .tl-card{border-color:var(--gold);}
.tl-item.off .tl-card{opacity:.55;cursor:default;}
.tl-time{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;
  display:flex;justify-content:space-between;gap:8px;margin-bottom:3px;}
.tl-title{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:8px;}
.tl-sub{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4;}
.tl-cta{margin-top:10px;}
.tl-cta .btn{width:100%;padding:11px;}

/* wordmark */
.wm{font-family:'Comfortaa',sans-serif;font-weight:700;letter-spacing:-.5px;line-height:1;}
.h{display:flex;align-items:flex-end;justify-content:space-between;margin:8px 2px 22px;}
.h .wm{font-size:34px;}
.h .wm sup{font-size:11px;font-weight:600;vertical-align:super;opacity:.6;margin-left:1px;}
.h .who{text-align:right;font-size:12px;color:var(--muted);letter-spacing:.5px;
  text-transform:uppercase;padding-bottom:5px;}

.tag{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);}

.icn{display:inline-flex;width:24px;height:24px;color:var(--text);}
.icn svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

.status{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;margin-bottom:18px;display:flex;align-items:center;gap:12px;}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 4px rgba(98,208,127,.15);}
.status .t{font-size:13.5px;color:var(--muted);line-height:1.4;}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 18px;
  cursor:pointer;transition:transform .26s cubic-bezier(.34,1.56,.64,1),border-color .2s;position:relative;overflow:hidden;}
.tile:active{transform:scale(.95);border-color:var(--line2);transition:transform .08s ease;}
.tile .ic{display:inline-flex;width:30px;height:30px;color:var(--text);opacity:.9;}
.tile .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.tile h3{font-size:16px;font-weight:700;margin:14px 0 4px;letter-spacing:-.2px;}
.tile p{font-size:12.5px;color:var(--muted);}
.tile .pg{margin-top:12px;font-size:12px;font-weight:700;color:var(--text);letter-spacing:.3px;}
.tile.admin{grid-column:1/3;background:var(--white);color:var(--onwhite);border:none;}
.tile.admin h3{color:var(--onwhite);} .tile.admin p{color:var(--onwhite);opacity:.55;} .tile.admin .ic{color:var(--onwhite);opacity:1;}

/* статусная подсветка плиток */
.tbadge{position:absolute;top:13px;right:13px;font-size:10px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;}
.tbadge.urgent{background:var(--crit);color:#fff;}
.tbadge.soon{background:var(--gold);color:#1a1206;}
.tbadge.done{background:#163a27;color:#62d07f;}
.tile.t-urgent{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit),0 0 22px rgba(255,107,107,.28);
  animation:pulseU 1.9s ease-in-out infinite;}
.tile.t-soon{border-color:#7a5a2a;box-shadow:0 0 0 1px rgba(200,137,47,.45);}
.tile.t-done{opacity:.6;} .tile.t-done h3{color:var(--muted);}
@keyframes pulseU{0%,100%{box-shadow:0 0 0 1px var(--crit),0 0 12px rgba(255,107,107,.20);}
  50%{box-shadow:0 0 0 1px var(--crit),0 0 26px rgba(255,107,107,.45);}}
.status.urgent{border-color:rgba(255,107,107,.45);}
.status.urgent .dot{background:var(--crit);box-shadow:0 0 0 4px rgba(255,107,107,.16);}
.status.soon .dot{background:var(--gold);box-shadow:0 0 0 4px rgba(200,137,47,.16);}

.bar{height:6px;border-radius:99px;background:#242424;overflow:hidden;margin:10px 0;}
.bar > i{display:block;height:100%;background:var(--white);transition:width .35s ease;border-radius:99px;}

.topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.back{width:44px;height:44px;border-radius:13px;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
.back:active{transform:scale(.92);}
/* надёжный тап на телефоне: без отмены как свайп и без 300мс задержки */
.btn,.chip,.tile,.thbtn,.pnav,.back,.seg .sg,.star,a,button,[data-k],[data-s],[data-m],[data-nav],[data-act]{
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.back svg{width:20px;height:20px;stroke:var(--text);fill:none;stroke-width:2;}
.topbar .ttl{font-weight:800;font-size:19px;letter-spacing:-.3px;}
.topbar .cnt{margin-left:auto;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}

.step{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px 24px;
  min-height:250px;display:flex;flex-direction:column;}
.step .sn{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.step .crit{color:var(--crit);}
.step .txt{font-size:25px;font-weight:700;line-height:1.25;margin:14px 0;flex:1;letter-spacing:-.4px;}
.step .lbl{font-size:14px;color:var(--muted);}
.step .state{margin-top:8px;font-weight:700;font-size:14px;}
.state.ok{color:var(--ok);} .state.skip{color:var(--muted);}

.btns{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.btn{border:none;border-radius:15px;padding:17px;font-size:16px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;letter-spacing:.2px;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),opacity .2s,filter .15s;}
.btn:active{transform:scale(.94);filter:brightness(.92);transition:transform .07s ease;}
.btn .icn{width:20px;height:20px;}
.btn.gold{background:var(--white);color:var(--onwhite);}    /* основная — акцент */
.btn.gold .icn{color:var(--onwhite);}
.btn.dark{background:var(--surface2);color:var(--text);border:1px solid var(--line2);}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--text);}
.btn.red{background:transparent;border:1px solid rgba(255,107,107,.4);color:var(--crit);}
.btn.sm{padding:13px;font-size:14px;}
.nav{display:flex;gap:10px;margin-top:12px;}
.nav .btn{flex:1;}

.field{width:100%;padding:15px;border-radius:14px;border:1px solid var(--line2);font-size:16px;
  margin-top:12px;background:var(--surface2);color:var(--text);font-family:inherit;}
.field::placeholder{color:#666;}
textarea.field{resize:none;min-height:84px;}

/* камера */
.cam{position:fixed;inset:0;background:#000;z-index:50;display:flex;flex-direction:column;}
.cam video,.cam img{flex:1;width:100%;object-fit:cover;background:#000;}
.cam .ctl{padding:22px;display:flex;gap:12px;align-items:center;justify-content:center;background:#000;}
.cam .shoot{width:72px;height:72px;border-radius:50%;border:4px solid #fff;background:transparent;
  cursor:pointer;box-shadow:0 0 0 2px #000 inset;}
.cam .shoot:active{background:rgba(255,255,255,.25);}
.cam .x{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;border:none;font-size:20px;cursor:pointer;z-index:2;}
.cam .hint{position:absolute;top:18px;left:0;right:0;text-align:center;color:#fff;font-size:13px;opacity:.8;}

/* список */
.list .row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:15px;padding:15px;margin-bottom:9px;cursor:pointer;}
.list .row:active{border-color:var(--line2);}
.list .row .m{width:24px;height:24px;flex:none;color:var(--text);opacity:.85;}
.list .row .m svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;}
.list .row.done{opacity:.5;} .list .row.skipped{opacity:.55;}
.list .row .tx{font-size:15px;flex:1;}
.list .row .mini{font-size:11px;color:var(--muted);margin-top:3px;}
.list .row .mini.crit{color:var(--crit);}

/* итог */
.done-card{text-align:center;padding:38px 22px;}
.done-card .big{width:88px;height:88px;border-radius:50%;margin:0 auto 18px;
  background:var(--white);display:flex;align-items:center;justify-content:center;}
.done-card .big svg{width:42px;height:42px;stroke:var(--onwhite);fill:none;stroke-width:2.5;}

/* дашборд */
.sec{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px;}
.sec h3{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:14px;font-weight:700;}
.line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;}
.line:last-child{border:none;}
.pillm{display:inline-block;background:var(--surface2);border:1px solid var(--line2);border-radius:99px;padding:2px 10px;font-size:13px;font-weight:700;}
.r{color:var(--crit);} .g{color:var(--ok);}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.feed img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--surface2);border:1px solid var(--line);}
img.zoomable{cursor:zoom-in;}
/* миниатюры фото в шаге чек-листа и в деталях смены */
.stepphotos,.tlphotos{display:flex;gap:8px;flex-wrap:wrap;}
.stepphotos{margin-top:12px;}
.stepph{width:50%;max-width:220px;aspect-ratio:1;object-fit:cover;border-radius:12px;
  background:var(--surface2);border:1px solid var(--line);}
.tlphotos{margin:2px 0 10px;}
.tlph{width:72px;height:72px;object-fit:cover;border-radius:10px;
  background:var(--surface2);border:1px solid var(--line);}
/* просмотр фото на весь экран */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:9999;
  display:none;align-items:center;justify-content:center;padding:16px;}
#lightbox.show{display:flex;}
#lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;}
#lightbox .lb-close{position:absolute;top:14px;right:18px;color:#fff;font-size:30px;
  font-weight:700;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.6);}

.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.chip{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:15px 14px;cursor:pointer;font-size:14px;font-weight:600;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),border-color .2s;}
.chip:active{border-color:var(--line2);transform:scale(.94);transition:transform .07s ease;}
.chip .icn{width:20px;height:20px;color:var(--muted);flex:none;}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.muted2{color:var(--muted);font-size:13px;margin:2px 0 12px;}
select.field{appearance:none;}
.itemrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:12px 14px;margin-bottom:8px;}
.itemrow .tx{flex:1;font-size:14px;} .itemrow .mini{font-size:11px;color:var(--muted);}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);background:transparent;
  color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.tab{padding:9px 14px;border-radius:99px;border:1px solid var(--line2);font-size:13px;font-weight:700;cursor:pointer;color:var(--muted);}
.tab.on{background:var(--white);color:var(--onwhite);border-color:var(--white);}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(40px);
  background:var(--white);color:var(--onwhite);padding:12px 22px;border-radius:99px;font-size:14px;font-weight:600;
  opacity:0;transition:.25s;z-index:100;pointer-events:none;max-width:90%;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.center{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--muted);}

/* общий чек-лист смены: кто на смене + «беру на себя» */
.onshift{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:10px 2px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 13px;}
.onshift .icn{width:16px;height:16px;color:var(--gold);flex:none;}
.claim{color:var(--gold);font-weight:700;}
.iconbtn.on{border-color:var(--gold);color:var(--gold);background:rgba(230,182,98,.1);}
.iconbtn.taken{color:var(--gold);opacity:.85;}

/* объединённая плитка смены — на всю ширину */
.cards .tile.wide{grid-column:1/3;}

/* оценка смены 1..5 */
.stars{display:flex;justify-content:center;gap:8px;margin:4px 0;}
.starbtn{background:none;border:none;cursor:pointer;padding:4px;line-height:0;}
.starbtn svg{width:40px;height:40px;fill:none;stroke:var(--line2);stroke-width:1.4;transition:.12s;}
.starbtn.on svg{fill:var(--gold);stroke:var(--gold);}
.ratelabel{font-size:14px;font-weight:700;color:var(--gold);margin:8px 0 14px;min-height:18px;}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 15px;}
.kpi .v{font-size:21px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1.1;}
.kpi .k{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:5px;font-weight:700;}
.kpi .s{font-size:12px;color:var(--muted);margin-top:3px;}
.kpi.full{grid-column:1/-1;}
.kpi.gold .v{color:var(--gold);}
/* адаптив строк: левый блок ужимается, правое значение в одну строку */
.line{gap:10px;}
.line>span:first-child{min-width:0;}
.line>span:last-child{flex:none;white-space:nowrap;}
/* онбординг-тур (spotlight) */
#tour{position:fixed;inset:0;z-index:99998;}
#tour .hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(0,0,0,.66);
  transition:left .25s,top .25s,width .25s,height .25s;pointer-events:none;}
body.light #tour .hole{box-shadow:0 0 0 9999px rgba(0,0,0,.5);}
#tour .tip{position:fixed;z-index:2;background:var(--surface);color:var(--text);
  border:1px solid var(--line2);border-radius:16px;padding:14px 16px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);}
/* счётчик-бейдж на чипах панели (заявки/задачи) */
.admin-grid .chip{position:relative;}
.cbadge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:99px;background:var(--crit);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3);}
/* выходной: недоступные элементы приглушены */
.tile-off, .chip-off{opacity:.45;filter:grayscale(.4);}

/* ─ график смены (простой) ─ */
.plan-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.plan-nav .pnav{width:46px;height:46px;border-radius:13px;background:var(--surface);
  border:1px solid var(--line);color:var(--text);font-size:24px;line-height:1;flex:none;cursor:pointer;}
.plan-nav .pnav:active{transform:scale(.93);}
.pdate{flex:1;position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:12px 14px;text-align:center;font-weight:700;font-size:15px;
  text-transform:capitalize;cursor:pointer;}
.pdate input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;}
.plan-sum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;font-size:13px;}
.plan-sum span{padding:7px 13px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-weight:700;}
.plan-sum .on{color:var(--ok);} .plan-sum .off{color:var(--muted);} .plan-sum .sen{color:var(--gold);}
.pcard{display:flex;flex-direction:column;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;
  transition:border-color .15s,opacity .15s;}
.pcard.on{border-color:var(--gold);}
.pcard.is-off{opacity:.5;}
.pcard .pn{font-weight:700;font-size:16px;}
.pcard .pr{font-size:12px;color:var(--muted);margin-top:2px;}
.pctrl{display:flex;align-items:center;gap:8px;}
.seg{display:flex;flex:1;background:var(--surface2);border-radius:12px;padding:3px;gap:2px;}
.seg .sg{flex:1;border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:700;
  padding:11px 6px;border-radius:10px;font-family:inherit;cursor:pointer;transition:.12s;}
.seg .sg.act{background:var(--ok);color:#06210f;}
.seg .sg.off.act{background:var(--line2);color:var(--text);}
.star{width:48px;height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--surface2);
  color:var(--muted);flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.star .icn{width:22px;height:22px;color:inherit;}
.star.on{background:var(--gold);border-color:var(--gold);color:#1a1206;}
.star.on .icn svg{fill:#1a1206;stroke:#1a1206;}
.star.dim{opacity:.4;}

/* ─ PWA: безопасные зоны iPhone (чёлка / home-indicator) ─ */
@supports (padding: env(safe-area-inset-top)){
  #app{
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
    padding-left: calc(18px + env(safe-area-inset-left));
    padding-right: calc(18px + env(safe-area-inset-right));
  }
}
/* баннер-подсказка установки на экран (iOS) */
.a2hs{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:200;background:var(--surface);border:1px solid var(--line2);border-radius:16px;
  padding:13px 14px;display:flex;gap:12px;align-items:center;
  box-shadow:0 14px 44px rgba(0,0,0,.5);animation:a2hsUp .35s cubic-bezier(.2,.75,.2,1);}
@keyframes a2hsUp{from{transform:translateY(120%);opacity:0;}to{transform:none;opacity:1;}}
.a2hs .ico{flex:none;color:var(--gold);display:flex;}
.a2hs .ico svg{width:32px;height:32px;}
.a2hs .tx{flex:1;font-size:13px;line-height:1.45;color:var(--text);}
.a2hs .tx b{font-weight:800;}
.a2hs .x{flex:none;background:transparent;border:0;color:var(--muted);font-size:22px;
  line-height:1;cursor:pointer;padding:2px 4px;}

/* ─ pull-to-refresh ─ */
#ptr{position:fixed;top:env(safe-area-inset-top,0);left:50%;
  transform:translateX(-50%) translateY(-64px) scale(.8);z-index:150;
  width:40px;height:40px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;will-change:transform,opacity;
  transition:transform .34s cubic-bezier(.22,.7,.3,1), opacity .25s;}
#ptr .ptr-spin{width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line2);border-top-color:var(--gold);}
#ptr.spin .ptr-spin{animation:ptrSpin .7s linear infinite;}
@keyframes ptrSpin{to{transform:rotate(360deg);}}

/* ─ тумблеры настроек ─ */
.swrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);}
.swrow:last-of-type{border-bottom:0;}
.swrow .l{font-size:15px;font-weight:700;}
.swrow .l span{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px;}
.sw{position:relative;width:50px;height:30px;flex:none;}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;}
.sw i{position:absolute;inset:0;background:var(--line2);border-radius:999px;transition:.2s;pointer-events:none;}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.sw input:checked + i{background:var(--ok);}
.sw input:checked + i::after{transform:translateX(20px);}

/* ─ инструкция установки на iOS ─ */
#iosi{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.62);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 calc(34px + env(safe-area-inset-bottom));animation:a2hsUp .3s ease;}
.iosi-card{background:var(--surface);border:1px solid var(--line2);border-radius:20px;
  padding:22px;max-width:360px;width:92%;text-align:center;position:relative;
  box-shadow:0 16px 50px rgba(0,0,0,.5);}
.iosi-h{font-weight:800;font-size:18px;margin-bottom:14px;}
.iosi-steps{text-align:left;display:flex;flex-direction:column;gap:11px;
  margin:0 0 16px;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--text);}
.iosi-steps b{font-weight:800;}
.iosi-ic{display:inline-flex;color:var(--gold);}
.iosi-ic svg{width:16px;height:16px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.8;}
.iosi-arrow{position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);color:#fff;
  animation:iosiBounce 1.2s infinite;}
.iosi-arrow svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;}
@keyframes iosiBounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(9px);}}

/* ─ экран «добавьте на экран Домой» (install gate) ─ */
.gate{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:82vh;max-width:380px;margin:0 auto;}
.gate-logo{font-family:'Comfortaa',sans-serif;font-weight:700;font-size:42px;letter-spacing:-1.3px;
  line-height:1;color:var(--text);display:inline-flex;align-items:flex-start;margin-bottom:30px;}
.gate-logo sup{font-size:12px;font-weight:700;color:var(--gold);margin-left:2px;}
.gate-ic{color:var(--gold);margin-bottom:16px;display:flex;}
.gate-ic svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.gate-h{font-size:22px;font-weight:800;margin-bottom:10px;}
.gate-sub{font-size:15px;color:var(--muted);line-height:1.55;margin-bottom:26px;padding:0 6px;}
/* демо-вход: выбор роли */
.demo-roles{display:flex;flex-direction:column;gap:10px;width:100%;}
.demo-role{display:block;width:100%;text-align:left;padding:15px 16px;}
.demo-role b{font-size:15px;display:block;}
.demo-role .muted2{margin:4px 0 0;font-size:12.5px;line-height:1.4;}
.gate-steps{display:flex;flex-direction:column;gap:11px;width:100%;}
.gstep{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;text-align:left;font-size:14.5px;line-height:1.4;}
.gstep .gn{flex:none;width:27px;height:27px;border-radius:50%;background:var(--gold);color:#1a1206;
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;}
.gstep .si{display:inline-flex;color:var(--gold);vertical-align:-3px;}
.gstep .si svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;}
/* десктоп-заглушка с QR */
.gate-qr{width:220px;height:220px;border-radius:16px;background:#fff;padding:14px;margin:4px 0 12px;
  box-shadow:0 10px 36px rgba(0,0,0,.4);}
.gate-url{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.3px;margin-bottom:26px;}
.gate-dash{font-size:14.5px;font-weight:700;color:var(--gold);text-decoration:none;
  border:1px solid var(--line2);border-radius:12px;padding:12px 18px;transition:.15s;}
.gate-dash:hover{background:var(--surface);}

/* ─ карусель уведомлений на главной ─ */
.notices{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:10px;}
.notices::-webkit-scrollbar{display:none;}
.notice{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;
  cursor:pointer;box-sizing:border-box;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),border-color .2s;}
.notice:active{transform:scale(.97);}
.notice .ndot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted);}
.notice .nt{flex:1;min-width:0;font-size:13.5px;line-height:1.4;color:var(--muted);}
.notice .narr{flex:none;color:var(--muted);font-weight:800;font-size:17px;}
.notice.n-urgent{border-color:rgba(255,107,107,.32);}
.notice.n-urgent .ndot{background:var(--crit);box-shadow:0 0 0 4px rgba(255,107,107,.16);}
.notice.n-warn .ndot{background:var(--gold);box-shadow:0 0 0 4px rgba(230,182,98,.16);}
.notice.n-info .ndot{background:#5b9cf0;box-shadow:0 0 0 4px rgba(91,156,240,.16);}
.notice.n-good .ndot{background:var(--ok);}
.notice.n-urgent .nt,.notice.n-warn .nt,.notice.n-info .nt{color:var(--text);}
.ndots{display:flex;gap:6px;justify-content:center;margin:0 0 14px;}
.ndots span{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:.22s;}
.ndots span.on{background:var(--gold);width:18px;border-radius:3px;}

/* ─ фото инцидента: превью при отправке и у админа ─ */
.phgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.phthumb{position:relative;width:74px;height:74px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);}
.phthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.phthumb .phx{position:absolute;top:3px;right:3px;width:21px;height:21px;border:0;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:11px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.incphotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.incph{width:86px;height:86px;border-radius:12px;object-fit:cover;background:var(--surface2);
  border:1px solid var(--line);cursor:pointer;}