:root{--blue:#083a6f;--blue2:#0a4a88;--orange:#ff6500;--bg:#f4f7fb;--line:#e6ebf2;--text:#1b2735;--muted:#738096;--white:#fff;--shadow:0 20px 50px rgba(16,35,60,.12)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}button,input{font:inherit}.login-page{min-height:100vh;background:#eef3f8}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.brand-panel{background:linear-gradient(145deg,#062e59,#0a4b88);color:#fff;padding:54px 64px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.brand-panel:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,101,0,.12);right:-150px;bottom:-120px}.brand-logo{width:155px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}.brand-copy{max-width:560px;position:relative;z-index:1}.eyebrow{font-size:12px;letter-spacing:.18em;color:#ff9a52;font-weight:800}.brand-copy h1{font-size:48px;line-height:1.05;margin:16px 0 18px}.brand-copy p{font-size:18px;line-height:1.6;color:#dce7f3}.brand-footer{font-size:13px;color:#bfd0e2}.login-panel{display:flex;align-items:center;justify-content:center;padding:40px}.login-card{width:min(440px,100%);background:#fff;padding:42px;border-radius:22px;box-shadow:var(--shadow)}.mobile-brand{display:none}.badge{display:inline-block;background:#fff3eb;color:#d94f00;font-weight:800;font-size:12px;letter-spacing:.14em;padding:8px 10px;border-radius:999px}.login-card h2{font-size:30px;margin:18px 0 6px}.muted{color:var(--muted);margin:0 0 28px}.login-card label{display:block;margin:18px 0 8px;font-weight:700;font-size:14px}.login-card input{width:100%;height:52px;border:1px solid #d8e0ea;border-radius:12px;padding:0 14px;outline:none;background:#fbfcfe}.login-card input:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(10,74,136,.08)}.password-wrap{position:relative}.password-wrap input{padding-right:50px}.icon-btn{position:absolute;right:7px;top:7px;width:38px;height:38px;border:0;background:transparent;color:var(--muted);cursor:pointer}.primary-btn{width:100%;border:0;border-radius:12px;background:var(--orange);color:#fff;font-weight:800;padding:15px 18px;margin-top:24px;cursor:pointer;box-shadow:0 8px 20px rgba(255,101,0,.2)}.login-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}.login-note span{color:var(--muted);font-size:13px}.alert{background:#fff0f0;color:#9c2424;padding:12px 14px;border-radius:10px;font-size:14px}
.app-page{height:100vh;overflow:hidden}.app-shell{height:100vh;display:flex}.sidebar{width:265px;background:#062f5b;color:#fff;padding:20px 16px;display:flex;flex-direction:column}.app-brand{display:flex;align-items:center;gap:12px;padding:4px 4px 18px}.app-brand img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:12px;padding:4px}.app-brand div{display:flex;flex-direction:column}.app-brand strong{font-size:18px}.app-brand span{font-size:11px;color:#afc6dc;margin-top:2px}.compose-btn{border:0;border-radius:12px;background:var(--orange);color:#fff;font-weight:800;padding:13px;margin:8px 0 14px;cursor:pointer}.nav-menu{display:flex;flex-direction:column;gap:4px}.nav-menu a{color:#d7e3ef;text-decoration:none;padding:11px 12px;border-radius:10px;display:flex;align-items:center;gap:12px;font-size:14px}.nav-menu a span{width:20px;text-align:center}.nav-menu a b{margin-left:auto;background:#174d80;padding:2px 7px;border-radius:999px;font-size:11px}.nav-menu a.active,.nav-menu a:hover{background:#0c477f;color:#fff}.nav-menu a.active{box-shadow:inset 3px 0 0 var(--orange)}.nav-separator{height:1px;background:#174a79;margin:16px 6px}.secondary a{color:#bcd0e3}.user-card{margin-top:auto;border-top:1px solid #174a79;padding-top:16px;display:flex;align-items:center;gap:9px}.avatar{width:34px;height:34px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-weight:800}.user-card div:nth-child(2){min-width:0;display:flex;flex-direction:column}.user-card strong{font-size:12px}.user-card span{font-size:10px;color:#aac1d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px}.user-card a{margin-left:auto;color:#fff;text-decoration:none}.mail-area{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.search-box{width:min(560px,55vw);height:42px;background:#f4f6f9;border-radius:11px;display:flex;align-items:center;gap:10px;padding:0 13px;color:var(--muted)}.search-box input{border:0;outline:0;background:transparent;width:100%}.top-actions{display:flex;gap:8px}.top-actions button,.list-head button,.reader-toolbar button{border:1px solid var(--line);background:#fff;border-radius:9px;width:38px;height:38px;color:#536174;cursor:pointer}.mail-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(370px,42%) 1fr}.message-list{background:#fff;border-right:1px solid var(--line);overflow:auto}.list-head{padding:22px 22px 14px;display:flex;justify-content:space-between;align-items:center}.list-head h1{font-size:23px;margin:0}.list-head span{color:var(--muted);font-size:12px}.filters{display:flex;gap:8px;padding:0 22px 16px}.filters button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font-size:12px;color:#657287}.filters button.selected{background:#eaf2fa;color:#0b4a84;border-color:#d5e4f2}.message{display:flex;gap:12px;padding:17px 20px;border-top:1px solid #eef2f6;cursor:pointer}.message:hover,.selected-msg{background:#f8fbfe}.selected-msg{border-left:3px solid var(--orange)}.message.unread h3,.message.unread strong{font-weight:800}.msg-avatar{width:38px;height:38px;border-radius:10px;background:#e7eff7;color:#0a4b88;display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 auto}.msg-avatar.large{width:44px;height:44px;border-radius:50%}.msg-main{min-width:0;flex:1}.msg-row{display:flex;justify-content:space-between;gap:8px}.msg-row time{font-size:11px;color:#8692a3}.msg-main h3{font-size:14px;margin:5px 0 4px}.msg-main p{font-size:12px;color:#7b8798;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.chips{margin-top:8px}.chips span,.reader-label{display:inline-block;font-size:10px;font-weight:800;background:#eef5fb;color:#0a4b88;border-radius:999px;padding:5px 8px}.reader-pane{background:#fff;overflow:auto}.reader-toolbar{height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px}.reader-toolbar>div{display:flex;gap:8px}.reader-content{padding:28px 34px}.reader-content h2{font-size:27px;margin:12px 0 24px}.sender{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:20px}.sender>div:nth-child(2){display:flex;flex-direction:column}.sender span{font-size:12px;color:var(--muted);margin-top:3px}.sender time{margin-left:auto;color:var(--muted);font-size:12px}.email-body{padding:26px 0;font-size:15px;line-height:1.7;color:#3d4856}.quick-actions{display:flex;gap:9px;flex-wrap:wrap}.primary-btn.small{width:auto;margin:0;padding:11px 15px}.ghost-btn{border:1px solid var(--line);background:#fff;color:#3f4a58;border-radius:10px;padding:10px 13px;font-weight:700;cursor:pointer}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.brand-panel{display:none}.mobile-brand{display:block;margin-bottom:20px}.mobile-brand img{width:100px}.sidebar{width:82px}.app-brand div,.nav-menu a:not(.active) b,.user-card div:nth-child(2){display:none}.app-brand{justify-content:center}.app-brand img{width:46px}.compose-btn{font-size:0}.compose-btn:after{content:'＋';font-size:22px}.nav-menu a{justify-content:center}.nav-menu a span{font-size:18px}.mail-grid{grid-template-columns:1fr}.reader-pane{display:none}}