/* Трекер saintstore — neo-glass.
   Палитра и шрифты остаются от витрины (чёрный + лайм, Bebas/Manrope), а поверхности
   стеклянные: слоистая полупрозрачность, блюр, светлая кромка сверху, мягкая тень и
   лаймовое свечение у активного. Правила — в DESIGN.md проекта. */
:root {
  --black:#07080a;                 /* фон глубже, чем на витрине: стекло на нём читается */
  --dark:#0e1013;
  --white:#ffffff;
  --lime:#c8f500;
  --lime-dim:rgba(200,245,0,.14);
  --red:#ff5c5c;
  --mute:rgba(255,255,255,.48);
  --faint:rgba(255,255,255,.3);

  /* Стекло: три ступени глубины. g1 — панели, g2 — карточки внутри, g3 — кнопки. */
  --g1:linear-gradient(157deg, rgba(255,255,255,.115), rgba(255,255,255,.04) 62%);
  --g2:linear-gradient(157deg, rgba(255,255,255,.085), rgba(255,255,255,.028) 68%);
  --g3:linear-gradient(157deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  --edge:rgba(255,255,255,.15);
  --edge-hi:rgba(255,255,255,.28);
  --blur:blur(18px) saturate(150%);
  --lift:0 14px 40px rgba(0,0,0,.5);
  --lift-sm:0 6px 20px rgba(0,0,0,.38);
  --inner:inset 0 1px 0 rgba(255,255,255,.14);   /* блик по верхней кромке — суть стекла */
  --glow:0 0 26px rgba(200,245,0,.28);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  background:var(--black); color:var(--white); font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100dvh;
  position:relative;
}
::selection { background:rgba(200,245,0,.28); }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(200,245,0,.22); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(200,245,0,.45); }

/* ── фон: три размытых пятна + зерно, чтобы стеклу было что преломлять ───────── */
#bg { position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--black); }
#bg i { position:absolute; display:block; border-radius:50%; filter:blur(80px); opacity:.9; }
#bg .b1 { width:58vw; height:58vw; left:-20vw; top:-26vw;
  background:radial-gradient(circle, rgba(200,245,0,.24), rgba(200,245,0,.05) 55%, transparent 72%);
  animation:drift1 34s var(--ease) infinite alternate; }
#bg .b2 { width:52vw; height:52vw; right:-14vw; top:8vh;
  background:radial-gradient(circle, rgba(90,180,255,.24), rgba(90,180,255,.05) 55%, transparent 72%);
  animation:drift2 42s var(--ease) infinite alternate; }
#bg .b3 { width:70vw; height:48vw; left:16vw; bottom:-26vw;
  background:radial-gradient(circle, rgba(160,120,255,.18), rgba(200,245,0,.05) 55%, transparent 74%);
  animation:drift1 50s var(--ease) infinite alternate-reverse; }
#bg u { position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift1 { to { transform:translate3d(7vw, 5vh, 0) scale(1.12) } }
@keyframes drift2 { to { transform:translate3d(-6vw, -4vh, 0) scale(1.08) } }

/* ── стеклянная поверхность ─────────────────────────────────────────────────── */
.glass { background:var(--g1); border:1px solid var(--edge); border-radius:20px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--lift), var(--inner); }
/* Если браузер не умеет блюр — стекло становится просто плотной панелью, а не мутью. */
@supports not (backdrop-filter: blur(1px)) {
  .glass, .top, .sheet, .col, .person { background:rgba(20,22,26,.94) !important; }
}

button { cursor:pointer; font-family:'Manrope',sans-serif; touch-action:manipulation;
  border:none; background:none; color:inherit;
  transition:transform .16s var(--ease-spring), background .22s var(--ease),
             border-color .22s var(--ease), color .22s var(--ease),
             box-shadow .22s var(--ease), opacity .22s var(--ease); }
button:not(:disabled):active { transform:scale(.96); }
button:disabled { opacity:.4; cursor:not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [type=checkbox]:focus-visible {
  outline:2px solid rgba(200,245,0,.55); outline-offset:2px; }

input, textarea, select {
  font-family:'Manrope',sans-serif; font-size:.85rem; color:var(--white);
  background:rgba(255,255,255,.045); border:1px solid var(--edge); border-radius:13px;
  padding:11px 13px; width:100%; box-shadow:var(--inner);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .22s var(--ease), background .22s var(--ease),
             box-shadow .22s var(--ease); }
input:hover, textarea:hover, select:hover { border-color:var(--edge-hi); }
input:focus, textarea:focus, select:focus { outline:none; border-color:rgba(200,245,0,.5);
  background:rgba(255,255,255,.07);
  box-shadow:var(--inner), 0 0 0 3px rgba(200,245,0,.12); }
input::placeholder, textarea::placeholder { color:rgba(255,255,255,.28); }
textarea { resize:vertical; min-height:76px; line-height:1.5; }
select { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 8l3-3.5' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px;
  padding-right:32px; }
select option { background:#12151a; color:var(--white); }

input[type="checkbox"] {
  appearance:none; -webkit-appearance:none; width:20px; height:20px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.28); border-radius:7px; padding:0;
  background:var(--g3); box-shadow:var(--inner); cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease),
             box-shadow .22s var(--ease), transform .16s var(--ease-spring); }
input[type="checkbox"]:hover { border-color:rgba(200,245,0,.6); box-shadow:var(--inner), var(--glow); }
input[type="checkbox"]:active { transform:scale(.9); }
input[type="checkbox"]:checked {
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5.4' fill='none' stroke='%2307080a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
  border-color:var(--lime); box-shadow:var(--glow); }

.cap { font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); }

/* ── кнопки ─────────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:100px; padding:10px 19px; font-size:.63rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--edge); background:var(--g3); color:var(--white);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--lift-sm), var(--inner); }
.btn:not(:disabled):hover { border-color:rgba(200,245,0,.45); color:var(--lime);
  box-shadow:var(--lift-sm), var(--inner), 0 0 22px rgba(200,245,0,.15); }
.btn.acc { color:#07080a; border-color:rgba(200,245,0,.7);
  background:linear-gradient(157deg, #dcff3a, var(--lime) 55%, #b6de00);
  box-shadow:0 10px 30px rgba(200,245,0,.22), inset 0 1px 0 rgba(255,255,255,.45); }
.btn.acc:not(:disabled):hover { color:#07080a; box-shadow:0 12px 34px rgba(200,245,0,.34),
  inset 0 1px 0 rgba(255,255,255,.5); }
.btn.dgr:not(:disabled):hover { border-color:rgba(255,92,92,.55); color:var(--red);
  box-shadow:var(--lift-sm), var(--inner), 0 0 22px rgba(255,92,92,.14); }
.btn.sm { padding:7px 13px; font-size:.56rem; letter-spacing:.1em; }
.ico { width:34px; height:34px; border-radius:100px; display:inline-flex; flex-shrink:0;
  align-items:center; justify-content:center; border:1px solid var(--edge);
  background:var(--g3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--lift-sm), var(--inner); }
.ico:not(:disabled):hover { border-color:rgba(200,245,0,.45); color:var(--lime);
  box-shadow:var(--lift-sm), var(--inner), 0 0 22px rgba(200,245,0,.16); }
.ico svg { width:14px; height:14px; }

/* ── шапка ──────────────────────────────────────────────────────────────────── */
.top { position:sticky; top:0; z-index:40; background:rgba(10,12,15,.62);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.top-in { max-width:1400px; margin:0 auto; padding:13px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.logo { font-family:'Bebas Neue','Oswald',sans-serif; font-size:1.4rem; letter-spacing:.15em;
  text-transform:uppercase; }
.logo b { color:var(--lime); font-weight:400; text-shadow:0 0 18px rgba(200,245,0,.5); }
.tabs { display:flex; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none; padding:2px; }
.tabs::-webkit-scrollbar { display:none; }
.tab { border-radius:100px; padding:9px 17px; font-size:.6rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mute); white-space:nowrap;
  border:1px solid transparent; }
.tab:hover { color:var(--white); background:rgba(255,255,255,.05); }
.tab[aria-current="page"] { color:var(--lime); border-color:rgba(200,245,0,.35);
  background:var(--lime-dim); box-shadow:var(--inner), 0 0 20px rgba(200,245,0,.12); }
.who { display:flex; align-items:center; gap:10px; }
.ava { width:32px; height:32px; border-radius:100px; display:grid; place-items:center;
  font-size:.68rem; font-weight:800; color:var(--lime); flex-shrink:0;
  background:var(--lime-dim); border:1px solid rgba(200,245,0,.35);
  box-shadow:var(--inner), 0 0 18px rgba(200,245,0,.14); }

/* ── страница ───────────────────────────────────────────────────────────────── */
main { max-width:1400px; margin:0 auto; padding:26px 20px 90px;
  animation:in .34s var(--ease) both; }
@keyframes in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.head h1 { font-family:'Bebas Neue','Oswald',sans-serif; font-size:2rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:400; line-height:1; }
.spacer { flex:1 }
.datenav { display:flex; align-items:center; gap:9px; }
.datenav .d { font-size:.72rem; font-weight:800; letter-spacing:.1em; min-width:142px;
  text-align:center; text-transform:uppercase; color:rgba(255,255,255,.85); }

/* ── колонки людей ──────────────────────────────────────────────────────────── */
.cols { display:grid; gap:16px; justify-content:start;
  grid-template-columns:repeat(auto-fit, minmax(300px, 460px)); }
.col { background:var(--g1); border:1px solid var(--edge); border-radius:20px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--lift), var(--inner);
  padding:16px; display:flex; flex-direction:column; gap:11px; min-height:190px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease); }
.col-h { display:flex; align-items:center; gap:10px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07); }
.col-h .nm { font-weight:800; font-size:.82rem; letter-spacing:.03em; }
.col-h .cnt { margin-left:auto; font-size:.6rem; font-weight:800; letter-spacing:.1em;
  color:var(--mute); }
.bar { height:4px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
.bar i { display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, rgba(200,245,0,.65), var(--lime));
  box-shadow:0 0 14px rgba(200,245,0,.55); transition:width .4s var(--ease); }

/* ── карточка задачи ────────────────────────────────────────────────────────── */
.task { border:1px solid rgba(255,255,255,.08); border-radius:15px; padding:12px 13px;
  background:var(--g2); box-shadow:var(--lift-sm), var(--inner);
  display:flex; gap:11px; align-items:flex-start;
  transition:border-color .22s var(--ease), background .22s var(--ease),
             box-shadow .22s var(--ease), transform .18s var(--ease-spring),
             opacity .22s var(--ease); }
.task:hover { border-color:var(--edge-hi); transform:translateY(-1px);
  box-shadow:var(--lift), var(--inner); }
.task.done { opacity:.45; box-shadow:none; }
.task.done .t-title { text-decoration:line-through; text-decoration-color:var(--faint); }
.t-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.t-title { font-size:.84rem; font-weight:600; line-height:1.4; word-wrap:break-word; }
.t-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.t-proof { font-size:.66rem; color:var(--faint); line-height:1.4; }
.chip { font-size:.53rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:100px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04); color:var(--mute); white-space:nowrap;
  box-shadow:var(--inner); }
.chip.p2 { color:var(--red); border-color:rgba(255,92,92,.4); background:rgba(255,92,92,.09); }
.chip.p1 { color:var(--lime); border-color:rgba(200,245,0,.35); background:var(--lime-dim); }
.chip.wait { color:var(--lime); border-color:rgba(200,245,0,.35); background:var(--lime-dim); }
.chip.late { color:var(--red); border-color:rgba(255,92,92,.4); background:rgba(255,92,92,.09); }
.t-acts { display:flex; gap:6px; align-items:center; }
.t-acts .ico { width:30px; height:30px; }
.empty { color:rgba(255,255,255,.26); font-size:.73rem; text-align:center; padding:22px 0; }

/* ── модальное окно ─────────────────────────────────────────────────────────── */
#modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:rgba(4,5,7,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:18px; animation:fade .2s var(--ease) both; }
#modal[hidden] { display:none; }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
.sheet { width:100%; max-width:470px; max-height:86dvh; overflow:auto;
  background:linear-gradient(157deg, rgba(30,34,40,.92), rgba(14,16,20,.92));
  backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--edge-hi); border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.6), var(--inner);
  padding:22px; display:flex; flex-direction:column; gap:14px;
  animation:up .26s var(--ease-spring) both; }
@keyframes up { from { transform:translateY(14px) scale(.98); opacity:0 }
                to { transform:none; opacity:1 } }
.sheet h2 { font-family:'Bebas Neue','Oswald',sans-serif; font-size:1.3rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:400; }
.sheet .note { font-size:.72rem; color:var(--faint); line-height:1.45; }
.field { display:flex; flex-direction:column; gap:7px; }
.row { display:flex; gap:11px; }
.row > * { flex:1; min-width:0; }
.acts { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:4px; }
.err { color:var(--red); font-size:.72rem; min-height:1em; }

/* ── вход ───────────────────────────────────────────────────────────────────── */
.login { min-height:100dvh; display:grid; place-items:center; padding:20px; }
.login .sheet { max-width:350px; animation:up .4s var(--ease-spring) both; }
.login .logo { font-size:2rem; text-align:center; }
.login .cap { text-align:center; }

/* ── участники ──────────────────────────────────────────────────────────────── */
.people { display:flex; flex-direction:column; gap:12px; max-width:780px; }
.person { display:flex; align-items:center; gap:13px; padding:15px 17px;
  border:1px solid var(--edge); border-radius:18px; background:var(--g1);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--lift-sm), var(--inner);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease); }
.person:hover { border-color:var(--edge-hi); box-shadow:var(--lift), var(--inner); }
.person.off { opacity:.42; }
.person .nm { font-weight:700; font-size:.86rem; }
.person .lg { color:var(--mute); font-size:.7rem; }

/* ── всплывашка ─────────────────────────────────────────────────────────────── */
#toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(22px);
  z-index:200; padding:12px 22px; border-radius:100px; font-size:.7rem; font-weight:700;
  letter-spacing:.05em; opacity:0; pointer-events:none;
  background:linear-gradient(157deg, rgba(32,36,42,.95), rgba(14,16,20,.95));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--edge-hi); box-shadow:0 16px 40px rgba(0,0,0,.5), var(--inner);
  transition:opacity .24s var(--ease), transform .3s var(--ease-spring); }
#toast.on { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.bad { border-color:rgba(255,92,92,.5); color:var(--red); }

@media (max-width:768px) {
  body { font-size:14px; }
  .top-in { padding:11px 13px; gap:10px; }
  .tabs { order:3; width:100%; flex:1 0 100%; }
  .who { margin-left:auto; }
  main { padding:18px 13px 80px; }
  .head { gap:11px; }
  .head h1 { font-size:1.55rem; }
  .head .spacer { display:none; }
  .head > .btn.acc { width:100%; }
  .datenav { flex:1; justify-content:flex-end; }
  .tab { padding:8px 13px; letter-spacing:.08em; }
  .cols { grid-template-columns:1fr; }
  .sheet { border-radius:20px; padding:18px; }
  /* На телефоне блюр дорогой: убавляем, чтобы прокрутка не дёргалась. */
  :root { --blur:blur(12px) saturate(140%); }
  #bg i { filter:blur(70px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  #bg i { animation:none; }
}