/* Forum design system: forum/index.php, forum/post/thread_view_page.php,
   user/public/user.php. Own scoped tokens under .fr-page, same reasoning
   as blog.css/service-detail.css: this file only assumes base-reset.css +
   vendored Font Awesome are loaded, nothing from another page-family's
   stylesheet. */

.fr-page {
  --fr-blue: #1b75bc; --fr-blue-deep: #125a94;
  --fr-green: #39b54a; --fr-green-deep: #27913a;
  --fr-orange: #f7941e; --fr-orange-deep: #d9780a;
  --fr-red: #d64545; --fr-red-deep: #b53838;
  --fr-ink: #1b2130; --fr-slate: #414750; --fr-muted: #667085;
  --fr-card: #ffffff; --fr-border: #e6eaf0; --fr-bg: #f6f8fb;
  --fr-radius: 16px;
  --fr-shadow: 0 1px 2px rgba(27,33,48,0.06), 0 12px 30px rgba(27,33,48,0.10);
  background: #fff;
}
.fr-container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.fr-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- Masthead ---------- */
.fr-masthead {
  background: linear-gradient(135deg, #16233a 0%, #1c2f4d 55%, #163a5c 100%);
  padding: 52px 0 40px; text-align: center; position: relative; overflow: hidden;
}
.fr-masthead::after {
  content: ""; position: absolute; inset: auto -8% -70% auto;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,148,30,0.16), transparent 70%);
  pointer-events: none;
}
.fr-masthead-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  color: #ffd9a3; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 16px;
}
.fr-masthead h1 { color: #fff; font-size: 34px; margin: 0 0 10px; position: relative; }
.fr-masthead p { color: rgba(255,255,255,0.75); font-size: 15px; max-width: 560px; margin: 0 auto; position: relative; }

.fr-section { padding: 48px 0; }

/* ---------- New thread form ---------- */
.fr-new-thread {
  background: var(--fr-card); border: 1px solid var(--fr-border); border-radius: var(--fr-radius);
  box-shadow: var(--fr-shadow); padding: 28px 30px; margin-bottom: 40px;
}
.fr-new-thread h2 { font-size: 18px; color: var(--fr-ink); margin: 0 0 18px; display: flex; align-items: center; gap: 9px; }
.fr-field { margin-bottom: 16px; }
.fr-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--fr-slate); margin-bottom: 6px; }
.fr-field input, .fr-field textarea {
  width: 100%; border: 1px solid var(--fr-border); border-radius: 10px;
  padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--fr-ink);
  box-sizing: border-box;
}
.fr-field textarea { resize: vertical; min-height: 110px; }
.fr-field input:focus, .fr-field textarea:focus { outline: none; border-color: var(--fr-blue); }
.fr-submit-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, var(--fr-orange), var(--fr-orange-deep)); color: #fff;
  border: none; font-size: 14px; font-weight: 700; padding: 12px 26px; border-radius: 10px;
  cursor: pointer; box-shadow: 0 8px 20px rgba(247,148,30,0.3); transition: transform 0.15s ease;
}
.fr-submit-btn:hover { transform: translateY(-2px); }
.fr-login-prompt {
  background: var(--fr-bg); border: 1px dashed var(--fr-border); border-radius: 12px;
  padding: 18px 22px; text-align: center; color: var(--fr-muted); font-size: 14px;
}
.fr-login-prompt a { color: var(--fr-blue); font-weight: 700; text-decoration: none; }
.fr-login-prompt a:hover { text-decoration: underline; }

/* ---------- Thread list ---------- */
.fr-thread-list { display: flex; flex-direction: column; gap: 16px; }
.fr-thread-card {
  background: var(--fr-card); border: 1px solid var(--fr-border); border-radius: 14px;
  padding: 22px 26px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fr-thread-card:hover { transform: translateY(-3px); box-shadow: var(--fr-shadow); }
.fr-thread-card h3 { margin: 0 0 8px; font-size: 17px; }
.fr-thread-card h3 a { color: var(--fr-ink); text-decoration: none; }
.fr-thread-card h3 a:hover { color: var(--fr-blue); }
.fr-thread-excerpt { color: var(--fr-muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 12px; }
.fr-thread-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12.5px; color: var(--fr-muted); }
.fr-thread-meta a { color: var(--fr-blue); text-decoration: none; font-weight: 600; }
.fr-thread-meta a:hover { text-decoration: underline; }
.fr-thread-meta i { color: var(--fr-orange); margin-right: 4px; }
.fr-empty { text-align: center; padding: 50px 20px; color: var(--fr-muted); }

/* ---------- Pagination ---------- */
.fr-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; }
.fr-pagination a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  border: 1px solid var(--fr-border); border-radius: 10px; background: var(--fr-card);
  color: var(--fr-slate); text-decoration: none; font-size: 13px; font-weight: 600; padding: 0 10px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.fr-pagination a:hover { border-color: var(--fr-blue); color: var(--fr-blue); }
.fr-pagination a.active { background: var(--fr-blue); border-color: var(--fr-blue); color: #fff; }

/* ---------- Thread detail ---------- */
.fr-breadcrumb { font-size: 12.5px; color: var(--fr-muted); margin-bottom: 18px; }
.fr-breadcrumb a { color: var(--fr-blue); text-decoration: none; }
.fr-breadcrumb a:hover { text-decoration: underline; }
.fr-post-tag {
  display: inline-block; background: var(--fr-bg); color: var(--fr-blue);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.fr-post h1 { font-size: 27px; color: var(--fr-ink); margin: 0 0 16px; line-height: 1.3; }
.fr-author-block { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.fr-author-block img, .fr-avatar-fallback {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.fr-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--fr-blue); color: #fff; font-weight: 700; font-size: 16px;
}
.fr-author-name { font-weight: 700; color: var(--fr-ink); text-decoration: none; }
.fr-author-name:hover { color: var(--fr-blue); }
.fr-post-date { font-size: 12.5px; color: var(--fr-muted); }
.fr-post-body {
  font-size: 15.5px; line-height: 1.75; color: var(--fr-slate);
  white-space: pre-line; margin-bottom: 28px;
}

.fr-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.fr-vote-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--fr-border); background: var(--fr-card); color: var(--fr-slate);
  font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: 999px;
  cursor: pointer; transition: all 0.15s ease; text-decoration: none;
}
.fr-vote-btn.like.active { background: var(--fr-green); border-color: var(--fr-green); color: #fff; }
.fr-vote-btn.dislike.active { background: var(--fr-red); border-color: var(--fr-red); color: #fff; }
.fr-vote-btn:hover { border-color: var(--fr-blue); }
.fr-view-count { margin-left: auto; font-size: 12.5px; color: var(--fr-muted); display: flex; align-items: center; gap: 6px; }

/* ---------- Comments ---------- */
.fr-comments-head { font-size: 19px; color: var(--fr-ink); margin: 0 0 20px; }
.fr-comment {
  border: 1px solid var(--fr-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px;
}
.fr-comment-body { font-size: 14px; color: var(--fr-slate); line-height: 1.65; margin: 10px 0 0; white-space: pre-line; }
.fr-comment-form { margin-top: 26px; }
.fr-comment-form textarea {
  width: 100%; border: 1px solid var(--fr-border); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; font-family: inherit; min-height: 90px; resize: vertical; box-sizing: border-box;
}
.fr-comment-form textarea:focus { outline: none; border-color: var(--fr-blue); }

/* ---------- Public profile page ---------- */
.fr-profile-hero { text-align: center; margin-bottom: 8px; }
.fr-profile-hero img, .fr-profile-hero .fr-avatar-fallback {
  width: 96px; height: 96px; font-size: 32px; margin: 0 auto 16px;
}
.fr-profile-hero h1 { color: #fff; font-size: 26px; margin: 0 0 6px; }
.fr-profile-hero .fr-profile-username { color: rgba(255,255,255,0.7); font-size: 13.5px; }
.fr-profile-meta { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; color: rgba(255,255,255,0.75); font-size: 13px; }
.fr-profile-meta i { color: var(--fr-orange); margin-right: 5px; }
.fr-profile-bio { max-width: 640px; margin: 18px auto 0; color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.6; position: relative; }
.fr-profile-legacy-badge {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2); color: #ffd9a3; font-size: 11.5px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; margin-top: 14px;
}
.fr-profile-section-head { font-size: 19px; color: var(--fr-ink); margin: 0 0 18px; display: flex; align-items: center; gap: 9px; }
.fr-profile-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.fr-profile-list-item {
  background: var(--fr-card); border: 1px solid var(--fr-border); border-radius: 10px;
  padding: 14px 18px; font-size: 13.5px;
}
.fr-profile-list-item a { color: var(--fr-ink); font-weight: 700; text-decoration: none; }
.fr-profile-list-item a:hover { color: var(--fr-blue); }
.fr-profile-list-item .fr-profile-list-date { color: var(--fr-muted); font-size: 12px; margin-left: 8px; }
.fr-profile-list-item .fr-profile-comment-on { color: var(--fr-muted); }

@media (max-width: 600px) {
  .fr-masthead h1 { font-size: 26px; }
  .fr-new-thread { padding: 22px 20px; }
  .fr-thread-card { padding: 18px 20px; }
  .fr-view-count { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-thread-card, .fr-submit-btn, .fr-vote-btn { transition: none; }
}