/* Ashna lane: soft gray canvas, white 18px cards, filled inputs, weservs blue accent */
:root{--bg:#f6f6f8;--sidew:236px;--card:#ffffff;--bd:#ececf0;--tx:#23252d;--mut:#8a8fa0;--ac:#c5221f;--pill:#c5221f;--acc:#07a3fe;--ink:#17181d;--fill:#f1f1f5;--sh:0 8px 28px rgba(23,24,29,.08)}
[data-theme=dark]{--bg:#121216;--card:#1c1c22;--bd:#2a2a33;--tx:#eceaf2;--mut:#9a9ab0;--ac:#ff8a80;--pill:#ff8a80;--acc:#3ec0fd;--ink:#f2f0ff;--fill:#26262e;--sh:0 8px 28px rgba(0,0,0,.45)}
*{font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:300;box-sizing:border-box}
body{background:linear-gradient(to bottom right,#ffffff 0%,#ffffff 70%,#c2d7ff 100%);color:var(--tx);font-size:14px;line-height:1.6;margin:0;visibility:hidden}
body[data-theme="dark"]{background:linear-gradient(to bottom right,#121216 0%,#121216 70%,#2c2350 100%)}
body.ready{visibility:visible}
h1,h2,h3{font-weight:500}small{font-size:13px;color:var(--mut)}
button{border:none;border-radius:999px;background:var(--fill);color:var(--tx);padding:8px 16px;font-size:13px;font-weight:400;cursor:pointer}
button:hover{box-shadow:var(--sh)}
input,textarea,select{border:none;border-radius:12px;background:var(--fill);color:var(--tx);padding:10px 14px;font-size:14px;font-weight:300}
input:focus,textarea:focus,[contenteditable]:focus{outline:none;box-shadow:inset 0 0 0 1px var(--acc)}
/* top bar */
#topbar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:transparent;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:50}
#topbar .logo{font-size:18px;white-space:nowrap;flex:none;display:flex;flex-direction:row;align-items:center;gap:8px;line-height:1.25;cursor:pointer}
#topbar .logo .logotext{display:flex;flex-direction:column;line-height:1.25}
#topbar .logo .logorow{display:flex;align-items:center;gap:6px}
#topbar .logo #brandicon{width:40px;height:40px;border-radius:50%;flex:none}
#topbar .logo .tagline{font-size:10px;letter-spacing:2px;color:var(--mut);font-weight:500}
#topbar .logo .l-web{color:#07a3fe;font-weight:700;letter-spacing:.5px}
#topbar .logo .l-mail{color:#013ba8;font-weight:700}
[data-theme=dark] #topbar .logo .l-web{color:#07a3fe}
[data-theme=dark] #topbar .logo .l-mail{color:#3ec0fd}
#topbar .brand{flex:none;display:flex;align-items:center;gap:8px;width:276px;overflow:hidden}
@media(max-width:800px){#topbar .brand{width:auto}}
#topbar .search{flex:1;display:flex;gap:6px;max-width:640px;min-width:0}#topbar .search input{flex:1;min-width:0;border-radius:999px;background:var(--fill)}
#clearQ{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;padding:0;font-size:13px;color:var(--mut);border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
#clearQ:hover{box-shadow:var(--sh);color:var(--tx)}
.qwrap{position:relative;flex:1;display:flex;min-width:0}
.qwrap input{padding-right:34px}
#topbar .acct{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
#avatar{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;font-size:13px;font-weight:500}
#avatarimg{width:30px;height:30px;border-radius:50%;object-fit:cover}
/* body */
#wrap{display:flex;height:calc(100vh - 57px);overflow:visible;position:relative;--sidew:236px}
#wrap.side-min{--sidew:66px}
#side{width:236px;flex:none;background:transparent;border-right:1px solid var(--bd);padding:14px 10px 14px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;max-height:calc(100vh - 57px);position:relative;z-index:20;transition:width .2s ease}
#side.min{width:66px;padding:14px 8px}
#side.min a{font-size:0;text-align:center;display:flex;flex-direction:column-reverse;align-items:center;gap:2px}
#side.min a span[id]{position:absolute;top:2px;right:4px;margin-left:0;font-size:11px}
#side.min #composebtn{font-size:0;padding:0;width:44px;height:44px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
#side.min a.on::after{display:none}
#side.min #newfolderWrap,#side.min .pra,#side.min .grphead,#side.min #customfolders{display:none}
#sideToggle{position:absolute;left:calc(var(--sidew) - 15px);top:1px;width:30px;height:30px;border-radius:50%;padding:0;background:#4f46e5;border:1px solid #4f46e5;color:#fff;box-shadow:var(--sh);font-size:15px;z-index:60;display:inline-flex;align-items:center;justify-content:center}
#sideToggle:hover{box-shadow:0 4px 14px rgba(79,70,229,.45);background:#4338ca;color:#fff}
#sideToggle .ic{width:20px;height:20px}
#composebtn{margin:0 8px 8px}
#composebtn{border-radius:999px;padding:11px;font-size:14px;font-weight:500;margin-bottom:8px;background:var(--ink);color:var(--bg)}
#side a{padding:9px 14px;border-radius:12px;cursor:pointer;display:block;position:relative}
#side a:hover{background:var(--fill)}
#side a.on{background:var(--fill);font-weight:500;color:var(--acc)}
#side a span[id]{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--acc);color:#fff;font-size:11px;font-weight:500;line-height:1;margin-left:6px;vertical-align:1px}
#side a span[id]:empty{display:none}
[data-theme=dark] #side a span[id]{color:#121216}
#side a.on::after{content:'';position:absolute;right:8px;top:8px;bottom:8px;width:4px;border-radius:4px;background:var(--acc)}
#authbox{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
#status small{color:var(--mut)}
#main{flex:1;padding:16px 20px;min-width:0;overflow-y:auto;position:relative}
#toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);border-radius:16px;margin-bottom:12px;box-shadow:var(--sh)}
#boxname{margin-left:auto;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px}
.card{background:var(--card);border:none;border-radius:18px;padding:18px;margin-bottom:12px;box-shadow:var(--sh)}
.row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--bd);cursor:pointer}
.row:hover{background:var(--fill)}
.row.unread{font-weight:400;background:transparent}.row.unread .subj{font-weight:500}
.row.unread:hover{background:var(--fill)}
.row .from{width:180px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.row .subj{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .date{width:110px;flex:none;text-align:right;color:var(--mut);font-size:12px}
.row button{border:none;background:none;padding:0;font-size:15px;position:relative;border-radius:50%;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--mut)}
.row button:hover{background:var(--fill);color:var(--tx);box-shadow:var(--sh)}
.row button[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:12px;padding:4px 10px;border-radius:8px;white-space:nowrap;z-index:30}
.dot{width:12px}.dot i{display:block;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.thcount{font-size:11px;color:var(--mut);background:var(--fill);border-radius:999px;padding:1px 8px;white-space:nowrap}
.racts{display:inline-flex;align-items:center}
#list .racts{min-width:208px;justify-content:flex-end}
@media(hover:hover){
 #list .row{position:relative}
 #list .row .racts{display:none;position:absolute;right:0;top:3px;bottom:3px;background:var(--card);border-radius:10px 0 0 10px;padding:2px 8px;z-index:5}
 #list .row:hover .racts{display:inline-flex}
 #list .row:hover .racts{background:var(--fill)}
 #list.bulkmode .row:hover .racts{display:none}
}
#body{border:none;border-radius:12px;min-height:140px;padding:12px;background:var(--fill);min-width:0;overflow-wrap:anywhere}
#body blockquote{background:var(--fill);border-radius:8px;margin:6px 0;padding:8px 12px;color:var(--mut);min-width:0;overflow-wrap:anywhere}
#body pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
#body table,#body img,#rbody table,#rbody img{max-width:100%}
.qexp{border:none;background:var(--fill);border-radius:999px;padding:2px 14px;color:var(--mut);cursor:pointer;font-size:13px;letter-spacing:2px;line-height:1.6}
.qexp:hover{box-shadow:var(--sh);color:var(--tx)}
.flymail{display:inline-flex;vertical-align:middle;color:var(--acc)}
.flymail svg{animation:flyAcross 1.1s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes flyAcross{0%{transform:translateX(-6px) translateY(5px);opacity:0}18%{opacity:1}100%{transform:translateX(190px) translateY(-7px);opacity:0}}
@media(prefers-reduced-motion:reduce){.flymail svg{animation:none}}
#rbody{padding:8px 0;min-width:0;overflow-wrap:anywhere}#rbody pre{white-space:pre-wrap;font-weight:300;overflow-wrap:anywhere;word-break:break-word}#rbody a{overflow-wrap:anywhere}
#compose{overflow-x:hidden}
#read.card.modal{overflow-x:hidden}
#rbottom{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#rsubrow{display:flex;align-items:flex-start;gap:10px}
#rsubrow #rsub{flex:1;min-width:0;margin:0}
#rtopacts{display:inline-flex;gap:8px;flex:none}
.row .iolab{color:var(--mut);font-size:11px;margin-right:2px}
/* compose + draft — same card modal window as inbox details */
#compose{position:absolute;left:12px;right:12px;top:12px;bottom:12px;transform:none;width:auto;max-width:none;max-height:none;overflow-y:auto;z-index:35;display:flex;flex-direction:column;gap:8px;padding:18px;margin-bottom:0}
#body{min-height:150px}
.datewrap{position:relative;display:inline-flex;align-items:center}
#clearSched{border:none;background:none;padding:0;font-size:12px;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
#clearSched:hover{box-shadow:var(--sh)}
#schederr{color:var(--mut)}
#schederr.bad{color:var(--ac);font-weight:500}
button:disabled{opacity:.4;cursor:not-allowed;font-weight:300}
.schedrow{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.schedrow label{margin-top:0;white-space:nowrap}
.schedrow button{font-weight:500}
.schedrow button:disabled{font-weight:300}
.ccgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.subjrow{display:flex;align-items:center;gap:10px}
.subjrow input{flex:1}
.attrow{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.attrow label{margin-top:0;white-space:nowrap}
.attrow input[type=file]{min-width:0;flex:1}
.pwwrap{display:inline-flex;align-items:center;gap:4px;position:relative}
.pwwrap input{padding-right:30px}
#pweye{position:absolute;right:4px;border:none;background:none;padding:0;font-size:14px;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
#pweye:hover{box-shadow:var(--sh)}
.abtn{position:relative;font-weight:500}
.abtn .bicon{display:none}
.abtn:hover::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:12px;padding:4px 10px;border-radius:8px;white-space:nowrap;z-index:30}
@media(max-width:640px){.ccgrid{grid-template-columns:1fr}.subjrow{flex-wrap:wrap}.attrow{flex-wrap:wrap}.schedrow{flex-wrap:wrap}.abtn .blabel{display:none}.abtn .bicon{display:inline}.card.modal,#movemodal,#compose,#read.card.modal{left:8px;right:8px;transform:none;width:auto;max-width:none;top:8px;bottom:8px;max-height:none}}
#chead{display:flex;justify-content:space-between;align-items:center;position:relative;padding-right:36px;font-weight:500}
#compose label{font-size:11px;color:var(--mut);margin-top:4px;font-weight:500;text-transform:uppercase;letter-spacing:1px}
.torow{display:flex;gap:8px;align-items:flex-start}
.torow #chips-to{flex:1;margin-bottom:0}
.t-actions{display:inline-flex;gap:8px;flex:none}
.cclab{display:flex;justify-content:space-between;align-items:center}
.cclab .pickbtn{flex:none}
#pickmodal #pick-q{width:100%;box-sizing:border-box}
#ccarrow{display:inline-block;transition:transform .25s ease}
#ccarrow.up{transform:rotate(180deg)}
#tools button{padding:6px 12px}
.banner{background:#fbdcdc;color:#a31212;border-radius:12px;padding:10px 16px}
[data-theme=dark] .banner{background:#3a1114;color:#ff9d9d}
.pra{border:1px dashed var(--bd);border-radius:12px;padding:8px;color:var(--mut);font-size:12px;margin-top:auto}
#prorail:empty{display:none}
.pratag{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);flex:none}
.row.promorow{cursor:default;align-items:center}
#avatarbtn{border:none;background:none;padding:2px;cursor:pointer;border-radius:50%}
#avatarbtn:hover{box-shadow:var(--sh)}
#avwrap{position:relative;display:inline-block}
#avtip{display:none;position:absolute;right:0;top:36px;background:var(--card);border-radius:12px;padding:10px 14px;white-space:nowrap;z-index:30;box-shadow:var(--sh);color:var(--tx)}
#avwrap:hover #avtip{display:block}
#avwrap.open:hover #avtip{display:none}
#acctmenu{position:absolute;right:12px;top:52px;z-index:60;min-width:230px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--sh);border-radius:16px}
#acctmenu a{padding:10px 14px;border-radius:12px;cursor:pointer;display:block}
#acctmenu a:hover{background:var(--fill)}
.grphead{padding:12px 12px 4px;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.grp .row .pill{margin-left:10px}
.grp{background:var(--card);border-radius:18px;margin:0 0 18px;overflow:visible;box-shadow:var(--sh)}
.grp .row:last-child{border-bottom:none}
.grp>.row:first-child{border-top-left-radius:18px;border-top-right-radius:18px}
.grp>.row:last-child{border-bottom-left-radius:18px;border-bottom-right-radius:18px}
.row.histbar{background:var(--fill);border-radius:12px;border-bottom:none;margin-bottom:8px;gap:12px}
.row.histbar .subj{font-weight:500}
#newfolderWrap{display:flex;gap:8px;align-items:center}
#customfolders a{display:flex;align-items:center;gap:6px}
#customfolders .fdel{margin-left:0;border:none;background:none;color:var(--mut);padding:2px;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:none;position:relative}
#customfolders .fdel:first-of-type{margin-left:auto}
#customfolders .fdel:hover{background:var(--fill);color:var(--tx)}
#customfolders .fdel:hover::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:12px;padding:4px 10px;border-radius:8px;white-space:nowrap;z-index:30}
#customfolders .fdel:hover{background:var(--fill);color:var(--tx)}
#newfolderWrap input{flex:1;min-width:0}
.row.histbar button{width:auto;height:auto;border-radius:999px;padding:8px 18px;display:inline-flex;font-size:13px}
.row.histbar button:hover{box-shadow:0 4px 14px rgba(23,24,29,.18)}
#movemodal{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:40;min-width:320px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow-y:auto;border:1px solid var(--bd);box-shadow:0 16px 56px rgba(23,24,29,.25);display:flex;flex-direction:column;gap:8px;border-radius:20px}
#movemodal label{display:block;padding:8px 12px;border-radius:12px;cursor:pointer;font-size:13px}
#movemodal label:hover{background:var(--fill)}
.chips{display:flex;flex-wrap:wrap;gap:6px;border:none;border-radius:12px;padding:8px;background:var(--fill);margin-bottom:6px}
.chips input{border:none;flex:1;min-width:140px;padding:4px;background:transparent}
.chip{background:var(--card);box-shadow:var(--sh);border-radius:999px;padding:3px 6px 3px 12px;font-size:12px;display:inline-flex;gap:6px;align-items:center}
.chip button{border:none;padding:0 4px;font-size:12px;background:none}
.ic{width:18px;height:18px;flex:none;vertical-align:-3px}
.row button .ic{width:17px;height:17px}
#side a .ic{width:18px;height:18px;vertical-align:-4px;margin-right:2px}
.abtn .bicon .ic{width:16px;height:16px}
#toast{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:999px;z-index:50;font-size:13px;box-shadow:var(--sh)}
.card.modal{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:45;width:560px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow-x:hidden;overflow-y:auto;border:1px solid var(--bd);box-shadow:0 16px 56px rgba(23,24,29,.25);border-radius:20px}
/* child modal opened over another card: offset + narrower so the parent stays visibly framed */
.card.modal.stacked{top:12px;width:520px}
.prow>div{min-width:0;overflow:hidden}
#read.card.modal{position:absolute;left:12px;right:12px;top:12px;bottom:12px;transform:none;width:auto;max-width:none;max-height:none;z-index:25;overflow-y:auto;margin-bottom:0}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0}
.prow>div{display:flex;flex-direction:column;gap:6px}
.prow label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px;font-weight:500}
.prow input[type=text],.prow input:not([type]),.prow input[type=date],.prow input[type=number],.prow select{width:100%}
.prow label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px}
@media(max-width:640px){.prow{grid-template-columns:1fr}}
.xbtn{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;padding:0;line-height:1;background:var(--fill)}
.card.modal .modaltitle,#compose .modaltitle,#movemodal .modaltitle{font-weight:700;font-size:16px}
#read{position:relative}
#chead{display:flex;justify-content:space-between;align-items:center;position:relative;padding-right:36px}
.pill{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.pill.pending{background:#f3ecff;color:#6a3df5}
.pill.sent{background:#d9f2e2;color:#0f6b2f}
.pill.failed,.pill.blocked-quota,.pill.blocked-banned{background:#fbdcdc;color:#a31212}
.pill.cancelled{background:#e8eaed;color:#5f6368}
[data-theme=dark] .pill.pending{background:#2c2350;color:#c4b0ff}
[data-theme=dark] .pill.sent{background:#123a1c;color:#7dffa8}
[data-theme=dark] .pill.failed,[data-theme=dark] .pill.blocked-quota,[data-theme=dark] .pill.blocked-banned{background:#3a1114;color:#ff9d9d}
[data-theme=dark] .pill.cancelled{background:#2a2d30;color:#aaa}
.countdown{font-size:12px;color:var(--mut);white-space:nowrap}
#err{color:var(--ac);font-size:12px}
#gate{display:flex;flex-direction:row;min-height:calc(100vh - 57px);position:relative;overflow:hidden;align-items:stretch;padding:0}
#gate.rev{flex-direction:row-reverse}
.gate-bg{position:absolute;inset:0;background:linear-gradient(135deg,#ffffff 0%,#ffffff 60%,#c9dcff 100%);z-index:0}
[data-theme=dark] .gate-bg{background:radial-gradient(900px 480px at 15% 0%,rgba(44,35,80,.55),transparent 60%),radial-gradient(760px 480px at 85% 100%,rgba(30,58,138,.5),transparent 60%),linear-gradient(180deg,#16161c,#121216)}
.gate-hero{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#23252d;padding:32px}
[data-theme=dark] .gate-hero{color:#e8ecf8}
.gate-hero h1{margin:0;font-size:24px;font-weight:800;letter-spacing:.5px}
.gate-hero .l-web{color:#07a3fe;font-weight:800}
.gate-hero .l-mail{color:#013ba8;font-weight:800}
[data-theme=dark] .gate-hero .l-web{color:#07a3fe}
[data-theme=dark] .gate-hero .l-mail{color:#3ec0fd}
.gate-hero .tagline{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#6b7a99}
[data-theme=dark] .gate-hero .tagline{color:#9fb3d9}
.gate-hero .herosub{text-align:center;color:#8b93ad;font-size:14px}
#brandbig{width:112px;height:112px;border-radius:50%}
.gatecard{position:relative;z-index:1;width:50%;max-width:620px;margin:0;border-radius:0;display:flex;flex-direction:column;justify-content:flex-start;padding:32px 40px;max-height:calc(100vh - 57px);overflow-y:auto;background:linear-gradient(135deg,#ffffff 0%,#edf3ff 100%)}
[data-theme=dark] .gatecard{background:linear-gradient(135deg,#1c1c22 0%,#232033 100%)}
.gatecard .prow{margin:6px 0}
@media(max-height:760px){.gate-hero .herosub{display:none}.gatecard{padding:20px 40px}}
@media(max-width:800px){.gate-hero{display:none}.gatecard{width:100%;max-width:none;border-radius:0}}
.brandrow{display:flex;justify-content:center;margin-bottom:4px}
#brandmark{width:54px;height:54px;color:#38bdf8}
#logincard h2{margin:0;font-weight:600;text-align:center}
.tagline{text-align:center;color:var(--mut);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
#logincard input,#logincard select{width:100%}
.mobrow{display:flex;gap:8px}
.mobrow select{flex:none;max-width:112px}
.mobrow input{flex:1;min-width:0}
.mailrow{display:flex;align-items:stretch;background:var(--fill);border-radius:12px}
.mailrow input{flex:1;min-width:0;background:transparent}
.mailrow input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--acc);border-radius:12px}
.mailrow .domain{padding:10px 14px 10px 2px;font-size:13px;color:var(--mut);white-space:nowrap;align-self:center}
.mailcheck{display:flex;gap:10px;align-items:center;margin-top:8px}
#avail{font-size:12px}
#avail.ok{color:#0f6b2f}#avail.bad{color:var(--ac)}
#logincard{width:50%;max-width:620px;display:flex;flex-direction:column;gap:10px}
#loginform{display:flex;flex-direction:column;gap:12px}
#regform,#recoverform,#regdone{display:flex;flex-direction:column;gap:12px}
#loginform input{width:100%}
#loginform label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px;font-weight:500;display:block;margin-bottom:6px}
.bigbtn{min-width:220px;font-weight:500}
#gate-go:disabled{opacity:.45;cursor:not-allowed}
#loginform .mailrow input{width:auto}
#loginpwwrap{display:flex;width:100%}
#loginpwwrap input{flex:1;min-width:0}
#logineye{position:absolute;right:4px;border:none;background:none;padding:0;font-size:14px;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;align-self:center}
#logineye:hover{box-shadow:var(--sh)}
#unbanbox{border-top:1px solid var(--bd);padding-top:12px;display:flex;flex-direction:column;gap:10px}
#unbanbox .unbanhead{font-weight:600;font-size:14px}
#unbanbox .prow{margin:0}
#unbanbox input,#unbanbox select{width:100%}
#unbanbox .unbanrow{display:flex;gap:10px;margin-top:6px}
#unbanbox .unbanrow button{flex:1;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
#unbanbox .unbanrow button:disabled{opacity:.45;cursor:not-allowed}
#unbanbox #un-msg{display:block;min-height:16px}
#logincard h2{margin:0;font-weight:600}
#logincard label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px;font-weight:500;display:block;margin-top:6px}
.gate-links{margin-top:10px;font-size:13px;display:flex;gap:8px;align-items:center;justify-content:center}
.gate-links a{cursor:pointer;color:var(--acc);font-weight:500;padding:6px 12px;border-radius:999px}
.gate-links a:hover{background:var(--fill);box-shadow:var(--sh)}
.gate-links .sep{color:var(--mut)}
#recoverform{display:flex;flex-direction:column;gap:12px}
#recoverform input{width:100%}
#recoverform .backlink{margin-top:4px}
#gate-title{font-size:24px}
#navToggle{display:none;border:none;background:none;font-size:18px;padding:4px 8px;border-radius:8px;position:relative;z-index:60;flex:none}
@media(max-width:800px){#side{display:none}#sideToggle{display:none}#navToggle{display:inline-block}
 #side.drawer{display:flex;position:fixed;left:0;top:53px;bottom:0;z-index:45;box-shadow:0 8px 32px rgba(23,24,29,.3);max-height:none}
 #compose,#read.card.modal{left:8px;right:8px;top:8px;bottom:8px;transform:none;width:auto;max-height:none}}

body.side-min{--sidew:66px}
@media(max-width:800px){:root{--sidew:0px}}

.minbtn{min-width:110px}
.verified-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:500;background:#d9f2e2;color:#0f6b2f;white-space:nowrap;cursor:default}
[data-theme=dark] .verified-badge{background:#123a1c;color:#7dffa8}
.recrow{display:flex;gap:8px}
.recrow>*{flex:1;min-width:0}
.recrow .verified-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:13px}
.recrow .unverified-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:13px}
.plan-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:13px;font-weight:500;border-radius:999px;background:#4f46e5;color:#fff;white-space:nowrap;cursor:default}
#prof>div>label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px;font-weight:500;display:block;margin-bottom:6px}
#prof>div>.recrow{margin-top:8px}
.inwrap{position:relative;display:block}
.inwrap>input{width:100%;padding-right:88px}
.inbadge{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:500;padding:2px 8px;border-radius:999px;white-space:nowrap;line-height:1.6;pointer-events:none}
.inbadge.unv{background:var(--card);border:1px solid var(--bd);color:var(--mut)}
.inbadge.ver{background:#d9f2e2;color:#0f6b2f}
[data-theme=dark] .inbadge.ver{background:#123a1c;color:#7dffa8}
.robox{background:var(--fill);border-radius:12px;padding:10px 14px;font-size:14px;min-height:42px;display:flex;align-items:center;gap:10px;margin-top:6px}
.robox .roaddr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.robox .ronum{color:var(--mut);font-size:12px;font-weight:500;flex:none}
#profcard button:not(.xbtn),#recmodal button:not(.xbtn),#smsmodal button:not(.xbtn),#mfacard button:not(.xbtn),#totpmodal button:not(.xbtn),#codesmodal button:not(.xbtn),#pkmodal button:not(.xbtn),#pwmodal button:not(.xbtn),#phmodal button:not(.xbtn),#trmodal button:not(.xbtn),#provemodal button:not(.xbtn){min-height:38px;display:inline-flex;align-items:center;justify-content:center}
#profcard .prow input,#totpmodal .prow input,#pwmodal .prow input{height:42px}
#recmodal>div>label,#smsmodal>div>label,#pkmodal>div>label,#pwmodal>div>label,#phmodal>div>label,#phmodal label,#trmodal>div>label,#provemodal>div>label,#totpmodal>div>label,#codesmodal>div>label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px;font-weight:500;display:block;margin-bottom:6px}
#recmodal-addr,#recmodal-id,#smsmodal-addr,#smsmodal-id,#pk-device,#pk-id,#pw-proof,#pw-kind,#ph-retype,#ph-id,#tr-code,#codes-id,#pv-id{width:100%}
/* Security modals: single 12px column rhythm, full-width controls, secondary help */
#totpmodal>div+div,#codesmodal>div+div,#pkmodal>div+div,#pwmodal>div+div,#phmodal>div+div,#trmodal>div+div,#recmodal>div+div,#smsmodal>div+div,#ph-step0>div+div,#ph-step1>div+div,#ph-step2>div+div,#codes-reveal>div+div{margin-top:12px}
#totpmodal .prow,#codesmodal .prow,#pkmodal .prow,#pwmodal .prow,#phmodal .prow,#trmodal .prow,#recmodal .prow,#smsmodal .prow,#ph-step1 .prow,#ph-step2 .prow,#codes-reveal .prow{margin:12px 0 0}
#totpmodal input,#totpmodal select,#codesmodal input,#codesmodal select,#pkmodal input,#pkmodal select,#pwmodal input,#pwmodal select,#phmodal input,#phmodal select,#trmodal input,#trmodal select,#recmodal input,#recmodal select,#smsmodal input,#smsmodal select{width:100%}
#totpmodal small,#codesmodal small,#pkmodal small,#pwmodal small,#phmodal small,#trmodal small,#recmodal small,#smsmodal small{color:var(--mut);font-size:12.5px;line-height:1.6}
#totpmodal .wide,#codesmodal .wide,#pkmodal .wide,#pwmodal .wide,#phmodal .wide,#trmodal .wide,#recmodal .wide{width:100%}
#totp-qr{display:block;margin:4px auto}
.clrwrap{position:relative;display:block}
.clrwrap input{padding-right:58px}
.clrx{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;padding:0;font-size:13px;color:var(--mut);border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.clrx:hover{box-shadow:var(--sh);color:var(--tx)}
.clreye{position:absolute;right:32px;top:50%;transform:translateY(-50%);border:none;background:none;padding:0;font-size:13px;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.clreye:hover{box-shadow:var(--sh)}
#codes-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0}
#regdone-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0}
.codechip{background:var(--fill);border-radius:10px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#codesmodal label.inline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx);text-transform:none;letter-spacing:0;cursor:pointer}
#codesmodal .prow>div:first-child{display:flex;align-items:center}
#codesmodal label.inline input[type=checkbox]{width:17px;height:17px;flex:none;accent-color:var(--acc);margin:0;cursor:pointer}
#provemodal{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:70;width:400px;max-width:calc(100% - 32px);display:flex;flex-direction:column;gap:12px;margin-bottom:0}
#provemodal .modaltitle{font-weight:700;font-size:16px}
#provemodal #pvmsg{font-size:13px;color:var(--mut);line-height:1.6}
#provemodal .cfrow{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
#pvok{min-width:110px;font-weight:500;background:#c5221f;color:#fff}
#pvok:hover{box-shadow:0 4px 14px rgba(197,34,31,.4)}
[data-theme=dark] #pvok{background:#ff8a80;color:#3a1114}
#ph-words{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.phw{background:var(--fill);border-radius:10px;padding:6px 10px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phw b{color:var(--mut);font-weight:500;margin-right:4px}
/* Account security board: same rhythm as Profile (rows 10px, sections 14px) */
#secboard{display:flex;flex-direction:column;gap:10px}
.secgroup{display:flex;flex-direction:column;gap:10px}
.secgroup+.secgroup{margin-top:14px}
.secrow{display:grid;grid-template-columns:minmax(0,1fr) 96px 112px;gap:10px;align-items:center;min-height:38px}
.secrow .secname{grid-column:1;min-width:0}
.secrow .secpill{grid-column:2;justify-self:center;display:flex;justify-content:center}
.secrow .secact{grid-column:3;justify-self:end;align-self:start}
.secrow .secname small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secrow .verified-badge,.secrow .unverified-badge{justify-self:center;min-width:86px;text-align:center}
.secrow .secact{justify-self:end;align-self:start}
.secrow .secact button{min-width:104px}
.secnote{margin-top:14px}
#admcard.modal{width:min(760px,calc(100% - 24px));max-height:calc(100% - 24px)}
#teamcard.modal{width:min(680px,calc(100% - 24px));max-height:calc(100% - 24px)}
.admwrap{display:flex;gap:18px;align-items:flex-start}
.admside{display:flex;flex-direction:column;gap:4px;flex:none;width:148px;position:sticky;top:0}
.admtab{text-align:left;justify-content:flex-start}
.admmain{flex:1;min-width:0}
@media(max-width:640px){.admwrap{flex-direction:column}.admside{width:100%;position:static;flex-direction:row;flex-wrap:wrap}}
.admtab{border:1px solid var(--bd);background:transparent;border-radius:999px;padding:6px 16px;font-size:13px;cursor:pointer;color:var(--mut)}
.admtab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#adm .secgroup{margin:0 0 18px}
#adm .secgroup>b{display:block;margin:0 0 10px;text-transform:uppercase;font-size:12px;letter-spacing:1px}
#adm .secgroup .prow{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
#adm label{font-size:11px;color:var(--mut);font-weight:500}
#adm small{color:var(--mut)}
.arow{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end}
.arow>div{min-width:0}
#adm div[id^="adm-t-"] input,#adm div[id^="adm-t-"] select{width:100%;box-sizing:border-box;min-height:38px}
@media(max-width:640px){#adm .secgroup .prow{grid-template-columns:1fr}}
#mfacard>.modaltitle{display:block;margin-bottom:14px}
.pkpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pill-key{display:inline-flex;align-items:center;gap:8px;background:var(--fill);border-radius:999px;padding:0 6px 0 14px;min-height:38px;font-size:13px;font-weight:400;max-width:100%}
.pill-key span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#secboard button.pkx{flex:none;width:20px;height:20px;min-height:20px;min-width:20px;margin:0;border-radius:50%;padding:0;font-size:12px;line-height:1;text-align:center;background:rgba(127,127,150,.22);color:var(--tx);display:inline-flex;align-items:center;justify-content:center}
#secboard button.pkx:hover{background:rgba(197,34,31,.18);color:var(--ac);box-shadow:none}
.unverified-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:500;background:var(--fill);color:var(--mut);white-space:nowrap;cursor:default}
#cfmodal{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:70;width:400px;max-width:calc(100% - 32px);display:flex;flex-direction:column;gap:12px;margin-bottom:0}
#cfmodal .modaltitle{font-weight:700;font-size:16px}
#cfmsg{font-size:13px;color:var(--mut);line-height:1.6}
#cfmodal .cfrow{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
#cfok{min-width:110px;font-weight:500}
#cfok.danger{background:#c5221f;color:#fff}
#cfok.danger:hover{box-shadow:0 4px 14px rgba(197,34,31,.4)}
[data-theme=dark] #cfok.danger{background:#ff8a80;color:#3a1114}
#rg-pw2.bad{box-shadow:inset 0 0 0 1px var(--ac)}
.addr{font-weight:600}
.addbtn{padding:2px 10px;font-size:12px;background:transparent;border:1px solid var(--bd);color:var(--acc)}
.addbtn:hover{background:var(--fill)}

#boot{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);transition:opacity .35s ease}
#boot.hide{opacity:0;pointer-events:none}
#boot img{border-radius:50%;animation:bootPop .55s cubic-bezier(.2,.9,.3,1.25) both}
#boot .b-word{font-size:26px;font-weight:800;letter-spacing:.5px;animation:bootUp .5s .1s ease-out both}
#boot .b-word .l-web{color:#07a3fe}
#boot .b-word .l-mail{color:#013ba8}
[data-theme=dark] #boot .b-word .l-web{color:#07a3fe}
[data-theme=dark] #boot .b-word .l-mail{color:#3ec0fd}
#boot .b-tag{font-size:12px;color:var(--mut);animation:bootTag 1.8s ease-in-out .6s infinite alternate}
@keyframes bootPop{from{transform:scale(.55);opacity:0}}
@keyframes bootUp{from{transform:translateY(10px);opacity:0}}
@keyframes bootTag{from{opacity:.5;letter-spacing:3px}to{opacity:1;letter-spacing:6px}}
@media(prefers-reduced-motion:reduce){#boot img,#boot .b-word,#boot .b-tag{animation:none}}