/* FocusFlow — CSS v2 — Full page, no topbar, FAB panels */

:root {
  --bg: #080d1a;
  --glass: rgba(8,13,26,0.72);
  --surface: rgba(255,255,255,0.05);
  --surface-h: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.08);
  --border-h: rgba(255,255,255,0.16);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.38);
  --sec: rgba(255,255,255,0.60);
  --accent: #4fffa4;
  --accent2: #7b93ff;
  --accent-rgb: 79,255,164;
  --danger: #ff6b6b;
  --spotify: #1DB954;
  --font: 'Outfit', sans-serif;
  --mono: 'DM Mono', monospace;
  --r: 14px;
  --r-sm: 9px;
  --t: .18s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html,body {
  height:100%; overflow:hidden;
  font-family:var(--font); font-size:14px;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ── Background ── */
#bgLayer {
  position:fixed; inset:0; z-index:0;
  background:linear-gradient(135deg,#080d1a 0%,#0d1a2e 100%);
  background-size:cover; background-position:center;
  transition:background .6s ease;
}
.bg-grain {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.45;
}
body::before,body::after {
  content:''; position:fixed; border-radius:50%;
  pointer-events:none; z-index:1; filter:blur(100px);
}
body::before { width:600px; height:600px; top:-150px; left:-100px; background:radial-gradient(circle,rgba(79,255,164,.055) 0%,transparent 70%); }
body::after  { width:500px; height:500px; bottom:-100px; right:-80px; background:radial-gradient(circle,rgba(123,147,255,.055) 0%,transparent 70%); }

/* ── Screens ── */
.screen { position:fixed; inset:0; z-index:10; display:none; }
.screen.active { display:block; }

/* ── Glass ── */
.glass { background:var(--glass); backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5); border:1px solid var(--border); border-radius:var(--r); }

/* ── Inputs ── */
.inp {
  width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text); font-family:var(--font);
  font-size:14px; padding:10px 14px; outline:none; transition:border-color var(--t);
}
.inp:focus { border-color:rgba(var(--accent-rgb),.35); }
.inp::placeholder { color:var(--muted); }
.inp.small { font-size:13px; padding:7px 11px; }

/* ── Buttons ── */
.btn-main {
  width:100%; padding:12px 20px;
  background:linear-gradient(135deg,rgba(79,255,164,.14),rgba(123,147,255,.14));
  border:1px solid rgba(79,255,164,.25); border-radius:var(--r-sm);
  color:var(--text); font-family:var(--font); font-size:14px; font-weight:500;
  cursor:pointer; transition:all var(--t);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-main:hover { background:linear-gradient(135deg,rgba(79,255,164,.22),rgba(123,147,255,.22)); border-color:rgba(79,255,164,.4); transform:translateY(-1px); }

.btn-ghost {
  background:transparent; border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--muted); font-family:var(--font); font-size:13px; cursor:pointer;
  padding:8px 16px; transition:all var(--t);
}
.btn-ghost:hover { border-color:var(--border-h); color:var(--text); }
.btn-ghost.small { padding:6px 12px; font-size:12px; }
.btn-ghost.danger { border-color:rgba(255,107,107,.25); color:var(--danger); }
.btn-ghost.danger:hover { background:rgba(255,107,107,.08); }

.ico-btn { background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; padding:4px 8px; border-radius:6px; transition:all var(--t); }
.ico-btn:hover { color:var(--text); background:var(--surface-h); }

.btn-spotify {
  width:100%; padding:9px 16px;
  background:rgba(29,185,84,.1); border:1px solid rgba(29,185,84,.25);
  border-radius:var(--r-sm); color:var(--spotify); font-family:var(--font);
  font-size:13px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:all var(--t);
}
.btn-spotify:hover { background:rgba(29,185,84,.18); }

.spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--text); border-radius:50%; animation:spin .7s linear infinite; }
.spinner.hidden { display:none; }

/* ═══════════════════════════════
   AUTH SCREEN
═══════════════════════════════ */
#authScreen {
  display:none; align-items:center; justify-content:center;
  background:transparent;
}
#authScreen.active { display:flex; }

.auth-wrap { width:370px; animation:fadeUp .5s cubic-bezier(.16,1,.3,1); }

.auth-logo {
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-bottom:28px;
  font-size:22px; font-weight:700; letter-spacing:-.02em;
  color:var(--accent);
}

.auth-card {
  background:rgba(8,13,26,.78); border:1px solid var(--border);
  border-radius:20px; padding:28px 26px;
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
}

.auth-tabs { display:flex; gap:3px; background:rgba(255,255,255,.04); border-radius:10px; padding:3px; margin-bottom:22px; }
.auth-tab { flex:1; padding:8px; background:transparent; border:none; border-radius:8px; color:var(--muted); font-family:var(--font); font-size:13px; font-weight:500; cursor:pointer; transition:all var(--t); }
.auth-tab.active { background:rgba(255,255,255,.09); color:var(--text); }

.auth-form { display:none; flex-direction:column; gap:13px; }
.auth-form.active { display:flex; }

.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:12px; color:var(--sec); font-weight:500; }

.form-err { font-size:12px; color:var(--danger); background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.15); border-radius:8px; padding:8px 12px; }
.form-err.hidden { display:none; }

.or-sep { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
.or-sep::before,.or-sep::after { content:''; flex:1; height:1px; background:var(--border); }

/* ═══════════════════════════════
   FLOATING ELEMENTS (no topbar)
═══════════════════════════════ */

/* Brand — top left */
.f-brand {
  position:fixed; top:18px; left:20px; z-index:200;
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; letter-spacing:-.02em;
  color:rgba(255,255,255,.5);
  transition:opacity var(--t);
}
.role-tag {
  font-size:10px; font-weight:600; padding:2px 7px; border-radius:5px;
  text-transform:uppercase; letter-spacing:.07em;
}
.role-tag.role-admin { background:rgba(255,107,107,.15); color:var(--danger); border:1px solid rgba(255,107,107,.25); }
.role-tag.role-vip   { background:rgba(255,200,60,.12);  color:#ffc83c;       border:1px solid rgba(255,200,60,.25); }

/* Clock — top center */
.f-clock {
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:200;
  font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.3);
  letter-spacing:.06em; pointer-events:none;
  transition:opacity var(--t);
}

/* Actions — top right */
.f-actions {
  position:fixed; top:14px; right:16px; z-index:200;
  display:flex; align-items:center; gap:4px;
  transition:opacity var(--t);
}
.fa-btn {
  width:32px; height:32px; border-radius:9px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t);
}
.fa-btn:hover { background:var(--surface-h); color:var(--text); border-color:var(--border-h); }

.user-dot {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,rgba(79,255,164,.18),rgba(123,147,255,.18));
  border:1px solid rgba(79,255,164,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--accent);
  cursor:pointer; margin-left:2px; transition:all var(--t);
}
.user-dot:hover { border-color:rgba(79,255,164,.4); }

/* Exit focus */
.exit-focus {
  position:fixed; top:14px; right:14px; z-index:9999;
  padding:7px 14px; border-radius:20px;
  background:rgba(8,13,26,.88); border:1px solid var(--border-h);
  color:var(--muted); font-family:var(--font); font-size:12px; font-weight:500;
  cursor:pointer; display:flex; align-items:center; gap:6px;
  animation:fadeIn .3s ease; transition:all var(--t);
}
.exit-focus:hover { color:var(--text); border-color:var(--accent); }
.exit-focus.hidden { display:none; }

/* Focus mode — hide floating UI */
body.focus-mode .f-brand,
body.focus-mode .f-clock,
body.focus-mode .f-actions,
body.focus-mode .fab-cluster,
body.focus-mode .session-tabs { opacity:0; pointer-events:none; }

/* ═══════════════════════════════
   TIMER STAGE — perfectly centered
═══════════════════════════════ */
.timer-stage {
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:24px;
}

/* Session tabs */
.session-tabs {
  display:flex; gap:5px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:11px; padding:3px;
  transition:opacity var(--t);
}
.s-tab {
  padding:6px 16px; border-radius:8px; border:none;
  background:transparent; color:var(--muted);
  font-family:var(--font); font-size:12px; font-weight:500;
  cursor:pointer; transition:all var(--t); white-space:nowrap;
}
.s-tab.active { background:rgba(255,255,255,.09); color:var(--text); }
.s-tab.type-work.active  { background:rgba(79,255,164,.1); color:var(--accent); }
.s-tab.type-break.active { background:rgba(123,147,255,.12); color:var(--accent2); }

/* Ring */
.ring-wrap {
  position:relative; width:280px; height:280px;
  display:flex; align-items:center; justify-content:center;
}
.ring-svg { position:absolute; inset:0; width:100%; height:100%; }
.ring-track { stroke:rgba(255,255,255,.05); stroke-width:6; fill:none; }
.ring-prog  { stroke-width:6; fill:none; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }

.ring-inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px; }

.sess-label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ring-inner.is-work  .sess-label { color:var(--accent); }
.ring-inner.is-break .sess-label { color:var(--accent2); }

.timer-display {
  font-family:var(--mono); font-size:58px; font-weight:300;
  letter-spacing:-.02em; color:var(--text); line-height:1;
}
.sess-count { font-size:11px; color:var(--muted); letter-spacing:.06em; }

/* Controls */
.timer-ctrls { display:flex; align-items:center; gap:16px; }
.ctrl { border:none; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.ctrl-sec {
  width:46px; height:46px;
  background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--muted);
}
.ctrl-sec:hover { background:var(--surface-h); border-color:var(--border-h); color:var(--text); transform:scale(1.05); }
.ctrl-main {
  width:64px; height:64px;
  background:linear-gradient(135deg,rgba(79,255,164,.16),rgba(123,147,255,.16));
  border:1px solid rgba(79,255,164,.28); color:var(--text);
  box-shadow:0 0 30px rgba(79,255,164,.08);
}
.ctrl-main:hover { background:linear-gradient(135deg,rgba(79,255,164,.24),rgba(123,147,255,.24)); box-shadow:0 0 40px rgba(79,255,164,.16); transform:scale(1.05); }
.ctrl-main:active { transform:scale(.97); }
.ctrl-main.running { animation:pulse-ring 2.4s ease infinite; }

/* Cycles */
.cycles-row { display:flex; gap:8px; min-height:10px; }
.cycle-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:all .3s; }
.cycle-dot.done { background:var(--accent); }
.cycle-dot.current { background:var(--accent); box-shadow:0 0 8px rgba(79,255,164,.5); transform:scale(1.3); }

/* ═══════════════════════════════
   FAB CLUSTER
═══════════════════════════════ */
.fab-cluster {
  position:fixed; bottom:24px; right:24px; z-index:300;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  transition:opacity var(--t);
}

.fab-item { position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

.fab-btn {
  width:40px; height:40px; border-radius:12px;
  background:rgba(8,13,26,.8); border:1px solid var(--border);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t); position:relative;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.fab-btn:hover { background:var(--surface-h); border-color:var(--border-h); color:var(--text); transform:scale(1.06); }

.fab-badge {
  position:absolute; top:-4px; right:-4px;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); color:#080d1a;
  font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.fab-badge.hidden { display:none; }

/* FAB Panel */
.fab-panel {
  display:none;
  position:absolute; bottom:calc(100% + 8px); right:0;
  width:280px;
  background:rgba(8,13,26,.9); border:1px solid var(--border);
  border-radius:16px; padding:14px;
  backdrop-filter:blur(28px) saturate(1.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:popUp .2s cubic-bezier(.16,1,.3,1);
}
.fab-panel.open { display:block; }

.mp-hd {
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--muted);
}
.mp-hd > span:first-child { flex:1; }
.mp-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:0 2px; transition:color var(--t); }
.mp-close:hover { color:var(--text); }
.mp-add { background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.2); border-radius:6px; color:var(--accent); cursor:pointer; padding:3px 6px; display:flex; align-items:center; transition:all var(--t); }
.mp-add:hover { background:rgba(var(--accent-rgb),.2); }
.mp-confirm { background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.2); border-radius:6px; color:var(--accent); cursor:pointer; padding:4px 8px; display:flex; align-items:center; transition:all var(--t); }
.mp-confirm:hover { background:rgba(var(--accent-rgb),.22); }

/* Stats mini panel */
.stats-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }
.st { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:9px; padding:9px 8px; text-align:center; }
.accent-st { background:rgba(79,255,164,.06); border-color:rgba(79,255,164,.18); }
.sv { display:block; font-family:var(--mono); font-size:16px; font-weight:400; color:var(--text); }
.sl { display:block; font-size:10px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }
.chart-mini-wrap { margin-bottom:10px; }
.cm-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }
.btn-more-stats { width:100%; padding:7px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-family:var(--font); font-size:12px; cursor:pointer; transition:all var(--t); }
.btn-more-stats:hover { border-color:var(--border-h); color:var(--text); }

/* Music panel */
.src-tog { display:flex; gap:3px; }
.src-b { padding:3px 9px; border-radius:5px; border:1px solid transparent; background:transparent; color:var(--muted); font-family:var(--font); font-size:11px; font-weight:600; cursor:pointer; transition:all var(--t); }
.src-b.active { background:var(--surface-h); border-color:var(--border); color:var(--text); }

.player-wrap { border-radius:9px; overflow:hidden; }
.player-wrap.hidden { display:none; }
.player-wrap iframe { width:100%; border:none; display:block; border-radius:9px; }
.p-empty { text-align:center; padding:16px; color:var(--muted); font-size:12px; }

/* Tasks panel */
.task-inp-row { display:flex; gap:6px; margin-bottom:10px; align-items:center; }
.task-list { display:flex; flex-direction:column; gap:3px; max-height:220px; overflow-y:auto; }
.task-list::-webkit-scrollbar { width:3px; }
.task-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:3px; }

.task-item { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; border:1px solid transparent; transition:all var(--t); animation:fadeIn .2s ease; }
.task-item:hover { background:var(--surface-h); border-color:var(--border); }
.task-item.done .task-txt { color:var(--muted); text-decoration:line-through; }
.task-chk { width:17px; height:17px; border-radius:5px; border:1.5px solid rgba(255,255,255,.2); background:transparent; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.task-chk.on { background:var(--accent); border-color:var(--accent); }
.task-chk.on::after { content:''; display:block; width:4px; height:7px; border:2px solid #080d1a; border-top:none; border-left:none; transform:rotate(45deg) translate(-1px,-1px); }
.task-txt { flex:1; font-size:13px; color:var(--sec); line-height:1.3; }
.task-del { opacity:0; background:none; border:none; color:var(--danger); cursor:pointer; font-size:14px; transition:opacity var(--t); }
.task-item:hover .task-del { opacity:.5; }
.task-del:hover { opacity:1!important; }
.empty-hint { font-size:12px; color:var(--muted); text-align:center; padding:12px 0; }

/* ═══════════════════════════════
   MODALS
═══════════════════════════════ */
.overlay {
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,8,20,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.overlay.open { opacity:1; pointer-events:all; }

.modal-box {
  background:rgba(8,13,26,.9); border:1px solid var(--border);
  border-radius:20px; backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  width:90%; max-width:500px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
  animation:modalIn .28s cubic-bezier(.16,1,.3,1);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

.modal-hd { display:flex; align-items:center; justify-content:space-between; padding:20px 22px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-hd h2 { font-size:15px; font-weight:600; }

.modal-bd { overflow-y:auto; flex:1; padding:18px 22px; }
.modal-bd::-webkit-scrollbar { width:3px; }
.modal-bd::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:3px; }

/* Settings */
.s-section { margin-bottom:26px; }
.s-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:12px; }
.s-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; color:var(--sec); }
.s-row-input { display:flex; gap:8px; }
.s-row-input .inp { flex:1; }
.s-sub { display:flex; align-items:center; gap:8px; margin-top:8px; padding:9px 11px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:9px; }
.s-sub.hidden { display:none; }
.s-sub input[type=color] { width:34px; height:30px; border:1px solid var(--border); border-radius:6px; cursor:pointer; background:none; padding:2px; }
.sub-hint { font-size:12px; color:var(--muted); }
.s-hint { font-size:12px; color:var(--muted); line-height:1.5; }

.pill-grp { display:flex; gap:3px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; padding:3px; }
.pill { padding:5px 12px; border-radius:6px; border:none; background:transparent; color:var(--muted); font-family:var(--font); font-size:12px; cursor:pointer; transition:all var(--t); }
.pill.active { background:rgba(79,255,164,.12); color:var(--accent); }

.timer-row { display:flex; align-items:center; gap:7px; margin-bottom:7px; padding:9px 11px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:9px; animation:fadeIn .2s; }
.timer-row input[type=text] { flex:1; }
.timer-row input[type=number] { width:68px; text-align:center; }
.t-sel { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:var(--font); font-size:12px; padding:5px 8px; cursor:pointer; }
.t-sel option { background:#0d1525; }
.del-t { background:none; border:none; color:var(--danger); opacity:.4; cursor:pointer; padding:2px; transition:opacity var(--t); }
.del-t:hover { opacity:1; }
.btn-add-row { width:100%; padding:8px; background:transparent; border:1px dashed var(--border); border-radius:8px; color:var(--muted); font-family:var(--font); font-size:12px; cursor:pointer; transition:all var(--t); }
.btn-add-row:hover { border-color:var(--border-h); color:var(--text); }
.btn-save-timers { width:100%; margin-top:8px; padding:9px; background:rgba(79,255,164,.07); border:1px solid rgba(79,255,164,.2); border-radius:8px; color:var(--accent); font-family:var(--font); font-size:12px; cursor:pointer; transition:all var(--t); }
.btn-save-timers:hover { background:rgba(79,255,164,.13); }

.sp-badge { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--spotify); padding:8px 11px; background:rgba(29,185,84,.07); border:1px solid rgba(29,185,84,.2); border-radius:8px; }

/* Full stats modal */
.stats-box { max-width:580px; }
.stats-grid-full { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:22px; }
.sc { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:14px 12px; text-align:center; }
.accent-sc { background:linear-gradient(135deg,rgba(79,255,164,.08),rgba(123,147,255,.08)); border-color:rgba(79,255,164,.2); }
.fire-sc   { background:rgba(255,160,60,.06); border-color:rgba(255,160,60,.2); }
.sc-v { font-family:var(--mono); font-size:24px; font-weight:400; color:var(--text); }
.accent-sc .sc-v { color:var(--accent); }
.sc-l { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:4px; }
.chart-block { margin-bottom:18px; }
.chart-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }

/* Task check modal */
.tc-box { max-width:400px; }
.tc-head { text-align:center; padding:24px 20px 18px; border-bottom:1px solid var(--border); }
.tc-ico { width:44px; height:44px; border-radius:50%; margin:0 auto 12px; background:linear-gradient(135deg,rgba(79,255,164,.18),rgba(123,147,255,.18)); border:1px solid rgba(79,255,164,.25); font-size:20px; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.tc-head h3 { font-size:16px; font-weight:600; margin-bottom:5px; }
.tc-sub { font-size:13px; color:var(--muted); }
.tc-list { padding:12px 20px 0; display:flex; flex-direction:column; gap:3px; max-height:200px; overflow-y:auto; }
.tc-check-item { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:all var(--t); }
.tc-check-item:hover { background:var(--surface-h); border-color:var(--border); }
.tc-add-row { display:flex; gap:7px; align-items:center; padding:12px 20px 0; }
.tc-box .btn-main { margin:14px 20px 20px; width:calc(100% - 40px); }

/* ADMIN MODAL */
.adm-box { max-width:680px; }
.adm-tabs { display:flex; gap:3px; padding:0 20px 0; background:rgba(255,255,255,.02); border-bottom:1px solid var(--border); }
.adm-tab { padding:12px 16px; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); font-family:var(--font); font-size:13px; font-weight:500; cursor:pointer; transition:all var(--t); margin-bottom:-1px; }
.adm-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.adm-section { padding:18px 20px; overflow-y:auto; max-height:62vh; }
.adm-section.hidden { display:none; }
.adm-section::-webkit-scrollbar { width:3px; }
.adm-section::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:3px; }

.adm-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.adm-sc { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:11px; padding:14px; text-align:center; }
.adm-v { display:block; font-family:var(--mono); font-size:22px; color:var(--text); }
.adm-l { display:block; font-size:10px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.07em; }

.adm-user-list { display:flex; flex-direction:column; gap:7px; }
.adm-user-card {
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px;
  display:grid; grid-template-columns:1fr auto;
  gap:8px 12px; transition:border-color var(--t);
}
.adm-user-card:hover { border-color:var(--border-h); }
.adm-user-info .adm-username { font-weight:600; font-size:14px; }
.adm-user-info .adm-email    { font-size:11px; color:var(--muted); margin-top:1px; }
.adm-user-stats { font-size:11px; color:var(--muted); display:flex; gap:12px; margin-top:6px; grid-column:1/-1; }
.adm-user-stats span { display:flex; flex-direction:column; gap:1px; }
.adm-user-stats b { font-size:13px; color:var(--sec); font-weight:500; font-family:var(--mono); }
.adm-user-actions { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.adm-role-sel { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:var(--font); font-size:11px; padding:4px 8px; cursor:pointer; }
.adm-role-sel option { background:#0d1525; }
.role-badge { font-size:10px; font-weight:600; padding:2px 7px; border-radius:5px; text-transform:uppercase; letter-spacing:.06em; }
.rb-user  { background:rgba(255,255,255,.06); color:var(--muted); }
.rb-vip   { background:rgba(255,200,60,.12);  color:#ffc83c; }
.rb-admin { background:rgba(255,107,107,.12); color:var(--danger); }
.adm-del-btn { background:none; border:none; color:var(--danger); opacity:.3; font-size:16px; cursor:pointer; transition:opacity var(--t); }
.adm-del-btn:hover { opacity:1; }

/* ═══════════════════════════════
   ANIMATIONS
═══════════════════════════════ */
@keyframes fadeUp  { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes modalIn { from{opacity:0;transform:scale(.96) translateY(8px)} to{opacity:1;transform:none} }
@keyframes popUp   { from{opacity:0;transform:scale(.95) translateY(4px)} to{opacity:1;transform:none} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(79,255,164,.3)} 70%{box-shadow:0 0 0 12px rgba(79,255,164,0)} 100%{box-shadow:0 0 0 0 rgba(79,255,164,0)} }

.hidden { display:none!important; }

/* ── Themes grid ── */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.theme-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  transition: all var(--t);
  background: rgba(255,255,255,.03);
}
.theme-card:hover { border-color: var(--border-h); background: var(--surface-h); transform: translateY(-1px); }
.theme-card.active { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.07); }
.theme-icon { font-size: 20px; display: block; margin-bottom: 4px; }
.theme-swatch {
  display: flex; gap: 3px; justify-content: center; margin-bottom: 5px;
}
.theme-swatch span { width: 12px; height: 12px; border-radius: 50%; }
.theme-name { font-size: 11px; color: var(--muted); }

/* ── Patterns list ── */
.patterns-list { display: flex; flex-direction: column; gap: 6px; }
.pattern-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  cursor: pointer; transition: all var(--t);
}
.pattern-card:hover { border-color: var(--border-h); background: var(--surface-h); }
.pattern-icon { font-size: 18px; flex-shrink: 0; }
.pattern-info { flex: 1; }
.pattern-name { font-size: 13px; font-weight: 500; }
.pattern-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pattern-apply {
  font-size: 11px; color: var(--accent);
  background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.2);
  border-radius: 6px; padding: 4px 10px; cursor: pointer;
  transition: all var(--t); white-space: nowrap;
  font-family: var(--font);
}
.pattern-apply:hover { background: rgba(var(--accent-rgb),.2); }

/* ── Admin fixes ── */
.chart-block canvas { display: block; }

/* Fix admin chart height */
.adm-section .chart-block { position: relative; height: 90px; }
.adm-section .chart-block canvas { position: absolute; inset: 0; }

/* Fix full stats chart height */
#chartFocusFull { height: 140px !important; max-height: 140px; }
#chartTasksFull { height: 100px !important; max-height: 100px; }
#chartMini { height: 70px !important; max-height: 70px; }
#admChartUsers { height: 90px !important; max-height: 90px; }

/* Admin user card improved */
.adm-user-card {
  display: flex; flex-direction: column; gap: 8px;
}
.adm-u-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-uname { font-weight: 600; font-size: 14px; }
.adm-email { font-size: 11px; color: var(--muted); }
.adm-u-stats {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
.adm-u-stats span { display: flex; flex-direction: column; gap: 1px; }
.adm-u-stats b { font-size: 13px; color: var(--sec); font-weight: 500; font-family: var(--mono); }
.adm-u-actions { display: flex; align-items: center; gap: 8px; }