[hidden]{ display:none !important; }
    :root{
      --bg:#0b0f14;
      --panel:#0f1620;
      --panel2:#0c121a;
      --text:#e7edf5;
      --muted:#9fb0c3;
      --border:rgba(255,255,255,.10);
      --hover:rgba(255,255,255,.06);
      --shadow: 0 10px 28px rgba(0,0,0,.35);
      --radius:14px;

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      --editorFont: var(--mono);
      --fs-xs:11px;
      --fs-sm:12px;
      --fs-base:13px;
      --fs-editor:15px;
      --fs-panel-title:14px;
      --fs-modal-title:22px;

      /* limited, theme-friendly colors */
      --ink0:#e7edf5;
      --ink1:#9fb0c3;
      --ink2:#7dd3fc;
      --ink3:#f0abfc;

      --hl0: rgba(250, 204, 21, .55);
      --hl1: rgba(56, 189, 248, .45);
      --hl2: rgba(52, 211, 153, .45);
      --hl3: rgba(244, 63, 94, .40);

      /* ruler ticks */
      --rulerMinor: rgba(255,255,255,.10);
      --rulerMajor: rgba(255,255,255,.18);
    }

    [data-theme="light"]{
      --bg:#f6f7fb;
      --panel:#ffffff;
      --panel2:#fbfcff;
      --text:#0e1621;
      --muted:#5c6b7a;
      --border:rgba(15,22,33,.12);
      --hover:rgba(15,22,33,.05);
      --shadow: 0 10px 28px rgba(15,22,33,.12);

      --ink0:#0e1621;
      --ink1:#5c6b7a;
      --ink2:#1d4ed8;
      --ink3:#6d28d9;

      --hl0: rgba(234, 179, 8, .34);
      --hl1: rgba(59, 130, 246, .20);
      --hl2: rgba(34, 197, 94, .18);
      --hl3: rgba(244, 63, 94, .20);

      /* ruler ticks */
      --rulerMinor: rgba(15,22,33,.12);
      --rulerMajor: rgba(15,22,33,.20);    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:var(--mono);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      letter-spacing:.1px;
    }
    button, input, select, textarea{ font-family:var(--mono); }

    /* Header */
    .bar{
      position:sticky; top:0; z-index:50;
      height:54px;
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-bottom:1px solid var(--border);
      background:linear-gradient(to bottom, rgba(255,255,255,.03), transparent);
    }
    .leftBar{ display:flex; align-items:center; gap:10px; min-width:0; }
    .rightBar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }

    .brand{ display:flex; align-items:center; gap:10px; font-weight:950; user-select:none; }
    .logo{
      width:28px;height:28px;border-radius:0;display:grid;place-items:center;
      border:0; background:transparent; box-shadow:none;
    }
    .logo svg{ width:20px;height:20px; opacity:.95; }
    .activeTitle{
      color:var(--muted);
      font-weight:650;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width:40vw;
    }

    .activeTitle{ cursor:text; }
    .activeTitleInput{
      width:34vw;
      max-width:440px;
      border:1px solid var(--border);
      background:var(--panel);
      color:var(--text);
      border-radius:10px;
      padding:6px 10px;
      outline:none;
      font-weight:950;
      font-family:var(--mono);
    }

    .btn{
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      border-radius:12px;
      padding:8px 10px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      transition:.15s ease;
      user-select:none;
    }
    .btn:hover{ background:var(--hover); }
    .btn:active{ transform:translateY(1px); }
    .btn svg{ width:18px;height:18px; opacity:.9; }
    .btn.small{ padding:7px 9px; border-radius:11px; }
    .btn.danger{ border-color:rgba(239,68,68,.35); color:rgba(239,68,68,.95); }
    .btn.danger:hover{ background:rgba(239,68,68,.10); }

    .btn.quiet{ border-color:transparent; }
    .btn.quiet:hover{ border-color:var(--border); }
    .iconBtn{ padding:7px 8px; }

    
    /* Focus button icon swap */
    #focusBtn .eyeOff{ display:none; }
    #focusBtn.toggleOn .eyeOn{ display:none; }
    #focusBtn.toggleOn .eyeOff{ display:block; }
.toggleOn{
      border-color:rgba(110,168,254,.30) !important;
      background:rgba(110,168,254,.10) !important;
    }

    /* Layout */
    .shell{
      height:calc(100% - 54px);
      display:flex;
      padding:14px;
      gap:12px;
      min-height:0;
    }

    .editorCol{
      flex:1;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:10px;
      min-height:0;
    }

    /* Right sidebar (single content area; scrollable) */
    .sidePanel{
      width:340px;
      flex:0 0 auto;
      display:none;
      min-height:0;
    }
    .sidePanel.open{ display:flex; flex-direction:column; gap:10px; }
    .sidePanel .card{
      flex:1;
      min-height:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .compactModal{
      width:min(360px, 92vw);
    }
    .compactModal .modalBody{ padding:12px; overflow:auto; flex:1; }
    .modalFoot{
      padding:12px;
      border-top:1px solid var(--border);
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }

    /* Settings modal tabs */
    .settingsTabs{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .settingsTab{ border-radius:999px; }
    .settingsTab.on{
      background:rgba(255,255,255,.10);
      border-color:var(--border);
    }
    .settingsPane[hidden]{ display:none !important; }


    .sidePanel .cardPad{
      flex:1;
      min-height:0;
      overflow:auto; /* <-- FIX: sidebar scroll */
    }

    .card{
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:var(--panel);
      box-shadow:var(--shadow);
      overflow:hidden;
      min-height:0;
    }
    .cardPad{ padding:12px; }

    /* Formatting toolbar */
    .toolbarShell{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:var(--panel);
      box-shadow:var(--shadow);
    }
    .toolbarShell[hidden]{ display:none; }
    .toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
    .toolbar::-webkit-scrollbar{ height:0; }
    .toolbarActions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
    .toolGroup.advancedOpt{ display:none !important; }
    .toolbarShell.showAdvanced .toolGroup.advancedOpt{ display:flex !important; }
    .toolbarShell{ min-width:0; }
    .toolGroup{ flex:0 0 auto; }
    .toolGroup{
      display:flex; align-items:center; gap:6px;
      padding-right:10px; margin-right:4px;
      border-right:1px solid var(--border);
    }
    .toolGroup:last-child{ border-right:none; padding-right:0; margin-right:0; }
    .toolBtn{
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      border-radius:12px;
      padding:7px 9px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition:.15s ease;
      user-select:none;
    }
    .toolBtn:hover{ background:var(--hover); }
    .toolBtn svg{ width:18px;height:18px; opacity:.9; }
    .miniLabel{ font-size:11px; color:var(--muted); margin-right:6px; user-select:none; }

    select{
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      border-radius:12px;
      padding:6px 10px;
      height:34px;
      outline:none;
      font-size:13px;
    }
    .swatch{
      width:22px;height:22px;border-radius:9px;border:1px solid var(--border);cursor:pointer;
    }

    /* Editor */
    .editorPanel{
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
    }
    .editorWrap{
      flex:1;
      min-height:0;
      padding:14px;
      display:flex;
      overflow:auto; /* scroll */
    }
    .editor{
      flex:1;
      min-height:100%;
      padding:18px 18px;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:var(--panel2);
      outline:none;
      line-height:1.6;
      font-size:15px;
      white-space:pre-wrap;
      word-break:break-word;
      overflow:auto;
      font-family: var(--editorFont);
    }
    .editor:empty::before{ content:"Start Typing ..."; color:rgba(159,176,195,.55); }

    /* Bottom bar */
    .status{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 14px 12px;
      font-size:12px;
      border-top:1px solid var(--border);
      user-select:none;
      flex:0 0 auto;
      color:var(--muted);
    }
    .statusRight{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:950;
  opacity:.95;
  min-width:0;
}
#bottomStatus{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:48vw;
}
.typingDots{ display:inline-flex; align-items:center; gap:4px; color:var(--muted); }
.typingDots span{ width:4px;height:4px;border-radius:50%; background:currentColor; opacity:.25; animation: dotPulse 1s infinite; }
.typingDots span:nth-child(2){ animation-delay:.15s; }
.typingDots span:nth-child(3){ animation-delay:.30s; }
@keyframes dotPulse{ 0%,80%,100%{opacity:.25; transform:translateY(0);} 40%{opacity:.9; transform:translateY(-2px);} }

.modBox{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.modPill{
  height:22px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(110,168,254,.12);
  color:var(--text);
  font-weight:950;
  font-size:11px;
  letter-spacing:.02em;
}
.modPill.caps{
  background:rgba(250,204,21,.14);
  border-color:rgba(250,204,21,.25);
}
.statusLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
.keyBox{
  flex:0 0 auto;
  min-width:40px;
  height:22px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:950;
  font-size:12px;
  letter-spacing:.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.keyBox.special{
  background:rgba(250,204,21,.16);
  border-color:rgba(250,204,21,.30);
}

    /* Sidebar blocks */
    .section{
      border:1px solid var(--border);
      border-radius:14px;
      padding:12px;
      background:var(--panel2);
      margin-bottom:10px;
    }


/* Collapsible sidebar widgets */
.collSec{ padding:0; overflow:hidden; }
.secHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  cursor:pointer;
  user-select:none;
}
.secTitle{ font-weight:950; font-size:12px; }
.secToggle{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  width:30px; height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.secToggle:hover{ background:var(--hover); }
.secBody{ padding:0 12px 12px; }
.collSec.collapsed .secBody{ display:none; }
.collSec.collapsed .secToggle.collapseToggle svg{ transform:rotate(-90deg); }
.secToggle svg{ width:16px;height:16px; transition:.12s ease; }

/* Calendar reminders */
.calNav{ display:flex; gap:6px; align-items:center; }
.calMonth{ font-size:12px; color:var(--muted); margin-right:4px; user-select:none; display:block; line-height:1.1; }
.calMonthLine{ font-size:12px; font-weight:850; color:var(--muted); }

.calDay{ position:relative; cursor:pointer; }
.calDay.sel{ border-color:rgba(110,168,254,.45); background:rgba(110,168,254,.08); font-weight:950; }
.calDay.hasRem::after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(34,197,94,.9);
  bottom:4px; left:50%;
  transform:translateX(-50%);
  opacity:.9;
}

.remRow{ display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.remForm{ display:grid; gap:8px; margin-top:10px; }
.remForm input, .remForm textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  outline:none;
  font-size:13px;
}
.remForm textarea{ min-height:74px; resize:vertical; }

.remList{ margin-top:10px; display:grid; gap:8px; }
.remItem{
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.remItemTitle{ font-weight:950; }
.remItemMeta{ color:var(--muted); font-size:11px; margin-top:4px; }

    /* Calendar header layout (month/year under title) */
    .calHead{ align-items:flex-start; }
    .calHeadLeft{ display:flex; flex-direction:column; gap:4px; min-width:0; }

    
    /* Switch toggle (Settings) */
    .switch{ position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; }
    .switch input{ opacity:0; width:0; height:0; }
    .switch .slider{
      position:absolute; cursor:pointer; inset:0;
      background: var(--panel2);
      border:1px solid var(--border);
      transition: .2s;
      border-radius: 999px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
    }
    .switch .slider:before{
      position:absolute; content:"";
      height:20px; width:20px;
      left:3px; top:2px;
      background: var(--text);
      border-radius: 999px;
      transition: .2s;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    .switch input:checked + .slider{
      background: rgba(34,197,94,.22);
      border-color: rgba(34,197,94,.35);
    }
    [data-theme="light"] .switch input:checked + .slider{
      background: rgba(34,197,94,.16);
      border-color: rgba(34,197,94,.30);
    }
    .switch input:checked + .slider:before{ transform: translateX(18px); }


/* One-line toolbar buttons */
.toolMini{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:12px;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.toolMini:hover{ background:var(--hover); }
.toolMini svg{ width:18px;height:18px; opacity:.9; }

/* Small hint bubble */
.hintBubble{
  position:fixed;
  z-index:90;
  padding:10px 12px;
  border:1px solid var(--border);
  background:rgba(15, 23, 42, .92);
  backdrop-filter: blur(10px);
  border-radius:14px;
  box-shadow:0 18px 80px rgba(0,0,0,.45);
  font-size:12px;
  color:var(--text);
  max-width:340px;
}
[data-theme="light"] .hintBubble{ background:rgba(255,255,255,.92); }
    .row{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-top:8px;
    }
    .row:first-child{ margin-top:0; }
    .rowLabel{ font-size:11px; color:var(--muted); }
    .rowValue{ font-weight:950; color:var(--text); text-align:right; }

    /* Calendar */
    .calGrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; font-size:11px; color:var(--muted); user-select:none; }
    .calCell{ text-align:center; padding:6px 0; border-radius:10px; border:1px solid transparent; }
    .calDow{ opacity:.8; padding:2px 0 6px; }
    .calDay{ color:var(--text); border-color:var(--border); }
    .calDay.muted{ color:rgba(159,176,195,.55); }
    .calDay.today{ border-color:rgba(110,168,254,.35); background:rgba(110,168,254,.10); font-weight:950; }

    /* Minimal weather */
    .notice{ font-size:12px; color:var(--muted); line-height:1.45; }
    .inlineBtns{ display:flex; gap:8px; margin-top:10px; }
    .weatherMain{ font-weight:950; color:var(--text); margin-top:8px; }
    .weatherSub{ font-size:11px; color:var(--muted); margin-top:6px; }

    /* Metrics (base) */
    .metricRow{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:8px 0;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    [data-theme="light"] .metricRow{ border-bottom-color: rgba(15,22,33,.08); }
    .metricRow:last-child{ border-bottom:none; }
    .pill{
      background:rgba(255,255,255,.10);
      border:1px solid var(--border);
      border-radius:999px;
      padding:4px 10px;
      font-size:12px;
      font-weight:950;
      color:var(--text);
      white-space:nowrap;
    }

    /* Insights: smaller typography */
    #sideContent[data-mode="insights"]{ font-size:12px; }
    #sideContent[data-mode="insights"] .metricRow{ padding:6px 0; font-size:12px; }
    #sideContent[data-mode="insights"] .pill{ padding:3px 8px; font-size:11px; }

    /* Keywords */

    .subHead{
      margin-top:14px;
      font-weight:950;
      font-size:11px;
      color:var(--muted);
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .kwTabs{ display:flex; gap:6px; }
    .kwTab{
      border:1px solid var(--border);
      background:rgba(255,255,255,.06);
      color:var(--text);
      padding:4px 9px;
      border-radius:999px;
      font-weight:950;
      font-size:11px;
      cursor:pointer;
    }
    .kwTab.on{ background:rgba(255,255,255,.14); }
    .kwList{ margin-top:10px; }
    .kwRow{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:6px 0;
      border-bottom:1px dashed var(--border);
    }
    .kwRow:last-child{ border-bottom:none; }
    .kwWord{
      font-weight:850;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      max-width:64%;
    }



    /* Ruler */
    .ruler{
      height:18px;
      border-bottom:1px solid var(--border);
      background-image:
        repeating-linear-gradient(to right, var(--rulerMinor) 0, var(--rulerMinor) 1px, transparent 1px, transparent 10px),
        repeating-linear-gradient(to right, var(--rulerMajor) 0, var(--rulerMajor) 1px, transparent 1px, transparent 50px);
      opacity:.95;
      border-radius:16px 16px 0 0;
      margin:10px 10px 0 10px;
    }


    /* Modals */
    .modalWrap{
      position:fixed; inset:0;
      display:none;
      z-index:80;
    }
    .modalWrap.open{ display:block; }

    /* App Lock */
    .lockWrap{
      position:fixed; inset:0;
      display:none;
      z-index:200;
      align-items:center;
      justify-content:center;
    }
    .lockWrap.open{ display:flex; pointer-events:auto; }
body.appLocked .bar,
body.appLocked #shell{ pointer-events:none; user-select:none; }
body.appLocked .lockWrap{ pointer-events:auto; }
    .lockBack{
      position:absolute; inset:0;
      background:rgba(0,0,0,.55);
      backdrop-filter: blur(10px);
    }
    .lockCard{
      position:relative;
      width:min(520px, 92vw);
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:16px;
    }
    .lockTitle{ font-weight:1000; font-size:18px; letter-spacing:.2px; }
    .lockHint{ color:var(--muted); font-size:13px; margin-top:6px; line-height:1.35; }
    .lockRow{ display:flex; gap:10px; align-items:center; margin-top:14px; }
    .lockInput{ flex:1; }
    .lockError{ min-height:18px; margin-top:10px; color:var(--danger); font-size:13px; }
/* Lock screen: PIN dots + keypad */
.lockInputHidden{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
.pinDots{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
  user-select:none;
}
.pinDot{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  opacity:.95;
}

    .pinDot.hidden{ display:none; }
.pinDot.filled{
  background:var(--text);
  border-color:rgba(127,127,127,.30);
}
.lockKeypad{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.keyBtn{
  height:48px;
  border-radius:14px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
  user-select:none;
}
.keyBtn:hover{ background:var(--hover); }
.keyBtn:active{ transform: translateY(1px); }
.keyBtn.keyAction{
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.lockActions{ justify-content:center; }

    body.appLocked .shell{ filter: blur(2px); }



    /* Library (left sidebar) — restored base layout styles */
    .leftPanel{
      width:340px;
      flex:0 0 auto;
      display:none;
      min-height:0;
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .leftPanel.open{ display:flex; flex-direction:column; }
    .libResizeHandle{
      width:8px;
      flex:0 0 8px;
      display:none;
      align-self:stretch;
      cursor:ew-resize;
      position:relative;
      margin:-2px -4px;
      z-index:2;
    }
    .shell.libOpen .libResizeHandle{ display:block; }
    .libResizeHandle::after{
      content:"";
      position:absolute;
      top:14px;
      bottom:14px;
      left:3px;
      width:1px;
      border-radius:999px;
      background:var(--border);
      transition:.15s ease;
    }
    .libResizeHandle:hover::after,
    body.resizingLibrary .libResizeHandle::after{
      background:var(--ink2);
      opacity:.8;
    }
    body.resizingLibrary{ cursor:ew-resize; user-select:none; }
    .noteEmpty{
      margin:12px;
      padding:14px;
      border:1px dashed var(--border);
      border-radius:12px;
      color:var(--muted);
      font-size:12px;
      line-height:1.45;
      background:var(--panel2);
    }

    .drawerTop{
      padding:12px;
      border-bottom:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .drawerTitle{ font-weight:950; }
    .searchBox{
      padding:10px 12px;
      border-bottom:1px solid var(--border);
    }
    .searchInput{
      width:100%;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      background:var(--panel2);
      color:var(--text);
      outline:none;
      font-size:13px;
    }
    .searchInput::placeholder{ color:rgba(159,176,195,.65); }
    .noteList{
      flex:1;
      overflow:auto;
      padding:8px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .notePill{
      border:1px solid transparent;
      border-radius:14px;
      padding:10px;
      background:transparent;
      transition:.15s ease;
      cursor:pointer;
      position:relative;
      display:block;
    }
    .notePill:hover{ background:var(--hover); }
    .notePill.pinned{ padding-left:26px; }
    .notePill.pinned::before{
      content:"★";
      position:absolute;
      left:10px;
      top:10px;
      font-size:12px;
      color:var(--muted);
      opacity:.9;
      pointer-events:none;
    }
    .notePill.trashed{ opacity:.78; }
    .notePill.archived{ opacity:.92; }
    .notePill.active{
      background:rgba(110,168,254,.12);
      border-color:rgba(110,168,254,.25);
    }
    .noteLeft{ min-width:0; display:flex; flex-direction:column; gap:6px; flex:1; }
    .noteMeta{
      color:var(--muted);
      font-size:12px;
      white-space:normal;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    .drawerFooter{
      padding:12px;
      border-top:1px solid var(--border);
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .footText{ min-width:0; flex:1; }
    .footName{ font-weight:950; }
    .footDesc{ font-size:12px; color:var(--muted); margin-top:6px; line-height:1.35; }
    .footerLinks{
      display:flex;
      gap:8px;
      margin-top:10px;
      flex-wrap:wrap;
    }

    /* Settings/data field base styles */
    .fieldInput{
      width:100%;
      border:1px solid transparent;
      background:transparent;
      color:var(--text);
      font-weight:650;
      outline:none;
      padding:6px 8px;
      border-radius:10px;
      font-size:13px;
      letter-spacing:.1px;
    }
    .fieldInput:focus{
      background:var(--hover);
      border-color:var(--border);
    }
    .dataGroup{
      margin-top:12px;
      padding:10px;
      border:1px solid var(--border);
      border-radius:14px;
      background:rgba(255,255,255,.02);
    }
    .dataGroupTitle{
      font-weight:900;
      font-size:12px;
      letter-spacing:.2px;
      color:var(--muted);
      text-transform:uppercase;
    }
    .dataGroup.danger{
      background:rgba(248,113,113,.04);
      border-color:rgba(248,113,113,.18);
    }
    .prefHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .prefRow{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .prefLabel{ font-size:13px; color:var(--text); }
    .prefControl{ max-width:240px; width:240px; }
    .prefStack{ margin-top:10px; }
    .prefRow.dim{ opacity:.65; }

    .modalBack{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
    .modal{
      position:absolute;
      left:50%; top:50%;
      transform:translate(-50%, -50%);
      width:min(720px, 94vw);
      max-height: calc(100vh - 28px);
      display:flex;
      flex-direction:column;
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .modalTop{
      padding:12px 12px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-bottom:1px solid var(--border);
    }
    .modalBody{ padding:12px; overflow:auto; flex:1; }
    .chipRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .chip{
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      border-radius:999px;
      padding:7px 10px;
      cursor:pointer;
      font-weight:950;
      font-size:12px;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .chip:hover{ background:var(--hover); }
    .hint{ margin-top:10px; color:var(--muted); font-size:12px; line-height:1.45; }

/* Library filter pills: active state (theme-friendly) */
#libraryFilterRow .chip.on{
  background:rgba(110,168,254,.12);
  border-color:rgba(110,168,254,.25);
}
#libraryFilterRow .chip.on:hover{
  background:rgba(110,168,254,.16);
  border-color:rgba(110,168,254,.30);
}
#libraryFilterRow .chip:focus-visible{
  outline:2px solid rgba(110,168,254,.40);
  outline-offset:2px;
}

/* Show counts only on the selected library filter pill */
#libraryFilterRow .chip{
  font-weight: 500; /* not bold */
}

#libraryFilterRow .chip.on{
  font-weight: 900; /* bold */
}

/* Count is stored in data-count by JS */
#libraryFilterRow .chip::after{
  content: "";
}

#libraryFilterRow .chip.on::after{
  content: " (" attr(data-count) ")";
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Prefer theme ink2 when supported (more “theme friendly”) */
@supports (background: color-mix(in srgb, var(--ink2) 10%, transparent)) {
  #libraryFilterRow .chip.on{
    background: color-mix(in srgb, var(--ink2) 16%, transparent);
    border-color: color-mix(in srgb, var(--ink2) 36%, transparent);
  }
  #libraryFilterRow .chip.on:hover{
    background: color-mix(in srgb, var(--ink2) 20%, transparent);
    border-color: color-mix(in srgb, var(--ink2) 44%, transparent);
  }
  #libraryFilterRow .chip:focus-visible{
    outline-color: color-mix(in srgb, var(--ink2) 55%, transparent);
  }
}


    @media (max-width: 980px){
      .sidePanel.open{ display:none !important; }
      .shell.libOpen{ padding:0; }
      .shell.libOpen .editorCol{ display:none; }
      .shell.libOpen .sidePanel{ display:none !important; }
      .leftPanel{ width:100% !important; flex-basis:100% !important; border-radius:0; height:100%; }
      .libResizeHandle{ display:none !important; }
      .activeTitle{ max-width:55vw; }
    }
  
    .editor.readOnly{ opacity:.92; }


    /* --- Review fixes: modern hover actions + minimal pref tabs + meta length --- */
    .notePill{ padding:10px; }
    .notePill.pinned{ padding-left:26px; }

    .noteMeta{
      white-space:normal;
      overflow:hidden;
      text-overflow:clip;
      line-height:1.25;
      padding-right:0 !important;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
    }

    /* Preferences: minimal tabs */
    .prefTabs{
      margin-top:12px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .prefTab{
      border:1px solid transparent;
      background:transparent;
      color:var(--muted);
      border-radius:999px;
      padding:6px 10px;
      font-size:12px;
      cursor:pointer;
      transition:.15s ease;
      user-select:none;
    }
    .prefTab:hover{
      background:var(--hover);
      color:var(--text);
      border-color:var(--border);
    }
    .prefTab.on{
      background:rgba(110,168,254,.12);
      color:var(--text);
      border-color:rgba(110,168,254,.25);
    }

    .settingsPane[data-settings-pane="preferences"] .dataGroupTitle{ display:none; }
    .settingsPane[data-settings-pane="preferences"] .dataGroup{ margin-top:12px; }
/* Undo UX helpers */
.undoToast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:120;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(560px, calc(100vw - 28px));
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--panel);
  color:var(--text);
  box-shadow:var(--shadow);
  font-size:12px;
}
.undoToast .undoText{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.undoToast .undoAction{
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
}


/* Smart editor inline suggestions (math/conversions) */


/* Animated terminal-style logo only. UI icons are static for a calmer, faster interface. */
.logo.animatedLogo{ position:relative; overflow:visible; }
.logoTerminal{ width:18px; height:18px; }
.logoTerminal .termPrompt{ stroke-dasharray:9; stroke-dashoffset:9; animation: terminalPrompt 2.2s ease-in-out infinite; }
.logoTerminal .termCursor{ animation: terminalCursor 1s steps(1,end) infinite; }
@keyframes terminalPrompt{ 0%,18%{stroke-dashoffset:9;} 44%,100%{stroke-dashoffset:0;} }
@keyframes terminalCursor{ 0%,49%{opacity:1;} 50%,100%{opacity:.18;} }
@media (prefers-reduced-motion: reduce){
  .logoTerminal .termPrompt,.logoTerminal .termCursor{ animation:none !important; }
}

/* Support box */
.supportBox{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel2);
  padding:12px;
}
.supportCopy{ min-width:0; }
.supportTitle{ font-weight:950; margin-bottom:4px; }

/* 6.19.0 note details + selection */
.noteTitleText{
  font-weight:950;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.notePill.selected{
  border-color:rgba(125,211,252,.42);
  background:rgba(125,211,252,.10);
}
.notePill.selectMode{ padding-right:40px; }
.noteSelectMark{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-size:12px;
  font-weight:950;
}
.noteDetailsBox .secBody{ display:flex; flex-direction:column; gap:10px; }
.noteDetailTitle{ font-weight:950; font-size:14px; line-height:1.35; min-width:0; overflow-wrap:anywhere; }
.noteDetailEdit .fieldInput{ width:100%; }
.noteDetailGrid{ display:grid; gap:8px; }
.noteDetailMeta{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; border-top:1px solid var(--border); padding-top:8px; }
.noteDetailMeta span{ color:var(--muted); font-size:11px; }
.noteDetailMeta strong{ font-size:12px; text-align:right; font-weight:850; overflow-wrap:anywhere; }
.infoActionRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }

/* 6.19.1 active states + note actions polish */
.btn.toggleOn,
.btn.active,
.toolBtn.active,
.infoIconAction.active,
.settingsTab.on,
.prefTab.on{
  color:var(--ink2);
  border-color:rgba(125,211,252,.38) !important;
  background:rgba(125,211,252,.12) !important;
}
.btn.toggleOn svg,
.btn.active svg,
.toolBtn.active svg,
.infoIconAction.active svg{ opacity:1; }
.toolBtn[aria-pressed="true"]{
  color:var(--ink2);
  border-color:rgba(125,211,252,.38);
  background:rgba(125,211,252,.12);
}

.noteTitleInline{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:4px 6px;
  margin:-4px -6px 0;
  border-radius:10px;
  cursor:text;
  display:block;
}
.noteTitleInline:hover,
.noteTitleInline:focus-visible{
  border-color:var(--border);
  background:var(--hover);
  outline:none;
}
.noteDetailEdit{ margin-top:-2px; }
.iconOnlyActions{ gap:7px; }
.infoIconAction{
  width:34px;
  height:34px;
  padding:0;
  border-radius:12px;
}
.infoIconAction svg{ width:21px; height:21px; }
.infoIconAction.danger:hover{
  color:rgba(248,113,113,.98);
  border-color:rgba(248,113,113,.40) !important;
  background:rgba(248,113,113,.11) !important;
}

.notePill.active{
  background:rgba(125,211,252,.13);
  border-color:rgba(125,211,252,.34);
  box-shadow:inset 3px 0 0 rgba(125,211,252,.72);
}
.notePill.selected{
  border-color:rgba(125,211,252,.48);
  background:rgba(125,211,252,.14);
}
.notePill.selected .noteSelectMark{
  color:var(--ink2);
  border-color:rgba(125,211,252,.42);
  background:rgba(125,211,252,.16);
}
.calDay.sel,
.calDay.today{
  color:var(--ink2);
  border-color:rgba(125,211,252,.45) !important;
  background:rgba(125,211,252,.12) !important;
}
.calDay.hasRem::after{ background:var(--ink2); }

/* 6.19.3 UI repair */
.noteTitleInline{
  appearance:none;
  -webkit-appearance:none;
  background:transparent !important;
  border:0 !important;
  color:var(--text) !important;
  text-align:left !important;
  justify-content:flex-start;
  padding:2px 0 !important;
  margin:0 !important;
  border-radius:8px;
  box-shadow:none !important;
  font:inherit;
  font-weight:950;
  line-height:1.35;
}
.noteTitleInline:hover,
.noteTitleInline:focus-visible{
  background:var(--hover) !important;
  outline:none;
  text-decoration:underline;
  text-decoration-color:var(--border);
  text-underline-offset:3px;
}
.noteDetailEdit .fieldInput,
#infoRenameInput{
  background:transparent !important;
  color:var(--text) !important;
  border:0 !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0 !important;
  text-align:left !important;
  box-shadow:none !important;
  padding:4px 0 !important;
  font-weight:950;
}
#infoRenameInput:focus{
  outline:none;
  border-bottom-color:rgba(125,211,252,.55) !important;
}

.infoIconAction{
  width:38px;
  min-width:38px;
  max-width:38px;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width .16s ease, min-width .16s ease, background .15s ease, border-color .15s ease;
}
.infoIconAction .infoActionLabel{
  display:inline-block;
  max-width:0;
  overflow:hidden;
  opacity:0;
  margin-left:0;
  font-size:12px;
  font-weight:850;
  transition:max-width .16s ease, opacity .12s ease, margin-left .16s ease;
}
.infoIconAction:hover,
.infoIconAction:focus-visible{
  width:auto;
  min-width:38px;
  max-width:110px;
  padding-inline:9px;
}
.infoIconAction:hover .infoActionLabel,
.infoIconAction:focus-visible .infoActionLabel{
  max-width:70px;
  opacity:1;
  margin-left:7px;
}
.memorySection .secHead{ padding-bottom:6px; }
.memorySection .secBody{ padding-top:0; }
.supportBox{ align-items:flex-start; }
.drawerFooter .logo,
.drawerFooter .animatedLogo{ display:none !important; }

/* 6.19.4 hotfix */
.infoIconAction svg{ width:21px !important; height:21px !important; }
.infoIconAction .infoActionLabel{ font-size:12px; }


/* 6.20.0 memory polish */


/* 6.20.6 polish: readable actions, friendly lock screen, support actions */
.footName#footerVersion{
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1.2;
}

.lockWrap{
  padding:18px;
}
.lockWrap.open{
  display:flex !important;
}
.lockBack{
  background:rgba(3,7,18,.68);
  backdrop-filter: blur(14px) saturate(1.1);
}
.lockCard{
  width:min(440px, calc(100vw - 28px));
  border-radius:24px;
  padding:22px;
  text-align:center;
}
.lockTitle{
  font-size:22px;
  letter-spacing:.1px;
}
.lockHint{
  max-width:32rem;
  margin:8px auto 0;
  font-size:13px;
}
.pinDots{
  margin-top:18px;
}
.pinDot{
  width:15px;
  height:15px;
}
.lockKeypad{
  max-width:320px;
  margin:18px auto 0;
  gap:12px;
}
.keyBtn{
  height:54px;
  border-radius:18px;
  background:var(--panel2);
  font-size:18px;
}
.keyBtn:hover,
.keyBtn:focus-visible{
  outline:none;
  background:var(--hover);
  border-color:rgba(125,211,252,.35);
}
.lockActions{
  margin-top:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.lockActions .btn{
  min-height:40px;
  padding-inline:16px;
}
.lockError{
  margin-top:12px;
  text-align:center;
}

.infoActionRow.iconOnlyActions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.infoIconAction,
.infoIconAction:hover,
.infoIconAction:focus-visible{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:40px !important;
  height:40px !important;
  padding:0 12px !important;
  border-radius:14px !important;
  overflow:visible !important;
  white-space:nowrap !important;
  gap:8px !important;
  justify-content:center;
}
.infoIconAction svg{
  width:22px !important;
  height:22px !important;
  flex:0 0 22px;
}
.infoIconAction .infoActionLabel,
.infoIconAction:hover .infoActionLabel,
.infoIconAction:focus-visible .infoActionLabel{
  display:inline-block !important;
  max-width:none !important;
  opacity:1 !important;
  margin-left:0 !important;
  overflow:visible !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
.infoIconAction:focus-visible{
  outline:2px solid rgba(125,211,252,.45) !important;
  outline-offset:2px;
}
.infoIconAction.danger{
  color:var(--danger);
}

.supportBox{
  gap:12px;
}
.supportActions{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.supportBtn{
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  border-radius:14px;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
  transition:.15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.supportBtn:hover,
.supportBtn:focus-visible{
  outline:none;
  background:var(--hover);
  border-color:rgba(125,211,252,.38);
}
.supportSquare{
  width:48px;
  height:48px;
  flex:0 0 48px;
  padding:0;
}
.supportMain{
  height:48px;
  flex:1 1 auto;
  min-width:92px;
  padding:0 16px;
}

@media (max-width: 520px){
  .infoIconAction,
  .infoIconAction:hover,
  .infoIconAction:focus-visible{
    flex:1 1 calc(50% - 9px);
  }
  .infoIconAction .infoActionLabel{
    font-size:11px !important;
  }
}

/* 6.20.7 support buttons + note action grid */
.supportBox .supportCopy{
  width:100%;
}
.supportActions{
  margin-top:10px;
}
.supportBtn svg{
  width:21px;
  height:21px;
  flex:0 0 21px;
  opacity:.92;
}
.supportSquare{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  border-radius:14px !important;
}
.supportMain{
  height:44px !important;
  flex:2 1 140px !important;
  min-width:124px !important;
  border-radius:14px !important;
  font-size:13px !important;
  letter-spacing:.1px;
}
.supportLike svg{ color:rgba(99,102,241,.95); }
.supportLove svg{ color:rgba(244,114,182,.95); }

.infoActionGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:9px;
  margin-top:4px;
  width:100%;
}
.infoActionGrid--three .infoIconAction.wide{
  grid-column:1 / -1;
}
.infoActionGrid .infoIconAction,
.infoActionGrid .infoIconAction:hover,
.infoActionGrid .infoIconAction:focus-visible{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:50px !important;
  height:auto !important;
  padding:9px 10px !important;
  border-radius:15px !important;
  overflow:visible !important;
  white-space:normal !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-align:center !important;
  line-height:1.15 !important;
  transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease !important;
}
.infoActionGrid .infoIconAction:hover{
  transform:translateY(-1px);
}
.infoActionGrid .infoIconAction:active{
  transform:translateY(0);
}
.infoActionGrid .infoIconAction svg{
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
  opacity:1 !important;
}
.infoActionGrid .infoIconAction .infoActionLabel,
.infoActionGrid .infoIconAction:hover .infoActionLabel,
.infoActionGrid .infoIconAction:focus-visible .infoActionLabel{
  display:inline-block !important;
  max-width:100% !important;
  opacity:1 !important;
  margin-left:0 !important;
  overflow:visible !important;
  white-space:normal !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.15 !important;
}
.infoActionGrid .noteAction{
  --noteActionRgb:125,211,252;
  background:rgba(var(--noteActionRgb), .075) !important;
  border-color:rgba(var(--noteActionRgb), .20) !important;
  color:var(--text) !important;
}
.infoActionGrid .noteAction svg{
  color:rgba(var(--noteActionRgb), .95) !important;
}
.infoActionGrid .noteAction:hover,
.infoActionGrid .noteAction:focus-visible{
  background:rgba(var(--noteActionRgb), .115) !important;
  border-color:rgba(var(--noteActionRgb), .34) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.infoActionGrid .noteAction.active{
  background:rgba(var(--noteActionRgb), .14) !important;
  border-color:rgba(var(--noteActionRgb), .42) !important;
}

@media (max-width: 420px){
  .infoActionGrid{
    gap:8px;
  }
  .infoActionGrid .infoIconAction,
  .infoActionGrid .infoIconAction:hover,
  .infoActionGrid .infoIconAction:focus-visible{
    min-height:48px !important;
    padding:8px 7px !important;
    gap:6px !important;
  }
  .infoActionGrid .infoIconAction svg{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }
  .infoActionGrid .infoIconAction .infoActionLabel{
    font-size:11px !important;
  }
  .supportSquare{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }
  .supportMain{
    min-width:112px !important;
  }
}

/* 6.20.8 editor links */
.editor a.mj-link,
.editor a[href]{
  color:var(--accent2);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  cursor:text;
}
.editor a.mj-link:hover,
.editor a[href]:hover{
  color:var(--accent);
}

/* 6.20.9: visible, calm note action tones + familiar editor-link blue */
.infoActionGrid .noteAction.noteAction--download{ --noteActionRgb:34,197,94; }
.infoActionGrid .noteAction.noteAction--pin{ --noteActionRgb:99,102,241; }
.infoActionGrid .noteAction.noteAction--unpin{ --noteActionRgb:100,116,139; }
.infoActionGrid .noteAction.noteAction--archive{ --noteActionRgb:37,99,235; }
.infoActionGrid .noteAction.noteAction--restore{ --noteActionRgb:20,184,166; }
.infoActionGrid .noteAction.noteAction--trash{ --noteActionRgb:248,113,113; }
.infoActionGrid .noteAction.noteAction--delete{ --noteActionRgb:239,68,68; }
.infoActionGrid .noteAction{
  background:rgba(var(--noteActionRgb), .16) !important;
  border-color:rgba(var(--noteActionRgb), .42) !important;
}
.infoActionGrid .noteAction:hover,
.infoActionGrid .noteAction:focus-visible{
  background:rgba(var(--noteActionRgb), .22) !important;
  border-color:rgba(var(--noteActionRgb), .58) !important;
}
.infoActionGrid .noteAction.active{
  background:rgba(var(--noteActionRgb), .25) !important;
  border-color:rgba(var(--noteActionRgb), .64) !important;
}
.infoActionGrid .noteAction.noteAction--delete,
.infoActionGrid .noteAction.noteAction--trash{
  background:rgba(var(--noteActionRgb), .18) !important;
  border-color:rgba(var(--noteActionRgb), .48) !important;
}
.editor a.mj-link,
.editor a[href]{
  color:#2563eb !important;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  cursor:text;
}
[data-theme="dark"] .editor a.mj-link,
[data-theme="dark"] .editor a[href],
:root:not([data-theme="light"]) .editor a.mj-link,
:root:not([data-theme="light"]) .editor a[href]{
  color:#60a5fa !important;
}
.editor a.mj-link:hover,
.editor a[href]:hover{
  color:#1d4ed8 !important;
}
[data-theme="dark"] .editor a.mj-link:hover,
[data-theme="dark"] .editor a[href]:hover,
:root:not([data-theme="light"]) .editor a.mj-link:hover,
:root:not([data-theme="light"]) .editor a[href]:hover{
  color:#93c5fd !important;
}


/* 6.21.0 external smart typing bubble */
.assistBubble{
  position:relative;
  margin:8px 14px 0;
  display:flex;
  align-items:flex-start;
  gap:8px;
  max-width:min(680px, calc(100% - 28px));
  z-index:3;
}
.assistBubble[hidden]{ display:none !important; }
.assistBubbleMain{
  border:1px solid rgba(125,211,252,.32);
  background:rgba(125,211,252,.12);
  color:var(--text);
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  border-radius:14px;
  padding:9px 12px;
  font:inherit;
  font-size:13px;
  font-weight:850;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
  max-width:100%;
}
.assistBubbleMain:hover,
.assistBubbleMain:focus-visible{
  background:rgba(125,211,252,.18);
  border-color:rgba(125,211,252,.48);
  outline:none;
}
.assistBubbleHint{
  align-self:center;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  opacity:0;
  transform:translateY(2px);
  transition:opacity .16s ease, transform .16s ease;
  white-space:nowrap;
}
.assistBubble.showHint .assistBubbleHint{
  opacity:.82;
  transform:none;
}
@media (max-width: 640px){
  .assistBubble{ flex-direction:column; gap:4px; }
  .assistBubbleHint{ align-self:flex-start; white-space:normal; }
}

/* 6.21.1 note search, token colors, and internal note links */
.noteSearchWrap{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:min(460px, 42vw);
  max-width:520px;
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:999px;
  padding:4px 5px 4px 10px;
  box-shadow:var(--shadow);
}
.noteSearchWrap[hidden]{ display:none !important; }
.noteSearchInput{
  flex:1 1 150px;
  min-width:120px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:800;
}
.noteSearchInput::placeholder{ color:var(--muted); }
.noteSearchCount{
  color:var(--muted);
  font-size:11px;
  font-weight:950;
  min-width:34px;
  text-align:center;
}
mark.__noteFind{
  background:rgba(250,204,21,.42);
  color:inherit;
  border-radius:5px;
  padding:0 2px;
}
mark.__noteFind.current{
  background:rgba(34,197,94,.42);
  box-shadow:0 0 0 2px rgba(34,197,94,.22);
}

.editor .mj-token{
  border-radius:7px;
  padding:0 3px;
  font-weight:850;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.editor .mj-tag.tokenTone0, .insightChip.tagChip.tokenTone0{ --tok:14,165,233; }
.editor .mj-tag.tokenTone1, .insightChip.tagChip.tokenTone1{ --tok:34,197,94; }
.editor .mj-tag.tokenTone2, .insightChip.tagChip.tokenTone2{ --tok:245,158,11; }
.editor .mj-tag.tokenTone3, .insightChip.tagChip.tokenTone3{ --tok:20,184,166; }
.editor .mj-tag.tokenTone4, .insightChip.tagChip.tokenTone4{ --tok:99,102,241; }
.editor .mj-tag.tokenTone5, .insightChip.tagChip.tokenTone5{ --tok:244,114,182; }
.editor .mj-mention.tokenTone0, .insightChip.mentionChip.tokenTone0{ --tok:168,85,247; }
.editor .mj-mention.tokenTone1, .insightChip.mentionChip.tokenTone1{ --tok:236,72,153; }
.editor .mj-mention.tokenTone2, .insightChip.mentionChip.tokenTone2{ --tok:249,115,22; }
.editor .mj-mention.tokenTone3, .insightChip.mentionChip.tokenTone3{ --tok:59,130,246; }
.editor .mj-mention.tokenTone4, .insightChip.mentionChip.tokenTone4{ --tok:16,185,129; }
.editor .mj-mention.tokenTone5, .insightChip.mentionChip.tokenTone5{ --tok:148,163,184; }
.editor .mj-token,
.insightChip{
  color:rgb(var(--tok));
  background:rgba(var(--tok), .12);
  border:1px solid rgba(var(--tok), .22);
}
.editor .mj-note-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:1px 7px;
  border-radius:999px;
  color:rgb(124,58,237);
  background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.28);
  font-weight:900;
  cursor:text;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.editor .mj-note-link:hover{
  background:rgba(124,58,237,.18);
  border-color:rgba(124,58,237,.42);
}
.insightChipRow{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  line-height:1.8;
}
button.insightChip{
  cursor:pointer;
  appearance:none;
  font:inherit;
  font-size:11px !important;
  font-weight:950;
  line-height:1.2;
}
button.insightChip:hover,
button.insightChip:focus-visible{
  background:rgba(var(--tok), .20);
  border-color:rgba(var(--tok), .42);
  outline:none;
}
.miniIconBtn{
  width:32px;
  height:32px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  cursor:pointer;
}
.miniIconBtn svg{ width:16px; height:16px; }
.miniIconBtn:hover,
.miniIconBtn:focus-visible{
  color:var(--text);
  border-color:rgba(125,211,252,.34);
  background:rgba(125,211,252,.10);
  outline:none;
}
.noteLinkCopyBtn{ flex:0 0 auto; }
@media (max-width: 760px){
  .rightBar{ flex-wrap:wrap; }
  .noteSearchWrap{ order:10; flex-basis:100%; max-width:none; min-width:0; }
}


/* Feedback polish: hierarchy, assist placement, memory compactness */
body{ font-size:var(--fs-base); }
.editorPanel{ position:relative; }
.editor{ font-size:var(--fs-editor); }
.secTitle,
.dataGroupTitle,
.drawerTitle{ font-size:var(--fs-panel-title); }
.rowLabel,
.noteDetailMeta span,
.hint,
.notice{ font-size:var(--fs-sm); }
.status,
.statusRight,
#bottomStatus,
#counter{ font-size:var(--fs-sm); }
.btn,
.toolBtn,
.toolMini,
.prefControl,
.fieldInput{ font-size:var(--fs-sm); }
.metricRow{ font-size:var(--fs-sm); }
.pill{ font-size:var(--fs-sm); }
.lockTitle{ font-size:var(--fs-modal-title); }

.assistBubble{
  position:absolute;
  margin:0;
  left:18px;
  top:72px;
  max-width:min(420px, calc(100% - 28px));
  z-index:35;
  pointer-events:auto;
}
.assistBubble.assistBubble--fallback{
  left:auto;
  right:16px;
  top:auto;
  bottom:48px;
}
.assistBubbleMain{
  background:rgba(14,165,233,.13);
  border-color:rgba(14,165,233,.34);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.assistBubbleHint{ display:none !important; }

.memorySection.compactMemory{
  padding:9px 10px;
  margin-bottom:10px;
}
.memoryUsageLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:20px;
  font-size:var(--fs-sm);
  line-height:1.25;
}
.memoryUsageLine span{
  color:var(--muted);
  white-space:nowrap;
}
.memoryUsageLine strong{
  font-size:var(--fs-sm);
  font-weight:950;
  color:var(--text);
  white-space:nowrap;
}

.infoActionGrid .noteAction.noteAction--archive{ --noteActionRgb:37,99,235; }
.infoActionGrid .noteAction.noteAction--pin{ --noteActionRgb:124,58,237; }
.infoActionGrid .noteAction.noteAction--unpin{ --noteActionRgb:71,85,105; }

.editor .mj-note-link{
  gap:0;
  padding:2px 8px;
}
.editor .mj-note-link::before{ content:none !important; }

@media (max-width: 640px){
  .assistBubble,
  .assistBubble.assistBubble--fallback{
    left:12px;
    right:12px;
    top:auto;
    bottom:48px;
    max-width:none;
  }
}

/* 6.22.0 safety, smooth editor, and support polish */
.rightBar{ position:relative; }
#tocBtn[hidden]{ display:none !important; }
#tocBtn.toggleOn{
  color:var(--text);
  border-color:rgba(59,130,246,.34);
  background:rgba(59,130,246,.10);
}
.tocPanel{
  position:absolute;
  top:44px;
  right:44px;
  width:min(360px, calc(100vw - 24px));
  max-height:min(440px, 58vh);
  border:1px solid var(--border);
  border-radius:18px;
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow:0 22px 70px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
  z-index:70;
  overflow:hidden;
}
.tocPanel[hidden]{ display:none !important; }
.tocPanelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 8px 14px;
  border-bottom:1px solid var(--border);
  user-select:none;
}
.tocPanelHead strong{ font-size:var(--fs-panel-title); letter-spacing:.01em; }
.tocPanelClose{
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--muted);
  cursor:pointer;
  font-size:17px;
  line-height:1;
}
.tocPanelClose:hover{ color:var(--text); border-color:rgba(239,68,68,.34); }
.tocPanelList{
  max-height:calc(min(440px, 58vh) - 48px);
  overflow:auto;
  padding:8px;
}
.tocItem{
  width:100%;
  display:block;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  border-radius:12px;
  padding:7px 9px;
  cursor:pointer;
  line-height:1.28;
  white-space:normal;
  overflow-wrap:anywhere;
}
.tocItem:hover,
.tocItem:focus-visible{ background:rgba(59,130,246,.10); outline:none; }
.tocLevel1{ font-size:13px; font-weight:950; }
.tocLevel2{ font-size:12.5px; font-weight:850; }
.tocLevel3{ font-size:12px; font-weight:780; color:color-mix(in srgb, var(--text) 90%, var(--muted)); }
.tocLevel4,
.tocLevel5,
.tocLevel6{ font-size:11.5px; font-weight:720; color:color-mix(in srgb, var(--text) 82%, var(--muted)); }
.supportBox .supportTitle{ font-size:15px; }
.supportBox .hint{ line-height:1.45; }
@media (max-width:760px){
  .tocPanel{ top:92px; right:0; left:0; width:auto; max-height:52vh; }
}


/* MonoJot v6.22 safety + writing comfort */
.storageSafetyWarning{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:120;
  width:min(720px, calc(100vw - 28px));
  border:1px solid rgba(250,204,21,.35);
  background:var(--panel);
  color:var(--text);
  box-shadow:var(--shadow);
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.storageSafetyWarning .storageSafetyCopy{ min-width:0; }
.storageSafetyWarning strong{ display:block; font-size:12px; margin-bottom:3px; }
.storageSafetyWarning .hint{ margin:0; }
.storageSafetyWarning .storageSafetyActions{ display:flex; gap:8px; flex:0 0 auto; }

.editor.isEmpty::before{
  content:attr(data-placeholder);
  color:var(--muted);
  opacity:.68;
  pointer-events:none;
}

.editorPanel{ transition:max-width .16s ease, margin .16s ease; }
.editorCol[data-writing-width="comfortable"] .editorPanel{
  width:100%;
  max-width:860px;
  align-self:center;
}
.editorCol[data-writing-width="wide"] .editorPanel{
  width:100%;
  max-width:1080px;
  align-self:center;
}
.editorCol[data-writing-width="full"] .editorPanel{
  max-width:none;
  align-self:stretch;
}

.dataSafetyLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-top:1px solid var(--border);
}
.dataSafetyLine:first-child{ border-top:0; padding-top:0; }
.dataSafetyLine span{ color:var(--muted); }
.dataSafetyLine strong{ text-align:right; }