:root {
  color-scheme: dark;
  --bg: #050507;
  --panel: #0d0d12;
  --panel-2: #13131a;
  --line: #252531;
  --text: #f5f5f7;
  --muted: #9696a3;
  --accent: #f24fa8;
  --accent2: #8257ff;
  --ok: #54e6a1;
  --warn: #ffcc66;
  --bad: #ff6b7c;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background-image: radial-gradient(circle at 20% -10%, rgba(130,87,255,.15), transparent 28rem), linear-gradient(180deg, #08080c 0%, #050507 55%); }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.wrap { width: min(980px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 60px; }
.brand { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.brandmark { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.08em; }
.logo { width:40px; height:40px; border:1px solid #3c3c4d; border-radius:50%; display:grid; place-items:center; font-size:12px; background:#0c0c11; }
.badge { padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.card { background:rgba(13,13,18,.88); border:1px solid var(--line); border-radius:16px; padding:20px; backdrop-filter: blur(16px); }
.hero { padding:26px; margin-bottom:14px; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:8px 0 8px; font-size:clamp(30px, 6vw, 58px); line-height:.96; letter-spacing:-.045em; }
h2 { margin:0 0 14px; font-size:18px; }
p { color:var(--muted); line-height:1.55; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.stack { display:grid; gap:12px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spread { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.field { display:grid; gap:7px; }
.field label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
input { width:100%; min-height:46px; background:#09090d; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:0 13px; outline:none; }
input:focus { border-color:#5a5a75; box-shadow:0 0 0 3px rgba(130,87,255,.12); }
.btn { min-height:44px; border:1px solid var(--line); background:#15151d; color:var(--text); border-radius:10px; padding:0 15px; font-weight:700; }
.btn.primary { background:linear-gradient(135deg,var(--accent2),var(--accent)); border-color:transparent; }
.btn.ghost { background:transparent; }
.btn.danger { border-color:#4d252a; color:#ffadb6; }
.tabs { display:flex; gap:8px; margin-bottom:14px; }
.tab { background:#0b0b0f; border:1px solid var(--line); color:var(--muted); padding:10px 14px; border-radius:10px; }
.tab.active { color:var(--text); border-color:#4a4a5e; }
.status-line { display:flex; align-items:center; gap:10px; }
.dot { width:9px; height:9px; border-radius:50%; background:#62626f; box-shadow:0 0 0 4px rgba(255,255,255,.03); }
.dot.ok { background:var(--ok); box-shadow:0 0 18px rgba(84,230,161,.45); }
.dot.warn { background:var(--warn); }
.dot.bad { background:var(--bad); }
.metric { padding:14px; border:1px solid var(--line); background:#09090d; border-radius:12px; }
.metric .k { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.metric .v { margin-top:6px; font-size:19px; font-weight:800; }
.permission { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:14px 0; border-top:1px solid var(--line); }
.permission:first-child { border-top:0; padding-top:0; }
.permission p { margin:4px 0 0; font-size:13px; }
.pill { padding:6px 9px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; background:#181821; color:var(--muted); }
.pill.ok { color:var(--ok); background:rgba(84,230,161,.08); }
.pill.warn { color:var(--warn); background:rgba(255,204,102,.08); }
.world-btn { display:flex; width:100%; color:inherit; cursor:pointer; text-align:left; align-items:center; justify-content:space-between; text-decoration:none; padding:18px; border:1px solid #43355f; background:linear-gradient(135deg,rgba(130,87,255,.14),rgba(242,79,168,.08)); border-radius:14px; }
.world-btn strong { font-size:18px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:#b4b4bf; word-break:break-all; }
.hidden { display:none !important; }
.notice { border:1px solid var(--line); background:#0a0a0e; padding:12px 14px; border-radius:10px; color:var(--muted); font-size:13px; }
.notice.error { border-color:#482228; color:#ffb2bb; }
footer { margin-top:24px; color:#6f6f7c; font-size:12px; text-align:center; }
@media (max-width: 700px) { .grid { grid-template-columns:1fr; } .wrap { width:min(100% - 20px,980px); padding-top:14px; } .hero { padding:20px; } .brand { margin-bottom:14px; } }

/* v0.4 Producer.Gio PLAY MODE */
.world-control-card{position:relative;overflow:hidden}.world-control-card:before{content:"";position:absolute;inset:auto -70px -90px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(242,79,168,.14),transparent 68%);pointer-events:none}.world-btn.secondary{background:#0a0a0f;border-color:#2a2a36}.play-mode-btn{border-color:#8b3f96;background:linear-gradient(135deg,rgba(130,87,255,.28),rgba(242,79,168,.22));box-shadow:0 0 0 1px rgba(242,79,168,.08) inset}.play-mode-btn:not(:disabled){box-shadow:0 0 30px rgba(242,79,168,.12)}.world-state-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.world-control-card .pill.ok{box-shadow:0 0 14px rgba(84,230,161,.12)}@media(max-width:700px){.world-state-grid{grid-template-columns:1fr 1fr}}

.control-toggle-btn{border-color:#38404a;background:linear-gradient(135deg,rgba(28,34,43,.95),rgba(12,14,19,.95));box-shadow:0 0 0 1px rgba(255,255,255,.03) inset}.control-toggle-btn.active{border-color:#52d998;background:linear-gradient(135deg,rgba(22,101,69,.32),rgba(13,43,35,.92));box-shadow:0 0 24px rgba(82,217,152,.12)}.control-toggle-btn.active #playerControlIcon{color:#70efb3;text-shadow:0 0 14px rgba(112,239,179,.6)}