/* ===== PROFILE / TROPHY ROOM (scoped) ===== */
    .pp-body { padding: 0; background: var(--bg); }

    .pchip { font:400 10px "JetBrains Mono",monospace; letter-spacing:.08em; color:var(--text-2);
        background:var(--card); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px 11px; }
    .pchip.accent { color:var(--accent); border-color:var(--me-border); background:var(--me-bg); }

    .pti { width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
        border:1px solid var(--border-hi); flex-shrink:0; position:relative; background:var(--platinum); color:#2a2a36; }
    .pti::after { content:""; width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 2px currentColor; }
    .pti.sm { width:28px; height:28px; } .pti.sm::after { width:11px; height:11px; }

    .pbar { height:6px; background:var(--card-hi); border-radius:var(--r-pill); overflow:hidden; border:1px solid var(--border); }
    .pbar > div { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
    .pbar.plat > div { background:var(--platinum); }

    .seg { display:inline-flex; padding:3px; background:var(--card-hi); border:1px solid var(--border); border-radius:var(--r-pill); }
    .seg button { font:500 10.5px "JetBrains Mono",monospace; letter-spacing:.06em; padding:5px 12px;
        background:transparent; border:none; color:var(--text-3); border-radius:var(--r-pill); cursor:pointer; transition:.15s; }
    .seg button:hover { color:var(--text); } .seg button.on { background:var(--bg); color:var(--text); }
    .seg.seg-white, .plat-sort { background:#fff; }
    .seg.seg-white button.on, .plat-sort button.on { background:var(--text); color:var(--bg); }

    /* ===== section scaffold ===== */
    .sec { padding:0 30px; margin-top:26px; }
    .sec > .sechead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
    .sec > .sechead .lhs { display:flex; align-items:center; gap:10px; }
    .sec > .sechead h2 { font:700 18px "Inter",sans-serif; letter-spacing:-.015em; margin:0; }
    .sec > .sechead .kick { font:400 9.5px "JetBrains Mono",monospace; letter-spacing:.14em; color:var(--accent);
        background:var(--me-bg); border:1px solid var(--me-border); border-radius:var(--r-pill); padding:3px 9px; }
    .lib-controls { display:flex; align-items:center; gap:10px; }
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

    .pcard { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; }
    .pcard .head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
    .pcard .head h2 { font:700 15px "Inter",sans-serif; margin:0; letter-spacing:-.005em; }

    /* ===== HERO CARD ===== */
    .phero { padding:24px 30px 0; }
    .hero-card { position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border-hi);
        background:
            radial-gradient(120% 140% at 12% 0%, rgba(255,106,61,.16), transparent 45%),
            linear-gradient(180deg, var(--card-hi), var(--card)); }
    [data-theme="light"] .hero-card {
        background:
            radial-gradient(120% 140% at 12% 0%, rgba(212,86,31,.14), transparent 45%),
            linear-gradient(180deg, var(--card-hi), var(--card)); }
    .hero-top { position:relative; display:flex; align-items:center; gap:24px; padding:28px 30px 24px; }
    .hero-updated { position:absolute; top:12px; right:16px; z-index:2;
        display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
        font:500 10px "JetBrains Mono",monospace; letter-spacing:.03em; color:var(--text-4);
        opacity:.55; transition:opacity .15s; cursor:default; }
    .hero-updated:hover { opacity:.9; }
    .hero-updated .g { font-size:11px; line-height:1; opacity:.8; }
    .hero-av { position:relative; width:104px; height:104px; flex-shrink:0; }
    .hero-av .ring { position:absolute; inset:-4px; border-radius:50%;
        background:conic-gradient(var(--accent) 0% var(--p,0%), var(--card-hi) var(--p,0%) 100%);
        -webkit-mask:radial-gradient(transparent 52px,#000 53px); mask:radial-gradient(transparent 52px,#000 53px); }
    .hero-av .face { position:absolute; inset:5px; border-radius:50%; border:3px solid var(--bg); overflow:hidden;
        background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
        display:flex; align-items:center; justify-content:center; font:800 44px "Inter",sans-serif; }
    .hero-av .face img { width:100%; height:100%; object-fit:cover; }
    .hero-av .lvl { position:absolute; bottom:-2px; right:-2px; z-index:3; background:var(--text); color:var(--bg);
        font:700 10px "JetBrains Mono",monospace; letter-spacing:.04em; padding:3px 9px; border-radius:var(--r-pill); border:2px solid var(--bg); }
    .hero-id { flex:1; min-width:0; }
    .hero-id .nm { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .hero-id .nm h1 { font:800 32px "Inter",sans-serif; letter-spacing:-.02em; margin:0; line-height:1; }
    .hero-id .flag { font-size:20px; line-height:1; }
    .hero-id .rank { font:700 10px "JetBrains Mono",monospace; letter-spacing:.08em;
        color:var(--accent); background:var(--me-bg); border:1px solid var(--me-border); padding:4px 10px; border-radius:var(--r-pill); }
    .hero-xp { margin-top:14px; max-width:440px; }
    .hero-xp .bar { height:7px; border-radius:var(--r-pill); background:var(--card-hi); overflow:hidden; border:1px solid var(--border); }
    .hero-xp .bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
    .hero-xp .lab { display:flex; justify-content:space-between; margin-top:6px; font:400 9.5px "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--text-3); }

    .hero-dna { display:flex; align-items:stretch; border-top:1px solid var(--border); }
    .hero-dna .cell { flex:1; padding:18px 24px; border-right:1px solid var(--border); }
    .hero-dna .cell:last-child { border-right:none; }
    .hero-dna .cell b { display:block; font:800 26px "Inter",sans-serif; letter-spacing:-.02em; line-height:1; }
    .hero-dna .cell b.accent { color:var(--accent); }
    .hero-dna .cell .k { font:400 9px "JetBrains Mono",monospace; letter-spacing:.1em; color:var(--text-3); margin-top:8px; display:flex; align-items:center; gap:6px; }
    .tdot { width:9px; height:9px; border-radius:50%; display:inline-block; }
    .tdot.p { background:var(--platinum-ink); } .tdot.g { background:var(--gold); }
    .tdot.s { background:var(--silver-ink); } .tdot.b { background:var(--bronze); }

    /* ===== CABINET — витрина платин: единый ряд с горизонтальным скроллом и стрелками, без подложки ===== */
    .plat-rail { position:relative; }
    .shelf { display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
        padding:4px 2px 12px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--border-hi) transparent; }
    .shelf::-webkit-scrollbar { height:8px; }
    .shelf::-webkit-scrollbar-thumb { background:var(--border-hi); border-radius:8px; }
    .shelf::-webkit-scrollbar-track { background:transparent; }
    .rail-arrow { position:absolute; top:calc((158px + 12px) / 2); transform:translateY(-50%); z-index:6;
        width:40px; height:40px; border-radius:var(--r-pill); cursor:pointer;
        background:var(--card); border:1px solid var(--border-hi); color:var(--text-2);
        display:flex; align-items:center; justify-content:center; box-shadow:var(--vis-shadow); transition:.15s; }
    .rail-arrow:hover { background:var(--card-hi); color:var(--text); border-color:var(--accent); }
    .rail-arrow[hidden] { display:none; }
    .rail-arrow.prev { left:-12px; } .rail-arrow.next { right:-12px; }
    .cup { position:relative; flex:0 0 clamp(132px,38vw,158px); scroll-snap-align:start;
        display:flex; flex-direction:column; align-items:center; text-decoration:none; }
    .cup .cover { position:relative; width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
        border:2px solid var(--border-hi); box-shadow:var(--vis-shadow); background:#15121c; transition:border-color .18s; }
    .cup:hover .cover { border-color:var(--accent); }
    .cup .cover img { width:100%; height:100%; object-fit:cover; display:block; }
    .cup .cscrim { position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75)); }
    .cup .platbadge { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:2;
        display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
        font:400 9.5px "JetBrains Mono",monospace; letter-spacing:.06em; color:#fff;
        background:rgba(0,0,0,.5); border:1px solid rgba(230,230,240,.4); border-radius:var(--r-pill); padding:3px 10px; backdrop-filter:blur(4px); }
    /* Множитель на кубке: сколько платин группы версий схлопнуто в него (стек-игры, сборники). */
    .cup .cup-x { position:absolute; left:8px; top:8px; z-index:3;
        font:700 10px "Space Grotesk",sans-serif; letter-spacing:.02em; color:#fff;
        background:rgba(0,0,0,.55); border:1px solid rgba(230,230,240,.4); border-radius:var(--r-pill);
        padding:2px 7px; backdrop-filter:blur(4px); }
    .cup .gname { font:600 12.5px "Inter",sans-serif; text-align:center; margin-top:12px; line-height:1.2; color:var(--text); }
    .plat-empty { color:var(--text-3); font:400 13px "Inter",sans-serif; padding:20px 0; }

    /* corner ribbon on each platinum tile */
    .cup-ribbon { position:absolute; top:0; right:0; width:96px; height:96px; overflow:hidden; pointer-events:none; z-index:3; }
    .cup-ribbon .corner-ribbon { position:absolute; top:22px; right:-28px; width:120px; transform:rotate(45deg); text-align:center; border-radius:2px;
        padding:5px 0; font:800 8px "JetBrains Mono",monospace; letter-spacing:.12em;
        box-shadow:0 8px 18px -8px rgba(20,14,6,.4), inset 0 1px 0 rgba(255,255,255,.35); }
    .cup-ribbon .corner-ribbon.rb-plat {
        background:linear-gradient(120deg, #e2e5ee 0%, #f4f5fa 20%, #b9c0d4 40%, #f8f9fc 55%, #aab0c4 72%, #eef0f6 88%, #d0d4e2 100%);
        background-size:220% 100%; color:#20222b; text-shadow:0 1px 0 rgba(255,255,255,.5);
        animation:diamondDrift 12s ease-in-out infinite alternate; }
    .cup-ribbon .corner-ribbon.rb-100 {
        background:linear-gradient(120deg, #ffb088 0%, #ffcaa8 20%, #e8622a 40%, #ffd2b0 55%, #d8551e 72%, #ffb88c 88%, #e8702e 100%);
        background-size:220% 100%; color:#2a0f04; text-shadow:0 1px 0 rgba(255,255,255,.35);
        animation:diamondDrift 12s ease-in-out infinite alternate; }
    @keyframes diamondDrift { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
    .cup-ribbon .spark { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
        box-shadow:0 0 4px 1px rgba(90,100,140,.7); opacity:0; animation:twinkle 3s ease-in-out infinite; }
    .cup-ribbon .spark.s1{top:20%;left:16%;animation-delay:0s}
    .cup-ribbon .spark.s2{top:60%;left:30%;animation-delay:.7s;animation-duration:2.4s}
    .cup-ribbon .spark.s3{top:35%;left:50%;animation-delay:1.4s;animation-duration:3.4s}
    .cup-ribbon .spark.s4{top:70%;left:65%;animation-delay:.3s;animation-duration:2.8s}
    .cup-ribbon .spark.s5{top:25%;left:82%;animation-delay:1.9s;animation-duration:2.6s}
    .cup-ribbon .spark.s6{top:55%;left:92%;animation-delay:1s;animation-duration:3.2s}
    @keyframes twinkle { 0%,100%{opacity:0;transform:scale(.3)} 50%{opacity:1;transform:scale(1)} }
    .cup-ribbon.sm { width:72px; height:72px; }
    .cup-ribbon.sm .corner-ribbon { top:14px; right:-24px; width:92px; font-size:7px; padding:4px 0; }
    @media (prefers-reduced-motion: reduce) { .cup-ribbon .corner-ribbon{animation:none} .cup-ribbon .spark{animation:none;opacity:0} }

    /* ===== LIBRARY (список на подложке, 2 колонки + пагинация) ===== */
    .lib-panel { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:6px 22px; }
    .lib-list { display:grid; grid-template-columns:1fr 1fr; column-gap:34px; row-gap:0; }
    .lib-row { display:grid; grid-template-columns:52px 1fr 190px 150px; gap:16px; align-items:center;
        padding:11px 10px; border-bottom:1px solid var(--border); text-decoration:none; }
    .lib-row:hover { background:var(--card-hi); }
    .lib-list .lib-row:nth-last-child(-n+2) { border-bottom:none; }
    .lib-row .cv { width:52px; height:52px; border-radius:6px; overflow:hidden; background:#15121c; }
    .lib-row .cv img { width:100%; height:100%; object-fit:cover; display:block; }
    .lib-row .gn { font:600 14px "Inter",sans-serif; letter-spacing:-.005em; color:var(--text); }
    .lib-row .gsub { font:400 9.5px "JetBrains Mono",monospace; color:var(--text-3); letter-spacing:.06em; margin-top:4px; }
    .lib-row .lprog { display:flex; align-items:center; gap:10px; }
    .lib-row .lprog .pbar { flex:1; }
    .lib-row .lprog .pct { font:600 12px "JetBrains Mono",monospace; min-width:34px; text-align:right; color:var(--text-2); }
    .lib-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
        margin-top:2px; padding:14px 10px 6px; border-top:1px solid var(--border); }
    .lib-range { font:400 10.5px "JetBrains Mono",monospace; letter-spacing:.08em; color:var(--text-3); }
    .lib-pager { display:flex; align-items:center; gap:10px; }
    .lib-pages { font:600 11px "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--text-2); min-width:44px; text-align:center; }
    .lib-pg { width:32px; height:32px; border-radius:var(--r-pill); cursor:pointer;
        background:var(--card-hi); border:1px solid var(--border); color:var(--text-2);
        display:flex; align-items:center; justify-content:center; transition:.15s; }
    .lib-pg:hover:not(:disabled) { background:var(--card); color:var(--text); border-color:var(--accent); }
    .lib-pg:disabled { opacity:.35; cursor:default; }
    .lib-empty { color:var(--text-3); font:400 13px "Inter",sans-serif; padding:20px 10px; }
    /* пока едет новая страница библиотеки / полки — приглушаем старую */
    #lib-results, #shelf-results { transition:opacity .12s; }
    #lib-results.loading, #shelf-results.loading { opacity:.45; pointer-events:none; }

    /* ===== distribution ===== */
    .dist { display:flex; flex-direction:column; gap:13px; }
    .dist .drow { display:grid; grid-template-columns:96px 1fr 48px; gap:12px; align-items:center; }
    .dist .lbl { display:flex; align-items:center; gap:8px; font:400 10.5px "JetBrains Mono",monospace; color:var(--text-2); letter-spacing:.04em; }
    .dist .lbl .dot { width:12px; height:12px; border-radius:50%; border:1px solid var(--border-hi); }
    .dist .dot.platinum { background:var(--platinum-ink); } .dist .dot.gold { background:var(--gold); }
    .dist .dot.silver { background:var(--silver-ink); } .dist .dot.bronze { background:var(--bronze); }
    .dist .rbar { height:9px; background:var(--card-hi); border:1px solid var(--border); border-radius:var(--r-pill); overflow:hidden; }
    .dist .rbar > div { height:100%; }
    .dist .rbar > div.platinum { background:var(--platinum); } .dist .rbar > div.gold { background:var(--gold); }
    .dist .rbar > div.silver { background:var(--silver); } .dist .rbar > div.bronze { background:var(--bronze); }
    .dist .val { font:600 13px "JetBrains Mono",monospace; text-align:right; color:var(--text); }

    /* ===== genres ===== */
    .gbars { display:flex; flex-direction:column; gap:12px; }
    .gbar { display:grid; grid-template-columns:120px 1fr 38px; gap:12px; align-items:center; }
    .gbar .gl { font:500 12.5px "Inter",sans-serif; color:var(--text-2); }
    .gbar .gt { height:10px; background:var(--card-hi); border:1px solid var(--border); border-radius:var(--r-pill); overflow:hidden; }
    .gbar .gt > div { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:var(--r-pill); }
    .gbar .gv { font:600 12px "JetBrains Mono",monospace; text-align:right; color:var(--text); }

    /* ===== years ===== */
    /* высота у столбцов фиксированная (не 100%), а у самого графика — min-height: так контейнер сам
       подрастает на высоту горизонтальной полосы и ничего не обрезает; padding-bottom — дорожка
       под эту полосу, иначе она ложится поверх подписей годов */
    .years { display:flex; align-items:flex-end; gap:10px; min-height:178px; padding:20px 0 8px;
        overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--border-hi) transparent; }
    .years::-webkit-scrollbar { height:6px; }
    .years::-webkit-scrollbar-thumb { background:var(--border-hi); border-radius:8px; }
    .years::-webkit-scrollbar-track { background:transparent; }
    /* столбец растягивается, пока года влезают, но не жмётся уже 34px — иначе подписи налезают друг
       на друга и вылезают за карточку; на узком экране лишние года уезжают в скролл */
    .years .yr { flex:1 0 34px; display:flex; flex-direction:column; align-items:center; gap:8px; height:150px; justify-content:flex-end; }
    .years .yr .ycol { width:100%; max-width:42px; border-radius:6px 6px 0 0;
        background:linear-gradient(180deg,#fff,var(--platinum)); position:relative; transition:.2s; min-height:3px; }
    [data-theme="light"] .years .yr .ycol { background:linear-gradient(180deg,#9fa0b5,var(--platinum-ink)); border:1px solid var(--border-hi); }
    .years .yr:hover .ycol { filter:brightness(1.12); }
    .years .yr .ycol .v { position:absolute; top:-18px; left:50%; transform:translateX(-50%);
        font:600 10px "JetBrains Mono",monospace; color:var(--text-2); }
    .years .yr .yl { font:400 10px "JetBrains Mono",monospace; color:var(--text-3); letter-spacing:.04em; }
    .years .empty, .gbars .empty { color:var(--text-3); font:400 13px "Inter",sans-serif; padding:10px 0; }
    .years .yr .ycol.gold { background:linear-gradient(180deg,#ffe08a,var(--gold)); }
    .years .yr .ycol.silver { background:linear-gradient(180deg,#e6e8ec,var(--silver)); }
    [data-theme="light"] .years .yr .ycol.silver { background:linear-gradient(180deg,#c2c6cd,var(--silver-ink)); border:1px solid var(--border-hi); }
    .years .yr .ycol.bronze { background:linear-gradient(180deg,#e0a468,var(--bronze)); }

    /* ===== weekly count grid ===== */
    .rgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
    .pcard.has-rgrid { display:flex; flex-direction:column; }
    .pcard.has-rgrid .rgrid { margin-top:auto; margin-bottom:auto; }
    .rg-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
        min-height:88px; padding:14px 6px; background:var(--card-hi); border:1px solid var(--border); border-radius:var(--r-sm); }
    .rg-cell b { font:800 24px "Inter",sans-serif; line-height:1; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
    .rg-cell b.platinum { color:var(--platinum-ink); } .rg-cell b.gold { color:var(--gold); }
    .rg-cell b.silver { color:var(--silver-ink); } .rg-cell b.bronze { color:var(--bronze); }
    .rg-cell small { display:flex; align-items:center; gap:5px; font:400 9.5px "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--text-3); }
    .rg-cell small .d { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .rg-cell small .d.platinum { background:var(--platinum-ink); } .rg-cell small .d.gold { background:var(--gold); }
    .rg-cell small .d.silver { background:var(--silver-ink); } .rg-cell small .d.bronze { background:var(--bronze); }

    /* ===== metal-dot tally (library list) ===== */
    .ltally { display:flex; gap:10px; font:400 10.5px "JetBrains Mono",monospace; color:var(--text-3); }
    .ltally span { display:inline-flex; align-items:center; gap:4px; }
    .ltally .d { width:8px; height:8px; border-radius:50%; }
    /* платиновый кружок: стальной --platinum-ink, читаемый и на светлой теме (а не почти-белый --platinum) */
    .ltally .d.platinum { background:var(--platinum-ink); }
    .ltally .d.gold { background:var(--gold); }
    .ltally .d.silver { background:var(--silver); }
    .ltally .d.bronze { background:var(--bronze); }
    .years-type button { text-transform:uppercase; }

    /* ===== compare (visitor) ===== */
    .cmp-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--border); }
    .cmp-who { display:flex; align-items:center; gap:12px; min-width:0; }
    .cmp-who.b { text-align:right; }
    .cav { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
        overflow:hidden; color:#fff; font:800 19px "Inter",sans-serif; background:linear-gradient(135deg,#4a7bc8,#2a4b88); }
    .cav img { width:100%; height:100%; object-fit:cover; display:block; }
    .cav.them { background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
    .cwho-t { min-width:0; }
    .cwho-t .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cwho-t .nm { font:700 17px "Inter",sans-serif; letter-spacing:-.01em; }
    .cwho-t .lv { font:400 9.5px "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--text-3); margin-top:4px; }
    .cmp-vs { font:700 11px "JetBrains Mono",monospace; letter-spacing:.14em; color:var(--text-4);
        border:1px solid var(--border); border-radius:var(--r-pill); padding:5px 12px; flex-shrink:0; }
    .cmp-rows { display:flex; flex-direction:column; gap:14px; padding:20px 0 0; }
    .cmp-row { display:grid; grid-template-columns:56px 1fr auto 1fr 56px; gap:12px; align-items:center; }
    .cmp-row .va { text-align:right; } .cmp-row .vb { text-align:left; }
    .cmp-row .va,.cmp-row .vb { font:800 17px "Inter",sans-serif; letter-spacing:-.01em; color:var(--text-3); }
    .cmp-row .va.win,.cmp-row .vb.win { color:var(--text); }
    .cmp-row .clbl { font:400 9px "JetBrains Mono",monospace; letter-spacing:.08em; color:var(--text-3); white-space:nowrap; text-align:center; min-width:76px; }
    .cmp-row .track { height:8px; background:var(--card-hi); border-radius:var(--r-pill); overflow:hidden; display:flex; justify-content:flex-end; }
    .cmp-row .track.r { justify-content:flex-start; }
    .cmp-row .ba,.cmp-row .bb { display:block; height:100%; border-radius:var(--r-pill); background:#3a5a88; }
    .cmp-row .bb { background:var(--border-hi); }
    .cmp-row .bb.win { background:linear-gradient(90deg,var(--accent),var(--accent-2)); }

    @media (max-width:1100px){
        .grid-2{grid-template-columns:minmax(0,1fr)}
        .hero-dna{flex-wrap:wrap} .hero-dna .cell{flex:1 1 50%; border-bottom:1px solid var(--border)}
        .hero-dna .cell:nth-child(2n){border-right:none}
        .lib-list{grid-template-columns:1fr}
        .lib-list .lib-row:nth-last-child(-n+2){border-bottom:1px solid var(--border)}
        .lib-list .lib-row:last-child{border-bottom:none}
    }
    @media (max-width:820px){
        .sec,.phero{padding-left:16px;padding-right:16px}
        .hero-top{flex-direction:column; align-items:flex-start; gap:16px; padding:22px}
        .hero-id .nm h2{font-size:26px} .hero-dna .cell b{font-size:22px}
        .lib-row{grid-template-columns:48px 1fr 120px; gap:10px} .lib-row .ltally{display:none}
        .cmp-row{grid-template-columns:44px 1fr auto 1fr 44px}
    }
    @media (max-width:520px){
        .cmp-head{gap:8px}
        .cmp-who{gap:8px; flex:1 1 0}
        .cav{width:40px; height:40px; font-size:16px}
        .cwho-t .nm{font-size:14px}
        .cmp-vs{padding:4px 8px; font-size:10px}
        .cmp-row .clbl{min-width:56px}
        .pcard .head{flex-wrap:wrap}
        .pcard .head .seg{flex-wrap:wrap; justify-content:flex-start}
        .pcard .head .seg button{padding:5px 10px}
        .years-type{display:flex; width:100%}
        .years-type button{flex:1; text-align:center}
        .years{gap:8px}
        .lib-controls{width:100%}
        .plat-sort,.lib-sort{display:flex; width:100%}
        .plat-sort button,.lib-sort button{flex:1; text-align:center} }