:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #dfe5ef;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2f6fed;
  --primary-strong: #1f55c8;
  --green: #138a63;
  --orange: #d97706;
  --red: #d64545;
  --shadow: 0 10px 28px rgba(31, 41, 55, 0.08);
  --radius: 8px;
}

.cat-movie { --cat: #4f7cff; }
.cat-series { --cat: #38a169; }
.cat-4k { --cat: #805ad5; }
.cat-anime { --cat: #ed64a6; }
.cat-short-drama { --cat: #dd6b20; }
.cat-books { --cat: #2b6cb0; }
.cat-music { --cat: #00a3c4; }
.cat-software { --cat: #718096; }
.cat-games { --cat: #e53e3e; }
.cat-study { --cat: #319795; }
.cat-documentary { --cat: #6875f5; }
.cat-variety { --cat: #d69e2e; }
.cat-assets { --cat: #48bb78; }
.cat-mixed { --cat: #a0aec0; }
.cat-media-tools { --cat: #f56565; }
.cat-media-tutorials { --cat: #4299e1; }
.cat-game-picks { --cat: #9f7aea; }
.cat-education-picks { --cat: #0f766e; }
.cat-notice { --cat: #2d3748; }
.cat-4k-series { --cat: #2563eb; }
.cat-bounty { --cat: #f59e0b; }
.cat-welfare { --cat: #16a34a; }
.cat-comics { --cat: #db2777; }
.cat-copyright { --cat: #475569; }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(223, 229, 239, 0.9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.header-inner {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f6fed, #14a085);
  color: #fff;
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
}

.main-nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
}

.main-nav a,
.admin-link {
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  padding: 8px 10px;
}

.main-nav a:hover,
.main-nav a.active,
.admin-link:hover {
  background: #eef4ff;
  color: var(--primary);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.login-link,
.user-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  padding: 7px 12px;
}

.app-shell {
  min-height: calc(100vh - 180px);
  padding: 24px 0 0;
}

.seo-prerender {
  padding: 8px 0 28px;
}

.seo-prerender .container {
  display: grid;
  gap: 14px;
}

.seo-prerender h1 {
  margin: 0;
}

.seo-prerender nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seo-prerender ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.page-main {
  min-width: 0;
}

.page-side {
  display: grid;
  gap: 14px;
}

.single-column {
  max-width: 640px;
}

.hero-panel,
.forum-hero,
.page-title,
.profile-card,
.post-card,
.thread-card,
.search-page,
.info-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 20px;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.12), rgba(19, 138, 99, 0.12)),
    var(--surface);
}

.hero-panel h1,
.page-title h1,
.forum-hero h1,
.post-card h1 {
  margin: 4px 0 8px;
}

.primary-soft,
.side-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  padding: 9px 13px;
}

.primary-soft:hover,
.side-action:hover {
  background: var(--primary-strong);
}

.forum-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.forum-card {
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}

.forum-card:hover {
  border-color: var(--cat);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.forum-card strong,
.forum-card small,
.forum-card em {
  display: block;
}

.forum-card small,
.forum-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.forum-card.compact {
  min-height: 74px;
  box-shadow: none;
}

.thread-card {
  overflow: hidden;
  margin-top: 18px;
}

.side-forums {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.side-forums a {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #374151;
  font-size: 13px;
  padding: 5px 8px;
}

.site-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.site-stats span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 8px;
}

.site-stats strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.forum-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

.forum-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.forum-modal-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}

.forum-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(135deg, #2f6fed, #14a085);
  color: #fff;
}

.forum-modal-head h2,
.forum-modal-head p {
  margin: 0;
}

.forum-modal-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.icon-btn {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 8px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 22px;
}

.timeline-list {
  display: grid;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}

.timeline-item > span {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--primary);
}

.timeline-item a {
  font-weight: 800;
}

.timeline-item p {
  margin: 6px 0;
  color: #4b5563;
}

.page-title,
.search-page,
.forum-hero,
.profile-card {
  margin-bottom: 16px;
  padding: 18px;
}

.search-page {
  display: grid;
  gap: 12px;
}

.hot-tags,
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tag-option {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: #374151;
  font-size: 14px;
  padding: 7px 10px;
}

.tag-option:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.forum-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-color: color-mix(in srgb, var(--cat) 34%, var(--line));
}

.post-card {
  padding: 20px;
}

.breadcrumb,
.post-meta {
  color: var(--muted);
  font-size: 13px;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.post-content {
  color: #374151;
  font-size: 16px;
}

.hidden-content {
  border: 1px dashed #b8c8e6;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--primary);
  font-weight: 800;
  margin: 16px 0;
  padding: 14px;
}

.comment-box {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 18px;
}

.comment-box textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.comment-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.comment-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.rank-panels,
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rank-list.large li {
  grid-template-columns: 32px minmax(0, 1fr);
}

.info-card {
  padding: 18px;
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.simple-table th,
.simple-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
}

.public-login {
  margin-top: 24px;
}

.public-auth-form,
.thread-create-form {
  display: grid;
  gap: 12px;
}

.public-auth-form label,
.thread-create-form label {
  display: grid;
  gap: 6px;
  color: #374151;
  font-weight: 700;
}

.public-auth-form input,
.thread-create-form input,
.thread-create-form select,
.thread-create-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
}

.public-auth-form button {
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  padding: 11px;
}

.auth-links {
  margin-top: 14px;
}

.profile-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.profile-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f6fed, #14a085);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.profile-tabs {
  margin-bottom: 14px;
}

.wallet-panel {
  padding: 18px;
}

.checkbox-line {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px;
}

.admin-link {
  border: 1px solid var(--line);
  background: var(--surface);
  white-space: nowrap;
}

.top-band {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.12), rgba(19, 138, 99, 0.12)),
    var(--surface);
}

.top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  padding: 28px 0;
}

.intro-block {
  min-width: 0;
}

.site-tag,
.eyebrow {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: 34px;
  line-height: 1.2;
}

h2 {
  margin-bottom: 0;
  font-size: 22px;
}

h3 {
  font-size: 16px;
}

.intro-block p {
  max-width: 760px;
  color: #4b5563;
}

.search-box {
  display: flex;
  max-width: 720px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 13px 14px;
}

.search-box button,
.admin-form button,
.button-row button {
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: 11px 16px;
}

.search-box button {
  border-radius: 0;
}

.search-box button:hover,
.admin-form button:hover,
.button-row button:hover {
  background: var(--primary-strong);
}

.admin-virtual-login {
  width: 100%;
  margin-top: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  padding: 11px 16px;
}

.admin-virtual-login:hover {
  background: #dbeafe;
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.stat-strip span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  padding: 7px 10px;
}

.stat-strip strong {
  color: var(--text);
  font-size: 18px;
}

.notice-board,
.side-panel,
.thread-list,
.editor-panel,
.table-panel,
.login-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.notice-board {
  padding: 16px;
}

.board-title,
.side-title {
  margin-bottom: 10px;
  font-weight: 800;
}

.notice-item {
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
}

.notice-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.notice-item p,
.muted {
  color: var(--muted);
  font-size: 14px;
}

.section {
  padding: 26px 0 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.ghost-btn,
.text-link,
.small-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--primary);
  font-weight: 700;
  padding: 8px 12px;
}

.text-link {
  display: inline-flex;
  align-items: center;
}

.ghost-btn:hover,
.text-link:hover,
.small-btn:hover {
  border-color: #b8c8e6;
  background: #eef4ff;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.category-card {
  display: flex;
  min-height: 86px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 14px;
  text-align: left;
}

.category-card:hover,
.category-card.active {
  border-color: var(--cat);
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.1);
  transform: translateY(-1px);
}

.category-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cat) 16%, white);
  color: var(--cat);
  font-weight: 900;
}

.category-card strong,
.category-card small {
  display: block;
}

.category-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  padding-top: 26px;
}

.thread-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tab-group {
  display: flex;
  gap: 8px;
}

.tab-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: #374151;
  font-weight: 700;
  padding: 8px 12px;
}

.tab-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.toolbar-status {
  color: var(--muted);
  font-size: 14px;
}

.thread-list {
  overflow: hidden;
}

.thread-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 108px;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px;
}

.thread-row:first-child {
  border-top: 0;
}

.thread-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: #eef4ff;
  color: var(--primary);
  font-weight: 900;
}

.thread-main {
  min-width: 0;
}

.thread-title-line {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}

.thread-title-line a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-title-line a:hover {
  color: var(--primary);
}

.mini-badge,
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e9f8f1;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
}

.mini-badge.danger {
  background: #fff1e6;
  color: var(--orange);
}

.thread-main p {
  margin: 6px 0;
  overflow: hidden;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.thread-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.thread-counts {
  display: grid;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.thread-counts strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}

.side-column {
  display: grid;
  align-content: start;
  gap: 14px;
}

.side-panel {
  padding: 14px;
}

.quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.quick-links a {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  padding: 9px;
  text-align: center;
}

.quick-links a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.rank-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.rank-list span {
  display: grid;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.rank-list a {
  overflow: hidden;
  color: #374151;
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rank-list a:hover {
  color: var(--primary);
}

.pick-section {
  padding-top: 30px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pick-card,
.tool-card,
.tutorial-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.pick-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #dbe4f0;
}

.pick-body {
  padding: 14px;
}

.pick-body h3 {
  margin: 8px 0 6px;
  line-height: 1.35;
}

.pick-body p {
  min-height: 44px;
  color: #4b5563;
  font-size: 14px;
}

.media-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tool-card {
  padding: 14px;
}

.tool-card span {
  display: inline-flex;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #fff4e6;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.tool-card strong,
.tool-card p {
  display: block;
}

.tool-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.tutorial-list {
  display: grid;
  gap: 10px;
}

.tutorial-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
}

.tutorial-item span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}

.site-footer {
  margin-top: 34px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 24px 0 82px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.footer-inner p {
  margin: 5px 0 0;
  color: var(--muted);
}

.footer-records {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.footer-records a,
.footer-records span {
  color: var(--muted);
}

.footer-records a:hover {
  color: var(--primary);
}

.footer-sep {
  color: #cbd5e1;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-links a {
  color: var(--muted);
}

.footer-links a:hover {
  color: var(--primary);
}

.mobile-bottom {
  display: none;
}

.empty-state {
  border: 1px dashed #b9c6d8;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

.hidden {
  display: none !important;
}

.admin-page {
  background: #f6f8fc;
}

.admin-shell {
  padding-top: 24px;
}

.login-panel {
  max-width: 460px;
  margin: 24px auto;
  padding: 22px;
}

.admin-head,
.table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-tabs {
  display: inline-flex;
  gap: 8px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 4px;
}

.admin-tabs button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #475569;
  font-weight: 800;
  padding: 8px 14px;
}

.admin-tabs button b {
  display: inline-grid;
  min-width: 22px;
  min-height: 18px;
  place-items: center;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  margin-left: 5px;
}

.admin-tabs button.active {
  background: #e9f4ff;
  color: var(--primary);
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

.editor-panel,
.table-panel {
  padding: 16px;
}

.admin-form {
  display: grid;
  gap: 12px;
}

.admin-form label {
  display: grid;
  gap: 6px;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
}

.admin-form textarea {
  resize: vertical;
}

.compact-form {
  margin-top: 16px;
}

.switch-row,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.switch-row label {
  display: inline-flex;
  grid-template-columns: auto;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.switch-row input {
  width: auto;
}

.button-row button {
  flex: 1;
}

.button-row .ghost-btn,
.admin-form .ghost-btn {
  background: #fff;
  color: var(--primary);
}

.form-message {
  min-height: 22px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.form-message[data-type="success"] {
  color: var(--green);
}

.form-message[data-type="error"] {
  color: var(--red);
}

.system-form {
  display: grid;
  gap: 16px;
}

.system-card {
  box-shadow: 0 8px 22px rgba(31, 41, 55, 0.05);
}

.watermark-preview {
  position: relative;
  display: grid;
  min-height: 86px;
  align-content: end;
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.12), rgba(15, 118, 110, 0.10)),
    #f8fafc;
  color: #334155;
  padding: 14px;
}

.watermark-preview::after {
  content: attr(data-watermark);
  position: absolute;
  right: 14px;
  bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.54);
  color: #fff;
  font-weight: 900;
  padding: 6px 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.watermark-preview span,
.watermark-preview em {
  position: relative;
  z-index: 1;
  font-style: normal;
}

.watermark-preview span {
  font-weight: 900;
}

.watermark-preview em {
  color: #64748b;
  font-size: 13px;
}

.watermark-preview.is-empty::after {
  background: rgba(100, 116, 139, 0.50);
}

.admin-repeat-list {
  display: grid;
  gap: 10px;
}

.admin-repeat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.category-repeat-list .admin-repeat-row {
  grid-template-columns: 120px minmax(120px, 1fr) 72px 112px 80px minmax(180px, 1.4fr) auto;
}

.admin-repeat-row label {
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.admin-repeat-row input,
.admin-repeat-row textarea {
  width: 100%;
  margin-top: 5px;
  border: 1px solid #dbe5f2;
  border-radius: 6px;
  background: #fff;
  padding: 8px 9px;
}

.admin-repeat-row .wide {
  min-width: 0;
}

.admin-repeat-row .inline-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
}

.admin-repeat-row .inline-check input {
  width: auto;
  margin: 0;
}

.admin-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-message-list {
  display: grid;
  gap: 10px;
}

.admin-message-item {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.admin-message-item.unread {
  border-color: #93c5fd;
  background: #f8fbff;
}

.admin-message-item.high {
  border-left: 4px solid #d64545;
}

.admin-message-type {
  border-radius: 999px;
  background: #e9f4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 8px;
  text-align: center;
}

.admin-message-body {
  min-width: 0;
}

.admin-message-body div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-message-body strong {
  color: #0f172a;
}

.admin-message-body time,
.admin-message-body p {
  color: #64748b;
  font-size: 12px;
}

.admin-message-body p {
  margin: 5px 0 0;
}

.admin-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.admin-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  background: #f8fafc;
  color: #374151;
  font-size: 13px;
}

.admin-table td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.small-btn {
  margin: 0 4px 4px 0;
  padding: 6px 9px;
}

.danger-btn {
  border-color: #ffd1d1;
  color: var(--red);
}

.danger-btn:hover {
  background: #fff1f1;
}

@media (max-width: 1040px) {
  .top-grid,
  .content-layout,
  .admin-grid,
  .page-layout {
    grid-template-columns: 1fr;
  }

  .category-repeat-list .admin-repeat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .category-grid,
  .forum-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 22px, 1180px);
  }

  .header-inner {
    min-height: 58px;
  }

  .brand {
    min-width: auto;
  }

  .brand small,
  .main-nav {
    display: none;
  }

  .admin-link,
  .header-actions {
    margin-left: auto;
    font-size: 13px;
  }

  .admin-link {
    padding: 7px 9px;
  }

  .admin-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .admin-repeat-row,
  .category-repeat-list .admin-repeat-row,
  .admin-message-item {
    grid-template-columns: 1fr;
  }

  .admin-repeat-row .small-btn,
  .admin-message-actions .small-btn {
    width: 100%;
  }

  .admin-message-actions {
    justify-content: stretch;
  }

  h1 {
    font-size: 28px;
  }

  .top-grid {
    padding: 22px 0;
  }

  .search-box {
    display: grid;
  }

  .search-box button {
    border-top: 1px solid var(--line);
  }

  .category-grid,
  .forum-grid,
  .pick-grid,
  .media-layout,
  .tool-grid,
  .rank-panels,
  .info-grid,
  .forum-modal-body {
    grid-template-columns: 1fr;
  }

  .hero-panel,
  .forum-hero,
  .profile-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .thread-toolbar,
  .footer-inner,
  .tutorial-item,
  .admin-head,
  .table-head {
    align-items: stretch;
    flex-direction: column;
  }

  .tab-group {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .tab-btn {
    flex: 0 0 auto;
  }

  .thread-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .thread-counts {
    grid-column: 2;
    display: flex;
    text-align: left;
  }

  .thread-counts strong {
    display: inline;
    margin-right: 3px;
  }

  .mobile-bottom {
    position: static;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
  }

  .mobile-bottom a {
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 3px;
    text-align: center;
  }

  .mobile-bottom a:hover {
    color: var(--primary);
  }
}

.forum-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}

.forum-left {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.left-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.forum-list-card {
  padding: 8px;
}

.left-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  padding: 9px 10px;
}

.left-nav-item:hover,
.left-nav-item.active {
  background: #eef4ff;
  color: var(--primary);
}

.left-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cat) 14%, white);
  color: var(--cat);
  font-size: 12px;
}

.quick-user-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 12px 14px;
}

.quick-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid #20b486;
  border-radius: 50%;
  background: #eefbf6;
  color: #0b7f5f;
  font-weight: 900;
}

.quick-user-card small {
  color: var(--muted);
}

.quick-action-grid {
  display: grid;
  width: 100%;
  gap: 8px;
  margin-top: 8px;
}

.quick-action-grid a {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: #374151;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
}

.mobile-search-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 10px;
}

.index-header-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 9px 12px;
  box-shadow: var(--shadow);
}

.round-post-btn {
  display: grid;
  min-width: 54px;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
}

.notice-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(244, 114, 182, 0.55);
  border-radius: 8px;
  background: rgba(244, 114, 182, 0.78);
  color: #fff;
  font-weight: 700;
  margin-bottom: 8px;
  padding: 7px 10px;
}

.notice-alert button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.home-banner {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #111827;
  box-shadow: var(--shadow);
  color: #fff;
}

.home-banner img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  opacity: 0.78;
}

.home-banner div {
  position: absolute;
  right: 22px;
  bottom: 18px;
  left: 22px;
}

.home-banner strong {
  display: block;
  font-size: 28px;
  line-height: 1.15;
}

.home-banner p {
  max-width: 720px;
  margin: 7px 0 0;
  color: rgba(255,255,255,.88);
}

.forum-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px;
  box-shadow: var(--shadow);
}

.forum-strip > div {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.forum-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 9px;
}

.sticky-toolbar {
  position: sticky;
  top: 64px;
  z-index: 5;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  padding: 12px;
  backdrop-filter: blur(10px);
}

.rich-thread-row {
  grid-template-columns: 54px minmax(0, 1fr) 88px;
}

.thread-author {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.thread-author .thread-avatar,
.post-author-row .thread-avatar {
  border-radius: 50%;
}

.thread-title-line {
  align-items: baseline;
}

.thread-title-line a {
  white-space: normal;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 12px;
}

.pager a,
.pager span {
  display: grid;
  min-width: 34px;
  min-height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 9px;
}

.pager a.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.site-title-row,
.sign-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.like-pill {
  border-radius: 999px;
  background: #fff1f2;
  color: #e11d48;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.metric-grid span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 9px;
}

.metric-grid strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.side-forum-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.side-forum-grid a {
  display: grid;
  justify-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: #374151;
  min-width: 0;
  padding: 8px 5px;
}

.side-forum-grid span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cat) 14%, white);
  color: var(--cat);
  font-size: 12px;
  font-weight: 900;
}

.side-forum-grid small {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.small-sign {
  padding: 7px 10px;
  white-space: nowrap;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.week-grid span {
  display: grid;
  min-height: 58px;
  place-items: center;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background: #f8fafc;
  color: #9ca3af;
}

.week-grid span.today {
  border: 2px solid var(--primary);
  background: #fff;
  color: var(--primary);
}

.week-grid span.past {
  border-style: solid;
  color: #6b7280;
}

.week-grid b,
.week-grid em {
  font-size: 12px;
  font-style: normal;
}

.mini-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mini-tool-grid button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 5px;
}

.mini-tool-grid span {
  display: block;
  margin-bottom: 3px;
  color: var(--orange);
  font-size: 11px;
}

.rank-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.rank-tabs button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-weight: 800;
  padding: 7px;
}

.rank-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.media-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.media-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.media-preview-card {
  position: relative;
  display: grid;
  min-height: 176px;
  align-content: start;
  gap: 9px;
  overflow: hidden;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06);
  color: #0f172a;
  padding: 16px;
}

.media-preview-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #14b8a6;
}

.media-preview-card:nth-child(2)::before {
  background: #2563eb;
}

.media-preview-card:nth-child(3)::before {
  background: #f97316;
}

.media-preview-card:nth-child(4)::before {
  background: #16a34a;
}

.media-preview-card span,
.media-preview-card em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.media-preview-card strong {
  font-size: 18px;
  line-height: 1.3;
}

.media-preview-card p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.7;
}

.discovery-grid,
.rank-page-grid {
  display: grid;
  gap: 14px;
}

.filter-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  padding: 12px;
}

.sort-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sort-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #374151;
  font-weight: 700;
  padding: 7px 10px;
}

.sort-btn.active,
.tag-option.active {
  border-color: var(--primary);
  background: #eef4ff;
  color: var(--primary);
}

.thread-detail-layout {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
}

.thread-action-rail {
  position: sticky;
  top: 86px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.thread-action-rail button,
.thread-action-rail a {
  display: grid;
  width: 48px;
  min-height: 52px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.thread-action-rail span {
  color: var(--muted);
  font-size: 11px;
}

.thread-action-rail .active,
.post-footer-actions .active {
  border-color: var(--primary);
  background: #eef4ff;
  color: var(--primary);
}

.post-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 14px 0;
  padding: 12px 0;
}

.author-name {
  color: #374151;
  font-weight: 900;
}

.verified {
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 800;
  margin-left: 5px;
  padding: 2px 7px;
}

.post-author-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.resource-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.resource-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
}

.resource-summary span,
.resource-summary strong {
  display: block;
}

.resource-summary span {
  color: var(--muted);
  font-size: 12px;
}

.resource-summary strong {
  margin-top: 3px;
  font-size: 14px;
}

.post-content blockquote {
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: #f8fafc;
  margin: 14px 0;
  padding: 10px 12px;
}

.in-post {
  margin: 10px 0 0;
}

.copyright-box {
  border: 1px dashed #008cff;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  color: #4b5563;
  margin-top: 18px;
  padding: 16px;
}

.copyright-box h3 {
  text-align: center;
}

.copyright-box p {
  margin-bottom: 6px;
  font-size: 14px;
}

.post-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}

.link-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  margin-top: 14px;
  padding: 14px;
}

.link-status-card.bad {
  border-color: #fed7aa;
  background: #fff7ed;
}

.link-status-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.comment-form {
  display: grid;
  gap: 10px;
}

.follow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.follow-grid a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
}

.follow-grid span {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: span 2;
  place-items: center;
  border-radius: 50%;
  background: #eef4ff;
  color: var(--primary);
  font-weight: 900;
}

.follow-grid small {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .forum-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .forum-layout .page-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .forum-layout,
  .page-layout,
  .thread-detail-layout {
    grid-template-columns: 1fr;
  }

  .forum-left,
  .thread-action-rail {
    position: static;
  }

  .forum-left {
    display: none;
  }

  .page-side,
  .forum-layout .page-side {
    grid-template-columns: 1fr;
  }

  .resource-summary,
  .media-board {
    grid-template-columns: 1fr;
  }

  .thread-action-rail {
    grid-template-columns: repeat(3, 1fr);
  }

  .thread-action-rail button,
  .thread-action-rail a {
    width: 100%;
    min-height: 42px;
    border-radius: 8px;
  }
}

@media (max-width: 760px) {
  .forum-strip {
    grid-template-columns: 1fr;
  }

  .home-banner img {
    height: 180px;
  }

  .home-banner strong {
    font-size: 24px;
  }

  .rich-thread-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .thread-counts {
    grid-column: 2;
  }

  .sticky-toolbar {
    top: 58px;
  }

  .side-forum-grid,
  .mini-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .week-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .follow-grid,
  .rank-page-grid,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .link-status-card {
    grid-template-columns: 1fr;
  }

  .mobile-bottom {
    grid-template-columns: repeat(4, 1fr);
  }
}

body {
  background:
    linear-gradient(180deg, #eef3f8 0, #f7f8fb 420px, #f4f6fb 100%);
}

.site-header {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.brand-mark {
  background: linear-gradient(135deg, #2563eb, #0f9f8f);
}

.forum-layout {
  grid-template-columns: 176px minmax(0, 1fr) 292px;
  gap: 16px;
}

.left-card,
.side-panel,
.thread-card,
.post-card,
.home-banner,
.page-title,
.forum-hero,
.search-page,
.profile-card,
.info-card {
  border-color: #d8e2f0;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
}

.left-card-title {
  margin: 4px 6px 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.forum-list-card {
  padding: 10px;
}

.left-nav-item {
  min-height: 38px;
  margin-bottom: 3px;
  color: #334155;
}

.left-nav-item.active {
  background: linear-gradient(135deg, #eef4ff, #f0fdfa);
  box-shadow: inset 3px 0 0 var(--primary);
}

.home-banner {
  min-height: 150px;
  background: #0f172a;
}

.home-banner img {
  height: 178px;
}

.home-banner div {
  right: 20px;
  bottom: 16px;
  left: 20px;
}

.notice-alert {
  background: linear-gradient(135deg, #ec4899, #f97316);
  border: 0;
  box-shadow: 0 10px 22px rgba(236, 72, 153, 0.14);
}

.home-thread-card {
  margin-top: 14px;
}

.feed-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.08), rgba(20, 160, 133, 0.08)),
    #fff;
  padding: 16px;
}

.feed-head h2 {
  margin: 2px 0 4px;
}

.feed-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.feed-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-tabs {
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fafc;
  gap: 4px;
  padding: 4px;
}

.feature-tabs .tab-btn {
  border: 0;
  background: transparent;
  padding: 8px 12px;
}

.feature-tabs .tab-btn.active {
  background: #2563eb;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
}

.rich-thread-row:hover {
  background: #fbfdff;
}

.thread-row,
.rich-thread-row {
  align-items: start;
  padding: 10px 12px;
}

.thread-author {
  align-content: start;
  padding-top: 2px;
}

.thread-title-line {
  gap: 5px;
  font-size: 17px;
  line-height: 1.25;
}

.thread-title-line a {
  color: #0f172a;
  font-weight: 900;
}

.thread-main p {
  margin: 4px 0 5px;
  line-height: 1.45;
}

.thread-meta {
  gap: 5px;
}

.thread-counts {
  align-content: start;
  gap: 5px;
  padding-top: 2px;
}

.mini-badge,
.tag {
  background: #e7f7ef;
  color: #087b55;
}

.mini-badge.danger {
  background: #fff2db;
  color: #b45309;
}

.welcome-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.quick-avatar {
  width: 54px;
  height: 54px;
  border-color: #14a085;
  background: linear-gradient(135deg, #ecfdf5, #e0f2fe);
  color: #087b55;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
}

.quick-stats span {
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  padding: 8px 4px;
  text-align: center;
}

.quick-stats strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
}

.quick-action-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-action-grid.compact a {
  text-align: center;
}

.full-action {
  width: 100%;
  margin-top: 12px;
}

.today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.today-grid a {
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  color: #334155;
  padding: 10px;
}

.today-grid strong,
.today-grid span {
  display: block;
}

.today-grid strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.1;
}

.today-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.metric-grid span,
.week-grid span,
.mini-tool-grid button {
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.forum-strip {
  display: none;
}

.ghost-btn.active {
  border-color: var(--primary);
  background: #eef4ff;
}

.follow-grid .empty-state {
  grid-column: 1 / -1;
}

.forum-filter-table {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.filter-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.filter-row strong {
  color: #475569;
  font-size: 13px;
  line-height: 34px;
  text-align: right;
}

.filter-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sort-spacer {
  flex: 1 1 24px;
}

.sign-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #edf2f7;
  margin-top: 10px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 16px;
  align-items: start;
}

.create-card {
  padding: 0;
}

.create-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(47,111,237,.08), rgba(20,160,133,.08));
  padding: 18px;
}

.create-head h1,
.create-head p {
  margin: 0;
}

.create-head h1 {
  margin: 2px 0 4px;
}

.rich-create-form {
  padding: 18px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.editor-shell {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  padding: 8px;
}

.editor-toolbar button {
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 9px;
}

.editor-shell label {
  padding: 10px;
}

.editor-shell textarea {
  min-height: 260px;
  resize: vertical;
}

.create-options {
  display: grid;
  gap: 8px;
}

.create-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.create-aside {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.rule-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #475569;
  font-size: 14px;
}

.format-list p {
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fafc;
  margin: 0 0 8px;
  padding: 9px;
  color: #475569;
  font-size: 13px;
}

.live-preview strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
}

.live-preview p {
  color: var(--muted);
  font-size: 13px;
}

.verify-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.verify-line input,
.password-panel input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
}

.form-tip {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.compose-upload-panel,
.admin-upload-line {
  display: grid;
  gap: 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

.compose-upload-panel label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.compose-upload-panel input[name="cover"] {
  height: 36px;
  border: 1px solid #d8e2f0;
  border-radius: 6px;
  padding: 0 10px;
}

.image-upload-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  color: #64748b;
  font-size: 12px;
}

.admin-upload-line {
  margin-bottom: 10px;
}

.admin-upload-line .ghost-btn {
  justify-self: start;
}

.resource-body-text {
  margin: 12px 0;
  color: #334155;
  line-height: 1.75;
}

.rich-resource-body > *:first-child {
  margin-top: 0;
}

.rich-resource-body > *:last-child {
  margin-bottom: 0;
}

.rich-resource-body a {
  color: #2563eb;
  font-weight: 700;
}

.rich-resource-body img {
  height: auto;
  border-radius: 6px;
}

.rich-resource-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  overflow: hidden;
}

.rich-resource-body th,
.rich-resource-body td {
  border: 1px solid #dbe5f2;
  padding: 8px 10px;
  text-align: left;
}

.rich-resource-body blockquote {
  margin: 12px 0;
  border-left: 4px solid #2f74ed;
  background: #f8fafc;
  color: #475569;
  padding: 10px 12px;
}

.doulist-item {
  max-width: 920px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fafc;
  margin: 14px 0;
  padding: 14px;
}

.doulist-subject {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
}

.doulist-post {
  width: 108px;
}

.doulist-post img {
  width: 108px;
  min-width: 108px;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: #e5e7eb;
}

.doulist-content {
  min-width: 0;
}

.doulist-title {
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}

.doulist-title a {
  color: #1d4ed8;
  font-size: 20px;
  font-weight: 900;
}

.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rating-bar {
  display: inline-block;
  width: 92px;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.rating-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #f97316);
}

.rating-0 { width: 0; }
.rating-1 { width: 10%; }
.rating-2 { width: 20%; }
.rating-3 { width: 30%; }
.rating-4 { width: 40%; }
.rating-5 { width: 50%; }
.rating-6 { width: 60%; }
.rating-7 { width: 70%; }
.rating-8 { width: 80%; }
.rating-9 { width: 90%; }
.rating-10 { width: 100%; }

.doulist-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.doulist-title span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.douban-card-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 10px;
  color: #334155;
  font-size: 14px;
  table-layout: fixed;
}

.douban-card-table th,
.douban-card-table td {
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  padding: 5px 0;
  vertical-align: top;
  line-height: 1.55;
}

.douban-card-table th {
  width: 52px;
  color: #0f172a;
  font-weight: 900;
  white-space: nowrap;
}

.douban-card-table td {
  color: #334155;
  word-break: break-word;
}

.allstardark {
  position: relative;
  display: inline-block;
  width: 86px;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.allstarlight {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #f97316);
}

.rating-progress {
  width: 86px;
  height: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e5e7eb;
  vertical-align: middle;
}

.rating-progress::-webkit-progress-bar {
  background: #e5e7eb;
  border-radius: 999px;
}

.rating-progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #fbbf24, #f97316);
}

.rating-progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #fbbf24, #f97316);
}

.rating_nums {
  color: #f97316;
  font-weight: 900;
}

.abstract {
  color: #64748b;
  line-height: 1.7;
}

.secret-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.secret-grid span {
  display: grid;
  gap: 3px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.secret-grid b {
  color: #475569;
  font-size: 12px;
}

.secret-grid em {
  color: #0f172a;
  font-style: normal;
  font-weight: 800;
  word-break: break-all;
}

.locked-secret {
  color: #1d4ed8;
}

.visible-secret {
  border-style: solid;
  background: #eff6ff;
}

.comment-item small {
  color: var(--muted);
  font-size: 12px;
}

.profile-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.profile-dashboard div {
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  padding: 14px;
}

.profile-dashboard strong,
.profile-dashboard span {
  display: block;
}

.profile-dashboard strong {
  color: #0f172a;
  font-size: 24px;
}

.profile-dashboard span {
  color: var(--muted);
  font-size: 13px;
}

.recent-panel h2 {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 14px 14px 0;
  font-size: 18px;
}

.wallet-records {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.wallet-records span {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.wallet-records b {
  color: var(--green);
}

.wallet-records em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.password-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.password-panel label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .forum-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .create-layout {
    grid-template-columns: 1fr;
  }

  .create-aside {
    position: static;
  }
}

@media (max-width: 900px) {
  .forum-layout {
    grid-template-columns: 1fr;
  }

  .forum-layout .page-side {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .feed-head {
    grid-template-columns: 1fr;
  }

  .feed-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .feature-tabs {
    overflow-x: auto;
  }

  .create-head {
    align-items: stretch;
    flex-direction: column;
  }

  .create-head .ghost-btn {
    align-self: flex-start;
  }

  .form-grid.two,
  .form-grid.four,
  .secret-grid,
  .profile-dashboard {
    grid-template-columns: 1fr;
  }

  .filter-row {
    grid-template-columns: 1fr;
  }

  .filter-row strong {
    line-height: 1.2;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .home-banner img {
    height: 154px;
  }

  .feed-head {
    padding: 14px;
  }

  .quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Target-style forum refinements */
.container {
  width: min(1290px, calc(100% - 32px));
}

.mobile-search-line {
  display: none;
}

.site-header {
  border-bottom-color: #edf1f6;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: none;
}

.header-inner {
  min-height: 62px;
  gap: 18px;
}

.brand {
  min-width: 188px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1d4ed8, #14b8a6);
}

.main-nav {
  flex: 0 0 auto;
  gap: 12px;
}

.main-nav a {
  padding: 7px 0;
  color: #536171;
}

.main-nav a:hover,
.main-nav a.active {
  background: transparent;
  color: #2563eb;
}

.top-search {
  display: grid;
  grid-template-columns: minmax(0, 170px) 40px;
  height: 34px;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 4px;
  background: #eef2f6;
}

.top-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 12px;
  outline: 0;
}

.top-search button {
  border: 0;
  border-left: 1px solid #dfe5ee;
  background: #eef2f6;
  color: #172033;
  font-size: 17px;
}

.header-publish {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 6px;
  background: #2f74ed;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px;
}

.message-chip {
  color: #536171;
  font-size: 13px;
}

.message-chip b {
  display: inline-grid;
  min-width: 30px;
  min-height: 18px;
  place-items: center;
  border-radius: 999px;
  background: #ffe6ef;
  color: #f01455;
  font-size: 12px;
  margin-left: 4px;
}

.round-icon,
.utility-chip,
.avatar-chip {
  display: inline-flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  background: #eef3f8;
  color: #596779;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.round-icon {
  width: 34px;
  border-radius: 50%;
}

.utility-chip {
  padding: 0 11px;
}

.utility-short {
  display: none;
}

.avatar-chip {
  max-width: 172px;
  border-radius: 999px;
  padding: 0 11px 0 5px;
  background: linear-gradient(135deg, #dcfce7, #e0f2fe);
  color: #0f766e;
  overflow: hidden;
}

.avatar-dot {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.header-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forum-layout {
  grid-template-columns: 206px minmax(0, 1fr) 314px;
  gap: 14px;
}

.forum-left {
  top: 78px;
}

.left-card {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(31, 41, 55, 0.06);
}

.forum-list-card {
  padding: 18px 14px;
}

.left-nav-item {
  min-height: 42px;
  margin-bottom: 4px;
  padding: 8px 13px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
}

.left-nav-item.active {
  background: #e9f4ff;
  box-shadow: inset 3px 0 0 #2f74ed;
  color: #2468d6;
}

.left-icon {
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--cat) 44%, white);
  border-radius: 7px;
  background: #f8fbff;
}

.left-user-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 18px;
  border-radius: 8px;
  background: #edf3fb;
  padding: 16px 10px 14px;
  text-align: center;
}

.left-user-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #86efac, #93c5fd);
  color: #0f766e;
  font-weight: 900;
  margin-top: -28px;
  box-shadow: 0 8px 20px rgba(31, 41, 55, 0.12);
}

.left-user-card strong {
  color: #0f172a;
  font-size: 15px;
}

.left-user-card span,
.left-user-card em {
  color: #3b82f6;
  font-size: 12px;
  font-style: normal;
}

.left-user-links {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}

.left-user-links a {
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 3px;
}

.site-profile-panel {
  overflow: hidden;
  padding: 0;
}

.site-cover {
  height: 130px;
  background:
    linear-gradient(120deg, rgba(59, 130, 246, 0.9), rgba(191, 219, 254, 0.76)),
    url("/assets/resource-board.png") center/cover;
}

.site-logo-card {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 8px solid #fff;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 30px;
  font-weight: 900;
  margin: -28px 0 10px 18px;
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.08);
}

.site-profile-panel .site-title-row,
.site-profile-panel .muted,
.site-profile-panel .metric-grid {
  margin-inline: 18px;
}

.site-profile-panel .muted {
  line-height: 1.9;
  margin-bottom: 12px;
}

.site-title-row strong {
  min-width: 0;
  overflow: hidden;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.metric-grid {
  margin-bottom: 18px;
}

.metric-grid span {
  display: grid;
  min-height: 58px;
  border: 0;
  background: #f1f5f9;
}

.sign-panel {
  overflow: hidden;
  padding: 0;
}

.sign-head {
  min-height: 68px;
  background:
    linear-gradient(120deg, #fff, #e9f2ff 58%, #dbeafe);
  padding: 12px 14px;
}

.sign-panel .week-grid,
.sign-panel .sign-meta {
  margin: 12px 14px;
}

.week-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.week-grid span {
  min-height: 68px;
  border-style: solid;
  background: #f4f4f5;
}

.promo-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.promo-panel a {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #1f2937;
  font-size: 13px;
  text-align: center;
}

.promo-panel span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f74ed, #00c2a8);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.official-zone-panel {
  display: grid;
  gap: 12px;
}

.official-zone-panel .muted {
  margin: -2px 0 2px;
  line-height: 1.7;
}

.sidebar-zone-list {
  display: grid;
  gap: 10px;
}

.sidebar-zone-entry {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 10px;
  text-decoration: none;
}

.sidebar-zone-entry span {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: span 2;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
}

.sidebar-zone-entry strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-zone-entry em {
  display: -webkit-box;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sidebar-zone-entry.game span {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.sidebar-zone-entry.media span {
  background: linear-gradient(135deg, #0f9f8f, #14b8a6);
}

.sidebar-zone-entry.education span {
  background: linear-gradient(135deg, #f97316, #db2777);
}

.sidebar-zone-foot {
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.65;
  padding: 10px;
}

.home-sign-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  border-radius: 8px;
  background:
    linear-gradient(118deg, #fff 0%, #eef6ff 58%, #d7e8ff 100%);
  color: #1f2937;
  margin-bottom: 14px;
  padding: 18px 18px;
}

.home-sign-hero strong,
.home-sign-hero span {
  display: block;
}

.home-sign-hero strong {
  font-size: 19px;
}

.home-sign-hero span {
  color: #64748b;
  margin-top: 4px;
}

.home-zone-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.zone-entry {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 104px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06);
  padding: 14px;
}

.zone-entry span {
  display: grid;
  width: 52px;
  height: 52px;
  grid-row: span 2;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.zone-entry strong {
  color: #0f172a;
  font-size: 17px;
}

.zone-entry em {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.game-entry span {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.media-entry span {
  background: linear-gradient(135deg, #0f9f8f, #14b8a6);
}

.education-entry span {
  background: linear-gradient(135deg, #f97316, #db2777);
}

.home-carousel {
  position: relative;
  overflow: hidden;
  height: 300px;
  border-radius: 8px;
  background: #111827;
  margin-bottom: 14px;
}

.home-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

.home-carousel div {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.home-carousel h1 {
  margin: 0;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 0;
}

.home-carousel p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.86);
}

.home-carousel .home-carousel-caption {
  inset: auto 18px 18px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.home-carousel-caption span {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.28);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 7px 14px;
}

.group-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 6px;
  background: #ddecff;
  color: #475569;
  margin-bottom: 14px;
  padding: 12px 14px;
}

.group-notice button {
  border: 0;
  background: transparent;
  color: #5b8def;
  font-size: 18px;
}

.announcement-board {
  display: grid;
  gap: 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.05);
  margin-bottom: 14px;
  padding: 14px;
}

.announcement-board a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  color: #334155;
}

.announcement-board span {
  border-radius: 4px;
  background: #2f74ed;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 1px 4px;
}

.announcement-board strong {
  overflow: hidden;
  font-weight: 500;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.announcement-board em {
  color: #64748b;
  font-style: normal;
}

.home-thread-card {
  border: 0;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06);
}

.feed-head {
  display: flex;
  justify-content: space-between;
  min-height: 54px;
  border-bottom: 1px solid #e5eaf1;
  background: #fff;
  padding: 0 16px;
}

.feature-tabs {
  border: 0;
  background: transparent;
  gap: 24px;
  padding: 0;
}

.feature-tabs .tab-btn {
  display: grid;
  min-height: 54px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #475569;
  padding: 0;
}

.feature-tabs .tab-btn.active {
  background: transparent;
  box-shadow: inset 0 -2px 0 #2f74ed;
  color: #1d4ed8;
}

.window-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 13px;
}

.thread-row,
.rich-thread-row {
  grid-template-columns: 42px minmax(0, 1fr) 108px;
  gap: 10px;
  min-height: 58px;
  border-top-color: #edf1f6;
  padding: 10px 14px;
}

.thread-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.thread-author small {
  display: none;
}

.thread-title-line {
  gap: 5px;
  font-size: 14px;
}

.thread-title-line a {
  color: #1f2937;
  font-weight: 700;
  white-space: normal;
}

.mini-badge,
.tag {
  border-radius: 6px;
  background: #eef2f7;
  color: #64748b;
  font-size: 12px;
  padding: 1px 5px;
}

.mini-badge {
  background: #e8f1ff;
  color: #2f74ed;
}

.mini-badge.danger {
  background: #fff1e6;
  color: #f97316;
}

.thread-meta {
  margin-top: 4px;
  color: #9aa4b2;
}

.thread-counts {
  align-content: center;
  gap: 4px;
  color: #64748b;
}

.thread-counts span {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.thread-counts b {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.thread-counts strong {
  display: inline;
  color: #334155;
  font-size: 14px;
}

.forum-intro-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.62)),
    color-mix(in srgb, var(--cat) 34%, #334155);
  color: #fff;
  margin-bottom: 14px;
  padding: 28px 22px 20px;
}

.forum-hero-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.forum-intro-hero .category-icon {
  width: 82px;
  height: 82px;
  border: 5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.1);
  color: #60a5fa;
  font-size: 28px;
}

.forum-intro-hero h1 {
  margin: 0 0 12px;
  font-size: 22px;
}

.forum-intro-hero h1 small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
}

.forum-intro-hero p,
.forum-intro-hero em {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-style: normal;
  margin: 0 0 10px;
}

.forum-hero-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 800;
  padding: 12px 14px;
}

.forum-hero-notice button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
}

.forum-filter-card {
  border: 0;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06);
  padding: 18px 20px;
}

.forum-filter-card .filter-row {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
}

.forum-filter-card .filter-row strong {
  color: #64748b;
  font-weight: 500;
}

.forum-filter-card .tag-option,
.forum-filter-card .sort-btn {
  min-height: 28px;
  border-radius: 5px;
  background: #fff;
  font-size: 13px;
  padding: 4px 12px;
}

.forum-filter-card .tag-option.active,
.forum-filter-card .sort-btn.active {
  background: #2f74ed;
  color: #fff;
}

.forum-filter-card .sort-row {
  border-top: 1px solid #edf1f6;
  margin-top: 12px;
  padding-top: 14px;
}

.forum-intro-panel {
  padding: 0;
  overflow: hidden;
}

.forum-intro-cover {
  display: grid;
  min-height: 68px;
  place-items: center;
  background:
    linear-gradient(120deg, rgba(219, 234, 254, 0.95), rgba(255, 255, 255, 0.86)),
    url("/assets/resource-board.png") center/cover;
  color: #475569;
  font-size: 17px;
  font-weight: 800;
}

.forum-intro-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-radius: 8px;
  background: #f1f5f9;
  margin: 18px;
  padding: 12px 6px;
}

.forum-intro-stats span {
  display: grid;
  gap: 4px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.forum-intro-stats strong {
  color: #111827;
  font-size: 18px;
}

.forum-intro-panel p {
  color: #334155;
  line-height: 1.9;
  margin: 0 18px 18px;
}

.forum-master-panel .master-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.forum-master-panel .master-row span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-weight: 900;
}

.search-single-layout {
  max-width: 1080px;
}

.search-wide-card {
  display: grid;
  gap: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
  margin-top: 16px;
  padding: 18px;
}

.search-wide-card .search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
}

.search-wide-card .search-box input {
  height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 3px 0 0 3px;
  padding: 0 12px;
}

.search-wide-card .search-box button {
  border: 0;
  border-radius: 0 3px 3px 0;
  background: #2f74ed;
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.hot-search-line,
.search-range {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hot-search-line strong {
  color: #334155;
}

.hot-pill {
  border-radius: 999px;
  background: #4f8df7;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 18px;
  box-shadow: 0 7px 14px rgba(47, 116, 237, 0.2);
}

.search-range {
  gap: 16px;
}

.search-range label {
  color: #0f172a;
  font-size: 14px;
}

.search-result-card {
  margin-top: 16px;
}

.rank-single-layout {
  display: grid;
  gap: 16px;
  max-width: 900px;
}

.rank-board {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
  margin-top: 16px;
  padding: 18px;
}

.rank-kind-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  border-bottom: 1px solid #edf1f6;
  margin: -4px -2px 18px;
  padding: 0 2px 12px;
}

.rank-kind-tabs button {
  border: 0;
  background: transparent;
  color: #334155;
  font-weight: 800;
}

.rank-kind-tabs button.active {
  color: #2563eb;
}

.rank-board h1 {
  margin: 0 0 14px;
  font-size: 20px;
}

.rank-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.podium-card {
  display: grid;
  gap: 5px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
}

.podium-card span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #2f74ed;
  color: #fff;
  font-weight: 900;
}

.podium-card.rank-1 span {
  background: #f59e0b;
}

.podium-card.rank-2 span {
  background: #64748b;
}

.podium-card.rank-3 span {
  background: #ef4444;
}

.podium-card em {
  color: #64748b;
  font-style: normal;
}

.rank-table {
  display: grid;
}

.rank-table-head,
.rank-table a {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 120px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  min-height: 38px;
}

.rank-table-head {
  color: #64748b;
  font-weight: 800;
}

.rank-table a span {
  color: #64748b;
}

.rank-table a em {
  color: #0f172a;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.topic-rank-board {
  margin-top: 0;
}

.discovery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}

.discovery-main,
.discovery-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.discover-mobile-head {
  display: none;
}

.mobile-only-panel {
  display: none;
}

.discovery-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.discover-card {
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.06);
}

.discover-card h2 {
  min-height: 54px;
  margin: 0;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #edf1f6;
  font-size: 16px;
}

.discover-list {
  display: grid;
  gap: 2px;
  padding: 16px 18px;
}

.discover-list a,
.discover-list div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px dashed #e5eaf1;
  padding: 4px 0;
}

.discover-list a:last-child,
.discover-list div:last-child {
  border-bottom: 0;
}

.discover-list strong {
  min-width: 0;
  overflow: hidden;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-list-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.discover-list-main small {
  min-width: 0;
  overflow: hidden;
  color: #334155;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-list em {
  color: #94a3b8;
  font-style: normal;
  white-space: nowrap;
}

.list-bullet {
  width: 7px;
  height: 7px;
  justify-self: center;
  border-radius: 999px;
  background: #9bbcff;
}

.discover-list .empty-state {
  grid-template-columns: 1fr;
  min-height: 78px;
  place-items: center;
  border: 1px dashed #b8c9e2;
  border-radius: 8px;
  color: #64748b;
  text-align: center;
}

.tiny-avatar {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 900;
}

.active-user-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  padding: 26px 18px;
}

.active-user-row a {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}

.active-user-row span {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: #f8fafc;
  color: #2563eb;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(31, 41, 55, 0.08);
}

.active-user-row strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-user-row em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.active-user-row > .empty-state {
  display: grid;
  grid-column: 1 / -1;
  min-height: 106px;
  place-items: center;
  border: 1px dashed #b8c9e2;
  border-radius: 8px;
  color: #64748b;
  text-align: center;
}

.all-forum-card h2 {
  justify-content: start;
  place-items: center start;
  padding-left: 18px;
}

.discover-forum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.discover-forum-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 132px;
  border: 1px solid #edf1f6;
  border-radius: 4px;
  background: #fff;
  padding: 14px;
}

.discover-forum-card .category-icon {
  width: 58px;
  height: 58px;
  font-size: 20px;
}

.discover-forum-card strong {
  font-size: 18px;
}

.discover-forum-card strong b {
  border-radius: 4px;
  background: #e9f4ff;
  color: #2f74ed;
  font-size: 13px;
  padding: 2px 6px;
}

.discover-forum-card p,
.discover-forum-card small,
.discover-forum-card em {
  color: #64748b;
  font-style: normal;
}

.discover-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  text-align: center;
}

.discover-stats span {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px 8px;
}

.discover-stats b {
  color: #0f172a;
}

.hot-forums {
  display: grid;
  gap: 12px;
}

.hot-forums a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.hot-forums small {
  color: #64748b;
}

.prison-card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
  margin-top: 16px;
}

.prison-card > div:first-child {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #edf1f6;
  min-height: 42px;
  padding: 12px 18px;
}

.prison-card p {
  margin: 0;
  padding: 20px 18px;
}

.prison-list {
  display: grid;
}

.prison-list span {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 120px 110px;
  gap: 10px;
  border-bottom: 1px solid #edf1f6;
  padding: 12px 18px;
}

.prison-list em,
.prison-list i,
.prison-list small {
  color: #64748b;
  font-style: normal;
}

.thread-author-card {
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.thread-author-cover {
  height: 130px;
  background:
    linear-gradient(120deg, rgba(96, 165, 250, 0.72), rgba(219, 234, 254, 0.86)),
    url("/assets/resource-board.png") center/cover;
}

.thread-author-face {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 6px solid #fff;
  border-radius: 50%;
  background: #fff;
  color: #0f172a;
  font-size: 30px;
  font-weight: 900;
  margin: -34px auto 8px;
  box-shadow: 0 10px 20px rgba(31, 41, 55, 0.08);
}

.thread-author-card > strong,
.thread-author-card > span {
  display: block;
}

.thread-author-card > span {
  color: #3b82f6;
  font-size: 12px;
  margin: 6px 0 12px;
}

.thread-author-card .primary-soft {
  margin-inline: auto;
}

.thread-author-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #edf1f6;
  margin-top: 18px;
  padding: 12px;
}

.thread-author-stats span {
  display: grid;
  color: #64748b;
  font-size: 12px;
}

.thread-author-stats b {
  color: #0f172a;
}

.notice-center {
  display: grid;
  gap: 0;
  align-content: start;
}

.notice-center article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 90px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  min-height: 46px;
  padding: 10px 16px;
}

.notice-center article:last-child {
  border-bottom: 0;
}

.notice-center span {
  border-radius: 999px;
  background: #e9f4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  text-align: center;
}

.notice-center em {
  color: #64748b;
  font-style: normal;
  text-align: right;
}

.profile-portal {
  padding-bottom: 34px;
}

.profile-cover-band {
  height: 148px;
  border-bottom: 1px solid #d7e5f7;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(20, 184, 166, 0.14)),
    radial-gradient(circle at 78% 12%, rgba(249, 115, 22, 0.16), transparent 34%),
    #eaf4ff;
}

.profile-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  margin-top: -72px;
}

.profile-left-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

.profile-side-card,
.profile-menu,
.profile-invite-card,
.profile-content-card,
.profile-stat-card {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
}

.profile-side-card {
  display: grid;
  justify-items: center;
  padding: 22px 16px 16px;
  text-align: center;
}

.profile-photo,
.profile-mini-avatar,
.avatar-choice-grid span {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}

.profile-photo {
  width: 86px;
  height: 86px;
  border: 6px solid #fff;
  font-size: 34px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
}

.profile-photo[data-tone="blue"],
.profile-mini-avatar[data-tone="blue"],
.avatar-choice-grid span[data-tone="blue"] {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.profile-photo[data-tone="green"],
.profile-mini-avatar[data-tone="green"],
.avatar-choice-grid span[data-tone="green"] {
  background: linear-gradient(135deg, #0f9f8f, #84cc16);
}

.profile-photo[data-tone="orange"],
.profile-mini-avatar[data-tone="orange"],
.avatar-choice-grid span[data-tone="orange"] {
  background: linear-gradient(135deg, #f97316, #eab308);
}

.profile-photo[data-tone="pink"],
.profile-mini-avatar[data-tone="pink"],
.avatar-choice-grid span[data-tone="pink"] {
  background: linear-gradient(135deg, #db2777, #8b5cf6);
}

.profile-side-card h1 {
  margin: 10px 0 6px;
  font-size: 22px;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  color: #64748b;
  font-size: 12px;
}

.profile-badges span,
.profile-badges b {
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  padding: 3px 8px;
}

.profile-badges b {
  background: #ecfdf5;
  color: #138a63;
}

.profile-side-stats {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid #edf1f6;
  margin-top: 16px;
  padding-top: 14px;
  color: #64748b;
  font-size: 12px;
}

.profile-side-stats b {
  display: block;
  color: #0f172a;
  font-size: 18px;
}

.profile-menu {
  overflow: hidden;
  padding: 6px;
}

.profile-menu a {
  display: block;
  border-radius: 6px;
  color: #334155;
  font-weight: 800;
  padding: 10px 12px;
}

.profile-menu a.active,
.profile-menu a:hover {
  background: #eef4ff;
  color: #2563eb;
}

.profile-invite-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.profile-invite-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.profile-invite-card button,
.profile-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-weight: 800;
  padding: 8px 10px;
}

.profile-invite-card button:first-of-type {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.profile-main-area {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.profile-stat-card {
  display: grid;
  gap: 3px;
  min-height: 96px;
  padding: 16px;
}

.profile-stat-card strong {
  color: #0f172a;
  font-size: 30px;
  line-height: 1;
}

.profile-stat-card span {
  color: #2563eb;
  font-weight: 900;
}

.profile-stat-card em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.profile-content-card {
  min-width: 0;
  overflow: hidden;
}

.card-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf1f6;
  min-height: 52px;
  padding: 0 16px;
}

.card-headline h2,
.invite-reward-card h2 {
  margin: 0;
  font-size: 18px;
}

.card-headline span,
.card-headline a {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.tiny-action {
  min-height: 32px;
  padding: 6px 10px;
}

.invite-reward-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.invite-link-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.invite-link-line span {
  min-width: 0;
  overflow: hidden;
  color: #334155;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-link-line button {
  border: 0;
  border-radius: 8px;
  background: #0f9f8f;
  color: #fff;
  font-weight: 900;
  padding: 8px 12px;
}

.reward-table {
  display: grid;
  border: 1px solid #e5edf7;
  border-radius: 8px;
  overflow: hidden;
}

.reward-table div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 100px;
}

.reward-table div + div {
  border-top: 1px solid #e5edf7;
}

.reward-table span,
.reward-table b {
  padding: 10px 12px;
}

.reward-table b {
  border-left: 1px solid #e5edf7;
  color: #0f172a;
}

.profile-info-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #edf1f6;
  padding: 12px 14px;
}

.profile-info-tabs a {
  border-radius: 999px;
  color: #475569;
  font-weight: 800;
  padding: 7px 12px;
}

.profile-info-tabs a.active,
.profile-info-tabs a:hover {
  background: #2563eb;
  color: #fff;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 6px 16px 16px;
}

.profile-info-grid span {
  border-bottom: 1px dashed #e5edf7;
  color: #475569;
  padding: 10px 0;
}

.profile-info-grid b {
  color: #0f172a;
}

.profile-info-grid em {
  font-style: normal;
}

.activity-feed {
  display: grid;
}

.activity-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid #edf1f6;
  padding: 12px 16px;
}

.activity-item:last-child {
  border-bottom: 0;
}

.profile-mini-avatar {
  width: 38px;
  height: 38px;
}

.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #64748b;
  font-size: 13px;
}

.activity-meta strong {
  color: #0f172a;
}

.activity-action {
  display: inline-block;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  margin: 6px 0;
  padding: 3px 8px;
}

.activity-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #1f2937;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-form-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.profile-form-panel label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-weight: 800;
}

.profile-form-panel input,
.profile-form-panel select,
.profile-form-panel textarea,
.password-panel input {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  padding: 10px 11px;
}

.avatar-choice-grid,
.title-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.avatar-choice-grid button,
.title-choice-grid button {
  display: grid;
  gap: 8px;
  justify-items: center;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-weight: 800;
  padding: 14px 8px;
}

.avatar-choice-grid button.active,
.title-choice-grid button.active {
  border-color: #2563eb;
  background: #eef4ff;
  color: #2563eb;
}

.avatar-choice-grid span {
  width: 48px;
  height: 48px;
}

.credit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.credit-summary span {
  border: 1px solid #e5edf7;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  padding: 14px;
}

.credit-summary b {
  display: block;
  color: #0f172a;
  font-size: 24px;
}

.vapply-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

.vapply-steps span {
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-weight: 800;
  padding: 10px;
  text-align: center;
}

.profile-follow-grid {
  padding: 16px;
}

.profile-notice-card {
  align-content: start;
  align-self: start;
  min-height: 0;
}

.target-auth-card {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
  margin-bottom: 16px;
  overflow: hidden;
}

.auth-card-head {
  position: relative;
  border-bottom: 1px solid #e7edf6;
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.12), rgba(19, 138, 99, 0.10)),
    #fff;
  padding: 24px 26px 18px;
}

.auth-card-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #2f6fed, #138a63);
}

.auth-card-head h1 {
  margin: 5px 0 6px;
  color: #111827;
  font-size: 36px;
  line-height: 1.12;
}

.auth-card-head p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-bottom: 1px solid #edf1f6;
  padding: 12px 18px;
}

.auth-tabs a {
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-weight: 900;
  padding: 9px 10px;
  text-align: center;
}

.auth-tabs a.active {
  border-color: rgba(47, 111, 237, 0.35);
  background: #eef4ff;
  color: #1f55c8;
}

.target-auth-form {
  gap: 14px;
  padding: 20px 26px 12px;
}

.auth-field {
  gap: 7px;
}

.auth-field > span {
  color: #1f2937;
  font-size: 13px;
  font-weight: 900;
}

.target-auth-form input {
  min-height: 44px;
  background: #fbfdff;
}

.target-auth-form input:focus,
.password-field:focus-within,
.verify-line input:focus,
.captcha-line input:focus {
  border-color: rgba(47, 111, 237, 0.65);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
  outline: none;
}

.password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fbfdff;
  overflow: hidden;
}

.password-field input {
  border: 0;
  background: transparent;
  min-width: 0;
}

.password-field input:focus {
  box-shadow: none;
}

.password-field button {
  align-self: stretch;
  border: 0;
  border-left: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  padding: 0 8px;
}

.auth-checkbox {
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.auth-checkbox input {
  min-height: auto;
}

.target-auth-form button[type="submit"] {
  justify-self: stretch;
  min-height: 46px;
  min-width: 0;
  background: linear-gradient(135deg, #2f6fed, #138a63);
  box-shadow: 0 10px 20px rgba(47, 111, 237, 0.18);
}

.target-auth-form button[type="submit"]:hover {
  filter: brightness(0.96);
}

.virtual-login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid #edf1f6;
  background: #fbfdff;
  padding: 14px 26px;
}

.virtual-login-panel strong,
.virtual-login-panel span {
  display: block;
}

.virtual-login-panel strong {
  color: #0f172a;
  font-size: 14px;
}

.virtual-login-panel span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 3px;
}

.virtual-login-panel button {
  min-height: 40px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #0f9f8f;
  color: #fff;
  font-weight: 900;
  padding: 0 14px;
  white-space: nowrap;
}

.virtual-login-panel button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.target-auth-card .auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #edf1f6;
  color: #475569;
  font-weight: 800;
  margin-top: 0;
  padding: 14px 26px 18px;
}

.target-auth-card .auth-links a {
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  padding: 7px 10px;
}

.target-auth-card .auth-links a:hover {
  background: #eef4ff;
  color: #1f55c8;
}

.verify-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 8px;
}

.verify-line input {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  padding: 10px 11px;
}

.verify-line .ghost-btn {
  border: 1px solid #cfdbea;
  border-radius: 8px;
  background: #fff;
  color: #1f55c8;
  font-weight: 900;
  padding: 0 10px;
  white-space: nowrap;
}

.verify-line .ghost-btn.is-waiting {
  color: #64748b;
}

.captcha-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  gap: 8px;
  align-items: stretch;
}

.captcha-line input {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  padding: 10px 11px;
}

.captcha-image-btn {
  display: grid;
  min-width: 0;
  min-height: 44px;
  place-items: center;
  border: 1px solid #cfdbea;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.captcha-image-btn:hover {
  border-color: rgba(47, 111, 237, 0.45);
  background: #f8fbff;
}

.captcha-image-btn:focus-visible {
  border-color: rgba(47, 111, 237, 0.65);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
  outline: none;
}

.captcha-image-btn span {
  display: grid;
  width: 100%;
  height: 44px;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
}

.captcha-image-btn svg {
  display: block;
  width: 132px;
  max-width: 100%;
  height: 44px;
}

.captcha-field.is-loading .captcha-image-btn {
  opacity: 0.72;
}

.captcha-field.is-error .captcha-image-btn {
  border-color: rgba(220, 38, 38, 0.45);
  color: #b42318;
}

.captcha-field.is-verified .captcha-image-btn {
  border-color: rgba(19, 138, 99, 0.35);
  background: #ecfdf5;
}

.public-auth-form .captcha-image-btn,
.target-auth-form .captcha-image-btn {
  border: 1px solid #cfdbea;
  background: #fff;
  color: #475569;
  padding: 0;
}

.public-auth-form .captcha-image-btn:hover,
.target-auth-form .captcha-image-btn:hover {
  border-color: rgba(47, 111, 237, 0.45);
  background: #f8fbff;
}

.auth-status {
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  margin: -2px 0 0;
  padding: 10px 12px;
}

.auth-status.is-success {
  background: #ecfdf5;
  color: #047857;
}

.auth-status.is-error {
  background: #fef2f2;
  color: #b42318;
}

.compliance-page {
  padding-top: 24px;
}

.compliance-card {
  max-width: 860px;
  margin: 0 auto;
}

.compliance-content {
  display: grid;
  gap: 12px;
  padding: 22px 28px 28px;
}

.compliance-content p {
  margin: 0;
  color: #526174;
  font-weight: 700;
  line-height: 1.8;
}

.compliance-records {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #edf1f6;
  margin-top: 6px;
  padding-top: 14px;
}

.compliance-records span {
  border: 1px solid #dbe6f3;
  border-radius: 8px;
  background: #f8fbff;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 10px;
}

.auth-side-panel {
  display: grid;
  gap: 12px;
}

.auth-side-card {
  border-radius: 8px;
  border: 1px solid #dfe7f2;
  background: #f8fafc;
  color: #334155;
  padding: 12px;
}

.auth-side-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.auth-support-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auth-support-list span {
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  padding: 8px;
  text-align: center;
}

.auth-note {
  border-color: rgba(19, 138, 99, 0.24);
  background: #f0fdf4;
}

.auth-side-panel p {
  color: #64748b;
  font-size: 13px;
  margin: 4px 0 0;
}

.ad-coop-page {
  display: grid;
  gap: 16px;
  padding: 22px 0 34px;
}

.ad-hero-panel,
.ad-intro-panel,
.ad-format-card,
.ad-info-card,
.ad-status {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
}

.ad-hero-panel {
  min-height: 210px;
  padding: 34px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(20, 184, 166, 0.11)),
    linear-gradient(90deg, #fff 0, #f8fafc 100%);
}

.ad-hero-panel h1 {
  margin: 8px 0 12px;
  font-size: 38px;
}

.ad-hero-panel p {
  max-width: 760px;
  color: #475569;
  font-size: 16px;
}

.ad-intro-panel {
  display: grid;
  gap: 10px;
  padding: 20px 24px;
}

.ad-intro-panel p {
  margin: 0;
  color: #334155;
  line-height: 1.8;
}

.ad-format-grid,
.ad-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ad-info-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.ad-format-card,
.ad-info-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.ad-format-preview {
  display: grid;
  height: 116px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.ad-format-preview.type-1 {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.ad-format-preview.type-2 {
  background: linear-gradient(135deg, #0f9f8f, #84cc16);
}

.ad-format-preview.type-3 {
  background: linear-gradient(135deg, #f97316, #db2777);
}

.ad-format-card h2,
.ad-info-card h2 {
  margin: 0;
}

.ad-format-card p,
.ad-info-card p,
.ad-info-card li {
  color: #475569;
  margin: 0;
}

.ad-format-card div:last-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ad-format-card span {
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.ad-format-card button {
  justify-self: start;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
  padding: 9px 12px;
}

.ad-info-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.ad-status {
  color: #475569;
  font-weight: 800;
  margin: 0;
  padding: 14px 18px;
}

.public-user-portal .profile-invite-card button.active {
  border-color: #0f9f8f;
  background: #0f9f8f;
  color: #fff;
}

.official-page {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 36px;
}

.official-page a {
  text-decoration: none;
}

.game-zone-topbar,
.edu-top-nav,
.game-focus-card,
.game-screenshot-wall,
.game-category-strip,
.game-list-panel,
.official-side-stack section,
.edu-slider-card,
.edu-notice-card,
.edu-resource-list,
.media-hero-panel,
.media-tool-board,
.media-course-layout main,
.official-locked-card {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
}

.game-zone-topbar,
.edu-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
}

.game-zone-topbar strong,
.edu-top-nav strong {
  color: #0f172a;
  font-size: 20px;
}

.game-zone-topbar nav,
.edu-top-nav nav {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.game-zone-topbar a,
.edu-top-nav a {
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 10px;
}

.game-zone-topbar span {
  color: #64748b;
  font-size: 13px;
}

.game-zone-hero,
.edu-hero-grid,
.game-main-grid,
.edu-layout,
.media-course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  margin-bottom: 14px;
}

.game-focus-card {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  overflow: hidden;
}

.game-focus-card img,
.edu-slider-card img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.game-focus-card > div,
.edu-slider-card > div {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 26px;
}

.game-focus-card h1,
.edu-slider-card h1,
.media-hero-panel h1 {
  margin: 0;
  color: #0f172a;
  font-size: 32px;
}

.game-focus-card p,
.edu-slider-card p,
.media-hero-panel p,
.official-side-stack p {
  color: #475569;
  line-height: 1.8;
}

.game-meta-pills,
.edu-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-meta-pills span,
.edu-tags span {
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.edu-tags em {
  color: #ef4444;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.game-screenshot-wall {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.game-screenshot-wall a {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  border-radius: 8px;
  background: #111827;
}

.game-screenshot-wall img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  opacity: 0.82;
}

.game-screenshot-wall span {
  position: absolute;
  inset-inline: 10px;
  bottom: 8px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.game-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
}

.game-category-strip button,
.game-category-strip a {
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
  padding: 8px 12px;
  text-decoration: none;
}

.game-category-strip a.active,
.edu-top-nav a.active,
.edu-topic-strip a.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.official-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #edf1f6;
  padding: 14px 16px;
}

.official-section-title h2 {
  margin: 0;
}

.official-section-title span {
  color: #64748b;
  font-size: 13px;
}

.game-list-item,
.edu-resource-item,
.media-course-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  padding: 14px 16px;
}

.game-list-item:last-child,
.edu-resource-item:last-child,
.media-course-item:last-child {
  border-bottom: 0;
}

.game-list-item img,
.edu-resource-item img {
  width: 150px;
  height: 92px;
  border-radius: 8px;
  object-fit: cover;
}

.game-list-item h3,
.edu-resource-item h3,
.media-course-item h3 {
  margin: 0 0 6px;
}

.game-list-item p,
.edu-resource-item p {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 14px;
}

.game-list-item > strong {
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  padding: 8px 12px;
}

.game-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.game-download-card {
  display: grid;
  overflow: hidden;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.05);
}

.game-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111827;
}

.game-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .22s ease;
}

.game-download-card:hover .game-card-thumb img {
  transform: scale(1.04);
}

.game-card-thumb span,
.game-card-thumb i {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.game-card-thumb span {
  top: 9px;
  left: 9px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
}

.game-card-thumb i {
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .64);
  color: #fff;
  font-style: normal;
}

.game-card-info {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.game-card-info h3 {
  display: -webkit-box;
  overflow: hidden;
  min-height: 42px;
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.game-card-info p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 40px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.game-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.game-card-footer span {
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 7px;
}

.game-card-footer em {
  margin-left: auto;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.zone-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #edf1f6;
  padding: 14px 16px 16px;
}

.zone-pagination button,
.zone-pagination a {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-weight: 900;
  padding: 8px 12px;
  text-decoration: none;
}

.zone-pagination button:not(:disabled),
.zone-pagination a {
  background: #2563eb;
  color: #fff;
}

.zone-pagination button:disabled {
  color: #94a3b8;
}

.official-side-stack {
  display: grid;
  align-content: start;
  gap: 14px;
}

.official-side-stack h3 {
  margin: 0 0 10px;
}

.official-side-stack ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.official-side-stack li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.official-side-stack li span {
  display: grid;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: #eef4ff;
  color: #2563eb;
  font-weight: 900;
}

.edu-slider-card {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  overflow: hidden;
}

.edu-notice-card {
  padding: 20px;
}

.edu-topic-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.edu-topic-strip a {
  display: grid;
  gap: 5px;
  min-height: 82px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.05);
  padding: 14px;
}

.edu-topic-strip strong {
  font-size: 16px;
}

.edu-topic-strip span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.edu-resource-list {
  overflow: hidden;
}

.edu-resource-item {
  grid-template-columns: 128px minmax(0, 1fr);
}

.edu-resource-item img {
  width: 128px;
  height: 92px;
}

.edu-like-link {
  display: block;
  border-bottom: 1px dashed #e5edf7;
  color: #334155;
  padding: 8px 0;
}

.media-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(59, 130, 246, .1)),
    #fff;
}

.media-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.media-process span {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: #f0fdfa;
  color: #0f766e;
  font-weight: 900;
  padding: 14px;
}

.media-process b {
  color: #14b8a6;
}

.media-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.media-hero-actions a {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 12px;
}

.media-feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.media-feature-strip article {
  display: grid;
  gap: 6px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.05);
  padding: 15px;
}

.media-feature-strip strong {
  color: #0f172a;
  font-size: 16px;
}

.media-feature-strip span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.media-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.media-section-panel {
  overflow: hidden;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
}

.media-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf1f6;
  background: #fbfdff;
  padding: 14px 16px;
}

.media-panel-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.media-panel-head h2 {
  margin: 3px 0 0;
  color: #0f172a;
  font-size: 21px;
}

.media-panel-head em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  padding: 6px 10px;
}

.media-agent-grid,
.media-api-grid,
.media-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.media-command-card,
.media-api-card,
.media-project-slot {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 190px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 14px;
  text-align: left;
  text-decoration: none;
}

.media-command-card,
.media-api-card {
  cursor: pointer;
}

.media-command-card:hover,
.media-api-card:hover,
.media-api-card:focus-visible,
.media-project-slot:hover {
  border-color: #93c5fd;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.09);
  transform: translateY(-1px);
}

.media-api-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

.media-command-card i {
  color: #94a3b8;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.media-command-card span,
.media-api-card span,
.media-project-slot span {
  justify-self: start;
  border-radius: 999px;
  background: #ecfeff;
  color: #0e7490;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
}

.media-command-card strong,
.media-api-card strong,
.media-project-slot strong {
  font-size: 17px;
  line-height: 1.35;
}

.media-command-card p,
.media-api-card p,
.media-project-slot p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
}

.media-step-line,
.media-api-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.media-step-line b,
.media-api-card b {
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 7px;
}

.media-section-panel:nth-child(2) .media-tool-grid button span {
  background: #eef4ff;
  color: #1d4ed8;
}

.media-api-card span {
  background: #fff7ed;
  color: #c2410c;
}

.media-project-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.media-project-slot {
  min-height: 214px;
  text-decoration: none;
}

.media-project-slot em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.media-project-slot.empty {
  background: repeating-linear-gradient(135deg, #fff, #fff 12px, #f8fafc 12px, #f8fafc 24px);
}

.media-project-slot.empty button,
.media-resource-link {
  justify-self: start;
  border: 0;
  border-radius: 8px;
  background: #0f9f8f;
  color: #fff;
  font-weight: 900;
  padding: 8px 12px;
  text-decoration: none;
}

.media-resource-panel .empty-state {
  margin: 16px;
}

.media-project-panel {
  grid-column: 1 / -1;
}

.media-api-panel {
  grid-column: 1 / -1;
}

.media-api-panel .media-api-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.media-section-panel .media-tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-tool-board {
  margin-bottom: 14px;
  overflow: hidden;
}

.media-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.media-tool-grid button {
  display: grid;
  gap: 8px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  padding: 14px;
  text-align: left;
}

.media-tool-grid span {
  justify-self: start;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
}

.media-tool-grid em,
.media-course-item p {
  color: #64748b;
  font-style: normal;
}

.media-course-layout main {
  overflow: hidden;
}

.media-course-item {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.media-course-item > span {
  display: grid;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #eef4ff;
  color: #2563eb;
  font-weight: 900;
}

.media-course-item button {
  border: 0;
  border-radius: 8px;
  background: #0f9f8f;
  color: #fff;
  font-weight: 900;
  padding: 8px 12px;
}

.credit-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  margin: 16px;
  padding: 14px;
}

.credit-action-row strong,
.credit-action-row p {
  display: block;
  margin: 0;
}

.credit-action-row p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
  margin-top: 4px;
}

.official-locked-page {
  padding: 30px 0;
}

.official-locked-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 26px;
}

.official-locked-card .category-icon {
  width: 72px;
  height: 72px;
  font-size: 24px;
}

.official-locked-card h1 {
  margin: 4px 0 8px;
}

.official-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.create-layout {
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 14px;
}

.create-card {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06);
}

.create-head {
  align-items: center;
  min-height: 43px;
  border-bottom: 1px solid #e5eaf1;
  background: #fff;
  padding: 0 18px;
}

.create-head h1 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
}

.compose-rule-link {
  color: #f97316;
  font-size: 13px;
}

.rich-create-form {
  gap: 12px;
  padding: 18px;
}

.compose-alert {
  display: grid;
  min-height: 42px;
  place-items: center;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.compose-alert.warm {
  background: #fff3df;
  color: #ff312e;
}

.compose-alert.green {
  background: #dcfce7;
  color: #0f172a;
}

.compose-title-input input {
  height: 34px;
  border-radius: 3px;
  padding: 6px 10px;
}

.editor-shell {
  border-radius: 0;
}

.rich-editor-shell {
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
}

.editor-toolbar {
  gap: 0;
  background: #fff;
  padding: 0;
}

.editor-toolbar button {
  min-height: 40px;
  border-width: 0 1px 1px 0;
  border-color: #d1d5db;
  border-radius: 0;
  color: #1f2937;
  padding: 0 12px;
}

.compose-editor-label {
  padding: 0;
}

.compose-editor-label textarea {
  min-height: 400px;
  border: 0;
  border-radius: 0;
  resize: vertical;
}

.rich-editor-shell .compose-editor-label {
  display: block;
}

.rich-editor-shell .tox.tox-tinymce {
  border: 0;
  border-radius: 0;
}

.editor-fallback .compose-editor-label textarea {
  min-height: 420px;
}

.douban-plugin-panel {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.4fr) auto auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #d1d5db;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 10px;
}

.douban-plugin-panel div {
  min-width: 0;
}

.douban-plugin-panel strong,
.douban-plugin-panel span {
  display: block;
}

.douban-plugin-panel span {
  color: #64748b;
  font-size: 12px;
}

.douban-plugin-panel label {
  display: grid;
  gap: 4px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.douban-plugin-panel input {
  min-width: 0;
  height: 34px;
  border: 1px solid #dbe5f2;
  border-radius: 5px;
  padding: 6px 9px;
}

.douban-plugin-panel button {
  min-height: 34px;
  border: 1px solid #2f74ed;
  border-radius: 5px;
  background: #2f74ed;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 0 11px;
  white-space: nowrap;
}

.douban-plugin-panel button[data-fill-demo] {
  border-color: #dbe5f2;
  background: #fff;
  color: #334155;
}

.modal-open {
  overflow: hidden;
}

.douban-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.45);
  padding: 24px;
}

.douban-modal[hidden] {
  display: none;
}

.douban-dialog {
  display: grid;
  width: min(880px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.26);
}

.douban-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e2e8f0;
  padding: 18px 20px;
}

.douban-dialog-head span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.douban-dialog-head h2 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 22px;
}

.douban-dialog-head button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #dbe5f2;
  border-radius: 50%;
  background: #f8fafc;
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
}

.douban-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 96px;
  gap: 10px;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 20px;
}

.douban-search-form input,
.douban-search-form select {
  min-width: 0;
  height: 40px;
  border: 1px solid #dbe5f2;
  border-radius: 6px;
  background: #fff;
  padding: 0 12px;
}

.douban-search-form button {
  border: 0;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
}

.douban-search-status {
  color: #64748b;
  font-size: 13px;
  padding: 12px 20px 0;
}

.douban-result-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 14px 20px 20px;
}

.douban-result-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  padding: 10px;
  text-align: left;
}

.douban-result-item:hover,
.douban-result-item:focus-visible {
  border-color: #93c5fd;
  background: #eff6ff;
}

.douban-result-item img {
  width: 64px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: #e2e8f0;
}

.douban-result-item span,
.douban-result-item strong,
.douban-result-item em,
.douban-result-item small {
  display: block;
  min-width: 0;
}

.douban-result-item strong {
  margin-bottom: 4px;
  font-size: 16px;
}

.douban-result-item em {
  color: #2563eb;
  font-style: normal;
  font-weight: 800;
  margin-bottom: 4px;
}

.douban-result-item small {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.editor-status {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d1d5db;
  color: #64748b;
  font-size: 12px;
  padding: 4px 8px;
}

.editor-status em {
  font-style: normal;
}

.secret-toggle {
  justify-self: start;
  border: 0;
  border-radius: 5px;
  background: #374151;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 10px;
}

.secret-editor {
  display: grid;
  gap: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  padding: 12px;
}

.secret-editor.collapsed {
  display: none;
}

.video-placeholder {
  margin: -4px 0 0;
  color: #0f172a;
}

.create-submit-row {
  display: flex;
  justify-content: space-between;
}

.create-submit-row .primary-soft {
  padding: 7px 12px;
}

.create-aside {
  top: 78px;
  gap: 14px;
}

.compose-option-panel {
  padding: 0;
}

.compose-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #e5eaf1;
  padding: 10px 16px;
}

.compose-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #0f172a;
  font-weight: 500;
}

.compose-tabs button.active {
  background: #e9f4ff;
  color: #2563eb;
}

.compose-tab-panel {
  display: none;
  padding: 18px;
}

.compose-tab-panel.active {
  display: grid;
  gap: 14px;
}

.compose-panel-title {
  border-left: 4px solid #2f74ed;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  padding-left: 8px;
}

.compose-forum-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-height: 350px;
  overflow: auto;
}

.compose-forum-card {
  position: relative;
  display: grid;
  min-height: 110px;
  place-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #0f172a;
  padding: 12px 8px;
}

.compose-forum-card.active {
  outline: 2px solid #bfdbfe;
  background: #eef6ff;
}

.compose-forum-card .category-icon {
  width: 46px;
  height: 46px;
}

.compose-forum-card i {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #2563eb;
  font-style: normal;
}

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-picker button,
.compose-tab-panel > button {
  border: 1px solid #dbe5f2;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 10px;
}

.tag-picker button.active {
  border-color: #2f74ed;
  background: #e9f4ff;
  color: #2563eb;
}

.tag-text-input {
  border: 1px solid #dbe5f2;
  border-radius: 999px;
  padding: 8px 12px;
}

.compose-notice-panel p {
  margin: 0 0 8px;
  color: #334155;
  line-height: 1.7;
}

.publish-rules-mini {
  display: grid;
  gap: 10px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  padding: 12px;
}

.publish-rules-mini strong {
  color: #9a3412;
}

.publish-rules-mini p {
  margin: 4px 0 0;
  color: #7c2d12;
  font-size: 13px;
}

.publish-rule-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.publish-rule-pills span {
  border-radius: 999px;
  background: #ffedd5;
  color: #9a3412;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
}

.publish-rule-side ol {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: #334155;
  font-size: 13px;
  line-height: 1.65;
}

.publish-rule-side p {
  margin: 0;
}

.publish-side-example {
  display: grid;
  gap: 6px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #eff6ff;
  margin-top: 12px;
  padding: 10px;
}

.publish-side-example span {
  color: #1e3a8a;
  font-size: 13px;
}

.publish-rules-article {
  display: grid;
  gap: 16px;
}

.publish-rules-head {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(20, 184, 166, 0.08)),
    #fff;
  padding: 20px;
}

.publish-rules-head h2 {
  margin: 4px 0 8px;
  color: #0f172a;
  font-size: 26px;
}

.publish-rules-head p {
  margin: 0;
  color: #475569;
}

.publish-rule-summary,
.submit-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.publish-rule-summary span,
.submit-check-grid span {
  border: 1px solid #e5edf7;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  padding: 12px;
}

.publish-rule-summary b {
  display: block;
  color: #2563eb;
  font-size: 16px;
}

.publish-rule-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.publish-rule-section {
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.publish-rule-section h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 17px;
}

.publish-rule-section ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #334155;
  line-height: 1.7;
}

.publish-format-examples {
  display: grid;
  gap: 8px;
}

.publish-format-examples span {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid #e5edf7;
  border-radius: 8px;
  background: #f8fafc;
  padding: 9px 10px;
}

.publish-format-examples b {
  color: #2563eb;
}

.publish-format-examples em {
  min-width: 0;
  color: #334155;
  font-style: normal;
}

.submit-check-grid span::before {
  content: "✓ ";
  color: #138a63;
  font-weight: 900;
}

/* Unified UI component polish */
:root {
  --panel-border: #d8e3f0;
  --panel-border-strong: #c5d3e6;
  --panel-bg: #ffffff;
  --panel-muted: #f8fafc;
  --panel-tint: #eef5ff;
  --accent-cyan: #0891b2;
  --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.06);
  --shadow-lift: 0 18px 40px rgba(15, 23, 42, 0.10);
}

body {
  background:
    linear-gradient(180deg, #f6f9ff 0, #f1f6fb 340px, #f6f8fb 100%);
}

button,
a,
input,
select,
textarea {
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    transform .16s ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(47, 111, 237, 0.18);
  outline-offset: 2px;
}

.ui-card,
.left-card,
.side-panel,
.thread-list,
.thread-card,
.post-card,
.home-banner,
.page-title,
.forum-hero,
.search-page,
.search-wide-card,
.discover-card,
.profile-card,
.profile-side-card,
.profile-menu,
.profile-invite-card,
.profile-content-card,
.profile-stat-card,
.target-auth-card,
.info-card {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-soft);
}

.ui-card:hover,
.category-card:hover,
.forum-card:hover,
.discover-forum-card:hover,
.quick-links a:hover,
.left-user-links a:hover,
.rank-list a:hover {
  box-shadow: var(--shadow-lift);
}

.ui-soft-panel {
  border: 1px solid #dbe6f3;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #f8fbff);
}

.ui-chip,
.mini-badge,
.tag,
.site-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(47, 111, 237, 0.14);
  border-radius: 8px;
  background: #eef5ff;
  color: #1f55c8;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
}

.ui-button,
.primary-soft,
.side-action,
.header-publish,
.public-auth-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 900;
  min-height: 38px;
  padding: 9px 14px;
}

.ui-button-primary,
.primary-soft,
.side-action,
.header-publish,
.public-auth-form button[type="submit"] {
  background: linear-gradient(135deg, #2f6fed, #12856c);
  color: #fff;
  box-shadow: 0 10px 22px rgba(47, 111, 237, 0.18);
}

.ui-button-primary:hover,
.primary-soft:hover,
.side-action:hover,
.header-publish:hover,
.public-auth-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #1f55c8, #0f766e);
  transform: translateY(-1px);
}

.ghost-btn,
.text-link,
.small-btn,
.tab-btn,
.tag-option {
  border-color: #d6e2f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-weight: 900;
}

.ghost-btn:hover,
.text-link:hover,
.small-btn:hover,
.tab-btn:hover,
.tag-option:hover {
  border-color: #aac1e3;
  background: #eef5ff;
  color: #1f55c8;
}

.ui-segmented {
  border: 1px solid #dbe6f3;
  border-radius: 8px;
  background: #f8fafc;
  padding: 5px;
}

.ui-segmented a,
.feature-tabs .tab-btn,
.rank-tabs button {
  border-radius: 7px;
}

.ui-segmented a.active,
.tab-btn.active,
.feature-tabs .tab-btn.active,
.rank-tabs button.active,
.tag-option.active {
  background: #fff;
  color: #1f55c8;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.site-header {
  border-bottom-color: rgba(197, 211, 230, 0.8);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}

.brand-mark {
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(135deg, #2563eb, #0f766e);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.main-nav {
  gap: 10px;
}

.main-nav a {
  position: relative;
  border-radius: 8px;
  color: #475569;
  font-weight: 800;
  padding: 8px 9px;
}

.main-nav a:hover,
.main-nav a.active {
  background: #eef5ff;
  color: #1f55c8;
}

.top-search {
  height: 38px;
  border-color: #d5e1ef;
  border-radius: 8px;
  background: #f8fafc;
}

.top-search input {
  color: #1f2937;
  font-weight: 700;
}

.top-search button {
  background: #fff;
  color: #2563eb;
  font-weight: 900;
}

.login-link,
.user-chip,
.message-chip,
.utility-chip,
.round-icon,
.avatar-chip {
  border: 1px solid #d6e2f0;
  background: #fff;
  color: #1f55c8;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.utility-chip {
  min-width: 58px;
}

.avatar-chip {
  background: linear-gradient(135deg, #eefdf3, #eff6ff);
  color: #0f766e;
}

.message-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  border-radius: 8px;
  font-weight: 800;
  padding: 0 10px;
}

.message-chip b {
  background: #fef2f2;
  color: #dc2626;
}

.left-card,
.side-panel,
.discover-card {
  overflow: hidden;
}

.side-title,
.board-title,
.discover-card h2 {
  color: #111827;
  letter-spacing: 0;
}

.left-nav-item {
  border: 1px solid transparent;
}

.left-nav-item:hover,
.left-nav-item.active {
  border-color: #d5e5ff;
  background: #eef5ff;
  color: #1f55c8;
}

.forum-card,
.category-card,
.discover-forum-card,
.quick-links a,
.left-user-links a,
.auth-support-list span {
  border-color: #dbe6f3;
  background:
    linear-gradient(180deg, #ffffff, #f9fbff);
}

.forum-card:hover,
.category-card:hover,
.category-card.active,
.discover-forum-card:hover {
  border-color: var(--cat, #2f6fed);
  transform: translateY(-1px);
}

.category-icon,
.left-icon,
.thread-avatar,
.tiny-avatar {
  border: 1px solid rgba(47, 111, 237, 0.12);
  background: #eef5ff;
}

.thread-list {
  background: #fff;
}

.thread-row,
.rich-thread-row {
  border-top-color: #edf2f8;
  background: #fff;
}

.thread-row:hover,
.rich-thread-row:hover {
  background: #f8fbff;
}

.thread-title-line a {
  color: #172033;
}

.thread-title-line a:hover {
  color: #1f55c8;
}

.thread-counts span {
  border-radius: 8px;
  background: #f8fafc;
  padding: 6px 8px;
}

.rank-list li a,
.discover-list a,
.edu-like-link {
  border-radius: 7px;
}

.rank-list li a:hover,
.discover-list a:hover,
.edu-like-link:hover {
  background: #f8fbff;
  color: #1f55c8;
}

.search-box input,
.search-wide-card .search-box input,
.public-auth-form input,
.thread-create-form input,
.thread-create-form select,
.thread-create-form textarea,
.tag-text-input {
  border-color: #d6e2f0;
  background: #fbfdff;
}

.search-box input:focus,
.search-wide-card .search-box input:focus,
.public-auth-form input:focus,
.thread-create-form input:focus,
.thread-create-form select:focus,
.thread-create-form textarea:focus,
.tag-text-input:focus {
  border-color: #2f6fed;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
  outline: none;
}

.home-banner {
  border: 0;
  box-shadow: var(--shadow-lift);
}

.feed-head,
.auth-card-head,
.media-hero-panel {
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.10), rgba(15, 118, 110, 0.08)),
    #ffffff;
}

.target-auth-card.auth-panel {
  max-width: 760px;
}

.auth-card-head {
  padding: 24px 28px 18px;
}

.auth-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.auth-card-head .eyebrow {
  color: #2563eb;
  font-weight: 900;
}

.auth-card-head h1 {
  margin: 0 0 7px;
  color: #111827;
  font-size: 36px;
  line-height: 1.12;
}

.auth-card-head p {
  max-width: 560px;
  color: #526174;
}

.auth-tabs {
  margin: 14px 24px 0;
  border-bottom: 0;
  padding: 5px;
}

.auth-tabs a {
  border: 0;
  background: transparent;
  color: #526174;
}

.auth-tabs a.active {
  background: #fff;
  color: #1f55c8;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.target-auth-form {
  padding: 18px 28px 14px;
}

.ui-field > span {
  color: #172033;
}

.password-field,
.verify-line input,
.captcha-line input,
.captcha-image-btn,
.target-auth-form input {
  border-color: #d6e2f0;
}

.auth-submit {
  min-height: 48px;
}

.auth-links {
  background: #fbfdff;
}

.auth-side-card {
  box-shadow: none;
}

.site-footer {
  border-top: 1px solid #d8e3f0;
  background: #fff;
}

.image-watermark-frame {
  position: relative;
  display: block;
  max-width: 100%;
  overflow: hidden;
  border-radius: inherit;
  line-height: 0;
}

.image-watermark-frame > img {
  display: block;
  max-width: 100%;
}

.image-watermark-frame::after {
  content: attr(data-watermark);
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.56);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 6px 8px;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.image-watermark-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 58%, rgba(15, 23, 42, 0.14));
}

.home-banner > .image-watermark-frame,
.home-carousel > .image-watermark-frame,
.home-banner > .image-watermark-frame > img {
  width: 100%;
}

.home-carousel > .image-watermark-frame > img {
  width: 100%;
}

.home-banner > .image-watermark-frame::after,
.home-carousel > .image-watermark-frame::after {
  top: 10px;
  bottom: auto;
}

@media (max-width: 1180px) {
  .forum-layout {
    grid-template-columns: 176px minmax(0, 1fr);
  }

  .forum-layout .page-side {
    grid-column: 1 / -1;
  }

  .create-layout {
    grid-template-columns: 1fr;
  }

  .profile-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .home-zone-hero,
  .media-tool-grid {
    grid-template-columns: 1fr;
  }

  .game-zone-hero,
  .edu-hero-grid,
  .game-main-grid,
  .edu-layout,
  .media-course-layout,
  .media-hero-panel {
    grid-template-columns: 1fr;
  }

  .game-card-grid,
  .edu-topic-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .top-search,
  .message-chip,
  .round-icon {
    display: none;
  }

  .main-nav {
    display: none;
  }

  .forum-layout {
    grid-template-columns: 1fr;
  }

  .forum-left {
    display: none;
  }

  .mobile-search-line {
    display: grid;
  }

  .home-carousel {
    height: 190px;
  }

  .home-carousel h1 {
    font-size: 36px;
  }

  .compose-forum-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rank-podium {
    grid-template-columns: 1fr;
  }

  .game-focus-card,
  .edu-slider-card {
    grid-template-columns: 1fr;
  }

  .game-focus-card img,
  .edu-slider-card img {
    min-height: 220px;
  }

  .discovery-layout,
  .discovery-top-grid,
  .discover-forum-grid,
  .publish-rule-sections,
  .publish-rule-summary,
  .submit-check-grid {
    grid-template-columns: 1fr;
  }

  .active-user-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-cover-band {
    height: 118px;
  }

  .profile-shell {
    grid-template-columns: 1fr;
    margin-top: -58px;
  }

  .profile-left-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-menu a {
    text-align: center;
  }

  .profile-stat-grid,
  .avatar-choice-grid,
  .title-choice-grid,
  .ad-format-grid,
  .ad-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 20px, 1290px);
  }

  .header-publish {
    display: none;
  }

  .utility-chip {
    width: 34px;
    min-width: 34px;
    padding: 0;
  }

  .utility-short {
    display: inline;
  }

  .utility-label,
  .header-user-name {
    display: none;
  }

  .avatar-chip {
    width: 36px;
    padding: 0;
  }

  .home-sign-hero,
  .group-notice,
  .announcement-board {
    margin-bottom: 10px;
  }

  .home-carousel {
    height: 160px;
  }

  .home-carousel h1 {
    font-size: 28px;
  }

  .home-carousel .home-carousel-caption {
    inset: auto 12px 12px;
  }

  .home-carousel-caption span {
    font-size: 12px;
    padding: 6px 12px;
  }

  .discover-list a,
  .discover-list div {
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    min-height: 46px;
  }

  .discover-list em {
    grid-column: 2;
    justify-self: start;
    font-size: 12px;
  }

  .discover-list .empty-state {
    grid-column: 1 / -1;
    min-height: 86px;
  }

  .discover-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thread-row,
  .rich-thread-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .thread-counts {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
  }

  .compose-forum-grid,
  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .compose-editor-label textarea {
    min-height: 280px;
  }

  .douban-plugin-panel {
    grid-template-columns: 1fr;
  }

  .douban-plugin-panel button {
    width: 100%;
  }

  .douban-modal {
    align-items: end;
    padding: 12px;
  }

  .douban-dialog {
    max-height: calc(100vh - 24px);
  }

  .douban-search-form {
    grid-template-columns: 1fr;
  }

  .douban-result-item {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .douban-result-item img {
    width: 54px;
  }

  .doulist-subject {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }

  .doulist-post {
    width: 76px;
  }

  .doulist-post img {
    width: 76px;
    min-width: 76px;
  }

  .douban-card-table th {
    width: 44px;
  }

  .profile-menu,
  .profile-info-grid,
  .credit-summary,
  .vapply-steps {
    grid-template-columns: 1fr;
  }

  .profile-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .official-page {
    width: min(100% - 20px, 1220px);
  }

  .game-zone-topbar,
  .edu-top-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .game-list-item,
  .edu-resource-item,
  .media-course-item,
  .official-locked-card,
  .credit-action-row {
    grid-template-columns: 1fr;
  }

  .game-list-item img,
  .edu-resource-item img {
    width: 100%;
    height: 170px;
  }

  .reward-table div {
    grid-template-columns: minmax(0, 1fr) 72px 72px;
  }

  .publish-format-examples span {
    grid-template-columns: 1fr;
  }

  .invite-link-line {
    grid-template-columns: 1fr;
  }

  .activity-title {
    white-space: normal;
  }

  .target-auth-form,
  .auth-card-head,
  .auth-tabs,
  .virtual-login-panel,
  .target-auth-card .auth-links,
  .ad-hero-panel,
  .ad-intro-panel,
  .ad-format-card,
  .ad-info-card {
    padding-inline: 14px;
  }

  .auth-card-head h1,
  .ad-hero-panel h1 {
    font-size: 26px;
  }

  .auth-head-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .virtual-login-panel {
    grid-template-columns: 1fr;
  }

  .virtual-login-panel button {
    width: 100%;
  }

  .verify-line,
  .captcha-line,
  .ad-format-grid,
  .ad-info-grid {
    grid-template-columns: 1fr;
  }

  .auth-tabs {
    gap: 6px;
  }

  .auth-tabs a,
  .target-auth-card .auth-links a {
    padding-inline: 8px;
  }

  .media-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-card-grid,
  .edu-topic-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .media-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-feature-strip,
  .media-workspace-grid {
    grid-template-columns: 1fr;
  }

  .media-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-api-panel .media-api-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .media-preview-grid,
  .media-agent-grid,
  .media-api-grid,
  .media-project-grid,
  .media-section-panel .media-tool-grid {
    grid-template-columns: 1fr;
  }

  .media-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .media-api-panel .media-api-grid {
    grid-template-columns: 1fr;
  }

  .media-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .media-command-card,
  .media-api-card,
  .media-project-slot,
  .media-preview-card {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .home-forum-layout {
    gap: 0;
  }

  .home-forum-layout .page-side,
  .home-forum-layout .home-pick-section,
  .home-forum-layout .home-carousel,
  .home-forum-layout .group-notice {
    display: none;
  }

  .home-page {
    display: grid;
    gap: 10px;
  }

  .home-forum-layout .mobile-search-line,
  .home-forum-layout .home-zone-hero,
  .home-forum-layout .announcement-board {
    margin-bottom: 0;
  }

  .home-forum-layout .home-zone-hero {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .home-forum-layout .zone-entry {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    min-height: 76px;
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
  }

  .home-forum-layout .zone-entry span {
    width: 34px;
    height: 34px;
    grid-row: auto;
    font-size: 15px;
  }

  .home-forum-layout .zone-entry strong {
    font-size: 12px;
    line-height: 1.28;
  }

  .home-forum-layout .zone-entry em {
    display: none;
  }

  .home-alert-stack:empty {
    display: none;
  }

  .home-alert-stack .notice-alert {
    min-height: 36px;
    margin-bottom: 0;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.35;
  }

  .home-alert-stack .notice-alert:not(:first-child) {
    display: none;
  }

  .home-forum-layout .announcement-board {
    gap: 6px;
    padding: 9px;
  }

  .home-forum-layout .announcement-board a {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 28px;
  }

  .home-forum-layout .announcement-board a:nth-child(n+3),
  .home-forum-layout .announcement-board em {
    display: none;
  }

  .home-forum-layout .announcement-board strong {
    -webkit-line-clamp: 1;
    font-size: 13px;
  }

  .home-forum-layout .feed-head {
    min-height: 44px;
    padding: 0 10px;
  }

  .home-forum-layout .feature-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0;
  }

  .home-forum-layout .feature-tabs .tab-btn {
    min-height: 44px;
    font-size: 14px;
  }

  .home-forum-layout .feed-actions {
    display: none;
  }

  .home-forum-layout .thread-row,
  .home-forum-layout .rich-thread-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .home-forum-layout .thread-list .rich-thread-row:nth-of-type(n+11) {
    display: none;
  }

  .home-forum-layout .thread-author .thread-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .home-forum-layout .thread-author small,
  .home-forum-layout .thread-counts,
  .home-forum-layout .thread-meta span:nth-child(n+4),
  .home-forum-layout .thread-title-line .tag:nth-of-type(n+4) {
    display: none;
  }

  .home-forum-layout .thread-title-line {
    gap: 5px;
    font-size: 14px;
    line-height: 1.35;
  }

  .home-forum-layout .thread-title-line a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .home-forum-layout .thread-meta {
    margin-top: 4px;
    font-size: 11px;
  }

  .home-forum-layout .pager {
    justify-content: center;
    padding: 9px;
  }

  .home-forum-layout .pager a,
  .home-forum-layout .pager span {
    min-width: 30px;
    min-height: 30px;
    padding: 4px 7px;
  }

  body:has(.home-forum-layout) .site-footer {
    margin-top: 12px;
    padding: 14px 0 72px;
  }

  body:has(.home-forum-layout) .footer-inner {
    display: grid;
    gap: 8px;
  }

  body:has(.home-forum-layout) .footer-inner > div:first-child > p:not(.footer-records),
  body:has(.home-forum-layout) .footer-links {
    display: none;
  }

  body:has(.home-forum-layout) .footer-records {
    gap: 5px;
    font-size: 11px;
    line-height: 1.5;
  }

  .mobile-only-panel {
    display: grid;
    gap: 8px;
  }

  .mobile-only-panel details {
    overflow: hidden;
    border: 1px solid #d8e2f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(31, 41, 55, 0.05);
  }

  .mobile-only-panel summary {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #0f172a;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    list-style: none;
    padding: 0 12px;
  }

  .mobile-only-panel summary::-webkit-details-marker {
    display: none;
  }

  .mobile-only-panel summary::after {
    content: "+";
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    background: #eef4ff;
    color: #2563eb;
    font-weight: 900;
  }

  .mobile-only-panel details[open] summary::after {
    content: "-";
  }

  .mobile-more-grid,
  .mobile-zone-list,
  .mobile-link-list,
  .mobile-hot-forums {
    display: grid;
    gap: 8px;
    border-top: 1px solid #edf1f6;
    padding: 10px;
  }

  .mobile-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-more-grid a,
  .mobile-zone-list a,
  .mobile-link-list a,
  .mobile-hot-forums a {
    display: grid;
    gap: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fbfdff;
    color: #0f172a;
    padding: 9px;
  }

  .mobile-more-grid strong,
  .mobile-zone-list strong,
  .mobile-link-list strong,
  .mobile-hot-forums strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-more-grid span,
  .mobile-zone-list span,
  .mobile-hot-forums small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.4;
  }

  .mobile-link-list a {
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
  }

  .mobile-link-list a > span {
    display: grid;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
  }

  .mobile-rank-list {
    border-top: 1px solid #edf1f6;
    padding: 10px;
  }
}

@media (max-width: 760px) {
  .discovery-layout {
    gap: 10px;
  }

  .discovery-side {
    display: none;
  }

  .discover-mobile-head {
    display: grid;
    gap: 10px;
    border: 1px solid #d8e2f0;
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(47, 111, 237, 0.08), rgba(15, 159, 143, 0.08)),
      #fff;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.05);
    padding: 14px;
  }

  .discover-mobile-head h2 {
    margin: 2px 0 4px;
    color: #0f172a;
    font-size: 24px;
  }

  .discover-mobile-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
  }

  .discover-mobile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .discover-mobile-stats span {
    display: grid;
    gap: 2px;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    padding: 8px 4px;
    text-align: center;
  }

  .discover-mobile-stats b {
    color: #0f172a;
    font-size: 15px;
  }

  .discovery-main,
  .discovery-top-grid {
    gap: 10px;
  }

  .discovery-top-grid .discover-card:nth-child(2) {
    display: none;
  }

  .discover-card h2 {
    min-height: 42px;
    place-items: center start;
    padding: 0 12px;
    font-size: 15px;
  }

  .discover-list {
    gap: 0;
    padding: 8px 10px;
  }

  .discovery-top-grid .discover-list > :nth-child(n+5) {
    display: none;
  }

  .discover-list a,
  .discover-list div {
    min-height: 40px;
    padding: 6px 0;
  }

  .discover-list strong {
    font-size: 13px;
    -webkit-line-clamp: 1;
  }

  .discover-list-main small {
    font-size: 12px;
  }

  .discover-list em {
    display: none;
  }

  .active-users-card {
    display: none;
  }

  .all-forum-card h2 {
    min-height: 42px;
    padding-left: 12px;
  }

  .discover-forum-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .discover-forum-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    min-height: 62px;
    border-radius: 8px;
    padding: 8px;
  }

  .discover-forum-card:nth-child(n+9) {
    display: none;
  }

  .discover-mobile-full-forums .discover-forum-card:nth-child(n+9) {
    display: grid;
  }

  .discover-forum-card .category-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .discover-forum-card strong {
    font-size: 13px;
    line-height: 1.3;
  }

  .discover-forum-card strong b {
    font-size: 10px;
    padding: 1px 4px;
  }

  .discover-forum-card p,
  .discover-forum-card small,
  .discover-forum-card em {
    display: none;
  }

  .discover-mobile-more {
    margin-top: -2px;
  }

  .discover-mobile-full-forums {
    max-height: 360px;
    overflow-y: auto;
  }

  .mobile-hot-forums a {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
  }

  .mobile-hot-forums .category-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .mobile-active-users {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #edf1f6;
    padding: 10px;
  }

  .mobile-active-users span {
    width: 38px;
    height: 38px;
  }

  body:has(.discovery-layout) .site-footer {
    margin-top: 12px;
    padding: 14px 0 72px;
  }

  body:has(.discovery-layout) .footer-inner {
    display: grid;
    gap: 8px;
  }

  body:has(.discovery-layout) .footer-inner > div:first-child > p:not(.footer-records),
  body:has(.discovery-layout) .footer-links {
    display: none;
  }
}