/* TrustCash Mail Center — distinctive corporate visual system */
*{box-sizing:border-box}
:root{--ink:#18283d;--muted:#718096;--navy:#10253f;--navy2:#183957;--teal:#25b6a5;--teal-soft:#e4f8f4;--blue:#3868e8;--line:#e4eaf0;--canvas:#f3f6f9;--white:#fff}
body{margin:0;background:var(--canvas);color:var(--ink);font:14px "Segoe UI",Arial,sans-serif}
.app{min-height:100vh}
.topbar{height:78px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 30px;gap:26px;position:sticky;top:0;z-index:5;box-shadow:0 5px 20px #10253f1a}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;width:240px;flex-shrink:0}
.brand-logo{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#69e1d2,#1ca998);color:#102e48;box-shadow:inset 0 0 0 1px #ffffff50}
.brand-logo svg{width:32px;height:32px}
.brand>span:last-child{display:flex;flex-direction:column;gap:2px}
.brand b{font-size:19px;font-weight:750;letter-spacing:-.55px}
.brand small{font-size:9px;font-weight:800;letter-spacing:3px;color:#7be0d4}
.searchbox{height:43px;background:#203954;border:1px solid #36506a;border-radius:9px;display:flex;align-items:center;gap:12px;padding:0 15px;flex:1;max-width:650px;color:#9fb4c8}
.searchbox:focus-within{background:#fff;border-color:#80d8cf;box-shadow:0 0 0 3px #25b6a51f;color:#456}
.searchbox>span{font-size:23px}
.searchbox input{border:0;outline:0;background:transparent;min-width:0;flex:1;font:13px "Segoe UI",Arial;color:inherit}
.searchbox input::placeholder{color:#a6b6c6}
.searchbox:focus-within input{color:var(--ink)}
.searchbox kbd{font-size:15px;color:#9fb4c8}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{border:0;background:transparent;color:#738197;width:35px;height:35px;border-radius:8px;cursor:pointer;font-size:19px;display:inline-grid;place-items:center}
.topbar .icon-btn{color:#c4d4e2}
.icon-btn:hover{background:#edf2fa;color:#2e4e9e}
.topbar .icon-btn:hover{background:#29455f;color:#fff}
.user-avatar{border:2px solid #6ed9cb;border-radius:11px;width:37px;height:37px;background:#e1faf5;color:#173b55;font-size:14px;font-weight:800;cursor:pointer}
.mobile-menu{display:none}
.workspace{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:calc(100vh - 78px)}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:24px 16px 22px;display:flex;flex-direction:column;min-height:calc(100vh - 78px)}
.compose-btn{height:47px;border:0;border-radius:9px;background:var(--teal);color:#083c43;font-weight:750;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;margin:0 4px 25px;box-shadow:0 6px 14px #25b6a522}
.compose-btn:hover{background:#45cbbb;transform:translateY(-1px)}
.compose-btn span{font-size:23px;font-weight:400}
.nav-item{width:100%;height:42px;border:0;background:transparent;border-radius:8px;display:flex;align-items:center;gap:13px;padding:0 13px;text-align:left;color:#65758a;cursor:pointer;font-size:12px;margin:2px 0}
.nav-item:hover{background:#f2f6f8;color:#203a53}
.nav-item.active{background:#e6f7f4;color:#087e76;font-weight:750;box-shadow:inset 3px 0 #20b3a3}
.nav-item b{margin-left:auto;font-size:10px;background:#d9eee9;padding:3px 7px;border-radius:20px;color:#087e76}
.nav-icon{width:18px;text-align:center;font-size:17px}
.labels-title{display:flex;justify-content:space-between;align-items:center;padding:26px 13px 9px;font-size:9px;font-weight:800;color:#9ba7b5;letter-spacing:1.5px}
.labels-title button{border:0;background:transparent;color:#77869c;font-size:19px;cursor:pointer}
.label-item{height:34px}
.label-dot{width:8px;height:8px;border-radius:2px;margin-left:5px}
.label-dot.blue{background:#5682e8}.label-dot.green{background:#24b39e}
.sidebar-bottom{margin-top:auto;padding:20px 10px 0}
.storage-row{display:flex;justify-content:space-between;font-size:10px;color:#77859a;margin-bottom:10px}
.storage-track{height:5px;background:#e9eef5;border-radius:9px;overflow:hidden}.storage-track i{display:block;width:12%;height:100%;background:var(--teal);border-radius:9px}
.sidebar-bottom small{display:block;margin-top:13px;font-size:9px;line-height:1.5;color:#a1abba}
.main-panel{min-width:0;padding:0 30px 50px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:27px 0 21px;gap:15px}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:#159d90;margin-bottom:7px}
.page-heading h1{font-size:25px;letter-spacing:-.8px;margin:0;color:#172c44;font-weight:750}
.page-heading p{font-size:11px;color:#8996a6;margin:7px 0 0}
.heading-tools{display:flex;align-items:center;gap:9px}
.status-chip{display:inline-flex;align-items:center;gap:7px;background:#e2f7f0;color:#138778;border:1px solid #c9eee4;border-radius:6px;padding:8px 10px;font-size:10px;font-weight:700;white-space:nowrap}
.status-chip i{width:6px;height:6px;border-radius:50%;background:#23b69f}
.toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-bottom:0;background:#fff;border-radius:11px 11px 0 0;padding:0 13px}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px}
.toolbar input{accent-color:var(--teal);width:14px;height:14px;margin:0 5px 0 4px}
.toolbar-right{color:#8b96a8;font-size:10px;gap:7px}
.tabs{display:flex;align-items:stretch;gap:0;height:49px;border:1px solid var(--line);border-bottom:0;background:#fff;padding:0 14px}
.tab{border:0;border-bottom:2px solid transparent;background:transparent;color:#8290a1;font-size:11px;font-weight:650;padding:0 20px;cursor:pointer}
.tab span{font-size:14px;margin-right:8px}
.tab.active{color:#087e76;border-bottom-color:var(--teal)}
.mail-list{padding:0 0 10px;border:1px solid var(--line);border-radius:0 0 11px 11px;background:#fff;overflow:hidden}
.mail-row{display:grid;grid-template-columns:18px 20px 175px minmax(0,1fr) 70px;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid #edf1f5;background:#fff;cursor:pointer;min-height:69px;transition:background .12s}
.mail-row:last-child{border-bottom:0}
.mail-row:hover{background:#f6fbfa}
.mail-row.unread{background:#f5f9ff}
.mail-row input{accent-color:var(--teal);width:14px;height:14px;margin:0;cursor:pointer}
.star-btn{border:0;background:transparent;color:#b0b8c5;font-size:19px;padding:0;cursor:pointer}
.star-btn.starred{color:#dfa72d}
.mail-sender{font-size:11px;color:#34445a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread .mail-sender,.unread .mail-subject{font-weight:750;color:#172c44}
.mail-summary{min-width:0;display:flex;align-items:baseline;gap:7px;overflow:hidden;white-space:nowrap}
.mail-subject{font-size:11px;color:#42526a;flex-shrink:0;max-width:48%;overflow:hidden;text-overflow:ellipsis}
.mail-snippet{font-size:10px;color:#8995a4;overflow:hidden;text-overflow:ellipsis}
.mail-date{text-align:right;font-size:10px;color:#77869b;white-space:nowrap}
.reader{background:#fff;border:1px solid var(--line);border-radius:11px;margin-top:0;overflow:hidden}
.reader-toolbar{height:53px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 15px;gap:6px}
.toolbar-spacer{flex:1}
.reader-content{padding:29px 35px 38px}
.reader-title-row{display:flex;align-items:start;gap:12px}
.reader-title-row h1{font-size:23px;letter-spacing:-.5px;font-weight:650;margin:0 0 24px;flex:1;overflow-wrap:anywhere}
.reader-sender{display:flex;align-items:center;gap:12px}
.sender-avatar{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#dce9ff;color:#355eac;font-weight:800}
.sender-meta{display:grid;gap:5px;min-width:0}.sender-meta b{font-size:12px}.sender-meta small{font-size:11px;color:#8a96a8}
.reader-date{margin-left:auto;font-size:10px;color:#8995a7;align-self:start}
.reader-body{padding:25px 5px 20px 54px;font-size:13px;line-height:1.85;color:#536177;white-space:pre-wrap;overflow-wrap:anywhere}
.reader-actions{padding-left:54px;display:flex;gap:12px}
.outline-btn{border:1px solid #dce3ed;border-radius:7px;background:#fff;color:#53647c;padding:10px 19px;cursor:pointer;font-size:11px;font-weight:650}
.outline-btn:hover{background:#f2fbf9;border-color:#9eddd5}
.empty-state{text-align:center;padding:90px 15px;color:#8793a5}.empty-art{width:70px;height:70px;margin:0 auto 18px;border-radius:18px;background:#e5f7f3;color:#188e84;display:grid;place-items:center;font-size:34px}.empty-state h2{font-size:18px;color:#394960;margin:0 0 7px}.empty-state p{font-size:12px}
.hidden{display:none!important}
.modal-backdrop{position:fixed;inset:0;background:rgba(14,29,52,.45);z-index:20;display:flex;align-items:center;justify-content:center;padding:20px}
.compose-window{width:min(620px,100%);background:#fff;border-radius:12px;box-shadow:0 25px 80px rgba(14,29,52,.25);overflow:hidden}
.compose-window>header{height:48px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 20px}
.compose-window>header b{font-size:12px}.compose-window>header .icon-btn{color:#d4e2ed}
.compose-window form{padding:12px 20px 16px}
.compose-window label{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);font-size:11px;color:#8894a5;padding:8px 0}
.compose-window label input{border:0;outline:0;flex:1;min-width:0;padding:4px;font-size:12px;color:var(--ink)}
.compose-window textarea{width:100%;height:230px;border:0;outline:0;resize:vertical;padding:17px 0;font:13px/1.7 "Segoe UI",Arial;color:var(--ink)}
.compose-window footer{display:flex;align-items:center;gap:14px}
.send-btn{background:var(--teal);color:#073b43;border:0;border-radius:7px;padding:11px 17px;font-size:12px;font-weight:800;cursor:pointer}
.send-btn:hover{background:#48d1c0}.send-btn span{margin-left:13px}
.compose-window footer>span{font-size:10px;color:#98a2b1;flex:1}
.toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);background:#172c44;color:#fff;border-radius:8px;padding:12px 18px;font-size:12px;box-shadow:0 10px 30px #1c2b4525;z-index:30;display:none;max-width:90vw}
.toast.show{display:block}
.demo-banner{position:fixed;bottom:0;left:0;right:0;background:#fff8e6;border-top:1px solid #f0e0b2;color:#89651c;text-align:center;padding:7px 10px;font-size:9px;letter-spacing:.3px;z-index:8}
.demo-banner b{letter-spacing:1px;margin-right:7px}
@media(max-width:900px){.topbar{padding:0 16px;gap:15px}.brand{width:auto;min-width:175px}.searchbox{max-width:none}.workspace{grid-template-columns:215px minmax(0,1fr)}.main-panel{padding:0 16px 50px}.mail-row{grid-template-columns:18px 20px 130px minmax(0,1fr) 54px;gap:8px;padding:13px 8px}.page-heading h1{font-size:22px}}
@media(max-width:650px){.topbar{height:65px;gap:9px;padding:0 10px}.mobile-menu{display:inline-grid;flex:none}.brand{min-width:0;gap:7px}.brand-logo{width:35px;height:35px;border-radius:10px}.brand-logo svg{width:26px}.brand b{font-size:15px}.brand small{font-size:7px;letter-spacing:2.5px}.searchbox{height:37px;padding:0 9px;gap:5px}.searchbox kbd,.top-actions .icon-btn{display:none}.searchbox input{font-size:11px}.top-actions{gap:4px}.user-avatar{width:31px;height:31px;flex:none}.workspace{display:block}.sidebar{position:fixed;z-index:10;top:65px;bottom:25px;left:0;width:250px;box-shadow:15px 0 30px rgba(20,40,70,.12);transform:translateX(-110%);transition:transform .2s;min-height:0;overflow:auto}.sidebar.open{transform:translateX(0)}.main-panel{padding:0 8px 50px}.page-heading{padding:19px 2px 15px;align-items:start}.page-heading h1{font-size:21px}.page-heading p{font-size:10px}.heading-tools{display:none}.toolbar{height:48px}.tabs{height:45px;padding:0 6px}.tab{padding:0 11px;font-size:10px}.mail-row{grid-template-columns:15px 18px minmax(0,1fr) 46px;gap:6px;padding:12px 6px;min-height:72px}.mail-sender{grid-column:3;grid-row:1;font-size:10px}.mail-summary{grid-column:3;grid-row:2;display:block;min-width:0}.mail-subject{display:block;max-width:100%;font-size:10px}.mail-snippet{display:block;font-size:9px;margin-top:3px}.mail-date{grid-column:4;grid-row:1;font-size:9px;align-self:start;padding-top:2px}.mail-row input{grid-column:1;grid-row:1}.star-btn{grid-column:2;grid-row:1}.reader-content{padding:17px 13px}.reader-title-row h1{font-size:19px;margin-bottom:18px}.reader-date{display:none}.reader-body{font-size:12px;padding-top:20px}.reader-actions{gap:8px}.outline-btn{padding:9px 13px}.compose-window form{padding:10px 14px 15px}.compose-window textarea{height:190px}.demo-banner{font-size:8px}}