/* Shared visual language for the workstation, tools and operation guides. */
:root{color-scheme:dark;--bg:#0b1118;--input:#101a25;--paper:#14202d;--panel:#14202d;--ink:#e8f0f8;--text:#e8f0f8;--muted:#a6b6c8;--line:#34485c;--border:#34485c;--accent:#5ee0c0;--orange:#5ee0c0;--orange-light:#193c39;--primary:#5ee0c0;--primary-soft:#193c39;--soft:#193c39;--green:#5ee0c0;--error:#ff9a91;--focus:#7ceaf3;--chip:#223244;--chip-active:#5ee0c0;--ui-surface:#14202d;--ui-text:#e8f0f8;--ui-muted:#a6b6c8;--ui-border:#34485c;--ui-soft:#223244;--ui-accent:#5ee0c0;--ui-focus:#7ceaf3;--shadow:0 16px 48px #0003;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}
body{background:var(--bg);color:var(--ink)}
button,input,select,textarea{color:inherit}
button,input:not([type=range]):not([type=checkbox]),select,textarea{background:#101a25;border-color:#52687c}
button:hover:not(:disabled){background:#223244;border-color:#7f9bb0}
button:active:not(:disabled){background:#2c4155}
button.primary,.primary,a.primary,.guide-cta{background:var(--accent);border-color:var(--accent);color:#08251e}
button.primary:hover:not(:disabled),.primary:hover,.guide-cta:hover{background:#8debd4;color:#08251e}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
input::placeholder,textarea::placeholder{color:#91a3b6}
dialog,.surface{background:var(--paper);color:var(--ink);border-color:var(--line)}
dialog::backdrop{background:#03080de0}
.muted,.hint,.connection{color:var(--muted)}
.tag,.tags span{background:#223244;color:#c1d3e4;border-color:var(--line)}
.tag.beta{background:#193c39;color:#92edd5}
.eyebrow{color:var(--accent)}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.demo-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--paper);margin:0}
.demo-stage{position:relative;background:#0a121c;aspect-ratio:16/10;overflow:hidden}
.demo-stage img{width:100%;height:100%;display:block;object-fit:cover}
.demo-stage button{position:absolute;bottom:16px;right:16px;display:flex;gap:8px;align-items:center;min-height:44px;padding:10px 14px;background:#08121de8;color:#e8f0f8;border:1px solid #7c94a9;border-radius:12px}
.demo-stage button:hover{background:#223244}
.demo-stage .demo-badge{position:absolute;left:16px;top:16px;font-size:11px;letter-spacing:1px;color:#a8f5de;background:#07121de8;border:1px solid #46677a;padding:6px 10px;border-radius:7px}
.demo-card figcaption{padding:20px 24px}
.demo-card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.5px}
.demo-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.demo-card .demo-number{font-size:11px;color:var(--accent);display:block;margin-bottom:10px;letter-spacing:1.5px}
.studio-helper .brandbar{height:64px;background:#0d1621;padding:0 28px}
.studio-helper main{padding-top:28px}
.studio-helper h1{font-size:clamp(24px,2.5vw,36px);letter-spacing:-1px}
.studio-helper .page-heading p{font-size:14px}
.studio-helper #account{background:var(--paper)}
.studio-helper .workspace{background:var(--paper);border-radius:20px}
.studio-helper .input-panel{background:var(--input)}
.studio-helper .step h2,.studio-helper .params label{color:#c3d3e2}
.studio-helper .step h2 span{color:#8cabbc}
.studio-helper .image-slot{background:#0d1621;border-color:#52687c}
.studio-helper .base-slot{height:280px;border:1px dashed #52687c}
.studio-helper .image-slot button.upload{color:#c6d7e6}
.studio-helper .image-slot img{background:#0a111a}
.studio-helper .image-slot .remove-image,.studio-helper .image-slot .edit-image{background:#0d1621eb;color:var(--ink);min-width:44px;min-height:44px;border-color:#52687c}
.studio-helper .paste-image,.studio-helper .creativity-label{background:#14202d;color:var(--muted)}
.studio-helper .paste-image:focus-within{background:#1c2d3c}
.studio-helper .segmented button.selected{color:#a8f5de;background:var(--soft);border-color:var(--accent)}
.studio-helper .output-panel{background:#14202d}
.studio-helper .prompt-editor{background:transparent;color:var(--ink)}
.studio-helper .result-error{background:#372526;border-color:#ac6d67}
.studio-helper .history-card,.studio-helper .generated-card,.studio-helper .generation-card{background:#101a25;color:var(--ink);border-color:var(--line)}
.studio-helper .connection.connected:before{background:var(--accent);box-shadow:0 0 0 4px #193c39}
.studio-helper .workspace-footer{border-color:var(--line)}
.studio-helper .gallery,.studio-helper .workspace.with-history .gallery,.studio-helper .editor-dialog>header,.studio-helper .editor-dialog>footer,.studio-helper .crop-controls{background:var(--paper)}
.studio-helper .prompt-editor:hover,.studio-helper .prompt-editor:focus{background:#182838}
.studio-helper .star-button,.studio-helper .generated-card>.generated-favorite,.studio-helper .generation-preview-card>.generated-favorite{background:#101a25eb;color:var(--accent)}
.studio-helper .editor-toolbar{background:#101a25}
.studio-helper .editor-toolbar .tool-group button.selected{background:var(--soft);border-color:var(--accent)}
.studio-helper .editor-toolbar .tool-group{gap:8px}
.studio-station .shell{max-width:1320px}
.studio-station .header{min-height:88px}
.studio-station .mark{background:var(--soft);color:var(--accent);border:1px solid #3e736e}
.studio-station .nav button.active{color:var(--accent)}
.studio-station .hero{grid-template-columns:1fr 1.25fr;align-items:center;padding:56px 0;gap:56px}
.studio-station .hero h1{font-size:clamp(36px,4vw,56px);letter-spacing:-2px}
.studio-station .hero p{font-size:16px}
.hero-visual{margin:0;position:relative;border:1px solid #4e697a;border-radius:20px;overflow:hidden;box-shadow:0 24px 70px #0006}
.hero-visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.hero-visual figcaption{padding:12px 18px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);background:#14202d}
.hero-visual figcaption span:first-child{color:var(--accent)}
.hero-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-links a{min-height:44px;border:1px solid var(--line);padding:10px 16px;border-radius:10px;font-size:14px}
.studio-station .search{background:#101a25;border-color:#52687c}
.studio-station .tabs .active{background:var(--soft);color:var(--accent);box-shadow:inset 0 0 0 1px #4b8b7b}
.studio-station .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.studio-station .tool{background:var(--paper);border-radius:18px}
.studio-station .cover{padding:0;height:auto;aspect-ratio:16/11;background:#0d1621;position:relative}
.studio-station .cover img{width:100%;height:100%;object-fit:cover;display:block}
.studio-station .cover .number{position:absolute;left:16px;top:16px;padding:7px 10px;color:#acf2df;background:#08111ee8;border:1px solid #41657b;border-radius:7px}
.studio-station .tool-body{padding:22px}
.studio-station .tool h3{font-size:21px}
.studio-station .tool p{min-height:48px}
.studio-station .features{margin-bottom:18px;gap:8px}
.studio-station .features span+span:before{margin-right:8px}
.studio-station .tool-actions{border-color:var(--line);padding-top:16px}
.studio-station .empty{background:var(--paper)}
.studio-station .flow{border:1px solid var(--line);border-radius:18px;background:#101a25;margin:48px 0;padding:24px 28px}
.studio-station .flow p{margin-bottom:0}
.studio-station .section-heading{margin-top:36px}
.studio-extension .hero,.studio-extension .panel{box-shadow:none;border-radius:14px}
.studio-extension .chip,.studio-extension .pill{background:var(--chip);color:var(--ink)}
.studio-extension .chip.active{background:var(--soft);color:var(--accent)}
.studio-extension .button.secondary{background:var(--chip);color:var(--ink)}
.studio-extension .query-item,.studio-extension .keyword,.studio-extension .status-box{background:#101a25;color:var(--ink);border-color:var(--line)}
.studio-extension .status-box.warning{background:#312b20;color:#f2d7a6;border-color:#7c6744}
.studio-extension .popover-panel{background:var(--paper);color:var(--ink);border-color:var(--line)}
.studio-extension .toolbar-panel,.studio-extension .history-item,.studio-extension .token-group,.studio-extension .page-card{background:var(--paper);color:var(--ink)}
.studio-extension .page-card.success{background:#193c39;border-color:#5c9c87}
.studio-extension .page-card.warning{background:#312b20;border-color:#9b8156}
.studio-extension .status.error{color:var(--error)}
.studio-extension button.secondary{background:#223244;color:var(--ink)}
@media(max-width:900px){.studio-station .hero{gap:28px}.studio-station .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-station .hero h1{font-size:38px}}
@media(max-width:600px){.demo-grid,.studio-station .grid,.studio-station .hero{grid-template-columns:1fr}.studio-station .hero{padding:32px 0;gap:24px}.studio-station .hero h1{font-size:36px}.studio-station .flow{padding:24px;margin:32px 0}.studio-helper .base-slot{height:230px}.studio-helper .brandbar{padding:0 16px}.demo-card figcaption{padding:18px}.demo-card p{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.studio-helper .editor-toolbar .color-group button{background:var(--swatch)}
.icon-action::after{background:#223244;color:#e8f0f8;border:1px solid #52687c}
.icon-action[aria-pressed="true"]{background:var(--soft);color:var(--accent)}
.studio-helper .paste-image input{border:0;background:transparent;border-radius:0}
