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

/* ─── PINK THEME (default) ─── */
:root{
  --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;
  --nav-w:200px;
  --nav-w-collapsed:52px;
}
body.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}

/* ─── APP SHELL ─── */
#app{height:100vh;display:flex;overflow:hidden}

/* ══════════════════════════════════════════
   NAV SIDEBAR
══════════════════════════════════════════ */
#nav-sidebar{
  width:var(--nav-w);
  min-width:var(--nav-w);
  background:var(--bg2);
  border-right:1px solid var(--bdb);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  overflow:hidden;
  transition:width .2s ease, min-width .2s ease;
  position:relative;
  z-index:200;
}
#nav-sidebar::after{
  content:'';position:absolute;top:0;right:-1px;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--p),var(--a),var(--p),transparent);
  opacity:.35;
}

/* Collapsed state */
#nav-sidebar.collapsed{width:var(--nav-w-collapsed);min-width:var(--nav-w-collapsed)}

/* Logo / top area */
.nav-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem .75rem .6rem;
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
  gap:.4rem;
  overflow:hidden;
}
.nav-logo{display:flex;flex-direction:column;gap:0;overflow:hidden;min-width:0}
.nav-logo-text{
  font-family:var(--fp);font-size:1.45rem;color:var(--p);
  letter-spacing:2px;text-shadow:0 0 10px var(--pg);
  white-space:nowrap;line-height:1;
  transition:opacity .15s;
}
.nav-version{
  font-family:var(--fx);font-size:.55rem;color:var(--txm);
  letter-spacing:1px;opacity:.6;margin-top:.05rem;
  white-space:nowrap;
}
#nav-sidebar.collapsed .nav-logo{display:none}

/* Toggle button */
.nav-toggle{
  width:1.7rem;height:1.7rem;flex-shrink:0;
  background:none;border:1px solid var(--bd);border-radius:3px;
  color:var(--txm);cursor:pointer;font-family:var(--fx);font-size:.75rem;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .12s,color .12s,transform .2s;
}
.nav-toggle:hover{border-color:var(--p);color:var(--p)}
#nav-sidebar.collapsed .nav-toggle{transform:rotate(180deg)}

/* Nav items area */
.nav-items{flex:1;display:flex;flex-direction:column;padding:.4rem 0;overflow:hidden}
.nav-bottom{display:flex;flex-direction:column;padding:.4rem 0;border-top:1px solid var(--bd);flex-shrink:0}

.nav-item{
  display:flex;align-items:center;gap:.55rem;
  padding:.52rem .75rem;
  background:none;border:none;cursor:pointer;
  color:var(--txd);font-family:var(--fx);font-size:.78rem;letter-spacing:.5px;
  text-align:left;width:100%;
  transition:background .12s,color .12s;
  white-space:nowrap;overflow:hidden;
  border-left:2px solid transparent;
  position:relative;
}
.nav-item:hover{background:var(--sf);color:var(--tx)}
.nav-item.active{
  background:var(--sf);color:var(--p);
  border-left-color:var(--p);
  text-shadow:0 0 8px var(--pg);
}
.nav-item-icon{font-size:1rem;flex-shrink:0;width:1.1rem;text-align:center;line-height:1}
.nav-item-label{transition:opacity .15s}
#nav-sidebar.collapsed .nav-item-label{opacity:0;pointer-events:none;width:0;overflow:hidden}
#nav-sidebar.collapsed .nav-item{justify-content:center;padding:.52rem 0}

/* ══════════════════════════════════════════
   CONTENT AREA + VIEWS
══════════════════════════════════════════ */
#content-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative}

.view-panel{
  display:none;flex:1;flex-direction:column;overflow:hidden;
  width:100%;
}
.view-panel.view-active{display:flex}

.view-scroll{flex:1;overflow-y:auto;padding:1.5rem}

/* ── HOME VIEW ── */
.home-hero{
  max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:1.4rem;
  padding:1rem 0 2rem;
}
.home-hero-title{
  font-family:var(--fp);font-size:3.2rem;color:var(--p);letter-spacing:3px;
  text-shadow:0 0 20px var(--pg);line-height:1;
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
}
.home-hero-sub{
  font-family:var(--fx);font-size:.9rem;color:var(--txm);letter-spacing:2px;
  text-shadow:none;
}
.home-hero-tagline{
  font-family:var(--fx);font-size:.78rem;color:var(--txm);letter-spacing:1.5px;
}
.home-hero-actions{display:flex;gap:.55rem;flex-wrap:wrap}
.home-cta{padding:.5rem 1.1rem}
.home-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.75rem;
  margin-top:.4rem;
}
.home-card{
  background:var(--bg2);border:1px solid var(--bd);border-radius:4px;
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.35rem;
  transition:border-color .15s,box-shadow .15s;
}
.home-card:hover{border-color:var(--bdb);box-shadow:0 0 10px var(--pg)}
.home-card-icon{font-size:1.4rem}
.home-card-title{font-family:var(--fx);font-size:.8rem;color:var(--p);letter-spacing:.5px}
.home-card-desc{font-family:var(--fb);font-size:.75rem;color:var(--txm);line-height:1.55}
.home-footer-note{font-family:var(--fx);font-size:.65rem;color:var(--txm);letter-spacing:.8px;opacity:.7;padding-top:.5rem;border-top:1px solid var(--bd)}

/* ── DASHBOARD ── */
.dashboard{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}
.dash-section{display:flex;flex-direction:column;gap:.6rem}
.dash-section-title{font-family:var(--fp);font-size:1.05rem;color:var(--p);letter-spacing:2px;text-shadow:0 0 8px var(--pg)}
.dash-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.dash-act{padding:.45rem 1rem}
.dash-recent{display:flex;flex-direction:column;gap:.3rem}
.dash-recent-item{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;
  background:var(--bg2);border:1px solid var(--bd);border-radius:3px;
  cursor:pointer;transition:border-color .12s;
}
.dash-recent-item:hover{border-color:var(--p)}
.dash-recent-icon{font-size:.95rem;flex-shrink:0}
.dash-recent-name{font-family:var(--fx);font-size:.78rem;color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.3px}
.dash-recent-type{font-family:var(--fx);font-size:.62rem;color:var(--txm);white-space:nowrap;text-transform:uppercase;letter-spacing:.6px}
.dash-recent-date{font-family:var(--fx);font-size:.62rem;color:var(--txm);white-space:nowrap}
.dash-empty{font-family:var(--fx);font-size:.75rem;color:var(--txm);padding:.75rem;letter-spacing:.5px}
.dash-overview{display:flex;gap:1rem;flex-wrap:wrap;padding:.85rem 1rem;background:var(--bg2);border:1px solid var(--bd);border-radius:4px}
.dash-stat{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:60px}
.dash-stat-num{font-family:var(--fp);font-size:1.8rem;color:var(--p);text-shadow:0 0 8px var(--pg);line-height:1}
.dash-stat-lbl{font-family:var(--fx);font-size:.62rem;color:var(--txm);letter-spacing:.5px}

/* ── LIBRARY VIEW ── */
.library-wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.lib-view-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.lib-view-title{font-family:var(--fp);font-size:1.05rem;color:var(--p);letter-spacing:2px;text-shadow:0 0 8px var(--pg)}
.lib-filter-tabs{display:flex;gap:.25rem;flex-wrap:wrap}
.lib-filter-tab{
  font-family:var(--fx);font-size:.7rem;letter-spacing:.4px;padding:.28rem .75rem;
  background:var(--sf);border:1px solid var(--bd);border-radius:3px;
  color:var(--txm);cursor:pointer;transition:all .12s;
}
.lib-filter-tab:hover{color:var(--txd);border-color:var(--bdb)}
.lib-filter-tab.active{background:var(--p);color:var(--bg);border-color:var(--p)}
.lib-grid{display:flex;flex-direction:column;gap:.3rem}
.lib-card{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .85rem;
  background:var(--bg2);border:1px solid var(--bd);border-radius:3px;
  transition:border-color .12s;cursor:pointer;
}
.lib-card:hover{border-color:var(--bdb)}
.lib-card-icon{font-size:1.1rem;flex-shrink:0}
.lib-card-info{flex:1;min-width:0}
.lib-card-name{font-family:var(--fx);font-size:.8rem;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.3px}
.lib-card-meta{font-family:var(--fx);font-size:.62rem;color:var(--txm);margin-top:.1rem}
.lib-card-type{color:var(--a);text-transform:uppercase;letter-spacing:.5px}
.lib-card-open{flex-shrink:0}
.lib-view-empty{
  font-family:var(--fx);font-size:.8rem;color:var(--txm);
  text-align:center;padding:3rem 1rem;letter-spacing:.5px;line-height:2;
}

/* ── SETTINGS VIEW ── */
.settings-view-wrap{max-width:600px;margin:0 auto}

/* ══════════════════════════════════════════
   EDITOR VIEW LAYOUT
══════════════════════════════════════════ */
.view-editor-layout{flex-direction:column}

/* Editor header */
#editor-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);
}
#editor-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;
}
#editor-header-left{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
#editor-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}

/* 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)}
.mode-tab.stub{opacity:.45;cursor:not-allowed}
.mode-tab.stub:hover{color:var(--txm)}

/* Editor inner: entry sidebar + canvas */
#editor-inner{display:flex;flex:1;overflow:hidden;min-height:0}

/* ─── ENTRY 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)}

/* ─── 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:200px;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)}

/* ─── SETTINGS MODAL STYLES ─── */
.settings-section{margin-bottom:1.1rem}
.settings-section-title{font-family:var(--fp);font-size:.95rem;color:var(--p);letter-spacing:1.5px;margin-bottom:.55rem;padding-bottom:.3rem;border-bottom:1px solid var(--bd)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.55rem}
.settings-row{display:flex;flex-direction:column;gap:.2rem}
.settings-lbl{font-family:var(--fx);font-size:.68rem;color:var(--txm);letter-spacing:.4px}
.settings-color{display:flex;gap:.35rem;align-items:center}
.settings-color input[type=color]{width:32px;height:26px;padding:1px;border:1px solid var(--bd);border-radius:3px;background:var(--sf);cursor:pointer}
.settings-color input[type=text]{flex:1;font-family:var(--fx);font-size:.72rem;padding:.22rem .45rem;background:var(--sf);border:1px solid var(--bd);border-radius:3px;color:var(--tx)}
.settings-color input[type=text]:focus{outline:none;border-color:var(--p)}
.theme-slot{display:flex;align-items:center;gap:.4rem;padding:.4rem .65rem;background:var(--sf);border:1px solid var(--bd);border-radius:3px;cursor:pointer;transition:border-color .12s}
.theme-slot:hover{border-color:var(--bdb)}
.theme-slot.active{border-color:var(--p);background:var(--sf2)}
.theme-slot-name{font-family:var(--fx);font-size:.78rem;color:var(--txd);flex:1}
.theme-slot-swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.2)}

/* ── Desktop: hide mobile-only elements ── */
@media (min-width:701px){
  #mob-nav{display:none}
  #mob-topbar{display:none}
  #mob-backdrop{display:none!important}
  #mob-sb-close{display:none!important}
}

/* ══════════════════════════════════════════
   MOBILE LAYOUT (≤ 700px)
══════════════════════════════════════════ */
@media (max-width:700px){
  body{overflow:auto;height:auto;min-height:100vh;min-height:100dvh}
  #app{height:auto;min-height:100vh;min-height:100dvh;flex-direction:column}

  /* Mobile top bar */
  #mob-topbar{
    display:none;align-items:center;justify-content:space-between;
    background:var(--bg2);border-bottom:1px solid var(--bdb);
    padding:.45rem .85rem;flex-shrink:0;position:sticky;top:0;z-index:500;
  }
  #mob-topbar.visible{display:flex}
  #mob-topbar::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:.5;
  }
  .mob-topbar-left{display:flex;align-items:baseline;gap:.45rem}
  .mob-topbar-title{
    font-family:var(--fp);font-size:1.35rem;color:var(--p);
    letter-spacing:2px;text-shadow:0 0 10px var(--pg);line-height:1;
  }
  .mob-topbar-ver{
    font-family:var(--fx);font-size:.55rem;color:var(--txm);
    letter-spacing:1px;opacity:.6;
  }
  /* Hide editor header ? on mobile — topbar handles it */
  .mob-hide{display:none!important}

  /* Hide desktop nav sidebar on mobile */
  #nav-sidebar{display:none}

  /* Content area fills screen */
  #content-area{flex:1}

  /* Views */
  .view-panel{display:none;flex-direction:column;width:100%}
  .view-panel.view-active{display:flex}
  .view-scroll{padding:.9rem .75rem;padding-bottom:5rem}

  /* Home view */
  .home-hero{padding:.5rem 0 1.5rem}
  .home-hero-title{font-size:2.2rem}
  .home-cards{grid-template-columns:1fr 1fr}

  /* Editor view header: compact */
  #editor-header{padding:.4rem .65rem;gap:.4rem;flex-wrap:nowrap;overflow:hidden}
  #editor-header-left{flex-shrink:0;overflow:hidden}
  .lb-label{display:none}
  .hdr-actions{display:none}
  #lorebookName{display:none}
  .btn-icon{width:1.9rem;height:1.9rem;font-size:.95rem;flex-shrink:0}
  #editor-header-right{gap:.3rem;flex-wrap:nowrap;flex:1;justify-content:flex-end;overflow:hidden}

  /* Mode tabs: scrollable */
  #modeTabs{padding:0;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #modeTabs::-webkit-scrollbar{display:none}
  .mode-tab{flex-shrink:0;padding:.45rem .8rem;font-size:.82rem;letter-spacing:.5px;border-bottom:2px solid transparent}

  /* Editor inner: stacked */
  #editor-inner{flex-direction:column;overflow:visible;min-height:0}

  /* Entry sidebar: off-canvas drawer */
  #sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:85vw;max-width:340px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:1200;
    border-right:1px solid var(--bdb);
    box-shadow:4px 0 24px rgba(0,0,0,.65);
    overflow-y:auto;
    min-width:unset;flex-shrink:unset;
  }
  #sidebar.mob-open{transform:translateX(0)}
  #mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;backdrop-filter:blur(2px)}
  #mob-backdrop.visible{display:block}
  #mob-sb-close{display:flex}

  .ei{padding:.65rem .75rem}
  .ei-acts{display:flex}
  .ei-act{padding:5px 10px;font-size:.75rem}

  /* Editor canvas */
  #editor-area{width:100%;min-height:0}
  .tab-bar-wrap{padding:0 .3rem}
  .view-ctrls{display:none}
  #editorContent{padding:.85rem .7rem;padding-bottom:5.5rem}

  .flabel{font-size:.72rem}
  .finput,.ftextarea,textarea.finput{font-size:.83rem}
  .kw-row{grid-template-columns:1fr;gap:.45rem}
  .kw-logic{min-width:unset}
  .adv-grid{grid-template-columns:1fr}

  .modal{padding:.4rem;align-items:flex-end}
  .modal-box,.modal-box.lg{width:100%;max-width:100%;max-height:92vh;max-height:92dvh;border-radius:14px 14px 0 0}
  .modal-body{padding:.85rem .9rem}
  .settings-grid{grid-template-columns:1fr 1fr}

  /* Mobile view nav active state */
  .mob-view-btn.active{color:var(--p)}
  .mob-editor-only{display:none}

  /* Bottom nav */
  #mob-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    background:var(--bg2);
    border-top:1px solid var(--bdb);
    z-index:1000;
    box-shadow:0 -2px 16px rgba(0,0,0,.55);
    padding:.25rem .15rem;
    padding-bottom:calc(.25rem + env(safe-area-inset-bottom));
    gap:0;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #mob-nav::-webkit-scrollbar{display:none}
  .mob-nav-btn{
    flex:0 0 auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.12rem;min-width:3.2rem;padding:.3rem;
    background:none;border:none;cursor:pointer;
    color:var(--txm);font-family:var(--fx);font-size:.52rem;letter-spacing:.4px;
    border-radius:6px;transition:color .12s,background .12s;
    -webkit-tap-highlight-color:transparent;white-space:nowrap;
  }
  .mob-nav-btn:active{background:var(--sf2)}
  .mob-nav-btn .icon{font-size:1.25rem;line-height:1.1}
  .mob-nav-btn.active{color:var(--p)}
  .mob-nav-btn.hi{color:var(--ok)}
  #mob-nav-sep{width:1px;background:var(--bd);margin:.3rem .1rem;flex-shrink:0;align-self:stretch}

  #notifs{bottom:5.2rem;right:.75rem}
  .lib-save-row{flex-direction:column;align-items:stretch}
  .lib-save-row .lib-new-in,.lib-save-row .btn{width:100%}
  .sr-actions{flex-direction:column}
  .sr-actions .btn{width:100%}

  /* Pronoun tool: full-screen */
  #pronounTool{
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100%;transform:none;border-radius:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:2100;
  }
  #pronounTool .pt-head{position:sticky;top:0;z-index:1;background:var(--bg3)}
  #pronounTool .pt-body{padding-bottom:5rem}

  /* Library view mobile */
  .lib-view-header{flex-direction:column;align-items:flex-start}
  .home-cards{grid-template-columns:1fr}
}