/* Vault look for Bow Yu-Gi-Oh! Collection Manager (Spark, 2026-11): same family as collection.potterservice.com.
   Only colors, fonts and shapes live here. No app behavior. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap');
:root { --bg: #120c24; --surface: #221843; --ink: #f6f0ff; --muted: #c3b8dc; --line: rgba(255,255,255,.14); --nav: #0d0820; --gold: #f2c766; --green: #3fd6a0; --a: #ffcf5c; --b: #3f62c9; --panel-2: #2d2158; --shadow: 0 18px 44px -24px rgba(0,0,0,.85); }
body { font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif; background: radial-gradient(900px 560px at 84% -5%, rgba(168,132,255,.24), transparent 62%), radial-gradient(800px 520px at 30% 110%, #3f62c922, transparent 60%), var(--bg); background-attachment: fixed; color: var(--ink); }
a { color: #ffe7a6; }
h1, .hero h2, .wip-panel h2, .set-hero h2, .about h2 { font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: -.005em; }
:focus-visible { outline: 3px solid #7fe6ff; outline-offset: 2px; }
.sidebar { background: linear-gradient(180deg, #17102f, #0d0820); border-right: 1px solid rgba(242,199,102,.3); }
.brand strong { font-family: Cinzel, Georgia, serif; }
.brand-mark, .brand-ball { width: 46px; height: 52px; border-radius: 0; font-size: 0; color: transparent; background: url(../art/emblem.svg) center / contain no-repeat; box-shadow: none; border: 0; }
.brand-mark:after, .brand-ball:after, .brand-ball:before { display: none; }
.nav-link { color: #dcd2ee; }
.nav-link:hover, .nav-link.active { background: rgba(255,216,74,.12); color: #fff; }
.nav-link.active { box-shadow: inset 3px 0 var(--a); }
.nav-link em { color: #2a1a05; background: var(--gold); }
.side-note { color: #c3b8dc; border-color: var(--line); }
.topbar { background: rgba(18,12,36,.9); border-bottom: 1px solid rgba(242,199,102,.3); }
.topbar h1 { color: #fff; }
.eyebrow { color: var(--gold) !important; letter-spacing: .13em; }
.menu-button { background: var(--panel-2); color: #fff; border-color: var(--line); }
.button.primary { background: linear-gradient(120deg, #ffe7a6, #f2c766); color: #2a1a05; box-shadow: 0 12px 28px -14px rgba(242,199,102,.8); }
.button.secondary { background: transparent; color: var(--ink); border: 1.5px solid rgba(255,255,255,.26); }
.button.danger { background: transparent; color: #ff9a9a; border: 1.5px solid #ff7a7a; }
.button.hub-button, .button.hub-button.large { background: linear-gradient(120deg, var(--a), var(--b)); color: #fff; box-shadow: none; }
.hero { background: linear-gradient(90deg, rgba(18,12,36,.9), rgba(18,12,36,.5) 48%, rgba(18,12,36,.04) 74%), url(../art/hero.svg) right center / cover no-repeat; border: 2px solid var(--gold); min-height: 320px; grid-template-columns: 1fr; color: #fff; }
.hero h2 { color: #fff; max-width: 590px; font-size: clamp(28px, 3.3vw, 44px); }
.hero p { color: #efe6fb; max-width: 520px; }
.hero-pill, .wip-badge { background: rgba(18,12,36,.8); color: #ffe7a6; border: 1px solid rgba(242,199,102,.5); }
.collection-hub-banner { background: linear-gradient(120deg, #2d2158, #221843); border: 1px solid rgba(242,199,102,.4); color: var(--ink); }
.collection-hub-banner h3, .collection-hub-banner p, .collection-hub-banner p:not(.eyebrow) { color: var(--ink); }
.collection-hub-link { background: rgba(255,216,74,.08); border-color: rgba(242,199,102,.4); }
.collection-hub-link strong, .collection-hub-link small { display: block; }
.stats article, .panel { background: linear-gradient(170deg, #2d2158, #1d1340); border-color: var(--line); box-shadow: var(--shadow); color: var(--ink); }
.stats strong { color: #ffe7a6; }
.stats span, .stats small, .panel p { color: var(--muted); }
.text-button { color: #ffe7a6; }
.recent-row, .progress-row { background: rgba(18,10,42,.55); color: var(--ink); border-color: var(--line); }
.progress-row span { color: #ffe7a6; }
.empty, .empty.large, .loading, .result-count { color: var(--muted); border-color: var(--line); background: transparent; }
.search, select, input, textarea { background: #171033; color: var(--ink); border-color: var(--line); }
.search input { background: transparent; color: var(--ink); }
input::placeholder, textarea::placeholder { color: #a79ac4; }
select option { background: #1d1340; color: var(--ink); }
.set-card { background: linear-gradient(165deg, #2d2158, #1d1340); border: 2px solid rgba(242,199,102,.4); color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
.set-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 22px 44px -20px #000, 0 0 30px -12px var(--a); }
.set-logo-area { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.2), transparent 62%), rgba(18,10,42,.55); }
.set-logo-placeholder { color: var(--a); }
.set-hero { background: linear-gradient(120deg, #2d2158, #1d1340); border-color: rgba(242,199,102,.45); color: var(--ink); }
.hero-set-code { color: #ffe7a6; }
.progress-track { background: #120a2a; }
.progress-track i { background: linear-gradient(90deg, var(--a), var(--b)); }
.ygo-card { background: linear-gradient(170deg, #2d2158, #1d1340); border-color: var(--line); color: var(--ink); }
.ygo-card.is-owned { border-color: var(--gold); box-shadow: 0 0 18px -8px var(--gold); }
.ygo-card-body small, .ygo-card-body p { color: var(--muted); }
.card-image-wrap, .image-placeholder { background: #120a2a; }
.mark-button { background: rgba(255,216,74,.14); color: #ffe7a6; border: 1px solid rgba(242,199,102,.4); font-size: 12px; }
.ygo-card.is-owned .mark-button { background: linear-gradient(120deg, #ffe7a6, #f2c766); color: #2a1a05; }
.quantity-chip, .favorite-chip, .owned-chip, .foil-chip { background: var(--panel-2); color: var(--ink); }
.modal { background: #221843; color: var(--ink); border: 2px solid var(--gold); }
.modal-close { background: var(--panel-2); color: #fff; }
.modal label { color: var(--ink); }
.wip-panel { background: linear-gradient(170deg, #2d2158, #1d1340); border-color: rgba(242,199,102,.4); color: var(--ink); }
.danger-panel { background: linear-gradient(170deg, #3f1a35, #1d1340); border-color: rgba(255,122,122,.45); }
.setting-row { border-bottom-color: var(--line); }
.toast { background: var(--gold); color: #2a1a05; font-weight: 800; }
.about { max-width: 820px; display: grid; gap: 18px; }
.about h2 { font-size: 1.35rem; margin: 0 0 8px; color: #ffe7a6; }
.about p { margin: 0 0 10px; }
.about-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.about-actions a { text-decoration: none; }
.site-foot { padding: 20px 32px 26px; font-size: 12.5px; color: var(--muted); border-top: 1px solid rgba(242,199,102,.3); text-align: center; }
.site-foot a { font-weight: 700; }
.button.hub-button, .button.hub-button.large { background: linear-gradient(120deg, #3f62c9, #7a3fd0); }
@media (max-width: 820px) { .hero h2, .hero p { max-width: none; } .hero { background: linear-gradient(180deg, rgba(18,12,36,.9), rgba(18,12,36,.66)), url(../art/hero.svg) 80% center / cover no-repeat; } .site-foot { padding: 18px; } }