* { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: #efeff3;
    color: #1a1a1c;
    font-family: "Slabo 27px", Georgia, serif;
    font-size: 12px;
    line-height: 1.41;
    letter-spacing: -0.2px;
    font-weight: 400;
  }
  h1, h2, h3 { font-weight: 600; text-transform: none; margin: 0; }
  a { color: #201e94; text-decoration: underline; }
  a:hover { color: #7f22d7; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 10px; }

  /* HEADER */
  .site-header {
    background: #0f0e4c;
    border-bottom: 1px solid #bebec8;
  }
  .header-inner {
    max-width: 1120px; margin: 0 auto; padding: 6px 10px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
  }
  .site-logo { height: 32px; width: auto; display: block; }
  .main-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .main-nav a {
    color: #ffffff; text-decoration: none; font-size: 12px;
    border-bottom: 1px dotted transparent;
  }
  .main-nav a:hover { border-bottom-color: #ffffff; }
  .nav-search { color: #ffffff; font-size: 13px; margin-left: 6px; }
  .hamburger { display: none; color: #fff; font-size: 18px; background: none; border: none; cursor: pointer; }

  /* BREADCRUMB / TITLE BLOCK */
  .title-block {
    background: #ffffff;
    border: 1px solid #bebec8;
    margin-top: 14px;
    padding: 10px 12px;
  }
  .crumb-inline {
    font-size: 11px; color: #5e5e6e; margin-bottom: 4px;
  }
  .crumb-inline a { color: #201e94; }
  .thread-title { font-size: 18px; color: #1a1a1c; margin-bottom: 6px; }
  .title-sub {
    font-size: 11px; color: #5e5e6e;
    display: flex; gap: 10px; flex-wrap: wrap;
  }
  .badge-chip {
    background: #7f22d7; color: #fff; font-size: 10px;
    padding: 1px 6px; display: inline-block;
  }
  .viewing-line {
    font-size: 11px; color: #5e5e6e; border-top: 1px solid #bebec8;
    margin-top: 8px; padding-top: 5px;
  }

  /* POSTS */
  .thread-body { margin-top: 12px; }
  .post {
    display: flex; border: 1px solid #bebec8; background: #ffffff;
    margin-bottom: 8px;
  }
  .post:nth-child(even) { background: #f2f2f3; }
  .post-meta {
    width: 150px; flex-shrink: 0;
    border-right: 1px solid #bebec8;
    padding: 8px; font-size: 11px; color: #5e5e6e;
  }
  .post-meta .username { color: #1a1a1c; font-weight: 600; font-size: 12px; margin-bottom: 3px; }
  .post-meta .post-date { margin-bottom: 4px; }
  .post-meta .post-num { color: #7f22d7; font-size: 10px; }
  .post-body { flex: 1; padding: 8px 12px; font-size: 12px; }
  .post-body p { margin: 0 0 8px 0; }
  .post-body p:last-child { margin-bottom: 0; }
  blockquote {
    margin: 0 0 8px 0; padding: 4px 8px;
    border-left: 3px solid #bebec8; background: #f2f2f3;
    color: #5e5e6e; font-size: 11px;
  }
  .post-avatar {
    width: 58px; flex-shrink: 0; border-left: 1px solid #bebec8;
    padding: 8px; text-align: center;
  }
  .avatar-img {
    width: 36px; height: 36px; object-fit: cover; border: 1px solid #bebec8;
  }
  .avatar-initial {
    width: 36px; height: 36px; border: 1px solid #bebec8;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: #ffffff; margin: 0 auto;
  }
  .post-actions {
    margin-top: 6px; font-size: 11px; color: #5e5e6e;
  }
  .post-actions i { margin-right: 3px; }
  .sig {
    border-top: 1px solid #bebec8; margin-top: 8px; padding-top: 5px;
    font-size: 11px; color: #5e5e6e; font-style: italic;
  }

  /* THREAD STATS AT BOTTOM */
  .thread-stats {
    border: 1px solid #bebec8; background: #ffffff;
    margin-top: 14px; padding: 10px 12px;
    display: flex; gap: 22px; flex-wrap: wrap;
    font-size: 11px; color: #5e5e6e;
  }
  .thread-stats strong { color: #1a1a1c; }

  .reply-box {
    border: 1px solid #bebec8; background: #ffffff; margin-top: 14px;
    padding: 10px 12px;
  }
  .reply-box textarea {
    width: 100%; min-height: 70px; font-family: inherit; font-size: 12px;
    border: 1px solid #bebec8; padding: 6px;
  }
  .reply-box button {
    margin-top: 6px; background: #0f0e4c; color: #fff; border: 1px solid #0f0e4c;
    padding: 5px 14px; font-size: 12px; cursor: pointer;
  }

  /* FOOTER */
  .site-footer {
    background: #0f0e4c; color: #ffffff; margin-top: 20px;
    padding: 16px 10px; text-align: center;
  }
  .footer-icons { display: flex; justify-content: center; gap: 16px; margin-bottom: 8px; }
  .footer-icons a { color: #ffffff; font-size: 16px; text-decoration: none; }
  .footer-icons a:hover { color: #7f22d7; }
  .footer-legal { font-size: 10px; color: #cfcfe0; }

  @media (max-width: 720px) {
    .main-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 0; max-height: 60vh; overflow-y: auto; }
    .main-nav.open { display: flex; }
    .hamburger { display: block; }
    .post { flex-wrap: wrap; }
    .post-meta { width: 100%; border-right: none; border-bottom: 1px solid #bebec8; display: flex; gap: 10px; align-items: center; }
    .post-avatar { width: 100%; border-left: none; border-top: 1px solid #bebec8; text-align: left; }
  }