/*
  ComputeX overrides for phpBB (based on DVGFX / prosilver)
  Goal: match ComputeX landing theme (deep navy/black, subtle borders, green accent, pill buttons)
*/

:root{
  --cx-bg:#000000;
  --cx-ink:#e5e7eb;
  --cx-muted:#9ca3af;
  --cx-border: rgba(148,163,184,.22);

  --cx-accent:#1dbf73;
  --cx-accent-hover:#22c55e;
  --cx-accent-soft: rgba(34,197,94,.20);

  --cx-panel: rgba(15,23,42,.88);
  --cx-panel-2: rgba(15,23,42,.72);
  --cx-panel-3: rgba(2,6,23,.55);

  --cx-login-a:#0b1220;
  --cx-login-b:#111827;
  --cx-login-a-hover:#0f172a;
  --cx-login-b-hover:#1f2937;
}

html, body{
  background: var(--cx-bg) !important;
  color: var(--cx-ink);
}

body{
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%) fixed !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Headings + brand */
.site-description h1,
h1, h2, h3, h4,
.forumtitle,
.topic-title a,
.topictitle{
  font-family: Michroma, "Chakra Petch", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .06em;
}

.site-description h1{
  text-transform: uppercase;
}

.site-description p{
  color: var(--cx-muted) !important;
}

/* Layout containers */
.wrap{
  background: transparent !important;
}

.headerbar{
  background: var(--cx-panel) !important;
  border: 1px solid var(--cx-border) !important;
  border-radius: 16px;
  padding: 10px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.55);
}

.navbar{
  background: var(--cx-panel-3) !important;
  border: 1px solid var(--cx-border) !important;
  border-radius: 16px;
}

/* Common boxes */
.forabg, .forumbg, .panel, .post, .bg1, .bg2, .bg3,
.ucprowbg, .fieldsbg{
  background: var(--cx-panel-2) !important;
  border: 1px solid var(--cx-border) !important;
  border-radius: 16px;
}

/* Reduce harsh separators */
hr,
.separator,
.postprofile,
.postbody,
.content,
.signature,
.notice{
  border-color: rgba(148,163,184,.18) !important;
}

/* Links */
a{ color: rgba(229,231,235,.92); }
a:hover{ color: #ffffff; }

a.forumtitle,
a.topictitle{
  color: rgba(229,231,235,.96) !important;
}

a.forumtitle:hover,
a.topictitle:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(148,163,184,.55);
}

/* Accent highlights */
.mark,
a.subforum.read,
a.subforum.unread,
li.row:hover,
li.row:hover a,
.pagination li.active span,
.pagination li.active a,
.jumpbox-cat-link,
.jumpbox-forum-link{
  color: var(--cx-ink) !important;
}

/* Site logo */
.site_logo{
  width: 72px !important;
  height: 72px !important;
  background-image: url("./images/site_logo.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.logo{
  padding: 8px 14px 0 10px !important;
}

/* Buttons -> pill look */
.button,
.button1,
.button2,
input.button1,
input.button2,
a.button1,
a.button2,
button.button1,
button.button2{
  border-radius: 999px !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Primary */
.button1,
input.button1,
a.button1,
button.button1{
  background: var(--cx-accent) !important;
  border-color: var(--cx-accent) !important;
  color: #0b1120 !important;
  box-shadow: 0 16px 34px rgba(34,197,94,.14), 0 14px 30px rgba(0,0,0,.28);
}

.button1:hover,
input.button1:hover,
a.button1:hover,
button.button1:hover{
  background: var(--cx-accent-hover) !important;
  border-color: var(--cx-accent-hover) !important;
}

/* Secondary */
.button2,
input.button2,
a.button2,
button.button2{
  background: linear-gradient(135deg, var(--cx-login-a), var(--cx-login-b)) !important;
  border-color: rgba(96,165,250,.65) !important;
  color: rgba(229,231,235,.96) !important;
  box-shadow: 0 16px 34px rgba(96,165,250,.14), 0 14px 30px rgba(0,0,0,.28);
}

.button2:hover,
input.button2:hover,
a.button2:hover,
button.button2:hover{
  background: linear-gradient(135deg, var(--cx-login-a-hover), var(--cx-login-b-hover)) !important;
  border-color: rgba(96,165,250,.90) !important;
}

/* Inputs */
.inputbox,
textarea{
  background: rgba(2,6,23,.65) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  color: var(--cx-ink) !important;
  border-radius: 12px;
}

.inputbox:focus,
textarea:focus{
  border-color: rgba(96,165,250,.75) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}

/* Tabs + pagination */
#tabs .tab > a,
#tabs .tab > a:hover,
#tabs .activetab > a,
#tabs .activetab > a:hover{
  border-radius: 999px;
}

.pagination li a,
.pagination li span{
  border-radius: 999px !important;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
}

.pagination li a:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.20) !important;
}

.pagination li.active span,
.pagination li.active a{
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.40) !important;
}

/* Make quote/code blocks match */
blockquote,
.codebox{
  border-radius: 14px;
  border-color: rgba(148,163,184,.22) !important;
  background: rgba(2,6,23,.55) !important;
}

/* Small mobile polish */
@media (max-width: 700px){
  .site_logo{ width: 60px !important; height: 60px !important; }
  .site-description h1{ font-size: 18px; }
}

/* CX_HOMEPAGE_VISUAL_SYNC_V1_START */
:root {
  --cx-paper: #f2f0e9;
  --cx-paper-soft: #f8f6f0;
  --cx-card: #fffdf8;
  --cx-ink: #111114;
  --cx-muted: #5c5953;
  --cx-line: #c9c3b7;
  --cx-line-soft: #ddd8ce;
  --cx-red: #e53220;
  --cx-red-dark: #bd2619;
  --cx-navy: #0b1220;
  --cx-accent: #e53220;
  --cx-accent-hover: #bd2619;
}

html,
body {
  background: var(--cx-paper) !important;
  color: var(--cx-ink) !important;
}

body {
  font-family: Inter, "Segoe UI", sans-serif !important;
  font-size: 15px;
}

.wrap {
  width: min(1460px, calc(100% - 32px)) !important;
  max-width: 1460px !important;
  margin: 18px auto !important;
  padding: 0 28px 26px !important;
  background: transparent !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.headerbar {
  min-height: 128px;
  margin: 0 -28px 18px !important;
  padding: 22px 28px !important;
  background: var(--cx-paper-soft) !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 4px solid var(--cx-ink) !important;
  border-bottom: 1px solid var(--cx-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 20px 0 0 !important;
  padding: 8px !important;
  background: var(--cx-navy) !important;
  border: 1px solid #273249 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.site_logo {
  width: 66px !important;
  height: 66px !important;
  filter: none !important;
}

.site-description {
  padding-top: 8px;
}

.site-description h1 {
  margin: 0 0 6px !important;
  color: var(--cx-ink) !important;
  font-family: Inter, "Segoe UI", sans-serif !important;
  font-size: clamp(24px, 3.1vw, 48px) !important;
  font-weight: 900 !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.site-description p {
  color: var(--cx-muted) !important;
  font-family: "Chakra Petch", Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.55;
  text-transform: uppercase;
  text-shadow: none !important;
}

.search-header {
  top: 36px !important;
  right: 28px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.search-header .inputbox {
  min-width: 210px;
}

.navbar {
  margin: 0 0 18px !important;
  padding: 10px 14px !important;
  background: var(--cx-card) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cx-ink) !important;
}

.navbar a,
.navbar .icon,
.navbar li,
.navbar strong {
  color: var(--cx-ink) !important;
}

.navbar a:hover,
.navbar a:hover .icon {
  color: var(--cx-red) !important;
}

.forabg,
.forumbg {
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--cx-card) !important;
  background-image: none !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.forabg > .inner,
.forumbg > .inner {
  margin: 0 !important;
  padding: 0 !important;
}

ul.topiclist li.header {
  padding: 13px 16px !important;
  background: var(--cx-ink) !important;
  border-top: 4px solid var(--cx-red) !important;
  border-radius: 0 !important;
}

ul.topiclist li.header dl,
ul.topiclist li.header dt,
ul.topiclist li.header dd,
ul.topiclist li.header a {
  color: #fff !important;
  font-family: "Chakra Petch", Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .13em;
  text-transform: uppercase;
}

ul.forums {
  background: var(--cx-card) !important;
  background-image: none !important;
}

li.row,
.bg1,
.bg2,
.bg3 {
  background: var(--cx-card) !important;
  color: var(--cx-ink) !important;
}

li.row {
  border-top: 1px solid var(--cx-line-soft) !important;
  border-bottom: 0 !important;
}

li.row:hover {
  background: #f7eee9 !important;
}

li.row dl {
  padding: 9px 14px !important;
}

li.row dt,
li.row dd,
li.row dd.posts,
li.row dd.topics,
li.row dd.views,
li.row dd.lastpost,
li.row dd.mark {
  color: var(--cx-muted) !important;
}

a,
a:link,
a:visited,
.forumtitle,
.topictitle,
.postlink {
  color: var(--cx-ink) !important;
}

a:hover,
a:focus,
.forumtitle:hover,
.topictitle:hover,
.postlink:hover {
  color: var(--cx-red) !important;
  text-decoration-color: var(--cx-red) !important;
}

.forumtitle,
.topictitle {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em;
}

.forums .description,
.topiclist .responsive-show,
.topiclist .responsive-hide,
li.row .list-inner,
li.row .list-inner span,
li.row .list-inner dfn {
  color: var(--cx-muted) !important;
}

.panel,
.post,
.rules {
  margin-bottom: 18px !important;
  padding: 18px !important;
  background: var(--cx-card) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cx-ink) !important;
}

.panel h2,
.panel h3,
.post h2,
.post h3,
.postbody,
.postbody .content,
.postbody .content p,
.postprofile,
.postprofile strong,
.postprofile dt,
.postprofile dd {
  color: var(--cx-ink) !important;
}

.postprofile {
  border-color: var(--cx-line) !important;
}

h2,
h3,
.content h2,
.content h3 {
  color: var(--cx-ink) !important;
  font-family: Inter, "Segoe UI", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.03em;
}

h2 {
  font-size: clamp(24px, 4vw, 44px) !important;
  line-height: 1 !important;
}

.stat-block h3,
.panel h3,
.postbody h3 {
  border-bottom-color: var(--cx-line) !important;
}

.button,
.button1,
.button2,
input.button1,
input.button2,
a.button1,
a.button2,
button.button1,
button.button2 {
  min-height: 38px;
  padding: 8px 16px !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--cx-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cx-ink) !important;
  font-family: "Chakra Petch", Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}

.button1,
input.button1,
a.button1,
button.button1 {
  background: var(--cx-red) !important;
  border-color: var(--cx-red) !important;
  color: #fff !important;
}

.button:hover,
.button2:hover,
input.button2:hover,
a.button2:hover,
button.button2:hover {
  background: var(--cx-ink) !important;
  border-color: var(--cx-ink) !important;
  color: #fff !important;
}

.button1:hover,
input.button1:hover,
a.button1:hover,
button.button1:hover {
  background: var(--cx-red-dark) !important;
  border-color: var(--cx-red-dark) !important;
  color: #fff !important;
}

.inputbox,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background: #fff !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cx-ink) !important;
}

.inputbox:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--cx-red) !important;
  box-shadow: 0 0 0 2px rgba(229, 50, 32, .12) !important;
  outline: none !important;
}

#tabs .tab > a,
#tabs .activetab > a,
#navigation a {
  border-radius: 0 !important;
}

#tabs .activetab > a,
#navigation #active-subsection a {
  background: var(--cx-red) !important;
  color: #fff !important;
}

.pagination li a,
.pagination li span {
  background: var(--cx-card) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 0 !important;
  color: var(--cx-ink) !important;
}

.pagination li a:hover,
.pagination li.active span,
.pagination li.active a {
  background: var(--cx-red) !important;
  border-color: var(--cx-red) !important;
  color: #fff !important;
}

blockquote,
.codebox {
  background: var(--cx-paper-soft) !important;
  border: 1px solid var(--cx-line) !important;
  border-left: 4px solid var(--cx-red) !important;
  border-radius: 0 !important;
  color: var(--cx-ink) !important;
}

.dropdown .dropdown-contents,
.dropdown-extended .header,
.dropdown-extended .footer,
.dropdown-extended ul {
  background: var(--cx-card) !important;
  border-color: var(--cx-line) !important;
  border-radius: 0 !important;
  color: var(--cx-ink) !important;
}

.badge,
.notification-count {
  background: var(--cx-red) !important;
  color: #fff !important;
}

.copyright {
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--cx-line) !important;
  color: var(--cx-muted) !important;
  font-family: "Chakra Petch", Consolas, monospace !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 850px) {
  .wrap {
    width: min(100% - 18px, 1460px) !important;
    margin: 9px auto !important;
    padding: 0 14px 18px !important;
  }

  .headerbar {
    min-height: 0;
    margin: 0 -14px 14px !important;
    padding: 16px 14px !important;
  }

  .logo {
    margin-right: 12px !important;
  }

  .site_logo {
    width: 52px !important;
    height: 52px !important;
  }

  .site-description h1 {
    font-size: clamp(21px, 7vw, 32px) !important;
  }

  .site-description p {
    max-width: 48ch;
    font-size: 10px !important;
  }

  .search-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    clear: both;
    width: 100%;
    margin-top: 14px !important;
  }

  .search-header .inputbox {
    width: calc(100% - 42px) !important;
    min-width: 0;
  }
}

@media (max-width: 500px) {
  .logo {
    float: none !important;
    margin: 0 0 12px !important;
  }

  .site-description {
    clear: both;
  }

  .navbar,
  ul.topiclist li.header {
    padding: 10px !important;
  }

  .panel,
  .post,
  .rules {
    padding: 13px !important;
  }

  .button,
  .button1,
  .button2 {
    min-height: 42px;
  }
}
/* CX_HOMEPAGE_VISUAL_SYNC_V1_END */