/* Copy Trading: page-specific pieces on top of ai-analysis.css + top-models.css */

:root { --text-muted: #9aa0ad; } /* lift small labels above WCAG AA on the dark board */

/* ---------- header ---------- */
.hdr-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.2px;
}
.hdr-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hdr-meta i { color: var(--primary); font-size: 0.85rem; }

.kpi-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ink);
}
.kpi-brand .logo { width: 24px; height: 24px; margin: 0; border-radius: 6px; }
.kpi-text small { margin-top: 1px; }

/* ---------- score explainer ---------- */
.score-how {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    margin: 0 0 20px;
    overflow: hidden;
}
.score-how summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.score-how summary::-webkit-details-marker { display: none; }
.score-how summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sh-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--primary);
    background: rgba(247, 147, 26, 0.11);
    border: 1px solid rgba(247, 147, 26, 0.22);
}
.sh-copy { min-width: 0; }
.sh-copy b { display: block; color: var(--text-main); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.sh-copy small { display: block; color: var(--text-muted); font-size: 0.74rem; line-height: 1.35; }
.sh-caret { margin-left: auto; color: var(--text-muted); font-size: 0.8rem; transition: transform 0.22s ease; }
.score-how[open] .sh-caret { transform: rotate(180deg); }
.score-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 16px 12px;
}
.score-part {
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(var(--fg), 0.03);
    border: 1px solid rgba(var(--fg), 0.06);
}
.sp-num { display: block; color: var(--primary); font-size: 1.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-label { display: block; margin-top: 5px; color: var(--text-main); font-size: 0.69rem; letter-spacing: 0.8px; text-transform: uppercase; line-height: 1.25; }
.score-part small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.68rem; line-height: 1.35; }
.score-note { padding: 0 16px 14px; color: var(--text-muted); font-size: 0.76rem; line-height: 1.5; }
.score-note i { color: var(--accent); margin-right: 3px; }

/* ---------- filters ---------- */
.filter-panel {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 16px 18px 12px;
    margin-bottom: 16px;
}
.filter-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--fg), 0.06);
    margin-bottom: 12px;
}
.filter-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 260px;
    max-width: 330px;
    margin-left: auto;
    padding: 0 13px;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    background: rgba(var(--fg), 0.035);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.search-wrap:focus-within { border-color: var(--accent); background: rgba(0, 204, 255, 0.04); }
.search-wrap i { color: var(--text-muted); font-size: 0.8rem; }
.search-wrap input {
    width: 100%;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.84rem;
}
.search-wrap input::placeholder { color: var(--text-muted); }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.filter-group { min-width: 0; }
.filter-group.span2 { grid-column: span 2; }
.filter-group.group-wide { grid-column: 1 / -1; }
.filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.65rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.filter-label i { color: var(--text-dim); font-size: 0.7rem; }
.filter-group .chip-row { gap: 5px; }
.filter-group .f-chip { padding: 4px 9px; border-radius: 13px; font-size: 0.73rem; line-height: 1.3; }
.filter-group .f-chip i { font-size: 0.7rem; }
.filter-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--fg), 0.06);
}
.filter-status { color: var(--text-dim); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.filter-status i { color: var(--primary); margin-right: 3px; }
.filter-status b { color: var(--text-main); font-weight: 600; }
.filter-hint { margin-left: auto; color: var(--text-muted); font-size: 0.7rem; }
.filter-hint i { color: var(--accent); margin-right: 3px; }
.reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid rgba(247, 147, 26, 0.38);
    border-radius: 14px;
    background: rgba(247, 147, 26, 0.08);
    color: var(--primary);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.reset-btn:hover { background: rgba(247, 147, 26, 0.16); border-color: var(--primary); }
.reset-btn[hidden] { display: none; }

/* ---------- leaderboard ---------- */
.board-card { padding: 14px 18px 10px; }
.board-head, .b-row {
    grid-template-columns: 34px minmax(210px, 1.6fr) 92px 100px 100px 86px 92px 78px 112px;
    gap: 10px;
}
.board-head {
    padding: 4px 6px 10px;
    letter-spacing: 0.7px;
    font-size: 0.65rem;
    white-space: nowrap;
}
.board-head > span { align-self: center; }
.board-head .sort-btn {
    justify-self: start;
    padding: 3px 7px;
    border-radius: 10px;
    font-size: 0.62rem;
    letter-spacing: 0.55px;
    gap: 4px;
    white-space: nowrap;
}
.board-head .sort-btn i { font-size: 0.66rem; }
.b-row {
    min-height: 82px;
    padding: 9px 6px;
    align-items: center;
    align-content: center;
    color: inherit;
    text-decoration: none;
    row-gap: 2px;
}
.b-row:hover { background: rgba(var(--fg), 0.028); }
.b-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.board.no-anim .b-row, .board.no-anim .group-head { transition: none; }
.b-rank { font-size: 1.05rem; line-height: 1; align-self: center; }
.b-name { min-width: 0; line-height: 1.2; }
.b-provider { display: flex; align-items: center; min-width: 0; }
.b-provider .logo { margin-right: 7px; }
.b-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-guards { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.b-provider .guard { color: #26e6a4; font-size: 0.78rem; margin-left: 5px; }
.b-provider .guard.audit { color: var(--accent); }
.b-provider .go { margin-left: 6px; color: var(--text-muted); font-size: 0.65rem; opacity: 0; transition: opacity 0.2s ease, color 0.2s ease; }
.b-row:hover .go { opacity: 1; color: var(--accent); }
.b-model { margin-top: 2px; overflow: hidden; color: var(--text-muted); font-size: 0.68rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.b-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.logo { width: 19px; height: 19px; border-radius: 4px; margin-right: 7px; flex: none; background: rgba(var(--fg), 0.06); object-fit: contain; }
.b-provider .logo { margin-right: 7px; }
.flag { width: 13px; height: auto; margin-right: 3px; border-radius: 2px; vertical-align: -1px; }

/* tags */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border: 1px solid var(--card-border);
    border-radius: 7px;
    color: var(--text-dim);
    font-size: 0.6rem;
    line-height: 1.25;
    white-space: nowrap;
}
.tag i { font-size: 0.62rem; }
.tag.good { color: #26e6a4; border-color: rgba(38, 230, 164, 0.38); background: rgba(38, 230, 164, 0.06); }
.tag.mid { color: #ffbe3d; border-color: rgba(255, 190, 61, 0.4); background: rgba(255, 190, 61, 0.06); }
.tag.bad { color: #ff8080; border-color: rgba(230, 103, 103, 0.45); background: rgba(230, 103, 103, 0.06); }
.tag.info { color: var(--accent); border-color: rgba(0, 204, 255, 0.35); background: rgba(0, 204, 255, 0.05); }
.tag.type-social { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.34); background: rgba(139, 92, 246, 0.07); }
.tag.type-broker { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.3); background: rgba(14, 165, 233, 0.06); }
.tag.type-crypto { color: #fdba74; border-color: rgba(253, 186, 116, 0.34); background: rgba(247, 147, 26, 0.06); }
.tag.type-signals { color: #f0abfc; border-color: rgba(240, 171, 252, 0.3); background: rgba(217, 70, 239, 0.06); }

/* score cell */
.b-score { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bar.score-bar { width: 100%; height: 18px; }
.b-fill.score { height: 9px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--primary), #ffc107); }
.b-val { font-size: 0.79rem; line-height: 1; }
.score-tier {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 7px;
    font-size: 0.58rem;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.score-tier.good { color: #26e6a4; background: rgba(38, 230, 164, 0.09); border-color: rgba(38, 230, 164, 0.25); }
.score-tier.mid { color: #ffbe3d; background: rgba(255, 190, 61, 0.09); border-color: rgba(255, 190, 61, 0.25); }
.score-tier.bad { color: #ff8080; background: rgba(230, 103, 103, 0.09); border-color: rgba(230, 103, 103, 0.25); }

/* data cells */
.b-cell { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cell-label { display: none; color: var(--text-muted); font-size: 0.58rem; letter-spacing: 0.9px; text-transform: uppercase; line-height: 1.2; }
.cell-main { display: flex; align-items: center; gap: 4px; max-width: 100%; color: var(--text-main); font-size: 0.77rem; line-height: 1.3; }
.cell-main i { color: var(--text-muted); font-size: 0.72rem; }
.cell-sub { display: -webkit-box; overflow: hidden; color: var(--text-muted); font-size: 0.65rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.b-model-cell .cell-main { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; }
.b-model-cell .cell-sub { -webkit-line-clamp: 2; }
.b-entry .entry, .b-fee .fee, .b-lev .lev { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 2px 7px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry.free, .entry.low, .fee.free, .fee.low, .lev.low { color: #4be08c; background: rgba(46, 204, 113, 0.11); }
.entry.mid, .fee.mid, .lev.mid { color: #ffbe3d; background: rgba(255, 170, 0, 0.11); }
.entry.high, .fee.high, .lev.high { color: #ff9a7a; background: rgba(230, 103, 103, 0.11); }
.lev.extreme { color: #ff7070; background: rgba(230, 103, 103, 0.16); }
.lev.na, .entry.na, .fee.na { color: var(--text-muted); background: rgba(var(--fg), 0.05); font-weight: 400; }
.b-reg .reg { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; line-height: 1.3; white-space: nowrap; }
.b-reg .reg i { font-size: 0.7rem; }
.reg.good { color: #26e6a4; }
.reg.mid { color: #ffbe3d; }
.reg.bad { color: #ff8080; }
.b-reg .cell-sub { -webkit-line-clamp: 2; }

/* group headers */
.group-head {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(247, 147, 26, 0.18);
    border-left: 3px solid var(--primary);
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(247, 147, 26, 0.09), rgba(247, 147, 26, 0.02));
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 600;
    transition: transform 0.6s cubic-bezier(.2, .9, .3, 1);
}
.gh-icon { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: rgba(247, 147, 26, 0.1); font-size: 0.72rem; }
.gh-label { white-space: nowrap; }
.gh-count { padding: 0 6px; border-radius: 8px; border: 1px solid var(--card-border); color: var(--text-dim); font-size: 0.65rem; font-weight: 400; line-height: 1.5; }
.gh-meta { margin-left: auto; overflow: hidden; color: var(--text-muted); font-size: 0.68rem; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }

/* empty state */
#boardEmpty {
    margin: 8px 0 4px;
    padding: 38px 20px;
    border: 1px dashed rgba(var(--fg), 0.12);
    border-radius: 12px;
    background: rgba(var(--fg), 0.02);
    font-size: 0.88rem;
}
#boardEmpty i { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 1.4rem; }
#boardEmpty .link-btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- best picks ---------- */
#picks { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
#picks .cat { min-height: 100%; }
#picks .cat-head { flex-wrap: wrap; }
#picks .cat-head small { flex-basis: 100%; margin-left: 22px; margin-top: -6px; }
#picks .cat-head i { font-size: 0.9rem; }
#picks .cat-win .cat-model { display: flex; align-items: center; gap: 8px; }
#picks .cat-win .cat-model .logo { width: 24px; height: 24px; margin: 0; border-radius: 6px; }
#picks .cat-win .cat-prov { margin-left: 32px; }
#picks .cat-run { line-height: 1.5; }
#picks .cat-run small { padding-left: 6px; }
.cat-none { padding: 4px 0; font-size: 0.8rem; color: var(--text-muted); }

/* ---------- fee calculator ---------- */
.fee-card { padding: 18px 20px 16px; }
.fee-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 34px;
    padding-bottom: 15px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(var(--fg), 0.06);
}
.fee-control { min-width: 0; }
.fee-control label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 600;
}
.fee-control label span { display: inline-flex; align-items: center; gap: 6px; }
.fee-control label i { color: var(--primary); font-size: 0.8rem; }
.fee-control output { color: var(--primary); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fee-control input[type="range"] { display: block; width: 100%; margin: 7px 0 3px; accent-color: var(--primary); cursor: pointer; }
.fee-scale { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.67rem; font-variant-numeric: tabular-nums; }
.fee-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.fee-preset {
    padding: 2px 9px;
    border: 1px solid var(--card-border);
    border-radius: 11px;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.18s ease;
}
.fee-preset:hover { color: var(--text-main); border-color: rgba(var(--fg), 0.24); }
.fee-preset.on { color: #0f111a; border-color: var(--primary); background: var(--primary); font-weight: 600; }
.fee-note { margin: 0 0 12px; color: var(--text-muted); font-size: 0.72rem; line-height: 1.5; }
.fee-note i { color: var(--accent); margin-right: 4px; }
.fee-table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.fee-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 0.8rem; }
.fee-table th {
    padding: 8px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.9px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.fee-table th.num { text-align: right; }
.fee-table th .th-sub { display: block; margin-top: 1px; color: var(--primary); font-size: 0.62rem; font-weight: 600; letter-spacing: 0; }
.fee-table td { padding: 9px 8px; border-bottom: 1px solid rgba(var(--fg), 0.045); vertical-align: middle; }
.fee-table tr:last-child td { border-bottom: 0; }
.fee-table small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 0.65rem; line-height: 1.35; }
.fee-name a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; line-height: 1.3; text-decoration: none; }
.fee-name a:hover { color: var(--accent); }
.fee-name a .logo { width: 18px; height: 18px; margin: 0; }
.fee-name a i { color: var(--text-muted); font-size: 0.62rem; }
.fee-model { display: inline-flex; align-items: center; gap: 5px; color: var(--text-main); font-size: 0.75rem; line-height: 1.3; }
.fee-model i { color: var(--primary); font-size: 0.72rem; }
.fee-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-table td.total { min-width: 100px; }
.cost-total { font-weight: 700; }
.cost-total.good, .pct.good { color: #26e6a4; }
.cost-total.mid, .pct.mid { color: #ffbe3d; }
.cost-total.bad, .pct.bad { color: #ff8080; }
.cost-bar { height: 4px; margin-top: 4px; border-radius: 3px; background: rgba(var(--fg), 0.06); overflow: hidden; }
.cost-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #ffc107); transition: width 0.4s ease; }
.fee-table .tag { white-space: nowrap; }
.fee-table .empty { padding: 24px 0; text-align: center; }
.fee-callout {
    margin-top: 14px;
    padding: 11px 14px;
    border-left: 3px solid var(--primary);
    border-radius: 0 10px 10px 0;
    background: rgba(247, 147, 26, 0.07);
    color: var(--text-dim);
    font-size: 0.82rem;
    line-height: 1.6;
}
.fee-callout:empty { display: none; }
.fee-callout b { color: var(--text-main); font-weight: 600; }

/* ---------- takeaways ---------- */
.take-kicker i { font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq-item {
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(0, 204, 255, 0.15);
    border-radius: 12px;
    transition: border-color 0.2s ease;
}
.faq-item:hover { border-color: rgba(0, 204, 255, 0.32); }
.faq-question {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.faq-question i { margin-left: auto; flex: none; color: var(--text-muted); font-size: 0.78rem; transition: transform 0.22s ease, color 0.22s ease; }
.faq-item.open .faq-question i { transform: rotate(45deg); color: var(--accent); }
.faq-answer { display: none; padding: 0 18px 15px; color: var(--text-dim); font-size: 0.9rem; line-height: 1.7; }
.faq-item.open .faq-answer { display: block; }
.faq-answer strong { color: var(--text-main); font-weight: 600; }

/* ---------- tooltip extras ---------- */
.viz-tip { max-width: 370px; }
.viz-tip .tip-k { color: var(--text-muted); }
.viz-tip .tip-sep { margin: 6px 0; border-top: 1px solid rgba(var(--fg), 0.09); }
.viz-tip .tip-verdict { color: var(--text-main); font-style: italic; }
.viz-tip .tip-warn { color: #ffaa00; }
.viz-tip .tip-score { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.viz-tip .tip-score b { font-variant-numeric: tabular-nums; }
.viz-tip .tip-note { margin: -1px 0 3px; color: var(--text-muted); font-size: 0.72rem; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
    .score-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .board-head, .b-row { grid-template-columns: 32px minmax(190px, 1.6fr) 86px 94px 96px 82px 88px 74px 106px; gap: 8px; }
}

@media (max-width: 1080px) {
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-group.span2 { grid-column: span 1; }
    .filter-group.group-wide { grid-column: 1 / -1; }
    .filter-hint { flex-basis: 100%; margin-left: 0; }

    .board-card { padding: 14px 14px 8px; }
    /* Sort buttons become a wrapping chip bar; static labels drop away. */
    .board-head {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 0 12px;
        border-bottom: 1px solid var(--card-border);
    }
    .board-head > span { display: none; }
    .board-head .sort-btn { font-size: 0.65rem; padding: 3px 8px; }
    .b-row {
        grid-template-columns: 28px minmax(0, 1.45fr) minmax(0, 1fr) 86px;
        grid-template-areas:
            "rank name name score"
            "rank focus model reg"
            "rank entry fee lev";
        gap: 7px 14px;
        min-height: 102px;
        padding: 11px 7px;
        align-items: start;
        align-content: center;
    }
    .b-rank { grid-area: rank; align-self: start; padding-top: 3px; }
    .b-name { grid-area: name; }
    .b-score { grid-area: score; align-items: flex-end; padding-top: 1px; }
    .b-score .bar.score-bar { height: 16px; }
    .b-focus { grid-area: focus; }
    .b-model-cell { grid-area: model; }
    .b-entry { grid-area: entry; }
    .b-fee { grid-area: fee; }
    .b-lev { grid-area: lev; }
    .b-reg { grid-area: reg; }
    .b-cell .cell-label { display: block; }
    .b-cell { gap: 3px; }
    .b-reg .reg { white-space: normal; }
    .gh-meta { font-size: 0.64rem; }
    .fee-controls { grid-template-columns: 1fr; gap: 15px; }
}

@media (max-width: 768px) {
    .hdr-meta { gap: 5px 14px; font-size: 0.72rem; }
    .filter-panel { padding: 13px 13px 10px; }
    .filter-top { gap: 9px; }
    .search-wrap { width: 100%; min-width: 0; max-width: none; flex-basis: 100%; margin-left: 0; }
    .search-wrap input { width: 100%; max-width: none; }
    .filter-grid { grid-template-columns: 1fr; gap: 11px; }
    .filter-group .f-chip { font-size: 0.71rem; }
    .filter-foot { gap: 8px; }
    .filter-status { font-size: 0.72rem; }
    .filter-hint { display: none; }

    .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .score-how summary { align-items: flex-start; }
    .sh-copy small { font-size: 0.7rem; }

    .board-card { padding: 12px 10px 6px; }
    .b-row {
        grid-template-columns: 22px minmax(0, 1fr) 78px;
        grid-template-areas:
            "rank name score"
            "rank focus model"
            "rank entry fee"
            "rank lev reg";
        gap: 7px 11px;
        min-height: 124px;
        padding: 11px 5px;
    }
    .b-model { white-space: normal; }
    .b-tags { gap: 3px; }
    .tag { font-size: 0.58rem; padding: 2px 5px; }
    .b-provider { flex-wrap: wrap; }
    .b-provider .go { display: none; }
    .b-score { align-items: flex-start; }
    .b-score .bar.score-bar { width: 100%; }
    .score-tier { font-size: 0.54rem; }
    .cell-main { font-size: 0.73rem; }
    .cell-sub { font-size: 0.63rem; }
    .b-entry .entry, .b-fee .fee, .b-lev .lev { font-size: 0.68rem; padding: 2px 5px; }
    .b-reg .reg { font-size: 0.65rem; }
    .gh-meta { display: none; }
    .group-head { height: 32px; padding: 0 8px; font-size: 0.72rem; }

    .fee-card { padding: 14px 13px; }
    .fee-table { min-width: 720px; }
    .faq-question { padding: 13px 14px; font-size: 0.9rem; gap: 8px; }
    .faq-answer { padding: 0 14px 13px; font-size: 0.85rem; }
    .viz-tip { max-width: calc(100vw - 20px); }
}

@media (max-width: 640px) {
    .b-row {
        grid-template-areas:
            "rank name score"
            "rank focus reg"
            "rank entry fee"
            "rank lev lev";
        min-height: 148px;
    }
    .b-model-cell { display: none; }
    .b-cell .cell-sub { -webkit-line-clamp: 1; }
    .b-lev { align-items: flex-start; }
}

@media (max-width: 480px) {
    .score-tier { display: none; }
    .b-row { min-height: 132px; }
    .b-model { display: none; }
    .b-tags { margin-top: 3px; }
    .b-tags .tag:nth-child(n+4) { display: none; }
    .kpi-brand { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .score-how .sh-caret, .cost-bar span, .tag, .reset-btn, .fee-preset, .faq-question i { transition: none !important; }
}

/* ---------- bright skin ---------- */
:root[data-theme="light"] { --text-muted: #5f6578; }
:root[data-theme="light"] .score-how,
:root[data-theme="light"] .filter-panel { box-shadow: 0 1px 3px rgba(20, 24, 40, 0.06); }
:root[data-theme="light"] .score-part { background: rgba(var(--fg), 0.025); }
:root[data-theme="light"] .sh-icon { background: rgba(180, 95, 6, 0.09); border-color: rgba(180, 95, 6, 0.2); }
:root[data-theme="light"] .filter-group .f-chip.on { color: #1a1d29; }
:root[data-theme="light"] .reset-btn { background: rgba(180, 95, 6, 0.07); }
:root[data-theme="light"] .reset-btn:hover { background: rgba(180, 95, 6, 0.14); }
:root[data-theme="light"] .b-row:hover { background: rgba(20, 24, 40, 0.035); }
:root[data-theme="light"] .b-provider .guard { color: #047857; }
:root[data-theme="light"] .tag.good { color: #047857; border-color: rgba(4, 120, 87, 0.35); background: rgba(16, 185, 129, 0.06); }
:root[data-theme="light"] .tag.mid { color: #a16207; border-color: rgba(161, 98, 7, 0.35); background: rgba(245, 158, 11, 0.06); }
:root[data-theme="light"] .tag.bad { color: #b91c1c; border-color: rgba(185, 28, 28, 0.35); background: rgba(220, 38, 38, 0.05); }
:root[data-theme="light"] .tag.info { color: #0369a1; border-color: rgba(3, 105, 161, 0.32); background: rgba(2, 132, 199, 0.05); }
:root[data-theme="light"] .tag.type-social { color: #6d28d9; border-color: rgba(109, 40, 217, 0.28); background: rgba(139, 92, 246, 0.05); }
:root[data-theme="light"] .tag.type-broker { color: #0369a1; border-color: rgba(3, 105, 161, 0.28); background: rgba(14, 165, 233, 0.05); }
:root[data-theme="light"] .tag.type-crypto { color: #b45309; border-color: rgba(180, 83, 9, 0.28); background: rgba(247, 147, 26, 0.06); }
:root[data-theme="light"] .tag.type-signals { color: #a21caf; border-color: rgba(162, 28, 175, 0.28); background: rgba(217, 70, 239, 0.05); }
:root[data-theme="light"] .score-tier.good { color: #047857; background: rgba(16, 185, 129, 0.08); border-color: rgba(4, 120, 87, 0.28); }
:root[data-theme="light"] .score-tier.mid { color: #a16207; background: rgba(245, 158, 11, 0.08); border-color: rgba(161, 98, 7, 0.28); }
:root[data-theme="light"] .score-tier.bad { color: #b91c1c; background: rgba(220, 38, 38, 0.07); border-color: rgba(185, 28, 28, 0.28); }
:root[data-theme="light"] .entry.free, :root[data-theme="light"] .entry.low,
:root[data-theme="light"] .fee.free, :root[data-theme="light"] .fee.low,
:root[data-theme="light"] .lev.low { color: #047857; background: rgba(16, 185, 129, 0.09); }
:root[data-theme="light"] .entry.mid, :root[data-theme="light"] .fee.mid,
:root[data-theme="light"] .lev.mid { color: #a16207; background: rgba(245, 158, 11, 0.1); }
:root[data-theme="light"] .entry.high, :root[data-theme="light"] .fee.high,
:root[data-theme="light"] .lev.high, :root[data-theme="light"] .lev.extreme { color: #b91c1c; background: rgba(220, 38, 38, 0.08); }
:root[data-theme="light"] .reg.good { color: #047857; }
:root[data-theme="light"] .reg.mid { color: #a16207; }
:root[data-theme="light"] .reg.bad { color: #b91c1c; }
:root[data-theme="light"] .group-head { background: linear-gradient(90deg, rgba(180, 95, 6, 0.08), rgba(180, 95, 6, 0.015)); border-color: rgba(180, 95, 6, 0.2); }
:root[data-theme="light"] .gh-icon { background: rgba(180, 95, 6, 0.09); }
:root[data-theme="light"] #boardEmpty { background: rgba(var(--fg), 0.015); }
:root[data-theme="light"] .cost-bar { background: rgba(var(--fg), 0.08); }
:root[data-theme="light"] .fee-callout { background: rgba(180, 95, 6, 0.06); }
:root[data-theme="light"] .fee-preset.on { color: #fff; }
:root[data-theme="light"] .cost-total.good, :root[data-theme="light"] .pct.good { color: #047857; }
:root[data-theme="light"] .cost-total.mid, :root[data-theme="light"] .pct.mid { color: #a16207; }
:root[data-theme="light"] .cost-total.bad, :root[data-theme="light"] .pct.bad { color: #b91c1c; }
:root[data-theme="light"] footer .footer-content { opacity: 1; color: #5f6578; }
:root[data-theme="light"] footer .footer-btn { color: #0369a1; }
:root[data-theme="light"] .faq-item { border-color: rgba(2, 119, 181, 0.16); }
:root[data-theme="light"] .faq-item:hover { border-color: rgba(2, 119, 181, 0.34); }
:root[data-theme="light"] .viz-tip .tip-warn { color: #b45309; }