:root{--ink:#0b0f2a;--mute:#626782;--line:#e3e1ef;--fill:#f5f3fb;--paper:#fff;--acc:#7b17ff;--acc2:#f72d86;--accbg:#f1e8ff;--err:#d52252;--ok:#15805d;--warn:#9a5100;--warnbg:#fff1dc}*{box-sizing:border-box}body{margin:0;font:16px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:linear-gradient(145deg,#fff,#fbf9ff 55%,#f5f0ff);min-height:100vh}button,input,textarea{font:inherit;color:inherit}h1{font-size:28px;margin:0 0 8px;line-height:1.15}h2{font-size:18px;margin:0}.muted{color:var(--mute);font-size:14px}.err{color:var(--err);font-size:14px;font-weight:500}.ok{color:var(--ok);font-size:14px;font-weight:500}.wrap{max-width:460px;margin:0 auto;padding:28px 24px;display:flex;flex-direction:column;gap:16px;min-height:100vh}.steps{display:flex;gap:6px}.steps i{flex:1;height:4px;border-radius:2px;background:var(--fill)}.steps i.on{background:var(--acc)}label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}input[type=text],input[type=email],input[type=search],textarea{min-height:50px;padding:0 15px;border:1.5px solid var(--line);border-radius:14px;background:#fff;outline:none;transition:.2s border-color,.2s box-shadow}input:focus,textarea:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 4px #7b17ff1c}textarea{padding:12px 14px;min-height:180px;resize:vertical}.btn{min-height:48px;padding:0 18px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s transform,.18s box-shadow,.18s border-color}.btn:hover:not(:disabled){transform:translateY(-1px);border-color:#c9c3df}.btn.primary{background:linear-gradient(120deg,var(--acc),var(--acc2));border-color:transparent;color:#fff;box-shadow:0 10px 25px #7b17ff38}.btn.small{min-height:36px;font-size:14px}.btn:disabled{opacity:.5;cursor:default}.btn.link{border:0;min-height:36px;color:var(--acc);background:none}.btn.danger{color:var(--err);border-color:var(--err)}.card{border:1.5px solid var(--line);border-radius:16px;padding:16px;background:#ffffffeb;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 30px #0b0f2a0b}.card.sel{border-color:var(--acc);background:var(--accbg)}.lock{display:flex;gap:8px;align-items:center;padding:10px 12px;background:var(--accbg);border-radius:10px;font-size:13px;font-weight:500}.warnbox{padding:10px 12px;background:var(--warnbg);border-radius:10px;font-size:13px;color:var(--warn)}.row{display:flex;gap:10px;align-items:center}.grow{flex:1;min-width:0}.words{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.words span{border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px;font-family:ui-monospace,monospace}.words b{color:var(--mute);font-weight:400;margin-right:6px;font-size:11px}.code{font-family:ui-monospace,monospace;font-size:13px;word-break:break-all}.avatar{width:40px;height:40px;border-radius:50%;background:var(--fill);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--mute);flex-shrink:0}.avatar.org{border-radius:8px}.badge{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;font-size:11px;vertical-align:middle;margin-left:6px}.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1.5px solid var(--line);border-radius:16px;font-size:13px;font-weight:600;background:#fff;cursor:pointer}.chip.on{background:var(--accbg);border-color:var(--acc);color:var(--acc)}.app{display:grid;grid-template-columns:88px 1fr;min-height:100vh}.rail{border-right:0;padding:14px 8px;display:flex;flex-direction:column;gap:6px;align-items:center;background:#0b0f2a;box-shadow:8px 0 30px #0b0f2a14}.rail .logo{width:48px;height:48px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.brand-mark{display:block;width:44px;height:44px;object-fit:contain;border-radius:12px}.welcome-mark{width:80px;height:80px;border-radius:20px}.logo-badge{position:absolute;left:34px;top:-4px;font-size:9px;white-space:nowrap}.rail button{width:72px;height:60px;border:0;background:none;border-radius:14px;font-size:11px;font-weight:600;color:#aeb1c7;cursor:pointer}.rail button.on{background:linear-gradient(135deg,#7b17ff57,#f72d8642);color:#fff;font-weight:800}.main{display:flex;flex-direction:column;min-width:0}.top{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1.5px solid var(--line);background:#ffffffdb;backdrop-filter:blur(16px)}.top h1{margin:0;flex:1;font-size:24px}.split{display:grid;grid-template-columns:minmax(300px,380px) 1fr;flex:1;min-height:0}.list{border-right:1.5px solid var(--line);overflow:auto}.item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}.item.sel{background:var(--accbg)}.item.unread b.s{font-weight:700}.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);margin-top:8px;flex-shrink:0}.reader{padding:24px 32px;display:flex;flex-direction:column;gap:16px;overflow:auto}.body{white-space:pre-wrap;line-height:1.6}.compose{position:fixed;inset:auto 24px 0 auto;width:min(560px,100vw - 48px);background:#fff;border:1.5px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;display:flex;flex-direction:column;gap:12px;padding:16px;box-shadow:0 -4px 0 var(--line);max-height:92vh;overflow:auto;z-index:10}.attach{display:flex;gap:8px;flex-wrap:wrap}@media (max-width:760px){.app{grid-template-columns:1fr;padding-bottom:64px}.rail{position:fixed;bottom:0;left:0;right:0;flex-direction:row;justify-content:space-around;border-right:0;border-top:0;background:#0b0f2a;padding:4px;z-index:5}.rail .logo{display:none}.rail button{width:auto;flex:1;height:52px}.split{grid-template-columns:1fr}.list{border-right:0}.split.reading .list{display:none}.split:not(.reading) .reader{display:none}.compose{inset:0;width:auto;border-radius:0;max-height:none}}.card.row{flex-direction:row}@media (max-width:760px){.top{flex-wrap:wrap}.top h1{flex-basis:100%}}select{min-height:44px;padding:0 10px;border:1.5px solid var(--ink);border-radius:10px;background:#fff}.bubble{align-self:flex-start;max-width:78%;padding:10px 12px;border-radius:14px;background:var(--fill);display:flex;flex-direction:column;gap:6px}.bubble.mine{align-self:flex-end;background:var(--accbg)}.split-back{display:none}@media (max-width:760px){.split-back{display:inline-flex}}