/* ── Bracket Tool Styles ── */
/* Foundation (fonts, vars, nav, footer) provided by /css/base.css */

/* ── Breadcrumb ── */
.breadcrumb { padding: 1.25rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: #a78bfa; }
.breadcrumb span { margin: 0 0.4rem; }

/* ── Hero ── */
.hero-section { padding: 2rem 0 2.5rem; text-align: center; }
.hero-section h1 { font-size: 2.5rem; margin-bottom: 0.5rem; background: var(--gradient-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-section .subtitle { color: var(--text-secondary); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }

/* ── Calculator Layout ── */
.calc-layout { display: grid; grid-template-columns: 380px 1fr; gap: 1.5rem; }
@media (max-width: 960px) {
    .calc-layout { grid-template-columns: 1fr; }
    .hero-section h1 { font-size: 1.8rem; }
}
@media (max-width: 640px) {
    .hero-section { padding: 1rem 0 1rem; }
    .hero-section h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
    .hero-section .subtitle { font-size: 0.9rem; }
    .breadcrumb { padding-top: 0.5rem; }
    .panel h2 { font-size: 1rem; margin-bottom: 0.75rem; }
}

/* ── Panels ── */
.panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 1.5rem; }
.panel h2 { font-size: 1.15rem; margin-bottom: 1rem; color: var(--text-primary); }
.results-edit-note {
    display: none; font-size: 0.78rem; color: rgba(196,181,253,0.85);
    margin: -0.5rem 0 1rem; line-height: 1.4;
    padding: 0.5rem 0.75rem; border-radius: 6px;
    background: rgba(168,85,247,0.1); border-left: 2px solid rgba(168,85,247,0.4);
}

/* ── Form Controls ── */
label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
input[type="text"], textarea {
    width: 100%; background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 8px;
    color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 0.9rem; padding: 0.65rem 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none;
}
input[type="text"]:focus, textarea:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,0.15); }
textarea { resize: vertical; min-height: 260px; font-family: 'Courier New', monospace; font-size: 0.82rem; line-height: 1.5; }
.field-group { margin-bottom: 1rem; }
.field-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.label-hint { font-weight: 400; color: var(--text-muted); font-size: 0.85em; }
.deck-error { font-size: 0.8rem; color: #f87171; margin-top: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: rgba(248,113,113,0.08); border-left: 3px solid #f87171; }
.deck-error.info { color: #4ade80; background: rgba(74,222,128,0.08); border-left-color: #4ade80; }
.deck-error.warn { color: #eab308; background: rgba(234,179,8,0.08); border-left-color: #eab308; }
.manual-divider {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 0.5rem 0;
}
.manual-divider::before, .manual-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.manual-divider span {
    font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Buttons ── */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--gradient-purple); color: #fff; font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem; font-weight: 600; border: none; border-radius: 10px; padding: 0.75rem 2rem;
    cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; width: 100%; margin-top: 0.5rem;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(168,85,247,0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: transparent; color: var(--text-secondary); font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem; font-weight: 500; border: 1px solid var(--card-border); border-radius: 8px;
    padding: 0.5rem 1.25rem; cursor: pointer; transition: all 0.2s ease; margin-top: 0.5rem;
}
.btn-secondary:hover { border-color: #a855f7; color: var(--text-primary); }

/* ── Results Section ── */
#results { display: none; margin-top: 1.5rem; }
#results.visible { display: block; }

/* ── Power Gauge ── */
.gauge-container { display: flex; flex-direction: column; align-items: center; padding: 2rem 0 1.5rem; }
.gauge-wrap { position: relative; width: 220px; height: 220px; }
.gauge-svg { width: 220px; height: 220px; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: #2a2a2a; stroke-width: 14; }
.gauge-fill { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.6s ease; }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-number { font-family: 'Space Grotesk', sans-serif; font-size: 3.5rem; font-weight: 700; line-height: 1; }
.gauge-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

/* ── Bracket Badge ── */
.bracket-badge {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem;
    border-radius: 50px; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600;
    margin-top: 1rem; letter-spacing: 0.02em;
}
.bracket-1 { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.bracket-2 { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.bracket-3 { background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.3); }
.bracket-4 { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.bracket-5 { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }

/* ── Stats Row ── */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 700px) { .stats-row { grid-template-columns: repeat(8, 1fr); } }
.stat-card { background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 10px; padding: 1rem; text-align: center; }
.stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; }
.stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
@media (max-width: 500px) { .stats-row { grid-template-columns: 1fr 1fr; } }

/* ── Category Bars ── */
.category-breakdown { margin-top: 1.5rem; }
.category-breakdown h3 { font-size: 1rem; margin-bottom: 1rem; }
.cat-row { margin-bottom: 1rem; }
.cat-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; }
.cat-name { font-size: 0.85rem; font-weight: 500; }
.cat-score { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.cat-bar-bg { height: 10px; background: #2a2a2a; border-radius: 5px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 5px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); min-width: 0; }
.cat-count { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; }

/* ── Detected Cards ── */
.detected-section { margin-top: 1.5rem; }
.detected-section h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.detected-group { border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; margin-bottom: 0.5rem; }
.detected-toggle {
    width: 100%; background: var(--bg-dark); border: none; color: var(--text-primary); padding: 0.65rem 1rem;
    font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; transition: background 0.2s ease;
}
.detected-toggle:hover { background: #222; }
.detected-toggle .arrow { transition: transform 0.2s ease; font-size: 0.75rem; color: var(--text-muted); }
.detected-toggle.open .arrow { transform: rotate(180deg); }
.detected-list { display: none; padding: 0.5rem 1rem 0.75rem; }
.detected-list.open { display: block; }
.detected-list ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.detected-list li {
    background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); border-radius: 6px;
    padding: 0.25rem 0.65rem; font-size: 0.78rem; color: #c4b5fd;
}

/* ── Commander Preview ── */
.commander-preview { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; padding: 1rem; background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 10px; }
.commander-img { width: 120px; border-radius: 8px; box-shadow: var(--shadow-md); flex-shrink: 0; }
.commander-info h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.commander-info p { font-size: 0.82rem; color: var(--text-muted); }

/* ── Loading Spinner ── */
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Sample Decklist Button ── */
.sample-row { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; gap: 0.5rem; align-items: center; }
.sample-select { background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 8px; color: var(--text-secondary); font-family: 'Inter', sans-serif; font-size: 0.82rem; padding: 0.4rem 0.6rem; cursor: pointer; }
.sample-select:focus { border-color: #a855f7; outline: none; }

/* ── URL Import ── */
.url-input-group { display: flex; gap: 0.5rem; align-items: stretch; }
.url-input-group input { flex: 1; }
.btn-import {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    background: transparent; color: var(--text-secondary); font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem; font-weight: 500; border: 1px solid var(--card-border); border-radius: 8px;
    padding: 0.5rem 1rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; white-space: nowrap;
}
.btn-import:hover { border-color: #a855f7; color: var(--text-primary); }
.btn-import:disabled { opacity: 0.5; cursor: not-allowed; }
.import-status { font-size: 0.75rem; margin-top: 0.25rem; min-height: 1.1em; }
.import-status.ok { color: #4ade80; }
.import-status.err { color: #f87171; }

/* ── Game Changer Tags ── */
.gc-tag { display: inline-block; background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.3); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.7rem; font-weight: 600; margin-left: 0.35rem; vertical-align: middle; }
.gc-count { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; color: #eab308; }

/* ── Deck Read (plain-English summary above floor reasons) ── */
.deck-read { margin-top: 1rem; padding: 0.7rem 0.95rem; background: rgba(34,197,94,0.06); border-left: 3px solid rgba(34,197,94,0.55); border-radius: 4px; }
.deck-read-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #86efac; font-weight: 600; margin-bottom: 0.25rem; }
.deck-read-text { font-size: 0.88rem; color: var(--text-primary); line-height: 1.45; }

/* ── Floor Reasons ── */
.floor-reasons { margin-top: 1rem; padding: 0.75rem 1rem; background: rgba(168,85,247,0.06); border: 1px solid rgba(168,85,247,0.2); border-radius: 8px; }
.floor-reasons h4 { font-size: 0.85rem; color: #c4b5fd; margin-bottom: 0.5rem; }
.floor-reason { font-size: 0.82rem; color: var(--text-secondary); padding: 0.2rem 0; display: flex; align-items: center; gap: 0.4rem; }
.floor-reason .reason-icon { font-size: 0.9rem; flex-shrink: 0; }

/* ── Speed narrative line (under the speed badge) ── */
.rule0-speed-narrative { margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-secondary); font-style: italic; }

/* ── Saltiest Cards scale hints ── */
.salt-legend { font-size: 0.7rem; color: var(--text-secondary); font-weight: 400; margin-left: 0.4rem; }
.salt-max { font-size: 0.72rem; color: var(--text-secondary); opacity: 0.7; margin-left: 1px; }

/* ── Card Impact Section ── */
.impact-section { margin-top: 1.5rem; }
.impact-section h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.impact-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.impact-card {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); border-radius: 6px;
    padding: 0.25rem 0.65rem; font-size: 0.78rem; color: #c4b5fd;
}
.impact-card.impact-gc { background: rgba(234,179,8,0.1); border-color: rgba(234,179,8,0.25); color: #eab308; }
.impact-card.impact-combo { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); color: #f87171; }
.impact-card.impact-mld { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); color: #fca5a5; }
.impact-card.impact-extra { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.25); color: #60a5fa; }

/* ── Spellbook Credit + API Status ── */
.spellbook-credit { margin-top: 1.5rem; padding: 0.6rem 1rem; background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; }
.spellbook-credit a { color: #a78bfa; }
.api-status { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); font-size: 0.75rem; }
.api-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.api-dot.ok { background: #4ade80; }
.api-dot.fail { background: #f87171; }
.api-dot.pending { background: #eab308; }

/* ── Deck Warnings ── */
.deck-warning { margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.25); border-radius: 6px; font-size: 0.82rem; color: #eab308; }

/* ── Banned Card Warning ── */
.banned-warning { margin-top: 0.75rem; padding: 0.6rem 1rem; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; font-size: 0.85rem; color: #fca5a5; }
.banned-warning strong { color: #f87171; }
.banned-detail { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; }

/* ── Commander Oracle Text ── */
.commander-oracle { margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.8rem; }

/* ── Combo Details Section ── */
.combo-details-section { margin-top: 1.5rem; }
.combo-details-section h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.combo-card { background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
.combo-header { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.combo-produces { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.35rem; }
.combo-steps-toggle { font-size: 0.78rem; color: #a78bfa; cursor: pointer; user-select: none; margin-top: 0.35rem; }
.combo-steps-toggle:hover { color: #c4b5fd; }
.combo-steps-body p { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.3rem; line-height: 1.5; white-space: pre-wrap; }
.combo-bracket-tag { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.combo-type-tag { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.type-infinite { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.type-lock { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.type-win { background: rgba(168,85,247,0.15); color: #c4b5fd; border: 1px solid rgba(168,85,247,0.3); }
.type-combo { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.type-near-infinite { background: rgba(234,179,8,0.15); color: #fbbf24; border: 1px solid rgba(234,179,8,0.3); }
.tag-e { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.tag-c { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.tag-o { background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.3); }
.tag-p { background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.3); }
.tag-s { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.tag-r { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.combo-popularity { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }

/* ── Almost-Included Section ── */
.almost-section { margin-top: 1.5rem; }
.almost-section h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.almost-card { background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
.almost-cards { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.almost-have { display: inline-block; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); border-radius: 6px; padding: 0.2rem 0.55rem; font-size: 0.78rem; color: #4ade80; }
.almost-missing { display: inline-block; background: rgba(251,146,60,0.1); border: 1px solid rgba(251,146,60,0.3); border-radius: 6px; padding: 0.2rem 0.55rem; font-size: 0.78rem; color: #fb923c; font-weight: 600; }

/* ── Recommendations Section ── */
.recommendations-section { margin-top: 1.5rem; }
.recommendations-section h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.rec-item { background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 8px; padding: 0.6rem 1rem; margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Mana Curve Section ── */
.mana-curve-section { margin-top: 1.5rem; }
.mana-curve-section h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.curve-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 140px; padding: 0 0.5rem; }
.curve-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.curve-count { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.2rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.curve-bar { width: 100%; max-width: 40px; border-radius: 4px 4px 0 0; background: var(--gradient-purple); transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1); min-height: 2px; }
.curve-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.3rem; }

/* ── Cross-link CTA ── */
.cross-link-cta { margin-top: 1.5rem; text-align: center; }
.cross-link-cta a { display: inline-block; padding: 0.6rem 1.5rem; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.25); border-radius: 8px; color: #a78bfa; font-size: 0.9rem; font-weight: 500; transition: all 0.2s ease; }
.cross-link-cta a:hover { background: rgba(168,85,247,0.2); border-color: rgba(168,85,247,0.4); color: #c4b5fd; }

/* ── Archetype Tag ── */
.archetype-tag { text-align: center; margin-bottom: 0.75rem; font-size: 0.85rem; color: #c4b5fd; font-weight: 500; min-height: 1.2em; }
.archetype-tag:empty { display: none; }

/* ── Salt Score ── */
.salt-count { color: #fb923c; }
.salt-section { margin-top: 1.5rem; }
.salt-section h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.salt-cards { display: flex; flex-direction: column; gap: 0.3rem; }
.salt-card { display: flex; justify-content: space-between; align-items: center; background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 6px; padding: 0.4rem 0.75rem; }
.salt-name { font-size: 0.82rem; color: var(--text-primary); }
.salt-value { font-size: 0.78rem; font-weight: 600; color: #fb923c; font-family: 'Space Grotesk', sans-serif; }

/* ── Mana Base Quality ── */
.mana-quality { color: #60a5fa; }

/* ── Share / Print Buttons ── */
.share-section { margin-top: 1.25rem; text-align: center; }
.share-buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.btn-share { display: inline-block; padding: 0.5rem 1.5rem; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.25); border-radius: 8px; color: #a78bfa; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; font-family: inherit; }
.btn-share:hover { background: rgba(168,85,247,0.2); border-color: rgba(168,85,247,0.4); color: #c4b5fd; }
.btn-share.copied { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: #4ade80; }
.btn-print { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); color: #60a5fa; }
.btn-print:hover { background: rgba(59,130,246,0.2); border-color: rgba(59,130,246,0.4); color: #93c5fd; }

/* ── Card Links ── */
.card-link { color: #a78bfa; text-decoration: none; transition: color 0.2s ease; }
.card-link:hover { color: #c4b5fd; text-decoration: underline; }
.card-price { font-size: 0.72rem; color: var(--text-muted); font-family: 'Space Grotesk', sans-serif; font-weight: 500; margin-left: 0.2rem; }

/* ── Hover Preview ── */
.card-hover-preview { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; }
.card-hover-preview.visible { opacity: 1; }
.card-hover-preview img { width: 180px; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }

/* ── Impact card links inherit parent color ── */
.impact-card .card-link { color: inherit; }
.impact-card .card-link:hover { color: inherit; opacity: 0.85; }
.impact-card .card-price { display: none; }
.detected-list .card-price { color: var(--text-muted); }
.salt-card .card-link { color: var(--text-primary); }
.almost-have .card-link, .almost-missing .card-link { color: inherit; }
.almost-have .card-price, .almost-missing .card-price { display: none; }
.combo-header .card-link { color: inherit; }
.combo-header .card-price { display: none; }

@media (max-width: 500px) {
    .stats-row { grid-template-columns: 1fr 1fr; }
    .url-input-group { flex-direction: column; }
    .btn-import { width: 100%; }
    .curve-chart { height: 100px; gap: 0.3rem; }
    .card-hover-preview { display: none; }
}

/* ── Win Condition Summary ── */
.win-condition { text-align: center; margin: 0.5rem 0 0.75rem; }
.win-label { font-size: 0.82rem; color: var(--text-muted); margin-right: 0.25rem; }
.win-tag { display: inline-block; background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.3); color: #c4b5fd; font-size: 0.78rem; padding: 0.15rem 0.6rem; border-radius: 1rem; margin: 0.15rem 0.1rem; }

/* ── Deck Price ── */
.deck-price-display { text-align: center; font-size: 0.88rem; color: var(--text-secondary); padding: 0.4rem 0; margin-bottom: 0.25rem; }
.deck-price-display strong { color: var(--text-primary); font-size: 1rem; }
.price-source { font-size: 0.72rem; color: var(--text-muted); margin-left: 0.25rem; }

/* ── Interaction Coverage ── */
#interactionCoverage h3 { font-size: 0.95rem; margin-bottom: 0.75rem; }
.coverage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.cov-item { text-align: center; padding: 0.5rem 0.25rem; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--card-border); }
.cov-count { font-size: 1.25rem; font-weight: 700; }
.cov-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
.cov-good .cov-count { color: #4ade80; }
.coverage-grade { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-left: 0.5rem; vertical-align: middle; }
.cov-thin .cov-count { color: #fbbf24; }
.cov-none .cov-count { color: #f87171; }
.cov-gaps { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cov-gap-item { font-size: 0.78rem; color: #fbbf24; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); padding: 0.4rem 0.6rem; border-radius: 4px; margin-bottom: 0.25rem; }
.cov-suggestions { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.3rem; line-height: 1.6; }
.cov-suggestion-note { color: var(--text-muted); font-size: 0.7rem; }

/* ── Interaction Density ── */
.density-stats { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--card-border); }
.density-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.density-metric { text-align: center; padding: 0.5rem 0.25rem; border-radius: 8px; background: var(--bg-dark); border: 1px solid var(--card-border); }
.density-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; }
.density-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
.density-good { color: #4ade80; }
.density-mid { color: #fbbf24; }
.density-low { color: #f87171; }
.density-high { color: #fbbf24; }
.density-curve { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.density-curve-bar { display: flex; align-items: center; gap: 0.5rem; }
.density-curve-cmc { font-size: 0.72rem; color: var(--text-muted); width: 24px; text-align: right; flex-shrink: 0; }
.density-curve-fill { height: 8px; border-radius: 4px; background: var(--gradient-purple); transition: width 0.6s ease; min-width: 2px; }
.density-curve-count { font-size: 0.72rem; color: var(--text-muted); font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.density-dual { display: inline-block; font-size: 0.78rem; color: #c4b5fd; background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25); padding: 0.2rem 0.6rem; border-radius: 1rem; margin-bottom: 0.5rem; }

/* ── Color Pip Analysis ── */
#colorAnalysis h3 { font-size: 0.95rem; margin-bottom: 0.75rem; }
.pip-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.5rem; }
.pip-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--card-border); }
.pip-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.pip-color { font-size: 0.82rem; font-weight: 600; }
.pip-detail { font-size: 0.75rem; color: var(--text-muted); margin-left: 0.25rem; }
.pip-good .pip-color { color: #4ade80; }
.pip-warn .pip-color { color: #fbbf24; }
.pip-bad .pip-color { color: #f87171; }
.pip-warnings { margin-top: 0.35rem; }
.pip-warning { font-size: 0.78rem; color: #fbbf24; padding: 0.15rem 0; }

@media (max-width: 500px) {
    .coverage-grid { grid-template-columns: repeat(3, 1fr); }
    .density-row { grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
    .density-value { font-size: 1rem; }
    .density-label { font-size: 0.65rem; }
    .density-curve-cmc { font-size: 0.65rem; width: 20px; }
    .density-curve-count { font-size: 0.65rem; }
    .pip-grid { gap: 0.4rem; }
    .pip-item { padding: 0.3rem 0.5rem; }
}

/* ── Health Indicators on Category Bars ── */
.bar-health { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: #52525b; }
.health-dot.health-good { background: #4ade80; }
.health-dot.health-low { background: #fbbf24; }
.health-dot.health-high { background: #fbbf24; }

/* ── Power Score Breakdown ── */
#powerBreakdownSection { margin-top: 1.5rem; }
#powerBreakdownSection h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.power-total { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.power-total strong { color: var(--text-primary); font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; }
.power-pct { font-size: 0.82rem; color: var(--text-muted); }
.power-bar-mini-wrap { margin-bottom: 0.75rem; }
.power-bar-mini-bg { height: 8px; background: #2a2a2a; border-radius: 4px; overflow: hidden; }
.power-bar-mini-fill { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.power-body { display: block; }
.power-main { }
.power-components { display: flex; flex-direction: column; gap: 0.35rem; }
.power-comp { display: flex; align-items: center; gap: 0.5rem; }
.power-comp-label { font-size: 0.78rem; color: var(--text-secondary); width: 100px; flex-shrink: 0; }
.power-comp-bar { flex: 1; height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden; }
.power-comp-fill { display: block; height: 100%; border-radius: 3px; }
.power-comp-val { font-size: 0.72rem; color: var(--text-muted); font-family: 'Space Grotesk', sans-serif; width: 40px; text-align: right; flex-shrink: 0; }
.power-modifier { font-size: 0.82rem; color: var(--text-muted, #8b8fa3); margin: 0.35rem 0 0.5rem; padding: 0; }

/* ── Opening Hand Odds ── */
.opening-hand { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--card-border); }
.opening-hand h4 { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.hand-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hand-stat { display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.75rem; background: var(--bg-dark); border: 1px solid var(--card-border); border-radius: 8px; min-width: 100px; flex: 1; text-align: center; }
.hand-pct { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700; }
.hand-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
.hand-good .hand-pct { color: #4ade80; }
.hand-ok .hand-pct { color: #fbbf24; }
.hand-low .hand-pct { color: #f87171; }

/* ── Deck Health Report ── */
#healthReportSection { margin-top: 1.5rem; }
#healthReportSection h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.health-report { display: flex; flex-direction: column; gap: 0.35rem; }
.health-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; color: var(--text-secondary); border-left: 3px solid transparent; background: var(--bg-dark); }
.health-icon { flex-shrink: 0; font-size: 0.9rem; line-height: 1.4; }
.health-strength { border-left-color: #4ade80; }
.health-strength .health-icon { color: #4ade80; }
.health-warning { border-left-color: #fbbf24; }
.health-warning .health-icon { color: #fbbf24; }
.health-info { border-left-color: #60a5fa; }
.health-info .health-icon { color: #60a5fa; }

/* ── Bracket Quick Reference ── */
#bracketReferenceSection { margin-top: 1.25rem; }
.bracket-ref-toggle { cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); padding: 0.5rem 0; display: flex; align-items: center; gap: 0.4rem; user-select: none; }
.bracket-ref-toggle:hover { color: var(--text-primary); }
.bracket-ref-toggle .arrow { font-size: 0.7rem; transition: transform 0.2s ease; }
.bracket-ref-open .bracket-ref-toggle .arrow { transform: rotate(180deg); }
.bracket-ref-body { display: none; margin-top: 0.5rem; }
.bracket-ref-open .bracket-ref-body { display: block; }
.bracket-ref-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.bracket-ref-table th { text-align: left; padding: 0.4rem 0.6rem; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--card-border); font-size: 0.75rem; }
.bracket-ref-table td { padding: 0.4rem 0.6rem; color: var(--text-secondary); border-bottom: 1px solid var(--card-border); }
.bracket-ref-table tr.bracket-ref-active td { color: var(--text-primary); background: rgba(168,85,247,0.08); }
@media (max-width: 500px) {
    .bracket-ref-table { font-size: 0.72rem; }
    .bracket-ref-table th, .bracket-ref-table td { padding: 0.3rem 0.4rem; }
    .hand-stats { flex-direction: column; gap: 0.4rem; }
    .hand-stat { min-width: auto; }
    .power-comp-label { width: 80px; font-size: 0.72rem; }
}

/* ── Info Box ── */
.info-box { background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.2); border-radius: 10px; padding: 1.35rem; margin-top: 2rem; }
.info-box h2 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--text-primary); }
.info-box p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; margin-top: 0.5rem; }
.info-box p:first-of-type { margin-top: 0; }
.info-box a { color: #a78bfa; text-decoration: underline; }
.info-box a:hover { color: #c4b5fd; }

/* ── FAQ Section ── */
.faq-section { margin-top: 2rem; }
.faq-section h2 { font-size: 1.4rem; margin-bottom: 1rem; color: var(--text-primary); }
.faq-item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; margin-bottom: 0.75rem; }
.faq-q { padding: 1rem 1.25rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; -webkit-user-select: none; user-select: none; }
.faq-q::after { content: '+'; font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0; margin-left: 1rem; }
.faq-item.open .faq-q::after { content: '\2212'; }
.faq-item.open .faq-q { border-bottom: 1px solid var(--card-border); }
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }
.faq-a p { padding: 1rem 1.25rem; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.faq-q:focus-visible { outline: 2px solid #a855f7; outline-offset: -2px; border-radius: 10px; }

/* ── Educational Content Sections ── */
.edu-section { margin-top: 2.5rem; max-width: 800px; }
.edu-section h2 { font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--text-primary); }
.edu-section h3 { font-size: 1.1rem; margin-top: 1.25rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.edu-section p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.75rem; }
.edu-section a { color: #a78bfa; }
.edu-section a:hover { color: #c4b5fd; text-decoration: underline; }

/* ── Bracket Passport Card ── */
.passport {
    max-width: 640px; margin: 1rem auto; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--card-border); box-shadow: var(--shadow-lg);
    background: #111;
}
.passport-art {
    width: 100%; height: 0; padding-bottom: 40%; position: relative;
    background-size: cover; background-position: center 30%;
}
.passport-art-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, #111 100%);
}
.passport-body {
    padding: 0.75rem 1.25rem 1rem; position: relative; margin-top: -2rem; z-index: 1;
}
.passport-deck-name {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 600;
    color: var(--text-muted); margin-bottom: 0.2rem; outline: none;
    border-bottom: 1px dashed transparent; transition: border-color 0.15s;
    min-height: 1.2em; line-height: 1.3;
}
.passport-deck-name:hover { border-color: rgba(168,85,247,0.25); }
.passport-deck-name:focus { border-color: rgba(168,85,247,0.5); color: var(--text-secondary); }
.passport-deck-name:empty::before {
    content: attr(data-placeholder); color: rgba(113,113,122,0.5);
    font-style: italic; pointer-events: none;
}
.passport-deck-name:not(:empty) { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.passport-name {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700;
    color: #fff; line-height: 1.2; margin-bottom: 0.15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.passport-type {
    font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.35rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.passport-oracle {
    font-size: 0.72rem; color: var(--text-secondary); line-height: 1.5;
    margin-bottom: 0.5rem; padding: 0.4rem 0.5rem;
    background: rgba(255,255,255,0.03); border-radius: 6px;
    border-left: 2px solid rgba(139,92,246,0.35);
}
.passport-oracle-divider {
    display: block; height: 1px; margin: 0.35rem 0;
    background: var(--card-border);
}
.passport-chips {
    display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; flex-wrap: wrap;
}
.passport-bracket {
    display: inline-block; padding: 0.2rem 0.7rem; border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600;
}
.passport-power-chip {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 700;
    padding: 0.2rem 0.6rem; border-radius: 50px;
    border: 1px solid; background: rgba(255,255,255,0.04);
}
.passport-tag {
    display: inline-block; background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.3);
    color: #c4b5fd; font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 1rem;
}
.passport-curve {
    display: flex; align-items: flex-end; gap: 2px; height: 28px; margin-bottom: 0.5rem;
}
.passport-curve-bar {
    flex: 1; background: var(--gradient-purple); border-radius: 2px 2px 0 0; min-height: 2px;
}
.passport-footer {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 0.4rem;
}
.passport-brand-row {
    display: flex; align-items: center; gap: 0.4rem; justify-self: start;
}
.passport-brand-logo { flex-shrink: 0; border-radius: 4px; }
.passport-qr-wrap {
    display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
    justify-self: end;
}
.passport-qr {
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
}
.passport-qr canvas {
    width: 80px; height: 80px; display: block;
    border-radius: 4px;
}
.passport-qr-label {
    font-size: 0.58rem; color: var(--text-muted);
    margin-top: 0.15rem; letter-spacing: 0.02em;
}
.passport-brand {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
    background: var(--gradient-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.passport-verified {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 0.65rem; color: var(--text-muted);
    justify-self: center;
}
.passport-verified-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block;
}

/* ── Passport Star Cards (full card face, user-swappable) ── */
.passport-stars { margin-bottom: 0.6rem; }
.passport-stars-label {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: 0.35rem;
}
.stars-edit-hint {
    font-weight: 400; font-size: 0.62rem; letter-spacing: 0;
    text-transform: none; color: rgba(196,181,253,0.7);
}
.passport-stars-row { display: flex; gap: 0.5rem; justify-content: center; }
.passport-star {
    flex: 0 1 30%; max-width: 180px; min-width: 0;
    position: relative; cursor: pointer;
}
.passport-star img {
    width: 100%; aspect-ratio: 488 / 680; object-fit: cover;
    border-radius: 4.75% / 3.4%; display: block;
    border: 1px solid rgba(255,255,255,0.1);
    transition: border-color 0.15s;
}
.passport-star:hover img { border-color: rgba(168,85,247,0.5); }
.star-swap-btn {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.65); color: #c4b5fd;
    font-size: 0.7rem; line-height: 22px; text-align: center;
    opacity: 0; transition: opacity 0.15s;
    pointer-events: none;
}
.passport-star:hover .star-swap-btn { opacity: 1; }

/* ── Star Card Picker ── */
.star-picker { display: none; }
.star-picker-open {
    display: block; margin-top: 0.5rem;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 8px; padding: 0.5rem; max-height: 280px;
}
.star-picker-search {
    width: 100%; padding: 0.4rem 0.6rem; margin-bottom: 0.4rem;
    background: var(--bg-primary); border: 1px solid var(--card-border);
    border-radius: 6px; color: var(--text-primary); font-size: 0.8rem;
    outline: none;
}
.star-picker-search:focus { border-color: rgba(168,85,247,0.5); }
.star-picker-list {
    max-height: 210px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(168,85,247,0.3) transparent;
}
.star-picker-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.4rem; border-radius: 4px; cursor: pointer;
    font-size: 0.78rem; color: var(--text-primary);
}
.star-picker-item:hover { background: rgba(168,85,247,0.12); }
.star-picker-item img {
    width: 32px; height: 45px; object-fit: cover;
    border-radius: 2px; flex-shrink: 0;
}

/* ── Editable Game Plan ── */
.gameplan-edit-hint {
    font-weight: 400; font-size: 0.62rem; letter-spacing: 0;
    text-transform: none; color: rgba(196,181,253,0.7);
}
.rule0-gameplan[contenteditable] {
    border: 1px dashed transparent; border-radius: 6px;
    padding: 0.35rem; margin: -0.35rem; transition: border-color 0.15s;
    outline: none;
}
.rule0-gameplan[contenteditable]:hover { border-color: rgba(168,85,247,0.25); }
.rule0-gameplan[contenteditable]:focus { border-color: rgba(168,85,247,0.5); }

/* ── Passport Action Buttons ── */
.passport-actions {
    display: flex; gap: 0.5rem; justify-content: center; max-width: 640px;
    margin: 0.75rem auto 0; flex-wrap: wrap;
}
.btn-download {
    background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.25) !important;
    color: #4ade80 !important;
}
.btn-download:hover {
    background: rgba(34,197,94,0.2) !important; border-color: rgba(34,197,94,0.4) !important;
    color: #86efac !important;
}
.btn-discord {
    background: rgba(88,101,242,0.1) !important; border-color: rgba(88,101,242,0.25) !important;
    color: #818cf8 !important;
}
.btn-discord:hover {
    background: rgba(88,101,242,0.2) !important; border-color: rgba(88,101,242,0.4) !important;
    color: #a5b4fc !important;
}
.btn-save {
    background: rgba(168,85,247,0.1) !important; border-color: rgba(168,85,247,0.25) !important;
    color: #c084fc !important;
}
.btn-save:hover {
    background: rgba(168,85,247,0.2) !important; border-color: rgba(168,85,247,0.4) !important;
    color: #d8b4fe !important;
}
.btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-save.copied {
    background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.25) !important;
    color: #4ade80 !important;
}
.save-success {
    display: flex; align-items: center; gap: 0.5rem; max-width: 640px; margin: 0.5rem auto 0;
    padding: 0.6rem 0.75rem; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15);
    border-radius: 8px; flex-wrap: wrap;
}
.save-success-label { font-size: 0.78rem; color: #4ade80; font-weight: 600; white-space: nowrap; }
.save-success-url {
    flex: 1; min-width: 180px; padding: 0.3rem 0.5rem; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #e2e8f0;
    font-size: 0.78rem; font-family: inherit;
}
.btn-copy-link {
    padding: 0.3rem 0.75rem; font-size: 0.75rem; background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.25); border-radius: 6px; color: #c084fc; cursor: pointer;
}
.btn-copy-link:hover { background: rgba(168,85,247,0.2); }

@media (max-width: 500px) {
    .passport-name { font-size: 1.1rem; }
    .passport-body { padding: 0.5rem 0.75rem 0.75rem; }
    .passport-actions { flex-direction: column; }
    .passport-actions .btn-share { width: 100%; text-align: center; }
    .star-swap-btn { opacity: 0.7; }
    .stars-edit-hint, .gameplan-edit-hint { display: none; }
}

/* ── Rule 0 (inside passport card) ── */
.passport-rule0 {
    margin-top: 0.6rem; padding-top: 0.6rem;
    border-top: 1px solid var(--card-border);
}
.rule0-heading {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 600;
    color: var(--text-primary); margin-bottom: 0.4rem;
}
.rule0-gameplan {
    font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.5rem;
}
.rule0-label {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem;
    padding-top: 0.5rem; border-top: 1px solid var(--card-border);
}
.rule0-highlights {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.rule0-chip {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 6px;
    font-size: 0.75rem; font-weight: 500;
    background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); color: #c4b5fd;
}
.rule0-chip-warn {
    background: rgba(234,179,8,0.1); border-color: rgba(234,179,8,0.25); color: #eab308;
}
.rule0-chip-danger {
    background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); color: #f87171;
}
.rule0-chip-safe {
    background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25); color: #4ade80;
}
.rule0-speed {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem;
    font-size: 0.78rem; color: var(--text-secondary);
}
.rule0-speed-badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600;
}
.speed-slow { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.speed-moderate { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.speed-fast { background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.3); }
.speed-explosive { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }

@media (max-width: 500px) {
    .rule0-gameplan { font-size: 0.78rem; }
    .rule0-highlights { gap: 0.3rem; }
    .rule0-chip { font-size: 0.7rem; padding: 0.18rem 0.5rem; }
}

/* ── Print Styles ── */
@media print {
    /* Force color rendering */
    * { color-adjust: exact !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* Page setup */
    @page { margin: 0.4in 0.5in; size: letter; }

    /* Global reset for print */
    body, main, .panel, .floor-reasons,
    .cov-item { background: #fff !important; color: #111 !important; }
    main { margin-top: 0 !important; padding: 0 !important; min-height: auto !important; }
    .container { max-width: 100% !important; padding: 0 !important; }
    #results { margin-top: 0 !important; }

    /* ── HIDE: chrome, non-result, deckbuilding-only sections ── */
    .nav, footer, .breadcrumb, .hero-section, .share-section,
    .cross-link-cta, .spellbook-credit, .card-hover-preview,
    #placeholder, #deckWarnings, .info-box, .faq-section,
    .edu-section, .passport-actions,
    .gauge-container, .archetype-tag, #winCondition, #commanderPreview,
    .stats-row, #deckPrice,
    #healthReportSection, #powerBreakdownSection,
    #bracketReferenceSection,
    .impact-section, .combo-details-section, .almost-section,
    .recommendations-section, .detected-section, .salt-section,
    #colorAnalysis { display: none !important; }

    /* Hide input panel */
    .calc-layout > .panel:first-child { display: none !important; }

    /* Full-width results */
    .calc-layout { display: block !important; }
    .calc-layout > .panel:last-child { border: none !important; padding: 0 !important; background: none !important; }

    /* ── Print header ── */
    .calc-layout > .panel:last-child::before {
        content: "Rule 0 \2014  Commander Deck Card";
        display: block; font-size: 12pt; font-weight: 700;
        margin-bottom: 6pt; padding-bottom: 4pt;
        border-bottom: 1.5pt solid #333; color: #333;
        font-family: 'Space Grotesk', -apple-system, sans-serif;
    }

    /* Card links: plain text */
    .card-link { color: #111 !important; text-decoration: none !important; }
    .card-price { display: none !important; }

    /* ── PASSPORT: compact hero (small art, data-focused) ── */
    .passport { max-width: 100% !important; border: 1pt solid #ccc !important; box-shadow: none !important;
        background: #fff !important; break-inside: avoid; page-break-inside: avoid; margin: 0 auto 4pt !important; }
    .passport-art { padding-bottom: 12% !important; }
    .passport-art-gradient { background: linear-gradient(to bottom, transparent 10%, #fff 100%) !important; }
    .passport-body { background: #fff !important; margin-top: -0.75rem !important; padding: 0.3rem 0.75rem 0.4rem !important; }
    .passport-deck-name { font-size: 7pt !important; color: #555 !important; border: none !important; }
    .passport-deck-name:empty { display: none !important; }
    .passport-name { color: #111 !important; font-size: 11pt !important; }
    .passport-type { color: #555 !important; font-size: 6.5pt !important; margin-bottom: 2pt !important; }
    .passport-oracle { font-size: 6pt !important; color: #333 !important; background: #f9fafb !important;
        border-left: 1.5pt solid #7c3aed !important; padding: 2pt 4pt !important; margin-bottom: 3pt !important; }
    .passport-oracle-divider { background: #ddd !important; }
    .passport-chips { margin-bottom: 2pt !important; gap: 3pt !important; }
    .passport-bracket { border: 1pt solid currentColor !important; font-size: 7pt !important; padding: 1pt 5pt !important; }
    .passport-power-chip { font-size: 7pt !important; padding: 1pt 4pt !important; border: 1pt solid currentColor !important; }
    .passport-tag { background: #f3f4f6 !important; border: 1pt solid #d1d5db !important; color: #333 !important;
        font-size: 6pt !important; padding: 0.5pt 4pt !important; }
    .passport-curve { height: 16px !important; margin-bottom: 2pt !important; }
    .passport-curve-bar { background: #7c3aed !important; }
    .passport-footer { padding-top: 0 !important; }
    .passport-brand-row { gap: 2pt !important; }
    .passport-brand-logo { width: 14px !important; height: 14px !important; }
    .passport-brand { font-size: 6pt !important; -webkit-text-fill-color: #333 !important; color: #333 !important; }
    .passport-verified { font-size: 5pt !important; color: #666 !important; }
    .passport-verified-dot { background: #16a34a !important; }
    .passport-qr { width: 56px !important; height: 56px !important; }
    .passport-qr canvas { width: 56px !important; height: 56px !important; }
    .passport-qr-label { font-size: 4.5pt !important; color: #666 !important; }

    /* ── RULE 0 (inside passport, print) ── */
    .passport-rule0 { margin-top: 4pt !important; padding-top: 4pt !important; border-top: 1pt solid #ccc !important; }
    .rule0-heading { font-size: 8.5pt !important; margin-bottom: 3pt !important; color: #111 !important; }
    .rule0-gameplan { font-size: 7.5pt !important; color: #222 !important; line-height: 1.5 !important; margin-bottom: 3pt !important; }
    .rule0-gameplan strong { color: #111 !important; }
    .rule0-label { font-size: 5.5pt !important; color: #555 !important; margin-bottom: 2pt !important; padding-top: 3pt !important; border-top: 0.5pt solid #ddd !important; }
    .rule0-highlights { gap: 2pt !important; }
    .rule0-chip { font-size: 6pt !important; padding: 1pt 4pt !important; background: #f3f4f6 !important;
        border: 1pt solid #d1d5db !important; color: #333 !important; border-radius: 2pt !important; }
    .rule0-chip-warn { background: #fef3c7 !important; border-color: #d97706 !important; color: #92400e !important; }
    .rule0-chip-danger { background: #fee2e2 !important; border-color: #dc2626 !important; color: #991b1b !important; }
    .rule0-chip-safe { background: #dcfce7 !important; border-color: #16a34a !important; color: #166534 !important; }
    .rule0-speed { margin-top: 2pt !important; font-size: 6.5pt !important; color: #333 !important; }
    .rule0-speed-badge { font-size: 6.5pt !important; padding: 1pt 4pt !important; }
    .speed-slow { background: #dcfce7 !important; border: 1pt solid #16a34a !important; color: #166534 !important; }
    .speed-moderate { background: #dbeafe !important; border: 1pt solid #2563eb !important; color: #1e40af !important; }
    .speed-fast { background: #fef3c7 !important; border: 1pt solid #d97706 !important; color: #92400e !important; }
    .speed-explosive { background: #fee2e2 !important; border: 1pt solid #dc2626 !important; color: #991b1b !important; }

    /* ── FLOOR REASONS ── */
    .floor-reasons { margin-top: 6pt !important; padding: 5pt 8pt !important; background: #f9fafb !important;
        border: 1pt solid #d1d5db !important; border-radius: 3pt !important; break-inside: avoid; page-break-inside: avoid; }
    .floor-reasons h4 { font-size: 8pt !important; color: #333 !important; margin-bottom: 3pt !important; }
    .floor-reason { font-size: 7pt !important; color: #444 !important; padding: 1pt 0 !important; }

    /* ── MANA CURVE + CATEGORY BARS: side by side ── */
    .print-two-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10pt !important;
        margin-top: 8pt !important; break-inside: avoid; page-break-inside: avoid; }
    .mana-curve-section { margin-top: 0 !important; }
    .mana-curve-section h3 { font-size: 9pt !important; margin-bottom: 4pt !important; }
    .curve-chart { height: 60pt !important; gap: 2pt !important; }
    .curve-count { font-size: 6pt !important; color: #555 !important; }
    .curve-bar { background: #7c3aed !important; }
    .curve-label { font-size: 6pt !important; color: #555 !important; }
    .category-breakdown { margin-top: 0 !important; }
    .category-breakdown h3 { font-size: 9pt !important; margin-bottom: 4pt !important; }
    .cat-row { margin-bottom: 3pt !important; }
    .cat-header { margin-bottom: 1pt !important; }
    .cat-name { font-size: 7pt !important; color: #333 !important; }
    .cat-score { font-size: 7pt !important; color: #555 !important; }
    .cat-bar-bg { height: 6pt !important; background: #e5e7eb !important; border-radius: 3pt !important; }
    .cat-bar-fill { border-radius: 3pt !important; }
    .cat-count { display: none !important; }
    .bar-health { display: none !important; }

    /* ── INTERACTION COVERAGE ── */
    #interactionCoverage { margin-top: 8pt !important; break-inside: avoid; page-break-inside: avoid; }
    #interactionCoverage h3 { font-size: 9pt !important; margin-bottom: 4pt !important; }
    .coverage-grid { gap: 3pt !important; }
    .cov-item { padding: 3pt !important; border: 1pt solid #ddd !important; border-radius: 3pt !important; }
    .cov-count { font-size: 10pt !important; color: #111 !important; }
    .cov-label { font-size: 6pt !important; color: #666 !important; }
    .cov-gaps { margin-top: 3pt !important; }
    .cov-gap-item { font-size: 6.5pt !important; padding: 1.5pt 5pt !important; background: #fef3c7 !important;
        border: 1pt solid #d97706 !important; color: #92400e !important; }

    /* ── INTERACTION DENSITY (print) ── */
    .density-stats { margin-top: 4pt !important; padding-top: 4pt !important; border-top: 1pt solid #ddd !important; }
    .density-row { gap: 3pt !important; }
    .density-metric { padding: 3pt !important; border: 1pt solid #ddd !important; border-radius: 3pt !important; }
    .density-value { font-size: 9pt !important; color: #111 !important; }
    .density-label { font-size: 6pt !important; color: #666 !important; }
    .density-curve { gap: 2pt !important; margin-bottom: 3pt !important; }
    .density-curve-fill { background: #7c3aed !important; height: 6pt !important; }
    .density-curve-cmc { font-size: 6pt !important; color: #555 !important; }
    .density-curve-count { font-size: 6pt !important; color: #555 !important; }
    .density-dual { font-size: 6.5pt !important; padding: 1pt 5pt !important; background: #f3f4f6 !important;
        border: 1pt solid #d1d5db !important; color: #333 !important; }
}

/* v38: Deck Structure Banner */
.deck-structure-banner {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 8px;
    font-size: 0.9rem;
}
.structure-detected { margin-bottom: 0.5rem; }
.structure-detected strong { color: #a78bfa; }
.structure-names { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.structure-name { padding: 0.25rem 0.75rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; font-size: 0.85rem; color: var(--text-secondary, #a0a0a0); }
.structure-primary { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.4); color: #d8b4fe; }
.structure-sep { color: #666; align-self: center; }
.structure-note { color: var(--text-secondary, #888); font-size: 0.8rem; }
.structure-companion { padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.06); }
.structure-companion strong { color: #fbbf24; }

/* v38: Partner name on passport */
.passport-partner { font-size: 0.85em; color: #a78bfa; font-weight: 400; }

/* v38: Companion buttons */
.companion-buttons { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.companion-btn { padding: 0.4rem 1rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--text-secondary, #ccc); font-size: 0.85rem; font-family: inherit; cursor: pointer; transition: all 0.2s ease; }
.companion-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #fff; }
.companion-btn-yes { border-color: rgba(168,85,247,0.4); }
.companion-btn-yes:hover { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.6); color: #d8b4fe; }
.companion-btn-no { border-color: rgba(255,255,255,0.1); }
.companion-confirmed { color: #a78bfa; font-size: 0.9rem; }
.passport-companion-line { font-size: 0.8rem; color: #a78bfa; margin-top: 0.15rem; font-style: italic; }

/* ── Synergy Density Section ── */
.synergy-section { margin-top: 2rem; padding: 1.25rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.synergy-section h3 { margin: 0 0 0.25rem 0; font-size: 1.05rem; color: #e2e8f0; }
.synergy-subtitle { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-bottom: 1rem; }
.synergy-axes { display: flex; flex-direction: column; gap: 0.75rem; }
.synergy-axis-row { display: grid; grid-template-columns: 130px 1fr 36px; align-items: center; gap: 0.75rem; }
.synergy-axis-label { font-size: 0.85rem; color: #e2e8f0; font-weight: 500; white-space: nowrap; }
.synergy-cmd-match { color: #eab308; font-size: 0.8rem; }
.synergy-axis-bars { display: flex; flex-direction: column; gap: 0.3rem; }
.synergy-bar-group { display: flex; align-items: center; gap: 0.5rem; }
.synergy-bar-label { font-size: 0.7rem; color: rgba(255,255,255,0.4); width: 52px; text-align: right; flex-shrink: 0; }
.synergy-bar-track { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.synergy-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.synergy-bar-enabler { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.synergy-bar-payoff { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.synergy-bar-count { font-size: 0.75rem; color: rgba(255,255,255,0.5); width: 22px; text-align: right; flex-shrink: 0; }
.synergy-axis-score { font-size: 1rem; font-weight: 700; color: #a78bfa; text-align: center; }
.synergy-axis-robust { font-size: 0.65rem; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }
.synergy-axis-desc { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; margin-top: 0.1rem; }
.synergy-axis-detail { padding: 0.5rem 0.75rem 0.75rem; margin: 0 0 0.5rem; border-left: 2px solid rgba(168,85,247,0.3); font-size: 0.78rem; line-height: 1.6; }
.synergy-card-list { margin-bottom: 0.25rem; color: var(--text-secondary); }
.synergy-card-role { color: var(--text-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.synergy-summary { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.06); font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.synergy-depth { font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.78rem; }
.synergy-depth-shallow { color: #94a3b8; background: rgba(148,163,184,0.1); }
.synergy-depth-moderate { color: #60a5fa; background: rgba(96,165,250,0.1); }
.synergy-depth-deep { color: #a78bfa; background: rgba(167,139,250,0.15); }
.synergy-depth-very-deep { color: #eab308; background: rgba(234,179,8,0.12); }
@media (max-width: 600px) {
    .synergy-axis-row { grid-template-columns: 100px 1fr 30px; gap: 0.5rem; }
    .synergy-bar-label { width: 40px; font-size: 0.65rem; }
}

/* ── EDHREC Link ── */
.edhrec-link { display: inline-block; font-size: 0.6rem; font-weight: 700; color: #94a3b8; background: rgba(255,255,255,0.06); border-radius: 3px; padding: 0 3px; margin-left: 3px; text-decoration: none; vertical-align: middle; line-height: 1.4; transition: all 0.2s; }
.edhrec-link:hover { color: #60a5fa; background: rgba(96,165,250,0.12); }

/* ── Card Quality Section ── */
.card-quality-section { margin-top: 1.5rem; padding: 1.25rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.card-quality-section h3 { margin: 0 0 0.6rem 0; font-size: 1.05rem; color: #e2e8f0; }
.cq-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.cq-tier-badge { font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 5px; font-size: 0.82rem; }
.cq-tier-jank { color: #94a3b8; background: rgba(148,163,184,0.12); }
.cq-tier-casual { color: #60a5fa; background: rgba(96,165,250,0.1); }
.cq-tier-tuned { color: #a78bfa; background: rgba(167,139,250,0.12); }
.cq-tier-optimized { color: #eab308; background: rgba(234,179,8,0.1); }
.cq-tier-premium { color: #f87171; background: rgba(248,113,113,0.1); }
.cq-score { font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.cq-bar-track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.04); margin-bottom: 0.5rem; }
.cq-bar-seg { height: 100%; transition: width 0.6s ease; }
.cq-bar-staple { background: #4ade80; }
.cq-bar-premium { background: #60a5fa; }
.cq-bar-good { background: #a78bfa; }
.cq-bar-niche { background: #eab308; }
.cq-bar-jank { background: #64748b; }
.cq-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.cq-leg { font-size: 0.72rem; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 0.3rem; }
.cq-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.cq-footnote { font-size: 0.7rem; color: rgba(255,255,255,0.3); }

/* ── Radar Chart ── */
.radar-section { margin-top: 1.5rem; }
.radar-section h3 { font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-secondary); }
.radar-wrap { max-width: 360px; margin: 0 auto; }
@media (max-width: 640px) { .radar-wrap { max-width: 280px; } }

/* ── Bracket Suggestions ── */
.bracket-suggestions { margin-top: 1.25rem; padding: 1rem 1.25rem; background: rgba(168,85,247,0.06); border: 1px solid rgba(168,85,247,0.15); border-radius: 10px; }
.bracket-suggestions h3 { font-size: 0.95rem; margin-bottom: 0.75rem; color: #c4b5fd; }
.bracket-suggestions p { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; line-height: 1.5; }
.suggestion-card { font-size: 0.82rem; color: var(--text-secondary); padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; justify-content: space-between; align-items: center; }
.suggestion-card:last-child { border-bottom: none; }
.suggestion-reason { font-size: 0.72rem; color: var(--text-muted); }


/* ── Paste button + restore chip (added 2026-04-12) ── */
.paste-row { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; flex-wrap: wrap; }
.paste-btn { padding: 0.5rem 1rem; font-size: 0.85rem; }
.paste-hint { font-size: 0.78rem; color: var(--text-muted); }
.restore-chip { display: inline-block; margin: 0.5rem 0 0.25rem 0; padding: 0.4rem 0.9rem; background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.25); border-radius: 999px; color: #c4b5fd; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; font-family: inherit; }
.restore-chip:hover { background: rgba(168,85,247,0.16); border-color: rgba(168,85,247,0.45); color: #e9d5ff; }
.restore-chip[hidden] { display: none; }