:root{color-scheme:dark;font-family:"Microsoft YaHei Light","Microsoft YaHei",sans-serif;color:#f5f4f6}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#0b0b0e}.background{position:fixed;inset:0;background:linear-gradient(rgba(0,0,0,.33),rgba(0,0,0,.40)),url('https://acgpicture.yumenashyi.com/random?orientation=landscape') center/cover no-repeat;z-index:-1}.glass{background:rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.24);box-shadow:0 20px 65px #0004,inset 0 1px 0 #ffffff0c;backdrop-filter:blur(26px) saturate(.75);-webkit-backdrop-filter:blur(26px) saturate(.75);border-radius:22px}main{max-width:1800px;margin:auto;padding:28px}.login{max-width:480px;margin:9vh auto;padding:40px}.eyebrow{font-size:11px;letter-spacing:.22em;color:#b9b7bf}h1{font-weight:300;font-size:42px;line-height:1.25;margin:25px 0 12px}h2{font-size:22px;font-weight:400;margin:8px 0}p{color:#b8b7bf;line-height:1.65}label{display:block;color:#d3d1d8;font-size:14px;margin:17px 0}input,textarea{width:100%;background:rgba(0,0,0,.32);border:1px solid #ffffff30;border-radius:12px;color:white;padding:13px;font:inherit;margin-top:8px}textarea{resize:vertical}button{cursor:pointer;color:#f7f7f8;background:#ffffff12;border:1px solid #ffffff24;border-radius:11px;padding:10px 15px;font:inherit}button:hover{background:#ffffff26}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:#f3f3f4;color:#111;border-color:transparent;font-weight:600}.primary:hover{background:#d9d9dd}#login-form .primary,.sidebar .primary{width:100%;margin-top:12px}.message{font-size:13px;color:#ffb8b8}.top,.section-head,.top-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.top{padding:20px 25px;margin-bottom:16px}.top-actions span{font-size:13px;color:#c1c0c6}.layout{display:grid;grid-template-columns:210px minmax(300px,380px) minmax(360px,1fr);gap:16px;min-height:70vh}.sidebar,.inbox,.reader{padding:20px;min-width:0}.sidebar nav{margin-top:20px;display:grid;gap:6px}.folder{text-align:left;display:flex;justify-content:space-between;border:0;background:transparent}.folder.active{background:#ffffff1b}.section-head h2{white-space:nowrap}.section-head form{display:flex;gap:6px}.section-head input{margin:0;min-width:0}.mail{display:block;width:100%;text-align:left;margin:8px 0;padding:14px;border-color:transparent}.mail.selected{border-color:#ffffff70}.mail.unread .mail-from,.mail.unread .mail-subject{font-weight:700}.mail-from,.mail-subject,.mail-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-from{display:flex;justify-content:space-between;gap:8px}.mail-time,.mail-preview{font-size:12px;color:#aaa9af}.mail-subject{margin:7px 0}.reader-head{border-bottom:1px solid #ffffff22;padding-bottom:14px}.reader-head h2{overflow-wrap:anywhere}.reader-meta{font-size:13px;color:#bcbac1;overflow-wrap:anywhere}.reader-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;color:#f1f0f2}.reader-actions,.compose-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.attachments{display:flex;flex-wrap:wrap;gap:8px}.attachments button{font-size:13px}.empty{text-align:center;padding:80px 12px}dialog{max-width:740px;width:calc(100% - 30px);padding:0;border:0;background:transparent;color:inherit}dialog::backdrop{background:#0004;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.compose{padding:28px;max-height:90vh;overflow:auto}#more{width:100%;margin-top:10px}[hidden]{display:none!important}@media(max-width:1000px){.layout{grid-template-columns:180px 1fr}.reader{grid-column:1/-1;min-height:300px}}@media(max-width:600px){main{padding:12px}.login{padding:25px}.top{align-items:flex-start;gap:15px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.top-actions span{width:100%;text-align:right}.layout{display:flex;flex-direction:column}.sidebar nav{display:flex;overflow:auto}.folder{white-space:nowrap}.sidebar,.inbox,.reader{padding:16px}.section-head{align-items:flex-start;flex-wrap:wrap}.section-head form{width:100%}.section-head form input{flex:1}}@media(orientation:portrait){.background{background-image:linear-gradient(rgba(0,0,0,.33),rgba(0,0,0,.40)),url('https://acgpicture.yumenashyi.com/random?orientation=portrait')}}

/* One continuous glass workspace, divided by fine lines. */
#app{overflow:hidden;border:1px solid #ffffff26;border-radius:22px;background:rgba(0,0,0,.48);box-shadow:0 20px 65px #0004,inset 0 1px 0 #ffffff0c;backdrop-filter:blur(26px) saturate(.75);-webkit-backdrop-filter:blur(26px) saturate(.75)}
#app .glass{background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#app .top{padding:20px 26px;margin:0;border-bottom:1px solid #ffffff24}
#app .layout{gap:0;grid-template-columns:210px minmax(300px,380px) minmax(0,1fr);min-height:70vh}
#app .sidebar,#app .inbox,#app .reader{padding:24px;min-width:0}
#app .sidebar,#app .inbox{border-right:1px solid #ffffff24}
#app .inbox .section-head{display:block}
#app .inbox .section-head .eyebrow{display:block;white-space:nowrap}
#app .inbox .section-head h2{margin:8px 0 16px}
#app #search-form{display:flex;width:100%;gap:8px}
#app #search-form input{flex:1;min-width:0}
#app #search-form button{flex:none;white-space:nowrap}
#app #status{color:#c2c0c6;margin:13px 0}
#app .mail{border-radius:10px}
#app .mail-from span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1000px){#app .layout{grid-template-columns:190px minmax(0,1fr)}#app .inbox{border-right:0}#app .reader{grid-column:1/-1;border-top:1px solid #ffffff24;min-height:300px}}
@media(max-width:600px){#app .top{padding:18px;align-items:flex-start}#app .layout{display:flex;flex-direction:column}#app .sidebar,#app .inbox,#app .reader{padding:18px;border-right:0}#app .sidebar,#app .inbox{border-bottom:1px solid #ffffff24}#app .reader{border-top:0}#app .sidebar nav{margin-top:14px}#app #search-form{flex-wrap:nowrap}}
.profile-button{display:flex;align-items:center;gap:8px;white-space:nowrap}.profile-button img,.avatar-row img{width:30px;height:30px;object-fit:cover;border-radius:50%}.profile-panel{padding:28px;max-height:90vh;overflow:auto}.profile-panel h3{font-size:18px;font-weight:400}.profile-panel select{width:100%;background:rgba(0,0,0,.32);border:1px solid #ffffff30;border-radius:12px;color:white;padding:13px;font:inherit;margin-top:8px}.profile-panel .section-head{flex-wrap:nowrap}.profile-help{font-size:13px;color:#aaa9af}.profile-divider{border-top:1px solid #ffffff24;margin:26px 0}.avatar-row{display:flex;align-items:center;gap:12px}.avatar-row img{width:56px;height:56px}.avatar-row button{font-size:13px}

/* Header controls and balanced outer spacing. */
#app{min-height:calc(100svh - 56px);display:flex;flex-direction:column}
#app .layout{flex:1}
#app .top-actions{margin-left:auto;gap:22px;min-width:0}
.profile-summary{display:flex;align-items:center;gap:11px;min-width:0}
.avatar-wrap{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#ffffff1a;border:1px solid #ffffff29;overflow:hidden}
.avatar-wrap img{width:100%;height:100%;object-fit:cover}.avatar-wrap #avatar-fallback{font-size:19px;color:#eee}
.profile-text{display:flex;flex-direction:column;gap:3px;min-width:0}.profile-text strong{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-actions .profile-text #account{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-tools{display:flex;align-items:center;gap:7px;flex:none}.icon-button{display:inline-grid;place-items:center;width:42px;height:42px;padding:10px;flex:none}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon-button:focus-visible{outline:2px solid white;outline-offset:2px}
#app #search-form .search-button{width:46px;height:46px}.profile-panel textarea{min-height:105px}
@media(max-width:600px){#app{min-height:calc(100svh - 24px)}#app .top{align-items:center;flex-wrap:wrap;gap:14px}#app .top-actions{width:100%;margin-left:0;justify-content:space-between;gap:8px;flex-wrap:nowrap}.top-actions .profile-text #account{text-align:left;width:auto}.header-tools{gap:5px}.icon-button{width:38px;height:38px;padding:8px}.profile-text{max-width:42vw}}

/* Multi-select and persistent sign-in controls. */
.remember-row{display:flex;align-items:center;gap:10px;margin:12px 0 18px;color:#c6c4cb}
.remember-row input,.mail-check,.select-page input{appearance:auto;width:17px;height:17px;margin:0;accent-color:#d8d7dc;flex:none}
.bulk-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #ffffff24;color:#c6c4cb;font-size:13px}
.select-page{display:flex;align-items:center;gap:8px;margin:0;cursor:pointer}
#bulk-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
#bulk-actions button{padding:7px 10px;font-size:12px}
.mail-row{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px}
.mail-check{justify-self:center;cursor:pointer}
.mail-row .mail{min-width:0}
.danger{border-color:#ffffff55}
@media(max-width:600px){.bulk-toolbar{gap:8px}#bulk-actions{width:100%;margin-left:0}.mail-row{grid-template-columns:20px minmax(0,1fr);gap:6px}}

.attachment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;margin-top:14px}
.attachment-card{min-width:0;overflow:hidden;border:1px solid #ffffff24;border-radius:12px;background:#ffffff06}
.attachment-thumbnail{display:grid;place-items:center;width:100%;height:170px;border:0;border-bottom:1px solid #ffffff20;border-radius:0;padding:8px;background:#0004}
.attachment-thumbnail img{display:block;width:100%;height:100%;object-fit:contain}
.attachment-thumbnail:disabled{opacity:1;cursor:default}
.attachment-hint{font-size:13px;color:#b9b7bf;padding:12px;line-height:1.6}
.attachment-info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:center;padding:12px}
.attachment-name{font-size:13px;overflow-wrap:anywhere;grid-column:1}
.attachment-size{font-size:12px;color:#aaa9af;grid-column:1}
.attachment-info button{grid-column:2;grid-row:1/3;font-size:13px;padding:8px 12px}
#image-viewer{width:min(1200px,calc(100% - 32px));max-width:1200px;max-height:calc(100svh - 32px);overflow:hidden}
.image-viewer-panel{padding:0;overflow:hidden;border-radius:16px;background:rgba(0,0,0,.48)}
.image-viewer-toolbar{display:flex;align-items:center;gap:10px;border-bottom:1px solid #ffffff24;padding:12px 16px}
#image-viewer-title{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}
.image-viewer-toolbar button{flex:none;font-size:13px}
.image-viewer-canvas{display:flex;align-items:center;justify-content:center;overflow:auto;min-height:160px;max-height:calc(100svh - 120px);padding:12px}
#image-viewer-image{display:block;max-width:100%;max-height:calc(100svh - 150px);object-fit:contain}
@media(max-width:600px){#image-viewer{width:calc(100% - 16px);max-height:calc(100svh - 16px)}.image-viewer-toolbar{gap:7px;padding:10px}.image-viewer-toolbar button{padding:8px 10px}.attachment-thumbnail{height:190px}}