:root {
  --bg: #0b0912; --panel: rgba(26, 19, 40, .62); --side: rgba(19, 14, 30, .7); --line: rgba(255, 255, 255, .08);
  --text: #ece6f7; --mute: #9a91ae; --blue: #c084fc; --blue-d: #8b5cf6;
  --pink: #ff6bb5; --sky: #6ea8ff; --mint: #5eead4; --grad: linear-gradient(135deg, #ff6bb5, #a855f7 50%, #6366f1); --err: #ff7a8a; --ok: #74e0a8;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--text);
  background: var(--bg);
  font: 14px/1.6 Inter, system-ui, "Segoe UI", sans-serif;
}
a { color: var(--blue); text-decoration: none } a:hover { text-decoration: underline }
.wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 16px }

header { position: sticky; top: 0; z-index: 5; background: rgba(11, 9, 18, .6); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }
.nav { display: flex; align-items: center; gap: 32px; min-height: 54px }
.logo { color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.02em }
.logo span { color: var(--blue) } .logo:hover { text-decoration: none }
.logo { display: flex; align-items: center; gap: 8px } .logo .lw { color: #fff } .logo img { border-radius: 8px; box-shadow: 0 0 14px rgba(160, 110, 255, .45) }
.links { display: flex; align-items: center; gap: 20px }
.links a { color: var(--mute) } .links a:hover, .links a.on { color: var(--blue); text-decoration: none }
#user { margin-left: auto } #user b { color: #fff; font-weight: 600 }
main { flex: 1; padding-top: 28px; padding-bottom: 48px }
footer { border-top: 1px solid var(--line); font-size: 11px; color: var(--mute) }
.foot { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px }
.foot a { color: var(--mute); margin-left: 14px }

h1 { margin: 0 0 16px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff }
.c { text-align: center } .mute { color: var(--mute) } .small { font-size: 11px }
.pad { padding: 12px 14px } .sep { border-top: 1px solid var(--line) } .right { text-align: right; margin-top: 10px }
.banner { border: 1px solid var(--line); background: var(--panel); padding: 10px 14px; border-radius: 14px; margin-bottom: 20px }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.crumb { margin-bottom: 6px; font-size: 11px }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start }

.box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .35) }
.box-h { padding: 10px 14px; color: var(--blue); font-weight: 600; border-bottom: 1px solid var(--blue-d) }
.row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px 64px 210px; gap: 14px; align-items: center; padding: 14px; color: var(--text); border-top: 1px solid var(--line) }
.box-h + .row, .box > .row:first-child { border-top: 0 }
.row:hover { background: rgba(177, 140, 255, .05); text-decoration: none }
.trow { grid-template-columns: minmax(0, 1fr) 64px 150px }
.title { color: #fff; font-size: 14px }
.num { text-align: center } .num small { display: block; color: var(--mute); font-size: 10px }
.last { min-width: 0 } .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ico { width: 26px; height: 26px; color: var(--mute) } .row:hover .ico { color: var(--blue) }
.kv { display: flex; justify-content: space-between }

.shouts { height: 260px; overflow-y: auto; padding: 10px 14px; word-break: break-word }
.shouts b { color: var(--blue); font-weight: 600 }
.shouts .sys { color: var(--mute); font-size: 12px; border-left: 2px solid var(--line); padding-left: 8px; margin: 4px 0 }
.shouts .hl { background: rgba(124, 77, 255, .14); border-left: 2px solid #b18cff; margin: 0 -14px; padding: 0 12px }
.mention { color: #b18cff } .mention.me { background: rgba(177, 140, 255, .18); border-radius: 3px; padding: 0 2px }
.shout-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line) }

input, textarea { width: 100%; background: #120f1a; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit }
input[type=checkbox] { width: auto; accent-color: var(--blue) }
input:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(177, 140, 255, .15) }
textarea { resize: vertical }
.btn { display: inline-block; background: #1b1626; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 7px 16px; font: inherit; cursor: pointer; white-space: nowrap }
.btn:hover { border-color: #3d3352; text-decoration: none }
.btn.p { background: linear-gradient(135deg, #b794ff, #8b5cf6); border-color: transparent; color: #140a24; font-weight: 600 }
.btn.p:hover { filter: brightness(1.08); box-shadow: 0 6px 24px rgba(160, 110, 255, .45) }
.btn:disabled { opacity: .5; cursor: default }
.stack { display: grid; gap: 10px }

.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin-bottom: 14px }
.form .l { padding: 20px 12px 0; text-align: right; color: var(--mute); background: var(--side) }
.form .l small { display: block; font-size: 10px; color: #6b6f80 }
.form .f { padding: 12px; border-left: 1px solid var(--line) }
.form .f > small { display: block; margin-top: 4px }
.actions { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 8px 12px 8px calc(100% / 3 + 12px) }
.pw { display: flex } .pw input { border-radius: 10px 0 0 10px } .pw .btn { border-radius: 0 10px 10px 0; border-left: 0 }
.chk { display: flex; gap: 8px; align-items: center }
.msg { margin-top: 8px } .msg:empty { display: none } .err { color: var(--err) } .ok { color: var(--ok) }

.post { display: grid; grid-template-columns: 170px minmax(0, 1fr) }
.who { padding: 16px; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center }
.avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #7c4dff, #2a1650); color: #ede4ff; font-weight: 700; text-transform: uppercase; box-shadow: 0 0 14px rgba(177, 140, 255, .25) }
.tag { font-size: 10px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); color: var(--mute) }
.name { white-space: nowrap }
.name.banned { text-decoration: line-through 3px #000; opacity: .75 }
.tag.banned, .tag.denied { color: var(--err); border-color: #8a2f3b }
.tag.open, .tag.accepted { color: var(--ok); border-color: #2c7a54 }
.tag.pin, .tag.lock { color: var(--blue); border-color: var(--blue-d); font-size: 9px; vertical-align: 2px }
.x { background: none; border: 0; color: var(--mute); cursor: pointer; font: inherit; padding: 0 4px }
.x:hover { color: var(--err) }
.btn.sm { padding: 3px 10px; font-size: 11px }
.btn.danger:hover:not(:disabled) { border-color: var(--err); color: var(--err) }
select { background: #120f1a; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; font: inherit }
.tblwrap { overflow-x: auto }
.tbl { width: 100%; border-collapse: collapse }
.tbl th, .tbl td { text-align: left; padding: 8px 12px; border-top: 1px solid var(--line); white-space: nowrap }
.tbl th { color: var(--blue); font-weight: 600; border-top: 0; border-bottom: 1px solid var(--blue-d) }
.body { padding: 14px 16px }
.text { white-space: pre-wrap; word-break: break-word; margin-top: 6px }
.mrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line) }
.mrow:first-child { border-top: 0 } .mrow > .mute { margin-left: auto } .mrow .avatar { width: 30px; height: 30px; font-size: 12px }
a.mrow { color: var(--text) } a.mrow:hover { background: rgba(177, 140, 255, .05); text-decoration: none }
.grow { flex: 1; min-width: 0 }
img.avatar { object-fit: cover }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; box-shadow: none }
.avatar.big { width: 110px; height: 110px; font-size: 42px; border: 3px solid #15111f }
.i { width: 16px; height: 16px; vertical-align: -3px }
.me { display: flex; align-items: center; gap: 8px }
.badge { background: var(--blue-d); color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10px; margin-left: 3px }
.badge:empty { display: none }
h1 .avatar { display: inline-grid; vertical-align: middle }

.crop { position: relative; overflow: hidden; aspect-ratio: 1500 / 290; margin: 8px 0 4px; border: 1px solid var(--line); border-radius: 6px; background: #000; cursor: grab; touch-action: none }
.crop:active { cursor: grabbing } .crop:focus-visible { outline: 2px solid #b18cff }
.crop img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; user-select: none }
.cover {display: block; width: 100%; aspect-ratio: 1500 / 290; object-fit: cover; position: relative; overflow: hidden;background: linear-gradient(120deg, #6d2a6b, #3b1d72 50%, #1e2a6e) }
.cover .cpos { position: absolute; left: 0; top: 0; max-width: none }
.phead { display: flex; gap: 16px; align-items: flex-start; padding: 0 16px 16px; margin-top: -55px; position: relative }
.pinfo { padding-top: 62px; min-width: 0 } .pinfo:nth-child(2) { flex: 1 }
.pname { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px } .pname h1 { margin: 0 }

.pm { height: 420px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px }
.pm-msg { max-width: 75%; align-self: flex-start; background: #1b1626; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px }
.pm-msg .text { margin: 0 }
.pm-msg.mine { align-self: flex-end; background: #2a1a4a; border-color: #4a2f87 }

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px }
.cols2 label { display: grid; gap: 4px }
.kvrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px } .kvrow button { margin-left: auto }
.tag.prio-low { opacity: .7 } .tag.prio-high { color: #ffa94d; border-color: #b8621b } .tag.prio-urgent { color: var(--err); border-color: #8a2f3b; font-weight: 700 }
.tag.available { color: var(--ok); border-color: #2c7a54 }
.tag.expired { color: var(--err); border-color: #8a2f3b }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line) }
.tabs a { padding: 8px 14px; color: var(--mute); border-bottom: 2px solid transparent }
.tabs a.on, .tabs a:hover { color: var(--blue); border-color: var(--blue); text-decoration: none }
.pact { display: flex; flex-wrap: wrap; gap: 6px }
.opt { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 11px }
.staffmsg { border-left: 3px solid var(--blue-d) }
.reply { padding-top: 8px; margin-top: 8px }
code { color: var(--blue); letter-spacing: 1px }

/* formatted posts */
.text b { color: #fff } .text a { word-break: break-all }
.text code { background: #0f0c16; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; color: #d6c4ff }
.text pre { background: #0f0c16; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; white-space: pre }
.text pre code { border: 0; padding: 0; background: none }
.text blockquote, blockquote.text { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--blue-d); background: rgba(177, 140, 255, .05); color: #b9bdcc }
.pimg { display: block; max-width: 100%; max-height: 480px; border-radius: 6px; margin: 6px 0 }
.spoiler { background: #2e2640; color: transparent; border-radius: 3px; padding: 0 4px; cursor: pointer }
.spoiler:hover, .spoiler:focus { color: inherit }
.hint { margin: 6px 0 2px }
.pmeta { display: flex; justify-content: space-between; gap: 8px } .pmeta .x { font-size: 11px }
.x:hover { color: var(--blue) } .x[data-del]:hover { color: var(--err) }
a.mrow.unread { background: rgba(177, 140, 255, .07) } a.mrow.unread .grow { color: #fff }

/* account menu (click on your name) */
.umenu { position: relative }
.umenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px }
.umenu summary::-webkit-details-marker { display: none }
.menu { position: absolute; right: 0; top: calc(100% + 14px); width: 320px; max-width: calc(100vw - 32px); z-index: 10; font-size: 14px;
  background: #15111f; border: 1px solid var(--line); border-top: 2px solid var(--blue-d); border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .65) }
.mhead { display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line) }
.mhead > div:last-child { flex: 1; min-width: 0; display: grid; gap: 5px }
.mhead .kv.small { font-size: 12px }
.mname { font-size: 15px; font-weight: 600 }
.avatar.mid { width: 56px; height: 56px; font-size: 22px }
.avatar.big2 { width: 96px; height: 96px; font-size: 36px }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 0; border-bottom: 1px solid var(--line) }
#user .menu a { color: var(--text) }
#user .mgrid a, #user .mlogout { display: block; padding: 7px 14px; font-size: 13px }
#user .mgrid a:hover, #user .mlogout:hover { background: rgba(177, 140, 255, .08); color: var(--blue); text-decoration: none }

@media (max-width: 720px) {
  .nav { flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; padding-bottom: 10px }
  .links { gap: 12px }
  .cols, .cols2, .post, .form { grid-template-columns: minmax(0, 1fr) }
  .row { grid-template-columns: 28px minmax(0, 1fr) } .trow { grid-template-columns: minmax(0, 1fr) }
  .num, .last { display: none }
  .form .l { text-align: left; padding: 12px 12px 0 } .form .f { border-left: 0 } .actions { padding-left: 12px }
  .who { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line) }
  .foot { flex-direction: column }
  .phead { flex-wrap: wrap; margin-top: -40px } .pinfo:nth-child(3) { padding-top: 0 }
}

/* account pages: menu on the left */
body.side .acct { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start }
#side .box { padding: 6px 0; margin-bottom: 12px }
#side .side-h { padding: 10px 16px 6px; font-weight: 700; color: #fff; border-left: 3px solid #b18cff; margin-top: 4px }
#side a { display: block; padding: 7px 16px; color: var(--mute); border-left: 3px solid transparent }
#side a:hover { color: var(--blue); text-decoration: none; background: rgba(177, 140, 255, .06) }
#side a.on { color: #fff; background: rgba(177, 140, 255, .12); border-left-color: #b18cff }
@media (max-width: 720px) {
  body.side .acct { grid-template-columns: minmax(0, 1fr) }
  #side .box { display: flex; flex-wrap: wrap; padding: 6px; margin-bottom: 8px } #side .side-h { display: none }
  #side a { border: 0; padding: 6px 10px; border-radius: 6px }
}

/* confirmation window */
dialog.sure { padding: 0; max-width: min(420px, calc(100vw - 32px)); color: var(--text); border: 1px solid var(--line) }
dialog.sure::backdrop { background: rgba(0, 0, 0, .6) }

/* update 25: announcement, reactions, unread threads, members pages, 2FA QR code */
.annc { border-color: var(--blue-d); margin-top: 20px }
.reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.react { background: #1b1626; border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer }
.react:hover { border-color: var(--blue-d) } .react.on { border-color: var(--blue); background: rgba(177, 140, 255, .15) }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 6px var(--blue) }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 20px }
.qr { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 6px }


/* ---------- lovable look ---------- */
.glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; filter: blur(70px); opacity: .55;
  background: radial-gradient(35% 30% at 12% 5%, #ff6bb5 0, transparent 70%), radial-gradient(40% 35% at 55% 0, #8b5cf6 0, transparent 70%),
    radial-gradient(35% 35% at 95% 95%, #4f6bff 0, transparent 70%), radial-gradient(25% 25% at 5% 90%, #2dd4bf33 0, transparent 70%) }
.box, .banner, .menu { backdrop-filter: blur(14px) }
.box, .banner { border-radius: 16px }
.btn.p { background: var(--grad); color: #fff; border-color: transparent; font-weight: 600 }
.btn.p:hover { filter: brightness(1.1); box-shadow: 0 6px 26px rgba(200, 90, 255, .45) }
.avatar { background: var(--grad); color: #fff }
.badge { background: var(--pink) }
.dot { background: var(--pink); box-shadow: 0 0 8px var(--pink) }
.tabs a.on { border-image: var(--grad) 1 }
.shouts b { color: var(--pink) }
.logo img { box-shadow: 0 0 18px rgba(255, 107, 181, .45) }
.menu { border-top: 2px solid var(--pink) }

/* home hero */
.hero { text-align: center; padding: 26px 0 30px }
.pill { display: inline-block; padding: 4px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #e9d5ff; background: rgba(168, 85, 247, .12) }
h1.brand { margin: 14px 0 8px; font-size: clamp(44px, 9vw, 76px); font-weight: 900; letter-spacing: -.05em; line-height: 1; background: linear-gradient(90deg, #fff 10%, #f0abfc 45%, #a78bfa 75%, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent }
h1.brand span { color: var(--pink); -webkit-text-fill-color: var(--pink) }
.hero p { margin: 0; color: var(--mute); font-size: 16px }

/* every category gets its own color: header, line and forum icons */
.box { --acc: var(--blue) }
.c0 { --acc: var(--pink) } .c1 { --acc: #c084fc } .c2 { --acc: var(--sky) } .c3 { --acc: var(--mint) }
.box-h { color: var(--acc); border-bottom: 1px solid var(--line); font-weight: 700; display: flex; align-items: center; gap: 8px }
.box-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc) }
.box:has(> .box-h) { border-top: 2px solid color-mix(in srgb, var(--acc) 55%, transparent) }
.row { grid-template-columns: 42px minmax(0, 1fr) 64px 64px 210px }
.row .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent) }
.row:hover { background: color-mix(in srgb, var(--acc) 7%, transparent) } .row:hover .ico { color: #fff; background: var(--acc) }
.tbl th { color: var(--acc) }
@media (max-width: 1000px) { .row { grid-template-columns: 42px minmax(0, 1fr) 64px 64px } .row .last { display: none } }
@media (max-width: 720px) { .row { grid-template-columns: 42px minmax(0, 1fr) } }

/* ranks, lovable colors: admin = pink→violet gradient ♥, moderator = sky ✦, premium = coral, lifetime = mint, alpha = lemon */
.name.admin { background: linear-gradient(90deg, #ff6bb5, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; filter: drop-shadow(0 0 6px rgba(255, 107, 181, .55)) }
.name.admin::before { content: "♥ " }
.name.moderator { color: #7dd3fc; font-weight: 600; text-shadow: 0 0 6px rgba(125, 211, 252, .7), 0 0 16px rgba(56, 189, 248, .35) }
.name.moderator::before { content: "✦ "; font-size: .85em }
.name.premium { color: #ff9478; text-shadow: 0 0 6px rgba(255, 148, 120, .7), 0 0 14px rgba(255, 110, 80, .35) }
.name.lifetime { color: #5eead4; text-shadow: 0 0 6px rgba(94, 234, 212, .75), 0 0 16px rgba(45, 212, 191, .4) }
.name.alpha { color: #fde047; text-shadow: 0 0 6px rgba(253, 224, 71, .7), 0 0 16px rgba(250, 204, 21, .35) }
.tag.admin { color: #fff; border-color: transparent; background: var(--grad); box-shadow: 0 0 10px rgba(200, 90, 255, .4) }
.tag.moderator { color: #7dd3fc; border-color: rgba(125, 211, 252, .45); background: rgba(125, 211, 252, .08) }
.tag.premium { color: #ff9478; border-color: rgba(255, 148, 120, .45); background: rgba(255, 148, 120, .08) }
.tag.lifetime { color: #5eead4; border-color: rgba(94, 234, 212, .45); background: rgba(94, 234, 212, .08) }
.tag.alpha { color: #fde047; border-color: rgba(253, 224, 71, .45); background: rgba(253, 224, 71, .08) }
.tag { border-radius: 99px; padding: 1px 8px }
.avatar.big { border-color: #1a1326; box-shadow: 0 0 0 2px #ff6bb5, 0 0 24px rgba(200, 90, 255, .45) }

/* shop */
.shop { max-width: 560px; margin: 0 auto 20px }
.price { font-size: 22px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.pays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.pay { display: grid; justify-items: center; gap: 2px; padding: 14px 6px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: rgba(255, 255, 255, .02) }
.pay input { position: absolute; opacity: 0 }
.pay b { font-size: 22px; color: #fff } .pay small { color: var(--mute); font-size: 11px }
.pay:hover { border-color: rgba(255, 107, 181, .4) }
.pay:has(input:checked) { border-color: var(--pink); background: rgba(255, 107, 181, .1); box-shadow: 0 0 18px rgba(255, 107, 181, .25) }
.pay:has(input:focus-visible) { outline: 2px solid var(--pink) }
.shop .btn.p { padding: 11px; font-size: 15px }
@media (max-width: 520px) { .pays { grid-template-columns: 1fr 1fr } }