:root {
  color-scheme: dark;
  --studio-bg: #070810;
  --studio-panel: rgba(17, 20, 34, .78);
  --studio-panel-solid: #111422;
  --studio-line: rgba(163, 174, 219, .18);
  --studio-text: #f4f6ff;
  --studio-muted: #a3aac2;
  --studio-blue: #7598ff;
  --studio-purple: #b28cff;
  --studio-red: #ff6f91;
  --studio-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

html, body { background: var(--studio-bg); color: var(--studio-text); }
body {
  background:
    radial-gradient(circle at 7% 0%, rgba(117, 152, 255, .18), transparent 29%),
    radial-gradient(circle at 93% 9%, rgba(178, 140, 255, .16), transparent 26%),
    radial-gradient(circle at 58% 100%, rgba(255, 111, 145, .12), transparent 30%),
    var(--studio-bg);
}
body::before {
  display: block;
  background-image: linear-gradient(rgba(163, 174, 219, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 174, 219, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
body::after, .app-shell::before, .panel::before, .settings-card::before, .image-tile::before { display: none; }

.app-shell { width: min(1480px, 100%); padding: 22px 26px 42px; }
.topbar {
  min-height: 76px;
  border: 1px solid var(--studio-line);
  border-radius: 18px;
  background: linear-gradient(115deg, rgba(22, 35, 78, .96), rgba(57, 35, 91, .92) 52%, rgba(89, 30, 59, .9));
  box-shadow: var(--studio-shadow), inset 0 1px rgba(255, 255, 255, .08);
}
.topbar-copy::before { background: linear-gradient(100deg, #315bd8, #814ed1 54%, #c73d69); color: #eef1ff; }
h1, h2 { color: var(--studio-text); }
.topbar p, .help-text { color: var(--studio-muted); }
.status-pill { border-color: rgba(117, 152, 255, .32); background: rgba(40, 51, 95, .44); color: #c5d1ff; }
.status-pill.good { border-color: rgba(255, 111, 145, .42); background: rgba(118, 48, 80, .25); color: #ffc0d0; }
.status-pill.bad { border-color: rgba(255, 141, 120, .4); background: rgba(118, 48, 54, .26); color: #ffc1b3; }
.status-pill.good .status-dot { background: var(--studio-red); box-shadow: 0 0 14px rgba(255, 111, 145, .7); }

.layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.content { min-width: 0; }
.canvas-heading { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.canvas-heading h2, .inspector-head h2 { margin-top: 5px; font-size: 20px; letter-spacing: -.02em; }
.eyebrow { color: #8b96b4; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.canvas-actions { display: flex; align-items: center; gap: 10px; }
.canvas-meta { color: #9ca8c4; font-size: 12px; }
.result-panel { min-height: calc(100vh - 120px); border-color: var(--studio-line); border-radius: 18px; background: linear-gradient(145deg, rgba(13, 16, 28, .94), rgba(20, 19, 37, .82)); box-shadow: var(--studio-shadow), inset 0 1px rgba(255, 255, 255, .04); }
.result-grid { min-height: calc(100vh - 122px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px; }
.result-grid:empty::before { min-height: calc(100vh - 170px); border: 1px dashed rgba(117, 152, 255, .36); border-radius: 15px; background: linear-gradient(135deg, rgba(117, 152, 255, .1), rgba(178, 140, 255, .08) 52%, rgba(255, 111, 145, .1)); color: #9ea9c6; content: "选择参数，开始生成"; font-size: 15px; letter-spacing: .04em; }
.image-tile { min-height: 360px; border-color: var(--studio-line); border-radius: 14px; background: linear-gradient(145deg, rgba(25, 28, 47, .92), rgba(11, 15, 24, .94)); box-shadow: inset 0 1px rgba(255, 255, 255, .05); }
.tile-state { min-height: 360px; }
.tile-state img { height: 334px; }

.sidebar { position: static; height: auto; min-height: 0; }
.control-panel { display: block; height: auto; max-height: none; border-color: var(--studio-line); background: var(--studio-panel); box-shadow: var(--studio-shadow), inset 0 1px rgba(255, 255, 255, .06); backdrop-filter: blur(18px); }
.control-panel > .panel-body { min-height: 0; overflow: visible; padding: 15px 18px 18px; }
.control-panel .panel-head { display: none; }
.inspector-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--studio-line); background: linear-gradient(115deg, rgba(117, 152, 255, .13), rgba(178, 140, 255, .11), rgba(255, 111, 145, .1)); }
.inspector-live { padding: 4px 6px; border: 1px solid rgba(255, 111, 145, .42); border-radius: 5px; background: rgba(118, 48, 80, .28); color: #ffc0d0; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.capability-summary, .capability-editor, .custom-ratio { border-color: rgba(163, 174, 219, .2); background: rgba(21, 25, 42, .7); }
.capability-tag { border-color: rgba(255, 111, 145, .32); background: rgba(118, 48, 80, .25); color: #ffc0d0; }
.text-btn { color: var(--studio-blue); }

input, textarea, select { border-color: rgba(163, 174, 219, .22); border-radius: 9px; background: rgba(6, 9, 17, .62); color: var(--studio-text); }
input:focus, textarea:focus, select:focus { border-color: var(--studio-blue); background: rgba(9, 13, 24, .82); box-shadow: 0 0 0 3px rgba(117, 152, 255, .15); }
input[type="file"]::file-selector-button { background: linear-gradient(100deg, #315bd8, #814ed1 54%, #c73d69); color: #f0edff; }
.btn, .seg, .count-btn, .mini-btn, .ratio-btn { border-color: rgba(163, 174, 219, .22); border-radius: 9px; background: rgba(31, 36, 57, .68); color: #d3d8e9; }
.btn:hover, .seg:hover, .count-btn:hover, .mini-btn:hover, .ratio-btn:hover { border-color: rgba(117, 152, 255, .64); background: rgba(52, 58, 91, .72); transform: translateY(-1px); }
.btn.primary { width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: linear-gradient(100deg, #5d8dff, #a36ee8 52%, #ff6f91); color: #fff; box-shadow: 0 10px 26px rgba(130, 93, 220, .25); font-weight: 850; }
.btn.primary:hover { background: linear-gradient(100deg, #7ba3ff, #bd8bf5 52%, #ff93ac); }
.icon-btn { border-color: rgba(178, 140, 255, .42); background: linear-gradient(100deg, rgba(117, 152, 255, .2), rgba(178, 140, 255, .2)); color: #e2d9ff; }
.seg.active, .count-btn.active { border-color: rgba(178, 140, 255, .72); background: linear-gradient(100deg, rgba(117, 152, 255, .25), rgba(178, 140, 255, .23), rgba(255, 111, 145, .18)); color: #e4dcff; }
.size-btn { min-height: 59px; border-color: rgba(163, 174, 219, .2); background: rgba(15, 19, 32, .72); }
.size-btn strong { color: #f1f3ff; }
.size-btn span { color: #8c98b2; }
.size-btn.active { border-color: var(--studio-purple); background: linear-gradient(135deg, rgba(117, 152, 255, .16), rgba(178, 140, 255, .18), rgba(255, 111, 145, .15)); box-shadow: inset 0 0 0 1px rgba(178, 140, 255, .28); }
.loading { background: linear-gradient(100deg, #202842, #39304f, #542d43); background-size: 220% 100%; }
.error-box { border-color: rgba(255, 141, 120, .44); background: rgba(118, 48, 54, .28); color: #ffc1b3; }

.modal { background: rgba(3, 5, 8, .76); backdrop-filter: blur(12px); }
.settings-card { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 28px); border-color: rgba(163, 174, 219, .25); border-radius: 17px; background: #111522; box-shadow: 0 30px 90px rgba(0, 0, 0, .52), 0 0 60px rgba(117, 152, 255, .1); }
.settings-card .panel-head { background: linear-gradient(115deg, rgba(117, 152, 255, .14), rgba(178, 140, 255, .12), rgba(255, 111, 145, .1)); }
.settings-card .panel-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3c4560 transparent; }

body::-webkit-scrollbar, .settings-card .panel-body::-webkit-scrollbar { width: 7px; height: 7px; }
body::-webkit-scrollbar-track, .settings-card .panel-body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb, .settings-card .panel-body::-webkit-scrollbar-thumb { border: 2px solid var(--studio-bg); border-radius: 20px; background: #3c4560; }

@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { padding: 12px 12px 28px; }
  .layout { grid-template-columns: 1fr; }
  .canvas-heading { align-items: flex-start; flex-direction: column; }
  .canvas-actions { width: 100%; justify-content: space-between; }
  .result-panel { min-height: 420px; }
  .result-grid, .result-grid:empty::before { min-height: 380px; }
}