/* ====== Base & Theme ===================================================== */
:root{
  --bg: #0c0d11;
  --panel:#12141b;
  --ink:#e9edf3;
  --muted:#9aa3b2;
  --line:#1d2230;
  --accent:#6ee7b7;   /* mint */
  --accent2:#a78bfa;  /* violet */
  --pill:#1a2030;
  --pill2:#191e29;
  --chip:#0e1320;
  --ok:#39d98a;
  --warn:#ffd166;
  --bad:#ff6b6b;
  --ring:#2a3347;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 10% -10%, #0f1320, #0b0d14 60%, #090b11 100%);
  color:var(--ink);
  font: 15.5px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.2px;
}

/* ====== Layout =========================================================== */
.wrapper{max-width:1100px;margin:auto;padding:24px}

.site-header{padding:32px 24px 8px;text-align:center}
.site-header h1{
  margin:0 0 4px;
  font-weight:800;
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing:.5px;
  background: linear-gradient(90deg,var(--accent), var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{margin:0;color:var(--muted)}

.site-footer{padding:24px;text-align:center;color:var(--muted);border-top:1px solid var(--line);margin-top:32px}

.micon{font-family:"Material Symbols Rounded";font-variation-settings:'FILL' 0,'wght' 600,'opsz' 24;vertical-align:-2px;margin-right:6px;display:inline-block}

/* ====== Buttons ========================================================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--ring);border-radius:999px;
  padding:9px 12px;background:linear-gradient(180deg,var(--pill), var(--chip));
  color:#dce7f8;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.btn:hover{border-color:#2f3a54}
.btn.add{background:linear-gradient(180deg,#142034,#0f1726)}

/* ====== Panels =========================================================== */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%), var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 18px 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.panel + .panel{margin-top:18px}
.panel-title{margin:0 0 6px;font-size: 18px;font-weight:700}
.muted{color:var(--muted)}
.tip{margin:.5rem 0 0;color:var(--muted);font-size:.92rem}

/* ====== Badges =========================================================== */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 10px;padding:0;list-style:none}
.badge{
  display:inline-block;padding:7px 10px;border:1px solid var(--ring);
  border-radius:999px;background:linear-gradient(180deg,var(--pill), var(--chip));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;font-size:.92rem;color:#d9e3f1;
}

/* ====== Tree lines & structure ========================================== */
.tree-list{list-style:none;margin:0;padding-left:18px;position:relative}
.tree-list > .node{position:relative;margin:.3rem 0 .6rem}
.tree-list > .node::before{
  content:"";position:absolute;left:-14px;top:16px;bottom:-8px;width:1px;background:linear-gradient(var(--ring), transparent);
}
.tree-list > .node:last-child::before{display:none}
.tree-list.inner{margin-top:.35rem;padding-left:22px}
.tree-list.inner > .node::before{left:-18px}

/* ====== Node summary ===================================================== */
summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 25%), #0f1320;
  transition: border-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
summary:hover{border-color:#2b3750;box-shadow:0 10px 16px rgba(0,0,0,.25)}
summary:active{transform:scale(.996)}
details[open] > summary{border-color:#3b4a6a;box-shadow: 0 0 0 1px rgba(110,231,183,.12) inset, 0 12px 32px rgba(0,0,0,.35)}

.node-label{font-weight:700;letter-spacing:.3px;padding:6px 10px;border-radius:10px;
  background:linear-gradient(90deg, rgba(110,231,183,.12), rgba(167,139,250,.12));border:1px solid var(--ring);
}
.pill{margin-left:auto;font-size:.86rem;color:#cfe9ff;background:linear-gradient(180deg,var(--pill),var(--pill2));border:1px solid var(--ring);padding:4px 8px;border-radius:999px;opacity:.9}
.pill.alt{background:linear-gradient(180deg,#191f2a,#161b26)}

/* ====== Node body ======================================================== */
details > *:not(summary){margin-left:24px}
.row{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 6px}
.grid-2{display:grid;gap:12px;margin:.2rem 0 .6rem;grid-template-columns: repeat(2, minmax(260px,1fr));}
@media (max-width: 860px){.grid-2{grid-template-columns: 1fr}}

/* Likes / Dislikes -------------------------------------------------------- */
.likebox{flex: 1 1 420px; min-width:260px;padding:12px;border-radius:12px;border:1px dashed #2b3450;background:#0f1422}
.feel{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.toggle{position:relative;display:inline-flex;align-items:center;border:1px solid var(--ring);border-radius:999px;background:#0f1320;padding:8px 12px;cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle span{color:#ced8ea}
.toggle input:checked + span{color:#0b0f14;font-weight:700}
.toggle input:checked ~ span, .toggle input:checked + span{background: linear-gradient(90deg, var(--accent), var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Dial (visual only) ------------------------------------------------------ */
.dial{flex: 1 1 220px; min-width:200px;padding:12px;border-radius:12px;border:1px solid var(--ring);background:#0f1320}
.dial-track input[type="range"]{width:100%; accent-color: var(--accent)}

/* Checks + 1–5 cute mini scale ------------------------------------------- */
.checks{border:1px solid var(--ring);border-radius:12px;padding:12px;background:#0f1320}
.checks legend{padding:0 6px;color:#cdd7eb}
.checks label{display:flex;align-items:center;gap:10px;margin:8px 0;color:#dbe6fa}
.checks input[type="checkbox"]{accent-color:var(--accent)}

/* Mini 1–5 scale */
.mini5{margin-left:auto; display:inline-grid; grid-auto-flow:column; gap:6px; border-radius:999px; padding:4px 6px; background:#0c1220; border:1px solid var(--ring)}
.mini5 input[type=radio]{appearance:none;width:0;height:0;position:absolute}
.mini5 i{display:block;width:16px;height:16px;border-radius:6px;background:linear-gradient(180deg,#182138,#0b0f1a);border:1px solid #273149;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.mini5 i:hover{filter:brightness(1.15)}
.mini5:has(input:nth-of-type(1):checked) i:nth-of-type(-n+1),
.mini5:has(input:nth-of-type(2):checked) i:nth-of-type(-n+2),
.mini5:has(input:nth-of-type(3):checked) i:nth-of-type(-n+3),
.mini5:has(input:nth-of-type(4):checked) i:nth-of-type(-n+4),
.mini5:has(input:nth-of-type(5):checked) i:nth-of-type(-n+5){
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-color: transparent;
}

/* Inline editable standard text */
.inline-edit{flex:1;min-width:160px;background:#0c1322;border:1px dashed #2a3550;border-radius:8px;padding:6px 8px;color:var(--ink)}

/* End actions ------------------------------------------------------------- */
.end-actions{margin-top:12px}
.end-actions .btn{font-weight:600}

/* Small helpers ----------------------------------------------------------- */
.core{margin-bottom:18px}
.custom-standard{display:flex;align-items:center;gap:10px;margin:8px 0}