/* =========================================================================
   NoteVault — design system (v2, professional)
   Light-first, refined neutrals, indigo accent, elegant dark mode.
   ========================================================================= */

:root{
  /* accent */
  --accent:#7c3aed; --accent-hover:#6d28d9; --accent-press:#5b21b6;
  --accent-soft:#f1ebfe; --accent-text:#7c3aed;
  /* surfaces */
  --bg:#ffffff;
  --bg-sidebar:#f8f8fa;
  --bg-list:#fbfbfc;
  --surface:#ffffff;
  --surface-2:#f4f4f6;
  /* borders */
  --border:#ebebef;
  --border-strong:#dededf;
  /* text */
  --text:#1a1a1e;
  --text-2:#56565f;
  --text-3:#8c8c96;
  --text-inv:#ffffff;
  /* status */
  --star:#f5a524;
  --danger:#e5484d; --danger-soft:#fdecec;
  --warn-soft:#fff6e0; --warn-text:#9a6b00;
  /* effects */
  --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:18px;
  --sh-sm:0 1px 2px rgba(18,18,23,.06);
  --sh:0 2px 8px rgba(18,18,23,.08);
  --sh-md:0 8px 24px rgba(18,18,23,.12);
  --sh-lg:0 18px 48px rgba(18,18,23,.18);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

html[data-theme="dark"]{
  --accent:#a78bfa; --accent-hover:#b9a4fc; --accent-press:#9d7bf7;
  --accent-soft:#2a2342; --accent-text:#c4b5fd;
  --bg:#16171c;
  --bg-sidebar:#101116;
  --bg-list:#131419;
  --surface:#1c1d24;
  --surface-2:#22242c;
  --border:#2a2c34;
  --border-strong:#363842;
  --text:#e7e8ec;
  --text-2:#b0b2bb;
  --text-3:#7c7e89;
  --danger:#ff6166; --danger-soft:#3a1f22;
  --warn-soft:#332a14; --warn-text:#e8c06a;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh:0 2px 10px rgba(0,0,0,.45);
  --sh-md:0 10px 28px rgba(0,0,0,.5);
  --sh-lg:0 20px 50px rgba(0,0,0,.6);
}

/* critical: make the hidden attribute always win */
[hidden]{display:none !important;}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit}
::selection{background:var(--accent-soft)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(140,140,150,.32);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(140,140,150,.5);background-clip:padding-box}

/* ========================= buttons ========================= */
.btn-primary{background:var(--accent);color:#fff;border:none;border-radius:var(--r);
  padding:11px 18px;font-size:14.5px;font-weight:600;cursor:pointer;
  box-shadow:var(--sh-sm);transition:background .15s,transform .05s}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{background:var(--accent-press);transform:translateY(1px)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:var(--r-sm)}
.btn-ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2);
  cursor:pointer;font-weight:600;border-radius:var(--r-sm);padding:8px 14px;font-size:13px;transition:background .15s}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}

/* ========================= auth ========================= */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background:
    radial-gradient(1200px 600px at 12% -10%, #9b6bff33, transparent),
    radial-gradient(1000px 500px at 100% 110%, #7c3aed44, transparent),
    linear-gradient(135deg,#7c3aed 0%,#4c1d95 100%);}
/* brand logo image */
.brand-logo{display:block;max-width:200px;width:60%;height:auto;margin:0 auto 18px}
.brand-img{width:30px;height:30px;object-fit:contain;border-radius:8px;flex-shrink:0}
.share-top .brand-img{width:26px;height:26px}
.auth-card{background:var(--surface);width:100%;max-width:404px;border-radius:var(--r-xl);
  padding:40px 36px;box-shadow:var(--sh-lg)}
.auth-brand{display:flex;align-items:center;gap:9px;justify-content:center;margin-bottom:26px}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:var(--accent);color:#fff;border-radius:10px;font-size:18px;box-shadow:var(--sh-sm)}
.brand-name{font-size:21px;font-weight:600;letter-spacing:-.01em}
.brand-name b{color:var(--accent-text);font-weight:800}
.auth-title{font-size:23px;margin:0 0 5px;text-align:center;letter-spacing:-.02em}
.auth-sub{color:var(--text-3);text-align:center;margin:0 0 26px;font-size:14px}
.auth-form label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:15px}
.auth-form input{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1.5px solid var(--border-strong);
  border-radius:var(--r);font-size:15px;font-family:inherit;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
.auth-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-form .btn-primary{margin-top:8px;padding:12px}
.auth-error{background:var(--danger-soft);color:var(--danger);padding:11px 14px;border-radius:var(--r);
  font-size:13.5px;margin-bottom:18px}
.auth-switch{text-align:center;margin:22px 0 0;font-size:14px;color:var(--text-3)}
.auth-switch a{color:var(--accent-text);font-weight:600;text-decoration:none}
.auth-demo{margin-top:20px;text-align:center;font-size:12.5px;color:var(--text-3);
  background:var(--surface-2);padding:10px;border-radius:var(--r-sm)}

/* ========================= app layout ========================= */
body.app{display:grid;grid-template-columns:264px 348px 1fr;height:100vh;overflow:hidden}

/* ---- sidebar ---- */
.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:16px 0 0;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:9px;padding:2px 18px 18px}
.side-brand .brand-name{font-size:18px}
.new-note-btn{margin:0 14px 16px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);
  padding:12px;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:var(--sh-sm);
  transition:background .15s,transform .05s;display:flex;align-items:center;justify-content:center;gap:6px}
.new-note-btn:hover{background:var(--accent-hover)}
.new-note-btn:active{transform:translateY(1px)}
.side-nav{padding:0 10px 4px;display:flex;flex-direction:column;gap:1px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
  color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
.nav-item .ni-ico{font-size:15px;width:18px;text-align:center;opacity:.95}
.nav-item .ni-count{margin-left:auto;font-size:11.5px;color:var(--text-3);
  background:rgba(140,140,150,.14);padding:1px 8px;border-radius:20px;font-weight:600;min-width:22px;text-align:center}
.nav-item:hover{background:rgba(140,140,150,.1);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-text)}
.nav-item.active .ni-count{background:var(--accent);color:#fff}
.side-section{padding:14px 10px 0}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;
  font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--text-3);text-transform:uppercase}
.side-add{background:none;border:none;color:var(--text-3);font-size:17px;cursor:pointer;line-height:1;
  padding:2px 6px;border-radius:6px;transition:background .12s,color .12s}
.side-add:hover{color:var(--accent-text);background:var(--accent-soft)}
.side-list{display:flex;flex-direction:column;gap:1px}
.side-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--text-2);cursor:pointer;transition:background .12s,color .12s}
.side-row:hover{background:rgba(140,140,150,.1);color:var(--text)}
.side-row.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.side-row .sr-ico{font-size:14px;width:16px;text-align:center;opacity:.9}
.side-row .sr-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-row .sr-count{font-size:11.5px;color:var(--text-3)}
.side-row .sr-menu{display:none;background:none;border:none;color:var(--text-3);cursor:pointer;
  font-size:15px;padding:0 4px;border-radius:5px}
.side-row .sr-menu:hover{color:var(--text)}
.side-row:hover .sr-menu{display:block}
.side-row:hover .sr-count{display:none}
.side-empty{padding:6px 12px;color:var(--text-3);font-size:12.5px}
.side-footer{margin-top:auto;display:flex;align-items:center;gap:6px;padding:12px 14px;
  border-top:1px solid var(--border)}
.user-chip{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.avatar{width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.user-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-foot{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-3);text-decoration:none;font-size:16px;border:none;background:none;cursor:pointer;border-radius:8px;transition:background .12s,color .12s}
.icon-foot:hover{color:var(--text);background:rgba(140,140,150,.14)}

/* ---- note list ---- */
.notelist{background:var(--bg-list);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden}
.list-head{padding:16px 16px 10px;border-bottom:1px solid var(--border)}
.search-wrap{position:relative;margin-bottom:14px}
.search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.5;pointer-events:none}
#searchInput{width:100%;padding:10px 12px 10px 34px;border:1px solid var(--border-strong);border-radius:var(--r);
  font-size:14px;font-family:inherit;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
#searchInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.list-head-row{display:flex;align-items:center;justify-content:space-between}
.list-title{font-size:14px;margin:0;font-weight:700;letter-spacing:-.01em}
.list-scroll{flex:1;overflow-y:auto;padding:8px}
.note-card{position:relative;display:flex;gap:12px;background:var(--surface);border:1px solid transparent;border-radius:var(--r);
  padding:13px 15px;margin-bottom:5px;cursor:pointer;transition:box-shadow .12s,background .12s,border-color .12s}
.nc-main{flex:1;min-width:0}
.note-card:hover{box-shadow:var(--sh-sm);border-color:var(--border)}
.note-card.active{background:var(--accent-soft);border-color:transparent}
.note-card.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0}
.nc-title{font-size:14.5px;font-weight:600;margin:0 0 3px;display:flex;align-items:center;gap:6px;letter-spacing:-.01em}
.nc-title .star{color:var(--star);font-size:12px}
.nc-title span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-title em{color:var(--text-3);font-style:normal}
.nc-snippet{font-size:13px;color:var(--text-3);line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-foot{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--text-3)}
.nc-tags{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nc-tag{background:var(--surface-2);color:var(--text-2);padding:1px 8px;border-radius:20px;font-size:11px;font-weight:500}
.nc-reminder{display:inline-flex;align-items:center;gap:3px;color:var(--accent-text);font-weight:600}
.nc-reminder.due{color:var(--danger)}
.list-empty{text-align:center;color:var(--text-3);padding:48px 22px;font-size:14px;line-height:1.6}

/* ---- editor ---- */
.editor-pane{background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
.empty-state{margin:auto;text-align:center;color:var(--text-3);max-width:300px}
.empty-ico{font-size:50px;margin-bottom:14px;opacity:.85}
.empty-state p{margin:0 0 20px;font-size:15px}
.editor{display:flex;flex-direction:column;height:100%}
.editor-topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;border-bottom:1px solid var(--border)}
.meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.meta-notebook{font-size:12.5px;color:var(--accent-text);font-weight:600}
.meta-updated{font-size:11.5px;color:var(--text-3)}
.editor-actions{display:flex;align-items:center;gap:2px}
.icon-btn{background:none;border:none;font-size:15.5px;cursor:pointer;padding:8px;border-radius:var(--r-sm);
  color:var(--text-2);line-height:1;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn.on{background:var(--accent-soft);color:var(--accent-text)}
.icon-btn.fav-on{color:var(--star)}
.icon-btn.danger{color:var(--danger);width:auto;padding:8px 12px;font-size:13px;font-weight:600;gap:4px}
.icon-btn.danger:hover{background:var(--danger-soft)}
#restoreBtn{width:auto;padding:8px 12px;font-size:13px;font-weight:600}

.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:42px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-md);min-width:200px;padding:6px;z-index:30;display:none}
.dropdown-menu.open{display:block}
.dropdown-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;
  padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;cursor:pointer;color:var(--text)}
.dropdown-menu button:hover{background:var(--surface-2)}
.dropdown-menu button.cur{color:var(--accent-text);font-weight:600}

/* centered editor column for readability */
.reminder-bar,.tags-row,.content-area,.attachments,.save-status{
  width:100%;max-width:840px;margin-left:auto;margin-right:auto}
.title-row{display:flex;align-items:center;gap:14px;max-width:840px;margin:0 auto;padding:18px 28px 0}
.title-input{flex:1;min-width:0;border:none;font-size:30px;font-weight:800;padding:6px 0;font-family:inherit;
  color:var(--text);background:none;letter-spacing:-.025em}
.title-input:focus{outline:none}
.title-input::placeholder{color:var(--text-3);opacity:.5}
/* note photo / avatar — circular note image */
.cover-wrap{position:relative;flex-shrink:0}
.note-cover{width:92px;height:92px;border-radius:50%;border:3px solid var(--surface);background-size:cover;background-position:center;
  box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:36px;padding:0;
  transition:transform .12s}
.note-cover:hover{transform:scale(1.04)}
.note-cover.ava-initial{box-shadow:var(--sh-sm)}
.cover-x{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:2px solid var(--bg);
  background:var(--danger);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
body.zen .title-row{padding-top:10vh}
/* list avatar */
.note-ava{width:42px;height:42px;border-radius:50%;flex-shrink:0;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px}

.reminder-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;margin-top:4px;
  background:var(--accent-soft);border-radius:var(--r);font-size:13px;color:var(--accent-text);font-weight:500}
.reminder-bar.due{background:var(--danger-soft);color:var(--danger)}
.reminder-bar .rb-clear{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;font-weight:700;font-size:14px}

.tags-row{display:flex;align-items:center;gap:7px;padding:8px 28px 4px;flex-wrap:wrap}
.tags-ico{font-size:12px;opacity:.5}
.tag-chips{display:flex;gap:5px;flex-wrap:wrap}
.tag-chip{background:var(--accent-soft);color:var(--accent-text);padding:3px 9px;border-radius:20px;
  font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px}
.tag-chip .x{cursor:pointer;font-weight:700;opacity:.55}
.tag-chip .x:hover{opacity:1}
.tag-input{border:none;font-size:13px;font-family:inherit;padding:3px;min-width:90px;background:none;color:var(--text)}
.tag-input:focus{outline:none}

.toolbar{display:flex;align-items:center;gap:1px;flex-wrap:wrap;padding:8px 24px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-list);position:sticky;top:0;z-index:5}
.toolbar button{background:none;border:none;min-width:32px;height:32px;border-radius:var(--r-sm);cursor:pointer;
  font-size:13.5px;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;padding:0 7px;transition:background .12s,color .12s}
.toolbar button:hover{background:var(--surface-2);color:var(--text)}
.toolbar button.on{background:var(--accent-soft);color:var(--accent-text)}
.tb-sep{width:1px;height:18px;background:var(--border-strong);margin:0 6px}
.tb-color{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:32px;
  border-radius:var(--r-sm);cursor:pointer;font-weight:700;font-size:14px;position:relative;color:var(--text-2)}
.tb-color:hover{background:var(--surface-2)}
.tb-color input{position:absolute;inset:0;opacity:0;cursor:pointer}

.recorder{display:flex;align-items:center;gap:12px;padding:11px 28px;background:var(--danger-soft);
  border-bottom:1px solid var(--border)}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--danger);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.rec-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--danger)}

.content-area{flex:1;overflow-y:auto;padding:20px 28px 60px;font-size:16px;line-height:1.7;color:var(--text)}
.content-area:focus{outline:none}
.content-area:empty::before{content:"Start writing…";color:var(--text-3);opacity:.5}
.content-area h1{font-size:25px;font-weight:800;margin:.7em 0 .3em;letter-spacing:-.02em}
.content-area h2{font-size:20px;font-weight:700;margin:.7em 0 .3em;letter-spacing:-.01em}
.content-area p{margin:.45em 0}
.content-area ul,.content-area ol{padding-left:26px;margin:.45em 0}
.content-area li{margin:.2em 0}
.content-area blockquote{border-left:3px solid var(--accent);margin:.7em 0;padding:6px 0 6px 18px;color:var(--text-2)}
.content-area pre{background:var(--surface-2);border-radius:var(--r);padding:14px 16px;font-family:var(--mono);
  font-size:13.5px;overflow-x:auto;white-space:pre-wrap}
.content-area code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:5px}
.content-area pre code{background:none;padding:0}
.content-area img{max-width:100%;border-radius:var(--r);margin:10px 0;box-shadow:var(--sh-sm)}
.content-area a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.content-area .chk{display:flex;align-items:flex-start;gap:9px;margin:.3em 0}
.content-area .chk input{margin-top:5px;width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}

.attachments{padding:6px 28px 18px;display:flex;flex-direction:column;gap:8px}
.att{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:10px 13px}
.att-ico{font-size:20px}
.att-info{flex:1;min-width:0}
.att-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-meta{font-size:11.5px;color:var(--text-3)}
.att audio{height:34px;max-width:230px}
.att .att-del{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:15px}
.att .att-del:hover{color:var(--danger)}
.att a.att-dl{color:var(--accent-text);text-decoration:none;font-size:13px;font-weight:600}
.save-status{padding:0 28px 16px;font-size:11.5px;color:var(--text-3);height:14px}

/* ========================= popovers ========================= */
.popover{position:absolute;right:0;top:42px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);width:308px;padding:16px;z-index:40;display:none}
.popover.open{display:block}
.popover h4{margin:0 0 12px;font-size:13.5px;font-weight:700;color:var(--text)}
.popover .pop-row{display:flex;gap:7px}
.popover input[type=text],.popover input[type=datetime-local]{flex:1;padding:9px 11px;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);font-size:13px;font-family:inherit;background:var(--surface);color:var(--text)}
.popover input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.popover .pop-hint{font-size:11.5px;color:var(--text-3);margin:10px 0 0;line-height:1.5}
.popover .pop-link{display:flex;gap:7px;margin-top:10px}
.popover .pop-off{background:none;border:none;color:var(--danger);font-size:12.5px;cursor:pointer;
  margin-top:12px;padding:0;font-weight:600}

/* ========================= context menu ========================= */
.ctx-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh-md);padding:6px;min-width:170px;z-index:200}
.ctx-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;
  padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;cursor:pointer;color:var(--text)}
.ctx-menu button:hover{background:var(--surface-2)}
.ctx-menu button.danger{color:var(--danger)}
.ctx-menu button.danger:hover{background:var(--danger-soft)}

/* ========================= modal ========================= */
.modal-backdrop{position:fixed;inset:0;background:rgba(18,18,23,.42);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:400px;padding:24px}
.modal h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.modal p{margin:0 0 16px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.modal input{width:100%;padding:11px 13px;border:1.5px solid var(--border-strong);border-radius:var(--r);
  font-size:14.5px;font-family:inherit;background:var(--surface);color:var(--text);margin-bottom:18px}
.modal input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.modal-actions{display:flex;justify-content:flex-end;gap:9px}

/* ========================= offline / sync pill ========================= */
.net-pill{position:fixed;left:16px;bottom:16px;z-index:130;padding:7px 13px;border-radius:20px;
  font-size:12.5px;font-weight:600;box-shadow:var(--sh);color:#fff}
.net-pill.off{background:#6b7280}
.net-pill.sync{background:var(--accent)}

/* ========================= toast ========================= */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--text);color:var(--bg);padding:12px 22px;border-radius:var(--r);font-size:13.5px;font-weight:500;
  box-shadow:var(--sh-md);z-index:400;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ========================= calendar ========================= */
.calendar-pane{position:fixed;left:264px;top:0;right:0;bottom:0;background:var(--bg);
  z-index:25;display:flex;flex-direction:column}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--border)}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-title{font-size:20px;margin:0;min-width:200px;text-align:center;font-weight:800;letter-spacing:-.02em}
.cal-nav .icon-btn{font-size:22px}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:14px 28px 0;gap:8px}
.cal-weekdays span{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--text-3);padding-left:4px;text-transform:uppercase}
.cal-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:8px;padding:8px 28px 28px;overflow-y:auto}
.cal-cell{border:1px solid var(--border);border-radius:var(--r);padding:7px 8px;min-height:96px;
  display:flex;flex-direction:column;gap:3px;cursor:pointer;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.cal-cell:hover{border-color:var(--accent);box-shadow:var(--sh-sm)}
.cal-cell.other{opacity:.45}
.cal-cell.today{border-color:var(--accent)}
.cal-daynum{font-size:12.5px;font-weight:600;color:var(--text-2);align-self:flex-start}
.cal-cell.today .cal-daynum{background:var(--accent);color:#fff;border-radius:50%;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center}
.cal-ev{font-size:11px;padding:3px 7px;border-radius:6px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;background:var(--accent-soft);color:var(--accent-text);font-weight:500}
.cal-ev.note{background:var(--warn-soft);color:var(--warn-text)}
.cal-ev.done{text-decoration:line-through;opacity:.5}
.cal-more{font-size:10.5px;color:var(--text-3);padding-left:4px}
.cal-dots{display:none}   /* desktop uses chips; phone uses dots */

/* day drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(18,18,23,.38);z-index:60;backdrop-filter:blur(2px)}
.day-drawer{position:fixed;right:0;top:0;bottom:0;width:380px;max-width:92vw;background:var(--bg);
  z-index:61;box-shadow:var(--sh-lg);display:flex;flex-direction:column}
.dd-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.dd-head h3{margin:0;font-size:16px;letter-spacing:-.01em}
.dd-add{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:9px}
.dd-add input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-size:14px;font-family:inherit;background:var(--surface);color:var(--text)}
.dd-add input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dd-add-row{display:flex;gap:9px}
.dd-add-row input[type=time]{flex:1;padding:9px 11px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:13.5px;background:var(--surface);color:var(--text)}
.dd-list{flex:1;overflow-y:auto;padding:12px 16px}
.dd-empty{text-align:center;color:var(--text-3);font-size:13.5px;padding:30px;line-height:1.7}
.dd-item{display:flex;align-items:flex-start;gap:11px;padding:11px;border-radius:var(--r);margin-bottom:4px}
.dd-item:hover{background:var(--surface-2)}
.dd-item input[type=checkbox]{margin-top:2px;width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.dd-item.note-item{background:var(--warn-soft)}
.dd-body{flex:1;min-width:0}
.dd-item-title{font-size:14px;color:var(--text);word-break:break-word}
.dd-item.done .dd-item-title{text-decoration:line-through;color:var(--text-3)}
.dd-item-time{font-size:11.5px;color:var(--text-3);margin-top:2px}
.dd-item-time .note-tag{color:var(--warn-text);font-weight:600}
.dd-del{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:14px}
.dd-del:hover{color:var(--danger)}
.dd-open{background:none;border:none;color:var(--accent-text);cursor:pointer;font-size:12.5px;font-weight:600}

/* ========================= share public page ========================= */
.share-body{background:var(--bg-list);min-height:100vh}
.share-top{display:flex;align-items:center;gap:9px;padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--border)}
.share-top .brand-name{font-size:17px}
.share-badge{margin-left:auto;background:var(--accent-soft);color:var(--accent-text);font-size:12px;
  font-weight:600;padding:5px 13px;border-radius:20px}
.share-article{max-width:780px;margin:34px auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:44px 52px;box-shadow:var(--sh)}
.share-title{font-size:32px;margin:0 0 8px;letter-spacing:-.025em}
.share-meta{font-size:13px;color:var(--text-3);margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:18px}
.share-content{padding:0 !important;max-width:none !important}
.share-foot{text-align:center;color:var(--text-3);font-size:13px;padding:28px}
.share-foot a{color:var(--accent-text);text-decoration:none;font-weight:600}
.share-missing{max-width:420px;margin:16vh auto;text-align:center;color:var(--text-2)}
.share-missing h1{font-size:23px;margin:8px 0}

/* ========================= new note + template menu ========================= */
.new-note-group{position:relative;display:flex;gap:0;margin:0 14px 8px}
.new-note-group .new-note-btn{flex:1;margin:0;border-top-right-radius:0;border-bottom-right-radius:0}
.new-note-caret{background:var(--accent);color:#fff;border:none;border-left:1px solid rgba(255,255,255,.18);
  border-radius:0 var(--r) var(--r) 0;padding:0 12px;cursor:pointer;font-size:12px;box-shadow:var(--sh-sm);transition:background .15s}
.new-note-caret:hover{background:var(--accent-hover)}
.tpl-menu{position:absolute;left:0;right:0;top:46px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-md);padding:6px;z-index:30;display:none}
.tpl-menu.open{display:block}
.tpl-head{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--text-3);text-transform:uppercase;padding:6px 10px 4px}
.tpl-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;
  padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;cursor:pointer;color:var(--text)}
.tpl-menu button:hover{background:var(--surface-2)}
.cmdk-hint{display:flex;align-items:center;gap:8px;margin:0 14px 14px;padding:8px 12px;background:none;
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-3);font-size:12.5px;cursor:pointer;width:calc(100% - 28px);transition:background .12s}
.cmdk-hint:hover{background:rgba(140,140,150,.08);color:var(--text-2)}
.cmdk-hint kbd{margin-left:auto}
kbd{font-family:var(--font);font-size:10.5px;background:var(--surface-2);border:1px solid var(--border-strong);
  border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--text-2)}

/* ========================= command palette ========================= */
.cmdk-backdrop{position:fixed;inset:0;background:rgba(18,18,23,.4);z-index:350;display:flex;
  align-items:flex-start;justify-content:center;padding:14vh 20px 20px;backdrop-filter:blur(4px)}
.cmdk{background:var(--surface);width:100%;max-width:580px;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;max-height:64vh}
.cmdk-input-wrap{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.cmdk-ico{font-size:15px;opacity:.5}
#cmdkInput{flex:1;border:none;background:none;font-size:16.5px;font-family:inherit;color:var(--text)}
#cmdkInput:focus{outline:none}
.cmdk-list{overflow-y:auto;padding:8px;flex:1}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer}
.cmdk-item.sel{background:var(--accent-soft)}
.cmdk-item-ico{font-size:15px;width:18px;text-align:center}
.cmdk-item-label{flex:1;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-item.sel .cmdk-item-label{color:var(--accent-text);font-weight:600}
.cmdk-item-hint{font-size:11px;color:var(--text-3);background:var(--surface-2);padding:2px 8px;border-radius:20px}
.cmdk-empty{padding:28px;text-align:center;color:var(--text-3);font-size:14px}
.cmdk-foot{padding:9px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--text-3);display:flex;gap:5px;align-items:center}
.cmdk-foot kbd{margin-right:2px}

/* ========================= wiki links ========================= */
.note-link{color:var(--accent-text);background:var(--accent-soft);border-radius:5px;padding:0 5px;
  text-decoration:none;font-weight:500;cursor:pointer;white-space:nowrap}
.note-link::before{content:"@";opacity:.55;font-weight:600}
.note-link:hover{background:var(--accent);color:#fff}
.note-link:hover::before{opacity:.8}
.link-suggest{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh-md);padding:5px;z-index:210;min-width:240px;max-width:320px}
.ls-item{padding:8px 11px;border-radius:var(--r-sm);font-size:13.5px;cursor:pointer;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-item.sel{background:var(--accent-soft);color:var(--accent-text)}

/* backlinks */
.backlinks{max-width:840px;margin:0 auto;padding:6px 28px 14px}
.bl-head{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--text-3);text-transform:uppercase;margin-bottom:8px}
.bl-item{display:block;width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 12px;margin-bottom:5px;font-size:13.5px;color:var(--text);cursor:pointer}
.bl-item:hover{border-color:var(--accent);color:var(--accent-text)}

/* ========================= zen mode ========================= */
body.zen .sidebar,body.zen .notelist,body.zen .editor-topbar,body.zen .toolbar,
body.zen .tags-row,body.zen .save-status,body.zen .attachments,body.zen .backlinks{display:none !important}
body.zen{grid-template-columns:1fr}
body.zen .editor-pane{grid-column:1/-1}
body.zen .content-area{max-width:720px;font-size:18px;line-height:1.85;padding:8vh 28px 40vh}
body.zen .title-input{max-width:720px;padding-top:10vh;font-size:34px}
.zen-exit{position:fixed;top:18px;right:20px;z-index:120;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:7px 15px;font-size:12.5px;color:var(--text-2);cursor:pointer;box-shadow:var(--sh-sm)}
.zen-exit:hover{color:var(--text);background:var(--surface-2)}

/* ========================= board (scratchpad) ========================= */
.board-pane{position:fixed;left:264px;top:0;right:0;bottom:0;background:var(--bg-list);
  z-index:25;display:flex;flex-direction:column}
.board-head{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;
  border-bottom:1px solid var(--border);background:var(--bg)}
.board-head h2{margin:0;font-size:19px;letter-spacing:-.02em}
.board-hint{font-size:12px;color:var(--text-3)}
.board-grid{flex:1;overflow-y:auto;padding:22px 28px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;align-content:start}
.board-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:15px 16px;min-height:128px;cursor:pointer;box-shadow:var(--sh-sm);
  transition:box-shadow .12s,transform .08s;display:flex;flex-direction:column;gap:5px}
.board-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.board-card.dragging{opacity:.4}
.board-card.drop-on{outline:2px dashed var(--accent);outline-offset:2px;transform:scale(1.03)}
.bc-color{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.6);border:none;border-radius:7px;
  width:26px;height:26px;cursor:pointer;font-size:13px;opacity:0;transition:opacity .12s}
.board-card:hover .bc-color{opacity:1}
.bc-title{font-size:15px;font-weight:700;letter-spacing:-.01em;padding-right:24px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-title em{color:var(--text-3);font-style:normal}
.bc-title .star{color:var(--star);font-size:12px}
.bc-snippet{flex:1;font-size:12.5px;color:var(--text-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bc-foot{font-size:11px;color:var(--text-3);margin-top:auto}
.ctx-menu .swatch{display:inline-block;width:13px;height:13px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}

/* ========================= embeds + link cards ========================= */
.content-area .embed,.share-content .embed{margin:14px 0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);max-width:680px}
.content-area .embed iframe,.share-content .embed iframe{display:block;background:#000}
.link-card{display:flex;gap:0;margin:14px 0;max-width:560px;border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;text-decoration:none;background:var(--surface);box-shadow:var(--sh-sm);transition:box-shadow .12s}
.link-card:hover{box-shadow:var(--sh)}
.link-card .lc-img{width:120px;flex-shrink:0;background-size:cover;background-position:center;background-color:var(--surface-2)}
.link-card .lc-body{padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:3px}
.link-card .lc-title{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.link-card .lc-desc{font-size:12.5px;color:var(--text-2);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.link-card .lc-site{font-size:11px;color:var(--text-3);margin-top:2px}
.link-card.simple{max-width:480px}

/* ========================= publish: share popover template picker ========================= */
.share-tpl{margin-top:12px}
.pop-label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--text-3);
  text-transform:uppercase;margin-bottom:6px}
.seg{display:flex;gap:0;border:1px solid var(--border-strong);border-radius:var(--r-sm);overflow:hidden}
.seg button{flex:1;background:var(--surface);border:none;border-right:1px solid var(--border);padding:7px;
  font-size:12.5px;cursor:pointer;color:var(--text-2);font-weight:600}
.seg button:last-child{border-right:none}
.seg button.active{background:var(--accent);color:#fff}
.pop-view{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--accent-text);text-decoration:none;font-weight:600}

/* ========================= publish: share page templates ========================= */
/* blog: serif, generous */
.share-body.tpl-blog .share-article{max-width:720px;font-family:Georgia,"Times New Roman",serif}
.share-body.tpl-blog .share-title{font-size:38px;line-height:1.15}
.share-body.tpl-blog .share-content{font-size:18px;line-height:1.85}
/* docs: sidebar-ish, tighter, mono headings vibe */
.share-body.tpl-doc{background:var(--surface)}
.share-body.tpl-doc .share-article{max-width:860px;border:none;box-shadow:none;border-left:3px solid var(--accent);
  border-radius:0;margin-top:18px}
.share-body.tpl-doc .share-title{font-size:26px}
.share-body.tpl-doc .share-content{font-size:15px}
.share-body.tpl-doc .share-content h2{border-bottom:1px solid var(--border);padding-bottom:5px}

/* ========================= audio → note ========================= */
.tpl-sep{height:1px;background:var(--border);margin:6px 4px}
.audio-backdrop{position:fixed;inset:0;background:rgba(18,18,23,.42);z-index:340;display:flex;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.audio-modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;
  max-width:520px;display:flex;flex-direction:column;max-height:82vh;border:1px solid var(--border)}
.am-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.am-head h3{margin:0;font-size:17px;letter-spacing:-.01em}
.am-controls{display:flex;align-items:center;gap:12px;padding:16px 20px 6px;flex-wrap:wrap}
.am-controls select{padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:14px;background:var(--surface);color:var(--text)}
.am-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);cursor:pointer}
.am-check input{width:15px;height:15px;accent-color:var(--accent)}
.am-controls .btn-primary{margin-left:auto}
.am-controls .btn-primary.rec-on{background:var(--danger);animation:pulse 1.2s infinite}
.am-status{padding:4px 20px 10px;font-size:12.5px;color:var(--text-3)}
.am-transcript{margin:0 20px;flex:1;overflow-y:auto;min-height:160px;max-height:42vh;padding:14px 16px;
  border:1px solid var(--border);border-radius:var(--r);font-size:15px;line-height:1.7;background:var(--bg-list);color:var(--text)}
.am-transcript:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.am-transcript:empty::before{content:attr(data-ph);color:var(--text-3);opacity:.7}
.am-actions{display:flex;justify-content:flex-end;gap:9px;padding:16px 20px}

/* ========================= version history ========================= */
.hist-backdrop{position:fixed;inset:0;background:rgba(18,18,23,.42);z-index:330;display:flex;
  align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.hist-modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:760px;
  max-height:86vh;display:flex;flex-direction:column;border:1px solid var(--border)}
.hist-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.hist-head h3{margin:0;font-size:17px}
.hist-bar{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--border)}
.hist-bar input[type=range]{flex:1;accent-color:var(--accent)}
.hist-when{font-size:12.5px;color:var(--text-2);white-space:nowrap;font-weight:600;min-width:160px;text-align:right}
.hist-preview{flex:1;overflow-y:auto;padding:22px 28px;max-width:none;margin:0;background:var(--bg-list)}
.hist-preview h1{font-size:24px;margin:0 0 .4em}
.hist-actions{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--border)}
.hist-hint{font-size:12px;color:var(--text-3);margin-right:auto}

/* ========================= graph view ========================= */
.graph-pane{position:fixed;left:264px;top:0;right:0;bottom:0;background:var(--bg);z-index:25;
  display:flex;flex-direction:column}
.graph-svg{flex:1;width:100%;cursor:grab}
.graph-svg .g-edge{stroke:var(--border-strong);stroke-width:2.5}
.graph-svg .g-node{cursor:pointer}
.graph-svg .g-dot{fill:var(--accent);stroke:var(--bg);stroke-width:2;transition:fill .12s}
.graph-svg .g-node:hover .g-dot{fill:var(--accent-hover)}
.graph-svg .g-label{fill:var(--text-2);font-size:14px;font-weight:600;font-family:var(--font);pointer-events:none}
.graph-empty{position:absolute;top:55%;left:0;right:0;text-align:center;color:var(--text-3);font-size:14px;line-height:1.7}

/* ========================= quick capture (FAB) ========================= */
.fab{position:fixed;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;background:var(--accent);
  color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:var(--sh-md);z-index:140;
  transition:transform .12s,background .15s}
.fab:hover{background:var(--accent-hover);transform:scale(1.06)}
body.zen .fab{display:none}
.qc-pop{position:fixed;right:24px;bottom:88px;width:330px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);z-index:140;padding:14px;display:flex;flex-direction:column;gap:9px}
.qc-head{font-size:12.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.qc-pop input,.qc-pop textarea{width:100%;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:9px 11px;font-family:inherit;font-size:14px;background:var(--surface);color:var(--text)}
.qc-pop textarea{min-height:120px;resize:vertical;line-height:1.5}
.qc-pop input:focus,.qc-pop textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.qc-actions{display:flex;justify-content:flex-end;gap:8px}

/* ========================= quick.php standalone ========================= */
.quick-body{background:var(--bg-list);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:18px}
.quick-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);
  width:100%;max-width:480px;padding:16px;display:flex;flex-direction:column;gap:10px}
.quick-head{display:flex;align-items:center;gap:9px;font-size:15px}
.quick-head .quick-open{margin-left:auto;color:var(--text-3);text-decoration:none;font-size:16px}
.quick-card input,.quick-card textarea{width:100%;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:10px 12px;font-family:inherit;font-size:14.5px;background:var(--surface);color:var(--text)}
.quick-card textarea{min-height:46vh;resize:vertical;line-height:1.6}
.quick-card input:focus,.quick-card textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.quick-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.quick-status{margin-right:auto;font-size:12.5px;color:var(--text-3)}

@media(max-width:980px){ .graph-pane{left:0} }

/* ========================= shared banner ========================= */
.shared-banner{max-width:840px;margin:14px auto 0;padding:9px 16px;background:var(--accent-soft);
  color:var(--accent-text);border-radius:var(--r);font-size:13px}
body.zen .shared-banner{display:none}

/* ========================= share with people ========================= */
.popover-wide{width:340px}
.popover .pop-divider{height:1px;background:var(--border);margin:14px 0}
#sharePerm{padding:8px 6px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:12.5px;background:var(--surface);color:var(--text)}
.share-search{position:relative;flex:1;min-width:0}
.share-search input{width:100%}
.share-suggest{position:absolute;left:0;right:0;top:38px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);box-shadow:var(--sh-md);z-index:50;padding:4px;max-height:200px;overflow-y:auto}
.ss-item{padding:8px 10px;border-radius:6px;font-size:13px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-item:hover{background:var(--accent-soft)}
.ss-item em{color:var(--text-3);font-style:normal;font-size:11.5px}
.share-people{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.sp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);font-size:12.5px}
.sp-row:hover{background:var(--surface-2)}
.sp-info{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-info em{color:var(--text-3);font-style:normal;font-size:11.5px}
.sp-perm{font-size:11px;color:var(--text-3);background:var(--surface-2);padding:1px 7px;border-radius:20px}
.sp-x{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:13px}
.sp-x:hover{color:var(--danger)}
.sp-empty{font-size:12px;color:var(--text-3);padding:4px 8px}

/* ========================= admin: users ========================= */
.users-backdrop{position:fixed;inset:0;background:rgba(18,18,23,.42);z-index:320;display:flex;
  align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.users-modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;
  max-width:560px;max-height:84vh;display:flex;flex-direction:column;border:1px solid var(--border)}
.um-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.um-head h3{margin:0;font-size:17px}
.um-create{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:9px}
.um-row{display:flex;gap:9px}
.um-create input,.um-create select{flex:1;padding:9px 11px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:13.5px;background:var(--surface);color:var(--text);min-width:0}
.um-create input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.um-create .btn-primary{flex:0 0 auto}
.um-list{overflow-y:auto;padding:10px 16px}
.um-item{display:flex;align-items:center;gap:11px;padding:10px;border-radius:var(--r);}
.um-item:hover{background:var(--surface-2)}
.um-avatar{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.um-info{flex:1;min-width:0}
.um-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.um-badge{font-size:10px;font-weight:700;text-transform:uppercase;background:var(--accent-soft);
  color:var(--accent-text);padding:1px 7px;border-radius:20px}
.um-email{font-size:12.5px;color:var(--text-3)}
.um-del{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:15px}
.um-del:hover{color:var(--danger)}

/* ========================= graph node photos ========================= */
.graph-svg .g-ring{fill:none;stroke:var(--accent);stroke-width:2.5}
.graph-svg .g-initial{fill:#fff;font-family:var(--font);font-weight:700;pointer-events:none}

/* ========================= work items ========================= */
.nc-check{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:2px solid var(--border-strong);
  background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:800;margin-top:4px;transition:all .15s}
.nc-check:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nc-check.on{background:var(--accent);border-color:var(--accent)}
.nc-check.done-anim{transform:scale(1.25);background:#16a34a;border-color:#16a34a}
.nc-badge{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent-text);padding:1px 6px;border-radius:5px}
.note-card.done .nc-title .t{text-decoration:line-through;color:var(--text-3)}
.note-card.done{opacity:.72}

.work-backdrop{position:fixed;inset:0;background:rgba(18,18,23,.42);z-index:330;display:flex;
  align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.work-modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:420px;
  padding:22px;border:1px solid var(--border)}
.wk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wk-head h3{margin:0;font-size:17px}
.wk-label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin:12px 0 6px}
.work-modal input{width:100%;padding:11px 13px;border:1.5px solid var(--border-strong);border-radius:var(--r);
  font-size:14.5px;font-family:inherit;background:var(--surface);color:var(--text)}
.work-modal input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wk-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}

/* ========================= checklist progress badge ========================= */
.nc-prog{flex-shrink:0;min-width:42px;height:26px;padding:0 8px;border-radius:20px;margin-top:4px;
  background:var(--accent-soft);color:var(--accent-text);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.nc-prog.full{background:#16a34a;color:#fff}

/* ========================= dashboard ========================= */
.dash-pane{position:fixed;left:264px;top:0;right:0;bottom:0;background:var(--bg-list);z-index:25;overflow-y:auto}
.dash-inner{max-width:1100px;margin:0 auto;padding:28px}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.dash-head-l{display:flex;align-items:center;gap:10px}
.dash-head h1{margin:0;font-size:28px;letter-spacing:-.02em}
.dash-date{font-size:13.5px;color:var(--text-3)}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.dash-stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;cursor:pointer;box-shadow:var(--sh-sm);
  transition:transform .1s,box-shadow .12s}
.dash-stat:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.ds-ico{font-size:18px}
.ds-num{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.ds-lbl{font-size:12.5px;color:var(--text-3)}
.dash-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 18px 10px;box-shadow:var(--sh-sm)}
.dash-card h2{margin:0 0 12px;font-size:15px;letter-spacing:-.01em}
.dash-overdue-h{color:var(--danger)}
.dash-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:var(--r);cursor:pointer;margin-bottom:4px}
.dash-item:hover{background:var(--surface-2)}
.di-ico{font-size:15px;flex-shrink:0}
.di-title{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di-time{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.dash-empty{color:var(--text-3);font-size:13px;padding:8px 11px}

@media(max-width:980px){ .dash-pane{left:0} }
@media(max-width:720px){
  .dash-stats{grid-template-columns:repeat(2,1fr)}
  .dash-cols{grid-template-columns:1fr}
  .dash-inner{padding:16px}

  /* calendar → iPhone-style: uniform cells, a dot per event (tap a day for details) */
  .cal-head{padding:14px 12px}
  .cal-title{font-size:17px;min-width:auto}
  .cal-nav{gap:6px}
  .cal-weekdays{padding:10px 8px 0;gap:3px}
  .cal-weekdays span{font-size:9px;padding-left:1px}
  .cal-grid{padding:6px 8px 16px;gap:3px;grid-auto-rows:minmax(46px,1fr)}
  .cal-cell{min-height:46px;padding:3px;border-radius:7px;align-items:center;gap:2px}
  .cal-daynum{font-size:11px;align-self:center}
  .cal-cell.today .cal-daynum{width:20px;height:20px}
  .cal-ev,.cal-more{display:none}
  .cal-dots{display:flex;gap:2px;margin-top:auto;flex-wrap:wrap;justify-content:center;padding-bottom:2px}
  .cal-dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block}
  .cal-dots i.note{background:var(--warn-text)}
  .cal-dots i.done{opacity:.4}
}

/* ========================= print (PDF) ========================= */
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{position:absolute;left:0;top:0;width:100%;padding:0 10px}
}

/* ========================= responsive ========================= */
/* ========================= responsive / mobile ========================= */
.mobile-only{display:none}
.list-head-top{display:flex;align-items:center;gap:6px}
.meta-mobile{display:none}
.sidebar-backdrop{display:none}

/* tablet: sidebar becomes a slide-in drawer */
@media(max-width:980px){
  body.app{grid-template-columns:0 minmax(280px,360px) 1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:284px;z-index:60;transform:translateX(-100%);
    transition:transform .22s;box-shadow:var(--sh-lg)}
  .sidebar.open{transform:none}
  .calendar-pane,.board-pane,.graph-pane{left:0}
  .sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.4)}
}

/* phone: one column — list, then the editor slides over it */
@media(max-width:720px){
  .mobile-only{display:inline-flex;align-items:center;justify-content:center}
  body.app{grid-template-columns:1fr}
  .notelist{border-right:none}
  .editor-pane{position:fixed;inset:0;z-index:40;background:var(--bg);
    transform:translateX(100%);transition:transform .22s}
  body.viewing-note .editor-pane{transform:translateX(0)}
  .menu-btn,.back-btn{background:none;border:none;color:var(--text-2);cursor:pointer;border-radius:8px;flex-shrink:0}
  .menu-btn{font-size:22px;padding:6px 8px}
  .back-btn{font-size:30px;line-height:1;padding:2px 8px;width:auto;height:auto}
  .list-head{padding:12px 14px 8px}
  .editor-topbar{padding:12px 12px}
  .title-row,.reminder-bar,.tags-row,.content-area,.attachments,.save-status,.backlinks,.toolbar{
    padding-left:16px;padding-right:16px}
  .title-input{font-size:26px}
  .note-cover{width:72px;height:72px;font-size:28px}
  /* topbar: drop the cramped notebook/updated text, show it under the title instead */
  .editor-topbar .meta{display:none}
  .editor-topbar{gap:4px}
  .meta-mobile{display:block;max-width:840px;margin:8px auto 0;padding:0 16px;
    font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .editor-actions{gap:0;flex-wrap:wrap;justify-content:flex-end}
  .editor-actions .icon-btn{width:32px;height:32px;font-size:15px}
  .fab{right:16px;bottom:16px;width:50px;height:50px}
  .cmdk-backdrop{padding:8vh 12px 12px}
  .hist-modal,.users-modal,.work-modal,.audio-modal{max-height:90vh}
}