/* ============================================================================
   自研 Agent 与管理员配置外部模型的统一图像工作室
   ============================================================================ */

#aiStudioPage {
  --ai-accent:#9c7cff;
  --ai-accent-2:#4dcfd0;
  --ai-accent-warm:#ff8bb3;
  --ai-panel:rgba(18,25,47,.9);
  --ai-panel-soft:rgba(29,37,66,.72);
  --ai-line:rgba(151,166,220,.2);
  --ai-line-strong:rgba(156,124,255,.42);
  display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0;
  color:var(--text,#eef2f8); overflow:hidden;
  background:
    radial-gradient(900px 520px at -8% -12%,rgba(92,76,220,.27),transparent 67%),
    radial-gradient(760px 500px at 105% 7%,rgba(43,192,191,.16),transparent 70%),
    linear-gradient(160deg,#0b1022 0%,#10162d 54%,#0a1225 100%);
}
#aiStudioPage::before {
  content:''; position:fixed; inset:0; pointer-events:none; opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 70%);
}

.ai-studio-header {
  position:relative; z-index:5; flex:0 0 auto; min-height:68px;
  padding:11px max(20px,env(safe-area-inset-right)) 11px max(20px,env(safe-area-inset-left));
  display:flex; align-items:center; gap:13px;
  background:rgba(8,13,29,.75); border-bottom:1px solid var(--ai-line);
  backdrop-filter:blur(20px) saturate(1.25); -webkit-backdrop-filter:blur(20px) saturate(1.25);
}
.ai-studio-back,.ai-studio-logout {
  width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center;
  color:var(--text-dim,#c4c9d6); background:rgba(255,255,255,.04);
  border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:14px;
  cursor:pointer; font:700 18px/1 inherit; transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.ai-studio-back:hover,.ai-studio-logout:hover { color:#fff; background:rgba(156,124,255,.1); border-color:rgba(156,124,255,.52); transform:translateY(-1px); }
.ai-studio-back:disabled,.ai-studio-logout:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.ai-studio-brand { min-width:0; display:flex; align-items:center; gap:11px; }
.ai-studio-brand-mark {
  width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(145deg,var(--ai-accent),#765ee8 48%,var(--ai-accent-2));
  border:1px solid rgba(255,255,255,.16); border-radius:14px;
  box-shadow:0 10px 28px rgba(92,71,203,.32),inset 0 1px rgba(255,255,255,.18);
}
.ai-studio-brand-mark svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ai-studio-brand-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.ai-studio-brand-copy strong { overflow:hidden; color:#fff; font-size:15px; letter-spacing:.1px; white-space:nowrap; text-overflow:ellipsis; }
.ai-studio-brand-copy small { color:#8f9ab3; font-size:10px; font-weight:700; letter-spacing:1.35px; }
.ai-studio-header-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.ai-provider-badge {
  min-height:34px; padding:7px 11px; display:inline-flex; align-items:center; gap:8px;
  color:#d9e1ef; background:rgba(255,255,255,.045); border:1px solid var(--ai-line);
  border-radius:999px; font-size:11px; font-weight:700;
}
.ai-provider-badge::before { content:''; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#8991a2; box-shadow:0 0 0 3px rgba(137,145,162,.12); }
.ai-provider-badge.ready::before { background:#4dd6a5; box-shadow:0 0 0 3px rgba(77,214,165,.14),0 0 13px rgba(77,214,165,.55); }
.ai-provider-badge.blocked::before { background:#f2aa62; box-shadow:0 0 0 3px rgba(242,170,98,.15); }

.ai-studio-main {
  position:relative; z-index:1; min-height:0; flex:1; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch; padding:clamp(20px,3vw,38px) max(16px,env(safe-area-inset-right)) max(38px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.ai-studio-intro { width:min(1320px,100%); margin:0 auto 24px; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; }
.ai-studio-intro .eyebrow { color:#86dddd; font-size:10px; font-weight:800; letter-spacing:1.6px; }
.ai-studio-intro h1 { margin:8px 0; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-1.2px; }
.ai-studio-intro p { max-width:760px; margin:0; color:#b9c3d6; font-size:13px; line-height:1.75; }
.ai-studio-capabilities { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; }
.ai-studio-capabilities span { padding:5px 9px; color:#c8d3e8; background:rgba(255,255,255,.035); border:1px solid var(--ai-line); border-radius:999px; font-size:10px; }
.ai-studio-capabilities span::before { content:'✓'; margin-right:5px; color:#59d8c8; font-weight:800; }
.ai-agent-loop {
  width:max-content; max-width:100%; margin-top:12px; padding:8px 10px; display:flex; align-items:center; gap:8px;
  color:#aebbd0; background:linear-gradient(120deg,rgba(11,18,43,.72),rgba(33,31,72,.58));
  border:1px solid rgba(134,154,214,.18); border-radius:13px; box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.ai-agent-loop span { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:760; white-space:nowrap; }
.ai-agent-loop span b {
  width:23px; height:23px; display:inline-flex; align-items:center; justify-content:center; color:#dffefa;
  background:linear-gradient(145deg,rgba(70,210,192,.22),rgba(125,104,239,.24));
  border:1px solid rgba(103,218,205,.27); border-radius:8px; font-size:8px; letter-spacing:.4px;
}
.ai-agent-loop i { color:#65728c; font-size:11px; font-style:normal; }
.ai-studio-notice { max-width:390px; padding:14px 16px; display:flex; flex-direction:column; gap:5px; color:#b8c2d5; background:linear-gradient(145deg,rgba(156,124,255,.11),rgba(77,207,208,.06)); border:1px solid rgba(141,137,222,.24); border-radius:16px; font-size:11px; line-height:1.6; }
.ai-studio-notice strong { color:#f1f4fa; font-size:12px; }

.ai-studio-grid { width:min(1320px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(360px,455px) minmax(0,1fr); gap:20px; align-items:start; }
.ai-studio-panel {
  min-width:0; background:linear-gradient(155deg,rgba(27,35,65,.94),var(--ai-panel));
  border:1px solid var(--ai-line); border-radius:24px;
  box-shadow:0 26px 70px rgba(0,5,25,.34),inset 0 1px rgba(255,255,255,.045);
}
.ai-studio-form-panel { padding:23px; }
.ai-studio-section + .ai-studio-section { margin-top:23px; padding-top:21px; border-top:1px solid rgba(151,166,220,.12); }
.ai-section-kicker { margin-bottom:7px; display:block; color:#7ad9d5; font-size:9px; font-weight:850; letter-spacing:1.35px; }
.ai-model-select-wrap { position:relative; }
.ai-model-select-wrap::after {
  position:absolute; top:50%; right:15px; color:#83ded8; content:'⌄'; font-size:16px;
  line-height:1; pointer-events:none; transform:translateY(-58%);
}
.ai-model-select {
  width:100%; min-height:48px; padding:0 42px 0 14px; color:#f1f5fb;
  background:linear-gradient(145deg,rgba(130,104,232,.16),rgba(49,187,187,.09));
  border:1px solid rgba(145,127,238,.42); border-radius:13px; outline:0;
  appearance:none; cursor:pointer; font:700 12px/1.3 inherit;
}
.ai-model-select option { color:#202a3a; background:#f7f9fc; }
.ai-model-select option:disabled { color:#8791a1; }
.ai-provider-policy { margin:8px 2px 0; color:#8491a7; font-size:9px; line-height:1.55; }
.ai-studio-label-row { margin-bottom:10px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ai-studio-label-row > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.ai-studio-label-row label,.ai-studio-legend { color:#f4f6fb; font-size:14px; font-weight:780; }
.ai-studio-label-row small { color:#8995ad; font-size:10px; line-height:1.45; }
.ai-prompt-count { flex:0 0 auto; margin-top:2px; padding:4px 7px; color:#a8b3c8; background:rgba(255,255,255,.04); border-radius:999px; font-size:10px; font-variant-numeric:tabular-nums; }
#aiPrompt {
  width:100%; min-height:150px; resize:vertical; padding:15px 16px;
  color:#f6f8fc; caret-color:#73ded7; background:rgba(5,10,25,.55);
  border:1px solid rgba(144,158,211,.25); border-radius:16px; outline:0;
  font:500 13px/1.72 inherit; user-select:text; -webkit-user-select:text;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
#aiPrompt::placeholder { color:#727e96; }
#aiPrompt:hover:not(:disabled) { border-color:rgba(156,124,255,.4); }
#aiPrompt:focus { background:rgba(7,12,29,.72); border-color:#8c77ea; box-shadow:0 0 0 4px rgba(140,119,234,.13); }
#aiPrompt.invalid { border-color:#f2778a; box-shadow:0 0 0 4px rgba(242,119,138,.1); }
.ai-prompt-formula { margin-top:9px; padding:8px 10px; display:flex; align-items:center; justify-content:center; gap:5px; color:#8793a9; background:rgba(7,12,29,.32); border:1px dashed rgba(139,153,204,.2); border-radius:11px; font-size:9px; }
.ai-prompt-formula span { min-width:0; text-align:center; white-space:nowrap; }
.ai-prompt-formula b { margin-right:3px; color:#d7def0; font-weight:750; }
.ai-prompt-formula i { color:#59647c; font-style:normal; }
.ai-example-heading { margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#dfe5f1; font-size:10px; font-weight:700; }
.ai-example-heading small { color:#7f8ba2; font-size:9px; font-weight:500; }
.ai-prompt-examples { margin-top:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.ai-prompt-example,.ai-choice {
  min-height:40px; padding:9px 10px; color:#c4cede; background:rgba(255,255,255,.035);
  border:1px solid rgba(151,166,220,.16); border-radius:11px;
  cursor:pointer; font:650 10px/1.35 inherit; text-align:left; transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.ai-prompt-example { display:flex; flex-direction:column; gap:3px; }
.ai-prompt-example strong { color:inherit; font-size:11px; }
.ai-prompt-example small { color:#7f8ba3; font-size:9px; font-weight:500; }
.ai-prompt-example:hover,.ai-choice:hover { color:#fff; background:rgba(140,119,234,.1); border-color:rgba(147,129,237,.46); transform:translateY(-1px); }
.ai-agent-entry { margin-top:10px; display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.ai-agent-plan-button {
  min-height:45px; padding:10px 13px; display:flex; align-items:center; justify-content:center; gap:8px;
  color:#ece9ff; background:linear-gradient(135deg,rgba(128,104,231,.2),rgba(50,184,187,.1));
  border:1px solid rgba(139,124,230,.42); border-radius:13px; cursor:pointer; font:780 11px/1.3 inherit;
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.ai-agent-plan-button:hover:not(:disabled) { color:#fff; background:linear-gradient(135deg,rgba(139,113,239,.3),rgba(55,195,195,.16)); border-color:rgba(163,145,246,.68); transform:translateY(-1px); }
.ai-agent-plan-button span { color:#89e4dc; font-size:15px; }
.ai-agent-entry p { margin:0 2px; color:#7f8ba2; font-size:10px; line-height:1.5; }
.ai-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.ai-choice { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ai-choice strong { overflow:hidden; color:inherit; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.ai-choice small { color:#7f8ba3; font-size:10px; }
.ai-choice[aria-pressed="true"] { color:#fff; background:linear-gradient(145deg,rgba(130,104,232,.26),rgba(49,187,187,.14)); border-color:rgba(145,127,238,.68); box-shadow:0 0 0 3px rgba(140,119,234,.09); }

.ai-agent-plan-card {
  margin-top:22px; padding:16px; color:#e9eef7; background:linear-gradient(150deg,rgba(92,76,177,.18),rgba(31,103,112,.1) 62%,rgba(5,10,25,.34));
  border:1px solid rgba(143,129,229,.36); border-radius:17px; box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.ai-agent-plan-card[hidden] { display:none; }
.ai-agent-plan-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ai-agent-plan-head h2 { margin:5px 0 0; color:#fff; font-size:13px; }
.ai-agent-plan-head p { margin:4px 0 0; color:#8793a9; font-size:9px; }
.ai-agent-local-badge { color:#79dcd7; font-size:9px; font-weight:850; letter-spacing:1.3px; }
.ai-agent-plan-version { color:#8793a9; font-size:9px; white-space:nowrap; }
.ai-semantic-summary { margin-top:13px; padding:11px 12px; background:rgba(6,12,27,.3); border:1px solid rgba(77,207,208,.18); border-radius:11px; }
.ai-semantic-summary[hidden] { display:none; }
.ai-semantic-summary > strong { color:#a7e9e5; font-size:10px; }
.ai-semantic-chips { margin-top:7px; display:flex; flex-wrap:wrap; gap:5px; }
.ai-semantic-chips span { padding:5px 7px; color:#dce5f2; background:rgba(77,207,208,.08); border:1px solid rgba(77,207,208,.18); border-radius:999px; font-size:9px; }
.ai-grounding-coverage {
  margin-top:10px; padding:10px; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:9px; background:linear-gradient(125deg,rgba(57,205,177,.1),rgba(104,90,221,.1));
  border:1px solid rgba(78,215,188,.24); border-radius:12px;
}
.ai-grounding-coverage[hidden] { display:none; }
.ai-grounding-coverage[data-coverage="partial"] { background:linear-gradient(125deg,rgba(237,176,81,.1),rgba(104,90,221,.08)); border-color:rgba(237,176,81,.3); }
.ai-grounding-mark {
  width:32px; height:32px; display:grid; place-items:center; color:#8cf0dc;
  background:rgba(48,198,173,.12); border:1px solid rgba(80,225,199,.28); border-radius:10px;
  font-size:19px; font-weight:800; box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.ai-grounding-coverage[data-coverage="partial"] .ai-grounding-mark { color:#f0c27b; background:rgba(237,176,81,.1); border-color:rgba(237,176,81,.28); }
.ai-grounding-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.ai-grounding-copy strong { color:#e8fff9; font-size:10px; }
.ai-grounding-copy small { color:#8fa2b8; font-size:8px; line-height:1.4; }
.ai-grounding-metrics { margin:0; display:grid; grid-template-columns:repeat(3,auto); gap:5px; }
.ai-grounding-metrics div { min-width:42px; padding:5px 6px; display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(4,10,24,.26); border:1px solid rgba(150,166,219,.12); border-radius:8px; }
.ai-grounding-metrics dt { color:#77879f; font-size:7px; white-space:nowrap; }
.ai-grounding-metrics dd { margin:0; color:#f2f7ff; font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ai-agent-plan-block { margin-top:12px; padding:12px; background:rgba(5,10,25,.4); border:1px solid rgba(143,129,229,.18); border-radius:11px; }
.ai-agent-plan-block strong { color:#a9b5cb; font-size:10px; }
.ai-agent-plan-block p { margin:6px 0 0; color:#f2f5fa; font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.ai-agent-recommendations { margin-top:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ai-agent-recommendations div { min-width:0; padding:10px; display:flex; flex-direction:column; gap:4px; background:rgba(255,255,255,.035); border:1px solid rgba(143,157,209,.16); border-radius:10px; }
.ai-agent-recommendations span { color:#8290a8; font-size:9px; }
.ai-agent-recommendations strong { overflow:hidden; color:#eef2f8; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.ai-agent-recommendations small { color:#a5afc0; font-size:9px; line-height:1.45; }
.ai-agent-trace-heading { margin-top:13px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ai-agent-trace-heading strong { color:#dce3ef; font-size:10px; }
.ai-agent-trace-heading span { color:#7f8ba2; font-size:9px; }
.ai-agent-steps { margin:7px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; list-style:none; counter-reset:agent-step; }
.ai-agent-steps li { min-width:0; padding:9px 10px; display:flex; flex-direction:column; gap:3px; background:rgba(5,10,25,.28); border:1px solid rgba(143,157,209,.1); border-radius:9px; counter-increment:agent-step; }
.ai-agent-steps strong { color:#b8c5dc; font-size:10px; }
.ai-agent-steps strong::before { content:counter(agent-step) '. '; color:#68d7d1; }
.ai-agent-steps span { color:#8995aa; font-size:9px; line-height:1.4; overflow-wrap:anywhere; }
.ai-agent-plan-actions { margin-top:12px; display:grid; grid-template-columns:1fr 1.35fr; gap:8px; }
.ai-agent-plan-cancel,.ai-agent-plan-apply { min-height:42px; padding:9px 12px; border-radius:11px; cursor:pointer; font:750 11px/1 inherit; }
.ai-agent-plan-cancel { color:#c8d1df; background:rgba(255,255,255,.035); border:1px solid rgba(151,166,220,.18); }
.ai-agent-plan-apply { color:#fff; background:linear-gradient(135deg,#856fe7,var(--ai-accent-2)); border:0; box-shadow:0 9px 20px rgba(59,126,175,.18); }
.ai-agent-plan-cancel:hover:not(:disabled) { color:#fff; border-color:rgba(156,124,255,.5); }
.ai-agent-plan-apply:hover:not(:disabled) { filter:brightness(1.08); }
.ai-generation-policy { margin-top:19px; padding:11px 12px; color:#aeb9ca; background:rgba(5,10,25,.3); border:1px solid rgba(151,166,220,.14); border-radius:12px; font-size:10px; line-height:1.6; }
.ai-generation-policy strong { color:#dfe6f2; }
.ai-generation-policy.warning { color:#ffd9c7; background:rgba(151,68,35,.15); border-color:rgba(255,148,103,.34); }
.ai-generation-policy.warning strong { color:#ffbf9e; }
.ai-generate-button {
  width:100%; min-height:53px; margin-top:13px; padding:12px 14px; display:flex; align-items:center; justify-content:center; gap:9px;
  color:#fff; background:linear-gradient(115deg,#765ee8,var(--ai-accent) 45%,#3ebdbf); border:0; border-radius:14px;
  cursor:pointer; font:800 13px/1 inherit; box-shadow:0 14px 32px rgba(73,76,193,.27); transition:filter .18s,transform .18s,box-shadow .18s;
}
.ai-generate-button kbd { margin-left:auto; padding:4px 6px; color:rgba(255,255,255,.75); background:rgba(5,10,25,.2); border:1px solid rgba(255,255,255,.15); border-radius:6px; font:600 8px/1 inherit; }
.ai-generate-spark { margin-left:auto; }
.ai-generate-button:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 17px 38px rgba(73,76,193,.34); }
.ai-generate-button:disabled,.ai-model-select:disabled,.ai-prompt-example:disabled,.ai-choice:disabled,#aiPrompt:disabled,
.ai-agent-plan-button:disabled,.ai-agent-plan-cancel:disabled,.ai-agent-plan-apply:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.ai-studio-form-panel.agent-planning .ai-agent-plan-button span { animation:aiStudioSpin 1s linear infinite; }
.ai-generate-button.busy .ai-generate-spark { animation:aiStudioSpin 1s linear infinite; }
@keyframes aiStudioSpin { to { transform:rotate(360deg); } }

.ai-studio-preview-panel { position:relative; min-height:650px; overflow:hidden; }
.ai-preview-top { min-height:74px; padding:16px 19px; display:flex; align-items:center; justify-content:space-between; gap:13px; border-bottom:1px solid var(--ai-line); }
.ai-preview-kicker { color:#73dcd7; font-size:9px; font-weight:850; letter-spacing:1.3px; }
.ai-preview-top h2 { margin-top:3px; color:#fff; font-size:15px; }
.ai-preview-top p { margin-top:3px; color:#8490a7; font-size:10px; }
.ai-download-button { min-height:40px; padding:9px 13px; display:flex; align-items:center; gap:6px; color:#e9e6ff; background:rgba(140,119,234,.12); border:1px solid rgba(147,129,237,.34); border-radius:11px; cursor:pointer; font:700 11px/1 inherit; white-space:nowrap; }
.ai-download-button span { font-size:14px; }
.ai-download-button:hover:not(:disabled) { color:#fff; background:rgba(140,119,234,.2); border-color:rgba(160,143,245,.56); }
.ai-download-button:disabled { opacity:.42; cursor:not-allowed; }
.ai-preview-stage { min-height:525px; padding:24px; display:grid; place-items:center; position:relative; overflow:hidden; }
.ai-preview-stage::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.45; background:radial-gradient(circle at 50% 45%,rgba(106,89,210,.12),transparent 50%); }
.ai-preview-empty { position:relative; width:min(500px,92%); display:flex; flex-direction:column; align-items:center; gap:10px; color:#8995aa; text-align:center; }
.ai-preview-empty[hidden] { display:none; }
.ai-preview-empty-visual { width:142px; height:116px; display:grid; place-items:center; color:#99a9ff; background:linear-gradient(145deg,rgba(140,119,234,.14),rgba(77,207,208,.06)); border:1px solid rgba(145,132,231,.24); border-radius:30px; box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 50px rgba(3,8,28,.2); }
.ai-preview-empty-visual svg { width:88px; height:72px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.ai-preview-empty strong { color:#e7ecf5; font-size:15px; }
.ai-preview-empty > span:not(.ai-preview-empty-visual) { max-width:430px; font-size:11px; line-height:1.65; }
.ai-preview-empty ol { margin:5px 0 0; padding:0; display:flex; align-items:center; gap:7px; color:#a5b0c2; list-style:none; counter-reset:empty-step; font-size:9px; }
.ai-preview-empty li { display:flex; align-items:center; gap:5px; counter-increment:empty-step; }
.ai-preview-empty li::before { content:counter(empty-step); width:17px; height:17px; display:grid; place-items:center; color:#a9ebe7; background:rgba(77,207,208,.08); border:1px solid rgba(77,207,208,.2); border-radius:50%; font-size:7px; }
.ai-preview-empty li + li::after { content:'→'; order:-1; margin-right:2px; color:#536077; }
.ai-preview-figure { position:relative; width:100%; margin:0; display:none; flex-direction:column; align-items:center; gap:13px; }
.ai-preview-figure.visible { display:flex; }
#aiGeneratedImage {
  display:block; max-width:100%; max-height:min(65vh,680px); object-fit:contain;
  background-color:#0a0f20;
  background-image:linear-gradient(45deg,rgba(255,255,255,.045) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.045) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.045) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.045) 75%);
  background-position:0 0,0 10px,10px -10px,-10px 0; background-size:20px 20px;
  border:1px solid rgba(158,150,230,.26); border-radius:18px; box-shadow:0 24px 65px rgba(0,0,0,.42),0 0 0 7px rgba(255,255,255,.015);
}
.ai-preview-caption { width:min(700px,100%); display:flex; flex-wrap:wrap; justify-content:center; gap:6px; color:#aeb9cb; font-size:9px; }
.ai-preview-caption span { padding:6px 9px; background:rgba(7,12,27,.48); border:1px solid rgba(151,166,220,.14); border-radius:999px; }
.ai-preview-caption span[data-result-kind="quality"] {
  color:#dcfff4; background:linear-gradient(130deg,rgba(46,195,151,.2),rgba(64,169,205,.14));
  border-color:rgba(75,221,176,.45); font-weight:850; box-shadow:0 5px 18px rgba(34,190,143,.12);
}
.ai-preview-caption span[data-result-kind="quality"][data-quality-level="medium"] { color:#fff0c9; background:rgba(216,157,60,.14); border-color:rgba(236,183,92,.38); }
.ai-preview-caption span[data-result-kind="quality"][data-quality-level="low"] { color:#ffd9df; background:rgba(211,94,115,.13); border-color:rgba(234,120,138,.36); }
.ai-preview-caption span[data-result-kind="graph"],.ai-preview-caption span[data-result-kind="relation"] { color:#dcd7ff; background:rgba(131,105,232,.11); border-color:rgba(151,129,239,.3); }
.ai-preview-caption span[data-result-kind="action"] { color:#c9f6ff; background:rgba(49,159,190,.12); border-color:rgba(78,190,219,.3); }
.ai-preview-caption span[data-result-kind="repair"] { color:#ffe8be; background:rgba(218,153,52,.11); border-color:rgba(232,177,88,.31); }
.ai-preview-status { min-height:47px; padding:11px 18px; display:flex; align-items:center; justify-content:center; gap:7px; color:#aeb8ca; background:rgba(5,10,25,.42); border-top:1px solid var(--ai-line); font-size:11px; line-height:1.45; text-align:center; }
.ai-preview-status::before { content:''; width:7px; height:7px; flex:0 0 7px; background:#7e8aa1; border-radius:50%; box-shadow:0 0 0 3px rgba(126,138,161,.11); }
.ai-preview-status.success { color:#71e0b2; }
.ai-preview-status.success::before { background:#4ed3a1; box-shadow:0 0 0 3px rgba(78,211,161,.12); }
.ai-preview-status.error { color:#ff9caa; }
.ai-preview-status.error::before { background:#f47f91; box-shadow:0 0 0 3px rgba(244,127,145,.12); }
.ai-preview-status.warning { color:#f4c47e; }
.ai-preview-status.warning::before { background:#eeb763; box-shadow:0 0 0 3px rgba(238,183,99,.12); }
.ai-preview-loading { position:absolute; inset:0; z-index:2; display:none; place-items:center; padding:25px; background:rgba(8,13,29,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.ai-preview-loading.visible { display:grid; }
.ai-loading-card { width:min(430px,100%); display:flex; flex-direction:column; align-items:center; gap:9px; color:#edf2f8; text-align:center; }
.ai-loading-orbit { width:74px; height:74px; margin-bottom:5px; position:relative; border:1px solid rgba(137,218,218,.3); border-radius:50%; animation:aiStudioSpin 2.6s linear infinite; }
.ai-loading-orbit::before,.ai-loading-orbit::after { content:''; position:absolute; border-radius:50%; }
.ai-loading-orbit::before { inset:14px; border:1px solid rgba(156,124,255,.44); }
.ai-loading-orbit::after { width:11px; height:11px; top:-6px; left:31px; background:#67d8d3; box-shadow:0 0 20px #67d8d3; }
.ai-loading-kicker { color:#73dcd7 !important; font-size:9px !important; font-weight:850; letter-spacing:1.35px; }
.ai-loading-card strong { font-size:15px; }
.ai-loading-card p { max-width:360px; margin:0; color:#8d99af; font-size:10px; line-height:1.6; }
.ai-loading-trace { width:100%; margin:9px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; list-style:none; }
.ai-loading-trace li { min-width:0; padding:9px 5px; color:#9ba7ba; background:rgba(255,255,255,.035); border:1px solid rgba(151,166,220,.14); border-radius:9px; font-size:9px; animation:aiTracePulse 2.4s ease-in-out infinite; }
.ai-loading-trace li:nth-child(2) { animation-delay:.35s; }
.ai-loading-trace li:nth-child(3) { animation-delay:.7s; }
.ai-loading-trace li:nth-child(4) { animation-delay:1.05s; }
@keyframes aiTracePulse { 0%,70%,100% { color:#8793a9; border-color:rgba(151,166,220,.14); } 35% { color:#e9ffff; border-color:rgba(77,207,208,.48); background:rgba(77,207,208,.08); } }

:root[data-theme="light"] #aiStudioPage { color:#202a36; background:radial-gradient(760px 450px at -5% -8%,rgba(115,91,225,.14),transparent 70%),radial-gradient(680px 430px at 105% 6%,rgba(39,180,180,.11),transparent 72%),linear-gradient(160deg,#f3f5fa,#eef3f5); }
:root[data-theme="light"] .ai-studio-header { background:rgba(255,255,255,.87); border-color:#d8deeb; }
:root[data-theme="light"] .ai-studio-brand-copy strong,:root[data-theme="light"] .ai-studio-intro h1,:root[data-theme="light"] .ai-studio-label-row label,:root[data-theme="light"] .ai-studio-legend,:root[data-theme="light"] .ai-preview-top h2 { color:#202938; }
:root[data-theme="light"] .ai-studio-intro p { color:#586579; }
:root[data-theme="light"] .ai-studio-capabilities span { color:#536174; background:rgba(255,255,255,.7); border-color:#d8dfeb; }
:root[data-theme="light"] .ai-studio-panel { background:rgba(255,255,255,.94); border-color:#d9dfeb; box-shadow:0 20px 52px rgba(40,52,80,.1); }
:root[data-theme="light"] .ai-studio-notice { color:#5d6879; background:linear-gradient(145deg,#f5f1ff,#eef9f8); border-color:#d7d8ed; }
:root[data-theme="light"] .ai-studio-notice strong { color:#313b4b; }
:root[data-theme="light"] .ai-agent-loop { color:#536174; background:linear-gradient(120deg,#f7f9fd,#f2efff); border-color:#d8deea; }
:root[data-theme="light"] .ai-agent-loop span b { color:#236e69; background:linear-gradient(145deg,#e1f8f4,#ebe7ff); border-color:#b9ddd8; }
:root[data-theme="light"] .ai-agent-loop i { color:#95a0b1; }
:root[data-theme="light"] .ai-provider-badge { color:#536174; background:#f8fafc; border-color:#d9dfeb; }
:root[data-theme="light"] #aiPrompt { color:#26303b; background:#f8fafc; border-color:#d3dae8; }
:root[data-theme="light"] #aiPrompt::placeholder { color:#8791a1; }
:root[data-theme="light"] .ai-prompt-formula { color:#718096; background:#f7f9fc; border-color:#d3dbe9; }
:root[data-theme="light"] .ai-prompt-formula b,:root[data-theme="light"] .ai-example-heading { color:#414d60; }
:root[data-theme="light"] .ai-prompt-example,:root[data-theme="light"] .ai-choice { color:#4d596b; background:#f8fafc; border-color:#d9dfeb; }
:root[data-theme="light"] .ai-model-select { color:#41346f; background:linear-gradient(145deg,#f1efff,#eefafa); border-color:#aaa0da; }
:root[data-theme="light"] .ai-provider-policy { color:#6f7c8f; }
:root[data-theme="light"] .ai-prompt-example small,:root[data-theme="light"] .ai-choice small { color:#7c8798; }
:root[data-theme="light"] .ai-agent-plan-button { color:#514387; background:linear-gradient(135deg,#eeeaff,#edfafa); border-color:#c6c2e9; }
:root[data-theme="light"] .ai-agent-plan-card { color:#3f4a5c; background:linear-gradient(150deg,#f4f1ff,#f0fafa); border-color:#ccc8e8; }
:root[data-theme="light"] .ai-agent-plan-head h2,:root[data-theme="light"] .ai-agent-plan-block p,
:root[data-theme="light"] .ai-agent-recommendations strong { color:#303a4a; }
:root[data-theme="light"] .ai-agent-plan-head p,:root[data-theme="light"] .ai-agent-trace-heading span { color:#738095; }
:root[data-theme="light"] .ai-semantic-summary,:root[data-theme="light"] .ai-agent-plan-block,:root[data-theme="light"] .ai-agent-steps li { background:rgba(255,255,255,.72); border-color:#d8deea; }
:root[data-theme="light"] .ai-semantic-chips span { color:#376a6c; background:#ecf9f7; border-color:#bee7e3; }
:root[data-theme="light"] .ai-grounding-coverage { background:linear-gradient(125deg,#ecfaf6,#f1efff); border-color:#bfe7da; }
:root[data-theme="light"] .ai-grounding-coverage[data-coverage="partial"] { background:linear-gradient(125deg,#fff7e9,#f4f1ff); border-color:#ead09f; }
:root[data-theme="light"] .ai-grounding-mark { color:#14866f; background:#e0f7f0; border-color:#afe3d4; }
:root[data-theme="light"] .ai-grounding-coverage[data-coverage="partial"] .ai-grounding-mark { color:#9a6817; background:#fff3d9; border-color:#e8c987; }
:root[data-theme="light"] .ai-grounding-copy strong { color:#2e4f4b; }
:root[data-theme="light"] .ai-grounding-copy small { color:#667589; }
:root[data-theme="light"] .ai-grounding-metrics div { background:rgba(255,255,255,.76); border-color:#d8dfeb; }
:root[data-theme="light"] .ai-grounding-metrics dt { color:#78869a; }
:root[data-theme="light"] .ai-grounding-metrics dd { color:#334255; }
:root[data-theme="light"] .ai-agent-recommendations div { background:#fff; border-color:#d9dfeb; }
:root[data-theme="light"] .ai-agent-recommendations small,:root[data-theme="light"] .ai-agent-steps span { color:#657287; }
:root[data-theme="light"] .ai-agent-plan-cancel { color:#4e596a; background:#fff; border-color:#d5dce8; }
:root[data-theme="light"] .ai-generation-policy,:root[data-theme="light"] .ai-preview-status { color:#5e6a7d; background:#f8fafc; }
:root[data-theme="light"] .ai-generation-policy strong,:root[data-theme="light"] .ai-preview-empty strong { color:#364153; }
:root[data-theme="light"] .ai-generation-policy.warning { color:#78391f; background:#fff3ec; border-color:#e6ad8f; }
:root[data-theme="light"] .ai-generation-policy.warning strong { color:#8c3e1e; }
:root[data-theme="light"] .ai-preview-stage { background:linear-gradient(145deg,#fafbfe,#f2f6f8); }
:root[data-theme="light"] .ai-preview-empty-visual { color:#7267c8; background:linear-gradient(145deg,#f0edff,#eefafa); border-color:#d4d2eb; }
:root[data-theme="light"] .ai-preview-loading { background:rgba(248,250,253,.9); }
:root[data-theme="light"] .ai-loading-card { color:#354052; }
:root[data-theme="light"] .ai-loading-trace li { color:#647186; background:#fff; border-color:#d9dfeb; }
:root[data-theme="light"] .ai-studio-back:hover,
:root[data-theme="light"] .ai-studio-logout:hover { color:#55428e; background:#f0edff; border-color:#aaa0df; }
:root[data-theme="light"] .ai-prompt-example:hover:not(:disabled),
:root[data-theme="light"] .ai-choice:hover:not(:disabled) { color:#3f365f; background:#f0edff; border-color:#bdb4e7; }
:root[data-theme="light"] .ai-choice[aria-pressed="true"] {
  color:#41346f; background:linear-gradient(145deg,#e9e4ff,#e8f8f7);
  border-color:#8f81d3; box-shadow:0 0 0 3px rgba(116,96,198,.12);
}
:root[data-theme="light"] .ai-download-button {
  color:#4c3d81; background:#eeeaff; border-color:#afa4df;
}
:root[data-theme="light"] .ai-download-button:hover:not(:disabled) { color:#382b67; background:#e5dfff; border-color:#8f81cf; }
:root[data-theme="light"] .ai-preview-caption { color:#536074; }
:root[data-theme="light"] .ai-preview-caption span { background:#eef1f6; border-color:#d6ddea; }
:root[data-theme="light"] .ai-preview-caption span[data-result-kind="quality"] { color:#126046; background:#e5f8f0; border-color:#9bd9c4; box-shadow:0 5px 18px rgba(43,144,107,.1); }
:root[data-theme="light"] .ai-preview-caption span[data-result-kind="quality"][data-quality-level="medium"] { color:#765113; background:#fff4db; border-color:#e4c787; }
:root[data-theme="light"] .ai-preview-caption span[data-result-kind="quality"][data-quality-level="low"] { color:#8d3042; background:#fff0f2; border-color:#e7b0ba; }
:root[data-theme="light"] .ai-preview-caption span[data-result-kind="graph"],:root[data-theme="light"] .ai-preview-caption span[data-result-kind="relation"] { color:#51448c; background:#efedff; border-color:#c9c2ed; }
:root[data-theme="light"] .ai-preview-caption span[data-result-kind="action"] { color:#17677c; background:#e8f8fc; border-color:#acdce7; }
:root[data-theme="light"] .ai-preview-caption span[data-result-kind="repair"] { color:#7c5415; background:#fff5df; border-color:#e6ca91; }
:root[data-theme="light"] .ai-preview-status.success { color:#167451; }
:root[data-theme="light"] .ai-preview-status.error { color:#a52b43; }
:root[data-theme="light"] .ai-preview-status.warning { color:#7b5818; }

.ai-studio-back:focus-visible,.ai-studio-logout:focus-visible,.ai-provider-badge:focus-visible,
.ai-model-select:focus-visible,.ai-prompt-example:focus-visible,.ai-choice:focus-visible,.ai-agent-plan-button:focus-visible,
.ai-agent-plan-cancel:focus-visible,.ai-agent-plan-apply:focus-visible,.ai-generate-button:focus-visible,
.ai-download-button:focus-visible { outline:3px solid rgba(102,220,214,.7); outline-offset:2px; }

@media (max-width:980px) {
  .ai-studio-intro { align-items:flex-start; flex-direction:column; gap:16px; }
  .ai-studio-notice { max-width:620px; }
  .ai-studio-grid { grid-template-columns:1fr; }
  .ai-studio-preview-panel { min-height:540px; }
  .ai-preview-stage { min-height:420px; }
}

@media (max-width:600px) {
  .ai-studio-header { padding:9px max(10px,env(safe-area-inset-right)) 9px max(10px,env(safe-area-inset-left)); }
  .ai-provider-badge { display:none; }
  .ai-studio-brand-copy small { display:none; }
  .ai-studio-main { padding:17px max(10px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .ai-studio-intro { margin-bottom:15px; }
  .ai-studio-intro h1 { font-size:29px; }
  .ai-studio-capabilities { gap:5px; }
  .ai-agent-loop { width:100%; display:grid; grid-template-columns:1fr 12px 1fr 12px 1fr 12px 1fr; gap:3px; }
  .ai-agent-loop span { justify-content:center; gap:4px; font-size:9px; }
  .ai-studio-form-panel { padding:17px 14px; }
  .ai-prompt-formula { align-items:stretch; display:grid; grid-template-columns:1fr 1fr; gap:5px; }
  .ai-prompt-formula span { padding:5px; background:rgba(255,255,255,.025); border-radius:6px; white-space:normal; }
  .ai-prompt-formula i { display:none; }
  .ai-prompt-examples { grid-template-columns:1fr; }
  .ai-choice-grid { grid-template-columns:1fr; }
  .ai-prompt-example,.ai-choice,.ai-generate-button,.ai-download-button,.ai-agent-plan-button,
  .ai-agent-plan-cancel,.ai-agent-plan-apply { min-height:44px; }
  .ai-agent-recommendations,.ai-agent-steps { grid-template-columns:1fr; }
  .ai-agent-plan-head { align-items:flex-start; flex-direction:column; gap:7px; }
  .ai-agent-plan-version { white-space:normal; }
  .ai-grounding-coverage { grid-template-columns:auto minmax(0,1fr); }
  .ai-grounding-metrics { grid-column:1 / -1; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ai-grounding-metrics div { min-width:0; }
  .ai-agent-trace-heading { align-items:flex-start; flex-direction:column; }
  .ai-generate-button kbd { display:none; }
  .ai-generate-spark { margin-left:0; }
  .ai-studio-preview-panel { min-height:470px; }
  .ai-preview-top { padding:14px; }
  .ai-preview-stage { min-height:350px; padding:14px; }
  .ai-preview-empty ol { align-items:flex-start; flex-direction:column; }
  .ai-preview-empty li + li::after { display:none; }
  .ai-loading-trace { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #aiGeneratedImage { max-height:62vh; border-radius:13px; }
}

@media (max-height:540px) and (min-width:981px) {
  .ai-studio-main { overflow-y:auto; }
  .ai-studio-preview-panel { min-height:480px; }
  .ai-preview-stage { min-height:350px; }
}

@media (prefers-reduced-motion:reduce) {
  .ai-generate-button,.ai-model-select,.ai-prompt-example,.ai-choice,.ai-agent-plan-button,.ai-studio-back,.ai-studio-logout { transition:none; }
  .ai-generate-button.busy .ai-generate-spark,.ai-loading-orbit,.ai-loading-trace li,.ai-studio-form-panel.agent-planning .ai-agent-plan-button span { animation:none; }
}