@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
*{box-sizing:border-box}:root{--navy:#17396f;--blue:#0875ef;--blue2:#0963db;--muted:#6c86b2;--line:#d4e3fa}body{margin:0;font-family:'Poppins',Arial,sans-serif;color:var(--navy);background:#f5f8fd}a{color:var(--blue2);text-decoration:none}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 0% 0%,#dceaff 0,transparent 34%),radial-gradient(ellipse at 100% 100%,#dcecff 0,transparent 35%),linear-gradient(135deg,#f7fbff,#fff 50%,#f2f8ff)}.decor{position:absolute;border:1px solid #a9ceff;border-radius:50%;pointer-events:none}.decor-left{width:650px;height:650px;left:-360px;top:-370px;box-shadow:0 0 0 60px #c6deff3d,0 0 0 130px #c6deff26}.decor-right{width:660px;height:660px;right:-390px;bottom:-420px;box-shadow:0 0 0 65px #c6deff3d,0 0 0 140px #c6deff24}.dots{position:absolute;width:110px;height:110px;background-image:radial-gradient(#78b1ff 2px,transparent 2px);background-size:32px 32px}.dots-left{left:5%;bottom:18%}.dots-right{right:5%;top:10%}.login-card{position:relative;width:min(100%,640px);background:#fffffff0;border:1px solid #ffffffeb;border-radius:24px;padding:42px 50px 34px;box-shadow:0 24px 80px #3267b121;z-index:1}.brand{text-align:center;font-weight:700;font-size:22px;letter-spacing:-.6px;color:var(--navy)}.brand span{font-weight:400;font-size:.78em;letter-spacing:0;margin-left:3px}.brand-line{height:2px;width:100px;background:#1684ff;margin:28px auto 30px}.login-card h1{text-align:center;font-size:42px;line-height:1.2;margin:0 0 12px;font-weight:700;letter-spacing:-1.3px}.login-card h1 span{color:var(--blue)}.subtitle{text-align:center;color:var(--muted);font-size:15px;margin:0 0 34px}.login-card form>label,.compose-form label{display:block;font-size:14px;font-weight:500;margin:0 0 8px}.field{height:57px;border:1px solid #cbdcf6;border-radius:12px;display:flex;align-items:center;padding:0 16px;margin-bottom:18px;background:#fff}.field:focus-within{border-color:#1684ff;box-shadow:0 0 0 3px #1684ff1a}.field-icon{font-size:21px;color:#6483b2;width:30px}.field input{border:0;outline:0;flex:1;min-width:0;font:400 15px 'Poppins',sans-serif;color:var(--navy)}.field input::placeholder{color:#8b9dbb}.show-password{border:0;background:none;color:#6382b1;font-size:20px;cursor:pointer}.form-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 27px;font-size:13px}.remember{display:flex;align-items:center;gap:9px}.remember input{accent-color:var(--blue)}.submit-btn{width:100%;min-height:55px;border:0;border-radius:12px;background:linear-gradient(100deg,#0877f5,#0863df);color:white;font:600 15px 'Poppins',sans-serif;cursor:pointer;padding:12px 18px;box-shadow:0 10px 22px #0875ef2e}.submit-btn span{font-size:22px;margin-left:12px}.or{display:flex;align-items:center;gap:18px;color:#8da1c1;margin:25px 0 22px;font-size:14px}.or:before,.or:after{content:'';height:1px;background:var(--line);flex:1}.security{display:flex;align-items:center;gap:18px;background:#f1f7ff;border-radius:14px;padding:18px 20px}.shield{width:42px;height:42px;flex-shrink:0;border:2px solid var(--blue);color:var(--blue);border-radius:50%;display:grid;place-items:center;font-size:23px}.security strong,.security small{display:block}.security strong{font-size:14px}.security small{color:#718bb4;font-size:12px;margin-top:4px;line-height:1.6}.login-card footer{text-align:center;font-size:11px;color:#9aacc6;margin-top:24px}.alert,.success{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:18px}.alert{background:#fff1f1;border:1px solid #ffd1d1;color:#a32626}.success{background:#edfff4;border:1px solid #b8efce;color:#176a3a}.topbar{height:76px;background:#174a8b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;box-shadow:0 4px 14px #143f751c}.small-brand{color:#fff;text-align:left;font-size:18px}.topbar-right{display:flex;align-items:center;gap:22px;font-size:13px}.topbar-right span{color:white}.logout{color:#fff;border:1px solid #ffffff70;border-radius:8px;padding:9px 16px}.mail-layout{display:flex;min-height:calc(100vh - 76px)}.sidebar{width:250px;flex-shrink:0;background:#fff;border-right:1px solid #e2eaf5;padding:24px 16px;display:flex;flex-direction:column;gap:6px}.compose-btn{display:block;background:#0b75eb;color:white;padding:13px 16px;border-radius:9px;font-size:14px;font-weight:500;margin-bottom:16px;box-shadow:0 7px 15px #0b75eb25}.folder{display:block;padding:12px 16px;border-radius:8px;color:#526c94;font-size:14px}.folder.active{background:#e7f1ff;color:#075ec5;font-weight:600}.inbox-content{flex:1;min-width:0;padding:28px}.inbox-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.inbox-heading h1{font-size:25px;margin:0}.inbox-heading p{margin:4px 0 0;color:#7e92b2;font-size:13px}.search-placeholder{background:#fff;border:1px solid #dce6f3;border-radius:10px;padding:10px 16px;width:min(400px,50%);display:flex}.search-placeholder input{border:0;outline:0;width:100%;font:13px Poppins;color:var(--navy)}.message-list{background:#fff;border:1px solid #e0e8f3;border-radius:12px;overflow:hidden}.message-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px;border-bottom:1px solid #edf1f7;font-size:13px;color:var(--navy)}.message-row:last-child{border-bottom:0}.message-row.unread{background:#f5f9ff;font-weight:600}.message-main{display:flex;flex-direction:column;gap:5px;min-width:0}.message-main span{color:#7589a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}.message-row time{color:#8a9bb5;font-size:11px;white-space:nowrap;font-weight:400}.empty-state{padding:60px 20px;text-align:center;background:#fff;border:1px solid #e0e8f3;border-radius:12px;color:#8296b5;font-size:14px}.reader{max-width:1100px;margin:28px auto;padding:0 22px}.reader-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.action-btn{background:white;border:1px solid #dbe6f4;border-radius:8px;padding:10px 15px;font:500 13px Poppins;color:#28517f}.action-btn.danger{color:#b52b3a}.reader-card{background:white;border:1px solid #e0e8f3;border-radius:14px;padding:28px;box-shadow:0 8px 30px #234d8010}.reader-card h1{font-size:23px;margin:0 0 20px;overflow-wrap:anywhere}.meta{font-size:13px;line-height:2;color:#6b80a0;padding-bottom:20px;border-bottom:1px solid #e9eff7}.attachments{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:18px 0;font-size:13px}.attachments a{background:#f0f6ff;border-radius:8px;padding:9px 12px}.mail-frame{width:100%;height:55vh;border:0;border-top:1px solid #e8eef6;margin-top:12px;background:#fff}.compose-form input:not([type=file]),.compose-form textarea{width:100%;border:1px solid #d5e2f2;border-radius:9px;padding:13px;font:14px Poppins;margin-bottom:18px;color:var(--navy)}.compose-form textarea{resize:vertical;line-height:1.6}.compose-form input[type=file]{display:block;margin:8px 0 24px;font:13px Poppins}.muted{color:#8296b5;font-size:13px}@media(max-width:700px){.login-card{padding:32px 24px 26px}.login-card h1{font-size:34px}.brand{font-size:18px}.subtitle{font-size:13px}.form-options{font-size:11px}.topbar{padding:0 14px}.small-brand{font-size:12px}.topbar-right{gap:9px;font-size:10px}.mail-layout{display:block}.sidebar{width:100%;flex-direction:row;overflow:auto;padding:12px;gap:6px}.compose-btn,.folder{white-space:nowrap;margin:0;padding:12px}.inbox-content{padding:18px 12px}.inbox-heading{align-items:stretch;flex-direction:column}.search-placeholder{width:100%}.message-row{padding:15px 12px}.message-row time{font-size:10px}.reader{padding:0 10px;margin:16px auto}.reader-card{padding:18px}.reader-card h1{font-size:19px}}


/* =========================================================
   SENTRA WEB MAIL — Clean UI refresh (CSS presentation only)
   ========================================================= */
:root {
    --sw-ink: #18365f;
    --sw-blue: #1769d2;
    --sw-blue-dark: #154d91;
    --sw-muted: #71839e;
    --sw-border: #e1e9f3;
    --sw-surface: #ffffff;
    --sw-bg: #f4f7fb;
    --sw-shadow: 0 12px 34px rgba(26, 57, 98, .07);
}
* { box-sizing: border-box; }
body { font-family: 'Poppins', Arial, sans-serif; color: var(--sw-ink); }
a { transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.topbar {
    min-height: 72px; padding: 0 28px; background: #174b8b;
    box-shadow: 0 3px 14px rgba(16, 49, 91, .12);
}
.brand { letter-spacing: -.45px; font-weight: 700; text-decoration: none; }
.brand span { font-weight: 400; letter-spacing: 0; }
.small-brand { font-size: 18px; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.account-email { font-size: 13px; color: rgba(255,255,255,.92); }
.logout {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 18px; border: 1px solid rgba(255,255,255,.3);
    border-radius: 10px; color: #fff; text-decoration: none; font-size: 13px;
}
.logout:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
.mail-layout { min-height: calc(100vh - 72px); }
.sidebar {
    width: 254px; flex: 0 0 254px; padding: 26px 16px 18px;
    background: #fff; border-right: 1px solid var(--sw-border);
}
.compose-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; margin: 0 0 26px; padding: 12px 16px;
    border-radius: 12px; background: var(--sw-blue); color: #fff;
    box-shadow: 0 7px 18px rgba(23,105,210,.18); font-weight: 600; font-size: 13px;
    text-decoration: none;
}
.compose-btn:hover { background: var(--sw-blue-dark); transform: translateY(-1px); }
.sidebar-caption {
    padding: 0 13px 9px; color: #9aa9bd; font-size: 10px; font-weight: 600;
    letter-spacing: 1.1px;
}
.folder {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 43px; margin: 3px 0; padding: 10px 13px;
    border-radius: 10px; color: #60738e; text-decoration: none;
    font-size: 13px; font-weight: 500;
}
.folder::before {
    content: ""; width: 18px; height: 18px; flex: 0 0 18px;
    background: currentColor; opacity: .78;
    -webkit-mask: var(--folder-icon) center/contain no-repeat;
    mask: var(--folder-icon) center/contain no-repeat;
}
.folder-inbox::before { --folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 4h16v16H4zM4 13h5l2 3h2l2-3h5'/%3E%3C/svg%3E"); }
.folder-spam::before { --folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3 2.8 20h18.4L12 3zM12 9v5m0 3h.01'/%3E%3C/svg%3E"); }
.folder-sampah::before { --folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m4 4v6m6-6v6'/%3E%3C/svg%3E"); }
.folder-terkirim::before { --folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m22 2-7 20-4-9-9-4 20-7zM22 2 11 13'/%3E%3C/svg%3E"); }
.folder-draft::before { --folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h8'/%3E%3C/svg%3E"); }
.folder-arsip::before { --folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 4h18v4H3zM5 8v12h14V8M10 12h4'/%3E%3C/svg%3E"); }
.folder:hover { color: var(--sw-blue); background: #f4f8fe; }
.folder.active { color: var(--sw-blue); background: #eaf3ff; box-shadow: inset 3px 0 0 var(--sw-blue); font-weight: 600; }
.sidebar-foot { margin: 30px 12px 0; padding-top: 16px; border-top: 1px solid #edf1f6; color: #a2afc0; font-size: 10px; }
.inbox-content { min-width: 0; padding: 34px clamp(20px, 3vw, 48px); background: var(--sw-bg); }
.page-topline { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 28px; }
.eyebrow { display: block; margin-bottom: 7px; color: #8a9ab0; font-size: 10px; font-weight: 600; letter-spacing: 1.35px; }
.inbox-title-group h1, .card-heading h1 { margin: 0; color: var(--sw-ink); font-size: clamp(25px, 2vw, 30px); line-height: 1.25; letter-spacing: -.7px; }
.inbox-title-group p { margin: 9px 0 0; color: #6f829d; font-size: 12px; }
.subtle { color: #9aa8ba; }
.search-placeholder {
    display: flex; align-items: center; gap: 11px; width: min(440px, 48%);
    min-width: 250px; min-height: 54px; padding: 6px 7px 6px 16px;
    border: 1px solid #dce6f2; border-radius: 13px; background: #fff;
    box-shadow: 0 4px 16px rgba(27, 63, 108, .035);
}
.search-placeholder:focus-within { border-color: #8bb9ef; box-shadow: 0 0 0 4px rgba(23,105,210,.08); }
.search-icon {
    position: relative; display: block; width: 16px; height: 16px; flex: 0 0 16px;
    border: 1.7px solid #8c9db4; border-radius: 50%;
}
.search-icon::after { content: ""; position: absolute; width: 7px; height: 1.7px; right: -5px; bottom: -3px; background: #8c9db4; transform: rotate(45deg); border-radius: 2px; }
.search-placeholder input[type="search"] {
    flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; outline: 0;
    background: transparent; appearance: none; font: 400 12px 'Poppins', Arial, sans-serif; color: var(--sw-ink);
}
.search-placeholder input::placeholder { color: #9aa9bd; }
.search-placeholder input[type="hidden"] { display: none; }
.search-button {
    min-height: 39px; padding: 0 17px; border: 0; border-radius: 9px;
    background: var(--sw-blue); color: #fff; font: 500 12px 'Poppins', Arial, sans-serif; cursor: pointer;
}
.search-button:hover { background: var(--sw-blue-dark); }
.message-list, .reader-card {
    overflow: hidden; border: 1px solid var(--sw-border); border-radius: 16px;
    background: #fff; box-shadow: var(--sw-shadow);
}
.list-toolbar { display: flex; justify-content: space-between; padding: 15px 22px; border-bottom: 1px solid #edf1f6; color: #8797ad; font-size: 11px; font-weight: 500; }
.message-row {
    display: flex; align-items: center; gap: 15px; min-height: 86px; padding: 17px 22px;
    border-bottom: 1px solid #edf1f6; color: inherit; text-decoration: none;
}
.message-row:last-child { border-bottom: 0; }
.message-row:hover { background: #f9fbfe; }
.message-row.unread { background: #fbfdff; }
.message-row.unread .message-main strong { color: #174f99; font-weight: 700; }
.message-avatar {
    display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px;
    border-radius: 50%; background: #eaf2fc; color: #356ba9; font-size: 13px; font-weight: 600;
}
.message-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
.message-main strong { overflow: hidden; color: #29496f; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.message-main span { overflow: hidden; color: #8291a7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.message-row time { flex: 0 0 auto; max-width: 190px; color: #98a5b7; font-size: 10px; text-align: right; }
.empty-state { display: flex; align-items: center; flex-direction: column; padding: 64px 24px; border: 1px dashed #d5e0ee; border-radius: 16px; background: rgba(255,255,255,.7); text-align: center; }
.empty-state h2 { margin: 14px 0 5px; color: var(--sw-ink); font-size: 18px; }
.empty-state p { margin: 0 0 20px; color: var(--sw-muted); font-size: 12px; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #eaf3ff; color: var(--sw-blue); font-size: 23px; }
.empty-state.compact { padding: 42px 20px; }
.reader { width: min(100% - 48px, 1080px); margin: 34px auto 60px; }
.reader-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.action-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border: 1px solid #dce5f0; border-radius: 9px; background: #fff; color: #496583; font-size: 12px; text-decoration: none; }
.action-btn:hover { border-color: #b7d0ef; background: #f6faff; color: var(--sw-blue); }
.action-btn.danger { color: #b64a4a; border-color: #f0d9d9; }
.action-btn.danger:hover { background: #fff7f7; border-color: #e9bebe; }
.reader-card { padding: clamp(22px, 3vw, 34px); }
.card-heading { margin-bottom: 24px; }
.card-heading .muted, .muted { color: var(--sw-muted); font-size: 12px; }
.card-heading p { margin: 9px 0 0; }
.compose-form { display: flex; flex-direction: column; gap: 10px; }
.compose-form label { margin-top: 8px; color: #536984; font-size: 12px; font-weight: 600; }
.compose-form input:not([type=file]), .compose-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid #dce5f0; border-radius: 10px;
    outline: none; background: #fff; color: var(--sw-ink); font: 400 13px 'Poppins', Arial, sans-serif;
}
.compose-form input:focus, .compose-form textarea:focus { border-color: #8bb9ef; box-shadow: 0 0 0 3px rgba(23,105,210,.08); }
.compose-form textarea { min-height: 260px; resize: vertical; line-height: 1.7; }
.file-input { padding: 10px; border: 1px dashed #cbd8e8; border-radius: 10px; background: #fafcff; color: #687d98; font: 12px 'Poppins', Arial, sans-serif; }
.label-note { color: #9aa8ba; font-weight: 400; }
.compose-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 18px; }
.compose-footer .submit-btn { width: auto; min-width: 170px; margin: 0; }
.message-meta { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 22px 0; padding: 18px; border: 1px solid #edf1f6; border-radius: 12px; background: #fafcff; }
.message-meta div { display: grid; grid-template-columns: 85px 1fr; gap: 12px; font-size: 12px; }
.message-meta strong { color: #8a9ab0; font-weight: 500; }
.message-meta span { color: #425b78; overflow-wrap: anywhere; }
.attachments { margin: 18px 0; padding: 16px; border: 1px solid #e5edf6; border-radius: 12px; background: #fbfdff; color: #536984; font-size: 12px; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.attachment-list a { display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; border: 1px solid #dce6f2; border-radius: 8px; background: #fff; color: #2865a7; text-decoration: none; font-size: 11px; }
.mail-frame { display: block; width: 100%; min-height: 480px; border: 1px solid #e6edf5; border-radius: 12px; background: #fff; }
.search-wide { width: 100%; max-width: 100%; margin-bottom: 24px; }
.search-result-toolbar { margin: 18px 0 0; border: 1px solid var(--sw-border); border-bottom: 0; border-radius: 12px 12px 0 0; }
.search-page .message-list { border-radius: 0 0 14px 14px; }
.alert, .success { margin: 16px 0; padding: 13px 15px; border-radius: 10px; font-size: 12px; }
.alert { border: 1px solid #f2d2d2; background: #fff7f7; color: #a43f3f; }
.success { border: 1px solid #ccebdc; background: #f2fbf6; color: #28784f; }
.login-card { border: 1px solid rgba(220,231,244,.9); border-radius: 22px; box-shadow: 0 22px 70px rgba(27,58,99,.12); }
.login-card .brand { color: #174b8b; }
.login-form { margin-top: 24px; }
.login-form label { display: block; margin: 15px 0 8px; color: #536984; font-size: 12px; font-weight: 600; }
.login-form .field { display: flex; align-items: center; }
.login-form .field input { min-width: 0; }
.show-password { border: 0; background: transparent; color: var(--sw-blue); font: 500 11px 'Poppins',Arial,sans-serif; cursor: pointer; }
.form-options { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 14px 0 20px; font-size: 11px; }
.remember-note { color: #8a9ab0; }
.form-options a { color: var(--sw-blue); text-decoration: none; }
.submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; border: 0; border-radius: 11px; background: var(--sw-blue); color: #fff; font: 600 13px 'Poppins',Arial,sans-serif; cursor: pointer; box-shadow: 0 7px 18px rgba(23,105,210,.18); }
.submit-btn:hover { background: var(--sw-blue-dark); transform: translateY(-1px); }
.security { display: flex; align-items: center; gap: 12px; margin-top: 25px; padding: 15px; border: 1px solid #e5edf6; border-radius: 12px; background: #fafcff; }
.security strong { display: block; color: #496583; font-size: 11px; }
.security small { display: block; margin-top: 4px; color: #8a9ab0; font-size: 10px; line-height: 1.5; }
.login-card footer { margin-top: 24px; color: #a0adbd; font-size: 10px; text-align: center; }
@media (max-width: 900px) {
    .sidebar { width: 220px; flex-basis: 220px; }
    .page-topline { align-items: stretch; flex-direction: column; gap: 18px; }
    .search-placeholder { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
    .topbar { min-height: 62px; padding: 0 14px; }
    .small-brand { font-size: 13px; }
    .topbar-right { gap: 8px; }
    .account-email { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
    .logout { min-height: 34px; padding: 0 10px; font-size: 11px; }
    .mail-layout { display: block; }
    .sidebar { display: flex; width: 100%; flex-direction: row; gap: 5px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--sw-border); }
    .compose-btn { flex: 0 0 auto; min-height: 40px; margin: 0 6px 0 0; padding: 8px 12px; white-space: nowrap; }
    .sidebar-caption, .sidebar-foot { display: none; }
    .folder { flex: 0 0 auto; min-height: 40px; margin: 0; padding: 8px 11px; white-space: nowrap; }
    .inbox-content { padding: 23px 13px; }
    .message-row { gap: 10px; padding: 14px 12px; }
    .message-avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 11px; }
    .message-main strong, .message-main span { max-width: 100%; font-size: 11px; }
    .message-row time { max-width: 95px; font-size: 9px; }
    .reader { width: calc(100% - 24px); margin: 20px auto 35px; }
    .reader-card { padding: 18px 14px; }
    .reader-actions { gap: 7px; }
    .action-btn { min-height: 35px; padding: 0 10px; font-size: 11px; }
    .compose-footer { align-items: stretch; flex-direction: column; }
    .compose-footer .submit-btn { width: 100%; }
    .message-meta div { grid-template-columns: 68px 1fr; }
    .mail-frame { min-height: 400px; }
}


/* Inbox split-view: message list left, reading pane right */
.inbox-split-layout {
    display: grid;
    grid-template-columns: minmax(330px, .92fr) minmax(420px, 1.08fr);
    align-items: start;
    gap: 20px;
}
.inbox-list-column { min-width: 0; }
.inbox-list-column .message-row { padding: 15px 17px; gap: 12px; }
.inbox-list-column .message-row time { max-width: 115px; font-size: 9px; }
.inbox-list-column .message-main strong,
.inbox-list-column .message-main span { font-size: 11px; }
.message-row.preview-selected {
    background: #edf5ff;
    box-shadow: inset 3px 0 0 var(--sw-blue);
}
.preview-column {
    position: sticky;
    top: 20px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sw-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--sw-shadow);
}
.preview-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 18px 22px;
    border-bottom: 1px solid #edf1f6;
}
.preview-heading .eyebrow { margin-bottom: 5px; }
.preview-heading h2 {
    max-width: 430px;
    margin: 0;
    overflow: hidden;
    color: var(--sw-ink);
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preview-status { color: #95a3b5; font-size: 10px; white-space: nowrap; }
.preview-frame-wrap { position: relative; min-height: 620px; background: #fff; }
.preview-frame {
    display: none;
    width: 100%;
    height: min(76vh, 850px);
    min-height: 620px;
    border: 0;
    background: #fff;
}
.preview-empty {
    display: flex;
    min-height: 620px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 35px;
    color: #8b9bb0;
    text-align: center;
}
.preview-empty-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    margin-bottom: 17px;
    border-radius: 18px;
    background: #edf5ff;
    color: var(--sw-blue);
    font-size: 25px;
}
.preview-empty strong { color: #496583; font-size: 14px; font-weight: 600; }
.preview-empty p { max-width: 290px; margin: 9px 0 0; font-size: 11px; line-height: 1.7; }
.embedded-view { min-width: 0; margin: 0; padding: 0; background: #fff; }
.embedded-reader { width: 100%; margin: 0; padding: 18px; }
.embedded-reader .reader-card {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.embedded-reader .card-heading { margin-bottom: 16px; }
.embedded-reader .card-heading h1 { font-size: 20px; overflow-wrap: anywhere; }
.embedded-reader .reader-actions { margin-bottom: 14px; }
.embedded-reader .message-meta { padding: 13px; margin: 14px 0; }
.embedded-reader .mail-frame { min-height: 420px; }
.embedded-reader .attachments { padding: 12px; }
@media (max-width: 1120px) {
    .inbox-split-layout { grid-template-columns: minmax(290px, .8fr) minmax(340px, 1.2fr); gap: 14px; }
    .inbox-content { padding-left: 20px; padding-right: 20px; }
    .preview-heading { padding: 16px; }
}
@media (max-width: 820px) {
    .inbox-split-layout { grid-template-columns: 1fr; }
    .preview-column { position: static; }
    .preview-frame-wrap, .preview-empty { min-height: 450px; }
    .preview-frame { height: 65vh; min-height: 450px; }
    .inbox-list-column .message-row time { max-width: 130px; }
}


/* Alignment and readability refinement — v5 */
.inbox-split-layout {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    align-items: stretch;
}
.inbox-list-column, .preview-column, .message-list, .message-row,
.message-main, .embedded-reader, .reader-card { min-width: 0; }
.inbox-list-column .message-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    min-height: 92px;
    padding: 15px 16px;
}
.inbox-list-column .message-avatar { grid-column: 1; grid-row: 1 / span 2; }
.inbox-list-column .message-main { grid-column: 2; grid-row: 1; width: 100%; }
.inbox-list-column .message-row time {
    grid-column: 2;
    grid-row: 2;
    max-width: 100%;
    margin-top: 5px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}
.inbox-list-column .message-main strong,
.inbox-list-column .message-main span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preview-column { align-self: stretch; }
.preview-heading { min-width: 0; }
.preview-heading > div { min-width: 0; flex: 1; }
.preview-heading h2 {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.preview-status { flex: 0 0 auto; }
.preview-frame-wrap { width: 100%; min-width: 0; overflow: hidden; }
.preview-frame { display: none; width: 100%; max-width: 100%; border: 0; }
.embedded-reader { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
.embedded-reader .reader-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.embedded-reader .reader-card,
.embedded-reader .card-heading,
.embedded-reader .message-meta,
.embedded-reader .attachments { width: 100%; max-width: 100%; min-width: 0; }
.embedded-reader .card-heading h1 {
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: normal;
}
.embedded-reader .message-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
.embedded-reader .message-meta > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6;
}
.embedded-reader .message-meta > div:last-child { border-bottom: 0; }
.embedded-reader .message-meta strong { padding-top: 1px; }
.embedded-reader .message-meta span { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.embedded-reader .attachments { overflow: hidden; }
.embedded-reader .attachment-list a { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.embedded-reader .mail-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 520px;
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    background: #fff;
}
@media (max-width: 1120px) {
    .inbox-split-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 820px) {
    .inbox-list-column .message-row {
        grid-template-columns: 34px minmax(0, 1fr);
        min-height: 84px;
    }
    .inbox-list-column .message-row time { text-align: left; }
    .preview-heading { align-items: flex-start; }
}

/* Poppins typography consistency — v6 */
html, body, body *, button, input, select, textarea {
    font-family: 'Poppins', sans-serif !important;
}