:root{--bg: #f8fbfd;--panel: #ffffff;--ink: #1a2a3e;--muted: #5a6a7e;--line: #c5e4f7;--accent: #2b8fd4;--accent-dark: #1a6fb0;--accent-soft: #e8f4fd;--accent-ink: #ffffff;--pink: #e91e8c;--pink-light: #f06ec4;--grad-cta: linear-gradient(135deg, var(--pink), var(--pink-light));--grad-sky: linear-gradient(135deg, #4aabe3, var(--accent-dark));--unread-bg: #fff;--read-bg: #f0f5fa}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans Thai,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}button{font:inherit;cursor:pointer}.muted{color:var(--muted)}.error{color:#c0392b}.login-wrap{height:100%;display:grid;place-items:center}.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:2.2rem 2.4rem;width:min(22rem,90vw);display:flex;flex-direction:column;gap:.8rem;text-align:center;box-shadow:0 10px 40px #0000000f}.login-logo img{width:72px;height:72px}.login-card h1{margin:0 0 .5rem;font-size:1.3rem}.turnstile-box{display:flex;justify-content:center;min-height:65px}.login-card input{padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;font:inherit}.login-card button{padding:.65rem;border:none;border-radius:8px;background:var(--grad-sky);color:var(--accent-ink);font-weight:600}.login-card button:disabled{opacity:.5;cursor:default}.layout{display:flex;height:100%}aside{width:220px;flex-shrink:0;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;padding:1rem .8rem;gap:.6rem}.brand{font-weight:700;font-size:1.05rem;padding:.2rem .4rem .6rem;display:flex;align-items:center;gap:.5rem}.brand img{width:32px;height:32px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 1px 4px #1a6fb040}.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}.brand-text small{font-weight:400;font-size:.7rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}aside .compose-btn.primary{border-radius:10px;background:var(--grad-cta)}aside nav{display:flex;flex-direction:column;gap:2px;margin-top:.4rem}aside nav button{text-align:left;padding:.55rem .7rem;border:none;background:none;border-radius:8px;color:var(--ink)}aside nav button.active{background:var(--accent-soft);color:var(--accent-dark);font-weight:600}aside nav button:hover{background:var(--bg)}.spacer{flex:1}.logout{border:none;background:none;color:var(--muted);padding:.5rem}.logout:hover{color:var(--ink)}main{flex:1;display:flex;flex-direction:column;overflow:hidden}.primary{background:var(--grad-sky);color:var(--accent-ink);border:none;border-radius:8px;padding:.55rem 1.1rem;font-weight:600}.primary:disabled{opacity:.5;cursor:default}.icon-btn{border:none;background:none;padding:.3rem .5rem;border-radius:6px;color:var(--muted)}.icon-btn:hover{background:var(--bg);color:var(--ink)}.searchbar{display:flex;gap:.4rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:var(--panel)}.searchbar input{flex:1;padding:.55rem .9rem;border:1px solid var(--line);border-radius:20px;font:inherit;background:var(--bg)}.banner{margin:.8rem 1rem 0;padding:.7rem 1rem;background:#fff7e0;border:1px solid #eedca8;border-radius:8px}.banner.error{background:#fdecea;border-color:#f5c6c2}.thread-list{overflow-y:auto;flex:1;padding:.5rem 0 2rem}.row{display:block;width:100%;text-align:left;border:none;border-bottom:1px solid var(--line);background:var(--read-bg);padding:.65rem 1.1rem}.row.unread{background:var(--unread-bg)}.row.unread .row-from,.row.unread .row-subject{font-weight:700}.row:hover{background:#eaf4fc}.row-top{display:flex;justify-content:space-between;gap:1rem}.row-from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-date{color:var(--muted);font-size:.85rem;flex-shrink:0}.row-subject{margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count{color:var(--muted);font-weight:400}.row-snippet{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}.load-more{display:block;margin:1rem auto;border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:.5rem 1.4rem}.pane-center{padding:3rem 1rem;text-align:center}.thread-view{display:flex;flex-direction:column;height:100%;overflow:hidden}.thread-toolbar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--panel)}.thread-subject{font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thread-messages{overflow-y:auto;flex:1;padding:1rem;display:flex;flex-direction:column;gap:.7rem}.msg{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.msg>header{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1rem;cursor:pointer}.msg-from{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg-date{color:var(--muted);font-size:.85rem;flex-shrink:0}.msg-meta{padding:0 1rem .5rem;font-size:.85rem}.msg-body{padding:.4rem 1rem 1rem;margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}.msg-body.html{white-space:normal;overflow-x:auto}.msg-body.html img{max-width:100%}.load-images{margin:0 1rem .6rem;border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:.35rem .8rem;font-size:.85rem}.attachments{padding:0 1rem 1rem;display:flex;flex-wrap:wrap;gap:.5rem}.attachments a{border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;text-decoration:none;color:var(--ink);font-size:.88rem;background:var(--bg)}.thread-actions{padding:.8rem 1rem;border-top:1px solid var(--line);background:var(--panel)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:grid;place-items:center;z-index:10}.compose{background:var(--panel);border-radius:14px;width:min(40rem,94vw);display:flex;flex-direction:column;gap:.6rem;padding:1.1rem 1.2rem;box-shadow:0 20px 60px #0003}.compose header{display:flex;justify-content:space-between;align-items:center}.compose input,.compose textarea{padding:.55rem .8rem;border:1px solid var(--line);border-radius:8px;font:inherit}.compose textarea{min-height:12rem;resize:vertical}.compose footer{display:flex;justify-content:flex-end}@media(max-width:640px){aside{width:64px;padding:.8rem .4rem}.brand,.logout{font-size:0}.brand{justify-content:center}.brand .brand-text{display:none}.logout:before{content:"🚪";font-size:1.2rem}aside nav button{font-size:0;padding:.55rem;text-align:center}aside nav button:first-letter{font-size:1.2rem}.compose-btn{font-size:0}.compose-btn:before{content:"✏️";font-size:1.2rem}}