/*
 * Panel studios, clean shell (7 Nov 2026) — AI Comic Studio and AI Manga
 * Generator share this. Loaded last (public/tool.php), so it restyles the
 * studio over manga-creator.css, comic-creator.css and the two earlier layers
 * without touching them; removing its one line in tool.php rolls it back.
 *
 * Owner: "just redo the comic generator and manga generator app designs and
 * make them more clean, user friendly, and easy to get to what will be the
 * most popular features". What people use: panel art (515 calls in 30 days),
 * then the HD pass; script breakdown and Next page are rare. So the page reads
 * story box → Make the art → change it → next page, and everything else sits
 * one tap away in a menu. Type and icons follow the owner's brief (Apple-style
 * system type, line icons, one primary action per screen).
 *
 * Markup moves (story first, language under More settings, the next-step bar
 * as the sidebar's footer, one chapter hides its picker) are done by
 * writing-tools-panel-studio-clean.js; every id stays the same.
 */

#etMangaCreator {
    --ps-bg: #0a0a0c;
    --ps-surface: #131317;
    --ps-surface-2: #1a1a20;
    --ps-raise: #202027;
    --ps-line: rgba(255, 255, 255, 0.08);
    --ps-line-strong: rgba(255, 255, 255, 0.14);
    --ps-text: #f4f4f6;
    --ps-muted: #a1a1ad;
    --ps-faint: #6f6f7b;
    --ps-accent: #2dd4bf;
    --ps-accent-ink: #032a24;
    --ps-accent-soft: rgba(45, 212, 191, 0.12);
    --ps-radius: 14px;
    --ps-radius-sm: 10px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.005em;
    color: var(--ps-text);
    background: var(--ps-bg) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 20px !important;
    padding: 12px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset !important;
}

/* ── Top bar: steps · status · file actions ─────────────────────────────── */
#etMangaCreator .et-mgc-studio-bar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "steps meta actions";
    align-items: center;
    gap: 12px;
    margin: 0 0 10px !important;
    padding: 2px 2px 12px !important;
    background: var(--ps-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ps-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}
#etMangaCreator .et-mgc-studio-bar__meta {
    grid-area: meta;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap !important;
    font-size: 12px !important;
    color: var(--ps-faint) !important;
    white-space: nowrap;
    overflow: hidden;
}
#etMangaCreator .et-mgc-studio-bar__meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 12px !important;
    color: var(--ps-faint) !important;
}
#etMangaCreator .et-mgc-studio-bar__meta > span + span::before {
    content: "·";
    margin-right: 8px;
    color: var(--ps-faint);
}
#etMangaCreator .et-mgc-studio-bar__meta > span[hidden] + span::before,
#etMangaCreator .et-mgc-studio-bar__meta > span:empty + span::before {
    content: none;
}
#etMangaCreator .et-mgc-studio-bar__actions {
    grid-area: actions;
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap !important;
}
#etMangaCreator .et-mgc-studio-bar__actions-primary,
#etMangaCreator .et-mgc-studio-bar__file-actions,
#etMangaCreator .et-mgc-studio-bar__actions-secondary {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    flex-wrap: nowrap !important;
}

/* One quiet button style for every chrome control in the studio. */
#etMangaCreator .et-mgc-studio-bar__export,
#etMangaCreator .et-mgc-studio-bar__new,
#etMangaCreator #et-mgc-export-wizard,
#etMangaCreator #et-mgc-new-project,
#etMangaCreator .et-mgc-studio-more__trigger,
#etMangaCreator #et-mgc-studio-more > summary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ps-text) !important;
    background: var(--ps-surface-2) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
#etMangaCreator #et-mgc-export-wizard:hover,
#etMangaCreator #et-mgc-new-project:hover,
#etMangaCreator #et-mgc-studio-more > summary:hover {
    background: var(--ps-raise) !important;
    border-color: var(--ps-line-strong) !important;
}
#etMangaCreator #et-mgc-studio-more > summary {
    width: 34px !important;
    padding: 0 !important;
}

/* Steps as one segmented control. */
#etMangaCreator .et-mgc-workflow-wrap {
    grid-area: steps;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    width: auto !important;
    min-height: 0 !important;
}
#etMangaCreator .et-mgc-workflow {
    display: inline-flex !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 3px !important;
    list-style: none;
    background: var(--ps-surface) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 999px !important;
    width: auto !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-workflow__item {
    margin: 0 !important;
    flex: 0 0 auto !important;
}
#etMangaCreator .et-mgc-workflow__item::before,
#etMangaCreator .et-mgc-workflow__item::after {
    content: none !important;
    display: none !important;
}
#etMangaCreator .et-mgc-workflow__step {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px 0 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ps-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    white-space: nowrap;
}
#etMangaCreator .et-mgc-workflow__step::after,
#etMangaCreator .et-mgc-workflow__step::before {
    content: none !important;
    display: none !important;
}
#etMangaCreator .et-mgc-workflow__num {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--ps-muted) !important;
    background: var(--ps-raise) !important;
    border: 0 !important;
    border-radius: 999px !important;
}
/* A finished step shows its tick alone: the size above overrode the
   font-size: 0 that hides the number, and it read "✓1". */
#etMangaCreator .et-mgc-workflow__step.is-done:not(.is-current) .et-mgc-workflow__num {
    font-size: 0 !important;
    color: var(--ps-accent) !important;
    background: var(--ps-accent-soft) !important;
}
#etMangaCreator .et-mgc-workflow__step.is-done:not(.is-current) .et-mgc-workflow__num::before {
    font-size: 11px;
    color: var(--ps-accent);
}
#etMangaCreator .et-mgc-workflow__desc {
    display: none !important;
}
#etMangaCreator .et-mgc-workflow__label {
    font-size: 13px !important;
    font-weight: 600 !important;
}
#etMangaCreator .et-mgc-workflow__step[aria-selected="true"] {
    color: var(--ps-text) !important;
    background: var(--ps-raise) !important;
}
#etMangaCreator .et-mgc-workflow__step[aria-selected="true"] .et-mgc-workflow__num {
    color: var(--ps-accent-ink) !important;
    background: var(--ps-accent) !important;
}
#etMangaCreator .et-mgc-workflow__step:disabled,
#etMangaCreator .et-mgc-workflow__step[aria-disabled="true"] {
    opacity: 0.55;
}

/* ── Page strip: chapter · pages · page tools ───────────────────────────── */
#etMangaCreator .et-mgc-page-strip {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px !important;
    padding: 0 2px !important;
    min-height: 40px;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    flex-wrap: nowrap !important;
}
#etMangaCreator .et-mgc-page-strip__chapter {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
#etMangaCreator.ps-one-chapter .et-mgc-page-strip__chapter {
    display: none !important;
}
#etMangaCreator #et-mgc-chapter-select {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 30px 0 12px !important;
    font-size: 13px !important;
    color: var(--ps-text) !important;
    background-color: var(--ps-surface-2) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 999px !important;
    width: auto !important;
}
#etMangaCreator .et-mgc-page-strip__nav {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
#etMangaCreator .et-mgc-page-strip__list {
    display: flex !important;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}
#etMangaCreator .et-mgc-page-strip__list::-webkit-scrollbar { display: none; }
#etMangaCreator .et-mgc-page-tab {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ps-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-page-tab[aria-current="page"],
#etMangaCreator .et-mgc-page-tab.is-active,
#etMangaCreator .et-mgc-page-tab.active {
    color: var(--ps-text) !important;
    background: var(--ps-raise) !important;
    border-color: var(--ps-line-strong) !important;
}
#etMangaCreator .et-mgc-page-strip__tools {
    display: flex !important;
    gap: 2px;
    flex: 0 0 auto;
}
/* Icon buttons: no boxes, a soft hover. */
#etMangaCreator .et-mgc-page-nav,
#etMangaCreator .et-mgc-page-strip__tools > button,
#etMangaCreator #et-mgc-add-chapter,
#etMangaCreator .et-mgc-canvas-tool-group > button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    color: var(--ps-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 15px !important;
}
#etMangaCreator .et-mgc-page-nav:hover:not(:disabled),
#etMangaCreator .et-mgc-page-strip__tools > button:hover:not(:disabled),
#etMangaCreator .et-mgc-canvas-tool-group > button:hover:not(:disabled) {
    color: var(--ps-text) !important;
    background: var(--ps-surface-2) !important;
}
#etMangaCreator .et-mgc-page-nav:disabled,
#etMangaCreator .et-mgc-page-strip__tools > button:disabled {
    opacity: 0.35;
}

/* AI next: one pill with its caret. The rule above sized every button in the
   tools 34px wide, this one too, and its label and "Page 3 full (script, art,
   lettering) — …" line spilled over the page icons. The line stays in the
   button's title; the pill says what it does. */
#etMangaCreator .et-mgc-next-page-ai-group {
    display: inline-flex !important;
    align-items: stretch;
    margin-left: 6px;
    flex: 0 0 auto;
}
#etMangaCreator .et-mgc-next-page-ai-group[hidden] {
    display: none !important;
}
#etMangaCreator .et-mgc-next-page-ai-group > .btn {
    height: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center;
    color: var(--ps-accent) !important;
    background: var(--ps-accent-soft) !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
}
#etMangaCreator .et-mgc-next-page-ai-group > .et-mgc-next-page-ai-btn {
    padding: 0 10px 0 14px !important;
    border-radius: 999px 0 0 999px !important;
}
#etMangaCreator .et-mgc-next-page-ai-group > .et-mgc-next-page-ai-split {
    min-width: 30px !important;
    padding: 0 10px 0 6px !important;
    margin-left: 1px !important;
    border-radius: 0 999px 999px 0 !important;
    justify-content: center;
}
#etMangaCreator .et-mgc-next-page-ai-group > .btn:hover:not(:disabled) {
    background: rgba(45, 212, 191, 0.2) !important;
}
#etMangaCreator .et-mgc-next-page-ai-group > .btn:disabled {
    opacity: 0.45;
}
#etMangaCreator .et-mgc-next-page-ai-group > .btn :is(span, i) {
    color: inherit !important;
}
#etMangaCreator .et-mgc-next-page-ai-btn__label {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
/* The pages and their arrows stay one row; the arrow wrapped under them. */
#etMangaCreator .et-mgc-page-strip__nav {
    flex-wrap: nowrap !important;
}
@media (max-width: 575.98px) {
    #etMangaCreator .et-mgc-page-strip {
        gap: 4px;
    }
    #etMangaCreator .et-mgc-next-page-ai-group > .et-mgc-next-page-ai-btn {
        padding: 0 6px 0 12px !important;
    }
    #etMangaCreator .et-mgc-next-page-ai-btn__label {
        font-size: 12px !important;
    }
}
#etMangaCreator .et-mgc-next-page-ai-btn__sub {
    display: none !important;
}

/* ── Work area: canvas left, step panel right ───────────────────────────── */
#etMangaCreator .et-mgc-grid {
    gap: 12px !important;
    min-height: 0 !important;
}
#etMangaCreator .et-mgc-preview-col {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
#etMangaCreator .et-mgc-canvas-wrap {
    background: var(--ps-surface) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: var(--ps-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    padding: 0 !important;
}
#etMangaCreator .et-mgc-canvas-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px 8px 4px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ps-line) !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-canvas-toolbar__meta {
    font-size: 12px !important;
    color: var(--ps-faint) !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#etMangaCreator .et-mgc-canvas-toolbar__meta strong,
#etMangaCreator .et-mgc-canvas-toolbar__meta b {
    color: var(--ps-muted) !important;
    font-weight: 600 !important;
}
#etMangaCreator .et-mgc-canvas-toolbar__tools {
    display: flex !important;
    align-items: center;
    gap: 2px !important;
    flex-wrap: nowrap !important;
}
#etMangaCreator .et-mgc-canvas-tool-group {
    display: flex !important;
    align-items: center;
    gap: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-canvas-tool-group + .et-mgc-canvas-tool-group {
    margin-left: 4px !important;
    padding-left: 4px !important;
    border-left: 1px solid var(--ps-line) !important;
}
/* Rare tools move out of the way: the hand (drag works without it), the
   duplicate fit/expand icon and the safe-area guides. */
#etMangaCreator #et-mgc-pan-tool,
#etMangaCreator #et-mgc-zoom-actual,
#etMangaCreator .et-mgc-canvas-tool-group:has(> #et-mgc-pan-tool),
#etMangaCreator .et-mgc-canvas-tool-group:has(> .et-mgc-safe-zone-toggle-label) {
    display: none !important;
}
#etMangaCreator #et-mgc-zoom-preset {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 22px 0 8px !important;
    font-size: 12px !important;
    color: var(--ps-muted) !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
}
#etMangaCreator .et-mgc-canvas-stage-shell,
#etMangaCreator .et-mgc-canvas-stage {
    background-color: #0e0e11 !important;
    border: 0 !important;
}
/* The stage kept 56px under the page for the hint dock hidden below, and
   the viewport stopped short of the stage's minimum height. */
#etMangaCreator .et-mgc-canvas-stage {
    display: flex !important;
    flex-direction: column;
    padding-bottom: 0 !important;
}
#etMangaCreator .et-mgc-canvas-viewport {
    flex: 1 0 auto;
}
/* The hint dock floated over the page; the step panel says the same. */
#etMangaCreator #et-mgc-canvas-guide-top {
    display: none !important;
}

/* ── Ask AI ─────────────────────────────────────────────────────────────── */
#etMangaCreator .et-mgc-ai-change {
    margin: 0 !important;
    padding: 12px !important;
    background: var(--ps-surface) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: var(--ps-radius) !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-ai-change__scopes {
    display: flex !important;
    gap: 4px !important;
    margin: 0 0 8px !important;
}
#etMangaCreator .et-mgc-ai-change__scope {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ps-muted) !important;
    background: transparent !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-ai-change__scope[aria-pressed="true"],
#etMangaCreator .et-mgc-ai-change__scope.is-active,
#etMangaCreator .et-mgc-ai-change__scope[aria-checked="true"] {
    color: var(--ps-text) !important;
    background: var(--ps-raise) !important;
    border-color: var(--ps-line-strong) !important;
}
#etMangaCreator .et-mgc-ai-change__form {
    display: flex !important;
    align-items: flex-end;
    gap: 8px;
    margin: 0 !important;
    padding: 6px 6px 6px 14px !important;
    background: var(--ps-bg) !important;
    border: 1px solid var(--ps-line-strong) !important;
    border-radius: 18px !important;
}
#etMangaCreator .et-mgc-ai-change__form:focus-within {
    border-color: rgba(45, 212, 191, 0.55) !important;
}
#etMangaCreator .et-mgc-ai-change__input {
    flex: 1 1 auto;
    min-height: 34px !important;
    padding: 7px 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: var(--ps-text) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    resize: none;
    outline: none !important;
}
#etMangaCreator .et-mgc-ai-change__send {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    border-radius: 999px !important;
    color: var(--ps-accent-ink) !important;
    background: var(--ps-accent) !important;
    border: 0 !important;
}
#etMangaCreator .et-mgc-ai-change__chips {
    display: flex !important;
    gap: 6px !important;
    margin: 8px 0 0 !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
}
#etMangaCreator .et-mgc-ai-change__chips::-webkit-scrollbar { display: none; }
#etMangaCreator .et-mgc-ai-change__chip {
    flex: 0 0 auto;
    height: 28px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    color: var(--ps-muted) !important;
    background: var(--ps-surface-2) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 999px !important;
    white-space: nowrap;
}
#etMangaCreator .et-mgc-ai-change__chip:hover {
    color: var(--ps-text) !important;
    border-color: var(--ps-line-strong) !important;
}

/* ── Step panel (sidebar) ───────────────────────────────────────────────── */
#etMangaCreator .et-mgc-sidebar {
    background: var(--ps-surface) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: var(--ps-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
}
#etMangaCreator .et-mgc-sidebar-resizer {
    opacity: 0;
}
#etMangaCreator .et-mgc-sidebar-resizer:hover {
    opacity: 1;
}
#etMangaCreator .et-mgc-step-panel {
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border: 0 !important;
}
#etMangaCreator .et-mgc-sidebar-head {
    padding: 16px 18px 10px !important;
    background: transparent !important;
    border: 0 !important;
}
#etMangaCreator .et-mgc-sidebar-step-title {
    margin: 0 0 4px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--ps-text) !important;
}
#etMangaCreator .et-mgc-sidebar-step-sub {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--ps-muted) !important;
}
#etMangaCreator .et-mgc-sidebar-scroll {
    padding: 4px 18px 16px !important;
    background: transparent !important;
}
#etMangaCreator .ps-example-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ps-accent);
    background: none;
    border: 0;
    cursor: pointer;
}
#etMangaCreator .ps-example-link:hover {
    text-decoration: underline;
}
#etMangaCreator .et-mgc-sidebar .et-mgc-card {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Story first: the script block before the layout picker. */
#etMangaCreator #et-mgc-step1-script-block {
    order: -1;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
#etMangaCreator .et-mgc-sidebar .et-form-label,
#etMangaCreator .et-mgc-layout-bar__label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ps-muted) !important;
}
#etMangaCreator #et-mgc-script,
#etMangaCreator #et-mgc-scene {
    min-height: 168px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--ps-text) !important;
    background: var(--ps-bg) !important;
    border: 1px solid var(--ps-line-strong) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#etMangaCreator #et-mgc-script:focus,
#etMangaCreator #et-mgc-scene:focus {
    border-color: rgba(45, 212, 191, 0.6) !important;
    box-shadow: 0 0 0 3px var(--ps-accent-soft) !important;
}
#etMangaCreator #et-mgc-script::placeholder,
#etMangaCreator #et-mgc-scene::placeholder {
    color: var(--ps-faint) !important;
}
#etMangaCreator .et-mgc-label-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
#etMangaCreator .et-mgc-label-row .btn-et-ghost {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    color: var(--ps-accent) !important;
    background: var(--ps-accent-soft) !important;
    border: 0 !important;
    border-radius: 999px !important;
}
#etMangaCreator .et-mgc-script-meter,
#etMangaCreator .et-mgc-quota-hint,
#etMangaCreator .et-mgc-field-hint,
#etMangaCreator .et-mgc-layout-fit-hint {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: var(--ps-faint) !important;
}
#etMangaCreator .et-mgc-script-meter-track {
    height: 3px !important;
    border-radius: 3px !important;
    background: var(--ps-line) !important;
}

/* Layout picker: a compact row of small thumbnails. */
#etMangaCreator .et-mgc-layout-bar {
    padding: 14px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ps-line) !important;
}
#etMangaCreator .et-mgc-layout-bar__head {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px !important;
}
#etMangaCreator .et-mgc-layout-bar__active {
    font-size: 12px !important;
    color: var(--ps-text) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#etMangaCreator #et-mgc-templates,
#etMangaCreator #et-mgc-templates-more-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
#etMangaCreator .et-mgc-template-btn {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    background: var(--ps-surface-2) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-template-btn__preview {
    height: 64px !important;
    min-height: 0 !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 6px !important;
}
#etMangaCreator .et-mgc-template-btn__meta {
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: var(--ps-muted) !important;
    text-align: left;
}
#etMangaCreator .et-mgc-template-btn__meta small,
#etMangaCreator .et-mgc-template-btn__meta span + span {
    display: none !important;
}
#etMangaCreator .et-mgc-template-btn[aria-pressed="true"],
#etMangaCreator .et-mgc-template-btn.is-active,
#etMangaCreator .et-mgc-template-btn.active,
#etMangaCreator .et-mgc-template-btn[aria-checked="true"] {
    border-color: var(--ps-accent) !important;
    box-shadow: 0 0 0 1px var(--ps-accent) inset !important;
}
#etMangaCreator .et-mgc-fold,
#etMangaCreator .et-mgc-sidebar-more-fold {
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ps-line) !important;
    border-radius: 0 !important;
}
#etMangaCreator .et-mgc-fold__summary,
#etMangaCreator .et-mgc-sidebar-more-fold > summary {
    padding: 12px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ps-muted) !important;
    background: transparent !important;
    border: 0 !important;
}
#etMangaCreator .et-mgc-fold__body {
    padding: 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
}

/* The language picker, now under More settings. */
#etMangaCreator .ps-moved-field {
    margin: 0 0 14px !important;
}
#etMangaCreator .et-mgc-sidebar select.form-select {
    height: 38px !important;
    font-size: 13px !important;
    color: var(--ps-text) !important;
    background-color: var(--ps-bg) !important;
    border: 1px solid var(--ps-line-strong) !important;
    border-radius: 10px !important;
}

/* ── Art and Letter: panel picker, script card, lettering list ──────────── */
#etMangaCreator .et-mgc-panel-picker-head .et-mgc-card__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ps-muted) !important;
}
#etMangaCreator .et-mgc-panel-picker-wrap {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-panel-picker {
    gap: 6px !important;
}
#etMangaCreator .et-mgc-panel-picker__btn {
    width: 44px !important;
    height: 38px !important;
    min-width: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ps-muted) !important;
    background: var(--ps-surface-2) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
}
#etMangaCreator .et-mgc-panel-picker__btn.is-active {
    color: var(--ps-accent) !important;
    background: var(--ps-accent-soft) !important;
    border-color: rgba(45, 212, 191, 0.55) !important;
}
#etMangaCreator .et-mgc-script-summary,
#etMangaCreator .et-mgc-dialogue-row {
    background: var(--ps-surface-2) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-dialogue-row:hover {
    border-color: var(--ps-line-strong) !important;
}
#etMangaCreator .et-mgc-step2-block--generate {
    background: var(--ps-surface-2) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: var(--ps-radius) !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-cast-nudge {
    border-radius: 12px !important;
    box-shadow: none !important;
}
/* "Back to script" was a full-width accent bar; it is a way back, not the next step. */
#etMangaCreator .et-mgc-wf-back {
    height: 36px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ps-muted) !important;
    background: transparent !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-wf-back:hover {
    color: var(--ps-text) !important;
    border-color: var(--ps-line-strong) !important;
}

/* The next step, as the panel's footer: one primary button. */
#etMangaCreator .ps-next-dock {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: auto;
    padding: 12px 18px 14px;
    background: linear-gradient(to bottom, rgba(19, 19, 23, 0), var(--ps-surface) 28%);
    border-top: 1px solid var(--ps-line);
}
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
}
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar,
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar.is-canvas-guide-primary {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar__copy {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column;
    gap: 1px;
    min-height: 0 !important;
}
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar__label {
    display: none !important;
}
/* The canvas dock that showed this hint is hidden, so the hint lives here. */
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar__hint {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--ps-faint) !important;
}
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar__hint:empty {
    display: none !important;
}
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar__btn {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ps-accent-ink) !important;
    background: var(--ps-accent) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#etMangaCreator .ps-next-dock .et-mgc-wf-next-bar__btn:disabled {
    color: var(--ps-faint) !important;
    background: var(--ps-raise) !important;
}
/* Art: while panels still need art, the footer's button makes it
   (writing-tools-panel-studio-clean.js moves "Generate all panels" here);
   once every panel has art it is Continue to Letter again. */
#etMangaCreator .ps-next-dock > #et-mgc-gen-page {
    display: none !important;
}
#etMangaCreator.is-wf-step-2 .ps-next-dock:has(#et-mgc-wf-next-btn:disabled) > #et-mgc-gen-page {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin-top: 6px;
    padding: 0 22px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ps-accent-ink) !important;
    background: var(--ps-accent) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#etMangaCreator.is-wf-step-2 .ps-next-dock:has(#et-mgc-wf-next-btn:disabled) > #et-mgc-gen-page:disabled {
    color: var(--ps-faint) !important;
    background: var(--ps-raise) !important;
}
#etMangaCreator.is-wf-step-2 .ps-next-dock:has(#et-mgc-wf-next-btn:disabled):has(> #et-mgc-gen-page) .et-mgc-wf-next-bar__btn {
    display: none !important;
}
#etMangaCreator .et-mgc-wf-lock-hint {
    font-size: 12px !important;
    color: var(--ps-faint) !important;
}

/* Every other primary/ghost button inside the panel, in the same voice. */
#etMangaCreator .et-mgc-sidebar .btn-et-primary:not(.et-mgc-wf-next-bar__btn) {
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-sidebar .btn-et-ghost:not(.et-mgc-label-row .btn-et-ghost) {
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* ── Banners and nudges inside the studio: one quiet card style ─────────── */
#etMangaCreator .et-mgc-expectation-strip,
#etMangaCreator .et-mgc-genre-entry-strip,
#etMangaCreator .et-mgc-account-nudge,
#etMangaCreator .et-mgc-export-ready-banner,
#etMangaCreator .et-mgc-checkout-banner,
#etMangaCreator .et-mgc-continuity-bar {
    margin: 0 0 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    background: var(--ps-surface) !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* ── Sent by an AI assistant: one line under the lead (templates/tools/page.php) ── */
.et-tool-ai-arrival {
    display: block;
    margin: 10px 0 0 !important;
    font-size: 13px;
    line-height: 1.5;
    color: #b4b4bf;
}
.et-tool-ai-arrival .bi {
    color: #5eead4;
    margin-right: 6px;
}
.et-tool-ai-arrival a {
    color: #5eead4;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Hero above the studio: smaller, one primary path ───────────────────── */
.et-ps-presets {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 10px 0 0 !important;
}
.et-ps-presets::-webkit-scrollbar { display: none; }
.et-ps-presets__label {
    flex: 0 0 auto;
    font-size: 12px;
    color: #8b8b97;
    margin-right: 2px;
}
.et-ps-presets__chip {
    flex: 0 0 auto;
}
.et-ps-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    margin: 12px 0 0 !important;
}
/* The novel path is a quiet link, not a second big button beside the app. */
.et-ps-cta [data-et-cta$="-to-draft-wizard"] {
    padding: 0 !important;
    min-height: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #5eead4 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.et-ps-cta [data-et-cta$="-to-register"] {
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center;
    min-height: 32px;
    line-height: 1.2 !important;
}
.et-ps-cta__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.et-ps-cta__link:hover {
    text-decoration: underline;
}
/* The quick switcher above the studio repeated the Related tools row under it. */
.et-tool-page--manga-creator .et-studio-tool-switcher {
    display: none !important;
}

/* ── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    #etMangaCreator .et-mgc-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px !important;
        align-items: stretch;
    }
    #etMangaCreator .et-mgc-preview-col {
        grid-column: 1;
        grid-row: 1;
    }
    #etMangaCreator .et-mgc-sidebar {
        grid-column: 2;
        grid-row: 1;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column;
        /* Window-tall and pinned, so the step's footer button is on screen
           with the page; it sat under the fold, below a scrolled panel. */
        position: sticky !important;
        top: 134px; /* under the site header and the studio's sticky bar */
        align-self: start;
        max-height: calc(100dvh - 146px) !important;
    }
    #etMangaCreator .et-mgc-sidebar-resizer {
        display: none !important;
    }
    #etMangaCreator .et-mgc-step-panel {
        flex: 1 1 auto;
        min-height: 0;
    }
    #etMangaCreator .et-mgc-sidebar-scroll {
        flex: 1 1 auto;
        overflow-y: auto;
    }
    /* Sized to its label, left: the Support launcher sits at the bottom
       right of the window, over the end of a full-width button. */
    #etMangaCreator .ps-next-dock .et-mgc-wf-next-bar__btn {
        width: auto !important;
        min-width: 180px;
        align-self: flex-start;
        padding: 0 22px !important;
    }
    #etMangaCreator.is-wf-step-2 .ps-next-dock:has(#et-mgc-wf-next-btn:disabled) > #et-mgc-gen-page {
        width: auto !important;
        min-width: 180px;
    }
}

/* ── Tablet and phone ───────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #etMangaCreator {
        padding: 10px !important;
        border-radius: 16px !important;
    }
    #etMangaCreator .et-mgc-studio-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "steps actions"
            "meta meta";
        gap: 8px 8px;
        padding-bottom: 10px !important;
    }
    #etMangaCreator .et-mgc-studio-bar__meta {
        justify-content: flex-start;
    }
    #etMangaCreator .et-mgc-grid {
        display: flex !important;
        flex-direction: column;
    }
    #etMangaCreator .et-mgc-sidebar {
        width: 100% !important;
        max-width: none !important;
        order: 2;
    }
    #etMangaCreator .et-mgc-preview-col {
        order: 1;
    }
    #etMangaCreator .et-mgc-sidebar-resizer {
        display: none !important;
    }
    #etMangaCreator .et-mgc-sidebar-scroll {
        max-height: none !important;
        overflow: visible !important;
    }
    /* hidden made the panel a scroll box of its own, so the footer stuck to
       the panel's end instead of above the tab bar; clip keeps the corners. */
    #etMangaCreator .et-mgc-sidebar {
        overflow: clip !important;
    }
    #etMangaCreator .ps-next-dock {
        bottom: 72px; /* above the site's phone tab bar */
        background: var(--ps-surface) !important; /* the fade let the panel show through */
        border-radius: 0 0 var(--ps-radius) var(--ps-radius);
    }
    #etMangaCreator #et-mgc-templates,
    #etMangaCreator #et-mgc-templates-more-grid {
        grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important;
    }
}
@media (max-width: 575.98px) {
    /* Steps get the whole first row; status and file actions share the second. */
    #etMangaCreator .et-mgc-studio-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "steps steps"
            "meta actions";
    }
    #etMangaCreator .et-mgc-workflow {
        display: flex !important;
        width: 100% !important;
    }
    #etMangaCreator .et-mgc-workflow__item {
        flex: 1 1 0 !important;
        min-width: 0;
    }
    #etMangaCreator .et-mgc-workflow__step {
        width: 100%;
        justify-content: center;
        padding: 0 10px 0 5px !important;
    }
    /* One line each, no separators: the status reads as a short list. */
    #etMangaCreator .et-mgc-studio-bar__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }
    #etMangaCreator .et-mgc-studio-bar__meta > span {
        max-width: 100%;
    }
    #etMangaCreator .et-mgc-studio-bar__meta > span + span::before {
        content: none;
    }
    /* Icon-only file actions on a phone; their titles say what they do. */
    #etMangaCreator #et-mgc-export-wizard,
    #etMangaCreator #et-mgc-new-project {
        width: 34px !important;
        padding: 0 !important;
        font-size: 0 !important;
        gap: 0;
    }
    #etMangaCreator #et-mgc-export-wizard i,
    #etMangaCreator #et-mgc-new-project i {
        font-size: 15px !important;
        margin: 0 !important;
    }
    #etMangaCreator .et-mgc-canvas-toolbar__meta {
        display: none !important;
    }
    #etMangaCreator .et-mgc-canvas-toolbar {
        justify-content: center;
        padding: 4px 6px !important;
    }
    #etMangaCreator #et-mgc-canvas-fullscreen,
    #etMangaCreator #et-mgc-zoom-preset {
        display: none !important;
    }
    #etMangaCreator .et-mgc-page-strip__tools #et-mgc-dup-page {
        display: none !important;
    }
    #etMangaCreator .et-mgc-ai-change__scope {
        padding: 0 10px !important;
    }
}

/* ── Read mode ──────────────────────────────────────────────────────────────
 * manga-creator.css hides the studio around the page with class selectors;
 * the id rules above out-rank them, so read mode showed the step panel, the
 * page strip and the studio bar around a page that was not full screen. */
#etMangaCreator.et-mgc-read-mode :is(.et-mgc-studio-bar, .et-mgc-sidebar, .et-mgc-workflow-wrap, .et-mgc-page-strip, .et-mgc-storyboard, .et-mgc-canvas-toolbar, .et-mgc-continuity-bar, .et-mgc-ai-change, .et-mgc-canvas-status, .et-mgc-canvas-hint, .ps-next-dock, .et-mgc-safe-zone-layer, #et-mgc-panel-overlay-layer) {
    display: none !important;
}
#etMangaCreator.et-mgc-read-mode .et-mgc-preview-col {
    position: fixed !important;
    inset: 0;
    z-index: 1040;
    width: 100% !important;
    height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #080a10;
}
#etMangaCreator.et-mgc-read-mode .et-mgc-canvas-wrap {
    height: 100vh !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #080a10 !important;
}
#etMangaCreator.et-mgc-read-mode :is(.et-mgc-canvas-stage-shell, .et-mgc-canvas-stage, .et-mgc-canvas-viewport) {
    background: #080a10 !important;
    background-image: none !important;
}
body.et-mgc-read-mode-active :is(.et-studio-tool-switcher, .et-tool-page-comments, .et-tool-history-panel) {
    display: none !important;
}

/* ── Studio dialogs ─────────────────────────────────────────────────────────
 * Export, outline, cast, backups, import, publish checklist, about and new
 * page still wore the old indigo surface (#131320) with square tiles. Same
 * surface, hairline and radii as the studio. */
.modal[id^="et-mgc-"] .modal-content {
    background: #131317 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}
.modal[id^="et-mgc-"] :is(.modal-header, .modal-footer) {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.modal[id^="et-mgc-"] .modal-footer {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.modal[id^="et-mgc-"] .modal-footer > :only-child {
    margin-left: auto;
}
.modal[id^="et-mgc-"] :is(.et-mgc-outline-card, .et-mgc-publish-checklist__item, .et-mgc-fit-note, .et-mgc-export-preset:not(.et-mgc-export-preset--recommended), .et-mgc-cast-stats__item) {
    background: #1a1a20 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
.modal[id^="et-mgc-"] .et-mgc-export-preset {
    border-radius: 14px !important;
}
.modal[id^="et-mgc-"] .et-mgc-outline-card.is-expanded {
    border-color: rgba(45, 212, 191, 0.35) !important;
}
.modal[id^="et-mgc-"] .et-mgc-outline-card :is(input, select, textarea) {
    background-color: #0e0e11 !important;
}

/* ── The chosen panel, right under P1 · P2 … ────────────────────────────────
 * writing-tools-panel-studio-clean.js moves Art's description and Letter's
 * beat and balloon text to just below the panel buttons. */
#etMangaCreator .et-mgc-step2-workspace {
    margin-top: 10px !important;
}
#etMangaCreator .et-mgc-step3-lettering > .et-mgc-panel-beat-hint,
#etMangaCreator .et-mgc-step3-lettering > .ps-under-picker:first-child {
    margin-top: 10px !important;
}
#etMangaCreator .et-mgc-panel-beat-hint {
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    color: var(--ps-muted) !important;
    background: var(--ps-surface-2) !important;
    border: 1px solid var(--ps-line) !important;
    border-left: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#etMangaCreator .et-mgc-panel-beat-hint strong {
    color: var(--ps-text);
}
#etMangaCreator .et-mgc-step3-lettering > .ps-under-picker {
    margin-bottom: 16px !important;
}
#etMangaCreator .et-mgc-step3-lettering > .et-mgc-panel-beat-hint + .ps-under-picker {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── Style switch: Manga · Comic · Webtoon (8 Nov 2026) ────────────────────
   writing-tools-panel-studio-style.js puts it first in the top bar. */
#etMangaCreator .et-mgc-studio-bar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "style steps meta actions";
}
#etMangaCreator .ps-style {
    grid-area: style;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--ps-surface-2, #18181d);
    border: 1px solid var(--ps-line);
    border-radius: 999px;
}
#etMangaCreator .ps-style__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--ps-muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#etMangaCreator .ps-style__opt .bi {
    font-size: 13px;
}
#etMangaCreator .ps-style__opt:hover {
    color: var(--ps-text);
}
#etMangaCreator .ps-style__opt.is-active {
    color: var(--ps-accent-ink);
    background: var(--ps-accent);
}
#etMangaCreator .ps-style__opt:focus-visible {
    outline: 2px solid var(--ps-accent);
    outline-offset: 2px;
}
#etMangaCreator.et-mgc-read-mode .ps-style {
    display: none;
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    /* Icons only between 992 and 1199: the bar has four groups to fit. */
    #etMangaCreator .ps-style__opt span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    #etMangaCreator .ps-style__opt {
        padding: 0 10px;
    }
}
@media (max-width: 991.98px) {
    #etMangaCreator .et-mgc-studio-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "style actions"
            "steps steps"
            "meta meta";
    }
    #etMangaCreator .ps-style {
        justify-self: start;
    }
}
@media (max-width: 575.98px) {
    /* A phone has no room for the switch and the file actions side by side:
       the switch takes the first row, full width, in three equal parts. */
    #etMangaCreator .et-mgc-studio-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "style style"
            "steps steps"
            "meta actions";
    }
    #etMangaCreator .ps-style {
        display: flex;
        width: 100%;
    }
    #etMangaCreator .ps-style__opt {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 8px;
        font-size: 12.5px;
    }
}

/* ── Export window and series banner, 8 Nov 2026 ──────────────────────────
   The highlighted format tile was white on light teal; the two checkboxes
   were larger than everything round them; the banner was a full row of big
   buttons above the page. */
#et-mgc-export-wizard-modal .et-mgc-export-preset {
    background: #131317 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f4f4f6 !important;
    box-shadow: none !important;
}
#et-mgc-export-wizard-modal .et-mgc-export-preset:hover,
#et-mgc-export-wizard-modal .et-mgc-export-preset:focus-visible,
#et-mgc-export-wizard-modal .et-mgc-export-preset.is-active {
    background: rgba(45, 212, 191, 0.10) !important;
    border-color: #2dd4bf !important;
    color: #f4f4f6 !important;
}
#et-mgc-export-wizard-modal .et-mgc-export-preset--recommended {
    border-color: rgba(45, 212, 191, 0.45) !important;
}
#et-mgc-export-wizard-modal .et-mgc-export-preset .bi,
#et-mgc-export-wizard-modal .et-mgc-export-preset__title {
    color: #f4f4f6 !important;
}
#et-mgc-export-wizard-modal .et-mgc-export-preset .bi {
    color: #2dd4bf !important;
}
#et-mgc-export-wizard-modal .et-mgc-export-preset__sub {
    color: #a1a1ad !important;
}
#et-mgc-export-wizard-modal .et-mgc-export-scope {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    color: #d4d4dc !important;
}
#et-mgc-export-wizard-modal .et-mgc-export-scope .form-check-input {
    margin: 0 !important;
    flex: 0 0 auto;
}
#et-mgc-export-wizard-modal #et-mgc-export-preview {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#etMangaCreator .et-mgc-continuity-bar {
    min-height: 0 !important;
    padding: 6px 8px 6px 12px !important;
    gap: 8px !important;
}
#etMangaCreator .et-mgc-continuity-bar__text {
    font-size: 13px !important;
    color: #a1a1ad !important;
}
#etMangaCreator .et-mgc-continuity-bar .et-mgc-continuity-bar__edit {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
}

/* ── Art and Letter panels, streamlined (8 Nov 2026) ───────────────────────
   writing-tools-panel-studio-panels.js moves blocks into .ps-fold sections;
   these rules give them one look with the studio's own folds, and mark the
   one thing to act on in each step. */
#etMangaCreator .ps-fold {
    margin: 0;
    border-top: 1px solid var(--ps-line);
}
#etMangaCreator .ps-fold__summary,
#etMangaCreator .et-mgc-fold__summary {
    display: flex !important;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
}
#etMangaCreator .ps-fold__summary {
    padding: 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ps-muted);
}
#etMangaCreator .ps-fold__summary::-webkit-details-marker,
#etMangaCreator .et-mgc-fold__summary::-webkit-details-marker {
    display: none;
}
/* One chevron for every fold, on the right, turned when open. */
#etMangaCreator .ps-fold__summary::after,
#etMangaCreator .et-mgc-step2-workspace .et-mgc-fold__summary::after,
#etMangaCreator .et-mgc-step3-lettering .et-mgc-fold__summary::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: 0 4px 0 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    margin-left: auto;
    transform: rotate(-45deg);
    transition: transform .15s ease;
    opacity: .7;
}
#etMangaCreator .ps-fold[open] > .ps-fold__summary::after,
#etMangaCreator .et-mgc-step2-workspace details[open] > .et-mgc-fold__summary::after,
#etMangaCreator .et-mgc-step3-lettering details[open] > .et-mgc-fold__summary::after {
    transform: rotate(45deg);
}
#etMangaCreator .et-mgc-step2-workspace .et-mgc-fold__summary::before,
#etMangaCreator .et-mgc-step3-lettering .et-mgc-fold__summary::before {
    display: none !important;
}
#etMangaCreator .ps-fold__title {
    flex: 0 0 auto;
}
/* What the fold holds, said in its header. */
#etMangaCreator .ps-fold__meta {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-weight: 500;
    color: var(--ps-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#etMangaCreator .ps-fold__summary:hover,
#etMangaCreator .et-mgc-step2-workspace .et-mgc-fold__summary:hover,
#etMangaCreator .et-mgc-step3-lettering .et-mgc-fold__summary:hover {
    color: var(--ps-text) !important;
}
#etMangaCreator .ps-fold__body {
    padding: 0 0 14px;
}
#etMangaCreator .ps-fold__body > .et-mgc-step2-block--style {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* The step's main card: the panel description in Art, the balloon text in
   Letter — a teal edge says "this is where you work". */
#etMangaCreator #et-mgc-step2-generate,
#etMangaCreator .et-mgc-step3-lettering .et-mgc-dialogue-text-field {
    padding: 14px !important;
    margin: 0 0 14px !important;
    background: rgba(45, 212, 191, 0.045) !important;
    border: 1px solid rgba(45, 212, 191, 0.35) !important;
    border-radius: 14px !important;
}
#etMangaCreator #et-mgc-step2-generate .et-mgc-wf-actions--step2 {
    margin-top: 10px !important;
}
#etMangaCreator #et-mgc-gen-panel {
    width: 100%;
    justify-content: center;
}
/* The button to press next inside the card: a teal outline, so the
   footer's filled button stays the one main action. */
#etMangaCreator .btn.ps-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700 !important;
    color: #5eead4 !important;
    background: rgba(45, 212, 191, 0.08) !important;
    border: 1px solid #2dd4bf !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
#etMangaCreator .btn.ps-primary:hover,
#etMangaCreator .btn.ps-primary:focus-visible {
    color: #032a24 !important;
    background: #2dd4bf !important;
}
#etMangaCreator .btn.ps-primary:hover .bi,
#etMangaCreator .btn.ps-primary:focus-visible .bi {
    color: inherit !important;
}

/* Your own art, right under Generate. */
#etMangaCreator .ps-own-art {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px dashed var(--ps-line-strong);
}
#etMangaCreator .ps-own-art__label {
    font-size: 12.5px;
    color: var(--ps-faint);
}
#etMangaCreator .ps-own-art .et-mgc-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
}
#etMangaCreator .ps-own-art .et-mgc-actions > .btn {
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
}
#etMangaCreator .ps-fold--nested {
    margin: 10px 0 0;
}
#etMangaCreator .ps-fold--nested > .ps-fold__summary {
    padding: 10px 0;
    font-size: 12.5px;
}

/* The page script is reference in Art: one quiet line, Edit beside it. */
#etMangaCreator .et-mgc-script-summary {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 12px !important;
    margin: 0 0 14px !important;
    background: transparent !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 12px !important;
}
#etMangaCreator .et-mgc-script-summary[hidden] {
    display: none !important;
}
#etMangaCreator .et-mgc-script-summary__head {
    order: 2;
    flex: 0 0 auto;
    margin: 0 !important;
}
#etMangaCreator .et-mgc-script-summary__label {
    display: none !important;
}
#etMangaCreator .et-mgc-script-summary__text {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    font-size: 12.5px !important;
    color: var(--ps-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#etMangaCreator #et-mgc-script-edit-back {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
}

/* Letter: the status under the buttons is a line, not a card. */
#etMangaCreator .et-mgc-step3-lettering .et-mgc-step3-toolbar {
    display: flex !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
}
#etMangaCreator .et-mgc-step3-lettering .et-mgc-step3-toolbar > .btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
}
#etMangaCreator .et-mgc-step3-lettering #et-mgc-lettering-summary {
    margin: 0 0 14px !important;
    font-size: 12.5px !important;
    color: var(--ps-faint) !important;
}
#etMangaCreator .ps-fold__body > .et-mgc-lang-row {
    margin: 0 !important;
}

/* The step pills go back a step, and the example is for the first visit. */
#etMangaCreator:is(.is-wf-step-2, .is-wf-step-3) .et-mgc-wf-back,
#etMangaCreator:is(.is-wf-step-2, .is-wf-step-3) .ps-example-link {
    display: none !important;
}
#etMangaCreator .et-mgc-step3-lettering .et-mgc-step3-fold > .et-mgc-fold__body {
    padding-bottom: 4px !important;
}
#etMangaCreator .ps-fold--nested[open] {
    padding-bottom: 6px;
}

/* ── Comic Studio plan (8 Nov 2026, writing-tools-panel-studio-plan.js) ── */
.ps-plan-chip {
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(45, 212, 191, 0.45);
    background: rgba(45, 212, 191, 0.08);
    color: #5eead4;
    font: 600 12px/1 inherit;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.ps-plan-chip:hover,
.ps-plan-chip:focus-visible {
    background: #2dd4bf;
    color: #032a24;
    outline: none;
}
.ps-plan-chip.is-member {
    border-color: rgba(255, 255, 255, 0.14);
    background: #202027;
    color: #f4f4f6;
}
.ps-plan-chip.is-member .bi { color: #2dd4bf; }
.ps-plan-chip.is-member:hover { background: #2a2a33; color: #fff; }
.ps-plan-chip.is-empty { border-color: rgba(251, 191, 36, 0.55); }
.ps-plan-chip.is-empty .bi { color: #fbbf24; }
/* A member's balance is the chip; the free-quota line would say it twice. */
#etMangaCreator.ps-has-plan #et-mgc-quota-dash,
.ps-has-plan #et-mgc-quota-dash { display: none !important; }

.ps-plan-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: #131317;
    color: #f4f4f6;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.ps-plan-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.ps-plan-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 4px;
}
.ps-plan-dialog__title { margin: 0; font-size: 18px; font-weight: 700; color: #f4f4f6; }
.ps-plan-dialog__close {
    border: 0;
    background: none;
    color: #a1a1ad;
    font-size: 16px;
    padding: 4px;
    cursor: pointer;
}
.ps-plan-dialog__close:hover { color: #fff; }
.ps-plan-dialog__body { padding: 6px 20px 4px; }
.ps-plan-price { margin: 0 0 12px; color: #a1a1ad; font-size: 14px; }
.ps-plan-price strong { font-size: 30px; color: #f4f4f6; letter-spacing: -0.02em; }
.ps-plan-benefits { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 9px; }
.ps-plan-benefits li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; color: #d4d4dc; }
.ps-plan-benefits .bi { color: #2dd4bf; flex: 0 0 auto; margin-top: 1px; }
.ps-plan-balance { margin: 0 0 10px; color: #a1a1ad; font-size: 14px; }
.ps-plan-balance strong { font-size: 30px; color: #f4f4f6; margin-right: 4px; }
.ps-plan-rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #1a1a20;
    font-size: 13px;
}
.ps-plan-rows dt { color: #8b8b97; font-weight: 500; }
.ps-plan-rows dd { margin: 0; color: #e4e4ea; }
.ps-plan-note { margin: 10px 0 0; font-size: 13px; color: #a1a1ad; }
.ps-plan-warn { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: rgba(251, 191, 36, 0.1); color: #fcd34d; }
.ps-plan-warn--error { background: rgba(248, 113, 113, 0.1); color: #fca5a5; }
.ps-plan-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 16px 20px 20px;
}
.btn.ps-plan-cta,
.ps-plan-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 1px solid #2dd4bf !important;
    background: #2dd4bf !important;
    color: #032a24 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer;
}
.btn.ps-plan-cta:hover,
.ps-plan-cta:hover { background: #5eead4 !important; border-color: #5eead4 !important; }
.btn.ps-plan-cta.ps-plan-cta--soft,
.ps-plan-cta--soft { background: rgba(45, 212, 191, 0.08) !important; color: #5eead4 !important; }
.btn.ps-plan-cta.ps-plan-cta--soft:hover { background: #2dd4bf !important; color: #032a24 !important; }
.ps-plan-cta:disabled { opacity: 0.6; cursor: progress; }
.ps-plan-dialog__foot .ps-plan-cta:first-child { flex: 1 1 auto; }
.btn.ps-plan-link,
.ps-plan-link {
    border: 0 !important;
    background: none !important;
    padding: 4px 2px !important;
    color: #a1a1ad !important;
    font-size: 13px !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ps-plan-link:hover { color: #f4f4f6 !important; }
.ps-plan-secure { font-size: 12px; color: #6f6f7b; }
@media (max-width: 575.98px) {
    .ps-plan-dialog__foot { flex-direction: column; align-items: stretch; }
    .ps-plan-secure, .ps-plan-link { text-align: center; }
}