:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:#211936;background:#391a5c;
  --ink:#211936;--ink-soft:#514365;--violet:#7423d0;--violet-light:#9a3fe0;
  --line:#d9c6f2;--tint:#f5eafa;--navy:#25123b;--card:#fff9ff;
}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#2b1143 0 24%,#aa78db 62%,#8c5ac8 100%)}
@media(min-width:1000px){body{padding:10px 10px 18px}}
button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #cb6dff;outline-offset:2px}a{color:#6828c7}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.icon{height:23px;width:23px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}.sr-only{position:absolute!important;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
.topbar{height:70px;display:flex;align-items:center;gap:19px;padding:0 28px;color:#fff;background:linear-gradient(94deg,#231037 0%,#2d1748 48%,#1d102b 100%);box-shadow:0 4px 22px #14071fa8;position:relative;z-index:5;border-bottom:1px solid #a04cc76e}
@media(min-width:1000px){.topbar{max-width:1660px;margin:0 auto;border-radius:18px 18px 0 0}}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;min-width:277px}.brand strong{display:block;font-size:26px;line-height:1;font-style:italic;font-weight:850;letter-spacing:-1px;text-shadow:0 0 11px #ff75f4,0 0 17px #fe63ce;color:#fff6ff}.brand strong span{font-weight:500}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;font-weight:760;color:#efdbff}.catmark{width:64px;height:52px;position:relative;text-shadow:0 0 10px #ed7fff;color:#fbafff}.catmark>span{font-size:28px;font-weight:800;position:absolute;left:0;top:2px;letter-spacing:-3px;color:#ffe4ff;filter:drop-shadow(0 0 6px #fa4ff6)}.catmark::after{content:'♡';font-size:19px;position:absolute;bottom:3px;right:2px}.catmark>span{transform:scaleX(1.25)}.catmark{font-size:0}
.edition{display:flex;align-items:center;gap:9px;min-width:238px;white-space:nowrap;color:#ffd5ff;font-size:16px;font-weight:650;font-style:italic;text-shadow:0 0 10px #dc6ae6}.crown{font-size:27px;color:#fff6ff;filter:drop-shadow(0 0 8px #ef6afc)}
.searchWrap{display:flex;align-items:center;gap:10px;margin-left:auto;background:linear-gradient(90deg,#563379,#66458a);border:1px solid #ae78d2;border-radius:28px;height:45px;padding:0 17px;min-width:170px;width:min(380px,28vw);box-shadow:0 3px 10px #14051b80}.searchWrap .icon{width:20px;height:20px;color:#f7ecff}.searchWrap input{width:100%;height:100%;background:transparent;border:0;outline:none;color:#fff;font-size:13px}.searchWrap input::placeholder{color:#efddfa;opacity:1}.searchWrap input:focus-visible{outline:none}
.topActions{display:flex;align-items:center;gap:9px;flex-shrink:0}.topActions button{color:#f8eefe}.topLink{border:1px solid #765393;border-radius:14px;padding:9px 13px;display:flex;align-items:center;gap:7px;background:#392150;height:43px;box-shadow:0 4px 8px #15091f88;font-size:13px;white-space:nowrap}.topLink .icon{width:21px}.topLink:hover,.iconButton:hover{background:#603985}.iconButton{border:0;background:transparent;color:inherit;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;position:relative}.iconButton .icon{width:23px;height:23px}.notificationDot{position:absolute;right:4px;top:3px;height:10px;width:10px;border-radius:100%;background:#fa58c9;border:2px solid #341e46;box-shadow:0 0 7px #fe83dd}.profileButton{background:linear-gradient(130deg,#9c52e5,#e481ed);border:2px solid #d9a7f5;border-radius:50%;width:44px;height:44px;padding:0;overflow:hidden;box-shadow:0 0 13px #ed7fe5}.profileButton img{width:100%;height:100%;object-fit:cover}.mobileMenu{display:none}
.hero{height:239px;position:relative;background-image:url('assets/alicia-shiro-banner.webp');background-repeat:no-repeat;background-position:center;background-size:cover;isolation:isolate}
@media(min-width:1000px){.hero{max-width:1660px;margin:0 auto;height:clamp(225px,24vw,270px);background-position:center center}}.hero::after{content:'';position:absolute;inset:auto 0 0;height:5px;background:linear-gradient(90deg,#aa6be9,#f9ccff,#9b51e2);box-shadow:0 2px 9px #e2a9fc}
.demoBadge{position:absolute;z-index:20;right:17px;top:74px;background:#42105de8;color:#fff;font-size:11px;padding:7px 11px;border:1px solid #e6aaf9;border-radius:20px;box-shadow:0 0 10px #cc63d6}.demoBadge[hidden]{display:none}
.workspace{display:grid;grid-template-columns:275px minmax(455px,1.42fr) minmax(405px,1fr);column-gap:5px;align-items:stretch;margin-top:-3px;padding:0 5px 23px;min-height:610px}
@media(min-width:1000px){.workspace{max-width:1660px;margin:-3px auto 0;padding:0 8px 24px;column-gap:10px;grid-template-columns:245px minmax(620px,1.16fr) minmax(430px,.8fr)}}.panel{background:linear-gradient(145deg,#fef8ff,#fbf1ff);border:2px solid #d3b6f3;border-radius:25px;box-shadow:0 5px 17px #45126880;overflow:hidden}.sidebar{min-height:606px;margin-top:-17px;display:flex;flex-direction:column;padding:18px 14px 8px;position:relative;background:linear-gradient(160deg,#fff9ff 0%,#f8ecff 83%,#f4dbff 100%);border-radius:35px 35px 28px 28px}.sidebar::before{content:'';height:5px;position:absolute;left:2px;right:2px;top:0;background:#fff9ff}.composeButton{height:54px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 24px;width:100%;border:1px solid #a754de;background:linear-gradient(180deg,#ae38e5,#6323c2);color:white;border-radius:15px;font-weight:750;font-size:17px;box-shadow:0 4px 9px #59109d50;text-shadow:0 1px 1px #4d1289}.composeButton:hover{background:linear-gradient(180deg,#c95af5,#7636d6)}.composeButton .icon{width:22px;height:22px}
.folders{display:flex;flex-direction:column;gap:1px;margin-top:16px}.folders button{height:34px;display:grid;align-items:center;grid-template-columns:29px 1fr auto;gap:10px;text-align:left;width:100%;background:none;color:#151426;border:none;padding:4px 10px 4px 13px;border-radius:9px;font-size:15px;font-weight:700}.folders button .icon{width:22px;height:22px;stroke:#35315f}.folders button:not(:disabled):hover{background:#eddaff}.folders button.active{background:linear-gradient(90deg,#f1cafa,#e9bdfb);color:#22112e;box-shadow:inset 4px 0 #8424dc}.folders button.active .icon{stroke:#7919d8}.folders button:disabled{opacity:.6}.navDivider{height:1px;background:#cdb3e9;margin:11px 5px 8px}.moreDivider{margin-top:8px}.folders button.optionalFolder{height:31px;font-size:13px;color:#533d74}.countPill{font-size:12px;min-width:27px;padding:2px 8px;background:linear-gradient(100deg,#6d18c4,#b53af1);color:#fff;justify-self:end;text-align:center;border-radius:20px;box-shadow:0 2px 8px #9b44d68c}.countPill[hidden]{display:none}.sideSpacer{flex:1;min-height:18px}.storageCard{border:1.5px solid #d5b2f4;border-radius:18px;background:#f8eefe;padding:15px 13px 13px;box-shadow:0 2px 6px #a17ec05b;position:relative;z-index:1}.storageRow{display:flex;gap:10px;align-items:center}.storageCloud{height:45px;width:45px;color:#8935e5;filter:drop-shadow(0 3px 3px #6e13bd50)}.storageRow strong{font-size:16px;display:block}.storageRow small{font-size:12px;display:block;margin-top:1px;color:#2a1d39}.progress{height:12px;border-radius:20px;background:#ddc6fb;overflow:hidden;margin:12px 0 4px;box-shadow:inset 0 1px 4px #915abb4f}.progress>span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#b435ee,#7929db);box-shadow:0 0 8px #bf67f8;min-width:0}.storageSub{font-size:10px;color:#695882;display:block;line-height:1.3}.sidebarPetals{text-align:center;color:#b383e8;letter-spacing:10px;font-size:24px;line-height:30px;height:29px;opacity:.8}
.listPanel,.readerPanel{min-height:600px;height:calc(100vh - 315px);max-height:850px;margin:0;background:linear-gradient(125deg,#fff8ff,#f7edff);border-radius:23px}.categoryBar{height:62px;display:flex;align-items:center;padding:7px 13px;gap:5px;border-bottom:1px solid #e1cfef}.category{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;flex:1;padding:9px 9px;border:0;background:transparent;color:#1d2137;font-weight:700;font-size:14px;border-radius:10px;white-space:nowrap}.category .icon{width:22px;height:22px;stroke:#25264a}.category:hover{background:#f0e1ff}.category.active{color:#6319c4;background:linear-gradient(170deg,#f8e7ff,#ead3ff);outline:1.5px solid #ab6bf4;box-shadow:0 3px 4px #b877f677}.category.active .icon{stroke:#6f23d4}.filterButton{border:0;background:none;padding:7px 8px;color:#241e48}.filterButton:hover{color:#6d28bb}.listToolbar{height:21px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:10px;color:#736084;border-bottom:0}.selectAllLabel{display:flex;align-items:center;gap:7px}.selectAllLabel input{width:14px;height:14px;accent-color:#8735d6;margin:0}.listToolbar .toolbarMini{width:25px;height:23px;border:0;background:transparent;color:#76429b;padding:0}.listToolbar .toolbarMini .icon{width:15px;height:15px}.listToolbar>div{display:flex;align-items:center;gap:9px}.messageList{overflow:auto;height:calc(100% - 106px);padding:3px 12px 0}.message{display:grid;grid-template-columns:27px 51px 122px minmax(110px,1fr) 73px 28px;align-items:center;gap:9px;border-bottom:1px solid #e6d6ec;min-height:62px;background:transparent;padding:5px 4px 5px 5px;cursor:pointer;border-radius:0}.message:hover{background:#f4e3fb}.message.active{background:linear-gradient(92deg,#f5d6fd,#f2c8f7);border-radius:12px;border-bottom:1px solid transparent}.message.unread .messageName,.message.unread .messageSubject{font-weight:850}.messageCheckbox{width:18px;height:18px;accent-color:#8a32c9;cursor:pointer;margin:0}.avatar{height:49px;width:49px;object-fit:cover;border-radius:50%;border:1px solid #c68cf1;box-shadow:0 2px 5px #9651c37c;background:radial-gradient(#f5d0ff,#b06ada)}.avatarFallback{height:49px;width:49px;border-radius:50%;display:grid;place-items:center;color:#6734a7;font-size:19px;font-weight:bold;background:#e3caff}.messageName{font-weight:710;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.messageName .tinyHeart{margin-left:4px;font-weight:500;font-size:15px}.messageCopy{min-width:0}.messageSubject,.messageSnippet{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.messageSubject{font-size:14px;font-weight:690;color:#171022}.messageSnippet{font-size:12px;color:#322a40;margin-top:4px;line-height:1.2}.messageTime{font-size:12px;font-weight:650;color:#29233a;white-space:nowrap;text-align:right;align-self:center}.starToggle{height:28px;width:28px;padding:2px;border:0;background:transparent;color:#64539a;display:grid;place-items:center}.starToggle:hover{color:#7935d0}.starToggle .icon{width:22px;height:22px}.starToggle.isStarred{color:#f6a000}.starToggle.isStarred .icon{fill:#ffb720;stroke:#e09e11}.listFooter{height:23px;padding:0 17px;text-align:right;color:#8e78a1;font-size:10px}.listFooterText{font-size:10px}.emptyMailbox{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;min-height:250px;gap:8px;color:#74618a;padding:20px}.emptyMailbox img{width:85px;height:85px;object-fit:cover;border-radius:50%;margin-bottom:6px}.emptyMailbox strong{font-size:19px;color:#41245c}.emptyMailbox p{font-size:13px;line-height:1.5;margin:2px 0}
.readerPanel{display:flex;flex-direction:column}.readerToolbar{height:51px;border-bottom:1px solid #dec9ec;display:flex;align-items:center;gap:17px;padding:0 21px;flex-shrink:0}.readerToolbar button{border:0;background:transparent;padding:5px;width:31px;height:33px;color:#241d3f;display:grid;place-items:center;border-radius:7px}.readerToolbar button:hover:not(:disabled){background:#e8d2f9;color:#6722b5}.readerToolbar button .icon{width:22px;height:22px}.readerToolbar button[hidden]{display:none}.readerToolbar button#more{margin-left:auto}.readerToolbar .readerSeparator{height:27px;width:1px;background:#dac7eb}.readerBody{padding:15px 27px 21px;min-height:0;overflow-y:auto;overflow-x:hidden;flex:1;color:#201a2d}.readerBody h2{font-size:22px;line-height:1.25;margin:1px 0 15px;letter-spacing:-.4px;color:#101125}.senderCard{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:9px;border-bottom:1px solid #d9c2e6;padding-bottom:11px}.senderCard .avatar{width:43px;height:43px}.senderInfo{min-width:0}.senderInfo strong{font-size:13px}.senderInfo small{color:#46385d;display:block;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.senderCard time{font-size:12px;color:#211c34;align-self:start}.bodyText{font-size:14px;white-space:pre-wrap;line-height:1.43;margin-top:14px;overflow-wrap:anywhere}.bodyText p{margin:.4rem 0}.readerArt{margin-top:13px;width:100%;height:auto;max-height:230px;object-fit:cover;border-radius:15px;border:1px solid #b989db;display:block}.readerAttachmentLabel{display:flex;align-items:center;gap:8px;margin:12px 0 8px;font-size:13px;color:#2e2346}.readerAttachmentLabel .icon{width:18px;height:18px}.previewAttachments{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.previewAttachments img{width:135px;height:77px;object-fit:cover;border-radius:8px;border:1px solid #b58ade}.downloadAttachment{border:1px solid #bd93e9;border-radius:12px;background:#f8efff;padding:9px 12px;font-size:12px;color:#482a70;display:inline-flex;align-items:center;gap:7px}.downloadAttachment .icon{width:17px;height:17px}.downloadAttachment:hover{background:#ead9fb}.realAttachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.emptyReader{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:65px 5px;color:#6b4189;gap:13px}.emptyReader img{width:min(100%,400px);border-radius:18px;box-shadow:0 5px 18px #9652be4d}.emptyReader strong{font-size:19px}.statusLine{font-size:11px;color:#725c85;margin-top:12px}.warning{color:#9c382a;font-weight:650}.readerActions{margin-top:20px;display:flex;gap:9px}.readerActions button{padding:8px 12px;border:1px solid #bd96e9;border-radius:10px;background:#f6edff;color:#5d3a9f;font-weight:650}
.styledDialog{position:fixed;border:1px solid #ca92ed;border-radius:20px;box-shadow:0 24px 110px #170b29a8;background:#fff9ff;color:#261937;width:min(655px,95vw);max-height:90vh;overflow:auto;padding:24px 28px}.styledDialog::backdrop{background:#120721b8;backdrop-filter:blur(5px)}.compactDialog{width:min(500px,95vw)}.dialogTitle{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.dialogTitle h2{font-size:23px;color:#4b206c;margin:0}.styledDialog label{display:block;font-weight:700;font-size:13px;margin:10px 0;color:#55396c}.styledDialog label input,.styledDialog label textarea{display:block;margin-top:6px;padding:11px 13px;border-radius:9px;border:1px solid #caa8e7;width:100%;color:#261937;background:#fff}.styledDialog textarea{resize:vertical;min-height:145px}.styledDialog label small{display:block;font-size:11px;color:#766488;font-weight:400;margin-top:5px}.dialogActions{display:flex;align-items:center;gap:12px;margin-top:20px}.dialogActions button,.settingsActions button{padding:10px 15px;border-radius:11px;background:#f5eaff;border:1px solid #d7bbea;color:#57308e;font-weight:700}.primaryAction{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0!important;background:linear-gradient(100deg,#8a2bdb,#b34ce5)!important;color:white!important;padding:12px 18px!important;border-radius:11px;box-shadow:0 3px 8px #8539c252;font-weight:800;cursor:pointer}.primaryAction .icon{width:18px;height:18px}.hint{font-size:11px;line-height:1.55;color:#79678a;margin:13px 0 0}.styledDialog h2{margin-top:0}.settingsActions{display:grid;gap:9px;margin:15px 0}.settingsActions button{display:flex;align-items:center;gap:9px;text-align:left}.settingsActions .icon{height:19px;width:19px}.serverDetails{border:1px solid #dfc6f3;background:#f7eeff;padding:12px 14px;border-radius:12px;font-size:13px;white-space:pre-line;line-height:2}.textDanger{background:transparent;border:0;color:#a33e6f;font-size:13px;margin-top:12px;text-decoration:underline;cursor:pointer}.contactForm{display:grid;gap:2px}.contactList{border-top:1px solid #e2d1ee;margin-top:16px;max-height:320px;overflow-y:auto}.contactEntry{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 3px;border-bottom:1px solid #ecddf4}.contactEntry small{color:#756589;display:block}.contactEntry button{border:1px solid #dbbbee;background:#fcf2ff;color:#7934c1;padding:6px 10px;border-radius:9px}.infoBody{line-height:1.6;font-size:14px}.loginHero{display:flex;justify-content:center;gap:15px}.loginHero img{height:75px;width:75px;border-radius:50%;border:2px solid #d7b2f7}.loginHero+h2{text-align:center;margin:10px 0;color:#7024c9}.compactDialog>p{text-align:center}.loginAction{width:100%;margin-top:16px}.errorText{font-size:13px;color:#a03b4a}.demoLink{display:block;margin:15px auto 2px;background:transparent;border:0;color:#662ab0;text-decoration:underline;font-size:12px}.demoLink:hover{color:#b44be7}
#toast{position:fixed;bottom:24px;right:24px;max-width:min(440px,90vw);display:none;background:#381752;color:#fff;border:1px solid #cc94f4;box-shadow:0 7px 25px #160524a8;padding:13px 19px;border-radius:13px;z-index:100;font-size:13px;line-height:1.5}#toast.show{display:block}
@media(max-width:1450px){.topbar{gap:11px;padding:0 17px}.brand{min-width:241px}.brand strong{font-size:23px}.brand small{font-size:8px}.edition{min-width:200px;font-size:14px}.searchWrap{min-width:140px}.topLink{padding:8px 9px;gap:4px}.workspace{grid-template-columns:230px minmax(370px,1.38fr) minmax(355px,1fr)}.message{grid-template-columns:25px 45px 89px minmax(70px,1fr) 62px 25px;gap:6px}.messageName{font-size:12px}.messageSubject{font-size:12px}.messageTime{font-size:11px}.avatar,.avatarFallback{width:43px;height:43px}.sidebar{padding:16px 10px 8px}.readerBody{padding:15px 18px}.category{font-size:12px;gap:4px}}
@media(max-width:1160px){.edition{display:none}.searchWrap{width:min(330px,31vw)}.topbar{gap:9px}.topActions{gap:3px}.topLink span{display:none}.topLink{width:42px;justify-content:center}.workspace{grid-template-columns:205px minmax(315px,1.25fr) minmax(300px,1fr)}.message{grid-template-columns:20px 42px 1fr 50px 25px;gap:6px}.messageName{grid-column:3;grid-row:1;align-self:start;margin-top:3px}.messageCopy{grid-column:3;grid-row:1;align-self:end;margin-bottom:3px}.messageSubject{display:none}.messageSnippet{max-width:100%;font-size:11px}.messageTime{grid-column:4;grid-row:1}.starToggle{grid-column:5;grid-row:1}.messageCheckbox{grid-column:1;grid-row:1}.avatar,.avatarFallback{grid-column:2;grid-row:1}.readerToolbar{gap:10px}.category .icon{width:18px}}
@media(max-width:900px){.hero{height:205px;background-size:cover}.workspace{grid-template-columns:185px minmax(0,1fr);gap:9px;padding:0 10px 20px}.sidebar{grid-row:1 / span 2;min-height:620px}.listPanel{min-height:465px;height:auto;max-height:620px}.readerPanel{grid-column:2;min-height:430px;height:auto;max-height:650px}.messageList{height:400px}.message{grid-template-columns:25px 49px 95px minmax(100px,1fr) 68px 24px}.messageName,.messageCopy,.messageTime,.starToggle,.messageCheckbox,.avatar,.avatarFallback{grid-column:auto;grid-row:auto;align-self:center;margin:0}.messageSubject{display:block}.messageSnippet{display:block}.topbar .desktopExtra{display:none}.category{font-size:13px}.readerBody{padding:20px}.hero{background-position:47% center}}
@media(max-width:650px){.topbar{height:auto;min-height:65px;flex-wrap:wrap;padding:10px 12px;gap:8px}.mobileMenu{display:grid;margin-right:-7px}.brand{min-width:0;flex:1}.brand strong{font-size:22px}.brand small{font-size:7px;letter-spacing:1.5px}.catmark{width:36px;height:39px}.catmark>span{font-size:21px}.edition{display:none}.searchWrap{width:100%;order:4;height:41px;margin:0;min-width:0}.topActions{margin-left:auto}.topActions .topLink,.topActions .desktopExtra{display:none}.topActions .iconButton{display:grid}.profileButton{width:35px;height:35px}.hero{height:148px;background-size:cover;background-position:55% center}.workspace{display:flex;flex-direction:column;margin-top:0;padding:0 7px 16px;gap:8px}.sidebar{margin-top:-5px;min-height:0;padding:11px;display:none}.sidebar.open{display:flex}.sidebar .sideSpacer{min-height:5px}.folders{display:grid;grid-template-columns:repeat(2,1fr)}.folders .navDivider{grid-column:1/-1}.storageCard{margin-top:15px}.sidebarPetals{display:none}.composeButton{height:42px}.listPanel{min-height:430px;max-height:none;height:auto}.messageList{height:430px;padding:0 7px}.readerPanel{min-height:340px;max-height:none;height:auto}.categoryBar{height:55px;padding:6px}.category{font-size:11px;padding:8px 5px;gap:3px}.category .icon{height:17px;width:17px}.filterButton{padding:6px 4px}.message{grid-template-columns:21px 44px minmax(72px,1fr) 48px 24px;min-height:62px;gap:6px;padding:5px 4px}.messageName,.messageCopy{grid-column:3;grid-row:1}.messageName{align-self:start;margin-top:7px}.messageCopy{align-self:end;margin-bottom:4px}.messageSubject{display:none}.messageSnippet{font-size:11px}.messageTime{grid-column:4;grid-row:1;font-size:10px}.starToggle{grid-column:5;grid-row:1}.avatar,.avatarFallback{grid-column:2;grid-row:1;width:43px;height:43px}.messageCheckbox{grid-column:1;grid-row:1}.readerBody{padding:15px}.readerBody h2{font-size:21px}.readerToolbar{height:48px;padding:0 17px;gap:10px}.previewAttachments img{width:44%;height:auto;aspect-ratio:1.8}.styledDialog{padding:18px}.demoBadge{font-size:10px;top:117px;right:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Reference-fidelity refinements: official neon icon, compact Gmail-like sidebar. */
.brandLogo{width:58px;height:53px;object-fit:cover;border-radius:16px;filter:drop-shadow(0 0 5px #ec75ef);margin-left:-3px;margin-right:3px}
.edition .crown{width:24px;height:24px;fill:#fff2ff;stroke:#ffd5ff;stroke-width:1.2;filter:drop-shadow(0 0 7px #e84aff)}
.folders button.moreFolders{height:26px;font-size:11px;color:#755591;display:flex;justify-content:space-between;padding-left:13px;font-weight:600}
.folders button.optionalFolder[hidden]{display:none}
.sidebar{min-height:0;height:calc(100vh - 329px);max-height:710px;overflow-y:auto;scrollbar-width:thin}
@media(min-width:1000px){.sidebar{height:clamp(560px,calc(100vh - 365px),720px)}}
.listPanel,.readerPanel{min-height:575px;height:calc(100vh - 344px)}
@media(min-width:1000px){.listPanel,.readerPanel{height:clamp(560px,calc(100vh - 380px),720px)}}
.folders button{height:31px}
.folders{margin-top:12px}
.sidebar{padding-top:16px}
.sidebarPetals{height:20px;line-height:20px;font-size:18px}
.navDivider{margin-top:7px;margin-bottom:5px}
.sideSpacer{min-height:8px}
.storageCard{padding:11px 10px 8px}
.storageCloud{width:38px;height:38px}
.storageRow strong{font-size:15px}
.storageRow small{font-size:11px}
.progress{margin:7px 0 2px}
@media(max-width:900px){.sidebar{height:auto;max-height:none;min-height:560px}.listPanel,.readerPanel{height:auto;min-height:430px}.messageList{height:400px}}
@media(max-width:650px){.brandLogo{width:38px;height:37px;border-radius:10px;margin-right:0}.sidebar{height:auto;min-height:0;max-height:none}.readerPanel{min-height:330px}.listPanel{min-height:430px}}

/* Keep attachments visible in the reading pane at the reference screenshot size. */
.readerBody{padding-top:10px}
.readerBody h2{margin-bottom:9px}
.senderCard{padding-bottom:7px}
.bodyText{margin-top:9px;line-height:1.36}
.readerArt{margin-top:9px}
.readerAttachmentLabel{margin-top:9px;margin-bottom:7px}
@media(max-width:650px){.readerBody{padding:15px}.readerBody h2{margin-bottom:15px}}

.bulkActions{display:flex;align-items:center;gap:5px}.bulkActions[hidden]{display:none}.bulkActions button{height:24px;padding:3px 8px;background:#e6d2fa;border:1px solid #caa3ee;border-radius:8px;font-size:11px;color:#56238f;font-weight:700}
@media(max-width:650px){.bulkActions button{font-size:10px;padding:3px 6px}.listCount{display:none}}

@media(min-width:1400px){.messageList{padding-left:16px;padding-right:16px}.readerBody{padding-left:22px;padding-right:22px}}

/* ================================================================
   NyanMail v7 · Immersive vertical workspace
   The previous v6 max-width/min-height combination made the app a
   tiny postcard at browser zoom settings below 100%. Keep the frame
   responsive to viewport width while giving the panels vertical room.
   ================================================================ */
:root { --mail-frame-max: 1900px; }
body {
  background: linear-gradient(180deg,rgba(13,6,38,.18),rgba(38,13,65,.06) 45%,rgba(24,7,58,.20)),
              url('assets/moonlit-wallpaper.webp') center center / cover fixed no-repeat,
              #241039;
  overflow-x:hidden;
}
@media (min-width:1000px) {
  body { padding:12px 0 24px; }
  .topbar,.hero,.workspace {
    width:min(90vw,var(--mail-frame-max));
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }
  .topbar {
    height:70px;
    padding:0 21px;
    border:1px solid rgba(245,158,255,.65);
    border-bottom:0;
    border-radius:24px 24px 0 0;
    box-shadow:0 -2px 22px rgba(248,91,250,.16),0 8px 22px rgba(18,4,37,.55);
  }
  .hero {
    height:clamp(215px,16vw,252px);
    background-size:cover;
    background-position:center center;
    border-left:1px solid rgba(245,158,255,.48);
    border-right:1px solid rgba(245,158,255,.48);
  }
  .workspace {
    min-height:0;
    height:clamp(540px,66dvh,1100px);
    margin-top:-2px;
    padding:0 7px 10px;
    column-gap:8px;
    grid-template-columns:245px minmax(0,1.25fr) minmax(0,1fr);
    align-items:stretch;
    background:linear-gradient(180deg,rgba(107,30,141,.55),rgba(75,20,112,.26));
    border:1px solid rgba(238,172,255,.57);
    border-top:0;
    border-radius:0 0 24px 24px;
    box-shadow:0 10px 50px rgba(12,4,37,.55),0 0 19px rgba(238,108,246,.17);
  }
  .sidebar {
    margin-top:0;
    height:100%;min-height:0;max-height:none;
    overflow-y:auto;
    border-radius:22px;
  }
  .listPanel,.readerPanel {
    height:100%;min-height:0;max-height:none;
    border-radius:20px;
  }
}
.listPanel,.readerPanel { display:flex; flex-direction:column; }
.listPanel .categoryBar,.listPanel .listToolbar,.readerPanel .readerToolbar{flex-shrink:0;}
.messageList { height:auto;flex:1 1 auto;min-height:0;overflow-y:auto; }
.listFooter { flex:0 0 23px; }
.readerBody {flex:1 1 auto;min-height:0;overflow:auto;}
.emptyMailbox { flex:1 1 auto; position:relative; min-height:290px; justify-content:center; padding-bottom:110px; }
.emptyMailbox:after {
  content:'✉  ♡'; position:absolute;left:0;right:0;bottom:14px;
  pointer-events:none;font-size:90px;line-height:1;
  font-family:Georgia,'Times New Roman',serif;letter-spacing:-12px;
  text-align:center;color:rgba(144,68,204,.14);transform:rotate(-11deg);
}
.emptyReader {flex:1 1 auto;position:relative;padding:70px 14px 120px;}
.emptyReader:after {content:'☾   ♡   ✧';position:absolute;left:0;right:0;bottom:38px;font-size:39px;color:rgba(138,67,204,.17);text-align:center;pointer-events:none;}
.emptyMailbox strong,.emptyReader strong{color:#5b257f}
.tryDemoButton {margin-top:13px;border:1px solid #aa69db;background:linear-gradient(130deg,#f2dbff,#e9cbff);color:#69239d;border-radius:15px;padding:11px 19px;box-shadow:0 4px 15px #c6a0ec77;font-size:13px;font-weight:780;cursor:pointer;transition:background .15s,transform .15s;}
.tryDemoButton:hover{background:#dec0ff;transform:translateY(-1px)}
.tryDemoButton:focus-visible{outline:3px solid #9b3cde;outline-offset:2px}
@media (min-width:1000px) and (max-width:1450px) {
  .workspace{grid-template-columns:205px minmax(0,1.15fr) minmax(0,.95fr);}
  .topbar{gap:10px;}
  .brand{min-width:220px;}
  .searchWrap{width:min(330px,27vw)}
}
@media (min-width:651px) and (max-width:999px) {
  body{padding:8px 0 24px;}
  .topbar,.hero,.workspace{width:96vw;margin-left:auto;margin-right:auto;max-width:none;}
  .hero{background-size:cover;}
  .workspace{grid-template-columns:190px minmax(0,1fr);height:auto;min-height:0;}
  .sidebar{height:auto;max-height:none;}
  .listPanel{min-height:470px;height:auto;max-height:none;}
  .readerPanel{min-height:420px;height:auto;max-height:none;}
  .messageList{min-height:380px;}
}
@media (max-width:650px) {
  body{background-attachment:scroll;padding:0;}
  .topbar,.hero,.workspace{width:100%;max-width:none;}
  .hero{background-size:cover;background-position:55% center;}
  .workspace{height:auto;min-height:0;}
  .listPanel,.readerPanel{height:auto;max-height:none;}
  .messageList{height:auto;min-height:375px;max-height:440px;}
  .emptyMailbox{min-height:340px;}
  .emptyReader{min-height:320px;padding:55px 12px 98px;}
  .emptyMailbox:after{font-size:60px;bottom:12px;}
}

/* NyanMail v8 - version identity, larger vertical mailbox */
.buildPill{position:absolute;right:7px;bottom:-26px;z-index:18;background:#321349ec;color:#fff4ff;border:1px solid #ed9fff;font:750 10px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:1px;padding:5px 9px;border-radius:12px;box-shadow:0 2px 11px #380c58;}
@media(min-width:1000px){.topbar,.hero,.workspace{width:min(92vw,1920px)}.workspace{height:clamp(630px,70dvh,1120px)}}
@media(max-width:650px){.buildPill{right:9px;bottom:-23px;font-size:9px;padding:4px 7px}}
/* Keep all of the branded header legible while retaining its aspect ratio. */
@media(min-width:1000px){.hero{height:clamp(205px,14vw,240px);background-position:center center}}
/* Demo indicator must not obscure the visible ACCOUNTS v9 version label. */
#demoBadge{position:fixed;top:auto;bottom:16px;right:16px;z-index:70}
@media(max-width:650px){#demoBadge{top:auto;bottom:8px;right:8px;font-size:9px}}

/* Private-account UI, Moonlit v9. Preserve the v8 illustration and layout. */
.loginTabs{display:flex;gap:8px;margin:12px 0;border-bottom:1px solid #dfc9f1;padding-bottom:9px}.loginTabs button{flex:1;border:1px solid #ccace9;background:#f5ebff;color:#6933a6;padding:10px 7px;border-radius:10px;font-weight:700}.loginTabs button.active{background:linear-gradient(105deg,#8e35d8,#af65e5);color:white;border-color:#8d3bce}.loginAction{margin-top:16px}.accountLabel{font-size:13px;color:#67379e;background:#f1e3ff;border:1px solid #dbbdf6;border-radius:10px;padding:10px 12px}.userList{margin-top:17px;max-height:330px;overflow-y:auto}.userRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e4d1f2}.userDescription strong{display:block;color:#462466}.userDescription small{color:#79668b;font-size:11px}.userControls{display:flex;flex-wrap:wrap;justify-content:end;gap:6px}.userControls button{font-size:11px;padding:7px 9px;border:1px solid #c49ae6;background:#f5eafd;color:#58218b;border-radius:9px}.userControls button:hover{background:#ead6ff}[hidden]{display:none!important}@media(max-width:480px){.userRow{align-items:flex-start;flex-direction:column}.userControls{justify-content:start}}

/* NyanMail v10 — accessible registration view, matching moonlit styling. */
.registerLink{display:block;margin:12px auto 0;background:transparent;border:0;color:#6827b1;font-size:13px;font-weight:750;padding:8px 12px;border-radius:10px;text-decoration:underline;text-underline-offset:3px}
.registerLink:hover{color:#a832d5;background:#f4e5ff}
.signupHero{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(100deg,#f1dcff,#fff1fd,#eee3ff);border:1px solid #dab2fa;border-radius:16px;padding:9px 12px}
.signupHero img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid #d6a5f5}
.signupHero div{text-align:center;flex:1}.signupHero strong{font-size:14px;color:#522177;display:block}.signupHero small{display:block;color:#8f58b1;font-size:11px;margin-top:4px}
.registrationNote{text-align:center;margin:12px 0 10px!important}
.registrationDialog label{margin:12px 0}.registrationDialog input{min-height:42px}
.registrationDialog .errorText{text-align:center;min-height:1.2em;margin-top:10px}
.signupAdmin{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:13px;background:#f1e4fc;border:1px solid #d5b1ef;padding:12px;margin:5px 0 14px}
.signupAdmin strong,.signupAdmin small{display:block}.signupAdmin strong{color:#522177;font-size:13px}.signupAdmin small{font-size:11px;margin-top:2px;color:#785e89}
.signupToggle{display:flex!important;align-items:center;gap:6px;white-space:nowrap;font-size:12px!important;margin:0!important}.signupToggle input{width:17px;height:17px;accent-color:#8630cd}
@media(max-width:460px){.signupAdmin{align-items:flex-start;flex-direction:column}.signupHero img{height:48px;width:48px}}