:root { --line:#dedede; --blue1:#247ba7; --blue2:#075579; --text:#333; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; font-family:"Segoe UI", Arial, "Malgun Gothic", sans-serif; color:var(--text); font-size:14px; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.app-body { overflow:hidden; min-width:960px; }
.topbar { height:48px; display:flex; align-items:center; color:#fff; background:linear-gradient(#287ca8 0%, #12658d 44%, #075274 100%); box-shadow:inset 0 -1px rgba(0,0,0,.28); }
.brand { width:252px; padding-left:7px; color:#fff; font-weight:700; font-size:23px; letter-spacing:-1px; text-decoration:none; text-shadow:0 1px 1px #174764; }
.main-nav { display:flex; align-self:stretch; align-items:center; gap:30px; white-space:nowrap; }
.main-nav a { color:#fff; font-weight:700; text-decoration:none; text-shadow:0 1px 1px #1b4b65; }
.main-nav a:hover, .main-nav a.active { color:#effaff; }
.account { margin-left:auto; height:100%; display:flex; align-items:center; gap:28px; font-weight:600; padding-right:12px; white-space:nowrap; }
.logout { background:linear-gradient(#fff,#e6edf2); border:1px solid #b5c1c9; color:#333; height:31px; padding:0 0 0 12px; box-shadow:0 1px 2px #13445e; }
.logout b { display:inline-block; height:29px; padding:7px 8px; margin-left:8px; border-left:1px solid #c8d0d5; font-size:9px; }
.mail-layout { display:flex; height:calc(100vh - 48px); }
.sidebar { width:252px; flex:0 0 252px; position:relative; border-right:1px solid #ddd; background:#fff; }
.side-title { height:43px; display:flex; align-items:center; padding:0 4px; border-bottom:1px solid #e2e2e2; font-size:16px; }
.mail-icon { font-size:20px; margin-right:7px; color:#efc34e; text-shadow:0 1px #886; }.fold { margin-left:auto; border:0; background:transparent; color:#333; font-size:12px; }
.compose { width:calc(100% - 2px); height:33px; border:1px solid #ddd; background:linear-gradient(#fff,#f5f5f5); font-size:13px; }.compose span { float:right; padding-right:6px; }
.quota { margin:10px 15px 31px 0; text-align:right; font-size:12px; }.folders { font-size:14px; }.folder { display:block; width:100%; min-height:34px; text-align:left; padding:5px 10px 5px 20px; border:0; background:#fff; color:#444; }.folder:hover,.folder.active { background:#eaf4f9; }.folder i { display:inline-block; width:18px; color:#777; font-style:normal; }.folder.group { padding-left:0; font-weight:600; }.folder.group i { width:20px; }.folder-children { margin-left:26px; padding:5px 0; border-left:1px dotted #9ba8ae; }.folder-children .folder { min-height:33px; padding-left:14px; }.folder .flag { color:#d04f3a; }.shortcut-bar { position:absolute; bottom:0; width:100%; height:42px; padding:7px 3px; border-top:1px solid #e4e4e4; background:#fafafa; display:flex; gap:8px; }.shortcut-bar button { width:25px; padding:0; border:0; background:transparent; color:#467493; font-size:19px; }
.mail-area { min-width:0; display:flex; flex:1; flex-direction:column; }.toolbar { height:42px; display:flex; align-items:center; padding:0 10px; gap:3px; border-bottom:1px solid #ddd; background:#fafafa; }.toolbar > button { height:31px; border:0; padding:0 8px; background:transparent; white-space:nowrap; }.toolbar > button:hover { background:#e6f2f7; }.toolbar .danger { color:#3b3b3b; }.toolbar .danger:first-letter { color:#e34a36; }.toolbar b { font-size:9px; margin-left:4px; }.toolbar-divider { height:27px; border-left:1px solid #ddd; margin:0 7px; }.icon-only { color:#537b99; font-size:17px; padding:0 3px !important; }.search { display:flex; gap:5px; margin-left:11px; height:32px; }.search select,.search input,.search button { border:1px solid #dfe2e4; background:#fff; height:32px; }.search select { width:100px; padding:0 10px; }.search input { width:170px; padding:0 11px; }.search button { padding:0 20px; }.search button:hover { background:#eff7fb; }
.list-header { height:44px; display:grid; grid-template-columns:31px 30px 18px 22px 215px minmax(180px,1fr) 160px 75px 35px; align-items:center; border-bottom:1px solid #e1e1e1; font-weight:600; color:#555; }.list-header span { padding-left:8px; }.list-header .tiny,.list-header .doc { padding-left:6px; text-align:center; }.list-header .check { padding-left:10px; }.mail-list { flex:1; overflow:auto; }.empty { margin:16px 15px; color:#555; }.mail-row { min-height:37px; display:grid; grid-template-columns:31px 30px 18px 22px 215px minmax(180px,1fr) 160px 75px 35px; align-items:center; border-bottom:1px solid #efefef; color:#444; }.mail-row:hover { background:#edf7fb; }.mail-row > span { min-width:0; padding:0 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.mail-row .row-icon { display:grid; place-items:center; padding:0; color:#356b87; }.row-icon svg { display:block; width:22px; height:18px; fill:#f8fcfe; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.mail-row .mail-subject { color:#175b7d; }.mail-row .mail-date { font-size:12px; }.mail-row .mail-size { text-align:right; color:#666; }.pager { height:43px; border-top:1px solid #dfdfdf; background:#fafafa; display:flex; align-items:center; gap:3px; padding:4px 11px; }.pager a,.pager select { height:32px; min-width:31px; border:1px solid #e1e1e8; background:#fff; }.pager a { display:grid; place-items:center; color:#333; text-decoration:none; }.pager a:hover { background:#eaf5fa; }.pager .current { color:#168bc9; border-color:#2ba7e2; }.pager a.disabled { pointer-events:none; cursor:default; color:#b7c0c4; background:#f5f6f6; }.pager span { margin-left:10px; }.pager .page-size { width:61px; padding-left:8px; }.pager strong { margin-left:auto; font-weight:600; }
.modal[hidden] { display:none; }.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgba(0,45,68,.32); }.modal-card { width:min(560px,90vw); background:#fff; box-shadow:0 12px 38px rgba(0,0,0,.32); }.modal-title { height:46px; padding:12px 16px; color:#fff; font-weight:700; background:linear-gradient(#277da8,#075779); }.modal-close { float:right; border:0; background:transparent; color:inherit; font-size:23px; line-height:18px; }.modal-card form { padding:20px; }.modal-card label { display:block; margin-bottom:14px; font-weight:600; }.modal-card input,.modal-card textarea { width:100%; margin-top:6px; padding:8px; border:1px solid #cfd7dc; }.modal-actions { display:flex; justify-content:flex-end; gap:6px; }.modal-actions button { padding:8px 16px; border:1px solid #c3d0d6; background:#f8fafb; }.modal-actions .send { color:#fff; border-color:#126486; background:#1678a5; }.toast { position:fixed; bottom:60px; left:50%; transform:translateX(-50%) translateY(20px); z-index:20; opacity:0; padding:11px 18px; color:#fff; border-radius:3px; background:#263d49; transition:.2s; pointer-events:none; }.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.login-body { min-width:320px; overflow:auto; background:#fff; }.login-card { width:500px; margin:200px auto; border:1px solid #e0e0e0; }.login-title { height:40px; display:grid; place-items:center; font-size:20px; background:#f9f9f9; }.login-form { width:310px; margin:10px auto 25px; }.login-form label { display:grid; grid-template-columns:90px 1fr; align-items:center; margin-top:7px; }.login-form input,.login-form select { height:31px; padding:4px 8px; border:1px solid #c8d1d5; }.login-form .remember { font-size:13px; }.login-form .remember input { width:auto; height:auto; margin:0 5px 0 0; }.login-button { display:block; margin:18px auto 0; padding:7px 18px; border:1px solid #137aa8; color:#fff; background:linear-gradient(#2b95c8,#1675a1); }
.login-error { margin:12px 0 -4px 90px; color:#d22b2b; font-size:13px; }
@media (max-width:800px) { .app-body { min-width:0; }.main-nav { gap:12px; }.main-nav a:nth-child(n+4) { display:none; }.brand { width:150px; }.sidebar { width:205px; flex-basis:205px; }.list-header { grid-template-columns:31px 28px 18px 20px 130px minmax(100px,1fr) 0 0 0; }.list-header .date,.list-header .size,.list-header span:last-child { overflow:hidden; padding:0; }.toolbar > button span { display:none; }.search { margin-left:auto; }.search select { display:none; }.search input { width:115px; }.login-card { width:calc(100% - 30px); margin:80px auto; } }