:root{
  --bg:#0a0c13; --panel:#0f1220; --ink:#f6f7fb; --muted:#a3a7be;
  --accent:#38f1c6; --vio:#a56bff; --ok:#23d38a; --stroke:#222741; --warn:#ffb020;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 15% -10%,#1a1e3a 0%,transparent 70%),#0a0c13;
  color:var(--ink);
  font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  padding:24px;
}
.shell{max-width:980px;margin:auto;display:grid;gap:1.2rem}
.hdr{display:flex;gap:.75rem;align-items:baseline;flex-wrap:wrap}
.tag{padding:.25rem .55rem;border:1px solid #294;border-radius:8px;background:#0d2a22}
h1{font-size:1.45rem;margin:.25rem 0 0}
h2{font-size:1.1rem;margin:0 0 .75rem;color:#cfe7ff}
h3{margin:.25rem 0 .5rem;color:#d6e7ff;font-weight:700}
.line{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);margin:.25rem 0 .75rem}

.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:1.15rem 1.25rem;
  box-shadow:0 10px 36px rgba(0,0,0,.4);
}

/* Input row */
.inputline{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.65rem;
  align-items:start;
}
.ghost{
  border:1px dashed #313657;
  border-radius:10px;
  padding:.7rem .85rem;
  background:#121530;
}
.ghost input{
  appearance:none;border:0;outline:0;background:transparent;color:var(--ink);
  font:600 1.05rem/1.2 "Inter",system-ui;width:100%
}

/* Buttons */
.btn{
  display:inline-grid;place-items:center;
  padding:.6rem .9rem;border-radius:12px;border:1px solid #2a3258;
  background:#121733;color:#e6edff;font-weight:700;cursor:pointer;transition:.2s;
  user-select:none
}
.btn:hover{box-shadow:0 0 0 2px #000,0 0 0 4px #58ffd5}
.btn.accent{background:linear-gradient(180deg,#36f5ca,#7f6bff);color:#0a0c13;border-color:#467}

/* Chips for custom values */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}
.chip{
  font-weight:600;font-size:.9rem;color:#cfe7ff;
  background:#121733;border:1px solid #2a3258;border-radius:999px;padding:.35rem .65rem
}

/* Senses */
.senses{display:grid;grid-template-columns: repeat(5,1fr);gap:.6rem;margin-top:.5rem}
.sense{
  display:grid;gap:.35rem;place-items:center;border:1px solid #23284a;background:#121631;
  padding:.75rem;border-radius:14px;text-align:center
}
.sense b{font-size:1.05rem}
.sense input{display:none}
.sense:has(input:checked){outline:3px solid #39f4cd;outline-offset:2px}

/* Combos */
.actions{display:flex;gap:.6rem;align-items:center;margin-top:.9rem;flex-wrap:wrap}
.toggle-all{display:flex;align-items:center;gap:.45rem;font-weight:700;color:#d5d9f8}
.toggle-all input{width:1.05rem;height:1.05rem}

.combos{margin-top:1rem}
.combos-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.combos-list{display:grid;grid-template-columns:repeat(2, minmax(260px,1fr));gap:.45rem}
.combo{
  display:flex;gap:.55rem;align-items:center;border:1px solid #2a3156;background:#121633;
  padding:.5rem .7rem;border-radius:10px
}
.combo input{width:1rem;height:1rem}
.combo-line{display:flex;flex-wrap:wrap;gap:.35rem}
.token{
  display:inline-block;padding:.15rem .45rem;border-radius:10px;background:#0f173a;border:1px solid #2a3156;font-weight:700
}

/* Wise It */
.wise-panel{
  margin-top:1rem;
  border:1px dashed #2b3053;border-radius:14px;padding:.4rem .75rem;background:#0f142e;
}
.wise-panel > summary{cursor:pointer;font-weight:800;color:#e0e6ff;padding:.5rem 0}
.wise-grid{display:grid;grid-template-columns:repeat(5, minmax(120px,1fr));gap:.5rem}
.wise{display:flex;gap:.45rem;align-items:center;border:1px solid #2a3156;background:#121633;padding:.5rem .7rem;border-radius:10px}

/* Footer actions (JS-driven) */
.footer-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.mega-btn{
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;padding:.7rem 1.1rem;border-radius:14px;border:1px solid #2a3258;
  font-weight:900;letter-spacing:.2px;box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .2s ease;
}
.mega-btn:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.mega-btn.save{background:linear-gradient(180deg,#ffe58a,#ffb020);color:#2c1a00;border-color:#9a6b00}
.mega-btn.send{background:linear-gradient(180deg,#9ae2ff,#2ec1ff);color:#001a24;border-color:#0a5b78}
.mega-btn.publish{background:linear-gradient(180deg,#ffc1ec,#ff6fd8);color:#3c0026;border-color:#7a2a60}

.action-note{margin-top:.6rem;font-weight:700;color:#cbd3ff;min-height:1.2em}
.action-note.ok{color:#7bffcd}
.action-note.warn{color:#ffd27a}

/* Save output editor */
.editor-list{display:grid;gap:.9rem;margin-top:.6rem}
.editor-block{
  border:1px solid #2a3156;background:#101634;border-radius:14px;padding:.8rem .9rem
}
.editor-title{margin:0 0 .55rem 0;display:flex;flex-wrap:wrap;gap:.35rem}
.tag-sm{background:#0f173a;border:1px solid #2a3156;border-radius:10px;padding:.2rem .5rem}
.editor-row{display:grid;gap:.4rem;margin:.4rem 0}
.editor-row label{font-weight:800;color:#dce6ff}
.editor-input{
  width:100%;padding:.6rem .7rem;border-radius:10px;border:1px solid #2a3156;background:#0f1433;color:#e9efff
}
.editor-input:focus{outline:2px solid #58ffd5;outline-offset:1px}

/* Overlay */
.overlay{
  position:fixed;inset:0;background:rgba(3,5,20,.66);
  display:none;align-items:center;justify-content:center;padding:1rem;z-index:20
}
.overlay.show{display:flex}
.modal{
  background:#0f1220;border:1px solid #2a3258;border-radius:16px;padding:1rem 1.2rem;max-width:460px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.55)
}
.modal h3{margin-top:0}
.modal .btn{margin-top:.6rem}

/* Responsive */
@media (max-width:960px){
  .senses{grid-template-columns:1fr 1fr}
  .wise-grid{grid-template-columns:1fr 1fr}
  .combos-list{grid-template-columns:1fr}
  .inputline{grid-template-columns:1fr; gap:.55rem}
}