/* ==========================================================================
   BAZAARMARKET.ORG — stylesheet
   Mid-2000s forum: glossy gradients, soft blue-grey chrome, rounded corners,
   Lucida/Trebuchet type. Web 2.0 without the beta badges.
   ========================================================================== */

:root {
  --blue:        #3d6fa5;
  --blue-dark:   #2a527d;
  --blue-deep:   #1e3f63;
  --blue-lite:   #5b8fc9;
  --blue-pale:   #eaf1f8;
  --blue-edge:   #c2d4e6;

  --page:        #d6dfe9;
  --panel:       #ffffff;
  --panel-alt:   #f4f8fb;
  --rail:        #eef3f8;

  --ink:         #24303a;
  --ink-soft:    #5c6b78;
  --ink-faint:   #8695a2;
  --rule:        #ccd8e3;

  --link:        #235d9f;
  --link-vis:    #5a4a8a;
  --link-hot:    #c0392b;

  --red:         #c9302c;
  --red-lite:    #e8776f;
  --green:       #3d8b3d;
  --green-lite:  #7fc47f;
  --amber:       #d68910;
  --purple:      #7d5ba6;

  --radius:      5px;
  --radius-lg:   8px;
  --shadow:      0 1px 3px rgba(30, 55, 80, .16);
  --shadow-lg:   0 3px 12px rgba(30, 55, 80, .22);

  --font-body: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Tahoma, Verdana, sans-serif;
  --font-head: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
  --font-mono: "Consolas", "Monaco", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 34px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  background-image: linear-gradient(180deg, #b9c8d8 0%, var(--page) 260px);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-vis); }
a:hover, a:focus { color: var(--link-hot); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--blue-lite); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--blue-dark); padding: 9px 16px;
  font-weight: bold; border-radius: 0 0 var(--radius) 0; box-shadow: var(--shadow-lg);
}
.skip:focus { left: 0; }

/* ---- warning ticker ----------------------------------------------------- */

.marquee-bar {
  overflow: hidden;
  background: linear-gradient(180deg, #4a3a12, #2e2409);
  border-bottom: 1px solid #1a1405;
}
.marquee-track {
  display: flex; gap: 56px;
  white-space: nowrap;
  color: #ffd77a;
  font-size: 11px; font-weight: bold; letter-spacing: .02em;
  padding: 6px 0;
  width: max-content;
  animation: scroll-left 52s linear infinite;
}
.marquee-track span { padding-left: 36px; }
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: auto; overflow-x: auto; }
}

/* ---- frame -------------------------------------------------------------- */

.frame {
  max-width: 1120px;
  margin: 18px auto;
  background: var(--panel);
  border: 1px solid #a8bccf;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ---- masthead ----------------------------------------------------------- */

.masthead {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap;
  padding: 18px 22px 16px;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-lite) 0%, var(--blue) 46%, var(--blue-dark) 100%);
  border-bottom: 1px solid var(--blue-deep);
}
/* the obligatory glossy highlight */
.masthead::after {
  content: ''; position: absolute; inset: 0 0 52% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none;
}
.logo { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.logo:hover { text-decoration: none; }
.logo-mark {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  font-family: var(--font-head);
  font-size: 27px; font-weight: bold; line-height: 1;
  color: var(--blue-dark);
  background: linear-gradient(180deg, #ffffff, #d7e5f3);
  border: 1px solid #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 5px rgba(0,0,0,.25), inset 0 -2px 4px rgba(60,100,150,.18);
}
.logo-text {
  font-family: var(--font-head);
  font-size: 29px; font-weight: bold; letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.logo:hover .logo-text { color: #eaf4ff; }
.tagline {
  font-family: var(--font-head); font-size: 12.5px;
  color: #cfe1f4; margin-top: 3px; position: relative; z-index: 1;
}
.mast-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; position: relative; z-index: 1; }
.searchform { display: flex; gap: 5px; }
.searchform .inp { width: 210px; }
.mast-account { font-size: 11.5px; color: #cfe1f4; }
.mast-account a { color: #fff; font-weight: bold; }
.mast-account a:hover { color: #ffe9a8; }
.whoami { color: #cfe1f4; }

/* ---- nav ---------------------------------------------------------------- */

.mainnav {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px;
  padding: 0 14px;
  background: linear-gradient(180deg, #f7fafd, #dfe8f1);
  border-bottom: 1px solid var(--blue-edge);
}
.navlink {
  padding: 10px 15px;
  font-family: var(--font-head);
  font-size: 12px; font-weight: bold; letter-spacing: .03em;
  color: var(--blue-dark);
  border-bottom: 3px solid transparent;
}
.navlink:hover, .navlink:focus {
  background: rgba(255,255,255,.75); color: var(--link-hot); text-decoration: none;
  border-bottom-color: var(--blue-edge);
}
.navlink.on {
  color: var(--blue-deep);
  background: var(--panel);
  border-bottom-color: var(--blue);
}
.navlink.hilite { color: var(--red); }
.navsep { display: none; }

/* ---- layout ------------------------------------------------------------- */

.layout { display: flex; align-items: flex-start; }
.content { flex: 1 1 auto; min-width: 0; padding: 20px 22px 30px; }
.rail {
  flex: 0 0 272px;
  padding: 20px 16px 30px;
  background: var(--rail);
  border-left: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .rail { flex: 1 1 auto; width: 100%; border-left: 0; border-top: 1px solid var(--rule); }
  .masthead { flex-direction: column; align-items: flex-start; }
  .mast-right { align-items: flex-start; width: 100%; }
  .searchform { width: 100%; }
  .searchform .inp { width: 100%; }
  .frame { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
}

/* ---- headings ----------------------------------------------------------- */

h1, h2, h3 { font-family: var(--font-head); margin: 0 0 8px; line-height: 1.25; color: var(--blue-deep); }
.pagehead { border-bottom: 1px solid var(--rule); margin-bottom: 18px; padding-bottom: 12px; }
.pagehead h1 { font-size: 25px; }
.pagesub { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

.sechead {
  font-size: 14px; letter-spacing: .02em;
  margin: 26px 0 12px; padding: 8px 12px;
  color: var(--blue-deep);
  background: linear-gradient(180deg, #f4f8fb, #e4edf5);
  border: 1px solid var(--blue-edge);
  border-radius: var(--radius);
}

/* ---- hero --------------------------------------------------------------- */

.hero {
  padding: 22px 24px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff, var(--blue-pale));
  border: 1px solid var(--blue-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-h { font-size: 24px; margin-bottom: 10px; }
.hero-p { margin: 0 0 16px; max-width: 66ch; color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }

/* ---- buttons & forms ---------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px; font-weight: bold; letter-spacing: .02em;
  padding: 8px 16px;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-lite), var(--blue));
  border: 1px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow);
  cursor: pointer;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
.btn:hover, .btn:focus {
  background: linear-gradient(180deg, #6b9bd4, #37659a);
  color: #fff; text-decoration: none;
}
.btn:active { background: linear-gradient(180deg, var(--blue), var(--blue-lite)); box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-lg { padding: 11px 24px; font-size: 13.5px; }
.btn-alt {
  color: var(--blue-dark);
  background: linear-gradient(180deg, #ffffff, #dfe8f1);
  border-color: #a9c0d6;
  text-shadow: none;
}
.btn-alt:hover { background: linear-gradient(180deg, #ffffff, #cfdded); color: var(--blue-deep); }
.btn-warn {
  background: linear-gradient(180deg, var(--red-lite), var(--red));
  border-color: #a02b26;
}
.btn-warn:hover { background: linear-gradient(180deg, #ef8b83, #b62d29); }
.linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 11px; color: var(--ink-faint); cursor: pointer;
}
.linkbtn:hover { color: var(--red); text-decoration: underline; }

.inp {
  font-family: var(--font-body); font-size: 12.5px;
  padding: 7px 9px; width: 100%; max-width: 100%;
  color: var(--ink);
  background: #fff;
  border: 1px solid #b6c7d6;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(30,55,80,.09);
}
.inp:focus { border-color: var(--blue-lite); box-shadow: inset 0 1px 2px rgba(30,55,80,.09), 0 0 0 3px rgba(91,143,201,.2); outline: none; }
.inp-sm { padding: 3px 7px; font-size: 11.5px; width: auto; }
.inp[disabled] { background: #eef2f6; color: var(--ink-faint); }
.ta { line-height: 1.6; resize: vertical; }
select.inp { padding: 6px; }

.bigform {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.bigform.narrow { max-width: 440px; }
.fld { display: block; margin-bottom: 16px; }
.lbl {
  display: block;
  font-family: var(--font-head);
  font-size: 11px; font-weight: bold; letter-spacing: .04em;
  color: var(--blue-dark); margin-bottom: 5px;
}
.lbl i { font-weight: normal; color: var(--ink-faint); letter-spacing: 0; }
.fld .tiny { display: block; margin-top: 5px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: block; margin: 8px 0; padding-left: 24px; text-indent: -24px; line-height: 1.55; }
.check input { margin-right: 8px; }
.radios { margin: 10px 0 14px; }
.formfoot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 8px;
}
.pledge {
  background: #fffaf0; border: 1px solid #f0dcae;
  border-radius: var(--radius); padding: 14px 16px; margin: 18px 0;
}
.pledge h3 { font-size: 13px; margin-bottom: 10px; color: #8a6212; }
.filepick { display: inline-block; font-family: var(--font-head); font-size: 11px; font-weight: bold; }
.filepick input { display: block; margin-top: 5px; font-size: 11.5px; }
.inline-form { display: inline; }
.twocol { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.sidenote {
  background: var(--blue-pale); border: 1px solid var(--blue-edge);
  border-radius: var(--radius-lg); padding: 16px 18px;
}
.sidenote h3 { font-size: 12.5px; margin: 14px 0 6px; }
.sidenote h3:first-child { margin-top: 0; }
.sidenote ul { margin: 0 0 10px; padding-left: 18px; }
.sidenote li { margin-bottom: 4px; }
@media (max-width: 760px) { .twocol, .row2 { grid-template-columns: 1fr; } }

/* ---- avatars ------------------------------------------------------------ */

.av {
  display: inline-grid; place-items: center;
  vertical-align: middle;
  font-family: var(--font-head); font-weight: bold; color: #fff;
  background: #9fb3c4;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(30,55,80,.2);
  overflow: hidden;
}
.av-sm { width: 20px; height: 20px; font-size: 11px; border-radius: 3px; }
.av-md { width: 34px; height: 34px; font-size: 16px; }
.av-lg { width: 88px; height: 88px; font-size: 40px; border-radius: var(--radius-lg); }
.av-anon { background: #b3c0cb; color: #fff; }
.av-gone { background: #d3dae0; color: #8b97a2; }
.av-link { display: inline-block; line-height: 0; }
.av-link:hover { text-decoration: none; }
.avatar-row { margin-bottom: 18px; }
.avatar-pick { display: flex; gap: 16px; align-items: flex-start; }
.avatar-pick > div { flex: 1 1 auto; }
.profpic { float: right; margin: 0 0 12px 16px; }

/* ---- flash & panels ----------------------------------------------------- */

.flash {
  padding: 11px 15px; margin-bottom: 18px;
  border: 1px solid; border-radius: var(--radius);
  font-size: 12.5px;
}
.flash b { font-family: var(--font-mono); margin-right: 5px; }
.flash ul { margin: 6px 0 0; padding-left: 20px; }
.flash-ok   { background: #eaf6ea; border-color: var(--green-lite); color: #256025; }
.flash-warn { background: #fdf6e3; border-color: #e8cd8a; color: #7a5c10; }
.flash-bad  { background: #fdecea; border-color: var(--red-lite); color: #8c2019; }

.warnpanel {
  background: #fffaf0;
  border: 1px solid #f0dcae;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  padding: 13px 16px; margin-bottom: 18px;
  font-size: 12px;
}
.warnpanel.bad { background: #fdecea; border-color: var(--red-lite); border-left-color: var(--red); }

.ctastrip {
  margin-top: 22px; padding: 18px 20px;
  background: linear-gradient(180deg, #ffffff, var(--blue-pale));
  border: 1px solid var(--blue-edge); border-radius: var(--radius-lg);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.statuspanel {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 15px 18px; margin-bottom: 18px;
  border: 1px solid; border-radius: var(--radius-lg);
}
.status-good { background: #eaf6ea; border-color: var(--green-lite); }
.status-warn { background: #fdf6e3; border-color: #e8cd8a; }
.status-bad  { background: #fdecea; border-color: var(--red-lite); }
.st-badge { font-family: var(--font-head); font-size: 15px; font-weight: bold; white-space: nowrap; }
.st-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08); }

/* ---- sidebar boxes ------------------------------------------------------ */

.box {
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.box-h {
  padding: 8px 13px;
  font-family: var(--font-head); font-size: 11.5px; font-weight: bold; letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-lite), var(--blue));
  border-bottom: 1px solid var(--blue-dark);
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
.box-b { padding: 13px; font-size: 12px; }
.box-b hr { border: 0; border-top: 1px solid var(--rule); margin: 12px 0; }
.box-notice .box-h { background: linear-gradient(180deg, var(--red-lite), var(--red)); border-bottom-color: #9c2b26; }
.box-safety .box-h { background: linear-gradient(180deg, #e8b84b, var(--amber)); border-bottom-color: #a8690b; }
.uhead { font-size: 14px; font-weight: bold; margin-bottom: 8px; }
.ulinks { list-style: none; margin: 10px 0; padding: 0; }
.ulinks li { margin-bottom: 1px; }
.ulinks a { display: block; padding: 4px 7px; border-radius: 3px; }
.ulinks a:hover { background: var(--blue-pale); text-decoration: none; }

.kv { width: 100%; border-collapse: collapse; font-size: 12px; }
.kv td { padding: 4px 0; border-bottom: 1px solid #edf1f5; }
.kv td:first-child { color: var(--ink-soft); }
.kv .num, .kv td.num { text-align: right; font-weight: bold; color: var(--blue-dark); }
.kv.wide td { padding: 6px 10px 6px 0; }
.hot-td { color: var(--red); font-weight: bold; }

.blist { list-style: none; margin: 0; padding: 0; }
.blist li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.blist li.on a { font-weight: bold; color: var(--link-hot); }
.bdot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; box-shadow: inset 0 -1px 1px rgba(0,0,0,.25); }
.bdot.big { width: 12px; height: 12px; flex-basis: 12px; }

.checklist { margin: 0; padding-left: 20px; }
.checklist li { margin-bottom: 7px; }
.checklist.big li { margin-bottom: 11px; }
.flags { margin: 0; padding-left: 20px; }
.flags li { margin-bottom: 6px; }

/* ---- tabs --------------------------------------------------------------- */

.sorttabs, .catnav {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--blue-edge);
}
.tab {
  padding: 7px 15px;
  font-family: var(--font-head);
  font-size: 11.5px; font-weight: bold; letter-spacing: .02em;
  color: var(--blue-dark);
  background: linear-gradient(180deg, #f7fafd, #e2ebf3);
  border: 1px solid var(--blue-edge); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tab:hover { background: linear-gradient(180deg, #fff, #eef4fa); color: var(--link-hot); text-decoration: none; }
.tab-on {
  color: #fff;
  background: linear-gradient(180deg, var(--blue-lite), var(--blue));
  border-color: var(--blue-dark);
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
.catnav .tab { font-size: 11px; padding: 5px 11px; }
.barrow { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.barrow .sorttabs { flex: 1 1 auto; margin-bottom: 16px; }

/* ---- thread list -------------------------------------------------------- */

.threadlist {
  margin-bottom: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}
.trow {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 14px 10px;
  border-bottom: 1px solid #eaeff4;
}
.trow:last-child { border-bottom: 0; }
.trow:nth-child(even) { background: var(--panel-alt); }
.trow:hover { background: var(--blue-pale); }
.trow.pinned { background: #fffaf0; border-left: 3px solid var(--amber); }
.trank {
  flex: 0 0 24px; text-align: right;
  font-family: var(--font-head); font-size: 15px; font-weight: bold;
  color: #b9c6d2; padding-top: 5px;
}
.tthumb { flex: 0 0 68px; }
.tthumb img {
  width: 68px; height: 54px; object-fit: cover;
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fff;
}
.tmain { flex: 1 1 auto; min-width: 0; }
.ttitle { font-size: 16px; margin: 0 0 5px; font-weight: bold; line-height: 1.35; }
.ttitle a { color: var(--link); }
.ttitle a:visited { color: var(--link-vis); }
.tdomain { font-size: 11px; font-weight: normal; color: var(--ink-faint); }
.tsubject { font-size: 12px; margin-bottom: 5px; }
.tmeta, .tlinks { font-size: 11.5px; color: var(--ink-soft); }
.tlinks { margin-top: 5px; }
.tlinks a { color: var(--blue-dark); font-weight: bold; }
.sep { margin: 0 7px; color: #cbd6e0; }
.bref { font-weight: bold; }

.new-flag, .pin-flag, .lock-flag {
  display: inline-block; vertical-align: middle;
  font-family: var(--font-head);
  font-size: 9.5px; font-weight: bold; letter-spacing: .05em;
  padding: 2px 7px; margin-left: 6px;
  border-radius: 10px; color: #fff;
}
.new-flag { background: linear-gradient(180deg, var(--red-lite), var(--red)); }
.pin-flag { background: linear-gradient(180deg, #e8b84b, var(--amber)); }
.lock-flag { background: linear-gradient(180deg, #8d9aa6, #6c7883); }

/* ---- voting ------------------------------------------------------------- */

.votebox { display: flex; flex-direction: column; align-items: center; flex: 0 0 34px; margin: 0; padding-top: 3px; }
.votebox-sm { flex-basis: 26px; }
.vote {
  display: block; width: 24px; line-height: 1; padding: 2px 0;
  font-size: 12px; text-align: center; color: #b0bfcc;
  background: none; border: 0; cursor: pointer; border-radius: 3px;
}
.votebox-sm .vote { font-size: 10px; width: 20px; }
.vote:hover { color: var(--red); background: var(--blue-pale); text-decoration: none; }
.vote-up.voted { color: var(--red); }
.vote-down.voted { color: var(--blue); }
.score { font-family: var(--font-head); font-size: 13px; font-weight: bold; color: var(--ink); padding: 2px 0; }
.votebox-sm .score { font-size: 11.5px; }
.score.pos { color: var(--red); }
.score.neg { color: var(--blue); }

/* ---- post view ---------------------------------------------------------- */

.post {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 22px; margin-bottom: 22px;
}
.post-head { display: flex; gap: 14px; align-items: flex-start; }
.post-title { flex: 1 1 auto; min-width: 0; }
.post-title h1 { font-size: 22px; margin-bottom: 8px; }
.crumbs { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 6px; }
.post-meta { font-size: 12px; color: var(--ink-soft); }
.post-link { margin-top: 8px; font-size: 12px; word-break: break-all; }
.post-body { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.post-foot {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 11.5px; color: var(--ink-soft);
}
.subjectbar {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 10px 0; padding: 9px 13px;
  background: var(--blue-pale); border: 1px solid var(--blue-edge); border-radius: var(--radius);
}
.sublabel { font-family: var(--font-head); font-size: 10px; font-weight: bold; letter-spacing: .06em; color: var(--ink-soft); }
.subname { font-family: var(--font-mono); font-size: 13px; }

.modbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 14px;
  background: #f3eefa; border: 1px solid #d7c9ec; border-radius: var(--radius);
  font-size: 11.5px;
}
.modbar .grow { flex: 1 1 160px; }

.verdict {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10px; font-weight: bold; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 10px; color: #fff;
}
.v-scam       { background: linear-gradient(180deg, var(--red-lite), var(--red)); }
.v-legit      { background: linear-gradient(180deg, var(--green-lite), var(--green)); }
.v-caution    { background: linear-gradient(180deg, #e8b84b, var(--amber)); }
.v-unresolved { background: linear-gradient(180deg, #93a1ae, #6c7883); }

/* ---- comments ----------------------------------------------------------- */

.cmt-tree, .cmt-kids { list-style: none; margin: 0; padding: 0; }
.cmt-kids { margin-left: 18px; padding-left: 16px; border-left: 2px solid #e3eaf1; }
.cmt { padding: 12px 0 0; }
.cmt-row { display: flex; gap: 10px; align-items: flex-start; }
.cmt-body { flex: 1 1 auto; min-width: 0; }
.cmt-meta { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 5px; }
.cmt-text { font-size: 12.5px; }
.cmt-text p { margin: 0 0 10px; }
.cmt-text p:last-child { margin-bottom: 0; }
.cmt-actions { margin-top: 6px; font-size: 11px; display: flex; gap: 14px; flex-wrap: wrap; }
.cmt-actions a, .cmt-actions .linkbtn { color: var(--ink-faint); font-size: 11px; }
.cmt-actions a:hover { color: var(--link-hot); }
.anchor { color: #c3ced8; margin-left: 5px; }
.removed { color: var(--ink-faint); font-style: italic; }
.cform {
  margin: 14px 0 22px; padding: 16px 18px;
  background: var(--panel-alt); border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.cform-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.bbhint { margin: 10px 0 0; font-family: var(--font-mono); font-size: 10.5px; }
.loginnag {
  padding: 13px 16px; background: var(--blue-pale);
  border: 1px solid var(--blue-edge); border-radius: var(--radius); font-size: 12px;
}

/* ---- anonymous posting -------------------------------------------------- */

.anonname { font-weight: bold; color: var(--ink-soft); }
.badge-anon { background: #97a6b3; }
.anonrow {
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--blue-pale); border: 1px solid var(--blue-edge); border-radius: var(--radius);
}
.anonname-fld { display: block; max-width: 280px; margin-bottom: 6px; }
.file-note { display: block; margin-top: 5px; color: var(--ink-soft); }

/* ---- attachments -------------------------------------------------------- */

.attachments {
  margin-top: 16px; padding: 13px 15px;
  background: var(--panel-alt); border: 1px solid var(--rule); border-radius: var(--radius);
}
.att-head {
  font-family: var(--font-head);
  font-size: 10.5px; font-weight: bold; letter-spacing: .05em;
  color: var(--ink-soft); margin-bottom: 10px;
}
.att { margin-bottom: 12px; }
.att:last-child { margin-bottom: 0; }
.att-img img {
  max-width: 100%; max-height: 460px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fff;
}
.att video, .att audio { max-width: 100%; border-radius: var(--radius); }
.att-cap { font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.filelink { font-family: var(--font-mono); font-weight: bold; }

/* ---- tables ------------------------------------------------------------- */

.grid {
  width: 100%; border-collapse: collapse; margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; font-size: 12.5px;
}
.grid th {
  padding: 10px 13px; text-align: left;
  font-family: var(--font-head);
  font-size: 11px; font-weight: bold; letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-lite), var(--blue));
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
.grid td { padding: 11px 13px; border-top: 1px solid #eaeff4; vertical-align: top; }
.grid tbody tr:nth-child(even) { background: var(--panel-alt); }
.grid tbody tr:hover { background: var(--blue-pale); }
.grid .num { text-align: right; font-weight: bold; }
.grid .row-hot { background: #fdecea !important; }
.grid .c-dot { width: 26px; text-align: center; }
.kvgrid th {
  width: 170px; background: var(--panel-alt); color: var(--blue-dark);
  border-top: 1px solid #eaeff4;
  letter-spacing: 0; font-size: 12px; text-shadow: none;
}
.bname { font-size: 13.5px; font-weight: bold; }
.bblurb { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.pre { white-space: pre-wrap; font-size: 11.5px; max-width: 520px; }

/* ---- lists -------------------------------------------------------------- */

.hitlist { list-style: none; margin: 0 0 20px; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.hitlist li { padding: 12px 15px; border-top: 1px solid #eaeff4; background: var(--panel); }
.hitlist li:first-child { border-top: 0; }
.hitlist li:nth-child(even) { background: var(--panel-alt); }

.vouchlist { list-style: none; margin: 0; padding: 0; }
.vouchlist li {
  padding: 13px 16px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--rule);
  border-left-width: 4px; border-radius: var(--radius);
}
.vouch-vouch { border-left-color: var(--green); }
.vouch-dispute { border-left-color: var(--red); }
.v-head { font-size: 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.v-kind { font-family: var(--font-head); font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 10px; color: #fff; }
.v-kind.good { background: var(--green); }
.v-kind.bad { background: var(--red); }
.v-body { font-size: 12.5px; }
.reflist { margin: 0; padding-left: 18px; }
.reflist li { word-break: break-all; }

/* ---- groups & chat ------------------------------------------------------ */

.grouplist { list-style: none; margin: 0 0 20px; padding: 0; }
.grouplist li {
  padding: 14px 16px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.g-name { font-family: var(--font-head); font-size: 15px; font-weight: bold; }
.g-topic { font-size: 12px; color: var(--ink-soft); margin: 3px 0; }
.badge-open   { background: var(--green); }
.badge-priv   { background: #8d9aa6; }
.badge-unread { background: var(--red); }

.grouphead {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 18px;
  background: linear-gradient(180deg, #ffffff, var(--blue-pale));
  border: 1px solid var(--blue-edge); border-radius: var(--radius-lg);
}
.grouphead h1 { font-size: 21px; }

.chatwrap { display: flex; gap: 20px; align-items: flex-start; }
.chatmain { flex: 1 1 auto; min-width: 0; }
.chatside { flex: 0 0 246px; }
@media (max-width: 820px) { .chatwrap { flex-direction: column; } .chatside { width: 100%; } }

.chatlog {
  list-style: none; margin: 0 0 16px; padding: 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  max-height: 560px; overflow-y: auto;
}
.msg { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f4f8; }
.msg:first-child { border-top: 0; }
.msg-av { flex: 0 0 auto; padding-top: 2px; }
.msg-body { flex: 1 1 auto; min-width: 0; }
.msg-meta { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 3px; }
.msg-text { font-size: 12.5px; }
.msg-text p { margin: 0 0 8px; }
.msg-text p:last-child { margin-bottom: 0; }
.msg-mine .msg-text {
  background: var(--blue-pale); border-radius: var(--radius);
  padding: 7px 11px; display: inline-block; max-width: 100%;
}
.chatform { display: flex; gap: 10px; align-items: flex-end; }
.chatform .ta { flex: 1 1 auto; }
.memberlist { list-style: none; margin: 0; padding: 0; }
.memberlist li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }

/* ---- profile / seller --------------------------------------------------- */

.profhead, .sellerhead {
  padding: 20px 22px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden;
}
.sellerhead { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.profname { font-family: var(--font-head); font-size: 23px; font-weight: bold; color: var(--blue-deep); }
.proftag { color: var(--ink-soft); margin-bottom: 10px; }
.profbio { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sh-left h1 { font-size: 24px; }
.sh-cat { font-size: 12px; color: var(--ink-soft); }
.sh-owner { font-size: 12px; margin-top: 6px; }
.sh-right { text-align: right; }
.trustbig { font-family: var(--font-head); font-size: 14px; padding: 6px 14px; display: inline-block; }
.scoreline { font-size: 12.5px; margin-top: 7px; }
.sellerpitch { background: var(--panel-alt); border-left: 3px solid var(--blue-edge); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; }
.ratebox { background: var(--panel-alt); }

.trust {
  display: inline-block; font-family: var(--font-head);
  font-size: 10.5px; font-weight: bold; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 10px; color: #fff;
}
.trust.great { background: linear-gradient(180deg, var(--green-lite), var(--green)); }
.trust.good  { background: #6aa96a; }
.trust.warn  { background: linear-gradient(180deg, #e8b84b, var(--amber)); }
.trust.bad   { background: linear-gradient(180deg, var(--red-lite), var(--red)); }
.trust.new   { background: #97a6b3; }

/* ---- badges ------------------------------------------------------------- */

.badge {
  display: inline-block; margin-left: 5px;
  font-family: var(--font-head);
  font-size: 9.5px; font-weight: bold; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 10px;
  color: #fff; background: #97a6b3; vertical-align: middle;
}
.badge-admin  { background: linear-gradient(180deg, var(--red-lite), var(--red)); }
.badge-mod    { background: linear-gradient(180deg, #9a7bc4, var(--purple)); }
.badge-seller { background: linear-gradient(180deg, var(--green-lite), var(--green)); }
.badge-op     { background: linear-gradient(180deg, var(--blue-lite), var(--blue)); }
.badge-banned { background: #4a5560; }
.badge-fresh  { background: linear-gradient(180deg, #e8b84b, var(--amber)); }
.userlink { font-weight: bold; }
.user-gone { color: var(--ink-faint); font-style: italic; }

/* ---- prose -------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose h2 { font-size: 17px; margin: 24px 0 8px; }
.prose p { margin: 0 0 13px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 22px 0; }

blockquote {
  margin: 0 0 12px; padding: 10px 16px;
  background: var(--panel-alt); border-left: 3px solid var(--blue-edge);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-soft);
}
.codeblock {
  margin: 0 0 12px; padding: 12px 14px;
  font-family: var(--font-mono); font-size: 11.5px;
  background: #2b3540; color: #d8e4ef;
  border-radius: var(--radius);
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.greentext { color: #4d8b3d; }
.ascii { font-family: var(--font-mono); font-size: 12px; line-height: 1.15; color: var(--blue); }

/* ---- misc --------------------------------------------------------------- */

.empty {
  padding: 30px 20px; text-align: center;
  color: var(--ink-soft);
  background: var(--panel-alt); border: 1px dashed var(--rule); border-radius: var(--radius-lg);
}
.tiny { font-size: 11px; line-height: 1.55; }
.dim { color: var(--ink-faint); }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.good { color: var(--green); }
.bad { color: var(--red); }
.warn { color: var(--amber); }
td.good, td.bad, td.warn { font-weight: bold; }

.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 22px 0; }
.pgbtn {
  padding: 7px 16px;
  font-family: var(--font-head); font-size: 11.5px; font-weight: bold;
  color: var(--blue-dark);
  background: linear-gradient(180deg, #ffffff, #e2ebf3);
  border: 1px solid var(--blue-edge); border-radius: var(--radius);
}
.pgbtn:hover { background: linear-gradient(180deg, #fff, #d3e0ec); text-decoration: none; }
.pgbtn-off { color: #b3c0cb; background: var(--panel-alt); border-color: var(--rule); }
.pgnum { font-family: var(--font-head); font-size: 12px; font-weight: bold; color: var(--ink-soft); }

.boardhead {
  padding: 16px 20px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.boardhead h1 { font-size: 21px; }

.modcard {
  padding: 16px 18px; margin-bottom: 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.mc-head { margin-bottom: 10px; }
.mc-title { font-family: var(--font-head); font-size: 15px; }

/* ---- footer ------------------------------------------------------------- */

.foot {
  padding: 20px 22px 24px;
  background: var(--panel-alt);
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
}
.foot hr { border: 0; border-top: 1px solid var(--rule); margin: 14px 0; }
.webring { text-align: center; font-family: var(--font-head); font-size: 11.5px; font-weight: bold; }
.disclaim {
  max-width: 82ch; margin: 0 auto 12px; text-align: center;
  font-size: 11px; line-height: 1.65; color: var(--ink-soft);
}

/* The masthead is dark blue, so the accent-red REGISTER link from .navlink
   would sit at roughly 2:1 contrast. Override it inside the masthead only. */
.mast-account .navlink,
.mast-account .navlink.hilite { color: #fff; padding: 0; border: 0; }
.mast-account .navlink.hilite { color: #ffe9a8; }
.mast-account .navlink:hover,
.mast-account .navlink.hilite:hover { background: none; color: #fff; text-decoration: underline; }
/* .navsep is hidden in the main nav, but the masthead needs it back or the
   two links butt together into "LOG INREGISTER". */
.mast-account .navsep { display: inline; margin: 0 9px; color: #9fc0e0; font-weight: normal; }

/* ==========================================================================
   TYPOGRAPHY PASS
   The 2005 chrome stays. What was missing was the older typographic voice:
   Verdana body copy (the forum font of the era) and a serif for anything that
   reads as a *title*. UI chrome — buttons, tabs, labels, badges — stays on
   Trebuchet so the interface still feels 2005 rather than 1998.
   ========================================================================== */

:root {
  --font-body:  Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
  --font-title: Georgia, "Times New Roman", Times, serif;
}

body { font-size: 12px; line-height: 1.58; }

h1, h2, h3,
.logo-text, .logo-mark, .tagline,
.hero-h, .ttitle, .post-title h1, .pagehead h1,
.profname, .sh-left h1, .g-name, .mc-title,
.st-badge, .trustbig, .sechead, .boardhead h1, .grouphead h1 {
  font-family: var(--font-title);
}

.logo-text { font-size: 31px; letter-spacing: 0; }
.logo-mark { font-size: 28px; }
.tagline { font-style: italic; font-size: 13px; }

.hero-h { font-size: 26px; line-height: 1.2; }
.hero-p { font-size: 12.5px; }

/* Thread titles are the thing you actually read down the page. */
.ttitle { font-size: 16px; font-weight: bold; line-height: 1.3; }
.post-title h1 { font-size: 24px; }
.pagehead h1 { font-size: 26px; }

.sechead { font-size: 15px; letter-spacing: 0; }
.prose h2 { font-size: 18px; }
.prose { font-size: 12.5px; }
.post-body, .cmt-text, .msg-text, .v-body { font-size: 12px; }

/* Small print was genuinely small back then. */
.tiny { font-size: 10.5px; }
.tmeta, .tlinks, .cmt-meta, .post-meta { font-size: 11px; }

/* Numbers read better in the older faces. */
.trank, .score { font-family: var(--font-title); }

/* ---- hit counter -------------------------------------------------------- */

.box-counter .box-h { background: linear-gradient(180deg, #6c7883, #4a5560); border-bottom-color: #39424b; }
.odometer {
  display: inline-flex; gap: 2px; padding: 5px;
  background: #1c232a; border-radius: var(--radius);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.digit {
  display: grid; place-items: center;
  width: 17px; height: 24px;
  font-family: var(--font-mono); font-size: 15px; font-weight: bold;
  color: #7fe08a;
  background: linear-gradient(180deg, #2b3540, #161d23);
  border-radius: 2px;
  text-shadow: 0 0 6px rgba(127,224,138,.55);
}

/* ==========================================================================
   2000 / 2003 PASS
   Same layout, same colours, same structure — but the glossy Web 2.0 surface
   comes off. Square corners, flat fills instead of gradients, crisp 1px rules
   instead of soft shadows, tighter spacing, underlined links.
   ========================================================================== */

:root {
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-lg: none;
  --page: #c8d2dc;
}

body { font-size: 11.5px; line-height: 1.5; background-image: none; }

a { text-decoration: underline; }

.frame {
  border: 2px solid #1e3f63;
  margin: 12px auto;
}

/* ---- flat chrome -------------------------------------------------------- */

.masthead {
  background: #2a527d;
  padding: 14px 18px 12px;
  border-bottom: 3px solid #1e3f63;
}
.masthead::after { display: none; }          /* no gloss sheen */
.logo-mark {
  background: #eef3f8; border: 1px solid #1e3f63; box-shadow: none;
  width: 40px; height: 40px; font-size: 26px;
}
.logo-text { text-shadow: 1px 1px 0 #12283f; font-size: 29px; }

.mainnav {
  background: #d8e0e8;
  border-bottom: 2px solid #1e3f63;
  border-top: 1px solid #eef3f8;
  padding: 0 10px;
}
.navlink { padding: 7px 13px; border-bottom: 0; border-right: 1px solid #b8c4d0; }
.navlink:hover { background: #eef3f8; border-bottom: 0; }
.navlink.on { background: #fff; color: #1e3f63; border-bottom: 0; }

.box, .grid, .threadlist, .post, .bigform, .hero,
.profhead, .sellerhead, .boardhead, .grouphead, .modcard,
.hitlist, .grouplist li, .chatlog, .sidenote, .ctastrip {
  box-shadow: none;
  border: 1px solid #9fb0c0;
}
.box-h, .grid th {
  background: #3d6fa5;
  text-shadow: none;
  border-bottom: 1px solid #1e3f63;
  letter-spacing: .03em;
}
.box-notice .box-h { background: #b5322e; }
.box-safety .box-h { background: #bf7a0d; }
.box-counter .box-h { background: #55606b; }

.hero, .grouphead, .ctastrip { background: #eef3f8; }
.sechead {
  background: #dde5ed; border: 1px solid #9fb0c0;
  border-left: 4px solid #2a527d;
  padding: 6px 10px;
}

/* ---- flat controls ------------------------------------------------------ */

.btn {
  background: #3d6fa5;
  border: 1px solid #1e3f63;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  padding: 6px 14px;
  text-decoration: none;
}
.btn:hover { background: #4d80b8; }
.btn:active { background: #2a527d; box-shadow: none; }
.btn-alt {
  background: #dfe6ed; color: #1e3f63;
  border: 1px solid #8fa3b5;
}
.btn-alt:hover { background: #eef3f8; }
.btn-warn { background: #b5322e; border-color: #7d201d; }
.btn-warn:hover { background: #c94540; }
.pgbtn { background: #dfe6ed; border: 1px solid #8fa3b5; border-radius: 0; }
.pgbtn:hover { background: #eef3f8; }

.inp { border: 1px solid #7f93a6; border-radius: 0; box-shadow: none; padding: 5px 7px; }
.inp:focus { border-color: #2a527d; box-shadow: none; background: #ffffe8; }

.tab {
  background: #dde5ed;
  border: 1px solid #9fb0c0; border-bottom: 0;
  border-radius: 0;
  padding: 6px 13px;
}
.tab:hover { background: #eef3f8; }
.tab-on { background: #2a527d; border-color: #1e3f63; text-shadow: none; }
.sorttabs, .catnav { border-bottom: 2px solid #2a527d; }

/* ---- flat pills --------------------------------------------------------- */

.badge, .verdict, .trust, .v-kind,
.new-flag, .pin-flag, .lock-flag {
  border-radius: 0;
  background-image: none;
  text-shadow: none;
}
.badge-admin, .v-scam, .trust.bad, .v-kind.bad, .new-flag, .badge-unread { background: #b5322e; }
.badge-seller, .v-legit, .trust.great, .v-kind.good, .badge-open { background: #2f7a2f; }
.trust.good { background: #4f9350; }
.v-caution, .trust.warn, .badge-fresh, .pin-flag { background: #bf7a0d; }
.v-unresolved, .trust.new, .badge, .badge-priv, .badge-anon, .lock-flag { background: #6d7b88; }
.badge-mod { background: #6b4e93; }
.badge-op { background: #2a527d; }
.badge-banned { background: #3c454e; }

/* ---- tighter tables and rows -------------------------------------------- */

.trow { padding: 11px 12px 11px 8px; border-bottom: 1px solid #d2dbe4; }
.trow:hover { background: #f2f6fa; }
.grid td { padding: 8px 10px; border-top: 1px solid #d2dbe4; }
.grid th { padding: 7px 10px; }
.tthumb img, .att-img img, .av { border-radius: 0; }
.av { box-shadow: none; border: 1px solid #7f93a6; }
.odometer { border-radius: 0; border: 2px inset #7f93a6; }
.digit { border-radius: 0; }
.content { padding: 16px 18px 24px; }
.rail { padding: 16px 13px 24px; }
.box-b { padding: 11px; }
.msg-mine .msg-text { border-radius: 0; }
blockquote, .codeblock, .sellerpitch { border-radius: 0; }
.empty { border-radius: 0; }
.marquee-bar { background: #2e2409; }

/* ---- who replied to whom ------------------------------------------------ */

.replyto {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  color: #45596b;
  background: #e4ecf3;
  border: 1px solid #c2d0dc;
  text-decoration: none;
  white-space: nowrap;
}
.replyto:hover { background: #d4e2ee; color: #1e3f63; text-decoration: none; }