/* Inter, served from this site (no Google Fonts request) */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #000000;
  --bg-elevated: #000000;
  --border: #262626;
  --text: #e5e5e5;
  --text-dim: #9ca3af;
  --text-faint: #6b7280;
  --accent: #f97316;
  --danger: #ef4444;
  --ok: #22c55e;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  line-height: 1.5;
}

a { color: #93c5fd; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

header.site-header {
  border-bottom: 1px solid var(--border);
  background: #000;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 20px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.brand { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.nav-row .brand { margin-right: 6px; }
.nav-row .nav-user { margin-left: auto; gap: 20px; }
.brand:hover { text-decoration: none; color: var(--text); }
nav.links { display: flex; gap: 20px; flex-wrap: wrap; }
nav.links a { color: var(--text-dim); font-size: 14px; }
nav.links a:hover { color: var(--text); text-decoration: none; }
nav.links a.active { color: #fff; font-weight: 700; }
.nav-user { font-size: 14px; display: flex; align-items: center; gap: 16px; }
/* Login / Register sit in the nav, so they follow nav styling rather than the
   default blue link colour. */
.nav-user > a { color: var(--text-dim); }
.nav-user > a:hover { color: var(--text); text-decoration: none; }

main { padding: 30px 0 60px; }

h1 { font-size: 26px; margin: 0 0 16px; }
h2 { font-size: 19px; margin: 24px 0 10px; }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
table th:first-child, table td:first-child { padding-left: 14px; }

table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--text-dim); font-weight: 600; background: var(--bg-elevated); }
td.num, th.num { text-align: right; }
td.meta { color: var(--text-faint); }
tr:hover { background: rgba(255,255,255,0.02); }

input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=color], textarea, select {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 10px;
  font-family: inherit;
}
textarea { min-height: 180px; resize: vertical; font-family: 'SF Mono', Consolas, monospace; }
label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
.field { margin-bottom: 16px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.checkbox-row input { width: auto; margin: 0; }

button, .btn {
  background: #1f1f1f;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  transition: background 0.15s ease, transform 0.1s ease;
}
button:hover, .btn:hover { background: #2a2a2a; text-decoration: none; }
button:active, .btn:active { transform: scale(0.97); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
button.primary:hover { opacity: 0.9; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.small { padding: 5px 10px; font-size: 12px; }

.error { color: var(--danger); background: rgba(239,68,68,0.1); border: 1px solid var(--danger); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.success { color: var(--ok); background: rgba(34,197,94,0.1); border: 1px solid var(--ok); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }

.rank-name { font-weight: 600; }

/* Staff name effect: an animated glitter GIF clipped to the letterforms, so the
   shimmer IS the text rather than a block behind it. Image per role is set in
   the admin panel (Settings > Staff Name Effects). */
.staff-gif {
  display: inline;
  background-repeat: repeat;
  background-position: center;
  background-size: auto;
}

/* Custom badges: no background pill - just a small icon (or short text) with a
   tooltip that only appears on hover, per request. */
.badge-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: default;
  vertical-align: middle;
}
.badge-icon img { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; display: block; }
.badge-icon .badge-emoji { font-size: 14px; line-height: 1; }
.badge-icon .badge-tip {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 20;
}
.badge-icon:hover .badge-tip { opacity: 1; }

.pagination { display: flex; gap: 6px; align-items: center; margin: 16px 0; }
.pagination a, .pagination span { padding: 6px 11px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; }
.pagination .current { background: var(--accent); color: #000; border-color: var(--accent); }

.search-row { display: flex; gap: 8px; margin-bottom: 16px; }
.search-row input { margin-bottom: 0; }

.paste-content-box {
  background: #000000;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 13px;
  margin-bottom: 20px;
}

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.pricing-card { border-radius: 10px; padding: 20px; color: #fff; }
.pricing-card .price { font-size: 28px; font-weight: 800; margin: 6px 0 14px; }
.pricing-card ul { list-style: none; padding: 0; margin: 0 0 16px; font-size: 13px; }
.pricing-card li { padding: 4px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.15); }
.pricing-card .yes { color: #bbf7d0; font-weight: 700; }
.pricing-card .no { color: rgba(255,255,255,0.4); }

footer.site-footer { border-top: 1px solid var(--border); padding: 20px; text-align: center; color: var(--text-faint); font-size: 13px; }

.avatar { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #222; border: 2px solid var(--border); }
.avatar-lg { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: #222; border: 3px solid var(--border); }
/* Keeps the uploaded image's own resolution/aspect ratio instead of forcing
   a fixed height that crops it - width-constrained, height follows naturally. */
.banner { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 8px; margin-bottom: 12px; background: #000; }

.pinned-row { border-left: 3px solid var(--accent); }
.pinned-row td:first-child { padding-left: 11px; }

.sidebar-ad { border: 1px dashed var(--border); border-radius: 8px; padding: 12px; margin-bottom: 12px; font-size: 13px; color: var(--text-dim); }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .settings-grid { grid-template-columns: 1fr; } }

.rank-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }

/* ---- Admin panel: fixed left sidebar + content column ---- */
.admin-shell { display: flex; gap: 0; align-items: flex-start; margin: 0 -20px; min-height: 70vh; }
.admin-sidebar {
  width: 210px;
  flex: 0 0 210px;
  background: #000;
  border-right: 1px solid var(--border);
  padding: 22px 0;
  align-self: stretch;
}
.admin-sidebar .as-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 18px;
  color: var(--text);
}
.admin-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  color: var(--text-dim);
  font-size: 14px;
}
.admin-sidebar a:hover { background: rgba(255,255,255,0.04); color: var(--text); text-decoration: none; }
.admin-sidebar a.active { color: var(--text); background: rgba(255,255,255,0.06); box-shadow: inset 2px 0 0 var(--accent); }
.admin-sidebar .as-icon { width: 16px; text-align: center; opacity: 0.75; }
.as-badge {
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  margin-left: auto;
}
.admin-content { flex: 1; min-width: 0; padding: 26px 24px 40px; }
.admin-content h1 { font-size: 22px; }
@media (max-width: 820px) {
  .admin-shell { flex-direction: column; margin: 0 -20px; }
  .admin-sidebar { width: 100%; flex: none; border-right: none; border-bottom: 1px solid var(--border); padding: 14px 0; }
  .admin-sidebar a { padding: 8px 18px; }
}

.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.btn-ok { border-color: var(--ok); color: var(--ok); background: transparent; }
.btn-ok:hover { background: rgba(34,197,94,0.12); }

/* ---- Home hero: centered wordmark, announcements, search, pager ---- */
.home-hero { text-align: center; padding: 26px 0 10px; }
.home-logo {
  display: inline-block;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text);
  text-transform: lowercase;
  margin-bottom: 18px;
  text-shadow: 0 0 18px rgba(249,115,22,0.35);
}
.home-logo:hover { text-decoration: none; color: var(--accent); }
.home-announce { margin-bottom: 6px; }
.home-announce a, .home-announce span { font-size: 22px; font-weight: 700; text-decoration: underline; }
.home-search-label { font-size: 14px; font-weight: 700; margin: 16px 0 8px; color: var(--text); }
.home-radios { display: flex; gap: 18px; justify-content: center; margin-bottom: 10px; font-size: 13px; color: var(--text-dim); }
.home-radios label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.home-radios input { width: auto; margin: 0; }
.home-search-row { display: flex; gap: 8px; justify-content: center; }
.home-search-row input { width: 300px; margin: 0; }
.home-count { font-size: 13px; color: var(--text-faint); margin: 12px 0 10px; }

.pager { display: inline-flex; gap: 5px; align-items: center; margin: 6px 0 22px; }
.pager a, .pager span {
  min-width: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  color: var(--text-dim);
  background: var(--bg-elevated);
}
.pager a:hover { background: #262626; color: var(--text); text-decoration: none; }
.pager .current { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }
.pager .gap { border-color: transparent; background: transparent; }
.pager a.disabled { opacity: 0.35; pointer-events: none; }

/* ---- Users page hero ---- */
.users-hero { text-align: center; padding: 10px 0 6px; }
.users-hero h1 { font-size: 34px; margin-bottom: 14px; }

/* ---- Add Paste: full-height editor with right-hand control column ---- */
/* Sits inside normal page flow so the site header stays visible and clickable
   above it (a negative top margin used to pull this over the nav). */
.compose { display: flex; gap: 0; align-items: stretch; margin: 0 -20px; min-height: 70vh; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.compose-editor { flex: 1; min-width: 0; }
.compose-editor textarea {
  width: 100%;
  height: 100%;
  min-height: 78vh;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #000000;
  resize: none;
  font-size: 13px;
  line-height: 1.6;
  padding: 16px;
}
.compose-editor textarea:focus { border: none; outline: none; }
.compose-side {
  width: 320px;
  flex: 0 0 320px;
  background: #000;
  border-left: 1px solid var(--border);
  padding: 18px 16px;
}
.compose-side .cs-brand {
  text-align: center;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text);
  text-transform: lowercase;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.compose-side .cs-user { text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; font-size: 14px; }
.compose-side input[type=text], .compose-side input[type=password], .compose-side select { background: #3a3a3a; border-color: #3a3a3a; }
.compose-side button[type=submit] { width: 100%; background: #2b2b2b; }
.compose-side .cs-tos { text-align: center; font-size: 13px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 820px) {
  .compose { flex-direction: column-reverse; margin: 0 -20px; min-height: 0; }
  .compose-side { width: 100%; flex: none; border-left: none; border-bottom: 1px solid var(--border); }
  .compose-editor textarea { min-height: 320px; }
}

/* ---- Profile: banner + info bar as one block, then two columns ---- */
.profile-head { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 18px; background: var(--bg-elevated); }
.profile-banner { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; margin: 0; border-radius: 0; }
.profile-banner-empty { height: 220px; }
.profile-bar { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px 16px; }
.profile-avatar {
  width: 112px; height: 112px; flex: 0 0 112px;
  object-fit: cover; border-radius: 4px; background: #222;
  border: 1px solid var(--border);
}
.profile-meta { flex: 1; min-width: 0; padding-top: 2px; }
.profile-name { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.profile-bio { font-size: 14px; color: var(--text); margin-bottom: 14px; word-break: break-word; }
.profile-follow-counts { display: flex; gap: 18px; font-size: 14px; }
.profile-follow-counts a { color: var(--text-faint); }
.profile-follow-counts a strong { color: var(--text); font-weight: 700; }
.profile-action { flex: 0 0 auto; }
button.pill, .pill {
  background: #1c1c1c; border: 1px solid #3a3a3a; color: var(--text);
  border-radius: 999px; padding: 5px 16px; font-size: 13px; cursor: pointer;
}
button.pill:hover { background: #2a2a2a; }

.profile-cols { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .profile-cols { grid-template-columns: 1fr; } }
.profile-cols table { margin-bottom: 16px; }
table.kv td { font-size: 14px; }
table.kv td:last-child { color: var(--text); }

.pc-panel { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); overflow: hidden; }
.pc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 14px;
}
.pc-form { display: none; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.pc-form.open { display: block; }
.pc-form textarea { min-height: 70px; font-family: inherit; font-size: 13px; }
.pc-list { max-height: 560px; overflow-y: auto; }
.pc-item { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.pc-item:last-child { border-bottom: none; }
.pc-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.pc-time { color: var(--text-faint); font-size: 13px; }
.pc-body { font-size: 14px; margin-top: 1px; word-break: break-word; }
.pc-del button {
  background: none; border: none; color: var(--text-faint); font-size: 17px;
  line-height: 1; padding: 0 3px; cursor: pointer;
}
.pc-del button:hover { color: var(--danger); background: none; }

.pc-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; }

/* ---- Nav profile dropdown ---- */
.acct-menu-trigger { cursor: pointer; }
.acct-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 90;
}
.acct-menu-backdrop.open { display: block; }
.acct-menu {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #000;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,0.6);
}
.acct-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.acct-menu a,
.acct-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
}
.acct-menu form { margin: 0; }
.acct-menu a:hover,
.acct-menu button:hover { background: rgba(255,255,255,0.05); color: var(--text); text-decoration: none; }
.acct-menu > *:last-child a,
.acct-menu > form:last-child button { border-bottom: none; }

/* ---- Upgrade cards: gradient header strip, dark body, gradient footer ---- */
.up-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 30px; }
.up-card {
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.up-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}
.up-name { font-size: 19px; font-weight: 800; color: #fff; }
.up-price { font-size: 19px; font-weight: 800; color: #fff; white-space: nowrap; }
.up-price s { font-size: 14px; font-weight: 700; color: rgba(255,120,120,0.85); margin-left: 4px; }
.up-rows { flex: 1; padding: 4px 0; }
.up-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.up-row:last-child { border-bottom: none; }
.up-row > span:first-child { color: #e5e5e5; }
.up-row .yes { color: #22c55e; font-weight: 700; }
.up-row .no { color: #ef4444; font-weight: 700; }
.up-row .val { color: #fff; font-weight: 600; }
.up-foot {
  text-align: center;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

/* ---- Paste view: content pane + right metadata column ---- */
.site-logo-img { max-height: 46px; max-width: 100%; vertical-align: middle; display: inline-block; }
.home-logo .site-logo-img { max-height: 230px; }
.cs-brand .site-logo-img { max-height: 90px; }

.paste-view-body {
  min-height: 78vh;
  padding: 16px;
  background: #000000;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
}
.pv-meta { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 0 0 14px; font-size: 13px; }
.pv-meta dt { font-weight: 700; color: var(--text); }
.pv-meta dd { margin: 0; text-align: right; color: var(--text-dim); word-break: break-word; }
.pv-raw {
  display: block;
  text-align: center;
  background: #3a3a3a;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 13px;
  margin-bottom: 8px;
}
.pv-raw:hover { background: #474747; text-decoration: none; }
.pv-sep { border-top: 1px solid var(--border); margin: 14px 0; }
.pv-note { text-align: center; font-size: 13px; color: var(--text-dim); }
.pv-fingerprint {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 9px;
  color: var(--text-faint);
  word-break: break-all;
  text-align: center;
}
.pv-comments { margin-top: 26px; }

.private-notice {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  padding: 26px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
}
.private-notice p { margin: 0 0 10px; }
.private-notice p:last-child { margin-bottom: 0; }
.private-notice strong { color: var(--text); }

/* ---- Centered auth pages ---- */
.auth-wrap { max-width: 440px; margin: 30px auto 60px; text-align: center; }
.auth-wrap h1 { font-size: 32px; font-weight: 400; margin-bottom: 26px; }
.auth-wrap label { text-align: left; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.auth-wrap input { background: #2b2b2b; border-color: #2b2b2b; margin-bottom: 16px; }
.auth-wrap button { width: 100%; background: #2b2b2b; border-color: #2b2b2b; }
.auth-wrap button:hover { background: #383838; }
.auth-links { margin-top: 16px; font-size: 14px; }

/* Banned accounts: struck through in red wherever their name appears. */
.user-banned {
  text-decoration: line-through;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
}

/* ---- Live chat room ---- */
.chat-box { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-elevated); }
.chat-log {
  height: 60vh;
  min-height: 320px;
  overflow-y: auto;
  padding: 10px 0;
  background: #000000;
}
.chat-msg {
  padding: 3px 14px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
.chat-msg:hover { background: rgba(255,255,255,0.03); }
.chat-time { color: var(--text-faint); font-size: 11px; margin-right: 7px; font-family: 'SF Mono', Consolas, monospace; }
.chat-sep { color: var(--text-faint); margin: 0 5px 0 1px; }
.chat-body { color: var(--text); }
.chat-name { text-decoration: none; }
.chat-compose { border-top: 1px solid var(--border); padding: 12px 14px; }
.chat-compose form { display: flex; gap: 8px; margin: 0; }
.chat-compose input { margin: 0; }
.chat-restricted {
  margin: 0;
  text-align: center;
  color: #eab308;
  font-size: 13px;
}
.chat-error { color: var(--danger); font-size: 13px; margin: 8px 0 0; min-height: 1em; }

/* Banner shown while staff are browsing as another account. */
.viewas-bar {
  background: #422006;
  color: #fcd34d;
  border-bottom: 1px solid #78350f;
  text-align: center;
  font-size: 13px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.viewas-bar button { background: #78350f; border-color: #92400e; color: #fde68a; }
.viewas-bar button:hover { background: #92400e; }

.as-owner-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 22px 4px;
}

/* Badge management chips in the admin users table. */
.badge-manage { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #1c1c1c;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px 2px 6px;
  font-size: 12px;
}
.badge-chip img { width: 16px; height: 16px; object-fit: cover; border-radius: 2px; display: block; }
.badge-chip-label { color: var(--text-dim); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-chip form { margin: 0; }
.badge-chip button {
  background: none; border: none; color: var(--text-faint);
  font-size: 14px; line-height: 1; padding: 0 2px; cursor: pointer;
}
.badge-chip button:hover { color: var(--danger); background: none; }

/* Every page sits on pure black. */
html { background: #000000; }

/* Rich+ name sparkle: animated tile behind the name (see sparkleGif.js). */
.name-sparkle {
  display: inline-block;
  padding: 0;
  background-repeat: repeat;
  background-position: center;
  background-size: auto;
}

/* Name-styling settings cards. */
input[type=color].color-block {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  margin-bottom: 8px;
}
.btn-reset { width: 100%; background: #a63a3a; border-color: #a63a3a; color: #fff; }
.btn-reset:hover { background: #bb4545; }

.cht { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }


/* ---- Login / register: human check + reference spacing ---- */
.auth-wrap { max-width: 460px; }
.auth-wrap h1 { font-size: 26px; font-weight: 500; }
.auth-wrap button[type="submit"] { margin-top: 18px; }
.human-check { display: flex; align-items: center; gap: 12px; width: 300px; height: 65px; margin: 14px auto 0; padding: 0 12px; background: #323232; border: 1px solid #b5b5b5; border-radius: 3px; cursor: pointer; color: #e5e5e5; font-size: 14px; text-align: left; }
.human-check input { position: absolute; opacity: 0; pointer-events: none; }
.hc-box { flex: 0 0 auto; width: 24px; height: 24px; border: 2px solid #b5b5b5; border-radius: 3px; background: #2b2b2b; display: grid; place-items: center; }
.human-check input:checked + .hc-box { background: #22c55e; border-color: #22c55e; }
.human-check input:checked + .hc-box::after { content: "\2713"; color: #000; font-weight: 800; font-size: 16px; }
.human-check input:focus-visible + .hc-box { outline: 2px solid var(--accent); }
.hc-text { flex: 1; font-size: 15px; }
.hc-brand { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.hc-brand b { font-size: 13px; letter-spacing: 0.15em; color: var(--accent); }
.hc-brand small { font-size: 9px; color: #bbb; }
.hc-brand a { color: #ddd; text-decoration: underline; }

/* ---- Users directory: reference look ---- */
.users-hero h1 { font-size: 24px; font-weight: 500; margin: 6px 0 12px; }
.group-table th.ctr, .group-table td.ctr { text-align: center; }
.container > h2 { font-size: 15px; font-weight: 500; margin: 30px 0 10px; }

/* ---- Home: reference look (red banner links, joined pager) ---- */
.home-announce a, .home-announce span { color: #ff0000; font-size: 22px; font-weight: 700; text-decoration: underline; }
.pager { gap: 0; margin: 4px 0 26px; border: 1px solid #8a8a8a; border-radius: 4px; overflow: hidden; background: #000; }
.pager a, .pager span { min-width: 0; padding: 3px 9px; border: 0; border-right: 1px solid #8a8a8a; border-radius: 0; color: #fff; background: #000; font-size: 13px; }
.pager > :last-child { border-right: 0; }
.pager .current { background: #3a3a3a; color: #fff; font-weight: 400; }
.pager .gap { border-color: #8a8a8a; background: #000; }

/* ---- Hall Of Shame cards ---- */
.hos-title { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: 0.02em; color: #ff0000; margin: 24px 0 4px; text-transform: uppercase; }
.hos-sub { text-align: center; color: var(--text-faint); margin: 0 0 24px; }
.hos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 40px; }
.hos-card { background: #000; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.hos-photo { height: 200px; background: #000; display: grid; place-items: center; border-bottom: 1px solid var(--border); }
.hos-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hos-photo span { font-size: 64px; font-weight: 800; color: #2a2a2a; }
.hos-body { padding: 12px 16px 16px; text-align: center; }
.hos-name { font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.hos-reason { font-size: 13.5px; color: var(--text-dim); max-height: 120px; overflow-y: auto; line-height: 1.5; }

/* Hall Of Shame title: animated rainbow */
.hos-title {
  background: linear-gradient(90deg, #ff0040, #ff8000, #ffe600, #22ff55, #00e5ff, #6a5cff, #ff2bd6, #ff0040);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: hosRainbow 14s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.15));
}
@keyframes hosRainbow { to { background-position: -300% 0; } }

/* Clicking the name in the nav opens the menu; the name itself is not a link. */
.acct-menu-trigger a, .acct-menu-head a { cursor: pointer; }
.acct-menu-head a { pointer-events: none; }

/* ---- Settings: username colour swatches ---- */
.uc-count { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.color-bar { height: 40px; border-radius: 3px; margin-bottom: 12px; border: 1px solid #333; }
.swatches { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-bottom: 14px; }
.swatch { margin: 0; cursor: pointer; display: block; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch span { display: block; aspect-ratio: 1; border-radius: 3px; border: 1px solid #333; }
.swatch:hover span { transform: scale(1.1); }
.swatch input:checked + span { outline: 2px solid #fff; outline-offset: 1px; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- Settings: avatar / banner rows ---- */
.set-label { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.set-avatar-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.set-avatar-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; background: #1a1a1a; }
.set-wide { display: block; width: 100%; padding: 12px; background: #262626; border: 1px solid #262626; border-radius: 3px; color: #fff; font-weight: 600; cursor: pointer; }
.set-wide:hover { background: #333; }
.set-avatar-row .set-wide { height: 100%; }

/* ---- Home: welcome popup + fireworks ---- */
#fwCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
body:has(#fwCanvas) .container, body:has(#fwCanvas) header.site-header { position: relative; z-index: 1; }
.welcome-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; padding: 16px; }
.welcome-modal[hidden] { display: none; }
.welcome-box { width: 100%; max-width: 680px; background: #000; border: 1px solid #262626; border-radius: 4px; padding: 26px 28px; text-align: center; }
.welcome-box h2 { margin: 0 0 12px; font-size: 24px; }
.welcome-box p { margin: 0 0 16px; font-size: 14px; color: #ddd; }
.welcome-box a { color: #fff; text-decoration: underline; }
.welcome-box button { width: 100%; padding: 11px; margin: 4px 0 16px; background: #5a5a5a; border: 0; border-radius: 3px; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.welcome-box button:hover { background: #6a6a6a; }
.welcome-small { font-size: 13px !important; margin-bottom: 10px !important; }

/* ---- Paste / user tables: square, white headers, zebra rows (reference look) ---- */
.paste-table, .group-table { border: 0; border-radius: 0; overflow: visible; margin-bottom: 18px; }
.paste-table th, .group-table th { background: #181818; color: #fff; font-weight: 700; padding: 8px 8px; border: 0; }
.paste-table td, .group-table td { padding: 6px 8px; border: 0; color: #fff; }
.paste-table td.meta, .group-table td.meta { color: #fff; }
.paste-table tbody tr:nth-child(odd), .group-table tbody tr:nth-child(odd) { background: #181818; }
.paste-table tbody tr:nth-child(even), .group-table tbody tr:nth-child(even) { background: #000; }
.paste-table td a:not([style]) { color: #fff; }
.paste-table tr:hover, .group-table tr:hover { background: inherit; }
.pager .current { color: #8ec5ff; }

/* ---- Users directory: aligned columns + small details from the reference ---- */
.group-table { table-layout: fixed; }
.group-table th:nth-child(1) { width: 9%; }
.group-table th:nth-child(2) { width: 23.6%; }
.group-table th:nth-child(3) { width: 20%; }
.group-table th:nth-child(4) { width: 25.8%; }
.group-table th:nth-child(5) { width: 21.6%; }
.users-hero h1 { font-size: 20px; font-weight: 500; margin: 8px 0 14px; }
.home-search-label { color: #9a9a9a; font-size: 13px; }
.home-count { color: #bdbdbd; }
.users-hero .home-search-row input { width: 216px; }
.container > h2 { margin: 36px 0 8px; font-size: 14px; font-weight: 400; color: #fff; }

/* ---- Users directory: size match with the reference ---- */
.users-wrap { max-width: 733px; margin: 0 auto; }
.group-table, .paste-table { line-height: 18px; margin-bottom: 10px; }
.group-table th, .paste-table th { padding: 6px 8px; }
.group-table td, .paste-table td { padding: 7px 8px; }
.users-wrap .container > h2, .users-wrap > h2 { margin: 30px 0 8px; font-size: 14px; font-weight: 400; color: #fff; }
.users-hero .home-search-row input { width: 216px; height: 28px; padding: 4px 10px; border-radius: 3px; background: #1d1d1d; border-color: #1d1d1d; font-size: 13px; }
.users-hero .home-search-row button { height: 28px; padding: 0 16px; border-radius: 3px; background: #1f1f1f; font-size: 13px; }

/* ---- New paste sidebar: reference look, locked options greyed out ---- */
.compose-side .cs-change { color: #9a9a9a; font-size: 12px; margin-left: 4px; }
.compose-side input, .compose-side select { height: 40px; border-radius: 4px; }
.compose-side input:disabled, .compose-side select:disabled { opacity: 0.45; cursor: not-allowed; }
.cs-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 13px; color: var(--text-dim); }
.cs-check input { width: auto; height: auto; margin: 0; }
.cs-upgrade { color: #e11d1d; font-size: 13px; text-align: left; margin: 14px 0 0; }

/* ================= Chat (chx / cm) ================= */
.chx { position: relative; border: 1px solid #1d1d1d; background: #000; border-radius: 10px; overflow: hidden; }
.chx-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #1d1d1d; background: #000; }
.chx-title { font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
.chx-title span { color: #555; font-weight: 400; margin-right: 3px; }
.chx-sub { font-size: 12px; color: #666; margin-top: 2px; }
.chx-online { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #8a8a8a; }
.chx-online i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
.chx-online b { color: #e5e5e5; font-weight: 600; font-variant-numeric: tabular-nums; }
.chx-log { height: 64vh; min-height: 360px; overflow-y: auto; padding: 8px 0 14px; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.chx-log::-webkit-scrollbar { width: 8px; }
.chx-log::-webkit-scrollbar-thumb { background: #262626; border-radius: 8px; }
.chx-empty { text-align: center; color: #555; padding: 48px 0; }
.chx-day { display: flex; align-items: center; gap: 12px; margin: 18px 18px 4px; color: #555; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.chx-day::before, .chx-day::after { content: ""; flex: 1; height: 1px; background: #1a1a1a; }

.cm { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 6px 18px 6px 14px; margin-top: 10px; }
.cm:hover { background: #000; }
.cm.cont { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.cm.cont .cm-av, .cm.cont .cm-head { display: none; }
.cm.cont .cm-main { grid-column: 2; }
.cm.mine::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: #f97316; border-radius: 2px; }
.cm.mention { background: rgba(249, 115, 22, 0.07); }
.cm.mention::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #f59e0b; }
.cm.fresh { animation: cmIn 0.22s ease-out; }
@keyframes cmIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cm-av { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; text-decoration: none; background: hsl(var(--h), 32%, 20%); color: hsl(var(--h), 75%, 78%); font-weight: 700; font-size: 15px; }
.cm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-av:hover { text-decoration: none; }
.cm-main { min-width: 0; }
.cm-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.25; }
.cm-time { font: 11px Consolas, "SF Mono", monospace; color: #555; }
.cm-body { margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: #d6d6d6; word-break: break-word; }
.cm-at { color: #f6a35c; background: rgba(249, 115, 22, 0.14); padding: 0 3px; border-radius: 3px; }
.cm-time-side { display: none; position: absolute; left: 14px; top: 3px; width: 38px; text-align: center; font: 10px Consolas, monospace; color: #555; }
.cm.cont:hover .cm-time-side { display: block; }

.chx-jump { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); border: 1px solid #333; background: #000; color: #e5e5e5; border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer; }
.chx-jump[hidden] { display: none; }
.chx-jump:hover { border-color: #f97316; }
.chx-compose { padding: 12px 16px; border-top: 1px solid #1d1d1d; background: #000; }
.chx-compose form { display: flex; align-items: center; gap: 10px; margin: 0; height: 44px; padding: 0 6px 0 14px; background: #000; border: 1px solid #232323; border-radius: 8px; transition: border-color 0.15s; }
.chx-compose form:focus-within { border-color: rgba(249, 115, 22, 0.7); }
.chx-compose input { flex: 1; height: 42px; margin: 0; padding: 0; background: transparent; border: 0; outline: 0; box-shadow: none; font-size: 14.5px; }
.chx-count { font: 11px Consolas, monospace; color: #444; }
.chx-send { height: 32px; padding: 0 16px; border: 0; border-radius: 6px; background: #f97316; color: #000; font-weight: 700; font-size: 13px; cursor: pointer; }
.chx-send:hover { background: #fb923c; }
.chx-error { color: var(--danger); font-size: 13px; margin: 8px 0 0; min-height: 1em; }
.chx-note, .chx-restricted { margin: 0; text-align: center; font-size: 13px; color: #8a8a8a; }
.chx-restricted { color: #eab308; }

/* ================= Tickets (tx) ================= */
.tx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 22px 0 18px; padding-bottom: 16px; border-bottom: 1px solid #1d1d1d; }
.tx-h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.tx-sub { margin: 4px 0 0; font-size: 13px; color: #777; }
.tx-back { display: inline-block; margin-bottom: 8px; font-size: 12px; color: #777; }
.tx-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #f97316; background: #f97316; color: #000; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.tx-btn:hover { background: #fb923c; border-color: #fb923c; text-decoration: none; color: #000; }
.tx-btn.ghost { background: transparent; border-color: #2a2a2a; color: #ddd; }
.tx-btn.ghost:hover { border-color: #444; background: #000; color: #fff; }
.tx-btn.danger { background: transparent; border-color: #5b1f1f; color: #f87171; }
.tx-btn.danger:hover { background: #1a0a0a; }

.tx-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #1d1d1d; border-radius: 8px; margin-bottom: 18px; overflow: hidden; }
.tx-stat { padding: 14px 18px; border-right: 1px solid #1d1d1d; }
.tx-stat:last-child { border-right: 0; }
.tx-stat b { display: block; font: 600 24px/1 Consolas, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
.tx-stat span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #666; }
.tx-stat.hot b { color: #f97316; }

.tx-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tx-tabs { display: flex; gap: 22px; }
.tx-tabs button, .tx-tabs a { background: none; border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 6px 0; font-size: 13px; color: #777; cursor: pointer; text-decoration: none; }
.tx-tabs button:hover, .tx-tabs a:hover { color: #ddd; text-decoration: none; }
.tx-tabs .active { color: #fff; border-bottom-color: #f97316; }
.tx-search-wrap { position: relative; }
.tx-search { width: 260px; height: 34px; margin: 0; padding: 0 34px 0 34px; border-radius: 6px; background: #0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; border: 1px solid #222; color: #e5e5e5; font-size: 13px; -webkit-appearance: none; appearance: none; }
.tx-search:focus { outline: 0; border-color: #444; }
.tx-search::-webkit-search-cancel-button { display: none; }
.tx-search-wrap kbd { position: absolute; right: 9px; top: 8px; font: 11px Consolas, monospace; color: #555; border: 1px solid #2a2a2a; border-radius: 4px; padding: 0 5px; line-height: 16px; pointer-events: none; }

.tx-list { border: 1px solid #1d1d1d; border-radius: 8px; overflow: hidden; }
.tx-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 96px; gap: 16px; align-items: center; padding: 14px 18px; color: inherit; border-bottom: 1px solid #161616; }
.tx-row:last-child { border-bottom: 0; }
.tx-row:hover { background: #000; text-decoration: none; }
.tx-dot { width: 8px; height: 8px; border-radius: 50%; background: #444; }
.tx-row.waiting .tx-dot { background: #f97316; }
.tx-row.answered .tx-dot { background: #60a5fa; }
.tx-subject { font-weight: 600; font-size: 14.5px; color: #f1f1f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-preview { margin-top: 3px; font-size: 13px; color: #6f6f6f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-preview b { color: #9a9a9a; font-weight: 500; }
.tx-id { font: 12px Consolas, "SF Mono", monospace; color: #555; }
.tx-when { text-align: right; font-size: 12px; color: #6f6f6f; }
.tx-chip { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 4px; border: 1px solid #2a2a2a; color: #888; white-space: nowrap; }
.tx-chip.waiting { color: #fb923c; border-color: rgba(249, 115, 22, 0.45); }
.tx-chip.answered { color: #93c5fd; border-color: rgba(96, 165, 250, 0.4); }
.tx-chip.closed { color: #777; }
.tx-empty { text-align: center; padding: 48px 16px; color: #666; font-size: 14px; }
.tx-empty[hidden] { display: none; }
@media (max-width: 720px) { .tx-row { grid-template-columns: 10px minmax(0, 1fr); } .tx-row .tx-chip, .tx-row .tx-when { display: none; } .tx-stats { grid-template-columns: 1fr 1fr 1fr; } }

.tx-new { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; align-items: start; }
@media (max-width: 860px) { .tx-new { grid-template-columns: 1fr; } }
.tx-label { display: block; margin: 20px 0 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #777; }
.tx-label:first-child { margin-top: 0; }
.tx-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tx-cat { display: block; cursor: pointer; margin: 0; }
.tx-cat input { position: absolute; opacity: 0; pointer-events: none; }
.tx-cat span { display: block; padding: 10px 12px; border: 1px solid #222; border-radius: 6px; background: #000; }
.tx-cat b { display: block; font-size: 13.5px; color: #e5e5e5; }
.tx-cat small { display: block; margin-top: 2px; font-size: 12px; color: #666; }
.tx-cat:hover span { border-color: #3a3a3a; }
.tx-cat input:checked + span { border-color: #f97316; background: rgba(249, 115, 22, 0.06); }
.tx-field { height: 40px; background: #000; border-color: #222; border-radius: 6px; margin: 0; }
textarea.tx-field { height: auto; min-height: 220px; font-family: inherit; line-height: 1.55; resize: vertical; }
.tx-counter { text-align: right; margin: 6px 0 16px; font: 11px Consolas, monospace; color: #555; }
.tx-notes { border-left: 1px solid #1d1d1d; padding-left: 22px; }
.tx-notes h3 { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #777; font-weight: 600; }
.tx-notes ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.tx-notes li { counter-increment: n; position: relative; padding-left: 26px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: #9a9a9a; }
.tx-notes li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 11px Consolas, monospace; color: #f97316; }
.tx-notes li b { color: #e5e5e5; font-weight: 600; }

.tx-view { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .tx-view { grid-template-columns: 1fr; } }
.tx-thread { display: flex; flex-direction: column; }
.tx-msg { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid #151515; }
.tx-msg:first-child { padding-top: 4px; }
.tx-av { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; font-weight: 700; background: hsl(var(--h), 32%, 20%); color: hsl(var(--h), 75%, 78%); }
.tx-av img { width: 100%; height: 100%; object-fit: cover; }
.tx-msg-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.tx-msg-head strong { color: #f1f1f1; }
.tx-staff { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: #f97316; border: 1px solid rgba(249, 115, 22, 0.5); border-radius: 3px; padding: 0 5px; line-height: 15px; }
.tx-time { font-size: 12px; color: #666; }
.tx-text { margin-top: 5px; white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.6; color: #d4d4d4; }
.tx-msg.staff { position: relative; }
.tx-msg.staff::before { content: ""; position: absolute; left: -14px; top: 18px; bottom: 18px; width: 2px; background: #555; border-radius: 2px; }
.tx-reply { margin-top: 20px; border: 1px solid #222; border-radius: 8px; background: #000; }
.tx-reply:focus-within { border-color: #3a3a3a; }
.tx-reply textarea { display: block; width: 100%; min-height: 110px; margin: 0; padding: 14px; border: 0; background: transparent; border-radius: 8px 8px 0 0; font-family: inherit; font-size: 14.5px; line-height: 1.55; resize: vertical; outline: 0; }
.tx-reply-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid #181818; }
.tx-hint { font-size: 12px; color: #666; }
.tx-hint kbd { font: 11px Consolas, monospace; border: 1px solid #2a2a2a; border-radius: 4px; padding: 0 5px; color: #888; }
.tx-canned { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 10px 0; font-size: 12px; color: #666; align-items: center; }
.tx-canned button { background: none; border: 1px solid #222; color: #999; border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.tx-canned button:hover { border-color: #f97316; color: #fdba74; }
.tx-closed { margin-top: 20px; padding: 14px; text-align: center; border: 1px dashed #2a2a2a; border-radius: 8px; color: #888; font-size: 13px; }
.tx-side { border: 1px solid #1d1d1d; border-radius: 8px; padding: 6px 16px; position: sticky; top: 16px; }
.tx-side dl { margin: 0; }
.tx-side div { padding: 11px 0; border-bottom: 1px solid #151515; }
.tx-side div:last-child { border-bottom: 0; }
.tx-side dt { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #666; margin-bottom: 3px; }
.tx-side dd { margin: 0; font-size: 13.5px; color: #e0e0e0; }
.tx-side form { margin: 0; padding: 12px 0 8px; }
.tx-side .tx-btn { width: 100%; }

/* ---- Pager: no orange, white digits, grey current page (reference) ---- */
.pager a, .pager a:visited { color: #fff; }
.pager .current { background: #2e2e2e; color: #fff; border-color: #8a8a8a; font-weight: 400; }
.pager a:hover { background: #1e1e1e; color: #fff; }

/* ---- Profile: copy of the reference layout ---- */
.profile-head { border: 1px solid #262626; border-radius: 3px; background: #181818; margin-bottom: 16px; overflow: hidden; }
.profile-banner { width: 100%; height: auto; aspect-ratio: 5 / 1; max-height: none; object-fit: cover; border-radius: 0; display: block; }
.profile-banner-empty { height: auto; background: #000 !important; }
.profile-bar { display: flex; align-items: flex-start; gap: 14px; padding: 7px 8px 9px; background: #181818; }
.profile-avatar { width: 98px; height: 98px; border-radius: 2px; object-fit: cover; flex: 0 0 auto; background: #333; }
.profile-meta { padding-top: 0; }
.profile-name { font-size: 14px; font-weight: 700; line-height: 1.3; margin: 0 0 14px; }
.profile-bio { font-size: 14px; font-weight: 700; margin: 0 0 6px; line-height: 1.45; }
.profile-bio a { color: #ff5555; }
.profile-follow-counts { gap: 16px; font-size: 14px; }
.profile-follow-counts a { color: #777; }
.profile-follow-counts a strong { color: #fff; }
.profile-action { display: flex; align-items: center; }
.profile-action .pill { background: #000; border: 1px solid #444; border-radius: 999px; padding: 6px 14px; font-size: 13px; color: #fff; }
.profile-action form { margin: 0; }

.profile-cols { grid-template-columns: minmax(0, 1fr) 287px; gap: 16px; }
.profile-cols table.kv { width: 100%; border: 1px solid #262626; border-radius: 2px; background: #000; margin-bottom: 16px; }
.profile-cols table.kv td { padding: 6px 8px; height: 30px; border-bottom: 1px solid #262626; color: #fff; font-size: 14px; }
.profile-cols table.kv tr:last-child td { border-bottom: 0; }
.profile-cols table:not(.kv) { border: 0; border-radius: 0; line-height: 18px; }
.profile-cols table:not(.kv) th { background: #181818; color: #fff; font-weight: 700; padding: 7px 8px; border: 0; }
.profile-cols table:not(.kv) td { padding: 7px 8px; border: 0; color: #fff; }
.profile-cols table:not(.kv) td a { color: #fff; }
.profile-cols table:not(.kv) td.meta { color: #fff; }
.profile-cols table:not(.kv) tbody tr:hover { background: inherit; }

.pc-panel { border: 1px solid #262626; border-radius: 2px; background: #000; display: flex; flex-direction: column; max-height: 375px; }
.pc-head { padding: 9px 8px; border-bottom: 1px solid #262626; font-size: 14px; font-weight: 700; color: #fff; }
.pc-add { background: #000; border: 1px solid #444; border-radius: 3px; padding: 2px 9px; font-size: 11px; color: #fff; cursor: pointer; }
.pc-list { flex: 1; max-height: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2e2e2e #101010; }
.pc-list::-webkit-scrollbar { width: 6px; }
.pc-list::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 3px; }
.pc-item { padding: 8px 8px 9px; border-bottom: 1px solid #262626; }
.pc-item-head { font-size: 14px; }
.pc-time { color: #9a9a9a; font-size: 14px; }
.pc-body { font-size: 14px; color: #fff; margin-top: 0; }

/* ---- Profile: tighter name / bio spacing ---- */
.profile-name { margin: 0 0 4px; }
.profile-bio { margin: 0 0 4px; }
.profile-bio > *:last-child { margin-bottom: 0; }

/* ---- Keep the nav the same on every page (the upgrade page ships its own "nav" styles) ---- */
header.site-header nav.links { display: flex; flex: 0 1 auto; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: flex-start; height: auto; width: auto; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; position: static; }

/* ---- Paste page: no site header, full-width content + right column (reference) ---- */
.paste-page .paste-main { max-width: none; margin: 0; padding: 0; }
.paste-page .compose { margin: 0; border: 0; border-radius: 0; min-height: 100vh; display: flex; align-items: stretch; }
.paste-page .compose-editor { flex: 1; min-width: 0; }
.paste-page .paste-view-body { min-height: 100vh; padding: 28px 40px; font-family: 'SF Mono', Consolas, 'DejaVu Sans Mono', monospace; font-size: 11px; line-height: 14px; background: #000; }
.paste-page .compose-side { width: 260px; flex: 0 0 260px; background: #000; border-left: 1px solid #1c1c1c; padding: 14px 16px; position: relative; }
.paste-page .compose-side .cs-brand { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #262626; }
.paste-page .pv-meta { font-size: 13px; gap: 8px 10px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #262626; }
.paste-page .pv-meta dd { color: #cfcfcf; }
.paste-page .pv-raw { background: #565656; font-weight: 700; font-size: 12px; padding: 7px 10px; border-radius: 3px; color: #fff; }
.pv-bump { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 3px; background: #143518; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; margin-bottom: 8px; }
.pv-bump:hover { background: #1b4a21; }
.pv-bump:disabled { opacity: 0.5; cursor: not-allowed; }
.paste-page .pv-comments { padding: 0 40px 40px; }
.pp-burger { position: fixed; top: 16px; right: 276px; z-index: 50; width: 30px; height: 30px; border: 0; border-radius: 3px; background: #181818; color: #fff; font-size: 16px; cursor: pointer; }
.pp-burger:hover { background: #262626; }
@media (max-width: 800px) {
  .paste-page .compose { flex-direction: column-reverse; }
  .paste-page .compose-side { width: auto; flex: none; border-left: 0; }
  .pp-burger { right: 12px; }
}

.pv-pin { display: inline-block; vertical-align: -1px; margin-right: 7px; color: #8b93a1; transform: rotate(40deg); }

/* Paste page: the burger toggles full-screen reading (hides the info column). */
.paste-page.pp-full .compose-side { display: none; }
.paste-page.pp-full .pp-burger { right: 16px; }
.paste-page.pp-full .paste-view-body { padding-left: 56px; padding-right: 56px; }

.pp-burger { display: grid; place-items: center; padding: 0; line-height: 0; }
.pp-burger svg { display: block; }
.compose-side details { text-align: center; }
.compose-side details summary { list-style: none; cursor: pointer; text-align: center; }
.compose-side details summary::-webkit-details-marker { display: none; }

/* ================= Admin panel ================= */
.admin-shell { gap: 0; margin: 0 -20px; background: #000; border-top: 1px solid #1a1a1a; min-height: calc(100vh - 80px); }
.admin-sidebar { width: 232px; flex: 0 0 232px; background: #000; border-right: 1px solid #1a1a1a; padding: 16px 10px 24px; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #222 transparent; }
.as-brand { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 10px 14px; }
.as-brand b { font-size: 15px; letter-spacing: 0.02em; }
.as-brand span { font-size: 11px; color: #f97316; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.as-search { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 8px 10px; background: #000; border: 1px solid #1f1f1f; border-radius: 6px; color: #777; font-size: 12.5px; cursor: pointer; }
.as-search:hover { border-color: #333; color: #aaa; background: #000; }
.as-search kbd { font: 10px Consolas, monospace; border: 1px solid #2a2a2a; border-radius: 3px; padding: 0 4px; color: #666; }
.as-group { padding: 16px 10px 5px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #5a5a5a; font-weight: 600; }
.admin-sidebar a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 1px 0; border-radius: 6px; font-size: 13.5px; color: #9a9a9a; box-shadow: none; }
.admin-sidebar a:hover { background: #000; color: #e5e5e5; text-decoration: none; }
.admin-sidebar a.active { background: #151515; color: #fff; box-shadow: inset 2px 0 0 #f97316; }
.admin-sidebar a.as-back { margin-top: 18px; color: #666; }
.as-badge { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #f97316; color: #000; font-size: 10.5px; font-weight: 700; text-align: center; line-height: 17px; }
.as-badge.blue { background: #1d3557; color: #9cc7ff; }
.admin-content { flex: 1; min-width: 0; padding: 0 28px 48px; }
.ac-top { margin: 0 -28px 22px; padding: 12px 28px; border-bottom: 1px solid #1a1a1a; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #666; background: #000; }
.admin-content h1, .ad-h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.ad-lead { margin: 0 0 18px; color: #777; font-size: 13.5px; }
@media (max-width: 860px) { .admin-sidebar { position: static; width: auto; flex: none; max-height: none; border-right: 0; border-bottom: 1px solid #1a1a1a; } .admin-shell { flex-direction: column; } .admin-content { padding: 0 16px 32px; } .ac-top { margin: 0 -16px 18px; } }

/* shared look for every admin page */
.admin-content table { width: 100%; border: 1px solid #1a1a1a; border-radius: 8px; overflow: hidden; border-collapse: separate; border-spacing: 0; margin: 14px 0; background: #000; }
.admin-content th { background: #000; color: #7a7a7a; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid #1a1a1a; }
.admin-content td { padding: 9px 12px; border-bottom: 1px solid #121212; color: #d8d8d8; font-size: 13.5px; }
.admin-content tbody tr:last-child td { border-bottom: 0; }
.admin-content tbody tr:hover { background: #000; }
.admin-content .card, .admin-content .panel { background: #000; border: 1px solid #1a1a1a; border-radius: 8px; box-shadow: none; }
.admin-content .card h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; font-weight: 600; }
.admin-content input[type=text], .admin-content input[type=number], .admin-content input[type=password], .admin-content input[type=search], .admin-content select, .admin-content textarea { background: #000; border: 1px solid #222; border-radius: 6px; }
.admin-content input:focus, .admin-content select:focus, .admin-content textarea:focus { border-color: #3a3a3a; outline: 0; }
.admin-content button, .admin-content .btn { border-radius: 6px; }
.admin-content .success { border-radius: 6px; margin-bottom: 14px; }

/* dashboard */
.ad-tiles { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #1a1a1a; border-radius: 8px; overflow: hidden; margin: 14px 0 18px; }
.ad-tile { padding: 14px 16px; border-right: 1px solid #1a1a1a; background: #000; }
.ad-tile:last-child { border-right: 0; }
.ad-tile span { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6a6a6a; }
.ad-tile b { display: block; margin: 6px 0 2px; font: 600 24px/1.1 Consolas, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
.ad-tile small { color: #5f9e6f; font-size: 11.5px; }
@media (max-width: 1000px) { .ad-tiles { grid-template-columns: repeat(2, 1fr); } }
.ad-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .ad-cols { grid-template-columns: 1fr; } }
.ad-card { background: #000; border: 1px solid #1a1a1a; border-radius: 8px; padding: 6px 16px 10px; margin-bottom: 18px; }
.ad-card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #7a7a7a; font-weight: 600; border-bottom: 1px solid #141414; margin-bottom: 4px; }
.ad-more { font-size: 11px; letter-spacing: 0; text-transform: none; color: #f97316; }
.ad-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #101010; color: #c9c9c9; font-size: 13.5px; }
.ad-row:last-child { border-bottom: 0; }
.ad-row:hover { text-decoration: none; color: #fff; }
.ad-row b { font: 600 14px Consolas, monospace; color: #666; }
.ad-row.hot b { color: #000; background: #f97316; border-radius: 9px; padding: 0 8px; }
.ad-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 10px 0 6px; }
.ad-chart-title { font-size: 12px; color: #8a8a8a; margin-bottom: 6px; }
.ad-chart { width: 100%; height: 90px; background: repeating-linear-gradient(0deg, transparent, transparent 24px, #101010 24px, #101010 25px); border-bottom: 1px solid #1c1c1c; }
.ad-log { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #101010; font-size: 13px; color: #8a8a8a; }
.ad-log:last-child { border-bottom: 0; }
.ad-log b { color: #e5e5e5; font-weight: 600; }
.ad-log em { color: #aaa; font-style: normal; font-family: Consolas, monospace; font-size: 12px; }
.ad-log time { margin-left: auto; font-size: 11.5px; color: #555; }
.ad-status { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #101010; font-size: 13.5px; color: #c9c9c9; }
.ad-status:last-child { border-bottom: 0; }
.ad-status i { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 4px; border: 1px solid #2a2a2a; }
.ad-status i.ok { color: #4ade80; border-color: rgba(74, 222, 128, 0.35); }
.ad-status i.warn { color: #fb923c; border-color: rgba(249, 115, 22, 0.45); }
.ad-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 6px; }

.ad-btn { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 9px 13px; background: #000; border: 1px solid #222; border-radius: 6px; color: #ddd; font-size: 13px; cursor: pointer; text-decoration: none; text-align: left; }
.ad-btn:hover { border-color: #3a3a3a; background: #000; text-decoration: none; color: #fff; }
.ad-btn small { font-size: 11.5px; color: #777; }
.ad-btn.primary { background: #f97316; border-color: #f97316; color: #000; font-weight: 700; align-items: center; }
.ad-btn.primary:hover { background: #fb923c; }

/* control center */
.ad-switch-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 13px 0; border-bottom: 1px solid #101010; margin: 0; }
.ad-switch-row:last-child { border-bottom: 0; }
.ad-switch-label { font-size: 14px; color: #f0f0f0; font-weight: 600; }
.ad-switch-desc { font-size: 12.5px; color: #6f6f6f; margin-top: 2px; }
.ad-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; margin: 0; cursor: pointer; }
.ad-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.ad-switch span { position: absolute; inset: 0; background: #1c1c1c; border: 1px solid #2c2c2c; border-radius: 999px; transition: background 0.15s; }
.ad-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #777; transition: transform 0.15s, background 0.15s; }
.ad-switch input:checked + span { background: #1c3a24; border-color: #2f6b40; }
.ad-switch input:checked + span::after { transform: translateX(18px); background: #4ade80; }
.ad-form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; }
.ad-form-row input[type=text] { flex: 1; min-width: 240px; margin: 0; }
.ad-form-row input[type=number] { width: 140px; margin: 0; }
.ad-form-row select { width: 130px; margin: 0; }
.ad-form-row label { margin: 0; color: #aaa; font-size: 13px; }
.ad-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 0 6px; }
.ad-tools form { margin: 0; }
.ad-tools .ad-btn { width: 100%; padding: 12px 14px; }

/* command palette */
.cmd { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.7); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.cmd[hidden] { display: none; }
.cmd-box { width: min(560px, calc(100vw - 32px)); background: #000; border: 1px solid #2a2a2a; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); }
.cmd-box input { width: 100%; margin: 0; padding: 15px 16px; background: transparent; border: 0; border-bottom: 1px solid #1c1c1c; border-radius: 0; font-size: 15px; outline: 0; }
.cmd-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.cmd-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 6px; color: #cfcfcf; font-size: 13.5px; text-decoration: none; }
.cmd-item.sel, .cmd-item:hover { background: #161616; color: #fff; text-decoration: none; }
.cmd-kind { flex: 0 0 52px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #666; }
.cmd-empty { padding: 20px; text-align: center; color: #666; font-size: 13px; }
.cmd-foot { padding: 8px 14px; border-top: 1px solid #1c1c1c; font-size: 11.5px; color: #666; }
.cmd-foot kbd { font: 10px Consolas, monospace; border: 1px solid #2a2a2a; border-radius: 3px; padding: 0 4px; margin-right: 3px; }

/* site notice */
.site-notice { padding: 8px 16px; text-align: center; font-size: 13px; font-weight: 600; color: #fff; }
.site-notice.info { background: #14304f; }
.site-notice.warn { background: #5a3d08; color: #ffe08a; }
.site-notice.alert { background: #5a1414; color: #ffc2c2; }

/* Admin pages get a wider canvas, and wide tables scroll instead of being cut off. */
body:has(.admin-shell) .container { max-width: 1500px; }
.admin-content { overflow-x: auto; }

/* ---- Followers / following list (reference look) ---- */
.fl-card { border: 1px solid #1c1c1c; background: #000; margin: 12px 0 14px; }
.fl-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px; font-size: 14px; font-weight: 700; color: #fff; }
.fl-head a { color: #fff; text-decoration: underline; font-weight: 400; }
.fl-table { width: 100%; border: 0; border-radius: 0; margin: 0; border-collapse: collapse; background: transparent; }
.fl-table th { background: #141414; color: #fff; font-weight: 700; padding: 9px 8px; border: 0; text-align: left; }
.fl-table td { padding: 7px 8px; border: 0; border-top: 1px solid #1c1c1c; color: #fff; height: 34px; }
.fl-table .r { text-align: right; width: 130px; }
.fl-table td:first-child, .fl-table th:first-child { padding-left: 8px; }
.fl-table .empty { text-align: center; color: #777; height: 60px; }
.fl-table tr:hover { background: transparent; }
.fl-pager { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 20px; font-size: 13px; color: #888; }
.fl-pager a { color: #fff; }

/* ================= Admin: plain console look (overrides the earlier admin block) ================= */
.admin-shell { background: #000; border-top: 1px solid #1d1d20; }
.admin-sidebar { width: 196px; flex: 0 0 196px; background: #000; border-right: 1px solid #1d1d20; padding: 0 0 20px; }
.as-brand { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 10px; margin: 0 0 8px; border-bottom: 1px solid #1d1d20; }
.as-brand b { font-size: 14px; }
.as-brand span { font-size: 12px; color: #85858b; text-transform: none; letter-spacing: 0; font-weight: 400; }
.as-search { margin: 0 10px 4px; width: calc(100% - 20px); padding: 5px 8px; border-radius: 2px; background: #000; border: 1px solid #232326; font-size: 12px; }
.as-search kbd { border-radius: 2px; }
.as-group { padding: 12px 14px 3px; font-size: 12px; letter-spacing: 0; text-transform: none; color: #6d6d72; font-weight: 600; }
.admin-sidebar a { margin: 0; padding: 5px 14px; border-radius: 0; font-size: 13px; color: #a1a1a6; }
.admin-sidebar a:hover { background: #151517; color: #fff; }
.admin-sidebar a.active { background: #1a1a1d; color: #fff; box-shadow: inset 3px 0 0 #b45f2a; }
.admin-sidebar a.as-back { margin-top: 14px; color: #6d6d72; }
.as-badge { min-width: 0; padding: 0 5px; border-radius: 2px; background: transparent; border: 1px solid #4a3216; color: #d9983f; font: 11px/15px Consolas, monospace; }
.as-badge.blue { border-color: #1e3550; color: #7fb0e6; background: transparent; }
.admin-content { padding: 0 22px 40px; }
.admin-content h1, .ad-h1 { margin: 16px 0 14px; padding-bottom: 10px; border-bottom: 1px solid #1d1d20; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.ad-lead { margin: -4px 0 14px; color: #85858b; font-size: 13px; }

.admin-content table { border: 1px solid #1d1d20; border-radius: 0; background: #000; margin: 10px 0 16px; }
.admin-content th { background: #131315; color: #9a9aa0; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 6px 10px; border-bottom: 1px solid #1d1d20; }
.admin-content td { padding: 6px 10px; border-bottom: 1px solid #151517; font-size: 13px; color: #d4d4d8; }
.admin-content tbody tr:hover { background: #000; }
.admin-content .card, .admin-content .panel, .ad-card { border-radius: 0; background: #000; border: 1px solid #1d1d20; }
.admin-content .card { padding: 12px 14px; }
.admin-content .card h2 { font-size: 13px; letter-spacing: 0; text-transform: none; color: #e4e4e7; font-weight: 700; }
.admin-content input[type=text], .admin-content input[type=number], .admin-content input[type=password], .admin-content input[type=search], .admin-content select, .admin-content textarea { border-radius: 2px; background: #000; border: 1px solid #2a2a2e; font-size: 13px; }
.admin-content button, .admin-content .btn { border-radius: 2px; }
.admin-content button:not(.primary):not(.danger):not(.small) { background: #1a1a1d; border: 1px solid #2a2a2e; }
.admin-content button.primary, .admin-content .btn.primary { background: #b45f2a; border-color: #b45f2a; color: #fff; }

.ad-tiles { border-radius: 0; border-color: #1d1d20; margin: 0 0 16px; }
.ad-tile { background: #000; border-right-color: #1d1d20; padding: 10px 14px; }
.ad-tile span { font-size: 12px; letter-spacing: 0; text-transform: none; color: #85858b; }
.ad-tile b { font: 600 19px/1.2 Consolas, "SF Mono", monospace; margin: 3px 0 1px; }
.ad-tile small { color: #85858b; font-size: 12px; }
.ad-card { padding: 4px 14px 8px; margin-bottom: 14px; }
.ad-card-head { padding: 10px 0 8px; font-size: 13px; letter-spacing: 0; text-transform: none; color: #e4e4e7; font-weight: 700; border-bottom: 1px solid #1d1d20; }
.ad-more { color: #85858b; text-decoration: underline; font-weight: 400; }
.ad-row { padding: 7px 0; border-bottom: 1px solid #151517; font-size: 13px; }
.ad-row b { font: 13px Consolas, monospace; color: #85858b; }
.ad-row.hot b { background: transparent; border: 1px solid #4a3216; color: #d9983f; border-radius: 2px; padding: 0 6px; }
.ad-chart { height: 70px; background: none; border-bottom: 1px solid #1d1d20; border-left: 1px solid #1d1d20; }
.ad-chart-title { font-size: 12px; color: #85858b; }
.ad-log { padding: 6px 0; border-bottom: 1px solid #151517; font-size: 12.5px; }
.ad-status { padding: 7px 0; border-bottom: 1px solid #151517; font-size: 13px; }
.ad-status i { border-radius: 2px; font-weight: 400; background: transparent; padding: 0 7px; }
.ad-actions { gap: 6px; }
.ad-btn { border-radius: 2px; background: #131315; border-color: #2a2a2e; padding: 7px 11px; font-size: 13px; }
.ad-btn.primary { background: #b45f2a; border-color: #b45f2a; color: #fff; }
.ad-btn.primary:hover { background: #c46d33; }
.ad-switch { width: 34px; height: 18px; }
.ad-switch span { border-radius: 2px; background: #151517; border-color: #2e2e32; }
.ad-switch span::after { top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 1px; background: #6d6d72; }
.ad-switch input:checked + span { background: #20301f; border-color: #3d5a3a; }
.ad-switch input:checked + span::after { transform: translateX(16px); background: #6fbf73; }
.ad-switch-label { font-size: 13.5px; }
.cmd-box { border-radius: 3px; }
.cmd-item { border-radius: 2px; }

/* ---- Ticket thread: staff tag (reference look) ---- */
.tx-msg-head { gap: 10px; align-items: center; }
.tx-msg-head strong { font-size: 15px; font-weight: 700; }
.tx-staff { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 1px 8px; border: 1px solid currentColor; border-radius: 3px; line-height: 17px; background: transparent; }
.tx-time { font-size: 13px; color: #8a8a8a; }

/* ---- Staff quick replies ---- */
.qr { margin-top: 20px; border: 1px solid #1d1d20; background: #000; }
.qr-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #1d1d20; }
.qr-head b { font-size: 13px; margin-right: auto; }
.qr-head input[type=search] { width: 160px; height: 28px; margin: 0; padding: 0 8px; border-radius: 2px; font-size: 12.5px; background: #000; border: 1px solid #2a2a2e; }
.qr-head select { width: 110px; height: 28px; margin: 0; padding: 0 6px; border-radius: 2px; font-size: 12.5px; background: #000; border: 1px solid #2a2a2e; }
.qr-list { max-height: 270px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2a2e transparent; }
.qr-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #151517; }
.qr-item:last-child { border-bottom: 0; }
.qr-item:hover { background: #121214; }
.qr-main { min-width: 0; }
.qr-title { font-size: 13px; font-weight: 600; color: #e4e4e7; }
.qr-group { display: inline-block; margin-right: 8px; font: 11px Consolas, monospace; color: #85858b; font-weight: 400; }
.qr-prev { margin-top: 2px; font-size: 12px; color: #77777d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.qr-act { display: flex; gap: 6px; flex: 0 0 auto; }
.qr-act button { height: 26px; padding: 0 11px; font-size: 12px; border-radius: 2px; border: 1px solid #2a2a2e; background: #17171a; color: #ddd; cursor: pointer; }
.qr-act button:hover { background: #202024; }
.qr-send { border-color: #b45f2a !important; color: #f0b98f !important; }
.qr-close { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-top: 1px solid #1d1d20; font-size: 12.5px; color: #9a9aa0; }
.qr-close input { width: auto; margin: 0; }

/* ---- Pin icon: thinner, lighter ---- */
.pv-pin { color: #9aa0a8; margin-right: 8px; vertical-align: -1px; transform: rotate(38deg); }

/* ---- Compose sidebar: one-to-one with the reference ---- */
.ascii-logo { display: block; text-align: center; text-decoration: none; }
.ascii-logo pre { display: inline-block; margin: 6px 0 4px; text-align: left; font: 13px/13px "Courier New", Consolas, monospace; letter-spacing: 1px; white-space: pre; background: linear-gradient(90deg, #8fb2d6 0%, #b9c4cf 45%, #d8c48a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ascii-plain { font: 22px "Courier New", Consolas, monospace; color: #b9c4cf; padding: 12px 0; }
.compose-side { background: #000; padding: 12px 16px 16px; }
.compose-side .cs-brand { margin: 0 0 10px; padding: 0 0 12px; border-bottom: 1px solid #262626; }
.compose-side .cs-user { text-align: center; padding: 0 0 12px; margin: 0 0 14px; border-bottom: 1px solid #262626; font-size: 14px; }
.compose-side .cs-change { color: #9a9a9a; font-size: 14px; margin-left: 6px; }
.compose-side input[type=text], .compose-side input[type=password], .compose-side select { height: 33px; padding: 0 10px; margin: 0 0 10px; background: #3a3a3a; border: 0; border-radius: 3px; font-size: 14px; color: #e8e8e8; }
.compose-side input::placeholder { color: #8a8a8a; }
.compose-side input:disabled, .compose-side select:disabled { opacity: 1; color: #6c6c6c; background: #353535; cursor: not-allowed; }
.compose-side select { padding-right: 24px; }
.compose-side button[type=submit] { width: 100%; height: 28px; margin: 0; padding: 0; background: #505050; border: 0; border-radius: 3px; color: #fff; font-weight: 700; font-size: 13px; }
.compose-side button[type=submit]:hover { background: #5c5c5c; }
.cs-upgrade { color: #c41b1b; font-size: 14px; line-height: 1.5; margin: 14px 0 0; }
.compose-side .cs-tos { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid #262626; text-align: left; font-size: 14px; color: #fff; }
.compose-side .cs-tos a { color: #fff; text-decoration: underline; }
.cs-more { margin: 2px 0 12px; }
.cs-more summary { cursor: pointer; font-size: 12px; color: #77777d; list-style: none; }
.cs-more summary::-webkit-details-marker { display: none; }
.cs-more[open] summary { margin-bottom: 10px; }
.cs-check { font-size: 13px; }

/* ---- Home header / search block: sizes copied from the reference ---- */
.container, .nav-row { max-width: 1054px; }
.brand { font-size: 18px; font-weight: 500; letter-spacing: 0; color: #fff; }
.nav-row .brand { margin-right: 8px; }
nav.links a, header.site-header nav.links a { font-size: 14px; font-weight: 400; color: #8d919a; }
nav.links a.active { color: #fff; font-weight: 500; }
.nav-user, .nav-user a { font-size: 14px; }
.home-hero { padding-top: 50px; }
.home-logo { margin-bottom: 20px; }
.home-search-label { font-size: 14px; color: #8e8e8e; margin: 14px 0 6px; }
.home-radios { gap: 14px; font-size: 14px; color: #9a9a9a; margin-bottom: 8px; }
.home-search-row input { width: 240px; height: 32px; padding: 0 10px; font-size: 14px; background: #2a2a2a; border: 0; border-radius: 3px; }
.home-search-row input::placeholder { color: #8a8a8a; }
.home-search-row button { height: 32px; padding: 0 14px; font-size: 14px; background: #1c1c1c; border: 0; border-radius: 3px; color: #fff; }
.home-count { font-size: 14px; color: #bdbdbd; margin: 14px 0 10px; }
.home-count .n { color: #7cc4ff; }
.pager { border: 1px solid #b5b5b5; border-radius: 3px; margin: 0 0 22px; }
.pager a, .pager span { padding: 2px 8px; line-height: 18px; font-size: 14px; border-right-color: #b5b5b5; }
.pager .gap { border-color: #b5b5b5; }
body:has(.home-hero) .container > h2 { font-size: 18px; font-weight: 400; margin: 14px 0 10px; color: #fff; }

/* ---- Home tables + pager: exact row heights and column positions from the reference ---- */
.home-count .n { color: inherit; }
.pager a.disabled { opacity: 1; color: #fff; }
.pager a, .pager span { padding: 0 8px; line-height: 22px; }
.paste-table { table-layout: fixed; }
.paste-table th { padding: 8px 8px; }
.paste-table td { padding: 9px 8px; }
.paste-table th:nth-child(1) { width: 58.1%; }
.paste-table th:nth-child(2) { width: 8%; }
.paste-table th:nth-child(3) { width: 6.6%; }
.paste-table th:nth-child(4) { width: 18.4%; }
.paste-table th:nth-child(5) { width: 8.9%; }
.paste-table td:nth-child(1), .paste-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paste-table td:nth-child(4) { padding-left: 12px; }
.paste-table th:nth-child(4) { padding-left: 12px; }
.paste-table th:nth-child(1) { width: 56.5%; }
.paste-table th:nth-child(5) { width: 10.5%; }
.paste-table td:nth-child(5) { white-space: nowrap; }

/* ---- Nav hover: tab brightens to white under the mouse ---- */
header.site-header nav.links a { transition: color 0.12s; }
header.site-header nav.links a:hover { color: #fff; text-decoration: none; }
header.site-header nav.links a.active:hover { color: #fff; }

/* ---- Home search block: radios and button sizes from the reference ---- */
.home-radios { gap: 18px; font-size: 15px; color: #9b9b9b; }
.home-radios label { gap: 8px; }
.home-radios input { width: 16px; height: 16px; accent-color: #fff; margin: 0; }
.home-search-row { gap: 7px; }
.home-search-row button { padding: 0 12px; min-width: 70px; }


/* chat: scrollbar without arrow buttons */
.chx-log::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.chx-note a { color: #fff; text-decoration: underline; }

/* chat header: plain, no status dot */
.chx-title { font-size: 15px; letter-spacing: 0; }
.chx-title strong { font-weight: 700; color: #fff; }
.chx-title span { margin-left: 7px; font-weight: 400; color: #8a8a8a; }
.chx-online { font-size: 13px; color: #7d7d82; }
.chx-online i { display: none; }
.chx-online b { color: #7d7d82; font-weight: 400; }

/* ---- Pure black surfaces everywhere (no grey panels) ---- */
html, body { background: #000; }
.admin-content th { background: #000; }
.ad-btn, .ad-switch span, .as-search { background: #000; }
.admin-content table, .ad-card, .admin-content .card, .admin-content .panel { background: #000; }
.pv-pin { transform: none; }

/* chat closed: the reason sits in the input itself */
.chx-off { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 6px 0 14px; background: #000; border: 1px solid #2a2a2a; border-radius: 8px; height: 44px; }
.chx-off input { flex: 1; height: 42px; margin: 0; padding: 0; background: transparent; border: 0; outline: 0; box-shadow: none; font-size: 14.5px; cursor: not-allowed; }
.chx-off input::placeholder { color: #d6a23a; opacity: 1; }
.chx-off .chx-send { opacity: 0.35; cursor: not-allowed; background: #2a2a2a; color: #888; }

/* admin pastes: title search */
.ap-search { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.ap-search input[type=search] { width: 320px; height: 32px; margin: 0; padding: 0 10px; }
.ap-search button { height: 32px; padding: 0 14px; }
.ap-search a { color: #9a9aa0; font-size: 13px; }
.ap-search span { color: #85858b; font-size: 13px; }

/* Home logo: brighter, closer to pure white lines */
.home-logo .site-logo-img { filter: grayscale(1) brightness(1.45) contrast(1.25); }


/* ---- Account menu: plain name, pill close button, tall rows (reference look) ---- */
.acct-menu { background: #000; border: 1px solid #1c1c1c; border-radius: 8px; width: 330px; }
.acct-menu-head { padding: 18px 18px 12px; border-bottom: 0; gap: 14px; }
.acct-name { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; word-break: break-word; }
.acct-menu .acct-close { display: inline-block; width: auto; padding: 8px 18px; border: 1px solid #333; border-radius: 999px; background: #0a0a0a; color: #e5e5e5; font-size: 14px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.acct-menu .acct-close:hover { background: #161616; }
.acct-menu a, .acct-menu form button { padding: 14px 18px; font-size: 15px; color: #8d8d8d; border-bottom: 1px solid #1c1c1c; }
.acct-menu a:hover, .acct-menu form button:hover { color: #fff; background: #0a0a0a; }

/* ---- Home page: sizes and column positions matched to the latest reference screenshot ---- */
.home-announce { margin: 0; }
.home-announce a, .home-announce span { font-size: 20px; line-height: 29px; }
.home-logo { margin-bottom: 14px; }
.home-search-label { font-size: 15px; font-weight: 400; color: #cfcfcf; margin: 10px 0 4px; }
.home-radios { font-size: 16px; color: #cfcfcf; }
.home-radios input { width: 14px; height: 14px; }
.home-count { color: #cfcfcf; font-size: 14px; margin: 14px 0 12px; }
.pager a, .pager span { padding: 0 12px; }
.pager a.gap, .pager span.gap { padding: 0 10px; }
body:has(.home-hero) .container > h2 { font-size: 20px; margin: 18px 0 10px; }
.paste-table th { padding: 8px 8px; }
.paste-table td { padding: 8px 8px; }
.paste-table th:nth-child(1) { width: 44.5%; }
.paste-table th:nth-child(2) { width: 8%; }
.paste-table th:nth-child(3) { width: 8.8%; }
.paste-table th:nth-child(4) { width: 28.2%; }
.paste-table th:nth-child(5) { width: 10.5%; }
.paste-table td:nth-child(4), .paste-table th:nth-child(4) { padding-left: 30px; }

/* ---- Page width like the reference (1200px of content) ---- */
.container, .nav-row { max-width: 1240px; }
body:has(.admin-shell) .container { max-width: 1500px; }

/* ---- User profile: layout, greys and column alignment from the reference ---- */
.profile-cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
.profile-cols table.kv { background: #131313; border: 1px solid #262626; border-radius: 3px; margin-bottom: 20px; }
.profile-cols table.kv td { height: 34px; padding: 6px 8px; border-bottom: 1px solid #1f1f1f; }
.profile-cols table:not(.kv) { margin-bottom: 20px; }
.profile-cols table:not(.kv) th { background: #181818; padding: 8px 8px; }
.profile-cols table:not(.kv) td { padding: 8px 8px; }
.profile-cols table:not(.kv) tbody tr { background: #151515; }
.profile-cols table:not(.kv) th:nth-child(2), .profile-cols table:not(.kv) td:nth-child(2),
.profile-cols table:not(.kv) th:nth-child(3), .profile-cols table:not(.kv) td:nth-child(3) { text-align: center; }
.profile-cols table:not(.kv) th:nth-child(4), .profile-cols table:not(.kv) td:nth-child(4) { text-align: right; }
.pc-panel { background: #151515; border-color: #262626; max-height: 420px; }
.pc-head { padding: 12px 8px; border-bottom: 1px solid #262626; }
.pc-item { padding: 9px 8px 10px; border-bottom: 1px solid #262626; }
.pc-add { border-radius: 999px; padding: 3px 11px; font-size: 12px; }

/* ---- Users page: sizes and column positions from the latest reference screenshot ---- */
.users-wrap { max-width: 852px; }
.users-hero h1 { font-size: 28px; font-weight: 500; margin: 6px 0 14px; }
.users-hero .home-search-label { font-size: 14px; font-weight: 700; color: #8e8e8e; margin: 12px 0 6px; }
.users-hero .home-search-row input { width: 240px; height: 32px; }
.users-hero .home-search-row button { height: 32px; }
.users-hero .home-count { font-size: 13px; color: #a8a8a8; margin: 14px 0 6px; }
.group-table th, .group-table td { padding-top: 8px; padding-bottom: 8px; }
.group-table th:nth-child(1) { width: 8.5%; }
.group-table th:nth-child(2) { width: 57%; }
.group-table th:nth-child(3) { width: 9.6%; }
.group-table th:nth-child(4) { width: 9.4%; }
.group-table th:nth-child(5) { width: 15.5%; }
.users-wrap > h2 { font-size: 16px; margin: 38px 0 10px; }

/* Users search box: same look as the reference (bigger text, lighter field) */
.users-hero .home-search-row input { font-size: 16px; background: #2a2a2a; border: 0; border-radius: 3px; padding: 0 10px; }
.users-hero .home-search-row input::placeholder { color: #8a8a8a; }
.users-hero .home-search-row button { font-size: 16px; padding: 0 14px; background: #1c1c1c; border: 0; border-radius: 3px; }
.users-hero .home-count { font-size: 14px; }

/* ---- Paste tables: centred Comments / Views, column positions from the latest reference ---- */
.paste-table th:nth-child(1) { width: 45%; }
.paste-table th:nth-child(2) { width: 10%; }
.paste-table th:nth-child(3) { width: 10%; }
.paste-table th:nth-child(4) { width: 24%; }
.paste-table th:nth-child(5) { width: 11%; }
.paste-table th:nth-child(2), .paste-table td:nth-child(2),
.paste-table th:nth-child(3), .paste-table td:nth-child(3) { text-align: center; }
.paste-table th:nth-child(4), .paste-table td:nth-child(4) { padding-left: 12px; }
.paste-table tbody tr:nth-child(odd) { background: #191919; }
.paste-table tbody tr:nth-child(even) { background: #000; }

/* ================= Settings page: one narrow column on a dark panel (reference look) ================= */
body:has(.settings-grid) h1 { font-size: 20px; margin: 14px 0 12px; }
.settings-grid { display: block; background: #0d0d0d; border: 1px solid #1a1a1a; padding: 16px 16px 8px; margin-bottom: 30px; }
.settings-grid > div { width: 254px; max-width: 100%; }
.settings-grid .card { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 22px; box-shadow: none; }
.settings-grid .card h2 { margin: 0 0 4px !important; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #c9c9c9; }
.settings-grid .card p, .settings-grid .card .meta, .settings-grid .card label { font-size: 13px; color: #c9c9c9; margin: 0 0 6px; }
.settings-grid .card p strong, .settings-grid .card .username-preview { color: #fff; }
.settings-grid input[type=text], .settings-grid input[type=password], .settings-grid input[type=email], .settings-grid input[type=number], .settings-grid select { height: 29px; padding: 0 9px; margin: 0 0 8px; background: #353535; border: 0; border-radius: 0; font-size: 14px; color: #e6e6e6; }
.settings-grid input::placeholder { color: #8a8a8a; }
.settings-grid textarea { height: 92px; min-height: 0; padding: 6px 9px; margin: 0 0 8px; background: #353535; border: 0; border-radius: 0; font: 13px/1.35 'SF Mono', Consolas, monospace; color: #e6e6e6; }
.settings-grid button, .settings-grid .set-wide { display: block; width: 100%; height: 29px; padding: 0; margin: 0 0 8px; background: #262626; border: 0; border-radius: 0; color: #fff; font-size: 13.5px; font-weight: 400; cursor: pointer; }
.settings-grid button:hover { background: #303030; }
.settings-grid button.btn-reset { background: #a63a3a; }
.settings-grid button.btn-reset:hover { background: #bb4545; }
.settings-grid button:disabled { opacity: 0.5; cursor: not-allowed; }
.settings-grid .set-label { display: none; }
.settings-grid .set-avatar-row { margin-bottom: 8px; }
.settings-grid .set-avatar-thumb { width: 29px; height: 29px; border-radius: 0; }
.settings-grid .set-avatar-row .set-wide { height: 29px; margin: 0; }
.settings-grid .color-bar { height: 29px; border: 0; border-radius: 0; margin-bottom: 8px; }
.settings-grid .swatches { gap: 5px; margin-bottom: 8px; }
.settings-grid .swatch span { border: 0; border-radius: 0; }
.settings-grid .uc-count { font-size: 13px; color: #c9c9c9; font-weight: 400; }
.em-bad { color: #ff2b2b; font-weight: 600; }
.em-ok { color: #4ade80; font-weight: 600; }

/* ---- Paste tables: fine details from the latest reference (1px row lines, shifted columns) ---- */
.paste-table td { padding: 8px 8px 7px; border-bottom: 1px solid #1f1f1f; }
.paste-table tbody tr:last-child td { border-bottom: 0; }
.paste-table th:nth-child(1) { width: 43.8%; }
.paste-table th:nth-child(2) { width: 10%; }
.paste-table th:nth-child(3) { width: 9.9%; }
.paste-table th:nth-child(4) { width: 25.4%; }
.paste-table th:nth-child(5) { width: 10.9%; }
body:has(.home-hero) .container > h2 { font-size: 19px; margin: 16px 0 10px; }
.settings-grid a { color: #fff; }
.paste-table { margin-bottom: 20px; }

/* ---- Home hero: vertical spacing and text sizes from the latest reference ---- */
.home-hero { padding-top: 18px; padding-bottom: 0; }
.home-logo .site-logo-img { max-height: 216px; }
.home-search-label { font-size: 14px; font-weight: 700; color: #9a9a9a; margin: 10px 0 4px; }
.home-radios label { font-size: 15px; }
.home-search-row { gap: 6px; }
.home-search-row button { min-width: 74px; }
.home-count { font-size: 13px; color: #b0b0b0; margin: 14px 0 12px; }
.pager { margin-bottom: 8px; }
body:has(.home-hero) .container > h2 { margin-top: 10px; }

/* ---- Users page: vertical spacing matched to the reference ---- */
.users-hero h1 { margin-bottom: 10px; }
.users-hero .home-search-label { margin-bottom: 2px; }
.users-hero .home-count { margin-bottom: 0; }
.users-wrap > h2 { margin-top: 30px; }

/* ---- Users group tables: row lines, zebra order, column start and group spacing from the reference ---- */
.group-table td { padding: 8px 8px 7px; border-bottom: 1px solid #1f1f1f; }
.group-table tbody tr:last-child td { border-bottom: 0; }
.group-table tbody tr:nth-child(odd) { background: #000; }
.group-table tbody tr:nth-child(even) { background: #161616; }
.group-table th:nth-child(1) { width: 9.5%; }
.group-table th:nth-child(2) { width: 56%; }
.group-table th:nth-child(3) { width: 9.6%; }
.group-table th:nth-child(4) { width: 9.4%; }
.group-table th:nth-child(5) { width: 15.5%; }
.users-wrap > h2 { margin-top: 37px; }

/* ---- Profile bio: plain weight, white underlined links (reference) ---- */
.profile-bio { font-weight: 400; }
.profile-bio strong, .profile-bio b { font-weight: 400; }
.profile-bio a { color: #fff; text-decoration: underline; font-weight: 400; }

/* ---- Top bar: sizes matched to the reference (brand slightly larger, wider gaps between tabs) ---- */
.brand { font-size: 20px; }
.nav-row .brand { margin-right: 14px; }
header.site-header nav.links { gap: 23px; }
nav.links a, header.site-header nav.links a { font-size: 14.5px; }
.nav-row { padding-top: 10px; padding-bottom: 10px; }
.brand { line-height: 30px; }

/* ASCII logo: plain white like the reference */
.ascii-logo pre { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: #fff; font: 13px/13px "Courier New", Consolas, monospace; letter-spacing: 0; margin: 10px 0 8px; }

/* Active tab: bright white on every page (Home included) */
header.site-header nav.links a.active, header.site-header nav.links a.active:hover { color: #fff; font-weight: 500; }

/* ---- Hall page: reference layout (3 columns, red title, photo on top, scrolling text) ---- */
.hos-title { animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ff0a54; -webkit-text-fill-color: #ff0a54; filter: none; font-size: 30px; font-weight: 700; letter-spacing: 0.04em; margin: 22px 0 22px; }
.hos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto 40px; }
.hos-card { background: #0b0b0b; border: 1px solid #1f1f1f; border-radius: 0; display: flex; flex-direction: column; }
.hos-photo { height: 260px; background: #0b0b0b; border-bottom: 1px solid #1f1f1f; }
.hos-photo img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.hos-photo span { font-size: 80px; color: #222; }
.hos-body { padding: 14px 10px 10px; flex: 1; }
.hos-name { font-size: 19px; font-weight: 600; color: #ff0a54; text-decoration: underline; margin-bottom: 10px; }
.hos-reason { font-size: 13.5px; color: #c9c9c9; line-height: 1.5; height: 125px; max-height: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #444 transparent; }
@media (max-width: 900px) { .hos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hos-grid { grid-template-columns: 1fr; } }
.hos-reason { white-space: pre-line; }

/* Pasted card markup (hallCards.html) */
@keyframes rainbow { 0%{color:hsl(0,100%,50%)} 10%{color:hsl(36,100%,50%)} 20%{color:hsl(72,100%,50%)} 30%{color:hsl(108,100%,50%)} 40%{color:hsl(144,100%,50%)} 50%{color:hsl(180,100%,50%)} 60%{color:hsl(216,100%,50%)} 70%{color:hsl(252,100%,50%)} 80%{color:hsl(288,100%,50%)} 90%{color:hsl(324,100%,50%)} 100%{color:hsl(360,100%,50%)} }
.hall-pasted { max-width: 1200px; margin: 0 auto 40px; }
.hall-pasted .grid-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hall-pasted a { text-decoration: underline; }
@media (max-width: 900px) { .hall-pasted .grid-container { grid-template-columns: 1fr; } }

/* Hall card photo: keep any image inside the 260px photo area */
.hos-photo { overflow: hidden; min-height: 0; }
.hos-photo img { width: 100%; height: 100%; max-height: 260px; object-fit: contain; }

/* Hall title: rainbow, 2rem, as in the reference markup */
.hos-title { margin: 2rem 0; text-align: center; font-size: 2rem; letter-spacing: 2px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ff0000; -webkit-text-fill-color: currentColor; filter: none; animation: rainbow 3s linear infinite; }

/* Tighter gap between the name tag and the badge icons */
.badge-icon { margin-left: 3px; }
.badge-icon + .badge-icon { margin-left: 2px; }
.badge-icon { margin-left: 5px; }

/* Admin tab: red dot while items are waiting for staff */
header.site-header nav.links a.admin-link { position: relative; }
.admin-dot { position: absolute; top: -3px; right: -9px; width: 7px; height: 7px; border-radius: 50%; background: #e11d1d; box-shadow: 0 0 5px rgba(225,29,29,0.8); }
.admin-dot { width: auto; height: auto; min-width: 14px; padding: 1px 4px; border-radius: 3px; top: -8px; right: -16px; font-size: 10px; font-weight: 700; line-height: 12px; text-align: center; color: #fff; box-shadow: none; background: #e11d1d; }

/* ================= Admin panel: reference design (flat black sidebar with icons, grey cards, green-outline buttons) ================= */
body:has(.admin-shell) { overflow-x: hidden; }
body:has(.admin-shell) .container { max-width: none; padding-left: 0; padding-right: 0; }
.admin-shell { margin: 0; width: 100%; background: #000; border-top: 1px solid #1a1a1a; min-height: calc(100vh - 60px); }
.admin-sidebar { width: 146px; flex: 0 0 146px; background: #000; border-right: 1px solid #1f1f1f; padding: 0 0 24px; position: sticky; top: 0; max-height: 100vh; }
.as-brand { display: block; text-align: center; padding: 22px 10px 16px; margin: 0; border: 0; }
.as-brand b { font-size: 15px; font-weight: 700; letter-spacing: 0.03em; color: #fff; }
.as-search { margin: 0 8px 6px; width: calc(100% - 16px); padding: 4px 6px; background: #000; border: 1px solid #2a2a2a; border-radius: 3px; font-size: 11px; }
.as-search span { display: none; }
.as-search::before { content: 'Search'; color: #777; }
.as-group { font-size: 0; padding: 0; height: 6px; margin: 0; }
.admin-sidebar a { display: flex; align-items: center; gap: 9px; padding: 5px 12px; margin: 0; border-radius: 0; font-size: 12px; font-weight: 500; color: #fff; background: transparent; box-shadow: none; }
.admin-sidebar a:hover { background: transparent; color: #cfcfcf; }
.admin-sidebar a.active { background: transparent; color: #7d7d7d; box-shadow: none; }
.admin-sidebar .as-ic { flex: none; opacity: 0.95; }
.admin-sidebar .as-label { white-space: nowrap; }
.as-badge { margin: -7px 0 0 -3px; align-self: flex-start; min-width: 0; padding: 0 3px; border: 0; border-radius: 2px; background: #d11; color: #fff; font: 700 8px/11px Arial, sans-serif; }
.as-badge.blue { background: #d11; color: #fff; border: 0; }
.admin-sidebar a.as-back { margin-top: 10px; color: #8a8a8a; }
.as-collapse { display: grid; place-items: center; width: 44px; height: 44px; margin: 16px 0 0 12px; padding: 0; border-radius: 50%; background: #000; border: 0; color: #fff; cursor: pointer; box-shadow: 0 0 0 1px #1c1c1c; }
.as-collapse:hover { background: #111; }
.admin-shell.collapsed .admin-sidebar { width: 52px; flex-basis: 52px; }
.admin-shell.collapsed .as-label, .admin-shell.collapsed .as-search, .admin-shell.collapsed .as-brand b { display: none; }
.admin-shell.collapsed .as-brand::before { content: 'A'; font-weight: 700; color: #fff; }
.admin-shell.collapsed .admin-sidebar a { justify-content: center; padding: 7px 0; position: relative; }
.admin-shell.collapsed .as-badge { position: absolute; margin: -8px 0 0 12px; }
.admin-shell.collapsed .as-collapse { margin-left: 4px; transform: scaleX(-1); }
.admin-content { padding: 0 14px 48px; background: #000; }
.admin-content h1, .ad-h1 { margin: 18px 0 12px; padding: 0; border: 0; font-size: 15px; font-weight: 600; color: #fff; }
.admin-content h2 { font-size: 13px; font-weight: 600; }
.admin-content .meta, .admin-content label, .admin-content .hint { color: #a9a9a9; font-size: 11px; }
.admin-content .card, .admin-content .panel { background: #262626; border: 0; border-radius: 4px; padding: 12px 14px; box-shadow: none; }
.admin-content .card h2 { text-transform: none; letter-spacing: 0; font-size: 13px; color: #fff; }
.admin-content input[type=text], .admin-content input[type=number], .admin-content input[type=password], .admin-content input[type=search], .admin-content input[type=email], .admin-content select, .admin-content textarea { background: #1c1c1c; border: 0; border-radius: 2px; color: #ddd; font-size: 11.5px; padding: 6px 8px; }
.admin-content input::placeholder, .admin-content textarea::placeholder { color: #8a8a8a; }
.admin-content button, .admin-content .btn { border-radius: 2px; background: #000; border: 2px solid #2d7a33; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 5px 12px; }
.admin-content button:hover { background: #0b160c; }
.admin-content button.danger, .admin-content .danger { border-color: #9b2a2a; }
.admin-content button.small { padding: 3px 9px; }
.admin-content table { background: #000; border: 0; border-radius: 0; }
.admin-content th { background: #1c1c1c; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 8px 10px; border-bottom: 0; }
.admin-content td { background: #000; color: #e4e4e4; font-size: 11.5px; padding: 8px 10px; border-bottom: 1px solid #262626; }
.admin-content tbody tr:hover td { background: #0a0a0a; }

/* Notification bell next to the account name */
.nav-bell { position: relative; display: inline-flex; align-items: center; margin-right: 12px; color: #cfcfcf; vertical-align: middle; }
.nav-bell:hover { color: #fff; text-decoration: none; }
.nav-bell-n { position: absolute; top: -7px; right: -8px; min-width: 10px; padding: 0 3px; border-radius: 2px; background: #d11; color: #fff; font: 700 9px/12px Arial, sans-serif; text-align: center; }

.acct-balance { padding: 0 0 10px; margin: -4px 0 4px; font-size: 12px; color: #4ade80; }

/* ================= Admin: plain pass (no mono numerals, no hairline boxes, no orange; same grey cards as the reference) ================= */
.admin-content, .admin-content * { font-family: Inter, Arial, Helvetica, sans-serif; }
.admin-content code, .admin-content pre, .admin-content kbd { font-family: Consolas, "Courier New", monospace; }
.admin-content h1, .ad-h1 { font-size: 15px; font-weight: 600; margin: 16px 0 12px; padding: 0; border: 0; letter-spacing: 0; }
.admin-content a { color: #d9d9d9; text-decoration: underline; }
.admin-content a.ad-btn, .admin-content a.ad-row, .admin-content .ad-more { text-decoration: none; }
.admin-content .meta, .admin-content p, .admin-content .ad-lead { color: #a9a9a9; }

/* stat tiles */
.ad-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border: 0; border-radius: 0; overflow: visible; margin: 0 0 12px; }
.ad-tile { background: #262626; border: 0; border-radius: 4px; padding: 12px 14px; }
.ad-tile span { font-size: 11px; letter-spacing: 0; text-transform: none; color: #a9a9a9; }
.ad-tile b { margin: 4px 0 2px; font: 700 20px/1.2 Inter, Arial, sans-serif; font-variant-numeric: normal; color: #fff; }
.ad-tile small { color: #a9a9a9; font-size: 11px; }

/* cards */
.ad-cols { gap: 12px; }
.ad-card { background: #262626; border: 0; border-radius: 4px; padding: 10px 14px 10px; margin-bottom: 12px; }
.ad-card-head { padding: 2px 0 8px; margin: 0 0 4px; border: 0; font-size: 13px; letter-spacing: 0; text-transform: none; color: #fff; font-weight: 600; }
.ad-more { font-size: 11px; color: #bbb; text-decoration: underline; }
.ad-row { padding: 7px 0; border-bottom: 1px solid #333; color: #e4e4e4; font-size: 12px; }
.ad-row b { font: 600 12px Inter, Arial, sans-serif; color: #a9a9a9; }
.ad-row.hot b { background: #d11; color: #fff; border-radius: 2px; padding: 0 5px; font-size: 10px; }
.ad-chart-title { font-size: 11px; color: #a9a9a9; }
.ad-chart { background: #1c1c1c; border-bottom: 0; }
.ad-chart polyline { stroke: #d9d9d9; }
.ad-log { padding: 6px 0; border-bottom: 1px solid #333; font-size: 12px; color: #a9a9a9; }
.ad-log b { color: #fff; }
.ad-log em { color: #cfcfcf; font-family: Inter, Arial, sans-serif; font-size: 12px; }
.ad-log time { color: #8a8a8a; font-size: 11px; }
.ad-status { padding: 7px 0; border-bottom: 1px solid #333; font-size: 12px; color: #e4e4e4; }
.ad-status i { border: 0; border-radius: 0; padding: 0; background: none; font-size: 12px; font-weight: 600; }
.ad-status i.ok { color: #4ade80; }
.ad-status i.warn { color: #a9a9a9; }

/* buttons: black with a green outline, no orange anywhere in the panel */
.ad-actions { gap: 8px; }
.ad-btn, .admin-content button, .admin-content .btn, .admin-content button.primary, .admin-content .ad-btn.primary { background: #000; border: 2px solid #2d7a33; border-radius: 2px; color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 6px 12px; align-items: center; justify-content: center; text-align: center; }
.ad-btn:hover, .admin-content button:hover, .admin-content button.primary:hover { background: #0b160c; color: #fff; opacity: 1; }
.admin-content button.danger, .admin-content .btn.danger { border-color: #9b2a2a; }
.ad-btn small { display: none; }

/* switches (Control center) */
.ad-switch-row { padding: 9px 0; border-bottom: 1px solid #333; }
.ad-switch-label { font-size: 12.5px; color: #fff; font-weight: 600; }
.ad-switch-desc { font-size: 11px; color: #a9a9a9; }
.ad-switch span { background: #1c1c1c; border: 0; }
.ad-switch input:checked + span { background: #2d7a33; border: 0; }
.ad-switch input:checked + span::after { background: #fff; }

/* card text on the bulk/broadcast pages */
.admin-content .card { background: #262626; border: 0; border-radius: 4px; }
.admin-content .card p, .admin-content .card .meta { color: #a9a9a9; font-size: 11.5px; }
.admin-content .card a { color: #d9d9d9; }
.admin-content .success { background: #1c3a24; border: 0; color: #cfeedd; border-radius: 2px; }
.admin-content .error { background: #3a1c1c; border: 0; color: #f0cfcf; border-radius: 2px; }

/* Verify-you-are-human box + auth links */
.human-check { width: 100%; max-width: 100%; height: 56px; box-sizing: border-box; margin: 14px 0 0; padding: 0 14px; gap: 12px; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 6px; color: #e8e8e8; transition: border-color .15s, background .15s; }
.human-check:hover { border-color: #444; background: #111; }
.hc-box { width: 22px; height: 22px; border: 2px solid #666; border-radius: 50%; background: transparent; transition: background .15s, border-color .15s; }
.human-check:hover .hc-box { border-color: #aaa; }
.human-check input:checked + .hc-box { background: #fff; border-color: #fff; }
.human-check input:checked + .hc-box::after { color: #000; font-size: 14px; }
.hc-text { font-size: 14px; font-weight: 500; color: #e8e8e8; }
.hc-brand b { color: #fff; font-size: 12px; letter-spacing: 0.18em; }
.hc-brand small { color: #8a8a8a; }
.hc-brand a { color: #bbb; }
.hc-brand a:hover { color: #fff; }
.auth-links a { color: #fff; text-decoration: underline; }

/* Login / register: centered card */
.auth-wrap { max-width: 400px; margin: 48px auto 70px; padding: 30px 30px 24px; background: #0b0b0b; border: 1px solid #222; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.auth-wrap h1 { font-size: 24px; font-weight: 600; letter-spacing: 0.01em; margin: 0 0 22px; }
.auth-wrap label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: #9a9a9a; }
.auth-wrap input[type=text], .auth-wrap input[type=password], .auth-wrap input[type=email] { box-sizing: border-box; width: 100%; height: 42px; padding: 0 13px; margin-bottom: 16px; background: #161616; border: 1px solid #2a2a2a; border-radius: 6px; color: #f0f0f0; font-size: 14px; transition: border-color .15s, background .15s; }
.auth-wrap input[type=text]:focus, .auth-wrap input[type=password]:focus, .auth-wrap input[type=email]:focus { outline: 0; border-color: #666; background: #1b1b1b; }
.auth-wrap button[type="submit"] { height: 44px; margin-top: 18px; background: #fff; border: 0; border-radius: 6px; color: #000; font-size: 14px; font-weight: 600; transition: background .15s; }
.auth-wrap button[type="submit"]:hover { background: #dcdcdc; }
.auth-wrap .error { margin: 0 0 16px; padding: 10px 12px; background: #2a1414; border: 1px solid #5a2222; border-radius: 6px; color: #f3b9b9; font-size: 13px; text-align: left; }
.auth-links { margin-top: 20px; padding-top: 16px; border-top: 1px solid #1e1e1e; font-size: 13.5px; color: #9a9a9a; }
.acct-balance { padding: 0 18px 12px; margin: 0; text-align: center; font-size: 13px; }
.acct-balance { text-align: left; padding: 0 18px 12px; margin-top: -4px; }

/* Wallet currency picker: same look as the Select Currency popup (name left, ticker right) */
.admin-content .wl-cur { display: flex; align-items: center; justify-content: space-between; text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; padding: 12px 14px; background: #000; border: 1px solid #242424; border-radius: 0; color: #fff; }
.admin-content .wl-cur span { color: #999; font-size: 12.5px; font-weight: 400; }
.admin-content .wl-cur:hover { background: #0b0b0b; border-color: #3a3a3a; }
.admin-content .wl-cur.on { border-color: #fff; }
.admin-content .wl-search { background: #000; border: 1px solid #2b2b2b; border-radius: 0; height: 40px; font-size: 14px; padding: 0 14px; }
.admin-content .wl-list { gap: 8px; }

/* Fix: the generic auth label rule broke the verify box layout */
.auth-wrap label.human-check { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; height: 56px; font-size: 14px; color: #e8e8e8; letter-spacing: 0; text-align: left; }
.auth-wrap .human-check .hc-text { flex: 1; font-size: 14px; font-weight: 500; color: #e8e8e8; letter-spacing: 0; }
.auth-wrap .human-check .hc-brand { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.auth-wrap .human-check .hc-brand b { font-size: 12px; letter-spacing: 0.18em; color: #fff; }
.auth-wrap .human-check .hc-brand small { font-size: 9.5px; color: #8a8a8a; letter-spacing: 0; }
.auth-wrap .human-check .hc-box { flex: 0 0 auto; }

/* Login / register: back to the plain flat look (no card, no shadow, no pill shapes) */
.auth-wrap { max-width: 460px; margin: 30px auto 60px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: center; }
.auth-wrap h1 { font-size: 26px; font-weight: 500; margin: 0 0 26px; letter-spacing: 0; }
.auth-wrap label { text-align: left; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-dim); margin: 0 0 6px; }
.auth-wrap input[type=text], .auth-wrap input[type=password], .auth-wrap input[type=email] { height: auto; padding: 10px 12px; margin-bottom: 16px; background: #2b2b2b; border: 1px solid #2b2b2b; border-radius: 2px; font-size: 15px; }
.auth-wrap input[type=text]:focus, .auth-wrap input[type=password]:focus, .auth-wrap input[type=email]:focus { background: #2b2b2b; border-color: #555; }
.auth-wrap button[type="submit"] { height: auto; padding: 10px 12px; margin-top: 18px; background: #2b2b2b; border: 1px solid #2b2b2b; border-radius: 2px; color: #fff; font-size: 15px; font-weight: 400; }
.auth-wrap button[type="submit"]:hover { background: #383838; }
.auth-wrap .error { border-radius: 2px; }
.auth-links { margin-top: 16px; padding-top: 0; border-top: 0; font-size: 14px; color: #e5e5e5; }
.auth-wrap label.human-check { height: 60px; margin: 14px 0 0; background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 2px; }
.auth-wrap .human-check:hover { background: #222; border-color: #555; }
.auth-wrap .human-check .hc-box { border-radius: 2px; border: 2px solid #8a8a8a; width: 22px; height: 22px; }
.auth-wrap .human-check input:checked + .hc-box { background: #fff; border-color: #fff; }

/* Admin home + icons: plain tables like the reference, solid icons */
.admin-sidebar .as-ic { width: 14px; text-align: center; font-size: 12px; opacity: 1; }
.as-collapse svg { display: block; }
.ad-h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 8px; font-size: 14px; font-weight: 600; color: #fff; }
.ad-more { font-size: 11px; font-weight: 400; color: #bbb; text-decoration: underline; }
.admin-content .ad-r { text-align: right; }
.admin-content table td a { color: #fff; text-decoration: none; }
.admin-content table td a:hover { text-decoration: underline; }
.ad-count { display: inline-block; min-width: 14px; padding: 0 5px; border-radius: 2px; background: #d11; color: #fff; font-size: 10px; font-weight: 700; text-align: center; }
.ad-ok { color: #4ade80; font-weight: 600; }
.ad-off { color: #a9a9a9; font-weight: 600; }

/* Username color picker: more swatches + a custom colour slot */
.settings-grid .swatches { flex-wrap: wrap; }
.swatch-custom .custom-face { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.swatch-custom input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.swatch-custom input[type=radio]:checked + .custom-face { outline: 2px solid #fff; outline-offset: 1px; }
.swatch.swatch-custom input[type=color] { pointer-events: auto; opacity: 0; }
.swatch.swatch-custom .custom-face { aspect-ratio: 1; border: 0; }

/* Paste page: comments listed in the sidebar */
.pv-clist { margin-top: 14px; border-top: 1px solid #333; }
.pv-c { padding: 14px 0; border-bottom: 1px solid #333; }
.pv-c-head { font-size: 15px; line-height: 1.3; }
.pv-c-time { color: #9a9a9a; }
.pv-c-body { margin-top: 2px; font-size: 15px; color: #fff; word-break: break-word; white-space: pre-wrap; }
.acct-name a { font-size: inherit; font-weight: 700; }
/* Menu name is larger than the nav name: scale the glitter tile with it so it looks the same */
.acct-name a { font-weight: 600; }
.acct-name .staff-gif { background-size: auto; }
/* Same size and tile as the nav name so the effect is identical */
.acct-name { font-size: 14px; line-height: 1.3; }
.acct-name a { font-size: 14px; font-weight: 600; }
.acct-name .staff-gif { background-size: auto; }
/* Menu name: big again, with the glitter kept inside the letters (no stray dots around the text) */
.acct-name { font-size: 18px; line-height: 1.3; }
.acct-name a { font-size: 18px; font-weight: 600; }
.acct-name .staff-gif { background-size: auto; background-color: currentColor; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Home page text-art logo: drawn large and scaled down so it stays sharp */
.home-ascii { display: flex; justify-content: center; height: 270px; overflow: hidden; margin: 0 auto 14px; text-decoration: none; }
.home-ascii pre { flex: none; margin: 0; padding: 0; width: 700px; font: 6px/7.2px "Courier New", Consolas, monospace; letter-spacing: 0; color: #e8e8e8; white-space: pre; background: none; border: 0; transform: scale(0.2); transform-origin: top center; }
.home-ascii { height: 270px; }
.home-ascii pre { width: 780px; font: 6px/4.2px "Courier New", Consolas, monospace; letter-spacing: 0.6px; transform: scale(0.3); }

/* Text-art logo drawn on a canvas (straight and smooth) */
.home-ascii { display: flex; justify-content: center; height: auto; margin: 0 auto 14px; }
.home-ascii canvas { display: block; width: 230px; height: 270px; }

/* The logo is real text: an invisible copy sits exactly over the drawing, so it can be selected
   (selection shows in blue) and copied, and clicking it does not navigate anywhere. */
.home-ascii { position: relative; width: 230px; height: 270px; cursor: text; user-select: text; }
.home-ascii canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.home-ascii .home-ascii-text { position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 760px; font: 6px/4.2px "Courier New", Consolas, monospace; letter-spacing: 0.6px; white-space: pre; color: transparent; background: none; border: 0; transform: scale(0.3026); transform-origin: top left; user-select: text; -webkit-user-select: text; }
.home-ascii .home-ascii-text::selection { background: #0b4fd6; color: transparent; }
.home-ascii .home-ascii-text::selection { background: rgba(11, 79, 214, 0.55); color: transparent; }
/* Slightly smaller logo */
.home-ascii { width: 190px; height: 223px; margin-bottom: 10px; }
.home-ascii canvas { width: 190px; height: 223px; }
.home-ascii .home-ascii-text { transform: scale(0.25); }
/* Logo colour fix: the invisible text copy sat on top and tinted the lines peach. It now sits under the
   drawing in black (invisible on the black page), so the lines are pure white and the selection still shows. */
.home-ascii canvas { z-index: 2; }
.home-ascii .home-ascii-text { z-index: 1; color: #000; -webkit-text-fill-color: #000; }
.home-ascii .home-ascii-text::selection { background: #0b4fd6; color: #000; -webkit-text-fill-color: #000; }
/* Thinner lines and a touch wider, closer to the original */
.home-ascii { width: 200px; }
.home-ascii canvas { width: 200px; }
.home-ascii .home-ascii-text { transform: scale(0.263, 0.25); }

/* Users page: spacing matched to the reference */
.nav-row { padding-top: 9px; padding-bottom: 9px; }
.users-hero { padding-top: 13px; }
.users-wrap > h2 { margin-top: 29px; }
.users-hero { padding-top: 23px; }

/* Empty paste list: centered lowercase row under the header, like the reference */
.paste-table td.no-pastes { text-align: center; padding: 9px 12px; color: #fff; font-size: 14px; background: #000; border-bottom: 1px solid #1f1f1f; }

/* Account menu: a centered dialog over a dimmed, blurred page */
.acct-menu-backdrop.open { display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.acct-menu { position: relative; top: auto; right: auto; width: 513px; max-width: calc(100vw - 32px); min-height: 233px; padding: 16px; box-sizing: border-box; background: #0a0a0a; border: 1px solid #222; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
.acct-menu-head { padding: 0 0 14px; }
.acct-menu a, .acct-menu form button { display: block; width: 100%; box-sizing: border-box; padding: 12px 0; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #222; border-radius: 0; font-size: 15px; color: #888; }
.acct-menu a:hover, .acct-menu form button:hover { color: #fff; background: transparent; }
.acct-menu > *:last-child a, .acct-menu > form:last-child button { border-bottom: 0; }
.acct-balance { padding: 0 0 10px; }
td.no-pastes { text-align: center; padding: 9px 12px; color: #fff; font-size: 14px; background: #000; border-bottom: 1px solid #1f1f1f; }

/* Balance as its own menu row: label on the left, amount on the right */
.acct-menu-head { border-bottom: 0; padding-bottom: 12px; }
.acct-balance { display: none; }
.acct-balance-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid #222; border-bottom: 1px solid #222; font-size: 15px; color: #888; }
.acct-balance-row b { font-weight: 600; color: #4ade80; font-variant-numeric: tabular-nums; }

/* Add Paste: full-width page like the paste view - black editor filling the left, slim sidebar flush right */
.paste-page .compose-editor { display: flex; }
.paste-page .compose-editor textarea { flex: 1; width: 100%; min-height: 100vh; margin: 0; padding: 30px 16px; background: #000; border: 0; border-radius: 0; resize: none; font: 11px/14px 'SF Mono', Consolas, 'DejaVu Sans Mono', monospace; color: #e5e5e5; }
.paste-page .compose-editor textarea::placeholder { color: #8a8a8a; }
.paste-page .compose-side { background: #0c0c0c; border-left: 0; }
.paste-page > .paste-main > .error { margin: 0; border-radius: 0; }
/* Sidebar logo must fit inside the slim sidebar */
.compose-side .ascii-logo pre { font-size: 11.5px; line-height: 11.5px; letter-spacing: 0; margin: 10px 0 6px; }

/* Add Paste sidebar: copied from the reference (light grey boxes, no arrows, flat button, centered notice) */
.paste-page .compose-side input[type=text], .paste-page .compose-side input[type=password], .paste-page .compose-side select { box-sizing: border-box; width: 100%; height: 33px; margin: 0 0 9px; padding: 0 10px; background: #565656; border: 0; border-radius: 2px; color: #e6e6e6; font-size: 16px; line-height: 33px; -webkit-appearance: none; appearance: none; background-image: none; }
.paste-page .compose-side select { padding-right: 10px; }
.paste-page .compose-side input::placeholder { color: #c4c4c4; }
.paste-page .compose-side input[type=password]::placeholder, .paste-page .compose-side input:disabled::placeholder { color: #8e8e8e; }
.paste-page .compose-side input:disabled, .paste-page .compose-side select:disabled { background: #565656; color: #8e8e8e; opacity: 1; }
.paste-page .compose-side button[type=submit] { height: 28px; margin: 0; background: #565656; border: 0; border-radius: 2px; color: #fff; font-size: 14px; font-weight: 400; }
.paste-page .compose-side button[type=submit]:hover { background: #626262; }
.paste-page .compose-side details summary { color: #8a8a8a; font-size: 12px; margin: 0 0 8px; }
.paste-page .compose-side .cs-tos { margin: 14px 0 0; padding: 22px 0 22px; border-top: 1px solid #333; border-bottom: 1px solid #333; text-align: center; font-size: 14px; color: #fff; }
.paste-page .compose-side .cs-tos a { color: #9a9a9a; text-decoration: underline; }

/* Sidebar logo: thin white strokes with a few coloured characters */
.compose-side .ascii-logo pre.ascii-colored { background: none; -webkit-text-fill-color: #f2f2f2; color: #f2f2f2; font-size: 11px; line-height: 12px; font-weight: 400; }
.compose-side .ascii-logo pre.ascii-colored span { -webkit-text-fill-color: currentColor; }
.pp-burger { width: 32px; height: 32px; border-radius: 4px; background: #1a1a1a; }
/* Sidebar logo: plain white again */
.compose-side .ascii-logo pre { color: #fff; -webkit-text-fill-color: #fff; background: none; font-size: 11.5px; line-height: 11.5px; letter-spacing: 0; }

/* Wider sidebar so the notice fits on one line, like the reference */
.paste-page .compose-side { width: 290px; flex: 0 0 290px; }
.pp-burger { right: 306px; }
.paste-page.pp-full .pp-burger { right: 16px; }
.paste-page .compose-side .cs-tos { white-space: nowrap; font-size: 14px; }
@media (max-width: 800px) { .paste-page .compose-side { width: auto; flex: none; } .pp-burger { right: 12px; } .paste-page .compose-side .cs-tos { white-space: normal; } }

/* Sidebar logo + name like the reference: heavier white strokes, larger name */
.compose-side .ascii-logo pre { font-family: Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; font-weight: 700; font-size: 12px; line-height: 12px; color: #fff; -webkit-text-fill-color: #fff; background: none; }
.compose-side .cs-user { font-size: 15px; }
.compose-side .cs-user a:not(.cs-change) { font-weight: 700; }
.compose-side .cs-user .cs-change { font-size: 15px; color: #9a9a9a; }
.compose-side .ascii-logo pre { font-size: 13.5px; line-height: 13.5px; }
/* Menu button sits right against the sidebar, like the reference */
.pp-burger { top: 8px; right: 293px; }
.paste-page.pp-full .pp-burger { right: 16px; }
@media (max-width: 800px) { .pp-burger { right: 12px; } }
/* Sidebar divider lines: lighter grey, as in the reference */
.paste-page .compose-side .cs-brand, .paste-page .compose-side .cs-user, .paste-page .compose-side .pv-meta, .paste-page .compose-side .pv-sep { border-color: #4f4f4f; }
.paste-page .compose-side .cs-tos { border-top-color: #4f4f4f; border-bottom-color: #4f4f4f; }
.paste-page .compose-side .cs-user { padding: 0 0 24px; margin: 0 0 14px; }
.paste-page .compose-side .cs-brand { padding-bottom: 24px; }
.paste-page .compose-editor { position: relative; }
.paste-page .compose-editor .pp-burger { position: absolute; top: 8px; right: 3px; left: auto; }
.paste-page.pp-full .compose-editor .pp-burger { right: 16px; }
@media (max-width: 800px) { .paste-page .compose-editor .pp-burger { right: 12px; } }
.paste-page .compose-editor .pp-burger { right: 0; border-radius: 4px 0 0 4px; }
.paste-page .compose-editor .pp-burger { top: 3px; }
.paste-page .compose-editor .pp-burger { top: 0; }
.paste-page .compose-editor .pp-burger { top: -2px; }
/* "(change)" next to the name: close to it, grey, no underline */
.compose-side .cs-user .cs-change { margin-left: 0; text-decoration: none; color: #9a9a9a; }
.paste-page .compose-side .cs-user { padding: 0 0 10px; margin: 0 0 14px; }
.paste-page .compose-side .cs-brand { padding-bottom: 14px; margin-bottom: 12px; }
/* Sidebar logo: regular weight with open line spacing, like the reference */
.compose-side .ascii-logo pre { font-family: Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; font-weight: 400; font-size: 12.5px; line-height: 15.5px; letter-spacing: 0; }
/* Bigger, whiter sidebar logo */
.compose-side .ascii-logo pre { font-size: 14px; line-height: 17px; font-weight: 700; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 0 1px #fff; }

/* Notification bell: opens a small panel under the icon */
.bell-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-right: 12px; }
button.nav-bell { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; color: #cfcfcf; cursor: pointer; display: inline-flex; align-items: center; position: relative; }
button.nav-bell:hover { color: #fff; background: none; }
.bell-menu { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 120; width: 280px; padding: 6px 0; background: #0a0a0a; border: 1px solid #222; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.7); text-align: left; }
.bell-menu[hidden] { display: none; }
.bell-head { padding: 8px 14px 10px; font-size: 13px; font-weight: 700; color: #fff; border-bottom: 1px solid #222; }
.bell-menu a.bell-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13px; color: #cfcfcf; border-bottom: 1px solid #1a1a1a; text-decoration: none; }
.bell-menu a.bell-row:hover { background: #121212; color: #fff; }
.bell-row b { min-width: 14px; padding: 0 5px; border-radius: 2px; background: #d11; color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; }
.bell-empty { padding: 14px; font-size: 13px; color: #8a8a8a; }
.bell-menu a.bell-all { display: block; padding: 10px 14px 6px; font-size: 12px; color: #8a8a8a; text-decoration: none; }
.bell-menu a.bell-all:hover { color: #fff; }
.users-wrap .free-gap { height: 37px; }

/* Bio: plain bright white text, white underlined links; coloured spans keep their own colour */
.profile-bio { color: #fff; }
.profile-bio a { color: #fff; text-decoration: underline; }
.profile-bio a span, .profile-bio a font { color: inherit; }

/* Paste page: copyable link */
.compose-side input.pv-link { width: 100%; box-sizing: border-box; height: 30px; margin: 0 0 8px; padding: 0 8px; background: #161616; border: 1px solid #2a2a2a; border-radius: 2px; color: #bdbdbd; font-size: 12px; }

/* Bio: the @handle is the link (underlined); the words before it are plain */
.profile-bio a { color: #fff; text-decoration: underline; }
/* Bio links look like plain text until the mouse is on them, then they show as links */
.profile-bio a { text-decoration: none; }
.profile-bio a:hover { text-decoration: underline; }
/* "You must register or login" - white links */
.pv-note a { color: #fff; text-decoration: underline; }

/* Error pages: just the code and the message, centred on black */
body.error-page { margin: 0; min-height: 100vh; background: #000; }
.error-box { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
.error-box h1 { margin: 0 0 10px; font-size: 76px; font-weight: 800; letter-spacing: 0.01em; line-height: 1; color: #fff; }
.error-box p { margin: 0; font-size: 20px; color: #fff; }
/* Error page now sits under the normal navigation bar */
.error-box { min-height: calc(100vh - 120px); }

/* Welcome popup: matched to the reference */
.welcome-modal { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.welcome-box { max-width: 760px; background: #0a0a0a; border: 1px solid #222; border-radius: 4px; padding: 26px 25px 24px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
.welcome-box h2 { margin: 6px 0 20px; font-size: 24px; font-weight: 700; color: #fff; }
.welcome-box p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: #e6e6e6; }
.welcome-box p a { color: #7cb7ff; text-decoration: underline; }
.welcome-box button { margin: 2px 0 20px; padding: 11px; background: #1f1f1f; border: 1px solid #2b2b2b; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 400; }
.welcome-box button:hover { background: #292929; }
.welcome-small { font-size: 14.5px !important; margin-bottom: 18px !important; }
.welcome-box .welcome-small:last-child { margin-bottom: 4px !important; }
.welcome-box .welcome-small:last-child a { color: #fff; }

.fl-more { text-align: center; padding: 14px 0 26px; font-size: 13px; color: #777; }
.fl-more[hidden] { display: none; }

/* Credit line at the bottom of the site */
.site-credit { margin: 40px 0 24px; text-align: center; font-size: 12px; letter-spacing: 0.04em; color: #6f6f6f; }
.site-credit a { color: #b8a15a; text-decoration: none; }
.site-credit a:hover { color: #ffd700; text-decoration: underline; }
.paste-page .site-credit { display: none; }

/* History / Credits page */
.cr-wrap { max-width: 860px; margin: 0 auto; padding-bottom: 20px; }
.cr-title { text-align: center; font-size: 28px; font-weight: 700; margin: 26px 0 4px; }
.cr-sub { text-align: center; color: #8a8a8a; margin: 0 0 8px; }
.cr-h { margin: 30px 0 12px; font-size: 16px; font-weight: 600; color: #fff; }
.cr-pinned { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cr-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px 22px; background: #0c0c0c; border: 1px solid #222; border-radius: 4px; text-decoration: none; }
.cr-card:hover { border-color: #3a3a3a; text-decoration: none; }
.cr-card.first { border-color: #6b5a22; box-shadow: 0 0 24px rgba(255, 215, 0, 0.08); }
.cr-avatar { width: 84px; height: 84px; object-fit: cover; border-radius: 4px; background: #161616; }
.cr-place { position: absolute; top: 10px; left: 12px; font-size: 12px; font-weight: 700; color: #8a8a8a; }
.cr-card.first .cr-place { color: #ffd700; }
.cr-name { font-size: 18px; margin-top: 6px; }
.cr-role { font-size: 13px; color: #cfcfcf; }
.cr-years { font-size: 12px; color: #8a8a8a; letter-spacing: 0.04em; }
.cr-table { width: 100%; border-collapse: collapse; }
.cr-table th { background: #181818; color: #fff; font-weight: 700; text-align: left; padding: 9px 10px; }
.cr-table td { padding: 9px 10px; border-bottom: 1px solid #1f1f1f; color: #e4e4e4; }
.cr-table .r { text-align: right; }
.site-credit-link { color: #8a8a8a; text-decoration: none; }
.site-credit-link:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) { .cr-pinned { grid-template-columns: 1fr; } }

/* History page, plainer: text first, flat tables, no glow */
.cr-wrap { max-width: 820px; }
.cr-title { text-align: left; font-size: 24px; font-weight: 600; margin: 26px 0 14px; }
.cr-intro p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: #dcdcdc; }
.cr-intro a { color: #fff; text-decoration: underline; }
.cr-h { margin: 30px 0 8px; font-size: 14px; font-weight: 600; color: #fff; }
.cr-table { width: 100%; border-collapse: collapse; background: transparent; border: 0; }
.cr-table th { background: #181818; color: #fff; font-size: 13px; font-weight: 700; text-align: left; padding: 8px 10px; border: 0; }
.cr-table td { padding: 8px 10px; border: 0; border-bottom: 1px solid #1f1f1f; color: #e4e4e4; font-size: 14px; }
.cr-table .r { text-align: right; }
.cr-lead td { padding: 10px; }
.cr-lead .cr-n { width: 24px; color: #8a8a8a; }
.cr-lead .cr-img { width: 52px; padding-right: 0; }
.cr-lead .cr-img img { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 2px; background: #161616; }
.cr-lead tr:first-child .cr-n { color: #ffd700; }
/* Credit line + History link: white */
.site-credit, .site-credit a, .site-credit-link { color: #fff; text-decoration: none; }
.site-credit a:hover, .site-credit-link:hover { color: #fff; text-decoration: underline; }

/* The founders block */
.cr-duo { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; }
.cr-person { padding: 16px 14px; }
.cr-person + .cr-person { border-left: 1px solid #1f1f1f; }
.cr-pname { font-size: 16px; }
.cr-prole { margin-top: 3px; font-size: 13px; color: #bdbdbd; }
.cr-quote { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: #e4e4e4; }
.cr-days { margin: 12px 0 0; text-align: center; font-size: 13px; color: #bdbdbd; }
.cr-days b { color: #fff; }
@media (max-width: 640px) { .cr-duo { grid-template-columns: 1fr; } .cr-person + .cr-person { border-left: 0; border-top: 1px solid #1f1f1f; } }

/* Credit line / History link: at the very bottom of the page */
main.container { position: relative; min-height: calc(100vh - 52px); padding-bottom: 64px; }
main.container > .site-credit { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; }
/* Credit/History link sits at the bottom of the screen on short pages, after the content on long ones */
body:not(.paste-page) { display: flex; flex-direction: column; min-height: 100vh; }
body:not(.paste-page) > main.container { flex: 1 0 auto; width: 100%; min-height: 0; padding-bottom: 56px; box-sizing: border-box; }

.pc-locked { padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #bdbdbd; border-bottom: 1px solid #262626; }
/* Badge icon sits closer to the name */
.badge-icon { margin-left: 2px; }
.badge-icon .badge-emoji { margin-left: -2px; }
/* Profile header: name block closer to the picture */
.badge-icon { margin-left: 0; }
.badge-icon .badge-emoji { margin-left: -3px; }
/* Badge icon: back to its original spacing */
.badge-icon { margin-left: 6px; }
.badge-icon + .badge-icon { margin-left: 6px; }
.badge-icon .badge-emoji { margin-left: 0; }
/* Name effect never spills over the picture */
/* Only the name is clipped (so the effect stays inside it); the badge tooltip can show again */
.profile-name .badge-icon { margin-left: 5px; }
/* Profile name: the effect is drawn only inside the letters, so nothing spills onto the picture */
/* Profile name effect: the moving dots are back (around and over the letters), but the box is cut at the
   left edge of the name so they can never reach the picture. Padding top/bottom keeps the dots from being cut. */
/* Name and bio closer together */
.profile-name { margin-bottom: 0; }
.profile-bio { margin-top: -2px; }
/* Name/bio spacing back to the original; the followers row a little lower */
.profile-name { margin-bottom: 4px; }
.profile-bio { margin-top: 0; }
.profile-follow-counts { margin-top: 8px; }
.profile-follow-counts { margin-top: 14px; }
.profile-follow-counts { margin-top: 10px; }
.profile-follow-counts { margin-top: 7px; }
.profile-follow-counts { margin-top: 5px; }
/* No empty space in front of a sparkle name */
/* Profile: comfortable space between the picture and the name/bio */
.profile-bar { gap: 12px; }

/* demeter and pierce (Legend): the name sits tight to the picture and its effect is cut at the left edge of the name,
   so the moving dots can never reach the picture. Everyone else keeps the normal profile header. */
.profile-bar.is-legend { gap: 2px; }
.profile-bar.is-legend .profile-name > a { display: inline-block; overflow: hidden; vertical-align: top; max-width: 100%; padding: 4px 3px 4px 0; margin: -4px 0; }
.profile-bar.is-legend .profile-name > a.name-sparkle { padding-left: 0; }
/* demeter and pierce: the name stays tight, the bio and the followers row get some air next to the picture */
.profile-bar.is-legend .profile-bio, .profile-bar.is-legend .profile-follow-counts { margin-left: 10px; }
/* the name gets the same air; the effect stays cut at the left edge of the name (no leaking) */
.profile-bar.is-legend .profile-name { margin-left: 10px; }

/* Site closed page */
body.closed-page { margin: 0; min-height: 100vh; background: #000; color: #fff; }
.closed-box { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 30px 20px; box-sizing: border-box; text-align: center; }
.closed-img { max-width: min(560px, 90vw); max-height: 60vh; object-fit: contain; border-radius: 4px; }
.closed-img.only { max-width: 96vw; max-height: 96vh; border-radius: 0; }
.closed-text { max-width: 760px; font-size: 34px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; color: #fff; }
@media (max-width: 640px) { .closed-text { font-size: 24px; } }
/* Closing page picture: small pictures are enlarged to fit (picture only: the whole screen; with text: a comfortable size) */
.closed-img { width: min(560px, 90vw); height: auto; max-width: none; max-height: 60vh; }
.closed-img.only { width: 96vw; height: 96vh; max-width: none; max-height: none; object-fit: contain; }
/* Picture only: the picture fills the whole window with a thin black frame, whatever its size */
body.closed-image-only .closed-box { padding: 10px; gap: 0; }
body.closed-image-only .closed-img.only { width: calc(100vw - 20px); height: calc(100vh - 20px); max-width: none; max-height: none; object-fit: contain; border-radius: 0; image-rendering: auto; }
/* Picture only: the picture is the whole page - full width of the window, from the very top, no frame */
body.closed-image-only { background: #000; }
body.closed-image-only .closed-box { min-height: 0; padding: 0; display: block; }
body.closed-image-only .closed-img.only { display: block; width: 100vw; height: auto; max-width: none; max-height: none; margin: 0; border-radius: 0; object-fit: fill; }

/* ===== Admin panel: reference layout (7-item sidebar, flat dark tables and cards) ===== */
.admin-sidebar { width: 148px; flex: 0 0 148px; background: #000; border-right: 0; padding: 20px 0 20px 14px; position: relative; }
.as-brand { display: block; text-align: center; padding: 8px 0 16px; margin: 0; border: 0; }
.as-brand b { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 0; }
.admin-sidebar a { padding: 5px 8px; font-size: 12px; color: #fff; gap: 8px; border-radius: 0; background: none; box-shadow: none; }
.admin-sidebar a:hover { background: none; color: #fff; }
.admin-sidebar a.active { background: none; box-shadow: none; color: #9a9a9a; }
.admin-sidebar a .as-ic { width: 14px; font-size: 11px; text-align: center; }
.as-badge, .as-badge.blue { margin-left: 2px; min-width: 0; padding: 0 3px; border: 0; border-radius: 2px; background: #e11; color: #fff; font: 700 8px/11px Arial, sans-serif; align-self: flex-start; }
.as-collapse { position: absolute; left: 12px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%; background: #000; border: 0; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.as-collapse svg { width: 18px; height: 18px; }
.admin-content { padding: 0 18px 40px 16px; }
.admin-content h1, .ad-h1 { border: 0; margin: 14px 0 8px; font-size: 15px; font-weight: 500; padding: 0; }
.admin-content table { border: 0; background: transparent; margin: 8px 0 12px; border-spacing: 0 1px; }
.admin-content th { background: #000; color: #fff; font-size: 11px; font-weight: 700; padding: 8px 10px; border: 0; }
.admin-content td { background: #1b1b1b; border: 0; font-size: 11px; color: #ddd; padding: 9px 10px; }
.admin-content a { color: #fff; }
.admin-content .card, .admin-content .panel { background: #1b1b1b; border: 0; border-radius: 2px; }
.admin-content input[type=text], .admin-content input[type=number], .admin-content textarea, .admin-content select { background: #121212; border: 0; border-radius: 1px; color: #ddd; font-size: 11px; padding: 6px 8px; }
.admin-content label { color: #9a9a9a; font-size: 10px; margin: 6px 0 2px; display: block; }
.bl-h { font-size: 13px; font-weight: 500; margin: 14px 0 8px; color: #fff; }
.bl-sub { font-size: 10px; color: #8a8a8a; margin: -4px 0 8px; }
.bl-table th.c, .bl-table td.c { text-align: center; } .bl-table th.r, .bl-table td.r { text-align: right; }
.bl-split { border-top: 1px solid #1d1d1d; margin: 12px 0 0; }
.bl-form { max-width: 400px; }
.bl-row { display: flex; gap: 4px; margin-bottom: 4px; } .bl-row input { flex: 1; min-width: 0; margin: 0; }
.bl-form textarea { width: 100%; min-height: 44px; margin: 0 0 4px; box-sizing: border-box; resize: vertical; }
.admin-content button.ad-green { display: block; width: 100%; background: #141414; border: 1px solid #2f8f3a; color: #fff; font-size: 11px; font-weight: 700; padding: 7px; cursor: pointer; border-radius: 1px; }
.admin-content button.ad-green.sm { width: auto; display: inline-block; padding: 5px 10px; background: #000; }
.admin-content button.ad-link { background: none; border: 0; color: #fff; font-size: 10px; padding: 0; cursor: pointer; }
.bl-list td { background: #3a3a3a; color: #fff; padding: 5px 10px; }
.an-title { font-size: 12px; font-weight: 700; margin: 12px 0 4px; color: #fff; }
.an-card { background: #1b1b1b; padding: 8px 10px; border-radius: 2px; max-width: 760px; }
.an-prev { text-align: center; min-height: 18px; margin-bottom: 4px; } .an-prev a { font-size: 13px; text-decoration: underline; }
.an-card input.an-col { width: 100%; box-sizing: border-box; color: #fff; font-weight: 700; text-shadow: 0 0 2px #000; }
.an-btn { text-align: right; margin-top: 4px; }
.ad-more-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.ad-more-links a { color: #9a9a9a; text-decoration: underline; }
@media (max-width: 860px) { .admin-sidebar { width: auto; flex: none; padding: 10px 14px; } .as-collapse { display: none; } }

/* ===== Admin panel colours as in the reference ===== */
.admin-shell { background: #060606; border-top: 1px solid #1a1a1a; }
.admin-sidebar { background: #212121; width: 142px; flex: 0 0 142px; border-right: 0; }
.admin-sidebar a.active { color: #9a9a9a; }
.admin-content { background: #060606; }
.admin-content th { background: #181818; color: #fff; }
.admin-content td { background: #222; }
.admin-content .card, .admin-content .panel, .an-card { background: #282828; }
.admin-content input[type=text], .admin-content input[type=number], .admin-content textarea, .admin-content select { background: #1f1f1f; }
.bl-list td { background: #2b2b2b; }
.as-collapse { display: none; }
.ad-tabs { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 14px 0 4px; font-size: 12px; }
.ad-tabs a { color: #9a9a9a; text-decoration: none; padding: 3px 0; border-bottom: 1px solid transparent; }
.ad-tabs a:hover { color: #fff; }
.ad-tabs a.on { color: #fff; border-bottom-color: #fff; }
/* Pixel badges (crown, heart) shown at their own size */
.badge-icon img[src*="/pix-"] { width: auto; height: auto; image-rendering: pixelated; border-radius: 0; object-fit: none; }

/* ===== Badge tooltip: opens on click, dark rounded box with a caret, like the reference ===== */
.badge-icon { cursor: pointer; }
.badge-icon:hover .badge-tip { opacity: 0; }
.badge-icon .badge-tip { top: calc(100% + 9px); bottom: auto; left: 50%; transform: translateX(-50%); background: #1b1b1b; border: 1px solid #3a3a3a; border-radius: 7px; color: #fff; padding: 8px 12px; font-size: 13px; font-weight: 500; line-height: 1.2; box-shadow: 0 2px 8px rgba(0,0,0,0.5); text-align: left; }
.badge-icon .badge-tip::before { content: ''; position: absolute; left: 50%; top: -6px; width: 9px; height: 9px; background: #1b1b1b; border-left: 1px solid #3a3a3a; border-top: 1px solid #3a3a3a; transform: translateX(-50%) rotate(45deg); }
.badge-icon.open .badge-tip, .badge-icon.open:hover .badge-tip { opacity: 1; pointer-events: auto; }

/* Profile ID / Joined / Pastes box: no hover highlight */
table.kv tr:hover, table.kv tr:hover td, table.kv tbody tr:hover { background: transparent !important; }

.remember-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: #ccc; font-size: 14px; cursor: pointer; }
.remember-row input { width: auto; margin: 0; }
.auth-wrap .remember-row { margin: 14px 0 16px; padding: 0 2px; gap: 10px; font-size: 14px; color: #b5b5b5; line-height: 1; }
.auth-wrap .remember-row input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; background: #1b1b1b; border: 2px solid #8a8a8a; border-radius: 3px; cursor: pointer; display: inline-grid; place-content: center; }
.auth-wrap .remember-row input[type=checkbox]:checked { background: #fff; border-color: #fff; }
.auth-wrap .remember-row input[type=checkbox]:checked::after { content: ''; width: 4px; height: 8px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* Remember me: same box as the human check, in a clean row */
.auth-wrap .remember-row { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; padding: 0 14px; font-size: 14px; color: #e8e8e8; cursor: pointer; line-height: 1; }
.auth-wrap .remember-row input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.auth-wrap .remember-row .hc-box { flex: 0 0 22px; }
.auth-wrap .remember-row input:checked + .hc-box { background: #22c55e; border-color: #22c55e; }
.auth-wrap .remember-row input:checked + .hc-box::after { content: "\2713"; color: #000; font-weight: 800; font-size: 14px; }

/* Human check animation: click -> spinner ("Verifying...") -> green tick ("Success!") */
.human-check .hc-box { position: relative; transition: background .25s, border-color .25s, transform .25s; }
.human-check.hc-busy .hc-box { border-color: #3a3a3a; border-top-color: #f4a340; background: transparent; border-radius: 50%; animation: hc-spin .8s linear infinite; }
.human-check.hc-busy .hc-text { color: #bbb; }
.human-check.hc-ok .hc-box { background: #22c55e; border-color: #22c55e; border-radius: 50%; animation: hc-pop .35s ease-out; }
.human-check.hc-ok .hc-box::after { content: "\2713"; color: #000; font-weight: 800; font-size: 14px; animation: hc-fade .3s ease-out; }
.human-check.hc-ok .hc-text { animation: hc-fade .3s ease-out; }
.human-check.hc-shake { animation: hc-shake .35s; border-color: #c0392b; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@keyframes hc-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes hc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Verify box inside comment / paste forms: tidy spacing, light-blue label */
.human-check .hc-text { color: #5ec8f2; font-weight: 600; }
.human-check.hc-ok .hc-text { color: #5ec8f2; }
.pc-form .human-check, .pv-form .human-check, form textarea ~ .human-check, form select ~ .human-check { margin: 12px 0 12px; }
.human-check + button, .human-check + .btn { margin-top: 12px; }
.pc-form .human-check { height: 52px; }
.pc-form button.small { display: block; margin: 0; padding: 7px 18px; }

/* Verify label back to the original look; comment boxes focus in light blue instead of orange */
.human-check .hc-text, .human-check.hc-ok .hc-text { color: #e8e8e8; font-weight: 500; }
.pc-form textarea:focus, form[action$="/comment"] textarea:focus { border-color: #9bdcf7 !important; outline: 0 !important; box-shadow: 0 0 0 1px #9bdcf7 !important; }

/* Pin Paste popup */
.pin-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.pin-modal[hidden] { display: none; }
.pin-box { width: 520px; max-width: calc(100vw - 24px); background: #0a0a0a; border: 1px solid #1f1f1f; padding: 14px; box-sizing: border-box; color: #ddd; }
.pin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pin-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: #ddd; }
.pin-close { background: #0a0a0a; border: 1px solid #333; color: #fff; border-radius: 999px; padding: 6px 22px; font-size: 14px; cursor: pointer; }
.pin-box label { display: block; font-size: 15px; margin: 0 0 10px; color: #ddd; }
.pin-box input[type=datetime-local], .pin-box select { display: block; width: 100%; box-sizing: border-box; height: 46px; background: #565656; border: 0; color: #fff; font-size: 17px; padding: 0 10px; margin: 0 0 14px; border-radius: 0; color-scheme: dark; }
.pin-hint { font-size: 12px; color: #888; margin: -8px 0 14px; }
.pin-err { background: #2a0f0f; border: 1px solid #5a1f1f; color: #ff9b9b; font-size: 13px; padding: 8px 10px; margin: 0 0 12px; }
.pin-err[hidden] { display: none; }
.pin-submit { display: block; width: 100%; height: 32px; background: #2e7040; border: 0; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; border-radius: 0; }
.pin-submit:hover { background: #378450; }
.pin-left { margin: 18px 0 4px; font-size: 15px; font-weight: 600; color: #ddd; }
.pin-unpin { margin: 10px 0 0; } .pin-unpin button { background: none; border: 0; color: #aaa; text-decoration: underline; font-size: 12px; cursor: pointer; padding: 0; }

/* Settings: Profile Badge Visibility */
.pbv-title { font-size: 17px !important; font-weight: 500 !important; color: #c9c9d1 !important; margin: 0 0 14px !important; }
.pbv-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; cursor: pointer; color: #fff; font-size: 17px; margin: 0; }
.pbv-name { display: flex; align-items: center; gap: 10px; }
.pbv-ico { display: inline-flex; width: 22px; justify-content: center; align-items: center; font-size: 16px; }
.pbv-ico img { max-width: 20px; max-height: 20px; image-rendering: pixelated; }
.pbv-row input { position: absolute; opacity: 0; pointer-events: none; }
.pbv-box { width: 20px; height: 20px; background: #3a3a3a; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; }
.pbv-row input:checked + .pbv-box { background: #fff; }
.pbv-row input:checked + .pbv-box::after { content: ""; width: 5px; height: 10px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* Paste sidebar buttons as in the reference: Pin = dark green bold, Bump = grey regular */
.pv-pinbtn { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 3px; background: #143518; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; margin-bottom: 8px; }
.pv-pinbtn:hover { background: #1b4a21; }
.paste-page .pv-bump, .pv-bump { background: #565656; font-weight: 400; font-size: 15px; padding: 5px 10px; border-radius: 3px; }
.pv-bump:hover { background: #636363; }
.pin-box select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23aaa' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* Pin duration row */
.pin-dur { display: flex; gap: 8px; margin: 0 0 14px; }
.pin-dur input[type=number] { flex: 1; min-width: 0; height: 46px; background: #565656; border: 0; color: #fff; font-size: 17px; padding: 0 12px; margin: 0; border-radius: 0; box-sizing: border-box; }
.pin-dur input[type=number]::placeholder { color: #a8a8a8; }
.pin-dur select { width: 150px; margin: 0 !important; }
.pin-unit { display: inline-flex; align-items: center; padding: 0 14px; background: #3d3d3d; color: #ddd; font-size: 15px; }

/* Settings > Profile Badge Visibility: same size as the reference */
.pbv-card { padding-top: 12px; }
.pbv-title { font-size: 15px !important; margin: 0 0 8px !important; }
.pbv-row { padding: 5px 0; font-size: 14px; }
.pbv-name { gap: 8px; }
.pbv-ico { width: 20px; font-size: 15px; }
.pbv-ico img { max-width: 18px; max-height: 18px; }
.pbv-box { width: 13px; height: 13px; border-radius: 1px; background: #3a3a3a; }
.pbv-row input:checked + .pbv-box::after { width: 3px; height: 7px; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* Bump button: dark green, as in the reference */
.paste-page .pv-bump, .pv-bump { background: #112e12; border: 1px solid #1c3d1d; color: #fff; font-weight: 400; font-size: 14px; padding: 6px 10px; border-radius: 3px; }
.paste-page .pv-bump:hover, .pv-bump:hover { background: #17401a; }
.pv-bump:disabled { opacity: 0.55; }
.paste-page .compose-side button.pv-bump[type=submit] { background: #112e12; border: 1px solid #1c3d1d; color: #fff; font-weight: 400; font-size: 14px; height: auto; padding: 6px 10px; border-radius: 3px; margin-bottom: 8px; }
.paste-page .compose-side button.pv-bump[type=submit]:hover { background: #17401a; }



/* Profile page sized like the reference: 130px bar, 110px avatar, bold name / table header / comments title */
.profile-bar { box-sizing: border-box; min-height: 130px; padding: 10px 9px 10px 9px; gap: 17px; align-items: stretch; }
.profile-bar .profile-avatar { width: 110px; height: 110px; object-fit: cover; flex: 0 0 110px; }
.profile-bar .profile-meta { display: flex; flex-direction: column; align-self: stretch; min-width: 0; flex: 1; }
.profile-bar .profile-name { font-size: 16px; margin: 0 0 3px; line-height: 20px; }
.profile-bar .profile-name > a { font-size: 16px; font-weight: 700 !important; }
.profile-bar .profile-bio { font-size: 14px; line-height: 18px; margin: 0; }
.profile-bar .profile-follow-counts { margin-top: auto; font-size: 14px; }
.profile-bar .profile-action { align-self: flex-start; }
.profile-bar .profile-action .pill { font-size: 12px; padding: 5px 15px; }
.profile-cols table.kv { margin-bottom: 21px; }
.profile-cols table:not(.kv) th { font-weight: 700 !important; }
.pc-head { font-weight: 700 !important; }
.pc-item { line-height: 17px; padding: 8px 8px 9px; }
.pc-item-head, .pc-body { line-height: 17px; }

/* Gap between the top bar and the profile banner, as on the reference */
.profile-head { margin-top: 20px; }
/* Profile: pixel tuning against the reference */
.profile-head { margin-bottom: 20px; }
.profile-bar { padding: 9px 9px 10px 9px; }
.profile-bar .profile-name { line-height: 19px; margin: 0; }
.profile-bar .profile-bio { margin: 0; }
.pc-item { padding: 8px 8px 8px; }

/* No bio: the follower counts sit right under the name */
.profile-bar .profile-meta.no-bio .profile-follow-counts { margin-top: 8px; }

.users-hero .home-search-label { position: relative; top: -3px; }

/* Profile comments: sizes like the reference, "rm" link for admins */
.pc-item { padding: 9px 8px 10px; }
.pc-item-head, .pc-body { font-size: 15px; line-height: 18px; }
.pc-time { font-size: 15px; }
.pc-head { font-size: 15px; }
.pc-del { margin: 0; }
.pc-del button, .pc-del button:hover { background: none; border: 0; padding: 0; color: #9aa7b8; font-size: 12px; text-decoration: underline; cursor: pointer; line-height: 14px; }
.pc-item-head { align-items: flex-start; }

/* Edit Paste: side panel like the reference */
.pv-transfer { display: block; width: 100%; height: 28px; background: #3a0505; border: 1px solid #5a1212; border-radius: 3px; color: #fff; font-size: 14px; cursor: pointer; margin: 0; }
.pv-transfer:hover { background: #4a0808; }
.paste-page .compose-side button.cs-save[type=submit] { background: #143518; border: 1px solid #1c3d1d; color: #fff; font-weight: 400; font-size: 14px; height: 28px; border-radius: 3px; }
.paste-page .compose-side button.cs-save[type=submit]:hover { background: #1b4a21; }
.cs-cancel { display: block; text-align: center; color: #aaa; text-decoration: underline; font-size: 14px; margin: 14px 0 6px; }
.cs-cancel:hover { color: #fff; }

/* Paste sidebar: Pin, Edit and Bump are the same dark green button */
.paste-page .compose-side .pv-pinbtn, .paste-page .compose-side .pv-editbtn, .paste-page .compose-side button.pv-bump[type=submit] { display: block; box-sizing: border-box; width: 100%; height: 30px; line-height: 28px; padding: 0 10px; margin: 0 0 11px; background: #112e12; border: 1px solid #1c3d1d; border-radius: 2px; color: #fff; font-weight: 400; font-size: 14px; text-align: center; text-decoration: none; cursor: pointer; }
.paste-page .compose-side .pv-pinbtn:hover, .paste-page .compose-side .pv-editbtn:hover, .paste-page .compose-side button.pv-bump[type=submit]:hover { background: #17401a; }
.pv-pinbtn, .pv-editbtn { font-weight: 400; }

/* Transfer button and popup as in the reference */
.pv-transfer { height: 31px; background: #3a0000; border: 1px solid #4a0d0d; border-radius: 2px; font-size: 14px; font-weight: 400; margin: 0; }
.pv-transfer:hover { background: #470404; }
.tr-box { width: 520px; padding: 14px 16px 16px; }
.tr-box .pin-head { margin-bottom: 12px; }
.tr-sub { margin: 0 0 14px; font-size: 15px; color: #e6e6e6; }
.tr-box select, .tr-box input[type=text] { display: block; width: 100%; box-sizing: border-box; height: 33px; background: #565656; border: 0; border-radius: 0; color: #fff; font-size: 16px; padding: 0 10px; margin: 0 0 12px; color-scheme: dark; }
.tr-box input[type=text]::placeholder { color: #a8a8a8; }
.tr-box select { appearance: auto; -webkit-appearance: menulist; background-image: none; padding-right: 10px; }
.tr-go { display: block; width: 100%; height: 30px; background: #112e12; border: 1px solid #1c3d1d; color: #fff; font-size: 14px; font-weight: 400; border-radius: 2px; cursor: pointer; margin: 0; }
.tr-go:hover { background: #17401a; }

/* Edit page: one separator above Transfer, button and lines as in the reference */
.edit-side .pv-sep { border-color: #747475 !important; margin: 16px 0 !important; }
.edit-side .pv-meta { border-bottom: 1px solid #747475 !important; padding-bottom: 14px; margin-bottom: 16px; }
.edit-side .pv-meta + .pv-transfer { margin-top: 0; }
.edit-side .pv-transfer { height: 30px; background: #3d0607; border: 1px solid #333; border-radius: 0; margin: 0; }
.edit-side .pv-transfer:hover { background: #4b0809; }

/* Transfer popup: centred, blurred backdrop, sizes from the reference */
.tr-modal { align-items: center; padding-top: 0; background: rgba(0,0,0,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tr-modal .tr-box { width: 513px; padding: 16px 16px 34px; border-radius: 3px; border: 1px solid #1c1c1c; background: #0b0b0b; }
.tr-modal .pin-head { margin-bottom: 8px; }
.tr-modal .pin-head h3 { font-size: 18px; font-weight: 700; color: #d6d6d6; }
.tr-modal .pin-close { background: #111; border: 1px solid #333; font-size: 12px; padding: 5px 15px; }
.tr-modal .tr-sub { font-size: 14px; margin: 0 0 12px; }
.tr-modal .tr-box select, .tr-modal .tr-box input[type=text] { height: 32px; font-size: 16px; margin: 0 0 12px; }
.tr-modal .tr-box select { appearance: none; -webkit-appearance: none; background-image: none; }
.tr-modal .tr-go { height: 30px; }
/* Transfer button text a little higher */
.edit-side .pv-transfer { padding: 0 0 3px; }

.tr-modal .tr-go { padding: 0 0 3px; line-height: 1; }

/* Admin: logs filters, online dots, user notes */
.lg-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.lg-filter input, .lg-filter select { width: auto; margin: 0; }
.lg-pager { display: flex; gap: 16px; align-items: center; font-size: 12px; margin: 10px 0 30px; }
.on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #444; margin-right: 8px; }
.on-dot.on { background: #22c55e; }
.un { margin-top: 6px; font-size: 12px; }
.un summary { cursor: pointer; color: #9aa7b8; }
.un-item { margin: 6px 0; padding: 6px 8px; background: #1b1b1b; position: relative; }
.un-del { position: absolute; right: 4px; top: 2px; margin: 0; }
.un-del button { background: none; border: 0; color: #888; cursor: pointer; padding: 0 4px; }
.un-form { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-width: 280px; }
.un-form textarea { margin: 0; min-height: 44px; }

/* "Comments are disabled" note: larger, light text with a line under it, as on the reference */
.paste-page .pv-note, .pv-note { font-size: 15px; color: #d0d0d0; margin: 0; line-height: 1.35; }

.paste-page .pv-note, .pv-note { font-size: 14px; white-space: nowrap; }

/* Admin: pinned pastes page */
.pn-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 8px; font-size: 13px; }
.pn-stats a { color: #9a9a9a; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.pn-stats a b { color: #fff; font-size: 16px; margin-right: 4px; }
.pn-stats a.on { color: #fff; border-bottom-color: #fff; }
.pn-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pn-row input, .pn-row select { width: auto; margin: 0; }
.pn-add { margin: 10px 0; }
.pn-bulk { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.pn-bulk select { width: auto; margin: 0; }
.pn-acts { display: flex; flex-wrap: wrap; gap: 3px; max-width: 360px; }
.pn-acts .small { padding: 3px 7px; font-size: 11px; }

.paste-page .pv-note, .pv-note { font-size: 14.5px; }

.pn-two { display: flex; flex-wrap: wrap; gap: 12px; }
.pn-two .card { margin: 10px 0; }
.pn-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.pn-opt { margin-top: 6px; font-size: 12px; }
.pn-opt summary { cursor: pointer; color: #9aa7b8; }
.pn-opt-row { display: flex; gap: 4px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.pn-opt-row input, .pn-opt-row select { width: auto; margin: 0; }
.pn-c { width: 80px !important; }

/* Online status */
.on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #444; margin-right: 7px; vertical-align: 1px; }
.on-dot.on { background: #22c55e; box-shadow: 0 0 4px #22c55e88; }
.on-pill { display: inline-flex; align-items: center; margin-left: 10px; font-size: 12px; font-weight: 400; color: #22c55e; vertical-align: 2px; }
.on-pill .on-dot { margin-right: 5px; }
.on-link { color: #22c55e; text-decoration: none; margin-left: 4px; }
.on-link:hover { text-decoration: underline; }

/* Follow requests */
.fr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #1c1c1c; }
.fr-btns { display: flex; gap: 6px; } .fr-btns form { margin: 0; }
/* Follow requests: tidy rows and small pill buttons */
#requests .fr-row { padding: 10px 0; font-size: 15px; }
#requests .fr-row:last-of-type { border-bottom: 0; }
#requests .fr-btns { gap: 8px; align-items: center; }
#requests .fr-btns form, #requests > form { margin: 0; }
#requests button { height: 28px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 400; line-height: 1; width: auto; margin: 0; cursor: pointer; color: #fff; border: 1px solid #333; background: #141414; }
#requests .fr-btns form:first-child button, #requests > form button { background: #112e12; border-color: #1c3d1d; }
#requests .fr-btns form:first-child button:hover, #requests > form button:hover { background: #17401a; }
#requests .fr-btns button.danger { background: #3a0505; border-color: #5a1212; color: #fff; }
#requests .fr-btns button.danger:hover { background: #4a0808; }
#requests > form { margin-top: 10px; }

/* Admin: profile comments */
.cm-where { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-where a { background: #1b1b1b; padding: 3px 9px; border-radius: 999px; font-size: 12px; color: #ddd; text-decoration: none; }
.cm-where a:hover { background: #262626; }
.cm-where a b { color: #9aa7b8; margin-left: 4px; font-weight: 400; }
.un-cm { display: inline-block; margin-top: 6px; margin-right: 10px; font-size: 12px; color: #9aa7b8; }

/* Chat management: banner, pins, Manage box, right-click menu */
.chx-meta { display: flex; align-items: center; gap: 12px; }
.chx-state { font-size: 12px; color: #f5b942; }
.chx-mng { position: relative; font-size: 12px; }
.chx-mng summary { cursor: pointer; list-style: none; padding: 4px 11px; border: 1px solid #333; border-radius: 999px; color: #ddd; }
.chx-mng summary::-webkit-details-marker { display: none; }
.chx-mng-box { position: absolute; right: 0; top: 30px; z-index: 30; min-width: 190px; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.chx-mng-box label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #bbb; }
.chx-mng-box select { width: auto; margin: 0; }
.chx-mng-box button, .chx-mng-box a { background: #161616; border: 1px solid #2a2a2a; color: #fff; border-radius: 6px; padding: 6px 10px; font-size: 12px; text-align: center; text-decoration: none; cursor: pointer; }
.chx-mng-box button.danger { background: #3a0505; border-color: #5a1212; }
.chx-banner { padding: 8px 18px; background: #1a1405; border-bottom: 1px solid #3a2e0a; color: #f5d27a; font-size: 13px; }
.chx-banner[hidden] { display: none; }
.chx-pins:empty { display: none; }
.chx-pin { padding: 7px 18px; border-bottom: 1px solid #1d1d1d; background: #0a0a0f; font-size: 13px; color: #cfd6e6; }
.chx-pin-ic { cursor: default; margin-right: 6px; }
.cm.is-pinned .cm-body::after { content: "  pinned"; font-size: 11px; color: #f5b942; }
.cm { position: relative; }
.cm-more { position: absolute; right: 8px; top: 4px; background: #111; border: 1px solid #2a2a2a; color: #aaa; border-radius: 6px; width: 24px; height: 22px; line-height: 1; padding: 0; cursor: pointer; opacity: 0; font-size: 14px; }
.cm:hover .cm-more { opacity: 1; }
.cmx { position: fixed; z-index: 3000; min-width: 190px; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.7); }
.cmx[hidden] { display: none; }
.cmx-h { padding: 6px 10px; font-size: 12px; color: #888; }
.cmx-i { display: block; width: 100%; text-align: left; background: none; border: 0; color: #e6e6e6; padding: 7px 10px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.cmx-i:hover { background: #1a1a1a; }
.cmx-i.danger { color: #ff8a8a; }
.cmx-sep { height: 1px; background: #1f1f1f; margin: 4px 2px; }

/* Admin chat page */
.ch-form label { color: #9a9a9a; font-size: 12px; margin: 8px 0 3px; display: block; }
.ch-form .ch-row { display: flex; align-items: center; gap: 8px; color: #ddd; font-size: 13px; margin: 6px 0; }
.ch-form .ch-row input { width: auto; margin: 0; }
.ch-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.ch-grid > div { min-width: 120px; flex: 1; }
.ch-form button.primary { margin-top: 10px; }

/* Announcement line: who posted it */
.chx-banner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.chx-banner a { font-weight: 700; }
.chx-ban-ic { margin-right: 2px; }
.chx-ban-sep { color: #8a7a3a; }
.chx-ban-text { color: #f5d27a; }

/* Upgrade cards you already own */
.purchase-btn.is-unavailable { color: #d6d6d6; opacity: 0.8; cursor: not-allowed; font-weight: 400; }

/* Update (announcement) block */
.chx-banner { display: block; position: relative; padding: 12px 18px 16px; background: linear-gradient(180deg, #07131d 0%, #040a10 100%); border-bottom: 1px solid #12354d; border-left: 3px solid #1d9bf0; box-shadow: inset 0 0 40px rgba(29,155,240,0.08); overflow: hidden; }
.chx-banner.pop { animation: chxBanIn .45s ease-out; }
.chx-ban-top { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.chx-ban-label { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: #6aa9d6; border: 1px solid #1d4a6b; border-radius: 999px; padding: 2px 8px; }
.chx-ban-text { color: #1d9bf0; font-size: 21px; font-weight: 800; line-height: 1.25; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; word-break: break-word; text-shadow: 0 0 18px rgba(29,155,240,0.35); }
.chx-ban-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #1d9bf0; transform-origin: left; animation: chxBanBar 25s linear forwards; }
@keyframes chxBanBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes chxBanIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Update block: sky blue instead of deep blue */
.chx-banner { background: linear-gradient(180deg, #07161e 0%, #040b0f 100%); border-bottom-color: #14414f; border-left-color: #5ec8f2; box-shadow: inset 0 0 40px rgba(94,200,242,0.08); }
.chx-ban-text { color: #5ec8f2; text-shadow: 0 0 18px rgba(94,200,242,0.35); }
.chx-ban-bar { background: #5ec8f2; }

/* Update block: white text, no underline, bold author */
.chx-banner { border-left-color: #e8e8e8; box-shadow: inset 0 0 40px rgba(255,255,255,0.04); }
.chx-ban-text { color: #fff; text-decoration: none; text-shadow: none; }
.chx-ban-bar { background: #e8e8e8; }
.chx-ban-top { margin-bottom: 6px; }
.chx-ban-top a, .chx-ban-top a * { font-size: 17px; font-weight: 800 !important; }

/* Chat Send button: white */
.chx-send, .chx-compose .chx-send { background: #fff !important; border-color: #fff !important; color: #000 !important; }
.chx-send:hover { background: #e6e6e6 !important; }
.chx-send:disabled { background: #3a3a3a !important; border-color: #3a3a3a !important; color: #888 !important; }

/* Update block: flat, in the site's own look (plain dark panel, thin lines, no glow) */
.chx-banner { background: #151515; border: 0; border-bottom: 1px solid #262626; box-shadow: none; padding: 10px 18px 12px; }
.chx-banner.pop { animation: chxFade .3s ease-out; }
@keyframes chxFade { from { opacity: 0; } to { opacity: 1; } }
.chx-ban-top { margin: 0 0 3px; }
.chx-ban-top a, .chx-ban-top a * { font-size: 14px; font-weight: 700 !important; }
.chx-ban-text { color: #f2f2f2; font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none; text-shadow: none; }
.chx-ban-bar { height: 2px; background: #3d3d3d; }

/* Update line: one plain line on black like the site's home announcements (name, then the text) */
.chx .chx-banner { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 12px; background: #000; border: 0; border-bottom: 1px solid #1d1d1d; box-shadow: none; padding: 9px 16px; animation: none; text-align: center; }
.chx .chx-banner[hidden] { display: none; }
.chx .chx-ban-top { margin: 0; display: inline-flex; }
.chx .chx-ban-top a, .chx .chx-ban-top a * { font-size: 15px; font-weight: 700 !important; }
.chx .chx-ban-text { color: #fff; font-size: 15px; font-weight: 400; text-shadow: none; text-decoration: none; }
.chx .chx-ban-bar { display: none; }

/* Update line (final): one tidy row aligned with the messages - author | text | countdown */
.chx .chx-banner { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 14px; background: #0b0b0b; border: 0; border-top: 1px solid #1d1d1d; border-bottom: 1px solid #1d1d1d; box-shadow: none; padding: 0 18px; min-height: 46px; text-align: left; animation: none; overflow: hidden; }
.chx .chx-banner[hidden] { display: none; }
.chx .chx-ban-top { margin: 0; flex: 0 0 auto; display: inline-flex; align-items: center; }
.chx .chx-ban-top a, .chx .chx-ban-top a * { font-size: 14px; font-weight: 700 !important; }
.chx .chx-ban-top::after { content: ""; width: 1px; height: 16px; background: #2a2a2a; margin-left: 14px; }
.chx .chx-ban-text { flex: 1; min-width: 0; padding: 8px 0; font-size: 14.5px; font-weight: 400; line-height: 1.4; color: #ececec; text-shadow: none; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chx .chx-ban-time { flex: 0 0 auto; font: 12px/1 Consolas, "SF Mono", monospace; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.chx .chx-ban-bar { display: none; }

/* ===== Chat, refined: tighter rows, neutral avatars, flat input (final pass) ===== */
.chx { border-radius: 6px; border-color: #1b1b1b; }
.chx-top { padding: 0 18px; min-height: 46px; border-bottom-color: #1b1b1b; }
.chx-title strong { font-size: 14px; font-weight: 700; letter-spacing: 0; }
.chx-online { font-size: 12px; color: #777; }
.chx-online b { color: #cfcfcf; font-weight: 600; }
.chx-log { height: calc(100vh - 250px); min-height: 380px; padding: 6px 0 10px; }
.chx-log::-webkit-scrollbar { width: 6px; }
.chx-log::-webkit-scrollbar-thumb { background: #242424; border-radius: 3px; }
.chx-day { margin: 14px 18px 6px; font-size: 10.5px; letter-spacing: 0.08em; color: #5a5a5a; }
.chx-day::before, .chx-day::after { background: #161616; }

.chx .cm { grid-template-columns: 44px minmax(0, 1fr); padding: 3px 18px 3px 14px; margin-top: 7px; }
.chx .cm:hover { background: #0a0a0a; }
.chx .cm.cont { margin-top: 0; padding-top: 0; padding-bottom: 0; }
.chx .cm.mine::before { display: none; }
.chx .cm.mention { background: rgba(255, 255, 255, 0.035); box-shadow: inset 2px 0 0 #8a8a8a; }
.chx .cm.mention::before { display: none; }
.chx .cm-av { width: 32px; height: 32px; border-radius: 50%; background: #151515; border: 1px solid #242424; color: #8d8d8d; font-size: 13px; font-weight: 600; box-sizing: border-box; }
.chx .cm-head { gap: 8px; font-size: 14px; line-height: 1.2; }
.chx .cm-time { font: 400 11px/1 inherit; font-family: inherit; color: #5c5c5c; font-variant-numeric: tabular-nums; }
.chx .cm-body { margin-top: 1px; font-size: 14px; line-height: 1.45; color: #d2d2d2; }
.chx .cm-at { color: #e0e0e0; background: rgba(255, 255, 255, 0.09); padding: 0 3px; border-radius: 3px; }
.chx .cm-time-side { left: 14px; top: 2px; width: 32px; font: 400 10px/1.4 inherit; font-family: inherit; color: #4f4f4f; }
.chx .cm.fresh { animation: chxFade .2s ease-out; }
.chx .cm-more { top: 3px; right: 12px; }

.chx-jump { bottom: 70px; padding: 5px 12px; font-size: 12px; border-color: #2a2a2a; background: #0b0b0b; }
.chx-jump:hover { border-color: #4a4a4a; }
.chx-compose { padding: 10px 14px; border-top-color: #1b1b1b; }
.chx-compose form { height: 40px; padding: 0 5px 0 12px; border-color: #262626; border-radius: 6px; background: #0a0a0a; }
.chx-compose form:focus-within { border-color: #4a4a4a; }
.chx-compose input { height: 38px; font-size: 14px; }
.chx-count { font: 400 11px/1 inherit; font-family: inherit; color: #3f3f3f; opacity: 0; transition: opacity .15s; }
.chx-compose form:focus-within .chx-count { opacity: 1; }
.chx-send { height: 28px; padding: 0 14px; border-radius: 4px; font-size: 13px; font-weight: 600 !important; }
.chx-pin, .chx-banner { font-size: 14px; }

/* Pinned messages: one row per pin, author with rank and effect, no icon */
.chx .chx-pin { display: flex; align-items: center; gap: 12px; padding: 0 18px; min-height: 42px; background: #0b0b0b; border-bottom: 1px solid #1b1b1b; font-size: 14px; color: #d6d6d6; }
.chx .chx-pin-tag { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6d6d6d; border: 1px solid #262626; border-radius: 3px; padding: 3px 7px; }
.chx .chx-pin-by { flex: 0 0 auto; display: inline-flex; }
.chx .chx-pin-by a, .chx .chx-pin-by a * { font-size: 14px; font-weight: 700 !important; }
.chx .chx-pin-text { flex: 1; min-width: 0; padding: 7px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.chx .chx-pin-x { flex: 0 0 auto; background: none; border: 1px solid #262626; border-radius: 4px; color: #8a8a8a; font-size: 12px; font-weight: 400 !important; padding: 3px 9px; cursor: pointer; }
.chx .chx-pin-x:hover { color: #fff; border-color: #4a4a4a; }
.cm.is-pinned .cm-body::after { content: none !important; }

/* Pinned row: the same pin icon as on the paste page */
.chx .chx-pin-tag { display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; width: 16px; text-transform: none; letter-spacing: 0; color: #8b93a1; }
.chx .chx-pin-svg { display: block; color: #8b93a1; transform: none; margin: 0; }

/* Pinned messages: a card with breathing room above and below, not glued to the top bar and the log */
.chx .chx-pins:not(:empty) { padding: 10px 14px 6px; border-bottom: 1px solid #1b1b1b; background: #000; }
.chx .chx-pin { border: 1px solid #202020; border-radius: 6px; margin: 0 0 6px; padding: 0 10px 0 12px; min-height: 40px; background: #0b0b0b; }
.chx .chx-pin:last-child { margin-bottom: 4px; }

/* Chat compose: plain input + separate button, like the site's other forms; "new messages" as a strip, not a floating pill */
.chx-compose { padding: 10px 14px 12px; border-top: 1px solid #1b1b1b; background: #000; }
.chx-compose form { height: auto; padding: 0; background: none; border: 0; border-radius: 0; gap: 8px; position: relative; }
.chx-compose form:focus-within { border: 0; }
.chx-compose input { height: 38px; padding: 0 12px; background: #1b1b1b; border: 1px solid #262626; border-radius: 3px; font-size: 14px; }
.chx-compose input:focus { border-color: #555; background: #1e1e1e; }
.chx-compose input::placeholder { color: #777; }
.chx-count { position: absolute; right: 86px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; font-size: 11px; color: #777; }
.chx-count.near { opacity: 1; }
.chx-compose form:focus-within .chx-count:not(.near) { opacity: 0; }
.chx-send { height: 38px; padding: 0 18px; border-radius: 3px; font-size: 13px; }
.chx-jump { position: static; transform: none; display: block; width: 100%; border: 0; border-top: 1px solid #1f1f1f; border-radius: 0; background: #101010; color: #bdbdbd; padding: 6px 0; font-size: 12px; }
.chx-jump:hover { background: #151515; border-color: #1f1f1f; color: #fff; }
.chx-jump[hidden] { display: none; }
.chx .chx-pins:not(:empty) { padding: 16px 16px 14px; }
.chx .chx-pin { margin-bottom: 8px; min-height: 44px; }
.chx .chx-pin:last-child { margin-bottom: 0; }
.chx .chx-log { padding-top: 12px; }

/* Chat compose (final): a prompt line - your name, the field, a small Send - flush with the log, no boxes */
.chx-compose { padding: 0; border-top: 1px solid #1f1f1f; background: #070707; }
.chx-compose form { display: flex; align-items: center; height: 48px; gap: 0; padding: 0 8px 0 0; margin: 0; background: transparent; border: 0; border-radius: 0; position: relative; }
.chx-compose form:focus-within { background: #0b0b0b; border: 0; }
.chx-prompt { flex: 0 0 auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 14px 0 18px; margin: 0; font-size: 13px; font-weight: 600; color: #7a7a7a; line-height: 48px; }
.chx-prompt::after { content: "\203A"; margin-left: 10px; color: #4a4a4a; font-weight: 400; }
.chx-compose form:focus-within .chx-prompt { color: #cfcfcf; }
.chx-compose input { flex: 1; height: 48px; padding: 0 12px 0 0; background: transparent; border: 0; border-radius: 0; font-size: 14.5px; color: #f0f0f0; box-shadow: none; }
.chx-compose input:focus { background: transparent; border: 0; box-shadow: none; }
.chx-compose input::placeholder { color: #5a5a5a; }
.chx-count { position: static; transform: none; margin-right: 12px; opacity: 0; font-size: 11px; color: #777; }
.chx-count.near { opacity: 1; }
.chx-send { height: 30px; padding: 0 16px; border-radius: 3px; font-size: 13px; }
.chx-error { margin: 0; padding: 6px 18px; }
.chx-error:empty { display: none; }

/* Admin chat: editable pinned messages */
.pm-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1f1f1f; }
.pm-row:last-child { border-bottom: 0; }
.pm-by { flex: 0 0 auto; }
.pm-edit { flex: 1; display: flex; gap: 8px; margin: 0; }
.pm-edit input { flex: 1; margin: 0; }

/* Chat compose: your name with its rank, colour and effect (no arrow) */
.chx-prompt { max-width: 260px; overflow: visible; color: inherit; font-weight: 400; line-height: normal; display: flex; align-items: center; }
.chx-prompt::after { content: none !important; }
.chx-prompt a { font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.chx-compose form:focus-within .chx-prompt { color: inherit; }

/* Chat Send: quiet dark button instead of a glaring white block */
.chx-send, .chx-compose .chx-send { background: #1f1f1f !important; border: 1px solid #333 !important; color: #e6e6e6 !important; font-weight: 400 !important; height: 30px; padding: 0 16px; border-radius: 3px; }
.chx-send:hover { background: #2a2a2a !important; border-color: #444 !important; color: #fff !important; }
.chx-send:disabled { background: #151515 !important; border-color: #222 !important; color: #666 !important; }

/* Chat messages in the site's own comment style: name - time, text below, thin separators, no avatars */
.chx .cm { display: block; margin: 0; padding: 9px 18px 10px; border-bottom: 1px solid #1d1d1d; }
.chx .cm-av { display: none; }
.chx .cm-main { margin: 0; }
.chx .cm-head { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.3; }
.chx .cm-time { font-family: inherit; font-size: 14px; color: #9a9a9a; }
.chx .cm-time::before { content: "\2013\00a0"; }
.chx .cm-body { margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: #fff; }
.chx .cm:hover { background: #0a0a0a; }
.chx .cm.cont { margin: 0; padding: 0 18px 10px; border-top: 0; }
.chx .cm.cont .cm-head { display: none; }
.chx .cm.cont .cm-main { grid-column: auto; }
.chx .cm:has(+ .cm.cont) { border-bottom: 0; padding-bottom: 4px; }
.chx .cm-time-side { display: none !important; }
.chx .cm.mention { background: rgba(255, 255, 255, 0.04); box-shadow: inset 2px 0 0 #8a8a8a; }
.chx .cm-more { top: 8px; right: 14px; }
.chx .chx-day { margin: 0; padding: 10px 18px; background: #0a0a0a; border-bottom: 1px solid #1d1d1d; font-size: 11px; letter-spacing: .08em; }
.chx .chx-day::before, .chx .chx-day::after { display: none; }
.chx .chx-log { padding: 0; }

/* Chat: names with an effect (Rich+ sparkle) take no extra padding, so they line up with every other name */
.chx .cm-head .name-sparkle, .chx .chx-pin-by .name-sparkle, .chx .chx-ban-top .name-sparkle { padding: 0; margin: 0; line-height: inherit; }
.chx .cm-head > a { margin: 0; }

/* Chat compose: its own bar with a gap above (between the messages and the box), even spacing inside */
.chx .chx-compose { margin: 14px 16px 16px; padding: 0; border: 1px solid #222; border-radius: 4px; background: #0a0a0a; }
.chx .chx-compose form { height: 46px; padding: 0 8px 0 0; }
.chx .chx-prompt { padding: 0 16px 0 16px; margin-right: 4px; border-right: 1px solid #1d1d1d; align-self: stretch; }
.chx .chx-compose input { height: 46px; padding: 0 12px 0 14px; }
.chx .chx-compose form:focus-within { background: #0d0d0d; }
.chx .chx-compose:focus-within { border-color: #3a3a3a; }
.chx .chx-error { padding: 0 16px 10px; }
.chx .chx-note, .chx .chx-restricted { padding: 14px 16px; }
.chx .chx-log { border-bottom: 0; }

/* Chat compose: toned down - no box, no divider, just a thin line and a little air above */
.chx .chx-compose { margin: 0; border: 0; border-top: 1px solid #1f1f1f; border-radius: 0; background: #070707; }
.chx .chx-compose:focus-within { border-color: #1f1f1f; }
.chx .chx-compose form { height: 46px; padding: 0 12px 0 0; }
.chx .chx-prompt { padding: 0 12px 0 18px; margin: 0; border-right: 0; }
.chx .chx-compose input { padding: 0 12px 0 4px; }
.chx .chx-log { padding-bottom: 10px; }
.chx .chx-send { height: 28px; }

/* Chat compose: a short divider between your name and the field */
.chx .chx-prompt::after { content: "" !important; display: block; width: 1px; height: 16px; margin-left: 14px; background: #333; }
.chx .chx-compose input { padding-left: 14px; }
.chx .chx-prompt { padding-right: 0; }
.chx .chx-compose input { padding-left: 12px; }

/* Names with an effect line up exactly like plain names, everywhere */
.name-sparkle { padding: 0 !important; margin: 0; line-height: inherit; vertical-align: baseline; }

/* Site closed page: links in the text */
.closed-text a { color: #5ec8f2; text-decoration: underline; text-underline-offset: 3px; }
.closed-text a:hover { color: #fff; }
.closed-text a, .closed-text a:hover { text-decoration: none; }

/* Profile: the staff "Manage" button */
.profile-action .pill.pill-manage { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 16px; margin-right: 8px; background: #b60000; border: 1px solid #c9473a; border-radius: 3px; color: #fff; font-size: 13px; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .01em; text-decoration: none; }
.profile-action .pill.pill-manage:hover { background: #cc0000; }

/* Admin: one account, everything in one page */
.um-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; margin-top: 16px; }
.um-grid .card { margin: 0; }
.um-grid label { display: block; margin: 12px 0 4px; font-size: 12px; color: #8d8d8d; }
.um-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.um-row input[type=text], .um-row input[type=number], .um-row select { flex: 1; min-width: 90px; margin: 0; width: auto; }
.um-row form { margin: 0; }
.um-line { font-size: 12.5px; margin: 0 0 4px; color: var(--text-faint); }
.um-h2 { font-size: 15px; margin: 26px 0 0; padding-top: 14px; border-top: 1px solid #1d1d1d; }

/* Staff notes: author with rank, colour and effect */
.un-item { display: block; }
.un-item > a:first-child { font-size: 14px; font-weight: 700; margin-right: 4px; }

/* Upgrade > Select Currency: the window stays put, only the list of currencies scrolls */
#upgradeModal > div { max-height: none !important; overflow: visible !important; margin: 8vh auto !important; }
#upgradeModal #currencyList { max-height: min(22rem, 46vh) !important; overflow-y: auto !important; padding-right: 6px; scrollbar-width: thin !important; scrollbar-color: #3a3a3a transparent; -ms-overflow-style: auto; }
#upgradeModal #currencyList::-webkit-scrollbar { width: 6px; }
#upgradeModal #currencyList::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }

.um-check { display: flex !important; align-items: center; gap: 8px; margin: 8px 0 2px !important; color: #cfcfcf !important; font-size: 12.5px !important; }
.um-check input { width: auto; margin: 0; }

/* ===== Marketplace ===== */
.mk { max-width: 1020px; margin: 28px auto 60px; padding: 0 16px; color: #e6e6e6; }
.mk a { text-decoration: none; }
.mk-hero { text-align: center; margin: 8px 0 22px; }
.mk-hero h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; border: 0; padding: 0; }
.mk-hero p { margin: 0 auto; max-width: 560px; color: #8a8a8a; font-size: 14px; line-height: 1.5; }
.mk-search { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 4px; color: #666; margin-bottom: 22px; }
.mk-search:focus-within { border-color: #3a3a3a; color: #bbb; }
.mk-search input { flex: 1; height: 48px; background: transparent; border: 0; outline: 0; color: #fff; font-size: 15px; padding: 0; margin: 0; }
.mk-bar { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid #1a1a1a; margin-bottom: 18px; }
.mk-tabs { display: flex; gap: 26px; }
.mk-tabs a { padding: 10px 0; color: #777; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mk-tabs a span { margin-left: 5px; font-size: 11px; color: #555; font-variant-numeric: tabular-nums; }
.mk-tabs a.on { color: #fff; border-bottom-color: #fff; }
.mk-links { display: flex; gap: 18px; padding-bottom: 10px; font-size: 13px; }
.mk-links a { color: #9a9a9a; }
.mk-links a:hover { color: #fff; }
.mk-cartlink b { display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px; background: #fff; color: #000; border-radius: 8px; font-size: 11px; text-align: center; line-height: 16px; }
.mk-note { padding: 10px 14px; margin: 0 0 16px; background: #101010; border: 1px solid #262626; border-radius: 3px; font-size: 13px; color: #d6d6d6; }
.mk-note.warn { border-color: #5a2a2a; color: #ffb3b3; background: #140a0a; }
.mk-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.mk-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.mk-sel { display: flex; gap: 8px; margin: 0; }
.mk-sel select { appearance: none; -webkit-appearance: none; height: 34px; padding: 0 30px 0 14px; margin: 0; width: auto; background: #101010 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/></svg>") no-repeat right 11px center; border: 1px solid #242424; border-radius: 4px; color: #e6e6e6; font-size: 13.5px; cursor: pointer; }
.mk-sel select:hover { border-color: #3a3a3a; }

.mk-table, .mk-bids { border: 1px solid #1b1b1b; border-radius: 4px; overflow: hidden; background: #060606; }
.mk-th { display: grid; grid-template-columns: 1.7fr 1fr 1.4fr 30px; padding: 11px 18px; background: #0f0f0f; color: #777; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid #1b1b1b; }
.mk-row { display: grid; grid-template-columns: 1.7fr 1fr 1.4fr 30px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #141414; color: inherit; }
.mk-row:last-child { border-bottom: 0; }
.mk-row:hover { background: #0e0e0e; }
.mk-row b { font-size: 15px; font-weight: 600; color: #fff; }
.mk-row small, .mk-stats small { display: block; margin-top: 2px; font-size: 12px; color: #6f6f6f; font-weight: 400; }
.mk-name small { color: #5e8fb0; }
.mk-name b { margin-right: 6px; }
.mk-price b, .mk-ends b { font-variant-numeric: tabular-nums; }
.mk-ends b { font-size: 13.5px; font-weight: 500; }
.mk-go { color: #555; display: flex; justify-content: flex-end; }
.mk-row:hover .mk-go { color: #fff; }
.mk-tag { display: inline-block; font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border: 1px solid #2c2c2c; border-radius: 3px; color: #8a8a8a; vertical-align: 2px; margin-right: 4px; }
.mk-tag.hot { color: #e0b84c; border-color: #4a3d14; }
.mk-empty { padding: 34px; text-align: center; color: #666; font-size: 13.5px; }
.mk-pager { display: flex; gap: 18px; justify-content: center; align-items: center; margin: 18px 0 0; font-size: 13px; color: #888; }
.mk-pager a { color: #ccc; }

.mk-back { display: inline-block; color: #888; font-size: 13px; margin-bottom: 12px; }
.mk-back:hover { color: #fff; }
.mk-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; }
.mk-title h1 { margin: 0; font-size: 28px; font-weight: 700; border: 0; padding: 0; letter-spacing: -0.01em; }
.mk-chip { display: inline-block; font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 3px; background: #151515; color: #999; }
.mk-chip.live { background: #0f2a14; color: #55d17a; }
.mk-chip.sold { background: #1c1c26; color: #9ea4ff; }
.mk-chip.warn { background: #2a1a0a; color: #f2a65a; }
.mk-chip.off { background: #181818; color: #777; }
.mk-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 800px) { .mk-cols { grid-template-columns: 1fr; } }
.mk-card { background: #0b0b0b; border: 1px solid #1d1d1d; border-radius: 4px; margin-bottom: 14px; }
.mk-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.mk-stats > div { padding: 16px 18px; border-right: 1px solid #171717; }
.mk-stats > div:last-child { border-right: 0; }
.mk-stats span { display: block; font-size: 12px; color: #777; margin-bottom: 6px; }
.mk-stats b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-sold { padding: 12px 18px; border-top: 1px solid #171717; font-size: 13px; color: #aaa; }
.mk-sold b { color: #fff; }
.mk-info > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #161616; font-size: 13.5px; }
.mk-info > div:last-child { border-bottom: 0; }
.mk-info span { color: #7a7a7a; }
.mk-info b { font-weight: 500; text-align: right; word-break: break-all; }
.mk-bid { display: flex; gap: 10px; margin-bottom: 10px; }
.mk-amount { flex: 0 0 150px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #0d0d0d; border: 1px solid #262626; border-radius: 4px; height: 48px; }
.mk-amount span { color: #777; font-size: 16px; }
.mk-amount input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; margin: 0; padding: 0; color: #fff; font-size: 18px; font-variant-numeric: tabular-nums; height: 46px; }
.mk-amount:focus-within { border-color: #4a4a4a; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; background: #143518; border: 1px solid #1f4a25; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 400 !important; cursor: pointer; }
.mk-btn:hover { background: #1b4a21; }
.mk-btn.big { flex: 1; height: 48px; font-size: 15px; width: 100%; margin-bottom: 10px; }
.mk-bid .mk-btn.big { margin-bottom: 0; }
.mk-btn.ghost { background: #0d0d0d; border-color: #2a2a2a; }
.mk-btn.ghost:hover { background: #151515; }
.mk-btn.small { height: 30px; padding: 0 12px; font-size: 13px; }
.mk-count { text-align: center; color: #7d7d7d; font-size: 13px; margin-top: 4px; }
.mk-count b { color: #e0e0e0; font-weight: 600; }
.mk-h2 { margin: 28px 0 12px; font-size: 20px; font-weight: 700; }
.mk-bids .mk-th { grid-template-columns: 1fr 1fr 1fr; }
.mk-brow { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 11px 18px; border-bottom: 1px solid #141414; font-size: 13.5px; }
.mk-brow:last-child { border-bottom: 0; }
.mk-brow.lead b { color: #fff; }
.mk-brow a { color: #7fb4d9; }
.mk-wal { display: flex; flex-wrap: wrap; }
.mk-wal > div { padding: 14px 22px; border-right: 1px solid #171717; }
.mk-wal span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6f6f6f; margin-bottom: 4px; }
.mk-wal b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* cart: a manifest on the left, a payment console on the right */
.cx { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .cx { grid-template-columns: 1fr; } }
.cx-ledger { position: relative; background: #0a0a0a; border: 1px solid #1d1d1d; padding: 0 0 18px; background-image: repeating-linear-gradient(0deg, transparent 0 31px, #0f0f0f 31px 32px); }
.cx-ledger header { display: grid; grid-template-columns: 36px 1fr auto; padding: 18px 22px 8px; font: 11px/1 Consolas, "SF Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #5f5f5f; border-bottom: 1px dashed #262626; }
.cx-line { display: grid; grid-template-columns: 36px auto 1fr auto 26px; align-items: center; gap: 0 10px; padding: 14px 22px 12px 22px; }
.cx-line.gone { opacity: .45; text-decoration: line-through; }
.cx-n { font: 12px Consolas, monospace; color: #555; }
.cx-what b { display: block; font-size: 16px; font-weight: 600; }
.cx-what small { color: #6d6d6d; font-size: 11.5px; }
.cx-dots { align-self: end; border-bottom: 1px dotted #3a3a3a; height: 12px; margin: 0 4px; }
.cx-amt { font: 600 15px Consolas, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
.cx-x { background: none; border: 0; color: #666; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }
.cx-x:hover { color: #ff7a7a; }
.cx-ledger footer { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 22px 0; padding-top: 16px; border-top: 1px dashed #2a2a2a; }
.cx-ledger footer span { font: 11px Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #777; }
.cx-ledger footer b { font: 700 32px Consolas, "SF Mono", monospace; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cx-fine { margin: 12px 22px 0; font-size: 11.5px; line-height: 1.5; color: #5f5f5f; }
.cx-pay { background: #080808; border: 1px solid #1d1d1d; padding: 18px 18px 20px; }
.cx-pay h2 { margin: 0 0 12px; font: 11px Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #777; font-weight: 400; }
.cx-coins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.cx-coin { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 10px 12px 12px; background: #0d0d0d; border: 1px solid #1f1f1f; cursor: pointer; margin: 0; }
.cx-coin input { position: absolute; opacity: 0; pointer-events: none; }
.cx-sym { font: 700 13px Consolas, monospace; color: #fff; }
.cx-cname { font-size: 11px; color: #6a6a6a; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-bal { grid-column: 1 / -1; font: 600 14px Consolas, monospace; margin-top: 6px; color: #bdbdbd; font-variant-numeric: tabular-nums; }
.cx-coin.zero .cx-bal { color: #4a4a4a; }
.cx-meter { grid-column: 1 / -1; height: 3px; background: #181818; margin-top: 8px; }
.cx-meter i { display: block; height: 100%; background: #3a3a3a; }
.cx-coin.ok .cx-meter i { background: #3fbf6a; }
.cx-coin:hover { border-color: #3a3a3a; }
.cx-coin.sel { border-color: #d8d8d8; background: #101010; }
.cx-coin.sel::before, .cx-coin.sel::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid #fff; }
.cx-coin.sel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.cx-coin.sel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.cx-sum { border-top: 1px dashed #262626; padding-top: 12px; margin-bottom: 14px; }
.cx-sum > div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: #8a8a8a; }
.cx-sum b { font: 600 13px Consolas, monospace; color: #e8e8e8; font-variant-numeric: tabular-nums; }
.cx-pay-btn { position: relative; width: 100%; height: 50px; background: #143518; border: 1px solid #1f4a25; color: #fff; font-size: 15px; letter-spacing: .02em; cursor: pointer; overflow: hidden; font-weight: 400 !important; }
.cx-pay-btn:hover:not(:disabled) { background: #1b4a21; }
.cx-pay-btn:disabled { background: #111; border-color: #222; color: #555; cursor: not-allowed; }
.cx-pay-btn.busy { background: #143518 repeating-linear-gradient(115deg, transparent 0 12px, rgba(255,255,255,.07) 12px 24px); background-size: 34px 100%; animation: cxBusy .7s linear infinite; }
@keyframes cxBusy { from { background-position: 0 0; } to { background-position: 34px 0; } }
.cx-pay .cx-fine { margin: 10px 0 0; color: #b57a7a; }
.mk-void { text-align: center; padding: 60px 0; color: #777; }
.mk-void-art { width: 74px; height: 74px; margin: 0 auto 14px; border: 1px dashed #2a2a2a; border-radius: 50%; background: radial-gradient(circle, #1a1a1a 0 3px, transparent 4px); }

/* marketplace admin */
.mkA-form label { display: block; margin: 10px 0 3px; font-size: 12px; color: #8d8d8d; }
.mkA-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.mkA-grid input, .mkA-grid select { margin: 0; }
.mkA-row { display: flex; align-items: center; gap: 18px; margin-top: 12px; flex-wrap: wrap; }

/* deposits */
.mk-bal { color: #fff; font-weight: 700; }
.mk-dep { color: #fff !important; border: 1px solid #333; border-radius: 3px; padding: 2px 10px; }
.mk-dep:hover { background: #fff; color: #000 !important; }
.dp-form { margin-bottom: 26px; }
.dp-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dp-coin { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 3px; cursor: pointer; margin: 0; }
.dp-coin input { display: none; }
.dp-coin b { color: #fff; font-size: 14px; }
.dp-coin span { color: #777; font-size: 12px; }
.dp-coin:hover { border-color: #3a3a3a; }
.dp-coin.on { border-color: #fff; }
.dp-amt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dp-quick { display: flex; gap: 6px; }
.dp-quick button { background: #0d0d0d; border: 1px solid #1f1f1f; color: #aaa; border-radius: 3px; padding: 7px 12px; cursor: pointer; }
.dp-quick button:hover { color: #fff; border-color: #3a3a3a; }
.dp-inv { margin-bottom: 16px; }
.dp-row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid #161616; }
.dp-row:last-child { border-bottom: 0; }
.dp-row span { color: #777; font-size: 13px; flex: none; }
.dp-row b { color: #fff; font-weight: 600; text-align: right; }
.dp-addr { font-family: monospace; font-size: 12.5px; word-break: break-all; }
.dp-copy { cursor: pointer; }
.dp-paid label { display: block; color: #888; font-size: 13px; margin-bottom: 6px; }
.dp-paid input[type=text] { width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.dp-btns { display: flex; gap: 10px; }

/* collectible usernames */
.cl-item { padding: 12px 0; border-top: 1px solid #1a1a1a; }
.cl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.cl-top b { color: #fff; font-size: 15px; }
.cl-state { font-size: 12px; color: #777; padding: 2px 9px; border: 1px solid #262626; border-radius: 10px; }
.cl-state.on { color: #fff; border-color: #444; }
.cl-btns { display: flex; gap: 6px; }
.cl-btns form { flex: 1; margin: 0; display: flex; }
.cl-btn { flex: 1; height: 32px; padding: 0 10px; margin: 0; background: #1c1c1c; border: 1px solid #2a2a2a; border-radius: 3px; color: #ddd; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; }
.cl-btn:hover { background: #262626; color: #fff; border-color: #3a3a3a; }
.cl-btn.go { background: #fff; color: #000; border-color: #fff; font-weight: 600; }
.cl-btn.go:hover { background: #e6e6e6; }
.cl-btns > .cl-btn { flex: 1; }
.cl-sell { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 0; }
.cl-sell[hidden] { display: none; }
.cl-sell input, .cl-sell select { width: 100%; box-sizing: border-box; height: 32px; margin: 0; padding: 0 8px; font-size: 13px; }
.cl-sell input[name=start], .cl-sell input[name=buy_now], .cl-sell .cl-btn { grid-column: 1 / -1; }
.cl-also { margin: 2px 0 8px; color: #b4b4b4; font-size: 14px; line-height: 1.45; }
.cl-also a { color: #8c7be0; }
.cl-also a:hover { color: #b3a6f0; }
.profile-bar { position: relative; }


.settings-grid .cl-btn { height: 34px; border-radius: 4px; font-weight: 500; transition: background .12s, border-color .12s, color .12s; }
.settings-grid .cl-btn.on { background: #14301f; border-color: #1f5a37; color: #6fe3a0; }
.settings-grid .cl-btn.on:hover { background: #1a3d28; border-color: #2a7a4a; color: #9af0be; }
.settings-grid .cl-btn.sell { background: #a63a3a; border-color: #a63a3a; color: #fff; }
.settings-grid .cl-btn.sell:hover { background: #bb4545; border-color: #bb4545; }
.cl-state.on { color: #6fe3a0; border-color: #1f5a37; }
.cl-state.on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #3ddc84; }
.settings-grid .cl-state, .settings-grid .cl-state.on { border: 0; border-radius: 0; padding: 0; font-size: 13px; color: #777; }
.settings-grid .cl-state.on { color: #ddd; }
.settings-grid .cl-state.on::before { content: none; }
.settings-grid .cl-btn.off { background: #5e1f1f; border-color: #5e1f1f; color: #ffb4b4; }
.settings-grid .cl-btn.off:hover { background: #742727; border-color: #742727; color: #fff; }
.cl-sell input:disabled { opacity: .4; }
/* admin comment editing */
.pc-acts { display: inline-flex; align-items: center; gap: 10px; }
.pc-edit, .pv-c-edit { color: #9aa7b8; font-size: 12px; text-decoration: underline; line-height: 14px; }
.pc-edit:hover, .pv-c-edit:hover { color: #fff; }
.pv-c-edit { margin-left: 10px; }
.pc-editbox { margin-top: 4px; }
.pc-editbox textarea { width: 100%; box-sizing: border-box; min-height: 52px; margin: 0 0 6px; font-family: inherit; font-size: 13px; resize: vertical; }
.pc-editrow { display: flex; gap: 6px; }
.pc-editrow button { margin: 0; padding: 4px 14px; font-size: 12px; background: #fff; color: #000; border: 1px solid #fff; border-radius: 3px; cursor: pointer; }
.pc-editrow button.ghost { background: transparent; color: #aaa; border-color: #333; }
.pc-editrow button:disabled { opacity: .5; }
/* staff view of a profile */
.pf-ph { margin: 18px 0 8px; font-size: 15px; font-weight: 700; }
.pf-ph a { font-weight: 400; font-size: 13px; }
tr.pf-off { background: rgba(190, 50, 60, 0.20); }
tr.pf-off td { border-bottom-color: rgba(190, 50, 60, 0.25); }
.pf-why { margin-left: 6px; font-size: 11px; color: #ff8d8d; border: 1px solid #7a2a2a; border-radius: 3px; padding: 0 5px; }
.pf-acts { white-space: nowrap; }
.pf-acts a, .pf-acts button { color: #ff7a7a; font-size: 12px; text-decoration: underline; background: none; border: 0; padding: 0; margin: 0 0 0 10px; cursor: pointer; line-height: 14px; }
.pf-acts a:hover, .pf-acts button:hover { color: #fff; background: none; }
.pf-acts form { display: inline; margin: 0; }
tr.pf-off td, table tbody tr.pf-off:nth-child(n) td { background: rgba(190, 50, 60, 0.24); }
.pf-right { min-width: 0; }
.pf-info-h { margin-top: 0; }
table.pf-tint { border-radius: 0; }
table.pf-tint thead th { background: color-mix(in srgb, var(--pf-tint) 62%, #000); color: #fff; }
table.pf-tint tbody tr td { background: color-mix(in srgb, var(--pf-tint) 52%, #000); color: #fff; border-bottom: 1px solid color-mix(in srgb, var(--pf-tint) 70%, #000); }
table.pf-tint tbody tr.pf-off td { background: color-mix(in srgb, var(--pf-tint) 30%, #000); }
table.pf-tint a { color: #fff; }
table.pf-tint .pf-acts a, table.pf-tint .pf-acts button { color: #fff; }
table.pf-tint .meta, table.pf-tint .num { color: #fff; }
table.pf-tint thead th { background: color-mix(in srgb, var(--pf-tint) 58%, #a06078); }
table.pf-tint tbody tr td { background: color-mix(in srgb, var(--pf-tint) 50%, #8c5066); border-bottom-color: color-mix(in srgb, var(--pf-tint) 62%, #a06078); }
table.pf-tint tbody tr.pf-off td { background: color-mix(in srgb, var(--pf-tint) 30%, #3a1822); }

/* staff pastes table: plain red */
table.pf-tint thead th { background: color-mix(in srgb, var(--pf-tint) 48%, #000); }
table.pf-tint tbody tr td { background: color-mix(in srgb, var(--pf-tint) 68%, #000); border-bottom-color: color-mix(in srgb, var(--pf-tint) 52%, #000); }
table.pf-tint tbody tr.pf-off td { background: color-mix(in srgb, var(--pf-tint) 36%, #000); }
.pf-why { margin-left: 8px; padding: 0; border: 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
/* Manage button: grey, like the reference */
.profile-action .pill.pill-manage { background: #8f8f8f; border: 0; border-radius: 3px; color: #fff; letter-spacing: .06em; font-size: 12px; padding: 0 16px; }
.profile-action .pill.pill-manage:hover { background: #a6a6a6; }

/* Halloween mode (Admin > Control): the logo wears a witch hat, a few bats around it */
.home-ascii { position: relative; }
.hw-hat { position: absolute; left: 50%; top: 4px; width: 118px; height: auto; margin-left: -60px; transform: rotate(-8deg); z-index: 3; pointer-events: none; }
.hw-bat { position: absolute; fill: #ff7a1a; z-index: 3; pointer-events: none; }
.hw-bat.b1 { width: 30px; left: -34px; top: 14px; transform: rotate(-14deg); }
.hw-bat.b2 { width: 22px; right: -26px; top: 46px; transform: rotate(12deg) scaleX(-1); }
.hw-bat.b3 { width: 16px; right: 8px; top: -14px; transform: rotate(-6deg); opacity: .85; }
body.halloween .home-ascii { overflow: visible; }
/* Staff name sparkle: the specks also drift just above and below the letters, not only inside the text box */
.staff-gif { padding: 2px 2px; margin: -2px -2px; background-position: center; background-size: auto; }
.acct-name .staff-gif { padding: 0; margin: 0; }
.acct-name, .acct-name a { white-space: nowrap; }
.acct-menu-trigger, .acct-menu-trigger a { white-space: nowrap; }
/* Profile bio uses a classic system font, not Inter */
.profile-bio, .profile-bio * { font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 400; }
.profile-follow-counts, .profile-follow-counts * { font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.profile-follow-counts a strong { font-weight: 700; }
/* follow counts: regular-weight numbers and a slightly lighter label, measured against the original */
.profile-follow-counts a { color: #888; }
.profile-follow-counts a strong { font-weight: 600; color: #fff; }
/* paste tables: thin outline, grey row lines and 8px side padding, as in the original */
.paste-table { border: 1px solid #1f1f1f; }
.paste-table tbody tr:nth-child(odd) { background: #181818; }
.paste-table th { border-bottom: 1px solid #333; }
.paste-table td, .paste-table tbody tr:last-child td { border-bottom: 1px solid #333; }
.paste-table th:first-child, .paste-table td:first-child { padding-left: 8px; }
.paste-table th:last-child, .paste-table td:last-child { padding-right: 8px; }
/* author name and rank in the paste tables sit a hair higher, so they look centred in the row */
.paste-table td:nth-child(4) a { position: relative; top: -1px; }
.an-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 760px; box-sizing: border-box; margin: 0 0 6px; padding: 8px 10px; background: #1b1b1b; border-radius: 2px; color: #bbb; font-size: 13px; }
/* Account dialog spacing, measured from the original: sits near the top, name aligned to the top, tighter rows */
.acct-menu-backdrop.open { align-items: flex-start; }
.acct-menu { margin-top: 23vh; }
.acct-menu-head { align-items: flex-start; padding: 0 0 8px; }
.acct-menu .acct-close { padding: 5px 16px; line-height: 16px; }
.acct-menu a, .acct-menu form button { padding: 10px 0; line-height: 21px; }
.acct-menu-head { padding-bottom: 7px; }
.acct-menu .acct-name { line-height: 19px; }
.profile-cols table:not(.kv) tbody tr, .profile-cols table:not(.kv) tbody tr:nth-child(odd) { background: #181818; }

/* Settings, matched to the original: dimmer labels, bold "Preview:", flat colour blocks, white badge boxes */
.settings-grid h2 { color: #a9a9a9; }
.settings-grid p.st-preview { color: #d6d6d6; font-weight: 700; font-size: 13px; margin: 0 0 6px; }
input[type=color].color-block { height: 32px; border: 0; border-radius: 0; padding: 0; }
input[type=color].color-block::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color].color-block::-webkit-color-swatch { border: 0; border-radius: 0; }
input[type=color].color-block::-moz-color-swatch { border: 0; }
.settings-grid textarea { resize: none; }
.pbv-box { background: #fff !important; }
.pbv-row input:checked + .pbv-box { background: #fff !important; }
/* Avatar and Banner get their labels back, like the other sections */
.settings-grid .set-label { display: block; font-size: 13px; font-weight: 600; color: #a9a9a9; margin: 0 0 4px; }
.settings-grid .card h2, .settings-grid .card .set-label { color: #a9a9a9; }
/* Bio box in settings, as in the original: bold mono text, buttons with a thin outline */
.settings-grid textarea[name=bio] { font-weight: 700; min-height: 96px; }
.settings-grid textarea[name=bio] + button { border: 1px solid #333; }
/* username availability inside the box */
.un-check { position: relative; }
.un-check input { padding-right: 52px; }
.un-state { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin-top: -4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; pointer-events: none; }
.un-state.yes { color: #1f9d3a; }
.un-state.no { color: #ff2b2b; }
/* Users page: sizes and fonts matched to the original */
.users-hero h1 { color: #fff; }
.users-hero .home-search-row button, .users-hero button { font-family: inherit; font-size: 13.5px; padding: 0 16px; }
.users-hero .home-count { font-size: 13.5px !important; }
/* Followers / Following list, measured from the original: outlined card, zebra rows, grey row lines, centred date columns */
.fl-card { border: 1px solid #1f1f1f; background: #080808; }
.fl-head { box-sizing: border-box; height: 47px; padding: 0 16px; border-bottom: 1px solid #333; }
.fl-head a { font-weight: 700; }
.fl-table th { height: 33px; padding: 0 8px; background: #181818; border-bottom: 1px solid #333; }
.fl-table td { height: 33px; padding: 0 8px; border-top: 0; border-bottom: 1px solid #333; vertical-align: middle; }
.fl-table tbody tr:nth-child(odd) { background: #181818; }
.fl-table tbody tr:nth-child(even) { background: #080808; }
.fl-table .r { text-align: center; width: 148px; }
.fl-table td.r { font-weight: 500; }
.fl-table th, .fl-table td { height: 34px; }
.fl-head span a.staff-gif, .fl-head span a.name-sparkle { margin-left: 4px; }
/* the first badge keeps a little air from the name and rank label */
a + .badge-icon, .profile-name a + .badge-icon { margin-left: 7px !important; }
.an-switch { justify-content: flex-end; padding: 6px 10px; }
/* follower counts: no underline on hover; settings buttons in the site font at a whole pixel size so the text is crisp */
.profile-follow-counts a:hover, .profile-follow-counts a:hover strong { text-decoration: none; }
.settings-grid button, .settings-grid .set-wide { font-family: inherit; font-size: 14px; }
/* hidden or waiting pastes in a profile: the same dark red as the admin rows (not pink) */
tr.pf-off, tr.pf-off td, table tbody tr.pf-off:nth-child(n) td, .profile-cols table:not(.kv) tbody tr.pf-off td { background: #400600; border-bottom-color: #5a0b02; }
/* rows never change colour when the mouse is over them */
.profile-cols table:not(.kv) tbody tr:hover { background: #181818; }
.profile-cols table:not(.kv) tbody tr.pf-off:hover { background: #400600; }
.fl-table tbody tr:nth-child(odd):hover { background: #181818; }
.fl-table tbody tr:nth-child(even):hover { background: #080808; }
.paste-table tbody tr:hover { background-color: unset; }
/* the name in the followers header stays on one line */
.fl-head > span { white-space: nowrap; }
/* admin: Hall of Autism pictures */
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.hs-card { background: #111; border: 1px solid #1f1f1f; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.hs-pic { height: 150px; background: #0a0a0a; display: flex; align-items: center; justify-content: center; color: #555; font-size: 13px; overflow: hidden; }
.hs-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hs-name { font-size: 13px; color: #ddd; font-weight: 600; word-break: break-word; min-height: 32px; }
.hs-up { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.hs-up input[type=file] { font-size: 12px; color: #aaa; }
.hs-rm { margin: 0; }
/* paste page: the small "Reveal" action next to an anonymous author */
.pv-reveal-form { display: inline; margin: 0 0 0 8px; }
.pv-reveal-form button.pv-reveal { display: inline-block; width: auto; height: 20px; padding: 0 9px; margin: 0; background: transparent; border: 1px solid #3a3a3a; border-radius: 3px; color: #cfcfcf; font-size: 11.5px; font-weight: 500; line-height: 18px; cursor: pointer; vertical-align: middle; }
.pv-reveal-form button.pv-reveal:hover { background: #fff; border-color: #fff; color: #000; }
.pv-reveal-form { display: block !important; margin: 4px 0 0 !important; text-align: right; }
.pv-reveal-form button.pv-reveal { display: inline-block !important; width: auto !important; height: 21px !important; padding: 0 10px !important; background: transparent !important; border: 1px solid #3a3a3a !important; border-radius: 3px !important; color: #cfcfcf !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 19px !important; }
.pv-reveal-form button.pv-reveal:hover { background: #fff !important; border-color: #fff !important; color: #000 !important; }
/* status tag next to a paste title (Hidden / Private / Waiting / Anonymous): a small solid label */
.pf-why { display: inline-block; margin-left: 9px; padding: 1px 7px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; line-height: 15px; text-transform: uppercase; vertical-align: 1px; }
tr.pf-off .pf-why { background: #7a1208; color: #ffd9d4; }

/* alternating row shades (sampled from the original): #181818 / #080808, 1px #333 lines */
.paste-table tbody tr:nth-child(even) { background: #080808; }
.profile-cols table:not(.kv) tbody tr:nth-child(odd) td { background: #181818; }
.profile-cols table:not(.kv) tbody tr:nth-child(even) td { background: #080808; }
.profile-cols table:not(.kv) tbody tr:hover td { background: inherit; }
.profile-cols table:not(.kv) tbody tr td { border-bottom: 1px solid #333; }
.profile-cols table:not(.kv) tbody tr.pf-off td { background: #400600; border-bottom-color: #5a0b02; }

/* Christmas mode: Santa beanie on the home logo (same spot as the Halloween hat) */
body.christmas .home-ascii { overflow: visible; }
.xm-hat { position: absolute; left: 50%; top: 8px; width: 124px; height: auto; margin-left: -62px; transform: rotate(-8deg); z-index: 3; pointer-events: none; }
.xm-logo { display: block; height: 270px; width: auto; }
.home-ascii:has(.xm-logo) { height: auto; width: auto; max-width: none; overflow: visible; }

/* Ads from the admin panel look like the announcements, a little smaller */
.home-announce.home-ad a, .home-announce.home-ad span { font-size: 17px; line-height: 25px; font-weight: 700; text-decoration: underline; }

/* Private profile notice (sampled from the original) */
.private-notice { background: #181818; border: 1px solid #1f1f1f; border-radius: 0; padding: 31px 20px 24px; color: #fff; font-size: 14px; }
.private-notice p { margin: 0 0 15px; line-height: 16px; }
.private-notice p:last-child { margin-bottom: 15px; }
.private-notice strong { color: #fff; font-weight: 700; }
.private-notice a { color: #fff; text-decoration: underline; }

/* Profile pastes table: line under the header and a soft top edge, like the original */
.profile-cols table:not(.kv) { border-top: 2px solid #1f1f1f; }
.profile-cols table:not(.kv) thead th { border-bottom: 1px solid #333; }

/* Settings form, sampled from the original: 282px column, 32px controls, 7px between a field and its button */
.settings-grid > div { width: 282px; }
.settings-grid input[type=text], .settings-grid input[type=password], .settings-grid input[type=email], .settings-grid input[type=number], .settings-grid select { height: 32px; margin: 0 0 7px; background: #3a3a3a; }
.settings-grid textarea { height: 96px; margin: 0 0 7px; background: #3a3a3a; }
.settings-grid button, .settings-grid .set-wide { height: 32px; margin: 0 0 7px; background: #282828; border: 1px solid #333; box-sizing: border-box; }
.settings-grid button.btn-reset { background: #a83a3a; }
.settings-grid input[type=color].color-block, .settings-grid .color-bar { height: 32px; margin-bottom: 8px; border-radius: 0; }
.settings-grid .set-avatar-thumb { width: 32px; height: 32px; }
.settings-grid .set-avatar-row .set-wide { height: 32px; }

/* Bio: same face and weight as the rest of the page, pure white and sharp */
.profile-bio, .profile-bio * { font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 500; color: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-shadow: none; filter: none; opacity: 1; }
.profile-bio a, .profile-bio a * { color: #fff; }
.private-notice a, .private-notice a:hover { text-decoration: none; }

/* Notifications */
.notif-badge { display: inline-block; margin-left: 8px; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; text-decoration: none; vertical-align: 2px; }
.notif-badge:hover { background: #d44636; text-decoration: none; }
.notif-list { background: #181818; border-top: 2px solid #1f1f1f; }
.notif-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #333; color: #fff; text-decoration: none; font-size: 14px; }
.notif-row:hover { background: #202020; text-decoration: none; }
.notif-row.new { background: #14202b; }
.notif-when { color: #8a8a8a; font-size: 12px; white-space: nowrap; }
.notif-empty { padding: 22px 14px; text-align: center; color: #aaa; font-size: 14px; }


/* Devices */
.dev-list { background: #181818; border-top: 2px solid #1f1f1f; }
.dev-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border-bottom: 1px solid #333; }
.dev-name { color: #fff; font-size: 14px; font-weight: 600; }
.dev-meta { color: #9a9a9a; font-size: 12px; margin-top: 2px; }
.dev-now { margin-left: 8px; padding: 1px 7px; border-radius: 3px; background: #1d3b2a; color: #6fe3a0; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }


/* Dashboard charts */
.dash-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.dash-chart { background: #181818; border-top: 2px solid #1f1f1f; padding: 10px 12px 8px; min-width: 0; overflow: hidden; }
.dash-chart-head { display: flex; justify-content: space-between; font-size: 13px; color: #c9c9c9; margin-bottom: 6px; }
.dash-chart-head b { color: #fff; }
.dash-chart-sub { font-size: 12px; color: #8a8a8a; margin: -2px 0 10px; }
.dash-chart-sub b { color: #d6d6d6; font-weight: 600; }
.dash-bars { display: flex; align-items: stretch; gap: 3px; height: 92px; padding-top: 4px; border-bottom: 1px solid #3a3a3a; background: repeating-linear-gradient(0deg, transparent 0, transparent 22px, #222 22px, #222 23px); }
.dash-bar { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; position: relative; cursor: default; }
.dash-bar i { display: block; width: 100%; background: var(--c); border-radius: 2px 2px 0 0; opacity: .8; transition: opacity .1s; }
.dash-bar i.zero { height: 2px !important; background: #333; opacity: 1; border-radius: 0; }
.dash-bar:hover i { opacity: 1; }
.dash-bar:hover { background: rgba(255, 255, 255, 0.05); }
.dash-bar.is-today i:not(.zero) { opacity: 1; box-shadow: 0 0 0 1px var(--c); }
.dash-axis { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #777; }
.dash-chart table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.dash-chart td { padding: 5px 4px; font-size: 13px; border-bottom: 1px solid #262626; }
.dash-chart td.num { text-align: right; color: #fff; }


/* ---- Phones: hamburger menu, tables that fit, tighter spacing ---- */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .container { padding-left: 12px; padding-right: 12px; }
  header.site-header .nav-row { flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 0; }
  header.site-header .nav-row .brand { font-size: 20px; margin-right: auto; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 34px; padding: 0 8px; margin-left: 8px; background: transparent; border: 1px solid #333; border-radius: 3px; cursor: pointer; order: 2; }
  .nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 1px; }
  header.site-header .nav-user { order: 1; margin-left: 0; gap: 12px; }
  header.site-header nav.links { order: 3; display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 2px; }
  header.site-header.nav-open nav.links { display: flex; }
  header.site-header nav.links a, nav.links a { display: block; padding: 11px 2px; border-top: 1px solid #1f1f1f; font-size: 15px; }
  /* long tables: the less important columns step aside */
  .paste-table th:nth-child(2), .paste-table td:nth-child(2), .paste-table th:nth-child(3), .paste-table td:nth-child(3) { display: none; }
  .group-table th:nth-child(3), .group-table td:nth-child(3), .group-table th:nth-child(4), .group-table td:nth-child(4) { display: none; }
  .profile-cols table:not(.kv) th:nth-child(2), .profile-cols table:not(.kv) td:nth-child(2), .profile-cols table:not(.kv) th:nth-child(3), .profile-cols table:not(.kv) td:nth-child(3) { display: none; }
  .paste-table, .group-table { table-layout: fixed; width: 100%; }
  .paste-table th:nth-child(1) { width: 42% !important; }
  .paste-table th:nth-child(4) { width: 33% !important; }
  .paste-table th:nth-child(5) { width: 25% !important; }
  .group-table th:nth-child(1) { width: 20% !important; }
  .group-table th:nth-child(2) { width: 48% !important; }
  .group-table th:nth-child(5) { width: 32% !important; }
  .paste-table td, .group-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* anything else that is wider than the screen scrolls inside the page instead of breaking it */
  .container table { max-width: 100%; }
  .admin-shell { align-items: stretch !important; margin: 0 -12px !important; }
  .admin-content { width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 12px 40px !important; overflow-x: auto; }
  .admin-content table { min-width: 560px; }
  .ad-tabs { flex-wrap: wrap; }
  h1 { font-size: 22px; }
  .home-hero, .home-logo { max-width: 100%; }
  .settings-grid > div { width: 100%; max-width: 100%; }
  .notif-row, .dev-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dev-row form { align-self: flex-start; }
  .dash-charts { grid-template-columns: 1fr; }
}

/* Home logo size and spacing sampled from the original: 200 x 214, top at 71, 20px to the first link */
.home-ascii { height: 214px; margin-top: 4px; margin-bottom: 18px; }
.home-ascii canvas { height: 214px; }
.home-ascii .home-ascii-text { transform: scale(0.263, 0.24); }
.home-ascii:has(.xm-logo) { height: auto; }


/* Sign-up security code */
.cap-box { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.cap-img { flex: 1; background: #0a0a0a; border: 1px solid #2b2b2b; display: flex; justify-content: center; align-items: center; min-height: 64px; }
.cap-img svg { display: block; max-width: 100%; height: auto; }
.cap-new { flex: 0 0 44px; width: 44px !important; margin: 0 !important; background: #2b2b2b; border: 1px solid #2b2b2b; color: #fff; font-size: 20px; cursor: pointer; }
.cap-new:hover { background: #383838; }
.hp-field { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }


/* Weekly report and staff activity */
.wk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.wk-tile { background: #181818; border-top: 2px solid #1f1f1f; padding: 10px 12px; }
.wk-tile span { display: block; color: #9a9a9a; font-size: 12px; margin-bottom: 4px; }
.wk-tile b { font-size: 20px; color: #fff; font-weight: 600; }
.wk-d { font-size: 12px; font-weight: 600; color: #8a8a8a; margin-left: 4px; }
.wk-d.up { color: #6fe3a0; }
.wk-d.down { color: #ff8a8a; }
.wk-quiet td { opacity: .55; }

/* Links inside text (Terms, pastes, comments, bios, notices) are white and underlined, not blue */
main.terms-page a, .paste-view-body a, .pc-body a, .comment-body a, .private-notice a, .upgrade-text a { color: #fff; text-decoration: underline; }
main.terms-page a:hover, .paste-view-body a:hover, .pc-body a:hover, .comment-body a:hover { color: #fff; text-decoration: underline; opacity: .8; }

.lg-filter a { align-self: center; padding: 0 8px; font-size: 13px; color: #c9c9c9; text-decoration: underline; }
.lg-filter a:hover { color: #fff; }

/* Users page a touch larger, like the original */
.users-wrap { zoom: 1.04; }
/* e-mail addresses: white, a little smaller than the text around them, in Terms and pastes */
main.terms-page a[href^="mailto:"], .paste-view-body a[href^="mailto:"], .pc-body a[href^="mailto:"] { color: #fff; font-size: .93em; text-decoration: underline; }


/* Settings messages: plain coloured text (the green is the original's) */
.set-note { font-size: 14px; margin: 0 0 6px; line-height: 18px; }
.set-note.ok { color: #008000; }
.set-note.err { color: #e03a3a; }

/* Drop-down lists look like the original: dark grey list, white text, blue highlight */
select { color-scheme: dark; }
select option { background: #545454; color: #fff; }
.settings-grid select option { background: #545454; }

/* Paste sidebar fields: 283 wide, 32 high, 12 apart, grey #545454 */
.paste-page .compose-side input[type=text], .paste-page .compose-side input[type=password], .paste-page .compose-side select { height: 32px; line-height: 32px; margin: 0 0 12px; background: #545454; }
.paste-page .compose-side input:disabled, .paste-page .compose-side select:disabled { background: #545454; }
.paste-page .compose-side button[type=submit] { background: #545454; }
/* sidebar wide enough for 283 px fields, like the original */
.paste-page .compose-side { width: 315px; flex: 0 0 315px; }
.pp-burger { right: 331px; }
.paste-page.pp-full .pp-burger { right: 16px; }

/* "plain text (text/plain)" button: flat grey like the original, regular weight, full width of the sidebar */
.paste-page .pv-raw { display: block; box-sizing: border-box; width: 100%; height: 30px; line-height: 28px; padding: 0 10px; background: #545454; border: 1px solid #333; border-radius: 2px; color: #fff; font-size: 13px; font-weight: 400; text-align: center; text-decoration: none; }
.paste-page .pv-raw:hover { background: #606060; text-decoration: none; }
.dev-bad { margin-left: 8px; padding: 1px 7px; border-radius: 3px; background: #3b1414; color: #ff8a8a; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.dev-list a { color: #fff; text-decoration: underline; }

/* ================= Phone layout for paste pages (view) ================= */
@media (max-width: 800px) {
  .pp-burger { display: none !important; }
  .paste-page .compose { display: flex; flex-flow: row wrap; align-items: flex-start; align-content: flex-start; gap: 8px; min-height: 0; padding: 0 12px 28px; }
  .paste-page .compose-side { display: contents; }
  .paste-page .compose > * , .paste-page .compose-side > * { min-width: 0; }
  .paste-page .compose-side > * { flex: 0 0 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; }
  .paste-page .cs-brand { order: 1; margin: 0; padding: 12px 0 8px; overflow: hidden; border-bottom: 1px solid #262626; }
  .paste-page .cs-brand .ascii-logo { text-align: left; }
  .paste-page .cs-brand .ascii-logo pre { font-size: 8.5px; line-height: 9px; margin: 0; max-width: 100%; overflow: hidden; }
  .paste-page .pv-meta { order: 2; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 13px; margin: 0; padding: 4px 0 10px; border-bottom: 1px solid #262626; }
  .paste-page .pv-meta dt { white-space: nowrap; }
  .paste-page .pv-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; word-break: break-word; }
  /* action buttons sit in one wrapped row */
  .paste-page .pv-raw, .paste-page .pv-pinbtn, .paste-page .pv-editbtn, .paste-page .compose-side > form[action$="/bump"], .paste-page .compose-side > form[action$="/delete"], .paste-page .compose-side > button.pv-bump { order: 3; flex: 1 1 calc(50% - 4px); max-width: none; margin: 0; }
  .paste-page .pv-raw, .paste-page .pv-pinbtn, .paste-page .pv-editbtn, .paste-page .pv-bump, .paste-page .compose-side > form[action$="/delete"] button { display: flex; align-items: center; justify-content: center; min-height: 40px; width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px; text-align: center; margin: 0; }
  .paste-page .compose-side > form[action$="/bump"] { margin: 0; }
  .paste-page .compose-side > form[action$="/bump"] .pv-bump { margin: 0; }
  .paste-page .compose-editor { order: 4; flex: 0 0 100%; width: 100%; max-width: 100%; margin-top: 4px; }
  .paste-page .paste-view-body { min-height: 0; padding: 14px 12px; font-size: 12px; line-height: 16px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow-x: auto; border: 1px solid #1c1c1c; border-radius: 4px; }
  .paste-page .paste-view-body img, .paste-page .paste-view-body video, .paste-page .paste-view-body iframe, .paste-page .paste-view-body table { max-width: 100%; height: auto; }
  .paste-page .pv-sep { order: 5; margin: 4px 0; }
  .paste-page .pv-note { order: 6; margin: 0; }
  .paste-page .compose-side > form[action$="/comment"] { order: 6; margin: 0; }
  .paste-page .compose-side > form[action$="/comment"] textarea { min-height: 90px; font-size: 16px; }
  .paste-page .compose-side input[type=text], .paste-page .compose-side input[type=number], .paste-page .compose-side select, .paste-page .compose-side textarea { font-size: 16px; max-width: 100%; box-sizing: border-box; }
  .paste-page .compose-side > form[action$="/comment"] button[type=submit], .paste-page .compose-side details button { min-height: 42px; }
  .paste-page .pv-clist { order: 7; margin: 4px 0 0; }
  .paste-page .pv-c-body, .paste-page .pv-c-head { overflow-wrap: anywhere; word-break: break-word; }
  .paste-page .compose-side > details { order: 8; margin: 6px 0 0; padding: 8px 0; }
  .paste-page .compose-side > details summary { min-height: 32px; display: flex; align-items: center; justify-content: center; }
  .paste-page .success, .paste-page .error { margin: 10px 12px 0; }
  .paste-page .human-check, .paste-page .human-check * { max-width: 100%; box-sizing: border-box; }
  .paste-page { overflow-x: hidden; }
}
@media (max-width: 800px) {
  .paste-page .pv-raw, .paste-page .pv-pinbtn, .paste-page .pv-editbtn, .paste-page .pv-bump, .paste-page .compose-side > form[action$="/delete"] button { height: 44px !important; min-height: 44px; margin: 0 !important; padding: 0 10px !important; line-height: 1.1 !important; box-sizing: border-box; }
  .paste-page .compose-side > form[action$="/delete"] { flex: 0 0 100%; }
  .paste-page .compose-side > form[action$="/bump"] { display: flex; }
  .paste-page .compose-side > form[action$="/bump"] .pv-bump { flex: 1; }
}
@media (max-width: 800px) {
  .paste-page .pv-raw, .paste-page .pv-pinbtn, .paste-page .pv-editbtn, .paste-page .pv-bump, .paste-page .compose-side > form[action$="/delete"] button { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center; }
}
@media (max-width: 800px) {
  /* compose / edit: the text box comes first, then the options and the upload button */
  .paste-page .compose:not(:has(.pv-meta)) .compose-editor { order: -1; margin-top: 12px; }
  .paste-page .compose:not(:has(.pv-meta)) .compose-editor textarea { height: 55vh; min-height: 280px; font-size: 14px; box-sizing: border-box; }
  .paste-page .compose:not(:has(.pv-meta)) .compose-side { padding: 0; }
}
@media (max-width: 800px) {
  .paste-page .compose:not(:has(.pv-meta)) .compose-editor textarea { border: 1px solid #2f2f2f !important; border-radius: 4px; background: #0a0a0a !important; padding: 12px !important; width: 100%; color: #e6e6e6; }
  .paste-page .compose:not(:has(.pv-meta)) .compose-editor textarea::placeholder { color: #7a7a7a; }
  .paste-page .compose:not(:has(.pv-meta)) .compose-editor { padding: 0 !important; }
}

/* Manager, Rich and Elite names: lighter weight and no underline on hover, like the reference (Admin is not touched) */
.nm-soft, a.nm-soft:hover, a.nm-soft:focus, .profile-bar .profile-name > .nm-soft { font-weight: 500 !important; text-decoration: none !important; }
.profile-bar .profile-name > span.nm-soft, .profile-bar .profile-name > span { cursor: default; text-decoration: none; }

/* Admin tabs: the rarely used pages sit in small drop-down menus (Staff, System, More) */
.ad-tabs { align-items: flex-start; }
details.ad-more { position: relative; font-size: 12px; }
details.ad-more > summary { list-style: none; cursor: pointer; color: #9a9a9a; padding: 3px 0; border-bottom: 1px solid transparent; user-select: none; }
details.ad-more > summary::-webkit-details-marker { display: none; }
details.ad-more > summary:hover, details.ad-more[open] > summary { color: #fff; }
details.ad-more.on > summary { color: #fff; border-bottom-color: #fff; }
details.ad-more .ad-more-list { position: absolute; top: 100%; left: -10px; z-index: 30; min-width: 150px; margin-top: 4px; padding: 6px 0; background: #111; border: 1px solid #262626; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
details.ad-more .ad-more-list a { display: block; padding: 6px 14px; border-bottom: 0; white-space: nowrap; }
details.ad-more .ad-more-list a:hover { background: #1b1b1b; }
details.ad-more .ad-more-list a.on { color: #fff; }
details.ad-more > summary, details.ad-more > summary:visited { color: #9a9a9a; text-decoration: none; }
details.ad-more > summary:hover, details.ad-more[open] > summary, details.ad-more.on > summary { color: #fff; }