/* ==========================================================================
   Aurora — a beautified Outlook-suite reimagining
   Design tokens → base → chrome → mail → calendar → todo → overlays → responsive
   ========================================================================== */

:root{
  --font: "Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,"Inter",sans-serif;

  /* accent (cobalt default; swapped by [data-accent]) */
  --accent:#3d5af1; --accent-soft:#5b7cfa; --accent-deep:#2c44c8;
  --accent-weak:rgba(61,90,241,.10); --accent-weak-2:rgba(61,90,241,.16);
  --accent-ring:rgba(61,90,241,.35);

  /* light surfaces */
  --bg:#eef1f7;
  --bg-grad-1:#f4f6fc; --bg-grad-2:#e9edf6;
  --surface:#ffffff;
  --surface-2:#f6f8fc;
  --surface-3:#eef1f8;
  --surface-hover:rgba(20,32,66,.045);
  --surface-active:rgba(61,90,241,.09);
  --border:rgba(22,34,72,.09);
  --border-strong:rgba(22,34,72,.16);
  --ink:#1b2438; --ink-2:#4a556e; --ink-3:#7a86a1;
  --shadow-s:0 1px 2px rgba(18,28,60,.06),0 2px 8px rgba(18,28,60,.05);
  --shadow-m:0 2px 6px rgba(18,28,60,.07),0 10px 28px rgba(18,28,60,.10);
  --shadow-l:0 8px 20px rgba(18,28,60,.10),0 24px 64px rgba(18,28,60,.18);
  --danger:#d9384b; --danger-weak:rgba(217,56,75,.10);
  --warn:#c77700; --ok:#1d9d6c;
  --star:#f0a020;
  --sel-bar:var(--accent);
  --cal-now:#e2453a;
  --topbar-bg:rgba(255,255,255,.72);
  --rail-bg:transparent;
  --kbd-bg:rgba(22,34,72,.06);
  --quote-bar:rgba(22,34,72,.14);
  --scrollbar:rgba(22,34,72,.22);
  --hl:rgba(255,213,79,.55);
}

[data-theme="dark"]{
  --bg:#0d1220;
  --bg-grad-1:#111830; --bg-grad-2:#0b101d;
  --surface:#171e31;
  --surface-2:#1c2438;
  --surface-3:#222b42;
  --surface-hover:rgba(160,180,255,.06);
  --surface-active:rgba(96,128,255,.14);
  --border:rgba(160,180,255,.10);
  --border-strong:rgba(160,180,255,.20);
  --ink:#e8ecf7; --ink-2:#aab4cf; --ink-3:#78839f;
  --shadow-s:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.25);
  --shadow-m:0 2px 6px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.4);
  --shadow-l:0 8px 20px rgba(0,0,0,.4),0 28px 72px rgba(0,0,0,.55);
  --accent:#6d8bff; --accent-soft:#8aa4ff; --accent-deep:#4c66e0;
  --accent-weak:rgba(109,139,255,.14); --accent-weak-2:rgba(109,139,255,.22);
  --accent-ring:rgba(109,139,255,.45);
  --danger:#ff6b7d; --danger-weak:rgba(255,107,125,.14);
  --warn:#f0a94e; --ok:#3ecf9a; --star:#ffc44d;
  --topbar-bg:rgba(19,25,42,.72);
  --kbd-bg:rgba(160,180,255,.12);
  --quote-bar:rgba(160,180,255,.20);
  --scrollbar:rgba(160,180,255,.25);
  --hl:rgba(202,150,20,.5);
}

[data-accent="violet"]{ --accent:#7c5cf0; --accent-soft:#9a82f7; --accent-deep:#5f3fd6; --accent-weak:rgba(124,92,240,.11); --accent-weak-2:rgba(124,92,240,.18); --accent-ring:rgba(124,92,240,.35); }
[data-accent="teal"]{ --accent:#0e9f8e; --accent-soft:#2bc0ad; --accent-deep:#0a7d70; --accent-weak:rgba(14,159,142,.11); --accent-weak-2:rgba(14,159,142,.18); --accent-ring:rgba(14,159,142,.35); }
[data-accent="rose"]{ --accent:#e0477a; --accent-soft:#f06d99; --accent-deep:#bc2f60; --accent-weak:rgba(224,71,122,.11); --accent-weak-2:rgba(224,71,122,.18); --accent-ring:rgba(224,71,122,.35); }
[data-theme="dark"][data-accent="violet"]{ --accent:#9a82f7; --accent-soft:#b3a1fa; --accent-deep:#7c5cf0; }
[data-theme="dark"][data-accent="teal"]{ --accent:#2bc0ad; --accent-soft:#55d4c4; --accent-deep:#0e9f8e; }
[data-theme="dark"][data-accent="rose"]{ --accent:#f06d99; --accent-soft:#f790b1; --accent-deep:#e0477a; }

/* density */
[data-density="compact"]{ --row-pad-y:6px; --row-font:13px; --gap:8px; }
[data-density="comfortable"]{ --row-pad-y:10px; --row-font:13.5px; --gap:12px; }

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--ink); font-size:14px; line-height:1.45;
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--bg-grad-2), transparent 55%),
    var(--bg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease,color .35s ease;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font-family:inherit;color:inherit}
::selection{background:var(--accent-weak-2)}
:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;border-radius:6px}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:6px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

.app{display:flex;flex-direction:column;height:100vh}
.hidden{display:none!important}

/* ---------- top command bar ---------- */
.topbar{
  height:52px;flex:0 0 52px;display:flex;align-items:center;gap:16px;padding:0 14px;
  background:var(--topbar-bg);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--border);z-index:60;position:relative;
  transition:background-color .35s ease;
}
.topbar-left{display:flex;align-items:center;gap:8px;min-width:230px}
.waffle{width:34px;height:34px;border-radius:9px;display:grid;grid-template-columns:repeat(3,5px);grid-template-rows:repeat(3,5px);gap:2.5px;place-content:center;transition:background .15s}
.waffle span{width:4.5px;height:4.5px;border-radius:50%;background:var(--ink-2);transition:transform .2s,background .2s}
.waffle:hover{background:var(--surface-hover)}
.waffle:hover span{background:var(--accent)}
.waffle:hover span:nth-child(2){transform:translateY(-1px)}
.waffle:hover span:nth-child(5){transform:scale(1.35)}
.brand{display:flex;align-items:baseline;gap:8px;padding-left:2px}
.brand-mark{width:24px;height:24px;border-radius:7px;align-self:center;box-shadow:var(--shadow-s)}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:-.02em}
.brand-app{font-size:13px;color:var(--ink-3);font-weight:600}
.brand-app::before{content:"·";margin-right:8px;color:var(--border-strong)}

.topbar-center{flex:1;display:flex;justify-content:center}
.gsearch{position:relative;width:min(560px,100%);display:flex;align-items:center}
.gsearch-icon{position:absolute;left:12px;width:16px;height:16px;color:var(--ink-3);pointer-events:none;transition:color .2s}
.gsearch input{
  width:100%;height:36px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface-2);padding:0 44px 0 36px;font-size:13.5px;color:var(--ink);
  transition:box-shadow .2s,border-color .2s,background .2s;
}
.gsearch input::placeholder{color:var(--ink-3)}
.gsearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring),var(--shadow-s);background:var(--surface)}
.gsearch:focus-within .gsearch-icon{color:var(--accent)}
.gsearch-kbd{
  position:absolute;right:10px;font-family:var(--font);font-size:11px;color:var(--ink-3);
  background:var(--kbd-bg);border:1px solid var(--border);border-radius:5px;padding:1px 6px;pointer-events:none;
}
.gsearch-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:min(560px,70vh);overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-l);
  padding:8px;animation:pop-in .18s cubic-bezier(.2,.9,.3,1.2);
}
.gs-group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:10px 10px 4px}
.gs-item{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 10px;border-radius:9px;transition:background .12s}
.gs-item:hover,.gs-item.is-cursor{background:var(--surface-active)}
.gs-item-main{min-width:0;flex:1}
.gs-item-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-item-sub{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-item-kind{font-size:10.5px;color:var(--ink-3);flex:0 0 auto}
.gs-empty{padding:22px;text-align:center;color:var(--ink-3);font-size:13px}
.gs-empty b{display:block;font-size:14px;color:var(--ink-2);margin-bottom:4px}
mark{background:var(--hl);color:inherit;border-radius:3px;padding:0 1px}

.topbar-right{display:flex;align-items:center;gap:4px;min-width:230px;justify-content:flex-end}
.icon-btn{width:34px;height:34px;border-radius:9px;display:grid;place-content:center;color:var(--ink-2);position:relative;transition:background .15s,color .15s,transform .15s}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{background:var(--surface-hover);color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.notify-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--surface);transform:scale(0);transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.notify-dot.has{transform:scale(1)}
.avatar-btn{position:relative;margin-left:4px;border-radius:50%}
.presence{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--ok);border:2px solid var(--surface)}

/* avatars */
.avatar{
  width:32px;height:32px;border-radius:50%;display:grid;place-content:center;flex:0 0 auto;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--av-a,#5b7cfa),var(--av-b,#3d5af1));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),var(--shadow-s);
  user-select:none;
}
.avatar.lg{width:44px;height:44px;font-size:15px}
.avatar.sm{width:26px;height:26px;font-size:10.5px}

/* ---------- shell / rail ---------- */
.shell{flex:1;display:flex;min-height:0}
.rail{
  width:64px;flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 0;background:var(--rail-bg);z-index:20;
}
.rail-btn{
  width:48px;height:48px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink-3);position:relative;transition:background .18s,color .18s,transform .12s;
}
.rail-btn svg{width:21px;height:21px;transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
.rail-label{font-size:9.5px;font-weight:600;letter-spacing:.01em}
.rail-btn:hover{background:var(--surface-hover);color:var(--ink)}
.rail-btn:hover svg{transform:translateY(-1px) scale(1.06)}
.rail-btn:active{transform:scale(.93)}
.rail-btn.is-active{color:var(--accent);background:var(--accent-weak)}
.rail-btn.is-active::before{
  content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:3.5px;height:22px;border-radius:4px;background:var(--accent);
  animation:rail-pip .25s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes rail-pip{from{transform:translateY(-50%) scaleY(.2)}to{transform:translateY(-50%) scaleY(1)}}
.rail-badge{
  position:absolute;top:5px;right:5px;min-width:16px;height:16px;border-radius:9px;padding:0 4px;
  background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-content:center;
  box-shadow:0 0 0 2px var(--bg);
}
.rail-spacer{flex:1}
.rail-theme .ic-moon{display:none}
[data-theme="dark"] .rail-theme .ic-sun{display:none}
[data-theme="dark"] .rail-theme .ic-moon{display:block}

.stage{flex:1;min-width:0;display:flex;padding:10px 12px 12px 4px}
.app-region{flex:1;min-width:0;display:flex;border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-m);border:1px solid var(--border);animation:region-in .28s cubic-bezier(.2,.8,.3,1)}
.app-region[hidden]{display:none}
@keyframes region-in{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}

/* ==========================================================================
   MAIL
   ========================================================================== */
.mail-root{display:flex;flex:1;min-width:0}

/* folder pane */
.folder-pane{
  width:236px;flex:0 0 236px;display:flex;flex-direction:column;border-right:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface-2),var(--surface) 30%);
}
.fp-head{padding:14px 14px 10px;display:flex;align-items:center;justify-content:space-between}
.fp-title{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em}
.fp-new{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent-soft),var(--accent));color:#fff;font-size:12.5px;font-weight:600;
  box-shadow:0 2px 8px var(--accent-ring);transition:transform .15s,box-shadow .2s,filter .2s;
}
.fp-new:hover{transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-ring);filter:brightness(1.06)}
.fp-new:active{transform:translateY(0) scale(.97)}
.fp-new svg{width:13px;height:13px}
.fp-scroll{flex:1;overflow-y:auto;padding:2px 8px 16px}
.fp-account{margin:10px 6px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.fp-account::after{content:"";flex:1;height:1px;background:var(--border)}
.folder-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:6px 10px;border-radius:8px;
  font-size:13px;color:var(--ink-2);position:relative;transition:background .12s,color .12s;
}
.folder-item svg{width:16px;height:16px;flex:0 0 auto;opacity:.75}
.folder-item:hover{background:var(--surface-hover);color:var(--ink)}
.folder-item.is-active{background:var(--surface-active);color:var(--accent);font-weight:600}
.folder-item.is-active svg{opacity:1}
.folder-item .f-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-item .f-count{font-size:11px;font-weight:700;color:var(--accent)}
.folder-item.is-drop{background:var(--accent-weak-2);outline:2px dashed var(--accent);outline-offset:-2px}
.folder-item .f-star{color:var(--star);opacity:1}
.fp-section-label{display:flex;align-items:center;justify-content:space-between;margin:12px 6px 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.fp-add-folder{color:var(--ink-3);border-radius:6px;padding:2px 5px;font-size:11px}
.fp-add-folder:hover{color:var(--accent);background:var(--surface-hover)}

/* message list */
.msg-pane{width:360px;flex:0 0 360px;display:flex;flex-direction:column;border-right:1px solid var(--border);min-width:0}
.mp-toolbar{padding:10px 12px 8px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.mp-row1{display:flex;align-items:center;gap:8px}
.mp-folder-name{font-size:15px;font-weight:700;letter-spacing:-.01em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-filter-wrap{position:relative;flex:1;display:flex;align-items:center}
.mp-filter-wrap svg{position:absolute;left:9px;width:13px;height:13px;color:var(--ink-3)}
.mp-filter{
  width:100%;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);
  font-size:12.5px;padding:0 10px 0 28px;transition:border-color .2s,box-shadow .2s;
}
.mp-filter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.mp-row2{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.mp-select-all{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-size:12px;border-radius:7px;padding:3px 6px}
.mp-select-all:hover{background:var(--surface-hover)}
.mp-sort{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--ink-3);font-size:12px;border-radius:7px;padding:3px 7px}
.mp-sort:hover{background:var(--surface-hover);color:var(--ink)}
.mp-sort svg{width:12px;height:12px}
.mp-bulk{
  display:none;align-items:center;gap:2px;padding:6px 8px;border-radius:10px;margin:0 12px;
  background:var(--accent-weak);border:1px solid var(--accent-weak-2);animation:slide-down .2s ease;
}
.mp-bulk.show{display:flex}
.mp-bulk .bulk-count{font-size:12px;font-weight:700;color:var(--accent);margin-right:6px}
.bulk-btn{width:30px;height:30px;border-radius:8px;display:grid;place-content:center;color:var(--ink-2)}
.bulk-btn svg{width:15px;height:15px}
.bulk-btn:hover{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-s)}
.bulk-btn.danger:hover{color:var(--danger)}
@keyframes slide-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.msg-list{flex:1;overflow-y:auto;padding:6px 8px 20px;scroll-behavior:smooth}
.msg-day-group{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;padding:12px 10px 4px;position:sticky;top:-6px;background:linear-gradient(var(--surface) 70%,transparent);z-index:2}

.msg-item{
  position:relative;display:flex;gap:11px;padding:var(--row-pad-y) 10px;border-radius:12px;cursor:pointer;
  transition:background .13s,box-shadow .13s,transform .13s;border:1px solid transparent;
}
.msg-item:hover{background:var(--surface-hover)}
.msg-item.is-selected{background:var(--surface-active);border-color:var(--accent-weak-2)}
.msg-item.is-selected::before{
  content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3.5px;border-radius:4px;background:var(--sel-bar);
  animation:rail-pip .2s ease;
}
.msg-item.is-checked{background:var(--accent-weak)}
.msg-item:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px}
.msg-check{
  position:absolute;left:8px;top:calc(var(--row-pad-y) + 2px);width:32px;height:32px;border-radius:50%;
  display:grid;place-content:center;opacity:0;transition:opacity .15s;background:var(--surface);
}
.msg-item:hover .msg-check,.msg-item.is-checked .msg-check{opacity:1}
.msg-item:hover .msg-avatar,.msg-item.is-checked .msg-avatar{opacity:0}
.msg-avatar{transition:opacity .15s;position:relative}
.msg-check .cbox{
  width:19px;height:19px;border-radius:50%;border:1.6px solid var(--border-strong);display:grid;place-content:center;
  transition:all .15s;background:var(--surface);
}
.msg-item.is-checked .cbox{background:var(--accent);border-color:var(--accent)}
.cbox svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.5);transition:all .15s}
.msg-item.is-checked .cbox svg{opacity:1;transform:scale(1)}
.msg-body{flex:1;min-width:0}
.msg-line1{display:flex;align-items:baseline;gap:8px}
.msg-sender{font-size:var(--row-font);font-weight:600;color:var(--ink-2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-item.is-unread .msg-sender{color:var(--ink);font-weight:700}
.msg-time{font-size:11px;color:var(--ink-3);flex:0 0 auto}
.msg-item.is-unread .msg-time{color:var(--accent);font-weight:700}
.msg-line2{display:flex;align-items:center;gap:6px;margin-top:1px}
.msg-subject{font-size:12.5px;color:var(--ink-2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-item.is-unread .msg-subject{font-weight:600;color:var(--ink)}
.msg-preview{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.msg-meta{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.m-ic{width:13px;height:13px;color:var(--ink-3)}
.m-ic.flag{color:var(--danger)}
.m-ic.imp{color:var(--warn)}
.m-ic.att{color:var(--ink-3)}
.msg-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;box-shadow:0 0 0 3px var(--accent-weak)}
.msg-attach-chip{
  display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:10.5px;color:var(--ink-2);
  background:var(--surface-3);border:1px solid var(--border);border-radius:6px;padding:1px 7px;
}
.msg-attach-chip svg{width:10px;height:10px}
.conv-count{font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-weak);border-radius:6px;padding:0 5px}

/* reading pane */
.read-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface)}
.rp-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink-3);padding:40px;text-align:center}
.rp-empty .art{width:150px;height:150px}
.rp-empty h3{font-size:16px;color:var(--ink-2);font-weight:600}
.rp-empty p{font-size:13px;max-width:280px}
.rp-head{padding:18px 26px 12px;border-bottom:1px solid var(--border)}
.rp-subject{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.rp-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.rp-tag{font-size:11px;font-weight:600;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--border);border-radius:20px;padding:2px 10px}
.rp-tag.cat{border:0;color:#fff}
.rp-actions{display:flex;align-items:center;gap:2px;padding:8px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.rp-btn{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);transition:background .13s,color .13s,transform .1s;
}
.rp-btn svg{width:14.5px;height:14.5px}
.rp-btn:hover{background:var(--surface-hover);color:var(--ink)}
.rp-btn:active{transform:scale(.96)}
.rp-btn.danger:hover{color:var(--danger);background:var(--danger-weak)}
.rp-btn.toggled{color:var(--accent);background:var(--accent-weak)}
.rp-sep{width:1px;height:18px;background:var(--border);margin:0 5px}
.rp-spacer{flex:1}
.rp-sender{display:flex;align-items:center;gap:12px;padding:14px 26px}
.rp-sender-info{flex:1;min-width:0}
.rp-sender-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.rp-sender-addr{font-size:12px;color:var(--ink-3)}
.rp-sender-to{font-size:12px;color:var(--ink-3);margin-top:1px}
.rp-sender-time{font-size:12px;color:var(--ink-3);text-align:right;line-height:1.5}
.rp-body{flex:1;overflow-y:auto;padding:8px 26px 40px}
.rp-body-content{max-width:720px;font-size:14px;line-height:1.65;color:var(--ink)}
.rp-body-content p{margin:0 0 14px}
.rp-body-content h2{font-size:17px;margin:20px 0 10px;letter-spacing:-.01em}
.rp-body-content ul,.rp-body-content ol{margin:0 0 14px 22px}
.rp-body-content li{margin-bottom:5px}
.rp-body-content blockquote{
  margin:16px 0;padding:10px 14px;border-left:3px solid var(--quote-bar);color:var(--ink-2);
  background:var(--surface-2);border-radius:0 10px 10px 0;font-size:13px;
}
.rp-body-content .sig{color:var(--ink-3);font-size:13px}
.rp-body-content .btnlike{
  display:inline-block;background:linear-gradient(135deg,var(--accent-soft),var(--accent));color:#fff;
  padding:8px 18px;border-radius:9px;font-weight:600;text-decoration:none;margin:4px 0 10px;font-size:13px;
}
.rp-body-content table{border-collapse:collapse;margin:0 0 14px;width:100%;font-size:13px}
.rp-body-content th,.rp-body-content td{border:1px solid var(--border);padding:6px 10px;text-align:left}
.rp-body-content th{background:var(--surface-2);font-weight:700}
.rp-body-content b,.rp-body-content strong{font-weight:700}
.rp-attachments{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;padding:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
.att-chip{
  display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;font-size:12.5px;box-shadow:var(--shadow-s);cursor:pointer;transition:transform .15s,box-shadow .2s;
}
.att-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-m)}
.att-chip .att-ic{width:30px;height:30px;border-radius:8px;display:grid;place-content:center;color:#fff;font-size:9px;font-weight:800}
.att-chip .att-size{color:var(--ink-3);font-size:11px}
.rp-conv{border-top:1px solid var(--border);margin-top:6px}
.rp-conv-item{border-bottom:1px solid var(--border)}
.rp-conv-head{display:flex;align-items:center;gap:10px;padding:12px 26px;cursor:pointer;transition:background .13s}
.rp-conv-head:hover{background:var(--surface-hover)}
.rp-conv-head .who{flex:1;min-width:0}
.rp-conv-head .who b{font-size:13px}
.rp-conv-head .who span{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-conv-head time{font-size:11.5px;color:var(--ink-3)}
.rp-conv-body{padding:4px 26px 22px;animation:fade-in .25s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* skeleton / empty states */
.sk{position:relative;overflow:hidden;background:var(--surface-3);border-radius:6px}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 1.2s infinite}
[data-theme="dark"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.list-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ink-3);padding:30px;text-align:center}
.list-empty .art{width:120px;height:120px}
.list-empty h3{font-size:15px;color:var(--ink-2);font-weight:600}
.list-empty p{font-size:12.5px;max-width:240px}

/* ==========================================================================
   CALENDAR
   ========================================================================== */
.cal-root{display:flex;flex:1;min-width:0}
.cal-side{width:248px;flex:0 0 248px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--surface-2),var(--surface) 40%);overflow-y:auto}
.cal-side .fp-head{padding:14px 14px 8px}
.mini-cal{padding:4px 12px 12px}
.mini-cal-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 6px}
.mini-cal-head b{font-size:13px}
.mini-nav{width:24px;height:24px;border-radius:7px;display:grid;place-content:center;color:var(--ink-2)}
.mini-nav:hover{background:var(--surface-hover);color:var(--ink)}
.mini-nav svg{width:12px;height:12px}
.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.mini-dow{font-size:9.5px;font-weight:700;color:var(--ink-3);text-align:center;padding:3px 0;text-transform:uppercase}
.mini-day{
  height:27px;border-radius:8px;font-size:11.5px;color:var(--ink-2);display:grid;place-content:center;position:relative;
  transition:background .12s,color .12s,transform .1s;
}
.mini-day:hover{background:var(--surface-hover)}
.mini-day:active{transform:scale(.92)}
.mini-day.other{color:var(--ink-3);opacity:.45}
.mini-day.today{color:var(--accent);font-weight:800;background:var(--accent-weak)}
.mini-day.sel{background:var(--accent);color:#fff;font-weight:700}
.mini-day.has-ev::after{content:"";position:absolute;bottom:3px;width:3.5px;height:3.5px;border-radius:50%;background:currentColor;opacity:.7}
.cal-cats{padding:6px 14px 16px}
.cal-cats h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:8px 0 6px}
.cat-row{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:8px;font-size:13px;color:var(--ink-2);cursor:pointer;transition:background .12s}
.cat-row:hover{background:var(--surface-hover)}
.cat-dot{width:11px;height:11px;border-radius:4px;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.cat-row.off{opacity:.42}
.cat-row.off .cat-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}

.cal-main{flex:1;min-width:0;display:flex;flex-direction:column}
.cal-toolbar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.cal-title{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.015em;min-width:180px}
.cal-title small{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-left:8px}
.seg{display:flex;background:var(--surface-3);border-radius:10px;padding:3px;gap:2px}
.seg-btn{height:28px;padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:all .16s}
.seg-btn:hover{color:var(--ink)}
.seg-btn.is-active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-s)}
.nav-arrows{display:flex;gap:2px}
.nav-arrow{width:30px;height:30px;border-radius:8px;display:grid;place-content:center;color:var(--ink-2);transition:background .13s}
.nav-arrow:hover{background:var(--surface-hover);color:var(--ink)}
.nav-arrow svg{width:14px;height:14px}
.today-btn{height:30px;padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);border:1px solid var(--border);transition:all .15s}
.today-btn:hover{background:var(--surface-hover);color:var(--accent);border-color:var(--accent-ring)}
.cal-body{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.cal-view{flex:1;min-height:0;display:flex;flex-direction:column;animation:cal-in .3s cubic-bezier(.2,.8,.3,1)}
@keyframes cal-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* month view */
.month-grid{flex:1;display:grid;grid-template-rows:auto 1fr;min-height:0}
.month-body{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);min-height:0}
.month-dow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border)}
.month-dow span{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;text-align:right}
.month-week{display:contents}
.month-cell{
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px 7px;min-height:0;
  display:flex;flex-direction:column;gap:3px;overflow:hidden;cursor:pointer;transition:background .15s;position:relative;
}
.month-cell:nth-child(7n){border-right:0}
.month-cell:hover{background:var(--surface-hover)}
.month-cell.other{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.month-cell.other .mday{color:var(--ink-3);opacity:.6}
.month-cell.today{background:var(--accent-weak)}
.mday{
  align-self:flex-end;width:26px;height:26px;display:grid;place-content:center;font-size:12.5px;font-weight:600;color:var(--ink-2);
  border-radius:50%;
}
.month-cell.today .mday{background:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-ring)}
.m-ev{
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));color:color-mix(in srgb,var(--c) 72%,var(--ink));
  border-left:3px solid var(--c);cursor:pointer;transition:transform .12s,box-shadow .15s;line-height:1.5;
}
[data-theme="dark"] .m-ev{background:color-mix(in srgb,var(--c) 26%,var(--surface));color:color-mix(in srgb,var(--c) 60%,#fff)}
.m-ev:hover{transform:translateX(2px);box-shadow:var(--shadow-s)}
.m-ev.allday{background:var(--c);color:#fff;border-left-color:transparent}
.m-ev.span-start{border-radius:6px 0 0 6px;margin-right:-7px;padding-right:12px}
.m-ev.span-mid{border-radius:0;margin:0 -7px;border-left-color:transparent;text-indent:-999px}
.m-ev.span-end{border-radius:0 6px 6px 0;margin-left:-7px;border-left-color:transparent;text-indent:-999px}
.m-more{font-size:10.5px;font-weight:700;color:var(--accent);padding:1px 7px;border-radius:6px;text-align:left}
.m-more:hover{background:var(--accent-weak)}

/* week/day view */
.week-scroll{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.week-head{display:grid;grid-template-columns:56px 1fr;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:5}
.week-corner{border-right:1px solid var(--border)}
.week-days{display:grid;flex:1}
.wd-col-head{padding:8px 4px 6px;text-align:center;border-right:1px solid var(--border);cursor:pointer;transition:background .13s}
.wd-col-head:hover{background:var(--surface-hover)}
.wd-col-head .dow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.wd-col-head .dnum{
  width:30px;height:30px;margin:2px auto 0;display:grid;place-content:center;border-radius:50%;
  font-size:15px;font-weight:600;color:var(--ink-2);transition:all .2s;
}
.wd-col-head.today .dow{color:var(--accent)}
.wd-col-head.today .dnum{background:var(--accent);color:#fff;box-shadow:0 3px 10px var(--accent-ring);transform:scale(1.06)}
.allday-row{display:grid;grid-template-columns:56px 1fr;border-bottom:1px solid var(--border);background:var(--surface)}
.allday-label{font-size:10px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);font-weight:600}
.allday-cells{display:grid;flex:1;min-height:30px}
.allday-cell{border-right:1px solid var(--border);padding:2px 3px;display:flex;flex-direction:column;gap:2px;min-width:0}
.week-grid{display:grid;grid-template-columns:56px 1fr;flex:1;position:relative;min-height:1440px}
.time-gutter{border-right:1px solid var(--border);position:relative}
.time-tick{position:absolute;right:6px;transform:translateY(-50%);font-size:10px;color:var(--ink-3);font-weight:600;background:var(--surface);padding:0 2px}
.day-cols{display:grid;flex:1;position:relative}
.day-col{border-right:1px solid var(--border);position:relative;min-width:0}
.day-col.today{background:color-mix(in srgb,var(--accent-weak) 40%,transparent)}
.hour-line{position:absolute;left:0;right:0;border-top:1px solid var(--border);opacity:.6}
.hour-line.half{border-top-style:dotted;opacity:.35}
.ev-block{
  position:absolute;border-radius:8px;padding:4px 8px;font-size:11.5px;overflow:hidden;cursor:pointer;z-index:2;
  background:color-mix(in srgb,var(--c) 18%,var(--surface));border-left:3px solid var(--c);
  color:color-mix(in srgb,var(--c) 70%,var(--ink));box-shadow:var(--shadow-s);
  transition:box-shadow .15s,transform .15s,opacity .15s;line-height:1.35;
}
[data-theme="dark"] .ev-block{background:color-mix(in srgb,var(--c) 30%,var(--surface));color:color-mix(in srgb,var(--c) 62%,#fff)}
.ev-block:hover{box-shadow:var(--shadow-m);z-index:6;transform:scale(1.015)}
.ev-block b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-block .ev-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-block.dragging{opacity:.55;box-shadow:var(--shadow-l);z-index:10;cursor:grabbing}
.ev-block .resizer{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.ev-block .resizer::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:26px;height:3px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .15s}
.ev-block:hover .resizer::after{opacity:.5}
.now-line{position:absolute;left:0;right:0;height:2px;background:var(--cal-now);z-index:4;pointer-events:none}
.now-line::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--cal-now);box-shadow:0 0 0 3px color-mix(in srgb,var(--cal-now) 25%,transparent)}
.slot-hover{position:absolute;left:2px;right:2px;border-radius:8px;background:var(--accent-weak);border:1.5px dashed var(--accent);z-index:3;pointer-events:none;display:grid;place-content:center;font-size:11px;font-weight:700;color:var(--accent)}

/* agenda */
.agenda-scroll{flex:1;overflow-y:auto;padding:10px 22px 40px}
.ag-day{margin-bottom:6px}
.ag-day-head{display:flex;align-items:baseline;gap:10px;padding:14px 4px 8px;position:sticky;top:-10px;background:linear-gradient(var(--surface) 75%,transparent);z-index:2}
.ag-day-head .dnum{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink-2)}
.ag-day-head.today .dnum{color:var(--accent)}
.ag-day-head .dmeta{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.ag-day-head.today .dmeta{color:var(--accent)}
.ag-ev{
  display:flex;gap:14px;align-items:center;padding:9px 12px;border-radius:12px;cursor:pointer;
  transition:background .13s,transform .13s;border:1px solid transparent;
}
.ag-ev:hover{background:var(--surface-hover);transform:translateX(3px);border-color:var(--border)}
.ag-time{flex:0 0 108px;font-size:12.5px;font-weight:700;color:var(--ink-2);text-align:right}
.ag-time span{display:block;font-size:11px;font-weight:600;color:var(--ink-3)}
.ag-bar{width:4px;align-self:stretch;border-radius:3px;background:var(--c);flex:0 0 auto}
.ag-main{flex:1;min-width:0}
.ag-title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-sub{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-cat{font-size:10.5px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);padding:2px 9px;border-radius:20px;flex:0 0 auto}
.ag-empty{color:var(--ink-3);font-size:13px;padding:8px 4px 16px}

/* event popover / dialog */
.ev-pop{width:320px}
.ev-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ev-pop-cat{font-size:10.5px;font-weight:700;color:#fff;background:var(--c);border-radius:20px;padding:2px 10px}
.ev-pop-title{font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.ev-pop-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);padding:5px 0}
.ev-pop-row svg{width:15px;height:15px;color:var(--ink-3);flex:0 0 auto;margin-top:1px}
.ev-pop-desc{font-size:12.5px;color:var(--ink-3);line-height:1.55;padding:6px 0 2px}
.ev-pop-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 16px;border-radius:10px;
  font-size:13px;font-weight:600;transition:all .15s;border:1px solid transparent;
}
.btn svg{width:14px;height:14px}
.btn-primary{background:linear-gradient(135deg,var(--accent-soft),var(--accent));color:#fff;box-shadow:0 2px 10px var(--accent-ring)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 5px 16px var(--accent-ring)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{border-color:var(--border-strong);color:var(--ink-2);background:var(--surface)}
.btn-ghost:hover{background:var(--surface-hover);color:var(--ink)}
.btn-danger-ghost{border-color:transparent;color:var(--danger)}
.btn-danger-ghost:hover{background:var(--danger-weak)}
.btn.sm{height:29px;padding:0 12px;font-size:12px;border-radius:8px}

/* ==========================================================================
   TO DO
   ========================================================================== */
.todo-root{display:flex;flex:1;min-width:0}
.todo-side{width:236px;flex:0 0 236px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--surface-2),var(--surface) 30%)}
.tl-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;border-radius:9px;
  font-size:13px;color:var(--ink-2);transition:background .12s,color .12s;
}
.tl-item svg{width:16px;height:16px;opacity:.8}
.tl-item:hover{background:var(--surface-hover);color:var(--ink)}
.tl-item.is-active{background:var(--surface-active);color:var(--accent);font-weight:600}
.tl-item .t-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-item .t-count{font-size:11px;font-weight:700;color:var(--ink-3)}
.tl-item.is-active .t-count{color:var(--accent)}
.tl-item .emoji{font-size:15px}
.todo-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;overflow:hidden}
.todo-hero{
  padding:20px 28px 12px;position:relative;
}
.todo-hero h2{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.todo-hero .sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.todo-add{
  display:flex;align-items:center;gap:10px;margin:10px 28px 6px;padding:0 14px;height:44px;border-radius:13px;
  background:var(--surface-2);border:1px solid var(--border);transition:border-color .2s,box-shadow .2s;
}
.todo-add:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);background:var(--surface)}
.todo-add .plus{width:22px;height:22px;border-radius:50%;display:grid;place-content:center;color:var(--accent);flex:0 0 auto}
.todo-add .plus svg{width:14px;height:14px}
.todo-add input{flex:1;border:0;background:none;font-size:13.5px;height:100%}
.todo-add input:focus{outline:none}
.todo-add input::placeholder{color:var(--ink-3)}
.todo-add .add-due{display:flex;align-items:center;gap:5px;color:var(--ink-3);font-size:11.5px;border-radius:7px;padding:4px 8px}
.todo-add .add-due:hover{background:var(--surface-hover);color:var(--accent)}
.todo-add .add-due svg{width:12px;height:12px}
.task-scroll{flex:1;overflow-y:auto;padding:6px 22px 30px}
.task-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);padding:12px 8px 5px;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.task-group-label svg{width:11px;height:11px;transition:transform .2s}
.task-group-label.closed svg{transform:rotate(-90deg)}
.task-item{
  display:flex;align-items:center;gap:12px;padding:9px 12px;margin:2px 0;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--border);transition:background .14s,border-color .14s,transform .14s,opacity .3s;cursor:pointer;position:relative;
}
.task-item:hover{background:var(--surface);border-color:var(--border-strong);box-shadow:var(--shadow-s)}
.task-item.is-selected{border-color:var(--accent-ring);background:var(--surface-active)}
.task-radio{
  width:20px;height:20px;border-radius:50%;border:1.7px solid var(--ink-3);flex:0 0 auto;display:grid;place-content:center;
  transition:all .18s cubic-bezier(.2,.9,.3,1.3);color:#fff;
}
.task-radio:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.task-radio svg{width:11px;height:11px;opacity:0;transform:scale(.3);transition:all .2s cubic-bezier(.2,.9,.3,1.4)}
.task-item.done .task-radio{background:var(--ok);border-color:var(--ok)}
.task-item.done .task-radio svg{opacity:1;transform:scale(1)}
.task-body{flex:1;min-width:0}
.task-title{font-size:13.5px;font-weight:600;position:relative;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.task-title::after{content:"";position:absolute;left:0;top:52%;height:1.6px;width:0;background:var(--ink-3);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.task-item.done .task-title{color:var(--ink-3)}
.task-item.done .task-title::after{width:100%}
.task-sub{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.task-due{display:inline-flex;align-items:center;gap:4px}
.task-due.overdue{color:var(--danger);font-weight:700}
.task-due.today{color:var(--accent);font-weight:700}
.task-due svg{width:11px;height:11px}
.task-steps-sub{font-size:11.5px;color:var(--ink-3)}
.task-list-tag{font-size:10.5px;background:var(--surface-3);border-radius:6px;padding:1px 7px;border:1px solid var(--border)}
.task-star{color:var(--ink-3);flex:0 0 auto;border-radius:8px;padding:4px;transition:all .18s}
.task-star svg{width:16px;height:16px;transition:transform .25s cubic-bezier(.2,.9,.3,1.5)}
.task-star:hover{color:var(--star);transform:scale(1.15)}
.task-star.starred{color:var(--star)}
.task-star.starred svg{fill:currentColor;animation:star-pop .35s cubic-bezier(.2,.9,.3,1.5)}
@keyframes star-pop{0%{transform:scale(.4) rotate(-30deg)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.task-item.completing{animation:task-done .45s ease forwards}
@keyframes task-done{40%{opacity:1;transform:scale(1.01)}100%{opacity:.55}}
.task-confetti{position:absolute;pointer-events:none;z-index:5}
.task-confetti i{position:absolute;width:6px;height:6px;border-radius:2px;animation:confetti .7s ease-out forwards}
@keyframes confetti{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* task detail */
.task-detail{
  width:320px;flex:0 0 320px;border-left:1px solid var(--border);display:flex;flex-direction:column;
  background:var(--surface);animation:detail-in .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes detail-in{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.td-head{padding:16px 18px 10px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:flex-start}
.td-title{flex:1;font-size:15.5px;font-weight:700;line-height:1.35;border-radius:8px;padding:2px 4px;word-break:break-word}
.td-title[contenteditable="true"]:focus{outline:2px solid var(--accent-ring);background:var(--surface-2)}
.td-scroll{flex:1;overflow-y:auto;padding:10px 18px}
.td-section{margin-bottom:16px}
.td-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:7px}
.step-row{display:flex;align-items:center;gap:10px;padding:5px 4px;border-radius:8px;font-size:13px}
.step-row:hover{background:var(--surface-hover)}
.step-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink-3);display:grid;place-content:center;flex:0 0 auto;color:#fff;transition:all .15s}
.step-check svg{width:9px;height:9px;opacity:0}
.step-row.done .step-check{background:var(--ok);border-color:var(--ok)}
.step-row.done .step-check svg{opacity:1}
.step-row.done .step-text{color:var(--ink-3);text-decoration:line-through}
.step-text{flex:1;word-break:break-word}
.step-del{opacity:0;color:var(--ink-3);border-radius:6px;padding:2px 5px;font-size:12px}
.step-row:hover .step-del{opacity:1}
.step-del:hover{color:var(--danger);background:var(--danger-weak)}
.step-add{display:flex;align-items:center;gap:9px;margin-top:4px;color:var(--accent);font-size:12.5px;font-weight:600;border-radius:8px;padding:5px 6px;width:100%;text-align:left}
.step-add:hover{background:var(--accent-weak)}
.step-add svg{width:13px;height:13px}
.td-pills{display:flex;flex-wrap:wrap;gap:7px}
.td-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);
  border:1px solid var(--border-strong);border-radius:20px;padding:5px 12px;transition:all .15s;background:var(--surface);
}
.td-pill svg{width:13px;height:13px}
.td-pill:hover{border-color:var(--accent);color:var(--accent)}
.td-pill.on{background:var(--accent-weak);border-color:var(--accent);color:var(--accent)}
.td-pill.danger-on{background:var(--danger-weak);border-color:var(--danger);color:var(--danger)}
.td-note{width:100%;min-height:74px;border:1px solid var(--border);border-radius:10px;padding:9px 11px;font-size:12.5px;background:var(--surface-2);resize:vertical;line-height:1.5}
.td-note:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.td-foot{padding:10px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.td-del{color:var(--ink-3);border-radius:8px;padding:5px 8px}
.td-del svg{width:15px;height:15px}
.td-del:hover{color:var(--danger);background:var(--danger-weak)}

/* progress ring in todo hero */
.todo-progress{display:flex;align-items:center;gap:10px;margin-left:auto}
.ring{transform:rotate(-90deg)}
.ring .bg{stroke:var(--border-strong);opacity:.4}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.3,1)}
.ring-label{font-size:11.5px;color:var(--ink-3);font-weight:600;text-align:right;line-height:1.4}
.ring-label b{display:block;font-size:14px;color:var(--ink)}

/* ==========================================================================
   OVERLAYS: composer, dialogs, context menus, toasts, panels
   ========================================================================== */
.modal-scrim{
  position:fixed;inset:0;background:rgba(10,14,28,.42);backdrop-filter:blur(3px);z-index:200;
  display:flex;align-items:center;justify-content:center;animation:fade-in .18s ease;padding:20px;
}
.dialog{
  background:var(--surface);border-radius:18px;box-shadow:var(--shadow-l);border:1px solid var(--border);
  width:min(520px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  animation:dialog-in .28s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
.dialog-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
.dialog-x{width:30px;height:30px;border-radius:8px;display:grid;place-content:center;color:var(--ink-3)}
.dialog-x:hover{background:var(--surface-hover);color:var(--ink)}
.dialog-body{padding:16px 20px;overflow-y:auto}
.dialog-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:var(--surface-2)}

.field{margin-bottom:13px}
.field label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.field input[type="text"],.field input[type="email"],.field input[type="date"],.field input[type="time"],.field input[type="datetime-local"],.field select,.field textarea{
  width:100%;height:36px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface);
  padding:0 11px;font-size:13px;transition:border-color .18s,box-shadow .18s;color:var(--ink);
}
.field textarea{height:auto;padding:9px 11px;resize:vertical;min-height:70px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer;padding:4px 0}
.check-row input{accent-color:var(--accent);width:15px;height:15px}
.cat-picker{display:flex;gap:8px;flex-wrap:wrap}
.cat-pick{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;border:1.6px solid var(--border-strong);color:var(--ink-2);transition:all .15s}
.cat-pick i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.cat-pick:hover{border-color:var(--c);color:var(--ink)}
.cat-pick.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);color:color-mix(in srgb,var(--c) 75%,var(--ink))}

/* composer */
.composer{width:min(680px,94vw)}
.composer-fields{padding:8px 20px 0}
.c-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding:5px 0}
.c-row label{font-size:12px;color:var(--ink-3);font-weight:600;width:34px;flex:0 0 auto}
.c-row input{flex:1;border:0;background:none;height:32px;font-size:13px}
.c-row input:focus{outline:none}
.c-subject input{font-weight:600;font-size:14px}
.fmt-bar{display:flex;align-items:center;gap:1px;padding:7px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
.fmt-btn{width:29px;height:29px;border-radius:7px;display:grid;place-content:center;color:var(--ink-2);font-size:12.5px;transition:all .12s}
.fmt-btn svg{width:14.5px;height:14.5px}
.fmt-btn:hover{background:var(--surface-hover);color:var(--ink)}
.fmt-btn.on{background:var(--accent-weak);color:var(--accent)}
.fmt-sep{width:1px;height:16px;background:var(--border-strong);margin:0 6px}
.composer-body{min-height:190px;max-height:42vh;overflow-y:auto;padding:16px 22px;font-size:14px;line-height:1.6}
.composer-body:focus{outline:none}
.composer-body:empty::before{content:attr(data-ph);color:var(--ink-3)}
.composer-body blockquote{border-left:3px solid var(--quote-bar);padding-left:12px;color:var(--ink-3);margin:10px 0}
.composer-foot{display:flex;align-items:center;gap:8px;padding:11px 20px;border-top:1px solid var(--border);background:var(--surface-2)}
.composer-foot .hint{margin-left:auto;font-size:11px;color:var(--ink-3)}

/* context menu */
.ctx-menu{
  position:fixed;z-index:400;min-width:210px;background:var(--surface);border:1px solid var(--border);
  border-radius:13px;box-shadow:var(--shadow-l);padding:6px;animation:pop-in .16s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop-in{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
.ctx-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 11px;border-radius:8px;font-size:13px;color:var(--ink-2);transition:background .1s,color .1s}
.ctx-item svg{width:15px;height:15px;opacity:.8}
.ctx-item:hover{background:var(--surface-active);color:var(--ink)}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger:hover{background:var(--danger-weak)}
.ctx-item .kbd{margin-left:auto;font-size:10.5px;color:var(--ink-3)}
.ctx-sep{height:1px;background:var(--border);margin:5px 8px}
.ctx-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);padding:6px 11px 3px}
.ctx-sub{position:relative}
.ctx-submenu{position:absolute;left:calc(100% - 4px);top:-6px;min-width:180px;max-height:min(420px,80vh);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-l);padding:6px;display:none}
.ctx-sub:hover>.ctx-submenu{display:block;animation:pop-in .14s ease}
.ctx-submenu .ctx-item .f-dot{width:9px;height:9px;border-radius:3px;background:var(--c,#999)}
.ctx-item .chev{margin-left:auto;width:11px;height:11px;opacity:.6}

/* toasts */
.toast-root{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:12px;background:var(--surface);color:var(--ink);border:1px solid var(--border);
  border-radius:13px;box-shadow:var(--shadow-l);padding:11px 16px;font-size:13px;font-weight:500;pointer-events:auto;
  animation:toast-in .3s cubic-bezier(.2,.9,.3,1.25);max-width:min(480px,90vw);
}
.toast.leaving{animation:toast-out .25s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(12px) scale(.96)}}
.toast .t-ic{width:20px;height:20px;border-radius:50%;display:grid;place-content:center;flex:0 0 auto;color:#fff}
.toast .t-ic svg{width:11px;height:11px}
.toast .t-ic.ok{background:var(--ok)} .toast .t-ic.info{background:var(--accent)} .toast .t-ic.warn{background:var(--warn)}
.toast-action{color:var(--accent);font-weight:700;font-size:12.5px;border-radius:7px;padding:4px 9px;transition:background .13s}
.toast-action:hover{background:var(--accent-weak)}
.toast-progress{position:absolute;left:14px;right:14px;bottom:5px;height:2.5px;border-radius:2px;background:var(--border);overflow:hidden}
.toast{position:relative;overflow:hidden}
.toast-progress i{display:block;height:100%;background:var(--accent);animation:toast-bar linear forwards}
@keyframes toast-bar{from{width:100%}to{width:0}}

/* slide-over panels (settings / notifications) */
.panel-scrim{position:fixed;inset:0;background:rgba(10,14,28,.30);z-index:190;animation:fade-in .2s ease}
.side-panel{
  position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:var(--surface);z-index:195;
  box-shadow:var(--shadow-l);border-left:1px solid var(--border);display:flex;flex-direction:column;
  animation:panel-in .32s cubic-bezier(.2,.85,.3,1);
}
@keyframes panel-in{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.panel-title{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.01em}
.panel-body{flex:1;overflow-y:auto;padding:16px 20px 30px}
.set-section{margin-bottom:22px}
.set-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:9px}
.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme-card{
  border:2px solid var(--border);border-radius:13px;padding:10px;cursor:pointer;transition:all .18s;text-align:left;background:var(--surface);
}
.theme-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.theme-card.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.theme-thumb{height:52px;border-radius:8px;margin-bottom:8px;overflow:hidden;display:flex;box-shadow:var(--shadow-s)}
.theme-thumb .tt-side{width:26%}
.theme-thumb .tt-main{flex:1;padding:5px;display:flex;flex-direction:column;gap:3px}
.theme-thumb .tt-line{height:5px;border-radius:3px;opacity:.5}
.theme-thumb .tt-line:nth-child(2){width:70%}
.theme-thumb .tt-line:nth-child(3){width:45%}
.theme-card .tc-name{font-size:12px;font-weight:700}
.theme-card .tc-sub{font-size:10.5px;color:var(--ink-3)}
.th-light{background:#eef1f7}.th-light .tt-side{background:#fff}.th-light .tt-main{background:#fff}.th-light .tt-line{background:#4a556e}
.th-dark{background:#0d1220}.th-dark .tt-side{background:#171e31}.th-dark .tt-main{background:#171e31}.th-dark .tt-line{background:#aab4cf}
.accent-row{display:flex;gap:10px}
.accent-dot{width:34px;height:34px;border-radius:50%;position:relative;transition:transform .15s;box-shadow:var(--shadow-s)}
.accent-dot:hover{transform:scale(1.12)}
.accent-dot.on{box-shadow:0 0 0 3px var(--surface),0 0 0 5.5px currentColor}
.seg.full{width:100%}
.seg.full .seg-btn{flex:1}
.notif-item{display:flex;gap:12px;padding:12px 10px;border-radius:12px;transition:background .13s;cursor:pointer}
.notif-item:hover{background:var(--surface-hover)}
.notif-item.unread{background:var(--accent-weak)}
.notif-ic{width:34px;height:34px;border-radius:10px;display:grid;place-content:center;color:#fff;flex:0 0 auto}
.notif-ic svg{width:16px;height:16px}
.notif-main{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:600;line-height:1.35}
.notif-sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.notif-time{font-size:10.5px;color:var(--ink-3);flex:0 0 auto}
.notif-clear{margin:0 20px 16px}

/* waffle launcher */
.launcher{
  position:fixed;z-index:300;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-l);padding:14px;width:320px;animation:pop-in .2s cubic-bezier(.2,.9,.3,1.2);
}
.launcher h4{font-size:12px;font-weight:700;color:var(--ink-3);margin:0 4px 10px;text-transform:uppercase;letter-spacing:.07em}
.launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.launcher-app{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;border-radius:12px;transition:background .14s,transform .14s}
.launcher-app:hover{background:var(--surface-hover);transform:translateY(-2px)}
.launcher-app .la-ic{width:38px;height:38px;border-radius:11px;display:grid;place-content:center;color:#fff;box-shadow:var(--shadow-s)}
.launcher-app .la-ic svg{width:19px;height:19px}
.launcher-app span{font-size:11.5px;font-weight:600;color:var(--ink-2)}

/* drag ghost for mail */
.mail-drag-ghost{
  position:fixed;z-index:600;pointer-events:none;background:var(--surface);border:1.5px solid var(--accent);
  border-radius:11px;padding:8px 14px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-l);opacity:.95;
}

/* shortcut help */
.kbd-grid{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13px}
.kbd-grid kbd{font-family:var(--font);font-size:11px;background:var(--kbd-bg);border:1px solid var(--border-strong);border-radius:6px;padding:2px 8px;font-weight:600;justify-self:start}
.kbd-grid span{color:var(--ink-2)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
.mobile-only{display:none!important}
@media (max-width:1180px){
  .folder-pane{width:200px;flex-basis:200px}
  .msg-pane{width:320px;flex-basis:320px}
  .cal-side{width:220px;flex-basis:220px}
  .brand-app{display:none}
}
@media (max-width:980px){
  .folder-pane{position:absolute;z-index:40;height:100%;box-shadow:var(--shadow-l);transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.3,1);background:var(--surface)}
  .folder-pane.open{transform:none}
  .mail-root{position:relative}
  .msg-pane{flex:1;min-width:0;width:auto}
  .read-pane{display:none;position:absolute;inset:0;z-index:30}
  .read-pane.mobile-open{display:flex}
  .cal-side{display:none}
  .todo-side{display:none}
  .task-detail{position:absolute;right:0;top:0;bottom:0;z-index:35;box-shadow:var(--shadow-l)}
  .topbar-left,.topbar-right{min-width:0}
  .gsearch-kbd{display:none}
  .mobile-only{display:grid!important}
}
.rp-back{margin-right:4px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}