/* ---------- Theme tokens (dark + light via prefers-color-scheme) ---------- */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#eceef1; --text:#1a1d21; --text-dim:#5b6470;
  --border:#d7dbe0; --accent:#2b6cff; --accent-text:#ffffff; --danger:#d13438; --ok:#1f9d55;
  --banner:#8a5a00; --banner-bg:#fff4d6; --shadow:0 2px 10px rgba(0,0,0,.12);
  --c-red:#e2564f; --c-orange:#e8853a; --c-yellow:#e8c020; --c-green:#3aa564;
  --c-blue:#3a7bd5; --c-purple:#8a5cd8; --c-gray:#8a94a0; --c-none:transparent;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111418; --surface:#1a1f26; --surface-2:#232a33; --text:#e6eaef; --text-dim:#98a2b0;
    --border:#2c343e; --accent:#4b86ff; --accent-text:#ffffff; --danger:#f2645a; --ok:#3ecb7c;
    --banner:#f5c518; --banner-bg:#3a2f10; --shadow:0 2px 12px rgba(0,0,0,.5);
  }
}

/* ---------- Glassmorphism themes ----------
   Each theme overrides existing tokens + adds --page-gradient and glass tokens.
   --glass-* tokens are only used by glass-aware surfaces below; default (System)
   theme leaves them empty so surfaces stay solid.                              */
:root{
  --page-gradient:none;
  --screen-gradient:none;
  --glass-surface:var(--surface);
  --glass-surface-2:var(--surface-2);
  --glass-border:var(--border);
  --glass-blur:0px;
  --glass-shadow:var(--shadow);
}

/* Arctic */
html.theme-arctic{
  --bg:#e9f1fb; --surface:#ffffff; --surface-2:#e4edf9; --text:#16202e; --text-dim:#4a5a70;
  --border:#c4d6ec; --accent:#2f7ad6; --accent-text:#ffffff; --danger:#d13438; --ok:#1f9d55;
  --banner:#7a5a00; --banner-bg:#fff3d0;
  --c-red:#e2564f; --c-orange:#e8853a; --c-yellow:#e0b81c; --c-green:#3aa564;
  --c-blue:#3a7bd5; --c-purple:#8a5cd8; --c-gray:#8a94a0;
  --page-gradient:linear-gradient(160deg,rgba(234,243,255,.60) 0%,rgba(220,233,251,.52) 45%,rgba(207,224,246,.46) 100%), url('./bg/arctic-bg.webp');
  --screen-gradient:linear-gradient(180deg,rgba(255,255,255,.34),rgba(236,246,255,.28));
  --glass-surface:rgba(255,255,255,.62); --glass-surface-2:rgba(228,238,250,.66);
  --glass-border:rgba(255,255,255,.7); --glass-blur:14px;
  --glass-shadow:0 4px 22px rgba(60,110,180,.18);
}
/* City Lofi */
html.theme-city_lofi{
  --bg:#101826; --surface:#182233; --surface-2:#20304a; --text:#eaf1fb; --text-dim:#a2b3cc;
  --border:#2c3d58; --accent:#39c0d6; --accent-text:#06121a; --danger:#f2645a; --ok:#3ecb7c;
  --banner:#ffd66b; --banner-bg:#2a2410;
  --c-red:#f2645a; --c-orange:#f0954a; --c-yellow:#ecc94b; --c-green:#4ad991;
  --c-blue:#4aa8ff; --c-purple:#b18cff; --c-gray:#9aa6ba;
  --page-gradient:linear-gradient(150deg,rgba(15,42,51,.42) 0%,rgba(21,34,56,.48) 50%,rgba(42,28,70,.52) 100%), url('./bg/city_lofi-bg.webp');
  --screen-gradient:linear-gradient(180deg,rgba(12,18,33,.36),rgba(20,30,50,.28));
  --glass-surface:rgba(28,42,64,.52); --glass-surface-2:rgba(40,58,88,.55);
  --glass-border:rgba(150,190,230,.18); --glass-blur:16px;
  --glass-shadow:0 6px 26px rgba(0,0,0,.4);
}
/* Bar */
html.theme-bar{
  --bg:#1e1418; --surface:#2a1c22; --surface-2:#3a262e; --text:#fbeef0; --text-dim:#d3a9b0;
  --border:#4a2f38; --accent:#ff8a5c; --accent-text:#241014; --danger:#ff6f61; --ok:#4ad991;
  --banner:#ffd08a; --banner-bg:#3a2410;
  --c-red:#ff6f61; --c-orange:#ff9a4d; --c-yellow:#f5c451; --c-green:#5ad19a;
  --c-blue:#6aa8ff; --c-purple:#c88cff; --c-gray:#b09aa2;
  --page-gradient:linear-gradient(155deg,rgba(58,28,40,.42) 0%,rgba(74,34,48,.48) 45%,rgba(90,46,40,.54) 100%), url('./bg/bar-bg.webp');
  --screen-gradient:linear-gradient(180deg,rgba(35,18,24,.34),rgba(52,28,36,.26));
  --glass-surface:rgba(48,28,36,.52); --glass-surface-2:rgba(64,40,48,.55);
  --glass-border:rgba(255,190,160,.18); --glass-blur:15px;
  --glass-shadow:0 6px 26px rgba(60,10,20,.42);
}
/* Car */
html.theme-car{
  --bg:#080e1c; --surface:#101a30; --surface-2:#182642; --text:#e6ecfb; --text-dim:#93a2c4;
  --border:#20304f; --accent:#5b8cff; --accent-text:#ffffff; --danger:#f2645a; --ok:#3ecb7c;
  --banner:#ffd66b; --banner-bg:#1c2440;
  --c-red:#f2645a; --c-orange:#f0954a; --c-yellow:#ecc94b; --c-green:#4ad991;
  --c-blue:#5b8cff; --c-purple:#b18cff; --c-gray:#9aa6ba;
  --page-gradient:radial-gradient(120% 90% at 20% 0%,rgba(19,33,72,.48) 0%,rgba(10,17,40,.60) 55%,rgba(6,10,24,.72) 100%), url('./bg/car-bg.webp');
  --screen-gradient:linear-gradient(180deg,rgba(7,12,25,.36),rgba(14,22,38,.28));
  --glass-surface:rgba(18,30,56,.55); --glass-surface-2:rgba(26,42,74,.58);
  --glass-border:rgba(120,150,220,.16); --glass-blur:16px;
  --glass-shadow:0 6px 28px rgba(0,0,0,.5);
}
/* Desert */
html.theme-desert{
  --bg:#17191c; --surface:#212429; --surface-2:#2b2f35; --text:#eceef1; --text-dim:#a2a8b0;
  --border:#353a41; --accent:#8a94a0; --accent-text:#14161a; --danger:#f2645a; --ok:#3ecb7c;
  --banner:#e0c46a; --banner-bg:#2a2620;
  --c-red:#e2564f; --c-orange:#e8853a; --c-yellow:#e8c020; --c-green:#3aa564;
  --c-blue:#5a86c8; --c-purple:#9a7cd0; --c-gray:#9aa2ac;
  --page-gradient:linear-gradient(160deg,rgba(32,35,39,.58) 0%,rgba(25,28,32,.66) 55%,rgba(20,22,25,.74) 100%), url('./bg/desert-bg.webp');
  --screen-gradient:linear-gradient(180deg,rgba(22,22,20,.34),rgba(34,30,24,.26));
  --glass-surface:rgba(38,42,48,.55); --glass-surface-2:rgba(52,58,66,.55);
  --glass-border:rgba(200,206,214,.14); --glass-blur:14px;
  --glass-shadow:0 6px 24px rgba(0,0,0,.42);
}

/* Nature */
html.theme-nature{
  --bg:#0f1d15; --surface:#173022; --surface-2:#1f3e2d; --text:#e9f6ef; --text-dim:#a6c7b5;
  --border:#2c4f3c; --accent:#4bb57d; --accent-text:#082114; --danger:#f2645a; --ok:#5ad19a;
  --banner:#d9c979; --banner-bg:#2a2a16;
  --c-red:#f2645a; --c-orange:#e8853a; --c-yellow:#e8c020; --c-green:#4bb57d;
  --c-blue:#4aa8ff; --c-purple:#9a7cd0; --c-gray:#9aa6ba;
  --page-gradient:linear-gradient(150deg,rgba(16,38,24,.44) 0%,rgba(22,44,28,.48) 55%,rgba(28,56,34,.54) 100%), url('./bg/nature-bg.webp');
  --screen-gradient:linear-gradient(180deg,rgba(14,31,22,.34),rgba(20,44,31,.26));
  --glass-surface:rgba(24,50,35,.54); --glass-surface-2:rgba(34,64,46,.56);
  --glass-border:rgba(140,220,170,.16); --glass-blur:15px;
  --glass-shadow:0 6px 24px rgba(0,0,0,.38);
}

/* Sea */
html.theme-sea{
  --bg:#101d2b; --surface:#182a3f; --surface-2:#223853; --text:#e9f2fb; --text-dim:#9eb6d0;
  --border:#314a67; --accent:#66b5ff; --accent-text:#081a2a; --danger:#f2645a; --ok:#5ad19a;
  --banner:#d5c27d; --banner-bg:#243245;
  --c-red:#f2645a; --c-orange:#f0954a; --c-yellow:#ecc94b; --c-green:#4ad991;
  --c-blue:#66b5ff; --c-purple:#a695ff; --c-gray:#9aa6ba;
  --page-gradient:linear-gradient(150deg,rgba(16,34,54,.44) 0%,rgba(20,46,72,.48) 55%,rgba(26,58,86,.54) 100%), url('./bg/sea-bg.webp');
  --screen-gradient:linear-gradient(180deg,rgba(15,29,44,.34),rgba(22,42,62,.26));
  --glass-surface:rgba(24,44,68,.54); --glass-surface-2:rgba(34,56,84,.56);
  --glass-border:rgba(130,190,240,.16); --glass-blur:15px;
  --glass-shadow:0 6px 24px rgba(0,0,0,.4);
}

/* Roses */
html.theme-roses{
  --bg:#241018; --surface:#381a26; --surface-2:#462231; --text:#fbeef3; --text-dim:#d3a8b8;
  --border:#5c3346; --accent:#e879a6; --accent-text:#2a0a18; --danger:#f2645a; --ok:#5ad19a;
  --banner:#d5c27d; --banner-bg:#3a2430;
  --c-red:#f2645a; --c-orange:#f0954a; --c-yellow:#ecc94b; --c-green:#4ad991;
  --c-blue:#66b5ff; --c-purple:#a695ff; --c-gray:#9aa6ba;
  --page-gradient:linear-gradient(150deg,rgba(52,18,32,.44) 0%,rgba(66,24,42,.48) 55%,rgba(84,32,52,.54) 100%), url('./bg/roses-bg.png');
  --screen-gradient:linear-gradient(180deg,rgba(40,16,26,.34),rgba(58,26,40,.26));
  --glass-surface:rgba(58,26,40,.54); --glass-surface-2:rgba(74,36,52,.56);
  --glass-border:rgba(240,150,180,.16); --glass-blur:15px;
  --glass-shadow:0 6px 24px rgba(0,0,0,.4);
}

/* Fixed soft page gradient behind the app (only when a glass theme is active). */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--page-gradient); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed;
}

/* Glass surface treatment: applied to key surfaces on glass themes.
   Uses --glass-* tokens; on System theme these equal the solid tokens so
   nothing changes. Fallback: solid rgba surface when backdrop-filter absent. */
html[class*="theme-"] .topbar,
html[class*="theme-"] .controls,
html[class*="theme-"] .note-row,
html[class*="theme-"] .editor-tools .tool,
html[class*="theme-"] .section,
html[class*="theme-"] .sheet,
html[class*="theme-"] .cal-wrap,
html[class*="theme-"] .cal-cell,
html[class*="theme-"] .chip{
  background:var(--glass-surface);
  border-color:var(--glass-border);
}
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  html[class*="theme-"] .topbar,
  html[class*="theme-"] .controls,
  html[class*="theme-"] .note-row,
  html[class*="theme-"] .section,
  html[class*="theme-"] .sheet,
  html[class*="theme-"] .cal-wrap{
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  }
}
html[class*="theme-"] .note-row,
html[class*="theme-"] .section{ box-shadow:var(--glass-shadow); }
/* Screens (editor/settings/calendar) paint their own copy of the page gradient
   so they fully cover the notes list/FAB underneath (both sit below .screen's
   z-index). A plain transparent fill would let the list + FAB bleed through. */
html[class*="theme-"] .screen{ background:var(--bg); background-image:var(--screen-gradient); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; }
html[class*="theme-"] .fab{ box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 0 1px var(--glass-border); }

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:16px; line-height:1.4;
  -webkit-tap-highlight-color:transparent; overflow:hidden;
}
button{font-family:inherit; font-size:inherit; cursor:pointer}
input,textarea,select{font-family:inherit; font-size:inherit; color:var(--text)}

/* ---------- App layout ---------- */
#app{display:flex; flex-direction:column; height:100%; max-width:820px; margin:0 auto; position:relative}

/* Top bar */
.topbar{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  padding-top:calc(10px + env(safe-area-inset-top)); background:var(--surface);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5;
}
.topbar h1{font-size:18px; margin:0; font-weight:700; flex:0 0 auto}
.topbar .spacer{flex:1}
.icon-btn{
  background:transparent; border:none; color:var(--text); width:40px; height:40px;
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:20px;
}
.icon-btn:hover{background:var(--surface-2)}

/* Search + group filter */
.controls{padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--border)}
.search{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); color:var(--text);
}
.groupbar{display:flex; gap:6px; overflow-x:auto; margin-top:8px; padding-bottom:2px}
.chip{
  flex:0 0 auto; padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg); color:var(--text-dim); white-space:nowrap;
}
.chip.active{background:var(--accent); color:var(--accent-text); border-color:var(--accent)}

/* Notes list */
.list{flex:1; overflow-y:auto; padding:6px 8px 96px}
.empty{padding:48px 24px; text-align:center; color:var(--text-dim)}
.note-row{
  display:flex; gap:10px; align-items:stretch; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:10px 10px 10px 8px; margin:6px 4px; box-shadow:var(--shadow);
}
.note-row:active{transform:scale(.995)}
.colorbar{width:6px; border-radius:6px; flex:0 0 auto; background:var(--cbar,transparent)}
.note-main{flex:1; min-width:0}
.note-title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.note-title .untitled{color:var(--text-dim); font-weight:500; font-style:italic}
.note-sub{color:var(--text-dim); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.note-meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); margin-top:5px; flex-wrap:wrap}
.badge{background:var(--surface-2); padding:2px 8px; border-radius:999px; font-size:11px}
.badge.rem{color:var(--banner)}
.note-menu{flex:0 0 auto; align-self:flex-start}

/* FAB */
.fab{
  position:absolute; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); width:60px; height:60px;
  border-radius:50%; background:var(--accent); color:var(--accent-text); border:none; font-size:30px;
  box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:6; line-height:1;
}

/* Overdue banner */
.banner{
  background:var(--banner-bg); color:var(--banner); padding:10px 12px; font-size:14px;
  display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--border);
}
.banner button{margin-left:auto; background:transparent; border:1px solid currentColor; color:inherit; border-radius:8px; padding:4px 10px}
.hidden{display:none !important}

/* ---------- Screens (editor / settings) as overlays ---------- */
.screen{
  position:absolute; inset:0; background:var(--bg); z-index:10; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .2s ease; visibility:hidden;
}
.screen.open{transform:translateX(0); visibility:visible}
.screen .topbar{position:static}
.screen-body{flex:1; overflow-y:auto; padding:12px; padding-bottom:calc(24px + env(safe-area-inset-bottom))}

/* Editor */
.editor-title{
  width:100%; padding:10px 12px; font-size:20px; font-weight:600; border:none; background:transparent;
  border-bottom:1px solid var(--border); outline:none;
}
.editor-body{
  width:100%; min-height:40vh; margin-top:10px; padding:12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:var(--text); resize:vertical; line-height:1.5;
  font-size:16px; outline:none; white-space:pre-wrap;
}
.preview{
  margin-top:10px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface);
}
.preview h1,.preview h2,.preview h3{margin:.4em 0}
.preview pre{background:var(--surface-2); padding:8px; border-radius:8px; overflow-x:auto}
.preview code{background:var(--surface-2); padding:1px 4px; border-radius:4px}
.preview a{color:var(--accent)}
.preview img,.md-img{max-width:100%; height:auto; border-radius:10px; margin:4px 0; display:block}

/* ---------- Live-formatting editor (contenteditable) ---------- */
.editor-live{
  width:100%; min-height:40vh; margin-top:10px; padding:12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:var(--text); line-height:1.5;
  font-size:16px; outline:none; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:break-word;
}
.editor-live .ln{min-height:1.5em; white-space:pre-wrap}
.editor-live .ln.active{ } /* raw markdown, no special styling while editing */
.md-h{font-weight:700; display:inline-block}
.md-h1{font-size:1.6em} .md-h2{font-size:1.4em} .md-h3{font-size:1.2em}
.md-h4{font-size:1.1em} .md-h5{font-size:1em} .md-h6{font-size:.95em; color:var(--text-dim)}
.md-bullet{display:inline} .md-b-glyph{color:var(--accent); margin-right:6px}
.md-bullet2{padding-left:1.4em}
.md-bq{display:inline-block; border-left:3px solid var(--border); padding-left:8px; color:var(--text-dim)}
.md-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--surface-2); display:inline-block; width:100%; padding:0 4px; border-radius:4px}
.md-img-missing{display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border:1px dashed var(--border); border-radius:8px; color:var(--text-dim); font-size:13px}
.md-cb-wrap{display:inline-flex; align-items:center; gap:8px;}
.md-cb{display:inline-block; width:16px; height:16px; border:2px solid var(--accent); border-radius:4px; position:relative; top:-1px; cursor:pointer; flex:none}
.md-cb.checked::after{content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:bold; font-size:13px; line-height:1}
.md-cb-wrap.checked{text-decoration:line-through; color:var(--text-dim); opacity: 0.7;}
ul .md-cb{top:2px} /* align better in lists */

/* Tables — live editor rows (per-line flex) + preview (real table) */
.md-tr{display:flex; width:100%; border:1px solid var(--border); border-bottom:none; border-radius:0}
.md-tr .md-td{flex:1 1 0; padding:4px 8px; border-right:1px solid var(--border); min-width:0; overflow-wrap:anywhere}
.md-tr .md-td:last-child{border-right:none}
.md-tsep{display:block; border:none; border-top:2px solid var(--accent); min-height:0; height:2px; opacity:.6}
.ln:not(:has(+ .ln > .md-tr)) > .md-tr{border-bottom:1px solid var(--border)}
.md-table{border-collapse:collapse; margin:6px 0; width:100%}
.md-table th,.md-table td{border:1px solid var(--border); padding:4px 8px; text-align:left}
.md-table th{background:var(--surface-2)}

/* Reminder dialog — list of a note's reminders */
.rem-list{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.rem-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2)}
.rem-when.fired{text-decoration:line-through; color:var(--text-dim)}

.editor-tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.tool{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:var(--text);
}
.savehint{font-size:12px; color:var(--text-dim); margin-left:auto; align-self:center}

/* Color picker */
.colors{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.swatch{width:34px; height:34px; border-radius:50%; border:2px solid var(--border); position:relative}
.swatch.sel{outline:3px solid var(--accent); outline-offset:2px}
.swatch.none{background:var(--surface-2)}
.swatch.none::after{content:"∅"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-dim)}

/* Audio list */
.audio-item{display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--border); border-radius:10px; margin-top:8px; background:var(--surface)}
.audio-item audio{flex:1; height:34px}
.rec-dot{width:12px; height:12px; border-radius:50%; background:var(--danger); animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Settings + generic sections */
.section{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:14px}
.section h3{margin:0 0 8px; font-size:15px}
.section p.help{font-size:13px; color:var(--text-dim); margin:6px 0}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px}
.btn{padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text)}
.btn.primary{background:var(--accent); color:var(--accent-text); border-color:var(--accent)}
.btn.danger, .tool.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.field{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text)}
label.lbl{display:block; font-size:13px; color:var(--text-dim); margin-bottom:4px; margin-top:8px}

/* Modal (menus, dialogs) */
.modal-back{position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:20; display:flex; align-items:flex-end; justify-content:center}
.modal-back.center{align-items:center}
.sheet{
  background:var(--surface); width:100%; max-width:820px; border-radius:16px 16px 0 0; padding:12px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -4px 24px rgba(0,0,0,.4);
}
.sheet.dialog{border-radius:16px; margin:0 16px; max-width:420px}
.sheet h3{margin:4px 8px 10px}
.sheet-item{display:flex; align-items:center; gap:12px; padding:14px 12px; border-radius:10px; color:var(--text); width:100%; background:transparent; border:none; text-align:left}
.sheet-item:hover{background:var(--surface-2)}
.sheet-item.danger{color:var(--danger)}
.dialog input,.dialog select{margin-top:6px}
.dialog .row{justify-content:flex-end; margin-top:14px}

/* Toast */
.toast{
  position:absolute; left:50%; bottom:90px; transform:translateX(-50%); background:var(--text); color:var(--bg);
  padding:10px 16px; border-radius:999px; font-size:14px; z-index:40; box-shadow:var(--shadow); max-width:90%;
}
.toast.hidden{display:none}

/* Small dot legend used in color menu */
.dot{width:16px; height:16px; border-radius:50%; border:1px solid var(--border); flex:0 0 auto}

/* ---------- Theme picker (Settings) ---------- */
.theme-grid{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px}
.theme-card{
  display:flex; flex-direction:column; align-items:center; gap:6px; width:76px; padding:8px 4px;
  border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text);
}
.theme-card.sel{outline:3px solid var(--accent); outline-offset:2px}
.theme-swatch{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 6px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.2);
}
.theme-name{font-size:12px; color:var(--text-dim)}

/* ---------- Calendar view ---------- */
.cal-head{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.cal-title{font-size:17px; font-weight:700; flex:1; text-align:center}
.cal-nav{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:20px;
}
.cal-wrap{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:var(--shadow);
}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px}
.cal-dow span{text-align:center; font-size:12px; color:var(--text-dim); font-weight:600}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-cell{
  min-height:46px; border-radius:10px; border:1px solid transparent; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:5px 2px 2px; gap:3px; color:var(--text); position:relative;
}
.cal-cell.empty{visibility:hidden}
.cal-cell.has{border-color:var(--border); background:var(--surface-2)}
.cal-cell.today{outline:2px solid var(--accent); outline-offset:-2px}
.cal-cell.sel{background:var(--accent); color:var(--accent-text)}
.cal-daynum{font-size:14px; line-height:1}
.cal-dots{display:flex; gap:3px; height:8px; align-items:center}
.cal-dot{width:7px; height:7px; border-radius:50%; background:var(--border)}
.cal-overdue-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--danger); color:var(--danger); background:transparent; margin-bottom:10px;
}
.cal-daylist{margin-top:14px}
.cal-daylist h4{margin:0 0 8px; font-size:14px; color:var(--text-dim)}
.cal-note{
  display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); margin-bottom:8px; box-shadow:var(--shadow); width:100%; text-align:left; color:var(--text);
}
.cal-note .cbar{width:5px; align-self:stretch; border-radius:5px; flex:0 0 auto; background:var(--cbar,var(--border))}
.cal-note .cn-main{flex:1; min-width:0}
.cal-note .cn-title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-note .cn-time{font-size:12px; color:var(--text-dim); margin-top:2px}
html[class*="theme-"] .cal-note,
html[class*="theme-"] .cal-cell.has,
html[class*="theme-"] .cal-nav,
html[class*="theme-"] .theme-card{background:var(--glass-surface); border-color:var(--glass-border)}
/* Keep the selected-day highlight winning over the glass .has fill (which has
   higher specificity + comes later); otherwise a selected reminder day loses
   its accent background on glass themes. */
html[class*="theme-"] .cal-cell.sel{background:var(--accent); color:var(--accent-text); border-color:var(--accent)}