:root{
    --bg:#0b1016;
    --card:#121923;
    --card-hover:#17212d;
    --accent:#ff8a3d;
    --text:#f4f7fb;
    --muted:#8d99aa;
    --border:rgba(255,255,255,.05);
    --nft-tag:#c0392b;
}

/* =========================
   NFT CARD
========================= */

.nft-card{
    background:rgba(35,14,14,.7) !important;
    border-color:rgba(255,255,255,.05) !important;
    cursor:default;
}

.nft-card > *{
    pointer-events:none;
}

.nft-card .accordion-box{
    pointer-events:auto;
}

.nft-card .mobile-bottom-row{
    pointer-events:auto;
}

/* Subtitles can still be requested on their own even though the
   full recording is NFT and locked from selection. */
.nft-card .subtitles-tag-toggle{
    pointer-events:auto;
}

.nft-card:hover{
    background:rgba(48,18,18,.8) !important;
    border-color:rgba(255,255,255,.08) !important;
}

/* Placeholder exactly matches .show-checkbox */
.show-checkbox-placeholder{
    display:inline-block;
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:8px;
    border:2px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.02);
    flex-shrink:0;
    margin:0;
    top:0;
    position:relative;
    flex-shrink:0;
}

.show-checkbox-placeholder::before{
    content:'✕';
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    color:rgba(200,100,100,.45);
    line-height:1;
}

.nft-tag{
    background:rgba(140,25,25,.7) !important;
    color:rgba(255,190,190,.85) !important;
    font-weight:700;
    letter-spacing:.5px;
    white-space:nowrap;
    height:38px;
    padding:0 20px;
    font-size:.85rem;
    position:relative;
    top:3px;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0 24px 48px;
    background:var(--bg);
    color:var(--text);
    font-family:
    "Fraunces",
    serif;
    -webkit-font-smoothing:antialiased;
}

.container{
    max-width:1120px;
    margin:auto;
    margin-top: 30px;
}

header{
    margin-bottom:28px;
}

header h1{
    margin:0 0 10px;
    font-size:3.2rem;
    font-weight:400;
    font-family:
    "Barrio",
    system-ui;
    color:white;
}

header p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
    max-width:1120px;
    font-size:1rem;
    font-weight:300;
}

.controls{
    margin-bottom:28px;
}

/* =========================
   INFO SECTIONS
========================= */

.info-sections{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:36px;
    border-radius:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
}

.info-accordion{
    border:none;
    border-left:3px solid rgba(255,138,61,.2);
    border-radius:0;
    background:rgba(255,255,255,.02);
    overflow:hidden;
    transition:border-color .2s ease, background .2s ease;
}

.info-accordion + .info-accordion{
    border-top:1px solid rgba(255,255,255,.05);
}

.info-accordion[open]{
    border-left-color:var(--accent);
    background:rgba(255,138,61,.05);
}

.info-accordion-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    cursor:pointer;
    list-style:none;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:rgba(244,247,251,.6);
    gap:10px;
    transition:color .15s ease, background .15s ease;
    user-select:none;
}

.info-accordion-summary::-webkit-details-marker{ display:none; }

.info-accordion-summary > span{
    display:flex;
    align-items:center;
    gap:10px;
}

.info-accordion-summary > span i{
    color:var(--accent);
    font-size:.82rem;
}

.info-accordion:hover .info-accordion-summary,
.info-accordion[open] .info-accordion-summary{
    color:var(--text);
}

.info-chevron{
    font-size:.65rem;
    transition:transform .2s ease;
    flex-shrink:0;
    color:var(--accent);
    opacity:.5;
}

.info-accordion[open] .info-chevron{
    transform:rotate(180deg);
    opacity:1;
}

.info-accordion-body{
    padding:4px 18px 18px 22px;
    color:var(--muted);
    font-size:.88rem;
    line-height:1.75;
    font-weight:300;
    border-top:1px solid rgba(255,255,255,.05);
}

.info-accordion-body p{
    margin:0 0 10px;
}

.info-accordion-body strong{
    color:var(--text);
    font-weight:600;
}

.info-accordion-body a{
    color:var(--accent);
    text-decoration:none;
    transition:.15s ease;
}

.info-accordion-body a:hover{
    text-decoration:underline;
    text-underline-offset:3px;
}

.wants-sheet-list a{
    color:var(--muted);
    text-decoration:underline;
    text-underline-offset:3px;
}

.wants-sheet-list a:hover{
    color:var(--text);
}

.text-accent{
    color:var(--accent);
}

.info-accordion-body a.missing-smalls-link{
    color:var(--muted);
    text-decoration:underline;
    text-underline-offset:3px;
}

.info-accordion-body a.missing-smalls-link:hover{
    color:var(--text);
}

.info-contact-row{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin:10px 0 14px;
    font-size:.86rem;
}

.info-contact-row i{
    margin-right:4px;
    color:var(--accent);
    opacity:.8;
}

.info-contact-icon{
    width:14px;
    height:14px;

    margin-right:4px;

    border-radius:4px;

    vertical-align:-2px;

    object-fit:cover;
}

.fa-discord{
    color:var(--accent) !important;
    opacity:.8;
}

.info-list{
    margin:8px 0 0;
    padding-left:18px;
}

.info-list li{
    margin-bottom:6px;
}

.wants-list li{
    font-weight:400;
    color:var(--muted);
}
.wants-list li strong{
    color:var(--text);
    font-weight:600;
}

.wants-list li.wants-sheet-nft,
.wants-list li.wants-sheet-nft strong{
    color:var(--nft-tag);
}

.wants-list li.wants-sheet-nft a{
    color:var(--nft-tag);
}

.wants-list li.wants-sheet-nft a:hover{
    color:#e05a4a;
}

.info-note{
    margin-top:12px !important;
    font-style:italic;
    font-size:.82rem;
}

/* Giftable-only toggle in filter footer */
.filter-giftable-footer{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
}

/* =========================
   MINI NAV (category + links)
========================= */

.mini-nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
    padding-left:20px;
}

.mini-nav-btn{
    appearance:none;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--muted);
    font-family:"Fraunces",serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    padding:5px 14px;
    border-radius:999px;
    cursor:pointer;
    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.mini-nav-btn:hover{
    color:var(--text);
    border-color:rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
}

.mini-nav-btn.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#1a1006;
}

.mini-nav-divider{
    width:1px;
    height:18px;
    background:rgba(255,255,255,.1);
    margin:0 4px;
    flex-shrink:0;
}

.mini-nav-link{
    color:var(--muted);
    font-family:"Fraunces",serif;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.3px;
    text-transform:uppercase;
    text-decoration:none;
    padding:5px 12px;
    border-radius:999px;
    border:1px solid transparent;
    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.mini-nav-link:hover{
    color:var(--accent);
    border-color:rgba(255,138,61,.2);
    background:rgba(255,138,61,.05);
}

.search-bar{
    width:100%;
    height:56px;
    padding:0 20px;
    background:#121922;
    border:1px solid var(--border);
    border-radius:16px;
    color:white;
    font-size:1rem;
    outline:none;
    transition:.15s ease;
    font-family:
    "Fraunces",
    serif;
}

.search-bar:focus{
    border-color:
    rgba(255,138,61,.25);
}

/* =========================
   FILTER PANEL
========================= */

.search-row{
    display:flex;
    gap:12px;
    align-items:stretch;
}

.search-row .search-bar{
    flex:1;
    min-width:0;
}

.filter-toggle{
    flex-shrink:0;

    display:flex;
    align-items:center;
    gap:10px;

    height:56px;
    padding:0 20px;

    background:#121922;
    border:1px solid var(--border);
    border-radius:16px;

    color:var(--muted);

    font-family:"Fraunces", serif;
    font-size:.92rem;
    font-weight:600;

    cursor:pointer;

    transition:.15s ease;
}

.filter-toggle i{
    font-size:.85rem;
    transition:transform .2s ease, color .15s ease;
}

.filter-toggle:hover{
    border-color:rgba(255,138,61,.2);
    color:#dfe7f1;
}

.filter-toggle.open{
    border-color:rgba(255,138,61,.3);
    color:var(--accent);
}

.filter-toggle.open i:first-child{
    color:var(--accent);
}

.filter-toggle.has-active-filters{
    color:var(--accent);
    border-color:rgba(255,138,61,.25);
}

.filter-count{
    display:none;
    align-items:center;
    justify-content:center;

    min-width:20px;
    height:20px;
    padding:0 6px;

    border-radius:999px;

    background:var(--accent);
    color:#1a1006;

    font-size:.72rem;
    font-weight:700;
}

.filter-count:not(:empty){
    display:flex;
}

.filter-panel{
    max-height:0;
    overflow:hidden;
    opacity:0;

    transition:
    max-height .3s ease,
    opacity .2s ease,
    margin-top .3s ease;
}

.filter-panel.open{
    max-height:min(75vh, 720px);
    overflow-y:auto;
    opacity:1;
    margin-top:14px;
}

.filter-panel-inner{
    background:#121922;
    border:1px solid var(--border);
    border-radius:18px;
    padding:22px 24px;
}

.filter-groups{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

.filter-group-label{
    margin:0 0 12px;

    color:var(--accent);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.filter-options{
    display:flex;
    flex-direction:column;
    gap:10px;

    max-height:180px;
    overflow-y:auto;

    padding-right:4px;
}

.filter-search{
    position:relative;

    margin-bottom:10px;
}

.filter-search i{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);

    font-size:.7rem;
    color:var(--muted);

    pointer-events:none;
}

.filter-search-input{
    width:100%;
    height:34px;

    padding:0 12px 0 30px;

    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:10px;

    color:var(--text);

    font-family:"Fraunces", serif;
    font-size:.8rem;

    outline:none;

    transition:
    border-color .15s ease,
    background .15s ease;
}

.filter-search-input::placeholder{
    color:var(--muted);
}

.filter-search-input:focus{
    border-color:rgba(255,138,61,.3);
    background:rgba(255,255,255,.05);
}

.filter-search-empty{
    display:none;

    margin:6px 0 0;

    color:var(--muted);

    font-size:.78rem;
    font-style:italic;
}

.filter-options::-webkit-scrollbar{
    width:5px;
}

.filter-options::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.08);
    border-radius:999px;
}

.filter-option{
    display:flex;
    align-items:center;
    gap:10px;

    cursor:pointer;

    color:#d7e1ec;
    font-size:.86rem;
    font-weight:400;
}

.filter-option input{
    appearance:none;
    -webkit-appearance:none;

    width:18px;
    height:18px;

    flex-shrink:0;

    border-radius:6px;
    border:2px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.03);

    cursor:pointer;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    transition:
    background .18s ease,
    border-color .18s ease;
}

.filter-option input::after{
    content:'';

    width:5px;
    height:9px;

    margin-bottom:1px;

    border:solid white;
    border-width:0 2px 2px 0;

    transform:rotate(45deg) scale(.45);
    opacity:0;

    transition:
    transform .16s cubic-bezier(.2,.9,.25,1.25),
    opacity .12s ease;
}

.filter-option input:checked{
    background:var(--accent);
    border-color:var(--accent);
}

.filter-option input:checked::after{
    opacity:1;
    transform:rotate(45deg) scale(1);
}

.filter-option:hover{
    color:var(--text);
}

.filter-option span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.filter-panel-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;

    margin-top:18px;
    padding-top:16px;

    border-top:1px solid var(--border);
}

.filter-footer-toggles{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:22px;
}

.filter-giftable-footer{
    font-size:.82rem;
    font-weight:600;
    color:var(--text);
    gap:10px;
}

/* Sliding toggle switch for the footer-only filters
   (Giftable only / Video only / Audio only) */
.filter-giftable-footer input{
    appearance:none;
    -webkit-appearance:none;

    width:40px;
    height:22px;

    flex-shrink:0;

    border-radius:999px;
    border:none;
    background:rgba(255,255,255,.16);

    position:relative;
    cursor:pointer;

    transition:background .25s ease;
}

.filter-giftable-footer input::after{
    content:'';
    position:absolute;
    top:2px;
    left:2px;

    width:18px;
    height:18px;

    border:none;
    border-radius:50%;
    background:#fff;

    transform:none;
    opacity:1;

    box-shadow:0 1px 3px rgba(0,0,0,.35);

    transition:transform .25s cubic-bezier(.4,0,.2,1);
}

.filter-giftable-footer input:checked{
    background:var(--accent);
    border-color:transparent;
}

.filter-giftable-footer input:checked::after{
    transform:translateX(18px);
    opacity:1;
}

.filter-clear{
    background:none;
    border:none;

    color:var(--muted);

    font-family:"Fraunces", serif;
    font-size:.84rem;
    font-weight:600;

    cursor:pointer;

    transition:.15s ease;
}

.filter-clear:hover{
    color:#ff7b7b;
}

/* =========================
   SUBTITLES PANEL (separate from the main filters)
   — uses its own blue accent, matching the subtitles tag color,
   scoped locally so it doesn't affect the site-wide orange accent.
========================= */

.subtitles-panel{
    --sub-accent:#79a8ff;
    --sub-accent-rgb:84,145,255;

    background:rgba(var(--sub-accent-rgb),.07);
    border:1px solid rgba(var(--sub-accent-rgb),.22);
    border-left:3px solid rgba(var(--sub-accent-rgb),.45);
    border-right:3px solid rgba(var(--sub-accent-rgb),.45);
    border-radius:18px;

    margin:18px 0;

    overflow:hidden;

    transition:border-color .2s ease, background .2s ease;
}

.subtitles-panel:has(#subtitlesWantToggle:checked){
    border-color:rgba(var(--sub-accent-rgb),.35);
}

.subtitles-panel-header{
    display:flex;
    align-items:center;
    gap:16px;

    padding:18px 22px;
}

.subtitles-panel-header > i{
    font-size:1.3rem;
    color:var(--sub-accent);
    opacity:.85;
    flex-shrink:0;
}

.subtitles-panel-copy{
    flex:1;
    min-width:0;
}

.subtitles-panel-title{
    margin:0 0 3px;
    font-size:.98rem;
    font-weight:700;
    color:var(--text);
}

.subtitles-panel-sub{
    margin:0;
    font-size:.8rem;
    color:var(--muted);
}

/* Reuse the same sliding-switch look as the footer-only filters */
.toggle-switch-wrap{
    flex-shrink:0;
    cursor:pointer;
}

.toggle-switch-wrap input{
    appearance:none;
    -webkit-appearance:none;

    width:44px;
    height:24px;

    border-radius:999px;
    border:none;
    background:rgba(255,255,255,.16);

    position:relative;
    cursor:pointer;

    transition:background .25s ease;
}

.toggle-switch-wrap input::after{
    content:'';
    position:absolute;
    top:2px;
    left:2px;

    width:20px;
    height:20px;

    border-radius:50%;
    background:#fff;

    box-shadow:0 1px 3px rgba(0,0,0,.35);

    transition:transform .25s cubic-bezier(.4,0,.2,1);
}

.toggle-switch-wrap input:checked{
    background:var(--accent);
}

.subtitles-panel .toggle-switch-wrap input:checked{
    background:var(--sub-accent);
}

.toggle-switch-wrap input:checked::after{
    transform:translateX(20px);
}

.subtitles-lang-wrap{
    max-height:0;
    opacity:0;

    padding:0 22px;
    overflow:hidden;

    transition:
    max-height .3s ease,
    opacity .2s ease,
    padding .3s ease;
}

.subtitles-panel:has(#subtitlesWantToggle:checked) .subtitles-lang-wrap{
    max-height:900px;
    opacity:1;

    padding:0 22px 22px;
}

.subtitles-lang-options{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    padding-top:14px;

    border-top:1px solid var(--border);
}

.subtitles-lang-option{
    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.02);

    color:#d7e1ec;
    font-size:.82rem;
    font-weight:600;

    cursor:pointer;

    transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.subtitles-lang-option:hover{
    border-color:rgba(var(--sub-accent-rgb),.3);
}

.subtitles-lang-option input{
    appearance:none;
    -webkit-appearance:none;
    position:absolute;

    width:0;
    height:0;

    opacity:0;
}

.subtitles-lang-option:has(input:checked){
    background:rgba(var(--sub-accent-rgb),.14);
    border-color:rgba(var(--sub-accent-rgb),.4);
    color:var(--sub-accent);
}

.subtitles-lang-all{
    border-style:dashed;
    font-weight:700;
}

/* While "All languages" is picked, every individual language pill
   lights up the same blue — they're all included under "all" —
   without actually being ticked. Picking one specific language
   drops "All languages" and this effect goes away. */
.subtitles-lang-options:has(#subtitle-lang-all:checked) .subtitles-lang-dynamic{
    background:rgba(var(--sub-accent-rgb),.14);
    border-color:rgba(var(--sub-accent-rgb),.4);
    color:var(--sub-accent);
}

.subtitles-lang-option .lang-flag{
    width:1.3em;
    height:1em;
    border-radius:2px;
    box-shadow:0 0 0 1px rgba(255,255,255,.12);
    flex-shrink:0;
}

.subtitles-panel-note{
    margin:14px 0 0;
    padding:14px 16px;

    background:rgba(var(--sub-accent-rgb),.06);
    border:1px solid rgba(var(--sub-accent-rgb),.18);
    border-radius:12px;

    color:var(--sub-accent);
    opacity:.9;
    font-size:.78rem;
    line-height:1.55;
    white-space:normal;
    text-align:left;
}

.subtitles-panel-note-mark{
    margin-right:3px;
    font-weight:700;
}

.subtitles-panel-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;

    margin-top:16px;
    padding-top:16px;

    border-top:1px solid var(--border);
}

.subtitles-show-btn{
    background:transparent;
    border:1.5px solid var(--sub-accent);
    border-radius:12px;

    padding:9.5px 22px;

    color:var(--sub-accent);
    font-family:"Fraunces", serif;
    font-size:.86rem;
    font-weight:700;
    letter-spacing:.2px;

    cursor:pointer;

    transition:
    background .45s cubic-bezier(.4,0,.2,1),
    color .45s cubic-bezier(.4,0,.2,1),
    border-color .45s cubic-bezier(.4,0,.2,1),
    opacity .3s ease;
}

.subtitles-show-btn:hover{
    background:rgba(var(--sub-accent-rgb),.12);
}

.subtitles-show-btn.active{
    background:var(--sub-accent);
    border-color:var(--sub-accent);
    color:#0c1830;
}

.subtitles-show-btn.active:hover{
    opacity:.88;
    background:var(--sub-accent);
}

.subtitles-reset-btn{
    background:none;
    border:none;

    color:var(--muted);
    font-size:.82rem;
    font-weight:600;

    cursor:pointer;

    transition:.15s ease;
}

.subtitles-reset-btn:hover{
    color:#ff7b7b;
}

.section-title{
    margin:42px 0 18px;
    font-size:1.1rem;
    font-weight:600;
    color:#dfe7f1;
}

.list-container{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.list-container + .list-container{
    margin-top:16px;
}

/* =========================
   TITLE GROUPS
========================= */

.title-group{
    border:1px solid var(--border);
    border-radius:18px;
    background:#0e141d;
    overflow:hidden;
    transition:.15s ease;
}

.title-group[open]{
    background:transparent;
    border-color:rgba(255,255,255,.06);
}

.title-group-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    padding:18px 22px;
    transition:.15s ease;
}

.title-group-summary::-webkit-details-marker{
    display:none;
}

.title-group-summary:hover{
    background:rgba(255,255,255,.02);
}

.title-group-left{
    display:flex;
    align-items:baseline;
    gap:10px;
    min-width:0;
}

.title-group-name{
    margin:0;
    font-family:"Bebas Neue", system-ui;
    font-weight:400;
    font-size:2.1rem;
    letter-spacing:.9px;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.title-group:hover .title-group-name{
    color: var(--accent);
    transition: color .3s ease;
}

.title-group-right{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:12px;
}

.title-group-count{
    color:var(--muted);
    font-family:"Fraunces", serif;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.2px;
    white-space:nowrap;
}

.title-group-chevron{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:8px;
    background:rgba(255,255,255,.03);
    color:var(--muted);
    font-size:.72rem;
    transition:transform .2s ease, background .15s ease, color .15s ease;
}

.title-group-summary:hover .title-group-chevron{
    color:var(--accent);
    background:rgba(255,138,61,.08);
}

.title-group[open] .title-group-chevron{
    transform:rotate(180deg);
}

.title-group-body{
    padding:0 16px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.title-group-body .show-card{
    padding:14px 16px;
    border-radius:14px;
}

.title-group-body .show-title{
    font-size:1.3rem;
}

.title-group-body .show-checkbox{
    width:24px;
    height:24px;
    border-radius:7px;
}

.title-group-body .show-checkbox-placeholder{
    width:24px;
    height:24px;
    min-width:24px;
    border-radius:7px;
}

.title-group-body .show-checkbox-placeholder::before{
    font-size:10px;
}

.title-group-body .show-checkbox::after{
    width:6px;
    height:11px;
}

.show-card{
    background:#121923;
    border:1px solid var(--border);
    border-radius:20px;
    padding:20px 22px;
    transition:.15s ease;
}

.show-card:hover{
    background:#17212d;
    border-color:
    rgba(255,255,255,.08);
}


.title-block{
    flex:1;
    min-width:0;
}

.title-line{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:30px;
}

.show-checkbox{

    appearance:none;

    -webkit-appearance:none;

    width:30px;
    height:30px;

    border-radius:8px;

    border:2px solid rgba(255,255,255,.18);

    background:
    rgba(255,255,255,.03);

    cursor:pointer;

    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    transition:
    background .18s ease,
    border-color .18s ease,
    transform .14s ease,
    box-shadow .18s ease;

    flex-shrink:0;

    margin:0;

    top:0;
}

.show-checkbox:hover{

    border-color:
    rgba(255,138,61,.5);

    background:
    rgba(255,138,61,.06);
}

.show-checkbox:active{

    transform:scale(.9);
}

.show-checkbox::after{

    content:'';

    width:7px;
    height:13px;

    margin-bottom:2px;

    border:
    solid white;

    border-width:
    0 3px 3px 0;

    transform:
    rotate(45deg)
    scale(.45);

    opacity:0;

    transition:
    transform .16s cubic-bezier(.2,.9,.25,1.25),
    opacity .12s ease;

    transform-origin:center;
}

.show-checkbox:checked{

    background:var(--accent);

    border-color:var(--accent);

    box-shadow:
    0 0 0 5px
    rgba(255,138,61,.16);
}

.show-checkbox:checked::after{

    opacity:1;

    transform:
    rotate(45deg)
    scale(1);
}

.show-title{
    margin:0;
    line-height:1;
    font-size:2.15rem;
    font-weight:700;
    letter-spacing:-.5px;
    margin-left: 5px;
}

.badge-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-left:15px;
    margin-left:auto;
    justify-content:flex-end;
}

.tag{
    display:flex;
    align-items:center;
    justify-content:center;

    height:32px;

    padding:0 14px;

    border-radius:999px;

    background:
    rgba(255,138,61,.08);

    border:1px solid
    rgba(255,138,61,.2);

    color:var(--accent);

    font-size:.73rem;

    font-weight:700;

    letter-spacing:.4px;
}

.tag.danger{
    color:#ff7272;

    border-color:
    rgba(255,114,114,.18);

    background:
    rgba(255,114,114,.08);
}

.show-id{
    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    height:34px;

    padding:0 13px;

    border-radius:12px;

    background:
    rgba(255,255,255,.03);

    border:1px solid
    var(--border);

    color:var(--muted);

    font-size:.78rem;

    font-weight:600;

    white-space:nowrap;
}

.meta-pills{
    display:flex;
    flex-wrap:wrap;

    gap:26px;

    margin-top:12px;
    margin-left:6px;

    padding-bottom:12px;

    position:relative;
}

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:10px;
    position:relative;
    padding-bottom:0;
}

.card-top::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:1px;
    background:rgba(255,255,255,.08);
    pointer-events:none;
}

.pill{
    display:flex;
    align-items:center;
    gap:10px;

    color:var(--muted);

    font-size:1.05rem;

    background:none;
    border:none;
}

.pill i{
    color:var(--muted);
    font-size:.9rem;
    opacity:.9;
}

.extra-info-banner{
    display:flex;
    align-items:flex-start;
    gap:10px;

    margin:14px 0;
    padding:12px 16px;

    background:rgba(255,138,61,.08);
    border:1px solid rgba(255,138,61,.22);
    border-radius:12px;
}

.extra-info-banner i{
    color:var(--accent);
    font-size:.95rem;
    margin-top:2px;
    flex-shrink:0;
}

.extra-info-banner p{
    margin:0;
    color:#edf2f8;
    font-size:.9rem;
    font-weight:300;
    line-height:1.45;

    word-break:break-word;
    overflow-wrap:anywhere;
}

.info-grid{
    display:grid;

    grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 3fr);

    gap:0 32px;

    align-items:start;
}

.info-left{
    display:flex;
    flex-direction:column;

    margin-top:-10px;

    padding-left:10px;

    min-width:0;
}

.info-row{
    display:grid;

    grid-template-columns:
    110px
    1fr;

    align-items:center;

    padding:18px 0;

    position:relative;
}

.info-row::after{
    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    height:1px;

    background:
    rgba(255,255,255,.05);
}

.info-row:last-child::after{
    display:none;
}

.info-row span{
    color:var(--accent);

    font-size:.92rem;

    font-weight:700;
}

.info-row p{
    margin:0;

    color:#edf2f8;

    font-size:.94rem;

    font-weight:300;
}

.info-right{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    min-width:0;
}

.accordion-box{
    border:1px solid var(--border);

    border-radius:16px;

    overflow:hidden;

    background:
    rgba(255,255,255,.02);
}

.accordion-box summary{
    list-style:none;

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

    padding:15px 18px;

    font-size:.92rem;

    font-weight:600;

    color:#d7e1ec;

    transition:.15s ease;
}

.accordion-box summary:hover{
    background:
    rgba(255,255,255,.015);
}

.accordion-box summary::-webkit-details-marker{
    display:none;
}

.accordion-box summary i{
    transition:.2s ease;
    font-size:.78rem;
}

.accordion-box[open] summary i{
    transform:rotate(180deg);
}

.accordion-content{
    padding:
    0 18px 18px;

    color:#c9d3df;

    line-height:1.8;

    font-size:.9rem;

    font-weight:300;
}

.header-link{
    color:var(--accent);
    text-decoration:none;
    transition:.15s ease;
    font-weight:400;
}

.header-link:hover{
    text-decoration:underline;
    text-underline-offset:3px;
}

.mobile-bottom-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-top:10px;
}

.copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:auto;
    height:auto;

    padding:4px;

    border:none;
    background:none;

    color:var(--muted);

    cursor:pointer;

    font-size:.95rem;

    transition:.15s ease;
    flex-shrink:0;
}

.copy-btn:hover{
    color:var(--accent);
}

.copy-btn-done{
    color:#4caf7d !important;
}

.encora-link{
    display:flex;

    align-items:center;

    padding-right:4px;

    color:var(--accent);

    text-decoration:none;

    font-size:.83rem;

    font-weight:600;

    transition:.15s ease;
}

.encora-link:hover{
    text-decoration:underline;
    text-underline-offset:4px;
}

.no-results{
    text-align:center;
    padding:60px 20px;
    color:var(--muted);
}

.error-box{
    padding:28px;

    border-radius:18px;

    border:1px solid
    rgba(255,80,80,.15);

    background:
    rgba(255,80,80,.05);

    color:#ff8f8f;
}

.mobile-id{
    display:none;
    margin-left:auto;
}
.tag{

    display:flex;

    align-items:center;

    justify-content:center;

    height:30px;

    padding:0 14px;

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.4px;

    border:1px solid transparent;

    text-transform:uppercase;
}

/* SUBTITLES */

.subtitles-tag{

    background:
    rgba(84,145,255,.10);

    border-color:
    rgba(84,145,255,.22);

    color:#79a8ff;

    gap:6px;

    height:38px;

    padding:0 20px;

    font-size:.85rem;

    letter-spacing:.6px;

    position:relative;
    top:3px;
}

.lang-flag-pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.lang-flag-pill + .lang-flag-pill{
    margin-left:6px;
}

.subtitles-tag .lang-flag{
    width:1.2em;
    height:.9em;
    border-radius:2px;
    box-shadow:0 0 0 1px rgba(255,255,255,.15);
    flex-shrink:0;
}

/* Clickable subtitles badge — lets the person request just the
   subtitles for a title without requesting the whole recording. */
button.subtitles-tag-toggle{
    appearance:none;
    -webkit-appearance:none;

    font:inherit;
    letter-spacing:.6px;
    text-transform:uppercase;

    cursor:pointer;

    transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    opacity .15s ease;
}

button.subtitles-tag-toggle:hover{
    background:rgba(84,145,255,.2);
    border-color:rgba(84,145,255,.45);
}

/* Selected — subtitles-only added to the request/trade. A soft,
   muted blue fill — enough to stand out from the neutral badge
   without overpowering the flag icons inside it. */
.subtitles-tag.subtitles-tag-selected{
    background:rgba(84,145,255,.38);
    border-color:rgba(84,145,255,.65);
    color:#eaf1ff;
}

.subtitles-tag.subtitles-tag-selected:hover{
    background:rgba(84,145,255,.46);
    border-color:rgba(84,145,255,.7);
}

/* Included automatically because the full recording is selected —
   not clickable, shown dimmed so it reads as "already covered". */
button.subtitles-tag-included{
    cursor:default;
    opacity:.55;
}

button.subtitles-tag-included:hover{
    background:rgba(84,145,255,.10);
    border-color:rgba(84,145,255,.22);
}

/* UNGIFTABLE */

.ungiftable-tag{

    background:
    rgba(255,92,92,.10);

    border-color:
    rgba(255,92,92,.20);

    color:#ff7b7b;

    height:38px;

    padding:0 20px;

    font-size:.85rem;

    letter-spacing:.6px;

    position:relative;
    top:3px;
}

/* MISSING / HIGHLIGHTS — same style as SUBTITLES */

.missing-tag{

    background:
    rgba(84,145,255,.10);

    border-color:
    rgba(84,145,255,.22);

    color:#79a8ff;

    height:38px;

    padding:0 20px;

    font-size:.85rem;

    letter-spacing:.6px;

    position:relative;
    top:3px;
}
/* =========================
   TOP NAV
========================= */

.top-nav{

    position:relative;

    z-index:100;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:72px;

    width:100vw;

    margin-left:calc(50% - 50vw);

    height:48px;

    padding:0 24px;

    background:
    #0f1516;

    backdrop-filter:
    blur(14px);

    border-bottom:
    2px solid
    rgba(255, 139, 61, 0.349);
}

.nav-link{

    appearance:none;

    border:none;

    background:none;

    padding:0;

    cursor:pointer;

    position:relative;

    display:flex;

    align-items:center;

    color:
    rgba(255, 255, 255, 0.671);

    font-family:
    "Fraunces",
    serif;

    font-size:1.34rem;

    font-weight:900;

    letter-spacing:.55px;

    line-height:1;

    text-transform:uppercase;

    transition:
    color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

.nav-link:hover{

    color:
    var(--accent);
}

.nav-link.active{

    color:
    var(--accent);
}


/* divider */

/* Změna z ::before na ::after a z right na left */
.nav-link:not(:last-child)::after{
    content:'';
    position:absolute;
    left: calc(100% + 35px); /* Spočítá pozici přesně uprostřed mezery (72px / 2 = 36px) */
    top:50%;
    transform:translateY(-50%);
    width:2px;
    height:22px;
    background:rgba(255, 139, 61, 0.349);
}

.nav-separator{
    width:1px;
    height:22px;
    background:rgba(255,139,61,.35);
    margin:0 12px;
    flex-shrink:0;
}

.nav-anchor{
    text-decoration:none;
}

/* ==========================================================================
   NEKOMPROMISNÍ MOBILNÍ OPRAVA (PC verze zůstává absolutně netknutá)
   ========================================================================== */
@media(max-width:860px){

    body{
        padding:0 16px 34px;
    }

    .container{
        margin-top:34px;
    }

    header h1{
        font-size:2.4rem;
    }

    .filter-toggle{
        width:56px;
        padding:0;
        justify-content:center;
        position:relative;
        border-radius:16px;
    }

    .filter-toggle span:not(.filter-count){
        display:none;
    }

    .filter-count{
        position:absolute;
        top:-6px;
        right:-6px;
    }

    .filter-search-input{
        height:40px;
        font-size:.88rem;
    }

    .filter-clear{
        margin-left:auto;
    }

    .filter-panel-inner{
        padding:18px 16px;
        overflow:visible;
    }

    .subtitles-panel-header{
        padding:16px;
        align-items:center;
    }

    .subtitles-panel-header > i{
        margin-top:0;
        position:relative;
        top:-1px;
    }

    .subtitles-lang-wrap{
        padding:0 16px;
    }

    .subtitles-panel:has(#subtitlesWantToggle:checked) .subtitles-lang-wrap{
        padding:0 16px 18px;
    }

    .subtitles-panel-actions{
        flex-wrap:wrap;
    }

    .subtitles-panel-note{
        white-space:normal;
    }


    .filter-groups{
        grid-template-columns:1fr;
        gap:20px;
    }

    .filter-options{
        max-height:none;
        overflow-y:visible;
    }

    /* Categories with a search box stay collapsed on mobile until
       the person actually taps into search for that category — too
       many checkboxes at once is unreadable on a small screen.
       While collapsed, keep already-picked options visible so the
       person can still see (and untick) their active selection. */
    .filter-group-searchable .filter-options{
        display:flex;
    }

    .filter-group-searchable:not(.filter-group-expanded) .filter-options .filter-option{
        display:none;
    }

    .filter-group-searchable:not(.filter-group-expanded) .filter-options .filter-option:has(input:checked){
        display:flex;
    }

    .filter-group-searchable.filter-group-expanded .filter-options{
        display:flex;
    }

    .filter-panel.open{
        max-height:80vh;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .show-card{
        padding:18px;
    }

    .show-title{
        font-size:1.7rem;
    }

    .ungiftable-tag,
    .missing-tag,
    .subtitles-tag{
        height:32px;

        padding:0 15px;

        font-size:.74rem;

        letter-spacing:.4px;

        top:1px;
    }

    .title-group-summary{
        padding:14px 16px;
    }

    .title-group-name{
        font-size:1.5rem;
    }

    .title-group-count{
        font-size:.7rem;
    }

    .title-group-body{
        padding:0 12px 12px;
    }

    .title-group-body .show-title{
        font-size:1.15rem;
    }

    .info-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    /* Brute-force sjednocení šířky všech kontejnerů na mobilu */
    .card-top, 
    .title-block, 
    .title-line, 
    .meta-pills, 
    .info-left, 
    .info-right, 
    .info-row,
    .mobile-bottom-row,
    .extra-info-banner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .extra-info-banner{
        padding:10px 12px;
        font-size:.85rem;
    }

    /* Vynucení zarovnání textu do krajů */
    .card-top {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .title-line {
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* Přepsání linky pod pilulkami */
    .meta-pills {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Oprava vnitřního řádku (Production, Date...) */
    .info-left {
        padding-left: 0 !important;
    }

    .info-row {
        grid-template-columns: 110px 1fr !important;
        padding: 9px 0 !important;
    }

    /* Narovnání linek pod řádky */
    .info-row::after {
        width: 100% !important;
        left: 0 !important;
    }

    .desktop-id{
        display:none;
    }

    .mobile-id{
        display:flex;
        margin-right: -4px;
    }

    .mobile-bottom-row{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:12px;
    }
    .info-right {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
        
        /* TENTO ŘÁDEK POSUNE CELÝ BLOK CAST A NOTES VYŠŠÍ */
        margin-top: -15px !important; 
    }
    

    /* ----------------------------------------------------------------------
       RUČNÍ ROZŠÍŘENÍ CAST A NOTES DO STRAN
       Pokud chcete boxy ještě širší/užší, stačí změnit width a margin-left.
       ---------------------------------------------------------------------- */
    .accordion-box {
        width: 103% !important;      /* Roztáhne box přes původní 100% okraj */
        max-width: 104% !important;
        margin-left: -1.5% !important;  /* Posune box symetricky doleva, aby přečníval na obou stranách stejně */
    }
}
@media(max-width:860px){

    .top-nav{

        gap:26px;

        height:42px;

        padding:0 18px;

        overflow-x:auto;

        justify-content:center;

        scrollbar-width:none;

        -ms-overflow-style:none;
    }

    .top-nav::-webkit-scrollbar{

        display:none;
    }

    .nav-link{

        flex-shrink:0;

        font-size:1rem;

        letter-spacing:.35px;
    }

    /* Oprava pro střední mobily/tablety */
    .nav-link:not(:last-child)::after {
        left: calc(100% + 13px); /* Polovina z mobilního gapu 26px */
        height: 16px !important;
        width: 1px !important;
    }
    
    
}

@media(max-width:560px){

    .top-nav{

        gap:18px;

        height:40px;

        padding:0 12px;
    }

    .nav-link{

        font-size:.88rem;

        font-weight:800;
    }

    /* Oprava pro nejmenší mobily */
    .nav-link:not(:last-child)::after {
        left: calc(100% + 9px); /* Polovina z nejmenšího gapu 18px */
        height: 14px !important;
    }
    
}

/* =========================
   TRADE BAR (floating CTA)
========================= */

.trade-bar{
    position:fixed;
    left:50%;
    bottom:28px;
    transform:translate(-50%,140%);
    z-index:1100;

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 22px 14px 18px;

    background:var(--accent);
    color:#1a1006;

    border:none;
    border-radius:999px;

    font-family:"Fraunces", serif;
    font-size:.95rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:
    0 8px 20px rgba(255,138,61,.16),
    0 2px 8px rgba(0,0,0,.3);

    transition:
    transform .3s cubic-bezier(.2,.9,.25,1.1),
    box-shadow .2s ease;
}

.trade-bar.visible{
    transform:translate(-50%,0);
}

.trade-bar:hover{
    box-shadow:
    0 10px 24px rgba(255,138,61,.2),
    0 2px 8px rgba(0,0,0,.35);
}

.trade-bar-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;

    width:30px;
    height:30px;

    border-radius:50%;

    background:rgba(26,16,6,.12);

    font-size:.78rem;
}

.trade-bar-count{
    white-space:nowrap;
    opacity:.85;
    font-weight:600;
}

.trade-bar-cta{
    display:flex;
    align-items:center;
    gap:8px;

    padding-left:14px;

    border-left:1px solid rgba(26,16,6,.18);

    white-space:nowrap;
}

.trade-bar-cta i{
    font-size:.75rem;
    transition:transform .15s ease;
}

.trade-bar:hover .trade-bar-cta i{
    transform:translateX(3px);
}

/* =========================
   REDDIT WELCOME OVERLAY
========================= */

.reddit-overlay{
    position:fixed;
    inset:0;
    z-index:1300;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(5,8,12,.72);
    backdrop-filter:blur(6px);

    opacity:0;
    visibility:hidden;

    transition:
    opacity .2s ease,
    visibility .2s ease;
}

.reddit-overlay.visible{
    opacity:1;
    visibility:visible;
}

.reddit-overlay-modal{
    width:100%;
    max-width:440px;

    text-align:left;

    background:var(--card);
    border:1px solid rgba(255,255,255,.08);
    border-top:3px solid var(--accent);
    border-radius:20px;

    padding:30px 30px 26px;

    box-shadow:0 30px 70px rgba(0,0,0,.5);

    transform:translateY(16px) scale(.97);

    transition:transform .25s cubic-bezier(.2,.9,.25,1.1);
}

.reddit-overlay.visible .reddit-overlay-modal{
    transform:translateY(0) scale(1);
}

.reddit-overlay-modal h2{
    margin:0 0 16px;

    font-family:"Barrio", system-ui;
    font-weight:400;
    font-size:1.85rem;
    color:white;
}

.reddit-overlay-modal p{
    margin:0 0 14px;

    color:var(--muted);
    line-height:1.65;
    font-size:.92rem;
    font-weight:300;
}

.reddit-overlay-modal p:last-of-type{
    margin-bottom:24px;
}

.reddit-overlay-signoff{
    color:var(--muted) !important;
    font-size:.88rem;
    margin-bottom:22px !important;
}

.reddit-overlay-modal strong{
    color:var(--text);
    font-weight:600;
}

.reddit-overlay-btn{
    width:100%;

    margin-top:2px;

    padding:14px;

    background:var(--accent);
    color:#1a1006;

    border:none;
    border-radius:14px;

    text-align:center;

    font-family:"Fraunces", serif;
    font-size:.95rem;
    font-weight:700;

    cursor:pointer;

    transition:.15s ease;
}

.reddit-overlay-btn:hover{
    filter:brightness(1.08);
}

/* =========================
   TRADE MODAL
========================= */

.trade-modal-overlay{
    position:fixed;
    inset:0;
    z-index:1200;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(5,8,12,.72);
    backdrop-filter:blur(6px);

    opacity:0;
    visibility:hidden;

    transition:
    opacity .2s ease,
    visibility .2s ease;
}

.trade-modal-overlay.visible{
    opacity:1;
    visibility:visible;
}

body.modal-open{
    overflow:hidden;
}

.trade-modal{
    width:100%;
    max-width:520px;
    max-height:88vh;

    overflow-y:auto;

    background:var(--card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;

    padding:30px 30px 26px;

    box-shadow:0 30px 70px rgba(0,0,0,.5);

    transform:translateY(16px) scale(.97);

    transition:transform .25s cubic-bezier(.2,.9,.25,1.1);
}

.trade-modal-overlay.visible .trade-modal{
    transform:translateY(0) scale(1);
}

.trade-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    margin-bottom:10px;
}

.trade-modal-header h2{
    margin:0;
    font-family:"Barrio", system-ui;
    font-weight:400;
    font-size:2.1rem;
    color:white;
}

.trade-modal-close{
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    padding:0;
    line-height:1;

    border-radius:10px;

    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    color:var(--muted);

    cursor:pointer;

    transition:.15s ease;
}

.trade-modal-close i{
    display:block;
}

.trade-modal-close:hover{
    color:var(--accent);
    background:rgba(255,138,61,.08);
    border-color:rgba(255,138,61,.2);
}

.trade-modal-sub{
    margin:0 0 22px;

    color:var(--muted);
    line-height:1.6;
    font-size:.92rem;
    font-weight:300;
}

.trade-selected-list{
    display:flex;
    flex-direction:column;
    gap:8px;

    margin-bottom:24px;
}

.trade-selected-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:12px 14px;

    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:12px;
}

.trade-selected-label{
    min-width:0;

    color:#dfe7f1;
    font-size:.85rem;
    font-weight:600;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Subtitles-only rows — blue background makes it immediately clear
   these entries are just subtitles, not full recordings. */
.trade-selected-row-subtitles{
    background:rgba(84,145,255,.14);
    border-color:rgba(84,145,255,.35);
}

.trade-selected-sub-icon{
    margin-right:6px;
    color:#79a8ff;
}

.trade-selected-sub-note{
    margin-left:6px;

    color:#79a8ff;
    font-weight:700;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.trade-selected-remove{
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;

    padding:0;
    line-height:1;

    border-radius:8px;

    background:none;
    border:none;
    color:var(--muted);

    cursor:pointer;

    transition:.15s ease;
}

.trade-selected-remove i{
    display:block;
}

.trade-selected-remove:hover{
    color:#ff7b7b;
    background:rgba(255,92,92,.1);
}

.trade-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.trade-field{
    display:flex;
    flex-direction:column;
    gap:8px;

    font-size:.85rem;
    font-weight:700;
    color:var(--accent);

    overflow:hidden;

    max-height:120px;
    opacity:1;

    transition:
    max-height .25s ease,
    opacity .2s ease,
    margin .25s ease;
}

.trade-field.trade-field-hidden{
    max-height:0;
    opacity:0;
    margin-top:-18px;
    pointer-events:none;
}

.trade-field input,
.trade-field textarea{
    font-family:"Fraunces", serif;
    font-size:.92rem;
    font-weight:300;
    color:var(--text);

    background:#121922;
    border:1px solid var(--border);
    border-radius:12px;

    padding:12px 14px;

    outline:none;

    resize:vertical;

    transition:border-color .15s ease;
}

.trade-field input::placeholder,
.trade-field textarea::placeholder{
    color:var(--muted);
}

.trade-field input.trade-input-invalid{
    border-color:rgba(255,92,92,.45);
}

.trade-field-error{
    display:none;

    color:#ff7b7b;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.1px;
}

.trade-field-error:not(:empty){
    display:block;
}

.trade-field input:focus,
.trade-field textarea:focus{
    border-color:rgba(255,138,61,.35);
}

.trade-checkbox-field{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:.88rem;
    font-weight:400;
    color:#dfe7f1;
}

.trade-checkbox-field input{
    appearance:none;
    -webkit-appearance:none;

    width:20px;
    height:20px;

    border-radius:6px;
    border:2px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.03);

    cursor:pointer;
    position:relative;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;

    transition:
    background .18s ease,
    border-color .18s ease;
}

.trade-checkbox-field input::after{
    content:'';

    width:6px;
    height:11px;

    margin-bottom:2px;

    border:solid white;
    border-width:0 2px 2px 0;

    transform:rotate(45deg) scale(.45);
    opacity:0;

    transition:
    transform .16s cubic-bezier(.2,.9,.25,1.25),
    opacity .12s ease;
}

.trade-checkbox-field input:checked{
    background:var(--accent);
    border-color:var(--accent);
}

.trade-checkbox-field input:checked::after{
    opacity:1;
    transform:rotate(45deg) scale(1);
}

.trade-warning{
    padding:11px 14px;
    border-radius:12px;
    font-size:.85rem;
    font-weight:600;
    color:#ff7b7b;
    background:rgba(255,92,92,.08);
    border:1px solid rgba(255,92,92,.2);
}

.trade-warning-gap{
    margin-top:14px;
}

#tradeLargeTradeWarning{
    margin-bottom:14px;
}

.trade-field-note{
    color:var(--muted);
    font-size:.8rem;
    font-weight:400;
    margin-top:4px;
}

.trade-form-status{
    display:none;

    padding:11px 14px;

    border-radius:12px;

    font-size:.85rem;
    font-weight:600;

    text-align:center;
}

.trade-form-status:not(:empty){
    display:block;
}

.trade-form-status-info{
    color:var(--muted);
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
}

.trade-form-status-success{
    color:#7fd99a;
    background:rgba(127,217,154,.08);
    border:1px solid rgba(127,217,154,.2);
}

.trade-form-status-error{
    color:#ff7b7b;
    background:rgba(255,92,92,.08);
    border:1px solid rgba(255,92,92,.2);
}

.trade-submit{
    margin-top:4px;

    padding:15px;

    background:var(--accent);
    color:#1a1006;

    border:none;
    border-radius:14px;

    font-family:"Fraunces", serif;
    font-size:.98rem;
    font-weight:700;

    cursor:pointer;

    transition:.15s ease;
}

.trade-submit:hover{
    filter:brightness(1.08);
}

.trade-submit:disabled{
    opacity:.6;
    cursor:not-allowed;
    filter:none;
}

@media(max-width:560px){

    .trade-bar{
        left:16px;
        right:16px;
        bottom:18px;
        transform:translateY(140%);

        width:calc(100% - 32px);
        gap:10px;
        padding:12px 16px 12px 14px;
        justify-content:space-between;
    }

    .trade-bar.visible{
        transform:translateY(0);
    }

    /* The count text is the only variable-length part of the bar —
       let it shrink and truncate with an ellipsis so it can never
       push the icon or the "Request a trade" label off screen. */
    .trade-bar-count{
        flex:1 1 auto;
        min-width:0;

        overflow:hidden;
        text-overflow:ellipsis;
    }

    .trade-bar-cta{
        flex-shrink:0;
    }

    .trade-modal{
        padding:24px 20px 22px;
        border-radius:20px;
    }

    .trade-modal-header h2{
        font-size:1.4rem;
    }
}