:root {
  --bg: #f0f2f6;
  --link: #2a5db0;
  --accent-1: #5d7fc2;
  --banner-end: #2e4d8a;
  --thead-end: #345189;
  --btn-bg: #3e5c92;
  --btn-border: #1f3663;
  --cta-bg: #ee9a2e;
  --cta-fg: #3b2200;
  --cta-border: #a9690f;
}
* { box-sizing: border-box; }
body {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 11px;
  color: #000;
  background: var(--bg);
  margin: 0;
  padding: 0;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.pagewrap { max-width: 980px; margin: 0 auto; padding: 8px; }

.usercp-bar {
  background: #d7e3f5;
  border: 1px solid #94a7bf;
  padding: 3px 8px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 4px;
}

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(var(--accent-1), var(--banner-end));
  border: 1px solid var(--btn-border);
  padding: 8px;
  margin-bottom: 4px;
}
.banner-img { height: 90px; width: auto; display: block; border: 2px solid #fff; }
.banner-text h1 { color: #fff; font-size: 22px; margin: 0; font-family: Georgia, serif; }
.banner-tagline { color: #dce6f8; font-size: 11px; margin-top: 2px; }
.home-headline { font-family: Georgia, serif; font-size: 16px; margin: 4px 0 8px; }

.navbar {
  background: #e4ecf8;
  border: 1px solid #94a7bf;
  padding: 4px 8px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.breadcrumb { font-size: 11px; }
.crumb-sep { color: #6a7ea3; }
.navbtn {
  background: var(--btn-bg);
  color: #fff !important;
  padding: 3px 10px;
  border: 1px solid var(--btn-border);
  font-weight: bold;
  text-decoration: none !important;
}

.content { margin-bottom: 10px; }

table.tborder {
  border: 1px solid #94a7bf;
  border-collapse: separate;
  background: #94a7bf;
  margin-bottom: 10px;
}
.thead {
  background: linear-gradient(var(--accent-1), var(--thead-end));
  color: #fff;
  font-weight: bold;
  padding: 4px 6px;
  font-size: 11px;
}
.alt1 { background: #eef3fb; padding: 5px 6px; vertical-align: top; }
.alt2 { background: #dbe6f7; padding: 5px 6px; vertical-align: top; }
.boxbody { padding: 6px 8px; }
.box { width: 100%; }

.forum-blurb, .forum-blurb-small { color: #46506b; font-size: 10px; }
.forum-blurb-small { margin-top: 2px; }

table.threadlist { width: 100%; }
.thread-title a { font-weight: bold; }
.thread-starter { color: #556; font-size: 10px; }
.score-cell { white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
}
.badge-good { background: #3a8c3a; }
.badge-mid { background: #b58a1c; }
.badge-skip { background: #a53e3e; }
.badge-unrated { background: #767676; }
.badge-testing { background: #2a5db0; }

.scorepair { width: 100%; margin: 6px 0; }
.scorepair-cell {
  background: #f4f7fd;
  border: 1px solid #c3d2ea;
  padding: 6px 10px;
  width: 50%;
}
.scorepair-label { font-size: 10px; color: #46506b; text-transform: uppercase; }
.scorepair-value { font-size: 13px; font-weight: bold; margin-top: 2px; }
.scorepair-lead {
  background: #f4f7fd;
  border: 1px solid #c3d2ea;
  padding: 8px 10px;
  margin: 6px 0 4px;
}
.scorepair-lead .scorepair-value { font-size: 17px; }
.scorepair-sub { color: #46506b; font-size: 11px; margin-bottom: 6px; }

.ai-tag {
  background: #a53ea5;
  color: #fff;
  font-size: 9px;
  padding: 0 4px;
  border-radius: 2px;
  vertical-align: middle;
}

table.postbit { width: 100%; }
.postbit-head { background: #dbe6f7; padding: 3px 6px; font-size: 10px; color: #46506b; }
.postnum { float: right; }
.postbit-userinfo {
  width: 140px;
  background: #f4f7fd;
  padding: 8px;
  text-align: center;
  vertical-align: top;
  border-right: 1px solid #c3d2ea;
}
.avatar { width: 80px; height: 80px; border: 1px solid #94a7bf; object-fit: cover; }
.avatar-blank { width: 80px; height: 80px; border: 1px solid #94a7bf; background: #c3d2ea; margin: 0 auto; }
.postbit-username { font-weight: bold; margin-top: 6px; }
.postbit-usertitle { color: #556; font-size: 10px; margin-top: 2px; }
.postbit-body { padding: 10px; vertical-align: top; }
.postbit-note { font-style: italic; color: #556; font-size: 10px; margin-bottom: 6px; }

.quotebox { border: 1px solid #c3d2ea; margin: 8px 0; background: #f4f7fd; }
.quotebox-head { background: #dbe6f7; padding: 2px 6px; font-weight: bold; font-size: 10px; }
.quotebox-source { padding: 3px 6px; font-size: 10px; color: #46506b; font-style: italic; }
.quotebox-body { padding: 6px; }

.review-score { font-weight: bold; margin-bottom: 4px; }
.preview-badge {
  display: inline-block;
  background: #b58a1c;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  margin-bottom: 4px;
}
.verdict { margin: 4px 0; }
.verdict-en { margin: 4px 0; color: #333; }

.proscons { display: flex; gap: 20px; margin-top: 6px; }
.proscons-col ul { margin: 2px 0 0 16px; padding: 0; }

.cta-btn {
  display: inline-block;
  background: var(--cta-bg);
  color: var(--cta-fg) !important;
  border: 1px solid var(--cta-border);
  padding: 4px 10px;
  font-weight: bold;
  text-decoration: none !important;
  margin: 2px 4px 2px 0;
}
.cta-btn--big { font-size: 14px; padding: 8px 18px; box-shadow: 1px 1px 0 var(--cta-border); }
.cta-link { color: var(--link) !important; font-weight: bold; text-decoration: underline !important; margin-right: 8px; }

.gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.gallery-item img { width: 180px; height: 135px; object-fit: cover; border: 1px solid #94a7bf; }

table.scoretable { width: 100%; }

.footer {
  text-align: center;
  color: #556;
  font-size: 10px;
  padding: 8px;
  border-top: 1px solid #c3d2ea;
}

.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
.tscroll table.tborder { margin-bottom: 0; }

.review-controls { margin-bottom: 10px; }
.review-block { border: 1px solid #c3d2ea; background: #f4f7fd; padding: 8px; margin-bottom: 14px; }
.hypothesis { font-style: italic; color: #46506b; }
.iframe-row { display: flex; flex-wrap: wrap; gap: 8px; }
.iframe-row iframe { width: 390px; height: 560px; border: 1px solid #94a7bf; }
.pick-row { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rv-note { flex: 1; min-width: 120px; }

@media (max-width: 600px) {
  body { font-size: 11px; }
  .pagewrap { padding: 4px; }
  .banner { flex-direction: column; text-align: center; }
  .banner-img { height: 70px; }
  .usercp-bar { flex-direction: column; gap: 4px; }
  .navbar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tscroll table.tborder { width: max-content; min-width: 100%; }
  table.postbit, table.postbit tr, table.postbit td { display: block; width: 100%; }
  .postbit-userinfo { width: 100%; border-right: none; border-bottom: 1px solid #c3d2ea; text-align: left; }
  .avatar, .avatar-blank { display: inline-block; vertical-align: middle; margin-right: 8px; }
  .scorepair, .scorepair tr, .scorepair-cell { display: block; width: 100%; }
  .scorepair-cell { border-bottom: none; margin-bottom: 4px; }
  .proscons { flex-direction: column; gap: 4px; }
  .gallery-item img { width: 100%; height: auto; }
  img { max-width: 100%; }
  .iframe-row iframe { width: 100%; }
}
html { overflow-x: hidden; }

.analytics-notice { position: fixed; bottom: 12px; left: 12px; right: 12px; max-width: 650px; margin: auto; padding: 12px; background: white; color: #222; border: 1px solid #456; box-shadow: 0 2px 12px #0003; z-index: 20; }
.analytics-notice p { margin: 0 0 8px; }
.analytics-notice button { padding: 6px 10px; }