/* src/base.css — tema base extraído do <style> inline do index.html (goal 3, 2026-06-10).
   Carregado ANTES de src/carbon-red.css: o cascade original depende dessa ordem. */
    :root{
      --bg:#0b0a08;
      --bg2:#15110c;
      --panel:#19130d;
      --panel2:#241a10;
      --line:rgba(214,181,114,.22);
      --line2:rgba(255,255,255,.08);
      --text:#f7efe0;
      --muted:#b9a887;
      --soft:#8f7d5a;
      --gold:#d7ad5c;
      --gold2:#f5d48c;
      --red:#d06363;
      --green:#72d29b;
      --blue:#9dc8ff;
      --shadow:0 18px 60px rgba(0,0,0,.42);
      --radius:22px;
      --radius2:14px;
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      --serif: Georgia, Cambria, "Times New Roman", serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; min-height:100vh; color:var(--text); font-family:var(--font);
      background:
        radial-gradient(circle at 12% 5%, rgba(215,173,92,.18), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(110,57,24,.28), transparent 36%),
        linear-gradient(135deg, #070604 0%, #100c08 45%, #1a1109 100%);
      overflow-x:hidden;
    }
    body::before{
      content:""; position:fixed; inset:0; pointer-events:none; opacity:.16; z-index:-1;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:54px 54px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.35));
    }
    a{color:var(--gold2); text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{width:min(1440px, calc(100% - 32px)); margin:0 auto;}
    header{
      padding:34px 0 18px; position:sticky; top:0; z-index:30;
      backdrop-filter: blur(18px); background:linear-gradient(to bottom, rgba(11,10,8,.94), rgba(11,10,8,.72));
      border-bottom:1px solid var(--line2);
    }
    .hero{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end;}
    .eyebrow{display:flex; align-items:center; gap:10px; color:var(--gold2); letter-spacing:.12em; text-transform:uppercase; font-size:12px; font-weight:800;}
    .sigil{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:rgba(215,173,92,.1);box-shadow:0 0 40px rgba(215,173,92,.12)}
    h1{font-family:var(--serif); margin:10px 0 6px; font-size:clamp(32px, 5vw, 66px); line-height:.95; letter-spacing:-.04em;}
    .subtitle{max-width:790px; color:var(--muted); font-size:15px; line-height:1.55; margin:0;}
    .hero-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
    button,.btn,select,input{
      font:inherit;
    }
    .btn, button{
      border:1px solid var(--line); color:var(--text); background:linear-gradient(180deg, rgba(215,173,92,.14), rgba(102,67,25,.12));
      padding:11px 14px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
      box-shadow:0 10px 28px rgba(0,0,0,.18); transition:.18s transform, .18s border-color, .18s background;
      user-select:none; white-space:nowrap;
    }
    .btn:hover, button:hover{transform:translateY(-1px); border-color:rgba(245,212,140,.55); background:linear-gradient(180deg, rgba(215,173,92,.22), rgba(102,67,25,.17)); text-decoration:none}
    .btn.primary{background:linear-gradient(135deg, #c8913a, #f0cb7b); color:#1b1107; font-weight:900; border-color:rgba(255,235,170,.6)}
    .btn.danger{border-color:rgba(208,99,99,.35); color:#ffdada; background:rgba(208,99,99,.09)}
    main{padding:22px 0 50px;}
    .status-bar{
      border:1px solid var(--line); background:linear-gradient(180deg, rgba(25,19,13,.94), rgba(16,12,8,.88));
      border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); display:grid; gap:14px;
    }
    .source-note{display:flex; align-items:flex-start; gap:12px; color:var(--muted); line-height:1.45; font-size:13px;}
    .source-note strong{color:var(--text)}
    .loader-line{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
    .loader-line span{display:block;height:100%;width:22%;border-radius:inherit;background:linear-gradient(90deg, transparent, var(--gold), transparent);animation:load 1.15s infinite}
    @keyframes load{from{transform:translateX(-120%)}to{transform:translateX(520%)}}
    .hidden{display:none !important}
    .dash{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:16px 0;}
    .metric{border:1px solid var(--line2); background:rgba(255,255,255,.045); border-radius:18px; padding:14px 14px 13px; min-height:95px; position:relative; overflow:hidden;}
    .metric::after{content:"";position:absolute;inset:auto -20% -55% 30%;height:90px;background:radial-gradient(circle, rgba(215,173,92,.18), transparent 65%);}
    .metric small{display:block;color:var(--soft);text-transform:uppercase;letter-spacing:.10em;font-size:11px;font-weight:800;margin-bottom:10px}
    .metric b{font-size:28px;letter-spacing:-.03em}
    .metric em{font-style:normal;color:var(--muted);font-size:12px;display:block;margin-top:4px}
    .progress-wrap{grid-column:1 / -1; border:1px solid var(--line2); background:rgba(255,255,255,.035); border-radius:20px; padding:14px;}
    .progress-label{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;margin-bottom:8px}
    .progress{height:14px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
    .progress > span{display:block;height:100%;width:0%;background:linear-gradient(90deg, #8b6127, #f4ce7d);border-radius:inherit;box-shadow:0 0 30px rgba(245,212,140,.32);transition:width .25s ease}
    .toolbar{display:grid; grid-template-columns:1.45fr repeat(5, minmax(120px,.55fr)); gap:10px; margin:14px 0 18px;}
    .field{position:relative;}
    .field input,.field select{
      width:100%; border:1px solid var(--line); background:rgba(12,9,6,.82); color:var(--text); border-radius:16px;
      padding:13px 14px; outline:none; box-shadow:0 8px 22px rgba(0,0,0,.16); min-height:48px;
    }
    .field input::placeholder{color:#8f8065}
    .field select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--gold2) 50%),linear-gradient(135deg, var(--gold2) 50%, transparent 50%); background-position:calc(100% - 18px) 20px, calc(100% - 12px) 20px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:34px;}
    .quick-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:4px 0 18px;color:var(--muted);font-size:13px}
    .quick-actions .left,.quick-actions .right{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    .chip{border:1px solid var(--line2);background:rgba(255,255,255,.05);padding:8px 10px;border-radius:999px;color:var(--muted)}
    .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(248px,1fr)); gap:16px;}
    .card{
      border:1px solid var(--line2); background:linear-gradient(180deg, rgba(29,22,15,.90), rgba(13,10,7,.96)); border-radius:var(--radius);
      overflow:hidden; box-shadow:0 12px 38px rgba(0,0,0,.23); position:relative; min-height:365px; display:flex; flex-direction:column;
      transition:.18s transform,.18s border-color,.18s box-shadow;
    }
    .card:hover{transform:translateY(-3px); border-color:rgba(245,212,140,.36); box-shadow:0 22px 58px rgba(0,0,0,.36)}
    .card.owned{border-color:rgba(114,210,155,.58); box-shadow:0 16px 50px rgba(57,122,83,.13)}
    .card.owned::before{content:"NA GARAGEM";position:absolute;z-index:4;top:12px;left:12px;font-weight:900;font-size:10px;letter-spacing:.12em;color:#0d1d13;background:linear-gradient(135deg,#77e6a3,#d5ffdf);border-radius:999px;padding:7px 9px;box-shadow:0 10px 20px rgba(0,0,0,.28)}
    .thumb{height:158px;background:linear-gradient(135deg, rgba(215,173,92,.16), rgba(255,255,255,.04));position:relative;overflow:hidden;border-bottom:1px solid var(--line2)}
    .thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95) contrast(1.05);transition:.2s transform}
    .card:hover .thumb img{transform:scale(1.04)}
    .placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--gold2);text-align:center;padding:18px;background:radial-gradient(circle at top,rgba(215,173,92,.16),transparent 60%),linear-gradient(135deg,#15100a,#080604)}
    .placeholder span{font-size:38px;display:block;margin-bottom:6px}
    .badge-row{position:absolute;right:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;z-index:3}
    .badge{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#1b1207;background:rgba(245,212,140,.92);border-radius:999px;padding:6px 8px;box-shadow:0 8px 20px rgba(0,0,0,.2)}
    .badge.dlc{background:#9dc8ff}.badge.fe{background:#d8a7ff}.badge.rare{background:#d1e3ff}.badge.legendary{background:#ffd08a}.badge.epic{background:#dda3ff}.badge.common{background:#d7d7d7}.badge.barn{background:#c4a17c}.badge.treasure{background:#98f0c0}.badge.unknown{background:#9c9384;color:#20160b}
    .body{padding:14px; display:flex; flex-direction:column; gap:10px; flex:1;}
    .topline{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
    .title{font-weight:900;line-height:1.08;font-size:17px;letter-spacing:-.02em;}
    .make{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold2);font-weight:900;margin-bottom:5px;}
    .year{font-family:var(--serif);color:var(--muted);font-size:22px;line-height:1;font-weight:bold;}
    .meta{display:flex;flex-wrap:wrap;gap:7px;color:var(--muted);font-size:12px;}
    .pill{border:1px solid var(--line2);background:rgba(255,255,255,.045);border-radius:999px;padding:6px 8px;white-space:nowrap}
    .unlock{color:#d8c9aa;font-size:12px;line-height:1.35;min-height:32px;}
    .card-actions{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center}
    .own-toggle{width:100%;height:42px;min-height:0;padding:0;display:grid;place-items:center;justify-content:center;border-color:rgba(114,210,155,.38);}
    .owned .own-toggle{background:rgba(114,210,155,.16);color:#ddffe9}
    .iconbtn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;padding:0}
    .empty{border:1px dashed var(--line);border-radius:var(--radius);padding:38px;text-align:center;color:var(--muted);background:rgba(255,255,255,.03)}
    dialog{border:none;border-radius:26px;background:linear-gradient(180deg,#21170f,#0d0a07);color:var(--text);box-shadow:0 30px 120px rgba(0,0,0,.7);width:min(720px,calc(100% - 28px));padding:0;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);max-height:92vh}
    dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
    .modal-img{height:285px;background:#050403;position:relative;display:grid;place-items:center}
    .modal-img img{width:100%;height:100%;object-fit:contain;display:block;background:#050403}
    .modal-gallery{display:grid;gap:9px;margin:0;padding:12px 14px;background:linear-gradient(180deg,#0b0805,#17110b);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
    .gallery-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;line-height:1.25}
    .gallery-head strong{color:var(--text);font-size:13px}
    .gallery-strip{display:flex;gap:10px;overflow-x:auto;padding:3px 1px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .gallery-strip::-webkit-scrollbar{display:none}
    .gallery-shot{flex:0 0 132px;height:82px;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#050403;padding:0;display:block;scroll-snap-align:start;position:relative}
    .gallery-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:.18s transform}
    .gallery-shot:active img{transform:scale(.98)}
    .gallery-shot.active{border-color:rgba(245,212,140,.95);box-shadow:0 0 0 2px rgba(245,212,140,.13)}
    .gallery-set-main{position:absolute;right:6px;bottom:6px;z-index:2;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 6px;border-radius:8px;pointer-events:none}
    .gallery-shot.active .gallery-set-main{background:rgba(245,212,140,.95);color:#0a0a0a}
    .gallery-status{border:1px dashed var(--line2);border-radius:14px;padding:12px;color:var(--muted);font-size:12px;text-align:center;background:rgba(255,255,255,.03)}
    .modal-content{padding:22px;display:grid;gap:14px}
    .modal-content h2{font-family:var(--serif);font-size:34px;line-height:1;margin:0;letter-spacing:-.03em}
    .modal-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}.details-panel{border:1px solid var(--line2);border-radius:16px;background:rgba(255,255,255,.035);overflow:hidden}.details-panel summary{cursor:pointer;list-style:none;padding:13px 14px;font-weight:900;color:var(--gold2);display:flex;align-items:center;justify-content:space-between}.details-panel summary::-webkit-details-marker{display:none}.details-panel summary::after{content:'⌄';color:var(--muted);font-size:18px}.details-panel[open] summary::after{content:'⌃'}.details-panel .modal-grid{padding:0 12px 12px}
    .info-box{border:1px solid var(--line2);background:rgba(255,255,255,.04);border-radius:16px;padding:12px;color:var(--muted);font-size:13px;line-height:1.35}.info-box b{color:var(--text);display:block;margin-bottom:4px}
    .toast{position:fixed;right:18px;bottom:18px;background:#1d150e;border:1px solid var(--line);color:var(--text);padding:13px 15px;border-radius:16px;box-shadow:var(--shadow);z-index:90;max-width:420px;transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s}
    .toast.show{transform:translateY(0);opacity:1}
    .list-mode .grid{display:grid;grid-template-columns:1fr;gap:10px}
    .list-mode .card{min-height:auto;display:grid;grid-template-columns:170px 1fr}.list-mode .thumb{height:100%;min-height:130px}.list-mode .body{min-height:130px}.list-mode .card-actions{grid-template-columns:auto auto;justify-content:end}
    .file-input{display:none}
    footer{color:var(--soft);font-size:12px;line-height:1.55;padding:28px 0 18px;border-top:1px solid var(--line2)}
    .kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;border:1px solid var(--line2);border-bottom-color:rgba(255,255,255,.2);border-radius:6px;padding:2px 6px;background:rgba(255,255,255,.05);color:var(--gold2)}
    @media (max-width:980px){
      .hero{grid-template-columns:1fr}.hero-actions{justify-content:flex-start}.dash{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr 1fr}.toolbar .field:first-child{grid-column:1/-1}.list-mode .card{grid-template-columns:130px 1fr}.modal-grid{grid-template-columns:1fr}
    }
    @media (max-width:620px){
      .wrap{width:min(100% - 20px, 1440px)} header{padding-top:24px}.dash{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.hero-actions .btn, .hero-actions button{width:100%;justify-content:center}.metric{min-height:auto}.quick-actions .left,.quick-actions .right{width:100%}.quick-actions button,.quick-actions .btn{flex:1;justify-content:center}.list-mode .card{grid-template-columns:1fr}.list-mode .thumb{height:150px}.modal-img{height:220px}
    }


    /* ==============================
       Mobile-first refinements
       ============================== */
    :root{
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
    html{
      -webkit-text-size-adjust:100%;
      text-size-adjust:100%;
    }
    body{
      touch-action:manipulation;
      -webkit-tap-highlight-color:rgba(245,212,140,.16);
      padding-bottom:calc(12px + var(--safe-bottom));
    }
    button,.btn,select,input{
      min-height:48px;
    }
    input,select,textarea,button{
      font-size:16px; /* evita zoom automático no iOS/Android */
    }
    .filter-sheet-head,.mobile-filter-row,.filter-backdrop,.load-more{display:none}
    .load-more{
      margin:18px 0 8px;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:var(--muted);
      font-size:13px;
      flex-wrap:wrap;
    }
    .load-more:not(.hidden){display:flex}
    .load-more .btn{min-width:210px;justify-content:center}

    @media (hover:none){
      .card:hover{transform:none;box-shadow:0 12px 38px rgba(0,0,0,.23)}
      .card:hover .thumb img{transform:none}
      .btn:hover, button:hover{transform:none;text-decoration:none}
    }

    @media (max-width:720px){
      body{padding-bottom:calc(82px + var(--safe-bottom));}
      body.filters-open{overflow:hidden;}
      .wrap{width:100%;padding-left:12px;padding-right:12px;}
      header{
        position:sticky;
        top:0;
        padding:calc(12px + var(--safe-top)) 0 10px;
        background:linear-gradient(to bottom, rgba(11,10,8,.98), rgba(11,10,8,.86));
        box-shadow:0 12px 34px rgba(0,0,0,.28);
      }
      .hero{gap:10px;align-items:start;}
      .eyebrow{font-size:10px;letter-spacing:.09em;gap:8px;}
      .sigil{width:30px;height:30px;}
      h1{font-size:30px;line-height:.95;margin:8px 0 4px;}
      .subtitle{font-size:12px;line-height:1.35;max-width:100%;}
      .hero-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        width:100%;
      }
      .hero-actions .btn,.hero-actions button{
        width:100%;
        min-height:44px;
        padding:9px 10px;
        font-size:13px;
        border-radius:14px;
      }
      #refreshBtn{grid-column:1/-1;}
      main{padding:12px 0 28px;}
      .status-bar{
        border-radius:20px;
        padding:12px;
        box-shadow:0 12px 34px rgba(0,0,0,.28);
      }
      .source-note{font-size:12px;gap:9px;}
      .dash{
        display:grid;
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:8px;
        margin:10px 0;
      }
      .metric{
        border-radius:16px;
        padding:10px;
        min-height:78px;
      }
      .metric small{font-size:9px;letter-spacing:.07em;margin-bottom:8px;}
      .metric b{font-size:22px;}
      .metric em{font-size:10px;line-height:1.2;}
      .dash .metric:nth-child(4){display:none;}
      .progress-wrap{
        padding:11px;
        border-radius:17px;
      }
      .progress-label{font-size:12px;margin-bottom:7px;}
      .progress{height:12px;}
      .mobile-filter-row{
        display:grid;
        grid-template-columns:1.1fr .95fr .85fr;
        gap:8px;
        margin:10px 0 10px;
        position:sticky;
        top:calc(137px + var(--safe-top));
        z-index:22;
        padding:8px 0;
        background:linear-gradient(to bottom, rgba(11,10,8,.98), rgba(11,10,8,.72));
        backdrop-filter:blur(14px);
      }
      .mobile-filter-row .btn{
        justify-content:center;
        min-height:46px;
        border-radius:15px;
        padding:9px 8px;
        font-size:13px;
        font-weight:850;
      }
      .filter-backdrop:not(.hidden){
        display:block;
        position:fixed;
        inset:0;
        z-index:64;
        background:rgba(0,0,0,.62);
        backdrop-filter:blur(4px);
      }
      .toolbar{
        position:fixed;
        left:0;right:0;bottom:0;
        z-index:70;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        margin:0;
        padding:14px 14px calc(18px + var(--safe-bottom));
        max-height:min(78vh, 620px);
        overflow:auto;
        overscroll-behavior:contain;
        border-radius:26px 26px 0 0;
        border:1px solid var(--line);
        border-bottom:none;
        background:linear-gradient(180deg, rgba(31,23,15,.98), rgba(10,8,6,.99));
        box-shadow:0 -24px 90px rgba(0,0,0,.62);
        transform:translateY(calc(100% + 18px));
        transition:transform .22s ease;
      }
      body.filters-open .toolbar{transform:translateY(0);}
      .filter-sheet-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:2px 2px 4px;
        position:sticky;
        top:0;
        background:linear-gradient(180deg, rgba(31,23,15,1), rgba(31,23,15,.92));
        z-index:1;
      }
      .filter-sheet-head strong{font-family:var(--serif);font-size:23px;letter-spacing:-.03em;}
      .filter-sheet-head .iconbtn{width:46px;height:46px;border-radius:15px;}
      .toolbar .field input,.toolbar .field select{
        min-height:52px;
        border-radius:16px;
        padding:14px 15px;
        background:rgba(7,6,4,.9);
      }
      .quick-actions{
        margin:8px 0 12px;
        gap:8px;
      }
      .quick-actions .left{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:4px;
        scrollbar-width:none;
      }
      .quick-actions .left::-webkit-scrollbar{display:none;}
      .quick-actions .right{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
        gap:8px;
      }
      .quick-actions .right button{
        width:100%;
        min-height:44px;
        border-radius:14px;
        font-size:12px;
        padding:8px 6px;
      }
      .chip{font-size:11px;white-space:nowrap;padding:7px 9px;}
      .grid{
        grid-template-columns:1fr;
        gap:12px;
      }
      .card{
        min-height:auto;
        border-radius:20px;
        box-shadow:0 12px 34px rgba(0,0,0,.24);
      }
      .thumb{height:176px;}
      .card.owned::before{
        top:10px;left:10px;
        font-size:9px;
        padding:7px 8px;
      }
      .badge-row{top:9px;right:9px;}
      .badge{font-size:9px;padding:6px 7px;}
      .body{padding:12px;gap:9px;}
      .make{font-size:10px;letter-spacing:.10em;margin-bottom:4px;}
      .title{font-size:17px;line-height:1.12;}
      .year{font-size:21px;}
      .meta{gap:6px;font-size:11px;}
      .pill{padding:5px 7px;}
      .unlock{font-size:11px;min-height:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
      .card-actions{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
      }
      .own-toggle{
        min-height:42px;
        border-radius:15px;
        font-weight:900;
      }
      .iconbtn{width:48px;height:50px;border-radius:15px;}
      .empty{margin-top:8px;padding:26px 16px;border-radius:20px;}
      dialog{
        width:100vw;
        max-width:100vw;
        height:auto;
        max-height:92vh;
        margin:auto 0 0 0;
        border-radius:26px 26px 0 0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
      }
      .modal-img{height:235px;}
      .modal-content{padding:16px 14px calc(18px + var(--safe-bottom));gap:12px;}
      .modal-content h2{font-size:29px;}
      .modal-grid{grid-template-columns:1fr;gap:8px;}
      .info-box{border-radius:12px;padding:8px 10px;font-size:11px;}
      .modal-content > div:last-child{justify-content:stretch;}
      #modalToggle{width:100%;justify-content:center;min-height:42px;border-radius:14px;}
      .gallery-shot{flex-basis:124px;height:82px;border-radius:13px;}
      .gallery-head{font-size:11px;}
      .modal-gallery{gap:8px;padding:12px 14px;}
      .toast{
        left:12px;
        right:12px;
        bottom:calc(14px + var(--safe-bottom));
        max-width:none;
        border-radius:16px;
        text-align:center;
        font-size:13px;
      }
      footer{
        padding:18px 12px calc(84px + var(--safe-bottom));
        font-size:11px;
      }
      .list-mode .grid{gap:10px;}
      .list-mode .card{grid-template-columns:118px 1fr;min-height:142px;}
      .list-mode .thumb{height:100%;min-height:142px;border-bottom:none;border-right:1px solid var(--line2);}
      .list-mode .body{min-height:142px;padding:10px;}
      .list-mode .meta .pill:nth-child(n+3),
      .list-mode .unlock{display:none;}
      .list-mode .title{font-size:15px;}
      .list-mode .year{font-size:18px;}
      .list-mode .own-toggle{min-height:42px;font-size:12px;}
      .list-mode .iconbtn{height:42px;width:42px;}
    }

    @media (max-width:390px){
      .mobile-filter-row{grid-template-columns:1fr 1fr;}
      .dash{grid-template-columns:1fr 1fr;}
      .dash .metric:nth-child(3){grid-column:1/-1;}
      .thumb{height:162px;}
      .hero-actions{grid-template-columns:1fr;}
    }

  

    /* ==========================================================
       Collector Cards + Dashboard de Colecionador — Hybrid v11
       ========================================================== */
    :root{
      --collector-card:#130f0a;
      --collector-card-2:#21170d;
      --collector-edge:rgba(245,212,140,.34);
      --collector-glow:rgba(245,212,140,.16);
      --collector-green:#7be4a2;
      --collector-red:#ef786f;
    }
    body{
      background:
        radial-gradient(circle at 18% -5%, rgba(245,212,140,.16), transparent 33%),
        radial-gradient(circle at 92% 6%, rgba(123,228,162,.11), transparent 28%),
        radial-gradient(circle at 50% 102%, rgba(145,87,32,.20), transparent 42%),
        linear-gradient(145deg, #050403 0%, #0b0906 46%, #150e07 100%);
    }
    header{
      background:linear-gradient(to bottom, rgba(7,6,4,.96), rgba(7,6,4,.78));
      border-bottom:1px solid rgba(245,212,140,.12);
    }
    h1::after{
      content:'Collector Dashboard';
      display:inline-flex;
      margin-left:10px;
      vertical-align:middle;
      font-family:var(--font);
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#1a1207;
      background:linear-gradient(135deg,var(--gold2),#b98433);
      border-radius:999px;
      padding:7px 9px;
      transform:translateY(-7px);
    }
    .dash{
      grid-template-columns:repeat(4,minmax(0,1fr));
      align-items:stretch;
    }
    .metric{
      min-height:104px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
        radial-gradient(circle at 90% 20%, rgba(245,212,140,.14), transparent 36%),
        rgba(19,15,10,.82);
      border-color:rgba(245,212,140,.14);
      border-radius:22px;
      box-shadow:0 18px 50px rgba(0,0,0,.24);
    }
    .metric small{color:rgba(245,212,140,.78)}
    .metric b{font-family:var(--serif);font-size:34px;color:var(--text)}
    .progress-wrap{
      background:
        linear-gradient(145deg, rgba(123,228,162,.08), rgba(245,212,140,.07)),
        rgba(255,255,255,.035);
      border-color:rgba(245,212,140,.18);
      border-radius:24px;
    }
    .progress{height:16px;background:rgba(255,255,255,.07)}
    .progress > span{background:linear-gradient(90deg,#7be4a2,#f5d48c,#d7ad5c)}

    .collector-hub{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:14px;
      margin:10px 0 16px;
    }
    .collector-hero,.collector-panel{
      border:1px solid rgba(245,212,140,.16);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
        rgba(16,12,8,.82);
      border-radius:26px;
      box-shadow:0 20px 60px rgba(0,0,0,.25);
      overflow:hidden;
      position:relative;
    }
    .collector-hero{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:16px;
      align-items:center;
      padding:16px;
    }
    .collector-hero::after,.collector-panel::after{
      content:'';
      position:absolute;
      inset:auto -20% -35% 20%;
      height:120px;
      background:radial-gradient(circle, rgba(245,212,140,.12), transparent 66%);
      pointer-events:none;
    }
    .collector-ring{
      width:118px;
      height:118px;
      border-radius:34px;
      display:grid;
      place-items:center;
      position:relative;
      background:
        conic-gradient(from 180deg, var(--collector-green) var(--collector-angle, 0deg), rgba(255,255,255,.08) 0),
        linear-gradient(180deg, rgba(245,212,140,.12), rgba(255,255,255,.025));
      border:1px solid rgba(245,212,140,.22);
      box-shadow:inset 0 0 0 10px rgba(0,0,0,.34),0 18px 38px rgba(0,0,0,.32);
      z-index:1;
    }
    .collector-ring span{
      width:78px;height:78px;border-radius:26px;
      display:grid;place-items:center;
      background:rgba(7,6,4,.92);
      border:1px solid rgba(255,255,255,.06);
      color:var(--gold2);
      font-family:var(--serif);
      font-weight:900;
      font-size:26px;
      letter-spacing:-.05em;
    }
    .collector-copy{position:relative;z-index:1}
    .collector-copy h2{
      font-family:var(--serif);
      font-size:clamp(28px, 5.5vw, 44px);
      line-height:.95;
      margin:0 0 8px;
      letter-spacing:-.04em;
    }
    .collector-copy p{margin:0;color:var(--muted);line-height:1.42;font-size:14px}
    .collector-mini-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
    .collector-mini-stats span{
      border:1px solid rgba(245,212,140,.14);
      background:rgba(255,255,255,.045);
      color:rgba(247,239,224,.82);
      border-radius:999px;
      padding:8px 10px;
      font-size:12px;
      font-weight:800;
    }
    .collector-panel{padding:15px;display:grid;gap:12px}
    .collector-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:1}
    .collector-panel-head h3{margin:0;font-size:15px;letter-spacing:.02em}
    .collector-panel-head small{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.35}
    .mini-progress-list{display:grid;gap:8px;position:relative;z-index:1}
    .mini-progress-row{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:center;
      border:1px solid rgba(255,255,255,.075);
      background:rgba(255,255,255,.035);
      border-radius:16px;
      padding:10px;
      cursor:pointer;
      -webkit-tap-highlight-color:transparent;
    }
    .mini-progress-row:active{transform:scale(.99)}
    .mini-progress-title{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mini-progress-sub{color:var(--muted);font-size:11px;margin-top:3px}
    .mini-progress-pct{font-family:var(--serif);font-weight:900;color:var(--gold2);font-size:18px}
    .mini-progress-bar{grid-column:1/-1;height:8px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.055)}
    .mini-progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--collector-green),var(--gold2));border-radius:999px}
    .mini-empty{border:1px dashed rgba(245,212,140,.18);border-radius:16px;padding:12px;color:var(--muted);font-size:12px;line-height:1.4;text-align:center}

    .grid{gap:18px;align-items:stretch}
    .card{
      min-height:410px;
      padding:1px;
      border:1px solid rgba(245,212,140,.18);
      background:
        linear-gradient(145deg, rgba(245,212,140,.38), rgba(79,48,17,.12) 34%, rgba(255,255,255,.08)),
        var(--collector-card);
      border-radius:30px;
      box-shadow:0 18px 55px rgba(0,0,0,.28);
    }
    .card::after{
      content:'';
      position:absolute;
      inset:9px;
      border:1px solid rgba(255,255,255,.055);
      border-radius:24px;
      pointer-events:none;
      z-index:1;
    }
    .card.owned{
      border-color:rgba(123,228,162,.70);
      box-shadow:0 0 0 1px rgba(123,228,162,.20),0 18px 55px rgba(30,110,64,.14);
    }
    .card:not(.owned){filter:saturate(.86)}
    .card.owned::before{
      content:'✓ NA GARAGEM';
      top:13px;left:13px;
      background:linear-gradient(135deg,#7be4a2,#dfffe8);
      color:#07170d;
      border:1px solid rgba(255,255,255,.38);
      z-index:5;
    }
    .thumb{
      margin:8px 8px 0;
      height:188px;
      border-radius:24px 24px 12px 12px;
      border:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(ellipse at 50% 78%, rgba(245,212,140,.13), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
      display:grid;
      place-items:center;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .thumb img{object-fit:contain;padding:10px;background:transparent;filter:drop-shadow(0 18px 22px rgba(0,0,0,.42)) saturate(1.04) contrast(1.03)}
    .card:hover .thumb img{transform:scale(1.025)}
    .badge-row{right:14px;top:14px}
    .badge{border:1px solid rgba(255,255,255,.36)}
    .body{padding:14px 15px 16px;position:relative;z-index:2}
    .make{color:var(--gold2);font-size:12px;letter-spacing:.16em}
    .title{font-family:var(--serif);font-size:24px;letter-spacing:-.045em;line-height:.98}
    .year{font-size:24px;color:rgba(245,212,140,.72)}
    .pill{background:rgba(255,255,255,.045);border-color:rgba(245,212,140,.13)}
    .unlock{border-top:1px solid rgba(255,255,255,.06);padding-top:9px;min-height:40px;color:rgba(247,239,224,.73)}
    .own-toggle{
      min-height:48px;
      border-radius:16px;
      font-weight:900;
      background:rgba(123,228,162,.07);
      border-color:rgba(123,228,162,.28);
      color:#eaffef;
      justify-content:center;
    }
    .owned .own-toggle{background:linear-gradient(135deg,rgba(123,228,162,.22),rgba(123,228,162,.08));border-color:rgba(123,228,162,.48)}
    .iconbtn{border-radius:16px}
    .toolbar{border:1px solid rgba(245,212,140,.13);background:rgba(12,9,6,.42);padding:10px;border-radius:24px}
    .quick-actions{border:1px solid rgba(245,212,140,.11);background:rgba(255,255,255,.025);padding:10px;border-radius:22px}

    @media (min-width:1100px){
      .grid{grid-template-columns:repeat(auto-fill,minmax(285px,1fr));}
    }
    @media (max-width:980px){
      .collector-hub{grid-template-columns:1fr;}
    }
    @media (max-width:620px){
      header{position:relative;padding-top:22px;}
      h1::after{display:none;}
      .collector-hub{gap:10px;margin-top:8px;}
      .collector-hero{grid-template-columns:1fr;padding:14px;}
      .collector-ring{width:100%;height:96px;border-radius:24px;box-shadow:inset 0 0 0 8px rgba(0,0,0,.28),0 14px 32px rgba(0,0,0,.28)}
      .collector-ring span{width:72px;height:72px;border-radius:22px;font-size:24px;}
      .collector-copy h2{font-size:31px;}
      .collector-panel{padding:13px;border-radius:22px;}
      .metric b{font-size:32px;}
      .card{min-height:392px;border-radius:28px;}
      .thumb{height:178px;}
      .title{font-size:23px;}
      .hero-actions{display:grid;grid-template-columns:1fr;}
    }
    @media (max-width:420px){
      .collector-mini-stats span{width:100%;justify-content:center;text-align:center;}
      .mini-progress-row{grid-template-columns:1fr auto;}
      .thumb{height:166px;}
    }

  
    /* ==========================================================
       CARBON GARAGE THEME — Collector Cards + Dashboard
       Paleta: preto carbono, grafite, prata e aço.
       ========================================================== */
    :root{
      --bg:#050505;
      --bg2:#0E0E0E;
      --panel:#0E0E0E;
      --panel2:#181818;
      --card:#181818;
      --card-soft:#242424;
      --line:rgba(255,255,255,.12);
      --line2:rgba(255,255,255,.09);
      --text:#F2F2F2;
      --muted:#A0A0A0;
      --soft:#7B7B7B;
      --gold:#C7CEDB;
      --gold2:#FFFFFF;
      --red:#FF6464;
      --green:#69DB7C;
      --blue:#AAB4C3;
      --shadow:0 22px 74px rgba(0,0,0,.62);
    }

    body{
      background:
        radial-gradient(circle at 18% 0%, rgba(199,206,219,.10), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(255,255,255,.055), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(105,219,124,.05), transparent 34%),
        linear-gradient(135deg, #020202 0%, #090909 46%, #111111 100%) !important;
    }

    body::before{
      opacity:.20 !important;
      background-image:
        linear-gradient(135deg, rgba(255,255,255,.035) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,.035) 25%, rgba(5,5,5,.02) 25%) !important;
      background-position: 14px 0, 14px 0, 0 0, 0 0 !important;
      background-size: 28px 28px !important;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.22)) !important;
    }

    a{color:#FFFFFF !important}

    header{
      background:linear-gradient(to bottom, rgba(5,5,5,.96), rgba(5,5,5,.78)) !important;
      border-bottom:1px solid rgba(255,255,255,.10) !important;
    }

    .eyebrow,
    .make,
    .details-panel summary,
    .kbd,
    .style-number{
      color:#FFFFFF !important;
    }

    .sigil{
      background:rgba(255,255,255,.06) !important;
      border-color:rgba(255,255,255,.14) !important;
      box-shadow:0 0 42px rgba(199,206,219,.08) !important;
    }

    .btn,
    button{
      background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
      border-color:rgba(255,255,255,.13) !important;
      color:#F2F2F2 !important;
      box-shadow:0 12px 30px rgba(0,0,0,.30) !important;
    }

    .btn:hover,
    button:hover{
      background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
      border-color:rgba(255,255,255,.28) !important;
    }

    .btn.primary{
      background:linear-gradient(135deg, #E8ECF2, #9EA8B8) !important;
      border-color:rgba(255,255,255,.55) !important;
      color:#050505 !important;
      font-weight:950 !important;
      box-shadow:0 14px 38px rgba(199,206,219,.13) !important;
    }

    .btn.danger{
      background:rgba(255,100,100,.10) !important;
      border-color:rgba(255,100,100,.32) !important;
      color:#FFDCDC !important;
    }

    .status-bar{
      background:
        linear-gradient(180deg, rgba(24,24,24,.94), rgba(10,10,10,.92)) !important;
      border-color:rgba(255,255,255,.11) !important;
    }

    .loader-line span{
      background:linear-gradient(90deg, transparent, #FFFFFF, transparent) !important;
    }

    .metric,
    .progress-wrap,
    .details-panel,
    .info-box,
    .chip,
    .pill{
      background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
      border-color:rgba(255,255,255,.09) !important;
    }

    .metric::after{
      background:radial-gradient(circle, rgba(199,206,219,.14), transparent 66%) !important;
    }

    .metric small{
      color:#8B8B8B !important;
    }

    .progress > span{
      background:linear-gradient(90deg, #6F7784, #F2F2F2) !important;
      box-shadow:0 0 28px rgba(255,255,255,.18) !important;
    }

    .field input,
    .field select{
      background:rgba(14,14,14,.92) !important;
      border-color:rgba(255,255,255,.13) !important;
      color:#F2F2F2 !important;
    }

    .field input::placeholder{
      color:#777 !important;
    }

    .field select{
      background-image:
        linear-gradient(45deg, transparent 50%, #FFFFFF 50%),
        linear-gradient(135deg, #FFFFFF 50%, transparent 50%) !important;
    }

    .card{
      background:
        linear-gradient(180deg, rgba(36,36,36,.96), rgba(12,12,12,.98)) !important;
      border-color:rgba(255,255,255,.10) !important;
      box-shadow:0 16px 42px rgba(0,0,0,.42) !important;
    }

    .card:hover{
      border-color:rgba(255,255,255,.25) !important;
      box-shadow:0 26px 70px rgba(0,0,0,.56) !important;
    }

    .card.owned{
      border-color:rgba(105,219,124,.58) !important;
      box-shadow:0 18px 56px rgba(105,219,124,.10) !important;
    }

    .card.owned::before{
      color:#061108 !important;
      background:linear-gradient(135deg, #69DB7C, #D8FFE0) !important;
      box-shadow:0 10px 24px rgba(0,0,0,.35) !important;
    }

    .thumb{
      background:
        radial-gradient(circle at 50% 58%, rgba(255,255,255,.10), transparent 55%),
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(0,0,0,.12)) !important;
      border-bottom-color:rgba(255,255,255,.08) !important;
    }

    .thumb img{
      filter:saturate(.92) contrast(1.08) brightness(.96) !important;
    }

    .placeholder{
      color:#FFFFFF !important;
      background:
        radial-gradient(circle at top, rgba(255,255,255,.10), transparent 56%),
        linear-gradient(135deg, #181818, #050505) !important;
    }

    .badge{
      color:#050505 !important;
      background:rgba(242,242,242,.94) !important;
      box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
    }

    .badge.dlc{background:#BFD7FF !important}
    .badge.fe{background:#D8C8FF !important}
    .badge.rare{background:#D7DEE8 !important}
    .badge.legendary{background:#F2F2F2 !important}
    .badge.epic{background:#D0D0D0 !important}
    .badge.common{background:#B8B8B8 !important}
    .badge.barn{background:#AFAFAF !important}
    .badge.treasure{background:#B7F4C1 !important}
    .badge.unknown{background:#777 !important;color:#050505 !important}
    .badge.new{background:#7CF6B0 !important;color:#04130b !important}

    .unlock{
      color:#B9B9B9 !important;
    }

    .own-toggle{
      border-color:rgba(105,219,124,.38) !important;
    }

    .owned .own-toggle{
      background:rgba(105,219,124,.15) !important;
      color:#E2FFE8 !important;
    }

    dialog{
      background:linear-gradient(180deg,#181818,#060606) !important;
      border-color:rgba(255,255,255,.14) !important;
      box-shadow:0 34px 130px rgba(0,0,0,.74) !important;
    }

    .modal-img,
    .modal-img img{
      background:#030303 !important;
    }

    .modal-gallery{
      background:linear-gradient(180deg,#070707,#141414) !important;
      border-top-color:rgba(255,255,255,.08) !important;
      border-bottom-color:rgba(255,255,255,.08) !important;
    }

    .gallery-shot{
      background:#030303 !important;
      border-color:rgba(255,255,255,.12) !important;
    }

    .gallery-shot.active{
      border-color:rgba(255,255,255,.92) !important;
      box-shadow:0 0 0 2px rgba(255,255,255,.10) !important;
    }

    .gallery-status,
    .empty{
      background:rgba(255,255,255,.035) !important;
      border-color:rgba(255,255,255,.11) !important;
    }

    .toast{
      background:#151515 !important;
      border-color:rgba(255,255,255,.14) !important;
    }

    footer{
      border-top-color:rgba(255,255,255,.10) !important;
    }

    /* Cards com sensação de “metal escovado” sem pesar no celular */
    .card::after,
    .metric::before,
    .status-bar::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.035) 42%, transparent 55%) !important;
      opacity:.8;
    }

    .status-bar,
    .metric,
    .card{
      position:relative;
      isolation:isolate;
    }

    .body,
    .thumb,
    .card-actions,
    .badge-row{
      position:relative;
      z-index:1;
    }

    /* ==========================================================
       v14.1 — Bottom tabs, FAB, header colapsável, More tab
       Mobile-first; em desktop continua usável.
       ========================================================== */
    :root{
      --tabbar-h: 62px;
      --fab-size: 56px;
    }

    /* Tabs: mostra só a ativa */
    .tab{display:none;}
    .tab.active{display:block;}

    /* Header colapsável on-scroll */
    header{
      transition:padding .22s ease, box-shadow .22s ease, background .22s ease;
    }
    body.header-collapsed header{
      padding-top:calc(6px + var(--safe-top));
      padding-bottom:6px;
      box-shadow:0 6px 22px rgba(0,0,0,.42);
    }
    body.header-collapsed .hero{
      grid-template-columns: 1fr;
    }
    body.header-collapsed .hero > div:first-child{
      display:none;
    }
    body.header-collapsed .hero-condensed{
      display:flex;
    }
    body.header-collapsed h1{ font-size: 0; line-height: 0; margin: 0; }
    .hero-condensed{
      display:none;
      align-items:center;
      gap:10px;
      font-size:13px;
      font-weight:850;
      color:var(--text);
      width:100%;
    }
    .hero-condensed .sigil{
      width:30px;height:30px;
      flex:0 0 30px;
    }
    .hero-condensed .hc-progress{
      flex:1;
      height:6px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.06);
    }
    .hero-condensed .hc-progress span{
      display:block;height:100%;
      width:0%;
      background:linear-gradient(90deg, #6F7784, #F2F2F2);
      transition:width .25s ease;
    }
    .hero-condensed .hc-stat{
      font-variant-numeric:tabular-nums;
      letter-spacing:-.01em;
      white-space:nowrap;
    }
    .header-sentinel{
      position:absolute;
      top:0;left:0;width:1px;height:1px;
      pointer-events:none;
      visibility:hidden;
    }

    /* Bottom tab navigation */
    .bottom-tabs{
      position:fixed;
      left:0; right:0; bottom:0;
      z-index:80;
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:2px;
      padding:6px 6px calc(6px + var(--safe-bottom));
      background:linear-gradient(180deg, rgba(8,7,5,.86), rgba(5,4,3,.98));
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border-top:1px solid rgba(255,255,255,.10);
      box-shadow:0 -12px 40px rgba(0,0,0,.5);
    }
    .bottom-tabs button{
      all:unset;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      min-height:50px;
      border-radius:14px;
      padding:6px 4px;
      color:rgba(255,255,255,.62);
      font-size:11px;
      font-weight:800;
      letter-spacing:.04em;
      cursor:pointer;
      box-shadow:none;
      background:transparent;
      border:1px solid transparent;
      transition:.16s background, .16s color, .16s border-color, .16s transform;
      -webkit-tap-highlight-color:transparent;
    }
    .bottom-tabs button .bt-ico{
      font-size:20px;
      line-height:1;
    }
    .bottom-tabs button.active{
      color:#fff;
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
      border-color:rgba(255,255,255,.14);
    }
    .bottom-tabs button:active{ transform:scale(.96); }

    /* FAB de filtros */
    .fab-filters{
      position:fixed;
      right:16px;
      bottom:calc(var(--tabbar-h) + 18px + var(--safe-bottom));
      z-index:75;
      width:auto;
      min-width:var(--fab-size);
      height:var(--fab-size);
      padding:0 18px 0 16px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:900;
      letter-spacing:.02em;
      background:linear-gradient(135deg, #E8ECF2, #9EA8B8) !important;
      color:#050505 !important;
      border:1px solid rgba(255,255,255,.55) !important;
      box-shadow:0 14px 38px rgba(0,0,0,.46), 0 0 0 1px rgba(0,0,0,.18) !important;
    }
    .fab-filters .fab-ico{ font-size:20px; line-height:1; }
    .fab-filters .fab-badge{
      display:none;
      min-width:22px;
      height:22px;
      padding:0 7px;
      border-radius:999px;
      background:#0b0a08;
      color:#fff;
      font-size:11px;
      font-weight:900;
      align-items:center;
      justify-content:center;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
    }
    .fab-filters .fab-badge.show{ display:inline-flex; }
    .fab-filters[hidden]{ display:none !important; }

    /* Acomoda tab bar fixa no padding inferior */
    body{ padding-bottom:calc(var(--tabbar-h) + 8px + var(--safe-bottom)); }
    @media (max-width:720px){
      body{ padding-bottom:calc(var(--tabbar-h) + 12px + var(--safe-bottom)); }
    }

    /* Mobile-filter-row da v13 fica sempre escondida (substituída pelo FAB) */
    .mobile-filter-row{ display:none !important; }

    /* Tab Mais — lista de ações */
    .more-tab{ display:grid; gap:14px; padding:6px 0 20px; }
    .more-section{
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(24,24,24,.86), rgba(10,10,10,.92));
      border-radius:20px;
      padding:14px;
      box-shadow:0 16px 42px rgba(0,0,0,.34);
    }
    .more-section h3{
      margin:0 0 10px;
      font-size:13px;
      letter-spacing:.10em;
      text-transform:uppercase;
      color:rgba(255,255,255,.72);
      font-weight:900;
    }
    .more-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .more-grid > .btn, .more-grid > button, .more-grid > label.btn{
      width:100%;
      justify-content:center;
      min-height:50px;
      border-radius:14px;
      font-weight:850;
    }
    .more-grid .span-all{ grid-column:1/-1; }
    .more-toggle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.025);
      border-radius:14px;
      color:var(--text);
      font-size:13px;
      font-weight:800;
    }
    .more-toggle small{
      display:block;
      color:var(--muted);
      font-weight:600;
      font-size:11px;
      letter-spacing:.02em;
      margin-top:3px;
    }
    .more-toggle input[type="checkbox"]{
      appearance:none;
      width:44px; height:26px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      position:relative;
      cursor:pointer;
      transition:.18s background;
      flex:0 0 44px;
      min-height:auto;
      border:1px solid rgba(255,255,255,.08);
      padding:0;
    }
    .more-toggle input[type="checkbox"]::after{
      content:"";
      position:absolute;
      top:2px; left:2px;
      width:20px; height:20px;
      border-radius:50%;
      background:#f2f2f2;
      transition:.18s transform, .18s background;
    }
    .more-toggle input[type="checkbox"]:checked{
      background:rgba(105,219,124,.55);
      border-color:rgba(105,219,124,.55);
    }
    .more-toggle input[type="checkbox"]:checked::after{
      transform:translateX(18px);
      background:#eaffef;
    }
    .more-info{
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }
    .more-info b{ color:var(--text); }
    .more-empty{
      text-align:center;
      padding:48px 18px;
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }
    .more-empty .em-ico{ font-size:48px; display:block; margin-bottom:10px; }

    /* Stats tab — espaçamento próprio (sem o dash de cima) */
    .stats-tab{ display:grid; gap:14px; padding:6px 0 16px; }
    .stats-tab .collector-hub{ margin:0; }

    /* Garage tab — esconde a dash duplicada original e usa filter shell limpa */
    .garage-tab .dash{
      grid-template-columns:repeat(3, minmax(0,1fr));
    }
    .garage-tab .quick-actions .right > #toggleViewBtn,
    .garage-tab .quick-actions .right > #clearBtn{
      display:none;
    }

    /* Em desktop (>720px), tab bar fica menor e podemos opcionalmente
       deixar o garage mostrar tudo. Mantém a navegação porque o app é mobile-first
       — em monitor grande continua funcional. */
    @media (min-width:721px){
      .bottom-tabs{
        max-width:560px;
        margin:0 auto;
        border-radius:18px 18px 0 0;
      }
      .fab-filters{ display:none; }
      /* No desktop a sticky toolbar v13 já funciona, mas mantemos o FAB sumido */
    }

    /* Em mobile (<=720px) o toolbar (filter sheet) já é um bottom sheet v13. Mantemos. */
    @media (max-width:720px){
      body.filters-open .fab-filters{ display:none; }
      body.tab-more main, body.tab-stats main, body.tab-goals main{
        /* nas outras abas, esconde o FAB de filtros */
      }
      body:not(.tab-garage) .fab-filters{ display:none !important; }
    }

    /* ==========================================================
       v14.2 — Wishlist + Notes + Activity log
       ========================================================== */

    /* Estrela de wishlist no card (canto superior esquerdo) */
    .wish-toggle{
      position:absolute;
      top:12px;
      left:12px;
      z-index:5;
      width:40px;
      height:40px;
      min-height:0;
      border-radius:50%;
      padding:0;
      display:grid;
      place-items:center;
      font-size:18px;
      line-height:1;
      background:rgba(8,7,5,.78) !important;
      border:1px solid rgba(255,255,255,.18) !important;
      color:rgba(255,255,255,.70) !important;
      box-shadow:0 6px 18px rgba(0,0,0,.42) !important;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      transition:.15s transform, .15s color, .15s border-color, .15s background;
      /* Perf Fase 1 fix PERF-03 (auditoria 2026-05-25): span agora hospeda role=button,
         então não há foco nativo. Damos foco visível explícito + cursor pointer. */
      cursor:pointer;
      user-select:none;
    }
    .wish-toggle:focus-visible{
      outline:2px solid var(--gold, #d7ad5c);
      outline-offset:2px;
    }
    .wish-toggle:hover{ transform:scale(1.06); }
    .wish-toggle:active{ transform:scale(.94); }
    .card.wishlisted .wish-toggle{
      color:#ffd97a !important;
      border-color:rgba(255,217,122,.7) !important;
      background:linear-gradient(135deg, rgba(255,217,122,.22), rgba(120,86,32,.30)) !important;
      box-shadow:0 8px 22px rgba(255,217,122,.22) !important;
    }
    .card.owned .wish-toggle{ /* quando já tem o carro, estrela fica menos protagonista */
      top:auto; bottom:12px;
    }
    .card.owned.wishlisted .wish-toggle{ /* mas se também é wishlist, mantém top */
      top:auto; bottom:12px;
    }

    /* Card com borda dourada quando wishlisted */
    .card.wishlisted{
      border-color:rgba(255,217,122,.55) !important;
      box-shadow:0 18px 56px rgba(180,130,40,.18) !important;
    }
    .card.owned.wishlisted{
      border-color:rgba(105,219,124,.58) !important; /* owned vence quando os dois */
    }

    /* Botões duplos do modal: ✓ Tenho / ☆ Wishlist */
    .modal-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .modal-actions #modalGalleryOpen{grid-column:1 / -1;}
    .modal-actions > button{
      width:100%;
      justify-content:center;
      min-height:42px;
      border-radius:14px;
      font-weight:900;
      font-size:12px;
    }
    #modalWishToggle{
      border-color:rgba(255,217,122,.45) !important;
      background:rgba(255,217,122,.08) !important;
      color:#fff5d8 !important;
    }
    #modalWishToggle.active{
      background:linear-gradient(135deg, rgba(255,217,122,.28), rgba(120,86,32,.32)) !important;
      border-color:rgba(255,217,122,.7) !important;
      color:#fff !important;
    }

    /* Atividade recente na aba Stats */
    .stats-activity{
      border:1px solid rgba(245,212,140,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
                  rgba(16,12,8,.82);
      border-radius:22px;
      padding:14px;
      box-shadow:0 18px 50px rgba(0,0,0,.24);
    }
    .stats-activity h3{
      margin:0 0 6px;
      font-size:14px;
      letter-spacing:.04em;
    }
    .stats-activity .sa-sub{
      color:var(--muted);
      font-size:12px;
      margin-bottom:10px;
      line-height:1.4;
    }
    .stats-activity .sa-row{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 10px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
      border-radius:12px;
      margin-bottom:6px;
      font-size:13px;
    }
    .stats-activity .sa-row:last-child{ margin-bottom:0; }
    .stats-activity .sa-ico{
      font-size:18px;
      width:28px;
      text-align:center;
    }
    .stats-activity .sa-body{ flex:1; min-width:0; }
    .stats-activity .sa-title{
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .stats-activity .sa-when{
      color:var(--muted);
      font-size:11px;
    }
    .stats-activity .sa-empty{
      color:var(--muted);
      font-size:12px;
      padding:14px 8px;
      text-align:center;
    }

    /* Linha "ritmo" */
    .stats-pace{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }
    .stats-pace span{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      border-radius:999px;
      padding:7px 12px;
      font-size:12px;
      color:var(--text);
    }
    .stats-pace span b{ color:#ffd97a; font-weight:900; }

    /* Search-in-notes toggle */
    .search-scope{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:11px;
      color:var(--muted);
      margin-top:6px;
    }
    .search-scope input{ min-height:auto; width:auto; }

    /* ==========================================================
       v14.3 — Gamificação: achievements, próxima meta, presets, década
       ========================================================== */

    /* Aba Metas — filtro + grid */
    .goals-tab{ display:grid; gap:14px; padding:6px 0 16px; }
    .goals-filter{
      display:flex;
      gap:6px;
      overflow-x:auto;
      scrollbar-width:none;
      padding-bottom:4px;
    }
    .goals-filter::-webkit-scrollbar{ display:none; }
    .goals-filter button{
      flex:0 0 auto;
      min-height:38px;
      padding:6px 14px;
      border-radius:999px;
      font-size:12px;
      font-weight:850;
      letter-spacing:.04em;
    }
    .goals-filter button.active{
      background:linear-gradient(135deg, #E8ECF2, #9EA8B8) !important;
      color:#050505 !important;
      border-color:rgba(255,255,255,.55) !important;
    }
    .goals-summary{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:12px;
    }
    .goals-summary b{ color:#ffd97a; font-size:14px; }

    .ach-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:10px;
    }
    @media (max-width:380px){ .ach-grid{ grid-template-columns:1fr; } }
    .ach-card{
      position:relative;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(36,36,36,.96), rgba(12,12,12,.98));
      border-radius:18px;
      padding:14px 12px 12px;
      display:flex;
      flex-direction:column;
      gap:6px;
      box-shadow:0 12px 30px rgba(0,0,0,.32);
      overflow:hidden;
    }
    .ach-card.unlocked{
      border-color:rgba(255,217,122,.7);
      box-shadow:0 0 0 1px rgba(255,217,122,.25), 0 16px 38px rgba(140,100,30,.20);
      background:
        radial-gradient(circle at 80% 0%, rgba(255,217,122,.22), transparent 50%),
        linear-gradient(180deg, rgba(36,30,18,.96), rgba(14,10,5,.98));
    }
    .ach-card.locked{ filter:saturate(.55) brightness(.86); }
    .ach-emoji{
      font-size:30px;
      line-height:1;
    }
    .ach-title{
      font-family:var(--serif);
      font-size:16px;
      line-height:1.1;
      letter-spacing:-.02em;
      margin:0;
    }
    .ach-desc{
      color:var(--muted);
      font-size:11.5px;
      line-height:1.35;
    }
    .ach-meta{
      margin-top:auto;
      font-size:10px;
      color:var(--muted);
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .ach-card.unlocked .ach-meta{
      color:#ffd97a;
      font-weight:900;
    }
    .ach-bar{
      height:6px;
      background:rgba(255,255,255,.07);
      border-radius:999px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.06);
    }
    .ach-bar > span{
      display:block;
      height:100%;
      width:0%;
      background:linear-gradient(90deg, #6F7784, #f5d48c);
      transition:width .25s ease;
    }
    .ach-card.unlocked .ach-bar > span{
      background:linear-gradient(90deg, #ffd97a, #fff5d8);
      box-shadow:0 0 14px rgba(255,217,122,.4);
    }
    /* Épico 1 — barras de desempenho no modal e na comparação */
    .cr-spec-bars{display:grid;gap:7px;padding:12px 14px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:rgba(255,255,255,.02)}
    .cr-spec-bars[hidden]{display:none}
    .cr-spec-row{display:grid;grid-template-columns:84px 1fr 38px;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
    .cr-spec-label{white-space:nowrap}
    .cr-spec-track{height:6px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
    .cr-spec-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,#6F7784,#f5d48c);transition:width .25s ease}
    .cr-spec-val{font-variant-numeric:tabular-nums;text-align:right;color:var(--text)}
    /* Épico 1 — ficha técnica (página individual do carro) */
    .cr-carspec{padding:10px 14px 12px;border-bottom:1px solid var(--line2);background:rgba(255,255,255,.015)}
    .cr-carspec[hidden]{display:none}
    .cr-carspec-head{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
    .cr-carspec-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.05)}
    .cr-carspec-row:last-child{border-bottom:none}
    .cr-carspec-row b{color:var(--muted);font-weight:600}
    .cr-carspec-row span{text-align:right}
    .cr-carspec-status{color:var(--muted);font-size:13px}
    /* Épico 1 — estatísticas por jogo (abas FH6 ▸ FH5 ▸ …) */
    .cr-gamestats{padding:10px 14px 12px;border-bottom:1px solid var(--line2)}
    .cr-gamestats[hidden]{display:none}
    .detail-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 10px}
    .detail-tabs button{min-width:0;justify-content:center;border-radius:12px;padding:7px 6px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.035);border-color:var(--line2);color:var(--muted)}
    .detail-tabs button.active{background:linear-gradient(135deg,#E8ECF2,#9EA8B8);border-color:rgba(255,255,255,.5);color:#050505}
    .detail-panel{display:grid;gap:12px}
    .detail-panel[hidden]{display:none}
    .detail-panel .modal-actions{margin-top:0}
    /* Seletor de jogo inline (visão única, não abas aninhadas) */
    .cr-gs-selector{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
    .cr-gs-selector-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
    .cr-gs-single{font-weight:800;font-size:12px;color:var(--text)}
    .cr-gs-tabs{display:flex;gap:6px;flex-wrap:wrap}
    .cr-gs-tab{font-weight:800;letter-spacing:.05em;font-size:12px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;cursor:pointer;transition:all .15s ease}
    .cr-gs-tab:hover{color:var(--text);border-color:var(--line)}
    .cr-gs-tab.active{color:#04130b;background:#f5d48c;border-color:#f5d48c}
    .cr-gs-pi{color:var(--muted);font-size:12px;margin-bottom:8px}
    .cr-gs-bars{padding:0;border:none;background:none;margin-bottom:8px}
    .cr-gs-avail{margin-top:8px;border-top:1px dashed rgba(255,255,255,.08);padding-top:7px}
    .cr-gs-avail-h{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
    .cr-gs-avail-row{display:flex;gap:8px;font-size:12px;padding:2px 0}
    .cr-gs-avail-row b{color:var(--muted);font-weight:600;white-space:nowrap}
    /* Épico 4 — banner de novidades */
    .new-cars-banner{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;border:1px solid rgba(124,246,176,.4);border-radius:16px;background:linear-gradient(180deg,rgba(124,246,176,.10),rgba(124,246,176,.03));color:var(--text);font-size:14px}
    .new-cars-banner[hidden]{display:none}
    .new-cars-banner .ncb-ico{font-size:18px}
    .new-cars-banner .ncb-text{flex:1;min-width:0}
    .new-cars-banner .ncb-text strong{letter-spacing:.04em;text-transform:uppercase;font-size:12px;color:#7CF6B0}
    /* Épico 3 — stats avançadas */
    .cr-value-card,.cr-budget-card,.cr-reco-card,.cr-timeline-card{border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:18px;padding:14px;margin:14px 0}
    .cr-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 10px}
    .cr-value-tile{border:1px solid var(--line2);background:rgba(255,255,255,.04);border-radius:14px;padding:10px}
    .cr-value-tile small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
    .cr-value-tile b{font-size:16px;font-variant-numeric:tabular-nums}
    .cr-value-note{color:var(--muted);font-size:12px;margin-bottom:8px}
    .cr-value-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
    .cr-value-bar > span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#6F7784,#f5d48c);transition:width .25s ease}
    .cr-budget-field{display:block;color:var(--muted);font-size:13px;margin:4px 0 6px}
    #budgetInput{width:100%;border:1px solid var(--line);background:rgba(12,9,6,.82);color:var(--text);border-radius:14px;padding:11px 13px;font-size:15px}
    .cr-budget-result{color:var(--muted);font-size:13px;line-height:1.5;margin-top:10px}
    .cr-budget-result b{color:var(--text)}
    .cr-reco-list{display:grid;gap:8px;margin-top:6px}
    .cr-reco-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--text);border-radius:14px;padding:10px 12px;cursor:pointer}
    .cr-reco-row:hover{border-color:var(--line)}
    .cr-reco-emoji{font-size:18px}
    .cr-reco-body{flex:1;min-width:0;display:flex;flex-direction:column}
    .cr-reco-body span{color:var(--muted);font-size:12px}
    .cr-reco-go{color:var(--muted)}
    .cr-timeline-chart svg{width:100%;height:90px;display:block}
    .cr-timeline-cap{color:var(--muted);font-size:12px;margin-top:6px}
    /* Épico 2 — comparação */
    .cmp-toggle.active{background:rgba(124,246,176,.18) !important;border-color:rgba(124,246,176,.5) !important;color:#7CF6B0 !important}
    .compare-bar{position:fixed;left:12px;right:12px;bottom:78px;z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(29,22,15,.97),rgba(13,10,7,.98));box-shadow:0 18px 60px rgba(0,0,0,.5)}
    .compare-bar[hidden]{display:none}
    .cmp-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
    .cmp-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:rgba(255,255,255,.05);border-radius:999px;padding:5px 8px;font-size:12px;color:var(--text)}
    .cmp-chip-x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
    .cmp-actions{display:flex;gap:8px}
    .compare-dialog{border:none;border-radius:22px;background:linear-gradient(180deg,#21170f,#0d0a07);color:var(--text);border:1px solid var(--line);width:min(680px,calc(100% - 24px));max-height:90vh;padding:0;overflow:auto}
    .cmp-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:#16100a}
    .cmp-dialog-body{padding:8px 12px 16px}
    .cmp-table{width:100%;border-collapse:collapse;font-size:13px}
    .cmp-table th,.cmp-table td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line2);vertical-align:bottom}
    .cmp-rowlabel{text-align:left !important;color:var(--muted);font-weight:600;white-space:nowrap}
    .cmp-h-make{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
    .cmp-h-name{font-weight:700}
    .cmp-table td.cmp-best{color:#04130b;background:rgba(124,246,176,.85);border-radius:8px;font-weight:800}
    .ach-progress-num{
      font-variant-numeric:tabular-nums;
      font-size:11px;
      color:var(--text);
      font-weight:800;
    }

    /* Próxima meta — widget no topo da Stats */
    .next-goals{
      border:1px solid rgba(255,217,122,.20);
      background:
        linear-gradient(180deg, rgba(255,217,122,.06), rgba(255,255,255,.018)),
        rgba(16,12,8,.86);
      border-radius:22px;
      padding:14px;
      box-shadow:0 18px 50px rgba(0,0,0,.24);
    }
    .next-goals h3{
      margin:0 0 10px;
      font-size:14px;
      letter-spacing:.04em;
    }
    .next-goals-list{ display:grid; gap:8px; }
    .next-goal-row{
      display:grid;
      grid-template-columns:1fr auto;
      gap:8px 12px;
      align-items:center;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      border-radius:14px;
    }
    .next-goal-msg{
      font-size:13px;
      line-height:1.3;
    }
    .next-goal-msg b{ color:#ffd97a; }
    .next-goal-row button{
      min-height:38px;
      padding:6px 12px;
      font-size:11px;
      border-radius:999px;
      font-weight:850;
    }
    .next-goal-bar{
      grid-column:1/-1;
      height:6px;
      background:rgba(255,255,255,.07);
      border-radius:999px;
      overflow:hidden;
    }
    .next-goal-bar > span{
      display:block;height:100%;
      background:linear-gradient(90deg, #ffd97a, #fff5d8);
      box-shadow:0 0 10px rgba(255,217,122,.3);
    }
    .next-goal-empty{
      color:var(--muted);
      font-size:12px;
      padding:10px;
      text-align:center;
    }

    /* Toast festivo (achievement unlock) */
    .toast.toast-celebrate{
      background:linear-gradient(135deg, #f7d77a, #fff5d8) !important;
      color:#1c1407 !important;
      font-weight:900;
      border-color:rgba(255,217,122,.7) !important;
      box-shadow:0 18px 50px rgba(255,200,80,.32) !important;
    }

    /* Presets chips no topo do filter sheet */
    .preset-strip{
      display:flex;
      gap:8px;
      overflow-x:auto;
      scrollbar-width:none;
      padding:4px 2px 8px;
      margin-bottom:4px;
    }
    .preset-strip::-webkit-scrollbar{ display:none; }
    .preset-chip{
      flex:0 0 auto;
      min-height:42px;
      padding:8px 14px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .preset-chip .preset-emoji{ font-size:14px; }
    .preset-chip .preset-del{
      margin-left:4px;
      opacity:.6;
      font-size:14px;
      line-height:1;
    }
    .preset-chip:active{ transform:scale(.97); }
    .preset-save-btn{
      width:100%;
      justify-content:center;
      min-height:46px;
      border-radius:14px;
      margin-top:2px;
    }

    /* Filtro por década (chips horizontais acima do grid de cards) */
    .decade-strip{
      display:flex;
      gap:6px;
      overflow-x:auto;
      scrollbar-width:none;
      padding:6px 2px 10px;
      margin:0 0 6px;
    }
    .decade-strip::-webkit-scrollbar{ display:none; }
    .decade-chip{
      flex:0 0 auto;
      min-height:36px;
      padding:6px 12px;
      border-radius:999px;
      font-size:11px;
      font-weight:850;
      letter-spacing:.05em;
    }
    .decade-chip.active{
      background:linear-gradient(135deg, #E8ECF2, #9EA8B8) !important;
      color:#050505 !important;
      border-color:rgba(255,255,255,.55) !important;
    }
    /* Filtro rápido por status (chips abaixo da inline-search): Todos / Faltam / Tenho / Novos */
    .status-strip{
      display:flex;
      gap:6px;
      overflow-x:auto;
      scrollbar-width:none;
      padding:6px 2px 10px;
      margin:0 0 6px;
    }
    .status-strip::-webkit-scrollbar{ display:none; }
    .status-chip{
      flex:0 0 auto;
      min-height:36px;
      padding:6px 14px;
      border-radius:999px;
      font-size:11px;
      font-weight:850;
      letter-spacing:.05em;
    }
    .status-chip.active{
      background:#e10600 !important;
      color:#fff !important;
      border-color:rgba(255,255,255,.25) !important;
    }

    /* Inline search bar (acima do grid, sempre visível) */
    .inline-search{
      position:sticky;
      top:0;
      z-index:25;
      display:flex;
      align-items:center;
      gap:8px;
      margin:0 0 8px;
      padding:8px 0;
      background:linear-gradient(180deg, rgba(5,5,5,.96), rgba(5,5,5,.78));
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    body.header-collapsed .inline-search{
      top:0;
    }
    .inline-search .is-field{
      position:relative;
      flex:1;
      min-width:0;
    }
    .inline-search .is-field::before{
      content:'>';
      position:absolute;
      left:14px;
      top:50%;
      transform:translateY(-50%);
      font-size:15px;
      font-weight:700;
      color:#e10600;
      opacity:.9;
      pointer-events:none;
    }
    .inline-search input{
      width:100%;
      min-height:46px;
      padding:10px 42px 10px 40px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(14,14,14,.92);
      color:var(--text);
      font-size:15px;
      box-shadow:0 8px 22px rgba(0,0,0,.32);
    }
    .inline-search input::placeholder{ color:#777; }
    .inline-search input:focus{
      outline:none;
      border-color:rgba(255,255,255,.40);
      box-shadow:0 0 0 3px rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.32);
    }
    .inline-search .is-clear{
      position:absolute;
      right:6px;
      top:50%;
      transform:translateY(-50%);
      width:34px;
      height:34px;
      min-height:0;
      border-radius:50%;
      padding:0;
      font-size:14px;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.10) !important;
      border:none !important;
      color:#fff !important;
      box-shadow:none !important;
    }
    .inline-search.has-text .is-clear{ display:inline-flex; }
    .inline-search .is-voice{
      width:46px;
      height:46px;
      min-height:0;
      padding:0;
      border-radius:14px;
      font-size:18px;
      flex:0 0 46px;
    }
    .inline-search .is-voice[hidden]{ display:none; }
    .inline-search .is-filter{
      width:54px;
      height:46px;
      min-height:0;
      padding:0;
      border-radius:0;
      flex:0 0 54px;
      background:#e10600 !important;
      color:#fff !important;
      border:0 !important;
      font-size:18px;
      clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%);
      box-shadow:0 8px 22px rgba(0,0,0,.32);
    }
    .inline-search .is-filter:active{ filter:brightness(.9); }
    .inline-search .is-voice.listening{
      background:linear-gradient(135deg, #ff7a7a, #c94747) !important;
      color:#fff !important;
      border-color:rgba(255,180,180,.6) !important;
      animation:isVoicePulse 1s infinite;
    }
    @keyframes isVoicePulse{
      0%,100% { box-shadow:0 0 0 0 rgba(255,122,122,.5); }
      50%     { box-shadow:0 0 0 8px rgba(255,122,122,.0); }
    }
    .inline-search-count{
      font-size:11px;
      color:var(--muted);
      padding:0 4px 6px;
    }
    .inline-search-count[hidden]{ display:none; }

    /* ==========================================================
       v14.4 — Polish & gestos: swipe, pinch, pull-to-refresh,
       lista compacta, galeria, quick-mark highlight
       ========================================================== */

    /* Swipe — captura horizontal, libera vertical */
    .card[data-swipe="on"]{
      touch-action: pan-y;
    }
    .card.swiping{
      transition:none !important;
      z-index:4;
    }
    .card .swipe-feedback{
      position:absolute;
      top:0; bottom:0;
      width:96px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:34px;
      font-weight:900;
      pointer-events:none;
      opacity:0;
      z-index:6;
    }
    .card .swipe-feedback.right{
      left:0;
      background:linear-gradient(90deg, rgba(105,219,124,.42), transparent);
      color:#dfffe8;
    }
    .card .swipe-feedback.left{
      right:0;
      background:linear-gradient(270deg, rgba(255,217,122,.42), transparent);
      color:#fff5d8;
    }

    /* Pull-to-refresh */
    .ptr-indicator{
      position:fixed;
      left:50%;
      top:calc(env(safe-area-inset-top, 0px) + 6px);
      transform:translateX(-50%) translateY(-110%);
      z-index:78;
      background:rgba(8,7,5,.92);
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      padding:9px 16px;
      color:#fff;
      font-size:12px;
      font-weight:900;
      letter-spacing:.04em;
      box-shadow:0 14px 32px rgba(0,0,0,.46);
      backdrop-filter:blur(12px);
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition:transform .18s ease, opacity .18s ease;
      opacity:0;
      pointer-events:none;
      white-space:nowrap;
    }
    .ptr-indicator.visible{
      transform:translateX(-50%) translateY(0);
      opacity:1;
    }
    .ptr-indicator .ptr-arrow{
      display:inline-block;
      transition:transform .15s ease;
      font-size:14px;
    }
    .ptr-indicator.ready .ptr-arrow{
      transform:rotate(180deg);
    }
    .ptr-indicator.spinning .ptr-arrow{
      animation:ptr-spin 1s linear infinite;
    }
    @keyframes ptr-spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

    /* View mode toggle (3-way: card / list / gallery) */
    .view-mode-strip{
      display:inline-flex;
      gap:4px;
      padding:4px;
      border-radius:14px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }
    .view-mode-strip button{
      min-height:38px;
      padding:4px 12px;
      border-radius:10px;
      font-size:12px;
      font-weight:850;
      background:transparent !important;
      border:1px solid transparent !important;
      color:rgba(255,255,255,.62) !important;
      box-shadow:none !important;
    }
    .view-mode-strip button.active{
      background:rgba(255,255,255,.12) !important;
      color:#fff !important;
      border-color:rgba(255,255,255,.18) !important;
    }

    /* Gallery view — grid 2 colunas, só thumb quadrado + check + star */
    body.gallery-mode .grid{
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:8px;
    }
    @media (min-width:721px){
      body.gallery-mode .grid{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
    }
    body.gallery-mode .card{
      min-height:auto;
      padding:0;
      border-radius:16px;
      background:#0a0a0a !important;
    }
    body.gallery-mode .card::after{ display:none; }
    body.gallery-mode .card.owned::before{
      content:'✓';
      top:6px; left:6px;
      font-size:11px;
      padding:4px 7px;
      border-radius:999px;
    }
    body.gallery-mode .thumb{
      margin:0;
      height:auto;
      aspect-ratio:1/1;
      border-radius:16px;
      border:none;
    }
    body.gallery-mode .body,
    body.gallery-mode .badge-row,
    body.gallery-mode .swipe-feedback{ display:none !important; }
    body.gallery-mode .wish-toggle{
      width:32px; height:32px;
      font-size:14px;
      top:6px; left:auto; right:6px;
    }

    /* List mode (v13 já tem, melhorando o sem-thumb compacto) */
    body.compact-list .grid{
      grid-template-columns:1fr !important;
      gap:6px;
    }
    body.compact-list .card{
      display:flex !important;
      flex-direction:row !important;
      grid-template-columns:none !important;
      min-height:56px !important;
      padding:0 !important;
      border-radius:12px !important;
      align-items:stretch;
    }
    body.compact-list .card::after{ display:none; }
    body.compact-list .thumb,
    body.compact-list .badge-row,
    body.compact-list .unlock,
    body.compact-list .swipe-feedback,
    body.compact-list .make{ display:none !important; }
    body.compact-list .body{
      flex:1;
      min-height:auto !important;
      padding:8px 12px !important;
      display:grid !important;
      grid-template-columns:1fr auto !important;
      grid-template-rows:auto auto !important;
      gap:2px 8px !important;
      align-items:center;
    }
    body.compact-list .topline{
      display:contents;
    }
    body.compact-list .topline > div:first-child{
      min-width:0;
      overflow:hidden;
    }
    body.compact-list .title{
      font-size:13px !important;
      font-family:var(--font) !important;
      letter-spacing:0 !important;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    body.compact-list .year{
      font-size:13px !important;
      grid-column:2;
      grid-row:1;
    }
    body.compact-list .meta{
      grid-column:1 / -1;
      grid-row:2;
      font-size:10px !important;
      color:var(--soft);
    }
    body.compact-list .meta .pill{
      padding:2px 6px !important;
      font-size:10px !important;
    }
    body.compact-list .meta .pill:nth-child(n+3){ display:none; }
    body.compact-list .card-actions{
      display:none !important;
    }
    body.compact-list .wish-toggle{
      position:relative;
      top:auto !important; left:auto !important; bottom:auto !important; right:auto !important;
      width:38px; height:38px;
      flex:0 0 38px;
      align-self:center;
      margin:0 6px 0 8px;
      font-size:14px;
    }
    /* Em compact-list, um tap no card abre o detalhe (sem botão dedicado).
       Adiciona affordance via cursor + active state. */
    body.compact-list .card{ cursor:pointer; }
    body.compact-list .card:active{ background:rgba(255,255,255,.05) !important; }
    body.compact-list .card.owned{
      background:rgba(105,219,124,.10) !important;
      border-color:rgba(105,219,124,.42) !important;
    }
    body.compact-list .card.wishlisted{
      border-left:3px solid rgba(255,217,122,.7) !important;
    }

    /* Quick-mark highlight pulse */
    .card.quick-mark-pulse{
      animation:qmPulse .6s ease;
    }
    @keyframes qmPulse{
      0%   { box-shadow:0 0 0 0 rgba(255,255,255,.0); }
      40%  { box-shadow:0 0 0 8px rgba(105,219,124,.32); transform:scale(1.015); }
      100% { box-shadow:0 0 0 0 rgba(255,255,255,.0); }
    }

    /* Pinch zoom no modal */
    .modal-img.pinchable{
      overflow:hidden;
      touch-action:none;
      position:relative;
      cursor:zoom-in;
    }
    .modal-img.pinchable img{
      transform-origin:50% 50%;
      transition:transform .18s ease;
      will-change:transform;
      user-select:none;
      -webkit-user-drag:none;
    }
    .modal-img.pinchable.pinching img{
      transition:none;
    }
    .modal-img.pinchable.zoomed{
      cursor:zoom-out;
    }
    .modal-img.pinchable::after{
      content:'pinça para zoom · dois toques resetam';
      position:absolute;
      bottom:8px;
      right:10px;
      background:rgba(0,0,0,.62);
      color:#fff;
      font-size:10px;
      padding:4px 8px;
      border-radius:999px;
      pointer-events:none;
      opacity:.6;
      letter-spacing:.04em;
    }
    .modal-img.pinchable.zoomed::after{ display:none; }
    @media (hover:hover){ .modal-img.pinchable::after{ content:'clique pra zoom in/out'; } }

    /* ==========================================================
       CARBON BLACK ICE THEME - final cold-carbon override
       Paleta: preto carbono, grafite frio, metal claro e azul gelo.
       ========================================================== */
    :root{
      --bg:#030405;
      --bg2:#080A0D;
      --panel:#0D1014;
      --panel2:#151A20;
      --card:#101419;
      --card-soft:#1A2028;
      --line:rgba(210,225,245,.13);
      --line2:rgba(255,255,255,.08);
      --text:#F5F7FA;
      --muted:#A4AFBD;
      --soft:#788391;
      --gold:#D8E2EF;
      --gold2:#FFFFFF;
      --red:#FF5D73;
      --green:#57E389;
      --blue:#7DD3FC;
      --shadow:0 22px 74px rgba(0,0,0,.68);
      --collector-card:#101419;
      --collector-card-2:#151A20;
      --collector-edge:rgba(216,226,239,.18);
      --collector-glow:rgba(125,211,252,.11);
      --collector-green:#57E389;
      --collector-red:#FF5D73;
    }

    body{
      background:
        radial-gradient(circle at 18% 0%, rgba(216,226,239,.10), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(125,211,252,.08), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(87,227,137,.045), transparent 34%),
        linear-gradient(135deg, #030405 0%, #080A0D 48%, #101419 100%) !important;
    }
    body::before{
      opacity:.22 !important;
      background-image:
        linear-gradient(135deg, rgba(255,255,255,.032) 25%, transparent 25%),
        linear-gradient(225deg, rgba(125,211,252,.022) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,.020) 25%, transparent 25%),
        linear-gradient(315deg, rgba(216,226,239,.030) 25%, rgba(3,4,5,.02) 25%) !important;
      background-position:14px 0, 14px 0, 0 0, 0 0 !important;
      background-size:28px 28px !important;
    }

    header,
    .bottom-tabs{
      background:linear-gradient(180deg, rgba(3,4,5,.96), rgba(8,10,13,.84)) !important;
      border-color:rgba(216,226,239,.11) !important;
    }
    .filter-sheet{
      background:linear-gradient(180deg, rgba(13,16,20,.98), rgba(3,4,5,.99)) !important;
      border-color:rgba(216,226,239,.13) !important;
    }
    .filter-sheet-head{
      background:linear-gradient(180deg, rgba(13,16,20,1), rgba(13,16,20,.92)) !important;
    }
    .filter-backdrop{
      background:rgba(0,0,0,.66) !important;
    }

    a,
    .eyebrow,
    .make,
    .details-panel summary,
    .kbd,
    .style-number,
    .mini-progress-pct,
    .stats-pace span b,
    .goals-summary b,
    .achievement-card h3,
    .next-goal-msg b{
      color:#FFFFFF !important;
    }
    .subtitle,
    .source-note,
    .unlock,
    footer{
      color:#A4AFBD !important;
    }
    .year,
    .metric small{
      color:#788391 !important;
    }

    .btn,
    button,
    .quick-filter-chip,
    .preset-chip{
      background:linear-gradient(180deg, rgba(216,226,239,.078), rgba(216,226,239,.032)) !important;
      border-color:rgba(216,226,239,.14) !important;
      color:#F5F7FA !important;
      box-shadow:0 12px 30px rgba(0,0,0,.34) !important;
    }
    .btn:hover,
    button:hover{
      background:linear-gradient(180deg, rgba(216,226,239,.13), rgba(216,226,239,.045)) !important;
      border-color:rgba(216,226,239,.30) !important;
    }
    .btn.primary,
    .fab-filters,
    .save-preset-btn,
    .share-btn{
      background:linear-gradient(135deg, #FFFFFF, #D8E2EF) !important;
      border-color:rgba(255,255,255,.56) !important;
      color:#030405 !important;
      box-shadow:0 14px 38px rgba(125,211,252,.13) !important;
    }
    .btn.danger{
      background:rgba(255,93,115,.10) !important;
      border-color:rgba(255,93,115,.32) !important;
      color:#FFE1E7 !important;
    }

    .status-bar,
    .metric,
    .progress-wrap,
    .collector-panel,
    .details-panel,
    .info-box,
    .chip,
    .pill,
    .stats-pace,
    .next-goal,
    .achievement-card,
    .gallery-status,
    .empty{
      background:linear-gradient(180deg, rgba(26,32,40,.82), rgba(13,16,20,.88)) !important;
      border-color:rgba(216,226,239,.10) !important;
    }
    .metric::after,
    .collector-panel::after{
      background:radial-gradient(circle, rgba(125,211,252,.12), transparent 66%) !important;
    }
    .progress > span,
    .hero-condensed .hc-progress span,
    .mini-progress-bar span,
    .achievement-progress span,
    .next-goal-bar span{
      background:linear-gradient(90deg, #57E389, #7DD3FC, #FFFFFF) !important;
      box-shadow:0 0 18px rgba(125,211,252,.25) !important;
    }

    .field input,
    .field select,
    .note-box textarea{
      background:rgba(8,10,13,.92) !important;
      border-color:rgba(216,226,239,.14) !important;
      color:#F5F7FA !important;
    }
    .field input::placeholder{
      color:#788391 !important;
    }
    .field select{
      background-image:
        linear-gradient(45deg, transparent 50%, #FFFFFF 50%),
        linear-gradient(135deg, #FFFFFF 50%, transparent 50%) !important;
    }

    .card{
      background:linear-gradient(180deg, rgba(26,32,40,.96), rgba(8,10,13,.98)) !important;
      border-color:rgba(216,226,239,.10) !important;
      box-shadow:0 16px 42px rgba(0,0,0,.46) !important;
    }
    .card:hover{
      border-color:rgba(216,226,239,.26) !important;
      box-shadow:0 26px 70px rgba(0,0,0,.58) !important;
    }
    .card.owned,
    body.compact-list .card.owned{
      border-color:rgba(87,227,137,.56) !important;
      box-shadow:0 18px 56px rgba(87,227,137,.10) !important;
    }
    .card.wishlisted,
    body.compact-list .card.wishlisted{
      border-color:rgba(125,211,252,.58) !important;
      border-left-color:rgba(125,211,252,.74) !important;
      box-shadow:0 18px 56px rgba(125,211,252,.11) !important;
    }
    .card.owned::before{
      color:#031008 !important;
      background:linear-gradient(135deg, #57E389, #CFFFE1) !important;
    }
    .thumb,
    .gallery-card .thumb{
      background:
        radial-gradient(circle at 50% 58%, rgba(125,211,252,.10), transparent 55%),
        linear-gradient(135deg, rgba(216,226,239,.055), rgba(3,4,5,.12)) !important;
      border-bottom-color:rgba(216,226,239,.08) !important;
    }
    .placeholder{
      color:#FFFFFF !important;
      background:
        radial-gradient(circle at top, rgba(125,211,252,.10), transparent 56%),
        linear-gradient(135deg, #151A20, #030405) !important;
    }

    .badge{
      color:#030405 !important;
      background:rgba(245,247,250,.94) !important;
    }
    .badge.dlc{background:#A7E8FF !important}
    .badge.fe{background:#D7E5FF !important}
    .badge.rare{background:#D8E2EF !important}
    .badge.legendary{background:#FFFFFF !important}
    .badge.epic{background:#C7D2FE !important}
    .badge.common{background:#B7C2D0 !important}
    .badge.barn{background:#9AA8B8 !important}
    .badge.treasure{background:#B8F8D0 !important}
    .badge.unknown{background:#788391 !important;color:#030405 !important}

    .wish-toggle,
    .modal-wish-btn,
    .achievement-card.unlocked,
    .toast-celebrate{
      border-color:rgba(125,211,252,.46) !important;
      background:linear-gradient(135deg, rgba(125,211,252,.22), rgba(216,226,239,.07)) !important;
      color:#E9F8FF !important;
      box-shadow:0 14px 38px rgba(125,211,252,.14) !important;
    }
    .wish-toggle.active,
    .modal-wish-btn.active,
    .preset-chip.active,
    .quick-filter-chip.active{
      border-color:rgba(255,255,255,.62) !important;
      background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(125,211,252,.16)) !important;
      color:#FFFFFF !important;
    }

    dialog{
      background:linear-gradient(180deg,#151A20,#030405) !important;
      border-color:rgba(216,226,239,.14) !important;
    }
    .modal-img,
    .modal-img img,
    .gallery-shot{
      background:#030405 !important;
    }
    .modal-gallery,
    .toast,
    .pull-refresh-indicator{
      background:linear-gradient(180deg,#080A0D,#151A20) !important;
      border-color:rgba(216,226,239,.13) !important;
    }
    .gallery-shot.active{
      border-color:rgba(255,255,255,.92) !important;
      box-shadow:0 0 0 2px rgba(125,211,252,.13) !important;
    }
    .swipe-hint.left{
      background:linear-gradient(90deg, rgba(87,227,137,.42), transparent) !important;
      color:#D9FFE8 !important;
    }
    .swipe-hint.right{
      background:linear-gradient(270deg, rgba(125,211,252,.42), transparent) !important;
      color:#E9F8FF !important;
    }

  

    /* ==========================================================
       v15 — Marcas + filtro mobile corrigido
       ========================================================== */
    .bottom-tabs{ grid-template-columns:repeat(5, 1fr) !important; }
    .bottom-tabs button{ font-size:10px; letter-spacing:.02em; }
    .bottom-tabs button .bt-ico{ font-size:19px; }

    .brands-tab{ display:grid; gap:14px; padding:6px 0 18px; }
    .brands-hero{
      display:grid;
      grid-template-columns:1fr auto;
      gap:14px;
      align-items:center;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 86% 14%, rgba(199,206,219,.12), transparent 36%),
        linear-gradient(180deg, rgba(24,24,24,.92), rgba(8,8,8,.94));
      border-radius:24px;
      padding:16px;
      box-shadow:0 18px 54px rgba(0,0,0,.38);
    }
    .brands-hero h2{
      margin:4px 0 7px;
      font-family:var(--serif);
      font-size:clamp(28px, 6vw, 44px);
      line-height:.95;
      letter-spacing:-.04em;
    }
    .brands-hero p{ margin:0; color:var(--muted); line-height:1.42; font-size:13px; }
    .brands-hero-stat{
      min-width:118px;
      min-height:96px;
      display:grid;
      place-items:center;
      text-align:center;
      border:1px solid rgba(255,255,255,.10);
      border-radius:22px;
      background:rgba(255,255,255,.045);
    }
    .brands-hero-stat b{ font-family:var(--serif); font-size:34px; line-height:1; }
    .brands-hero-stat span{ color:var(--muted); font-size:11px; line-height:1.25; }
    .brands-toolbar{
      display:grid;
      grid-template-columns:1fr auto auto;
      gap:10px;
      position:sticky;
      top:8px;
      z-index:18;
      padding:10px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      background:rgba(7,7,7,.82);
      backdrop-filter:blur(16px);
    }
    .brands-toolbar input{
      width:100%; min-height:48px; border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(14,14,14,.92);
      color:var(--text);
      padding:12px 14px;
      outline:none;
    }
    .brand-groups{ display:grid; gap:12px; }
    .brand-card{
      border:1px solid rgba(255,255,255,.10);
      border-radius:24px;
      background:linear-gradient(180deg, rgba(24,24,24,.92), rgba(9,9,9,.96));
      box-shadow:0 14px 42px rgba(0,0,0,.32);
      overflow:hidden;
    }
    .brand-card summary{
      list-style:none;
      cursor:pointer;
      padding:14px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:center;
      -webkit-tap-highlight-color:transparent;
    }
    .brand-card summary::-webkit-details-marker{display:none}
    .brand-title{display:grid; gap:5px; min-width:0;}
    .brand-title strong{font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .brand-title span{font-size:12px; color:var(--muted);}
    .brand-pct{font-family:var(--serif); font-weight:900; font-size:24px; color:#fff;}
    .brand-bar{grid-column:1/-1; height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06);}
    .brand-bar span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#69DB7C,#F2F2F2);}
    .brand-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 14px 12px;}
    .brand-actions .btn{justify-content:center; min-height:42px; border-radius:14px; font-size:12px;}
    .brand-car-list{display:grid; gap:8px; padding:0 14px 14px;}
    .brand-car-row{
      display:grid;
      grid-template-columns:52px 1fr auto;
      gap:10px;
      align-items:center;
      min-height:62px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      padding:7px;
      background:rgba(255,255,255,.035);
      cursor:pointer;
    }
    .brand-car-row.owned{border-color:rgba(105,219,124,.34); background:rgba(105,219,124,.055);}
    .brand-car-img{width:52px;height:48px;border-radius:12px;overflow:hidden;background:#050505;display:grid;place-items:center;}
    .brand-car-img img{width:100%;height:100%;object-fit:contain;display:block;}
    .brand-car-name{font-weight:900;font-size:13px;line-height:1.15;}
    .brand-car-meta{color:var(--muted);font-size:11px;margin-top:3px;}
    .brand-car-toggle{width:40px;height:40px;min-height:0;border-radius:13px;display:grid;place-items:center;padding:0;font-weight:900;}
    .brand-empty{border:1px dashed rgba(255,255,255,.12);border-radius:20px;padding:24px;text-align:center;color:var(--muted);background:rgba(255,255,255,.03);}

    /* Selects corrigidos: sem triângulo gigante e sem campo branco estourado no Chrome Android */
    .toolbar .field select,
    #filterSheet .field select{
      -webkit-appearance:auto !important;
      appearance:auto !important;
      color-scheme:dark !important;
      background:#101010 !important;
      background-image:none !important;
      color:#F2F2F2 !important;
      border-color:rgba(255,255,255,.16) !important;
      box-shadow:none !important;
    }
    .toolbar .field select option,
    #filterSheet .field select option{
      background:#101010 !important;
      color:#F2F2F2 !important;
    }
    .toolbar .field::after,
    #filterSheet .field::after{display:none !important; content:none !important;}

    @media (max-width:720px){
      .bottom-tabs{ grid-template-columns:repeat(5, 1fr) !important; }
      .bottom-tabs button{font-size:9px; padding-inline:2px;}
      .bottom-tabs button .bt-ico{font-size:18px;}
      .fab-filters{bottom:calc(68px + var(--safe-bottom));}
      .brands-toolbar{grid-template-columns:1fr 1fr; top:0;}
      .brands-toolbar input{grid-column:1/-1;}
      .brands-hero{grid-template-columns:1fr; border-radius:22px;}
      .brands-hero-stat{width:100%; min-height:74px;}
      .brand-card summary{padding:13px;}
      .brand-actions{grid-template-columns:1fr;}
      .brand-car-row{grid-template-columns:56px 1fr 44px;}
      .toolbar{background:linear-gradient(180deg, rgba(18,18,18,.99), rgba(5,5,5,1)) !important;}
      .filter-sheet-head{background:linear-gradient(180deg, rgba(18,18,18,1), rgba(18,18,18,.94)) !important;}
    }

  
    /* ==========================================================
       v16 — correção forte dos filtros no Chrome Android
       - remove triângulos CSS bugados
       - usa chevron SVG pequeno
       - mantém o bottom sheet escuro
       ========================================================== */
    .toolbar .field select,
    #filterSheet .field select{
      -webkit-appearance:none !important;
      appearance:none !important;
      color-scheme:dark !important;
      background-color:#101010 !important;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F2F2F2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
      background-repeat:no-repeat !important;
      background-position:right 16px center !important;
      background-size:18px 18px !important;
      color:#F2F2F2 !important;
      border-color:rgba(255,255,255,.16) !important;
      box-shadow:none !important;
      padding-right:48px !important;
    }
    .toolbar .field select::-ms-expand,
    #filterSheet .field select::-ms-expand{display:none !important;}
    .toolbar .field select option,
    #filterSheet .field select option{
      background:#101010 !important;
      color:#F2F2F2 !important;
    }
    .toolbar .field::before,
    .toolbar .field::after,
    #filterSheet .field::before,
    #filterSheet .field::after{
      display:none !important;
      content:none !important;
      border:0 !important;
      background:none !important;
    }
    @media (max-width:720px){
      .toolbar .field input,
      .toolbar .field select,
      #filterSheet .field input,
      #filterSheet .field select{
        min-height:56px !important;
        border-radius:18px !important;
      }
    }

  
    /* ==========================================================
       v17 — Import/Export reforçado
       ========================================================== */
    .backup-mode{
      grid-column:1/-1;
      display:grid;
      gap:7px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
      border-radius:16px;
      padding:11px;
      color:var(--muted);
      font-size:12px;
      font-weight:850;
    }
    .backup-mode select{
      width:100%;
      min-height:48px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:#101010;
      color:#F2F2F2;
      padding:0 44px 0 12px;
      -webkit-appearance:none;
      appearance:none;
      color-scheme:dark;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F2F2F2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 14px center;
      background-size:18px 18px;
    }
    .backup-health{
      display:grid;
      gap:5px;
      border:1px solid rgba(105,219,124,.20);
      background:
        radial-gradient(circle at 95% 0%, rgba(105,219,124,.08), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
      border-radius:16px;
      padding:12px;
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
    }
    .backup-health b{
      color:var(--text);
      font-size:13px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .backup-health code{
      color:#eaffef;
      background:rgba(105,219,124,.10);
      border:1px solid rgba(105,219,124,.18);
      border-radius:8px;
      padding:1px 5px;
      font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
      font-size:11px;
    }
    .backup-health.danger{
      border-color:rgba(255,100,100,.28);
      background:
        radial-gradient(circle at 95% 0%, rgba(255,100,100,.12), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
    }
    .backup-health.warn{
      border-color:rgba(255,217,122,.24);
      background:
        radial-gradient(circle at 95% 0%, rgba(255,217,122,.10), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
    }
    @media (max-width:720px){
      .more-grid{
        grid-template-columns:1fr 1fr;
      }
      .more-grid #exportBtn,
      .more-grid #copyBackupBtn,
      .more-grid label[for="importFile"]{
        grid-column:1/-1;
      }
      .backup-health{
        font-size:11px;
      }
    }

  
    /* ==========================================================
       v19 — Bottom navigation audit/fix
       - 5 botões reais no rodapé
       - toque mais confiável no Chrome Android
       - troca de aba visualmente clara
       - evita restauração de scroll confusa
       ========================================================== */
    :root{
      --tabbar-h: 74px;
    }

    .bottom-tabs{
      grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
      gap:6px !important;
      padding:8px 8px calc(8px + var(--safe-bottom)) !important;
      z-index:140 !important;
      pointer-events:auto !important;
      touch-action:manipulation !important;
      background:
        linear-gradient(180deg, rgba(18,18,18,.78), rgba(3,3,3,.98)) !important;
      border-top:1px solid rgba(255,255,255,.16) !important;
      box-shadow:0 -18px 54px rgba(0,0,0,.70) !important;
    }

    .bottom-tabs button{
      all:unset;
      box-sizing:border-box !important;
      min-width:0 !important;
      min-height:58px !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      justify-content:center !important;
      gap:3px !important;
      border-radius:18px !important;
      color:rgba(242,242,242,.58) !important;
      font-size:11px !important;
      font-weight:850 !important;
      letter-spacing:.01em !important;
      cursor:pointer !important;
      user-select:none !important;
      -webkit-user-select:none !important;
      -webkit-tap-highlight-color:transparent !important;
      touch-action:manipulation !important;
      background:rgba(255,255,255,.035) !important;
      border:1px solid rgba(255,255,255,.06) !important;
      transition:
        transform .12s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease !important;
    }

    .bottom-tabs button .bt-ico{
      font-size:21px !important;
      line-height:1 !important;
      filter:grayscale(.35) opacity(.75);
      transition:filter .16s ease, transform .16s ease;
    }

    .bottom-tabs button.active,
    .bottom-tabs button[aria-current="page"]{
      color:#050505 !important;
      background:linear-gradient(135deg, #F4F6FA, #AAB4C3) !important;
      border-color:rgba(255,255,255,.72) !important;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.18),
        0 12px 26px rgba(0,0,0,.45) !important;
      transform:translateY(-2px);
    }

    .bottom-tabs button.active .bt-ico,
    .bottom-tabs button[aria-current="page"] .bt-ico{
      filter:none;
      transform:translateY(-1px) scale(1.06);
    }

    .bottom-tabs button:active{
      transform:scale(.95) !important;
    }

    .bottom-tabs button.active:active,
    .bottom-tabs button[aria-current="page"]:active{
      transform:translateY(-2px) scale(.96) !important;
    }

    main > section.tab[hidden],
    main > .tab[hidden]{
      display:none !important;
    }

    main > section.tab.active,
    main > .tab.active{
      display:block !important;
    }

    body.tab-brands .fab-filters,
    body.tab-stats .fab-filters,
    body.tab-goals .fab-filters,
    body.tab-more .fab-filters{
      display:none !important;
    }

    body.tab-garage .fab-filters{
      display:inline-flex !important;
    }

    .tab-switch-flash{
      position:fixed;
      left:50%;
      bottom:calc(var(--tabbar-h) + 18px + var(--safe-bottom));
      transform:translateX(-50%) translateY(10px);
      z-index:150;
      opacity:0;
      pointer-events:none;
      background:rgba(10,10,10,.92);
      border:1px solid rgba(255,255,255,.16);
      color:#F2F2F2;
      box-shadow:0 16px 46px rgba(0,0,0,.55);
      border-radius:999px;
      padding:10px 14px;
      font-size:13px;
      font-weight:900;
      transition:opacity .16s ease, transform .16s ease;
      max-width:calc(100vw - 32px);
      white-space:nowrap;
    }

    .tab-switch-flash.show{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }

    @media (max-width:390px){
      .bottom-tabs{
        gap:4px !important;
        padding-left:6px !important;
        padding-right:6px !important;
      }
      .bottom-tabs button{
        min-height:56px !important;
        border-radius:15px !important;
        font-size:10px !important;
      }
      .bottom-tabs button .bt-ico{
        font-size:19px !important;
      }
    }

    @media (min-width:721px){
      .bottom-tabs{
        grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
        max-width:680px !important;
      }
    }

  
    /* ==========================================================
       v20 — auditoria geral/performance/mobile stability
       ========================================================== */
    .card,
    .brand-group,
    .more-section,
    .collector-panel,
    .stats-activity,
    .next-goals,
    .ach-card,
    .goal-card{
      content-visibility:auto;
      contain-intrinsic-size: 420px;
    }

    .grid{
      align-content:start !important;
      contain:layout style;
    }

    .thumb img,
    .gallery-shot img{
      transform:translateZ(0);
      backface-visibility:hidden;
    }

    .bottom-tabs,
    .fab-filters,
    .toolbar,
    dialog{
      transform:translateZ(0);
      backface-visibility:hidden;
    }

    .bottom-tabs{
      user-select:none !important;
      -webkit-user-select:none !important;
      overscroll-behavior:contain;
    }

    .bottom-tabs button{
      position:relative;
      overflow:hidden;
    }

    .bottom-tabs button::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:rgba(255,255,255,.22);
      opacity:0;
      transform:scale(.72);
      transition:opacity .18s ease, transform .18s ease;
      pointer-events:none;
    }

    .bottom-tabs button:active::after{
      opacity:.18;
      transform:scale(1);
    }

    body.v20-switching-tab main{
      pointer-events:none;
    }

    body.v20-rendering .grid{
      opacity:.985;
    }

    .perf-toast{
      position:fixed;
      left:50%;
      bottom:calc(var(--tabbar-h) + 84px + var(--safe-bottom));
      transform:translateX(-50%) translateY(10px);
      opacity:0;
      z-index:170;
      pointer-events:none;
      max-width:calc(100vw - 28px);
      padding:10px 14px;
      border-radius:999px;
      background:rgba(10,10,10,.94);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:0 18px 52px rgba(0,0,0,.58);
      color:#F2F2F2;
      font-weight:850;
      font-size:12px;
      white-space:nowrap;
      transition:.18s ease;
    }

    .perf-toast.show{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }

    .v20-error-banner{
      position:fixed;
      left:12px;
      right:12px;
      top:calc(10px + var(--safe-top));
      z-index:190;
      display:none;
      padding:12px 14px;
      border-radius:18px;
      background:rgba(30,12,12,.96);
      border:1px solid rgba(255,100,100,.38);
      color:#FFE4E4;
      box-shadow:0 18px 56px rgba(0,0,0,.55);
      font-size:12px;
      line-height:1.35;
    }

    .v20-error-banner.show{
      display:block;
    }

    @media (max-width:720px){
      .card{
        contain-intrinsic-size:392px;
      }
      .brand-group{
        contain-intrinsic-size:520px;
      }
      .toolbar{
        will-change:transform;
      }
      .bottom-tabs button{
        padding-bottom:4px !important;
      }
    }

    @media (prefers-reduced-motion: reduce){
      *{
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
        animation-duration:.001ms !important;
      }
    }

  
    /* ==========================================================
       v21 — correção crítica: sair dos filtros no Android
       ========================================================== */

    body.filters-open .fab-filters{
      display:none !important;
      pointer-events:none !important;
    }

    body.filters-open .toolbar,
    body.filters-open #filterSheet{
      transform:translateY(0) !important;
      pointer-events:auto !important;
      z-index:220 !important;
      opacity:1 !important;
      visibility:visible !important;
    }

    body.filters-open .filter-backdrop,
    body.filters-open #filterBackdrop{
      display:block !important;
      z-index:190 !important;
      pointer-events:auto !important;
    }

    body.filters-open .bottom-tabs{
      z-index:260 !important;
      pointer-events:auto !important;
    }

    body.filters-open main,
    body.filters-open.v20-switching-tab main,
    body.filters-open.v21-switching-tab main{
      pointer-events:auto !important;
    }

    body.v20-switching-tab #filterSheet,
    body.v20-switching-tab .toolbar,
    body.v20-switching-tab .bottom-tabs,
    body.v20-switching-tab #closeFiltersBtn,
    body.v20-switching-tab #filterBackdrop{
      pointer-events:auto !important;
    }

    #closeFiltersBtn{
      position:relative !important;
      z-index:235 !important;
      pointer-events:auto !important;
      touch-action:manipulation !important;
      cursor:pointer !important;
      min-width:54px !important;
      min-height:54px !important;
    }

    .filter-sheet-head{
      z-index:230 !important;
      position:sticky !important;
      top:0 !important;
    }

    #filterSheet{
      overscroll-behavior:contain !important;
      -webkit-overflow-scrolling:touch !important;
    }

    .filter-exit-hint{
      display:none;
      position:sticky;
      bottom:calc(var(--tabbar-h) + 10px + var(--safe-bottom));
      z-index:225;
      margin:12px 0 4px;
      padding:10px 12px;
      border-radius:16px;
      text-align:center;
      color:#DADDE3;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.10);
      font-size:12px;
      line-height:1.35;
    }

    body.filters-open .filter-exit-hint{
      display:block;
    }

    @media (max-width:720px){
      body.filters-open{
        overflow:hidden !important;
      }

      body.filters-open #filterSheet{
        max-height:calc(100dvh - var(--tabbar-h) - 8px - var(--safe-bottom)) !important;
        padding-bottom:calc(var(--tabbar-h) + 18px + var(--safe-bottom)) !important;
      }

      body.filters-open .bottom-tabs{
        background:linear-gradient(180deg, rgba(18,18,18,.92), rgba(3,3,3,.99)) !important;
      }
    }

  
    /* ==========================================================
       v22 — boot seguro: nunca ficar preso em "carregando"
       ========================================================== */
    #loading.v22-timeout{
      border-color:rgba(255,209,102,.34) !important;
      background:
        linear-gradient(180deg, rgba(255,209,102,.08), rgba(255,255,255,.025)),
        rgba(10,10,10,.92) !important;
    }

    .v22-recovery-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:12px;
    }

    .v22-recovery-actions .btn{
      min-height:44px !important;
      border-radius:14px !important;
      justify-content:center;
    }

    @media (max-width:720px){
      .v22-recovery-actions{
        display:grid;
        grid-template-columns:1fr;
      }
      #loading,
      #offlineBox{
        margin-top:10px;
      }
    }

  
    /* ==========================================================
       v23 — correção definitiva: painel de filtros com saída garantida
       ========================================================== */

    #filterHardClose{
      position:fixed;
      right:14px;
      bottom:calc(var(--tabbar-h) + 14px + var(--safe-bottom));
      z-index:420;
      display:none;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:52px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.72);
      background:linear-gradient(135deg, #F4F6FA, #AAB4C3);
      color:#050505;
      font-weight:950;
      font-size:14px;
      box-shadow:0 18px 50px rgba(0,0,0,.70);
      user-select:none;
      -webkit-user-select:none;
      touch-action:manipulation;
      cursor:pointer;
      pointer-events:auto;
    }

    body.filters-open #filterHardClose,
    body.filters-open-v23 #filterHardClose{
      display:inline-flex !important;
    }

    body.filters-open .fab-filters,
    body.filters-open-v23 .fab-filters{
      display:none !important;
      opacity:0 !important;
      visibility:hidden !important;
      pointer-events:none !important;
    }

    body.filters-open #filterBackdrop,
    body.filters-open-v23 #filterBackdrop,
    body.filters-open .filter-backdrop,
    body.filters-open-v23 .filter-backdrop{
      display:block !important;
      opacity:1 !important;
      visibility:visible !important;
      pointer-events:auto !important;
      z-index:300 !important;
    }

    body.filters-open #filterSheet,
    body.filters-open-v23 #filterSheet{
      z-index:360 !important;
      opacity:1 !important;
      visibility:visible !important;
      pointer-events:auto !important;
      transform:translateY(0) !important;
    }

    #closeFiltersBtn{
      z-index:410 !important;
      pointer-events:auto !important;
      touch-action:manipulation !important;
      cursor:pointer !important;
    }

    @media (max-width:720px){
      body.filters-open,
      body.filters-open-v23{
        overflow:hidden !important;
      }

      #filterSheet{
        transition:transform .22s ease, opacity .18s ease !important;
      }

      #filterSheet:not([data-v23-open="true"]){
        transform:translateY(calc(100% + 54px)) !important;
        pointer-events:none !important;
      }

      #filterSheet[data-v23-open="true"]{
        display:grid !important;
        transform:translateY(0) !important;
        pointer-events:auto !important;
        max-height:calc(100dvh - var(--tabbar-h) - 6px - var(--safe-bottom)) !important;
        padding-bottom:calc(var(--tabbar-h) + 82px + var(--safe-bottom)) !important;
      }

      body.filters-open .bottom-tabs,
      body.filters-open-v23 .bottom-tabs{
        z-index:390 !important;
        pointer-events:auto !important;
      }

      body.filters-open main,
      body.filters-open-v23 main,
      body.filters-open.v20-switching-tab main,
      body.filters-open-v23.v20-switching-tab main{
        pointer-events:auto !important;
      }

      .filter-sheet-head{
        z-index:405 !important;
      }
    }