* { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: #e4e6ea;
    color: #1a1c25;
    font-family: "Lora", Georgia, serif;
    font-size: 13px;
    line-height: 1.39;
    letter-spacing: 0.3px;
  }
  a { color: #ba3550; text-decoration: underline; }
  a:hover { color: #d16436; }
  h1, h2, h3 { font-family: "Lora", Georgia, serif; font-weight: 700; margin: 0; }

  /* Header */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: #293563;
    border-bottom: 1px solid #bcc0d1;
    padding: 6px 14px;
  }
  .header-inner {
    max-width: 1160px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
  }
  .site-logo { height: 34px; width: auto; display: block; }
  .top-nav {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  }
  .top-nav a {
    color: #fbfbfb; text-decoration: none;
    font-size: 12px; letter-spacing: 0.3px;
    border-bottom: 1px dotted transparent;
  }
  .top-nav a:hover { border-bottom-color: #fbfbfb; }
  .header-search {
    display: flex; align-items: center; gap: 4px;
  }
  .header-search input[type="text"] {
    font-family: "Lora", Georgia, serif;
    font-size: 12px; padding: 3px 6px;
    border: 1px solid #bcc0d1;
    background: #fbfbfb; color: #1a1c25;
    width: 120px;
  }
  .header-search button {
    background: #ba3550; color: #fbfbfb; border: 1px solid #bcc0d1;
    padding: 3px 7px; font-size: 12px; cursor: pointer;
  }
  .drawer-toggle {
    display: none;
    background: #d16436; color: #fbfbfb; border: 1px solid #bcc0d1;
    font-size: 12px; padding: 4px 8px; cursor: pointer;
  }

  /* Breadcrumb */
  .crumb-row {
    max-width: 1160px; margin: 0 auto;
    padding: 5px 14px 0 14px;
    font-size: 11px; color: #6d7182;
  }
  .crumb-row a { color: #6d7182; text-decoration: underline; }
  .crumb-sep { margin: 0 4px; }

  /* Layout wrap */
  .page-body {
    max-width: 1160px; margin: 10px auto 0 auto;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 0 14px 20px 14px;
  }
  .sidebar {
    width: 200px; flex: 0 0 200px;
    background: #fbfbfb;
    border: 1px solid #bcc0d1;
  }
  .sidebar h3 {
    background: #293563; color: #fbfbfb;
    font-size: 12px; padding: 6px 8px; margin: 0;
    font-weight: 700;
  }
  .sidebar ul { list-style: none; margin: 0; padding: 0; }
  .sidebar li { border-top: 1px solid #bcc0d1; }
  .sidebar li:first-child { border-top: none; }
  .sidebar a {
    display: block; padding: 6px 9px; font-size: 12px;
    color: #1a1c25; text-decoration: none;
  }
  .sidebar a:hover { background: #f1f2f4; color: #ba3550; }
  .sidebar .active a { color: #ba3550; font-weight: 700; }

  .content {
    flex: 1 1 auto; min-width: 0;
    background: #fbfbfb;
    border: 1px solid #bcc0d1;
    padding: 12px 14px;
  }

  .thread-title {
    font-size: 19px;
    color: #1a1c25;
    margin-bottom: 4px;
  }
  .thread-meta {
    font-size: 11px; color: #6d7182;
    padding-bottom: 8px; margin-bottom: 10px;
    border-bottom: 1px solid #bcc0d1;
  }
  .thread-meta span { margin-right: 10px; }

  /* Post cards */
  .post-card {
    border: 1px solid #bcc0d1;
    margin-bottom: 10px;
  }
  .post-card:nth-child(odd) { background: #fbfbfb; }
  .post-card:nth-child(even) { background: #f1f2f4; }

  .post-user-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #bcc0d1;
    background: rgba(41,53,99,0.03);
    flex-wrap: wrap;
  }
  .avatar {
    width: 48px; height: 48px; flex: 0 0 48px;
    border: 1px solid #bcc0d1;
    object-fit: cover;
    display: block;
  }
  .avatar-initial {
    width: 48px; height: 48px; flex: 0 0 48px;
    border: 1px solid #bcc0d1;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 17px; color: #fbfbfb;
  }
  .user-meta-block { display: flex; flex-direction: column; gap: 1px; }
  .username {
    font-weight: 700; font-size: 13px; color: #1a1c25;
  }
  .username-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .author-tag { font-style: italic; font-size: 11px; color: #d16436; }
  .rank-tag {
    font-size: 10.5px; color: #ba3550;
    border: 1px solid #bcc0d1; padding: 0 4px;
    background: #fbfbfb;
  }
  .join-info { font-size: 11px; color: #6d7182; }
  .post-date { margin-left: auto; font-size: 11px; color: #6d7182; white-space: nowrap; }

  .post-body {
    padding: 10px 12px;
    font-size: 13px;
  }
  .post-body p { margin: 0 0 8px 0; }
  .post-body p:last-child { margin-bottom: 0; }

  blockquote.quoted {
    margin: 0 0 8px 0;
    padding: 6px 9px;
    border-left: 3px solid #d16436;
    background: #e4e6ea;
    color: #6d7182;
    font-size: 12.5px;
  }
  blockquote.quoted .q-who {
    display: block; font-size: 11px; color: #ba3550;
    margin-bottom: 3px; font-style: italic;
  }

  .sig-line {
    margin-top: 10px; padding-top: 6px;
    border-top: 1px solid #bcc0d1;
    font-size: 11.5px; color: #6d7182; font-style: italic;
  }

  /* Footer */
  .site-footer {
    background: #293563; color: #fbfbfb;
    border-top: 1px solid #bcc0d1;
    padding: 14px;
    font-size: 12px;
  }
  .footer-inner {
    max-width: 1160px; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 20px;
  }
  .footer-col { flex: 1 1 260px; }
  .footer-col h4 {
    font-size: 12.5px; margin: 0 0 6px 0;
    color: #fbfbfb; border-bottom: 1px solid #4a5586;
    padding-bottom: 4px;
  }
  .footer-col p { color: #c9cce0; margin: 0 0 6px 0; line-height: 1.5; }
  .footer-col ul { list-style: none; margin: 0; padding: 0; }
  .footer-col ul li { margin-bottom: 4px; }
  .footer-col a { color: #ffd9c7; text-decoration: underline; }
  .newsletter-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
  .newsletter-row input[type="email"] {
    font-family: "Lora", Georgia, serif;
    padding: 4px 6px; border: 1px solid #bcc0d1; font-size: 12px;
    flex: 1 1 150px;
  }
  .newsletter-row button {
    background: #6d7182; color: #fbfbfb; border: 1px solid #bcc0d1;
    padding: 4px 10px; font-size: 12px; cursor: not-allowed;
  }
  .footer-bottom {
    max-width: 1160px; margin: 10px auto 0 auto;
    border-top: 1px solid #4a5586;
    padding-top: 8px;
    font-size: 11px; color: #9aa0c2;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  }

  @media (max-width: 760px) {
    .page-body { flex-direction: column; }
    .sidebar {
      width: 100%; flex: 1 1 auto;
      display: none;
      max-height: 60vh; overflow-y: auto;
    }
    .sidebar.open { display: block; }
    .drawer-toggle { display: inline-block; }
    .header-search input[type="text"] { width: 90px; }
    .post-date { margin-left: 0; }
    .username-line { flex-wrap: wrap; }
  }