:root {
  color-scheme: dark;
  --bg: #09090b;
  --panel: #111114;
  --panel-2: #18181b;
  --line: #29292e;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --red: #e11d2e;
  --red-bright: #ff3347;
  --green: #22c55e;
  --amber: #f59e0b;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a, select, label { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px 22px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #0c0c0f; z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; margin: 0 8px 40px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; font-weight: 950; font-style: italic; letter-spacing: -2px; border: 2px solid var(--red); transform: skew(-7deg); background: linear-gradient(145deg, #2a1014, #101012); box-shadow: 0 0 28px rgba(225,29,46,.18); }
.brand strong { display: block; font-size: 19px; letter-spacing: -.3px; }
.brand small { display: block; color: var(--muted); margin-top: 2px; font-size: 11px; }
nav { display: grid; gap: 7px; }
.nav-link { color: var(--muted); text-decoration: none; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; font-weight: 650; }
.nav-link:hover { color: var(--text); background: var(--panel); }
.nav-link.active { color: white; border-color: #3f171c; background: linear-gradient(90deg, rgba(225,29,46,.18), rgba(225,29,46,.03)); }
.nav-link.active::before { content: ""; display: inline-block; width: 4px; height: 15px; border-radius: 4px; background: var(--red); margin-right: 10px; vertical-align: -2px; }
.sidebar-footer { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.account-panel { display: flex; align-items: center; gap: 9px; min-width: 0; margin-bottom: 2px; }
.account-panel > span:last-child { min-width: 0; }
.account-panel strong, .account-panel small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-panel strong { font-size: 12px; }
.account-panel small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.account-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: white; border: 1px solid #5f222b; border-radius: 50%; background: #2a1115; font-size: 9px; font-weight: 900; }
.sync-status { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.status-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.sync-status.local .status-dot { background: #71717a; box-shadow: none; }
.sync-status.syncing .status-dot { background: #60a5fa; box-shadow: 0 0 8px #60a5fa; animation: pulse 1s infinite; }
.sync-status.pending .status-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
@keyframes pulse { 50% { opacity: .35; } }
.account-button { width: 100%; padding: 9px 11px; color: white; border: 1px solid #62242d; border-radius: 9px; background: #301218; cursor: pointer; font-size: 12px; font-weight: 750; }
.account-button:hover { border-color: var(--red); background: #3b151c; }
.text-button { appearance: none; padding: 0; border: 0; color: #d4d4d8; background: transparent; text-align: left; cursor: pointer; font-size: 13px; }
.text-button:hover { color: white; }
.upload-label input { display: none; }

main { min-width: 0; }
.topbar { min-height: 92px; display: flex; align-items: center; gap: 20px; padding: 20px clamp(22px, 4vw, 56px); border-bottom: 1px solid var(--line); background: rgba(9,9,11,.86); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; }
.topbar h1 { font-size: 24px; margin: 2px 0 0; letter-spacing: -.5px; }
.eyebrow { margin: 0; color: var(--red-bright); font-size: 10px; font-weight: 850; letter-spacing: 1.8px; }
.menu-button { display: none; background: none; color: white; border: 0; font-size: 22px; }
.global-search { margin-left: auto; width: min(360px, 42vw); display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; color: var(--muted); }
.global-search:focus-within { border-color: #6b2831; box-shadow: 0 0 0 3px rgba(225,29,46,.08); }
.global-search input { width: 100%; color: white; border: 0; outline: 0; background: transparent; }
.global-search input::placeholder { color: #71717a; }
.content { width: min(1440px, 100%); margin: 0 auto; padding: 38px clamp(22px, 4vw, 56px) 70px; }
.view { display: none; animation: appear .22s ease-out; }
.view.active { display: block; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } }

.hero-panel { min-height: 295px; padding: clamp(28px, 5vw, 58px); display: flex; align-items: center; justify-content: space-between; overflow: hidden; border: 1px solid #38151b; border-radius: 22px; background: radial-gradient(circle at 80% 10%, rgba(225,29,46,.28), transparent 30%), linear-gradient(125deg, #181114, #111114 58%, #1d0d11); }
.hero-panel h2 { font-size: clamp(35px, 5vw, 62px); line-height: .98; letter-spacing: -3px; margin: 13px 0 18px; max-width: 700px; }
.hero-panel h2 span { color: var(--red-bright); }
.hero-panel p:not(.eyebrow) { max-width: 560px; color: #c4c4ca; line-height: 1.6; }
.hero-emblem { width: 205px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; margin-left: 30px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: inset 0 0 45px rgba(225,29,46,.18), 0 0 80px rgba(225,29,46,.12); transform: rotate(-7deg); }
.hero-emblem span { font-size: 70px; font-weight: 950; font-style: italic; letter-spacing: -10px; text-shadow: 5px 5px var(--red); }
.primary-button, .secondary-button { border-radius: 10px; cursor: pointer; font-weight: 750; }
.primary-button { border: 0; color: white; background: var(--red); padding: 12px 17px; margin-top: 8px; box-shadow: 0 8px 25px rgba(225,29,46,.2); }
.primary-button:hover { background: var(--red-bright); transform: translateY(-1px); }
.secondary-button { color: #e4e4e7; background: #1d1d21; border: 1px solid #34343a; padding: 10px 14px; }
.secondary-button:hover { border-color: #5a5a64; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 44px; }
.stat-card { padding: 20px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); }
.stat-card p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.stat-card strong { display: block; font-size: 27px; letter-spacing: -1px; }
.stat-card small { color: #71717a; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 0 0 17px; }
.section-heading h2 { margin: 5px 0 0; font-size: 25px; }
.section-heading .muted { margin-top: 8px; }
.muted { color: var(--muted); }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.set-grid.large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.set-card { position: relative; overflow: hidden; min-height: 194px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, #17171b, #101012); cursor: pointer; transition: .18s ease; }
.set-card::after { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; right: -55px; top: -55px; background: var(--accent); opacity: .12; filter: blur(4px); }
.set-card:hover { transform: translateY(-2px); border-color: #42424a; }
.set-year { color: var(--accent); font-weight: 850; font-size: 11px; letter-spacing: 1.2px; }
.set-card h3 { max-width: 82%; font-size: 19px; line-height: 1.2; margin: 10px 0 7px; }
.set-meta { color: var(--muted); font-size: 12px; }
.progress-track { height: 7px; margin-top: 26px; background: #2b2b30; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; width: var(--progress); background: var(--accent); border-radius: inherit; }
.progress-label { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--muted); }

.filter-bar { display: grid; grid-template-columns: 1.35fr 1fr 1fr auto; gap: 10px; margin-bottom: 17px; }
select { appearance: none; width: 100%; color: #e4e4e7; background: #151518; border: 1px solid var(--line); border-radius: 10px; padding: 11px 35px 11px 13px; background-image: linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%); background-position: calc(100% - 16px) 17px,calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.results-line { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; padding: 4px 2px 12px; }
.results-line strong { color: white; }
.card-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.card-row { display: grid; grid-template-columns: 48px 72px minmax(220px, 1.5fr) minmax(145px, 1fr) 115px 122px; gap: 14px; align-items: center; min-height: 82px; padding: 8px 16px; border-bottom: 1px solid #232327; }
.card-row:last-child { border-bottom: 0; }
.card-row:hover { background: #161619; }
.card-number { color: #f4f4f5; font-weight: 800; font-size: 13px; }
.card-name { font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-name-button { appearance: none; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.card-name-button:hover { color: var(--red-bright); }
.card-name small, .card-set { display: block; color: var(--muted); font-weight: 450; font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-pill { width: fit-content; color: #d4d4d8; background: #25252a; padding: 5px 8px; border-radius: 20px; font-size: 10px; }
.card-actions { display: flex; justify-content: flex-end; gap: 7px; }
.state-button { min-width: 53px; padding: 7px 9px; color: #aaaab3; border: 1px solid #35353b; border-radius: 8px; background: #1d1d21; cursor: pointer; font-size: 11px; }
.state-button:hover { color: white; }
.state-button.owned.active { color: #b8f7c8; border-color: #256d3c; background: #13321d; }
.state-button.wanted.active { color: #ffd993; border-color: #6f4b12; background: #33250f; }
.card-image-button { appearance: none; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
.image-frame { position: relative; display: grid; place-items: center; overflow: hidden; color: #71717a; border: 1px solid #303036; background: radial-gradient(circle at 35% 25%, #2a2a31, #141417 70%); }
.image-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .18s ease; }
.image-frame.has-image img { opacity: 1; }
.image-fallback { font-weight: 900; font-size: 10px; letter-spacing: -.4px; }
.card-thumbnail { width: 42px; aspect-ratio: 2.5 / 3.5; border-radius: 6px; }
.card-image-button:hover .card-thumbnail { border-color: #6b2831; box-shadow: 0 0 0 2px rgba(225,29,46,.12); }
.set-image { position: absolute; right: 16px; top: 16px; width: 74px; height: 96px; border-radius: 8px; opacity: .78; z-index: 1; }
.set-image:not(.has-image) { display: none; }
.set-card > :not(.set-image) { position: relative; z-index: 2; }
.card-dialog { width: min(900px, calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 0; overflow: auto; color: var(--text); border: 1px solid #3c3c42; border-radius: 20px; background: #111114; box-shadow: 0 30px 100px rgba(0,0,0,.7); }
.card-dialog::backdrop, .auth-dialog::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; right: 14px; top: 12px; z-index: 2; width: 35px; height: 35px; color: white; border: 1px solid #3c3c42; border-radius: 50%; background: #1d1d21; cursor: pointer; font-size: 23px; line-height: 1; }
.dialog-grid { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.1fr); min-height: 500px; }
.dialog-images { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 45px 28px; background: radial-gradient(circle at 50% 35%, #29292f, #0d0d10 70%); }
.card-preview { width: min(245px, 42%); aspect-ratio: 2.5 / 3.5; border-radius: 13px; box-shadow: 0 18px 50px rgba(0,0,0,.38); }
.card-preview:only-child { width: min(275px, 86%); }
.card-preview .image-fallback { font-size: 30px; color: #52525b; }
.dialog-details { padding: 64px 38px 40px; }
.dialog-details h2 { margin: 10px 0 28px; font-size: clamp(28px, 4vw, 42px); line-height: 1.05; letter-spacing: -1.5px; }
.dialog-details dl { margin: 0; }
.dialog-details dl div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dialog-details dt { color: var(--muted); font-size: 12px; }
.dialog-details dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.image-status { width: fit-content; margin: 25px 0 8px; padding: 7px 10px; border-radius: 20px; font-size: 11px; }
.image-status.approved { color: #b8f7c8; background: #13321d; }
.image-status.pending { color: #d4d4d8; background: #25252a; }
.image-credit { color: var(--muted); font-size: 11px; }
.source-link { display: inline-block; margin-top: 5px; color: #fda4af; font-size: 12px; }
.collection-details-form { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.collection-form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.collection-form-heading strong { font-size: 14px; }
.collection-form-heading small { color: var(--muted); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.collection-details-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.collection-details-form input, .collection-details-form textarea { width: 100%; padding: 9px 10px; color: white; border: 1px solid #34343a; border-radius: 9px; outline: none; background: #18181b; resize: vertical; }
.collection-details-form select { padding-top: 9px; padding-bottom: 9px; }
.collection-details-form input:focus, .collection-details-form textarea:focus { border-color: #7b2934; }
.notes-field { margin-top: 11px; }
.collection-details-form .secondary-button { width: 100%; margin-top: 12px; }
.auth-dialog { width: min(470px, calc(100vw - 30px)); padding: 0; color: var(--text); border: 1px solid #3c3c42; border-radius: 20px; background: #111114; box-shadow: 0 30px 100px rgba(0,0,0,.7); }
.auth-form { padding: 45px 38px 38px; }
.auth-form h2 { margin: 10px 0 12px; font-size: 31px; letter-spacing: -1px; }
.auth-form > p:not(.eyebrow):not(.auth-message) { margin: 0 0 26px; color: var(--muted); line-height: 1.55; font-size: 13px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 22px; padding: 4px; border: 1px solid #2f2f35; border-radius: 11px; background: #0b0b0d; }
.auth-tab { padding: 9px 10px; color: var(--muted); border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.auth-tab.active { color: white; background: #27272b; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.auth-form label { display: block; margin-bottom: 7px; color: #d4d4d8; font-size: 12px; }
.auth-form input { width: 100%; margin-bottom: 13px; padding: 12px 13px; color: white; border: 1px solid #34343a; border-radius: 10px; outline: none; background: #18181b; }
.auth-form input:focus { border-color: #7b2934; box-shadow: 0 0 0 3px rgba(225,29,46,.1); }
.auth-form .password-hint { margin: -4px 0 2px; color: var(--muted); font-size: 11px; }
.auth-form .primary-button { width: 100%; margin-top: 13px; }
.auth-form .primary-button:disabled { opacity: .65; cursor: wait; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 17px 0 12px; color: #71717a; font-size: 10px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: #2f2f35; }
.auth-magic-button { width: 100%; }
.auth-magic-button:disabled { opacity: .65; cursor: wait; }
.auth-message { min-height: 18px; margin: 14px 0 0; color: #fda4af; font-size: 12px; }
.empty-state { padding: 65px 24px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: white; margin-bottom: 7px; }
.load-more { display: block; margin: 18px auto 0; }
.load-more[hidden] { display: none; }
.collection-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 36px; }
.summary-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--panel); }
.summary-card span { color: var(--muted); font-size: 12px; }
.summary-card strong { display: block; margin-top: 8px; font-size: 30px; }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 16px; border: 1px solid #3c3c42; border-radius: 10px; background: #1c1c20; box-shadow: 0 12px 40px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s; z-index: 50; }
.toast.show { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .set-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .card-row { grid-template-columns: 44px 60px minmax(180px, 1.5fr) minmax(120px, 1fr) 115px; }
  .card-row .category-pill { display: none; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; width: min(290px, 85vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 14px 0 50px rgba(0,0,0,.45); }
  .sidebar.open { transform: none; }
  .menu-button { display: block; }
  .topbar { min-height: 77px; padding: 14px 18px; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 20px; }
  .global-search { width: auto; flex: 1; }
  .content { padding: 22px 16px 55px; }
  .hero-panel { min-height: 330px; padding: 28px; }
  .hero-panel h2 { font-size: 40px; letter-spacing: -2px; }
  .hero-emblem { display: none; }
  .stat-grid { gap: 9px; margin-bottom: 35px; }
  .stat-card { padding: 16px; }
  .set-grid, .set-grid.large { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-bar .secondary-button { width: 100%; }
  .card-row { grid-template-columns: 38px 45px minmax(0, 1fr) auto; gap: 9px; padding: 9px 12px; }
  .card-thumbnail { width: 36px; }
  .card-row .card-set, .card-row .category-pill { display: none; }
  .card-actions { display: grid; grid-template-columns: 1fr; }
  .state-button { min-width: 61px; padding: 6px; }
  .collection-summary { grid-template-columns: 1fr; }
  .dialog-grid { grid-template-columns: 1fr; }
  .dialog-images { min-height: 330px; padding: 38px 20px 24px; }
  .dialog-details { padding: 30px 24px 34px; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .global-search span { display: none; }
  .global-search { padding: 9px 10px; }
  .global-search input { font-size: 13px; }
  .filter-bar { grid-template-columns: 1fr; }
}

/* Collector edition: a cosmetic layer over the existing checklist and sync flows. */
:root {
  --bg: #0b0d19;
  --panel: #171a2b;
  --panel-2: #20243a;
  --line: #32364f;
  --text: #f6f7ff;
  --muted: #a7abc3;
  --red: #826bfa;
  --red-bright: #a690ff;
  --green: #4bd1b4;
  --amber: #f4bb72;
  --radius: 18px;
}
body { background: radial-gradient(ellipse at 68% -15%, #202346 0, transparent 43%), var(--bg); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, .set-card:focus-visible { outline: 2px solid #85d9f8; outline-offset: 3px; }
.app-shell { grid-template-columns: 238px minmax(0, 1fr); }
.sidebar { background: linear-gradient(170deg, #14172a, #0d1020 65%); border-right-color: #292d45; padding-top: 31px; }
.brand { margin-bottom: 43px; }
.brand-mark { transform: none; border: 1px solid #8676d8; border-radius: 12px; background: linear-gradient(135deg, #795bdb, #3bc2dc); box-shadow: 0 7px 25px #6b60ef3a; letter-spacing: -3px; }
.brand strong { font-size: 21px; letter-spacing: -.8px; }
.brand small { color: #a3a8c7; }
.nav-link { border-radius: 12px; padding: 13px 15px; }
.nav-link.active { border-color: #7569b353; background: linear-gradient(90deg, #7867d640, #4c6dbc1a); }
.nav-link.active::before { background: linear-gradient(#ac8dff, #47d4ee); box-shadow: 0 0 12px #8b7af0; }
.nav-link:hover { background: #20243a; }
.sidebar-footer { border-top-color: #2e3350; }
.account-avatar { border-color: #7773b3; background: #303357; }
.account-button { border-color: #7061b4; background: #3b3067; }
.account-button:hover { border-color: #ae9afa; background: #4b3b85; }
.topbar { min-height: 88px; background: #101324d9; border-bottom-color: #2a2e45; }
.topbar h1 { font-size: 25px; }
.eyebrow { color: #b7a4ff; }
.global-search { background: #1b1e31; border-color: #333750; border-radius: 14px; }
.global-search:focus-within { border-color: #9581fa; box-shadow: 0 0 0 3px #8973ef25; }
.content { padding-top: 28px; }

.hero-panel { min-height: 265px; padding: clamp(26px, 4vw, 45px); border-color: #515383; border-radius: 24px; background: radial-gradient(circle at 82% 30%, #664bb080, transparent 29%), radial-gradient(circle at 60% 110%, #197fa650, transparent 37%), linear-gradient(115deg, #1d203d, #25234b 60%, #161b36); box-shadow: 0 18px 60px #03061445; position: relative; }
.hero-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(135deg, transparent 0 74px, #ffffff08 75px 76px, transparent 77px 150px); mask-image: linear-gradient(90deg, transparent 25%, black); }
.hero-copy, .hero-progress { position: relative; z-index: 1; }
.hero-copy { max-width: 660px; }
.hero-panel h2 { font-size: clamp(35px, 4vw, 56px); margin: 11px 0 15px; line-height: 1.02; letter-spacing: -2.5px; }
.hero-panel h2 span { color: #c4b5ff; }
.hero-panel p:not(.eyebrow) { margin: 0; color: #c8cbe1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero-actions .primary-button, .hero-actions .secondary-button { margin: 0; }
.hero-actions .primary-button span { margin-left: 10px; }
.primary-button { background: linear-gradient(110deg, #8169f2, #a979ec); box-shadow: 0 9px 24px #6e58d957; }
.primary-button:hover { background: linear-gradient(110deg, #9b88fb, #b68ff8); }
.secondary-button { border-color: #555b7a; background: #222640; }
.secondary-button:hover { border-color: #9c8bde; }
.hero-progress { min-width: 180px; display: grid; justify-items: center; gap: 10px; margin-left: 24px; }
.hero-progress-ring { width: 142px; height: 142px; border-radius: 50%; background: conic-gradient(#6ce0f2, #9a83fa var(--progress), #3d4262 var(--progress)); display: grid; place-items: center; box-shadow: 0 0 40px #6e78eb33; }
.hero-progress-ring > div { width: 119px; height: 119px; border-radius: 50%; background: #1d203f; display: grid; align-content: center; justify-items: center; }
.hero-progress-ring strong { font-size: 27px; letter-spacing: -1px; }
.hero-progress-ring span { font-size: 10px; letter-spacing: 2px; color: #b7bce0; font-weight: 800; }
.hero-progress p { font-size: 12px; text-align: center; white-space: nowrap; }
.hero-progress p strong { color: #fff; }

.stat-grid { margin: 18px 0 42px; }
.stat-card, .summary-card { background: linear-gradient(145deg, #1b1e32, #171a2a); border-color: #323750; box-shadow: inset 0 1px #ffffff0b; }
.stat-card { min-height: 112px; padding: 19px 20px; }
.stat-card strong, .summary-card strong { font-variant-numeric: tabular-nums; }
.stat-card strong { font-size: 26px; }
.stat-card small { color: #8e96b5; }
.section-heading { margin-bottom: 18px; }
.section-heading h2 { letter-spacing: -.7px; }
.section-heading .text-button { color: #8fdcf3; }
.section-heading .text-button:hover { color: #c5f3ff; }
.set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.set-card { min-height: 0; padding: 0; border-color: #363b58; background: #191d30; border-radius: 18px; box-shadow: 0 10px 27px #04071536; }
.set-card::after { display: none; }
.set-card:hover, .set-card:focus-visible { transform: translateY(-3px); border-color: #8e83cd; box-shadow: 0 15px 35px #05071783; }
.set-visual { height: 174px; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--accent), transparent 38%), transparent 52%), linear-gradient(130deg, #242a4c, #15192c 70%); }
.set-visual::before, .set-visual::after { content: ""; position: absolute; width: 62%; height: 150%; border: 1px solid #ffffff26; transform: rotate(31deg); box-shadow: 0 0 25px color-mix(in srgb, var(--accent), transparent 65%); }
.set-visual::after { width: 42%; height: 135%; transform: rotate(-30deg); border-color: #ffffff17; }
.set-visual-rings { position: absolute; inset: 15px; border: 1px solid #ffffff12; border-radius: 12px; }
.set-cover-placeholder { width: 102px; height: 139px; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; border: 2px solid color-mix(in srgb, var(--accent), white 30%); border-radius: 7px; background: linear-gradient(145deg, #ffffff1b, #0e1124d9), var(--accent); box-shadow: 0 13px 30px #050714ab, inset 0 0 0 4px #ffffff24; transform: rotate(-6deg); }
.set-cover-placeholder span { font-size: 34px; font-style: italic; font-weight: 950; letter-spacing: -5px; }
.set-cover-placeholder strong { margin-top: 8px; font-size: 16px; letter-spacing: 2px; }
.set-cover-placeholder small { font-size: 7px; letter-spacing: 2px; }
.set-cover { width: 112px; height: 145px; position: relative; z-index: 1; border-color: #ffffff7c; border-radius: 7px; box-shadow: 0 13px 30px #050714ab; transform: rotate(-5deg); }
.set-visual-label { position: absolute; bottom: 11px; right: 13px; color: #ffffffb8; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.set-card-body { padding: 17px 18px 18px; }
.set-year { color: #b7a4ff; }
.set-card h3 { max-width: 100%; margin: 8px 0 7px; min-height: 45px; font-size: 17px; }
.set-meta { color: #aab1cb; }
.progress-track { height: 6px; margin-top: 20px; background: #343953; }
.progress-fill { background: linear-gradient(90deg, #53d7e8, #9a84fa); }
.progress-label { margin-top: 10px; color: #b8bed7; }
.progress-label strong { color: #d2c8ff; }

.recent-heading { margin-top: 42px; }
.recent-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.recent-grid > .empty-state { grid-column: 1 / -1; border: 1px dashed #464b6d; border-radius: 18px; background: #171b2c; padding: 38px 20px; }
.recent-card { min-width: 0; display: grid; align-content: start; gap: 5px; padding: 11px; color: var(--text); background: #1a1e31; border: 1px solid #353b58; border-radius: 14px; text-align: left; cursor: pointer; }
.recent-card:hover { border-color: #9887e6; transform: translateY(-2px); }
.recent-image { width: min(100%, 112px); aspect-ratio: 2.5 / 3.5; margin: 0 auto 7px; border-radius: 8px; border-color: #5f6085; background: radial-gradient(circle at 30% 25%, #7268ba, #212744 72%); }
.recent-image .image-fallback { font-size: 28px; color: #d9d2ff; letter-spacing: -1px; }
.recent-name { font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-number { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-owned { width: fit-content; margin-top: 6px; padding: 4px 7px; border-radius: 7px; font-size: 10px; color: #a2f4dc; background: #1c544c; }

.card-list { border-color: #363b57; background: #171a2a; }
.card-row { border-bottom-color: #2c3048; }
.card-row:hover { background: #22263c; }
.card-name-button:hover, .source-link { color: #c4b0ff; }
.category-pill { background: #30354e; }
.state-button { background: #22263c; border-color: #454b69; }
.state-button.owned.active { color: #a1f5db; border-color: #308d7d; background: #16483e; }
.state-button.wanted.active { color: #ffe1a6; border-color: #8e6b2c; background: #49361d; }
.card-image-button:hover .card-thumbnail { border-color: #9b8af5; box-shadow: 0 0 0 2px #8b79eb33; }
.image-frame { background: radial-gradient(circle at 35% 25%, #4b4b79, #1b2035 72%); border-color: #4a4f6e; }
select, .collection-details-form input, .collection-details-form textarea, .auth-form input { background-color: #1c2034; border-color: #414665; }
select:focus, .collection-details-form input:focus, .collection-details-form textarea:focus, .auth-form input:focus { border-color: #a08efa; }
.card-dialog, .auth-dialog { background: #171a2b; border-color: #505577; }
.dialog-images { background: radial-gradient(circle at 50% 35%, #393b6c, #111524 70%); }
.auth-tabs { background: #111425; border-color: #383d5b; }
.auth-tab.active { background: #3b3c67; }
.toast { background: #252942; border-color: #666a94; }

@media (max-width: 1180px) {
  .set-grid, .set-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; }
  .topbar { min-height: 76px; }
  .content { padding-top: 20px; }
  .hero-panel { min-height: 0; padding: 26px; gap: 20px; }
  .hero-panel h2 { font-size: clamp(33px, 7vw, 45px); }
  .hero-progress { min-width: 116px; margin-left: 0; }
  .hero-progress-ring { width: 108px; height: 108px; }
  .hero-progress-ring > div { width: 90px; height: 90px; }
  .hero-progress-ring strong { font-size: 20px; }
  .hero-progress p { white-space: normal; }
  .set-grid, .set-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-card h3 { min-height: 0; }
}
@media (max-width: 590px) {
  .hero-panel { display: block; }
  .hero-progress { display: flex; justify-content: flex-start; margin: 24px 0 0; }
  .hero-progress-ring { flex: 0 0 auto; width: 82px; height: 82px; }
  .hero-progress-ring > div { width: 68px; height: 68px; }
  .hero-progress-ring strong { font-size: 16px; }
  .hero-progress-ring span { font-size: 7px; letter-spacing: 1px; }
  .hero-progress p { text-align: left; }
  .set-grid, .set-grid.large { grid-template-columns: 1fr; }
  .set-visual { height: 155px; }
  .recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent-heading { align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}