:root {
    --bg: #050505;
    --bg-soft: #100e0b;
    --bg-panel: rgba(12, 11, 9, 0.9);
    --bg-panel-strong: rgba(17, 15, 12, 0.96);
    --bg-elevated: rgba(24, 20, 14, 0.96);
    --line: rgba(255, 215, 128, 0.16);
    --line-strong: rgba(255, 215, 128, 0.28);
    --text: #fff8e9;
    --muted: #bcae94;
    --muted-strong: #eadcc2;
    --accent: #ffc43d;
    --accent-strong: #ffe19a;
    --accent-hot: #ff970f;
    --accent-soft: rgba(255, 196, 61, 0.17);
    --accent-soft-strong: rgba(255, 196, 61, 0.28);
    --success: #89ffb4;
    --success-bg: rgba(76, 209, 138, 0.14);
    --info: #82a9ff;
    --info-bg: rgba(130, 169, 255, 0.14);
    --warning: #ffd88c;
    --warning-bg: rgba(255, 216, 140, 0.14);
    --danger: #ff8f93;
    --danger-bg: rgba(255, 143, 147, 0.14);
    --shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
    --gold-glow: 0 0 32px rgba(255, 184, 38, 0.28), 0 0 90px rgba(255, 142, 15, 0.16);
    --live-glow: radial-gradient(circle at 12% 0%, rgba(255, 248, 199, 0.065), transparent 28%);
    --live-surface: linear-gradient(145deg, rgba(18, 13, 7, 0.96), rgba(8, 6, 5, 0.92));
    --live-field: linear-gradient(rgba(18, 13, 7, 0.84), rgba(18, 13, 7, 0.84));
    --live-ring-soft: conic-gradient(from 35deg, rgba(255, 233, 168, 0.42), rgba(255, 159, 10, 0.38), rgba(255, 45, 85, 0.34), rgba(139, 92, 246, 0.34), rgba(52, 199, 255, 0.34), rgba(48, 209, 88, 0.28), rgba(255, 233, 168, 0.42));
    --live-ring-mid: conic-gradient(from 35deg, rgba(255, 233, 168, 0.58), rgba(255, 159, 10, 0.54), rgba(255, 45, 85, 0.48), rgba(139, 92, 246, 0.48), rgba(52, 199, 255, 0.48), rgba(48, 209, 88, 0.4), rgba(255, 233, 168, 0.58));
    --live-ring-strong: conic-gradient(from 35deg, rgba(255, 248, 199, 0.7), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.56), rgba(139, 92, 246, 0.56), rgba(52, 199, 255, 0.56), rgba(48, 209, 88, 0.47), rgba(255, 248, 199, 0.7));
    --live-shadow: 0 24px 62px rgba(0, 0, 0, 0.4), 0 0 18px rgba(52, 199, 255, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: #050505;
}

body {
    margin: 0;
    min-height: 100vh;
    overscroll-behavior-y: none;
    color: var(--text);
    font-family: "Segoe UI Variable Text", "Aptos", "Bahnschrift", sans-serif;
    background:
        radial-gradient(circle at 7% 8%, rgba(255, 196, 61, 0.17), transparent 23%),
        radial-gradient(circle at 90% 9%, rgba(255, 151, 15, 0.13), transparent 19%),
        radial-gradient(circle at 52% 118%, rgba(255, 196, 61, 0.12), transparent 30%),
        linear-gradient(180deg, #020202 0%, #070605 46%, #120d08 100%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: auto auto -18vh -20vw;
    z-index: 0;
    width: 78vw;
    height: 78vw;
    border-radius: 999px;
    border: 1px solid rgba(255, 196, 61, 0.16);
    box-shadow:
        0 0 90px rgba(255, 161, 20, 0.12),
        inset 0 0 80px rgba(255, 196, 61, 0.05);
    transform: rotate(-18deg);
    pointer-events: none;
}

body::after {
    inset: -34vh -22vw auto auto;
    width: 68vw;
    height: 68vw;
    border-color: rgba(255, 196, 61, 0.12);
    transform: rotate(28deg);
}

body.modal-open {
    overflow: hidden;
}

a {
    color: inherit;
}

img,
video {
    display: block;
    max-width: 100%;
}

.page-shell {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100vw - 24px));
    margin: 0 auto;
    padding: 12px 0 36px;
}

.topbar,
.landing-hero,
.hero,
.detail-hero,
.template-stage,
.section-surface,
.site-footer,
.template-card,
.detail-card {
    border: 1px solid transparent;
    background:
        var(--live-glow),
        var(--live-surface) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    backdrop-filter: blur(18px);
    box-shadow: var(--live-shadow);
    animation: template-live-border 7s ease-in-out infinite;
}

.topbar,
.landing-hero,
.hero,
.detail-hero,
.template-stage,
.section-surface,
.site-footer {
    border-radius: var(--radius-xl);
}

.detail-card,
.template-card {
    border-radius: var(--radius-lg);
}

.topbar {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px;
    position: sticky;
    top: 10px;
    z-index: 100;
    border: 1px solid transparent;
    background:
        radial-gradient(circle at 11% 0%, rgba(255, 248, 199, 0.065), transparent 28%),
        linear-gradient(145deg, rgba(18, 13, 7, 0.96), rgba(8, 6, 5, 0.92)) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.55), rgba(255, 159, 10, 0.55), rgba(255, 45, 85, 0.48), rgba(139, 92, 246, 0.48), rgba(52, 199, 255, 0.48), rgba(48, 209, 88, 0.4), rgba(255, 233, 168, 0.55)) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(52, 199, 255, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: visible;
    animation: template-live-border 6s ease-in-out infinite;
}

.topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 auto;
    line-height: 0;
    align-self: center;
}

.brand-mark img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 0;
    object-fit: cover;
    box-shadow: none;
    filter: none;
}

.brand-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.brand-copy strong {
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    overflow: hidden;
    background: linear-gradient(115deg, #fff8e9, #ffe19a 34%, #ff9f0a 58%, #57fff0 100%);
    background-size: 220% 220%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-overflow: ellipsis;
    text-shadow: 0 0 18px rgba(255, 196, 61, 0.12);
    white-space: nowrap;
    animation: asset-plus-glyph 4.2s ease-in-out infinite;
}

.brand-copy small {
    color: rgba(234, 220, 194, 0.82);
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 12px rgba(52, 199, 255, 0.06);
    white-space: nowrap;
}

.menu-toggle {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background:
        var(--live-field) padding-box,
        var(--live-ring-mid) border-box;
    background-size: 100% 100%, 240% 240%;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26), 0 0 16px rgba(52, 199, 255, 0.06);
    animation: template-live-border 6s ease-in-out infinite;
}

.menu-toggle span {
    width: 100%;
    height: 1.5px;
    border-radius: 999px;
    background: var(--text);
}

.topbar-nav {
    display: none !important;
    gap: 10px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid transparent;
    background:
        var(--live-glow),
        var(--live-surface) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.topbar-nav a,
.menu-logout-form button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--muted-strong);
    border: 1px solid transparent;
    background:
        var(--live-field) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 240% 240%;
    width: fit-content;
    font: inherit;
    cursor: pointer;
}

.topbar-nav.is-open {
    display: grid !important;
}

.topbar-nav a:hover,
.menu-logout-form button:hover {
    background:
        linear-gradient(rgba(24, 17, 9, 0.9), rgba(18, 13, 7, 0.88)) padding-box,
        var(--live-ring-strong) border-box;
    color: var(--text);
}

.menu-logout-form {
    margin: 0;
}

.page-content {
    display: grid;
    gap: 18px;
}

.landing-hero,
.hero,
.detail-hero,
.template-stage {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.landing-hero {
    position: relative;
    overflow: hidden;
}

.hero-copy,
.detail-copy,
.template-stage-copy {
    display: grid;
    gap: 14px;
}

.eyebrow {
    margin: 0;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 800;
}

h1,
h2,
h3 {
    margin: 0;
    color: var(--text);
    font-family: "Segoe UI Variable Display", "Aptos Display", "Bahnschrift", sans-serif;
}

h1 {
    font-size: clamp(2.2rem, 10vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(1.45rem, 5vw, 2.35rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.04rem;
}

.lead,
.muted,
.compact-lead,
.template-meta p,
.footer-copy p,
.visual-caption span,
.preview-sidecopy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.hero-actions,
.action-row,
.action-column,
.preview-actions,
.template-pill-row,
.cta-note {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.button {
    min-height: 32px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 11px;
    border: 1px solid transparent;
    background:
        var(--live-field) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 240% 240%;
    color: var(--text);
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(216, 165, 111, 0.1),
        0 0 12px rgba(52, 199, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    animation: template-live-border 6s ease-in-out infinite;
}

.button:hover {
    transform: translateY(-1px);
    background:
        linear-gradient(rgba(24, 17, 9, 0.9), rgba(18, 13, 7, 0.88)) padding-box,
        var(--live-ring-strong) border-box;
    box-shadow:
        0 14px 32px rgba(223, 123, 5, 0.1),
        0 0 16px rgba(52, 199, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.button-primary {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.25), transparent 27%),
        linear-gradient(135deg, rgba(255, 248, 199, 0.7), rgba(255, 159, 10, 0.65) 38%, rgba(255, 45, 85, 0.52) 68%, rgba(52, 199, 255, 0.43)) padding-box,
        var(--live-ring-strong) border-box;
    background-size: 100% 100%, 220% 220%, 240% 240%;
    color: #110900;
    box-shadow:
        0 16px 34px rgba(255, 151, 15, 0.18),
        0 0 20px rgba(52, 199, 255, 0.08);
}

.button-primary::before {
    content: "";
    position: absolute;
    inset: -120% auto auto -20%;
    width: 60%;
    height: 260%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
    transform: rotate(24deg);
    opacity: 0.36;
    pointer-events: none;
}

.button-secondary {
    background:
        var(--live-field) padding-box,
        var(--live-ring-mid) border-box;
    background-size: 100% 100%, 240% 240%;
}

.button-ghost {
    background:
        linear-gradient(rgba(7, 6, 5, 0.44), rgba(7, 6, 5, 0.44)) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 240% 240%;
    color: var(--muted-strong);
}

.button-wide {
    width: 100%;
}

.proof-strip,
.template-pill-row,
.cta-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.proof-chip,
.ready-pill,
.price-pill,
.status-pill,
.template-badge,
.preview-badge {
    width: fit-content;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    background:
        var(--live-field) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 240% 240%;
    color: var(--muted-strong);
    font-size: 0.92rem;
    font-weight: 700;
}

.price-pill,
.status-pill,
.ready-pill {
    background:
        linear-gradient(rgba(16, 19, 12, 0.84), rgba(10, 13, 9, 0.84)) padding-box,
        var(--live-ring-mid) border-box;
    background-size: 100% 100%, 240% 240%;
    color: var(--accent);
}

.hero-preview-panel,
.template-preview-stage {
    display: grid;
    gap: 14px;
}

.preview-shell {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    min-height: 430px;
    border: 1px solid rgba(121, 230, 255, 0.18);
    background:
        radial-gradient(circle at 15% 15%, rgba(216, 165, 111, 0.18), transparent 24%),
        radial-gradient(circle at 86% 78%, rgba(127, 87, 52, 0.18), transparent 28%),
        linear-gradient(180deg, #130f11 0%, #1d1619 100%);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38);
}

.preview-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 45%, rgba(5, 12, 22, 0.64) 100%),
        linear-gradient(180deg, rgba(5, 11, 20, 0) 55%, rgba(5, 11, 20, 0.72) 100%);
    pointer-events: none;
}

.preview-video,
.template-card-video,
.preview-modal-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-shell-hero .preview-video,
.preview-shell-detail .preview-video {
    min-height: 430px;
}

.preview-overlay,
.template-visual-overlay {
    position: absolute;
    inset: auto 14px 14px 14px;
    display: grid;
    gap: 10px;
}

.preview-meta,
.visual-caption {
    display: grid;
    gap: 6px;
}

.preview-meta strong,
.visual-caption strong,
.preview-sidecopy strong {
    font-size: 1rem;
}

.preview-sidecopy {
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
}

.landing-start {
    display: grid;
    gap: 8px;
}

.landing-home {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 215, 128, 0.22);
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 196, 61, 0.19), transparent 24%),
        radial-gradient(circle at 85% 78%, rgba(255, 151, 15, 0.13), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.016) 48%, rgba(255, 196, 61, 0.06)),
        var(--bg-panel);
    backdrop-filter: blur(18px);
    box-shadow:
        var(--shadow),
        0 0 70px rgba(255, 151, 15, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.landing-home::before,
.landing-home::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.landing-home::before {
    width: 320px;
    height: 320px;
    left: -130px;
    top: -70px;
    border: 1px solid rgba(255, 196, 61, 0.16);
    box-shadow: 0 0 44px rgba(255, 184, 38, 0.16), inset 0 0 30px rgba(255, 184, 38, 0.05);
    transform: rotate(-22deg);
}

.landing-home::after {
    width: 180px;
    height: 2px;
    right: -26px;
    top: 26%;
    background: linear-gradient(90deg, transparent, rgba(255, 226, 151, 0.72), transparent);
    box-shadow: 0 0 24px rgba(255, 184, 38, 0.48);
    transform: rotate(-18deg);
}

.landing-home-media,
.landing-home-copy,
.catalog-card,
.catalog-card-body,
.catalog-card-heading,
.guide-story-card,
.landing-info-band,
.landing-info-main,
.landing-info-side {
    display: grid;
    gap: 10px;
}

.landing-home-media {
    position: relative;
    z-index: 1;
}

.landing-home-copy {
    text-align: left;
    justify-items: start;
    gap: 17px;
    position: relative;
    z-index: 1;
}

.landing-home h1 {
    max-width: 15.5ch;
    font-size: clamp(1.3rem, 6.2vw, 2.14rem);
    line-height: 1.16;
    letter-spacing: -0.006em;
    padding-bottom: 0.1em;
    text-shadow: 0 0 28px rgba(255, 184, 38, 0.14);
    background: linear-gradient(115deg, #fff8e9, #ffe19a 34%, #ff9f0a 58%, #57fff0 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: asset-plus-glyph 4.2s ease-in-out infinite;
}

.landing-home h1 span {
    display: block;
}

.landing-service-note {
    max-width: 22rem;
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.78rem;
    line-height: 1.5;
}

.landing-step-label {
    justify-self: center;
    margin: 0;
    color: var(--accent-strong);
    text-shadow: 0 0 18px rgba(255, 184, 38, 0.24);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.68rem;
    font-weight: 800;
}

.template-start {
    display: grid;
    gap: 8px;
}

.template-detail-page {
    display: grid;
    gap: 20px;
}

.template-step-label {
    justify-self: center;
    margin: 0;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.68rem;
    font-weight: 800;
}

.template-detail-page .template-step-label {
    min-height: 32px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(18, 13, 7, 0.86), rgba(18, 13, 7, 0.86)) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.64), rgba(255, 159, 10, 0.64), rgba(255, 45, 85, 0.58), rgba(139, 92, 246, 0.58), rgba(52, 199, 255, 0.58), rgba(48, 209, 88, 0.5), rgba(255, 233, 168, 0.64)) border-box;
    background-size: 100% 100%, 240% 240%;
    color: var(--accent-strong);
    box-shadow:
        0 10px 22px rgba(216, 165, 111, 0.1),
        0 0 12px rgba(52, 199, 255, 0.05);
    animation: template-live-border 5s ease-in-out infinite;
}

.template-detail-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at top left, rgba(216, 165, 111, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
        var(--bg-panel);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.template-detail-copy {
    display: grid;
    gap: 11px;
    min-width: 0;
}

.template-detail-copy > .eyebrow {
    justify-self: center;
    text-align: center;
}

.template-detail-copy h1 {
    max-width: 13ch;
    font-size: clamp(1.14rem, 5.4vw, 1.9rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
    background: linear-gradient(135deg, #fff8ed 0%, #f0c18f 48%, #d88745 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.template-detail-note {
    max-width: 27rem;
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.82rem;
    line-height: 1.5;
}

.template-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.template-requirements span {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.045);
    color: var(--muted-strong);
    font-size: 0.76rem;
    font-weight: 800;
}

.template-detail-page .template-detail-hero,
.template-detail-page .template-example-strip,
.template-detail-page .template-upload-surface,
.template-detail-page .compact-guide-surface {
    border: 1px solid transparent;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 248, 199, 0.065), transparent 25%),
        linear-gradient(145deg, rgba(18, 13, 7, 0.96), rgba(8, 6, 5, 0.9)) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.65), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.59), rgba(139, 92, 246, 0.59), rgba(52, 199, 255, 0.59), rgba(48, 209, 88, 0.52), rgba(255, 233, 168, 0.65)) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 24px 62px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(255, 79, 136, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    animation: template-live-border 5.8s ease-in-out infinite;
}

.template-detail-page .template-requirements span,
.template-detail-page .button,
.template-detail-page .template-preview-close {
    border: 1px solid transparent;
    background:
        linear-gradient(#120d07, #120d07) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.65), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.59), rgba(139, 92, 246, 0.59), rgba(52, 199, 255, 0.59), rgba(48, 209, 88, 0.52), rgba(255, 233, 168, 0.65)) border-box;
    background-size: 100% 100%, 240% 240%;
    color: var(--text);
    box-shadow:
        0 10px 24px rgba(216, 165, 111, 0.14),
        0 0 12px rgba(255, 79, 136, 0.045),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: template-live-border 4.6s ease-in-out infinite;
}

.template-detail-page .button {
    min-height: 34px;
}

.template-detail-page .button-primary {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.25), transparent 27%),
        linear-gradient(135deg, rgba(255, 248, 199, 0.7), rgba(255, 159, 10, 0.65) 38%, rgba(255, 45, 85, 0.52) 68%, rgba(52, 199, 255, 0.43)) padding-box,
        conic-gradient(from 35deg, rgba(255, 248, 199, 0.7), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.52), rgba(139, 92, 246, 0.52), rgba(52, 199, 255, 0.52), rgba(48, 209, 88, 0.45), rgba(255, 248, 199, 0.7)) border-box;
    background-size: 100% 100%, 220% 220%, 240% 240%;
    color: #130c06;
    box-shadow:
        0 14px 30px rgba(255, 151, 15, 0.18),
        0 0 18px rgba(52, 199, 255, 0.075);
}

.template-detail-page .button-secondary,
.template-detail-page .button-ghost {
    background:
        linear-gradient(rgba(18, 13, 7, 0.84), rgba(18, 13, 7, 0.84)) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.65), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.59), rgba(139, 92, 246, 0.59), rgba(52, 199, 255, 0.59), rgba(48, 209, 88, 0.52), rgba(255, 233, 168, 0.65)) border-box;
    background-size: 100% 100%, 240% 240%;
}

@keyframes template-live-border {
    0%,
    100% {
        background-position: 50% 50%, 0% 50%, 0% 50%;
    }

    50% {
        background-position: 50% 50%, 100% 50%, 100% 50%;
    }
}

.admin-runtime-meta {
    margin-top: 8px;
}

.admin-runtime-meta span {
    border-color: rgba(255, 193, 79, 0.24);
    background: rgba(255, 182, 55, 0.075);
    color: var(--accent-strong);
}

.template-showcase-frame {
    width: clamp(92px, 22vw, 126px);
}

.showcase-frame {
    position: relative;
    overflow: hidden;
    width: clamp(92px, 22vw, 126px);
    aspect-ratio: 9 / 16;
    min-height: 0;
    border-radius: 22px;
    border: 1px solid rgba(255, 215, 128, 0.26);
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 196, 61, 0.24), transparent 22%),
        linear-gradient(180deg, #17120c 0%, #25180b 100%);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.48),
        0 0 42px rgba(255, 184, 38, 0.18);
    margin: 0;
}

.showcase-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 4, 5, 0) 48%, rgba(6, 4, 5, 0.76) 100%),
        radial-gradient(circle at center, transparent 44%, rgba(6, 4, 5, 0.5) 100%);
    pointer-events: none;
}

.showcase-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-example-strip {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 28px;
    border: 1px solid rgba(216, 165, 111, 0.18);
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 196, 61, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
}

.template-example-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
}

.template-example-heading h2,
.template-example-heading p,
.template-preview-title {
    margin: 0;
}

.template-example-heading h2 {
    color: var(--text);
    font-size: clamp(1rem, 4.3vw, 1.24rem);
    letter-spacing: -0.015em;
}

.template-example-heading p {
    max-width: 16rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.template-example-scroller {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    overscroll-behavior-inline: contain;
    padding-bottom: 0;
    scrollbar-width: none;
}

.template-example-scroller::-webkit-scrollbar {
    display: none;
}

.template-example-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 5px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(7, 6, 5, 0.43);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.template-example-card:hover,
.template-example-card:focus-visible {
    transform: translateY(-1px);
    border-color: transparent;
    box-shadow:
        0 18px 44px rgba(223, 123, 5, 0.15),
        0 0 22px rgba(52, 199, 255, 0.12);
    outline: 0;
}

.template-example-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    background:
        radial-gradient(circle at 35% 12%, rgba(255, 255, 255, 0.13), transparent 24%),
        linear-gradient(180deg, #160f0a, #060403);
}

.template-example-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-example-play {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    background:
        linear-gradient(#120d07, #120d07) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.7), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.56), rgba(139, 92, 246, 0.56), rgba(52, 199, 255, 0.56), rgba(48, 209, 88, 0.47), rgba(255, 233, 168, 0.7)) border-box;
    background-size: 100% 100%, 240% 240%;
    color: #170d03;
    font-size: 0;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.36),
        0 0 12px rgba(52, 199, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    animation: template-live-border 4.6s ease-in-out infinite;
}

.template-example-play::before {
    content: "";
    width: 14px;
    height: 15px;
    margin-left: 2px;
    background: linear-gradient(115deg, #fff8c7, #ffb13d 26%, #ff3b7a 52%, #8f7cff 74%, #57fff0 100%);
    background-size: 220% 220%;
    clip-path: polygon(12% 4%, 12% 96%, 96% 50%);
    filter: drop-shadow(0 0 8px rgba(255, 248, 199, 0.16));
    animation: asset-plus-glyph 3.2s ease-in-out infinite;
}

.tap-preview-shell {
    cursor: pointer;
}

.tap-preview-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 160ms ease;
}

.tap-preview-shell video {
    background: #070605;
    opacity: 0;
    transition: opacity 160ms ease;
}

.tap-preview-shell.is-playing video {
    opacity: 1;
}

.tap-preview-shell.is-playing .tap-preview-poster {
    opacity: 0;
}

.tap-preview-play {
    z-index: 4;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 42px;
    height: 42px;
    min-height: 42px;
    opacity: 0.94;
    transform: translate(-50%, -50%);
    transition: opacity 160ms ease, transform 160ms ease;
}

.tap-preview-play::before {
    width: 18px;
    height: 19px;
}

.tap-preview-shell:hover .tap-preview-play,
.tap-preview-shell:focus-within .tap-preview-play {
    transform: translate(-50%, -50%) scale(1.05);
}

.tap-preview-shell.is-playing .tap-preview-play {
    opacity: 0;
    pointer-events: none;
}

.template-example-card strong {
    display: block;
    overflow: hidden;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-detail-page .template-example-card,
.template-detail-page .phone-color-option,
.template-detail-page .asset-upload-group,
.template-detail-page .asset-slot {
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(7, 6, 5, 0.58), rgba(7, 6, 5, 0.58)) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.29), rgba(255, 159, 10, 0.21), rgba(255, 45, 85, 0.22), rgba(139, 92, 246, 0.2), rgba(52, 199, 255, 0.2), rgba(48, 209, 88, 0.15), rgba(255, 233, 168, 0.29)) border-box;
    background-size: 100% 100%, 240% 240%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 22px rgba(0, 0, 0, 0.16);
    animation: template-live-border 6s ease-in-out infinite;
}

.template-detail-page .asset-upload-heading strong,
.template-detail-page .phone-custom-controls span::after,
.template-detail-page .background-custom-option .gradient-color-controls span::after,
.template-detail-page .gradient-color-controls input[type="color"] {
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(18, 13, 7, 0.86), rgba(18, 13, 7, 0.86)) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.65), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.59), rgba(139, 92, 246, 0.59), rgba(52, 199, 255, 0.59), rgba(48, 209, 88, 0.52), rgba(255, 233, 168, 0.65)) border-box;
    background-size: 100% 100%, 240% 240%;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    animation: template-live-border 5s ease-in-out infinite;
}

.template-detail-page .phone-custom-controls span::after,
.template-detail-page .background-custom-option .gradient-color-controls span::after {
    background:
        linear-gradient(90deg, #ff2d55 0%, #ff9500 16%, #ffcc00 31%, #34c759 47%, #32ade6 63%, #5856d6 79%, #af52de 100%) padding-box,
        conic-gradient(from 35deg, #ffe9a8, #ff9f0a, #ff2d55, #8b5cf6, #34c7ff, #30d158, #ffe9a8) border-box;
    background-size: 100% 100%, 240% 240%;
}

.template-detail-page .background-custom-option .gradient-color-controls span:nth-child(2)::after {
    background:
        linear-gradient(270deg, #ff2d55 0%, #ff9500 16%, #ffcc00 31%, #34c759 47%, #32ade6 63%, #5856d6 79%, #af52de 100%) padding-box,
        conic-gradient(from 35deg, #ffe9a8, #ff9f0a, #ff2d55, #8b5cf6, #34c7ff, #30d158, #ffe9a8) border-box;
    background-size: 100% 100%, 240% 240%;
}

.template-detail-page .template-example-card:hover,
.template-detail-page .template-example-card:focus-visible,
.template-detail-page .phone-color-option:hover,
.template-detail-page .phone-color-option:focus-within,
.template-detail-page .phone-color-option:has(input:checked),
.template-detail-page .asset-slot:hover,
.template-detail-page .asset-slot:focus-within,
.template-detail-page .asset-slot.is-zoomed {
    border-color: transparent;
    background:
        linear-gradient(rgba(18, 13, 7, 0.78), rgba(18, 13, 7, 0.78)) padding-box,
        conic-gradient(from 35deg, rgba(255, 248, 199, 0.7), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.56), rgba(139, 92, 246, 0.56), rgba(52, 199, 255, 0.56), rgba(48, 209, 88, 0.47), rgba(255, 248, 199, 0.7)) border-box;
    background-size: 100% 100%, 240% 240%;
    box-shadow:
        0 0 0 3px rgba(216, 165, 111, 0.1),
        0 14px 34px rgba(223, 123, 5, 0.1),
        0 0 16px rgba(52, 199, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.template-preview-player {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 14px;
}

.template-preview-player[hidden] {
    display: none;
}

.template-preview-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 1, 1, 0.84);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.template-preview-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 28px;
    border: 1px solid rgba(246, 207, 128, 0.22);
    background:
        radial-gradient(circle at top, rgba(255, 196, 61, 0.1), transparent 34%),
        rgba(7, 6, 5, 0.94);
    box-shadow: 0 38px 120px rgba(0, 0, 0, 0.62);
}

.template-preview-video {
    width: 100%;
    max-height: 82vh;
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    background: #050302;
    object-fit: contain;
}

.template-preview-close {
    justify-self: end;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(246, 207, 128, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    cursor: pointer;
    font: inherit;
}

.template-preview-title {
    color: var(--muted-strong);
    font-size: 0.78rem;
    font-weight: 850;
    text-align: center;
}

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

.showcase-overlay {
    position: absolute;
    inset: auto 16px 16px 16px;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.showcase-kicker {
    width: fit-content;
    min-height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(15, 11, 12, 0.82);
    border: 1px solid rgba(243, 213, 177, 0.16);
    color: var(--accent-strong);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 800;
}

.showcase-note {
    display: grid;
    gap: 6px;
}

.showcase-note strong {
    font-size: 1.05rem;
}

.showcase-note span {
    color: var(--muted-strong);
    line-height: 1.55;
}

.landing-info-main h3 {
    font-size: 1rem;
}

.landing-info-main p {
    color: var(--muted);
    line-height: 1.65;
}

.catalog-surface {
    overflow: hidden;
}

.catalog-grid {
    display: grid;
    gap: 16px;
}

.catalog-grid-single {
    grid-template-columns: 1fr;
}

.catalog-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 215, 128, 0.22);
    background:
        radial-gradient(circle at 9% 16%, rgba(255, 196, 61, 0.22), transparent 24%),
        radial-gradient(circle at 88% 70%, rgba(255, 151, 15, 0.14), transparent 25%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 52%, rgba(255, 196, 61, 0.08)),
        rgba(255, 255, 255, 0.032);
    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.34),
        0 0 52px rgba(255, 184, 38, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.catalog-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 21px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.14), transparent 28%),
        linear-gradient(305deg, rgba(240, 193, 143, 0.13), transparent 32%);
    opacity: 0.8;
    pointer-events: none;
}

.catalog-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -34px;
    top: -34px;
    border-radius: 999px;
    background: rgba(255, 196, 61, 0.18);
    filter: blur(4px);
    pointer-events: none;
}

.catalog-card-compact {
    grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.catalog-card-media {
    position: relative;
    min-height: 120px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 215, 128, 0.26);
    background:
        radial-gradient(circle at 20% 16%, rgba(255, 196, 61, 0.22), transparent 26%),
        linear-gradient(180deg, #15100b 0%, #221608 100%);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.33),
        0 0 28px rgba(255, 184, 38, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.catalog-card-media-compact {
    min-height: 0;
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 156px;
}

.catalog-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-card-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(120deg, transparent 0 28%, rgba(255, 244, 196, 0.24) 36%, transparent 45%),
        radial-gradient(circle at 50% 105%, rgba(255, 196, 61, 0.26), transparent 38%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.catalog-card-overlay {
    position: absolute;
    inset: auto 14px 14px 14px;
}

.catalog-card-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 4px 4px 4px 0;
}

.catalog-card-heading {
    display: grid;
    gap: 4px;
}

.catalog-card-heading h3 {
    margin: 0;
    font-size: clamp(1.05rem, 4.4vw, 1.46rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.catalog-card-heading .template-badge {
    width: fit-content;
}

.catalog-card-heading p,
.catalog-meta-list li {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.catalog-meta-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.catalog-meta-list li {
    padding: 7px 9px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.036);
    border: 1px solid rgba(243, 213, 177, 0.09);
}

.catalog-meta-list strong {
    color: var(--muted-strong);
}

.guide-surface {
    display: grid;
    gap: 14px;
}

.guide-story-grid {
    display: grid;
    gap: 14px;
}

.guide-story-card {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
}

.guide-story-card p,
.landing-info-side {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.template-upload-surface {
    display: grid;
    gap: 16px;
}

.template-upload-form,
.upload-field-grid,
.upload-field {
    display: grid;
    gap: 12px;
}

.upload-field-grid {
    grid-template-columns: 1fr;
}

.upload-field {
    padding: 15px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
}

.upload-field span {
    color: var(--text);
    font-weight: 800;
}

.upload-field small {
    color: var(--muted);
    line-height: 1.45;
}

.upload-resolution {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--accent-strong);
    background: rgba(216, 165, 111, 0.1);
    border: 1px solid rgba(216, 165, 111, 0.18);
    font-size: 0.78rem;
}

.upload-field input[type="file"] {
    width: 100%;
}

.asset-upload-board {
    display: grid;
    gap: 12px;
}

.phone-color-picker {
    display: grid;
    gap: 14px;
    padding: 15px;
    border-radius: 24px;
    border: 1px solid rgba(216, 165, 111, 0.2);
    background:
        radial-gradient(circle at top left, rgba(255, 228, 163, 0.13), transparent 35%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
}

.phone-color-picker h3,
.phone-color-picker p {
    margin: 0;
}

.phone-color-picker h3 {
    color: var(--text);
    font-size: 1.02rem;
}

.phone-color-picker p {
    color: var(--muted);
    line-height: 1.5;
}

.phone-color-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.phone-color-option {
    position: relative;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 9px 6px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(7, 6, 5, 0.45);
    color: var(--muted-strong);
    cursor: pointer;
    text-align: center;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    z-index: 1;
}

.phone-color-option > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.phone-color-option:has(input:checked) {
    border-color: rgba(255, 226, 157, 0.8);
    box-shadow:
        0 0 0 3px rgba(216, 165, 111, 0.14),
        0 18px 44px rgba(223, 123, 5, 0.16);
    color: var(--text);
}

.phone-color-option:hover,
.phone-color-option:focus-within {
    border-color: rgba(246, 207, 128, 0.58);
    transform: translateY(-1px);
}

.phone-color-option.is-expanded {
    z-index: 30;
}

.phone-color-option.is-expanded:hover,
.phone-color-option.is-expanded:focus-within {
    transform: none;
}

.phone-color-swatch {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: visible;
    border-radius: 16px;
    border: 0;
    background: transparent;
    transform-origin: center;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.template-detail-page .phone-color-option:not(.phone-custom-option):not(.background-option) {
    min-height: 78px;
    padding: 5px;
    place-items: center;
    border-radius: 17px;
}

.template-detail-page .phone-color-option:not(.phone-custom-option):not(.background-option) .phone-color-swatch {
    width: 100%;
    height: 68px;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.template-detail-page .phone-color-option:not(.phone-custom-option):not(.background-option) .phone-color-swatch img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
    transform-origin: center;
}

.phone-color-option.is-expanded .phone-color-swatch {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: scale(4);
}

.phone-color-swatch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.38));
}

.background-style-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.template-detail-page .background-option:not(.background-custom-option) {
    min-height: 96px;
    padding: 5px;
    border-radius: 17px;
}

.background-swatch {
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.26);
}

.background-swatch img {
    border-radius: inherit;
    object-fit: cover;
    filter: none;
}

.template-detail-page .background-option:not(.background-custom-option) .background-swatch {
    width: 100%;
    height: 86px;
    aspect-ratio: auto;
    border-radius: 13px;
}

.background-option.is-expanded .background-swatch {
    transform: scale(2.8);
}

.background-custom-option {
    grid-column: 1 / -1;
    grid-template-columns: minmax(92px, 116px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    min-height: 132px;
    padding: 7px 12px 7px 7px;
    text-align: left;
}

.background-custom-option .background-gradient-swatch {
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.background-custom-option > span:not(.phone-color-swatch):not(.gradient-color-controls) {
    grid-column: 2;
    align-self: end;
    font-size: 0.72rem;
}

.phone-custom-option {
    grid-column: 1 / -1;
    grid-template-columns: minmax(92px, 116px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    min-height: 132px;
    padding: 7px 12px 7px 4px;
    text-align: left;
}

.phone-custom-option .phone-color-swatch {
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.phone-body-custom-swatch {
    position: relative;
    width: 94px;
    height: 126px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.38));
}

.phone-body-custom-swatch[style*="#D8A56F"],
.phone-body-custom-swatch[style*="#d8a56f"] {
    --phone-body-color: #00E5D4 !important;
}

.phone-custom-option:has(input:checked) .phone-body-custom-swatch {
    filter:
        drop-shadow(0 18px 24px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 14px rgba(246, 207, 128, 0.24));
}

.phone-body-custom-swatch::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--phone-body-color);
    -webkit-mask: url("phone-color-custom-mask.png?v=20260504c") center / contain no-repeat;
    mask: url("phone-color-custom-mask.png?v=20260504c") center / contain no-repeat;
}

.phone-body-custom-swatch::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("phone-color-custom-detail.png?v=20260504c") center / contain no-repeat;
    opacity: 0.98;
    pointer-events: none;
}

.phone-custom-option > span:not(.phone-color-swatch):not(.gradient-color-controls) {
    grid-column: 2;
    align-self: end;
    font-size: 0.72rem;
}

.phone-custom-controls {
    align-self: start;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
}

.phone-custom-controls span {
    position: relative;
    min-height: 46px;
    padding-bottom: 31px;
}

.phone-custom-controls span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(216, 165, 111, 0.35);
    background:
        linear-gradient(90deg, #ff2d55 0%, #ff9500 16%, #ffcc00 31%, #34c759 47%, #32ade6 63%, #5856d6 79%, #af52de 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.phone-custom-controls span:focus-within::after {
    border-color: rgba(255, 226, 157, 0.86);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.24),
        0 0 0 3px rgba(216, 165, 111, 0.16),
        0 12px 24px rgba(0, 0, 0, 0.22);
}

.background-gradient-swatch {
    width: 94px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.36), transparent 26%),
        linear-gradient(135deg, var(--gradient-a), var(--gradient-b));
    border-radius: 24px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 18px 30px rgba(0, 0, 0, 0.3);
}

.background-custom-option .gradient-color-controls {
    align-self: start;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
}

.gradient-color-controls {
    display: grid;
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gradient-color-controls span {
    display: grid;
    gap: 5px;
}

.background-custom-option .gradient-color-controls span {
    position: relative;
    min-height: 46px;
    padding-bottom: 31px;
}

.background-custom-option .gradient-color-controls span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(216, 165, 111, 0.35);
    background:
        linear-gradient(90deg, #ff2d55 0%, #ff9500 16%, #ffcc00 31%, #34c759 47%, #32ade6 63%, #5856d6 79%, #af52de 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.background-custom-option .gradient-color-controls span:nth-child(2)::after {
    background:
        linear-gradient(270deg, #ff2d55 0%, #ff9500 16%, #ffcc00 31%, #34c759 47%, #32ade6 63%, #5856d6 79%, #af52de 100%);
}

.background-custom-option .gradient-color-controls span:focus-within::after {
    border-color: rgba(255, 226, 157, 0.86);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.24),
        0 0 0 3px rgba(216, 165, 111, 0.16),
        0 12px 24px rgba(0, 0, 0, 0.22);
}

.gradient-color-controls small {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gradient-color-controls input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    position: static;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(216, 165, 111, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.background-custom-option .gradient-color-controls input[type="color"] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 28px;
    opacity: 0.01;
    z-index: 2;
    border-radius: 999px;
}

.phone-custom-controls input[type="color"] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 28px;
    opacity: 0.01;
    z-index: 2;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #ff2d55 0%, #ff9500 16%, #ffcc00 31%, #34c759 47%, #32ade6 63%, #5856d6 79%, #af52de 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.22);
}

.phone-custom-controls input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.phone-custom-controls input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #ff2d55 0%, #ff9500 16%, #ffcc00 31%, #34c759 47%, #32ade6 63%, #5856d6 79%, #af52de 100%);
}

.phone-custom-controls input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #ff2d55 0%, #ff9500 16%, #ffcc00 31%, #34c759 47%, #32ade6 63%, #5856d6 79%, #af52de 100%);
}

.phone-color-option > span:not(.phone-color-swatch):not(.gradient-color-controls) {
    overflow: hidden;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.asset-upload-group {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(216, 165, 111, 0.18);
    background:
        radial-gradient(circle at top right, rgba(246, 207, 128, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
}

.asset-upload-heading {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.asset-upload-heading h3,
.asset-upload-group p {
    margin: 0;
}

.asset-upload-heading h3 {
    color: var(--text);
    font-size: 0.98rem;
}

.asset-upload-heading strong {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--accent-strong);
    background: rgba(216, 165, 111, 0.1);
    border: 1px solid rgba(216, 165, 111, 0.18);
    font-size: 0.68rem;
    white-space: nowrap;
}

.asset-upload-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.asset-upload-group p {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.asset-slot-grid {
    display: grid;
    gap: 10px;
}

.asset-slot-grid-hero {
    grid-template-columns: minmax(0, 156px);
    justify-content: start;
}

.asset-slot-grid-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.asset-slot {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 7px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
        rgba(7, 6, 5, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.asset-slot:hover,
.asset-slot:focus-within {
    border-color: rgba(246, 207, 128, 0.62);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(216, 165, 111, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.asset-slot.is-filled {
    cursor: zoom-in;
}

.asset-slot.is-zoomed {
    z-index: 20;
    border-color: rgba(255, 225, 154, 0.78);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 225, 154, 0.32),
        0 0 46px rgba(255, 196, 61, 0.2);
    transform: scale(2.2);
}

.asset-upload-group-hero .asset-slot.is-zoomed {
    transform: scale(2.6);
}

.asset-slot.is-zoomed .asset-slot-preview {
    border-color: rgba(255, 225, 154, 0.58);
}

.asset-slot.is-zoomed .asset-slot-meta,
.asset-slot.is-zoomed .asset-slot-remove {
    opacity: 0;
    pointer-events: none;
}

.asset-slot input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.asset-slot.is-filled input[type="file"] {
    top: 12px;
    left: 12px;
    z-index: -1;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.asset-slot-remove {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 5;
    display: none;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 210, 133, 0.28);
    color: #ff5d5d;
    background: rgba(7, 6, 5, 0.78);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font: 900 1.45rem/1 "Segoe UI Variable Text", "Aptos", sans-serif;
    cursor: pointer;
}

.asset-slot.is-filled .asset-slot-remove {
    display: grid;
}

.asset-slot-remove:hover,
.asset-slot-remove:focus-visible {
    color: #fff5f5;
    border-color: rgba(255, 108, 108, 0.7);
    background: rgba(91, 15, 15, 0.86);
}

.asset-slot-preview {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 9 / 16;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(246, 207, 128, 0.2);
    background:
        radial-gradient(circle at 50% 16%, rgba(246, 207, 128, 0.24), transparent 30%),
        linear-gradient(160deg, rgba(246, 207, 128, 0.11), rgba(255, 255, 255, 0.025) 45%, rgba(0, 0, 0, 0.18));
}

.asset-slot-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 28%),
        radial-gradient(circle at bottom, rgba(216, 165, 111, 0.12), transparent 42%);
    pointer-events: none;
}

.asset-slot-preview img,
.asset-slot-preview video {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-slot.is-filled .asset-slot-preview img[src],
.asset-slot.is-filled .asset-slot-preview video[src] {
    display: block;
}

.asset-slot.is-filled .asset-slot-preview::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 24%);
}

.asset-slot-plus {
    position: relative;
    z-index: 1;
    display: grid;
    width: 42px;
    height: 42px;
    overflow: hidden;
    place-items: center;
    border-radius: 50%;
    color: transparent;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.38), transparent 26%),
        linear-gradient(#120d07, #120d07) padding-box,
        conic-gradient(from 35deg, #ffe9a8, #ff9f0a, #ff2d55, #8b5cf6, #34c7ff, #30d158, #ffe9a8) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    border: 1px solid transparent;
    box-shadow:
        0 12px 34px rgba(216, 165, 111, 0.3),
        0 0 18px rgba(255, 79, 136, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.11);
    font-size: 0;
    font-weight: 900;
    line-height: 0;
    transition: opacity 160ms ease, transform 160ms ease;
    animation: asset-plus-ring 4.6s ease-in-out infinite;
}

.asset-slot-plus::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58%;
    height: 15%;
    border-radius: 999px;
    background: linear-gradient(115deg, #fff8c7, #ffb13d 24%, #ff3b7a 48%, #8f7cff 70%, #57fff0 92%);
    background-size: 260% 260%;
    box-shadow: 0 0 12px rgba(255, 229, 168, 0.2);
    transform: translate(-50%, -50%);
    animation: asset-plus-glyph 2.8s ease-in-out infinite;
}

.asset-slot-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15%;
    height: 58%;
    border-radius: 999px;
    background: linear-gradient(115deg, #fff8c7, #ffb13d 24%, #ff3b7a 48%, #8f7cff 70%, #57fff0 92%);
    background-size: 260% 260%;
    box-shadow: 0 0 12px rgba(255, 229, 168, 0.2);
    transform: translate(-50%, -50%);
    animation: asset-plus-glyph 2.8s ease-in-out infinite;
}

@keyframes asset-plus-ring {
    0%,
    100% {
        background-position: 50% 50%, 50% 50%, 0% 50%;
    }

    50% {
        background-position: 50% 50%, 50% 50%, 100% 50%;
        box-shadow:
            0 14px 38px rgba(216, 165, 111, 0.36),
            0 0 22px rgba(52, 199, 255, 0.18),
            inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    }
}

@keyframes asset-plus-glyph {
    0%,
    100% {
        background-position: 0% 50%;
        filter: saturate(1.05);
    }

    50% {
        background-position: 100% 50%;
        filter: saturate(1.35);
    }
}

.asset-slot.is-filled .asset-slot-plus {
    opacity: 0;
    transform: scale(0.7);
}

.asset-slot-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.asset-slot-meta strong {
    color: var(--text);
    font-size: 0.78rem;
}

.asset-slot-meta small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.66rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-slot.is-filled .asset-slot-meta small {
    color: var(--accent-strong);
}

.asset-slot-background {
    max-width: 240px;
}

@media (max-width: 560px) {
    .template-detail-page {
        display: grid;
        gap: 18px;
    }

    .template-detail-page .template-start,
    .template-detail-page .template-example-strip,
    .template-detail-page .template-upload-surface,
    .template-detail-page .compact-guide-surface {
        margin: 0;
    }

    .template-detail-page .template-detail-hero,
    .template-detail-page .template-example-strip,
    .template-detail-page .template-upload-surface,
    .template-detail-page .compact-guide-surface {
        box-shadow:
            0 16px 36px rgba(0, 0, 0, 0.34),
            0 0 14px rgba(255, 79, 136, 0.035),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .template-detail-page .template-detail-hero {
        gap: 10px;
        padding: 14px;
        border-radius: 24px;
    }

    .template-detail-page .template-example-strip,
    .template-detail-page .template-upload-surface,
    .template-detail-page .compact-guide-surface {
        padding: 14px;
        border-radius: 24px;
    }

    .template-detail-page .phone-color-picker {
        gap: 10px;
        padding: 12px;
        border-radius: 20px;
    }

    .template-detail-page .phone-color-picker p {
        font-size: 0.9rem;
        line-height: 1.35;
    }

    .template-detail-page .phone-color-grid {
        gap: 6px;
    }

    .template-detail-page .phone-color-option:not(.phone-custom-option):not(.background-option) {
        min-height: 66px;
        padding: 4px;
        border-radius: 14px;
    }

    .template-detail-page .phone-color-option:not(.phone-custom-option):not(.background-option) .phone-color-swatch {
        height: 58px;
    }

    .template-detail-page .background-option:not(.background-custom-option) {
        min-height: 80px;
        padding: 4px;
        border-radius: 14px;
    }

    .template-detail-page .background-option:not(.background-custom-option) .background-swatch {
        height: 72px;
        border-radius: 11px;
    }

    .asset-upload-board {
        gap: 9px;
    }

    .asset-upload-group {
        gap: 8px;
        padding: 9px;
        border-radius: 18px;
    }

    .asset-upload-heading {
        gap: 8px;
    }

    .asset-upload-heading h3 {
        font-size: 0.9rem;
    }

    .asset-upload-heading strong {
        padding: 5px 7px;
        font-size: 0.58rem;
    }

    .asset-upload-kicker {
        font-size: 0.58rem;
        letter-spacing: 0.09em;
    }

    .asset-upload-group p {
        font-size: 0.76rem;
        line-height: 1.35;
    }

    .asset-slot-grid {
        gap: 7px;
    }

    .asset-slot-grid-hero {
        grid-template-columns: minmax(0, 92px);
    }

    .asset-slot-grid-gallery {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .asset-slot {
        gap: 4px;
        padding: 5px;
        border-radius: 14px;
    }

    .asset-slot-preview {
        border-radius: 10px;
    }

    .asset-slot-plus {
        width: 30px;
        height: 30px;
    }

    .asset-slot-remove {
        top: 5px;
        right: 5px;
        width: 24px;
        height: 24px;
        font-size: 1.05rem;
    }

    .asset-slot-meta strong {
        font-size: 0.62rem;
    }

    .asset-slot-meta small {
        font-size: 0.54rem;
        line-height: 1.1;
    }

    .asset-slot.is-zoomed {
        transform: scale(2.6);
    }

    .asset-upload-group-hero .asset-slot.is-zoomed {
        transform: scale(3.4);
    }
}

.flow-hero-shell {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at top left, rgba(216, 165, 111, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
        var(--bg-panel);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.flow-hero-copy,
.flow-hero-media,
.flow-card,
.cta-stack {
    display: grid;
    gap: 10px;
}

.flow-hero-copy h1 {
    font-size: clamp(1.18rem, 4.6vw, 1.65rem);
    line-height: 1.02;
}

.flow-inline-meta,
.flow-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mini-preview-shell {
    width: clamp(88px, 21vw, 120px);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(243, 213, 177, 0.18);
    background:
        radial-gradient(circle at 20% 18%, rgba(216, 165, 111, 0.16), transparent 24%),
        linear-gradient(180deg, #171214 0%, #241b1d 100%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.mini-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flow-pane-grid {
    display: grid;
    gap: 14px;
}

.flow-card {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.03);
}

.flow-card-primary {
    background:
        linear-gradient(135deg, rgba(216, 165, 111, 0.1), rgba(255, 255, 255, 0.025)),
        var(--bg-panel-strong);
}

.compact-guide-surface {
    display: grid;
    gap: 14px;
}

.compact-trust-panel {
    margin-top: 6px;
}

.download-dock {
    position: sticky;
    bottom: 10px;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(17, 14, 16, 0.94);
}

.result-download-surface {
    display: grid;
    gap: 16px;
}

.result-download-surface h1 {
    font-size: clamp(1.8rem, 8vw, 3.5rem);
    line-height: 1;
}

.result-file-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
}

.result-file-card div {
    display: grid;
    gap: 4px;
}

.result-file-label {
    color: var(--muted);
    font-size: 0.82rem;
}

.result-file-card strong {
    color: var(--text);
    font-size: 1.08rem;
}

.result-download-dock {
    position: sticky;
}

.auth-surface,
.account-hero,
.archive-surface,
.shop-hero,
.admin-hero,
.admin-section {
    display: grid;
    gap: 16px;
}

.auth-surface {
    max-width: 620px;
    margin: 0 auto;
}

.auth-surface h1,
.shop-hero h1,
.account-hero h1 {
    font-size: clamp(1.8rem, 8vw, 3.8rem);
    line-height: 1;
}

.auth-form {
    max-width: 440px;
}

.auth-gate-card,
.account-profile-card,
.referral-card,
.archive-item,
.shop-card {
    border-radius: 22px;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.035);
}

.auth-gate-card {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.auth-gate-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.account-profile-card {
    overflow: hidden;
}

.account-profile-summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.account-profile-summary::-webkit-details-marker {
    display: none;
}

.account-profile-summary::marker {
    content: "";
}

.profile-avatar {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 18px;
    border: 1px solid transparent;
    color: var(--accent-strong);
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
        var(--live-field) padding-box,
        var(--live-ring-strong) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 14px 34px rgba(223, 123, 5, 0.12),
        0 0 16px rgba(52, 199, 255, 0.06);
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1;
    animation: template-live-border 6s ease-in-out infinite;
}

.profile-identity {
    min-width: 0;
}

.profile-identity small,
.profile-credit small {
    display: block;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-identity strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--text);
    font-size: clamp(1.25rem, 5vw, 2rem);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-identity em {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--muted);
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-credit {
    display: grid;
    min-width: 88px;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(216, 165, 111, 0.16);
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 165, 111, 0.22), transparent 65%),
        rgba(255, 255, 255, 0.035);
    text-align: center;
}

.profile-credit strong {
    color: var(--text);
    font-size: clamp(1.65rem, 8vw, 2.8rem);
    line-height: 0.9;
}

.profile-buy-button {
    grid-column: 1 / 3;
    min-height: 42px;
    padding: 0 18px;
}

.profile-edit-button {
    display: inline-flex;
    grid-column: 3;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--accent-strong);
    background: rgba(216, 165, 111, 0.1);
    border: 1px solid rgba(216, 165, 111, 0.18);
    cursor: pointer;
    font-weight: 800;
    font-size: 0.82rem;
    font-family: inherit;
}

.account-settings-body {
    display: grid;
    gap: 16px;
    padding: 0 18px 18px;
}

.account-profile-settings {
    padding-top: 4px;
}

.account-settings-form {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.referral-card {
    overflow: hidden;
}

.referral-card h2,
.referral-card p {
    margin: 0;
}

.referral-card p {
    color: var(--muted);
    line-height: 1.55;
}

.referral-toggle {
    display: grid;
    min-height: 44px;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-radius: 18px;
    border: 1px solid transparent;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.2), transparent 28%),
        linear-gradient(rgba(18, 13, 7, 0.86), rgba(18, 13, 7, 0.86)) padding-box,
        var(--live-ring-strong) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 16px 38px rgba(223, 123, 5, 0.12),
        0 0 16px rgba(52, 199, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: var(--accent-strong);
    cursor: pointer;
    list-style: none;
    animation: template-live-border 6s ease-in-out infinite;
}

.referral-toggle::-webkit-details-marker {
    display: none;
}

.referral-toggle::marker {
    content: "";
}

.referral-toggle span {
    justify-self: center;
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.referral-toggle span {
    position: relative;
    padding-right: 24px;
}

.referral-toggle span::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
}

.referral-collapsible[open] .referral-toggle span::after {
    transform: translateY(-25%) rotate(225deg);
}

.referral-content {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
}

.referral-promo-template {
    display: grid;
    grid-template-columns: minmax(82px, 0.42fr) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(216, 165, 111, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 215, 128, 0.18), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02));
}

.referral-promo-media {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 9 / 16;
    min-height: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 224, 164, 0.22);
    background: #090706;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

.referral-promo-media img,
.referral-promo-media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.referral-promo-media::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(180deg, transparent 44%, rgba(4, 3, 2, 0.68) 100%),
        radial-gradient(circle at 35% 20%, rgba(255, 220, 144, 0.22), transparent 28%);
    pointer-events: none;
}

.referral-promo-copy {
    display: grid;
    gap: 8px;
}

.referral-promo-copy h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.2rem, 5vw, 1.75rem);
    line-height: 1.02;
}

.referral-promo-copy p {
    font-size: 0.92rem;
}

.referral-link-field {
    display: grid;
    gap: 8px;
    color: var(--muted-strong);
}

.referral-link-field input {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font: inherit;
}

.referral-link-row {
    display: grid;
    grid-template-columns: 1fr 46px;
    gap: 8px;
}

.copy-referral-button {
    min-height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(244, 135, 73, 0.18), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.05);
    color: var(--text);
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.copy-referral-button:hover,
.copy-referral-button.is-copied {
    border-color: rgba(244, 135, 73, 0.72);
    background:
        linear-gradient(180deg, rgba(244, 135, 73, 0.28), rgba(255, 255, 255, 0.08)),
        rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.copy-icon {
    position: relative;
    width: 18px;
    height: 20px;
}

.copy-icon::before,
.copy-icon::after {
    content: "";
    position: absolute;
    border: 1.8px solid currentColor;
    border-radius: 5px;
    background: transparent;
}

.copy-icon::before {
    inset: 2px 4px 4px 0;
    opacity: 0.52;
}

.copy-icon::after {
    inset: 0 0 6px 4px;
}

.referral-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.referral-stats span {
    border-radius: 14px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted-strong);
    font-size: 0.82rem;
    text-align: center;
}

.referral-list {
    padding-top: 2px;
}

.referral-list span {
    display: block;
    color: var(--muted);
    font-size: 0.88rem;
}

@media (max-width: 520px) {
    .referral-promo-template {
        grid-template-columns: minmax(78px, 112px) minmax(0, 1fr);
        padding: 10px;
    }

    .referral-promo-copy .button {
        min-height: 38px;
    }
}

.archive-list,
.shop-grid {
    display: grid;
    gap: 14px;
}

.archive-item {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.archive-item div {
    display: grid;
    gap: 7px;
}

.archive-item p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.shop-card {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.shop-card p,
.shop-card strong {
    margin: 0;
}

.shop-card p {
    color: var(--muted);
}

.shop-card > strong {
    color: var(--accent-strong);
}

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

.admin-metrics article,
.admin-order-card,
.admin-user-card,
.admin-referral-card {
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
}

.admin-metrics article {
    display: grid;
    gap: 6px;
    padding: 16px;
}

.admin-metrics span,
.admin-order-card p,
.admin-user-card p {
    margin: 0;
    color: var(--muted);
}

.admin-metrics strong {
    color: var(--text);
    font-size: 1.8rem;
    line-height: 1;
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

.admin-filter-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.035);
}

.admin-filter-form label {
    display: grid;
    gap: 7px;
    color: var(--muted-strong);
}

.admin-filter-form input,
.admin-filter-form select {
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    padding: 0 11px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font: inherit;
}

.admin-filter-form select option {
    background: #101827;
    color: #f6f1e8;
}

.admin-filter-form select:focus {
    outline: 2px solid rgba(244, 135, 73, 0.55);
    outline-offset: 2px;
}

.admin-user-filter-form {
    margin: 0 18px 18px;
}

.pagination-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.pagination-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pagination-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-strong);
    font-size: 0.9rem;
}

.pagination-form input {
    width: 76px;
    min-height: 36px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    padding: 0 10px;
    font: inherit;
}

.pagination-count {
    color: var(--muted);
    font-size: 0.9rem;
}

.pagination-disabled {
    opacity: 0.42;
    pointer-events: none;
}

.admin-template-groups {
    display: grid;
    gap: 10px;
}

.admin-template-group-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.035);
}

.admin-template-group-card span,
.admin-template-group-card small {
    color: var(--muted);
}

.admin-drawer {
    padding: 0;
    overflow: hidden;
}

.admin-drawer summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    cursor: pointer;
    list-style: none;
}

.admin-drawer summary::-webkit-details-marker {
    display: none;
}

.admin-drawer summary::after {
    content: "+";
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.admin-drawer[open] summary::after {
    content: "-";
}

.admin-drawer summary span:first-child {
    display: grid;
    gap: 4px;
}

.admin-drawer summary strong {
    font-size: clamp(1.05rem, 4vw, 1.35rem);
}

.admin-drawer-meta {
    color: var(--muted);
    font-size: 0.86rem;
    text-align: right;
}

.admin-drawer-body {
    padding: 0 18px 18px;
}

.admin-order-card,
.admin-user-card,
.admin-referral-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.admin-referral-main {
    display: grid;
    gap: 12px;
}

.admin-referral-main p {
    margin: 4px 0 0;
    color: var(--muted);
}

.referral-branch-stats,
.referral-package-grid {
    display: grid;
    gap: 8px;
}

.referral-branch-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.referral-branch-stats span,
.referral-package-cell {
    border-radius: 14px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.referral-branch-stats span {
    color: var(--muted-strong);
    font-size: 0.84rem;
}

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

.referral-package-cell {
    display: grid;
    gap: 4px;
    color: var(--muted);
}

.referral-package-cell.has-purchases {
    border: 1px solid rgba(244, 135, 73, 0.38);
    background:
        linear-gradient(180deg, rgba(244, 135, 73, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.04);
}

.referral-package-cell strong {
    color: var(--text);
    font-size: 1.35rem;
}

.referral-package-cell small {
    color: var(--muted);
}

.admin-order-main {
    display: grid;
    gap: 9px;
}

.admin-actions,
.admin-credit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-actions form,
.admin-credit-form {
    margin: 0;
}

.admin-credit-form input,
.admin-credit-form select {
    min-height: 32px;
    width: 96px;
    border-radius: 11px;
    border: 1px solid var(--line-strong);
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font: inherit;
}

.admin-credit-form input[name="admin_note"] {
    width: min(260px, 100%);
}

.admin-credit-form select {
    width: 128px;
}

.marketing-band,
.step-grid,
.audience-grid,
.faq-grid,
.template-grid,
.detail-grid,
.upload-guide-grid {
    display: grid;
    gap: 16px;
}

.band-card,
.step-card,
.audience-card,
.faq-card,
.metric-card,
.guide-card,
.trust-panel,
.activity-item {
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    padding: 18px;
}

.band-card,
.step-card,
.audience-card,
.faq-card,
.metric-card,
.guide-card,
.trust-panel,
.activity-item {
    display: grid;
    gap: 10px;
}

.band-card span,
.step-card p,
.audience-card p,
.faq-card p,
.metric-card span,
.guide-card p,
.activity-item p,
.activity-item span {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.section-surface {
    padding: 18px;
}

.section-header {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.step-index {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.22), transparent 28%),
        var(--live-field) padding-box,
        var(--live-ring-mid) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    color: var(--accent-strong);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow:
        0 10px 22px rgba(216, 165, 111, 0.1),
        0 0 12px rgba(52, 199, 255, 0.045);
    animation: template-live-border 6s ease-in-out infinite;
}

.template-detail-page .step-index {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    box-sizing: border-box;
    justify-content: center;
    border: 1px solid transparent;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.25), transparent 28%),
        linear-gradient(rgba(18, 13, 7, 0.88), rgba(18, 13, 7, 0.88)) padding-box,
        conic-gradient(from 35deg, rgba(255, 233, 168, 0.65), rgba(255, 159, 10, 0.65), rgba(255, 45, 85, 0.59), rgba(139, 92, 246, 0.59), rgba(52, 199, 255, 0.59), rgba(48, 209, 88, 0.52), rgba(255, 233, 168, 0.65)) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    color: var(--accent-strong);
    font-size: 0.86rem;
    box-shadow:
        0 12px 24px rgba(216, 165, 111, 0.12),
        0 0 14px rgba(52, 199, 255, 0.055);
    animation: template-live-border 5.2s ease-in-out infinite;
}

.spotlight-surface {
    display: grid;
    gap: 16px;
}

.upload-form-card {
    margin-top: 18px;
}

.activity-log {
    display: grid;
    gap: 12px;
}

.activity-item strong {
    font-size: 0.98rem;
}

.activity-item span {
    font-size: 0.84rem;
    color: var(--muted-strong);
}

.render-progress-card {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 206, 122, 0.22);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 202, 105, 0.18), transparent 34%),
        rgba(255, 255, 255, 0.035);
}

.render-stage-card {
    padding: 16px;
}

.render-stage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.render-stage-step {
    display: grid;
    place-items: center;
    gap: 9px;
    min-height: 108px;
    padding: 12px 8px;
    border: 1px solid rgba(255, 216, 145, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 212, 138, 0.12), transparent 58%),
        rgba(255, 255, 255, 0.035);
    text-align: center;
    transition:
        border-color 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

.render-stage-step strong {
    color: var(--text);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.render-stage-step.is-pending {
    opacity: 0.5;
}

.render-stage-step.is-active {
    border-color: rgba(255, 198, 86, 0.5);
    box-shadow: 0 0 26px rgba(255, 177, 46, 0.12);
    transform: translateY(-1px);
}

.render-stage-step.is-complete {
    border-color: rgba(255, 220, 146, 0.34);
}

.render-stage-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 999px;
    border: 1px solid rgba(255, 210, 128, 0.28);
    background:
        linear-gradient(145deg, rgba(255, 237, 187, 0.16), rgba(255, 145, 0, 0.08)),
        rgba(0, 0, 0, 0.3);
}

.render-stage-step.is-active .render-stage-icon::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(255, 184, 57, 0.2);
    border-top-color: #ffe7a3;
    border-right-color: #ff9a12;
    animation: render-stage-spin 0.85s linear infinite;
}

.render-stage-check {
    color: rgba(255, 238, 197, 0.36);
    font-size: 1.08rem;
    font-weight: 950;
}

.render-stage-step.is-complete .render-stage-icon {
    border-color: rgba(255, 221, 151, 0.54);
    background: linear-gradient(145deg, #fff1b8, #ffb12e 58%, #d66c00);
    box-shadow:
        0 0 22px rgba(255, 177, 46, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.render-stage-step.is-complete .render-stage-check {
    color: #180f05;
}

.render-stage-download {
    margin-top: 14px;
}

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

.render-progress-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.render-progress-track span {
    display: block;
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
    background: linear-gradient(90deg, #fff1b8, #ffb12e, #f57900);
    box-shadow: 0 0 22px rgba(255, 177, 46, 0.42);
    transition: width 0.35s ease;
}

.render-progress-frame {
    margin: 12px 0 0;
    color: var(--accent-strong);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
}

.selling-points,
.plain-list,
.upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.selling-points,
.plain-list {
    display: grid;
    gap: 12px;
}

.selling-points li,
.plain-list li {
    position: relative;
    padding-left: 18px;
    color: var(--muted-strong);
    line-height: 1.55;
}

.selling-points li::before,
.plain-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
}

.metric-card strong {
    font-size: 1.08rem;
}

.hero-compact {
    padding: 22px;
}

.template-grid {
    margin-top: 2px;
}

.template-card {
    overflow: hidden;
}

.template-visual {
    position: relative;
    min-height: 360px;
    background:
        radial-gradient(circle at top left, rgba(121, 230, 255, 0.18), transparent 26%),
        radial-gradient(circle at 82% 74%, rgba(155, 140, 255, 0.18), transparent 24%),
        linear-gradient(180deg, #08121f 0%, #12233b 100%);
}

.template-card-video {
    position: absolute;
    inset: 0;
}

.template-meta,
.detail-card {
    padding: 22px;
}

.template-meta-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.template-meta-heading h2 {
    margin: 0;
}

.template-cost-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background:
        var(--live-field) padding-box,
        var(--live-ring-mid) border-box;
    background-size: 100% 100%, 240% 240%;
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow:
        0 10px 22px rgba(216, 165, 111, 0.1),
        0 0 12px rgba(52, 199, 255, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: template-live-border 6s ease-in-out infinite;
}

.meta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 22px;
}

.meta-list dt {
    color: var(--muted);
    margin-bottom: 6px;
}

.meta-list dd {
    margin: 0;
    color: var(--text);
    font-weight: 800;
}

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

.detail-card-cta {
    background:
        linear-gradient(180deg, rgba(121, 230, 255, 0.08), rgba(255, 255, 255, 0.03)),
        var(--bg-panel-strong);
}

.stack-form {
    display: grid;
    gap: 16px;
}

.stack-form label {
    display: grid;
    gap: 8px;
    color: var(--muted-strong);
}

.stack-form input,
.stack-form select,
.stack-form textarea {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid var(--line-strong);
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font: inherit;
}

.stack-form select option,
select option {
    background: #101827;
    color: #f6f1e8;
}

.stack-form select:focus,
select:focus {
    outline: 2px solid rgba(244, 135, 73, 0.55);
    outline-offset: 2px;
}

.stack-form textarea {
    min-height: 150px;
    padding: 14px;
    resize: vertical;
}

.stack-form input[type="file"] {
    padding: 12px 14px;
}

.stack-form input::placeholder,
.stack-form textarea::placeholder {
    color: #7e93b2;
}

.upload-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.upload-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

.upload-list span {
    flex-shrink: 0;
    color: var(--muted);
}

.action-row,
.action-column,
.preview-actions,
.hero-actions {
    margin-top: 18px;
}

.action-column {
    flex-direction: column;
}

.error-banner,
.warning-banner,
.info-banner,
.success-banner {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    line-height: 1.55;
    border: 1px solid transparent;
}

.error-banner {
    background: var(--danger-bg);
    border-color: rgba(255, 143, 147, 0.22);
    color: var(--danger);
}

.warning-banner {
    background: var(--warning-bg);
    border-color: rgba(255, 216, 140, 0.22);
    color: var(--warning);
}

.info-banner {
    background: var(--info-bg);
    border-color: rgba(130, 169, 255, 0.22);
    color: var(--info);
}

.success-banner {
    background: var(--success-bg);
    border-color: rgba(137, 255, 180, 0.2);
    color: var(--success);
}

code {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(121, 230, 255, 0.12);
    color: var(--accent);
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.92em;
}

.site-footer {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    padding: 20px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.footer-links a {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.04);
}

.preview-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 16px;
}

.preview-modal[hidden] {
    display: none;
}

.preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 7, 14, 0.82);
    backdrop-filter: blur(10px);
}

.preview-modal-dialog {
    position: relative;
    width: min(100%, 920px);
    border-radius: 28px;
    border: 1px solid var(--line);
    background: rgba(7, 17, 31, 0.94);
    padding: 18px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.preview-modal-video {
    width: 100%;
    max-height: 84vh;
    border-radius: 22px;
    object-fit: contain;
    background: #030915;
}

.preview-close {
    margin-left: auto;
    margin-bottom: 12px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.flow-card,
.result-file-card,
.auth-gate-card,
.account-profile-card,
.referral-card,
.archive-item,
.shop-card,
.admin-metrics article,
.admin-order-card,
.admin-user-card,
.admin-referral-card,
.admin-filter-form,
.admin-template-group-card,
.band-card,
.step-card,
.audience-card,
.faq-card,
.metric-card,
.guide-card,
.trust-panel,
.activity-item,
.upload-list li,
.referral-promo-template,
.referral-branch-stats span,
.referral-package-cell,
.download-dock,
.preview-modal-dialog {
    border: 1px solid transparent;
    background:
        var(--live-glow),
        var(--live-surface) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.3),
        0 0 14px rgba(52, 199, 255, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: template-live-border 7s ease-in-out infinite;
}

.landing-home,
.flow-hero-shell,
.render-progress-card,
.render-stage-step {
    border: 1px solid transparent;
    background:
        var(--live-glow),
        var(--live-surface) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.32),
        0 0 14px rgba(52, 199, 255, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: template-live-border 7s ease-in-out infinite;
}

.landing-home {
    box-shadow: var(--live-shadow);
}

.landing-step-label,
.flow-hero-copy > .eyebrow {
    width: fit-content;
    justify-self: center;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    background:
        var(--live-field) padding-box,
        var(--live-ring-mid) border-box;
    background-size: 100% 100%, 240% 240%;
    color: var(--accent-strong);
    box-shadow:
        0 10px 24px rgba(216, 165, 111, 0.1),
        0 0 12px rgba(52, 199, 255, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: template-live-border 6s ease-in-out infinite;
}

.flow-hero-copy > .eyebrow {
    justify-self: start;
    margin-bottom: 2px;
}

.render-progress-card {
    border-radius: 22px;
    padding: 14px;
}

.render-stage-step {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 248, 199, 0.07), transparent 54%),
        linear-gradient(rgba(9, 8, 7, 0.72), rgba(9, 8, 7, 0.72)) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.render-stage-step.is-pending {
    opacity: 0.54;
}

.render-stage-step.is-active {
    background:
        radial-gradient(circle at 50% 0%, rgba(52, 199, 255, 0.1), transparent 52%),
        linear-gradient(rgba(14, 10, 8, 0.84), rgba(10, 8, 8, 0.82)) padding-box,
        var(--live-ring-strong) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(52, 199, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.render-stage-step.is-complete {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 248, 199, 0.08), transparent 52%),
        linear-gradient(rgba(14, 10, 8, 0.8), rgba(9, 8, 7, 0.78)) padding-box,
        var(--live-ring-mid) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
}

.render-stage-icon {
    border: 1px solid transparent;
    background:
        var(--live-field) padding-box,
        var(--live-ring-mid) border-box;
    background-size: 100% 100%, 240% 240%;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.render-stage-step.is-active .render-stage-icon::before {
    border-color: rgba(52, 199, 255, 0.24);
    border-top-color: rgba(255, 248, 199, 0.78);
    border-right-color: rgba(255, 45, 85, 0.48);
    border-bottom-color: rgba(52, 199, 255, 0.58);
}

.render-stage-check {
    color: rgba(255, 248, 199, 0.36);
}

.render-stage-step.is-complete .render-stage-icon {
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
        var(--live-field) padding-box,
        var(--live-ring-strong) border-box;
    background-size: 100% 100%, 100% 100%, 240% 240%;
    box-shadow:
        0 10px 24px rgba(216, 165, 111, 0.12),
        0 0 14px rgba(52, 199, 255, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.render-stage-step.is-complete .render-stage-check {
    color: var(--accent-strong);
}

.stack-form input,
.stack-form select,
.stack-form textarea,
.admin-filter-form input,
.admin-filter-form select,
.admin-credit-form input,
.admin-credit-form select,
.pagination-form input,
.referral-link-field input,
.upload-field {
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(7, 6, 5, 0.62), rgba(7, 6, 5, 0.62)) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 240% 240%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px rgba(0, 0, 0, 0.16);
    animation: template-live-border 7s ease-in-out infinite;
}

.profile-credit,
.profile-edit-button,
.copy-referral-button,
.footer-links a,
.admin-drawer summary::after,
.preview-close,
code {
    border: 1px solid transparent;
    background:
        var(--live-field) padding-box,
        var(--live-ring-soft) border-box;
    background-size: 100% 100%, 240% 240%;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: template-live-border 7s ease-in-out infinite;
}

@media (min-width: 720px) {
    .page-shell {
        width: min(1240px, calc(100vw - 36px));
        padding-top: 18px;
        padding-bottom: 44px;
    }

    .button {
        width: auto;
    }

    .template-example-strip {
        padding: 16px;
    }

    .template-example-scroller {
        grid-auto-flow: initial;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }

    .account-profile-summary {
        grid-template-columns: auto 1fr auto auto auto;
    }

    .profile-buy-button,
    .profile-edit-button {
        grid-column: auto;
    }

    .landing-hero,
    .template-stage,
    .hero,
    .detail-hero {
        padding: 28px;
    }

    .marketing-band,
    .audience-grid,
    .faq-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .catalog-grid-single {
        grid-template-columns: 1fr;
    }

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

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

    .upload-field-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .asset-slot-grid-hero {
        grid-template-columns: minmax(0, 150px);
        justify-content: start;
    }

    .asset-slot-grid-gallery {
        grid-template-columns: repeat(5, minmax(0, 150px));
    }

    .shop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .admin-filter-form {
        grid-template-columns: 1.4fr 1fr 1fr 1fr auto auto;
        align-items: end;
    }

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

    .admin-referral-filter {
        grid-template-columns: minmax(220px, 320px) auto;
    }

    .admin-referral-main {
        grid-template-columns: 1fr 1.5fr;
        align-items: start;
    }

    .referral-branch-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .referral-package-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .admin-order-card,
    .admin-user-card {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .archive-item {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .upload-guide-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .spotlight-surface {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: start;
    }

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

    .template-card {
        display: grid;
        grid-template-columns: 0.98fr 1.02fr;
    }

    .site-footer {
        grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr);
        align-items: start;
    }

    .footer-links {
        justify-content: flex-end;
    }
}

@media (min-width: 980px) {
    .landing-hero,
    .template-stage {
        grid-template-columns: 1.02fr 0.98fr;
        align-items: center;
        padding: 34px;
    }

    .landing-home {
        max-width: 520px;
        margin: 0 auto;
    }

    .template-detail-hero {
        max-width: 760px;
        margin: 0 auto;
    }

    .flow-hero-shell {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 24px;
    }

    .hero {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
        padding: 30px;
    }

    .detail-hero {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 30px;
    }

    .section-surface,
    .template-meta,
    .detail-card,
    .site-footer {
        padding: 28px;
    }

    .step-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    .catalog-grid-single {
        grid-template-columns: minmax(0, 680px);
        justify-content: center;
    }

    .template-grid {
        gap: 18px;
    }

    .hero-preview-panel-compact {
        justify-items: end;
        align-content: center;
    }
}

@media (max-width: 760px), (prefers-reduced-motion: reduce) {
    :root {
        --shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
        --gold-glow: 0 0 18px rgba(255, 184, 38, 0.16);
        --live-glow: linear-gradient(145deg, rgba(255, 248, 199, 0.045), transparent 42%);
        --live-ring-soft: linear-gradient(135deg, rgba(255, 233, 168, 0.34), rgba(255, 159, 10, 0.2) 46%, rgba(52, 199, 255, 0.22));
        --live-ring-mid: linear-gradient(135deg, rgba(255, 233, 168, 0.48), rgba(255, 159, 10, 0.28) 48%, rgba(52, 199, 255, 0.28));
        --live-ring-strong: linear-gradient(135deg, rgba(255, 248, 199, 0.58), rgba(255, 159, 10, 0.34) 48%, rgba(52, 199, 255, 0.34));
        --live-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    html {
        scroll-behavior: auto;
    }

    body {
        background:
            radial-gradient(circle at 50% -8%, rgba(255, 196, 61, 0.12), transparent 28%),
            linear-gradient(180deg, #020202 0%, #070605 52%, #100b07 100%);
    }

    body::before,
    body::after {
        display: none;
    }

    .topbar,
    .landing-hero,
    .hero,
    .detail-hero,
    .template-stage,
    .section-surface,
    .site-footer,
    .template-card,
    .detail-card,
    .landing-home,
    .template-detail-hero,
    .template-example-card,
    .template-detail-page .template-example-card,
    .template-detail-page .template-step-label,
    .template-detail-page .template-example-strip,
    .template-detail-page .template-upload-surface,
    .template-detail-page .compact-guide-surface,
    .template-detail-page .template-requirements span,
    .template-detail-page .template-preview-close,
    .template-detail-page .phone-color-option,
    .template-detail-page .asset-upload-group,
    .template-detail-page .asset-slot,
    .phone-color-picker,
    .flow-card,
    .render-progress-card,
    .render-stage-step,
    .shop-package-card,
    .account-card,
    .profile-avatar,
    .referral-toggle,
    .referral-promo-template,
    .admin-card {
        animation: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: var(--live-shadow) !important;
    }

    .brand-copy strong,
    .landing-home-copy h1 span,
    .menu-toggle,
    .button,
    .status-pill,
    .proof-chip,
    .template-cost-pill,
    .template-example-play,
    .tap-preview-play,
    .asset-slot-plus,
    .asset-slot-plus::before,
    .asset-slot-plus::after,
    .step-index,
    .render-stage-icon,
    .render-stage-icon::before,
    .render-stage-check,
    .profile-avatar,
    .referral-toggle,
    .template-detail-page .template-step-label {
        animation: none !important;
    }

    .preview-shell,
    .catalog-card-media,
    .template-visual,
    .asset-slot-preview,
    .background-swatch,
    .phone-color-swatch {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
    }

    .brand-copy strong,
    .landing-home-copy h1 span {
        background-size: 100% 100%;
        text-shadow: none;
    }

    .menu-toggle,
    .button,
    .template-example-play,
    .tap-preview-play,
    .asset-slot-plus {
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

    .topbar {
        position: sticky;
        top: 8px;
    }

    .landing-home,
    .template-card,
    .detail-card,
    .section-surface,
    .site-footer,
    .template-detail-page .template-example-strip,
    .template-detail-page .template-upload-surface,
    .template-detail-page .compact-guide-surface,
    .account-card,
    .shop-package-card,
    .admin-card {
        content-visibility: auto;
        contain-intrinsic-size: 1px 420px;
    }
}

@media (max-width: 760px) {
    .render-stage-step.is-active {
        animation: template-live-border 5.8s ease-in-out infinite !important;
    }

    .render-stage-step.is-active .render-stage-icon::before {
        animation: render-stage-spin 0.85s linear infinite !important;
    }
}