:root {
    --page: #f3f6fa;
    --page-2: #e9eef5;
    --ink: #15202b;
    --ink-2: #293746;
    --muted: #6d7b8b;
    --line: #d8e0e9;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --deep: #081018;
    --deep-2: #111c26;
    --teal: #00b7a3;
    --teal-dark: #008f80;
    --coral: #f05f49;
    --amber: #c98921;
    --blue: #2f6eea;
    --ok: #158a52;
    --bad: #d93255;
    --shadow: 0 18px 46px rgba(21, 32, 43, .12);
    --shadow-soft: 0 10px 28px rgba(21, 32, 43, .08);
    --radius: 8px;
}

/* Structured Thai pronunciation dictionary for provider-only audio prompts. */
.admin-pronunciation-manager {
    margin: 20px 0 28px;
    padding: 24px;
    border: 1px solid #d8e4fb;
    border-radius: 24px;
    background: linear-gradient(145deg, #f7fbff, #f9f6ff);
}
.admin-pronunciation-manager > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.admin-pronunciation-manager h3 { margin: 4px 0 6px; font-size: 1.35rem; color: #14284c; }
.admin-pronunciation-manager p { margin: 0; color: #60708b; }
.admin-pronunciation-manager code { color: #1b5fc5; font-weight: 800; }
.admin-pronunciation-summary { display: flex; gap: 10px; flex: 0 0 auto; }
.admin-pronunciation-summary span {
    min-width: 92px;
    padding: 12px 14px;
    border: 1px solid #d7def8;
    border-radius: 16px;
    background: #fff;
    color: #5d6790;
    text-align: center;
}
.admin-pronunciation-summary b { display: block; font-size: 1.35rem; color: #4e46c6; }
.admin-pronunciation-create,
.admin-pronunciation-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) 92px auto auto auto;
    align-items: end;
    gap: 10px;
}
.admin-pronunciation-create {
    padding: 18px;
    border-radius: 18px;
    background: #14284c;
    color: #fff;
}
.admin-pronunciation-create label,
.admin-pronunciation-row label { display: grid; gap: 6px; font-weight: 800; }
.admin-pronunciation-create input,
.admin-pronunciation-row input,
.admin-pronunciation-preview textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #ccd8eb;
    border-radius: 12px;
    background: #fff;
    color: #14213d;
    padding: 11px 12px;
    font: inherit;
}
.admin-pronunciation-arrow { align-self: center; color: #2a7be4; font-size: 1.7rem; font-weight: 900; }
.admin-pronunciation-create > small,
.admin-pronunciation-row > small { grid-column: 1 / -1; min-height: 1em; }
.admin-pronunciation-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0;
}
.admin-pronunciation-preview label,
.admin-pronunciation-preview > div { display: grid; gap: 7px; font-weight: 800; color: #273a5b; }
.admin-pronunciation-preview > div {
    align-content: start;
    padding: 13px 15px;
    border: 1px dashed #9fb8e8;
    border-radius: 14px;
    background: #fff;
}
.admin-pronunciation-preview output { white-space: pre-wrap; word-break: break-word; color: #0a6c5d; }
.admin-pronunciation-list { display: grid; gap: 10px; }
.admin-pronunciation-row {
    padding: 14px;
    border: 1px solid #dce4f2;
    border-radius: 16px;
    background: #fff;
}
.admin-pronunciation-row.is-inactive { opacity: .6; background: #f2f4f7; }
.admin-pronunciation-row .inline-check { align-self: center; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.admin-pronunciation-row .inline-check input { width: 18px; height: 18px; padding: 0; }
.admin-pronunciation-empty { padding: 24px; border: 1px dashed #bdcae2; border-radius: 16px; text-align: center; }

@media (max-width: 980px) {
    .admin-pronunciation-manager > header,
    .admin-pronunciation-preview { grid-template-columns: 1fr; display: grid; }
    .admin-pronunciation-create,
    .admin-pronunciation-row { grid-template-columns: 1fr auto 1fr; }
    .admin-pronunciation-order,
    .admin-pronunciation-create .primary-btn,
    .admin-pronunciation-row .inline-check,
    .admin-pronunciation-row .ghost-btn,
    .admin-pronunciation-row .danger-btn { grid-column: auto; }
}

@media (max-width: 640px) {
    .admin-pronunciation-manager { padding: 16px; }
    .admin-pronunciation-summary { width: 100%; }
    .admin-pronunciation-summary span { flex: 1; }
    .admin-pronunciation-create,
    .admin-pronunciation-row { grid-template-columns: 1fr; align-items: stretch; }
    .admin-pronunciation-arrow { display: none; }
}

/* CartClip scrollbars: compact, readable and consistent across every internal panel. */
html {
    scrollbar-gutter: stable;
    scrollbar-color: #6b63ed rgba(137, 151, 176, .14);
    scrollbar-width: thin;
}

* {
    scrollbar-color: #6b63ed rgba(137, 151, 176, .14);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(137, 151, 176, .14);
}

*::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, #3478ee 0%, #7659ed 54%, #18ad9f 100%) padding-box;
    box-shadow: 0 2px 8px rgba(57, 82, 160, .22);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2169df 0%, #8b4de1 52%, #079b8d 100%) padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

:root[data-theme="dark"] *,
body.dark-mode * {
    scrollbar-color: #7f72f4 rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] *::-webkit-scrollbar-track,
body.dark-mode *::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
}

/* Developer API */
.developer-api-page {
    --api-ink: #111c34;
    --api-muted: #67738d;
    --api-line: #dce5f2;
    --api-card: rgba(255, 255, 255, .94);
    display: grid;
    gap: 22px;
}

.api-workspace-head {
    background:
        radial-gradient(circle at 88% 20%, rgba(25, 205, 185, .18), transparent 26%),
        radial-gradient(circle at 66% 100%, rgba(111, 77, 255, .16), transparent 34%),
        linear-gradient(135deg, #fbfdff, #f5f3ff 62%, #ecfffb);
}

.api-version-badge {
    min-width: 142px;
    padding: 18px 22px;
    border: 1px solid rgba(43, 193, 174, .28);
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 16px 35px rgba(24, 50, 91, .08);
    text-align: center;
}

.api-version-badge b {
    display: block;
    color: #0d967e;
    font-size: 30px;
    line-height: 1;
}

.api-version-badge span {
    display: block;
    margin-top: 7px;
    color: var(--api-muted);
    font-size: 13px;
    font-weight: 700;
}

.api-limits-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--api-line);
    border-radius: 24px;
    background: var(--api-card);
    box-shadow: 0 16px 40px rgba(29, 45, 78, .07);
}

.api-limits-strip article {
    min-height: 100px;
    padding: 22px;
    display: grid;
    place-content: center;
    text-align: center;
}

.api-limits-strip article + article {
    border-left: 1px solid var(--api-line);
}

.api-limits-strip b {
    color: var(--api-ink);
    font-size: 22px;
}

.api-limits-strip span {
    margin-top: 4px;
    color: var(--api-muted);
    font-size: 13px;
}

.api-key-layout {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    gap: 22px;
    align-items: start;
}

.api-key-create-card,
.api-keys-card,
.api-docs-shell {
    border: 1px solid var(--api-line);
    border-radius: 28px;
    background: var(--api-card);
    box-shadow: 0 18px 48px rgba(29, 45, 78, .08);
}

.api-key-create-card {
    padding: 25px;
    display: grid;
    gap: 18px;
}

.api-key-create-card > div > p:last-child {
    margin: 6px 0 0;
    color: var(--api-muted);
    line-height: 1.65;
}

.api-key-create-card label,
.api-scope-grid {
    color: var(--api-ink);
    font-weight: 700;
}

.api-key-create-card input[type="text"] {
    width: 100%;
    margin-top: 8px;
}

.api-scope-grid {
    padding: 0;
    display: grid;
    gap: 10px;
    border: 0;
}

.api-scope-grid legend {
    margin-bottom: 10px;
}

.api-scope-grid label {
    padding: 13px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--api-line);
    border-radius: 16px;
    background: #f8fbff;
    cursor: pointer;
}

.api-scope-grid input {
    margin-top: 4px;
    accent-color: #6853ed;
}

.api-scope-grid span {
    display: grid;
    gap: 2px;
}

.api-scope-grid small {
    color: var(--api-muted);
    font-weight: 500;
}

.api-keys-card {
    padding: 25px;
}

.api-keys-card > header,
.api-docs-shell > header {
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.api-key-reveal {
    margin-bottom: 18px;
    padding: 16px;
    display: grid;
    gap: 12px;
    border: 1px solid rgba(13, 150, 126, .3);
    border-radius: 18px;
    background: linear-gradient(135deg, #eafff9, #eff7ff);
}

.api-key-reveal[hidden] {
    display: none;
}

.api-key-reveal strong {
    color: #087663;
}

.api-key-reveal code {
    padding: 13px;
    overflow-wrap: anywhere;
    border-radius: 12px;
    background: #102038;
    color: #d9fff7;
    font-size: 13px;
}

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

.api-key-row {
    padding: 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--api-line);
    border-radius: 18px;
    background: #fbfdff;
}

.api-key-row.is-revoked {
    opacity: .58;
}

.api-key-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #171f34;
    color: #78f2dc;
    font: 700 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.api-key-row > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.api-key-row > div > div {
    display: flex;
    gap: 8px;
    align-items: center;
}

.api-key-row h3 {
    margin: 0;
    color: var(--api-ink);
    font-size: 16px;
}

.api-key-row em {
    padding: 3px 8px;
    border-radius: 999px;
    background: #dcfff3;
    color: #087663;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.api-key-row.is-revoked em {
    background: #eef1f5;
    color: #778194;
}

.api-key-row code {
    color: #5e50c9;
    font-size: 12px;
}

.api-key-row small,
.api-key-row span {
    overflow: hidden;
    color: var(--api-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-key-row span {
    font-size: 11px;
}

.danger-ghost-btn {
    padding: 9px 12px;
    border: 1px solid #ffc6ce;
    border-radius: 12px;
    background: #fff4f6;
    color: #d33f53;
    font-weight: 800;
    cursor: pointer;
}

.clip-row .status.expired {
    background: #eef1f5;
    color: #687286;
}

.api-docs-shell {
    padding: 28px;
}

.api-agent-note,
.api-policy-note {
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid #d9d2ff;
    border-radius: 18px;
    background: linear-gradient(135deg, #f4f1ff, #f3fbff);
}

.api-agent-note b,
.api-policy-note b {
    color: var(--api-ink);
}

.api-agent-note p,
.api-policy-note p {
    margin: 5px 0 12px;
    color: var(--api-muted);
    line-height: 1.7;
}

.api-agent-note code,
.api-policy-note code {
    color: #5b45d7;
    font-weight: 700;
}

.api-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.api-doc-grid article {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--api-line);
    border-radius: 18px;
    background: #f9fbfe;
}

.api-doc-grid article.api-doc-wide {
    grid-column: 1 / -1;
}

.api-doc-grid article > div {
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.api-doc-grid article > div span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #6a52e8;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.api-doc-grid h3 {
    margin: 0;
    color: var(--api-ink);
}

.api-doc-grid pre {
    margin: 0;
    padding: 15px;
    overflow: auto;
    border-radius: 14px;
    background: #111a2d;
    color: #d6e3ff;
    font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.api-doc-grid article > p {
    margin: 10px 0 0;
    color: var(--api-muted);
    line-height: 1.65;
}

.api-policy-note {
    margin: 18px 0 0;
    border-color: #bdeee4;
    background: #effcf8;
}

@media (max-width: 980px) {
    .api-limits-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .api-limits-strip article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--api-line);
    }
    .api-limits-strip article:nth-child(4) {
        border-top: 1px solid var(--api-line);
    }
    .api-key-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .api-limits-strip,
    .api-doc-grid {
        grid-template-columns: 1fr;
    }
    .api-limits-strip article + article,
    .api-limits-strip article:nth-child(3) {
        border-top: 1px solid var(--api-line);
        border-left: 0;
    }
    .api-key-row {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .api-key-row .danger-ghost-btn {
        grid-column: 1 / -1;
    }
    .api-doc-grid article.api-doc-wide {
        grid-column: auto;
    }
    .api-docs-shell,
    .api-key-create-card,
    .api-keys-card {
        padding: 18px;
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: linear-gradient(180deg, var(--page) 0%, #f8fafc 52%, var(--page-2) 100%);
    font-family: "Kanit", system-ui, sans-serif;
    letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 12px max(18px, calc((100vw - 1220px) / 2));
    border-bottom: 1px solid rgba(216, 224, 233, .78);
    background: rgba(250, 252, 255, .88);
    backdrop-filter: blur(18px);
}
.page-home .topbar {
    border-bottom-color: rgba(255, 255, 255, .13);
    color: #f8fbff;
    background: rgba(8, 16, 24, .72);
}
.brand {
    min-width: 226px;
    display: flex;
    align-items: center;
    gap: 11px;
    overflow: hidden;
}
.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    color: #04100f;
    background: linear-gradient(135deg, #ffffff 0%, #7cf4e6 48%, var(--teal) 100%);
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(0, 183, 163, .28);
}
.logo-mark,
.logo-tile {
    overflow: hidden;
    padding: 0;
    background: #050712;
}
.logo-mark img,
.logo-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.brand-mark.logo-mark {
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}
.brand strong, .brand small { display: block; }
.brand > span:last-child { min-width: 0; }
.brand strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
}
.brand small { color: var(--muted); font-size: .75rem; }
.page-home .brand small { color: rgba(248, 251, 255, .66); }
.nav {
    display: flex;
    justify-content: center;
    gap: 4px;
}
.nav a, .ghost-btn, .primary-btn, .pill, .mini-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius);
    font-weight: 800;
    white-space: nowrap;
}
.nav a {
    padding: 0 12px;
    color: var(--muted);
    border: 1px solid transparent;
}
.page-home .nav a { color: rgba(248, 251, 255, .72); }
.nav a.active, .nav a:hover {
    color: var(--ink);
    border-color: var(--line);
    background: var(--surface);
}
.page-home .nav a.active, .page-home .nav a:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .10);
}
.top-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}
.icon-pill,
.top-icons > button {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-2);
    background: rgba(255, 255, 255, .86);
    font-weight: 900;
    cursor: pointer;
}
.user-pill {
    min-height: 44px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, .82);
    line-height: 1.15;
}
.user-pill b {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
}
.user-pill small {
    color: var(--muted);
    font-size: .72rem;
}
.primary-btn {
    border: 0;
    padding: 0 18px;
    color: #051311;
    background: linear-gradient(135deg, #a8fff4 0%, var(--teal) 54%, #33d2ff 100%);
    box-shadow: 0 12px 26px rgba(0, 183, 163, .25);
}
.primary-btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
.ghost-btn {
    border: 1px solid var(--line);
    padding: 0 15px;
    color: var(--ink);
    background: rgba(255, 255, 255, .72);
}
.page-home .ghost-btn {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .10);
}
.ghost-btn:hover, .mini-btn:hover {
    border-color: rgba(0, 183, 163, .55);
    box-shadow: var(--shadow-soft);
}
.pill {
    border: 1px solid var(--line);
    padding: 0 13px;
    color: var(--muted);
    background: var(--surface);
}
.pill b { color: var(--teal-dark); }
.wide { width: 100%; }
.mini-btn {
    min-height: 34px;
    border: 1px solid var(--line);
    padding: 0 11px;
    color: var(--ink);
    background: var(--surface);
}
.mini-btn.danger {
    border-color: rgba(217, 50, 85, .35);
    color: var(--bad);
    background: #fff2f5;
}

main {
    width: min(1220px, 100%);
    margin: 0 auto;
    padding: 34px clamp(18px, 4vw, 44px) 52px;
}
.page-home main {
    width: 100%;
    padding: 0;
}
.hero {
    min-height: min(720px, calc(100svh - 118px));
    display: grid;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 72px max(22px, calc((100vw - 1220px) / 2)) 86px;
    background-image:
        linear-gradient(90deg, rgba(5, 11, 17, .94) 0%, rgba(5, 11, 17, .78) 42%, rgba(5, 11, 17, .35) 68%, rgba(5, 11, 17, .15) 100%),
        url("api.php?action=asset&file=hero-cartclip.jpg&v=20260702-alina");
    background-size: cover;
    background-position: center;
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 7px;
    background: linear-gradient(90deg, var(--teal), var(--coral), var(--amber), var(--blue));
}
.hero-copy {
    width: min(680px, 100%);
    position: relative;
    z-index: 1;
}
.hero-logo {
    width: clamp(132px, 17vw, 224px);
    aspect-ratio: 1;
    margin: 0 0 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .34);
    background: #050712;
}
.eyebrow {
    margin-bottom: 10px;
    color: var(--teal-dark);
    font-weight: 900;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .08em;
}
.page-home .eyebrow { color: #8ff7ec; }
.hero h1 {
    margin-bottom: 16px;
    color: #ffffff;
    font-size: 4.8rem;
    line-height: .94;
}
.lead {
    max-width: 650px;
    color: var(--muted);
    font-size: 1.12rem;
    line-height: 1.8;
}
.hero .lead { color: rgba(248, 251, 255, .78); }
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
}
.hero-badges span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 0 13px;
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .09);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
    margin: 34px 0 0;
}
.hero-proof div {
    border-top: 1px solid rgba(255, 255, 255, .22);
    padding-top: 12px;
}
.hero-proof dt {
    color: #ffffff;
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
}
.hero-proof dd {
    margin: 5px 0 0;
    color: rgba(248, 251, 255, .68);
}
.hero-media { display: none; }

.metrics {
    width: min(1220px, calc(100% - 44px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: -42px auto 0;
    position: relative;
    z-index: 2;
}
.metrics article {
    min-height: 116px;
    border: 1px solid rgba(216, 224, 233, .9);
    border-radius: var(--radius);
    padding: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow);
}
.metrics strong {
    display: block;
    color: var(--ink);
    font-size: 2.2rem;
    line-height: 1;
}
.metrics span { color: var(--muted); }

.pricing, .feature-band {
    margin-top: 0;
    padding: 74px 0;
}
.sale-flow {
    padding: 76px 0 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(238, 243, 247, .96));
}
.sale-flow > .section-head,
.flow-grid {
    width: min(1220px, calc(100% - 44px));
    margin-left: auto;
    margin-right: auto;
}
.flow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.sale-flow article {
    min-height: 218px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
}
.sale-flow b {
    display: inline-flex;
    min-width: 46px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--blue);
    background: #e5f1ff;
    font-size: .9rem;
}
.sale-flow h3 {
    margin: 18px 0 10px;
    font-size: 1.22rem;
}
.sale-flow p {
    margin: 0;
    color: var(--muted);
    line-height: 1.72;
}
.pricing {
    background: #ffffff;
}
.pricing > .section-head,
.pricing > .price-grid,
.pricing > .signup-box,
.feature-band {
    width: min(1220px, calc(100% - 44px));
    margin-left: auto;
    margin-right: auto;
}
.section-head {
    margin-bottom: 22px;
}
.section-head h2, .workspace-head h1 {
    margin-bottom: 0;
    font-size: 2.6rem;
    line-height: 1.08;
}
.price-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.price-card {
    position: relative;
    overflow: hidden;
    min-height: 242px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.price-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
}
.price-card span {
    color: var(--muted);
    font-weight: 900;
}
.price-card strong {
    display: block;
    margin-top: 16px;
    color: var(--ink);
    font-size: 2.45rem;
    line-height: 1;
}
.price-card p {
    color: var(--teal-dark);
    font-weight: 900;
}
.price-card .primary-btn {
    margin-top: 14px;
}
.price-card a.primary-btn {
    display: inline-flex;
}
.signup-box {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(230px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    background: #f7fafc;
}
.feature-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.feature-band article {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.feature-band h3 { margin-bottom: 8px; }
.feature-band p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.75;
}

.csv-import-hub {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 18px;
    margin: 22px 0;
    padding: 22px;
    border: 1px solid rgba(85, 92, 246, .16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 95% 0%, rgba(255, 121, 76, .16), transparent 32%),
        radial-gradient(circle at 0% 100%, rgba(32, 204, 190, .15), transparent 34%),
        linear-gradient(145deg, #f8f7ff 0%, #f4fbff 50%, #fff9f4 100%);
    box-shadow: 0 20px 55px rgba(35, 48, 87, .10);
}
.csv-import-hub::after {
    content: "";
    position: absolute;
    right: -54px;
    top: -58px;
    width: 160px;
    height: 160px;
    border: 24px solid rgba(255,255,255,.42);
    border-radius: 50%;
    pointer-events: none;
}
.csv-import-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}
.csv-import-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #5b35f5, #2f6eea 52%, #20c9b7);
    box-shadow: 0 14px 30px rgba(67, 73, 226, .24);
    font-size: .86rem;
    font-weight: 1000;
    letter-spacing: .06em;
}
.csv-import-heading h2 {
    margin: 2px 0 6px;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}
.csv-import-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}
.csv-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.csv-platform-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 22px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 28px rgba(42, 54, 88, .08);
}
.csv-platform-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 22px 0 0 22px;
}
.csv-platform-tiktok::before { background: linear-gradient(#111827, #20d5c2); }
.csv-platform-shopee::before { background: linear-gradient(#ff7a2f, #ee4d2d); }
.csv-platform-unified::before { background: linear-gradient(180deg, #111827, #20c9b7 52%, #ee4d2d); }
.csv-platform-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 1000;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .14);
}
.csv-platform-tiktok .csv-platform-icon { background: linear-gradient(145deg, #111827, #23344d); }
.csv-platform-shopee .csv-platform-icon { background: linear-gradient(145deg, #ff7a2f, #ee4d2d); }
.csv-platform-unified .csv-platform-icon {
    width: 64px;
    background: linear-gradient(145deg, #243b55, #7357df 52%, #ee4d2d);
    font-size: .78rem;
    letter-spacing: .08em;
}
.csv-platform-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.csv-platform-unified .csv-platform-pill.is-tiktok { color: #075f59; background: #dffaf6; }
.csv-platform-unified .csv-platform-pill.is-shopee { color: #b63820; background: #fff0e9; }
.csv-auto-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
.csv-auto-rules span {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #e3e7f1;
    border-radius: 14px;
    color: #5d6b83;
    background: #f9fbff;
    font-size: .78rem;
}
.csv-auto-rules b { color: #1b2941; }
.csv-auto-rules em { color: #7042d5; font-style: normal; font-weight: 900; }
.csv-platform-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.csv-platform-kicker {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.csv-platform-copy strong {
    color: var(--ink);
    font-size: 1.05rem;
}
.csv-platform-copy small {
    color: var(--muted);
    font-weight: 700;
    line-height: 1.45;
}
.csv-platform-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.csv-platform-actions button {
    min-height: 44px;
    border-radius: 14px;
    padding: 0 12px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.csv-platform-actions button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .11);
}
.csv-template-btn {
    border: 1px solid rgba(100, 116, 139, .22);
    color: #334155;
    background: #fff;
}
.csv-import-btn {
    border: 0;
    color: #fff;
}
.csv-platform-tiktok .csv-import-btn { background: linear-gradient(135deg, #111827, #243b55); }
.csv-platform-shopee .csv-import-btn { background: linear-gradient(135deg, #ff7a2f, #ee4d2d); }
.csv-platform-unified .csv-import-btn { background: linear-gradient(135deg, #2768f1, #17bfa9); }
.csv-builder .csv-platform-unified:hover { border-color: rgba(97, 87, 237, .42); }
.csv-import-status {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 11px 14px;
    border: 1px solid rgba(44, 177, 144, .18);
    border-radius: 17px;
    color: #116b5b;
    background: rgba(231, 252, 246, .72);
}
.csv-import-status > span {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #fff;
    background: #20ad91;
    font-weight: 1000;
}
.csv-import-status p {
    display: grid;
    gap: 2px;
    margin: 0;
}
.csv-import-status small {
    color: #568074;
    font-weight: 700;
}
.csv-import-status.is-working {
    color: #8b5a00;
    border-color: rgba(245, 158, 11, .25);
    background: #fff9e8;
}
.csv-import-status.is-working > span { background: #f59e0b; }
.csv-import-status.is-error {
    color: #b4233b;
    border-color: rgba(239, 68, 68, .22);
    background: #fff2f4;
}
.csv-import-status.is-error > span { background: #ef476f; }
.csv-import-status.is-success {
    color: #087b64;
    background: #e9fbf6;
}

/* Dedicated CSV studio */
.page-csv .app-page {
    width: min(1480px, calc(100% - 44px));
    margin-inline: auto;
}
.csv-page {
    display: grid;
    gap: 24px;
}
.csv-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    align-items: center;
    min-height: 330px;
    padding: clamp(30px, 4vw, 58px);
    border: 1px solid rgba(95, 103, 255, .18);
    border-radius: 36px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 4%, rgba(255, 107, 92, .4), transparent 30%),
        radial-gradient(circle at 10% 100%, rgba(38, 222, 201, .3), transparent 34%),
        linear-gradient(125deg, #0d1731 0%, #17295e 52%, #412273 100%);
    box-shadow: 0 30px 85px rgba(37, 43, 91, .24);
}
.csv-page-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, #000, transparent 80%);
}
.csv-page-hero-copy {
    position: relative;
    z-index: 2;
}
.csv-page-hero .eyebrow {
    color: #61f1dc;
    letter-spacing: .16em;
}
.csv-page-hero h1 {
    margin: 8px 0 16px;
    max-width: 850px;
    color: #fff;
    font-size: clamp(2.3rem, 4.5vw, 4.8rem);
    line-height: .98;
    letter-spacing: -.045em;
}
.csv-page-hero h1 span {
    color: #9ff7ea;
}
.csv-page-hero-copy > p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: #cdd8ef;
    font-size: 1.05rem;
    line-height: 1.7;
}
.csv-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}
.csv-hero-badges span {
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #f4f8ff;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    font-size: .86rem;
    font-weight: 800;
}
.csv-page-hero-art {
    position: relative;
    min-height: 250px;
}
.csv-page-hero-art > span {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: 0 24px 50px rgba(0,0,0,.28);
    font-weight: 1000;
}
.csv-art-file {
    z-index: 3;
    left: 50%;
    top: 48%;
    width: 150px;
    height: 180px;
    border-radius: 30px;
    color: #102044;
    background: linear-gradient(145deg, #fff, #cfe8ff);
    font-size: 1.65rem;
    transform: translate(-50%, -50%) rotate(-5deg);
}
.csv-art-file::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-style: solid;
    border-width: 0 0 40px 40px;
    border-color: transparent transparent #a8cff5 transparent;
}
.csv-art-tiktok,
.csv-art-shopee {
    z-index: 4;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    color: #fff;
    font-size: 2rem;
}
.csv-art-tiktok {
    left: 10%;
    bottom: 7%;
    background: linear-gradient(145deg, #111827, #19c8ba);
    transform: rotate(-9deg);
}
.csv-art-shopee {
    right: 8%;
    top: 5%;
    background: linear-gradient(145deg, #ff862f, #ed4d2c);
    transform: rotate(10deg);
}
.csv-page-hero-art i {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #66f3dd;
    box-shadow: 0 0 0 8px rgba(102,243,221,.12);
}
.csv-page-hero-art i:nth-of-type(1) { left: 22%; top: 22%; }
.csv-page-hero-art i:nth-of-type(2) { right: 22%; bottom: 22%; background: #ff9a68; }
.csv-page-hero-art i:nth-of-type(3) { left: 52%; bottom: 1%; background: #9c7cff; }

.csv-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 22px;
}
.csv-builder {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: 24px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(45, 55, 89, .12);
}
.csv-campaign-bar {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(260px, 1.2fr);
    gap: 20px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid #dbe8fa;
    border-radius: 22px;
    background: linear-gradient(135deg, #f4f8ff, #eefcf9);
}
.csv-campaign-bar > div {
    display: grid;
    gap: 3px;
}
.csv-campaign-bar span {
    color: #2177e2;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.csv-campaign-bar strong {
    color: #15213c;
}
.csv-campaign-bar label {
    margin: 0;
}
.csv-campaign-bar input {
    min-height: 52px;
    border-color: #bfd4f0;
    background: #fff;
    font-weight: 800;
}
.csv-builder .csv-import-hub {
    margin: 0;
    padding: 28px;
}
.csv-builder .csv-platform-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 310px;
    padding: 22px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.csv-builder .csv-platform-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(32, 43, 78, .14);
}
.csv-builder .csv-platform-tiktok:hover { border-color: rgba(30, 205, 190, .48); }
.csv-builder .csv-platform-shopee:hover { border-color: rgba(238, 77, 45, .4); }
.csv-platform-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.csv-platform-pill {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
}
.csv-platform-tiktok .csv-platform-pill {
    color: #075f59;
    background: #dffaf6;
}
.csv-platform-shopee .csv-platform-pill {
    color: #b63820;
    background: #fff0e9;
}
.csv-builder .csv-platform-copy strong {
    font-size: 1.22rem;
}
.csv-card-steps {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.csv-card-steps li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #526079;
    font-size: .88rem;
    font-weight: 700;
}
.csv-card-steps b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    color: #fff;
    background: #7282a0;
    font-size: .72rem;
}
.csv-platform-tiktok .csv-card-steps b { background: linear-gradient(135deg, #111827, #20c9b7); }
.csv-platform-shopee .csv-card-steps b { background: linear-gradient(135deg, #ff7a2f, #ee4d2d); }
.csv-builder .csv-platform-actions {
    margin-top: auto;
}
.csv-platform-card input[type="file"][hidden] {
    display: none !important;
}
.csv-imported-section {
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid #e1e8f2;
    border-radius: 24px;
    background: #f8faff;
}
.csv-imported-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.csv-imported-head h2 {
    margin: 2px 0 0;
}
.csv-imported-section [data-products]:empty::before {
    content: "ยังไม่มีรายการสินค้า เลือกไฟล์ CSV ด้านบนเพื่อเริ่มนำเข้า";
    display: grid;
    place-items: center;
    min-height: 150px;
    border: 2px dashed #cbd8eb;
    border-radius: 20px;
    color: #71809a;
    background: #fff;
    text-align: center;
    font-weight: 800;
}
.csv-submit-bar {
    position: sticky;
    z-index: 8;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(117, 137, 176, .2);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 45px rgba(28, 38, 67, .16);
    backdrop-filter: blur(16px);
}
.csv-submit-bar > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin-right: auto;
}
.csv-submit-bar small {
    color: var(--muted);
}
.csv-guide-panel {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(102, 117, 155, .15);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(116, 88, 246, .12), transparent 32%),
        #fff;
    box-shadow: 0 20px 55px rgba(39, 49, 82, .1);
}
.csv-guide-panel h2 {
    margin: -8px 0 2px;
}
.csv-guide-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.csv-guide-step > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #5968f2, #28bfaa);
    font-size: .8rem;
    font-weight: 1000;
    box-shadow: 0 10px 20px rgba(76, 93, 215, .2);
}
.csv-guide-step div {
    display: grid;
    gap: 3px;
}
.csv-guide-step small {
    color: var(--muted);
    line-height: 1.5;
}
.csv-guide-note {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    padding: 13px;
    border-radius: 16px;
    color: #8a5400;
    background: #fff6d9;
}
.csv-guide-note > span {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #fff;
    background: #f2a100;
    font-weight: 1000;
}
.csv-guide-note p {
    display: grid;
    gap: 3px;
    margin: 0;
}
.csv-guide-note small {
    color: #866a35;
    line-height: 1.45;
}

/* =========================================================
   CartClip application color system
   ========================================================= */
.page-dashboard,
.page-app {
    --page-accent: #2768f1;
    --page-accent-2: #17bfa9;
    --page-accent-soft: #e7f0ff;
    --page-accent-rgb: 39, 104, 241;
}
.page-csv {
    --page-accent: #6157ed;
    --page-accent-2: #1fc3ad;
    --page-accent-soft: #ecebff;
    --page-accent-rgb: 97, 87, 237;
}
.page-history,
.page-knowledge-story,
.page-knowledge-story-history {
    --page-accent: #7c46df;
    --page-accent-2: #ec4f91;
    --page-accent-soft: #f0e9ff;
    --page-accent-rgb: 124, 70, 223;
}
.page-credit {
    --page-accent: #0aaf84;
    --page-accent-2: #f39c32;
    --page-accent-soft: #e2faf2;
    --page-accent-rgb: 10, 175, 132;
}
.page-admin {
    --page-accent: #f06b35;
    --page-accent-2: #e63f6b;
    --page-accent-soft: #fff0e9;
    --page-accent-rgb: 240, 107, 53;
}
.page-login {
    --page-accent: #4c66e8;
    --page-accent-2: #9a4fe0;
    --page-accent-soft: #edf0ff;
    --page-accent-rgb: 76, 102, 232;
}

.page-dashboard,
.page-app,
.page-knowledge-story,
.page-knowledge-story-history,
.page-csv,
.page-history,
.page-credit,
.page-admin {
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--page-accent-rgb), .18), transparent 30%),
        radial-gradient(circle at 96% 20%, color-mix(in srgb, var(--page-accent-2) 16%, transparent), transparent 30%),
        linear-gradient(145deg, #eef4fb 0%, #f9fbff 48%, color-mix(in srgb, var(--page-accent-soft) 58%, #fff) 100%);
}
.page-dashboard .side-menu,
.page-app .side-menu,
.page-knowledge-story .side-menu,
.page-knowledge-story-history .side-menu,
.page-csv .side-menu,
.page-history .side-menu,
.page-credit .side-menu,
.page-admin .side-menu {
    border-right: 1px solid rgba(var(--page-accent-rgb), .12);
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,255,.9)),
        var(--page-accent-soft);
    box-shadow: 14px 0 45px rgba(29, 43, 76, .07);
}
.alina-shell .side-nav a {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.alina-shell .side-nav a:not(.apk-download)::after {
    content: "";
    position: absolute;
    inset: auto 12px 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--page-accent), var(--page-accent-2));
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .18s ease, transform .18s ease;
}
.alina-shell .side-nav a:not(.apk-download):hover {
    color: var(--page-accent);
    background: color-mix(in srgb, var(--page-accent-soft) 78%, #fff);
    transform: translateX(3px);
}
.alina-shell .side-nav a:not(.apk-download).active {
    color: #fff;
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
    box-shadow: 0 12px 25px rgba(var(--page-accent-rgb), .25);
}
.alina-shell .side-nav a:not(.apk-download).active i {
    color: #fff;
}
.alina-shell .side-nav a:not(.apk-download):hover::after {
    opacity: 1;
    transform: scaleX(1);
}
.alina-shell .side-nav a:not(.apk-download).active::after {
    display: none;
}
.alina-shell .side-nav a:nth-child(1) i { color: #3478ec; }
.alina-shell .side-nav a:nth-child(2) i { color: #7557df; }
.alina-shell .side-nav a:nth-child(3) i { color: #ec5791; }
.alina-shell .side-nav a:nth-child(4) i { color: #08a97f; }
.alina-shell .side-nav a:nth-child(5) i { color: #ed713e; }

.page-app .shell-top,
.page-knowledge-story .shell-top,
.page-knowledge-story-history .shell-top,
.page-csv .shell-top,
.page-history .shell-top,
.page-credit .shell-top,
.page-admin .shell-top {
    position: relative;
    overflow: hidden;
    border-bottom-color: rgba(var(--page-accent-rgb), .16);
    background:
        radial-gradient(circle at 82% 0%, rgba(var(--page-accent-rgb), .1), transparent 30%),
        rgba(255,255,255,.92);
    backdrop-filter: blur(22px);
}
.page-app .shell-top::after,
.page-csv .shell-top::after,
.page-history .shell-top::after,
.page-credit .shell-top::after,
.page-admin .shell-top::after {
    content: "";
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--page-accent), var(--page-accent-2), transparent 76%);
}
.alina-shell .shell-top h2,
.alina-shell .breadcrumb strong {
    color: var(--page-accent);
}
.alina-shell .top-icons > span,
.alina-shell .top-icons > button {
    border-color: rgba(var(--page-accent-rgb), .16);
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 20px rgba(var(--page-accent-rgb), .07);
}
.alina-shell .top-icons .flag {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
}
.alina-shell .top-icons .credit-chip {
    color: var(--page-accent);
    background: color-mix(in srgb, var(--page-accent-soft) 72%, #fff);
}

.page-app .workspace-head,
.page-history .workspace-head,
.page-credit .workspace-head,
.page-admin .workspace-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 132px;
    display: flex;
    align-items: center;
    border-color: rgba(var(--page-accent-rgb), .16);
    border-radius: 28px;
    padding: 25px 28px;
    background:
        radial-gradient(circle at 92% 0%, rgba(var(--page-accent-rgb), .2), transparent 34%),
        linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--page-accent-soft) 70%, #fff) 100%);
    box-shadow: 0 22px 55px rgba(var(--page-accent-rgb), .12);
}
.page-app .workspace-head::after,
.page-history .workspace-head::after,
.page-credit .workspace-head::after,
.page-admin .workspace-head::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -28px;
    top: -80px;
    width: 210px;
    height: 210px;
    border: 28px solid rgba(var(--page-accent-rgb), .08);
    border-radius: 50%;
}
.alina-shell .workspace-head .eyebrow {
    color: var(--page-accent);
    letter-spacing: .13em;
}
.alina-shell .workspace-head h1 {
    margin-top: 5px;
    color: #11203d;
    font-size: clamp(2rem, 3vw, 3.25rem);
    letter-spacing: -.035em;
}
.alina-shell .account-strip {
    position: relative;
    z-index: 2;
}
.alina-shell .account-strip span {
    border: 1px solid rgba(var(--page-accent-rgb), .13);
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 18px rgba(var(--page-accent-rgb), .07);
}
.alina-shell .account-strip span:nth-child(1) b { color: #246ee8; }
.alina-shell .account-strip span:nth-child(2) b { color: #8250d9; }
.alina-shell .account-strip span:nth-child(3) b { color: #ed6b38; }
.alina-shell .account-strip span:nth-child(4) b { color: #069b76; }

.page-app .builder,
.page-app .side-status,
.page-history .history-list,
.page-history .history-detail,
.page-credit .credit-panel,
.page-admin .admin-panel,
.page-admin .table-section {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--page-accent-rgb), .14);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,253,255,.92));
    box-shadow: 0 22px 60px rgba(34, 48, 79, .1);
}
.page-app .builder::before,
.page-app .side-status::before,
.page-history .history-list::before,
.page-history .history-detail::before,
.page-credit .credit-panel::before,
.page-admin .admin-panel::before,
.page-admin .table-section::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--page-accent), var(--page-accent-2));
}
.alina-shell .primary-btn {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
    box-shadow: 0 12px 26px rgba(var(--page-accent-rgb), .24);
}
.alina-shell .ghost-btn {
    color: var(--page-accent);
    border-color: rgba(var(--page-accent-rgb), .2);
    background: color-mix(in srgb, var(--page-accent-soft) 68%, #fff);
}
.alina-shell .mini-btn:not(.danger) {
    color: var(--page-accent);
    border-color: rgba(var(--page-accent-rgb), .18);
    background: color-mix(in srgb, var(--page-accent-soft) 72%, #fff);
}
.alina-shell input:focus,
.alina-shell select:focus,
.alina-shell textarea:focus {
    border-color: var(--page-accent);
    box-shadow: 0 0 0 4px rgba(var(--page-accent-rgb), .12);
}

.page-app .advanced {
    border-color: rgba(95, 87, 237, .16);
    background:
        radial-gradient(circle at 100% 0%, rgba(96, 87, 237, .08), transparent 28%),
        #fbfcff;
}
.page-app .advanced summary {
    color: #584cc9;
}
.page-app .product-block {
    border-color: rgba(39, 104, 241, .15);
    background: linear-gradient(150deg, #fff, #f5f9ff);
}
.page-app .product-block:nth-child(3n + 1) {
    border-top: 4px solid #2d77ee;
}
.page-app .product-block:nth-child(3n + 2) {
    border-top: 4px solid #10b79c;
}
.page-app .product-block:nth-child(3n) {
    border-top: 4px solid #8a55dc;
}
.page-app .side-status h2::before,
.page-app .product-head strong::before {
    background: linear-gradient(180deg, var(--page-accent), var(--page-accent-2));
}
.page-app .mini-history article:nth-child(4n + 1) { border-left: 4px solid #3478ec; background: #f4f8ff; }
.page-app .mini-history article:nth-child(4n + 2) { border-left: 4px solid #15bda4; background: #f2fcfa; }
.page-app .mini-history article:nth-child(4n + 3) { border-left: 4px solid #8554dc; background: #faf6ff; }
.page-app .mini-history article:nth-child(4n) { border-left: 4px solid #ef7442; background: #fff7f3; }

.page-history .history-layout {
    gap: 20px;
}
.page-history .campaign-row {
    border: 1px solid rgba(124, 70, 223, .13);
    background: linear-gradient(135deg, #fff, #faf6ff);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.page-history .campaign-row:hover,
.page-history .campaign-row.active {
    border-color: #8c59de;
    background: linear-gradient(135deg, #f7f1ff, #fff3f8);
    box-shadow: 0 12px 26px rgba(124, 70, 223, .12);
    transform: translateY(-2px);
}
.page-history .clip-row {
    border: 1px solid rgba(124, 70, 223, .12);
    background: linear-gradient(150deg, #fff, #fcf8ff);
}
.page-history .history-platform-badge.tiktok {
    color: #fff;
    background: linear-gradient(135deg, #111827, #20c5b3);
}
.page-history .history-platform-badge.shopee {
    color: #fff;
    background: linear-gradient(135deg, #ff7a2f, #ee4d2d);
}

.page-credit .credit-overview article:nth-child(1) {
    border-color: #b9d7ff;
    background: linear-gradient(145deg, #fff, #eaf4ff);
}
.page-credit .credit-overview article:nth-child(1)::before { background: linear-gradient(90deg, #3979ec, #43b4f4); }
.page-credit .credit-overview article:nth-child(2) {
    border-color: #bcebdc;
    background: linear-gradient(145deg, #fff, #e8fbf4);
}
.page-credit .credit-overview article:nth-child(2)::before { background: linear-gradient(90deg, #09aa7f, #4fd0aa); }
.page-credit .credit-overview article:nth-child(3) {
    border-color: #ffd4a5;
    background: linear-gradient(145deg, #fff, #fff2df);
}
.page-credit .credit-overview article:nth-child(3)::before { background: linear-gradient(90deg, #f59b2f, #ed6b3b); }
.page-credit .topup-card {
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(10,175,132,.16), transparent 28%),
        linear-gradient(145deg, #f6fffb, #eef8ff);
}
.page-credit .payment-result {
    border: 1px solid rgba(243, 156, 50, .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(243,156,50,.12), transparent 28%),
        #fff;
}
.page-credit .quick-amounts button:nth-child(3n + 1) { border-color: #a8d3ff; background: #edf7ff; }
.page-credit .quick-amounts button:nth-child(3n + 2) { border-color: #ade8d5; background: #effcf7; }
.page-credit .quick-amounts button:nth-child(3n) { border-color: #ffd19d; background: #fff7eb; }

.page-admin .admin-grid .admin-panel:nth-child(4n + 1) {
    background: linear-gradient(145deg, #fff, #fff3ec);
}
.page-admin .admin-grid .admin-panel:nth-child(4n + 2) {
    background: linear-gradient(145deg, #fff, #fff0f5);
}
.page-admin .admin-grid .admin-panel:nth-child(4n + 3) {
    background: linear-gradient(145deg, #fff, #eef8ff);
}
.page-admin .admin-grid .admin-panel:nth-child(4n) {
    background: linear-gradient(145deg, #fff, #edfbf5);
}
.page-admin .admin-showcase-card:nth-child(4n + 1) { border-color: #b9d9ff; background: #f3f8ff; }
.page-admin .admin-showcase-card:nth-child(4n + 2) { border-color: #ffd0bb; background: #fff5f0; }
.page-admin .admin-showcase-card:nth-child(4n + 3) { border-color: #d7c6ff; background: #f9f5ff; }
.page-admin .admin-showcase-card:nth-child(4n) { border-color: #b9ead8; background: #f1fcf8; }

.page-login {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 10%, rgba(51, 192, 201, .36), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(156, 77, 222, .3), transparent 30%),
        linear-gradient(135deg, #101b3d, #22356c 48%, #4c276d);
}
.page-login .topbar {
    border-bottom-color: rgba(255,255,255,.12);
    background: rgba(11, 20, 47, .68);
    backdrop-filter: blur(20px);
}
.page-login .brand strong,
.page-login .nav a {
    color: #fff;
}
.page-login .brand small {
    color: rgba(255,255,255,.65);
}
.page-login .narrow-page {
    position: relative;
    width: min(520px, calc(100% - 28px));
    padding-top: 54px;
}
.page-login .narrow-page::before,
.page-login .narrow-page::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(2px);
}
.page-login .narrow-page::before {
    left: -100px;
    top: 18px;
    width: 220px;
    height: 220px;
    background: rgba(45, 211, 193, .18);
}
.page-login .narrow-page::after {
    right: -120px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    background: rgba(238, 84, 146, .16);
}
.page-login .auth-panel {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 30px;
    padding: 34px;
    background:
        radial-gradient(circle at 100% 0%, rgba(106, 94, 235, .16), transparent 32%),
        rgba(255,255,255,.94);
    box-shadow: 0 34px 90px rgba(0,0,0,.32);
    backdrop-filter: blur(25px);
}
.page-login .auth-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, #25c5b2, #4f69e8, #d94fbd);
}
.page-login .auth-panel .eyebrow {
    color: #5b5ee8;
}
.page-login .auth-panel h1 {
    color: #152143;
    font-size: clamp(2rem, 6vw, 3rem);
}
.page-login .auth-panel .primary-btn {
    border: 0;
    background: linear-gradient(135deg, #4b67e9, #8552dc, #e1549e);
    box-shadow: 0 15px 30px rgba(91, 83, 223, .3);
}

.narrow-page {
    width: min(540px, 100%);
}
.auth-panel,
.builder,
.side-status,
.credit-panel,
.admin-panel,
.table-section,
.history-list,
.history-detail {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-soft);
}
.auth-panel {
    padding: 34px;
}
.auth-panel h1 {
    font-size: 2.45rem;
    line-height: 1;
}
.stack-form, .form-row {
    display: grid;
    gap: 13px;
}
label {
    display: grid;
    gap: 7px;
    color: var(--ink-2);
    font-weight: 800;
}
.field-caption {
    display: block;
    min-height: 0;
    margin-top: -2px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.45;
}
input, select, textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0 13px;
    color: var(--ink);
    background: #ffffff;
    outline: none;
}
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}
textarea {
    min-height: 104px;
    padding-top: 11px;
    resize: vertical;
}
input:focus, select:focus, textarea:focus {
    border-color: rgba(0, 183, 163, .75);
    box-shadow: 0 0 0 3px rgba(0, 183, 163, .13);
}
.review-style-search {
    margin: 8px 0 10px;
    min-height: 42px;
    border-color: rgba(47, 110, 234, .28);
    background: #f8fbff;
}
.review-style-selected {
    display: none;
    margin-top: 8px;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.45;
}
.select2-container {
    width: 100% !important;
    font: inherit;
}
.select2-container--default .select2-selection--single {
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0 44px 0 13px;
    color: var(--ink);
    font-weight: 800;
    line-height: 46px;
    white-space: normal;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}
.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
    border-color: rgba(0, 183, 163, .75) !important;
    box-shadow: 0 0 0 3px rgba(0, 183, 163, .13);
}
.select2-dropdown {
    z-index: 100000;
    border: 1px solid rgba(47, 110, 234, .22);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    font-family: inherit;
}
.select2-search--dropdown {
    padding: 10px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 42px;
    border: 1px solid rgba(47, 110, 234, .28);
    border-radius: 14px;
    padding: 0 12px;
    outline: none;
}
.select2-results__option {
    padding: 10px 14px;
    font-weight: 800;
}
.select2-results__group {
    padding: 10px 14px 4px;
    color: var(--muted);
    font-weight: 900;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg, var(--blue), var(--teal));
    color: #fff;
}
:root[data-theme="dark"] .review-style-search {
    border-color: rgba(125, 211, 252, .24);
    background: rgba(15, 23, 42, .82);
}
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-dropdown,
:root[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--ink);
    background: rgba(15, 23, 42, .96);
    border-color: rgba(125, 211, 252, .24);
}
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
:root[data-theme="dark"] .select2-results__option,
:root[data-theme="dark"] .select2-search__field {
    color: var(--ink);
}
input[type="file"] {
    display: flex;
    align-items: center;
    padding: 8px;
    background: rgba(255, 255, 255, .82);
}
input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-right: 10px;
    border: 0;
    border-radius: 12px;
    padding: 0 13px;
    color: #ffffff;
    background: var(--blue);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}
small, .form-note, [data-form-message], [data-draft-note] {
    color: var(--amber);
    min-height: 20px;
}

.app-page {
    width: min(1360px, 100%);
}
.workspace-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 20px;
}
.account-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 8px;
}
.account-strip span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0 13px;
    color: var(--muted);
    background: #ffffff;
}
.account-strip b { color: var(--ink); }
.tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}
.json-import-head {
    align-items: center;
}
.json-import-head h1 {
    margin-bottom: 8px;
    line-height: 1.15;
}
.json-import-head p:not(.eyebrow) {
    max-width: 920px;
    color: var(--muted);
    line-height: 1.65;
}
.builder[data-json-campaign-form] {
    display: grid;
    gap: 24px;
}
.builder[data-json-campaign-form] > label {
    display: grid;
    gap: 12px;
    margin: 0;
}
.builder[data-json-campaign-form] .form-row {
    gap: 14px;
}
.builder[data-json-campaign-form] .advanced {
    margin-top: 4px;
    padding: 18px;
}
.builder[data-json-campaign-form] .advanced summary {
    margin-bottom: 2px;
}
.builder[data-json-campaign-form] .advanced-grid {
    gap: 18px 20px;
    margin-top: 18px;
}
.builder[data-json-campaign-form] label + input,
.builder[data-json-campaign-form] label + select,
.builder[data-json-campaign-form] label + textarea {
    margin-top: 2px;
}
.builder[data-json-campaign-form] input[type="file"] {
    min-height: 64px;
    align-items: center;
    padding: 11px 12px;
    border-radius: 18px;
    background: #fbfdff;
}
.builder[data-json-campaign-form] input[type="file"]::file-selector-button {
    min-height: 42px;
    margin-right: 14px;
    border-radius: 14px;
    padding: 0 18px;
}
.builder[data-json-campaign-form] .json-preview {
    margin-top: 2px;
}
.builder[data-json-campaign-form] > .primary-btn[type="submit"] {
    width: fit-content;
    min-height: 50px;
    margin-top: 4px;
    padding-inline: 22px;
}
.builder,
.side-status,
.credit-panel,
.admin-panel,
.table-section,
.history-list,
.history-detail {
    padding: 20px;
}
.advanced {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    background: var(--surface-2);
}
.advanced-panel {
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
    box-shadow: 0 14px 40px rgba(15, 23, 42, .07);
}
.advanced summary {
    cursor: pointer;
    color: var(--ink);
    font-weight: 900;
}
.advanced-panel summary {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
}
.advanced-panel summary::-webkit-details-marker {
    display: none;
}
.advanced-icon,
.advanced-field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: #5b35f5;
    background: #f1edff;
    box-shadow: inset 0 0 0 1px rgba(91, 53, 245, .08);
}
.advanced-panel summary small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
}
.advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    margin-top: 18px;
}
.advanced-field {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
}
.advanced-field > :not(.advanced-field-icon) {
    grid-column: 2;
}
.advanced-field-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 2;
}
.advanced-field[data-advanced-field="review_style"] {
    grid-column: 1 / -1;
}
.advanced-field[data-advanced-field="review_style"] .advanced-field-body {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 12px 16px;
}
.advanced-field[data-advanced-field="review_style"] .advanced-field-body > select,
.advanced-field[data-advanced-field="review_style"] .advanced-field-body > .select2-container {
    min-width: 0;
    width: 100% !important;
}
.advanced-field-body select,
.advanced-field-body input[type="text"],
.advanced-field-body input[type="search"],
.advanced-field-body textarea {
    min-width: 0;
}
.advanced-field[data-advanced-field="review_style"] .select2-container {
    min-width: 0;
    width: 100% !important;
}
.advanced-field[data-advanced-field="review_style"] .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.advanced-field-icon {
    grid-row: 1 / span 4;
    margin-top: 28px;
}
.advanced-field textarea {
    min-height: 96px;
    resize: vertical;
}
.advanced-field[data-advanced-field="show_cart_arrow"] .advanced-field-body {
    min-height: 44px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.advanced-field[data-advanced-field="show_cart_arrow"] input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    accent-color: #13a99a;
    margin: 0;
}
.advanced-field[data-advanced-field="show_cart_arrow"] span:not(.advanced-field-icon) {
    font-weight: 900;
    color: var(--ink);
}
.advanced-field small {
    color: #ff9b3e;
    font-weight: 800;
    line-height: 1.55;
}
.advanced-note {
    grid-column: 1 / -1;
    border-radius: 14px;
    padding: 12px 14px;
    color: #66728a;
    background: linear-gradient(90deg, #f1edff, #fff);
    font-size: .9rem;
    font-weight: 800;
}
.json-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #cfe4ff;
    border-radius: 18px;
    padding: 14px 16px;
    background: #eef6ff;
}
.json-actions[hidden] {
    display: none;
}
.json-actions strong {
    display: block;
    color: var(--ink);
}
.json-actions span {
    color: var(--muted);
    font-size: .94rem;
}
.json-action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.json-product-list {
    display: grid;
    gap: 14px;
}
.json-product-card {
    position: relative;
    display: grid;
    grid-template-columns: 154px minmax(0, 1fr);
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.json-product-card.is-selected {
    border-color: var(--blue);
    background: #f8fbff;
}
.json-check {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    border: 1px solid #bbd7ff;
    border-radius: 999px;
    padding: 0 12px;
    background: #ffffff;
    color: var(--blue);
    font-weight: 900;
}
.json-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}
.json-product-media img,
.json-thumb-empty {
    width: 154px;
    height: 154px;
    border-radius: 18px;
    object-fit: cover;
    background: #edf3f8;
}
.json-thumb-empty {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 900;
}
.json-product-fields {
    display: grid;
    gap: 12px;
    padding-right: 110px;
}
.json-small-grid {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 12px;
}
.draft-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
}
.draft-picker {
    display: grid;
    gap: 12px;
    border: 1px solid #cfe4ff;
    border-radius: 18px;
    padding: 14px;
    background: #eef6ff;
}
.draft-picker[hidden] { display: none !important; }
.draft-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.draft-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow: auto;
    padding-right: 2px;
}
.draft-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, .82);
}
.draft-card input {
    width: 18px;
    min-height: 18px;
    margin-top: 3px;
    accent-color: var(--blue);
}
.draft-card b,
.draft-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.draft-card small {
    margin-top: 3px;
    color: var(--muted);
    white-space: nowrap;
}
.product-finder {
    display: grid;
    gap: 14px;
    margin: 16px 0;
    border: 1px solid rgba(37, 116, 219, .18);
    border-radius: var(--radius);
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(0, 183, 163, .08), rgba(37, 116, 219, .08)),
        var(--surface);
}
.product-finder-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}
.source-switch {
    flex: 0 0 auto;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid rgba(37, 116, 219, .18);
    border-radius: 999px;
    padding: 5px;
    background: rgba(255, 255, 255, .76);
}
.source-switch button {
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    padding: 0 14px;
    color: var(--muted);
    background: transparent;
    font-weight: 900;
    white-space: nowrap;
}
.source-switch button.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--teal-dark));
    box-shadow: 0 10px 22px rgba(37, 116, 219, .2);
}
.finder-kicker {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 10px;
    color: var(--blue);
    background: rgba(37, 116, 219, .1);
    font-size: .78rem;
    font-weight: 900;
}
.product-finder h2 {
    margin: 8px 0 4px;
    color: var(--ink);
    font-size: 1.25rem;
}
.product-finder p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}
.product-search-row {
    display: grid;
    grid-template-columns: minmax(180px, .6fr) 120px;
    gap: 10px;
    align-items: end;
}
.product-search-row label {
    margin: 0;
}
.product-finder-note {
    min-height: 22px;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
}
.product-finder-results[hidden] {
    display: none !important;
}
.finder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}
.finder-actions span {
    margin-right: auto;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 900;
}
.finder-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 440px;
    overflow: auto;
    padding-right: 2px;
}
.finder-card {
    display: grid;
    grid-template-columns: auto 74px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px;
    color: var(--ink);
    background: rgba(255, 255, 255, .9);
}
.finder-card input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--blue);
}
.finder-image {
    position: relative;
    width: 74px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 13px;
    background: var(--surface-2);
}
.finder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tier-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    color: #ffffff;
    font-size: .82rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(7, 18, 35, .22);
}
.tier-a { background: linear-gradient(135deg, #08b981, #0b7dff); }
.tier-b { background: linear-gradient(135deg, #2176ff, #7b4dff); }
.tier-c { background: linear-gradient(135deg, #ff9d21, #ff4c7d); }
.tier-d { background: linear-gradient(135deg, #718096, #1f2937); }
.finder-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.finder-info b,
.finder-info small,
.finder-info em {
    overflow: hidden;
    text-overflow: ellipsis;
}
.finder-info b {
    white-space: nowrap;
}
.finder-info small,
.finder-info em {
    color: var(--muted);
    font-size: .78rem;
}
.finder-info em {
    font-style: normal;
    color: var(--blue);
    font-weight: 800;
}
.finder-empty {
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 16px;
    color: var(--muted);
    text-align: center;
    background: var(--surface-2);
}
.product-block {
    margin-top: 14px;
    border: 1px solid #cfd9e5;
    border-radius: 20px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.product-head strong { font-size: 1.08rem; }
.product-fields {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
    align-items: start;
    overflow: hidden;
}
.product-fields > *,
.product-fields label {
    min-width: 0;
    max-width: 100%;
    color: #10223f;
    font-weight: 900;
}
.product-fields input,
.product-fields select,
.product-fields textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.product-fields label:has([data-item-script-mode]) {
    grid-column: 1 / -1;
}
.product-fields textarea {
    min-height: 118px;
    background: #ffffff;
    line-height: 1.45;
}
.product-fields select,
.product-fields input {
    background-color: #ffffff;
    min-height: 48px;
}
.wide-field { grid-column: 1 / -1; }
.image-zone {
    margin-top: 16px;
    border: 1px solid #d7e0ec;
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.image-zone label {
    gap: 12px;
    color: #10223f;
    font-weight: 900;
}
.image-zone input[type="file"] {
    min-height: 48px;
    padding: 10px;
    border-radius: 14px;
    background: #ffffff;
}
.image-zone input[type="file"]::file-selector-button {
    border: 0;
    border-radius: 10px;
    margin-right: 10px;
    padding: 8px 12px;
    color: #ffffff;
    background: var(--blue);
    font-weight: 900;
}
.image-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    min-width: 0;
}
.image-preview input[type="url"],
.image-preview code {
    max-width: min(520px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image-thumb {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid #d7e0ec;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.autosave-note {
    min-height: 20px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 700;
}
.tiktok-id-field {
    gap: 8px;
}
.field-help {
    margin-top: 2px;
}
.field-help summary {
    width: fit-content;
    cursor: pointer;
    list-style: none;
    border: 1px solid rgba(37, 116, 219, .18);
    border-radius: 999px;
    padding: 7px 11px;
    color: var(--blue);
    background: rgba(37, 116, 219, .08);
    font-size: .82rem;
    font-weight: 800;
}
.field-help summary::-webkit-details-marker {
    display: none;
}
.field-help summary::before {
    content: "?";
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--blue);
    font-size: .72rem;
}
.tiktok-id-example {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    border: 1px solid rgba(37, 116, 219, .15);
    border-radius: 16px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(240, 247, 255, .95), rgba(255, 255, 255, .92));
}
.example-phone {
    min-height: 132px;
    display: grid;
    align-content: center;
    gap: 8px;
    border-radius: 16px;
    padding: 12px;
    color: #ffffff;
    background:
        linear-gradient(160deg, rgba(8, 16, 24, .1), transparent 44%),
        linear-gradient(145deg, #101a2f, #2474db 55%, #ff4f80);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.example-bar {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
}
.example-phone strong {
    font-size: .86rem;
}
.example-phone em {
    font-style: normal;
    font-size: .75rem;
    opacity: .8;
}
.example-phone code {
    overflow: hidden;
    border-radius: 10px;
    padding: 7px;
    color: #0b1b36;
    background: rgba(255, 255, 255, .86);
    font-size: .74rem;
    text-overflow: ellipsis;
}
.tiktok-id-example p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.55;
}
.image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.face-preview {
    min-height: 46px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}
.face-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.face-preview img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    cursor: zoom-in;
}
.face-saved-name {
    display: inline-flex;
    align-items: center;
    max-width: min(360px, 100%);
    margin-left: 12px;
    color: var(--text);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.face-ref-field {
    grid-template-columns: 34px minmax(0, 1fr);
}
.face-ref-field > input[data-face-upload],
.face-ref-field > input[data-face-upload][hidden] {
    display: none !important;
}
.face-ref-field > .face-saved-name {
    display: none !important;
}
.face-ref-title {
    grid-column: 2;
    color: var(--ink);
    font-weight: 900;
}
.face-ref-slots {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.face-ref-slot {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    background: #fff;
}
.face-ref-slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.face-ref-slot-head button {
    width: auto;
    min-height: 32px;
    padding: 6px 10px;
    color: #ef476f;
    background: #fff1f5;
    box-shadow: none;
}
.face-ref-thumb {
    width: 78px;
    height: 78px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #f4f7fb;
    box-shadow: none;
}
.face-ref-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.face-ref-empty {
    display: grid;
    place-items: center;
    min-height: 78px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    color: var(--muted);
    font-weight: 800;
}
.face-ref-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 10px;
    padding: 9px 14px;
    border-radius: 12px;
    color: #fff;
    background: #2d7be0;
    font-weight: 900;
    cursor: pointer;
}
.face-ref-upload input {
    display: none;
}
.image-thumb {
    width: 92px;
    height: 110px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}
.image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .18s ease;
}
.image-thumb:hover img {
    transform: scale(1.04);
}
.image-thumb button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(8, 16, 24, .74);
}
.builder-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}
.mini-history {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}
.mini-history article,
.campaign-row,
.clip-row {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 13px;
    background: var(--surface-2);
}
.mini-history strong,
.campaign-row strong,
.clip-row strong {
    display: block;
}
.mini-history span,
.campaign-row span,
.clip-row span {
    color: var(--muted);
}

.history-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.history-list, .history-detail {
    min-height: 420px;
}
.campaign-row {
    width: 100%;
    margin-bottom: 10px;
    color: var(--ink);
    text-align: left;
}
.campaign-row.active {
    border-color: rgba(0, 183, 163, .75);
    background: #edfffc;
}
.history-platform-badges {
    display: flex !important;
    gap: 6px;
    margin: 8px 0 5px;
}
.history-platform-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}
.history-platform-badge.tiktok {
    background: #111827;
    color: #fff;
}
.history-platform-badge.shopee {
    background: #fff0e8;
    color: #e64a19;
}
.history-empty-platform {
    display: grid;
    min-height: 320px;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 18px;
    font-weight: 800;
}
.history-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.history-pager span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}
.history-pager .mini-btn {
    min-width: 96px;
    justify-content: center;
}
.history-pager .mini-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.history-items-pager {
    margin-top: 14px;
}
/* HISTORY_CAMPAIGN_COMBOBOX_V1 */
.history-campaign-picker {
    display: grid;
    gap: 10px;
}
.history-campaign-picker > label {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
}
.history-campaign-combobox {
    position: relative;
}
.history-campaign-combobox input {
    width: 100%;
    min-height: 54px;
    padding: 12px 48px 12px 15px;
    border: 1px solid rgba(124, 70, 223, .24);
    border-radius: 16px;
    color: var(--ink);
    background: #fff;
    font-weight: 800;
}
.history-campaign-combobox button {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #7c46df, #e34e91);
    font-size: 1.25rem;
    font-weight: 900;
    cursor: pointer;
}
.history-campaign-options {
    display: grid;
    gap: 8px;
    max-height: min(56vh, 520px);
    padding: 8px;
    overflow: auto;
    border: 1px solid rgba(124, 70, 223, .18);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(48, 35, 83, .14);
}
.history-campaign-options[hidden] {
    display: none;
}
.history-campaign-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    text-align: left;
    background: linear-gradient(135deg, #fff, #faf7ff);
    cursor: pointer;
}
.history-campaign-option:hover,
.history-campaign-option.active {
    border-color: #8c59de;
    background: linear-gradient(135deg, #f3efff, #fff0f7);
    box-shadow: 0 8px 18px rgba(124, 70, 223, .1);
}
.history-campaign-option > span:first-child {
    min-width: 0;
}
.history-campaign-option strong,
.history-campaign-option small {
    display: block;
}
.history-campaign-option strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.history-campaign-option small,
.history-campaign-picker-help {
    margin-top: 4px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}
.history-campaign-option em {
    padding: 6px 9px;
    border-radius: 999px;
    color: #6c36c4;
    background: #f1eaff;
    font-size: .75rem;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.history-campaign-no-result {
    margin: 0;
    padding: 18px;
    color: var(--muted);
    text-align: center;
    font-weight: 800;
}
.page-history .history-list:has(.history-campaign-picker) {
    min-height: 0;
}
:root[data-theme="dark"] .history-campaign-combobox input,
:root[data-theme="dark"] .history-campaign-options,
:root[data-theme="dark"] .history-campaign-option {
    color: var(--ink);
    background: var(--surface-2);
}
:root[data-theme="dark"] .history-campaign-option:hover,
:root[data-theme="dark"] .history-campaign-option.active {
    background: color-mix(in srgb, var(--surface-2) 78%, #7c46df);
}
.campaign-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.campaign-detail-head strong {
    display: block;
    font-size: 18px;
    line-height: 1.3;
}
.campaign-detail-head span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}
.campaign-detail-head .mini-btn {
    flex: 0 0 auto;
}
.campaign-detail-head [data-check-campaign] {
    margin-left: auto;
}
.campaign-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
}
.campaign-retry-control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 390px;
}
.campaign-detail-head .campaign-retry-note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}
.clip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.clip-head {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}
.clip-thumb {
    width: 112px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    object-fit: cover;
    background: var(--surface);
    border: 1px solid var(--line);
    cursor: zoom-in;
}
.clip-thumb-empty {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}
.clip-head-info {
    min-width: 0;
}
.clip-head-info strong {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.35;
}
.clip-table td:nth-child(2) strong {
    display: -webkit-box;
    max-width: 320px;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}
.clip-video-wrap {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
}
.clip-row video {
    width: 100%;
    max-height: 420px;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    background: var(--deep);
}
.video-play-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 18, 45, 0.72);
    box-shadow: 0 18px 42px rgba(0, 18, 45, 0.28);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.video-play-overlay span {
    display: block;
    margin-left: 5px;
    font-size: 30px;
    line-height: 1;
}
.video-play-overlay:hover {
    background: rgba(39, 118, 221, 0.92);
    transform: translate(-50%, -50%) scale(1.04);
}
.clip-video-wrap.is-playing .video-play-overlay {
    opacity: 0;
    pointer-events: none;
}
.clip-video-wrap:not(.is-playing):hover .video-play-overlay,
.clip-video-wrap:not(.is-playing):focus-within .video-play-overlay {
    opacity: 1;
}
.clip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.clip-edit-btn {
    border-color: rgba(124, 58, 237, .28);
    color: #6d28d9;
    background: #f5f3ff;
}
.clip-editor-swal {
    border-radius: 26px !important;
    max-height: 94vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
}
.clip-editor-swal .swal2-title,
.clip-editor-swal .swal2-actions {
    flex: 0 0 auto;
}
.clip-editor-swal .swal2-html-container {
    flex: 1 1 auto;
    min-height: 0;
    margin: 14px 0 0 !important;
    padding: 0 8px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}
.clip-editor {
    display: grid;
    gap: 18px;
    text-align: left;
    color: #10213d;
}
.clip-editor-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.clip-editor-fields label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: #263b5d;
    font-size: 13px;
    font-weight: 900;
}
.clip-editor-fields label:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
}
.clip-editor-fields input,
.clip-editor-fields textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbdaf0;
    border-radius: 14px;
    padding: 11px 12px;
    background: #fff;
    color: #10213d;
    font: inherit;
    line-height: 1.5;
    outline: none;
}
.clip-editor-fields textarea {
    resize: vertical;
    min-height: 104px;
}
.clip-editor-fields input:focus,
.clip-editor-fields textarea:focus {
    border-color: #4f7fe8;
    box-shadow: 0 0 0 3px rgba(79, 127, 232, .12);
}
.clip-cover-picker {
    border: 1px solid #cfe0f7;
    border-radius: 22px;
    padding: 16px;
    background: linear-gradient(145deg, #f7faff, #f3f0ff);
}
.clip-cover-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.clip-cover-picker-head b,
.clip-cover-picker-head small {
    display: block;
}
.clip-cover-picker-head b {
    font-size: 17px;
}
.clip-cover-picker-head small {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}
.clip-cover-picker-head output {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 8px 10px;
    border: 1px solid #b9cff2;
    border-radius: 12px;
    background: #fff;
    color: #215bb3;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
}
.clip-cover-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
    gap: 16px;
    align-items: start;
}
.clip-cover-video-box {
    display: grid;
    gap: 10px;
}
.clip-cover-video-box video {
    display: block;
    width: 100%;
    max-height: 470px;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    border-radius: 18px;
    background: #071936;
}
.clip-cover-video-box input[type="range"] {
    width: 100%;
    accent-color: #6d5ce8;
}
.clip-cover-scenes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.clip-cover-scenes button {
    min-width: 0;
    border: 1px solid #cbdaf0;
    border-radius: 11px;
    padding: 7px 4px;
    background: #fff;
    color: #425675;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    cursor: pointer;
}
.clip-cover-scenes button small {
    display: block;
    margin-top: 3px;
    color: #73839b;
    font-size: 9px;
}
.clip-cover-scenes button.is-active {
    border-color: #735be8;
    color: #5b3ed5;
    background: #eeeaff;
    box-shadow: 0 0 0 2px rgba(115, 91, 232, .12);
}
.clip-cover-capture {
    width: 100%;
}
.clip-cover-preview {
    display: grid;
    gap: 9px;
    min-width: 0;
}
.clip-cover-preview > span {
    font-size: 13px;
    font-weight: 900;
}
.clip-cover-preview img,
.clip-cover-preview-empty {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 470px;
    border: 1px solid #cbdaf0;
    border-radius: 18px;
    object-fit: contain;
    background: #071936;
}
.clip-cover-preview-empty {
    display: grid;
    place-items: center;
    color: #93a4bd;
    background: #eaf0fa;
    font-size: 13px;
    font-weight: 900;
}
.clip-cover-preview small {
    color: #5f718f;
    font-size: 11px;
    line-height: 1.4;
}
@media (max-width: 720px) {
    .clip-editor-swal {
        width: calc(100% - 18px) !important;
        padding: 18px 12px !important;
    }
    .clip-editor-fields,
    .clip-cover-workspace {
        grid-template-columns: 1fr;
    }
    .clip-editor-fields label:nth-child(2) {
        grid-column: auto;
        grid-row: auto;
    }
    .clip-cover-video-box video,
    .clip-cover-preview img,
    .clip-cover-preview-empty {
        max-height: 58svh;
    }
    .clip-cover-scenes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.clip-error-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(244, 63, 94, .22);
    border-radius: 12px;
    background: rgba(244, 63, 94, .06);
}
.clip-error-summary span {
    color: #9f1239;
    font-size: 13px;
    font-weight: 900;
}
.clip-error-summary .mini-btn {
    flex: 0 0 auto;
}
.clip-error-detail {
    width: 100%;
    max-height: min(58vh, 520px);
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid rgba(244, 63, 94, .2);
    border-radius: 12px;
    color: #7f1d1d;
    background: #fff7f7;
    font: 500 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.clip-caption {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(39, 118, 221, 0.18);
    border-radius: 14px;
    background: rgba(39, 118, 221, 0.06);
}
.clip-caption p {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.clip-product-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 10px 0;
    padding-top: 10px;
    border-top: 1px solid rgba(20, 184, 166, .20);
}
.clip-product-id b {
    flex: 0 0 100%;
}
.clip-product-id code {
    overflow-wrap: anywhere;
    color: #0f766e;
    font-family: inherit;
    font-weight: 900;
}
.clip-product-id-card {
    background: rgba(16, 185, 129, 0.07);
    border-color: rgba(16, 185, 129, 0.24);
}
.clip-product-id-card code {
    overflow-wrap: anywhere;
    color: #0f766e;
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
}
.clip-caption small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.clip-caption .mini-btn {
    justify-self: start;
}
/* CARTCLIP_COLLAPSIBLE_CLIP_DETAILS_V1 */
.clip-collapsible {
    min-width: 0;
    overflow: hidden;
}
.clip-caption.clip-collapsible {
    display: block;
    gap: 0;
    padding: 0;
}
.clip-collapsible-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 11px 13px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.clip-collapsible-summary::-webkit-details-marker {
    display: none;
}
.clip-collapsible-summary:focus-visible {
    outline: 3px solid rgba(124, 58, 237, .25);
    outline-offset: -3px;
    border-radius: 13px;
}
.clip-collapsible-heading {
    display: grid;
    min-width: 0;
    gap: 3px;
}
.clip-collapsible-heading b {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.25;
}
.clip-collapsible-heading small {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clip-collapsible-control {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 999px;
    color: #6d28d9;
    background: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 900;
}
.clip-collapsible-control i {
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    transition: transform .18s ease;
}
.clip-detail-close-label {
    display: none;
}
.clip-collapsible[open] > .clip-collapsible-summary {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(39, 118, 221, .12);
}
.clip-collapsible[open] .clip-detail-open-label {
    display: none;
}
.clip-collapsible[open] .clip-detail-close-label {
    display: inline;
}
.clip-collapsible[open] .clip-collapsible-control i {
    transform: rotate(180deg);
}
.clip-collapsible-body {
    display: grid;
    gap: 10px;
    padding: 0 13px 13px;
}/* CARTCLIP_COLLAPSIBLE_CLOSED_BODY_V1 */
.clip-collapsible:not([open]) > .clip-collapsible-body {
    display: none !important;
}
.clip-collapsible-body .mini-btn {
    justify-self: start;
}
.clip-script-box.clip-collapsible .clip-collapsible-body p {
    max-height: 170px;
    overflow: auto;
}
@media (max-width: 700px) {
    .clip-collapsible-summary {
        min-height: 60px;
        padding: 10px 11px;
    }
    .clip-collapsible-control {
        padding: 7px;
    }
    .clip-collapsible-control > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}
.clip-meta-box,
.clip-script-box {
    background: rgba(20, 166, 150, 0.06);
    border-color: rgba(20, 166, 150, 0.22);
}
.clip-script-box p {
    max-height: 170px;
    overflow: auto;
}
.campaign-settings-list {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    text-align: left;
}
.campaign-settings-images {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    text-align: left;
}
.campaign-settings-images > b {
    color: var(--ink);
    font-weight: 900;
}
.campaign-settings-images > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.campaign-settings-image {
    width: 86px;
    height: 86px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(39, 118, 221, .18);
    border-radius: 14px;
    background: var(--panel-soft);
}
.campaign-settings-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.campaign-settings-images.is-empty {
    padding: 12px 14px;
    border: 1px dashed rgba(39, 118, 221, .22);
    border-radius: 14px;
    background: rgba(39, 118, 221, .04);
}
.campaign-settings-images.is-empty span {
    color: var(--muted);
    font-weight: 800;
}
.campaign-settings-row {
    display: grid;
    grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid rgba(39, 118, 221, .16);
    border-radius: 14px;
    background: rgba(39, 118, 221, .05);
}
.campaign-settings-row span {
    color: var(--muted);
    font-weight: 800;
    font-size: .9rem;
}
.campaign-settings-row strong {
    color: var(--ink);
    font-weight: 900;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.status { color: var(--teal-dark); font-weight: 900; }
.status.failed { color: var(--bad); }
.status.ready { color: var(--ok); }

.credit-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.credit-overview article {
    min-height: 154px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
    box-shadow: var(--shadow-soft);
}
.credit-overview article::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
}
.credit-overview span,
.payment-result > span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}
.credit-overview strong {
    display: block;
    margin: 10px 0 8px;
    color: var(--ink);
    font-size: 2rem;
    line-height: 1.05;
}
.credit-overview p { color: var(--muted); margin: 0; }

.credit-panel {
    display: grid;
    grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
    gap: 16px;
}
.topup-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(0, 183, 163, .10), rgba(47, 110, 234, .08)),
        #ffffff;
}
.topup-card h2,
.payment-result h2 {
    margin-bottom: 8px;
    font-size: 1.55rem;
}
.quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.quick-amounts button {
    min-height: 46px;
    border: 1px solid #bed0df;
    border-radius: var(--radius);
    color: var(--ink);
    background: #ffffff;
    font-weight: 900;
}
.quick-amounts button:hover,
.quick-amounts button.active {
    border-color: rgba(0, 183, 163, .48);
    color: #043f39;
    background: #dcfbf7;
}
.method-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.method-switch label {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    border: 1px solid #bed0df;
    border-radius: var(--radius);
    padding: 0 12px;
    color: var(--ink);
    background: #ffffff;
    font-weight: 900;
}
.method-switch input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--teal-dark);
}
.promptpay-method {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(47, 110, 234, .22);
    border-radius: var(--radius);
    padding: 15px;
    color: var(--ink);
    background: linear-gradient(135deg, #eef6ff, #e6fffb);
}
.promptpay-method span {
    width: fit-content;
    border-radius: 999px;
    padding: 4px 9px;
    color: #ffffff;
    background: var(--blue);
    font-size: .78rem;
    font-weight: 900;
}
.promptpay-method strong {
    font-size: 1.08rem;
}
.promptpay-method small {
    color: var(--muted);
    line-height: 1.55;
}
.payment-result {
    min-height: 100%;
    display: grid;
    align-content: start;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    color: var(--muted);
    background:
        linear-gradient(180deg, rgba(8, 16, 24, .02), rgba(0, 183, 163, .06)),
        var(--surface);
    box-shadow: var(--shadow-soft);
}
.payment-result.is-empty {
    border-style: dashed;
    background: #f6f9fc;
}
.payment-status {
    width: fit-content;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 11px;
    color: #795100;
    background: #fff3cf;
    font-size: .8rem;
    font-weight: 900;
}
.payment-status.paid { color: #075333; background: #d9f8e9; }
.payment-status.failed,
.payment-status.cancelled { color: #8a1230; background: #ffe1e8; }
.promptpay-qr-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    border: 1px solid #cfe4ff;
    border-radius: 22px;
    padding: clamp(16px, 3vw, 26px);
    color: var(--ink);
    background: linear-gradient(180deg, #ffffff, #f1f8ff);
    box-shadow: 0 16px 34px rgba(37, 116, 219, .12);
}
.promptpay-qr-card.is-waiting {
    justify-items: start;
    background: #fff8e6;
    border-color: #f4d28c;
}
.promptpay-qr-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.promptpay-qr-head span {
    border-radius: 999px;
    padding: 6px 10px;
    color: #ffffff;
    background: var(--blue);
    font-weight: 900;
    font-size: .82rem;
}
.promptpay-qr-head strong {
    font-size: 1.28rem;
    color: var(--ink);
}
.promptpay-qr {
    width: min(300px, 78vw);
    aspect-ratio: 1;
    border: 8px solid #ffffff;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(8, 16, 24, .16);
}
.promptpay-qr-card p {
    max-width: 440px;
    margin: 0;
    color: var(--muted);
    text-align: center;
    line-height: 1.65;
}
.download-qr-card {
    display: grid;
    justify-items: center;
    gap: 14px;
    color: var(--ink);
}
.download-qr {
    width: min(380px, 88vw);
    aspect-ratio: 1;
    border: 10px solid #ffffff;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(8, 16, 24, .18);
}
.download-qr-copy {
    display: grid;
    gap: 6px;
    max-width: 440px;
    text-align: center;
}
.download-qr-copy strong {
    color: var(--ink);
    font-size: 1.12rem;
    font-weight: 900;
}
.download-qr-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}
.download-qr-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.download-qr-actions .primary-btn,
.download-qr-actions .mini-btn {
    min-width: 150px;
    justify-content: center;
}
.ios-save-preview {
    width: min(360px, 86vw);
    max-height: 58vh;
    border-radius: 18px;
    background: #08111f;
    box-shadow: 0 18px 42px rgba(8, 16, 24, .18);
}
.ios-save-card .download-qr-actions .primary-btn {
    min-width: 190px;
}
.payment-lines {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.payment-lines p {
    margin: 0;
    border: 1px solid #dbe5ee;
    border-radius: var(--radius);
    padding: 12px;
    background: #ffffff;
}
.payment-lines b,
.payment-lines span {
    display: block;
}
.payment-lines b { color: var(--ink); }
.payment-lines span { color: var(--muted); font-size: .82rem; }
.payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.promptpay-qr-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}
.promptpay-qr-save {
    min-height: 42px;
}
.paid-note {
    margin: 0;
    border-left: 4px solid var(--ok);
    padding: 10px 12px;
    color: #075333;
    background: #edfdf5;
    font-weight: 800;
}
.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.catalog-admin-panel {
    display: none !important;
}
.table-section {
    margin-top: 18px;
}
.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    background: #ffffff;
}
th, td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
th {
    color: var(--ink);
    background: #eef3f8;
    position: sticky;
    top: 0;
}
td { color: var(--muted); }

@media (max-width: 980px) {
    .topbar {
        grid-template-columns: 1fr auto;
        padding-left: 16px;
        padding-right: 16px;
    }
    .nav {
        grid-column: 1 / -1;
        justify-content: start;
        overflow-x: auto;
    }
    .hero {
        min-height: auto;
        padding: 58px 18px 70px;
        background-position: 60% center;
    }
    .hero h1 { font-size: 3.6rem; }
    .metrics,
    .feature-band,
    .flow-grid,
    .admin-grid,
    .credit-overview,
    .price-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tool-grid,
    .history-layout,
    .credit-panel {
        grid-template-columns: 1fr;
    }
    .signup-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .signup-box .primary-btn,
    .signup-box .ghost-btn {
        width: 100%;
        min-width: 0;
    }
    .workspace-head {
        display: grid;
        align-items: start;
    }
    .account-strip { justify-content: start; }
}

@media (max-width: 640px) {
    main { padding: 18px 14px 38px; }
    .topbar {
        grid-template-columns: minmax(0, 1fr);
        padding: 11px 14px;
    }
    .brand {
        width: 100%;
        min-width: 0;
    }
    .brand small { display: none; }
    .page-home .nav { display: none; }
    .page-home .top-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: start;
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .topbar .primary-btn,
    .topbar .ghost-btn {
        flex: 1 1 148px;
        width: auto;
        min-height: 40px;
        padding: 0 12px;
    }
    .topbar .icon-pill {
        flex: 0 0 42px;
        min-width: 42px;
        height: 42px;
    }
    .top-actions {
        grid-column: 1 / -1;
        justify-content: start;
        overflow-x: auto;
    }
    .hero {
        padding: 34px 16px 44px;
        background-position: 68% center;
    }
    .hero h1 { font-size: 2.85rem; }
    .hero .lead {
        font-size: 1rem;
        line-height: 1.62;
    }
    .hero-actions { margin-top: 20px; }
    .hero-proof { display: none; }
    .hero-proof,
    .metrics,
    .flow-grid,
    .feature-band,
    .credit-overview,
    .price-grid,
    .advanced-grid,
    .product-fields,
    .clip-grid,
    .payment-lines,
    .method-switch {
        grid-template-columns: 1fr;
    }
    .advanced-field,
    .face-ref-field {
        grid-template-columns: 1fr;
    }
    .advanced-field > :not(.advanced-field-icon),
    .face-ref-field > :not(.advanced-field-icon) {
        grid-column: 1;
    }
    .advanced-field-body {
        grid-column: 1;
    }
    .advanced-field[data-advanced-field="review_style"] .advanced-field-body {
        grid-template-columns: 1fr;
    }
    .advanced-field-icon {
        margin-top: 0;
    }
    .face-ref-slots {
        grid-template-columns: 1fr;
    }
    .quick-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campaign-detail-head {
        flex-direction: column;
    }
    .campaign-detail-head .mini-btn {
        width: 100%;
    }
    .campaign-detail-actions,
    .campaign-retry-control {
        width: 100%;
        max-width: none;
        align-items: stretch;
    }
    .campaign-detail-head .campaign-retry-note {
        text-align: left;
    }
    .pricing,
    .feature-band {
        padding-top: 46px;
        padding-bottom: 46px;
    }
    .signup-box {
        grid-template-columns: 1fr;
    }
    .section-head h2,
    .workspace-head h1,
    .auth-panel h1 {
        font-size: 2rem;
    }
    .builder-actions,
    .draft-toolbar {
        display: grid;
    }
    .primary-btn,
    .ghost-btn {
        width: 100%;
    }
    table { min-width: 680px; }
}

/* Alina-style dashboard theme */
:root {
    --page: #eef2f5;
    --page-2: #e7edf4;
    --ink: #06142f;
    --ink-2: #23314a;
    --muted: #6f7f95;
    --line: rgba(120, 115, 110, .20);
    --surface: rgba(255, 255, 255, .78);
    --surface-2: rgba(255, 255, 255, .55);
    --deep: #12264a;
    --deep-2: #0b1b36;
    --teal: #20c997;
    --teal-dark: #13936f;
    --blue: #2574db;
    --coral: #f25a85;
    --amber: #ffad4e;
    --ok: #28b779;
    --bad: #e74767;
    --shadow: 0 2.5px 10px rgba(15, 30, 60, .10);
    --shadow-soft: 0 12px 28px rgba(22, 37, 65, .08);
    --radius: 20px;
}

:root[data-theme="dark"] {
    --page: #0e1624;
    --surface: #151f2f;
    --surface-2: #101827;
    --ink: #f4f8ff;
    --ink-2: #dbe7f6;
    --muted: #96a8bf;
    --line: rgba(198, 214, 235, .18);
    --deep: #071021;
    --shadow: 0 18px 42px rgba(0, 0, 0, .34);
    --shadow-soft: 0 10px 24px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .page-app,
:root[data-theme="dark"] .page-history,
:root[data-theme="dark"] .page-credit,
:root[data-theme="dark"] .page-admin {
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 116, 219, .24), transparent 32%),
        linear-gradient(180deg, #0c1524 0%, #101827 100%);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .top-icons > span,
:root[data-theme="dark"] .top-icons > button,
:root[data-theme="dark"] .account-strip span,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .user-pill {
    color: var(--ink);
    background: rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .shell-top,
:root[data-theme="dark"] .side-menu,
:root[data-theme="dark"] .builder,
:root[data-theme="dark"] .json-product-card,
:root[data-theme="dark"] .side-status,
:root[data-theme="dark"] .credit-panel,
:root[data-theme="dark"] .admin-panel,
:root[data-theme="dark"] .table-section,
:root[data-theme="dark"] .history-list,
:root[data-theme="dark"] .history-detail,
:root[data-theme="dark"] .product-block,
:root[data-theme="dark"] .price-card,
:root[data-theme="dark"] .feature-band article,
:root[data-theme="dark"] .signup-box,
:root[data-theme="dark"] .sale-flow article {
    background: rgba(21, 31, 47, .76);
}

:root[data-theme="dark"] .draft-picker {
    border-color: rgba(111, 164, 255, .32);
    background: rgba(37, 116, 219, .12);
}

:root[data-theme="dark"] .draft-card {
    background: rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .pricing,
:root[data-theme="dark"] .sale-flow,
:root[data-theme="dark"] .feature-band,
:root[data-theme="dark"] .page-home {
    background: #0e1624;
}

:root[data-theme="dark"] .alina-shell .workspace-head,
:root[data-theme="dark"] .auth-panel,
:root[data-theme="dark"] .metrics article,
:root[data-theme="dark"] .payment-result,
:root[data-theme="dark"] .credit-overview article {
    background: rgba(21, 31, 47, .78);
}

:root[data-theme="dark"] .sale-flow {
    background:
        linear-gradient(180deg, rgba(14, 22, 36, .98), rgba(16, 24, 39, .98));
}

body {
    background: var(--page);
    font-family: "Lexend Deca", "Kanit", system-ui, sans-serif;
}

.page-app,
.page-history,
.page-credit,
.page-admin {
    background:
        radial-gradient(circle at 20% 0%, rgba(72, 141, 255, .10), transparent 34%),
        linear-gradient(180deg, #eef3f7 0%, #e8eef3 100%);
}

.alina-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
}
.rail {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: none;
    grid-auto-rows: 58px;
    align-content: start;
    justify-items: center;
    gap: 10px;
    padding: 20px 12px;
    color: #dce7f7;
    background: var(--deep);
}
.rail-logo,
.rail-item {
    width: 64px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, .10);
    font-weight: 900;
}
.rail-item {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: 22px 15px;
    align-content: center;
    gap: 2px;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rail-item:hover,
.rail-item.active {
    color: #06142f;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}
.rail-item:hover { transform: translateY(-1px); }
.rail-icon {
    line-height: 1;
    font-size: 1.05rem;
}
.rail-label {
    display: block;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
}
.rail-item::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    z-index: 80;
    min-width: max-content;
    max-width: 180px;
    transform: translateY(-50%) translateX(-4px);
    border: 1px solid rgba(198, 214, 235, .26);
    border-radius: 10px;
    padding: 8px 10px;
    color: #ffffff;
    background: rgba(8, 16, 24, .94);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.rail-item:hover::after,
.rail-item:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.rail-logo {
    color: var(--deep);
    background: #ffffff;
}
.rail-logo.logo-mark {
    color: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #050712;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.rail-logout { margin-top: auto; }

.side-menu {
    min-height: 100vh;
    padding: 24px 16px 26px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(20px);
    box-shadow: inset -1px 0 0 rgba(120, 115, 110, .14);
}
.side-brand {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    overflow: visible;
}
.side-brand > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background: var(--blue);
    font-weight: 900;
}
.side-brand > span.logo-tile {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(11, 27, 54, .08);
    background: #050712;
    box-shadow: 0 10px 22px rgba(15, 30, 60, .12);
}
.side-brand strong {
    flex: 0 0 auto;
    min-width: max-content;
    color: var(--blue);
    font-size: .88rem;
    line-height: 1.05;
    white-space: nowrap;
    word-break: keep-all;
}
.side-brand strong span { color: #0b1b36; }
.side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 12px 10px;
    color: var(--ink);
    font-weight: 900;
}
.side-title span {
    border-radius: 8px;
    padding: 4px 8px;
    color: #ffffff;
    background: var(--coral);
    font-size: .75rem;
}
.side-nav {
    display: grid;
    gap: 4px;
}
.side-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 20px;
    padding: 0 14px;
    color: var(--ink-2);
    font-weight: 800;
}
.side-nav a i {
    width: 22px;
    color: var(--blue);
    font-style: normal;
    text-align: center;
}
.side-nav a.active,
.side-nav a:hover {
    color: var(--blue);
    background: #dfeeff;
}
.side-nav a.apk-download {
    margin-top: 8px;
    border: 1px solid #ffb18f;
    background: linear-gradient(135deg, #171717, #2b211d);
    color: #ff8a50;
}
.side-nav a.apk-download i {
    background: #f15a24;
    color: #fff;
}
.side-nav a.apk-download:hover {
    border-color: #f15a24;
    background: linear-gradient(135deg, #0e0e0e, #382118);
    color: #ff9e70;
}
.side-apk-qr {
    display: grid;
    justify-items: center;
    gap: 7px;
    margin-top: 12px;
    border: 1px solid #ffd1bc;
    border-radius: 18px;
    padding: 13px;
    background: linear-gradient(160deg, #fff, #fff4ee);
    text-align: center;
}
.side-apk-qr strong {
    color: #1c2635;
    font-size: .82rem;
}
.side-apk-qr img {
    width: 126px;
    max-width: 100%;
    aspect-ratio: 1;
    border: 7px solid #fff;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(24, 35, 52, .12);
}
.side-apk-qr small {
    color: #7b8797;
    font-size: .68rem;
    line-height: 1.45;
}
.apk-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid #ff9a70;
    border-radius: 14px;
    padding: 11px 18px;
    background: linear-gradient(135deg, #111, #f15a24);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(241, 90, 36, .22);
}
.home-apk-qr {
    display: inline-grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    max-width: 520px;
    margin-top: 16px;
    border: 1px solid rgba(255, 143, 92, .35);
    border-radius: 20px;
    padding: 12px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 38px rgba(18, 28, 45, .1);
}
.home-apk-qr img {
    width: 112px;
    aspect-ratio: 1;
    border: 6px solid #fff;
    border-radius: 14px;
    background: #fff;
}
.home-apk-qr div {
    display: grid;
    gap: 5px;
}
.home-apk-qr strong {
    color: #111c30;
    font-size: 1rem;
}
.home-apk-qr span {
    color: #758399;
    font-size: .82rem;
    line-height: 1.55;
}
.apk-download-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.side-folder {
    margin-top: 26px;
    border: 1px solid rgba(255, 174, 85, .35);
    border-radius: 20px;
    padding: 22px 16px;
    text-align: center;
    background: linear-gradient(180deg, #ffe9c5, #fff6ea);
}
.side-folder i {
    display: block;
    color: var(--amber);
    font-style: normal;
    font-size: .9rem;
    font-weight: 900;
    margin-bottom: 8px;
}
.side-folder strong,
.side-folder span { display: block; }
.side-folder small {
    display: block;
    max-width: 100%;
    margin-bottom: 8px;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-folder span {
    margin-top: 4px;
    color: var(--muted);
    font-size: .84rem;
}
.side-logout {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 1px solid #ffd1da;
    border-radius: 18px;
    color: var(--coral);
    background: #fff2f5;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(255, 79, 128, .10);
}
.side-logout:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(255, 79, 128, .16);
}

.shell-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
}
.shell-top {
    min-height: 108px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 22px 40px;
    border-bottom: 1px solid rgba(120, 115, 110, .14);
    background: rgba(255, 255, 255, .88);
}
.shell-top h2 {
    margin: 0;
    font-size: 1.35rem;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    color: var(--muted);
    font-size: .94rem;
}
.breadcrumb strong { color: var(--blue); }
.top-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.top-icons > span,
.top-icons > button {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-2);
    background: rgba(255, 255, 255, .86);
    font-weight: 900;
}
.top-icons .flag,
.top-icons .credit-chip,
.top-icons .user-chip {
    width: auto;
    border-radius: 22px;
    padding: 0 14px;
}
.top-icons .user-chip {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alina-shell main {
    width: 100%;
    margin: 0;
    padding: 28px 42px 48px;
}
.alina-shell .workspace-head {
    min-height: 88px;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px 24px;
    background: rgba(255, 255, 255, .68);
    box-shadow: var(--shadow);
}
.alina-shell .workspace-head .eyebrow { color: var(--blue); }
.alina-shell .workspace-head h1 {
    font-size: 1.9rem;
}
.account-strip span,
.pill {
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
}

.auth-panel,
.builder,
.side-status,
.credit-panel,
.admin-panel,
.table-section,
.history-list,
.history-detail,
.metrics article,
.price-card,
.feature-band article,
.signup-box,
.credit-overview article,
.payment-result,
.product-block,
.advanced {
    border-color: var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .68);
    box-shadow: var(--shadow);
}
.builder,
.side-status,
.credit-panel,
.admin-panel,
.table-section,
.history-list,
.history-detail {
    padding: 24px;
}
.tool-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
}
input,
select,
textarea,
.quick-amounts button,
.method-switch label,
.mini-btn,
.ghost-btn {
    border-radius: 14px;
}
.primary-btn {
    border-radius: 14px;
    color: #ffffff;
    background: var(--blue);
    box-shadow: 0 10px 20px rgba(37, 116, 219, .22);
}
.ghost-btn {
    color: var(--blue);
    background: #eef6ff;
    border-color: #cfe4ff;
}
.product-head strong::before,
.side-status h2::before,
.table-section h2::before {
    content: "";
    width: 8px;
    height: 22px;
    display: inline-block;
    border-radius: 8px;
    margin-right: 10px;
    vertical-align: -5px;
    background: var(--blue);
}
.product-block {
    background: rgba(255, 255, 255, .78);
}
.image-thumb {
    border-radius: 14px;
}
.mini-history article,
.campaign-row,
.clip-row {
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}
.clip-row video {
    border-radius: 18px;
}
.status,
.payment-status {
    border-radius: 10px;
    padding: 5px 10px;
    background: #e7f8ef;
}
.status.failed,
.payment-status.failed { background: #ffe7ed; }
.status.ready,
.payment-status.paid { background: #def8ed; }
.payment-lines p {
    border-radius: 16px;
}
table {
    border-radius: 18px;
    overflow: hidden;
}

.page-home {
    background: var(--page);
}
.page-home .topbar {
    color: var(--ink);
    background: rgba(255, 255, 255, .88);
    border-bottom-color: var(--line);
}
.page-home .brand small,
.page-home .nav a { color: var(--muted); }
.page-home .nav a.active,
.page-home .nav a:hover {
    color: var(--blue);
    background: #e2f0ff;
    border-color: #cfe4ff;
}
.page-home .ghost-btn {
    color: var(--blue);
    background: #eef6ff;
    border-color: #cfe4ff;
}
.hero {
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    box-shadow: inset 0 -1px rgba(255, 255, 255, .28);
}
.metrics article,
.price-card,
.feature-band article,
.signup-box {
    background: rgba(255, 255, 255, .74);
}
.price-card::before {
    height: 0;
}

@media (max-width: 1180px) {
    .alina-shell {
        grid-template-columns: 260px minmax(0, 1fr);
    }
    .shell-top { padding: 20px 24px; }
    .alina-shell main { padding: 24px; }
}

@media (max-width: 780px) {
    .alina-shell {
        display: block;
    }
    .side-menu {
        display: none;
    }
    .shell-main {
        display: block;
        min-width: 0;
    }
    .rail {
        min-height: auto;
        position: sticky;
        top: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 10px;
        overflow-x: auto;
        padding: 10px 12px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
    }
    .rail::-webkit-scrollbar,
    .top-icons::-webkit-scrollbar {
        display: none;
    }
    .rail-logo,
    .rail-item {
        flex: 0 0 auto;
    }
    .rail-logo {
        width: 44px;
        height: 44px;
    }
    .rail-item {
        width: auto;
        height: 44px;
        min-width: 76px;
        grid-template-columns: auto auto;
        grid-template-rows: 1fr;
        gap: 7px;
        padding: 0 12px;
    }
    .rail-label {
        display: inline;
        font-size: .78rem;
        line-height: 1;
        white-space: nowrap;
    }
    .rail-item::after { display: none; }
    .rail-logout { margin-top: 0; }
    .shell-top {
        display: grid;
        align-items: start;
        min-height: auto;
        padding: 22px 24px;
    }
    .top-icons {
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .top-icons .user-chip {
        display: none;
    }
    .alina-shell main { padding: 20px 14px 38px; }
    .alina-shell .workspace-head {
        align-items: start;
        padding: 20px;
    }
    .workspace-head {
        display: grid;
    }
    .account-strip {
        justify-content: start;
    }
    .tool-grid,
    .history-layout,
    .admin-grid,
    .credit-panel,
    .product-fields,
    .draft-list,
    .advanced-grid,
    .payment-lines,
    .clip-grid,
    .signup-box,
    .feature-band,
    .flow-grid,
    .price-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .advanced-field,
    .face-ref-field {
        grid-template-columns: 1fr;
    }
    .advanced-field > :not(.advanced-field-icon),
    .face-ref-field > :not(.advanced-field-icon) {
        grid-column: 1;
    }
    .advanced-field-body {
        grid-column: 1;
    }
    .advanced-field[data-advanced-field="review_style"] .advanced-field-body {
        grid-template-columns: 1fr;
    }
    .advanced-field-icon {
        margin-top: 0;
    }
    .face-ref-slots {
        grid-template-columns: 1fr;
    }
    .tool-grid { gap: 16px; }
    .clip-head {
        grid-template-columns: 86px minmax(0, 1fr);
    }
    .clip-thumb {
        width: 86px;
        border-radius: 12px;
    }
    .builder,
    .side-status,
    .credit-panel,
    .admin-panel,
    .table-section,
    .history-list,
    .history-detail,
    .product-block {
        padding: 20px 16px;
    }
    .json-actions {
        align-items: stretch;
        display: grid;
    }
    .json-action-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .builder[data-json-campaign-form] {
        gap: 22px;
    }
    .builder[data-json-campaign-form] input[type="file"] {
        min-height: 60px;
    }
    .builder[data-json-campaign-form] .advanced {
        padding: 16px;
    }
    .builder[data-json-campaign-form] .advanced-grid {
        gap: 16px;
    }
    .builder[data-json-campaign-form] > .primary-btn[type="submit"] {
        width: 100%;
        margin-top: 6px;
    }
    .json-product-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }
    .json-check {
        position: static;
        justify-content: center;
        width: fit-content;
        margin-left: auto;
    }
    .json-product-media img,
    .json-thumb-empty {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .json-product-fields {
        padding-right: 0;
    }
    .json-small-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    input,
    select,
    textarea {
        min-width: 0;
        font-size: 16px;
    }
    .builder-actions,
    .product-head {
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .product-finder-head {
        display: grid;
    }
    .source-switch {
        width: 100%;
    }
    .product-search-row,
    .finder-products {
        grid-template-columns: 1fr;
    }
    .product-search-row .primary-btn,
    .product-search-row .ghost-btn {
        width: 100%;
    }
    .finder-card {
        grid-template-columns: auto 64px minmax(0, 1fr);
    }
    .finder-image {
        width: 64px;
    }
}

/* Review-style database manager */
.admin-review-style-manager {
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(106, 72, 239, .12), transparent 34%),
        #fff;
}

.admin-review-style-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.admin-review-style-heading h2 {
    margin: 3px 0 6px;
}

.admin-review-style-heading p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.admin-review-style-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.admin-review-style-summary > span {
    display: grid;
    min-width: 94px;
    border: 1px solid #ded8ff;
    border-radius: 14px;
    padding: 9px 12px;
    color: #6b54c7;
    background: #f7f4ff;
    font-size: .78rem;
    text-align: center;
}

.admin-review-style-summary b {
    color: #211451;
    font-size: 1.1rem;
}

.admin-review-style-tools {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: end;
    gap: 12px;
    margin: -5px 0 20px;
    padding: 14px;
    border: 1px solid #e0e7f2;
    border-radius: 17px;
    background: linear-gradient(135deg, #f8faff, #fbf8ff);
}

.admin-review-style-tools label {
    display: grid;
    gap: 7px;
    color: #34435e;
    font-size: .78rem;
    font-weight: 850;
}

.admin-review-style-tools input[type="search"] {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #d5dfec;
    border-radius: 13px;
    background: #fff;
}

.admin-review-style-tools input[type="search"]:focus {
    border-color: #6e83ed;
    outline: 3px solid rgba(104, 83, 237, .1);
}

.admin-review-style-tools > strong {
    align-self: center;
    min-width: 105px;
    color: #6552c7;
    font-size: .8rem;
    text-align: right;
}

.admin-review-style-empty {
    margin-top: 16px;
}

.admin-review-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-review-style-card {
    display: grid;
    align-content: start;
    gap: 15px;
    border: 1px solid #dce5f1;
    border-radius: 19px;
    padding: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 28px rgba(26, 44, 75, .055);
}

.admin-review-style-card[hidden],
.admin-review-style-card.is-search-hidden,
.admin-review-style-empty[hidden] {
    display: none !important;
}

.admin-review-style-card.is-inactive {
    opacity: .62;
    filter: grayscale(.35);
}

.admin-review-style-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.admin-review-style-people {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #6c4df4, #1f91df);
    font-size: .75rem;
    font-weight: 900;
}

.admin-review-style-card h3 {
    overflow: hidden;
    margin: 0 0 2px;
    color: #14213a;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-review-style-card code {
    color: #7163a6;
    font-size: .75rem;
}

.admin-review-style-card em {
    border-radius: 999px;
    padding: 6px 9px;
    color: #087b5f;
    background: #e8faf4;
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
}

.admin-review-style-card.is-inactive em {
    color: #8b5660;
    background: #f6e9ec;
}

.admin-review-style-card > p {
    margin: 0;
    color: #465774;
    line-height: 1.55;
}

.admin-review-style-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.admin-review-style-card dl > div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
    border-radius: 11px;
    padding: 9px 11px;
    background: #f5f8fc;
}

.admin-review-style-card dt {
    color: #7b889e;
    font-size: .76rem;
    font-weight: 850;
}

.admin-review-style-card dd {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #32425d;
    font-size: .79rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-review-style-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.admin-review-style-card > footer > span {
    color: #748198;
    font-size: .75rem;
    font-weight: 700;
}

.admin-review-style-card > footer > div {
    display: flex;
    gap: 8px;
}

.admin-review-style-dialog {
    width: min(900px, calc(100vw - 28px));
}

.admin-generation-rule-manager {
    overflow: visible;
    background:
        radial-gradient(circle at 92% 5%, rgba(38, 198, 183, .13), transparent 30%),
        radial-gradient(circle at 5% 95%, rgba(111, 76, 255, .12), transparent 34%),
        #fff;
}

.admin-generation-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.admin-generation-rule-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 22px;
    border: 1px solid #dfe7f5;
    border-top: 4px solid #6f4cff;
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 45px rgba(41, 56, 94, .09);
}

.admin-generation-rule-card:nth-child(2) {
    border-top-color: #14b8a6;
}

.admin-generation-rule-card:nth-child(3) {
    border-top-color: #f97316;
}

.admin-generation-rule-card.is-inactive {
    opacity: .62;
    border-top-color: #94a3b8;
}

.admin-generation-rule-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-generation-rule-card h3 {
    margin: 10px 0 3px;
    color: #111d38;
    font-size: 1.15rem;
}

.admin-generation-rule-card code {
    color: #7351d8;
    font-size: .78rem;
}

.admin-generation-rule-card > label:not(.inline-check) {
    display: grid;
    gap: 7px;
    color: #273653;
    font-weight: 800;
}

.admin-generation-rule-card input[type="text"],
.admin-generation-rule-card input[type="number"],
.admin-generation-rule-card textarea {
    width: 100%;
    border: 1px solid #dbe4f2;
    border-radius: 14px;
    background: #f9fbff;
}

.admin-generation-rule-card textarea[name="instruction"] {
    min-height: 260px;
    resize: vertical;
    font: 500 .88rem/1.62 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: #17233d;
}

.admin-generation-rule-actions {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.admin-generation-rule-actions label {
    display: grid;
    gap: 5px;
    max-width: 110px;
    font-weight: 800;
}

.admin-generation-rule-card > small {
    min-height: 1.4em;
    color: #6d7891;
}

@media (max-width: 1180px) {
    .admin-generation-rule-grid {
        grid-template-columns: 1fr;
    }
}

.admin-review-style-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.admin-review-style-form-grid > label:not(.inline-check) {
    display: grid;
    gap: 7px;
}

.admin-review-style-form-grid .wide-field {
    grid-column: 1 / -1;
}

.custom-review-instruction {
    border: 1px solid #d9cffd;
    border-radius: 16px;
    padding: 15px;
    background: linear-gradient(145deg, #fbf9ff, #f1f7ff);
}

.custom-review-instruction textarea {
    min-height: 112px;
}

@media (max-width: 850px) {
    .admin-review-style-heading {
        display: grid;
    }

    .admin-review-style-summary {
        justify-content: flex-start;
    }

    .admin-review-style-grid,
    .admin-review-style-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-review-style-tools {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-review-style-tools > strong {
        text-align: left;
    }

    .admin-review-style-form-grid .wide-field {
        grid-column: auto;
    }
}

:root[data-theme="dark"] .alina-shell .workspace-head,
:root[data-theme="dark"] .json-actions,
:root[data-theme="dark"] .auth-panel,
:root[data-theme="dark"] .builder,
:root[data-theme="dark"] .json-check,
:root[data-theme="dark"] .side-status,
:root[data-theme="dark"] .credit-panel,
:root[data-theme="dark"] .admin-panel,
:root[data-theme="dark"] .table-section,
:root[data-theme="dark"] .history-list,
:root[data-theme="dark"] .history-detail,
:root[data-theme="dark"] .product-block,
:root[data-theme="dark"] .product-finder,
:root[data-theme="dark"] .payment-result,
:root[data-theme="dark"] .credit-overview article,
:root[data-theme="dark"] .metrics article,
:root[data-theme="dark"] .price-card,
:root[data-theme="dark"] .feature-band article,
:root[data-theme="dark"] .signup-box,
:root[data-theme="dark"] .sale-flow article {
    background: rgba(21, 31, 47, .82);
}

:root[data-theme="dark"] .finder-card,
:root[data-theme="dark"] .draft-card {
    background: rgba(13, 22, 36, .82);
}

:root[data-theme="dark"] .page-home .topbar,
:root[data-theme="dark"] .shell-top,
:root[data-theme="dark"] .side-menu {
    background: rgba(13, 22, 36, .90);
}

/* Team accounts and password security */
.page-team,
.page-account {
    --page-accent: #2768f1;
    --page-accent-2: #17bfa9;
    --page-accent-soft: #e7f5ff;
    --page-accent-rgb: 39, 104, 241;
}
.team-workspace-head > div:first-child > p:last-child,
.account-password-card > div > p:last-child {
    margin: 8px 0 0;
    color: #6b7890;
    line-height: 1.55;
}
.team-head-stat {
    min-width: 180px;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 16px 22px;
    border: 1px solid #dbe8f6;
    border-radius: 20px;
    background: rgba(255,255,255,.9);
}
.team-head-stat b { color: #2768f1; font-size: 2rem; }
.team-head-stat span { color: #718099; font-size: .78rem; }
.team-layout {
    display: grid;
    grid-template-columns: minmax(310px, .78fr) minmax(0, 1.55fr);
    gap: 22px;
    align-items: start;
}
.team-editor,
.team-members-panel,
.account-profile-card,
.account-password-card {
    border: 1px solid #e1e8f2;
    border-radius: 26px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 20px 55px rgba(32,47,79,.1);
}
.team-editor {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 16px;
    padding: 24px;
}
.team-editor-head,
.team-members-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.team-editor h2,
.team-members-panel h2,
.account-password-card h2,
.account-profile-card h2 { margin: 3px 0 0; color: #15233d; }
.team-editor > label,
.account-password-card > label {
    display: grid;
    gap: 7px;
    color: #263551;
    font-weight: 800;
}
.team-editor input,
.team-editor select,
.account-password-card input { min-height: 48px; }
.team-permissions {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 16px;
    border: 1px solid #e0e7f1;
    border-radius: 18px;
    background: #f8fbff;
}
.team-permissions legend {
    padding: 0 6px;
    color: #263551;
    font-weight: 900;
}
.team-permissions label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
}
.team-permissions label:hover { background: #eef5ff; }
.team-permissions input { flex: 0 0 auto; min-height: 0; margin-top: 4px; }
.team-permissions span { display: grid; gap: 2px; }
.team-permissions b { color: #1c2b45; }
.team-permissions small { min-height: 0; color: #738198; }
.team-members-panel { padding: 24px; }
.team-members-panel > header { margin-bottom: 18px; }
.team-member-list { display: grid; gap: 12px; }
.team-member-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 17px;
    border: 1px solid #e2e9f2;
    border-radius: 19px;
    background: #fbfdff;
}
.team-member-card.is-disabled { opacity: .62; background: #f4f5f7; }
.team-member-avatar,
.account-avatar {
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 16px;
    background: linear-gradient(135deg, #2768f1, #17bfa9);
    font-weight: 1000;
}
.team-member-avatar { width: 50px; height: 50px; font-size: 1.15rem; }
.team-member-copy { min-width: 0; display: grid; gap: 4px; }
.team-member-copy > div { display: flex; align-items: center; gap: 8px; }
.team-member-copy h3 { overflow: hidden; margin: 0; color: #16243e; text-overflow: ellipsis; white-space: nowrap; }
.team-member-copy em {
    padding: 3px 8px;
    border-radius: 999px;
    color: #078161;
    background: #ddf8ef;
    font-size: .7rem;
    font-style: normal;
    font-weight: 900;
}
.team-member-card.is-disabled em { color: #8d4b00; background: #fff0d7; }
.team-member-copy p { margin: 0; color: #596982; }
.team-member-copy small { min-height: 0; color: #6f46d6; }
.team-member-copy > span { color: #8994a7; font-size: .72rem; }
.team-member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.team-member-actions button { min-height: 38px; }
.account-security-layout {
    display: grid;
    grid-template-columns: minmax(260px, .75fr) minmax(340px, 1.25fr);
    gap: 22px;
    align-items: start;
}
.account-profile-card {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 26px;
}
.account-avatar { flex: 0 0 72px; width: 72px; height: 72px; font-size: 1.8rem; }
.account-profile-card small { color: #6d45d4; font-weight: 900; }
.account-profile-card p { margin: 6px 0; color: #5f6e85; }
.account-profile-card span:not(.account-avatar) { color: #8894a8; font-size: .78rem; }
.account-password-card { display: grid; gap: 17px; padding: 27px; }

@media (max-width: 980px) {
    .team-layout,
    .account-security-layout { grid-template-columns: 1fr; }
    .team-editor { position: static; }
}
@media (max-width: 620px) {
    .team-member-card { grid-template-columns: 44px minmax(0, 1fr); }
    .team-member-avatar { width: 44px; height: 44px; }
    .team-member-actions { grid-column: 1 / -1; justify-content: stretch; }
    .team-member-actions button { flex: 1 1 auto; }
}

/* Team & account polish */
.page-team .app-main,
.page-account .app-main {
    background:
        radial-gradient(circle at 92% 4%, rgba(64, 212, 187, .13), transparent 28rem),
        radial-gradient(circle at 12% 12%, rgba(91, 92, 246, .12), transparent 27rem),
        #f6f8fc;
}
.team-page,
.account-page { max-width: 1460px; }
.team-workspace-head,
.account-workspace-head {
    overflow: hidden;
    position: relative;
    padding: 34px 36px;
    border: 1px solid rgba(203, 219, 238, .82);
    background:
        linear-gradient(125deg, rgba(255,255,255,.98) 0 58%, rgba(231,247,255,.94)),
        #fff;
    box-shadow: 0 24px 70px rgba(40, 61, 104, .1);
}
.team-workspace-head::after,
.account-workspace-head::after {
    position: absolute;
    right: -75px;
    bottom: -105px;
    width: 280px;
    height: 280px;
    border: 38px solid rgba(39, 104, 241, .07);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.team-hero-copy,
.account-workspace-head > div:first-child { position: relative; z-index: 1; max-width: 570px; }
.team-hero-copy h1,
.account-workspace-head h1 {
    margin-bottom: 8px;
    font-size: clamp(2rem, 3.5vw, 3rem);
    letter-spacing: -.04em;
}
.team-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}
.team-hero-badges span {
    padding: 7px 11px;
    border: 1px solid #d9e7f7;
    border-radius: 999px;
    color: #40516e;
    background: rgba(255,255,255,.8);
    font-size: .74rem;
    font-weight: 800;
}
.team-hero-badges span::before {
    margin-right: 6px;
    color: #14a888;
    content: "✓";
}
.team-overview {
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(112px, 1fr));
    gap: 10px;
}
.team-head-stat {
    min-width: 0;
    min-height: 116px;
    align-content: center;
    justify-items: start;
    padding: 17px;
    border-color: rgba(204, 221, 240, .9);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(31, 57, 98, .07);
}
.team-head-stat span {
    color: #63738d;
    font-size: .7rem;
    font-weight: 800;
}
.team-head-stat b {
    margin: 3px 0;
    font-size: 2.15rem;
    line-height: 1;
}
.team-head-stat .team-stat-word { font-size: 1.3rem; }
.team-head-stat small { min-height: 0; color: #95a0b1; font-size: .68rem; }
.team-layout {
    grid-template-columns: minmax(350px, .82fr) minmax(540px, 1.5fr);
    gap: 24px;
}
.team-editor,
.team-members-panel,
.account-profile-card,
.account-password-card {
    border-color: rgba(213, 224, 238, .9);
    box-shadow: 0 24px 65px rgba(34, 54, 92, .09);
}
.team-editor {
    overflow: hidden;
    top: 84px;
    gap: 15px;
    padding: 28px;
}
.team-editor::before,
.team-members-panel::before,
.account-password-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: inherit;
    background: linear-gradient(90deg, #2768f1, #7459ed, #17bfa9);
    content: "";
}
.team-editor,
.team-members-panel,
.account-password-card { position: relative; }
.team-editor-head p,
.team-members-panel > header p {
    margin: 6px 0 0;
    color: #718098;
    font-size: .77rem;
    line-height: 1.45;
}
.team-editor > label,
.account-password-card > label { font-size: .8rem; }
.team-editor input,
.team-editor select,
.account-password-card input {
    min-height: 52px;
    border: 1px solid #d8e1ed;
    border-radius: 14px;
    background: #fbfcfe;
    box-shadow: inset 0 1px 2px rgba(31, 49, 80, .03);
}
.team-editor input:focus,
.team-editor select:focus,
.account-password-card input:focus {
    border-color: #5890f5;
    outline: 3px solid rgba(39, 104, 241, .1);
    background: #fff;
}
.team-permissions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border-color: #dbe5f0;
    background: #f7f9fd;
}
.team-permissions label {
    position: relative;
    min-height: 92px;
    padding: 13px;
    border: 1px solid #e0e7f1;
    border-radius: 15px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.team-permissions label:hover { transform: translateY(-1px); background: #fff; }
.team-permissions label:has(input:checked) {
    border-color: #92b6fa;
    background: linear-gradient(145deg, #f7faff, #edf8ff);
    box-shadow: 0 9px 22px rgba(48, 106, 219, .1);
}
.team-permissions input {
    width: 18px;
    height: 18px;
    accent-color: #2768f1;
}
.team-permissions b { font-size: .8rem; }
.team-permissions small { font-size: .7rem; line-height: 1.4; }
.team-members-panel {
    overflow: hidden;
    min-height: 600px;
    padding: 28px;
}
.team-members-panel > header { margin-bottom: 16px; }
.team-list-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0 -28px 20px;
    padding: 11px 28px;
    border-block: 1px solid #edf1f6;
    color: #7b879a;
    background: #fafbfd;
    font-size: .7rem;
}
.team-list-guide span:first-child { color: #20866c; font-weight: 800; }
.team-list-guide i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background: #20bb91;
    box-shadow: 0 0 0 4px rgba(32,187,145,.12);
}
.team-member-list { gap: 13px; }
.team-member-card {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    padding: 18px;
    border-color: #e1e8f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(35, 51, 82, .045);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.team-member-card:hover {
    transform: translateY(-2px);
    border-color: #b8cef0;
    box-shadow: 0 16px 34px rgba(36, 65, 112, .09);
}
.team-member-avatar {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    box-shadow: 0 10px 20px rgba(39,104,241,.18);
}
.team-member-copy small {
    display: inline-flex;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    color: #6141c7;
    background: #f0ebff;
}
.team-member-actions button { border-radius: 11px; }
.account-workspace-head > div:first-child > p:last-child {
    margin: 8px 0 0;
    color: #6b7890;
}
.account-security-badge {
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    padding: 15px 18px;
    border: 1px solid #cdebdc;
    border-radius: 18px;
    color: #185f4b;
    background: rgba(241, 255, 249, .9);
}
.account-security-badge > i,
.account-lock-mark {
    position: relative;
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg, #16b78e, #08745d);
    box-shadow: 0 10px 24px rgba(15, 153, 117, .2);
}
.account-security-badge > i::before,
.account-lock-mark::before {
    position: absolute;
    inset: 10px 12px 9px;
    border: 2px solid #fff;
    border-radius: 5px;
    content: "";
}
.account-security-badge > i::after,
.account-lock-mark::after {
    position: absolute;
    top: 6px;
    left: 16px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    content: "";
}
.account-security-badge span { display: grid; gap: 2px; }
.account-security-badge b { font-size: .83rem; }
.account-security-badge small { min-height: 0; color: #598b7d; font-size: .7rem; }
.account-security-layout {
    grid-template-columns: minmax(300px, .8fr) minmax(430px, 1.2fr);
    gap: 24px;
}
.account-profile-card {
    overflow: hidden;
    position: relative;
    display: block;
    padding: 0 28px 28px;
}
.account-profile-cover {
    height: 118px;
    margin: 0 -28px 0;
    background:
        radial-gradient(circle at 78% 22%, rgba(255,255,255,.3) 0 9px, transparent 10px),
        linear-gradient(125deg, #255fe1, #6c55e8 55%, #1cbba4);
}
.account-profile-identity {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: -42px;
}
.account-avatar {
    flex-basis: 84px;
    width: 84px;
    height: 84px;
    border: 5px solid #fff;
    border-radius: 24px;
    font-size: 2rem;
    box-shadow: 0 14px 30px rgba(31, 55, 99, .18);
}
.account-role-pill {
    margin-bottom: 8px;
    padding: 7px 11px;
    border: 1px solid #d6e4f1;
    border-radius: 999px;
    color: #1f715e !important;
    background: #effbf7;
    font-size: .7rem !important;
    font-weight: 900;
}
.account-profile-copy { padding-top: 20px; }
.account-profile-copy h2 { overflow-wrap: anywhere; }
.account-profile-copy p:not(.eyebrow) { overflow-wrap: anywhere; }
.account-profile-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e9eef4;
}
.account-profile-meta > span {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 13px;
    background: #f7f9fc;
}
.account-profile-meta b { color: #728097; font-size: .66rem; }
.account-profile-meta small { min-height: 0; color: #20304c; font-size: .75rem; font-weight: 800; }
.account-password-card { padding: 30px; }
.account-password-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.account-lock-mark { background: linear-gradient(145deg, #2768f1, #6b54e7); }
.account-password-head > div { flex: 1; }
.account-password-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: #f6f8fc;
}
.account-password-tips span {
    color: #64728a;
    font-size: .68rem;
    font-weight: 800;
}
.account-password-tips span::before {
    margin-right: 5px;
    color: #16a37f;
    content: "✓";
}
.account-password-card .primary-btn,
.team-editor .primary-btn { min-height: 52px; border-radius: 14px; }

@media (max-width: 1120px) {
    .team-workspace-head { align-items: stretch; flex-direction: column; }
    .team-overview { width: 100%; }
    .team-layout { grid-template-columns: minmax(320px, .9fr) minmax(430px, 1.1fr); }
}
@media (max-width: 900px) {
    .team-layout,
    .account-security-layout { grid-template-columns: 1fr; }
    .team-editor { position: relative; top: auto; }
}
@media (max-width: 680px) {
    .team-workspace-head,
    .account-workspace-head { padding: 25px 20px; }
    .team-overview { grid-template-columns: 1fr 1fr; }
    .team-head-stat:last-child { grid-column: 1 / -1; min-height: 92px; }
    .team-permissions { grid-template-columns: 1fr; }
    .team-members-panel,
    .team-editor,
    .account-password-card { padding: 21px; }
    .team-list-guide { margin-inline: -21px; padding-inline: 21px; }
    .team-member-card { grid-template-columns: 46px minmax(0, 1fr); }
    .team-member-avatar { width: 46px; height: 46px; }
    .team-member-actions { grid-column: 1 / -1; }
    .account-workspace-head { align-items: stretch; }
    .account-security-badge { min-width: 0; width: 100%; }
    .account-profile-meta { grid-template-columns: 1fr; }
}

:root[data-theme="dark"] .page-team .app-main,
:root[data-theme="dark"] .page-account .app-main { background: #0d1624; }
:root[data-theme="dark"] .team-workspace-head,
:root[data-theme="dark"] .account-workspace-head,
:root[data-theme="dark"] .team-editor,
:root[data-theme="dark"] .team-members-panel,
:root[data-theme="dark"] .team-member-card,
:root[data-theme="dark"] .account-profile-card,
:root[data-theme="dark"] .account-password-card { border-color: #2d3c52; background: #152133; }
:root[data-theme="dark"] .team-head-stat,
:root[data-theme="dark"] .team-permissions label { border-color: #34445c; background: #1a283b; }
:root[data-theme="dark"] .team-list-guide,
:root[data-theme="dark"] .account-profile-meta > span,
:root[data-theme="dark"] .account-password-tips { border-color: #29394f; background: #111d2d; }
:root[data-theme="dark"] .team-editor input,
:root[data-theme="dark"] .team-editor select,
:root[data-theme="dark"] .account-password-card input { border-color: #35465d; color: #edf4ff; background: #111c2b; }

/* Login workspace */
.page-login {
    background:
        radial-gradient(circle at 8% 4%, rgba(45, 211, 193, .22), transparent 27rem),
        radial-gradient(circle at 94% 12%, rgba(156, 77, 222, .24), transparent 31rem),
        linear-gradient(135deg, #09142e 0%, #172a59 50%, #45245e 100%);
}
.page-login .auth-topbar {
    position: relative;
    z-index: 5;
    min-height: 76px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    background: rgba(7, 15, 35, .48);
    box-shadow: none;
    backdrop-filter: blur(20px);
}
.page-login .auth-topbar .brand-mark {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,.24);
}
.login-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    width: min(1120px, calc(100% - 40px));
    min-height: 650px;
    margin: 56px auto 70px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 34px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 45px 110px rgba(0,0,0,.35);
}
.login-stage::before {
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px rgba(255,255,255,.55);
    content: "";
    pointer-events: none;
}
.login-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 42px 46px 34px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(43, 218, 193, .35), transparent 18rem),
        radial-gradient(circle at 5% 92%, rgba(211, 72, 184, .33), transparent 20rem),
        linear-gradient(145deg, #101d43, #263f87 53%, #542c78);
}
.login-showcase::before {
    position: absolute;
    right: -110px;
    top: -100px;
    width: 330px;
    height: 330px;
    border: 48px solid rgba(255,255,255,.06);
    border-radius: 50%;
    content: "";
}
.login-showcase::after {
    position: absolute;
    left: 47%;
    bottom: -120px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    content: "";
}
.login-showcase-brand,
.login-showcase-copy,
.login-showcase-features,
.login-showcase-foot { position: relative; z-index: 1; }
.login-showcase-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}
.login-showcase-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    background: rgba(7,14,33,.42);
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.login-showcase-mark img { width: 100%; height: 100%; object-fit: cover; }
.login-showcase-brand > span:last-child { display: grid; gap: 2px; }
.login-showcase-brand b { font-size: 1rem; }
.login-showcase-brand small { min-height: 0; color: rgba(255,255,255,.62); font-size: .65rem; letter-spacing: .08em; }
.login-showcase-copy { margin-top: 64px; }
.login-showcase-copy .eyebrow { color: #61e5d2; letter-spacing: .16em; }
.login-showcase-copy h2 {
    margin: 11px 0 15px;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.55rem);
    line-height: 1.08;
    letter-spacing: -.045em;
}
.login-showcase-copy h2 span {
    color: transparent;
    background: linear-gradient(90deg, #72ead9, #b5c4ff, #ffb4dc);
    background-clip: text;
    -webkit-background-clip: text;
}
.login-showcase-copy > p:last-child {
    max-width: 460px;
    margin: 0;
    color: rgba(255,255,255,.72);
    line-height: 1.7;
}
.login-showcase-features {
    display: grid;
    gap: 10px;
    margin-top: 34px;
}
.login-showcase-features article {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.065);
    backdrop-filter: blur(10px);
}
.login-showcase-features i {
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    color: #8dffee;
    background: rgba(47, 220, 194, .12);
    font-size: .65rem;
    font-style: normal;
    font-weight: 900;
}
.login-showcase-features span { display: grid; gap: 2px; }
.login-showcase-features b { font-size: .8rem; }
.login-showcase-features small { min-height: 0; color: rgba(255,255,255,.58); font-size: .68rem; }
.login-showcase-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 26px;
    color: rgba(255,255,255,.62);
    font-size: .67rem;
}
.login-showcase-foot span { display: flex; align-items: center; gap: 8px; color: #b9f5df; font-weight: 800; }
.login-showcase-foot i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3de0a9;
    box-shadow: 0 0 0 5px rgba(61,224,169,.12);
}
.page-login .login-stage .auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    padding: 54px 52px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
}
.page-login .login-stage .auth-panel::before { display: none; }
.login-mobile-brand { display: none; }
.page-login .login-stage .auth-panel .eyebrow {
    margin-bottom: 9px;
    color: #6659dc;
    letter-spacing: .14em;
}
.page-login .login-stage .auth-panel h1 {
    margin: 0 0 10px;
    color: #14213c;
    font-size: clamp(2rem, 4vw, 2.65rem);
    line-height: 1.15;
    letter-spacing: -.04em;
}
.page-login .login-stage .auth-intro {
    margin: 0 0 30px;
    color: #718097;
    line-height: 1.6;
}
.page-login .login-stage .stack-form { gap: 18px; }
.page-login .login-stage .auth-panel label {
    gap: 8px;
    color: #33435e;
    font-size: .78rem;
    font-weight: 850;
}
.login-input-wrap {
    position: relative;
    display: block;
}
.page-login .login-stage .auth-panel .login-input-wrap input {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid #d9e2ee;
    border-radius: 15px;
    color: #162440;
    background: #f9fbfd;
    font-size: .92rem;
    box-shadow: inset 0 1px 2px rgba(26, 43, 73, .025);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.page-login .login-stage .auth-panel .login-input-wrap input:focus {
    border-color: #668cf1;
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(60, 111, 231, .11);
}
.page-login .login-stage .password-field input { padding-right: 80px; }
.page-login .login-stage .password-field button {
    right: 10px;
    min-height: 36px;
    border-radius: 10px;
    color: #4c63d9;
    background: #eef1ff;
    font-size: .7rem;
    font-weight: 850;
}
.page-login .login-stage .auth-panel .primary-btn {
    min-height: 56px;
    margin-top: 2px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(115deg, #245ee4, #6654df 57%, #8b4bd3);
    box-shadow: 0 15px 28px rgba(69, 83, 207, .26);
    font-size: .9rem;
    transition: transform .2s, box-shadow .2s;
}
.page-login .login-stage .auth-panel .primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 19px 34px rgba(69, 83, 207, .32);
}
.login-security-note {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 25px;
    padding: 13px;
    border: 1px solid #dcebe5;
    border-radius: 14px;
    background: #f5fcf9;
}
.login-security-note > i {
    position: relative;
    display: block;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #daf5e9;
}
.login-security-note > i::before {
    position: absolute;
    inset: 9px 10px 8px;
    border: 2px solid #15916d;
    border-radius: 4px;
    content: "";
}
.login-security-note > i::after {
    position: absolute;
    top: 6px;
    left: 13px;
    width: 8px;
    height: 8px;
    border: 2px solid #15916d;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    content: "";
}
.login-security-note span { display: grid; gap: 2px; }
.login-security-note b { color: #276a58; font-size: .72rem; }
.login-security-note small { min-height: 0; color: #719187; font-size: .63rem; }
.login-help {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 19px;
    color: #8a95a7;
    font-size: .7rem;
}
.login-help a { color: #5364d8; font-weight: 850; }

@media (max-width: 920px) {
    .login-stage {
        grid-template-columns: minmax(0, .85fr) minmax(370px, 1.15fr);
        margin-top: 38px;
    }
    .login-showcase { padding: 34px 28px; }
    .login-showcase-copy { margin-top: 46px; }
    .login-showcase-features article { padding: 12px; }
    .page-login .login-stage .auth-panel { padding: 46px 34px; }
}
@media (max-width: 720px) {
    .page-login .auth-topbar { display: none; }
    .login-stage {
        display: block;
        width: min(100% - 24px, 520px);
        min-height: 0;
        margin: 24px auto;
        border-radius: 26px;
    }
    .login-showcase { display: none; }
    .page-login .login-stage .auth-panel { padding: 30px 23px 25px; }
    .login-mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 34px;
        color: #192846;
    }
    .login-mobile-brand img { width: 42px; height: 42px; border-radius: 13px; }
    .login-mobile-brand b { font-size: .85rem; }
    .page-login .login-stage .auth-panel h1 { font-size: 2rem; }
}

/* Admin user management */
.page-admin [data-admin-group="users"].table-section {
    overflow: visible;
}
.page-admin [data-admin-group="users"] table {
    min-width: 1120px;
}
.admin-user-email {
    display: block;
    min-height: 0;
    margin-top: 3px;
    color: #7a879a;
    font-size: .68rem;
}
.admin-video-count {
    display: grid;
    gap: 6px;
    min-width: 150px;
}
.admin-video-count > b {
    color: #1f3150;
    font-size: .84rem;
}
.admin-video-count > small {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 0;
}
.admin-video-count > small span {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 850;
}
.admin-video-count .is-ready { color: #16725a; background: #e6f8f1; }
.admin-video-count .is-working { color: #315fb2; background: #eaf1ff; }
.admin-video-count .is-failed { color: #b22949; background: #ffe9ee; }
.admin-team-pill,
.admin-role-pill,
.admin-status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .64rem;
    font-style: normal;
    font-weight: 900;
}
.admin-team-pill {
    color: #6750c7;
    background: #f0ebff;
}
.admin-role-pill { margin-top: 0; text-transform: uppercase; }
.admin-role-pill.is-admin {
    color: #7a3db2;
    background: #f2e9ff;
}
.admin-role-pill.is-user {
    color: #28658f;
    background: #e7f5ff;
}
.admin-status-pill { margin-top: 0; }
.admin-status-pill::before {
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    content: "";
}
.admin-status-pill.is-active {
    color: #18735b;
    background: #e6f8f1;
}
.admin-status-pill.is-active::before { background: #20b88d; }
.admin-status-pill.is-disabled {
    color: #995a11;
    background: #fff1dc;
}
.admin-status-pill.is-disabled::before { background: #e59a37; }
.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 250px;
}
.admin-user-actions button {
    min-height: 35px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: .68rem;
    white-space: nowrap;
}
.danger-btn {
    border: 1px solid #ffd0d8;
    color: #d92f50;
    background: #fff3f5;
    font-weight: 850;
    cursor: pointer;
}
.danger-btn:hover {
    border-color: #f49aab;
    color: #b71738;
    background: #ffe7ec;
}
.admin-login-user-btn {
    border: 1px solid #bde8da;
    color: #13755c;
    background: #eafaf4;
    font-weight: 850;
    cursor: pointer;
}
.admin-login-user-btn:hover {
    border-color: #72d1b4;
    color: #0d5e49;
    background: #dcf7ed;
}
.shell-main:has(.impersonation-banner) {
    grid-template-rows: auto auto 1fr;
}
.impersonation-banner {
    position: sticky;
    z-index: 85;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 11px 40px;
    border-bottom: 1px solid #f0be55;
    color: #603c08;
    background: linear-gradient(90deg, #fff4ce, #ffe9aa);
    box-shadow: 0 10px 28px rgba(122, 83, 13, .13);
}
.impersonation-banner > span {
    display: grid;
    gap: 2px;
}
.impersonation-banner b { font-size: .8rem; }
.impersonation-banner small {
    min-height: 0;
    color: #8a682f;
    font-size: .68rem;
}
.impersonation-banner button {
    min-height: 40px;
    padding: 8px 15px;
    border: 1px solid #a97012;
    border-radius: 11px;
    color: #fff;
    background: #9a6510;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}
.impersonation-banner button:hover { background: #79500e; }
.admin-user-dialog {
    width: min(590px, calc(100% - 28px));
    max-height: calc(100vh - 40px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid #dce5ef;
    border-radius: 25px;
    color: #172540;
    background: #fff;
    box-shadow: 0 38px 95px rgba(16, 28, 54, .32);
}
.admin-user-dialog::backdrop {
    background: rgba(9, 18, 38, .58);
    backdrop-filter: blur(6px);
}
.admin-user-dialog > form {
    gap: 17px;
    padding: 28px;
}
.admin-user-dialog header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 3px;
}
.admin-user-dialog header h2 {
    margin: 3px 0 0;
    color: #182640;
}
.admin-user-dialog header p:not(.eyebrow) {
    margin: 5px 0 0;
    color: #77849a;
    font-size: .75rem;
}
.dialog-close {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #6b7890;
    background: #f0f3f8;
    font-size: 1.4rem;
    cursor: pointer;
}
.admin-user-dialog label {
    display: grid;
    gap: 7px;
    color: #34445e;
    font-size: .78rem;
    font-weight: 850;
}
.admin-user-dialog input,
.admin-user-dialog select {
    width: 100%;
    min-height: 50px;
    border: 1px solid #d8e1ec;
    border-radius: 13px;
    color: #172540;
    background: #fafbfd;
}
.admin-user-dialog input:focus,
.admin-user-dialog select:focus {
    border-color: #668df0;
    outline: 3px solid rgba(65, 111, 225, .11);
    background: #fff;
}
.admin-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}
.admin-user-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 5px;
    padding-top: 18px;
    border-top: 1px solid #e9eef4;
}
.admin-user-dialog footer button {
    min-height: 46px;
    border-radius: 12px;
}
.admin-review-style-dialog [data-admin-review-style-delete] {
    margin-right: auto;
}
.admin-password-warning {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #fee2aa;
    border-radius: 13px;
    color: #865618;
    background: #fff8e8;
    font-size: .72rem;
    line-height: 1.55;
}

@media (max-width: 620px) {
    .admin-dialog-grid { grid-template-columns: 1fr; }
    .admin-user-dialog > form { padding: 22px 18px; }
    .admin-user-dialog footer { align-items: stretch; flex-direction: column-reverse; }
    .admin-user-dialog footer button { width: 100%; }
    .impersonation-banner {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 12px 16px;
    }
    .impersonation-banner button { width: 100%; }
}

/* Developer API visual repair */
.page-api .app-main {
    background:
        radial-gradient(circle at 94% 4%, rgba(25, 205, 185, .12), transparent 27rem),
        radial-gradient(circle at 8% 12%, rgba(105, 82, 232, .11), transparent 29rem),
        #f6f8fc;
}
.developer-api-page { gap: 24px; }
.api-workspace-head {
    overflow: hidden;
    position: relative;
    padding: 34px 38px;
    border: 1px solid #dce6f2;
    box-shadow: 0 24px 65px rgba(29, 45, 78, .09);
}
.api-workspace-head::after {
    position: absolute;
    right: -75px;
    bottom: -105px;
    width: 270px;
    height: 270px;
    border: 40px solid rgba(105,82,232,.065);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.api-workspace-head > * { position: relative; z-index: 1; }
.api-workspace-head h1 {
    margin-bottom: 8px;
    font-size: clamp(2.15rem, 4vw, 3.2rem);
    letter-spacing: -.045em;
}
.api-workspace-head > div:first-child > p:last-child {
    max-width: 700px;
    margin: 0;
    color: #697790;
    line-height: 1.65;
}
.api-limits-strip {
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(29,45,78,.065);
}
.api-limits-strip article { min-height: 94px; }
.api-limits-strip b { font-size: 1.15rem; }
.api-key-layout {
    grid-template-columns: minmax(390px, .95fr) minmax(430px, 1.05fr);
    gap: 24px;
}
.api-key-create-card,
.api-keys-card {
    overflow: hidden;
    position: relative;
    min-height: 560px;
    padding: 29px;
    border-color: #dbe5f0;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(30, 47, 82, .085);
}
.api-key-create-card::before,
.api-keys-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #6853ed, #397ce4, #20bea6);
    content: "";
}
.api-create-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.api-create-head > div { min-width: 0; }
.api-create-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #8effe9;
    background: linear-gradient(145deg, #18223c, #29365b);
    box-shadow: 0 12px 24px rgba(29, 44, 80, .2);
    font: 800 .78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.api-key-create-card .api-create-head > div > p:last-child {
    margin: 6px 0 0;
    color: #718098;
    font-size: .77rem;
    line-height: 1.55;
}
.api-key-create-card > label {
    gap: 8px;
    color: #2a3955;
    font-size: .8rem;
    font-weight: 850;
}
.api-key-create-card > label > input[type="text"] {
    min-height: 54px;
    margin: 0;
    border: 1px solid #d8e2ee;
    border-radius: 14px;
    background: #fafbfd;
    box-shadow: inset 0 1px 2px rgba(24,39,68,.025);
}
.api-key-create-card > label > input[type="text"]:focus {
    border-color: #6e83ed;
    outline: 3px solid rgba(104,83,237,.1);
    background: #fff;
}
.api-scope-grid {
    gap: 10px;
    margin: 0;
}
.api-scope-grid legend {
    width: 100%;
    margin-bottom: 12px;
}
.api-scope-grid legend span {
    display: block;
    color: #263650;
    font-size: .85rem;
    font-weight: 900;
}
.api-scope-grid legend small {
    display: block;
    min-height: 0;
    margin-top: 2px;
    color: #929caf;
    font-size: .66rem;
    font-weight: 600;
}
.api-key-create-card .api-scope-grid label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 80px;
    padding: 14px 15px;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
    background: #fafbfd;
    box-shadow: none;
    cursor: pointer;
    transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.api-key-create-card .api-scope-grid label:hover {
    transform: translateY(-1px);
    border-color: #bdccef;
    background: #fff;
    box-shadow: 0 10px 24px rgba(44,65,105,.07);
}
.api-key-create-card .api-scope-grid label:has(input:checked) {
    border-color: #a9b7f5;
    background: linear-gradient(135deg, #f7f6ff, #f2f9ff);
    box-shadow: 0 10px 25px rgba(84,77,207,.08);
}
.api-key-create-card .api-scope-grid input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px;
    min-width: 24px;
    min-height: 24px !important;
    margin: 0;
    padding: 0;
    border: 2px solid #bdc8d9;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
}
.api-key-create-card .api-scope-grid input[type="checkbox"]:checked {
    border-color: #6652e9;
    background-color: #6652e9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.3 6.3 12 13 4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}
.api-key-create-card .api-scope-grid input[type="checkbox"]:focus {
    outline: 3px solid rgba(102,82,233,.14);
}
.api-scope-grid label > span {
    min-width: 0;
    gap: 4px;
}
.api-scope-grid label b {
    color: #1d2b45;
    font-size: .82rem;
}
.api-scope-grid label small {
    min-height: 0;
    color: #78869b;
    font-size: .7rem;
    line-height: 1.45;
}
.api-create-submit {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    background: linear-gradient(110deg, #275fe3, #6753e8 64%, #7650d9);
    box-shadow: 0 14px 27px rgba(78,77,205,.23);
}
.api-create-submit > span { margin-right: 4px; font-size: 1rem; }
.api-create-submit[disabled] {
    cursor: wait;
    opacity: .72;
}
.api-create-action {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    border-top: 0;
    background: transparent;
}
.api-create-action > small {
    display: block;
    min-height: 18px;
    margin-top: 0;
    color: #687790;
    text-align: center;
}
.api-key-create-card .api-scope-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.api-key-create-card .api-scope-grid legend {
    grid-column: 1 / -1;
}
.api-key-create-card .api-scope-grid label {
    min-height: 104px;
    align-content: flex-start;
    flex-direction: column;
}

.api-schema-docs {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}
.api-schema-docs > header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    padding: 24px 26px;
    border: 1px solid #dce6f2;
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 20%, rgba(32,190,166,.13), transparent 15rem),
        linear-gradient(135deg, #fff, #f7f8ff);
}
.api-schema-docs > header h2 {
    margin: 3px 0 7px;
    color: #132039;
}
.api-schema-docs > header p:last-child {
    max-width: 760px;
    margin: 0;
    color: #6a7890;
}
.api-schema-docs > header > span {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid #cad8eb;
    border-radius: 12px;
    color: #43516a;
    background: #fff;
    font: 700 .78rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.api-schema-docs > header > span b {
    margin-right: 7px;
    color: #087f6d;
}
.api-schema-card {
    overflow: hidden;
    border: 1px solid #dce6f2;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(29,45,78,.055);
}
.api-schema-card-head {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #e5ebf4;
    background: #fbfcff;
}
.api-schema-card-head > span {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #6552e9, #1bbba5);
    font-size: .72rem;
    font-weight: 900;
}
.api-schema-card-head h3 {
    margin: 0 0 2px;
    color: #17243c;
}
.api-schema-card-head p {
    margin: 0;
    color: #78859a;
    font-size: .78rem;
}
.api-schema-table-wrap {
    overflow-x: auto;
}
.api-schema-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    color: #33415a;
    font-size: .78rem;
}
.api-schema-table th,
.api-schema-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #e9eef5;
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}
.api-schema-table th {
    color: #53617a;
    background: #f5f8fc;
    font-size: .7rem;
    letter-spacing: .025em;
    white-space: nowrap;
}
.api-schema-table tbody tr:last-child td { border-bottom: 0; }
.api-schema-table tbody tr:hover { background: #fbfdff; }
.api-schema-table td:first-child {
    color: #17243c;
    font-weight: 800;
    white-space: nowrap;
}
.api-schema-table code {
    padding: 2px 5px;
    border-radius: 5px;
    color: #4135ad;
    background: #f0eeff;
    font-size: .72rem;
}
.api-required,
.api-optional,
.api-conditional {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 900;
    white-space: nowrap;
}
.api-required { color: #b32343; background: #ffe9ee; }
.api-optional { color: #557087; background: #edf3f7; }
.api-conditional { color: #96610a; background: #fff2d7; }
.api-keys-card > header {
    margin-bottom: 21px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}
.api-keys-card > header h2 { margin-bottom: 0; }
.api-keys-card .ui-empty-state {
    min-height: 380px;
    border: 1px dashed #ccd8e8;
    border-radius: 19px;
    background:
        radial-gradient(circle at 50% 34%, rgba(105,82,232,.08), transparent 9rem),
        #fafbfd;
}
.api-key-row {
    padding: 17px;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,49,83,.045);
}
.api-key-row:hover { border-color: #b9cae4; }

@media (max-width: 1120px) {
    .api-key-layout { grid-template-columns: 1fr; }
    .api-key-create-card,
    .api-keys-card { min-height: 0; }
}
@media (max-width: 680px) {
    .api-workspace-head { padding: 25px 20px; }
    .api-key-create-card,
    .api-keys-card { padding: 21px; }
    .api-create-head { align-items: center; }
    .api-create-icon { flex-basis: 42px; width: 42px; height: 42px; }
    .api-key-create-card .api-scope-grid { grid-template-columns: 1fr; }
    .api-key-create-card .api-scope-grid label {
        min-height: 72px;
        flex-direction: row;
    }
    .api-schema-docs > header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.cartclip-swal {
    border: 1px solid var(--line);
    border-radius: 22px !important;
    color: var(--ink);
    background: #ffffff !important;
    box-shadow: var(--shadow);
    font-family: "Lexend Deca", "Kanit", system-ui, sans-serif;
    padding: 28px !important;
}
.swal2-title {
    color: var(--ink) !important;
    letter-spacing: 0 !important;
}
.swal2-html-container,
.swal2-content {
    color: var(--muted) !important;
}
.cartclip-swal-confirm,
.cartclip-swal-cancel {
    min-height: 42px;
    border-radius: 14px;
    padding: 0 18px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}
.cartclip-swal-confirm {
    border: 0;
    color: #ffffff;
    background: var(--blue);
    box-shadow: 0 10px 20px rgba(37, 116, 219, .22);
}
.cartclip-swal-cancel {
    margin-left: 8px;
    color: var(--blue);
    border: 1px solid #cfe4ff;
    background: #eef6ff;
}
.swal2-toast.cartclip-swal {
    padding: 12px 14px;
}
.cartclip-swal .swal2-icon {
    margin: 8px auto 16px !important;
}
.cartclip-swal .swal2-icon.swal2-error {
    border-color: var(--bad) !important;
    color: var(--bad) !important;
}
.cartclip-swal .swal2-icon.swal2-success {
    border-color: var(--green) !important;
    color: var(--green) !important;
}
.cartclip-image-swal {
    padding: 18px !important;
}
.cartclip-image-swal .swal2-image {
    max-width: 100%;
    max-height: min(78vh, 760px);
    object-fit: contain;
    border-radius: 18px;
    margin: 8px auto 0;
}
.cartclip-image-swal .swal2-close {
    color: var(--ink) !important;
}
.admin-prompt-swal .swal2-html-container {
    margin: 0;
}
.admin-prompt-preview {
    width: 100%;
    min-height: 62vh;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    background: var(--panel-soft);
    color: var(--ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: .92rem;
    line-height: 1.55;
    white-space: pre-wrap;
}
.admin-prompt-help {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .92rem;
}
.swal2-toast .swal2-title {
    font-size: .98rem !important;
}
.cartclip-toast-tray {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2147483647;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 28px));
}
.cartclip-toast {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow);
}
.cartclip-toast strong,
.cartclip-toast span {
    display: block;
}
.cartclip-toast span {
    margin-top: 3px;
    color: var(--muted);
}
:root[data-theme="dark"] .cartclip-swal,
:root[data-theme="dark"] .cartclip-toast {
    background: #151f2f !important;
}
.clip-processing-time {
    display: block;
    margin-top: 10px;
    color: #19745f;
    font-weight: 700;
}

.clip-provider-credit-wait {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(217, 119, 6, .28);
    border-radius: 8px;
    color: #92400e;
    background: rgba(245, 158, 11, .10);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.clip-provider-credit-wait b,
.clip-provider-credit-wait span {
    display: block;
}

.clip-creation-countdown {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #1d4ed8;
    background: rgba(37, 99, 235, .09);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.clip-creation-countdown::before {
    content: "\25F7";
    margin-right: 7px;
}

.clip-creation-countdown.is-overdue {
    color: #a65308;
    background: rgba(245, 158, 11, .13);
}

.admin-showcase-manager {
    display: grid;
    gap: 20px;
}

.admin-showcase-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.admin-showcase-heading h2,
.admin-showcase-heading p {
    margin: 0;
}

.admin-showcase-heading > div > p:last-child {
    margin-top: 7px;
    color: var(--muted);
}

.admin-showcase-heading > span {
    flex: none;
    border-radius: 999px;
    padding: 9px 14px;
    color: #08756c;
    background: rgba(20, 184, 166, .12);
    font-weight: 800;
}

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

.admin-showcase-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    border: 2px solid var(--line);
    border-radius: 18px;
    padding: 10px;
    background: var(--panel);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.admin-showcase-card:hover {
    transform: translateY(-2px);
}

.admin-showcase-card.is-selected {
    border-color: #16b8aa;
    box-shadow: 0 12px 28px rgba(16, 150, 140, .15);
}

.admin-showcase-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-showcase-check {
    position: absolute;
    z-index: 2;
    top: 17px;
    right: 17px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 10px;
    color: transparent;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 16px rgba(11, 30, 55, .18);
}

.admin-showcase-card.is-selected .admin-showcase-check {
    color: #fff;
    background: #10aa79;
}

.admin-showcase-media {
    display: grid;
    aspect-ratio: 9 / 12;
    overflow: hidden;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: #10243c;
}

.admin-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-showcase-placeholder {
    font-size: 2rem;
}

.admin-showcase-card strong,
.admin-showcase-card small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-showcase-card strong {
    display: -webkit-box;
    min-height: 2.8em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.4;
}

.admin-showcase-card small {
    color: var(--muted);
    white-space: nowrap;
}

.admin-showcase-card a {
    width: fit-content;
    margin-top: 4px;
    color: #1673d9;
    font-weight: 800;
}

.admin-showcase-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.admin-showcase-empty {
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 32px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 720px) {
    .admin-showcase-heading {
        display: grid;
    }

    .admin-showcase-heading > span {
        width: fit-content;
    }

    .admin-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Developer API request builder */
.api-request-builder {
    position: relative;
    overflow: hidden;
    margin: 26px 0;
    border: 1px solid #d8e4f2;
    border-radius: 26px;
    padding: clamp(20px, 3vw, 34px);
    background:
        radial-gradient(circle at 100% 0%, rgba(111, 77, 255, .13), transparent 35%),
        linear-gradient(145deg, #fff 0%, #f6f9ff 100%);
    box-shadow: 0 22px 55px rgba(28, 47, 82, .09);
}

.api-request-builder::before {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    content: "";
    background: linear-gradient(90deg, #6d4aff, #188de8, #19bfa8);
}

.api-request-builder > header,
.api-builder-output > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.api-request-builder > header h2,
.api-builder-output h3,
.api-builder-product h3 {
    margin: 3px 0 0;
    color: #101c34;
}

.api-request-builder > header p:not(.eyebrow) {
    max-width: 760px;
    margin: 8px 0 0;
    color: #617089;
    line-height: 1.65;
}

.api-request-builder > header > span {
    flex: 0 0 auto;
    border: 1px solid #dcd4ff;
    border-radius: 999px;
    padding: 9px 13px;
    color: #6546dc;
    background: #f4f0ff;
    font-size: .82rem;
    font-weight: 850;
}

.api-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    margin-top: 24px;
}

.api-request-grid > label:not(.api-builder-check) {
    display: grid;
    align-content: start;
    gap: 8px;
    color: #45546e;
    font-size: .84rem;
    font-weight: 800;
}

.api-request-grid input:not([type="checkbox"]),
.api-request-grid select,
.api-request-grid textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid #d7e1ee;
    border-radius: 14px;
    padding: 12px 14px;
    color: #13203a;
    background: rgba(255, 255, 255, .94);
    font: inherit;
    font-size: .94rem;
    font-weight: 600;
    outline: none;
    box-shadow: 0 3px 10px rgba(28, 47, 82, .035);
}

.api-request-grid textarea {
    min-height: 76px;
    resize: vertical;
}

.api-request-grid input:focus,
.api-request-grid select:focus,
.api-request-grid textarea:focus {
    border-color: #7055e9;
    box-shadow: 0 0 0 4px rgba(112, 85, 233, .11);
}

.api-request-wide {
    grid-column: 1 / -1;
}

.api-builder-check {
    display: flex;
    min-height: 74px;
    align-items: center;
    gap: 13px;
    border: 1px solid #d9e2f0;
    border-radius: 16px;
    padding: 14px 16px;
    color: #17243d;
    background: rgba(255, 255, 255, .82);
    cursor: pointer;
}

.api-builder-check input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    flex: 0 0 22px;
    margin: 0;
    padding: 0;
    accent-color: #6848ef;
}

.api-builder-check span {
    display: grid;
    gap: 3px;
}

.api-builder-check small {
    color: #718097;
    font-size: .78rem;
    font-weight: 600;
}

.api-request-builder details {
    margin-top: 20px;
    border: 1px solid #dbe4f0;
    border-radius: 17px;
    padding: 0 18px 18px;
    background: rgba(255, 255, 255, .66);
}

.api-request-builder summary {
    padding: 17px 0;
    color: #5540b7;
    font-weight: 850;
    cursor: pointer;
}

.api-request-builder details .api-request-grid {
    margin-top: 0;
}

.api-builder-product {
    margin-top: 22px;
    border: 1px solid #d9e4f0;
    border-radius: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, .78);
}

.api-builder-output {
    margin-top: 22px;
    overflow: hidden;
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    background: #111d33;
    box-shadow: 0 18px 38px rgba(12, 25, 47, .18);
}

.api-builder-output h3,
.api-builder-output .eyebrow {
    color: #fff;
}

.api-builder-output header > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.api-builder-output pre {
    max-height: 460px;
    overflow: auto;
    margin: 18px 0 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 18px;
    background: #0a1427;
}

.api-builder-output code {
    color: #dce8ff;
    font-size: .85rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.api-request-builder [hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .api-request-builder > header,
    .api-builder-output > header {
        display: grid;
    }

    .api-request-builder > header > span {
        width: fit-content;
    }

    .api-request-grid {
        grid-template-columns: 1fr;
    }

    .api-request-wide {
        grid-column: auto;
    }

    .api-builder-output header > div:last-child {
        justify-content: flex-start;
    }
}

/* Keep the page identity palette above the legacy neutral body rule. */
body.page-app,
body.page-csv,
body.page-history,
body.page-credit,
body.page-admin {
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--page-accent-rgb), .18), transparent 30%),
        radial-gradient(circle at 96% 20%, color-mix(in srgb, var(--page-accent-2) 16%, transparent), transparent 30%),
        linear-gradient(145deg, #eef4fb 0%, #f9fbff 48%, color-mix(in srgb, var(--page-accent-soft) 58%, #fff) 100%);
}

/* Form hierarchy: field labels and selected values must not look identical. */
.alina-shell .builder label:not(.inline-check),
.alina-shell .credit-panel label:not(.method-option),
.alina-shell .admin-panel label,
.page-login .auth-panel label {
    color: #64728a;
    font-size: .86rem;
    font-weight: 750;
    letter-spacing: .012em;
}

.alina-shell .builder label:not(.inline-check) > input,
.alina-shell .builder label:not(.inline-check) > select,
.alina-shell .builder label:not(.inline-check) > textarea,
.alina-shell .credit-panel label:not(.method-option) > input,
.alina-shell .credit-panel label:not(.method-option) > select,
.alina-shell .credit-panel label:not(.method-option) > textarea,
.alina-shell .admin-panel label > input,
.alina-shell .admin-panel label > select,
.alina-shell .admin-panel label > textarea,
.page-login .auth-panel label > input {
    border-color: #d7e0eb;
    color: #14213a;
    background-color: #fff;
    font-size: .97rem;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 3px 10px rgba(27, 46, 78, .035);
}

.alina-shell .builder label:not(.inline-check) > select,
.alina-shell .credit-panel label:not(.method-option) > select,
.alina-shell .admin-panel label > select {
    background-color: color-mix(in srgb, var(--page-accent-soft) 28%, #fff);
}

.alina-shell .builder label:not(.inline-check) > input::placeholder,
.alina-shell .builder label:not(.inline-check) > textarea::placeholder,
.alina-shell .credit-panel input::placeholder,
.alina-shell .admin-panel input::placeholder,
.alina-shell .admin-panel textarea::placeholder,
.page-login .auth-panel input::placeholder {
    color: #9aa7ba;
    font-weight: 500;
}

@media (max-width: 720px) {
    .alina-shell .workspace-head {
        min-height: 0;
        border-radius: 22px;
        padding: 20px;
    }

    .alina-shell .workspace-head h1 {
        font-size: clamp(1.75rem, 9vw, 2.35rem);
    }

    .page-app .builder,
    .page-app .side-status,
    .page-history .history-list,
    .page-history .history-detail,
    .page-credit .credit-panel,
    .page-admin .admin-panel,
    .page-admin .table-section {
        border-radius: 21px;
    }
}
/* Video credit claims */
.video-claim-btn {
    border-color: #f0a53a;
    background: #fff8e9;
    color: #a85c00;
}
.video-claim-btn:hover:not(:disabled) {
    background: #ffedc9;
}
.video-claim-btn:disabled {
    cursor: not-allowed;
    opacity: .72;
}
.video-claim-badge,
.claim-status {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.2;
}
.video-claim-badge.is-pending,
.claim-status.is-pending {
    background: #fff2cf;
    color: #915700;
}
.video-claim-badge.is-approved,
.claim-status.is-approved {
    background: #dcf8ed;
    color: #087b55;
}
.video-claim-badge.is-rejected,
.claim-status.is-rejected {
    background: #ffe4e9;
    color: #b32242;
}
.admin-claims-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.admin-claims-heading h2 {
    margin: 4px 0 8px;
}
.admin-claims-heading p {
    margin: 0;
    color: #6a7893;
}
.admin-claim-summary {
    display: flex;
    gap: 10px;
}
.admin-claim-summary span {
    min-width: 110px;
    padding: 12px 16px;
    border: 1px solid #ded8ff;
    border-radius: 16px;
    background: #f8f6ff;
    color: #5947b9;
    text-align: center;
}
.admin-claim-summary b {
    display: block;
    font-size: 1.3rem;
}
.admin-claims-table td {
    vertical-align: top;
}
.admin-claims-table td strong,
.admin-claims-table td small,
.admin-claims-table td a {
    display: block;
}
.admin-claims-table td p {
    min-width: 240px;
    max-width: 420px;
    margin: 0 0 6px;
    white-space: normal;
}
.admin-claim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 220px;
}
@media (max-width: 760px) {
    .admin-claims-heading {
        flex-direction: column;
    }
    .admin-claim-summary {
        width: 100%;
    }
    .admin-claim-summary span {
        flex: 1;
    }
}

/* admin-credit-report-v1 */
.admin-finance-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.admin-finance-heading h2 { margin: 4px 0 7px; }
.admin-finance-heading p { margin: 0; color: #6a7893; }
.admin-finance-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(135px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.admin-finance-summary article {
    padding: 16px;
    border: 1px solid #dce6f5;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #f5f9ff);
}
.admin-finance-summary span,
.admin-finance-summary small { display: block; color: #687793; }
.admin-finance-summary b { display: block; margin: 5px 0 1px; color: #10233e; font-size: 1.45rem; }
.admin-credit-report-table td { vertical-align: top; }
.admin-credit-report-table td strong,
.admin-credit-report-table td small { display: block; }
.admin-credit-report-table .is-credit-in { color: #05845e; }
.admin-credit-report-table .is-credit-out { color: #c43a58; }
.admin-credit-report-table .is-credit-balance { color: #1769d2; font-size: 1.08rem; }
.admin-topup-status {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: #edf2f8;
    color: #52627a;
    font-weight: 800;
}
.admin-topup-status.is-paid { background: #dcf8ed; color: #087b55; }
.admin-topup-status.is-pending { background: #fff2cf; color: #946200; }
.admin-topup-status.is-failed,
.admin-topup-status.is-cancelled { background: #ffe4e9; color: #b32242; }
@media (max-width: 1180px) {
    .admin-finance-summary { grid-template-columns: repeat(3, minmax(135px, 1fr)); }
}
@media (max-width: 680px) {
    .admin-finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* CartClip launch countdown 2026-08-03 */
.sp3-launch-countdown{margin:20px 0 4px;padding:18px 20px;border:1px solid rgba(45,212,191,.45);border-radius:22px;background:linear-gradient(135deg,rgba(11,42,70,.96),rgba(14,116,144,.9));box-shadow:0 18px 42px rgba(3,20,38,.22);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}
.sp3-launch-copy{display:grid;gap:4px}.sp3-launch-copy b{font-size:clamp(18px,2vw,25px);line-height:1.15;color:#67f6df}.sp3-launch-copy span{font-size:14px;color:#d9f7ff}
.sp3-countdown-cells{display:grid;grid-template-columns:repeat(4,minmax(58px,1fr));gap:8px}.sp3-countdown-cells>span{min-width:62px;padding:9px 8px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(2,18,35,.38);display:grid;text-align:center}.sp3-countdown-cells strong{font-variant-numeric:tabular-nums;font-size:24px;line-height:1;color:#fff}.sp3-countdown-cells small{margin-top:5px;font-size:11px;color:#bce9f1}
.sp3-launch-countdown.is-live{border-color:rgba(74,222,128,.6);background:linear-gradient(135deg,#064e3b,#0f766e)}
@media(max-width:720px){.sp3-launch-countdown{align-items:stretch;flex-direction:column;padding:16px}.sp3-countdown-cells{grid-template-columns:repeat(4,1fr)}.sp3-countdown-cells>span{min-width:0;padding:9px 4px}.sp3-countdown-cells strong{font-size:21px}}

/* HISTORY_STACKED_FULL_WIDTH_V1 */
.page-history .history-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
.page-history .history-list {
    min-height: 0;
}
.page-history .history-list:has(.history-campaign-picker) {
    width: 100%;
}
.page-history .history-detail {
    width: 100%;
    min-width: 0;
}
.page-history .history-campaign-options {
    max-height: min(42vh, 420px);
}

/* HISTORY_CLIP_RESPONSIVE_COLUMNS_V1 */
.page-history .history-detail {
    container-name: history-detail;
    container-type: inline-size;
}
.page-history .clip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
@container history-detail (max-width: 1280px) {
    .page-history .clip-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@container history-detail (max-width: 900px) {
    .page-history .clip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@container history-detail (max-width: 620px) {
    .page-history .clip-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* HISTORY_CAMPAIGN_OPTION_OVERFLOW_FIX_V1 */
.page-history .history-campaign-option {
    box-sizing: border-box;
    min-height: 72px;
    height: auto;
    overflow: hidden;
}
.page-history .history-campaign-option > span:first-child {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
.page-history .history-campaign-option strong,
.page-history .history-campaign-option small {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-history .history-campaign-option .history-platform-badges {
    align-self: center;
    flex-wrap: nowrap;
    margin: 0;
}


/* User product library: persisted by create_campaign and reusable in the builder. */
.saved-product-library{margin:0 0 22px;padding:20px;border:1px solid #bfe3dc;border-radius:24px;background:linear-gradient(145deg,#f0fdfa,#eff6ff);box-shadow:0 16px 38px rgba(15,23,42,.08)}
.saved-product-library-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}
.saved-product-library-head small{color:#0f9d8a;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.saved-product-library-head h3{margin:3px 0 4px;font-size:22px}.saved-product-library-head p{margin:0;color:#64748b;line-height:1.45}
.saved-product-search{display:grid;gap:6px;margin-bottom:14px}.saved-product-search span,.saved-product-card label>span{font-size:12px;font-weight:900;color:#334155}.saved-product-search input,.saved-product-card input{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:13px;background:#fff;padding:11px 12px;color:#0f172a;font:inherit;outline:none}.saved-product-search input:focus,.saved-product-card input:focus{border-color:#2f80ed;box-shadow:0 0 0 3px rgba(47,128,237,.12)}
.saved-product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.saved-product-card{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px;padding:14px;border:1px solid rgba(148,163,184,.35);border-radius:18px;background:#fff;min-width:0}.saved-product-summary{grid-column:1/-1;display:flex;align-items:center;gap:11px;min-width:0}.saved-product-summary img,.saved-product-summary>.media-fallback{width:64px;height:64px;flex:0 0 64px;border-radius:13px;object-fit:cover;background:#e2e8f0}.saved-product-summary div{display:grid;gap:4px;min-width:0}.saved-product-summary b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#10213d}.saved-product-summary small{color:#64748b}.saved-product-card label{display:grid;gap:5px;min-width:0}.saved-product-actions{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.saved-product-actions .danger{color:#b42318;border-color:#fecaca;background:#fff1f2}.saved-product-actions [data-saved-product-status]{font-size:12px;font-weight:900;color:#08785a}.saved-product-empty{grid-column:1/-1;padding:22px;border:1px dashed #94a3b8;border-radius:16px;text-align:center;color:#64748b}.saved-product-empty.is-error{color:#b42318;border-color:#fda4af}
@media(max-width:780px){.saved-product-library{padding:14px;border-radius:18px}.saved-product-library-head{align-items:stretch;flex-direction:column}.saved-product-list{grid-template-columns:1fr}.saved-product-card{grid-template-columns:1fr}.saved-product-summary,.saved-product-actions{grid-column:1}.saved-product-card input{font-size:16px}}


/* Saved product library v3: reliable images and collapsible panel. */
.saved-product-library-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.saved-product-toggle{min-width:70px}
.saved-product-library-body[hidden],[data-saved-product-body][hidden]{display:none!important}
.saved-product-library.is-collapsed{padding-bottom:14px}
.saved-product-library.is-collapsed .saved-product-library-head{margin-bottom:0;align-items:center}
.saved-product-library.is-collapsed .saved-product-library-head p{display:none}
.saved-product-thumb{position:relative;width:72px;height:72px;flex:0 0 72px;border-radius:15px;overflow:hidden;background:linear-gradient(145deg,#dbeafe,#ccfbf1);border:1px solid #cbd5e1}
.saved-product-thumb img{display:block;width:100%;height:100%;object-fit:cover;background:#e2e8f0}
/* SAVED_PRODUCT_IMAGE_PREVIEW_V1: make stored product images visibly clickable. */
.products-library-page .saved-product-thumb{cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.products-library-page .saved-product-thumb img{transition:transform .18s ease}
.products-library-page .saved-product-thumb:hover{transform:translateY(-1px);border-color:#60a5fa;box-shadow:0 8px 18px rgba(37,99,235,.2)}
.products-library-page .saved-product-thumb:hover img:not([hidden]){transform:scale(1.06)}
.products-library-page .saved-product-thumb:focus-visible{outline:3px solid rgba(37,99,235,.34);outline-offset:3px;border-color:#2563eb}
.saved-product-image-fallback{display:grid;width:100%;height:100%;place-content:center;text-align:center;color:#55708d;background:linear-gradient(145deg,#eff6ff,#ecfdf5)}
.saved-product-image-fallback b{font-size:25px;line-height:1}.saved-product-image-fallback small{font-size:10px;font-weight:900;margin-top:3px}
.saved-product-image-upload{display:inline-flex!important;align-items:center!important;justify-content:center;width:max-content;margin-top:3px;cursor:pointer}
.saved-product-image-upload input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.saved-product-image-upload span{display:inline-flex!important;align-items:center;border:1px solid #bfdbfe;border-radius:999px;background:#eff6ff;color:#1769c2!important;padding:5px 10px;font-size:11px!important;font-weight:900}
.saved-product-image-upload:hover span{background:#dbeafe}
@media(max-width:780px){.saved-product-library-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}.saved-product-library-head-actions{align-self:start}.saved-product-library-head p{grid-column:1/-1}.saved-product-library.is-collapsed .saved-product-library-head{display:grid;grid-template-columns:minmax(0,1fr) auto}.saved-product-thumb{width:66px;height:66px;flex-basis:66px}}


/* Dedicated Products page: the reusable library no longer lives inside Create. */
.products-page{width:min(1240px,100%);margin:0 auto}
.products-workspace-head{align-items:center}
.products-workspace-head p:not(.eyebrow){max-width:760px;margin:8px 0 0;color:#64748b;line-height:1.55}
.products-library-page{min-height:360px}
.products-library-page>.saved-product-library{margin:0;padding:24px;background:linear-gradient(145deg,#f0fdfa 0%,#eff6ff 58%,#fff 100%)}
.products-library-page .saved-product-list{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.products-page{width:100%}.products-workspace-head{align-items:flex-start}.products-library-page .saved-product-list{grid-template-columns:1fr}}

/* PRODUCTS_PAGE_NAV_VISIBILITY_V1
   The dedicated products route must define the accent tokens used by the
   shared active-navigation rule. Without these variables Chrome keeps the
   white active text but drops the invalid gradient, making the item vanish. */
.page-products {
    --page-accent: #2768f1;
    --page-accent-2: #17bfa9;
    --page-accent-soft: #e7f0ff;
    --page-accent-rgb: 39, 104, 241;
}
.page-products .alina-shell .side-nav a:not(.apk-download).active {
    color: #fff;
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
    box-shadow: 0 12px 25px rgba(var(--page-accent-rgb), .25);
}
.page-products .alina-shell .side-nav a:not(.apk-download).active i {
    color: #fff;
}

/* Products page only: editable product copy and create-one-clip confirmation. */
.products-library-page .saved-product-card textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:13px;background:#fff;padding:11px 12px;color:#0f172a;font:inherit;outline:none;resize:vertical;min-height:104px;line-height:1.5}.products-library-page .saved-product-card textarea:focus{border-color:#2f80ed;box-shadow:0 0 0 3px rgba(47,128,237,.12)}
.products-library-page .saved-product-name-field,.products-library-page .saved-product-detail-field{grid-column:1/-1}.products-library-page .saved-product-name-field input{font-weight:850;color:#10213d}.products-library-page .saved-product-actions .primary-btn{background:linear-gradient(135deg,#2f80ed,#16b7aa);box-shadow:0 10px 22px rgba(47,128,237,.2)}.products-library-page .saved-product-actions button:disabled{opacity:.55;cursor:wait}
/* SAVED_PRODUCT_BATCH_CREATE_V1: select up to 20 products on the Products page. */
.products-library-page .saved-product-batch-toolbar{position:sticky;top:10px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:13px 15px;border:1px solid #99d8d0;border-radius:16px;background:rgba(240,253,250,.96);box-shadow:0 10px 25px rgba(15,118,110,.12);backdrop-filter:blur(8px)}
.products-library-page .saved-product-batch-toolbar>div:first-child{display:grid;gap:3px}.products-library-page .saved-product-batch-toolbar b{color:#0f4f4b}.products-library-page .saved-product-batch-toolbar span{font-size:12px;color:#52706d}.products-library-page .saved-product-batch-toolbar strong{color:#047857}.products-library-page .saved-product-batch-actions{display:flex;align-items:center;gap:8px}.products-library-page .saved-product-batch-actions button:disabled{opacity:.5;cursor:not-allowed}
.products-library-page .saved-product-card{position:relative;padding-top:53px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.products-library-page .saved-product-card.is-selected{border-color:#14b8a6;box-shadow:0 0 0 3px rgba(20,184,166,.14),0 15px 30px rgba(15,118,110,.12);transform:translateY(-1px)}
.products-library-page .saved-product-selector{position:absolute;top:12px;left:14px;display:inline-flex!important;grid-template-columns:auto auto!important;align-items:center;gap:7px!important;width:max-content;cursor:pointer}.products-library-page .saved-product-selector input{width:22px!important;height:22px;margin:0;accent-color:#10b981}.products-library-page .saved-product-selector span{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid #bfdbfe;border-radius:999px;background:#eff6ff;color:#1769c2!important;font-size:12px!important}.products-library-page .saved-product-card.is-selected .saved-product-selector span{border-color:#6ee7b7;background:#d1fae5;color:#047857!important}
/* SAVED_PRODUCT_FILLED_GREEN_V1: show which reusable identifiers are already stored. */
.products-library-page .saved-product-link-field.is-filled>span{color:#047857}
.products-library-page .saved-product-link-field.is-filled input{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#f0fdfa);color:#065f46;font-weight:800;box-shadow:0 0 0 2px rgba(16,185,129,.13)}
.products-library-page .saved-product-link-field.is-filled input:focus{border-color:#059669;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.saved-product-create-swal{display:flex!important;flex-direction:column!important;height:min(92vh,900px);max-height:92vh;overflow:hidden!important}.saved-product-create-swal .swal2-title{flex:0 0 auto;min-height:0}.saved-product-create-swal .swal2-html-container{flex:1 1 auto;margin:0!important;padding:0 22px 14px!important;min-height:0!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}.saved-product-create-swal .swal2-actions{flex:0 0 auto;margin:12px auto 18px!important}.saved-product-create-modal{text-align:left;color:#10213d;padding-bottom:6px}.saved-product-create-product{display:flex;align-items:center;gap:13px;margin:0 0 16px;padding:12px;border:1px solid #cfe1f7;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#ecfdf5)}.saved-product-create-product>img,.saved-product-create-product>span{width:72px;height:72px;flex:0 0 72px;border-radius:13px;object-fit:cover;background:#dbeafe;display:grid;place-items:center;color:#64748b;font-size:12px}.saved-product-create-product>div{display:grid;gap:4px;min-width:0}.saved-product-create-product b{font-size:17px;line-height:1.35}.saved-product-create-product small{color:#64748b;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.saved-product-create-selection-summary{display:grid;gap:10px;margin:0 0 16px;padding:13px;border:1px solid #99d8d0;border-radius:16px;background:linear-gradient(135deg,#ecfdf5,#eff6ff)}.saved-product-create-selection-summary>b{color:#075f55}.saved-product-create-selection-summary>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:190px;overflow:auto}.saved-product-create-selection-summary span{display:grid;grid-template-columns:24px 42px minmax(0,1fr);align-items:center;gap:7px;padding:6px;border:1px solid #dbeafe;border-radius:11px;background:#fff}.saved-product-create-selection-summary strong{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d1fae5;color:#047857;font-size:11px}.saved-product-create-selection-summary img,.saved-product-create-selection-summary i{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#e2e8f0;display:grid;place-items:center;font-style:normal}.saved-product-create-selection-summary em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-size:12px;font-weight:800}.saved-product-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.saved-product-create-grid label{display:grid;gap:6px;min-width:0}.saved-product-create-grid label.wide{grid-column:1/-1}.saved-product-create-grid label>span{font-size:13px;font-weight:900;color:#334155}.saved-product-create-grid input:not([type=checkbox]),.saved-product-create-grid select,.saved-product-create-grid textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:13px;background:#fff;padding:11px 12px;color:#0f172a;font:inherit;outline:none}.saved-product-create-grid textarea{resize:vertical;line-height:1.5}.saved-product-create-grid input:focus,.saved-product-create-grid select:focus,.saved-product-create-grid textarea:focus{border-color:#2f80ed;box-shadow:0 0 0 3px rgba(47,128,237,.12)}.saved-product-create-check{display:flex!important;grid-template-columns:auto 1fr;align-items:center;padding:12px;border:1px solid #cbd5e1;border-radius:13px;background:#f8fafc}.saved-product-create-check input{width:22px!important;height:22px;margin:0;accent-color:#16a394}.saved-product-create-check span{align-self:center}
@media(max-width:700px){.products-library-page .saved-product-batch-toolbar{position:static;align-items:stretch;flex-direction:column}.products-library-page .saved-product-batch-actions>*{flex:1}.saved-product-create-swal{width:calc(100vw - 18px)!important;height:94vh;max-height:94vh}.saved-product-create-swal .swal2-html-container{padding:0 12px 10px!important}.saved-product-create-grid{grid-template-columns:1fr}.saved-product-create-grid label.wide{grid-column:1}.saved-product-create-product>img,.saved-product-create-product>span{width:60px;height:60px;flex-basis:60px}.saved-product-create-selection-summary>div{grid-template-columns:1fr}}


/* ADMIN_USER_FINANCE_ANALYTICS_V1 */
.page-admin .admin-insights {
    margin: 0 0 24px;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid rgba(77, 95, 255, .16);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(16, 185, 164, .14), transparent 32%),
        linear-gradient(145deg, #fff, #f7f9ff 58%, #f2fffc);
    box-shadow: 0 22px 55px rgba(22, 35, 74, .1);
}
.page-admin .admin-insights-head,
.page-admin .admin-chart-card > header,
.page-admin .admin-ranking-card > header,
.page-admin .admin-user-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.page-admin .admin-insights-head h2,
.page-admin .admin-user-list-head h2 { margin: 4px 0 8px; font-size: clamp(24px, 2vw, 34px); }
.page-admin .admin-insights-head p,
.page-admin .admin-user-list-head p { margin: 0; color: #71809a; }
.page-admin .admin-insights-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.page-admin .admin-insights-head-actions > span { color: #71809a; font-size: 13px; }
.page-admin .admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}
.page-admin .admin-kpi-grid article {
    min-width: 0;
    padding: 18px;
    border: 1px solid #e3e9f7;
    border-radius: 20px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 24px rgba(31, 48, 84, .06);
}
.page-admin .admin-kpi-grid article.is-money { border-color: rgba(0, 166, 142, .28); background: linear-gradient(145deg, #f4fffb, #fff); }
.page-admin .admin-kpi-grid article.is-video { border-color: rgba(62, 91, 255, .28); background: linear-gradient(145deg, #f4f6ff, #fff); }
.page-admin .admin-kpi-grid span { display: block; color: #63718a; font-weight: 800; font-size: 13px; }
.page-admin .admin-kpi-grid b { display: block; overflow: hidden; margin: 8px 0 4px; color: #13213c; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.05; text-overflow: ellipsis; }
.page-admin .admin-kpi-grid article.is-money b { color: #078a75; }
.page-admin .admin-kpi-grid article.is-video b { color: #365eea; }
.page-admin .admin-kpi-grid small { color: #7c899f; line-height: 1.45; }
.page-admin .admin-insights-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 16px; margin-top: 16px; }
.page-admin .admin-chart-card,
.page-admin .admin-ranking-card { min-width: 0; padding: 20px; border: 1px solid #e1e8f5; border-radius: 22px; background: #fff; }
.page-admin .admin-chart-card h3,
.page-admin .admin-ranking-card h3 { margin: 0 0 4px; font-size: 19px; }
.page-admin .admin-chart-card header p,
.page-admin .admin-ranking-card header p { margin: 0; color: #8490a6; font-size: 13px; }
.page-admin .admin-ranking-card > header > span { padding: 7px 10px; border-radius: 999px; background: #eef2ff; color: #475bd8; font-size: 12px; font-weight: 800; }
.page-admin .admin-chart-legend { display: flex; gap: 12px; color: #6e7b92; font-size: 12px; font-weight: 800; }
.page-admin .admin-chart-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; }
.page-admin .admin-chart-legend .is-topup::before { background: #13b89f; }
.page-admin .admin-chart-legend .is-video::before { background: #5a6cff; }
.page-admin .admin-daily-chart { display: grid; grid-template-columns: repeat(30, minmax(10px, 1fr)); gap: 5px; min-height: 250px; margin-top: 18px; padding: 14px 8px 0; border-radius: 18px; background: repeating-linear-gradient(to top, #f0f3fa 0 1px, transparent 1px 25%); overflow-x: auto; }
.page-admin .admin-chart-day { display: grid; grid-template-rows: 210px 24px; min-width: 10px; align-items: end; cursor: help; }
.page-admin .admin-chart-bars { display: flex; height: 100%; align-items: flex-end; justify-content: center; gap: 2px; }
.page-admin .admin-chart-bars i { display: block; width: 42%; min-height: 3px; border-radius: 5px 5px 1px 1px; transition: filter .2s ease; }
.page-admin .admin-chart-bars i.is-topup { background: linear-gradient(#20cfb3, #06957e); }
.page-admin .admin-chart-bars i.is-video { background: linear-gradient(#7684ff, #4558e8); }
.page-admin .admin-chart-day:hover i { filter: brightness(1.08); }
.page-admin .admin-chart-day small { display: block; color: #8b97aa; font-size: 9px; text-align: center; transform: rotate(-38deg); transform-origin: 50% 50%; white-space: nowrap; }
.page-admin .admin-ranking-extremes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.page-admin .admin-ranking-extremes > div { min-width: 0; padding: 13px; border-radius: 16px; background: #f5f8ff; }
.page-admin .admin-ranking-extremes > div.is-high { background: #ebfff9; }
.page-admin .admin-ranking-extremes > div.is-low { background: #fff8e9; }
.page-admin .admin-ranking-extremes span,
.page-admin .admin-ranking-extremes small { display: block; color: #71809a; font-size: 11px; }
.page-admin .admin-ranking-extremes b { display: block; overflow: hidden; margin: 5px 0; color: #17233c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.page-admin .admin-ranking-list { display: grid; gap: 9px; }
.page-admin .admin-ranking-list > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.page-admin .admin-ranking-list > div > strong { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: #edf1ff; color: #4c60e7; font-size: 11px; }
.page-admin .admin-ranking-list > div > span { min-width: 0; }
.page-admin .admin-ranking-list > div > span > b,
.page-admin .admin-ranking-list > div > span > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-admin .admin-ranking-list > div > span > b { color: #24304a; font-size: 12px; }
.page-admin .admin-ranking-list > div > span > small { color: #8a96aa; font-size: 10px; }
.page-admin .admin-ranking-list > div > span > i { display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #eef1f6; }
.page-admin .admin-ranking-list > div > span > i > em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14b99f, #5c6cff); }
.page-admin .admin-ranking-list > div > b { color: #088d77; font-size: 12px; white-space: nowrap; }
.page-admin .admin-insights-empty { margin: 16px 0 0; color: #8b97aa; text-align: center; }
.page-admin .admin-daily-details { margin-top: 16px; border: 1px solid #e1e8f5; border-radius: 20px; background: #fff; overflow: hidden; }
.page-admin .admin-daily-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; cursor: pointer; font-weight: 900; }
.page-admin .admin-daily-details summary small { color: #7d899e; font-weight: 600; }
.page-admin .admin-daily-details[open] summary { border-bottom: 1px solid #e7ebf4; }
.page-admin .admin-daily-details .table-wrap { max-height: 440px; }
.page-admin .admin-user-list-head { margin-bottom: 16px; }
.page-admin #admin-user-list { scroll-margin-top: 100px; }

@media (max-width: 1180px) {
    .page-admin .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-admin .admin-insights-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .page-admin .admin-insights { padding: 16px; border-radius: 22px; }
    .page-admin .admin-insights-head,
    .page-admin .admin-user-list-head { display: grid; }
    .page-admin .admin-insights-head-actions { justify-content: flex-start; }
    .page-admin .admin-kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .page-admin .admin-kpi-grid article { padding: 14px; border-radius: 16px; }
    .page-admin .admin-kpi-grid b { font-size: 23px; }
    .page-admin .admin-ranking-extremes { grid-template-columns: 1fr; }
    .page-admin .admin-daily-details summary { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 430px) {
    .page-admin .admin-kpi-grid { grid-template-columns: 1fr; }
}


/* ADMIN_CUSTOMER_CLIP_FINANCE_V1 */
.page-admin .admin-clip-finance{display:grid;gap:18px;margin:0 0 24px;padding:clamp(18px,3vw,30px);border:1px solid rgba(62,91,255,.16);border-radius:28px;background:radial-gradient(circle at 100% 0,rgba(32,207,179,.14),transparent 30%),linear-gradient(145deg,#fff,#f7f9ff 60%,#f1fffb);box-shadow:0 22px 55px rgba(22,35,74,.1)}
.page-admin .admin-clip-finance[hidden]{display:none!important}
.page-admin .admin-clip-finance-head,.page-admin .admin-customer-clips>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.page-admin .admin-clip-finance-head h2{margin:4px 0 7px;font-size:clamp(25px,2.3vw,36px)}
.page-admin .admin-clip-finance-head p,.page-admin .admin-customer-clips>header p{margin:0;color:#71809a}
.page-admin .admin-clip-provider-card{display:grid;min-width:250px;gap:4px;padding:15px 17px;border:1px solid #b9eade;border-radius:18px;background:rgba(239,255,250,.9)}
.page-admin .admin-clip-provider-card span{color:#607189;font-size:12px;font-weight:800}
.page-admin .admin-clip-provider-card b{color:#087b6a;font-size:20px}
.page-admin .admin-clip-provider-card small{color:#6e7d91}
.page-admin .admin-clip-filter{display:grid;grid-template-columns:minmax(180px,230px) minmax(250px,1fr) auto auto;gap:12px;align-items:end;padding:15px;border:1px solid #dfe6f4;border-radius:20px;background:#fff}
.page-admin .admin-clip-filter label{display:grid;gap:6px;color:#43506a;font-size:13px;font-weight:900}
.page-admin .admin-clip-filter input,.page-admin .admin-clip-filter select{width:100%;min-height:46px;border:1px solid #cdd7e8;border-radius:13px;background:#fff;padding:9px 12px;color:#17233c;font:inherit}
.page-admin .admin-clip-filter .primary-btn,.page-admin .admin-clip-filter .ghost-btn{min-height:46px;white-space:nowrap}
.page-admin .admin-clip-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.page-admin .admin-clip-kpis article{min-width:0;padding:17px;border:1px solid #e1e7f2;border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(34,47,80,.05)}
.page-admin .admin-clip-kpis span{display:block;color:#66758c;font-size:12px;font-weight:900}
.page-admin .admin-clip-kpis b{display:block;margin:7px 0 3px;overflow:hidden;color:#1e2a43;font-size:clamp(23px,2vw,32px);line-height:1.05;text-overflow:ellipsis}
.page-admin .admin-clip-kpis small{color:#8995a8}
.page-admin .admin-clip-kpis .is-gross{border-color:#b8d1ff;background:#f5f8ff}.page-admin .admin-clip-kpis .is-gross b{color:#345dd5}
.page-admin .admin-clip-kpis .is-refund{border-color:#fed7aa;background:#fff9ef}.page-admin .admin-clip-kpis .is-refund b{color:#c06513}
.page-admin .admin-clip-kpis .is-net{border-color:#bdd9ff;background:#f5faff}.page-admin .admin-clip-kpis .is-net b{color:#2163b8}
.page-admin .admin-clip-kpis .is-cost{border-color:#ddd6fe;background:#faf8ff}.page-admin .admin-clip-kpis .is-cost b{color:#7048c5}
.page-admin .admin-clip-kpis .is-profit{border-color:#a7e8d8;background:#f0fff9}.page-admin .admin-clip-kpis .is-profit b{color:#078465}
.page-admin .admin-clip-kpis .is-loss{border-color:#fecaca;background:#fff5f5}.page-admin .admin-clip-kpis .is-loss b{color:#c83a48}
.page-admin .admin-clip-report-grid{display:grid;gap:12px}
.page-admin .admin-clip-report{border:1px solid #dfe6f2;border-radius:19px;background:#fff;overflow:hidden}
.page-admin .admin-clip-report summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;color:#26334d;font-weight:900;list-style:none}
.page-admin .admin-clip-report summary::-webkit-details-marker{display:none}
.page-admin .admin-clip-report summary:after{content:'＋';display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;border-radius:9px;background:#eef2ff;color:#5265df}
.page-admin .admin-clip-report[open] summary:after{content:'−'}
.page-admin .admin-clip-report summary small{margin-left:auto;color:#8793a7;font-weight:600}
.page-admin .admin-clip-report[open] summary{border-bottom:1px solid #e8ecf4}
.page-admin .admin-clip-report .table-wrap{max-height:520px}
.page-admin .admin-clip-report td small{display:block;color:#8692a5}
.page-admin .money-positive{color:#078465!important}.page-admin .money-negative{color:#c83a48!important}
.page-admin .admin-customer-clips{display:grid;gap:15px;padding-top:3px;scroll-margin-top:100px}
.page-admin .admin-customer-clips>header h3{margin:3px 0 5px;font-size:24px}
.page-admin .admin-customer-clips>header>span{padding:8px 11px;border-radius:999px;background:#eef2ff;color:#4d5fd6;font-size:12px;font-weight:900;white-space:nowrap}
.page-admin .admin-customer-clip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.page-admin .admin-customer-clip-card{display:grid;grid-template-columns:138px minmax(0,1fr);min-width:0;overflow:hidden;border:1px solid #dfe5f0;border-radius:20px;background:#fff;box-shadow:0 10px 25px rgba(29,43,75,.07)}
.page-admin .admin-customer-clip-video{position:relative;min-height:244px;background:#0b1325}
.page-admin .admin-customer-clip-video video{display:block;width:100%;height:100%;min-height:244px;aspect-ratio:9/16;object-fit:contain;background:#050a13}
.page-admin .admin-customer-clip-video>span{position:absolute;top:8px;left:8px;padding:4px 7px;border-radius:8px;background:rgba(8,16,32,.78);color:#fff;font-size:10px;font-weight:900;pointer-events:none}
.page-admin .admin-customer-clip-body{display:flex;min-width:0;flex-direction:column;gap:9px;padding:13px}
.page-admin .admin-customer-clip-badges{display:flex;gap:6px;flex-wrap:wrap}.page-admin .admin-customer-clip-badges span{padding:4px 7px;border-radius:999px;background:#edf2ff;color:#4359ca;font-size:10px;font-weight:900}.page-admin .admin-customer-clip-badges span+span{background:#eafbf6;color:#087b68}
.page-admin .admin-customer-clip-body h4{display:-webkit-box;margin:0;overflow:hidden;color:#1a2740;font-size:14px;line-height:1.42;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.page-admin .admin-customer-clip-body>p{margin:0;min-width:0}.page-admin .admin-customer-clip-body>p strong,.page-admin .admin-customer-clip-body>p small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-admin .admin-customer-clip-body>p strong{color:#34415a;font-size:12px}.page-admin .admin-customer-clip-body>p small{color:#8995a8;font-size:10px}
.page-admin .admin-customer-clip-money{display:grid;grid-template-columns:1fr 1fr;gap:6px}.page-admin .admin-customer-clip-money>span{min-width:0;padding:7px;border-radius:10px;background:#f6f8fc}.page-admin .admin-customer-clip-money small,.page-admin .admin-customer-clip-money b{display:block}.page-admin .admin-customer-clip-money small{color:#8290a5;font-size:9px}.page-admin .admin-customer-clip-money b{margin-top:2px;color:#26344d;font-size:13px}
.page-admin .admin-customer-clip-body footer{display:grid;gap:5px;margin-top:auto}.page-admin .admin-customer-clip-body footer small{overflow:hidden;color:#8a96a8;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.page-admin .admin-customer-clip-body footer a{color:#345ed7;font-size:11px;font-weight:900;text-decoration:none}
.page-admin .admin-clip-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-top:5px}.page-admin .admin-clip-pagination>:last-child{justify-self:end}.page-admin .admin-clip-pagination b{color:#526078;font-size:13px}
@media(max-width:1280px){.page-admin .admin-customer-clip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.page-admin .admin-clip-filter{grid-template-columns:1fr 1fr}.page-admin .admin-clip-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.page-admin .admin-customer-clip-card{grid-template-columns:126px minmax(0,1fr)}}
@media(max-width:680px){.page-admin .admin-clip-finance{padding:15px;border-radius:21px}.page-admin .admin-clip-finance-head,.page-admin .admin-customer-clips>header{display:grid}.page-admin .admin-clip-provider-card{min-width:0}.page-admin .admin-clip-filter{grid-template-columns:1fr}.page-admin .admin-clip-kpis{grid-template-columns:1fr 1fr}.page-admin .admin-clip-report summary{align-items:flex-start;flex-wrap:wrap}.page-admin .admin-clip-report summary small{order:3;width:100%;margin-left:0}.page-admin .admin-customer-clip-grid{grid-template-columns:1fr}.page-admin .admin-customer-clip-card{grid-template-columns:118px minmax(0,1fr)}.page-admin .admin-customer-clip-video,.page-admin .admin-customer-clip-video video{min-height:210px}.page-admin .admin-clip-pagination{grid-template-columns:1fr 1fr}.page-admin .admin-clip-pagination b{grid-column:1/-1;grid-row:1;text-align:center}.page-admin .admin-clip-pagination a{grid-row:2}}
@media(max-width:430px){.page-admin .admin-clip-kpis{grid-template-columns:1fr}.page-admin .admin-customer-clip-card{grid-template-columns:105px minmax(0,1fr)}.page-admin .admin-customer-clip-money{grid-template-columns:1fr}.page-admin .admin-customer-clip-video,.page-admin .admin-customer-clip-video video{min-height:187px}}
/* KIE_ACTUAL_COST_ADMIN_V3 */
.page-admin .admin-kie-coverage{display:grid;gap:4px;padding:13px 16px;border:1px solid #b8eadb;border-radius:15px;background:#f0fff9;color:#176b59;font-size:13px}
.page-admin .admin-kie-coverage.is-partial{border-color:#fed7aa;background:#fff9ef;color:#94510f}
.page-admin .admin-kie-coverage small{color:inherit;opacity:.8}
.page-admin .admin-customer-clip-badges .coverage-complete{background:#dcfce7;color:#087443}
.page-admin .admin-customer-clip-badges .coverage-partial{background:#fff1d6;color:#a3570b}
.page-admin .admin-customer-clip-badges .coverage-missing{background:#fee2e2;color:#b42332}
.page-admin .admin-kie-components{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.page-admin .admin-kie-components span{min-width:0;padding:7px 5px;border:1px solid #e5e9f3;border-radius:9px;background:#fbfcff;text-align:center}
.page-admin .admin-kie-components small,.page-admin .admin-kie-components b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-admin .admin-kie-components small{color:#8591a4;font-size:8px}.page-admin .admin-kie-components b{margin-top:2px;color:#5141a5;font-size:10px}


/* SAVED_PRODUCT_ADVANCED_FACE_REFERENCE_V1 */
.saved-product-create-advanced {
    margin: 0 0 16px;
    overflow: hidden;
    border: 1px solid #c9b8ff;
    border-radius: 18px;
    background: linear-gradient(145deg, #faf7ff, #f4f8ff);
    box-shadow: 0 8px 22px rgba(106, 76, 210, .08);
}
.saved-product-create-advanced > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 68px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.saved-product-create-advanced > summary::-webkit-details-marker { display: none; }
.saved-product-create-advanced > summary span { display: grid; gap: 3px; min-width: 0; }
.saved-product-create-advanced > summary b { color: #3f277d; font-size: 16px; }
.saved-product-create-advanced > summary small { color: #746a8c; font-size: 12px; }
.saved-product-create-advanced > summary i {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    color: #6e3bd4;
    background: #eee6ff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}
.saved-product-create-advanced[open] > summary { border-bottom: 1px solid #ded3f7; }
.saved-product-create-advanced[open] > summary i { color: #fff; background: #7041d9; }
.saved-product-create-advanced[open] > summary i::before { content: 'กำลังตั้งค่า · '; }
.saved-product-create-advanced-grid { padding: 15px; }
.saved-product-create-basic-grid { margin-top: 0; }
.saved-product-face-reference {
    grid-column: 1 / -1;
    display: grid;
    gap: 11px;
    padding: 14px;
    border: 1px solid #a8d8d0;
    border-radius: 16px;
    background: linear-gradient(145deg, #effdfa, #f7fbff);
}
.saved-product-face-reference.is-disabled { opacity: .62; filter: grayscale(.15); }
.saved-product-face-reference-head { display: grid; gap: 4px; }
.saved-product-face-reference-head > span { color: #115e59; font-size: 14px; font-weight: 950; }
.saved-product-face-reference-head > small { color: #597579; line-height: 1.45; }
.saved-product-face-reference-control { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.saved-product-face-reference-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    grid-row: span 2;
    overflow: hidden;
    border: 1px dashed #75bdb2;
    border-radius: 16px;
    background: #fff;
}
.saved-product-face-reference-preview img { width: 100%; height: 100%; object-fit: cover; }
.saved-product-face-reference-preview img[hidden],
.saved-product-face-reference-preview [hidden] { display: none !important; }
.saved-product-face-reference-preview > span { padding: 10px; color: #6b7e85; text-align: center; font-size: 12px; font-weight: 800; }
.saved-product-face-reference-preview button {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: auto;
    min-height: 0;
    padding: 5px 8px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: rgba(190, 24, 93, .9);
    box-shadow: none;
    font-size: 11px;
}
.saved-product-face-upload { display: inline-flex !important; align-items: center; justify-content: center; width: max-content; padding: 10px 15px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #168f80, #2f80ed); cursor: pointer; font-weight: 900; }
.saved-product-face-upload > span { color: #fff !important; }
.saved-product-face-upload input { display: none !important; }
.saved-product-face-upload:has(input:disabled) { cursor: not-allowed; opacity: .52; }
[data-sp-create-face-status] { color: #557078; line-height: 1.5; }

@media (max-width: 700px) {
    .saved-product-create-advanced > summary { align-items: flex-start; }
    .saved-product-create-advanced > summary i { white-space: nowrap; }
    .saved-product-face-reference-control { grid-template-columns: 92px minmax(0, 1fr); }
    .saved-product-face-reference-preview { width: 86px; height: 98px; }
}
.admin-story-job-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));gap:22px;margin-top:20px}.admin-story-job-card{display:grid;grid-template-columns:minmax(190px,230px) minmax(0,1fr);overflow:hidden;border:1px solid #dce6f3;border-radius:28px;background:#fff;box-shadow:0 18px 44px rgba(15,34,67,.09)}.admin-story-video-shell{background:#071323;min-height:365px}.admin-story-video-shell video{display:block;width:100%;height:100%;min-height:365px;max-height:520px;object-fit:cover;background:#000}.admin-story-video-empty{height:100%;min-height:365px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#cbd5e1;text-align:center}.admin-story-video-empty span{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#16263b;color:#53e0c1}.admin-story-video-empty small{color:#7f91a9}.admin-story-job-body{min-width:0;padding:22px}.admin-story-job-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.admin-story-job-title p{margin:0 0 5px;color:#718096;font-size:.82rem}.admin-story-job-title h4{margin:0;color:#0f2140;font-size:1.16rem;line-height:1.35;overflow-wrap:anywhere}.admin-story-customer{display:flex;flex-direction:column;gap:3px;margin:14px 0;color:#223554}.admin-story-customer span{font-size:.82rem;color:#72819a;overflow-wrap:anywhere}.admin-story-money-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.admin-story-money-grid>span{min-width:0;padding:10px;border-radius:15px;background:#f5f8fc}.admin-story-money-grid small,.admin-story-money-grid em{display:block;color:#718096;font-size:.72rem;font-style:normal}.admin-story-money-grid b{display:block;margin:3px 0;color:#122745;font-size:1rem}.admin-story-money-grid .is-profit{background:#e9fbf4}.admin-story-money-grid .is-profit b{color:#087d5b}.admin-story-money-grid .is-loss{background:#fff0f2}.admin-story-money-grid .is-loss b{color:#b22f45}.admin-story-cost-detail{margin-top:14px;border:1px solid #dce8f5;border-radius:18px;background:#f9fbfe}.admin-story-cost-detail summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;color:#142a49}.admin-story-cost-detail summary b{font-size:.85rem;color:#0b8c72;text-align:right}.admin-story-fixed-costs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 12px}.admin-story-fixed-costs span{padding:10px;border-radius:13px;background:#fff;border:1px solid #e4edf7}.admin-story-fixed-costs small,.admin-story-fixed-costs em{display:block;color:#74839a;font-size:.75rem;font-style:normal}.admin-story-fixed-costs b{color:#132844}.admin-story-scene-costs{list-style:none;margin:0;padding:0 14px 14px;display:grid;gap:7px}.admin-story-scene-costs li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#fff}.admin-story-scene-costs li span,.admin-story-scene-costs li strong{display:flex;flex-direction:column}.admin-story-scene-costs li>strong{text-align:right;color:#122745}.admin-story-scene-costs small{color:#76859a;font-size:.74rem}.admin-story-scene-costs .is-empty{display:block;text-align:center;color:#718096}.admin-story-open-video{display:inline-flex;margin-top:13px}@media(max-width:900px){.admin-story-job-card{grid-template-columns:1fr}.admin-story-video-shell,.admin-story-video-shell video,.admin-story-video-empty{min-height:440px;max-height:660px}.admin-story-money-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.admin-story-video-shell,.admin-story-video-shell video,.admin-story-video-empty{min-height:480px}.admin-story-job-body{padding:16px}.admin-story-job-title{flex-direction:column}.admin-story-money-grid{grid-template-columns:1fr 1fr}.admin-story-fixed-costs{grid-template-columns:1fr}.admin-story-cost-detail summary{align-items:flex-start;flex-direction:column}}
.page-admin .admin-api-settings {
    display: grid;
    gap: 24px;
}
.page-admin .admin-api-settings[hidden] { display: none !important; }
.admin-api-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}
.admin-api-settings-head h2 { margin: 4px 0 8px; }
.admin-api-settings-head p { margin: 0; color: #68758d; line-height: 1.65; }
.admin-api-security-note {
    display: grid;
    gap: 5px;
    min-width: min(100%, 320px);
    padding: 15px 17px;
    border: 1px solid #c9daf7;
    border-radius: 16px;
    color: #264b86;
    background: #f2f7ff;
}
.admin-api-security-note span { color: #65738a; font-size: .85rem; }
.admin-api-provider-grid { display: grid; gap: 20px; }
.admin-api-provider {
    overflow: hidden;
    border: 1px solid #dce4f0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(35, 51, 79, .06);
}
.admin-api-provider > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 22px 17px;
    border-bottom: 1px solid #edf1f6;
    background: linear-gradient(135deg, #fbfdff, #f5f8fd);
}
.admin-api-provider > header h3 { margin: 0 0 5px; font-size: 1.18rem; }
.admin-api-provider > header p { margin: 0; color: #6a778d; line-height: 1.55; }
.admin-api-provider.is-complete { border-color: #b9e4d1; }
.admin-api-provider.is-complete > header { background: linear-gradient(135deg, #fbfffd, #eefaf4); }
.admin-api-provider.is-incomplete { border-color: #f1d2a4; }
.admin-api-provider.is-incomplete > header { background: linear-gradient(135deg, #fffdf9, #fff7e9); }
.admin-api-status {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    color: #9a5a00;
    background: #ffedc9;
    font-size: .78rem;
    font-weight: 900;
}
.is-complete .admin-api-status { color: #087555; background: #d9f5e9; }
.admin-api-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 22px 0; }
.admin-api-links .primary-btn,
.admin-api-links .ghost-btn { min-height: 40px; padding: 9px 14px; font-size: .87rem; }
.admin-api-instructions {
    display: grid;
    gap: 8px;
    margin: 16px 22px;
    padding: 15px 18px 15px 38px;
    border-radius: 15px;
    color: #55637a;
    background: #f7f9fc;
    line-height: 1.55;
}
.admin-api-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 22px 22px;
}
.admin-api-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e3e9f2;
    border-radius: 15px;
    background: #fcfdff;
}
.admin-api-field > span:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #27364f;
    font-weight: 850;
}
.admin-api-field > span:first-child small {
    color: #6c7a90;
    font-size: .72rem;
    font-weight: 750;
}
.admin-api-field input,
.admin-api-field select,
.admin-api-field textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid #cfd9e8;
    border-radius: 12px;
    padding: 10px 12px;
    color: #17243b;
    background: #fff;
    font: inherit;
}
.admin-api-field textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .83rem; }
.admin-api-field em { color: #748198; font-size: .78rem; font-style: normal; line-height: 1.5; }
.admin-api-field.is-environment { border-color: #c9daf7; background: #f4f8ff; }
.admin-api-field :disabled { cursor: not-allowed; opacity: .72; }
.admin-api-clear {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    color: #9a4a37 !important;
    font-size: .76rem;
    font-weight: 700 !important;
}
.admin-api-clear input { width: 16px; min-height: 16px; margin: 0; }
.admin-api-savebar {
    position: sticky;
    z-index: 5;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid #c9d7ee;
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 35px rgba(35, 51, 79, .16);
    backdrop-filter: blur(16px);
}
.admin-api-savebar div { display: grid; gap: 3px; }
.admin-api-savebar span { color: #6a778d; font-size: .82rem; }
[data-api-settings-message] { display: block; margin-top: 10px; color: #b42318; font-weight: 800; }
@media (max-width: 760px) {
    .admin-api-settings-head,
    .admin-api-provider > header,
    .admin-api-savebar { align-items: stretch; flex-direction: column; }
    .admin-api-fields { grid-template-columns: 1fr; padding-inline: 14px; }
    .admin-api-provider > header,
    .admin-api-links { padding-inline: 14px; }
    .admin-api-instructions { margin-inline: 14px; }
    .admin-api-savebar .primary-btn { width: 100%; }
}