:root {
  --bg-main: #1b1d1f;         /* primary background (panels)    */
  --bg-alt:  #362a2d;         /* headers / sidebars            */
  --bg-input:#2a2e36;         /* text‑input boxes              */
  --bg-hover:#1b1d1f;         /* row hover highlight           */

  --fg-primary:  #b9b9ba;     /* main text colour              */
  --fg-secondary:##787878;     /* muted text / timestamps       */
  --fg-accent:   #e2b188;     /* links & interactive icons     */	
  --fg-accent-hover:#fab77f;  /* link hover                    */
  --fg-danger:   #f87171;     /* errors / warnings (red-ish)   */

  --border: #594432;          /* subtle border colour          */

  --radius: 6px;
  --transition: .15s ease-in-out;
}

/* ---------- Global ---------------------------------------------------- */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background:
      linear-gradient(rgba(11,15,22,.62), rgba(11,15,22,.62)),
      url(/eientei_night.jpg) center / cover no-repeat fixed;
  color: var(--fg-primary);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-secondary); }

/* ---------- Links ----------------------------------------------------- */
a,
a:visited,
.intro a.email span.name {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--fg-accent-hover);
}

/* ---------- Buttons --------------------------------------------------- */
.post-btn,
.hide-thread-link {
  color: var(--fg-accent) !important;
}
.post-btn:hover,
.hide-thread-link:hover {
  color: var(--fg-accent-hover) !important;
}

/* ---------- Posts ----------------------------------------------------- */
div.post.reply {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
div.post.reply.highlighted {
  background: var(--bg-hover);
}

div.post.reply div.body a {
  color: var(--fg-accent);
}

/* ---------- Headings / Subject --------------------------------------- */
.intro span.subject {
  color: var(--fg-danger);
}

/* Form / Table headers */
form table tr th,
table.modlog tr th {
  background-color: var(--bg-input);
  color: var(--fg-primary);
  font-weight: 600;
  border: 1px solid var(--border);
  padding: 2px 8px;
  font-size: 10pt;
}

/* ---------- Pagination ------------------------------------------------ */
div.pages {
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
div.pages a,
div.pages a:visited {
  color: var(--fg-accent);
}
div.pages a.selected {
  color: var(--fg-primary);
  font-weight: 600;
}

/* ---------- Board Header --------------------------------------------- */
header div.subtitle,
h1 {
  color: var(--fg-primary);
  text-align: center;
}

/* ---------- Horizontal rules ----------------------------------------- */
hr {
  border: none;
  border-top: 1px solid var(--border);
  height: 0;
}

/* ---------- Board list ------------------------------------------------ */
div.boardlist {
  color: var(--fg-secondary);
}
div.boardlist a {
  color: var(--fg-accent);
}

/* ---------- Ban pages ------------------------------------------------- */
div.ban {
  background: var(--bg-main);
  border: 1px solid var(--border);
}
div.ban h2 {
  background: #384b63;
  color: var(--fg-primary);
}
div.ban p {
  color: var(--fg-primary);
}

/* ---------- Options / Alerts ----------------------------------------- */
#options_div,
#alert_div {
  background: var(--bg-main);
  border: 1px solid var(--border);
}

/* Desktop‑style board list header strip */
.desktop-style div.boardlist:nth-child(1) {
  background-color: var(--bg-alt);
}

div.blotter {
  color: var(--fg-accent);
  font-weight: bold;
  text-align: center;
}

#blotterContainer {
  color: var(--fg-accent);
  text-align: center;
}

/* ---------- Inputs & Textareas --------------------------------------- */
input,
textarea,
select {
  background: var(--bg-input);
  color: var(--fg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  transition: border var(--transition), background var(--transition);
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--fg-accent);
  background: var(--bg-hover);
}

/* Buttons */
button,
input[type=submit],
input[type=button] {
  background: var(--fg-accent);
  color: #04101e;
  border: none;
  border-radius: var(--radius);
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
button:hover,
input[type=submit]:hover,
input[type=button]:hover {
  background: var(--fg-accent-hover);
}

/* ---------- Misc ------------------------------------------------------ */
img {
  max-width: 100%;
}

/* High‑DPI retina avatars */
.avatar {
  image-rendering: -webkit-optimize-contrast;
}

div.post.reply.highlighted {
	background: #2a2e36;
	border-color: #1b1d1f;
}

a:link:hover {
	color: #d00;
}

.subtitle {
  color: inherit !important;
}

.theme-catalog div.thread:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}

div.banner {
  background-color: #d46c7e;
}

.intro span.name {
  color: #d46c7e;
  font-weight: bold;
}

span.trip {
  color: #d46c7e;
}

span.quote {
  color: #a2cd2e;
}

/* File selector */
.dropzone {
  cursor: default;
  margin: auto;
  padding: 0px 4px;
  text-align: center;
  min-height: 50px;
  max-height: 140px;
  transition: 0.2s;
  background-color: var(--bg-input);
  overflow-y: auto;
}

.dropzone .file-hint {
  color: var(--fg-accent);
  cursor: pointer;
  position: relative;
  margin-bottom: 5px;
  padding: 10px 0px;
  top: 5px;
  transition: 0.2s;
  border: 2px dashed rgb(125 125 125);
}