:root {

    --bg: #07090d;

    --bg-deep: #050609;

    --surface: rgba(17, 20, 26, 0.88);

    --surface-solid: #11141a;

    --surface-soft: rgba(24, 28, 36, 0.72);

    --surface-hover: rgba(32, 37, 47, 0.86);

    --surface-light: rgba(255, 255, 255, 0.045);



    --border: rgba(255, 255, 255, 0.085);

    --border-strong: rgba(255, 255, 255, 0.15);

    --border-gold: rgba(245, 166, 35, 0.36);



    --text: #f5f6f8;

    --text-soft: #b1b6c0;

    --text-muted: #727986;

    --text-dark: #181105;



    --accent: #f5a623;

    --accent-light: #ffc760;

    --accent-deep: #bd7410;

    --accent-soft: rgba(245, 166, 35, 0.12);

    --accent-glow: rgba(245, 166, 35, 0.24);



    --cyan: #63e6ff;

    --violet: #9d7cff;

    --green: #58d99b;

    --red: #ff7262;

    --blue: #6d9dff;



    --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-serif: "Playfair Display", Georgia, serif;

    --font-mono: "DM Mono", monospace;



    --header-height: 78px;

    --radius-xs: 8px;

    --radius-sm: 12px;

    --radius-md: 18px;

    --radius-lg: 26px;

    --radius-xl: 36px;



    --shadow-small: 0 12px 30px rgba(0, 0, 0, 0.28);

    --shadow-medium: 0 24px 70px rgba(0, 0, 0, 0.4);

    --shadow-large: 0 45px 130px rgba(0, 0, 0, 0.56);



    --ease: cubic-bezier(0.22, 1, 0.36, 1);

}



* {

    box-sizing: border-box;

}



html {

    min-width: 320px;

    background: var(--bg-deep);

    color-scheme: dark;

    scroll-behavior: smooth;

}



body {

    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background:

        radial-gradient(circle at 20% 0%, rgba(74, 56, 25, 0.18), transparent 34%),

        radial-gradient(circle at 90% 10%, rgba(33, 65, 82, 0.16), transparent 30%),

        linear-gradient(180deg, #080a0f 0%, #050609 100%);

    color: var(--text);

    font-family: var(--font-sans);

    font-size: 14px;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}



button,

input,

select,

textarea {

    color: inherit;

    font: inherit;

}



button,

select {

    -webkit-tap-highlight-color: transparent;

}



button {

    border: 0;

}



a {

    color: inherit;

    text-decoration: none;

}



svg,

img {

    display: block;

}



[hidden] {

    display: none !important;

}



::selection {

    background: rgba(245, 166, 35, 0.28);

    color: #fff;

}



::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}



::-webkit-scrollbar-track {

    background: transparent;

}



::-webkit-scrollbar-thumb {

    border: 3px solid transparent;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.15);

    background-clip: padding-box;

}



::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, 0.25);

    background-clip: padding-box;

}



/* Background */



.app-background {

    position: fixed;

    inset: 0;

    z-index: -10;

    overflow: hidden;

    pointer-events: none;

}



.app-background__orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0.22;

}



.app-background__orb--one {

    top: -180px;

    left: -130px;

    width: 580px;

    height: 580px;

    background: #8e621a;

    animation: backgroundFloatOne 18s ease-in-out infinite alternate;

}



.app-background__orb--two {

    top: 10%;

    right: -220px;

    width: 640px;

    height: 640px;

    background: #173f57;

    animation: backgroundFloatTwo 22s ease-in-out infinite alternate;

}



.app-background__grid {

    position: absolute;

    inset: 0;

    opacity: 0.16;

    background-image:

        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);

    background-size: 42px 42px;

    mask-image: linear-gradient(to bottom, black, transparent 84%);

}



.app-background__grain {

    position: absolute;

    inset: -50%;

    opacity: 0.024;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    animation: grainShift 0.7s steps(2) infinite;

}



@keyframes backgroundFloatOne {

    to {

        transform: translate(110px, 90px) scale(1.12);

    }

}



@keyframes backgroundFloatTwo {

    to {

        transform: translate(-100px, 70px) scale(0.95);

    }

}



@keyframes grainShift {

    0% {

        transform: translate(0, 0);

    }



    25% {

        transform: translate(4%, -3%);

    }



    50% {

        transform: translate(-3%, 5%);

    }



    75% {

        transform: translate(5%, 2%);

    }



    100% {

        transform: translate(-4%, -4%);

    }

}



/* App shell */



.app-shell {

    min-height: 100vh;

}



.app-header {

    position: sticky;

    top: 0;

    z-index: 100;

    min-height: var(--header-height);

    padding: 0 28px;

    display: grid;

    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);

    align-items: center;

    gap: 24px;

    border-bottom: 1px solid var(--border);

    background: rgba(7, 9, 13, 0.72);

    backdrop-filter: blur(26px) saturate(140%);

    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);

}



.app-header::after {

    content: "";

    position: absolute;

    inset: auto 0 -1px;

    height: 1px;

    background: linear-gradient(

        90deg,

        transparent,

        rgba(245, 166, 35, 0.22),

        transparent

    );

}



.app-header__brand,

.app-header__actions {

    min-width: 0;

}



.app-header__actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

}



.brand {

    width: max-content;

    display: inline-flex;

    align-items: center;

    gap: 12px;

}



.brand__mark {

    position: relative;

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(245, 166, 35, 0.28);

    border-radius: 14px;

    background:

        linear-gradient(145deg, rgba(245, 166, 35, 0.16), rgba(255, 255, 255, 0.02)),

        #101217;

    color: var(--accent-light);

    box-shadow:

        inset 0 1px rgba(255, 255, 255, 0.08),

        0 12px 30px rgba(0, 0, 0, 0.34);

    transition:

        transform 0.35s var(--ease),

        border-color 0.35s var(--ease),

        box-shadow 0.35s var(--ease);

}



.brand:hover .brand__mark {

    transform: translateY(-2px) rotate(-2deg);

    border-color: rgba(245, 166, 35, 0.55);

    box-shadow:

        inset 0 1px rgba(255, 255, 255, 0.1),

        0 16px 36px rgba(245, 166, 35, 0.12);

}



.brand__mark svg {

    width: 28px;

    height: 28px;

}



.brand__content {

    display: grid;

    gap: 2px;

}



.brand__name {

    overflow: hidden;

    max-width: 220px;

    color: #fff;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: -0.02em;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.brand__descriptor {

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 9px;

    letter-spacing: 0.14em;

}



/* Step navigation */



.step-navigation {

    display: flex;

    align-items: center;

    justify-content: center;

}



.step-navigation__item {

    min-width: 138px;

    padding: 9px 10px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 13px;

    background: transparent;

    text-align: left;

    cursor: pointer;

    opacity: 0.52;

    transition:

        opacity 0.3s ease,

        background 0.3s ease,

        transform 0.3s var(--ease);

}



.step-navigation__item:not(:disabled):hover {

    opacity: 0.88;

    background: rgba(255, 255, 255, 0.035);

}



.step-navigation__item.is-active {

    opacity: 1;

    background: rgba(245, 166, 35, 0.07);

}



.step-navigation__item:disabled {

    cursor: not-allowed;

}



.step-navigation__number {

    width: 28px;

    height: 28px;

    flex: none;

    display: grid;

    place-items: center;

    border: 1px solid var(--border);

    border-radius: 50%;

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 9px;

    transition:

        border-color 0.3s ease,

        background 0.3s ease,

        color 0.3s ease;

}



.step-navigation__item.is-active .step-navigation__number {

    border-color: var(--accent);

    background: var(--accent);

    color: var(--text-dark);

    box-shadow: 0 0 26px rgba(245, 166, 35, 0.2);

}



.step-navigation__content {

    display: grid;

    line-height: 1.2;

}



.step-navigation__label {

    color: var(--text);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}



.step-navigation__meta {

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9px;

}



.step-navigation__connector {

    width: 42px;

    height: 1px;

    flex: none;

    background: linear-gradient(90deg, var(--border), rgba(245, 166, 35, 0.2), var(--border));

}



/* System status */



.system-status {

    min-height: 34px;

    padding: 0 12px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    border: 1px solid var(--border);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);

}



.system-status__indicator {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--text-muted);

    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.035);

}



.system-status.is-online .system-status__indicator {

    background: var(--green);

    box-shadow: 0 0 0 5px rgba(88, 217, 155, 0.08), 0 0 14px rgba(88, 217, 155, 0.48);

}



.system-status.is-error .system-status__indicator {

    background: var(--red);

    box-shadow: 0 0 0 5px rgba(255, 114, 98, 0.08), 0 0 14px rgba(255, 114, 98, 0.48);

}



.system-status__text {

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 9px;

    letter-spacing: 0.02em;

}



/* Buttons */



.button,

.icon-button {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    border: 1px solid transparent;

    cursor: pointer;

    transition:

        transform 0.25s var(--ease),

        border-color 0.25s ease,

        background 0.25s ease,

        color 0.25s ease,

        box-shadow 0.25s ease;

}



.button {

    min-height: 42px;

    padding: 0 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 750;

    letter-spacing: -0.01em;

}



.button::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    transform: translateX(-110%);

    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);

    transition: transform 0.6s var(--ease);

}



.button:hover::before {

    transform: translateX(110%);

}



.button:hover {

    transform: translateY(-2px);

}



.button:active {

    transform: translateY(0);

}



.button:disabled {

    opacity: 0.42;

    cursor: not-allowed;

    transform: none;

}



.button--primary {

    border-color: rgba(255, 199, 96, 0.62);

    background:

        linear-gradient(145deg, var(--accent-light), var(--accent) 56%, #d98511);

    color: #1b1203;

    box-shadow:

        0 13px 30px rgba(245, 166, 35, 0.17),

        inset 0 1px rgba(255, 255, 255, 0.44);

}



.button--primary:hover {

    box-shadow:

        0 17px 38px rgba(245, 166, 35, 0.27),

        inset 0 1px rgba(255, 255, 255, 0.5);

}



.button--secondary {

    border-color: rgba(245, 166, 35, 0.24);

    background: rgba(245, 166, 35, 0.08);

    color: var(--accent-light);

}



.button--secondary:hover {

    border-color: rgba(245, 166, 35, 0.45);

    background: rgba(245, 166, 35, 0.13);

}



.button--ghost {

    border-color: var(--border);

    background: rgba(255, 255, 255, 0.026);

    color: var(--text-soft);

}



.button--ghost:hover {

    border-color: var(--border-strong);

    background: rgba(255, 255, 255, 0.055);

    color: var(--text);

}



.button--danger {

    border-color: rgba(255, 114, 98, 0.35);

    background: rgba(255, 114, 98, 0.12);

    color: #ff9b90;

}



.button--compact {

    min-height: 36px;

    padding: 0 13px;

    border-radius: 10px;

    font-size: 10px;

}



.button--large {

    min-height: 52px;

    padding: 0 22px;

    border-radius: 15px;

    font-size: 12px;

}



.button--full {

    width: 100%;

}



.icon-button {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border-color: var(--border);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.025);

    color: var(--text-muted);

}



.icon-button:hover {

    transform: translateY(-2px);

    border-color: var(--border-strong);

    background: rgba(255, 255, 255, 0.055);

    color: var(--text);

}



.icon-button--small {

    width: 32px;

    height: 32px;

    border-radius: 9px;

    font-size: 11px;

}



/* Main */



.app-main {

    min-height: calc(100vh - var(--header-height));

}



.app-step {

    min-height: calc(100vh - var(--header-height));

    animation: stepReveal 0.65s var(--ease);

}



@keyframes stepReveal {

    from {

        opacity: 0;

        transform: translateY(14px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Shared */



.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.17em;

}



.eyebrow__line {

    width: 30px;

    height: 1px;

    background: linear-gradient(90deg, var(--accent), transparent);

}



.panel-kicker {

    display: inline-block;

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 0.16em;

}



/* Brief */



.brief-layout {

    width: min(1500px, calc(100% - 56px));

    min-height: calc(100vh - var(--header-height));

    margin: 0 auto;

    padding: 56px 0 74px;

    display: grid;

    grid-template-columns: minmax(0, 0.78fr) minmax(620px, 1.22fr);

    align-items: start;

    gap: 72px;

}



.brief-intro {

    position: sticky;

    top: calc(var(--header-height) + 54px);

    padding: 52px 20px 30px 8px;

}



.brief-intro__title {

    max-width: 600px;

    margin: 24px 0 0;

    color: #f5f4f1;

    font-size: clamp(58px, 6.3vw, 98px);

    font-weight: 600;

    line-height: 0.9;

    letter-spacing: -0.075em;

}



.brief-intro__title-accent {

    position: relative;

    display: inline-block;

    color: var(--accent-light);

    font-family: var(--font-serif);

    font-style: italic;

    font-weight: 600;

    letter-spacing: -0.055em;

}



.brief-intro__title-accent::after {

    content: "";

    position: absolute;

    right: 2%;

    bottom: -3px;

    left: 1%;

    height: 7px;

    border-radius: 50%;

    background: radial-gradient(ellipse, rgba(245, 166, 35, 0.5), transparent 72%);

    filter: blur(4px);

}



.brief-intro__description {

    max-width: 540px;

    margin: 30px 0 0;

    color: var(--text-soft);

    font-size: 16px;

    line-height: 1.8;

}



.brief-intro__metrics {

    margin-top: 46px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

}



.intro-metric {

    padding: 21px 20px 21px 0;

    display: grid;

    gap: 5px;

}



.intro-metric + .intro-metric {

    padding-left: 20px;

    border-left: 1px solid var(--border);

}



.intro-metric__value {

    color: var(--text);

    font-family: var(--font-mono);

    font-size: 13px;

    font-weight: 500;

}



.intro-metric__label {

    color: var(--text-muted);

    font-size: 9px;

}



.creative-note {

    margin-top: 34px;

    padding: 17px 18px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    border: 1px solid rgba(245, 166, 35, 0.14);

    border-radius: 18px;

    background:

        linear-gradient(135deg, rgba(245, 166, 35, 0.075), transparent),

        rgba(255, 255, 255, 0.018);

}



.creative-note__icon {

    width: 34px;

    height: 34px;

    flex: none;

    display: grid;

    place-items: center;

    border: 1px solid rgba(245, 166, 35, 0.25);

    border-radius: 11px;

    background: rgba(245, 166, 35, 0.09);

    color: var(--accent-light);

}



.creative-note strong {

    display: block;

    margin-bottom: 4px;

    color: var(--text);

    font-size: 11px;

}



.creative-note p {

    margin: 0;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.65;

}



.brief-panel {

    position: relative;

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 30px;

    background:

        linear-gradient(155deg, rgba(255, 255, 255, 0.045), transparent 28%),

        rgba(14, 17, 22, 0.87);

    box-shadow: var(--shadow-large);

    backdrop-filter: blur(30px);

}



.brief-panel::before {

    content: "";

    position: absolute;

    top: -180px;

    right: -150px;

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background: rgba(245, 166, 35, 0.075);

    filter: blur(80px);

    pointer-events: none;

}



.brief-panel__header {

    min-height: 94px;

    padding: 26px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    border-bottom: 1px solid var(--border);

    background: rgba(255, 255, 255, 0.018);

}



.brief-panel__header h2 {

    margin: 7px 0 0;

    color: var(--text);

    font-size: 19px;

    font-weight: 700;

    letter-spacing: -0.035em;

}



.brief-panel__step {

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 9px;

}



.brief-form {

    padding: 32px 30px 28px;

}



.form-section {

    position: relative;

}



.form-section__heading {

    margin-bottom: 24px;

    display: flex;

    align-items: flex-start;

    gap: 13px;

}



.form-section__index {

    width: 28px;

    height: 28px;

    flex: none;

    display: grid;

    place-items: center;

    border: 1px solid rgba(245, 166, 35, 0.22);

    border-radius: 9px;

    background: rgba(245, 166, 35, 0.07);

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 9px;

}



.form-section__heading h3 {

    margin: 0;

    color: var(--text);

    font-size: 13px;

    font-weight: 750;

    letter-spacing: -0.018em;

}



.form-section__heading p {

    margin: 4px 0 0;

    color: var(--text-muted);

    font-size: 9px;

}



.form-grid {

    display: grid;

    gap: 18px;

}



.form-grid--two {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.form-grid + .form-grid {

    margin-top: 18px;

}



.form-divider {

    height: 1px;

    margin: 31px 0;

    background: linear-gradient(90deg, var(--border), rgba(245, 166, 35, 0.09), var(--border));

}



.field {

    min-width: 0;

}



.field__label {

    margin-bottom: 8px;

    display: block;

    color: var(--text-soft);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.02em;

}



.field__label span {

    color: var(--accent-light);

}



.field__control {

    position: relative;

}



.field__icon {

    position: absolute;

    top: 50%;

    left: 13px;

    z-index: 2;

    width: 15px;

    transform: translateY(-50%);

    color: var(--text-muted);

    font-size: 10px;

    text-align: center;

    pointer-events: none;

}



.field__input,

.field__select,

.field__textarea {

    width: 100%;

    border: 1px solid var(--border);

    outline: none;

    background:

        linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent),

        rgba(4, 6, 9, 0.38);

    color: var(--text);

    transition:

        border-color 0.25s ease,

        background 0.25s ease,

        box-shadow 0.25s ease;

}



.field__input,

.field__select {

    height: 46px;

    border-radius: 12px;

}



.field__input {

    padding: 0 14px 0 39px;

}



.field__input--plain {

    padding-left: 13px;

}



.field__select {

    padding: 0 38px 0 39px;

    appearance: none;

    cursor: pointer;

}



.field__select option {

    background: #11141a;

    color: var(--text);

}



.field__select-arrow {

    position: absolute;

    top: 50%;

    right: 14px;

    transform: translateY(-50%);

    color: var(--text-muted);

    font-size: 8px;

    pointer-events: none;

}



.field__input::placeholder,

.field__textarea::placeholder {

    color: #565d68;

}



.field__input:focus,

.field__select:focus,

.field__textarea:focus {

    border-color: rgba(245, 166, 35, 0.48);

    background: rgba(245, 166, 35, 0.025);

    box-shadow:

        0 0 0 4px rgba(245, 166, 35, 0.06),

        0 12px 28px rgba(0, 0, 0, 0.18);

}



.field__control:focus-within .field__icon,

.field__control:focus-within .field__select-arrow {

    color: var(--accent-light);

}



.field__textarea-wrap {

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 15px;

    background: rgba(4, 6, 9, 0.38);

    transition:

        border-color 0.25s ease,

        box-shadow 0.25s ease;

}



.field__textarea-wrap:focus-within {

    border-color: rgba(245, 166, 35, 0.48);

    box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.06);

}



.field__textarea-wrap .field__textarea {

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

}



.field__textarea {

    min-height: 176px;

    padding: 15px;

    resize: vertical;

    border-radius: 13px;

    line-height: 1.65;

}



.field__textarea--compact {

    min-height: 132px;

}



.field__textarea-footer {

    min-height: 37px;

    padding: 0 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border-top: 1px solid var(--border);

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 8px;

}



.field__textarea-footer span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}



.field__hint {

    margin-top: 7px;

    display: block;

    color: var(--text-muted);

    font-size: 8px;

}



.field__error {

    min-height: 15px;

    margin-top: 5px;

    display: block;

    color: #ff9388;

    font-size: 8px;

}



/* Theme cards */



.choice-fieldset {

    min-width: 0;

    margin: 0 0 22px;

    padding: 0;

    border: 0;

}



.theme-options {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

}



.theme-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.018);

    cursor: pointer;

    transition:

        transform 0.3s var(--ease),

        border-color 0.3s ease,

        background 0.3s ease,

        box-shadow 0.3s ease;

}



.theme-card:hover {

    transform: translateY(-4px);

    border-color: var(--border-strong);

}



.theme-card input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}



.theme-card:has(input:checked) {

    border-color: rgba(245, 166, 35, 0.5);

    background: rgba(245, 166, 35, 0.045);

    box-shadow: 0 14px 32px rgba(245, 166, 35, 0.08);

}



.theme-card__visual {

    position: relative;

    height: 94px;

    overflow: hidden;

    display: block;

    border-bottom: 1px solid var(--border);

}



.theme-card__visual--editorial {

    background: #e9e4d8;

}



.theme-card__visual-title {

    position: absolute;

    top: 16px;

    left: 18px;

    color: #171510;

    font-family: var(--font-serif);

    font-size: 25px;

    font-style: italic;

    font-weight: 700;

}



.theme-card__visual-line {

    position: absolute;

    right: 16px;

    bottom: 26px;

    left: 18px;

    height: 2px;

    background: #2a261e;

}



.theme-card__visual-line--short {

    right: 48px;

    bottom: 17px;

    opacity: 0.4;

}



.theme-card__visual-accent {

    position: absolute;

    top: 0;

    right: 0;

    width: 26px;

    height: 100%;

    background: #a33d25;

}



.theme-card__visual--cyber {

    background:

        radial-gradient(circle at 70% 35%, rgba(89, 215, 255, 0.34), transparent 22%),

        radial-gradient(circle at 35% 80%, rgba(145, 94, 255, 0.25), transparent 32%),

        #07111a;

}



.theme-card__visual-glow {

    position: absolute;

    top: 14px;

    right: 24px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: var(--cyan);

    filter: blur(18px);

    opacity: 0.45;

}



.theme-card__visual-ring {

    position: absolute;

    top: 23px;

    right: 27px;

    width: 42px;

    height: 42px;

    border: 1px solid var(--cyan);

    border-radius: 50%;

    box-shadow: 0 0 18px rgba(99, 230, 255, 0.34);

}



.theme-card__visual-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(99, 230, 255, 0.08) 1px, transparent 1px),

        linear-gradient(90deg, rgba(99, 230, 255, 0.08) 1px, transparent 1px);

    background-size: 16px 16px;

    transform: perspective(180px) rotateX(60deg) translateY(34px) scale(1.4);

}



.theme-card__visual--brutal {

    background: #b8c0c6;

}



.theme-card__visual-block {

    position: absolute;

    top: 13px;

    left: 13px;

    width: 48px;

    height: 50px;

    border: 2px solid #111;

    background: #ffdb4d;

    box-shadow: 6px 6px 0 #111;

}



.theme-card__visual-type {

    position: absolute;

    right: 12px;

    bottom: 14px;

    color: #111;

    font-size: 19px;

    font-weight: 900;

    letter-spacing: -0.08em;

}



.theme-card__visual-dot {

    position: absolute;

    top: 18px;

    right: 17px;

    width: 12px;

    height: 12px;

    border: 2px solid #111;

    border-radius: 50%;

    background: #ff5c4a;

}



.theme-card__content {

    min-height: 68px;

    padding: 13px 14px;

    display: grid;

    align-content: center;

    gap: 3px;

}



.theme-card__content strong {

    overflow: hidden;

    color: var(--text);

    font-size: 10px;

    font-weight: 750;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.theme-card__content small {

    overflow: hidden;

    color: var(--text-muted);

    font-size: 8px;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.theme-card__check {

    position: absolute;

    top: 8px;

    right: 8px;

    width: 20px;

    height: 20px;

    display: grid;

    place-items: center;

    transform: scale(0);

    border-radius: 50%;

    background: var(--accent);

    color: var(--text-dark);

    font-size: 8px;

    transition: transform 0.3s var(--ease);

}



.theme-card:has(input:checked) .theme-card__check {

    transform: scale(1);

}



/* Range */



.range-field {

    min-height: 94px;

    padding: 14px;

    border: 1px solid var(--border);

    border-radius: 13px;

    background: rgba(4, 6, 9, 0.38);

}



.range-field__top,

.range-field__scale {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.range-field__top {

    color: var(--text-muted);

    font-size: 8px;

}



.range-field__value {

    min-width: 38px;

    height: 28px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(245, 166, 35, 0.23);

    border-radius: 9px;

    background: rgba(245, 166, 35, 0.08);

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 11px;

}



.range-field__input {

    width: 100%;

    height: 4px;

    margin: 15px 0 9px;

    appearance: none;

    border-radius: 99px;

    background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, 0.11));

    cursor: pointer;

}



.range-field__input::-webkit-slider-thumb {

    width: 17px;

    height: 17px;

    appearance: none;

    border: 3px solid #19130a;

    border-radius: 50%;

    background: var(--accent-light);

    box-shadow:

        0 0 0 1px var(--accent),

        0 0 16px rgba(245, 166, 35, 0.5);

}



.range-field__input::-moz-range-thumb {

    width: 14px;

    height: 14px;

    border: 3px solid #19130a;

    border-radius: 50%;

    background: var(--accent-light);

}



.range-field__scale {

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 7px;

}



.brief-form__footer {

    margin-top: 30px;

    padding-top: 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 26px;

    border-top: 1px solid var(--border);

}



.brief-form__assurance {

    max-width: 330px;

    display: flex;

    align-items: flex-start;

    gap: 9px;

    color: var(--text-muted);

    font-size: 8px;

    line-height: 1.6;

}



.brief-form__assurance i {

    margin-top: 2px;

    color: var(--accent-light);

}



/* Plan */



.plan-page {

    width: min(1500px, calc(100% - 56px));

    margin: 0 auto;

    padding: 48px 0 70px;

}



.plan-page__header {

    margin-bottom: 34px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

}



.plan-page__header h1 {

    margin: 16px 0 0;

    color: var(--text);

    font-size: clamp(42px, 5vw, 70px);

    font-weight: 650;

    line-height: 0.98;

    letter-spacing: -0.065em;

}



.plan-page__header h1 span {

    color: var(--accent-light);

    font-family: var(--font-serif);

    font-style: italic;

    font-weight: 600;

}



.plan-page__header p {

    max-width: 660px;

    margin: 20px 0 0;

    color: var(--text-soft);

    font-size: 12px;

    line-height: 1.75;

}



.plan-page__header-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



.plan-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 370px;

    align-items: start;

    gap: 24px;

}



.plan-editor,

.plan-summary {

    border: 1px solid var(--border);

    border-radius: 24px;

    background: rgba(14, 17, 22, 0.76);

    box-shadow: var(--shadow-medium);

    backdrop-filter: blur(24px);

}



.plan-editor {

    min-width: 0;

    overflow: hidden;

}



.plan-editor__toolbar {

    min-height: 76px;

    padding: 20px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    border-bottom: 1px solid var(--border);

}



.plan-editor__title {

    display: grid;

    gap: 6px;

}



.plan-editor__title strong {

    color: var(--text);

    font-size: 13px;

}



.plan-list {

    padding: 15px;

    display: grid;

    gap: 10px;

}



.plan-item {

    position: relative;

    padding: 16px;

    display: grid;

    grid-template-columns: 46px minmax(0, 1fr) auto;

    align-items: start;

    gap: 14px;

    border: 1px solid var(--border);

    border-radius: 17px;

    background:

        linear-gradient(135deg, rgba(255, 255, 255, 0.027), transparent),

        rgba(255, 255, 255, 0.014);

    transition:

        transform 0.25s var(--ease),

        border-color 0.25s ease,

        background 0.25s ease;

}



.plan-item:hover {

    transform: translateY(-2px);

    border-color: var(--border-strong);

    background:

        linear-gradient(135deg, rgba(245, 166, 35, 0.04), transparent),

        rgba(255, 255, 255, 0.023);

}



.plan-item__number {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(245, 166, 35, 0.2);

    border-radius: 13px;

    background: rgba(245, 166, 35, 0.06);

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 10px;

}



.plan-item__content {

    min-width: 0;

}



.plan-item__type {

    margin-bottom: 7px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 7px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}



.plan-item__title,

.plan-item__summary {

    width: 100%;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--text);

}



.plan-item__title {

    padding: 0;

    font-size: 13px;

    font-weight: 750;

    letter-spacing: -0.02em;

}



.plan-item__summary {

    min-height: 58px;

    margin-top: 7px;

    padding: 0;

    resize: vertical;

    color: var(--text-soft);

    font-size: 9px;

    line-height: 1.65;

}



.plan-item__actions {

    display: flex;

    gap: 5px;

}



.plan-item__action {

    width: 29px;

    height: 29px;

    display: grid;

    place-items: center;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.018);

    color: var(--text-muted);

    font-size: 8px;

    cursor: pointer;

    transition:

        background 0.2s ease,

        color 0.2s ease,

        border-color 0.2s ease;

}



.plan-item__action:hover {

    border-color: var(--border-strong);

    background: rgba(255, 255, 255, 0.055);

    color: var(--text);

}



.plan-item__action--danger:hover {

    border-color: rgba(255, 114, 98, 0.3);

    background: rgba(255, 114, 98, 0.09);

    color: #ff9186;

}



.plan-summary {

    position: sticky;

    top: calc(var(--header-height) + 24px);

    overflow: hidden;

    padding: 26px;

}



.plan-summary::before {

    content: "";

    position: absolute;

    top: -90px;

    right: -70px;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background: rgba(245, 166, 35, 0.08);

    filter: blur(70px);

}



.plan-summary__visual {

    position: relative;

    width: 190px;

    height: 190px;

    margin: 4px auto 24px;

    display: grid;

    place-items: center;

}



.plan-summary__visual-orbit {

    position: absolute;

    inset: 13px;

    border: 1px solid rgba(245, 166, 35, 0.22);

    border-radius: 50%;

    animation: orbitSpin 14s linear infinite;

}



.plan-summary__visual-orbit::before,

.plan-summary__visual-orbit::after {

    content: "";

    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;

}



.plan-summary__visual-orbit::before {

    inset: 20px;

}



.plan-summary__visual-orbit::after {

    inset: 39px;

}



.plan-summary__visual-core {

    position: relative;

    z-index: 2;

    width: 88px;

    height: 88px;

    display: grid;

    place-items: center;

    align-content: center;

    border: 1px solid rgba(245, 166, 35, 0.28);

    border-radius: 50%;

    background:

        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.1), transparent 34%),

        rgba(245, 166, 35, 0.07);

    box-shadow:

        0 0 50px rgba(245, 166, 35, 0.1),

        inset 0 1px rgba(255, 255, 255, 0.08);

}



.plan-summary__visual-core span {

    color: var(--accent-light);

    font-family: var(--font-serif);

    font-size: 31px;

    line-height: 1;

}



.plan-summary__visual-core small {

    margin-top: 4px;

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 7px;

    letter-spacing: 0.12em;

}



.plan-summary__visual-node {

    position: absolute;

    width: 8px;

    height: 8px;

    border: 2px solid #18130b;

    border-radius: 50%;

    background: var(--accent-light);

    box-shadow: 0 0 14px rgba(245, 166, 35, 0.7);

}



.plan-summary__visual-node--one {

    top: 25px;

    right: 30px;

}



.plan-summary__visual-node--two {

    bottom: 35px;

    left: 21px;

}



.plan-summary__visual-node--three {

    right: 10px;

    bottom: 70px;

}



@keyframes orbitSpin {

    to {

        transform: rotate(360deg);

    }

}



.plan-summary__content h2 {

    margin: 9px 0 0;

    color: var(--text);

    font-size: 22px;

    line-height: 1.15;

    letter-spacing: -0.045em;

}



.plan-summary__content p {

    margin: 10px 0 0;

    color: var(--text-soft);

    font-size: 10px;

    line-height: 1.7;

}



.plan-summary__narrative {

    margin-top: 22px;

    padding: 15px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.018);

}



.plan-summary__narrative span {

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 7px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.plan-summary__narrative p {

    margin: 7px 0 0;

    color: var(--text-soft);

    font-size: 9px;

    line-height: 1.7;

}



.plan-summary__facts {

    margin: 20px 0;

    display: grid;

    gap: 10px;

}



.plan-summary__facts div {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

}



.plan-summary__facts span {

    color: var(--text-muted);

    font-size: 8px;

}



.plan-summary__facts strong {

    overflow: hidden;

    max-width: 190px;

    color: var(--text);

    font-size: 8px;

    font-weight: 700;

    text-align: right;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.plan-summary__footnote {

    margin: 11px 0 0;

    color: var(--text-muted);

    font-size: 7px;

    line-height: 1.55;

    text-align: center;

}



/* Studio */



.app-step--studio {

    height: calc(100vh - var(--header-height));

    min-height: 680px;

    overflow: hidden;

}



.studio {

    height: 100%;

    display: flex;

    flex-direction: column;

}



.studio-header {

    min-height: 72px;

    padding: 0 20px;

    display: grid;

    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);

    align-items: center;

    gap: 18px;

    border-bottom: 1px solid var(--border);

    background: rgba(11, 13, 18, 0.82);

}



.studio-header__title {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;

}



.studio-header__mark {

    width: 38px;

    height: 38px;

    flex: none;

    display: grid;

    place-items: center;

    border: 1px solid rgba(245, 166, 35, 0.2);

    border-radius: 12px;

    background: rgba(245, 166, 35, 0.07);

    color: var(--accent-light);

}



.studio-header__title h1 {

    overflow: hidden;

    max-width: 360px;

    margin: 4px 0 0;

    color: var(--text);

    font-size: 14px;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.studio-header__actions {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

}



.studio-view-switcher {

    padding: 4px;

    display: flex;

    align-items: center;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.022);

}



.studio-view-switcher__button {

    min-height: 31px;

    padding: 0 13px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    border-radius: 8px;

    background: transparent;

    color: var(--text-muted);

    font-size: 9px;

    cursor: pointer;

}



.studio-view-switcher__button.is-active {

    background: rgba(255, 255, 255, 0.075);

    color: var(--text);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18);

}



.studio-workspace {

    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns: 230px minmax(0, 1fr) 350px;

}



/* Slide rail */



.slide-rail,

.inspector {

    min-height: 0;

    display: flex;

    flex-direction: column;

    background: rgba(13, 16, 21, 0.88);

}



.slide-rail {

    border-right: 1px solid var(--border);

}



.slide-rail__header,

.slide-rail__footer {

    flex: none;

    padding: 15px;

}



.slide-rail__header {

    min-height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 13px;

    border-bottom: 1px solid var(--border);

}



.slide-rail__header div {

    display: grid;

    gap: 5px;

}



.slide-rail__header strong {

    color: var(--text);

    font-size: 10px;

}



.slide-rail__list {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 12px;

    display: grid;

    align-content: start;

    gap: 10px;

}



.slide-thumbnail {

    position: relative;

    padding: 8px;

    border: 1px solid var(--border);

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.018);

    cursor: pointer;

    transition:

        transform 0.25s var(--ease),

        border-color 0.25s ease,

        background 0.25s ease;

}



.slide-thumbnail:hover {

    transform: translateY(-2px);

    border-color: var(--border-strong);

}



.slide-thumbnail.is-active {

    border-color: rgba(245, 166, 35, 0.6);

    background: rgba(245, 166, 35, 0.055);

    box-shadow: 0 12px 28px rgba(245, 166, 35, 0.07);

}



.slide-thumbnail__preview {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    border-radius: 8px;

    background: #fff;

}



.slide-thumbnail__preview iframe {

    width: 1280px;

    height: 720px;

    border: 0;

    transform: scale(0.137);

    transform-origin: top left;

    pointer-events: none;

}



.slide-thumbnail__preview-placeholder {

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    background: #151820;

    color: var(--text-muted);

}



.slide-thumbnail__info {

    padding: 9px 3px 1px;

    display: grid;

    grid-template-columns: 24px minmax(0, 1fr);

    align-items: center;

    gap: 7px;

}



.slide-thumbnail__number {

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 8px;

}



.slide-thumbnail__title {

    overflow: hidden;

    color: var(--text-soft);

    font-size: 8px;

    font-weight: 600;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.slide-thumbnail__status {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 8px;

    height: 8px;

    border: 2px solid #11151a;

    border-radius: 50%;

    background: var(--text-muted);

}



.slide-thumbnail__status.is-ready {

    background: var(--green);

}



.slide-thumbnail__status.is-error {

    background: var(--red);

}



.slide-rail__footer {

    border-top: 1px solid var(--border);

}



/* Canvas */



.canvas-area {

    min-width: 0;

    min-height: 0;

    display: flex;

    flex-direction: column;

    background:

        radial-gradient(circle at center, rgba(255, 255, 255, 0.022), transparent 55%),

        #080a0e;

}



.canvas-toolbar {

    min-height: 52px;

    padding: 0 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    border-bottom: 1px solid var(--border);

    background: rgba(14, 17, 22, 0.66);

}



.canvas-breadcrumb {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 8px;

}



.canvas-breadcrumb span {

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 8px;

}



.canvas-breadcrumb i {

    color: var(--text-muted);

    font-size: 7px;

}



.canvas-breadcrumb strong {

    overflow: hidden;

    max-width: 380px;

    color: var(--text-soft);

    font-size: 9px;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.canvas-toolbar__right {

    display: flex;

    align-items: center;

    gap: 6px;

}



.canvas-toolbar__zoom {

    min-width: 57px;

    height: 32px;

    border: 1px solid var(--border);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.018);

    color: var(--text-soft);

    font-family: var(--font-mono);

    font-size: 8px;

    cursor: pointer;

}



.canvas-toolbar__divider {

    width: 1px;

    height: 22px;

    margin: 0 4px;

    background: var(--border);

}



.canvas-stage {

    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



.canvas-stage::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);

    background-size: 22px 22px;

    opacity: 0.15;

}



.canvas-stage__ambient {

    position: absolute;

    width: 70%;

    height: 70%;

    border-radius: 50%;

    background: rgba(245, 166, 35, 0.055);

    filter: blur(90px);

    pointer-events: none;

}



.canvas-frame {

    position: relative;

    z-index: 2;

    width: 1280px;

    height: 720px;

    flex: none;

    overflow: hidden;

    background: #fff;

    box-shadow:

        0 45px 110px rgba(0, 0, 0, 0.66),

        0 0 0 1px rgba(255, 255, 255, 0.075);

    transform-origin: center;

    transition: transform 0.3s var(--ease);

}



.canvas-frame iframe {

    width: 1280px;

    height: 720px;

    border: 0;

    background: #fff;

}



.canvas-empty {

    position: relative;

    z-index: 2;

    width: min(430px, calc(100% - 60px));

    padding: 38px;

    border: 1px dashed var(--border-strong);

    border-radius: 24px;

    background: rgba(14, 17, 22, 0.75);

    text-align: center;

    backdrop-filter: blur(20px);

}



.canvas-empty > span {

    width: 58px;

    height: 58px;

    margin: 0 auto 18px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(245, 166, 35, 0.22);

    border-radius: 18px;

    background: rgba(245, 166, 35, 0.07);

    color: var(--accent-light);

    font-size: 19px;

}



.canvas-empty h2 {

    margin: 0;

    color: var(--text);

    font-size: 17px;

}



.canvas-empty p {

    margin: 9px 0 0;

    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.65;

}



.canvas-status {

    min-height: 34px;

    padding: 0 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border-top: 1px solid var(--border);

    background: rgba(14, 17, 22, 0.8);

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 7px;

}



.canvas-status > div {

    display: flex;

    align-items: center;

    gap: 7px;

}



.canvas-status__dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--green);

    box-shadow: 0 0 12px rgba(88, 217, 155, 0.45);

}



.canvas-status__dot.is-error {

    background: var(--red);

    box-shadow: 0 0 12px rgba(255, 114, 98, 0.45);

}



.canvas-status__separator {

    opacity: 0.4;

}



/* Inspector */



.inspector {

    border-left: 1px solid var(--border);

}



.inspector__tabs {

    min-height: 52px;

    padding: 0 12px;

    display: flex;

    align-items: flex-end;

    gap: 4px;

    border-bottom: 1px solid var(--border);

}



.inspector__tab {

    position: relative;

    min-height: 39px;

    padding: 0 12px;

    background: transparent;

    color: var(--text-muted);

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;

}



.inspector__tab::after {

    content: "";

    position: absolute;

    right: 10px;

    bottom: -1px;

    left: 10px;

    height: 2px;

    border-radius: 99px;

    background: var(--accent);

    transform: scaleX(0);

    transition: transform 0.25s var(--ease);

}



.inspector__tab.is-active {

    color: var(--text);

}



.inspector__tab.is-active::after {

    transform: scaleX(1);

}



.inspector__body {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

}



.inspector-panel {

    padding: 18px;

}



.inspector-section {

    display: grid;

    gap: 15px;

}



.inspector-section__heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    color: var(--text);

    font-size: 10px;

    font-weight: 750;

}



.inspector-section__badge {

    max-width: 140px;

    overflow: hidden;

    padding: 5px 8px;

    border: 1px solid rgba(245, 166, 35, 0.18);

    border-radius: 999px;

    background: rgba(245, 166, 35, 0.06);

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 6px;

    font-weight: 500;

    text-transform: uppercase;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.inspector-divider {

    height: 1px;

    margin: 21px 0;

    background: var(--border);

}



.inspector-actions-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

}



.inspector-action {

    min-height: 66px;

    display: grid;

    place-items: center;

    align-content: center;

    gap: 8px;

    border: 1px solid var(--border);

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.018);

    color: var(--text-muted);

    cursor: pointer;

    transition:

        transform 0.25s var(--ease),

        border-color 0.25s ease,

        background 0.25s ease,

        color 0.25s ease;

}



.inspector-action:hover {

    transform: translateY(-2px);

    border-color: var(--border-strong);

    background: rgba(255, 255, 255, 0.045);

    color: var(--text);

}



.inspector-action i {

    font-size: 12px;

}



.inspector-action span {

    font-size: 8px;

}



.inspector-action--danger:hover {

    border-color: rgba(255, 114, 98, 0.32);

    background: rgba(255, 114, 98, 0.08);

    color: #ff9388;

}



/* Code editor */



.code-editor {

    height: calc(100vh - var(--header-height) - 124px);

    min-height: 420px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    border: 1px solid var(--border);

    border-radius: 16px;

    background: #080a0d;

}



.code-editor__header,

.code-editor__footer {

    min-height: 45px;

    padding: 0 11px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    background: #101319;

}



.code-editor__header {

    border-bottom: 1px solid var(--border);

}



.code-editor__footer {

    border-top: 1px solid var(--border);

}



.code-editor__language {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 8px;

}



.code-editor__language span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow: 0 0 12px rgba(245, 166, 35, 0.45);

}



.code-editor__textarea {

    flex: 1;

    min-height: 0;

    padding: 16px;

    resize: none;

    border: 0;

    outline: none;

    background:

        linear-gradient(90deg, transparent 31px, rgba(255, 255, 255, 0.035) 32px, transparent 33px),

        #080a0d;

    color: #d7dce4;

    font-family: var(--font-mono);

    font-size: 9px;

    line-height: 1.7;

    tab-size: 2;

    white-space: pre;

}



.code-editor__footer span {

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 7px;

}



/* Toggle */



.toggle-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    cursor: pointer;

}



.toggle-row > span:first-child {

    min-width: 0;

    display: grid;

    gap: 3px;

}



.toggle-row strong {

    color: var(--text-soft);

    font-size: 9px;

}



.toggle-row small {

    color: var(--text-muted);

    font-size: 7px;

}



.toggle-row input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}



.toggle-row__control {

    position: relative;

    width: 42px;

    height: 23px;

    flex: none;

    border: 1px solid var(--border-strong);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);

    transition:

        background 0.25s ease,

        border-color 0.25s ease;

}



.toggle-row__control::after {

    content: "";

    position: absolute;

    top: 3px;

    left: 3px;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background: var(--text-muted);

    transition:

        transform 0.28s var(--ease),

        background 0.25s ease;

}



.toggle-row input:checked + .toggle-row__control {

    border-color: rgba(245, 166, 35, 0.4);

    background: rgba(245, 166, 35, 0.16);

}



.toggle-row input:checked + .toggle-row__control::after {

    transform: translateX(19px);

    background: var(--accent-light);

    box-shadow: 0 0 12px rgba(245, 166, 35, 0.45);

}



/* Overview */



.overview {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 25px;

    background: #080a0e;

}



.overview__header {

    margin-bottom: 20px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

}



.overview__header h2 {

    margin: 7px 0 0;

    color: var(--text);

    font-size: 20px;

}



.overview__header > span {

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 8px;

}



.overview__grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

}



.overview-card {

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.018);

    cursor: pointer;

    transition:

        transform 0.3s var(--ease),

        border-color 0.3s ease,

        box-shadow 0.3s ease;

}



.overview-card:hover {

    transform: translateY(-5px);

    border-color: rgba(245, 166, 35, 0.32);

    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);

}



.overview-card__preview {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #fff;

}



.overview-card__preview iframe {

    width: 1280px;

    height: 720px;

    border: 0;

    transform: scale(0.24);

    transform-origin: top left;

    pointer-events: none;

}



.overview-card__meta {

    padding: 13px 14px;

    display: grid;

    grid-template-columns: 25px minmax(0, 1fr);

    gap: 8px;

}



.overview-card__meta span {

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 8px;

}



.overview-card__meta strong {

    overflow: hidden;

    color: var(--text-soft);

    font-size: 9px;

    white-space: nowrap;

    text-overflow: ellipsis;

}



/* Generation overlay */



.generation-overlay {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: grid;

    place-items: center;

    padding: 24px;

}



.generation-overlay__backdrop {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at center, rgba(245, 166, 35, 0.08), transparent 42%),

        rgba(4, 5, 8, 0.86);

    backdrop-filter: blur(24px);

}



.generation-card {

    position: relative;

    z-index: 2;

    width: min(520px, 100%);

    padding: 42px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.11);

    border-radius: 30px;

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 35%),

        rgba(14, 17, 22, 0.94);

    box-shadow: var(--shadow-large);

    text-align: center;

}



.generation-card::before {

    content: "";

    position: absolute;

    top: -170px;

    left: 50%;

    width: 390px;

    height: 390px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(245, 166, 35, 0.1);

    filter: blur(90px);

}



.generation-card__visual {

    position: relative;

    width: 150px;

    height: 150px;

    margin: -2px auto 22px;

    display: grid;

    place-items: center;

}



.generation-orbit {

    position: absolute;

    border: 1px solid rgba(245, 166, 35, 0.2);

    border-radius: 50%;

}



.generation-orbit--one {

    inset: 8px;

    animation: orbitSpin 9s linear infinite;

}



.generation-orbit--two {

    inset: 27px;

    border-style: dashed;

    animation: orbitSpinReverse 6s linear infinite;

}



@keyframes orbitSpinReverse {

    to {

        transform: rotate(-360deg);

    }

}



.generation-core {

    position: relative;

    z-index: 2;

    width: 72px;

    height: 72px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(245, 166, 35, 0.35);

    border-radius: 24px;

    background:

        linear-gradient(145deg, rgba(245, 166, 35, 0.16), rgba(255, 255, 255, 0.03));

    color: var(--accent-light);

    font-size: 24px;

    box-shadow:

        0 0 45px rgba(245, 166, 35, 0.15),

        inset 0 1px rgba(255, 255, 255, 0.1);

    animation: corePulse 2.2s ease-in-out infinite;

}



@keyframes corePulse {

    50% {

        transform: scale(1.06);

        box-shadow:

            0 0 65px rgba(245, 166, 35, 0.24),

            inset 0 1px rgba(255, 255, 255, 0.12);

    }

}



.generation-card h2 {

    margin: 11px 0 0;

    color: var(--text);

    font-size: 26px;

    letter-spacing: -0.05em;

}



.generation-card > p {

    margin: 11px auto 0;

    max-width: 370px;

    color: var(--text-soft);

    font-size: 10px;

    line-height: 1.7;

}



.generation-progress {

    margin-top: 28px;

}



.generation-progress__track {

    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);

}



.generation-progress__bar {

    width: 0;

    height: 100%;

    display: block;

    border-radius: inherit;

    background:

        linear-gradient(90deg, var(--accent-deep), var(--accent-light), var(--accent));

    box-shadow: 0 0 18px rgba(245, 166, 35, 0.4);

    transition: width 0.45s var(--ease);

}



.generation-progress__meta {

    margin-top: 9px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: 8px;

}



.generation-progress__meta strong {

    color: var(--accent-light);

    font-size: 9px;

}



.generation-slide-status {

    margin: 20px auto 0;

    width: max-content;

    padding: 8px 12px;

    display: flex;

    align-items: baseline;

    gap: 4px;

    border: 1px solid var(--border);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);

    color: var(--text-soft);

    font-family: var(--font-mono);

    font-size: 10px;

}



.generation-slide-status small {

    margin-left: 4px;

    color: var(--text-muted);

    font-size: 6px;

    letter-spacing: 0.1em;

}



.generation-card > .button {

    margin-top: 18px;

}



/* Modals */



.modal-backdrop {

    position: fixed;

    inset: 0;

    z-index: 1100;

    padding: 24px;

    display: grid;

    place-items: center;

    background: rgba(4, 5, 8, 0.78);

    backdrop-filter: blur(18px);

}



.modal-card {

    width: min(560px, 100%);

    overflow: hidden;

    border: 1px solid var(--border-strong);

    border-radius: 24px;

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent),

        #101319;

    box-shadow: var(--shadow-large);

    animation: modalReveal 0.35s var(--ease);

}



.modal-card--small {

    max-width: 480px;

}



.modal-card--confirm {

    max-width: 400px;

    padding: 32px;

    text-align: center;

}



@keyframes modalReveal {

    from {

        opacity: 0;

        transform: scale(0.96) translateY(14px);

    }



    to {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}



.modal-card__header {

    padding: 21px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid var(--border);

}



.modal-card__header h2 {

    margin: 7px 0 0;

    color: var(--text);

    font-size: 17px;

}



.shortcut-list {

    padding: 13px;

}



.shortcut-list__item {

    min-height: 52px;

    padding: 0 12px;

    display: flex;

    align-items: center;

    gap: 7px;

    border-radius: 12px;

}



.shortcut-list__item + .shortcut-list__item {

    border-top: 1px solid var(--border);

}



.shortcut-list__item > span:first-child {

    flex: 1;

    color: var(--text-soft);

    font-size: 9px;

}



kbd {

    min-width: 28px;

    height: 25px;

    padding: 0 7px;

    display: inline-grid;

    place-items: center;

    border: 1px solid var(--border-strong);

    border-bottom-color: rgba(255, 255, 255, 0.24);

    border-radius: 7px;

    background: rgba(255, 255, 255, 0.055);

    color: var(--text);

    font-family: var(--font-mono);

    font-size: 7px;

    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);

}



.confirm-icon {

    width: 58px;

    height: 58px;

    margin: 0 auto 18px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 114, 98, 0.26);

    border-radius: 18px;

    background: rgba(255, 114, 98, 0.09);

    color: #ff8e83;

    font-size: 20px;

}



.modal-card--confirm h2 {

    margin: 0;

    color: var(--text);

    font-size: 19px;

}



.modal-card--confirm p {

    margin: 10px auto 0;

    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.65;

}



.modal-card__actions {

    margin-top: 24px;

    display: flex;

    justify-content: center;

    gap: 10px;

}



/* Fullscreen preview */



.fullscreen-preview {

    position: fixed;

    inset: 0;

    z-index: 1200;

    display: flex;

    flex-direction: column;

    background:

        radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 48%),

        #050609;

}



.fullscreen-preview__toolbar {

    min-height: 60px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    border-bottom: 1px solid var(--border);

    background: rgba(13, 16, 21, 0.86);

}



.fullscreen-preview__toolbar > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}



.fullscreen-preview__toolbar span {

    color: var(--accent-light);

    font-family: var(--font-mono);

    font-size: 9px;

}



.fullscreen-preview__toolbar strong {

    overflow: hidden;

    color: var(--text-soft);

    font-size: 10px;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.fullscreen-preview__stage {

    flex: 1;

    min-height: 0;

    padding: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.fullscreen-preview__stage iframe {

    width: min(1280px, calc(100vw - 60px));

    aspect-ratio: 16 / 9;

    border: 0;

    background: #fff;

    box-shadow: var(--shadow-large);

}



/* Toasts */



.toast-region {

    position: fixed;

    right: 18px;

    bottom: 18px;

    z-index: 1400;

    width: min(380px, calc(100vw - 36px));

    display: grid;

    gap: 10px;

    pointer-events: none;

}



.toast {

    padding: 14px 15px;

    display: grid;

    grid-template-columns: 32px minmax(0, 1fr) auto;

    align-items: center;

    gap: 11px;

    border: 1px solid var(--border-strong);

    border-radius: 15px;

    background: rgba(17, 20, 26, 0.93);

    box-shadow: var(--shadow-medium);

    backdrop-filter: blur(20px);

    pointer-events: auto;

    animation: toastReveal 0.35s var(--ease);

}



@keyframes toastReveal {

    from {

        opacity: 0;

        transform: translateX(18px) translateY(8px);

    }



    to {

        opacity: 1;

        transform: translateX(0) translateY(0);

    }

}



.toast__icon {

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.055);

    color: var(--text-soft);

}



.toast--success .toast__icon {

    background: rgba(88, 217, 155, 0.1);

    color: var(--green);

}



.toast--error .toast__icon {

    background: rgba(255, 114, 98, 0.1);

    color: var(--red);

}



.toast--warning .toast__icon {

    background: rgba(245, 166, 35, 0.1);

    color: var(--accent-light);

}



.toast__content {

    min-width: 0;

}



.toast__content strong {

    display: block;

    color: var(--text);

    font-size: 9px;

}



.toast__content p {

    margin: 3px 0 0;

    color: var(--text-muted);

    font-size: 8px;

    line-height: 1.5;

}



.toast__close {

    width: 27px;

    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

}



.toast__close:hover {

    background: rgba(255, 255, 255, 0.05);

    color: var(--text);

}



/* Miscellaneous */



.noscript-message {

    position: fixed;

    inset: 20px;

    z-index: 2000;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 114, 98, 0.3);

    border-radius: 20px;

    background: #11141a;

    color: #ff9388;

    font-size: 14px;

    text-align: center;

}



/* Responsive */



@media (max-width: 1320px) {

    .app-header {

        grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);

    }



    .system-status {

        display: none;

    }



    .brief-layout {

        grid-template-columns: minmax(0, 0.7fr) minmax(590px, 1.3fr);

        gap: 45px;

    }



    .studio-workspace {

        grid-template-columns: 205px minmax(0, 1fr) 320px;

    }



    .overview__grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 1120px) {

    .app-header {

        grid-template-columns: 1fr auto;

    }



    .step-navigation {

        display: none;

    }



    .brief-layout {

        width: min(900px, calc(100% - 40px));

        grid-template-columns: 1fr;

        gap: 28px;

    }



    .brief-intro {

        position: relative;

        top: auto;

        padding: 30px 6px 10px;

    }



    .brief-intro__title {

        max-width: 740px;

    }



    .brief-intro__description {

        max-width: 650px;

    }



    .plan-layout {

        grid-template-columns: 1fr;

    }



    .plan-summary {

        position: relative;

        top: auto;

    }



    .plan-summary__visual {

        width: 160px;

        height: 160px;

    }



    .studio-workspace {

        grid-template-columns: 190px minmax(0, 1fr);

    }



    .inspector {

        position: fixed;

        top: calc(var(--header-height) + 72px);

        right: 0;

        bottom: 0;

        z-index: 200;

        width: 350px;

        transform: translateX(100%);

        box-shadow: -30px 0 80px rgba(0, 0, 0, 0.48);

        transition: transform 0.35s var(--ease);

    }



    .inspector.is-open {

        transform: translateX(0);

    }

}



@media (max-width: 860px) {

    :root {

        --header-height: 66px;

    }



    .app-header {

        min-height: var(--header-height);

        padding: 0 16px;

    }



    .brand__mark {

        width: 38px;

        height: 38px;

    }



    .brand__descriptor,

    .app-header__actions .button span {

        display: none;

    }



    .app-header__actions .button {

        width: 40px;

        padding: 0;

    }



    .brief-layout,

    .plan-page {

        width: min(100% - 28px, 760px);

    }



    .brief-layout {

        padding-top: 28px;

    }



    .brief-intro__title {

        font-size: clamp(50px, 13vw, 78px);

    }



    .brief-intro__metrics {

        grid-template-columns: 1fr;

    }



    .intro-metric + .intro-metric {

        padding-left: 0;

        border-top: 1px solid var(--border);

        border-left: 0;

    }



    .form-grid--two,

    .theme-options {

        grid-template-columns: 1fr;

    }



    .theme-card {

        display: grid;

        grid-template-columns: 132px minmax(0, 1fr);

    }



    .theme-card__visual {

        height: 84px;

        border-right: 1px solid var(--border);

        border-bottom: 0;

    }



    .brief-form__footer,

    .plan-page__header {

        align-items: stretch;

        flex-direction: column;

    }



    .brief-form__footer .button {

        width: 100%;

    }



    .plan-page__header-actions {

        width: 100%;

    }



    .plan-page__header-actions .button {

        flex: 1;

    }



    .studio-header {

        grid-template-columns: 1fr auto;

    }



    .studio-header__center {

        display: none;

    }



    .studio-header__actions .button span {

        display: none;

    }



    .studio-header__actions .button {

        width: 36px;

        padding: 0;

    }



    .studio-workspace {

        grid-template-columns: 150px minmax(0, 1fr);

    }



    .slide-thumbnail__preview iframe {

        transform: scale(0.083);

    }



    .canvas-toolbar__left {

        min-width: 0;

    }



    .canvas-breadcrumb strong {

        max-width: 180px;

    }



    .overview__grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 620px) {

    .app-header {

        gap: 10px;

    }



    .brand__content {

        display: none;

    }



    .brief-panel__header,

    .brief-form {

        padding-right: 18px;

        padding-left: 18px;

    }



    .brief-panel {

        border-radius: 22px;

    }



    .plan-page {

        padding-top: 30px;

    }



    .plan-page__header h1 {

        font-size: 43px;

    }



    .plan-page__header-actions {

        display: grid;

        grid-template-columns: 1fr;

    }



    .plan-item {

        grid-template-columns: 38px minmax(0, 1fr);

    }



    .plan-item__number {

        width: 36px;

        height: 36px;

    }



    .plan-item__actions {

        grid-column: 1 / -1;

        justify-content: flex-end;

    }



    .app-step--studio {

        height: auto;

        min-height: calc(100vh - var(--header-height));

        overflow: visible;

    }



    .studio {

        min-height: calc(100vh - var(--header-height));

    }



    .studio-header {

        padding: 0 12px;

    }



    .studio-header__mark {

        display: none;

    }



    .studio-header__title h1 {

        max-width: 150px;

    }



    .studio-workspace {

        min-height: calc(100vh - var(--header-height) - 72px);

        grid-template-columns: 1fr;

    }



    .slide-rail {

        position: relative;

        min-height: 190px;

        border-right: 0;

        border-bottom: 1px solid var(--border);

    }



    .slide-rail__list {

        display: flex;

        overflow-x: auto;

        overflow-y: hidden;

    }



    .slide-thumbnail {

        width: 150px;

        flex: none;

    }



    .slide-thumbnail__preview iframe {

        transform: scale(0.104);

    }



    .slide-rail__footer {

        display: none;

    }



    .canvas-area {

        min-height: 560px;

    }



    .canvas-frame {

        transform-origin: center;

    }



    .canvas-status > div:last-child {

        display: none;

    }



    .inspector {

        top: 0;

        width: min(100%, 390px);

    }



    .fullscreen-preview__stage {

        padding: 10px;

    }



    .fullscreen-preview__stage iframe {

        width: calc(100vw - 20px);

    }



    .generation-card {

        padding: 30px 20px;

        border-radius: 23px;

    }



    .generation-card__visual {

        width: 125px;

        height: 125px;

    }

}



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}
/* ========================================================================== */
/* Customer-facing light SaaS theme                                            */
/* ========================================================================== */

:root {
    --bg: #f4f7fb;
    --bg-deep: #eef2f7;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-solid: #ffffff;
    --surface-soft: #f8fafc;
    --surface-hover: #f2f5fb;
    --surface-light: rgba(91, 92, 226, 0.055);
    --border: #e3e8f0;
    --border-strong: #d2d9e5;
    --border-gold: rgba(91, 92, 226, 0.3);
    --text: #172033;
    --text-soft: #465269;
    --text-muted: #7a869d;
    --text-dark: #172033;
    --accent: #5b5ce2;
    --accent-light: #7374ee;
    --accent-deep: #4546c8;
    --accent-soft: rgba(91, 92, 226, 0.1);
    --accent-glow: rgba(91, 92, 226, 0.18);
    --cyan: #0ea5e9;
    --violet: #7c3aed;
    --green: #16a36a;
    --red: #e5484d;
    --blue: #3b82f6;
    --shadow-small: 0 8px 24px rgba(22, 34, 56, 0.07);
    --shadow-medium: 0 18px 48px rgba(22, 34, 56, 0.1);
    --shadow-large: 0 28px 80px rgba(22, 34, 56, 0.13);
}

html {
    background: var(--bg);
    color-scheme: light;
}

body {
    background:
        radial-gradient(circle at 12% -8%, rgba(91, 92, 226, 0.09), transparent 30%),
        radial-gradient(circle at 94% 2%, rgba(14, 165, 233, 0.07), transparent 26%),
        linear-gradient(180deg, #f8faff 0%, #f1f5fa 100%);
    color: var(--text);
}

.app-background__orb {
    opacity: 0.28;
    filter: blur(80px);
}

.app-background__orb--one {
    background: rgba(91, 92, 226, 0.16);
}

.app-background__orb--two {
    background: rgba(14, 165, 233, 0.12);
}

.app-background__grid {
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(91, 92, 226, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 92, 226, 0.07) 1px, transparent 1px);
}

.app-background__grain {
    opacity: 0.025;
}

.app-shell {
    color: var(--text);
}

.app-header {
    border-bottom: 1px solid rgba(210, 217, 229, 0.82);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 30px rgba(28, 39, 60, 0.045);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-header::after {
    background: linear-gradient(90deg, transparent, rgba(91, 92, 226, 0.24), transparent);
    opacity: 0.55;
}

.brand__mark,
.studio-header__mark,
.brief-panel__step,
.form-section__index {
    border-color: rgba(91, 92, 226, 0.18);
    background: rgba(91, 92, 226, 0.09);
    color: var(--accent);
    box-shadow: none;
}

.brand__name,
.step-navigation__label,
.brief-intro__title,
.brief-panel__header h2,
.form-section__heading h3,
.plan-header h1,
.plan-summary__content h2,
.studio-header__title h1,
.overview__header h2,
.inspector-section__heading strong {
    color: var(--text);
}

.brand__descriptor,
.step-navigation__meta,
.panel-kicker,
.field__hint,
.brief-intro__description,
.form-section__heading p,
.plan-summary__content p,
.plan-summary__narrative p,
.plan-summary__footnote,
.canvas-toolbar__meta,
.overview__header > span {
    color: var(--text-muted);
}

.step-navigation__item {
    color: var(--text-muted);
}

.step-navigation__item.is-active,
.step-navigation__item:hover {
    color: var(--accent);
}

.step-navigation__connector {
    background: var(--border);
}

.button {
    border-color: var(--border);
    box-shadow: none;
}

.button--primary {
    border-color: transparent;
    background: linear-gradient(135deg, #6263e8, #4d4ed3);
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(91, 92, 226, 0.22);
}

.button--primary:hover {
    background: linear-gradient(135deg, #7071ef, #5758dc);
    box-shadow: 0 14px 34px rgba(91, 92, 226, 0.28);
}

.button--secondary,
.button--ghost,
.icon-button {
    border-color: var(--border);
    background: #ffffff;
    color: var(--text-soft);
}

.button--secondary:hover,
.button--ghost:hover,
.icon-button:hover {
    border-color: rgba(91, 92, 226, 0.3);
    background: #f7f7ff;
    color: var(--accent);
}

.brief-intro__title-accent {
    color: var(--accent);
}

.brief-intro__title-accent::after {
    background: rgba(91, 92, 226, 0.14);
}

.brief-intro__metrics,
.intro-metric,
.brief-panel,
.plan-editor,
.plan-summary,
.slide-rail,
.canvas-panel,
.inspector,
.overview-card,
.modal__dialog,
.toast,
.generation-card {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-medium);
}

.brief-panel::before,
.plan-summary::before {
    background: linear-gradient(90deg, transparent, rgba(91, 92, 226, 0.4), transparent);
}

.form-divider,
.inspector-divider {
    background: var(--border);
}

.field__label,
.choice-fieldset legend,
.range-field__top,
.range-field__scale {
    color: var(--text-soft);
}

.field__control,
.field__textarea-wrap,
.field__input,
.field__select,
.field__textarea,
.code-editor__textarea {
    border-color: var(--border);
    background: #fbfcfe;
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(30, 45, 70, 0.025);
}

.field__control:focus-within,
.field__textarea-wrap:focus-within,
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    border-color: rgba(91, 92, 226, 0.55);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(91, 92, 226, 0.09);
}

.field__input::placeholder,
.field__textarea::placeholder {
    color: #a0a9ba;
}

.field__icon,
.field__select-arrow {
    color: #929caf;
}

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

.theme-card {
    border-color: var(--border);
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(28, 39, 60, 0.045);
}

.theme-card:hover {
    border-color: rgba(91, 92, 226, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 13px 30px rgba(28, 39, 60, 0.08);
}

.theme-card:has(input:checked) {
    border-color: rgba(91, 92, 226, 0.55);
    background: #fafaff;
    box-shadow: 0 0 0 3px rgba(91, 92, 226, 0.08), 0 14px 32px rgba(28, 39, 60, 0.08);
}

.theme-card__content strong {
    color: var(--text);
}

.theme-card__content small {
    color: var(--text-muted);
}

.theme-card__check {
    background: var(--accent);
    color: #fff;
}

.range-field__input {
    accent-color: var(--accent);
}

.brief-form__assurance {
    color: var(--text-muted);
}

.plan-layout,
.studio-workspace {
    color: var(--text);
}

.plan-editor__toolbar,
.slide-rail__header,
.canvas-toolbar,
.studio-header,
.inspector__tabs,
.code-editor__header,
.code-editor__footer {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.92);
}

.plan-list-item,
.slide-rail-item,
.inspector-action,
.plan-summary__narrative,
.plan-summary__facts div {
    border-color: var(--border);
    background: #f8fafc;
}

.plan-list-item:hover,
.slide-rail-item:hover,
.inspector-action:hover {
    border-color: rgba(91, 92, 226, 0.3);
    background: #f7f7ff;
}

.plan-list-item.is-active,
.slide-rail-item.is-active {
    border-color: rgba(91, 92, 226, 0.5);
    background: rgba(91, 92, 226, 0.075);
}

.plan-summary__visual-orbit,
.plan-summary__visual-orbit::before,
.plan-summary__visual-orbit::after {
    border-color: rgba(91, 92, 226, 0.18);
}

.plan-summary__visual-core {
    border-color: rgba(91, 92, 226, 0.25);
    background: linear-gradient(145deg, #ffffff, #f1f2ff);
    color: var(--accent);
    box-shadow: 0 16px 42px rgba(91, 92, 226, 0.13);
}

.plan-summary__visual-node {
    background: var(--accent);
    box-shadow: 0 0 16px rgba(91, 92, 226, 0.32);
}

.studio {
    background: #f4f7fb;
}

.studio-header {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.studio-view-switcher {
    border-color: var(--border);
    background: #edf1f7;
}

.studio-view-switcher__button {
    color: var(--text-muted);
}

.studio-view-switcher__button.is-active {
    background: #ffffff;
    color: var(--accent);
    box-shadow: 0 4px 14px rgba(28, 39, 60, 0.08);
}

.slide-rail {
    box-shadow: none;
}

.slide-thumbnail__preview,
.canvas-stage,
.canvas-frame {
    border-color: var(--border);
    background: #e9eef5;
}

.canvas-stage {
    background-image:
        linear-gradient(45deg, #eef2f7 25%, transparent 25%),
        linear-gradient(-45deg, #eef2f7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef2f7 75%),
        linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    background-color: #f8fafc;
}

.canvas-empty {
    color: var(--text-muted);
}

.canvas-empty h2 {
    color: var(--text);
}

.canvas-status {
    border-color: var(--border);
    background: #ffffff;
    color: var(--text-muted);
}

.inspector {
    box-shadow: none;
}

.inspector__tab {
    color: var(--text-muted);
}

.inspector__tab.is-active {
    color: var(--accent);
}

.inspector__tab.is-active::after {
    background: var(--accent);
}

.inspector__tab[data-inspector-tab="code"],
.inspector-panel[data-inspector-panel="code"] {
    display: none !important;
}

.overview {
    padding: 28px;
    background: #f4f7fb;
}

.overview__header {
    margin-bottom: 22px;
    align-items: center;
}

.overview__header h2 {
    font-size: 22px;
    letter-spacing: -0.025em;
}

.overview__header > span {
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
}

.overview__grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    align-items: start;
}

.overview-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(28, 39, 60, 0.065);
    transform: translateZ(0);
}

.overview-card:hover {
    transform: translateY(-4px);
    border-color: rgba(91, 92, 226, 0.34);
    box-shadow: 0 18px 46px rgba(28, 39, 60, 0.11);
}

.overview-card__preview {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--border);
    background: #eef2f7;
    contain: strict;
}

.overview-card__preview iframe {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1280px;
    height: 720px;
    border: 0;
    transform: scale(var(--preview-scale, 0.24));
    transform-origin: top left;
    pointer-events: none;
}

.overview-card__meta {
    padding: 15px 16px 16px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
}

.overview-card__meta span {
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
}

.overview-card__meta strong {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}

.generation-overlay,
.modal {
    background: rgba(235, 240, 248, 0.76);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.generation-card,
.modal__dialog {
    border-color: rgba(210, 217, 229, 0.9);
    background: #ffffff;
    color: var(--text);
}

.generation-progress__track {
    background: #e9edf4;
}

.generation-progress__bar {
    background: linear-gradient(90deg, #5b5ce2, #7c78ff);
    box-shadow: 0 0 20px rgba(91, 92, 226, 0.2);
}

.toast {
    color: var(--text);
}

.status-badge {
    border-color: var(--border);
    background: #ffffff;
    color: var(--text-soft);
}

.status-badge.is-online {
    border-color: rgba(22, 163, 106, 0.22);
    background: rgba(22, 163, 106, 0.08);
    color: #087f50;
}

@media (max-width: 760px) {
    .theme-options {
        grid-template-columns: 1fr;
    }

    .overview {
        padding: 18px;
    }

    .overview__grid {
        grid-template-columns: 1fr;
    }
}

.overview-card {
    content-visibility: auto;
    contain-intrinsic-size: 340px 225px;
}


/* Slide rail previews and active-page revision */
.slide-rail__list {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.slide-thumbnail {
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(28, 39, 60, 0.055);
}

.slide-thumbnail__preview {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    contain: layout paint;
}

.slide-thumbnail__preview iframe {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1280px;
    height: 720px;
    transform: scale(var(--preview-scale, 0.16));
    transform-origin: top left;
}

.slide-thumbnail__info {
    padding: 10px 11px 11px;
}

.slide-thumbnail__status {
    top: 9px;
    right: 9px;
    border-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18);
}

.slide-rail__footer {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
}

.slide-revision {
    display: grid;
    gap: 7px;
}

.slide-revision__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text);
    font-size: 10px;
    font-weight: 750;
}

.slide-revision__label span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 650;
}

.slide-revision__input {
    width: 100%;
    min-height: 76px;
    max-height: 138px;
    resize: vertical;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: #f8fafc;
    color: var(--text);
    font: 500 10px/1.5 var(--font-sans);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.slide-revision__input::placeholder {
    color: #98a2b3;
}

.slide-revision__input:focus {
    border-color: rgba(91, 92, 226, 0.55);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(91, 92, 226, 0.1);
}

.slide-revision__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 7.5px;
    line-height: 1.35;
}

.slide-revision__meta span:last-child {
    flex: none;
    font-family: var(--font-mono);
}

@media (max-width: 1100px) {
    .slide-revision__label span,
    .slide-revision__meta span:first-child {
        display: none;
    }

    .slide-revision__input {
        min-height: 64px;
        padding: 8px;
        font-size: 9px;
    }
}

/* Google Pay test checkout */

body.is-payment-open {
    overflow: hidden;
}

.payment-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    padding: 24px;
    display: grid;
    place-items: center;
    background: rgba(8, 15, 29, 0.64);
    backdrop-filter: blur(18px);
}

.payment-modal__card {
    width: min(520px, 100%);
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 28px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 36px 110px rgba(15, 23, 42, 0.24);
    animation: paymentModalReveal 0.32s var(--ease);
}

@keyframes paymentModalReveal {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.payment-modal__header {
    padding: 26px 26px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid #e8edf5;
    background:
        radial-gradient(circle at 100% 0%, rgba(66, 133, 244, 0.12), transparent 42%),
        #ffffff;
}

.payment-modal__header h2 {
    margin: 10px 0 0;
    color: #0f172a;
    font-size: 24px;
    letter-spacing: -0.035em;
}

.payment-modal__header p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.payment-modal__header .icon-button {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #334155;
}

.payment-modal__badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1d4ed8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.payment-modal__body {
    padding: 24px 26px 28px;
}

.payment-summary {
    padding: 18px;
    border: 1px solid #e5eaf2;
    border-radius: 20px;
    background: #f8fafc;
}

.payment-summary__row,
.payment-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.payment-summary__row + .payment-summary__row {
    margin-top: 12px;
}

.payment-summary__row span {
    color: #64748b;
    font-size: 12px;
}

.payment-summary__row strong {
    color: #334155;
    font-size: 12px;
}

.payment-summary__divider {
    height: 1px;
    margin: 17px 0;
    background: #dfe6ef;
}

.payment-summary__total span {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.payment-summary__total strong {
    color: #0f172a;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.payment-google-button {
    min-height: 52px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-google-button > div,
.payment-google-button button {
    width: 100% !important;
    min-height: 48px !important;
}

.payment-google-button__loading {
    color: #64748b;
    font-size: 12px;
}

.payment-modal__legal {
    margin: 15px 4px 0;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}

.payment-modal__error {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 13px;
    background: #fff1f2;
    color: #be123c;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 560px) {
    .payment-modal {
        padding: 14px;
    }

    .payment-modal__header,
    .payment-modal__body {
        padding-left: 19px;
        padding-right: 19px;
    }
}


/* =========================================================
   PERFORMANCE LAYER — QUALITY-PRESERVING
   ========================================================= */

.app-background__orb,
.app-background__grain,
.plan-summary__visual-orbit,
.generation-visual__orbit,
.generation-visual__core {
    animation: none !important;
}

.app-background__orb {
    filter: blur(72px);
}

.app-background__grain {
    opacity: 0.08;
}

.slide-rail,
.studio-overview,
.overview-grid {
    contain: layout paint style;
}

.overview-card {
    content-visibility: auto;
    contain-intrinsic-size: 520px 360px;
}

.slide-thumbnail {
    contain: layout paint style;
}

.slide-thumbnail__preview iframe,
.overview-card__preview iframe {
    will-change: auto;
}

@media (max-width: 900px) {
    .app-background__orb {
        display: none;
    }
}