:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #17131f;
  color: #f8edd3;
  --panel: #282332;
  --panel-2: #332c40;
  --line: #5f536f;
  --gold: #f0c86a;
  --pink: #f083b4;
  --mint: #7fdbc2;
  --danger: #ff7e7e;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1120px; background: radial-gradient(circle at 70% 0, #3b2745, #17131f 52%); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { border: 1px solid #7f6c83; border-radius: 8px; background: #43394d; color: #fff5d8; padding: 8px 13px; cursor: pointer; }
button:hover { border-color: var(--gold); background: #52435c; }
button.primary { color: #281d18; border-color: #ffe39e; background: linear-gradient(#ffd996, #e6a65e); font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #665a73; border-radius: 6px; background: #1d1925; color: #fff9e8; padding: 8px; }
label { display: grid; gap: 5px; color: #d7c9aa; font-size: 13px; }
.topbar { height: 68px; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #594a65; background: #211a29ee; }
.topbar strong { font-size: 25px; color: var(--gold); margin-right: 13px; }
.topbar span { color: #bcaec2; }
.connection { display: flex; align-items: end; gap: 9px; }
.connection label { grid-template-columns: auto 180px; align-items: center; }
.connection i { min-width: 65px; color: #a99cae; font-size: 12px; }
main { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 68px); }
.sidebar { padding: 18px; background: #211c29; border-right: 1px solid #55475f; }
.sidebar h2 { margin: 18px 0 8px; color: #e8c978; font-size: 15px; }
.sidebar h2:first-child { margin-top: 0; }
.sidebar label { margin-top: 9px; }
.sidebar nav { display: grid; gap: 7px; }
.sidebar .tab { text-align: left; }
.sidebar .tab.active { border-color: var(--pink); color: #ffd8ec; box-shadow: inset 3px 0 var(--pink); }
.draft-context { margin-top: 18px; border: 1px solid #56495f; border-radius: 10px; padding: 10px; background: #18151f; }
.draft-context summary { cursor: pointer; color: var(--gold); font-weight: 700; }
.draft-context > *:not(summary) { margin-top: 9px; }
.row { display: flex; align-items: center; gap: 8px; }
.row > * { flex: 1; }
.workspace { padding: 20px; overflow: auto; }
.panel { display: none; max-width: 1220px; margin: auto; }
.panel.active { display: block; }
.panel-head { min-height: 62px; display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 14px; }
h1 { margin: 0; color: #ffe49a; font-size: 25px; }
h3 { color: var(--pink); margin: 13px 0 8px; }
p { margin: 7px 0; color: #bcb0c1; }
.editor-layout { display: grid; grid-template-columns: minmax(620px, 1fr) 280px; gap: 18px; }
.map-grid { --cols: 11; display: grid; grid-template-columns: repeat(var(--cols), 1fr); aspect-ratio: 1; width: min(72vh, 760px); max-width: 100%; border: 4px solid #8a7592; background: #111; user-select: none; }
.map-cell { position: relative; aspect-ratio: 1; border: 1px dashed #665e69; padding: 0; border-radius: 0; font-size: clamp(12px, 2.4vw, 23px); display: grid; place-items: center; }
.map-cell.floor { background: #4a494c; }
.map-cell.wall { background: repeating-linear-gradient(0deg, #8d5138 0 7px, #a66b45 7px 14px); }
.map-cell.void { background: #111; }
.map-cell.breakable-wall, .map-cell.hidden-wall { background: #76503e; outline: 2px dotted #f0c86a inset; }
.map-cell.start::after { content: "起"; position: absolute; right: 2px; bottom: 0; color: #93f2d4; font-size: 11px; }
.inspector, .split, .release-actions, .validation-summary, table, .code-editor { border: 1px solid var(--line); border-radius: 10px; background: #292331df; }
.inspector { padding: 13px; }
.inspector label { margin: 9px 0; }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tools button { min-height: 54px; padding: 4px; font-size: 12px; }
.tools button.active { border-color: #ffe49a; background: #6b4b61; box-shadow: 0 0 0 2px #ffe49a44; }
.hint { font-size: 12px; color: #aaa0af; margin-top: 8px; }
.split { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 13px; }
.form-grid .wide { grid-column: 1 / -1; }
.code-editor { display: block; width: 100%; height: 64vh; padding: 18px; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.release-actions { display: flex; align-items: end; gap: 12px; padding: 16px; }
.release-actions > * { flex: 1; }
.validation-summary { margin-top: 16px; padding: 14px; }
.release-history-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 24px; }
.release-history-head h2 { margin: 0; color: #ffe49a; font-size: 20px; }
.release-table button:disabled { cursor: default; opacity: .58; }
table { width: 100%; margin-top: 12px; border-collapse: collapse; overflow: hidden; }
th, td { padding: 9px; border-bottom: 1px solid #4d4456; text-align: left; font-size: 13px; }
tr.error td:first-child { color: var(--danger); }
tr.warning td:first-child { color: var(--gold); }
#toast { position: fixed; right: 20px; bottom: 20px; max-width: 420px; padding: 12px 16px; border: 1px solid #8b7591; border-radius: 8px; background: #1d1925ef; opacity: 0; pointer-events: none; transition: opacity .18s; }
#toast.show { opacity: 1; }
.phase-badge, .risk-badge { border: 1px solid #7f6c83; border-radius: 999px; padding: 7px 12px; color: var(--mint); white-space: nowrap; }
.risk-badge { color: #ffb0a2; border-color: #a75f5f; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric { min-height: 130px; border: 1px solid #5f536f; border-radius: 12px; padding: 17px; background: linear-gradient(145deg, #332b3d, #24202d); display: grid; gap: 5px; }
.metric span { color: #cfc0d3; }
.metric strong { color: #ffe49a; font-size: 33px; }
.metric small { color: #91869a; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.info-card { border: 1px solid #5f536f; border-radius: 12px; padding: 18px; background: #292331df; }
.info-card strong { color: #f0c86a; font-size: 17px; }
.info-card.warning { border-color: #9b675d; background: linear-gradient(145deg, #3c2b31, #29232d); }
.management-layout { display: grid; grid-template-columns: minmax(650px, 1fr) 330px; gap: 18px; align-items: start; }
.management-layout.roles-layout { grid-template-columns: 270px minmax(680px, 1fr); }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #292331df; }
.table-wrap table { border: 0; border-radius: 0; min-width: 760px; margin-top: 0; }
.status, .chip { display: inline-block; border: 1px solid #6b6074; border-radius: 999px; padding: 3px 8px; font-size: 12px; }
.status.active { color: var(--mint); border-color: #477b6c; }
.status.disabled { color: #ff9f9f; border-color: #8d5050; }
.chip { color: #edd1f6; margin: 2px; }
.permission-matrix { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 10px; margin-bottom: 13px; }
.permission-matrix fieldset { border: 1px solid #594e65; border-radius: 9px; padding: 10px; }
.permission-matrix legend { color: var(--gold); padding: 0 5px; }
.permission-matrix label { display: grid; grid-template-columns: 18px 1fr; gap: 4px 7px; margin: 7px 0; }
.permission-matrix input { width: auto; grid-row: 1 / span 2; align-self: center; }
.permission-matrix small { color: #8f8495; grid-column: 2; }
.searchbar, .audit-filters { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 13px; }
.audit-filters { grid-template-columns: repeat(3, 1fr); }
.debug-layout { display: grid; grid-template-columns: minmax(620px, 1fr) 320px; gap: 18px; align-items: start; }
code { color: #f4bddd; }
button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 1100px) { .connection label { grid-template-columns: auto 120px; } .editor-layout { grid-template-columns: 1fr 250px; } }
@media (max-width: 1200px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } }