/* Floating Quick Links — uses your existing CSS variables with safe fallbacks */
:root{
  --bg: var(--bg, #0b1020);
  --panel: var(--panel, #0f152b);
  --panel-2: var(--panel-2, #131a35);
  --text: var(--text, #e9eef6);
  --muted: var(--muted, #a9b0c2);
  --line: var(--line, rgba(255,255,255,0.08));
  --glow: var(--glow, #23c9b9);
  --radius: var(--radius, 16px);
  --shadow: var(--shadow, 0 8px 30px rgba(0,0,0,.35));
}

/* Container */
.quicklinks{
  position:fixed; left:12px; top:50%; transform:translateY(-50%);
  z-index:9999; display:flex; align-items:center; gap:10px; pointer-events:auto;
}

/* Vertical handle */
.ql-handle{
  writing-mode:vertical-rl; transform:rotate(180deg);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line); border-right:none;
  border-radius:12px 0 0 12px; padding:10px 8px; cursor:pointer;
  color:var(--text); font-weight:600; letter-spacing:.4px;
  box-shadow:0 8px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(35,201,185,.15) inset;
  backdrop-filter: blur(10px) saturate(1.2);
  transition:filter .2s ease, transform .2s ease;
}
.ql-handle:hover{filter:brightness(1.1)}
.ql-handle:focus{outline:2px solid rgba(35,201,185,.5); outline-offset:2px}
.ql-handle .ql-icon{font-size:1rem; margin-top:6px; opacity:.9}

/* Slide-out panel */
.ql-panel{
  position:absolute; left:100%; margin-left:10px; width:240px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:14px; padding:12px;
  box-shadow:var(--shadow); backdrop-filter: blur(12px) saturate(1.2);
  transform:translateX(-12px); opacity:0; pointer-events:none;
  transition:transform .28s ease, opacity .28s ease;
}
.quicklinks.open .ql-panel{transform:translateX(0); opacity:1; pointer-events:auto}

.ql-head{
  font-size:.8rem; color:var(--muted); margin:2px 6px 8px;
  text-transform:uppercase; letter-spacing:.12em;
}
.ql-panel a{
  display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text);
  padding:10px 12px; margin:6px 0; border-radius:10px; background:var(--panel-2);
  border:1px solid transparent; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ql-panel a:hover{
  border-color:var(--glow);
  box-shadow:0 0 0 3px rgba(35,201,185,.18) inset;
  transform:translateY(-1px);
}
.ql-panel a.active{
  border-color:var(--glow);
  box-shadow:0 0 0 2px rgba(35,201,185,.28) inset;
}

/* Mobile: bottom sheet style */
@media (max-width:700px){
  .quicklinks{left:10px; bottom:14px; top:auto; transform:none;}
  .ql-handle{writing-mode:horizontal-tb; transform:none; border-radius:12px; border-right:1px solid var(--line)}
  .ql-panel{
    position:fixed; left:10px; right:10px; bottom:64px; top:auto; width:auto; margin:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .ql-panel, .ql-handle{transition:none}
}