/* Chipper Studio / Emerald Commerce
   Presentation layer only. Existing components, routes and commerce remain intact. */
:root {
  color-scheme: dark;
  --bg: #050807;
  --surface: #0d1411;
  --surface-2: #0a100d;
  --surface-3: #14231a;
  --text: #f5f7f5;
  --muted: #9ca8a0;
  --line: rgba(79, 147, 104, .25);
  --line-soft: rgba(79, 147, 104, .16);
  --emerald: #22c55e;
  --neon: #39ff88;
  --accent-secondary: #00d68f;
  --mint: #39ff88;
  --mint-text: #042311;
  --primary: #22c55e;
  --primary-hover: #39ff88;
  --radius: 14px;
  --shop-shadow: 0 18px 48px #0005;
}

html { scroll-padding-top: 124px; scrollbar-color: #2a6040 #080d0a; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 81% 3%, #22c55e0d, transparent 34rem);
  color: var(--text);
  font-size: 14px;
}
::selection { background: #22c55e59; color: #fff; }
*::-webkit-scrollbar-track { background: #080d0a; }
*::-webkit-scrollbar-thumb { background: #2a6040; border-color: #080d0a; }
*::-webkit-scrollbar-thumb:hover { background: #398858; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; }
.shell { width: min(1200px, calc(100% - 64px)); }
.main-content { padding-top: 64px; padding-bottom: 80px; }
.main-content.home-page { padding-top: 44px; }
.main-content.home-page > :not(.studio-ticker) { width: min(1200px, calc(100% - 64px)); }
.eyebrow { color: var(--neon); letter-spacing: 1.9px; font-size: 10px; }
.muted, .field-hint, .section-label, .order-number, .review-rule { color: var(--muted); }
.skip-link { background: var(--neon); color: var(--mint-text); }

/* Navigation keeps the existing routes and account controls. */
.site-header {
  top: 16px;
  width: min(1264px, calc(100% - 48px));
  margin-top: 16px;
  border: 1px solid #33533f7a;
  border-radius: 12px;
  background: #080e0bbf;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 36px #0004, inset 0 1px 0 #abf5b806;
}
.header-inner { width: calc(100% - 40px); min-height: 72px; gap: 24px; }
.brand { gap: 10px; }
.brand-logo { width: 36px; height: 36px; }
.brand-name { color: var(--text); font-size: 20px; letter-spacing: -.75px; }
.main-nav { gap: 30px; margin-left: 24px; }
.main-nav a { padding: 26px 0; font-size: 12px; color: var(--muted); transition: color .18s ease; }
.main-nav a.active, .main-nav a:hover { color: var(--neon); }
.main-nav a.active::after { bottom: 12px; height: 2px; background: var(--emerald); box-shadow: 0 0 10px #39ff8840; }
.main-nav a:last-child span { color: var(--accent-secondary); }
.header-actions { min-width: 140px; }
.header-actions .btn { min-height: 40px; border-radius: 8px; padding: 9px 15px; font-size: 11px; }
.user-button { border: 1px solid transparent; border-radius: 9px; }
.user-button:hover, .user-button[aria-expanded="true"] { background: #15291c; border-color: #315a3d; }
.user-chevron { color: #8fba9c; }
.avatar-fallback { background: #123c24; color: #a3f9bf; }

/* Shared controls and accessible state colors. */
.btn {
  border-color: #355b427a;
  color: var(--text);
  background: #0e1a13;
  border-radius: 9px;
  min-height: 44px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn:not(.btn-primary):hover { background: #162c1e; border-color: #498e5f; }
.btn-primary {
  color: #032511;
  border-color: #45e98199;
  background: linear-gradient(112deg, #26cf64, #38ef7e);
  box-shadow: 0 5px 22px #22c55e1c, inset 0 1px 0 #b8ffcc66;
  font-weight: 750;
}
.btn-primary:hover { color: #032511; background: linear-gradient(112deg, #35e575, #64ff9c); border-color: var(--neon); box-shadow: 0 6px 26px #22c55e33; }
.btn-quiet { background: #0b140e; border-color: #345841; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn:disabled:hover { box-shadow: none; transform: none; }
.btn-danger, .dialog-footer .btn-danger { color: #ffbcb2; background: #301813; border-color: #87483d; }
.btn-danger:hover, .dialog-footer .btn-danger:hover { color: #ffdbd4; background: #45231c; border-color: #b76858; }
.category-chip, .admin-tab { color: var(--muted); min-height: 40px; border-radius: 8px; }
.category-chip.active, .admin-tab.active { color: #b2ffcc; border-color: #3b87547a; background: #15371f; }
.category-chip:hover, .admin-tab:hover { background: #11251a; color: var(--text); }
.field-control { background: #080f0b; border-color: #2d4c37; color: var(--text); border-radius: 9px; }
.field-control:focus { border-color: #46c977; box-shadow: 0 0 0 3px #22c55e0d; }
.field-control::placeholder { color: #839189; }
.field label, .field-label { color: #cbd8cf; }
.text-button, .link-arrow { color: #7aefa5; }
.skeleton { background-image: linear-gradient(100deg, #15241b 30%, #263b2d 50%, #15241b 70%); }
.preview-bar { background: #102217; color: #b9d1bf; border-color: #335e40; }
.preview-login button { color: #90e6b1; }

/* Storefront hero: existing brand copy and live product preview, never portfolio content. */
.studio-hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: 1.02fr .98fr;
  gap: 64px;
  min-height: 620px;
  margin-bottom: 64px;
  align-items: center;
}
.studio-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 79% 45%, #22c55e13, transparent 57%);
}
.studio-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 40%;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(#39ff8807 1px, transparent 1px), linear-gradient(90deg, #39ff8807 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse, #000 12%, transparent 72%);
}
.studio-hero-copy { min-width: 0; padding: 18px 0 34px; }
.hero-intro-pill { background: #102117b3; border-color: #2a754540; color: #b0c6b7; padding: 8px 12px; font-size: 8px; letter-spacing: 1.6px; }
.hero-intro-pill > span { color: var(--neon); font-size: 13px; }
.studio-hero h1 { font-size: clamp(50px, 4.9vw, 72px); font-weight: 800; line-height: 1.08; letter-spacing: -3.7px; margin: 28px 0 24px; }
.studio-hero h1 em { color: var(--neon); text-shadow: 0 0 34px #22c55e1c; }
.studio-hero-description { font-size: 15px; line-height: 1.9; color: var(--muted); max-width: 455px; }
.hero-actions { gap: 12px; margin-top: 32px; }
.hero-actions .hero-cta-row { gap: 12px; }
.hero-cta-row .btn { min-height: 48px; border-radius: 9px; padding: 12px 20px; font-size: 12px; }
.hero-actions .btn.hero-discord-button { background: #0d1712; border-color: #3b61487a; color: #e6f3e9; box-shadow: none; }
.hero-actions .btn.hero-discord-button:hover { background: #162c1e; border-color: #53a86f; color: var(--text); }
.hero-service-actions .btn { min-height: 40px; font-size: 11px; padding: 9px 14px; }
.hero-actions .hero-coming-soon:disabled, .hero-actions .hero-coming-soon:disabled:hover { opacity: 1; color: #a0b0a6; background: #0a120d; border-color: #223b2a; }
.hero-coming-soon-badge { color: #9abb9f; background: #16251a; border-color: #36513d; }
.studio-hero-copy .hero-footnote { color: #82958a; font-size: 10px; margin-top: 25px; max-width: 400px; }
.hero-footnote-line { width: 28px; background: #2b8c4b; }

/* The original interactive deck stays interactive; only its visual shell changes. */
.hero-deck { padding: 6px 20px 0; }
.hero-deck::before { content: ""; position: absolute; inset: 7% 0 21%; z-index: -2; border: 1px solid #22c55e20; border-radius: 50%; box-shadow: 0 0 50px #22c55e0d, inset 0 0 45px #22c55e09; pointer-events: none; }
.hero-deck-heading { margin-bottom: 24px; }
.hero-deck-eyebrow { color: #91b99f; letter-spacing: 1.7px; }
.hero-deck-eyebrow i { background: var(--neon); box-shadow: 0 0 10px #39ff885c; }
.hero-deck-count { color: #88a391; }
.hero-deck-slide, .hero-deck-slide-1, .hero-deck-slide-2 { min-height: 485px; background: linear-gradient(148deg, #102219f5, #080f0cfc 78%); border-color: #3c7b4f59; border-radius: 16px; box-shadow: var(--shop-shadow), inset 0 1px 0 #b4ffcc08; }
.hero-deck-slide[data-position="0"] { border-color: #51af6d87; box-shadow: 0 25px 50px #0005, 0 0 28px #22c55e09, inset 0 1px 0 #b4ffcc0a; }
.hero-deck-slide[data-position="1"] { transform: translate(13px, 7px) rotate(3deg) scale(.96); }
.hero-deck-slide[data-position="2"] { transform: translate(-13px, 2px) rotate(-3deg) scale(.93); }
.hero-deck-card-content { border-radius: 15px; }
.hero-deck-stage::before { background: radial-gradient(ellipse, #22c55e1a, transparent 68%); }
.deck-window-top { min-height: 42px; background: #a0ffc502; border-color: #69c3871a; color: #8fac98; }
.deck-window-dots i { background: #30503c; }
.deck-window-dots i:nth-child(2) { background: #43865b; }
.deck-window-dots i:nth-child(3) { background: #6bce8b; }
.deck-window-badge { background: #13331e; color: #80e9a2; border-color: #4c9d5b40; }
.deck-shop-body, .deck-audio-body { padding: 25px 23px 19px; }
.deck-eyebrow, .deck-audio-heading .deck-eyebrow { color: #64e992; }
.deck-shop-heading h2, .deck-audio-heading h2 { color: var(--text); font-size: 34px; }
.deck-shop-heading > p:last-child, .deck-audio-heading > p:last-child { color: var(--muted); font-size: 11px; }
.deck-shop-grid { gap: 12px; margin-top: 24px; }
.deck-shop-item { border-color: #50826033; background: #0c1a12; }
.deck-shop-art, .deck-art-asset .deck-shop-art { height: 94px; border-color: #408e5326; background: radial-gradient(ellipse at 50% 110%, #22c55e24, transparent 80%), #0a160f; }
.deck-shop-art > span, .deck-art-asset .deck-shop-art > span { color: #a8ffc4; border-color: #72ea994d; background: #1b4c2c33; box-shadow: 0 8px 22px #0004; }
.deck-art-asset .deck-shop-art > span { color: #5fe9b6; border-color: #00d68f59; }
.deck-shop-art > i, .deck-art-asset .deck-shop-art > i { background: #69df8d33; box-shadow: 0 9px 0 #69df8d22, 0 18px 0 #69df8d13; }
.deck-shop-art > i:last-child, .deck-art-asset .deck-shop-art > i:last-child { border-color: #69df8d33; background: none; box-shadow: none; }
.deck-shop-item-copy strong { color: #e0f3e5; font-size: 11px; }
.deck-shop-item-copy span { color: #95aa9c; font-size: 9px; }
.deck-request { background: linear-gradient(115deg, #1c51272b, #0b170e); border-color: #4f9e6340; }
.deck-request-mark { color: #87f1a8; border-color: #55be7159; background: #1b54262b; }
.deck-request strong { color: #d5eddb; }
.deck-request p { color: #95aa9c; }
.deck-request a { color: #80efa1; font-size: 9px; }
.deck-request a:hover { color: var(--neon); }
.deck-preview-note { color: #8a9e91; font-size: 8px; }
.hero-deck-tab { color: #9aaa9f; min-height: 40px; }
.hero-deck-tab[aria-pressed="true"] { color: #b5ffcd; background: #15331e; border-color: #41895480; }
.hero-deck-tab-dot { background: #466c51; }
.hero-deck-tab[aria-pressed="true"] .hero-deck-tab-dot { background: var(--neon); box-shadow: 0 0 8px #39ff8840; }
.hero-deck-tab:hover { color: var(--text); }
.hero-deck-step, .hero-deck-pause { min-height: 36px; width: 32px; color: #bad4c1; background: #0c1b12; border-color: #456c504d; }
.hero-deck-step:hover, .hero-deck-pause:hover { color: var(--neon); background: #16371e; border-color: #55ad69; }
.deck-audio-source { background: #07110a; border-color: #3a80504d; color: #9ab1a1; }
.deck-audio-source > span:first-child, .deck-audio-file, .deck-audio-notice > span { color: #79ec9d; }
.deck-type-cursor { background: var(--neon); }
.deck-audio-wave i { background: linear-gradient(var(--neon), #078c4b); }
.deck-audio-steps span { color: #9aba9e; background: #1241201a; border-color: #48965633; }
.deck-audio-output { background: #11281a66; border-color: #3c855633; }
.deck-audio-output > span:first-child { color: #91a99a; }
.deck-audio-output strong, .deck-audio-notice strong { color: #d0e6d6; }
.deck-audio-notice p > span { color: #91a298; }

/* Demo colors are part of the shop shell; no effect behavior is replaced. */
.hero-demo-label { color: #b1c6b7; }
.hero-demo-label > span:last-child { color: #93a99b; }
.hero-demo-dot { background: var(--neon); }
.demo-window, .service-interactive-demo .demo-window { background: #08110c; border-color: #3b805253; box-shadow: 0 18px 45px #0005, 0 0 0 4px #22c55e05; }
.demo-window-top { background: #102318; color: #a0bbaa; border-color: #387a4b40; }
.demo-window-dots i, .demo-window-dots i:nth-child(2), .demo-window-dots i:nth-child(3) { background: #4a845b; }
.demo-window-badge { color: #7cc996; }
.demo-window-content { background: linear-gradient(145deg, #102419, #080f0c 80%); }
.demo-chat-panel { background: #09160e; border-color: #3f805354; }
.demo-panel-label, .demo-chat-name span { color: #8eae98; }
.demo-chat-row { border-color: #284c343f; }
.demo-chat-name strong { color: #e5f4e9; }
.demo-chat-row p { color: #b0c4b7; }
.demo-chat-initial, .demo-chat-tiktok, .demo-chat-twitch { color: #9fffc5; background: #133621; border-color: #438a556e; }
.platform-youtube, .platform-tiktok, .platform-twitch { background: #39df7b; }
.demo-name, .demo-name-youtube, .demo-name-tiktok, .demo-name-twitch { color: #befbd2; background: #10351ff2; border-color: #3e8a56; }
.demo-stage-grid { background-image: radial-gradient(#4bb76e30 .8px, transparent .8px); }
.demo-stage-floor { background: linear-gradient(90deg, transparent, #46c87966, transparent); }
.demo-chat-bubble { background: #163b25f5; border-color: #499363; color: #e0f4e6; }
.demo-chat-bubble::after { background: #163b25; border-color: #499363; }
.demo-toolbar > span, .demo-feedback, .service-interactive-demo .demo-feedback { color: #8da996; }
.demo-action { color: #c1e9ce; background: #11271a; border-color: #3d80514d; }
.demo-action:hover { color: #dcffe7; background: #18432a; border-color: #58b674; }
.demo-action:active { background: #1b5b32; }
.demo-gift-notification { background: #113b23f5; border-color: #44ad65; }
.demo-gift-icon { color: var(--neon); }
.demo-gift-notification strong { color: #d1ffdf; }
.demo-gift-notification span:not(.demo-gift-icon) { color: #a4cfb3; }
.demo-confetti { color: #7bffae; }
.studio-ticker { padding: 23px 0; margin-bottom: 64px; border-color: #2b60373b; background: linear-gradient(90deg, #0a150d, #0b130e 50%, #0a150d); }
.studio-ticker-group > span { color: #86a08e; font-size: 11px; letter-spacing: 1.8px; }
.studio-ticker-group i { color: #45dc7c; }

/* Catalog remains entirely API-driven, including an honest empty state. */
.catalog-section { scroll-margin-top: 124px; }
.catalog-section-heading { margin-bottom: 26px; }
.catalog-section-heading h2 { font-size: 34px; letter-spacing: -1.35px; }
.catalog-section-heading > p { color: var(--muted); line-height: 1.8; }
.catalog-toolbar { padding: 22px 0; border-color: var(--line); }
.catalog-controls { min-width: 0; }
.search-field input, .sort-select { min-height: 42px; }
.catalog-count { font-size: 11px; color: #8ca194; margin: 0 0 19px; }
.catalog-grid { gap: 24px; }
.product-card { position: relative; background: var(--surface); border: 1px solid #345a4070; border-radius: 14px; box-shadow: 0 9px 26px #0002; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.product-card:hover { transform: translateY(-4px); border-color: #47b5679c; box-shadow: 0 16px 40px #0005, 0 0 20px #22c55e0b; }
.product-cover { background: #102017; border-bottom: 1px solid #38654833; }
.product-cover img { transition: transform .45s ease; }
.product-card:hover .product-cover img { transform: scale(1.035); }
.product-cover-button:focus-visible { outline-offset: -5px; }
.product-body { padding: 24px 22px 21px; }
.product-category { color: #73d997; letter-spacing: 1.7px; font-size: 9px; }
.product-name { color: var(--text); font-size: 18px; letter-spacing: -.5px; line-height: 1.4; }
.product-name button:hover { color: #b3ffc8; }
.product-summary { color: var(--muted); font-size: 12px; line-height: 1.9; }
.product-bottom { padding-top: 20px; margin-top: 22px; border-color: #365b422e; }
.price { color: #d5ffe2; font-size: 20px; letter-spacing: -.65px; }
.old-price { color: #8ca093; }
.product-bottom .btn { background: #12331d; border-color: #3a7e4b7a; color: #b5ffc9; min-height: 40px; }
.product-bottom .btn:hover { background: #1a4929; border-color: #67ce83; }
.badge, .badge-preview { background: #10321fea; color: #afffc7; border-color: #3e965867; border-radius: 5px; }
.badge-discount { background: #153e25f5; color: #b6ffca; border-color: #68c980; }
.empty-state { background: radial-gradient(ellipse at 50% 0, #22c55e09, transparent 70%), var(--surface); border: 1px solid #3760447a; border-radius: 14px; padding: 52px 24px; }
.empty-icon { color: #69ef96; border-color: #3c855b; background: #0d2a19; box-shadow: 0 0 28px #22c55e0d; }
.empty-state h2 { color: var(--text); }
.empty-state p { color: var(--muted); }
.catalog-service { margin-top: 38px; padding: 30px; border: 1px solid #3f8b566b; border-radius: 14px; background: radial-gradient(ellipse at 100% 50%, #22c55e12, transparent 70%), #0d1911; }
.catalog-service .service-label { color: #64dd8a; }
.catalog-service h3 { color: var(--text); font-size: 18px; }
.catalog-service p { color: var(--muted); }
.service-mini { color: #79ffab; background: #14452666; border-color: #4eaa6370; border-radius: 11px; }
.catalog-service > .btn { min-height: 44px; color: #c0ffd3; border-color: #4b985d80; }
.trust-strip { margin-top: 36px; padding: 26px 0 4px; gap: 24px; }
.trust-icon { color: #59e88a; }
.trust-item strong { color: #d9ebe0; font-size: 12px; }
.trust-item p { color: #93a69a; line-height: 1.8; }

/* Service, FAQ, account and existing shop dialogs share the same design language. */
.page-heading h1, .page-heading-row h1 { letter-spacing: -1.5px; }
.page-heading > p, .page-heading-row p, .service-hero p { color: var(--muted); }
.page-heading > .eyebrow, .page-heading-row .eyebrow, .service-hero .eyebrow { color: var(--neon); }
.service-hero h1 { font-weight: 800; }
.service-hero h1 em { color: var(--neon); font-style: normal; }
.service-feature { background: linear-gradient(145deg, #10231850, #0d1411); border-color: #38654659; border-radius: 13px; }
.service-feature p, .faq-sidebar p { color: var(--muted); }
.service-visual { background: #0c1b12; border-color: #36704a; }
.stream-demo { background: #08150d; border-color: #345f42; }
.stream-message { background: #102a1a; border-color: #31543b; }
.stream-avatar { color: #d5ffe1; background: #1a5b32; }
.stream-demo-top, .stream-message p, .stream-platforms { color: #a3b9aa; }
.stream-platforms span::before { background: #44d77b; }
.faq-layout { gap: 50px; }
.faq-sidebar h3 { color: #e8f2ec; }
.faq-item { background: var(--surface); border-color: #31593e70; border-radius: 12px; transition: background .2s, border-color .2s; }
.faq-item:hover { border-color: #468e5b; }
.faq-item[open] { background: #101e15; border-color: #4c9c6480; box-shadow: 0 5px 22px #22c55e05; }
.faq-item summary { min-height: 60px; color: #e0ece4; }
.faq-item summary::after { color: var(--neon); }
.faq-answer { color: var(--muted); line-height: 1.95; }
.legal-content { border-color: #305b3f; }
.legal-content section { border-color: #31553d66; }
.legal-content p { color: var(--muted); }
.legal-number { color: #70b98a; }
.shop-dialog { background: #0c1510; border: 1px solid #4a9260a6; border-radius: 16px; box-shadow: 0 30px 100px #000b, 0 0 40px #22c55e0b; }
.shop-dialog::backdrop { background: #020604c9; backdrop-filter: blur(8px); }
.dialog-header, .dialog-footer { background: #0e1c13; border-color: #365f426b; }
.dialog-close { background: #172b1d; border: 1px solid #3c6a4a; color: #bdd4c5; border-radius: 8px; min-width: 36px; min-height: 36px; }
.dialog-close:hover { background: #214b2d; color: #ddffe8; }
.dialog-prompt, .detail-summary, .detail-description, .detail-safe-note, .feature-list li { color: #afc0b5; }
.detail-category, .detail-price { color: #90fbb0; }
.detail-meta span { background: #183722; color: #b1d4bb; }
.detail-section { border-color: #35583e; }
.detail-cover { background: #14291c; border-radius: 10px; }
.gallery-thumbs button { border-color: #35583e; }
.checkout-summary { background: #09130d; border-color: #315b3e; }
.summary-total { color: #d5ffe2; border-color: #315b3e; }
.quantity-control { border-color: #3d6f4b; }
.quantity-control button { background: #142d1b; }
.quantity-control button:hover { background: #205333; }
.review-card, .order-card, .setup-card, .admin-help { background: #0d1911; border-color: #315a3f; }
.setup-state.ready { color: #7eed9f; }
.admin-help code { background: #183a24; color: #afffc4; }
.table-wrap { border-color: #315b3d; }
thead { background: #13291b; color: #bed3c4; }
td { background: #0d1710; border-color: #2c4f3666; }
.table-product strong { color: #e8f4ec; }
.table-muted { color: var(--muted); }
.file-upload-box { background: #0c1d12; border-color: #3e7750; }
.file-upload-box input::file-selector-button { color: #c2e8ce; background: #163e24; border-color: #4a885b; }
.delete-account-summary { background: #12271a; border-color: #41734e; }
.profile-dropdown { background: #0b1810f7; border-color: #3f7850; box-shadow: 0 18px 48px #0009; }
.profile-menu-heading strong { color: var(--text); }
.profile-menu-heading span { color: #96ac9e; }
.profile-menu-item { color: #d9eade; min-height: 44px; }
.profile-menu-item:hover, .profile-menu-item:focus-visible { background: #173b22; }
.profile-menu-item:focus-visible { box-shadow: inset 0 0 0 1px #63e188; }
.profile-menu-icon { color: #80db9b; }
.profile-menu-divider { background: #2e573a; }
.profile-menu-logout { color: #e6b9b0; }
.profile-menu-logout:hover, .profile-menu-logout:focus-visible { background: #3d231c; }
.notice:not(.notice-error):not(.notice-warning) { color: #c3e3ce; background: #112c1a; border-color: #3a7750; }
.notice-warning { color: #e6d7ab; background: #2a2516; border-color: #6c5e32; }
.notice-error, .form-error { color: #ffc1b7; background: #2b1916; border-color: #754038; }
.toast:not(.error) { color: #ddffe8; background: #11371ff5; border-color: #4da86a; }
.toast.error { color: #ffc7c0; background: #341b17; border-color: #8c4b41; }
.status-badge { background: #17462b; color: #aeefc2; }
.status-draft { background: #24392a; color: #c1d1c6; }
.status-pending, .status-attention { background: #3b321b; color: #e8d49c; }
.status-expired, .status-cancelled, .status-archived, .status-refunded { background: #322820; color: #d7bdac; }

.site-footer { background: #060d08; border-color: #315f3c4d; padding: 38px 0; }
.footer-brand { color: #e6f6eb; font-size: 20px; }
.footer-inner p, .footer-note { color: #8c9f92 !important; }
.footer-links { gap: 24px; }
.footer-links a { color: #9db3a5; font-size: 11px; transition: color .2s; }
.footer-links a:hover { color: var(--neon); }

@media (min-width: 1500px) {
  .main-content { padding-top: 70px; }
  .main-content.home-page { padding-top: 50px; }
  .studio-hero { min-height: 650px; }
}
@media (max-width: 1100px) {
  .shell, .main-content.home-page > :not(.studio-ticker) { width: calc(100% - 48px); }
  .studio-hero { gap: 32px; min-height: 590px; }
  .studio-hero h1 { font-size: 55px; letter-spacing: -2.7px; }
  .hero-cta-row .btn { padding: 11px 15px; }
  .hero-deck { padding-inline: 14px; }
  .deck-shop-body, .deck-audio-body { padding-inline: 18px; }
  .deck-shop-heading h2, .deck-audio-heading h2 { font-size: 30px; }
  .product-body { padding: 20px 17px; }
  .product-name { font-size: 17px; }
  .product-bottom { flex-wrap: wrap; gap: 14px; }
  .product-bottom .btn { flex: 1; }
}
@media (max-width: 850px) {
  .main-content.home-page { padding-top: 35px; }
  .studio-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 44px; margin-bottom: 48px; }
  .studio-hero-copy { padding: 20px 0 0; }
  .studio-hero h1 { font-size: 66px; letter-spacing: -3.5px; }
  .studio-hero-description { max-width: 540px; }
  .studio-hero::after { inset: 30% 0 0; }
  .hero-deck { max-width: 590px; padding-inline: 24px; }
  .hero-deck-slide { min-height: 495px; }
  .hero-deck-tab { font-size: 9px; }
  .deck-shop-body, .deck-audio-body { padding: 27px 24px 20px; }
  .deck-shop-heading h2, .deck-audio-heading h2 { font-size: 35px; }
  .studio-ticker { margin-bottom: 48px; }
  .catalog-section-heading h2 { font-size: 30px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 154px; }
  .site-header { top: 10px; margin-top: 10px; width: calc(100% - 24px); border-radius: 12px; }
  .header-inner { width: calc(100% - 24px); padding-top: 14px; gap: 0 10px; min-height: 75px; }
  .brand-name { font-size: 18px; }
  .brand-logo { width: 32px; height: 32px; }
  .main-nav { margin: 10px 0 0; width: 100%; gap: 0; justify-content: space-around; }
  .main-nav a { min-height: 46px; padding: 13px 10px 17px; font-size: 12px; }
  .main-nav a.active::after { bottom: 7px; }
  .header-actions { min-width: 0; }
  .header-actions .btn { min-height: 38px; padding: 9px 12px; font-size: 10px; }
  .main-content { padding-top: 40px; padding-bottom: 55px; }
  .catalog-section, #trichat-pricing { scroll-margin-top: 155px; }
  .catalog-service { padding: 25px; gap: 22px; }
  .catalog-service .btn { margin-left: 65px; width: max-content; }
  .product-bottom { align-items: stretch; }
  .product-bottom .btn { width: 100%; }
  .price-stack { min-height: 32px; }
  .trust-strip { padding-top: 15px; gap: 20px; }
  .faq-layout { gap: 30px; }
  .faq-sidebar p { max-width: 430px; }
  .footer-links { gap: 20px; }
}
@media (max-width: 500px) {
  .shell, .main-content.home-page > :not(.studio-ticker) { width: calc(100% - 36px); }
  .studio-hero h1 { font-size: 47px; letter-spacing: -2.4px; line-height: 1.11; margin: 22px 0 20px; }
  .studio-hero-description { font-size: 13px; line-height: 1.9; }
  .hero-intro-pill { font-size: 7px; letter-spacing: 1.2px; }
  .hero-actions { margin-top: 27px; gap: 11px; }
  .hero-actions .hero-cta-row { gap: 9px; }
  .hero-cta-row .btn { min-height: 46px; font-size: 11px; padding: 11px 15px; }
  .hero-service-actions .btn { min-height: 40px; font-size: 10px; padding: 9px 12px; }
  .studio-hero-copy .hero-footnote { margin-top: 21px; font-size: 9px; gap: 10px; }
  .hero-deck { padding-inline: 12px; }
  .hero-deck-slide, .hero-deck-slide-1, .hero-deck-slide-2 { min-height: 478px; }
  .hero-deck-slide[data-position="1"] { transform: translate(8px, 5px) rotate(2deg) scale(.96); }
  .hero-deck-slide[data-position="2"] { transform: translate(-8px, 2px) rotate(-2deg) scale(.93); }
  .deck-shop-body, .deck-audio-body { padding: 22px 17px 17px; }
  .deck-shop-heading h2, .deck-audio-heading h2 { font-size: 30px; }
  .deck-shop-grid { gap: 10px; }
  .deck-shop-art, .deck-art-asset .deck-shop-art { height: 84px; }
  .deck-shop-item-copy strong { font-size: 10px; }
  .deck-shop-item-copy span { font-size: 8px; }
  .deck-request a { font-size: 8px; }
  .hero-deck-controls { flex-wrap: wrap; margin-top: 23px; gap: 9px; }
  .hero-deck-tab { min-height: 40px; font-size: 8px; padding-inline: 6px; }
  .hero-deck-step, .hero-deck-pause { width: 29px; min-height: 36px; }
  .catalog-section-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .catalog-section-heading h2 { font-size: 27px; letter-spacing: -1px; }
  .catalog-section-heading > p { text-align: left; font-size: 12px; max-width: none; }
  .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .product-cover { aspect-ratio: 1.6; }
  .product-body { padding: 23px 20px 20px; }
  .product-name { font-size: 20px; }
  .product-summary { min-height: 0; font-size: 12px; }
  .product-category { font-size: 10px; margin-bottom: 9px; }
  .product-bottom { flex-direction: row; align-items: center; margin-top: 21px; padding-top: 20px; }
  .product-bottom .btn { flex: 0 1 auto; width: auto; min-height: 42px; font-size: 11px; padding-inline: 14px; }
  .price { font-size: 21px; }
  .old-price { font-size: 11px; }
  .category-chip { min-height: 42px; padding-inline: 12px; }
  .catalog-toolbar { gap: 16px; }
  .search-field input { font-size: 12px; }
  .sort-select { width: 138px; font-size: 11px; }
  .catalog-service { padding: 23px 20px; }
  .catalog-service h3 { font-size: 17px; line-height: 1.45; }
  .catalog-service p { font-size: 12px; line-height: 1.8; }
  .catalog-service .btn { width: 100%; margin-left: 0; }
  .service-title-wrap { align-items: flex-start; gap: 15px; }
  .service-mini { width: 40px; height: 43px; }
  .trust-item p { font-size: 12px; }
  .trust-icon { flex-shrink: 0; }
  .empty-state { padding: 40px 21px; }
  .empty-state h2 { font-size: 23px; }
  .empty-state p { font-size: 12px; }
  .page-heading h1, .page-heading-row h1 { font-size: 32px; }
  .site-footer { padding: 30px 0; }
  .footer-links a { min-height: 40px; display: inline-flex; align-items: center; }
  .footer-note { font-size: 10px; }
}
@media (max-width: 360px) {
  .shell, .main-content.home-page > :not(.studio-ticker) { width: calc(100% - 30px); }
  .site-header { width: calc(100% - 20px); }
  .header-inner { width: calc(100% - 20px); }
  .brand { gap: 6px; }
  .brand-logo { width: 29px; height: 29px; }
  .brand-name { font-size: 15px; }
  .header-actions .btn { padding-inline: 10px; font-size: 9px; }
  .header-actions .discord-icon { display: none; }
  .main-nav a { font-size: 11px; padding-inline: 8px; }
  .studio-hero h1 { font-size: 40px; letter-spacing: -2px; }
  .hero-intro-pill { font-size: 6px; letter-spacing: 1px; padding-inline: 10px; }
  .hero-cta-row .btn { padding-inline: 12px; font-size: 10px; }
  .hero-actions .hero-service-actions .btn { padding-inline: 10px; font-size: 9px; }
  .hero-coming-soon-badge { font-size: 6px; }
  .hero-deck { padding-inline: 8px; }
  .hero-deck-slide, .hero-deck-slide-1, .hero-deck-slide-2 { min-height: 472px; }
  .deck-shop-body, .deck-audio-body { padding-inline: 14px; }
  .deck-shop-heading h2, .deck-audio-heading h2 { font-size: 27px; }
  .deck-shop-heading > p:last-child, .deck-audio-heading > p:last-child { font-size: 10px; }
  .deck-shop-grid { gap: 8px; }
  .deck-request a { font-size: 7px; }
  .hero-deck-controls { justify-content: flex-start; }
  .hero-deck-tab { font-size: 8px; }
  .hero-deck-navigation { margin-left: auto; }
  .catalog-controls { flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  .sort-select { width: 100%; }
  .catalog-section-heading h2 { font-size: 24px; }
  .product-body { padding-inline: 18px; }
  .product-name { font-size: 18px; }
  .price { font-size: 19px; }
  .product-bottom .btn { padding-inline: 11px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product-card:hover, .product-card:hover .product-cover img, .btn:active:not(:disabled) { transform: none; }
  .studio-hero h1 em { text-shadow: none; }
}

/* Compact catalogue cards. Detail, checkout and the surrounding page stay unchanged. */
.catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.catalog-grid > .product-card {
  min-width: 0;
  padding: 10px;
  border-radius: 15px;
  background: linear-gradient(155deg, #13201944, transparent 65%), var(--surface);
  box-shadow: 0 8px 22px #0002;
}
.catalog-grid > .product-card:hover {
  transform: translateY(-3px);
  border-color: #45bb6d80;
  box-shadow: 0 12px 28px #0004, 0 0 18px #22c55e08;
}
.catalog-grid .product-cover {
  flex: none;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 9px;
}
.catalog-grid .product-badges { top: 8px; left: 8px; right: 8px; gap: 5px; flex-wrap: wrap; }
.catalog-grid .badge { padding: 3px 7px; font-size: 8px; }
.catalog-grid .product-body { min-width: 0; padding: 12px 7px 5px; }
.catalog-grid .product-category,
.catalog-grid .product-summary { display: none; }
.catalog-grid .product-name {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.35px;
}
.catalog-grid .product-name button {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-grid .product-stock {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.catalog-grid .product-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #22d98b;
  box-shadow: 0 0 7px #22d98b40;
}
.catalog-grid .product-stock[data-stock-state="low"]::before { background: #e5c568; box-shadow: 0 0 7px #e5c56830; }
.catalog-grid .product-stock[data-stock-state="empty"]::before { background: #91a099; box-shadow: none; }
.catalog-grid .product-bottom {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  border: 0;
  margin: auto 0 0;
  padding-top: 10px;
}
.catalog-grid .price-stack {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 3px 7px;
}
.catalog-grid .price { color: #a1ffbf; font-size: 17px; line-height: 1.4; letter-spacing: -.55px; white-space: nowrap; }
.catalog-grid .old-price { font-size: 10px; line-height: 1.5; white-space: nowrap; }
.catalog-grid .product-bottom .btn {
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  background: #102118;
  border-color: #365b4266;
  color: #a7ccaf;
  font-size: 19px;
  line-height: 1;
}
.catalog-grid .product-bottom .btn:hover { background: #153b22; color: var(--neon); border-color: #45bb6d80; }
@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 500px) {
  .catalog-grid { gap: 12px; }
  .catalog-grid > .product-card { padding: 7px; border-radius: 12px; }
  .catalog-grid .product-cover { border-radius: 7px; }
  .catalog-grid .product-body { padding: 10px 3px 3px; }
  .catalog-grid .product-name { font-size: 13px; letter-spacing: -.25px; }
  .catalog-grid .product-stock { font-size: 10px; gap: 5px; }
  .catalog-grid .product-bottom { gap: 4px; padding-top: 8px; }
  .catalog-grid .price-stack { gap: 1px 4px; }
  .catalog-grid .price { font-size: 14px; letter-spacing: -.5px; }
  .catalog-grid .old-price { font-size: 9px; }
  .catalog-grid .product-badges { top: 5px; left: 5px; right: 5px; }
  .catalog-grid .badge { font-size: 7px; padding: 2px 4px; }
}
@media (max-width: 379px) {
  .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .catalog-grid > .product-card { padding: 9px; }
  .catalog-grid .product-body { padding: 12px 7px 5px; }
  .catalog-grid .product-name { font-size: 15px; }
  .catalog-grid .product-stock { font-size: 11px; }
  .catalog-grid .price { font-size: 17px; }
  .catalog-grid .old-price { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-grid > .product-card:hover { transform: none; }
}