<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap" rel="stylesheet">
<style>

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#1a1525;--bg2:#1f1a2e;--bg3:#251f38;--bg4:#2a2340;
  --border:rgba(145,65,172,.15);--border2:rgba(145,65,172,.35);
  --text:#e8d8f0;--text2:#b08ac8;--text3:#6b4d80;
  --accent:#9141ac;--accent2:#7a35a0;
  --accentg:linear-gradient(135deg,#9141ac,#c471ed,#ff6b9d);
  --green:#00ff88;--red:#ff2d6f;--orange:#ff8c20;--orange2:#ffaa40;
  --purple:#c471ed;--teal:#00e5b0;--pink:#ff2d8f;--code:#d4a8e8;
  --sidebar-w:240px;
  --radius:8px;--radius-sm:5px;
  --shadow:0 8px 48px rgba(0,0,0,.9);
  --glow-c:0 0 0 transparent;
  --glow-p:0 0 0 transparent;
  --glow-pk:0 0 0 transparent;
  --glow-g:0 0 0 transparent;
  --glow-r:0 0 0 transparent;
}

/* ── LIGHT MODE ── */
body.light-mode{
  /* Modo claro violeta — espejo de los tokens .vm-light del design
     system Vulpine Marrow (mantiene la identidad violeta, no azul). */
  --bg:#f7f4fb;--bg2:#f1ecf7;--bg3:#e9e2f2;--bg4:#ded3ec;
  --border:rgba(145,65,172,.20);--border2:rgba(145,65,172,.38);
  --text:#2a1d3d;--text2:#5e4878;--text3:#9079a8;
  --accent:#9141ac;--accent2:#7a35a0;
  --accentg:linear-gradient(135deg,#9141ac,#c471ed,#ff6b9d);
  --green:#00803f;--red:#d4204f;--orange:#c25c00;--orange2:#c25c00;
  --purple:#9a2fc8;--teal:#008a72;--pink:#d4206f;--code:#7a2fa0;
  --shadow:0 8px 48px rgba(0,0,0,.15);
  --glow-c:0 0 0 transparent;
  --glow-p:0 0 0 transparent;
  --glow-pk:0 0 0 transparent;
  --glow-g:0 0 0 transparent;
  --glow-r:0 0 0 transparent;
  color-scheme:light;
}
body.light-mode{background:var(--bg);color:var(--text)}
body.light-mode::before{opacity:.2}
body.light-mode::after{
  background-image:
    linear-gradient(rgba(145,65,172,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(145,65,172,.04) 1px,transparent 1px);
}
body.light-mode .hdr{background:rgba(247,244,251,.95);border-bottom-color:rgba(145,65,172,.2);box-shadow:0 2px 20px rgba(0,0,0,.08)}
body.light-mode .hdr::before{background:linear-gradient(90deg,transparent,rgba(145,65,172,.4),rgba(154,47,200,.4),transparent)}
body.light-mode .sidebar{background:rgba(241,236,247,.98);border-right-color:rgba(145,65,172,.15);box-shadow:2px 0 12px rgba(0,0,0,.08)}
body.light-mode .vars-bar{background:rgba(241,236,247,.98);border-bottom-color:rgba(154,47,200,.2)}
body.light-mode .vars-collapsed-bar{background:rgba(241,236,247,.98)}
body.light-mode .row{background:rgba(255,255,255,.9);border-color:rgba(145,65,172,.12)}
body.light-mode .row:hover{background:rgba(247,244,251,.95);border-color:rgba(145,65,172,.25)}
body.light-mode .rc{background:rgba(247,244,251,.8);border-color:rgba(145,65,172,.2);border-left-color:rgba(145,65,172,.5);color:#7a2fa0}
body.light-mode .main{background:transparent}
body.light-mode #favPanel,body.light-mode #intelPanel,body.light-mode #notesPanel,body.light-mode #histPanel,body.light-mode #shortcutPanel{background:rgba(247,244,251,.98)}
body.light-mode .modal-box{background:rgba(247,244,251,.99)}
body.light-mode .cyber-status{background:rgba(241,236,247,.97);border-top-color:rgba(145,65,172,.15)}
body.light-mode #searchInput{background:rgba(145,65,172,.05);border-color:rgba(145,65,172,.2);color:var(--text)}
body.light-mode #searchInput:focus{background:rgba(145,65,172,.08);border-color:var(--accent)}
body.light-mode .vi{background:rgba(154,47,200,.05);border-color:rgba(154,47,200,.2);color:var(--purple)}
body.light-mode .mf input,body.light-mode .mf textarea,body.light-mode .mf select{background:rgba(145,65,172,.04);color:var(--text)}
body.light-mode .note-card{background:rgba(255,248,220,.6);border-color:rgba(180,140,0,.2);border-left-color:rgba(180,140,0,.5)}
body.light-mode .note-card-title{color:#7a5a00}
body.light-mode .note-card-body{color:#5a4000}
body.light-mode .hdr-btn{color:var(--text2);background:rgba(145,65,172,.04);border-color:rgba(145,65,172,.2)}
body.light-mode .hdr-btn:hover{color:var(--accent);background:rgba(145,65,172,.1);border-color:var(--accent)}
body.light-mode .sg{color:var(--purple)}
body.light-mode .si{color:var(--text2)}
body.light-mode .si:hover{background:rgba(145,65,172,.06);color:var(--accent)}
body.light-mode .si.on{background:rgba(145,65,172,.1);color:var(--accent)}
body.light-mode .grp-title{color:var(--text3)}
body.light-mode .grp-title:hover{color:var(--accent);background:rgba(145,65,172,.05)}
body.light-mode .rd{color:#5e4878}
body.light-mode .hdr-title{background:linear-gradient(135deg,#6528a0,#9141ac,#c471ed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle{
  padding:4px 10px;
  background:rgba(145,65,172,.04);
  border:1px solid rgba(145,65,172,.2);
  border-radius:20px;
  color:var(--text2);font-size:12px;cursor:pointer;
  transition:all .2s;white-space:nowrap;
  font-family:'Fira Code',monospace;font-weight:700;
  display:flex;align-items:center;gap:5px;
  letter-spacing:.3px;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:rgba(145,65,172,.1)}
body.light-mode .theme-toggle{background:rgba(145,65,172,.06);border-color:rgba(145,65,172,.3);color:var(--text2)}
body.light-mode .theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ── SCANLINE OVERLAY (disabled — terminal-clean aesthetic) ── */
body::before{ content:none; }
/* ── GRID BACKGROUND ── */
body::after{
  content:'';pointer-events:none;
  position:fixed;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(145,65,172,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145,65,172,.04) 1px, transparent 1px);
  background-size:40px 40px;
}

body{
  font-family:'Fira Code',monospace;
  font-size:14px;font-weight:600;background:var(--bg);
  color:var(--text);height:100vh;overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
}

/* ── GLITCH ANIMATION ── */
@keyframes glitch{
  0%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  20%{clip-path:inset(20% 0 60% 0);transform:translate(-2px,1px)}
  40%{clip-path:inset(50% 0 30% 0);transform:translate(2px,-1px)}
  60%{clip-path:inset(70% 0 10% 0);transform:translate(-1px,2px)}
  80%{clip-path:inset(10% 0 80% 0);transform:translate(1px,-2px)}
}
@keyframes glitch2{
  0%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  25%{clip-path:inset(30% 0 50% 0);transform:translate(3px,-1px)}
  50%{clip-path:inset(60% 0 20% 0);transform:translate(-3px,1px)}
  75%{clip-path:inset(10% 0 75% 0);transform:translate(2px,2px)}
}
@keyframes neonPulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes borderGlow{
  0%,100%{box-shadow:0 0 5px var(--accent),0 0 10px rgba(145,65,172,.3),inset 0 0 5px rgba(145,65,172,.1)}
  50%{box-shadow:0 0 15px var(--accent),0 0 30px rgba(145,65,172,.5),inset 0 0 10px rgba(145,65,172,.2)}
}
@keyframes scanMove{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.8}98%{opacity:1}99%{opacity:.7}}
@keyframes dataStream{
  0%{background-position:0% 0%}100%{background-position:0% 100%}
}
.glitch-text{position:relative}
/* glitch chromatic-aberration pseudo-elements disabled — terminal-clean aesthetic */
.glitch-text::before,.glitch-text::after{ content:none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:rgba(145,65,172,.3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(145,65,172,.6)}

/* ── HEADER ── */
.hdr{
  background:rgba(26,21,37,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(145,65,172,.25);
  padding:7px 14px;height:auto;min-height:52px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  flex-wrap:wrap;row-gap:7px;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 30px rgba(0,0,0,.8),0 1px 0 rgba(145,65,172,.15);
}
.hdr::before{
  content:'';position:absolute;left:0;top:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(145,65,172,.45),rgba(196,113,237,.45),transparent);
}
.hdr-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative}
.hdr-sigil{
  font-family:'Fira Code',monospace;font-size:16px;font-weight:700;
  color:var(--accent);flex-shrink:0;line-height:1;letter-spacing:0;
}
.hdr-title{
  font-family:'Fira Code',monospace;
  font-size:14px;font-weight:700;letter-spacing:1px;
  color:var(--purple);
  white-space:nowrap;
  position:relative;
}
.hdr-badge{
  font-family:'Fira Code',monospace;
  font-size:10px;padding:2px 9px;border-radius:3px;
  background:rgba(145,65,172,.08);
  border:1px solid rgba(145,65,172,.4);
  color:var(--accent);font-weight:700;letter-spacing:1px;
  box-shadow:var(--glow-c);
  text-transform:uppercase;
}
.search-wrap{flex:1;max-width:360px;min-width:0;position:relative}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:12px;pointer-events:none}
.search-kbd{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:9px;color:var(--accent);
  background:rgba(145,65,172,.08);border:1px solid rgba(145,65,172,.25);
  border-radius:3px;padding:1px 5px;
  font-family:'Fira Code',monospace;pointer-events:none;
}
#searchInput{
  width:100%;padding:7px 64px 7px 30px;
  background:rgba(145,65,172,.04);
  border:1px solid rgba(145,65,172,.2);
  border-radius:var(--radius);color:var(--text);font-size:12px;
  font-family:'Fira Code',monospace;font-weight:700;font-size:13px;
  outline:none;transition:all .2s;
}
#searchInput:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(145,65,172,.15),var(--glow-c);
  background:rgba(145,65,172,.07);
}
#searchInput::placeholder{color:var(--text3);font-family:'Fira Code',monospace;font-size:13px}
/* hdr-right siempre baja a su propia fila (fila 2): así los botones y el timer
   nunca se solapan con la barra de búsqueda, que queda en la fila 1 con el logo */
.hdr-right{display:flex;align-items:center;gap:5px;flex-basis:100%;
  justify-content:flex-end;flex-wrap:wrap;row-gap:6px}
.hdr-btn{
  padding:4px 9px;
  background:rgba(145,65,172,.04);
  border:1px solid rgba(145,65,172,.2);
  border-radius:4px;
  color:var(--text2);font-size:11px;cursor:pointer;
  transition:all .15s;white-space:nowrap;
  font-family:'Fira Code',monospace;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
}
.hdr-btn:hover{
  border-color:var(--accent);color:var(--accent);
  background:rgba(145,65,172,.1);
  box-shadow:var(--glow-c);
  transform:translateY(-1px);
}
.hdr-btn:active{transform:translateY(0) scale(.97)}
.hdr-btn.active{
  background:rgba(145,65,172,.15);
  border-color:var(--accent);color:var(--accent);
  box-shadow:var(--glow-c);
}
.warn-badge{
  font-family:'Fira Code',monospace;
  font-size:7.5px;padding:3px 8px;
  background:rgba(255,140,32,.08);border:1px solid rgba(255,140,32,.4);
  border-radius:3px;color:var(--orange2);white-space:nowrap;
  letter-spacing:.5px;
  box-shadow:0 0 10px rgba(255,140,32,.25);
}
.hdr-profile{
  display:flex;align-items:center;gap:6px;text-decoration:none;
  padding:3px 10px 3px 3px;
  background:rgba(145,65,172,.05);
  border:1px solid rgba(145,65,172,.2);border-radius:20px;
  transition:all .2s;
}
.hdr-profile:hover{
  border-color:var(--accent);background:rgba(145,65,172,.1);
  box-shadow:var(--glow-c);
}
.hdr-profile img{
  width:22px;height:22px;border-radius:50%;object-fit:cover;
  border:1px solid var(--accent);
  box-shadow:0 0 6px rgba(145,65,172,.5);
}
.hdr-profile span{
  font-size:10px;font-weight:700;color:var(--accent);white-space:nowrap;
  font-family:'Fira Code',monospace;letter-spacing:.5px;
}
.session-timer{
  font-size:13px;color:var(--teal);
  font-family:'Fira Code',monospace;
  padding:3px 8px;background:rgba(0,229,176,.06);
  border:1px solid rgba(0,229,176,.25);border-radius:4px;white-space:nowrap;
  box-shadow:0 0 8px rgba(0,229,176,.2);
  letter-spacing:1px;
}

/* ── VARS BAR ── */
.vars-bar{
  background:rgba(31,26,46,.95);
  border-bottom:1px solid rgba(196,113,237,.2);
  padding:0 16px;display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;flex-shrink:0;overflow:hidden;
  transition:max-height .25s ease,padding .25s ease;
  max-height:60px;
}
.vars-bar.collapsed{max-height:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent}
.vars-bar-inner{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:7px 0;width:100%}
.vars-lbl{
  font-family:'Fira Code',monospace;
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--purple);
}
.vg{display:flex;align-items:center;gap:4px}
.vl{
  font-family:'Fira Code',monospace;
  font-size:11px;color:var(--text3);white-space:nowrap;font-weight:800;
  text-transform:uppercase;letter-spacing:.5px;
}
.vi{
  font-family:'Fira Code',monospace;font-size:13px;font-weight:700;
  padding:3px 8px;border:1px solid rgba(196,113,237,.25);border-radius:4px;
  background:rgba(196,113,237,.05);color:var(--purple);min-width:80px;
  outline:none;transition:all .15s;
}
.vi:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 2px rgba(196,113,237,.15),var(--glow-p);
}
.vi.modified{border-color:rgba(145,65,172,.5);color:var(--accent)}
.vars-toggle{
  margin-left:auto;padding:3px 8px;
  background:rgba(196,113,237,.05);
  border:1px solid rgba(196,113,237,.25);border-radius:4px;
  color:var(--purple);font-size:10px;cursor:pointer;
  transition:all .15s;flex-shrink:0;
  font-family:'Fira Code',monospace;font-weight:600;
}
.vars-toggle:hover{border-color:var(--purple);color:var(--purple);box-shadow:var(--glow-p);background:rgba(196,113,237,.1)}
.vars-collapsed-bar{
  display:none;background:rgba(31,26,46,.95);
  border-bottom:1px solid rgba(196,113,237,.15);
  padding:4px 16px;align-items:center;gap:8px;flex-shrink:0;
}
.vars-collapsed-bar.on{display:flex}

/* ── LAYOUT ── */
.body{display:flex;flex:1;overflow:hidden;position:relative;z-index:1}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:rgba(31,26,46,.97);
  border-right:1px solid rgba(145,65,172,.12);
  overflow-y:auto;flex-shrink:0;padding-bottom:30px;
  transition:width .2s ease,min-width .2s ease;display:flex;flex-direction:column;
  box-shadow:2px 0 20px rgba(0,0,0,.5);
}
.sidebar.collapsed{width:44px;min-width:44px}
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px;flex-shrink:0}
.sb-collapse-btn{
  padding:3px 6px;background:rgba(145,65,172,.04);
  border:1px solid rgba(145,65,172,.2);
  border-radius:4px;color:var(--text3);cursor:pointer;font-size:11px;
  transition:all .15s;flex-shrink:0;
  font-family:monospace;
}
.sb-collapse-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow-c)}
.sidebar.collapsed .sb-label{display:none}
.sb-label{
  font-family:'Fira Code',monospace;
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--text3);
}
.sg{
  font-family:'Fira Code',monospace;
  font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--purple);
  padding:10px 12px 3px;white-space:normal;line-height:1.35;
  word-break:break-word;overflow-wrap:anywhere;
  border-top:1px solid rgba(196,113,237,.1);
  margin-top:4px;
}
.sg:first-of-type{border-top:none;margin-top:0}
.sidebar.collapsed .sg{padding:8px 0;text-align:center;font-size:6.5px}
.si{
  padding:6px 12px;cursor:pointer;font-size:12.5px;
  color:var(--text2);border-left:2px solid transparent;
  transition:all .12s;display:flex;align-items:center;gap:6px;
  white-space:normal;overflow:visible;
  font-family:'Fira Code',monospace;font-weight:700;
}
.sidebar.collapsed .si{padding:8px 0;justify-content:center;border-left:none}
.sidebar.collapsed .si .si-label{display:none}
.sidebar.collapsed .si .cnt{display:none}
.si:hover{
  background:rgba(145,65,172,.06);color:var(--accent);
}
.si.on{
  border-left-color:var(--accent);color:var(--accent);
  background:rgba(145,65,172,.08);
  text-shadow:none;
}
.sidebar.collapsed .si.on{background:rgba(145,65,172,.12);border-radius:4px;border-left:none}
.si .cnt{
  margin-left:auto;font-size:9px;
  background:rgba(145,65,172,.1);color:var(--accent);
  padding:1px 6px;border-radius:3px;flex-shrink:0;
  font-family:'Fira Code',monospace;
  border:1px solid rgba(145,65,172,.2);
}
.si.on .cnt{background:rgba(145,65,172,.2);box-shadow:0 0 6px rgba(145,65,172,.3)}
.si-label{word-break:break-word;line-height:1.3;flex:1;min-width:0}
.si-icon{flex-shrink:0;font-size:13px}
.si-prog{height:2px;background:rgba(145,65,172,.08);margin:0 12px 4px;border-radius:2px;overflow:hidden}
.sidebar.collapsed .si-prog{display:none}
.si-prog-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:2px;transition:width .4s;width:0;box-shadow:0 0 6px rgba(145,65,172,.5)}

/* ── MAIN CONTENT ── */
.main{flex:1;overflow-y:auto;padding:16px 20px 34px;background:transparent}
.sec{display:none}
.sec.on{display:block}
.sec-hdr{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid rgba(145,65,172,.15);
  position:relative;
}
.sec-hdr::after{
  content:'';position:absolute;bottom:-1px;left:0;width:60px;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  box-shadow:0 0 10px var(--accent);
}
.sec-title{
  font-family:'Fira Code',monospace;
  font-size:17px;font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.5px;
}
.sec-cmds-badge{
  font-family:'Fira Code',monospace;
  font-size:8px;padding:3px 10px;border-radius:3px;
  background:rgba(145,65,172,.08);border:1px solid rgba(145,65,172,.2);
  color:var(--accent);
}
.sec-export{
  padding:4px 10px;font-size:9px;
  border:1px solid rgba(0,229,176,.3);
  border-radius:4px;cursor:pointer;
  background:rgba(0,229,176,.05);
  color:var(--teal);font-family:'Fira Code',monospace;font-weight:600;
  transition:all .15s;margin-left:auto;text-transform:uppercase;letter-spacing:.5px;
}
.sec-export:hover{border-color:var(--teal);box-shadow:var(--glow-g);background:rgba(0,229,176,.1)}

/* ── GROUPS ── */
.grp{margin-bottom:28px}
.grp-title{
  font-family:'Fira Code',monospace;
  font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--text3);
  padding:10px 14px;
  border:none;border-bottom:1px solid rgba(145,65,172,.15);border-radius:0;
  background:transparent;
  margin-bottom:12px;display:flex;align-items:center;gap:6px;
  cursor:pointer;user-select:none;transition:all .15s;
}
.grp-title:hover{
  color:var(--accent);border-color:rgba(145,65,172,.2);
  background:rgba(145,65,172,.06);
  box-shadow:0 0 10px rgba(145,65,172,.1);
}
.grp-title .collapse-icon{margin-left:auto;font-size:9px;transition:transform .2s;flex-shrink:0;opacity:.6}
.grp-title.collapsed .collapse-icon{transform:rotate(-90deg)}
.grp-body.collapsed{display:none}
.grp-progress{height:2px;background:rgba(145,65,172,.08);border-radius:2px;margin-bottom:8px;overflow:hidden}
.grp-progress-bar{height:100%;background:linear-gradient(90deg,var(--green),var(--teal));border-radius:2px;transition:width .4s;width:0;box-shadow:0 0 8px rgba(0,255,136,.4)}

/* ── COMMAND ROW ── */
.row{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:8px;padding:13px 16px;
  border:1px solid rgba(145,65,172,.12);border-radius:var(--radius);
  background:rgba(6,12,28,.85);
  transition:all .15s;
  position:relative;border-left:3px solid transparent;
}
.row::before{content:none}
.row:hover{
  border-color:rgba(145,65,172,.25);
  background:rgba(145,65,172,.04);
  transform:translateX(1px);
}
.row.fav-row{border-left-color:var(--orange);box-shadow:inset 3px 0 10px rgba(255,140,32,.15)}
.row.done-row{opacity:.35;border-left-color:var(--green) !important}
.row.done-row .rc{text-decoration:line-through;color:var(--text3)}
.row.tag-crit-row{border-left-color:var(--red);box-shadow:inset 3px 0 10px rgba(255,45,111,.15)}
.row.tag-high-row{border-left-color:var(--orange)}
.row.tag-med-row{border-left-color:var(--green)}
.row.tag-osep-row{border-left-color:var(--purple);box-shadow:inset 3px 0 10px rgba(196,113,237,.15)}

.ri{flex:1;min-width:0}
.rd{
  font-size:12.5px;color:#8ec8e8;
  margin-bottom:7px;display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;font-family:'Fira Code',monospace;font-weight:700;
  letter-spacing:.3px;
}
.tag{font-family:'Fira Code',monospace;font-size:9px;padding:2px 7px;border-radius:3px;font-weight:700;letter-spacing:.8px}
.tag-crit{background:rgba(255,45,111,.12);color:var(--red);border:1px solid rgba(255,45,111,.4);box-shadow:0 0 6px rgba(255,45,111,.2)}
.tag-high{background:rgba(255,140,32,.1);color:var(--orange2);border:1px solid rgba(255,140,32,.35)}
.tag-med{background:rgba(0,255,136,.1);color:var(--green);border:1px solid rgba(0,255,136,.3)}
.tag-osep{background:rgba(196,113,237,.12);color:var(--purple);border:1px solid rgba(196,113,237,.4);box-shadow:0 0 6px rgba(196,113,237,.2)}
.tag-new{background:rgba(145,65,172,.1);color:var(--accent);border:1px solid rgba(145,65,172,.3)}
.tag-custom{background:rgba(0,229,176,.1);color:var(--teal);border:1px solid rgba(0,229,176,.3);font-size:7px;padding:1px 6px;border-radius:3px;font-weight:700;font-family:'Fira Code',monospace}

.rc{
  font-family:'Fira Code',monospace;
  font-size:14.5px;line-height:1.75;
  white-space:pre-wrap;word-break:break-all;
  color:#c8f0ff;
  text-shadow:none;
  background:rgba(0,10,24,.7);
  border:1px solid rgba(145,65,172,.18);
  border-left:3px solid rgba(145,65,172,.45);
  border-radius:6px;
  padding:10px 14px;
  display:block;
  letter-spacing:0.3px;
}

/* ── ROW ACTIONS ── */
.row-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.cp,.fav-btn,.note-btn,.done-btn,.del-btn,.edit-btn{
  padding:3px 9px;font-size:11px;
  border:1px solid rgba(145,65,172,.15);border-radius:4px;
  cursor:pointer;background:rgba(145,65,172,.04);
  color:var(--text3);
  font-family:'Fira Code',monospace;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  transition:all .12s;white-space:nowrap;
}
.cp:hover{border-color:var(--accent);color:var(--accent);background:rgba(145,65,172,.1);box-shadow:var(--glow-c)}
.cp.ok{border-color:var(--green);color:var(--green);background:rgba(0,255,136,.1);box-shadow:var(--glow-g)}
.fav-btn:hover{border-color:var(--orange);color:var(--orange);box-shadow:0 0 8px rgba(255,140,32,.3)}
.fav-btn.on{color:var(--orange);border-color:var(--orange);background:rgba(255,140,32,.1);box-shadow:0 0 8px rgba(255,140,32,.25)}
.note-btn:hover{border-color:var(--purple);color:var(--purple);box-shadow:var(--glow-p)}
.note-btn.has-note{color:var(--purple);border-color:var(--purple);background:rgba(196,113,237,.1);box-shadow:var(--glow-p)}
.done-btn:hover{border-color:var(--green);color:var(--green);box-shadow:var(--glow-g)}
.done-btn.on{color:var(--green);border-color:var(--green);background:rgba(0,255,136,.1);box-shadow:var(--glow-g)}
.del-btn:hover{border-color:var(--red);color:var(--red);box-shadow:var(--glow-r)}
.edit-btn:hover{border-color:var(--teal);color:var(--teal);box-shadow:var(--glow-g)}

/* ── NOTE ── */
.note-area{
  width:100%;margin-top:6px;padding:6px 10px;
  background:rgba(196,113,237,.05);border:1px solid rgba(196,113,237,.25);
  border-radius:var(--radius-sm);color:var(--text2);
  font-size:13px;font-family:'Fira Code',monospace;font-weight:600;
  resize:vertical;min-height:40px;outline:none;
}
.note-area:focus{border-color:var(--purple);box-shadow:var(--glow-p)}
.note-display{
  margin-top:5px;padding:5px 10px;
  background:rgba(196,113,237,.07);
  border:1px solid rgba(196,113,237,.2);
  border-radius:var(--radius-sm);font-size:11px;
  color:var(--purple);font-style:italic;
  font-family:'Fira Code',monospace;
}

/* ── SEARCH RESULTS ── */
#searchResults{display:none}
#searchResults.on{display:block}
.sr-count{font-size:12px;color:var(--text3);margin-bottom:12px;font-family:'Fira Code',monospace;font-weight:600}
.sr-count span{color:var(--accent);font-weight:700}
.hl{background:rgba(255,215,0,.18);color:#ffe580;border-radius:2px;padding:0 1px}

/* ── STATS ── */
.stats-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.stat-pill{
  padding:4px 12px;border-radius:20px;font-size:10px;
  background:rgba(145,65,172,.05);
  border:1px solid rgba(145,65,172,.15);color:var(--text2);
  font-family:'Fira Code',monospace;font-weight:600;
}
.stat-pill span{color:var(--accent);font-weight:700}

/* ── FAVORITES PANEL ── */
#favPanel{
  display:none;position:fixed;top:0;right:0;
  width:400px;height:100vh;
  background:rgba(31,26,46,.97);
  border-left:1px solid rgba(255,140,32,.3);
  z-index:200;overflow-y:auto;padding:18px;
  box-shadow:-10px 0 50px rgba(255,140,32,.1),-20px 0 60px rgba(0,0,0,.8);
  backdrop-filter:blur(20px);
}
#favPanel.on{display:block}
.fav-panel-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.fav-panel-title{
  font-family:'Fira Code',monospace;
  font-size:12px;font-weight:700;color:var(--orange2);
  text-shadow:none;
}
.close-btn{
  padding:4px 10px;
  background:rgba(255,45,111,.05);
  border:1px solid rgba(255,45,111,.25);border-radius:4px;
  color:var(--text2);cursor:pointer;
  font-family:'Fira Code',monospace;font-weight:600;font-size:10px;
  text-transform:uppercase;letter-spacing:.5px;transition:all .15s;
}
.close-btn:hover{border-color:var(--red);color:var(--red);box-shadow:var(--glow-r)}

/* ── HISTORY PANEL ── */
#histPanel{
  display:none;position:fixed;bottom:0;
  left:var(--sidebar-w);right:0;height:185px;
  background:rgba(31,26,46,.97);
  border-top:1px solid rgba(145,65,172,.2);
  z-index:150;padding:10px 18px;overflow-y:auto;
  transition:left .2s;
  backdrop-filter:blur(20px);
  box-shadow:0 -5px 30px rgba(0,0,0,.7);
}
#histPanel.on{display:block}
.hist-item{
  font-family:'Fira Code',monospace;font-size:14px;
  padding:5px 8px;
  background:rgba(145,65,172,.04);
  border-radius:4px;margin-bottom:4px;
  color:var(--code);display:flex;align-items:flex-start;
  gap:8px;border:1px solid rgba(145,65,172,.1);
}
.hist-time{color:var(--text3);white-space:nowrap;font-size:10px;font-family:'Fira Code',monospace}

/* ── SHORTCUT PANEL ── */
#shortcutPanel{
  display:none;position:fixed;top:60px;right:14px;width:290px;
  background:rgba(31,26,46,.97);
  border:1px solid rgba(145,65,172,.25);
  border-radius:var(--radius);z-index:300;
  padding:14px 16px;
  box-shadow:var(--shadow),0 0 30px rgba(145,65,172,.1);
  backdrop-filter:blur(20px);
}
#shortcutPanel.on{display:block}
.sc-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;border-bottom:1px solid rgba(145,65,172,.08);font-size:11px;
  font-family:'Fira Code',monospace;font-weight:600;
}
.sc-row:last-child{border-bottom:none}
.sc-key{
  font-family:'Fira Code',monospace;
  background:rgba(145,65,172,.08);
  color:var(--accent);padding:2px 7px;border-radius:3px;
  font-size:11px;border:1px solid rgba(145,65,172,.25);
  box-shadow:0 0 6px rgba(145,65,172,.2);
}
.sc-desc{color:var(--text2)}

/* ── MODAL ── */
#customModal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.85);z-index:500;
  align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
}
#customModal.on{display:flex}
.modal-box{
  background:rgba(31,26,46,.98);
  border:1px solid rgba(145,65,172,.3);
  border-radius:10px;padding:24px 26px;
  width:540px;max-width:96vw;max-height:90vh;
  overflow-y:auto;
  box-shadow:0 0 60px rgba(145,65,172,.15),0 20px 60px rgba(0,0,0,.9),inset 0 1px 0 rgba(145,65,172,.2);
}
.modal-title{
  font-family:'Fira Code',monospace;
  font-size:13px;font-weight:700;color:var(--accent);
  margin-bottom:18px;display:flex;align-items:center;gap:8px;
  text-shadow:none;
}
.mf{margin-bottom:14px}
.mf label{
  display:block;font-size:9px;font-weight:700;
  color:var(--text3);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:5px;
  font-family:'Fira Code',monospace;
}
.mf input,.mf textarea,.mf select{
  width:100%;padding:8px 11px;
  background:rgba(145,65,172,.04);border:1px solid rgba(145,65,172,.15);
  border-radius:var(--radius-sm);color:var(--text);
  font-size:12px;font-family:'Fira Code',monospace;
  outline:none;transition:all .15s;
}
.mf input.mf-text{font-family:'Fira Code',monospace;font-size:13px}
.mf input:focus,.mf textarea:focus,.mf select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(145,65,172,.12),var(--glow-c);
  background:rgba(145,65,172,.07);
}
.mf textarea{resize:vertical;min-height:85px;line-height:1.6}
.mf select{
  font-family:'Fira Code',monospace;cursor:pointer;
  background:rgba(145,65,172,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239141ac'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance:none;
  color:var(--accent);
}
.mf select option{background:#1f1a2e;color:var(--text)}
.tag-checks{display:flex;gap:8px;flex-wrap:wrap}
.tag-chk{
  display:flex;align-items:center;gap:4px;font-size:10px;
  color:var(--text2);cursor:pointer;padding:3px 9px;
  border:1px solid rgba(145,65,172,.15);border-radius:4px;
  background:rgba(145,65,172,.04);user-select:none;transition:all .12s;
  font-family:'Fira Code',monospace;font-weight:600;
}
.tag-chk:hover{border-color:var(--accent);color:var(--accent)}
.modal-actions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end}
.btn-save{
  padding:7px 20px;
  background:linear-gradient(135deg,rgba(145,65,172,.2),rgba(196,113,237,.2));
  border:1px solid var(--accent);
  border-radius:var(--radius-sm);color:var(--accent);
  font-size:11px;font-weight:700;cursor:pointer;
  font-family:'Fira Code',monospace;transition:all .15s;letter-spacing:.5px;
  box-shadow:0 0 15px rgba(145,65,172,.2);
}
.btn-save:hover{
  background:linear-gradient(135deg,rgba(145,65,172,.3),rgba(196,113,237,.3));
  box-shadow:var(--glow-c);transform:translateY(-1px);
}
.btn-cancel{
  padding:7px 14px;background:transparent;
  border:1px solid rgba(255,45,111,.25);border-radius:var(--radius-sm);
  color:var(--text2);font-size:11px;cursor:pointer;
  font-family:'Fira Code',monospace;font-weight:600;transition:all .15s;
}
.btn-cancel:hover{border-color:var(--red);color:var(--red);box-shadow:var(--glow-r)}
.custom-badge{
  font-family:'Fira Code',monospace;
  font-size:7px;padding:2px 7px;border-radius:3px;
  background:rgba(0,229,176,.08);color:var(--teal);
  font-weight:700;border:1px solid rgba(0,229,176,.3);
  letter-spacing:.5px;
}
.hdr-btn.custom-btn{
  border-color:rgba(0,229,176,.35);color:var(--teal);
  background:rgba(0,229,176,.05);
}
.hdr-btn.custom-btn:hover{background:rgba(0,229,176,.12);box-shadow:var(--glow-g)}

/* ── MISC UI ── */
.empty{text-align:center;padding:48px 20px;color:var(--text3);font-family:'Fira Code',monospace}
.empty-icon{font-size:36px;margin-bottom:10px;opacity:.5}
#jumpTop{
  display:none;position:fixed;bottom:24px;right:24px;
  width:38px;height:38px;
  background:rgba(145,65,172,.1);
  border:1px solid rgba(145,65,172,.4);border-radius:50%;
  color:var(--accent);font-size:16px;font-weight:700;
  cursor:pointer;z-index:400;
  box-shadow:var(--glow-c);
  transition:all .2s;align-items:center;justify-content:center;
  font-family:monospace;
}
#jumpTop:hover{transform:translateY(-3px);box-shadow:0 0 25px rgba(145,65,172,.7);background:rgba(145,65,172,.2)}
#jumpTop.on{display:flex}
.pin-note{
  font-size:10.5px;padding:6px 10px;
  background:rgba(196,113,237,.07);
  border:1px solid rgba(196,113,237,.2);
  border-radius:var(--radius-sm);color:var(--purple);
  margin-bottom:10px;display:flex;align-items:flex-start;gap:6px;
  font-family:'Fira Code',monospace;
}
.pin-note .pn-del{margin-left:auto;cursor:pointer;opacity:.5;flex-shrink:0}
.pin-note .pn-del:hover{opacity:1}

/* COPY TOAST */
.copy-toast{
  position:fixed;bottom:70px;right:24px;
  background:linear-gradient(135deg,rgba(0,255,136,.15),rgba(145,65,172,.15));
  color:var(--green);
  border:1px solid rgba(0,255,136,.4);
  font-size:11px;font-weight:700;
  padding:6px 16px;border-radius:20px;
  z-index:1000;opacity:0;transform:translateY(6px);
  transition:all .2s;pointer-events:none;
  font-family:'Fira Code',monospace;letter-spacing:.5px;
  box-shadow:var(--glow-g);
}
.copy-toast.show{opacity:1;transform:translateY(0)}

/* ── TARGET INTEL PANEL ── */
#intelPanel{
  display:none;position:fixed;top:0;right:0;
  width:360px;height:100vh;
  background:rgba(31,26,46,.97);
  border-left:1px solid rgba(255,45,111,.25);
  z-index:200;overflow-y:auto;padding:18px;
  box-shadow:-10px 0 50px rgba(255,45,111,.1),-20px 0 60px rgba(0,0,0,.8);
  backdrop-filter:blur(20px);
}
#intelPanel.on{display:block}
.intel-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.intel-title{
  font-family:'Fira Code',monospace;
  font-size:12px;font-weight:700;
  background:linear-gradient(135deg,#ff2d6f,#ff2d8f);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.5px;
}
.intel-field{margin-bottom:14px}
.intel-field label{
  display:block;font-size:8px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--text3);margin-bottom:5px;
  font-family:'Fira Code',monospace;
}
.intel-field input,.intel-field textarea{
  width:100%;padding:7px 10px;
  background:rgba(255,45,111,.04);border:1px solid rgba(255,45,111,.2);
  border-radius:var(--radius-sm);color:var(--text);
  font-size:12px;font-family:'Fira Code',monospace;
  outline:none;transition:all .15s;resize:vertical;
}
.intel-field input{font-family:'Fira Code',monospace;font-size:13px}
.intel-field input:focus,.intel-field textarea:focus{
  border-color:var(--red);
  box-shadow:0 0 0 2px rgba(255,45,111,.12),var(--glow-r);
}
.intel-field textarea{min-height:70px;line-height:1.6}
.intel-save-row{display:flex;gap:6px;margin-top:4px}
.intel-save-btn{
  flex:1;padding:7px;
  background:rgba(255,45,111,.1);
  border:1px solid rgba(255,45,111,.35);border-radius:var(--radius-sm);
  color:var(--red);font-size:10px;font-weight:700;cursor:pointer;
  font-family:'Fira Code',monospace;transition:all .15s;letter-spacing:.5px;
}
.intel-save-btn:hover{background:rgba(255,45,111,.2);box-shadow:var(--glow-r)}
.intel-clear-btn{
  padding:6px 10px;background:transparent;
  border:1px solid rgba(255,45,111,.2);border-radius:var(--radius-sm);
  color:var(--text3);font-size:10px;cursor:pointer;
  font-family:'Fira Code',monospace;font-weight:600;transition:all .15s;
}
.intel-clear-btn:hover{border-color:var(--red);color:var(--red)}
.intel-divider{height:1px;background:rgba(255,45,111,.1);margin:14px 0}
.intel-loot-item{
  display:flex;align-items:flex-start;gap:6px;
  padding:5px 8px;background:rgba(0,229,176,.05);
  border:1px solid rgba(0,229,176,.15);border-radius:5px;
  margin-bottom:4px;font-family:'Fira Code',monospace;
  font-size:12px;color:var(--teal);word-break:break-all;
}
.intel-loot-del{margin-left:auto;cursor:pointer;opacity:.4;flex-shrink:0;color:var(--red)}
.intel-loot-del:hover{opacity:1}
.intel-add-row{display:flex;gap:5px;margin-top:5px}
.intel-add-row input{
  flex:1;padding:5px 8px;
  background:rgba(0,229,176,.04);border:1px solid rgba(0,229,176,.2);
  border-radius:4px;color:var(--teal);font-size:12px;
  font-family:'Fira Code',monospace;outline:none;
}
.intel-add-row input:focus{border-color:var(--teal);box-shadow:var(--glow-g)}
.intel-add-btn{
  padding:5px 10px;background:rgba(0,229,176,.06);
  border:1px solid rgba(0,229,176,.3);border-radius:4px;
  color:var(--teal);font-size:11px;cursor:pointer;
  font-family:'Fira Code',monospace;transition:all .15s;
}
.intel-add-btn:hover{background:rgba(0,229,176,.14);box-shadow:var(--glow-g)}
.flag-item{color:var(--orange2) !important}

/* ── 1-LINER COPY BUTTON ── */
.cp-1l{
  padding:3px 9px;font-size:11px;
  border:1px solid rgba(196,113,237,.2);border-radius:4px;
  cursor:pointer;background:rgba(196,113,237,.04);
  color:var(--text3);
  font-family:'Fira Code',monospace;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  transition:all .12s;white-space:nowrap;
}
.cp-1l:hover{border-color:var(--purple);color:var(--purple);background:rgba(196,113,237,.1);box-shadow:var(--glow-p)}
.cp-1l.ok{border-color:var(--green);color:var(--green);background:rgba(0,255,136,.1)}

/* ── GLOBAL PROGRESS ── */
#globalProgress{
  font-family:'Fira Code',monospace !important;
  font-size:9px !important;color:var(--teal) !important;
  padding:3px 8px !important;
  background:rgba(0,229,176,.06) !important;
  border:1px solid rgba(0,229,176,.25) !important;
  border-radius:4px !important;
  box-shadow:0 0 8px rgba(0,229,176,.15) !important;
}

/* ── CYBER SCAN LINE EFFECT ON HOVER ── */
@keyframes cyberScan{
  0%{top:-100%;opacity:.5}100%{top:200%;opacity:0}
}
.row:hover::after{
  content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(145,65,172,.4),transparent);
  animation:cyberScan .6s linear;pointer-events:none;
}

/* ── NEON CORNER BRACKETS FOR MODAL ── */
.modal-box::before,.modal-box::after{
  content:'';position:absolute;width:16px;height:16px;
  border-color:var(--accent);border-style:solid;
  box-shadow:var(--glow-c);
}
.modal-box{position:relative;overflow-y:auto}
.modal-box::before{top:6px;left:6px;border-width:2px 0 0 2px}
.modal-box::after{bottom:6px;right:6px;border-width:0 2px 2px 0}

/* ── CYBER FOOTER BAR ── */
.cyber-status{
  position:fixed;bottom:0;left:0;right:0;height:18px;
  background:rgba(26,21,37,.95);
  border-top:1px solid rgba(145,65,172,.1);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;z-index:50;
  font-family:'Fira Code',monospace;font-size:11px;
  color:var(--text3);letter-spacing:1px;
}
.cyber-status-left{display:flex;gap:16px;align-items:center}
.cyber-status-dot{
  width:5px;height:5px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px var(--green);animation:neonPulse 2s ease-in-out infinite;
  display:inline-block;margin-right:4px;
}
.cyber-status-right{color:var(--text3)}

/* ── VARS BAR INPUTS - themed ── */
.vi::placeholder{color:var(--text3);font-size:12px;font-weight:600}

/* ── SECTION HEADING NEON LINE ── */
.sec-hdr::before{
  content:'';position:absolute;bottom:-1px;right:0;width:30px;height:1px;
  background:linear-gradient(90deg,transparent,var(--purple));
}

/* ── PULSE ANIMATION ON ACTIVE SIDEBAR ITEM ── */
.si.on .si-icon{animation:neonPulse 2.5s ease-in-out infinite}

/* ── HOVER LIFT ON ROWS ── */
.row{will-change:transform,box-shadow}

/* ── PROGRESS BAR GLOW ── */
.grp-progress-bar{box-shadow:0 0 8px rgba(0,255,136,.5)}

/* ── SEARCH HIGHLIGHT ── */
.hl{
  background:rgba(255,225,0,.15);
  color:#ffe580;
  border-radius:2px;
  padding:0 2px;
  border:1px solid rgba(255,225,0,.25);
  font-weight:700;
}

/* ── MODAL OVERLAY GRID ── */
#customModal::before{
  content:'';pointer-events:none;
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(145,65,172,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145,65,172,.015) 1px, transparent 1px);
  background-size:30px 30px;
}

/* ── NOTES PANEL ── */
#notesPanel{
  display:none;position:fixed;top:0;right:0;
  width:380px;height:100vh;
  background:rgba(31,26,46,.97);
  border-left:1px solid rgba(255,210,0,.2);
  z-index:200;overflow-y:auto;padding:18px;
  box-shadow:-10px 0 50px rgba(255,210,0,.06),-20px 0 60px rgba(0,0,0,.8);
  backdrop-filter:blur(20px);
  flex-direction:column;gap:0;
}
#notesPanel.on{display:flex}
.notes-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-shrink:0;
}
.notes-title{
  font-family:'Fira Code',monospace;
  font-size:12px;font-weight:700;
  color:#ffe066;letter-spacing:.5px;
  text-shadow:none;
}
.notes-add-btn{
  padding:4px 12px;
  background:rgba(255,210,0,.08);
  border:1px solid rgba(255,210,0,.35);border-radius:4px;
  color:#ffe066;font-size:10px;font-weight:700;cursor:pointer;
  font-family:'Fira Code',monospace;transition:all .15s;letter-spacing:.5px;
}
.notes-add-btn:hover{background:rgba(255,210,0,.18);box-shadow:0 0 10px rgba(255,210,0,.3)}
.note-card{
  background:rgba(255,210,0,.04);
  border:1px solid rgba(255,210,0,.15);
  border-left:3px solid rgba(255,210,0,.5);
  border-radius:6px;padding:12px;margin-bottom:10px;
  transition:border-color .15s;flex-shrink:0;
}
.note-card:hover{border-color:rgba(255,210,0,.3)}
.note-card-top{
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
}
.note-card-title{
  flex:1;background:transparent;
  border:none;border-bottom:1px solid rgba(255,210,0,.15);
  color:#ffe066;font-size:12px;font-weight:700;
  font-family:'Fira Code',monospace;outline:none;
  padding:2px 4px;width:100%;
  transition:border-color .15s;
}
.note-card-title:focus{border-bottom-color:rgba(255,210,0,.5)}
.note-card-title::placeholder{color:rgba(255,210,0,.3);font-weight:600}
.note-card-del{
  padding:2px 7px;background:transparent;
  border:1px solid rgba(255,45,111,.2);border-radius:3px;
  color:var(--text3);font-size:10px;cursor:pointer;
  font-family:'Fira Code',monospace;font-weight:700;
  transition:all .12s;flex-shrink:0;
}
.note-card-del:hover{border-color:var(--red);color:var(--red)}
.note-card-body{
  width:100%;min-height:80px;max-height:300px;
  background:transparent;
  border:none;
  color:#e8d88a;font-size:13px;line-height:1.65;
  font-family:'Fira Code',monospace;font-weight:600;
  resize:vertical;outline:none;
  padding:2px 4px;
}
.note-card-body::placeholder{color:rgba(255,210,0,.2);font-size:12px}
.note-card-ts{
  font-size:9px;color:rgba(255,210,0,.3);
  font-family:'Fira Code',monospace;letter-spacing:.5px;
  margin-top:6px;text-align:right;
}
/* ── Notas markdown + enlaces [[wiki]] + backlinks ── */
.note-card-edit{
  background:transparent;border:1px solid rgba(255,210,0,.25);color:rgba(255,210,0,.6);
  border-radius:4px;cursor:pointer;font-size:12px;padding:1px 6px;margin-right:4px;
}
.note-card-edit:hover{border-color:rgba(255,210,0,.6);color:#e8d88a}
.note-card-rendered{
  color:#e8d88a;font-size:13px;line-height:1.6;
  font-family:'Fira Code',monospace;padding:2px 4px;word-break:break-word;
}
.note-card-rendered.empty{color:rgba(255,210,0,.3);font-style:italic}
.note-card-rendered h1,.note-card-rendered h2,.note-card-rendered h3{
  font-size:14px;margin:6px 0 3px;color:#fff3c0;font-weight:700;
}
.note-card-rendered code{background:rgba(255,210,0,.08);padding:1px 4px;border-radius:3px;font-size:12px}
.note-card-rendered pre{background:rgba(0,0,0,.25);padding:8px;border-radius:4px;overflow:auto;font-size:12px}
.note-card-rendered ul,.note-card-rendered ol{margin:4px 0 4px 18px}
.note-card-rendered a{color:#ffd966}
.note-card-rendered .wl,.note-backlinks .wl{
  color:#c471ed;border-bottom:1px dotted rgba(196,113,237,.6);
  cursor:pointer;text-decoration:none;
}
.note-card-rendered .wl:hover,.note-backlinks .wl:hover{color:#e0a3ff;border-bottom-style:solid}
.note-card-rendered .wl.wl-missing{color:rgba(196,113,237,.55);border-bottom-color:rgba(196,113,237,.3)}
.note-backlinks{
  margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,210,0,.12);
  font-size:11px;color:rgba(255,210,0,.5);font-family:'Fira Code',monospace;
}
.note-bl-h{color:rgba(255,210,0,.4);margin-right:4px;font-weight:600}
.note-flash{animation:noteFlash 1s ease}
@keyframes noteFlash{0%{box-shadow:0 0 0 2px rgba(196,113,237,.7)}100%{box-shadow:0 0 0 2px transparent}}
.notes-empty{
  text-align:center;padding:40px 20px;color:rgba(255,210,0,.25);
  font-family:'Fira Code',monospace;font-size:13px;
}
.notes-empty-icon{font-size:32px;margin-bottom:10px;opacity:.4}
/* ── Barra de herramientas del panel (grafo + vault) ── */
.notes-tools{
  display:flex;gap:6px;margin-bottom:12px;flex-shrink:0;flex-wrap:wrap;
}
.notes-tool-btn{
  padding:3px 9px;background:rgba(255,210,0,.05);
  border:1px solid rgba(255,210,0,.22);border-radius:4px;
  color:rgba(255,210,0,.7);font-size:10px;font-weight:700;cursor:pointer;
  font-family:'Fira Code',monospace;transition:all .15s;letter-spacing:.4px;
}
.notes-tool-btn:hover{background:rgba(255,210,0,.14);color:#ffe066;border-color:rgba(255,210,0,.4)}
.notes-tool-btn.on{background:rgba(196,113,237,.14);color:#e0a3ff;border-color:rgba(196,113,237,.5)}
/* ── Grafo SVG de enlaces ── */
#notesGraph{
  margin-bottom:12px;flex-shrink:0;
  background:rgba(0,0,0,.18);border:1px solid rgba(196,113,237,.18);
  border-radius:6px;padding:4px;
}
.notes-graph-svg{display:block;width:100%;height:auto;max-width:340px;margin:0 auto}
.g-edge{stroke:rgba(196,113,237,.35);stroke-width:1}
.g-dot{fill:rgba(196,113,237,.4);stroke:rgba(196,113,237,.6);stroke-width:1;transition:fill .12s}
.g-dot-on{fill:#c471ed;stroke:#e0a3ff}
.g-node{cursor:pointer}
.g-node:hover .g-dot{fill:#e0a3ff;stroke:#fff}
.g-label{
  fill:rgba(255,210,0,.6);font-family:'Fira Code',monospace;font-size:9px;
  dominant-baseline:middle;pointer-events:none;
}
.g-node:hover .g-label{fill:#ffe066}
.graph-empty{
  text-align:center;padding:24px 12px;color:rgba(196,113,237,.45);
  font-family:'Fira Code',monospace;font-size:12px;
}

/* ── BACK TO MAIN SITE ── */
.hdr-home{
  font-family:'Fira Code',monospace;font-size:11px;font-weight:700;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  padding:4px 10px;border-radius:4px;letter-spacing:.5px;
  color:var(--text2);background:rgba(145,65,172,.04);
  border:1px solid rgba(145,65,172,.2);
  transition:all .15s;
}
.hdr-home:hover{
  color:var(--accent);border-color:var(--accent);
  background:rgba(145,65,172,.1);
}
body.light-mode .hdr-home{color:var(--text2);background:rgba(145,65,172,.04);border-color:rgba(145,65,172,.2)}
body.light-mode .hdr-home:hover{color:var(--accent);border-color:var(--accent)}

/* ── RESPONSIVE ── */
@media (max-width:1280px){
  .hdr{padding:6px 12px;gap:8px}
}
@media (max-width:720px){
  :root{--sidebar-w:170px}
  .search-wrap{order:3;flex-basis:100%;max-width:none}
  .hdr-title{font-size:12px;letter-spacing:.5px}
  .hdr-right{gap:4px}
  .hdr-btn,.theme-toggle{font-size:10px;padding:3px 7px}
  .warn-badge{display:none}
  .vars-bar-inner{gap:5px}
  .row{flex-wrap:wrap}
  .row-actions{flex-wrap:wrap}
}
@media (max-width:560px){
  .sidebar{position:absolute;z-index:120;height:100%;box-shadow:var(--shadow)}
  .hdr-home{font-size:10px;padding:3px 7px}
  #favPanel,#intelPanel,#notesPanel{width:100%;left:0;right:0}
}
</style>
