:root{
  --bg:#f4f1e9; --panel:#ffffff; --sidebar:#f3efe5;
  --sel:#ffe7a0; --sel-line:#f4cf63;
  --accent:#d9a400; --accent-d:#b98c00; --accent-bg:#fff6dd;
  --ink:#2a2722; --muted:#8c857a; --faint:#b3ac9e; --line:#e7e1d4;
  --danger:#e5484d; --ok:#3aa657;
  --radius:12px; --shadow:0 8px 30px rgba(60,50,20,.14);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--ink);line-height:1.5;background:var(--bg);
  padding-top:env(safe-area-inset-top)}
h1{font-size:1.4rem;margin:0;font-weight:700}
a{color:var(--accent-d);text-decoration:none}
.muted{color:var(--muted);font-size:.88rem}
.center{text-align:center}
input,button,textarea{font-family:inherit}

/* ---- boot / spinner ---- */
.boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.spinner{width:30px;height:30px;border:3px solid rgba(0,0,0,.12);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- layout ---- */
.notes-layout{display:grid;grid-template-columns:1fr;height:100vh;height:100dvh}
@media(min-width:820px){
  .notes-layout{grid-template-columns:312px 1fr}
}

/* ---- sidebar ---- */
.sidebar{display:flex;flex-direction:column;min-height:0;background:var(--sidebar);
  border-right:1px solid var(--line)}
.sb-head{display:flex;align-items:center;gap:8px;padding:14px 14px 8px}
.sb-title{font-weight:700;font-size:1.18rem;flex:1;letter-spacing:.2px}
.sb-actions{display:flex;align-items:center;gap:2px}
.sync{font-size:.72rem;color:var(--faint);margin-right:4px;white-space:nowrap}
.sync.is-off{color:var(--danger)} .sync.is-sync{color:var(--muted)} .sync.is-ok{color:var(--ok)}
.iconbtn{background:none;border:none;color:var(--muted);padding:7px;border-radius:9px;cursor:pointer;
  display:flex;align-items:center}
.iconbtn:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.iconbtn.on{color:var(--accent)}
.sb-search{padding:2px 14px 10px}
.sb-search input{width:100%;border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:8px 11px;font-size:15px;color:var(--ink)}
.sb-search input:focus{outline:none;border-color:var(--sel-line);box-shadow:0 0 0 3px var(--accent-bg)}

.menu{position:absolute;left:12px;top:54px;z-index:40;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:12px;min-width:220px;display:flex;flex-direction:column;gap:8px}
.menu #account-email{word-break:break-all;color:var(--muted)}

.offline-banner{background:#fdebc2;color:#7a5c00;font-size:.8rem;text-align:center;padding:7px 12px;
  border-bottom:1px solid var(--line)}

/* ---- shortcuts modal ---- */
.modal-back{position:fixed;inset:0;z-index:60;background:rgba(40,34,20,.35);display:flex;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);max-width:380px;width:100%;padding:20px 22px}
.modal-card h2{margin:0 0 8px;font-size:1.05rem}
.sc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:.92rem}
.sc-row:first-of-type{border-top:none}
.sc-keys{display:flex;gap:4px;flex:0 0 auto}
kbd{font-family:inherit;font-size:.76rem;line-height:1;background:#f1ede2;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:3px 6px;color:var(--ink);white-space:nowrap}

/* ---- note list ---- */
.note-list{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;min-height:0}
.nr-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);
  padding:12px 12px 4px;font-weight:600}
.nr-empty{color:var(--muted);text-align:center;padding:40px 16px;font-size:.92rem}
.note-row{position:relative;padding:10px 12px;border-radius:9px;cursor:pointer;margin-bottom:2px}
.note-row:hover{background:rgba(0,0,0,.04)}
.note-row.on{background:var(--sel)}
.note-row.on:hover{background:var(--sel)}
.nr-title{font-weight:600;font-size:.98rem;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.pin-dot{color:var(--accent);font-size:.6rem;line-height:1}
.nr-sub{display:flex;gap:8px;font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;margin-top:2px}
.nr-date{flex:0 0 auto;color:var(--ink);opacity:.7}
.nr-prev{overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.nr-actions{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:flex;gap:3px;opacity:0;transition:opacity .12s}
.note-row:hover .nr-actions,.note-row.on .nr-actions,.note-row:focus-within .nr-actions{opacity:1}
.nr-act{display:flex;align-items:center;justify-content:center;width:27px;height:27px;border:none;border-radius:7px;background:rgba(255,255,255,.85);color:var(--muted);cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(60,50,20,.14);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.nr-act:hover{background:#fff;color:var(--ink)}
.nr-act.on{color:var(--accent)}
.nr-act svg{width:15px;height:15px}
@media (hover: none){.nr-actions{opacity:1}}

/* ---- editor ---- */
.editor{display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.ed-head{display:flex;align-items:center;gap:6px;padding:10px 16px;border-bottom:1px solid var(--line)}
.ed-date{flex:1;text-align:center;font-size:.78rem;color:var(--muted)}
.ed-actions{display:flex;gap:2px}
.iconbtn.back{display:none}
.ed-body{flex:1;min-height:0;width:100%;border:none;background:none;color:var(--ink);
  font-size:17px;line-height:1.6;padding:22px clamp(18px,6vw,90px) 80px;overflow-y:auto;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;outline:none;-webkit-user-modify:read-write}
.ed-body:empty::before{content:attr(data-placeholder);color:var(--faint);pointer-events:none}
.ed-body:focus{outline:none}
.ed-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:1rem;padding:24px}

/* ---- live markdown decoration (text stays editable; only styling changes) ---- */
.ml-h1{font-size:1.7em;font-weight:700;line-height:1.35}
.ml-h2{font-size:1.4em;font-weight:700;line-height:1.35}
.ml-h3{font-size:1.2em;font-weight:700}
.ml-h4,.ml-h5,.ml-h6{font-weight:700}
.ml-quote{color:var(--muted);font-style:italic}
.ml-hr{color:var(--faint);letter-spacing:.15em}
.ml-li{color:var(--ink)}
.ml-code,.ml-fence{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:#f1ede2;border-radius:4px}
.mi-b{font-weight:700}
.mi-i{font-style:italic}
.mi-s{text-decoration:line-through;color:var(--muted)}
.mi-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  background:#efece2;border-radius:4px;padding:0 .2em}
.mi-link{color:var(--accent-d);text-decoration:underline;cursor:pointer}
.mi-lk{display:none}
.mi-link-g.mi-on .mi-lk{display:inline}
.mi-mark{color:var(--faint);font-weight:400;opacity:.55}
.mi-check{font-size:0;cursor:pointer;-webkit-user-select:none;user-select:none}
.mi-check::before{content:"";display:inline-block;box-sizing:border-box;width:16px;height:16px;vertical-align:-3px;margin:0 2px;border:1px solid #d0d7de;border-radius:4px;background:#fff}
.mi-check.done::before{border-color:#0969da;background-color:#0969da;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:13px 13px}

@media(min-width:820px){
  .iconbtn.back{display:none!important}
}
@media(max-width:819px){
  .editor{position:fixed;inset:0;z-index:20;transform:translateX(100%);transition:transform .22s ease}
  body.editing .editor{transform:translateX(0)}
  .iconbtn.back{display:flex}
  .ed-date{text-align:left;padding-left:4px}
}

/* ---- auth pages ---- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:20px;background:var(--bg)}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);padding:32px 28px}
.auth-logo{display:flex;justify-content:center;margin-bottom:14px}
.auth-logo img{border-radius:15px}
.auth-card h1{text-align:center}
.auth-form{margin-top:18px}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:14px}
label input{width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line);border-radius:11px;
  font-size:16px;background:#fff;color:var(--ink)}
label input:focus{outline:none;border-color:var(--sel-line);box-shadow:0 0 0 3px var(--accent-bg)}
button.primary{background:var(--accent);color:#3a2e00;border:none;font-weight:700;font-size:1rem;
  padding:13px;border-radius:11px;cursor:pointer}
button.primary:hover{background:var(--accent-d);color:#fff}
.block{display:block;width:100%;text-align:center}
.ghost{background:#fff;border:1px solid var(--line);color:var(--ink);padding:11px;border-radius:11px;cursor:pointer}
.ghost:hover{background:#f4f1ea}
.switch{display:block;text-align:center;margin-top:16px;font-size:.9rem}
.alert{border-radius:11px;padding:10px 13px;margin-bottom:6px;font-size:.9rem}
.alert.err{background:#fde8e8;color:var(--danger)}