:root { color-scheme: dark; --ink: #f4f0e8; --muted: #9299a5; --bg: #10161f; --panel: #171f2a; --line: #2a3542; --accent: #d8ad62; --accent-soft: #332b20; --green: #82c7a0; font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
* { scrollbar-color: #344151 transparent; }
body { background: var(--bg); color: var(--ink); }
.app-top-bar { background: rgba(16,22,31,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.topbar-inner { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-size: 1.1rem; letter-spacing: -.03em; font-weight: 700; }
.brand-mark { color: var(--accent); font-size: 1.4rem; }
.top-nav { display: flex; align-items: center; gap: .5rem; }
.nav-link { color: var(--muted); text-decoration: none; padding: .65rem .85rem; border-radius: .5rem; font-size: .82rem; }
.nav-link.is-active, .nav-link:hover { color: var(--ink); background: #202a37; }
.icon-button, .text-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button { font-size: 1.25rem; }
.page-content { padding-top: 3.25rem; padding-bottom: 4rem; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.75rem; }
.eyebrow, .section-kicker { color: var(--accent); font-size: .68rem; letter-spacing: .16em; font-weight: 700; margin: 0 0 .7rem; }
h1, h2, p { margin-top: 0; }
h1 { font-family: Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.1rem); line-height: .98; letter-spacing: -.055em; margin-bottom: 1rem; }
h1 em { color: var(--accent); font-weight: 400; }
h2 { font-size: 1.1rem; letter-spacing: -.02em; margin-bottom: 0; }
.intro-copy { color: var(--muted); line-height: 1.65; font-size: .9rem; }
.deck-name-wrap { width: 14rem; flex: 0 0 auto; }
.deck-name-wrap label { display: block; color: var(--muted); font-size: .7rem; margin-bottom: .45rem; }
input { border: 1px solid var(--line); background: #121a24; color: var(--ink); border-radius: .45rem; padding: .7rem .8rem; outline: none; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216,173,98,.12); }
.deck-name-wrap input { width: 100%; }
.workspace { align-items: flex-start; gap: 1.25rem; }
.search-panel, .deck-panel { background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; padding: 1.35rem; }
.search-panel { flex: 1.8 1 0; min-width: 0; }
.deck-panel { flex: 1 1 0; position: sticky; top: 5.5rem; }
.section-heading, .deck-heading, .deck-summary { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.api-chip { color: var(--green); background: rgba(130,199,160,.08); border: 1px solid rgba(130,199,160,.2); border-radius: 99px; font-size: .68rem; padding: .35rem .55rem; white-space: nowrap; }
.status-dot { display: inline-block; width: .4rem; height: .4rem; background: var(--green); border-radius: 50%; margin-right: .25rem; }
.search-form { margin: 1.35rem 0 .8rem; }
.search-input-wrap { display: flex; align-items: center; gap: .65rem; background: #121a24; border: 1px solid var(--line); border-radius: .45rem; padding-left: .8rem; }
.search-input-wrap > span { color: var(--accent); font-size: 1.4rem; }
.search-input-wrap input { border: 0; box-shadow: none; flex: 1; min-width: 0; background: transparent; }
.search-submit, .primary-button { border: 0; background: var(--accent); color: #1a1610; font-weight: 700; border-radius: .4rem; cursor: pointer; min-height: 2.55rem; padding: 0 1rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-button { color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: .4rem .7rem; font-size: .72rem; cursor: pointer; }
.filter-button.is-selected, .filter-button:hover { color: var(--accent); border-color: #78623b; background: var(--accent-soft); }
.results-meta { min-height: 2.8rem; display: flex; align-items: end; justify-content: space-between; color: var(--muted); font-size: .72rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; padding-bottom: .65rem; }
.card-results { grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr)); }
.card-item { position: relative; min-width: 0; }
.card-image { width: 100%; aspect-ratio: 5/6.95; object-fit: cover; border-radius: .5rem; background: #222b36; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.card-image { cursor: zoom-in; }
.card-image:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card-item button { position: absolute; right: .45rem; bottom: 2.8rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0; background: var(--accent); color: #17120b; font-weight: 900; cursor: pointer; }
.card-item button:hover { transform: scale(1.06); }
.card-item .favorite-button { top: .45rem; right: .45rem; bottom: auto; background: rgba(16,22,31,.82); color: var(--ink); font-size: 1rem; }
.card-item .favorite-button.is-favorite { color: #e48a8a; }
.card-name { font-size: .75rem; font-weight: 700; margin: .55rem 0 .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-type { color: var(--muted); font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-state, .deck-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 14rem; text-align: center; color: var(--muted); gap: .55rem; font-size: .8rem; }
.empty-icon, .deck-empty-mark { color: var(--accent); font-size: 2rem; }
.empty-state strong, .deck-empty strong { color: var(--ink); }
.load-more { width: 100%; margin-top: 1.25rem; min-height: 2.6rem; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: .4rem; cursor: pointer; }
.deck-heading-actions { display: flex; align-items: center; gap: .65rem; }.random-button { min-height: 2rem; border: 1px solid #78623b; border-radius: 99px; background: var(--accent-soft); color: var(--accent); padding: .25rem .6rem; font-size: .68rem; cursor: pointer; }.random-button:disabled { opacity: .55; cursor: wait; }.card-count { font-size: .75rem; color: var(--muted); }.card-count strong { color: var(--accent); font-size: 1.4rem; }
.progress-track { height: .3rem; background: #293441; border-radius: 9rem; margin: 1rem 0 .75rem; }.progress-track span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .2s; }
.deck-summary { font-size: .72rem; color: var(--muted); margin-bottom: 1rem; }.text-button { font-size: .7rem; text-decoration: underline; cursor: pointer; }
.deck-list { min-height: 18rem; max-height: 30rem; overflow: auto; border-top: 1px solid var(--line); }
.deck-row { display: flex; align-items: center; gap: .65rem; padding: .65rem 0; border-bottom: 1px solid rgba(42,53,66,.7); }.deck-card-icon { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 2.7rem; place-items: center; overflow: hidden; border-radius: .25rem; background: linear-gradient(145deg, #5d4930, #202b37); color: var(--accent); font-family: Georgia, serif; font-size: 1.3rem; }.deck-card-icon img { width: 100%; height: 100%; object-fit: cover; }.deck-card-icon.is-fallback img { display: none; }.deck-row-info { min-width: 0; flex: 1; }.deck-row-name { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.deck-row-type { font-size: .62rem; color: var(--muted); }.quantity { display: flex; align-items: center; gap: .25rem; }.quantity button { background: #222d3a; color: var(--ink); border: 0; border-radius: .25rem; width: 1.8rem; height: 1.8rem; cursor: pointer; }.quantity span { width: 1.1rem; text-align: center; font-size: .75rem; }
.deck-footer { border-top: 1px solid var(--line); padding-top: 1.15rem; }.primary-button { width: 100%; }.primary-button:disabled { opacity: .45; cursor: not-allowed; }.deck-footer p { color: var(--muted); font-size: .65rem; text-align: center; margin: .75rem 0 0; }
.app-bottom-bar { display: none; background: #151d27; border-top: 1px solid var(--line); }.app-bottom-bar a, .app-bottom-bar button { color: var(--muted); text-decoration: none; background: none; border: 0; font-size: .65rem; cursor: pointer; }.app-bottom-bar a span:first-child, .app-bottom-bar button span:first-child { font-size: 1.1rem; }.app-bottom-bar a[aria-current="page"] { color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%); transition: transform .2s; background: var(--accent); color: #16120c; padding: .7rem 1rem; border-radius: .4rem; font-size: .8rem; z-index: 20; }.toast.is-visible { transform: translate(-50%, 0); }
.modal-open { overflow: hidden; }
.card-modal[hidden] { display: none; }
.card-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; }
.card-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,12,.84); backdrop-filter: blur(8px); }
.card-modal-content { position: relative; display: flex; align-items: center; gap: 1.5rem; max-width: 34rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45); }
.modal-card-image { width: min(52vw, 19rem); max-height: 78vh; object-fit: contain; border-radius: .65rem; }
.modal-card-copy { min-width: 10rem; }.modal-card-copy h2 { font-family: Georgia, serif; font-size: 1.5rem; margin: 0 0 .45rem; }.modal-card-copy p:last-child { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.modal-close { position: absolute; top: .55rem; right: .55rem; border: 0; border-radius: 50%; background: #273442; color: var(--ink); font-size: 1.35rem; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-bottom-bar :where(a, button):focus-visible, button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ios-install-dialog { max-width: 22rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); color: var(--ink); padding: 1.25rem; }
.ios-install-dialog::backdrop { background: rgba(5,8,12,.72); }
.ios-install-dialog p { color: var(--muted); line-height: 1.5; }
.ios-install-dialog button { border: 0; border-radius: .4rem; background: var(--accent); color: #1a1610; font-weight: 700; padding: 0 1rem; cursor: pointer; }
@media (max-width: 640px) { .keyboard-open .app-bottom-bar { display: none; } }
@media (max-width: 640px) { .top-nav .nav-link, .icon-button { display: none; }.page-content { padding-top: 2rem; padding-bottom: 2rem; }.intro { display: block; margin-bottom: 2rem; }.deck-name-wrap { width: 100%; margin-top: 1.25rem; }.search-panel, .deck-panel { width: 100%; }.deck-panel { position: static; }.search-submit { padding: 0 .7rem; }.app-bottom-bar { display: flex; }.card-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-modal-content { flex-direction: column; max-height: calc(100dvh - 2rem); overflow: auto; padding: .8rem; }.modal-card-image { width: min(78vw, 19rem); max-height: 68vh; }.modal-card-copy { width: 100%; padding: 0 .35rem .25rem; } }
@media (min-width: 641px) and (max-width: 1024px) { .deck-panel { flex-basis: 17rem; }.card-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }