:root{
  --bg:#f7f1e9; --panel:#fffdfa; --panel2:#fbf5ee; --ink:#171816; --muted:#77736d;
  --line:#eee4d8; --gold:#bf8624; --gold2:#e9c98e; --soft:#f6eadb; --green:#69b24b;
  --shadow:0 18px 50px rgba(56,38,18,.08); --shadow-sm:0 8px 24px rgba(56,38,18,.07);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f5efe7}
body{min-height:100vh;background:radial-gradient(circle at 82% 12%,#fff 0,#fff8f0 28%,#f7f0e8 65%,#f2e8dc 100%)}
a{color:inherit;text-decoration:none}.icon{display:inline-block;vertical-align:middle;flex:0 0 auto}
button,input,textarea{font:inherit}
.app-shell{display:grid;grid-template-columns:306px 1fr;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:306px;background:linear-gradient(180deg,#fffaf4 0%,#fbf4eb 67%,#f3e6d5 100%);border-right:1px solid rgba(170,130,80,.08);display:flex;flex-direction:column;z-index:20;overflow:auto}
.brand-wrap{padding:18px 26px 12px}.brand{display:block;width:185px;height:82px;object-fit:cover;object-position:center;border-radius:8px;mix-blend-mode:multiply}
.compose-main{margin:6px 26px 24px;height:48px;border-radius:10px;background:#171817;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;box-shadow:0 9px 24px rgba(0,0,0,.12);transition:.2s}.compose-main:hover{transform:translateY(-1px);background:#252523}
.nav{padding:0 26px}.nav-item{height:43px;border-radius:11px;display:flex;align-items:center;gap:13px;padding:0 14px;margin:2px 0;font-size:14px}.nav-item:hover{background:#f8eee2}.nav-item.active{background:#fff8ef;box-shadow:var(--shadow-sm);font-weight:700}.nav-item .badge{margin-left:auto;background:#f0dec6;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:700}.nav-divider{height:1px;background:#eadfd2;margin:13px 0 17px}.nav-label{display:flex;align-items:center;justify-content:space-between;padding:0 13px 8px;font-size:11px;color:#716c64;letter-spacing:.04em}.nav-label .icon{color:#161616}
.storage{margin:18px 26px 16px;background:rgba(255,255,255,.77);border:1px solid rgba(173,125,58,.10);box-shadow:var(--shadow-sm);border-radius:13px;padding:12px 13px;display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center}.storage-ring{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) 0 42%,#f2dfc4 42%);position:relative;font-size:12px;font-weight:800}.storage-ring:before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fffaf4}.storage-ring span{position:relative}.storage-title{font-size:12px;font-weight:700}.storage-sub{font-size:11px;color:var(--muted);margin:5px 0 8px}.storage-bar{height:6px;border-radius:99px;background:#f1e2cd;overflow:hidden}.storage-bar i{display:block;width:42%;height:100%;background:var(--gold);border-radius:inherit}
.sidebar-art{margin-top:auto;height:155px;background:url('assets/echo-lighthouse.jpg') center/cover no-repeat;filter:saturate(.85) sepia(.08)}
.sidebar-foot{height:55px;display:flex;align-items:center;justify-content:space-around;background:rgba(255,250,244,.72);backdrop-filter:blur(8px);border-top:1px solid rgba(140,100,60,.12)}.side-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:#1f201d}.side-icon:hover{background:#fff}
.main-area{grid-column:2;min-width:0;padding:18px 22px 18px 0}
.topbar{height:66px;display:flex;align-items:center;gap:18px;padding:0 18px 0 24px}.search{height:46px;max-width:620px;flex:1;background:rgba(255,255,255,.74);border:1px solid rgba(165,120,70,.07);box-shadow:0 5px 22px rgba(60,40,20,.04);border-radius:13px;display:flex;align-items:center;gap:11px;padding:0 14px}.search input{border:0;outline:0;background:transparent;width:100%;font-size:15px;color:#45423f}.shortcut{font-size:12px;background:#fbefdf;border-radius:8px;padding:6px 9px;color:#5f564c;white-space:nowrap}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.top-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#20211e}.top-icon:hover{background:#fff}.account{display:flex;align-items:center;gap:10px;padding:4px 8px}.avatar{width:39px;height:39px;border-radius:50%;background:#171817;color:#fff;display:grid;place-items:center;position:relative}.avatar:after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid #fff;right:-1px;bottom:1px}.acct-main{font-size:13px;font-weight:700}.acct-sub{font-size:11px;color:var(--muted);margin-top:2px}.online-dot{color:var(--green);font-size:10px;margin-right:4px}
.mail-layout{height:calc(100vh - 102px);display:grid;grid-template-columns:minmax(390px,430px) minmax(520px,1fr);background:rgba(255,255,255,.62);border:1px solid rgba(165,120,70,.09);border-radius:22px;box-shadow:0 20px 60px rgba(64,42,18,.07);overflow:hidden;backdrop-filter:blur(7px)}
.list-pane{border-right:1px solid var(--line);min-width:0;min-height:0;background:rgba(255,255,255,.42);display:flex;flex-direction:column}.pane-head{height:92px;padding:21px 28px 12px;display:flex;align-items:flex-start;justify-content:space-between}.pane-title{display:flex;gap:14px;align-items:flex-start}.pane-title h1{font-size:20px;margin:0 0 5px}.pane-title small{color:var(--muted)}.check-circle{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm);margin-top:1px}.head-tools{display:flex;gap:8px}.small-btn{width:35px;height:35px;border-radius:9px;background:#fff;border:1px solid #f1e8de;display:grid;place-items:center;cursor:pointer}
.message-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 10px 16px}.mail-row{position:relative;display:grid;grid-template-columns:38px 1fr 60px;gap:11px;padding:16px 12px;border-bottom:1px solid #eee6dc;min-height:100px;border-radius:16px;transition:.18s;margin:0 0 1px}.mail-row:hover{background:#fffaf4}.mail-row.unread{background:#fff5e8}.mail-row.unread:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);left:3px;top:44px}.sender-avatar{width:38px;height:38px;border-radius:50%;background:#f7ead7;display:grid;place-items:center;color:#b47717;font-size:16px}.mail-content{min-width:0}.sender{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.subject{font-size:13px;font-weight:700;margin:7px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview{font-size:12px;color:#78736d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-meta{text-align:right;font-size:11px;color:#817b74;display:flex;flex-direction:column;align-items:flex-end;gap:14px}.star-btn{color:#c79a55;border:0;background:none;padding:0;cursor:pointer}.star-btn.on{color:#d8940a}.attach{color:#555;margin-right:4px}
.welcome-pane{overflow:auto;padding:44px 44px 28px;display:flex;flex-direction:column;align-items:center}.welcome-pane h2{font-size:25px;margin:16px 0 10px}.welcome-pane .sub{color:#7c756c;font-size:14px}.hero-card{width:min(100%,720px);height:350px;border-radius:18px;background:url('assets/echo-coast.jpg') center/cover no-repeat;margin:31px 0 27px;box-shadow:0 10px 28px rgba(91,56,25,.08)}.quote{font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.45;font-style:italic;text-align:center;color:#2e2b27;margin:0}.wave{font-family:Georgia,serif;color:var(--gold);font-size:34px;line-height:1;margin:12px 0 16px}.quick-wrap{width:min(100%,720px);align-self:center}.quick-title{font-size:14px;font-weight:700;margin-bottom:14px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.quick-card{height:112px;background:rgba(255,255,255,.75);border:1px solid #f1e8de;border-radius:13px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;font-size:13px;font-weight:700}.quick-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(56,38,18,.1)}.quick-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f7ebda}.brand-footer{margin-top:auto;padding-top:28px;text-align:center}.brand-footer strong{font-size:14px}.brand-footer p{font-size:11px;color:#77716a;margin:7px 0}
.error,.success{padding:12px 14px;border-radius:11px;margin-bottom:14px;font-size:13px}.error{background:#fee8e6;color:#93251e}.success{background:#eaf6e7;color:#2f6d25}
/* compose and message views */
.page-card{max-width:960px;margin:12px auto 30px;background:rgba(255,255,255,.78);border:1px solid rgba(170,120,60,.10);border-radius:22px;box-shadow:var(--shadow);padding:28px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.page-head h1{font-size:23px;margin:0}.back-btn{display:inline-flex;align-items:center;gap:7px;color:#4f4a44;font-size:13px}.form-grid label{display:block;font-size:12px;font-weight:700;margin:14px 0 7px}.form-grid input,.form-grid textarea{width:100%;border:1px solid #eadfd3;background:#fffdfa;border-radius:12px;padding:13px 14px;outline:0}.form-grid input:focus,.form-grid textarea:focus{border-color:#d4ad72;box-shadow:0 0 0 3px rgba(205,154,78,.12)}.form-grid textarea{min-height:310px;resize:vertical}.primary-btn{border:0;background:#181918;color:#fff;border-radius:11px;padding:12px 19px;display:inline-flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}.primary-btn:hover{background:#2a2b29}.message-headline{font-size:28px;margin:0 0 18px}.message-info{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid #eee3d7}.message-body{white-space:pre-wrap;font-family:inherit;line-height:1.7;font-size:15px;color:#32312e;margin:24px 0 10px}.message-actions{display:flex;gap:10px;margin-top:20px}
/* login */
.login-page{min-height:100vh;display:grid;grid-template-columns:1.12fr .88fr;background:linear-gradient(125deg,#f5eadc,#fffaf4 46%,#f3e0cb)}.login-visual{position:relative;background:url('assets/echo-coast.jpg') center/cover no-repeat;min-height:100vh}.login-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,239,229,.05),rgba(239,213,179,.20))}.login-logo{position:absolute;left:7%;top:7%;z-index:2;width:270px;border-radius:14px;mix-blend-mode:multiply}.login-quote{position:absolute;z-index:2;left:7%;bottom:7%;max-width:460px;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45);font-family:Georgia,serif;font-size:27px;font-style:italic}.login-panel{display:flex;align-items:center;justify-content:center;padding:42px}.login-box{width:min(100%,430px);background:rgba(255,253,250,.82);backdrop-filter:blur(18px);border:1px solid rgba(177,124,63,.13);box-shadow:0 22px 65px rgba(70,42,14,.13);border-radius:26px;padding:38px}.login-box h1{font-family:Georgia,serif;font-size:34px;font-weight:500;margin:0 0 8px}.login-box .intro{color:#777068;margin-bottom:26px}.login-box label{display:block;font-size:12px;font-weight:700;margin:14px 0 7px}.login-box input{width:100%;height:48px;border:1px solid #eadfd4;border-radius:12px;background:#fffdfa;padding:0 14px;outline:0}.login-box button{width:100%;height:49px;margin-top:20px;border:0;border-radius:12px;background:#171817;color:#fff;font-weight:700;cursor:pointer}.login-mini{font-size:11px;color:#8b8177;text-align:center;margin-top:18px}
.mobile-menu{display:none}
@media(max-width:1180px){.app-shell{grid-template-columns:240px 1fr}.sidebar{width:240px}.main-area{padding-right:12px}.brand{width:160px}.compose-main,.nav,.storage{margin-left:16px;margin-right:16px}.nav{padding:0}.mail-layout{grid-template-columns:minmax(350px,410px) 1fr}.welcome-pane{padding:30px 24px}.hero-card{height:290px}.quick-grid{gap:10px}}
@media(max-width:900px){.sidebar{display:none}.app-shell{display:block}.main-area{padding:10px}.mobile-menu{display:grid}.topbar{padding:0 5px}.mail-layout{height:auto;min-height:calc(100vh - 90px);grid-template-columns:1fr}.welcome-pane{display:none}.list-pane{border:0;min-height:calc(100vh - 100px)}.account .acct-text{display:none}.shortcut{display:none}.login-page{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh;padding:20px}.page-card{margin:10px 0}}
@media(max-width:520px){.main-area{padding:0}.topbar{height:64px;padding:0 10px}.top-actions{gap:1px}.top-icon{width:34px}.mail-layout{border-radius:0;border-left:0;border-right:0}.pane-head{padding:18px 16px}.message-list{padding:0 4px}.mail-row{grid-template-columns:36px 1fr 48px;padding:14px 8px;min-height:94px}.page-card{border-radius:0;padding:18px}.login-box{padding:28px 22px}.search{height:42px}}

/* ECHO SUPER functional UI */
a.account{color:inherit;text-decoration:none}.nav-label a{color:inherit;display:grid;place-items:center}.search-state{margin:0 18px 12px;padding:10px 12px;background:#fff8ef;border:1px solid #f0dfca;border-radius:10px;font-size:12px}.search-state a{float:right;color:#9b6a22}.empty-state{padding:35px;text-align:center;color:var(--muted)}
.mail-row-wrap{position:relative}.mail-row-wrap .mail-row{padding-right:46px}.row-star-form{position:absolute;right:18px;bottom:18px;z-index:3}.row-star-form .star-btn{padding:4px}.compose-actions,.message-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.inline-form{display:inline-flex}.secondary-btn{border:1px solid #eadfd3;background:#fffdfa;color:#36322e;border-radius:11px;padding:11px 15px;display:inline-flex;align-items:center;gap:7px;font-weight:700;cursor:pointer}.secondary-btn:hover{background:#fff6ea}.danger-btn{color:#9b2c23;border-color:#efc7c2}.page-sub{color:var(--muted);margin:6px 0 0}.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.contact-card{display:grid;grid-template-columns:42px 1fr 24px;gap:12px;align-items:center;padding:15px;border:1px solid #eee3d7;border-radius:14px;background:#fffdfa}.contact-card strong{display:block}.contact-card span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.report-grid,.settings-grid,.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.report-card,.setting-card{padding:20px;border:1px solid #eee3d7;border-radius:16px;background:#fffdfa}.report-top{display:flex;justify-content:space-between;gap:10px}.report-top span,.report-card small,.setting-card p{color:var(--muted)}.report-bar{height:9px;background:#f3e5d2;border-radius:99px;overflow:hidden;margin:16px 0 8px}.report-bar i{display:block;height:100%;background:var(--gold);border-radius:99px}.setting-card h3{margin-top:0}.setting-card dl{display:grid;grid-template-columns:90px 1fr;gap:8px;margin:0}.setting-card dt{color:var(--muted)}.setting-card dd{margin:0;font-weight:700}.segmented{display:flex;gap:8px;flex-wrap:wrap}.segmented button{border:1px solid #eadfd3;background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer}.folder-create{display:flex;gap:10px;margin-bottom:22px}.folder-create input{flex:1;border:1px solid #eadfd3;background:#fffdfa;border-radius:12px;padding:13px 14px}.folder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.folder-card{display:grid;grid-template-columns:28px 1fr 18px;align-items:center;gap:10px;padding:16px;border:1px solid #eee3d7;border-radius:14px;background:#fffdfa}.storage-ring{background:conic-gradient(var(--gold) calc(var(--pct)*1%),#f0dfc7 0)!important}
html.dark{--bg:#151310;--panel:#201d19;--line:#393229;--muted:#aaa198;--text:#f1ece6;--gold:#d6a34d;--green:#66b45e}html.dark body{background:linear-gradient(120deg,#17130f,#211b15 48%,#151412);color:var(--text)}html.dark .sidebar,html.dark .mail-layout,html.dark .list-pane,html.dark .welcome-pane,html.dark .page-card,html.dark .topbar{background-color:rgba(31,27,23,.93)}html.dark .search,html.dark .small-btn,html.dark .check-circle,html.dark .quick-card,html.dark .contact-card,html.dark .report-card,html.dark .setting-card,html.dark .folder-card,html.dark .secondary-btn,html.dark .form-grid input,html.dark .form-grid textarea{background:#29241e;color:#f2ece5;border-color:#443a30}html.dark .mail-row:hover{background:#2b251f}html.dark .mail-row.unread{background:#30271d}html.dark .nav-item.active{background:#30271d}html.dark .sidebar-foot{background:#211c17}html.dark .search input{color:#f1ece6}html.dark .shortcut{background:#342b21;color:#ddd0c2}html.dark .search-state{background:#30271d;border-color:#4a3b2c}.mobile-menu{border:0;background:transparent;cursor:pointer}
@media(max-width:900px){.sidebar.mobile-open{display:flex;position:fixed;z-index:1000;left:0;top:0;bottom:0;box-shadow:25px 0 60px rgba(0,0,0,.25)}.contact-grid,.report-grid,.settings-grid,.help-grid,.folder-grid{grid-template-columns:1fr}.folder-create{flex-direction:column}}

/* Star state: filled gold when IMAP \\Flagged is active */
.star-btn svg{fill:none;stroke:currentColor;transition:fill .15s ease,color .15s ease,transform .15s ease}
.star-btn.on{color:#d8940a}
.star-btn.on svg{fill:currentColor;stroke:currentColor}
.star-btn:hover svg{transform:scale(1.12)}
.attachment-picker{border:1px dashed #dcc7aa;background:#fffaf3;border-radius:14px;padding:14px}.attachment-picker>input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.attach-button{display:inline-flex!important;align-items:center;gap:8px;margin:0 0 10px!important;padding:10px 14px;border-radius:10px;background:#f3e4cf;cursor:pointer;font-size:13px!important}.attachment-list{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px;color:var(--muted);font-size:12px}.attachment-chip{display:inline-flex;gap:7px;align-items:center;background:#fff;border:1px solid #eadfd3;border-radius:999px;padding:7px 10px;color:#39342f}.attachment-chip small{color:var(--muted)}.attachment-picker>small{color:var(--muted)}.received-attachments{border-top:1px solid #eee3d7;padding-top:18px;margin-top:18px}.received-attachments>strong{display:flex;align-items:center;gap:7px}.attachment-downloads{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.attachment-download{min-width:190px;display:flex;flex-direction:column;gap:4px;border:1px solid #eadfd3;border-radius:12px;background:#fffaf3;padding:11px 13px;color:inherit}.attachment-download:hover{border-color:#d4ad72}.attachment-download small{color:var(--muted);font-size:11px}html.dark .attachment-picker,html.dark .attachment-chip,html.dark .attachment-download{background:#29241e;border-color:#443a30}

/* Trash bulk delete */
.bulk-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 18px 14px;padding:10px 12px;background:#fffaf3;border:1px solid #efe1d0;border-radius:12px}.bulk-select-all{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin-right:auto}.bulk-select-all input,.trash-check input{accent-color:#c58a2d}.bulk-toolbar button:disabled{opacity:.45;cursor:not-allowed}.trash-check{position:absolute;left:12px;top:41px;z-index:5;width:20px;height:20px;display:grid;place-items:center;cursor:pointer}.mail-row.with-check{padding-left:42px}.mail-row.with-check.unread:before{left:29px}.mail-row-wrap:has(.trash-check){position:relative}html.dark .bulk-toolbar{background:#29241e;border-color:#443a30}@media(max-width:520px){.bulk-toolbar{margin:0 8px 10px}.bulk-toolbar .secondary-btn{padding:9px 10px;font-size:12px}}

.folder-card-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:stretch}.folder-card-wrap .folder-card{grid-template-columns:28px 1fr 18px;min-width:0}.folder-delete-form{display:flex}.folder-delete-btn{width:44px;border:1px solid #efc7c2;background:#fffdfa;color:#9b2c23;border-radius:14px;display:grid;place-items:center;cursor:pointer;transition:.18s ease}.folder-delete-btn:hover{background:#fff0ed;transform:translateY(-1px)}.empty-folders{grid-column:1/-1;color:var(--muted);padding:18px;border:1px dashed #e7d8c8;border-radius:14px;text-align:center}html.dark .folder-delete-btn{background:#29241e;border-color:#604139;color:#ef9c91}html.dark .folder-delete-btn:hover{background:#3a2722}html.dark .empty-folders{border-color:#443a30}

.message-body-html{display:block;width:100%;max-width:none;white-space:normal;overflow:visible}.email-frame{display:block;width:100%!important;max-width:100%!important;height:1px;min-height:0;border:0!important;background:#fff;border-radius:0;overflow:hidden!important}
/* Robust HTML email viewport */
.message-body-html{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important}
.email-frame{display:block!important;width:100%!important;max-width:none!important;min-width:100%!important;height:320px;min-height:320px;border:0!important;background:#fff!important;overflow:hidden!important}

/* HTML email rendered directly: no iframe, no internal scrollbars */
.email-content{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;white-space:normal!important}
.email-content table{max-width:100%!important}
.email-content img{max-width:100%!important;height:auto}
.email-content td,.email-content th{max-width:100%}
.email-content a{cursor:pointer}

/* Read/unread distinction: keep unread messages bold, show read messages as read. */
.mail-row:not(.unread) .sender,
.mail-row:not(.unread) .subject{font-weight:400;color:#5f5a54}
html.dark .mail-row:not(.unread) .sender,
html.dark .mail-row:not(.unread) .subject{color:#b8afa6}