:root{
  --bg:#f7f8ff;--card:rgba(255,255,255,.92);--line:#e9e9f3;--ink:#202337;--muted:#7a8195;
  --violet:#7367e9;--violet-2:#5f52d8;--violet-soft:#f0eeff;--sky:#eef8ff;--mint:#ebfbf5;
  --danger:#c95f73;--shadow:0 22px 70px rgba(65,56,132,.10);--shadow-soft:0 10px 35px rgba(73,67,120,.08)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#fbfbff 0%,#f7f8ff 58%,#f8fbff 100%)}body{min-height:100vh;overflow-x:hidden}.hidden{display:none!important}
button,input{font:inherit}.aurora{position:fixed;border-radius:999px;filter:blur(10px);pointer-events:none;z-index:0}.aurora.one{width:420px;height:420px;background:radial-gradient(circle,rgba(157,143,255,.18),rgba(157,143,255,0) 68%);top:-150px;left:-80px}.aurora.two{width:480px;height:480px;background:radial-gradient(circle,rgba(119,205,255,.15),rgba(119,205,255,0) 68%);right:-170px;top:200px}.aurora.three{width:360px;height:360px;background:radial-gradient(circle,rgba(147,235,201,.13),rgba(147,235,201,0) 68%);left:28%;bottom:-180px}
.brand{display:inline-flex;align-items:center;gap:11px;color:#2c3042;text-decoration:none;font-size:18px;font-weight:850;letter-spacing:-.4px}.logo,.mini-logo{display:grid;place-items:center;background:linear-gradient(145deg,#7d72f1,#6659dc);color:#fff;box-shadow:0 8px 24px rgba(111,99,224,.22)}.logo{width:35px;height:35px;border-radius:11px;font-size:14px}.mini-logo{width:43px;height:43px;border-radius:14px;font-size:17px}
.login-page{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:40px}.login-shell{width:min(1090px,100%);display:grid;grid-template-columns:1.06fr .82fr;gap:64px;align-items:center}.login-copy{padding:18px}.login-copy .brand{margin-bottom:72px}.invite-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #e4e2f7;background:rgba(255,255,255,.72);border-radius:999px;font-size:11px;font-weight:800;color:#6e678d;box-shadow:0 8px 24px rgba(85,76,143,.05)}.invite-pill i,.forever i,.status i,.address-sub i{width:7px;height:7px;border-radius:50%;background:#49c394;box-shadow:0 0 0 4px rgba(73,195,148,.12)}.login-copy h1{font-size:58px;line-height:1.03;letter-spacing:-3.5px;margin:22px 0 17px;color:#24273a}.login-copy h1 em{font-style:normal;background:linear-gradient(90deg,#685cdc,#8d80ef 55%,#5da9df);-webkit-background-clip:text;background-clip:text;color:transparent}.login-copy p{max-width:620px;color:#737b90;line-height:1.75;font-size:15px;margin:0}.feature-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;color:#5c6477;font-size:11px;font-weight:780}.feature-row span{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.66);border:1px solid rgba(230,231,241,.9)}
.login-card{background:rgba(255,255,255,.9);border:1px solid rgba(231,231,242,.95);backdrop-filter:blur(18px);padding:34px;border-radius:28px;box-shadow:var(--shadow)}.login-card-top{display:flex;align-items:center;gap:13px;margin-bottom:30px}.login-card-top strong{display:block;font-size:18px}.login-card-top small{display:block;color:#8b91a1;font-size:11px;margin-top:4px}.login-card label{display:block;font-size:10px;font-weight:850;color:#626a7c;letter-spacing:.4px;margin-top:16px}.login-card input{margin-top:7px;width:100%;height:48px;border:1px solid #e1e4ec;border-radius:13px;background:#fbfcff;padding:0 14px;outline:none;color:#25293a;transition:.18s}.login-card input:focus,.search-box:focus-within,.alias-box:focus-within{border-color:#aaa2f3;box-shadow:0 0 0 4px rgba(119,103,233,.08);background:#fff}.password-wrap{position:relative}.password-wrap button{position:absolute;right:9px;top:13px;border:0;background:transparent;color:#7c749f;font-size:10px;font-weight:800;cursor:pointer}.form-error{min-height:17px;margin-top:9px;font-size:10px;color:#c75469}.main-btn,.new-mail-btn,.soft-btn,.random-card-btn{border:0;cursor:pointer;font-weight:800;transition:.18s ease;letter-spacing:-.08px}.main-btn{width:100%;height:46px;border-radius:13px;background:linear-gradient(135deg,#7669e8,#6255d9);color:#fff;box-shadow:0 9px 22px rgba(100,87,219,.19);margin-top:4px;font-size:12.5px}.main-btn:hover,.new-mail-btn:hover{transform:translateY(-1px);box-shadow:0 13px 30px rgba(100,87,219,.25)}.main-btn span{float:right;margin-right:8px}.secure-line{margin-top:18px;padding-top:16px;border-top:1px solid #eef0f5;font-size:9px;color:#969cad;display:flex;gap:8px;align-items:center}
.app-page{position:relative;z-index:1;min-height:100vh}.topbar{height:72px;padding:0 max(24px,calc((100vw - 1460px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(230,231,241,.95);background:rgba(255,255,255,.75);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.top-actions{display:flex;align-items:center;gap:13px}.status{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:780;color:#667083;padding:8px 11px;border-radius:999px;background:#f8fafb;border:1px solid #eaedf0}.user-chip{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;border:1px solid #e8eaf1;background:#fff;border-radius:13px}.avatar{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#ebe8ff,#e8f6ff);color:#6156c7;font-weight:900;font-size:12px}.user-chip strong,.user-chip small{display:block}.user-chip strong{font-size:10px}.user-chip small{font-size:8px;color:#9ba0ae;margin-top:2px}.icon-button{width:37px;height:37px;border:1px solid #e6e8ef;background:white;border-radius:11px;color:#71788b;cursor:pointer}
.app-shell{max-width:1460px;margin:0 auto;padding:38px 24px 60px}.welcome-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:25px}.overline{font-size:9px;font-weight:900;letter-spacing:1.55px;color:#9a91c7}.welcome-row h1{font-size:32px;letter-spacing:-1.35px;margin:8px 0 6px}.welcome-row h1 span{color:#7568e7}.welcome-row p{margin:0;color:#7f8799;font-size:11px;line-height:1.55}.welcome-actions{display:flex;align-items:center;gap:10px}.mini-stat{min-width:86px;padding:10px 13px;border:1px solid #e8e9f2;background:rgba(255,255,255,.78);border-radius:14px}.mini-stat small{display:block;font-size:8px;color:#9b9fb0;font-weight:900;letter-spacing:.8px}.mini-stat strong{display:block;font-size:20px;margin-top:3px;letter-spacing:-.5px}.new-mail-btn{height:45px;padding:0 17px;border-radius:14px;background:linear-gradient(135deg,#776be9,#6559dc);color:#fff;box-shadow:0 10px 24px rgba(103,89,220,.18);white-space:nowrap}.new-mail-btn span{font-size:18px;margin-right:4px}
.grid-main{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}.side-column{display:grid;gap:15px}.panel{background:var(--card);border:1px solid rgba(231,232,241,.98);border-radius:22px;box-shadow:var(--shadow-soft);overflow:hidden}.create-card{padding:18px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:880;color:#3f4556;margin-bottom:14px}.random-card-btn{width:100%;height:42px;padding:0 50px 0 14px;border-radius:12px;background:linear-gradient(135deg,#7569e7 0%,#6559dc 65%,#679bdd 135%);color:#fff;box-shadow:0 9px 20px rgba(103,89,220,.16);font-size:12px;line-height:1;font-weight:820;letter-spacing:-.08px;position:relative;display:flex;align-items:center;justify-content:center;gap:7px}.random-card-btn span{font-size:15px;line-height:1;margin:0}.random-card-btn small{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:8.5px;font-weight:800;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.16);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.16)}.random-card-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(103,89,220,.23)}.create-divider{display:flex;align-items:center;gap:8px;margin:11px 1px 10px;color:#a0a4b2;font-size:7.5px;font-weight:750;letter-spacing:.25px}.create-divider:before,.create-divider:after{content:"";height:1px;flex:1;background:#ececf3}.create-divider span{white-space:nowrap}.panel-title b{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:9px;background:#f0effb;color:#7167cc;font-size:9px}.forever{font-size:8px;color:#68a88f;display:flex;align-items:center;gap:7px;background:#f2fbf7;border:1px solid #e2f3eb;padding:6px 8px;border-radius:999px}.forever i{width:5px;height:5px;box-shadow:none}.alias-box{display:flex;align-items:center;height:43px;border:1px solid #e4e5ee;background:#fafbff;border-radius:12px;overflow:hidden;transition:.18s}.alias-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;padding:0 4px 0 12px;font-size:11px;color:#303447}.alias-box span{font-size:9px;color:#9a9fac;padding:0 10px;border-left:1px solid #eceef4}.soft-btn{height:38px;width:100%;margin-top:9px;border-radius:11px;background:#f1efff;color:#665bc7;border:1px solid #e5e1ff;font-size:11.5px;font-weight:800;box-shadow:0 4px 12px rgba(113,101,226,.05)}.soft-btn:hover{background:#ece9ff}.random-card-btn:active,.soft-btn:active,.small-btn:active,.copy-otp:active,.delete-mail:active{transform:translateY(1px)}.random-card-btn:focus-visible,.soft-btn:focus-visible,.small-btn:focus-visible,.copy-otp:focus-visible,.delete-mail:focus-visible,.main-btn:focus-visible{outline:3px solid rgba(115,103,233,.18);outline-offset:2px}.creator-tip{font-size:8.5px;color:#a1a6b4;text-align:center;margin-top:9px}.mailbox-card{padding:18px 13px 13px;min-height:435px}.mailbox-card>.panel-title{padding:0 5px}.search-box{height:38px;border:1px solid #e6e8ef;background:#fbfcff;border-radius:11px;display:flex;align-items:center;gap:7px;padding:0 10px;margin:0 4px 11px;transition:.18s}.search-box span{color:#a0a6b3;font-size:15px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:#33384a;font-size:10px}.mailbox-list{display:grid;gap:5px;max-height:395px;overflow:auto;padding:1px 3px 3px}.mailbox-item{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:11px 10px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:.16s}.mailbox-item:hover{background:#fafaff}.mailbox-item.active{background:linear-gradient(135deg,#f1efff,#f3f8ff);border-color:#e6e1ff}.mailbox-item strong{font-size:9.5px;display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4b5063}.mailbox-item small{display:block;font-size:8px;color:#a2a7b3;margin-top:4px}.unread{min-width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:#7468e6;color:#fff;font-size:8px;font-weight:900}.empty-small{font-size:10px;color:#a0a5b2;text-align:center;padding:25px 8px}.privacy-note{display:flex;gap:11px;align-items:flex-start;padding:4px 8px;color:#778093}.privacy-note>span{width:30px;height:30px;border-radius:10px;background:#edf9f5;color:#53a889;display:grid;place-items:center}.privacy-note strong,.privacy-note small{display:block}.privacy-note strong{font-size:9px;color:#667083}.privacy-note small{font-size:8px;line-height:1.45;margin-top:3px}
.inbox-panel{min-height:680px}.inbox-head{padding:21px 22px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.inbox-title-wrap{min-width:0}.inbox-head h2{font-size:17px;letter-spacing:-.4px;margin:5px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.address-sub{display:flex;align-items:center;gap:14px;color:#9aa0ad;font-size:8.5px}.address-sub span{display:flex;align-items:center;gap:7px}.address-sub i{width:5px;height:5px;box-shadow:none}.inbox-actions{display:flex;gap:7px;flex-wrap:wrap}.small-btn{height:34px;border:1px solid #e2e4ec;background:#fff;border-radius:10px;padding:0 13px;font-size:10.5px;font-weight:780;color:#667084;cursor:pointer;transition:.16s ease}.small-btn:hover{background:#fafaff}.danger-soft{color:#bd6475;background:#fff9fa;border-color:#f0dfe3}.message-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px 13px;border-bottom:1px solid #eceef4}.message-tools .search-box{margin:0;width:min(360px,60%)}.privacy-chip{font-size:8.5px;color:#6e7390;border:1px solid #ebe9fb;background:#faf9ff;border-radius:999px;padding:7px 10px}.mail-layout{display:grid;grid-template-columns:37% 63%;min-height:565px}.message-list{border-right:1px solid #eceef4;overflow:auto;max-height:620px}.message-row{padding:15px 15px 15px 19px;border-bottom:1px solid #f0f1f5;cursor:pointer;position:relative;transition:.14s}.message-row:hover,.message-row.active{background:#fafaff}.message-row.active{box-shadow:inset 3px 0 #786ce9}.message-row.unread-row:before{content:"";position:absolute;left:8px;top:21px;width:5px;height:5px;border-radius:50%;background:#776ae9}.message-row .from{font-size:10px;font-weight:850;color:#3d475b;display:flex;justify-content:space-between;gap:10px}.message-row time{font-size:8px;color:#a1a8b6;font-weight:550}.message-row .subject{font-size:10px;color:#747c8e;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-row .hidden-code{margin-top:7px;display:inline-flex;align-items:center;gap:5px;font-size:7.5px;color:#958eb8;background:#f2f0ff;border-radius:999px;padding:4px 7px}.message-view{padding:26px;overflow:auto;max-height:620px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(252,252,255,.94))}.reader-empty,.empty-state{min-height:370px;display:grid;place-items:center;align-content:center;text-align:center;color:#a0a7b5}.reader-empty>div,.empty-art{width:57px;height:57px;border-radius:18px;background:linear-gradient(145deg,#f1efff,#f0f9ff);color:#8177df;display:grid;place-items:center;font-size:23px;margin-bottom:13px;border:1px solid #ebe8ff}.reader-empty strong,.empty-state h3{font-size:12px;color:#5a6478;margin:0}.reader-empty span,.empty-state p{font-size:9px;margin-top:6px;max-width:280px;line-height:1.55}.mail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.mail-head h3{font-size:19px;line-height:1.3;margin:0 0 8px;letter-spacing:-.3px}.mail-meta{font-size:9px;color:#8c95a6;padding-bottom:17px;border-bottom:1px solid #eceef4}.otp-card{margin:20px 0 16px;padding:18px 19px;border:1px solid #e4e0ff;background:linear-gradient(135deg,#f6f4ff,#f3f9ff);border-radius:17px;display:flex;align-items:center;justify-content:space-between;gap:18px}.otp-info small{display:block;font-size:7.5px;font-weight:900;letter-spacing:1.15px;color:#9b93bc}.otp-code{margin-top:6px;font-size:29px;letter-spacing:5px;font-weight:950;color:#5549ba}.copy-otp{height:36px;padding:0 15px;border:0;border-radius:10px;background:#7165e2;color:#fff;font-size:10.5px;font-weight:820;cursor:pointer;box-shadow:0 8px 18px rgba(104,89,221,.17)}.mail-body{font-size:11.5px;line-height:1.75;color:#50596c;padding-top:15px;white-space:pre-wrap}.mail-frame{width:100%;border:1px solid #eef0f5;min-height:420px;margin-top:16px;border-radius:12px;background:#fff}.mail-actions{display:flex;gap:8px;margin-top:20px;padding-top:15px;border-top:1px solid #eff0f4}.delete-mail{border:1px solid #f0dce1;background:#fff8fa;color:#c05e72;border-radius:10px;padding:9px 13px;font-size:10px;font-weight:800;cursor:pointer}.mark-unread{border:1px solid #e2e4ed;background:#fff;color:#70788a;border-radius:10px;padding:9px 13px;font-size:10px;font-weight:800;cursor:pointer}.toast{position:fixed;right:25px;bottom:24px;padding:11px 14px;border-radius:12px;background:#292f3e;color:white;font-size:10px;box-shadow:0 12px 34px rgba(31,41,55,.18);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:none}
@media(max-width:1050px){.grid-main{grid-template-columns:285px minmax(0,1fr)}.welcome-actions .mini-stat{display:none}.mail-layout{grid-template-columns:42% 58%}}
@media(max-width:860px){.login-shell{grid-template-columns:1fr;gap:18px}.login-copy .brand{margin-bottom:36px}.login-copy{padding:10px}.login-copy h1{font-size:44px}.login-card{padding:26px}.grid-main{grid-template-columns:1fr}.mailbox-card{min-height:0}.mailbox-list{max-height:260px}.mail-layout{grid-template-columns:1fr}.message-list{border-right:0;border-bottom:1px solid #eceef4;max-height:315px}.message-view{max-height:none}.welcome-row{align-items:flex-start;flex-direction:column}.welcome-actions{width:100%;justify-content:space-between}.topbar{padding:0 16px}.status,.user-chip small{display:none}.app-shell{padding:30px 14px}.inbox-head{align-items:flex-start;flex-direction:column}.message-tools{align-items:stretch;flex-direction:column}.message-tools .search-box{width:100%;margin:0}.privacy-chip{align-self:flex-start}.login-page{padding:20px}}
@media(max-width:560px){.login-copy h1{font-size:38px;letter-spacing:-2.4px}.feature-row{gap:7px}.welcome-row h1{font-size:27px}.welcome-actions{align-items:stretch;flex-wrap:wrap}.welcome-actions .mini-stat{display:block;flex:1}.new-mail-btn{width:100%}.inbox-actions{width:100%}.inbox-actions .small-btn{flex:1}.mail-head{display:block}.otp-card{align-items:flex-start;flex-direction:column}.copy-otp{width:100%}}

/* V4.3 premium message reader */
.message-view{padding:0;background:linear-gradient(180deg,#f8f9ff 0%,#fbfcff 100%);}
.reader-shell{min-height:100%;padding:24px 26px 22px;}
.reader-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:0 0 20px;border-bottom:1px solid #e7e9f2;}
.sender-block{display:flex;align-items:flex-start;gap:14px;min-width:0;}
.sender-avatar{flex:0 0 46px;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#6f63e8,#8c82f2);color:#fff;font-size:17px;font-weight:900;box-shadow:0 10px 24px rgba(103,89,218,.22);}
.sender-copy{min-width:0}.reader-kicker{font-size:7.5px;font-weight:900;letter-spacing:1.3px;color:#8f86c9;margin-bottom:5px}.sender-copy h3{font-size:21px;line-height:1.28;letter-spacing:-.45px;color:#202438;margin:0 0 8px;word-break:break-word}.sender-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#626b7f;font-size:10.5px}.sender-line strong{color:#34394e;font-size:11px}.sender-line span{color:#9299aa}.message-route{margin-top:6px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#9aa1b1;font-size:8.5px}.message-route i{width:3px;height:3px;border-radius:50%;background:#c6cad5}.reader-tools{display:flex;gap:7px}.reader-tool{height:34px;padding:0 12px;border:1px solid #dfe2ec;background:#fff;border-radius:10px;color:#626b7e;font-size:9.5px;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(48,53,80,.04)}.reader-tool:hover{background:#fafaff;border-color:#cfcbea}.reader-tool:disabled{opacity:.45;cursor:not-allowed}
.premium-otp{margin:19px 0;padding:0;display:block;overflow:hidden;border:1px solid #dcd7ff;background:linear-gradient(135deg,#f7f5ff 0%,#f3f8ff 100%);box-shadow:0 12px 30px rgba(93,78,190,.08)}.otp-badge{padding:9px 16px;border-bottom:1px solid rgba(215,210,248,.8);font-size:7px;font-weight:950;letter-spacing:1.2px;color:#867bc2;background:rgba(255,255,255,.45)}.otp-content{padding:16px 17px;display:flex;align-items:center;justify-content:space-between;gap:18px}.premium-otp .otp-info small{font-size:7.5px}.premium-otp .otp-code{font-size:31px;letter-spacing:6px;margin-top:5px}.premium-otp .otp-info span{display:block;margin-top:5px;color:#9892b4;font-size:8px}.premium-otp .copy-otp{height:38px;padding:0 16px;border-radius:11px;background:linear-gradient(135deg,#7164e9,#5f53d9);box-shadow:0 9px 22px rgba(96,79,216,.22)}
.message-paper{margin-top:18px;background:#fff;border:1px solid #e5e7ef;border-radius:18px;box-shadow:0 14px 38px rgba(45,52,82,.07);overflow:hidden}.paper-head{height:42px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eceef4;color:#60697c;font-size:9px;font-weight:850;letter-spacing:.15px;background:linear-gradient(180deg,#fff,#fcfcff)}.paper-status{font-size:7.5px;color:#4b9b7b;background:#eefaf5;border:1px solid #d7f0e5;border-radius:999px;padding:5px 8px}.message-paper .mail-body{padding:22px 23px 26px;min-height:220px;font-size:13px;line-height:1.8;color:#343b4d;white-space:pre-wrap}.message-paper .mail-frame{display:block;width:100%;min-height:430px;margin:0;border:0;border-radius:0;background:#fff}.reader-shell .mail-actions{margin-top:18px;padding-top:0;border-top:0;display:flex;align-items:center;justify-content:space-between;gap:12px}.reader-shell .delete-mail{height:34px;padding:0 12px;background:#fff6f8;border-color:#efd9df;color:#bd5c70}.reader-security{font-size:8px;color:#9aa1b1}
@media(max-width:560px){.reader-shell{padding:18px 16px}.reader-top{flex-direction:column}.reader-tools{width:100%}.reader-tool{flex:1}.otp-content{align-items:flex-start;flex-direction:column}.premium-otp .copy-otp{width:100%}.reader-shell .mail-actions{align-items:flex-start;flex-direction:column}.sender-copy h3{font-size:19px}}

/* =========================================================
   MailPoint v4.7 — LIGHT SIGNATURE UI ONLY
   CSS-only visual layer. No HTML / JS / backend dependency.
   ========================================================= */
:root{
  --mp-bg:#f4f8ff;
  --mp-bg-2:#fbfdff;
  --mp-card:rgba(255,255,255,.86);
  --mp-card-solid:#ffffff;
  --mp-line:#e4eaf4;
  --mp-text:#1e2a3d;
  --mp-muted:#748199;
  --mp-indigo:#6d63ee;
  --mp-indigo-2:#8a83ff;
  --mp-blue:#7fc4ff;
  --mp-mint:#7fd9c0;
  --mp-peach:#ffd8c6;
  --mp-shadow:0 18px 60px rgba(64,78,120,.11);
  --mp-shadow-soft:0 12px 30px rgba(72,86,126,.07);
}
html,body{background:linear-gradient(180deg,#fbfdff 0%,#f4f8ff 52%,#f8fbff 100%)!important;color:var(--mp-text)!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
 radial-gradient(circle at 8% 12%,rgba(138,131,255,.18),transparent 29%),
 radial-gradient(circle at 90% 18%,rgba(127,196,255,.18),transparent 31%),
 radial-gradient(circle at 78% 88%,rgba(127,217,192,.13),transparent 28%)}
.aurora{filter:blur(28px)!important;opacity:.9!important}.aurora.one{background:radial-gradient(circle,rgba(138,131,255,.28),rgba(138,131,255,0) 70%)!important}.aurora.two{background:radial-gradient(circle,rgba(127,196,255,.26),rgba(127,196,255,0) 70%)!important}.aurora.three{background:radial-gradient(circle,rgba(127,217,192,.20),rgba(127,217,192,0) 70%)!important}
.logo,.mini-logo,.avatar{background:linear-gradient(145deg,#756bf0,#8eaef7)!important;box-shadow:0 12px 28px rgba(105,96,225,.22)!important}
.brand{color:#26334a!important}.invite-pill,.feature-row span,.status,.user-chip,.privacy-chip,.forever{background:rgba(255,255,255,.72)!important;border-color:#e2e8f4!important;box-shadow:0 8px 24px rgba(68,82,121,.05)!important;backdrop-filter:blur(14px)}

/* Member login / home */
.login-page{background:transparent!important;padding:36px!important}
.login-shell{width:min(1180px,100%)!important;grid-template-columns:1.04fr .82fr!important;gap:72px!important}
.login-copy{padding:28px 22px!important}
.login-copy .brand{margin-bottom:66px!important}
.login-copy h1{font-size:64px!important;line-height:1.01!important;letter-spacing:-4px!important;color:#1d2940!important}
.login-copy h1 em{background:linear-gradient(90deg,#665ce2 0%,#8478ef 48%,#69aee7 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.login-copy p{font-size:16px!important;line-height:1.8!important;color:#6f7d95!important}
.feature-row{gap:12px!important;margin-top:30px!important}.feature-row span{border-radius:14px!important;padding:10px 13px!important;color:#536179!important}
.login-card{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,252,255,.86))!important;border:1px solid rgba(226,232,244,.95)!important;border-radius:32px!important;padding:38px!important;box-shadow:0 30px 80px rgba(71,79,130,.14)!important;backdrop-filter:blur(24px)!important;position:relative;overflow:hidden}
.login-card:before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-90px;top:-80px;background:radial-gradient(circle,rgba(126,122,245,.14),transparent 68%);pointer-events:none}
.login-card-top{margin-bottom:32px!important}.login-card-top strong{font-size:21px!important;color:#243048!important}.login-card-top small{font-size:12px!important;color:#8a95a8!important}
.login-card label{font-size:11px!important;color:#5e6c83!important}.login-card input{height:54px!important;border-radius:16px!important;border-color:#dfe6f1!important;background:#f9fbff!important;padding:0 16px!important;color:#1f2b42!important}.login-card input:focus{border-color:#9a90f5!important;box-shadow:0 0 0 5px rgba(118,103,233,.09)!important}
.main-btn{height:58px!important;border-radius:17px!important;background:linear-gradient(135deg,#6558e4,#7768ec 50%,#6aaee8)!important;box-shadow:0 16px 34px rgba(103,88,226,.22)!important;font-size:15px!important;letter-spacing:-.1px!important}.main-btn:hover{transform:translateY(-1px)!important;filter:saturate(1.05) brightness(1.02)!important}
.secure-line{color:#8b95a8!important;border-top-color:#e9edf5!important}

/* Member dashboard shell */
.app-page{background:transparent!important}.topbar{background:rgba(255,255,255,.80)!important;border-bottom:1px solid rgba(228,234,244,.95)!important;backdrop-filter:blur(20px)!important;box-shadow:0 8px 28px rgba(56,70,108,.04)!important}
.status{color:#547565!important}.user-chip{border-radius:16px!important}.icon-button,.small-btn{border-radius:12px!important;border-color:#dfe6f1!important;background:linear-gradient(180deg,#fff,#f8faff)!important;color:#617087!important;box-shadow:0 8px 18px rgba(55,69,109,.04)!important}
.app-shell{max-width:1480px!important;padding-top:34px!important}.welcome-row{padding:0 6px 22px!important}.overline{color:#8379e9!important;letter-spacing:1.7px!important}.welcome-row h1{font-size:42px!important;letter-spacing:-1.7px!important;color:#213049!important}.welcome-row h1 span{background:linear-gradient(90deg,#6d62e7,#83a6ef)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.welcome-row p{font-size:13px!important;color:#7b879b!important;line-height:1.7!important}
.mini-stat{border-radius:18px!important;background:rgba(255,255,255,.82)!important;border:1px solid #e3e9f3!important;box-shadow:var(--mp-shadow-soft)!important}.mini-stat strong{color:#27344a!important}
.grid-main{gap:20px!important}.panel{background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(252,253,255,.84))!important;border:1px solid rgba(225,232,243,.96)!important;border-radius:24px!important;box-shadow:var(--mp-shadow-soft)!important;backdrop-filter:blur(16px)!important}.create-card{overflow:hidden!important;position:relative}.create-card:after{content:"";position:absolute;right:-70px;bottom:-80px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(129,181,255,.12),transparent 70%);pointer-events:none}
.panel-title{font-size:13px!important;color:#334159!important}.random-card-btn{min-height:58px!important;border-radius:16px!important;background:linear-gradient(135deg,#6b5fe9 0%,#786bf0 52%,#71aceb 100%)!important;box-shadow:0 14px 30px rgba(105,94,228,.20)!important}.random-card-btn small{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.24)!important}.alias-box,.search-box{border-radius:14px!important;border-color:#e1e7f1!important;background:#f9fbff!important}.soft-btn{border-radius:14px!important;background:linear-gradient(180deg,#f4f2ff,#efedff)!important;color:#675bd4!important;border:1px solid #e1ddff!important}.soft-btn:hover{background:#eae7ff!important}.creator-tip{color:#9aa4b5!important}
.mailbox-card{background:linear-gradient(180deg,#fff,#fbfcff)!important}.mailbox-item{border-radius:14px!important;transition:.16s!important}.mailbox-item:hover{background:#f6f8ff!important}.mailbox-item.active{background:linear-gradient(135deg,#f0edff,#edf5ff)!important;border-color:#ded9ff!important;box-shadow:inset 0 0 0 1px rgba(115,103,233,.04)!important}.privacy-note{border-radius:18px!important;background:linear-gradient(135deg,#f8fbff,#f3f9ff)!important;border-color:#e1ebf4!important}
.inbox-panel{overflow:hidden!important}.inbox-head{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,252,255,.84))!important;border-bottom-color:#edf1f7!important}.inbox-head h2{color:#26344c!important;letter-spacing:-.4px!important}.address-sub{color:#8894a7!important}.message-tools{background:#fbfcff!important;border-bottom-color:#edf1f7!important}.message-list{background:linear-gradient(180deg,#fbfcff,#f8faff)!important}.message-row{border-radius:13px!important;margin:5px 7px!important;border:1px solid transparent!important}.message-row:hover{background:#f3f6ff!important;border-color:#e9edfa!important}.message-row.active{background:linear-gradient(135deg,#efedff,#edf5ff)!important;border-color:#ddd9ff!important}.message-view{background:linear-gradient(180deg,#fff,#fbfdff)!important}.reader-shell{padding:26px!important}.reader-top{border-bottom-color:#eef1f6!important}.sender-avatar{background:linear-gradient(145deg,#6f64eb,#82a8f1)!important;box-shadow:0 10px 22px rgba(105,94,228,.18)!important}.reader-tool,.copy-otp,.delete-mail{border-radius:12px!important}.premium-otp{border-radius:20px!important;background:linear-gradient(135deg,#f3f0ff,#eef7ff)!important;border-color:#ddd9ff!important;box-shadow:0 12px 30px rgba(87,75,174,.08)!important}.message-paper{border-radius:20px!important;border-color:#e7ecf4!important;background:#fff!important;box-shadow:0 14px 34px rgba(45,57,88,.06)!important}.toast{border-radius:14px!important;box-shadow:0 18px 42px rgba(30,41,59,.18)!important}

@media(max-width:900px){.login-shell{gap:28px!important}.login-copy h1{font-size:48px!important}.login-card{padding:28px!important}.welcome-row h1{font-size:34px!important}}
@media(max-width:650px){.login-page{padding:18px!important}.login-copy h1{font-size:40px!important;letter-spacing:-2.3px!important}.login-card{border-radius:24px!important}.panel{border-radius:20px!important}}

/* =========================================================
   MailPoint v4.8 — MOBILE LAYOUT FIX ONLY
   Mobile-only overrides. Desktop styles above remain unchanged.
   ========================================================= */
@media (max-width: 860px){
  /* Login / member home: force a true single-column phone layout */
  .login-page{
    display:block!important;
    min-height:100svh!important;
    padding:22px 16px 34px!important;
  }
  .login-shell{
    width:100%!important;
    max-width:560px!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:22px!important;
    align-items:stretch!important;
  }
  .login-copy{
    width:100%!important;
    min-width:0!important;
    padding:6px 4px 0!important;
  }
  .login-copy .brand{
    margin-bottom:30px!important;
  }
  .login-copy h1{
    max-width:100%!important;
    font-size:46px!important;
    line-height:1.02!important;
    letter-spacing:-2.7px!important;
    margin:18px 0 14px!important;
    overflow-wrap:anywhere!important;
  }
  .login-copy p{
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.7!important;
  }
  .feature-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-top:22px!important;
  }
  .feature-row span{
    min-width:0!important;
    padding:10px 11px!important;
    text-align:center!important;
    white-space:normal!important;
  }
  .login-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:26px!important;
    border-radius:26px!important;
  }
  .login-card-top{
    margin-bottom:24px!important;
  }
  .login-card input{
    width:100%!important;
    min-width:0!important;
  }
  .main-btn{
    width:100%!important;
    min-width:0!important;
  }

  /* Member panel: keep every section inside the phone viewport */
  .topbar{
    height:64px!important;
    padding:0 12px!important;
    gap:8px!important;
  }
  .topbar .brand{
    min-width:0!important;
    font-size:16px!important;
  }
  .top-actions{
    min-width:0!important;
    gap:7px!important;
  }
  .status{
    display:none!important;
  }
  .user-chip{
    min-width:0!important;
    padding:4px!important;
  }
  .user-chip div{
    display:none!important;
  }
  .icon-button{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
  }
  .app-shell{
    width:100%!important;
    max-width:100%!important;
    padding:22px 12px 40px!important;
    overflow:hidden!important;
  }
  .welcome-row{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:16px!important;
    padding:0 2px 16px!important;
    margin-bottom:12px!important;
  }
  .welcome-row h1{
    font-size:31px!important;
    line-height:1.07!important;
    letter-spacing:-1.3px!important;
  }
  .welcome-row p{
    max-width:100%!important;
    font-size:12px!important;
  }
  .welcome-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .welcome-actions .mini-stat{
    display:block!important;
    min-width:0!important;
    width:100%!important;
  }
  .new-mail-btn{
    grid-column:1/-1!important;
    width:100%!important;
  }
  .grid-main{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  .side-column,
  .panel,
  .create-card,
  .mailbox-card,
  .inbox-panel{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .panel{
    border-radius:20px!important;
  }
  .mailbox-card{
    min-height:0!important;
  }
  .mailbox-list{
    max-height:250px!important;
  }
  .inbox-head{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .inbox-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .inbox-actions .small-btn{
    width:100%!important;
  }
  .message-tools{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .mail-layout{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .message-list,
  .message-view{
    width:100%!important;
    min-width:0!important;
  }
  .message-list{
    max-height:300px!important;
  }
  .reader-shell{
    width:100%!important;
    min-width:0!important;
    padding:18px 14px!important;
  }
  .message-paper,
  .message-paper .mail-frame{
    width:100%!important;
    max-width:100%!important;
  }
}

@media (max-width: 560px){
  .login-page{
    padding:16px 14px 28px!important;
  }
  .login-copy .brand{
    margin-bottom:24px!important;
  }
  .brand{
    font-size:17px!important;
  }
  .login-copy h1{
    font-size:38px!important;
    line-height:1.03!important;
    letter-spacing:-2.2px!important;
    margin-top:16px!important;
  }
  .login-copy p{
    font-size:14px!important;
    line-height:1.65!important;
  }
  .invite-pill{
    max-width:100%!important;
  }
  .feature-row{
    grid-template-columns:1fr!important;
  }
  .login-card{
    padding:22px 18px!important;
    border-radius:22px!important;
  }
  .login-card-top{
    margin-bottom:20px!important;
  }
  .login-card-top strong{
    font-size:19px!important;
  }
  .login-card input{
    height:50px!important;
  }
  .main-btn{
    height:52px!important;
    border-radius:15px!important;
    font-size:14px!important;
  }
  .app-shell{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .welcome-row h1{
    font-size:28px!important;
  }
  .welcome-actions{
    grid-template-columns:1fr 1fr!important;
  }
  .create-card,
  .mailbox-card{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .random-card-btn{
    min-height:52px!important;
    padding-left:12px!important;
    padding-right:44px!important;
  }
  .alias-box span{
    padding-left:7px!important;
    padding-right:7px!important;
    font-size:8px!important;
  }
  .reader-top{
    flex-direction:column!important;
  }
  .reader-tools{
    width:100%!important;
  }
  .reader-tool{
    flex:1!important;
  }
}

/* v5.3 phone-login visibility fix ONLY: let .hidden win on mobile after successful login */
@media (max-width: 860px){.login-page.hidden{display:none!important}}

/* ==========================================================
   MailPoint V5.8 — MEMBER INBOX LAYOUT ONLY
   Keep every existing HTML / JS / API / admin behavior intact.
   ========================================================== */

/* The large welcome heading is purely decorative; removing its
   footprint brings the mail viewer into the initial viewport. */
.app-page .welcome-row { display: none !important; }
.app-page .app-shell {
  padding-top: 12px !important;
  padding-bottom: 14px !important;
}

/* Desktop: the mailboxes, message list and opened email each scroll
   inside their own column. The *page* no longer has to scroll first. */
@media (min-width: 861px) {
  .app-page .grid-main {
    height: calc(100vh - 100px) !important;
    height: calc(100dvh - 100px) !important;
    min-height: 470px !important;
    align-items: stretch !important;
  }
  .app-page .side-column {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 12px !important;
  }
  .app-page .create-card { flex: 0 0 auto !important; }
  .app-page .mailbox-card {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .app-page .mailbox-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    align-content: start !important;
  }
  .app-page .privacy-note { display: none !important; }
  .app-page .inbox-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .app-page .inbox-head,
  .app-page .message-tools { flex: 0 0 auto !important; }
  .app-page .mail-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }
  .app-page .message-list,
  .app-page .message-view {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* Mobile and small tablets: mailbox switcher first, inbox second.
   The create-address form remains available just underneath the inbox.
   Horizontal scrolling stays inside the mailbox strip, never the page. */
@media (max-width: 860px) {
  .app-page .app-shell {
    padding: 10px 12px 28px !important;
    overflow: visible !important;
  }
  .app-page .grid-main {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .app-page .side-column { display: contents !important; }
  .app-page .mailbox-card {
    order: 0 !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: 12px !important;
  }
  .app-page .mailbox-card > .panel-title { margin-bottom: 7px !important; }
  .app-page .mailbox-card .search-box { height: 34px !important; margin: 0 0 8px !important; }
  .app-page .mailbox-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 5px !important;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .app-page .mailbox-item {
    flex: 0 0 200px !important;
    min-width: 0 !important;
    max-width: 200px !important;
    min-height: 52px !important;
    padding: 9px !important;
  }
  .app-page .mailbox-item strong { max-width: 172px !important; }
  .app-page .mailbox-list > .empty-small { flex: 1 0 100% !important; }
  .app-page .inbox-panel {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .app-page .inbox-head {
    padding: 13px 14px 11px !important;
    gap: 10px !important;
  }
  .app-page .inbox-head h2 {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
    font-size: 15px !important;
  }
  .app-page .inbox-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .app-page .inbox-actions .small-btn { padding: 0 6px !important; min-width: 0 !important; }
  .app-page .message-tools {
    padding: 4px 12px 9px !important;
    gap: 0 !important;
  }
  .app-page .privacy-chip { display: none !important; }
  .app-page .mail-layout {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .app-page .message-list {
    width: 100% !important;
    min-height: 0 !important;
    max-height: 130px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #eceef4 !important;
    overflow-y: auto !important;
  }
  .app-page .message-row { padding: 10px 12px !important; }
  .app-page .message-view {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 240px !important;
    max-height: 65vh !important;
    max-height: 65svh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .app-page .reader-shell { padding: 15px 14px !important; }
  .app-page .create-card { order: 2 !important; }
  .app-page .privacy-note { display: none !important; }
}

@media (max-width: 420px) {
  .app-page .app-shell { padding-left: 9px !important; padding-right: 9px !important; }
  .app-page .mailbox-item { flex-basis: 180px !important; max-width: 180px !important; }
  .app-page .mailbox-item strong { max-width: 156px !important; }
  .app-page .inbox-head { padding: 12px !important; }
  .app-page .inbox-actions .small-btn { font-size: 10px !important; }
}

/* =============================================================
   MailPoint V5.9 — MEMBER UI VISUAL POLISH ONLY
   No HTML / JS / API changes. V5.8 responsive geometry preserved.
   ============================================================= */

/* Delicate light surfaces, sharper contrast and elegant depth. */
.app-page .topbar {
  border-bottom-color: #e9e9fa !important;
  box-shadow: 0 5px 22px rgba(63, 62, 124, .055) !important;
}
.app-page .logo {
  background: linear-gradient(140deg, #7363e9 5%, #858eff 60%, #8fbcf5 100%) !important;
  box-shadow: 0 7px 18px rgba(101, 92, 209, .23) !important;
}
.app-page .status {
  background: #f5fcf9 !important;
  border-color: #ddf1e8 !important;
  color: #4a8973 !important;
}
.app-page .user-chip {
  border-color: #e5e4f5 !important;
  box-shadow: 0 5px 14px rgba(81, 83, 144, .045) !important;
}
.app-page .avatar { background: linear-gradient(135deg, #e9e6ff, #e5f2ff) !important; }
.app-page .panel {
  border: 1px solid #e4e6f3 !important;
  background: linear-gradient(160deg, #fff 0%, #fcfdff 100%) !important;
  box-shadow: 0 8px 26px rgba(67, 69, 133, .065), 0 1px 3px rgba(67, 69, 133, .025) !important;
}
.app-page .panel-title { color: #273551 !important; letter-spacing: -.15px; }
.app-page .panel-title b {
  background: #eeeaff !important;
  color: #6554cf !important;
  border: 1px solid #e6e1ff;
}

/* Creation controls: cleaner field, richer buttons, clear selection. */
.app-page .random-card-btn {
  color: #fff !important;
  background: linear-gradient(115deg, #6b58e2 0%, #7567eb 55%, #639fea 100%) !important;
  border: 1px solid rgba(103, 92, 218, .12) !important;
  box-shadow: 0 10px 24px rgba(105, 94, 219, .19), inset 0 1px 0 rgba(255,255,255,.25) !important;
  text-shadow: 0 1px 1px rgba(59, 47, 132, .12);
}
.app-page .random-card-btn:hover {
  filter: brightness(1.035) saturate(1.05);
  box-shadow: 0 14px 28px rgba(105, 94, 219, .25), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.app-page .random-card-btn small {
  background: rgba(255,255,255,.20) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}
.app-page .alias-box {
  background: #fff !important;
  border: 1px solid #dedff0 !important;
  box-shadow: inset 0 1px 2px rgba(66, 68, 115, .03) !important;
}
.app-page .alias-box:focus-within,
.app-page .search-box:focus-within {
  border-color: #9b8af3 !important;
  box-shadow: 0 0 0 3px rgba(116, 99, 229, .10) !important;
}
.app-page .alias-box input { color: #273551 !important; }
.app-page .alias-box input::placeholder,
.app-page .search-box input::placeholder { color: #929bb1; opacity: 1; }
.app-page #mailboxDomainSelect {
  border-color: #dcd6fa !important;
  background: linear-gradient(145deg, #f3efff, #eef4ff) !important;
  color: #5344b0 !important;
  box-shadow: 0 2px 9px rgba(94, 84, 185, .07) !important;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.app-page #mailboxDomainSelect:hover { border-color: #b9aff4 !important; }
.app-page #mailboxDomainSelect:focus-visible {
  outline: 2px solid #9b8af3 !important;
  outline-offset: 2px !important;
}
.app-page .soft-btn {
  background: linear-gradient(145deg, #f4f1ff, #eeedff) !important;
  border: 1px solid #ded9fc !important;
  color: #5949bc !important;
  box-shadow: 0 4px 12px rgba(101, 88, 206, .06) !important;
}
.app-page .soft-btn:hover {
  background: linear-gradient(145deg, #ebe6ff, #e9edff) !important;
  border-color: #c9c0f9 !important;
}

/* Mailbox selector: distinguish the selected inbox without adding bulk. */
.app-page .mailbox-card { border-color: #e4e6f3 !important; }
.app-page .search-box {
  background: #f9faff !important;
  border: 1px solid #e2e6f0 !important;
}
.app-page .search-box input { color: #283653 !important; }
.app-page .mailbox-item {
  border: 1px solid transparent !important;
  border-radius: 13px !important;
}
.app-page .mailbox-item strong { color: #35435e !important; font-weight: 780; }
.app-page .mailbox-item small { color: #8590a6 !important; }
.app-page .mailbox-item:hover {
  background: #f5f6ff !important;
  border-color: #e7e6f8 !important;
}
.app-page .mailbox-item.active {
  border-color: #cfc9ff !important;
  background: linear-gradient(100deg, #efebff 0%, #f0f5ff 100%) !important;
  box-shadow: inset 3px 0 0 #7767e9, 0 3px 10px rgba(102, 91, 206, .07) !important;
}
.app-page .mailbox-item.active strong { color: #42368d !important; }
.app-page .unread {
  background: linear-gradient(135deg, #6954de, #7b8eef) !important;
  box-shadow: 0 3px 10px rgba(112, 96, 215, .16) !important;
}

/* Inbox action buttons and mail preview rows. */
.app-page .inbox-head { border-bottom: 1px solid #eef0f7 !important; }
.app-page .inbox-head h2 { color: #253652 !important; }
.app-page .small-btn,
.app-page .icon-button,
.app-page .reader-tool,
.app-page .mark-unread {
  background: linear-gradient(180deg, #fff, #f8faff) !important;
  color: #52627f !important;
  border: 1px solid #dfe5f2 !important;
  box-shadow: 0 3px 9px rgba(67, 72, 136, .045) !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.app-page .small-btn:hover,
.app-page .icon-button:hover,
.app-page .reader-tool:not(:disabled):hover,
.app-page .mark-unread:hover {
  color: #5646ba !important;
  background: #f1efff !important;
  border-color: #cfc9f8 !important;
  box-shadow: 0 4px 12px rgba(93, 83, 190, .10) !important;
}
.app-page .small-btn.danger-soft,
.app-page .delete-mail {
  border: 1px solid #f0dce6 !important;
  color: #bf536d !important;
  background: #fff8fb !important;
}
.app-page .small-btn.danger-soft:hover,
.app-page .delete-mail:hover {
  border-color: #e6bbc9 !important;
  background: #ffeff3 !important;
  color: #b93d5b !important;
}
.app-page .message-tools { border-bottom-color: #e9ebf5 !important; }
.app-page .message-list { background: #fafbff !important; }
.app-page .message-row {
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.app-page .message-row .from { color: #33435e !important; font-weight: 820; }
.app-page .message-row .subject { color: #748198 !important; }
.app-page .message-row time { color: #939fb4 !important; }
.app-page .message-row:hover {
  background: #f1f4ff !important;
  border-color: #e1e8fa !important;
}
.app-page .message-row.active {
  background: linear-gradient(110deg, #efebff 0%, #eef5ff 100%) !important;
  border: 1px solid #d8d0ff !important;
  box-shadow: inset 3px 0 #7461e6 !important;
}
.app-page .message-row.active .from { color: #453b95 !important; }
.app-page .message-row .hidden-code {
  background: #ede9ff !important;
  color: #6455a7 !important;
}

/* Opened email: readable subject, calm paper treatment, clear OTP. */
.app-page .message-view { background: #fff !important; }
.app-page .reader-kicker { color: #7567c8 !important; }
.app-page .sender-copy h3 { color: #23334d !important; }
.app-page .sender-avatar {
  background: linear-gradient(145deg, #6e5ce3, #7e9cf3) !important;
  box-shadow: 0 8px 19px rgba(103, 91, 211, .16) !important;
}
.app-page .sender-line { color: #596780 !important; }
.app-page .reader-top { border-bottom-color: #e9edf6 !important; }
.app-page .premium-otp {
  border: 1px solid #d9d3ff !important;
  background: linear-gradient(112deg, #f4f0ff 0%, #edf5ff 100%) !important;
  box-shadow: 0 8px 20px rgba(88, 77, 180, .09) !important;
}
.app-page .premium-otp .otp-badge {
  color: #7367b3 !important;
  background: rgba(255,255,255,.56) !important;
  border-bottom-color: #e0dcfb !important;
}
.app-page .otp-code {
  color: #5140b3 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.app-page .copy-otp {
  background: linear-gradient(120deg, #6953df, #735fe9) !important;
  color: white !important;
  border: 1px solid rgba(92, 75, 199, .12) !important;
  box-shadow: 0 8px 19px rgba(103, 84, 220, .20) !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.app-page .copy-otp:hover {
  filter: brightness(1.055);
  box-shadow: 0 10px 23px rgba(103, 84, 220, .24) !important;
}
.app-page .message-paper {
  border: 1px solid #e5e9f4 !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgba(46, 57, 97, .05) !important;
}
.app-page .paper-head {
  background: #fafbff !important;
  color: #53627c !important;
  border-bottom-color: #e9ecf5 !important;
}
.app-page .paper-status {
  background: #edfbf5 !important;
  border-color: #d2efdf !important;
  color: #36826b !important;
}
.app-page .mail-body { color: #37445e !important; }
.app-page .toast { background: #25314b !important; }

/* Keyboard accessibility without altering button actions. */
.app-page :is(button,.mailbox-item,.message-row):focus-visible {
  outline: 2px solid #8875f2 !important;
  outline-offset: 2px !important;
}
.app-page button:disabled { opacity: .52; cursor: not-allowed !important; }

/* Fit the same polished controls within V5.8's existing phone layout. */
@media (max-width: 860px) {
  .app-page .mailbox-item.active {
    box-shadow: inset 0 -3px #7461e6, 0 3px 10px rgba(102,91,206,.07) !important;
  }
  .app-page .message-row { margin: 4px 6px !important; }
  .app-page .otp-code { overflow-wrap: anywhere; letter-spacing: .10em; }
  .app-page .copy-otp { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .app-page :is(button,.mailbox-item,.message-row) { transition: none !important; }
}