:root{
  --bg:#eef3fb;
  --surface:#ffffff;
  --surface-soft:#f8faff;
  --surface-muted:#f3f6fc;
  --line:#e2e9f5;
  --line-strong:#d3ddf0;
  --text:#1d2c4e;
  --muted:#7381a1;
  --primary:#3f78ff;
  --primary-2:#6d55ff;
  --primary-soft:#edf2ff;
  --success:#34b86e;
  --danger:#e85d75;
  --shadow:0 18px 48px rgba(38,57,105,.10);
  --shadow-strong:0 32px 80px rgba(27,42,79,.16);
  --radius-xl:30px;
  --radius-lg:20px;
  --radius-md:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#f6f8fd 0%,#eef3fb 100%)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* LOGIN */
.body-login{display:grid;place-items:center;padding:30px}
.login-shell{width:min(1180px,100%)}
.login-card{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.84);border-radius:34px;overflow:hidden;box-shadow:var(--shadow-strong)}
.refined-login .login-form-pane{padding:44px 44px 40px;background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)}
.login-brand.compact{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.logo-box{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;color:#fff;font-size:25px;box-shadow:0 18px 32px rgba(79,98,255,.24)}
.login-brand h1{margin:0;font-size:34px;line-height:1}.login-brand p{margin:8px 0 0;color:var(--muted)}
.login-copy h2{font-size:38px;line-height:1.08;margin:10px 0 14px}.login-copy p{margin:0 0 24px;color:var(--muted);line-height:1.75;font-size:16px;max-width:520px}
.hero-badge{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:600}.hero-badge.light{background:#eef2ff;color:#4f63d8}
.login-form.refined{padding:0;max-width:520px}.login-form label,.field-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.login-form span,.field-wrap>span,.field-wrap>label{font-size:13px;font-weight:600;color:#5a6989}
.login-form input,.field-wrap input,.field-wrap select{width:100%;height:52px;border:1px solid var(--line);background:#fafcff;border-radius:16px;padding:0 16px;outline:none;transition:border-color .16s, box-shadow .16s, background .16s;color:var(--text)}
.login-form input:focus,.field-wrap input:focus,.field-wrap select:focus{border-color:#97b1ff;box-shadow:0 0 0 4px rgba(80,105,255,.12);background:#fff}
.primary-btn{height:52px;border:0;border-radius:16px;background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;font-weight:700;padding:0 20px;box-shadow:0 16px 30px rgba(82,105,255,.26)}
.form-error{padding:12px 14px;border-radius:14px;background:#fff0f4;color:#aa3550;border:1px solid #ffd2dd;margin-bottom:16px}
.login-note{display:block;margin-top:12px;color:var(--muted);line-height:1.6}
.login-hero.refined{padding:46px 46px 42px;background:linear-gradient(135deg,#122c66 0%,#324aa9 48%,#5047d0 100%);color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-hero.refined:before{content:"";position:absolute;inset:auto -80px -120px auto;width:260px;height:260px;background:rgba(255,255,255,.08);border-radius:50%}
.login-hero.refined h2{font-size:46px;line-height:1.06;margin:16px 0 16px;max-width:420px}.login-hero.refined p{font-size:16px;line-height:1.75;color:rgba(255,255,255,.86);max-width:460px}
.hero-feature-list{display:grid;gap:16px;margin-top:28px;position:relative;z-index:1}.hero-feature{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.08)}.hero-feature b{display:block;margin-bottom:6px;font-size:15px}.hero-feature span{color:rgba(255,255,255,.82);font-size:14px;line-height:1.5}

/* APP */
.body-app{overflow:hidden}
.app-shell{display:flex;height:100vh;padding:16px}
.sidebar{width:276px;background:linear-gradient(180deg,#f7faff 0%,#f3f7fd 100%);border:1px solid #e4ebf7;border-right:0;border-radius:28px 0 0 28px;padding:18px 16px;position:relative}
.brand-row{display:flex;align-items:center;gap:14px;padding:4px 8px 18px}.brand-mark{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;color:#fff;font-size:21px;box-shadow:0 18px 30px rgba(79,98,255,.22)}.brand-row strong{display:block;font-size:26px;letter-spacing:-.02em}.brand-row small{display:block;color:var(--muted);margin-top:4px}
.compose-btn{width:100%;height:58px;border:0;border-radius:18px;display:flex;align-items:center;gap:14px;padding:0 18px;background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 16px 30px rgba(82,105,255,.22);margin-bottom:18px;font-weight:700}.compose-btn span{width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.17);display:grid;place-items:center;font-size:18px}
.folder-nav{display:grid;gap:7px;padding-right:2px;max-height:calc(100vh - 300px);overflow:auto}.folder-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:#314261;transition:.15s;border:1px solid transparent}.folder-link:hover{background:rgba(255,255,255,.85)}.folder-link.active{background:#fff;border-color:#d7e1f4;box-shadow:0 8px 18px rgba(18,40,80,.05);color:#2f53d8;font-weight:700}.folder-icon{width:16px;text-align:center;color:#7d89a6}.folder-count{margin-left:auto;font-size:13px;color:#6f7da0}
.mail-status-card{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.status-line{display:flex;align-items:center;gap:12px}.status-line strong{display:block;font-size:15px}.status-line small{display:block;color:var(--muted);margin-top:4px}.status-dot{width:11px;height:11px;border-radius:50%;background:#d4dcec}.status-dot.online{background:var(--success);box-shadow:0 0 0 6px rgba(52,184,110,.13)}.status-dot.error{background:var(--danger);box-shadow:0 0 0 6px rgba(232,93,117,.13)}.status-meta{display:flex;justify-content:space-between;align-items:center;padding-top:14px;margin-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.status-meta b{font-size:18px;color:var(--text)}
.workspace{flex:1;background:#fff;border:1px solid #e4ebf7;border-radius:0 28px 28px 0;overflow:hidden;box-shadow:var(--shadow-strong)}
.topbar{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.search-box{width:min(480px,100%);height:48px;border:1px solid var(--line);border-radius:16px;background:#fbfcff;display:flex;align-items:center;gap:10px;padding:0 14px}.search-icon{color:#7b88a6;font-size:18px}.search-box input{border:0;outline:none;background:transparent;flex:1;color:var(--text);font-size:15px}.ghost-icon{border:0;background:none;color:#94a0ba;font-size:18px;width:26px;height:26px}
.top-actions{display:flex;align-items:center;gap:12px}.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#5d6d8f;display:grid;place-items:center;font-size:18px}.icon-btn:hover{background:var(--surface-soft)}
.profile-menu{position:relative}.profile-trigger{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;border-radius:18px;padding:8px 12px 8px 8px;min-width:228px}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d8e2ff,#ddfff0);color:#4a60d1;font-weight:800}.profile-meta{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.profile-meta strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.profile-meta small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.chev{margin-left:auto;color:#7f8ca8}
.profile-dropdown{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-strong);display:none;padding:8px}.profile-dropdown.show{display:block}.profile-dropdown a{display:block;padding:12px 14px;border-radius:12px}.profile-dropdown a:hover{background:#f5f8ff}
.columns{display:grid;grid-template-columns:360px 1fr;height:calc(100vh - 90px)}
.message-list-panel{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 18px 10px}.panel-head h2{margin:0;font-size:22px;line-height:1.1}.panel-head small{color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 18px 12px}.filters button{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#5f6e8d}.filters .active{background:var(--primary-soft);border-color:#d5e0ff;color:#3f56d8;font-weight:700}
.messages{overflow:auto;padding:0 12px 18px}.message{display:grid;grid-template-columns:10px 42px 1fr 54px;gap:12px;padding:14px 12px;border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:10px;transition:.16s;cursor:pointer}.message:hover,.message.active{border-color:#cfdbf4;box-shadow:0 10px 22px rgba(17,39,79,.06);background:#fbfcff}.message-dot{width:8px;height:8px;border-radius:50%;background:#5a6eff;margin-top:18px}.message:not(.unread) .message-dot{background:#d7ddee}.bubble{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,#316fff,#764bff)}.message h4,.message .subject,.message p{margin:0}.message h4{font-size:14px;line-height:1.35}.message .subject{font-weight:700;margin-top:4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message p{margin-top:5px;font-size:12px;line-height:1.45;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta{text-align:right;color:var(--muted);font-size:11px}.star{font-size:18px;color:#ffb223;margin-top:14px}
.reader-panel{display:flex;flex-direction:column;min-width:0}.reader-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;height:60px;padding:0 16px;border-bottom:1px solid var(--line)}.reader-tools button{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:13px;background:#fff;color:#5f6d8d}.reader-tools button:hover{background:#f7f9fe}
.reader-content{padding:24px 28px;overflow:auto}.empty-state{display:grid;place-items:center;height:100%;min-height:480px;text-align:center;color:#95a2bc}.empty-state-icon{width:64px;height:64px;border-radius:22px;background:#edf1fb;color:#5267ff;display:grid;place-items:center;font-size:30px;margin-bottom:12px}.empty-state h3{margin:0 0 8px;font-size:18px;color:#4f638b}.empty-state p{margin:0}
.mail-title h1{margin:0;font-size:31px;letter-spacing:-.02em}.sender{display:flex;align-items:center;gap:14px;margin:24px 0 18px}.sender .info{flex:1;min-width:0}.sender small{color:var(--muted);line-height:1.45}.mail-body{max-width:900px;line-height:1.8;color:#24324f}.attachments{display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:24px;padding-top:18px}.attachment{display:flex;justify-content:space-between;align-items:center;gap:14px;min-width:250px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff}.quick-reply{margin-top:30px;padding:18px;border:1px dashed #cad4ec;border-radius:16px;background:#fbfcff;color:#8090ad;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(13,22,42,.46);display:none;align-items:center;justify-content:center;padding:24px;z-index:30}.modal.show{display:flex}.modal-card{background:#fff;border-radius:24px;box-shadow:var(--shadow-strong);overflow:hidden;width:min(820px,92vw)}.compose-window{max-width:820px}.settings-window{max-width:720px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 22px;border-bottom:1px solid var(--line)}.modal-head strong{display:block;font-size:20px}.modal-head small{display:block;color:var(--muted);margin-top:4px}.close-btn{width:38px;height:38px;border-radius:14px;border:1px solid var(--line);background:#fff;color:#7484a2;font-size:24px}
.compose-form{padding:20px 22px 22px}.editor{min-height:210px;border:1px solid var(--line);border-radius:16px;background:#fbfcff;padding:14px;outline:none}.editor:focus{border-color:#9db0ff;box-shadow:0 0 0 4px rgba(83,103,255,.12);background:#fff}.compose-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-top:18px}.file-picker{display:flex;flex-direction:column;gap:8px;color:#596785;font-size:13px}
.has-suggestions{position:relative}.suggestions{position:absolute;top:100%;left:0;right:0;display:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:220px;overflow:auto;z-index:5}.suggestions.show{display:block}.suggestion-item{padding:11px 14px;border-bottom:1px solid #f0f3fa;cursor:pointer}.suggestion-item:last-child{border-bottom:0}.suggestion-item:hover{background:#f7f9fe}.suggestion-item strong{display:block;font-size:14px}.suggestion-item small{color:var(--muted)}
.settings-grid{display:grid;gap:14px;padding:20px 22px 10px}.toggle-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fbfcff}.toggle-row strong{display:block;margin-bottom:4px}.toggle-row small{display:block;color:var(--muted);line-height:1.55}.toggle-row input{width:18px;height:18px;margin-top:2px}.settings-note{margin:0 22px 6px;padding:16px 18px;border-radius:16px;background:#f4f7ff;color:#566680;line-height:1.65}.modal-actions{padding:16px 22px 22px;display:flex;justify-content:flex-end}
#toast{position:fixed;right:18px;bottom:18px;max-width:420px;padding:14px 16px;border-radius:16px;background:#111a34;color:#fff;display:none;box-shadow:0 20px 40px rgba(17,26,52,.34);z-index:40}
.empty-inline{padding:18px;border:1px dashed #d5ddee;border-radius:16px;background:#fbfcff;color:#8491ad;text-align:center;margin:0 6px 12px}

@media (max-width:1180px){.login-card{grid-template-columns:1fr}.login-hero.refined{order:-1}.columns{grid-template-columns:330px 1fr}}
@media (max-width:920px){.app-shell{padding:0}.sidebar{display:none}.workspace{border-radius:0;height:100vh}.columns{grid-template-columns:1fr}.reader-panel{display:none}.topbar{padding:0 12px}.profile-trigger{min-width:unset}.profile-meta{display:none}}

/* 0.2 visual refinement */
.login-hero.with-envelope{background-image:linear-gradient(135deg,rgba(18,44,102,.88),rgba(80,71,208,.88)),url('login-envelope.png');background-size:cover;background-position:center;isolation:isolate}
.login-hero.with-envelope:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,35,86,.05),rgba(14,35,86,.45));z-index:-1}
.login-hero.with-envelope .hero-feature-list{max-width:460px}
.columns{grid-template-columns:470px 1fr}
.message-list-panel{background:#fff}
.panel-head{padding:20px 22px 12px}
.filters{padding:0 22px 12px}
.messages{padding:0 14px 18px}
.message{grid-template-columns:12px 44px minmax(0,1fr) 64px;border-radius:16px;padding:14px 14px;margin-bottom:7px;box-shadow:none}
.message:hover,.message.active{background:#f8faff;border-color:#b9c8f2;box-shadow:0 8px 22px rgba(42,63,116,.08)}
.message h4{font-size:14px}.message .subject{font-size:13px}.message p{font-size:12px}
.reader-tools{height:66px;padding:0 22px;gap:12px}.reader-tools button{background:#fff;padding:0 15px}
.reader-content{padding:28px 34px}
@media (max-width:1280px){.columns{grid-template-columns:420px 1fr}}

/* 0.2.1 — pixel-precise interface aligned to approved references */
html,body{background:#f7f9fd}
.body-app{background:#f7f9fd}
.app-shell{padding:0;height:100vh;gap:0;border:1px solid #dfe6f2;border-radius:26px;overflow:hidden;background:#fff}
.sidebar{width:292px;border:0;border-right:1px solid #e5eaf4;border-radius:0;padding:20px 24px 22px;background:linear-gradient(180deg,#fbfdff 0%,#f5f8ff 100%)}
.workspace{border:0;border-radius:0;box-shadow:none}
.brand-row{padding:0 2px 28px;gap:14px}.brand-row strong{font-size:25px}.brand-row small{font-size:12px}
.brand-mark{width:44px;height:44px;border-radius:14px}.brand-mark svg,.logo-box svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.plane-mark{background:transparent;box-shadow:none;color:#5165ff}.plane-mark svg{width:40px;height:40px;fill:#5165ff;stroke:#5165ff}
.compose-btn{height:56px;border-radius:12px;margin-bottom:18px;padding:0 20px;font-size:15px}.compose-btn span{background:transparent;width:auto;height:auto;font-size:24px}
.folder-nav{gap:4px}.folder-link{height:50px;border-radius:12px;padding:0 14px}.folder-link.active{background:linear-gradient(90deg,#edf2ff,#f7f9ff);border-color:#dfe6f7;box-shadow:none}.folder-icon{width:22px;height:22px}.folder-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mail-status-card{left:24px;right:24px;bottom:24px;border-radius:14px;padding:18px;box-shadow:none}
.topbar{height:88px;padding:0 26px;border-bottom:1px solid #e6ebf4}
.search-box{width:480px;height:50px;border-radius:14px;background:#fbfcff}.top-actions{gap:14px}.icon-btn{width:46px;height:46px;border-radius:14px}.profile-trigger{height:56px;border-radius:14px;min-width:260px}
.columns{grid-template-columns:480px 1fr;height:calc(100vh - 89px)}
.message-list-panel{background:#fff}.panel-head{padding:24px 26px 14px;align-items:center}.panel-head h2{font-size:23px}.panel-head small{display:none}
.filters{display:none}
.messages{padding:0 14px 18px}
.message{min-height:92px;grid-template-columns:22px 46px minmax(0,1fr) 62px;gap:12px;margin:0;border:0;border-bottom:1px solid #e7ecf4;border-radius:0;padding:18px 14px;background:#fff}
.message:first-child{border-top:1px solid #e7ecf4}.message:hover,.message.active{border:1px solid #bcd0ff;border-radius:12px;background:linear-gradient(90deg,#f7f9ff,#fbfcff);box-shadow:none;margin:0 0 0 0}.message.active+.message{border-top-color:transparent}
.message-dot{width:15px;height:15px;border:1px solid #c5cfe2;border-radius:4px;background:#fff;margin-top:15px}.message.unread .message-dot:after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:#4e6dff;margin:4px}
.message .bubble{width:46px;height:46px;font-size:16px}.message h4{font-size:14px}.message .subject{font-size:14px;margin-top:3px}.message p{font-size:13px;margin-top:5px}.meta{font-size:12px}.star{font-size:20px;margin-top:15px}
.reader-tools{height:76px;padding:0 28px;gap:10px}.reader-tools button{height:42px;border-radius:11px;padding:0 16px;font-size:14px}
.reader-content{padding:28px 34px}.empty-state{min-height:calc(100vh - 220px)}.empty-state-icon{width:66px;height:66px;border-radius:22px}
.mail-title h1{font-size:28px}.sender{margin-top:26px}.mail-body{font-size:15px}.attachment{border-radius:12px}.quick-reply{border-style:solid;border-radius:14px}
.modal-card{border-radius:20px}.modal-head{padding:20px 24px}.compose-form{padding:20px 24px 24px}.settings-grid{padding:20px 24px 10px}.settings-note{margin-left:24px;margin-right:24px}

/* Login page: exact two-panel proportions and envelope artwork */
.body-login{padding:40px;background:radial-gradient(circle at 15% 20%,rgba(103,126,255,.08),transparent 24%),linear-gradient(180deg,#f6f8ff 0%,#eef3fb 100%)}
.login-shell{width:min(1240px,calc(100vw - 80px))}
.login-card{grid-template-columns:1fr 1fr;min-height:760px;border-radius:28px}
.refined-login .login-form-pane{padding:50px 52px 44px}
.login-brand.compact{margin-bottom:42px}.login-brand h1{font-size:40px}.login-brand p{font-size:14px}.logo-box{width:64px;height:64px;border-radius:18px}.logo-box svg{width:34px;height:34px}
.login-copy h2{font-size:44px;max-width:560px}.login-copy p{font-size:17px;max-width:530px}
.login-form.refined{max-width:520px}.login-form input{height:56px}.primary-btn{height:58px;font-size:17px}
.login-hero.with-envelope{background-image:linear-gradient(135deg,rgba(14,39,111,.08),rgba(61,46,218,.12)),url('login-hero-envelope.png');background-size:cover;background-position:center;border-radius:0 28px 28px 0;padding:52px 46px}
.login-hero.with-envelope:after{display:none}.login-hero.refined h2{font-size:46px;max-width:450px}.login-hero.refined p{max-width:470px}
.hero-feature-list{margin-top:38px;max-width:430px!important}.hero-feature{padding:18px 20px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}

@media (max-width:1280px){.columns{grid-template-columns:420px 1fr}.sidebar{width:270px}.login-shell{width:min(1120px,calc(100vw - 48px))}}
@media (max-width:980px){.login-card{grid-template-columns:1fr}.login-hero.with-envelope{display:none}.login-shell{width:min(640px,calc(100vw - 30px))}.refined-login .login-form-pane{padding:36px}.sidebar{display:none}.columns{grid-template-columns:1fr}.reader-panel{display:none}}

/* 0.2.2 FINAL UI FIX — removes duplicated raster text and aligns all screens */
.body-login{background:
  radial-gradient(circle at 8% 18%,rgba(86,112,255,.09),transparent 18%),
  radial-gradient(circle at 92% 20%,rgba(111,91,255,.08),transparent 20%),
  linear-gradient(180deg,#f7f9ff,#edf3fb)}
.login-hero.with-envelope{
  background:linear-gradient(145deg,#102b73 0%,#2447c3 45%,#4935df 100%);
  position:relative;overflow:hidden;isolation:isolate
}
.login-hero.with-envelope:before{
  content:"";position:absolute;right:-35px;top:148px;width:290px;height:210px;
  border-radius:24px 24px 30px 30px;
  background:linear-gradient(145deg,#305bff,#3b2de0);
  transform:rotate(-7deg);box-shadow:0 28px 60px rgba(12,25,101,.36);z-index:-1
}
.login-hero.with-envelope:after{
  display:block;content:"";position:absolute;right:4px;top:105px;width:170px;height:118px;
  border-radius:18px;background:linear-gradient(145deg,#fff,#e8ecff);
  transform:rotate(15deg);box-shadow:0 24px 40px rgba(4,17,82,.28);z-index:-1
}
.login-hero.with-envelope .hero-feature-list{position:relative;z-index:2}
.login-card{min-height:720px}
.refined-login .login-form-pane{display:flex;flex-direction:column;justify-content:center}
.login-copy h2{font-size:42px}.login-hero.refined h2{font-size:44px}

.compose-premium{width:min(1040px,94vw);max-width:1040px}
.compose-head{align-items:center}.window-actions{display:flex;gap:8px;align-items:center}.window-action{width:36px;height:36px;border:0;background:transparent;color:#73809f;font-size:18px}
.compose-grid{padding:16px 22px 20px}
.compose-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:58px;border-bottom:1px solid var(--line);position:relative}
.compose-row>label{font-weight:700;color:#33415f}.compose-row input,.from-select{height:44px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:#fff;outline:none;color:var(--text)}
.compose-row input:focus{border-color:#9db0ff;box-shadow:0 0 0 4px rgba(83,103,255,.1)}
.from-select{display:flex;align-items:center}.recipient-links{display:flex;gap:14px}.recipient-links button{border:0;background:none;color:#365dff;padding:6px;font-weight:600}
.hidden-row{display:none}
.compose-editor-wrap{position:relative;margin-top:16px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.compose-editor-wrap .editor{min-height:330px;border:0;border-radius:0;background:#fff;padding:20px}.editor:empty:before,.signature-editor:empty:before{content:attr(data-placeholder);color:#a2adc3}
.signature-status{position:absolute;right:16px;bottom:14px;padding:7px 11px;border-radius:999px;background:#f2f6ff;color:#52658e;font-size:12px}
.compose-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px}.tool-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tool-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#51617e;display:grid;place-items:center}.attach-btn input{display:none}.send-btn{min-width:160px;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.compose-row .suggestions{top:50px;left:100px;right:0}

.settings-premium{width:min(1120px,94vw);max-width:1120px}
.settings-tabs{display:flex;gap:8px;padding:14px 20px 0;border-bottom:1px solid var(--line)}.settings-tab{height:42px;padding:0 16px;border:0;background:transparent;color:#6b7998;border-bottom:2px solid transparent;font-weight:700}.settings-tab.active{color:#3159ec;border-bottom-color:#3159ec}
.settings-panel{display:none}.settings-panel.active{display:block}
.signature-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;padding:20px}.signature-editor-card,.signature-preview-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:18px}.signature-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.signature-toolbar{display:flex;gap:8px;padding:12px 0}.signature-toolbar button{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:10px}.signature-editor{min-height:220px;border:1px solid var(--line);border-radius:14px;padding:16px;outline:none;background:#fbfcff}.signature-editor:focus{background:#fff;border-color:#9db0ff;box-shadow:0 0 0 4px rgba(83,103,255,.1)}
.toggle-row.compact{padding:12px 14px;margin-top:10px}.signature-preview-card>strong{display:block;font-size:18px}.signature-preview-card>small{display:block;color:var(--muted);margin:5px 0 16px}.signature-preview{min-height:390px;border:1px solid var(--line);border-radius:14px;padding:18px;background:#fbfcff}.preview-empty{color:#9aa6bc}
.ajaxmail-signature{margin-top:18px;color:#293955}

/* Mail list closer to the approved reference */
.columns{grid-template-columns:470px minmax(0,1fr)}
.message{min-height:88px;padding:15px 14px;grid-template-columns:20px 46px minmax(0,1fr) 62px}
.message:hover,.message.active{margin:0;border-radius:12px}
.reader-tools{background:#fff}.reader-content{max-width:none}

@media(max-width:1180px){.signature-layout{grid-template-columns:1fr}.signature-fields{grid-template-columns:1fr}.compose-row{grid-template-columns:72px minmax(0,1fr)}.recipient-links{grid-column:2}}

/* 0.2.3 COMPACT REFINEMENT */
html{font-size:14px}
body{font-size:14px}
.body-login{padding:26px}
.login-shell{width:min(1120px,calc(100vw - 52px))}
.login-card{min-height:640px;border-radius:24px}
.refined-login .login-form-pane{padding:38px 40px 34px}
.login-brand.compact{margin-bottom:28px;gap:14px}
.logo-box{width:58px;height:58px;border-radius:16px}.logo-box svg{width:28px;height:28px}
.login-brand h1{font-size:32px}.login-brand p{font-size:13px}
.hero-badge,.hero-badge.light{height:30px;padding:0 12px;font-size:12px}
.login-copy h2{font-size:32px;line-height:1.12;margin:10px 0 12px;max-width:420px}
.login-copy p{font-size:14px;line-height:1.65;max-width:440px;margin-bottom:18px}
.login-form.refined{max-width:460px}.login-form label,.field-wrap{gap:6px;margin-bottom:14px}
.login-form span,.field-wrap>span,.field-wrap>label{font-size:12px}
.login-form input,.field-wrap input,.field-wrap select{height:46px;border-radius:13px;padding:0 14px}
.primary-btn{height:48px;border-radius:13px;padding:0 18px;font-size:15px}
.login-note{font-size:12px;margin-top:10px}
.login-hero.with-envelope{padding:38px 36px !important;border-radius:0 24px 24px 0;background-image:linear-gradient(145deg,#16368a 0%,#2646c7 45%,#4d3ced 100%) !important;background-size:auto !important;background-position:center !important}
.login-hero.with-envelope:before{right:-24px;top:142px;width:250px;height:180px;border-radius:20px;transform:rotate(-8deg)}
.login-hero.with-envelope:after{right:10px;top:108px;width:152px;height:108px;border-radius:16px;transform:rotate(16deg)}
.login-hero.refined h2{font-size:34px;line-height:1.14;max-width:360px;margin:14px 0}
.login-hero.refined p{font-size:14px;line-height:1.7;max-width:390px}
.hero-feature-list{gap:12px;margin-top:24px;max-width:380px !important}.hero-feature{padding:14px 16px;border-radius:16px}.hero-feature b{font-size:14px;margin-bottom:4px}.hero-feature span{font-size:13px;line-height:1.5}

.app-shell{padding:8px}
.sidebar{width:238px;border-radius:20px 0 0 20px;padding:14px 12px}
.brand-row{gap:12px;padding:2px 6px 14px}.brand-mark{width:38px;height:38px;border-radius:12px}.plane-mark svg{width:30px;height:30px}.brand-row strong{font-size:16px}.brand-row small{font-size:11px}
.compose-btn{height:44px;border-radius:10px;margin-bottom:12px;padding:0 14px;font-size:14px;gap:10px}.compose-btn span{font-size:18px}
.folder-nav{gap:2px;max-height:calc(100vh - 220px)}.folder-link{height:42px;padding:0 12px;border-radius:10px;font-size:14px}.folder-count{font-size:12px}
.mail-status-card{left:12px;right:12px;bottom:12px;padding:12px;border-radius:12px}.status-line strong{font-size:13px}.status-line small,.status-meta{font-size:11px}.status-meta b{font-size:15px}
.workspace{border-radius:0 20px 20px 0}
.topbar{height:62px;padding:0 14px}.search-box{width:400px;height:40px;border-radius:12px;padding:0 12px}.search-box input{font-size:14px}.search-icon{font-size:16px}
.top-actions{gap:10px}.icon-btn{width:36px;height:36px;border-radius:11px;font-size:16px}
.profile-trigger{min-width:210px;height:44px;border-radius:12px;padding:6px 10px 6px 6px;gap:10px}.avatar{width:32px;height:32px;font-size:13px}.profile-meta strong{font-size:13px;max-width:120px}.profile-meta small{font-size:12px;max-width:120px}
.columns{grid-template-columns:390px minmax(0,1fr);height:calc(100vh - 78px)}
.panel-head{padding:16px 16px 10px}.panel-head h2{font-size:17px}.messages{padding:0 10px 12px}
.message{min-height:72px;grid-template-columns:16px 38px minmax(0,1fr) 52px;gap:10px;padding:12px 10px}.message .bubble{width:38px;height:38px;font-size:14px}.message h4{font-size:13px}.message .subject{font-size:13px}.message p{font-size:12px;line-height:1.35}.message-dot{width:13px;height:13px;margin-top:12px}.message.unread .message-dot:after{margin:3px}.meta{font-size:11px}.star{font-size:17px;margin-top:10px}
.reader-tools{height:58px;padding:0 16px;gap:8px}.reader-tools button{height:34px;padding:0 12px;border-radius:10px;font-size:13px}
.reader-content{padding:20px 22px}.mail-title h1{font-size:22px}.sender{margin:18px 0 14px;gap:12px}.mail-body{font-size:14px;line-height:1.7}.attachments{gap:10px;margin-top:18px;padding-top:14px}.attachment{min-width:220px;padding:12px 14px;border-radius:12px;font-size:13px}.quick-reply{margin-top:18px;padding:14px;border-radius:12px;font-size:13px}.empty-state{min-height:360px}.empty-state-icon{width:54px;height:54px;font-size:24px;border-radius:18px}

.modal{padding:16px}.modal-card{border-radius:18px}.modal-head{padding:14px 16px}.modal-head strong{font-size:17px}.modal-head small{font-size:12px}.close-btn{width:34px;height:34px;border-radius:10px;font-size:22px}
.compose-premium{width:min(920px,94vw);max-width:920px}.compose-grid{padding:12px 16px 16px}.compose-row{grid-template-columns:72px minmax(0,1fr) auto;gap:10px;min-height:48px}.compose-row>label{font-size:13px}.compose-row input,.from-select{height:38px;border-radius:10px;padding:0 12px;font-size:13px}.recipient-links{gap:10px}.recipient-links button{font-size:12px;padding:4px 0}.compose-editor-wrap{margin-top:12px;border-radius:14px}.compose-editor-wrap .editor{min-height:220px;padding:14px;font-size:14px}.signature-status{right:12px;bottom:10px;padding:6px 10px;font-size:11px}.compose-toolbar{padding-top:10px;gap:10px}.tool-group{gap:6px}.tool-btn{width:34px;height:34px;border-radius:10px;font-size:14px}.send-btn{min-width:132px;padding:0 14px}.compose-row .suggestions{top:42px;left:82px;border-radius:12px}
.settings-premium{width:min(960px,94vw);max-width:960px}.settings-tabs{padding:10px 14px 0}.settings-tab{height:36px;padding:0 12px;font-size:13px}.settings-grid{gap:12px;padding:14px 16px 8px}.toggle-row{padding:12px 14px;border-radius:12px}.toggle-row strong{font-size:13px}.toggle-row small{font-size:12px}.settings-note{margin:0 16px 4px;padding:12px 14px;border-radius:12px;font-size:12px;line-height:1.55}.modal-actions{padding:12px 16px 16px}
.signature-layout{gap:14px;padding:14px}.signature-editor-card,.signature-preview-card{padding:14px;border-radius:14px}.signature-fields{gap:10px}.signature-toolbar{gap:6px;padding:10px 0}.signature-toolbar button{width:34px;height:34px;border-radius:9px}.signature-editor{min-height:180px;border-radius:12px;padding:12px;font-size:14px}.signature-preview-card>strong{font-size:16px}.signature-preview{min-height:300px;border-radius:12px;padding:14px;font-size:13px}
.profile-dropdown{border-radius:12px;padding:6px;min-width:190px}.profile-dropdown a{padding:10px 12px;border-radius:10px;font-size:13px}
#toast{right:12px;bottom:12px;max-width:340px;padding:12px 14px;border-radius:12px;font-size:13px}

@media(max-width:1180px){
  .login-shell{width:min(1000px,calc(100vw - 30px))}
  .columns{grid-template-columns:340px minmax(0,1fr)}
  .sidebar{width:218px}
  .search-box{width:340px}
}
@media(max-width:980px){
  .body-login{padding:16px}
  .login-shell{width:min(620px,calc(100vw - 20px))}
  .login-card{min-height:auto}
  .refined-login .login-form-pane{padding:28px 24px}
  .login-copy h2,.login-hero.refined h2{font-size:28px}
  .sidebar{display:none}
  .workspace{border-radius:16px}
  .columns{grid-template-columns:1fr}
  .reader-panel{display:none}
  .profile-trigger{min-width:auto}
}

/* 0.2.5 LOGIN REBUILD + STANDARD FOLDER MANAGEMENT */
.body-login{padding:24px;background:linear-gradient(180deg,#f5f8ff 0%,#edf3fb 100%)}
.login-shell{width:min(1080px,calc(100vw - 40px))}
.login-card{min-height:620px;grid-template-columns:1fr 1fr;border-radius:24px;box-shadow:0 24px 70px rgba(28,45,88,.14)}
.refined-login .login-form-pane{padding:42px 44px;justify-content:center}
.login-brand.compact{margin-bottom:30px}.login-copy h2{font-size:34px;max-width:430px}.login-copy p{font-size:14px;max-width:440px}.login-form.refined{max-width:440px}
.login-hero.with-envelope{padding:42px 40px!important;background:linear-gradient(145deg,#17327e 0%,#284bc4 50%,#4b3de5 100%)!important;border-radius:0 24px 24px 0;isolation:isolate}
.login-hero.with-envelope:before,.login-hero.with-envelope:after{display:none!important}
.login-hero.with-envelope .hero-badge,.login-hero.with-envelope h2,.login-hero.with-envelope>p,.login-hero.with-envelope .hero-feature-list{position:relative;z-index:3;max-width:390px}
.login-hero.with-envelope h2{font-size:36px;line-height:1.12;margin:16px 0 14px}
.login-hero.with-envelope>p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.87)}
.login-hero.with-envelope .hero-feature-list{gap:12px;margin-top:28px}
.login-hero.with-envelope .hero-feature{padding:14px 16px;border-radius:15px;background:rgba(255,255,255,.11)}
.login-hero.with-envelope .hero-feature b{font-size:14px}.login-hero.with-envelope .hero-feature span{font-size:12px}
.login-hero.with-envelope .mail-art{display:none}
.login-hero.with-envelope{background-image:
 radial-gradient(circle at 88% 18%,rgba(255,255,255,.16) 0 2px,transparent 3px),
 linear-gradient(145deg,#17327e 0%,#284bc4 50%,#4b3de5 100%)!important}
.login-hero.with-envelope::marker{display:none}
.login-hero.with-envelope .hero-feature-list::after{content:"";position:absolute;right:-135px;top:-245px;width:210px;height:145px;border-radius:18px;background:linear-gradient(145deg,#fff,#e7ebff);transform:rotate(16deg);box-shadow:0 24px 45px rgba(7,18,83,.28);opacity:.96;z-index:-1}

.folder-section-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;color:#7b88a5;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.folder-section-head button{width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:#60708f;font-size:18px;display:grid;place-items:center}
.folder-section-head button:hover{background:#fff}
.folder-actions{display:none;grid-template-columns:1fr 1fr;gap:6px;margin:8px 2px 0}
.folder-actions.show{display:grid}
.folder-actions button{height:32px;border:1px solid var(--line);background:#fff;border-radius:9px;color:#60708f;font-size:11px}
.folder-actions button:last-child{color:#c64c66}
.compact-dialog{width:min(430px,92vw)}
.dialog-body{padding:16px 18px 4px}
.compact-dialog .modal-actions{padding:12px 18px 18px}
.compact-dialog .primary-btn{min-width:110px}

@media(max-width:900px){
 .login-card{grid-template-columns:1fr}.login-hero.with-envelope{display:none}.login-shell{width:min(580px,calc(100vw - 20px))}.refined-login .login-form-pane{padding:30px 24px}
}

/* 0.2.6 NEW LOGIN EXPERIENCE */
.body-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;background:radial-gradient(circle at top left,rgba(81,112,255,.12),transparent 34%),radial-gradient(circle at bottom right,rgba(104,78,255,.10),transparent 28%),linear-gradient(180deg,#f5f8ff 0%,#edf2fb 100%)}
.login-v3-shell{width:min(1180px,calc(100vw - 48px))}
.login-v3-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:24px;align-items:stretch}
.login-v3-showcase,.login-v3-card,.login-v3-miniinfo{background:#fff;border:1px solid rgba(205,215,236,.9);box-shadow:0 28px 70px rgba(38,52,92,.10)}
.login-v3-showcase{position:relative;overflow:hidden;padding:34px 34px 30px;border-radius:28px;background:linear-gradient(145deg,#1f3d98 0%,#3053d6 56%,#5a44e8 100%);color:#fff}
.login-v3-showcase::before{content:"";position:absolute;right:-46px;top:42px;width:210px;height:150px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(228,235,255,.92));transform:rotate(15deg);box-shadow:0 26px 55px rgba(12,24,92,.28)}
.login-v3-showcase::after{content:"";position:absolute;left:-90px;bottom:-120px;width:270px;height:270px;border-radius:50%;background:rgba(255,255,255,.08)}
.login-v3-brand,.login-v3-badge,.login-v3-showcase h1,.login-v3-lead,.login-v3-highlights,.login-v3-footerline{position:relative;z-index:1}
.login-v3-brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.login-v3-brand strong{display:block;font-size:18px;font-weight:800;letter-spacing:-.03em}
.login-v3-brand span{display:block;font-size:13px;color:rgba(255,255,255,.8)}
.login-v3-logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);box-shadow:0 14px 30px rgba(12,24,92,.2)}
.login-v3-logo svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.login-v3-badge{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.login-v3-showcase h1{margin:18px 0 14px;max-width:590px;font-size:42px;line-height:1.08;letter-spacing:-.04em}
.login-v3-lead{max-width:570px;margin:0 0 26px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.9)}
.login-v3-highlights{display:grid;gap:14px;max-width:560px}
.login-v3-highlights article{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.10);backdrop-filter:blur(10px)}
.login-v3-highlights b{display:block;margin-bottom:5px;font-size:15px}
.login-v3-highlights small{display:block;font-size:13px;line-height:1.65;color:rgba(255,255,255,.83)}
.highlight-icon{flex:0 0 auto;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:18px}
.login-v3-footerline{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.login-v3-footerline span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.92)}
.login-v3-access{display:grid;grid-template-rows:auto auto;gap:16px}
.login-v3-card{padding:30px;border-radius:28px}
.login-v3-card-head h2{margin:0 0 8px;font-size:30px;line-height:1.12;letter-spacing:-.03em;color:#1d2b57}
.login-v3-card-head p{margin:0 0 22px;font-size:14px;line-height:1.7;color:#6c7a98}
.login-v3-form{display:grid;gap:16px}
.login-v3-form label{display:grid;gap:7px}
.login-v3-form label>span{font-size:13px;font-weight:700;color:#415072}
.login-v3-form input{height:52px;border-radius:16px;border:1px solid #d7def0;background:#f8faff;padding:0 16px;font-size:15px;color:#233356;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.login-v3-form input:focus{border-color:#5678ff;background:#fff;box-shadow:0 0 0 4px rgba(86,120,255,.10)}
.login-v3-submit{height:54px;border-radius:16px;font-size:16px;font-weight:800;box-shadow:0 18px 34px rgba(80,102,247,.24)}
.login-v3-miniinfo{display:grid;gap:14px;padding:18px 20px;border-radius:22px}
.login-v3-miniinfo strong{display:block;margin-bottom:4px;color:#203059;font-size:14px}
.login-v3-miniinfo span{display:block;color:#6d7c9c;font-size:13px;line-height:1.6}

@media(max-width:980px){
  .login-v3-grid{grid-template-columns:1fr}
  .login-v3-shell{width:min(720px,calc(100vw - 20px))}
}
@media(max-width:720px){
  .body-login{padding:14px}
  .login-v3-showcase,.login-v3-card,.login-v3-miniinfo{border-radius:22px}
  .login-v3-showcase{padding:24px 20px 22px}
  .login-v3-card{padding:22px 18px}
  .login-v3-showcase::before{display:none}
  .login-v3-showcase h1{font-size:31px}
  .login-v3-card-head h2{font-size:26px}
}

/* 0.2.7 LOGIN PAGE — approved visual direction */
.body-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:
 radial-gradient(circle at 12% 20%,rgba(107,122,255,.16),transparent 23%),
 radial-gradient(circle at 88% 14%,rgba(138,113,255,.13),transparent 20%),
 linear-gradient(180deg,#fbfcff 0%,#eef3ff 100%);overflow:auto}
.login-pro-page{width:min(1120px,calc(100vw - 36px));margin:auto;padding:8px 0 18px}
.login-pro-brand{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 18px;text-align:left}
.login-pro-brand-icon{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#315ef8,#6f45f2);box-shadow:0 18px 34px rgba(76,91,242,.25)}
.login-pro-brand-icon svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-pro-brand h1{margin:0;font-size:40px;line-height:1;letter-spacing:-.04em;color:#111f45}
.login-pro-brand h1::first-letter{color:#315ef8}
.login-pro-brand p{margin:8px 0 0;font-size:15px;color:#657493}
.login-pro-card{display:grid;grid-template-columns:1fr 1fr;min-height:460px;background:rgba(255,255,255,.94);border:1px solid rgba(222,229,244,.95);border-radius:24px;overflow:hidden;box-shadow:0 28px 75px rgba(45,59,103,.16)}
.login-pro-visual{position:relative;display:grid;place-items:center;overflow:hidden;background:
 radial-gradient(circle at center,rgba(255,255,255,.96) 0 22%,rgba(241,244,255,.86) 46%,rgba(225,232,255,.84) 100%)}
.login-pro-visual:before{content:"";position:absolute;inset:auto -10% -30% -10%;height:68%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(204,215,255,.55));border-radius:50% 50% 0 0}
.login-pro-visual img{position:relative;z-index:2;width:min(430px,88%);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 24px 28px rgba(59,71,138,.19));border-radius:24px}
.login-pro-glow{position:absolute;width:340px;height:340px;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 50px rgba(109,126,255,.24),inset 0 0 40px rgba(255,255,255,.72)}
.login-pro-float{position:absolute;z-index:3;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#7057f3,#3d63f8);box-shadow:0 16px 30px rgba(72,88,221,.26);font-size:11px}
.login-pro-user{left:11%;top:31%}.login-pro-bell{right:11%;top:22%}
.login-pro-access{display:flex;flex-direction:column;justify-content:center;padding:42px 44px;background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)}
.login-pro-heading h2{margin:0 0 8px;font-size:31px;line-height:1.1;color:#111d3e;letter-spacing:-.03em}
.login-pro-heading p{margin:0 0 22px;color:#677594;font-size:14px}
.login-pro-form{display:grid;gap:16px}
.login-pro-form label{display:grid;gap:7px}
.login-pro-form label>span{font-size:13px;font-weight:700;color:#25365b}
.login-pro-input{height:48px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid #d7dfef;border-radius:12px;background:#fbfcff;transition:.18s}
.login-pro-input:focus-within{background:#fff;border-color:#6d83ff;box-shadow:0 0 0 4px rgba(83,107,255,.10)}
.login-pro-input>svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:#8391ae;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login-pro-input input{flex:1;height:100%;min-width:0;border:0;outline:0;background:transparent;color:#1f2d4f;font-size:14px}
.login-pro-eye{flex:0 0 auto;width:34px;height:34px;border:0;background:transparent;border-radius:9px;display:grid;place-items:center;color:#7e8ba9}
.login-pro-eye:hover,.login-pro-eye.active{background:#eef2ff;color:#4f63e8}
.login-pro-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.login-pro-submit{height:50px;border:0;border-radius:12px;background:linear-gradient(90deg,#315ff8,#7445f1);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 16px 30px rgba(82,93,238,.24);cursor:pointer;transition:transform .15s ease,filter .15s ease}
.login-pro-submit:hover{transform:translateY(-1px);filter:brightness(1.03)}
.login-pro-submit svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-pro-note{display:block;text-align:center;color:#8995ad;font-size:11px;line-height:1.5}
.login-pro-features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 0}
.login-pro-features article{display:flex;align-items:center;gap:14px;min-height:92px;padding:16px 18px;border:1px solid rgba(220,227,242,.95);border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 18px 34px rgba(42,58,100,.08)}
.feature-orb{width:48px;height:48px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#265ff4,#6c45f3);color:#fff;font-size:16px;box-shadow:0 12px 24px rgba(70,87,229,.23)}
.login-pro-features b{display:block;margin-bottom:5px;font-size:14px;color:#1b2a4e}
.login-pro-features small{display:block;color:#6f7d99;font-size:12px;line-height:1.45}
.login-pro-security{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 0;color:#61708e;font-size:12px}
.login-pro-security i{width:4px;height:4px;border-radius:50%;background:#b8c2d8}
.login-pro-page .form-error{margin:0;padding:11px 13px;border-radius:11px;background:#fff1f4;border:1px solid #ffd2db;color:#ae3d55;font-size:13px}
@media(max-width:900px){
 .login-pro-card{grid-template-columns:1fr}.login-pro-visual{min-height:330px}.login-pro-access{padding:32px 28px}.login-pro-features{grid-template-columns:1fr}.login-pro-brand h1{font-size:34px}
}
@media(max-width:560px){
 .body-login{padding:12px}.login-pro-page{width:100%}.login-pro-brand{justify-content:flex-start}.login-pro-brand-icon{width:54px;height:54px}.login-pro-brand h1{font-size:29px}.login-pro-brand p{font-size:12px}.login-pro-visual{min-height:260px}.login-pro-access{padding:24px 18px}.login-pro-heading h2{font-size:26px}.login-pro-security{gap:9px;font-size:11px}
}

/* 0.2.8 STANDARD WEBMAIL INTERACTIONS */
.remember-me-row{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px!important;margin:2px 0 0!important;cursor:pointer}
.remember-me-row input{width:18px!important;height:18px!important;margin:2px 0 0!important;accent-color:#4a62ff}
.remember-me-row span{display:block!important}.remember-me-row strong{display:block;font-size:13px;color:#26375c}.remember-me-row small{display:block;margin-top:2px;color:#7b88a5;font-size:11px;line-height:1.45}

.bulk-toolbar{display:flex;align-items:center;gap:8px;min-height:42px;padding:6px 12px;margin:0 10px 8px;border:1px solid transparent;border-radius:12px;background:#f7f9fe;color:#6a7897;font-size:12px;transition:.16s}
.bulk-toolbar.active{border-color:#dce4f8;background:#f2f5ff;color:#33466e}
.bulk-toolbar button{height:30px;padding:0 10px;border:1px solid #dce4f4;border-radius:9px;background:#fff;color:#4c5d7f;font-size:11px}
.bulk-toolbar button:hover{border-color:#bfcdf2;background:#f9fbff}.bulk-toolbar button.danger{color:#c94863}
.bulk-toolbar #selectedCount{margin-right:auto;white-space:nowrap}.select-all-label{display:flex;align-items:center;gap:6px;cursor:pointer}.select-all-label input{width:15px;height:15px;accent-color:#4a63ff}.select-all-label span{font-weight:700}

.message{grid-template-columns:20px 38px minmax(0,1fr) 54px!important}.message-select{display:grid;place-items:center;align-self:start;width:18px;height:38px;cursor:pointer}.message-select input{position:absolute;opacity:0;pointer-events:none}.message-select span{width:15px;height:15px;border:1.5px solid #c4cee3;border-radius:4px;background:#fff;transition:.15s}.message-select input:checked+span{border-color:#4b65ff;background:#4b65ff;box-shadow:inset 0 0 0 3px #fff}.message.multi-selected{background:#edf2ff!important;border-color:#aebfff!important;box-shadow:0 8px 20px rgba(76,101,255,.10)}.message.dragging{opacity:.45}
.folder-link.drag-target{background:#e9efff!important;border-color:#8fa7ff!important;box-shadow:0 0 0 3px rgba(80,104,255,.11)}

.context-menu{position:fixed;z-index:120;display:none;min-width:220px;padding:7px;border:1px solid #dde4f3;border-radius:12px;background:#fff;box-shadow:0 20px 55px rgba(25,39,77,.18)}.context-menu.show{display:grid}.context-menu button{display:flex;align-items:center;width:100%;height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#334566;text-align:left;font-size:12px}.context-menu button:hover{background:#f2f5ff}.context-menu button.danger{color:#c74761}.context-menu button[hidden]{display:none!important}
.confirm-dialog{width:min(460px,92vw)}.secondary-btn,.danger-btn{height:40px;padding:0 16px;border-radius:11px;font-weight:700}.secondary-btn{border:1px solid #dce4f3;background:#fff;color:#53627f}.danger-btn{border:0;background:linear-gradient(90deg,#e45770,#d94261);color:#fff;box-shadow:0 12px 24px rgba(220,65,96,.20)}

@media(max-width:760px){.bulk-toolbar{overflow-x:auto}.bulk-toolbar button{flex:0 0 auto}.message{grid-template-columns:20px 34px minmax(0,1fr) 46px!important}}

/* 0.2.9 SAFE RESPONSIVE MESSAGE VIEWER */
.reader-panel{min-width:0;overflow:hidden}
.reader-content{min-width:0;max-width:100%;overflow:auto}
.mail-title,.sender,.attachments,.quick-reply{max-width:100%}
.mail-title h1{overflow-wrap:anywhere;word-break:break-word}
.mail-body-frame-wrap{width:100%;max-width:100%;min-width:0;overflow:hidden;background:#fff;border-radius:12px}
.mail-body-frame{display:block;width:100%;min-height:420px;border:0;background:#fff;overflow:auto}
.sender .info{overflow:hidden}.sender .info b,.sender .info small{display:block;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:1200px){.mail-body-frame{min-height:360px}}

/* 0.3.0 FIX — bulk toolbar containment and reader header spacing */
.message-list-panel{min-width:0;overflow:hidden}
.panel-head{flex:0 0 auto}
.bulk-toolbar{
  flex:0 0 auto;
  width:calc(100% - 20px);
  max-width:calc(100% - 20px);
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 10px 8px;
  padding:7px 10px;
  overflow:hidden;
}
.bulk-toolbar .select-all-label{flex:0 0 auto}
.bulk-toolbar #selectedCount{flex:1 1 auto;min-width:64px;margin-right:0}
.bulk-toolbar button{flex:0 0 auto;height:29px;padding:0 9px}
.messages{flex:1 1 auto;min-height:0;overflow:auto}

.reader-panel{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.reader-tools{
  flex:0 0 58px;
  min-width:0;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  white-space:nowrap;
  scrollbar-width:thin;
}
.reader-tools button{flex:0 0 auto}
.reader-content{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:auto;
  padding:24px 26px 28px;
}
.mail-title{display:block;width:100%;max-width:100%;margin:0 0 16px;padding:0;overflow:hidden}
.mail-title h1{display:block;width:100%;max-width:100%;margin:0;font-size:22px;line-height:1.32;overflow-wrap:anywhere;word-break:break-word}
.sender{margin-top:0}

@media(max-width:1280px){
  .bulk-toolbar{gap:5px;padding:6px 8px}
  .bulk-toolbar button{font-size:10px;padding:0 7px}
  .reader-content{padding:20px 22px 24px}
}

/* 0.3.8 HTML signature and embedded images */
.signature-toolbar{flex-wrap:wrap;align-items:center}
.signature-toolbar button.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent}
.signature-editor.hidden{display:none}
.signature-html-source{display:none;width:100%;min-height:220px;resize:vertical;border:1px solid var(--line);border-radius:12px;background:#10172a;color:#dbe7ff;padding:14px;font:12px/1.6 Consolas,Monaco,monospace;outline:none;tab-size:2}
.signature-html-source.active{display:block}
.signature-html-source:focus{border-color:#708cff;box-shadow:0 0 0 4px rgba(83,103,255,.12)}
.signature-help{margin:10px 2px 4px;padding:10px 12px;border-radius:10px;background:#f4f7ff;color:#657493;font-size:12px;line-height:1.55}
.signature-editor img,.signature-preview img{max-width:100%;height:auto;display:inline-block}

/* 0.3.9 Signature image sizing and later editing */
.signature-editor img{cursor:pointer;transition:outline-color .15s ease,box-shadow .15s ease}
.signature-editor img.signature-image-selected{outline:2px solid #5274ff;outline-offset:4px;box-shadow:0 0 0 7px rgba(82,116,255,.10)}
.signature-image-controls{margin:12px 0 10px;padding:14px;border:1px solid #dbe4f7;border-radius:14px;background:linear-gradient(180deg,#fbfcff,#f5f8ff)}
.signature-image-controls[hidden]{display:none}
.signature-image-controls-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.signature-image-controls-head strong{display:block;font-size:14px;color:#24345a}
.signature-image-controls-head small{display:block;margin-top:3px;font-size:12px;color:#7886a5}
.mini-close{width:28px;height:28px;border:1px solid #dce4f4;border-radius:9px;background:#fff;color:#7583a0;font-size:18px;line-height:1}
.signature-image-controls-grid{display:grid;grid-template-columns:150px minmax(180px,1fr) 150px;gap:12px;align-items:end}
.signature-image-controls-grid label{display:grid;gap:6px}
.signature-image-controls-grid label>span{font-size:12px;font-weight:700;color:#596887}
.size-input{display:flex;align-items:center;border:1px solid #d9e1f1;border-radius:10px;background:#fff;overflow:hidden}
.size-input input{width:100%;height:38px;border:0;outline:0;padding:0 10px;background:transparent}
.size-input em{padding:0 10px;color:#8290aa;font-size:12px;font-style:normal;border-left:1px solid #e4e9f3}
.signature-image-controls-grid select{height:40px;border:1px solid #d9e1f1;border-radius:10px;background:#fff;padding:0 10px;color:#344362}
.range-label input[type=range]{width:100%;accent-color:#536fff}
.signature-image-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.signature-image-actions button{height:34px;border:1px solid #d7e0f2;border-radius:10px;background:#fff;color:#405174;padding:0 12px;font-size:12px;font-weight:700}
.signature-image-actions button:hover{background:#f2f5ff;border-color:#bccaf0}
.signature-image-actions .danger-soft{color:#bd3e57;background:#fff7f9;border-color:#ffd5de}
.signature-image-actions .danger-soft:hover{background:#ffedf2}
.signature-preview img{max-width:100%!important;height:auto!important}
@media(max-width:850px){.signature-image-controls-grid{grid-template-columns:1fr}.signature-image-actions button{flex:1}}

/* 0.4.0 SIGNATURE SETTINGS — COMPACT 1:1 */
#settingsModal{padding:18px;align-items:center;justify-content:center;overflow:hidden}
#settingsModal .settings-premium{
  width:min(770px,calc(100vw - 32px));
  max-width:770px;
  height:auto;
  max-height:86vh;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#settingsModal .modal-head{
  flex:0 0 auto;
  min-height:52px;
  padding:12px 16px;
}
#settingsModal .modal-head strong{font-size:17px}
#settingsModal .modal-head small{font-size:11px;margin-top:2px}
#settingsModal .close-btn{width:32px;height:32px;border-radius:10px;font-size:20px}
#settingsModal .settings-tabs{
  flex:0 0 auto;
  padding:7px 14px 0;
  min-height:42px;
}
#settingsModal .settings-tab{
  height:34px;
  padding:0 12px;
  font-size:12px;
}
#settingsModal .settings-panel{
  min-height:0;
  overflow:auto;
}
#settingsModal #settings-signature{padding:0}
#settingsModal .signature-layout{
  grid-template-columns:minmax(0,1fr) 240px;
  gap:12px;
  padding:12px 14px;
  align-items:start;
}
#settingsModal .signature-editor-card,
#settingsModal .signature-preview-card{
  padding:12px;
  border-radius:13px;
}
#settingsModal .signature-fields{
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
#settingsModal .field-wrap{
  margin-bottom:8px;
  gap:5px;
}
#settingsModal .field-wrap>span,
#settingsModal .field-wrap>label{
  font-size:11px;
}
#settingsModal .field-wrap input,
#settingsModal .field-wrap select{
  height:36px;
  border-radius:10px;
  padding:0 10px;
  font-size:12px;
}
#settingsModal .toggle-row{
  padding:9px 11px;
  border-radius:11px;
  min-height:44px;
}
#settingsModal .toggle-row strong{font-size:12px}
#settingsModal .toggle-row small{font-size:10px;line-height:1.35}
#settingsModal .toggle-row input{width:17px;height:17px}
#settingsModal .signature-toolbar{
  gap:5px;
  padding:8px 0;
}
#settingsModal .signature-toolbar button{
  width:30px;
  height:30px;
  border-radius:8px;
  font-size:12px;
}
#settingsModal .signature-editor{
  min-height:128px;
  max-height:150px;
  overflow:auto;
  border-radius:11px;
  padding:10px;
  font-size:12px;
  line-height:1.35;
}
#settingsModal .signature-html-source{
  min-height:128px;
  max-height:150px;
  overflow:auto;
  border-radius:11px;
  padding:10px;
  font-size:11px;
}
#settingsModal .signature-image-controls{
  margin-top:8px;
  padding:10px;
  border-radius:11px;
}
#settingsModal .signature-image-controls-head{margin-bottom:8px}
#settingsModal .signature-image-controls-head strong{font-size:12px}
#settingsModal .signature-image-controls-head small{font-size:10px}
#settingsModal .mini-close{width:26px;height:26px;border-radius:8px}
#settingsModal .signature-image-controls-grid{
  grid-template-columns:120px 1fr 145px;
  gap:8px;
}
#settingsModal .signature-image-controls-grid label>span{font-size:10px}
#settingsModal .signature-image-controls-grid input,
#settingsModal .signature-image-controls-grid select{
  height:34px;
  border-radius:9px;
  font-size:11px;
}
#settingsModal .signature-image-actions{
  gap:6px;
  margin-top:8px;
  flex-wrap:wrap;
}
#settingsModal .signature-image-actions button{
  height:30px;
  padding:0 10px;
  border-radius:8px;
  font-size:10px;
}
#settingsModal .signature-help{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  font-size:9.5px;
  line-height:1.4;
}
#settingsModal .toggle-row.compact{
  min-height:38px;
  padding:7px 10px;
  margin-top:6px;
}
#settingsModal .signature-preview-card>strong{font-size:15px}
#settingsModal .signature-preview-card>small{font-size:10px;margin:3px 0 10px}
#settingsModal .signature-preview{
  min-height:250px;
  max-height:390px;
  overflow:auto;
  border-radius:11px;
  padding:10px;
  font-size:11px;
  line-height:1.35;
}
#settingsModal .modal-actions{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:3;
  background:#fff;
  border-top:1px solid var(--line);
  padding:10px 14px;
  box-shadow:0 -8px 20px rgba(31,47,88,.05);
}
#settingsModal .modal-actions::before{
  content:'Откажи';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 16px;
  margin-right:8px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  font-weight:600;
  font-size:12px;
  cursor:pointer;
}
#settingsModal #saveSettings{
  height:38px;
  min-width:170px;
  border-radius:10px;
  font-size:12px;
}

@media(max-width:850px){
  #settingsModal .settings-premium{width:min(700px,calc(100vw - 20px));max-height:92vh}
  #settingsModal .signature-layout{grid-template-columns:1fr}
  #settingsModal .signature-preview-card{display:none}
  #settingsModal .signature-image-controls-grid{grid-template-columns:1fr}
}

/* 0.4.1 Complete signature formatting toolbar */
#settingsModal .signature-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px 7px;
  padding:8px 0 7px;
  border-bottom:1px solid #edf1f8;
}
#settingsModal .signature-tool-group{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding-right:7px;
  border-right:1px solid #e5eaf4;
  min-width:0;
}
#settingsModal .signature-tool-group:last-child{border-right:0;padding-right:0}
#settingsModal .signature-toolbar button{
  flex:0 0 29px;
  width:29px;
  min-width:29px;
  height:29px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dfe6f3;
  border-radius:7px;
  background:#fff;
  color:#31425f;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
#settingsModal .signature-toolbar button:hover{
  background:#f2f5ff;
  border-color:#bfcdf4;
  color:#355be8;
}
#settingsModal .signature-toolbar button:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(65,104,255,.14);
}
#settingsModal .signature-code-btn{
  width:38px!important;
  min-width:38px!important;
  font-family:Consolas,Monaco,monospace;
  font-size:11px!important;
}
#settingsModal .signature-code-btn span{
  display:block;
  white-space:nowrap;
  line-height:1;
  transform:translateY(-.5px);
}
#settingsModal .signature-select-group{gap:4px}
#settingsModal .signature-toolbar select{
  height:29px;
  min-width:70px;
  max-width:104px;
  border:1px solid #dfe6f3;
  border-radius:7px;
  background:#fff;
  color:#3e4c68;
  padding:0 24px 0 8px;
  font-size:11px;
  outline:none;
}
#settingsModal #signatureFontSize{min-width:68px;max-width:82px}
#settingsModal .signature-color-control{
  position:relative;
  width:29px;
  height:29px;
  border:1px solid #dfe6f3;
  border-radius:7px;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  color:#31425f;
}
#settingsModal .signature-color-control::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:3px;
  height:3px;
  border-radius:2px;
  background:var(--signature-color,#1d2c4e);
}
#settingsModal .signature-color-control input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
#settingsModal .signature-editor{
  min-height:122px;
  max-height:142px;
}
@media(max-width:900px){
  #settingsModal .signature-toolbar{max-height:76px;overflow-y:auto;align-content:flex-start}
  #settingsModal .signature-tool-group{padding-right:5px}
  #settingsModal .signature-toolbar select{min-width:64px;max-width:90px}
}

/* 0.4.2 — ordered two-row formatting toolbars */
#settingsModal .signature-toolbar{
  display:grid!important;
  grid-template-columns:auto auto auto auto 1fr;
  grid-template-rows:32px 32px;
  gap:6px 8px!important;
  align-items:center;
  padding:8px 0!important;
  max-height:none!important;
  overflow:visible!important;
  border-bottom:1px solid #edf1f8;
}
#settingsModal .signature-toolbar .signature-tool-group{
  display:flex;
  align-items:center;
  gap:4px;
  padding-right:8px;
  border-right:1px solid #e4e9f3;
  min-width:0;
}
#settingsModal .signature-toolbar .signature-tool-group:nth-child(1){grid-column:1;grid-row:1}
#settingsModal .signature-toolbar .signature-tool-group:nth-child(2){grid-column:2;grid-row:1}
#settingsModal .signature-toolbar .signature-tool-group:nth-child(3){grid-column:3;grid-row:1}
#settingsModal .signature-toolbar .signature-tool-group:nth-child(4){grid-column:4;grid-row:1;border-right:0}
#settingsModal .signature-toolbar .signature-tool-group:nth-child(5){grid-column:1 / span 3;grid-row:2}
#settingsModal .signature-toolbar .signature-tool-group:nth-child(6){grid-column:4 / span 2;grid-row:2;border-right:0;justify-content:flex-start}
#settingsModal .signature-toolbar button{
  width:29px!important;
  min-width:29px!important;
  height:29px!important;
  border-radius:7px!important;
}
#settingsModal .signature-toolbar .signature-code-btn{
  width:42px!important;
  min-width:42px!important;
}
#settingsModal .signature-toolbar select{height:29px!important}

.compose-format-toolbar{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8faff;
}
.compose-format-toolbar .format-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  min-width:0;
}
.compose-format-toolbar .format-group{
  display:flex;
  align-items:center;
  gap:4px;
  padding-right:8px;
  border-right:1px solid #e1e7f2;
  min-width:0;
}
.compose-format-toolbar .format-group:last-child{border-right:0;padding-right:0}
.compose-format-toolbar button,
.compose-format-toolbar .format-color{
  width:30px;
  min-width:30px;
  height:30px;
  border:1px solid #dbe3f0;
  border-radius:7px;
  background:#fff;
  color:#31425f;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.compose-format-toolbar button:hover{background:#eef3ff;border-color:#b9c8ef;color:#3158df}
.compose-format-toolbar button.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent}
.compose-format-toolbar .format-code-btn{width:42px;min-width:42px;font-family:Consolas,Monaco,monospace}
.compose-format-toolbar .format-code-btn span{white-space:nowrap;line-height:1}
.compose-format-toolbar select{
  height:30px;
  border:1px solid #dbe3f0;
  border-radius:7px;
  background:#fff;
  color:#3d4d6a;
  padding:0 24px 0 8px;
  font-size:11px;
  min-width:82px;
  max-width:110px;
}
.compose-format-toolbar #composeFontSize{min-width:72px;max-width:82px}
.compose-format-toolbar .format-color{position:relative;overflow:hidden;font-weight:700}
.compose-format-toolbar .format-color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.compose-html-source{
  display:none;
  width:100%;
  min-height:220px;
  resize:vertical;
  border:0;
  outline:0;
  padding:14px;
  background:#101827;
  color:#dbe7ff;
  font:12px/1.55 Consolas,Monaco,monospace;
}
.compose-html-source.active{display:block}
.attachment-label{font-size:12px;color:var(--muted)}

@media(max-width:760px){
  #settingsModal .signature-toolbar{
    display:flex!important;
    flex-wrap:wrap!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
  }
  .compose-format-toolbar .format-row{flex-wrap:wrap}
}

/* 0.4.3 — single-row formatting toolbars across compose/reply/settings */
.compose-format-toolbar{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin;
}
.compose-format-toolbar .format-row{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  flex:0 0 auto;
}
.compose-format-toolbar .format-group{
  flex:0 0 auto;
}
.compose-format-toolbar button,
.compose-format-toolbar .format-color{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  border-radius:7px!important;
  font-size:11px!important;
}
.compose-format-toolbar .format-code-btn{width:38px!important;min-width:38px!important;}
.compose-format-toolbar select{
  height:28px!important;
  min-width:74px!important;
  max-width:96px!important;
  font-size:11px!important;
  padding:0 22px 0 8px!important;
}
.compose-format-toolbar #composeFontSize{min-width:66px!important;max-width:74px!important;}

#settingsModal .signature-toolbar{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:8px!important;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
}
#settingsModal .signature-toolbar .signature-tool-group{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  flex:0 0 auto;
  border-right:1px solid #e4e9f3!important;
  padding-right:8px!important;
  min-width:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
#settingsModal .signature-toolbar .signature-tool-group:last-child{border-right:0!important;padding-right:0!important;}
#settingsModal .signature-toolbar button{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  border-radius:7px!important;
  font-size:11px!important;
}
#settingsModal .signature-toolbar .signature-code-btn{width:38px!important;min-width:38px!important;}
#settingsModal .signature-toolbar select{
  height:28px!important;
  min-width:74px!important;
  max-width:96px!important;
  font-size:11px!important;
}
#settingsModal .signature-toolbar .signature-select-group{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  flex:0 0 auto;
}
#settingsModal .signature-color-control{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  border-radius:7px!important;
}
@media(max-width:760px){
  .compose-format-toolbar,
  #settingsModal .signature-toolbar{
    padding-bottom:2px!important;
  }
}

/* 0.4.4 — compact elegant toolbars without horizontal scrollbar */
.compose-format-toolbar,
#settingsModal .signature-toolbar{
  overflow:visible!important;
  scrollbar-width:none!important;
  gap:4px!important;
  padding:6px 8px!important;
  background:linear-gradient(180deg,#fbfcff 0%,#f6f8fd 100%)!important;
  border:1px solid #e2e8f4!important;
  border-radius:10px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.compose-format-toolbar::-webkit-scrollbar,
#settingsModal .signature-toolbar::-webkit-scrollbar{display:none!important}

.compose-format-toolbar .format-row,
#settingsModal .signature-toolbar{
  gap:4px!important;
}
.compose-format-toolbar .format-group,
#settingsModal .signature-toolbar .signature-tool-group{
  gap:2px!important;
  padding-right:5px!important;
  margin-right:1px!important;
  border-right:1px solid #dfe5f0!important;
}
.compose-format-toolbar .format-row:last-child .format-group:last-child,
#settingsModal .signature-toolbar .signature-tool-group:last-child{
  border-right:0!important;
  padding-right:0!important;
  margin-right:0!important;
}

.compose-format-toolbar button,
.compose-format-toolbar .format-color,
#settingsModal .signature-toolbar button,
#settingsModal .signature-color-control{
  width:24px!important;
  min-width:24px!important;
  height:24px!important;
  border-radius:6px!important;
  font-size:10px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#445574!important;
  box-shadow:none!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease!important;
}
.compose-format-toolbar button:hover,
#settingsModal .signature-toolbar button:hover,
.compose-format-toolbar .format-color:hover,
#settingsModal .signature-color-control:hover{
  background:#edf2ff!important;
  border-color:#d5def4!important;
  color:#3158df!important;
}
.compose-format-toolbar button:active,
#settingsModal .signature-toolbar button:active{transform:translateY(1px)}
.compose-format-toolbar button.active,
#settingsModal .signature-toolbar button.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
  color:#fff!important;
  border-color:transparent!important;
}

.compose-format-toolbar .format-code-btn,
#settingsModal .signature-toolbar .signature-code-btn{
  width:32px!important;
  min-width:32px!important;
  font-size:10px!important;
  font-family:Consolas,Monaco,monospace!important;
}
.compose-format-toolbar select,
#settingsModal .signature-toolbar select{
  height:24px!important;
  min-width:58px!important;
  max-width:72px!important;
  padding:0 17px 0 6px!important;
  font-size:10px!important;
  border:1px solid #dce3f0!important;
  border-radius:6px!important;
  background-color:#fff!important;
  color:#42516d!important;
}
.compose-format-toolbar #composeFontSize,
#settingsModal #signatureFontSize{
  min-width:54px!important;
  max-width:60px!important;
}
.compose-format-toolbar .format-color span,
#settingsModal .signature-color-control span{
  font-size:10px!important;
  line-height:1!important;
}

/* Keep the full toolbar on one line in normal desktop modal widths. */
.compose-format-toolbar .format-row{flex:0 0 auto!important}
.compose-format-toolbar{justify-content:flex-start!important}

@media(max-width:900px){
  .compose-format-toolbar,
  #settingsModal .signature-toolbar{
    flex-wrap:wrap!important;
    overflow:visible!important;
  }
  .compose-format-toolbar .format-row{flex-wrap:wrap!important}
}

/* 0.4.5 — personal address book manager */
.status-meta.addressbook-open{width:100%;border:0;background:transparent;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--line);cursor:pointer;text-align:left}
.status-meta.addressbook-open:hover span{color:var(--primary)}
.addressbook-window{width:min(980px,94vw);max-height:min(760px,92vh);display:flex;flex-direction:column}
.addressbook-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);min-height:520px;overflow:hidden}
.addressbook-list-pane{padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.addressbook-search-row{display:flex;gap:10px;margin-bottom:12px}
.addressbook-search-row input{flex:1;height:40px;border:1px solid var(--line);border-radius:12px;padding:0 12px;outline:none;background:#fbfcff}
.addressbook-search-row input:focus{border-color:#9db0ff;box-shadow:0 0 0 4px rgba(83,103,255,.1);background:#fff}
.compact-primary{height:40px!important;border-radius:12px!important;padding:0 15px!important;white-space:nowrap}
.addressbook-list{overflow:auto;display:grid;gap:8px;padding-right:3px}
.contact-row{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:11px;padding:10px 11px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left;color:var(--text)}
.contact-row:hover,.contact-row.active{border-color:#b9c9ef;background:#f7f9ff;box-shadow:0 8px 18px rgba(24,45,90,.06)}
.contact-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:800;font-size:13px}
.contact-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.contact-main strong,.contact-main small,.contact-main em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-main strong{font-size:13px}.contact-main small{font-size:12px;color:#5f6f90}.contact-main em{font-style:normal;font-size:11px;color:var(--muted)}
.contact-edit-icon{font-size:22px;color:#8996b0;text-align:center}
.addressbook-empty{height:100%;min-height:320px;display:grid;place-content:center;text-align:center;color:var(--muted);gap:7px;padding:30px}
.addressbook-empty strong{color:#536585;font-size:15px}.addressbook-empty span{font-size:12px;max-width:260px;line-height:1.6}
.addressbook-editor-pane{padding:18px;background:#fbfcff;overflow:auto}
.addressbook-editor-head{margin-bottom:14px}.addressbook-editor-head strong{display:block;font-size:17px;margin-bottom:4px}.addressbook-editor-head small{color:var(--muted);font-size:12px;line-height:1.5}
.addressbook-editor-pane textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;resize:vertical;outline:none;background:#fff;color:var(--text)}
.addressbook-editor-pane textarea:focus{border-color:#9db0ff;box-shadow:0 0 0 4px rgba(83,103,255,.1)}
.addressbook-actions{display:flex;align-items:center;gap:8px;margin-top:14px}.addressbook-actions button{height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 14px}.addressbook-actions .action-spacer{flex:1}.addressbook-actions .danger-soft{color:#c43d59;background:#fff3f6;border-color:#ffd1db}
@media(max-width:820px){.addressbook-layout{grid-template-columns:1fr;overflow:auto}.addressbook-list-pane{border-right:0;border-bottom:1px solid var(--line);max-height:340px}.addressbook-editor-pane{overflow:visible}.addressbook-window{max-height:94vh;overflow:auto}}

/* 0.4.6 — spacing between confirmation buttons */
.confirm-dialog .modal-actions{
  gap:12px;
}

/* 0.4.7 — address book action buttons and unified delete confirmation */
.addressbook-actions .primary-btn,
.addressbook-actions button.primary-btn{
  background:linear-gradient(90deg,var(--primary),var(--primary-2))!important;
  color:#fff!important;
  border-color:transparent!important;
  font-weight:700!important;
  min-width:132px;
  box-shadow:0 10px 22px rgba(82,105,255,.20);
}
.addressbook-actions .primary-btn:hover,
.addressbook-actions button.primary-btn:hover{
  filter:brightness(1.03);
}
.addressbook-actions .danger-soft{
  font-weight:600;
}
#confirmModal .confirm-dialog .modal-actions{
  gap:12px;
}
#confirmModal #confirmActionBtn{
  min-width:132px;
}

/* 0.4.8 — mailbox storage and folder counters */
.folder-statbar{
  margin:0 14px 10px;
  min-height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid #e1e8f5;
  border-radius:10px;
  background:linear-gradient(180deg,#fbfcff,#f5f8ff);
  color:#657594;
  font-size:11.5px;
  line-height:1.35;
}
.folder-statbar-icon{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:#eaf0ff;
  color:#4969ef;
  font-size:11px;
}
#folderStatsText{min-width:0;overflow-wrap:anywhere}

/* 0.4.9 — storage card in sidebar + clear unread state */
.mailbox-storage-card{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px 0 2px;
  margin-top:12px;
  border-top:1px solid var(--line);
  color:#536585;
  font-size:11px;
  line-height:1.45;
}
.mailbox-storage-icon{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#edf2ff;
  color:#4f69ee;
}
.mailbox-storage-icon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#folderStatsText{min-width:0;overflow-wrap:anywhere}

.message.unread{
  position:relative;
  background:linear-gradient(90deg,#f5f8ff 0%,#ffffff 68%)!important;
  border-color:#c8d5ff!important;
  box-shadow:inset 3px 0 0 #4f6cff,0 6px 16px rgba(58,84,170,.06);
}
.message.unread h4,
.message.unread .subject{
  color:#132650;
  font-weight:800!important;
}
.message.unread p{
  color:#52678f!important;
  font-weight:600;
}
.message.unread .meta{
  color:#3f5fd0!important;
  font-weight:700;
}
.message.unread::after{
  content:'Ново';
  position:absolute;
  right:10px;
  bottom:10px;
  padding:2px 6px;
  border-radius:999px;
  background:#e9efff;
  color:#3f5fd0;
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
}
.message:not(.unread){
  background:#fff;
  opacity:.86;
}
.message:not(.unread) h4,
.message:not(.unread) .subject{
  font-weight:600!important;
  color:#44516c;
}
.message:not(.unread) p,
.message:not(.unread) .meta{
  color:#8793aa!important;
}
.message:not(.unread)::after{
  content:attr(data-status-label);
  position:absolute;
  right:10px;
  bottom:10px;
  padding:2px 6px;
  border-radius:999px;
  background:#f1f3f7;
  color:#7b879d;
  font-size:9px;
  font-weight:700;
  letter-spacing:.02em;
}
.message.active{opacity:1}

/* 0.5.1 — refined bulk actions layout */
.bulk-toolbar{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:auto auto;
  gap:7px 6px!important;
  align-items:center;
  padding:8px 9px!important;
  background:linear-gradient(180deg,#f8faff 0%,#f3f6fd 100%)!important;
  border:1px solid #e3e9f5!important;
  border-radius:13px!important;
  box-shadow:0 4px 12px rgba(61,83,132,.04);
}
.bulk-toolbar .select-all-label{
  grid-column:1 / 4;
  grid-row:1;
  min-height:28px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 3px;
  color:#425477;
}
.bulk-toolbar #selectedCount{
  grid-column:4 / 6;
  grid-row:1;
  justify-self:end;
  min-width:0!important;
  margin:0!important;
  padding-right:3px;
  color:#8a97b1;
  font-size:11px;
  font-weight:600;
}
.bulk-toolbar button{
  width:100%;
  min-width:0;
  height:31px!important;
  padding:0 6px!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:8px!important;
  background:#fff!important;
  border:1px solid #dce4f2!important;
  box-shadow:0 1px 2px rgba(42,60,102,.03);
  font-size:10px!important;
  font-weight:700;
  color:#4a5b7c!important;
  white-space:nowrap;
}
.bulk-toolbar button span{font-size:12px;line-height:1;opacity:.85}
.bulk-toolbar button:hover{
  transform:translateY(-1px);
  border-color:#bfcdf0!important;
  background:#f9fbff!important;
  color:#3158df!important;
}
.bulk-toolbar button.danger{
  color:#c94c63!important;
  border-color:#f1d7de!important;
  background:#fffafb!important;
}
.bulk-toolbar button.danger:hover{
  background:#fff2f5!important;
  border-color:#ebb9c6!important;
  color:#b9304d!important;
}
.bulk-toolbar #bulkMoveBtn{grid-column:1;grid-row:2}
.bulk-toolbar #bulkUnreadBtn{grid-column:2;grid-row:2}
.bulk-toolbar #bulkSpamBtn{grid-column:3;grid-row:2}
.bulk-toolbar #bulkArchiveBtn{grid-column:4;grid-row:2}
.bulk-toolbar #bulkDeleteBtn{grid-column:5;grid-row:2}

@media(max-width:430px){
  .bulk-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bulk-toolbar .select-all-label{grid-column:1;grid-row:1}
  .bulk-toolbar #selectedCount{grid-column:2;grid-row:1}
  .bulk-toolbar #bulkMoveBtn{grid-column:1;grid-row:2}
  .bulk-toolbar #bulkUnreadBtn{grid-column:2;grid-row:2}
  .bulk-toolbar #bulkSpamBtn{grid-column:1;grid-row:3}
  .bulk-toolbar #bulkArchiveBtn{grid-column:2;grid-row:3}
  .bulk-toolbar #bulkDeleteBtn{grid-column:1 / 3;grid-row:4}
}

/* 0.5.2 — bulk action buttons fit cleanly in the narrow message panel */
.bulk-toolbar{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:28px 31px 31px!important;
  gap:6px!important;
  padding:8px!important;
  overflow:hidden!important;
}
.bulk-toolbar .select-all-label{
  grid-column:1 / 4!important;
  grid-row:1!important;
}
.bulk-toolbar #selectedCount{
  grid-column:4 / 7!important;
  grid-row:1!important;
}
.bulk-toolbar button{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:31px!important;
  padding:0 5px!important;
  gap:4px!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-sizing:border-box!important;
}
.bulk-toolbar button span{
  flex:0 0 auto;
  font-size:11px!important;
}
.bulk-toolbar #bulkMoveBtn{grid-column:1 / 3!important;grid-row:2!important}
.bulk-toolbar #bulkUnreadBtn{grid-column:3 / 5!important;grid-row:2!important}
.bulk-toolbar #bulkSpamBtn{grid-column:5 / 7!important;grid-row:2!important}
.bulk-toolbar #bulkArchiveBtn{grid-column:1 / 4!important;grid-row:3!important}
.bulk-toolbar #bulkDeleteBtn{grid-column:4 / 7!important;grid-row:3!important}

@media(max-width:430px){
  .bulk-toolbar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:28px repeat(3,31px)!important;
  }
  .bulk-toolbar .select-all-label{grid-column:1!important;grid-row:1!important}
  .bulk-toolbar #selectedCount{grid-column:2!important;grid-row:1!important}
  .bulk-toolbar #bulkMoveBtn{grid-column:1!important;grid-row:2!important}
  .bulk-toolbar #bulkUnreadBtn{grid-column:2!important;grid-row:2!important}
  .bulk-toolbar #bulkSpamBtn{grid-column:1!important;grid-row:3!important}
  .bulk-toolbar #bulkArchiveBtn{grid-column:2!important;grid-row:3!important}
  .bulk-toolbar #bulkDeleteBtn{grid-column:1 / 3!important;grid-row:4!important}
}

.recipient-picker-trigger{border:0;background:transparent;padding:0;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer;border-radius:6px}.recipient-picker-trigger:hover,.recipient-picker-trigger:focus{color:#4258e8;text-decoration:underline;outline:none}.recipient-picker-modal{z-index:1200}.recipient-picker-window{width:min(680px,calc(100vw - 28px));max-height:min(760px,calc(100vh - 32px));display:flex;flex-direction:column}.recipient-picker-tools{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid #e7ebf5}.recipient-picker-tools input[type=search]{flex:1;min-width:0}.recipient-select-all{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;font-weight:700;color:#33446d;cursor:pointer;user-select:none}.recipient-select-all input{position:absolute;opacity:0;pointer-events:none}.recipient-checkmark{position:relative;flex:0 0 auto;width:17px;height:17px;border:1.5px solid #c4cee3;border-radius:5px;background:#fff;box-sizing:border-box;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.recipient-select-all:hover .recipient-checkmark{border-color:#8fa4ee}.recipient-select-all input:focus-visible+.recipient-checkmark{box-shadow:0 0 0 4px rgba(74,99,255,.12)}.recipient-select-all input:checked+.recipient-checkmark{border-color:#4b65ff;background:#4b65ff;box-shadow:inset 0 0 0 3px #fff}.recipient-select-all input:indeterminate+.recipient-checkmark{border-color:#4b65ff;background:#4b65ff}.recipient-select-all input:indeterminate+.recipient-checkmark:after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;border-radius:2px;background:#fff}.recipient-cancel-btn{min-width:76px;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease}.recipient-cancel-btn:hover{border-color:#bfcdf2;background:#f7f9ff;color:#354a78}.recipient-cancel-btn:active{transform:translateY(1px)}.recipient-picker-list{padding:8px 12px;overflow:auto;min-height:260px;max-height:480px}.recipient-picker-row{display:grid;grid-template-columns:22px 42px 1fr;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;cursor:pointer}.recipient-picker-row:hover{background:#f3f6ff}.recipient-picker-row input{width:17px;height:17px}.recipient-picker-main{display:flex;flex-direction:column;min-width:0}.recipient-picker-main strong,.recipient-picker-main small,.recipient-picker-main em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recipient-picker-main small{color:#657394;margin-top:2px}.recipient-picker-main em{font-style:normal;color:#8994ae;font-size:12px;margin-top:2px}.recipient-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-top:1px solid #e7ebf5;background:#fafbff}.recipient-picker-footer>span{font-weight:700;color:#33446d}.recipient-picker-actions{display:flex;gap:9px}.recipient-picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;color:#7a86a3;text-align:center;gap:5px}.recipient-picker-empty strong{color:#33446d}@media(max-width:620px){.recipient-picker-tools{align-items:stretch;flex-direction:column}.recipient-select-all{white-space:normal}.recipient-picker-footer{align-items:stretch;flex-direction:column}.recipient-picker-actions{justify-content:flex-end}}

/* 1.1.1 — recipient filter matches the compose “До” field */
#recipientPickerSearch{
  flex:1;
  min-width:0;
  width:100%;
  height:38px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  background:#fff;
  outline:none;
  color:var(--text);
  font:inherit;
  font-size:13px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
#recipientPickerSearch:focus{
  border-color:#9db0ff;
  box-shadow:0 0 0 4px rgba(83,103,255,.1);
  background:#fff;
}
#recipientPickerSearch::placeholder{color:#9aa6bf;opacity:1}

/* 1.2.8 — adaptive three-pane layout and responsive message reader */
:root{
  --sidebar-adaptive:clamp(210px,18vw,292px);
  --list-adaptive:clamp(320px,31vw,480px);
}
.sidebar{width:var(--sidebar-adaptive)}
.columns{grid-template-columns:var(--list-adaptive) minmax(0,1fr)}
.workspace,.columns,.message-list-panel,.reader-panel,.reader-content{min-width:0}
.reader-panel{overflow:hidden}
.reader-content{overscroll-behavior:contain}
.mail-body-frame-wrap{width:100%;max-width:100%;min-width:0;overflow:hidden}
.mail-body-frame{width:100%;max-width:100%;min-width:0}

@media(max-width:1440px){
  :root{--sidebar-adaptive:230px;--list-adaptive:360px}
  .sidebar{padding-left:18px;padding-right:18px}
  .topbar{height:72px;padding:0 16px}
  .columns{height:calc(100vh - 73px)}
  .search-box{width:min(400px,42vw)}
  .profile-trigger{min-width:210px}
  .reader-tools{padding-left:14px;padding-right:14px}
  .reader-content{padding:18px 20px 22px}
  .mail-title h1{font-size:21px}
}

@media(max-width:1180px){
  :root{--sidebar-adaptive:205px;--list-adaptive:320px}
  .sidebar{padding:14px 12px}
  .brand-row{padding-bottom:18px}.brand-row strong{font-size:20px}.brand-row small{font-size:10px}
  .compose-btn{height:48px;padding:0 14px;font-size:13px}
  .folder-link{height:42px;padding:0 10px;font-size:13px}
  .mail-status-card{left:12px;right:12px;bottom:12px;padding:12px}
  .top-actions{gap:8px}.profile-trigger{min-width:170px}.profile-meta strong,.profile-meta small{max-width:96px}
  .reader-tools{gap:7px}
  .reader-tools button{height:34px;padding:0 10px;font-size:12px}
  .reader-content{padding:16px 16px 20px}
  .sender{margin:14px 0 12px}
}

@media(max-width:980px){
  .sidebar{display:none}
  .columns{grid-template-columns:minmax(300px,38vw) minmax(0,1fr)}
  .reader-panel{display:flex}
  .workspace{height:100vh}
}

@media(max-width:760px){
  .columns{grid-template-columns:1fr}
  .reader-panel{position:fixed;inset:0;background:#fff;z-index:600;display:none}
  .reader-panel.mobile-open{display:flex}
}

/* 1.2.10 — Exchange/OWA-style responsive three-pane workspace */
:root{
  --owa-sidebar:clamp(184px,15.5vw,238px);
  --owa-list:clamp(330px,29vw,430px);
}

.app-shell{
  display:grid;
  grid-template-columns:var(--owa-sidebar) minmax(0,1fr);
  width:100vw;
  max-width:100vw;
  height:100dvh;
  min-height:0;
  padding:0;
  gap:0;
  border-radius:0;
  overflow:hidden;
}
.sidebar{
  width:auto!important;
  min-width:0;
  height:100dvh;
  border-radius:0;
  overflow:hidden;
}
.workspace{
  width:auto;
  min-width:0;
  height:100dvh;
  min-height:0;
  border-radius:0;
  overflow:hidden;
}
.topbar{flex:0 0 auto;min-width:0}
.columns{
  display:grid;
  grid-template-columns:var(--owa-list) minmax(0,1fr)!important;
  width:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.message-list-panel,.reader-panel{height:100%;min-height:0;min-width:0;overflow:hidden}
.message-list-panel{border-right:1px solid var(--line)}
.messages{min-height:0;overscroll-behavior:contain}
.reader-tools{scrollbar-width:thin;overscroll-behavior-x:contain}
.reader-content{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.mail-body-frame-wrap{overflow:visible;contain:layout paint}
.mail-body-frame{display:block;width:100%!important;max-width:100%!important;border:0;overflow:hidden;background:#fff;transition:opacity .12s ease}
.mail-body-frame.is-measuring{opacity:0;pointer-events:none}

@media (max-width:1440px){
  :root{--owa-sidebar:190px;--owa-list:360px}
  .sidebar{padding:14px 12px}
  .brand-row{gap:9px}.brand-row strong{font-size:17px}.brand-row small{font-size:9px}
  .folder-link{padding-left:9px;padding-right:8px}
  .mail-status-card{left:10px;right:10px;bottom:10px}
  .topbar{height:68px;padding:0 14px}
  .columns{height:calc(100dvh - 69px)!important}
  .search-box{width:min(360px,38vw)}
  .profile-trigger{min-width:180px}
  .reader-content{padding:14px 16px 20px}
  .reader-tools{padding:0 12px}
}

@media (max-width:1180px){
  :root{--owa-sidebar:176px;--owa-list:330px}
  .sidebar{padding:12px 9px}
  .compose-btn{height:44px;padding:0 10px}
  .folder-link{height:39px;font-size:12px}
  .folder-section-head{padding-left:5px;padding-right:5px}
  .mail-status-card{font-size:11px}
  .search-box{width:min(310px,34vw)}
  .profile-trigger{min-width:150px}
  .profile-meta strong,.profile-meta small{max-width:82px}
  .panel-head{padding-left:12px;padding-right:12px}
  .bulk-toolbar{margin-left:7px;margin-right:7px;width:calc(100% - 14px);max-width:calc(100% - 14px)}
  .messages{padding-left:7px;padding-right:7px}
  .reader-content{padding:12px 14px 18px}
}

@media (max-width:960px){
  .app-shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none!important}
  .columns{grid-template-columns:minmax(285px,37vw) minmax(0,1fr)!important}
  .search-box{width:min(330px,46vw)}
}

@media (max-width:720px){
  .columns{grid-template-columns:minmax(0,1fr)!important}
  .reader-panel{position:fixed;inset:0;z-index:600;background:#fff;display:none}
  .reader-panel.mobile-open{display:flex}
  .topbar{padding:0 8px}
  .profile-trigger{min-width:unset}
  .profile-meta{display:none}
}

/* 1.3.1 — compact compose button on lower desktop resolutions */
.compose-btn{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1;
}
.compose-btn span{
  flex:0 0 auto;
}
@media (max-width:1440px){
  .compose-btn{
    height:44px;
    padding:0 10px;
    gap:8px;
    font-size:13px;
    justify-content:center;
  }
  .compose-btn span{
    width:22px;
    height:22px;
    font-size:17px;
  }
}
@media (max-width:1180px){
  .compose-btn{
    padding:0 8px;
    gap:7px;
    font-size:12px;
    letter-spacing:-.01em;
  }
  .compose-btn span{
    width:20px;
    height:20px;
    font-size:16px;
  }
}


/* 1.3.4 — stable settings modal and per-user desktop notifications */
#settingsModal .modal-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
#settingsModal .modal-actions::before{content:none!important;display:none!important}
#settingsModal #cancelSettings,
#settingsModal #saveSettings{
  height:40px;
  border-radius:11px;
  font-size:12px;
  font-weight:700;
}
#settingsModal #cancelSettings{min-width:92px}
#settingsModal #saveSettings{min-width:170px}
#settingsModal .settings-panel{overflow-x:hidden!important}
#settingsModal .signature-layout,
#settingsModal .signature-editor-card,
#settingsModal .signature-preview-card{min-width:0}
#settingsModal .signature-toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
  max-width:100%;
}
#settingsModal .signature-tool-group{min-width:0;flex-wrap:wrap}
#settingsModal .signature-select-group{flex:1 1 210px}
#settingsModal .signature-select-group select{max-width:100%}
.notification-permission-status{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:10px;
  line-height:1.35;
}
.notification-permission-status.granted{color:#159a61}
.notification-permission-status.pending{color:#7a879f}
.notification-permission-status.denied{color:#c54a5f}
@media(max-width:850px){
  #settingsModal .settings-premium{width:min(700px,calc(100vw - 20px));max-height:94vh}
  #settingsModal .modal-actions{position:sticky;bottom:0}
  #settingsModal #cancelSettings,#settingsModal #saveSettings{flex:1;min-width:0}
}


/* 1.3.5 — compact signature toolbar and reliable notification controls */
#settingsModal .signature-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:4px!important;
  padding:7px 8px!important;
  overflow:visible!important;
}
#settingsModal .signature-toolbar .signature-tool-group,
#settingsModal .signature-toolbar .signature-select-group{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
  gap:2px!important;
  padding-right:5px!important;
  margin:0!important;
}
#settingsModal .signature-toolbar button,
#settingsModal .signature-toolbar .signature-color-control{
  flex:0 0 26px!important;
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
}
#settingsModal .signature-toolbar select{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:68px!important;
  max-width:88px!important;
  height:26px!important;
}
#settingsModal #signatureFontSize{min-width:66px!important;max-width:72px!important}
.notification-test-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  margin-top:8px;
  padding:0 11px;
  border:1px solid #d7e0f2;
  border-radius:9px;
  background:#fff;
  color:#3e55a7;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.notification-test-btn:hover{background:#f2f5ff;border-color:#bfcdf2}
#toast{
  position:fixed!important;
  right:18px!important;
  bottom:18px!important;
  left:auto!important;
  z-index:1000!important;
  display:none;
  align-items:center;
  gap:10px;
  max-width:min(380px,calc(100vw - 28px));
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  background:#17233f;
  color:#fff;
  box-shadow:0 18px 44px rgba(20,34,70,.28);
  font-size:13px;
  line-height:1.4;
}
#toast.mail{background:#173a73}
#toast.warning{background:#7b4a16}
#toast .toast-icon{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:9px;
  background:rgba(255,255,255,.14);
  font-weight:800;
}
@media(max-width:760px){
  #settingsModal .signature-toolbar{flex-wrap:wrap!important}
  #toast{right:10px!important;bottom:10px!important}
}

/* 1.3.7 — professional in-app new-mail notification */
.mail-notification-stack{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column-reverse;gap:12px;width:min(390px,calc(100vw - 28px));pointer-events:none}
.mail-notification-card{position:relative;background:#fff;border:1px solid #dfe6f3;border-radius:18px;box-shadow:0 18px 50px rgba(25,42,82,.20);padding:18px;pointer-events:auto;animation:mailNotificationIn .23s ease-out both;overflow:hidden}
.mail-notification-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#466cff,#743cff)}
.mail-notification-main{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;padding-right:28px}
.mail-notification-avatar{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:800;background:linear-gradient(135deg,#4f72ff 0%,#7141ff 100%);box-shadow:0 8px 20px rgba(83,76,255,.27)}
.mail-notification-avatar span{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#5068f6;border:2px solid #fff;font-size:11px;box-shadow:0 3px 8px rgba(34,48,92,.18)}
.mail-notification-copy{min-width:0}
.mail-notification-label{font-size:14px;font-weight:800;color:#4866f4;margin-bottom:3px}
.mail-notification-sender{font-size:14px;font-weight:700;color:#26334f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-notification-subject{font-size:14px;font-weight:800;color:#17233f;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-notification-preview{font-size:13px;line-height:1.45;color:#6c7892;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mail-notification-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:1px solid #e3e8f2;border-radius:9px;background:#fff;color:#5f6b83;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.mail-notification-close:hover{background:#f5f7fb;color:#18233d}
.mail-notification-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:10px;margin-top:16px}
.mail-notification-actions button{height:42px;border-radius:11px;font-size:13px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.mail-notification-open{border:0;color:#fff;background:linear-gradient(135deg,#3f72ff,#703cff);box-shadow:0 8px 18px rgba(79,91,255,.22)}
.mail-notification-open:hover{filter:brightness(1.04)}
.mail-notification-read{border:1px solid #dce4f1;color:#33415f;background:#f9fbff}
.mail-notification-read:hover{background:#f1f5fc}
.mail-notification-leave{animation:mailNotificationOut .18s ease-in both}
@keyframes mailNotificationIn{from{opacity:0;transform:translate3d(18px,18px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes mailNotificationOut{to{opacity:0;transform:translate3d(20px,10px,0) scale(.98)}}
@media(max-width:700px){.mail-notification-stack{right:10px;bottom:10px;width:calc(100vw - 20px)}.mail-notification-card{padding:15px;border-radius:15px}.mail-notification-actions{grid-template-columns:1fr}.mail-notification-main{grid-template-columns:46px minmax(0,1fr);gap:11px}.mail-notification-avatar{width:46px;height:46px}}

/* =========================================================
   AUTO RESPONSIVE ENGINE — device resolution adaptation
   ========================================================= */
:root{--app-vh:1vh;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html{width:100%;height:100%;min-width:0;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;height:100%;min-width:0;max-width:100%;overflow:hidden}
.app-shell,.workspace{max-width:100vw;min-width:0}
.app-shell{height:100vh;height:100dvh;min-height:0;padding-left:var(--safe-left);padding-right:var(--safe-right)}
.workspace{height:100%;min-height:0}
.columns{min-height:0;max-width:100%}
.sidebar,.topbar,.message-list-panel,.reader-panel,.reader-content,.reader-head,.reader-tools,.bulk-toolbar{min-width:0;max-width:100%}
img,svg,video,canvas,iframe{max-width:100%}
input,select,textarea,button{max-width:100%}
.modal{padding:max(10px,var(--safe-top)) max(10px,var(--safe-right)) max(10px,var(--safe-bottom)) max(10px,var(--safe-left))}
.modal-window{max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
.body-login{min-height:100vh;min-height:100dvh;overflow:auto}
.login-pro-page{min-height:100vh;min-height:100dvh;padding-top:max(24px,var(--safe-top));padding-right:max(16px,var(--safe-right));padding-bottom:max(24px,var(--safe-bottom));padding-left:max(16px,var(--safe-left))}

/* Compact laptops and browser zoom */
@media(max-width:1366px), (max-height:768px){
  :root{--sidebar-adaptive:220px}
  .brand-row{padding-left:16px;padding-right:16px}
  .compose-btn{margin-left:12px;margin-right:12px}
  .folder-nav{padding-left:8px;padding-right:8px}
  .topbar{padding-left:14px;padding-right:14px}
}
@media(max-width:1100px){
  :root{--sidebar-adaptive:205px}
  .profile-meta{display:none}
  .search-box{flex:1;width:auto!important;max-width:420px}
}

/* Tablet */
@media(max-width:980px){
  .app-shell{display:block}
  .sidebar{position:fixed;z-index:90;left:var(--safe-left);top:var(--safe-top);bottom:var(--safe-bottom);height:auto;transform:translateX(calc(-100% - 20px));transition:transform .22s ease;box-shadow:18px 0 45px rgba(24,38,78,.18)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  body.sidebar-open:after{content:"";position:fixed;z-index:80;inset:0;background:rgba(19,28,55,.38)}
  .workspace{width:100%;height:100vh;height:100dvh}
}

/* Phones */
@media(max-width:760px){
  html,body{overflow:hidden}
  .app-shell,.workspace{width:100%;height:100vh;height:100dvh}
  .topbar{padding-top:var(--safe-top);height:auto;min-height:58px}
  .columns{height:calc(100vh - 58px - var(--safe-top));height:calc(100dvh - 58px - var(--safe-top))}
  .message-list-panel,.reader-panel{height:100%;min-height:0}
  .message-list,.reader-content{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .reader-tools,.bulk-toolbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .reader-tools>* ,.bulk-toolbar>*{flex:0 0 auto}
  .modal-window{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;border-radius:14px}
  input,select,textarea{font-size:16px}
}

/* Very narrow phones */
@media(max-width:430px){
  .topbar{gap:7px;padding-left:8px;padding-right:8px}
  .search-box{min-width:0;width:100%!important}
  .message{padding-left:10px;padding-right:10px}
  .reader-head{padding-left:12px;padding-right:12px}
  .reader-content{padding-left:12px;padding-right:12px}
}

/* Landscape phones: use available height instead of fixed desktop dimensions */
@media(orientation:landscape) and (max-height:560px){
  .topbar{min-height:50px;padding-top:var(--safe-top)}
  .columns{height:calc(100dvh - 50px - var(--safe-top))}
  .sidebar{overflow-y:auto}
  .reader-head{padding-top:10px;padding-bottom:10px}
  .reader-tools{min-height:44px}
  .modal{align-items:flex-start;overflow:auto}
  .modal-window{max-height:none!important;margin:auto}
  .login-pro-page{padding-top:12px;padding-bottom:12px}
  .login-pro-brand,.login-pro-features,.login-pro-security{display:none}
  .login-pro-card{max-height:none}
}

/* Large and ultra-wide screens */
@media(min-width:1920px){
  :root{--sidebar-adaptive:280px}
  .message-list-panel{max-width:560px}
  .topbar,.reader-head,.reader-content{padding-left:clamp(22px,2vw,40px);padding-right:clamp(22px,2vw,40px)}
}
@media(min-width:2560px){
  body{font-size:clamp(14px,.58vw,17px)}
  .message-list-panel{max-width:680px}
  .reader-content{max-width:1500px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* 1.3.8 — true viewport adaptation for compact desktop resolutions */
@media (min-width:961px) and (max-width:1440px) and (max-height:820px){
  :root{
    --owa-sidebar:clamp(176px,14vw,190px);
    --owa-list:clamp(330px,26vw,350px);
  }
  .topbar{height:64px!important;padding:0 12px!important}
  .columns{height:calc(100dvh - 65px)!important}
  .sidebar{padding:10px 10px 9px!important}
  .brand-row{padding:2px 6px 10px!important;gap:8px!important}
  .brand-mark{width:34px!important;height:34px!important}
  .brand-row strong{font-size:16px!important}
  .brand-row small{font-size:8px!important;margin-top:1px!important}
  .compose-btn{height:42px!important;margin:0 0 12px!important;padding:0 9px!important;font-size:12px!important}
  .folder-section-head{margin:0 0 5px!important;padding:0 4px!important;min-height:26px!important}
  .folder-nav{padding:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding-bottom:150px!important}
  .folder-link{height:37px!important;margin-bottom:2px!important;padding:0 8px!important;font-size:12px!important}
  .folder-link .folder-icon{width:22px!important;min-width:22px!important}
  .mail-status-card{left:9px!important;right:9px!important;bottom:8px!important;padding:10px!important;border-radius:12px!important}
  .mail-status-card hr{margin:8px 0!important}
  .mail-status-card .status-title{font-size:11px!important}
  .mail-status-card .status-subtitle,.mail-status-card small{font-size:9px!important;line-height:1.25!important}
  .search-box{height:40px!important;width:min(360px,38vw)!important}
  .top-actions{gap:7px!important}
  .top-actions>button{width:38px!important;height:38px!important}
  .profile-trigger{height:42px!important;min-width:180px!important}
  .panel-head{padding:14px 12px 8px!important}
  .panel-head h2{font-size:18px!important}
  .bulk-toolbar{margin:0 7px 7px!important;padding:8px!important;gap:6px!important}
  .bulk-toolbar button{min-height:31px!important;padding:0 7px!important;font-size:10px!important}
  .messages{padding:0 7px 10px!important}
  .message{min-height:76px!important;padding:10px 9px!important;grid-template-columns:20px 38px minmax(0,1fr) 54px!important;gap:9px!important}
  .message .bubble{width:38px!important;height:38px!important;font-size:12px!important}
  .message h4{font-size:12px!important}
  .message .subject{font-size:12px!important;margin-top:2px!important}
  .message p{font-size:11px!important;margin-top:3px!important}
  .meta{font-size:9px!important}
  .reader-tools{min-height:56px!important;height:auto!important;padding:8px 10px!important;gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto!important}
  .reader-tools button{height:32px!important;padding:0 10px!important;font-size:11px!important;white-space:nowrap!important}
  .reader-content{padding:12px 14px 16px!important}
}

@media (min-width:961px) and (max-height:720px){
  :root{--owa-sidebar:176px;--owa-list:320px}
  .topbar{height:58px!important}
  .columns{height:calc(100dvh - 59px)!important}
  .brand-row{padding-bottom:7px!important}
  .compose-btn{height:38px!important;margin-bottom:8px!important}
  .folder-link{height:33px!important}
  .mail-status-card{padding:8px!important}
  .mail-status-card .status-details{display:none!important}
  .panel-head{padding-top:10px!important}
  .bulk-toolbar{padding:6px!important}
  .message{min-height:68px!important;padding-top:8px!important;padding-bottom:8px!important}
  .reader-tools{min-height:50px!important;padding-top:6px!important;padding-bottom:6px!important}
}


/* 1.3.9 — sidebar truly adapts on compact desktop resolutions */
@media (min-width:961px){
  .sidebar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    min-height:0!important;
    height:100vh!important;
    height:100dvh!important;
    overflow:hidden!important;
  }
  .brand-row,
  .compose-btn,
  .folder-section-head,
  .folder-actions,
  .mail-status-card{
    flex:0 0 auto;
  }
  .folder-nav{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:8px!important;
    scrollbar-gutter:stable;
  }
  .mail-status-card{
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-top:10px!important;
  }
}

@media (min-width:961px) and (max-width:1440px) and (max-height:820px){
  .sidebar{padding-bottom:8px!important}
  .folder-nav{padding-bottom:6px!important}
  .mail-status-card{margin-top:8px!important}
}

@media (min-width:961px) and (max-height:720px){
  .mail-status-card .status-line{gap:9px!important}
  .mail-status-card .status-meta{padding-top:10px!important;margin-top:10px!important}
}


/* 1.3.10 — compact compose modal and guaranteed viewport fit */
#composeModal{
  padding:12px!important;
  overflow:hidden!important;
}
#composeModal .compose-premium{
  display:flex!important;
  flex-direction:column!important;
  width:min(1040px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100vh - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:hidden!important;
}
#composeModal .modal-head{
  flex:0 0 auto!important;
}
#composeModal .compose-form{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
}
#composeModal .compose-editor-wrap{
  flex:1 0 auto;
  min-height:180px!important;
}
#composeModal .compose-editor-wrap .editor{
  min-height:clamp(180px,36vh,330px)!important;
  max-height:none!important;
}
#composeModal .compose-toolbar{
  position:sticky;
  bottom:0;
  z-index:3;
  flex:0 0 auto;
  padding-bottom:2px;
  background:#fff;
}
@media (min-width:961px) and (max-height:820px){
  #composeModal{padding:8px!important}
  #composeModal .compose-premium{
    max-height:calc(100dvh - 16px)!important;
    width:min(920px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
  }
  #composeModal .modal-head{padding:10px 14px!important}
  #composeModal .modal-head strong{font-size:16px!important}
  #composeModal .modal-head small{display:none!important}
  #composeModal .compose-grid{padding:6px 14px 10px!important}
  #composeModal .compose-row{min-height:46px!important}
  #composeModal .compose-format-toolbar{margin-top:6px!important}
  #composeModal .compose-editor-wrap{margin-top:8px!important;min-height:150px!important}
  #composeModal .compose-editor-wrap .editor{min-height:clamp(150px,31vh,245px)!important;padding:14px!important}
  #composeModal .compose-toolbar{padding-top:8px!important}
}
@media (min-width:961px) and (max-height:720px){
  #composeModal .compose-row{min-height:42px!important}
  #composeModal .compose-row input,#composeModal .from-select{height:36px!important}
  #composeModal .compose-editor-wrap .editor{min-height:135px!important}
}


/* 1.3.11 — compact full-height sidebar without wasted vertical space */
@media (min-width:961px) and (max-height:820px){
  .sidebar{padding-top:8px!important;padding-bottom:7px!important}
  .brand-row{padding-top:0!important;padding-bottom:6px!important}
  .compose-btn{margin-bottom:6px!important}
  .folder-section-head{min-height:22px!important;margin-bottom:2px!important}
  .folder-nav{
    gap:1px!important;
    padding-bottom:3px!important;
    scrollbar-gutter:auto!important;
  }
  .folder-link{
    height:31px!important;
    min-height:31px!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    line-height:1!important;
  }
  .folder-link .folder-icon{width:20px!important;min-width:20px!important}
  .folder-link .folder-icon svg{width:17px!important;height:17px!important}
  .mail-status-card{
    margin-top:5px!important;
    padding:7px 8px!important;
  }
  .mail-status-card .status-line{gap:7px!important}
  .mail-status-card .status-line strong{font-size:11px!important;line-height:1.15!important}
  .mail-status-card .status-line small{font-size:8px!important;margin-top:2px!important}
  .mailbox-storage-card{
    margin-top:6px!important;
    padding-top:6px!important;
    padding-bottom:0!important;
    gap:6px!important;
    font-size:8px!important;
    line-height:1.25!important;
  }
  .mailbox-storage-icon{width:22px!important;height:22px!important;border-radius:7px!important}
  .mailbox-storage-icon svg{width:14px!important;height:14px!important}
  .mail-status-card .status-meta{
    margin-top:6px!important;
    padding-top:6px!important;
    font-size:8px!important;
  }
  .mail-status-card .status-meta b{font-size:12px!important}
}


/* 1.3.12 — folder counters visible next to the system folders */
.folder-link{min-width:0}
.folder-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#edf2ff;color:#4961c9;font-size:11px;font-style:normal;font-weight:700;line-height:1;white-space:nowrap}
.folder-link.active .folder-count{background:#dfe7ff;color:#2f53d8}


/* 1.3.13 — resizable reading pane and folder actions only in context menu */
.columns{
  --user-list-width:350px;
  grid-template-columns:minmax(280px,var(--user-list-width)) 7px minmax(0,1fr)!important;
}
.reader-splitter{
  position:relative;
  z-index:6;
  width:7px;
  min-width:7px;
  height:100%;
  cursor:col-resize;
  background:transparent;
  touch-action:none;
  user-select:none;
  outline:none;
}
.reader-splitter:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:3px;
  width:1px;
  background:#e2e8f3;
  transition:background .15s ease,width .15s ease,left .15s ease;
}
.reader-splitter:hover:before,.reader-splitter:focus-visible:before,body.resizing-reader .reader-splitter:before{
  left:2px;
  width:3px;
  border-radius:3px;
  background:#657cff;
}
.reader-splitter span{
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:44px;
  transform:translateY(-50%);
  border-radius:7px;
}
body.resizing-reader,body.resizing-reader *{cursor:col-resize!important;user-select:none!important}
.folder-actions{display:none!important}
@media(max-width:960px){
  .columns{grid-template-columns:minmax(285px,37vw) minmax(0,1fr)!important}
  .reader-splitter{display:none!important}
}
@media(max-width:720px){.columns{grid-template-columns:minmax(0,1fr)!important}}


/* 1.3.14 — unclipped desktop shell and stable read badge */
.message{position:relative}

@media (min-width:961px){
  body.body-app{
    background:linear-gradient(180deg,#f5f8fd 0%,#eef3fb 100%)!important;
  }
  .app-shell{
    padding:8px!important;
    gap:8px!important;
    background:transparent!important;
    box-sizing:border-box!important;
  }
  .sidebar,
  .workspace{
    height:calc(100dvh - 16px)!important;
    border-radius:18px!important;
    border:1px solid #e3eaf6!important;
    background:#fff!important;
    box-shadow:0 12px 28px rgba(23,38,77,.06)!important;
  }
  .sidebar{
    border-right:1px solid #e3eaf6!important;
  }
  .workspace{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
  }
  .columns{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
  }
  .message-list-panel,
  .reader-panel{
    min-height:0!important;
  }
  .messages{
    padding-bottom:28px!important;
  }
  .reader-content{
    padding-bottom:34px!important;
  }
  .quick-reply{
    margin-bottom:8px!important;
  }
}

@media (min-width:961px) and (max-height:820px){
  .messages{padding-bottom:22px!important}
  .reader-content{padding-bottom:28px!important}
}


/* 1.3.15 — sent folder status label */
.message[data-status-label="Изпратено"]::after{background:#eaf7ef;color:#25834d}


/* 1.3.21 — real landscape-phone simulation and adaptive mobile workspace */
.mobile-reader-back{display:none!important}

@media (orientation:landscape) and (max-height:560px) and (max-width:1024px){
  html,body{width:100%;height:100%;overflow:hidden!important}
  body.body-app{background:#fff!important}
  .app-shell{
    display:block!important;
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  .sidebar{display:none!important}
  .workspace{
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .topbar{
    height:48px!important;
    min-height:48px!important;
    padding:max(2px,var(--safe-top)) max(8px,var(--safe-right)) 2px max(8px,var(--safe-left))!important;
    gap:7px!important;
  }
  .search-box{
    width:auto!important;
    max-width:none!important;
    flex:1 1 auto!important;
    min-width:0!important;
    height:36px!important;
    border-radius:11px!important;
    padding:0 10px!important;
  }
  .search-box input{font-size:13px!important}
  .top-actions{gap:6px!important;flex:0 0 auto!important}
  .top-actions>button,.icon-btn{width:36px!important;height:36px!important;border-radius:11px!important}
  .profile-trigger{height:38px!important;min-width:44px!important;padding:0 7px!important}
  .profile-meta{display:none!important}
  .profile-chevron{display:none!important}
  .columns{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    height:calc(100dvh - 48px - var(--safe-top))!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .message-list-panel{
    display:flex!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  .panel-head{
    min-height:42px!important;
    padding:7px 10px 5px!important;
    align-items:center!important;
  }
  .panel-head h2{font-size:17px!important}
  .panel-head .icon-btn{width:34px!important;height:34px!important}
  .bulk-toolbar{
    margin:0 7px 6px!important;
    width:calc(100% - 14px)!important;
    padding:6px!important;
    gap:5px!important;
    border-radius:11px!important;
  }
  .bulk-toolbar button{min-height:29px!important;height:29px!important;padding:0 8px!important;font-size:10px!important}
  .messages{padding:0 7px 10px!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  .message{
    min-height:64px!important;
    padding:7px 9px!important;
    grid-template-columns:20px 36px minmax(0,1fr) 52px!important;
    gap:8px!important;
  }
  .message .bubble{width:36px!important;height:36px!important;font-size:12px!important}
  .message h4,.message .subject{font-size:12px!important}
  .message p{font-size:10px!important;margin-top:2px!important}
  .message::after{bottom:5px!important;right:7px!important;font-size:8px!important}
  .reader-splitter{display:none!important}
  .reader-panel{
    position:fixed!important;
    inset:0!important;
    z-index:700!important;
    display:none!important;
    flex-direction:column!important;
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  .reader-panel.mobile-open{display:flex!important}
  .reader-tools{
    flex:0 0 auto!important;
    min-height:46px!important;
    height:46px!important;
    padding:max(4px,var(--safe-top)) max(8px,var(--safe-right)) 4px max(8px,var(--safe-left))!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    background:#fff!important;
  }
  .reader-tools button{height:34px!important;padding:0 9px!important;font-size:10px!important;border-radius:10px!important;white-space:nowrap!important;flex:0 0 auto!important}
  .mobile-reader-back{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:sticky!important;left:0!important;z-index:2!important;font-weight:700!important;background:#eef3ff!important;color:#3157d5!important;line-height:1!important}
  .reader-content{
    flex:1 1 auto!important;
    min-height:0!important;
    padding:10px 12px max(18px,var(--safe-bottom))!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:auto!important;
  }
  .mail-title h1{font-size:20px!important}
  .sender{margin:10px 0!important;gap:9px!important}
  .sender .bubble{width:38px!important;height:38px!important}
  .quick-reply{margin-top:12px!important;padding:11px!important;font-size:12px!important}
  .attachments{margin-top:12px!important;padding-top:10px!important;gap:7px!important}
  .attachment{min-width:min(220px,100%)!important;padding:9px 10px!important;font-size:11px!important}

  /* Compose/reply must fit the short landscape viewport. */
  #composeModal{
    align-items:stretch!important;
    justify-content:stretch!important;
    padding:4px!important;
    overflow:hidden!important;
  }
  #composeModal .compose-premium{
    width:100%!important;
    max-width:100%!important;
    height:calc(100dvh - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
    margin:0!important;
    border-radius:12px!important;
  }
  #composeModal .modal-head{min-height:38px!important;padding:6px 10px!important}
  #composeModal .modal-head strong{font-size:14px!important}
  #composeModal .modal-head small{display:none!important}
  #composeModal .compose-form{overflow-y:auto!important}
  #composeModal .compose-grid{padding:4px 9px 7px!important}
  #composeModal .compose-row{grid-template-columns:58px minmax(0,1fr) auto!important;min-height:36px!important;gap:6px!important}
  #composeModal .compose-row>label{font-size:11px!important}
  #composeModal .compose-row input,#composeModal .from-select{height:31px!important;padding:0 8px!important;font-size:12px!important;border-radius:8px!important}
  #composeModal .recipient-links{gap:6px!important}
  #composeModal .recipient-links button{font-size:10px!important}
  #composeModal .compose-format-toolbar{min-height:34px!important;margin-top:4px!important;padding:3px 5px!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important}
  #composeModal .compose-editor-wrap{min-height:92px!important;margin-top:5px!important;border-radius:9px!important}
  #composeModal .compose-editor-wrap .editor{min-height:92px!important;padding:9px!important;font-size:13px!important}
  #composeModal .compose-toolbar{padding-top:5px!important;min-height:40px!important}
  #composeModal .send-btn{height:34px!important;min-width:110px!important}

  /* Other dialogs use the available height instead of extending below it. */
  .modal{padding:4px!important;align-items:center!important;overflow:hidden!important}
  .modal-window,.modal-card{
    max-height:calc(100dvh - 8px)!important;
    overflow-y:auto!important;
    margin:auto!important;
  }
}

@media (orientation:landscape) and (max-height:430px) and (max-width:1024px){
  .topbar{height:44px!important;min-height:44px!important}
  .columns{height:calc(100dvh - 44px - var(--safe-top))!important}
  .panel-head{min-height:38px!important;padding-top:4px!important;padding-bottom:3px!important}
  .bulk-toolbar{padding:4px!important;margin-bottom:4px!important}
  .bulk-toolbar button{height:27px!important;min-height:27px!important}
  .message{min-height:58px!important}
  .reader-tools{height:42px!important;min-height:42px!important}
  .reader-tools button{height:31px!important}
}


/* 1.4.0 — approved mobile-first portrait and landscape split-view design */
.mobile-menu-btn,.mobile-brand,.mobile-bottom-nav{display:none}

/* Portrait phones: true app-like inbox */
@media (max-width:699px) and (orientation:portrait), (max-width:699px) and (max-height:760px){
  html,body{background:#f7f9fd!important;overflow:hidden!important}
  body.body-app{background:#f7f9fd!important}
  .app-shell{display:block!important;width:100%!important;height:100dvh!important;padding:0!important;background:#f7f9fd!important;border:0!important;overflow:hidden!important}
  .workspace{width:100%!important;height:100dvh!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#f7f9fd!important;overflow:hidden!important}
  .sidebar{display:flex!important;width:min(86vw,330px)!important;height:100dvh!important;position:fixed!important;z-index:900!important;left:0!important;top:0!important;transform:translateX(-105%)!important;transition:transform .22s ease!important;border-radius:0 20px 20px 0!important;box-shadow:18px 0 50px rgba(26,41,82,.2)!important}
  body.sidebar-open .sidebar{transform:translateX(0)!important}
  body.sidebar-open:after{content:"";position:fixed;z-index:850;inset:0;background:rgba(19,29,55,.38)}

  .topbar{display:grid!important;grid-template-columns:44px minmax(0,1fr) 52px!important;grid-template-rows:56px 54px!important;height:110px!important;min-height:110px!important;padding:max(4px,var(--safe-top)) 14px 6px!important;gap:0 8px!important;background:#fff!important;border-bottom:1px solid #e8edf7!important}
  .mobile-menu-btn{display:grid!important;place-items:center!important;grid-column:1;grid-row:1;width:42px!important;height:42px!important;align-self:center;border:0;background:transparent;color:#17233f;font-size:25px;border-radius:12px}
  .mobile-brand{display:flex!important;grid-column:2;grid-row:1;align-items:center;justify-content:center;gap:9px;color:#162342}
  .mobile-brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,#426cff,#7044ff);color:#fff;font-size:17px}
  .mobile-brand strong{font-size:21px;letter-spacing:-.02em}
  .search-box{grid-column:1/4!important;grid-row:2!important;width:100%!important;height:44px!important;border-radius:14px!important;background:#fbfcff!important;padding:0 13px!important}
  .search-box input{font-size:16px!important}
  .top-actions{grid-column:3;grid-row:1;align-self:center;justify-self:end;gap:0!important}
  .top-actions>#refreshBtn,.top-actions>#settingsBtn{display:none!important}
  .profile-trigger{width:46px!important;min-width:46px!important;height:46px!important;padding:0!important;border:0!important;background:transparent!important}
  .profile-trigger .avatar{width:42px!important;height:42px!important}
  .profile-meta,.profile-trigger .chev{display:none!important}
  .profile-dropdown{right:0!important;top:50px!important}

  .columns{display:block!important;width:100%!important;height:calc(100dvh - 110px - 72px - var(--safe-bottom))!important;padding:10px 10px 0!important;overflow:hidden!important;background:#f7f9fd!important}
  .message-list-panel{display:flex!important;height:100%!important;border:0!important;border-radius:18px 18px 0 0!important;background:#fff!important;overflow:hidden!important;box-shadow:0 4px 18px rgba(27,43,86,.05)!important}
  .panel-head{min-height:58px!important;padding:15px 16px 8px!important}
  .panel-head h2{font-size:22px!important}
  .panel-head small{display:none!important}
  .panel-head .icon-btn{width:38px!important;height:38px!important}
  .filters{display:none!important}
  .bulk-toolbar{display:flex!important;align-items:center!important;gap:7px!important;margin:0 10px 9px!important;padding:7px!important;width:calc(100% - 20px)!important;border-radius:14px!important;overflow-x:auto!important;overflow-y:hidden!important;background:#f8faff!important}
  .bulk-toolbar .select-all-label{flex:0 0 42px!important;width:42px!important;height:38px!important;padding:0!important;justify-content:center!important}
  .bulk-toolbar .select-all-label span{font-size:0!important}
  .bulk-toolbar .select-all-label span:before{content:"✓";font-size:14px}
  .bulk-toolbar>span{display:none!important}
  .bulk-toolbar button{display:none!important}
  #bulkMoveBtn,#bulkDeleteBtn,#bulkArchiveBtn{display:inline-flex!important;flex:0 0 auto!important;height:38px!important;padding:0 14px!important;font-size:12px!important;border-radius:11px!important}
  .bulk-toolbar:after{content:"•••";display:grid;place-items:center;flex:0 0 42px;height:38px;border:1px solid #dce4f3;border-radius:11px;background:#fff;color:#53627f;font-weight:800}

  .messages{padding:0 10px 24px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  .message{min-height:108px!important;margin:0 0 10px!important;padding:14px 12px!important;grid-template-columns:18px 48px minmax(0,1fr) 64px!important;gap:10px!important;border:1px solid #e6ebf5!important;border-radius:16px!important;background:#fff!important;box-shadow:0 5px 15px rgba(26,43,84,.05)!important}
  .message:hover,.message.active{border-color:#bdccff!important;background:#f9fbff!important}
  .message .bubble{width:48px!important;height:48px!important;font-size:15px!important}
  .message h4{font-size:14px!important;line-height:1.3!important}
  .message .subject{font-size:14px!important;margin-top:5px!important}
  .message p{font-size:12px!important;line-height:1.4!important;margin-top:5px!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
  .message .meta{font-size:11px!important}
  .message .star{margin-top:22px!important}
  .message::after{bottom:10px!important;right:10px!important}

  .reader-splitter{display:none!important}
  .reader-panel{position:fixed!important;z-index:950!important;inset:0!important;width:100%!important;height:100dvh!important;display:none!important;background:#fff!important;overflow:hidden!important}
  .reader-panel.mobile-open{display:flex!important}
  .reader-tools{flex:0 0 auto!important;height:58px!important;min-height:58px!important;padding:max(6px,var(--safe-top)) 8px 6px!important;gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto!important;background:#fff!important}
  .reader-tools button{height:40px!important;padding:0 12px!important;font-size:11px!important;white-space:nowrap!important;flex:0 0 auto!important}
  .mobile-reader-back{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#eef3ff!important;color:#3158d8!important;font-weight:700!important;line-height:1!important}
  .reader-content{padding:18px 16px max(26px,var(--safe-bottom))!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  .mail-title h1{font-size:24px!important}
  .sender{margin:17px 0!important}

  .mobile-bottom-nav{display:grid!important;position:fixed!important;z-index:800!important;left:8px!important;right:8px!important;bottom:max(6px,var(--safe-bottom))!important;height:66px!important;grid-template-columns:repeat(5,1fr)!important;border:1px solid #e3e9f5!important;border-radius:20px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 12px 32px rgba(24,40,81,.15)!important;overflow:hidden!important}
  .mobile-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#7d89a2;font-size:18px}
  .mobile-bottom-nav button small{font-size:10px}
  .mobile-bottom-nav button.active,.mobile-bottom-nav button.primary{color:#3d62ef;background:#f2f5ff}
  .mobile-bottom-nav button.primary span{font-size:22px}

  #composeModal{padding:5px!important;align-items:stretch!important}
  #composeModal .compose-premium{width:100%!important;max-width:100%!important;height:calc(100dvh - 10px)!important;max-height:calc(100dvh - 10px)!important;border-radius:17px!important}
}

/* Landscape phones: approved side-by-side list + reader */
@media (orientation:landscape) and (min-width:700px) and (max-width:1024px) and (max-height:560px){
  html,body{overflow:hidden!important;background:#f7f9fd!important}
  .app-shell{display:block!important;width:100%!important;height:100dvh!important;padding:0!important;background:#f7f9fd!important}
  .sidebar,.mobile-bottom-nav{display:none!important}
  .workspace{height:100dvh!important;width:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
  .topbar{display:grid!important;grid-template-columns:auto minmax(240px,1fr) auto!important;height:54px!important;min-height:54px!important;padding:max(3px,var(--safe-top)) max(12px,var(--safe-right)) 3px max(12px,var(--safe-left))!important;gap:12px!important;background:#fff!important}
  .mobile-menu-btn{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border:0;background:transparent;font-size:22px;color:#17233f}
  .mobile-brand{display:flex!important;grid-column:1;grid-row:1;align-items:center;gap:7px;margin-left:42px;color:#17233f;white-space:nowrap}
  .mobile-brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#426cff,#7044ff);color:#fff}
  .mobile-brand strong{font-size:18px}
  .search-box{grid-column:2;grid-row:1;width:100%!important;height:38px!important;border-radius:13px!important}
  .top-actions{grid-column:3;grid-row:1;gap:6px!important}
  .top-actions>#refreshBtn{display:none!important}
  .top-actions>#settingsBtn{display:grid!important;width:38px!important;height:38px!important}
  .profile-trigger{height:40px!important;min-width:44px!important;padding:0 6px!important}
  .profile-meta,.profile-trigger .chev{display:none!important}

  .columns{display:grid!important;grid-template-columns:minmax(300px,38%) 5px minmax(0,1fr)!important;width:100%!important;height:calc(100dvh - 54px - var(--safe-top))!important;padding:0!important;overflow:hidden!important}
  .message-list-panel{display:flex!important;height:100%!important;border-right:1px solid #e5eaf4!important;background:#fff!important;overflow:hidden!important}
  .panel-head{min-height:49px!important;padding:9px 12px 5px!important}
  .panel-head h2{font-size:17px!important}
  .panel-head small,.filters{display:none!important}
  .bulk-toolbar{display:none!important}
  .messages{padding:0!important;overflow-y:auto!important}
  .message{min-height:73px!important;margin:0!important;padding:9px 10px!important;grid-template-columns:18px 38px minmax(0,1fr) 52px!important;gap:8px!important;border:0!important;border-bottom:1px solid #edf0f6!important;border-radius:0!important;box-shadow:none!important}
  .message.active{border-left:3px solid #4c68ff!important;background:#f2f6ff!important}
  .message .bubble{width:38px!important;height:38px!important;font-size:12px!important}
  .message h4,.message .subject{font-size:11px!important}
  .message p{font-size:9px!important;margin-top:2px!important}
  .message::after{display:none!important}
  .reader-splitter{display:block!important;width:5px!important;cursor:col-resize!important;background:#f1f4fa!important;border-left:1px solid #e0e6f1!important;border-right:1px solid #e0e6f1!important}
  .reader-panel{position:static!important;display:flex!important;width:auto!important;height:100%!important;overflow:hidden!important;background:#fff!important}
  .reader-tools{height:48px!important;min-height:48px!important;padding:6px 9px!important;gap:5px!important;overflow-x:auto!important;flex-wrap:nowrap!important}
  .reader-tools button{height:34px!important;padding:0 9px!important;font-size:10px!important;flex:0 0 auto!important;white-space:nowrap!important}
  .mobile-reader-back{display:none!important}
  .reader-content{padding:12px 16px 20px!important;overflow-y:auto!important}
  .mail-title h1{font-size:21px!important}
  .sender{margin:10px 0 12px!important;gap:9px!important}
  .sender .bubble{width:38px!important;height:38px!important}
  .empty-state{min-height:0!important}
}


/* 1.4.1 — real-device mobile correction based on iPhone Safari screenshots */
@media (max-width:699px) and (orientation:portrait){
  .topbar{
    grid-template-rows:50px 46px!important;
    height:96px!important;
    min-height:96px!important;
    padding:max(2px,var(--safe-top)) 12px 4px!important;
  }
  .mobile-menu-btn{width:38px!important;height:38px!important;font-size:22px!important}
  .mobile-brand-mark{width:28px!important;height:28px!important;font-size:15px!important}
  .mobile-brand strong{font-size:19px!important}
  .profile-trigger{width:40px!important;min-width:40px!important;height:40px!important}
  .profile-trigger .avatar{width:38px!important;height:38px!important}
  .search-box{height:40px!important;border-radius:13px!important;padding:0 12px!important}
  .search-box input{font-size:15px!important}

  .columns{
    height:calc(100dvh - 96px - 62px - var(--safe-bottom))!important;
    padding:7px 7px 0!important;
  }
  .message-list-panel{border-radius:16px 16px 0 0!important}
  .panel-head{min-height:50px!important;padding:11px 12px 6px!important}
  .panel-head h2{font-size:20px!important}
  .panel-head .icon-btn{width:34px!important;height:34px!important}

  .bulk-toolbar{
    display:grid!important;
    grid-template-columns:38px minmax(74px,1fr) minmax(68px,.9fr) minmax(68px,.9fr) 38px!important;
    align-items:center!important;
    gap:5px!important;
    margin:0 7px 7px!important;
    padding:5px!important;
    width:calc(100% - 14px)!important;
    overflow:visible!important;
    border-radius:12px!important;
  }
  .bulk-toolbar .select-all-label{
    width:38px!important;
    min-width:38px!important;
    height:34px!important;
    padding:0!important;
  }
  .bulk-toolbar button{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 7px!important;
    justify-content:center!important;
    font-size:10px!important;
    line-height:1!important;
    border-radius:9px!important;
    white-space:nowrap!important;
  }
  #bulkMoveBtn,#bulkDeleteBtn,#bulkArchiveBtn{display:inline-flex!important;flex:none!important}
  .bulk-toolbar:after{
    width:38px!important;
    min-width:38px!important;
    height:34px!important;
    flex:none!important;
    border-radius:9px!important;
  }

  .messages{padding:0 7px 16px!important}
  .message{
    min-height:88px!important;
    margin-bottom:7px!important;
    padding:10px 9px!important;
    grid-template-columns:16px 42px minmax(0,1fr) 58px!important;
    gap:8px!important;
    border-radius:14px!important;
  }
  .message .bubble{width:42px!important;height:42px!important;font-size:13px!important}
  .message h4{font-size:13px!important;line-height:1.2!important}
  .message .subject{font-size:13px!important;margin-top:3px!important}
  .message p{
    font-size:11px!important;
    line-height:1.3!important;
    margin-top:3px!important;
    -webkit-line-clamp:2!important;
  }
  .message .meta{font-size:10px!important;line-height:1.2!important}
  .message .star{font-size:16px!important;margin-top:16px!important}
  .message::after{font-size:8px!important;bottom:7px!important;right:8px!important}

  .mobile-bottom-nav{
    left:6px!important;
    right:6px!important;
    height:56px!important;
    bottom:max(4px,var(--safe-bottom))!important;
    border-radius:17px!important;
  }
  .mobile-bottom-nav button{gap:1px!important;font-size:16px!important}
  .mobile-bottom-nav button small{font-size:9px!important}
  .mobile-bottom-nav button.primary span{font-size:19px!important}
}

@media (orientation:landscape) and (min-width:700px) and (max-width:1024px) and (max-height:560px){
  .topbar{
    grid-template-columns:auto minmax(180px,1fr) auto!important;
    height:44px!important;
    min-height:44px!important;
    padding:max(1px,var(--safe-top)) max(8px,var(--safe-right)) 1px max(8px,var(--safe-left))!important;
    gap:8px!important;
  }
  .mobile-menu-btn{width:32px!important;height:32px!important;font-size:19px!important}
  .mobile-brand{margin-left:34px!important;gap:5px!important}
  .mobile-brand-mark{width:24px!important;height:24px!important;font-size:13px!important}
  .mobile-brand strong{font-size:16px!important}
  .search-box{height:32px!important;border-radius:10px!important;padding:0 9px!important}
  .search-box input{font-size:12px!important}
  .top-actions{gap:4px!important}
  .top-actions>#settingsBtn{width:32px!important;height:32px!important}
  .profile-trigger{height:34px!important;min-width:38px!important;padding:0 4px!important}
  .profile-trigger .avatar{width:30px!important;height:30px!important;font-size:11px!important}

  .columns{
    grid-template-columns:minmax(255px,33%) 4px minmax(0,1fr)!important;
    height:calc(100dvh - 44px - var(--safe-top))!important;
  }
  .panel-head{min-height:40px!important;padding:6px 9px 4px!important}
  .panel-head h2{font-size:15px!important}
  .panel-head .icon-btn{width:30px!important;height:30px!important}
  .message{
    min-height:62px!important;
    padding:7px 8px!important;
    grid-template-columns:15px 34px minmax(0,1fr) 46px!important;
    gap:6px!important;
  }
  .message .bubble{width:34px!important;height:34px!important;font-size:11px!important}
  .message h4{font-size:10.5px!important;line-height:1.15!important}
  .message .subject{font-size:10.5px!important;margin-top:2px!important}
  .message p{font-size:8.5px!important;line-height:1.2!important;margin-top:2px!important}
  .message .meta{font-size:8.5px!important}

  .reader-splitter{width:4px!important;min-width:4px!important}
  .reader-tools{
    height:42px!important;
    min-height:42px!important;
    padding:4px 7px!important;
    gap:4px!important;
  }
  .reader-tools button{
    height:32px!important;
    padding:0 9px!important;
    font-size:10.5px!important;
    border-radius:9px!important;
  }
  .reader-content{padding:10px 14px 18px!important}
  .mail-title h1{font-size:22px!important;line-height:1.15!important}
  .sender{margin:8px 0 10px!important;gap:8px!important}
  .sender .bubble{width:36px!important;height:36px!important;font-size:12px!important}
  .sender .info b{font-size:12px!important}
  .sender .info small{font-size:9.5px!important}
  .mail-body-frame-wrap{font-size:13px!important}
  .attachments{margin-top:12px!important;padding-top:10px!important}
  .quick-reply{margin-top:12px!important;padding:10px!important}
}

/* Very short iPhone landscape viewport after Safari chrome */
@media (orientation:landscape) and (min-width:700px) and (max-width:1024px) and (max-height:420px){
  .topbar{height:40px!important;min-height:40px!important}
  .columns{height:calc(100dvh - 40px - var(--safe-top))!important}
  .mobile-brand strong{font-size:15px!important}
  .reader-tools{height:38px!important;min-height:38px!important;padding-top:3px!important;padding-bottom:3px!important}
  .reader-tools button{height:30px!important;font-size:10px!important}
  .panel-head{min-height:36px!important}
  .message{min-height:58px!important}
  .reader-content{padding-top:8px!important}
}


/* 1.4.2 — portrait bulk toolbar aligned to approved compact row */
@media (max-width:699px) and (orientation:portrait){
  .bulk-toolbar{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 8px 10px!important;
    padding:8px!important;
    width:calc(100% - 16px)!important;
    min-height:0!important;
    background:#fff!important;
    border:1px solid #e3e9f5!important;
    border-radius:14px!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .bulk-toolbar .select-all-label{
    order:1!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    height:40px!important;
    padding:0!important;
    justify-content:center!important;
    border:1px solid #e0e7f3!important;
    border-radius:12px!important;
    background:#fff!important;
  }
  .bulk-toolbar .select-all-label span,
  .bulk-toolbar #selectedCount,
  .bulk-toolbar #bulkUnreadBtn,
  .bulk-toolbar #bulkSpamBtn{
    display:none!important;
  }
  .bulk-toolbar button{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .bulk-toolbar button span{font-size:14px!important}
  #bulkMoveBtn{order:2!important}
  #bulkDeleteBtn{order:3!important;flex:0 0 92px!important}
  #bulkArchiveBtn{order:4!important;flex:0 0 92px!important}
  #bulkMoreBtn{
    order:5!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    padding:0!important;
    font-size:21px!important;
    font-weight:700!important;
  }
  .bulk-toolbar::after{content:none!important;display:none!important}
  .bulk-more-menu{min-width:170px!important}
  .bulk-more-menu button{height:38px!important;font-size:13px!important;justify-content:flex-start!important;padding:0 14px!important}
}


/* 1.4.3 — definitive portrait UI rebuilt from the approved reference */
@media (max-width:699px) and (orientation:portrait){
  html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  .topbar{
    grid-template-columns:42px minmax(0,1fr) 46px!important;
    grid-template-rows:52px 46px!important;
    height:98px!important;min-height:98px!important;
    padding:max(2px,var(--safe-top)) 14px 4px!important;
    column-gap:8px!important;
  }
  .mobile-menu-btn{width:38px!important;height:38px!important;padding:7px!important}
  .mobile-menu-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .mobile-brand{gap:9px!important}
  .mobile-brand-mark{width:30px!important;height:30px!important;border-radius:8px!important;padding:5px!important}
  .mobile-brand-mark svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mobile-brand strong{font-size:21px!important}
  .profile-trigger{width:42px!important;min-width:42px!important;height:42px!important}
  .profile-trigger .avatar{width:40px!important;height:40px!important;font-size:13px!important}
  .search-box{height:42px!important;border-radius:13px!important;padding:0 13px!important}
  .search-box input{font-size:15px!important}

  .columns{
    height:calc(100dvh - 98px - 62px - var(--safe-bottom))!important;
    padding:9px 9px 0!important;
  }
  .message-list-panel{border-radius:18px 18px 0 0!important;box-shadow:0 5px 18px rgba(28,43,82,.055)!important}
  .panel-head{min-height:54px!important;padding:12px 13px 7px!important}
  .panel-head h2{font-size:21px!important;line-height:1.1!important}
  .panel-head .icon-btn{width:36px!important;height:36px!important;border-radius:12px!important}

  .bulk-toolbar{
    display:grid!important;
    grid-template-columns:38px minmax(74px,1fr) 72px 72px 38px!important;
    grid-template-rows:40px!important;
    align-items:center!important;
    gap:5px!important;
    width:calc(100% - 16px)!important;
    min-height:56px!important;
    margin:0 8px 9px!important;
    padding:8px!important;
    overflow:visible!important;
    background:#f8faff!important;
    border:1px solid #e1e7f3!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
  }
  .bulk-toolbar .select-all-label{
    grid-column:1!important;grid-row:1!important;
    width:38px!important;min-width:38px!important;height:40px!important;
    margin:0!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border:1px solid #dce4f2!important;border-radius:11px!important;background:#fff!important;
  }
  .bulk-toolbar .select-all-label span,.bulk-toolbar #selectedCount,
  #bulkUnreadBtn,#bulkSpamBtn{display:none!important}
  .bulk-toolbar button{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
    width:100%!important;min-width:0!important;height:40px!important;min-height:40px!important;
    padding:0 7px!important;border-radius:11px!important;
    font-size:11px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;
  }
  .bulk-toolbar button svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #bulkMoveBtn{grid-column:2!important;grid-row:1!important}
  #bulkDeleteBtn{grid-column:3!important;grid-row:1!important;color:#c94c63!important}
  #bulkArchiveBtn{grid-column:4!important;grid-row:1!important}
  #bulkMoreBtn{grid-column:5!important;grid-row:1!important;display:grid!important;place-items:center!important;padding:0!important;font-size:0!important}
  #bulkMoreBtn svg{width:20px!important;height:20px!important;fill:currentColor!important;stroke:none!important}
  .bulk-toolbar::after{display:none!important;content:none!important}

  .messages{padding:0 8px 18px!important}
  .message{
    min-height:94px!important;
    margin:0 0 8px!important;
    padding:11px 10px!important;
    grid-template-columns:17px 44px minmax(0,1fr) 58px!important;
    gap:9px!important;
    border-radius:15px!important;
  }
  .message .bubble{width:44px!important;height:44px!important;font-size:13px!important}
  .message h4{font-size:13px!important;line-height:1.22!important}
  .message .subject{font-size:13px!important;margin-top:3px!important;line-height:1.2!important}
  .message p{font-size:11px!important;line-height:1.32!important;margin-top:4px!important}
  .message .meta{font-size:10px!important;line-height:1.2!important}
  .message .star{font-size:17px!important;margin-top:17px!important}
  .message::after{font-size:8px!important;bottom:7px!important;right:8px!important}

  .mobile-bottom-nav{
    left:8px!important;right:8px!important;
    height:58px!important;
    bottom:max(5px,var(--safe-bottom))!important;
    border-radius:18px!important;
    box-shadow:0 10px 26px rgba(24,40,81,.13)!important;
  }
  .mobile-bottom-nav button{gap:2px!important;font-size:0!important;padding:5px 2px!important}
  .mobile-bottom-nav button span{width:22px;height:22px;display:grid;place-items:center}
  .mobile-bottom-nav button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-bottom-nav button[data-mobile-nav="more"] svg circle{fill:currentColor;stroke:none}
  .mobile-bottom-nav button small{font-size:9px!important;line-height:1!important}
  .mobile-bottom-nav button.primary span{font-size:0!important}
}

@media (max-width:380px) and (orientation:portrait){
  .bulk-toolbar{grid-template-columns:36px minmax(66px,1fr) 66px 66px 36px!important;gap:4px!important;padding:7px!important}
  .bulk-toolbar button{font-size:10px!important;padding:0 5px!important}
  .bulk-toolbar button svg{width:14px;height:14px}
}


/* 1.4.4 — isolated portrait toolbar and approved mobile proportions */
.mobile-bulk-toolbar,.mobile-compose-fab{display:none}

@media (max-width:699px) and (orientation:portrait){
  /* Never reuse the legacy desktop bulk grid on portrait phones. */
  #bulkToolbar{display:none!important}

  .mobile-bulk-toolbar{
    display:grid!important;
    grid-template-columns:48px minmax(0,1.28fr) minmax(0,1fr) minmax(0,1fr) 48px!important;
    align-items:center!important;
    gap:10px!important;
    margin:0 12px 10px!important;
    padding:10px!important;
    min-height:68px!important;
    border:1px solid #e2e8f4!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
  }
  .mobile-bulk-toolbar button,
  .mobile-select-all{
    height:46px!important;
    min-width:0!important;
    border:1px solid #dce4f2!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#4a5b7c!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    padding:0 12px!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
  .mobile-bulk-toolbar button.danger{
    color:#c84b62!important;
    background:#fffafb!important;
    border-color:#f0d7de!important;
  }
  .mobile-bulk-toolbar svg{
    width:18px!important;
    height:18px!important;
    flex:0 0 auto!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  .mobile-bulk-toolbar .more{padding:0!important}
  .mobile-bulk-toolbar .more svg{fill:currentColor!important;stroke:none!important;width:22px!important;height:22px!important}
  .mobile-select-all{padding:0!important;cursor:pointer!important}
  .mobile-select-all input{position:absolute!important;opacity:0!important;pointer-events:none!important}
  .mobile-select-all>span{
    width:19px!important;height:19px!important;
    border:2px solid #9aa6bb!important;
    border-radius:6px!important;
    background:#fff!important;
    display:block!important;
    box-sizing:border-box!important;
  }
  .mobile-select-all input:checked+span{
    border-color:#4667ef!important;
    background:#4667ef!important;
    box-shadow:inset 0 0 0 4px #fff!important;
  }

  .panel-head{padding:14px 14px 9px!important}
  .panel-head h2{font-size:22px!important}
  .message-list-panel{padding-top:0!important}
  .messages{padding:0 12px 88px!important}
  .message{
    min-height:104px!important;
    margin-bottom:10px!important;
    padding:13px 12px!important;
    grid-template-columns:18px 48px minmax(0,1fr) 62px!important;
    gap:10px!important;
    border-radius:17px!important;
  }
  .message .bubble{width:48px!important;height:48px!important;font-size:14px!important}
  .message h4{font-size:14px!important}
  .message .subject{font-size:14px!important}
  .message p{font-size:12px!important;line-height:1.35!important}
  .message .meta{font-size:10.5px!important}
  .message .star{font-size:19px!important}

  .mobile-compose-fab{
    display:flex!important;
    position:fixed!important;
    z-index:810!important;
    right:18px!important;
    bottom:calc(72px + max(7px,var(--safe-bottom)))!important;
    width:76px!important;
    height:76px!important;
    border:0!important;
    border-radius:50%!important;
    background:linear-gradient(145deg,#315cff,#5b36f5)!important;
    color:#fff!important;
    box-shadow:0 14px 30px rgba(54,82,231,.28)!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
  }
  .mobile-compose-fab svg{width:25px!important;height:25px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .mobile-compose-fab span{font-size:9px!important;font-weight:700!important}

  .mobile-bottom-nav{
    height:64px!important;
    left:12px!important;
    right:12px!important;
    border-radius:20px!important;
  }
  .mobile-bottom-nav button small{font-size:10px!important}
}

@media (max-width:390px) and (orientation:portrait){
  .mobile-bulk-toolbar{
    grid-template-columns:44px minmax(0,1.18fr) minmax(0,.9fr) minmax(0,.9fr) 44px!important;
    gap:6px!important;
    margin-left:9px!important;
    margin-right:9px!important;
    padding:8px!important;
  }
  .mobile-bulk-toolbar button{padding:0 7px!important;font-size:10.5px!important}
  .mobile-bulk-toolbar svg{width:16px!important;height:16px!important}
}


/* 1.4.5 — real iPhone drawer and reader toolbar correction */
@media (max-width:699px) and (orientation:portrait){
  .sidebar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:min(86vw,340px)!important;
    max-width:340px!important;
    height:100dvh!important;
    min-height:0!important;
    padding:max(18px,var(--safe-top)) 16px max(16px,var(--safe-bottom))!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    background:#f7f9fd!important;
  }
  .sidebar .brand-row{
    order:1!important;
    flex:0 0 auto!important;
    width:100%!important;
    padding:2px 4px 14px!important;
    gap:11px!important;
  }
  .sidebar .brand-mark{width:42px!important;height:42px!important;border-radius:13px!important}
  .sidebar .brand-row strong{font-size:19px!important}
  .sidebar .brand-row small{font-size:10px!important;margin-top:2px!important}
  .sidebar .compose-btn{
    order:2!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:48px!important;
    margin:0 0 14px!important;
    padding:0 15px!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  .sidebar .compose-btn strong{font-size:13px!important;white-space:nowrap!important}
  .sidebar .folder-section-head{order:3!important;flex:0 0 auto!important;margin:0 2px 6px!important}
  .sidebar .folder-nav{
    order:4!important;
    display:grid!important;
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    width:100%!important;
    gap:4px!important;
    padding:0 2px 8px 0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .sidebar .folder-link{width:100%!important;min-height:42px!important;padding:0 11px!important;border-radius:12px!important}
  .sidebar .folder-actions{display:none!important}
  .sidebar .mail-status-card{
    order:5!important;
    position:static!important;
    flex:0 0 auto!important;
    width:100%!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    margin:10px 0 0!important;
    padding:12px!important;
    border-radius:15px!important;
    box-sizing:border-box!important;
  }

  .reader-panel{max-width:100vw!important;overflow:hidden!important}
  .reader-tools{
    display:grid!important;
    grid-template-columns:auto minmax(72px,1fr) minmax(108px,1.35fr) minmax(82px,1fr) 42px!important;
    width:100%!important;
    max-width:100vw!important;
    height:58px!important;
    min-height:58px!important;
    padding:max(7px,var(--safe-top)) 8px 7px!important;
    gap:6px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .reader-tools button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    padding:0 8px!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #toolbarDelete,#toolbarArchive,#toolbarMove{display:none!important}
  .mobile-reader-back{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding-top:0!important;padding-bottom:0!important}
  .mobile-reader-more{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;font-size:15px!important}
  .mobile-reader-more-menu{min-width:178px!important;z-index:1200!important}
  .mobile-reader-more-menu button{height:40px!important;font-size:13px!important}
  .reader-content{width:100%!important;max-width:100vw!important;box-sizing:border-box!important;overflow-x:hidden!important}
}

@media (max-width:390px) and (orientation:portrait){
  .reader-tools{grid-template-columns:70px 72px minmax(100px,1fr) 78px 40px!important;gap:4px!important;padding-left:5px!important;padding-right:5px!important}
  .reader-tools button{font-size:9.5px!important;padding-left:5px!important;padding-right:5px!important}
}


/* 1.4.6 — explicit mobile drawer close control */
.mobile-drawer-close{display:none}
@media (max-width:699px){
  .sidebar{position:fixed!important}
  .mobile-drawer-close{
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    top:max(14px,calc(var(--safe-top) + 8px))!important;
    right:14px!important;
    z-index:12!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    border:1px solid #dbe3f2!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#334461!important;
    box-shadow:0 8px 20px rgba(26,42,82,.10)!important;
    font-size:31px!important;
    font-weight:300!important;
    line-height:1!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .mobile-drawer-close:active{background:#f3f6ff!important;transform:scale(.97)}
  .sidebar .brand-row{padding-right:58px!important}
}


/* Stable 1.5.0: obsolete desktop bulk-toolbar patch generations 1.4.8–1.4.19 removed. */

/* 1.4.20 — desktop actions moved to right-click context menu */
.desktop-selection-tools,.desktop-select-all-compact{display:none}
@media (min-width:901px){
  .desktop-bulk-toolbar{display:none!important}
  .message-list-panel{overflow:hidden!important}
  .panel-head{min-height:54px!important;padding:14px 14px 9px!important;align-items:center!important}
  .panel-title-line{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
  .desktop-selection-tools{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important;flex:0 0 auto!important}
  .selected-count{display:inline-flex!important;align-items:center!important;color:#8a97b1!important;font-size:10px!important;font-weight:700!important;white-space:nowrap!important}
  .desktop-select-all-compact{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:28px!important;min-width:58px!important;padding:0 10px!important;border:1px solid #dce4f2!important;border-radius:9px!important;background:#fff!important;color:#4d5f80!important;font-size:10px!important;font-weight:700!important;cursor:pointer!important}
  .desktop-select-all-compact:hover{background:#f6f8ff!important;border-color:#c5d1ea!important;color:#3158df!important}
  .desktop-select-all-compact.active{background:#edf2ff!important;border-color:#9fb1ee!important;color:#3158df!important}
  .messages{padding-top:0!important;border-top:1px solid #e8edf5!important}
}
@media (max-width:900px){.desktop-selection-tools,.desktop-select-all-compact{display:none!important}}


/* 1.4.22 — align Refresh with Select all and preserve clean desktop header */
@media (min-width:901px){
  #listRefreshBtn{
    width:58px!important;
    min-width:58px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0 10px!important;
    border-radius:9px!important;
    font-size:14px!important;
    line-height:1!important;
  }
  .desktop-select-all-compact{
    height:28px!important;
    min-height:28px!important;
  }
}


/* 1.4.23 — premium larger envelope empty state */
.empty-state{gap:0!important}
.empty-state-icon{
  width:118px!important;
  height:118px!important;
  margin:0 0 28px!important;
  border-radius:34px!important;
  background:linear-gradient(145deg,#f5f8ff 0%,#e9efff 100%)!important;
  display:grid!important;
  place-items:center!important;
  box-shadow:0 18px 36px rgba(70,91,180,.14),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.empty-state-icon svg{width:82px!important;height:64px!important;display:block!important;filter:drop-shadow(0 6px 8px rgba(73,92,199,.16))}
.empty-state h3{margin:0 0 10px!important;font-size:22px!important;font-weight:800!important;color:#405887!important;letter-spacing:-.01em!important}
.empty-state p{font-size:14px!important;color:#91a0bd!important}
@media(max-width:900px){
  .empty-state-icon{width:96px!important;height:96px!important;border-radius:28px!important;margin-bottom:22px!important}
  .empty-state-icon svg{width:68px!important;height:54px!important}
  .empty-state h3{font-size:19px!important}
}


/* 1.4.24 — exact equal height for desktop Select all and Refresh */
@media (min-width:901px){
  .panel-head .desktop-select-all-compact,
  .panel-head #listRefreshBtn{
    box-sizing:border-box!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    border-width:1px!important;
    border-radius:9px!important;
    line-height:28px!important;
    align-self:center!important;
  }
  .panel-head .desktop-select-all-compact{
    min-width:58px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .panel-head #listRefreshBtn{
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    padding-left:0!important;
    padding-right:0!important;
    display:inline-grid!important;
    place-items:center!important;
    line-height:1!important;
  }
}


/* 1.4.25 — visual spacing between Desktop Select all and Refresh */
@media (min-width:901px){
  .panel-head .desktop-selection-tools{
    gap:8px!important;
  }
  .panel-head #listRefreshBtn{
    margin-left:2px!important;
  }
}


/* 1.4.26 — message list fills resized grid track with no empty gap */
@media (min-width:961px){
  .columns > .message-list-panel{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    box-sizing:border-box!important;
  }
  .columns > .reader-splitter{
    margin:0!important;
  }
  .columns > .reader-panel{
    min-width:0!important;
    margin:0!important;
  }
}


/* 1.5.0 STABLE — canonical desktop reader/list sizing */
@media (min-width:961px){
  .columns > .message-list-panel{width:100%;min-width:0;max-width:none;justify-self:stretch;align-self:stretch;box-sizing:border-box}
  .columns > .reader-splitter,.columns > .reader-panel{min-width:0;margin:0}
}


/* 1.5.2 — attachment manager and real upload progress */
.compose-attachment-panel{margin:10px 0 0;padding:10px;border:1px solid rgba(180,195,228,.72);border-radius:14px;background:linear-gradient(145deg,rgba(250,252,255,.94),rgba(239,244,255,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.compose-attachment-list{display:flex;flex-wrap:wrap;gap:8px}
.compose-attachment-item{display:flex;align-items:center;gap:9px;min-width:220px;max-width:360px;padding:8px 9px;border:1px solid rgba(194,205,232,.76);border-radius:11px;background:rgba(255,255,255,.84);box-shadow:0 5px 16px rgba(59,79,133,.06)}
.compose-attachment-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:#edf2ff;font-size:15px}
.compose-attachment-info{display:flex;flex-direction:column;min-width:0;flex:1}
.compose-attachment-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:#263555}
.compose-attachment-info small{margin-top:2px;font-size:10px;color:#8490aa}
.compose-attachment-remove{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;padding:0;border:1px solid #eadce2;border-radius:9px;background:#fff9fb;color:#c34c67;font-size:17px;line-height:1;cursor:pointer}
.compose-attachment-remove:hover{background:#fff0f4;border-color:#e7bfc9}
.compose-upload-progress{margin-top:9px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.72)}
.compose-upload-progress-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:10.5px;color:#5e6d8e}
.compose-upload-progress-head strong{color:#405dfb}
.compose-upload-progress-track{height:8px;overflow:hidden;border-radius:999px;background:rgba(211,220,242,.78);box-shadow:inset 0 1px 3px rgba(42,61,109,.1)}
.compose-upload-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4266ff,#7752f7);box-shadow:0 0 14px rgba(76,91,255,.45);transition:width .16s ease}
.compose-upload-progress.complete .compose-upload-progress-track span{background:linear-gradient(90deg,#26b87b,#42d59a)}
.compose-upload-progress.error .compose-upload-progress-track span{background:linear-gradient(90deg,#e05a70,#ef8193)}
.compose-upload-progress.error .compose-upload-progress-head,.compose-upload-progress.error .compose-upload-progress-head strong{color:#c94c63}
@media(max-width:720px){.compose-attachment-item{min-width:100%;max-width:100%}.compose-attachment-panel{padding:8px}.compose-upload-progress-head{font-size:10px}}


/* 1.5.3 — premium glass scrollbar restored after attachment manager update */
@media (min-width:901px){
  .messages,
  .reader-content{
    scrollbar-width:thin!important;
    scrollbar-color:rgba(112,130,190,.58) rgba(236,241,252,.34)!important;
  }

  .messages::-webkit-scrollbar,
  .reader-content::-webkit-scrollbar{
    width:10px!important;
    height:10px!important;
  }

  .messages::-webkit-scrollbar-track,
  .reader-content::-webkit-scrollbar-track{
    background:linear-gradient(180deg,rgba(245,248,255,.48),rgba(229,236,250,.28))!important;
    border-radius:999px!important;
    box-shadow:inset 0 0 0 1px rgba(194,206,234,.22)!important;
  }

  .messages::-webkit-scrollbar-thumb,
  .reader-content::-webkit-scrollbar-thumb{
    min-height:52px!important;
    border:3px solid transparent!important;
    border-radius:999px!important;
    background:
      linear-gradient(180deg,rgba(119,139,214,.82),rgba(84,104,180,.68)) padding-box,
      linear-gradient(180deg,rgba(255,255,255,.88),rgba(214,224,248,.56)) border-box!important;
    box-shadow:0 4px 12px rgba(70,91,160,.18),inset 0 1px 0 rgba(255,255,255,.5)!important;
  }

  .messages::-webkit-scrollbar-thumb:hover,
  .reader-content::-webkit-scrollbar-thumb:hover{
    background:
      linear-gradient(180deg,rgba(99,122,214,.94),rgba(71,92,174,.82)) padding-box,
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(207,219,248,.7)) border-box!important;
  }

  .messages::-webkit-scrollbar-corner,
  .reader-content::-webkit-scrollbar-corner{
    background:transparent!important;
  }
}


/* 1.5.4 — persistent and clearly visible opened-message state */
@media (min-width:901px){
  .messages .message{
    position:relative;
  }
  .messages .message.active{
    background:linear-gradient(90deg,rgba(76,104,255,.14),rgba(111,91,255,.055))!important;
    border-color:#7188ff!important;
    box-shadow:inset 4px 0 0 #4c68ff,0 7px 18px rgba(61,84,185,.13)!important;
  }
  .messages .message.active::after{
    content:"Отворено";
    position:absolute;
    right:10px;
    bottom:7px;
    padding:2px 7px;
    border:1px solid rgba(76,104,255,.22);
    border-radius:999px;
    background:rgba(239,243,255,.94);
    color:#3d59d7;
    font-size:9px;
    font-weight:800;
    line-height:1.25;
    pointer-events:none;
  }
  .messages .message.active h4,
  .messages .message.active .subject{
    color:#1e327b!important;
  }
}
@media (max-width:900px){
  .messages .message.active{
    background:linear-gradient(90deg,#edf2ff,#f8f9ff)!important;
    border-color:#7188ff!important;
    box-shadow:inset 4px 0 0 #4c68ff!important;
  }
}


/* 1.5.5 — hide native browser clear button in the main mail search field */
#search::-webkit-search-cancel-button,
#search::-webkit-search-decoration{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
#search::-ms-clear,
#search::-ms-reveal{
  display:none;
  width:0;
  height:0;
}

/* FINAL STABLE 1.5.6: server-side message pagination */
.message-pagination{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px 12px;border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:12px}
.message-pagination[hidden]{display:none!important}.pagination-range{white-space:nowrap;font-weight:700;color:#5b6a86}.pagination-controls{display:flex;align-items:center;gap:5px;min-width:0;overflow-x:auto;scrollbar-width:thin}.pagination-controls button{min-width:32px;height:32px;padding:0 9px;border:1px solid #dce4f4;border-radius:9px;background:#fff;color:#435575;font-weight:700;white-space:nowrap}.pagination-controls button:hover:not(:disabled){border-color:#b9c7ec;background:#f6f8ff}.pagination-controls button.active{background:#4f63f5;border-color:#4f63f5;color:#fff}.pagination-controls button:disabled{opacity:.42;cursor:not-allowed}.pagination-ellipsis{padding:0 2px;color:#8a96ad}
@media(max-width:760px){.message-pagination{align-items:stretch;flex-direction:column;padding:8px 8px 10px}.pagination-range{text-align:center}.pagination-controls{justify-content:flex-start;padding-bottom:2px}.pagination-controls button{height:34px}}

/* 1.5.8 — FULL RESPONSIVE DESIGN NORMALIZATION
   Final adaptive layer for desktop, laptop, tablet, phone, orientation and short viewports. */
:root{
  --viewport-h:100dvh;
  --app-safe-top:env(safe-area-inset-top,0px);
  --app-safe-right:env(safe-area-inset-right,0px);
  --app-safe-bottom:env(safe-area-inset-bottom,0px);
  --app-safe-left:env(safe-area-inset-left,0px);
}
html{width:100%;min-width:0;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;min-width:0;max-width:100vw}
img,video,canvas,svg{max-width:100%}
input,select,textarea{max-width:100%;min-width:0}
.body-app,.body-login{min-height:100vh;min-height:100dvh}

/* Login: fluid in both axes, including short laptops and mobile keyboards. */
.body-login{
  overflow:auto!important;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,2.2vw,30px)!important;
  padding-top:max(clamp(12px,2.2vw,30px),var(--app-safe-top))!important;
  padding-right:max(clamp(12px,2.2vw,30px),var(--app-safe-right))!important;
  padding-bottom:max(clamp(12px,2.2vw,30px),var(--app-safe-bottom))!important;
  padding-left:max(clamp(12px,2.2vw,30px),var(--app-safe-left))!important;
}
.login-pro-page{width:min(1120px,100%)!important;margin:auto!important;padding:0!important}
.login-pro-brand{margin-bottom:clamp(12px,2vh,18px)!important}
.login-pro-brand-icon{width:clamp(50px,5vw,66px)!important;height:clamp(50px,5vw,66px)!important;border-radius:clamp(15px,1.5vw,20px)!important}
.login-pro-brand h1{font-size:clamp(28px,3vw,40px)!important}
.login-pro-brand p{font-size:clamp(12px,1.2vw,15px)!important}
.login-pro-card{min-height:0!important;grid-template-columns:minmax(0,1fr) minmax(360px,.92fr)!important}
.login-pro-visual{min-width:0!important;min-height:clamp(300px,48vh,460px)!important}
.login-pro-visual img{width:min(430px,82%,42vh)!important;height:auto!important;aspect-ratio:1/1!important;object-fit:contain!important}
.login-pro-access{min-width:0!important;padding:clamp(24px,3vw,44px)!important}
.login-pro-heading h2{font-size:clamp(26px,2.4vw,31px)!important}
.login-pro-input,.login-pro-submit{min-height:48px!important}
.login-pro-features{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.login-pro-features article{min-width:0!important}

/* App shell: dvh + minimum shrink rules prevent cropped panels. */
.body-app{overflow:hidden!important}
.app-shell{width:100%;max-width:100vw;height:100vh;height:100dvh;min-height:0;padding:clamp(8px,1.15vw,16px)}
.sidebar,.workspace,.columns,.message-list-panel,.reader-panel,.reader-content{min-height:0;min-width:0}
.workspace{height:100%;display:flex;flex-direction:column}
.topbar{flex:0 0 auto}
.columns{flex:1 1 auto;height:auto!important;min-height:0!important}
.messages{min-height:0!important;flex:1 1 auto!important;overscroll-behavior:contain}
.reader-content{flex:1 1 auto!important;overscroll-behavior:contain}
.mail-body,.mail-body-frame,.mail-html-content{max-width:100%!important;overflow-wrap:anywhere;word-break:break-word}
.mail-body img,.mail-html-content img,.reader-content img{max-width:100%!important;height:auto!important}
.mail-body table,.mail-html-content table,.reader-content table{max-width:100%!important}
.mail-body pre,.mail-html-content pre,.reader-content pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

/* Modal system: viewport-aware height and internal scrolling for every dialog. */
.modal{
  padding:max(10px,var(--app-safe-top)) max(10px,var(--app-safe-right)) max(10px,var(--app-safe-bottom)) max(10px,var(--app-safe-left))!important;
  overflow:hidden!important;
}
.modal-card{
  max-width:calc(100vw - max(20px,calc(var(--app-safe-left) + var(--app-safe-right))))!important;
  max-height:calc(100dvh - max(20px,calc(var(--app-safe-top) + var(--app-safe-bottom))))!important;
}
#composeModal .compose-premium,#settingsModal .settings-premium,.addressbook-window,.recipient-picker-window{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
#composeModal .modal-head,#settingsModal .modal-head,#addressBookModal .modal-head,#recipientPickerModal .modal-head{flex:0 0 auto!important}
#composeModal .compose-form{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain}
#composeModal .compose-editor-wrap{flex:1 1 260px!important;min-height:180px!important;display:flex!important;flex-direction:column!important}
#composeModal .compose-editor-wrap .editor,#composeModal .compose-html-source{flex:1 1 auto!important;min-height:180px!important;max-width:100%!important;overflow:auto!important}
#composeModal .compose-format-toolbar{flex:0 0 auto!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin}
#composeModal .format-row{min-width:max-content}
#composeModal .compose-toolbar{flex:0 0 auto!important}
#settingsModal .settings-tabs{flex:0 0 auto!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin}
#settingsModal .settings-panel.active{min-height:0!important;overflow:auto!important;overscroll-behavior:contain}
#settingsModal .modal-actions{flex:0 0 auto!important}
#addressBookModal .addressbook-layout{flex:1 1 auto!important;min-height:0!important}
#recipientPickerModal .recipient-picker-list{flex:1 1 auto!important;min-height:140px!important;max-height:none!important}
.compact-dialog{width:min(520px,100%)!important}

/* Medium/compact desktop: preserve 3-pane usability without clipping. */
@media (min-width:961px) and (max-width:1440px){
  .app-shell{padding:8px!important}
  .sidebar{width:clamp(218px,18vw,252px)!important;padding:12px 11px!important}
  .brand-row{gap:10px!important;padding:2px 5px 12px!important}
  .brand-mark{width:42px!important;height:42px!important;border-radius:13px!important}
  .brand-row strong{font-size:clamp(18px,1.6vw,23px)!important}
  .brand-row small{font-size:10px!important}
  .compose-btn{height:48px!important;margin-bottom:12px!important;border-radius:14px!important}
  .folder-link{padding:9px 10px!important;min-height:38px!important}
  .mail-status-card{left:11px!important;right:11px!important;bottom:11px!important;padding:11px!important}
  .workspace{border-radius:0 20px 20px 0!important}
  .topbar{height:62px!important;padding:0 12px!important;gap:10px!important}
  .search-box{width:min(420px,46vw)!important;height:42px!important}
  .profile-trigger{min-width:0!important;max-width:220px!important;height:44px!important}
  .profile-meta strong,.profile-meta small{max-width:110px!important}
  .columns{grid-template-columns:clamp(320px,31vw,430px) 5px minmax(0,1fr)!important}
  .panel-head{padding:12px 12px 8px!important}
  .filters{gap:6px!important;padding:0 12px 8px!important;flex-wrap:nowrap!important;overflow-x:auto!important}
  .filters button{height:32px!important;padding:0 10px!important;font-size:11px!important;white-space:nowrap!important}
  .message{padding:10px!important;gap:9px!important;border-radius:13px!important}
  .reader-tools{height:auto!important;min-height:52px!important;padding:7px 10px!important;gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto!important}
  .reader-tools button{height:34px!important;padding:0 10px!important;font-size:11px!important;white-space:nowrap!important}
  .reader-content{padding:18px 20px!important}
}

/* Tablet portrait / narrow desktop: drawer + one focused content surface. */
@media (max-width:960px){
  .app-shell{display:block!important;padding:0!important;height:100dvh!important}
  .workspace{width:100%!important;height:100dvh!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .sidebar{
    display:flex!important;position:fixed!important;z-index:900!important;left:0!important;top:0!important;
    width:min(82vw,340px)!important;height:100dvh!important;border-radius:0 20px 20px 0!important;
    transform:translateX(-105%)!important;transition:transform .2s ease!important;box-shadow:18px 0 50px rgba(26,41,82,.2)!important;
  }
  body.sidebar-open .sidebar{transform:translateX(0)!important}
  body.sidebar-open:after{content:"";position:fixed;z-index:850;inset:0;background:rgba(19,29,55,.38)}
  .mobile-menu-btn{display:grid!important}
  .columns{grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  .reader-splitter{display:none!important}
  .message-list-panel{width:100%!important}
  .reader-panel{display:none!important}
  .reader-panel.mobile-open{display:flex!important;position:fixed!important;z-index:950!important;inset:0!important;width:100%!important;height:100dvh!important;background:#fff!important}
  .mobile-reader-back{display:inline-flex!important}
  .topbar{padding-left:max(10px,var(--app-safe-left))!important;padding-right:max(10px,var(--app-safe-right))!important}
}

/* Phone portrait: compact, touch-sized controls and full-screen dialogs. */
@media (max-width:699px){
  :root{--touch:44px}
  button,.folder-link,.message,.profile-trigger{-webkit-tap-highlight-color:transparent}
  .modal{padding:0!important;align-items:stretch!important;justify-content:stretch!important}
  .modal-card,
  #composeModal .compose-premium,#settingsModal .settings-premium,.addressbook-window,.recipient-picker-window,.compact-dialog{
    width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;margin:0!important;
  }
  .modal-head{padding:max(12px,var(--app-safe-top)) 14px 10px!important;align-items:center!important}
  .modal-head strong{font-size:17px!important}
  .modal-head small{font-size:10.5px!important;line-height:1.3!important}
  .close-btn{width:40px!important;height:40px!important;flex:0 0 40px!important}

  #composeModal .compose-form{padding:8px 10px max(10px,var(--app-safe-bottom))!important}
  #composeModal .compose-row{grid-template-columns:68px minmax(0,1fr)!important;gap:7px!important;min-height:48px!important}
  #composeModal .compose-row>label,#composeModal .recipient-picker-trigger{font-size:12px!important}
  #composeModal .compose-row input,#composeModal .from-select{height:40px!important;font-size:16px!important;padding:0 10px!important}
  #composeModal .recipient-links{grid-column:2!important;justify-self:start!important;margin-bottom:4px!important}
  #composeModal .compose-format-toolbar{margin-top:6px!important;padding:5px!important}
  #composeModal .compose-editor-wrap{margin-top:7px!important;flex-basis:170px!important;min-height:150px!important}
  #composeModal .compose-editor-wrap .editor,#composeModal .compose-html-source{min-height:150px!important;padding:12px!important;font-size:16px!important}
  #composeModal .compose-toolbar{padding-top:8px!important;gap:8px!important}
  #composeModal .attachment-label{max-width:34vw!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #composeModal .send-btn{min-width:118px!important;height:44px!important}

  #settingsModal .settings-tabs{padding:6px 8px 0!important;gap:4px!important}
  #settingsModal .settings-tab{height:40px!important;padding:0 12px!important;white-space:nowrap!important}
  #settingsModal .settings-grid{padding:10px!important;gap:8px!important}
  #settingsModal .field-wrap,#settingsModal .toggle-row{margin:0!important}
  #settingsModal .field-wrap select,#settingsModal .field-wrap input{height:44px!important;font-size:16px!important}
  #settingsModal .toggle-row{padding:11px 12px!important;gap:10px!important}
  #settingsModal .toggle-row input{flex:0 0 auto!important}
  #settingsModal .signature-layout{display:block!important;padding:8px!important;overflow:auto!important}
  #settingsModal .signature-preview-card{margin-top:8px!important}
  #settingsModal .modal-actions{padding:9px 10px max(9px,var(--app-safe-bottom))!important;gap:8px!important;background:#fff!important}
  #settingsModal #cancelSettings,#settingsModal #saveSettings{height:44px!important;min-width:0!important;flex:1!important;padding:0 10px!important;font-size:12px!important}

  .addressbook-layout{display:flex!important;flex-direction:column!important;overflow:auto!important}
  .addressbook-list-pane{flex:0 0 auto!important;max-height:42dvh!important;border-right:0!important;border-bottom:1px solid var(--line)!important}
  .addressbook-editor-pane{flex:1 0 auto!important;overflow:visible!important;padding:12px!important}
  .addressbook-actions{position:sticky!important;bottom:0!important;background:#fbfcff!important;padding:8px 0 max(4px,var(--app-safe-bottom))!important;z-index:2!important}
  .addressbook-actions button{min-height:42px!important}

  .recipient-picker-tools{padding:10px!important}
  .recipient-picker-tools input[type=search]{min-height:44px!important;font-size:16px!important}
  .recipient-picker-footer{padding:10px 10px max(10px,var(--app-safe-bottom))!important}
  .recipient-picker-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .recipient-picker-actions button{min-width:0!important;width:100%!important;height:44px!important}

  .compact-dialog .dialog-body{flex:1 1 auto!important;overflow:auto!important;padding:14px!important}
  .compact-dialog .modal-actions{padding:10px max(10px,var(--app-safe-right)) max(10px,var(--app-safe-bottom)) max(10px,var(--app-safe-left))!important}
  .compact-dialog .modal-actions button{width:100%!important;min-height:44px!important}

  .message-pagination{padding-bottom:max(9px,var(--app-safe-bottom))!important}
  .pagination-controls{scroll-snap-type:x proximity!important}
  .pagination-controls button{min-width:38px!important;height:38px!important;scroll-snap-align:start!important}
}

/* Very small phones. */
@media (max-width:380px){
  .login-pro-brand{gap:10px!important}
  .login-pro-brand-icon{width:48px!important;height:48px!important}
  .login-pro-brand h1{font-size:26px!important}
  .login-pro-access{padding:20px 14px!important}
  .login-pro-heading h2{font-size:24px!important}
  .login-pro-features article{padding:13px!important}
  .topbar{padding-left:8px!important;padding-right:8px!important}
  .mobile-brand strong{font-size:17px!important}
  .message{grid-template-columns:18px 42px minmax(0,1fr) 52px!important;gap:7px!important;padding-left:9px!important;padding-right:9px!important}
  .message .bubble{width:42px!important;height:42px!important}
  #composeModal .compose-row{grid-template-columns:58px minmax(0,1fr)!important}
  #composeModal .recipient-links{grid-column:2!important}
}

/* Phone/tablet landscape: use every vertical pixel without hiding essential actions. */
@media (orientation:landscape) and (max-height:560px) and (max-width:1024px){
  .modal{padding:4px!important}
  .modal-card,#composeModal .compose-premium,#settingsModal .settings-premium,.addressbook-window,.recipient-picker-window{height:calc(100dvh - 8px)!important;max-height:calc(100dvh - 8px)!important;border-radius:12px!important}
  .modal-head{padding:7px 10px!important}
  .modal-head small{display:none!important}
  #composeModal .compose-form{padding:5px 9px!important}
  #composeModal .compose-row{min-height:38px!important}
  #composeModal .compose-row input,#composeModal .from-select{height:34px!important}
  #composeModal .compose-format-toolbar{margin-top:3px!important}
  #composeModal .compose-editor-wrap{min-height:90px!important;flex-basis:90px!important;margin-top:4px!important}
  #composeModal .compose-editor-wrap .editor,#composeModal .compose-html-source{min-height:90px!important;padding:8px!important}
  #composeModal .compose-toolbar{padding-top:4px!important}
  #settingsModal .settings-grid{padding:6px 10px!important;gap:6px!important}
  #settingsModal .toggle-row{padding:7px 9px!important}
  #settingsModal .modal-actions{padding:6px 10px!important}
  .login-pro-brand{margin-bottom:8px!important}
  .login-pro-features,.login-pro-security{display:none!important}
}

/* Short desktop/laptop screens such as 1366x768 and 1280x720. */
@media (min-width:961px) and (max-height:820px){
  .app-shell{padding:6px!important}
  .topbar{height:54px!important}
  .sidebar{padding-top:9px!important;padding-bottom:9px!important}
  .brand-row{padding-bottom:8px!important}
  .compose-btn{height:43px!important;margin-bottom:8px!important}
  .folder-link{min-height:34px!important;padding-top:7px!important;padding-bottom:7px!important}
  .mail-status-card{padding:9px!important}
  .reader-tools{min-height:46px!important;padding-top:5px!important;padding-bottom:5px!important}
  .reader-content{padding-top:14px!important;padding-bottom:14px!important}
  #composeModal .compose-premium,#settingsModal .settings-premium,.addressbook-window{max-height:calc(100dvh - 12px)!important}
}

/* Login short-height behaviour. */
@media (max-height:760px){
  .body-login{display:block!important}
  .login-pro-page{margin:auto!important}
  .login-pro-brand{justify-content:flex-start!important;margin-bottom:10px!important}
  .login-pro-card{min-height:0!important}
  .login-pro-visual{min-height:320px!important}
  .login-pro-access{padding-top:22px!important;padding-bottom:22px!important}
  .login-pro-features{margin-top:10px!important;gap:8px!important}
  .login-pro-features article{min-height:70px!important;padding:11px 13px!important}
  .login-pro-security{margin-top:9px!important}
}

@media (max-width:980px){
  .login-pro-card{grid-template-columns:1fr!important}
  .login-pro-visual{display:none!important}
  .login-pro-page{width:min(640px,100%)!important}
  .login-pro-features{grid-template-columns:1fr!important}
}

@media (max-width:560px){
  .body-login{display:block!important;padding:10px!important;padding-top:max(10px,var(--app-safe-top))!important;padding-bottom:max(10px,var(--app-safe-bottom))!important}
  .login-pro-brand{justify-content:flex-start!important;gap:11px!important;margin:2px 0 12px!important}
  .login-pro-brand p{margin-top:4px!important}
  .login-pro-card{border-radius:18px!important}
  .login-pro-access{padding:22px 16px!important}
  .login-pro-input{height:50px!important}
  .login-pro-input input{font-size:16px!important}
  .login-pro-submit{height:50px!important}
  .login-pro-features{gap:8px!important;margin-top:10px!important}
  .login-pro-features article{min-height:0!important;padding:12px 14px!important;border-radius:14px!important}
  .login-pro-security{margin-top:10px!important;gap:7px!important;font-size:10px!important}
}

/* Large displays: cap reading width while keeping panels balanced. */
@media (min-width:1920px){
  .app-shell{padding:18px!important}
  .sidebar{width:292px!important}
  .columns{grid-template-columns:440px 6px minmax(0,1fr)!important}
  .reader-content>*{max-width:1240px;margin-left:auto;margin-right:auto}
}
/* 1.5.10 Signature image insertion — explicit control */
#settingsModal .signature-toolbar .signature-image-insert-btn{width:auto;min-width:92px;padding:0 9px;gap:6px;display:inline-flex;align-items:center;justify-content:center}
#settingsModal .signature-image-icon{font-size:15px;line-height:1}
#settingsModal .signature-image-btn-label{font-size:10px;font-weight:700;white-space:nowrap}
@media(max-width:760px){
  #settingsModal .signature-toolbar .signature-image-insert-btn{min-width:30px;width:30px;padding:0}
  #settingsModal .signature-image-btn-label{display:none}
}



/* 1.5.12 — user-selectable balanced split view */
@media (min-width:961px){
  .columns{--user-list-width:50%;grid-template-columns:minmax(300px,var(--user-list-width)) 6px minmax(300px,1fr)!important}
  .columns.reader-list-only{grid-template-columns:minmax(0,1fr)!important}
  .columns.reader-list-only>.reader-splitter,.columns.reader-list-only>.reader-panel{display:none!important}
  .columns.reader-only{grid-template-columns:minmax(0,1fr)!important}
  .columns.reader-only>.message-list-panel,.columns.reader-only>.reader-splitter{display:none!important}
  .columns.reader-only>.reader-panel{display:flex!important;width:100%!important}
  .reader-splitter{width:6px!important;min-width:6px!important}
  body.resizing-reader,body.resizing-reader *{cursor:col-resize!important;user-select:none!important}
}
@media (min-width:1920px){.columns{grid-template-columns:minmax(340px,var(--user-list-width)) 6px minmax(340px,1fr)!important}}
@media (max-width:960px){
  .columns.reader-list-only,.columns.reader-only{display:block!important}
  .columns.reader-list-only>.reader-panel,.columns.reader-only>.message-list-panel{display:none!important}
  .columns.reader-only>.reader-panel.mobile-open{display:flex!important}
}