/* ScreenText Brand v2.2. Source: screentext.net/BRAND.md. */
:root, [data-theme="light"] {
    color-scheme: light;
    --color-canvas: #FAF5EB;
    --color-canvas-end: #FFFFFF;
    --color-surface: #F5EFEB;
    --color-surface-elevated: #FFFFFF;
    --color-heading: #0C2340;
    --color-text: #0F172A;
    --color-text-muted: #475569;
    --color-border: #7F8D9F;
    --color-border-soft: #C5CED5;
    --color-brand-navy: #0C2340;
    --color-brand-green: #0D5C3A;
    --color-support: #0D5C3A;
    --color-tint: #E6F0E9;
    --color-accent: #B45309;
    --color-on-brand: #FFFFFF;
    --color-link: #0C2340;
    --color-focus: #A84D08;
    --color-danger: #B42318;
    --color-danger-surface: #FFF0ED;
    --color-warning: #92400E;
    --color-warning-surface: #FFF4D6;
    --color-shadow: rgba(12,35,64,.09);
    --color-scrim: rgba(7,20,33,.76);
    --font-display: 'Outfit', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-serif: 'DM Serif Display', Georgia, serif;
}
[data-theme="dark"] {
    color-scheme: dark;
    --color-canvas: #071421;
    --color-canvas-end: #0A1D30;
    --color-surface: #102A43;
    --color-surface-elevated: #0C2340;
    --color-heading: #F8FAFC;
    --color-text: #F8FAFC;
    --color-text-muted: #CBD5E1;
    --color-border: #8296AA;
    --color-border-soft: #486078;
    --color-brand-navy: #19476E;
    --color-brand-green: #0F7047;
    --color-support: #8AE0B3;
    --color-tint: #153E3A;
    --color-accent: #F0B26B;
    --color-link: #9ED0FF;
    --color-focus: #F0B26B;
    --color-danger: #FDA4AF;
    --color-danger-surface: #47212C;
    --color-warning: #FDE68A;
    --color-warning-surface: #42331B;
    --color-shadow: rgba(0,0,0,.24);
}
:root {
    --brand-gradient: linear-gradient(135deg, var(--color-brand-navy), var(--color-brand-green));
    --primary: var(--color-support);
    --secondary: var(--color-link);
    --primary-glow: var(--color-brand-navy);
    --secondary-glow: var(--color-brand-green);
    --background: var(--color-canvas);
    --surface: var(--color-surface-elevated);
    --surface-glass: var(--color-surface);
    --text: var(--color-text);
}
html, body {
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}
html { scroll-padding-top: 100px; }
body { background: linear-gradient(155deg, var(--color-canvas), var(--color-canvas-end)); background-attachment: fixed; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--color-heading); line-height: 1.2; }
button,input,select,textarea { font-family: var(--font-body); }
button,summary,a,input,select,textarea { -webkit-tap-highlight-color: transparent; }
button,select,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) { min-height: 44px; }
button { cursor: pointer; }
a { color: var(--color-link); }
p a, .policy-container a { text-decoration: underline; text-underline-offset: .2em; }
::selection { background: var(--color-brand-green); color: #fff; }
:focus-visible { outline: 3px solid var(--color-focus) !important; outline-offset: 4px; }
input, textarea, select { color: var(--color-text); background-color: var(--color-surface-elevated); border-color: var(--color-border); }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
input[type="checkbox"],input[type="radio"],input[type="range"] { accent-color: var(--color-brand-green); }
option { background: var(--color-surface-elevated); color: var(--color-text); }
[disabled] { opacity: .65; cursor: not-allowed; }
img,video { max-width: 100%; }
[hidden] { display: none !important; }
.blob,.tool-card-glow,.pricing-glow,.hero-grid,.ambient-glow { display: none !important; }
.gradient-text,.logo-ai { color: var(--color-support); background: none; -webkit-text-fill-color: currentColor; }
.st-skip-link { position: fixed; top: 8px; left: 16px; z-index: 100000; padding: 12px 20px; border-radius: 8px; background: var(--color-surface-elevated); transform: translateY(-160%); }
.st-skip-link:focus { transform: translateY(0); }

/* One identity, shared by the public header, sidebar, account screens and footer. */
.nav-logo,.auth-brand,.footer-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; letter-spacing: 0; color: var(--color-heading); flex-shrink: 0; }
.st-mark { display: inline-flex !important; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: var(--brand-gradient) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 700 22px/1 var(--font-display); letter-spacing: -.04em; }
.st-wordmark { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: none !important; -webkit-text-fill-color: currentColor !important; }
.st-name { font: 700 23px/1.1 var(--font-display); color: var(--color-heading); background: none !important; -webkit-text-fill-color: currentColor !important; letter-spacing: -.035em; }
.st-product { font-weight: 500; color: var(--color-support); background: none !important; -webkit-text-fill-color: currentColor !important; }
.st-descriptor { font: 600 10px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .10em; color: var(--color-support); background: none !important; -webkit-text-fill-color: currentColor !important; }
.sidebar .st-mark { width: 38px; height: 38px; flex-basis: 38px; font-size: 20px; }
.sidebar .st-name { font-size: 21px; }
.sidebar .st-descriptor { font-size: 9px; }
.auth-brand { margin: 0; }
.st-auth-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; max-width: 480px; margin: 0 auto 28px; }

/* Theme menu stays anchored to its button and is usable with a keyboard. */
.st-theme-picker { position: relative; flex: 0 0 auto; z-index: 10020; }
.st-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-heading); }
.st-theme-toggle:hover { background: var(--color-tint); }
.st-theme-toggle svg { width: 22px; height: 22px; }
.st-theme-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 160px; padding: 6px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-elevated); box-shadow: 0 12px 30px var(--color-shadow); }
.st-theme-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 24px; padding: 10px 12px; border: 0; border-radius: 8px; font-size: 15px; color: var(--color-text); background: transparent; }
.st-theme-menu button:hover,.st-theme-menu button[aria-checked="true"] { background: var(--color-tint); color: var(--color-support); }
.st-theme-check { visibility: hidden; }
[aria-checked="true"] > .st-theme-check { visibility: visible; }

/* Public navigation and pages. */
.site-nav,.site-nav.scrolled { background: var(--color-canvas); border-bottom: 1px solid var(--color-border-soft); box-shadow: none; }
.nav-inner { width: 100%; min-height: 88px; gap: 24px; padding-block: 16px; }
.nav-link,.btn-nav-ghost,.mobile-link { color: var(--color-text); min-height: 44px; display: inline-flex; align-items: center; }
.nav-link:hover,.btn-nav-ghost:hover,.mobile-link:hover { background: var(--color-tint); color: var(--color-support); }
.nav-hamburger { width: 44px; height: 44px; padding: 10px; border: 1px solid var(--color-border); border-radius: 12px; }
.nav-hamburger span { background: var(--color-heading); }
.mobile-menu { background: var(--color-surface-elevated); border-color: var(--color-border-soft); }
.btn-primary,.btn-submit,.btn-generate,.btn-save,.btn-buy,.btn-pack,.btn-upload,.btn-create-new,.btn-get-started,.btn-upgrade,.btn-hero-primary,.btn-nav-primary,.btn-pricing-primary,.btn-confirm,.btn-action {
    background: var(--brand-gradient) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid transparent; border-radius: 999px; box-shadow: 0 4px 12px var(--color-shadow); text-shadow: none; min-height: 44px;
}
.btn-primary:hover,.btn-submit:hover,.btn-generate:hover,.btn-hero-primary:hover,.btn-nav-primary:hover,.btn-pricing-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 16px var(--color-shadow); }
.btn-primary *,.btn-generate *,.btn-submit *,.btn-action * { color: inherit !important; }
.btn-secondary,.btn-social,.btn-hero-ghost,.btn-nav-outline,.btn-pricing-outline,.btn-cancel { background: var(--color-surface-elevated); color: var(--color-heading); border: 1px solid var(--color-border); border-radius: 999px; min-height: 44px; }
.hero { min-height: auto; max-width: 1240px; width: 100%; margin: 0 auto; padding: 154px 32px 76px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; text-align: left; }
.hero-copy { min-width: 0; }
.hero-eyebrow { display: inline-flex; background: var(--color-tint); border: 1px solid var(--color-border-soft); color: var(--color-support); font-weight: 600; font-size: .85rem; letter-spacing: .03em; margin: 0 0 24px; box-shadow: none; }
.eyebrow-dot { background: var(--color-support); box-shadow: none; animation: none; }
.hero-headline { font: 600 clamp(2.9rem, 5vw, 4.65rem)/1.06 var(--font-display); letter-spacing: -.045em; margin: 0 0 24px; color: var(--color-heading); }
.hero-headline em { display: block; font-family: var(--font-serif); font-weight: 400; color: var(--color-accent); }
.hero-sub { max-width: 560px; font-size: 1.08rem; line-height: 1.8; color: var(--color-text-muted); margin: 0 0 28px; }
.hero-actions { justify-content: flex-start; gap: 12px; margin: 0; flex-wrap: wrap; }
.hero-note { font-size: .875rem; color: var(--color-text-muted); margin-top: 20px; }
.st-hero-example { margin: 0; padding: 18px; background: var(--color-surface-elevated); border: 1px solid var(--color-border-soft); border-radius: 28px; box-shadow: 0 18px 48px var(--color-shadow); }
.st-example-label { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--color-support); font-weight: 600; padding: 0 4px 14px; }
.st-example-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-example-images img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: top; border-radius: 16px; background: var(--color-surface); }
.st-hero-example figcaption { margin: 14px 4px 2px; color: var(--color-text-muted); font-size: .85rem; line-height: 1.6; }
.section { padding-block: 64px; }
.section-tag { color: var(--color-support); background: var(--color-tint); border-color: var(--color-border-soft); font-size: .8rem; }
.section-title { color: var(--color-heading); font-weight: 600; }
.section-sub,.tool-desc,.footer-tagline,.pricing-desc,.faq-answer { color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; }
.tool-card,.pricing-card,.auth-card,.stat-card,.activity-card,.profile-card,.breakdown-section { background: var(--color-surface-elevated); border-color: var(--color-border-soft); box-shadow: 0 6px 20px var(--color-shadow); }
.tool-card:hover { background: var(--color-surface-elevated); border-color: var(--color-support); }
.tool-name,.pricing-name,.price-amount,.auth-title { color: var(--color-heading); }
.tool-icon-wrap { color: var(--color-support); background: var(--color-tint); }
.tool-arrow,.tag { color: var(--color-support); }
.tag { background: var(--color-tint); border-color: var(--color-border-soft); }
.pricing-card.featured,.pricing-card.popular { border: 2px solid var(--color-support); }
.pricing-card { background: var(--color-surface-elevated) !important; }
.pricing-badge { background: var(--color-brand-green); color: #fff; }
.pricing-popular-badge { background: var(--color-brand-green); color: #fff; }
.cta-glow-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-soft); box-shadow: 0 8px 24px var(--color-shadow); }
.cta-glow-orb { display: none; }
.pricing-features { opacity: 1 !important; }
.cta-headline { color: var(--color-heading); }
.cta-sub { color: var(--color-text-muted); }
.pricing-feature,.pricing-features li { color: var(--color-text); }
.cta-section,.site-footer { background: var(--color-surface); border-color: var(--color-border-soft); }
.footer-link,.footer-bottom,.footer-col-title { color: var(--color-text-muted); }
.footer-link:hover { color: var(--color-link); text-decoration: underline; }
.about-content-home { box-shadow: 0 8px 24px var(--color-shadow); }
.reveal { opacity: 1 !important; transform: none !important; }

/* Workspaces, settings, controls and media previews. */
.sidebar,.topbar,.dash-topbar { background: var(--color-surface-elevated); border-color: var(--color-border-soft); box-shadow: none; }
.sidebar { overflow-y: auto; }
.sidebar-logo { min-height: 88px; flex-shrink: 0; }
.sidebar-link { color: var(--color-text-muted); min-height: 44px; font-size: .94rem; }
.sidebar-link:hover,.sidebar-link.active { background: var(--color-tint); color: var(--color-support); }
.sidebar-section-label { color: var(--color-support); font-size: .75rem; }
.sidebar-link > span[style] { background: var(--color-tint) !important; color: var(--color-support) !important; box-shadow: none !important; }
.topbar,.dash-topbar { min-height: 88px; }
.topbar-right { gap: 12px; overflow: visible; }
.sidebar-toggle { width: 44px; height: 44px; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-toggle span { background: var(--color-heading); }
.user-avatar { background: var(--brand-gradient); color: #fff; }
.topbar-title { color: var(--color-heading); }
.topbar-date,.stat-label,.section-subtitle { color: var(--color-text-muted); }
.stat-pill,.credit-badge { color: var(--color-support); background: var(--color-tint); border-color: var(--color-border-soft); }
.dash-main,.dash-content { min-width: 0; }
.form-label,.control-label,.input-label { font-size: .94rem; color: var(--color-text); opacity: 1 !important; }
.empty-state p,.profile-action span,.settings-link span,.auth-btn span { opacity: 1 !important; color: var(--color-text-muted); }
.drop-icon { background: var(--color-tint); color: var(--color-support); }
.form-input,.form-select,.form-textarea,.prompt-input,.prompt-textarea { border-color: var(--color-border); background: var(--color-surface-elevated); color: var(--color-text); }
.user-dropdown-menu { background: var(--color-surface-elevated); border-color: var(--color-border); box-shadow: 0 10px 30px var(--color-shadow); }
.dropdown-item { color: var(--color-text); }
.dropdown-item:hover { background: var(--color-tint); color: var(--color-support); }
.st-profile-toggle { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; text-align: left; color: var(--color-text); }
.topbar-user:not(.st-open) .user-dropdown-menu { display: none; }
.topbar-user.st-open .user-dropdown-menu { display: flex; }
.dropdown-selected { min-height: 44px; }
.dropdown-item.logout,.btn-danger,.btn-delete { color: var(--color-danger); }
.modal-overlay,.modal-overlay-custom { background: var(--color-scrim) !important; }
.modal-content,.modal-content-custom,.modal-info-panel { background: var(--color-surface-elevated); color: var(--color-text); }
.gallery-overlay { background: linear-gradient(transparent, rgba(7,20,33,.95)); color: #fff; }
.gallery-overlay * { color: #fff; }
.gallery-overlay .gallery-prompt { color: #fff; }
.st-preview-shade { background: linear-gradient(to top, rgba(7,20,33,.85), transparent 60%) !important; }
.st-preview-caption { background: #071421; padding: 14px 18px; bottom: 0 !important; left: 0 !important; right: 0 !important; }
.st-preview-caption p,.st-preview-caption div { color: #fff !important; }
.modal-close { min-width: 44px; min-height: 44px; }
.auth-wrapper { width: 100%; padding: 48px 20px; }
.auth-card { border-radius: 24px; }
.auth-icon { background: var(--color-tint); color: var(--color-support); }
.auth-subtitle,.auth-footer,.auth-divider { color: var(--color-text-muted); }
.auth-alert-error,.form-error { color: var(--color-danger); }
.auth-alert-success { color: var(--color-support); background: var(--color-tint); }
.auth-alert-warning,.warning-message { color: var(--color-warning); background: var(--color-warning-surface); }
.auth-brand span { margin-left: 0; }
.policy-container,.about-container { color: var(--color-text); }

/* Django's built-in administration keeps its layout, using the same palette. */
body:has(#header) { --body-bg: var(--color-canvas); --body-fg: var(--color-text); --body-quiet-color: var(--color-text-muted); --body-loud-color: var(--color-heading); --header-bg: var(--color-brand-navy); --header-color: #fff; --header-branding-color: #fff; --link-fg: var(--color-link); --link-hover-color: var(--color-support); --darkened-bg: var(--color-surface); --selected-bg: var(--color-tint); --selected-row: var(--color-tint); --hairline-color: var(--color-border-soft); --border-color: var(--color-border); --breadcrumbs-bg: var(--color-brand-green); --breadcrumbs-fg: #fff; --button-bg: var(--color-brand-navy); --button-hover-bg: var(--color-brand-green); }
#header .st-name,#header .st-descriptor,#header .st-product { color: #fff; }
#header .theme-toggle { display: none; }
#header .st-theme-picker { margin-left: 20px; }

@media (max-width: 1100px) {
    .nav-inner { gap: 16px; padding-inline: 24px; }
    .nav-links { display: none; }
    .nav-cta { margin-left: auto; }
    .nav-hamburger { display: flex; }
    .hero { gap: 32px; }
}
@media (max-width: 800px) {
    .hero { grid-template-columns: 1fr; padding-top: 132px; gap: 36px; }
    .hero-copy { max-width: 600px; }
    .st-hero-example { max-width: 520px; width: 100%; }
    .tryon-showcase-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .tryon-item-col { max-width: 280px; margin: auto; }
    .tryon-people-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .nav-inner { min-height: 80px; padding: 12px 16px; gap: 8px; }
    .nav-inner .st-mark { width: 38px; height: 38px; flex-basis: 38px; font-size: 20px; }
    .nav-inner .st-name { font-size: 20px; }
    .nav-inner .st-descriptor { font-size: 8px; }
    .nav-inner .nav-logo { gap: 8px; }
    .nav-cta > a,.nav-user-pill { display: none; }
    .nav-cta { gap: 0; }
    .hero { padding: 118px 20px 48px; }
    .hero-headline { font-size: clamp(2.7rem,11vw,3.5rem); }
    .hero-actions > a { min-height: 48px; font-size: .94rem; padding: 12px 20px; }
    .section { padding-block: 44px; }
    .section-inner { padding-inline: 20px; }
    .about-content-home { padding: 24px !important; }
    .about-content-home > div { max-width: 100%; }
    .topbar,.dash-topbar { height: auto; padding: 12px 16px; gap: 8px; display: grid; grid-template-columns: 44px minmax(0,1fr); }
    .topbar-left { min-width: 0; }
    .topbar-right { grid-column: 1 / -1; width: 100%; justify-content: flex-end; gap: 8px; margin-left: 0; }
    .topbar-title { font-size: 1.3rem; line-height: 1.3; }
    .topbar-date { display: none; }
    .stat-pill { font-size: .75rem; padding: 6px 8px; }
    .dash-content { padding: 20px 16px; }
    .studio-controls-bar { padding: 20px !important; bottom: 0 !important; position: relative !important; }
    .controls-top-row { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 16px !important; }
    .controls-top-row > div { min-width: 0 !important; width: 100% !important; flex-wrap: wrap !important; gap: 12px !important; }
    .controls-top-row .control-group { min-width: 0 !important; width: 100% !important; }
    .controls-row { grid-template-columns: minmax(0,1fr) !important; }
    .gallery-grid { grid-template-columns: minmax(0,1fr) !important; }
    .auth-wrapper { padding: 28px 16px; }
    .auth-card { padding: 28px 20px; }
    .st-auth-header { gap: 12px; }
    .footer-inner { gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    html,body { scroll-behavior: auto !important; }
    *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Tool workspaces share responsive, theme-aware boundaries. */
.studio-panel,.studio-controls-bar,.studio-main,.asset-layout > .panel { min-width: 0; }
.panel-title { color: var(--color-heading) !important; }
.option-icon { color: var(--color-support) !important; }
.btn-create-new { background: var(--brand-gradient); color: #fff; min-width: 44px; min-height: 44px; }
@media (max-width: 1250px) {
    .studio-layout,.asset-layout { grid-template-columns: minmax(0,1fr) !important; height: auto !important; }
    .studio-panel { min-height: 280px; }
    .studio-panel:has(.canvas-toolbar) { min-height: 540px; }
    .studio-container { grid-template-columns: minmax(0,1fr) !important; height: auto !important; }
    .studio-controls-bar { position: relative !important; height: auto !important; }
    .panel-header { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 600px) {
    .studio-panel:has(#photo-drop-zone) { flex-direction: column !important; padding: 20px !important; }
    .studio-panel:has(#photo-drop-zone) > div { min-width: 0; padding-inline: 0 !important; border-right: 0 !important; }
    .canvas-toolbar { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; flex-wrap: wrap; width: auto !important; max-width: 100% !important; margin: 16px; }
    .studio-layout .btn-action { white-space: normal; }
    .assets-grid { grid-template-columns: minmax(0,1fr); }
    .upload-row { grid-template-columns: minmax(0,1fr); }
    .upload-zone { padding: 16px; min-width: 0; }
    .tabs-header { flex-wrap: wrap; }
}
.drop-icon { -webkit-text-fill-color: currentColor; background-clip: border-box; -webkit-background-clip: border-box; }