:root{--side:238px;--blue:#1a73e8;--bg:#f6f8fc;--line:#e4e9f0;--text:#172033}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:14px Arial,sans-serif;color:var(--text)}header{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:7px 16px;position:sticky;top:0;z-index:20}header img{width:178px;display:block}.icon{border:0;background:transparent;font-size:20px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:#334155}.icon:hover{background:#eef2f7}.search{flex:1;max-width:720px;margin:auto}.search input{width:100%;height:46px;border:0;background:#edf3fa;border-radius:24px;padding:0 20px;font-size:15px}.layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:calc(100vh - 64px)}aside{padding:14px 12px;overflow:hidden}.compose{height:56px;background:#c2e7ff;border-radius:18px;display:flex;align-items:center;gap:12px;padding:0 20px;text-decoration:none;color:#172033;font-weight:bold;margin-bottom:12px}nav{display:grid;gap:2px}nav a{height:40px;border-radius:20px;padding:0 16px;display:flex;align-items:center;gap:15px;text-decoration:none;color:#334155}nav a:hover{background:#e9eef6}main{padding:12px 16px 20px 0;min-width:0}.panel{background:#fff;border-radius:16px;min-height:calc(100vh - 90px);padding:18px}.pagehead,.meta,.msgtools,.replybar{display:flex;align-items:center;justify-content:space-between;gap:10px}.mail-list{margin-top:15px}.mailrow{display:flex;align-items:center;border-bottom:1px solid #edf0f4;min-height:48px}.mailrow:hover{box-shadow:0 1px 4px #0002}.mailrow>a{display:grid;grid-template-columns:minmax(180px,28%) 1fr auto;gap:14px;align-items:center;flex:1;color:inherit;text-decoration:none;padding:12px}.mailrow.unread{background:#f8fbff}.mailrow.unread b,.mailrow.unread span{font-weight:700}.mailrow small{color:#64748b}.star{border:0;background:transparent;font-size:20px;padding:8px}.body{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 Arial,sans-serif;border-top:1px solid #eee;margin-top:18px;padding-top:18px;min-height:240px}.msgtools{justify-content:flex-start;flex-wrap:wrap}.msgtools form{display:inline}.button,button{border:0;background:#1a73e8;color:#fff;padding:10px 16px;border-radius:20px;text-decoration:none;cursor:pointer}.secondary{background:#e8eef7;color:#172033}.danger{background:#b42318}.replybar{justify-content:flex-start;margin-top:24px}.composeform,.card form{display:grid;gap:10px}.composeform input,.composeform textarea,.card input,.card textarea,.card select{width:100%;padding:11px;border:1px solid #d7dde7;border-radius:9px;font:inherit}.card{border:1px solid #e5e7eb;border-radius:14px;padding:18px;margin:14px 0}.settingsgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.gridform{grid-template-columns:repeat(2,minmax(0,1fr))}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #eee;vertical-align:top}.inline{display:flex!important;flex-wrap:wrap!important;grid-template-columns:none!important}.inline input{width:120px}.flash{background:#e8f0fe;padding:11px 14px;border-radius:10px;margin-bottom:12px}.login{max-width:520px;margin:50px auto;padding:20px}.loginbox{background:#fff;border-radius:16px;padding:28px}.loginbox form{display:grid;gap:10px}.loginbox input{padding:12px;border:1px solid #ddd;border-radius:8px}
body.collapsed{--side:72px}body.collapsed aside span{display:none}body.collapsed .compose{width:50px;padding:0;justify-content:center}body.reader aside{display:none}body.reader .layout{grid-template-columns:1fr}body.reader main{padding-left:16px}
@media(max-width:760px){header{height:58px;padding:6px 8px}header img{width:140px}.search{display:none}.layout{display:block}aside{position:fixed;top:58px;left:0;bottom:0;width:245px;background:#fff;z-index:15;transform:translateX(-100%)}body.collapsed aside{transform:none}main{padding:8px}.panel{border-radius:12px;padding:12px}.mailrow>a{grid-template-columns:1fr auto}.mailrow>a b{grid-column:1}.mailrow>a span{grid-column:1}.mailrow>a small{grid-column:2;grid-row:1}.settingsgrid,.gridform{grid-template-columns:1fr}}