/* Beyond Tattoo — Dark Studio Theme */
:root {
  --bt20-bg: #09050e;
  --bt20-surface: #130b1b;
  --bt20-ink: #f7f4ff;
  --bt20-muted: #aba2ba;
  --bt20-violet: #a275ff;
  --bt20-gold: #f0c569;
  --bt20-border: rgba(255, 255, 255, 0.14);
  --bt20-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

html, body { background: var(--bt20-bg); color: var(--bt20-ink); }
body { background: var(--bt20-bg); }
a { color: inherit; }
.topbar, .app-header { background: rgba(19, 11, 27, 0.92); border-color: var(--bt20-border); }
.brand-badge, .artist-avatar { background: linear-gradient(145deg, #a275ff, var(--bt20-violet)); box-shadow: 0 8px 22px rgba(162,117,255,.30); }
.nav-links, .meta, .small, .section-copy, .hero p, .card p { color: var(--bt20-muted); }
.btn-primary { background: var(--bt20-violet); color: #fff; box-shadow: 0 8px 22px rgba(162,117,255,.30); }
.btn-secondary { background: var(--bt20-surface); color: var(--bt20-ink); border-color: var(--bt20-border); }
.panel, .card, .auth-card, .artist-card, .tattoo-mini, .modal-card { background: var(--bt20-surface); border-color: var(--bt20-border); box-shadow: var(--bt20-shadow); }
.input { background: #0c0712; color: var(--bt20-ink); border-color: var(--bt20-border); }
.input:focus { border-color: var(--bt20-violet); box-shadow: 0 0 0 4px rgba(162,117,255,.20); }
.eyebrow, .role-badge, .verified { color: var(--bt20-violet); background: rgba(162,117,255,.14); border-color: rgba(162,117,255,.32); }
.chip-row span, .stat, .task, .role-option { background: rgba(255,255,255,.05); color: var(--bt20-muted); border-color: var(--bt20-border); }
.role-option.selected, .role-option:has(input:checked) { border-color: var(--bt20-violet); background: rgba(162,117,255,.18); }
.bottom-nav { background: rgba(19, 11, 27, 0.95); border-color: var(--bt20-border); box-shadow: var(--bt20-shadow); }
.bottom-nav a.active { background: rgba(162,117,255,.2); color: var(--bt20-violet); }
.footer { border-color: var(--bt20-border); color: var(--bt20-muted); }

/* Public Beyond Tattoo storefront */
.bt-storefront, .bt-home, .bt-library-page { background: var(--bt20-bg); color: var(--bt20-ink); }
.bt-announcement { background: #130a1c; color: #f7f4ff; border-bottom: 1px solid var(--bt20-border); }
.bt-site-header { background: rgba(19, 11, 27, 0.92); border-color: var(--bt20-border); }
.bt-desktop-nav { color: var(--bt20-muted); }
.bt-desktop-nav a:hover, .bt-desktop-nav a.is-active { color: var(--bt20-violet); }
.bt-header-download, .bt-glow-button, .bt-btn-primary { background: linear-gradient(135deg, #a275ff, #8048f0); color: #fff; border-color: var(--bt20-violet); box-shadow: 0 8px 24px rgba(162,117,255,.35); }
.bt-login-link, .bt-outline-button, .bt-btn-ghost { color: #f7f4ff; background: rgba(255,255,255,.06); border-color: var(--bt20-border); }
.bt-page-hero, .bt-hero { background: radial-gradient(circle at 78% 18%, rgba(162,117,255,.22) 0, transparent 38%), var(--bt20-bg); border-color: var(--bt20-border); }
.bt-page-hero h1, .bt-hero h1, .bt-featured-copy h2, .bt-section-title { color: var(--bt20-ink); }
.bt-page-hero h1 strong, .bt-hero h1 span, .bt-kicker, .bt-gold-kicker { color: var(--bt20-gold); }
.bt-page-hero>div>p:last-of-type, .bt-lead, .bt-main-lead, .bt-featured-copy p { color: var(--bt20-muted); }
.bt-package-stage, .bt-hero-art, .bt-featured-card, .bt-daily-card, .bt-collection-detail, .bt-license-panel, .bt-process-panel { background: var(--bt20-surface); border-color: var(--bt20-border); box-shadow: var(--bt20-shadow); }
.bt-collection-name, .bt-gold, .bt-library-heading p, .bt-schedule-card time { color: var(--bt20-gold); }
.bt-category-row, .bt-category-row a, .bt-category-browser, .bt-category-browser a { background: var(--bt20-surface); border-color: var(--bt20-border); color: var(--bt20-ink); }
.bt-category-row a:hover, .bt-category-browser a.is-active, .bt-category-browser a:hover { background: rgba(162,117,255,.18); color: #fff; }
.bt-category-row b, .bt-category-browser b { color: var(--bt20-violet); }
.bt-library-heading, .bt-schedule-card, .bt-collection-detail-copy, .bt-pack-grid, .bt-pack-grid>div { border-color: var(--bt20-border); }
.bt-schedule-card { background: var(--bt20-surface); }
.bt-schedule-card h3, .bt-schedule-card p, .bt-name-list span { color: var(--bt20-ink); }
.bt-schedule-card>span { background: rgba(162,117,255,.18); color: var(--bt20-violet); }
.bt-save-stencil { border: 1px solid var(--bt20-border); border-radius: 999px; padding: 6px 9px; background: var(--bt20-surface); color: var(--bt20-violet); font-size: .68rem; font-weight: 800; cursor: pointer; }
.bt-save-stencil[aria-pressed="true"] { background: rgba(162,117,255,.22); border-color: #a275ff; }
.bt-stencil-viewer-backdrop { background: rgba(7,5,12,.82); }
.bt-stencil-viewer-dialog { background: var(--bt20-surface); border-color: var(--bt20-border); box-shadow: 0 30px 90px rgba(0,0,0,.68); }
.bt-stencil-viewer-art { background: #08040b; }
.bt-stencil-viewer-copy>p:first-child { color: var(--bt20-gold); }
.bt-stencil-viewer-note { color: var(--bt20-muted); }
.bt-store-footer { background: #08040a; border-color: var(--bt20-border); }
.bt-footer-links, .bt-footer-brand small { color: var(--bt20-muted); }

.bt-main-hero, .bt-category-section, .bt-daily-section, .bt-collections-section, .bt-studio-product, .bt-values-section { background: var(--bt20-bg); color: var(--bt20-ink); }
.bt-main-hero { background: radial-gradient(circle at 78% 22%, rgba(162,117,255,.25) 0, transparent 38%), var(--bt20-bg); }
.bt-main-copy h1, .bt-main-copy h1 strong, .bt-stencil-drop, .bt-category-section h2, .bt-section-heading-row h2, .bt-studio-product h2, .bt-values-grid strong { color: var(--bt20-ink); }
.bt-main-copy h1 span { color: var(--bt20-violet); }
.bt-main-lead, .bt-trust-row, .bt-studio-product-copy>p, .bt-values-grid small { color: var(--bt20-muted); }
.bt-package-stage, .bt-category-grid, .bt-daily-card, .bt-section-frame, .bt-studio-product-shell, .bt-values-grid { background: var(--bt20-surface); border-color: var(--bt20-border); box-shadow: var(--bt20-shadow); }
.bt-package-stage img { background: #0a060f; }
.bt-section-frame { background: var(--bt20-surface); }
.bt-category-grid a, .bt-studio-product-grid article { border-color: var(--bt20-border); color: var(--bt20-ink); background: rgba(255,255,255,.035); }
.bt-category-grid a:hover { background: rgba(162,117,255,.18); }
.bt-category-grid span { color: var(--bt20-ink); }
.bt-daily-copy { background: var(--bt20-surface); color: var(--bt20-ink); }
.bt-daily-copy h2, .bt-daily-features span { color: var(--bt20-ink); }
.bt-collection-tag { color: var(--bt20-gold); border-color: rgba(240,197,105,.35); }
.bt-daily-copy small { color: var(--bt20-muted); }

.bt-main-copy {
  max-width: 680px !important;
  padding: clamp(28px, 4vw, 48px) !important;
  border-radius: 28px !important;
  background: rgba(19, 11, 27, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(162, 117, 255, 0.32) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.68) !important;
}
.bt-main-copy h1 span { color: #a275ff !important; }
.bt-main-copy h1 strong { color: #ffffff !important; }
.bt-gold-kicker { color: #f0c569 !important; font-weight: 900 !important; }
.bt-stencil-drop { color: #f7f4ff !important; font-weight: 900 !important; }
.bt-main-lead { color: #d0c8dd !important; font-weight: 500 !important; }
.bt-trust-row span { color: #b8afc8 !important; font-weight: 700 !important; }
.bt-storefront .bt-needle-feature {
  background:
    radial-gradient(ellipse at 22% 50%, rgba(162,117,255,.22), transparent 52%),
    linear-gradient(90deg, rgba(9,5,14,.92), rgba(9,5,14,.82)),
    var(--bt-needle-sketch-bg) center / cover fixed;
}

/* Needle Bot compact sizing overrides */
.bt-needle-app-hero {
  padding-block: 28px !important;
}
.bt-needle-app-container {
  max-width: 820px !important;
  padding: 24px !important;
}
.bt-needle-app-avatar, .bt-needle-feature-art img {
  width: 140px !important;
  height: 140px !important;
  max-height: 140px !important;
  object-fit: contain !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}
.bt-needle-app-intro h1 {
  font-size: 26px !important;
  margin: 10px 0 6px !important;
}
.bt-needle-feature-art {
  min-height: 180px !important;
  max-height: 220px !important;
}

body[data-theme="dark"] { background: #09050e; color: #f7f4ff; }
body[data-theme="dark"] .panel, body[data-theme="dark"] .card, body[data-theme="dark"] .auth-card { background: #130b1b; border-color: rgba(255,255,255,.14); color: #f7f4ff; }

@media (max-width: 760px) {
  .bt-storefront .bt-needle-feature { background-attachment: scroll; background-position: center top; }
  .bt-mobile-menu { background: var(--bt20-surface); border-color: var(--bt20-border); }
  .bt-mobile-menu summary { background: var(--bt20-surface); color: var(--bt20-ink); border-color: var(--bt20-border); }
  .bt-mobile-menu > div { background: var(--bt20-surface); border-color: var(--bt20-border); box-shadow: var(--bt20-shadow); }
  .bt-mobile-menu a { color: var(--bt20-ink); }
  .bt-mobile-menu a:hover { background: rgba(162,117,255,.18); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}