:root {
    --bg:#07090d; --bg-elev:#0d1117; --bg-card:#11151c; --bg-hover:#1a1f29;
    --border:#1e2530; --border-light:#2a3442; --text:#e6edf3;
    --text-muted:#7d8794; --text-dim:#5a6572; --primary:#7cc6ff;
    --primary-soft:#b8dcff; --primary-dark:#4a9eff;
    --success:#7ee0a8; --danger:#ff9aa2;
    --radius:16px; --radius-sm:10px; --radius-pill:999px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.55; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-soft); }
input, select, textarea {
    width:100%; padding:10px 14px; background:var(--bg-elev);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text); font-size:14px; font-family:inherit;
}
input:focus, select:focus, textarea:focus {
    border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,198,255,0.15); outline:none;
}
.btn { padding:10px 20px; background:var(--primary); color:#0a121e; border:none;
    border-radius:var(--radius-pill); font-weight:600; cursor:pointer; font-size:14px; }
.btn:hover { background:var(--primary-soft); }
.btn-small { padding:6px 14px; background:transparent; border:1px solid var(--border-light);
    color:var(--text); border-radius:var(--radius-pill); font-size:13px; cursor:pointer; }
.btn-small:hover { border-color:var(--primary); color:var(--primary); }
.btn-danger { border-color:rgba(255,154,162,0.4); color:var(--danger); }

.webmail { display:flex; min-height:100vh; }
.webmail-sidebar { width:220px; background:var(--bg-elev); border-right:1px solid var(--border);
    padding:20px 12px; display:flex; flex-direction:column; gap:8px; }
.webmail-sidebar .logo { padding:10px 16px 20px 16px; font-size:18px; font-weight:700; color:var(--primary); }
.folder-link { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-sm);
    color:var(--text-muted); font-size:14px; }
.folder-link:hover { background:var(--bg-hover); color:var(--text); }
.folder-link.active { background:rgba(124,198,255,0.1); color:var(--primary); border-left:2px solid var(--primary); }
.folder-count { margin-left:auto; background:var(--bg-card); padding:2px 8px; border-radius:var(--radius-pill); font-size:11px; }

.webmail-main { flex:1; display:flex; flex-direction:column; }
.webmail-header { background:var(--bg-elev); border-bottom:1px solid var(--border);
    padding:14px 24px; display:flex; justify-content:space-between; align-items:center; }
.webmail-header h2 { font-size:18px; color:var(--primary); }
.webmail-header .user { color:var(--text-muted); font-size:13px; }
.webmail-actions { display:flex; gap:8px; }

.email-list { flex:1; overflow-y:auto; padding:16px 24px; }
.email-row { display:flex; gap:12px; padding:12px 14px; background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-sm); margin-bottom:8px; align-items:center; cursor:pointer; }
.email-row:hover { background:var(--bg-hover); border-color:var(--border-light); }
.email-row.unread .from, .email-row.unread .subject { color:var(--primary); font-weight:600; }
.email-row .from { min-width:180px; color:var(--text); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.email-row .subject { flex:1; color:var(--text); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.email-row .date { color:var(--text-dim); font-size:12px; min-width:120px; text-align:right; }

.email-view { padding:24px; max-width:900px; }
.email-view h1 { font-size:22px; margin-bottom:12px; color:var(--text); }
.email-view .meta { color:var(--text-muted); font-size:13px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.email-view .body { white-space:pre-wrap; line-height:1.6; color:var(--text); }
.email-view iframe { width:100%; min-height:400px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; }

.compose { padding:24px; max-width:900px; }
.compose .field { margin-bottom:16px; }
.compose label { display:block; font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.compose textarea { min-height:300px; font-family:inherit; }

.empty { text-align:center; padding:60px 20px; color:var(--text-muted); }
.toast { position:fixed; bottom:20px; right:20px; background:var(--bg-card); border:1px solid var(--border-light);
    border-radius:var(--radius-sm); padding:12px 20px; color:var(--text); }
.toast.error { border-left:3px solid var(--danger); }
.toast.success { border-left:3px solid var(--success); }

@media (max-width:768px) {
    .webmail-sidebar { width:60px; }
    .webmail-sidebar .logo, .folder-link span:not(.folder-count) { display:none; }
    .folder-link { justify-content:center; padding:10px; }
    .email-row .from, .email-row .date { display:none; }
}