:root { --bg:#000; --fg:#c8c8c8; --dim:#777; --line:#222; --link:#fff; --accent:#b30000;
  --field:#2a2a2a; --field-line:#555; /* input boxes: gray so they stand out from the black page */
  --topbar-h:32.5px; /* top bar height (phones: see bottom); the docked comments panel sits below it */
  --sans:Arial, Helvetica, sans-serif; --mono:Consolas, Menlo, "DejaVu Sans Mono", monospace; }
html { scroll-padding-top:var(--topbar-h); } /* jumps to #anchors land below the sticky bar */
* { box-sizing:border-box; }
html,body { margin:0; -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg); color:var(--fg);
  font:13px/1.5 var(--sans); }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
/* Every input box is gray (specific forms below set their own size/padding). */
input[type=text], input[type=password], input[type=email], input[type=number], input:not([type]), textarea, select {
  background:var(--field); color:var(--fg); border:1px solid var(--field-line); }

/* top bar */
/* stays at the top of the window while scrolling */
.topbar { position:sticky; top:0; z-index:40; background:var(--bg); display:flex; align-items:center; gap:26px;
  padding:6px 12px; border-bottom:1px solid var(--line); }
.topbar .brand { color:var(--accent); font-weight:bold; margin-right:10px; }
.topbar .menu { flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 26px; }
.topbar .right { margin-left:auto; display:flex; align-items:center; gap:26px; }

/* menu button: hidden on desktop, shown on phones (see bottom of file) */
.nav-toggle { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.burger { display:none; margin-left:auto; padding:8px 4px; cursor:pointer; }
.burger span { display:block; width:22px; height:2px; background:var(--link); transition:transform .2s, opacity .2s; }
.burger span + span { margin-top:5px; }
.nav-toggle:focus-visible + .burger { outline:1px solid var(--accent); }
/* turn the three lines into an X while open */
.nav-toggle:checked + .burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle:checked + .burger span:nth-child(2) { opacity:0; }
.nav-toggle:checked + .burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.inline { display:inline; margin:0; }
.linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--link); cursor:pointer; }
.linkbtn:hover { text-decoration:underline; }

/* login / register */
.auth { max-width:320px; margin:40px auto; display:flex; flex-direction:column; gap:12px; }
.auth-title { font-size:16px; font-weight:bold; color:var(--link); }
.auth label { display:flex; flex-direction:column; gap:4px; color:var(--dim); }
.auth input { background:var(--field); color:var(--fg); border:1px solid var(--field-line); font:inherit; padding:5px 8px; }
.auth input:focus { outline:none; border-color:var(--accent); }
.auth button { background:var(--accent); color:#fff; border:0; font:inherit; font-weight:bold; padding:6px; cursor:pointer; }
.auth button:hover { background:#d00000; }
.auth .error { border:1px solid var(--accent); color:#ff6b6b; padding:6px 8px; }
.auth .ok { border:1px solid #2e7d32; color:#81c784; padding:6px 8px; }
.auth-alt { color:var(--dim); }

/* admin names: same red as the rest of the site (listed after .who so it wins) */
.admin, .topbar .who.admin, .profile-name.admin { color:var(--accent); }

/* profile */
.dim { color:var(--dim); }
.profile-name { font-size:18px; font-weight:bold; color:var(--link); margin:8px 0 4px; }
.badge { font-size:11px; font-weight:normal; color:#fff; background:var(--accent); padding:1px 6px; vertical-align:middle; }
pre.bio { margin-bottom:18px; }
.bio-form { display:flex; flex-direction:column; gap:6px; max-width:560px; margin-bottom:18px; }
.bio-form label { color:var(--dim); }
.bio-form textarea { background:var(--field); color:var(--fg); border:1px solid var(--field-line); font:inherit; padding:6px 8px; resize:vertical; }
.bio-form textarea:focus { outline:none; border-color:var(--accent); }
.bio-form button { align-self:flex-start; background:var(--accent); color:#fff; border:0; font:inherit; font-weight:bold; padding:5px 14px; cursor:pointer; }
.bio-form .error { border:1px solid var(--accent); color:#ff6b6b; padding:6px 8px; }
.bio-form .ok { border:1px solid #2e7d32; color:#81c784; padding:6px 8px; }

/* homepage search */
.search { margin:0 auto 6px; max-width:560px; }
.search-row { display:flex; gap:6px; }
.search input[type=text], .search button { background:#000; color:var(--fg);
  border:1px solid #333; font:inherit; padding:3px 8px; }
.search input[type=text] { flex:1; min-width:0; background:var(--field); border-color:var(--field-line); }
.search-in { text-align:center; color:var(--dim); margin-top:6px; }
.search-in label { cursor:pointer; margin:0 6px; }
.search-in input { accent-color:var(--accent); vertical-align:middle; margin:0 2px 2px 0; }
.search button { cursor:pointer; }
.search button:hover { color:var(--link); border-color:var(--dim); }
.count { text-align:center; color:var(--dim); margin-bottom:14px; }
.pager { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:14px 0; }
.pager i { font-style:normal; }
.pager > a, .pager > span { min-width:32px; padding:4px 10px; text-align:center;
  border:1px solid #444; color:var(--link); }
.pager a:hover { border-color:var(--accent); background:#1a0000; text-decoration:none; }
.pager .cur { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:bold; }
.pager .off { color:#444; border-color:#222; }
.pager .gap { border-color:transparent; color:var(--dim); }
.pager .mob { display:none; }

main { padding:12px; max-width:1100px; margin:0 auto; }
.banner { text-align:center; margin:18px 0 22px; overflow:hidden; }
/* inline-block + left align keeps the ASCII lines lined up while the block is centered.
   The logo is 56 characters wide (~34em), so on narrow screens the font shrinks to fit. */
.banner b { display:inline-block; text-align:left; white-space:pre; color:var(--accent); font-weight:normal; font-family:var(--mono);
  font-size:min(13px, calc((100vw - 32px) / 34)); line-height:1.2; }

/* listing */
h2 { font-size:13px; font-weight:normal; color:var(--dim); margin:18px 0 6px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-weight:normal; color:var(--dim); border-bottom:1px solid var(--line); padding:4px 6px; }
td { padding:3px 6px; border-bottom:1px solid #111; white-space:nowrap; }
td.title { white-space:normal; width:100%; }
tr:hover td { background:#0a0a0a; }
.pin { color:var(--accent); }

th.num, td.num { text-align:right; }
/* Home: the Pinned and Posts tables are separate, so their columns get the same set widths to line up. */
table.posts { table-layout:fixed; }
table.posts th:nth-child(2) { width:28ch; }
table.posts th:nth-child(3) { width:10ch; }
table.posts th:nth-child(4) { width:9ch; }
table.posts th:nth-child(5) { width:15ch; }
table.posts td:nth-child(2) { white-space:normal; overflow-wrap:anywhere; } /* a very long name + tag wraps instead of spilling */
table.posts td.title { overflow-wrap:anywhere; }
.row-meta { display:none; color:var(--dim); font-size:12px; margin-top:2px; }

/* article view */
/* shown at the top of a scheduled (not yet public) post */
.sched-banner { border:2px solid var(--accent); background:#1a0000; color:#fff; font-weight:bold;
  text-align:center; padding:10px 12px; margin:6px 0 10px; }
.meta { color:var(--dim); border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:10px; }
pre.body { white-space:pre-wrap; word-wrap:break-word; margin:0; font:inherit; color:var(--fg); }
pre.post, .edit-form textarea[name=body] { font-family:var(--mono); } /* post text + its editor */
/* Article text keeps its exact line breaks (no wrapping). Long lines scroll sideways inside
   this box only, so the top bar and info bar never move. */
pre.post { overflow-x:auto; padding-bottom:8px;
  touch-action:pan-x pan-y; /* pinch here is handled by the page script, not the browser */ }
/* Lines wrap only past 250 characters (1ch = one character in a monospace font); shorter
   lines keep their exact layout. The block is as wide as its longest line, up to 250ch. */
.post-text { display:block; width:max-content; max-width:250ch; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Pictures in a post ([[img: name]] lines): as wide as the post area at most, never cropped. */
.post-img { display:block; max-width:100%; height:auto; }
/* A post's video (imported .mp4), at the top above the text. */
.post-video { display:block; max-width:100%; max-height:70vh; margin:0 0 10px; background:#000; }
.img-missing { color:var(--accent); }
pre.body a { text-decoration:underline; text-decoration-color:var(--accent); }
/* A post's picture folder (imported): small pictures in a row, click one to see it large. */
.pgal { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; white-space:normal; }
.pgal-top { margin:0 0 12px; }
pre.body a.pimg, a.pimg { position:relative; display:block; overflow:hidden; border:1px solid #333; border-radius:6px;
  background:#111; text-decoration:none; cursor:zoom-in; line-height:0;
  transition:border-color .18s, transform .18s, box-shadow .18s; }
a.pimg img { display:block; height:140px; width:auto; max-width:100%; object-fit:cover; transition:transform .3s, filter .3s; }
/* Enlarge badge: two diagonal arrows drawn as an icon (a text glyph sat off-centre on some phones). */
a.pimg::after { content:""; position:absolute; right:6px; bottom:6px; width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h4v4M13.5 2.5l-4.5 4.5M6.5 13.5h-4v-4M2.5 13.5l4.5-4.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.15); opacity:0; transition:opacity .18s; }
a.pimg:hover, a.pimg:focus-visible { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.6); }
a.pimg:hover img { transform:scale(1.04); filter:brightness(1.08); }
a.pimg:hover::after, a.pimg:focus-visible::after { opacity:1; }
.lb { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s; cursor:zoom-out; }
.lb[hidden] { display:none; }
.lb.on { opacity:1; }
.lb img { max-width:94vw; max-height:90vh; border-radius:6px; box-shadow:0 12px 48px rgba(0,0,0,.8);
  transform:scale(.96); transition:transform .2s; }
.lb.on img { transform:scale(1); }
.lb-x { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid #555;
  background:rgba(30,30,30,.8); color:#fff; font-size:16px; line-height:1; cursor:pointer; padding:0; }
.lb-x:hover { border-color:var(--accent); }
html.lb-open { overflow:hidden; }
@media (max-width:760px) { a.pimg img { height:96px; } .pgal { gap:6px; } }
/* Touch screens have no hover: the enlarge badge is always shown there (smaller, semi-transparent). */
@media (hover:none) { a.pimg::after { opacity:.9; width:30px; height:30px; background-size:16px 16px; } }
pre.body .h { font-size:16px; font-weight:bold; color:var(--link); }

/* comments panel: slides over the page from the right; full width on phones */
.c-open { color:var(--link); text-decoration:underline; text-decoration-color:var(--accent); }
.drawer { display:none; position:fixed; inset:0; z-index:50; }
.drawer:target, .drawer.open { display:block; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); }
.drawer-panel { position:absolute; top:0; right:0; bottom:0; width:min(460px, 100%); overflow-y:auto;
  background:var(--bg); border-left:1px solid var(--accent); padding:0 16px 16px;
  animation:slide-in .18s ease-out; }
@keyframes slide-in { from { transform:translateX(40px); opacity:0; } }
.drawer-head { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center;
  background:var(--bg); padding:12px 0; border-bottom:1px solid var(--line); font-weight:bold; color:var(--link); }
.drawer-close { font-size:18px; padding:0 4px; }
.drawer-close:hover { color:var(--accent); text-decoration:none; }

/* Post pages. Phones: the rules above (panel slides in when opened).
   Desktop: the comments panel is docked on the right, always shown, starting below the top bar;
   it sticks to the top of the window while the post scrolls, and scrolls on its own. */
main.wide { max-width:none; padding:0; }
main.full { max-width:none; padding:12px 24px; }
.post-main { padding:6px 16px 12px; min-width:0; }
/* the post info bar (title, author, views...) sticks under the top bar while the post scrolls.
   6px moved from .post-main's top padding into the bar, so it sits where it did before. */
.post-main > .meta { position:sticky; top:var(--topbar-h); z-index:30; background:var(--bg); padding-top:6px;
  box-shadow:0 10px 0 var(--bg); /* also covers the 10px gap under its line, so text scrolling under never peeks out */ }
@media (min-width:761px) {
  .post-layout.with-comments { display:flex; align-items:flex-start; }
  .with-comments .post-main { flex:1; }
  .with-comments .drawer { display:block; position:sticky; inset:auto; top:var(--topbar-h); z-index:auto;
    width:460px; height:calc(100vh - var(--topbar-h)); flex-shrink:0; }
  .with-comments .drawer-panel { position:static; width:auto; height:100%; animation:none; }
  .with-comments .drawer-backdrop, .with-comments .drawer-close { display:none; }
  .with-comments .c-open { pointer-events:none; text-decoration:none; color:inherit; } /* just a count here */
}

.comment-form { display:flex; flex-direction:column; gap:8px; padding:12px 0 16px; border-bottom:1px solid var(--line); }
.comment-form textarea { background:var(--field); color:var(--fg); border:1px solid var(--field-line);
  font:inherit; padding:6px 8px; }
.comment-form textarea { resize:vertical; }
.comment-form textarea:focus { outline:none; border-color:var(--accent); }
.comment-form button { align-self:flex-start; background:var(--accent); color:#fff; border:0; font:inherit;
  font-weight:bold; padding:5px 14px; cursor:pointer; }
.comment-form button:hover { background:#d00000; }
.comment-form .error { border:1px solid var(--accent); color:#ff6b6b; padding:6px 8px; }
.comment-form .anon { display:block; margin-top:4px; cursor:pointer; }
.comment-form .anon input { accent-color:var(--accent); vertical-align:middle; }
/* Admin only: "Comment as" tag + account drop-downs. */
.comment-form .act-as { margin-top:6px; color:var(--fg); }
.comment-form .act-as select { font:inherit; padding:2px 4px; margin-left:6px; max-width:100%; }
.comment-form .act-as select[hidden] { display:none; }
.comment-form .act-as .as-when { display:block; margin-top:4px; }
.comment-form .act-as .as-when[hidden] { display:none; }
.comment-form .act-as .as-when input { background:var(--field); color:var(--fg); border:1px solid var(--field-line); font:inherit; padding:2px 4px; color-scheme:dark; max-width:100%; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.comment { padding:10px 0; border-bottom:1px solid var(--line); }
.comment-head { margin-bottom:4px; }
.anon-name { color:var(--dim); }
.comment-text { white-space:pre-wrap; word-wrap:break-word; margin:0; font:inherit; color:var(--fg); }
.comment-text a { text-decoration:underline; text-decoration-color:var(--accent); }

/* admin delete buttons */
.del-form { margin-left:8px; }
.del { background:none; border:1px solid var(--accent); color:#ff6b6b; font:inherit; font-size:11px;
  padding:0 6px; cursor:pointer; }
.del:hover { background:var(--accent); color:#fff; }
.edit-btn { border:1px solid #555; color:var(--fg); font-size:11px; padding:0 6px; }
.edit-btn:hover { border-color:var(--link); color:var(--link); text-decoration:none; }
/* Admin: make a post private / public (same look as "edit"), and the "private" marker. */
.priv-btn { background:none; border:1px solid #555; color:var(--fg); font:inherit; font-size:11px; padding:0 6px; cursor:pointer; }
.priv-btn:hover { border-color:var(--link); color:var(--link); }
.priv-tag { color:var(--accent); font-weight:bold; font-size:11px; border:1px solid var(--accent); padding:0 4px; }
.report-btn { border-color:#e0506e; color:#ff6f8e; }
.report-btn:hover { border-color:#ff8fa8; color:#ff8fa8; }

/* admin post editor */
.edit-form { display:flex; flex-direction:column; gap:12px; margin:16px 0; }
.edit-form label { display:flex; flex-direction:column; gap:4px; color:var(--dim); }
.edit-form input, .edit-form textarea, .edit-form select { background:var(--field); color:var(--fg); border:1px solid var(--field-line); font:inherit; padding:6px 8px; }
.edit-form textarea { white-space:pre; overflow:auto; resize:vertical; min-height:300px; }
.edit-form textarea.short { white-space:pre-wrap; min-height:160px; } /* comment editor */
.edit-form input:focus, .edit-form textarea:focus, .edit-form select:focus { outline:none; border-color:var(--accent); }
.edit-form .error { border:1px solid var(--accent); color:#ff6b6b; padding:6px 8px; }
.edit-actions { display:flex; align-items:center; gap:16px; }
.edit-actions button { background:var(--accent); color:#fff; border:0; font:inherit; font-weight:bold; padding:6px 18px; cursor:pointer; }
.edit-actions button:hover { background:#d00000; }

/* admin visits dashboard */
.log-filter { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:12px 0 6px; }
.log-filter input { background:var(--field); color:var(--fg); border:1px solid var(--field-line); font:inherit; padding:3px 8px; width:220px; max-width:100%; }
.log-filter input:focus { outline:none; border-color:var(--accent); }
.log-filter button { background:#000; color:var(--fg); border:1px solid #333; font:inherit; padding:3px 10px; cursor:pointer; }
.log-filter button:hover { color:var(--link); border-color:var(--dim); }
.log-wrap { overflow-x:auto; }
table.log td { white-space:nowrap; }
table.log td.path { white-space:normal; overflow-wrap:anywhere; } /* long addresses wrap instead of widening the table */
table.log td.mtext { white-space:pre-wrap; overflow-wrap:anywhere; min-width:300px; } /* private messages: whole text, line breaks kept */
table.log td.mtext a { text-decoration:underline; text-decoration-color:var(--accent); }
table.log td a { color:var(--fg); }
table.log td a:hover { color:var(--link); }
table.log td a.admin { color:var(--accent); } /* admin stays red here too */
.c-ip { font-size:11px; margin-left:6px; color:var(--dim); }
a.c-ip { text-decoration:underline; text-decoration-color:#444; }
a.c-ip:hover { color:var(--link); }
.log-nav { margin:8px 0; color:var(--dim); word-spacing:4px; }
.storage { margin:6px 0 2px; color:var(--dim); }
.storage b { color:var(--fg); font-weight:normal; }
.log-toggle { margin:4px 0; color:var(--fg); }
.log-views { display:flex; gap:6px; margin:10px 0 4px; }
.log-views a { border:1px solid #444; padding:3px 12px; color:var(--fg); }
.log-views a:hover { border-color:var(--dim); color:var(--link); text-decoration:none; }
.log-views a.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:bold; }
.dash-refresh-row { text-align:center; margin:12px 0 4px; }
.dash-refresh { background:#0d2a47; border:1px solid #2f6aa3; color:#cfe7ff; font:inherit; padding:3px 12px; cursor:pointer; }
.dash-refresh:hover { background:#123a62; color:#fff; }
.dash-refresh:disabled { cursor:default; opacity:.7; }
.you { color:var(--accent); font-size:11px; }
.ip-look { border:1px solid #444; color:var(--dim) !important; font-size:10px; padding:0 4px; margin-left:4px; }
.ip-look:hover { border-color:var(--link); color:var(--link) !important; text-decoration:none; }
.log-n { color:var(--dim); margin-left:6px; }
.log-filter .log-n input { width:80px; }

/* Turnstile widget (300x65); min-height stops the form jumping while it loads */
.captcha-box { min-height:65px; }

footer { text-align:center; color:#444; padding:30px 0 16px; }

@media (max-width:760px) {
  main { padding:12px 16px; }
  td.hide-sm, th.hide-sm { display:none; }
  .row-meta { display:block; }

  :root { --topbar-h:41px; }
  .topbar { padding:4px 16px; }
  .burger { display:block; }
  /* the menu drops down under the bar as a full-width panel */
  .topbar .menu { display:none; position:absolute; top:100%; left:0; right:0; z-index:10;
    flex-direction:column; align-items:stretch; gap:0; background:var(--bg);
    border-bottom:1px solid var(--accent); box-shadow:0 8px 16px rgba(0,0,0,.8); }
  .nav-toggle:checked ~ .menu { display:flex; }
  .topbar .menu a, .topbar .menu .who, .topbar .menu .linkbtn {
    display:block; padding:12px 16px; border-top:1px solid var(--line); font-size:15px; text-align:left; width:100%; }
  .topbar .menu a:hover, .topbar .menu .linkbtn:hover { background:#1a0000; text-decoration:none; }
  .topbar .right { margin-left:0; flex-direction:column; align-items:stretch; gap:0; }
  .topbar .inline { display:block; }

  .pager { gap:4px; }
  .pager > a, .pager > span { min-width:26px; padding:4px 5px; }
  .pager i, .pager .far { display:none; }
  .pager .mob { display:block; }
  .pager > .gap { min-width:0; padding:4px 1px; }

}

/* ---- Users page: one grey table box per rank (Admin, Manager, ...) ---- */
.users { max-width:860px; margin:0 auto; }
.ugroup { font-size:15px; color:var(--link); margin:28px 0 8px; }
/* fixed column widths, so the columns line up across all the sections */
table.utable { background:#111; border:1px solid var(--line); table-layout:fixed; }
table.utable th:nth-child(2) { width:90px; }
table.utable th:nth-child(3) { width:110px; }
table.utable th:nth-child(4) { width:140px; }
table.utable td.title { overflow-wrap:anywhere; }

table.utable th { background:#1a1a1a; color:var(--link); font-weight:bold; padding:8px 10px; border-bottom:1px solid #2a2a2a; }
table.utable td { padding:7px 10px; border-bottom:1px solid #1e1e1e; }
table.utable tbody tr:nth-child(even) td { background:#141414; }
table.utable tbody tr:last-child td { border-bottom:0; }
table.utable tr:hover td { background:#1c1c1c; }
table.utable th.num, table.utable td.num { text-align:center; }
table.utable th:last-child, table.utable td:last-child { text-align:right; }
/* phones: smaller text and narrow number/date columns so most names fit on one line */
@media (max-width:760px) {
  table.utable { font-size:10px; }
  table.utable th:nth-child(2) { width:38px; }
  table.utable th:nth-child(3) { width:56px; }
  table.utable th:nth-child(4) { width:56px; }
  table.utable th, table.utable td { padding-left:3px; padding-right:3px; }
}

/* ---- profile page: card / box layout ---- */
.pcard { background:#141414; border:1px solid var(--line); border-radius:10px; margin:0 0 16px; }
.ptop { overflow:hidden; }
.ptop .cover { display:block; width:100%; height:230px; object-fit:cover; background:#111; border:0; }
.ptop .phead { display:flex; align-items:flex-start; gap:16px; padding:16px; margin:0; }
.ptop.no-cover { margin-top:40px; } /* no banner: the box keeps its size and sits lower instead */
.pfp { width:120px; height:120px; object-fit:cover; background:#000; border:1px solid #333; flex:0 0 auto; }
.phead-text { min-width:0; }
.phead-text .profile-name { margin:0 0 7px; }
.pbio { margin:0; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; font:inherit; color:var(--fg); }
.utag { color:var(--accent); font-weight:bold; margin-left:.4em; }

.pgrid { display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start; }
.pcol-main, .pcol-side { min-width:0; }

.pinfo .inforow { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--line); }
.pinfo .inforow:first-child { border-top:0; }
.pinfo .k { color:var(--dim); }
.pinfo .v { color:var(--fg); }

.pcard-head { font-weight:bold; padding:11px 14px; border-bottom:1px solid var(--line); }
.pcard-body { padding:14px; }
.pcard-pad { padding:14px 16px; }

.ptable-wrap { overflow:hidden; }
table.ptable { width:100%; border-collapse:collapse; }
table.ptable th { text-align:left; font-weight:bold; padding:10px 14px; border-bottom:1px solid var(--line); }
table.ptable td { padding:10px 14px; border-top:1px solid var(--line); }
table.ptable tbody tr:first-child td { border-top:0; }
table.ptable th.num, table.ptable td.num { text-align:right; }
table.ptable td.title a { text-decoration:none; }
table.ptable td.title a:hover { text-decoration:underline; }
.ptable .tcenter { text-align:center; color:var(--dim); }
/* Profile posts: click a header to sort by it; the sorted column shows a small arrow. */
table.ptable.sortable th { cursor:pointer; user-select:none; white-space:nowrap; }
table.ptable.sortable th:hover { color:var(--link); }
/* Stacked up/down triangles (drawn, so they stay sharp): both gray = sortable; the sorted column's
   direction in red. */
table.ptable.sortable th::after { content:""; display:inline-block; width:8px; height:12px; margin-left:6px; vertical-align:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M4 0L8 5H0z' fill='%23777'/%3E%3Cpath d='M4 12L0 7h8z' fill='%23777'/%3E%3C/svg%3E") no-repeat; }
table.ptable.sortable th:hover::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M4 0L8 5H0z' fill='%23bbb'/%3E%3Cpath d='M4 12L0 7h8z' fill='%23bbb'/%3E%3C/svg%3E"); }
table.ptable.sortable th.sorted.desc::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M4 0L8 5H0z' fill='%23555'/%3E%3Cpath d='M4 12L0 7h8z' fill='%23e00000'/%3E%3C/svg%3E"); }
table.ptable.sortable th.sorted.asc::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M4 0L8 5H0z' fill='%23e00000'/%3E%3Cpath d='M4 12L0 7h8z' fill='%23555'/%3E%3C/svg%3E"); }
/* Phones: tighter cells so all four columns (with their arrows) fit the screen. */
@media (max-width:760px) { table.ptable.sortable th, table.ptable.sortable td { padding-left:6px; padding-right:6px; }
  table.ptable.sortable th:first-child, table.ptable.sortable td:first-child { padding-left:12px; }
  table.ptable.sortable th:last-child, table.ptable.sortable td:last-child { padding-right:12px; } }

.pc-form { max-width:none; margin:0 0 14px; }
.pc-list .comment:first-child { padding-top:2px; }
.pc-list .comment:last-child { border-bottom:0; padding-bottom:0; }
.pc-empty { color:var(--dim); }
/* the user's own comments: box on the profile + the "see all" page */
.pcard-head .see-all { float:right; font-weight:normal; border:1px solid #444; padding:0 8px; }
.pcard-head .see-all:hover { border-color:var(--accent); text-decoration:none; }
.ucomments { max-width:860px; margin:0 auto; }

/* private messages: "Send message" on profiles, inbox (/messages), conversation pages */
.msg-btn { display:inline-block; margin-top:10px; background:var(--accent); color:#fff; font-weight:bold; padding:5px 14px; }
.msg-btn:hover { background:#d00000; text-decoration:none; }
.mnew { color:var(--accent); font-weight:bold; }
.mprev { display:block; color:var(--fg); overflow-wrap:anywhere; }
.unread .mprev { color:var(--link); font-weight:bold; }

/* ---- name colours (admin = red, above). Accounts are blue; accounts with one of these tags use
   the tag's colour for the name and the tag. Listed last so they win over .utag / .profile-name. ---- */
.user { color:#4d9fff; }
.tagged { font-weight:bold; } /* any account with a tag */
.t-clique   { color:#a78bfa; }
.t-council  { color:#22c55e; }
.t-criminal { color:#8b0000; } /* darker than the admin red */
.t-manager  { color:#22d3ee; }
.t-mod      { color:#a3e635; }
.t-vip      { color:#ff69b4; }
.t-rich  { color:#ffd700; text-shadow:0 0 4px rgba(255,215,0,.55); }
.t-elite { color:#ffa31a; text-shadow:0 0 4px rgba(255,163,26,.55); }
/* Admin, Rich and Elite sparkle, forum-style: the animated sparkle.gif tile behind the name and tag. */
.sparkle { background:url(/static/sparkle.gif); }
/* The profile name is a block: shrink it to the name + tag so the sparkle stops there. */
.profile-name.sparkle { width:fit-content; }
/* "scheduled" marker on comments that aren't public yet (admin only) */
.c-sched { color:var(--accent); font-weight:bold; font-size:11px; border:1px solid var(--accent); padding:0 4px; }

@media (max-width:760px) {
  .pgrid { grid-template-columns:1fr; }
  .ptop .cover { height:150px; }
  .ptop .phead { gap:12px; padding:12px; }
  .ptop.no-cover { margin-top:28px; }
  .pfp { width:92px; height:92px; }
}
.report-sent { padding:24px 16px; text-align:center; }
.report-sent p { margin:0 0 10px; }

/* Upgrade page (/upgrade): one card per tier; --tier / --tier-dark set per card in server.js */
.up-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.up-card { display:flex; flex-direction:column; background:#0a0a0a; border:1px solid var(--line); }
.up-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px;
  background:linear-gradient(90deg, var(--tier), var(--tier-dark)); color:#fff; font-weight:bold; }
.up-name { font-size:17px; }
.up-price { font-size:17px; white-space:nowrap; }
.up-rows { flex:1; padding:8px 12px; }
.up-row { display:flex; justify-content:space-between; gap:10px; padding:3px 0; color:var(--fg); }
.up-row > span:last-child { text-align:right; color:var(--link); }
.up-yes { color:#1fa31f; font-weight:bold; }
.up-no { color:#d40000; font-weight:bold; }
.up-go { display:block; text-align:center; padding:9px; background:var(--tier); color:#fff; cursor:pointer; }
.up-go:hover { filter:brightness(1.15); text-decoration:none; }
@media (max-width:1000px) { .up-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px) { .up-grid { grid-template-columns:1fr; } }
/* Desktop: centre the cards vertically in the space between the top bar and the footer. */
@media (min-width:1001px) {
  .up-grid { min-height:calc(100vh - var(--topbar-h) - 90px); align-content:center; }
}
/* "Continue" popup on the Upgrade page */
button.up-go { width:100%; border:0; font:inherit; }
.up-dialog { background:#0a0a0a; color:var(--fg); border:2px solid var(--accent); padding:20px 22px 16px;
  max-width:440px; width:calc(100% - 32px); text-align:center; font:inherit; }
.up-dialog::backdrop { background:rgba(0,0,0,.75); }
.up-dialog p { margin:0 0 16px; line-height:1.5; }
.up-dialog a { font-weight:bold; }
.up-close { background:var(--accent); color:#fff; border:0; font:inherit; padding:5px 18px; cursor:pointer; }
.up-close:hover { background:#d00000; }
/* Dashboard "Tag" column: an input in each row, saved as you type (Enter / click away) */
table.log td.tagc { padding-top:2px; padding-bottom:2px; }
input.iptag { background:transparent; color:#e0a020; border:1px solid transparent; font:inherit; font-size:12px; padding:1px 4px; width:140px; }
input.iptag:hover { border-color:#333; }
input.iptag:focus { outline:none; border-color:var(--accent); background:var(--field); color:var(--fg); }
input.iptag.saved { border-color:#1fa31f; }
input.iptag.failed { border-color:var(--accent); }
input.iptag::placeholder { color:#333; }
/* Admin-only view split: added views gray, real views green. */
.v-boost { color:var(--dim); }
.v-real { color:#1fa31f; }
/* Admin: type views to add next to the count on a post's page, Enter saves. */
.add-views { display:inline; }
.add-views input { width:72px; padding:0 4px; font:inherit; font-size:12px; vertical-align:baseline; }
/* Home/search posts table: rows by a tagged author get a dark shade of the tag colour (rowTint). */
tr.hl td { background:var(--hl); }
tr.hl:hover td { background:var(--hl-hover); }
/* Untinted rows (normal users, Anonymous): a lighter gray on hover. */
table.posts tr:not(.hl):hover td { background:#222; }
tr.hl-admin    { --hl:rgba(179,0,0,.22);    --hl-hover:rgba(179,0,0,.32); }
tr.hl-other    { --hl:rgba(179,0,0,.22);    --hl-hover:rgba(179,0,0,.32); }
tr.hl-clique   { --hl:rgba(167,139,250,.16); --hl-hover:rgba(167,139,250,.24); }
tr.hl-council  { --hl:rgba(34,197,94,.15);  --hl-hover:rgba(34,197,94,.23); }
tr.hl-criminal { --hl:rgba(139,0,0,.30);    --hl-hover:rgba(139,0,0,.42); }
tr.hl-manager  { --hl:rgba(34,211,238,.14); --hl-hover:rgba(34,211,238,.22); }
tr.hl-mod      { --hl:rgba(163,230,53,.13); --hl-hover:rgba(163,230,53,.21); }
tr.hl-vip      { --hl:rgba(255,105,180,.16); --hl-hover:rgba(255,105,180,.24); }
tr.hl-rich     { --hl:rgba(255,215,0,.14);  --hl-hover:rgba(255,215,0,.22); }
tr.hl-elite    { --hl:rgba(255,163,26,.20); --hl-hover:rgba(255,163,26,.28); }
/* Dashboard colours (only inside .dash): lighter grays, a colour per column. */
.dash { --dim:#b4b4b4; }
.dash th { color:#d0d0d0; }
.dash h2 { color:#d0d0d0; }
.dash .ip-look { border-color:#666; }
.dash input.iptag::placeholder { color:#666; }
.dash table.log td.c-time { color:#8cc4ff; }              /* time: blue */
.dash table.log td.c-ipc > a:first-child { color:#7ee2a8; } /* IP: green */
.dash table.log td.path > a:first-child { color:#ffd479; }  /* page: yellow */
.dash table.log td.c-n { color:#fff; }                      /* counts: white */
.dash table.log td.c-br { color:#7fe0e8; }                  /* browser: cyan */
.dash table.log td.c-dev { color:#e8a6d6; }                 /* device: pink */
.dash .c-status { color:#ff7b7b; }                          /* [404] etc: red */
.dash table.log tbody tr:hover td { background:#141414; }
/* actondaily.org article loads: light blue rows, dark text. */
.dash table.log tr.acton td, .dash table.log tbody tr.acton:hover td { background:#cfe7ff; color:#0d2a47; }
.dash table.log tr.acton td a, .dash table.log tr.acton td > a:first-child, .dash table.log tr.acton td a:hover { color:#0d2a47; }
.dash table.log tr.acton .ip-look { border-color:#7fa6cc; color:#2f5a85 !important; }
.dash table.log tr.acton .c-status { color:#b00020; }
.dash table.log tr.acton input.iptag { color:#8a4b00; }
.dash table.log tr.acton input.iptag::placeholder { color:#7fa6cc; }
.dash table.log tr.acton input.iptag:focus { background:#fff; color:#111; }
input::placeholder, textarea::placeholder { color:#8a8a8a; }
/* Create Post: button on the home page above Pinned; admin-only "- REAL POST" after such posts' titles. */
.create-btn { margin:10px 0 0; }
.real-tag { font-weight:bold; }