/* Mail Client — корпстиль ASCmedia (светлый тихий премиум, Manrope, бирюза) */
:root{
  --bg:#ffffff; --soft:#f6fafb; --mist:#eef6f6;
  --ink:#072227; --body:#2f4348; --muted:#566c71; --line:#e9eff0;
  --dark:#0c2e32;
  --teal:#0e9aa0; --teal-d:#0b5d62; --teal-l:#5cc4c8; --teal-xl:#a7dedd;
  --coral:#d76b5b;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Manrope,system-ui,Segoe UI,sans-serif;color:var(--body);
  background:var(--soft);font-weight:400;-webkit-font-smoothing:antialiased}
a{color:var(--teal-d);text-decoration:none}

/* layout */
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:var(--bg);border-right:1px solid var(--line);padding:22px 16px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.main{padding:22px 28px}
.logo{font-weight:800;font-size:22px;letter-spacing:-1px;color:var(--ink);margin:0 8px 20px}
.logo .m{color:var(--teal)}
.logo small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0}

.acc-list{list-style:none;margin:0;padding:0}
.acc-list li a{display:block;padding:9px 12px;border-radius:10px;color:var(--body);
  font-size:13.5px;font-weight:500;margin-bottom:2px;display:flex;justify-content:space-between;align-items:center}
.acc-list li a:hover{background:var(--mist)}
.acc-list li a.active{background:var(--teal);color:#fff;font-weight:700}
.acc-list .err{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:0 0 auto}
.acc-all{font-weight:700 !important;border-bottom:1px solid var(--line);
  border-radius:0 !important;margin-bottom:8px !important;padding-bottom:12px !important}

/* topbar */
.topbar{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.search{flex:1}
.search input{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:14px;background:var(--bg)}
.search input:focus{outline:none;border-color:var(--teal-l)}
.btn{padding:11px 18px;border:none;border-radius:12px;background:var(--teal);color:#fff;
  font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.btn:hover{background:var(--teal-d)}
.btn.ghost{background:var(--mist);color:var(--teal-d)}

/* message list */
.list{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.row{display:grid;grid-template-columns:160px 220px 1fr 130px;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--line);align-items:baseline;cursor:pointer}
.row:last-child{border-bottom:none}
.row:hover{background:var(--soft)}
.row.unseen{font-weight:700}
.row.unseen .tag{background:var(--teal);color:#fff}
.tag{font-size:11px;font-weight:700;color:var(--teal-d);background:var(--mist);
  padding:3px 8px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.from{color:var(--ink);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subj{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subj .prev{color:var(--muted);font-weight:400}
.date{color:var(--muted);font-size:12.5px;text-align:right;white-space:nowrap}
.empty{padding:60px;text-align:center;color:var(--muted)}

/* message view */
.msg-head{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 28px;margin-bottom:18px}
.msg-head h1{font-size:21px;color:var(--ink);margin:0 0 12px;letter-spacing:-.5px}
.msg-meta{color:var(--muted);font-size:13.5px;line-height:1.9}
.msg-meta b{color:var(--body)}
.msg-body{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;white-space:pre-wrap;line-height:1.7;font-size:14.5px;color:var(--body)}
.back{display:inline-block;margin-bottom:16px;font-weight:700}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--mist)}
.login-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;
  padding:40px;width:340px;box-shadow:0 20px 60px rgba(13,51,56,.10)}
.login-card .logo{text-align:center;margin-bottom:24px}
.login-card input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:14px;margin-bottom:12px}
.login-card .btn{width:100%}
.login-err{color:var(--coral);font-size:13px;margin-bottom:12px;text-align:center}