@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Oswald:wght@500;700&display=swap');
:root{--card:rgba(255,255,255,.18);--line:rgba(255,255,255,.38);--gold:#ffffff;--text:#fff;--muted:rgba(255,255,255,.86);--err:#ffd0d0;}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;color:var(--text);font:16px/1.55 Manrope,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column;background-color:#2aa4ff;background-image:url('/bg.png');background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;image-rendering:auto}
a{color:#fff;text-decoration:none;text-shadow:0 1px 8px rgba(0,40,90,.35)}
code{background:rgba(255,255,255,.18);padding:.1rem .35rem;border-radius:4px}
.top{display:flex;justify-content:space-between;align-items:center;padding:1rem 7vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(42,164,255,.42);backdrop-filter:blur(16px) saturate(140%);z-index:2}
.logo{font-family:Oswald,sans-serif;font-size:1.35rem;letter-spacing:.08em;color:#fff;text-shadow:0 2px 16px rgba(255,255,255,.45)} .logo small{display:block;color:#eaf7ff;font-size:.65rem;letter-spacing:.3em}
nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
main{width:min(980px,92vw);margin:2rem auto;flex:1}
footer{padding:2rem 7vw;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);text-shadow:0 1px 8px rgba(0,60,120,.35)}
.hero h1,.head h1,h1{font-family:Oswald,sans-serif;font-size:clamp(2rem,6vw,3.6rem);margin:.2rem 0;letter-spacing:.04em;text-shadow:0 2px 24px rgba(255,255,255,.35)}
.kicker{color:#fff;letter-spacing:.28em;text-transform:uppercase;font-size:.72rem;margin:0;text-shadow:0 1px 10px rgba(0,50,120,.4)}
.lead{font-size:1.15rem;max-width:40rem;color:#f4fbff}
.row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1.4rem}
.ip{background:var(--card);border:1px solid var(--line);padding:.7rem 1rem;border-radius:14px;backdrop-filter:blur(12px)}
.ip span{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.ip code{font-size:1.1rem;background:none;padding:0}
.btn{display:inline-block;border:0;cursor:pointer;padding:.7rem 1.1rem;border-radius:12px;font-weight:800;font-family:inherit}
.btn.gold{background:#fff;color:#1378e6;box-shadow:0 8px 24px rgba(0,80,160,.18)}.btn.ghost{background:transparent;color:#fff;border:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.card,.cat,.topic,.post,.online{background:var(--card);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(14px) saturate(130%);box-shadow:0 10px 30px rgba(0,70,150,.12)}
.card{padding:1.2rem 1.3rem;margin:1rem 0}
.card.slim{max-width:420px;margin:2rem auto}
.cats,.list{display:flex;flex-direction:column;gap:.7rem}
.group-h{margin:1.4rem 0 .4rem;font-family:Oswald,sans-serif;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:#fff;text-shadow:0 1px 10px rgba(0,50,120,.35)}
.cat,.topic{display:flex;gap:1rem;align-items:center;padding:1rem 1.1rem;color:inherit}
.cat:hover,.topic:hover{border-color:#fff;background:rgba(255,255,255,.26)}
.ico{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;font-size:1.2rem}
.stat{margin-left:auto;text-align:center;color:#fff;font-weight:800}.stat span{display:block;color:var(--muted);font-size:.7rem;font-weight:400}
.last,.muted{color:var(--muted);font-size:.9rem;margin:.2rem 0 0}
.head{display:flex;justify-content:space-between;gap:1rem;align-items:end;flex-wrap:wrap;margin-bottom:1rem}
.crumb{color:var(--muted)}
.topic.pin{border-color:#fff}
.post{padding:1rem 1.2rem;margin:.8rem 0}
.post.op{border-color:#fff}
.post header{display:flex;gap:.6rem;align-items:center;margin-bottom:.6rem}
.role{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.body{white-space:pre-wrap;word-break:break-word}
label{display:block;margin:.8rem 0;color:var(--muted);font-size:.85rem}
input,textarea{width:100%;margin-top:.3rem;background:rgba(255,255,255,.2);border:1px solid var(--line);color:#fff;border-radius:12px;padding:.7rem;font:inherit}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.7)}
.err{color:var(--err)}.mod{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.who{color:var(--muted);font-size:.9rem}
ol{margin:.4rem 0 0;padding-left:1.2rem}
.post-actions{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.btn.tiny{padding:.35rem .7rem;font-size:.8rem}
.nick{font-weight:800;text-shadow:0 0 10px currentColor,0 1px 2px rgba(0,40,90,.35)}
.nick.rainbow{background:linear-gradient(90deg,#ff5c5c,#ffe566,#3ddc84,#4aa3ff,#b794f6,#ff6bcb,#ff5c5c);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:flow 2.4s linear infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
@keyframes flow{to{background-position:220% center}}
.online{padding:1.1rem 1.2rem;margin:1.6rem 0}
.online h3{margin:0 0 .8rem;font-family:Oswald,sans-serif;letter-spacing:.06em}
.on-col{margin:.6rem 0}.on-h{margin:0 0 .3rem;color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.on-nicks{line-height:1.8}.sep{color:var(--muted)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;margin:1rem 0}
.swatch{display:flex;gap:.5rem;align-items:center;background:rgba(255,255,255,.16);border:1px solid var(--line);border-radius:12px;padding:.6rem;cursor:pointer}
.swatch.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.swatch input{width:auto;margin:0}
.swatch i{color:var(--muted);font-style:normal;font-size:.75rem}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 8px currentColor}
.rainbow-dot{background:linear-gradient(90deg,#ff5c5c,#ffe566,#3ddc84,#4aa3ff,#b794f6,#ff6bcb);background-size:200% auto;animation:flow 2s linear infinite}