:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --panel: rgba(255,255,255,.90);
  --panel-strong: #ffffff;
  --ink: #17213a;
  --muted: #69738b;
  --line: rgba(80,96,140,.16);
  --line-strong: rgba(80,96,140,.24);
  --accent: #5267e9;
  --accent-dark: #3f53cf;
  --accent-soft: #eef1ff;
  --green: #168669;
  --green-soft: #e8f7f1;
  --orange: #bd692e;
  --orange-soft: #fff1e7;
  --red: #c34c5a;
  --red-soft: #ffedf0;
  --shadow: 0 18px 50px rgba(60,74,115,.10);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg); font-family: Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing: antialiased; }
button,input,select,textarea { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 64px; }
.topbar { position: sticky; top: 12px; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 72px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.95); outline: 1px solid var(--line); outline-offset: -1px; border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 12px 34px rgba(60,74,115,.10); backdrop-filter: blur(22px); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 14px; background: #20294b; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.brand strong,.brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: -.01em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.nav { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: #f7f8fc; }
.nav-item { border: 0; border-radius: 9px; padding: 9px 15px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; }
.nav-item:hover { color: var(--ink); }
.nav-item.active { background: #fff; color: var(--accent); box-shadow: 0 4px 14px rgba(55,69,112,.10); }
.gpu-pill { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-width: 120px; padding: 9px 12px; border-radius: 999px; font-size: 12px; }
.gpu-pill span { width: 8px; height: 8px; border-radius: 50%; }
.gpu-pill.online { color: var(--green); background: var(--green-soft); }
.gpu-pill.online span { background: var(--green); box-shadow: 0 0 0 4px rgba(22,134,105,.10); }
.gpu-pill.offline { color: var(--orange); background: var(--orange-soft); }
.gpu-pill.offline span { background: var(--orange); }
main { padding-top: 22px; }
.hero { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(430px,.65fr); gap: 46px; align-items: end; padding: 38px 42px; border-radius: 28px; background: #171b2c; color: #fff; box-shadow: 0 24px 70px rgba(34,43,82,.20); }
.eyebrow { margin: 0 0 12px; color: #8797f5; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.hero h1 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(34px,4vw,58px); line-height: 1.06; letter-spacing: -.055em; }
.hero-copy { max-width: 760px; margin: 17px 0 0; color: #c8cede; font-size: 14px; line-height: 1.8; }
.hero-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.hero-meta div { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(255,255,255,.06); }
.hero-meta span,.hero-meta strong { display: block; }
.hero-meta span { color: #939cb3; font-size: 9px; letter-spacing: .10em; }
.hero-meta strong { margin-top: 6px; color: #fff; font-size: 12px; white-space: nowrap; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 16px 0; }
.kpi { padding: 18px 20px; border: 1px solid rgba(255,255,255,.95); outline: 1px solid var(--line); outline-offset: -1px; border-radius: 18px; background: var(--panel); box-shadow: 0 10px 30px rgba(60,74,115,.06); }
.kpi span,.kpi small { display: block; color: var(--muted); font-size: 11px; }
.kpi strong { display: block; margin: 8px 0 4px; font-size: 27px; letter-spacing: -.04em; }
.view { display: none; }
.view.active { display: block; }
.production-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: 16px; align-items: start; }
.right-stack { display: grid; gap: 16px; }
.card { border: 1px solid rgba(255,255,255,.96); outline: 1px solid var(--line); outline-offset: -1px; border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.creation-card,.queue-card,.output-card,.recent-card,.page-card,.prompt-editor,.prompt-library { padding: 22px; }
.card-head { margin-bottom: 20px; }
.card-head.compact { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.card-head > div,.dialog-head > div { display: flex; align-items: center; gap: 10px; }
.card-head h2,.page-heading h2,.dialog-head h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.card-head p,.page-heading p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.step { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 25px; padding: 0 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.upload-zone { position: relative; display: grid; place-items: center; min-height: 220px; overflow: hidden; border: 1px dashed rgba(82,103,233,.38); border-radius: 17px; background: #fafbff; cursor: pointer; }
.upload-zone:hover { border-color: var(--accent); background: #f6f7ff; }
.upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone img { display: none; width: 100%; height: 260px; object-fit: contain; background: #eef1f8; }
.upload-zone.has-image img { display: block; }
.upload-zone.has-image .upload-copy { position: absolute; left: 12px; bottom: 12px; width: auto; padding: 9px 12px; border-radius: 11px; background: rgba(23,33,58,.84); color: white; }
.upload-copy { text-align: center; pointer-events: none; }
.upload-copy b,.upload-copy small { display: block; }
.upload-copy b { color: var(--accent); font-size: 15px; }
.upload-copy small { margin-top: 8px; color: var(--muted); font-size: 11px; }
.upload-zone.has-image .upload-copy b { color: #fff; font-size: 12px; }
.upload-zone.has-image .upload-copy small { display: none; }
.field { margin-top: 15px; }
.field > label,.field-label label { display: block; margin-bottom: 7px; color: #4e5870; font-size: 12px; font-weight: 800; }
.field-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.field-label span { color: #929aae; font-size: 10px; }
input,select,textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); outline: none; }
input,select { height: 43px; padding: 0 12px; }
textarea { resize: vertical; padding: 11px 12px; line-height: 1.6; }
input:focus,select:focus,textarea:focus { border-color: rgba(82,103,233,.65); box-shadow: 0 0 0 3px rgba(82,103,233,.10); }
.advanced { margin-top: 16px; padding: 0 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcff; }
.advanced summary { padding: 13px 0; cursor: pointer; color: #4e5870; font-size: 12px; font-weight: 850; }
.parameter-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 12px; }
.submit-row { display: grid; grid-template-columns: minmax(180px,.42fr) 1fr; align-items: center; gap: 16px; margin-top: 18px; }
.submit-row p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.primary-button,.secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; border: 0; border-radius: 13px; text-decoration: none; cursor: pointer; font-weight: 850; }
.primary-button { background: var(--accent); color: #fff; box-shadow: 0 11px 23px rgba(82,103,233,.22); }
.primary-button:hover { background: var(--accent-dark); }
.primary-button:disabled { opacity: .55; cursor: wait; }
.secondary-button { width: 100%; margin-top: 13px; border: 1px solid var(--line-strong); background: #fff; color: var(--accent); }
.secondary-button.disabled { pointer-events: none; color: #a5adbe; background: #f5f6fa; }
.text-button { border: 0; padding: 3px; background: transparent; color: var(--accent); cursor: pointer; font-size: 11px; font-weight: 800; }
.queue-list { display: grid; gap: 9px; min-height: 92px; }
.queue-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcff; }
.queue-item b,.queue-item small { display: block; }
.queue-item b { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.queue-item small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.empty { display: grid; place-items: center; min-height: 92px; border: 1px dashed var(--line-strong); border-radius: 13px; color: #929aae; font-size: 12px; }
.video-stage { position: relative; display: grid; place-items: center; aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; background: #10131f; }
.video-stage video { display: none; width: 100%; height: 100%; object-fit: contain; }
.video-stage.has-video video { display: block; }
.video-empty { display: grid; gap: 7px; text-align: center; color: #7f899e; }
.video-empty b { color: #c0c6d2; font-size: 13px; }
.video-empty span { font-size: 10px; }
.video-stage.has-video .video-empty { display: none; }
.muted { color: var(--muted); font-size: 10px; }
.recent-card { margin-top: 16px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th,td { padding: 13px 11px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; vertical-align: middle; }
th { color: #7b8498; font-weight: 750; }
td { color: #3e4860; }
tbody tr:last-child td { border-bottom: 0; }
.job-title { display: block; max-width: 360px; color: var(--ink); font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-prompt { display: block; max-width: 360px; margin-top: 4px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 850; }
.status.completed { color: var(--green); background: var(--green-soft); }
.status.queued { color: var(--orange); background: var(--orange-soft); }
.status.running { color: var(--accent); background: var(--accent-soft); }
.status.failed { color: var(--red); background: var(--red-soft); }
.row-actions { display: flex; gap: 9px; align-items: center; }
.row-actions button,.row-actions a { border: 0; background: transparent; color: var(--accent); text-decoration: none; cursor: pointer; font-size: 10px; font-weight: 800; white-space: nowrap; }
.page-card { min-height: 560px; }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.page-heading .eyebrow { margin-bottom: 8px; }
.page-heading select { width: 150px; }
.prompt-layout { display: grid; grid-template-columns: minmax(380px,.8fr) minmax(0,1.2fr); gap: 16px; align-items: start; }
.prompt-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.prompt-card { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fbfcff; }
.prompt-card header { display: flex; justify-content: space-between; gap: 12px; }
.prompt-card h3 { margin: 0; font-size: 13px; }
.prompt-card .category { color: var(--accent); font-size: 10px; font-weight: 800; }
.prompt-card p { display: -webkit-box; overflow: hidden; margin: 11px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.prompt-card footer { display: flex; justify-content: space-between; align-items: center; }
.prompt-card small { color: #929aae; font-size: 9px; }
dialog { width: min(820px,calc(100% - 30px)); max-height: 86vh; overflow: auto; padding: 0; border: 0; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 90px rgba(25,34,66,.28); }
dialog::backdrop { background: rgba(20,27,48,.50); backdrop-filter: blur(5px); }
.dialog-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.dialog-head button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
#dialogBody { padding: 20px; }
.detail-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 16px; }
.detail-grid div { padding: 12px; border-radius: 11px; background: #f6f7fb; }
.detail-grid span,.detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: 9px; }
.detail-grid strong { margin-top: 5px; font-size: 11px; }
.detail-section { margin-top: 16px; }
.detail-section h3 { margin: 0 0 8px; font-size: 12px; }
.detail-section pre,.detail-section p { margin: 0; padding: 13px; border-radius: 11px; background: #f6f7fb; color: #465069; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-video { width: 100%; max-height: 460px; border-radius: 13px; background: #10131f; }
#toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 360px; padding: 13px 16px; border-radius: 13px; background: #202943; color: #fff; box-shadow: 0 16px 40px rgba(25,34,66,.25); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .22s ease; font-size: 12px; }
#toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 1050px) { .topbar { grid-template-columns: 1fr auto; }.nav { order: 3; grid-column: 1/-1; justify-content: center; }.hero { grid-template-columns: 1fr; }.hero-meta { max-width: 640px; }.production-grid,.prompt-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .app-shell { width: min(100% - 22px,620px); padding-top: 11px; }.topbar { top: 7px; border-radius: 16px; }.brand small { display: none; }.gpu-pill { min-width: 0; }.gpu-pill b { display: none; }.nav { overflow-x: auto; }.hero { padding: 28px 22px; border-radius: 22px; }.hero-meta,.kpi-grid { grid-template-columns: repeat(2,1fr); }.hero-meta div:last-child { grid-column: 1/-1; }.creation-card,.queue-card,.output-card,.recent-card,.page-card,.prompt-editor,.prompt-library { padding: 17px; }.submit-row,.parameter-grid { grid-template-columns: 1fr; }.submit-row { gap: 9px; }.prompt-cards { grid-template-columns: 1fr; }.detail-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .topbar { grid-template-columns: 1fr auto; }.brand strong { font-size: 12px; }.nav-item { padding-inline: 11px; }.kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.kpi { padding: 15px; }.hero-meta { grid-template-columns: 1fr; }.hero-meta div:last-child { grid-column: auto; }.card-head.compact,.page-heading { align-items: flex-start; }.page-heading { flex-direction: column; }.page-heading select { width: 100%; } }