:root{--bg:#fff;--surface:#f8f9fa;--border:#e2e4e7;--ink:#1a1d20;--muted:#5b6470;--accent:#2456a6;--accent-hover:#1a3d7a;--ok:#2e8b57;--err:#c0392b;--warn:#b8860b;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.55}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border);background:#fffffff2;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.brand{color:var(--ink);letter-spacing:-.01em;align-items:center;gap:10px;font-weight:700;text-decoration:none;display:flex}.brand-mark{background:var(--accent);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:.95rem;display:inline-flex}.topnav{gap:18px;display:flex}.topnav a{color:var(--muted);font-size:.92rem;font-weight:500;text-decoration:none}.topnav a:hover,.topnav a.active{color:var(--accent)}.banner{border-bottom:1px solid var(--border);padding:10px 20px;font-size:.92rem}.banner.error{color:var(--err);background:#fdecea;border-color:#f2c4bd}.banner.info{color:var(--ok);background:#eef6ef;border-color:#c6e3cf}.main{flex:1}.center{color:var(--muted);justify-content:center;align-items:center;padding:80px 20px;display:flex}.empty{text-align:center;color:var(--muted);padding:60px 20px}.muted{color:var(--muted);font-size:.88rem}.warn{color:var(--warn)}.footnote{max-width:560px;margin-top:12px}button{font-family:var(--sans);cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:8px;padding:8px 14px;font-size:.9rem}button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}button.primary:hover{background:var(--accent-hover)}button.ghost{background:0 0}button.ghost:hover{background:var(--surface)}button.danger{color:var(--err);border-color:#e6b8b2}button:disabled{opacity:.55;cursor:default}.login-wrap{justify-content:center;align-items:center;min-height:calc(100vh - 56px);padding:40px 20px;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:16px;width:100%;max-width:380px;padding:32px;display:flex}.login-card h1{font-size:1.3rem;font-weight:700}.login-card label{color:var(--muted);flex-direction:column;gap:6px;font-size:.88rem;display:flex}input,textarea{font-family:var(--sans);border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:.95rem}input:focus,textarea:focus{border-color:var(--accent);outline:none}.shell{grid-template-columns:240px 1fr;gap:0;min-height:calc(100vh - 56px);display:grid}.sidebar{border-right:1px solid var(--border);background:var(--surface);flex-direction:column;gap:20px;padding:16px 12px;display:flex}.sidebar-group{flex-direction:column;gap:4px;display:flex}.compose-btn{background:var(--accent);color:#fff;border-color:var(--accent);width:100%;padding:10px 14px;font-weight:600}.compose-btn:hover{background:var(--accent-hover)}.folder{color:var(--ink);border-radius:8px;padding:8px 12px;font-size:.9rem;text-decoration:none;display:block}.folder:hover{background:var(--bg)}.folder.active{color:var(--accent);background:#2456a61a;font-weight:600}.content{padding:24px;overflow:auto}.list-head{justify-content:space-between;align-items:baseline;margin-bottom:16px;display:flex}.list-head h2{font-size:1.15rem}.msg-list{list-style:none}.msg-row{border-bottom:1px solid var(--border);color:var(--ink);grid-template-columns:180px 1fr 160px;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;display:grid}.msg-row:hover{background:var(--surface)}.msg-row.unseen{font-weight:700}.msg-from{text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.msg-subject{text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:.92rem;overflow:hidden}.msg-row.unseen .msg-subject,.msg-row.unseen .msg-from{color:var(--ink)}.msg-date{color:var(--muted);text-align:right;font-size:.82rem}.message{max-width:860px;padding:24px}.actions{flex-wrap:wrap;gap:10px;margin-bottom:16px;display:flex}.actions .danger{margin-left:auto}.message-card{border:1px solid var(--border);border-radius:12px;padding:24px}.message-card h2{margin-bottom:14px;font-size:1.2rem}.headers{flex-direction:column;gap:4px;margin-bottom:18px;display:flex}.headers>div{gap:10px;font-size:.9rem;display:flex}.headers dt{color:var(--muted);min-width:60px}.headers dd{overflow-wrap:anywhere}.body{white-space:pre-wrap;font-size:.95rem;line-height:1.6}.attachments{border-top:1px solid var(--border);margin-top:22px;padding-top:14px}.attachments h3{color:var(--muted);margin-bottom:8px;font-size:.9rem}.attachments ul{flex-direction:column;gap:6px;list-style:none;display:flex}.attachments button{text-align:left;width:100%}.compose{flex-direction:column;gap:14px;max-width:860px;padding:24px;display:flex}.compose-head{justify-content:space-between;align-items:center;display:flex}.compose-head h2{font-size:1.15rem}.compose-head>div{gap:10px;display:flex}.compose label{color:var(--muted);flex-direction:column;gap:6px;font-size:.88rem;display:flex}.compose-body{resize:vertical;min-height:260px}.attach ul{flex-direction:column;gap:6px;list-style:none;display:flex}.attach li{align-items:center;gap:10px;font-size:.88rem;display:flex}.settings{flex-direction:column;align-items:flex-start;gap:16px;max-width:560px;padding:24px;display:flex}.settings .headers>div{min-width:220px}.status-list{flex-direction:column;gap:6px;font-size:.9rem;list-style:none;display:flex}@media (max-width:720px){.shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);flex-direction:row;overflow-x:auto}.sidebar-group{flex-flow:row}.compose-btn{white-space:nowrap;width:auto}.folder{white-space:nowrap}.msg-row{grid-template-columns:1fr 90px}.msg-from{display:none}}.password-form{flex-direction:column;gap:12px;max-width:420px;margin:12px 0 16px;display:flex}.password-form label{flex-direction:column;gap:4px;font-size:13px;display:flex}.password-form input{border:1px solid var(--border,#ccc);border-radius:6px;padding:8px 10px;font-size:14px}.password-form .banner{margin:0}