@font-face { font-family: "Figtree"; src: url("/static/fonts/figtree.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Logo"; src: url("/static/fonts/playfair-800i.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }

/* ═════════ tokens ═════════ */
:root, [data-style="svartr"] {
  --bg: #0b0c0e;
  --surface: #0f1013;
  --surface-2: #141518;
  --surface-3: #1a1b1f;
  --chrome: #1a1a1a;
  --head: #1f1f1f;
  --hover: #232326;
  --line: #2a2b2f;
  --line-2: #36373c;
  --text: #e6e8eb;
  --text-2: #b9bcc2;
  --muted: #8b9099;
  --desc: #7d7d84;
  --link: #5aa2ff;
  --accent: #3b82f6;
  --accent-h: #2f6fe0;
  --danger: #e5484d;
  --ok: #22c55e;
  --r-s: 4px; --r-m: 6px; --r-l: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}
[data-style="blod"] { --bg: #0d0909; --surface: #120d0d; --surface-2: #171111; --surface-3: #1e1515; --chrome: #1c1414; --head: #221818; --hover: #2a1d1d; --line: #2f2222; --line-2: #3d2c2c; --link: #ff6b6b; --accent: #d63a3a; --accent-h: #bd2f2f; }
[data-style="aska"] { --bg: #1b1c1f; --surface: #202124; --surface-2: #25262a; --surface-3: #2b2c31; --chrome: #26272b; --head: #2c2d32; --hover: #33343a; --line: #37383e; --line-2: #45464d; }

/* ═════════ base ═════════ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 "Figtree", "Segoe UI", "Helvetica Neue", Helvetica, Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01"; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: rgba(59,130,246,.35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #26272b; border-radius: 6px; border: 3px solid var(--bg); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 10px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.mt { margin-top: 8px; } .mb { margin-bottom: 10px; }
.center { text-align: center; } .inline { display: inline; }
.pad { padding: 12px 14px; } .spacer { flex: 1; } .grow { flex: 1; min-width: 0; }
.ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }

/* ═════════ header & navigation ═════════ */
.hdr { padding-top: 22px; }
.logo { display: inline-flex; align-items: baseline; color: #fff; text-decoration: none !important; padding: 0 32px 20px; font-family: "Logo", Georgia, serif; font-style: italic; font-weight: 800; user-select: none; }
.logo-word { font-size: 64px; line-height: 1; letter-spacing: -1.5px; }
.logo-tld { font-size: 27px; letter-spacing: -.3px; margin-left: 1px; opacity: .92; }
.navbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--chrome); border-radius: var(--r-l); padding: 4px 10px; min-height: 48px; }
.nav-l, .nav-r { display: flex; align-items: center; }
.nav-a { display: inline-flex; align-items: center; gap: 8px; color: #d6d8dc; padding: 9px 15px; border-radius: 8px; font-size: 15.5px; font-weight: 450; background: none; border: 0; cursor: pointer; position: relative; white-space: nowrap; transition: background-color .12s ease, color .12s ease; list-style: none; }
.nav-a::-webkit-details-marker { display: none; }
.nav-a:hover { background: var(--hover); color: #fff; text-decoration: none; }
.nav-a.is-active { color: #fff; font-weight: 650; }
.nav-a .ico { width: 18px; height: 18px; stroke-width: 1.7; }
.nav-ic { padding: 9px 10px; }
.nav-reg { font-weight: 600; }
.nav-user { padding: 6px 12px 6px 7px; }
.pip { position: absolute; top: 3px; right: 2px; background: var(--danger); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--chrome); }
.nav-dd { position: relative; }
.nav-dd[open] > .nav-user { background: var(--hover); }
.nav-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 320px; background: #161618; border: 1px solid var(--line-2); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; animation: pop .14s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.nm-head { display: flex; gap: 12px; padding: 14px; background: var(--head); border-bottom: 1px solid var(--line); }
.nm-name { font-size: 17px; font-weight: 700; color: #fff; }
.nm-sub { color: var(--muted); font-size: 13px; }
.nm-stats { display: flex; gap: 14px; margin: 8px 0 0; }
.nm-stats dt { font-size: 11.5px; color: var(--muted); } .nm-stats dd { margin: 0; font-weight: 650; font-size: 14px; }
.nm-links { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; }
.nm-links a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); color: var(--text-2); font-size: 14px; }
.nm-links a:hover { background: var(--hover); color: #fff; text-decoration: none; }
.nm-links .ico { width: 16px; height: 16px; color: var(--muted); }
.nm-foot { border-top: 1px solid var(--line); padding: 6px; }
.nm-foot button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; border-radius: var(--r-m); cursor: pointer; color: var(--text-2); font-size: 14px; }
.nm-foot button:hover { background: rgba(229,72,77,.12); color: #ff8a8d; }

/* ═════════ page shell ═════════ */
.p-body { padding-top: 16px; padding-bottom: 36px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; align-items: start; }
.col-main { min-width: 0; padding: 0 10px; }
.col-main > * + * { margin-top: 12px; }
.col-side { display: flex; flex-direction: column; gap: 20px; }
.top-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px 12px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; padding: 4px 10px 8px; }
.crumbs a { color: var(--text-2); }
.crumbs a:last-of-type { color: #fff; font-weight: 600; }
.crumb-sep { color: var(--desc); margin: 0 8px; }
.crumbs-bottom { margin-top: 22px; }
.p-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 0 10px 14px; flex-wrap: wrap; }
.p-title h1 { font-size: 25px; font-weight: 500; color: #fff; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; letter-spacing: -.1px; line-height: 1.25; }
.p-title-r { display: flex; gap: 6px; }
.p-desc { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.p-meta { display: flex; gap: 14px; color: var(--muted); font-size: 13.5px; margin-top: 6px; flex-wrap: wrap; }
.p-meta span { display: inline-flex; align-items: center; gap: 5px; }
.p-meta a { color: var(--muted); }
.page-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-nav:empty { display: none; }

/* ═════════ forum index (nodes) ═════════ */
.node-cat + .node-cat { margin-top: 18px; }
.cat-head { background: var(--head); border-radius: var(--r-m); padding: 11px 17px; }
.cat-head h2 { font-size: 15px; font-weight: 600; }
.cat-head h2 a { color: #fff; }
.cat-desc { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.node-list { padding: 4px 0; }
.node { display: grid; grid-template-columns: 52px minmax(0, 1fr) 140px 280px; gap: 0 10px; align-items: center; padding: 11px 6px 11px 4px; border-radius: var(--r-m); transition: background-color .12s; }
.node:hover { background: rgba(255,255,255,.018); }
.node-ico { display: grid; place-items: center; color: #ececec; }
.node-ico .ico { width: 36px; height: 36px; stroke-width: 1.45; }
.node--locked .node-ico { color: #55565c; }
.node-title { font-size: 17.5px; font-weight: 650; line-height: 1.25; letter-spacing: .1px; }
.node-title a { color: #f1f2f4; }
.node-desc { color: var(--desc); font-size: 13.5px; line-height: 1.4; margin-top: 3px; }
.node-stats { display: flex; }
.node-stats dl { margin: 0; flex: 1; text-align: center; }
.node-stats dt { font-size: 12.5px; color: var(--muted); }
.node-stats dd { margin: 0; font-size: 15.5px; color: var(--text); font-weight: 500; }
.node-last { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 4px; }
.nl-main { min-width: 0; font-size: 13.5px; }
.nl-title { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-meta { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-meta .username { color: var(--text-2); }
.nl-none { color: var(--desc); font-size: 13.5px; }

/* ═════════ labels (prefixes) ═════════ */
.label { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; line-height: 1; padding: 3px 6px 3px 5px; border-radius: 4px; color: #fff; margin-right: 6px; vertical-align: 1px; white-space: nowrap; letter-spacing: .1px; }
.label .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.label-big { font-size: 19px; padding: 5px 10px 5px 9px; border-radius: 5px; gap: 6px; margin-right: 2px; vertical-align: 2px; }
.label-big .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.label--none { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }
.px-news { background: #2896bd; }
.px-discussion { background: #3b82f6; }
.px-question { background: #7c5cff; }
.px-guide { background: #1f9d68; }
.px-bloods { background: #e5484d; }
.px-log { background: #cc4bb3; }
.px-study { background: #e39a12; }

/* ═════════ avatars, usernames, banners ═════════ */
.avatar { display: inline-grid; place-items: center; object-fit: cover; flex: none; border-radius: 50%; overflow: hidden; user-select: none; }
.av-letter { background: hsl(var(--h) 38% 34%); color: hsl(var(--h) 75% 90%); font-weight: 500; line-height: 1; }
.av-empty { background: var(--surface-3); color: var(--muted); --h: 0; }
.av-sys { background: var(--surface-3); color: var(--text-2); }
.av-sys .ico { width: 18px; height: 18px; }
.av-xxs { width: 20px; height: 20px; font-size: 11px; }
.av-xs { width: 24px; height: 24px; font-size: 12px; }
.av-s { width: 32px; height: 32px; font-size: 15px; }
.av-m { width: 40px; height: 40px; font-size: 18px; }
.av-node { width: 36px; height: 36px; font-size: 17px; border-radius: 6px; }
.av-post { width: 100px; height: 100px; font-size: 50px; border-radius: 8px; }
.av-l { width: 52px; height: 52px; font-size: 24px; border-radius: 8px; }
.av-xl { width: 140px; height: 140px; font-size: 66px; border-radius: 10px; }
.username { color: var(--text); font-weight: 500; }
.u-admin { color: #ff5a5a; font-weight: 650; }
.u-mod { color: #4b8dff; font-weight: 650; }
.u-plus { color: #b57bff; font-weight: 600; }
.u-banned { color: var(--desc); text-decoration: line-through; }
.ubanners { display: flex; flex-direction: column; gap: 4px; margin: 7px 10px 0; }
.ubanner { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 8px; border-radius: 3px; letter-spacing: .2px; color: #fff; }
.ubanner .ico { width: 12px; height: 12px; stroke-width: 2.2; }
.ub-admin { background: linear-gradient(180deg, #a3262a, #7d1c1f); }
.ub-mod { background: linear-gradient(180deg, #2f6fe0, #2259bd); }
.ub-plus { background: linear-gradient(180deg, #7442d6, #5b2fb3); }
.ub-motm { background: linear-gradient(180deg, #b7861a, #8f6812); }

/* ═════════ sidebar widgets ═════════ */
.widget-head { background: var(--head); border-radius: var(--r-m); padding: 11px 16px; font-size: 14.5px; font-weight: 600; color: #ececec; }
.widget-body { padding-top: 4px; }
.w-pad { padding: 8px 10px; font-size: 14px; }
.w-foot { color: var(--muted); font-size: 13px; margin-top: 6px; }
.wi { display: flex; gap: 9px; padding: 6px 8px; border-radius: var(--r-m); }
.wi:hover { background: rgba(255,255,255,.02); }
.wi .avatar { margin-top: 3px; }
.wi-main { min-width: 0; font-size: 14.5px; line-height: 1.42; }
.wi-title { color: #e9eaec; }
.wi-meta { color: var(--muted); font-size: 13px; }
.wi-meta a { color: var(--muted); }
.viewers { color: var(--muted); font-size: 12px; font-style: italic; white-space: nowrap; font-weight: 400; }
.w-boxed { padding: 0 10px; }
.w-card { color: var(--text-2); font-size: 13.5px; padding: 10px 14px 6px; }
.w-card p { margin: 6px 0 14px; line-height: 1.5; }
.w-btn { display: block; text-align: center; color: #fff !important; text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: .09em; padding: 9px 10px; border-radius: 3px; text-decoration: none !important; transition: filter .12s, transform .12s; }
.w-btn:hover { filter: brightness(1.12); }
.w-btn:active { transform: translateY(1px); }
.w-btn-green { background: #12a150; }
.w-btn-indigo { background: #4f46e5; }
.pairs { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 0; }
.pairs dt { color: var(--text-2); }
.pairs dd { margin: 0; text-align: right; color: var(--text); font-weight: 500; }
.online-list { line-height: 1.75; }
.widget--wide { margin-top: 20px; }
.widget--wide .w-pad { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); margin-top: 8px; }

/* ═════════ blocks ═════════ */
.block { background: var(--surface); border: 1px solid #2e2e2e; border-radius: var(--r-s); }
.block-head { background: var(--head); padding: 11px 14px; font-size: 16px; font-weight: 600; color: #fff; border-bottom: 1px solid var(--line); border-radius: var(--r-s) var(--r-s) 0 0; display: flex; align-items: center; gap: 8px; }
.block-row { padding: 12px 14px; border-top: 1px solid var(--line); }
.block-row:first-child { border-top: 0; }
.row-flex { display: flex; gap: 12px; align-items: flex-start; }
.row-title { color: var(--text); font-weight: 600; font-size: 15.5px; }
.block-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-s) var(--r-s); }
.block-filter { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); border-radius: var(--r-s) var(--r-s) 0 0; }
.filter-on { display: inline-flex; align-items: center; gap: 4px; }
.filter-on a { color: var(--muted); font-size: 16px; line-height: 1; }
.sort-info b { color: var(--text-2); font-weight: 500; }

/* dropdown (details) */
.dd { position: relative; }
.dd summary { list-style: none; cursor: pointer; color: var(--text-2); padding: 4px 8px; border-radius: var(--r-s); display: inline-flex; align-items: center; gap: 6px; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary:hover, .dd[open] summary { color: #fff; background: var(--hover); }
.dd-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; background: #161618; border: 1px solid var(--line-2); border-radius: var(--r-m); min-width: 220px; padding: 6px; box-shadow: var(--shadow); animation: pop .12s ease-out; }
.dd-menu a { display: block; padding: 6px 10px; color: var(--text-2); border-radius: var(--r-s); }
.dd-menu a:hover, .dd-menu a.on { background: var(--hover); color: #fff; text-decoration: none; }
.dd-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--desc); padding: 8px 10px 4px; font-weight: 600; }
.mod-dd .dd-menu { left: auto; right: 0; }
.dd-menu--wide { min-width: 380px; padding: 10px; }

/* ═════════ thread list ═════════ */
.si { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 118px 170px; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); transition: background-color .1s; }
.si-group > .si:first-child { border-top: 0; }
.si-group--sticky { background: rgba(255,255,255,.012); border-bottom: 2px solid var(--line-2); }
.si:hover { background: rgba(255,255,255,.022); }
.si-title { font-size: 15.5px; line-height: 1.35; font-weight: 500; }
.si-title a { color: #d6d7da; }
.si-title a:hover { color: #fff; }
.si-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.si-meta a, .si-meta .username { color: var(--muted); }
.si-status { display: flex; gap: 6px; color: var(--muted); }
.si-status .ico { width: 15px; height: 15px; }
.si-stats { margin: 0; font-size: 13px; }
.si-stats div { display: flex; justify-content: space-between; gap: 8px; }
.si-stats dt { color: var(--muted); }
.si-stats dd { margin: 0; color: var(--text-2); }
.si-views { opacity: .7; }
.si-last { display: flex; align-items: center; gap: 9px; justify-content: flex-end; text-align: right; font-size: 13px; }
.si-last a { color: var(--muted); }
.si-last-main .username { font-size: 13px; }
.mini-pages { margin-left: 6px; }
.mini-pages a { display: inline-block; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 3px; margin-left: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.mini-pages a:hover { color: #fff; border-color: var(--muted); text-decoration: none; }

/* ═════════ messages (posts) ═════════ */
.messages { display: flex; flex-direction: column; gap: 8px; }
.message { display: grid; grid-template-columns: 172px minmax(0, 1fr); border: 1px solid #2e2e2e; border-radius: var(--r-s); background: var(--surface); }
.message:target { border-color: #3d5f99; box-shadow: 0 0 0 1px #3d5f99; }
.message-user { background: var(--surface-2); border-right: 1px solid var(--line); padding: 14px 0 12px; text-align: center; border-radius: var(--r-s) 0 0 var(--r-s); }
.mu-av { display: inline-block; }
.mu-name { font-size: 16px; font-weight: 650; margin-top: 9px; letter-spacing: .15px; padding: 0 6px; overflow-wrap: anywhere; }
.mu-name .username { color: #ebebeb; font-weight: 650; }
.mu-name .u-admin { color: #ff5a5a; } .mu-name .u-mod { color: #4b8dff; } .mu-name .u-plus { color: #b57bff; }
.mu-title { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.mu-pairs { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 1px 6px; text-align: left; font-size: 12.5px; margin: 11px 0 0; padding: 9px 12px 0; border-top: 1px solid var(--line); }
.mu-pairs dt { color: var(--muted); } .mu-pairs dd { margin: 0; text-align: right; color: var(--text-2); }
.message-cell { padding: 0 14px; display: flex; flex-direction: column; min-width: 0; }
.message-attr { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 8px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.message-attr a { color: var(--muted); }
.message-attr a:hover { color: #fff; text-decoration: none; }
.ma-r { display: inline-flex; gap: 12px; align-items: center; }
.ma-r .ico { width: 14px; height: 14px; }
.owner { background: #2a2b2e; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: .2px; }
.message-body { padding: 12px 0 16px; font-size: 15.5px; line-height: 1.62; overflow-wrap: anywhere; flex: 1; color: #e3e4e7; }
.message-edited { font-size: 12.5px; color: var(--muted); font-style: italic; padding-bottom: 8px; }
.message-sig { border-top: 1px solid var(--line); padding: 8px 0; font-size: 13.5px; color: var(--text-2); max-height: 110px; overflow: hidden; }
.message-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0 8px; flex-wrap: wrap; }
.ma-left, .ma-right { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.action { background: none; border: 0; color: var(--muted); padding: 5px 9px; border-radius: var(--r-s); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; transition: background-color .12s, color .12s; }
.action:hover { color: #fff; background: var(--hover); text-decoration: none; }
.action .ico { width: 15px; height: 15px; }
.action--reply { color: var(--text-2); }
.rx-pick { position: relative; display: inline-flex; }
.rx-main.is-on { color: #fff; font-weight: 600; }
.rx-main .rx-ico { margin: -2px 0; }
.rx-on-like { color: #6ea8ff !important; } .rx-on-hq { color: #b49bff !important; } .rx-on-fire { color: #ff9a55 !important; } .rx-on-lol { color: #ffcb45 !important; } .rx-on-cope { color: #ff7ab8 !important; }
.rx-menu { display: none; position: absolute; bottom: calc(100% + 2px); right: -40px; background: #18181b; border: 1px solid var(--line-2); border-radius: 30px; padding: 6px 8px; gap: 4px; z-index: 20; box-shadow: var(--shadow); }
.rx-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.rx-pick:hover .rx-menu, .rx-pick:focus-within .rx-menu { display: flex; animation: pop .12s ease-out; }
.rx-menu button { position: relative; background: none; border: 0; cursor: pointer; padding: 2px; border-radius: 50%; transition: transform .12s cubic-bezier(.3,1.6,.6,1); display: grid; place-items: center; }
.rx-menu button span { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #000; color: #fff; font-size: 11.5px; font-weight: 600; padding: 3px 7px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; }
.rx-menu button:hover { transform: scale(1.28) translateY(-3px); }
.rx-menu button:hover span { opacity: 1; }
.rx-menu button.is-on { box-shadow: 0 0 0 2px var(--line-2); }
.rx-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 3px; font-size: 13px; color: var(--text-2); }
.rx-bar.is-empty { display: none; }
.rx-icons { display: inline-flex; flex: none; }
.rx-icons > span { display: inline-flex; margin-right: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-2); }
.rx-icons > span:last-child { margin-right: 2px; }
.rx-ico { display: block; flex: none; }

.message--quick { margin-top: 12px; }
.mu-quick { display: flex; justify-content: center; padding-top: 16px; }
.message--quick .message-cell { padding: 12px 14px; }
.quick-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.reply-hint { display: flex; justify-content: flex-end; font-size: 14px; color: var(--text-2); }
.reply-hint a, .reply-hint > span { border: 1px solid #2e2e2e; padding: 6px 12px; border-radius: var(--r-s); color: var(--text-2); }

/* ═════════ bbcode ═════════ */
.bb .bb-h { font-size: 19px; font-weight: 600; margin: 16px 0 6px; color: #fff; }
.bb .bb-h:first-child { margin-top: 0; }
.bb ul, .bb ol { margin: 6px 0; padding-left: 26px; }
.bb li { margin: 2px 0; }
.bb-quote { margin: 10px 0; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid #3d3f45; border-radius: 3px; }
.bb-quote-head { padding: 7px 12px; font-size: 13.5px; color: var(--link); font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.03); }
.bb-quote-body { padding: 8px 12px 10px; font-size: 14.5px; color: var(--text-2); }
.bb-code { background: #08090a; border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; overflow-x: auto; font: 13.5px/1.55 "Cascadia Mono", Consolas, monospace; color: #dcdfe4; margin: 10px 0; white-space: pre; }
.bb-img { max-height: 520px; display: block; margin: 8px 0; border-radius: 3px; }
.bb-spoiler { margin: 10px 0; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.bb-spoiler summary { padding: 7px 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.bb-spoiler > div { padding: 10px 12px; border-top: 1px solid var(--line); }
.mention { color: var(--link); font-weight: 500; }
mark { background: #6b5a12; color: #fff; padding: 0 2px; border-radius: 2px; }

/* ═════════ forms & buttons ═════════ */
input, select, textarea { background: #1a1a1c; color: var(--text); border: 1px solid #2c2c2c; border-radius: var(--r-s); padding: 8px 10px; font: inherit; font-size: 15px; outline: none; max-width: 100%; transition: border-color .12s, box-shadow .12s, background-color .12s; }
input::placeholder, textarea::placeholder { color: #6b6e76; }
input:focus, select:focus, textarea:focus { border-color: #3d5f99; box-shadow: 0 0 0 3px rgba(59,130,246,.16); background: #1c1d20; }
textarea { width: 100%; resize: vertical; line-height: 1.55; }
select { cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > span { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.field input, .field select { width: 100%; }
.check { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 16px; font-size: 14px; color: var(--text-2); }
.check input { margin-top: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #1f1f1f; color: #d0d0d0; border: 1px solid #2c2c2c; padding: 7px 13px; border-radius: var(--r-s); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background-color .12s, border-color .12s, color .12s, transform .08s; }
.btn:hover { background: #272729; border-color: #3a3a3d; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }
.btn-cta { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-cta:hover { background: var(--accent-h); border-color: var(--accent-h); }
.btn-lg { padding: 9px 18px; font-size: 15px; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-danger { background: #8f1f22; border-color: #a2272b; color: #fff; }
.btn-danger:hover { background: #a6272a; }
.btn-wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.is-busy { opacity: .6; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); font: inherit; }
.link-btn:hover { color: #fff; text-decoration: underline; }
.link-btn.link { color: var(--link); }
.search-form { display: flex; gap: 8px; flex-wrap: wrap; }
.search-form input { flex: 1; min-width: 160px; }
.bet-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.bet-form input[type=number] { width: 110px; }

/* ═════════ editor ═════════ */
.editor { border: 1px solid #2c2c2c; border-radius: var(--r-m); background: #151517; transition: border-color .12s, box-shadow .12s; }
.editor:focus-within { border-color: #3d5f99; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.editor.is-drag { border-color: var(--accent); border-style: dashed; }
.editor-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 5px 6px; background: var(--surface-3); border-bottom: 1px solid var(--line); border-radius: var(--r-m) var(--r-m) 0 0; position: sticky; top: 0; z-index: 2; }
.eb-group { display: flex; gap: 1px; padding-right: 6px; margin-right: 4px; border-right: 1px solid var(--line-2); }
.eb-group:nth-last-child(3) { border-right: 0; }
.eb { background: none; border: 0; color: #a9adb5; width: 32px; height: 30px; border-radius: var(--r-s); cursor: pointer; display: inline-grid; place-items: center; transition: background-color .1s, color .1s; }
.eb:hover { background: var(--hover); color: #fff; }
.eb .ico { width: 17px; height: 17px; }
.eb-text { width: auto; padding: 0 9px; display: inline-flex; gap: 6px; font-size: 13px; font-weight: 500; }
.eb-tabs { margin-left: auto; display: flex; background: #111113; border-radius: var(--r-m); padding: 2px; }
.eb-tab { background: none; border: 0; color: var(--muted); padding: 4px 10px; border-radius: var(--r-s); cursor: pointer; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.eb-tab .ico { width: 14px; height: 14px; }
.eb-tab.is-on { background: var(--hover); color: #fff; }
.editor textarea { border: 0; background: transparent; padding: 12px 14px; font-size: 15.5px; box-shadow: none !important; min-height: 140px; display: block; border-radius: 0; }
.editor--compact textarea { min-height: 90px; }
.editor-preview { padding: 12px 14px; min-height: 140px; font-size: 15.5px; line-height: 1.62; }
.editor-foot { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--desc); }

/* ═════════ compose (post thread) ═════════ */
.compose { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.compose-main { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.compose-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compose-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; min-width: 52px; }
.compose-title { width: 100%; font-size: 21px; font-weight: 600; padding: 12px 14px; background: #151517; }
.compose-foot { display: flex; justify-content: flex-end; gap: 8px; }
.compose-side { display: flex; flex-direction: column; gap: 16px; }
.compose-forum { display: flex; gap: 12px; align-items: center; }
.compose-forum .node-ico .ico { width: 30px; height: 30px; }
.tips { list-style: none; margin: 0; padding: 6px 10px; font-size: 13.5px; color: var(--text-2); }
.tips li { display: flex; gap: 8px; padding: 5px 0; line-height: 1.45; }
.tips .ico { color: var(--ok); margin-top: 3px; width: 14px; height: 14px; }
.prefix-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-opt { cursor: pointer; }
.pp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pp-opt .label { margin: 0; padding: 6px 10px 6px 9px; font-size: 13px; opacity: .45; transition: opacity .12s, transform .12s, box-shadow .12s; }
.pp-opt .label .ico { width: 13px; height: 13px; }
.pp-opt:hover .label { opacity: .8; }
.pp-opt input:checked + .label { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255,255,255,.55); }
.pp-opt input:focus-visible + .label { outline: 2px solid var(--accent); outline-offset: 3px; }

/* forum chooser */
.chooser { overflow: hidden; }
.chooser-cat { background: var(--head); padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.chooser-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--text); transition: background-color .1s; }
.chooser-row:hover { background: var(--hover); text-decoration: none; }
.chooser-ico .ico { width: 28px; height: 28px; stroke-width: 1.5; color: #ececec; }
.chooser-title { display: block; font-weight: 600; font-size: 16px; }
.chooser-desc { display: block; color: var(--desc); font-size: 13.5px; }
.chev-r { transform: rotate(-90deg); color: var(--muted); }

/* ═════════ notices / tabs / pager / toast ═════════ */
.notice { padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface-2); margin: 0 10px 12px; font-size: 14.5px; transition: opacity .6s; }
.notice-error { border-color: #5b2023; background: #241012; color: #ffcfcf; }
.notice-success { border-color: #1d4d2d; background: #0f2117; color: #c4f2d2; }
.notice.is-fading { opacity: 0; }
.auth .notice, .block .notice { margin: 0 0 14px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--surface-2); overflow-x: auto; border-radius: var(--r-s) var(--r-s) 0 0; padding: 0 6px; scrollbar-width: none; }
.tabs a { padding: 11px 14px; color: var(--muted); font-size: 14.5px; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.tabs a.on { color: #fff; border-bottom-color: var(--accent); }
.tabs a:hover { color: #fff; text-decoration: none; }
.pager { display: flex; gap: 4px; flex-wrap: wrap; }
.pg { min-width: 32px; text-align: center; padding: 4px 9px; border: 1px solid #2e2e2e; border-radius: var(--r-s); color: #b6b2b2; background: var(--bg); font-size: 13.5px; }
.pg:hover { color: #fff; text-decoration: none; border-color: #45464c; }
.pg.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.pg-gap { padding: 4px; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 100; padding: 10px 16px; border-radius: var(--r-m); font-size: 14px; font-weight: 500; box-shadow: var(--shadow); transition: opacity .2s, transform .2s; }
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: #3a1416; color: #ffd4d4; border: 1px solid #6b2427; }
.toast--success { background: #10301d; color: #c9f5d6; border: 1px solid #1f5a34; }

/* ═════════ auth ═════════ */
.auth { display: flex; justify-content: center; padding: 26px 0 10px; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid #2e2e2e; border-radius: var(--r-l); padding: 28px 28px 22px; }
.auth-title { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.auth-sub { color: var(--muted); margin: 4px 0 20px; }
.auth-alt { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ═════════ profile ═════════ */
.mh { background: var(--surface); border: 1px solid #2e2e2e; border-radius: var(--r-s); overflow: hidden; }
.mh-cover { height: 120px; background: radial-gradient(120% 140% at 0% 0%, #23262d 0%, #15161a 55%, #0f1013 100%); border-bottom: 1px solid var(--line); }
.mh-main { display: flex; gap: 20px; padding: 0 20px 16px; align-items: flex-end; margin-top: -60px; flex-wrap: wrap; }
.mh-av { position: relative; }
.mh-av .avatar { border: 4px solid var(--surface); }
.mh-av-edit { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; opacity: 0; transition: opacity .15s; }
.mh-av:hover .mh-av-edit { opacity: 1; }
.mh-info { flex: 1; min-width: 220px; padding-bottom: 2px; }
.mh-name { font-size: 26px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.mh-name .username { font-weight: 700; }
.mh-title { color: var(--text-2); font-size: 14px; }
.mh-info .ubanners { flex-direction: row; flex-wrap: wrap; margin: 8px 0 0; }
.mh-blurb { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.mh-actions { display: flex; gap: 8px; padding-bottom: 4px; }
.mh-stats { display: flex; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.mh-stats div { flex: 1; padding: 12px 20px; border-right: 1px solid var(--line); }
.mh-stats div:last-child { border-right: 0; }
.mh-stats dt { font-size: 12.5px; color: var(--muted); } .mh-stats dd { margin: 0; font-size: 19px; font-weight: 650; }
.mh-tabs { border-radius: 0; border-top: 1px solid var(--line); border-bottom: 0; }
.online-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.wall-form { display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.wall-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.feed-row { display: flex; gap: 12px; padding: 14px; border-top: 1px solid var(--line); }
.feed-row:first-child, .wall-form + .feed-row { border-top: 0; }
.feed-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); flex: none; }
.feed-ico .ico { width: 18px; height: 18px; }
.feed-head { font-size: 14.5px; color: var(--text-2); }
.feed-head a { color: var(--text); font-weight: 500; }
.feed-body { margin-top: 3px; font-size: 15px; }
.feed-snip { color: var(--text-2); font-size: 14px; margin-top: 4px; border-left: 2px solid var(--line-2); padding-left: 10px; }
.feed-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.about { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.about-sec h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
.about-pairs { display: grid; grid-template-columns: 140px 1fr; gap: 6px 10px; margin: 0; }
.about-pairs dt { color: var(--muted); } .about-pairs dd { margin: 0; }

/* ═════════ account ═════════ */
.acc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.acc-nav { background: var(--surface); border: 1px solid #2e2e2e; border-radius: var(--r-s); overflow: hidden; position: sticky; top: 12px; }
.acc-me { display: flex; gap: 10px; align-items: center; padding: 14px; background: var(--head); border-bottom: 1px solid var(--line); }
.acc-me b { display: block; font-size: 15.5px; color: #fff; }
.acc-me a { font-size: 13px; }
.acc-nav nav { padding: 6px; display: flex; flex-direction: column; }
.acc-nav nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--text-2); border-radius: var(--r-m); font-size: 14.5px; font-weight: 500; }
.acc-nav nav a .ico { width: 17px; height: 17px; color: var(--muted); }
.acc-nav nav a:hover { background: var(--hover); color: #fff; text-decoration: none; }
.acc-nav nav a.on { background: rgba(59,130,246,.14); color: #fff; }
.acc-nav nav a.on .ico { color: var(--link); }
.acc-panel { background: var(--surface); border: 1px solid #2e2e2e; border-radius: var(--r-s); }
.acc-body { padding: 20px 22px 8px; }
.acc-h { font-size: 20px; font-weight: 650; color: #fff; margin-bottom: 16px; }
.acc-p { color: var(--muted); margin: -8px 0 14px; }
.acc-foot { display: flex; justify-content: flex-end; padding: 12px 22px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-s) var(--r-s); }
.form-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.form-row:first-of-type { border-top: 0; }
.fr-label { color: var(--text-2); font-weight: 600; font-size: 14.5px; padding-top: 8px; text-align: right; }
.fr-input input, .fr-input textarea, .fr-input select { width: 100%; }
.fr-static { padding-top: 8px; font-weight: 500; }
.fr-hint { color: var(--desc); font-size: 13px; margin-top: 5px; }
.avatar-studio { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 14px; }
.as-preview .avatar { box-shadow: 0 0 0 1px var(--line-2), 0 12px 30px rgba(0,0,0,.4); }
.as-side { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.as-drop { width: 100%; border: 2px dashed var(--line-2); border-radius: var(--r-l); padding: 22px; text-align: center; color: var(--text-2); cursor: pointer; transition: border-color .12s, background-color .12s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.as-drop > .ico { width: 30px; height: 30px; color: var(--muted); }
.as-drop:hover, .as-drop.is-drag { border-color: var(--accent); background: rgba(59,130,246,.06); }
.as-sizes { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }

/* ═════════ members & alerts ═════════ */
.motm { display: flex; gap: 20px; align-items: center; padding: 18px; background: linear-gradient(110deg, #221a07 0%, var(--surface) 60%); border: 1px solid #4a3a12; border-radius: var(--r-s); }
.motm-kicker { display: inline-flex; align-items: center; gap: 6px; color: #e2b54a; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.motm h2 { font-size: 26px; margin: 2px 0 4px; }
.motm-text { color: var(--text-2); }
.motm-stats { display: flex; gap: 26px; margin: 12px 0 0; }
.motm-stats dt { font-size: 12.5px; color: var(--muted); } .motm-stats dd { margin: 0; font-weight: 650; font-size: 16px; }
.member-list { list-style: none; margin: 0; padding: 0; }
.ml-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.ml-row:first-child { border-top: 0; }
.ml-row:hover { background: rgba(255,255,255,.02); }
.ml-n { width: 24px; color: var(--desc); font-weight: 600; text-align: right; font-size: 13px; }
.ml-name { font-size: 15.5px; }
.ml-title { color: var(--muted); font-size: 13px; }
.ml-row .ubanners { flex-direction: row; margin: 0; }
.ml-stat { width: 160px; text-align: right; color: var(--text-2); font-size: 14px; font-weight: 500; }
.alert-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--text); transition: background-color .1s; }
.alert-row:first-child { border-top: 0; }
.alert-row:hover { background: rgba(255,255,255,.025); text-decoration: none; }
.alert-row.unread { background: rgba(59,130,246,.07); box-shadow: inset 3px 0 0 var(--accent); }
.conv-title { font-weight: 600; }
.quote-preview { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; margin: 0 0 14px; max-height: 240px; overflow: auto; font-size: 14.5px; }
.mod-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mod-form select { padding: 4px 8px; font-size: 13.5px; }
.rules ol { padding-left: 22px; margin: 0; } .rules li { margin: 8px 0; line-height: 1.55; }
.sub-h { font-size: 16px; font-weight: 600; margin: 18px 0 10px; color: #fff; }
.sub-h:first-child { margin-top: 0; }
.msg-title { color: var(--text-2); font-size: 13px; }

/* ═════════ games & upgrades ═════════ */
.games-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.stat-card > .ico { width: 30px; height: 30px; color: var(--text-2); }
.big-num { font-size: 22px; font-weight: 650; }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bj-table { background: radial-gradient(ellipse at 50% 30%, #13402a, #0b2416); border: 1px solid #1e4a30; border-radius: var(--r-l); padding: 14px; }
.bj-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bj-label { width: 78px; font-size: 13.5px; color: #a7d8b8; }
.cards { display: flex; gap: 6px; }
.card { width: 46px; height: 64px; border-radius: 5px; background: #f6f3eb; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Georgia, serif; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.card b { font-size: 17px; line-height: 1; } .card i { font-style: normal; font-size: 18px; }
.card.red { color: #c41e2a; }
.card.back { background: repeating-linear-gradient(45deg, #23262b, #23262b 4px, #2e3238 4px, #2e3238 8px); border: 2px solid #ddd; }
.bj-actions { display: flex; gap: 6px; margin-top: 8px; }
.bj-result { padding: 8px 12px; border-radius: var(--r-s); margin: 10px 0 4px; font-size: 14.5px; font-weight: 500; }
.r-win, .r-blackjack { background: #10301d; color: #9df0b6; }
.r-lose { background: #351314; color: #ffb3b3; }
.r-push { background: #2d2a12; color: #f0e49f; }
.cf-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.cf-main { flex: 1; } .cf-done { padding: 3px 0; }
.upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tier .price { font-size: 26px; font-weight: 700; margin-bottom: 12px; }
.tier-plus { border-color: #5b2fb3; box-shadow: 0 0 0 1px #5b2fb3; }
.ticks { list-style: none; padding: 0; margin: 0 0 16px; }
.ticks li { padding: 4px 0 4px 22px; position: relative; color: var(--text-2); font-size: 14.5px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 10px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.rank-n { width: 16px; color: var(--muted); }
.side-row { display: flex; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.side-row:first-child { border-top: 0; }
.side-row-main { min-width: 0; flex: 1; }
.shout-form { display: flex; gap: 6px; padding: 6px 10px; } .shout-form input { flex: 1; min-width: 0; }
.shout-list { max-height: 360px; overflow-y: auto; }
.shout { display: flex; gap: 8px; padding: 5px 10px; font-size: 14px; }
.shout-main { min-width: 0; flex: 1; } .shout-meta { font-size: 13px; } .shout-body { overflow-wrap: anywhere; color: var(--text-2); }

/* ═════════ footer ═════════ */
.ftr { margin-top: 10px; }
.ftr-bar { background: var(--chrome); }
.ftr-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; font-size: 14px; }
.style-chooser select { background: transparent; border: 0; color: var(--text-2); font-size: 14px; padding: 2px; box-shadow: none !important; }
.style-chooser select option { background: var(--chrome); }
.ftr-links { display: flex; gap: 18px; flex-wrap: wrap; }
.ftr-links a { color: var(--text-2); }
.ftr-copy { text-align: center; font-size: 12.5px; color: var(--desc); padding: 16px 10px 26px; }

/* ═════════ responsive ═════════ */
@media (max-width: 1000px) {
  .cols, .compose { grid-template-columns: 1fr; }
  .col-side { padding: 0 10px; }
  .node { grid-template-columns: 48px minmax(0, 1fr) 240px; }
  .node-stats { display: none; }
  .si { grid-template-columns: 40px minmax(0, 1fr) auto 150px; }
  .si-stats { display: none; }
  .acc { grid-template-columns: 1fr; }
  .acc-nav { position: static; }
  .acc-nav nav { flex-direction: row; overflow-x: auto; }
  .acc-nav nav a { white-space: nowrap; }
}
@media (max-width: 680px) {
  .logo { padding: 0 12px 14px; }
  .logo-word { font-size: 46px; } .logo-tld { font-size: 21px; }
  .navbar { padding: 4px; overflow-x: auto; scrollbar-width: none; }
  .nav-a span { display: none; }
  .nav-a.is-active span, .nav-user span { display: inline; }
  .nav-a { padding: 9px 10px; }
  .nav-menu { position: fixed; left: 8px; right: 8px; top: 70px; width: auto; }
  .col-main { padding: 0; }
  .node { grid-template-columns: 42px minmax(0, 1fr); padding: 10px 4px; }
  .node-ico .ico { width: 28px; height: 28px; }
  .node-last { grid-column: 2; margin-top: 6px; }
  .si { grid-template-columns: 36px minmax(0, 1fr); }
  .si-status, .si-last { display: none; }
  .message { grid-template-columns: 1fr; }
  .message-user { display: grid; grid-template-columns: auto 1fr; text-align: left; gap: 0 12px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-s) var(--r-s) 0 0; align-items: center; }
  .message-user .avatar.av-post { width: 44px; height: 44px; font-size: 20px; grid-row: span 2; }
  .mu-name { margin-top: 0; padding: 0; }
  .mu-pairs, .message-user .ubanners { display: none; }
  .mu-quick { display: none; }
  .games-top, .games-grid, .upgrade-grid, .grid2 { grid-template-columns: 1fr; }
  .p-title h1 { font-size: 21px; }
  .form-row { grid-template-columns: 1fr; gap: 6px; }
  .fr-label { text-align: left; padding-top: 0; }
  .mh-main { margin-top: -50px; }
  .mh-av .avatar.av-xl { width: 100px; height: 100px; font-size: 46px; }
  .mh-stats div { padding: 10px 12px; }
  .ml-stat, .ml-row .ubanners { display: none; }
  .eb-tabs { margin-left: 0; }
}