/* css/tasks.css — KADRooM GM, DESIGN v7 (срібло/фіолет/червоний на чорному).
   Орієнтир: alive_preview.html + brand_preview.html. api.js не залежить від візуалу.
   Зерно-фактура статична (без jitter — щоб не шуміло на PWA). */
:root{
  --bg:#0b0a0c; --bg2:#100f12; --surface:#151419; --surface2:#1d1c23; --surface3:#23222b;
  --line:#282730; --line2:#363545;
  --silver:#d4d0ca; --silver-dim:#a8a39c;
  --violet:#8E7BA6; --violet-btn:#7E6A9A; --violet-l:#BFA0D0;
  --red:#C0453C; --sage:#7BA88E;
  --txt:#e9e5df; --txt2:#aaa49c; --txt3:#736e66;
  /* статуси */
  --st-new:#736e66; --st-work:#8E7BA6; --st-review:#BFA0D0; --st-block:#C0453C; --st-done:#d4d0ca;
  --h:'Alumni Sans',sans-serif; --b:'Montserrat',sans-serif;
}
*{margin:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(100% 55% at 50% -12%, rgba(142,123,166,.07), transparent 60%),
    radial-gradient(130% 80% at 50% 118%, rgba(0,0,0,.55), transparent 55%),
    var(--bg);
  color:var(--txt);font-family:var(--b);font-size:15px;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* зерно-фактура */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.045;mix-blend-mode:overlay;background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hidden{display:none!important}
.ic{display:inline-flex;width:16px;height:16px;vertical-align:-3px;flex:0 0 auto}.ic svg{width:100%;height:100%}
@keyframes sheen{0%,72%{left:-65%}100%{left:150%}}

/* ===== LOGIN ===== */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:340px;text-align:center}
.brand-logo{position:relative;overflow:hidden;border-radius:4px;margin:0 auto 8px;line-height:0}
.brand-logo::after{content:'';position:absolute;top:0;left:-65%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg);animation:sheen 7s ease-in-out infinite;pointer-events:none}
.brand-sub{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--txt3);margin-bottom:26px}.brand-sub b{color:var(--violet)}
.pin-display{display:flex;justify-content:center;gap:13px;margin-bottom:24px}
.pin-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--line2);transition:.2s}
.pin-dot.on{background:var(--violet);border-color:var(--violet);box-shadow:0 0 0 3px rgba(142,123,166,.12)}
.pin-dot.err{border-color:var(--red);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;max-width:300px;margin:0 auto}
.key{aspect-ratio:1.4;border-radius:16px;background:linear-gradient(180deg,#1b1a21,#141318);border:1px solid rgba(212,208,202,.16);color:var(--silver);font-family:var(--h);font-weight:700;font-size:25px;cursor:pointer;transition:.13s;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.5)}
.key:active{transform:scale(.96);border-color:var(--violet);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(142,123,166,.4)}
.key.fn{font-size:20px;color:var(--violet-l)}
.login-hint{margin-top:20px;font-size:12px;color:var(--txt3)}

/* ===== TOP ===== */
.top{position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg),rgba(11,10,12,.92));backdrop-filter:blur(6px);padding:13px 16px 11px;border-bottom:1px solid var(--line)}
.top-row{max-width:640px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.who{display:flex;align-items:center;gap:10px}
.meta{text-align:right;line-height:1.1}
.badge{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--txt3)}
.name{font-family:var(--h);font-weight:800;font-size:18px;color:var(--silver)}
.name.super{color:var(--violet-l)}
.icon-btn{position:relative;width:38px;height:38px;border-radius:10px;background:linear-gradient(180deg,#1a1920,#141318);border:1px solid var(--line2);color:var(--txt2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.icon-btn .ic{width:18px;height:18px}
.dotbadge{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--violet-l);box-shadow:0 0 6px rgba(191,160,208,.5)}

#app{padding:0 16px 84px}
#app>*:not(.top){max-width:640px;margin-left:auto;margin-right:auto}
#hero,#alertSlot,.stats,.filters,#taskList{margin-top:14px}

/* ===== HERO ===== */
.hero{background:linear-gradient(180deg,#191820,#141318);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 4px 14px rgba(0,0,0,.4)}
.hero-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hero-greet{font-family:var(--h);font-weight:600;font-size:21px}.hero-greet .em{color:var(--violet-l)}
.hero-streak{font-size:11px;color:var(--txt2);text-align:right}.hero-streak b{color:var(--violet-l);font-family:var(--h);font-size:15px}
.progress-wrap{margin-top:10px}
.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--txt2);margin-bottom:6px}.progress-label b{color:var(--violet-l);font-family:var(--h);font-size:13px}
.progress-bar{height:8px;border-radius:99px;background:var(--surface3);overflow:hidden;border:1px solid var(--line)}
.progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet-btn),var(--violet-l));transition:width .5s}
.hero-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.ach{font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--surface3);border:1px solid var(--line2);color:var(--txt2);display:inline-flex;align-items:center;gap:5px}
.ach .ic{width:13px;height:13px}
.ach.gold{color:var(--violet-l);border-color:rgba(191,160,208,.3)}
.ach.hot{color:var(--red);border-color:rgba(192,69,60,.4)}

/* ===== ALERT ===== */
.alertbar{display:flex;align-items:center;gap:8px;background:rgba(192,69,60,.1);border:1px solid rgba(192,69,60,.3);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--txt)}
.alertbar .ic{width:16px;height:16px;color:var(--red)}.alertbar b{color:var(--violet-l)}
.alertbar .x{margin-left:auto;cursor:pointer;color:var(--txt3);width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{background:linear-gradient(180deg,#191820,#141318);border:1px solid var(--line2);border-radius:10px;padding:10px 4px;text-align:center;cursor:pointer;transition:.15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.stat .n{font-family:var(--h);font-weight:800;font-size:22px;line-height:1}
.stat .l{font-size:9px;letter-spacing:.3px;text-transform:uppercase;color:var(--txt3);margin-top:3px}
.stat.block .n{color:var(--st-block)}.stat.work .n{color:var(--st-work)}.stat.idle .n{color:var(--st-review)}.stat.ok .n{color:var(--st-done)}
.stat.on{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet) inset}

/* ===== FILTERS ===== */
.filters{display:flex;flex-direction:column;gap:8px}
.frow{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:600;padding:7px 12px;border-radius:99px;background:linear-gradient(180deg,#1a1920,#141318);border:1px solid var(--line2);color:var(--txt2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:normal;min-width:0;box-sizing:border-box}
.chip .ic{width:13px;height:13px}
.chip .c{font-size:10px;color:var(--txt3);background:var(--surface3);border-radius:99px;padding:0 6px;margin-left:2px}
.chip.on,.chip.on.lime{background:linear-gradient(180deg,rgba(142,123,166,.22),rgba(142,123,166,.1));border-color:var(--violet);color:var(--violet-l);font-weight:700}
.search-row{display:flex;gap:8px}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:0 12px}
.search .ic{color:var(--txt3)}
.search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);font-family:var(--b);font-size:16px;padding:10px 0}
.sort-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#1a1920,#141318);border:1px solid var(--line2);border-radius:10px;padding:10px 13px;color:var(--txt2);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.sort-btn .ic{width:15px;height:15px;color:var(--violet)}

/* ===== GROUP HEADERS ===== */
.group-h{margin:22px 2px 10px}
.group-h-top{display:flex;align-items:center;gap:7px;font-family:var(--h);font-weight:600;font-size:16px;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px}
.group-h-top .gi{display:inline-flex;width:17px;height:17px;color:var(--violet)}
.group-h-top .gc{margin-left:auto;font-size:12px;color:var(--txt3);font-family:var(--b);font-weight:600;letter-spacing:0}
.group-prog{height:3px;border-radius:99px;background:var(--surface3);overflow:hidden;margin-top:7px}
.group-prog-fill{height:100%;background:linear-gradient(90deg,var(--violet-btn),var(--violet-l))}

/* ===== CARDS ===== */
.cards{display:flex;flex-direction:column;gap:10px}
.card{background:linear-gradient(180deg,#191820,#141318);border:1px solid var(--line2);border-radius:13px;padding:13px 14px;position:relative;overflow:hidden;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 4px 14px rgba(0,0,0,.4);animation:cardIn .3s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--st-new)}
.card.new::before{background:var(--st-new)}.card.work::before{background:var(--st-work)}.card.review::before{background:var(--st-review)}.card.block::before{background:var(--st-block)}.card.done::before{background:var(--st-done)}
.card.flag::before{background:var(--red)}
.card.flag{box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 0 0 1px rgba(192,69,60,.28),0 4px 16px rgba(0,0,0,.45)}
.card.review{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(191,160,208,.4),0 4px 14px rgba(0,0,0,.4)}
.card.done{opacity:.6}
.card.stale1{opacity:.82}.card.stale2{opacity:.66}.card.stale3{opacity:.5}
.flag-row{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--red);margin-bottom:7px;letter-spacing:.5px}
.flag-row .ic{width:14px;height:14px}
.flag-row.rev{color:var(--violet-l)}
.card-t{font-weight:600;font-size:14.5px;line-height:1.35}
.card.done .card-t{text-decoration:line-through;text-decoration-color:var(--txt3);color:var(--txt2)}
.blocker-note{margin-top:8px;font-size:12px;color:var(--txt2);background:rgba(192,69,60,.08);border-left:2px solid var(--st-block);border-radius:0 6px 6px 0;padding:7px 10px}
.blocker-note b{color:var(--st-block);display:inline-flex;align-items:center;gap:4px}
.card-desc{font-size:12.5px;color:var(--txt2);line-height:1.5;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.tag{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);color:var(--txt2);max-width:100%;min-width:0}
.tag .ic{width:12px;height:12px}
.tag.st{font-weight:700;background:rgba(142,123,166,.16);color:var(--violet-l);border-color:rgba(142,123,166,.35)}
.tag.st.new{background:var(--surface3);color:var(--silver-dim);border-color:var(--line2)}
.tag.st.work{background:rgba(142,123,166,.16);color:var(--violet-l);border-color:rgba(142,123,166,.35)}
.tag.st.review{background:rgba(191,160,208,.16);color:var(--violet-l);border-color:rgba(191,160,208,.4)}
.tag.st.block{background:rgba(192,69,60,.15);color:var(--st-block);border-color:rgba(192,69,60,.35)}
.tag.st.done{background:rgba(212,208,202,.13);color:var(--silver);border-color:rgba(212,208,202,.3)}
.tag.me{background:rgba(191,160,208,.12);color:var(--violet-l);border-color:rgba(191,160,208,.3)}
.tag.conf{color:var(--violet-l)}
.tag.stale{color:var(--txt3)}

/* ===== EMPTY / LOADING ===== */
.empty-state{text-align:center;padding:54px 20px;color:var(--txt3)}
.empty-state .clap-emoji{font-size:34px;display:block;margin-bottom:10px}
.empty-state .big{font-family:var(--h);font-weight:700;font-size:20px;color:var(--txt2);margin-bottom:4px}

/* ===== OVERLAY / MODAL ===== */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center;overflow-x:hidden;overscroll-behavior:contain;animation:ovIn .2s ease}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@media(min-width:560px){.overlay{align-items:center;padding:20px}}
.sheet{background:var(--surface);border:1px solid var(--line2);border-radius:16px 16px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 -8px 30px rgba(0,0,0,.5);animation:sheetIn .26s cubic-bezier(.22,1,.36,1)}
@media(min-width:560px){.sheet{border-radius:16px}}
@keyframes sheetIn{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.sheet-head{padding:16px 18px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}
.sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line2);margin:0 auto 12px}
@media(min-width:560px){.sheet-grip{display:none}}
.sheet-head h2{font-family:var(--h);font-weight:700;font-size:22px;line-height:1.15}
.sheet-id{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--txt3);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sheet-id .ic{width:12px;height:12px}
.sheet-body{padding:16px 18px}
.field{margin-bottom:18px}
.field>label{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt2);margin-bottom:8px;font-weight:700;flex-wrap:wrap}
.field>label .ic{width:13px;height:13px;color:var(--violet)}
.field>label .lk{margin-left:6px;color:var(--txt3);font-weight:600;letter-spacing:0;text-transform:none}
/* СЕГМЕНТИ — переносяться, не вилазять (фікс мобілки) */
.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg button,.seg span{flex:1 1 90px;min-width:0;box-sizing:border-box;text-align:center;padding:11px 8px;border-radius:11px;background:linear-gradient(180deg,#1a1920,#141318);border:1px solid var(--line2);font-size:12.5px;font-weight:600;color:var(--txt2);display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font-family:var(--b);white-space:normal;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.seg button .ic,.seg span .ic{width:14px;height:14px}
.seg button.on{background:linear-gradient(180deg,rgba(142,123,166,.22),rgba(142,123,166,.1));border-color:var(--violet);color:var(--violet-l);font-weight:700}
.owners-seg{display:flex;gap:7px;flex-wrap:wrap}
.owners-seg button{flex:1 1 70px;min-width:0;box-sizing:border-box;padding:10px 8px;border-radius:10px;background:linear-gradient(180deg,#1a1920,#141318);border:1px solid var(--line2);font-size:13px;font-weight:600;color:var(--txt2);cursor:pointer;font-family:var(--b);white-space:normal}
.owners-seg button.on{background:linear-gradient(180deg,rgba(142,123,166,.22),rgba(142,123,166,.1));border-color:var(--violet);color:var(--violet-l)}
.ro{background:var(--surface2);border:1px solid var(--line2);border-radius:8px;padding:11px;font-size:14px;color:var(--txt);line-height:1.5;white-space:pre-wrap;display:flex;align-items:center;gap:7px}.ro .ic{width:15px;height:15px;color:var(--violet)}
textarea,.field input[type=text],.field input[type=number],.cmt-add input{width:100%;background:var(--surface2);border:1px solid var(--line2);border-radius:8px;padding:11px;font-family:var(--b);font-size:16px;color:var(--txt);resize:none;outline:none}
textarea:focus,input:focus{border-color:var(--violet)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* result + approve */
.result-box{background:rgba(191,160,208,.07);border:1px solid rgba(191,160,208,.3);border-radius:8px;padding:12px}
.result-box .ph{font-size:13px;color:var(--txt3);font-style:italic}
.submit-result{margin-top:10px;width:100%}
.approve-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn{flex:1 1 120px;min-width:0;box-sizing:border-box;padding:12px;border-radius:12px;font-family:var(--h);font-weight:800;font-size:16px;letter-spacing:.5px;text-align:center;border:1px solid var(--line2);background:linear-gradient(180deg,#1a1920,#141318);color:var(--txt);cursor:pointer}
.btn-primary{position:relative;overflow:hidden;background:linear-gradient(180deg,#8E7BA6,#735F90);border:none;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px rgba(0,0,0,.4)}
.btn-primary::after{content:'';position:absolute;top:0;left:-65%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);animation:sheen 7s ease-in-out infinite 1s;pointer-events:none}
.btn-primary:active{transform:scale(.99);filter:brightness(.96)}
.btn-ghost{background:transparent;color:var(--txt2)}
.btn.accept{background:linear-gradient(180deg,#8ab89c,#6b9a80);border:none;color:#0e1a14}
.btn.return{background:transparent;border-color:var(--st-block);color:var(--st-block)}
.sheet-actions{position:sticky;bottom:0;display:flex;gap:8px;padding:14px 18px;background:linear-gradient(transparent,var(--surface) 22%);border-top:1px solid var(--line)}
/* time */
.time-row{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--line2);border-radius:8px;padding:11px 13px;flex-wrap:wrap}
.time-total{font-family:var(--h);font-weight:800;font-size:22px;color:var(--violet-l)}
.time-sub{font-size:10.5px;color:var(--txt3)}
.quick{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.quick span{padding:6px 11px;border-radius:99px;background:var(--surface3);border:1px solid var(--line2);font-size:11.5px;font-weight:600;color:var(--txt2);cursor:pointer}
/* subtasks */
.sub{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}
.sub:last-of-type{border-bottom:none}
.sub .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--sage);cursor:pointer}
.sub .box .ic{width:12px;height:12px}
.sub.done .box{background:rgba(123,168,142,.2);border-color:var(--sage)}
.sub.done .tx{color:var(--txt3);text-decoration:line-through}
.sub .tx{font-size:13.5px;flex:1;min-width:0}
.sub .del{color:var(--txt3);cursor:pointer;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.subprog{font-size:11px;color:var(--violet-l);font-weight:700;margin-left:auto}
.sub-add{display:flex;gap:8px;margin-top:8px}
.sub-add input{flex:1;min-width:0}.sub-add button{padding:0 14px;border-radius:8px;background:var(--surface3);border:1px solid var(--line2);color:var(--violet-l);font-size:18px;cursor:pointer;flex:0 0 auto}
/* comments */
.cmt-thread{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;max-height:240px;overflow-y:auto}
.cmt{background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.cmt .ch{display:flex;justify-content:space-between;gap:8px;font-size:11px;margin-bottom:3px}.cmt .ch b{color:var(--violet-l)}.cmt .ch .t{color:var(--txt3)}
.cmt .cb{font-size:13px;color:var(--txt);line-height:1.45}
.cmt-empty{font-size:13px;color:var(--txt3);font-style:italic;padding:4px 0}
.cmt-add{display:flex;gap:8px}.cmt-add input{flex:1;min-width:0}.cmt-add button{padding:0 16px;border-radius:8px;background:linear-gradient(180deg,#8E7BA6,#735F90);border:none;color:#fff;font-weight:700;cursor:pointer;flex:0 0 auto}
.conf-toggle{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--line2);border-radius:8px;padding:12px;cursor:pointer}
.conf-toggle .lbl{flex:1;min-width:0}.conf-toggle .lbl b{display:block;font-size:13px}.conf-toggle .lbl span{font-size:11px;color:var(--txt3)}
.conf-toggle .switch{width:42px;height:24px;border-radius:99px;background:var(--surface3);border:1px solid var(--line2);position:relative;flex:0 0 auto;transition:.2s}
.conf-toggle .switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--txt3);transition:.2s}
.conf-toggle.on .switch{background:var(--violet);border-color:var(--violet)}
.conf-toggle.on .switch::after{transform:translateX(18px);background:#fff}
/* delete */
.del-zone{margin-top:6px;text-align:center}
.btn-del{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid rgba(192,69,60,.35);color:var(--st-block);font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;font-family:var(--b)}
.btn-del .ic{width:15px;height:15px}
.btn-del:active{background:rgba(192,69,60,.1)}

/* ===== FAB ===== */
.fab{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:7px;padding:14px 20px;border-radius:99px;background:linear-gradient(180deg,#8E7BA6,#735F90);border:none;color:#fff;font-family:var(--h);font-weight:800;font-size:16px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px rgba(0,0,0,.4);overflow:hidden}
.fab .ic{width:18px;height:18px}
.fab::after{content:'';position:absolute;top:0;left:-65%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);animation:sheen 7s ease-in-out infinite 2s;pointer-events:none}

/* ===== TOAST ===== */
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);z-index:60;background:var(--surface3);border:1px solid var(--line2);color:var(--txt);font-size:13px;padding:11px 18px;border-radius:99px;opacity:0;pointer-events:none;transition:.3s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.tg{border-color:var(--violet);color:var(--violet-l)}
.toast.win{border-color:var(--sage);color:var(--sage)}

/* ===== LOG ===== */
.log-list{display:flex;flex-direction:column;gap:2px;padding:8px 0}
.log-item{display:flex;gap:11px;padding:11px 18px}
.log-icon{width:20px;flex:0 0 auto;color:var(--violet)}
.log-body{font-size:13px;line-height:1.4;min-width:0}.log-body .who{color:var(--violet-l);font-weight:700}
.log-body .arrow{color:var(--txt2)}.log-body .hl{color:var(--violet-l)}
.log-time{font-size:10.5px;color:var(--txt3);margin-top:2px}
.log-empty{text-align:center;padding:40px 24px;color:var(--txt3);font-size:13px;line-height:1.6}.log-empty .clap-emoji{font-size:30px;display:block;margin-bottom:8px}

/* ===== CONFETTI ===== */
.confetti-box{position:fixed;left:50%;top:40%;z-index:70;pointer-events:none}
.confetti-box i{position:absolute;width:8px;height:8px;border-radius:1px;animation:conf 1s ease-out forwards}
@keyframes conf{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(160px) rotate(360deg);opacity:0}}

/* ===== LOGO ===== */
.logo-login{width:300px;max-width:84vw;height:auto;display:block;margin:0 auto}
.logo-top{height:28px;width:auto;display:block}

@media(prefers-reduced-motion:reduce){*{animation:none!important}}