:root{--teal:#0096a4;--teal-dark:#007e89;--soft:#e8f7f7;--bg:#f5f9fa;--ink:#172b44;--mute:#7a8da1;--line:#e5eef2;--white:#fff}*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}.workspace{display:flex;min-height:100dvh}.sidebar{width:275px;flex-shrink:0;background:linear-gradient(#f8fdff,#eff9fa);padding:24px 16px;display:flex;flex-direction:column;gap:25px;border-right:1px solid var(--line)}.brand{font-size:23px;font-weight:780;color:#073d43;display:flex;align-items:center;gap:11px;white-space:nowrap;letter-spacing:-.7px}.mark{width:36px;height:36px;display:grid;place-items:center;color:white;background:linear-gradient(135deg,#03b5c1,#17668e);border-radius:10px;transform:skew(-7deg);font-weight:900}.primary{color:white;background:linear-gradient(110deg,#069eaa,#008d9c);border-radius:11px;padding:13px 18px;font-weight:650}.primary:hover{background:#007e89}.compose{height:52px}nav{display:grid;gap:5px}nav button{display:flex;align-items:center;text-align:left;gap:17px;width:100%;padding:13px 15px;border-radius:10px;font-size:15px;color:#334b66}nav button>span{flex:1}nav button.selected{background:#dff4f6;color:#056b7a;font-weight:700}nav em{font-style:normal;background:#bcecef;padding:0 8px;border-radius:10px}.sidebar-bottom{margin-top:auto;text-align:center;padding:30px 12px;border-radius:12px;background:#fff}.sidebar-bottom p{font-size:12px;color:var(--mute)}.mail-illustration{font-size:43px;color:var(--teal);margin-bottom:14px}.account{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mute);overflow:hidden}.account span{overflow:hidden;text-overflow:ellipsis;flex:1}.account button{font-size:21px}main{flex:1;min-width:0;padding:0 18px 18px}.topbar{display:flex;align-items:center;gap:20px;height:72px}.search{display:flex;gap:12px;align-items:center;background:#fff;box-shadow:0 3px 12px #2342a00c;border:1px solid var(--line);border-radius:14px;padding:11px 18px;flex:1;color:var(--mute);font-size:23px}.search input{border:0;outline:none;width:100%;font-size:14px;color:var(--ink)}.top-account{display:flex;gap:10px;align-items:center;min-width:180px}.top-account>div{display:grid;font-size:12px}.top-account span:not(.avatar){color:var(--mute)}.avatar{display:grid;place-items:center;background:#e4eef4;color:#35617a;width:43px;height:43px;border-radius:50%;font-weight:700;flex-shrink:0}.small-avatar{width:35px;height:35px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:5px 0 15px}.stat{display:flex;gap:16px;background:#fff;padding:17px;border:1px solid var(--line);border-radius:12px;align-items:center}.stat>div{display:grid}.stat strong{font-size:23px}.stat span:not(.stat-icon){color:var(--mute)}.stat-icon{background:#e9f4ff;width:45px;height:45px;border-radius:10px;display:grid;place-items:center;font-size:21px;color:#098bc5}.stat-icon.mint{background:#e5f8f5;color:var(--teal)}.mail-layout{display:grid;grid-template-columns:minmax(330px,44%) minmax(390px,56%);min-height:calc(100dvh - 193px);background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden}.inbox-panel{min-width:0;border-right:1px solid var(--line);display:flex;flex-direction:column}.section-title{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);font-size:17px}.iconbtn{width:34px;height:34px;border-radius:8px;font-size:21px;display:grid;place-items:center;color:#6d8199}.iconbtn:hover,.secondary:hover{background:#edf8f9}.filters{display:flex;padding:10px 16px;gap:5px;align-items:center;border-bottom:1px solid var(--line)}.filters button{font-size:12px;padding:7px 12px;border-radius:20px}.filters button.on{background:var(--soft);color:var(--teal-dark);font-weight:700}.filters select{min-width:0;margin-left:auto;border:0;background:transparent;color:var(--mute);max-width:125px;font-size:12px}.messages{flex:1;overflow-y:auto;max-height:calc(100dvh - 315px)}.message{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;padding:17px 16px;border-bottom:1px solid var(--line);position:relative}.message:hover{background:#f7fcfd}.message.active{background:#e8f8f9}.message.unread:before{content:'';position:absolute;left:3px;top:34px;width:7px;height:7px;border-radius:50%;background:#00a2b3}.message .details{min-width:0;flex:1}.message-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.message-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-head time{color:var(--mute);font-size:11px;white-space:nowrap}.subject{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-address{font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pager{display:flex;justify-content:space-between;padding:9px;border-top:1px solid var(--line);color:var(--mute)}.pager button{padding:5px 8px}.read-panel{min-width:0;display:flex;flex-direction:column}.read-toolbar{display:flex;gap:9px;padding:12px 20px;border-bottom:1px solid var(--line)}.danger:hover{color:#d65062}.reader{overflow:auto;padding:24px;max-height:calc(100dvh - 250px)}.reader h1{font-size:23px;margin:0 0 20px;line-height:1.3}.sender{display:flex;gap:12px;align-items:center;margin-bottom:25px}.sender>div{min-width:0}.sender small{color:var(--mute);display:block;overflow-wrap:anywhere}.sender time{margin-left:auto;font-size:12px;color:var(--mute);white-space:nowrap}.body-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:14px;color:#2e3848}.attachments{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}.attachment{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:9px;margin:7px 0;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}.attachment:hover{background:var(--soft)}.reader-actions{display:flex;gap:9px;margin-top:24px;flex-wrap:wrap}.secondary{background:#eef5f8;padding:12px 17px;border-radius:9px}.welcome{text-align:center;padding:clamp(25px,9vh,95px) 10px;color:var(--mute)}.welcome h2{color:var(--ink)}.welcome-icon{font-size:70px;color:#b5e1e5}.empty{padding:35px 18px;color:var(--mute);text-align:center}.notice{position:fixed;right:20px;bottom:20px;padding:15px 20px;border-radius:12px;color:#fff;background:#274b5b;box-shadow:0 10px 35px #173d4e44;z-index:20;max-width:400px}.modal{position:fixed;inset:0;background:#122b3a85;z-index:50;display:grid;place-items:center;padding:15px}.modal-content{width:min(700px,100%);max-height:95dvh;overflow:auto;background:white;border-radius:15px;box-shadow:0 30px 80px #132a4040}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#e9f8f9;font-size:18px}.modal form{display:grid;gap:12px;padding:18px 20px}.modal label,.login-card label{display:grid;gap:6px;color:#465b6e;font-size:13px;font-weight:650}.modal input:not([type=file]),.modal textarea,.login-card input{width:100%;border:1px solid #dce8ee;border-radius:8px;padding:11px;outline-color:var(--teal);color:var(--ink)}.modal textarea{resize:vertical}.attach-label{padding:10px;background:#f4fafa;border-radius:8px}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.login-screen{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 10% 10%,#c8f0f0,transparent 34%),linear-gradient(130deg,#eefbfd,#f8fbff);padding:20px}.login-card{width:min(430px,100%);padding:36px;background:white;display:grid;gap:16px;border-radius:20px;box-shadow:0 25px 80px #027e8920}.login-card h1{font-size:25px;margin:16px 0 -16px}.muted,.small{color:var(--mute)}.small{font-size:12px}.full{width:100%}.error{padding:10px;border-radius:8px;background:#ffeded;color:#ae243a}.mobile-only{display:none}@media(max-width:1100px){.sidebar{width:225px}.stats{gap:8px}.stat{padding:10px}.mail-layout{grid-template-columns:44% 56%}.reader{padding:18px}.top-account{min-width:unset}}@media(max-width:760px){.mobile-only{display:grid}.sidebar{position:fixed;z-index:30;top:0;bottom:0;left:0;transform:translateX(-110%);transition:transform .2s;box-shadow:10px 0 40px #0002}.sidebar.open{transform:none}main{padding:0 9px 9px;width:100%}.topbar{height:64px;gap:8px}.top-account>div{display:none}.stats{grid-template-columns:repeat(2,1fr);margin-bottom:9px}.stat:nth-child(3){display:none}.stat strong{font-size:18px}.stat-icon{width:35px;height:35px}.stat{font-size:11px}.mail-layout{display:block;min-height:calc(100dvh - 160px)}.inbox-panel{height:calc(100dvh - 160px);border-right:0}.messages{max-height:none}.read-panel{display:none;height:calc(100dvh - 160px)}.mail-layout.reading .inbox-panel{display:none}.mail-layout.reading .read-panel{display:flex}.reader{max-height:none;flex:1}.sender{flex-wrap:wrap}.sender time{width:100%;margin-left:55px}.reader h1{font-size:20px}.sidebar-bottom{padding:15px}}
/* M-SaG Mail v0.2 visual refresh: procurement-inspired interface */
:root{--teal:#049aa9;--teal-dark:#007f8f;--soft:#e8f8f8;--bg:#f8fbfd;--ink:#10283f;--mute:#7a8da4;--line:#e8eef3}
body{font-family:Inter,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:14px;line-height:1.55;letter-spacing:-.01em}
.workspace{min-height:100dvh}.sidebar{width:274px;padding:22px 17px 20px;gap:26px;background:linear-gradient(160deg,#f7fdfd,#f0f9fa 90%);border-right:1px solid #eaf1f3}.brand{font-size:24px;letter-spacing:-1px;font-weight:800;gap:14px}.mark{width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,#38d1cb,#008da7);box-shadow:0 5px 14px #09a5ae25;transform:rotate(-7deg);font-size:25px;font-style:italic}.primary{background:linear-gradient(110deg,#06a6b2,#008fa0);border-radius:11px;box-shadow:0 3px 9px #028e9e12}.primary:hover{background:linear-gradient(110deg,#0597a3,#007b89)}.compose{height:54px;font-size:15px;font-weight:730}nav{gap:7px}nav button{font-size:14px;padding:15px 14px;min-height:52px;gap:16px;color:#35516c;font-weight:520}nav button:first-letter{color:var(--teal)}nav button.selected{background:linear-gradient(90deg,#dff4f6,#e9f8fa);color:#085769;font-weight:780;border-left:3px solid #059db2;padding-left:11px}nav em{background:#b7ebec;color:#008398}.sidebar-bottom{border:1px solid #edf4f5;padding:30px 18px 22px;box-shadow:0 6px 24px #40687908}.sidebar-bottom strong{font-size:15px;line-height:1.4;display:block}.sidebar-bottom p{font-size:12px;line-height:1.5}.mail-illustration{background:linear-gradient(130deg,#d4f6f5,#f1fbff);width:96px;height:76px;margin:0 auto 22px;border-radius:16px;display:grid;place-items:center;font-size:45px}.sidebar-link{color:#0298aa;font-size:12px;font-weight:650;display:block;margin-top:24px}.account{border-top:1px solid var(--line);padding-top:14px}
main{padding:0 20px 20px;background:radial-gradient(ellipse at top,#fbfeff,#f7fafc 58%)}.topbar{height:83px;gap:23px}.search{border-radius:15px;padding:14px 20px;box-shadow:0 5px 22px #234c6109;border-color:#e8eef3;font-size:22px}.search input::placeholder{color:#92a2b4}.top-account{min-width:185px}.top-account strong{font-size:13px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:0 0 17px}.stat{min-height:94px;padding:17px;gap:17px;border-radius:14px;box-shadow:0 5px 22px #275b7306}.stat strong{font-size:25px;font-weight:800;color:#132944;line-height:1.1}.stat span:not(.stat-icon){font-size:13px;margin-top:6px}.stat-icon{width:53px;height:53px;border-radius:13px;background:#e8f5ff;font-size:25px;flex-shrink:0}.stat-icon.sky{background:#e6f5ff;color:#0f8bb5}.stat-icon.mint{background:#e2f8f5;color:#009e9b}
.mail-layout{grid-template-columns:minmax(350px,43%) minmax(0,57%);min-height:calc(100dvh - 218px);border-radius:16px;border-color:#e8eef2;box-shadow:0 7px 35px #325b7408}.section-title{min-height:73px;font-size:17px;padding:18px 23px}.filters{min-height:61px;padding:12px 18px;gap:7px}.filters button{font-size:12px;white-space:nowrap;padding:9px 12px}.filters button.on{background:#e5f8f8;color:#008996}.filters select{font-size:12px;max-width:105px}.messages{max-height:calc(100dvh - 350px)}.message{min-height:112px;padding:18px 20px;gap:15px;transition:background .13s}.message.active{background:#e9f8f8}.message.unread:before{width:9px;height:9px;left:6px;top:37px}.message .avatar{background:linear-gradient(140deg,#deebf1,#eef4f7);color:#3f607a}.message .details{display:flex;flex-direction:column;gap:2px}.message-head strong{font-size:14px;color:#152d46;max-width:75%}.message-head time{font-size:11px}.subject{font-size:13px}.mail-address{font-size:12px;color:#91a0b0}.pager{padding:13px 15px;font-size:12px}.read-toolbar{height:65px;padding:14px 24px;align-items:center;gap:11px}.read-toolbar .iconbtn{border-radius:10px}.reader{padding:28px 29px 38px;max-height:calc(100dvh - 293px)}.reader h1{font-size:25px;font-weight:760;margin:0 0 25px}.sender{margin-bottom:35px}.sender .avatar{width:48px;height:48px}.sender strong{font-size:14px}.sender time{font-size:12px}.body-text{font-size:14px;line-height:1.9;color:#2c3b51}.attachments{margin-top:30px;padding-top:20px}.attachments>strong{font-size:14px}.attachment{margin:10px 0;border-radius:11px;padding:14px 15px;font-size:12px}.attachment:hover{border-color:#a0dbdd}.reader-actions{margin-top:28px;gap:12px}.reader-actions button{min-height:45px;padding:11px 20px}.welcome{padding:clamp(35px,13vh,115px) 12px}.welcome-icon{font-size:75px}.welcome h2{font-size:20px}.login-card{box-shadow:0 25px 90px #027e8912}.modal-content{border-radius:18px}
@media(max-width:1300px){.sidebar{width:230px}.stats{gap:10px}.stat{padding:13px;gap:10px}.stat-icon{width:43px;height:43px}.stat strong{font-size:22px}.mail-layout{grid-template-columns:minmax(300px,44%) minmax(0,56%)}.reader{padding:22px}.message{padding:15px}.sidebar-bottom{padding:20px 12px}}
@media(max-width:980px){.sidebar{width:205px;padding:17px 10px}.sidebar .brand{font-size:19px}.sidebar .mark{width:34px;height:34px}.stat{min-height:76px}.stat span:not(.stat-icon){font-size:11px}.stat-icon{display:none}.mail-layout{grid-template-columns:minmax(280px,45%) minmax(0,55%)}.top-account{min-width:unset}.filters{flex-wrap:wrap}.filters select{margin-left:0}}
@media(max-width:760px){.sidebar{width:270px;padding:20px 14px;box-shadow:10px 0 45px #09273623}.sidebar .brand{font-size:23px}.sidebar .mark{width:42px;height:42px}main{padding:0 10px 12px}.topbar{height:72px}.search{padding:10px 12px}.top-account{min-width:35px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:10px}.stat{padding:13px;min-height:73px}.stat:nth-child(3){display:flex}.stat:nth-child(4){display:none}.stat strong{font-size:21px}.mail-layout{min-height:calc(100dvh - 172px);border-radius:14px}.inbox-panel,.read-panel{height:calc(100dvh - 172px)}.section-title{min-height:59px}.filters{padding:9px 12px;min-height:52px;gap:2px}.filters button{padding:7px 9px;font-size:11px}.message{min-height:97px;padding:15px 12px}.message-head strong{max-width:65%}.reader{padding:19px 17px;max-height:none}.reader h1{font-size:21px}.read-toolbar{height:58px}.top-account .small-avatar{display:grid}.sidebar-bottom{padding:17px}}
@media(max-width:380px){.stat{padding:9px}.stat strong{font-size:19px}.stat span:not(.stat-icon){font-size:10px}.filters select{max-width:100%;font-size:11px}.top-account{display:none}}

/* v0.3: rich composing and contacts */
.compose-dialog{width:min(1040px,96vw);max-height:94dvh}.compose-dialog #sendForm{gap:13px;padding:20px 28px}.recipients{display:grid;gap:9px}.recipient-row{display:flex;align-items:center;gap:8px}.recipient-row input{min-width:0;flex:1}.contact-pick{padding:8px 13px;border:1px solid #cce6e9;border-radius:10px;color:#008f9c;background:#eaf8fa;font-size:20px}.recipient-toggle{display:flex;gap:16px;justify-content:flex-end}.recipient-toggle button{color:#048d9c;font-size:13px;font-weight:650}.editor-field>label{display:block;margin-bottom:6px;font-weight:650;color:#465b6e}.editor-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:9px 10px;background:#f4fafb;border:1px solid #dce8ee;border-bottom:0;border-radius:10px 10px 0 0}.editor-toolbar button{min-width:30px;height:32px;padding:3px 6px;border:1px solid transparent;border-radius:6px;font-size:14px;font-weight:650}.editor-toolbar button:hover,.editor-toolbar button:focus{background:#d9f1f3;border-color:#bddfdf}.editor-toolbar select{height:32px;max-width:122px;border:1px solid #d8e7eb;border-radius:6px;background:white;color:#354c5e;font-size:12px}.tool-divider{height:26px;border-left:1px solid #d5e4e9;margin:0 3px}.color-tool{display:flex!important;flex-direction:row!important;align-items:center;gap:3px!important;font-weight:900!important}.color-tool input{width:29px;height:29px;border:0;padding:0;background:none;cursor:pointer}.rich-body{min-height:210px;max-height:35dvh;overflow:auto;padding:17px 18px;line-height:1.7;border:1px solid #dce8ee;border-radius:0 0 10px 10px;outline-color:#0096a4;white-space:pre-wrap;overflow-wrap:anywhere;color:#1e334c;background:#fff}.rich-body:empty:before{content:attr(data-placeholder);color:#8999a9;pointer-events:none}.rich-body blockquote{padding-left:12px;border-left:3px solid #11aab1;color:#597384}.rich-body h2,.rich-body h3{margin:.45em 0}.compose-dialog .attach-label{border:1px dashed #b6dade}.contacts-dialog{width:min(760px,96vw)}.contacts-content{padding:20px 25px}.contacts-content>p{margin-top:0}.contact-add{display:grid;grid-template-columns:1fr 1.2fr auto;gap:9px;margin:14px 0}.contact-add input,.contacts-content>input{border:1px solid #dce8ee;border-radius:9px;padding:12px;min-width:0;outline-color:#0096a4}.contacts-content>input{width:100%;margin-bottom:12px}.contacts-list{max-height:50dvh;overflow-y:auto;border:1px solid #edf1f4;border-radius:12px}.contact-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-bottom:1px solid #edf1f4}.contact-row:last-child{border-bottom:0}.contact-identity{min-width:0;flex:1}.contact-identity strong,.contact-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-identity small{color:#8799a9;font-size:12px}.contact-row .secondary{padding:8px 11px;font-size:12px}
@media(max-width:760px){.compose-dialog{width:100%;max-height:98dvh}.compose-dialog #sendForm{padding:12px;gap:10px}.editor-toolbar{gap:3px}.rich-body{min-height:160px;max-height:28dvh}.modal{padding:6px}.contact-add{grid-template-columns:1fr}.contacts-content{padding:13px}.contact-row{gap:7px}.contact-row .avatar{display:none}}