:root {
  color-scheme: dark;
  --bg: #080b12;
  --panel: rgba(17, 22, 34, .86);
  --panel-strong: #111724;
  --line: rgba(255,255,255,.09);
  --line-bright: rgba(255,255,255,.16);
  --text: #f4f7fb;
  --muted: #97a1b3;
  --cyan: #40d8df;
  --cyan-deep: #17bfc8;
  --violet: #8d78ff;
  --green: #3dd7a3;
  --red: #ff687b;
  --gold: #ffca70;
  --radius: 22px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.ambient { position: fixed; width: 620px; height: 620px; border-radius: 50%; filter: blur(120px); opacity: .11; z-index: -1; pointer-events: none; }
.ambient-a { background: var(--violet); right: -220px; top: -240px; }
.ambient-b { background: var(--cyan); left: -280px; top: 620px; }

.topbar { height: 74px; padding: 0 max(24px, calc((100vw - 1180px)/2)); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 30; background: rgba(8,11,18,.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #051114; font-weight: 900; background: linear-gradient(135deg, #8ff2ef, #39ccd8 55%, #a28cff); box-shadow: 0 0 30px rgba(64,216,223,.18); }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font-size: 16px; letter-spacing: .08em; }
.brand-copy small { color: var(--muted); font-size: 9px; letter-spacing: .22em; }
.main-nav { display: flex; align-items: center; gap: 32px; color: #bcc5d2; font-size: 14px; }
.main-nav a:hover, .nav-button:hover { color: #fff; }
.nav-button { border: 0; padding: 0; color: inherit; background: none; cursor: pointer; }
.account-area { display: flex; gap: 10px; align-items: center; position: relative; }
.support-link { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 8px 10px; border: 1px solid rgba(64,216,223,.28); border-radius: 999px; color: var(--cyan); background: rgba(64,216,223,.06); font-size: 12px; line-height: 1; transition: .2s ease; }
.support-link strong { color: #fff; font-weight: 700; }
.support-link:hover { color: #fff; border-color: rgba(64,216,223,.78); background: rgba(64,216,223,.14); transform: translateY(-1px); }
.ghost-button, .primary-button { border-radius: 12px; border: 1px solid var(--line-bright); padding: 10px 18px; color: var(--text); background: rgba(255,255,255,.035); cursor: pointer; transition: .2s ease; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.ghost-button:hover { border-color: rgba(64,216,223,.5); background: rgba(64,216,223,.07); }
.primary-button { color: #041113; font-weight: 800; border-color: transparent; background: linear-gradient(135deg, #73ece8, #34ced7); box-shadow: 0 12px 36px rgba(44,204,215,.16); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 15px 45px rgba(44,204,215,.24); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.primary-button.large, .ghost-button.large { padding: 14px 22px; }
.primary-button.full { width: 100%; padding: 13px 18px; }
.user-menu { display: flex; align-items: center; gap: 10px; position: relative; }
.balance-pill { background: rgba(255,255,255,.04); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 7px 13px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.balance-pill span { color: var(--muted); font-size: 12px; }.balance-pill strong { color: var(--cyan); font-size: 14px; }
.avatar-button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); color: #fff; font-weight: 800; cursor: pointer; }
.profile-popover { position: absolute; top: 50px; right: 0; width: 210px; padding: 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 14px; background: #151b28; box-shadow: 0 20px 60px #0009; }
.profile-popover small { color: var(--muted); word-break: break-all; }.profile-popover button { margin-top: 8px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--cyan); padding: 12px 0 0; text-align: left; cursor: pointer; }.profile-popover #logoutBtn { color: #ff8796; }

.hero { min-height: 640px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 80px; padding-block: 80px 55px; }
.eyebrow { display: flex; gap: 10px; align-items: center; color: var(--cyan); font-size: 12px; letter-spacing: .22em; font-weight: 700; }.eyebrow span { width: 28px; height: 1px; background: currentColor; }
.hero h1 { margin: 22px 0; font-size: clamp(44px, 5.5vw, 72px); line-height: 1.12; letter-spacing: -.045em; }
.hero h1 .seedance-title { color: #fff; text-shadow: 0 0 42px rgba(64,216,223,.18); }
.hero h1 em { font-style: normal; color: transparent; background: linear-gradient(90deg, #fff 0, #74e8e9 42%, #a89bff 95%); -webkit-background-clip: text; background-clip: text; }
.hero-copy > p { max-width: 580px; color: #aeb8c8; font-size: 18px; line-height: 1.85; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 25px; color: #7f8a9b; font-size: 12px; }.hero-status-summary { margin:14px 0 0; color:#a9e9dc; font-size:12px; font-weight:700; }.availability-notice { display:grid; gap:5px; max-width:580px; margin-top:18px; padding:12px 14px; border:1px solid rgba(255,202,112,.25); border-radius:12px; color:#d8bf92; background:rgba(255,202,112,.06); font-size:12px; line-height:1.55; }.availability-notice strong { color:#ffe0ab; }.availability-notice span { color:#cdbb9f; }
.hero-visual { height: 450px; position: relative; perspective: 1000px; }
.film-frame { position: absolute; border: 1px solid rgba(255,255,255,.17); border-radius: 24px; overflow: hidden; background: #192033; box-shadow: 0 40px 100px #0009; }
.frame-back { width: 76%; height: 70%; top: 18px; right: -5px; transform: rotate(8deg); background: linear-gradient(145deg, #202840, #151928); }.frame-back span { position: absolute; bottom: 20px; right: 24px; color: #8190a9; font-size: 11px; letter-spacing: .18em; }
.frame-front { width: 84%; height: 82%; left: 2%; bottom: 8px; transform: rotate(-3deg); background: linear-gradient(#37455c 0 45%, #111827 46%); }
.frame-sky { position: absolute; inset: 0; background: radial-gradient(circle at 65% 25%, #f5c89075, transparent 24%), linear-gradient(#62718a, #202838 52%); }
.frame-mountain { position: absolute; width: 120%; height: 50%; bottom: 0; left: -8%; background: linear-gradient(150deg, transparent 0 20%, #171e2a 21% 36%, transparent 37%), linear-gradient(25deg, #111722 0 42%, transparent 43%); opacity: .9; }
.frame-person { position: absolute; width: 42px; height: 118px; left: 48%; bottom: 16%; border-radius: 50% 50% 8px 8px; background: linear-gradient(#080b11 0 24%, #1d2330 25%); filter: drop-shadow(0 12px 10px #000); }
.frame-front > span { position: absolute; bottom: 20px; left: 24px; font-size: 10px; letter-spacing: .2em; color: #c8d0dc; }.play-orb { position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: #dffcffde; color: #111a22; padding-left: 4px; box-shadow: 0 0 50px #77e9e877; }
.floating-card { position: absolute; min-width: 125px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(18,24,37,.82); backdrop-filter: blur(16px); box-shadow: 0 18px 50px #0008; display: flex; align-items: baseline; gap: 8px; }.floating-card b { color: var(--cyan); font-size: 23px; }.floating-card span { color: var(--muted); font-size: 11px; }.floating-one { right: -16px; bottom: 56px; }.floating-two { left: -38px; top: 90px; }

.banner-shell { margin-top: 10px; }.banner-card { min-height: 112px; padding: 24px 30px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; border-radius: 20px; border: 1px solid rgba(64,216,223,.22); background: linear-gradient(110deg, rgba(31,171,181,.13), rgba(141,120,255,.08) 70%, rgba(255,255,255,.025)); position: relative; overflow: hidden; }
.contact-capture { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; padding:16px 20px; border:1px solid rgba(255,202,112,.3); border-radius:16px; background:linear-gradient(110deg,rgba(255,202,112,.10),rgba(64,216,223,.05)); }.contact-capture-copy { min-width:0; }.contact-capture-copy > span { display:block; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.1em; }.contact-capture-copy strong { display:block; margin-top:4px; font-size:15px; }.contact-capture-copy p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }.contact-capture .primary-button { flex:0 0 auto; white-space:nowrap; }
.banner-card::after { content:""; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.08); position: absolute; border-radius: 50%; right: -70px; top: -100px; }.banner-badge { border-radius: 99px; padding: 6px 10px; color: var(--cyan); background: rgba(64,216,223,.1); font-size: 11px; white-space: nowrap; }.banner-card strong { display: block; font-size: 18px; margin-bottom: 5px; }.banner-card p { margin: 0; color: var(--muted); font-size: 13px; }.banner-card > a { z-index: 1; color: var(--cyan); font-weight: 700; font-size: 13px; }.banner-dots { position: absolute; left: 50%; bottom: 9px; display: flex; gap: 5px; }.banner-dots i { width: 5px; height: 5px; border-radius: 50%; background: #ffffff3a; }.banner-dots i.active { width: 18px; border-radius: 4px; background: var(--cyan); }

.section { padding-block: 100px 20px; }.section-heading { margin-bottom: 32px; }.section-heading.centered { text-align: center; }.section-heading > span { color: var(--cyan); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }.section-heading h2 { font-size: clamp(30px,4vw,46px); margin: 10px 0 12px; letter-spacing: -.03em; }.section-heading p { margin: 0; color: var(--muted); line-height: 1.7; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin: 0 auto; }.price-card { min-height: 390px; padding: 31px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.016)); position: relative; overflow: hidden; }.price-card.offline { opacity:.58; filter:grayscale(.85); }.price-card.offline .plan-eta,.price-card.offline li { color:#858c98; }.price-card.offline li::before { color:#737b87; }.price-card.featured { border-color: rgba(64,216,223,.42); box-shadow: 0 0 60px rgba(64,216,223,.08); }.price-card.featured::after { content:"推荐"; position:absolute; top: 18px; right: -31px; width: 120px; transform: rotate(38deg); text-align:center; padding: 5px; color:#031011; font-size:11px; font-weight:900; background: var(--cyan); }.price-card .plan-name { display:flex; align-items:center; gap:10px; }.plan-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); flex:0 0 auto; }.plan-dot.checking { background:var(--gold); box-shadow:0 0 16px var(--gold); }.plan-dot.offline { background:#6f7682; box-shadow:none; }.price-card h3 { margin:0; font-size:21px; }.price-card .tagline { color:var(--muted); margin:10px 0 25px; }.price { display:flex; align-items:baseline; gap:5px; }.price b { font-size:48px; letter-spacing:-.05em; }.price small { color:var(--muted); }.price-card ul { list-style:none; padding:20px 0 8px; margin:0; border-top:1px solid var(--line); }.price-card li { margin:12px 0; color:#c1c9d6; font-size:14px; }.price-card li::before { content:"✓"; color:var(--green); margin-right:10px; }.face-capability { margin:4px 0 12px; padding:9px 11px; border-radius:9px; font-size:12px; color:#b9e8d7; background:rgba(61,215,163,.08); border:1px solid rgba(61,215,163,.18); }.face-capability.limited { color:#d9d0a8; background:rgba(255,202,112,.07); border-color:rgba(255,202,112,.16); }.face-capability.unsupported { color:#ffaaa6; background:rgba(255,93,88,.08); border-color:rgba(255,93,88,.2); }.plan-state { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:99px; font-size:11px; color:var(--green); background:rgba(61,215,163,.1); }.plan-state i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; }.plan-state.checking { color:var(--gold); background:rgba(255,202,112,.1); }.plan-state.offline { color:#8d95a3; background:rgba(141,149,163,.1); }.plan-state.offline i { box-shadow:none; }
.plan-eta { margin: 11px 0 18px; color: var(--gold); font-size: 12px; font-weight: 700; }
.plan-start-button { width:100%; min-height:40px; margin-top:6px; border:1px solid rgba(64,216,223,.58); border-radius:10px; color:#061316; background:linear-gradient(135deg,#85f4ef,#42d8dc); font:inherit; font-size:12px; font-weight:900; cursor:pointer; transition:transform .18s ease,filter .18s ease; }.plan-start-button:hover { filter:brightness(1.06); transform:translateY(-1px); }.plan-start-unavailable { display:inline-block; margin-top:10px; color:#8993a2; font-size:11px; }

/* Desktop pricing rows: keep the catalog compact without sacrificing the
   stacked card layout on phones and narrow tablets. */
@media (min-width: 901px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 1120px;
    gap: 12px;
  }

  .price-card {
    display: grid;
    grid-template-columns: minmax(170px, 1.15fr) minmax(85px, .45fr) minmax(150px, 1fr) minmax(205px, 1.2fr) minmax(130px, .75fr) minmax(132px, .7fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    min-height: 0;
    padding: 17px 20px;
  }

  .price-card .plan-name { grid-column: 1; grid-row: 1; }
  .price-card h3 { font-size: 16px; }
  .price-card .tagline { grid-column: 1; grid-row: 2; margin: 3px 0 0; font-size: 11px; }
  .price-card .price { grid-column: 2; grid-row: 1 / span 2; }
  .price-card .price b { font-size: 30px; }
  .price-card .plan-eta { grid-column: 3; grid-row: 1 / span 2; margin: 0; line-height: 1.45; }
  .price-card ul {
    grid-column: 4;
    grid-row: 1 / span 2;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 12px;
    padding: 0;
    border-top: 0;
  }
  .price-card li { margin: 0; font-size: 11px; line-height: 1.45; }
  .price-card li::before { margin-right: 5px; }
  .price-card .face-capability { grid-column: 5; grid-row: 1; margin: 0; padding: 6px 8px; font-size: 10px; }
  .price-card .plan-state { grid-column: 5; grid-row: 2; justify-self: start; padding: 5px 8px; font-size: 10px; white-space: nowrap; }
  .price-card .plan-start-button { grid-column: 6; grid-row: 1 / span 2; margin:0; min-height:38px; }
  .price-card .plan-start-unavailable { grid-column: 6; grid-row: 1 / span 2; margin:0; }
}

.studio-section { scroll-margin-top: 60px; }.login-gate { padding: 72px 25px; text-align:center; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(140deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); }.gate-icon { width:60px; height:60px; border-radius:18px; background:linear-gradient(135deg,var(--violet),var(--cyan)); display:grid; place-items:center; margin:0 auto 16px; font-size:25px; }.login-gate h3 { margin:0 0 8px; font-size:24px; }.login-gate p { color:var(--muted); margin:0 0 22px; }

/* The marketing homepage and the creation workbench are separate routes.
   The landing page remains the public acquisition page; /create owns the
   focused creator workspace after the user intentionally enters it. */
body:not(.creation-route) .studio-section { display:none; }
body.creation-route #top > :not(.studio-section),body.creation-route .footer { display:none; }
body.creation-route .studio-section { min-height:calc(100dvh - 74px); padding-top:42px; padding-bottom:42px; }
body.creation-route:not(.workspace-mode) .studio-section { display:block; }
.studio-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(340px,.75fr); gap:20px; align-items:start; }.panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 25px 70px #0005; backdrop-filter:blur(16px); }.composer { padding:26px; }.panel-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; }.panel-head > div { display:flex; align-items:center; gap:12px; }.panel-head strong { display:block; }.panel-head small { display:block; color:var(--muted); margin-top:3px; }.panel-head.compact { margin-top:26px; }.panel-head.compact > span { color:var(--muted); font-size:12px; }.panel-head.compact > span.over-limit { color:var(--red); font-weight:800; }.step-number { color:var(--cyan); font-size:11px; letter-spacing:.1em; }.status-chip { padding:6px 9px; border-radius:99px; font-size:11px; color:var(--muted); background:rgba(255,255,255,.045); }.status-chip.ok { color:var(--green); background:rgba(61,215,163,.1); }.status-chip.checking { color:var(--gold); }
.asset-strip { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; min-height:132px; }.add-asset, .asset-card { width:126px; height:122px; flex:0 0 126px; border:1px dashed rgba(255,255,255,.18); border-radius:15px; background:rgba(255,255,255,.025); overflow:hidden; position:relative; }.add-asset { cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; transition:.2s; }.add-asset:hover { border-color:var(--cyan); background:rgba(64,216,223,.05); }.add-asset input { display:none; }.add-asset > span { font-size:27px; color:var(--cyan); line-height:1; }.add-asset strong { font-size:12px; }.add-asset small { max-width:108px; color:var(--muted); font-size:9px; line-height:1.4; }.asset-card img { width:100%; height:100%; object-fit:cover; }.asset-card > span { position:absolute; left:7px; top:7px; padding:3px 7px; border-radius:7px; background:#080b12cf; font-size:10px; }.asset-card button { position:absolute; right:6px; top:6px; width:23px; height:23px; border:0; border-radius:50%; background:#080b12d9; color:#fff; cursor:pointer; }.asset-card small { position:absolute; left:0; right:0; bottom:0; padding:7px; background:linear-gradient(transparent,#05070ae8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:9px; }
.asset-source { position:absolute; left:7px; top:34px; padding:3px 6px; border-radius:6px; color:#d6f9f5; background:rgba(7,13,20,.86); font-size:8px; font-style:normal; }.asset-source.generated { color:var(--gold); }.asset-source.uploaded { color:var(--green); }
.asset-limit-note { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:8px; padding:10px 12px; border:1px solid rgba(255,202,112,.17); border-radius:10px; color:#c7b68f; background:rgba(255,202,112,.055); font-size:10px; line-height:1.55; }.asset-limit-note b { color:var(--gold); }.asset-limit-note span { color:#b9b4a8; }
.prompt-block textarea { width:100%; min-height:240px; resize:vertical; padding:20px; border:1px solid var(--line); border-radius:16px; outline:none; background:#0b101a; color:var(--text); line-height:1.8; font-size:14px; }.prompt-block textarea:focus { border-color:rgba(64,216,223,.48); box-shadow:0 0 0 3px rgba(64,216,223,.06); }.generation-controls { display:grid; grid-template-columns:1.25fr 1fr 1fr 1.25fr; gap:12px; margin-top:16px; }.generation-controls label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:11px; }.generation-controls select { width:100%; appearance:none; border:1px solid var(--line); border-radius:11px; padding:12px 34px 12px 12px; color:var(--text); outline:none; background:#101622 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath fill='none' stroke='%2397a1b3' d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; }.generation-controls option { background:#111724; }.advanced { margin-top:14px; color:var(--muted); font-size:12px; }.advanced summary { cursor:pointer; }.advanced label { display:block; margin-top:12px; }.submit-row { display:flex; align-items:center; justify-content:space-between; margin-top:25px; padding-top:22px; border-top:1px solid var(--line); }.submit-row > div { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:3px 10px; }.submit-row small { color:var(--muted); }.submit-row strong { font-size:25px; }.submit-row span { grid-column:1/-1; color:var(--muted); font-size:11px; }.generate-button { min-width:170px; padding:12px 12px 12px 20px; border:0; border-radius:13px; background:linear-gradient(135deg,#74ece8,#35ced6); color:#041113; font-weight:900; cursor:pointer; display:flex; justify-content:space-between; align-items:center; box-shadow:0 10px 30px rgba(53,206,214,.16); }.generate-button b { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:#ffffff5f; }.generate-button:disabled { opacity:.42; cursor:not-allowed; }
.prompt-editor { position:relative; }.mention-hint { display:flex; align-items:center; gap:6px; margin-top:8px; color:var(--muted); font-size:11px; }.mention-hint b { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; color:var(--cyan); background:rgba(64,216,223,.1); }.mention-menu { position:absolute; z-index:30; left:10px; right:10px; top:calc(100% + 8px); max-height:360px; overflow:auto; padding:13px; border:1px solid rgba(64,216,223,.28); border-radius:14px; background:#0b111cf7; box-shadow:0 22px 60px #000b; backdrop-filter:blur(18px); }.mention-menu-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 11px; }.mention-menu-head strong { font-size:13px; }.mention-menu-head small { color:var(--muted); font-size:10px; }.mention-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:10px; }.mention-option { min-width:0; display:flex; flex-direction:column; gap:7px; padding:6px; border:1px solid transparent; border-radius:11px; color:var(--text); text-align:center; background:rgba(255,255,255,.025); cursor:pointer; }.mention-option:hover,.mention-option.active { border-color:rgba(64,216,223,.45); background:rgba(64,216,223,.09); }.mention-option img { width:100%; aspect-ratio:1; border-radius:8px; object-fit:cover; background:#05080d; }.mention-option span { overflow:hidden; width:100%; color:#d9ffff; font-size:11px; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }.mention-empty { padding:15px 12px; color:var(--muted); text-align:center; font-size:11px; }
.activity { position:sticky; top:94px; padding:22px; max-height:720px; overflow:auto; }.text-button { border:0; color:var(--cyan); background:none; cursor:pointer; font-size:12px; }.task-list { display:flex; flex-direction:column; gap:11px; }.empty-state { color:var(--muted); text-align:center; padding:70px 10px; }.empty-state span { font-size:34px; }.task-item { border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(255,255,255,.02); }.task-item-head { display:flex; justify-content:space-between; gap:8px; }.task-item-head strong { font-size:13px; }.task-item-head span { font-size:10px; padding:4px 7px; border-radius:99px; background:rgba(255,255,255,.05); color:var(--muted); }.task-item-head span.completed { color:var(--green); }.task-item-head span.failed { color:var(--red); }.task-item p { margin:9px 0; color:#abb5c4; font-size:11px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.task-meta { display:flex; justify-content:space-between; color:#737f91; font-size:10px; }.mini-progress { display:block; width:100%; height:3px; border:0; border-radius:3px; appearance:none; background:#ffffff0c; margin:10px 0; overflow:hidden; }.mini-progress::-webkit-progress-bar { background:#ffffff0c; }.mini-progress::-webkit-progress-value { background:var(--cyan); transition:width .3s; }.mini-progress::-moz-progress-bar { background:var(--cyan); transition:width .3s; }.task-actions { display:flex; gap:8px; margin-top:10px; }.task-actions button, .task-actions a { flex:1; text-align:center; border:1px solid var(--line); border-radius:8px; padding:7px; color:#bdc7d5; background:#ffffff05; cursor:pointer; font-size:10px; }

/* Signed-in creation workspace: familiar "model rail / creation canvas / task queue"
   interaction, while retaining the existing app's model metadata and task APIs. */
.studio-workspace { display:grid; grid-template-columns:318px minmax(0,1fr) 290px; gap:0; align-items:stretch; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#0b111b; box-shadow:0 25px 70px #0005; }
.studio-workspace .panel { border:0; border-radius:0; box-shadow:none; background:transparent; backdrop-filter:none; }
.studio-model-rail { min-width:0; padding:18px 12px; border-right:1px solid var(--line); background:#0a1019; }
.studio-rail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:1px 7px 13px; }.studio-rail-head strong { display:block; font-size:14px; }.studio-rail-head small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }.studio-rail-head > span { color:var(--cyan); font-size:10px; white-space:nowrap; }
.studio-model-filters { display:flex; gap:5px; margin:0 3px 11px; padding:4px; border:1px solid rgba(255,255,255,.06); border-radius:10px; background:#111923; }.studio-model-filters button { flex:1; min-width:0; padding:6px 4px; border:0; border-radius:7px; color:var(--muted); background:transparent; font:inherit; font-size:11px; cursor:pointer; }.studio-model-filters button.active { color:#071214; background:var(--cyan); font-weight:800; }
.studio-model-list { display:flex; max-height:570px; flex-direction:column; gap:6px; overflow:auto; padding:0 2px 4px; }.studio-model-empty { padding:28px 10px; color:var(--muted); text-align:center; font-size:12px; }
.studio-model-button { width:100%; display:grid; grid-template-columns:28px minmax(0,1fr) 36px; align-items:center; gap:9px; padding:9px 8px; border:1px solid transparent; border-radius:11px; color:var(--text); background:transparent; text-align:left; cursor:pointer; }.studio-model-button:hover { background:rgba(255,255,255,.035); }.studio-model-button.selected { border-color:rgba(64,216,223,.55); background:rgba(64,216,223,.09); box-shadow:inset 3px 0 0 var(--cyan); }.studio-model-button.offline { opacity:.52; cursor:not-allowed; }
.studio-model-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#92f6f0; background:#182738; font-size:10px; font-weight:900; }.studio-model-copy { min-width:0; }.studio-model-name { display:block; overflow:visible; color:#dbe5ef; font-size:11px; font-weight:750; line-height:1.32; overflow-wrap:anywhere; }.studio-model-meta { display:block; overflow:hidden; margin-top:3px; color:#8492a5; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }.studio-model-state { justify-self:end; padding:3px 4px; border-radius:5px; color:var(--green); background:rgba(61,215,163,.13); font-size:9px; white-space:nowrap; }.studio-model-state.checking { color:var(--gold); background:rgba(255,202,112,.12); }.studio-model-state.offline { color:#87909d; background:rgba(135,144,157,.12); }.studio-model-footnote { margin:12px 5px 0; color:#758093; font-size:10px; line-height:1.55; }
.studio-composer { min-width:0; padding:0; background:#0d1420 !important; }.studio-selected-plan { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding:23px 25px 16px; border-bottom:1px solid var(--line); }.studio-selected-plan .step-number { display:block; margin-bottom:7px; }.studio-selected-plan h3 { margin:0; color:#f2f6fb; font-size:20px; letter-spacing:-.02em; }.studio-selected-plan p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }.studio-selected-price { min-width:110px; padding:10px 11px; border:1px solid rgba(64,216,223,.2); border-radius:11px; background:rgba(64,216,223,.05); text-align:right; }.studio-selected-price strong { display:block; color:var(--cyan); font-size:24px; line-height:1; }.studio-selected-price small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.studio-capabilities { display:flex; flex-wrap:wrap; gap:7px; min-height:49px; padding:12px 25px; border-bottom:1px solid var(--line); }.studio-capabilities:empty::after { content:'选择模型后将显示时长、参考素材与画幅能力'; color:var(--muted); font-size:11px; }.studio-capabilities span { padding:5px 8px; border-radius:7px; color:#b7c6d5; background:#172231; font-size:10px; }
.studio-material-head { margin:0; padding:20px 25px 12px; }.studio-composer .asset-strip { margin:0 25px; }.studio-composer .asset-limit-note { margin:8px 25px 0; }.studio-composer .prompt-block { padding:0 25px 4px; }.studio-composer .panel-head.compact { margin-top:22px; }.studio-composer .prompt-block textarea { min-height:168px; }.studio-generation-controls { grid-template-columns:minmax(122px,.8fr) minmax(122px,.75fr) minmax(180px,1.2fr); margin:13px 25px 0; }.studio-generation-controls .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.studio-submit-dock { position:sticky; bottom:0; z-index:5; margin:18px 0 0; padding:14px 25px; border-top:1px solid var(--line); background:#111a27; }.studio-submit-dock .generate-button { min-width:177px; }
.studio-activity { position:sticky; top:82px; align-self:start; max-height:688px; padding:18px 15px; border-left:1px solid var(--line) !important; background:#0a1019 !important; }.studio-activity .panel-head { margin-bottom:14px; }.studio-activity .expiry-notice { margin:-2px 0 12px; }.studio-activity .task-item { padding:12px; border-radius:11px; }.studio-activity .empty-state { padding:54px 8px; }.studio-activity .task-meta { gap:8px; }

@media (max-width: 1120px) { .studio-workspace { grid-template-columns:280px minmax(0,1fr); }.studio-activity { grid-column:1 / -1; position:static; max-height:none; border-top:1px solid var(--line); border-left:0 !important; }.studio-activity .task-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.studio-activity .expiry-notice { max-width:680px; } }
@media (max-width: 900px) { .studio-workspace { display:block; }.studio-model-rail { padding:14px 12px; border-right:0; border-bottom:1px solid var(--line); }.studio-model-list { max-height:none; flex-direction:row; overflow-x:auto; }.studio-model-button { flex:0 0 205px; }.studio-model-footnote { display:none; }.studio-selected-plan { padding:18px; }.studio-capabilities { padding:11px 18px; }.studio-material-head { padding:18px 18px 11px; }.studio-composer .asset-strip { margin:0 18px; }.studio-composer .asset-limit-note { margin:8px 18px 0; }.studio-composer .prompt-block { padding:0 18px 4px; }.studio-generation-controls { margin:13px 18px 0; }.studio-submit-dock { padding:13px 18px; }.studio-activity .task-list { grid-template-columns:1fr; } }
@media (max-width: 620px) { .studio-selected-plan { gap:12px; }.studio-selected-plan h3 { font-size:16px; }.studio-selected-price { min-width:80px; }.studio-selected-price strong { font-size:20px; }.studio-composer .prompt-block textarea { min-height:142px; }.studio-generation-controls { grid-template-columns:1fr; }.studio-submit-dock { align-items:center; }.studio-submit-dock .generate-button { min-width:145px; } }
.expiry-notice { margin:-5px 0 14px; padding:10px 12px; border:1px solid rgba(255,202,112,.16); border-radius:10px; color:#d7bb8b; background:rgba(255,202,112,.055); font-size:10px; line-height:1.55; }

.workflow { padding-bottom:110px; }.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.workflow-grid article { min-height:190px; padding:27px; border:1px solid var(--line); border-radius:19px; background:rgba(255,255,255,.025); }.workflow-grid b { color:var(--cyan); font-size:11px; }.workflow-grid span { display:block; font-size:19px; font-weight:800; margin:22px 0 10px; }.workflow-grid p { color:var(--muted); line-height:1.7; margin:0; font-size:13px; }.footer { min-height:160px; padding-block:35px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; gap:35px; align-items:center; color:var(--muted); font-size:11px; }.footer p { text-align:center; }.footer-contact { display:grid; gap:6px; justify-items:end; }.footer-contact span { color:var(--cyan); font-size:12px; font-weight:700; }.footer-contact small { color:var(--muted); }.support-hint { margin:12px 0 0; text-align:center; color:var(--muted); font-size:11px; }.support-hint b { color:var(--cyan); }

.modal { width:min(460px,calc(100% - 28px)); max-height:90vh; overflow:auto; padding:30px; color:var(--text); border:1px solid var(--line-bright); border-radius:22px; background:#101622; box-shadow:0 30px 120px #000c; }.modal::backdrop { background:#020409c9; backdrop-filter:blur(8px); }.modal-close { position:absolute; top:13px; right:15px; width:31px; height:31px; border:0; border-radius:50%; background:#ffffff0b; color:var(--muted); cursor:pointer; }.modal-brand { display:flex; gap:13px; align-items:center; margin-bottom:22px; }.modal-brand strong,.modal-brand small { display:block; }.modal-brand small { color:var(--muted); margin-top:4px; font-size:11px; }.auth-tabs,.admin-tabs { display:flex; gap:5px; padding:4px; border-radius:11px; background:#080c14; margin-bottom:18px; }.auth-tabs button,.admin-tabs button { flex:1; border:0; border-radius:8px; padding:9px; color:var(--muted); background:transparent; cursor:pointer; }.auth-tabs button.active,.admin-tabs button.active { color:var(--text); background:#1b2332; }.modal-form { display:flex; flex-direction:column; gap:14px; }.modal-form label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:11px; }.modal-form input { border:1px solid var(--line); border-radius:11px; padding:13px; outline:none; color:var(--text); background:#0a0f18; }.modal-form input:focus { border-color:rgba(64,216,223,.5); }.notification-opt-in { display:flex; align-items:flex-start; gap:8px; color:var(--muted); font-size:11px; line-height:1.55; cursor:pointer; }.notification-opt-in input { width:auto; margin:2px 0 0; accent-color:var(--cyan); }.form-message { min-height:18px; margin:13px 0 0; text-align:center; color:var(--red); font-size:12px; }.wallet-heading { text-align:center; margin:8px 0 25px; }.wallet-heading span,.wallet-heading small { display:block; color:var(--muted); }.wallet-heading strong { display:block; margin:6px; font-size:40px; }.recharge-options { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:15px; }.recharge-option { padding:13px 5px; border:1px solid var(--line); border-radius:11px; color:var(--text); background:#0b1019; cursor:pointer; }.recharge-option.active { border-color:var(--cyan); color:var(--cyan); background:rgba(64,216,223,.06); }.recharge-email { display:flex; flex-direction:column; gap:6px; margin:0 0 12px; color:var(--muted); font-size:11px; }.recharge-email input { border:1px solid var(--line); border-radius:10px; padding:11px 12px; color:var(--text); background:#0a0f18; outline:none; }.recharge-email input:focus { border-color:rgba(64,216,223,.5); }.recharge-email small { color:var(--muted); font-size:10px; line-height:1.5; }.notification-save-row { display:flex; justify-content:space-between; align-items:center; gap:9px; margin:11px 0 15px; }.notification-save-row small { color:var(--muted); font-size:10px; line-height:1.45; }.notification-save-row button { padding:8px 10px; white-space:nowrap; }.qr-panel { text-align:center; margin:18px 0; }.qr-panel img { width:230px; height:230px; border:8px solid #fff; border-radius:8px; }.qr-panel strong,.qr-panel span { display:block; margin-top:7px; }.qr-panel span { color:var(--muted); font-size:11px; }.ledger-list { margin-top:20px; border-top:1px solid var(--line); }.ledger-item { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:11px; }.ledger-item div span { display:block; color:var(--muted); margin-top:3px; }.ledger-item b.positive { color:var(--green); }.ledger-item b.negative { color:var(--red); }
.admin-modal { width:min(1020px,calc(100% - 28px)); }.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }.admin-stats div { padding:16px; border:1px solid var(--line); border-radius:12px; background:#0a0f18; }.admin-stats span { display:block; color:var(--muted); font-size:10px; }.admin-stats strong { display:block; margin-top:6px; font-size:21px; }.admin-content { overflow:auto; min-height:310px; }.admin-table { width:100%; border-collapse:collapse; font-size:11px; }.admin-table th,.admin-table td { padding:11px 9px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }.admin-table th { color:var(--muted); }.admin-table input { width:90px; padding:7px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:#080c14; }.admin-table button { border:1px solid var(--line); border-radius:7px; padding:7px 10px; color:var(--cyan); background:#ffffff05; cursor:pointer; }.banner-editor { display:grid; grid-template-columns:100px 1fr 1.5fr 120px auto; gap:7px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }.banner-editor input { min-width:0; padding:9px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c14; }.video-modal { width:min(680px,calc(100% - 28px)); }.video-title { display:block; margin-bottom:16px; }.video-modal video { width:100%; max-height:70vh; border-radius:12px; background:#000; margin-bottom:13px; }
.admin-tabs { flex-wrap:wrap; }.admin-tabs button { min-width:108px; }.admin-help { margin-bottom:12px; padding:11px 13px; border:1px solid rgba(64,216,223,.16); border-radius:10px; color:#b9cfdb; background:rgba(64,216,223,.045); font-size:11px; }.role-badge { display:inline-flex; padding:4px 7px; border-radius:999px; color:#b9c3d1; background:#ffffff0a; }.role-badge.admin { color:var(--gold); background:rgba(255,202,112,.1); }.role-badge.operator { color:var(--cyan); background:rgba(64,216,223,.09); }.admin-table td small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }.user-status { display:inline-flex; margin-top:4px; padding:3px 6px; border-radius:999px; font-size:10px; }.user-status.active { color:#9af0cd; background:rgba(61,215,163,.09); }.user-status.suspended { color:#ffb0bc; background:rgba(255,104,123,.09); }.admin-user-actions { display:flex; flex-wrap:wrap; gap:5px; }.admin-user-detail { margin-top:16px; padding:15px; border:1px solid rgba(64,216,223,.25); border-radius:12px; background:#07101a; }.admin-user-detail-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.admin-user-detail-head strong,.admin-user-detail-head small { display:block; }.admin-user-detail-head small { margin-top:5px; color:var(--muted); font-size:11px; }.admin-user-detail-head button,.admin-key-list button { border:1px solid var(--line); border-radius:7px; padding:6px 9px; color:var(--cyan); background:#ffffff05; cursor:pointer; }.admin-user-detail-stats { display:flex; flex-wrap:wrap; gap:8px; margin:13px 0; }.admin-user-detail-stats span { min-width:100px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; color:var(--text); }.admin-user-detail-stats small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }.admin-user-detail h4 { margin:14px 0 7px; font-size:12px; }.admin-key-list,.admin-ledger-list { display:grid; gap:6px; }.admin-key-list > div,.admin-ledger-list > div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#ffffff03; font-size:11px; }.admin-key-list span strong,.admin-key-list span small { display:block; }.admin-key-list span small,.admin-ledger-list small { margin-top:3px; color:var(--muted); font-size:10px; }.admin-ledger-list b.positive { color:#9af0cd; }.admin-ledger-list b.negative { color:#ffb0bc; }.quick-credit { display:flex; flex-wrap:wrap; gap:5px; max-width:230px; }.quick-credit button { padding:6px 8px; }.operator-create { display:grid; grid-template-columns:1fr 1.2fr 1.2fr auto; gap:8px; margin:0 0 18px; }.operator-create input { min-width:0; padding:10px 11px; border:1px solid var(--line); border-radius:9px; outline:none; color:var(--text); background:#070b12; }.operator-create input:focus { border-color:rgba(64,216,223,.5); }.settings-status-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }.settings-status { padding:7px 10px; border:1px solid rgba(255,104,123,.2); border-radius:999px; color:#ffb0bc; background:rgba(255,104,123,.06); font-size:11px; }.settings-status.ready { border-color:rgba(61,215,163,.24); color:#9af0cd; background:rgba(61,215,163,.07); }.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.settings-card { padding:18px; border:1px solid var(--line); border-radius:14px; background:#0a0f18; }.settings-card h3 { margin:0; font-size:16px; }.settings-card > p { margin:7px 0 15px; color:var(--muted); font-size:11px; line-height:1.55; }.settings-card label { display:flex; flex-direction:column; gap:6px; margin-top:11px; color:#aab4c3; font-size:11px; }.settings-card input,.settings-card textarea { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:9px; outline:none; color:var(--text); background:#070b12; }.settings-card input:focus,.settings-card textarea:focus { border-color:rgba(64,216,223,.5); }.settings-card textarea { min-height:126px; resize:vertical; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; }.settings-save-row { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#0a0f18; }.settings-save-row span { color:var(--muted); font-size:11px; }
.admin-acquisition-summary { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin:0 0 14px; }.admin-acquisition-summary > b,.admin-acquisition-summary > span { padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#0a0f18; font-size:11px; }.admin-acquisition-summary > b { display:flex; align-items:center; color:var(--cyan); }.admin-acquisition-summary span strong,.admin-acquisition-summary span small { display:block; }.admin-acquisition-summary span small { margin-top:4px; color:var(--muted); font-size:10px; }.admin-acquisition-detail { display:grid; gap:5px; padding:10px 11px; border:1px solid var(--line); border-radius:9px; background:#ffffff03; font-size:11px; }.admin-acquisition-detail small { color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.admin-user-filter { display:grid; grid-template-columns:minmax(180px,1.5fr) repeat(5,minmax(110px,.8fr)) auto auto; gap:7px; align-items:center; margin:0 0 10px; }.admin-user-filter input,.admin-user-filter select,.admin-user-filter button,.admin-user-notes textarea,.admin-user-notes button { min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c14; outline:none; font-size:11px; }.admin-user-filter input:focus,.admin-user-filter select:focus,.admin-user-notes textarea:focus { border-color:rgba(64,216,223,.5); }.admin-user-filter button,.admin-user-notes button,.admin-user-pagination button { color:var(--cyan); cursor:pointer; }.admin-user-filter button:disabled,.admin-user-pagination button:disabled { cursor:not-allowed; opacity:.45; }.admin-user-directory-summary { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 10px; }.admin-user-directory-summary span,.admin-user-directory-summary small { padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#0a0f18; color:var(--muted); font-size:10px; }.admin-user-directory-summary b { color:var(--cyan); font-size:12px; }.admin-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }.admin-table-wrap .admin-table { min-width:1120px; }.admin-user-pagination { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin:10px 0 2px; color:var(--muted); font-size:11px; }.admin-user-pagination button { padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:#ffffff05; }.admin-user-360-grid,.admin-user-history-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }.admin-user-360-grid section,.admin-user-history-grid section,.admin-user-notes,.admin-user-audit { min-width:0; padding:11px; border:1px solid var(--line); border-radius:10px; background:#ffffff03; }.admin-user-360-grid h4,.admin-user-history-grid h4,.admin-user-notes h4,.admin-user-audit h4 { margin:0 0 8px; }.admin-user-mini-grid { display:grid; gap:6px; }.admin-user-mini-grid span { padding:8px; border:1px solid var(--line); border-radius:8px; background:#080d16; font-size:10px; }.admin-user-mini-grid b,.admin-user-mini-grid small { display:block; }.admin-user-mini-grid b { margin-top:4px; color:var(--cyan); font-size:13px; }.admin-user-mini-grid small { margin-top:3px; color:var(--muted); line-height:1.4; }.admin-history-list { display:grid; gap:6px; max-height:210px; overflow:auto; }.admin-history-list > div { padding:8px; border:1px solid var(--line); border-radius:8px; background:#080d16; font-size:10px; }.admin-history-list strong,.admin-history-list small { display:block; }.admin-history-list small { margin-top:4px; color:var(--muted); line-height:1.45; overflow-wrap:anywhere; }.admin-user-notes,.admin-user-audit { margin-top:10px; }.admin-user-notes form { display:grid; grid-template-columns:1fr auto; gap:7px; margin-bottom:8px; }.admin-user-notes textarea { min-height:56px; resize:vertical; }.admin-user-notes button { align-self:start; }
.api-modal { width:min(1080px,calc(100% - 28px)); }.api-modal .brand-mark { width:48px; font-size:10px; letter-spacing:.04em; }.api-callout { display:flex; gap:14px; padding:14px 16px; border:1px solid rgba(64,216,223,.2); border-radius:12px; background:rgba(64,216,223,.055); margin-bottom:18px; }.api-callout b { color:var(--cyan); white-space:nowrap; }.api-callout span { color:var(--muted); font-size:12px; line-height:1.5; }.api-auth-gate { text-align:center; padding:35px; border:1px dashed var(--line-bright); border-radius:14px; }.api-center-tabs { display:flex; gap:5px; padding:4px; margin-bottom:18px; border-radius:11px; background:#080c14; }.api-center-tabs button { flex:1; border:0; border-radius:8px; padding:10px; color:var(--muted); background:transparent; cursor:pointer; }.api-center-tabs button.active { color:var(--text); background:#1b2332; }.api-panel { min-height:280px; }.api-section-head,.api-key-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }.api-section-head small,.api-key-head small { display:block; color:var(--muted); margin-top:4px; }.api-usage-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; margin-bottom:15px; }.api-usage-stats > div { padding:14px; border:1px solid var(--line); border-radius:11px; background:#0a0f18; }.api-usage-stats span { display:block; color:var(--muted); font-size:10px; }.api-usage-stats strong { display:block; margin-top:6px; font-size:20px; }.api-usage-stats strong small { color:var(--muted); font-size:12px; }.api-record-wrap { overflow:auto; max-height:420px; border:1px solid var(--line); border-radius:12px; }.api-record-table { width:100%; min-width:900px; border-collapse:collapse; font-size:11px; }.api-record-table th,.api-record-table td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; white-space:nowrap; }.api-record-table th { position:sticky; z-index:1; top:0; color:var(--muted); background:#0c111b; }.api-record-table tbody tr:last-child td { border-bottom:0; }.api-record-table td > strong,.api-record-table td > small { display:block; }.api-record-table td > small { max-width:210px; margin-top:4px; overflow:hidden; color:var(--muted); text-overflow:ellipsis; }.api-record-table code { color:#b9f3f0; }.api-record-table a { color:var(--cyan); font-weight:700; }.api-record-table del { color:var(--muted); }.api-copy-id { margin-left:6px; border:0; color:var(--cyan); background:transparent; cursor:pointer; font-size:10px; }.api-record-status { display:inline-flex; padding:4px 7px; border-radius:99px; color:var(--muted); background:#ffffff0a; }.api-record-status.completed { color:var(--green); background:rgba(61,215,163,.1); }.api-record-status.failed { color:var(--red); background:rgba(255,104,123,.1); }.api-record-status.creating,.api-record-status.queued,.api-record-status.pending,.api-record-status.processing { color:var(--gold); background:rgba(255,202,112,.1); }.api-empty { min-height:220px; display:grid; place-content:center; }.api-empty small { color:var(--muted); }.api-key-list { display:flex; flex-direction:column; gap:8px; }.api-key-item { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:11px; background:#0a0f18; }.api-key-item small { display:block; color:var(--muted); margin-top:4px; }.api-key-item code { color:#bfc9d8; }.api-key-item button,.secret-reveal button { border:1px solid var(--line); border-radius:8px; padding:7px 10px; color:var(--red); background:#ffffff05; cursor:pointer; }.secret-reveal { margin:13px 0; padding:14px; border:1px solid rgba(255,202,112,.25); border-radius:12px; background:rgba(255,202,112,.06); }.secret-reveal span { display:block; color:var(--gold); font-size:11px; margin-bottom:8px; }.secret-reveal code { display:block; overflow-wrap:anywhere; padding:10px; color:#fff; background:#080c14; border-radius:8px; }.secret-reveal button { color:var(--cyan); margin-top:9px; }.api-docs { margin-top:0; border-top:0; padding-top:2px; }.api-docs h3 { margin:0 0 8px; }.api-docs p { color:var(--muted); font-size:12px; }.api-docs code { color:#b9f3f0; }.api-docs pre { padding:16px; overflow:auto; border:1px solid var(--line); border-radius:12px; color:#cbd5e2; background:#070b12; font-size:11px; line-height:1.65; }.api-note { line-height:1.7; }
.workflow-modal { width:min(1180px,calc(100% - 28px)); }.workflow-callout { display:flex; gap:14px; margin-bottom:18px; padding:14px 16px; border:1px solid rgba(168,155,255,.24); border-radius:12px; background:rgba(168,155,255,.06); }.workflow-callout b { color:#c8c0ff; white-space:nowrap; }.workflow-callout span { color:var(--muted); font-size:12px; line-height:1.55; }.workflow-app-grid { display:grid; grid-template-columns:minmax(350px,.85fr) minmax(0,1.4fr); gap:18px; }.workflow-project-form,.workflow-projects { min-width:0; padding:18px; border:1px solid var(--line); border-radius:14px; background:#0a0f18; }.workflow-project-form { display:flex; flex-direction:column; gap:13px; }.workflow-project-form label { display:flex; flex-direction:column; gap:6px; color:#aab4c3; font-size:11px; }.workflow-project-form input,.workflow-project-form select,.workflow-project-form textarea { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:9px; outline:none; color:var(--text); background:#070b12; }.workflow-project-form textarea { min-height:210px; resize:vertical; line-height:1.65; }.workflow-project-form input:focus,.workflow-project-form select:focus,.workflow-project-form textarea:focus { border-color:rgba(64,216,223,.5); }.workflow-form-row { display:grid; grid-template-columns:1.1fr .8fr .7fr; gap:9px; }.workflow-form-row:last-of-type { grid-template-columns:1fr 1fr; }.workflow-budget { padding:10px 12px; border:1px solid rgba(255,202,112,.18); border-radius:9px; color:#d7bb8b; background:rgba(255,202,112,.055); font-size:11px; line-height:1.55; }.workflow-project-list { display:flex; flex-direction:column; gap:8px; max-height:240px; overflow:auto; }.workflow-project-card { display:grid; grid-template-columns:1fr auto; gap:7px 12px; padding:12px; border:1px solid var(--line); border-radius:11px; color:var(--text); text-align:left; background:#0d131f; cursor:pointer; }.workflow-project-card:hover,.workflow-project-card.active { border-color:rgba(64,216,223,.38); background:rgba(64,216,223,.055); }.workflow-project-card strong,.workflow-project-card small { display:block; }.workflow-project-card small { margin-top:4px; color:var(--muted); }.workflow-project-card b { color:var(--cyan); font-size:11px; }.workflow-stage-panel { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }.workflow-stage-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:11px; }.workflow-stage-head small { color:var(--muted); }.workflow-stage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:360px; overflow:auto; }.workflow-stage { display:grid; grid-template-columns:29px 1fr auto; gap:9px; align-items:start; padding:10px; border:1px solid var(--line); border-radius:10px; background:#080d16; }.workflow-stage > b { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; color:var(--cyan); background:rgba(64,216,223,.08); font-size:10px; }.workflow-stage strong,.workflow-stage small { display:block; }.workflow-stage small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.45; }.workflow-stage em { padding:4px 7px; border-radius:99px; color:var(--muted); background:#ffffff08; font-size:9px; font-style:normal; }.workflow-stage em.ready { color:var(--gold); background:rgba(255,202,112,.1); }.workflow-stage em.completed { color:var(--green); background:rgba(61,215,163,.1); }.workflow-stage em.skipped { color:#858fa0; }
.image-modal { width:min(1180px,calc(100% - 28px)); }.image-callout { display:flex; gap:14px; margin-bottom:18px; padding:14px 16px; border:1px solid rgba(64,216,223,.2); border-radius:12px; background:rgba(64,216,223,.055); }.image-callout b { color:var(--cyan); white-space:nowrap; }.image-callout span { color:var(--muted); font-size:12px; line-height:1.55; }.image-workspace { display:grid; grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr); gap:18px; }.image-generation-form,.image-task-panel { min-width:0; padding:18px; border:1px solid var(--line); border-radius:14px; background:#0a0f18; }.image-generation-form { display:flex; flex-direction:column; gap:13px; }.image-generation-form label { display:flex; flex-direction:column; gap:6px; color:#aab4c3; font-size:11px; }.image-generation-form input,.image-generation-form select,.image-generation-form textarea { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:9px; outline:none; color:var(--text); background:#070b12; }.image-generation-form textarea { min-height:160px; resize:vertical; line-height:1.65; }.image-generation-form input:focus,.image-generation-form select:focus,.image-generation-form textarea:focus { border-color:rgba(64,216,223,.5); }.workflow-image-queue { display:grid; gap:9px; padding:12px; border:1px solid rgba(64,216,223,.24); border-radius:11px; background:rgba(64,216,223,.055); }.workflow-image-queue-head { display:flex; justify-content:space-between; gap:10px; align-items:start; }.workflow-image-queue-head strong { display:block; color:#dffcff; font-size:12px; }.workflow-image-queue-head small,.workflow-image-queue-head span,.workflow-image-queue p { color:var(--muted); font-size:10px; }.workflow-image-queue-head small { display:block; margin-top:3px; }.workflow-image-queue-head span { color:var(--cyan); }.workflow-image-queue-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }.workflow-image-queue-row select { min-width:0; }.workflow-image-queue-row .ghost-button { padding:9px 12px; }.workflow-image-queue p { margin:0; line-height:1.5; }.image-form-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.image-reference-head { display:flex; justify-content:space-between; align-items:end; gap:10px; }.image-reference-head small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.image-reference-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; max-height:220px; overflow:auto; }.image-reference-grid .empty-state { grid-column:1/-1; padding:30px 10px; }.image-reference-card { position:relative; padding:0; overflow:hidden; aspect-ratio:1; border:1px solid var(--line); border-radius:9px; background:#05080d; cursor:pointer; }.image-reference-card img { width:100%; height:100%; object-fit:cover; }.image-reference-card span { position:absolute; right:5px; bottom:5px; display:none; width:20px; height:20px; place-items:center; border-radius:50%; color:#041113; background:var(--cyan); font-size:11px; font-weight:900; }.image-reference-card.selected { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(64,216,223,.18); }.image-reference-card.selected span { display:grid; }.image-submit-row { display:flex; justify-content:space-between; align-items:end; gap:15px; padding-top:15px; border-top:1px solid var(--line); }.image-submit-row > div { display:grid; gap:3px; }.image-submit-row small,.image-submit-row span { color:var(--muted); font-size:10px; }.image-submit-row strong { font-size:25px; }.image-task-list { display:flex; flex-direction:column; gap:10px; max-height:610px; overflow:auto; }.image-task-item { padding:13px; border:1px solid var(--line); border-radius:12px; background:#080d16; }.image-task-head { display:flex; justify-content:space-between; gap:10px; }.image-task-head span { padding:4px 7px; border-radius:99px; color:var(--muted); background:#ffffff08; font-size:10px; }.image-task-head span.completed { color:var(--green); background:rgba(61,215,163,.1); }.image-task-head span.failed { color:var(--red); background:rgba(255,104,123,.1); }.image-task-item > p { margin:8px 0; overflow:hidden; color:#aeb8c8; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }.image-task-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; }.image-result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:10px; }.image-result { position:relative; overflow:hidden; aspect-ratio:1; border-radius:8px; background:#05080d; }.image-result img { width:100%; height:100%; object-fit:cover; }.image-result a { position:absolute; inset:auto 4px 4px; padding:5px 6px; border-radius:6px; color:#fff; text-align:center; background:#05080dcc; font-size:9px; }.image-result.expired { display:grid; place-items:center; padding:6px; color:var(--gold); border:1px dashed rgba(255,202,112,.2); font-size:9px; }.workflow-stage { cursor:default; }.workflow-stage.selectable { cursor:pointer; }.workflow-stage.selectable:hover,.workflow-stage.selected { border-color:rgba(64,216,223,.38); background:rgba(64,216,223,.05); }.workflow-stage-editor { margin-top:12px; padding:13px; border:1px solid var(--line); border-radius:11px; background:#080d16; }.workflow-stage-editor label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:11px; }.workflow-stage-editor textarea { min-height:130px; padding:11px; resize:vertical; border:1px solid var(--line); border-radius:9px; color:var(--text); background:#05080d; line-height:1.6; }.workflow-stage-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }.workflow-artifacts { margin-top:10px; color:var(--muted); font-size:10px; }.workflow-artifacts li { margin-top:4px; }
.image-reference-card em { position:absolute; left:4px; bottom:4px; max-width:calc(100% - 8px); padding:3px 5px; border-radius:5px; color:#d7fbf6; background:#05080dcc; font-size:8px; font-style:normal; }.workflow-artifact-source { margin-top:8px; color:var(--gold); font-size:10px; }
.workflow-production-gate { margin-top:10px; padding:11px; border:1px solid rgba(76,211,213,.24); border-radius:9px; background:rgba(64,216,223,.035); }.workflow-production-gate > strong { display:block; color:#dffefd; font-size:15px; }.workflow-production-gate > p { margin:8px 0 12px; color:var(--muted); font-size:11px; line-height:1.7; }.workflow-production-progress { margin:9px 0 0; padding:8px 9px; border:1px solid rgba(255,202,112,.18); border-radius:8px; color:#d7bb8b !important; background:rgba(255,202,112,.05); font-size:10px !important; line-height:1.55; }.workflow-production-list { display:grid; gap:5px; margin:10px 0; padding:0; list-style:none; counter-reset:episode; }.workflow-production-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 8px; border:1px solid #263842; border-radius:7px; background:#091219; font-size:9px; }.workflow-production-list b { color:#b8eeee; }.workflow-production-list span { color:#95a6ad; text-align:right; }.workflow-production-stats { display:flex; gap:9px; flex-wrap:wrap; }.workflow-production-stats span { padding:7px 10px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#05080d; font-size:10px; }.workflow-production-stats b { color:var(--cyan); font-size:12px; }
.toast { position:fixed; z-index:100; left:50%; bottom:25px; transform:translate(-50%,25px); padding:12px 18px; border:1px solid rgba(61,215,163,.25); border-radius:11px; color:#cffff0; background:#11251f; opacity:0; pointer-events:none; transition:.22s; box-shadow:0 15px 50px #0008; font-size:13px; }.toast.show { opacity:1; transform:translate(-50%,0); }.toast.error { color:#ffd7dc; border-color:rgba(255,104,123,.3); background:#2a141a; }

@media (max-width: 900px) {
  .main-nav { display:none; }.hero { grid-template-columns:1fr; min-height:auto; padding-top:65px; }.hero-visual { max-width:560px; width:100%; margin:auto; }.studio-grid { grid-template-columns:1fr; }.activity { position:static; max-height:none; }.footer { grid-template-columns:1fr; text-align:center; }.footer .brand { justify-content:center; }.footer-contact { justify-items:center; }.pricing-grid { grid-template-columns:1fr; max-width:520px; }.admin-stats { grid-template-columns:repeat(2,1fr); }.banner-editor,.operator-create { grid-template-columns:1fr; }.settings-grid { grid-template-columns:1fr; }.api-usage-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.workflow-app-grid,.image-workspace { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .shell { width:min(100% - 24px,1180px); }.topbar { height:66px; padding-inline:12px; }.brand-copy small { display:none; }.account-area > .ghost-button { display:none; }.support-link { padding:7px 8px; font-size:11px; gap:3px; }.support-link strong { display:none; }.account-area .primary-button { padding:9px 12px; }.hero { gap:30px; padding-top:52px; }.hero h1 { font-size:42px; }.hero-copy > p { font-size:15px; }.hero-visual { height:330px; }.floating-two { left:-5px; }.floating-one { right:-2px; }.banner-card { grid-template-columns:1fr; gap:12px; padding:22px; }.banner-card > a { justify-self:start; }.section { padding-top:72px; }.pricing-grid { gap:14px; }.generation-controls,.image-form-row { grid-template-columns:1fr; }.submit-row { align-items:flex-end; }.generate-button { min-width:145px; }.workflow-grid { grid-template-columns:1fr; }.composer { padding:18px; }.admin-stats { grid-template-columns:1fr 1fr; }.recharge-options { grid-template-columns:repeat(2,1fr); }.settings-save-row { align-items:stretch; flex-direction:column; }.settings-save-row button { width:100%; }.workflow-form-row,.workflow-stage-grid { grid-template-columns:1fr; }.workflow-callout,.image-callout { flex-direction:column; }.workflow-project-form,.workflow-projects,.image-generation-form,.image-task-panel { padding:13px; }.image-reference-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.image-submit-row { align-items:stretch; flex-direction:column; }.image-submit-row .generate-button { width:100%; }
}

.task-item-head span.expired { color:var(--gold); }
.task-expiry { margin-top:8px; color:var(--gold); font-size:10px; }
.api-record-status.expired { color:var(--gold); background:rgba(255,202,112,.1); }

.workflow-image-group-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }
.workflow-image-group-row select,.image-task-toolbar select { min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:#070b12; }
.workflow-image-group-row .primary-button,.workflow-image-group-row .ghost-button { padding:9px 12px; }
.workflow-image-group-guide { padding:9px 10px; border-radius:8px; color:#c7d6e2 !important; background:#ffffff05; }
.image-task-toolbar { display:flex; align-items:center; gap:8px; }
.image-task-toolbar select { font-size:10px; }
.image-task-label { margin-bottom:7px; color:var(--cyan); font-size:11px; font-weight:800; }
.image-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.image-result { aspect-ratio:var(--image-ratio,9/16); border:1px solid var(--line); }
.image-result-preview { width:100%; height:100%; padding:0; border:0; background:#05080d; cursor:zoom-in; }
.image-result img { object-fit:contain; }
.image-preview-modal { width:min(920px,calc(100% - 28px)); text-align:center; }
.image-preview-copy { margin:0 42px 14px; text-align:left; }
.image-preview-copy strong,.image-preview-copy small { display:block; }
.image-preview-copy small { margin-top:5px; color:var(--muted); }
.image-preview-modal > img { display:block; width:auto; max-width:100%; max-height:72vh; margin:0 auto 16px; object-fit:contain; border-radius:12px; background:#05080d; }
.image-preview-modal > a { width:180px; margin:0 auto; }

@media (max-width: 620px) {
  .workflow-image-group-row { grid-template-columns:1fr 1fr; }
  .workflow-image-group-row select { grid-column:1/-1; }
  .image-task-toolbar { align-items:flex-end; flex-direction:column; }
}

@media (max-width: 900px) {
  .admin-user-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-user-360-grid,.admin-user-history-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .admin-user-filter,.admin-user-notes form { grid-template-columns:1fr; }
  .notification-save-row { align-items:stretch; flex-direction:column; }
  .notification-save-row button { width:100%; }
  .contact-capture { align-items:stretch; flex-direction:column; padding:15px; }
  .contact-capture .primary-button { width:100%; }
}

/* Canvas-first creation center: the model rail selects context, while all
   writing and submission controls stay in a single bottom dock. */
.studio-composer { display:flex; min-height:710px; flex-direction:column; }
.studio-canvas { position:relative; display:flex; min-height:475px; flex:1; overflow:hidden; flex-direction:column; background:#0c111a; }
.studio-canvas-copy { position:absolute; top:39px; left:50%; width:min(510px,calc(100% - 52px)); transform:translateX(-50%); color:#8c9aae; text-align:center; }.studio-canvas-copy span { display:block; color:var(--cyan); font-size:10px; letter-spacing:.16em; }.studio-canvas-copy strong { display:block; margin-top:10px; color:#c9d8e6; font-size:15px; }.studio-canvas-copy small { display:block; margin-top:7px; color:#718095; font-size:11px; }
.studio-canvas .studio-selected-plan { position:relative; z-index:1; width:min(560px,calc(100% - 52px)); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; margin:114px auto auto; padding:17px 18px; border:1px solid rgba(64,216,223,.18); border-radius:13px; background:#131c27; }.studio-canvas .studio-selected-plan .step-number { margin-bottom:6px; }.studio-canvas .studio-selected-plan h3 { font-size:16px; }.studio-canvas .studio-selected-plan p { max-width:370px; margin-top:5px; font-size:11px; line-height:1.65; }.studio-canvas .studio-selected-price { min-width:100px; padding:8px 9px; }.studio-canvas .studio-selected-price strong { font-size:21px; }
.studio-canvas .studio-capabilities { grid-column:1 / -1; min-height:auto; padding:1px 0 0; border:0; }.studio-canvas .studio-capabilities span { padding:4px 7px; font-size:9px; }.studio-canvas .studio-capabilities:empty::after { font-size:10px; }
.studio-reference-tray { position:absolute; z-index:4; right:17px; bottom:17px; left:17px; padding:0 0 11px; border:1px solid rgba(64,216,223,.24); border-radius:14px; background:#111b29; box-shadow:0 18px 45px #0008; }.studio-reference-tray.hidden { display:none; }.studio-reference-tray .studio-material-head { margin:0; padding:13px 14px 9px; }.studio-reference-tray .panel-head strong { font-size:12px; }.studio-reference-tray .panel-head small { font-size:9px; }.studio-reference-tray .asset-strip { min-height:94px; margin:0 14px; }.studio-reference-tray .add-asset,.studio-reference-tray .asset-card { width:96px; height:88px; flex-basis:96px; border-radius:10px; }.studio-reference-tray .add-asset > span { font-size:20px; }.studio-reference-tray .add-asset strong { font-size:10px; }.studio-reference-tray .add-asset small { max-width:80px; font-size:8px; }.studio-reference-tray .asset-limit-note { margin:7px 14px 0; padding:7px 9px; font-size:9px; }.studio-reference-tray .asset-limit-note span:last-child { display:none; }
.studio-prompt-dock { position:relative; z-index:6; padding:10px 13px 9px; border-top:1px solid var(--line); background:#111a27; }.studio-dock-editor { display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; align-items:stretch; }.studio-quick-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.studio-quick-slot { display:flex; min-width:0; min-height:66px; align-items:center; justify-content:center; gap:4px; flex-direction:column; border:1px solid #26374b; border-radius:8px; color:#8fa2b7; background:#0b121d; font:inherit; font-size:9px; cursor:pointer; }.studio-quick-slot:hover,.studio-quick-slot:focus-visible { border-color:rgba(64,216,223,.8); color:#dffffc; outline:0; }.studio-quick-slot-add { border-color:rgba(64,216,223,.36); color:#c8f8f6; background:#102433; }.studio-quick-slot b { font-size:16px; font-weight:500; line-height:1; }.studio-quick-slot span { overflow:hidden; max-width:100%; white-space:nowrap; text-overflow:ellipsis; }.studio-quick-slot i { color:var(--cyan); font-style:normal; font-weight:800; }.studio-prompt-dock .prompt-block { min-width:0; padding:0; }.studio-prompt-dock .prompt-editor { height:66px; }.studio-prompt-dock .prompt-block textarea { min-height:66px; height:66px; max-height:66px; padding:12px 78px 12px 13px; border:1px solid #26374b; border-radius:9px; background:#0a1019; font-size:12px; line-height:1.65; resize:none; }.studio-prompt-dock .prompt-block textarea:focus { border-color:rgba(64,216,223,.82); box-shadow:0 0 0 3px rgba(64,216,223,.08); }.studio-prompt-count { position:absolute; right:12px; bottom:10px; color:#71839b; font-size:9px; pointer-events:none; }.studio-dock-toolbar { display:flex; min-width:0; align-items:center; }.studio-prompt-dock .studio-generation-controls { display:grid; grid-template-columns:112px 102px minmax(122px,1fr) auto auto; width:100%; align-items:center; gap:7px; margin:8px 0 0; }.studio-prompt-dock .studio-generation-controls label { display:flex; min-width:0; align-items:center; gap:5px; padding:0 8px; border:1px solid #26374b; border-radius:8px; color:#8fa2b7; background:#0b121d; font-size:9px; }.studio-prompt-dock .studio-generation-controls label > span { flex:0 0 auto; }.studio-prompt-dock .studio-generation-controls select { min-width:0; padding:8px 18px 8px 0; border:0; border-radius:0; color:#dce7f0; background:transparent; font-size:10px; }.studio-prompt-dock .studio-generation-controls select:focus { box-shadow:none; }.studio-dock-cost { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:0 5px; min-width:88px; padding:3px 2px; }.studio-dock-cost small,.studio-dock-cost span { color:var(--muted); font-size:9px; }.studio-dock-cost strong { color:#e7f6f5; font-size:16px; }.studio-dock-cost span { grid-column:1 / -1; }.studio-prompt-dock .generate-button { min-width:136px; min-height:38px; padding:6px 7px 6px 13px; border-radius:9px; }.studio-prompt-dock .generate-button b { width:24px; height:24px; }.studio-prompt-dock .mention-hint { margin-top:5px; color:#71839b; font-size:9px; }.studio-prompt-dock .mention-hint b { display:inline-grid; width:14px; height:14px; place-items:center; border-radius:4px; color:#092127; background:var(--cyan); }

@media (max-width: 900px) { .studio-composer { min-height:610px; }.studio-canvas { min-height:370px; }.studio-canvas-copy { top:26px; }.studio-canvas .studio-selected-plan { width:min(560px,calc(100% - 32px)); margin-top:89px; }.studio-reference-tray { right:11px; bottom:11px; left:11px; }.studio-prompt-dock { padding:11px 13px; }.studio-prompt-dock .studio-generation-controls { grid-template-columns:1fr 1fr minmax(0,1.35fr) auto; }.studio-dock-cost { display:none; }.studio-prompt-dock .generate-button { min-width:120px; } }
@media (max-width: 620px) { .studio-composer { min-height:0; }.studio-canvas { min-height:330px; }.studio-canvas-copy { width:calc(100% - 28px); top:22px; }.studio-canvas-copy small { display:none; }.studio-canvas .studio-selected-plan { width:calc(100% - 24px); grid-template-columns:minmax(0,1fr); margin-top:77px; padding:13px; }.studio-canvas .studio-selected-price { position:absolute; top:11px; right:11px; min-width:72px; }.studio-canvas .studio-selected-plan h3 { padding-right:76px; font-size:14px; }.studio-canvas .studio-selected-plan p { max-width:none; }.studio-reference-tray { max-height:205px; overflow:auto; }.studio-reference-tray .asset-limit-note { display:none; }.studio-prompt-dock .studio-generation-controls { grid-template-columns:1fr 1fr; }.studio-prompt-dock .studio-generation-controls label:nth-of-type(3) { grid-column:1 / -1; }.studio-prompt-dock .generate-button { grid-column:1 / -1; width:100%; }.studio-prompt-dock .mention-hint { display:none; } }

@media (max-width: 900px) { .studio-dock-editor { grid-template-columns:132px minmax(0,1fr); }.studio-quick-slot { min-height:62px; }.studio-prompt-dock .prompt-editor,.studio-prompt-dock .prompt-block textarea { height:62px; min-height:62px; max-height:62px; } }
@media (max-width: 620px) { .studio-dock-editor { grid-template-columns:1fr; gap:7px; }.studio-quick-slots { grid-template-columns:repeat(3,1fr); }.studio-quick-slot { min-height:44px; flex-direction:row; gap:6px; }.studio-quick-slot b { font-size:14px; }.studio-prompt-dock .prompt-editor,.studio-prompt-dock .prompt-block textarea { height:58px; min-height:58px; max-height:58px; }.studio-prompt-dock .studio-generation-controls label { padding:0 7px; }.studio-prompt-dock .studio-generation-controls label:nth-of-type(3) { display:none; } }

/* Workbench composition: follow the familiar left-rail / blank canvas /
   floating bottom console rhythm, while retaining only Zile's real controls. */
#studioGrid.studio-workspace { grid-template-columns:286px minmax(0,1fr); min-height:748px; overflow:visible; border:0; border-radius:0; background:#0d0e10; box-shadow:none; }
#studioGrid .studio-model-rail { padding:10px 9px 14px; border-right:1px solid #24272b; background:#101113; }
#studioGrid .studio-rail-head { align-items:center; padding:4px 8px 9px; } #studioGrid .studio-rail-head strong { font-size:12px; } #studioGrid .studio-rail-head small { display:none; } #studioGrid .studio-rail-head > span { font-size:10px; }
#studioGrid .studio-model-filters { margin:0 3px 10px; padding:3px; border-color:#292d31; border-radius:5px; background:#17191c; } #studioGrid .studio-model-filters button { padding:6px 3px; border-radius:4px; font-size:10px; } #studioGrid .studio-model-filters button.active { color:#e9ffff; background:#174f55; }
#studioGrid .studio-model-list { max-height:650px; gap:2px; padding:0 1px 6px; } #studioGrid .studio-model-button { grid-template-columns:25px minmax(0,1fr) 31px; gap:7px; padding:8px 6px; border-radius:6px; } #studioGrid .studio-model-button:hover { background:#181c20; } #studioGrid .studio-model-button.selected { border-color:#236b72; background:#162b2d; box-shadow:inset 2px 0 0 #58d4d7; } #studioGrid .studio-model-mark { width:25px; height:25px; border-radius:6px; color:#a5fbf0; background:#172a36; font-size:8px; } #studioGrid .studio-model-name { font-size:10px; line-height:1.28; } #studioGrid .studio-model-meta { margin-top:2px; font-size:8px; } #studioGrid .studio-model-state { padding:3px 3px; border-radius:4px; font-size:8px; } #studioGrid .studio-model-footnote { margin:8px 5px 0; font-size:8px; }
#studioGrid .studio-composer { position:relative; min-height:748px; overflow:hidden; background:#0d0e10 !important; } #studioGrid .studio-canvas { min-height:748px; background:#0d0e10; }
#studioGrid .studio-canvas-copy { top:35px; width:430px; } #studioGrid .studio-canvas-copy span { color:#39cbd1; font-size:9px; } #studioGrid .studio-canvas-copy strong { margin-top:8px; color:#c9d1d7; font-size:13px; font-weight:700; } #studioGrid .studio-canvas-copy small { margin-top:5px; color:#70797f; font-size:10px; }
#studioGrid .studio-canvas .studio-selected-plan { width:min(440px,calc(100% - 78px)); gap:8px 13px; margin:112px auto auto; padding:13px 14px; border-color:#283537; border-radius:7px; background:#171b1d; box-shadow:0 9px 24px #0004; } #studioGrid .studio-canvas .studio-selected-plan .step-number { margin-bottom:4px; color:#71dce0; font-size:9px; } #studioGrid .studio-canvas .studio-selected-plan h3 { color:#dce4e8; font-size:13px; } #studioGrid .studio-canvas .studio-selected-plan p { margin-top:4px; color:#a2abb0; font-size:10px; line-height:1.55; } #studioGrid .studio-canvas .studio-selected-price { min-width:84px; padding:7px 8px; border-color:#285057; border-radius:7px; background:#123137; } #studioGrid .studio-canvas .studio-selected-price strong { font-size:18px; } #studioGrid .studio-canvas .studio-capabilities { gap:5px; padding:0; } #studioGrid .studio-canvas .studio-capabilities span { padding:3px 5px; border-radius:4px; color:#a8b1b7; background:#202629; font-size:8px; }
#studioGrid .studio-task-toggle { position:absolute; z-index:9; top:14px; right:15px; padding:6px 10px; border:1px solid #2d3439; border-radius:15px; color:#aeb9c1; background:#15181b; font:inherit; font-size:10px; cursor:pointer; } #studioGrid .studio-task-toggle:hover { border-color:#4ecdd1; color:#dffffe; }
#studioGrid .studio-activity-drawer { position:absolute; z-index:10; top:51px; right:14px; width:286px; max-height:570px; padding:13px; overflow:auto; border:1px solid #30363b !important; border-radius:8px !important; background:#15191c !important; box-shadow:0 17px 40px #000a; } #studioGrid .studio-activity-drawer .panel-head { margin-bottom:11px; } #studioGrid .studio-activity-drawer .empty-state { padding:45px 8px; }
#studioGrid .studio-prompt-dock { position:absolute; z-index:8; right:22px; bottom:18px; left:22px; padding:10px; border:1px solid #2d3134; border-radius:10px; background:#1a1c1e; box-shadow:0 18px 40px #0009; } #studioGrid .studio-dock-editor { grid-template-columns:174px minmax(0,1fr); gap:8px; } #studioGrid .studio-quick-slots { gap:5px; } #studioGrid .studio-quick-slot { min-height:65px; border-color:#34393d; border-radius:5px; color:#88939a; background:#242729; font-size:8px; } #studioGrid .studio-quick-slot-add { border-color:#48545a; color:#c9d2d7; background:#272b2e; } #studioGrid .studio-quick-slot:hover,#studioGrid .studio-quick-slot:focus-visible { border-color:#ff8f5b; color:#fff0e9; } #studioGrid .studio-quick-slot b { color:#d5dde1; font-size:15px; } #studioGrid .studio-quick-slot i { color:#fa8e58; }
#studioGrid .studio-prompt-dock .prompt-editor,#studioGrid .studio-prompt-dock .prompt-block textarea { height:65px; min-height:65px; max-height:65px; } #studioGrid .studio-prompt-dock .prompt-block textarea { border-color:#34393d; border-radius:5px; color:#e1e6e8; background:#222527; font-size:11px; } #studioGrid .studio-prompt-dock .prompt-block textarea:focus { border-color:#ff8b57; box-shadow:0 0 0 3px #ff75421f; } #studioGrid .studio-prompt-count { right:10px; bottom:8px; color:#778088; }
#studioGrid .studio-prompt-dock .studio-generation-controls { grid-template-columns:108px 92px minmax(115px,1fr) auto auto; gap:6px; margin-top:7px; } #studioGrid .studio-prompt-dock .studio-generation-controls label { min-height:32px; border-color:#34393d; border-radius:5px; color:#89939a; background:#222527; } #studioGrid .studio-prompt-dock .studio-generation-controls select { color:#d8dfe2; font-size:9px; } #studioGrid .studio-dock-cost { min-width:78px; } #studioGrid .studio-dock-cost strong { color:#fff1e8; font-size:15px; } #studioGrid .studio-prompt-dock .generate-button { min-width:135px; min-height:35px; border-radius:6px; color:white; background:#f26832; box-shadow:none; } #studioGrid .studio-prompt-dock .generate-button:hover { background:#ff7b47; transform:none; } #studioGrid .studio-prompt-dock .generate-button b { color:#55210f; background:#ffad7d; } #studioGrid .studio-prompt-dock .mention-hint { display:none; }

@media (max-width: 1120px) { #studioGrid.studio-workspace { grid-template-columns:270px minmax(0,1fr); } #studioGrid .studio-prompt-dock { right:15px; left:15px; } }
@media (max-width: 900px) { #studioGrid.studio-workspace { display:block; min-height:0; } #studioGrid .studio-model-rail { border-right:0; border-bottom:1px solid #24272b; } #studioGrid .studio-composer,#studioGrid .studio-canvas { min-height:650px; } #studioGrid .studio-model-list { max-height:none; } #studioGrid .studio-prompt-dock { right:12px; left:12px; } #studioGrid .studio-activity-drawer { top:50px; right:12px; } }
@media (max-width: 620px) { #studioGrid .studio-composer,#studioGrid .studio-canvas { min-height:610px; } #studioGrid .studio-canvas .studio-selected-plan { width:calc(100% - 34px); margin-top:96px; } #studioGrid .studio-prompt-dock { right:8px; bottom:8px; left:8px; } #studioGrid .studio-dock-editor { grid-template-columns:124px minmax(0,1fr); } #studioGrid .studio-quick-slots { gap:3px; } #studioGrid .studio-quick-slot { min-height:57px; padding:3px; flex-direction:column; font-size:7px; } #studioGrid .studio-prompt-dock .prompt-editor,#studioGrid .studio-prompt-dock .prompt-block textarea { height:57px; min-height:57px; max-height:57px; } #studioGrid .studio-prompt-dock .studio-generation-controls { grid-template-columns:1fr 1fr auto; } #studioGrid .studio-prompt-dock .studio-generation-controls label:nth-of-type(3) { display:none; } #studioGrid .studio-prompt-dock .generate-button { grid-column:auto; width:auto; min-width:102px; } #studioGrid .studio-dock-cost { display:none; } }

/* Logged-in creation is a full workspace, not a marketing page with a form
   embedded inside it. */
body.workspace-mode { background:#0d0e10; } body.workspace-mode .topbar,body.workspace-mode .hero,body.workspace-mode .banner-shell,body.workspace-mode #contactCapture,body.workspace-mode #pricing,body.workspace-mode .workflow,body.workspace-mode .footer { display:none !important; } body.workspace-mode .studio-section { width:100%; max-width:none; min-height:100vh; margin:0; padding:0; } body.workspace-mode .studio-section > .section-heading { display:none; }
body.workspace-mode #studioGrid.studio-workspace { width:100%; min-height:100vh; grid-template-columns:274px minmax(0,1fr); grid-template-rows:54px minmax(0,1fr); }
#studioGrid .studio-workbench-toolbar { grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:274px minmax(0,1fr) auto; min-height:54px; align-items:center; border-bottom:1px solid #25282b; background:#111214; }
#studioGrid .studio-workbench-brand { display:flex; align-items:center; gap:8px; padding-left:13px; color:#e6edef; } #studioGrid .studio-workbench-brand .brand-mark { width:30px; height:30px; border-radius:8px; font-size:14px; } #studioGrid .studio-workbench-brand strong,#studioGrid .studio-workbench-brand small { display:block; } #studioGrid .studio-workbench-brand strong { font-size:11px; } #studioGrid .studio-workbench-brand small { margin-top:2px; color:#77828b; font-size:8px; letter-spacing:.06em; }
#studioGrid .studio-workbench-nav { display:flex; align-items:stretch; gap:6px; height:100%; } #studioGrid .studio-workbench-nav a { display:flex; align-items:center; padding:0 13px; border-bottom:2px solid transparent; color:#899298; font-size:10px; text-decoration:none; } #studioGrid .studio-workbench-nav a:hover,#studioGrid .studio-workbench-nav a.active { border-bottom-color:#f17a4a; color:#e7edef; }
#studioGrid .studio-workbench-actions { display:flex; align-items:center; gap:7px; padding-right:13px; } #studioGrid .studio-workbench-actions button { min-height:28px; padding:0 10px; border:1px solid #353a3e; border-radius:14px; color:#bfc8cc; background:#191c1f; font:inherit; font-size:9px; cursor:pointer; } #studioGrid .studio-workbench-actions button:hover { border-color:#f48252; color:#fff0e9; }
#studioGrid .studio-model-rail { grid-column:1; grid-row:2; } #studioGrid .studio-composer { grid-column:2; grid-row:2; min-height:calc(100vh - 54px); } #studioGrid .studio-canvas { min-height:calc(100vh - 54px); }
#studioGrid .studio-canvas-copy { top:28px; } #studioGrid .studio-canvas-copy .studio-canvas-emblem { display:grid; width:62px; height:62px; place-items:center; margin:0 auto 11px; border-radius:20px; color:#071214; background:#60dfe1; box-shadow:0 11px 28px #1c9fa74b; font-size:28px; letter-spacing:0; } #studioGrid .studio-canvas-copy strong { margin-top:0; font-size:12px; font-weight:650; } #studioGrid .studio-canvas-copy small { font-size:9px; }
#studioGrid .studio-canvas .studio-selected-plan { width:min(390px,calc(100% - 50px)); margin-top:151px; padding:12px 13px; } #studioGrid .studio-canvas .studio-selected-plan h3 { font-size:12px; } #studioGrid .studio-canvas .studio-selected-plan p { font-size:9px; } #studioGrid .studio-canvas .studio-selected-price { min-width:76px; } #studioGrid .studio-canvas .studio-selected-price strong { font-size:16px; }
#studioGrid .studio-prompt-dock { right:auto; left:50%; width:min(860px,calc(100% - 42px)); transform:translateX(-50%); bottom:18px; padding:9px; border-color:#34383b; border-radius:8px; background:#1b1d1f; box-shadow:0 22px 44px #000b; } #studioGrid .studio-dock-editor { grid-template-columns:159px minmax(0,1fr); gap:7px; } #studioGrid .studio-quick-slot { min-height:60px; } #studioGrid .studio-quick-slot span { font-size:8px; } #studioGrid .studio-prompt-dock .prompt-editor,#studioGrid .studio-prompt-dock .prompt-block textarea { height:60px; min-height:60px; max-height:60px; } #studioGrid .studio-prompt-dock .prompt-block textarea { padding-top:11px; } #studioGrid .studio-prompt-dock .studio-generation-controls { grid-template-columns:96px 82px minmax(130px,1fr) auto auto; margin-top:6px; } #studioGrid .studio-prompt-dock .studio-generation-controls label > span { display:none; } #studioGrid .studio-prompt-dock .studio-generation-controls select { padding-left:2px; } #studioGrid .studio-dock-cost small { font-size:8px; } #studioGrid .studio-dock-cost span { display:none; }
@media (max-width: 900px) { body.workspace-mode #studioGrid.studio-workspace { display:block; } #studioGrid .studio-workbench-toolbar { display:flex; min-height:50px; justify-content:space-between; } #studioGrid .studio-workbench-nav { display:none; } #studioGrid .studio-model-rail { border-right:0; } #studioGrid .studio-composer,#studioGrid .studio-canvas { min-height:650px; } }
@media (max-width: 620px) { #studioGrid .studio-workbench-brand { padding-left:9px; } #studioGrid .studio-workbench-brand small { display:none; } #studioGrid .studio-workbench-actions { gap:4px; padding-right:8px; } #studioGrid .studio-workbench-actions button { padding:0 8px; } #studioGrid .studio-prompt-dock { width:calc(100% - 16px); bottom:8px; } #studioGrid .studio-dock-editor { grid-template-columns:117px minmax(0,1fr); } #studioGrid .studio-quick-slot { min-height:55px; } #studioGrid .studio-prompt-dock .prompt-editor,#studioGrid .studio-prompt-dock .prompt-block textarea { height:55px; min-height:55px; max-height:55px; } #studioGrid .studio-prompt-dock .studio-generation-controls { grid-template-columns:1fr 1fr auto; } }

/* Bottom console refinement: one integrated material surface, not a row of
   generic form boxes. The only deliberately loud control is Generate. */
#studioGrid .studio-prompt-dock { padding:8px 10px 7px; border-color:rgba(255,255,255,.11); border-radius:14px; background:#1a1b1d; box-shadow:0 24px 52px #000b; }
#studioGrid .studio-dock-editor { grid-template-columns:166px minmax(0,1fr); gap:10px; }
#studioGrid .studio-quick-slots { gap:0; padding:3px; border-radius:10px; background:#242628; }
#studioGrid .studio-quick-slot { position:relative; min-height:58px; border:0; border-radius:7px; color:#939ca2; background:transparent; }
#studioGrid .studio-quick-slot + .studio-quick-slot::before { position:absolute; top:12px; bottom:12px; left:0; width:1px; background:#3b3e42; content:""; }
#studioGrid .studio-quick-slot-add { color:#d5dde1; background:#303235; }
#studioGrid .studio-quick-slot:hover,#studioGrid .studio-quick-slot:focus-visible { border:0; color:#fff4ef; background:#383234; box-shadow:none; }
#studioGrid .studio-quick-slot b { color:#e5ebed; font-size:15px; font-weight:400; }
#studioGrid .studio-quick-slot span { font-size:8px; letter-spacing:.02em; }
#studioGrid .studio-quick-slot i { color:#ff9161; }
#studioGrid .studio-prompt-dock .prompt-editor,#studioGrid .studio-prompt-dock .prompt-block textarea { height:58px; min-height:58px; max-height:58px; }
#studioGrid .studio-prompt-dock .prompt-block textarea { border:0; border-radius:0; color:#e1e6e8; background:transparent; box-shadow:none; }
#studioGrid .studio-prompt-dock .prompt-block textarea:focus { border:0; box-shadow:none; }
#studioGrid .studio-prompt-dock .prompt-block textarea::placeholder { color:#7c858c; }
#studioGrid .studio-prompt-count { right:7px; bottom:7px; }
#studioGrid .studio-prompt-dock .studio-generation-controls { min-height:29px; grid-template-columns:88px 74px minmax(126px,1fr) auto auto; gap:0; margin-top:4px; padding-top:5px; border-top:1px solid rgba(255,255,255,.08); }
#studioGrid .studio-prompt-dock .studio-generation-controls label { min-height:25px; padding:0 8px; border:0 !important; border-radius:0; color:#9ca6ac; background:transparent; }
#studioGrid .studio-prompt-dock .studio-generation-controls label + label { border-left:1px solid rgba(255,255,255,.08) !important; }
#studioGrid .studio-prompt-dock .studio-generation-controls select { padding:4px 17px 4px 0; color:#d8dee1; font-size:9px; }
#studioGrid .studio-dock-cost { min-width:80px; padding:0 10px; border-left:1px solid rgba(255,255,255,.08); }
#studioGrid .studio-dock-cost small { color:#869097; } #studioGrid .studio-dock-cost strong { color:#fff0e8; font-size:15px; }
#studioGrid .studio-prompt-dock .generate-button { min-width:130px; min-height:34px; margin-left:4px; border-radius:10px; background:#f26a35; box-shadow:0 7px 17px #e25a2c38; }
#studioGrid .studio-prompt-dock .generate-button:hover { background:#fb7945; }
#studioGrid .studio-prompt-dock .generate-button b { border-radius:50%; color:#743017; background:#ffb18f; }
@media (max-width:620px) { #studioGrid .studio-prompt-dock { border-radius:11px; } #studioGrid .studio-dock-editor { grid-template-columns:128px minmax(0,1fr); gap:6px; } #studioGrid .studio-quick-slot { min-height:54px; } #studioGrid .studio-prompt-dock .prompt-editor,#studioGrid .studio-prompt-dock .prompt-block textarea { height:54px; min-height:54px; max-height:54px; } #studioGrid .studio-prompt-dock .studio-generation-controls { grid-template-columns:1fr 1fr auto; } }

/* Reference geometry: the centre is a true canvas; its model note and the
   bottom console align to the canvas edges instead of floating at page centre. */
body.workspace-mode #studioGrid.studio-workspace { grid-template-columns:330px minmax(0,1fr); }
#studioGrid .studio-workbench-toolbar { grid-template-columns:330px minmax(0,1fr) auto; }
#studioGrid .studio-model-rail { width:auto; }
#studioGrid .studio-canvas-copy { top:30px; left:64px; width:390px; transform:none; text-align:center; }
#studioGrid .studio-canvas-copy .studio-canvas-emblem { width:66px; height:66px; margin:0 auto; border-radius:21px; }
#studioGrid .studio-canvas .studio-selected-plan { width:min(430px,calc(100% - 84px)); margin:135px 0 0 42px; }
#studioGrid .studio-prompt-dock { right:22px; left:22px; width:auto; transform:none; }
@media (max-width:1120px) { body.workspace-mode #studioGrid.studio-workspace { grid-template-columns:286px minmax(0,1fr); } #studioGrid .studio-workbench-toolbar { grid-template-columns:286px minmax(0,1fr) auto; } }
@media (max-width:900px) { #studioGrid .studio-canvas-copy { left:50%; width:390px; transform:translateX(-50%); } #studioGrid .studio-canvas .studio-selected-plan { margin:135px auto auto; } }

/* The floating console follows the supplied reference: asset flow on the
   left, one unbroken writing surface on the right, and a thin command strip. */
#studioGrid .studio-prompt-dock { min-height:111px; padding:9px 10px 8px; border-radius:18px; background:#1b1c1f; }
#studioGrid .studio-dock-core { display:grid; grid-template-columns:174px minmax(0,1fr); gap:12px; align-items:stretch; }
#studioGrid .studio-material-flow { display:flex; align-items:center; justify-content:space-between; min-width:0; }
#studioGrid .studio-flow-slot { display:flex; width:43px; height:54px; align-items:center; justify-content:center; gap:3px; flex:0 0 43px; flex-direction:column; border:0; border-radius:8px; color:#9fa7ad; background:#282a2d; font:inherit; cursor:pointer; }
#studioGrid .studio-flow-slot:first-child { color:#d6dde0; background:#303235; }
#studioGrid .studio-flow-slot:hover,#studioGrid .studio-flow-slot:focus-visible { color:#fff4ef; background:#3d3432; outline:0; }
#studioGrid .studio-flow-slot b { color:#e0e5e6; font-size:16px; font-weight:400; line-height:1; }
#studioGrid .studio-flow-slot span { max-width:39px; overflow:hidden; font-size:8px; line-height:1.1; white-space:nowrap; text-overflow:ellipsis; }
#studioGrid .studio-flow-slot em { color:#ff925e; font-style:normal; font-weight:800; }
#studioGrid .studio-flow-arrow { color:#697176; font-size:16px; font-style:normal; opacity:.82; }
#studioGrid .studio-dock-core .prompt-block { min-width:0; }
#studioGrid .studio-dock-core .prompt-editor,#studioGrid .studio-dock-core textarea { height:54px; min-height:54px; max-height:54px; }
#studioGrid .studio-dock-core textarea { padding:8px 58px 8px 2px; border:0; border-radius:0; color:#e7eaeb; background:transparent; font-size:10px; line-height:1.65; }
#studioGrid .studio-dock-core textarea:focus { border:0; box-shadow:none; }
#studioGrid .studio-dock-core .studio-prompt-count { right:0; bottom:6px; font-size:8px; }
#studioGrid .studio-dock-foot { display:flex; min-height:34px; align-items:center; gap:8px; margin-top:3px; padding-top:4px; border-top:1px solid rgba(255,255,255,.065); }
#studioGrid .studio-workflow-label { display:none; }
#studioGrid .studio-dock-foot .studio-generation-controls { display:flex; min-width:0; flex:1; align-items:center; gap:0; margin:0; padding:0; border:0; }
#studioGrid .studio-dock-foot .studio-generation-controls label { display:flex; min-width:0; height:26px; align-items:center; padding:0 7px; border:0 !important; border-radius:0; color:#aab2b6; background:transparent; }
#studioGrid .studio-dock-foot .studio-generation-controls label + label { border-left:1px solid rgba(255,255,255,.075) !important; }
#studioGrid .studio-dock-foot .studio-generation-controls label > span { display:none; }
#studioGrid .studio-dock-foot .studio-generation-controls select { min-width:0; padding:4px 17px 4px 0; color:#cfd6d9; background:transparent; font-size:9px; }
#studioGrid .studio-dock-foot .studio-dock-cost { min-width:78px; height:25px; padding:0 8px; border-left:1px solid rgba(255,255,255,.075); }
#studioGrid .studio-dock-foot .studio-dock-cost small { font-size:8px; } #studioGrid .studio-dock-foot .studio-dock-cost strong { font-size:14px; } #studioGrid .studio-dock-foot .studio-dock-cost span { display:none; }
#studioGrid .studio-dock-foot .generate-button { min-width:184px; min-height:31px; margin:0; border-radius:15px; padding:5px 7px 5px 14px; color:#fff8f3; background:#f36c36; box-shadow:0 8px 17px #e2592d33; font-size:10px; }
#studioGrid .studio-dock-foot .generate-button:hover { background:#fa7a45; } #studioGrid .studio-dock-foot .generate-button b { width:22px; height:22px; border-radius:50%; color:#743017; background:#ffb18f; }
#studioGrid .studio-prompt-dock .mention-hint { display:none; }
@media (max-width:760px) { #studioGrid .studio-dock-core { grid-template-columns:154px minmax(0,1fr); gap:8px; } #studioGrid .studio-flow-slot { width:39px; flex-basis:39px; } #studioGrid .studio-dock-foot .generate-button { min-width:126px; } #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(3) { display:none; } }
@media (max-width:560px) { #studioGrid .studio-prompt-dock { min-height:104px; padding:7px 8px; border-radius:14px; } #studioGrid .studio-dock-core { grid-template-columns:134px minmax(0,1fr); gap:6px; } #studioGrid .studio-flow-slot { width:35px; height:49px; flex-basis:35px; } #studioGrid .studio-flow-slot span { display:none; } #studioGrid .studio-flow-arrow { font-size:13px; } #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(2) { display:none; } #studioGrid .studio-dock-foot .studio-dock-cost { display:none; } #studioGrid .studio-dock-foot .generate-button { min-width:112px; } }

/* Keep the reference console's generous vertical proportion on wide screens;
   it is a writing surface, not a thin desktop toolbar. */
#studioGrid .studio-prompt-dock { min-height:230px; padding:16px 18px 14px; border-radius:22px; }
#studioGrid .studio-dock-core { grid-template-columns:218px minmax(0,1fr); gap:18px; }
#studioGrid .studio-flow-slot { width:61px; height:120px; flex-basis:61px; border-radius:11px; }
#studioGrid .studio-flow-slot b { font-size:20px; } #studioGrid .studio-flow-slot span { max-width:52px; font-size:9px; }
#studioGrid .studio-flow-arrow { font-size:20px; }
#studioGrid .studio-dock-core .prompt-editor,#studioGrid .studio-dock-core textarea { height:120px; min-height:120px; max-height:120px; }
#studioGrid .studio-dock-core textarea { padding:15px 70px 14px 4px; font-size:12px; line-height:1.78; }
#studioGrid .studio-dock-core .studio-prompt-count { bottom:13px; font-size:9px; }
#studioGrid .studio-dock-foot { min-height:59px; gap:14px; margin-top:11px; padding-top:11px; }
#studioGrid .studio-dock-foot .studio-generation-controls label { height:38px; padding:0 11px; }
#studioGrid .studio-dock-foot .studio-generation-controls select { font-size:10px; }
#studioGrid .studio-dock-foot .studio-dock-cost { min-width:108px; height:38px; padding:0 12px; }
#studioGrid .studio-dock-foot .studio-dock-cost strong { font-size:18px; }
#studioGrid .studio-dock-foot .generate-button { min-width:282px; min-height:54px; padding:8px 10px 8px 21px; border-radius:24px; font-size:13px; }
#studioGrid .studio-dock-foot .generate-button b { width:33px; height:33px; }
@media (max-width:900px) { #studioGrid .studio-prompt-dock { min-height:188px; } #studioGrid .studio-dock-core { grid-template-columns:184px minmax(0,1fr); } #studioGrid .studio-flow-slot { width:51px; height:92px; flex-basis:51px; } #studioGrid .studio-dock-core .prompt-editor,#studioGrid .studio-dock-core textarea { height:92px; min-height:92px; max-height:92px; } #studioGrid .studio-dock-foot { min-height:46px; margin-top:8px; padding-top:8px; } #studioGrid .studio-dock-foot .generate-button { min-width:210px; min-height:42px; } }
@media (max-width:620px) { #studioGrid .studio-prompt-dock { min-height:123px; padding:9px; border-radius:16px; } #studioGrid .studio-dock-core { grid-template-columns:140px minmax(0,1fr); gap:8px; } #studioGrid .studio-flow-slot { width:38px; height:62px; flex-basis:38px; } #studioGrid .studio-flow-slot b { font-size:16px; } #studioGrid .studio-flow-slot span { display:none; } #studioGrid .studio-flow-arrow { font-size:14px; } #studioGrid .studio-dock-core .prompt-editor,#studioGrid .studio-dock-core textarea { height:62px; min-height:62px; max-height:62px; } #studioGrid .studio-dock-core textarea { padding:8px 50px 8px 2px; font-size:10px; } #studioGrid .studio-dock-foot { min-height:33px; margin-top:5px; padding-top:5px; } #studioGrid .studio-dock-foot .studio-generation-controls label { height:25px; padding:0 7px; } #studioGrid .studio-dock-foot .generate-button { min-width:130px; min-height:33px; padding:5px 6px 5px 12px; font-size:10px; } #studioGrid .studio-dock-foot .generate-button b { width:22px; height:22px; } }

/* Premium-console pass: preserve the familiar spatial grammar in the reference
   instead of stretching a desktop form across the full canvas. */
#studioGrid .studio-prompt-dock { right:auto; left:50%; width:min(960px,calc(100% - 72px)); min-height:248px; padding:18px 20px 15px; transform:translateX(-50%); border-color:rgba(255,255,255,.13); border-radius:24px; background:#1a1b1e; box-shadow:0 30px 65px #000c, inset 0 1px 0 rgba(255,255,255,.025); }
#studioGrid .studio-dock-core { grid-template-columns:220px minmax(0,1fr); gap:21px; }
#studioGrid .studio-material-flow { justify-content:flex-start; gap:8px; }
#studioGrid .studio-flow-slot { width:64px; height:122px; flex-basis:64px; gap:6px; border:1px solid rgba(255,255,255,.025); border-radius:12px; color:#a7afb5; background:#2b2d31; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
#studioGrid .studio-flow-slot:first-child { color:#eef1f2; background:#33353a; }
#studioGrid .studio-flow-slot b { font-size:23px; font-weight:300; }
#studioGrid .studio-flow-slot span { max-width:55px; font-size:9px; letter-spacing:.04em; }
#studioGrid .studio-flow-arrow { flex:0 0 6px; color:#777f84; font-size:18px; }
#studioGrid .studio-dock-core .prompt-editor,#studioGrid .studio-dock-core textarea { height:122px; min-height:122px; max-height:122px; }
#studioGrid .studio-dock-core textarea { padding:13px 72px 12px 3px; color:#e6e9ea; font-size:12px; line-height:1.85; letter-spacing:.01em; }
#studioGrid .studio-dock-core textarea::placeholder { color:#9aa2a7; opacity:.88; white-space:pre-line; }
#studioGrid .studio-dock-core .studio-prompt-count { right:1px; bottom:10px; color:#7d878d; }
#studioGrid .studio-dock-foot { min-height:67px; gap:16px; margin-top:13px; padding-top:13px; border-top-color:rgba(255,255,255,.08); }
#studioGrid .studio-dock-foot .studio-generation-controls { align-self:flex-end; }
#studioGrid .studio-dock-foot .studio-generation-controls label { height:39px; padding:0 12px; color:#aeb6ba; }
#studioGrid .studio-dock-foot .studio-generation-controls select { font-size:10px; }
#studioGrid .studio-dock-foot .studio-dock-cost { min-width:110px; height:39px; padding:0 13px; }
#studioGrid .studio-dock-foot .studio-dock-cost strong { font-size:19px; }
#studioGrid .studio-dock-foot .generate-button { min-width:296px; min-height:53px; padding:8px 10px 8px 21px; border-radius:26px; font-size:13px; box-shadow:0 10px 24px #d7542736; }
#studioGrid .studio-dock-foot .generate-button b { width:33px; height:33px; }
@media (max-width:1050px) { #studioGrid .studio-prompt-dock { width:calc(100% - 42px); } #studioGrid .studio-dock-core { grid-template-columns:196px minmax(0,1fr); gap:15px; } #studioGrid .studio-flow-slot { width:56px; height:104px; flex-basis:56px; } #studioGrid .studio-dock-core .prompt-editor,#studioGrid .studio-dock-core textarea { height:104px; min-height:104px; max-height:104px; } #studioGrid .studio-dock-foot .generate-button { min-width:230px; } }
@media (max-width:620px) { #studioGrid .studio-prompt-dock { left:8px; width:calc(100% - 16px); min-height:123px; padding:9px; transform:none; } #studioGrid .studio-dock-core { grid-template-columns:140px minmax(0,1fr); gap:8px; } #studioGrid .studio-material-flow { gap:3px; } #studioGrid .studio-flow-slot { width:38px; height:62px; flex-basis:38px; } #studioGrid .studio-dock-core .prompt-editor,#studioGrid .studio-dock-core textarea { height:62px; min-height:62px; max-height:62px; } #studioGrid .studio-dock-foot { min-height:33px; margin-top:5px; padding-top:5px; } #studioGrid .studio-dock-foot .generate-button { min-width:130px; min-height:33px; } }

/* The supplied reference is a narrow browser viewport, but it still retains a
   permanent model rail. Keep that workflow intact rather than converting it
   into a generic stacked mobile form. */
@media (max-width:900px) {
  body.workspace-mode #studioGrid.studio-workspace { display:grid; grid-template-columns:170px minmax(0,1fr); grid-template-rows:52px minmax(0,1fr); min-height:100dvh; }
  #studioGrid .studio-workbench-toolbar { grid-template-columns:170px minmax(0,1fr) auto; }
  #studioGrid .studio-model-rail { display:grid; grid-column:1; grid-row:2; grid-template-rows:auto auto minmax(0,1fr) auto; min-height:calc(100dvh - 52px); padding:9px 7px 10px; border-right:1px solid #24272b; border-bottom:0; }
  #studioGrid .studio-composer,#studioGrid .studio-canvas { grid-column:2; grid-row:2; min-height:calc(100dvh - 52px); }
  #studioGrid .studio-model-list { min-height:0; max-height:none; overflow-y:auto; }
  #studioGrid .studio-model-footnote { display:block; }
  #studioGrid .studio-prompt-dock { right:auto; left:50%; width:calc(100% - 34px); transform:translateX(-50%); }
}
@media (max-width:620px) {
  body.workspace-mode .studio-section { height:100dvh; min-height:0; overflow:hidden; }
  body.workspace-mode #studioGrid.studio-workspace { height:100dvh; min-height:0; overflow:hidden; grid-template-columns:146px minmax(0,1fr); grid-template-rows:50px minmax(0,1fr); }
  #studioGrid .studio-workbench-toolbar { grid-template-columns:146px minmax(0,1fr) auto; min-height:50px; }
  #studioGrid .studio-workbench-brand { gap:6px; }
  #studioGrid .studio-workbench-brand .brand-mark { width:25px; height:25px; border-radius:8px; font-size:13px; }
  #studioGrid .studio-workbench-brand strong { font-size:10px; }
  #studioGrid .studio-workbench-actions button { min-height:26px; padding:0 6px; font-size:8px; }
  #studioGrid .studio-model-rail { height:calc(100dvh - 50px); min-height:0; padding:8px 5px 9px; }
  #studioGrid .studio-rail-head { padding:3px 4px 7px; }
  #studioGrid .studio-rail-head strong { font-size:10px; }
  #studioGrid .studio-rail-head > span { font-size:8px; }
  #studioGrid .studio-model-filters { gap:2px; margin:0 1px 6px; padding:2px; }
  #studioGrid .studio-model-filters button { padding:5px 1px; font-size:8px; }
  #studioGrid .studio-model-list { flex-direction:column; gap:1px; padding:0 0 4px; overflow-x:hidden; overflow-y:auto; }
  #studioGrid .studio-model-button { flex:0 0 auto; grid-template-columns:20px minmax(0,1fr) 23px; gap:4px; padding:6px 3px; border-radius:5px; }
  #studioGrid .studio-model-mark { width:20px; height:20px; border-radius:5px; font-size:7px; }
  #studioGrid .studio-model-name { font-size:8px; line-height:1.18; }
  #studioGrid .studio-model-meta { margin-top:1px; font-size:7px; }
  #studioGrid .studio-model-state { padding:2px; border-radius:3px; font-size:7px; }
  #studioGrid .studio-model-footnote { margin:5px 2px 0; font-size:7px; line-height:1.4; }
  #studioGrid .studio-composer,#studioGrid .studio-canvas { height:calc(100dvh - 50px); min-height:0; }
  #studioGrid .studio-canvas-copy { top:37px; width:calc(100% - 20px); }
  #studioGrid .studio-canvas-copy .studio-canvas-emblem { width:72px; height:72px; margin:0 auto; border-radius:23px; font-size:30px; }
  #studioGrid .studio-canvas .studio-selected-plan { width:calc(100% - 84px); margin:136px 0 0 45px; padding:9px 10px; }
  #studioGrid .studio-canvas .studio-selected-plan h3 { padding-right:62px; font-size:9px; }
  #studioGrid .studio-canvas .studio-selected-plan p { font-size:7px; line-height:1.5; }
  #studioGrid .studio-selected-price { position:absolute; top:9px; right:9px; min-width:56px; padding:5px; }
  #studioGrid .studio-selected-price strong { font-size:13px; }
  #studioGrid .studio-selected-price small { font-size:7px; }
  #studioGrid .studio-capabilities { gap:3px; }
  #studioGrid .studio-capabilities span { padding:2px 3px; font-size:6px; }
  #studioGrid .studio-prompt-dock { right:auto; bottom:10px; left:32px; width:calc(100% - 50px); min-height:112px; padding:8px 9px 7px; transform:none; border-radius:16px; }
  #studioGrid .studio-dock-core { grid-template-columns:112px minmax(0,1fr); gap:7px; }
  #studioGrid .studio-material-flow { gap:2px; }
  #studioGrid .studio-flow-slot { width:32px; height:57px; flex-basis:32px; gap:2px; border-radius:7px; }
  #studioGrid .studio-flow-slot b { font-size:15px; }
  #studioGrid .studio-flow-slot span { max-width:30px; font-size:6px; }
  #studioGrid .studio-flow-arrow { flex-basis:3px; font-size:10px; }
  #studioGrid .studio-dock-core .prompt-editor,#studioGrid .studio-dock-core textarea { height:57px; min-height:57px; max-height:57px; }
  #studioGrid .studio-dock-core textarea { padding:4px 35px 4px 1px; font-size:7px; line-height:1.5; }
  #studioGrid .studio-dock-core .studio-prompt-count { right:0; bottom:2px; font-size:6px; }
  #studioGrid .studio-dock-foot { min-height:29px; gap:5px; margin-top:4px; padding-top:4px; }
  #studioGrid .studio-dock-foot .studio-generation-controls label { height:23px; padding:0 4px; }
  #studioGrid .studio-dock-foot .studio-generation-controls select { padding:2px 8px 2px 0; font-size:7px; }
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(3),#studioGrid .studio-dock-foot .studio-dock-cost { display:none; }
  #studioGrid .studio-dock-foot .generate-button { min-width:98px; min-height:28px; padding:4px 5px 4px 9px; border-radius:14px; font-size:8px; }
  #studioGrid .studio-dock-foot .generate-button b { width:19px; height:19px; }
}

/* Never hide an editable generation option to preserve a visual reference.
   The selected model stays in the real left rail; every generation parameter
   remains visible in the mobile command strip. */
@media (max-width:620px) {
  #studioGrid .studio-dock-foot .studio-generation-controls { display:grid; grid-template-columns:58px 52px minmax(72px,1fr) 56px; min-width:0; flex:1; align-items:center; gap:0; overflow:hidden; }
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(2),
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(3),
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(4) { display:flex !important; min-width:0; padding:0 3px; }
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(3) { border-left:1px solid rgba(255,255,255,.075) !important; }
  #studioGrid .studio-dock-foot .studio-generation-controls label > span { display:inline; flex:0 0 auto; margin-right:1px; color:#89939a; font-size:6px; }
  #studioGrid .studio-dock-foot .studio-generation-controls select { min-width:0; max-width:100%; padding:2px 8px 2px 0; overflow:hidden; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
  #studioGrid .studio-dock-foot .studio-dock-cost { display:grid !important; min-width:0; height:23px; padding:0 3px; border-left:1px solid rgba(255,255,255,.075); }
  #studioGrid .studio-dock-foot .studio-dock-cost small,#studioGrid .studio-dock-foot .studio-dock-cost span { display:none; }
  #studioGrid .studio-dock-foot .studio-dock-cost strong { font-size:8px; }
}

/* Narrow workbench: parameters need a real two-line command strip, not a
   single compressed row that visually drops editable values. */
@media (max-width:620px) {
  #studioGrid .studio-prompt-dock { min-height:132px; }
  #studioGrid .studio-dock-foot { display:grid; grid-template-columns:minmax(0,1fr) 100px; min-height:49px; gap:6px; margin-top:5px; padding-top:5px; align-items:stretch; }
  #studioGrid .studio-dock-foot .studio-generation-controls { display:grid; grid-template-columns:58px 54px minmax(0,1fr); grid-template-rows:23px 20px; min-width:0; height:48px; align-items:center; overflow:hidden; }
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(2) { grid-column:1; grid-row:1; }
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(3) { grid-column:2; grid-row:1; }
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(4) { grid-column:3; grid-row:1; }
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(2),
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(3),
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(4) { display:flex !important; min-width:0; height:23px; padding:0 3px; overflow:hidden; white-space:nowrap; }
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(3),
  #studioGrid .studio-dock-foot .studio-generation-controls label:nth-of-type(4) { border-left:1px solid rgba(255,255,255,.075) !important; }
  #studioGrid .studio-dock-foot .studio-generation-controls label > span { display:inline; flex:0 0 auto; margin-right:1px; font-size:6px; }
  #studioGrid .studio-dock-foot .studio-generation-controls select { min-width:0; width:100%; padding:1px 7px 1px 0; font-size:7px; text-overflow:ellipsis; }
  #studioGrid .studio-dock-foot .studio-dock-cost { display:flex !important; grid-column:1 / -1; grid-row:2; width:100%; min-width:0; height:20px; align-items:center; gap:3px; padding:0 3px; border-top:1px solid rgba(255,255,255,.065); border-left:0; }
  #studioGrid .studio-dock-foot .studio-dock-cost small { display:block; color:#7e888f; font-size:6px; }
  #studioGrid .studio-dock-foot .studio-dock-cost span { display:none; }
  #studioGrid .studio-dock-foot .studio-dock-cost strong { font-size:9px; }
  #studioGrid .studio-dock-foot .generate-button { grid-column:2; grid-row:1; width:100%; min-width:0; min-height:48px; height:48px; padding:5px 6px 5px 10px; border-radius:18px; font-size:9px; }
  #studioGrid .studio-dock-foot .generate-button b { width:22px; height:22px; }
}

/* Material inputs are real, separately validated upload paths.  Keep their
   affordances honest: unsupported reference types cannot be clicked. */
#studioGrid .studio-flow-slot.unsupported,
#studioGrid .studio-flow-slot:disabled { color:#687177; background:#242629; box-shadow:none; cursor:not-allowed; opacity:.58; }
#studioGrid .studio-material-flow > input[type="file"] { display:none !important; }
#studioGrid .studio-flow-slot em { display:block; margin-top:2px; color:#f0a677; font-size:8px; font-style:normal; line-height:1; }
#studioGrid .studio-resolution-control { display:flex; min-width:76px; height:39px; align-items:center; gap:5px; padding:0 12px; color:#aeb6ba; border-left:1px solid rgba(255,255,255,.075); }
#studioGrid .studio-resolution-control > span { color:#8c969c; font-size:9px; }
#studioGrid .studio-resolution-control strong { color:#e3e8ea; font-size:10px; font-weight:700; white-space:nowrap; }
#studioGrid .media-asset-card { display:flex; align-items:center; justify-content:center; background:#11161d; }
#studioGrid .media-asset-card video { width:100%; height:100%; object-fit:cover; background:#080b0f; }
#studioGrid .media-asset-card audio { width:82%; max-width:82%; height:28px; }

/* Browser "desktop site" mode on a phone retains the desktop UA but can give
   the central composer less than 430 CSS pixels.  Query the real composer
   width, rather than device type, so no command control can leave the screen. */
#studioGrid .studio-composer { container-type:inline-size; }
@container (max-width:700px) {
  #studioGrid .studio-dock-foot { display:grid; grid-template-columns:minmax(0,1fr) 168px; grid-template-rows:44px 28px; min-height:77px; height:77px; gap:5px 9px; margin-top:8px; padding-top:8px; align-items:stretch; }
  #studioGrid .studio-dock-foot .studio-generation-controls { display:grid; grid-column:1; grid-row:1; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:44px; min-width:0; height:44px; overflow:hidden; }
  #studioGrid .studio-dock-foot .studio-generation-controls .studio-ratio-control { grid-column:1; grid-row:1; }
  #studioGrid .studio-dock-foot .studio-generation-controls .studio-duration-control { grid-column:2; grid-row:1; }
  #studioGrid .studio-dock-foot .studio-generation-controls .studio-resolution-control { display:flex; grid-column:3; grid-row:1; min-width:0; height:44px; padding:0 5px; border-left:1px solid rgba(255,255,255,.075); }
  #studioGrid .studio-dock-foot .studio-generation-controls label.studio-project-control:nth-of-type(4) { display:flex !important; grid-column:4 !important; grid-row:1; min-width:0; height:44px; padding:0 5px; border-left:1px solid rgba(255,255,255,.075); }
  #studioGrid .studio-dock-foot .studio-generation-controls label.studio-ratio-control,
  #studioGrid .studio-dock-foot .studio-generation-controls label.studio-duration-control { display:flex !important; min-width:0; height:44px; padding:0 5px; overflow:hidden; }
  #studioGrid .studio-dock-foot .studio-generation-controls label > span { display:none; }
  #studioGrid .studio-dock-foot .studio-generation-controls select { min-width:0; width:100%; padding:2px 10px 2px 0; font-size:8px; text-overflow:ellipsis; }
  #studioGrid .studio-resolution-control > span { display:none; }
  #studioGrid .studio-resolution-control strong { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
  #studioGrid .studio-dock-foot > .studio-dock-cost { display:flex !important; grid-column:1; grid-row:2; width:100%; min-width:0; height:28px; padding:0 5px; border-top:1px solid rgba(255,255,255,.065); border-left:0; align-items:center; gap:4px; }
  #studioGrid .studio-dock-foot .studio-dock-cost small { display:block; color:#7e888f; font-size:7px; }
  #studioGrid .studio-dock-foot .studio-dock-cost strong { font-size:10px; }
  #studioGrid .studio-dock-foot .studio-dock-cost span { display:none; }
  #studioGrid .studio-dock-foot .generate-button { grid-column:2; grid-row:1 / span 2; width:100%; min-width:0; min-height:77px; height:77px; padding:6px 7px 6px 12px; border-radius:20px; font-size:10px; }
  #studioGrid .studio-dock-foot .generate-button b { width:24px; height:24px; }
}
@container (max-width:430px) {
  #studioGrid .studio-prompt-dock { left:8px; right:auto; bottom:8px; width:calc(100% - 16px); min-height:162px; padding:8px; transform:none; border-radius:14px; }
  #studioGrid .studio-dock-core { grid-template-columns:minmax(0,1fr); gap:6px; }
  #studioGrid .studio-material-flow { display:flex; gap:4px; min-width:0; }
  #studioGrid .studio-flow-slot { width:auto; min-width:0; height:32px; flex:1 1 0; flex-basis:0; flex-direction:row; justify-content:center; gap:3px; border-radius:8px; }
  #studioGrid .studio-flow-slot b { font-size:14px; }
  #studioGrid .studio-flow-slot span { display:block; overflow:hidden; max-width:calc(100% - 16px); font-size:7px; white-space:nowrap; text-overflow:ellipsis; }
  #studioGrid .studio-flow-slot em { display:inline; margin:0; font-size:7px; }
  #studioGrid .studio-flow-arrow { display:none; }
  #studioGrid .studio-dock-core .prompt-editor,
  #studioGrid .studio-dock-core textarea { width:100%; height:42px; min-height:42px; max-height:42px; }
  #studioGrid .studio-dock-core textarea { padding:5px 43px 5px 1px; font-size:8px; line-height:1.5; }
  #studioGrid .studio-dock-core .studio-prompt-count { right:0; bottom:4px; font-size:6px; }
  #studioGrid .studio-dock-foot { display:grid; grid-template-columns:minmax(0,1fr) 87px; grid-template-rows:38px 24px; min-height:67px; height:67px; gap:5px 6px; margin-top:5px; padding-top:5px; align-items:stretch; }
  #studioGrid .studio-dock-foot .studio-generation-controls { display:grid; grid-column:1 / -1; grid-row:1; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:38px; min-width:0; height:38px; align-items:center; overflow:hidden; }
  #studioGrid .studio-dock-foot .studio-generation-controls .studio-ratio-control { grid-column:1; grid-row:1; }
  #studioGrid .studio-dock-foot .studio-generation-controls .studio-duration-control { grid-column:2; grid-row:1; }
  #studioGrid .studio-dock-foot .studio-generation-controls .studio-resolution-control { display:flex; grid-column:3; grid-row:1; min-width:0; height:38px; padding:0 3px; border-left:1px solid rgba(255,255,255,.075); overflow:hidden; }
  #studioGrid .studio-dock-foot .studio-generation-controls label.studio-project-control:nth-of-type(4) { display:flex !important; grid-column:4 !important; grid-row:1; min-width:0; height:38px; padding:0 3px; border-left:1px solid rgba(255,255,255,.075); }
  #studioGrid .studio-dock-foot .studio-generation-controls label.studio-ratio-control,
  #studioGrid .studio-dock-foot .studio-generation-controls label.studio-duration-control { display:flex !important; min-width:0; height:38px; padding:0 3px; overflow:hidden; }
  #studioGrid .studio-dock-foot .studio-generation-controls label > span { display:none; }
  #studioGrid .studio-dock-foot .studio-generation-controls select { min-width:0; width:100%; padding:1px 7px 1px 0; font-size:7px; text-overflow:ellipsis; }
  #studioGrid .studio-resolution-control > span { display:none; }
  #studioGrid .studio-resolution-control strong { font-size:7px; }
  #studioGrid .studio-dock-foot > .studio-dock-cost { display:flex !important; grid-column:1; grid-row:2; width:100%; min-width:0; height:24px; padding:0 3px; border-top:1px solid rgba(255,255,255,.065); border-left:0; align-items:center; gap:3px; }
  #studioGrid .studio-dock-foot .studio-dock-cost small { display:block; color:#7e888f; font-size:6px; }
  #studioGrid .studio-dock-foot .studio-dock-cost strong { font-size:8px; }
  #studioGrid .studio-dock-foot .studio-dock-cost span { display:none; }
  #studioGrid .studio-dock-foot .generate-button { grid-column:2; grid-row:2; width:100%; min-width:0; min-height:24px; height:24px; padding:3px 4px 3px 7px; border-radius:12px; font-size:7px; }
  #studioGrid .studio-dock-foot .generate-button b { width:19px; height:19px; }
}

/* Creation workbench: keep the familiar model rail, but turn the centre into
   the real conversation/task history and reserve the right rail for notices. */
body.workspace-mode #studioGrid.studio-workspace { grid-template-columns:minmax(244px,17vw) minmax(520px,1fr) minmax(268px,19vw); }
#studioGrid .studio-workbench-toolbar { grid-template-columns:minmax(244px,17vw) minmax(0,1fr) auto; }
#studioGrid .studio-workbench-nav { gap:1px; }
#studioGrid .studio-workbench-nav button { display:flex; align-items:center; padding:0 12px; border:0; border-bottom:2px solid transparent; color:#899298; background:transparent; font:inherit; font-size:10px; cursor:pointer; }
#studioGrid .studio-workbench-nav button:hover,#studioGrid .studio-workbench-nav button.active { border-bottom-color:#f17a4a; color:#f6fbfc; }
#studioGrid .studio-composer { grid-column:2; grid-row:2; }
#studioGrid .studio-announcement-rail { grid-column:3; grid-row:2; display:flex; min-width:0; min-height:calc(100vh - 54px); flex-direction:column; border-left:1px solid #25282b; background:#101113; }
#studioGrid .studio-announcement-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:16px 14px 13px; border-bottom:1px solid #25282b; }
#studioGrid .studio-announcement-head span,#studioGrid .studio-announcement-head strong,#studioGrid .studio-announcement-head small { display:block; }
#studioGrid .studio-announcement-head span { color:#f38a5f; font-size:9px; letter-spacing:.1em; }
#studioGrid .studio-announcement-head strong { margin-top:5px; color:#eef2f3; font-size:13px; }
#studioGrid .studio-announcement-head small { margin-top:5px; color:#778187; font-size:9px; line-height:1.45; }
#studioGrid .studio-announcement-head .text-button { padding:2px 0; color:#77d9d8; font-size:10px; }
#studioGrid .studio-announcement-list { display:flex; min-height:0; flex:1; flex-direction:column; gap:8px; overflow:auto; padding:12px; }
#studioGrid .studio-announcement-item { padding:12px; border:1px solid #2a2f33; border-radius:9px; background:#16191c; }
#studioGrid .studio-announcement-item > span { display:inline-flex; max-width:100%; overflow:hidden; padding:3px 6px; border-radius:4px; color:#f4ad8b; background:#3b2822; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
#studioGrid .studio-announcement-item strong { display:block; margin-top:9px; color:#e5ebed; font-size:11px; line-height:1.45; }
#studioGrid .studio-announcement-item p { margin:6px 0 0; color:#9aa4aa; font-size:9px; line-height:1.65; white-space:pre-wrap; }
#studioGrid .studio-announcement-item a { display:inline-block; margin-top:9px; color:#74dfe1; font-size:9px; text-decoration:none; }
#studioGrid .studio-announcement-empty { padding:55px 8px; }
#studioGrid .studio-announcement-empty small { display:block; margin-top:7px; color:#737d84; font-size:9px; line-height:1.5; }

#studioGrid .studio-image-default-card { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:9px; align-items:center; padding:11px; border:1px solid #2b343a; border-radius:10px; background:#151a1e; }
#studioGrid .studio-image-default-card.offline { opacity:.62; }
#studioGrid .studio-image-default-card .studio-model-mark { width:34px; height:34px; font-size:8px; }
#studioGrid .studio-image-default-card div { min-width:0; }
#studioGrid .studio-image-default-card div > span,#studioGrid .studio-image-default-card strong,#studioGrid .studio-image-default-card small { display:block; }
#studioGrid .studio-image-default-card div > span { color:#73dadb; font-size:8px; }
#studioGrid .studio-image-default-card strong { overflow:hidden; margin-top:3px; color:#e5ecef; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#studioGrid .studio-image-default-card small { margin-top:4px; color:#7e8a90; font-size:8px; line-height:1.4; }
#studioGrid .studio-image-default-card em { padding:4px 6px; border-radius:99px; color:#55d8a5; background:#17372e; font-size:8px; font-style:normal; white-space:nowrap; }
#studioGrid .studio-image-default-card.offline em { color:#e9ad72; background:#3b2a1b; }
#studioGrid .studio-image-default-note { margin:10px 3px; color:#8f9b9f; font-size:9px; line-height:1.65; }

#studioGrid .studio-canvas-copy { display:none; }
#studioGrid .studio-canvas .studio-selected-plan { position:absolute; z-index:3; top:20px; left:50%; width:min(680px,calc(100% - 52px)); margin:0; transform:translateX(-50%); }
#studioGrid .studio-task-stream { position:absolute; z-index:2; top:144px; right:22px; bottom:178px; left:22px; display:flex; min-height:120px; max-width:820px; margin:auto; flex-direction:column; overflow:hidden; border:1px solid #2a3034; border-radius:12px; background:#121416; box-shadow:0 16px 38px #0005; }
#studioGrid .studio-reference-tray:not(.hidden) ~ .studio-task-stream { bottom:302px; }
#studioGrid .studio-task-stream-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid #282d31; background:#171a1d; }
#studioGrid .studio-task-stream-head span,#studioGrid .studio-task-stream-head strong,#studioGrid .studio-task-stream-head small { display:block; }
#studioGrid .studio-task-stream-head span { color:#f17e50; font-size:8px; letter-spacing:.1em; }
#studioGrid .studio-task-stream-head strong { margin-top:3px; color:#e8edef; font-size:12px; }
#studioGrid .studio-task-stream-head small { margin-top:3px; color:#768087; font-size:9px; }
#studioGrid .studio-chat-list { min-height:0; flex:1; overflow:auto; padding:14px; }
#studioGrid .studio-chat-system { margin:0 auto 12px; color:#8e989e; font-size:9px; line-height:1.5; text-align:center; }
#studioGrid .studio-chat-welcome { display:flex; max-width:600px; align-items:flex-start; gap:9px; margin:20px auto; color:#aeb8bd; }
#studioGrid .studio-chat-welcome > span,#studioGrid .studio-task-avatar { display:grid; width:28px; height:28px; flex:0 0 auto; place-items:center; border-radius:9px; color:#102325; background:#67dcdb; font-size:11px; font-weight:800; }
#studioGrid .studio-chat-welcome strong { display:block; color:#e3e9eb; font-size:11px; }
#studioGrid .studio-chat-welcome p { margin:5px 0 0; color:#8f9a9f; font-size:10px; line-height:1.7; }
#studioGrid .studio-task-message { display:grid; max-width:760px; grid-template-columns:28px minmax(0,1fr); gap:9px; margin:0 auto 12px; padding:0; border:0; background:transparent; }
#studioGrid .studio-task-bubble { min-width:0; padding:12px; border:1px solid #2b3237; border-radius:4px 12px 12px 12px; background:#1a1e21; }
#studioGrid .studio-task-bubble .task-item-head strong { color:#e3e9eb; font-size:11px; }
#studioGrid .studio-task-bubble .task-item-head span { font-size:9px; }
#studioGrid .studio-task-bubble p { margin:8px 0; color:#a8b1b6; font-size:10px; line-height:1.65; }
#studioGrid .studio-task-bubble .task-meta { color:#818c93; font-size:9px; }
#studioGrid .studio-task-bubble .task-actions button,#studioGrid .studio-task-bubble .task-actions a { padding:7px 9px; border-color:#343a3f; color:#c0c9cd; background:#23272a; font-size:9px; }
#studioGrid .studio-task-bubble .task-actions a { color:#82dedf; }
#studioGrid .studio-task-bubble .task-expiry { margin-top:8px; color:#e6b170; font-size:9px; }

/* Agent keeps the existing 11-stage workflow and API, but presents it as an
   inspectable conversation rather than a long data-entry form. */
.agent-dialog { width:min(1180px,calc(100% - 28px)); max-height:min(860px,calc(100vh - 28px)); }
.agent-dialog .workflow-callout { margin:13px 0; }
.agent-dialog .workflow-app-grid { display:grid; min-height:590px; grid-template-columns:238px minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#0c1118; }
.agent-dialog .workflow-projects { min-height:0; padding:14px; border-right:1px solid var(--line); background:#10161f; overflow:auto; }
.agent-dialog .workflow-project-list { max-height:none; }
.agent-chat-workspace { display:flex; min-width:0; min-height:0; flex-direction:column; background:#0b1017; }
.agent-chat-intro { display:flex; align-items:flex-start; gap:10px; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.agent-chat-intro > span,.agent-message-avatar { display:grid; width:30px; height:30px; flex:0 0 auto; place-items:center; border-radius:9px; color:#092427; background:var(--cyan); font-size:11px; font-weight:800; }
.agent-chat-intro strong,.agent-chat-intro small { display:block; }
.agent-chat-intro strong { color:#e3ebee; font-size:13px; }
.agent-chat-intro small { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.55; }
.agent-video-plan-hint { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:7px; align-items:baseline; margin-top:10px; padding:8px 10px; border:1px solid rgba(64,216,223,.24); border-radius:8px; background:#102027; }
.agent-video-plan-hint > span { grid-row:1 / span 2; padding:3px 5px; border-radius:4px; color:#7bdfdf; background:#17333a; font-size:8px; white-space:nowrap; }
.agent-video-plan-hint strong { min-width:0; overflow:hidden; margin:0; color:#e0edef; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.agent-video-plan-hint small { margin:3px 0 0; color:#93a2a8; font-size:8px; }
.agent-video-plan-hint .agent-image-model-line { grid-column:1 / -1; margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.08); color:#a9bbc0; }
.agent-video-plan-hint.offline { border-color:rgba(235,171,114,.25); background:#251c16; }
.agent-video-plan-hint.offline > span { color:#edbd86; background:#402d1e; }
.agent-chat-thread { display:flex; min-height:240px; flex:1 1 280px; flex-direction:column; gap:11px; overflow:auto; padding:17px 20px; scroll-behavior:smooth; }
.agent-chat-empty { display:flex; max-width:620px; align-items:flex-start; gap:10px; margin:auto; color:#a8b4ba; }.agent-chat-empty strong { display:block; color:#e5edef; font-size:12px; }.agent-chat-empty p { margin:5px 0 0; color:#8f9ca3; font-size:10px; line-height:1.7; }
.agent-chat-process { align-self:center; max-width:88%; padding:5px 10px; border:1px solid rgba(119,139,149,.18); border-radius:99px; color:#84949c; background:#10161d; font-size:9px; line-height:1.45; text-align:center; }
.agent-chat-message { display:grid; max-width:min(740px,94%); grid-template-columns:30px minmax(0,1fr); gap:9px; align-items:flex-start; }.agent-chat-message.user { align-self:flex-end; grid-template-columns:minmax(0,1fr) 30px; }.agent-chat-message.user > .agent-message-avatar { grid-column:2; grid-row:1; color:#21180b; background:#f2ad68; }.agent-chat-message.user > div { grid-column:1; grid-row:1; border-radius:12px 4px 12px 12px; background:#1d2930; }.agent-chat-message > div { min-width:0; padding:11px 13px; border:1px solid #293840; border-radius:4px 12px 12px 12px; background:#131d25; }.agent-chat-message strong,.agent-chat-message small { display:block; }.agent-chat-message strong { color:#dfeaec; font-size:10px; }.agent-chat-message p { margin:7px 0 0; color:#b0bdc2; font-size:11px; line-height:1.72; white-space:pre-wrap; word-break:break-word; }.agent-chat-message small { margin-top:8px; color:#73828a; font-size:8px; }.agent-chat-message.pending { opacity:.82; }.agent-chat-message.pending p::after { display:inline-block; margin-left:4px; content:'···'; color:var(--cyan); letter-spacing:2px; animation:agent-pulse 1.2s ease-in-out infinite; }
@keyframes agent-pulse { 50% { opacity:.25; } }
.agent-dialog .workflow-stage-panel { display:flex; min-height:0; max-height:390px; flex:0 1 390px; flex-direction:column; overflow:auto; padding:16px 20px; border-top:1px solid var(--line); background:#0d131a; }
.agent-stage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:0 0 13px 40px; }
.agent-stage-head span,.agent-stage-head strong,.agent-stage-head small { display:block; }
.agent-stage-head span { color:var(--cyan); font-size:9px; }
.agent-stage-head strong { margin-top:3px; color:#e8edef; font-size:13px; }
.agent-stage-head small { margin-top:4px; color:var(--muted); font-size:9px; }
.agent-stage-timeline { display:flex; flex-direction:column; gap:8px; }
.agent-stage-message { display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; padding:0; border:0; background:transparent; text-align:left; }
.agent-stage-message.selectable { cursor:pointer; }
.agent-stage-message .agent-message-bubble { min-width:0; padding:11px 12px; border:1px solid #27323a; border-radius:4px 11px 11px 11px; background:#131b22; }
.agent-stage-message.selected .agent-message-bubble { border-color:rgba(64,216,223,.65); background:#11242a; box-shadow:0 0 0 1px rgba(64,216,223,.1); }
.agent-stage-message .agent-message-bubble > div { display:flex; align-items:center; gap:7px; }
.agent-stage-message b { color:#7bdfe0; font-size:9px; }
.agent-stage-message strong { min-width:0; overflow:hidden; color:#e5ecee; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.agent-stage-message em { margin-left:auto; padding:3px 6px; border-radius:99px; color:#a8b3ba; background:#ffffff0a; font-size:8px; font-style:normal; white-space:nowrap; }
.agent-stage-message em.completed { color:var(--green); background:rgba(61,215,163,.1); }
.agent-stage-message em.running { color:var(--gold); background:rgba(255,202,112,.1); }
.agent-stage-message em.failed { color:var(--red); background:rgba(255,104,123,.1); }
.agent-stage-message p { margin:6px 0 0; color:#9ba6ac; font-size:10px; line-height:1.55; }
.agent-stage-message small { display:block; margin-top:5px; color:#728089; font-size:8px; }
.agent-current-stage { margin:16px 0 4px 40px; padding:13px; border:1px solid #2b363d; border-radius:12px; background:#101820; }
.agent-current-message { display:flex; align-items:flex-start; gap:9px; margin-bottom:11px; }
.agent-current-message strong { color:#e1eaed; font-size:11px; }.agent-current-message p { margin:4px 0 0; color:#9ea9ae; font-size:10px; line-height:1.6; }
.agent-current-stage label { display:block; margin-top:10px; color:#aeb9be; font-size:10px; }.agent-current-stage label > span { display:block; margin-bottom:6px; }.agent-current-stage textarea { min-height:120px; color:#dfe7ea; background:#0a0f15; font-size:11px; line-height:1.65; }
.agent-current-stage #workflowRevisionNote { min-height:72px; }
.agent-production-links { display:flex; gap:8px; margin:13px 0 4px 40px; }.agent-production-links button { flex:0 0 auto; }
.agent-dialog .agent-project-composer { display:block; margin:0; padding:10px 12px 12px; border-top:1px solid var(--line); background:#151c24; }
.agent-project-settings { margin:0 0 8px; border:1px solid #293842; border-radius:8px; background:#101720; }.agent-project-settings > summary { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; color:#bbc8cc; cursor:pointer; font-size:10px; list-style:none; }.agent-project-settings > summary::-webkit-details-marker { display:none; }.agent-project-settings > summary::after { margin-left:8px; content:'⌄'; color:#73dadd; }.agent-project-settings[open] > summary::after { transform:rotate(180deg); }.agent-project-settings summary small { margin-left:auto; color:#75848b; font-size:9px; }.agent-project-settings .agent-project-meta { padding:0 9px 9px; }
.agent-project-meta { display:grid; grid-template-columns:minmax(150px,1fr) auto auto 82px 60px; gap:6px; }
.agent-project-meta input,.agent-project-meta select { min-width:0; height:32px; padding:0 8px; border:1px solid #2c3944; border-radius:7px; color:#dbe6e9; background:#0c1219; font:inherit; font-size:10px; }
.agent-project-composer > textarea { min-height:84px; margin-top:8px; color:#e2ebed; background:#0c1219; font-size:11px; line-height:1.6; }
.agent-compose-foot { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; margin-top:8px; }.agent-compose-foot span { flex:1 1 330px; color:#809098; font-size:9px; line-height:1.45; }.agent-compose-foot small { color:#6f8088; font-size:8px; line-height:1.45; }

/* Agent is a real conversation surface: no project-setup form is exposed at
   the bottom.  The model asks only for information that this project needs. */
.agent-dialog .workflow-stage-panel { display:none !important; }
.agent-dialog .agent-project-composer { display:flex; flex-direction:column; gap:8px; padding:10px 14px 12px; background:linear-gradient(180deg,#121922,#10161e); }
.agent-composer-tools { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:8px; }
.agent-material-tools { display:flex; min-width:0; gap:5px; overflow-x:auto; }
.agent-material-tools button { display:flex; min-width:max-content; align-items:center; gap:4px; padding:6px 8px; border:1px solid #2d3b44; border-radius:7px; color:#b7c4c8; background:#0c1219; font:inherit; font-size:9px; cursor:pointer; }
.agent-material-tools button:hover:not(:disabled) { border-color:#4fcfd0; color:#d8eff0; }.agent-material-tools button:disabled { cursor:not-allowed; opacity:.48; }.agent-material-tools em { color:#e7af72; font-size:8px; font-style:normal; }
.agent-video-plan-control { display:flex; min-width:220px; max-width:45%; align-items:center; gap:7px; padding:5px 8px; border:1px solid #2d4149; border-radius:8px; background:#0c131a; }.agent-video-plan-control span { flex:0 0 auto; color:#74d7d8; font-size:8px; white-space:nowrap; }.agent-video-plan-control select { min-width:0; flex:1; padding:2px 15px 2px 0; border:0; outline:0; color:#dbe7e8; background:transparent; font:inherit; font-size:9px; }
.agent-composer-input { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }.agent-composer-input textarea { min-height:74px; max-height:154px; margin:0; resize:vertical; color:#e2ebed; background:#0a1017; font-size:11px; line-height:1.6; }.agent-composer-input button { min-width:92px; min-height:48px; margin:0; }.agent-composer-input button b { margin-left:5px; }
.agent-chat-message.workflow-role { max-width:min(760px,96%); }.agent-chat-message.workflow-role > .agent-message-avatar { color:#1d2527; background:#a3dcdb; font-size:8px; }.agent-chat-message.workflow-role > div { background:#111a22; }.agent-chat-message.workflow-role.selected > div { border-color:rgba(76,211,213,.72); background:#10242b; box-shadow:0 0 0 1px rgba(76,211,213,.09); }.agent-chat-message.workflow-role strong { display:flex; align-items:center; gap:7px; }.agent-chat-message.workflow-role strong em { padding:2px 5px; border-radius:999px; color:#8a969c; background:#ffffff0a; font-size:8px; font-style:normal; }.agent-chat-message.workflow-role strong em.completed { color:#67ddaa; background:rgba(61,215,163,.1); }.agent-chat-message.workflow-role strong em.ready { color:#86dce1; background:rgba(67,203,211,.1); }.agent-chat-message.workflow-role strong em.running { color:#efc47f; background:rgba(255,202,112,.1); }.agent-chat-message.workflow-role strong em.review { color:#d7b4ff; background:rgba(183,155,255,.12); }.agent-chat-message.workflow-role strong em.failed { color:#ff9daa; background:rgba(255,104,123,.1); }
.agent-stage-open { margin-top:8px; padding:4px 7px; border:1px solid #34414a; border-radius:6px; color:#91dfe0; background:#132127; font:inherit; font-size:8px; cursor:pointer; }.agent-stage-open:hover { border-color:#58d8da; color:#e0f7f7; }.agent-stage-review-actions { display:grid; gap:7px; margin-top:9px; }.agent-stage-review-actions label { display:grid; gap:4px; color:#8fa3a7; font-size:8px; line-height:1.45; }.agent-stage-review-actions textarea { min-height:62px; resize:vertical; padding:7px 8px; border:1px solid #2c3d47; border-radius:7px; outline:0; color:#e2ebed; background:#090f15; font:10px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }.agent-stage-review-actions textarea:focus { border-color:#58d8da; }.agent-stage-revise { justify-self:start; padding:5px 8px; border:1px solid rgba(239,196,127,.48); border-radius:6px; color:#f2c77d; background:rgba(239,196,127,.08); font:inherit; font-size:8px; cursor:pointer; }.agent-stage-revise:hover { border-color:#f2c77d; color:#ffe0ab; }
.agent-stage-work { margin-top:2px; }.agent-stage-work > div { border-color:#3a4b54; background:#14202a; }.agent-artifact-message { margin-top:10px; border:1px solid #2b3c46; border-radius:8px; overflow:hidden; background:#0a1016; }.agent-artifact-message summary { padding:8px 10px; color:#90e1e1; cursor:pointer; font-size:9px; }.agent-artifact-message pre { max-height:300px; overflow:auto; margin:0; padding:10px; border-top:1px solid #24323b; color:#cad6d9; font:11px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.agent-media-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }.agent-media-thumb { display:block; width:76px; height:76px; overflow:hidden; border:1px solid #30414a; border-radius:7px; background:#0b1118; }.agent-media-thumb img { width:100%; height:100%; object-fit:cover; }.agent-media-link { display:inline-flex; margin-top:8px; padding:5px 7px; border:1px solid #3a5963; border-radius:6px; color:#8fe4e4; background:#13242a; font-size:9px; text-decoration:none; }

/* Admin announcement publishing is content management, not a hidden banner
   editor: each item has explicit publish state, order and a delete action. */
.admin-announcement-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:0 0 14px; }.admin-announcement-head strong,.admin-announcement-head small { display:block; }.admin-announcement-head strong { color:var(--text); }.admin-announcement-head small { max-width:540px; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.5; }.admin-announcement-head .primary-button { flex:0 0 auto; }
.announcement-create,.announcement-editor { margin-bottom:12px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#0a0f18; }.announcement-create.hidden { display:none; }.announcement-editor-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:11px; }.announcement-editor-title strong { font-size:13px; }.announcement-editor-title small { color:var(--muted); font-size:10px; }.announcement-editor-fields,.announcement-create { display:grid; grid-template-columns:120px minmax(180px,1fr) minmax(220px,1.5fr); gap:8px; align-items:end; }.announcement-create { grid-template-columns:120px minmax(180px,1fr) minmax(220px,1.5fr); }.announcement-editor-fields label,.announcement-create label { display:block; color:var(--muted); font-size:10px; }.announcement-editor-fields input,.announcement-editor-fields textarea,.announcement-create input,.announcement-create textarea { width:100%; margin-top:5px; padding:8px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c14; font:inherit; font-size:11px; }.announcement-editor-fields textarea,.announcement-create textarea { min-height:64px; resize:vertical; line-height:1.5; }.announcement-editor-fields .announcement-body-field,.announcement-create .announcement-body-field { grid-row:span 2; }.announcement-active { display:flex !important; align-items:center; gap:6px; height:33px; }.announcement-active input { width:auto !important; margin:0 !important; }.announcement-editor-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }.announcement-editor-actions .danger { color:var(--red); }

@media (max-width: 1220px) { body.workspace-mode #studioGrid.studio-workspace { grid-template-columns:248px minmax(420px,1fr) 255px; } #studioGrid .studio-workbench-toolbar { grid-template-columns:248px minmax(0,1fr) auto; } #studioGrid .studio-workbench-nav button,#studioGrid .studio-workbench-nav a { padding-inline:8px; } }
@media (max-width: 1120px) { body.workspace-mode #studioGrid.studio-workspace { grid-template-columns:258px minmax(0,1fr); } #studioGrid .studio-workbench-toolbar { grid-template-columns:258px minmax(0,1fr) auto; } #studioGrid .studio-announcement-rail { display:none; } #studioGrid .studio-announcement-rail.mobile-open { position:absolute; z-index:30; top:54px; right:12px; display:flex; width:min(300px,calc(100% - 24px)); min-height:0; max-height:calc(100vh - 76px); border:1px solid #343b40; border-radius:10px; box-shadow:0 22px 48px #000b; } }
@media (max-width: 900px) { .agent-dialog .workflow-app-grid { grid-template-columns:1fr; }.agent-dialog .workflow-projects { max-height:175px; border-right:0; border-bottom:1px solid var(--line); }.agent-dialog .workflow-project-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.agent-chat-thread { min-height:230px; padding:13px; }.agent-dialog .workflow-stage-panel { max-height:410px; padding:13px; }.announcement-editor-fields,.announcement-create { grid-template-columns:1fr 1fr; }.announcement-editor-fields .announcement-body-field,.announcement-create .announcement-body-field { grid-column:1 / -1; grid-row:auto; } }
@media (max-width: 620px) { #studioGrid .studio-task-stream { top:134px; right:10px; bottom:168px; left:10px; } #studioGrid .studio-reference-tray:not(.hidden) ~ .studio-task-stream { bottom:278px; } #studioGrid .studio-task-stream-head small { display:none; } .agent-dialog .workflow-app-grid { min-height:0; }.agent-dialog .workflow-project-list { grid-template-columns:1fr; }.agent-dialog .workflow-stage-panel { padding:12px; }.agent-stage-head,.agent-current-stage,.agent-production-links { margin-left:0; }.agent-project-meta { grid-template-columns:1fr 1fr; }.agent-project-meta input[name="title"] { grid-column:1 / -1; }.agent-compose-foot { align-items:stretch; flex-direction:column; }.agent-compose-foot button { width:100%; }.announcement-editor-fields,.announcement-create { grid-template-columns:1fr; }.admin-announcement-head { align-items:stretch; flex-direction:column; }.admin-announcement-head .primary-button { width:100%; } }

/* Workbench integrity pass: one permanent left rail, one central canvas.
   The rules live last so a narrow desktop browser cannot inherit an older
   compressed dock variant and hide editable parameters. */
#studioGrid .studio-workbench-nav { display:flex; align-items:stretch; }
#studioGrid .studio-workbench-nav a { display:flex; align-items:center; padding:0 11px; border-bottom:2px solid transparent; color:#98a3aa; font-size:10px; text-decoration:none; }
#studioGrid .studio-workbench-nav a:hover,#studioGrid .studio-workbench-nav .studio-home-link { border-bottom-color:#f17a4a; color:#f3f7f8; }
#studioGrid .studio-model-rail { display:flex; min-height:calc(100dvh - 54px); max-height:calc(100dvh - 54px); flex-direction:column; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#studioGrid .studio-model-list { display:block; min-height:0; max-height:none; flex:0 0 auto; overflow:visible; padding:0 2px 10px; }
#studioGrid .studio-rail-section { display:grid; gap:4px; margin:0 0 13px; }
#studioGrid .studio-rail-section-title { padding:2px 7px 3px; color:#6f7d84; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
#studioGrid .studio-agent-section { padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.09); }
#studioGrid .studio-agent-entry { border-color:rgba(93,226,220,.24); background:linear-gradient(100deg,rgba(72,217,211,.11),rgba(112,87,247,.08)); }
#studioGrid .studio-agent-entry .studio-model-mark { color:#182624; background:#7be3df; }
#studioGrid .studio-image-entry .studio-model-mark { color:#23203b; background:#b79bff; }
#studioGrid .studio-image-entry .studio-model-state.available { color:#bdabff; background:rgba(183,155,255,.13); }
#studioGrid .studio-agent-sessions { display:grid; gap:6px; margin:4px 1px 0; padding:8px 7px 2px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(3,7,11,.44); }
#studioGrid .studio-agent-sessions-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
#studioGrid .studio-agent-sessions-head strong { color:#afc1c4; font-size:9px; font-weight:700; }
#studioGrid .studio-agent-sessions-head em { display:inline-grid; min-width:14px; height:14px; place-items:center; margin-left:3px; border-radius:99px; color:#9ae5df; background:rgba(75,217,209,.13); font-size:8px; font-style:normal; }
#studioGrid .studio-agent-sessions-head button { padding:2px 4px; border:0; color:#7fe2db; background:transparent; font:inherit; font-size:9px; cursor:pointer; }
#studioGrid .studio-agent-session-list { display:grid; gap:4px; max-height:164px; overflow:auto; }
#studioGrid .studio-agent-session { display:grid; gap:2px; width:100%; padding:6px 7px; border:1px solid transparent; border-radius:6px; color:#bdc9cb; text-align:left; background:#0c1116; cursor:pointer; }
#studioGrid .studio-agent-session:hover,#studioGrid .studio-agent-session.active { border-color:rgba(76,211,213,.4); color:#e8f9f8; background:rgba(66,199,196,.08); }
#studioGrid .studio-agent-session strong,#studioGrid .studio-agent-session small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#studioGrid .studio-agent-session strong { font-size:9px; font-weight:650; }
#studioGrid .studio-agent-session small { color:#75858a; font-size:8px; }
#studioGrid .studio-agent-session-empty { padding:6px 2px; color:#69777d; font-size:9px; }

#studioGrid .studio-canvas { position:relative; }
#studioGrid .studio-agent-mount { position:absolute; z-index:18; inset:0; min-width:0; min-height:0; background:#0d0e10; }
#studioGrid .studio-agent-mount.hidden { display:none; }
#studioGrid .studio-agent-surface { position:absolute; inset:0; display:flex; width:100%; max-width:none; height:100%; max-height:none; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:#0d1014; box-shadow:none; }
#studioGrid .studio-agent-surface.hidden { display:none; }
#studioGrid .studio-agent-surface > .modal-brand,#studioGrid .studio-agent-surface > .workflow-callout { display:none; }
#studioGrid .studio-agent-surface > .modal-close { z-index:4; top:12px; right:14px; }
#studioGrid .agent-dialog .workflow-app-grid { width:100%; min-height:0; height:100%; flex:1; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); border:0; border-radius:0; }
#studioGrid .agent-dialog .workflow-projects { display:none; }
#studioGrid .agent-dialog .workflow-projects .api-section-head { margin-bottom:7px; padding-right:34px; }
#studioGrid .agent-dialog .workflow-project-list { display:flex; gap:7px; max-height:62px; overflow-x:auto; overflow-y:hidden; }
#studioGrid .agent-dialog .workflow-project-list > * { min-width:210px; flex:0 0 210px; }
#studioGrid .agent-dialog .workflow-projects { max-height:128px; }
#studioGrid .agent-dialog .workflow-project-list { max-height:79px; }
.workflow-project-actions { display:flex; align-items:center; gap:7px; }
.workflow-history-count { display:inline-grid; min-width:17px; height:17px; place-items:center; margin-left:4px; border-radius:99px; color:#95e8e7; background:rgba(64,216,223,.13); font-size:9px; font-style:normal; vertical-align:1px; }
.workflow-new-session { border-color:rgba(64,216,223,.45) !important; color:#aef2f1 !important; background:rgba(64,216,223,.08) !important; }
.workflow-project-card-head { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:8px; }
.workflow-project-card-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workflow-project-card-meta,.workflow-project-card-preview { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workflow-project-card-meta { margin-top:5px; color:var(--muted); font-size:9px; }
.workflow-project-card-preview { margin-top:4px; color:#8ca0a8; font-size:9px; }
#studioGrid .agent-dialog .workflow-project-card { display:block; min-width:238px; padding:9px 10px; }
#studioGrid .agent-dialog .agent-chat-workspace { min-height:0; }
#studioGrid .agent-dialog .agent-chat-intro { padding:14px 52px 12px 18px; }
#studioGrid .agent-dialog .agent-chat-thread { min-height:0; padding:16px 18px; }
#studioGrid .agent-dialog .workflow-stage-panel { max-height:42%; padding:13px 18px; }
#studioGrid .agent-dialog .agent-project-composer { padding:9px 14px 12px; }
#studioGrid .agent-dialog .agent-stage-result > div { max-width:min(900px,100%); }
#studioGrid .agent-dialog .agent-stage-result-content { max-height:none; overflow:visible; margin:9px 0 0; padding:10px; border:1px solid #2b3c46; border-radius:8px; color:#d2e0e2; background:#0a1016; font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
#studioGrid.agent-mode .studio-selected-plan,#studioGrid.agent-mode .studio-reference-tray,#studioGrid.agent-mode .studio-task-stream,#studioGrid.agent-mode .studio-prompt-dock { display:none !important; }
#studioGrid .agent-stage-result em.muted { color:#8d9aa3; background:rgba(126,143,153,.12); }
#studioGrid .agent-stage-history { margin-top:9px; border:1px solid #24323c; border-radius:8px; background:#0a1016; }
#studioGrid .agent-stage-history summary { padding:10px; color:#9fb1bb; cursor:pointer; font-size:12px; }
#studioGrid .agent-stage-history .agent-stage-result-content { margin:0; border-width:1px 0 0; border-radius:0; }

#studioGrid:not(.agent-mode) .studio-prompt-dock { right:16px; bottom:14px; left:16px; width:auto; min-height:224px; padding:16px 18px 14px; transform:none; }
#studioGrid:not(.agent-mode) .studio-dock-core { grid-template-columns:218px minmax(0,1fr); gap:18px; }
#studioGrid:not(.agent-mode) .studio-dock-foot { display:grid; grid-template-columns:minmax(0,1fr) 102px 244px; gap:9px; align-items:center; min-height:54px; margin-top:10px; padding-top:9px; }
#studioGrid:not(.agent-mode) .studio-workflow-label { display:none; }
#studioGrid:not(.agent-mode) .studio-generation-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; min-width:0; margin:0; padding:0; border:0; }
#studioGrid:not(.agent-mode) .studio-generation-controls label,#studioGrid:not(.agent-mode) .studio-resolution-control { display:flex !important; min-width:0; min-height:42px; flex-direction:column; justify-content:center; padding:5px 8px; border:1px solid rgba(255,255,255,.11) !important; border-radius:8px; background:#12161a; }
#studioGrid:not(.agent-mode) .studio-generation-controls label + label { border-left:1px solid rgba(255,255,255,.11) !important; }
#studioGrid:not(.agent-mode) .studio-generation-controls label span,#studioGrid:not(.agent-mode) .studio-resolution-control span { color:#879299; font-size:8px; }
#studioGrid:not(.agent-mode) .studio-generation-controls select { min-width:0; padding:1px 15px 1px 0; color:#e3ebed; font-size:10px; }
#studioGrid:not(.agent-mode) .studio-resolution-control strong { overflow:hidden; color:#e3ebed; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#studioGrid:not(.agent-mode) .studio-dock-cost { display:block !important; min-width:0; padding:0 8px; border-left:1px solid rgba(255,255,255,.08); }
#studioGrid:not(.agent-mode) .studio-dock-foot .generate-button { min-width:0; width:100%; min-height:48px; margin:0; padding:7px 9px 7px 18px; }

@container (max-width:820px) {
  #studioGrid:not(.agent-mode) .studio-prompt-dock { right:10px; bottom:10px; left:10px; min-height:258px; padding:11px; border-radius:16px; }
  #studioGrid:not(.agent-mode) .studio-dock-core { grid-template-columns:1fr; gap:8px; }
  #studioGrid:not(.agent-mode) .studio-material-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  #studioGrid:not(.agent-mode) .studio-flow-slot { display:flex; width:auto; height:48px; min-width:0; flex-basis:auto; flex-direction:row; justify-content:center; gap:5px; border-radius:9px; }
  #studioGrid:not(.agent-mode) .studio-flow-slot b { font-size:17px; }
  #studioGrid:not(.agent-mode) .studio-flow-slot span { display:block; overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
  #studioGrid:not(.agent-mode) .studio-flow-arrow { display:none; }
  #studioGrid:not(.agent-mode) .studio-dock-core .prompt-editor,#studioGrid:not(.agent-mode) .studio-dock-core textarea { height:70px; min-height:70px; max-height:70px; }
  #studioGrid:not(.agent-mode) .studio-dock-foot { grid-template-columns:minmax(0,1fr) 132px; grid-template-areas:'params generate' 'cost generate'; gap:6px 8px; min-height:86px; margin-top:8px; padding-top:7px; }
  #studioGrid:not(.agent-mode) .studio-generation-controls { grid-area:params; grid-template-columns:repeat(4,minmax(0,1fr)); }
  #studioGrid:not(.agent-mode) .studio-dock-cost { grid-area:cost; padding:0; border-left:0; }
  #studioGrid:not(.agent-mode) .studio-dock-foot .generate-button { grid-area:generate; min-height:78px; }
}
@container (max-width:520px) {
  #studioGrid:not(.agent-mode) .studio-prompt-dock { min-height:304px; }
  #studioGrid:not(.agent-mode) .studio-generation-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  #studioGrid:not(.agent-mode) .studio-generation-controls label,#studioGrid:not(.agent-mode) .studio-resolution-control { min-height:35px; padding:4px 6px; }
  #studioGrid:not(.agent-mode) .studio-dock-foot { grid-template-columns:minmax(0,1fr) 106px; min-height:132px; }
  #studioGrid:not(.agent-mode) .studio-dock-foot .generate-button { min-height:120px; padding:7px; font-size:10px; }
  #studioGrid:not(.agent-mode) .studio-dock-foot .generate-button b { width:22px; height:22px; }
}

@media (max-width:900px) {
  #studioGrid .studio-model-rail { min-height:calc(100dvh - 50px); max-height:calc(100dvh - 50px); padding:10px 8px; border-right:1px solid #24272b; border-bottom:0; }
  #studioGrid .studio-model-list { display:block; overflow:visible; }
  #studioGrid .studio-model-button { width:100%; flex:0 0 auto; }
}