/* STUDIO SUITE — the site header, the Studio chrome and the shared look of every Studio page.
   Loaded after application.css. Lane stylesheets (suite_*.css) build on the tokens and utilities defined here.
   No inline styles anywhere (strict CSP): everything is a class. */

:root {
  --pl-appbar-h: 56px;
  --st-bar-h: 48px;
  --st-tabs-h: 40px;
  --st-status-h: 30px;
  --st-bg: #07090f;
  --st-chrome: #0b0e17;
  --st-panel: #10141f;
  --st-raised: #161b29;
  --st-hover: #1c2233;
  --st-line: rgba(148, 163, 198, .14);
  --st-line-strong: rgba(148, 163, 198, .28);
  --st-text: #eef2ff;
  --st-muted: #8b95ab;
  --st-dim: #5d667b;
  --st-accent: #5eead4;
  --st-accent-ink: #04110f;
  --st-danger: #fb7185;
  --st-warn: #fbbf24;
  --st-ok: #4ade80;
  --st-radius: 10px;
  --st-radius-sm: 7px;
  --st-gradient: linear-gradient(135deg, #00e5ff, #8b5cf6 60%, #f107a3);
}
[data-st-workspace="project"] { --st-accent: #5eead4; --st-accent-ink: #04110f; }
[data-st-workspace="story"] { --st-accent: #a78bfa; --st-accent-ink: #0d0720; }
[data-st-workspace="design"] { --st-accent: #f472b6; --st-accent-ink: #1f0514; }
[data-st-workspace="edit"] { --st-accent: #fbbf24; --st-accent-ink: #1c1202; }
[data-st-workspace="logic"] { --st-accent: #4ade80; --st-accent-ink: #03150a; }
[data-st-workspace="deliver"] { --st-accent: #60a5fa; --st-accent-ink: #030f22; }

/* ---------- Site header (every page) ---------- */
.plai-body .plai-header, .plai-body .plai-account-nav { display: none; } /* legacy per-page headers: the shell draws the header */
.pl-appbar { position: sticky; top: 0; z-index: 60; height: var(--pl-appbar-h); border-bottom: 1px solid var(--st-line); background: rgba(7, 9, 15, .86); backdrop-filter: blur(14px) saturate(140%); }
.pl-appbar__inner { display: flex; align-items: center; gap: 1.25rem; height: 100%; max-width: 1680px; margin: 0 auto; padding: 0 1.1rem; }
.pl-brand { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; color: #fff; }
.pl-brand__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--st-gradient); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 18px rgba(139, 92, 246, .35); }
.pl-brand__mark svg { width: 15px; height: 15px; color: #fff; fill: #fff; }
.pl-brand__name { font: 900 1.12rem/1 var(--plai-heading); letter-spacing: .06em; }
.pl-brand__name b { color: var(--plai-cyan); }
.pl-brand__name small { font-size: .62em; font-weight: 800; letter-spacing: .08em; color: #b9c2d8; }
.pl-appbar__nav { display: flex; align-items: center; gap: .15rem; min-width: 0; }
.pl-appbar__link { display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .8rem; border-radius: 9px; color: var(--st-muted); font: 600 .8rem var(--plai-heading); letter-spacing: .01em; white-space: nowrap; transition: color var(--plai-transition), background var(--plai-transition); }
.pl-appbar__link svg { width: 15px; height: 15px; }
.pl-appbar__link:hover { color: #fff; background: rgba(255,255,255,.06); }
.pl-appbar__link.is-active { color: #fff; background: rgba(255,255,255,.1); }
.pl-appbar__end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.pl-appbar__wallet { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .7rem; border: 1px solid var(--st-line); border-radius: 999px; color: #d6f9ff; font: 600 .74rem var(--plai-heading); }
.pl-appbar__wallet svg { width: 14px; height: 14px; color: var(--plai-cyan); }
.pl-appbar__wallet a { color: inherit; }
.pl-appbar__icon, .pl-appbar__burger { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--st-muted); background: transparent; cursor: pointer; }
.pl-appbar__icon:hover, .pl-appbar__burger:hover { color: #fff; background: rgba(255,255,255,.07); }
.pl-appbar__icon svg, .pl-appbar__burger svg { width: 17px; height: 17px; }
.pl-appbar__burger { display: none; }
.pl-appbar__avatar { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: linear-gradient(135deg, rgba(0,229,255,.35), rgba(139,92,246,.5)); font: 800 .68rem var(--plai-heading); letter-spacing: .04em; cursor: pointer; }
.pl-appbar__avatar:hover { border-color: rgba(255,255,255,.4); }
.pl-appbar__signin { display: inline-flex; align-items: center; height: 34px; padding: 0 1rem; border-radius: 9px; color: #04121a; background: var(--plai-cyan); font: 700 .78rem var(--plai-heading); }
.pl-usermenu { position: absolute; top: calc(var(--pl-appbar-h) - 4px); right: max(1rem, calc((100vw - 1680px) / 2 + 1rem)); z-index: 70; display: none; width: 250px; padding: .4rem; border: 1px solid var(--st-line-strong); border-radius: 12px; background: #0e1220; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.pl-usermenu.is-open { display: block; }
.pl-usermenu__identity { display: grid; gap: .1rem; padding: .55rem .65rem .65rem; margin-bottom: .3rem; border-bottom: 1px solid var(--st-line); }
.pl-usermenu__identity span { color: var(--st-dim); font: 700 .58rem var(--plai-heading); letter-spacing: .14em; text-transform: uppercase; }
.pl-usermenu__identity strong { overflow: hidden; color: #fff; font-size: .8rem; text-overflow: ellipsis; }
.pl-usermenu__item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: 8px; color: #cfd6e6; background: transparent; font: 500 .8rem var(--plai-body); text-align: left; cursor: pointer; }
.pl-usermenu__item svg { width: 15px; height: 15px; color: var(--st-muted); }
.pl-usermenu__item:hover { color: #fff; background: rgba(255,255,255,.07); }
.pl-usermenu form { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--st-line); }
.pl-usermenu__logout { color: #ffb4c0; }
.pl-mobilenav { display: none; padding: .5rem; border-bottom: 1px solid var(--st-line); background: #0b0e17; }
.pl-mobilenav.is-open { display: grid; gap: .15rem; }
.pl-mobilenav__item { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 9px; color: #cfd6e6; font: 600 .86rem var(--plai-heading); }
.pl-mobilenav__item svg { width: 16px; height: 16px; }
.pl-mobilenav__item.is-active { color: #fff; background: rgba(255,255,255,.08); }
@media (max-width: 860px) {
  .pl-appbar__nav { display: none; }
  .pl-appbar__burger { display: grid; }
  .pl-appbar__wallet { display: none; }
}

/* ---------- Studio chrome (every page of one project) ---------- */
.plai-body--studio { background: var(--st-bg); }
.plai-body--studio .plai-global-background { display: none; } /* a production tool: no animated backdrop behind the work */
.st-chrome { position: sticky; top: var(--pl-appbar-h); z-index: 50; border-bottom: 1px solid var(--st-line); background: var(--st-chrome); }
.st-bar { display: flex; align-items: center; gap: .9rem; height: var(--st-bar-h); padding: 0 .9rem; border-bottom: 1px solid var(--st-line); }
.st-bar__back { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; color: var(--st-muted); }
.st-bar__back:hover { color: #fff; background: rgba(255,255,255,.07); }
.st-bar__back svg { width: 17px; height: 17px; }
.st-bar__project { display: grid; flex: 0 1 240px; min-width: 110px; line-height: 1.15; }
.st-bar__kind { overflow: hidden; color: var(--st-accent); font: 700 .56rem var(--plai-heading); letter-spacing: .16em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.st-bar__title { overflow: hidden; color: #fff; font: 700 .9rem var(--plai-heading); text-overflow: ellipsis; white-space: nowrap; }
.st-workspaces { display: flex; align-items: center; gap: .15rem; margin: 0 auto; padding: 3px; border: 1px solid var(--st-line); border-radius: 11px; background: rgba(255,255,255,.025); }
.st-workspace { display: inline-flex; align-items: center; gap: .45rem; height: 32px; padding: 0 .85rem; border-radius: 8px; color: var(--st-muted); font: 650 .78rem var(--plai-heading); white-space: nowrap; transition: color var(--plai-transition), background var(--plai-transition); }
.st-workspace svg { width: 15px; height: 15px; }
.st-workspace:hover { color: #fff; background: rgba(255,255,255,.06); }
.st-workspace.is-active { color: var(--st-accent-ink); background: var(--st-accent); box-shadow: 0 4px 16px color-mix(in srgb, var(--st-accent) 35%, transparent); }
.st-bar__actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; flex: 0 1 240px; }
.st-cta, .st-ghost { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .8rem; border-radius: 8px; font: 700 .76rem var(--plai-heading); white-space: nowrap; }
.st-cta svg, .st-ghost svg { width: 14px; height: 14px; }
.st-cta { color: #fff; background: var(--st-gradient); box-shadow: 0 6px 18px rgba(139,92,246,.3); }
.st-cta:hover { filter: brightness(1.12); }
.st-ghost { border: 1px solid var(--st-line-strong); color: #dbe2f2; }
.st-ghost:hover { border-color: var(--st-accent); color: #fff; }
.st-editors { display: flex; align-items: stretch; gap: .1rem; height: var(--st-tabs-h); padding: 0 .9rem; overflow-x: auto; scrollbar-width: none; }
.st-editors::-webkit-scrollbar { display: none; }
.st-editor { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: 0 .8rem; color: var(--st-muted); font: 600 .78rem var(--plai-heading); white-space: nowrap; transition: color var(--plai-transition); }
.st-editor svg { width: 15px; height: 15px; }
.st-editor:hover { color: #fff; }
.st-editor.is-active { color: #fff; }
.st-editor.is-active svg { color: var(--st-accent); }
.st-editor.is-active::after { content: ""; position: absolute; right: .6rem; bottom: 0; left: .6rem; height: 2px; border-radius: 2px 2px 0 0; background: var(--st-accent); }
@media (max-width: 1100px) {
  .st-workspace span { display: none; }
  .st-workspace.is-active span { display: inline; }
  .st-cta span, .st-ghost span { display: none; }
  .st-bar__actions { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .st-bar { gap: .4rem; padding: 0 .5rem; }
  .st-bar__project { flex: 1 1 0; min-width: 0; }
  .st-bar__actions { display: none; } /* Generate and Publish stay reachable through the Design and Deliver tabs */
  .st-workspaces { flex: 0 0 auto; margin: 0; }
  .st-workspace, .st-workspace.is-active { padding: 0 .5rem; }
  .st-workspace.is-active span { display: none; }
  .st-editors { padding: 0 .4rem; }
  .plai-body--studio { overflow-x: hidden; }
}

/* ---------- The editor page: toolbar, stage, status bar ---------- */
.plai-body--studio .plai-studio-workbench.st-workbench { display: flex; flex-direction: column; gap: .75rem; min-height: calc(100dvh - var(--pl-appbar-h) - var(--st-bar-h) - var(--st-tabs-h) - 2px); padding: .85rem 1rem calc(var(--st-status-h) + 1.2rem); overflow: visible; background: transparent; }
.plai-body--studio .plai-app::before { display: none; }
.st-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 34px; }
.st-toolbar__title { display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
.st-toolbar__title h1 { margin: 0; color: #fff; font: 800 1.15rem/1.1 var(--plai-heading); letter-spacing: -.01em; }
.st-toolbar__title p { margin: 0; overflow: hidden; color: var(--st-muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.st-toolbar__actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.st-tool { display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .65rem; border: 1px solid var(--st-line); border-radius: 8px; color: #cdd5e6; background: transparent; font: 600 .74rem var(--plai-heading); cursor: pointer; list-style: none; }
.st-tool::-webkit-details-marker { display: none; }
.st-tool svg { width: 14px; height: 14px; }
.st-tool:hover { border-color: var(--st-line-strong); color: #fff; background: rgba(255,255,255,.05); }
.st-tool[hidden] { display: none; }
.st-menu { position: relative; }
.st-menu__panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 45; display: grid; gap: .3rem; width: 210px; padding: .55rem; border: 1px solid var(--st-line-strong); border-radius: 11px; background: #0e1220; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.st-menu__label { margin-top: .15rem; color: var(--st-dim); font: 700 .58rem var(--plai-heading); letter-spacing: .14em; text-transform: uppercase; }
.st-menu__row { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.plai-body--studio .st-menu__panel button { min-height: 30px; padding: .3rem .55rem; border: 1px solid var(--st-line); border-radius: 7px; color: #cdd5e6; background: transparent; font: 600 .72rem var(--plai-heading); text-align: left; cursor: pointer; }
.plai-body--studio .st-menu__panel button:hover { color: #fff; background: rgba(255,255,255,.06); }
.plai-body--studio .st-menu__panel button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); color: #fff; }
.plai-body--studio .st-menu__panel button[aria-pressed="true"]::before { content: "✓ "; color: var(--st-accent); }
.st-stage { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.plai-body--studio .st-stage > turbo-frame { display: block; min-width: 0; }

.plai-body--studio .plai-studio-bottom-sheet.st-statusbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; width: auto; max-width: none; height: var(--st-status-h); margin: 0; border-top: 1px solid var(--st-line); background: rgba(9, 12, 20, .96); backdrop-filter: blur(10px); }
.plai-body--studio .plai-studio-workbench[data-studio-dock-bottom-visible="false"] .st-statusbar { display: none; }
.st-statusbar > summary { display: none; }
.st-statusbar__inner { display: flex; align-items: center; gap: 1.1rem; height: var(--st-status-h); padding: 0 .9rem; color: var(--st-muted); font-size: .7rem; white-space: nowrap; }
.plai-body--studio .st-statusbar .plai-studio-status,
.plai-body--studio .st-statusbar .plai-studio-presence { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; box-shadow: none; font-size: inherit; }
.plai-body--studio .st-statusbar .plai-studio-presence > div { display: flex; align-items: center; gap: .45rem; }
.plai-body--studio .st-statusbar .plai-studio-presence strong { color: #cdd5e6; font-weight: 600; }
.plai-body--studio .st-statusbar .plai-studio-presence .plai-studio-muted { max-width: 34ch; margin: 0; overflow: hidden; font-size: inherit; text-overflow: ellipsis; }
.plai-body--studio .st-statusbar .plai-presence-toggle { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: inherit; font: inherit; }
.plai-body--studio .st-statusbar .plai-presence-toggle input { width: 13px; height: 13px; min-height: 0; margin: 0; padding: 0; }
.plai-body--studio .st-statusbar ul { display: none; }
.plai-body--studio .st-statusbar .plai-studio-layout-status { min-height: 0; margin: 0 0 0 auto; font-size: inherit; }
@media (max-width: 720px) { .st-statusbar .plai-studio-presence { display: none !important; } .st-toolbar__title p { display: none; } }

/* ---------- Suite look for the legacy panel classes inside the Studio (flatter, tighter, calmer) ---------- */
.plai-body--studio .plai-studio-panel,
.plai-body--studio .plai-panel { padding: .9rem 1rem; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-panel); box-shadow: none; }
.plai-body--studio .plai-studio-panel__heading h2,
.plai-body--studio .plai-studio-panel h2 { font-size: 1rem; letter-spacing: -.01em; }
.plai-body--studio .plai-kicker { font-size: .58rem; letter-spacing: .16em; }
.plai-body--studio .plai-studio-muted { color: var(--st-muted); font-size: .78rem; line-height: 1.5; }
.plai-body--studio .plai-button { min-height: 34px; padding: .45rem .85rem; border-radius: 8px; font-size: .76rem; box-shadow: none; }
.plai-body--studio .plai-button:hover { transform: none; box-shadow: none; filter: brightness(1.1); }
.plai-body--studio .plai-button--small { min-height: 30px; padding: .35rem .65rem; font-size: .72rem; }
.plai-body--studio .plai-button--quiet { border-color: var(--st-line-strong); background: transparent; }
.plai-body--studio .plai-button--quiet:hover { border-color: var(--st-accent); background: rgba(255,255,255,.04); }
.plai-body--studio .plai-studio-logic-link { display: none; } /* superseded by the editor tabs */

/* ---------- Suite utilities for dedicated Studio pages and new editors (use these, do not invent parallel ones) ---------- */
.st-page { display: flex; flex-direction: column; gap: .9rem; min-height: calc(100dvh - var(--pl-appbar-h) - var(--st-bar-h) - var(--st-tabs-h) - 2px); padding: .9rem 1rem 2.5rem; color: var(--st-text); }
.st-page--narrow { max-width: 1080px; width: 100%; margin: 0 auto; }
.st-page__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.st-page__head h1 { margin: 0; color: #fff; font: 800 1.15rem/1.1 var(--plai-heading); letter-spacing: -.01em; }
.st-page__head p { margin: .2rem 0 0; color: var(--st-muted); font-size: .8rem; }
.st-page__actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.st-subtabs { display: flex; gap: .25rem; padding: 3px; border: 1px solid var(--st-line); border-radius: 9px; width: max-content; max-width: 100%; overflow-x: auto; }
.st-subtab { display: inline-flex; align-items: center; gap: .4rem; height: 28px; padding: 0 .7rem; border-radius: 6px; color: var(--st-muted); font: 600 .74rem var(--plai-heading); white-space: nowrap; }
.st-subtab:hover { color: #fff; }
.st-subtab.is-active { color: #fff; background: rgba(255,255,255,.1); }
.st-card { padding: .9rem 1rem; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-panel); }
.st-card--raised { background: var(--st-raised); }
.st-card__title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .6rem; color: #fff; font: 700 .9rem var(--plai-heading); }
.st-card__title small { color: var(--st-muted); font: 500 .72rem var(--plai-body); }
.st-grid { display: grid; gap: .85rem; }
.st-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.st-split { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: .85rem; align-items: start; }
.st-split--inspector { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.st-split--three { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(280px, 340px); }
@media (max-width: 1000px) { .st-grid--2, .st-grid--3, .st-grid--4, .st-split, .st-split--inspector, .st-split--three { grid-template-columns: minmax(0, 1fr); } }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 32px; padding: 0 .8rem; border: 1px solid var(--st-line-strong); border-radius: 8px; color: #dbe2f2; background: transparent; font: 650 .76rem var(--plai-heading); cursor: pointer; white-space: nowrap; }
.st-btn svg { width: 14px; height: 14px; }
.st-btn:hover { border-color: var(--st-accent); color: #fff; }
.st-btn[disabled], .st-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.st-btn--primary { border-color: transparent; color: var(--st-accent-ink); background: var(--st-accent); }
.st-btn--primary:hover { color: var(--st-accent-ink); filter: brightness(1.1); }
.st-btn--magic { border-color: transparent; color: #fff; background: var(--st-gradient); }
.st-btn--magic:hover { color: #fff; filter: brightness(1.12); }
.st-btn--danger { border-color: rgba(251,113,133,.4); color: #ffc2cb; }
.st-btn--block { width: 100%; }
.st-field { display: grid; gap: .3rem; color: #cdd5e6; font: 600 .72rem var(--plai-heading); }
.st-field small { color: var(--st-muted); font: 400 .72rem var(--plai-body); }
.st-input, .st-field input[type="text"], .st-field input[type="number"], .st-field input[type="search"], .st-field input[type="email"], .st-field input[type="date"], .st-field select, .st-field textarea { width: 100%; min-height: 34px; padding: .45rem .65rem; border: 1px solid var(--st-line-strong); border-radius: 8px; color: var(--st-text); background: #0a0d16; font: 400 .82rem var(--plai-body); }
.st-field textarea { min-height: 84px; line-height: 1.5; resize: vertical; }
.st-input:focus, .st-field input:focus, .st-field select:focus, .st-field textarea:focus { border-color: var(--st-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 22%, transparent); }
.st-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.st-row--between { justify-content: space-between; }
.st-stack { display: grid; gap: .6rem; }
.st-chip { display: inline-flex; align-items: center; gap: .3rem; height: 20px; padding: 0 .5rem; border: 1px solid var(--st-line-strong); border-radius: 999px; color: #cdd5e6; font: 700 .6rem var(--plai-heading); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.st-chip--accent { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); color: var(--st-accent); }
.st-chip--ok { border-color: rgba(74,222,128,.45); color: var(--st-ok); }
.st-chip--warn { border-color: rgba(251,191,36,.45); color: var(--st-warn); }
.st-chip--danger { border-color: rgba(251,113,133,.45); color: var(--st-danger); }
.st-muted { color: var(--st-muted); font-size: .78rem; line-height: 1.5; }
.st-empty { display: grid; justify-items: center; gap: .55rem; padding: 2.2rem 1rem; border: 1px dashed var(--st-line-strong); border-radius: var(--st-radius); color: var(--st-muted); font-size: .82rem; text-align: center; }
.st-empty strong { color: #fff; font: 700 .95rem var(--plai-heading); }
.st-empty svg { width: 26px; height: 26px; color: var(--st-accent); }
.st-list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.st-list__item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .65rem; border: 1px solid var(--st-line); border-radius: 8px; background: rgba(255,255,255,.015); font-size: .82rem; }
.st-list__item:hover { border-color: var(--st-line-strong); }
.st-list__item.is-active { border-color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 9%, transparent); }
.st-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--st-line); border-radius: 8px; background: #05070c; object-fit: cover; }
.st-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.st-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--st-accent); }
.st-progress--0 > span { width: 0; } .st-progress--10 > span { width: 10%; } .st-progress--20 > span { width: 20%; } .st-progress--30 > span { width: 30%; } .st-progress--40 > span { width: 40%; } .st-progress--50 > span { width: 50%; } .st-progress--60 > span { width: 60%; } .st-progress--70 > span { width: 70%; } .st-progress--80 > span { width: 80%; } .st-progress--90 > span { width: 90%; } .st-progress--100 > span { width: 100%; }
.st-notice { padding: .6rem .8rem; border: 1px solid color-mix(in srgb, var(--st-accent) 40%, transparent); border-radius: 8px; color: #dbe2f2; background: color-mix(in srgb, var(--st-accent) 8%, transparent); font-size: .8rem; }
.st-notice--warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.07); }
.st-notice--danger { border-color: rgba(251,113,133,.4); background: rgba(251,113,133,.07); }
.st-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--st-accent); border-radius: 50%; animation: st-spin .8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
/* The generate box: a prompt, a magic button, a status line. Shared by every "generate" affordance (text, image, video). */
.st-gen { display: grid; gap: .5rem; padding: .7rem; border: 1px solid color-mix(in srgb, #8b5cf6 45%, transparent); border-radius: var(--st-radius); background: linear-gradient(135deg, rgba(0,229,255,.05), rgba(139,92,246,.07) 55%, rgba(241,7,163,.05)); }
.st-gen__label { display: flex; align-items: center; gap: .4rem; color: #fff; font: 700 .76rem var(--plai-heading); }
.st-gen__label svg { width: 14px; height: 14px; color: #c4b5fd; }
.st-gen textarea, .st-gen input[type="text"] { width: 100%; min-height: 34px; padding: .45rem .65rem; border: 1px solid var(--st-line-strong); border-radius: 8px; color: var(--st-text); background: rgba(5,7,12,.7); font: 400 .82rem var(--plai-body); }
.st-gen textarea { min-height: 64px; resize: vertical; }
.st-gen__status { min-height: 1.1em; color: var(--st-muted); font-size: .74rem; }
.st-gen__status.is-error { color: #ffb4c0; }
.st-gen.is-busy .st-btn--magic { opacity: .6; pointer-events: none; }

/* ---------- Full viewport and full screen (focus_mode_controller.js) ---------- */
.st-editors__view { display: flex; align-items: center; gap: .2rem; margin-left: auto; padding-left: .6rem; }
.st-viewbtn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; color: var(--st-muted); background: transparent; cursor: pointer; }
.st-viewbtn:hover { color: #fff; background: rgba(255,255,255,.08); }
.st-viewbtn svg { width: 15px; height: 15px; }
.st-focusbar { display: none; }
.st-focus .pl-appbar, .st-focus .st-chrome { display: none; }
.st-focus { --pl-appbar-h: 0px; --st-bar-h: 0px; --st-tabs-h: 0px; }
.st-focus .st-focusbar { position: fixed; top: 8px; right: 10px; z-index: 80; display: flex; align-items: center; gap: .35rem; padding: 4px 4px 4px 12px; border: 1px solid var(--st-line-strong); border-radius: 999px; background: rgba(11, 14, 23, .92); box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(10px); opacity: .55; transition: opacity var(--plai-transition); }
.st-focus .st-focusbar:hover, .st-focus .st-focusbar:focus-within { opacity: 1; }
.st-focusbar__title { max-width: 32ch; overflow: hidden; color: var(--st-muted); font: 600 .7rem var(--plai-heading); text-overflow: ellipsis; white-space: nowrap; }
.st-focusbar__exit { display: inline-flex; align-items: center; gap: .35rem; height: 28px; padding: 0 .75rem; border: 0; border-radius: 999px; color: var(--st-accent-ink); background: var(--st-accent); font: 700 .72rem var(--plai-heading); cursor: pointer; }
.st-focusbar__exit svg { width: 13px; height: 13px; }
@media (max-width: 640px) { .st-focusbar__title { display: none; } }

/* The fixed status bar must never cover the control that has keyboard focus (WCAG 2.4.11). */
html:has(body.plai-body--studio) { scroll-padding-bottom: calc(var(--st-status-h) + 1rem); }