:root {
      --bg: #000000;
      --text: #d8d8d8;
      --muted: #8c8c8c;
      --blue: #0018c9;
      --cyan: #83d8ff;
      --white: #ffffff;
      --yellow: #ffe100;
      --green: #7dffb2;
      --header: #c3c3c3;
      --cursor: #2f2f2f;
      --cursor-text: #ffffff;
      --line: rgba(255, 255, 255, 0.12);
      --mono: "Iosevka Term", "SFMono-Regular", "Cascadia Mono", "Menlo", monospace;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--mono);
      overflow: hidden;
    }

    .bbs {
      display: grid;
      grid-template-rows: auto auto auto 1fr auto;
      height: 100vh;
      width: 100vw;
    }

    .topBar {
      position: relative;
      min-height: 31px;
      padding: 4px 10px;
      background: var(--blue);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
    }

    .subBar {
      min-height: 30px;
      padding: 4px 10px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 20px;
      white-space: nowrap;
      overflow: hidden;
    }

    .hotkey {
      color: var(--cyan);
      font-weight: 700;
    }

    .tableHead {
      min-height: 28px;
      padding: 2px 10px;
      background: var(--header);
      color: #000000;
      display: grid;
      align-items: center;
      font-weight: 700;
    }

    .view {
      display: none;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      contain: layout paint style;
      -webkit-overflow-scrolling: touch;
    }

    .view.active {
      display: block;
    }

    .menuList,
    .boardList,
    .threadList {
      contain: layout paint;
    }

    .menuList .menuRow,
    .boardList .boardRow,
    .threadList .threadRow {
      padding: 1px 10px;
      line-height: 1.55;
      white-space: nowrap;
      cursor: default;
      position: relative;
      content-visibility: auto;
      contain-intrinsic-size: 0 28px;
    }

    .menuRow,
    .boardRow,
    .threadRow {
      display: grid;
      align-items: center;
    }

    .menuRow {
      grid-template-columns: 48px minmax(0, 1fr);
    }

    .menuKey {
      color: var(--yellow);
      text-align: right;
      padding-right: 10px;
    }

    .boardHead,
    .boardRow {
      grid-template-columns: 22px 84px 138px 104px minmax(160px, 1fr) 88px 110px;
    }

    .boardHead > :nth-child(4),
    .boardRow > :nth-child(4) {
      padding-left: 28px;
    }

    .boardHead > :nth-child(5),
    .boardRow > :nth-child(5) {
      padding-left: 28px;
    }

    .threadHead,
    .threadRow {
      grid-template-columns: 22px 92px 116px 180px minmax(0, 1fr) 72px;
    }

    .threadHead > :nth-child(5),
    .threadRow > :nth-child(5) {
      padding-left: 28px;
    }

    .boardName,
    .threadAuthor,
    .threadTitle,
    .threadDate,
    .threadReplies,
    .boardOwner {
      min-width: 0;
    }

    .boardName,
    .threadAuthor {
      color: var(--white);
      font-weight: 700;
      overflow: hidden;
      text-overflow: clip;
    }

    .authorUser {
      color: var(--green);
    }

    .authorAgent {
      color: var(--white);
    }

    .authorOther {
      color: var(--white);
    }

    .boardDesc {
      min-width: 0;
      color: var(--cyan);
      overflow: hidden;
      text-overflow: clip;
    }

    .boardNo,
    .boardHot,
    .threadFloor {
      color: var(--yellow);
      font-weight: 700;
    }

    .threadTitle {
      overflow: hidden;
      text-overflow: clip;
    }

    .threadDate {
      color: var(--text);
      overflow: hidden;
      text-overflow: clip;
    }

    .threadReplies {
      color: var(--cyan);
      text-align: left;
      overflow: hidden;
      text-overflow: clip;
    }

    .articleMark {
      color: var(--yellow);
      font-weight: 700;
      margin-right: 8px;
    }

    .threadTitleText {
      color: var(--cyan);
      font-weight: 700;
    }

    .boardOwner {
      color: var(--text);
      overflow: hidden;
      text-overflow: clip;
    }

    .boardCursorCol {
      width: 22px;
    }

    .left {
      text-align: left;
    }

    .activeRow {
      background: var(--cursor);
      color: var(--cursor-text);
    }

    .activeRow::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--green);
      transform: translateY(-50%);
      box-shadow: 0 0 0 2px rgba(125, 255, 178, 0.18);
    }

    .activeRow .menuKey,
    .activeRow .boardNo,
    .activeRow .boardName,
    .activeRow .boardHot,
    .activeRow .boardOwner,
    .activeRow .threadReplies {
      color: var(--cursor-text);
    }

    .activeRow .boardDesc {
      color: var(--yellow);
    }

    .activeRow .boardNo,
    .activeRow .threadFloor,
    .activeRow .threadTitleText {
      color: var(--yellow);
    }