:root {
  --bg: #fdf6ec; --card: #fff; --text: #3e2f45; --dim: #8a7b90; --accent: #9b72cf; --accent2: #d4739d;
  --ok: #3f9b6e; --warn: #d68a1c; --err: #c44b4b; --wait: #6c8ebf;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: linear-gradient(160deg, #fdf6ec, #f3eefb);
  color: var(--text); min-height: 100vh; }
.top { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: rgba(255,255,255,.75);
  border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.top h1 { margin: 0; font-size: 1.5rem; color: var(--accent); flex: 1; }
.back { color: var(--accent2); text-decoration: none; font-weight: 600; }
#who { color: var(--dim); font-size: .9rem; display: flex; gap: .6rem; align-items: center; }
main { max-width: 980px; margin: 0 auto; padding: 1.2rem; }
.card { background: var(--card); border-radius: 18px; padding: 1.3rem; margin-bottom: 1.2rem;
  box-shadow: 0 4px 18px rgba(60,40,80,.08); }
.card h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
.dim { color: var(--dim); }
label { display: block; font-weight: 600; margin: .8rem 0 .35rem; }
textarea, select, input { width: 100%; font: inherit; padding: .6rem .7rem; border: 2px solid #e4d9ee; border-radius: 12px;
  background: #fffdfb; color: var(--text); }
textarea:focus, select:focus, input:focus { outline: none; border-color: var(--accent); }
.check input { width: auto; }
.hero { border: 2px dashed #e4d9ee; border-radius: 14px; margin: 1rem 0 0; padding: .4rem 1rem 1rem; }
.hero legend { font-weight: 700; color: var(--accent2); padding: 0 .4rem; }
[hidden] { display: none !important; }
textarea.idea { min-height: 6rem; }
textarea.md { min-height: 24rem; font-family: Consolas, monospace; font-size: .9rem; line-height: 1.45; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.kids { display: flex; gap: .6rem; flex-wrap: wrap; }
.kid { border: 2px solid #e4d9ee; border-radius: 14px; padding: .5rem .9rem; cursor: pointer; background: #fff;
  font-weight: 600; }
.kid.on { border-color: var(--accent2); background: #fff0f6; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; margin-top: 1rem; }
.check input { margin-top: .25rem; }
button, .btn { font: inherit; font-weight: 600; border: 0; border-radius: 12px; padding: .6rem 1.1rem; cursor: pointer;
  background: var(--accent); color: #fff; text-decoration: none; display: inline-block; }
button.light { background: #efe7f8; color: var(--accent); }
button.danger { background: #fbe9e9; color: var(--err); }
button:disabled { opacity: .5; cursor: default; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }
.story { display: flex; gap: .9rem; align-items: center; padding: .8rem; border-radius: 14px; cursor: pointer;
  border: 2px solid transparent; }
.story:hover, .story.open { border-color: #e4d9ee; background: #fbf8ff; }
.story .icon { font-size: 1.8rem; width: 2.2rem; text-align: center; }
.story .info { flex: 1; min-width: 0; }
.story .title { font-weight: 700; }
.story .msg { color: var(--dim); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.pill { font-size: .75rem; padding: .2rem .55rem; border-radius: 99px; background: #eee; color: #555; white-space: nowrap; }
.pill.fatto { background: #e3f4ea; color: var(--ok); }
.pill.in_coda, .pill.in_corso { background: #e8eef9; color: var(--wait); }
.pill.da_rivedere, .pill.attesa_quota { background: #fdf0dc; color: var(--warn); }
.pill.errore { background: #fbe9e9; color: var(--err); }
.steps { display: grid; gap: 1rem; }
.step { border-left: 5px solid #e4d9ee; padding: .3rem 0 .3rem 1rem; }
.step.fatto { border-color: var(--ok); }
.step.in_coda, .step.in_corso { border-color: var(--wait); }
.step.da_rivedere, .step.attesa_quota { border-color: var(--warn); }
.step.errore { border-color: var(--err); }
.step h3 { margin: 0 0 .4rem; }
audio { width: 100%; margin-top: .6rem; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; margin-top: .6rem; }
td, th { padding: .3rem .4rem; border-bottom: 1px solid #f0e8f5; text-align: left; }
.log { font-size: .8rem; color: var(--dim); margin: .4rem 0 0; padding-left: 1.1rem; }
.spinner { display: inline-block; width: .9rem; height: .9rem; border: 2px solid var(--wait); border-top-color: transparent;
  border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -2px; margin-right: .3rem; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff;
  padding: .6rem 1.1rem; border-radius: 12px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5; }
#toast.show { opacity: .95; }
.center { text-align: center; padding: 2rem 1rem; }
.errbox { background: #fbe9e9; color: var(--err); padding: 1rem; border-radius: 12px; }