:root {
  --bg: #ecebe9; --sidebar: #f3f1ee; --pane: #ffffff; --ink: #1c1b1a; --dim: #6f6b66;
  --hair: #e3e0dc; --blue: #3f86d6; --blue-d: #1f4d87; --soft: #eaf2fc; --sel: #d7e6f7;
  --ok: #2f8f5b; --flag: #e8892b;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --pixel: "Silkscreen", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#101317; --sidebar:#181c21; --pane:#1b1f24; --ink:#eef1f4; --dim:#9aa2ab;
    --hair:#2a2f36; --blue:#6aa7ec; --blue-d:#6aa7ec; --soft:#15283e; --sel:#1d3a5c;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sys); -webkit-font-smoothing: antialiased; }
svg { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

/* setup / unlock screens */
.screen { position: fixed; inset: 0; display: none; place-items: center; background: var(--bg); z-index: 20; padding: 24px; }
.screen.on { display: grid; }
.card { background: var(--pane); border: 1px solid var(--hair); border-radius: 18px; max-width: 420px; width: 100%; padding: 30px 28px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
.card .mk { width: 76px; margin: 0 auto 14px; }
.card h1 { font-size: 21px; margin: 0 0 6px; letter-spacing: -0.02em; }
.card p { color: var(--dim); font-size: 14px; margin: 0 0 16px; line-height: 1.5; }
.card input { width: 100%; border: 1px solid var(--hair); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px; background: var(--bg); color: var(--ink); margin-bottom: 10px; }
.btn { width: 100%; border: 0; background: var(--blue); color: #fff; border-radius: 10px; padding: 12px; font-size: 15px; font-weight: 600; }
.btn:disabled { opacity: 0.5; }
.btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--hair); margin-top: 8px; }
.note { font-size: 12px; color: var(--dim); margin-top: 12px; line-height: 1.5; }
.err { color: #d14; font-size: 13px; min-height: 18px; margin: 4px 0; }

/* app shell: three panes */
.app { display: grid; grid-template-columns: 220px 340px 1fr; height: 100%; background: var(--pane); }
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.side { background: var(--sidebar); border-right: 1px solid var(--hair); }
.brand { display: flex; align-items: center; gap: 9px; padding: 16px 16px 10px; }
.brand .mk { width: 26px; } .brand b { font-family: var(--pixel); font-size: 11px; font-weight: 400; }
.brand b .bl { color: var(--blue); }
.boxes { flex: 1; overflow-y: auto; padding: 4px 8px; }
.grp { font-size: 11px; font-weight: 600; color: var(--dim); padding: 12px 8px 4px; }
.box { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; text-align: left; padding: 6px 8px; border-radius: 7px; font-size: 13.5px; }
.box:hover { background: rgba(0,0,0,0.04); }
.box.on { background: var(--sel); }
.box svg { width: 16px; color: var(--blue); flex: none; }
.box .n { margin-left: auto; font-size: 12px; color: var(--dim); }
.foot { border-top: 1px solid var(--hair); padding: 10px 14px; font-size: 12px; color: var(--ok); display: flex; align-items: center; gap: 7px; }
.foot svg { width: 14px; }
.foot button { margin-left: auto; border: 1px solid var(--hair); background: var(--pane); border-radius: 6px; padding: 3px 9px; font-size: 12px; color: var(--ink); }

.list { border-right: 1px solid var(--hair); }
.lhead { padding: 14px 16px 8px; }
.lhead h2 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.lhead p { margin: 2px 0 0; font-size: 12px; color: var(--dim); }
.search { margin: 6px 12px; display: flex; align-items: center; gap: 6px; background: var(--hair); border-radius: 8px; padding: 0 9px; height: 30px; color: var(--dim); }
.search svg { width: 14px; } .search input { border: 0; outline: none; background: transparent; flex: 1; font: inherit; font-size: 13.5px; color: var(--ink); min-width: 0; }
.rows { flex: 1; overflow-y: auto; }
.row { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 16px; border-bottom: 1px solid var(--hair); }
.row:hover { background: rgba(0,0,0,0.025); } .row.on { background: var(--sel); }
.row .r1 { display: flex; align-items: baseline; gap: 8px; }
.row .who { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.unread .who::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-right: 7px; vertical-align: 1px; }
.row .when { font-size: 12px; color: var(--dim); flex: none; }
.row .subj { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .prev { font-size: 13px; color: var(--dim); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .to { display: inline-block; font-size: 11px; color: var(--blue); background: var(--soft); border-radius: 5px; padding: 0 5px; margin-top: 5px; }
.empty { padding: 44px 20px; text-align: center; color: var(--dim); font-size: 13px; }

.read { background: var(--pane); }
.rbar { height: 50px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--hair); }
.rbar .icon { border: 0; background: transparent; width: 32px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--dim); }
.rbar .icon:hover { background: rgba(0,0,0,0.05); color: var(--ink); } .rbar .icon svg { width: 18px; }
.msg { flex: 1; overflow-y: auto; padding: 22px 30px 50px; }
.msg h3 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.25; }
.frm { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: var(--blue); flex: none; }
.frm .m { flex: 1; min-width: 0; font-size: 13px; color: var(--dim); } .frm .m b { color: var(--ink); font-size: 14px; }
.frm .d { font-size: 12px; color: var(--dim); white-space: nowrap; }
.secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); margin-top: 12px; }
.secure svg { width: 13px; }
.body { font-size: 15px; line-height: 1.6; margin-top: 16px; white-space: pre-wrap; max-width: 68ch; word-wrap: break-word; }
.att { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; margin-top: 16px; font-size: 13px; }
.att svg { width: 18px; color: var(--blue); }
.blank { display: grid; place-items: center; height: 100%; color: var(--dim); font-size: 13px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 10px); background: var(--ink); color: var(--pane); padding: 9px 16px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .app { grid-template-columns: 100%; }
  .app > .pane { display: none; }
  .app[data-pane="side"] .side, .app[data-pane="list"] .list, .app[data-pane="read"] .read { display: flex; }
  .back { display: inline-flex !important; }
}
.back { display: none; border: 0; background: transparent; color: var(--blue); align-items: center; gap: 2px; padding: 4px 6px; }
.back svg { width: 18px; }

/* toolbar buttons (compose / reply / forward) */
.tbtn { border: 0; background: transparent; width: 32px; height: 30px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--dim); }
.tbtn:hover { background: rgba(0,0,0,0.05); color: var(--ink); } .tbtn svg { width: 18px; }
.tbtn.accent { color: var(--blue); }
.lbar { display: flex; align-items: center; gap: 4px; padding: 6px 12px 0; }
.lbar .sp { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hair); background: var(--pane); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: var(--ink); }
.pill:hover { border-color: var(--blue); color: var(--blue); } .pill svg { width: 14px; }
.pill.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.pill.primary:hover { color: #fff; filter: brightness(1.05); }
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }

/* compose sheet */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.28); display: none; align-items: center; justify-content: center; z-index: 30; padding: 16px; }
.scrim.on { display: flex; }
.sheet { background: var(--pane); width: min(680px, 100%); height: min(560px, 92vh); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
.sheet-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.sheet-bar h3 { margin: 0; font-size: 15px; flex: 1; text-align: center; }
.txtbtn { border: 0; background: transparent; color: var(--blue); padding: 4px 8px; font-size: 14px; }
.sendbtn { border: 0; background: var(--blue); color: #fff; border-radius: 999px; height: 32px; padding: 0 16px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.sendbtn svg { width: 15px; } .sendbtn:disabled { opacity: 0.5; }
.field { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.field label { color: var(--dim); width: 60px; flex: none; }
.field input, .field select { flex: 1; border: 0; outline: none; background: transparent; font: inherit; color: var(--ink); min-width: 0; }
.field select { cursor: pointer; }
.field .mini { border: 0; background: transparent; color: var(--blue); font-size: 13px; padding: 2px 6px; }
.cbody { flex: 1; border: 0; outline: none; resize: none; padding: 14px 16px; font: inherit; font-size: 15px; line-height: 1.6; background: transparent; color: var(--ink); }
.cerr { color: #d14; font-size: 13px; padding: 0 16px; min-height: 0; }
.cerr:not(:empty) { padding: 8px 16px 0; }
@media (max-width: 760px) {
  .scrim { align-items: flex-end; padding: 0; }
  .sheet { width: 100%; height: 94vh; border-radius: 16px 16px 0 0; }
}

/* sidebar label dots */
.dotlbl { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; }
.box .dotlbl { margin: 0 2px; }

/* list row extras */
.row .subj .imp { color: #d14; font-weight: 800; margin-right: 4px; }
.row .subj .flagi { display: inline-flex; color: var(--flag); margin-left: 4px; vertical-align: -2px; }
.row .subj .flagi svg { width: 13px; }
.lblrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.lbl { font-size: 11px; color: #fff; background: var(--lc, #3f86d6); border-radius: 5px; padding: 0 6px; line-height: 16px; }

/* reader quick actions + label toggles */
.quickrow { display: flex; gap: 8px; flex-wrap: wrap; }
.ltogs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.ltogs .lh { font-size: 12px; color: var(--dim); }
.ltog { border: 1px solid var(--lc, #3f86d6); color: var(--lc, #3f86d6); background: transparent; border-radius: 999px; padding: 4px 11px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.ltog.on { background: var(--lc, #3f86d6); color: #fff; }
.ltog svg { width: 13px; }

/* modal body + settings */
.mbody { flex: 1; overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
.settabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--hair); }
.settab { border: 0; background: transparent; padding: 8px 12px; border-radius: 7px 7px 0 0; font-size: 13.5px; color: var(--dim); }
.settab.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--blue); }
.setbody { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.setrow { display: flex; flex-direction: column; gap: 4px; }
.setrow label { font-size: 12.5px; color: var(--dim); }
.setrow textarea, .setadd input { border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; background: var(--pane); color: var(--ink); resize: vertical; }
.setadd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 16px 16px 0; }
.setadd input[type="text"], .setadd input:not([type]) , .setadd input[type="color"] { }
.setadd input:not([type="color"]):not([type="file"]):not([type="date"]) { flex: 1; min-width: 140px; }
.setadd input[type="color"] { width: 36px; height: 34px; padding: 2px; border: 1px solid var(--hair); border-radius: 8px; background: none; }
.btnsm { border: 0; background: var(--blue); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; }
.btnsm.ghost { background: transparent; color: var(--blue); border: 1px solid var(--hair); }
.blrow { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--hair); border-radius: 8px; padding: 7px 12px; font-size: 13.5px; margin: 8px 16px 0; }
.blrow .rm { border: 0; background: transparent; color: var(--dim); display: inline-grid; place-items: center; }
.blrow .rm svg { width: 15px; }
#lbl-list, #bl-list, #ad-list, #v-list { padding-bottom: 16px; }
.muted { color: var(--dim); font-size: 13px; padding: 10px 16px; margin: 0; }

/* vault */
.vault-add input[type="file"] { font-size: 12.5px; }
.vrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; margin: 8px 16px 0; }
.vmeta { min-width: 0; } .vmeta b { font-size: 14px; } .vmeta span { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.vacts { display: flex; gap: 6px; flex: none; }