/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── PINK THEME (default) ─── */
:root{
  /* ── DARK MODE: deep navy + muted purple ── */
  --p:#9d8fcc;--ph:#7d6fac;--pg:rgba(157,143,204,.25);
  --a:#c4b8e8;--a2:#e8e4f5;
  --ok:#7ec87f;--err:#e87878;--warn:#f0c060;
  --bg:#0d1121;--bg2:#111829;--bg3:#161f33;
  --sf:#1c2740;--sf2:#22304d;
  --bd:rgba(157,143,204,.18);--bdb:rgba(157,143,204,.45);
  --tx:#e8e4f5;--txd:#b0a8d0;--txm:#6a6290;
  --sh:0 2px 8px rgba(0,0,0,.6);--shg:0 0 14px var(--pg);
  --fp:'VT323',monospace;--fx:'Pixelify Sans',monospace;--fb:'Noto Sans',sans-serif;
}
body.pink{
  /* ── LIGHT MODE: muted dusty pink ── */
  --p:#b87090;--ph:#96587a;--pg:rgba(184,112,144,.2);
  --a:#c4849a;--a2:#f5eaee;
  --ok:#5a9c5a;--err:#c05050;--warn:#b08030;
  --bg:#f5eaee;--bg2:#ede0e5;--bg3:#e4d4db;
  --sf:#d8c4cc;--sf2:#ccb4be;
  --bd:rgba(184,112,144,.25);--bdb:rgba(184,112,144,.55);
  --tx:#2e1c26;--txd:#5a3a4a;--txm:#8a6070;
  --sh:0 2px 6px rgba(100,60,80,.15);--shg:0 0 12px var(--pg);
}

/* ─── BASE ─── */
body{font-family:var(--fb);background:var(--bg);color:var(--tx);font-size:14px;line-height:1.6;overflow:hidden;height:100vh}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:9999}
body.pink::before{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.015) 2px,rgba(0,0,0,.015) 4px)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--bdb);border-radius:3px}

/* ─── LAYOUT ─── */
#app{height:100vh;display:flex;flex-direction:column}
#main{display:flex;flex:1;overflow:hidden;min-height:0}

/* ─── HEADER ─── */
#header{
  background:var(--bg2);border-bottom:1px solid var(--bdb);
  padding:.5rem 1rem;display:flex;align-items:center;gap:.75rem;
  flex-shrink:0;position:relative;z-index:100;
  box-shadow:var(--sh);
}
#header::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--p),var(--a),var(--p),transparent);opacity:.6}

/* ─── MODE TABS ─── */
#modeTabs{display:flex;background:var(--bg3);border-bottom:1px solid var(--bdb);flex-shrink:0;padding:0 .5rem;gap:.2rem}
.mode-tab{font-family:var(--fp);font-size:1.05rem;letter-spacing:1px;padding:.4rem 1.1rem;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--txm);cursor:pointer;transition:all .15s}
.mode-tab:hover{color:var(--txd)}
.mode-tab.active{color:var(--p);border-bottom-color:var(--p);text-shadow:0 0 8px var(--pg)}
#title{font-family:var(--fp);font-size:1.6rem;color:var(--p);letter-spacing:2px;text-shadow:0 0 12px var(--pg);white-space:nowrap;line-height:1}
#title span{font-family:var(--fx);font-size:.45em;color:var(--txm);letter-spacing:1px;margin-left:.4rem}
#header-right{display:flex;align-items:center;gap:.5rem;flex:1;justify-content:flex-end;flex-wrap:wrap}
.lb-label{font-family:var(--fx);font-size:.72rem;color:var(--txm);letter-spacing:1px;white-space:nowrap}
#lorebookName{font-family:var(--fx);font-size:.82rem;padding:.28rem .6rem;background:var(--bg3);border:1px solid var(--bd);border-radius:3px;color:var(--tx);width:170px}
#lorebookName:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 2px var(--pg)}
.hdr-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}

/* ─── BUTTONS ─── */
.btn{font-family:var(--fx);font-size:.78rem;letter-spacing:.4px;padding:.35rem .8rem;border:1px solid transparent;border-radius:3px;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;transition:all .15s;white-space:nowrap;line-height:1.4}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--p);color:var(--bg);border-color:var(--p)}.btn-p:hover{background:var(--ph);box-shadow:0 0 8px var(--pg)}
.btn-s{background:var(--sf2);color:var(--txd);border-color:var(--bd)}.btn-s:hover{border-color:var(--bdb);color:var(--tx)}
.btn-ok{background:var(--ok);color:#0e1a0e;border-color:var(--ok)}.btn-ok:hover{filter:brightness(1.1)}
.btn-err{background:var(--err);color:#fff;border-color:var(--err)}.btn-err:hover{filter:brightness(1.1)}
.btn-sm{padding:.22rem .55rem;font-size:.72rem}
.btn-icon{width:2.1rem;height:2.1rem;padding:0;justify-content:center;background:var(--sf);color:var(--txd);border:1px solid var(--bd)}
.btn-icon:hover{border-color:var(--bdb);color:var(--p);box-shadow:0 0 6px var(--pg)}

/* ─── DROPDOWN ─── */
.dd{position:relative;display:inline-block}
.dd-menu{display:none;position:absolute;top:calc(100% + 3px);left:0;background:var(--sf);border:1px solid var(--bdb);border-radius:3px;min-width:190px;z-index:500;box-shadow:var(--sh)}
.dd-menu.open{display:block}
.dd-item{display:flex;align-items:center;gap:.4rem;width:100%;padding:.5rem .8rem;border:none;background:transparent;color:var(--txd);text-align:left;cursor:pointer;font-family:var(--fx);font-size:.78rem;letter-spacing:.3px}
.dd-item:hover{background:var(--sf2);color:var(--p)}

/* ─── SIDEBAR ─── */
#sidebar{width:285px;min-width:285px;background:var(--bg2);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.sb-head{padding:.75rem;border-bottom:1px solid var(--bd);background:var(--bg3);display:flex;flex-direction:column;gap:.45rem}
.sb-title{font-family:var(--fx);font-size:.8rem;color:var(--p);letter-spacing:2px}
.sb-search{width:100%;padding:.3rem .55rem;background:var(--bg);border:1px solid var(--bd);border-radius:3px;color:var(--tx);font-family:var(--fb);font-size:.8rem}
.sb-search:focus{outline:none;border-color:var(--p)}
.zoom-row{display:flex;align-items:center;gap:.35rem}
.z-btn{width:1.4rem;height:1.4rem;border:1px solid var(--bd);background:var(--sf);color:var(--txd);border-radius:2px;cursor:pointer;font-family:var(--fx);font-size:.85rem;display:flex;align-items:center;justify-content:center}
.z-btn:hover{border-color:var(--p);color:var(--p)}
/* ─── BASE CSS END ─── */