:root{
  --bg:#181616; --card:#22201e; --border:#3a342f; --muted:#9c9388; --text:#f5f2e8;
  --btn:#c8a97e; --btn-ghost:#1f1b18; --pill:#241f1c; --pill-border:#3a342f;
  --ok-bg:#1b2a21; --ok-bd:#2b5a3c; --ok-fg:#cfe7d1;
  --err-bg:#2a1b1b; --err-bd:#5a2b2b; --err-fg:#f1b0b0;
}
*{box-sizing:border-box}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; margin:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.wrap{
  width:100%; max-width:980px;
  display:grid; gap:24px;
  max-height:100vh;                /* ✅ scrolls if taller than screen */
  overflow:auto;                   /* ✅ avoids overflow cutoff */
}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
h1{margin:0 0 6px; font-size:24px}
h2{margin:0 0 14px; font-size:18px}
.muted{color:var(--muted); font-size:13px; margin:0 0 16px}
label{display:block; font-size:13px; margin:12px 0 6px}
input,select{
  width:100%; background:#1a1613; color:var(--text);
  border:1px solid #4a433d; border-radius:10px; padding:10px 12px; outline:none;
}
input:focus,select:focus{border-color:var(--btn)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > .col{flex:1; min-width:220px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{
  padding:10px 14px; border-radius:10px; border:0; cursor:pointer;
  font-weight:600; background:var(--btn); color:#1a160f;
}
.btn.secondary{background:var(--btn-ghost); color:var(--text); border:1px solid #4a433d}
.btn.ghost{
  background:transparent; color:var(--text); border:1px solid #4a433d;
}
.btn.small{ padding:8px 10px; font-size:13px }

/* Title bar (for pencil) */
.titlebar{ display:flex; align-items:center; justify-content:space-between; gap:8px }

/* Status toasts */
.status{display:none; margin-top:12px; padding:10px 12px; border-radius:10px}
.ok{background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--ok-fg)}
.err{background:var(--err-bg); border:1px solid var(--err-bd); color:var(--err-fg)}

.grid-two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:900px){ .grid-two{grid-template-columns:1fr} }

/* Summary list (view mode) */
.dayline{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed #2a2520}
.dayname{font-weight:600}
.slots.off{color:#9c9388; font-style:italic}

/* Editor (hidden until Edit) */
#templateEditor{display:none; margin-top:12px}
.dayCard{border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:10px; background:#1a1613}
.dayCard h3{margin:0 0 8px; font-size:14px}
.range{display:flex; gap:8px; align-items:center; margin:6px 0}
.range .remove{background:transparent; border:1px solid #4a433d; color:#e4dacb; border-radius:8px; padding:6px 10px; cursor:pointer}
.add{margin-top:6px}

/* Toolbar injected above summary */
.toolbar{display:flex; gap:8px; margin:6px 0 10px}

/* Blackout chips */
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:var(--pill); border:1px solid var(--pill-border); border-radius:999px; margin:4px 6px 0 0}
.pill button{background:transparent; border:0; color:var(--text); cursor:pointer; padding:0 4px; font-size:12px}