:root{--bg: #f6f5f2;--panel: #ffffff;--ink: #1c1d20;--muted: #6b6d73;--line: #e4e2dc;--accent: #1f3a5f;--accent-ink: #ffffff;--warm: #e8a33d;--danger: #b3261e;--unread: #1f3a5f;--active: #e9eef5;--radius: 12px;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px);color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #16171a;--panel: #1e1f23;--ink: #ececea;--muted: #9a9ca3;--line: #2e3036;--accent: #8db4e6;--accent-ink: #10213a;--unread: #a9c8f0;--active: #262b33;--danger: #f2867e}}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic UI,Segoe UI,Noto Sans JP,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit;color:inherit}button,.button{display:inline-flex;align-items:center;gap:.3em;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:.45em 1em;cursor:pointer;text-decoration:none;color:var(--ink);white-space:nowrap}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}button.danger{color:var(--danger)}button.big{width:100%;justify-content:center;padding:.8em 1em;font-size:1.05em}button.icon{border:none;background:none;font-size:1.3em;padding:.2em .5em}.chip{border-radius:999px;padding:.15em .7em;font-size:.85em;border:1px solid var(--line);background:var(--panel)}.chip .x{border:none;padding:0 0 0 .4em;background:none}input,select,textarea{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:.5em .7em;min-width:0}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}.muted{color:var(--muted)}.small{font-size:.85em}.pad{padding:1rem}.error{color:var(--danger)}.mono{font-family:ui-monospace,SF Mono,Consolas,monospace;font-size:.9em}.gate{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}.gate-card{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:2rem 1.5rem;text-align:center;display:grid;gap:.9rem}.gate-card img{margin:0 auto;border-radius:14px}.gate-card h1{font-size:1.25rem;margin:0}.gate-card p{margin:0}.field{display:grid;gap:.3rem;text-align:left}.field span{font-size:.85em;color:var(--muted)}.shell{min-height:100dvh}.side{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:calc(5rem + var(--safe-b))}.detail{display:none;background:var(--panel);min-height:100dvh}.shell.has-detail .side{display:none}.shell.has-detail .detail{display:block}.empty-detail{text-align:center;margin-top:30vh}@media(min-width:900px){.shell{display:grid;grid-template-columns:minmax(340px,400px) 1fr;height:100dvh}.side,.shell.has-detail .side{display:flex;height:100dvh;overflow-y:auto;border-right:1px solid var(--line);padding-bottom:5rem}.detail,.shell.has-detail .detail{display:block;height:100dvh;overflow-y:auto}.fab{position:sticky!important}}.top{display:flex;align-items:center;justify-content:space-between;padding:calc(.6rem + var(--safe-t)) 1rem .3rem}.top h1{font-size:1.4rem;margin:0;letter-spacing:.02em}.mailboxes{display:flex;gap:.4rem;overflow-x:auto;padding:.4rem 1rem .6rem;scrollbar-width:none}.mailboxes::-webkit-scrollbar{display:none}.mb{flex:none;font-size:.9em;padding:.3em .8em}.mb i{width:.55em;height:.55em;border-radius:50%;background:hsl(var(--h) 55% 50%);display:inline-block}.mb b{background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:.75em;padding:0 .5em}.mb.on{background:var(--ink);color:var(--bg);border-color:transparent}.mb.on b{background:var(--bg);color:var(--ink)}.filter{padding:0 1rem .5rem}.filter input{width:100%;border-radius:999px}.list ul{list-style:none;margin:0;padding:0}.item{display:grid;gap:.1rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}.item.active{background:var(--active)}.item-top{display:flex;align-items:baseline;gap:.4rem}.who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item time{font-size:.8em;color:var(--muted);flex:none}.count{font-size:.75em;color:var(--muted)}.subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-bottom{display:flex;gap:.5rem;align-items:baseline;font-size:.85em;color:var(--muted);min-width:0}.snippet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item.unread .who,.item.unread .subject{font-weight:700}.item.unread .who:before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--unread);margin-right:.4em;vertical-align:.1em}.mbox{flex:none;font-size:.8em;padding:0 .5em;border-radius:4px;color:hsl(var(--h) 50% 32%);background:hsl(var(--h) 60% 92%)}@media(prefers-color-scheme:dark){.mbox{color:hsl(var(--h) 60% 78%);background:hsl(var(--h) 30% 22%)}}.more{margin:1rem auto;display:flex}.fab{position:fixed;right:1rem;bottom:calc(1rem + var(--safe-b));z-index:5;margin-top:auto;align-self:flex-end;background:var(--accent);color:var(--accent-ink);border:none;font-weight:700;padding:.9em 1.4em;box-shadow:0 4px 16px #0000002e}.thread-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:.5rem;padding:calc(.5rem + var(--safe-t)) .75rem .5rem;background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.thread-bar h2{flex:1;font-size:1.05rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.back{border:none;background:none;font-size:1.6rem;line-height:1;padding:0 .4rem}.msg{border-bottom:1px solid var(--line)}.msg-head{display:flex;gap:.6rem;padding:.8rem 1rem;cursor:pointer;align-items:baseline}.msg-from{flex:1;min-width:0;display:grid}.msg-snippet{color:var(--muted);font-size:.9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg-head time{color:var(--muted);font-size:.85em}.msg.out .msg-head strong{color:var(--muted)}.msg-meta{display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;margin:0 1rem .6rem;font-size:.85em}.msg-meta dt{color:var(--muted)}.msg-meta dd{margin:0;overflow-wrap:anywhere}.mail-body{padding:0 .25rem}.body-tools{display:flex;gap:.4rem;padding:0 .75rem .5rem}.mail-frame{width:100%;border:none;display:block;background:#fff;border-radius:8px}.mail-text{white-space:pre-wrap;overflow-wrap:anywhere;padding:.25rem .75rem 1rem;font-size:15px}.attachments{list-style:none;padding:0 .75rem;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.4rem}.attachments a{display:inline-flex;gap:.5rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit}.att-size{color:var(--muted);font-size:.85em}.msg-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem 1rem 1rem}.thread-tools{display:flex;gap:.5rem;justify-content:center;padding:1.5rem 1rem calc(2rem + var(--safe-b))}.compose{display:flex;flex-direction:column;min-height:100dvh}.compose-fields{border-bottom:1px solid var(--line)}.row{display:flex;align-items:center;gap:.6rem;padding:.35rem 1rem;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:none}.row>span:first-child{width:4em;flex:none;color:var(--muted);font-size:.9em}.row input,.row select{flex:1;border:none;background:transparent;padding:.4em 0}.row input:focus,.row select:focus{outline:none}.name-now{flex:1}.from-custom{flex:1;display:flex;align-items:center}.from-custom input{flex:1}.compose-text{flex:1;min-height:40vh;border:none;border-radius:0;padding:1rem;resize:vertical;background:transparent;line-height:1.6}.compose-text:focus{outline:none}.compose-foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.75rem 1rem calc(1rem + var(--safe-b));border-top:1px solid var(--line)}.send-bottom{margin-top:.5rem}.settings section{padding:1rem;border-bottom:1px solid var(--line);display:grid;gap:.6rem}.settings h3{margin:0;font-size:1rem}.settings .row{padding:.2rem 0}.settings .row>span:first-child{width:7em}.settings .row input{border-bottom:1px solid var(--line)}.devices{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.devices li{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.ticket{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.ticket p{width:100%;margin:0}.ticket input{flex:1;font-size:.8em}.mute-list{display:flex;flex-wrap:wrap;gap:.4rem}.mute-list .chip{display:inline-flex;align-items:center;gap:.3em}.spam-note{margin:.75rem 1rem 0;padding:.6rem .8rem;border-radius:8px;background:color-mix(in srgb,var(--warm) 18%,transparent);font-size:.9em}
