:root {
  color-scheme: dark;
  --bg: #08111d;
  --panel: #101c2b;
  --panel-2: #132235;
  --line: #25364a;
  --text: #eef5fb;
  --muted: #8ca0b7;
  --blue: #3a9cff;
  --cyan: #52d5d0;
  --green: #55d88a;
  --amber: #ffbf5d;
  --red: #ff6b72;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 70% 0%, #132942 0, var(--bg) 42%); color: var(--text); min-height: 100vh; }
button, select, input, textarea { font: inherit; }
button, .file-button { border: 1px solid var(--line); color: var(--text); background: #17273a; border-radius: 8px; padding: 9px 13px; cursor: pointer; transition: .18s ease; }
button:hover, .file-button:hover { border-color: #4f6c89; transform: translateY(-1px); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
button.primary { background: linear-gradient(135deg, #167be5, #36a7ef); border-color: transparent; }
button.approve { background: #173e2c; border-color: #2f7753; color: #a8f0c6; }
.topbar { height: 70px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: rgba(7, 17, 29, .88); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg, var(--blue), var(--cyan)); color: #04111d; font-weight: 800; }
.brand strong, .brand span { display: block; }
.brand span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.tenant { color: var(--muted); display: flex; align-items: center; gap: 9px; font-size: 13px; }
.tenant input { width: 120px; background: #0c1724; color: var(--text); border: 1px solid var(--line); padding: 7px 9px; border-radius: 7px; }
.workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: calc(100vh - 70px); }
.sidebar { border-right: 1px solid var(--line); padding: 18px 14px; background: rgba(10, 21, 34, .76); }
.create-card { background: linear-gradient(145deg, #14263a, #101c2b); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 9px; }
.create-card select { width: 100%; color: var(--text); background: #0b1724; border: 1px solid var(--line); border-radius: 8px; padding: 9px; }
.file-button { text-align: center; }
.file-button input { display: none; }
.eyebrow { color: var(--cyan); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 6px; }
.list-head { display: flex; justify-content: space-between; align-items: center; margin: 22px 4px 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
button.icon { padding: 3px 8px; border: 0; background: transparent; font-size: 18px; }
.job-list { display: grid; gap: 8px; }
.job-item { padding: 11px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; background: rgba(18, 32, 48, .7); }
.job-item:hover, .job-item.active { border-color: #3d5d7d; background: #15283c; }
.job-item strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-item small { color: var(--muted); display: flex; justify-content: space-between; margin-top: 7px; }
.main-panel { padding: 24px; min-width: 0; }
.empty-state { min-height: 70vh; display: grid; place-content: center; text-align: center; color: var(--muted); }
.empty-state h1 { color: var(--text); margin-bottom: 6px; }
.empty-state p { max-width: 520px; line-height: 1.7; }
.empty-icon { color: var(--cyan); font-size: 62px; }
.hidden { display: none !important; }
.job-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.job-header h1 { margin: 0; font-size: 27px; }
.meta { color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 7px; font-size: 13px; }
.header-actions { display: flex; gap: 8px; }
.summary-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr); gap: 16px; }
.preview-card, .quality-card, .editor-card { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(150deg, rgba(19,34,53,.95), rgba(12,24,38,.95)); overflow: hidden; }
.card-title { min-height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 650; }
.legend { color: var(--muted); font-size: 11px; font-weight: 400; }
.legend i { display: inline-block; width: 8px; height: 8px; background: var(--amber); border-radius: 50%; margin-right: 5px; }
#preview { width: 100%; height: 430px; display: block; background: radial-gradient(circle at 50% 40%, #18324c, #0a1522 70%); }
.quality-summary { padding: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quality-pill { padding: 10px 5px; text-align: center; border-radius: 8px; background: #0b1724; }
.quality-pill strong { display: block; font-size: 22px; }
.quality-pill span { color: var(--muted); font-size: 11px; }
.quality-pill.error strong { color: var(--red); }
.quality-pill.warning strong { color: var(--amber); }
.quality-pill.info strong { color: var(--cyan); }
.issues { max-height: 335px; overflow: auto; padding: 0 12px 12px; }
.issue { border-left: 3px solid var(--line); padding: 9px 10px; margin: 6px 0; background: #0c1724; border-radius: 0 7px 7px 0; }
.issue.Error { border-color: var(--red); }
.issue.Warning { border-color: var(--amber); }
.issue.Info { border-color: var(--cyan); }
.issue strong { font-size: 12px; display: block; }
.issue span { font-size: 11px; color: var(--muted); line-height: 1.5; }
.editor-card { margin-top: 16px; }
#specEditor { width: 100%; min-height: 410px; resize: vertical; border: 0; outline: 0; background: #07111c; color: #cde6f7; padding: 16px; font: 12px/1.6 "Cascadia Code", Consolas, monospace; tab-size: 2; }
.editor-actions { padding: 12px 15px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.muted { color: var(--muted); font-size: 11px; font-weight: 400; }
.status { padding: 3px 7px; border-radius: 999px; background: #163049; color: #9fd3ff; }
.status.Published { background: #143a29; color: #8fe8b6; }
.status.Draft, .status.QaFailed { background: #412127; color: #ff9da2; }
.toast { position: fixed; right: 22px; bottom: 22px; min-width: 260px; max-width: 460px; padding: 12px 15px; border: 1px solid #41617e; border-radius: 9px; background: #13263a; box-shadow: 0 14px 48px #0008; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #96434b; }
@media (max-width: 980px) { .workspace { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid var(--line); } .summary-grid { grid-template-columns: 1fr; } .job-header { flex-direction: column; } }