/* ═══════════════════════════════════════════════════════════
   TASKQUEST  ·  RPG Dark Design System
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg:          #0a0a14;
  --bg-card:     #0e0d1f;
  --bg-raised:   #13122a;
  --bg-hover:    #161530;
  --border:      #2d2b52;
  --border-soft: #1e1d35;

  --text:        #e2e0f0;
  --text-2:      #9ca3af;
  --text-3:      #6b7280;

  --purple:      #7c3aed;
  --purple-2:    #a78bfa;
  --purple-3:    rgba(124,58,237,.18);
  --gold:        #fbbf24;
  --gold-2:      rgba(251,191,36,.15);
  --green:       #34d399;
  --green-2:     rgba(52,211,153,.15);
  --red:         #f87171;
  --red-2:       rgba(248,113,113,.15);
  --orange:      #fb923c;
  --orange-2:    rgba(251,146,60,.15);

  --radius:   8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --nav-h:    56px;
  --sidebar-w:230px;
  --gap:      18px;

  --shadow:      0 4px 20px rgba(0,0,0,.6);
  --glow-purple: 0 0 14px rgba(124,58,237,.45);
  --glow-green:  0 0 8px  rgba(52,211,153,.5);
  --glow-gold:   0 0 10px rgba(251,191,36,.4);

  --t: all .15s ease;

  /* Legacy compat aliases */
  --primary:       var(--purple);
  --primary-dark:  #6d28d9;
  --primary-glow:  var(--purple-3);
  --secondary:     #6366f1;
  --success:       var(--green);
  --danger:        var(--red);
  --warning:       var(--gold);
  --bg-primary:    var(--bg);
  --bg-secondary:  var(--bg-raised);
  --bg-card:       #0e0d1f;
  --bg-elevated:   var(--bg-raised);
  --text-primary:  var(--text);
  --text-secondary:var(--text-2);
  --text-muted:    var(--text-3);
  --text-accent:   var(--gold);
  --text-contrast: #fff;
  --border-light:  var(--border-soft);
  --border-medium: var(--border);
  --border-accent: var(--purple-2);
  --border-color:  var(--border);
  --navbar-height: var(--nav-h);
  --font-size-xs:  .72rem;
  --font-size-sm:  .8rem;
  --font-size-base:1rem;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem;
  --space-4:1rem;   --space-6:1.5rem;--space-8:2rem;
  --radius-sm:4px; --radius-md:var(--radius); --radius-2xl:18px;
  --radius-full:9999px;
  --shadow-sm:var(--shadow); --shadow-md:var(--shadow); --shadow-lg:var(--shadow);
  --transition-fast:all .12s ease; --transition-smooth:var(--t);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  font-size: 14px;
}
html.no-transition, html.no-transition * { transition: none !important; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ── Typography + links ────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-weight:700; line-height:1.2; }
h1{font-size:1.45rem;} h2{font-size:1.2rem;} h3{font-size:1rem;} h4{font-size:.9rem;}
a   { color:var(--purple-2); text-decoration:none; }
a:hover { color:var(--text); }
small { font-size:.8rem; color:var(--text-3); }
code {
  font-family:"Fira Code",monospace; background:var(--bg-raised);
  padding:1px 5px; border-radius:4px; font-size:.82em; color:var(--purple-2);
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  background:rgba(13,12,27,.92); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft);
  z-index:900; display:flex; align-items:center;
}
.nav-content {
  width:100%; max-width:1400px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
}
.nav-brand { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-brand h1 { font-size:1rem; font-weight:800; color:var(--gold); letter-spacing:-.3px; margin:0; }
.nav-center { display:flex; justify-content:flex-start; align-items:center; }
.nav-actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.navbar-actions { display:flex; align-items:center; gap:6px; }

/* Player widget */
.player-info-compact {
  display:flex; align-items:center; gap:10px;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  padding:5px 12px; border-radius:var(--radius);
}
.player-basic { display:flex; align-items:center; gap:7px; }
.level-emoji  { font-size:1.1rem; }
.player-name  { font-weight:700; font-size:.85rem; }
.level-title  { font-size:.75rem; color:var(--text-3); }
.player-progress { min-width:90px; }
.exp-bar-container { display:flex; flex-direction:column; gap:2px; }
.exp-bar { height:4px; background:var(--border-soft); border-radius:2px; overflow:hidden; }
.exp-bar-inner {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--purple),var(--purple-2));
  border-radius:2px; box-shadow:0 0 6px rgba(124,58,237,.6);
  transition:width .4s ease; position:relative;
}
.exp-bar-shine {
  position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.22),transparent);
}
.exp-bar-outer { background:var(--bg-raised); border-radius:4px; height:10px; overflow:hidden; }
.exp-bar-label { font-size:.72rem; color:var(--text-3); margin-bottom:2px; }
.exp-bar-text  { font-size:.72rem; color:var(--text-3); margin-top:2px; }
.exp-text { font-size:.7rem; color:var(--text-3); }
.exp-bottom-row { display:flex; align-items:center; gap:6px; }

.pending-notification {
  background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3);
  color:var(--gold); padding:4px 12px; border-radius:20px;
  font-size:.78rem; font-weight:600; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
}
.pending-notification.blink { animation:blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.55} }
.highlight-pending { border-color:var(--gold)!important; }
@keyframes highlightTask { 0%{box-shadow:0 0 0 3px rgba(251,191,36,.5)} 100%{box-shadow:none} }

/* ── Language toggle ──────────────────────────────────────── */
.lang-toggle-btn {
  font-size:.82rem; padding:4px 8px; line-height:1;
  border-radius:var(--radius); min-width:36px;
}
select.lang-toggle-btn {
  background:var(--bg-raised,#1e1f21); color:var(--text,#e5e7eb);
  border:1px solid var(--border,#374151); cursor:pointer;
  padding:5px 8px; font-family:inherit; font-weight:600;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
  padding-right:22px;
}
select.lang-toggle-btn:hover { border-color:var(--purple-2,#7c3aed); }
select.lang-toggle-btn:focus { outline:none; border-color:var(--purple,#7c3aed); box-shadow:0 0 0 2px rgba(124,58,237,.25); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:var(--radius); border:1px solid transparent;
  font-size:.82rem; font-weight:600; cursor:pointer;
  transition:var(--t); white-space:nowrap; line-height:1;
  text-decoration:none; font-family:inherit;
}
.btn:disabled { opacity:.45; cursor:not-allowed; }

.btn-primary   { background:var(--purple);  color:#fff; border-color:var(--purple); }
.btn-primary:hover { background:var(--primary-dark,#6d28d9); box-shadow:var(--glow-purple); }
.btn-secondary { background:var(--bg-raised); color:var(--text-2); border-color:var(--border); }
.btn-secondary:hover { border-color:var(--purple-2); color:var(--text); }
.btn-success   { background:var(--green-2); color:var(--green); border-color:rgba(52,211,153,.4); }
.btn-success:hover { background:rgba(52,211,153,.25); box-shadow:var(--glow-green); }
.btn-danger    { background:var(--red-2); color:var(--red); border-color:rgba(248,113,113,.4); }
.btn-danger:hover { background:rgba(248,113,113,.25); }
.btn-warning   { background:var(--gold-2); color:var(--gold); border-color:rgba(251,191,36,.4); }
.btn-warning:hover { background:rgba(251,191,36,.25); box-shadow:var(--glow-gold); }
.btn-outline   { background:transparent; color:var(--text-2); border-color:var(--border); }
.btn-outline:hover  { border-color:var(--purple-2); color:var(--text); background:var(--purple-3); }
.btn-outline.active { border-color:var(--purple-2); color:var(--purple-2); background:var(--purple-3); }

.btn-sm { padding:4px 10px; font-size:.78rem; }
.btn-lg { padding:10px 22px; font-size:.92rem; }
.w-full { width:100%; justify-content:center; }
.btn-with-margin { margin-top:16px; margin-right:8px; }

/* ── Forms ─────────────────────────────────────────────────── */
input,select,textarea {
  background:var(--bg); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius);
  padding:7px 10px; font-size:.85rem; outline:none;
  font-family:inherit; transition:border-color .15s;
}
input:focus,select:focus,textarea:focus { border-color:var(--purple); }
input::placeholder,textarea::placeholder { color:var(--text-3); }
input[disabled],select[disabled],textarea[disabled] { opacity:.5; cursor:not-allowed; }
select { cursor:pointer; }
label { font-size:.82rem; color:var(--text-2); font-weight:500; }

.styled-select,.styled-input,.config-input {
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius); padding:6px 10px; font-size:.82rem;
}
.styled-select:focus,.styled-input:focus,.config-input:focus { border-color:var(--purple); }

/* Toggle switch */
.toggle-container { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle, label.toggle { display:inline-flex; align-items:center; cursor:pointer; }
.toggle-slider {
  width:38px; height:20px; background:var(--border); border-radius:10px;
  position:relative; transition:background .2s; flex-shrink:0; display:block;
}
.toggle-slider::after {
  content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s;
}
input[type="checkbox"]:checked ~ .toggle-slider,
.toggle input:checked + .toggle-slider { background:var(--purple); box-shadow:0 0 8px rgba(124,58,237,.4); }
input[type="checkbox"]:checked ~ .toggle-slider::after,
.toggle input:checked + .toggle-slider::after { transform:translateX(18px); }
.toggle input[type="checkbox"],
.toggle-container input[type="checkbox"] { display:none; }
.toggle-label { font-size:.85rem; }
.toggle-description { font-size:.78rem; color:var(--text-3); margin-top:3px; }

.checkbox-group { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.checkbox-group label { display:inline-flex; width:fit-content; align-items:center; gap:8px; cursor:pointer; font-size:.83rem; color:var(--text-2); }
.checkbox-group input[type="checkbox"] { display:inline-block; width:15px; height:15px; accent-color:var(--purple); cursor:pointer; }

/* ── Dashboard Layout ──────────────────────────────────────── */
.main-layout {
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr 300px;
  gap:var(--gap);
  max-width:1400px; margin:0 auto;
  padding:calc(var(--nav-h) + 20px) 20px 40px;
}
.left-col  { display:flex; flex-direction:column; gap:14px; }
.center-col{ display:flex; flex-direction:column; gap:16px; }
.right-col { display:flex; flex-direction:column; gap:14px; }

/* ── Card base ─────────────────────────────────────────────── */
.card,.scoreboard-box,.personal-notes-box,.recurring-tasks-box,
.add-task-box,.exp-rewards-box,.profile-header-card,
.profile-settings-card,.profile-stats-card,
.profile-activity-card,.profile-badges-card,.profile-friends-card {
  background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:16px;
}
.card h3,.scoreboard-box h3,.personal-notes-box h3,
.recurring-tasks-box h3,.exp-rewards-box h3,
.profile-activity-card h3,.profile-badges-card h3,.profile-friends-card h3 {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.9px;
  color:var(--text-3); margin-bottom:12px; font-weight:700;
}

/* ── Scoreboard ────────────────────────────────────────────── */
#scoreboard-box ul,.scoreboard-box ul { list-style:none; display:flex; flex-direction:column; gap:3px; }
.scoreboard-header { font-weight:700; font-size:.9rem; color:var(--text); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.lb-rank-chip { display:inline-block; background:var(--accent); color:#fff; border-radius:10px; font-size:.72rem; font-weight:700; padding:1px 6px; margin-right:4px; vertical-align:middle; }
.scoreboard-player {
  display:flex; flex-direction:column; gap:3px;
  padding:8px 10px; border-radius:var(--radius); transition:background .12s;
}
.scoreboard-player:hover { background:var(--bg-raised); }
.scoreboard-player.is-current,.scoreboard-player.current-player {
  background:var(--purple-3); border:1px solid rgba(124,58,237,.2);
}
.scoreboard-player-name { font-size:.85rem; font-weight:700; display:flex; align-items:center; gap:7px; }
.scoreboard-player-stats { font-size:.72rem; color:var(--text-3); }
.scoreboard-player-time { font-size:.7rem; color:var(--text-3); margin-top:2px; }
.player-last-seen { font-size:.68rem; color:var(--text-3); font-style:italic; }
.online-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--border); display:inline-block; }
.online-dot.online { background:var(--green); box-shadow:var(--glow-green); animation:pulse 2.5s ease-in-out infinite; }
.offline-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--border-soft); display:inline-block; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
/* Scoreboard XP bar */
.scoreboard-player .exp-bar-outer { height:4px; margin-top:2px; }
.scoreboard-player .exp-bar-label { font-size:.66rem; color:var(--text-3); margin-top:3px; }
.scoreboard-player .exp-bar-text  { font-size:.66rem; color:var(--text-3); }
/* Admin color theme panel */
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-bottom:20px; }
.theme-swatch { display:flex; flex-direction:column; gap:6px; }
.theme-swatch label { font-size:.78rem; color:var(--text-2); font-weight:600; }
.theme-swatch-row { display:flex; align-items:center; gap:10px; }
.theme-swatch input[type=color] { width:42px; height:32px; border-radius:var(--radius); border:1px solid var(--border); padding:2px; cursor:pointer; background:var(--bg-raised); }
.theme-swatch input[type=text]  { flex:1; font-size:.82rem; font-family:monospace; }
.theme-preview { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.theme-preview-dot { width:28px; height:28px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.1); }
/* Theme presets */
.theme-presets-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:6px; }
.theme-preset-card {
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:12px 14px;
  cursor:pointer; text-align:left; transition:var(--t);
}
.theme-preset-card:hover { border-color:rgba(255,255,255,.25); background:var(--bg-hover); }
.theme-preset-card.active { border-color:var(--purple-2); box-shadow:0 0 0 2px var(--purple-3); }
.theme-preset-dots { display:flex; gap:5px; margin-bottom:8px; }
.theme-preset-dot { width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.15); }
.theme-preset-name { font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:3px; }
.theme-preset-desc { font-size:.72rem; color:var(--text-3); line-height:1.3; }

/* ── Recurring task sidebar cards ─────────────────────────── */
.recurring-task-item { border-bottom:1px solid var(--border-soft); padding-bottom:12px; margin-bottom:12px; }
.recurring-task-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.recurring-task-title { font-size:.88rem; font-weight:700; color:var(--text); margin-bottom:6px; }
.recurring-status-info { display:flex; flex-direction:column; gap:2px; font-size:.75rem; color:var(--text-3); margin-bottom:8px; }
.recurring-status-info .overdue { color:var(--red); font-weight:600; }
.recurring-approver-section { margin-bottom:8px; }
.approver-label { font-size:.74rem; color:var(--text-3); font-weight:700; text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:4px; }
.recurring-approver-select { width:100%; }
.recurring-submit-section { display:flex; flex-direction:column; gap:8px; }
.time-input-group { display:flex; align-items:center; gap:8px; }
.time-input-group label { font-size:.74rem; color:var(--text-3); white-space:nowrap; flex-shrink:0; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.recurring-time-input { width:80px!important; }
.proof-input-group { display:flex; flex-direction:column; gap:4px; }
.proof-input-group label { font-size:.74rem; color:var(--text-3); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.recurring-proof-input { width:100%; resize:vertical; min-height:60px; font-size:.8rem; }
.recurring-actions { margin-top:4px; }
.recurring-actions .btn { width:100%; justify-content:center; }
.recurring-management { margin-top:6px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; }
.recurring-delete-btn { align-self:flex-end; }
.recurring-realm-row { display:flex; align-items:center; gap:.5em; width:100%; flex-wrap:wrap; }
.recurring-realm-select { flex:1; min-width:0; max-width:100%; }
.recurring-submitted-info { padding:8px 10px; background:var(--green-2); border:1px solid rgba(52,211,153,.3); border-radius:var(--radius); font-size:.8rem; color:var(--green); }
.recurring-cooldown-info { padding:8px 10px; background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:var(--radius); font-size:.8rem; color:var(--text-3); }
.cooldown-text,.submitted-text,.cooldown-explanation { font-size:.75rem; }
.personal-notes-box textarea {
  width:100%; min-height:80px; resize:vertical; margin-top:4px;
  background:var(--bg); border-color:var(--border-soft); font-size:.82rem;
}
.notes-info { font-size:.72rem; color:var(--text-3); margin-top:4px; }
.recurring-tasks-box ul { list-style:none; display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.recurring-tasks-box li {
  font-size:.82rem; color:var(--text-2); padding:5px 8px;
  border-radius:var(--radius); border:1px solid var(--border-soft);
}

/* ── Add Task form ─────────────────────────────────────────── */
.add-task-box h2 { font-size:.72rem; text-transform:uppercase; letter-spacing:.9px; color:var(--text-3); margin-bottom:12px; font-weight:700; }
.add-task-row { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.add-task-row:last-child { margin-bottom:0; }
.add-task-row > label { font-size:.76rem; color:var(--text-3); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
/* checkbox/inline labels should NOT be uppercase */
.add-task-row label:has(input[type=checkbox]) { text-transform:none; letter-spacing:0; font-size:.83rem; font-weight:500; color:var(--text-2); display:inline-flex; align-items:center; gap:6px; }
.add-task-row.flex-row > label { text-transform:none; letter-spacing:0; font-size:.83rem; font-weight:500; color:var(--text-2); }
.add-task-row input,.add-task-row select { width:100%; }
.add-task-row input[type=checkbox] { width:16px; height:16px; padding:0; flex-shrink:0; accent-color:var(--purple); cursor:pointer; border:none; background:transparent; }
.flex-row { flex-direction:row!important; align-items:center; gap:10px; }
.flex-row > input,.flex-row > select { width:auto; flex:none; }
.recurring-help-text,.date-help-text { font-size:.72rem; color:var(--text-3); }
.due-date-input-spaced { max-width:180px; }
.hidden,.collapsed { display:none!important; }

/* Scales */
.scale { display:flex; gap:5px; margin-top:4px; }
.scale-btn {
  flex:1; padding:6px 2px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg); color:var(--text-3); font-size:.78rem; font-weight:700;
  cursor:pointer; text-align:center; transition:var(--t);
}
.scale-btn:hover { border-color:var(--purple-2); color:var(--purple-2); background:var(--purple-3); }
.scale-btn.active-difficulty-1,.scale-btn.active-urgency-1 { border-color:#34d399; background:rgba(52,211,153,.15); color:#34d399; }
.scale-btn.active-difficulty-2,.scale-btn.active-urgency-2 { border-color:#86efac; background:rgba(134,239,172,.1); color:#86efac; }
.scale-btn.active-difficulty-3,.scale-btn.active-urgency-3 { border-color:var(--gold); background:var(--gold-2); color:var(--gold); }
.scale-btn.active-difficulty-4,.scale-btn.active-urgency-4 { border-color:var(--orange); background:var(--orange-2); color:var(--orange); }
.scale-btn.active-difficulty-5,.scale-btn.active-urgency-5 { border-color:var(--red); background:var(--red-2); color:var(--red); }

/* ── Filter bar ────────────────────────────────────────────── */
.filter-bar {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:10px 14px; background:var(--bg-card);
  border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  margin-bottom:10px;
}
.filter-btn {
  padding:4px 10px; border-radius:20px; border:1px solid var(--border);
  background:transparent; color:var(--text-3); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:var(--t);
}
.filter-btn:hover  { border-color:var(--purple-2); color:var(--text); }
.filter-btn.active { border-color:var(--purple-2); color:var(--purple-2); background:var(--purple-3); }
.task-sort-bar { display:flex; align-items:center; gap:10px; }
.task-sort-bar label { font-size:.78rem; color:var(--text-3); }
.task-sort-bar select { padding:4px 8px; font-size:.78rem; }

/* ── Task sections ─────────────────────────────────────────── */
#task-section h2 { font-size:.72rem; text-transform:uppercase; letter-spacing:.9px; color:var(--text-3); margin-bottom:10px; font-weight:700; }
.task-user-section { margin-bottom:16px; display:flex; flex-direction:column; gap:10px; }
.task-user-header {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.8px;
  color:var(--purple-2); font-weight:700; margin-bottom:8px;
  padding-bottom:6px; border-bottom:1px solid var(--border-soft);
}
#task-list,.task-list { list-style:none; display:flex; flex-direction:column; gap:10px; }

/* ── Task Card ─────────────────────────────────────────────── */
.task-card {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:13px 14px 13px 18px;
  transition:border-color .15s,background .15s; position:relative; overflow:hidden;
}
.task-card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--border); border-radius:3px 0 0 3px; transition:background .15s;
}
.task-card:hover { border-color:rgba(124,58,237,.3); background:var(--bg-hover); }
.task-card:hover::before { background:var(--purple); }
.task-card[data-status="open"]::before      { background:var(--purple); }
.task-card[data-status="submitted"]::before { background:var(--gold); }
.task-card[data-status="done"]::before,
.task-card[data-status="approved"]::before  { background:var(--green); opacity:.6; }

.task-title {
  font-size:.9rem; font-weight:600; color:var(--text); margin-bottom:5px; cursor:pointer;
}
.task-title:hover { color:var(--purple-2); }
.task-title-input {
  width:100%; background:var(--bg-raised); border:1px solid var(--purple);
  color:var(--text); border-radius:var(--radius); padding:5px 8px;
  font-size:.9rem; font-weight:600; margin-bottom:5px;
}
.task-meta-info { font-size:.72rem; color:var(--text-3); margin-bottom:5px; }
.task-select-row { display:flex; gap:10px; margin-bottom:7px; flex-wrap:wrap; }
.select-group    { display:flex; align-items:center; gap:5px; }
.select-label    { font-size:.72rem; color:var(--text-3); white-space:nowrap; }
.difficulty-select,.urgency-select { padding:3px 7px; font-size:.78rem; }
.approver-select { padding:3px 7px; font-size:.78rem; }
.approver-info   { font-size:.78rem; color:var(--text-2); }
.task-due-row,.task-minutes-row { font-size:.78rem; color:var(--text-2); margin-bottom:4px; }

.task-time-row {
  display:flex; align-items:center; gap:8px; margin:5px 0; flex-wrap:wrap;
}
.minutes-input { width:70px; padding:4px 7px; font-size:.82rem; }
.add-minutes { padding:4px 10px; font-size:.78rem; }
.time-tracking-hint { font-size:.7rem; color:var(--text-3); }
.time-worked-display { font-size:.78rem; color:var(--text-2); }

.task-action-row {
  display:flex; gap:7px; align-items:center; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--border-soft);
}
.due-date-input { padding:4px 8px; font-size:.78rem; }
.waiting-approval { font-size:.78rem; color:var(--gold); font-style:italic; }
.task-note-row { margin:5px 0; }
.task-note {
  width:100%; background:var(--bg); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:7px 9px; font-size:.8rem; color:var(--text-2);
  resize:vertical; min-height:60px;
}
.task-note:focus { border-color:var(--purple); }
.commentary-block {
  background:rgba(124,58,237,.06); border-left:3px solid var(--purple);
  padding:8px 11px; border-radius:0 var(--radius) var(--radius) 0;
  font-size:.8rem; margin:5px 0;
}
.commentary-text { color:var(--text-2); white-space:pre-wrap; word-break:break-word; }

/* Photos */
.task-photos-section { margin-top:8px; }
.task-photos { display:flex; flex-wrap:wrap; gap:7px; margin-top:5px; }
.task-photo-thumb {
  width:68px; height:68px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); position:relative; flex-shrink:0; cursor:pointer;
}
.task-photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.task-photo-delete {
  position:absolute; top:2px; right:2px; width:18px; height:18px;
  border-radius:50%; background:rgba(248,113,113,.85); color:#fff;
  border:none; font-size:9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s;
}
.task-photo-thumb:hover .task-photo-delete { opacity:1; }
.task-photo-add-wrap { position:relative; display:inline-flex; }
.task-photo-add-btn {
  width:68px; height:68px; border-radius:var(--radius);
  border:1.5px dashed var(--border); background:var(--bg);
  color:var(--text-3); font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:var(--t);
}
.task-photo-add-btn:hover { border-color:var(--purple-2); color:var(--purple-2); background:var(--purple-3); }
.task-photo-add-menu {
  position:absolute; bottom:calc(100% + 6px); left:0; z-index:50;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; min-width:150px;
}
.task-photo-add-menu[hidden] { display:none; }
.task-photo-add-opt {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:9px 13px; background:none; border:none;
  color:var(--text-2); font-size:.83rem; cursor:pointer; transition:background .12s;
  font-family:inherit;
}
.task-photo-add-opt:hover { background:var(--bg-hover); color:var(--text); }
.task-webcam-btn { }
.task-photo-uploading { font-size:.73rem; color:var(--text-3); align-self:center; }

/* Archive */
.task-archive-card {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:11px 14px; font-size:.82rem; color:var(--text-2);
  border-left:3px solid rgba(52,211,153,.4); transition:background .12s;
}
.task-archive-card:hover { background:var(--bg-hover); }

/* ── Right-col XP/Rewards ──────────────────────────────────── */
.toggle-box-btn {
  width:100%; background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text-3); padding:7px 12px; border-radius:var(--radius);
  cursor:pointer; font-size:.78rem; font-weight:600; text-align:left; transition:var(--t);
}
.toggle-box-btn:hover { border-color:var(--purple-2); color:var(--text); }
#exp-rewards-content { padding-top:10px; }
.collapsible-section { margin-bottom:2px; }
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 0; cursor:pointer; border-bottom:1px solid var(--border-soft);
}
.section-header h4 { font-size:.8rem; color:var(--text-2); font-weight:600; }
.section-header:hover h4 { color:var(--purple-2); }
.collapse-indicator { font-size:.75rem; color:var(--text-3); transition:transform .2s; }
.section-content { padding-top:8px; }
.section-content.collapsed { display:none; }
.exp-explanation-box { padding:4px 0; }
.exp-formula { display:flex; flex-direction:column; gap:6px; }
.formula-part { font-size:.78rem; background:var(--bg-raised); border-radius:var(--radius); padding:7px 10px; }
.formula-part.bonus  { border-left:3px solid var(--green); }
.formula-part.penalty{ border-left:3px solid var(--red);   }
.formula-label { font-weight:700; color:var(--text-2); display:block; margin-bottom:2px; }
.formula-value { color:var(--purple-2); }
.formula-example { font-size:.72rem; color:var(--text-3); margin-top:3px; }
.example-label { margin-right:4px; }
.example-values { display:flex; gap:8px; flex-wrap:wrap; }
.difficulty-1,.urgency-1,.time-15 { color:var(--green); }
.difficulty-5,.urgency-5,.time-60 { color:var(--red); }
.penalty-text,.bonus-text { font-size:.72rem; }
.calculator-example { font-size:.78rem; color:var(--text-2); }
.calculation-steps { margin-top:5px; display:flex; flex-direction:column; gap:2px; font-size:.75rem; }
.total { color:var(--gold); font-weight:700; }
.rewards-box { padding-top:6px; }

/* ── Webcam overlay ────────────────────────────────────────── */
#webcam-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
#webcam-overlay video { border-radius:var(--radius-lg); max-width:90vw; }

/* ── Login ─────────────────────────────────────────────────── */
.login-page {
  background:radial-gradient(ellipse at 50% 30%,#13122a 0%,var(--bg) 70%);
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.login-container {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:40px 36px; width:100%; max-width:380px;
  box-shadow:var(--shadow),0 0 60px rgba(124,58,237,.12); text-align:center;
}
.login-logo { font-size:3rem; margin-bottom:8px; }
.login-container h1 { font-size:1.5rem; font-weight:800; color:var(--gold); margin-bottom:24px; letter-spacing:-.5px; }
.login-form-group { text-align:left; margin-bottom:14px; }
.login-form-group label { display:block; margin-bottom:5px; }
.login-input { width:100%; }
.login-btn {
  width:100%; margin-top:6px; background:var(--purple); border:none; color:#fff;
  padding:11px; border-radius:var(--radius); font-size:.9rem; font-weight:700;
  cursor:pointer; transition:var(--t);
}
.login-btn:hover { background:#6d28d9; box-shadow:var(--glow-purple); }
.login-error-message {
  display:none;
  background:var(--red-2); border:1px solid rgba(248,113,113,.4); color:var(--red);
  padding:9px 13px; border-radius:var(--radius); font-size:.82rem; margin-bottom:14px; text-align:left;
}
.login-loading { text-align:center; padding:10px; display:none; }
.login-spinner {
  width:26px; height:26px; border:3px solid var(--border);
  border-top-color:var(--purple); border-radius:50%;
  animation:spin .8s linear infinite; margin:0 auto;
}
@keyframes spin { to{transform:rotate(360deg)} }
.login-info-text {
  margin-top:20px; font-size:.75rem; color:var(--text-3);
  background:var(--bg-raised); border-radius:var(--radius); padding:10px 12px;
  text-align:left; line-height:1.6;
}
.login-info-text strong { color:var(--text-2); }

/* ── Profile ───────────────────────────────────────────────── */
.profile-container {
  display:grid; grid-template-columns:1fr 320px; gap:var(--gap);
  max-width:1200px; margin:0 auto;
  padding:calc(var(--nav-h) + 20px) 20px 40px;
}
.profile-main { display:flex; flex-direction:column; gap:14px; min-width:0; }
.profile-header-card { display:flex; align-items:center; gap:18px; padding:20px; }
.profile-avatar { flex-shrink:0; }
.avatar-circle {
  width:72px; height:72px; border-radius:18px;
  background:linear-gradient(135deg,var(--purple),#4f46e5);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; box-shadow:var(--glow-purple);
}
.profile-info h1 { font-size:1.3rem; color:var(--text); }
.profile-level,.level-progress { font-size:.8rem; color:var(--text-3); margin-top:3px; }
.profile-settings-card h3,.profile-stats-card h3 {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.9px;
  color:var(--text-3); margin-bottom:14px; font-weight:700;
  padding-bottom:8px; border-bottom:1px solid var(--border-soft);
}
.settings-section { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border-soft); }
.settings-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.settings-section h4 { font-size:.8rem; color:var(--purple-2); margin-bottom:10px; font-weight:700; }
.setting-group { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.setting-group input,.setting-group select { max-width:360px; }
.sub-option { margin-left:22px; margin-top:4px; font-size:.78rem; color:var(--text-3); }
.sub-option input[type="time"],.sub-option select { display:inline; padding:2px 6px; font-size:.78rem; }
.notification-option-group { margin-bottom:5px; }
.notif-type-list { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.notif-type-header { display:grid; grid-template-columns:1fr 130px; gap:8px; font-size:.72rem; color:var(--text-3); padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:2px; }
.notif-type-row { display:grid; grid-template-columns:1fr 130px; gap:8px; align-items:center; }
.notif-type-label { display:inline-flex; width:fit-content; align-items:center; gap:6px; cursor:pointer; font-size:.83rem; color:var(--text-2); }
.notif-channel-select { font-size:.75rem; padding:3px 5px; border-radius:6px; background:var(--bg-raised); border:1px solid rgba(255,255,255,.1); color:var(--text-2); cursor:pointer; width:100%; }
.notif-sub-options { padding:3px 0 3px 20px; font-size:.8rem; color:var(--text-3); }
.settings-actions { display:flex; gap:10px; flex-wrap:wrap; padding-top:10px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.stat-card {
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:14px; display:flex; align-items:center; gap:12px;
}
.stat-card.primary  { border-left:3px solid var(--purple); }
.stat-card.secondary{ border-left:3px solid var(--gold); }
.stat-icon  { font-size:1.5rem; }
.stat-value { font-size:1.3rem; font-weight:800; color:var(--text); }
.stat-label { font-size:.75rem; color:var(--text-3); }
.activity-feed { display:flex; flex-direction:column; gap:6px; }
.activity-placeholder,.achievement-placeholder { text-align:center; padding:18px; color:var(--text-3); font-size:.82rem; }
.achievements-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.achievement-placeholder { grid-column:1/-1; }
.vacation-dates-section { margin-top:10px; }
.info-box { background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:var(--radius); padding:12px 14px; margin-top:10px; }
.info-box.info-box-info { border-left:3px solid var(--purple-2); }
.info-box h5 { font-size:.8rem; color:var(--purple-2); margin-bottom:6px; font-weight:700; }
.info-box ul { padding-left:16px; font-size:.8rem; color:var(--text-2); }
.info-box li { margin-bottom:3px; }
.toggle-group { display:flex; flex-direction:column; gap:6px; }

/* ── Admin ─────────────────────────────────────────────────── */
.login-overlay {
  position:fixed; inset:0; background:rgba(10,10,20,.97);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.admin-login-form {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:36px; width:100%; max-width:360px; box-shadow:var(--shadow);
}
.admin-login-form h2 { font-size:1.2rem; color:var(--gold); margin-bottom:20px; text-align:center; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; margin-bottom:5px; }
.form-group input { width:100%; }
.admin-container {
  max-width:1300px; margin:0 auto; padding:calc(var(--nav-h) + 20px) 20px 40px;
}
.admin-header { text-align:center; margin-bottom:24px; }
.admin-header h1 { font-size:1.3rem; color:var(--gold); }
.admin-header p  { font-size:.82rem; color:var(--text-3); margin-top:4px; }
.tab-navigation {
  display:flex; flex-wrap:wrap; gap:4px;
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius-xl); padding:6px; margin-bottom:20px;
}
.tab-button {
  padding:7px 14px; border-radius:var(--radius); border:1px solid transparent;
  background:transparent; color:var(--text-3); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:var(--t);
}
.tab-button:hover { color:var(--text); background:var(--bg-raised); }
.tab-button.active { background:var(--purple-3); color:var(--purple-2); border-color:rgba(124,58,237,.3); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.admin-section {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:20px; margin-bottom:16px;
}
.admin-section > h3 { font-size:.82rem; font-weight:700; color:var(--text-2); margin-bottom:14px; border-bottom:1px solid var(--border-soft); padding-bottom:10px; }
.admin-section > h4 { font-size:.78rem; font-weight:700; color:var(--text-3); margin:16px 0 10px; text-transform:uppercase; letter-spacing:.5px; }
.config-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.config-item { display:flex; flex-direction:column; gap:4px; }
.config-item label { font-size:.76rem; color:var(--text-3); font-weight:600; }
.config-item small { font-size:.7rem; color:var(--text-3); }
.config-section { margin-bottom:20px; }
.admin-input { width:100%; padding:6px 10px; background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:var(--radius); color:var(--text); font-size:.82rem; }
.admin-input:focus { outline:none; border-color:var(--purple-2); }
.table-container { overflow-x:auto; margin-top:12px; }
.users-table,.level-titles-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.users-table th,.level-titles-table th {
  text-align:left; padding:8px 12px;
  background:var(--bg-raised); color:var(--text-3);
  border-bottom:1px solid var(--border-soft);
  font-size:.7rem; text-transform:uppercase; letter-spacing:.6px;
}
.users-table td,.level-titles-table td {
  padding:10px 12px; border-bottom:1px solid var(--border-soft);
  color:var(--text-2); vertical-align:middle;
}
.users-table tr:hover td,.level-titles-table tr:hover td { background:var(--bg-raised); }
.users-table td input,.level-titles-table td input { padding:4px 8px; font-size:.8rem; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.text-center { text-align:center; }
.mb-8 { margin-bottom:20px; }
.alert-container { position:fixed; top:calc(var(--nav-h) + 10px); right:16px; z-index:800; display:flex; flex-direction:column; gap:6px; max-width:350px; }
.admin-alert { padding:10px 14px; border-radius:var(--radius); font-size:.82rem; font-weight:600; border:1px solid; }
.alert-success { background:var(--green-2); color:var(--green); border-color:rgba(52,211,153,.4); }
.alert-error   { background:var(--red-2);   color:var(--red);   border-color:rgba(248,113,113,.4); }
.alert-info    { background:var(--purple-3); color:var(--purple-2); border-color:rgba(124,58,237,.35); }
.alert-warning { background:var(--gold-2);  color:var(--gold);   border-color:rgba(251,191,36,.4); }
.role-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.role-badge.admin { background:var(--purple-3); color:var(--purple-2); border:1px solid rgba(124,58,237,.3); }
.role-badge.user  { background:var(--bg-raised); color:var(--text-3);  border:1px solid var(--border); }

/* ── Notifications / Toast ─────────────────────────────────── */
.notification-banner {
  position:fixed; bottom:20px; right:20px; z-index:9000;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:13px 16px;
  box-shadow:var(--shadow); min-width:260px; max-width:340px;
  animation:slideIn .3s ease;
}
.notification-banner.success { border-left:4px solid var(--green); }
.notification-banner.error   { border-left:4px solid var(--red);   }
.notification-banner.info    { border-left:4px solid var(--purple-2); }
@keyframes slideIn { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Modals ────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  z-index:5000; display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-content {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:28px; width:100%; max-width:460px; box-shadow:var(--shadow);
}
.modal-content h2 { margin-bottom:16px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

/* Lightbox */
#photo-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:9999; display:none; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; padding:16px; }
#photo-lightbox.active { display:flex; }
#photo-lightbox img { max-width:94vw; max-height:94vh; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
#photo-lightbox-scroll { display:flex; align-items:center; justify-content:center; max-width:90vw; max-height:90vh; overflow:auto; }
#photo-lightbox-close { position:fixed; top:16px; right:20px; background:rgba(0,0,0,.6); color:#fff; border:none; font-size:1.4rem; width:36px; height:36px; border-radius:50%; cursor:pointer; z-index:10000; display:flex; align-items:center; justify-content:center; }
#photo-lightbox-close:hover { background:rgba(255,255,255,.2); }
#photo-lightbox-prev, #photo-lightbox-next { background:rgba(0,0,0,.5); color:#fff; border:none; font-size:2.5rem; width:48px; height:48px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#photo-lightbox-prev:hover, #photo-lightbox-next:hover { background:rgba(255,255,255,.15); }
#photo-lightbox-counter { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); color:#ccc; font-size:.9rem; background:rgba(0,0,0,.5); padding:3px 12px; border-radius:20px; }

/* Camera modal */
#camera-modal {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.85);
  z-index:9998; align-items:center; justify-content:center;
}
#camera-modal.active { display:flex; }
#camera-modal-inner {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  max-width:min(560px,96vw); width:100%;
  box-shadow:var(--shadow);
}
#camera-preview {
  width:100%; max-height:60vh; object-fit:cover; display:block;
  background:#000;
}
#camera-canvas { display:none; }
#camera-controls {
  display:flex; gap:10px; padding:14px 16px; width:100%;
  justify-content:center; background:var(--bg-raised);
  border-top:1px solid var(--border-soft);
}

/* Misc */
.hidden   { display:none!important; }
.text-muted { color:var(--text-3); }
.spinner {
  width:28px; height:28px; border:3px solid var(--border);
  border-top-color:var(--purple); border-radius:50%;
  animation:spin .7s linear infinite; margin:20px auto; display:block;
}

/* ── Recap ─────────────────────────────────────────────────── */
.recap-page {
  display:grid; grid-template-columns:240px 1fr; gap:var(--gap);
  max-width:1200px; margin:0 auto; padding:calc(var(--nav-h) + 20px) 20px 40px;
}
.recap-sidebar {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:16px; height:fit-content;
}
.recap-sidebar h3 { font-size:.72rem; text-transform:uppercase; letter-spacing:.9px; color:var(--text-3); margin-bottom:12px; font-weight:700; }
.recap-main { display:flex; flex-direction:column; gap:14px; }
.recap-loading,.recap-empty,.recap-empty-state { text-align:center; padding:40px; color:var(--text-3); }
.recap-empty-icon { font-size:3rem; margin-bottom:12px; }
.recap-spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--purple); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto; }
.recap-history-list { display:flex; flex-direction:column; gap:5px; }

/* ── Activity feed overflow ──────────────────────────────── */
.activity-item { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-soft); min-width:0; }
.activity-item:last-child { border-bottom:none; }
.activity-icon { font-size:1.1rem; flex-shrink:0; line-height:1.6; }
.activity-content { min-width:0; flex:1; overflow:hidden; }
.activity-content p { font-size:.83rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:100%; }
.activity-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:3px; }
.activity-meta span { font-size:.72rem; color:var(--text-3); }
.activity-time { font-size:.7rem; color:var(--text-3); margin-top:2px; }

/* ── Archive month groups ──────────────────────────────────── */
.archive-month-group { border:1px solid var(--border-soft); border-radius:var(--radius-lg); margin-bottom:8px; overflow:hidden; }
.archive-month-group[open] .archive-month-header { border-bottom:1px solid var(--border-soft); }
.archive-month-header { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; background:var(--bg-raised); cursor:pointer; user-select:none; list-style:none; font-size:.8rem; }
.archive-month-header::-webkit-details-marker { display:none; }
.archive-month-header:hover { background:var(--bg-hover); }
.archive-month-title { font-weight:700; color:var(--text-2); }
.archive-month-count { background:var(--purple-3); color:var(--purple-2); padding:2px 8px; border-radius:10px; font-size:.72rem; font-weight:700; }
.archive-month-tasks { display:flex; flex-direction:column; gap:4px; padding:8px; }

/* ── Reward cards improved ──────────────────────────────────── */
.reward-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:12px; margin-bottom:8px; transition:var(--t); }
.reward-card.available { border-color:rgba(124,58,237,.4); background:rgba(124,58,237,.06); }
.reward-card.claimed { opacity:.65; border-color:var(--border-soft); background:var(--bg-raised); }
.reward-card.locked { opacity:.52; }
.reward-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.reward-icon { font-size:1.1rem; flex-shrink:0; }
.reward-name { font-weight:700; font-size:.88rem; flex:1; }
.reward-name.strikethrough { text-decoration:line-through; color:var(--text-3); }
.reward-badge { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:10px; }
.claimed-badge { background:var(--green-2); color:var(--green); }
.available-badge { background:var(--purple-3); color:var(--purple-2); }
.locked-badge { background:var(--bg-raised); color:var(--text-3); border:1px solid var(--border); }
.reward-description { font-size:.78rem; color:var(--text-3); margin-bottom:6px; }
.reward-level-req { font-size:.7rem; color:var(--text-3); margin-bottom:8px; }
.reward-lock-info { font-size:.75rem; color:var(--text-3); font-style:italic; padding:4px 0; }

/* ── Recurring carousel ─────────────────────────────────────── */
.recurring-carousel-wrap { overflow:hidden; width:100%; }
.carousel-track { display:flex; transition:transform .3s ease; will-change:transform; }
.recurring-tasks-box ul.carousel-track { flex-direction:row; gap:0; margin-top:0; padding:0; }
.carousel-track .recurring-task-item { flex-shrink:0; border-bottom:none; padding-bottom:0; margin-bottom:0; box-sizing:border-box; overflow:hidden; }
.carousel-nav { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border-soft); }
.carousel-prev,.carousel-next { background:var(--bg-raised); border:1px solid var(--border); color:var(--text-2); width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:.85rem; display:flex; align-items:center; justify-content:center; transition:var(--t); flex-shrink:0; }
.carousel-prev:hover,.carousel-next:hover { border-color:var(--purple-2); color:var(--purple-2); }
.carousel-dots { display:flex; gap:5px; align-items:center; }
.carousel-dot { width:6px; height:6px; border-radius:50%; background:var(--border); cursor:pointer; transition:var(--t); }
.carousel-dot.active { background:var(--purple-2); width:16px; border-radius:3px; }
.carousel-counter { font-size:.72rem; color:var(--text-3); min-width:32px; text-align:center; }

/* ── Infocenter always-visible header ──────────────────────── */
.infocenter-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.9px; color:var(--text-3); margin-bottom:12px; font-weight:700; }

/* ── Profile avatar ─────────────────────────────────────────── */
.avatar-wrapper { position:relative; display:inline-block; }
.avatar-upload-overlay { position:absolute; inset:0; border-radius:18px; background:rgba(0,0,0,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; cursor:pointer; font-size:.65rem; color:#fff; font-weight:700; text-align:center; gap:3px; }
.avatar-wrapper:hover .avatar-upload-overlay { opacity:1; }
.avatar-circle img { width:100%; height:100%; object-fit:cover; border-radius:18px; display:block; }
.avatar-upload-input { display:none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:1100px) {
  .main-layout { grid-template-columns:var(--sidebar-w) 1fr; }
  .right-col { display:none; }
}

/* ── Mobile-only elements (hidden on desktop) ────────────────── */
.mobile-tab-bar,
.mobile-fab,
.mobile-sheet-overlay,
.mobile-scoreboard-sheet,
.mobile-sheet-drag-handle,
.add-task-header .mobile-sheet-close-btn { display:none; }

/* ── Bottom nav (hidden on desktop) ─────────────────────────── */
.mobile-bottom-nav { display:none; }
.mobile-realm-bar  { display:none; }

/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤ 780px
   ══════════════════════════════════════════════════════════════ */
@media (max-width:780px) {
  :root { --mobile-tab-h: 44px; --mobile-nav-h: 58px; }
  /* Accent fallback in case theme hasn't loaded yet */
  :root { --accent: var(--purple, #7c3aed); }

  /* ── Layout ── */
  .main-layout {
    display: flex; flex-direction: column;
    padding: calc(var(--nav-h) + var(--mobile-tab-h) + 12px) 12px calc(var(--mobile-nav-h) + 20px);
    gap: 12px;
  }
  /* Columns: tasks shown by default, left-col (scoreboard/recurring) hidden */
  .center-col { display: flex; flex-direction: column; gap: 12px; }
  .left-col   { display: none; }
  .right-col  { display: none; }

  /* ── Tab: Wiederkehrend ── */
  .main-layout.tab-recurring .center-col   { display: none; }
  .main-layout.tab-recurring .left-col     { display: flex; flex-direction: column; gap: 12px; }
  .main-layout.tab-recurring #scoreboard-box    { display: none; }
  .main-layout.tab-recurring #personal-notes-box { display: none; }

  /* ── Tab: Notizen ── */
  .main-layout.tab-notes .center-col       { display: none; }
  .main-layout.tab-notes .left-col         { display: flex; flex-direction: column; gap: 12px; }
  .main-layout.tab-notes #scoreboard-box        { display: none; }
  .main-layout.tab-notes #recurring-tasks-box   { display: none; }

  /* ── Mobile realm bar ── */
  .mobile-realm-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-soft);
    font-size: .78rem; color: var(--text-3);
  }

  /* ── Navbar ── */
  .nav-content { padding: 0 12px; }
  .player-info-compact { display: none; }
  .navbar-actions .btn-outline:not(#logout-btn):not(#realm-badge) { display: none; }
  .navbar-actions { gap: 6px; }

  /* ── Mobile tab bar ── */
  .mobile-tab-bar {
    display: flex;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    height: var(--mobile-tab-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-soft);
    z-index: 850;
  }
  .mobile-tab {
    flex: 1;
    padding: 0 4px;
    font-size: .76rem; font-weight: 600;
    color: var(--text-3);
    background: none; border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
  }
  .mobile-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* ── Bottom navigation ── */
  .mobile-bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--mobile-nav-h);
    background: rgba(13,12,27,.97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-soft);
    z-index: 910;
    align-items: stretch; justify-content: space-around;
  }
  .mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-3); font-size: .62rem; font-weight: 600; gap: 2px;
    padding: 6px 8px; text-decoration: none; flex: 1;
    transition: color .15s;
  }
  .mobile-nav-item.active,
  .mobile-nav-item:hover { color: var(--accent); }
  .mobile-nav-icon { font-size: 1.2rem; line-height: 1; }

  /* ── FAB ── */
  .mobile-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed;
    bottom: calc(var(--mobile-nav-h) + 14px);
    right: 16px;
    width: 52px; height: 52px;
    background: var(--purple); color: #fff;
    font-size: 1.7rem; font-weight: 300;
    border: none; border-radius: 50%;
    cursor: pointer;
    z-index: 920;
    box-shadow: 0 4px 16px rgba(124,58,237,.55);
    transition: transform .2s, background .2s;
  }
  .mobile-fab.active { transform: rotate(45deg); background: var(--text-3); }
  .mobile-fab:active { transform: scale(.93) rotate(0); }

  /* ── Sheet overlay ── */
  .mobile-sheet-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 930;
    backdrop-filter: blur(2px);
  }
  .mobile-sheet-overlay.active { display: block; }

  /* ── Add-task as bottom sheet ── */
  #add-task-box {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 940;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(var(--mobile-nav-h) + 12px);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  #add-task-box.sheet-open { transform: translateY(0); }

  .mobile-sheet-drag-handle {
    display: block;
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  .add-task-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 8px;
  }
  .add-task-header h2 { margin: 0; }
  .mobile-sheet-close-btn {
    background: none; border: none;
    color: var(--text-3); font-size: 1.2rem;
    cursor: pointer; padding: 4px 8px;
    border-radius: var(--radius);
    line-height: 1;
  }
  .mobile-sheet-close-btn:hover { color: var(--text); background: var(--bg-hover); }

  /* ── Scoreboard bottom sheet ── */
  .mobile-scoreboard-sheet {
    display: flex; flex-direction: column;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 940;
    max-height: 80vh;
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .mobile-scoreboard-sheet.open { transform: translateY(0); }
  .mobile-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700; font-size: .95rem;
    position: sticky; top: 0;
    background: var(--bg-card);
    flex-shrink: 0;
  }
  .mobile-scoreboard-content { overflow-y: auto; padding: 12px 14px calc(var(--mobile-nav-h) + 8px); }

  /* ── Cards ── */
  .card, .add-task-box, .exp-rewards-box, .scoreboard-box { padding: 12px; }
  .profile-container, .recap-page { grid-template-columns: 1fr; }

  /* ── Add task form ── */
  .add-task-row { flex-wrap: wrap; gap: 4px; }
  .scale { gap: 3px; }
  .scale-btn { padding: 8px 2px; font-size: .75rem; }
  .due-date-input-spaced { max-width: 100%; width: 100%; }

  /* ── Filter bar ── */
  .filter-bar { gap: 4px; padding: 8px 10px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .filter-btn { white-space: nowrap; }

  /* ── Task cards ── */
  .task-card { padding: 10px 11px 10px 13px; }
  .task-title, .task-title-input { font-size: .9rem; }
  .task-select-row { gap: 6px; }
  .task-action-row { flex-wrap: wrap; gap: 5px; }
  .task-time-row { flex-wrap: wrap; gap: 5px; }
  .task-sort-bar { flex-wrap: wrap; gap: 6px; }

  /* ── Buttons ── */
  .btn { padding: 6px 10px; font-size: .78rem; }
  .btn-sm { padding: 4px 8px; font-size: .74rem; }
  #logout-btn { padding: 5px 9px; }

  /* ── Profile ── */
  .profile-main { gap: 10px; }
  .profile-container { padding: calc(var(--nav-h) + 12px) 12px calc(var(--mobile-nav-h) + 16px); }
  .profile-header-card { flex-wrap: wrap; }
  .recap-page { padding: calc(var(--nav-h) + 12px) 12px calc(var(--mobile-nav-h) + 16px); }
}

@media (max-width:480px) {
  .main-layout { padding: calc(var(--nav-h) + var(--mobile-tab-h) + 8px) 8px calc(var(--mobile-nav-h) + 16px); gap: 10px; }
  .nav-content { padding: 0 8px; }
  .task-card { padding: 9px 9px 9px 11px; }
  .scale-btn { font-size: .7rem; padding: 7px 1px; }
  .btn { font-size: .75rem; padding: 5px 9px; }
  .filter-btn { font-size: .72rem; padding: 3px 8px; }
  #scroll-top-btn {
    bottom: calc(var(--mobile-nav-h) + 14px);
    left: 16px; right: auto;
    width: 36px; height: 36px; font-size: .9rem;
  }
  .brand-name { display: none; }
}


/* ── Scroll to top ──────────────────────────────────────────── */
#scroll-top-btn {
  position:fixed; bottom:24px; right:24px;
  width:40px; height:40px; border-radius:50%;
  background:var(--accent,var(--purple,#7c3aed)); color:#fff;
  border:none; font-size:1.1rem; font-weight:700;
  cursor:pointer; z-index:845;
  opacity:0; pointer-events:none;
  transform:translateY(12px);
  transition:opacity .2s,transform .2s;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; line-height:1;
}
#scroll-top-btn.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
#scroll-top-btn:hover { filter:brightness(1.15); }

/* ── Task-approval toast ─────────────────────────────────────── */
.task-approval-toast {
  position:fixed; top:calc(var(--nav-h) + 4px); right:20px; z-index:10000;
  background:var(--bg-card); border:1px solid var(--green);
  border-left:4px solid var(--green);
  border-radius:var(--radius-lg); padding:14px 16px;
  box-shadow:var(--shadow); max-width:360px; width:calc(100vw - 40px);
  transform:translateX(120%);
  transition:transform .3s ease;
}
.task-approval-toast.visible { transform:translateX(0); }
.task-approval-toast .toast-header {
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px; font-weight:700; font-size:.9rem;
}
.task-approval-toast .toast-icon { font-size:1.1rem; flex-shrink:0; }
.task-approval-toast .toast-title {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:.85rem;
}
.task-approval-toast .toast-close {
  background:none; border:none; color:var(--text-3); font-size:1.2rem;
  cursor:pointer; padding:0 2px; line-height:1; flex-shrink:0;
}
.task-approval-toast .toast-close:hover { color:var(--text); }
.task-approval-toast .toast-content { font-size:.82rem; }
.task-approval-toast .toast-details {
  margin-top:6px; font-size:.78rem; opacity:.85;
  display:flex; flex-direction:column; gap:3px;
}

/* Realm modal body min-height for tab consistency */
#realms-modal-body { min-height:260px; max-height:420px; overflow-y:auto; }
#realms-modal,
#assign-task-modal {
  display: none;
}
#realms-modal.visible,
#assign-task-modal.visible {
  display: flex;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.modal-header h2 { margin: 0; font-size: 1.15rem; }
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.modal-close-btn:hover { color: var(--text); background: var(--bg-hover); }

/* ══════════════════════════════════════════════════════════════════
   REALMS UI
   ══════════════════════════════════════════════════════════════════ */

/* Navbar realm badge */
#realm-badge, #realm-badge-mobile {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  color: var(--text);
  font-size: .78rem;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
  user-select: none;
}
#realm-badge:hover, #realm-badge-mobile:hover { background: var(--bg-hover); color: var(--text); }
#realm-badge.active-realm, #realm-badge-mobile.active-realm {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
  color: var(--text);
}

/* Realms modal */
.realms-modal-box {
  max-width: 520px;
  width: 94vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px 28px;
}

.realms-tabs {
  display: flex;
  gap: 6px;
  margin: 14px 0 16px;
}
.realm-tab {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: var(--bg-card);
  color: var(--text-2);
  border-radius: 8px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.realm-tab.active, .realm-tab:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Realm cards */
.realm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: var(--bg-card);
  margin-bottom: 8px;
  transition: border-color .18s, background .18s;
}
.realm-card.realm-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
}
.realm-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.realm-icon { font-size: 1.5rem; flex-shrink: 0; }
.realm-icon-lg { font-size: 2.4rem; flex-shrink: 0; }
.realm-info strong { display: block; font-size: .9rem; }
.realm-info small { color: var(--text-3); font-size: .75rem; }
.realm-card-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Details panel */
.realm-details-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 16px;
}
.realm-details-header h3 { margin: 0 0 4px; font-size: 1.1rem; }
.realm-details-header p { margin: 0; color: var(--text-3); font-size: .82rem; }
.realms-back-btn { margin-bottom: 8px; }

.realm-invite-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: .85rem;
}

/* Leaderboard */
.realm-leaderboard {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.realm-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
  font-size: .85rem;
}
.realm-lb-row:last-child { border-bottom: none; }
.lb-rank { width: 2rem; font-weight: 700; color: var(--text-3); }
.lb-name { flex: 1; font-weight: 600; }
.lb-exp { color: var(--accent); font-size: .8rem; font-weight: 700; }
.lb-crown { font-size: .85rem; }

/* Create/Join forms */
.realms-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.realms-form label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: -4px;
}
.realms-form input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
}
.form-msg { font-size: .82rem; min-height: 1.1em; }
.realms-empty { color: var(--text-3); font-size: .85rem; text-align: center; padding: 18px 0; }

/* Task realm badge on cards */
.task-realm-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-card));
  border: 1px solid var(--accent);
  color: var(--accent);
  vertical-align: middle;
}

/* Task assignment badge on cards */
.task-assignment-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  background: color-mix(in srgb, #ff9800 18%, var(--bg-card));
  border: 1px solid #ff9800;
  color: #ff9800;
  vertical-align: middle;
}

/* Incoming assignments panel */
.assignments-panel {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  padding: 14px 16px;
  margin-bottom: 16px;
}
.assignments-panel h3 {
  margin: 0 0 10px; font-size: .9rem;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .7px;
}
.assignment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
}
.assignment-row:last-child { border-bottom: none; }
.assignment-row .task-name { font-weight: 600; flex: 1; font-size: .88rem; }
.assignment-row .assignment-from { color: var(--text-3); font-size: .78rem; }
.assignment-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Footer ─────────────────────────────────────────────────── */
.app-footer {
  text-align: center;
  padding: 18px 20px;
  font-size: .75rem;
  color: var(--text-3);
  border-top: 1px solid var(--border-soft);
  margin-top: 40px;
}
.app-footer a {
  color: var(--purple-2);
  text-decoration: none;
}
.app-footer a:hover { text-decoration: underline; }