/* ─── THEME VARIABLES — Editorial Retro v11 ─── */
  :root {
    --bg:#14101c;--surface:#221c2e;--surface-bright:#302840;--surface-high:#302840;
    --surface-highest:#3d3550;
    --primary:#60a0e0;--primary-container:#1c1830;
    --on-primary-container:#a0c0e8;--secondary-container:#221c2e;
    --on-secondary-container:#9a9090;
    --tertiary:#d4a030;--tertiary-dim:#9a7420;
    --on-surface:#e8dcc8;--on-surface-var:#8a8080;--outline:#4a4058;
    --outline-var:#302840;
    --radius-xs:6px;--radius-s:8px;--radius-m:8px;--radius-full:20px;
    --neon-green:#60c858;--neon-cyan:#58a0c8;--neon-pink:#c85868;
    --neon-yellow:#d4a030;--neon-blue:#58a0c8;--neon-red:#c85840;
    --glow:rgba(212,160,48,.06);--glow-active:rgba(212,160,48,.12);
    --glow-strong:rgba(212,160,48,.2);
    --pixel-inset:inset -2px -2px 0 #14101c, inset 2px 2px 0 #302840;
    --pixel-border:1px solid var(--outline-var);
    --arcade-border:1px solid var(--outline);
    --elevation-1:0 2px 8px rgba(212,160,48,.08);
    --elevation-2:0 4px 16px rgba(212,160,48,.12);
  }
  html[data-theme="oled"]{
    --bg:#050308;--surface:#0c0a14;--surface-bright:#14101c;--surface-high:#14101c;
    --surface-highest:#221c2e;--outline-var:#14101c;
    --pixel-inset:inset -2px -2px 0 #050308, inset 2px 2px 0 #14101c;
    --elevation-1:0 2px 8px rgba(212,160,48,.05);
    --elevation-2:0 4px 16px rgba(212,160,48,.08);
  }
  html[data-theme="light"]{
    --bg:#ede6d8;--surface:#f5f0e8;--surface-bright:#e4ddd0;--surface-high:#dcd5c8;
    --surface-highest:#c8c0b0;--primary:#4070b0;--primary-container:#d0d8e8;
    --on-primary-container:#203060;--secondary-container:#e4ddd0;
    --on-secondary-container:#3a3028;--tertiary:#a07818;--tertiary-dim:#785810;
    --on-surface:#1a1410;--on-surface-var:#5a5048;--outline:#908070;
    --outline-var:#c8c0b0;--glow:rgba(160,120,24,.04);--glow-active:rgba(160,120,24,.08);
    --glow-strong:rgba(160,120,24,.14);
    --neon-green:#2a7828;--neon-cyan:#286888;--neon-pink:#983848;
    --neon-yellow:#a07818;--neon-blue:#286888;--neon-red:#984038;
    --pixel-inset:inset -2px -2px 0 #dcd5c8, inset 2px 2px 0 #faf8f4;
    --arcade-border:1px solid var(--outline-var);
    --elevation-1:0 2px 8px rgba(0,0,0,.06);
    --elevation-2:0 4px 16px rgba(0,0,0,.1);
  }

  /* ─── ACCENT OVERRIDES — SNES-warmed ─── */
  html[data-accent="blue"]{--tertiary:#5890c8;--tertiary-dim:#3868a0;--neon-yellow:#5890c8;--glow:rgba(88,144,200,.06);--glow-active:rgba(88,144,200,.12);--glow-strong:rgba(88,144,200,.2)}
  html[data-accent="cyan"]{--tertiary:#48b0b0;--tertiary-dim:#287878;--neon-yellow:#48b0b0;--glow:rgba(72,176,176,.06);--glow-active:rgba(72,176,176,.12);--glow-strong:rgba(72,176,176,.2)}
  html[data-accent="orange"]{--tertiary:#d4a030;--tertiary-dim:#9a7420;--neon-yellow:#d4a030;--glow:rgba(212,160,48,.06);--glow-active:rgba(212,160,48,.12);--glow-strong:rgba(212,160,48,.2)}
  html[data-accent="pink"]{--tertiary:#c86080;--tertiary-dim:#984058;--neon-yellow:#c86080;--glow:rgba(200,96,128,.06);--glow-active:rgba(200,96,128,.12);--glow-strong:rgba(200,96,128,.2)}
  html[data-accent="red"]{--tertiary:#c85840;--tertiary-dim:#983828;--neon-yellow:#c85840;--glow:rgba(200,88,64,.06);--glow-active:rgba(200,88,64,.12);--glow-strong:rgba(200,88,64,.2)}
  html[data-accent="yellow"]{--tertiary:#c8b030;--tertiary-dim:#988018;--neon-yellow:#c8b030;--glow:rgba(200,176,48,.06);--glow-active:rgba(200,176,48,.12);--glow-strong:rgba(200,176,48,.2)}
  html[data-accent="purple"]{--tertiary:#8868c0;--tertiary-dim:#604898;--neon-yellow:#8868c0;--glow:rgba(136,104,192,.06);--glow-active:rgba(136,104,192,.12);--glow-strong:rgba(136,104,192,.2)}
  /* light + accent */
  html[data-theme="light"][data-accent="blue"]{--tertiary:#386098;--tertiary-dim:#284878;--neon-yellow:#386098;--glow:rgba(56,96,152,.04);--glow-active:rgba(56,96,152,.08);--glow-strong:rgba(56,96,152,.14)}
  html[data-theme="light"][data-accent="cyan"]{--tertiary:#207878;--tertiary-dim:#185858;--neon-yellow:#207878;--glow:rgba(32,120,120,.04);--glow-active:rgba(32,120,120,.08);--glow-strong:rgba(32,120,120,.14)}
  html[data-theme="light"][data-accent="orange"]{--tertiary:#a07818;--tertiary-dim:#785810;--neon-yellow:#a07818;--glow:rgba(160,120,24,.04);--glow-active:rgba(160,120,24,.08);--glow-strong:rgba(160,120,24,.14)}
  html[data-theme="light"][data-accent="pink"]{--tertiary:#983848;--tertiary-dim:#782830;--neon-yellow:#983848;--glow:rgba(152,56,72,.04);--glow-active:rgba(152,56,72,.08);--glow-strong:rgba(152,56,72,.14)}
  html[data-theme="light"][data-accent="red"]{--tertiary:#983828;--tertiary-dim:#782018;--neon-yellow:#983828;--glow:rgba(152,56,40,.04);--glow-active:rgba(152,56,40,.08);--glow-strong:rgba(152,56,40,.14)}
  html[data-theme="light"][data-accent="yellow"]{--tertiary:#887010;--tertiary-dim:#685008;--neon-yellow:#887010;--glow:rgba(136,112,16,.04);--glow-active:rgba(136,112,16,.08);--glow-strong:rgba(136,112,16,.14)}
  html[data-theme="light"][data-accent="purple"]{--tertiary:#503898;--tertiary-dim:#382878;--neon-yellow:#503898;--glow:rgba(80,56,152,.04);--glow-active:rgba(80,56,152,.08);--glow-strong:rgba(80,56,152,.14)}

  /* ─── RESET ─── */
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}

  /* ─── BASE: sans-serif body, mono only for clock/prompt/status ─── */
  body{
    font-family:-apple-system,'Segoe UI','Roboto','Noto Sans',system-ui,sans-serif;
    background:var(--bg);color:var(--on-surface);
    -webkit-tap-highlight-color:transparent;overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'SF Mono','Cascadia Code','Fira Code','Droid Sans Mono',monospace}
  .sans{font-family:inherit}

  /* ═══ NO CRT — clean Editorial Retro ═══ */
  body::after{display:none}
  body::before{display:none}

  /* ═══ PAGE ═══ */
  .page{
    position:relative;max-width:580px;margin:0 auto;
    padding:12px 16px 72px;
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right));
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  .layout-hero,.layout-main{width:100%}

  /* ═══ HEADER & CLOCK ═══ */
  .header{text-align:center;padding:24px 0 14px}
  .clock-time{
    font-size:80px;font-weight:700;line-height:1;letter-spacing:-2px;
    font-variant-numeric:tabular-nums;
    color:var(--on-surface);
  }
  .clock-date{
    font-size:14px;color:var(--on-surface-var);margin-top:8px;
    letter-spacing:1px;
  }

  /* ═══ GREETING — warm terminal accent ═══ */
  .greeting{font-size:14px;color:var(--tertiary);margin-bottom:8px;min-height:18px;letter-spacing:.5px;font-weight:300}
  .greeting::before{content:'> ';color:var(--tertiary);opacity:.4}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
  .greeting-cursor{animation:blink .8s step-end infinite;color:var(--tertiary)}

  /* ═══ PIXEL DECORATORS — subtle warm divider ═══ */
  .pixel-line{
    display:flex;justify-content:center;gap:3px;margin:12px 0;
  }
  .pixel-line span{
    width:4px;height:4px;border-radius:1px;background:var(--tertiary);opacity:.15;
  }
  .pixel-line span:nth-child(odd){opacity:.25}

  /* ═══ WEATHER ═══ */
  .weather-wrap{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:10px}
  .weather-row{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:26px;flex-wrap:wrap;
    cursor:pointer;padding:5px 10px;border-radius:var(--radius-s);transition:background .15s;
    border:1px solid transparent;
  }
  .weather-row:hover{background:var(--surface);border-color:var(--outline-var)}
  .weather-icon{font-size:24px;line-height:1}
  .weather-temp{font-size:20px;font-weight:600;color:var(--tertiary);font-variant-numeric:tabular-nums}
  .weather-desc{font-size:13px;color:var(--on-surface-var);letter-spacing:.3px}
  .weather-loc{font-size:11px;color:var(--tertiary);opacity:.7;letter-spacing:.5px;text-transform:uppercase}
  .weather-sep{width:3px;height:3px;border-radius:0;background:var(--tertiary);flex-shrink:0}
  .weather-config-btn{
    background:none;border:none;font-size:12px;cursor:pointer;
    color:var(--on-surface-var);opacity:0;transition:opacity .15s;padding:4px;
  }
  .weather-wrap:hover .weather-config-btn{opacity:.4}
  .weather-config-btn:hover{opacity:1!important;color:var(--neon-cyan)}
  @media(hover:none){.weather-config-btn{opacity:.25}}

  /* ═══ WEATHER TOGGLE ═══ */
  .weather-toggle{
    display:none;justify-content:center;gap:6px;margin-top:8px;
    animation:fadeSlide .2s ease-out;
  }
  .weather-chip{
    padding:8px 14px;border-radius:var(--radius-full);
    border:var(--pixel-border);background:var(--surface);
    color:var(--on-surface-var);font-size:12px;cursor:pointer;
    font-family:inherit;transition:all .15s;
    box-shadow:var(--pixel-inset);
  }
  .weather-chip:hover{border-color:var(--tertiary);color:var(--tertiary)}
  .weather-chip.active{
    background:var(--tertiary);color:var(--bg);
    border-color:var(--tertiary);font-weight:600;
    box-shadow:0 0 10px var(--glow-active);
  }

  /* ═══ WEATHER DETAIL ═══ */
  .weather-detail{
    margin-top:8px;padding:10px;background:var(--surface);
    border:var(--arcade-border);border-radius:var(--radius-s);
    max-width:320px;margin-left:auto;margin-right:auto;
    box-shadow:inset 0 0 15px var(--glow);
  }
  .weather-detail-row{display:flex;gap:6px;justify-content:center}
  .weather-day{
    flex:1;text-align:center;padding:6px 4px;border-radius:var(--radius-xs);
    background:var(--bg);border:var(--pixel-border);
  }
  .weather-day-name{font-size:11px;color:var(--on-surface-var);margin-bottom:2px;text-transform:uppercase;letter-spacing:1px}
  .weather-day-icon{font-size:20px;margin-bottom:2px}
  .weather-day-temps{font-size:12px;color:var(--on-surface);font-variant-numeric:tabular-nums}
  .weather-day-hi{color:var(--tertiary);font-weight:600}
  .weather-day-lo{color:var(--on-surface-var)}

  /* ═══ FAVORITES ═══ */
  .favorites-row{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:10px;margin-bottom:4px;min-height:0;flex-wrap:wrap}
  .favorites-row:empty{display:none}
  .fav-item{
    width:40px;height:40px;border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;
    background:var(--surface);border:var(--pixel-border);text-decoration:none;
    transition:all .15s;overflow:hidden;flex-shrink:0;box-shadow:var(--pixel-inset);
  }
  .fav-item:hover{
    border-color:var(--tertiary);transform:translateY(-1px);
    box-shadow:var(--elevation-2);
  }
  .fav-item img{width:22px;height:22px;border-radius:2px}
  .fav-item .fav-letter{font-size:11px;font-weight:700;color:#fff}
  .fav-label{display:none}

  /* ═══ SEARCH — arcade insert-coin style ═══ */
  .search-area{margin-bottom:16px;position:relative;padding-right:220px}
  .search-box{
    display:flex;align-items:center;background:rgba(0,0,0,.2);
    border:var(--pixel-border);border-radius:var(--radius-m);height:48px;
    transition:all .15s;
    box-shadow:var(--pixel-inset);
  }
  .search-box:focus-within{
    border-color:var(--tertiary);
  }
  .engine-picker{position:relative;flex-shrink:0}
  .engine-btn{
    background:none;border:none;padding:0 12px;height:48px;cursor:pointer;
    display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
    color:var(--tertiary);border-right:var(--pixel-border);
    letter-spacing:.5px;font-family:'SF Mono','Cascadia Code','Fira Code',monospace;
  }
  .engine-btn svg{color:var(--on-surface-var);opacity:.3}
  .engine-dropdown{
    display:none;position:absolute;top:calc(100% + 6px);left:4px;
    background:var(--surface);border:var(--arcade-border);
    border-radius:var(--radius-s);padding:3px;min-width:200px;z-index:100;
    box-shadow:var(--elevation-2),0 8px 30px rgba(0,0,0,.7);max-height:380px;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--outline-var) transparent;
  }
  .engine-picker.open .engine-dropdown{display:block;animation:arcadeSlide .15s ease-out}
  @keyframes arcadeSlide{from{opacity:0;transform:translateY(-6px) scaleY(.9)}}
  .engine-opt{
    display:flex;align-items:center;gap:8px;padding:10px 12px;
    border-radius:var(--radius-xs);cursor:pointer;font-size:13px;
    color:var(--on-surface-var);transition:all .1s;
  }
  .engine-opt:hover{background:var(--surface-high);color:var(--on-surface)}
  .engine-opt.active{background:var(--tertiary-dim);color:#fff}
  .engine-opt .eid{width:16px;height:16px;border-radius:1px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0;color:#fff}
  .search-prompt{font-size:16px;color:var(--tertiary);padding:0 4px 0 12px;flex-shrink:0;opacity:.5;font-family:'SF Mono','Cascadia Code','Fira Code',monospace}
  .search-box input{
    flex:1;border:none;background:none;padding:0;height:48px;
    font-size:14px;color:var(--on-surface);outline:none;font-family:inherit;
    caret-color:var(--tertiary);letter-spacing:0px;
  }
  .search-box input::placeholder{color:var(--on-surface-var);opacity:.5;font-size:13px}
  .search-submit{background:none;border:none;padding:10px 12px;cursor:pointer;color:var(--on-surface-var);transition:all .1s}
  .search-submit:hover{color:var(--tertiary);filter:drop-shadow(0 0 4px var(--glow-active))}

  /* ═══ SEARCH HISTORY ═══ */
  .search-history{
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface);border:var(--arcade-border);
    border-radius:var(--radius-s);margin-top:3px;z-index:90;
    max-height:260px;overflow-y:auto;
    box-shadow:var(--elevation-2),0 8px 30px rgba(0,0,0,.5);
    scrollbar-width:thin;scrollbar-color:var(--outline-var) transparent;
  }
  .sh-item{display:flex;align-items:center;padding:8px 10px;cursor:pointer;transition:all .06s}
  .sh-item:hover{background:var(--surface-high);padding-left:14px}
  .sh-text{flex:1;font-size:13px;color:var(--on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sh-delete{background:none;border:none;color:var(--outline);font-size:14px;cursor:pointer;padding:2px 5px;opacity:.3;transition:all .1s}
  .sh-delete:hover{opacity:1;color:var(--neon-pink);text-shadow:0 0 4px var(--neon-pink)}
  .sh-clear{
    display:block;width:100%;padding:8px;text-align:center;
    background:none;border:none;border-top:var(--pixel-border);
    color:var(--on-surface-var);font-size:9px;cursor:pointer;font-family:inherit;
    text-transform:uppercase;letter-spacing:1px;
  }
  .sh-clear:hover{color:var(--neon-pink);background:var(--surface-high)}

  /* ═══ BOOKMARK SEARCH ═══ */
  .bm-search-results{
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface);border:var(--arcade-border);
    border-radius:var(--radius-s);margin-top:3px;z-index:90;
    max-height:320px;overflow-y:auto;
    box-shadow:var(--elevation-2),0 8px 30px rgba(0,0,0,.5);
    scrollbar-width:thin;scrollbar-color:var(--outline-var) transparent;
  }
  .bm-result{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;transition:all .06s;text-decoration:none;color:var(--on-surface)}
  .bm-result:hover{background:var(--surface-high);padding-left:14px}
  .bm-result-badge{width:32px;height:32px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:var(--pixel-border)}
  .bm-result-badge img{width:20px;height:20px;border-radius:2px}
  .bm-result-letter{font-size:11px;font-weight:700;color:#fff}
  .bm-result-text{flex:1;min-width:0}
  .bm-result-name{font-size:14px;font-weight:500}
  .bm-result-domain{font-size:11px;color:var(--on-surface-var);display:block}
  .bm-result-tab{font-size:10px;color:var(--tertiary);background:var(--bg);padding:2px 8px;border-radius:var(--radius-xs);flex-shrink:0;text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--outline-var)}

  /* ═══ TABS — warm dashboard chips ═══ */
  .tabs{display:flex;gap:6px;margin-bottom:14px;padding:2px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar{display:none}
  .tab-btn{
    background:var(--surface);border:var(--pixel-border);border-radius:var(--radius-s);
    padding:10px 14px;font-size:12px;font-weight:600;color:var(--on-surface-var);
    cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit;
    text-transform:lowercase;letter-spacing:.5px;
    box-shadow:var(--pixel-inset);
    flex-shrink:0;scroll-snap-align:start;
  }
  .tab-btn:hover{
    color:var(--on-surface);background:var(--surface-bright);
  }
  .tab-btn.active{
    background:var(--tertiary);color:var(--bg);font-weight:700;
    border-color:var(--tertiary);
    box-shadow:inset -2px -2px 0 rgba(0,0,0,.25), inset 2px 2px 0 rgba(255,255,255,.15);
  }

  /* ═══ SWIPE HINT ═══ */
  .swipe-hint{text-align:center;font-size:11px;color:var(--on-surface-var);margin:-4px 0 10px;display:none;letter-spacing:2px;opacity:.5}

  /* ═══ CONTENT TRANSITIONS — fade slide ═══ */
  #content>div{display:none}
  #content>div.active{display:block;animation:fadeSlide .2s ease-out}
  @keyframes fadeSlide{
    0%{opacity:0;transform:translateY(6px)}
    100%{opacity:1;transform:translateY(0)}
  }

  /* ═══ SECTION LABELS — editorial ═══ */
  .section-label{
    font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;
    color:var(--on-surface-var);padding:18px 4px 8px;
    display:flex;align-items:center;gap:6px;
  }
  .section-label::before{
    content:'//';color:var(--tertiary);font-size:10px;opacity:.5;
    font-family:'SF Mono','Cascadia Code','Fira Code',monospace;
  }
  .section-label::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,var(--outline-var),transparent);
  }

  /* ═══ ITEMS — warm dashboard tiles ═══ */
  .list{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
  .item{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;text-decoration:none;
    color:var(--on-surface);
    background:var(--surface);
    border:var(--pixel-border);
    border-left:3px solid transparent;
    border-radius:var(--radius-xs);
    transition:all .15s;
    position:relative;
  }
  a.item:hover{
    background:var(--surface-bright);
    transform:translateY(-1px);
    box-shadow:var(--elevation-1);
  }
  a.item:active{transform:scale(.99);transition-duration:.02s}
  .item-badge-wrap{
    width:40px;height:40px;border-radius:var(--radius-s);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;user-select:none;
  }
  .item-icon{border-radius:2px}
  .item-letter{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.5px}
  .item-text{flex:1;min-width:0}
  .item-name{font-size:16px;font-weight:500;line-height:1.3}
  .item-domain{font-size:12px;color:var(--on-surface-var);margin-top:2px;display:block}
  a.item:hover .item-name{color:var(--tertiary)}
  a.item:hover .item-domain{color:var(--on-surface-var)}
  .item-arrow{color:var(--outline-var);opacity:0;transition:all .15s;flex-shrink:0;font-size:12px}
  a.item:hover .item-arrow{opacity:1;color:var(--tertiary);transform:translateX(2px)}

  /* ═══ DRAG HANDLE ═══ */
  .drag-handle{cursor:grab;color:var(--outline);font-size:13px;padding:3px;margin-left:-3px;touch-action:none;user-select:none;flex-shrink:0}
  .drag-handle:active{cursor:grabbing}
  .item.dragging{opacity:.3;background:var(--surface-bright);border-style:dashed;border-color:var(--neon-pink)}
  .item.drag-over{border-color:var(--tertiary);box-shadow:0 0 12px var(--glow-strong)}

  /* ═══ EDIT MODE CONTROLS ═══ */
  .item-edit-controls{display:flex;gap:2px;flex-shrink:0}
  .item-fav-btn,.item-edit-btn,.item-delete-btn{
    background:var(--bg);border:var(--pixel-border);
    border-radius:var(--radius-xs);width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:12px;color:var(--on-surface-var);transition:all .08s;
  }
  .item-fav-btn:hover{color:var(--neon-yellow);border-color:var(--neon-yellow);box-shadow:0 0 6px rgba(212,160,48,.2)}
  .item-fav-btn.is-fav{color:var(--neon-yellow);border-color:var(--neon-yellow)}
  .item-edit-btn:hover{color:var(--neon-cyan);border-color:var(--neon-cyan);box-shadow:0 0 6px rgba(88,160,200,.2)}
  .item-delete-btn:hover{color:var(--neon-pink);border-color:var(--neon-pink);box-shadow:0 0 6px rgba(200,88,104,.2)}
  .bm-add-btn{
    display:flex;align-items:center;justify-content:center;
    padding:9px;border:2px dashed var(--outline-var);border-radius:var(--radius-xs);
    background:none;color:var(--on-surface-var);font-size:10px;
    cursor:pointer;transition:all .1s;width:100%;font-family:inherit;
    text-transform:uppercase;letter-spacing:1px;
  }
  .bm-add-btn:hover{
    border-color:var(--tertiary);color:var(--tertiary);
    background:var(--glow);box-shadow:0 0 10px var(--glow-active);
    text-shadow:0 0 6px var(--glow-strong);
  }

  /* ═══ DIALOGS — arcade UI panels ═══ */
  .bm-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:150;
    display:flex;align-items:center;justify-content:center;
    padding:16px;backdrop-filter:blur(4px);
  }
  .bm-dialog{
    background:var(--surface);border:var(--arcade-border);border-color:var(--tertiary-dim);
    border-radius:var(--radius-m);padding:20px;width:100%;max-width:360px;
    box-shadow:
      0 0 20px var(--glow-strong),
      0 0 40px var(--glow-active),
      0 20px 50px rgba(0,0,0,.6),
      inset 0 0 15px var(--glow);
    animation:dialogOpen .2s ease-out;
  }
  @keyframes dialogOpen{from{opacity:0;transform:scale(.95)}}
  .bm-dialog-title{
    font-size:14px;font-weight:600;margin-bottom:12px;color:var(--tertiary);
    letter-spacing:.5px;
  }
  .bm-dialog input,.bm-dialog textarea{
    width:100%;padding:10px 12px;background:var(--bg);
    border:var(--pixel-border);border-radius:var(--radius-xs);
    color:var(--on-surface);font-size:14px;margin-bottom:8px;outline:none;
    font-family:inherit;box-shadow:var(--pixel-inset);
  }
  .bm-dialog input:focus,.bm-dialog textarea:focus{
    border-color:var(--tertiary);
  }
  .bm-dialog input::placeholder,.bm-dialog textarea::placeholder{color:var(--on-surface-var);opacity:.5;font-size:13px}
  .bm-dialog textarea{height:150px;font-size:13px;resize:vertical}
  .bm-dialog-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}
  .bm-dialog-actions button{
    padding:10px 18px;border-radius:var(--radius-xs);border:var(--pixel-border);
    background:var(--surface-bright);color:var(--on-surface);font-size:13px;
    cursor:pointer;font-family:inherit;transition:all .15s;
    box-shadow:var(--pixel-inset);
  }
  .bm-dialog-actions button:last-child{
    background:var(--tertiary-dim);color:#fff;border-color:var(--tertiary-dim);
  }
  .bm-dialog-actions button:hover{filter:brightness(1.2)}

  /* ═══ IMPORT/EXPORT ═══ */
  .ie-buttons{display:flex;gap:6px;margin-bottom:12px}
  .ie-btn{
    padding:8px 14px;border-radius:var(--radius-xs);border:var(--pixel-border);
    background:var(--surface);color:var(--on-surface-var);font-size:12px;
    cursor:pointer;font-family:inherit;transition:all .15s;
    box-shadow:var(--pixel-inset);
  }
  .ie-btn:hover{background:var(--surface-bright);color:var(--on-surface);border-color:var(--outline)}

  /* ═══ STATUS BAR — warm dashboard ═══ */
  .status-bar{
    position:fixed;bottom:0;left:0;right:0;height:36px;
    background:#0c0818;border-top:var(--pixel-border);
    box-shadow:inset 0 2px 0 var(--surface-bright);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 14px;font-size:11px;color:var(--on-surface-var);z-index:100;
    font-family:'SF Mono','Cascadia Code','Fira Code',monospace;
    padding-bottom:env(safe-area-inset-bottom);letter-spacing:.5px;
  }
  .status-right{display:flex;align-items:center;gap:5px}
  .status-shield{
    display:inline-flex;align-items:center;gap:3px;color:var(--tertiary-dim);
    text-shadow:0 0 4px var(--glow);
  }
  .status-shield svg{width:9px;height:9px;fill:currentColor}
  .status-gfx{
    color:var(--tertiary);font-size:10px;letter-spacing:1px;
  }
  @keyframes gfxCycle{
    0%,100%{color:var(--tertiary)}
    33%{color:var(--neon-cyan)}
    66%{color:var(--neon-yellow);text-shadow:0 0 4px rgba(212,160,48,.3)}
  }

  /* ═══ TOP BUTTONS ═══ */
  .top-buttons{
    position:fixed;top:12px;right:12px;z-index:10;
    display:flex;gap:6px;align-items:center;
  }
  .theme-toggle,.accent-toggle,.edit-toggle,.auth-toggle{
    position:relative;top:auto;right:auto;left:auto;
    background:var(--surface);border:var(--pixel-border);
    border-radius:var(--radius-s);width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--on-surface-var);
    transition:all .15s;z-index:10;box-shadow:var(--pixel-inset);
  }
  .theme-toggle{font-size:15px}
  .theme-toggle:hover{color:var(--on-surface)}
  .accent-toggle:hover{border-color:var(--outline)}
  .accent-dot{width:14px;height:14px;border-radius:3px;transition:background .2s}
  .accent-popup{
    display:none;position:absolute;top:calc(100% + 5px);right:0;
    background:var(--surface);border:var(--arcade-border);
    border-radius:var(--radius-s);padding:6px;z-index:100;
    box-shadow:var(--elevation-2),0 8px 30px rgba(0,0,0,.6);
  }
  .accent-popup.open{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;animation:arcadeSlide .15s ease-out}
  .accent-opt{
    width:26px;height:26px;border-radius:4px;cursor:pointer;
    border:2px solid transparent;transition:all .15s;
  }
  .accent-opt:hover{transform:scale(1.1)}
  .accent-opt.active{border-color:var(--on-surface)}
  .edit-toggle{font-size:15px}
  .edit-toggle:hover{color:var(--on-surface)}
  .edit-toggle.active{
    background:var(--tertiary);color:var(--bg);border-color:var(--tertiary);
  }
  .auth-toggle{font-size:14px}
  .auth-toggle:hover{border-color:var(--outline)}
  .auth-popup{
    display:none;position:absolute;top:calc(100% + 6px);right:0;
    background:var(--surface-high);border:var(--arcade-border);
    border-radius:var(--radius-s);padding:6px;z-index:100;
    box-shadow:var(--elevation-2),0 8px 30px rgba(0,0,0,.6);
    min-width:200px;
  }
  .auth-popup.open{display:flex;flex-direction:column;gap:3px;animation:arcadeSlide .15s ease-out}
  .auth-popup-btn{
    background:none;border:1px solid transparent;color:var(--on-surface-var);
    font-size:12px;padding:10px 14px;cursor:pointer;text-align:left;
    border-radius:var(--radius-s);transition:all .15s;white-space:nowrap;
    font-family:'SF Mono','Cascadia Code','Fira Code',monospace;letter-spacing:.3px;
  }
  .auth-popup-btn:hover{
    background:var(--glow-active);color:var(--on-surface);
    border-color:var(--outline);
  }

  /* ═══ FIRE BUTTON ═══ */
  .fire-btn{
    background:none;border:none;font-size:11px;cursor:pointer;
    color:var(--on-surface-var);padding:0 3px;transition:all .1s;
  }
  .fire-btn:hover{color:var(--neon-red);text-shadow:0 0 8px rgba(200,88,64,.5);filter:brightness(1.2)}
  .fire-btn.confirm{color:var(--neon-red);animation:fireShake .2s steps(4)}
  @keyframes fireShake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
  .fire-overlay{position:fixed;inset:0;pointer-events:none;z-index:199;opacity:0}
  .fire-overlay.active{animation:fireWipe .7s ease-out forwards}
  @keyframes fireWipe{
    0%{opacity:1;background:linear-gradient(to top,var(--neon-red) 0%,var(--neon-yellow) 30%,transparent 60%)}
    60%{opacity:.6;background:linear-gradient(to top,transparent 0%,var(--neon-yellow) 20%,var(--neon-red) 40%,transparent 70%)}
    100%{opacity:0}
  }

  /* ═══ TOAST ═══ */
  .toast{
    position:fixed;bottom:44px;left:50%;transform:translateX(-50%);
    background:var(--surface);border:1px solid var(--tertiary-dim);
    border-radius:var(--radius-s);padding:10px 18px;font-size:13px;
    color:var(--tertiary);z-index:180;
    box-shadow:0 6px 20px rgba(0,0,0,.4);
    animation:toastIn .15s ease-out,toastOut .15s ease-in 2.5s forwards;white-space:nowrap;
    font-weight:600;
  }
  @keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}}
  @keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(8px)}}

  /* ═══ RESPONSIVE ═══ */

  /* --- Mobile (0-599px): Pixel 10 Pro ~412px CSS viewport --- */
  @media(max-width:599px){
    .page{max-width:100%;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
    .top-buttons{gap:4px}
    .theme-toggle,.accent-toggle,.edit-toggle,.auth-toggle,.bb-toggle{width:32px;height:32px}
    .edit-toggle,.bb-toggle{display:none}
    .clock-time{font-size:80px}
    .tab-btn{padding:10px 14px;font-size:12px;min-height:48px;display:flex;align-items:center}
    .item{padding:12px 14px}
    .item-name{font-size:16px}
    .item-domain{font-size:12px}
    .item-badge-wrap{width:40px;height:40px}
    .search-box{height:48px}
    .search-box input{height:48px;font-size:15px}
    .engine-btn{height:48px}
    .fav-item{width:42px;height:42px}
    .fav-item img{width:24px;height:24px}
    .branch-input{font-size:14px;padding:10px 12px}
    .branch-go{height:44px;font-size:14px;padding:0 16px}
    .branch-chip{padding:8px 12px;font-size:11px;min-height:40px;display:flex;align-items:center}
  }

  /* --- Tablet (600-1199px): Tab S8 Ultra landscape + small desktops --- */
  @media(min-width:600px) and (max-width:1199px){
    .page{max-width:92vw;display:grid;grid-template-columns:1fr;gap:0}
    .list{display:grid;grid-template-columns:1fr 1fr;gap:4px}
    .clock-time{font-size:72px;letter-spacing:-1px}
    .bm-add-btn{grid-column:1/-1}
    .favorites-row .fav-item{width:42px;height:42px}
    .weather-detail-row{gap:10px}
    .swipe-hint{display:none!important}
    a.item{padding:12px 16px}
    body{scrollbar-width:thin;scrollbar-color:var(--outline-var) var(--bg)}
    body::-webkit-scrollbar{width:6px}
    body::-webkit-scrollbar-track{background:var(--bg)}
    body::-webkit-scrollbar-thumb{background:var(--outline-var);border-radius:var(--radius-xs)}
    body::-webkit-scrollbar-thumb:hover{background:var(--outline)}
    .tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .tools-grid .tools-block{margin-bottom:0}
  }

  /* --- Laptop (1200-2199px): MSI GT62VR 1920x1080 --- */
  @media(min-width:1200px){
    .page{
      max-width:1400px;
      display:grid;grid-template-columns:340px 1fr;gap:0 28px;
      align-items:start;
    }
    .layout-hero{
      grid-column:1;position:sticky;top:12px;
    }
    .layout-hero .header{text-align:left;padding:24px 0 10px}
    .layout-hero .favorites-row{justify-content:flex-start}
    .layout-main{grid-column:2;padding-top:4px}
    .list{display:grid;grid-template-columns:1fr 1fr;gap:4px}
    .clock-time{font-size:72px}
    .item-name{font-size:16px}
    .item-domain{font-size:12px}
    .bm-add-btn{grid-column:1/-1}
    .search-box{height:52px;max-width:900px}
    .search-box input{height:52px;font-size:15px}
    .engine-btn{height:52px}
    .favorites-row .fav-item{width:44px;height:44px}
    .favorites-row .fav-item img{width:24px;height:24px}
    .weather-detail-row{gap:10px}
    .weather-detail{max-width:340px;margin-left:0}
    .fav-item{
      width:auto;height:auto;padding:6px 10px;gap:6px;flex-direction:row;
    }
    .fav-label{
      display:block;font-size:10px;color:var(--on-surface-var);
      white-space:nowrap;letter-spacing:.3px;
    }
    .fav-item:hover .fav-label{color:var(--tertiary)}
    .swipe-hint{display:none!important}
    .tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .tools-grid .tools-block{margin-bottom:0}
    body{scrollbar-width:thin;scrollbar-color:var(--outline-var) var(--bg)}
    body::-webkit-scrollbar{width:6px}
    body::-webkit-scrollbar-track{background:var(--bg)}
    body::-webkit-scrollbar-thumb{background:var(--outline-var);border-radius:var(--radius-xs)}
    body::-webkit-scrollbar-thumb:hover{background:var(--outline)}
  }

  /* --- Ultrawide (2200px+): AOC U34G2G4R3 3440x1440 --- */
  @media(min-width:2200px){
    .page{
      max-width:2400px;
      grid-template-columns:380px 1fr;gap:0 40px;
    }
    .list{grid-template-columns:1fr 1fr 1fr 1fr}
    .clock-time{font-size:96px}
    .greeting{font-size:16px}
    .search-box{height:56px;max-width:1100px}
    .search-box input{height:56px;font-size:16px}
    .engine-btn{height:56px;font-size:12px}
    .favorites-row .fav-item{width:48px;height:48px}
    .favorites-row .fav-item img{width:26px;height:26px}
    a.item{padding:14px 18px}
    .item-name{font-size:16px}
    .item-domain{font-size:13px}
    .item-badge-wrap{width:44px;height:44px}
    .item-letter{font-size:16px}
    .tab-btn{font-size:13px;padding:12px 18px}
    .section-label{font-size:12px}
    .bb-item-name{font-size:15px}
    .bb-item-domain{font-size:12px}
    .bb-item-badge{width:36px;height:36px}
    .weather-detail{max-width:380px}
  }

  /* ═══ TOOLS TAB — Branchensuche ═══ */
  .tools-block{
    padding:16px;background:var(--surface);border:var(--pixel-border);
    border-radius:var(--radius-m);margin-bottom:10px;
    box-shadow:var(--pixel-inset);
  }
  .tools-block-title{
    font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
    color:var(--on-surface-var);margin-bottom:12px;
    display:flex;align-items:center;gap:6px;
  }
  .tools-block-title::before{content:'//';font-family:'SF Mono','Cascadia Code','Fira Code',monospace;color:var(--tertiary);opacity:.5}
  .tools-block-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--outline-var),transparent)}
  .branch-row{display:flex;gap:4px;margin-bottom:6px}
  .branch-row:last-child{margin-bottom:0}
  .branch-input{
    flex:1;padding:10px 14px;background:rgba(0,0,0,.2);
    border:var(--pixel-border);border-radius:var(--radius-xs);
    color:var(--on-surface);font-size:14px;outline:none;font-family:inherit;
    caret-color:var(--tertiary);box-shadow:var(--pixel-inset);
  }
  .branch-input:focus{border-color:var(--tertiary)}
  .branch-input::placeholder{color:var(--on-surface-var);opacity:.5;font-size:13px}
  .branch-input.branch-wo{max-width:140px}
  .branch-go{
    background:var(--surface-bright);border:var(--pixel-border);border-radius:var(--radius-xs);
    padding:0 16px;height:40px;cursor:pointer;color:var(--tertiary);font-size:14px;
    transition:all .15s;display:flex;align-items:center;font-family:inherit;flex-shrink:0;
    box-shadow:var(--pixel-inset);
  }
  .branch-go:hover{
    border-color:var(--tertiary);color:var(--tertiary);
  }
  .branch-quick{display:flex;gap:3px;flex-wrap:wrap}
  .branch-chip{
    padding:6px 12px;background:var(--bg);border:var(--pixel-border);
    border-radius:var(--radius-full);font-size:11px;color:var(--on-surface-var);
    cursor:pointer;transition:all .15s;font-family:inherit;
  }
  .branch-chip:hover{
    border-color:var(--tertiary);color:var(--tertiary);
  }
  .branch-chip.active{
    border-color:var(--tertiary);color:var(--bg);
    background:var(--tertiary);
  }
  /* Results */
  .branch-status{
    font-size:12px;color:var(--on-surface-var);padding:10px 0 4px;text-align:center;
  }
  .branch-status.loading::after{
    content:'';display:inline-block;width:10px;height:10px;
    border:2px solid var(--outline);border-top-color:var(--neon-yellow);
    border-radius:50%;margin-left:6px;vertical-align:middle;
    animation:branchSpin .6s linear infinite;
  }
  @keyframes branchSpin{to{transform:rotate(360deg)}}
  .branch-results{display:flex;flex-direction:column;gap:3px;margin-top:8px}
  .branch-result{
    display:flex;flex-direction:column;gap:2px;
    padding:10px 12px;background:var(--bg);
    border:var(--pixel-border);border-left:3px solid var(--neon-yellow);
    border-radius:var(--radius-xs);
  }
  .branch-result-head{display:flex;align-items:baseline;gap:6px}
  .branch-result-name{font-size:14px;font-weight:600;color:var(--on-surface)}
  .branch-result-dist{font-size:11px;color:var(--tertiary);flex-shrink:0}
  .branch-result-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
  .branch-result-links a{
    font-size:12px;color:var(--neon-green);text-decoration:none;
    display:flex;align-items:center;gap:4px;padding:4px 10px;
    border:1px solid var(--outline-var);border-radius:var(--radius-xs);
    transition:all .15s;
  }
  .branch-result-links a:hover{
    border-color:var(--neon-green);background:rgba(96,200,88,.05);
  }
  .branch-result-links a.branch-tel{color:var(--neon-cyan)}
  .branch-result-links a.branch-tel:hover{border-color:var(--neon-cyan)}
  /* External directory links */
  .branch-extern{
    display:flex;align-items:center;gap:4px;flex-wrap:wrap;
    margin-top:10px;padding-top:8px;border-top:1px solid var(--outline-var);
  }
  .branch-extern-label{font-size:10px;color:var(--on-surface-var);text-transform:uppercase;letter-spacing:1px;margin-right:2px}
  .branch-extern a{
    font-size:11px;color:var(--on-surface-var);text-decoration:none;
    padding:5px 10px;border:var(--pixel-border);border-radius:var(--radius-xs);
    transition:all .15s;
  }
  .branch-extern a:hover{color:var(--on-surface);border-color:var(--outline);background:var(--surface-bright)}
  .branch-extern-prominent{justify-content:center;border-top:none;padding-top:0}
  .branch-extern-prominent a{font-size:12px;padding:8px 14px;color:var(--neon-green);border-color:var(--outline)}
  .branch-sort{display:flex;align-items:center;gap:4px;margin:6px 0 2px;justify-content:flex-end}
  .branch-sort-label{font-size:10px;color:var(--on-surface-var);text-transform:uppercase;letter-spacing:.5px}
  .branch-sort-btn{
    padding:5px 10px;background:var(--bg);border:var(--pixel-border);
    border-radius:var(--radius-xs);font-size:11px;color:var(--on-surface-var);
    cursor:pointer;transition:all .15s;font-family:inherit;
  }
  .branch-sort-btn:hover{border-color:var(--outline);color:var(--on-surface)}
  .branch-sort-btn.active{border-color:var(--neon-cyan);color:var(--neon-cyan)}

  /* ═══ GPS BUTTON ═══ */
  .gps-btn{color:var(--neon-cyan);font-size:14px}
  .gps-btn:hover{border-color:var(--neon-cyan);box-shadow:0 0 10px rgba(88,160,200,.2);text-shadow:0 0 6px rgba(88,160,200,.4)}

  /* ═══ TOOLS — Ladestationen ═══ */
  .tools-block-title.ev::before,.tools-block-title.fuel::before,.tools-block-title.archive::before{content:none}
  .ev-tags{display:flex;gap:3px;flex-wrap:wrap;margin-top:2px}
  .ev-tag{padding:3px 8px;border-radius:var(--radius-xs);font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
  .ev-tag.ac{background:rgba(88,160,200,.15);color:var(--neon-cyan);border:1px solid rgba(88,160,200,.3)}
  .ev-tag.dc{background:rgba(200,88,64,.15);color:var(--neon-red);border:1px solid rgba(200,88,64,.3)}
  .ev-tag.free{background:rgba(96,200,88,.15);color:var(--neon-green);border:1px solid rgba(96,200,88,.3)}
  .ev-tag.paid{background:rgba(212,160,48,.15);color:var(--neon-yellow);border:1px solid rgba(212,160,48,.3)}

  /* ═══ TOOLS — Spritpreise ═══ */
  .fuel-prices{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
  .fuel-price{font-family:'SF Mono','Cascadia Code','Fira Code',monospace;font-size:18px;font-weight:700;letter-spacing:-0.5px;line-height:1}
  .fuel-price.e5{color:var(--neon-green)}
  .fuel-price.e10{color:var(--neon-cyan)}
  .fuel-price.diesel{color:var(--neon-yellow)}
  .fuel-price-label{font-size:10px;text-transform:uppercase;letter-spacing:.3px;opacity:.6;display:block}
  .fuel-open{padding:3px 8px;border-radius:var(--radius-xs);font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
  .fuel-open.open{background:rgba(96,200,88,.15);color:var(--neon-green);border:1px solid rgba(96,200,88,.3)}
  .fuel-open.closed{background:rgba(200,88,64,.15);color:var(--neon-red);border:1px solid rgba(200,88,64,.3)}
  .fuel-cheapest{border-left-color:var(--neon-green)!important;box-shadow:0 0 8px rgba(96,200,88,.1)}

  /* ═══ BOOKMARK BOOK OVERLAY ═══ */
  .bb-toggle{
    position:relative;top:auto;left:auto;z-index:10;
    width:30px;height:30px;border-radius:var(--radius-xs);
    background:var(--surface);border:var(--arcade-border);
    color:var(--on-surface-var);font-size:15px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .08s;
  }
  .bb-toggle:hover{border-color:var(--tertiary);color:var(--tertiary)}
  .bb-overlay{
    position:fixed;inset:0;z-index:200;
    background:var(--bg);
    display:none;flex-direction:column;
    overflow:hidden;
  }
  .bb-overlay.open{display:flex}
  .bb-header{
    display:flex;align-items:center;gap:8px;
    padding:12px 14px;background:var(--surface);
    border-bottom:var(--pixel-border);flex-shrink:0;
  }
  .bb-title{font-size:16px;font-weight:700;color:var(--tertiary);letter-spacing:.5px;white-space:nowrap}
  .bb-search{
    flex:1;min-width:0;padding:8px 12px;
    background:var(--bg);border:var(--pixel-border);border-radius:var(--radius-xs);
    color:var(--on-surface);font-family:inherit;font-size:14px;
    outline:none;box-shadow:var(--pixel-inset);
  }
  .bb-search:focus{border-color:var(--tertiary)}
  .bb-search::placeholder{color:var(--on-surface-var);opacity:.5}
  .bb-header-btns{display:flex;gap:4px;flex-shrink:0}
  .bb-hdr-btn{
    padding:6px 12px;font-size:12px;font-family:inherit;
    background:var(--surface-bright);border:var(--pixel-border);border-radius:var(--radius-xs);
    color:var(--on-surface-var);cursor:pointer;
    transition:all .15s;box-shadow:var(--pixel-inset);
  }
  .bb-hdr-btn:hover{border-color:var(--neon-green);color:var(--neon-green)}
  .bb-close{
    width:30px;height:30px;border:var(--pixel-border);border-radius:var(--radius-xs);
    background:var(--surface-bright);color:var(--on-surface);
    font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:all .1s;
  }
  .bb-close:hover{border-color:var(--neon-red);color:var(--neon-red)}
  .bb-body{flex:1;overflow-y:auto;padding:8px 10px 60px;-webkit-overflow-scrolling:touch}
  .bb-cat{margin-bottom:6px}
  .bb-cat-header{
    display:flex;align-items:center;gap:6px;
    padding:8px 10px;cursor:pointer;user-select:none;
    background:var(--surface);border:var(--pixel-border);border-radius:var(--radius-xs);
    transition:all .1s;
  }
  .bb-cat-header:hover{border-color:var(--tertiary);background:var(--surface-bright)}
  .bb-cat-arrow{font-size:10px;color:var(--tertiary);transition:transform .15s;width:12px;text-align:center}
  .bb-cat.open .bb-cat-arrow{transform:rotate(90deg)}
  .bb-cat-label{font-size:14px;font-weight:600;color:var(--tertiary);letter-spacing:.5px;flex:1}
  .bb-cat-count{font-size:11px;color:var(--on-surface-var)}
  .bb-cat-add{
    width:22px;height:22px;border:1px solid var(--outline-var);border-radius:var(--radius-xs);
    background:transparent;color:var(--neon-green);font-size:14px;cursor:pointer;
    display:none;align-items:center;justify-content:center;transition:all .1s;
  }
  .bb-edit-mode .bb-cat-add{display:flex}
  .bb-cat-add:hover{border-color:var(--neon-green);background:rgba(96,200,88,.08)}
  .bb-cat-content{display:none;padding:4px 0 0 0}
  .bb-cat.open .bb-cat-content{display:block}
  .bb-sub-label{
    font-size:11px;color:var(--neon-cyan);letter-spacing:1px;text-transform:uppercase;
    padding:8px 12px 4px;
  }
  .bb-item{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;text-decoration:none;color:var(--on-surface);
    border-bottom:1px solid rgba(255,255,255,.03);
    transition:all .15s;cursor:pointer;
  }
  .bb-item:hover{background:rgba(255,255,255,.03)}
  .bb-item-badge{
    width:32px;height:32px;border-radius:var(--radius-xs);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;overflow:hidden;
  }
  .bb-item-badge img{width:22px;height:22px;border-radius:2px}
  .bb-item-letter{
    font-size:12px;font-weight:700;color:#fff;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
  }
  .bb-item-text{flex:1;min-width:0}
  .bb-item-name{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bb-item-domain{font-size:11px;color:var(--on-surface-var);display:block}
  .bb-item-del{
    width:24px;height:24px;border:1px solid var(--outline-var);border-radius:var(--radius-xs);
    background:transparent;color:var(--neon-red);font-size:14px;cursor:pointer;
    display:none;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;
  }
  .bb-edit-mode .bb-item-del{display:flex}
  .bb-item-del:hover{border-color:var(--neon-red);background:rgba(200,88,64,.1)}
  .bb-empty{text-align:center;padding:40px 20px;color:var(--on-surface-var);font-size:14px}

  /* ═══ REDUCED MOTION ═══ */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:0.01ms!important;
      transition-duration:0.01ms!important;
    }
  }