/* Lumo — "minimal citron": white, black outlines, lime accents */
:root{
  --bg:#FAFAFA; --card:#FFFFFF; --soft:#F0F0F0; --line:#111111; --hair:#E4E4E4;
  --ink:#111111; --muted:#6B6B6B; --lime:#C8F031; --lime-soft:#EEFBC2;
  --danger:#E5484D; --ok:#2F8F2F; --r:16px;
  --inv:#111111; --inv-fg:#FFFFFF; --inv-acc:#C8F031; --inv-hover:#2A2A2A;
  --text2:#333333; --top-bg:rgba(250,250,250,.9); --shadow-c:#111111; --on-lime:#111111;
  color-scheme:light;
}
/* dark theme: chosen in settings, or automatic when the phone/PC is in dark mode */
:root[data-theme="dark"]{
  --bg:#0E0E0E; --card:#171717; --soft:#222222; --line:#3A3A3A; --hair:#2A2A2A;
  --ink:#F2F2F2; --muted:#9A9A9A; --lime-soft:#262E0C;
  --inv:#C8F031; --inv-fg:#111111; --inv-acc:#111111; --inv-hover:#D6F65E;
  --text2:#CFCFCF; --top-bg:rgba(14,14,14,.9); --shadow-c:#000000;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0E0E; --card:#171717; --soft:#222222; --line:#3A3A3A; --hair:#2A2A2A;
    --ink:#F2F2F2; --muted:#9A9A9A; --lime-soft:#262E0C;
    --inv:#C8F031; --inv-fg:#111111; --inv-acc:#111111; --inv-hover:#D6F65E;
    --text2:#CFCFCF; --top-bg:rgba(14,14,14,.9); --shadow-c:#000000;
    color-scheme:dark;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}
/* plain text links (in posts, bios, rules…) get a lime underline; styled links (buttons, cards) don't */
a:not([class]){text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:2px}
a:not([class]):hover{background:var(--lime-soft)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
h1,h2,h3,.brand{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em}

/* ---------- top bar + dock ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;height:66px;padding:0 clamp(16px,4vw,48px);background:var(--top-bg);backdrop-filter:blur(12px);border-bottom:1.5px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:1.55rem}
.brand img{width:36px;height:36px;border-radius:10px}
.top-right{display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:var(--lime);border:1.5px solid var(--line);color:var(--on-lime);font-weight:700;font-size:.85rem}

.dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:4px;padding:7px;border-radius:999px;background:#111111;border:1.5px solid #333;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.dock a,.dock button{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#9A9A9A;transition:background .15s,color .15s}
.dock a:hover,.dock button:hover{color:#fff}
.dock .on{color:#111;background:var(--lime)}
.dock svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dock .plus{width:56px;height:56px;background:var(--lime);color:#111;margin:0 6px}
.dock .plus:hover{color:#111;transform:rotate(90deg);transition:transform .2s}
.dock .plus svg{width:27px;height:27px;stroke-width:2.8}
.dot-count{position:absolute;top:5px;right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--lime);color:#111;font-size:.68rem;font-weight:800;display:grid;place-items:center;border:2px solid #111}
@media(max-width:420px){.dock{bottom:12px;gap:2px}.dock a,.dock button{width:46px;height:46px}.dock .plus{width:52px;height:52px}}

/* ---------- pages ---------- */
.main{padding:20px clamp(12px,4vw,48px) 120px}
.page{max-width:680px;margin:0 auto}
.page-head{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.page-head h1{font-size:1.8rem;font-weight:700}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1.5px solid var(--line);flex:none;color:var(--ink)}
.icon-btn:hover{background:var(--lime);color:#111}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.switch{display:inline-flex;gap:0;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.switch button{padding:8px 18px;font-weight:700;color:var(--ink)}
.switch button.on{background:var(--inv);color:var(--inv-acc)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:999px;font-weight:700;border:1.5px solid var(--line);transition:transform .12s,background .12s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default}
.btn-main{background:var(--inv);color:var(--inv-fg);border-color:var(--inv)}
.btn-main:hover{background:var(--inv-hover)}
.btn-grad{background:var(--lime);color:var(--on-lime)}
.btn-grad:hover{background:#D6F65E}
.btn-ghost{background:var(--card);color:var(--ink)}
.btn-ghost:hover{background:var(--lime-soft)}
.btn-danger{background:var(--card);color:var(--danger);border-color:var(--danger)}
.btn-sm{padding:6px 14px;font-size:.85rem}

input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{width:100%;background:var(--card);border:1.5px solid var(--line);color:var(--ink);padding:12px 16px;border-radius:12px;font:inherit;outline:none}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px var(--lime)}
textarea{resize:vertical;min-height:90px}
label.lbl{display:block;font-size:.85rem;color:var(--muted);font-weight:700;margin:16px 0 6px}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.92rem;margin-top:12px}
.check input{margin-top:3px;accent-color:var(--ink);width:17px;height:17px;flex:none}
.hint{color:var(--muted);font-size:.85rem;margin-top:6px}
.err{color:var(--danger);font-size:.9rem;margin-top:10px;font-weight:600}
.ok{color:var(--ok);font-size:.9rem;margin-top:10px;font-weight:600}
.empty{padding:50px 24px;text-align:center;color:var(--muted);font-weight:600}
.box{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px}
.box h2{font-size:1.2rem;font-weight:700;margin-bottom:6px}
.prose p,.prose li{color:var(--text2)}
.prose h3{margin:18px 0 6px;font-size:1.1rem}
.prose ol,.prose ul{margin:10px 0 10px 22px;display:grid;gap:6px}
.prose p{margin:10px 0}

.avatar{flex:none;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-weight:800;background:var(--soft);border:1.5px solid var(--line)}
.verified{display:inline-block;width:17px;height:17px;vertical-align:-3px;margin-left:3px}
.name{font-weight:800;color:var(--ink)}
.handle{color:var(--muted);font-size:.88rem}
.loading{display:flex;justify-content:center;padding:40px}
.spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--hair);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- mosaic ---------- */
.mosaic{display:flex;gap:16px;align-items:flex-start;max-width:1400px;margin:0 auto}
.mcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
@media(max-width:640px){.mosaic,.mcol{gap:10px}}
.cp{display:block;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s}
.cp:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow-c)}
.cp .photo{border-bottom:1.5px solid var(--line)}
.cp .photo img{width:100%;height:auto}
.cp .text{padding:14px 16px 2px;white-space:pre-wrap;word-wrap:break-word;font-size:1rem;font-weight:500}
.cp.textonly .text{font-family:"Space Grotesk",Inter,sans-serif;font-weight:500;font-size:1.3rem;line-height:1.3;padding:20px 18px 8px}
@media(max-width:640px){.cp{border-radius:14px}.cp.textonly .text{font-size:1.05rem;padding:14px 12px 6px}.cp .text{padding:10px 12px 2px;font-size:.93rem}}
.cp.t0{background:var(--lime);color:#111}
.cp.t0 .who{color:#111}
.cp .foot{display:flex;align-items:center;gap:8px;padding:10px 12px 12px}
.cp .who{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:var(--ink)}
.cp .who b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp .who small{display:block;color:var(--muted);font-size:.74rem;font-weight:600}
.cp.t0 .who small,.cp.t0 .act{color:#3D4A10}
.acts{display:flex;align-items:center;gap:2px}
.act{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;color:var(--muted);font-weight:700;font-size:.84rem;border:1.5px solid transparent}
.act svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.act:hover{color:var(--ink);border-color:var(--line)}
.act.glow.on{background:var(--inv);color:var(--inv-acc);border-color:var(--inv)}
.act.glow.on svg{fill:var(--inv-acc)}
.act.pop svg{animation:pop .45s ease}
@keyframes pop{30%{transform:scale(1.5) rotate(25deg)}60%{transform:scale(.9)}}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;bottom:38px;z-index:15;min-width:210px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--shadow-c);overflow:hidden;cursor:default}
.menu.down{bottom:auto;top:46px}
.menu button{display:block;width:100%;text-align:left;padding:11px 16px;font-weight:700}
.menu button:hover{background:var(--lime-soft)}
.menu button.danger{color:var(--danger)}

/* single post */
.cp.big{cursor:default;margin:0 auto 16px;max-width:680px}
.cp.big:hover{transform:none;box-shadow:none}
.cp.big .text{font-size:1.15rem;padding:18px 20px 6px}
.cp.big.textonly .text{font-size:1.7rem;padding:30px 24px 14px}
.comment{display:flex;gap:10px;padding:14px 0;border-top:1.5px solid var(--hair)}
.comment:first-child{border-top:0}
.comment .body{flex:1;min-width:0}
.comment .text{white-space:pre-wrap;word-wrap:break-word}
.comment .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* suggestions row */
.suggest{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 16px;margin:0 auto 4px;max-width:1400px;scrollbar-width:none}
.suggest::-webkit-scrollbar{display:none}
.sg{flex:none;width:150px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 12px;text-align:center;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px}
.sg b{font-size:.9rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg small{color:var(--muted);font-size:.78rem;margin-top:-6px}
.feed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1400px;margin:0 auto 16px}
.feed-bar h1{font-size:1.9rem;font-weight:700}

/* composer sheet */
.sheet-bg{position:fixed;inset:0;z-index:50;background:rgba(17,17,17,.4);display:flex;align-items:flex-end;justify-content:center;padding:16px}
@media(min-width:640px){.sheet-bg{align-items:center}}
.sheet{width:100%;max-width:560px;background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:20px;box-shadow:6px 6px 0 var(--shadow-c);animation:up .22s ease}
@keyframes up{from{transform:translateY(24px);opacity:0}}
.sheet .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet textarea{font-size:1.15rem;min-height:120px;margin:14px 0 10px;resize:none}
.sheet .count{font-size:.85rem;color:var(--muted);font-weight:700}
.sheet .count.warn{color:var(--danger)}
.preview{position:relative;margin:0 0 12px;border-radius:14px;overflow:hidden;border:1.5px solid var(--line)}
.preview img{width:100%;max-height:340px;object-fit:cover}
.preview button{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:var(--inv);color:var(--inv-fg)}

/* ---------- profile ---------- */
.pf{max-width:900px;margin:0 auto 22px;background:var(--card);border:1.5px solid var(--line);border-radius:22px;overflow:hidden}
.pf .banner{height:180px;background:var(--lime);background-size:cover;background-position:center;border-bottom:1.5px solid var(--line)}
@media(max-width:640px){.pf .banner{height:110px}}
.pf .in{padding:0 24px 22px;text-align:center}
.pf .in .avatar{margin:-60px auto 0;border:3px solid var(--line)}
.pf h2{font-size:1.7rem;font-weight:700;margin-top:8px}
.pf h2 .verified{width:22px;height:22px;vertical-align:-2px}
.pf .bio{max-width:520px;margin:10px auto;white-space:pre-wrap;word-wrap:break-word;color:var(--text2)}
.pf .stats{display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;margin:14px 0}
.pf .stat{flex:1;max-width:140px;min-width:0;padding:10px 8px;border-radius:14px;border:1.5px solid var(--line);color:var(--ink)}
.pf a.stat:hover{background:var(--lime);color:#111}
.pf .stat b{display:block;font-size:1.2rem;font-family:"Space Grotesk",sans-serif}
.pf .stat span{font-size:.78rem;color:var(--muted);font-weight:700}
.pf .btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.pill{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:999px;background:var(--lime);color:var(--on-lime);border:1.5px solid var(--line)}
.pill.red{background:#FDE3E4;color:var(--danger);border-color:var(--danger)}
.center{text-align:center;margin:0 auto 18px}

/* ---------- lists ---------- */
.row-user{display:flex;align-items:center;gap:12px;padding:10px 8px;color:var(--ink);border-radius:12px}
.row-user:hover{background:var(--lime-soft)}
.row-user .who{flex:1;min-width:0;line-height:1.3}
.row-user .who small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif{display:flex;gap:12px;padding:12px 10px;border-radius:14px;color:var(--ink);align-items:center}
.notif:hover{background:var(--soft)}
.notif.unread{background:var(--lime-soft)}
.notif .ic{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--line)}
.notif .ic svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.notif .txt{flex:1;min-width:0}
.notif .txt small{display:block;color:var(--muted);font-weight:600}

/* ---------- auth ---------- */
.auth{max-width:440px;margin:10px auto 0}
.auth .logo{width:68px;height:68px;border-radius:18px;margin-bottom:16px;border:1.5px solid var(--line)}
.auth h1{font-size:2.1rem;font-weight:700}
.auth .lead{color:var(--muted);margin:2px 0 20px;font-weight:600}
.seg{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:6px}
.seg button{flex:1;padding:10px;font-weight:700}
.seg button.on{background:var(--inv);color:var(--inv-acc)}

/* ---------- settings / admin ---------- */
.img-edit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.banner-prev{width:100%;height:110px;border-radius:14px;border:1.5px solid var(--line);background:var(--lime);background-size:cover;background-position:center;margin-bottom:10px}
.lang-pick{display:flex;gap:8px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px}
.kpi b{display:block;font-size:1.7rem;font-family:"Space Grotesk",sans-serif}
.kpi span{color:var(--muted);font-size:.82rem;font-weight:700}

/* ---------- toast + lightbox ---------- */
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:70;background:var(--inv);color:var(--inv-acc);font-weight:700;padding:12px 22px;border-radius:999px;transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.92);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:14px}
.footer-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.85rem;font-weight:600;margin-top:30px}
.footer-links a{color:var(--muted)}

@media(max-width:640px){.cp .foot{flex-wrap:wrap;gap:4px;padding:8px 10px 10px}.cp .who{flex-basis:100%}.acts{margin-left:-6px}.act{padding:4px 6px}}

.notif.announce .ic svg{stroke:var(--lime)}
.notif .msg{display:block;color:var(--ink);font-weight:500;margin-top:2px;white-space:pre-wrap;word-wrap:break-word}

/* ---------- messages ---------- */
.conv{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:14px;color:var(--ink)}
.conv:hover{background:var(--soft)}
.conv .txt{flex:1;min-width:0;line-height:1.35}
.conv .txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .txt small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv.unread .txt small{color:var(--ink);font-weight:700}
.conv .side{text-align:right;font-size:.78rem;color:var(--muted);display:grid;gap:4px;justify-items:end}
.conv .badge-n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--lime);color:#111;font-weight:800;font-size:.72rem;display:grid;place-items:center}
.group-av{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--inv);color:var(--inv-acc);font-weight:800;border:1.5px solid var(--line)}
.chat{display:flex;flex-direction:column;height:calc(100dvh - 66px - 40px - 96px);min-height:360px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1.5px solid var(--line)}
.chat-head .t{flex:1;min-width:0;line-height:1.25}
.chat-head .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .t small{color:var(--muted)}
.chat-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:6px}
.bubble-row{display:flex;gap:8px;align-items:flex-end;max-width:80%}
.bubble-row.me{align-self:flex-end;flex-direction:row-reverse}
.bubble{padding:9px 14px;border-radius:18px;border:1.5px solid var(--line);background:var(--card);white-space:pre-wrap;word-wrap:break-word;position:relative}
.bubble-row.me .bubble{background:var(--lime);color:#111;border-color:var(--lime);border-bottom-right-radius:6px}
.bubble-row:not(.me) .bubble{border-bottom-left-radius:6px}
.bubble .from{display:block;font-size:.75rem;font-weight:800;color:var(--muted);margin-bottom:2px}
.bubble .time{display:block;font-size:.7rem;opacity:.6;margin-top:3px}
.bubble-row .mact{opacity:0;font-size:.75rem;color:var(--muted);padding:2px 6px;border-radius:8px;border:1px solid var(--line)}
.bubble-row:hover .mact{opacity:1}
.day-sep{align-self:center;font-size:.75rem;color:var(--muted);font-weight:700;margin:8px 0}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1.5px solid var(--line)}
.chat-input textarea{min-height:44px;max-height:140px;resize:none;padding:10px 14px}
.picker{max-height:260px;overflow-y:auto;margin-top:10px}
.picker .row-user{cursor:pointer}
.picker .row-user.sel{background:var(--lime-soft)}
.picker .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;font-size:.8rem;font-weight:900}
.picker .sel .tick{background:var(--lime);color:#111;border-color:var(--lime)}
.opt-group{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}