
:root{
  --deep:#1F1424;
  --warm:#8E2C5F;
  --metal:#EFC9DD;
  --font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
}

html[data-skin="old"]{
  --page:#e8e8e8; --panel:#fff; --text:#141414; --border:#c8ccd0; --line:#dcdfe2;
  --subhead:#f0f1f3; --alt:#f7f7f8; --muted:#666c72;
  --shadow:none;
  /* The nav strip is near-black in the original regardless of the site's own hue — that
     black-bar-under-a-coloured-band is the shape people recognise, so it is kept literal.
     Which means the band above it has to READ as a band: several sites have a near-black
     --deep, and header-on-nav then merged into one dark mass and lost the anatomy. So the
     band is --deep lifted toward slate — same hue direction, clearly separate tone. */
  --navbar:#12161c;
  --band:color-mix(in srgb,var(--deep) 58%,#6f8697);
}
html[data-skin="old"] #headerMover{background:var(--band)}
html[data-skin="old"] .logoMark{background:#fff;color:var(--warm)}
@supports not (color:color-mix(in srgb,red,#fff)){
  html[data-skin="old"] #headerMover{background:var(--deep)}
}
html[data-skin="old"] body{font-size:15px;line-height:1.5}
html[data-skin="old"] .sectionMain,html[data-skin="old"] .message,
html[data-skin="old"] .calc,html[data-skin="old"] .infoBlock,
html[data-skin="old"] .pageNode .card{border-radius:0;box-shadow:none}
html[data-skin="old"] .textCtrl,html[data-skin="old"] .calc input,
html[data-skin="old"] .headerSearch input,html[data-skin="old"] .headerSearch button,
html[data-skin="old"] .btn,html[data-skin="old"] .calc .out,
html[data-skin="old"] .PageNav a,html[data-skin="old"] .PageNav span{border-radius:2px}
html[data-skin="old"] .avatar{border-radius:2px}
html[data-skin="old"] .avatar.l{border-radius:3px}
html[data-skin="old"] .nodeIcon{border-radius:50%}
html[data-skin="old"] .logoMark{border-radius:3px}
html[data-skin="old"] .navTabs{background:var(--navbar);box-shadow:none}
html[data-skin="old"] .navTabs a.tab{color:#dfe6ec;font-weight:600;border-bottom:0;
  border-radius:3px 3px 0 0;padding:10px 15px}
html[data-skin="old"] .navTabs a.tab:hover{background:rgba(255,255,255,.10)}
html[data-skin="old"] .navTabs a.tab.selected{background:var(--page);color:var(--warm)}
html[data-skin="old"] .navToggle{color:#dfe6ec}
/* Orange-on-white section headings, the loudest trait of the old board. */
html[data-skin="old"] .sectionHeader{background:var(--panel);color:var(--warm);
  font-size:17px;font-weight:700;padding:10px 12px}
html[data-skin="old"] .subHeading{background:var(--subhead);color:var(--text);
  text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700}
html[data-skin="old"] .titleBar h1{color:var(--warm);font-size:27px;font-weight:700;
  letter-spacing:0}
html[data-skin="old"] .pageNode h1{color:var(--warm)}
html[data-skin="old"] .pageNode h2{color:var(--text)}
html[data-skin="old"] .pageNode .kick{color:var(--muted)}
html[data-skin="old"] .messageUserBlock{background:var(--subhead)}
html[data-skin="old"] .node,html[data-skin="old"] .discussionListItem{padding:10px 12px}
html[data-skin="old"] .node:hover,html[data-skin="old"] .discussionListItem:hover,
html[data-skin="old"] .memberListItem:hover{background:#f4f8fb}
html[data-skin="old"] .brandTable th{text-transform:none;letter-spacing:0;font-size:12.5px;
  color:var(--text)}
html[data-skin="old"] .footerLegal{background:#0c1014}
