/* ============================================================
   СпортКалендарь — Mercury system (dark default + light)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --accent: #5266eb;
  --accent-hover: #6877f0;
  --on-accent: #ffffff;
  --ghost-blue: #cdddff;
  --r-panel: 6px;
  --r-pill: 999px;
  --sidebar-w: 270px;
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.4,.5,1);
}

[data-theme="dark"] {
  --bg:#171721; --surface:#1e1e2a; --surface-2:#272735; --surface-3:#2f2f3f;
  --text:#ededf3; --text-2:#c3c3cc; --text-3:#8a8a97;
  --line:rgba(112,112,125,.26); --line-strong:rgba(112,112,125,.5);
  --accent-soft:rgba(82,102,235,.18); --avatar-bg:#2f2f3f; --avatar-fg:#d9d9e2;
  --ok-ink:#86d9a6; --ok-bg:rgba(110,200,150,.14);
  --warn-ink:#e6c47e; --warn-bg:rgba(220,180,90,.13);
  --bad-ink:#ec9c92; --bad-bg:rgba(225,120,110,.14);
  --info-ink:#cdddff; --info-bg:rgba(82,102,235,.16);
  --live-ink:#7fd1c4; --live-bg:rgba(90,200,180,.15);
  --scrim:rgba(8,8,14,.66); --ring:rgba(82,102,235,.35);
  --grid:rgba(112,112,125,.16);
  --aside-grad: radial-gradient(120% 120% at 80% 8%, rgba(82,102,235,.30), transparent 55%), linear-gradient(165deg,#1b1b27,#14141d 62%,#101019);
  --shadow: 0 18px 48px -20px rgba(0,0,0,.7);
}
[data-theme="light"] {
  --bg:#eceef4; --surface:#ffffff; --surface-2:#f3f4f8; --surface-3:#eaebf1;
  --text:#1c1c27; --text-2:#565663; --text-3:#8c8c97;
  --line:#e6e7ee; --line-strong:#d6d7df;
  --accent-soft:rgba(82,102,235,.10); --avatar-bg:#eef0f6; --avatar-fg:#4b4b59;
  --ok-ink:#1c7a45; --ok-bg:#e6f5ec;
  --warn-ink:#8a6500; --warn-bg:#fbf1d3;
  --bad-ink:#b42318; --bad-bg:#fdeceb;
  --info-ink:#2a45c0; --info-bg:#eaf0ff;
  --live-ink:#0f7d6e; --live-bg:#dcf4ef;
  --scrim:rgba(24,24,32,.42); --ring:rgba(82,102,235,.30);
  --grid:rgba(120,120,135,.14);
  --aside-grad: radial-gradient(120% 120% at 80% 8%, rgba(82,102,235,.45), transparent 55%), linear-gradient(165deg,#2a2c44,#1b1c2c 62%,#14141d);
  --shadow: 0 20px 48px -22px rgba(40,42,70,.4);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:16px; line-height:1.5; letter-spacing:.1px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background: var(--accent-soft); }
button { font-family:inherit; cursor:pointer; color:inherit; }
input,select,textarea { font-family:inherit; }
h1,h2,h3,h4,p { margin:0; }
a { color:inherit; text-decoration:none; }
.ico { width:18px; height:18px; flex-shrink:0; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }

/* ============ SHELL ============ */
.app { display:flex; height:100vh; overflow:hidden; position:relative; }
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; border-right:1px solid var(--line);
  background:var(--bg); display:flex; flex-direction:column; padding:18px 14px 14px; z-index:40;
}
.org-switch { display:flex; align-items:center; gap:11px; padding:9px; border-radius:var(--r-panel); }
.org-mark { width:38px; height:38px; border-radius:10px; flex-shrink:0; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-weight:600; font-size:15px; }
.org-meta { min-width:0; }
.org-name { font-weight:600; font-size:14.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.org-role { font-size:12px; color:var(--text-3); }
.brand-block { padding:18px 9px 14px; }
.brand-title { font-weight:500; font-size:21px; letter-spacing:.3px; }
.brand-sub { font-size:11.5px; color:var(--text-3); margin-top:2px; letter-spacing:.2px; }

.nav { display:flex; flex-direction:column; gap:2px; }
.nav-label { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); padding:16px 11px 7px; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:var(--r-pill);
  color:var(--text-2); font-size:14.5px; font-weight:500; border:none; background:none; width:100%;
  text-align:left; transition:background .16s var(--ease), color .16s var(--ease); position:relative;
}
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:var(--surface-2); color:var(--text); font-weight:600; }
.nav-item.active::before { content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:99px; background:var(--accent); }
.nav-item .ico { width:19px; height:19px; color:var(--text-3); transition:color .16s; }
.nav-item:hover .ico, .nav-item.active .ico { color:var(--text); }
.nav-item.active .ico { color:var(--accent); }
.nav-item > span:not(.badge) { white-space:nowrap; flex:1; }
.nav-item .badge { font-size:11.5px; font-weight:600; color:var(--text-3); background:var(--surface-2); padding:1px 9px; border-radius:99px; flex-shrink:0; }
.nav-item.active .badge { background:var(--surface-3); color:var(--text-2); }
.nav-item .badge.hot { background:var(--bad-bg); color:var(--bad-ink); }
.sidebar-spacer { flex:1; }
.sidebar-foot { border-top:1px solid var(--line); padding-top:8px; margin-top:10px; }

/* ---- sidebar top (org + collapse toggle) ---- */
.sidebar { transition: width .3s var(--ease); }
.sidebar-top { display:flex; align-items:center; gap:6px; }
.sidebar-top .org-switch { flex:1; min-width:0; }
.rail-toggle { width:34px; height:34px; flex-shrink:0; border:none; background:transparent; color:var(--text-3); border-radius:9px; }
.rail-toggle:hover { background:var(--surface-2); color:var(--text); }
.rail-arrow { transition: transform .3s var(--ease); }

/* ---- expandable nav groups ---- */
.nav-group { display:flex; flex-direction:column; }
.nav-caret { width:16px; height:16px; margin-left:6px; color:var(--text-3); transition:transform .3s var(--ease); flex-shrink:0; }
.nav-group.open .nav-caret { transform:rotate(180deg); color:var(--text-2); }
.nav-sub { display:flex; flex-direction:column; overflow:hidden; max-height:0; opacity:0;
  transition:max-height .36s var(--ease), opacity .26s var(--ease); margin-top:0; }
.nav-group.open .nav-sub { max-height:360px; opacity:1; margin-top:2px; margin-bottom:4px; }
.nav-group.no-anim .nav-sub, .nav-group.no-anim .nav-subitem, .nav-group.no-anim .nav-caret { transition:none !important; }
.nav-subitem { display:flex; align-items:center; gap:11px; padding:8px 11px 8px 15px; margin-left:19px;
  border:none; border-left:1.5px solid var(--line); background:none; text-align:left;
  color:var(--text-3); font-size:13.5px; font-weight:500;
  transition:color .14s, border-color .14s, transform .3s var(--ease), opacity .3s var(--ease);
  transform:translateX(-10px); opacity:0; }
.nav-group.open .nav-subitem { transform:none; opacity:1; transition-delay:calc(var(--i) * 45ms + 70ms); }
.nav-subitem:hover { color:var(--text); border-color:var(--line-strong); }
.nav-subitem.active { color:var(--text); font-weight:600; border-color:var(--accent); }
.nav-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; opacity:.55; transition:background .14s; }
.nav-subitem.active .nav-dot { background:var(--accent); opacity:1; box-shadow:0 0 0 3px var(--accent-soft); }

/* ---- collapsed icon rail ---- */
.sidebar { transition: width .34s var(--ease), min-width .34s var(--ease), max-width .34s var(--ease); }
.nav-item > span:not(.badge), .org-meta, .brand-block, .nav-label { transition: opacity .2s var(--ease); }
.app.rail .sidebar { width:76px; min-width:76px; max-width:76px; overflow:hidden; }
.app.rail .brand-block, .app.rail .nav-label,
.app.rail .org-meta, .app.rail .nav-caret, .app.rail .nav-sub,
.app.rail .nav-item > span:not(.badge) { display:none; }
.app.rail .org-switch { display:none; }
.app.rail .sidebar-top { justify-content:center; }
.app.rail .nav-item { justify-content:center; padding:11px 0; }
.app.rail .nav-item .ico { width:21px; height:21px; }
.app.rail .nav-item.active::before { left:-11px; }
.app.rail .nav-item .badge { position:absolute; top:5px; right:13px; min-width:8px; width:8px; height:8px; padding:0; font-size:0; border-radius:50%; }
.app.rail .nav-item .badge.hot { background:var(--bad-ink); }
.app.rail .rail-arrow { transform:rotate(180deg); }

.main { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--surface); }
.topbar { height:68px; flex-shrink:0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 30px; background:var(--surface); z-index:20; }
.topbar h1 { font-size:22px; font-weight:500; letter-spacing:.2px; white-space:nowrap; }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-btn { width:40px; height:40px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:transparent; color:var(--text-2); display:grid; place-items:center; transition:background .16s, color .16s, border-color .16s; }
.icon-btn:hover { background:var(--surface-2); color:var(--text); }
.menu-btn { display:none; }
.bell-btn { position:relative; }
.bell-dot { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--bad-ink); color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center; border:2px solid var(--surface); }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:13px; background:var(--avatar-bg); color:var(--avatar-fg); flex-shrink:0; }

/* theme toggle: new icon spins in (rotation/scale only — opacity stays 1, never invisible) */
@keyframes themeSpinIn { from { transform: rotate(-130deg) scale(.35); } to { transform: rotate(0) scale(1); } }
.theme-btn .ico.theme-spin-in { animation: themeSpinIn .45s var(--spring); }
@media (prefers-reduced-motion: reduce){ .theme-btn .ico.theme-spin-in { animation:none; } }

.scroll { flex:1; overflow-y:auto; position:relative; }
.page { max-width:1120px; margin:0 auto; padding:34px 30px 90px; }
.page-wide { max-width:1320px; }

.scrim { display:none; position:absolute; inset:0; background:var(--scrim); z-index:35; opacity:0; transition:opacity .22s; }

/* ============ PAGE TRANSITION ============ */
@keyframes pageIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes pageInX { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
.page-anim { animation: pageIn .42s var(--ease); }
.tab-anim { animation: pageInX .3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .page-anim, .tab-anim, .stagger > * { animation:none !important; } }

/* staggered children — base state always visible; the page-level transition
   (.page-anim) carries the entrance, so nothing is ever stranded invisible */
.stagger > * { opacity: 1; }

/* ============ TYPО ============ */
.section-head { display:flex; align-items:center; gap:12px; margin:36px 0 18px; }
.section-head:first-child { margin-top:0; }
.section-head h2 { font-size:20px; font-weight:500; letter-spacing:.2px; }
.section-head .count { font-size:14px; color:var(--text-3); font-weight:500; }
.section-head .spacer { flex:1; }
.muted { color:var(--text-3); }
.greeting { font-size:34px; font-weight:300; letter-spacing:.4px; line-height:1.14; }
.greeting-sub { color:var(--text-2); margin-top:9px; font-size:15.5px; }

/* ============ BUTTONS ============ */
.btn { display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:11px 19px; border-radius:var(--r-pill); font-size:14.5px; font-weight:600; border:1px solid transparent; background:var(--surface-2); color:var(--text); transition:background .16s, border-color .16s, transform .05s; }
.btn:active { transform:translateY(.5px); }
.btn .ico { width:17px; height:17px; }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-ghost { background:transparent; border-color:var(--line-strong); color:var(--text); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-danger { background:transparent; border-color:var(--line-strong); color:var(--bad-ink); }
.btn-danger:hover { background:var(--bad-bg); }
.btn-sm { padding:8px 14px; font-size:13.5px; }
.btn-lg { padding:14px 26px; font-size:16px; }
.btn[disabled] { opacity:.4; cursor:not-allowed; }

/* ============ CARDS / STATS ============ */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat { border:1px solid var(--line); border-radius:var(--r-panel); padding:22px; background:var(--surface); transition:border-color .18s, transform .18s; }
.stat:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.stat-ico { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; margin-bottom:18px; background:var(--surface-2); color:var(--text-2); }
[data-theme="dark"] .stat-ico { background:var(--surface-3); color:var(--text); }
.stat-num { font-size:38px; font-weight:300; letter-spacing:.5px; line-height:1; }
.stat-label { font-size:13.5px; color:var(--text-3); margin-top:10px; font-weight:500; }
.stat-trend { font-size:12.5px; font-weight:600; margin-top:8px; display:inline-flex; align-items:center; gap:4px; }
.stat-trend.up { color:var(--ok-ink); } .stat-trend.down { color:var(--bad-ink); }

.panel { border:1px solid var(--line); border-radius:var(--r-panel); background:var(--surface); padding:24px; }
.panel-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.panel-head h3 { font-size:17px; font-weight:600; letter-spacing:.1px; }
.panel-head .spacer { flex:1; }

/* ============ BADGES ============ */
.badge-status { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.badge-status .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-ok{color:var(--ok-ink);background:var(--ok-bg)} .st-warn{color:var(--warn-ink);background:var(--warn-bg)}
.st-bad{color:var(--bad-ink);background:var(--bad-bg)} .st-info{color:var(--info-ink);background:var(--info-bg)}
.st-live{color:var(--live-ink);background:var(--live-bg)} .st-neutral{color:var(--text-2);background:var(--surface-2)}
[data-theme="dark"] .st-neutral{background:var(--surface-3)}
.st-live .dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.sport-tag { font-size:12px; font-weight:600; padding:4px 11px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--text-2); white-space:nowrap; }
[data-theme="dark"] .sport-tag { background:var(--surface-3); }

/* ============ TABLES ============ */
.table-wrap { border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; background:var(--surface); }
table.tbl { width:100%; border-collapse:collapse; font-size:14.5px; }
.tbl thead th { text-align:left; font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; padding:13px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl tbody td { padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tbody tr.clickable { cursor:pointer; transition:background .12s; }
.tbl tbody tr.clickable:hover { background:var(--surface-2); }
.tbl .num { font-variant-numeric:tabular-nums; }
.cell-strong { font-weight:600; }
.cell-sub { font-size:12.5px; color:var(--text-3); margin-top:3px; }
.row-actions { display:flex; gap:6px; justify-content:flex-end; }
.row-anim { animation: rowIn .35s var(--ease); }
.flow-row { animation: rowIn .42s var(--ease) backwards; }
@keyframes rowIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.person { display:flex; align-items:center; gap:11px; }
.person .avatar { width:34px; height:34px; font-size:12px; }
.person .pn { font-weight:500; line-height:1.2; }

/* ============ CHIPS / TABS / SEGMENTED ============ */
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip { font-size:13.5px; font-weight:500; padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:transparent; color:var(--text-2); transition:background .16s, color .16s, border-color .16s; }
.chip:hover { background:var(--surface-2); color:var(--text); }
.chip.active { background:var(--text); border-color:var(--text); color:var(--bg); }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; position:relative; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
#dir-wrap { overflow:hidden; }
.tab { padding:12px 16px; font-size:14.5px; font-weight:600; color:var(--text-3); background:none; border:none; border-bottom:2px solid transparent; transition:color .16s; white-space:nowrap; margin-bottom:-1px; }
.tab:hover { color:var(--text-2); }
.tab.active { color:var(--text); border-bottom-color:var(--accent); }

.segmented { position:relative; display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; gap:2px; }
[data-theme="dark"] .segmented { background:var(--surface-3); }
.seg { position:relative; z-index:1; padding:7px 16px; font-size:13.5px; font-weight:600; color:var(--text-3); background:none; border:none; border-radius:var(--r-pill); transition:color .2s var(--ease); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.seg .ico { width:15px; height:15px; }
.seg.active { color:var(--text); }
.seg:not(.active):hover { color:var(--text-2); }
/* sliding, morphing thumb */
.seg-thumb { position:absolute; z-index:0; top:3px; bottom:3px; left:3px; width:0; border-radius:var(--r-pill); background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.14); opacity:0;
  transition:left .4s var(--spring), width .4s var(--spring), opacity .2s var(--ease); }
[data-theme="dark"] .seg-thumb { background:var(--bg); }
.seg-thumb.ready { opacity:1; }
.segmented.sliding .seg-thumb { transition:left .4s var(--spring), width .4s var(--spring); }
@media (prefers-reduced-motion: reduce){ .seg-thumb { transition:none; } }

.search-box { position:relative; display:flex; align-items:center; }
.search-box .ico { position:absolute; left:14px; color:var(--text-3); width:17px; height:17px; pointer-events:none; }
.search-box input { padding:10px 14px 10px 40px; border:1px solid var(--line-strong); border-radius:var(--r-pill); background:var(--surface-2); color:var(--text); font-size:14px; width:240px; transition:border-color .16s, box-shadow .16s; }
[data-theme="light"] .search-box input { background:var(--surface); }
.search-box input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }

/* ============ CALENDAR ============ */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; background:var(--surface); }
.cal-dow { min-width:0; padding:11px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); background:var(--surface-2); border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:left; }
.cal-dow:nth-child(7n){border-right:none}
.cal-cell { min-width:0; min-height:118px; padding:8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); position:relative; transition:background .14s; cursor:pointer; }
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover { background:var(--surface-2); }
.cal-cell.other { background:var(--bg); opacity:.5; }
.cal-cell.today .cal-daynum { background:var(--accent); color:#fff; }
.cal-daynum { display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:99px; font-size:13px; font-weight:600; margin-bottom:5px; }
.cal-ev { display:block; width:100%; text-align:left; font-size:11.5px; font-weight:600; padding:4px 7px; border-radius:5px; margin-bottom:3px; border:none; color:var(--text); background:var(--surface-2); border-left:3px solid var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:transform .1s; }
.cal-ev:hover { transform:translateX(2px); }
.cal-ev.s-done { border-left-color:var(--text-3); opacity:.72; }
.cal-ev.s-live { border-left-color:var(--live-ink); background:var(--live-bg); color:var(--live-ink); }
.cal-ev.s-planned { border-left-color:var(--accent); background:var(--accent-soft); color:var(--info-ink); }
.cal-more { font-size:11px; color:var(--text-3); font-weight:600; padding:2px 7px; }

/* week view */
.week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.week-col { border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; min-height:340px; background:var(--surface); }
.week-colhead { padding:10px; text-align:center; border-bottom:1px solid var(--line); background:var(--surface-2); }
.week-colhead .wd { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-3); }
.week-colhead .wn { font-size:20px; font-weight:300; margin-top:2px; }
.week-colhead.today .wn { color:var(--accent); }
.week-body { padding:8px; display:flex; flex-direction:column; gap:6px; }

/* event row (list) */
.ev-row { display:flex; align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .14s; }
.ev-row:last-child { border-bottom:none; }
.ev-row:hover { background:var(--surface-2); }
.ev-date { flex-shrink:0; width:54px; text-align:center; }
.ev-date .d { font-size:24px; font-weight:300; line-height:1; }
.ev-date .m { font-size:11px; color:var(--text-3); text-transform:uppercase; margin-top:3px; font-weight:600; letter-spacing:.04em; }
.ev-bar { width:3px; align-self:stretch; border-radius:99px; background:var(--text-3); flex-shrink:0; }
.ev-bar.s-live{background:var(--live-ink)} .ev-bar.s-planned{background:var(--accent)} .ev-bar.s-done{background:var(--text-3)}
.ev-body { flex:1; min-width:0; }
.ev-title { font-weight:500; font-size:16px; }
.ev-meta { display:flex; flex-wrap:wrap; gap:5px 16px; margin-top:6px; font-size:13px; color:var(--text-3); }
.ev-meta span { display:inline-flex; align-items:center; gap:5px; }
.ev-meta .ico { width:14px; height:14px; }

/* ============ CHARTS ============ */
.chart-box { position:relative; height:300px; }
.chart-box.sm { height:240px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; }
.chart-legend .li { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-2); }
.chart-legend .sw { width:11px; height:11px; border-radius:3px; }

/* timeline (deployment) */
.timeline { display:flex; flex-direction:column; gap:14px; }
.tl-row { display:grid; grid-template-columns:200px 1fr 48px; gap:14px; align-items:center; }
.tl-phase { font-size:13.5px; font-weight:500; }
.tl-phase .tl-mo { font-size:11.5px; color:var(--text-3); margin-top:1px; }
.tl-track { height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
[data-theme="dark"] .tl-track { background:var(--surface-3); }
.tl-fill { height:100%; border-radius:99px; background:var(--accent); width:0; transition:width 1s var(--ease); }
.tl-fill.done { background:var(--ok-ink); }
.tl-pct { font-size:13px; font-weight:600; text-align:right; color:var(--text-2); font-variant-numeric:tabular-nums; }

/* ============ EMPTY ============ */
.empty { text-align:center; padding:64px 20px; color:var(--text-3); }
.empty .ico { width:42px; height:42px; margin:0 auto 14px; color:var(--line-strong); }
.empty h3 { font-size:18px; color:var(--text); font-weight:500; margin-bottom:6px; }

/* ============ MODAL / DRAWER ============ */
.overlay { position:fixed; inset:0; background:var(--scrim); display:flex; align-items:flex-start; justify-content:center; padding:54px 20px; z-index:100; opacity:0; pointer-events:none; transition:opacity .2s var(--ease); backdrop-filter:blur(3px); }
.overlay.open { opacity:1; pointer-events:auto; }
.modal { background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-panel); width:100%; max-width:600px; max-height:calc(100vh - 108px); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); transform:translateY(-18px); opacity:0; transition:transform .32s var(--spring), opacity .2s; }
.overlay.open .modal { transform:none; opacity:1; }
.modal.wide { max-width:760px; }
.modal-head { display:flex; align-items:flex-start; gap:14px; padding:24px 26px 18px; border-bottom:1px solid var(--line); }
.modal-head h2 { font-size:23px; font-weight:400; letter-spacing:.2px; }
.modal-head .sub { font-size:13.5px; color:var(--text-3); margin-top:5px; }
.modal-head .icon-btn { margin-left:auto; flex-shrink:0; width:36px; height:36px; }
.modal-body { padding:24px 26px; overflow-y:auto; }
.modal-body.flow { transition: height .3s var(--ease); }
.modal-foot { padding:16px 26px; border-top:1px solid var(--line); display:flex; gap:12px; justify-content:flex-end; background:var(--bg); flex-wrap:wrap; }

.kv { display:grid; grid-template-columns:168px 1fr; gap:13px 20px; font-size:14.5px; }
.kv dt { color:var(--text-3); } .kv dd { margin:0; font-weight:500; }

/* ============ FORM ============ */
.field { margin-bottom:20px; }
.field.half { display:inline-block; width:calc(50% - 7px); }
.field.half + .field.half { margin-left:14px; }
.field label { display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; }
.field .hint { font-size:12.5px; color:var(--text-3); margin-top:7px; }
.input,.select,.textarea { width:100%; padding:12px 16px; border:1px solid var(--line-strong); border-radius:12px; font-size:14.5px; color:var(--text); background:var(--surface-2); transition:border-color .16s, box-shadow .16s; }
[data-theme="light"] .input,[data-theme="light"] .select,[data-theme="light"] .textarea { background:var(--surface); }
.input::placeholder,.textarea::placeholder { color:var(--text-3); }
.input:focus,.select:focus,.textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.textarea { resize:vertical; min-height:84px; }
.select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:42px; }
.field-anim { animation: pageIn .3s var(--ease); }

.picker { border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; max-height:300px; overflow-y:auto; }
.picker-head { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:13px; color:var(--text-3); font-weight:500; position:sticky; top:0; z-index:3; }
.picker-row { display:flex; align-items:center; gap:13px; padding:13px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.picker-row:last-child { border-bottom:none; }
.picker-row:hover { background:var(--surface-2); }
.picker-row.disabled { cursor:not-allowed; opacity:.55; }
.picker-row.disabled:hover { background:transparent; }
.checkbox { width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line-strong); flex-shrink:0; display:grid; place-items:center; color:var(--on-accent); transition:background .16s, border-color .16s; }
.picker-row.checked .checkbox { background:var(--accent); border-color:var(--accent); }
.checkbox svg { opacity:0; width:14px; height:14px; transition:opacity .14s; }
.picker-row.checked .checkbox svg { opacity:1; }
.picker-row .pinfo { flex:1; min-width:0; }
.picker-row .pname { font-weight:500; font-size:14.5px; }
.picker-row .pmeta { font-size:12.5px; color:var(--text-3); margin-top:2px; }

/* toast */
.toast-wrap { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast { background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text); padding:13px 19px; border-radius:var(--r-pill); font-size:14px; font-weight:500; display:flex; align-items:center; gap:11px; box-shadow:var(--shadow); animation:toastIn .3s var(--spring); }
[data-theme="dark"] .toast { background:var(--surface-3); }
.toast .ico { width:18px; height:18px; color:var(--ok-ink); }
@keyframes toastIn { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }

/* alerts */
.alert { display:flex; gap:12px; align-items:flex-start; padding:14px 17px; border-radius:var(--r-panel); font-size:14px; line-height:1.5; }
.alert .ico { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.alert-warn{background:var(--warn-bg);color:var(--warn-ink)} .alert-info{background:var(--info-bg);color:var(--info-ink)}
.alert-bad{background:var(--bad-bg);color:var(--bad-ink)} .alert-ok{background:var(--ok-bg);color:var(--ok-ink)}

.notif-item { display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.notif-item:last-child { border-bottom:none; }
.notif-ico { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.notif-body { flex:1; min-width:0; }
.notif-title { font-weight:500; font-size:14.5px; }
.notif-sub { font-size:12.5px; color:var(--text-3); margin-top:3px; }

/* notifications feed (full page) */
.notif-feed { display:flex; flex-direction:column; gap:10px; }
.notif-daygroup { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:14px 2px 4px; }
.notif-daygroup:first-child { margin-top:0; }
.notif-row { display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-panel); background:var(--surface); cursor:pointer; transition:border-color .16s, transform .16s, background .16s; }
.notif-row:hover { border-color:var(--line-strong); transform:translateX(3px); }
.notif-row .notif-ico { width:40px; height:40px; border-radius:11px; }
.notif-main { flex:1; min-width:0; }
.notif-row-top { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.notif-kind { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:99px; }
.notif-time { font-size:12px; color:var(--text-3); }
.notif-go { color:var(--text-3); align-self:center; transition:transform .16s; }
.notif-row:hover .notif-go { transform:translateX(3px); color:var(--text-2); }

.two-col { display:grid; grid-template-columns:1.55fr 1fr; gap:26px; align-items:start; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* log feed */
.log-item { display:grid; grid-template-columns:30px 1fr auto; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center; }
.log-item:last-child { border-bottom:none; }
.log-ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; }
.log-ic svg { width:15px; height:15px; }
.log-ic.info{ background:var(--surface-2); color:var(--text-3); }
.log-ic.success{ background:var(--ok-bg); color:var(--ok-ink); }
.log-ic.warn{ background:var(--warn-bg); color:var(--warn-ink); }
.log-ic.danger{ background:var(--bad-bg); color:var(--bad-ink); }
[data-theme="dark"] .log-ic.info{ background:var(--surface-3); }
.log-action { font-size:14px; font-weight:500; }
.log-meta { font-size:12px; color:var(--text-3); margin-top:2px; }
.log-time { font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.log-filters { display:flex; gap:7px; margin-bottom:14px; flex-wrap:wrap; }
.log-filters .chip { padding:5px 12px; font-size:12.5px; }

/* role permission panels */
.role-panel .perm-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.role-panel .perm-list li { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--text-2); line-height:1.4; }
.role-panel .perm-list li svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--ok-ink); }
.role-panel .perm-list li.off { color:var(--text-3); }
.role-panel .perm-list li.off svg { color:var(--bad-ink); }

/* role badge */
.role-badge { font-size:12px; font-weight:600; padding:4px 11px; border-radius:var(--r-pill); }
.role-coordinator { color:var(--info-ink); background:var(--info-bg); }
.role-rep { color:var(--text-2); background:var(--surface-2); }
[data-theme="dark"] .role-rep { background:var(--surface-3); }

/* ============ LOGIN (atmospheric, pure CSS) ============ */
.login2{ position:fixed; inset:0; z-index:50; overflow-y:auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
/* theme-reactive sky */
[data-theme="light"] .login2-sky{ background:
  radial-gradient(120% 90% at 50% -10%, #cfe4ff 0%, #9ec4ff 38%, #6ea3f5 70%, #5a86e0 100%); }
[data-theme="dark"] .login2-sky{ background:
  radial-gradient(120% 95% at 50% -10%, #1c2a52 0%, #15203f 42%, #0f1830 72%, #0a1124 100%); }
.login2-sky{ position:fixed; inset:0; z-index:0; }
/* soft cloud / horizon haze */
[data-theme="light"] .login2-haze{ background:
  radial-gradient(50% 38% at 18% 16%, rgba(255,255,255,.85), transparent 60%),
  radial-gradient(42% 30% at 82% 12%, rgba(255,255,255,.6), transparent 62%),
  radial-gradient(60% 36% at 50% 108%, rgba(255,255,255,.7), transparent 60%); }
[data-theme="dark"] .login2-haze{ background:
  radial-gradient(46% 34% at 80% 14%, rgba(160,190,255,.16), transparent 64%),
  radial-gradient(60% 40% at 50% 112%, rgba(82,102,235,.22), transparent 60%); }
.login2-haze{ position:fixed; inset:0; z-index:1; filter:blur(8px); animation:hazeDrift 30s ease-in-out infinite alternate; }
@keyframes hazeDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-2%,1.5%,0) scale(1.06)} }
.login2-canvas{ position:fixed; inset:0; z-index:2; width:100%; height:100%; display:block; }
/* CSS atmospheric fog (replaces orbs/rings) — soft drifting haze */
.login2-orbs{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.l-fog{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); }
[data-theme="dark"] .l-fog{ opacity:.4;
  background:radial-gradient(circle at 50% 50%, rgba(150,180,255,.6), rgba(80,110,220,0) 70%); }
.l-fog.f1{ width:640px; height:640px; left:-12%; top:-8%; animation:fogA 26s ease-in-out infinite alternate; }
.l-fog.f2{ width:520px; height:520px; right:-10%; top:18%; animation:fogB 32s ease-in-out infinite alternate; }
.l-fog.f3{ width:560px; height:560px; left:30%; bottom:-22%; animation:fogA 38s ease-in-out infinite alternate; }
@keyframes fogA{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(8%,5%) scale(1.18); } }
@keyframes fogB{ 0%{ transform:translate(0,0) scale(1.1); } 100%{ transform:translate(-7%,-4%) scale(1); } }
@media (prefers-reduced-motion: reduce){ .l-fog{ animation:none; } }
.login2-particles{ position:fixed; inset:0; z-index:3; pointer-events:none; }
.l-spark{ position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 8px 2px rgba(255,255,255,.8); animation: sparkle 4s ease-in-out infinite; }
[data-theme="dark"] .l-spark{ background:#cdddff; box-shadow:0 0 10px 3px rgba(150,180,255,.9); }
@keyframes sparkle{ 0%,100%{opacity:0; transform:scale(.5)} 50%{opacity:.9; transform:scale(1)} }

/* theme toggle on login */
.login-theme{ position:absolute; top:22px; right:22px; z-index:10; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.16); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:background .2s, transform .2s; }
.login-theme:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
.login-theme svg{ width:21px; height:21px; }
.login-theme.spin svg{ animation: themeSpinIn .5s var(--spring); }

/* stage + brand */
.login2-stage{ position:relative; z-index:5; width:100%; max-width:440px; margin:auto; padding:64px 24px 20px; display:flex; flex-direction:column; align-items:center; }
.login2-brand{ display:flex; align-items:center; gap:13px; color:#fff; margin-bottom:22px; text-shadow:0 2px 20px rgba(0,0,0,.25); }
.login2-brand .l-mk{ width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center;
  background:rgba(82,102,235,.55); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(8px); box-shadow:0 8px 24px -8px rgba(40,60,160,.6); }
.login2-brand .l-bt{ font-size:21px; font-weight:600; letter-spacing:.3px; }
.login2-brand .l-bs{ font-size:12px; opacity:.82; margin-top:1px; max-width:300px; }

/* frosted glass card */
.login2-card{ width:100%; padding:30px 30px 28px; border-radius:24px; position:relative;
  background:var(--glass-card); border:1px solid var(--glass-brd);
  backdrop-filter:blur(26px) saturate(1.35); -webkit-backdrop-filter:blur(26px) saturate(1.35);
  box-shadow: 0 40px 90px -34px rgba(10,20,60,.6), inset 0 1px 0 rgba(255,255,255,.22);
  transform-style:preserve-3d; transition:transform .25s var(--ease); }
[data-theme="light"]{ --glass-card:rgba(255,255,255,.62); --glass-brd:rgba(255,255,255,.7); }
[data-theme="dark"]{ --glass-card:rgba(28,32,52,.5); --glass-brd:rgba(255,255,255,.12); }
.login2-card .closed-tag{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--line); padding:6px 13px; border-radius:99px; margin-bottom:20px; }
[data-theme="dark"] .login2-card .closed-tag{ background:rgba(255,255,255,.08); }
.login2-card h1{ font-size:29px; font-weight:300; letter-spacing:.3px; color:var(--text); }
.login2-card .lead{ color:var(--text-3); margin:10px 0 26px; font-size:14.5px; }
.login2-card .field label{ font-size:13.5px; }
.login2-card .input{ background:var(--surface-2); }
[data-theme="dark"] .login2-card .input{ background:rgba(255,255,255,.06); }
.login2-card .btn{ width:100%; position:relative; overflow:hidden; }
.login-submit.loading span{ opacity:0; }
.login-submit.loading::after{ content:''; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.login-hint{ font-size:12px; color:var(--text-3); text-align:center; margin-top:18px; line-height:1.6; }
.login2-foot{ position:relative; z-index:5; margin:6px auto 24px; font-size:12px; color:rgba(255,255,255,.7); text-align:center; flex-shrink:0; }

/* role cards inside glass */
.login2-card .role-pick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.login2-card .role-card{ border:1px solid var(--line-strong); border-radius:13px; padding:13px; cursor:pointer; transition:border-color .16s, background .16s, transform .16s; text-align:left; background:var(--surface-2); }
[data-theme="dark"] .login2-card .role-card{ background:rgba(255,255,255,.05); }
.login2-card .role-card:hover{ transform:translateY(-2px); }
.login2-card .role-card.sel{ border-color:var(--accent); background:var(--accent-soft); }
.login2-card .role-card .rc-t{ font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; color:var(--text); }
.login2-card .role-card .rc-s{ font-size:12px; color:var(--text-3); margin-top:5px; }

/* blur-dissipate launch is driven by JS (revealLogin) for robustness;
   base state is always fully visible so it can never get stuck hidden */
.login-reveal .login2-stage{ animation: stageRise 1s var(--ease) .12s; }
@keyframes stageRise{ from{ transform:translateY(26px) scale(.97); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .login-reveal .login2-stage, .l-spark, .login2-haze, .l-orb{ animation:none !important; } }

/* ============================================================
   SOLID MATTE SURFACES + LOADING BLUR + MOUSE FX
   ============================================================ */
[data-theme="dark"]{ --glow:rgba(82,102,235,.16); }
[data-theme="light"]{ --glow:rgba(82,102,235,.10); }

/* ---- loading: content emerges from blur ---- */
@keyframes blurIn{ from{ opacity:.4; filter:blur(12px); transform:translateY(8px) scale(.994); } to{ opacity:1; filter:blur(0); transform:none; } }
.blur-in{ animation: blurIn .5s var(--ease); }
@media (prefers-reduced-motion: reduce){ .blur-in{ animation:none; } }

/* skeleton shimmer (charts / async) */
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2); border-radius:8px; }
[data-theme="dark"] .skeleton{ background:var(--surface-3); }
.skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--glow), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* ---- clickable stat cards that expand into a breakdown ---- */
.stat.clickable{ cursor:pointer; }
.stat .stat-expand-hint{ position:absolute; top:18px; right:18px; color:var(--text-3); opacity:0; transform:translateY(-2px); transition:opacity .2s, transform .2s; }
.stat.clickable:hover .stat-expand-hint{ opacity:.8; transform:none; }
.stat.expanded{ border-color:var(--accent); }
.stat-detail{ overflow:hidden; }
.stat-detail-inner{ padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
.mini-bar{ display:flex; align-items:center; gap:10px; font-size:13px; margin-bottom:9px; }
.mini-bar:last-child{ margin-bottom:0; }
.mini-bar .mb-label{ width:96px; flex-shrink:0; color:var(--text-2); }
.mini-bar .mb-track{ flex:1; height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
[data-theme="dark"] .mini-bar .mb-track{ background:var(--surface-3); }
.mini-bar .mb-fill{ height:100%; border-radius:99px; background:var(--accent); width:0; transition:width .7s var(--ease); }
.mini-bar .mb-val{ width:30px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
@keyframes detailDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.stat-detail-inner{ animation: detailDown .32s var(--ease); }

/* ---- interactive cards: gentle 3D tilt + cursor spotlight (works on solid surfaces) ---- */
[data-tilt],[data-glow]{ position:relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; will-change: transform; }
[data-tilt]::after,[data-glow]::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s var(--ease);
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 60%); }
[data-tilt].tilting,[data-glow].tilting{ box-shadow: var(--shadow); border-color: var(--line-strong); }
[data-tilt].tilting::after,[data-glow].tilting::after{ opacity:1; }

/* magnetic buttons */
[data-magnetic]{ transition: transform .25s var(--spring), background .16s, box-shadow .25s; will-change: transform; }
.btn-primary[data-magnetic]:hover{ box-shadow:0 8px 24px -8px var(--accent); }

/* row lift on hover */
.ev-row:hover{ transform:translateX(3px); }
.ev-row, .nav-subitem{ will-change: transform; }

/* ---- refined ambient glow behind content (static, subtle) ---- */
.main{ position:relative; }
.main::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 40% at 100% 0%, var(--glow), transparent 72%),
    radial-gradient(40% 38% at 0% 100%, var(--glow), transparent 74%);
  opacity:.9; }
.topbar, .scroll{ position:relative; z-index:1; }

/* ---- calendar month slide (left / right swap) ---- */
@keyframes calInL{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; transform:none; } }
@keyframes calInR{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
#cal-body.slide-l > *{ animation: calInL .34s var(--ease); }
#cal-body.slide-r > *{ animation: calInR .34s var(--ease); }
@keyframes calFade{ from{ opacity:0; transform:scale(.992); } to{ opacity:1; transform:none; } }
#cal-body.slide-f > *{ animation: calFade .3s var(--ease); }
@media (prefers-reduced-motion: reduce){ #cal-body.slide-l > *, #cal-body.slide-r > *, #cal-body.slide-f > *{ animation:none; } }

/* ---- richer form modals ---- */
.modal-head.form-head{ align-items:center; gap:16px; padding:22px 26px; background:linear-gradient(180deg, var(--accent-soft), transparent); }
.form-badge{ width:46px; height:46px; border-radius:13px; flex-shrink:0; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); }
.form-badge .ico{ width:23px; height:23px; }
.form-section{ margin-bottom:8px; }
.form-section + .form-section{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.form-section-title{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; }
.form-section-title .ico{ width:15px; height:15px; color:var(--accent); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.form-grid .field.full{ grid-column:1 / -1; }
/* field with leading icon */
.field.ico-field{ position:relative; }
.field.ico-field .field-ic{ position:absolute; left:14px; top:38px; width:17px; height:17px; color:var(--text-3); pointer-events:none; transition:color .16s; }
.field.ico-field .input, .field.ico-field .select{ padding-left:42px; }
.field.ico-field:focus-within .field-ic{ color:var(--accent); }
.field .input, .field .select, .field .textarea{ transition:border-color .16s, box-shadow .16s, background .16s; }
.field-anim{ animation: fieldIn .34s var(--ease) backwards; }
@keyframes fieldIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

/* count-up: keep tabular so width doesn't jitter */
.stat-num, .kpi-num{ font-variant-numeric:tabular-nums; }

/* click ripple (buttons) */
.btn{ position:relative; overflow:hidden; }
.rippler{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0); background:rgba(255,255,255,.45); pointer-events:none; animation:rip .55s var(--ease) forwards; mix-blend-mode:overlay; }
.btn-ghost .rippler, .chip .rippler{ background:rgba(120,140,235,.3); }
.chip, .seg{ position:relative; overflow:hidden; }
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* ============================================================
   FEATURES: search palette · athlete card · conflicts ·
   mini-menu · bulk bar · widgets · topbar search
   ============================================================ */

/* topbar search trigger */
.searchbar-trigger{ display:flex; align-items:center; gap:9px; height:40px; padding:0 12px 0 13px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text-3); font-size:13.5px; font-weight:500; transition:border-color .16s, background .16s, color .16s; min-width:180px; }
[data-theme="light"] .searchbar-trigger{ background:var(--surface); }
.searchbar-trigger:hover{ border-color:var(--accent); color:var(--text-2); }
.searchbar-trigger .ico{ width:17px; height:17px; }
.searchbar-trigger span{ flex:1; text-align:left; }
.searchbar-trigger kbd, .palette kbd, .palette-foot kbd{ font-family:var(--font); font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:5px; background:var(--surface-3); border:1px solid var(--line); color:var(--text-3); line-height:1.4; }
[data-theme="light"] .searchbar-trigger kbd{ background:var(--surface-2); }
.search-icon-btn{ display:none; }

/* command palette */
.palette-overlay{ position:fixed; inset:0; z-index:160; background:var(--scrim); display:flex; align-items:flex-start; justify-content:center; padding:84px 20px 20px; opacity:0; pointer-events:none; transition:opacity .18s var(--ease); backdrop-filter:blur(4px); }
.palette-overlay.open{ opacity:1; pointer-events:auto; }
.palette{ width:100%; max-width:620px; background:var(--surface); border:1px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; transform:translateY(-12px) scale(.99); transition:transform .26s var(--spring); display:flex; flex-direction:column; max-height:min(560px, 80vh); }
.palette-overlay.open .palette{ transform:none; }
.palette-input{ display:flex; align-items:center; gap:12px; padding:17px 20px; border-bottom:1px solid var(--line); }
.palette-input .ico{ width:20px; height:20px; color:var(--text-3); flex-shrink:0; }
.palette-input input{ flex:1; border:none; background:none; outline:none; font-size:17px; color:var(--text); font-weight:400; }
.palette-input input::placeholder{ color:var(--text-3); }
.palette-results{ overflow-y:auto; padding:8px; flex:1; }
.palette-group{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:12px 12px 6px; }
.palette-item{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:10px 12px; border:none; background:none; border-radius:10px; color:var(--text); transition:background .12s; }
.palette-item .pal-ic{ width:36px; height:36px; border-radius:9px; background:var(--surface-2); display:grid; place-items:center; flex-shrink:0; color:var(--text-2); }
[data-theme="dark"] .palette-item .pal-ic{ background:var(--surface-3); }
.palette-item .pal-ic .ico{ width:18px; height:18px; }
.palette-item.sel{ background:var(--accent-soft); }
.palette-item.sel .pal-ic{ background:var(--accent); color:var(--on-accent); }
.pal-txt{ flex:1; min-width:0; }
.pal-title{ display:block; font-size:14.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pal-title mark{ background:none; color:var(--accent); font-weight:700; }
.pal-sub{ display:block; font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.pal-enter{ color:var(--text-3); opacity:0; }
.palette-item.sel .pal-enter{ opacity:1; color:var(--accent); }
.palette-empty{ text-align:center; padding:44px 20px; color:var(--text-3); }
.palette-empty .ico{ width:34px; height:34px; margin:0 auto 12px; color:var(--line-strong); }
.palette-foot{ display:flex; gap:18px; padding:11px 18px; border-top:1px solid var(--line); background:var(--bg); font-size:11.5px; color:var(--text-3); }
.palette-foot span{ display:flex; align-items:center; gap:5px; }

/* mini popup menu */
.mini-menu{ position:fixed; z-index:170; min-width:248px; background:var(--surface); border:1px solid var(--line-strong); border-radius:13px; box-shadow:var(--shadow); padding:6px; opacity:0; transform:translateY(-8px) scale(.97); transform-origin:top right; transition:opacity .15s var(--ease), transform .2s var(--spring); }
.mini-menu.open{ opacity:1; transform:none; }
.mini-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px; border:none; background:none; border-radius:9px; color:var(--text); font-size:14px; font-weight:500; transition:background .12s; }
.mini-item:hover{ background:var(--surface-2); }
.mini-item .ico{ width:18px; height:18px; color:var(--text-3); }
.mini-item.active{ color:var(--accent); }
.mini-item.active .ico{ color:var(--accent); }
.mini-item .mini-check{ margin-left:auto; }
.mini-item .mini-check .ico{ width:16px; height:16px; color:var(--accent); }
.mini-sep{ height:1px; background:var(--line); margin:6px 4px; }

/* athlete card */
.athlete-head{ align-items:center; gap:16px; padding:24px 26px; background:linear-gradient(180deg, var(--accent-soft), transparent); }
.athlete-avatar{ width:58px; height:58px; border-radius:16px; flex-shrink:0; display:grid; place-items:center; font-size:21px; font-weight:600; background:var(--accent); color:var(--on-accent); }
.athlete-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.athlete-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.ath-stat{ text-align:center; padding:16px 8px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.ath-medal{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin:0 auto 10px; }
.ath-medal .ico{ width:18px; height:18px; }
.ath-medal.g{ background:rgba(240,190,70,.18); color:#d6a32e; } .ath-medal.s{ background:rgba(170,178,190,.2); color:#8c97a8; }
.ath-medal.b{ background:rgba(196,130,80,.18); color:#bb7a44; } .ath-medal.n{ background:var(--surface-2); color:var(--text-2); }
.ath-medal.a{ background:var(--accent-soft); color:var(--accent); }
[data-theme="dark"] .ath-medal.n{ background:var(--surface-3); }
.ath-num{ font-size:26px; font-weight:300; line-height:1; }
.ath-lab{ font-size:11.5px; color:var(--text-3); margin-top:5px; }
.place-badge{ display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 7px; border-radius:8px; font-weight:700; font-size:13px; background:var(--surface-2); color:var(--text-2); }
[data-theme="dark"] .place-badge{ background:var(--surface-3); }
.place-badge.p1{ background:rgba(240,190,70,.2); color:#d6a32e; } .place-badge.p2{ background:rgba(170,178,190,.22); color:#8c97a8; } .place-badge.p3{ background:rgba(196,130,80,.2); color:#bb7a44; }
.dir-link{ cursor:pointer; }
.dir-link:hover .pn{ color:var(--accent); }

/* conflict banner & modal */
.conflict-banner{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 18px; border-radius:var(--r-panel); border:1px solid var(--bad-ink); background:var(--bad-bg); color:var(--bad-ink); margin-bottom:18px; transition:transform .14s; }
.conflict-banner:hover{ transform:translateY(-1px); }
.conflict-banner .ico{ width:22px; height:22px; flex-shrink:0; }
.conflict-banner .cb-sub{ font-size:12.5px; font-weight:400; opacity:.85; margin-top:2px; }
.conflict-banner .cb-go{ margin-left:auto; display:flex; align-items:center; gap:4px; font-size:13px; font-weight:600; white-space:nowrap; }
.conflict-banner .cb-go .ico{ width:15px; height:15px; }
.conflict-pair{ border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px; }
.conflict-venue{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; margin-bottom:12px; }
.conflict-venue .ico{ width:17px; height:17px; color:var(--accent); }
.conflict-evs{ display:flex; align-items:center; gap:12px; }
.conflict-ev{ flex:1; display:flex; gap:10px; align-items:center; padding:10px 12px; background:var(--surface-2); border-radius:10px; }
[data-theme="dark"] .conflict-ev{ background:var(--surface-3); }
.conflict-ev .ev-bar{ width:3px; align-self:stretch; border-radius:99px; }
.conflict-vs{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--bad-ink); white-space:nowrap; }
@media (max-width:600px){ .conflict-evs{ flex-direction:column; align-items:stretch; } .athlete-stats{ grid-template-columns:repeat(3,1fr); } }

/* bulk action bar */
.bulk-bar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px; padding:12px 18px; margin-bottom:14px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow); animation: bulkIn .3s var(--spring); }
@keyframes bulkIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.bulk-bar .bulk-count{ font-weight:600; font-size:14.5px; }
.bulk-bar .spacer{ flex:1; }
.bulk-bar .bulk-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; font-size:13.5px; font-weight:600; transition:background .14s; }
.bulk-bar .bulk-btn:hover{ background:rgba(255,255,255,.22); }
.bulk-bar .bulk-btn.solid{ background:#fff; color:var(--accent); border-color:#fff; }
.bulk-bar .bulk-x{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; border:none; background:rgba(255,255,255,.14); color:#fff; }
.row-check{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-strong); display:grid; place-items:center; cursor:pointer; color:#fff; transition:background .14s, border-color .14s; }
tr.sel-row .row-check, .row-check.on{ background:var(--accent); border-color:var(--accent); }
.row-check .ico{ width:13px; height:13px; opacity:0; }
tr.sel-row .row-check .ico, .row-check.on .ico{ opacity:1; }
tr.sel-row{ background:var(--accent-soft) !important; }

/* live toast variant */
.toast-live{ align-items:flex-start; gap:12px; padding:13px 17px; }
.bell-dot.pop{ animation: bellPop .4s var(--spring); }
@keyframes bellPop{ 0%{ transform:scale(.4); } 60%{ transform:scale(1.25); } 100%{ transform:scale(1); } }

/* dashboard widgets */
#widget-zone{ display:flex; flex-direction:column; gap:22px; }
#widget-zone .widget > .panel{ margin:0; }
.widget-toolbar{ display:flex; align-items:center; gap:10px; }
.widget[draggable="true"]{ cursor:grab; }
.widget.dragging{ opacity:.4; }
.widget.drop-target{ outline:2px dashed var(--accent); outline-offset:4px; border-radius:var(--r-panel); }
.widget-handle{ display:none; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text-3); padding:6px 0; }
.widget-handle .ico{ width:15px; height:15px; }
.app.editing-widgets .widget-handle{ display:flex; }
.app.editing-widgets .widget{ border:1px dashed var(--line-strong); border-radius:var(--r-panel); padding:10px; transition:border-color .15s; }
.app.editing-widgets .widget:hover{ border-color:var(--accent); }
.widget-hide{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--text-3); background:none; border:none; padding:4px 8px; border-radius:7px; }
.widget-hide:hover{ background:var(--surface-2); color:var(--bad-ink); }
.widget.hidden-widget{ display:none; }
.widget-restore{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.widget-restore .wr-chip{ font-size:12.5px; font-weight:500; padding:6px 12px; border-radius:var(--r-pill); border:1px dashed var(--line-strong); background:none; color:var(--text-2); display:inline-flex; align-items:center; gap:6px; }
.widget-restore .wr-chip .ico{ width:14px; height:14px; }

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){ .stat-grid{grid-template-columns:repeat(2,1fr)} .two-col{grid-template-columns:1fr;gap:32px} .three-col{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }
@media (max-width:880px){
  .searchbar-trigger{ display:none; }
  .search-icon-btn{ display:grid; }
  .sidebar { position:absolute; left:0; top:0; bottom:0; height:100%; transform:translateX(-100%); transition:transform .3s var(--ease); box-shadow:0 0 0 1px var(--line); z-index:40; }
  .app.nav-open .sidebar { transform:translateX(0); }
  .app.nav-open .scrim { display:block; opacity:1; }
  .menu-btn { display:grid; }
  /* on mobile the sidebar is always a full drawer — never the narrow rail */
  .app.rail .sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); max-width:var(--sidebar-w); }
  .app.rail .brand-block, .app.rail .org-meta, .app.rail .org-switch, .app.rail .nav-caret, .app.rail .nav-sub, .app.rail .nav-item > span:not(.badge) { display:flex; }
  .app.rail .brand-block { display:block; }
  .app.rail .nav-item { justify-content:flex-start; padding:10px 11px; }
  .rail-toggle { display:none; }
  .topbar { padding:0 14px; gap:8px; }
  .topbar h1 { font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
  .page { padding:22px 14px 80px; }
  .cal-cell { min-height:84px; }
  .week-grid { grid-template-columns:1fr; }
  /* section heads stack; toolbars scroll instead of overflowing */
  .section-head { flex-wrap:wrap; }
  .segmented, .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; scrollbar-width:none; }
  .segmented::-webkit-scrollbar, .tabs::-webkit-scrollbar { display:none; }
  .search-box, .search-box input { width:100%; }
}
@media (max-width:600px){
  body { font-size:15px; }
  .greeting { font-size:26px; }
  .greeting-sub { font-size:14px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); gap:11px; }
  .stat { padding:15px; } .stat-num { font-size:30px; }
  .stat-ico { margin-bottom:12px; }
  .stat .stat-expand-hint { top:14px; right:14px; }
  .mini-bar .mb-label { width:72px; }
  .topbar-actions { gap:7px; }
  .topbar-actions .btn span { display:none; }
  .topbar-actions .btn { padding:11px; }
  .topbar-actions .icon-btn, .topbar-actions .btn { width:38px; height:38px; }
  .table-wrap { overflow-x:auto; } table.tbl { min-width:560px; }
  .tl-row { grid-template-columns:1fr 64px; grid-template-areas:'phase pct' 'track track'; gap:6px 10px; }
  .tl-row .tl-phase{ grid-area:phase; } .tl-row .tl-pct{ grid-area:pct; } .tl-row .tl-track{ grid-area:track; }
  .chart-box { height:240px; } .chart-box.sm{ height:200px; }
  .login2-stage{ max-width:none; padding:20px; }
  .login2-card{ padding:24px 22px; }
  .login2-brand .l-bs{ display:none; }
  .overlay { padding:0; align-items:flex-end; }
  .modal { max-height:94vh; border-radius:14px 14px 0 0; transform:translateY(100%); }
  .modal-head { padding:20px 18px 14px; } .modal-head h2{ font-size:20px; }
  .modal-body { padding:18px; }
  .kv { grid-template-columns:1fr; gap:3px 0; } .kv dt { margin-top:11px; } .kv dt:first-child { margin-top:0; }
  .cal-ev { font-size:0; padding:0; height:6px; margin-bottom:3px; border-radius:3px; }
  .cal-cell { padding:6px 5px; } .cal-daynum { font-size:12px; min-width:20px; height:20px; }
  .cal-more { font-size:0; }
  .field.half { width:100%; display:block; } .field.half + .field.half { margin-left:0; }
  .modal-foot { padding:14px 18px; } .modal-foot .btn { flex:1; }
  .panel { padding:18px; }
}
@media (max-width:380px){
  .stat-grid { grid-template-columns:1fr; }
}

/* ============================================================
   ENHANCEMENTS — odometer · sparklines · activity · tour · theme-wave
   ============================================================ */
/* odometer digit roll */
.odo{ display:inline-flex; overflow:hidden; vertical-align:baseline; }
.odo-d{ position:relative; display:inline-block; width:0.62ch; height:1em; overflow:hidden; }
.odo-d .odo-strip{ position:absolute; left:0; top:0; display:flex; flex-direction:column; will-change:transform;
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1); }
.odo-d .odo-strip span{ height:1em; line-height:1; display:block; text-align:center; }
.odo-sep{ display:inline-block; }

/* sparkline in stat card */
.stat-spark{ display:block; width:100%; height:30px; margin-top:12px; overflow:visible; }
.stat-spark .sl-area{ opacity:.16; }
.stat-spark .sl-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:slDraw 1.1s var(--ease) .15s forwards; }
.stat-spark .sl-dot{ fill:var(--accent); opacity:0; animation:slDot .4s var(--ease) 1.1s forwards; }
.stat.up-bad .stat-spark .sl-line, .stat.up-bad .stat-spark .sl-dot{ stroke:var(--bad-ink); fill:var(--bad-ink); }
.stat.up-bad .stat-spark .sl-area{ fill:var(--bad-ink); }
@keyframes slDraw{ to{ stroke-dashoffset:0; } }
@keyframes slDot{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .stat-spark .sl-line{ animation:none; stroke-dashoffset:0; } .stat-spark .sl-dot{ animation:none; opacity:1; } }

/* live activity feed */
.feed{ display:flex; flex-direction:column; }
.feed-item{ display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line); }
.feed-item:last-child{ border-bottom:none; }
.feed-item.fresh{ animation:feedIn .5s var(--ease); }
@keyframes feedIn{ from{ opacity:0; transform:translateY(-8px); background:var(--accent-soft); } to{ opacity:1; transform:none; } }
.feed-ic{ width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; }
.feed-main{ flex:1; min-width:0; }
.feed-act{ font-size:14px; font-weight:500; }
.feed-meta{ font-size:12px; color:var(--text-3); margin-top:2px; }
.feed-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--live-ink); box-shadow:0 0 0 0 var(--live-ink); animation:livePulse 1.8s infinite; flex-shrink:0; margin-top:6px; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(127,209,196,.5);} 70%{ box-shadow:0 0 0 7px rgba(127,209,196,0);} 100%{ box-shadow:0 0 0 0 rgba(127,209,196,0);} }

/* calendar drag-and-drop */
.cal-ev{ cursor:grab; }
.cal-ev.dragging{ opacity:.45; }
.cal-cell.drop-ok{ background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent); }
.cal-cell.no-drop{ cursor:not-allowed; }

/* onboarding tour */
.tour-mask{ position:fixed; inset:0; z-index:300; pointer-events:auto; }
.tour-hole{ position:fixed; border-radius:12px; box-shadow:0 0 0 9999px var(--scrim); transition:all .4s var(--ease); pointer-events:none; z-index:301; border:2px solid var(--accent); }
.tour-pop{ position:fixed; z-index:302; width:300px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--line-strong);
  border-radius:16px; box-shadow:var(--shadow); padding:18px 18px 16px; transition:all .4s var(--ease); }
.tour-pop h4{ font-size:16px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.tour-pop h4 .ico{ color:var(--accent); }
.tour-pop p{ font-size:13.5px; color:var(--text-2); line-height:1.5; }
.tour-foot{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.tour-step-n{ font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.tour-dots{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.tour-dot{ width:6px; height:6px; border-radius:50%; background:var(--line-strong); transition:background .2s, width .2s; }
.tour-dot.on{ background:var(--accent); width:16px; border-radius:99px; }
.tour-skip{ font-size:13px; color:var(--text-3); background:none; border:none; white-space:nowrap; }
.tour-skip:hover{ color:var(--text); }
.tour-foot .btn{ white-space:nowrap; flex-shrink:0; }

/* theme wave */
.theme-wave{ position:fixed; border-radius:50%; z-index:90; pointer-events:none; transform:translate(-50%,-50%) scale(0); will-change:transform; }
@media (prefers-reduced-motion: reduce){ .theme-wave{ display:none; } }