:root{--bg:#1d1f21;--p:#25282b;--p2:#2c3034;--line:#3a3e42;--t:#ececec;--m:#9aa0a6;--or:#ffa500;--gr:#3fb950;--rd:#f85149;--r:10px}
*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--t);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.mono{font-family:ui-monospace,Consolas,monospace}.mut{color:var(--m)}.sm{font-size:13px}.xs{font-size:12px}
.app{display:grid;grid-template-columns:220px minmax(0,1fr) 280px;min-height:100vh}
aside.nav{border-right:1px solid var(--line);padding:16px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{font-weight:700;font-size:18px;padding:0 8px 14px}.brand span{color:var(--or)}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--t);text-decoration:none}
.nav a:hover{background:var(--p)}.nav a.on{background:var(--p2);color:var(--or)}.nav a .cnt{margin-left:auto;background:var(--or);color:#111;border-radius:10px;font-size:11px;padding:0 6px;font-weight:700}
.nav .write{margin:6px 0 10px;background:var(--or);color:#111;border:0;border-radius:8px;padding:10px;font-weight:700}
.nav .foot{margin-top:auto}.kbd{border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:11px;color:var(--m)}
main{padding:18px 22px;max-width:780px;width:100%}
aside.side{border-left:1px solid var(--line);padding:16px;position:sticky;top:0;height:100vh;overflow:auto}
h2{margin:0 0 12px;font-size:20px}h3{margin:0 0 8px;font-size:15px}
.card{background:var(--p);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 10px}
.view{display:none}.view.on{display:block}
/* composer */
.seg{display:inline-flex;background:#1a1c1e;border:1px solid var(--line);border-radius:8px;padding:2px}
.seg button{background:none;border:0;border-radius:6px;padding:5px 10px;display:flex;align-items:center;gap:6px}
.seg button.on{background:var(--p2);color:var(--or)}
textarea,input,select{width:100%;background:#1a1c1e;color:var(--t);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
textarea{resize:vertical;min-height:70px}
.rcpt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#1a1c1e;border:1px solid var(--line);border-radius:8px;padding:5px 8px;position:relative}
.rcpt input{border:0;padding:3px;flex:1;min-width:120px;background:none}
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--p2);border:1px solid var(--line);border-radius:14px;padding:1px 8px;font-size:13px}
.pill button{background:none;border:0;padding:0 2px;color:var(--m)}
.sugg{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--p2);border:1px solid var(--line);border-radius:8px;z-index:5;display:none;max-height:220px;overflow:auto}
.sugg div{padding:6px 10px;cursor:pointer;display:flex;justify-content:space-between}.sugg div:hover,.sugg div.hi{background:var(--line)}
.crow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.btn{background:var(--p2);border:1px solid var(--line);border-radius:8px;padding:6px 12px}.btn:hover{border-color:var(--m)}
.btn.pri{background:var(--or);color:#111;border-color:var(--or);font-weight:700}.btn.dang{border-color:var(--rd);color:var(--rd)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.info{font-size:13px;border-left:3px solid var(--line);padding:2px 10px;margin-top:8px;color:var(--m)}
.info.age{border-color:var(--gr)}.info.lc{border-color:#58a6ff}.info.pub{border-color:var(--or)}
/* feed */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 10px}
.chip{background:var(--p);border:1px solid var(--line);border-radius:16px;padding:3px 12px;font-size:13px}.chip.on{border-color:var(--or);color:var(--or)}
.msg{display:flex;gap:10px;padding:10px 12px}.msg .ic{flex:0 0 18px;margin-top:3px}
.msg .hd{font-size:13px;color:var(--m);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.msg .hd b{color:var(--t);cursor:pointer}.msg .hd b:hover{color:var(--or)}
.msg.sum{padding:7px 12px;background:transparent;border-style:dashed}.msg.sum .hd{font-style:italic}
.badge{font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 5px}.badge.age{color:var(--gr);border-color:#2d6a3a}.badge.lc{color:#58a6ff;border-color:#24507f}
.body{white-space:pre-wrap;word-break:break-word;margin-top:2px}.body.clip{max-height:7.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent)}
.more{background:none;border:0;color:var(--or);padding:0;font-size:13px}
.acts{margin-left:auto;display:flex;gap:4px;opacity:.0;transition:opacity .15s}.msg:hover .acts,.msg:focus-within .acts{opacity:1}
.acts button{background:none;border:1px solid var(--line);border-radius:6px;font-size:12px;padding:1px 7px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--m)}.legend span{display:flex;gap:5px;align-items:center}
/* lists */
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}th{color:var(--m);font-weight:500;font-size:13px}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--m)}.drop:hover{border-color:var(--or)}
.bar{height:8px;background:#1a1c1e;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--or)}
.st{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}.ok{color:var(--gr)}.warn{color:var(--or)}.bad{color:var(--rd)}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--p2);border:1px solid var(--line);padding:8px 14px;border-radius:8px;display:none;z-index:50}
/* palette */
.pal{position:fixed;inset:0;background:#0009;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:40}
.pal .box{width:min(520px,92vw);background:var(--p);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pal input{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 14px;font-size:16px}
.pal .it{padding:9px 14px;display:flex;justify-content:space-between;cursor:pointer}.pal .it.hi{background:var(--p2);color:var(--or)}
/* login */
.gate{position:fixed;inset:0;background:var(--bg);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.gate .card{width:min(420px,100%);padding:22px}.tabs{display:flex;gap:6px;margin-bottom:14px}
label{display:block;margin:10px 0 4px;color:var(--m);font-size:13px}
.tabbar,.fab{display:none}
@media (max-width:1100px){.app{grid-template-columns:200px minmax(0,1fr)}aside.side{display:none}}
@media (max-width:720px){.app{display:block}aside.nav{display:none}main{padding:14px 12px 90px}
.tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--p);border-top:1px solid var(--line);z-index:30}
.tabbar a{flex:1;text-align:center;padding:8px 0 10px;font-size:11px;color:var(--m);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:2px}.tabbar a.on{color:var(--or)}
.fab{display:block;position:fixed;right:16px;bottom:72px;width:54px;height:54px;border-radius:50%;background:var(--or);color:#111;border:0;font-size:26px;box-shadow:0 4px 14px #0008;z-index:31}
.acts{opacity:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.gl{display:inline-block;width:14px;height:14px;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5' fill='%233fb950'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%233fb950' stroke-width='1.7'/%3E%3C/svg%3E") no-repeat center/contain}
[hidden]{display:none!important}