/* The Unlate — mirrors The Undecider / The Unstarter 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 320px;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 h3{font-size:1rem;margin:.4rem 0 .5rem}
.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-ghost{background:transparent;border-color:transparent;color:var(--muted);text-decoration:underline;font-size:.92rem}
.btn-start{display:block;margin:1rem auto 0;background:linear-gradient(180deg,var(--accent2),#e83e63);border:none;color:#fff;font-size:1.3rem;font-weight:900;letter-spacing:.06em;padding:.8rem 2.2rem;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}
.btn-start:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

.field-label{display:block;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:.7rem 0 .3rem}
.buffer-picker{display:flex;gap:.45rem}
.buffer-choice{flex:1;padding:.5rem .3rem;font-size:.86rem;line-height:1.25}
.buffer-choice small{color:var(--muted);font-weight:600}
.buffer-choice.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.buffer-choice.active small{color:#e6e0ff}

.routines-block{margin-top:1.1rem;border-top:2px dashed var(--line);padding-top:.6rem}
.routine-form{display:flex;gap:.45rem}
.routine-form input{flex:1}
.routine-list{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.routine-list li{display:flex;align-items:center;gap:.45rem;background:var(--chip);border-radius:10px;padding:.4rem .55rem;font-weight:700}
.routine-list .r-name{flex:1;word-break:break-word}

.stage-panel{text-align:center}
.stage-title{font-size:1.5rem}
.big-times{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:.7rem}
.big-time{background:var(--chip);border:2px solid var(--line);border-radius:16px;padding:.7rem 1rem;min-width:150px;flex:1}
.big-time .bt-value{display:block;font-size:1.9rem;font-weight:900;color:var(--accent);line-height:1.1}
.big-time label{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.status-line{font-size:1.08rem;font-weight:800;margin:.85rem auto .2rem;max-width:520px}
.status-future{color:var(--green)}
.status-late{color:var(--danger)}
.status-gone{color:var(--danger)}
.stage-note{color:var(--muted);font-weight:600;font-size:.9rem;margin:.55rem auto 0;max-width:460px}

.timeline{list-style:none;margin:1rem auto 0;padding:0;max-width:520px;text-align:left;display:flex;flex-direction:column;gap:.35rem}
.timeline li{display:flex;align-items:baseline;gap:.6rem;background:var(--chip);border-radius:10px;padding:.45rem .65rem;font-weight:700}
.timeline .tl-time{font-weight:900;color:var(--accent);min-width:78px}
.timeline .tl-what{flex:1;word-break:break-word}
.timeline .tl-dur{color:var(--muted);font-weight:600;font-size:.86rem;white-space:nowrap}
.timeline li.tl-buffer{border:2px dashed var(--gold);background:transparent}
.timeline li.tl-key{border:2px solid var(--accent)}

.live-area{margin-top:.6rem}
.live-countdown{font-size:2rem;font-weight:900;color:var(--accent2);margin:.2rem 0}
.live-pace{font-size:1.1rem;font-weight:800;margin:.25rem 0}
.live-next{color:var(--muted);font-weight:700;margin:.2rem 0 .7rem}
.live-list{list-style:none;margin:0 auto;padding:0;max-width:520px;text-align:left;display:flex;flex-direction:column;gap:.4rem}
.live-list li{display:flex;align-items:center;gap:.6rem;background:var(--chip);border:2px solid transparent;border-radius:12px;padding:.55rem .65rem;font-weight:700;cursor:pointer}
.live-list li.done{opacity:.55}
.live-list li.done .l-name{text-decoration:line-through}
.live-list .l-name{flex:1;word-break:break-word}
.live-list .l-min{color:var(--muted);font-weight:600;font-size:.88rem;white-space:nowrap}
.timer-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.9rem}

.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)}

.add-form{margin-top:.8rem;display:flex;flex-direction:column;gap:.45rem}
.add-row{display:flex;gap:.45rem}
.add-row input[type="number"]{width:90px}
.add-row .btn{flex:1}
.task-list{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:52vh;overflow:auto}
.task-list li{display:flex;align-items:center;gap:.45rem;background:var(--chip);border:2px solid transparent;border-radius:12px;padding:.45rem .55rem}
.task-list li.off{opacity:.55}
.task-list .t-toggle{width:22px;height:22px;flex:none;accent-color:var(--accent);cursor:pointer}
.task-list .t-name{flex:1;min-width:0;background:transparent;border:none;padding:.25rem .3rem;font-weight:700}
.task-list .t-name:focus{outline:3px solid rgba(108,76,241,.35);background:var(--panel)}
.task-list .t-min{width:64px;flex:none;padding:.3rem .4rem;text-align:center;font-weight:700}
.task-list .t-unit{color:var(--muted);font-weight:600;font-size:.85rem}
.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)}
.routine-list .row-btn{background:none;border:none;font-size:1rem;padding:.1rem .25rem;border-radius:8px}
.routine-list .row-btn:hover{background:var(--line)}

.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}