/* ============== TOKENS ============== */
  :root{
    --bg:#0d0c0c; --bg-2:#1a1614; --bg-3:#2a221e;
    --steel:#3a322e; --steel-hi:#5a4d44;
    --blood:#c41e0e; --blood-dk:#6e0606;
    --lava:#ff5a1a; --ember:#ff8c3a; --gold:#f5b042;
    --amber:#ffb000; --bone:#ffe0b3;
    --green:#33ff66;
    --hud-h: clamp(72px, 9vw, 110px);
    --status-h: 100px;
    --f-doom:'Black Ops One', 'Bungee Inline', system-ui, sans-serif;
    --f-mono:'VT323', monospace;
    --f-pixel:'Press Start 2P', monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#000;color:var(--bone);font-family:var(--f-mono);overflow:hidden;height:100%}
  body{
    background:
      radial-gradient(ellipse at 50% 0%, #2a1a14 0%, #0d0c0c 55%, #000 100%),
      #000;
    background-attachment: fixed;
  }
  img{display:block;-webkit-user-drag:none;user-select:none}

  /* ============== METAL TEXTURE (CSS, no asset) ============== */
  .metal{
    background:
      repeating-linear-gradient(90deg, #2a221e 0 2px, #1f1916 2px 4px),
      linear-gradient(180deg, #3a322e 0%, #1a1410 100%);
    border:2px solid #000;
    box-shadow:
      inset 0 2px 0 #5a4d44,
      inset 0 -2px 0 #100c0a,
      inset 2px 0 0 #45382f,
      inset -2px 0 0 #1f1916;
  }
  .metal::before, .metal::after{content:'';position:absolute;background:#1a1410;border:1px solid #000}
  /* hazard tape */
  .hazard{
    background: repeating-linear-gradient(45deg,
      #f5b042 0 14px, #1a1410 14px 28px);
    border-top:2px solid #000; border-bottom:2px solid #000;
  }

  /* ============== TOP MARQUEE (TITLE BAR) ============== */
  .q-top{
    position:fixed; inset:0 0 auto 0; z-index:50;
    height: var(--hud-h);
    display:grid; grid-template-columns: 1fr auto 1fr; align-items:stretch;
    border-bottom:3px solid #000;
  }
  .q-top .panel{
    position:relative;
    background:
      radial-gradient(ellipse at 50% 100%, #4a3024, transparent 70%),
      linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
    border-bottom:2px solid #5a4d44;
    overflow:hidden;
  }
  .q-top .panel::before{
    content:''; position:absolute; inset:auto 0 0 0; height:8px;
    background: repeating-linear-gradient(90deg,
      #f5b042 0 12px, #1a1410 12px 24px);
  }
  .q-top .center{
    display:flex; align-items:center; gap: 18px; padding: 0 28px;
    background:
      radial-gradient(ellipse at 50% 0%, #6e0606, transparent 60%),
      linear-gradient(180deg, #2a0a08, #0d0303);
    border-left:3px solid #000; border-right:3px solid #000;
    border-bottom:2px solid #c41e0e;
    box-shadow: inset 0 -10px 30px #c41e0e30;
  }
  .q-title{
    font-family: var(--f-doom);
    font-size: clamp(20px, 3.4vw, 44px);
    color: #ffd089;
    letter-spacing: .04em;
    text-shadow:
      0 0 4px #ff5a1a,
      0 0 14px #c41e0e,
      0 2px 0 #6e0606,
      0 4px 10px #000;
    -webkit-text-stroke: 1px #2a0606;
    white-space:nowrap;
    user-select:none;
  }
  .q-title .Q{
    color:#ff8c3a; cursor:crosshair;
    display:inline-block; transition:transform .1s;
  }
  .q-title .Q:hover{ transform: scale(1.18) rotate(-4deg); filter:drop-shadow(0 0 8px #ff5a1a) }
  .q-title .Q:active{ transform: scale(.9) }

  .q-side-stat{
    display:grid; grid-template-columns: 1fr; align-items:center;
    padding: 10px 22px; gap: 4px;
    color: var(--ember);
    font-family: var(--f-mono);
    font-size: clamp(13px, 1.2vw, 18px);
  }
  .q-side-stat.left  { text-align:left; border-right:3px solid #000; }
  .q-side-stat.right { text-align:right; border-left:3px solid #000; }
  .q-side-stat .lbl{ font-family: var(--f-pixel); font-size: clamp(8px, .85vw, 11px); color:#a36c2e; letter-spacing:.15em; text-transform:uppercase }
  .q-side-stat .val{ font-size: clamp(18px, 1.8vw, 26px); color:#ffd089; font-family:var(--f-doom); letter-spacing:.04em }
  .q-side-stat .blink{ animation: qBlink 1s steps(2) infinite }
  @keyframes qBlink{ 50%{opacity:.2} }

  /* ============== STAGE ============== */
  .q-stage{
    position:fixed;
    top: var(--hud-h); bottom: var(--status-h); left:0; right:0;
    overflow:hidden;
    display:grid;
    grid-template-columns: minmax(220px, 1fr) minmax(380px, 1.4fr) minmax(220px, 1fr);
    grid-template-rows: 1fr;
    gap: 0;
  }

  /* center column */
  .q-center{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-left: 3px solid #000; border-right:3px solid #000;
    background:
      radial-gradient(circle at 50% 40%, #2a0a06 0%, transparent 55%),
      radial-gradient(circle at 50% 80%, #6e0606 -10%, transparent 50%),
      #100c0a;
    overflow:hidden;
  }
  /* pulsing pentagram floor */
  .q-floor{
    position:absolute; left:50%; bottom:-30%; transform:translateX(-50%);
    width: 120%; aspect-ratio:2/1;
    background:
      radial-gradient(ellipse at 50% 100%, #c41e0e80 0%, transparent 45%),
      conic-gradient(from 0deg at 50% 100%,
        #6e060600, #c41e0e30, #6e060600, #c41e0e30, #6e060600,
        #c41e0e30, #6e060600, #c41e0e30, #6e060600);
    filter: blur(4px);
    animation: qFloor 8s linear infinite;
    pointer-events:none;
  }
  @keyframes qFloor{
    to{ transform:translateX(-50%) rotate(360deg) }
  }
  /* embers */
  .q-embers{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
  .q-embers i{
    position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
    background: radial-gradient(circle, #ffd089, #ff5a1a 60%, transparent 80%);
    animation: qEmber linear infinite;
    box-shadow:0 0 6px #ff5a1a;
  }
  @keyframes qEmber{
    0%   { transform: translate(0,0) scale(1); opacity:0 }
    10%  { opacity:1 }
    100% { transform: translate(var(--dx), -110vh) scale(.2); opacity:0 }
  }

  /* TORCH = the original logo, central, clickable */
  .q-torch{
    position:relative; z-index:3;
    cursor:crosshair;
    transition:transform .15s;
    filter: drop-shadow(0 0 18px #ff5a1aaa) drop-shadow(0 0 60px #c41e0e80);
    animation: qTorchPulse 1.6s ease-in-out infinite;
  }
  .q-torch img{ width: clamp(140px, 18vw, 240px); height:auto }
  .q-torch:hover{ filter: drop-shadow(0 0 28px #ff5a1a) drop-shadow(0 0 90px #c41e0e) brightness(1.1) }
  .q-torch:active{ transform: scale(.95) }
  @keyframes qTorchPulse{
    0%,100%{ transform:translateY(0) scale(1) }
    50%{ transform:translateY(-6px) scale(1.03) }
  }
  .q-torch-base{
    position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
    width: 240px; height: 50px; pointer-events:none;
    background: radial-gradient(ellipse, #ff5a1a90 0%, #c41e0e40 30%, transparent 70%);
    filter: blur(8px);
    animation: qTorchPulse 1.6s ease-in-out infinite;
  }
  .q-torch-hint{
    position:absolute; left:50%; bottom:-58px; transform:translateX(-50%);
    font-family:var(--f-pixel); font-size:9px; color:#ff8c3a;
    letter-spacing:.2em; opacity:.7; white-space:nowrap;
  }

  /* WEAPON SLOTS — 9 tiles flanking the torch */
  .q-slots{
    position:relative; z-index:2;
    display:grid; gap:14px;
    align-content:center; justify-content:center;
    padding: 22px 16px;
    overflow-y:auto; overflow-x:hidden;
  }
  .q-slots.left  { grid-template-columns: 1fr; border-right: 0 }
  .q-slots.right { grid-template-columns: 1fr; border-left: 0 }
  .q-slots .slots-title{
    font-family:var(--f-pixel); font-size:10px; color:#a36c2e;
    letter-spacing:.2em; text-transform:uppercase;
    text-align:center; padding-bottom:6px; border-bottom:1px dashed #5a4d44;
    margin-bottom: 6px;
  }
  .slot{
    position:relative;
    display:grid; grid-template-columns: 36px 1fr auto; align-items:center;
    gap: 10px; padding: 10px 12px;
    background:
      linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
    border:2px solid #000;
    box-shadow:
      inset 0 1px 0 #5a4d44,
      inset 0 -1px 0 #000,
      0 2px 0 #000;
    color: var(--bone);
    text-decoration:none;
    font-family: var(--f-mono);
    font-size: 19px;
    cursor:pointer;
    transition: transform .08s, background .15s, box-shadow .15s;
  }
  .slot::before{
    content:''; position:absolute; left:-2px; top:-2px; bottom:-2px; width:6px;
    background: linear-gradient(180deg, #6e0606, #c41e0e, #6e0606);
    border:1px solid #000;
  }
  .slot:hover{
    transform: translateX(4px);
    background: linear-gradient(180deg, #3a1414 0%, #1a0606 100%);
    box-shadow: inset 0 0 20px #c41e0e60, 0 0 12px #c41e0e80, 0 2px 0 #000;
    color: #ffd089;
  }
  .slot:hover .slot-key{ background:#c41e0e; color:#fff }
  .slot:active{ transform: translateX(4px) scale(.97) }
  .slot-key{
    font-family:var(--f-doom); font-size:18px; line-height:1;
    background:#0d0303; color:#ff8c3a; border:2px solid #6e0606;
    width:32px; height:32px; display:grid; place-items:center;
    box-shadow: inset 0 -2px 0 #000;
  }
  .slot-name{ letter-spacing:.06em }
  .slot-meta{
    font-family:var(--f-pixel); font-size:8px; color:#a36c2e;
    letter-spacing:.15em;
  }
  .slot[data-soon] .slot-name{ color:#7a5a3a }
  .slot[data-soon]::after{
    content:'SOON'; position:absolute; right:6px; top:-7px;
    font-family:var(--f-pixel); font-size:7px; color:#0d0303;
    background:#f5b042; padding:2px 4px; border:1px solid #000;
  }

  /* ============== STATUS BAR (BOTTOM) ============== */
  .q-status{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    height: var(--status-h);
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:0;
    border-top:3px solid #000;
    background: linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
  }
  .q-status::before{
    content:''; position:absolute; inset:auto 0 100% 0; height:8px;
    background: repeating-linear-gradient(45deg,
      #f5b042 0 14px, #1a1410 14px 28px);
    border-bottom:2px solid #000;
  }
  .q-stat{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 6px 8px; gap: 2px;
    border-right: 2px solid #000;
    background:
      radial-gradient(ellipse at 50% 100%, #6e060640, transparent 60%);
  }
  .q-stat:last-child{ border-right:0 }
  .q-stat .lbl{
    font-family:var(--f-pixel); font-size:9px; color:#a36c2e;
    letter-spacing:.18em; text-transform:uppercase;
  }
  .q-stat .num{
    font-family:var(--f-doom); font-size: clamp(22px, 2.6vw, 38px);
    color:#ff8c3a; letter-spacing:.04em; line-height:1;
    text-shadow: 0 0 8px #ff5a1a, 0 2px 0 #6e0606;
  }
  .q-stat .num.warn{ color:#33ff66; text-shadow:0 0 8px #33ff66 }
  .q-stat.face{
    padding: 0;
    overflow: hidden;
    align-items:center;
    justify-content:center;
  }
  .q-face{
    /* width/height are set by JS at mount time based on the tallest sprite frame */
    image-rendering: pixelated;
    display:grid; place-items:center;
    overflow:hidden;
    transition: filter .2s;
  }
  .q-face[data-state="dead"]{ filter: grayscale(.3) brightness(.7) }
  .q-face[data-state="iddqd"]{
    animation: qFaceGod 1.6s ease-in-out infinite;
  }
  @keyframes qFaceGod{
    0%,100%{ filter: drop-shadow(0 0 4px #33ff66) }
    50%   { filter: drop-shadow(0 0 14px #33ff66) brightness(1.15) }
  }

  /* ============== ACTIVITY FEED PANEL ============== */
  .q-feed-toggle{
    position:fixed; bottom: 100px; right: 14px; z-index: 60;
    background: #2a0606; color: #ff8c3a;
    border: 2px solid #c41e0e;
    font-family: var(--f-pixel); font-size: 10px; letter-spacing:.15em;
    padding: 10px 14px; cursor:pointer;
    box-shadow: 0 0 14px #c41e0e80, inset 0 0 8px #00000088;
  }
  .q-feed-toggle:hover{ background:#c41e0e; color:#fff }

  .q-feed{
    position:fixed; right:0; top: var(--hud-h); bottom: var(--status-h);
    width: clamp(280px, 28vw, 380px);
    background:
      linear-gradient(180deg, #1a1410 0%, #0d0303 100%);
    border-left: 3px solid #000;
    box-shadow: inset 4px 0 0 #6e0606, -8px 0 30px #000a;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    z-index: 55;
    display:flex; flex-direction:column;
  }
  .q-feed.open{ transform:translateX(0) }
  .q-feed-head{
    background: linear-gradient(180deg, #2a0606, #100c0a);
    border-bottom: 2px solid #c41e0e;
    padding: 12px 16px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .q-feed-head h3{
    font-family: var(--f-doom); font-size: 18px; color:#ffd089; letter-spacing:.06em;
  }
  .q-feed-head button{
    background:transparent; border:1px solid #c41e0e; color:#ff8c3a;
    font-family: var(--f-pixel); font-size:9px; padding: 4px 8px; cursor:pointer;
  }
  .q-feed-list{ overflow-y:auto; padding: 8px; flex:1 }
  .q-feed-item{
    display:grid; grid-template-columns: 50px 1fr; gap: 10px;
    padding: 8px; border:1px solid #2a221e;
    margin-bottom: 6px;
    background: #0d0303;
    transition: background .15s, border .15s;
    cursor:pointer;
  }
  .q-feed-item:hover{ background:#1a0606; border-color:#c41e0e }
  .q-feed-thumb{
    width:50px; height:50px;
    background:
      repeating-linear-gradient(45deg, #2a221e 0 4px, #100c0a 4px 8px);
    border:1px solid #5a4d44;
    display:grid; place-items:center;
    color:#ff8c3a; font-family:var(--f-pixel); font-size:9px;
  }
  .q-feed-tag{
    font-family:var(--f-pixel); font-size:8px;
    color: var(--ember); letter-spacing:.15em; margin-bottom:2px;
  }
  .q-feed-title{
    font-family: var(--f-mono); font-size:18px; color:#ffd089; line-height:1.1;
  }
  .q-feed-time{
    font-family: var(--f-pixel); font-size:7px; color:#a36c2e; margin-top:2px;
  }

  /* ============== ADMIN BUTTON ============== */
  .q-admin{
    position:fixed; right:14px; top: calc(var(--hud-h) + 12px); z-index: 60;
    background: #0d0d0d; color: #33ff66;
    border: 2px solid #33ff66;
    font-family: var(--f-pixel); font-size: 9px; letter-spacing:.15em;
    padding: 8px 12px; cursor:pointer;
    box-shadow: 0 0 12px #33ff6660;
  }
  .q-admin:hover{ background:#33ff66; color:#0d0d0d }

  /* ============== DOOM DOOR (overlay) ============== */
  .q-door{
    position:fixed; inset: var(--hud-h) 0 var(--status-h) 0; z-index: 70;
    pointer-events:none;
    transition: transform 1.6s cubic-bezier(.55,.05,.4,.95);
    transform: translateY(-100%);
  }
  .q-door.closed{ transform: translateY(0); pointer-events:auto; cursor:pointer }
  .q-door .panes{
    position:absolute; inset:0;
    display:grid; grid-template-columns: 1fr 1fr;
    background:#0d0303;
  }
  .q-door .pane{
    background:
      linear-gradient(180deg, #100c0a 0%, #2a221e 50%, #100c0a 100%),
      url('../assets/ui/doordoom.png');
    background-size: cover, 256px 256px;
    background-blend-mode: multiply, normal;
    image-rendering: pixelated;
    filter: contrast(1.05) saturate(.9);
    border: 4px solid #000;
    position:relative;
  }
  .q-door .pane:nth-child(1){
    background:
      linear-gradient(90deg, #100c0a 0%, transparent 30%),
      url('../assets/ui/doordoom.png');
    background-size: cover, 256px 256px;
  }
  .q-door .pane::after{
    content:''; position:absolute; inset:auto 0 0 0; height:24px;
    background: repeating-linear-gradient(45deg,
      #f5b042 0 14px, #1a1410 14px 28px);
    border-top:3px solid #000;
  }
  .q-door .seam{
    position:absolute; left:50%; top:0; bottom:0; width:6px; transform:translateX(-50%);
    background: linear-gradient(180deg, #c41e0e, #6e0606);
    box-shadow: 0 0 12px #ff5a1a;
  }
  .q-door .lock{
    position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
    width: clamp(80px, 9vw, 130px); aspect-ratio:1;
    background:
      radial-gradient(circle at 50% 50%, #c41e0e 0%, #6e0606 40%, #2a0606 70%, #000 100%);
    border: 4px solid #000;
    box-shadow: inset 0 0 30px #000, 0 0 30px #c41e0e;
    display:grid; place-items:center;
    color:#ffd089; font-family:var(--f-doom); font-size: clamp(14px, 1.6vw, 22px);
    letter-spacing:.06em;
    text-shadow: 0 0 8px #ff5a1a, 0 2px 0 #6e0606;
    text-align:center;
    animation: qLockPulse 1.8s ease-in-out infinite;
  }
  @keyframes qLockPulse{
    50%{ box-shadow: inset 0 0 30px #000, 0 0 50px #ff5a1a }
  }

  /* ============== RAGE METER ON THE TITLE ============== */
  .q-rage-bar{
    position:fixed; left:0; right:0; top:0; height:3px; z-index:80;
    background: linear-gradient(90deg, #c41e0e var(--rage,0%), transparent var(--rage,0%));
    pointer-events:none;
    box-shadow: 0 0 8px #c41e0e;
  }

  /* ============== NARROW DESKTOP / TABLET ============== */
  @media (max-width: 1180px) and (min-width: 901px){
    :root{ --hud-h: 76px; --status-h: 86px }
    .q-stage{ grid-template-columns: minmax(178px, .82fr) minmax(320px, 1.35fr) minmax(178px, .82fr) }
    .q-slots{ gap:9px; padding:14px 10px }
    .slot{ grid-template-columns:30px minmax(0,1fr) auto; gap:8px; padding:8px 9px; font-size:17px }
    .slot-key{ width:28px; height:28px; font-size:16px }
    .slot-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .slot-meta{ font-size:7px }
    .q-torch img{ width:clamp(120px, 16vw, 190px) }
    .q-status{ height:var(--status-h) }
    .q-stat .num{ font-size:clamp(22px, 2.2vw, 32px) }
    .q-feed-toggle{ bottom:calc(var(--status-h) + 10px) }
    .q-face{ transform:translateY(-2px) }
  }

  /* ============== MOBILE ============== */
  @media (max-width: 900px){
    :root{ --hud-h: 56px; --status-h: 70px; --mobile-slots-h: 196px }
    html, body{ overflow-y:auto; height:auto; min-height:100% }
    .q-stage{
      position:relative; top:0; bottom:0; left:0; right:0;
      margin-top: var(--hud-h);
      margin-bottom: calc(var(--status-h) + var(--mobile-slots-h));
      display:block;
      min-height: calc(100vh - var(--hud-h) - var(--status-h) - var(--mobile-slots-h));
      overflow:visible;
    }
    .q-center{
      min-height: calc(100vh - var(--hud-h) - var(--status-h) - var(--mobile-slots-h));
      border-left:0; border-right:0; border-bottom:3px solid #000;
      padding: 24px 0;
    }
    .q-torch img{ width: clamp(120px, 34vw, 180px) }
    .q-torch-hint{
      width:max-content;
      max-width:92vw;
      font-size:7px;
      bottom:-42px;
      overflow:visible;
      letter-spacing:.14em;
    }
    .q-slots{
      position:fixed;
      left:auto;
      right:auto;
      bottom:var(--status-h);
      z-index:58;
      width:50%;
      height:var(--mobile-slots-h);
      display:grid;
      grid-template-columns:1fr;
      grid-auto-rows:32px;
      align-content:center;
      gap:6px;
      padding:9px 10px;
      overflow:hidden;
      background:
        linear-gradient(180deg, #241812f7 0%, #0d0303fb 100%);
      border-top:3px solid #000;
      box-shadow:0 -8px 24px #000b, inset 0 2px 0 #5a4d44, inset 0 0 24px #6e060630;
    }
    .q-slots.left{ left:0; border-right:1px solid #000 }
    .q-slots.right{ right:0; border-left:1px solid #6e0606 }
    .q-slots .slots-title{ display:none }
    .slot{
      min-width:0;
      height:32px;
      grid-template-columns:26px minmax(0,1fr) auto;
      gap:6px;
      padding:4px 7px;
      font-size:15px;
      border-width:1px;
      box-shadow:inset 0 1px 0 #5a4d44, inset 0 -1px 0 #000;
    }
    .slot::before{ width:4px; left:-1px; top:-1px; bottom:-1px }
    .slot:hover{ transform:none }
    .slot:active{ transform:scale(.98) }
    .slot-key{ width:24px; height:24px; font-size:14px; border-width:1px }
    .slot-name{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      letter-spacing:.02em;
    }
    .slot-meta{ font-size:7px; letter-spacing:.08em }
    .slot[data-soon]::after{ top:-5px; right:4px; font-size:6px; padding:1px 3px }
    .q-side-stat.left, .q-side-stat.right{ display:none }
    .q-top{ grid-template-columns: 1fr }
    .q-top .panel{ display:none }
    .q-top .center{ border-left:0; border-right:0; justify-content:center; padding:0 34px }
    .q-title{ font-size:clamp(22px, 7vw, 34px); max-width:100%; overflow:hidden; text-overflow:ellipsis }
    .q-feed{ width: 100%; top: var(--hud-h); bottom: var(--status-h) }
    .q-status{ grid-template-columns: repeat(3, 1fr) }
    /* Hide Lines (4) and Rage (5) on mobile */
    .q-status .q-stat:nth-child(4),
    .q-status .q-stat:nth-child(5){ display:none }
    /* Reorder visible stats: Health · Face · Frags */
    .q-status .q-stat:nth-child(1){ order: 3 } /* Frags */
    .q-status .q-stat:nth-child(2){ order: 1 } /* Health */
    .q-status .q-stat:nth-child(3){ order: 2 } /* Face */
    .q-console{ left:0; right:0; width:100vw; height: 74vh }
    .q-cons-bar{ grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding:5px 8px }
    .q-cons-bar .dots{ gap:4px }
    .q-cons-bar .dot{ width:8px; height:8px }
    .q-cons-bar .path{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .q-cons-bar .close{ font-size:0; padding:5px 7px }
    .q-cons-bar .close::before{ content:'▲'; font-size:9px }
    .q-cons-out{ font-size: 10px; padding:8px 9px; overflow-x:hidden }
    .q-cons-banner{
      font-size:clamp(3px, 1.15vw, 5px);
      max-width:100%;
      overflow:hidden;
      white-space:pre;
      line-height:1.08;
      margin-bottom:6px;
    }
    .q-cons-prompt{ padding:7px 9px; gap:5px }
    .q-cons-prompt input, .q-cons-prompt .ps1, .q-cons-prompt .cmd-wrap{ font-size: 11px }
    .q-cons-prompt .caret{ width:7px }
    .q-preview.show{ justify-content:flex-start }
    .q-preview{ padding-top:18px; overflow-y:auto }
    .q-boot{ gap:16px; padding:22px 18px; justify-content:center; overflow:hidden }
    .q-boot .banner{
      max-width:94vw;
      overflow:hidden;
      font-size:clamp(6px, 1.8vw, 9px);
      padding:4px;
    }
    .q-boot .map{
      max-width:94vw;
      font-size:clamp(22px, 6.8vw, 34px);
      line-height:1.05;
      text-align:center;
      overflow-wrap:anywhere;
    }
    .q-boot .sub{
      max-width:92vw;
      font-size:8px;
      line-height:1.45;
      text-align:center;
      overflow-wrap:anywhere;
    }
    .q-boot .bar{ width:min(74vw, 360px); height:16px }
    .q-boot .pct{ font-size:21px }
    .q-boot .lines{
      width:min(74vw, 360px);
      max-height:26vh;
      font-size:11px;
      line-height:1.04;
    }
    .q-admin-row{ grid-template-columns: 28px 1fr 1fr; row-gap:6px }
    .q-admin-row > select, .q-admin-row > .toggle, .q-admin-row > .del{ grid-column: span 1 }
    .q-admin-cmd-row{ grid-template-columns: 1fr 1fr }
    .q-preview-frame{ aspect-ratio: 4/3 }
    .q-section-view{ width:100%; max-height:100%; padding:0 2px }
    .q-section-head{ align-items:stretch; flex-direction:column }
    .q-section-grid{ grid-template-columns:minmax(0, 1fr) }
    .q-section-item{ min-height:128px }
    .q-section-item-label{
      font-size:20px;
      line-height:1.05;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .q-section-item-desc{
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .q-bookmark-grid{
      grid-template-columns:repeat(auto-fit, minmax(min(132px, 100%), 1fr));
      gap:8px;
    }
    .q-bookmark-folders{
      max-height:118px;
    }
    .q-bookmark-node,
    .q-bookmark-up{
      min-height:124px;
      padding:10px 8px;
    }
    .q-bookmark-icon,
    .q-bookmark-up span{
      width:40px;
      height:40px;
      font-size:14px;
    }
    .q-feed-toggle{
      right:0;
      bottom: calc(var(--status-h) + var(--mobile-slots-h) + 10px);
      width:32px;
      height:38px;
      padding:0;
      display:grid;
      place-items:center;
      font-size:0;
      line-height:1;
      text-align:center;
      border-right:0;
      box-shadow: -4px 0 18px #000a, 0 0 14px #c41e0e80, inset 0 0 8px #00000088;
    }
    .q-feed-toggle::before{
      content:'▶';
      font-family:var(--f-pixel);
      font-size:10px;
      line-height:1;
      display:block;
      color:#ff8c3a;
    }
  }

  @media (max-width: 520px){
    :root{ --mobile-slots-h: 176px }
    .q-stage{ margin-bottom:calc(var(--status-h) + var(--mobile-slots-h)) }
    .q-center{ min-height:calc(100vh - var(--hud-h) - var(--status-h) - var(--mobile-slots-h)); padding:18px 0 }
    .q-slots{ grid-auto-rows:28px; gap:5px; padding:8px }
    .slot{ height:28px; grid-template-columns:23px minmax(0,1fr); padding:3px 6px; font-size:14px }
    .slot-key{ width:21px; height:21px; font-size:12px }
    .slot-meta{ display:none }
    .q-preview{ padding:14px 10px }
    .q-cons-out{ font-size:9px; padding:7px 8px }
    .q-cons-banner{ font-size:clamp(3px, 1vw, 4px) }
    .q-cons-prompt input, .q-cons-prompt .ps1, .q-cons-prompt .cmd-wrap{ font-size:10px }
    .q-boot{ gap:13px; padding:18px 14px }
    .q-boot .banner{ font-size:clamp(5px, 1.55vw, 7px); max-width:90vw }
    .q-boot .map{ font-size:clamp(20px, 6.2vw, 30px); max-width:88vw }
    .q-boot .sub{ font-size:7px; max-width:86vw }
    .q-boot .bar{ width:min(68vw, 300px); height:14px }
    .q-boot .pct{ font-size:19px }
    .q-boot .lines{ width:min(68vw, 300px); max-height:25vh; font-size:10px; line-height:1.03 }
    .q-preview-actions{ flex-direction:column; width:min(260px, 90%) }
    .q-preview-actions button{ width:100%; font-size:16px; padding:9px 16px }
    .q-section-title{ font-size:clamp(24px, 8vw, 34px) }
    .q-section-desc{ font-size:16px }
  }

  /* ===== scrollbars ===== */
  .q-slots::-webkit-scrollbar, .q-feed-list::-webkit-scrollbar{ width:8px }
  .q-slots::-webkit-scrollbar-thumb, .q-feed-list::-webkit-scrollbar-thumb{ background:#6e0606 }
  .q-slots::-webkit-scrollbar-track, .q-feed-list::-webkit-scrollbar-track{ background:#100c0a }

  /* ============== QUAKE CONSOLE (drop-down) ============== */
  .q-console{
    position:fixed; left:0; right:0; top:0; height:65vh; z-index:200;
    background: linear-gradient(180deg, rgba(8,12,10,.985) 0%, rgba(13,3,3,.97) 100%);
    border-bottom: 3px solid #c41e0e;
    box-shadow: 0 8px 0 #6e0606, 0 12px 60px #000c, inset 0 0 0 1px #1f3a26, inset 0 -10px 30px #c41e0e30;
    transform: translateY(-100%);
    transition: transform .55s cubic-bezier(.55,.05,.4,.95);
    display:grid; grid-template-rows: auto 1fr auto;
    font-family: 'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace; color:#33ff66;
    overflow:hidden;
  }
  .q-console.open{ transform: translateY(0) }
  .q-console.boot{ transform: translateY(0); height:100vh; border-bottom-width:0; box-shadow:none }
  .q-console::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
  }
  .q-console::after{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
  }
  .q-cons-bar{
    position:relative; z-index:2;
    display:grid; grid-template-columns: auto 1fr auto; gap:14px; align-items:center;
    padding:6px 14px;
    background: linear-gradient(180deg,#0d1a14,#060a08);
    border-bottom:1px solid #1f3a26;
    font-family: 'Share Tech Mono', ui-monospace, monospace; font-size:12px; color:#ffb000;
    letter-spacing:.05em;
  }
  .q-cons-bar .dots{ display:flex; gap:6px }
  .q-cons-bar .dot{ width:10px; height:10px; border-radius:50%; background:#1f3a26; border:1px solid #0d6e2c }
  .q-cons-bar .dot.on{ background:#33ff66; box-shadow:0 0 8px #33ff66 }
  .q-cons-bar .dot.warn{ background:#ffb000; box-shadow:0 0 8px #ffb000 }
  .q-cons-bar .dot.bad{ background:#c41e0e; box-shadow:0 0 8px #c41e0e }
  .q-cons-bar .path{ color:#cfd6c8 } .q-cons-bar .path b{ color:#33ff66 }
  .q-cons-bar .close{
    background:transparent; border:1px solid #c41e0e; color:#ff8c3a;
    font-family:'Press Start 2P', monospace; font-size:8px; padding:4px 8px;
    letter-spacing:.15em; cursor:pointer;
  }
  .q-cons-bar .close:hover{ background:#c41e0e; color:#fff }
  .q-cons-out{
    position:relative; z-index:2;
    overflow-y:auto; padding:14px 18px;
    font-size:22px; line-height:1.18;
    /* Hide scrollbar but keep wheel/PageUp/PageDown scrolling functional —
       authentic Quake feel where the console scrolls but no chrome shows. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge legacy */
  }
  .q-cons-out::-webkit-scrollbar{ width:0; height:0; display:none } /* Chrome / Safari / WebKit */
  .q-cons-out::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(0deg, rgba(51,255,102,.06) 0 1px, transparent 1px 26px);
  }
  .q-cons-line{ position:relative; z-index:1; white-space:pre-wrap; word-break:break-word }
  .q-cons-banner{
    /* ASCII art: needs strict cell-based mono + no wrap. Same recipe as the boot
       banner (matches patorjk.com's renderer). */
    position:relative; z-index:1;
    color:#ff8c1a;
    font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(9px, 0.9vw, 13px);
    line-height: 1.17;
    white-space: pre;
    text-align: left;
    text-shadow: 0 0 6px #ff8c1a;
    margin: 0 0 8px 0;
    overflow-x: auto;
  }
  .q-cons-line .dim{ color:#7e8e7a } .q-cons-line .ok{ color:#33ff66 }
  .q-cons-line .warn{ color:#ffb000 } .q-cons-line .bad{ color:#c41e0e; text-shadow:0 0 4px #c41e0e }
  .q-cons-line .hl{ color:#ff8c1a; text-shadow:0 0 4px #ff8c1a }
  .q-cons-prompt{
    position:relative; z-index:2;
    display:flex; gap:8px; align-items:center;
    padding:10px 18px;
    background: linear-gradient(180deg, transparent, #0d1a14);
    border-top:1px dashed #1f3a26;
  }
  .q-cons-prompt .ps1{ color:#33ff66; font-family:'Share Tech Mono',ui-monospace,monospace; font-size:22px }
  .q-cons-prompt .ps1 b{ color:#ff8c1a }
  .q-cons-prompt .cmd-wrap{
    /* Holds the input + an absolute mirror used to measure the text BEFORE the
       caret position, so the retro block caret can be placed right at the cursor. */
    position:relative;
    flex:1;
    display:flex; align-items:center;
    min-width:0;
    font-family:'Share Tech Mono',ui-monospace,monospace; font-size:22px;
    line-height:1;
  }
  .q-cons-prompt .cmd-mirror{
    position:absolute; top:0; left:0;
    visibility:hidden; pointer-events:none;
    white-space:pre;
    font-family:inherit; font-size:inherit;
    padding:0;
  }
  .q-cons-prompt input{
    flex:1; background:transparent; border:0; outline:none; padding:0;
    color:#33ff66; font-family:inherit; font-size:inherit;
    caret-color: transparent;
    min-width:0;
  }
  .q-cons-prompt .caret{
    position:absolute; top:50%; left:0;
    width:10px; height:1em;
    background:#33ff66;
    transform:translate(0, -50%);
    animation:qCaret 1s steps(2) infinite;
    pointer-events:none;
  }
  @keyframes qCaret{ 50%{opacity:0} }

  /* QUAKE LOADING ART (boot full-screen) */
  .q-boot{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:28px;
    background: radial-gradient(ellipse at 50% 50%, #2a0a06 0%, #0a0214 70%, #000 100%);
  }
  .q-boot.gone{ opacity:0; transition:opacity .4s; pointer-events:none }
  .q-boot .banner{
    /* Mirrors how patorjk.com renders figlet output: system mono stack +
       text-align:left + line-height:1.17. Centered alignment and IBM Plex Mono
       both broke the cell-based grid that ASCII art needs. */
    color:#ff8c1a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: clamp(10px, 1.1vw, 14px);
    line-height: 1.17;
    white-space: pre;
    text-align: left;
    text-shadow: 0 0 8px #ff8c1a;
    display: inline-block;
    padding: 8px;
  }
  .q-boot .map{
    font-family:'Black Ops One', sans-serif; font-size: clamp(28px, 4vw, 56px);
    color:#ffd089; letter-spacing:.05em;
    text-shadow: 0 0 8px #ff5a1a, 0 0 24px #c41e0e, 0 4px 0 #6e0606;
    -webkit-text-stroke:1px #2a0606;
  }
  .q-boot .sub{
    font-family:'Press Start 2P', monospace; font-size:10px;
    color:#a36c2e; letter-spacing:.2em;
  }
  .q-boot .bar{
    position:relative; width: min(60vw, 600px); height: 18px;
    background:#0d0303; border:2px solid #6e0606;
    box-shadow: inset 0 0 12px #00000088;
  }
  .q-boot .bar > span{
    display:block; height:100%; width:0%;
    background: repeating-linear-gradient(90deg, #c41e0e 0 8px, #ff5a1a 8px 16px);
    box-shadow: 0 0 12px #c41e0e, inset 0 -2px 0 #6e0606;
    transition: width .15s linear;
  }
  .q-boot .pct{
    font-family:'Share Tech Mono',ui-monospace,monospace; font-size:24px; color:#ff8c3a;
    text-shadow:0 0 8px #ff5a1a;
  }
  .q-boot .lines{
    width: min(70vw, 720px); max-height: 30vh; overflow:hidden;
    font-family:'Share Tech Mono',ui-monospace,monospace; font-size:18px; color:#7e8e7a;
    border-top:1px dashed #1f3a26; padding-top:12px;
  }
  .q-boot .lines .ok{ color:#33ff66 } .q-boot .lines .warn{ color:#ffb000 }
  .q-boot .lines .hl{ color:#ff8c1a; text-shadow:0 0 4px #ff8c1a }
  .q-boot .hint{
    position:absolute; bottom:24px; left:0; right:0; text-align:center;
    color:#a36c2e; font-family:'Press Start 2P', monospace; font-size:9px;
    letter-spacing:.18em; opacity:0; transition: opacity .3s;
  }
  .q-boot .hint.show{ opacity:.85 }

  /* CONSOLE TOGGLE — DISCRETE ² */
  .q-cons-toggle{
    position:fixed; left:8px; top:8px; z-index:60;
    width:24px; height:24px; padding:0;
    background:#0d0303; color:#33ff66;
    border:1px solid #1f3a26;
    font-family:'VT323', monospace; font-size:18px; line-height:1;
    display:grid; place-items:center;
    cursor:pointer; opacity:.4;
    transition: opacity .15s, background .15s, color .15s, transform .1s, box-shadow .15s;
  }
  .q-cons-toggle:hover{
    opacity:1; background:#33ff66; color:#0d0303;
    box-shadow: 0 0 8px #33ff6680;
  }
  body.q-cons-locked .q-cons-toggle{ display:none }

  /* ============== CENTER STAGE PREVIEW ============== */
  .q-preview{
    position:absolute; inset:0; z-index:4;
    display:none;
    flex-direction:column; align-items:center; justify-content:center;
    gap:14px; padding:20px;
    background: radial-gradient(ellipse at 50% 40%, #2a0a06ee 0%, #0d0303f2 70%);
  }
  .q-preview.show{ display:flex; animation: qPrevIn .25s ease-out }
  @keyframes qPrevIn{
    from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:scale(1) }
  }
  .q-preview-tag{
    font-family: var(--f-pixel); font-size:10px; color:#ff8c3a;
    letter-spacing:.25em;
  }
  .q-preview-title{
    font-family: var(--f-doom); font-size: clamp(24px, 3.6vw, 48px);
    color:#ffd089; letter-spacing:.04em; text-align:center;
    text-shadow: 0 0 8px #ff5a1a, 0 0 24px #c41e0e, 0 4px 0 #6e0606;
    -webkit-text-stroke:1px #2a0606; line-height:1;
  }
  .q-preview-frame{
    width: min(86%, 460px); aspect-ratio: 16/10;
    background:
      repeating-linear-gradient(45deg, #2a221e 0 6px, #100c0a 6px 12px),
      #1a1410;
    border: 3px solid #6e0606;
    box-shadow: inset 0 0 30px #000c, 0 0 40px #c41e0e60;
    position:relative;
    display:grid; place-items:center;
    overflow:hidden;
  }
  .q-preview-frame img{
    max-width:100%; max-height:100%; object-fit:cover; width:100%; height:100%;
    image-rendering: pixelated; filter: contrast(1.05) saturate(.85);
  }
  .q-preview-frame .placeholder{
    font-family: var(--f-pixel); font-size:11px; color:#a36c2e;
    letter-spacing:.18em; text-align:center; padding:20px; line-height:1.6;
  }
  .q-preview-frame .placeholder b{ color:#ff8c3a; display:block; font-size:32px; margin-bottom:8px }
  .q-preview-frame::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  }
  .q-preview-meta{
    font-family: var(--f-mono); font-size:18px; color:#cfd6c8; text-align:center;
    max-width: 86%; line-height:1.2;
  }
  .q-preview-actions{ display:flex; gap:14px; margin-top:6px }
  .q-preview-actions button{
    font-family: var(--f-doom); font-size:18px; letter-spacing:.06em;
    padding: 10px 22px; cursor:pointer;
    border: 3px solid #000;
    box-shadow: inset 0 -4px 0 #000a, 0 2px 0 #000;
    transition: transform .08s, background .15s;
  }
  .q-preview-actions button:active{ transform: translateY(2px) }
  .q-preview-actions .yes{
    background: linear-gradient(180deg, #c41e0e, #6e0606);
    color:#ffd089; text-shadow: 0 2px 0 #000;
  }
  .q-preview-actions .yes:hover{ background: linear-gradient(180deg, #ff5a1a, #c41e0e) }
  .q-preview-actions .no{
    background: linear-gradient(180deg, #2a221e, #100c0a); color:#a36c2e;
  }
  .q-preview-actions .no:hover{ color:#ff8c3a }
  .q-preview-kbd{
    font-family: var(--f-pixel); font-size:8px; color:#a36c2e;
    letter-spacing:.2em; margin-top:4px;
  }

  /* ============== SECTION VIEW (apps/tools/bookmarks) ============== */
  .q-section-view{
    width:min(92%, 760px);
    max-height:92%;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .q-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px dashed #6e0606;
    padding-bottom:10px;
    min-width:0;
  }
  .q-section-title{
    min-width:0;
    font-family:var(--f-doom);
    font-size:clamp(26px, 3.2vw, 44px);
    line-height:1;
    color:#ffd089;
    letter-spacing:.04em;
    text-shadow:0 0 8px #ff5a1a, 0 3px 0 #6e0606;
    -webkit-text-stroke:1px #2a0606;
    overflow-wrap:anywhere;
  }
  .q-section-close{
    flex:0 0 auto;
    background:transparent;
    border:1px solid #c41e0e;
    color:#ff8c3a;
    font-family:var(--f-pixel);
    font-size:9px;
    padding:8px 10px;
    cursor:pointer;
    letter-spacing:.15em;
  }
  .q-section-close:hover{ background:#c41e0e; color:#fff }
  .q-section-desc{
    min-width:0;
    font-family:var(--f-mono);
    color:#cfa07a;
    font-size:18px;
    line-height:1.2;
    overflow-wrap:anywhere;
  }
  .q-section-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap:10px;
    overflow-y:auto;
    padding:2px 2px 8px;
    scrollbar-width:thin;
    scrollbar-color:#cfa07a #100c0a;
  }
  .q-section-grid::-webkit-scrollbar,
  .q-playlist-list::-webkit-scrollbar,
  .q-web-preview-stage::-webkit-scrollbar,
  .q-md2-debug::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  .q-section-grid::-webkit-scrollbar-track,
  .q-playlist-list::-webkit-scrollbar-track,
  .q-web-preview-stage::-webkit-scrollbar-track,
  .q-md2-debug::-webkit-scrollbar-track{
    background:#100c0a;
    border-left:1px solid #050403;
  }
  .q-section-grid::-webkit-scrollbar-thumb,
  .q-playlist-list::-webkit-scrollbar-thumb,
  .q-web-preview-stage::-webkit-scrollbar-thumb,
  .q-md2-debug::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, #cfa07a, #5a4d44);
    border:2px solid #100c0a;
    box-shadow:inset 0 0 0 1px #050403;
  }
  .q-section-grid::-webkit-scrollbar-corner,
  .q-playlist-list::-webkit-scrollbar-corner,
  .q-web-preview-stage::-webkit-scrollbar-corner,
  .q-md2-debug::-webkit-scrollbar-corner{
    background:#100c0a;
  }
  .q-section-item{
    min-width:0;
    min-height:134px;
    display:flex;
    flex-direction:column;
    gap:7px;
    text-align:left;
    background:linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
    border:2px solid #000;
    box-shadow:inset 0 1px 0 #5a4d44, inset 0 -1px 0 #000, 0 2px 0 #000;
    color:#ffd089;
    cursor:pointer;
    padding:12px;
    font-family:var(--f-mono);
    position:relative;
  }
  .q-section-item::before{
    content:'';
    position:absolute;
    left:-2px; top:-2px; bottom:-2px; width:6px;
    background:linear-gradient(180deg, #6e0606, #c41e0e, #6e0606);
    border:1px solid #000;
  }
  .q-section-item:hover{
    background:linear-gradient(180deg, #3a1414 0%, #1a0606 100%);
    border-color:#6e0606;
    box-shadow:inset 0 0 20px #c41e0e60, 0 0 12px #c41e0e80, 0 2px 0 #000;
    transform:translateY(-1px);
  }
  .q-section-item-meta{
    min-width:0;
    width:max-content;
    max-width:100%;
    font-family:var(--f-pixel);
    font-size:8px;
    color:#33ff66;
    border:1px solid #1f8a3c;
    background:#07110a;
    padding:3px 5px;
    letter-spacing:.16em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .q-section-item-label{
    min-width:0;
    font-family:var(--f-doom);
    font-size:clamp(18px, 2.2vw, 22px);
    line-height:1.05;
    color:#ff8c3a;
    text-shadow:0 0 6px #c41e0e;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .q-section-item-desc{
    min-width:0;
    color:#cfa07a;
    font-size:16px;
    line-height:1.12;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
    flex:1 1 auto;
  }
  .q-section-cat{
    min-width:0;
    font-family:var(--f-pixel);
    font-size:8px;
    color:#a36c2e;
    letter-spacing:.14em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .q-section-empty{
    border:1px dashed #5a4d44;
    color:#a36c2e;
    font-family:var(--f-pixel);
    font-size:10px;
    letter-spacing:.16em;
    padding:28px;
    text-align:center;
  }
  .q-bookmark-tree{
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .q-bookmark-crumbs{
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    padding:2px 2px 8px;
    color:#7e8e7a;
    scrollbar-width:thin;
    scrollbar-color:#cfa07a #100c0a;
  }
  .q-bookmark-crumbs button{
    flex:0 0 auto;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    border:1px solid #1f8a3c;
    background:#07110a;
    color:#33ff66;
    cursor:pointer;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.1em;
    padding:6px 8px;
  }
  .q-bookmark-crumbs button.active{
    border-color:#c41e0e;
    color:#ff8c3a;
    background:#120604;
  }
  .q-bookmark-folders{
    max-height:150px;
    overflow:auto;
    display:grid;
    gap:4px;
    padding:7px;
    border:2px solid #050403;
    background:
      repeating-linear-gradient(0deg, rgba(51,255,102,.04) 0 1px, transparent 1px 5px),
      #050403;
    scrollbar-width:thin;
    scrollbar-color:#cfa07a #100c0a;
  }
  .q-bookmark-folder-branch{
    display:grid;
    gap:4px;
  }
  .q-bookmark-folders button{
    min-width:0;
    height:30px;
    display:grid;
    grid-template-columns:24px minmax(0, 1fr) auto;
    align-items:center;
    gap:7px;
    margin-left:calc(var(--depth, 0) * 18px);
    padding:3px 7px;
    border:1px solid #1f8a3c;
    background:#07110a;
    color:#33ff66;
    cursor:pointer;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.08em;
    text-align:left;
  }
  .q-bookmark-folders button:hover,
  .q-bookmark-folders button.active{
    border-color:#c41e0e;
    background:#160706;
    color:#ff8c3a;
  }
  .q-bookmark-folders button span{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border:1px solid currentColor;
    line-height:1;
  }
  .q-bookmark-folders button b{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:400;
  }
  .q-bookmark-folders button em{
    font-style:normal;
    color:#a36c2e;
  }
  .q-bookmark-current{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:5px 2px 0;
    border-top:1px dashed rgba(196,30,14,.6);
    color:#7e8e7a;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
  }
  .q-bookmark-current span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#ff8c3a;
  }
  .q-bookmark-current em{
    flex:0 0 auto;
    font-style:normal;
  }
  .q-bookmark-grid{
    min-height:0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-auto-rows:1fr;
    gap:10px;
    overflow-y:auto;
    padding:2px 2px 8px;
    scrollbar-width:thin;
    scrollbar-color:#cfa07a #100c0a;
  }
  /* Grid view = mini-tile: big centered icon, single-line title, tiny
     tag row. Description / meta / path are kept in DOM (used by list
     view and a11y) but hidden here to keep the retro arcade feel. */
  .q-bookmark-tree[data-view="grid"] .q-bookmark-grid .q-bookmark-node{
    aspect-ratio:1 / 1;
    min-height:0;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 8px;
    text-align:center;
  }
  .q-bookmark-tree[data-view="grid"] .q-bookmark-node > .q-bookmark-icon{
    width:46px;
    height:46px;
    font-size:17px;
    border-width:2px;
    box-shadow:0 0 0 2px #020302, inset 0 -4px 0 rgba(0,0,0,.35);
  }
  .q-bookmark-tree[data-view="grid"] .q-bookmark-node > .q-bookmark-label{
    max-width:100%;
    font-size:clamp(14px, 1.1vw, 18px);
    line-height:1.1;
    display:block;
    -webkit-line-clamp:initial;
    line-clamp:initial;
    -webkit-box-orient:initial;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .q-bookmark-tree[data-view="grid"] .q-bookmark-node > .q-bookmark-desc{
    display:none;
  }
  .q-bookmark-tree[data-view="grid"] .q-bookmark-node > .q-bookmark-meta{
    display:none;
  }
  /* Tags strip below the title, kept small and capped to a single line. */
  .q-bookmark-tree[data-view="grid"] .q-bookmark-node .q-bookmark-tagstrip{
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:3px;
    overflow:hidden;
  }
  .q-bookmark-tree[data-view="grid"] .q-bookmark-node .q-bmk-itemtag{
    flex:0 0 auto;
    font-size:9px;
    padding:1px 4px;
    margin:0;
    max-width:80px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  @media (max-width:1100px){
    .q-bookmark-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  }
  @media (max-width:780px){
    .q-bookmark-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  }
  @media (max-width:480px){
    .q-bookmark-grid{ grid-template-columns:1fr }
  }
  /* List view ignores the column grid entirely. */
  .q-bookmark-tree[data-view="list"] .q-bookmark-grid{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto;
  }
  .q-bookmark-grid::-webkit-scrollbar,
  .q-bookmark-crumbs::-webkit-scrollbar,
  .q-bookmark-folders::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  .q-bookmark-grid::-webkit-scrollbar-track,
  .q-bookmark-crumbs::-webkit-scrollbar-track,
  .q-bookmark-folders::-webkit-scrollbar-track{
    background:#100c0a;
    border-left:1px solid #050403;
  }
  .q-bookmark-grid::-webkit-scrollbar-thumb,
  .q-bookmark-crumbs::-webkit-scrollbar-thumb,
  .q-bookmark-folders::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, #cfa07a, #5a4d44);
    border:2px solid #100c0a;
    box-shadow:inset 0 0 0 1px #050403;
  }
  .q-bookmark-node,
  .q-bookmark-up{
    min-width:0;
    min-height:136px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:12px 10px;
    border:2px solid #000;
    background:linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
    color:#ffd089;
    cursor:pointer;
    font-family:var(--f-mono);
    box-shadow:inset 0 1px 0 #5a4d44, inset 0 -1px 0 #000, 0 2px 0 #000;
    text-align:center;
  }
  .q-bookmark-node[data-type="folder"]{
    background:
      linear-gradient(180deg, rgba(196,30,14,.18), transparent 42%),
      linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
  }
  .q-bookmark-node:hover,
  .q-bookmark-up:hover{
    border-color:#6e0606;
    background:linear-gradient(180deg, #3a1414 0%, #1a0606 100%);
    box-shadow:inset 0 0 20px #c41e0e60, 0 0 12px #c41e0e80, 0 2px 0 #000;
    transform:translateY(-1px);
  }
  .q-bookmark-icon,
  .q-bookmark-up span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:2px solid #1f8a3c;
    background:#07110a;
    color:#33ff66;
    font-family:var(--f-pixel);
    font-size:17px;
    line-height:1;
    image-rendering:pixelated;
    box-shadow:0 0 0 2px #020302, inset 0 -4px 0 rgba(0,0,0,.35);
  }
  .q-bookmark-node[data-type="folder"] .q-bookmark-icon{
    border-color:#c41e0e;
    color:#ff8c3a;
    background:#160706;
  }
  .q-bookmark-label,
  .q-bookmark-up b{
    max-width:100%;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color:#ff8c3a;
    font-family:var(--f-doom);
    font-size:clamp(17px, 2vw, 21px);
    line-height:1.05;
    text-shadow:0 0 6px #c41e0e;
  }
  .q-bookmark-desc{
    max-width:100%;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color:#cfa07a;
    font-size:14px;
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .q-bookmark-meta{
    max-width:100%;
    min-height:1.5em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#a36c2e;
    font-family:var(--f-pixel);
    font-size:7px;
    line-height:1.5;
    letter-spacing:.12em;
  }
  .q-bookmark-meta em{
    font-style:normal;
    color:#7e8e7a;
    margin-left:4px;
  }

  /* ----- BOOKMARK SEARCH (mirrors .q-cons-prompt) ----- */
  .q-bookmark-search{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px;
    border:1px solid #1f8a3c;
    background:linear-gradient(180deg, #07110a, #050a07);
    box-shadow:inset 0 0 0 1px #050403;
  }
  .q-bookmark-search .ps1{
    color:#33ff66;
    font-family:'Share Tech Mono',ui-monospace,monospace;
    font-size:18px;
    white-space:nowrap;
  }
  .q-bookmark-search .ps1 b{ color:#ff8c1a }
  .q-bookmark-search .cmd-wrap{
    position:relative;
    flex:1;
    display:flex; align-items:center;
    min-width:0;
    font-family:'Share Tech Mono',ui-monospace,monospace;
    font-size:18px;
    line-height:1;
  }
  .q-bookmark-search .cmd-mirror{
    position:absolute; top:0; left:0;
    visibility:hidden; pointer-events:none;
    white-space:pre;
    font-family:inherit; font-size:inherit;
    padding:0;
  }
  .q-bookmark-search input{
    flex:1; background:transparent; border:0; outline:none; padding:0;
    color:#33ff66; font-family:inherit; font-size:inherit;
    caret-color:transparent;
    min-width:0;
  }
  .q-bookmark-search input::placeholder{ color:#3a5a3a }
  .q-bookmark-search .caret{
    position:absolute; top:50%; left:0;
    width:9px; height:1em;
    background:#33ff66;
    transform:translate(0, -50%);
    animation:qCaret 1s steps(2) infinite;
    pointer-events:none;
  }
  .q-bmk-clear{
    flex:0 0 auto;
    border:1px solid #c41e0e;
    background:#120604;
    color:#ff8c3a;
    cursor:pointer;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
    padding:5px 8px;
  }
  .q-bmk-clear:hover{ background:#260808 }

  /* ----- BOOKMARK TOOLBAR (sort / view toggles) ----- */
  .q-bookmark-toolbar{
    display:flex; align-items:center; flex-wrap:wrap;
    gap:8px;
    padding:4px 2px;
    color:#7e8e7a;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
  }
  .q-bmk-toolbar-label{ color:#a36c2e }
  .q-bmk-toggle{
    display:inline-flex;
    border:1px solid #1f8a3c;
    background:#07110a;
  }
  .q-bmk-toggle button{
    border:0;
    border-right:1px solid #1f8a3c;
    background:transparent;
    color:#33ff66;
    cursor:pointer;
    font-family:inherit;
    font-size:8px;
    letter-spacing:.12em;
    padding:5px 8px;
  }
  .q-bmk-toggle button:last-child{ border-right:0 }
  .q-bmk-toggle button.active{
    background:#160706;
    color:#ff8c3a;
    box-shadow:inset 0 0 0 1px #c41e0e;
  }
  .q-bmk-toggle button:hover{ color:#ff8c3a }

  /* ----- TAG CHIPS (#tag<count>) ----- */
  .q-bookmark-tags{
    display:flex; align-items:center; flex-wrap:wrap;
    gap:6px;
    padding:4px 2px 6px;
    border-bottom:1px dashed rgba(196,30,14,.45);
  }
  .q-bmk-tags-label{
    color:#a36c2e;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
    margin-right:4px;
  }
  .q-bmk-tag{
    border:1px solid #1f8a3c;
    background:#07110a;
    color:#33ff66;
    cursor:pointer;
    font-family:'Share Tech Mono',ui-monospace,monospace;
    font-size:13px;
    line-height:1;
    padding:4px 7px;
  }
  .q-bmk-tag em{
    font-style:normal;
    color:#7e8e7a;
    margin-left:5px;
    font-size:11px;
  }
  .q-bmk-tag:hover{ color:#ff8c3a; border-color:#c41e0e }
  .q-bmk-tag.active{
    background:#160706;
    color:#ff8c3a;
    border-color:#c41e0e;
    box-shadow:0 0 8px #c41e0e60;
  }

  /* ----- BADGES inside node label ----- */
  .q-bmk-badge{
    display:inline-block;
    margin-right:5px;
    font-family:'Share Tech Mono',ui-monospace,monospace;
    font-size:.75em;
    letter-spacing:0;
    vertical-align:middle;
  }
  .q-bmk-badge.pinned{ color:#ffd089; text-shadow:0 0 6px #ff8c1a }
  .q-bmk-badge.todo{ color:#33ff66 }
  .q-bmk-badge.read{ color:#7e8e7a }
  .q-bookmark-desc .q-bmk-itemtag{
    display:inline-block;
    margin:3px 4px 0 0;
    padding:1px 5px;
    border:1px solid #1f3a26;
    background:#07110a;
    color:#33ff66;
    font-family:'Share Tech Mono',ui-monospace,monospace;
    font-size:11px;
    line-height:1.2;
    letter-spacing:0;
  }
  .q-bookmark-path{
    display:block;
    margin-top:4px;
    color:#7e8e7a;
    font-family:'Share Tech Mono',ui-monospace,monospace;
    font-size:11px;
    letter-spacing:.04em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .q-bookmark-path::before{ content:'./'; color:#a36c2e }

  /* ----- LIST VIEW (ls -la style) ----- */
  .q-bookmark-tree[data-view="list"] .q-bookmark-grid{
    grid-template-columns:1fr;
    gap:2px;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-node{
    min-height:0;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:6px 10px;
    text-align:left;
    border-width:1px;
    box-shadow:none;
    background:#100c0a;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-node:hover{
    transform:none;
    background:#1a0606;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-icon{
    width:22px; height:22px; font-size:12px; border-width:1px;
    flex:0 0 auto;
    box-shadow:none;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-label{
    flex:0 0 auto;
    min-width:160px;
    max-width:280px;
    font-size:16px;
    -webkit-line-clamp:1;
    line-clamp:1;
    text-align:left;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-desc{
    flex:1 1 auto;
    -webkit-line-clamp:1;
    line-clamp:1;
    font-size:12px;
    text-align:left;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-meta{
    flex:0 0 auto;
    margin-left:auto;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-path{
    display:inline;
    margin-left:8px;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-tagstrip{
    flex:0 0 auto;
    display:inline-flex;
    gap:3px;
    max-width:240px;
    overflow:hidden;
  }
  .q-bookmark-tree[data-view="list"] .q-bookmark-tagstrip .q-bmk-itemtag{
    font-size:10px;
    padding:1px 4px;
    margin:0;
  }

  /* ============== MODAL / VIEWER (archive terminal) ============== */
  .q-modal{
    position:fixed;
    inset:0;
    z-index:290;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:
      radial-gradient(ellipse at 50% 28%, rgba(102,70,48,.26), transparent 42%),
      rgba(0,0,0,.86);
    backdrop-filter:blur(2px);
  }
  .q-modal.open{ display:flex; animation:qPrevIn .18s ease-out }
  .q-modal-panel{
    width:min(840px, 96vw);
    max-height:92vh;
    overflow:hidden;
    border:3px solid #1b160f;
    border-radius:8px;
    background:
      linear-gradient(180deg, #5a5745 0%, #27241c 8%, #12100d 100%);
    box-shadow:
      0 0 0 2px #6e0606,
      0 24px 70px #000,
      inset 0 2px 0 #77705a,
      inset 0 -3px 0 #050403;
    color:#cfd6c8;
  }
  .q-modal-panel[data-variant="archive"]{
    background:
      linear-gradient(180deg, #70644d 0 12px, #2e2a21 12px 46px, #17130f 46px 100%);
  }
  .q-modal-panel[data-variant="web"]{
    width:min(1180px, 98vw);
  }
  .q-modal-panel[data-variant="web"] .q-modal-grid{
    grid-template-columns:minmax(0, 1fr) minmax(240px, 300px);
  }
  .q-modal-panel[data-variant="web"] .q-modal-screen{
    min-height:min(768px, calc(92vh - 120px));
    background:#000;
  }
  .q-modal-top{
    min-height:38px;
    display:grid;
    grid-template-columns:72px minmax(0, 1fr) auto;
    align-items:center;
    gap:10px;
    padding:7px 10px;
    border-bottom:2px solid #050403;
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 6px),
      linear-gradient(180deg, #4a4434, #17130f);
  }
  .q-modal-lamps{ display:flex; gap:7px; align-items:center }
  .q-modal-lamps i{
    width:12px;
    height:12px;
    border-radius:50%;
    border:2px solid #050403;
    background:#6e0606;
    box-shadow:0 0 8px #c41e0e;
  }
  .q-modal-lamps i:nth-child(1){ background:#33ff66; box-shadow:0 0 9px #33ff66 }
  .q-modal-lamps i:nth-child(2){ background:#ffb000; box-shadow:0 0 8px #ffb000 }
  .q-modal-location{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#0d0303;
    text-shadow:0 1px 0 #8f8468;
    font-family:var(--f-pixel);
    font-size:9px;
    letter-spacing:.13em;
  }
  .q-modal-close{
    background:#0d0303;
    border:1px solid #c41e0e;
    color:#ff8c3a;
    cursor:pointer;
    font-family:var(--f-pixel);
    font-size:9px;
    letter-spacing:.14em;
    padding:6px 9px;
  }
  .q-modal-close:hover{ background:#c41e0e; color:#fff }
  .q-modal-grid{
    display:grid;
    grid-template-columns:minmax(280px, 1.15fr) minmax(260px, .85fr);
    gap:14px;
    padding:16px;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,140,58,.08), transparent 42%),
      linear-gradient(180deg, #201a14, #0b0807);
  }
  .q-modal-screen{
    min-height:360px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:3px solid #050403;
    border-radius:4px;
    background:
      repeating-linear-gradient(0deg, rgba(51,255,102,.06) 0 1px, transparent 1px 4px),
      radial-gradient(ellipse at 50% 50%, #08120b, #010201 70%);
    box-shadow:
      inset 0 0 40px #000,
      inset 0 0 0 1px #456040;
  }
  .q-modal-screen img,
  .q-modal-screen video{
    width:100%;
    height:100%;
    max-height:64vh;
    object-fit:contain;
    image-rendering:pixelated;
    background:#000;
  }
  .q-playlist{
    width:100%;
    height:100%;
    min-height:360px;
    min-width:0;
    display:grid;
    grid-template-rows:minmax(0, 1fr) auto minmax(96px, auto);
    background:#000;
  }
  .q-playlist-stage{
    min-height:0;
    min-width:0;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .q-playlist-stage video,
  .q-playlist-stage .q-flash-player{
    width:100%;
    height:100%;
  }
  .q-playlist-bar{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:8px;
    padding:7px;
    border-top:1px solid #2a221e;
    border-bottom:1px solid #1f3a26;
    background:#080706;
  }
  .q-playlist-bar button,
  .q-playlist-list button{
    background:#07110a;
    border:1px solid #1f8a3c;
    color:#33ff66;
    cursor:pointer;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.1em;
    padding:7px 8px;
    text-align:left;
  }
  .q-playlist-bar button:hover,
  .q-playlist-list button:hover,
  .q-playlist-list button.active{
    background:#33ff66;
    color:#07110a;
  }
  .q-playlist-now{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#ff8c3a;
    font-family:var(--f-pixel);
    font-size:9px;
    letter-spacing:.14em;
    text-align:center;
  }
  .q-playlist-list{
    max-height:140px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:5px;
    overflow-y:auto;
    padding:7px;
    scrollbar-width:thin;
    scrollbar-color:#cfa07a #100c0a;
    background:
      repeating-linear-gradient(0deg, rgba(51,255,102,.04) 0 1px, transparent 1px 4px),
      #030403;
  }
  .q-playlist-list button{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .q-playlist-list button span{
    color:#ff8c3a;
    margin-right:6px;
  }
  .q-modal-placeholder{
    display:grid;
    place-items:center;
    gap:12px;
    color:#ff8c3a;
    text-align:center;
    text-shadow:0 0 10px #ff5a1a;
    font-family:var(--f-doom);
    font-size:clamp(44px, 9vw, 92px);
  }
  .q-modal-placeholder small{
    color:#7e8e7a;
    font-family:var(--f-pixel);
    font-size:9px;
    letter-spacing:.16em;
    text-shadow:none;
  }
  .q-web-preview{
    width:100%;
    height:100%;
    min-height:360px;
    display:grid;
    grid-template-rows:auto minmax(0, 1fr) auto;
    background:#050403;
  }
  .q-web-preview-bar{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:8px;
    padding:7px 8px;
    border-bottom:1px solid #1f3a26;
    background:
      repeating-linear-gradient(90deg, rgba(51,255,102,.05) 0 1px, transparent 1px 5px),
      #030403;
    color:#33ff66;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
  }
  .q-web-preview-bar span{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .q-web-preview-bar a{
    border:1px solid #1f8a3c;
    color:#33ff66;
    padding:5px 7px;
    text-decoration:none;
  }
  .q-web-preview-bar a:hover{
    background:#33ff66;
    color:#07110a;
  }
  .q-web-preview-stage{
    min-height:0;
    display:grid;
    place-items:center;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:#cfa07a #100c0a;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(51,255,102,.07), transparent 58%),
      #000;
  }
  .q-web-preview-frame{
    position:relative;
    overflow:hidden;
    transform-origin:0 0;
    background:#000;
    box-shadow:0 0 0 1px #1f8a3c, 0 0 30px rgba(51,255,102,.12);
  }
  .q-web-preview-frame iframe{
    position:absolute;
    inset:0;
    width:calc(var(--web-w) * 1px);
    height:calc(var(--web-h) * 1px);
    border:0;
    background:#000;
  }
  .q-web-open-only{
    min-height:260px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:12px;
    padding:24px;
    text-align:center;
    background:
      repeating-linear-gradient(0deg, rgba(51,255,102,.06) 0 1px, transparent 1px 4px),
      radial-gradient(ellipse at 50% 45%, rgba(255,140,58,.14), transparent 52%),
      #020302;
  }
  .q-web-open-only span{
    color:#ff8c3a;
    font-family:var(--f-doom);
    font-size:64px;
    text-shadow:0 0 14px #c41e0e;
  }
  .q-web-open-only p{
    max-width:320px;
    margin:0;
    color:#7e8e7a;
    font-family:var(--f-pixel);
    font-size:8px;
    line-height:1.8;
    letter-spacing:.12em;
  }
  .q-web-open-only a{
    border:1px solid #c41e0e;
    background:#120604;
    color:#ff8c3a;
    padding:10px 12px;
    text-decoration:none;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
    box-shadow:inset 0 0 0 1px rgba(255,140,58,.2);
  }
  .q-web-open-only a:hover{
    background:#c41e0e;
    color:#fff;
  }
  .q-web-preview-meta{
    padding:6px 8px;
    border-top:1px solid #1f3a26;
    color:#7e8e7a;
    font-family:var(--f-pixel);
    font-size:7px;
    letter-spacing:.12em;
    text-align:center;
    background:#030403;
  }
  .q-flash-player{
    width:100%;
    height:100%;
    min-height:360px;
    display:flex;
    flex-direction:column;
    background:#000;
  }
  .q-flash-stage{
    position:relative;
    min-height:0;
    min-width:0;
    flex:1;
    width:100%;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .q-flash-frame{
    position:absolute;
    left:0;
    top:0;
    width:calc(var(--flash-w) * 1px);
    height:calc(var(--flash-h) * 1px);
    overflow:hidden;
    transform-origin:0 0;
    background:#000;
    box-shadow:0 0 0 1px #1f8a3c, 0 0 24px rgba(255,140,58,.12);
  }
  .q-ruffle-player{
    width:100%;
    height:100%;
    display:block;
    background:#000;
  }
  .q-flash-controls{
    flex:0 0 auto;
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, auto) minmax(0, 1fr);
    align-items:center;
    gap:6px;
    padding:7px;
    border-top:1px solid #1f3a26;
    background:
      repeating-linear-gradient(90deg, rgba(51,255,102,.06) 0 1px, transparent 1px 5px),
      #030403;
  }
  .q-flash-controls button{
    background:#07110a;
    border:1px solid #1f8a3c;
    color:#33ff66;
    cursor:pointer;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
    padding:6px 7px;
    white-space:nowrap;
  }
  .q-flash-controls button:hover{
    background:#33ff66;
    color:#07110a;
  }
  .q-flash-controls span{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#7e8e7a;
    font-family:var(--f-pixel);
    font-size:7px;
    letter-spacing:.12em;
    text-align:right;
  }
  .q-flash-player[data-state="paused"] .q-flash-controls [data-flash-control="pause"],
  .q-flash-player[data-state="stopped"] .q-flash-controls [data-flash-control="stop"]{
    border-color:#ffb000;
    color:#ffb000;
  }
  .q-flash-loading,
  .q-flash-error{
    color:#33ff66;
    font-family:var(--f-pixel);
    font-size:10px;
    letter-spacing:.16em;
    line-height:1.6;
    text-align:center;
    text-shadow:0 0 8px #33ff66;
  }
  .q-flash-error{
    color:#c41e0e;
    text-shadow:0 0 8px #c41e0e;
  }
  .q-flash-error small{
    color:#7e8e7a;
    font-family:var(--f-mono);
    font-size:16px;
    letter-spacing:0;
  }
  .q-md2-viewer{
    width:100%;
    height:100%;
    min-height:360px;
    display:grid;
    grid-template-rows:minmax(0, 1fr) auto auto auto;
    background:
      linear-gradient(90deg, rgba(196,30,14,.12), transparent 18%, transparent 82%, rgba(51,255,102,.1)),
      #020302;
  }
  .q-md2-stage{
    position:relative;
    min-height:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
      repeating-linear-gradient(0deg, rgba(51,255,102,.05) 0 1px, transparent 1px 5px),
      radial-gradient(ellipse at 50% 45%, rgba(255,140,58,.12), transparent 58%),
      #010201;
  }
  .q-md2-stage::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:inset 0 0 46px #000;
  }
  .q-md2-stage canvas{
    width:100%;
    height:100%;
    display:block;
    image-rendering:pixelated;
  }
  .q-md2-loading,
  .q-md2-error{
    color:#33ff66;
    font-family:var(--f-pixel);
    font-size:10px;
    letter-spacing:.16em;
    line-height:1.6;
    text-align:center;
    text-shadow:0 0 8px #33ff66;
  }
  .q-md2-error{
    color:#c41e0e;
    text-shadow:0 0 8px #c41e0e;
  }
  .q-md2-error small{
    color:#7e8e7a;
    font-family:var(--f-mono);
    font-size:14px;
    letter-spacing:0;
  }
  .q-md2-controls,
  .q-md2-skins{
    display:grid;
    gap:6px;
    padding:7px;
    border-top:1px solid #1f3a26;
    background:
      repeating-linear-gradient(90deg, rgba(51,255,102,.05) 0 1px, transparent 1px 5px),
      #030403;
  }
  .q-md2-controls{
    grid-template-columns:repeat(4, auto) minmax(0, 1fr);
    align-items:center;
  }
  .q-md2-controls button,
  .q-md2-skins button{
    min-width:0;
    background:#07110a;
    border:1px solid #1f8a3c;
    color:#33ff66;
    cursor:pointer;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.1em;
    padding:6px 7px;
    white-space:nowrap;
  }
  .q-md2-controls button:hover,
  .q-md2-controls button.active,
  .q-md2-skins button:hover,
  .q-md2-skins button.active{
    background:#33ff66;
    color:#07110a;
  }
  .q-md2-controls button:disabled{
    opacity:.45;
    cursor:not-allowed;
  }
  .q-md2-debug{
    display:none;
    max-height:120px;
    margin:0;
    padding:8px;
    overflow:auto;
    border-top:1px solid rgba(255,140,58,.45);
    background:#020302;
    color:#33ff66;
    font-family:var(--f-mono);
    font-size:12px;
    line-height:1.25;
    text-align:left;
    white-space:pre-wrap;
  }
  .q-md2-debug.visible{
    display:block;
  }
  .q-md2-controls span{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#7e8e7a;
    font-family:var(--f-pixel);
    font-size:7px;
    letter-spacing:.12em;
    text-align:right;
  }
  .q-md2-skins{
    grid-template-columns:repeat(auto-fit, minmax(112px, 1fr));
  }
  .q-md2-skins button{
    display:flex;
    align-items:center;
    gap:7px;
    text-align:left;
  }
  .q-md2-skins img{
    width:26px;
    height:26px;
    flex:0 0 auto;
    object-fit:contain;
    image-rendering:pixelated;
    background:#000;
    border:1px solid rgba(255,140,58,.55);
  }
  .q-modal-fields{
    display:grid;
    grid-template-rows:auto minmax(72px, auto) auto minmax(144px, 1fr) auto;
    gap:8px;
  }
  .q-modal-fields label{
    color:#0d0303;
    text-shadow:0 1px 0 #867b62;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
  }
  .q-modal-field{
    min-height:64px;
    padding:10px;
    border:2px solid #050403;
    border-radius:4px;
    background:#030403;
    color:#cfd6c8;
    font-family:var(--f-mono);
    font-size:20px;
    line-height:1.15;
    box-shadow:inset 0 0 18px #000;
  }
  #qModalTitle{
    color:#ff8c3a;
    font-family:var(--f-doom);
    font-size:28px;
    line-height:1;
    text-shadow:0 0 8px #c41e0e;
  }
  .q-modal-stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
  }
  .q-modal-stats div{
    min-width:0;
    border:2px solid #050403;
    background:#080706;
    padding:8px;
    box-shadow:inset 0 0 14px #000;
  }
  .q-modal-stats b{
    display:block;
    color:#675a43;
    font-family:var(--f-pixel);
    font-size:8px;
    letter-spacing:.12em;
    margin-bottom:5px;
  }
  .q-modal-stats span{
    display:block;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#33ff66;
    font-family:var(--f-mono);
    font-size:18px;
  }

  /* ============== ADMIN AUTH MODAL ============== */
  .q-auth-overlay{
    position:fixed; inset:0; z-index:310; display:none;
    background: rgba(0,0,0,.92); backdrop-filter: blur(3px);
    align-items:center; justify-content:center; padding: 24px;
  }
  .q-auth-overlay.show{ display:flex; animation: qPrevIn .25s ease-out }
  .q-auth-panel{
    width: min(420px, 96vw);
    background: linear-gradient(180deg, #1a1410 0%, #0d0303 100%);
    border: 3px solid #c41e0e;
    box-shadow: 0 0 60px #c41e0e80, inset 0 0 30px #000a;
    display:flex; flex-direction:column;
  }
  .q-auth-head{
    background: linear-gradient(180deg, #2a0606, #100c0a);
    border-bottom: 2px solid #c41e0e;
    padding: 12px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .q-auth-head h2{
    font-family: var(--f-doom); font-size: 20px; color:#ffd089; letter-spacing:.06em;
    text-shadow: 0 0 8px #ff5a1a;
  }
  .q-auth-badge{
    font-family: var(--f-pixel); font-size: 8px; color:#33ff66;
    background:#0d0d0d; border:1px solid #33ff66; padding:3px 6px;
    letter-spacing:.2em;
  }
  .q-auth-badge.warn{ color:#f5b042; border-color:#f5b042 }
  .q-auth-body{ padding: 16px; display:flex; flex-direction:column; gap:10px }
  .q-auth-msg{
    font-family: var(--f-mono); font-size: 18px; color:#cfd6c8;
    line-height:1.3;
  }
  .q-auth-body input{
    background:#0d0303; border:2px solid #2a221e;
    color:#ffd089; font-family: var(--f-mono); font-size: 20px;
    padding: 10px 12px; outline:none; width:100%;
    letter-spacing:.04em;
  }
  .q-auth-body input:focus{ border-color:#c41e0e; background:#1a0606 }
  .q-auth-err{
    font-family: var(--f-pixel); font-size: 10px; color:#c41e0e;
    letter-spacing:.15em; min-height: 14px;
    text-shadow: 0 0 6px #c41e0e80;
  }
  .q-auth-actions{
    display:flex; justify-content:space-between; gap:10px;
    padding: 12px 16px; border-top:1px solid #2a221e;
    background:#0d0303;
  }
  .q-auth-ok{
    background: linear-gradient(180deg, #c41e0e, #6e0606);
    color:#ffd089; border:2px solid #000;
    font-family: var(--f-doom); font-size: 16px; letter-spacing:.06em;
    padding: 8px 18px; cursor:pointer;
    box-shadow: inset 0 -3px 0 #000a, 0 2px 0 #000;
    text-shadow: 0 2px 0 #000;
  }
  .q-auth-ok:hover{ background: linear-gradient(180deg, #ff5a1a, #c41e0e) }
  .q-auth-ok:active{ transform: translateY(2px); box-shadow: inset 0 -3px 0 #000a }
  .q-auth-ok:disabled{ opacity:.4; cursor:not-allowed }
  .q-auth-cancel{
    background:transparent; border:1px solid #5a4d44; color:#a36c2e;
    font-family: var(--f-pixel); font-size: 9px; letter-spacing:.15em;
    padding: 8px 12px; cursor:pointer;
  }
  .q-auth-cancel:hover{ color:#c41e0e; border-color:#c41e0e }
  .q-auth-panel.shake{ animation: qAuthShake .35s }
  @keyframes qAuthShake{
    10%,90%{ transform: translate3d(-2px,0,0) }
    20%,80%{ transform: translate3d(4px,0,0) }
    30%,50%,70%{ transform: translate3d(-6px,0,0) }
    40%,60%{ transform: translate3d(6px,0,0) }
  }

  /* ============== ADMIN PANEL (hidden until IDDQD) ============== */
  .q-admin-overlay{
    position:fixed; inset:0; z-index:300; display:none;
    background: rgba(0,0,0,.86); backdrop-filter: blur(2px);
    align-items:center; justify-content:center; padding: 24px;
  }
  .q-admin-overlay.show{ display:flex; animation: qPrevIn .25s ease-out }
  .q-admin-panel{
    width: min(960px, 96vw); max-height: 92vh; overflow:hidden;
    display:flex; flex-direction:column;
    background: linear-gradient(180deg, #1a1410 0%, #0d0303 100%);
    border: 3px solid #c41e0e;
    box-shadow: 0 0 60px #c41e0e80, inset 0 0 30px #000a;
  }
  .q-admin-head{
    background: linear-gradient(180deg, #2a0606, #100c0a);
    border-bottom: 2px solid #c41e0e;
    padding: 10px 16px;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
  }
  .q-admin-head h2{
    font-family: var(--f-doom); font-size:22px; color:#ffd089; letter-spacing:.06em;
    text-shadow: 0 0 8px #ff5a1a;
  }
  .q-admin-head .left-grp{ display:flex; align-items:center; gap:10px }
  .q-admin-head .iddqd-badge{
    font-family: var(--f-pixel); font-size:8px; color:#33ff66;
    background:#0d0d0d; border:1px solid #33ff66; padding:3px 6px;
    letter-spacing:.2em;
  }
  .q-admin-head .close{
    background:transparent; border:1px solid #c41e0e; color:#ff8c3a;
    font-family: var(--f-pixel); font-size:9px; padding:6px 10px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-head .close:hover{ background:#c41e0e; color:#fff }
  .q-admin-tabs{
    display:flex; border-bottom: 1px solid #2a221e; background:#0d0303;
  }
  .q-admin-tabs button{
    flex:1; padding: 10px 12px; cursor:pointer;
    background: transparent; border:0; border-right:1px solid #2a221e;
    color:#a36c2e; font-family: var(--f-pixel); font-size:10px;
    letter-spacing:.15em;
  }
  .q-admin-tabs button:last-child{ border-right:0 }
  .q-admin-tabs button.active{ background:#2a0606; color:#ff8c3a; box-shadow: inset 0 -3px 0 #c41e0e }
  .q-admin-tabs button:hover{ color:#ffd089 }
  .q-admin-body{ flex:1; overflow-y:auto; padding: 14px 16px }
  .q-admin-pane{ display:none }
  .q-admin-pane.active{ display:block }
  .q-admin-row{
    display:grid; grid-template-columns: 36px 1.4fr 1.6fr 1fr 80px 60px;
    gap:8px; align-items:center;
    padding: 6px; margin-bottom: 4px;
    background:#100c0a; border:1px solid #2a221e;
  }
  .q-admin-row:hover{ border-color:#6e0606 }
  .q-admin-row .key{
    font-family:var(--f-doom); font-size:18px;
    background:#0d0303; color:#ff8c3a; border:2px solid #6e0606;
    width:32px; height:32px; display:grid; place-items:center;
  }
  .q-admin-row input, .q-admin-row select, .q-admin-cmd-row input, .q-admin-cmd-row select{
    background:#0d0303; border:1px solid #2a221e;
    color:#ffd089; font-family:var(--f-mono); font-size:16px;
    padding: 6px 8px; outline:none; width:100%;
  }
  .q-admin-row input:focus, .q-admin-row select:focus,
  .q-admin-cmd-row input:focus, .q-admin-cmd-row select:focus{
    border-color:#c41e0e; background:#1a0606;
  }
  .q-admin-row .toggle{
    background:transparent; border:1px solid #5a4d44; color:#a36c2e;
    font-family:var(--f-pixel); font-size:8px; padding:4px 6px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-row .toggle.on{ border-color:#33ff66; color:#33ff66 }
  .q-admin-row .toggle.soon{ border-color:#f5b042; color:#f5b042 }
  .q-admin-row .del, .q-admin-cmd-row .del{
    background:#2a0606; border:1px solid #c41e0e; color:#ff8c3a;
    font-family:var(--f-pixel); font-size:8px; padding:4px 6px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-row .del:hover, .q-admin-cmd-row .del:hover{ background:#c41e0e; color:#fff }
  .q-admin-cmd-row{
    display:grid; grid-template-columns: 1fr 1.4fr 1.4fr 80px 60px;
    gap:8px; align-items:center;
    padding:6px; margin-bottom:4px;
    background:#100c0a; border:1px solid #2a221e;
  }
  .q-admin-cmd-row:hover{ border-color:#6e0606 }
  .q-admin-cmd-row code{
    font-family:var(--f-mono); color:#33ff66; padding:6px 8px;
    background:#0d0303; border:1px solid #1f3a26;
  }
  .q-admin-actions{
    display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    padding: 10px 16px;
    background:#0d0303; border-top:1px solid #2a221e;
  }
  .q-admin-actions .btn-add{
    background: linear-gradient(180deg, #1a3a1a, #0d2a0d);
    color:#33ff66; border:2px solid #33ff66;
    font-family: var(--f-pixel); font-size:9px; padding:8px 14px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-actions .btn-add:hover{ background:#33ff66; color:#0d0d0d }
  .q-admin-actions .btn-reset{
    background:transparent; color:#a36c2e; border:1px solid #5a4d44;
    font-family: var(--f-pixel); font-size:9px; padding:8px 14px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-actions .btn-reset:hover{ color:#c41e0e; border-color:#c41e0e }
  .q-admin-info{
    font-family: var(--f-mono); font-size:14px; color:#7e8e7a;
    padding:8px 6px 14px; line-height:1.4;
  }
  .q-admin-info code{
    color:#ff8c3a; background:#0d0303; padding:1px 5px; border:1px solid #2a221e;
    font-family: var(--f-mono);
  }
  .q-admin-pane h4{
    font-family: var(--f-pixel); font-size:10px; color:#a36c2e;
    letter-spacing:.2em; margin: 6px 0 8px;
  }

  /* ============== RESPONSIVE OVERRIDES (late cascade) ============== */
  @media (max-width: 900px){
    .q-torch-hint{
      width:max-content;
      max-width:92vw;
      font-size:7px;
      bottom:-42px;
      overflow:visible;
      letter-spacing:.14em;
    }
    .q-console{
      left:0;
      right:0;
      width:100vw;
      height:38vh;
      min-height:280px;
    }
    .q-cons-bar{
      grid-template-columns:auto minmax(0,1fr) auto;
      gap:8px;
      padding:5px 8px;
    }
    .q-cons-bar .dots{ gap:4px }
    .q-cons-bar .dot{ width:8px; height:8px }
    .q-cons-bar .path{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .q-cons-bar .close{
      font-size:0;
      padding:5px 7px;
    }
    .q-cons-bar .close::before{
      content:'▲';
      font-size:9px;
    }
    .q-cons-out{
      font-size:10px;
      padding:8px 9px;
      overflow-x:hidden;
    }
    .q-cons-banner{
      font-size:clamp(3px, 1.15vw, 5px);
      max-width:100%;
      overflow:hidden;
      white-space:pre;
      line-height:1.08;
      margin-bottom:6px;
    }
    .q-cons-prompt{
      padding:7px 9px;
      gap:5px;
    }
    .q-cons-prompt input,
    .q-cons-prompt .ps1,
    .q-cons-prompt .cmd-wrap{
      font-size:11px;
    }
    .q-cons-prompt .caret{ width:7px }
    .q-preview{
      padding-top:18px;
      overflow-y:auto;
    }
    .q-preview.show{ justify-content:flex-start }
    .q-boot{
      gap:16px;
      padding:22px 18px;
      justify-content:center;
      overflow:hidden;
    }
    .q-boot .banner{
      max-width:94vw;
      overflow:hidden;
      font-size:clamp(6px, 1.8vw, 9px);
      padding:4px;
    }
    .q-boot .map{
      max-width:94vw;
      font-size:clamp(22px, 6.8vw, 34px);
      line-height:1.05;
      text-align:center;
      overflow-wrap:anywhere;
    }
    .q-boot .sub{
      max-width:92vw;
      font-size:8px;
      line-height:1.45;
      text-align:center;
      overflow-wrap:anywhere;
    }
    .q-boot .bar{
      width:min(74vw, 360px);
      height:16px;
    }
    .q-boot .pct{ font-size:21px }
    .q-boot .lines{
      width:min(74vw, 360px);
      max-height:26vh;
      font-size:11px;
      line-height:1.04;
    }
    .q-feed-toggle{
      right:0;
      bottom:calc(var(--status-h) + var(--mobile-slots-h) + 10px);
      width:32px;
      height:38px;
      padding:0;
      display:grid;
      place-items:center;
      font-size:0;
      line-height:1;
      text-align:center;
      border-right:0;
      position:fixed;
    }
    .q-feed-toggle::before{
      content:'▶';
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
      display:block;
      font-family:var(--f-pixel);
      font-size:10px;
      line-height:1;
      color:#ff8c3a;
    }
    .q-modal{
      align-items:flex-start;
      padding:12px;
      overflow-y:auto;
    }
    .q-modal-panel{
      width:100%;
      max-height:none;
    }
    .q-modal-top{
      grid-template-columns:52px minmax(0, 1fr) auto;
      gap:7px;
      padding:6px 7px;
    }
    .q-modal-lamps{ gap:4px }
    .q-modal-lamps i{ width:9px; height:9px; border-width:1px }
    .q-modal-location{ font-size:7px }
    .q-modal-close{
      font-size:0;
      width:30px;
      height:28px;
      padding:0;
      display:grid;
      place-items:center;
    }
    .q-modal-close::before{
      content:'✕';
      font-size:10px;
      font-family:var(--f-pixel);
    }
    .q-modal-grid{
      grid-template-columns:1fr;
      gap:10px;
      padding:10px;
    }
    .q-modal-screen{
      min-height:220px;
      max-height:42vh;
    }
    .q-playlist{
      min-height:220px;
      grid-template-rows:minmax(0, 1fr) auto minmax(82px, auto);
    }
    .q-playlist-bar{
      grid-template-columns:1fr 1fr;
      gap:5px;
    }
    .q-playlist-now{
      grid-column:1 / -1;
      grid-row:1;
      font-size:7px;
      padding-bottom:2px;
    }
    .q-playlist-bar button{
      grid-row:2;
      text-align:center;
      font-size:7px;
      padding:6px 4px;
    }
    .q-playlist-list{
      grid-template-columns:1fr;
      max-height:110px;
    }
    .q-playlist-list button{
      min-width:0;
      white-space:normal;
      line-height:1.35;
      word-break:break-word;
    }
    .q-flash-player,
    .q-ruffle-player{
      min-height:220px;
    }
    .q-flash-controls{
      grid-template-columns:repeat(4, 1fr);
      gap:4px;
    }
    .q-flash-controls button{
      font-size:7px;
      padding:6px 4px;
      letter-spacing:.05em;
    }
    .q-flash-controls span{
      grid-column:1 / -1;
      text-align:center;
      font-size:6px;
    }
    .q-md2-viewer{
      min-height:220px;
    }
    .q-md2-controls{
      grid-template-columns:repeat(4, 1fr);
      gap:4px;
    }
    .q-md2-controls button{
      font-size:7px;
      padding:6px 4px;
      letter-spacing:.05em;
    }
    .q-md2-controls span{
      grid-column:1 / -1;
      text-align:center;
      font-size:6px;
    }
    .q-md2-skins{
      grid-template-columns:repeat(3, 1fr);
      gap:4px;
    }
    .q-md2-skins button{
      justify-content:center;
      font-size:0;
      padding:5px;
    }
    .q-md2-skins img{
      width:28px;
      height:28px;
    }
    .q-modal-fields{
      grid-template-rows:auto auto auto auto auto;
    }
    #qModalTitle{ font-size:23px }
    .q-modal-field{ min-height:58px; font-size:17px }
    .q-modal-stats span{ font-size:15px }
  }

  @media (max-width: 520px){
    .q-cons-out{
      font-size:9px;
      padding:7px 8px;
    }
    .q-cons-banner{ font-size:clamp(3px, 1vw, 4px) }
    .q-cons-prompt input,
    .q-cons-prompt .ps1,
    .q-cons-prompt .cmd-wrap{
      font-size:10px;
    }
    .q-boot{
      gap:13px;
      padding:18px 14px;
    }
    .q-boot .banner{
      font-size:clamp(5px, 1.55vw, 7px);
      max-width:90vw;
    }
    .q-boot .map{
      font-size:clamp(20px, 6.2vw, 30px);
      max-width:88vw;
    }
    .q-boot .sub{
      font-size:7px;
      max-width:86vw;
    }
    .q-boot .bar{
      width:min(68vw, 300px);
      height:14px;
    }
    .q-boot .pct{ font-size:19px }
    .q-boot .lines{
      width:min(68vw, 300px);
      max-height:25vh;
      font-size:10px;
      line-height:1.03;
    }
    .q-section-title{ font-size:clamp(22px, 7vw, 30px) }
    .q-section-desc{ font-size:15px; line-height:1.15 }
    .q-section-grid{ gap:8px }
    .q-section-item{
      min-height:118px;
      padding:10px 9px 10px 11px;
      gap:5px;
    }
    .q-section-item-meta,
    .q-section-cat{
      font-size:7px;
      letter-spacing:.08em;
    }
    .q-section-item-label{
      font-size:18px;
    }
    .q-section-item-desc{
      font-size:14px;
      line-height:1.1;
    }
    .q-bookmark-crumbs button{
      max-width:160px;
      font-size:7px;
      padding:5px 6px;
    }
    .q-bookmark-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:7px;
    }
    .q-bookmark-crumbs{
      display:none;
    }
    .q-bookmark-folders{
      max-height:96px;
      padding:5px;
    }
    .q-bookmark-folders button{
      height:27px;
      grid-template-columns:21px minmax(0, 1fr) auto;
      gap:5px;
      margin-left:calc(var(--depth, 0) * 12px);
      font-size:7px;
      padding:3px 5px;
    }
    .q-bookmark-folders button span{
      width:17px;
      height:17px;
    }
    .q-bookmark-node,
    .q-bookmark-up{
      min-height:110px;
      padding:9px 7px;
      gap:5px;
    }
    .q-bookmark-label,
    .q-bookmark-up b{
      font-size:16px;
    }
    .q-bookmark-desc{
      font-size:12px;
      -webkit-line-clamp:2;
    }
  }