:root {
    --bg: #0b0b12;
    --bg-2: #12121a;
    --bg-3: #1a1a24;
    --ink: #f4f2ff;
    --muted: #9b97ad;
    --accent: #8b5cf6;
    --accent-2: #c4b5fd;
    --gold: var(--accent);
    --gold-2: var(--accent-2);
    --line: rgba(139, 92, 246, 0.22);
    --danger: #f07167;
    --ok: #4ade80;
    --track-v: #7c3aed;
    --track-d: #3b82f6;
    --track-m: #22c55e;
    --track-x: #f59e0b;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    --serif: "Manrope", "Segoe UI", sans-serif;
    --sans: "Manrope", "Segoe UI", sans-s erif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: radial-gradient(
            1200px 600px at 80% -10%,
            rgba(139, 92, 246, 0.16),
            transparent 50%
        ),
        radial-gradient(
            900px 500px at 0% 20%,
            rgba(76, 29, 149, 0.2),
            transparent 46%
        ),
        var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    letter-spacing: 0.01em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
    color: inherit;
    text-decoration: none;
}
img {
    max-width: 100%;
    display: block;
}
button,
input {
    font: inherit;
}

.wrap {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(16px);
    background: rgba(10, 9, 8, 0.72);
    border-bottom: 1px solid var(--line);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mark {
    width: 34px;
    height: 34px;
    border: 1px solid var(--gold);
    display: grid;
    place-items: center;
    color: var(--gold);
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
}

.brand-name {
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1;
}

.brand-name span {
    display: block;
    margin-top: 3px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links a {
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a.is-active {
    color: var(--ink);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--gold-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn[hidden] {
    display: none !important;
}

.btn:hover {
    background: var(--accent);
    color: #fff;
}

.btn-solid {
    background: var(--accent);
    color: #fff;
}

.btn-solid:hover {
    background: #7c3aed;
    color: #fff;
}

.btn-ghost {
    border-color: transparent;
    color: var(--ink);
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
}

.hero {
    padding: 92px 0 72px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}

.kicker {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 500;
    margin: 0;
}

.hero h1 {
    font-size: clamp(46px, 7vw, 86px);
    line-height: 0.92;
    max-width: 12ch;
}

.hero p.lead {
    margin: 24px 0 32px;
    max-width: 46ch;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-card {
    border: 1px solid var(--line);
    background: linear-gradient(
        180deg,
        rgba(27, 24, 20, 0.9),
        rgba(10, 9, 8, 0.9)
    );
    padding: 28px;
    box-shadow: var(--shadow);
}

.hero-card small {
    color: var(--gold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 11px;
}

.hero-card ol {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.hero-card li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.hero-card li strong {
    color: var(--ink);
    min-width: 28px;
    font-weight: 600;
}

.section {
    padding: 80px 0;
}
.section-head {
    max-width: 640px;
    margin-bottom: 36px;
}

.section h2 {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1;
}

.section-head p {
    color: var(--muted);
    line-height: 1.7;
    margin-top: 14px;
}

.grid-5,
.grid-3,
.grid-2,
.grid-4 {
    display: grid;
    gap: 16px;
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 1200px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card {
    border: 1px solid var(--line);
    background: rgba(19, 17, 14, 0.8);
    padding: 22px;
    min-height: 180px;
}

.card em {
    display: block;
    font-style: normal;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.card h3 {
    font-size: 28px;
    margin-bottom: 10px;
}
.card p {
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    font-size: 14px;
}

.pipeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.pipe {
    border-top: 2px solid var(--gold);
    padding-top: 14px;
}

.pipe span {
    display: block;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.pipe strong {
    display: block;
    font-size: 15px;
}

.price {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price .tag {
    margin-top: 22px;
    color: var(--gold-2);
    font-size: 13px;
}

.plan-cycle {
    display: inline-flex;
    margin-top: 20px;
    border: 1px solid var(--line);
}

.plan-cycle button {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    cursor: pointer;
}

.plan-cycle button.is-on {
    background: var(--gold);
    color: #111;
}

.plan-group {
    margin: 32px 0 14px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.folder-grid + .plan-group {
    margin-top: 28px;
}

.plan-card.is-hot {
    border-color: var(--gold);
}

.plan-features {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.plan-features li {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    padding: 7px 0;
    border-top: 1px solid var(--line);
}

.plan-pay strong {
    display: block;
    margin-top: 18px;
    font-size: 22px;
}

.plan-pay span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.plan-ask {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

[data-plans][data-cycle="monthly"] [data-when="yearly"],
[data-plans][data-cycle="yearly"] [data-when="monthly"] {
    display: none !important;
}

.field small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.auth-shell {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-visual {
    padding: 72px 64px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.auth-visual h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.95;
    max-width: 10ch;
}

.auth-visual p {
    color: var(--muted);
    max-width: 36ch;
    line-height: 1.7;
}

.auth-form {
    padding: 72px 64px;
    display: flex;
    align-items: center;
}

.form-box {
    width: min(420px, 100%);
}

.form-box h2 {
    font-size: 42px;
    margin-bottom: 8px;
}
.form-box .sub {
    color: var(--muted);
    margin-bottom: 28px;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.field input,
.field select,
.field textarea,
.inline-add input,
.inline-add select,
.note input,
.note textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: #12121a;
    color: var(--ink);
    outline: none;
}

.field textarea,
.note textarea,
.script-box {
    min-height: 120px;
    resize: vertical;
}

.script-box {
    min-height: 520px;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.65;
    background: var(--bg-2);
    color: var(--ink);
    caret-color: var(--ink);
    outline: none;
}

.script-box::placeholder {
    color: var(--muted);
    opacity: 1;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.script-box:focus {
    border-color: var(--gold);
}

.mix {
    margin: 8px 0 0;
}

.mix .prod-head {
    margin-bottom: 6px;
}

.scr-scale {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.mix-grid {
    display: grid;
    gap: 5px;
}

.mix-row {
    display: grid;
    grid-template-columns: 72px 1fr 28px 58px;
    gap: 0 8px;
    align-items: center;
    padding: 2px 4px;
    border-radius: 4px;
}

.mix-row[data-mix-level="zero"] {
    background: color-mix(in srgb, #c45c5c 12%, transparent);
}

.mix-row[data-mix-level="high"] {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.mix-row[data-mix-level="dom"] {
    background: color-mix(in srgb, var(--gold) 26%, transparent);
}

.mix-row label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mix-row [data-mix-val] {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--gold);
    text-align: right;
}

.mix-row [data-mix-tag] {
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
    color: var(--muted);
    white-space: nowrap;
}

.mix-row[data-mix-level="zero"] [data-mix-tag],
.mix-row[data-mix-level="zero"] [data-mix-val] {
    color: #c45c5c;
}

.mix-row[data-mix-level="high"] [data-mix-tag],
.mix-row[data-mix-level="high"] [data-mix-val] {
    color: var(--gold);
    font-weight: 600;
}

.mix-row[data-mix-level="dom"] [data-mix-tag],
.mix-row[data-mix-level="dom"] [data-mix-val] {
    color: var(--gold);
    font-weight: 700;
}

.mix-row[data-mix-level="zero"] input[type="range"] {
    accent-color: #c45c5c;
}

.mix-row input[type="range"] {
    width: 100%;
    min-height: 0;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--gold);
    cursor: pointer;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    margin: 8px 0 22px;
}

.form-error,
.alert {
    border: 1px solid rgba(212, 106, 92, 0.4);
    background: rgba(212, 106, 92, 0.08);
    color: #f0c2bc;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.switch {
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
}
.switch a {
    color: var(--gold-2);
}

.studio-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
}

.user-meta a {
    color: var(--muted);
    text-decoration: none;
}
.user-meta a:hover {
    color: var(--gold);
}
.admin-nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
}
.admin-nav a:hover {
    color: var(--gold);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
}
.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.admin-table small {
    display: block;
    color: var(--muted);
}
.admin-split {
    align-items: start;
    margin-top: 28px;
}
.inline-search {
    display: flex;
    gap: 8px;
}
.inline-search input {
    min-width: 200px;
}
.ai-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.badge.is-on {
    background: rgba(143, 186, 122, 0.12);
    border-color: var(--ok);
    color: var(--ok);
}
.ai-form .block {
    margin-bottom: 28px;
}
.ai-form .field small {
    display: block;
    margin-top: 6px;
}
.user-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--muted);
    font-size: 14px;
}

.badge {
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 8px;
}

.empty {
    border: 1px dashed var(--line);
    padding: 48px 28px;
    text-align: center;
}

.empty h3 {
    font-size: 36px;
    margin-bottom: 10px;
}
.empty p {
    color: var(--muted);
}
.empty .btn {
    margin-top: 18px;
}

.project-list {
    display: grid;
    gap: 14px;
}

.project {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 18px;
    align-items: center;
    border: 1px solid var(--line);
    padding: 18px 20px;
    background: rgba(19, 17, 14, 0.75);
}

.project b {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
}
.project p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.site-footer {
    border-top: 1px solid var(--line);
    padding: 28px 0 40px;
    color: var(--muted);
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.letterbox {
    height: 18px;
    background: #000;
}

.split-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
}

.alert-ok {
    border: 1px solid rgba(143, 186, 122, 0.35);
    background: rgba(143, 186, 122, 0.08);
    color: #d8ebcc;
    padding: 10px 12px;
    margin-bottom: 18px;
    font-size: 14px;
}

.crumb {
    display: flex;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 22px;
}

.crumb a:hover {
    color: var(--gold-2);
}

.block {
    margin: 36px 0 8px;
}

.block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.block-head h3 {
    font-size: 32px;
}

.folder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.folder-card {
    border: 1px solid var(--line);
    background: rgba(19, 17, 14, 0.8);
    padding: 20px;
    min-height: 150px;
}

.folder-card em {
    display: block;
    color: var(--gold);
    letter-spacing: 0.16em;
    font-size: 11px;
    margin-bottom: 10px;
}

.folder-card strong {
    display: block;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
}

.folder-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 0;
}

.folder-card:hover {
    border-color: var(--gold);
}

.cast-card {
    display: flex;
    flex-direction: column;
    padding: 14px;
}

.cast-card > a:first-child {
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.cast-card .btn {
    margin-top: 12px;
    align-self: flex-start;
}

.season-list {
    display: grid;
    gap: 14px;
}

.ep-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.ep-switch a {
    border: 1px solid var(--line);
    background: rgba(19, 17, 14, 0.72);
    color: var(--ink);
    padding: 8px 12px;
    font-size: 13px;
    text-decoration: none;
}

.ep-switch a.is-on {
    border-color: var(--gold);
    color: var(--gold);
}

.season {
    border: 1px solid var(--line);
    background: rgba(19, 17, 14, 0.72);
}

.season header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.season header em {
    display: block;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.season header b {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
}

.season ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.season li {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid rgba(139, 92, 246, 0.08);
    color: var(--ink);
}

.season li small {
    color: var(--muted);
}

.modal {
    border: 1px solid var(--line);
    background: #14141e;
    color: var(--ink);
    width: min(760px, calc(100% - 32px));
    padding: 0;
    box-shadow: var(--shadow);
}

.modal::backdrop {
    background: rgba(4, 3, 2, 0.72);
}

.modal-card {
    padding: 28px;
}

.create-flow {
    width: min(840px, calc(100% - 32px));
    border-radius: 18px;
}

.create-flow .modal-card {
    min-height: min(720px, calc(100dvh - 48px));
    display: flex;
    flex-direction: column;
}
.create-flow .kicker span {
    margin-left: 8px;
    color: var(--muted);
}
.create-step {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.create-step[hidden] {
    display: none;
}
.type-grid.create-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.create-type-grid .type-card {
    min-height: 132px;
    border-radius: 12px;
}
.create-brief-field textarea {
    min-height: 150px;
    font-size: 16px;
    line-height: 1.55;
    resize: vertical;
}
.create-brief-field small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
}
.create-voice-box {
    position: relative;
}
.create-voice-box textarea {
    padding-bottom: 58px;
}
.create-voice-button {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid rgba(120, 103, 242, 0.5);
    border-radius: 999px;
    background: rgba(20, 20, 30, 0.94);
    color: var(--accent-2, #c8c2ff);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.create-voice-button svg {
    width: 17px;
    height: 17px;
}
.create-voice-button:hover {
    border-color: var(--accent, #7867f2);
    background: rgba(120, 103, 242, 0.16);
}
.create-voice-button:focus-visible {
    outline: 2px solid var(--accent, #7867f2);
    outline-offset: 2px;
}
.create-voice-button.is-listening {
    border-color: #f07167;
    background: rgba(240, 113, 103, 0.18);
    color: #ffd4cf;
    box-shadow: 0 0 0 4px rgba(240, 113, 103, 0.1);
}
.create-brief-help {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.create-voice-status {
    color: var(--accent-2, #c8c2ff) !important;
    text-align: right;
}
.create-duration {
    margin-top: 16px;
}
.create-advanced {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.create-advanced summary {
    padding: 13px 15px;
    color: var(--ink);
    cursor: pointer;
}
.create-advanced .field {
    padding: 0 15px 15px;
}
.create-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--line);
}
.create-nav > :last-child,
.create-nav > [data-create-next] {
    margin-left: auto;
}
.create-dots {
    display: flex;
    gap: 6px;
}
.create-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.25);
}
.create-dots i.is-on {
    width: 22px;
    border-radius: 99px;
    background: var(--gold);
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.modal-head h2 {
    font-size: 40px;
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.type-card {
    border: 1px solid var(--line);
    padding: 14px 12px;
    cursor: pointer;
    min-height: 118px;
}

.type-card input {
    display: none;
}

.type-card span {
    display: block;
    font-family: var(--serif);
    font-size: 22px;
    margin-bottom: 8px;
}

.type-card small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.type-card:has(input:checked) {
    border-color: var(--gold);
    background: rgba(139, 92, 246, 0.08);
}

.genre-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: min(38vh, 280px);
    overflow: auto;
    padding: 2px;
}

.genre-picks label {
    display: block;
    cursor: pointer;
    margin: 0;
}

.genre-picks input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.genre-picks span {
    display: block;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #16161f;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.genre-picks label:has(input:checked) span {
    border-color: var(--gold);
    background: rgba(139, 92, 246, 0.16);
    color: var(--ink);
}

.genre-hint {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
}

.side-card {
    border: 1px solid var(--line);
    background: rgba(19, 17, 14, 0.8);
    padding: 22px;
    align-self: start;
}

.side-card h3 {
    font-size: 28px;
    margin-bottom: 16px;
}

.extract-row {
    margin-top: 14px;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.media-card img,
.still {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 12px;
    border: 1px solid var(--line);
}

.still {
    height: 260px;
}

.still-face,
.still-empty.still-face {
    width: min(100%, 340px);
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 18%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
}

img.still-face {
    display: block;
}

.media-card.is-face img {
    height: auto;
    aspect-ratio: 3 / 4;
    object-position: center 18%;
}

.still-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--line);
    color: var(--muted);
    margin-bottom: 14px;
}

.location-add {
    grid-template-columns: 1.2fr 0.8fr 0.7fr 1.2fr auto;
}

.side-card .sub {
    color: var(--muted);
    font-size: 13px;
    margin-top: 12px;
}

.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.board-card {
    border: 1px solid var(--line);
    background: rgba(19, 17, 14, 0.82);
    padding: 12px;
}

.board-num {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.board-card img,
.board-card .still-empty {
    height: 150px;
    margin-bottom: 10px;
}

.board-card form {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.board-card input,
.board-card select,
.board-card textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    background: #12121a;
    color: var(--ink);
}

.board-card textarea {
    min-height: 72px;
}
.board-card small {
    color: var(--muted);
}

.video-form {
    margin-bottom: 28px;
}
.video-list {
    display: grid;
    gap: 16px;
}
.video-card {
    border: 1px solid var(--line);
    background: rgba(19, 17, 14, 0.8);
    padding: 18px;
}
.video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.video-meta em {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.video-card p {
    margin: 0 0 8px;
}
.video-card small {
    color: var(--muted);
    display: block;
    margin-bottom: 12px;
}
.video-card video {
    width: 100%;
    max-height: 360px;
    margin: 10px 0;
    background: #000;
}
.video-card audio {
    width: 100%;
    margin: 10px 0;
}
.audio-forms {
    align-items: start;
}
.edit-hint {
    color: var(--muted);
    max-width: 52rem;
}
.edit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.edit-list li {
    border: 1px solid var(--line);
    background: rgba(19, 17, 14, 0.8);
    padding: 14px 16px;
    display: grid;
    gap: 4px;
}
.edit-list em {
    color: var(--gold);
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0.06em;
}
.edit-list span {
    color: var(--ink);
    font-size: 14px;
}
.edit-list small {
    color: var(--muted);
}
.take-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
.take-card {
    text-decoration: none;
    color: inherit;
}
.field-label {
    margin: 8px 0 10px;
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.frame-grid {
    grid-template-columns: 1fr 1fr;
}
.frame-preview {
    display: block;
    margin-top: 10px;
    border: 1px solid var(--gold);
    background: rgba(139, 92, 246, 0.08);
}
.frame-preview.yatay {
    width: 64px;
    height: 36px;
}
.frame-preview.dikey {
    width: 28px;
    height: 50px;
}
.guide-next {
    display: grid;
    gap: 6px;
    margin-bottom: 22px;
    padding: 22px 24px;
    border: 1px solid var(--gold);
    background: rgba(139, 92, 246, 0.08);
    text-decoration: none;
    color: inherit;
}
.guide-next em {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.guide-next strong {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
}
.guide-next p {
    margin: 0 0 10px;
    color: var(--muted);
}
.guide-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.guide-list li {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
}
.guide-list li.is-done {
    opacity: 0.55;
}
.guide-list span {
    color: var(--gold);
    letter-spacing: 0.08em;
}
.guide-list b {
    display: block;
}
.guide-list small {
    color: var(--muted);
}
.is-vertical .video-card video,
.is-vertical .video-card img,
.is-vertical .board-card img,
.is-vertical .take-stage img,
.is-vertical .take-card img {
    aspect-ratio: 9 / 16;
    max-height: 520px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    margin-inline: auto;
}
.take-card img,
.take-stage img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    margin: 10px 0;
    background: #000;
}
@media (max-width: 800px) {
    .take-stage {
        grid-template-columns: 1fr;
    }
}

.inline-add {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.6fr auto;
    gap: 10px;
    margin-bottom: 22px;
}

.form-wide {
    max-width: 820px;
}

.note-list {
    display: grid;
    gap: 12px;
}

.note {
    border: 1px solid var(--line);
    padding: 14px;
    background: rgba(19, 17, 14, 0.75);
}

.note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    color: var(--muted);
}

@media (max-width: 960px) {
    .hero,
    .auth-shell,
    .grid-5,
    .grid-4,
    .grid-3,
    .grid-2,
    .pipeline,
    .project,
    .folder-grid,
    .type-grid,
    .split-head,
    .inline-add,
    .location-add,
    .board {
        grid-template-columns: 1fr;
    }

    .split-head {
        align-items: flex-start;
    }

    .nav-toggle {
        display: grid;
        place-items: center;
    }

    .nav-links {
        display: none;
        position: absolute;
        inset: 76px 20px auto;
        background: #16161f;
        border: 1px solid var(--line);
        padding: 18px;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-links.is-open {
        display: flex;
    }

    .auth-visual,
    .auth-form {
        padding: 36px 0 56px;
    }
    .auth-visual {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

/* Uygulama kabuğu — tarayıcıda masaüstü düzenleyici */
.app-html,
.app-body {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.app-body {
    background: #0b0b12;
}

.app-body::before {
    opacity: 0.03;
}

.app {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 56px minmax(0, 1fr) 26px;
    height: 100%;
    min-height: 0;
}

.app-bar {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 0 14px;
    background: #101018;
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
    z-index: 30;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.app-brand strong {
    font-size: 14px;
    font-weight: 700;
}
.app-brand small {
    color: var(--accent-2);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-mark {
    width: 28px;
    height: 28px;
    border: 1px solid var(--accent);
    display: grid;
    place-items: center;
    color: var(--accent-2);
    font-size: 15px;
    font-weight: 700;
}

.app-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.app-tabs::-webkit-scrollbar {
    display: none;
}

.app-tabs a {
    padding: 8px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.app-tabs a:hover {
    color: var(--ink);
}
.app-tabs a.is-on {
    color: var(--accent-2);
    border-bottom-color: var(--accent);
}

.app-tabs a.is-held {
    color: var(--ink);
}

.app-ai {
    min-height: 32px;
    padding: 0 12px;
    font-size: 11px;
}

.app-doc {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.app-doc em {
    font-style: normal;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-doc strong {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-doc span {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
}

.app-spend {
    position: relative;
    flex-shrink: 0;
}

.app-spend summary {
    list-style: none;
    display: grid;
    gap: 0;
    padding: 4px 10px;
    min-width: 108px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 10px;
    background: #16161f;
    cursor: pointer;
    line-height: 1.15;
}

.app-spend summary::-webkit-details-marker {
    display: none;
}

.app-spend summary em {
    font-style: normal;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-spend summary strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.app-spend summary small {
    color: var(--gold);
    font-size: 10px;
}

.app-spend[open] summary {
    border-color: var(--gold);
}

.app-spend-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 240px;
    padding: 12px;
    background: #16161f;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    z-index: 80;
}

.app-spend-panel p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 11px;
}

.app-spend-panel div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--ink);
}

.app-spend-panel div + div {
    border-top: 1px solid rgba(139, 92, 246, 0.12);
}

.app-spend-panel i {
    font-style: normal;
    color: var(--muted);
}

.app-spend-panel b {
    font-weight: 650;
}

.app-spend-total {
    margin-top: 4px;
    padding-top: 8px !important;
    border-top: 1px solid rgba(139, 92, 246, 0.28) !important;
    font-weight: 600;
}

.app-spend-empty {
    color: var(--muted);
    font-size: 12px;
}

.app-user a:hover {
    color: var(--gold);
}
.app-user em {
    font-style: normal;
    color: var(--ink);
}

.app-quit {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.app-quit:hover {
    color: var(--ink);
}

.app-work {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: hidden;
}

.app-rail {
    overflow: auto;
    background: #14141c;
    border-right: 1px solid rgba(139, 92, 246, 0.18);
    padding: 8px 6px;
}

.rail-rule {
    height: 1px;
    background: rgba(139, 92, 246, 0.18);
    margin: 6px 8px;
}

.rail-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    color: var(--muted);
    font-size: 12px;
    border-radius: 2px;
}

.rail-item em {
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(139, 92, 246, 0.28);
    width: 28px;
    height: 22px;
    display: grid;
    place-items: center;
}

.rail-item small {
    color: #6f675c;
    font-size: 10px;
}
.rail-item:hover {
    background: rgba(139, 92, 246, 0.06);
    color: var(--ink);
}
.rail-item.is-on {
    background: rgba(139, 92, 246, 0.12);
    color: var(--ink);
}
.rail-item.is-child {
    padding-left: 18px;
    opacity: 0.92;
}

.app-canvas {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #181822 0%, #101018 80%);
}

.app-scroll {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 22px 28px;
}

.app-body.is-start,
.app-html:has(.is-start) {
    height: auto;
    max-height: none;
    overflow: auto;
}

.app-body.is-start .app {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 56px auto 26px;
}

.app-body.is-start .app-work,
.app-body.is-start .app-canvas {
    overflow: visible;
}

.app-body.is-start .app-scroll {
    position: static;
    overflow: visible;
}

.app-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 12px;
    background: #101018;
    border-top: 1px solid rgba(139, 92, 246, 0.18);
    color: #7a7266;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.is-desk .crumb {
    display: none;
}
.is-desk .section {
    padding: 0;
}
.is-desk .section-head {
    max-width: none;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.is-desk .section-head h2 {
    font-size: 26px;
}
.is-desk .section-head p {
    margin-top: 6px;
    font-size: 13px;
}
.is-desk .kicker {
    margin-bottom: 6px;
}
.is-desk .block {
    margin: 18px 0;
}
.is-desk .block-head h3 {
    font-size: 22px;
}
.is-desk .script-box {
    min-height: calc(100vh - 220px);
}
.scr .script-box {
    min-height: 0;
}

.start-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 22px;
}

.start-head h2 {
    font-size: 36px;
}
.start-head p {
    color: var(--muted);
    margin: 8px 0 0;
}

.start-create-button {
    display: grid;
    grid-template-columns: 36px auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    min-width: 250px;
    min-height: 62px;
    padding: 10px 18px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(120, 103, 242, 0.28);
}
.start-create-button > span {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}
.start-create-button strong {
    align-self: end;
    font-size: 14px;
    line-height: 1.2;
}
.start-create-button small {
    align-self: start;
    color: rgba(12, 11, 18, 0.72);
    font-size: 10px;
    line-height: 1.2;
}
.start-empty-create {
    min-height: 48px;
    padding-inline: 22px;
}

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.doc-card {
    border: 1px solid var(--line);
    background: #1a1a24;
    overflow: hidden;
}

.doc-card:hover {
    border-color: var(--gold);
}

.doc-preview {
    display: grid;
    place-items: center;
    background: #0c0c14;
    border-bottom: 1px solid var(--line);
    color: var(--gold);
    letter-spacing: 0.16em;
    font-size: 11px;
}

.doc-preview.is-landscape {
    aspect-ratio: 16 / 9;
}
.doc-preview.is-portrait {
    aspect-ratio: 9 / 16;
    max-height: 200px;
    margin: 0 auto;
    width: 42%;
}

.doc-meta {
    padding: 12px 14px 16px;
}
.doc-meta em {
    display: block;
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.doc-meta b {
    display: block;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
}
.doc-meta small {
    color: var(--muted);
}

.desk {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    min-height: calc(100vh - 160px);
}

.desk-stage {
    display: grid;
    place-items: center;
    background: repeating-conic-gradient(#14141c 0% 25%, #101018 0% 50%) 0 0 /
        18px 18px;
    border: 1px solid rgba(139, 92, 246, 0.18);
    padding: 28px;
}

.stage-frame {
    background: #0b0b12;
    border: 1px solid var(--gold);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.stage-frame.is-landscape {
    width: min(100%, 720px);
    aspect-ratio: 16 / 9;
}
.stage-frame.is-portrait {
    width: min(42%, 280px);
    aspect-ratio: 9 / 16;
}

.stage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}

.stage-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stage-empty {
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 24px;
    gap: 6px;
}

.stage-empty b {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
}

.stage-empty span {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.stage-empty p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    max-width: 36ch;
}

.desk-inspector {
    border: 1px solid rgba(139, 92, 246, 0.18);
    background: #14141c;
    overflow: auto;
}

.insp-block {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
}
.insp-block h3 {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.insp-block dl {
    margin: 0;
    display: grid;
    gap: 8px;
}
.insp-block dt {
    color: var(--muted);
    font-size: 11px;
}
.insp-block dd {
    margin: 2px 0 0;
    font-size: 14px;
}

.insp-row {
    margin-bottom: 8px;
}

.insp-season {
    margin-top: 10px;
}
.insp-season header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.insp-season header b {
    font-size: 13px;
}
.insp-season a {
    display: block;
    padding: 6px 0;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid rgba(139, 92, 246, 0.08);
}
.insp-season a:hover {
    color: var(--ink);
}

.app-mini {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--gold);
    font: inherit;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px;
    cursor: pointer;
}

.app-mini:hover {
    border-color: var(--gold);
}

.desk-bin {
    margin-top: 18px;
}
.desk-bin h3 {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.bin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.bin-grid img,
.bin-grid video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
    border: 1px solid var(--line);
}

.is-vertical .bin-grid img,
.is-vertical .bin-grid video,
.is-vertical .stage-grid img {
    aspect-ratio: 9 / 16;
}

.app-scroll:has(.prod),
.app-scroll:has(.scr) {
    padding: 0;
}

.app-scroll:has(.scr) {
    overflow: hidden;
}

.app-scroll:has(.prod) {
    overflow: hidden;
}

.prod {
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--rail-bottom, 228px);
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.prod.is-docked {
    grid-template-rows: minmax(0, 1fr) var(--rail-bottom, 320px);
}

.prod-main {
    display: grid;
    grid-template-columns: var(--rail-left, 220px) minmax(0, 1fr) var(
            --rail-right,
            260px
        );
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: start;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
}

.prod-main.is-left-off {
    grid-template-columns: 36px minmax(0, 1fr) var(--rail-right, 260px);
}
.prod-main.is-right-off {
    grid-template-columns: var(--rail-left, 220px) minmax(0, 1fr) 36px;
}
.prod-main.is-left-off.is-right-off {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
}

.prod-col {
    position: relative;
    z-index: 2;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: #14141c;
    border-right: 1px solid rgba(139, 92, 246, 0.18);
    padding: 10px;
}

.prod-right {
    border-right: 0;
    border-left: 1px solid rgba(139, 92, 246, 0.18);
}

.prod-head,
.prod-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.prod-head b,
.prod-tabs b,
.prod-meta b {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.prod-ep {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 6;
}

.prod-head select {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 32px;
    padding: 4px 8px;
    background: #12121a;
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: 12px;
    cursor: pointer;
}

.prod-add {
    margin-bottom: 8px;
    flex-shrink: 0;
}
.prod-add button,
.prod-tabs a {
    border: 0;
    background: transparent;
    color: var(--gold);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.prod-scenes {
    display: grid;
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
}

.prod-scene {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border-radius: 9px;
    border: 1px solid transparent;
    color: var(--muted);
}

.prod-scene em {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.08em;
}
.prod-scene strong {
    color: var(--ink);
    font-size: 13px;
}
.prod-scene small {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
}
.prod-scene.is-on,
.prod-scene:hover {
    border-color: var(--gold);
    background: rgba(139, 92, 246, 0.08);
}

.prod-meta {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(139, 92, 246, 0.18);
    color: var(--muted);
    font-size: 12px;
    flex-shrink: 0;
}

.prod-meta p {
    margin: 4px 0;
}

.prod-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding: 12px 16px 28px;
}

.prod-stage > .alert-ok,
.prod-stage > .form-error,
.prod-stage > .paint-lock {
    flex: 0 0 auto;
    position: relative;
    z-index: 4;
}

.prod-stage-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    position: relative;
    z-index: 4;
    background: #101018;
}

.prod-stage-bar em {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.prod-stage-bar h2 {
    font-size: 22px;
    line-height: 1.15;
}
.prod-spec {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.prod-canvas {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: calc(100dvh - 82px - var(--rail-bottom, 228px) - 72px);
    min-height: 360px;
    overflow: hidden;
    isolation: isolate;
}

.prod-fit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #16141c;
}

.prod-preview {
    position: relative;
    z-index: 0;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    background: #0b0b12;
    border: 1px solid rgba(139, 92, 246, 0.18);
    overflow: hidden;
}

.prod-preview.is-landscape,
.prod-preview.is-portrait {
    width: 100%;
    height: 100%;
    max-width: none;
}

.prod-preview img,
.prod-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
    position: relative;
    z-index: 0;
}

.prod-wait {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(10, 10, 16, 0.82);
    color: #f4efe4;
    font-size: 13px;
    line-height: 1.4;
    pointer-events: auto;
}

.prod-wait p {
    margin: 0;
    flex: 1 1 180px;
}

.prod-preview .stage-empty {
    height: 100%;
}

.prod-live {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.prod-live a {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    background: rgba(10, 9, 8, 0.78);
    border: 1px solid var(--gold);
    font-size: 11px;
}

.prod-live img {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.prod-stale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    position: relative;
    z-index: 4;
    padding: 10px 12px;
    border: 1px solid var(--gold);
    background: #161224;
    font-size: 13px;
}

.prod-stale p {
    margin: 0;
    color: var(--gold-2);
}

.prod-stage > .paint-lock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    margin: 0;
}

.prod-stage > .paint-lock b {
    margin: 0;
    font-size: 13px;
}
.prod-stage > .paint-lock p,
.prod-stage > .paint-lock ul {
    display: none;
}
.prod-stage > .paint-lock .paint-lock-row {
    margin: 0;
}

.paint-lock {
    padding: 14px 16px;
    margin: 0 0 16px;
    border: 1px solid var(--gold);
    background: #161224;
}

.paint-lock b {
    display: block;
    font-size: 14px;
    color: var(--gold-2);
    margin-bottom: 6px;
}

.paint-lock p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.paint-lock-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.paint-lock ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.paint-lock li + li {
    margin-top: 4px;
}

.prod-prompt {
    flex: 0 0 auto;
    position: relative;
    z-index: 4;
    background: #101018;
}

.prod-scene-edit {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.95fr);
    gap: 10px;
    flex: 0 0 auto;
    min-height: 220px;
    max-height: none;
    position: relative;
    z-index: 4;
}

.prod-scene-edit .prod-prompt {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.prod-scene-edit .prod-paper {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.prod-scene-chat {
    min-width: 0;
    min-height: 0;
    margin: 0;
    max-height: none;
    padding: 10px 10px 8px;
    background: #12121a;
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 14px;
}

.prod-prompt textarea {
    width: 100%;
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--line);
    background: #12121a;
    color: var(--ink);
}

.prod-prompt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.prod-prompt-row select {
    min-height: 40px;
    background: #12121a;
    color: var(--ink);
    border: 1px solid var(--line);
}

.prod-hint {
    color: var(--muted);
    font-size: 11px;
    margin: 0 0 10px;
    line-height: 1.4;
}
.prod-empty {
    color: var(--muted);
    font-size: 12px;
}
.prod-cast {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.prod-person {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px;
    border: 1px solid transparent;
}

.prod-person.is-on {
    border-color: var(--gold);
    background: rgba(139, 92, 246, 0.08);
}

.prod-person > a {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.prod-person img,
.prod-ph {
    width: 40px;
    height: 40px;
    object-fit: cover;
    background: #0c0c14;
    border: 1px solid var(--line);
}

.prod-ph {
    display: grid;
    place-items: center;
    color: var(--gold);
}
.prod-person strong {
    display: block;
    font-size: 13px;
}
.prod-person small {
    color: var(--muted);
}

.prod-strip {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    min-width: 0;
    padding: 10px 12px;
    background: #101018;
    align-items: center;
}

.prod-thumb {
    position: relative;
    flex: 0 0 96px;
    height: 54px;
    border: 1px solid rgba(139, 92, 246, 0.18);
    background: #0b0b12;
}

.prod-thumb.is-on {
    border-color: var(--gold);
}

.prod-thumb img,
.prod-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prod-thumb-face {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--gold);
}

.prod-thumb em {
    position: absolute;
    left: 4px;
    top: 3px;
    color: var(--gold);
    font-size: 10px;
}

.prod-thumb span {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--muted);
}

.prod-hud {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.prod-hud span {
    padding: 3px 6px;
    background: rgba(11, 11, 18, 0.72);
    border: 1px solid rgba(139, 92, 246, 0.35);
}

.prod-set {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}
.prod-set label {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.prod-set select,
.prod-set input {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--line);
    background: #12121a;
    color: var(--ink);
    padding: 0 8px;
}

.prod-models {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 12px;
}
.prod-models div {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
}
.prod-models b {
    color: var(--ink);
    font-weight: 600;
}
.prod-models b.is-off {
    color: var(--danger);
    font-weight: 500;
}

.nle {
    display: grid;
    grid-template-columns: 88px 1fr;
    background: #0d0d14;
    border-top: 1px solid rgba(139, 92, 246, 0.18);
}

.nle-labels {
    display: grid;
}
.nle-labels span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nle-lanes {
    display: grid;
    overflow: hidden;
}
.nle-lane {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    min-width: 0;
}

.nle-clip {
    height: 18px;
    min-width: 48px;
    flex: 1;
    border-radius: 3px;
    font-size: 9px;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 6px;
    overflow: hidden;
}

.nle-clip.is-on {
    outline: 2px solid #fff;
}
.nle-v {
    background: var(--track-v);
}
.nle-d {
    background: var(--track-d);
}
.nle-m {
    background: var(--track-m);
}
.nle-x {
    background: var(--track-x);
}

.look-head-meta {
    display: flex;
    gap: 10px;
    align-items: center;
}

.look-card {
    min-width: 0;
}

.look-group {
    margin: 16px 0 8px;
    font-size: 13px;
}

.look-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}

.look-slot {
    border: 1px solid var(--line);
    padding: 10px;
    background: #101018;
    display: grid;
    gap: 8px;
}

.look-slot.is-locked {
    border-color: var(--gold);
}

.look-slot header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.look-slot img,
.look-slot .still-empty {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 18%;
    margin: 0;
    background: #0c0c14;
}

.look-slot.is-body img,
.look-slot.is-body .still-empty {
    aspect-ratio: 2 / 3;
    object-position: center 8%;
}

.look-slot form {
    display: grid;
    gap: 6px;
    margin: 0;
}

.look-slot textarea {
    width: 100%;
    min-height: 56px;
    resize: vertical;
    font: inherit;
    font-size: 12px;
}

.look-file span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
}

.look-file input {
    width: 100%;
}

.look-stage {
    margin-bottom: 12px;
}

.look-turn,
.look-3d {
    border: 1px solid var(--line);
    background: #101018;
    overflow: hidden;
}

.look-turn img,
.look-3d canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: center;
    background: #0c0c14;
    cursor: ew-resize;
    user-select: none;
    touch-action: none;
}

.look-3d canvas {
    aspect-ratio: auto;
    height: 380px;
    cursor: grab;
}

.look-3d canvas:active {
    cursor: grabbing;
}

.look-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0 0 12px;
    padding-bottom: 4px;
}

.look-thumb {
    flex: 0 0 52px;
    padding: 0;
    border: 1px solid var(--line);
    background: #0c0c14;
    cursor: pointer;
}

.look-thumb.is-on {
    border-color: var(--gold);
}

.look-thumb img {
    display: block;
    width: 52px;
    height: 70px;
    object-fit: cover;
}

.look-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
}

.look-status {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--muted);
}

.look-status.is-error {
    color: #f0b4b4;
}

.scr {
    display: grid;
    grid-template-columns: var(--rail-left, 200px) minmax(0, 1fr) var(
            --rail-right,
            320px
        );
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.scr.is-left-off {
    grid-template-columns: 36px minmax(0, 1fr) var(--rail-right, 320px);
}
.scr.is-right-off {
    grid-template-columns: var(--rail-left, 200px) minmax(0, 1fr) 36px;
}
.scr.is-left-off.is-right-off {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
}

.scr-col {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #14141c;
    border-right: 1px solid rgba(139, 92, 246, 0.18);
    padding: 10px;
}

.scr-right {
    border-right: 0;
    border-left: 1px solid rgba(139, 92, 246, 0.18);
    gap: 0;
}

.scr-empty-script {
    margin: auto;
    padding: 28px;
}

.scr-stage > .scr-build-chat {
    width: min(680px, 100%);
    min-height: 0;
    margin: auto;
    padding: clamp(18px, 4vw, 42px);
}

.scr-stage > .scr-build-chat .scr-chat-log {
    min-height: 260px;
}

.scr-stub-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 18px;
    padding: 14px clamp(14px, 3vw, 30px) 18px;
    overflow: hidden;
}

.scr-stub-layout > .scr-build-chat {
    flex: 0 0 auto;
    width: 100%;
    min-height: 250px;
    max-height: 46%;
    padding: 0;
}

.scr-stub-layout > .scr-quick-build {
    padding: 18px 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: #10121a;
}

.scr-stub-layout > .scr-build-chat .scr-chat-log {
    min-height: 105px;
}

.scr-stub-preview {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 12px;
    background: #0c0c14;
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
        background 0.18s ease;
}

.scr-stub-preview.is-open {
    flex: 1 1 310px;
    min-height: 220px;
    border-color: rgba(137, 120, 255, 0.72);
    box-shadow: 0 12px 34px rgba(77, 60, 180, 0.14);
}

.scr-stub-preview > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    background: #15151f;
    cursor: pointer;
    list-style: none;
}
.scr-stub-preview.is-open > header {
    border-bottom-color: rgba(137, 120, 255, 0.42);
    background: linear-gradient(90deg, rgba(120, 103, 242, 0.17), #15151f 64%);
}

.scr-stub-preview > header span {
    display: grid;
    gap: 2px;
}
.scr-stub-preview > header b {
    color: var(--ink);
    font-size: 13px;
}
.scr-stub-preview > header small {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
}
.scr-stub-preview > header .btn {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 11px;
}
.scr-stub-head-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}
.scr-stub-head-actions [data-plan-toggle] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.scr-stub-head-actions [data-plan-toggle]::after {
    content: "↓";
    color: var(--accent-2);
    font-size: 15px;
    line-height: 1;
}
.scr-stub-preview.is-open .scr-stub-head-actions [data-plan-toggle]::after {
    content: "↑";
}
.scr-stub-editor,
.scr-stub-editor .scr-paper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.scr-stub-editor[hidden] {
    display: none;
}
.scr-stub-editor:not([hidden]) {
    animation: scr-plan-open 0.2s ease-out;
}
.scr-stub-open-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(120, 103, 242, 0.07);
}
.scr-stub-open-label b {
    color: var(--accent-2);
    font-size: 11px;
}
.scr-stub-open-label small {
    color: var(--muted);
    font-size: 10px;
}
@keyframes scr-plan-open {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.scr-stub-editor textarea {
    flex: 1;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 16px 18px 24px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    resize: none;
    border: 0;
    outline: 0;
    background: #0c0c14;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.scr-stub-editor .scr-review-view {
    font-size: 13px;
    line-height: 1.6;
}

.scr-context-cards {
    flex: 0 0 auto;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.16);
}

.scr-context-cards summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px 10px;
    color: var(--ink);
    font-size: 12px;
    cursor: pointer;
    list-style: none;
}

.scr-context-cards summary::-webkit-details-marker {
    display: none;
}
.scr-context-cards summary::after {
    content: "⌄";
    color: var(--gold);
}
.scr-context-cards[open] summary::after {
    content: "⌃";
}
.scr-context-cards summary small {
    margin-left: auto;
    color: var(--muted);
    font-size: 10px;
}

.scr-context-grid {
    display: grid;
    gap: 7px;
    max-height: min(42vh, 360px);
    overflow: auto;
    padding: 0 0 10px;
}

.scr-context-grid article {
    padding: 9px 10px;
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 10px;
    background: #111119;
}

.scr-context-grid b {
    display: block;
    color: var(--gold-2);
    font-size: 11px;
}
.scr-context-grid p {
    margin: 4px 0 7px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}
.scr-context-grid button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gold);
    font-size: 10px;
    cursor: pointer;
}

.scr-right > .scr-chat {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(139, 92, 246, 0.16);
}

.scr-mini {
    font-size: 11px;
    color: var(--gold);
    text-decoration: none;
}

.scr-episode-head {
    flex-shrink: 0;
    margin: 0 0 10px;
    padding: 3px 2px 10px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.16);
}
.scr-episode-head .prod-head {
    margin-bottom: 7px;
}
.scr-episode-head .prod-head span {
    color: var(--muted);
    font-size: 9px;
}
.scr-episode-progress {
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(139, 92, 246, 0.16);
}
.scr-episode-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold), #a78bfa);
}
.scr-plan-link {
    display: inline-flex;
    margin-top: 8px;
    color: var(--gold-2);
    font-size: 10px;
    text-decoration: none;
}
.scr-plan-link:hover {
    color: #fff;
}
.scr-state-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #555564;
}
.scr-state-dot.is-planned {
    background: #f0b35b;
}
.scr-state-dot.is-ready {
    background: #56d69b;
}
.scr-state-dot.is-warning {
    background: #f0b35b;
    box-shadow: 0 0 0 3px rgba(240, 179, 91, .12);
}

.scr-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #101018;
}

.scr-stage .alert-ok,
.scr-stage .form-error {
    margin: 8px 10px 0;
    flex-shrink: 0;
}

.scr-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.scr-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
    flex-shrink: 0;
}

.scr-title-field {
    display: grid;
    flex: 1;
    min-width: 170px;
    gap: 1px;
}
.scr-title-field small {
    padding-left: 10px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scr-bar input[type="text"] {
    width: 100%;
    min-height: 32px;
    height: 32px;
    padding: 4px 10px;
    border: 1px solid transparent;
    background: #12121a;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

.scr-episode-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 9px;
    background: #0d0d15;
}
.scr-episode-nav a,
.scr-episode-nav span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: var(--gold-2);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}
.scr-episode-nav a:hover {
    background: rgba(139, 92, 246, 0.16);
    color: #fff;
}
.scr-episode-nav span {
    color: #3f3f4d;
}
.scr-episode-nav b {
    min-width: 34px;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}
.scr-bar-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
}
.scr-tools-menu {
    position: relative;
}
.scr-tools-menu summary {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: var(--gold-2);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.scr-tools-menu summary::-webkit-details-marker {
    display: none;
}
.scr-tools-menu[open] summary {
    background: rgba(139, 92, 246, 0.12);
}
.scr-tools-menu > div {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    width: 220px;
    display: grid;
    gap: 4px;
    padding: 7px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 10px;
    background: #181822;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
}
.scr-tools-menu button {
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}
.scr-tools-menu button:hover {
    background: rgba(139, 92, 246, 0.16);
}
.scr-tools-menu button:disabled {
    opacity: 0.4;
    cursor: default;
}
.scr-editor-tip {
    flex-shrink: 0;
    padding: 6px 18px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.12);
    background: #0d0d15;
    color: var(--muted);
    font-size: 10px;
}

.scr-bar input[type="text"]:focus {
    border-color: var(--gold);
    outline: none;
}

.scr-badge {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.scr-bar .btn {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
}

.scr-editor .script-box {
    flex: 1;
    width: min(860px, 100%);
    align-self: center;
    min-height: 0;
    border: 0;
    border-radius: 0;
    resize: none;
    padding: 30px clamp(28px, 5vw, 54px) 48px;
    background: #0e0e16;
    border-left: 1px solid rgba(139, 92, 246, 0.1);
    border-right: 1px solid rgba(139, 92, 246, 0.1);
    color: var(--ink);
    caret-color: var(--ink);
    font-size: 16px;
    line-height: 1.7;
}

.scr-paper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #090910;
}

.scr-paper.is-reviewing .script-box {
    display: none;
}

.scr-review-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.28);
    background: #16161f;
    font-size: 12px;
    color: var(--gold);
}

.scr-review-bar[hidden] {
    display: none;
}

.scr-review-bar span {
    margin-right: auto;
}

.scr-review-bar .btn {
    min-height: 28px;
    padding: 2px 8px;
    font-size: 11px;
}

.scr-review-view {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px 28px 48px;
    background: #0c0c14;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.scr-review-view[hidden] {
    display: none;
}

.scr-bible .scr-review-view {
    padding: 16px 24px 48px;
    font-size: 14px;
    line-height: 1.65;
}

.scr-review-plain {
    white-space: pre-wrap;
}

.scr-hunk {
    display: grid;
    margin: 10px 0;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 10px;
    overflow: hidden;
    background: #12121c;
}

.scr-hunk-old,
.scr-hunk-new {
    margin: 0;
    padding: 8px 12px;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.scr-hunk-old {
    background: rgba(240, 113, 103, 0.14);
    color: #f0c4c0;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.scr-hunk-new {
    background: rgba(74, 222, 128, 0.12);
    color: #c6f6d5;
}

.scr-hunk-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    background: #16161f;
}

.scr-hunk-tools small {
    margin-right: auto;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scr-hunk-tools .btn {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 11px;
}

.scr-sum {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.scr-sum b {
    color: var(--ink);
    display: block;
}
.scr-sum span {
    display: block;
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 4px 0;
}
.scr-sum em {
    font-style: normal;
}

.wiz {
    width: min(640px, calc(100% - 24px));
    max-height: calc(100vh - 32px);
}

.wiz-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    position: relative;
}

.wiz-wait {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 24px;
    background: rgba(12, 12, 20, 0.96);
    text-align: center;
}

.wiz-wait[hidden] {
    display: none;
}

.wiz-wait-orb {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(139, 92, 246, 0.22);
    border-top-color: var(--gold);
    border-right-color: var(--gold-2);
    animation: wiz-spin 0.85s linear infinite;
}

.wiz-wait-bar {
    position: relative;
    width: min(280px, 82%);
    height: 5px;
    border-radius: 99px;
    background: #1a1a26;
    overflow: hidden;
}

.wiz-wait-bar i,
.wiz-wait-bar em {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 99px;
}

.wiz-wait-bar i {
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(196, 181, 253, 0.85),
        transparent
    );
    animation: wiz-slide 1.5s ease-in-out infinite;
}

.wiz-wait-bar em {
    width: 8%;
    background: var(--gold);
    opacity: 0.55;
    transition: width 1.2s ease;
}

.wiz-wait p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.wiz-wait small {
    max-width: 280px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

@keyframes wiz-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes wiz-slide {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(320%);
    }
}

.wiz-card .modal-head h2 {
    font-size: 26px;
}

.wiz-q {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.wiz-step {
    overflow: auto;
    min-height: 120px;
    max-height: min(58vh, 520px);
}

.wiz-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.wiz-nav .btn-solid {
    margin-left: auto;
}

.wiz-dots {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.wiz-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line);
}

.wiz-dots i.is-on {
    background: var(--gold);
}

.wiz .scr-ins input,
.wiz .scr-ins select,
.wiz .scr-ins textarea {
    min-height: 44px;
}

.wiz .mix {
    margin-top: 0;
}

.scr-welcome {
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.scr-bible {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.scr-bible .prod-head {
    padding: 8px 12px 0;
    flex-shrink: 0;
}

.scr-bible-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.scr-bible-form .prod-head .btn {
    margin-left: auto;
}

.scr-bible .script-box {
    flex: 1;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 16px 24px 32px;
    background: #0c0c14;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow: auto;
}

.scr-hello {
    max-width: 420px;
    text-align: center;
}

.scr-hello em {
    display: block;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.scr-hello h2 {
    font-size: 28px;
    margin-bottom: 10px;
}
.scr-hello p {
    color: var(--muted);
    font-size: 14px;
}

.scr-mixer {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    max-height: 38%;
    min-height: 0;
    overflow: auto;
}

.scr-ins {
    margin-bottom: 8px;
}

.scr-ins label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.scr-ins input,
.scr-ins select,
.scr-ins textarea {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    background: #12121a;
    color: var(--ink);
    font-size: 13px;
}

.scr-ins textarea {
    min-height: 56px;
    resize: vertical;
}

.scr-ins-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.scr-go {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(139, 92, 246, 0.18);
    flex-shrink: 0;
}

.scr-check {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.scr-chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 180px;
    margin-top: 8px;
    overflow: hidden;
}

.scr-chat[hidden] {
    display: none;
}

.scr-build-chat {
    margin-top: 0;
}

.scr-quick-build {
    width: min(820px, 100%);
    margin: auto;
    padding: clamp(18px, 4vw, 42px);
    overflow: auto;
}

.scr-generation-wait {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(6, 7, 12, 0.82);
    backdrop-filter: blur(8px);
}
.scr-generation-wait[hidden] {
    display: none;
}
.scr-generation-wait-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto 5px minmax(280px, 1fr) auto;
    align-items: center;
    gap: 8px 15px;
    width: min(1120px, 100%);
    height: min(90dvh, 900px);
    max-height: 900px;
    padding: 24px;
    border: 1px solid rgba(137, 120, 255, 0.5);
    border-radius: 18px;
    background: #141620;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.scr-generation-spinner {
    grid-row: 1;
    width: 44px;
    height: 44px;
    border: 3px solid rgba(137, 120, 255, 0.2);
    border-top-color: #8978ff;
    border-radius: 50%;
    animation: scr-generation-spin 0.85s linear infinite;
}
.scr-generation-wait-card b {
    display: block;
    color: var(--ink);
    font-size: 18px;
}
.scr-generation-wait-card p {
    margin: 4px 0 0;
    color: var(--accent-2);
    font-size: 13px;
    line-height: 1.45;
}
.scr-generation-progress {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(137, 120, 255, 0.14);
}
.scr-generation-progress i {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7867f2, #b9b1ff);
    animation: scr-generation-progress 1.5s ease-in-out infinite;
}
.scr-generation-wait-card small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}
.scr-generation-live {
    grid-column: 1 / -1;
    min-height: 280px;
    height: 100%;
    max-height: none;
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(137, 120, 255, 0.24);
    border-radius: 12px;
    background: #0b0c13;
    color: #ebe9ff;
    font: 14px/1.68 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.scr-generation-live:empty::before {
    content: "İlk satırlar hazırlanıyor…";
    color: var(--muted);
}
@keyframes scr-generation-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes scr-generation-progress {
    0% {
        transform: translateX(-105%);
    }
    55% {
        transform: translateX(115%);
    }
    100% {
        transform: translateX(245%);
    }
}

.scr-stub-layout > .scr-quick-build {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 4px 0 0;
    overflow: visible;
}

.scr-quick-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}
.scr-quick-head .scr-chat-mark {
    margin-top: 4px;
}
.scr-quick-head h2 {
    margin: 3px 0 6px;
    font-size: clamp(22px, 3vw, 34px);
}
.scr-quick-head p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}
.scr-quick-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.scr-quick-note {
    margin-top: 8px;
}
.scr-quick-note label small {
    color: var(--muted);
    font-weight: 400;
}
.scr-quick-note textarea {
    min-height: 76px;
    resize: vertical;
}
.scr-quick-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0;
}
.scr-quick-facts span {
    padding: 6px 9px;
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 999px;
    background: #181822;
    color: var(--muted);
    font-size: 10px;
}
.scr-quick-advanced {
    margin-top: 14px;
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 12px;
    background: #111119;
}
.scr-quick-advanced summary {
    padding: 12px 14px;
    color: var(--ink);
    font-size: 12px;
    cursor: pointer;
}
.scr-quick-advanced summary small {
    margin-left: 5px;
    color: var(--muted);
}
.scr-quick-advanced-body {
    display: grid;
    gap: 14px;
    padding: 2px 14px 16px;
}
.scr-quick-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(139, 92, 246, 0.18);
}
.scr-quick-actions small {
    color: var(--muted);
}
.scr-quick-actions .btn {
    min-width: 150px;
}
.scr-stub-layout > .scr-quick-build .scr-quick-head {
    margin-bottom: 10px;
}
.scr-stub-layout > .scr-quick-build .scr-quick-head h2 {
    font-size: clamp(20px, 2.3vw, 28px);
}
.scr-stub-layout > .scr-quick-build .scr-quick-head p {
    font-size: 12px;
}
.scr-stub-layout > .scr-quick-build .scr-quick-actions {
    margin-top: 12px;
    padding-top: 12px;
}
.scr-quick-direction {
    margin-top: 10px;
}
.scr-quick-direction .scr-quick-note {
    margin: 0;
}
.scr-quick-direction .scr-quick-note textarea {
    min-height: 68px;
}
.scr-quick-intensity > summary small {
    display: block;
    margin: 3px 0 0;
    font-size: 10px;
}
.scr-quick-intensity .scr-quick-advanced-body {
    max-height: 360px;
    overflow: auto;
}
.scr-quick-intensity .mix .prod-head {
    margin-top: 0;
}

.episode-mix-modal {
    width: min(820px, calc(100% - 28px));
    max-height: min(840px, calc(100dvh - 28px));
    border-radius: 16px;
}
.episode-mix-modal .modal-card {
    display: flex;
    flex-direction: column;
    max-height: min(840px, calc(100dvh - 28px));
    padding: 22px;
}
.plan-propagation-modal {
    width: min(680px, calc(100% - 28px));
}
.plan-propagation-modal .modal-card {
    display: flex;
    flex-direction: column;
    max-height: min(760px, calc(100dvh - 28px));
    padding: 24px;
}
.plan-propagation-modal .modal-head {
    margin-bottom: 8px;
}
.plan-propagation-modal .modal-head h2 {
    font-size: clamp(22px, 4vw, 30px);
}
.plan-propagation-copy {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.55;
}
.plan-propagation-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 700;
}
.plan-propagation-list {
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.plan-propagation-list label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
}
.plan-propagation-list label + label {
    border-top: 1px solid var(--line);
}
.plan-propagation-list input,
.plan-propagation-all input {
    margin-top: 3px;
    accent-color: var(--accent);
}
.plan-propagation-status {
    margin: 12px 0 0;
    color: var(--muted);
}
.plan-propagation-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.plan-save-notice {
    margin-bottom: 10px;
}
.episode-mix-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.episode-mix-head h2 {
    margin: 3px 0 5px;
    font-size: 24px;
}
.episode-mix-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}
.episode-mix-scroll {
    min-height: 0;
    overflow: auto;
    padding: 16px 4px 10px;
}
.episode-mix-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.episode-mix-actions small {
    color: var(--muted);
}

.dock-regenerate {
    margin-top: 10px;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 10px;
    background: #111119;
}
.dock-regenerate > summary {
    padding: 9px 11px;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
}
.dock-regenerate[open] > summary {
    color: var(--ink);
    border-bottom: 1px solid rgba(139, 92, 246, 0.16);
}
.dock-regenerate .scr-quick-build {
    padding: 16px;
}

.scr-build-options {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-shrink: 0;
    padding: 0 0 8px;
}

.scr-build-mixer {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(46vh, 420px);
    overflow: auto;
    margin: 0 0 8px;
    padding: 10px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    background: #111119;
}

.scr-build-mixer[hidden] {
    display: none;
}
.scr-build-mixer > p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 11px;
}
.scr-build-mix-grid {
    display: grid;
    gap: 7px;
}
.scr-build-mix-grid label {
    display: grid;
    grid-template-columns: minmax(82px, 0.7fr) minmax(110px, 1fr) 30px;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 11px;
}
.scr-build-mix-grid input[type="range"] {
    width: 100%;
    accent-color: var(--gold);
}
.scr-build-mix-grid output {
    color: var(--gold-2);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.scr-build-choice {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 999px;
    background: #1a1a26;
    color: var(--ink);
    font-size: 10px;
    cursor: pointer;
}

.scr-build-choice:hover {
    border-color: var(--gold);
    color: var(--gold-2);
}
.scr-build-chat [data-build-progress] {
    color: var(--muted);
    font-size: 10px;
}

.scr-chat-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 2px 10px;
    flex-shrink: 0;
}

.scr-chat-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--gold), #7c5cbf);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14);
    flex-shrink: 0;
}

.scr-chat-top b {
    display: block;
    font-size: 13px;
    color: var(--ink);
    letter-spacing: 0;
}

.scr-chat-top small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 11px;
}

.scr-chat-log {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 2px 12px;
}

.scr-chat-hello,
.scr-chat-msg {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.scr-chat-hello {
    padding: 18px 8px;
    text-align: center;
    font-size: 12px;
}

.scr-chat-msg.is-user {
    color: #fff;
    background: linear-gradient(160deg, #6d5cff, #8b5cf6);
    border: 0;
    border-radius: 14px 14px 5px 14px;
    padding: 9px 12px;
    align-self: flex-end;
    max-width: 92%;
}

.scr-chat-msg.is-bot {
    color: var(--ink);
    background: #16161f;
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 14px 14px 14px 5px;
    padding: 9px 12px;
    align-self: flex-start;
    max-width: 92%;
}

.scr-chat-msg.is-wait {
    font-style: italic;
    color: var(--gold-2);
}

.scr-chat-history {
    flex: 0 0 auto;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 10px;
    background: #12121a;
    color: var(--muted);
    font-size: 11px;
}
.scr-chat-history > summary {
    padding: 8px 10px;
    cursor: pointer;
    color: var(--ink);
}
.scr-chat-history-list {
    max-height: 150px;
    overflow: auto;
    padding: 0 9px 9px;
}
.scr-chat-history-list article {
    display: grid;
    gap: 2px;
    padding: 7px 0;
    border-top: 1px solid rgba(139, 92, 246, 0.12);
}
.scr-chat-history-list article.is-undone {
    opacity: .55;
}
.scr-chat-history-list b,
.scr-chat-history-list small {
    overflow-wrap: anywhere;
}

.scr-revision-progress {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin: 14px 0 12px;
    padding: 12px 12px 17px;
    color: var(--ink);
    background: rgba(109, 92, 255, 0.11);
    border: 1px solid rgba(139, 92, 246, 0.34);
    border-radius: 12px;
}

.scr-revision-progress[hidden] {
    display: none;
}

.scr-revision-spinner,
.btn.is-loading::before {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: scr-spin 0.75s linear infinite;
}

.scr-revision-progress-bar {
    position: absolute;
    right: 10px;
    bottom: 7px;
    left: 10px;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.scr-revision-progress-bar::after {
    content: '';
    display: block;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, var(--violet), #b9a8ff);
    border-radius: inherit;
    animation: scr-progress-slide 1.25s ease-in-out infinite;
}

.scr-revision-progress.is-error {
    color: #ffc7c2;
    background: rgba(196, 70, 61, 0.1);
    border-color: rgba(231, 102, 91, 0.35);
}

.scr-revision-progress.is-error .scr-revision-spinner,
.scr-revision-progress.is-error .scr-revision-progress-bar {
    display: none;
}

.btn.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn.is-loading::before {
    content: '';
    flex: 0 0 auto;
}

@keyframes scr-spin {
    to { transform: rotate(360deg); }
}

@keyframes scr-progress-slide {
    0% { transform: translateX(-115%); }
    55%, 100% { transform: translateX(240%); }
}

.scr-chat-live {
    width: 100%;
    min-height: 220px;
    height: clamp(260px, 48dvh, 620px);
    max-height: 620px;
    margin: 0;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink);
    background: rgba(139, 92, 246, 0.07);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 12px;
    font: 13px/1.62 var(--mono);
}

.scr-chat-live:empty {
    display: none;
}

@media (max-width: 700px) {
    .scr-generation-wait {
        place-items: stretch;
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom));
    }
    .scr-generation-wait-card {
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto 4px minmax(0, 1fr) auto;
        gap: 8px 10px;
        width: 100%;
        height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
        max-height: none;
        padding: 14px;
        border-radius: 14px;
    }
    .scr-generation-spinner {
        width: 34px;
        height: 34px;
    }
    .scr-generation-wait-card b {
        font-size: 16px;
    }
    .scr-generation-wait-card p {
        font-size: 12px;
    }
    .scr-generation-live {
        min-height: 0;
        padding: 12px;
        font-size: 12px;
        line-height: 1.6;
    }
    .scr-generation-wait-card small {
        font-size: 10px;
    }
    .scr-chat-live {
        min-height: 280px;
        height: min(52dvh, 520px);
        padding: 12px;
        font-size: 12px;
    }
}

.scr-chat-diff {
    margin-top: 8px;
    display: grid;
    gap: 6px;
}

.scr-chat-diff b {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.scr-chat-diff pre {
    margin: 0;
    padding: 8px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 140px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.scr-chat-diff .is-old {
    background: rgba(240, 113, 103, 0.12);
    color: #f0c4c0;
}

.scr-chat-diff .is-new {
    background: rgba(74, 222, 128, 0.1);
    color: #c6f6d5;
}

.scr-chat-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.scr-chat-actions .btn {
    min-height: 28px;
    padding: 2px 8px;
    font-size: 11px;
}

.scr-chat-pin {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #16161f;
    font-size: 11px;
    color: var(--gold);
}

.scr-chat-pin[hidden] {
    display: none;
}

.scr-chat-shortcuts {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 0 0 8px;
    flex-shrink: 0;
    scrollbar-width: none;
}
.scr-chat-shortcuts::-webkit-scrollbar {
    display: none;
}
.scr-chat-shortcuts button {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 999px;
    background: #181822;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
}
.scr-chat-shortcuts button:hover {
    border-color: var(--gold);
    color: var(--ink);
}

.scr-chat-x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.scr-chat-dock {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px;
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 16px;
    background: #12121a;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.scr-chat-dock textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    min-height: 42px;
    max-height: 120px;
    resize: none;
    padding: 4px 2px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.45;
}

.scr-chat-dock textarea:focus {
    outline: none;
}

.scr-chat-dock textarea:disabled {
    opacity: 0.5;
}

.scr-chat-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.scr-chat-model {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.scr-chat-model span {
    display: none;
}

.scr-chat-model select {
    width: auto;
    max-width: 100%;
    min-height: 30px;
    padding: 4px 26px 4px 10px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 999px;
    background: #1a1a26;
    color: var(--ink);
    font-size: 11px;
    cursor: pointer;
}

.scr-chat-model select:focus {
    outline: none;
    border-color: var(--gold);
}

.scr-voice-status {
    min-width: 0;
    max-width: 170px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.25;
    text-align: right;
}

.scr-chat-mic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 50%;
    background: #1a1a26;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
}

.scr-chat-mic:hover {
    border-color: var(--gold);
    color: var(--gold-2);
}
.scr-chat-mic:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.scr-chat-mic.is-listening {
    border-color: #f07167;
    background: rgba(240, 113, 103, 0.18);
    color: #ffd4cf;
    box-shadow: 0 0 0 4px rgba(240, 113, 103, 0.1);
}
.scr-chat-mic:disabled {
    opacity: 0.35;
    cursor: default;
}
.scr-chat-mic + .scr-chat-send {
    margin-left: 0;
}

.scr-chat-send {
    width: auto;
    min-width: 76px;
    height: 34px;
    margin-left: auto;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--gold);
    color: #0c0b12;
    display: grid;
    place-items: center;
    grid-auto-flow: column;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.scr-chat-send span {
    font-size: 11px;
    font-weight: 750;
}

.scr-chat-send:hover {
    filter: brightness(1.08);
}

.scr-chat-send:disabled {
    opacity: 0.35;
    cursor: default;
}

.card-desk {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr) minmax(
            240px,
            0.85fr
        );
    gap: 20px;
    align-items: start;
}

.card-desk.is-chat-off {
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr) 44px;
    gap: 16px;
}

.grid-2.script-layout {
    grid-template-columns: var(--rail-left, 1fr) minmax(0, 1fr);
}
.grid-2.script-layout.is-left-off {
    grid-template-columns: 36px 1fr;
}

.dock-toggle,
.chat-toggle {
    position: absolute;
    top: 8px;
    z-index: 8;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(139, 92, 246, 0.32);
    background: #12121a;
    color: var(--accent-2);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 2px;
}

.chat-toggle {
    left: 8px;
}

[data-dock="left"] .dock-toggle {
    right: 8px;
}
[data-dock="right"] .dock-toggle {
    left: 8px;
}

[data-dock="left"]:not(.is-off) > .prod-head,
[data-dock="left"]:not(.is-off) > .field:first-of-type {
    padding-right: 28px;
}

[data-dock="right"]:not(.is-off) .prod-head,
[data-dock="right"]:not(.is-off) .scr-chat-top {
    padding-left: 28px;
}

.look-card[data-dock],
.side-card[data-dock] {
    position: relative;
}

[data-dock].is-off {
    padding: 8px 6px;
    min-width: 0;
    overflow: hidden;
}

[data-dock].is-off > *:not(.dock-toggle) {
    display: none !important;
}

[data-dock="left"].is-off .dock-toggle,
[data-dock="right"].is-off .dock-toggle {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.card-chat.is-off,
.look-card.is-off,
.side-card.is-off {
    border-radius: 8px;
    min-height: 44px;
    max-height: none;
}

.card-chat.is-off {
    padding: 8px 6px;
    min-width: 0;
    overflow: hidden;
}

.card-chat.is-off > *:not(.chat-toggle) {
    display: none !important;
}

.card-chat.is-off .chat-toggle {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.card-chat:not(.is-off) .scr-chat-top {
    padding-left: 28px;
}

.card-desk .form-wide {
    max-width: none;
}

.card-desk .scr-paper {
    flex: none;
}

.card-desk .scr-review-view {
    min-height: 240px;
    padding: 16px;
    font-size: 14px;
    font-family: inherit;
}

.scr-paper.is-reviewing .card-fields {
    display: none;
}

.card-chat {
    position: sticky;
    top: 12px;
    align-self: start;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    max-height: calc(100vh - 160px);
    background: #12121a;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 12px;
}

.card-chat .scr-chat {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    min-height: 0;
    flex: 1;
}

.prod-right > .scr-chat {
    flex: 0 1 280px;
    min-height: 240px;
    max-height: 52%;
    margin-top: 0;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.16);
}

.prod-side-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.prod-stage .script-box,
.prod-paper .script-box:not([hidden]) {
    width: 100%;
    min-height: 88px;
    padding: 10px;
    border: 1px solid var(--line);
    background: #12121a;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
}

.prod-paper .prod-line {
    min-height: 44px;
    margin-top: 8px;
}

.prod-paper .scr-review-view {
    padding: 12px;
    font-size: 13px;
    font-family: inherit;
    min-height: 72px;
}

.prod-dock {
    position: relative;
    z-index: 20;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #101018;
    border-top: 1px solid rgba(139, 92, 246, 0.18);
}

.dock-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 10px 0;
    overflow-x: auto;
    background: #0c0c14;
    border-bottom: 1px solid rgba(139, 92, 246, 0.16);
}

.dock-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 6px 0 12px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dock-tab:hover {
    color: var(--ink);
    background: rgba(139, 92, 246, 0.08);
}

.dock-tab.is-on {
    background: #101018;
    color: var(--ink);
    border-color: rgba(139, 92, 246, 0.22);
}

.dock-tab-x {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
}

.dock-tab-x:hover {
    background: rgba(244, 239, 228, 0.12);
    color: var(--ink);
}

.rail-grip {
    position: absolute;
    z-index: 12;
    background: transparent;
    touch-action: none;
}

.rail-grip:hover,
.rail-grip.is-on {
    background: rgba(139, 92, 246, 0.55);
}

.rail-grip.is-x {
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
}

.rail-grip.is-y {
    left: 0;
    right: 0;
    height: 6px;
    cursor: row-resize;
}

[data-dock="left"] .rail-grip.is-x {
    right: 0;
}
[data-dock="right"] .rail-grip.is-x {
    left: 0;
}
[data-desk-dock] > .rail-grip.is-y {
    top: 0;
}

html.is-sizing,
html.is-sizing * {
    user-select: none !important;
    cursor: inherit !important;
}

html.is-sizing-x {
    cursor: col-resize !important;
}
html.is-sizing-y {
    cursor: row-resize !important;
}

.prod-pane {
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
}

.prod-pane[hidden] {
    display: none;
}

.dock-page-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 8;
}

.prod-pane.is-film .prod-strip {
    padding-right: 140px;
}

.prod-pane.is-film {
    overflow: hidden;
    display: grid;
    grid-template-rows: 100px 128px;
}

.prod-pane.is-film[hidden] {
    display: none;
}

.dock-pad {
    padding: 10px 12px 14px;
    padding-top: 42px;
}

.dock-split {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.dock-list {
    overflow: auto;
    border-right: 1px solid rgba(139, 92, 246, 0.16);
    padding: 8px;
    display: grid;
    align-content: start;
    gap: 4px;
}

.dock-list b {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 4px 8px;
}

.dock-main {
    min-width: 0;
    overflow: auto;
    padding: 8px 10px;
    padding-top: 40px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.dock-script {
    display: grid;
    gap: 8px;
}

.dock-script .script-box {
    min-height: 140px;
    max-height: 28vh;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--line);
    background: #12121a;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: vertical;
}

.dock-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-right: 132px;
}

.dock-toolbar b {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.dock-toolbar input[type="text"] {
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line);
    background: #12121a;
    color: var(--ink);
    min-width: 160px;
}

.dock-eps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.dock-eps a {
    padding: 4px 8px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}

.dock-eps a.is-on,
.dock-eps a:hover {
    color: var(--ink);
    border-color: var(--gold);
}

.dock-board {
    padding: 0;
    min-height: 72px;
}

.dock-grid,
.dock-audio {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.dock-audio {
    grid-template-columns: repeat(3, minmax(160px, 1fr)) minmax(0, 1.2fr);
}

.dock-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    background: #12121a;
}

.dock-card b {
    font-size: 12px;
    color: var(--gold);
}

.dock-card input,
.dock-card select,
.dock-card textarea {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    background: #0c0c14;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
}

.dock-card textarea {
    min-height: 64px;
    resize: vertical;
}

.dock-media {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    min-width: 0;
}

.dock-media-card {
    flex: 0 0 140px;
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 11px;
}

.dock-media-card img,
.dock-media-card video {
    width: 140px;
    height: 80px;
    object-fit: cover;
    background: #0b0b12;
    border: 1px solid var(--line);
}

.dock-media-card audio {
    width: 140px;
}

.dock-edit {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 12px;
}

.dock-edit em {
    color: var(--ink);
    font-style: normal;
}

@media (max-width: 1240px) {
    .scr-bar {
        flex-wrap: wrap;
    }
    .scr-title-field {
        flex: 1 1 calc(100% - 120px);
    }
    .scr-badge {
        display: none;
    }
    .scr-episode-nav {
        order: 2;
    }
    .scr-bar-actions {
        order: 3;
        margin-left: auto;
    }
}

@media (max-width: 1100px) {
    .create-flow .modal-card {
        min-height: min(680px, calc(100dvh - 32px));
    }
    .type-grid.create-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .scr-quick-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .scr-bar {
        flex-wrap: nowrap;
    }
    .scr-title-field {
        flex-basis: auto;
    }
    .scr-editor-tip {
        display: none;
    }
    .card-desk,
    .card-desk.is-chat-off {
        grid-template-columns: 1fr;
    }
    .grid-2.script-layout.is-left-off {
        grid-template-columns: 1fr 1fr;
    }
    .card-chat {
        position: static;
        max-height: none;
        min-height: 280px;
    }
    .dock-toggle,
    .rail-grip {
        display: none;
    }
}

@media (max-width: 960px) {
    .prod,
    .prod.is-docked {
        grid-template-rows: minmax(0, 1fr) minmax(
                90px,
                var(--rail-bottom, 228px)
            );
        height: 100%;
        overflow: hidden;
    }
    .prod-main,
    .prod-main.is-left-off,
    .prod-main.is-right-off,
    .prod-main.is-left-off.is-right-off {
        grid-template-columns: minmax(0, 1fr);
    }
    .prod-col,
    .nle {
        display: none;
    }
    .prod-right {
        display: none;
    }
    .prod-canvas {
        height: calc(100dvh - 132px - var(--rail-bottom, 228px));
        min-height: 280px;
    }
    .prod-scene-edit {
        grid-template-columns: 1fr;
        max-height: none;
        min-height: 0;
    }
    .prod-scene-chat {
        min-height: 220px;
        max-height: 280px;
    }
    .prod-pane.is-film {
        grid-template-rows: 90px;
    }
    .dock-split,
    .dock-grid,
    .dock-audio {
        grid-template-columns: 1fr;
    }
    .scr,
    .scr.is-left-off,
    .scr.is-right-off,
    .scr.is-left-off.is-right-off {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(220px, 38vh);
    }
    .scr > .scr-col:first-child {
        display: none;
    }
    .scr-right {
        border-left: 0;
        border-top: 1px solid rgba(139, 92, 246, 0.18);
    }
    .app-body.is-desk .app-tabs {
        display: flex;
    }
    .app-ai,
    .app-doc {
        display: none;
    }
    .app-bar {
        grid-template-columns: auto 1fr;
    }
}

@media (max-width: 620px) {
    .create-flow {
        width: calc(100% - 16px);
    }
    .create-flow .modal-card {
        padding: 18px;
    }
    .create-flow .modal-head h2 {
        font-size: 28px;
    }
    .type-grid.create-type-grid {
        grid-template-columns: 1fr;
    }
    .create-type-grid .type-card {
        min-height: 92px;
    }
    .scr-quick-settings {
        grid-template-columns: 1fr;
    }
    .scr-quick-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .scr-stub-preview > header {
        align-items: flex-start;
        flex-direction: column;
    }
    .scr-stub-head-actions {
        width: 100%;
    }
    .scr-stub-head-actions .btn {
        flex: 1;
    }
}

/* Modern studio surface */
.app-body {
    --bg: #090a0f;
    --bg-2: #11131b;
    --bg-3: #191c27;
    --line: rgba(255, 255, 255, 0.08);
    --accent: #7867f2;
    --accent-2: #c8c2ff;
    background: #090a0f;
}

.app-bar {
    background: rgba(15, 16, 23, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
}

.app-mark {
    border: 0;
    border-radius: 9px;
    background: linear-gradient(145deg, #8978ff, #5f50d8);
    color: #fff;
    box-shadow: 0 7px 22px rgba(120, 103, 242, 0.24);
}

.app-tabs {
    gap: 3px;
}
.app-tabs a {
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}
.app-tabs a:hover {
    background: rgba(255, 255, 255, 0.04);
}
.app-tabs a.is-on {
    color: #fff;
    border: 0;
    background: rgba(120, 103, 242, 0.16);
}

.app .btn {
    border-radius: 9px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 650;
}

.app .btn-solid {
    border-color: transparent;
    background: linear-gradient(145deg, #8978ff, #6d5ce7);
    box-shadow: 0 7px 20px rgba(120, 103, 242, 0.2);
}

.scr-col {
    background: #0f1118;
    border-color: rgba(255, 255, 255, 0.06);
}
.scr-right {
    background: #10121a;
    border-color: rgba(255, 255, 255, 0.06);
}
.scr-stage {
    background: #0a0b10;
}
.prod-scene {
    transition: background 0.16s ease, border-color 0.16s ease,
        transform 0.16s ease;
}
.prod-scene:hover {
    transform: translateX(2px);
}
.prod-scene.is-on {
    border-color: rgba(137, 120, 255, 0.7);
    background: linear-gradient(
        110deg,
        rgba(120, 103, 242, 0.16),
        rgba(120, 103, 242, 0.05)
    );
}
.scr-bar {
    background: rgba(17, 19, 27, 0.96);
    border-bottom-color: rgba(255, 255, 255, 0.07);
}
.scr-bar input[type="text"] {
    border-radius: 8px;
    background: transparent;
}
.scr-episode-nav {
    border-color: rgba(255, 255, 255, 0.08);
    background: #0b0c12;
}
.scr-tools-menu summary {
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.scr-editor-tip {
    background: #0d0f15;
    border-color: rgba(255, 255, 255, 0.05);
}
.scr-editor .script-box {
    background: #0f1118;
    border-color: rgba(255, 255, 255, 0.05);
}
.scr-chat-mark {
    background: linear-gradient(145deg, #8978ff, #6555d8);
    box-shadow: 0 0 0 3px rgba(120, 103, 242, 0.12);
}
.scr-chat-shortcuts button {
    border-color: rgba(255, 255, 255, 0.08);
    background: #171923;
}
.scr-chat-dock {
    border-color: rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: #151720;
}
.scr-chat-dock textarea {
    background: transparent;
}
.mobile-assistant-bar,
.app-mobile-menu,
.app-mobile-tabs {
    display: none;
}

@media (max-width: 960px) {
    .app {
        grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr) calc(
                62px + env(safe-area-inset-bottom)
            );
    }
    .app-status {
        display: none;
    }
    .app-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: 56px;
        gap: 0 9px;
        padding: 0 10px;
        backdrop-filter: none;
    }
    .app-brand {
        grid-column: 1;
        grid-row: 1;
    }
    .app-brand small {
        display: none;
    }
    .app-doc {
        display: grid !important;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    .app-doc em,
    .app-doc span {
        display: none;
    }
    .app-doc strong {
        font-size: 12px;
    }
    .app-tabs {
        display: none !important;
    }
    .app-mobile-tabs {
        position: fixed;
        z-index: 80;
        right: 0;
        bottom: 0;
        left: 0;
        height: calc(62px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        padding: 4px 4px env(safe-area-inset-bottom);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(15, 16, 23, 0.97);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(18px);
    }
    .app-mobile-tabs > a,
    .app-mobile-more > summary {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        padding: 4px 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #858195;
        font-size: 9px;
        font-weight: 650;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
    }
    .app-mobile-tabs > a.is-on,
    .app-mobile-more.is-on > summary,
    .app-mobile-more[open] > summary {
        background: rgba(120, 103, 242, 0.13);
        color: #d8d3ff;
    }
    .app-mobile-tab-icon {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
    }
    .app-mobile-tab-icon svg {
        width: 22px;
        height: 22px;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .app-mobile-more {
        position: relative;
        min-width: 0;
    }
    .app-mobile-more > summary {
        width: 100%;
        height: 100%;
        cursor: pointer;
        list-style: none;
    }
    .app-mobile-more > summary::-webkit-details-marker {
        display: none;
    }
    .app-mobile-more > div {
        position: absolute;
        right: 4px;
        bottom: calc(100% + 9px);
        width: min(220px, calc(100vw - 16px));
        display: grid;
        gap: 3px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 14px;
        background: #191b25;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    }
    .app-mobile-more > div a {
        padding: 12px;
        border-radius: 9px;
        color: var(--ink);
        font-size: 12px;
        font-weight: 600;
        text-align: left;
    }
    .app-mobile-more > div a.is-on,
    .app-mobile-more > div a:hover {
        background: rgba(120, 103, 242, 0.15);
    }
    .app-user {
        display: none;
    }
    .app-mobile-menu {
        position: relative;
        display: block;
        grid-column: 3;
        grid-row: 1;
    }
    .app-mobile-menu summary {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 10px;
        background: #171923;
        color: var(--ink);
        cursor: pointer;
        list-style: none;
        letter-spacing: 2px;
    }
    .app-mobile-menu summary::-webkit-details-marker {
        display: none;
    }
    .app-mobile-menu > div {
        position: absolute;
        z-index: 60;
        top: calc(100% + 7px);
        right: 0;
        width: 210px;
        display: grid;
        gap: 3px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 13px;
        background: #171923;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    }
    .app-mobile-menu a,
    .app-mobile-menu button {
        width: 100%;
        display: block;
        padding: 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--ink);
        font: inherit;
        font-size: 12px;
        text-align: left;
    }
    .app-mobile-menu a:hover,
    .app-mobile-menu button:hover {
        background: rgba(120, 103, 242, 0.14);
    }
    .app-body.is-start .app {
        grid-template-rows: 56px minmax(0, 1fr) 0;
    }
    .app-body.is-start .app-bar {
        grid-template-rows: 56px;
    }

    .scr,
    .scr.is-left-off,
    .scr.is-right-off,
    .scr.is-left-off.is-right-off {
        position: relative;
        display: block;
        height: 100%;
    }
    .scr-stage {
        height: 100%;
        padding-bottom: 58px;
    }
    .scr-stage > .scr-build-chat,
    .scr-quick-build {
        padding: 20px 16px;
    }
    .scr-right {
        position: absolute;
        z-index: 45;
        left: 0;
        right: 0;
        bottom: 0;
        height: 58px;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(18, 20, 29, 0.97);
        backdrop-filter: blur(18px);
        box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.28);
        transition: height 0.22s ease;
    }
    .scr-right:not(.has-mobile-assistant) {
        display: none;
    }
    .scr-right .dock-toggle,
    .scr-right .scr-context-cards,
    .scr-right > .scr-chat {
        display: none;
    }
    .mobile-assistant-bar {
        width: 100%;
        height: 57px;
        display: grid;
        grid-template-columns: 32px auto 1fr 24px;
        align-items: center;
        gap: 9px;
        padding: 0 14px;
        border: 0;
        background: transparent;
        color: var(--ink);
        text-align: left;
    }
    .mobile-assistant-bar span {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: linear-gradient(145deg, #8978ff, #6555d8);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
    }
    .mobile-assistant-bar b {
        font-size: 12px;
    }
    .mobile-assistant-bar small {
        color: var(--muted);
        font-size: 10px;
        text-align: right;
    }
    .mobile-assistant-bar i {
        color: var(--accent-2);
        font-style: normal;
        text-align: center;
    }
    .scr-right.is-mobile-open {
        height: min(74vh, 620px);
        padding: 0 12px 12px;
        border-radius: 18px 18px 0 0;
    }
    .scr-right.is-mobile-open .mobile-assistant-bar {
        margin: 0 -12px;
        width: calc(100% + 24px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .scr-right.is-mobile-open > .scr-chat {
        display: flex;
        margin: 0;
        padding-top: 10px;
        border: 0;
    }
}

@media (max-width: 620px) {
    .app-brand strong {
        font-size: 13px;
    }
    .app-tabs a {
        padding: 7px 9px;
        font-size: 10px;
    }
    .scr-bar {
        flex-wrap: wrap;
        gap: 7px;
        padding: 9px 10px;
    }
    .scr-title-field {
        flex: 1 1 100%;
    }
    .scr-title-field small {
        padding-left: 2px;
    }
    .scr-bar input[type="text"] {
        padding-left: 2px;
        font-size: 14px;
    }
    .scr-episode-nav {
        order: 2;
    }
    .scr-bar-actions {
        order: 3;
        margin-left: auto;
    }
    .scr-bar-actions .btn {
        min-height: 34px;
        padding: 4px 12px;
    }
    .scr-tools-menu summary {
        min-height: 34px;
    }
    .scr-tools-menu > div {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: 68px;
        width: min(260px, calc(100vw - 20px));
    }
    .scr-editor .script-box {
        padding: 24px 18px 90px;
        border: 0;
        font-size: 14px;
        line-height: 1.65;
    }
    .scr-review-view {
        padding: 20px 16px 90px;
        font-size: 14px;
    }
    .scr-chat-hello {
        padding: 10px 5px;
        text-align: left;
    }
    .scr-chat-dock {
        border-radius: 13px;
    }
    .create-flow {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .create-flow .modal-card {
        min-height: 100dvh;
        padding: 18px 16px;
    }
    .create-flow .modal-head {
        margin-bottom: 16px;
    }
    .create-step {
        padding-bottom: 8px;
    }
    .create-nav {
        position: sticky;
        bottom: 0;
        padding: 12px 0 max(4px, env(safe-area-inset-bottom));
        background: #14141e;
    }
}

.choice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.choice-row label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
}
.choice-row label:has(input:checked) {
    border-color: var(--accent);
    background: rgba(120, 103, 242, 0.12);
}

.series-batch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid rgba(120, 103, 242, 0.32);
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(120, 103, 242, 0.12),
        rgba(255, 255, 255, 0.025)
    );
}
.series-batch b {
    display: block;
    margin-bottom: 4px;
}
.series-batch p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}
.series-batch-progress {
    grid-column: 1 / -1;
}
.series-batch-progress span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
}
.series-batch-progress > i {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}
.series-batch-progress em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #aa92ff);
    transition: width 0.25s ease;
}
.series-batch.has-error {
    border-color: rgba(238, 100, 116, 0.45);
}
.series-batch.has-error .series-batch-progress span {
    color: #ff9eaa;
}

.script-health {
    padding: 14px;
    border-top: 1px solid var(--line);
}
.script-health h3 {
    margin: 0 0 10px;
    font-size: 12px;
}
.script-health h4 {
    margin: 16px 0 8px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.script-health-ok {
    margin: 0;
    color: #7bd8aa;
    font-size: 11px;
}
.script-health-issue {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(242, 174, 73, 0.28);
    border-radius: 10px;
    background: rgba(242, 174, 73, 0.07);
}
.script-health-issue strong,
.script-health-issue p {
    display: block;
}
.script-health-issue strong {
    margin-bottom: 4px;
    font-size: 11px;
}
.script-health-issue p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}
.generation-history {
    margin-top: 14px;
}
.generation-history summary {
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
}
.generation-attempt {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 10px;
}
.generation-attempt b {
    color: #ff9eaa;
}
.generation-attempt.is-ok b {
    color: #7bd8aa;
}
.generation-attempt span {
    color: var(--muted);
}
.generation-attempt p {
    grid-column: 1 / -1;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .series-batch {
        grid-template-columns: 1fr;
    }
    .series-batch .btn,
    .series-batch-progress {
        grid-column: 1;
        width: 100%;
    }
    .choice-row {
        grid-template-columns: 1fr;
    }
}

/* Beginner workflow: one clear action, technical controls on demand. */
.project-progress {
    position: relative;
    z-index: 25;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 174px;
    align-items: stretch;
    min-height: 70px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0f16;
    margin: -20px -22px 20px;
}
.project-progress:not(:has(.project-progress-continue)) {
    grid-template-columns: 180px minmax(0, 1fr);
}
.project-progress-continue {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 1px 6px;
    min-width: 0;
    padding: 8px 13px;
    border-left: 1px solid rgba(120, 103, 242, 0.25);
    color: #fff;
    background: rgba(120, 103, 242, 0.14);
}
.project-progress-continue:hover {
    background: rgba(120, 103, 242, 0.24);
}
.project-progress-continue > small {
    overflow: visible;
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.project-progress-continue > b {
    overflow: visible;
    color: var(--accent-2);
    font-size: 11px;
    text-overflow: clip;
    white-space: nowrap;
}
.project-progress-continue em {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--accent-2);
    font-size: 18px;
    font-style: normal;
    text-align: right;
}
.project-progress-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    gap: 3px 8px;
    padding: 10px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.project-progress-head span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.project-progress-head b {
    color: var(--accent-2);
    font-size: 12px;
}
.project-progress-head small {
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-progress ol,
.script-progress ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.project-progress li,
.script-progress li {
    position: relative;
    min-width: 0;
}
.project-progress li:not(:last-child)::after,
.script-progress li:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 25px;
    right: -16%;
    width: 32%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.project-progress li.is-done:not(:last-child)::after,
.script-progress li.is-done:not(:last-child)::after {
    background: rgba(94, 210, 157, 0.55);
}
.project-progress li:not(:last-child)::after {
    display: none;
}
.project-progress a,
.script-progress a {
    position: relative;
    z-index: 1;
    height: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 1px 7px;
    padding: 8px 10px;
    color: var(--muted);
}
.project-progress i,
.script-progress i {
    grid-row: 1 / span 2;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    align-self: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: #141721;
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
}
.project-progress a > span,
.script-progress a > span {
    overflow: hidden;
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-progress a > small,
.script-progress a > small {
    overflow: hidden;
    color: #777486;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-progress a.project-progress-continue {
    grid-template-columns: minmax(0, 1fr) 22px;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 1px 6px;
    padding: 8px 13px;
}
.project-progress a.project-progress-continue > small,
.project-progress a.project-progress-continue > b {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
.project-progress li.is-current a,
.script-progress li.is-current a {
    color: #fff;
    background: rgba(120, 103, 242, 0.1);
}
.project-progress li.is-current i,
.script-progress li.is-current i {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(120, 103, 242, 0.12);
}
.project-progress li.is-done a,
.script-progress li.is-done a {
    color: #b6ecd2;
}
.project-progress li.is-done i,
.script-progress li.is-done i {
    border-color: rgba(94, 210, 157, 0.5);
    background: rgba(94, 210, 157, 0.13);
    color: #77dfae;
}

.script-progress {
    position: relative;
    z-index: 24;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 60px;
    border-bottom: 1px solid rgba(120, 103, 242, 0.18);
    background: #12141c;
}
.script-progress > div {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 9px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.script-progress > div b {
    color: var(--accent-2);
    font-size: 11px;
}
.script-progress > div small {
    color: var(--muted);
    font-size: 9px;
}
.script-progress a {
    padding-block: 6px;
}

.app-scroll:has(> .scr),
.app-scroll:has(> .prod) {
    display: flex;
    flex-direction: column;
}
.app-scroll:has(> .scr) > .project-progress,
.app-scroll:has(> .prod) > .project-progress {
    margin: 0;
}
.app-scroll > .scr,
.app-scroll > .prod {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* The progress rail is the desktop navigation; the header stays focused on the project and account. */
.app-bar > .app-tabs {
    display: none;
}

.plan-subnav {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 18px;
    padding: 5px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: #11131b;
}
.plan-subnav a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}
.plan-subnav a.is-on,
.plan-subnav a:hover {
    color: #fff;
    background: rgba(120, 103, 242, 0.16);
}

.simple-advanced {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.02);
}
.simple-advanced > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.simple-advanced > summary::-webkit-details-marker {
    display: none;
}
.simple-advanced > summary::after {
    content: "+";
    margin-left: auto;
    color: var(--accent-2);
    font-size: 17px;
}
.simple-advanced[open] > summary::after {
    content: "−";
}
.simple-advanced[open] > summary {
    color: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.simple-advanced > :not(summary) {
    margin: 10px;
}
.simple-advanced.compact {
    display: inline-block;
    vertical-align: top;
}
.simple-advanced.compact > summary {
    min-height: 38px;
}
.simple-advanced.compact[open] {
    display: inline-grid;
    gap: 4px;
}
.manual-add {
    margin: 0 0 22px;
}
.manual-add .inline-add {
    margin: 0;
}

.audio-simple {
    display: grid;
    gap: 10px;
    margin: 18px 0 28px;
}
.audio-simple > details {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: #11131b;
    overflow: hidden;
}
.audio-simple > details > summary {
    min-height: 68px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
}
.audio-simple > details > summary::-webkit-details-marker {
    display: none;
}
.audio-simple > details > summary b {
    font-size: 14px;
}
.audio-simple > details > summary span {
    color: var(--muted);
    font-size: 11px;
}
.audio-simple > details > summary::after {
    content: "+";
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--accent-2);
    font-size: 20px;
}
.audio-simple > details[open] > summary::after {
    content: "−";
}
.audio-simple > details[open] > summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.audio-simple .side-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.doc-card {
    position: relative;
    display: grid;
}
.doc-card-main {
    display: grid;
    min-width: 0;
    color: inherit;
}
.doc-continue {
    position: absolute;
    right: 13px;
    bottom: 13px;
    min-height: 36px;
}
.doc-card .doc-meta {
    padding-bottom: 62px;
}

/* The old bottom tool dock repeated every top-level page. All tools remain in the five-step navigation. */
.prod {
    grid-template-rows: minmax(0, 1fr);
}
.prod > .prod-dock {
    display: none;
}
.prod.is-docked {
    grid-template-rows: minmax(0, 1fr);
}
.prod-canvas {
    height: calc(100dvh - 82px - 72px);
}
.simple-action-row {
    align-items: center;
}
.simple-action-row .btn-solid {
    min-width: 150px;
}
.storyboard-primary-actions {
    align-items: flex-start;
}
.board-edit .simple-advanced {
    margin: 2px 0;
}
.edit-help {
    margin: 14px 0;
}
.prod-advanced-panel > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.prod-advanced-panel > summary::-webkit-details-marker {
    display: none;
}
.prod-advanced-panel > summary::after {
    content: "+";
    margin-left: auto;
    color: var(--accent-2);
    font-size: 18px;
}
.prod-advanced-panel[open] > summary::after {
    content: "−";
}
.prod-advanced-panel[open] > summary {
    margin-bottom: 12px;
}

@media (max-width: 960px) {
    .project-progress {
        grid-template-columns: 1fr;
        min-height: 76px;
    }
    .project-progress-head {
        grid-template-columns: auto auto 1fr;
        gap: 8px;
        min-height: 26px;
        padding: 5px 9px 2px;
        border: 0;
    }
    .project-progress-head small {
        grid-column: 3;
        text-align: right;
    }
    .project-progress ol {
        min-height: 48px;
    }
    .project-progress-continue {
        grid-template-columns: auto auto 1fr;
        grid-template-rows: 1fr;
        justify-content: center;
        min-height: 42px;
        padding: 8px 12px;
        border-top: 1px solid rgba(120, 103, 242, 0.22);
        border-left: 0;
        text-align: center;
    }
    .project-progress a.project-progress-continue {
        grid-template-columns: auto auto 1fr;
        grid-template-rows: 1fr;
        justify-content: center;
        padding: 8px 12px;
    }
    .project-progress-continue small,
    .project-progress-continue b {
        align-self: center;
    }
    .project-progress-continue em {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
    .project-progress a,
    .script-progress a {
        grid-template-columns: 1fr;
        grid-template-rows: 24px auto;
        justify-items: center;
        gap: 1px;
        padding: 3px 2px 5px;
        text-align: center;
    }
    .project-progress i,
    .script-progress i {
        grid-row: 1;
        width: 22px;
        height: 22px;
        font-size: 9px;
    }
    .project-progress a > span,
    .script-progress a > span {
        font-size: 8px;
    }
    .project-progress a > small,
    .script-progress a > small {
        display: none;
    }
    .project-progress li:not(:last-child)::after,
    .script-progress li:not(:last-child)::after {
        top: 14px;
        right: -25%;
        width: 50%;
    }
    .script-progress {
        grid-template-columns: 1fr;
        min-height: 70px;
    }
    .script-progress > div {
        grid-template-columns: 1fr auto;
        min-height: 25px;
        padding: 4px 9px 1px;
        border: 0;
    }
    .script-progress > div small {
        text-align: right;
    }
    .script-progress ol {
        min-height: 44px;
    }
    .plan-subnav {
        width: 100%;
        margin: 8px 0 14px;
    }
    .plan-subnav a {
        flex: 1 0 auto;
        justify-content: center;
        min-height: 42px;
    }
    .storyboard-primary-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .storyboard-primary-actions > form,
    .storyboard-primary-actions .btn,
    .storyboard-primary-actions .simple-advanced {
        width: 100%;
    }
    .storyboard-primary-actions .simple-advanced.compact {
        display: block;
    }
    .simple-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }
    .simple-action-row .btn,
    .simple-action-row .simple-advanced {
        width: 100%;
    }
    .audio-simple > details > summary {
        min-height: 64px;
        padding-inline: 14px;
    }
    .doc-continue {
        position: static;
        width: calc(100% - 24px);
        margin: -50px 12px 12px;
        z-index: 2;
    }
    .prod-canvas {
        height: min(62dvh, 560px);
        min-height: 340px;
    }
}

/* Mobile workflow: keep every step reachable without desktop side rails. */
@media (max-width: 960px) {
    .app-bar {
        padding-top: env(safe-area-inset-top);
    }
    .app-tabs {
        justify-content: flex-start;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
    }
    .app-tabs a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        scroll-snap-align: start;
    }
    .app-mobile-menu summary {
        min-width: 42px;
        min-height: 42px;
    }

    .scr > .scr-col:first-child {
        display: flex;
        height: 108px;
        padding: 7px 8px 8px;
        overflow: hidden;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: #10121a;
    }
    .scr > .scr-col:first-child .prod-head,
    .scr > .scr-col:first-child .scr-episode-head {
        margin: 0 0 6px;
        padding: 0 2px;
        border: 0;
    }
    .scr > .scr-col:first-child .scr-episode-progress {
        display: none;
    }
    .scr > .scr-col:first-child .scr-plan-link {
        margin: 0 0 4px auto;
        font-size: 10px;
    }
    .scr > .scr-col:first-child .prod-scenes {
        display: flex;
        flex: 1;
        gap: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 2px 4px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .scr > .scr-col:first-child .prod-scenes::-webkit-scrollbar {
        display: none;
    }
    .scr > .scr-col:first-child .prod-scene {
        flex: 0 0 min(185px, 72vw);
        min-height: 58px;
        padding: 7px 9px;
        scroll-snap-align: start;
    }
    .scr > .scr-col:first-child .prod-scene strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .scr > .scr-col:first-child .prod-scene small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .scr-stage {
        height: calc(100% - 108px);
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .scr-welcome {
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
    }
    .scr-stage > .scr-build-chat {
        margin: 0 auto;
    }
    .scr-stub-layout {
        min-height: 100%;
        overflow: visible;
        padding: 12px 12px 88px;
    }
    .scr-stub-layout > .scr-build-chat {
        flex: 0 0 auto;
        max-height: none;
        min-height: 360px;
    }
    .scr-stub-preview.is-open {
        flex: 0 0 auto;
        min-height: 420px;
    }
    .scr-stub-editor textarea {
        min-height: 330px;
    }

    .scr-bible {
        flex: 0 0 auto;
        min-height: 100%;
        overflow: visible;
    }
    .scr-bible-form {
        flex: 0 0 auto;
        min-height: 70vh;
    }
    .scr-bible .prod-head {
        position: sticky;
        top: 0;
        z-index: 12;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(15, 17, 24, 0.96);
        backdrop-filter: blur(14px);
    }
    .scr-bible .prod-head .scr-scale {
        display: none;
    }
    .scr-bible-form .prod-head .btn {
        margin: 0;
        min-height: 40px;
    }
    .scr-bible .scr-paper {
        flex: 0 0 auto;
        min-height: 64vh;
    }
    .scr-bible .script-box {
        min-height: 64vh;
        padding: 18px 16px 100px;
    }
    .scr-bible > .alert-ok,
    .scr-stage > .alert-ok,
    .scr-stage > .form-error {
        margin: 9px 10px 0;
    }
    [data-series-next-step] {
        display: grid;
        gap: 9px;
    }
    [data-series-next-step] .btn {
        width: 100%;
        min-height: 42px;
    }
    .series-batch {
        margin: 10px;
    }

    .scr-right {
        position: fixed;
        bottom: calc(62px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
    }
    .scr-right.is-mobile-open {
        height: min(78dvh, 680px);
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .scr-right.is-mobile-open > .scr-chat {
        min-height: 0;
        overflow: hidden;
    }
    .scr-right.is-mobile-open .scr-chat-log {
        min-height: 0;
    }

    /* The desktop dock duplicates the top workflow navigation and its
       fixed-height content spills over the production canvas on phones. */
    .prod,
    .prod.is-docked {
        grid-template-rows: minmax(0, 1fr);
    }
    .prod > .prod-dock {
        display: none;
    }
    .prod-main,
    .prod-main.is-left-off,
    .prod-main.is-right-off,
    .prod-main.is-left-off.is-right-off {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        overflow-y: auto;
    }
    .prod-main > .prod-col:first-child {
        position: relative;
        z-index: 8;
        display: block;
        width: 100%;
        padding: 8px;
        overflow: hidden;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .prod-main > .prod-col:first-child .prod-head {
        margin-bottom: 7px;
    }
    .prod-main > .prod-col:first-child .prod-ep select {
        min-height: 40px;
    }
    .prod-main > .prod-col:first-child .prod-add {
        display: inline-block;
        margin: 0 6px 7px 0;
    }
    .prod-main > .prod-col:first-child .prod-add button,
    .prod-main > .prod-col:first-child form .btn {
        min-height: 40px;
    }
    .prod-main > .prod-col:first-child .prod-scenes {
        display: flex;
        gap: 7px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1px 1px 5px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .prod-main > .prod-col:first-child .prod-scenes::-webkit-scrollbar {
        display: none;
    }
    .prod-main > .prod-col:first-child .prod-scene {
        flex: 0 0 min(180px, 70vw);
        scroll-snap-align: start;
    }
    .prod-main > .prod-col:first-child .prod-meta {
        display: none;
    }
    .prod-stage {
        padding: 12px 12px 36px;
    }
    .prod-stage-bar {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .prod-stage-bar h2 {
        font-size: 19px;
    }
    .prod-canvas {
        height: min(52vh, 440px);
        min-height: 260px;
        border-radius: 12px;
    }
    .prod-scene-edit {
        gap: 12px;
    }
    .prod-scene-chat {
        min-height: 320px;
        max-height: none;
    }
    .prod-prompt-row {
        flex-wrap: wrap;
    }
    .prod-prompt-row select {
        min-height: 42px;
        flex: 1 1 140px;
    }
    .prod-prompt-row .btn {
        min-height: 42px;
        flex: 1 1 auto;
    }
    .prod-pane.is-film {
        grid-template-rows: 98px;
    }
    .prod-pane.is-film .prod-strip {
        padding-right: 12px;
    }
    .dock-split {
        grid-template-columns: 1fr;
        height: auto;
    }
    .dock-list {
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .dock-list > b {
        flex: 0 0 auto;
    }
    .dock-list .prod-scene {
        flex: 0 0 170px;
    }
    .dock-main {
        overflow: visible;
        padding: 42px 10px 16px;
    }
    .dock-script .script-box {
        max-height: none;
        min-height: 46vh;
    }
    .dock-toolbar {
        padding-right: 0;
    }
    .dock-page-btn {
        min-height: 38px;
    }
}

@media (max-width: 620px) {
    .app {
        grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr) calc(
                62px + env(safe-area-inset-bottom)
            );
    }
    .app-bar {
        min-width: 0;
    }
    .app-brand {
        max-width: 42px;
    }
    .app-brand strong {
        display: none;
    }
    .app-doc strong {
        font-size: 11px;
    }
    .app-scroll:not(:has(.scr)):not(:has(.prod)) {
        padding: 14px 12px 30px;
    }

    .scr > .scr-col:first-child {
        height: 102px;
    }
    .scr-stage {
        height: calc(100% - 102px);
    }
    .scr-bar-actions {
        width: 100%;
        margin-left: 0;
    }
    .scr-bar-actions .scr-tools-menu {
        flex: 1;
    }
    .scr-bar-actions .scr-tools-menu summary {
        justify-content: center;
    }
    .scr-bar-actions > .btn {
        flex: 1;
    }
    .scr-episode-nav {
        min-height: 40px;
    }
    .scr-editor {
        min-height: 100%;
    }
    .scr-editor .scr-paper {
        flex: 0 0 auto;
        min-height: 70vh;
    }
    .scr-editor .script-box {
        min-height: 70vh;
    }
    .scr-quick-build {
        padding: 16px 12px 22px;
    }
    .scr-quick-head {
        gap: 10px;
        margin-bottom: 16px;
    }
    .scr-quick-head h2 {
        font-size: 24px;
    }
    .scr-quick-actions .btn {
        width: 100%;
        min-height: 46px;
    }
    .scr-chat-dock textarea {
        font-size: 16px;
    }
    .mobile-assistant-bar {
        height: 60px;
        padding: 0 12px;
    }

    .series-batch {
        padding: 13px;
    }
    .series-batch .btn {
        min-height: 46px;
    }
    .prod-stage {
        padding-inline: 10px;
    }
    .prod-canvas {
        height: min(48vh, 390px);
        min-height: 230px;
    }
    .prod-prompt-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .prod-prompt-row select {
        grid-column: 1 / -1;
        width: 100%;
    }
    .prod-prompt-row .btn {
        width: 100%;
    }
    .dock-toolbar {
        align-items: stretch;
    }
    .dock-toolbar b,
    .dock-toolbar input,
    .dock-toolbar .btn {
        width: 100%;
    }
    .dock-toolbar input[type="text"] {
        min-width: 0;
        min-height: 42px;
    }
    .dock-grid,
    .dock-audio {
        grid-template-columns: 1fr;
    }
    .dock-pad {
        padding-inline: 10px;
    }
}

/* Mobile hardening: use one predictable scroll surface and never clip controls. */
@media (max-width: 960px) {
    .scr,
    .scr.is-left-off,
    .scr.is-right-off,
    .scr.is-left-off.is-right-off {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 108px minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
    }
    .scr > .scr-col:first-child {
        height: auto;
        min-height: 0;
    }
    .scr-stage {
        height: auto;
        min-height: 0;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
    .scr-editor {
        min-height: 0;
    }
    .scr-editor .script-box,
    .scr-review-view {
        scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .app-work,
    .app-canvas,
    .app-scroll,
    .section,
    .section-head,
    .block,
    .card,
    .board,
    .board-card,
    .season,
    .form-wide,
    .action-row,
    .action-row form {
        min-width: 0;
        max-width: 100%;
    }

    .app-scroll:not(:has(.scr)):not(:has(.prod)) {
        width: 100%;
        padding: 16px 14px calc(26px + env(safe-area-inset-bottom));
    }

    .section-head {
        width: 100%;
        margin-bottom: 20px;
    }
    .section-head h1,
    .section-head h2,
    .section-head h3,
    .block-head h3,
    .project b,
    .folder-card strong {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .split-head {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ep-switch {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ep-switch::-webkit-scrollbar {
        display: none;
    }
    .ep-switch a {
        flex: 0 0 auto;
    }

    .action-row {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .action-row form,
    .action-row .btn,
    .action-row button {
        width: 100%;
    }

    input,
    select,
    textarea,
    button,
    .btn {
        min-width: 0;
        max-width: 100%;
    }

    .season header,
    .season li,
    .block-head,
    .video-meta,
    .note-meta,
    .look-head-meta {
        flex-wrap: wrap;
    }

    .guide-list li {
        grid-template-columns: 32px minmax(0, 1fr);
    }
    .guide-list li > :last-child {
        grid-column: 2;
    }

    .scr:has(.scr-stub-layout) {
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .scr:has(.scr-stub-layout) .scr-stage {
        height: auto;
        min-height: calc(100% - 108px);
        overflow: visible;
        padding-bottom: 18px;
    }
    .scr:has(.scr-stub-layout) .scr-stub-layout {
        min-height: 0;
        overflow: visible;
        padding-bottom: 32px;
    }
}

@media (max-width: 620px) {
    .scr,
    .scr.is-left-off,
    .scr.is-right-off,
    .scr.is-left-off.is-right-off {
        grid-template-rows: 102px minmax(0, 1fr);
    }
    .scr:has(.scr-stub-layout) .scr-stage {
        min-height: calc(100% - 102px);
    }
    .empty {
        padding: 32px 18px;
    }
    .empty h3 {
        font-size: 28px;
    }
    .board-card {
        padding: 10px;
    }
}
.start-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.start-actions form {
    margin: 0;
}
.test-ai-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid rgba(128, 92, 246, 0.32);
    border-radius: 14px;
    background: rgba(128, 92, 246, 0.08);
    color: #b9addf;
}
.test-ai-note b {
    color: #fff;
    white-space: nowrap;
}
.test-ai-note span {
    font-size: 13px;
}
@media (max-width: 700px) {
    .start-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .start-actions form:first-child {
        grid-column: 1/-1;
    }
    .start-actions .btn {
        width: 100%;
    }
    .test-ai-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 700px) {
    .start-create-button {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .create-brief-help {
        display: block;
    }
    .create-voice-status {
        min-height: 14px;
        text-align: left;
    }
}

/* Character workflow: one clear decision at a time. */
.character-head {
    max-width: none;
    margin-bottom: 18px;
}
.character-head h2 {
    margin-bottom: 6px;
}
.character-head p {
    max-width: 720px;
}

.character-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 18px;
}
.character-steps a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: #11131b;
}
.character-steps a:hover,
.character-steps a.is-current {
    border-color: rgba(120, 103, 242, 0.55);
    background: rgba(120, 103, 242, 0.09);
}
.character-steps i,
.character-step-head > i,
.character-more-looks summary i {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}
.character-steps span {
    min-width: 0;
}
.character-steps b,
.character-steps small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.character-steps b {
    font-size: 12px;
}
.character-steps small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}
.character-mobile-generate {
    display: none;
}

.card-desk.character-desk {
    grid-template-columns: minmax(430px, 1.25fr) minmax(320px, 0.9fr) minmax(
            250px,
            0.75fr
        );
    gap: 16px;
}
.card-desk.character-desk.is-chat-off {
    grid-template-columns: minmax(430px, 1.35fr) minmax(320px, 0.9fr) 92px;
}
.character-desk > .character-form-simple {
    order: 1;
}
.character-desk > .character-look-card {
    order: 2;
}
.character-desk > .card-chat {
    order: 3;
}
.character-form-simple .scr-paper,
.character-look-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: #101118;
}
.character-form-simple .scr-paper {
    padding: 16px;
}
.character-look-card {
    padding: 16px;
}

.character-step-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}
.character-step-head h3 {
    margin: 0 0 2px;
    font-size: 18px;
}
.character-step-head p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}
.character-form-simple textarea {
    min-height: 88px;
}
.character-form-simple #appearance {
    min-height: 126px;
}

.character-story-details,
.character-more-looks {
    margin: 8px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
    overflow: hidden;
}
.character-story-details > summary,
.character-more-looks > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 10px 13px;
    cursor: pointer;
    list-style: none;
}
.character-story-details > summary::-webkit-details-marker,
.character-more-looks > summary::-webkit-details-marker {
    display: none;
}
.character-story-details > summary::after,
.character-more-looks > summary::after {
    content: "+";
    color: var(--accent-2);
    font-size: 20px;
}
.character-story-details[open] > summary::after,
.character-more-looks[open] > summary::after {
    content: "−";
}
.character-story-details summary span,
.character-story-details summary small {
    display: block;
}
.character-story-details summary span {
    font-size: 12px;
    font-weight: 700;
}
.character-story-details summary small,
.character-more-looks summary small {
    color: var(--muted);
    font-size: 10px;
}
.character-story-details > div,
.character-more-body {
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.character-story-details .field:last-child {
    margin-bottom: 0;
}

.character-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px -16px -16px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(16, 17, 24, 0.96);
    backdrop-filter: blur(12px);
}
.character-save-bar span {
    color: var(--muted);
    font-size: 10px;
}

.look-primary {
    max-width: 340px;
    margin: 0 auto;
}
.look-primary .look-slot {
    padding: 12px;
    border-radius: 12px;
}
.look-primary .look-slot img,
.look-primary .look-slot .still-empty {
    max-height: 390px;
}
.character-step-tip {
    margin: 12px 0 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}
.character-more-looks > summary > span {
    display: flex;
    align-items: center;
    gap: 10px;
}
.character-more-looks h4 {
    margin: 14px 0 8px;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.character-more-looks h4:first-child {
    margin-top: 0;
}
.character-more-body .look-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.character-desk .card-chat.is-off {
    min-height: 54px;
    padding: 6px;
}
.character-desk .card-chat.is-off .chat-toggle {
    position: static;
    width: 100%;
    height: 40px;
    transform: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .card-desk.character-desk,
    .card-desk.character-desk.is-chat-off {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    }
    .character-desk > .card-chat {
        grid-column: 1 / -1;
    }
    .character-desk .card-chat.is-off {
        min-height: 52px;
    }
}

@media (max-width: 760px) {
    .character-head {
        margin-bottom: 12px;
    }
    .character-head .look-head-meta {
        width: 100%;
    }
    .character-head .look-head-meta .btn {
        width: 100%;
    }
    .character-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }
    .character-steps a {
        align-items: flex-start;
        gap: 6px;
        padding: 9px 7px;
    }
    .character-steps i {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
    }
    .character-steps b {
        font-size: 10px;
        white-space: normal;
        line-height: 1.25;
    }
    .character-steps small {
        display: none;
    }
    .card-desk.character-desk,
    .card-desk.character-desk.is-chat-off {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .character-desk > .character-form-simple,
    .character-desk > .character-look-card,
    .character-desk > .card-chat {
        width: 100%;
    }
    .character-form-simple .scr-paper,
    .character-look-card {
        padding: 13px;
        border-radius: 13px;
    }
    .character-form-simple .grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }
    .character-form-simple .field {
        margin-bottom: 12px;
    }
    .character-form-simple textarea {
        font-size: 16px;
    }
    .character-save-bar {
        position: static;
        margin: 14px -13px -13px;
        padding: 10px 13px calc(10px + env(safe-area-inset-bottom));
    }
    .character-save-bar span {
        display: none;
    }
    .character-save-bar .btn {
        width: 100%;
        min-height: 46px;
    }
    .look-primary {
        max-width: 300px;
    }
    .character-more-body .look-slots {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .character-more-body {
        padding: 10px;
    }
    .character-more-body .look-slot {
        padding: 8px;
    }
    .character-more-body .look-file {
        display: none;
    }
    .character-more-body .look-slot .btn {
        padding-inline: 8px;
        font-size: 10px;
    }
    .character-desk .card-chat:not(.is-off) {
        min-height: 420px;
    }
    .character-mobile-generate {
        position: fixed;
        right: 10px;
        bottom: calc(70px + env(safe-area-inset-bottom));
        left: 10px;
        z-index: 48;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 11px 10px 14px;
        border: 1px solid rgba(128, 103, 246, 0.55);
        border-radius: 14px;
        background: rgba(18, 18, 28, 0.96);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(14px);
    }
    .character-mobile-generate span,
    .character-mobile-generate b,
    .character-mobile-generate small {
        display: block;
    }
    .character-mobile-generate b {
        font-size: 12px;
    }
    .character-mobile-generate small {
        margin-top: 2px;
        color: var(--muted);
        font-size: 9px;
    }
    .character-mobile-generate .btn {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 9px 16px;
    }
    .character-mobile-generate + .form-error,
    .character-mobile-generate ~ .character-desk {
        padding-bottom: 82px;
    }
}

@media (max-width: 430px) {
    .character-form-simple .grid-2 {
        grid-template-columns: 1fr;
    }
    .character-more-body .look-slots {
        grid-template-columns: 1fr;
    }
    .character-more-body .look-slot {
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: start;
    }
    .character-more-body .look-slot header {
        grid-column: 1 / -1;
    }
    .character-more-body .look-slot img,
    .character-more-body .look-slot .still-empty {
        width: 92px;
    }
}