/* ============================================================
   TCG Collection — Component styles
   All tokens via var(--tcg-*). No raw hex values.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--tcg-paper);
    color: var(--tcg-ink);
    font-family: var(--tcg-font-body);
    font-size: var(--tcg-fs-md);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

a {
    color: var(--tcg-primary);
    text-decoration: none;
    transition: color var(--tcg-dur-fast) var(--tcg-ease-out);
}
a:hover { color: var(--tcg-primary-dark); text-decoration: underline; }

h1, h2, h3, h4 {
    color: var(--tcg-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 var(--tcg-s-3);
}
h1 { font-size: var(--tcg-fs-2xl); }
h2 { font-size: var(--tcg-fs-xl); }
h3 { font-size: var(--tcg-fs-lg); }

/* -----------------------------------------------------------
   Nav
   ----------------------------------------------------------- */
.tcg-nav {
    background: linear-gradient(135deg, var(--tcg-primary) 0%, var(--tcg-primary-dark) 100%);
    color: #fff;
    box-shadow: var(--tcg-shadow-1);
    position: sticky;
    top: 0;
    z-index: 100;
}
.tcg-nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--tcg-s-2) var(--tcg-s-4);
    display: flex;
    align-items: center;
    gap: var(--tcg-s-4);
    flex-wrap: wrap;
}
.tcg-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--tcg-s-2);
    color: #fff;
    font-weight: 700;
    font-size: var(--tcg-fs-lg);
    letter-spacing: 0.01em;
    text-decoration: none;
}
.tcg-nav-brand:hover { color: #fff; opacity: 0.9; text-decoration: none; }
.tcg-nav-brand i { color: var(--tcg-secondary-light); }

.tcg-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--tcg-s-1);
    flex-wrap: wrap;
}
.tcg-nav-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--tcg-s-2);
    color: #fff;
    padding: var(--tcg-s-2) var(--tcg-s-3);
    border-radius: var(--tcg-radius-sm);
    font-size: var(--tcg-fs-sm);
    font-weight: 500;
    min-height: var(--tcg-tap-min);
    text-decoration: none;
    transition: background var(--tcg-dur-fast) var(--tcg-ease-out);
}
.tcg-nav-links a:hover {
    background: rgba(255, 255, 255, 0.14);
    text-decoration: none;
}

.tcg-nav-user {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--tcg-s-3);
    color: #fff;
    font-size: var(--tcg-fs-sm);
}
.tcg-nav-user-name { opacity: 0.85; }
.tcg-nav-logout {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tcg-tap-min);
    min-height: var(--tcg-tap-min);
    border-radius: var(--tcg-radius-sm);
    transition: background var(--tcg-dur-fast) var(--tcg-ease-out);
}
.tcg-nav-logout:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* -----------------------------------------------------------
   Main / Footer
   ----------------------------------------------------------- */
.tcg-main {
    max-width: 1320px;
    margin: 0 auto;
    min-height: calc(100vh - 180px);
}

.tcg-footer {
    background: var(--tcg-surface);
    border-top: 1px solid var(--tcg-line);
    margin-top: var(--tcg-s-7);
}
.tcg-footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--tcg-s-3) var(--tcg-s-4);
    display: flex;
    align-items: center;
    gap: var(--tcg-s-3);
    flex-wrap: wrap;
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
}
.tcg-footer-brand { color: var(--tcg-primary); font-weight: 700; }
.tcg-footer-version {
    font-family: var(--tcg-font-mono);
    background: var(--tcg-primary-soft);
    color: var(--tcg-primary-dark);
    padding: 1px 8px;
    border-radius: var(--tcg-radius-pill);
}

/* -----------------------------------------------------------
   Card / Panel
   ----------------------------------------------------------- */
.tcg-card {
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    padding: var(--tcg-s-5);
    box-shadow: var(--tcg-shadow-1);
}
.tcg-card h2 { margin-top: 0; }

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.tcg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tcg-s-2);
    min-height: var(--tcg-tap-min);
    padding: var(--tcg-s-2) var(--tcg-s-4);
    border-radius: var(--tcg-radius-sm);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--tcg-fs-md);
    cursor: pointer;
    transition: background var(--tcg-dur-fast) var(--tcg-ease-out),
                box-shadow  var(--tcg-dur-fast) var(--tcg-ease-out);
}
.tcg-btn-primary {
    background: var(--tcg-primary);
    color: #fff;
    border-color: var(--tcg-primary);
}
.tcg-btn-primary:hover { background: var(--tcg-primary-dark); border-color: var(--tcg-primary-dark); }
.tcg-btn-secondary {
    background: var(--tcg-secondary);
    color: var(--tcg-ink);
    border-color: var(--tcg-secondary);
}
.tcg-btn-secondary:hover { background: var(--tcg-secondary-dark); border-color: var(--tcg-secondary-dark); }
.tcg-btn-block { width: 100%; }

/* -----------------------------------------------------------
   Forms
   ----------------------------------------------------------- */
.tcg-form-group { margin-bottom: var(--tcg-s-4); }
.tcg-label {
    display: block;
    margin-bottom: var(--tcg-s-1);
    font-size: var(--tcg-fs-sm);
    font-weight: 600;
    color: var(--tcg-ink-soft);
}
.tcg-input {
    width: 100%;
    min-height: var(--tcg-tap-min);
    padding: var(--tcg-s-2) var(--tcg-s-3);
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius-sm);
    font: inherit;
    color: var(--tcg-ink);
    transition: border-color var(--tcg-dur-fast) var(--tcg-ease-out);
}
.tcg-input:focus {
    outline: none;
    border-color: var(--tcg-primary);
    box-shadow: 0 0 0 3px var(--tcg-primary-soft);
}

/* -----------------------------------------------------------
   Login page
   ----------------------------------------------------------- */
.tcg-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tcg-s-4);
    background:
        radial-gradient(circle at 20% 20%, var(--tcg-primary-soft) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(212, 160, 23, 0.10) 0%, transparent 40%),
        var(--tcg-paper);
}
.tcg-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--tcg-surface);
    border-radius: var(--tcg-radius-lg);
    box-shadow: var(--tcg-shadow-3);
    overflow: hidden;
}
.tcg-login-header {
    background: linear-gradient(135deg, var(--tcg-primary), var(--tcg-primary-dark));
    color: #fff;
    padding: var(--tcg-s-6) var(--tcg-s-5) var(--tcg-s-5);
    text-align: center;
}
.tcg-login-header i {
    font-size: 2.5rem;
    color: var(--tcg-secondary-light);
    margin-bottom: var(--tcg-s-2);
}
.tcg-login-header h1 {
    color: #fff;
    margin: 0;
    font-size: var(--tcg-fs-xl);
}
.tcg-login-header p { margin: var(--tcg-s-1) 0 0; opacity: 0.85; font-size: var(--tcg-fs-sm); }

.tcg-login-body { padding: var(--tcg-s-6) var(--tcg-s-5) var(--tcg-s-5); }
.tcg-login-error {
    background: rgba(201, 42, 42, 0.08);
    border: 1px solid rgba(201, 42, 42, 0.25);
    color: var(--tcg-danger);
    padding: var(--tcg-s-2) var(--tcg-s-3);
    border-radius: var(--tcg-radius-sm);
    font-size: var(--tcg-fs-sm);
    margin-bottom: var(--tcg-s-4);
}

/* -----------------------------------------------------------
   Diagnostic page (admin-7k/debugging/phptest.php)
   ----------------------------------------------------------- */
.tcg-diag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--tcg-s-4);
    margin: var(--tcg-s-5) 0;
}
.tcg-diag-tile {
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-left: 4px solid var(--tcg-mute);
    border-radius: var(--tcg-radius);
    padding: var(--tcg-s-4);
    box-shadow: var(--tcg-shadow-1);
}
.tcg-diag-tile.ok      { border-left-color: var(--tcg-success); }
.tcg-diag-tile.warn    { border-left-color: var(--tcg-warning); }
.tcg-diag-tile.fail    { border-left-color: var(--tcg-danger);  }

.tcg-diag-label {
    font-size: var(--tcg-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tcg-mute);
    font-weight: 700;
}
.tcg-diag-value {
    font-family: var(--tcg-font-mono);
    font-size: var(--tcg-fs-sm);
    color: var(--tcg-ink);
    word-break: break-all;
    margin-top: var(--tcg-s-1);
}
.tcg-diag-status {
    display: inline-block;
    padding: 1px 8px;
    margin-top: var(--tcg-s-2);
    border-radius: var(--tcg-radius-pill);
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tcg-dev-banner {
    background: repeating-linear-gradient(45deg, #c92a2a, #c92a2a 12px, #a91d1d 12px, #a91d1d 24px);
    color: #fff;
    padding: 10px 18px;
    font-size: var(--tcg-fs-sm);
    text-align: center;
    border-bottom: 3px solid #7a1414;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tcg-s-2);
    flex-wrap: wrap;
}
.tcg-dev-banner code {
    background: rgba(0,0,0,0.25);
    color: #fff;
    padding: 0 6px;
    border-radius: 3px;
}
.tcg-dev-banner i { font-size: 1.1em; }

.tcg-diag-tile.ok   .tcg-diag-status { background: rgba(47, 158, 68, 0.12); color: var(--tcg-success); }
.tcg-diag-tile.warn .tcg-diag-status { background: rgba(212, 160, 23, 0.15); color: var(--tcg-secondary-dark); }
.tcg-diag-tile.fail .tcg-diag-status { background: rgba(201, 42, 42, 0.10); color: var(--tcg-danger); }

/* -----------------------------------------------------------
   Collection — Phase 3
   ----------------------------------------------------------- */
.tcg-money { font-variant-numeric: tabular-nums; }

.tcg-collection-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tcg-s-3);
    margin: var(--tcg-s-3) 0;
}
.tcg-summary-stats {
    display: flex;
    align-items: baseline;
    gap: var(--tcg-s-5);
}
.tcg-summary-stat {
    display: flex;
    flex-direction: column;
}
.tcg-summary-stat-value {
    font-weight: 700;
    font-size: var(--tcg-fs-xl);
    color: var(--tcg-ink);
    line-height: 1;
}
.tcg-summary-stat-label {
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.tcg-collection-toolbar {
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    padding: var(--tcg-s-3);
    box-shadow: var(--tcg-shadow-1);
    margin-bottom: var(--tcg-s-4);
}
.tcg-toolbar-row {
    display: flex;
    gap: var(--tcg-s-2);
    align-items: stretch;
    flex-wrap: wrap;
}
.tcg-search-wrap {
    position: relative;
    flex: 1 1 280px;
    min-width: 200px;
}
.tcg-search-icon {
    position: absolute;
    left: var(--tcg-s-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tcg-mute);
}
.tcg-search-input {
    padding-left: 2.25rem !important;
    min-height: var(--tcg-tap-min);
}
.tcg-filter-toggle {
    min-height: var(--tcg-tap-min);
    white-space: nowrap;
}
.tcg-sort-select {
    min-height: var(--tcg-tap-min);
    flex: 0 0 auto;
    min-width: 180px;
}

.tcg-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tcg-s-1);
    margin-top: var(--tcg-s-3);
}
.tcg-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tcg-s-2);
    padding: 4px 10px;
    border-radius: var(--tcg-radius-pill);
    background: var(--tcg-primary-soft);
    color: var(--tcg-primary-dark);
    font-size: var(--tcg-fs-xs);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}
.tcg-filter-chip:hover {
    background: var(--tcg-primary);
    color: #fff;
    text-decoration: none;
}
.tcg-filter-chip i { font-size: 0.7em; }
.tcg-filter-clear {
    background: transparent;
    color: var(--tcg-danger);
    border-color: rgba(201, 42, 42, 0.25);
}
.tcg-filter-clear:hover { background: var(--tcg-danger); color: #fff; }

/* Filter drawer */
.tcg-filter-drawer { width: 360px; max-width: 90vw; }
.tcg-filter-group {
    border: none;
    padding: 0;
    margin: 0 0 var(--tcg-s-4);
}
.tcg-filter-group legend {
    font-size: var(--tcg-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tcg-mute);
    font-weight: 700;
    margin-bottom: var(--tcg-s-2);
    padding: 0;
}
.tcg-chip-row { display: flex; flex-wrap: wrap; gap: var(--tcg-s-1); }
.tcg-radio-row { display: flex; flex-wrap: wrap; gap: var(--tcg-s-3); font-size: var(--tcg-fs-sm); }
.tcg-radio-row label { display: inline-flex; align-items: center; gap: 4px; }

.tcg-color-chip,
.tcg-rarity-chip,
.tcg-pill-chip {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius-pill);
    background: var(--tcg-surface);
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
    color: var(--tcg-ink);
    user-select: none;
}
.tcg-color-chip input,
.tcg-rarity-chip input,
.tcg-pill-chip input { display: none; }
.tcg-color-chip span,
.tcg-rarity-chip span,
.tcg-pill-chip span { pointer-events: none; }

.tcg-color-chip.tcg-color-w { background: var(--tcg-mana-w); }
.tcg-color-chip.tcg-color-u { background: var(--tcg-mana-u); }
.tcg-color-chip.tcg-color-b { background: var(--tcg-mana-b); color: #fff; }
.tcg-color-chip.tcg-color-r { background: var(--tcg-mana-r); }
.tcg-color-chip.tcg-color-g { background: var(--tcg-mana-g); }

.tcg-color-chip:has(input:checked),
.tcg-rarity-chip:has(input:checked),
.tcg-pill-chip:has(input:checked) {
    outline: 3px solid var(--tcg-primary);
    outline-offset: -1px;
}

.tcg-rarity-chip.tcg-rarity-common   { color: var(--tcg-rarity-common); }
.tcg-rarity-chip.tcg-rarity-uncommon { color: var(--tcg-rarity-uncommon); }
.tcg-rarity-chip.tcg-rarity-rare     { color: var(--tcg-rarity-rare); }
.tcg-rarity-chip.tcg-rarity-mythic   { color: var(--tcg-rarity-mythic); }
.tcg-rarity-chip.tcg-rarity-special  { color: var(--tcg-rarity-special); }

/* Card grid */
.tcg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--tcg-s-3);
}
.tcg-card-tile {
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--tcg-dur-fast) var(--tcg-ease-out),
                box-shadow var(--tcg-dur-fast) var(--tcg-ease-out);
}
.tcg-card-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--tcg-shadow-2);
}
.tcg-card-tile-img {
    position: relative;
    display: block;
    aspect-ratio: 5 / 7;
    background: var(--tcg-surface-2);
}
.tcg-card-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tcg-card-tile-noimg {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--tcg-mute);
    font-size: var(--tcg-fs-xs);
}
.tcg-card-tile-noimg i { font-size: 1.8rem; }

.tcg-qty-pip,
.tcg-foil-pip {
    position: absolute;
    top: 6px;
    background: rgba(26, 26, 26, 0.85);
    color: #fff;
    border-radius: var(--tcg-radius-pill);
    padding: 2px 8px;
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
}
.tcg-qty-pip  { right: 6px; }
.tcg-foil-pip {
    left: 6px;
    background: var(--tcg-secondary);
    color: var(--tcg-ink);
}

.tcg-card-tile-body {
    padding: var(--tcg-s-2) var(--tcg-s-3) var(--tcg-s-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.tcg-card-tile-name {
    font-weight: 700;
    font-size: var(--tcg-fs-sm);
    color: var(--tcg-ink);
    text-decoration: none;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tcg-card-tile-name:hover { color: var(--tcg-primary); }
.tcg-card-tile-meta {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-2);
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
}
.tcg-card-tile-meta .tcg-set-code { font-weight: 700; color: var(--tcg-primary); }
.tcg-rarity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.tcg-rarity-dot.tcg-rarity-common   { background: var(--tcg-rarity-common); }
.tcg-rarity-dot.tcg-rarity-uncommon { background: var(--tcg-rarity-uncommon); }
.tcg-rarity-dot.tcg-rarity-rare     { background: var(--tcg-rarity-rare); }
.tcg-rarity-dot.tcg-rarity-mythic   { background: var(--tcg-rarity-mythic); }
.tcg-rarity-dot.tcg-rarity-special  { background: var(--tcg-rarity-special); }

.tcg-card-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--tcg-s-1);
    border-top: 1px dashed var(--tcg-line);
}
.tcg-card-tile-value {
    font-weight: 700;
    color: var(--tcg-primary-dark);
    font-variant-numeric: tabular-nums;
    font-size: var(--tcg-fs-sm);
}
.tcg-edit-btn {
    border: none;
    background: transparent;
    color: var(--tcg-mute);
    padding: 6px 8px;
    border-radius: var(--tcg-radius-sm);
    cursor: pointer;
    transition: background var(--tcg-dur-fast), color var(--tcg-dur-fast);
}
.tcg-edit-btn:hover {
    background: var(--tcg-primary-soft);
    color: var(--tcg-primary-dark);
}

/* Pagination */
.tcg-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: var(--tcg-s-5) 0 var(--tcg-s-2);
}
.tcg-page {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius-sm);
    color: var(--tcg-ink);
    text-decoration: none;
    font-size: var(--tcg-fs-sm);
    font-weight: 600;
    background: var(--tcg-surface);
}
.tcg-page:hover { background: var(--tcg-primary-soft); color: var(--tcg-primary-dark); text-decoration: none; }
.tcg-page.active {
    background: var(--tcg-primary);
    color: #fff;
    border-color: var(--tcg-primary);
}
.tcg-page.disabled {
    color: var(--tcg-mute);
    pointer-events: none;
    background: var(--tcg-surface-2);
}
.tcg-page-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--tcg-mute); }
.tcg-pagination-summary {
    text-align: center;
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
}

/* Empty state */
.tcg-empty {
    text-align: center;
    padding: var(--tcg-s-7) var(--tcg-s-4);
    background: var(--tcg-surface);
    border: 1px dashed var(--tcg-line);
    border-radius: var(--tcg-radius);
    margin-top: var(--tcg-s-4);
}
.tcg-empty-icon {
    font-size: 3rem;
    color: var(--tcg-primary-light);
    margin-bottom: var(--tcg-s-3);
}
.tcg-empty h2 { color: var(--tcg-ink); margin-bottom: var(--tcg-s-2); }

/* -----------------------------------------------------------
   Card detail page
   ----------------------------------------------------------- */
.tcg-breadcrumb {
    margin: var(--tcg-s-3) 0;
}
.tcg-detail-grid {
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: var(--tcg-s-5);
    align-items: start;
}
.tcg-detail-image img {
    width: 100%;
    border-radius: var(--tcg-radius-lg);
    box-shadow: var(--tcg-shadow-3);
}
.tcg-detail-noimg {
    aspect-ratio: 5 / 7;
    background: var(--tcg-surface-2);
    border-radius: var(--tcg-radius-lg);
    color: var(--tcg-mute);
}
.tcg-detail-name { margin-bottom: 2px; }
.tcg-detail-sub { color: var(--tcg-mute); margin-bottom: var(--tcg-s-3); }
.tcg-detail-meta p { margin: 4px 0; }
.tcg-oracle-text {
    background: var(--tcg-surface-2);
    border-left: 3px solid var(--tcg-primary);
    padding: var(--tcg-s-3);
    border-radius: var(--tcg-radius-sm);
    font-style: italic;
}
.tcg-rarity-label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--tcg-radius-pill);
    font-size: var(--tcg-fs-xs);
    background: var(--tcg-surface-2);
    color: var(--tcg-ink-soft);
    font-weight: 700;
}
.tcg-rarity-label.tcg-rarity-rare   { background: rgba(201, 162, 39, 0.18); color: #8a6a00; }
.tcg-rarity-label.tcg-rarity-mythic { background: rgba(215, 107, 0, 0.18);  color: #b85a00; }

.tcg-detail-prices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tcg-s-3);
    margin-top: var(--tcg-s-3);
    padding: var(--tcg-s-3);
    background: var(--tcg-primary-soft);
    border-radius: var(--tcg-radius);
}
.tcg-detail-price-label {
    display: block;
    font-size: var(--tcg-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tcg-primary-dark);
    font-weight: 700;
}
.tcg-detail-price-value {
    font-size: var(--tcg-fs-lg);
    font-weight: 700;
    color: var(--tcg-ink);
    font-variant-numeric: tabular-nums;
}

/* Other printings list */
.tcg-printings-list { list-style: none; padding: 0; margin: 0; }
.tcg-printing-row {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    align-items: center;
    gap: var(--tcg-s-3);
    padding: var(--tcg-s-2);
    border-bottom: 1px solid var(--tcg-line);
    text-decoration: none;
    color: var(--tcg-ink);
}
.tcg-printing-row:hover { background: var(--tcg-primary-soft); }
.tcg-printing-row img { width: 44px; border-radius: 3px; }
.tcg-printing-info { display: flex; flex-direction: column; font-size: var(--tcg-fs-sm); }
.tcg-printing-info .text-muted { font-size: var(--tcg-fs-xs); }
.tcg-printing-qty { font-weight: 700; color: var(--tcg-primary-dark); }
.tcg-printing-value { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Legalities */
.tcg-legalities { display: flex; flex-wrap: wrap; gap: var(--tcg-s-1); }
.tcg-legality-badge {
    padding: 4px 10px;
    border-radius: var(--tcg-radius-pill);
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
}
.tcg-legality-badge.tcg-legal-ok   { background: rgba(47, 158, 68, 0.12);  color: var(--tcg-success); }
.tcg-legality-badge.tcg-legal-warn { background: rgba(212, 160, 23, 0.15); color: var(--tcg-secondary-dark); }
.tcg-legality-badge.tcg-legal-fail { background: var(--tcg-surface-2);     color: var(--tcg-mute); }

/* -----------------------------------------------------------
   Stats page
   ----------------------------------------------------------- */
.tcg-stats-title { margin-top: var(--tcg-s-4); }
.tcg-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--tcg-s-3);
    margin: var(--tcg-s-3) 0 var(--tcg-s-4);
}
.tcg-stat-tile {
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    padding: var(--tcg-s-4);
    box-shadow: var(--tcg-shadow-1);
    text-align: center;
}
.tcg-stat-tile-accent {
    background: linear-gradient(135deg, var(--tcg-primary), var(--tcg-primary-dark));
    color: #fff;
    border-color: transparent;
}
.tcg-stat-num {
    font-size: var(--tcg-fs-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tcg-stat-lbl {
    font-size: var(--tcg-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tcg-mute);
    margin-top: 4px;
}
.tcg-stat-tile-accent .tcg-stat-lbl { color: rgba(255,255,255,0.85); }

.tcg-stats-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tcg-s-4);
}

.tcg-chart-wrap { position: relative; height: 240px; }

.tcg-top10 {
    list-style: none;
    counter-reset: tcg-top10;
    padding: 0;
    margin: 0;
}
.tcg-top10 li { counter-increment: tcg-top10; }
.tcg-top10-row {
    display: grid;
    grid-template-columns: 28px 44px 1fr auto;
    align-items: center;
    gap: var(--tcg-s-3);
    padding: var(--tcg-s-2);
    border-bottom: 1px solid var(--tcg-line);
    text-decoration: none;
    color: var(--tcg-ink);
}
.tcg-top10-row::before {
    content: counter(tcg-top10);
    font-weight: 700;
    color: var(--tcg-mute);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tcg-top10-row img { width: 44px; border-radius: 3px; }
.tcg-top10-row:hover { background: var(--tcg-primary-soft); }
.tcg-top10-info strong { display: block; }
.tcg-top10-val { font-weight: 700; font-variant-numeric: tabular-nums; }

.tcg-color-bars { display: flex; flex-direction: column; gap: 6px; }
.tcg-color-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 160px;
    align-items: center;
    gap: var(--tcg-s-3);
    font-size: var(--tcg-fs-sm);
}
.tcg-color-bar-label { font-weight: 600; }
.tcg-color-bar-track {
    height: 14px;
    background: var(--tcg-surface-2);
    border-radius: var(--tcg-radius-pill);
    overflow: hidden;
}
.tcg-color-bar-fill { height: 100%; border-radius: var(--tcg-radius-pill); }
.tcg-color-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--tcg-mute); }

.tcg-set-completion-table th, .tcg-set-completion-table td { vertical-align: middle; }
.tcg-set-completion-table tbody tr {
    cursor: pointer;
    transition: background var(--tcg-dur-fast) var(--tcg-ease-out);
}
.tcg-set-completion-table tbody tr:hover {
    background: var(--tcg-primary-soft);
}
.tcg-set-completion-table tbody tr.tcg-set-row-empty td {
    color: var(--tcg-mute);
}
.tcg-set-completion-table tbody tr a.tcg-set-cell-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.tcg-progress {
    background: var(--tcg-surface-2);
    border-radius: var(--tcg-radius-pill);
    height: 8px;
    overflow: hidden;
    width: 100%;
}
.tcg-progress-bar {
    height: 100%;
    background: var(--tcg-primary);
    transition: width var(--tcg-dur) var(--tcg-ease-out);
}

/* -----------------------------------------------------------
   Set detail view (pages/set_view.php) — Phase 3.5 update
   Shows every printing in a set; owned at 100% opacity, unowned at 65%.
   ----------------------------------------------------------- */
.tcg-set-view-head {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-3);
    flex-wrap: wrap;
    margin: var(--tcg-s-3) 0;
}
.tcg-set-view-head h1 { margin: 0; }
.tcg-set-view-stats {
    display: flex;
    align-items: baseline;
    gap: var(--tcg-s-4);
    margin-left: auto;
}
.tcg-set-view-stat-value { font-size: var(--tcg-fs-lg); font-weight: 700; color: var(--tcg-primary-dark); }
.tcg-set-view-stat-label { font-size: var(--tcg-fs-xs); color: var(--tcg-mute); text-transform: uppercase; letter-spacing: 0.06em; }

.tcg-set-view-toolbar {
    display: flex;
    gap: var(--tcg-s-2);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--tcg-s-3);
}
.tcg-set-view-toolbar .form-select { max-width: 200px; }

.tcg-card-tile.tcg-not-owned { opacity: 0.65; }
.tcg-card-tile.tcg-not-owned:hover { opacity: 1; }
.tcg-card-tile.tcg-not-owned .tcg-card-tile-foot { border-top-style: dotted; }
.tcg-not-owned-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(26, 26, 26, 0.75);
    color: #fff;
    font-size: var(--tcg-fs-xs);
    padding: 2px 8px;
    border-radius: var(--tcg-radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* -----------------------------------------------------------
   Quick Add (pages/quick_add.php) — Phase 4
   ----------------------------------------------------------- */
.qa-wrap { max-width: 720px; margin: 0 auto; }

.qa-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tcg-s-3);
    margin: var(--tcg-s-3) 0;
}
.qa-title h1 { margin: 0; display: inline-flex; align-items: center; gap: var(--tcg-s-2); }
.qa-sub { color: var(--tcg-mute); margin: 4px 0 0; font-size: var(--tcg-fs-sm); }

.qa-tabs { margin-bottom: var(--tcg-s-3); }
.qa-tabs .nav-link {
    min-height: var(--tcg-tap-min);
    font-weight: 600;
    font-size: var(--tcg-fs-sm);
}

.qa-session-bar {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-4);
    background: var(--tcg-surface-2);
    border-radius: var(--tcg-radius);
    padding: var(--tcg-s-2) var(--tcg-s-3);
    margin-bottom: var(--tcg-s-3);
    flex-wrap: wrap;
}
.qa-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tcg-fs-sm);
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: var(--tcg-ink-soft);
}
.qa-toggle input { accent-color: var(--tcg-secondary); transform: scale(1.15); }
.qa-toggle i { color: var(--tcg-secondary-dark); }
.qa-cond {
    display: inline-flex;
    align-items: center;
    gap: var(--tcg-s-2);
    margin-left: auto;
}
.qa-cond label { font-size: var(--tcg-fs-sm); color: var(--tcg-ink-soft); font-weight: 600; margin: 0; }

.qa-search {
    position: sticky;
    top: 64px;
    z-index: 20;
    background: var(--tcg-paper);
    padding: var(--tcg-s-2) 0;
    display: flex;
    align-items: center;
    gap: var(--tcg-s-2);
}
.qa-search > i {
    position: absolute;
    left: var(--tcg-s-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tcg-mute);
    pointer-events: none;
}
.qa-search .form-control { padding-left: 2.25rem !important; }
.qa-search-hint {
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    margin-bottom: var(--tcg-s-2);
}
.qa-clear {
    position: absolute;
    right: var(--tcg-s-1);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tcg-mute);
    background: transparent;
    border: none;
    padding: 4px 8px;
}

.qa-results {
    display: flex;
    flex-direction: column;
    gap: var(--tcg-s-2);
}
.qa-result {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--tcg-s-3);
    align-items: center;
    padding: var(--tcg-s-2);
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    cursor: pointer;
    transition: background var(--tcg-dur-fast), border-color var(--tcg-dur-fast);
}
.qa-result:hover { background: var(--tcg-primary-soft); border-color: var(--tcg-primary); }
.qa-result-thumb img { width: 64px; height: auto; border-radius: 4px; display: block; }
.qa-result-thumb { width: 64px; }
.qa-result-info { min-width: 0; }
.qa-result-name { font-weight: 700; font-size: var(--tcg-fs-md); line-height: 1.2; }
.qa-result-meta {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-2);
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    margin-top: 4px;
    flex-wrap: wrap;
}
.qa-result-type {
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qa-result-owned {
    color: var(--tcg-success);
    font-weight: 700;
    margin-left: 6px;
    font-size: var(--tcg-fs-xs);
}
.qa-set-pill {
    background: var(--tcg-primary-soft);
    color: var(--tcg-primary-dark);
    padding: 1px 6px;
    border-radius: var(--tcg-radius-pill);
    font-weight: 700;
    font-size: var(--tcg-fs-xs);
}
.qa-num { color: var(--tcg-mute); font-family: var(--tcg-font-mono); }
.qa-price { color: var(--tcg-ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.qa-rarity { font-weight: 700; text-transform: capitalize; font-size: var(--tcg-fs-xs); }
.qa-rarity-common   { color: var(--tcg-rarity-common); }
.qa-rarity-uncommon { color: var(--tcg-rarity-uncommon); }
.qa-rarity-rare     { color: var(--tcg-rarity-rare); }
.qa-rarity-mythic   { color: var(--tcg-rarity-mythic); }
.qa-rarity-special  { color: var(--tcg-rarity-special); }

.qa-result-add, .qa-preview-add {
    min-width: 56px;
    min-height: 56px;
}
.qa-result-add.is-busy, .qa-preview-add.is-busy { opacity: 0.6; }

.qa-error {
    padding: var(--tcg-s-3);
    background: rgba(201, 42, 42, 0.08);
    border: 1px solid rgba(201, 42, 42, 0.25);
    color: var(--tcg-danger);
    border-radius: var(--tcg-radius-sm);
    font-size: var(--tcg-fs-sm);
}

/* Set + number flow */
.qa-setnum-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--tcg-s-2);
    align-items: end;
    margin-top: var(--tcg-s-3);
}
.qa-setnum-set { position: relative; }
.qa-setnum label {
    font-size: var(--tcg-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tcg-mute);
    font-weight: 700;
    margin-bottom: 2px;
}
.qa-setnum-hint {
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    margin-top: var(--tcg-s-2);
}
.qa-set-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius-sm);
    box-shadow: var(--tcg-shadow-2);
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
}
.qa-set-suggest {
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: var(--tcg-s-2);
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid var(--tcg-line);
    font-size: var(--tcg-fs-sm);
}
.qa-set-suggest:hover { background: var(--tcg-primary-soft); }
.qa-set-suggest .qa-set-name { font-weight: 600; color: var(--tcg-ink); }
.qa-set-suggest .qa-set-date { color: var(--tcg-mute); font-size: var(--tcg-fs-xs); }
.qa-setnum-preview { margin-top: var(--tcg-s-3); }
.qa-preview {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--tcg-s-3);
    align-items: center;
    padding: var(--tcg-s-2);
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-primary);
    border-radius: var(--tcg-radius);
}
.qa-preview-thumb img { width: 64px; border-radius: 4px; display: block; }
.qa-preview-name { font-weight: 700; font-size: var(--tcg-fs-md); }
.qa-preview-meta {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-2);
    margin-top: 4px;
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    flex-wrap: wrap;
}

/* Recently added */
.qa-recent { margin-top: var(--tcg-s-5); }
.qa-recent-header {
    display: flex;
    align-items: baseline;
    gap: var(--tcg-s-2);
    margin-bottom: var(--tcg-s-2);
}
.qa-recent-header h2 { margin: 0; font-size: var(--tcg-fs-lg); }
.qa-recent-count {
    background: var(--tcg-primary-soft);
    color: var(--tcg-primary-dark);
    border-radius: var(--tcg-radius-pill);
    padding: 0 8px;
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
}
.qa-empty {
    text-align: center;
    padding: var(--tcg-s-5);
    color: var(--tcg-mute);
    background: var(--tcg-surface-2);
    border-radius: var(--tcg-radius);
}
.qa-recent-list { list-style: none; padding: 0; margin: 0; }
.qa-recent-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: var(--tcg-s-2);
    padding: var(--tcg-s-2);
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    margin-bottom: var(--tcg-s-2);
    transition: background var(--tcg-dur-fast) var(--tcg-ease-out);
}
.qa-recent-row.qa-flash { background: var(--tcg-primary-soft); }
.qa-recent-thumb { width: 48px; flex-shrink: 0; }
.qa-recent-thumb img { width: 100%; border-radius: 3px; display: block; }
.qa-recent-thumb-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 64px;
    background: var(--tcg-surface-2);
    color: var(--tcg-mute);
    border-radius: 3px;
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
    text-align: center;
}
.qa-recent-info { min-width: 0; }
.qa-recent-name { font-weight: 700; font-size: var(--tcg-fs-sm); line-height: 1.2; }
.qa-recent-meta {
    display: flex;
    gap: var(--tcg-s-2);
    align-items: center;
    margin-top: 4px;
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    flex-wrap: wrap;
}
.qa-recent-value { font-weight: 700; color: var(--tcg-primary-dark); font-variant-numeric: tabular-nums; }
.qa-recent-qty {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.qa-qty-pip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--tcg-primary-soft);
    color: var(--tcg-primary-dark);
    font-weight: 700;
    font-size: var(--tcg-fs-xs);
    padding: 1px 6px;
    border-radius: var(--tcg-radius-pill);
}
.qa-qty-pip-foil {
    background: var(--tcg-secondary);
    color: var(--tcg-ink);
}
.qa-qty-pip-foil i { color: var(--tcg-secondary-dark); }
.qa-recent-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.qa-recent-actions .btn { min-width: 36px; min-height: 36px; padding: 4px 8px; }

/* Toast */
.qa-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--tcg-ink);
    color: #fff;
    padding: var(--tcg-s-2) var(--tcg-s-4);
    border-radius: var(--tcg-radius-pill);
    box-shadow: var(--tcg-shadow-3);
    font-size: var(--tcg-fs-sm);
    opacity: 0;
    transition: opacity var(--tcg-dur) var(--tcg-ease-out),
                transform var(--tcg-dur) var(--tcg-ease-out);
    z-index: 200;
    pointer-events: auto;
}
.qa-toast.qa-toast-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.qa-toast-body { display: flex; align-items: center; gap: var(--tcg-s-3); }
.qa-toast-undo {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 2px 12px;
    border-radius: var(--tcg-radius-pill);
    font-weight: 700;
    cursor: pointer;
    font-size: var(--tcg-fs-xs);
}
.qa-toast-undo:hover { background: rgba(255,255,255,0.15); }

/* -----------------------------------------------------------
   Scan page (pages/scan.php) — Phase 5
   ----------------------------------------------------------- */
.scan-wrap { max-width: 720px; margin: 0 auto; }

.scan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tcg-s-3);
    margin: var(--tcg-s-3) 0;
}

.scan-warn {
    display: flex;
    align-items: flex-start;
    gap: var(--tcg-s-3);
    background: rgba(212, 160, 23, 0.10);
    border-left: 4px solid var(--tcg-secondary);
    color: var(--tcg-ink);
    padding: var(--tcg-s-3);
    border-radius: var(--tcg-radius);
    margin-bottom: var(--tcg-s-3);
    font-size: var(--tcg-fs-sm);
}
.scan-warn i { font-size: 1.2em; color: var(--tcg-secondary-dark); margin-top: 2px; }

.scan-capture-area {
    text-align: center;
    margin: var(--tcg-s-4) 0;
}
.scan-capture-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tcg-s-2);
    width: 100%;
    max-width: 320px;
    aspect-ratio: 5 / 7;
    padding: var(--tcg-s-4);
    background: linear-gradient(135deg, var(--tcg-primary), var(--tcg-primary-dark));
    color: #fff;
    border-radius: var(--tcg-radius-lg);
    cursor: pointer;
    font-weight: 700;
    box-shadow: var(--tcg-shadow-2);
    transition: transform var(--tcg-dur-fast) var(--tcg-ease-out);
    text-align: center;
}
.scan-capture-btn:hover { transform: scale(1.02); }
.scan-capture-btn span { font-size: var(--tcg-fs-lg); }
.scan-capture-btn small { font-size: var(--tcg-fs-xs); opacity: 0.85; }

.scan-guide {
    position: relative;
    max-width: 320px;
    margin: var(--tcg-s-4) auto;
}
.scan-guide img { width: 100%; border-radius: var(--tcg-radius); box-shadow: var(--tcg-shadow-2); display: block; }
.scan-guide-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.scan-guide-frame {
    width: 86%;
    aspect-ratio: 5 / 7;
    border: 3px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    box-shadow: 0 0 0 99999px rgba(0,0,0,0.15);
}

.scan-progress { text-align: center; padding: var(--tcg-s-4); }
.scan-progress p { margin-top: var(--tcg-s-2); color: var(--tcg-mute); }

.scan-session-bar {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-3);
    background: var(--tcg-surface-2);
    border-radius: var(--tcg-radius);
    padding: var(--tcg-s-2) var(--tcg-s-3);
    margin-bottom: var(--tcg-s-3);
}

.scan-results { margin-top: var(--tcg-s-4); }
.scan-results h2 { font-size: var(--tcg-fs-lg); }
.scan-ocr {
    background: var(--tcg-surface-2);
    border-radius: var(--tcg-radius-sm);
    padding: var(--tcg-s-2) var(--tcg-s-3);
    margin-bottom: var(--tcg-s-3);
    font-size: var(--tcg-fs-sm);
}
.scan-ocr-label {
    font-size: var(--tcg-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tcg-mute);
    font-weight: 700;
    margin-right: 6px;
}

.scan-cand {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--tcg-s-3);
    align-items: center;
    padding: var(--tcg-s-2);
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    cursor: pointer;
    margin-bottom: var(--tcg-s-2);
}
.scan-cand:hover { background: var(--tcg-primary-soft); border-color: var(--tcg-primary); }
.scan-cand-thumb img { width: 72px; border-radius: 4px; display: block; }
.scan-cand-name { font-weight: 700; font-size: var(--tcg-fs-md); }
.scan-cand-meta {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-2);
    margin-top: 4px;
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    flex-wrap: wrap;
}
.scan-conf {
    padding: 1px 8px;
    border-radius: var(--tcg-radius-pill);
    font-weight: 700;
}
.scan-conf-high { background: rgba(47, 158, 68, 0.12); color: var(--tcg-success); }
.scan-conf-good { background: rgba(212, 160, 23, 0.18); color: var(--tcg-secondary-dark); }
.scan-conf-maybe { background: rgba(201, 42, 42, 0.10); color: var(--tcg-danger); }
.scan-conf-low { background: var(--tcg-surface-2); color: var(--tcg-mute); }
.scan-strategy {
    font-family: var(--tcg-font-mono);
    background: var(--tcg-surface-2);
    color: var(--tcg-mute);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7em;
}

.scan-fallback {
    margin-top: var(--tcg-s-3);
    display: flex;
    gap: var(--tcg-s-2);
    align-items: center;
    flex-wrap: wrap;
}

.scan-warnings ul {
    margin: var(--tcg-s-2) 0 0;
    padding-left: 1.2em;
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-secondary-dark);
}

.scan-success {
    background: rgba(47, 158, 68, 0.10);
    border-left: 4px solid var(--tcg-success);
    color: var(--tcg-ink);
    padding: var(--tcg-s-3);
    border-radius: var(--tcg-radius);
    margin-bottom: var(--tcg-s-3);
    display: flex;
    align-items: center;
    gap: var(--tcg-s-3);
}
.scan-success i { color: var(--tcg-success); font-size: 1.6em; }

.scan-empty {
    text-align: center;
    padding: var(--tcg-s-4);
    color: var(--tcg-mute);
}
.scan-empty i { font-size: 2em; }

/* Admin scan-log table */
.scan-log-table .scan-log-thumb { width: 60px; border-radius: 4px; display: block; }
.scan-log-imgs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.scan-log-strip-wrap {
    border: 1px dashed var(--tcg-line);
    border-radius: 4px;
    padding: 2px 4px 4px;
    background: var(--tcg-surface-2);
    max-width: 220px;
}
.scan-log-strip-label {
    font-size: var(--tcg-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tcg-mute);
    font-weight: 700;
    margin-bottom: 2px;
}
.scan-log-strip {
    display: block;
    max-width: 100%;
    max-height: 60px;
    border-radius: 3px;
    image-rendering: pixelated;     /* preserve original pixels, no blurry smoothing */
}

/* -----------------------------------------------------------
   Decks list (pages/decks.php) — Phase 7
   ----------------------------------------------------------- */
.decks-wrap { max-width: 960px; margin: 0 auto; }
.decks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--tcg-s-3) 0;
}
.decks-list { list-style: none; padding: 0; margin: 0; }
.deck-card {
    display: flex;
    align-items: stretch;
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    margin-bottom: var(--tcg-s-3);
    box-shadow: var(--tcg-shadow-1);
    overflow: hidden;
}
.deck-card-main {
    flex: 1;
    padding: var(--tcg-s-3);
    color: var(--tcg-ink);
    text-decoration: none;
    transition: background var(--tcg-dur-fast);
}
.deck-card-main:hover {
    background: var(--tcg-primary-soft);
    text-decoration: none;
    color: var(--tcg-ink);
}
.deck-card h3 { margin: 0 0 var(--tcg-s-2); font-size: var(--tcg-fs-lg); }
.deck-card-meta {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-3);
    flex-wrap: wrap;
}
.deck-card-desc {
    margin: var(--tcg-s-2) 0 0;
    color: var(--tcg-mute);
    font-size: var(--tcg-fs-sm);
}
.deck-card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--tcg-s-2);
    border-left: 1px solid var(--tcg-line);
    background: var(--tcg-surface-2);
}

.deck-format-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--tcg-radius-pill);
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--tcg-primary-soft);
    color: var(--tcg-primary-dark);
}
.deck-format-pill.deck-format-standard  { background: rgba(0, 120, 200, 0.12); color: #0066b3; }
.deck-format-pill.deck-format-pioneer   { background: rgba(23, 162, 184, 0.15); color: #117a8b; }
.deck-format-pill.deck-format-modern    { background: rgba(111, 66, 193, 0.15); color: #5a32a3; }
.deck-format-pill.deck-format-legacy    { background: rgba(220, 53, 69, 0.12);  color: #b02a37; }
.deck-format-pill.deck-format-vintage   { background: rgba(40, 40, 40, 0.12);   color: #1a1a1a; }
.deck-format-pill.deck-format-commander { background: rgba(212, 160, 23, 0.20); color: #7a5c00; }
.deck-format-pill.deck-format-pauper    { background: rgba(108, 117, 125, 0.15); color: #495057; }
.deck-format-pill.deck-format-casual    { background: var(--tcg-surface-2);     color: var(--tcg-mute); }

/* -----------------------------------------------------------
   Deck builder (pages/deck_edit.php) — Phase 7
   ----------------------------------------------------------- */
.deck-edit-wrap { max-width: 1280px; margin: 0 auto; }
.deck-edit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tcg-s-3);
    margin: var(--tcg-s-3) 0;
    flex-wrap: wrap;
}
.deck-edit-title h1 { margin: 0; font-size: var(--tcg-fs-xl); }
.deck-edit-controls {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-2);
    flex-wrap: wrap;
}
.deck-edit-controls .form-select { min-width: 140px; }

.deck-edit-cols {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--tcg-s-4);
    align-items: start;
}
@media (max-width: 900px) {
    .deck-edit-cols { grid-template-columns: 1fr; }
}

.deck-section { margin-bottom: var(--tcg-s-4); }
.deck-section-head {
    display: flex;
    align-items: baseline;
    gap: var(--tcg-s-2);
    margin-bottom: var(--tcg-s-2);
    font-size: var(--tcg-fs-lg);
}
.deck-section-count {
    background: var(--tcg-primary-soft);
    color: var(--tcg-primary-dark);
    border-radius: var(--tcg-radius-pill);
    padding: 0 8px;
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
}
.deck-section-target { margin-left: auto; }
.deck-section-empty {
    padding: var(--tcg-s-3);
    color: var(--tcg-mute);
    background: var(--tcg-surface-2);
    border-radius: var(--tcg-radius-sm);
    font-size: var(--tcg-fs-sm);
}
.deck-type-group { margin-bottom: var(--tcg-s-3); }
.deck-type-head {
    font-size: var(--tcg-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tcg-mute);
    border-bottom: 1px solid var(--tcg-line);
    padding-bottom: 2px;
    margin-bottom: var(--tcg-s-1);
}

.deck-row {
    display: grid;
    grid-template-columns: 88px 44px 1fr auto;
    gap: var(--tcg-s-2);
    align-items: center;
    padding: var(--tcg-s-1) var(--tcg-s-2);
    border-bottom: 1px solid var(--tcg-line);
}
.deck-row:hover { background: var(--tcg-primary-soft); }
.deck-row-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.deck-row-qty button {
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.deck-row-qty button:hover { background: var(--tcg-primary); color: #fff; border-color: var(--tcg-primary); }
.deck-row-q {
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.deck-row-thumb img { width: 44px; border-radius: 3px; display: block; }
.deck-row-name { font-weight: 600; font-size: var(--tcg-fs-sm); }
.deck-row-meta {
    display: flex;
    align-items: center;
    gap: var(--tcg-s-2);
    margin-top: 2px;
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
    flex-wrap: wrap;
}
.deck-row-owned.owned-ok    { color: var(--tcg-success); }
.deck-row-owned.owned-short { color: var(--tcg-danger);  }
.deck-row-illegal { border-left: 3px solid var(--tcg-danger); background: rgba(201, 42, 42, 0.04); }
.deck-row-overcap { border-left: 3px solid var(--tcg-secondary); }

.deck-respect-on .deck-row { transition: opacity 0.15s; }
.deck-respect-on .deck-row[data-owned] { /* tcgRespectCollection toggled */ }
.deck-respect-on .deck-row .deck-row-owned.owned-short { opacity: 1; }

.btn-xs { padding: 2px 8px; font-size: var(--tcg-fs-xs); min-height: 28px; line-height: 1; }

/* Side panel */
.deck-search {
    position: relative;
    margin-bottom: var(--tcg-s-2);
}
.deck-search > i {
    position: absolute;
    left: var(--tcg-s-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tcg-mute);
}
.deck-search .form-control { padding-left: 2.25rem; }
.deck-search-results { margin-bottom: var(--tcg-s-3); }
.deck-search-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: var(--tcg-s-2);
    align-items: center;
    padding: var(--tcg-s-1) var(--tcg-s-2);
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius-sm);
    margin-bottom: 4px;
}
.deck-search-thumb img { width: 44px; border-radius: 3px; display: block; }
.deck-search-name { font-weight: 600; font-size: var(--tcg-fs-sm); }
.deck-search-meta {
    display: flex;
    gap: var(--tcg-s-2);
    align-items: center;
    margin-top: 2px;
    font-size: var(--tcg-fs-xs);
    color: var(--tcg-mute);
}
.deck-search-actions { display: flex; gap: 2px; flex-direction: column; }
.deck-search-actions .btn { padding: 2px 8px; font-size: var(--tcg-fs-xs); }

.deck-stats-panel {
    position: sticky;
    top: 80px;
}
.deck-stat-block {
    background: var(--tcg-surface);
    border: 1px solid var(--tcg-line);
    border-radius: var(--tcg-radius);
    padding: var(--tcg-s-3);
    margin-bottom: var(--tcg-s-3);
}
.deck-stat-block h3 {
    font-size: var(--tcg-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tcg-mute);
    margin: 0 0 var(--tcg-s-2);
}
.deck-stat-row {
    display: flex;
    align-items: baseline;
    gap: var(--tcg-s-2);
    margin-bottom: 4px;
}
.deck-stat-num {
    font-size: var(--tcg-fs-2xl);
    font-weight: 700;
    color: var(--tcg-primary-dark);
    font-variant-numeric: tabular-nums;
}
.deck-stat-num.deck-stat-over  { color: var(--tcg-danger); }
.deck-stat-num.deck-stat-under { color: var(--tcg-secondary-dark); }
.deck-stat-lbl { color: var(--tcg-mute); font-size: var(--tcg-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.deck-stat-note { font-size: var(--tcg-fs-xs); margin-top: 4px; }
.deck-stat-note-under { color: var(--tcg-secondary-dark); }
.deck-stat-note-over  { color: var(--tcg-danger); }
.deck-stat-warn { background: rgba(212, 160, 23, 0.06); border-color: var(--tcg-secondary); }
.deck-stat-warn h3 { color: var(--tcg-secondary-dark); }
.deck-issue-list { font-size: var(--tcg-fs-sm); padding-left: 1.2em; margin: 0; }

.deck-curve {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100px;
}
.deck-curve-col {
    flex: 1;
    text-align: center;
}
.deck-curve-bar {
    background: var(--tcg-primary);
    color: #fff;
    font-size: var(--tcg-fs-xs);
    font-weight: 700;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
}
.deck-curve-lbl { font-size: var(--tcg-fs-xs); color: var(--tcg-mute); margin-top: 2px; }

.deck-type-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--tcg-fs-sm);
}
.deck-type-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted var(--tcg-line);
    padding: 2px 0;
}

/* -----------------------------------------------------------
   Phase 8 — game switcher (nav) + multi-TCG bits
   ----------------------------------------------------------- */
.tcg-game-switcher { margin-right: 12px; }
.tcg-game-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border: 2px solid var(--gs-accent, #6f42c1);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}
.tcg-game-switcher-btn:hover { background: rgba(255, 255, 255, 0.18); }
.tcg-game-switcher-btn i { color: var(--gs-accent, #6f42c1); }
.tcg-game-switcher-name { white-space: nowrap; }
@media (max-width: 600px) { .tcg-game-switcher-name { display: none; } }

.tcg-game-switcher-menu { min-width: 240px; }
.tcg-game-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.tcg-game-opt.active { background: rgba(111, 66, 193, 0.10); }
.tcg-game-opt-disabled { opacity: 0.55; }
.tcg-game-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.tcg-game-opt-name { flex: 1; }
.tcg-game-soon {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--tcg-mute, #888);
    border: 1px solid var(--tcg-line, #ddd);
    border-radius: 999px;
    padding: 1px 8px;
}

/* Stats page — current-game pill + cross-game tile accent */
.tcg-stats-game-pill {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.6em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    margin-left: 10px;
}
.tcg-stat-tile-allgames {
    border: 2px solid var(--tcg-game-accent, #6f42c1);
}
.tcg-coming-soon .btn-primary {
    background: var(--cs-accent, #6f42c1);
    border-color: var(--cs-accent, #6f42c1);
}

/* "+ Add TCG Game" switcher item + the add-game catalogue page */
.tcg-game-add {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--tcg-primary, #6f42c1);
}
.add-game-list { list-style: none; margin: 18px 0 0; padding: 0; }
.add-game-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--tcg-line, #e5e5e5);
}
.add-game-row:last-child { border-bottom: none; }
.add-game-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.add-game-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.add-game-action { flex-shrink: 0; }

/* ============================================================
   Phase 9 — Pokémon TCG (card detail adapter + filters/stats)
   ============================================================ */
.tcg-detail-pkm { display: flex; flex-direction: column; gap: 12px; }
.tcg-pkm-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tcg-pkm-badge {
    display: inline-block; padding: 3px 9px; border-radius: 12px;
    font-size: .8rem; font-weight: 700; background: #eee; color: #1a1a1a;
}
.tcg-pkm-cat   { background: #e8f0fe; color: #1c4587; }
.tcg-pkm-stage { background: #fff3e0; color: #b35900; }
.tcg-pkm-hp    { background: #fde2e2; color: #b3261e; }
.tcg-pkm-reg-ok  { background: #def7df; color: #1e7d2f; }
.tcg-pkm-reg-old { background: #ececec; color: #777; }
.tcg-pkm-type-chip {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: .75rem; font-weight: 700; color: #1a1a1a;
}
.tcg-pkm-evolve { margin: 0; font-size: .92rem; }
.tcg-pkm-attacks h3 { font-size: 1rem; margin: 6px 0; }
.tcg-pkm-attack { border-left: 3px solid var(--tcg-primary, #6f42c1); padding: 4px 10px; margin-bottom: 8px; }
.tcg-pkm-attack-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tcg-pkm-attack-name { font-weight: 700; }
.tcg-pkm-attack-dmg  { margin-left: auto; font-weight: 700; }
.tcg-pkm-attack-eff  { margin: 4px 0 0; font-size: .9rem; color: #444; }
.tcg-pkm-wr { width: 100%; border-collapse: collapse; }
.tcg-pkm-wr th { text-align: left; width: 110px; padding: 4px 8px; color: #555; font-size: .85rem; }
.tcg-pkm-wr td { padding: 4px 8px; }
.tcg-pkm-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .82rem; color: #555; }
.tcg-pkm-pricenote { margin: 4px 0 0; }