:root{
      --bg:#f4f7ff;
      --panel:#ffffff;
      --panel2:#f7f9ff;
      --stroke:#d7deef;
      --ink:#111827;
      --muted:#5b647a;
      --brand:#2563eb;
      --brand2:#7c3aed;
      --ok:#16a34a;
      --warn:#d97706;
      --danger:#dc2626;
      --shadow: 0 10px 24px rgba(17,24,39,.10);
      --radius: 10px;
      --radius2: 12px;
    }

    *{box-sizing:border-box}

    /* Background contínuo */
    html{min-height:100%}
    html,body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background-color: var(--bg);
      color: var(--ink);
    }
    body{
      min-height:100vh;
      background:
        radial-gradient(1100px 650px at 10% 0%, rgba(37,99,235,.10), transparent 60%),
        radial-gradient(900px 600px at 90% 10%, rgba(124,58,237,.10), transparent 60%),
        radial-gradient(900px 600px at 50% 100%, rgba(22,163,74,.08), transparent 60%),
        var(--bg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }

    .wrap{max-width:1200px; margin:0 auto; padding:22px 18px 40px}

    header{
      display:flex;
      gap:14px;
      align-items:flex-end;
      justify-content:space-between;
      margin-bottom:16px;
    }

    .brand{display:flex; flex-direction:column; gap:6px;}
    .brand-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
    .brand h1{margin:0; font-size:20px; letter-spacing:.2px}
    .badge{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(17,24,39,.12); background: rgba(17,24,39,.03); color: rgba(17,24,39,.85); font-size:12px; line-height:1; white-space:nowrap}
    html[data-theme="dark"] .badge{border:1px solid rgba(226,232,240,.14); background: rgba(226,232,240,.04); color: rgba(229,231,235,.92)}
    .brand p{margin:0; color:var(--muted); font-size:13px; line-height:1.35}
    .brand .contact{font-size:12px; color:rgba(91,100,122,.85)}
    .brand .contact a{color:inherit; text-decoration:underline; text-underline-offset:2px}
    .brand .contact a:hover{color:var(--ink)}

    .top-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}

    .search{
      width:min(520px, 100%);
      display:flex;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      background: linear-gradient(180deg, rgba(17,24,39,.02), rgba(17,24,39,.00));
      border:1px solid rgba(17,24,39,.12);
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(0,0,0,.12);
    }
    .search input{width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px;}
    .search input::placeholder{color:rgba(91,100,122,.65)}

    .stack{display:flex; flex-direction:column; gap:14px; margin-top:14px;}
    .playerPanel{width:100%}
    .libraryPanel{width:100%}

    @media (max-width: 980px){
      header{flex-direction:column; align-items:stretch}
      .top-actions{justify-content:flex-start}
    }

    @media (max-width: 760px){
      header{padding-left:60px;}
    }

    .panel{
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
      border: 1px solid rgba(17,24,39,.12);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .panel-hd{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 14px 12px;
      border-bottom:1px solid rgba(17,24,39,.08);
    }
    .panel-hd h2{margin:0; font-size:14px; letter-spacing:.2px}
    .panel-hd small{color:var(--muted)}

    /* Biblioteca */
    .library{padding: 14px; display:flex; flex-direction:column; gap: 14px;}

    .cat{
      border: 1px solid rgba(17,24,39,.10);
      border-radius: var(--radius2);
      background: rgba(255,255,255,.60);
      overflow:hidden;
    }
    .cat-hd{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      padding: 12px 12px;
      cursor: pointer;
      user-select: none;
      background: linear-gradient(180deg, rgba(17,24,39,.03), rgba(17,24,39,.00));
      border-bottom: 1px solid rgba(17,24,39,.08);
    }
    .cat-hd h3{margin:0; font-size:13px; letter-spacing:.2px}
    .cat-hd small{color:var(--muted); font-size:12px}

    .cat-hd .chev{display:inline-flex; align-items:center; justify-content:center; width:18px; color:var(--muted); transition: transform .12s ease;}
    .cat.collapsed .cat-hd .chev{transform: rotate(-90deg)}
    .cat.collapsed .cat-grid{display:none}

    .cat-grid{padding: 12px; display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px;}
    @media (max-width: 520px){ .cat-grid{grid-template-columns: 1fr} }

    .card{
      position: relative;
      display:flex;
      gap: 12px;
      padding: 12px;
      padding-bottom: 28px;
      border-radius: var(--radius);
      border: 1px solid rgba(17,24,39,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,249,255,.90));
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
      cursor:pointer;
    }
    .card:hover{transform: translateY(-2px); border-color: rgba(37,99,235,.35); box-shadow: 0 16px 30px rgba(17,24,39,.12)}
    .card.active{border-color: rgba(37,99,235,.55); box-shadow: 0 18px 34px rgba(17,24,39,.16)}

    .thumb{
      width: 54px;
      height: 72px;
      border-radius: 8px;
      border: 1px solid rgba(17,24,39,.12);
      background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.08));
      overflow:hidden;
      flex: 0 0 auto;
    }
    .thumb img{width:100%; height:100%; object-fit:cover; display:block}
    .thumb .ph{
      width:100%; height:100%; display:flex;
      align-items:center; justify-content:center;
      font-weight:700; font-size:12px;
      color: rgba(17,24,39,.70);
      text-transform: uppercase;
      letter-spacing:.4px;
    }

    .meta{min-width:0; flex:1; padding-right: 46px}
    .meta .title{
      font-weight:700;
      font-size:13px;
      line-height:1.2;
      margin:0 0 6px 0;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient: vertical;
    }
    .meta .sub{margin:0; color:var(--muted); font-size:12px; line-height:1.25}

    .wbar{height:7px; width:100%; border-radius: 7px; background: rgba(17,24,39,.06); border: 1px solid rgba(17,24,39,.10); overflow:hidden;}
    /* Progress do tile ocupando o width disponível do card */
    .card .wbar{position:absolute; left:12px; right:12px; bottom:10px; margin:0;}
    .wfill{height:100%; width:0%; background: linear-gradient(90deg, rgba(22,163,74,.70), rgba(37,99,235,.70));}

    /* Player */
    .player{padding: 14px; display:flex; flex-direction:column; gap: 12px; min-height: 0; overflow: hidden;}

    .now{display:flex; gap:12px; align-items:flex-start;}
    .now .cover{width: 92px; height: 122px; border-radius: 10px; border:1px solid rgba(17,24,39,.12); overflow:hidden; background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.08)); flex: 0 0 auto;}
    .now .cover img{width:100%; height:100%; object-fit:cover; display:block}

    .now .info{min-width:0; flex:1}
    .now .info h3{margin:0 0 6px; font-size:14px; letter-spacing:.2px}
    .now .info p{margin:0; color:var(--muted); font-size:12px; line-height:1.35}

    .controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border:1px solid rgba(17,24,39,.12);
      background: rgba(17,24,39,.03);
      color: var(--ink);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 12px;
      cursor:pointer;
      user-select:none;
      transition: transform .10s ease, border-color .12s ease;
    }
    .btn:hover{transform: translateY(-1px); border-color: rgba(37,99,235,.28)}
    .btn.primary{background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(124,58,237,.10)); border-color: rgba(37,99,235,.28);}
    .btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
    #dlStatusVis{margin-top:-4px; color:var(--muted); font-size:12px; padding:0 2px; min-height: 16px;}

    .bar{display:flex; flex-direction:column; gap:6px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(17,24,39,.12); background: rgba(255,255,255,.70);}
    .time{display:flex; justify-content:space-between; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;}
    input[type="range"]{width: 100%; accent-color: var(--brand);}

    .plist{border-top:1px solid rgba(17,24,39,.10); padding-top:10px; min-height:0; display:flex; flex-direction:column; gap:10px;}
    .plist-hd{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px; border-radius: 10px; border: 1px solid rgba(17,24,39,.12); background: rgba(17,24,39,.02); cursor:pointer; user-select:none;}
    .plist-hd .lbl{font-weight:700; font-size:12px}
    .plist-hd small{color:var(--muted); font-size:12px}
    .plist-hd .chev{display:inline-flex; width:18px; justify-content:center; color:var(--muted); transition: transform .12s ease;}
    .plist.collapsed .plist-hd .chev{transform: rotate(-90deg)}
    .plist.collapsed .playlist{display:none}

    .playlist{flex: 1 1 auto; min-height: 0; max-height: 340px; overflow-y: auto; padding-right: 6px;}
    @media (max-width: 980px){ .player{overflow: visible} .playlist{max-height:none; overflow: visible} }

    .track{display:flex; gap:10px; align-items:center; padding:10px 10px; border-radius: 10px; cursor:pointer; border:1px solid transparent;}
    .track:hover{background: rgba(17,24,39,.03); border-color: rgba(17,24,39,.10)}
    .track.active{background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.22)}

    .track .idx{width: 26px; height: 26px; border-radius: 6px; display:flex; align-items:center; justify-content:center; font-size: 11px; color: rgba(17,24,39,.80); background: rgba(17,24,39,.04); border:1px solid rgba(17,24,39,.12); flex: 0 0 auto;}
    .track .tmeta{min-width:0; flex:1}
    .track .tmeta .name{margin:0; font-size:12px; line-height:1.2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    .track .tmeta .dur{margin:3px 0 0; color:var(--muted); font-size:11px}

    .track .pbar{margin-top:6px; height:6px; border-radius: 6px; background: rgba(17,24,39,.06); border: 1px solid rgba(17,24,39,.10); overflow:hidden;}
    .track .pfill{height:100%; width:0%; background: linear-gradient(90deg, rgba(37,99,235,.85), rgba(124,58,237,.70));}

    .toast{position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(17,24,39,.12); background: rgba(255,255,255,.86); color: rgba(17,24,39,.90); font-size: 12px; box-shadow: 0 18px 40px rgba(17,24,39,.18); display:none; max-width: min(980px, calc(100% - 24px)); text-align:center;}

    .sr{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

    /* =========================
       Tema escuro
       ========================= */
    html[data-theme="dark"]{
      --bg:#0b1220;
      --panel:#0f172a;
      --panel2:#0b1327;
      --stroke:rgba(226,232,240,.14);
      --ink:#e5e7eb;
      --muted:#a7b0c0;
      --shadow: 0 16px 34px rgba(0,0,0,.48);
    }

    html[data-theme="dark"] body{
      background:
        radial-gradient(1100px 650px at 10% 0%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(900px 600px at 90% 10%, rgba(124,58,237,.18), transparent 60%),
        radial-gradient(900px 600px at 50% 100%, rgba(22,163,74,.12), transparent 60%),
        var(--bg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-color: var(--bg);
      color: var(--ink);
    }

    html[data-theme="dark"] .panel{
      background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,19,39,.90));
      border: 1px solid rgba(226,232,240,.14);
      box-shadow: var(--shadow);
    }

    html[data-theme="dark"] .panel-hd{border-bottom: 1px solid rgba(226,232,240,.10)}

    html[data-theme="dark"] .search{
      background: linear-gradient(180deg, rgba(226,232,240,.06), rgba(226,232,240,.02));
      border: 1px solid rgba(226,232,240,.14);
      box-shadow: 0 12px 30px rgba(0,0,0,.40);
    }
    html[data-theme="dark"] .search input::placeholder{color: rgba(167,176,192,.70)}

    html[data-theme="dark"] .cat{
      border: 1px solid rgba(226,232,240,.12);
      background: rgba(15,23,42,.55);
    }
    html[data-theme="dark"] .cat-hd{
      background: linear-gradient(180deg, rgba(226,232,240,.06), rgba(226,232,240,.02));
      border-bottom: 1px solid rgba(226,232,240,.10);
    }

    html[data-theme="dark"] .card{
      background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,19,39,.88));
      border: 1px solid rgba(226,232,240,.14);
    }
    html[data-theme="dark"] .card:hover{border-color: rgba(37,99,235,.42); box-shadow: 0 18px 38px rgba(0,0,0,.42)}
    html[data-theme="dark"] .card.active{border-color: rgba(37,99,235,.60)}

    html[data-theme="dark"] .thumb,
    html[data-theme="dark"] .now .cover{
      border: 1px solid rgba(226,232,240,.14);
    }

    html[data-theme="dark"] .bar,
    html[data-theme="dark"] .plist-hd{
      border: 1px solid rgba(226,232,240,.14);
      background: rgba(226,232,240,.04);
    }

    html[data-theme="dark"] .track:hover{background: rgba(226,232,240,.04); border-color: rgba(226,232,240,.12)}
    html[data-theme="dark"] .track.active{background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.30)}

    html[data-theme="dark"] .toast{
      background: rgba(15,23,42,.92);
      color: rgba(229,231,235,.92);
      border: 1px solid rgba(226,232,240,.14);
      box-shadow: 0 20px 44px rgba(0,0,0,.55);
    }

    html[data-theme="dark"] .btn{
      border: 1px solid rgba(226,232,240,.14);
      background: rgba(226,232,240,.04);
      color: var(--ink);
    }
    html[data-theme="dark"] .btn.primary{background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(124,58,237,.14)); border-color: rgba(37,99,235,.38)}

    html[data-theme="dark"] .brand .contact{color: rgba(167,176,192,.85)}
    html[data-theme="dark"] .brand .contact a:hover{color: rgba(229,231,235,.95)}

    html[data-theme="dark"] .wbar,
    html[data-theme="dark"] .track .pbar{background: rgba(226,232,240,.05); border: 1px solid rgba(226,232,240,.12)}

    html[data-theme="dark"] .track .idx{background: rgba(226,232,240,.05); border: 1px solid rgba(226,232,240,.14); color: rgba(229,231,235,.85)}

    html[data-theme="dark"] input[type="range"]{accent-color: rgba(147,197,253,.95)}

    html[data-theme="dark"] .search input{color: var(--ink)}

    html[data-theme="dark"] .panel-hd small,
    html[data-theme="dark"] .cat-hd small,
    html[data-theme="dark"] .meta .sub,
    html[data-theme="dark"] .now .info p,
    html[data-theme="dark"] .time,
    html[data-theme="dark"] .track .tmeta .dur{color: var(--muted)}

    html[data-theme="dark"] .cat-hd .chev,
    html[data-theme="dark"] .plist-hd .chev{color: rgba(167,176,192,.90)}

    html[data-theme="dark"] .thumb .ph{color: rgba(229,231,235,.80)}

    html[data-theme="dark"] .panel-hd h2,
    html[data-theme="dark"] .cat-hd h3,
    html[data-theme="dark"] .meta .title,
    html[data-theme="dark"] .now .info h3{color: var(--ink)}

    html[data-theme="dark"] .libraryPanel .panel-hd,
    html[data-theme="dark"] .playerPanel .panel-hd{background: rgba(226,232,240,.02)}

    html[data-theme="dark"] .search input{caret-color: rgba(147,197,253,.95)}
    html[data-theme="dark"] .search input::selection{background: rgba(37,99,235,.35)}
    html[data-theme="dark"] .btn:hover{border-color: rgba(147,197,253,.32)}

    /* Botão de tema sempre no canto superior direito */
    #themeBtn{position:fixed; top:14px; right:14px; z-index:9999; width:44px; padding:10px 0; font-size:14px}
    @media (max-width: 520px){ #themeBtn{top:10px; right:10px} }

    /* =========================
       Toolbar (Home/Histórico)
       - Desktop: expandido
       - Mobile: colapsado (drawer)
       ========================= */

    .toolbar{
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      z-index: 9000;
      padding: 10px 12px;
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
      border-bottom: 1px solid rgba(17,24,39,.10);
      box-shadow: 0 10px 24px rgba(17,24,39,.10);
      overflow: visible;
    }

    .tb-inner{display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:flex-start;}

    .tb-title{display:none; font-size:12px; color:rgba(91,100,122,.85); padding: 4px 8px 2px;}

    .tb-btn{
      display:flex;
      align-items:center;
      gap:10px;
      width: auto;
      border: 1px solid rgba(17,24,39,.12);
      background: rgba(17,24,39,.03);
      color: var(--ink);
      border-radius: 10px;
      padding: 10px 10px;
      font-size: 13px;
      cursor: pointer;
      user-select: none;
      transition: transform .10s ease, border-color .12s ease;
      text-align:left;
    }
    .tb-btn:hover{transform: translateY(-1px); border-color: rgba(37,99,235,.28)}
    .tb-btn.active{background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(124,58,237,.10)); border-color: rgba(37,99,235,.30); font-weight:700;}

    .tb-ico{width: 22px; display:inline-flex; justify-content:center; opacity:.95}

    .tb-toggle{display:none; position: fixed; top: 14px; left: 14px; z-index: 9998; width:44px; padding:10px 0;}

    .views{display:block;}
    .view{display:none;}
    .view.active{display:block;}

    .historyWrap{padding: 14px; display:flex; flex-direction:column; gap: 12px;}

    /* Favoritar (estrela nos tiles) */
    .favBtn{
      position:absolute;
      top:10px;
      right:10px;
      width:34px;
      height:34px;
      border-radius: 10px;
      border:1px solid rgba(17,24,39,.14);
      background: rgba(255,255,255,.78);
      color: rgba(17,24,39,.82);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      line-height: 1;
      font-size: 16px;
      box-shadow: 0 8px 18px rgba(17,24,39,.10);
      transition: transform .10s ease, border-color .12s ease, background .12s ease;
      z-index: 5;
    }
    .favBtn:hover{transform: translateY(-1px); border-color: rgba(37,99,235,.28)}
    .favBtn.on{background: linear-gradient(135deg, rgba(250,204,21,.20), rgba(37,99,235,.10)); border-color: rgba(250,204,21,.40); color: rgba(146,64,14,.95)}

    html[data-theme="dark"] .favBtn{
      background: rgba(15,23,42,.78);
      border:1px solid rgba(226,232,240,.16);
      color: rgba(229,231,235,.88);
    }
    html[data-theme="dark"] .favBtn.on{background: linear-gradient(135deg, rgba(250,204,21,.16), rgba(37,99,235,.14)); border-color: rgba(250,204,21,.32); color: rgba(253,230,138,.92)}

    .hitem{
      position: relative;
      display:flex; gap:12px; align-items:center;
      padding: 12px;
      border-radius: var(--radius);
      border: 1px solid rgba(17,24,39,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,249,255,.90));
      cursor:pointer;
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    }
    .hitem:hover{transform: translateY(-2px); border-color: rgba(37,99,235,.35); box-shadow: 0 16px 30px rgba(17,24,39,.12)}
    .hmeta{min-width:0; flex:1}
    .hmeta .ht{margin:0 0 4px; font-weight:700; font-size:13px; line-height:1.2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    .hmeta .hs{margin:0; color: var(--muted); font-size:12px; line-height:1.25; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}

    /* Botão de desfavoritar na lista de Favoritos */
    .favMini{
      position:absolute;
      top:10px;
      right:10px;
      width:34px;
      height:34px;
      border-radius: 10px;
      border:1px solid rgba(17,24,39,.14);
      background: rgba(255,255,255,.78);
      color: rgba(17,24,39,.82);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      line-height: 1;
      font-size: 16px;
      box-shadow: 0 8px 18px rgba(17,24,39,.10);
      transition: transform .10s ease, border-color .12s ease, background .12s ease;
      z-index: 6;
    }
    .favMini:hover{transform: translateY(-1px); border-color: rgba(37,99,235,.28)}
    .favMini.on{background: linear-gradient(135deg, rgba(250,204,21,.20), rgba(37,99,235,.10)); border-color: rgba(250,204,21,.40); color: rgba(146,64,14,.95)}

    html[data-theme="dark"] .favMini{
      background: rgba(15,23,42,.78);
      border:1px solid rgba(226,232,240,.16);
      color: rgba(229,231,235,.88);
    }
    html[data-theme="dark"] .favMini.on{background: linear-gradient(135deg, rgba(250,204,21,.16), rgba(37,99,235,.14)); border-color: rgba(250,204,21,.32); color: rgba(253,230,138,.92)}

    /* Mobile: toolbar vira drawer */
    @media (max-width: 760px){
      .toolbar{
        position: fixed;
        top: 0;
        left: 0;
        width: min(84vw, 320px);
        height: 100vh;
        transform: translateX(-110%);
        transition: transform .16s ease;
        box-shadow: 18px 0 44px rgba(17,24,39,.22);
        overflow: auto;
        padding: 14px 12px;
        border-bottom: 0;
        border-right: 1px solid rgba(17,24,39,.10);
      }
      .toolbar.open{transform: translateX(0);}
      .tb-toggle{display:inline-flex;}
      .tb-inner{flex-direction:column; align-items:stretch;}
      .tb-title{display:block;}
      .tb-btn{width:100%;}
    }

    /* Dark mode toolbar */
    html[data-theme="dark"] .toolbar{
      background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,19,39,.90));
      border-bottom: 1px solid rgba(226,232,240,.12);
      box-shadow: 12px 0 34px rgba(0,0,0,.55);
    }
    html[data-theme="dark"] .tb-btn{
      border: 1px solid rgba(226,232,240,.14);
      background: rgba(226,232,240,.04);
      color: var(--ink);
    }
    html[data-theme="dark"] .tb-btn.active{background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(124,58,237,.14)); border-color: rgba(37,99,235,.38)}
    html[data-theme="dark"] .hitem{background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,19,39,.88)); border: 1px solid rgba(226,232,240,.14)}

/* =========================
   Fullscreen da capa
   ========================= */
.now .cover img{cursor: zoom-in;}

body.noScroll{overflow:hidden;}

.fsOverlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}
.fsOverlay.open{display:flex;}

.fsOverlay img{
  max-width: min(92vw, 980px);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  background: rgba(0,0,0,.18);
}

.fsClose{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10001;
  width: 44px;
  padding: 10px 0;
  font-size: 14px;
}

@media (max-width: 520px){
  .fsClose{top: 10px; right: 10px;}
}