/* RetroBB — old-internet soul, responsive body. Skins via body.skin-* (original retro-inspired designs) */
/* skin-classic: default Y2K-era blue gradient (base :root vars) */
:root { --bg:#dfe3ee; --panel:#fff; --border:#7a96c2; --title-a:#3A6EA5; --title-b:#7db3e8; --cat:#46628c; --row:#f4f6fb; --row2:#e9edf6; --link:#1a3f7a; --muted:#667; --text:#222; --bar-bg:#eef2f9; --sub-bg:#f8fafd; --sub-text:#445; --head-a:#eef3fb; --head-b:#dbe3f2; --quote-bg:#fafafa; --input-bg:#fff; --input-text:#222; --btn-a:#ffffff; --btn-b:#d7e0f0; --btn-text:#1a3f7a; }
body.skin-midnight { --bg:#c9d3e3; --title-a:#2b3f5c; --title-b:#5c7ba3; --cat:#33465f; --border:#4a6385; --row:#eef2f8; --row2:#dde5f2; }
body.skin-silver { --bg:#e5e5e5; --title-a:#6c7a8c; --title-b:#aeb9c5; --cat:#5c6a7a; --border:#98a5b3; --row:#f7f7f7; --row2:#efefef; --link:#23486b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); font:13px/1.5 Verdana, Tahoma, Arial, sans-serif; color:var(--text); }
a { color:var(--link); }
.page-wrap { max-width:1000px; margin:12px auto; border:1px solid var(--border); background:var(--panel); box-shadow:0 0 0 1px #fff inset, 0 4px 18px rgba(0,0,0,.25); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:linear-gradient(180deg, #33415c, #232c40); color:#fff; flex-wrap:wrap; }
.topbar a { color:#ffe9a8; text-decoration:none; }
.logo a { font-size:20px; font-weight:bold; letter-spacing:.5px; }
.floppy { width:22px; height:22px; vertical-align:-4px; }
.tagline { font-size:11px; color:#bcd; margin-left:8px; }
.userbox { font-size:12px; }
.pill { background:#ffe9a8; color:#333 !important; padding:1px 8px; border-radius:10px; font-size:11px; }
.linkbtn { background:none; border:0; color:#ffe9a8; cursor:pointer; text-decoration:underline; font-size:12px; }
.navrow { padding:6px 12px; background:var(--bar-bg); border-bottom:1px solid var(--border); font-size:12px; }
.skinswitch { float:right; }
main { padding:12px; }
.maintitle { background:linear-gradient(180deg, var(--title-b), var(--title-a)); color:#fff; font-weight:bold; padding:7px 10px; border:1px solid var(--border); border-radius:3px 3px 0 0; text-shadow:0 1px 0 rgba(0,0,0,.4); margin:12px 0 0; }
.subtitle { padding:6px 10px; border:1px solid var(--border); border-top:0; background:var(--sub-bg); color:var(--sub-text); }
.cat-row { background:linear-gradient(180deg, #8ba3c7, var(--cat)); color:#fff; font-weight:bold; padding:6px 10px; margin-top:14px; border:1px solid var(--border); font-size:12px; letter-spacing:.5px; text-transform:uppercase; }
.forum-list, .topic-list { border:1px solid var(--border); border-top:0; }
.forum-row, .topic-row { display:grid; grid-template-columns:44px 1fr 110px 230px; gap:8px; padding:8px 10px; background:var(--row); border-bottom:1px solid var(--border); align-items:center; }
.topic-row { grid-template-columns:36px 1fr 70px 70px 160px; }
.topic-icon { font-size:17px; text-align:center; }
.forum-row:nth-child(even), .topic-row:nth-child(even) { background:var(--row2); }
.topic-head { display:grid; grid-template-columns:36px 1fr 70px 70px 160px; gap:8px; padding:6px 10px; background:linear-gradient(180deg, var(--head-a), var(--head-b)); font-size:11px; font-weight:bold; border-bottom:1px solid var(--border); }
.forum-name { font-weight:bold; font-size:13px; }
.forum-desc, .muted, small { color:var(--muted); }
.forum-icon { font-size:20px; }
.breadcrumb { font-size:12px; margin:4px 0 0; }
.actionrow { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 2px; flex-wrap:wrap; }
.btn { display:inline-block; background:linear-gradient(180deg, var(--btn-a), var(--btn-b)); border:1px solid var(--border); padding:6px 14px; border-radius:3px; text-decoration:none; color:var(--btn-text); font-weight:bold; box-shadow:0 1px 0 rgba(255,255,255,.25) inset; }
.btn:hover { filter:brightness(1.05); }
.smallbtn { background:var(--bar-bg); color:var(--text); border:1px solid var(--border); border-radius:3px; padding:2px 8px; cursor:pointer; font-size:11px; }
a.smallbtn { display:inline-block; text-decoration:none; color:inherit; }
.modbar { border:1px dashed var(--border); background:var(--bar-bg); padding:6px 10px; margin-top:8px; font-size:12px; }
.modbar .modlabel { font-weight:bold; margin-right:6px; }
.modbar form, .modbar a { margin-right:4px; }
.editedmark { margin-top:8px; font-size:11px; color:var(--muted); font-style:italic; }
.smallbtn.danger { color:#a00; border-color:#a00; }
.postbit { border:1px solid var(--border); margin-top:10px; scroll-margin-top:10px; box-shadow:1px 1px 0 rgba(0,0,0,.08); }
.postbit:target { outline:2px solid var(--title-b); }
.posthead { display:flex; align-items:center; gap:8px; background:linear-gradient(180deg, var(--head-a), var(--head-b)); padding:5px 10px; font-size:12px; border-bottom:1px solid var(--border); }
.postnum { font-weight:bold; text-decoration:none; }
.postdate { color:#667; font-size:11px; }
.postactions { margin-left:auto; display:flex; gap:6px; align-items:center; }
.postfoot { display:flex; gap:6px; justify-content:flex-end; padding:5px 10px; background:var(--bar-bg); border-top:1px solid var(--border); }
.postbody { display:grid; grid-template-columns:170px 1fr; }
.postleft { background:var(--row2); padding:10px; border-right:1px solid var(--border); font-size:12px; text-align:center; }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:6px; color:#fff; font-size:24px; font-weight:bold; text-shadow:0 1px 2px rgba(0,0,0,.4); border:1px solid rgba(0,0,0,.3); box-shadow:1px 1px 0 #fff inset; margin-bottom:6px; }
.postuser { display:block; font-size:13px; overflow-wrap:anywhere; }
/* ---- Member profile ---- */
.profile-card { display:flex; gap:20px; align-items:center; margin-top:12px; padding:22px; border:1px solid var(--border); background:linear-gradient(180deg, var(--panel), var(--row)); box-shadow:1px 1px 0 rgba(0,0,0,.08); }
.avatar-lg { width:76px; height:76px; font-size:38px; border-radius:8px; flex:none; }
.profile-name { font-size:22px; font-weight:bold; margin-bottom:6px; overflow-wrap:anywhere; }
.profile-bio { margin-top:10px; padding:10px 12px; background:var(--sub-bg); border:1px solid var(--border); border-radius:3px; max-width:560px; overflow-wrap:anywhere; }
.profile-stats { display:flex; gap:36px; margin-top:14px; flex-wrap:wrap; }
.stat .num { display:block; font-size:17px; font-weight:bold; }
.stat .lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.recent-list { border:1px solid var(--border); border-top:0; margin-bottom:16px; }
.infocenter { border:1px solid var(--border); border-top:0; margin-bottom:16px; }
.forum-stats { text-align:center; }
.recent-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 16px; background:var(--row); border-bottom:1px solid var(--border); }
.recent-row:nth-child(even) { background:var(--row2); }
.recent-row:last-child { border-bottom:0; }
.recent-date { color:var(--muted); font-size:11px; white-space:nowrap; }
.struct-cat { font-weight:bold; padding:10px 2px 4px; font-size:13px; }
.postleft .group { display:inline-block; margin:4px 0; }
.postmeta { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.postright { padding:10px 14px; overflow-wrap:anywhere; min-width:0; }
.postright p:first-child { margin-top:0; } .postright p:last-child { margin-bottom:0; }
.postright img.bbcode-img { max-width:100%; height:auto; }
.bbcode-quote { border:1px dashed var(--border); background:var(--quote-bg); padding:8px 10px; margin:8px 0; }
.bbcode-quote cite { font-weight:bold; display:block; margin-bottom:4px; }
.bbcode-code { background:#1e1e1e; color:#d7ffcf; padding:8px 10px; overflow:auto; }
.replybox textarea, .form textarea, .form input[type=text], .form input[type=email], .form input[type=password], .form input[type=number], .form select { font:13px Verdana,Arial,sans-serif; padding:8px; border:1px solid var(--border); border-radius:3px; background:var(--input-bg); color:var(--input-text); }
.replybox textarea { width:100%; }
.form.narrow { max-width:420px; }
.form.narrow input { width:100%; }
.bbtoolbar button { border:1px solid var(--border); background:#fff; border-radius:3px; padding:2px 8px; margin:0 2px 6px 0; cursor:pointer; }
.statsbar { margin-top:14px; border:1px solid var(--border); background:var(--bar-bg); padding:8px 10px; font-size:12px; }
.footer { padding:12px; text-align:center; font-size:11px; color:var(--muted); border-top:1px solid var(--border); background:var(--bar-bg); }
.flash-error { background:#fdd; border:1px solid #a00; color:#700; padding:8px 10px; margin-top:10px; }
.flash-ok { background:#dfd; border:1px solid #0a0; color:#060; padding:8px 10px; margin-top:10px; }
.locked { padding:10px; background:#ffe; border:1px solid #aa0; }
.group { font-size:10px; padding:1px 6px; border-radius:8px; background:#ddd; color:#333; }
.group-admin { background:#c00; color:#fff; } .group-mod { background:#080; color:#fff; }
.pagination { padding:8px 0; } .pagination a, .pagination b { border:1px solid var(--border); padding:2px 8px; margin-right:4px; background:var(--input-bg); text-decoration:none; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.adminnav { display:flex; gap:4px; flex-wrap:wrap; padding:8px 2px; font-size:12px; }
.adminnav a { border:1px solid var(--border); background:var(--bar-bg); padding:3px 10px; border-radius:3px; text-decoration:none; }
.adminnav a.on { background:linear-gradient(180deg, var(--title-b), var(--title-a)); color:#fff; font-weight:bold; }
.dash-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:12px; }
.dash-card { display:block; border:1px solid var(--border); background:var(--row); padding:14px; text-decoration:none; border-radius:3px; }
.dash-card:hover { filter:brightness(1.04); }
.dash-card b { display:block; font-size:14px; margin-bottom:4px; }
.dash-card small { color:var(--muted); }
.empty { padding:16px; text-align:center; color:#667; }
@media (max-width:760px) {
  .forum-row, .topic-row { display:block; }
  .topic-head { display:none; }
  .forum-icon { display:none; }
  .forum-stats, .forum-last, .topic-row .c, .topic-row .r { font-size:11px; color:var(--muted); }
  .topic-row > div:nth-child(3)::before { content:"Replies: "; }
  .topic-row > div:nth-child(4)::before { content:"Views: "; }
  .topic-row > div:nth-child(5)::before { content:"Last: "; }
  .topic-row .topic-icon { display:none; }
  .postbody { grid-template-columns:1fr; }
  .postleft { display:flex; align-items:center; gap:8px; text-align:left; border-right:0; border-bottom:1px solid var(--border); padding:6px 10px; }
  .avatar { width:32px; height:32px; font-size:16px; margin-bottom:0; flex:none; }
  .postuser { font-size:12px; }
  .postleft .group { margin:0; }
  .postmeta { margin-top:0; margin-left:auto; text-align:right; }
  .postright { padding:8px 10px; }
  .actionrow { font-size:12px; }
  .profile-card { padding:16px; gap:14px; }
  .avatar-lg { width:56px; height:56px; font-size:28px; }
  .profile-name { font-size:18px; }
  .profile-stats { gap:20px; margin-top:10px; }
  .recent-row { padding:10px 12px; }
  .admin-grid { grid-template-columns:1fr; }
  .dash-grid { grid-template-columns:1fr; }
  .skinswitch { float:none; display:block; margin-top:4px; }
  .topbar { padding:10px 12px; } .logo a { font-size:17px; }
  .page-wrap { margin:0; border:0; }
}

/* ---- Dark mode. Surfaces go dark; each skin keeps its own accents (title
   gradient, category bar, borders) so the skin switcher stays meaningful.
   Links are lightened in all skins for readability. ---- */
body.theme-dark { --bg:#14161b; --panel:#1f232b; --row:#252b35; --row2:#1f242d; --link:#8fb4ff; --muted:#9aa1b0; --text:#d7dbe2; --bar-bg:#1c2129; --sub-bg:#20262f; --sub-text:#b6bcc7; --head-a:#2c3441; --head-b:#212732; --quote-bg:#20262f; --input-bg:#171b21; --input-text:#d7dbe2; --btn-a:#39424f; --btn-b:#28303b; --btn-text:#dbe4f5; color:var(--text); }
@media (prefers-color-scheme: dark) {
  body.theme-auto { --bg:#14161b; --panel:#1f232b; --row:#252b35; --row2:#1f242d; --link:#8fb4ff; --muted:#9aa1b0; --text:#d7dbe2; --bar-bg:#1c2129; --sub-bg:#20262f; --sub-text:#b6bcc7; --head-a:#2c3441; --head-b:#212732; --quote-bg:#20262f; --input-bg:#171b21; --input-text:#d7dbe2; --btn-a:#39424f; --btn-b:#28303b; --btn-text:#dbe4f5; color:var(--text); }
}
/* ---- User dropdown (alerts/messages). Surfaces follow the skin via vars;
   the count pill reuses the retro yellow accent. Hover/focus reveal keeps
   the links reachable with no JS; the .open class covers touch. ---- */
.dropwrap { position:relative; display:inline-block; }
.dropbtn { background:none; border:0; color:#ffe9a8; cursor:pointer; font-size:12px; padding:0 2px; font-family:inherit; }
.dropmenu { display:none; position:absolute; left:0; top:calc(100% - 1px); min-width:100%; background:var(--panel); border:1px solid var(--border); border-radius:3px; box-shadow:0 4px 14px rgba(0,0,0,.3); z-index:50; padding:4px 0; white-space:nowrap; }
.dropwrap.open .dropmenu, .dropwrap:hover .dropmenu, .dropwrap:focus-within .dropmenu { display:block; }
.topbar .dropmenu a { display:block; padding:6px 12px; color:var(--link); text-decoration:none; font-size:12px; white-space:nowrap; }
.topbar .dropmenu a:hover { background:var(--row2); }