:root{--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--blue-100:#dbeafe;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--red-50:#fef2f2;--red-100:#fee2e2;--red-200:#fecaca;--red-500:#ef4444;--red-700:#b91c1c;--amber-50:#fffbeb;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-500:#f59e0b;--amber-700:#b45309;--emerald-50:#ecfdf5;--emerald-100:#d1fae5;--emerald-200:#a7f3d0;--emerald-500:#10b981;--emerald-600:#059669;--surface:#fff;--sidebar-w:220px;--header-h:56px;--radius:8px;--shadow:0 1px 3px #00000014;--shadow-lg:0 4px 12px #0000001a;color:#0f172a;background:#f8fafc;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{color:#0f172a;background:#f8fafc;margin:0}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.app-shell{grid-template-columns:240px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{color:#e2e8f0;background:#0f172a;flex-direction:column;gap:18px;padding:24px 18px;display:flex}.brand{font-size:1.15rem;font-weight:700}.brand-sub{color:#94a3b8;margin-top:4px;font-size:.82rem}.nav{gap:8px;display:grid}.nav a{color:#cbd5e1;border-radius:10px;padding:10px 12px}.nav a.active,.nav a:hover{color:#fff;background:#94a3b829}.sidebar-meta{color:#94a3b8;margin-top:auto;font-size:.78rem}.main{min-width:0;padding:28px}.page-head{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.page-head h1{margin:0 0 6px;font-size:1.7rem}.page-head p{color:#475569;margin:0}.button-row,.actions-row{flex-wrap:wrap;gap:10px;display:flex}.btn,.btn-secondary,.btn-ghost{cursor:pointer;border:1px solid #0f172a;border-radius:10px;justify-content:center;align-items:center;padding:10px 14px;display:inline-flex}.btn{color:#fff;background:#0f172a}.btn-secondary{color:#0f172a;background:#fff;border-color:#cbd5e1}.btn-ghost{color:#0f172a;background:0 0;border-color:#0000}.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px;box-shadow:0 1px 2px #0f172a0a}.mail-layout{grid-template-columns:360px minmax(0,1fr);gap:20px;min-height:calc(100vh - 170px);display:grid}.thread-list,.thread-view{background:#fff;border:1px solid #e2e8f0;border-radius:16px;min-width:0;overflow:hidden}.thread-item{border-bottom:1px solid #f1f5f9;padding:16px;display:block}.thread-item:hover{background:#f8fafc}.thread-item.unread .thread-subject{font-weight:700}.thread-meta{color:#64748b;justify-content:space-between;gap:12px;font-size:.82rem;display:flex}.thread-subject{margin-top:4px;font-size:.98rem}.thread-snippet{color:#475569;margin-top:6px;font-size:.88rem}.empty-state{color:#64748b;padding:32px}.thread-inner{gap:18px;padding:18px;display:grid}.message-card{border:1px solid #e2e8f0;border-radius:14px;padding:16px}.message-header{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;margin-bottom:14px;display:grid}.message-date,.muted{color:#64748b}.message-lines{gap:4px;font-size:.88rem;display:grid}.message-body{font-size:.94rem;line-height:1.6}.message-attachments{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.chip{color:#1d4ed8;background:#eff6ff;border-radius:999px;padding:6px 10px;font-size:.78rem}.compose-form{gap:14px;max-width:920px;display:grid}.field{gap:6px;display:grid}.field label{color:#334155;font-size:.86rem;font-weight:600}.field input,.field textarea,.field select{background:#fff;border:1px solid #cbd5e1;border-radius:10px;width:100%;padding:11px 12px}.field textarea{resize:vertical;min-height:240px}.form-error{color:#b91c1c;font-size:.86rem}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:14px}.stat-label{color:#64748b;font-size:.82rem}.stat-value{margin-top:6px;font-size:1.1rem;font-weight:700}.auth-shell{place-items:center;min-height:100vh;padding:24px;display:grid}.landing{max-width:760px;padding:48px 24px}.landing h1{margin:0 0 12px;font-size:2.4rem}.landing p{color:#475569;line-height:1.7}@media (width<=960px){.app-shell{grid-template-columns:1fr}.sidebar{padding-bottom:14px}.mail-layout,.info-grid{grid-template-columns:1fr}}