:root{
  --bg:#0e0c10;
  --bg2:#16131a;
  --panel:#1c1822;
  --panel2:#221d2a;
  --ink:#f4eee9;
  --muted:#9a8fa6;
  --faint:#6a6172;
  --line:#2e2836;
  --accent:#ff5a3c;      /* circus red-orange */
  --accent2:#ffb33c;     /* gold */
  --accent3:#3cc6c2;     /* teal */
  --done:#4ddb9e;
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Outfit',sans-serif;
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,90,60,.10), transparent 40%),
    radial-gradient(circle at 88% 4%, rgba(60,198,194,.08), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(255,179,60,.06), transparent 50%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 24px 120px}

/* ---- HERO ---- */
header.hero{
  position:relative;
  margin:0 -24px 48px;
  padding:0 24px;
}
.banner{
  height:230px;margin:0 -24px;
  background:
    linear-gradient(120deg,#3cc6c2 0%, #f2a3a3 38%, #ff5a3c 64%, #ffb33c 100%);
  position:relative;overflow:hidden;
}
.banner::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 28px,transparent 28px 56px);
  mix-blend-mode:overlay;
}
.tent{
  position:absolute;left:24px;bottom:-34px;font-size:64px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));
  animation:bob 4s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
h1.title{
  font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(2.6rem,7vw,5rem);
  letter-spacing:-.02em;line-height:.95;
  margin:54px 0 10px;
}
h1.title em{font-style:italic;color:var(--accent2)}
.subtitle{color:var(--muted);font-size:1.05rem;max-width:620px;font-weight:300}

/* ---- STATS DASH ---- */
.dash{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;margin:36px 0 8px;
}
.stat{
  background:linear-gradient(160deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  position:relative;overflow:hidden;
}
.stat .num{font-family:'Fraunces',serif;font-weight:700;font-size:2.4rem;line-height:1}
.stat .lbl{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;margin-top:8px}
.stat.accent .num{color:var(--accent)}
.stat.gold .num{color:var(--accent2)}
.stat.teal .num{color:var(--accent3)}
.stat.green .num{color:var(--done)}

.bigbar{margin:26px 0 4px}
.bigbar .track{position:relative;height:14px;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.bigbar .fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:20px;
  background:linear-gradient(90deg,var(--done),#3cc6c2);
  transition:width 1s cubic-bezier(.2,.8,.2,1);z-index:2}
.bigbar .prog{position:absolute;top:0;height:100%;left:0;width:0;
  background:repeating-linear-gradient(45deg,var(--accent2) 0 8px,#e69b1f 8px 16px);
  opacity:.85;transition:left .8s,width .8s;z-index:1}
.bigbar .cap{display:flex;justify-content:space-between;margin-top:8px;font-size:.82rem;color:var(--muted);font-family:'Space Mono',monospace}

/* ---- CONTROLS ---- */
.controls{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  margin:34px 0 28px;position:sticky;top:0;z-index:20;
  padding:14px 0;background:linear-gradient(var(--bg),var(--bg) 70%,transparent);
}
.search{
  flex:1;min-width:220px;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 16px;
}
.search input{background:none;border:none;color:var(--ink);font-family:'Outfit';font-size:.95rem;width:100%;outline:none}
.search input::placeholder{color:var(--faint)}
.search svg{stroke:var(--muted);flex-shrink:0}
.btn{
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:11px 16px;border-radius:14px;cursor:pointer;font-family:'Outfit';
  font-size:.88rem;font-weight:500;transition:.2s;white-space:nowrap;
}
.btn:hover{color:var(--ink);border-color:var(--faint)}
.btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost:hover{background:var(--panel2)}

/* ---- SECTIONS ---- */
.section{
  background:linear-gradient(165deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:20px;
  margin-bottom:18px;overflow:hidden;
  box-shadow:var(--shadow);
}
.sec-head{
  display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;
  user-select:none;transition:background .2s;
}
.sec-head:hover{background:var(--panel2)}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--accent)}
.sec-title{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem;flex:1;letter-spacing:-.01em;
}
.sec-meta{display:flex;align-items:center;gap:14px}
.minibar{position:relative;width:90px;height:7px;background:var(--bg);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.minibar b{position:absolute;left:0;top:0;display:block;height:100%;background:linear-gradient(90deg,var(--done),#3cc6c2);border-radius:10px;transition:width .6s;z-index:2}
.minibar i{position:absolute;left:0;top:0;display:block;height:100%;background:var(--accent2);opacity:.5;border-radius:10px;transition:width .6s;z-index:1}
.sec-count{font-family:'Space Mono',monospace;font-size:.8rem;color:var(--muted);min-width:54px;text-align:right}
.chev{transition:transform .3s;color:var(--muted)}
.section.collapsed .chev{transform:rotate(-90deg)}
.section.collapsed .sec-body{display:none}
.sec-body{padding:4px 20px 16px}

/* ---- SUB-TOPICS (within a module) ---- */
.topic{
  border:1px solid var(--line);border-radius:14px;margin:10px 0;
  background:rgba(0,0,0,.14);overflow:hidden;
}
.topic-head{
  display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;
  user-select:none;transition:background .15s;
}
.topic-head:hover{background:var(--panel2)}
.topic-title{
  flex:1;font-family:'Outfit';font-weight:600;font-size:.92rem;
  letter-spacing:.02em;color:var(--ink);
}
.topic-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s;flex-shrink:0}
.topic-head:hover .topic-actions{opacity:1}
.sec-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s;flex-shrink:0}
.sec-head:hover .sec-actions{opacity:1}
.drag-grip{cursor:grab;color:var(--faint);opacity:0;transition:opacity .15s;font-size:1rem;line-height:1;flex-shrink:0;user-select:none}
.sec-head:hover .drag-grip,.topic-head:hover .drag-grip,.item:hover .drag-grip{opacity:.65}
.drag-grip:hover{color:var(--ink)}
.drag-grip:active{cursor:grabbing}
.item .drag-grip{font-size:.85rem;align-self:center;margin-left:-4px}
.section.dragging,.topic.dragging,.item.dragging{opacity:.4}
.section.dragging>.sec-head,.topic.dragging>.topic-head,.item.dragging{cursor:grabbing}
.topic-body.drop-target{outline:2px dashed var(--accent3);outline-offset:-4px;border-radius:12px;background:rgba(60,198,194,.06)}
.topic-meta{display:flex;align-items:center;gap:10px}
.minibar.sm{width:60px;height:6px}
.topic-count{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted);min-width:42px;text-align:right}
.chev.sm{transition:transform .3s;color:var(--faint)}
.topic.collapsed .chev.sm{transform:rotate(-90deg)}
.topic.collapsed .topic-body{display:none}
.topic-body{padding:2px 8px 10px}
.add-topic{
  margin:12px 2px 2px;font-size:.82rem;color:var(--faint);width:auto;
  background:transparent;border:1px dashed var(--line);
}
.add-topic:hover{color:var(--accent2);border-color:var(--accent2);background:var(--panel2)}

/* ---- ITEMS ---- */
.grp{margin:6px 0}
.grp-label{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent3);
  font-weight:600;padding:14px 12px 6px;font-family:'Outfit';
}
.item{
  display:flex;align-items:flex-start;gap:13px;padding:10px 12px;border-radius:11px;
  transition:background .15s;position:relative;
}
.item:hover{background:var(--panel2)}
.item.sub{margin-left:26px}
.itxt{font-size:.97rem;color:var(--ink);font-weight:400;flex:1;word-break:break-word}
.cbox{
  position:relative;width:20px;height:20px;border:2px solid var(--faint);border-radius:6px;flex-shrink:0;
  cursor:pointer;margin-top:1px;transition:.2s;display:grid;place-items:center;
  background:transparent;
}
.cbox:hover{border-color:var(--accent2)}
.cbox:focus-visible{outline:2px solid var(--accent3);outline-offset:2px}
.cbox svg.ic-check{opacity:0;transform:scale(.5);transition:.2s;stroke:#0e0c10}
.cbox .ic-prog{position:absolute;width:8px;height:8px;border-radius:2px;background:#0e0c10;opacity:0;transform:rotate(0);transition:.2s}

/* DONE */
.item.st-done .cbox{background:var(--done);border-color:var(--done)}
.item.st-done .cbox svg.ic-check{opacity:1;transform:scale(1)}
.item.st-done .itxt{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--done)}

/* IN PROGRESS */
.item.st-prog .cbox{background:var(--accent2);border-color:var(--accent2)}
.item.st-prog .cbox .ic-prog{opacity:1;width:9px;height:9px;border-radius:50%;
  background:conic-gradient(#0e0c10 0 50%, transparent 50% 100%)}
.item.st-prog .itxt{color:var(--ink)}
.item.st-prog .itxt::after{
  content:"in progress";margin-left:8px;font-size:.62rem;text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;color:var(--accent2);
  background:rgba(255,179,60,.14);padding:2px 8px;border-radius:20px;vertical-align:middle;
}
.itxt a{color:var(--accent3);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.itxt a:hover{border-bottom-color:var(--accent3)}
.stars{color:var(--accent2);font-size:.8rem;letter-spacing:1px;margin-left:6px}
.badge{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle;font-family:'Outfit';
}
.badge.udemy{background:rgba(255,179,60,.16);color:var(--accent2)}
.badge.prog{background:rgba(60,198,194,.16);color:var(--accent3)}
.hidden{display:none!important}

footer{text-align:center;color:var(--faint);margin-top:60px;font-size:.82rem;font-family:'Space Mono',monospace}
footer .reset{color:var(--accent);cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit}
footer .reset:hover{text-decoration:underline}

/* ---- ROW ACTIONS ---- */
.row-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s;flex-shrink:0;align-self:center}
.item:hover .row-actions{opacity:1}
.mini-btn{
  background:var(--bg);border:1px solid var(--line);color:var(--muted);
  width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:.8rem;
  display:grid;place-items:center;transition:.15s;font-family:'Outfit';
}
.mini-btn:hover{color:var(--ink);border-color:var(--faint)}
.mini-btn.del:hover{color:var(--accent);border-color:var(--accent)}
.add-here{
  margin:8px 12px 4px;font-size:.82rem;color:var(--faint);width:auto;
  background:transparent;border:1px dashed var(--line);
}
.add-here:hover{color:var(--accent3);border-color:var(--accent3);background:var(--panel2)}
.btn.add-global{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.add-global:hover{filter:brightness(1.08);color:#fff}

/* ---- MODAL ---- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(8,6,10,.72);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:24px;
}
.modal.open{display:flex;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
  width:100%;max-width:460px;background:linear-gradient(165deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow);
  animation:pop .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{transform:scale(.94) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal-card h3{font-family:'Fraunces',serif;font-weight:700;font-size:1.5rem;margin-bottom:18px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.fld span em{text-transform:none;letter-spacing:0;color:var(--faint);font-style:normal}
.fld select,.fld input,.fld-input{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;color:var(--ink);font-family:'Outfit';font-size:.95rem;outline:none;transition:.15s;
}
.fld select:focus,.fld input:focus,.fld-input:focus{border-color:var(--accent2)}
.fld-input{margin:-6px 0 14px}
.fld-row{display:flex;gap:14px}
.fld-row .fld{flex:1}
.modal-actions{display:flex;align-items:center;gap:10px;margin-top:22px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
#m-delete,#tm-delete{color:var(--accent);border-color:transparent}
#m-delete:hover,#tm-delete:hover{border-color:var(--accent)}
.btn.danger{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger:hover{filter:brightness(1.08);border-color:var(--accent);color:#fff}

/* ---- AUTH ---- */
.auth-note{color:var(--muted);font-size:.92rem;line-height:1.55;margin:2px 0 6px}
.auth-note code{font-family:'Space Mono',monospace;font-size:.84em;color:var(--accent2);background:var(--bg);padding:1px 6px;border-radius:6px}
.google-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:#1f1f1f;border:1px solid var(--line);font-weight:600;font-size:.95rem;
  padding:12px 16px;margin-top:8px;border-radius:12px;
}
.google-btn:hover{filter:brightness(.97);color:#1f1f1f;border-color:#fff}
.google-btn svg{flex-shrink:0}
#auth-signout{color:var(--accent);border-color:transparent}
#auth-signout:hover{border-color:var(--accent)}

/* ---- AUTH GATE ---- */
/* No-flash: gated module pages hide their body until the session check resolves.
   Set via an inline <script> in <head>; auth.js removes it (or redirects). */
html.lt-checking body{visibility:hidden}

/* Home: account bar (signed in only) */
.acctbar{
  display:none;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:0 auto 30px;padding:10px 10px 10px 18px;max-width:520px;
  background:linear-gradient(160deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:16px;
  font-family:'Outfit';font-size:.9rem;color:var(--muted);
}
body.signed-in .acctbar{display:flex}
.acctbar strong{color:var(--ink);font-weight:600}
.acctbar .btn{padding:8px 14px;color:var(--accent);border-color:transparent}
.acctbar .btn:hover{border-color:var(--accent);color:var(--accent)}

/* Home: locked track cards (while checking, and when signed out) */
body.auth-unknown .track-card,
body.signed-out .track-card{pointer-events:none;filter:grayscale(.45);opacity:.78}
body.auth-unknown .track-card .track-cta,
body.signed-out .track-card .track-cta{visibility:hidden}
.card-lock{
  display:none;position:absolute;inset:0;z-index:3;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(14,12,16,.55);backdrop-filter:blur(1.5px);
  font-family:'Outfit';font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--ink);
}
.card-lock .lk{font-size:1.7rem;line-height:1}
body.auth-unknown .card-lock,
body.signed-out .card-lock{display:flex}

/* Home: sign-in panel (signed out only) */
.signin-panel{
  display:none;max-width:460px;margin:6px auto 0;text-align:center;
  background:linear-gradient(165deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:22px;padding:26px 28px;box-shadow:var(--shadow);
}
body.signed-out .signin-panel{display:block}
.signin-title{font-family:'Fraunces',serif;font-weight:700;font-size:1.35rem;margin-bottom:8px}
.signin-sub{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 auto 4px;max-width:380px}
.signin-sub code,.signin-note code{font-family:'Space Mono',monospace;font-size:.84em;color:var(--accent2);background:var(--bg);padding:1px 6px;border-radius:6px}
.signin-panel .google-btn{max-width:320px;margin-left:auto;margin-right:auto;margin-top:16px}
.signin-note{color:var(--faint);font-size:.82rem;line-height:1.5;margin-top:12px;min-height:1em;font-family:'Space Mono',monospace}

/* Module page header: back-link on the left, account chip on the right */
.toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0 2px}
.toprow .backlink{margin:0}
.lt-account{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:'Outfit';font-size:.82rem;color:var(--muted)}
.lt-account[hidden]{display:none}
.lt-acct-who strong{color:var(--ink);font-weight:600}
.lt-acct-out{
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  font-family:'Outfit';font-weight:500;font-size:.8rem;padding:6px 13px;border-radius:20px;cursor:pointer;transition:.15s;
}
.lt-acct-out:hover{color:var(--accent);border-color:var(--accent)}
.lt-acct-out:focus-visible{outline:2px solid var(--accent3);outline-offset:2px}

/* ---- DUE DATES + NOTES ---- */
.due{display:inline-flex;align-items:center;gap:4px;font-family:'Space Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:20px;margin-left:8px;vertical-align:middle;background:rgba(154,143,166,.14);color:var(--muted);white-space:nowrap}
.due svg{opacity:.85}
.due.soon{color:var(--accent2);background:rgba(255,179,60,.15)}
.due.overdue{color:#ff8068;background:rgba(255,90,60,.17)}
.due.done{color:var(--faint);background:rgba(154,143,166,.10)}
.item.st-done .due,.item.st-done .inote{text-decoration:none}
.inote{margin-top:6px;font-size:.84rem;color:var(--muted);line-height:1.45;white-space:pre-wrap;border-left:2px solid var(--line);padding-left:10px}
.fld textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;color:var(--ink);font-family:'Outfit';font-size:.95rem;outline:none;transition:.15s;resize:vertical;min-height:64px;
}
.fld textarea:focus{border-color:var(--accent2)}
.fld input[type=date]{color-scheme:dark}

/* ---- INSIGHTS MODAL ---- */
.insights-card{max-width:680px;max-height:86vh;overflow:auto}
.ins-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:6px}
.ins-stat{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ins-num{font-family:'Fraunces',serif;font-weight:700;font-size:1.6rem;line-height:1;color:var(--accent3)}
.ins-lbl{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-top:7px}
.ins-section{margin-top:20px}
.ins-label{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.hm-grid{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px}
.hm-col{display:flex;flex-direction:column;gap:3px}
.hm{width:13px;height:13px;border-radius:3px;background:var(--line);flex-shrink:0}
.hm.lvl0{background:rgba(255,255,255,.05)}
.hm.lvl1{background:rgba(60,198,194,.32)}
.hm.lvl2{background:rgba(60,198,194,.58)}
.hm.lvl3{background:rgba(77,219,158,.82)}
.hm.lvl4{background:var(--done)}
.hm.fut{background:transparent}
.hm-legend{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:10px;font-family:'Space Mono',monospace;font-size:.7rem;color:var(--faint)}
.hm-legend .hm{width:11px;height:11px}
.mbar{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:.82rem}
.mbar-t{width:40%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.mbar-track{flex:1;height:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mbar-track b{display:block;height:100%;border-radius:10px;transition:width .6s}
.mbar-n{font-family:'Space Mono',monospace;font-size:.74rem;color:var(--muted);min-width:46px;text-align:right}

/* ---- TAGS + PRIORITY ---- */
.checkline{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink);cursor:pointer;margin-bottom:6px}
.checkline input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.tagbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.tagchip{background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:'Outfit';font-size:.78rem;font-weight:500;padding:6px 12px;border-radius:20px;cursor:pointer;transition:.15s}
.tagchip:hover{color:var(--ink);border-color:var(--faint)}
.tagchip.active{background:var(--accent3);border-color:var(--accent3);color:#08201f}
.tagchip.prio.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tagchip.clear{color:var(--faint);border-style:dashed}
.tagchip.clear:hover{color:var(--accent);border-color:var(--accent)}
.itags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.itag{font-family:'Space Mono',monospace;font-size:.68rem;color:var(--accent3);background:rgba(60,198,194,.12);padding:2px 8px;border-radius:20px}
.prio-flag{color:var(--accent);margin-right:6px;font-size:.9rem}
.item.st-done .prio-flag,.item.st-done .itag{opacity:.55}

/* ---- GOALS + GAMIFICATION ---- */
.goal-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.goal-bar{flex:1;height:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.goal-bar b{display:block;height:100%;background:linear-gradient(90deg,var(--done),#3cc6c2);border-radius:10px;transition:width .6s}
.goal-num{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--muted);white-space:nowrap}
.goal-num input{width:44px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:'Space Mono',monospace;font-size:.78rem;padding:3px 6px;text-align:center;color-scheme:dark}
.lvl-bar{height:6px;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:4px}
.lvl-bar b{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--accent2) 0 8px,#e69b1f 8px 16px);border-radius:10px;transition:width .6s}
.lvl-cap{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--faint);margin-top:6px}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center;opacity:.5;filter:grayscale(.6);transition:.2s}
.badge-card.got{opacity:1;filter:none;border-color:var(--accent2)}
.badge-ic{font-size:1.7rem;line-height:1}
.badge-nm{font-family:'Outfit';font-weight:600;font-size:.82rem;margin-top:6px;color:var(--ink)}
.badge-ht{font-size:.66rem;color:var(--muted);margin-top:3px}
@media (max-width:560px){ .badge-grid{grid-template-columns:repeat(2,1fr)} }

::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* =========================================================================
   LANDING PAGE — "marquee entrance" + ticket-stub tracker cards
   ========================================================================= */
.home-hero{position:relative;margin:0 -24px 26px;padding:0 24px}
.home-banner{
  height:200px;margin:0 -24px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#3cc6c2 0%, #f2a3a3 38%, #ff5a3c 64%, #ffb33c 100%);
}
.home-banner::after{
  content:"";position:absolute;inset:0;mix-blend-mode:overlay;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 28px,transparent 28px 56px);
}
/* festival bulb strip running along the bottom of the banner */
.bulbs{position:absolute;left:0;right:0;bottom:10px;height:14px;display:flex;justify-content:space-around;align-items:center;padding:0 18px}
.bulbs i{width:7px;height:7px;border-radius:50%;background:#fff6e0;box-shadow:0 0 8px 2px rgba(255,236,179,.9);animation:twinkle 2.4s ease-in-out infinite}
.bulbs i:nth-child(even){animation-delay:1.2s}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.home-tent{position:absolute;left:24px;bottom:-30px;font-size:58px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));animation:bob 4s ease-in-out infinite}

.home-eyebrow{margin-top:48px;font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent3)}
.home-title{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.4rem,6.5vw,4.6rem);letter-spacing:-.02em;line-height:.96;margin:10px 0 12px}
.home-title em{font-style:italic;color:var(--accent2)}
.home-sub{color:var(--muted);font-size:1.05rem;max-width:600px;font-weight:300}

.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin:42px 0 8px}
.track-card{
  position:relative;display:flex;flex-direction:column;gap:13px;
  background:linear-gradient(165deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:22px;padding:28px 24px 22px;
  overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;
  opacity:0;transform:translateY(18px);animation:cardin .55s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s;
}
.track-card:nth-child(1){animation-delay:.05s}
.track-card:nth-child(2){animation-delay:.16s}
.track-card:nth-child(3){animation-delay:.27s}
@keyframes cardin{to{opacity:1;transform:none}}
/* glowing accent rail across the top — the "ticket" identity */
.track-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--ca,var(--accent))}
/* perforated ticket notch */
.track-card::after{content:"";position:absolute;left:-9px;top:50%;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line);transform:translateY(-50%)}
.track-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.track-num{font-family:'Space Mono',monospace;font-size:.82rem;color:var(--faint);letter-spacing:.12em}
.track-icon{font-size:2.5rem;line-height:1;margin-top:2px}
.track-title{font-family:'Fraunces',serif;font-weight:700;font-size:1.62rem;line-height:1.04;letter-spacing:-.01em}
.track-desc{color:var(--muted);font-size:.95rem;line-height:1.5;flex:1}
.track-meta{font-family:'Space Mono',monospace;font-size:.74rem;color:var(--faint);letter-spacing:.04em}
.track-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Outfit';font-weight:600;font-size:.92rem;color:var(--ca,var(--accent));margin-top:2px}
.track-cta svg{transition:transform .25s}

.tstatus{font-family:'Outfit';font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:5px 10px;border-radius:20px;white-space:nowrap}
.tstatus.live{color:var(--done);background:rgba(77,219,158,.14);box-shadow:0 0 0 1px rgba(77,219,158,.3)}
.tstatus.live::before{content:"●  ";color:var(--done)}
.tstatus.soon{color:var(--accent2);background:rgba(255,179,60,.13)}

/* live card: interactive lift + accent glow */
.track-card.live{cursor:pointer}
.track-card.live:hover,.track-card.live:focus-visible{transform:translateY(-6px);border-color:var(--ca);box-shadow:0 26px 60px -24px rgba(0,0,0,.8),0 0 0 1px var(--ca)}
.track-card.live:hover .track-cta svg{transform:translateX(5px)}
.track-card.live:focus-visible{outline:none}
/* coming-soon card: muted, still clickable to a placeholder */
.track-card.soon{opacity:.92}
.track-card.soon:hover{transform:translateY(-3px);border-color:var(--line)}
.track-card.soon .track-icon{filter:grayscale(.35)}

.home-foot{text-align:center;color:var(--faint);margin-top:54px;font-size:.82rem;font-family:'Space Mono',monospace}

/* back link on tracker / placeholder pages */
.backlink{display:inline-flex;align-items:center;gap:7px;font-family:'Outfit';font-weight:500;font-size:.86rem;color:var(--muted);text-decoration:none;margin:26px 0 2px;transition:.18s}
.backlink:hover{color:var(--accent3)}
.backlink svg{transition:transform .2s}
.backlink:hover svg{transform:translateX(-4px)}

/* placeholder ("coming soon") pages */
.soon-wrap{max-width:680px;margin:0 auto;padding:0 24px;min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.soon-badge{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent2)}
.soon-title{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.4rem,7vw,4.4rem);line-height:.98;letter-spacing:-.02em;margin:12px 0 16px}
.soon-title em{font-style:italic;color:var(--accent2)}
.soon-text{color:var(--muted);font-size:1.05rem;max-width:520px;line-height:1.6}
.soon-emoji{font-size:64px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));animation:bob 4s ease-in-out infinite;margin-bottom:8px}

@media (max-width:560px){
  .home-banner{height:150px}
  .tracks{margin-top:34px}
}

/* =========================================================================
   TOUCH + RESPONSIVE
   ========================================================================= */
/* On touch devices there is no hover, so always reveal row/topic actions + grips */
@media (hover:none){
  .row-actions,.topic-actions,.sec-actions{opacity:1}
  .sec-head .drag-grip,.topic-head .drag-grip,.item .drag-grip{opacity:.55}
}
/* focus-visible affordance for keyboard users */
.drag-grip:focus-visible,.mini-btn:focus-visible,.btn:focus-visible,.track-card:focus-visible{outline:2px solid var(--accent3);outline-offset:2px}
.kbd-lift{box-shadow:0 0 0 2px var(--accent3) inset}

@media (max-width:640px){
  .wrap{padding:0 14px 90px}
  .controls{gap:8px;padding:10px 0}
  .search{min-width:100%;order:-1}
  .btn{padding:9px 12px;font-size:.82rem}
  .sec-head{padding:16px 16px;gap:10px}
  .sec-title{font-size:1.12rem}
  .sec-body{padding:4px 12px 14px}
  .sec-meta{gap:8px}
  .sec-meta .minibar{width:50px}
  .topic-head{gap:8px;padding:11px 12px}
  .item{gap:9px;padding:9px 8px}
  .fld-row{flex-direction:column;gap:0}
  .modal{padding:14px;align-items:flex-start;padding-top:32px}
  .modal-card{padding:22px 18px}
  .ins-stats{grid-template-columns:1fr 1fr}
  .mbar-t{width:46%}
}
/* hide completed items when the board opts in */
.board-hide-done .item.st-done{display:none}

/* ===========================================================================
   3D hero animation (home-hero.js) — circus confetti depth field + reveals
   =========================================================================== */
.home3d{position:absolute;inset:0;z-index:1;pointer-events:none}
.home3d canvas{position:absolute;inset:0;width:100%;height:100%}
/* keep the tent emblem above the confetti canvas */
.home-banner .home-tent{z-index:2}
/* the tracks grid needs 3D depth for the card entrance + tilt */
.tracks{perspective:1400px}
.home3d-on .track-card{transform-style:preserve-3d;will-change:transform,opacity}

/* When JS drives the reveal, cancel the CSS entrance and pre-hide copy/cards so
   nothing flashes before anime.js runs. */
.home3d-on .track-card{animation:none;opacity:0}
.home3d-on .home-eyebrow,
.home3d-on .home-sub,
.home3d-on .ht-word{opacity:0}
.home3d-on .home-title{perspective:800px}
.home3d-on .ht-word{display:inline-block;transform-origin:50% 100%;will-change:transform,opacity}
.home3d-on .home-tent{opacity:0}

@media (prefers-reduced-motion:reduce){
  .home3d-on .track-card,
  .home3d-on .home-eyebrow,
  .home3d-on .home-sub,
  .home3d-on .ht-word,
  .home3d-on .home-tent{opacity:1;transform:none}
  .home3d-on .track-card{animation:none}
}