:root {
  --bg:#0b0f14; --panel:#111821; --panel2:#17212d; --text:#eaf2f8;
  --muted:#a8b7c5; --border:#263545; --accent:#75d5ff; --green:#8ee3a1;
  --gold:#ffd98a; --red:#ffadad; --creator-max:1440px; --radius:14px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);background:
  radial-gradient(circle at 15% 0%,rgba(117,213,255,.07),transparent 30%),
  radial-gradient(circle at 85% 0%,rgba(142,227,161,.05),transparent 28%),var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
}
a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit} button{cursor:pointer}
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border);background:rgba(11,15,20,.96)}
.nav{max-width:var(--max);min-height:68px;margin:auto;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-weight:900;font-size:1.12rem}.brand span{color:var(--accent)}
.nav-links{display:flex;gap:8px;flex-wrap:wrap}.nav-links a{color:var(--muted);padding:7px 10px;border-radius:8px}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--panel2)}
.creator-layout{max-width:var(--creator-max);margin:auto;padding:20px 18px 70px;display:grid;grid-template-columns:230px minmax(0,1fr) 360px;gap:16px;align-items:start}
.panel{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);overflow:hidden}
.panel-head{padding:13px 15px;border-bottom:1px solid var(--border);background:var(--panel2)}
.panel-head strong{display:block}.panel-head small{color:var(--muted)}.panel-body{padding:14px}
.sidebar{position:sticky;top:88px}.sidebar button{width:100%;text-align:left;border:0;color:var(--muted);background:transparent;padding:9px 10px;border-radius:8px}
.sidebar button:hover,.sidebar button.active{background:var(--panel2);color:var(--text)}
.sidebar .section-label{margin:10px 10px 5px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.preview{position:sticky;top:88px;max-height:calc(100vh - 108px);display:flex;flex-direction:column}.preview .panel-body{overflow:auto}
.preview pre{white-space:pre-wrap;word-break:break-word;margin:0;color:#dff4ff;font:.78rem/1.45 "SFMono-Regular",Consolas,monospace}
.workspace-title{margin:0 0 14px;padding:20px 22px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,rgba(117,213,255,.08),rgba(142,227,161,.04)),var(--panel)}
.workspace-title h1{margin:2px 0 5px;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em}.workspace-title p{margin:0;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.btn{border:1px solid var(--border);border-radius:9px;padding:8px 11px;background:var(--panel2);color:var(--text)}
.btn.primary{background:var(--accent);color:#071018;border-color:transparent;font-weight:800}.btn.success{background:var(--green);color:#071008;border-color:transparent;font-weight:800}.btn.danger{color:var(--red)}.btn.small{padding:5px 8px;font-size:.82rem}
.editor-section{display:none}.editor-section.active{display:block}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.field{display:grid;gap:5px}.field.full{grid-column:1/-1}
.field label{color:var(--muted);font-size:.79rem;font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:8px;background:#0b1118;color:var(--text);padding:8px 9px}
.field textarea{min-height:88px;resize:vertical}.help{color:var(--muted);font-size:.74rem}
.collection{display:grid;gap:10px}.item-card{border:1px solid var(--border);border-radius:12px;background:#0d131b;overflow:hidden}
.item-head{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--panel2);border-bottom:1px solid var(--border)}
.item-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis}.item-actions{display:flex;gap:5px}.item-body{padding:12px}.mini-note{color:var(--muted);font-size:.78rem;margin:6px 0}
.action-card{border-left:3px solid var(--accent)}.condition-card{border-left:3px solid var(--green)}.menu-card{border-left:3px solid var(--gold)}.recognition-card{border-left:3px solid #c2a7ff}
.dynamic-fields{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dynamic-fields .field.full{grid-column:1/-1}
.subbox{margin-top:11px;padding:10px;border:1px dashed var(--border);border-radius:10px}.subbox-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.subbox-head strong{font-size:.88rem}
.status-list{display:grid;gap:7px}.status{padding:8px 10px;border-radius:8px;border:1px solid var(--border);font-size:.82rem}.status.ok{color:var(--green)}.status.warn{color:var(--gold)}.status.err{color:var(--red)}
.tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.tab{border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--muted);padding:6px 10px}.tab.active{background:var(--panel2);color:var(--text);border-color:var(--accent)}
.empty{padding:18px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);text-align:center}
.file-tree{color:var(--muted);font:.78rem/1.45 "SFMono-Regular",Consolas,monospace;white-space:pre-wrap}
.passthrough{margin-top:12px;padding:10px;border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:.8rem}
.footer{border-top:1px solid var(--border);color:var(--muted);text-align:center;padding:24px}
@media(max-width:1150px){.creator-layout{grid-template-columns:210px minmax(0,1fr)}.preview{position:static;grid-column:1/-1;max-height:none}}
@media(max-width:760px){.nav{align-items:flex-start;flex-direction:column;padding-top:13px;padding-bottom:13px}.creator-layout{grid-template-columns:1fr}.sidebar,.preview{position:static}.form-grid,.dynamic-fields{grid-template-columns:1fr}}


/* The creator no longer owns global header geometry. This keeps navigation
   pixel-consistent with every other /dai/ page. */
.site-header .nav {
  max-width: var(--max);
  min-height: 72px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.site-header .nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}
.site-header .nav-links a {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 9px;
  white-space: nowrap;
}
.creator-layout > main {
  max-width: none;
  margin: 0;
  padding: 0;
}
.reaction-card { border-left: 3px solid #ff9fd1; }
.overlay-box { border-color: rgba(117,213,255,.45); }
.style-box { border-color: rgba(255,217,138,.45); }
.style-preview {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 8px;
  font-weight: 800;
}
.code-inline {
  font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--accent);
}
@media(max-width:1040px){
  .site-header .nav{grid-template-columns:1fr;gap:10px;padding-top:14px;padding-bottom:14px}
  .site-header .nav-links{justify-content:flex-start;flex-wrap:wrap;width:100%}
}


/* Resource-pack editor */
.resource-file-list{margin-top:12px}
.resource-file-card{border-left:3px solid var(--accent)}
.resource-file-path{font-family:"SFMono-Regular",Consolas,monospace}
.resource-meta{color:var(--muted);font-size:.76rem}

/* DAI 1.8 title/content editors */
.title-screen-card{border-left:3px solid #75d5ff}.title-button-card{border-color:rgba(117,213,255,.36)}.content-card{border-left:3px solid #8ee3a1}.content-card textarea{min-height:104px;font-family:"SFMono-Regular",Consolas,monospace;font-size:.78rem}