:root { color-scheme: dark only; }
html, body { background: #0e0e10 !important; color: #e6e6e6 !important; }
:root {
--ink: #e6e6e6;
--ink-2: #c4c4c4;
--ink-3: #8c8c8c;
--ink-4: #5e5e5e;
--line: #2a2a2c;
--line-2: #1c1c1e;
--paper: #141416;
--paper-2: #1a1a1c;
--page: #0e0e10;
--accent: #abb6ff;
--accent-ink: #abb6ff;
--admin: #ff5555;
--role-alpha: #c39bff;
--role-beta: #62d2a2;
--role-banned: #6a6a6e;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 13px; line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
body { padding: 40px 32px 120px; }
a, .btn, .ic, .uname, .act, .notif-item, .sb-btn, .formatting i { transition: all 0.26s cubic-bezier(.22,1,.36,1); }
a { color: inherit; text-decoration: none; cursor: pointer; }
a.u:hover { color: var(--ink); }
textarea::-webkit-scrollbar { width: 8px; }
textarea::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
textarea::-webkit-scrollbar-track { background: var(--page); }
.wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.variant { background: var(--paper); border: 1px solid var(--line); position: relative; color: var(--ink); }
.variant > .label { display: none; }
.lnk { font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--ink-3); padding-bottom: 1px; }
.lnk:hover { color: var(--accent); border-color: var(--accent); }
.lnk.muted { color: var(--ink-3); border-color: var(--ink-4); }
.btn {
font-size: 13px; font-weight: 600; color: var(--ink);
background: transparent; border: 1px solid var(--line);
padding: 8px 14px; cursor: pointer; font-family: inherit;
outline: none; display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.wordmark { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.wordmark .on { color: var(--accent-ink); }
.nav { display: flex; gap: 22px; align-items: center; font-size: 13px; color: var(--ink-2); }
.nav a { padding: 2px 0; position: relative; cursor: pointer; transition: color .18s ease, text-shadow .18s ease; }
.nav a:hover { color: #ffffff; }
.nav a.active { color: #ffffff; font-weight: 600; }
.nav a.hidden-after { display: none; }
.auth-req, .guest-req { display: flex; gap: 22px; align-items: center; }
.nav .bell-wrapper { position: relative; }
.nav .bell { color: var(--ink-2); font-size: 14px; position: relative; cursor: pointer; }
.nav .bell:hover { color: var(--accent-ink); }
.nav .bell .badge {
position: absolute; top: -5px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px;
background: var(--accent); border: 1.5px solid var(--paper); border-radius: 8px;
font-size: 9px; font-weight: 700; color: #0e0e10; display: flex; align-items: center; justify-content: center;
}
.nav .me { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.nav .me .av {
width: 22px; height: 22px; border: 1.5px solid var(--line); background: var(--accent); color: #0e0e10;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700;
}
.notif-popup {
position: absolute; top: 30px; right: -10px; width: 320px;
background: var(--paper); border: 1px solid var(--line);
box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 100;
display: none; flex-direction: column; cursor: default;
}
.notif-popup.show { display: flex; }
.notif-header { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--ink); }
.notif-body { max-height: 320px; overflow-y: auto; }
.notif-body::-webkit-scrollbar { width: 6px; }
.notif-body::-webkit-scrollbar-thumb { background: var(--line); }
.notif-item { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); display: flex; gap: 12px; cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--paper-2); }
.notif-item.unread { background: rgba(171, 182, 255, 0.05); }
.notif-item .n-av { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; font-size: 14px; text-transform: lowercase; }
.notif-item .n-txt { line-height: 1.5; }
.notif-item b { color: var(--ink); }
.notif-item .n-time { font-size: 11px; color: var(--ink-4); margin-top: 4px; }
.crumb {
padding: 10px 22px; border-bottom: 1px solid var(--line);
font-size: 12px; color: var(--ink-3); background: var(--paper-2); line-height: 1.6;
}
.crumb b { color: var(--ink); font-weight: 600; }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--accent-ink); }
.cats { display: grid; grid-template-columns: 1fr; }
.cat-head {
display: grid; grid-template-columns: 1fr 90px 90px 180px;
padding: 10px 22px; border-bottom: 1px solid var(--line);
font-size: 12px; color: var(--ink-3); font-weight: 600;
}
.cat {
display: grid; grid-template-columns: 1fr 90px 90px 180px;
padding: 18px 22px; border-bottom: 1px solid var(--line);
align-items: center; cursor: pointer;
}
.cat:hover { background: var(--paper-2); }
.cat:last-child { border-bottom: none; }
.cat .name { display: flex; gap: 14px; align-items: center; }
.cat .name .ic {
width: 30px; height: 30px; border: 1.5px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-size: 12px; flex: none; color: var(--ink-2);
transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cat:hover .name .ic { background: var(--accent); color: #0e0e10; border-color: var(--accent); }
.cat .name h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; text-transform: lowercase; transition: color .2s ease, text-shadow .2s ease; }
.cat:hover .name h3 { color: var(--accent-ink); }
.cat .name .d { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 400; text-transform: lowercase; }
.cat .num { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cat .last { font-size: 12px; color: var(--ink-3); }
.cat .last b { color: var(--ink-2); font-weight: 600; }
.footer {
padding: 20px 22px 22px; border-top: 1px solid var(--line);
display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px;
font-size: 12px; color: var(--ink-3); background: var(--paper-2);
}
.footer .col h5 { margin: 0 0 8px; font-size: 12px; color: var(--ink); font-weight: 600; text-transform: lowercase; }
.footer .col a { display: block; padding: 2px 0; cursor: pointer; text-transform: lowercase; }
.footer .col a:hover { color: var(--accent-ink); }
.footer .brand-col { font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.footer .brand-col .wm { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 6px; }
.footer .brand-col .wm span { color: var(--accent-ink); }
.footer .legal {
grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px;
font-size: 11px; color: var(--ink-4);
}
.gate-shell {
min-height: 560px;
display: flex; flex-direction: column;
background: var(--paper);
}
.gate-main {
flex: 1; padding: 72px 22px;
display: flex; justify-content: center; align-items: flex-start;
}
.gate-card {
width: 100%; max-width: 440px;
border: 1px solid var(--line); background: var(--paper);
padding: 28px 28px 24px;
}
.gate-card .title { font-size: 16px; font-weight: 600; margin: 0 0 4px; text-transform: lowercase; }
.gate-card .sub { font-size: 13px; color: var(--ink-3); margin: 0 0 20px; line-height: 1.65; text-transform: lowercase; }
.gate-card .divider { height: 1px; background: var(--line); margin: 6px 0 18px; }
.gate-card .row { display: flex; gap: 18px; font-size: 13px; align-items: center; text-transform: lowercase; }
.gate-card .row .or { color: var(--ink-4); }
.auth {
padding: 44px 22px 36px;
display: flex; justify-content: center;
background: var(--paper);
}
.auth .card {
width: 100%; max-width: 420px;
border: 1px solid var(--line); background: var(--paper);
padding: 26px 28px;
}
.auth .card .mark { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 18px; }
.auth .card .mark span { color: var(--accent-ink); }
.auth .card h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; text-transform: lowercase; }
.auth .card .intro { margin: 0 0 20px; font-size: 13px; color: var(--ink-3); line-height: 1.6; text-transform: lowercase; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--ink-2); font-weight: 500; text-transform: lowercase; }
.field input {
border: 1px solid var(--line);
background: var(--page); padding: 9px 10px;
font-family: inherit; font-size: 13px; color: var(--ink);
outline: none;
}
.field input:focus { border-color: var(--accent-ink); }
.field input::placeholder { color: var(--ink-4); text-transform: lowercase; }
.field .hint { font-size: 11px; color: var(--ink-4); }
.check-row {
display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink-3);
margin-bottom: 14px; line-height: 1.5; text-transform: lowercase;
}
.check-row input { width: 14px; height: 14px; margin-top: 2px; }
.auth .submit-row {
margin-top: 6px; display: flex; justify-content: space-between; align-items: center;
}
.auth .submit-row button {
font-family: inherit; font-size: 13px; font-weight: 600;
background: var(--accent); color: #0e0e10;
border: 1px solid var(--accent); padding: 9px 16px; cursor: pointer;
}
.auth .submit-row button:hover { background: transparent; color: var(--accent); }
.auth .submit-row .alt { font-size: 12px; color: var(--ink-3); }
.reg { padding: 24px 22px 32px; background: var(--paper); }
.reg .reg-wrap { max-width: 880px; margin: 0 auto; }
.reg .reg-head {
border: 1px solid var(--line); padding: 10px 14px; margin-bottom: 14px;
font-size: 13px; font-weight: 600; text-transform: lowercase;
}
.reg fieldset {
border: 1px solid var(--line); background: var(--paper);
margin: 0 0 14px; padding: 14px 18px 16px; text-transform: lowercase;
}
.reg legend {
color: var(--accent-ink); font-size: 12px; padding: 0 6px;
}
.reg .fs-row { display: flex; gap: 28px; flex-wrap: wrap; }
.reg .fs-row .fs-col { display: flex; flex-direction: column; gap: 4px; }
.reg .fs-row .fs-col label { font-size: 13px; font-weight: 700; color: var(--ink); }
.reg .fs-row .fs-col input { border: 1px solid var(--line); background: var(--page); padding: 5px 6px; font-family: inherit; font-size: 13px; color: var(--ink); outline: none; width: 180px; }
.reg .fs-row .fs-col input:focus { border-color: var(--accent-ink); }
.reg select { border: 1px solid var(--line); background: var(--page); padding: 4px 6px; font-family: inherit; font-size: 13px; color: var(--ink); outline: none; text-transform: lowercase; }
.reg select:focus { border-color: var(--accent-ink); }
.reg .opt-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: 8px; text-transform: lowercase; }
.reg .opt-row input { width: 14px; height: 14px; }
.reg .reg-submit { margin-top: 4px; }
.captcha { display: flex; }
.cf-box {
display: grid; grid-template-columns: 42px 1fr auto; align-items: center;
gap: 14px; padding: 14px 18px; min-width: 300px;
border: 1px solid var(--line); background: var(--page);
}
.cf-check { display: flex; align-items: center; justify-content: center; }
.cf-cbox { width: 22px; height: 22px; border: 1.5px solid var(--line); background: var(--paper-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.cf-label { font-size: 13px; color: var(--ink-2); text-transform: lowercase; display: flex; align-items: center; }
.cf-brand { text-align: right; }
.cf-brand .cf-logo {
display: flex; align-items: center; gap: 6px; justify-content: flex-end;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
color: var(--accent-ink);
}
.cf-brand .cf-logo i { font-size: 14px; }
.cf-brand .cf-meta { font-size: 10px; color: var(--ink-4); margin-top: 2px; text-transform: lowercase; }
.login-page { padding: 24px 22px 32px; background: var(--paper); }
.login-page .login-wrap { max-width: 720px; margin: 0 auto; }
.login-page .login-head {
border: 1px solid var(--line); padding: 10px 14px; margin-bottom: 14px;
font-size: 13px; font-weight: 600; text-transform: lowercase;
}
.login-page fieldset {
border: 1px solid var(--line); background: var(--paper);
margin: 0 0 14px; padding: 14px 18px 16px; text-transform: lowercase;
}
.login-page legend {
color: var(--accent-ink); font-size: 12px; padding: 0 6px;
}
.login-page .lp-row { display: flex; gap: 28px; flex-wrap: wrap; }
.login-page .lp-col { display: flex; flex-direction: column; gap: 4px; }
.login-page .lp-col label {
font-size: 13px; font-weight: 700; color: var(--ink);
text-decoration: none;
}
.login-page .lp-col input {
border: 1px solid var(--line); background: var(--page);
padding: 5px 6px; font-family: inherit; font-size: 13px;
color: var(--ink); outline: none; width: 200px;
}
.login-page .lp-col input:focus { border-color: var(--accent-ink); }
.login-page .lp-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.login-page .lp-opt input { width: 14px; height: 14px; }
.login-page .lp-links { margin-top: 8px; font-size: 13px; color: var(--ink-2); display: flex; gap: 18px; }
.login-page .lp-links a { color: var(--accent-ink); }
.login-page .lp-links a:hover { color: var(--ink); }
.login-page .lp-hint { font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.login-page .lp-intro { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; line-height: 1.6; }
.sb-sep { height: 1px; background: var(--line); }
.shoutbox {
border: 1px solid var(--line); background: var(--paper);
margin: 18px 22px; display: flex; flex-direction: column;
max-height: 320px; position: relative;
}
.shoutbox .sb-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.shoutbox .sb-title {
display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
color: var(--ink); text-transform: lowercase;
}
.shoutbox .sb-title i { font-size: 14px; }
.shoutbox .sb-body {
flex: 1; overflow-y: auto; padding: 8px 14px; font-size: 15px; color: var(--ink-2);
line-height: 1.65; min-height: 180px; scroll-behavior: smooth;
}
.shoutbox .sb-body::-webkit-scrollbar { width: 8px; }
.shoutbox .sb-body::-webkit-scrollbar-thumb { background: var(--line); }
.shoutbox .sb-sys {
color: var(--ink-4); font-style: italic; font-size: 11px;
padding: 4px 0; border-bottom: 1px dashed var(--line); margin-bottom: 6px;
}
.shoutbox .sb-msg { display: flex; gap: 8px; align-items: flex-start; padding: 3px 24px 3px 0; border-left: 2px solid transparent; position: relative; }
.shoutbox .sb-msg.ping-highlight { background: rgba(171, 182, 255, 0.05); border-left-color: var(--accent); }
.shoutbox .sb-msg.sb-console { color: var(--ink); }
.shoutbox .sb-msg.sb-console .sb-av i { font-size: 12px; }
.shoutbox .sb-msg .sb-del {
position: absolute; top: 4px; right: 0; width: 20px; height: 20px; flex: none;
background: transparent; border: none; color: var(--ink-4); cursor: pointer;
display: flex; align-items: center; justify-content: center; font-size: 12px;
opacity: 0; transition: opacity .18s ease, color .18s ease; padding: 0;
}
.shoutbox .sb-msg:hover .sb-del { opacity: 1; }
.shoutbox .sb-msg .sb-del:hover { color: var(--admin); }
.shoutbox .sb-msg .sb-av {
width: 24px; height: 24px; flex: none; background: var(--paper-2);
border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: lowercase; margin-top: 1px;
}
.shoutbox .sb-msg .sb-u { font-weight: 700; cursor: pointer; }
.shoutbox .sb-msg .sb-t { color: var(--ink-4); font-size: 12px; margin-left: 4px; }
.shoutbox .sb-input {
display: block; padding: 10px 14px; border-top: 1px solid var(--line); position: relative;
}
.shoutbox .sb-input input { min-height: 42px !important; padding: 11px 13px !important; }
.shoutbox .sb-input input {
border: 1px solid var(--line); background: var(--page); color: var(--ink);
padding: 8px 10px; font-family: inherit; font-size: 15px; outline: none;
}
.shoutbox .sb-input input::placeholder { color: var(--ink-4); text-transform: lowercase; }
.shoutbox .sb-input input:focus { border-color: var(--accent-ink); }
.shoutbox .sb-btn {
border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer;
font-size: 14px; transition: all 0.2s; padding: 0; outline: none;
}
.shoutbox .sb-btn:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.emoji-picker, .mention-list {
position: absolute; top: 0; left: 0;
background: var(--paper-2); border: 1px solid var(--line);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 100;
}
.emoji-picker { width: 372px; min-height: 240px; max-height: min(420px, calc(100vh - 24px)); display: none; flex-direction: column; padding: 0; overflow: hidden; }
.emoji-picker.show { display: flex; }
.ep-search { padding: 10px; border-bottom: 1px solid var(--line); flex: none; }
.ep-search input { width: 100%; box-sizing: border-box; background: var(--page); border: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: 13px; padding: 6px 8px; outline: none; border-radius: 4px; }
.ep-search input:focus { border-color: var(--accent-ink); }
.ep-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); padding: 0 4px; flex: none; overflow-x: auto; }
.ep-tabs button { background: none; border: none; color: var(--ink-3); font-size: 13px; cursor: pointer; padding: 8px 10px; border-bottom: 2px solid transparent; font-family: inherit; flex: none; line-height: 1; min-width: 36px; }
.ep-tabs button:hover { color: var(--ink); }
.ep-tabs button.active { color: var(--ink); border-bottom-color: var(--accent-ink); }
.ep-grid { overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(8, 36px); gap: 4px; min-height: 240px; flex: 1; justify-content: center; align-content: start; }
.ep-grid span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; border-radius: 4px; transition: background 0.1s; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.ep-grid span:hover { background: var(--line); }
.ep-grid span img.emoji { width: 24px; height: 24px; pointer-events: none; }
img.emoji { height: 1.15em; width: 1.15em; vertical-align: -0.2em; display: inline-block; margin: 0 1px; }
.ep-empty { padding: 24px; text-align: center; color: var(--ink-4); font-size: 12px; grid-column: 1/-1; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); padding: 10px 18px; font-size: 13px; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 9999; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-stack { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 9999; pointer-events: none; max-width: calc(100vw - 24px); }
.toast-stack .toast { position: static; left: auto; bottom: auto; transform: translateY(10px); margin: 0; max-width: 100%; }
.toast-stack .toast.show { transform: translateY(0); }
.toast i { color: var(--accent-ink); margin-right: 8px; }
.mention-list {
left: 14px; right: auto; width: 200px; max-height: 140px; overflow-y: auto;
display: none; flex-direction: column; padding: 4px 0;
}
.mention-list.show { display: flex; }
.mention-list::-webkit-scrollbar { width: 6px; }
.mention-list::-webkit-scrollbar-thumb { background: var(--line); }
.mention-item {
padding: 6px 12px; font-size: 13px; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.mention-item:hover, .mention-item.active { background: var(--paper-2); color: var(--ink); }
.role-admin { color: var(--admin) !important; font-weight: 600; }
.role-alpha { color: var(--role-alpha) !important; font-weight: 600; }
.role-beta { color: var(--role-beta) !important; font-weight: 600; }
.role-sub { color: var(--accent-ink) !important; font-weight: 600; }
.role-user { color: var(--ink) !important; font-weight: 600; }
.role-banned { color: var(--role-banned) !important; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px; }
.content-page { padding: 30px 28px 40px; max-width: 880px; margin: 0 auto; text-transform: lowercase; }
.content-page h1 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.content-page .lede { margin: 0 0 22px; font-size: 14px; color: var(--ink-2); line-height: 1.65; max-width: 620px; }
.content-page h2 { margin: 26px 0 10px; font-size: 16px; font-weight: 600; }
.content-page p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.75; }
.content-page ul { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); font-size: 13px; line-height: 1.8; }
.staff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
.staff-card {
border: 1px solid var(--line); padding: 14px; background: var(--paper-2);
display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center;
}
.staff-card .sa {
width: 48px; height: 48px; border: 1.5px solid var(--line); background: var(--accent);
color: #0e0e10; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 18px; text-transform: lowercase;
}
.staff-card .sn { font-size: 14px; font-weight: 600; color: var(--admin); }
.staff-card .sr { font-size: 12px; color: var(--ink-3); margin: 2px 0; }
.staff-card .sb { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.invites-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 22px; }
.invites-stats .is {
border: 1px solid var(--line); padding: 14px 16px; background: var(--paper-2);
}
.invites-stats .is .n { font-size: 22px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.invites-stats .is .l { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.invite-table { border: 1px solid var(--line); margin-top: 10px; }
.invite-table .row {
display: grid; grid-template-columns: 1fr 120px 120px 100px;
padding: 10px 14px; border-bottom: 1px solid var(--line);
font-size: 12.5px; color: var(--ink-2);
}
.invite-table .row.head { color: var(--ink-3); font-weight: 600; background: var(--paper-2); }
.invite-table .row:last-child { border-bottom: none; }
.invite-table code { font-family: ui-monospace, Menlo, monospace; color: var(--accent-ink); letter-spacing: 0.05em; text-transform: lowercase; }
.invite-table .pill { font-size: 11px; padding: 1px 8px; border: 1px solid var(--line); color: var(--ink-2); display: inline-block; }
.invite-table .pill.used { color: var(--ink-4); }
.invite-table .pill.open { color: var(--accent-ink); border-color: var(--accent-ink); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.contact-card {
border: 1px solid var(--line); padding: 16px; background: var(--paper-2);
}
.contact-card h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.contact-card p { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.contact-card .k { font-family: ui-monospace, Menlo, monospace; color: var(--ink); font-size: 12.5px; text-transform: lowercase; }
.sub-panel {
border: 1px solid var(--line); background: var(--paper-2);
padding: 24px 28px; max-width: 600px; margin: 0 auto;
}
.sub-form .field { margin-bottom: 20px; }
.sub-form select {
width: 100%; border: 1px solid var(--line); background: var(--page);
padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--ink);
outline: none; cursor: pointer; text-transform: lowercase;
}
.sub-form select:focus { border-color: var(--accent-ink); }
.loader-preview {
position: relative; height: 380px; background: var(--paper);
display: flex; flex-direction: column; align-items: center; justify-content: center;
overflow: hidden;
}
.loader-mark {
font-size: 44px; font-weight: 600; letter-spacing: -0.02em;
color: var(--ink); position: relative; z-index: 2;
}
.loader-mark span { color: var(--accent-ink); }
.loader-rings {
margin-top: 26px; width: 120px; height: 40px; position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.loader-rings .bar {
width: 3px; background: var(--accent-ink); opacity: 0.4;
animation: loader-bar 1.4s ease-in-out infinite;
}
.loader-rings .bar:nth-child(1) { height: 20%; animation-delay: 0s; }
.loader-rings .bar:nth-child(2) { height: 40%; animation-delay: 0.08s; }
.loader-rings .bar:nth-child(3) { height: 65%; animation-delay: 0.16s; }
.loader-rings .bar:nth-child(4) { height: 85%; animation-delay: 0.24s; }
.loader-rings .bar:nth-child(5) { height: 100%; animation-delay: 0.32s; }
.loader-rings .bar:nth-child(6) { height: 85%; animation-delay: 0.4s; }
.loader-rings .bar:nth-child(7) { height: 65%; animation-delay: 0.48s; }
.loader-rings .bar:nth-child(8) { height: 40%; animation-delay: 0.56s; }
.loader-rings .bar:nth-child(9) { height: 20%; animation-delay: 0.64s; }
@keyframes loader-bar {
0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
50% { transform: scaleY(1); opacity: 1; }
}
.thread-crumb { padding: 10px 22px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); background: var(--paper-2); text-transform: lowercase; }
.thread-crumb a { color: var(--ink-2); cursor: pointer; }
.thread-crumb a:hover { color: var(--accent-ink); }
.thread-head { padding: 22px; border-bottom: 1px solid var(--line); text-transform: lowercase; }
.thread-head .category { font-size: 12px; color: var(--ink-3); }
.thread-head .category a { color: var(--accent-ink); cursor: pointer; }
.thread-head h2 { margin: 4px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.thread-head .meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 18px; flex-wrap: wrap; }
.thread-head .meta b { color: var(--ink-2); font-weight: 600; }
.thread-head .meta .act { color: var(--ink-2); cursor: pointer; }
.thread-head .meta .act:hover { color: var(--accent-ink); }
.post { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; text-transform: lowercase; }
.post.ping-highlight { background: rgba(171, 182, 255, 0.03); border-left-color: var(--accent); }
.post:last-of-type { border-bottom: 1px solid var(--line); }
.post .who {
padding: 18px 20px; border-right: 1px solid var(--line);
background: var(--paper-2);
display: flex; flex-direction: column; gap: 6px;
}
.post .who .av {
width: 44px; height: 44px; border: 1.5px solid var(--line); background: var(--accent); color: #0e0e10;
display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; text-transform: lowercase;
}
.post .who .uname { font-size: 13px; font-weight: 600; cursor: pointer; }
.post .who .uname:hover { color: var(--accent-ink); }
.post .who .role { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.post .who .stats { font-size: 11px; color: var(--ink-4); margin-top: 10px; line-height: 1.6; }
.post .body { padding: 18px 22px; }
.post .body .time { font-size: 12px; color: var(--ink-4); margin-bottom: 10px; }
.post .body p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.post .body .quote {
border-left: 2px solid var(--accent); padding: 8px 12px; margin: 10px 0;
background: var(--paper-2); font-size: 13px; color: var(--ink-3);
}
.post .body .quote .q-from { font-weight: 600; color: var(--ink-2); font-size: 12px; margin-bottom: 4px; }
.post .body .actions { margin-top: 12px; display: flex; gap: 18px; font-size: 12px; color: var(--ink-3); }
.post .body .actions a { padding: 2px 0; cursor: pointer; transition: color 0.15s; }
.post .body .actions a:hover { color: var(--accent-ink); }
.post .body .actions i { margin-right: 5px; }
.reply-box { padding: 20px 22px; background: var(--paper-2); border-bottom: 1px solid var(--line); position: relative; text-transform: lowercase; }
.reply-box .lbl { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
.reply-box textarea {
width: 100%; min-height: 90px; resize: vertical;
border: 1px solid var(--line); background: var(--page);
padding: 12px; font-family: inherit; font-size: 13px; color: var(--ink);
outline: none; display: block; margin-bottom: 8px;
}
.reply-box textarea:focus { border-color: var(--accent-ink); }
.reply-box .reply-row { display: flex; justify-content: space-between; align-items: center; margin-top: 0; }
.reply-box .formatting { display: flex; gap: 14px; font-size: 13px; color: var(--ink-3); }
.reply-box .formatting i { cursor: pointer; }
.reply-box .formatting i:hover { color: var(--accent-ink); }
.reply-box.reply-locked { cursor: not-allowed; opacity: 0.55; }
.reply-box.reply-locked .unified-input * { pointer-events: none; }
.reply-box.reply-locked textarea { background: var(--paper); color: var(--ink-3); resize: none; }
.reply-box .lock-note { display: none; font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.reply-box.reply-locked .lock-note { display: flex; align-items: center; gap: 6px; }
.legal-page { padding: 34px 40px 46px; max-width: none; margin: 0; text-transform: lowercase; position: relative; }
.legal-page > h1, .legal-page > .updated, .legal-page > h3, .legal-page > p, .legal-page > ul, .legal-page > .divider { max-width: 820px; }
.legal-page h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.legal-page .updated { font-size: 12px; color: var(--ink-4); margin-bottom: 20px; }
.legal-page h3 { margin: 22px 0 6px; font-size: 14px; font-weight: 600; }
.legal-page p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.75; }
.legal-page ul { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); font-size: 13px; line-height: 1.75; }
.legal-page ul li { margin-bottom: 4px; }
.legal-page .divider { height: 1px; background: var(--line); margin: 24px 0; }
.legal-page .toc {
border: 1px solid var(--line); padding: 14px 16px; margin: 0;
background: var(--paper-2); font-size: 13px;
position: absolute; top: 34px; right: 40px; width: 240px;
}
@media (max-width: 1040px) {
.legal-page { padding: 30px 22px 40px; }
.legal-page > * { max-width: none; }
.legal-page .toc { position: static; width: auto; margin: 20px 0 24px; }
}
.legal-page .toc a:hover { color: var(--accent); }
.legal-page .toc h5 { margin: 0 0 6px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.legal-page .toc a { display: block; padding: 2px 0; color: var(--ink-2); text-decoration: none; }
.legal-page .toc a:hover { color: var(--accent-ink); }
.profile-head { padding: 32px 22px; background: var(--paper-2); border-bottom: 1px solid var(--line); display: flex; gap: 24px; align-items: flex-start; text-transform: lowercase; }
.profile-head .p-av { width: 96px; height: 96px; border: 2px solid var(--line); background: var(--accent); color: #0e0e10; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 36px; text-transform: lowercase; }
.profile-info h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.profile-info .role { font-size: 13px; color: var(--admin); font-weight: 600; margin-bottom: 4px; }
.profile-info .profile-loc { font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; text-transform: lowercase; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.profile-stats { display: flex; gap: 24px; font-size: 12px; color: var(--ink-3); }
.profile-stats div { display: flex; flex-direction: column; gap: 2px; }
.profile-stats b { color: var(--ink); font-size: 14px; }
.profile-body { padding: 32px 22px; display: grid; grid-template-columns: 1fr 300px; gap: 32px; text-transform: lowercase; }
.profile-body h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.profile-body .act-item { margin-bottom: 16px; border-left: 2px solid transparent; padding-left: 6px; margin-left: -8px;}
.profile-body .act-item.ping-highlight { background: rgba(171, 182, 255, 0.05); border-left-color: var(--accent); }
.profile-body .act-item .time { font-size: 11px; color: var(--ink-4); margin-bottom: 4px; }
.profile-body .act-item .txt { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.profile-body .act-item .txt a { color: var(--accent-ink); cursor: pointer; }
.profile-side .s-item { margin-bottom: 18px; font-size: 13px; }
.profile-side .s-item .lbl { color: var(--ink-3); font-size: 12px; margin-bottom: 4px; }
.profile-side .s-item .val { color: var(--ink); }
.settings-layout { display: flex; align-items: flex-start; gap: 32px; padding: 32px 22px; text-transform: lowercase; }
.settings-nav { width: 220px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.settings-nav .sn-group { font-size: 11px; font-weight: 700; color: var(--accent-ink); margin: 12px 0 6px 12px; }
.settings-nav .sn-link { font-size: 13px; color: var(--ink-2); padding: 8px 12px; cursor: pointer; border-left: 2px solid transparent; transition: all 0.2s ease; }
.settings-nav .sn-link:hover { color: var(--ink); background: var(--paper-2); }
.settings-nav .sn-link.active { color: var(--ink); background: var(--paper-2); border-left-color: var(--accent-ink); }
.settings-nav .sn-link.logout { margin-top: 12px; border: 1px solid var(--line); border-radius: 4px; text-align: center; border-left: 1px solid var(--line); padding: 6px 0;}
.settings-nav .sn-link.logout:hover { background: var(--line-2); color: var(--admin); }
.settings-content { flex: 1; background: var(--paper-2); border: 1px solid var(--line); padding: 24px; }
.settings-content h2 { margin: 0 0 20px; font-size: 18px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.s-form-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; margin-bottom: 24px; font-size: 13px; }
.s-form-row .s-lbl { color: var(--ink-3); padding-top: 6px; text-align: right; }
.s-form-row .s-val { display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.s-form-row .s-val input[type="text"], .s-form-row .s-val input[type="email"], .s-form-row .s-val input[type="password"] {
background: var(--page); border: 1px solid var(--line); color: var(--ink); padding: 8px 10px; font-family: inherit; font-size: 13px; outline: none; max-width: 320px; width: 100%; transition: border-color 0.2s;
}
.s-form-row .s-val input:focus { border-color: var(--accent-ink); }
.s-form-row .s-val .opt-label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.s-form-row .s-val .opt-label input { margin-top: 3px; }
.s-form-row .s-val .opt-hint { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.s-av-preview { width: 80px; height: 80px; background: var(--accent-ink); border-radius: 8px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #0e0e10; text-transform: lowercase; }
.page { display: none; }
.page.active { display: block; }
.switch {
position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 60;
background: var(--paper); border: 1px solid var(--line);
padding: 4px; display: flex; gap: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
flex-wrap: wrap; text-transform: lowercase;
}
.switch button {
font-family: inherit; font-size: 12px;
border: none; background: transparent; color: var(--ink-3);
padding: 6px 12px; cursor: pointer; font-weight: 600;
transition: all 0.2s ease;
}
.switch button.active { background: var(--accent); color: #0e0e10; }
.switch button:not(.active):hover { color: var(--ink); }
.tweaks {
position: fixed; right: 16px; top: 16px; z-index: 50;
background: var(--paper); border: 1px solid var(--line); padding: 10px 12px;
min-width: 220px; max-width: 260px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-transform: lowercase;
}
.tweaks.hidden { display: none; }
.tweaks h4 { margin: 0 0 8px; font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.06em; }
.tweaks .t-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0; }
.tweaks label { font-size: 12px; font-weight: 500; }
.tweaks .sw {
width: 30px; height: 17px; border: 1px solid var(--line);
position: relative; cursor: pointer; background: var(--paper-2); transition: all 0.2s ease;
}
.tweaks .sw::after {
content:""; position: absolute; top: 1px; left: 1px; width: 13px; height: 13px;
background: var(--ink-3); transition: transform .15s ease;
}
.tweaks .sw.on { background: var(--accent); border-color: var(--accent); }
.tweaks .sw.on::after { transform: translateX(13px); background: #0e0e10; }
.tweaks .hint { font-size: 10px; color: var(--ink-3); margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; line-height: 1.45; }
.tweaks .seg {
display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line);
}
.tweaks .seg button {
font-family: inherit; font-size: 10px;
border: none; background: transparent; color: var(--ink-3);
padding: 5px 2px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;
border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
text-transform: lowercase;
}
.tweaks .seg button:nth-child(3n) { border-right: none; }
.tweaks .seg button.on { background: var(--accent); color: #0e0e10; }
.user-card {
position: fixed; z-index: 9999; pointer-events: none;
width: 360px; background: #1a1a1c; border: 1px solid #2a2a2c;
box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
color: var(--ink); font-size: 12.5px;
opacity: 0; transform: translateY(-4px);
transition: opacity .14s ease, transform .14s ease;
}
.user-card.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.user-card .uc-top {
display: grid; grid-template-columns: 64px 1fr; gap: 14px;
padding: 14px 16px 12px;
}
.user-card .uc-av {
width: 64px; height: 64px; border-radius: 50%;
background: var(--paper-2); border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 700; color: var(--ink-2); overflow: hidden;
background-size: cover; background-position: center;
}
.user-card .uc-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.user-card .uc-name.role-admin { color: var(--admin); }
.user-card .uc-name.role-sub { color: var(--accent-ink); }
.user-card .uc-name.role-user { color: var(--ink); }
.user-card .uc-rank { font-size: 12px; color: var(--ink-3); margin-top: 2px; text-transform: lowercase; }
.user-card .uc-meta { margin-top: 6px; font-size: 12px; color: var(--ink-3); line-height: 1.55; text-transform: lowercase; }
.user-card .uc-meta b { color: var(--ink-2); font-weight: 500; }
.user-card .uc-id { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ink-4); margin-top: 4px; letter-spacing: 0.04em; }
.user-card .uc-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: rgba(0,0,0,0.18);
}
.user-card .uc-stat { padding: 10px 8px; text-align: center; border-right: 1px solid var(--line); }
.user-card .uc-stat:last-child { border-right: none; }
.user-card .uc-stat .l { font-size: 10.5px; color: var(--ink-4); text-transform: lowercase; letter-spacing: 0.02em; }
.user-card .uc-stat .v { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.user-card .uc-actions {
display: flex; gap: 8px; padding: 10px 12px;
}
.user-card .uc-btn {
font-size: 12px; padding: 6px 10px; border: 1px solid var(--line);
background: transparent; color: var(--ink-2); cursor: pointer; font-family: inherit;
text-transform: lowercase;
}
.user-card .uc-btn:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.user-card .uc-btn.primary { color: var(--ink); border-color: var(--ink-3); }
.user-card .uc-arrow {
position: absolute; left: 50%; transform: translateX(-50%);
width: 0; height: 0;
}
.user-card.below .uc-arrow {
top: -8px;
border-left: 8px solid transparent; border-right: 8px solid transparent;
border-bottom: 8px solid #2a2a2c;
}
.user-card.above .uc-arrow {
bottom: -8px;
border-left: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid #2a2a2c;
}
.uname { cursor: pointer; }
*, *::before, *::after { transition-timing-function: cubic-bezier(.22,1,.36,1); }
.nav a, .me, .bell, .badge, .lnk, .sn-link, .uc-btn, .pill, .post .body .actions a, .footer .col a, .toc a, .lp-links a, .formatting i, .post .who .av, .nav .me .av, .cat .name .ic, .staff-card, .invite-table .row, .uc-stat, .ic-btn, .sb-btn, .cf-cbox, .switch button, .qchip, .price-card, .pay-card, .tr { transition: color .26s cubic-bezier(.22,1,.36,1), background-color .26s cubic-bezier(.22,1,.36,1), border-color .26s cubic-bezier(.22,1,.36,1), transform .26s cubic-bezier(.22,1,.36,1), opacity .26s cubic-bezier(.22,1,.36,1); }
.field input, .field textarea, textarea, select, input[type="text"], input[type="email"], input[type="password"], .reply-box textarea { transition: border-color .2s ease; }
.reply-box .formatting i:hover { transform: translateY(-1px); }
.invite-table .row:not(.head):hover { background: var(--paper-2); }
.staff-card:hover { border-color: rgba(171,182,255,0.45); }
.field input:focus, .field textarea:focus, textarea:focus, select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { border-color: var(--accent-ink) !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-text-fill-color: var(--ink) !important;
-webkit-box-shadow: 0 0 0 1000px var(--page) inset !important;
caret-color: var(--ink);
transition: background-color 99999s ease-out 0s;
}
.uname:hover, .sb-u:hover, [data-user]:hover, b.role-sub:hover, b.role-user:hover, .uname.role-sub:hover, .uname.role-user:hover { filter: brightness(1.18); }
b.role-admin:hover, .uname.role-admin:hover, .sb-u.role-admin:hover { filter: brightness(1.18); }
.crumb .premium-line { color: var(--accent-ink); margin-top: 4px; }
.user-card .uc-stats { grid-template-columns: repeat(3, 1fr) !important; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 6px; }
.price-card { border: 1px solid var(--line); background: var(--paper); padding: 18px 16px 16px; cursor: pointer; position: relative; text-transform: lowercase; }
.price-card:hover { border-color: var(--accent-ink); transform: translateY(-1px); }
.price-card.selected { border-color: var(--accent-ink); background: linear-gradient(180deg, rgba(171,182,255,0.06), rgba(171,182,255,0)); }
.price-card .pc-dur { font-size: 12px; color: var(--ink-3); }
.price-card .pc-price { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.price-card .pc-per { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.price-card .pc-tag { position: absolute; top: -1px; right: -1px; background: var(--accent); color: #0e0e10; font-size: 10px; font-weight: 700; padding: 3px 8px; letter-spacing: 0.06em; }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.pay-card { border: 1px solid var(--line); padding: 12px 14px; background: var(--paper); display: flex; gap: 10px; align-items: center; cursor: pointer; }
.pay-card:hover { border-color: var(--accent-ink); }
.pay-card.selected { border-color: var(--accent-ink); }
.pay-card i { font-size: 18px; color: var(--accent-ink); width: 28px; text-align: center; }
.pay-card .pay-meta { font-size: 11px; color: var(--ink-4); }
.feature-list { list-style: none; padding: 0; margin: 16px 0 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; font-size: 13px; color: var(--ink-2); }
.feature-list li { display: flex; gap: 8px; align-items: flex-start; }
.feature-list li::before { content: ""; color: var(--accent-ink); font-weight: 700; }
.checkout-summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 16px; border: 1px solid var(--line); background: var(--page); margin: 16px 0 14px; font-size: 13px; color: var(--ink-2); }
.checkout-summary .total { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.checkout-summary .label-total { font-weight: 700; color: var(--ink); }
.search-shell { border: 1px solid var(--line); background: var(--paper-2); margin-top: 14px; }
.search-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search-bar i.fa-magnifying-glass { color: var(--ink-3); font-size: 16px; }
.search-bar input.q { background: transparent; border: none; color: var(--ink); font-family: inherit; font-size: 16px; outline: none; padding: 8px 0; width: 100%; }
.search-bar input.q::placeholder { color: var(--ink-4); }
.search-bar .search-go { background: var(--accent); color: #0e0e10; border: 1px solid var(--accent); padding: 8px 16px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; }
.search-bar .search-go:hover { background: var(--accent); filter: brightness(1.1); }
.search-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search-filters .sf { display: flex; flex-direction: column; gap: 4px; }
.search-filters label { font-size: 11px; color: var(--ink-3); text-transform: lowercase; letter-spacing: 0.06em; font-weight: 600; }
.search-filters input, .search-filters select { background: var(--page); border: 1px solid var(--line); color: var(--ink); padding: 8px 10px; font-family: inherit; font-size: 13px; outline: none; }
.member-ac { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: var(--paper); border: 1px solid var(--line); border-top: none; max-height: 240px; overflow-y: auto; display: none; }
.member-ac.show { display: block; }
.member-ac .ac-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; }
.member-ac .ac-row:hover { background: var(--paper-2); }
.member-ac .ac-av { width: 24px; height: 24px; flex: none; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.member-ac .ac-av img { width: 100%; height: 100%; object-fit: cover; }
.quick-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.qchip { font-size: 12px; padding: 5px 12px; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; background: var(--paper); }
.qchip:hover, .qchip.on { border-color: var(--accent-ink); color: var(--accent-ink); }
.search-results { padding: 6px 16px 16px; }
.sr-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sr-row:last-child { border-bottom: none; }
.sr-row:hover .sr-title { color: var(--accent-ink); }
.sr-title { font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sr-meta { font-size: 11.5px; color: var(--ink-3); }
.sr-meta b { color: var(--ink-2); font-weight: 500; }
.sr-snippet { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.sr-snippet mark { background: rgba(171,182,255,0.18); color: var(--accent-ink); padding: 0 2px; }
.ticket-tabs { display: flex; border-bottom: 1px solid var(--line); margin-top: 14px; gap: 0; }
.ticket-tabs button { background: none; border: none; color: var(--ink-3); padding: 10px 14px; font-family: inherit; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; text-transform: lowercase; font-weight: 600; }
.ticket-tabs button.on { color: var(--ink); border-bottom-color: var(--accent-ink); }
.ticket-tabs button:hover { color: var(--ink); }
.ticket-tabs .admin-toggle { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); text-transform: lowercase; padding-right: 4px; }
.admin-sw { width: 36px; height: 20px; border: 1px solid var(--line); position: relative; cursor: pointer; background: var(--paper); transition: all .26s; }
.admin-sw::after { content: ""; position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; background: var(--ink-3); transition: transform .26s, background .26s; }
.admin-sw.on { background: var(--admin); border-color: var(--admin); }
.admin-sw.on::after { transform: translateX(16px); background: #0e0e10; }
.ticket-toolbar { display: flex; gap: 10px; padding: 12px 0; align-items: center; flex-wrap: wrap; }
.ticket-search { flex: 1; min-width: 200px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 6px 10px; background: var(--paper-2); }
.ticket-search input { background: transparent; border: none; color: var(--ink); font-family: inherit; font-size: 13px; outline: none; width: 100%; }
.ticket-search:focus-within { border-color: var(--accent-ink); }
.ticket-search i { color: var(--ink-3); }
.ticket-table { border: 1px solid var(--line); }
.tr { display: grid; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; gap: 12px; font-size: 12.5px; color: var(--ink-2); }
.tr.head { background: var(--paper-2); color: var(--ink-3); font-weight: 600; cursor: default; text-transform: lowercase; letter-spacing: 0.05em; font-size: 11px; }
.tr.head:hover { background: var(--paper-2); box-shadow: none; }
.tr:not(.head):hover { background: var(--paper-2); }
.tr.urgent:not(.head):hover { box-shadow: inset 2px 0 0 var(--admin); }
.ticket-table .tr { grid-template-columns: 80px 1fr 110px 90px 90px 100px; }
.ticket-table.admin .tr { grid-template-columns: 80px 1fr 110px 110px 90px 90px 100px; }
.tr code { font-family: ui-monospace, Menlo, monospace; color: var(--accent-ink); font-size: 11.5px; letter-spacing: 0.04em; }
.tr .tt-subj { color: var(--ink); font-weight: 600; }
.tr .tt-sub { font-size: 11px; color: var(--ink-4); margin-top: 2px; font-weight: 400; }
.tr:last-child { border-bottom: none; }
.pill-st { font-size: 10.5px; padding: 2px 8px; border: 1px solid var(--line); display: inline-block; text-transform: lowercase; letter-spacing: 0.05em; font-weight: 600; }
.pill-st.open { color: var(--accent-ink); border-color: var(--accent-ink); }
.pill-st.pending { color: #f5c97b; border-color: #f5c97b; }
.pill-st.closed { color: var(--ink-4); border-color: var(--ink-4); }
.pill-st.urgent { color: var(--admin); border-color: var(--admin); }
.pill-pri { font-size: 10.5px; padding: 2px 8px; border: 1px solid var(--line); display: inline-block; }
.pill-pri.high { color: var(--admin); border-color: var(--admin); }
.pill-pri.med { color: #f5c97b; border-color: #f5c97b; }
.pill-pri.low { color: var(--ink-3); }
.ticket-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.ts-card { border: 1px solid var(--line); padding: 12px 14px; background: var(--paper-2); }
.ts-card .n { font-size: 22px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.ts-card.adm .n { color: var(--admin); }
.ts-card .l { font-size: 11px; color: var(--ink-3); margin-top: 2px; text-transform: lowercase; letter-spacing: 0.05em; }
.new-ticket-form { border: 1px solid var(--line); background: var(--paper-2); padding: 18px; margin-top: 4px; display: none; }
.new-ticket-form.show { display: block; }
.new-ticket-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.danger-btn { background: transparent; border: 1px solid var(--admin); color: var(--admin); padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-transform: lowercase; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .24s cubic-bezier(.22,1,.36,1); }
.danger-btn:hover { color: #fff; border-color: var(--admin); }
.ic-btn { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-transform: lowercase; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .24s cubic-bezier(.22,1,.36,1); }
.ic-btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.toggle-row .pretty-sw { width: 36px; height: 20px; border: 1px solid var(--line); position: relative; cursor: pointer; background: var(--paper); transition: all .26s; flex: none; }
.toggle-row .pretty-sw::after { content: ""; position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; background: var(--ink-3); transition: transform .26s, background .26s; }
.toggle-row .pretty-sw.on { background: var(--accent); border-color: var(--accent); }
.toggle-row .pretty-sw.on::after { transform: translateX(16px); background: #0e0e10; }
.current-sub { border: 1px solid var(--line); background: var(--paper); margin-top: 18px; }
.current-sub .cs-row { display: grid; grid-template-columns: 160px 1fr; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.current-sub .cs-row:last-child { border-bottom: none; }
.current-sub .cs-lbl { color: var(--ink-3); text-transform: lowercase; font-size: 12px; letter-spacing: 0.02em; }
.current-sub .cs-val { color: var(--ink); }
.current-sub .cs-accent { color: var(--accent-ink); }
.current-sub .cs-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }
.current-sub .mono { font-family: ui-monospace, Menlo, monospace; color: var(--ink-2); letter-spacing: 0.04em; }
.invite-toolbar { display: flex; gap: 10px; margin: 14px 0 4px; }
.invite-table .row { grid-template-columns: 1.4fr 110px 110px 80px 1fr !important; align-items: center; }
.invite-table .inv-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0.4; transition: opacity .2s; }
.invite-table .row:hover .inv-actions { opacity: 1; }
.inv-act { background: transparent; border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; font-family: inherit; padding: 3px 8px; cursor: pointer; text-transform: lowercase; transition: all .22s cubic-bezier(.22,1,.36,1); }
.inv-act:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.inv-act.danger:hover { color: var(--admin); border-color: var(--admin); }
.inv-meta { font-size: 11px; color: var(--ink-4); }
.cmb-wrap { position: relative; display: inline-flex; max-width: 320px; width: 100%; }
.cmb-wrap::after {
content: ""; position: absolute; right: 14px; top: 50%; pointer-events: none;
width: 6px; height: 6px;
border-right: 1.5px solid var(--ink-3); border-top: 1.5px solid var(--ink-3);
transform: translateY(-50%) rotate(45deg);
transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s cubic-bezier(.22,1,.36,1);
transform-origin: 50% 50%;
}
.cmb-wrap.open::after, .cmb-wrap:focus-within::after { transform: translateY(-50%) rotate(135deg); border-color: var(--accent-ink); }
select.cmb, .cmb {
-webkit-appearance: none; appearance: none;
width: 100%; background: var(--page); border: 1px solid var(--line);
color: var(--ink); padding: 9px 36px 9px 12px;
font-family: inherit; font-size: 13px; line-height: 1.3; outline: none;
cursor: pointer; text-transform: lowercase;
transition: border-color .24s cubic-bezier(.22,1,.36,1), box-shadow .24s cubic-bezier(.22,1,.36,1);
}
select.cmb:focus { border-color: var(--accent-ink); }
select.cmb:hover { border-color: var(--ink-3); }
select.cmb option { background: var(--paper-2); color: var(--ink); }
input.txt, textarea.txt {
width: 100%; max-width: 360px;
background: var(--page); border: 1px solid var(--line); color: var(--ink);
padding: 9px 12px; font-family: inherit; font-size: 13px; line-height: 1.5; outline: none;
transition: border-color .24s cubic-bezier(.22,1,.36,1), box-shadow .24s cubic-bezier(.22,1,.36,1);
}
textarea.txt { max-width: 100%; resize: vertical; min-height: 100px; }
input.txt:focus, textarea.txt:focus { border-color: var(--accent-ink); }
input.txt::placeholder, textarea.txt::placeholder { color: var(--ink-4); }
.sub-info { display: flex; flex-direction: column; gap: 8px; }
.sub-row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: baseline; font-size: 13px; }
.sub-row .sub-lbl { color: var(--ink-3); font-size: 12px; text-transform: lowercase; }
.sub-row .sub-val { color: var(--ink); }
.sub-row .sub-val.muted { color: var(--ink-3); }
.sub-row .sub-val.mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; font-size: 12.5px; }
.sub-row .sub-accent { color: var(--accent-ink); }
.sub-row .sub-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }
.sub-row.sub-total { padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.sub-row.sub-total .sub-lbl { color: var(--ink); font-weight: 700; }
.sub-row.sub-total .sub-val { color: var(--accent-ink); font-weight: 700; font-size: 14px; }
.reg-foot { margin: 8px 0 0; font-size: 11px; color: var(--ink-4); }
.reg-submit { display: flex; align-items: center; gap: 8px; }
.btn-ghost {
font-size: 13px; color: var(--ink-3); background: transparent;
border: 1px dashed var(--line); padding: 8px 14px; cursor: pointer; font-family: inherit;
text-transform: lowercase;
transition: all .24s cubic-bezier(.22,1,.36,1);
}
.btn-ghost:hover { color: var(--accent-ink); border-color: var(--accent-ink); border-style: solid; }
.inv-table { border: 1px solid var(--line); background: var(--page); }
.inv-row { display: grid; grid-template-columns: 1.6fr 100px 100px 80px 1fr; gap: 12px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.inv-row:last-child { border-bottom: 0; }
.inv-row.head { background: var(--paper-2); color: var(--ink-3); text-transform: lowercase; letter-spacing: 0.06em; font-size: 11px; }
.inv-row code { font-family: ui-monospace, Menlo, monospace; color: var(--accent-ink); font-size: 12px; letter-spacing: 0.02em; }
.inv-row .inv-issued, .inv-row .inv-by { color: var(--ink-3); }
.inv-row .inv-status { font-size: 11px; padding: 2px 8px; border: 1px solid var(--line); text-transform: lowercase; letter-spacing: 0; justify-self: start; }
.inv-row .inv-status.open { color: var(--accent-ink); border-color: rgba(171,182,255,0.5); }
.inv-row .inv-status.used { color: var(--ink-4); }
.inv-row .inv-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0.45; transition: opacity .24s; }
.inv-row:hover .inv-actions { opacity: 1; }
.inv-row:not(.head):hover { background: var(--paper-2); }
.inv-act { background: transparent; border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; font-family: inherit; padding: 3px 10px; cursor: pointer; text-transform: lowercase; transition: all .22s cubic-bezier(.22,1,.36,1); }
.inv-act:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.inv-act.danger:hover { color: var(--admin); border-color: var(--admin); }
.inv-meta { font-size: 11px; color: var(--ink-4); }
.ticket-list { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--page); }
.tk-row { display: grid; grid-template-columns: 80px 1fr 90px 90px; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: center; cursor: pointer; transition: background .24s cubic-bezier(.22,1,.36,1); }
.tk-row:last-child { border-bottom: 0; }
.tk-row:hover { background: var(--paper-2); }
.tk-row .tk-id { font-family: ui-monospace, Menlo, monospace; color: var(--accent-ink); font-size: 11.5px; }
.tk-row .tk-sub { color: var(--ink); }
.tk-row .tk-pill { font-size: 11px; padding: 3px 14px; min-width: 64px; border: 1px solid var(--line); text-transform: lowercase; letter-spacing: 0; justify-self: start; text-align: center; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; font-weight: 600; }
.tk-row .tk-pill.open { color: var(--accent-ink); border-color: rgba(171,182,255,0.5); }
.tk-row .tk-pill.closed { color: var(--ink-4); border-color: var(--line); }
.tk-row.closed-row { opacity: 0.55; }
.tk-row.closed-row:hover { opacity: 1; background: var(--paper-2); }
.tk-row.closed-row .tk-id, .tk-row.closed-row .tk-sub { color: var(--ink-3); }
.tk-row .tk-id { transition: color .2s ease; }
.tk-row .tk-sub { transition: color .2s ease; }
.tk-row .tk-time { color: var(--ink-4); font-size: 11.5px; text-align: right; }
.opt-flag { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.opt-flag input { width: 14px; height: 14px; cursor: pointer; }
.notif-popup {
display: flex !important; flex-direction: column; opacity: 0;
transform: translateY(-6px) scale(0.98); pointer-events: none;
transform-origin: top right;
transition: opacity .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1);
z-index: 100;
}
.notif-popup.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.notif-header { display: flex; justify-content: space-between; align-items: center; }
.notif-view-all { font-size: 11px; color: var(--accent-ink); text-transform: lowercase; cursor: pointer; padding: 3px 8px; border: 1px solid var(--line); transition: all .22s cubic-bezier(.22,1,.36,1); }
.notif-view-all:hover { border-color: var(--accent-ink); }
.notif-head-actions { display: flex; gap: 6px; align-items: center; }
.notif-mark-all { font-size: 11px; color: var(--ink-3); text-transform: lowercase; cursor: pointer; padding: 3px 8px; border: 1px solid var(--line); transition: all .22s cubic-bezier(.22,1,.36,1); }
.notif-mark-all:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.notif-popup .notif-item { opacity: 0; transform: translateX(8px); }
.notif-popup.show .notif-item { animation: notifPop .32s cubic-bezier(.22,1,.36,1) forwards; }
.notif-popup.show .notif-item:nth-child(1) { animation-delay: .04s; }
.notif-popup.show .notif-item:nth-child(2) { animation-delay: .10s; }
.notif-popup.show .notif-item:nth-child(3) { animation-delay: .16s; }
.notif-popup.show .notif-item:nth-child(4) { animation-delay: .22s; }
.notif-popup.show .notif-item:nth-child(5) { animation-delay: .28s; }
@keyframes notifPop { to { opacity: 1; transform: translateX(0); } }
.notif-page-list { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--page); margin: 14px 0; }
.np-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; transition: background .24s cubic-bezier(.22,1,.36,1); }
.np-item:last-child { border-bottom: 0; }
.np-item:hover { background: var(--paper-2); }
.np-item.unread { background: rgba(171,182,255,0.04); border-left: 2px solid var(--accent-ink); }
.np-item .np-av { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; text-transform: lowercase; color: var(--ink-2); }
.np-item .np-av.admin { background: var(--admin); color: #0e0e10; }
.np-item .np-av.system { background: var(--accent); color: #0e0e10; }
.np-item .np-txt { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.np-item .np-txt b { color: var(--ink); font-weight: 600; }
.np-item .np-time { font-size: 11px; color: var(--ink-4); text-align: right; white-space: nowrap; }
.notif-pager { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 12px; color: var(--ink-3); }
.notif-pager .np-info { color: var(--ink-3); }
.notif-pager .np-pages { display: flex; gap: 4px; }
.notif-pager .np-pages button { background: transparent; border: 1px solid var(--line); color: var(--ink-2); font-family: inherit; font-size: 12px; padding: 5px 10px; cursor: pointer; transition: all .22s cubic-bezier(.22,1,.36,1); }
.notif-pager .np-pages button:hover:not(:disabled) { border-color: var(--accent-ink); color: var(--accent-ink); }
.notif-pager .np-pages button.on { background: var(--accent); color: #0e0e10; border-color: var(--accent); }
.notif-pager .np-pages button:disabled { opacity: 0.3; cursor: not-allowed; }
input[type="checkbox"]:not(.raw-check) {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--ink-4); background: var(--page);
border-radius: 4px; cursor: pointer; position: relative;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color .22s cubic-bezier(.22,1,.36,1),
background-color .22s cubic-bezier(.22,1,.36,1),
box-shadow .22s cubic-bezier(.22,1,.36,1);
flex: none; vertical-align: middle; margin: 0;
}
input[type="checkbox"]:not(.raw-check)::after {
content: ""; width: 8px; height: 8px;
background: var(--accent-ink); border-radius: 2px;
transform: scale(0);
transition: transform .22s cubic-bezier(.22,1,.36,1);
}
input[type="checkbox"]:not(.raw-check):hover { border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(171,182,255,0.08); }
input[type="checkbox"]:not(.raw-check):checked { border-color: var(--accent-ink); }
input[type="checkbox"]:not(.raw-check):checked::after { transform: scale(1); }
input[type="checkbox"]:not(.raw-check):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(171,182,255,0.18); }
.input-error {
border-color: #ff7a7a !important;
box-shadow: 0 0 0 1px rgba(255,122,122,0.35) !important;
}
.field-error-msg {
color: #ff7a7a; font-size: 11px; margin-top: 4px;
display: flex; align-items: center; gap: 6px;
text-transform: lowercase;
}
.field-error-msg::before { content: "!"; display: inline-flex; align-items: center; justify-content: center;
width: 13px; height: 13px; border-radius: 50%; border: 1px solid #ff7a7a;
font-size: 9px; font-weight: 700; line-height: 1; }
.banned-shell { padding: 26px 22px 42px; background: var(--paper); display: block; }
.banned-card { max-width: none; width: auto; border: 1px solid var(--accent-ink); background: var(--paper-2); padding: 28px 32px 28px; }
.banned-card .bx { display: flex; align-items: center; gap: 12px; }
.banned-card .bx i { font-size: 26px; color: var(--accent-ink); }
.banned-card h1 { margin: 0; font-size: 20px; font-weight: 600; color: var(--accent-ink); letter-spacing: -0.01em; text-transform: lowercase; }
.banned-card .reason { margin: 18px 0 6px; font-size: 13px; color: var(--ink); line-height: 1.65; max-width: 880px; }
.banned-card .row-info { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 8px 0; font-size: 12.5px; border-top: 1px solid var(--line); max-width: 880px; }
.banned-card .row-info .lb { color: var(--ink-3); text-transform: lowercase; }
.banned-card .row-info .vl { color: var(--ink); }
.banned-card .actions { display: flex; gap: 10px; margin-top: 18px; }
.already-in { padding: 60px 22px 80px; background: var(--paper); display: flex; justify-content: center; }
.already-in .card { max-width: 460px; width: 100%; border: 1px solid var(--line); background: var(--paper); padding: 24px 28px; text-transform: lowercase; }
.already-in h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.already-in p { margin: 0 0 18px; font-size: 13px; color: var(--ink-3); line-height: 1.65; }
.already-in .who { display: flex; gap: 10px; align-items: center; padding: 14px; border: 1px solid var(--line); background: var(--paper-2); margin-bottom: 18px; }
.already-in .who .av { width: 36px; height: 36px; background: var(--accent); color: #0e0e10; display: flex; align-items: center; justify-content: center; font-weight: 700; text-transform: lowercase; }
.already-in .who .meta { font-size: 13px; color: var(--ink); }
.already-in .who .meta b { display: block; }
.already-in .who .meta span { color: var(--ink-3); font-size: 11px; }
.already-in .actions { display: flex; gap: 10px; }
.unified-input {
display: flex; flex-direction: column;
border: 1px solid var(--line); background: var(--paper);
transition: border-color .2s ease;
}
.unified-input:focus-within { border-color: var(--accent-ink); }
.unified-input textarea, .unified-input input {
border: none !important; background: transparent !important;
color: var(--ink); padding: 10px 12px 8px; font-family: inherit;
font-size: 13px; outline: none; resize: none;
min-height: 64px; box-shadow: none !important; width: 100%; display: block;
}
.unified-input .uib-bar {
display: flex; gap: 2px; padding: 2px 6px 6px;
justify-content: flex-start; align-items: center;
}
.unified-input .uib {
background: transparent; border: none; border-radius: 4px;
color: var(--ink-3); width: 30px; height: 28px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 14px; padding: 0; font-family: inherit;
transition: color .2s ease, background-color .2s ease;
}
.unified-input .uib:hover { color: var(--accent-ink); background: var(--paper-2); }
.unified-input .uib.post-btn { color: var(--accent-ink); margin-left: auto; }
.unified-input .uib.post-btn:hover { background: rgba(171,182,255,0.12); }
.members-toolbar { display: flex; gap: 10px; align-items: center; margin: 14px 0 10px; }
.members-search { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); background: var(--paper-2); }
.members-search:focus-within { border-color: var(--accent-ink); }
.members-search i { color: var(--ink-3); }
.members-search input { background: transparent; border: none; color: var(--ink); font-family: inherit; font-size: 13px; outline: none; width: 100%; }
.member-row {
display: grid; grid-template-columns: 40px 1fr auto auto; gap: 14px;
padding: 12px 14px; border-bottom: 1px solid var(--line);
align-items: center; cursor: pointer;
transition: background .2s ease;
}
.member-row:hover { background: var(--paper-2); }
.member-row:last-child { border-bottom: 0; }
.member-row .mr-av { width: 36px; height: 36px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; text-transform: lowercase; }
.member-row .mr-name { display: flex; flex-direction: column; gap: 2px; }
.member-row .mr-name .uname { font-size: 13.5px; font-weight: 600; }
.member-row .mr-name .mr-rank { font-size: 11.5px; color: var(--ink-3); }
.member-row .mr-stat { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.member-row .mr-online { font-size: 10.5px; padding: 2px 8px; border: 1px solid var(--line); color: var(--ink-3); text-transform: lowercase; }
.member-row .mr-online.on { color: var(--accent-ink); border-color: var(--accent-ink); }
.member-list-shell { border: 1px solid var(--line); background: var(--page); }
.fw-strip {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 13px 22px; border-bottom: 1px solid var(--line);
background: var(--paper-2); text-transform: lowercase;
}
.fw-strip h1 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.fw-strip .sep { width: 1px; height: 15px; background: var(--line); }
.fw-strip .fw-sub { font-size: 12.5px; color: var(--ink-3); }
.fw-strip .fw-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.fw-strip .stat { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.fw-strip .stat b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fw-strip .stat.on b { color: var(--accent-ink); }
.fw-strip .stat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); display: inline-block; box-shadow: 0 0 0 3px rgba(171,182,255,0.12); }
.fw-body { padding: 18px 22px 28px; }
.member-row, .mr-head { grid-template-columns: 44px 1.5fr 120px 150px 96px !important; }
.mr-head {
display: grid; gap: 14px; align-items: center;
padding: 9px 14px; border-bottom: 1px solid var(--line);
background: var(--paper-2); font-size: 11px; color: var(--ink-3);
font-weight: 600; letter-spacing: 0.04em; text-transform: lowercase;
}
.mr-head .r { text-align: right; }
.member-row .mr-av { width: 40px; height: 40px; }
.member-row .mr-stat, .member-row .mr-join { text-align: right; font-variant-numeric: tabular-nums; }
.member-row .mr-join { color: var(--ink-3); font-size: 11.5px; }
.member-row .mr-online { justify-self: end; }
.search-resulthead {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px 2px; font-size: 11.5px; color: var(--ink-3); text-transform: lowercase;
}
.search-resulthead b { color: var(--ink); font-weight: 600; }
.reg.reg-fw { padding-top: 18px; }
.reg.reg-fw .reg-wrap { max-width: none; margin: 0; }
.support-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items: start; }
.support-grid > fieldset { margin: 0 !important; }
.checkout-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: 14px; }
.checkout-main > fieldset { margin: 0 !important; }
.checkout-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.checkout-side > fieldset { margin: 0 !important; }
.checkout-side .reg-submit .btn { width: 100%; }
@media (max-width: 900px) {
.support-grid, .checkout-grid { grid-template-columns: 1fr; }
.checkout-side { position: static; }
}
.login-page .login-wrap { max-width: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.form-grid > fieldset { margin: 0 !important; }
.form-grid .fs-col, .form-grid .lp-col { flex: 1 1 200px; }
.form-grid .fs-col input, .form-grid .lp-col input, .form-grid fieldset select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
.lp-submit, .form-grid + .reg-submit { margin-top: 4px; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
.notif-grid { display: grid; grid-template-columns: 264px 1fr; gap: 16px; align-items: start; }
.notif-grid > fieldset { margin: 0 !important; position: sticky; top: 16px; }
.notif-main { min-width: 0; }
@media (max-width: 820px) {
.notif-grid { grid-template-columns: 1fr; }
.notif-grid > fieldset { position: static; }
}
.ticket-detail-head {
display: grid; grid-template-columns: 1fr auto; gap: 14px;
padding: 22px; border-bottom: 1px solid var(--line);
background: var(--paper-2); text-transform: lowercase;
}
.ticket-detail-head h2 { margin: 4px 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.ticket-detail-head .td-id { font-family: ui-monospace, Menlo, monospace; color: var(--accent-ink); font-size: 12px; letter-spacing: 0.06em; }
.ticket-detail-head .td-meta { font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.ticket-detail-head .td-meta b { color: var(--ink-2); font-weight: 500; }
.ticket-detail-head .td-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ticket-detail-body { display: grid; grid-template-columns: 1fr 260px; gap: 0; }
.ticket-thread { border-right: 1px solid var(--line); }
.ticket-side { padding: 22px 18px; background: var(--paper-2); font-size: 12.5px; }
.ticket-side h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: lowercase; letter-spacing: 0.06em; }
.ticket-side .ts-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--ink); }
.ticket-side .ts-row .l { color: var(--ink-3); text-transform: lowercase; }
.ticket-side .ts-block { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.ticket-side .staff-online .so { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; }
.ticket-side .staff-online .so .so-av { width: 24px; height: 24px; background: var(--admin); color: #0e0e10; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; text-transform: lowercase; }
.ticket-side .staff-online .so .so-dot { width: 7px; height: 7px; border-radius: 50%; background: #66d28a; }
.ticket-side .staff-online .so .so-dot.away { background: #f5c97b; }
.ticket-side .staff-online .so .so-dot.off { background: var(--ink-4); }
.dob-year-input {
background: var(--page); border: 1px solid var(--line); color: var(--ink);
padding: 6px 8px; font-family: inherit; font-size: 13px; outline: none;
width: 70px; text-align: center; text-transform: lowercase;
transition: border-color .2s ease;
}
.dob-year-input:focus { border-color: var(--accent-ink); }
.bell-wrapper { position: relative; display: inline-flex; align-items: center; }
.nav .bell { display: inline-flex; align-items: center; justify-content: center; height: 22px; }
.nav .bell .badge { line-height: 1; top: -6px; right: -10px; }
body:not(.logged-in) .auth-only-block { display: none !important; }
body.logged-in .guest-only-block { display: none !important; }
.pill-st-mini { font-size: 11px; padding: 3px 12px; min-width: 64px; border: 1px solid var(--line); text-transform: lowercase; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; font-weight: 600; }
.pill-st-mini.open { color: var(--accent-ink); border-color: rgba(171,182,255,0.5); }
.pill-st-mini.closed { color: var(--ink-4); }
.global-notif-popup {
position: fixed !important;
right: auto !important;
width: 320px;
z-index: 9000;
}
label.toggle-row { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; margin-bottom: 6px; font-size: 13px; color: var(--ink); }
label.toggle-row input[type="checkbox"] { flex: none; }
label.toggle-row > span { line-height: 1.3; }
.unified-input .ui-formatting {
display: flex; gap: 14px;
padding: 8px 12px 6px;
font-size: 13px; color: var(--ink-3);
border-bottom: 1px solid var(--line);
}
.unified-input .ui-formatting i { cursor: pointer; transition: color .2s ease; }
.unified-input .ui-formatting i:hover { color: var(--accent-ink); }
.dm-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.55);
z-index: 200; display: none; opacity: 0; transition: opacity .2s ease;
backdrop-filter: blur(2px);
}
.dm-backdrop.show { display: flex; opacity: 1; align-items: center; justify-content: center; }
.dm-modal {
width: min(640px, 92vw); max-height: 86vh;
background: var(--paper); border: 1px solid var(--line);
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
display: flex; flex-direction: column;
transform: translateY(8px); transition: transform .2s ease;
text-transform: lowercase;
}
.dm-backdrop.show .dm-modal { transform: translateY(0); }
.dm-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--line);
background: var(--paper-2);
}
.dm-head .dm-av {
width: 36px; height: 36px; border: 1px solid var(--line); background: var(--paper);
display: flex; align-items: center; justify-content: center; font-weight: 700;
font-size: 14px; color: var(--ink); text-transform: lowercase;
}
.dm-head .dm-who { flex: 1; }
.dm-head .dm-who .nm { font-weight: 700; font-size: 14px; color: var(--ink); }
.dm-head .dm-who .sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.dm-head .dm-close {
border: 1px solid var(--line); background: transparent; color: var(--ink-3);
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .2s ease; font-size: 13px;
}
.dm-head .dm-close:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.dm-body {
flex: 1; overflow-y: auto; padding: 4px 0;
background: var(--page); min-height: 280px;
}
.dm-empty {
text-align: center; color: var(--ink-4); padding: 60px 20px 30px;
font-size: 12px;
}
.dm-empty i { display: block; font-size: 28px; color: var(--line); margin-bottom: 10px; }
.dm-msg {
display: grid; grid-template-columns: 130px 1fr;
border-bottom: 1px solid var(--line);
}
.dm-msg .who {
padding: 14px 16px; border-right: 1px solid var(--line); background: var(--paper-2);
display: flex; flex-direction: column; gap: 4px;
}
.dm-msg .who .av {
width: 36px; height: 36px; border: 1.5px solid var(--line); background: var(--accent);
color: #0e0e10; display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px; text-transform: lowercase;
}
.dm-msg .who .av.them { background: var(--paper); color: var(--ink); }
.dm-msg .who .uname { font-size: 12px; font-weight: 700; }
.dm-msg .who .uname.role-admin { color: var(--admin); }
.dm-msg .who .uname.role-sub { color: var(--accent-ink); }
.dm-msg .body { padding: 14px 16px; }
.dm-msg .body .time { font-size: 11px; color: var(--ink-4); margin-bottom: 6px; }
.dm-msg .body .txt { font-size: 16px; color: var(--ink-2); line-height: 1.6; word-wrap: break-word; }
#dm-input { font-size: 15px !important; }
.dm-msg .body .txt img.emoji { vertical-align: -0.22em; }
.dm-compose {
border-top: 1px solid var(--line); padding: 12px 16px;
background: var(--paper-2);
}
.dm-compose .input-container { position: relative; }
.dm-compose textarea {
width: 100%; min-height: 60px; resize: vertical; box-sizing: border-box;
border: 1px solid var(--line); background: var(--page);
padding: 10px 60px 10px 12px;
font-family: inherit; font-size: 13px; color: var(--ink); outline: none;
}
.dm-compose textarea:focus { border-color: var(--accent-ink); }
.dm-compose .uib-bar { position: absolute; right: 6px; bottom: 8px; display: flex; gap: 2px; }
.dm-compose .uib {
border: none; background: transparent; color: var(--ink-3); cursor: pointer;
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
transition: color .2s ease; font-size: 13px;
}
.dm-compose .uib:hover { color: var(--accent-ink); }
.dm-list-head {
padding: 10px 16px; border-bottom: 1px solid var(--line);
font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em;
background: var(--paper-2); display: flex; justify-content: space-between; align-items: center;
}
.dm-list-head .dm-search {
border: 1px solid var(--line); background: var(--page); color: var(--ink);
font-family: inherit; font-size: 12px; padding: 4px 8px; outline: none; width: 180px;
text-transform: lowercase;
}
.dm-list-head .dm-search:focus { border-color: var(--accent-ink); }
.dm-conv-row {
display: grid; grid-template-columns: 40px 1fr auto;
gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line);
cursor: pointer; align-items: center; transition: background .15s ease;
}
.dm-conv-row:hover { background: var(--paper-2); }
.dm-conv-row .av {
width: 36px; height: 36px; border: 1px solid var(--line); background: var(--paper-2);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; color: var(--ink-2); text-transform: lowercase;
}
.dm-conv-row .meta .nm { font-weight: 700; font-size: 13px; color: var(--ink); }
.dm-conv-row .meta .nm.role-admin { color: var(--admin); }
.dm-conv-row .meta .nm.role-sub { color: var(--accent-ink); }
.dm-conv-row .meta .pv { font-size: 12px; color: var(--ink-3); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.dm-conv-row .meta .pv img.emoji { width: 13px; height: 13px; vertical-align: -0.2em; }
.dm-conv-row .when { font-size: 10.5px; color: var(--ink-4); text-align: right; }
.dm-conv-row.unread .meta .nm::after {
content: ""; display: inline-block; width: 6px; height: 6px;
background: var(--accent); margin-left: 8px; vertical-align: middle;
}
.msg-popup {
position: absolute; top: 30px; right: -10px; width: 320px;
background: var(--paper); border: 1px solid var(--line);
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
z-index: 100;
display: flex !important; flex-direction: column; opacity: 0;
transform: translateY(-6px) scale(0.98); pointer-events: none;
transition: opacity .14s ease, transform .14s ease;
text-transform: lowercase;
}
.msg-popup.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.msg-popup .h {
padding: 12px 14px; border-bottom: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center;
}
.msg-popup .h .t { font-weight: 600; font-size: 12px; color: var(--ink); }
.msg-popup .h .va {
font-size: 11px; color: var(--accent-ink);
border: 1px solid var(--line); padding: 3px 8px; cursor: pointer;
transition: all .22s ease;
}
.msg-popup .h .va:hover { border-color: var(--accent-ink); }
.msg-popup .list { max-height: 320px; overflow-y: auto; }
.msg-popup .empty {
padding: 30px 16px; text-align: center; color: var(--ink-4); font-size: 12px;
}
.nav .msg-wrapper { position: relative; display: inline-flex; align-items: center; }
.nav .msg-icon {
color: var(--ink-2); font-size: 14px; cursor: pointer; position: relative;
display: inline-flex; align-items: center; justify-content: center; height: 22px;
}
.nav .msg-icon:hover { color: var(--accent-ink); }
.nav .msg-icon .badge {
position: absolute; top: -6px; right: -10px; min-width: 14px; height: 14px;
background: var(--accent); color: #0e0e10; font-size: 9px; font-weight: 700;
border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
padding: 0 4px; line-height: 1;
}
.nav .msg-icon .badge.zero { display: none; }
.msg-page { display: grid; grid-template-columns: 330px 1fr; min-height: 580px; border-bottom: 1px solid var(--line); }
.msg-sidebar { border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--paper); min-height: 0; }
.msg-sidebar-head {
padding: 13px 16px; border-bottom: 1px solid var(--line);
display: flex; align-items: baseline; justify-content: space-between;
font-size: 14px; font-weight: 600; color: var(--ink); text-transform: lowercase; background: var(--paper-2);
}
.msg-sidebar-head .c { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.msg-search-wrap { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.msg-search-wrap input {
width: 100%; box-sizing: border-box; background: var(--page); border: 1px solid var(--line);
color: var(--ink); font-family: inherit; font-size: 12.5px; padding: 7px 10px; outline: none; text-transform: lowercase;
}
.msg-search-wrap input::placeholder { color: var(--ink-4); }
.msg-search-wrap input:focus { border-color: var(--accent-ink); }
.msg-conv-list { flex: 1; overflow-y: auto; min-height: 0; }
.msg-conv-list .dm-conv-row { border-left: 2px solid transparent; }
.msg-conv-list .dm-conv-row.active { background: var(--paper-2); border-left-color: var(--accent-ink); }
.msg-thread { display: flex; flex-direction: column; min-width: 0; background: var(--page); }
.msg-thread-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.msg-thread-head .dm-av { width: 38px; height: 38px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; text-transform: lowercase; }
.msg-thread-head .dm-who { flex: 1; min-width: 0; }
.msg-thread-head .dm-who .nm { font-weight: 700; font-size: 14px; color: var(--ink); }
.msg-thread-head .dm-who .nm.role-admin { color: var(--admin); }
.msg-thread-head .dm-who .nm.role-sub { color: var(--accent-ink); }
.msg-thread-head .dm-who .sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.msg-thread .dm-body { flex: 1; min-height: 0; }
@media (max-width: 720px) {
.msg-page { grid-template-columns: 1fr; }
.msg-sidebar { max-height: 240px; }
}
.inv-row code, .invite-table code, .tf-secret { text-transform: none !important; }
.content-page { max-width: none; padding: 30px 40px 44px; }
.content-page .lede { max-width: 720px; }
.staff-grid { grid-template-columns: repeat(3, 1fr); }
.content-main .staff-grid { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.contact-grid { grid-template-columns: repeat(4, 1fr); }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0 26px; }
.about-stats .as { border: 1px solid var(--line); background: var(--paper-2); padding: 14px 16px; }
.about-stats .as b { display: block; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.about-stats .as span { font-size: 12px; color: var(--ink-3); }
.content-split { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; margin-top: 18px; }
.content-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 18px; }
.info-card { border: 1px solid var(--line); background: var(--paper-2); padding: 16px 18px; }
.info-card h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: 0.05em; text-transform: lowercase; }
.info-card p { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.info-card p:last-child { margin-bottom: 0; }
.info-card .btn, .info-card .btn-ghost { width: 100%; justify-content: center; }
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.info-list li { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; padding-left: 18px; position: relative; }
.info-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; background: var(--accent-ink); }
.fact-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.fact-row:last-child { border-bottom: 0; }
.fact-row span { color: var(--ink-3); }
.fact-row b { color: var(--ink); font-weight: 600; }
.cta-card { background: var(--paper); border-color: rgba(171,182,255,0.4); }
.inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.inv-stat { border: 1px solid var(--line); background: var(--page); padding: 14px 16px; }
.inv-stat .sub-val { display: block; font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.inv-stat .sub-val.sub-accent { color: var(--accent-ink); }
.inv-stat .sub-val.muted { color: var(--ink-4); }
.inv-stat span { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.04em; }
@media (max-width: 880px) {
.staff-grid, .contact-grid { grid-template-columns: 1fr; }
.about-stats { grid-template-columns: 1fr 1fr; }
.content-split { grid-template-columns: 1fr; }
.content-aside { position: static; }
}
.support-grid { gap: 20px; }
.support-grid fieldset { padding: 16px 18px 18px; }
.ticket-list { display: flex; flex-direction: column; }
.ticket-list .opt-flag { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.tk-row { padding: 12px; }
.tk-row .tk-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-empty { padding: 26px 14px; color: var(--ink-3); text-align: center; font-size: 12.5px; }
.support-col .reg-submit { margin-top: 14px; }
body:not(.logged-in) .nav > a { display: none; }
.av, .sb-av, .mr-av, .p-av, .sa, .n-av, .np-av, .dm-av, .s-av-preview, .uc-av, .so-av { overflow: hidden; }
.av img, .sb-av img, .mr-av img, .p-av img, .sa img, .n-av img, .np-av img, .dm-av img, .s-av-preview img, .uc-av img, .so-av img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.s-av-preview { cursor: pointer; }
.profile-head .p-av.editable { cursor: pointer; position: relative; }
.profile-head .p-av.editable::after {
content: "edit"; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: lowercase; color: #fff;
background: linear-gradient(to top, rgba(0,0,0,0.74), rgba(0,0,0,0));
opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.profile-head .p-av.editable:hover::after { opacity: 1; }
.av-edit-menu {
position: absolute; z-index: 200; width: 240px; background: var(--paper); border: 1px solid var(--line);
box-shadow: 0 12px 36px rgba(0,0,0,0.55); padding: 14px; display: flex; flex-direction: column; gap: 10px;
text-transform: lowercase;
}
.av-edit-menu .ave-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.av-edit-menu .btn, .av-edit-menu .ic-btn { width: 100%; justify-content: center; }
.av-edit-menu .ave-hint { font-size: 11px; color: var(--ink-4); }
.cf-box.ts-live { padding: 0; border: none; background: transparent; min-width: 300px; display: block; }
.admin-box { margin-top: 26px; border: 1px solid var(--admin); padding: 14px; }
.admin-box h3 { color: var(--admin); margin-top: 0; }
.admin-box .ab-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.admin-box select, .admin-box input { background: var(--page); border: 1px solid var(--line); color: var(--ink); padding: 6px 8px; font-family: inherit; font-size: 12.5px; outline: none; flex: 1; min-width: 0; }
.admin-box .ic-btn { padding: 6px 10px; font-size: 12px; flex: none; }
.admin-box .ab-status { display: flex; gap: 6px; margin-bottom: 10px; }
.admin-box .ab-flag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border: 1px solid; text-transform: lowercase; }
.admin-box .ab-flag.banned { color: var(--admin); border-color: var(--admin); }
.admin-box .ab-flag.muted { color: var(--accent-ink); border-color: var(--accent-ink); }
.admin-nav-link { color: var(--admin) !important; font-weight: 700; }
.ap-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--page); padding: 10px 12px; }
.ap-search i { color: var(--ink-4); font-size: 13px; }
.ap-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--ink); font-family: inherit; font-size: 13px; }
.ap-results { display: flex; flex-direction: column; margin-top: 8px; }
.ap-results .ap-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border: 1px solid transparent; }
.ap-results .ap-row:hover { background: var(--paper-2); border-color: var(--line); }
.ap-results .ap-av { width: 26px; height: 26px; flex: none; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; overflow: hidden; }
.ap-results .ap-meta { font-size: 11.5px; color: var(--ink-4); margin-left: auto; }
.ap-empty { color: var(--ink-3); font-size: 13px; padding: 30px 4px; text-align: center; }
.ap-target { margin-top: 8px; }
.ap-head { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); background: var(--paper-2); padding: 14px 16px; margin-bottom: 14px; }
.ap-head .ap-h-av { width: 52px; height: 52px; flex: none; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; overflow: hidden; }
.ap-head .ap-h-name { font-size: 17px; font-weight: 700; }
.ap-head .ap-h-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.ap-head .ap-flags { display: flex; gap: 6px; margin-left: auto; }
.ap-flag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border: 1px solid; text-transform: lowercase; }
.ap-flag.banned { color: var(--admin); border-color: var(--admin); }
.ap-flag.muted { color: var(--accent-ink); border-color: var(--accent-ink); }
.ap-dossier { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; border: 1px solid var(--line); padding: 6px 16px; margin-bottom: 14px; }
.ap-dossier .dr { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.ap-dossier .dr span { color: var(--ink-3); }
.ap-dossier .dr b { color: var(--ink); font-weight: 600; text-align: right; word-break: break-all; }
.ap-sec { border: 1px solid var(--line); padding: 12px 14px; margin-bottom: 12px; }
.ap-sec h4 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: lowercase; letter-spacing: 0.05em; }
.ap-row-f { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ap-row-f + .ap-row-f { margin-top: 8px; }
.ap-row-f select, .ap-row-f input { background: var(--page); border: 1px solid var(--line); color: var(--ink); padding: 6px 8px; font-family: inherit; font-size: 12.5px; outline: none; flex: 1; min-width: 0; }
.ap-row-f .ic-btn, .ap-row-f .danger-btn { flex: none; padding: 6px 12px; font-size: 12px; }
.ap-bulk { margin-top: 16px; }
.ap-bulk-roles { display: flex; flex-wrap: wrap; gap: 9px 14px; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.ap-bulk-roles label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ap-bulk-roles .ap-bulk-lbl { color: var(--ink-3); }
.ap-bulk-note { margin-top: 12px; font-size: 12px; color: var(--ink-3); display: flex; align-items: center; }
@media (max-width: 880px) { .ap-dossier { grid-template-columns: 1fr; } }
.ap-av, .ap-h-av { overflow: hidden; }
.ap-av img, .ap-h-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-dossier .dr.flagged b { color: var(--admin); }
.ap-sessions { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.ap-sessions .aps { font-size: 11.5px; color: var(--ink-3); border: 1px solid var(--line); padding: 6px 8px; display: flex; justify-content: space-between; gap: 8px; }
.ap-sessions .aps b { color: var(--ink-2); font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
.ap-builds { margin-bottom: 16px; }
.ap-build-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ap-build-card { border: 1px solid var(--line); background: var(--page); padding: 9px 10px; min-width: 0; }
.ap-build-card b { display: block; color: var(--ink); font-size: 12px; }
.ap-build-card span { display: block; color: var(--ink-3); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-build-channels { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0; color: var(--ink-2); font-size: 12px; }
.ap-build-channels label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.ap-build-notes { width: 100%; min-height: 92px; resize: vertical; background: var(--page); border: 1px solid var(--line); color: var(--ink); padding: 8px; font: inherit; outline: none; }
@media (max-width: 760px) { .ap-build-list { grid-template-columns: 1fr; } }
.page-gate { display: none; position: fixed; inset: 0; z-index: 600; background: var(--page); align-items: center; justify-content: center; text-align: center; padding: 24px; }
.page-gate.show { display: flex; }
.page-gate .pg-card i { font-size: 30px; color: var(--ink-4); margin-bottom: 14px; display: block; }
.page-gate .pg-card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; text-transform: lowercase; }
.page-gate .pg-card p { color: var(--ink-3); margin: 0 0 18px; font-size: 13.5px; }
.page-gate .pg-actions { display: flex; gap: 10px; justify-content: center; }
body.is-banned .nav > a:not([data-goto="support"]) { display: none; }
body.is-banned .nav .bell-wrapper { display: none; }
.ticket-detail-head .td-meta { align-items: center; }
.ticket-detail-body.ticket-closed .ticket-thread .post { opacity: 0.72; }
.post.post-deleted { opacity: 0.62; }
.post.post-deleted .txt { color: var(--ink-4); }
.post .actions .post-delflag { color: var(--ink-4); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.edit-area .edit-ta { width: 100%; min-height: 90px; background: var(--page); border: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: 13px; padding: 8px; outline: none; resize: vertical; }
.edit-area .edit-btns { display: flex; gap: 8px; margin-top: 8px; }
.uib-bar.fmt-bar { gap: 1px; flex-wrap: wrap; }
.fmt-btn { font-size: 12px; min-width: 26px; padding: 4px 6px; }
.fmt-btn b, .fmt-btn i { font-style: normal; font-weight: 700; }
/* new-thread composer + preview */
.nt-box { margin: 18px 22px 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); overflow: hidden; box-shadow: 0 14px 36px rgba(0,0,0,.12); }
.nt-compose-head { padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nt-compose-eyebrow { color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.nt-compose-head h3 { margin: 0; color: var(--ink); font-size: 17px; letter-spacing: -.01em; text-transform: lowercase; }
.nt-draft-badge { flex: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-3); background: var(--page); padding: 5px 10px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nt-box.is-previewing { border-color: color-mix(in srgb, var(--accent-ink) 48%, var(--line)); }
.nt-box.is-previewing .nt-draft-badge { border-color: color-mix(in srgb, var(--accent-ink) 48%, var(--line)); color: var(--accent-ink); }
.nt-form { padding: 18px; display: grid; gap: 15px; }
.nt-field { display: grid; gap: 7px; }
.nt-label { color: var(--ink-2); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nt-box .nt-input { width: 100%; box-sizing: border-box; background: var(--page); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); padding: 12px 13px; font-family: inherit; font-size: 14px; outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
.nt-box .nt-input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ink) 12%, transparent); }
.nt-box .nt-input::placeholder { color: var(--ink-4); }
.nt-box .uib-bar.fmt-bar { border: 1px solid var(--line); border-bottom: none; border-radius: 4px 4px 0 0; padding: 6px; background: var(--paper); margin: 0; }
.nt-box .fmt-btn { width: 30px; height: 30px; padding: 0; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; }
.nt-box textarea.nt-input.nt-body { border-radius: 0 0 4px 4px; min-height: 230px; resize: vertical; line-height: 1.65; }
.nt-actions { padding-top: 15px; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.nt-action-hint { color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.nt-buttons { display: flex; gap: 9px; align-items: center; flex: none; }
.nt-primary { min-height: 38px; border-radius: 4px; background: var(--accent); border: 1px solid var(--accent); color: #0e0e10; font-weight: 700; padding: 9px 17px; cursor: pointer; font-family: inherit; font-size: 13px; text-transform: lowercase; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: filter .18s ease, transform .05s ease; }
.nt-primary:hover { filter: brightness(1.1); }
.nt-primary:active { transform: translateY(1px); }
.nt-primary:disabled { opacity: .6; cursor: default; }
.nt-ghost { min-height: 38px; border-radius: 4px; background: transparent; border: 1px solid var(--line); color: var(--ink-2); padding: 9px 15px; cursor: pointer; font-family: inherit; font-size: 13px; text-transform: lowercase; transition: all .18s ease; }
.nt-ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.act.act-danger { color: var(--admin); }
.act.act-danger:hover { color: var(--admin); opacity: .8; }
@media (max-width: 640px) {
.nt-box { margin: 12px; }
.nt-form, .nt-compose-head { padding: 14px; }
.nt-box textarea.nt-input.nt-body { min-height: 190px; }
.nt-actions { align-items: stretch; flex-direction: column; }
.nt-buttons { width: 100%; }
.nt-buttons button { flex: 1; }
}
#profile-comments { font-size: 15px; }
#profile-comments .act-item .av { width: 34px !important; height: 34px !important; font-size: 14px !important; }
#profile-comments .txt { font-size: 15px; line-height: 1.55; }
.profile-reply-box .reply-textarea { font-size: 15px !important; }
#twofa-area .tf-qr { background: #fff; padding: 10px; width: fit-content; margin: 10px 0; }
#twofa-area .tf-secret { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--accent-ink); word-break: break-all; }
body.nav-loading::after {
content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 40%;
background: var(--accent-ink); z-index: 99999; box-shadow: 0 0 8px var(--accent-ink);
animation: navbar 0.9s ease-in-out infinite;
}
@keyframes navbar { 0% { left: -40%; } 100% { left: 100%; } }
#cf-gate {
position: fixed; inset: 0; z-index: 100000; background: var(--page);
display: flex; align-items: center; justify-content: center; padding: 24px;
transition: opacity .5s ease;
}
#cf-gate.cf-done { opacity: 0; pointer-events: none; }
#cf-gate.cf-quiet > * { display: none; }
#cf-gate .cf-gate-inner { max-width: 560px; width: 100%; }
#cf-gate .cf-gate-widget { color: var(--ink-2); font-size: 13px; min-height: 22px; }
#cf-gate .cf-gate-spin { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--accent-ink); border-radius: 50%; animation: cfspin .8s linear infinite; flex: none; }
#cf-gate .cf-gate-widget .cf-gate-spin { display: none; }
@keyframes cfspin { to { transform: rotate(360deg); } }
#cf-gate .cf-gate-foot { margin-top: 16px; font-size: 11px; color: var(--ink-4); }
#cf-gate .cf-gate-foot b { color: var(--ink-3); font-weight: 600; }
#cf-gate .cf-gate-foot span { display: block; margin-top: 4px; font-family: ui-monospace, Menlo, monospace; }
@media (max-width: 880px) {
body { padding: 18px 12px 90px; }
.wrap { gap: 22px; }
.header { flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; }
.nav { flex-wrap: wrap; gap: 10px 16px; font-size: 13px; row-gap: 10px; }
.profile-body { grid-template-columns: 1fr; gap: 24px; }
.settings-layout { flex-direction: column; gap: 20px; }
.settings-nav { display: flex; flex-wrap: wrap; gap: 6px 14px; width: 100%; }
.staff-grid, .contact-grid, .pay-grid, .pricing-grid, .feature-list, .new-ticket-form .row2 { grid-template-columns: 1fr; }
.search-filters, .ticket-stats, .invites-stats { grid-template-columns: 1fr 1fr; }
.post { grid-template-columns: 1fr; }
.post .who { display: flex; gap: 12px; align-items: center; padding: 12px 22px 0; border: none; }
.post .who .role, .post .who .stats { margin-left: auto; }
}
@media (max-width: 600px) {
.header { flex-direction: column; align-items: stretch; gap: 12px; }
.nav { justify-content: flex-start; width: 100%; }
.nav .auth-req, .nav .guest-req { margin-left: auto; }
.wordmark { font-size: 18px; }
.crumb { font-size: 11.5px; }
.cat, .cat-head { grid-template-columns: 1fr 52px !important; }
.cat .num + .num, .cat-head > div:nth-child(3), .cat .last, .cat-head > div:nth-child(4) { display: none; }
.thread-head .meta { gap: 8px 14px; }
.login-page .lp-row, .reg .fs-row { flex-direction: column; gap: 0; }
.s-form-row { grid-template-columns: 1fr; gap: 6px; }
.search-filters, .ticket-stats, .invites-stats, .user-card .uc-stats { grid-template-columns: 1fr !important; }
.tk-row { grid-template-columns: 56px 1fr 72px; }
.tk-row .tk-time { display: none; }
.inv-row { grid-template-columns: 1fr auto; }
.inv-row > :nth-child(2), .inv-row > :nth-child(3) { display: none; }
.profile-head { flex-direction: column; gap: 14px; }
.profile-head > div[style*="margin-left"] { margin-left: 0 !important; }
}