/* SHABAB MAIL 1.0 — navy + gold. 3 panes on PC (nav 232 · list 400 · reading), one pane at a time on phones (≤ 760px). Dark mode + RTL. */
@font-face{font-family:"Cormorant";font-weight:700;src:url(fonts/cormorant-700-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:400;src:url(fonts/montserrat-400-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:600;src:url(fonts/montserrat-600-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:700;src:url(fonts/montserrat-700-latin.woff2) format("woff2");font-display:swap}
:root{
  --navy:#0B263A;--navy-2:#123852;--navy-3:#1B4A6B;--gold:#D9AE4E;--gold-2:#C8961E;--gold-soft:rgba(217,174,78,.16);--cream:#FBF6EE;
  --bg:#F4F1EA;--pane:#FFFFFF;--pane-2:#FBF9F4;--ink:#16202B;--ink-2:#4A5563;--ink-3:#7B8591;--line:#E6E1D6;--line-2:#EFEBE2;--hover:#F6F2E8;--sel:#FFF4DD;--unread:#0B263A;
  --ok:#2E8B57;--warn:#C27A3C;--bad:#C0392B;--info:#2F6FB3;--shadow:0 10px 30px rgba(11,38,58,.14);--r:14px;--r-s:10px;
  --font:"Montserrat",-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic","Noto Kufi Arabic",Tahoma,Arial,sans-serif;--display:"Cormorant",Georgia,"Noto Naskh Arabic",serif;
  --nav-w:232px;--list-w:400px;--row-h:74px;color-scheme:light;
}
:root[data-theme="dark"]{--bg:#0A1521;--pane:#0F1D2C;--pane-2:#122334;--ink:#E8EEF5;--ink-2:#B4BFCC;--ink-3:#7E8B9A;--line:#1F3346;--line-2:#182A3B;--hover:#15283A;--sel:#1F2F1F;--sel:#24344a;--unread:#FFFFFF;--gold-soft:rgba(217,174,78,.22);--shadow:0 10px 30px rgba(0,0,0,.5);color-scheme:dark}
:root[data-density="compact"]{--row-h:56px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}
body{font:14px/1.45 var(--font);color:var(--ink);background:var(--bg);overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;padding:0}a{color:var(--info)}
.hidden{display:none!important}.muted{color:var(--ink-3)}.gold{color:var(--gold-2)}.sr{position:absolute;left:-9999px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(120,120,120,.28);border-radius:8px;border:2px solid transparent;background-clip:padding-box}

/* ---------- buttons / inputs */
.btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--pane);color:var(--ink);font-weight:600;white-space:nowrap;transition:background .15s,transform .05s}
.btn svg{width:18px;height:18px;flex:none}.btn:hover{background:var(--hover)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:default}
.btn.gold{background:linear-gradient(135deg,#E8C56E,var(--gold) 55%,var(--gold-2));color:#1B1400;border-color:transparent;box-shadow:0 6px 18px rgba(217,174,78,.35)}.btn.gold:hover{filter:brightness(1.04)}
.btn.navy{background:var(--navy);color:#fff;border-color:transparent}.btn.navy:hover{background:var(--navy-2)}.btn.danger{color:var(--bad);border-color:rgba(192,57,43,.35)}.btn.sm{height:32px;padding:0 12px;font-size:13px}.btn.ghost{border-color:transparent;background:transparent}
.ib{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--ink-2)}.ib:hover{background:var(--hover);color:var(--ink)}.ib svg{width:20px;height:20px}.ib.on{color:var(--gold-2)}.ib.sm{width:32px;height:32px}.ib.sm svg{width:18px;height:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.3px}
.inp,select.inp,textarea.inp{height:42px;padding:0 14px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--pane);color:var(--ink);width:100%;outline:0;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}textarea.inp{height:auto;padding:10px 14px;min-height:90px;resize:vertical}
.row{display:flex;gap:12px;align-items:center}.row>*{flex:1}.row.auto>*{flex:0 0 auto}.grow{flex:1 1 auto;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--pane-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2)}.chip.on{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}.chip button{display:inline-flex}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.toggle input{width:18px;height:18px;accent-color:var(--gold-2)}
.err{color:var(--bad);font-size:13px;min-height:18px}.okt{color:var(--ok);font-size:13px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;background:var(--gold);color:#1B1400;font-size:11px;font-weight:700}

/* ---------- login / setup */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(1200px 600px at 20% -10%,#1B4A6B 0%,var(--navy) 45%,#061626 100%);padding:16px;overflow:auto}
.gate .card{width:100%;max-width:420px;background:var(--pane);border-radius:22px;padding:34px 30px;box-shadow:var(--shadow);animation:up .35s ease}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}.brand .mark{width:44px;height:44px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--gold);font-family:var(--display);font-size:26px;font-weight:700}
.brand h1{font:700 30px/1 var(--display);margin:0;letter-spacing:.5px;color:var(--navy)}:root[data-theme="dark"] .brand h1{color:var(--gold)}.brand small{display:block;font:600 11px var(--font);letter-spacing:2px;color:var(--gold-2);text-transform:uppercase}
.gate p{color:var(--ink-2);margin:6px 0 20px}.gate .foot{margin-top:18px;font-size:12px;color:var(--ink-3);text-align:center}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- shell */
#app{display:grid;grid-template-columns:var(--nav-w) var(--list-w) 1fr;height:100%;background:var(--bg)}
#app.nexus{--nav-w:212px}
nav#nav{background:var(--navy);color:#DCE6EF;display:flex;flex-direction:column;min-height:0}
#nav .top{padding:18px 16px 10px;display:flex;align-items:center;gap:10px}#nav .top .mark{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--gold);font-family:var(--display);font-size:22px;font-weight:700}
#nav .top h1{font:700 22px/1 var(--display);margin:0;color:#fff;letter-spacing:.5px}#nav .top small{display:block;font:600 9px var(--font);letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-top:3px}
#nav .ncompose{margin:8px 16px 14px}#nav .ncompose .btn{width:100%;justify-content:center;height:42px}
#nav .scroll{flex:1;overflow:auto;min-height:0;padding:0 8px 10px}
.nitem{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:10px;color:#C9D6E2;cursor:pointer;font-weight:600;font-size:13.5px;user-select:none}
.nitem svg{width:18px;height:18px;flex:none;opacity:.85}.nitem:hover{background:rgba(255,255,255,.06);color:#fff}.nitem.on{background:rgba(217,174,78,.18);color:#fff}.nitem.on svg{color:var(--gold);opacity:1}
.nitem .n{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--gold)}.nitem.on .n{color:#fff}.nitem .dot{width:8px;height:8px;border-radius:50%;flex:none}
.nsec{display:flex;align-items:center;justify-content:space-between;padding:14px 10px 6px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:700}.nsec button{color:rgba(255,255,255,.6);display:inline-flex}.nsec button:hover{color:#fff}
.acc{margin-top:4px}.acc .nitem{height:34px;font-size:13px}.acc .sub .nitem{padding-inline-start:30px;font-weight:500;color:#A9B8C6;height:32px}.acc .sub .nitem.on{color:#fff}
.acc .state{font-size:11px;color:rgba(255,255,255,.5);padding:0 10px 4px 30px;display:flex;gap:6px;align-items:center}.acc .state.bad{color:#F3A09A}
#nav .bottom{padding:10px 12px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:6px}#nav .bottom .ib{color:#C9D6E2}#nav .bottom .ib:hover{background:rgba(255,255,255,.08);color:#fff}
#nav .sync{font-size:11px;color:rgba(255,255,255,.55);padding:0 16px 8px;display:flex;align-items:center;gap:6px;min-height:18px}#nav .sync .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 1.2s infinite}@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- list */
section#list{background:var(--pane);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0}
.lhead{padding:12px 14px 8px;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:8px}
.lhead .title{display:flex;align-items:center;gap:8px;min-height:36px}.lhead h2{font:700 24px/1.1 var(--display);margin:0;color:var(--navy);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:root[data-theme="dark"] .lhead h2{color:#fff}
.lhead h2 small{font:600 11px var(--font);color:var(--ink-3);margin-inline-start:8px;letter-spacing:.5px}
.searchbox{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:12px;background:var(--pane-2);border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
.searchbox:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);background:var(--pane)}.searchbox svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.searchbox input{flex:1;border:0;background:transparent;outline:0;min-width:0;height:100%}.searchbox .ib{width:30px;height:30px}
.scope{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.scope .chip{cursor:pointer}
.bulk{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--sel);border-bottom:1px solid var(--line)}.bulk .n{font-weight:700;margin-inline-end:auto;padding-inline-start:6px}
.rows{flex:1;overflow:auto;min-height:0;overscroll-behavior:contain}
.mrow{display:grid;grid-template-columns:4px 44px 1fr auto;gap:0 10px;align-items:center;height:var(--row-h);padding:0 12px 0 0;border-bottom:1px solid var(--line-2);cursor:pointer;position:relative;user-select:none;outline:0}
.mrow:hover{background:var(--hover)}.mrow.on{background:var(--sel)}.mrow.cur{box-shadow:inset 3px 0 0 var(--gold)}[dir=rtl] .mrow.cur{box-shadow:inset -3px 0 0 var(--gold)}.mrow.sel{background:var(--sel)}
.mrow .bar{width:4px;height:100%;background:var(--acc,transparent);opacity:.9}
.mrow .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;position:relative;background:var(--avc,var(--navy-3))}
.mrow .av .ck{position:absolute;inset:0;border-radius:50%;background:var(--navy);display:none;place-items:center;color:var(--gold)}.mrow.sel .av .ck,.sel-mode .mrow .av:hover .ck{display:grid}.sel-mode .mrow .av .ck{display:grid;background:var(--pane-2);color:var(--ink-3)}.sel-mode .mrow.sel .av .ck{background:var(--navy);color:var(--gold)}
.mrow .mid{min-width:0;display:flex;flex-direction:column;gap:2px}.mrow .l1{display:flex;align-items:center;gap:6px;min-width:0}.mrow .who{font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.mrow .subj{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.mrow .snip{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow.unread .who,.mrow.unread .subj{font-weight:700;color:var(--unread)}.mrow.unread .av::after{content:"";position:absolute;top:-1px;inset-inline-end:-1px;width:11px;height:11px;border-radius:50%;background:var(--gold);border:2px solid var(--pane)}
.mrow .side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11.5px;color:var(--ink-3);white-space:nowrap}[dir=rtl] .mrow .side{align-items:flex-start}.mrow.unread .side .t{color:var(--gold-2);font-weight:700}
.mrow .icons{display:flex;gap:4px;align-items:center;min-height:18px}.mrow .icons svg{width:15px;height:15px;color:var(--ink-3)}.mrow .star{display:inline-flex;color:var(--ink-3);opacity:0}.mrow:hover .star,.mrow .star.on{opacity:1}.mrow .star.on{color:var(--gold-2)}.mrow .star svg{width:16px;height:16px}
.mrow .tag{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);background:var(--pane-2);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
:root[data-density="compact"] .mrow{grid-template-columns:4px 32px 1fr auto}:root[data-density="compact"] .mrow .av{width:30px;height:30px;font-size:12px}:root[data-density="compact"] .mrow .snip{display:none}
.empty{padding:60px 20px;text-align:center;color:var(--ink-3)}.empty .big{font:700 26px var(--display);color:var(--ink-2);margin-bottom:6px}
.loadmore{display:flex;justify-content:center;padding:14px}.skel{height:var(--row-h);border-bottom:1px solid var(--line-2);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:sh 1.2s infinite}@keyframes sh{to{background-position:-200% 0}}
.daysep{position:sticky;top:0;z-index:1;background:var(--pane);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3);padding:8px 14px 4px;border-bottom:1px solid var(--line-2)}

/* ---------- reading pane */
section#read{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}
.rempty{flex:1;display:grid;place-items:center;color:var(--ink-3);text-align:center;padding:30px}.rempty .glyph{font:700 72px var(--display);color:var(--gold);opacity:.5;line-height:1}.rempty p{margin:8px 0 0;max-width:360px}.rempty kbd{font:12px var(--font);padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:var(--pane)}
.rtool{display:flex;align-items:center;gap:2px;padding:8px 12px;flex-wrap:wrap}.rtool .sp{flex:1}
.rcard{flex:1;overflow:auto;min-height:0;padding:0 16px 24px}.rbox{background:var(--pane);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.05);border:1px solid var(--line-2);overflow:hidden;max-width:980px;margin:0 auto}
.rhead{padding:20px 22px 14px;border-bottom:1px solid var(--line-2)}.rhead h2{font:700 26px/1.2 var(--display);margin:0 0 12px;color:var(--navy);word-wrap:break-word}:root[data-theme="dark"] .rhead h2{color:#fff}
.rwho{display:flex;gap:12px;align-items:flex-start}.rwho .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;background:var(--avc,var(--navy-3));flex:none}
.rwho .meta{flex:1;min-width:0}.rwho .nm{font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rwho .ad{color:var(--ink-3);font-size:12.5px;font-weight:500}.rwho .to{color:var(--ink-2);font-size:12.5px;margin-top:2px}.rwho .to button{color:var(--info);font-weight:600}
.rwho .dt{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.rdetails{margin-top:10px;font-size:12.5px;color:var(--ink-2);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;background:var(--pane-2);border-radius:10px;padding:10px 12px}.rdetails b{color:var(--ink-3);font-weight:600}
.notice{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--gold-soft);border-bottom:1px solid var(--line-2);font-size:13px;flex-wrap:wrap}.notice .btn{height:30px}
.atts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.att{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--pane-2);text-decoration:none;color:var(--ink);font-size:13px;max-width:100%}.att:hover{border-color:var(--gold)}.att .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700;background:var(--navy-3)}
.att .an{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.att .as{color:var(--ink-3);font-size:11.5px}
.rbody{min-height:120px;position:relative}.rbody iframe{width:100%;border:0;display:block;min-height:120px;background:#fff;color-scheme:light}.rbody .wait{padding:30px;text-align:center;color:var(--ink-3)}
.thread{padding:10px 16px 14px;border-top:1px solid var(--line-2)}.thread h4{margin:4px 0 8px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)}.thread .ti{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13px}.thread .ti:hover{background:var(--hover)}.thread .ti .d{margin-inline-start:auto;color:var(--ink-3);font-size:12px;white-space:nowrap}
.quickreply{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line-2)}

/* ---------- compose */
.compose-wrap{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 24px 0 0;pointer-events:none}
.compose{pointer-events:auto;width:min(720px,100%);height:min(680px,calc(100% - 20px));background:var(--pane);border-radius:16px 16px 0 0;box-shadow:var(--shadow);display:flex;flex-direction:column;border:1px solid var(--line);border-bottom:0;animation:up .25s ease}
.compose.max{width:min(1100px,100%);height:calc(100% - 20px)}
.compose .chead{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 18px;background:var(--navy);color:#fff;border-radius:16px 16px 0 0}.compose .chead b{flex:1;font:700 18px var(--display)}.compose .chead .ib{color:#DCE6EF}.compose .chead .ib:hover{background:rgba(255,255,255,.1);color:#fff}
.cline{display:flex;align-items:center;gap:8px;padding:0 18px;min-height:44px;border-bottom:1px solid var(--line-2)}.cline label{width:54px;color:var(--ink-3);font-size:12.5px;font-weight:600;flex:none}.cline input,.cline select{flex:1;border:0;background:transparent;outline:0;height:42px;min-width:0}.cline .ib.sm{color:var(--ink-3)}
.cline .pills{display:flex;flex-wrap:wrap;gap:6px;flex:1;align-items:center;padding:6px 0;position:relative}.pill{display:inline-flex;align-items:center;gap:4px;background:var(--pane-2);border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 10px;font-size:12.5px;max-width:100%}.pill.bad{border-color:var(--bad);color:var(--bad)}.pill button{display:inline-flex;color:var(--ink-3)}.pills input{flex:1;min-width:120px;height:30px}
.sugg{position:absolute;top:100%;inset-inline-start:0;z-index:5;background:var(--pane);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:260px;max-width:100%;overflow:hidden}.sugg div{padding:8px 12px;cursor:pointer;font-size:13px}.sugg div:hover,.sugg div.on{background:var(--hover)}.sugg small{color:var(--ink-3);margin-inline-start:6px}
.ctools{display:flex;gap:2px;padding:6px 12px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}.ctools .ib{width:32px;height:32px;border-radius:8px}.ctools .ib svg{width:18px;height:18px}
.ebody{flex:1;overflow:auto;padding:16px 20px;outline:0;min-height:120px;line-height:1.55;font-size:15px}.ebody:empty::before{content:attr(data-ph);color:var(--ink-3)}.ebody blockquote{border-inline-start:3px solid var(--gold);margin:8px 0;padding:4px 12px;color:var(--ink-2)}.ebody img{max-width:100%}
.catts{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px}.catts .att{padding:4px 8px}.catts .att button{display:inline-flex;color:var(--ink-3)}
.cfoot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line-2)}.cfoot .st{font-size:12px;color:var(--ink-3);flex:1;text-align:end}
.compose.drop .ebody{outline:2px dashed var(--gold);outline-offset:-8px}

/* ---------- settings */
.settings{flex:1;overflow:auto;padding:0 16px 30px}.sbox{max-width:860px;margin:0 auto}.sbox h2{font:700 30px var(--display);color:var(--navy);margin:10px 0 14px}:root[data-theme="dark"] .sbox h2{color:#fff}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow:auto}.tabs button{padding:10px 14px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap}.tabs button.on{color:var(--ink);border-color:var(--gold)}
.card{background:var(--pane);border:1px solid var(--line-2);border-radius:var(--r);padding:20px 22px;margin-bottom:16px}.card h3{margin:0 0 12px;font:700 20px var(--display);color:var(--navy)}:root[data-theme="dark"] .card h3{color:var(--gold)}.card h4{margin:14px 0 8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}
.acard{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}.acard:last-child{border-bottom:0}.acard .dot{width:14px;height:14px;border-radius:50%;flex:none}.acard .in{flex:1;min-width:0}.acard .in b{display:block}.acard .in small{color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acard .st{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--pane-2);border:1px solid var(--line)}.acard .st.ok{color:var(--ok)}.acard .st.bad{color:var(--bad)}.acard .st.run{color:var(--gold-2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.grid3{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:0 12px}
.testres{display:flex;flex-direction:column;gap:6px;font-size:13px;margin:6px 0 10px}.testres .ok{color:var(--ok)}.testres .bad{color:var(--bad)}
.hint{font-size:12.5px;color:var(--ink-3);background:var(--pane-2);border-radius:10px;padding:10px 12px;margin-bottom:12px;line-height:1.5}
.trusted{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- modal, toast, menu */
.modal{position:fixed;inset:0;z-index:60;background:rgba(6,22,38,.55);display:grid;place-items:center;padding:16px;animation:fade .15s}.modal .box{background:var(--pane);border-radius:16px;padding:22px;width:min(480px,100%);box-shadow:var(--shadow);max-height:90vh;overflow:auto}.modal h3{margin:0 0 10px;font:700 22px var(--display)}.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
@keyframes fade{from{opacity:0}to{opacity:1}}
.toast{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(-50%);z-index:80;background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;font-weight:600;max-width:calc(100% - 32px);animation:up .25s}[dir=rtl] .toast{transform:translateX(50%)}.toast.bad{background:var(--bad)}.toast button{color:var(--gold);font-weight:700}
.menu{position:fixed;z-index:70;background:var(--pane);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:200px;padding:6px;animation:fade .12s;max-height:70vh;overflow:auto}.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;text-align:start;font-weight:500}.menu button:hover{background:var(--hover)}.menu button svg{width:17px;height:17px;color:var(--ink-3)}.menu hr{border:0;border-top:1px solid var(--line-2);margin:4px 0}.menu .h{padding:6px 12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}
.folderpick .f{padding-inline-start:24px}

/* ---------- phone */
.mob{display:none}.fab{display:none}
@media (max-width:1100px){:root{--list-w:340px;--nav-w:212px}}
@media (max-width:900px){#app{grid-template-columns:var(--list-w) 1fr}nav#nav{position:fixed;inset:0 auto 0 0;width:280px;z-index:50;transform:translateX(-100%);transition:transform .22s;box-shadow:none}[dir=rtl] nav#nav{inset:0 0 0 auto;transform:translateX(100%)}#app.navopen nav#nav{transform:none;box-shadow:var(--shadow)}.mob{display:inline-flex}.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45}}
@media (max-width:760px){
  #app{grid-template-columns:1fr}section#list,section#read{grid-column:1;grid-row:1}
  #app.view-read section#list{display:none}#app:not(.view-read) section#read{display:none}
  .lhead{padding:10px 12px 8px}.lhead h2{font-size:22px}.mrow{padding-inline-end:10px}.rcard{padding:0 8px 20px}.rhead{padding:16px 16px 12px}.rhead h2{font-size:22px}.rtool{padding:6px 6px;overflow:auto;flex-wrap:nowrap}.rtool .lbl{display:none}
  .compose-wrap{padding:0}.compose{width:100%;height:100%;border-radius:0}.compose .chead{border-radius:0}.cline{padding:0 12px}.ebody{padding:12px 14px}.grid2,.grid3{grid-template-columns:1fr}
  .settings{padding:0 10px 30px}.card{padding:16px}.toast{bottom:14px;width:calc(100% - 20px);justify-content:space-between}
  .modal .box{padding:18px}
  .fab{display:inline-flex;position:fixed;inset-inline-end:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;height:54px;padding:0 20px;border-radius:18px;align-items:center;gap:8px;font-weight:700;background:linear-gradient(135deg,#E8C56E,var(--gold) 55%,var(--gold-2));color:#1B1400;box-shadow:0 10px 24px rgba(11,38,58,.28)}.fab svg{width:20px;height:20px}
  #app.view-read .fab,#app.sel-mode .fab{display:none}.rows{padding-bottom:84px}
}
@media print{nav#nav,section#list,.rtool,.notice,.thread{display:none!important}#app{grid-template-columns:1fr}.rbox{border:0;box-shadow:none}}

/* ---------- mixed Arabic / English text: each line takes its own direction (English subject in Arabic screen: ellipsis on the right side of the words) */
.mrow .who,.mrow .subj,.mrow .snip,.rhead h2,.rwho .nm,.thread .ti span,.att .an,.pill,.cline input,.cline select,.acard .in small,.sugg div{unicode-bidi:plaintext}
[dir=rtl] .mrow .mid,[dir=rtl] .rhead h2{text-align:right}
.ebody,.ebody p,.ebody div,.ebody li,.ebody blockquote,.ebody h1,.ebody h2,.ebody h3{unicode-bidi:plaintext;text-align:start}
/* inside NEXUS (narrower menu): brand on one line; dialogs: buttons always visible */
#app.nexus #nav .top h1{font-size:19px;white-space:nowrap}
.modal .box{padding-bottom:0}.modal .acts{position:sticky;bottom:0;background:var(--pane);margin:16px -22px 0;padding:12px 22px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
/* 1.0.1: eye (show / hide) in every password box */
.pw-wrap{position:relative;display:block;width:100%}.pw-wrap>.inp{padding-inline-end:46px}
.pw-eye{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:var(--r-s);background:transparent;color:var(--ink);opacity:.65;display:grid;place-items:center;cursor:pointer;padding:0}
.pw-eye:hover,.pw-eye:focus-visible{opacity:1;background:var(--hover);outline:0}.pw-eye svg{width:19px;height:19px}