/* The Unstarter — mirrors The Undecider's design language */
:root{
  --bg:#f6f3ff; --panel:#ffffff; --ink:#1d1a2e; --muted:#6b6584;
  --accent:#6c4cf1; --accent2:#ff5d7e; --gold:#ffb340; --green:#1d9e57;
  --line:#e4def7; --chip:#efeaff; --danger:#d93636;
  --shadow:0 10px 30px rgba(60,40,140,.12);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14121f; --panel:#201c33; --ink:#f2efff; --muted:#a79fd0; --line:#37315a; --chip:#2c2750; --shadow:0 10px 30px rgba(0,0,0,.45); }
}
html[data-theme="dark"]{ --bg:#14121f; --panel:#201c33; --ink:#f2efff; --muted:#a79fd0; --line:#37315a; --chip:#2c2750; --shadow:0 10px 30px rgba(0,0,0,.45); }
html[data-theme="light"]{ --bg:#f6f3ff; --panel:#ffffff; --ink:#1d1a2e; --muted:#6b6584; --line:#e4def7; --chip:#efeaff; --shadow:0 10px 30px rgba(60,40,140,.12); }

*{box-sizing:border-box}
body{margin:0;font-family:"Baloo 2","Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);}
h1,h2,h3{margin:0}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:.55rem .7rem;width:100%}
input:focus,textarea:focus{outline:3px solid rgba(108,76,241,.35);border-color:var(--accent)}
a{color:var(--accent);font-weight:800}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1.1rem .4rem;max-width:1200px;margin:0 auto}
.brand{display:flex;gap:.7rem;align-items:center}
.brand-mark{font-size:2.2rem}
.brand h1{font-size:1.7rem;line-height:1;color:var(--accent)}
.tagline{margin:.25rem 0 0;color:var(--muted);font-weight:600;font-size:.92rem;max-width:420px}
.top-actions{display:flex;gap:.45rem;align-items:center}
.icon-btn{background:var(--panel);border:2px solid var(--line);border-radius:12px;font-size:1.05rem;padding:.4rem .55rem}

.hero{max-width:1200px;margin:0 auto;padding:.4rem 1.1rem .8rem}
.hook{font-size:1.25rem;font-weight:700;margin:.2rem 0}
.hero-sub{color:var(--muted);font-weight:600;max-width:720px;margin:.2rem 0}

.layout{max-width:1200px;margin:0 auto;padding:.4rem 1.1rem 1.2rem;display:grid;grid-template-columns:300px 1fr 260px;gap:1rem;align-items:start}
@media (max-width:960px){ .layout{grid-template-columns:1fr} }
.panel{background:var(--panel);border:2px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:1rem}
.panel h2{font-size:1.1rem;margin-bottom:.6rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.panel-head h2{margin:0}
.panel-note{color:var(--muted);font-weight:600;font-size:.9rem;margin:.2rem 0 .7rem}
.count-chip{background:var(--chip);border:2px solid var(--line);border-radius:999px;font-weight:900;color:var(--accent);padding:.15rem .6rem}

.btn{background:var(--chip);color:var(--ink);border:2px solid var(--line);border-radius:12px;font-weight:700;padding:.55rem .9rem}
.btn:hover{filter:brightness(1.05)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-small{padding:.4rem .65rem;font-size:.9rem}
.btn-block{width:100%;margin-top:.45rem}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted);text-decoration:underline;font-size:.92rem}
.btn-draw{display:block;margin:.9rem auto 0;background:linear-gradient(180deg,var(--accent),#5536d6);border:none;color:#fff;font-size:1.25rem;font-weight:900;letter-spacing:.06em;padding:.8rem 2.2rem;border-radius:999px;box-shadow:0 8px 0 #3d249e,0 14px 28px rgba(108,76,241,.35)}
.btn-draw:active{transform:translateY(4px);box-shadow:0 4px 0 #3d249e}
.btn-draw:disabled{opacity:.55;cursor:wait}
.btn-start{display:block;margin:.8rem auto 0;background:linear-gradient(180deg,var(--accent2),#e83e63);border:none;color:#fff;font-size:1.35rem;font-weight:900;letter-spacing:.08em;padding:.85rem 2.6rem;border-radius:999px;box-shadow:0 8px 0 #b02a47,0 14px 28px rgba(232,62,99,.35)}
.btn-start:active{transform:translateY(4px);box-shadow:0 4px 0 #b02a47}

.add-form{display:flex;flex-direction:column;gap:.45rem}
.task-list{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:44vh;overflow:auto}
.task-list li{display:flex;align-items:center;gap:.45rem;background:var(--chip);border:2px solid transparent;border-radius:12px;padding:.5rem .6rem;font-weight:700}
.task-list li.picked{border-color:var(--gold);background:var(--panel)}
.task-list .t-text{flex:1;word-break:break-word}
.task-list .t-step{display:block;color:var(--muted);font-weight:600;font-size:.8rem}
.task-list .row-btn{background:none;border:none;font-size:1rem;padding:.1rem .25rem;border-radius:8px}
.task-list .row-btn:hover{background:var(--line)}
.empty-state{margin-top:.8rem;border:2px dashed var(--line);border-radius:14px;padding:.8rem;text-align:center;color:var(--muted);font-weight:600}
.empty-state p{margin:.2rem 0 .6rem}

.stage-panel{text-align:center}
.stage-title{font-size:1.5rem}
.draw-area{margin-top:.4rem}
.slot-box{min-height:96px;display:flex;align-items:center;justify-content:center;background:var(--chip);border:2px dashed var(--line);border-radius:16px;padding:1rem;margin-top:.6rem;overflow:hidden}
.slot-box .slot-idle{color:var(--muted);font-weight:600;margin:0;max-width:420px}
.slot-box .slot-task{font-size:1.6rem;font-weight:900;color:var(--accent);margin:0;word-break:break-word}
.slot-box.drawing .slot-task{color:var(--ink);opacity:.75}
.slot-box.landed{border-style:solid;border-color:var(--gold);background:var(--panel)}
#redrawBtn{margin-top:.55rem}

.step-card{margin-top:1rem;background:var(--chip);border:2px solid var(--line);border-radius:16px;padding:1rem}
.step-label{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.step-text{font-size:1.35rem;font-weight:900;color:var(--accent);margin:.45rem 0 .2rem}
.step-note{color:var(--muted);font-weight:600;font-size:.92rem;margin:.2rem 0}
.timer-choices{display:flex;gap:.5rem;justify-content:center;margin:.7rem 0 .2rem;flex-wrap:wrap}
.timer-choice.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.timer-area{margin-top:1rem}
.timer-task{font-size:1.15rem;font-weight:800;margin:.2rem 0 .4rem}
.timer-ring-wrap{position:relative;width:min(62vw,220px);margin:0 auto}
.timer-ring{width:100%;height:auto;display:block;transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke-width:9}
.ring-bg{stroke:var(--line)}
.ring-fg{stroke:var(--accent2);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0;transition:stroke-dashoffset .3s linear}
.timer-display{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.6rem;font-weight:900;color:var(--accent)}
.timer-message{color:var(--muted);font-weight:700;margin:.5rem 0}
.timer-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}

.win-area{min-height:60px;margin-top:.8rem}
.win-card{background:var(--chip);border:2px solid var(--gold);border-radius:16px;padding:.9rem;display:inline-block;max-width:92%}
.win-card .big{font-size:1.3rem;font-weight:900;color:var(--green)}
.win-card p{margin:.3rem 0;color:var(--muted);font-weight:600}

.stats-row{display:flex;gap:1rem;justify-content:center;margin-top:.9rem}
.stat{background:var(--chip);border-radius:14px;padding:.5rem 1.1rem}
.stat span{display:block;font-size:1.4rem;font-weight:900;color:var(--accent)}
.stat label{font-size:.75rem;font-weight:800;letter-spacing:.06em;color:var(--muted)}

.start-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:52vh;overflow:auto}
.start-log li{background:var(--chip);border-radius:10px;padding:.45rem .6rem;font-weight:700;font-size:.92rem}
.start-log li small{display:block;color:var(--muted);font-weight:600}
.log-empty{color:var(--muted);font-weight:600}

.footer{max-width:1200px;margin:0 auto;padding:0 1.1rem 2rem;color:var(--muted);font-weight:600}
.footer .faq-line{margin:.3rem 0}

/* ---------- Free-taste gate (mirrors The Undecider) ---------- */
.badge{font-weight:800;font-size:.75rem;letter-spacing:.08em;padding:.4rem .6rem;border-radius:999px}
.badge-demo{background:var(--chip);color:var(--muted);border:2px dashed var(--muted)}
.badge-pro{background:linear-gradient(90deg,var(--gold),#ffd93d);color:#3a2a00;border:2px solid #e0a017}
.tryout-banner .btn{margin-top:.5rem}
.tryout-banner{border:2px dashed var(--gold);background:var(--chip);border-radius:12px;padding:.55rem .65rem;margin-bottom:.6rem;font-weight:700}
.tryout-banner small{display:block;color:var(--muted);font-weight:600;margin-top:.15rem}
.tryout-note{color:var(--ink)!important;font-weight:800!important}
.tryout-cost-note{color:var(--muted);font-weight:800;min-height:1.2em;margin:.55rem 0 0}
.tryout-toast{margin-top:.6rem;font-weight:900;color:var(--accent);opacity:0;transform:translateY(-3px);transition:opacity .25s ease,transform .25s ease;min-height:1.2em}
.tryout-toast.show{opacity:1;transform:translateY(0)}
.unlock-card{margin-top:1rem;border-top:2px solid var(--line);padding-top:.8rem}
.unlock-card h3{margin-bottom:.35rem}
.unlock-card p{color:var(--muted);font-weight:600;font-size:.92rem;margin:.3rem 0}
.unlock-row{display:flex;gap:.45rem}
.unlock-row input{flex:1;font-size:.85rem}
.unlock-status{min-height:1.2em;font-weight:700}
.unlock-status.ok{color:var(--green)}
.unlock-status.err{color:var(--danger)}
.unlock-links{display:flex;gap:.45rem;flex-wrap:wrap;margin:.35rem 0 .2rem}
.unlock-links a{text-decoration:none;display:inline-block}
.modal{position:fixed;inset:0;background:rgba(10,8,25,.55);display:flex;align-items:center;justify-content:center;z-index:70;padding:1rem}
.modal[hidden]{display:none}
.modal-card{background:var(--panel);border-radius:18px;padding:1.2rem;width:min(520px,100%);box-shadow:var(--shadow)}
.modal-card label{display:block;font-weight:700;margin:.6rem 0}
.modal-card textarea{margin-top:.3rem;resize:vertical}
.modal-actions{display:flex;gap:.5rem;align-items:center;margin-top:.8rem}
.spacer{flex:1}