/* Orange / anthracite theme. Reference URL pending confirmation; no external assets. */
:root {
  color-scheme: dark;
  --accent: #ff7900;
  --accent-hover: #ff922e;
  --green: var(--accent);
  --muted: #b0b1bb;
  --line: #34353c;
  --surface: #1b1c21;
  --ink: #f5f5f7;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #111216;
}
body { background: linear-gradient(145deg, #1d1712 0, #111216 420px); }
button {
  color: var(--ink);
  background: #24252b;
  border-color: #484951;
  border-radius: 4px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
button:hover { background: #303139; border-color: #85858e; filter: none; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
button:disabled { opacity: .55; }
.primary { color: #17120c; background: var(--accent); border-color: var(--accent); font-weight: 750; }
.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.danger { background: #942e2c; border-color: #c5554e; color: #fff; }
.quiet { background: transparent; border-color: transparent; color: #c7c8d0; }
.quiet:hover { background: #ffffff0a; border-color: #55565e; color: #fff; }

aside {
  background: #0a0b0e;
  color: #dedee4;
  border-right: 1px solid #2d2b28;
  border-top: 4px solid var(--accent);
  padding-top: 30px;
}
.brand { align-items: center; gap: 11px; }
.brand-icon {
  color: #17120c;
  background: var(--accent);
  width: 37px;
  height: 42px;
  border-radius: 3px;
  font-weight: 800;
  flex-shrink: 0;
}
.brand-copy { display: grid; gap: 5px; }
.brand-name {
  font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .3px;
  white-space: nowrap;
}
.brand-name b { color: var(--accent); }
.brand-caption { font-size: 9px; color: #babac4; letter-spacing: 2px; font-weight: 600; }
.subtle { color: #9899a4; margin-top: 42px; letter-spacing: 1.8px; }
.nav {
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  background: transparent;
  color: #bcbcc7;
  padding: 14px 12px;
}
.nav:hover { background: #1a1b20; border-color: transparent; border-left-color: #6f471e; }
.nav.active { background: #ff790017; border-left-color: var(--accent); color: #ff9a42; }
.aside-bottom { color: #dbdbe1; border-top: 1px solid #282930; padding-top: 22px; }
.aside-bottom p { color: #9d9da8; }
.dot { background: var(--accent); box-shadow: 0 0 0 4px #ff790015; }

header { border-bottom-color: #34312e; color: #adaeb8; }
#username { color: #e8e8ee; }
.heading { margin-top: 42px; }
h1, h2, h3 { font-family: Bahnschrift, "Segoe UI", Arial, sans-serif; color: #fafafa; }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.7px; }
.eyebrow { color: #ff9840; font-size: 10px; letter-spacing: 2.2px; }
.stat, .panel, .card { background: var(--surface); border-color: var(--line); border-radius: 6px; }
.stat { position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; width: 30px; height: 3px; top: 0; left: 24px; background: var(--accent); }
.stat span { color: #b4b5bf; letter-spacing: 1px; font-size: 10px; font-weight: 650; }
.stat strong { color: #fafafa; font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: 34px; }
.card { box-shadow: 0 4px 22px #00000015; }
.card .actions { border-color: var(--line); }
.app-icon { background: #ff790012; color: #ff963b; border: 1px solid #78502b; border-radius: 5px; }
code { color: #c3c3cf; }
.published { color: #ffac64; background: #ff790019; border: 1px solid #7e4c22; }
.draft { color: #e7d5a2; background: #a2863520; border: 1px solid #655632; }
.withdrawn { color: #ffaea6; background: #c8493d20; border: 1px solid #82463f; }
.badge { font-size: 11px; font-weight: 650; }

.table-wrap { background: var(--surface); border-color: var(--line); border-radius: 6px; }
th { background: #222329; color: #bdbdc7; font-size: 10px; letter-spacing: 1px; }
td { border-color: #34353c; color: #ededf1; }
tbody tr:hover { background: #ffffff03; }
footer { color: #a1a1ac; }
.empty { border-top: 2px solid #77502d; }
.login { border-top: 3px solid var(--accent); box-shadow: 0 20px 65px #00000035; }
.login .primary { margin-top: 5px; }

label { color: #e9e9ed; }
input, textarea, select {
  color: #f5f5f7;
  background: #111216;
  border-color: #54555e;
  border-radius: 4px;
}
input::placeholder, textarea::placeholder { color: #92939e; opacity: 1; }
input:focus, textarea:focus, select:focus { outline-color: var(--accent); border-color: var(--accent); }
input[readonly] { background: #25262b; color: #c6c7cf; }
input[type="file"] { padding: 9px; }
input[type="file"]::file-selector-button {
  background: #33343d;
  color: #fff;
  border: 1px solid #64656e;
  border-radius: 3px;
  padding: 8px 12px;
  margin-right: 12px;
  cursor: pointer;
}
dialog { background: #1b1c21; color: #f2f2f5; border-color: #56504a; border-top: 3px solid var(--accent); border-radius: 7px; box-shadow: 0 24px 90px #000b; }
dialog::backdrop { background: #050609b8; backdrop-filter: blur(3px); }
.dialog-heading { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dialog-actions { padding-top: 15px; border-top: 1px solid var(--line); }
#notice, #dialog-error { background: #382817; color: #ffca93; border-color: #956433; border-radius: 4px; }
#notice.success { background: #28301e; color: #d8e9af; border-color: #667b40; }
pre { background: #101115; color: #c8c9d3; border: 1px solid #303139; border-radius: 4px; }
progress { accent-color: var(--accent); }
.inbox-help { padding: 24px; display: grid; gap: 16px; margin-bottom: 20px; }
.inbox-help > code { color: #ffad67; user-select: all; }
.inbox-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.inbox-title { margin: 28px 0 16px; }
::selection { background: #ff79004d; color: #fff; }

@media (max-width: 1000px) {
  .brand { gap: 8px; }
  .brand-icon { width: 30px; height: 37px; }
  .brand-name { font-size: 17px; }
  .brand-caption { font-size: 8px; letter-spacing: 1.4px; }
}
@media (max-width: 700px) {
  aside { border-right: 0; border-bottom: 1px solid #36312b; padding-top: 20px; }
  .brand-icon { width: 34px; height: 38px; }
  .brand-name { font-size: 20px; }
  .brand-caption { font-size: 9px; letter-spacing: 1.8px; }
  .nav { padding: 10px 12px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 3px 3px 0 0; }
  .nav.active { border-bottom-color: var(--accent); }
  h1 { font-size: 29px; }
  .stat::before { left: 12px; width: 23px; }
  .stat span { font-size: 9px; letter-spacing: .65px; }
  .stat strong { font-size: 29px; }
  .heading { margin-top: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}

/* Original Actoracer logo supplied by the owner. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.brand-logo { display: block; width: 100%; max-width: 300px; height: auto; box-sizing: border-box; background: #fff; padding: 10px 8px; border-radius: 3px; }