*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:14px Arial,sans-serif;color:#202124;background:#fff}.topbar{height:64px;display:flex;align-items:center;gap:24px;padding:8px 18px;border-bottom:1px solid #e5e7eb;background:#fff}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:600;min-width:220px;color:#3c4043}.brand-icon{font-size:25px}.search-wrap{position:relative;flex:1;max-width:720px}.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:21px;color:#5f6368}.search{width:100%;border:1px solid transparent;background:#f1f3f4;border-radius:24px;padding:13px 20px 13px 48px;font-size:15px;outline:0}.search:focus{background:#fff;border-color:#dfe3e7;box-shadow:0 1px 4px #0002}.account-switcher select{max-width:240px;padding:10px 12px;border:1px solid #dadce0;border-radius:20px;background:#fff;color:#3c4043}.layout{display:grid;grid-template-columns:230px minmax(0,1fr);height:calc(100vh - 64px)}.sidebar{padding:16px 10px;border-right:1px solid #eee;background:#fff}.compose{display:flex;align-items:center;gap:10px;padding:15px 22px;border:0;border-radius:16px;background:#c2e7ff;box-shadow:0 1px 3px #bbb;font-weight:700;color:#001d35;cursor:pointer}.compose:hover{box-shadow:0 2px 6px #aaa}.menu{margin-top:18px}.menu a{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-radius:0 22px 22px 0;color:#3c4043;text-decoration:none}.menu a.active{background:#d3e3fd;font-weight:700}.menu a:hover{background:#f1f3f4}.menu a.disabled-link{cursor:default}.content{min-width:0;overflow:auto;background:#fff}.notice{padding:12px 16px;margin:10px 16px;border-radius:8px}.success{background:#e6f4ea;color:#137333}.error{background:#fce8e6;color:#b3261e}.list-toolbar,.message-toolbar{height:52px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:#fff;z-index:2}.list-title{font-size:16px;font-weight:600;margin-left:6px}.mail-count{margin-left:auto;color:#5f6368;font-size:12px}.icon-button{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#3c4043;font-size:20px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}.icon-button:hover{background:#f1f3f4}.mail-list{width:100%}.mail-row{display:grid;grid-template-columns:30px 30px minmax(150px,220px) minmax(220px,1fr) 125px;align-items:center;gap:8px;min-height:46px;padding:7px 16px;border-bottom:1px solid #eceff1;text-decoration:none;color:#3c4043;background:#f7f8f8}.mail-row:hover{position:relative;z-index:1;box-shadow:0 1px 4px #0003}.mail-row.unread{font-weight:700;background:#fff}.row-check,.row-star{color:#5f6368;font-size:17px}.sender,.subject,.preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.subject-line{display:flex;min-width:0;gap:5px}.preview{color:#5f6368;font-weight:400}.mail-row time{text-align:right;font-size:12px;white-space:nowrap}.message-view{min-height:100%;background:#fff}.toolbar-label{color:#5f6368}.delete-form{margin-left:auto}.message-header{padding:24px 32px 8px}.message-header h1{font-size:22px;font-weight:400;margin:0 0 24px}.sender-line{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1a73e8;color:#fff;font-weight:700;font-size:18px}.sender-details{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}.sender-details span,.sender-details small{color:#5f6368}.sender-line time{color:#5f6368;font-size:12px}.email-body{margin:18px 32px 0 86px;padding:4px 0 28px;line-height:1.65;overflow-wrap:anywhere}.email-body img{max-width:100%;height:auto}.email-body table{max-width:100%}.message-actions{display:flex;gap:10px;margin:8px 32px 36px 86px}.outline-button{border:1px solid #dadce0;background:#fff;border-radius:18px;padding:8px 18px;color:#3c4043;cursor:pointer}.outline-button:hover{background:#f8fafd}.empty{padding:45px;color:#777;text-align:center}.modal{position:fixed;inset:0;background:#0004;display:flex;align-items:flex-end;justify-content:flex-end;padding:24px;z-index:20}.hidden{display:none!important}.compose-box{width:min(570px,96vw);height:min(600px,84vh);background:#fff;border-radius:10px 10px 0 0;box-shadow:0 8px 30px #0005;display:flex;flex-direction:column;overflow:hidden}.compose-head{background:#404040;color:#fff;padding:12px 16px;display:flex;justify-content:space-between}.compose-head button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer}.compose-box>input,.compose-box textarea{border:0;border-bottom:1px solid #ddd;padding:13px 16px;font:inherit;outline:0}.compose-box textarea{flex:1;resize:none}.attachment-row,.compose-actions{padding:10px 14px}.compose-actions{display:flex;align-items:center}.send{background:#0b57d0;color:#fff;border:0;border-radius:18px;padding:10px 24px;cursor:pointer}.send:hover{background:#0842a0}@media(max-width:900px){.topbar{gap:10px}.brand{min-width:auto}.brand span:last-child{display:none}.layout{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:10px 6px}.compose{width:56px;height:56px;padding:0;justify-content:center;font-size:0;border-radius:16px}.compose span{font-size:24px}.menu a{justify-content:center;padding:13px 4px;border-radius:22px}.menu a span{font-size:0}.menu a span::first-letter{font-size:19px}.menu a strong{display:none}.mail-row{grid-template-columns:24px minmax(105px,160px) minmax(180px,1fr) 88px}.row-star{display:none}.email-body{margin-left:32px}.message-actions{margin-left:32px}}@media(max-width:620px){.topbar{padding:8px}.search-wrap{display:none}.account-switcher{margin-left:auto}.account-switcher select{max-width:190px}.layout{display:block}.sidebar{display:none}.mail-row{grid-template-columns:minmax(92px,125px) minmax(0,1fr) 64px;padding:9px 10px}.row-check,.row-star{display:none}.preview{display:none}.message-header{padding:18px 16px 8px}.message-header h1{font-size:20px}.sender-line{grid-template-columns:38px minmax(0,1fr)}.sender-line time{grid-column:2}.email-body{margin:14px 16px 0}.message-actions{margin:8px 16px 30px}.modal{padding:0}.compose-box{width:100%;height:88vh;border-radius:12px 12px 0 0}}
.mail-row-wrap{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:stretch;border-bottom:1px solid #eceff1;background:#f7f8f8}.mail-row-wrap:has(.mail-row.unread){background:#fff}.mail-row-wrap:hover{box-shadow:0 1px 4px #0003;z-index:1}.mail-row{grid-template-columns:minmax(150px,220px) minmax(220px,1fr) 125px;border-bottom:0;background:transparent}.inline-star{display:flex;align-items:center;justify-content:center}.inline-star button{border:0;background:transparent;font-size:19px;color:#5f6368;cursor:pointer}.inline-star button:hover,.star-button{color:#f4b400}.star-form{margin-left:auto}.delete-form{margin-left:0}.outline-button{text-decoration:none;display:inline-flex;align-items:center}.draft-button{margin-left:10px;border:1px solid #dadce0;background:#fff;border-radius:18px;padding:9px 18px;cursor:pointer}.compose-box>input{width:100%}.compose-actions{gap:8px}@media(max-width:900px){.mail-row{grid-template-columns:minmax(105px,160px) minmax(180px,1fr) 88px}}@media(max-width:620px){.mail-row-wrap{grid-template-columns:34px minmax(0,1fr)}.mail-row{grid-template-columns:minmax(92px,125px) minmax(0,1fr) 64px}}