@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#eef3ef;
  --panel:#ffffff;
  --sidebar:#f7faf7;
  --text:#111713;
  --muted:#6d786f;
  --muted-2:#99a39b;
  --line:#e2e9e3;
  --line-strong:#d4dfd6;
  --brand-950:#071c10;
  --brand-900:#0c321b;
  --brand-800:#105024;
  --brand-700:#17662c;
  --brand-600:#23843a;
  --brand-500:#2d9a43;
  --brand-400:#53ad4d;
  --brand-300:#82c84f;
  --yellow:#ffd43b;
  --yellow-soft:#fff7cb;
  --soft:#edf4ee;
  --hover:#edf5ef;
  --selected:#e7f3e9;
  --danger:#a33d3d;
  --shadow-sm:0 4px 14px rgba(12,50,27,.055);
  --shadow:0 18px 48px rgba(12,50,27,.08);
  --shadow-prime:0 14px 30px rgba(27,112,49,.20),0 3px 8px rgba(5,35,17,.12);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
body{overflow-x:hidden;font-feature-settings:"cv02","cv03","cv04","cv11"}
html,body,.shell,.sidebar,.main,.topbar,.content,.login-page,button,input,select,textarea{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease}
.ico{width:18px;height:18px;flex:0 0 auto}

.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;background:var(--bg)}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#fbfdfb 0%,#f3f8f4 100%);border-right:1px solid rgba(16,80,36,.10);padding:16px 13px 15px;display:flex;flex-direction:column;z-index:20;box-shadow:8px 0 30px rgba(8,54,25,.025)}
.brand{display:flex;align-items:center;gap:11px;padding:3px 7px 17px}
.brand-mark{width:41px;height:41px;border-radius:14px;background:linear-gradient(145deg,#fff,#edf5ee);display:grid;place-items:center;box-shadow:0 8px 18px rgba(15,78,35,.12),inset 0 0 0 1px rgba(19,102,43,.08);overflow:hidden;flex:0 0 auto}
.brand-mark img{width:35px;height:35px;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(8,60,25,.16))}
.brand strong{display:block;font-size:17px;line-height:1.1;letter-spacing:-.025em;font-weight:800}
.brand span,.sidebar-user span{display:block;color:var(--muted);font-size:11px;margin-top:4px}

.compose-button{position:relative;isolation:isolate;height:47px;border-radius:16px;background:linear-gradient(135deg,var(--brand-900) 0%,var(--brand-600) 76%,var(--brand-500) 100%);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:700;margin:0 2px 18px;box-shadow:var(--shadow-prime);overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.compose-button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.14) 42%,transparent 58%);transform:translateX(-120%);transition:transform .45s ease;z-index:-1}
.compose-button:after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--yellow),transparent);opacity:.82}
.compose-button:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(27,112,49,.26),0 4px 10px rgba(5,35,17,.12)}
.compose-button:hover:before{transform:translateX(120%)}
.compose-button .ico{width:19px;height:19px}

.sidebar nav{display:flex;flex-direction:column;gap:3px}
.sidebar nav a{height:41px;padding:0 11px;border-radius:13px;color:#4f5b52;font-size:12.5px;display:flex;align-items:center;gap:10px;position:relative;border:1px solid transparent}
.sidebar nav a:hover{background:#edf5ef;color:var(--brand-900);border-color:rgba(35,132,58,.08)}
.sidebar nav a.active{background:linear-gradient(135deg,#e4f1e7,#edf7ef);color:var(--brand-900);font-weight:700;border-color:rgba(35,132,58,.12);box-shadow:inset 3px 0 0 var(--brand-500),0 5px 12px rgba(20,92,39,.045)}
.sidebar nav a.active .ico{color:var(--brand-600)}
.sidebar nav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-count{margin-left:auto;min-width:23px;height:23px;padding:0 7px;border-radius:999px;background:linear-gradient(135deg,var(--brand-800),var(--brand-500));color:#fff;font-size:9.5px;display:grid;place-items:center;box-shadow:0 4px 10px rgba(27,112,49,.18)}
.nav-label{font-size:8.5px;font-weight:800;letter-spacing:.16em;color:#98a39a;padding:20px 11px 8px}
.sidebar-user{margin-top:auto;border-top:1px solid rgba(16,80,36,.10);padding:13px 5px 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px}
.avatar{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#e4f2e7,#d6eadb);color:var(--brand-800);font-size:11px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(27,112,49,.08)}
.avatar.big{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--brand-800),var(--brand-500));color:#fff;box-shadow:0 7px 16px rgba(26,111,49,.17)}
.user-copy{min-width:0}.user-copy strong{display:block;font-size:10.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.user-copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout{font-size:9.5px;color:#8c978f;padding:7px;border-radius:999px}.logout:hover{background:#e9f1eb;color:var(--brand-800)}

.main{min-width:0;background:linear-gradient(180deg,#f3f7f4 0,#edf2ee 100%)}
.topbar{height:70px;border-bottom:1px solid rgba(16,80,36,.09);display:flex;align-items:center;justify-content:center;padding:0 28px;background:rgba(248,251,249,.88);backdrop-filter:blur(22px) saturate(145%);position:sticky;top:0;z-index:12}
.search{width:min(710px,66vw);height:44px;border:1px solid rgba(16,80,36,.12);border-radius:999px;background:rgba(255,255,255,.88);display:flex;align-items:center;padding:0 14px;box-shadow:0 5px 16px rgba(10,55,25,.045),inset 0 1px 0 rgba(255,255,255,.9)}
.search:focus-within{border-color:rgba(35,132,58,.42);box-shadow:0 0 0 4px rgba(45,154,67,.08),0 8px 20px rgba(10,55,25,.055)}
.search .ico{color:#6e7d72;width:17px;height:17px}.search input{border:0!important;outline:0!important;width:100%;padding:0 10px!important;background:transparent!important;font-size:12.5px!important;box-shadow:none!important}.search button{border:0;background:transparent;color:var(--brand-700);font-size:10.5px;font-weight:700;cursor:pointer;padding:7px 10px;border-radius:999px}.search button:hover{background:var(--soft)}
.section-title{font-size:13px;font-weight:800;color:var(--brand-900);letter-spacing:-.015em}
.top-actions{position:absolute;right:24px;display:flex;align-items:center;gap:9px}.version{color:#8d9890;font-size:9.5px;padding:5px 9px;border-radius:999px;background:#edf3ee;border:1px solid rgba(16,80,36,.07)}
.icon-button{width:38px;height:38px;border:1px solid rgba(16,80,36,.10);border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#5e6a61;cursor:pointer;box-shadow:0 4px 12px rgba(10,55,25,.04)}
.icon-button:hover{background:#e9f4eb;color:var(--brand-700);border-color:rgba(35,132,58,.18);transform:translateY(-1px);box-shadow:0 7px 16px rgba(28,110,49,.08)}
.icon-button:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}

.content{padding:32px;max-width:1380px;margin:auto}.content.mail-content{padding:12px 14px 14px;max-width:none;height:calc(100vh - 70px);overflow:hidden}
.mail-layout{height:100%;display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);background:#fff;border:1px solid rgba(16,80,36,.09);border-radius:23px;overflow:hidden;box-shadow:0 16px 44px rgba(12,50,27,.075)}
.message-column{border-right:1px solid rgba(16,80,36,.08);min-width:0;overflow:auto;background:#f8faf8;scrollbar-color:#afbab1 transparent;scrollbar-width:thin}
.list-head{height:94px;padding:22px 21px 14px;border-bottom:1px solid rgba(16,80,36,.07);display:flex;justify-content:space-between;align-items:flex-end;background:rgba(248,250,248,.95);position:sticky;top:0;z-index:4;backdrop-filter:blur(10px)}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--brand-600)}
.list-head h1,.page-head h1{font-size:28px;letter-spacing:-.045em;margin:5px 0 0;font-weight:800}.message-total{font-size:9.5px;color:#8f9a92;background:#edf3ee;border-radius:999px;padding:5px 9px;border:1px solid rgba(16,80,36,.06)}
.message-list{display:flex;flex-direction:column;padding:7px}
.message-row{display:block;padding:13px 13px 12px;border:1px solid transparent;min-height:91px;background:transparent;border-radius:14px;margin-bottom:3px;position:relative}
.message-row:hover{background:#f0f5f1;border-color:rgba(35,132,58,.08)}
.message-row.selected{background:linear-gradient(135deg,#e2f0e5,#eef7f0);border-color:rgba(35,132,58,.15);box-shadow:0 6px 15px rgba(25,97,43,.06)}
.message-row.selected:before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:999px;background:linear-gradient(var(--brand-500),var(--brand-700))}
.message-row.unread{background:#fff;border-color:rgba(16,80,36,.045);box-shadow:0 3px 10px rgba(12,50,27,.025)}
.message-row.unread:hover{background:#f5f9f6}.message-row.unread .sender,.message-row.unread .subject-line span:first-child{font-weight:800;color:#142018}
.sender-line{display:flex;justify-content:space-between;gap:16px;align-items:center}.sender{font-size:12.2px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#344039}.sender-line time{font-size:9.5px;color:#89958c;white-space:nowrap}.subject-line{display:flex;gap:8px;align-items:center;margin-top:6px}.subject-line span:first-child{font-size:12.2px;color:#475249;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.star{margin-left:auto;color:#d8ad1f;font-size:11px}.message-meta{display:flex;gap:7px;margin-top:8px;color:#9ba59d;font-size:8.8px}.message-meta span+span:before{content:"·";margin-right:7px}

.reader-column{min-width:0;overflow:auto;background:linear-gradient(180deg,#fff 0,#fdfefd 100%);scrollbar-color:#b3bdb5 transparent;scrollbar-width:thin}.reader-toolbar{height:58px;border-bottom:1px solid rgba(16,80,36,.07);display:flex;align-items:center;justify-content:space-between;padding:0 19px;position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);z-index:3}.reader-actions{display:flex;gap:7px;margin-left:auto}.mobile-back{display:none}
.message-reader{max-width:980px;margin:0 auto;padding:37px 48px 66px}.message-header{padding-bottom:25px;border-bottom:1px solid rgba(16,80,36,.08)}.message-header h2{font-size:27px;line-height:1.24;letter-spacing:-.042em;margin:0 0 24px;font-weight:800}.sender-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}.sender-card strong{display:block;font-size:12.5px;font-weight:700}.sender-card span,.sender-card small{display:block;color:#77837a;font-size:10.2px;margin-top:3px}.sender-card time{font-size:10px;color:#8c978f;background:#f2f6f3;border-radius:999px;padding:6px 9px}.email-body{padding-top:30px;line-height:1.62;font-size:14px;overflow-wrap:anywhere}.email-shadow-host{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden;isolation:isolate}.email-body blockquote{border-left:3px solid #cfe3d3;margin-left:0;padding-left:16px;color:#626e65}.attachments{margin-top:18px;padding:12px 13px;border:1px solid rgba(16,80,36,.09);border-radius:16px;background:#f6faf7;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;color:#647067}.attachments strong{color:#344039}.attachments span{background:#eaf3ec;border:1px solid rgba(35,132,58,.07);border-radius:999px;padding:5px 9px}
.reader-empty,.empty-state{height:100%;display:grid;place-content:center;text-align:center;padding:30px}.reader-empty-icon,.empty-icon{width:58px;height:58px;border-radius:19px;background:linear-gradient(145deg,#edf6ef,#e1efe4);display:grid;place-items:center;margin:0 auto 15px;color:var(--brand-600);box-shadow:0 9px 22px rgba(26,111,49,.07),inset 0 0 0 1px rgba(35,132,58,.06)}.reader-empty h2,.empty-state h1{margin:0 0 7px;font-size:18px;letter-spacing:-.03em}.reader-empty p,.empty-state p{margin:0 auto 18px;max-width:430px;color:var(--muted);font-size:11.5px;line-height:1.6}.list-empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:11.5px}.error-state{background:#fff}.button-row{display:flex;justify-content:center;gap:8px}

.page-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:22px}.page-head p{margin:8px 0 0;color:var(--muted);max-width:720px;line-height:1.6;font-size:12.5px}
.btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(16,80,36,.12);background:rgba(255,255,255,.92);border-radius:999px;padding:10px 17px;font-weight:700;font-size:11.5px;cursor:pointer;color:#3d4940;box-shadow:0 5px 14px rgba(12,50,27,.045)}.btn:hover{background:#f0f6f1;color:var(--brand-800);border-color:rgba(35,132,58,.18);transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--brand-900),var(--brand-600));color:#fff;border-color:rgba(10,68,29,.9);box-shadow:0 11px 24px rgba(26,111,49,.18),inset 0 1px 0 rgba(255,255,255,.16)}.btn.primary:hover{background:linear-gradient(135deg,var(--brand-800),var(--brand-500));color:#fff;box-shadow:0 14px 28px rgba(26,111,49,.24)}.btn.full{width:100%}
.panel,.compose-card,.note-card{background:rgba(255,255,255,.93);border:1px solid rgba(16,80,36,.09);border-radius:var(--radius);box-shadow:var(--shadow)}.panel{padding:23px}.panel h2{font-size:14px;margin:0 0 18px;letter-spacing:-.02em}.grid-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px}.settings-form{display:grid;gap:16px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid.three{grid-template-columns:2fr .7fr 1fr}.wide{grid-column:1/-1}
label{display:grid;gap:7px;font-size:10.5px;font-weight:700;color:#536058}input,select,textarea{border:1px solid rgba(16,80,36,.12);border-radius:14px;background:#fbfdfb;padding:11px 12px;outline:none;color:#202922;font-size:11.5px}input:hover,select:hover,textarea:hover{border-color:rgba(35,132,58,.20)}input:focus,select:focus,textarea:focus{border-color:rgba(35,132,58,.46);box-shadow:0 0 0 4px rgba(45,154,67,.08);background:#fff}form{display:grid;gap:13px}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}
.editor{border:1px solid rgba(16,80,36,.11);border-radius:18px;overflow:hidden;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.toolbar{min-height:47px;border-bottom:1px solid rgba(16,80,36,.08);display:flex;align-items:center;gap:4px;padding:6px 8px;background:#f6faf7}.toolbar span{flex:1}.toolbar button{border:0;background:transparent;border-radius:10px;padding:8px 10px;cursor:pointer;font-size:10.5px;color:#5b685e}.toolbar button:hover,.toolbar button.active{background:#e5f1e8;color:var(--brand-800);box-shadow:inset 0 0 0 1px rgba(35,132,58,.07)}.visual-editor,.html-editor{width:100%;min-height:230px;border:0;border-radius:0;padding:17px;outline:0;line-height:1.58;font-size:11.5px;background:#fff}.html-editor{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;resize:vertical}
.compose-card{padding:0;overflow:hidden}.field-row{display:grid;grid-template-columns:1.5fr 1fr}.field-row input,.subject{border:0;border-bottom:1px solid rgba(16,80,36,.08);border-radius:0;width:100%;height:49px;background:#fff}.compose-card .editor{border:0;border-radius:0}.compose-actions{padding:14px 16px;border-top:1px solid rgba(16,80,36,.08);display:flex;align-items:center;gap:13px;background:#f8fbf8}.muted{color:var(--muted)}.compose-actions .muted{font-size:10px}
.saved-item{padding:13px 0;border-bottom:1px solid rgba(16,80,36,.08)}.saved-item:last-child{border:0}.saved-item strong{font-size:11.5px}.saved-item small{display:block;color:var(--muted);margin-top:4px;font-size:9.5px}.mini-pill{font-size:8.5px;background:#e7f3e9;border-radius:999px;padding:4px 8px;margin-left:7px;color:var(--brand-700);border:1px solid rgba(35,132,58,.09)}
.alert{border-radius:16px;padding:12px 14px;background:#fff8db;border:1px solid #ecd98c;margin-bottom:15px;font-size:11.5px;box-shadow:0 5px 14px rgba(77,63,7,.04)}.alert.danger{background:#fff1f1;border-color:#efc5c5}.alert.success{background:#edf8ef;border-color:#bfdfc6;color:#245d31}
.diag-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(16,80,36,.08)}.diag-row:last-child{border:0}.diag-row b{font-size:11.5px}.diag-row small{display:block;color:var(--muted);font-weight:400;margin-top:4px;font-size:9.5px}.pill{font-size:8.5px;font-weight:800;border-radius:999px;padding:6px 9px}.pill.ok{background:#e5f4e8;color:#226634;border:1px solid rgba(35,132,58,.10)}.pill.bad{background:#fff2df;color:#98611d;border:1px solid #f1d4a8}.note-card{margin-top:16px;padding:18px}.note-card strong{font-size:11.5px}.note-card p{margin:6px 0 0;color:var(--muted);font-size:10.5px}

.login-page{min-height:100vh;display:grid;place-items:center;background:#eef4ef url('../img/login-bg.jpg') center/cover no-repeat fixed;padding:24px;position:relative}.login-page:before{content:"";position:fixed;inset:0;background:linear-gradient(135deg,rgba(247,251,248,.68),rgba(232,241,234,.84));backdrop-filter:blur(3px)}.login-shell{position:relative;z-index:1;width:min(448px,100%);background:rgba(255,255,255,.88);border:1px solid rgba(16,80,36,.11);border-radius:28px;padding:34px 36px 32px;box-shadow:0 30px 90px rgba(12,50,27,.16),inset 0 1px 0 rgba(255,255,255,.88);backdrop-filter:blur(24px) saturate(130%)}.login-brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.login-logo{width:180px;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(13,76,32,.08))}.login-product{font-size:10px;font-weight:800;color:var(--brand-700);letter-spacing:.14em;background:#e9f4eb;border:1px solid rgba(35,132,58,.09);border-radius:999px;padding:6px 9px}.login-shell h1{margin:0 0 7px;letter-spacing:-.045em;font-size:27px}.login-shell form{margin-top:24px}.login-foot{text-align:center;color:#8c978f;font-size:9.5px;margin-top:25px}.login-shell .btn.primary{margin-top:2px}

@media(max-width:1100px){.shell{grid-template-columns:218px minmax(0,1fr)}.mail-layout{grid-template-columns:360px minmax(0,1fr)}.message-reader{padding-left:30px;padding-right:30px}.brand span{font-size:9.5px}}
@media(max-width:820px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 12px;background:#f9fcfa}.brand{padding:0}.compose-button{margin:0;min-width:142px;height:44px}.mail-nav,.tool-nav,.nav-label,.sidebar-user{display:none!important}.topbar{position:sticky;top:0;padding:0 14px;height:64px}.search{width:100%;height:42px}.top-actions{right:14px}.version{display:none}.content{padding:20px}.content.mail-content{height:calc(100vh - 64px);padding:8px}.mail-layout{grid-template-columns:1fr;border-radius:17px}.mail-layout.has-reader .message-column{display:none}.mail-layout:not(.has-reader) .reader-column{display:none}.reader-column{display:block}.mobile-back{display:grid}.message-reader{padding:26px 20px 52px}.grid-two,.form-grid,.form-grid.three,.field-row{grid-template-columns:1fr}.wide{grid-column:auto}.page-head{flex-direction:column}.message-column{border-right:0}.reader-toolbar{height:54px}}
@media(max-width:560px){.brand span{display:none}.compose-button{min-width:132px}.search button{display:none}.message-header h2{font-size:22px}.sender-card{grid-template-columns:auto minmax(0,1fr)}.sender-card time{grid-column:2;justify-self:start}.content{padding:14px}.page-head h1{font-size:23px}.login-shell{padding:28px 22px;border-radius:24px}.login-logo{width:156px}.login-product{display:none}}