/* AEC Commons: Discord's flow and layering, in Moving Atoms colours */
:root{
  --rail:#050506; --side:#0d0e10; --main:#131416; --raise:#191a1d; --raise-2:#1f2124; --hover:#ffffff0a; --hover-2:#ffffff12;
  --line:#ffffff0f; --line-2:#ffffff1c;
  --fg:#f2f3f5; --fg-2:#c4c8ce; --muted:#8b9099; --dim:#5f646d;
  --accent:#2f8cff; --accent-2:#6cadff; --accent-bg:#2f8cff1f; --ok:#5fd39a; --warn:#f2c14e; --danger:#ff8a8a;
  --r:12px; --font:"General Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--rail);color:var(--fg);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
::selection{background:#2f8cff55}
*{scrollbar-width:thin;scrollbar-color:#ffffff1f transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
svg.i{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)} .sm{font-size:13px}
.app{display:grid;grid-template-columns:72px 260px 1fr;height:100vh;height:100dvh}

/* rail */
.rail{background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px}
.logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(140deg,#2f8cff,#6cadff);display:grid;place-items:center;font-weight:600;font-size:17px;color:#fff;margin-bottom:6px;transition:border-radius .2s var(--ease),transform .2s var(--ease);box-shadow:0 6px 24px #2f8cff33}
.logo:hover{border-radius:14px;transform:translateY(-1px)}
.rbtn{width:48px;height:48px;border-radius:24px;display:grid;place-items:center;color:var(--muted);background:var(--raise);position:relative;transition:border-radius .2s var(--ease),background .15s,color .15s}
.rbtn:hover,.rbtn.on{border-radius:16px;background:var(--accent);color:#fff}
.rbtn::before{content:"";position:absolute;left:-12px;width:4px;border-radius:0 4px 4px 0;background:var(--fg);height:0;transition:height .2s var(--ease)}
.rbtn:hover::before{height:20px}.rbtn.on::before{height:36px}
.rbtn .av{width:48px!important;height:48px!important;border-radius:inherit}
.rbtn .tip{position:absolute;left:62px;background:#000;border:1px solid var(--line-2);padding:6px 10px;border-radius:8px;font-size:13.5px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(-4px);transition:opacity .12s,transform .12s;z-index:40;color:var(--fg);box-shadow:0 8px 24px #000a}
.rbtn:hover .tip{opacity:1;transform:none}
.rail .sp{flex:1}

/* sidebar */
.side{background:var(--side);display:flex;flex-direction:column;min-height:0;border-radius:14px 0 0 0;margin-top:8px}
.side-h{padding:14px 16px 12px;border-bottom:1px solid var(--line);box-shadow:0 1px 0 #0004}
.side-h b{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em}
.side-h span{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}.side-h .sep{color:var(--dim)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #5fd39a22}
.qs{margin:12px 10px 4px;display:flex;align-items:center;gap:8px;background:var(--rail);border-radius:8px;padding:7px 10px;color:var(--muted);font-size:13.5px;transition:color .15s}
.qs:hover{color:var(--fg-2)}
.qs kbd{margin-left:auto;font:11px var(--font);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px}
.chs{overflow:auto;padding:4px 8px 16px;flex:1}
.sec{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);padding:16px 8px 4px}
.ch{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:1px 0;border-radius:6px;color:var(--muted);font-size:15px;transition:background .12s,color .12s}
.ch:hover{background:var(--hover);color:var(--fg-2)}
.ch.on{background:var(--hover-2);color:var(--fg)}
.ch .g{width:18px;text-align:center;color:var(--dim);font-size:16px;flex:none}
.ch .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .live,.live{margin-left:auto;font-size:11.5px;color:var(--ok);white-space:nowrap}
.me{background:#0a0b0c;padding:10px 10px;display:flex;align-items:center;gap:10px;font-size:13.5px}
.me-t{flex:1;min-width:0;line-height:1.3}.me-t a,.me-t{font-weight:500}
.me small{display:block;color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-a{font-size:12.5px;color:var(--muted);padding:4px 8px;border-radius:6px}.me-a:hover{background:var(--hover-2);color:var(--fg)}

/* main */
.main{background:var(--main);display:flex;flex-direction:column;min-width:0;min-height:0;margin-top:8px}
.top{height:52px;border-bottom:1px solid var(--line);box-shadow:0 1px 2px #0003;display:flex;align-items:center;gap:12px;padding:0 16px;flex:none;position:relative;z-index:2}
.top h1{font-size:16px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px;white-space:nowrap}
.top .glyph{color:var(--dim);font-size:20px;font-weight:400}
.top .desc{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--line-2);padding-left:12px}
.top .sp{flex:1}
.back{color:var(--muted);font-size:14px}.back:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:#fff;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:500;transition:background .15s,transform .1s;white-space:nowrap}
.btn:hover{background:#4a9bff}.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--raise-2);color:var(--fg)}.btn.ghost:hover{background:#2a2c30}
.btn.sm{padding:6px 12px;font-size:13px}
.btn[disabled]{opacity:.55;pointer-events:none}
.lnk{color:var(--muted);font-size:13px;padding:4px 6px;border-radius:6px}.lnk:hover{color:var(--fg);background:var(--hover)}
.body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 312px;min-height:0}
.body.one{grid-template-columns:minmax(0,1fr)}
.scroll{overflow:auto;min-height:0;scroll-behavior:smooth}
.feed{max-width:780px;margin:0 auto;padding:18px 20px 80px}.feed.wide{max-width:1060px}
.aside{background:var(--side);padding:16px 14px;overflow:auto;border-left:1px solid var(--line)}

/* feed */
.prompt{display:flex;align-items:center;gap:12px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--muted);margin-bottom:14px;transition:border-color .15s,background .15s}
.prompt:hover{border-color:var(--line-2);background:var(--raise-2)}
.prompt .chips{margin-left:auto;display:flex;gap:6px}
.chip{display:inline-flex;align-items:center;font-size:13px;border:1px solid var(--line-2);border-radius:999px;padding:4px 12px;color:var(--fg-2);white-space:nowrap;transition:background .12s,border-color .12s}
a.chip:hover{background:var(--hover)}
.chip.on{background:var(--fg);color:#000;border-color:var(--fg)}
.chip.xs{font-size:11.5px;padding:1px 8px}
.filters{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--raise);margin-bottom:10px;transition:border-color .15s,background .15s,transform .15s var(--ease)}
.card:hover{border-color:var(--line-2);background:#1b1c1f}
.card.pinned{border-color:#2f8cff44}
.vote{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--muted);font-size:13.5px;font-weight:600}
.vote.h{flex-direction:row;gap:2px;background:var(--raise-2);border-radius:999px;padding:2px}
.vb{width:30px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:background .12s,color .12s,transform .1s}
.vote.h .vb{border-radius:999px;height:26px}
.vb:hover{background:var(--hover-2);color:var(--fg)}
.vb:active{transform:scale(.88)}
.vote.up .n,.vote.up .vb[data-v="1"]{color:var(--accent-2)}
.vote.dn .n,.vote.dn .vb[data-v="-1"]{color:var(--danger)}
.vote .n{min-width:20px;text-align:center}
.meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.meta .sep{color:var(--dim)}
.meta .tp{color:var(--fg-2);font-weight:500}.meta .tp:hover{text-decoration:underline}
.who{color:var(--fg-2);font-weight:500}a.who:hover{text-decoration:underline}
.role{font-size:11px;border:1px solid var(--line-2);border-radius:5px;padding:0 6px;color:var(--muted);line-height:18px;white-space:nowrap}
.role.team{border-color:#2f8cff55;color:var(--accent-2);background:var(--accent-bg)}
.pin{font-size:11px;color:var(--accent-2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ttl{display:block;font-size:17px;font-weight:500;margin:5px 0 4px;line-height:1.35;letter-spacing:-.005em}
.ttl:hover{color:#fff}
.snip{color:var(--fg-2);font-size:14px;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.flair{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;border-radius:6px;padding:1px 8px;font-weight:500;line-height:19px}
.f-q{background:#2f8cff22;color:var(--accent-2)} .f-ok{background:#5fd39a22;color:var(--ok)}
.f-s{background:#b48cff22;color:#c9adff} .f-d{background:#ffffff12;color:var(--fg-2)} .f-j{background:#f2c14e22;color:var(--warn)} .f-x{background:#ff8a8a22;color:var(--danger)}
.thumb{width:132px;height:92px;border-radius:10px;border:1px solid var(--line);overflow:hidden;background:#0a0b0c;align-self:start}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)}
.card:hover .thumb img{transform:scale(1.03)}
.foot{display:flex;gap:14px;color:var(--muted);font-size:13px;align-items:center}
.foot a,.foot span{display:inline-flex;gap:5px;align-items:center}.foot a:hover{color:var(--fg)}
.okc{color:var(--ok);display:inline-flex;gap:4px;align-items:center;font-size:13px}
.jobline{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--fg-2);margin:2px 0 6px}.jobline b{color:var(--warn);font-weight:500}
.empty{text-align:center;padding:48px 20px;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted)}
.empty b{display:block;color:var(--fg);font-size:17px;font-weight:500;margin-bottom:4px}.empty p{margin:0 0 14px}

/* aside widgets */
.w{border-radius:var(--r);background:var(--raise);padding:12px 12px;margin-bottom:12px;border:1px solid var(--line)}
.w h3{margin:0 0 6px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);font-weight:600;padding:0 4px}
.w p{margin:4px 4px 8px;font-size:14px}
.w .row{display:flex;gap:10px;align-items:flex-start;padding:7px 6px;font-size:14px;border-radius:8px;transition:background .12s}
.w a.row:hover{background:var(--hover)}
.w .row .g{color:var(--dim);width:14px;text-align:center}
.w .row div{flex:1;min-width:0}
.w .row small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w .more{display:block;font-size:13px;color:var(--accent-2);padding:6px 6px 0}
.w.row2{display:flex;gap:10px;align-items:center}.w.row2 > div{flex:1;min-width:0}.w.row2 small{display:block;color:var(--muted);font-size:12.5px}
.guest{background:linear-gradient(160deg,#16243a,#121418 60%);border-color:#2f8cff33}

/* post */
.pv{max-width:800px;margin:0 auto;padding:22px 24px 90px}
.ptitle{font-size:26px;font-weight:500;margin:8px 0 14px;line-height:1.28;letter-spacing:-.015em}
.authorcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--raise);margin-bottom:16px}
.authorcard small{display:block;color:var(--muted);font-size:13px}
.stack{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.solvedbar{display:flex;gap:10px;align-items:flex-start;border:1px solid #5fd39a55;background:#5fd39a12;border-radius:var(--r);padding:12px 14px;margin:0 0 18px;color:var(--ok);transition:background .15s}
.solvedbar:hover{background:#5fd39a1c}
.solvedbar b{font-weight:600}.solvedbar div{color:var(--fg-2);font-size:14px}.solvedbar p{margin:4px 0 0;color:var(--fg-2)}
.jobbox{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px}
.jobbox > div{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--raise)}
.jobbox small{display:block;color:var(--muted);font-size:12px}.jobbox b{font-weight:500;font-size:14px}
.jobbox .apply{grid-column:1/-1;border:0;background:none;padding:0}
.prose{color:var(--fg-2);overflow-wrap:anywhere}
.prose.lg{font-size:15.5px;line-height:1.65}
.prose.sm{font-size:15px;line-height:1.45}
.prose p{margin:0 0 .75em}.prose.sm p{margin:0}
.prose h2,.prose h3,.prose h4{color:var(--fg);font-weight:500;margin:1.2em 0 .4em;line-height:1.3}
.prose a{color:var(--accent-2)}.prose a:hover{text-decoration:underline}
.prose a.mention{background:var(--accent-bg);border-radius:4px;padding:0 3px}
.prose code{background:#0008;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose pre{background:#0a0b0c;border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow:auto}
.prose pre code{background:none;border:0;padding:0}
.prose blockquote{margin:.6em 0;padding:4px 12px;border-left:3px solid var(--line-2);color:var(--muted)}
.prose img{max-width:100%;border-radius:10px;border:1px solid var(--line);display:block;margin:8px 0;cursor:zoom-in}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 .75em}.prose li{margin:.2em 0}
.pacts{display:flex;align-items:center;gap:8px;margin:14px 0 6px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.rh{font-size:15px;font-weight:600;margin:22px 0 12px}
.reply{border:1px solid var(--line-2);border-radius:var(--r);background:var(--raise);padding:10px;margin-bottom:12px;transition:border-color .15s}
.reply:focus-within{border-color:#2f8cff88}
.reply textarea,.composer textarea{width:100%;background:transparent;border:0;outline:0;resize:vertical;color:var(--fg);font-size:15px;line-height:1.5;min-height:60px}
.reply.guest{display:flex;align-items:center;justify-content:space-between;color:var(--muted);cursor:pointer;padding:14px}
.rrow{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:6px}
.hint{font-size:12.5px;color:var(--dim)}
.comments{margin-top:4px}
.cmt{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 0;border-radius:10px;scroll-margin-top:80px}
.cmt.accepted > .cm{border-left:3px solid var(--ok);padding-left:12px;margin-left:-15px}
.cmt:target > .cm{animation:flash 1.6s var(--ease)}
@keyframes flash{0%{background:#2f8cff22}100%{background:transparent}}
.cm .prose{margin:4px 0 2px}
.cacts{display:flex;align-items:center;gap:4px;margin-top:2px}
.kids{border-left:2px solid var(--line-2);margin:6px 0 0 -26px;padding-left:22px}
.kids .cmt{padding:8px 0}
.replybox form{margin-top:8px}
.related{margin-top:30px;border-top:1px solid var(--line);padding-top:14px}
.related h3{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px;font-weight:600}
.related a{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;font-size:14.5px;color:var(--fg-2)}
.related a:hover{background:var(--hover);color:var(--fg)}
.related a span:nth-child(2){flex:1}.related small{color:var(--muted)}.related .g{color:var(--dim);width:16px;text-align:center}

/* chat */
.chat{display:flex;flex-direction:column;min-height:0;height:100%}
.chat-wrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;min-height:0;height:100%}
.members{background:var(--side);border-left:1px solid var(--line);padding:16px 8px;overflow:auto}
.members h3{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);font-weight:600;margin:0 8px 8px}
.members a{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:6px;font-size:14.5px;color:var(--fg-2)}
.members a:hover{background:var(--hover);color:var(--fg)}
.members .av{position:relative}
.members .av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--ok);border:3px solid var(--side)}
.members small{display:block;color:var(--muted);font-size:12px;line-height:1.2}
.members .gst{color:var(--muted);font-size:13px;padding:6px 8px}
.msgs{flex:1;overflow:auto;padding:16px 0 10px;display:flex;flex-direction:column}
.msgs > :first-child{margin-top:auto}
.room-intro{padding:8px 18px 18px}
.room-intro b{font-size:26px;font-weight:600;display:block;letter-spacing:-.01em}
.room-intro p{color:var(--muted);margin:4px 0 0}
.day{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px;font-weight:600;margin:14px 18px 6px}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--line-2)}
.m{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:3px 18px 3px 16px;position:relative;margin-top:14px;transition:background .08s}
.m.cont{margin-top:0;padding-top:1px;padding-bottom:1px}
.m:hover{background:#00000026}
.m .mt{font-size:10.5px;color:var(--dim);text-align:right;padding-top:4px;opacity:0}
.m:hover .mt{opacity:1}
.mh{display:flex;align-items:baseline;gap:8px;font-size:15px}
.mh time{color:var(--dim);font-size:12px}
.m.pending{opacity:.55}
.m.hiddenmsg{display:none}
.macts{position:absolute;right:16px;top:-14px;display:none;background:var(--raise-2);border:1px solid var(--line-2);border-radius:8px;padding:2px;box-shadow:0 4px 12px #0006}
.m:hover .macts{display:flex}
.macts button{padding:5px 7px;border-radius:6px;color:var(--muted)}.macts button:hover{background:var(--hover-2);color:var(--fg)}
.typing{font-size:12.5px;color:var(--muted);padding:0 18px 4px;height:20px}
.comp{margin:0 16px 18px;border-radius:10px;background:var(--raise-2);display:flex;align-items:flex-end;gap:10px;padding:8px 8px 8px 14px}
.comp textarea{flex:1;background:transparent;border:0;outline:0;resize:none;max-height:180px;padding:5px 0;font-size:15px;line-height:1.45;color:var(--fg)}
.comp.guest{align-items:center;color:var(--muted);cursor:pointer;padding:12px 14px}
.comp .sp{flex:1}
.pill-live{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-2);background:var(--raise-2);border-radius:999px;padding:4px 10px}

/* forms */
.composer{max-width:760px;margin:0 auto;padding:20px 20px 80px;display:flex;flex-direction:column;gap:14px}
.fl{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
.fl input,.fl select,.searchbar input,.searchbar select,.sheet input{background:var(--rail);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;color:var(--fg);font-size:15px;outline:0;transition:border-color .15s}
.fl input:focus,.fl select:focus,.searchbar input:focus,.sheet input:focus{border-color:var(--accent)}
.fl textarea{background:var(--rail);border:1px solid var(--line-2);border-radius:0 0 9px 9px;padding:12px;color:var(--fg);outline:0}
.fl textarea:focus{border-color:var(--accent)}
.tb{display:flex;gap:2px;background:var(--raise);border:1px solid var(--line-2);border-bottom:0;border-radius:9px 9px 0 0;padding:4px}
.tb button{padding:4px 9px;border-radius:6px;color:var(--fg-2);font-size:13px;display:inline-flex;gap:5px;align-items:center}
.tb button:hover{background:var(--hover-2)}.tb .sp{flex:1}
.preview{border:1px solid var(--line-2);border-radius:0 0 9px 9px;padding:12px;min-height:120px;background:var(--rail)}
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.type input{position:absolute;opacity:0}
.type span{display:block;height:100%;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.type b{display:block;font-weight:500;font-size:14.5px;color:var(--fg)}
.type small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}
.type input:checked + span{border-color:var(--accent);background:var(--accent-bg)}
.type input:focus-visible + span{outline:2px solid var(--accent)}
.jobf{display:none;border:1px solid var(--line-2);border-radius:10px;padding:12px;grid-template-columns:1fr 1fr;gap:10px}
.jobf legend{font-size:13px;color:var(--muted);padding:0 6px}
.composer.job .jobf{display:grid}
.ck{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--fg-2)}
.dupes:empty{display:none}
.dupes{border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;background:var(--raise)}
.dupes b{font-size:12.5px;color:var(--muted);font-weight:500}
.dupes a{display:block;font-size:14px;padding:3px 0;color:var(--fg-2)}.dupes a:hover{color:var(--accent-2)}
.toolpick{display:flex;flex-wrap:wrap;gap:6px}
.tchip input{position:absolute;opacity:0}
.tchip span{display:inline-block;font-size:13px;border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;color:var(--fg-2);cursor:pointer;transition:all .12s;font-weight:400}
.tchip input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.tchip input:focus-visible + span{outline:2px solid var(--accent)}
.searchbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.searchbar input{flex:1;min-width:200px}

/* people */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pc{border:1px solid var(--line);border-radius:14px;background:var(--raise);padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;transition:border-color .15s,transform .15s var(--ease)}
.pc:hover{border-color:var(--line-2);transform:translateY(-2px)}
.pc .av{margin-bottom:8px}
.pc b{font-weight:500}.pc small{display:block;color:var(--muted);font-size:13px}
.tag{display:inline-block;margin-top:8px;font-size:12px;color:var(--ok);border:1px solid #5fd39a44;border-radius:6px;padding:0 7px}
.profile{display:flex;gap:18px;align-items:flex-start;padding:8px 0 10px}
.profile h2{margin:0;font-size:24px;font-weight:500;display:flex;gap:10px;align-items:center}
.profile p{margin:4px 0}
.stats{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin:12px 0 6px}.stats b{color:var(--fg)}
.jobcard{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--raise);padding:14px 16px;margin-bottom:10px;transition:border-color .15s}
.jobcard:hover{border-color:var(--line-2)}
.jc1{display:flex;gap:10px;align-items:center;justify-content:space-between}.jc1 b{font-weight:500;font-size:16px}
.jc2{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;color:var(--fg-2);margin-top:6px}.jc2 .pay{color:var(--warn);font-weight:500}

/* avatar */
.av{display:inline-grid;place-items:center;border-radius:50%;font-weight:600;flex:none;letter-spacing:.02em}

/* overlays */
.scrim{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:60;opacity:0;pointer-events:none;transition:opacity .16s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{width:min(440px,92vw);background:var(--raise);border:1px solid var(--line-2);border-radius:16px;padding:24px;box-shadow:0 30px 80px #000;transform:scale(.96);transition:transform .2s var(--ease);max-height:90vh;overflow:auto}
.scrim.on .sheet,.scrim.on .palette{transform:none}
.sheet h3{margin:0 0 4px;font-weight:600;font-size:20px;letter-spacing:-.01em}
.sheet p{margin:0 0 16px;color:var(--muted);font-size:14px}
.sheet input{width:100%;margin-bottom:10px}
.sheet .code{font-size:26px;letter-spacing:10px;text-align:center;font-weight:600}
.sheet .err{color:var(--danger);font-size:13.5px;min-height:18px;margin:0 0 6px}
.sheet .btn{width:100%;padding:11px}
.sheet .small{font-size:12.5px;color:var(--dim);margin-top:12px}
.sheet .composer{padding:0;gap:12px}
.palette{width:min(580px,94vw);background:var(--raise);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px #000;transform:scale(.97);transition:transform .18s var(--ease);align-self:flex-start;margin-top:12vh}
.palette input{width:100%;padding:16px 18px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);font-size:17px;outline:0}
.palette .res{max-height:52vh;overflow:auto;padding:6px}
.palette .it{padding:9px 12px;display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--fg-2);border-radius:8px;cursor:pointer}
.palette .it.sel{background:var(--accent);color:#fff}
.palette .it small{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}.palette .it.sel small{color:#ffffffcc}
.palette .it .k{font-size:11px;border:1px solid var(--line-2);border-radius:5px;padding:0 6px;color:var(--muted);flex:none}.palette .it.sel .k{color:#fff;border-color:#ffffff66}
.palette .it span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette .foot2{padding:8px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.lightbox{position:fixed;inset:0;background:#000e;z-index:70;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox img{max-width:94vw;max-height:92vh;border-radius:8px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#000;border:1px solid var(--line-2);color:var(--fg);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:all .2s var(--ease);z-index:80;box-shadow:0 10px 30px #000a}
#toast.on{opacity:1;transform:translateX(-50%)}
#bar{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:90;width:0;opacity:0;transition:width .3s var(--ease),opacity .3s}
.main.swap{animation:fadein .18s var(--ease)}
@keyframes fadein{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}

.joinbar{display:none}
/* mobile */
.tabbar{display:none}
@media (max-width:1180px){.body{grid-template-columns:minmax(0,1fr)}.body > .aside{display:none}.chat-wrap{grid-template-columns:minmax(0,1fr)}.members{display:none}}
@media (max-width:820px){
  .app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .rail{display:none}
  .side{display:none;margin:0;border-radius:0}
  .main{margin:0}
  .app.drawer .side{display:flex;position:fixed;inset:0 16% 0 0;z-index:50;box-shadow:20px 0 60px #000;animation:slidein .2s var(--ease)}
  .app.drawer::after{content:"";position:fixed;inset:0;background:#0009;z-index:45}
  @keyframes slidein{from{transform:translateX(-30px);opacity:.5}to{transform:none;opacity:1}}
  .top{padding:0 12px;height:50px}.top .desc{display:none}
  .top .btn span{display:none}.top .btn{padding:8px 10px}
  .feed{padding:12px 10px 40px}
  .card{grid-template-columns:36px minmax(0,1fr);padding:12px 12px 10px}
  .card .thumb{grid-column:2;width:100%;height:160px}
  .ttl{font-size:16.5px}
  .prompt .chips{display:none}
  .card .meta .role{display:none}
  .joinbar{display:flex;align-items:center;gap:12px;background:linear-gradient(160deg,#16243a,#121418 70%);border:1px solid #2f8cff33;border-radius:12px;padding:12px 14px;margin-bottom:12px}
  .joinbar div{flex:1}.joinbar b{display:block;font-weight:500}.joinbar span{font-size:13px;color:var(--muted)}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-10px}
  .types{grid-template-columns:1fr 1fr}
  .jobbox{grid-template-columns:1fr 1fr}
  .jobf{grid-template-columns:1fr}
  .pv{padding:16px 14px 60px}.ptitle{font-size:22px}
  .m{padding-left:10px;padding-right:10px;grid-template-columns:40px minmax(0,1fr)}
  .comp{margin:0 8px 8px}
  .tabbar{display:flex;background:var(--rail);justify-content:space-around;align-items:center;padding:6px 0 calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .tabbar > *{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--muted);gap:2px;min-width:56px}
  .tabbar .on{color:var(--fg)}
  .profile{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}