:root {
  --bg: #f3f7fc;
  --bg-2: #edf4fb;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: rgba(255, 255, 255, 0.92);
  --line: rgba(152, 175, 205, 0.22);
  --line-strong: rgba(109, 139, 184, 0.32);
  --text: #172033;
  --muted: #66758d;
  --faint: #8b9ab0;
  --blue: #256df4;
  --blue-2: #eaf2ff;
  --cyan: #15a8d8;
  --green: #12a87d;
  --orange: #ff8a24;
  --red: #ef5f5f;
  --lavender: #8d7cff;
  --shadow: 0 22px 80px rgba(51, 85, 128, 0.12);
  --shadow-soft: 0 12px 36px rgba(39, 78, 122, 0.08);
  --radius: 8px;
  --layer-popover: 10;
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

.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;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 8%, rgba(70, 145, 255, 0.18), transparent 32%),
    radial-gradient(circle at 86% 8%, rgba(31, 202, 206, 0.12), transparent 28%),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 45%, var(--bg-2) 100%);
  letter-spacing: 0;
}

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

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

button {
  border: 0;
}

.app-shell {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 16px 18px 48px;
}

.topbar {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  min-height: 62px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(24px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 32px;
  border-radius: 50% 44% 48% 42%;
  color: white;
  font-weight: 900;
  background:
    radial-gradient(circle at 28% 32%, #d8edff 0 7%, transparent 8%),
    linear-gradient(135deg, #4ba3ff, #276df1 66%, #0f56d9);
  box-shadow: inset 0 -6px 16px rgba(17, 60, 142, 0.22), 0 9px 22px rgba(41, 107, 220, 0.2);
}

.brand-mark::after {
  position: absolute;
  right: -7px;
  width: 11px;
  height: 16px;
  content: "";
  border-radius: 70% 30% 70% 30%;
  background: linear-gradient(135deg, #71c0ff, #256df4);
  transform: rotate(-18deg);
}

.brand-text {
  color: #135dde;
  font-size: 22px;
  font-weight: 900;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: #26354d;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--blue);
  background: rgba(37, 109, 244, 0.1);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-search {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: min(420px, 28vw);
  min-width: 230px;
  padding: 4px 5px 4px 14px;
  border: 1px solid rgba(133, 161, 202, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.top-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
}

.icon-btn,
.search-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--blue);
  background: var(--blue-2);
  cursor: pointer;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.primary-btn {
  color: white;
  background: linear-gradient(135deg, #2d78ff, #135dde);
  box-shadow: 0 12px 24px rgba(37, 109, 244, 0.22);
}

.secondary-btn {
  color: var(--blue);
  border: 1px solid rgba(37, 109, 244, 0.22);
  background: rgba(37, 109, 244, 0.08);
}

.ghost-btn {
  color: #33425d;
  border: 1px solid rgba(127, 151, 190, 0.24);
  background: rgba(255, 255, 255, 0.72);
}

.danger-btn {
  color: #d8504c;
  border: 1px solid rgba(239, 95, 95, 0.26);
  background: rgba(239, 95, 95, 0.08);
}

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

.left-sidebar,
.right-rail,
.glass-card,
.section,
.auth-card,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px);
}

.left-sidebar,
.right-rail {
  position: sticky;
  top: 94px;
  padding: 18px;
}

.sidebar-title {
  margin: 0 0 14px;
  font-size: 18px;
}

.filter-list {
  display: grid;
  gap: 8px;
}

.filter-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #40506b;
  cursor: pointer;
}

.filter-item:hover {
  background: rgba(37, 109, 244, 0.07);
}

.filter-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: var(--blue);
  background: rgba(37, 109, 244, 0.08);
}

.count {
  color: #8795aa;
}

.divider {
  height: 1px;
  margin: 18px 0;
  background: var(--line);
}

.demand-panel {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 178px;
  padding: 18px 22px;
  overflow: hidden;
}

.mascot {
  width: 170px;
  max-width: 100%;
  justify-self: center;
  filter: drop-shadow(0 18px 30px rgba(37, 109, 244, 0.18));
}

.eyebrow {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.demand-title {
  margin: 5px 0 14px;
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.2;
}

.demand-search {
  display: grid;
  grid-template-columns: 1fr 58px;
  align-items: center;
  padding: 7px 7px 7px 18px;
  border: 1px solid rgba(37, 109, 244, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.demand-search input {
  width: 100%;
  min-height: 44px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 17px;
}

.hot-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.hot-searches a {
  color: #41618c;
}

.section {
  margin-top: 16px;
  padding: 18px;
}

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

.section-head h2,
.section-head h1 {
  margin: 0;
  font-size: 22px;
}

.section-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.link-more {
  color: var(--blue);
  font-weight: 800;
  white-space: nowrap;
}

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

.product-card {
  display: grid;
  gap: 12px;
  min-height: 208px;
  padding: 16px;
  border: 1px solid rgba(128, 154, 196, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.product-card:hover {
  border-color: rgba(37, 109, 244, 0.22);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.product-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.logo-box {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: white;
  font-size: 20px;
  font-weight: 900;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.8), transparent 16%),
    linear-gradient(135deg, #4ca8ff, #256df4 55%, #14264f);
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.18);
}

.logo-box.dark {
  background: linear-gradient(135deg, #07162d, #0c244a);
}

.product-name {
  margin: 0;
  font-size: 17px;
}

.product-desc {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag,
.status-pill,
.attitude {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.tag {
  color: #38619d;
  background: rgba(37, 109, 244, 0.08);
}

.status-pill {
  color: var(--green);
  background: rgba(18, 168, 125, 0.1);
}

.status-pill.hot,
.attitude.caution {
  color: #eb6f1f;
  background: rgba(255, 138, 36, 0.13);
}

.status-pill.new {
  color: var(--blue);
  background: rgba(37, 109, 244, 0.1);
}

.price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.price {
  font-size: 18px;
  font-weight: 900;
}

.score {
  color: var(--orange);
  font-weight: 900;
}

.compact-products {
  display: grid;
  grid-template-columns: repeat(7, minmax(124px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.mini-card {
  display: grid;
  gap: 8px;
  min-width: 124px;
  padding: 12px;
  border: 1px solid rgba(128, 154, 196, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.mini-card .logo-box {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.rank-list {
  display: grid;
  gap: 11px;
}

.rank-item {
  display: grid;
  grid-template-columns: 28px 38px 1fr auto;
  gap: 10px;
  align-items: center;
}

.rank-num {
  color: #ff4d2d;
  font-size: 18px;
  font-weight: 900;
}

.rank-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, #83c4ff, #256df4);
}

.rank-name {
  font-weight: 800;
}

.rank-meta {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

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

.article-card,
.article-row {
  border: 1px solid rgba(128, 154, 196, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.article-thumb {
  display: grid;
  place-items: center;
  min-height: 112px;
  color: white;
  font-weight: 900;
  background:
    linear-gradient(135deg, rgba(37, 109, 244, 0.75), rgba(21, 168, 216, 0.62)),
    linear-gradient(45deg, #1f5fd8, #e1f1ff);
}

.article-body {
  padding: 13px;
}

.article-title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.45;
}

.article-summary {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.6;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--faint);
  font-size: 12px;
}

.attitude {
  color: var(--green);
  background: rgba(18, 168, 125, 0.1);
}

.attitude.watch {
  color: var(--blue);
  background: rgba(37, 109, 244, 0.09);
}

.right-card + .right-card {
  margin-top: 22px;
}

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

.topic-card {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(128, 154, 196, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.topic-thumb {
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, #9fceff, #256df4);
}

.muted {
  color: var(--muted);
}

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

.breadcrumb {
  margin: 14px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.product-hero {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: center;
  padding: 24px;
}

.product-hero .logo-box {
  width: 154px;
  height: 154px;
  border-radius: 24px;
  font-size: 70px;
}

.product-hero h1 {
  margin: 0 0 8px;
  font-size: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.score-card {
  padding: 16px;
  border: 1px solid rgba(128, 154, 196, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
}

.big-score {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #10264c;
  font-size: 42px;
  font-weight: 900;
}

.stars {
  color: var(--orange);
  font-size: 17px;
}

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

.info-card {
  min-height: 120px;
  padding: 16px;
  border: 1px solid rgba(128, 154, 196, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.info-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.info-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

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

.feature-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 11px;
  padding: 14px;
  border-radius: 12px;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--blue);
  background: rgba(37, 109, 244, 0.1);
}

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

.case-card {
  border: 1px solid rgba(128, 154, 196, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.case-thumb {
  position: relative;
  min-height: 150px;
  background:
    linear-gradient(135deg, rgba(10, 35, 74, 0.26), rgba(37, 109, 244, 0.28)),
    linear-gradient(135deg, #d6e8ff, #f6fbff);
}

.media-badge {
  position: absolute;
  left: 12px;
  top: 12px;
}

.play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: white;
  background: rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
}

.duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  color: white;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
}

.case-body {
  padding: 14px;
}

.signal-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.signal-card {
  min-height: 120px;
  padding: 13px;
  border: 1px solid rgba(128, 154, 196, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.signal-card strong {
  display: block;
  margin-top: 8px;
  color: var(--green);
  font-size: 24px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(128, 154, 196, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.compare-table,
.admin-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td,
.admin-table th,
.admin-table td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(128, 154, 196, 0.18);
  text-align: left;
  vertical-align: top;
}

.compare-table th,
.admin-table th {
  color: #52627c;
  font-size: 13px;
  background: rgba(234, 242, 255, 0.68);
}

.compare-table tr:last-child td,
.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table tr.selected td {
  background: rgba(15, 138, 107, 0.06);
}

.article-list {
  display: grid;
  gap: 12px;
}

.article-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
}

.article-row .article-thumb {
  min-height: 105px;
  border-radius: 10px;
}

body[data-page="articles"] .article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 16px;
}

.article-grid-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--scheme-line);
  border-radius: 15px;
  background: var(--scheme-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.article-grid-card:hover {
  border-color: #bfd8ee;
  box-shadow: 0 14px 34px rgba(18, 70, 140, 0.08);
  transform: translateY(-2px);
}

.article-grid-card:focus-within {
  outline: 3px solid rgba(18, 103, 242, 0.18);
  outline-offset: 2px;
}

.article-grid-media {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--scheme-line-soft);
  background: #f2f7fb;
}

.article-grid-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.article-grid-media.has-cover img {
  object-fit: cover;
}

.article-grid-media.has-logo img {
  width: clamp(68px, 24%, 94px);
  height: clamp(68px, 24%, 94px);
  object-fit: contain;
}

.article-grid-type,
.article-grid-product {
  position: absolute;
  top: 12px;
  padding: 4px 8px;
  border: 1px solid var(--scheme-line);
  border-radius: 999px;
  color: var(--scheme-green);
  background: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.article-grid-type {
  left: 12px;
}

.article-grid-product {
  right: 12px;
  overflow: hidden;
  max-width: 48%;
  color: var(--scheme-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-grid-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding: 16px;
}

.article-grid-tags {
  min-height: 24px;
  margin-bottom: 10px;
}

.article-grid-title-link {
  color: inherit;
}

.article-grid-card .article-title {
  display: -webkit-box;
  overflow: hidden;
  min-height: 46px;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.38;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-grid-card .article-summary {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 14px;
  color: var(--scheme-muted);
  font-size: 13px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.article-grid-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--scheme-line-soft);
}

.article-grid-foot .article-share-button {
  margin-left: auto;
}

@media (max-width: 1100px) {
  body[data-page="articles"] .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-page="articles"] .article-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sticky-rail {
  position: sticky;
  top: 94px;
}

.anchor-list {
  display: grid;
  gap: 8px;
}

.anchor-list a {
  display: block;
  padding: 9px 12px;
  border-left: 3px solid rgba(37, 109, 244, 0.18);
  color: var(--muted);
}

.anchor-list a:hover {
  color: var(--blue);
  border-left-color: var(--blue);
  background: rgba(37, 109, 244, 0.06);
}

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

.auth-layout {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 130px);
}

.auth-card {
  width: min(460px, 100%);
  padding: 28px;
}

.field {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}

.field[hidden] {
  display: none !important;
}

.field label,
.field > span {
  color: #34445e;
  font-weight: 800;
}

.field input,
.field select,
.field textarea {
  min-height: 44px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid rgba(133, 161, 202, 0.34);
  border-radius: 10px;
  outline: 0;
  background: rgba(255, 255, 255, 0.84);
}

.field textarea {
  min-height: 100px;
  padding-top: 12px;
  resize: vertical;
}

.form-error {
  min-height: 22px;
  color: var(--red);
  font-weight: 700;
}

.admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(320px, 360px);
  gap: 16px;
  align-items: start;
}

.admin-shell > section {
  min-width: 0;
}

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

.admin-sidebar {
  position: sticky;
  top: 94px;
  min-height: calc(100vh - 120px);
  padding: 16px;
}

.admin-nav {
  display: grid;
  gap: 8px;
}

.admin-nav a {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: #34445e;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.admin-nav a.active,
.admin-nav a:hover {
  color: var(--blue);
  background: rgba(37, 109, 244, 0.09);
}

.admin-nav a:focus-visible {
  outline: 2px solid rgba(15, 138, 107, 0.35);
  outline-offset: 2px;
}

#admin-candidates,
#admin-operations,
#admin-products,
#admin-relations,
#admin-articles,
#admin-cases,
#admin-rankings,
#admin-knowledge,
#admin-sources {
  scroll-margin-top: 106px;
}

.admin-anchor {
  height: 0;
  scroll-margin-top: 106px;
}

.admin-page-head {
  min-height: 48px;
}

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

.stat-card {
  min-height: 120px;
  padding: 18px;
  border: 1px solid rgba(128, 154, 196, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.stat-action {
  display: block;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

button.stat-action {
  appearance: none;
}

.stat-action:hover,
.stat-action:focus-visible {
  border-color: rgba(15, 138, 107, 0.34);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.stat-action small {
  display: block;
  margin-top: 8px;
  color: #0f6f58;
  font-size: 12px;
  font-weight: 800;
}

.stat-number {
  margin: 8px 0 3px;
  font-size: 34px;
  font-weight: 900;
}

.toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto;
  gap: 10px;
  margin: 16px 0;
}

.toolbar select,
.toolbar input {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(133, 161, 202, 0.28);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
}

.confidence {
  width: 80px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(37, 109, 244, 0.1);
}

.confidence span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), #65d39f);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(37, 109, 244, 0.09);
  font-size: 12px;
  font-weight: 900;
}

.status-chip.warn {
  color: #de7b00;
  background: rgba(255, 138, 36, 0.13);
}

.status-chip.ok {
  color: var(--green);
  background: rgba(18, 168, 125, 0.11);
}

.inspector {
  position: sticky;
  top: 94px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  padding: 18px;
}

.inspector-head {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
}

.inspector-title {
  margin-bottom: 12px;
}

.inspector-title p {
  max-width: 310px;
}

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

.check-item {
  color: var(--green);
  font-weight: 800;
}

.source-log {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.source-log-item {
  display: grid;
  grid-template-columns: 132px 86px 1fr;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

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

.ops-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fbfcfd;
}

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

.admin-module-card {
  min-height: 132px;
  padding: 16px;
  border: 1px solid #dbe7e3;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 253, 251, 0.98), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.admin-module-card strong {
  display: block;
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 16px;
}

.admin-module-card p {
  margin: 0;
  color: #52627c;
  font-size: 13px;
  line-height: 1.65;
}

.ops-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ops-card-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

.ops-card-head span {
  color: #64748b;
  font-size: 12px;
}

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

.ops-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  background: #ffffff;
}

.ops-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ops-title strong {
  color: #0f172a;
  font-size: 14px;
}

.ops-title span,
.job-status {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  color: #64748b;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.job-status.queued {
  color: #0f6f58;
  background: #e8f7f2;
}

.job-status.running {
  color: #1f5fbf;
  background: #eef5ff;
}

.job-status.done {
  color: #0f8a6b;
  background: #e5f8ee;
}

.job-status.failed {
  color: #b42318;
  background: #fff1f0;
}

.ops-item p,
.ops-item small {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.ops-run {
  min-height: 34px;
  padding: 0 12px;
}

.audit-item {
  grid-template-columns: 1fr;
}

.ops-empty {
  padding: 16px;
  border: 1px dashed #d6e1ec;
  border-radius: 12px;
  color: #64748b;
  background: #ffffff;
  font-size: 13px;
}

.empty-state {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1500px) {
  .admin-shell {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .inspector {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }

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

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

  .right-rail {
    position: static;
    grid-column: 1 / -1;
  }

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

  .news-feed,
  .generic-grid,
  .admin-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .ops-console {
    grid-template-columns: 1fr;
  }

  .inspector {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 960px) {
  .app-shell {
    padding: 10px 10px 36px;
  }

  .topbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 12px;
    border-radius: 16px;
  }

  .nav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-link {
    flex: 0 0 auto;
  }

  .top-actions {
    align-items: stretch;
  }

  .top-search {
    width: 100%;
    min-width: 0;
  }

  .layout,
  .page-grid,
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .left-sidebar,
  .right-rail,
  .admin-sidebar,
  .sticky-rail {
    position: static;
  }

  .left-sidebar .filter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demand-panel {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .mascot {
    width: 130px;
  }

  .product-grid,
  .info-grid,
  .feature-grid,
  .case-grid,
  .signal-grid,
  .admin-module-grid,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-hero {
    grid-template-columns: 100px 1fr;
  }

  .product-hero .logo-box {
    width: 100px;
    height: 100px;
    font-size: 44px;
  }

  .score-card {
    grid-column: 1 / -1;
  }

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

@media (max-width: 640px) {
  .brand-text {
    font-size: 19px;
  }

  .top-actions {
    flex-direction: column;
  }

  .left-sidebar .filter-list,
  .product-grid,
  .news-feed,
  .generic-grid,
  .info-grid,
  .feature-grid,
  .case-grid,
  .signal-grid,
  .stat-grid,
  .admin-module-grid,
  .toolbar {
    grid-template-columns: 1fr;
  }

  .product-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .product-hero .logo-box {
    justify-self: center;
  }

  .hero-actions,
  .tag-row,
  .section-head {
    justify-content: center;
  }

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

  .source-log-item {
    grid-template-columns: 1fr;
  }
}

/* Commercial redesign inspired by clean business mini-app cards. */
:root {
  --bg: #f7f9fb;
  --bg-2: #eef3f2;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: #ffffff;
  --line: #e4eaf0;
  --line-strong: #d5dee7;
  --text: #182230;
  --muted: #64748b;
  --faint: #94a3b8;
  --blue: #1f5fbf;
  --blue-2: #eef5ff;
  --green: #0f8a6b;
  --green-2: #e8f7f2;
  --orange: #d97706;
  --red: #d94f45;
  --shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.045);
}

body {
  background:
    linear-gradient(180deg, rgba(242, 247, 247, 0.96), rgba(247, 249, 251, 0.98) 260px),
    var(--bg);
}

.app-shell {
  width: min(1500px, 100%);
  padding: 14px 18px 48px;
}

.topbar {
  top: 10px;
  min-height: 58px;
  padding: 8px 12px;
  border-color: rgba(226, 232, 240, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

.brand-mark {
  width: 36px;
  height: 28px;
  border-radius: 18px 15px 17px 16px;
  background:
    radial-gradient(circle at 28% 32%, #ffffff 0 8%, transparent 9%),
    linear-gradient(135deg, #3b82f6 0%, #1f5fbf 54%, #0f8a6b 100%);
  box-shadow: inset 0 -5px 12px rgba(10, 36, 84, 0.18);
}

.brand-mark::after {
  right: -5px;
  width: 9px;
  height: 13px;
  background: linear-gradient(135deg, #1f5fbf, #0f8a6b);
}

.brand-text {
  color: #143b71;
  font-size: 20px;
  letter-spacing: 0;
}

.nav {
  gap: 4px;
}

.nav-link {
  min-height: 36px;
  padding: 0 13px;
  color: #334155;
  font-size: 14px;
  font-weight: 760;
}

.nav-link:hover,
.nav-link.active {
  color: #0f5b47;
  background: var(--green-2);
}

.top-search {
  border-color: #dce5ef;
  background: #f9fbfd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.icon-btn,
.search-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #1f5fbf, #0f8a6b);
  box-shadow: 0 8px 18px rgba(15, 138, 107, 0.18);
}

.primary-btn {
  background: linear-gradient(135deg, #1f5fbf, #0f8a6b);
  box-shadow: 0 10px 22px rgba(15, 138, 107, 0.18);
}

.secondary-btn {
  color: #0f6f58;
  border-color: rgba(15, 138, 107, 0.24);
  background: rgba(15, 138, 107, 0.08);
}

.ghost-btn {
  color: #334155;
  border-color: #dce5ef;
  background: #ffffff;
}

.left-sidebar,
.right-rail,
.glass-card,
.section,
.auth-card,
.admin-panel {
  border-color: #e2e8f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

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

.left-sidebar,
.right-rail {
  top: 86px;
  padding: 16px;
}

.sidebar-title {
  margin-bottom: 12px;
  color: #0f172a;
  font-size: 16px;
  letter-spacing: 0;
}

.filter-item {
  min-height: 38px;
  padding: 6px 8px;
  color: #475569;
  font-size: 14px;
}

.filter-item:hover {
  background: #f1f7f5;
}

.filter-more {
  margin-top: 6px;
  border: 1px dashed #cfe5dd;
  border-radius: 10px;
  color: #0f6f58;
  background: #f8fcfa;
  font-weight: 800;
}

.filter-icon {
  color: #0f8a6b;
  background: #e8f7f2;
}

.divider {
  background: #e6edf3;
}

.demand-panel {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  min-height: 214px;
  padding: 26px 30px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 249, 0.96)),
    #fff;
}

.demand-panel::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 138, 107, 0.08), transparent 42%);
}

.demand-panel > * {
  position: relative;
}

.mascot {
  position: absolute;
  right: 18px;
  bottom: -18px;
  width: 128px;
  opacity: 0.2;
  filter: grayscale(0.2);
}

.eyebrow {
  width: fit-content;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #0f6f58;
  background: #e8f7f2;
  font-size: 12px;
}

.demand-title {
  max-width: 680px;
  margin: 10px 0 16px;
  color: #0f172a;
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 900;
}

.demand-search {
  max-width: 720px;
  grid-template-columns: 1fr 52px;
  border-color: #d7e2ec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.demand-search input {
  font-size: 16px;
}

.hot-searches {
  color: #64748b;
}

.hot-searches a {
  color: #245b7a;
  font-weight: 760;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
  margin-top: 16px;
}

.quick-actions a {
  display: grid;
  gap: 3px;
  min-height: 70px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.quick-actions span {
  color: #0f8a6b;
  font-size: 12px;
  font-weight: 900;
}

.quick-actions strong {
  color: #1e293b;
  font-size: 14px;
}

.section {
  margin-top: 14px;
  padding: 16px;
}

.section-head {
  margin-bottom: 12px;
}

.section-head h1,
.section-head h2 {
  color: #0f172a;
  font-size: 20px;
  letter-spacing: 0;
}

.section-head p {
  color: #64748b;
  font-size: 14px;
}

.link-more {
  color: #0f6f58;
}

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

.product-card,
.mini-card,
.article-card,
.article-row,
.case-card,
.info-card,
.signal-card,
.topic-card,
.stat-card {
  border-color: #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.product-card {
  min-height: 196px;
  padding: 14px;
}

.product-card:hover,
.mini-card:hover,
.article-card:hover,
.topic-card:hover {
  border-color: rgba(15, 138, 107, 0.28);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.logo-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, #1f5fbf, #0f8a6b);
  box-shadow: inset 0 -8px 14px rgba(15, 23, 42, 0.18);
}

.logo-box.dark {
  background: linear-gradient(135deg, #0f172a, #1e293b);
}

.product-name {
  color: #0f172a;
  font-size: 16px;
}

.product-desc,
.article-summary,
.info-card p {
  color: #64748b;
}

.tag {
  color: #35625a;
  background: #edf7f3;
}

.status-pill {
  color: #0f8a6b;
  background: #e8f7f2;
}

.status-pill.hot,
.attitude.caution {
  color: #a95c00;
  background: #fff4df;
}

.status-pill.new,
.attitude.watch {
  color: #1f5fbf;
  background: #eef5ff;
}

.price {
  color: #0f172a;
  font-size: 17px;
}

.score {
  color: #0f8a6b;
}

.rank-item {
  grid-template-columns: 26px 34px 1fr auto;
  padding: 7px 4px;
  border-radius: 10px;
}

.rank-item:hover {
  background: #f6faf9;
}

.rank-num {
  color: #0f6f58;
  font-size: 16px;
}

.rank-logo {
  background: linear-gradient(135deg, #1f5fbf, #0f8a6b);
}

.topic-thumb {
  background: linear-gradient(135deg, #dbeafe, #d9f4ea);
}

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

.model-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.model-item:hover {
  border-color: rgba(15, 138, 107, 0.28);
  background: #f8fbfa;
}

.model-rank {
  color: #0f6f58;
  font-weight: 900;
}

.model-main,
.model-side {
  display: grid;
  gap: 3px;
}

.model-main strong,
.model-side strong {
  color: #0f172a;
  font-size: 14px;
}

.model-main small,
.model-side small {
  color: #64748b;
  font-size: 12px;
}

.model-side {
  text-align: right;
}

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

.feed-list {
  gap: 10px;
}

.feed-list .article-row {
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 120px;
}

.feed-list .article-thumb {
  min-height: 92px;
}

.article-thumb {
  min-height: 98px;
  color: #0f6f58;
  background:
    linear-gradient(135deg, rgba(15, 138, 107, 0.12), rgba(31, 95, 191, 0.08)),
    #f8fafc;
}

.attitude {
  color: #0f8a6b;
  background: #e8f7f2;
}

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

.breadcrumb {
  color: #64748b;
}

.product-hero {
  grid-template-columns: 136px minmax(0, 1fr) 200px;
  padding: 22px;
}

.product-hero .logo-box {
  width: 132px;
  height: 132px;
  border-radius: 22px;
}

.product-hero h1 {
  color: #0f172a;
}

.score-card {
  background: #f8fbfa;
}

.product-hero .score-card {
  display: grid;
  align-content: center;
  gap: 10px;
}

.big-score {
  color: #0f6f58;
}

.stars {
  color: #0f8a6b;
}

.feature-item {
  border: 1px solid #edf2f7;
  background: #ffffff;
}

.feature-icon {
  color: #0f8a6b;
  background: #e8f7f2;
}

.case-thumb {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(15, 138, 107, 0.12)),
    linear-gradient(135deg, #f8fafc, #edf7f3);
}

.play-badge {
  background: rgba(15, 23, 42, 0.58);
}

.signal-card strong {
  color: #0f8a6b;
}

.table-wrap {
  border-color: #e2e8f0;
  background: #ffffff;
}

.compare-table th,
.admin-table th {
  color: #475569;
  background: #f8fafc;
}

.compare-table td,
.admin-table td {
  color: #334155;
}

.admin-sidebar,
.inspector {
  top: 86px;
}

.admin-nav a.active,
.admin-nav a:hover {
  color: #0f6f58;
  background: #e8f7f2;
}

.confidence span {
  background: linear-gradient(90deg, #0f8a6b, #46c799);
}

.status-chip {
  color: #1f5fbf;
  background: #eef5ff;
}

.status-chip.ok {
  color: #0f8a6b;
  background: #e8f7f2;
}

.auth-card {
  background: #ffffff;
}

@media (max-width: 1260px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .topbar {
    border-radius: 14px;
  }

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

  .mascot {
    display: none;
  }
}

@media (max-width: 640px) {
  .quick-actions {
    grid-template-columns: 1fr;
  }

  .demand-panel {
    padding: 20px 16px;
  }
}

/* Company hub, logo parser, and tighter product-card polish. */
.brand-mark::after {
  display: none;
}

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

.product-card {
  min-height: 188px;
  padding: 14px;
}

.product-card .product-main {
  min-width: 0;
}

.product-card h3 {
  line-height: 1.2;
}

.product-card p {
  min-height: 42px;
}

.price-line {
  gap: 10px;
  align-items: center;
}

.price-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 9px;
  color: #0f172a;
  background: #f8fafc;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(15, 138, 107, 0.24);
  border-radius: 9px;
  color: #0f6f58;
  background: #eef9f5;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.logo-box.logo-image {
  overflow: hidden;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.logo-box.logo-image img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.company-hub {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(232, 247, 242, 0.84), rgba(255, 255, 255, 0.94)),
    #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.company-hub-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.company-hub h2 {
  margin: 10px 0 6px;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.2;
}

.company-hub p {
  max-width: 680px;
  margin: 0;
  color: #64748b;
  line-height: 1.7;
}

.company-stats {
  display: flex;
  gap: 10px;
}

.company-stats span {
  display: grid;
  gap: 3px;
  min-width: 90px;
  padding: 10px 12px;
  border: 1px solid #dcebe5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.company-stats strong {
  color: #0f6f58;
  font-size: 22px;
  line-height: 1;
}

.company-stats small {
  color: #64748b;
  font-size: 12px;
}

.company-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.product-filter-groups {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.product-filter-groups section {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.product-filter-groups strong {
  padding-top: 9px;
  color: #0f172a;
  font-size: 14px;
  white-space: nowrap;
}

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

.filter-more-chip {
  border-style: dashed;
  color: #0f6f58;
  background: #f8fcfa;
}

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

.directory-switch a {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 13px 15px;
  border: 1px solid #dce7f1;
  border-radius: 14px;
  color: #334155;
  background: #ffffff;
}

.directory-switch a.active {
  border-color: rgba(15, 138, 107, 0.34);
  background: linear-gradient(135deg, #effaf6, #ffffff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.directory-switch strong {
  color: #0f172a;
  font-size: 16px;
}

.directory-switch span {
  color: #64748b;
  font-size: 13px;
}

.company-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 132px;
  padding: 16px;
  border: 1px solid #dce7f1;
  border-radius: 14px;
  color: #0f172a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(237, 250, 246, 0.72)),
    #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}

.company-card:hover {
  border-color: rgba(15, 138, 107, 0.38);
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.company-card .logo-box {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  font-size: 22px;
}

.company-card h3,
.company-card p {
  margin: 0;
}

.company-card h3 {
  margin-bottom: 4px;
  color: #0f172a;
  font-size: 18px;
}

.company-card p {
  color: #64748b;
  line-height: 1.55;
}

.company-card .tag-row {
  margin-top: 9px;
}

.company-card .link-more {
  white-space: nowrap;
}

.directory-grid {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

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

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

.directory-card {
  min-width: 0;
}

.category-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #dce7f1;
  border-radius: 14px;
  color: #0f172a;
  background:
    linear-gradient(135deg, #ffffff, #f5fbf8),
    #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
}

.category-card:hover {
  border-color: rgba(15, 138, 107, 0.38);
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.category-card .link-more {
  grid-column: 2;
  align-self: end;
}

.category-card h3,
.category-card p {
  margin: 0;
}

.category-card h3 {
  margin-bottom: 4px;
  color: #0f172a;
  font-size: 18px;
}

.category-card p {
  color: #64748b;
  font-size: 13px;
}

.category-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #0f6f58;
  background: #e8f7f2;
  font-size: 16px;
  font-weight: 900;
}

.category-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.category-examples span {
  max-width: 112px;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: 999px;
  color: #315e55;
  background: #edf7f3;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logo-parse-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fbfa;
}

.logo-parse-box p {
  margin: 4px 0 0;
}

@media (max-width: 1260px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .company-hub-head {
    grid-template-columns: 1fr;
  }

  .company-stats {
    flex-wrap: wrap;
  }

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

  .product-filter-groups section {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-filter-groups strong {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .company-directory-grid,
  .category-directory-grid {
    grid-template-columns: 1fr;
  }

  .directory-switch {
    grid-template-columns: 1fr;
  }

  .price-badge {
    white-space: normal;
  }
}

/* Home community polish: visual product cards, compact filters, podium ranking, sharing. */
.layout {
  grid-template-columns: 224px minmax(0, 1fr) 292px;
  gap: 18px;
}

.left-sidebar,
.right-rail {
  border-radius: 16px;
}

.filter-list {
  display: grid;
  gap: 2px;
}

.filter-item {
  grid-template-columns: 24px auto max-content;
  justify-content: start;
  column-gap: 8px;
  min-height: 34px;
  padding: 5px 6px;
  font-size: 13px;
}

.filter-item .count {
  justify-self: start;
  min-width: auto;
  margin-left: 2px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.filter-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 12px;
}

.product-grid,
.compact-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
  padding-bottom: 0;
}

.product-card {
  min-width: 0;
  min-height: 330px;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
}

.product-card > * {
  min-width: 0;
}

.product-card .product-top {
  align-items: flex-start;
  gap: 10px;
}

.product-card .logo-box:not(.media-logo) {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 11px;
  font-size: 18px;
}

.product-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.product-name,
.rank-name,
.article-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-name {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-desc {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card .tag-row {
  gap: 6px;
  min-height: 28px;
  overflow: hidden;
}

.product-card .tag,
.product-card .status-pill {
  max-width: 112px;
  min-height: 24px;
  overflow: hidden;
  padding: 4px 8px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  gap: 8px;
  margin-top: auto;
}

.price-badge {
  justify-content: flex-start;
  min-width: 0;
  min-height: 32px;
  padding: 0 9px;
  font-size: 13px;
  white-space: nowrap;
}

.card-action {
  min-width: 48px;
  min-height: 32px;
  padding: 0 9px;
  font-size: 13px;
}

.quote-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  width: 100%;
  min-height: 58px;
  gap: 8px;
  margin-top: auto;
  padding: 10px;
  border: 1px solid rgba(15, 138, 107, 0.14);
  border-radius: 12px;
  background: #f6fbf8;
}

.quote-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e7f5ee;
  color: #04745f;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.community-quote {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #31445f;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card:hover .quote-line {
  border-color: rgba(15, 138, 107, 0.24);
  background: #f1faf5;
}

.product-media {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 112px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.24)),
    linear-gradient(135deg, #eef6ff, #e9f8f1);
}

.product-media::before {
  position: absolute;
  inset: auto -28px -34px auto;
  width: 104px;
  height: 104px;
  content: "";
  border-radius: 50%;
  background: rgba(15, 138, 107, 0.16);
}

.media-window {
  display: flex;
  gap: 4px;
}

.media-window span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
}

.media-content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.media-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  font-size: 16px;
}

.media-content strong,
.media-content small {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-content strong {
  color: #0f172a;
  font-size: 15px;
}

.media-content small {
  color: #64748b;
  font-size: 12px;
}

.media-bars {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  width: 58%;
}

.media-bars i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.11);
}

.product-media-image {
  display: block;
  padding: 0;
  background: #f8fafc;
}

.product-media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-source {
  display: none;
}

.media-bars i:nth-child(2) {
  width: 72%;
}

.media-bars i:nth-child(3) {
  width: 44%;
}

.media-heygen,
.media-pixverse,
.media-runway {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, #f7e8ff, #e8f2ff 48%, #f3fff4);
}

.media-cursor,
.media-qwen-max,
.media-chatgpt-4o {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.12)),
    linear-gradient(135deg, #0f172a, #174b76 52%, #0f8a6b);
}

.media-cursor .media-content strong,
.media-cursor .media-content small,
.media-qwen-max .media-content strong,
.media-qwen-max .media-content small,
.media-chatgpt-4o .media-content strong,
.media-chatgpt-4o .media-content small {
  color: #ffffff;
}

.media-cursor .media-bars i,
.media-qwen-max .media-bars i,
.media-chatgpt-4o .media-bars i,
.media-cursor .media-window span,
.media-qwen-max .media-window span,
.media-chatgpt-4o .media-window span {
  background: rgba(255, 255, 255, 0.32);
}

.podium-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.podium-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  color: #0f172a;
  background: #ffffff;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.podium-card:hover {
  border-color: rgba(15, 138, 107, 0.32);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.podium-card.place-1 {
  min-height: 148px;
  background: linear-gradient(180deg, #f2fbf7, #ffffff);
}

.podium-card.place-2 {
  min-height: 124px;
}

.podium-card.place-3 {
  min-height: 112px;
}

.podium-rank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #ffffff;
  background: #0f8a6b;
  font-weight: 900;
}

.podium-card strong {
  max-width: 78px;
  overflow: hidden;
  font-size: 13px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-card small {
  max-width: 80px;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-brief-list {
  display: grid;
  gap: 8px;
}

.brief-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
  color: #0f172a;
}

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

.brief-item span {
  grid-row: span 2;
  color: #0f8a6b;
  font-size: 12px;
  font-weight: 900;
}

.brief-item strong,
.brief-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-item strong {
  font-size: 13px;
}

.brief-item small {
  color: #64748b;
  font-size: 12px;
}

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

.score-metrics span,
.score-action-card {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.score-action-card {
  min-height: 74px;
  align-content: center;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.score-action-card:hover {
  border-color: rgba(15, 138, 107, 0.32);
  background: #f2fbf7;
}

.score-metrics strong,
.score-action-card strong {
  color: #0f6f58;
  font-size: 20px;
  line-height: 1.1;
}

.score-metrics small,
.score-action-card small,
.share-status {
  color: #64748b;
  font-size: 12px;
}

.score-action-card small {
  font-weight: 800;
}

.score-action {
  width: 100%;
  min-height: 34px;
  margin-top: 10px;
}

.share-status {
  min-height: 18px;
  margin: 10px 0 0;
}

.submit-success {
  text-align: left;
}

.submit-card {
  width: min(860px, 100%);
}

.submit-page-layout {
  grid-template-columns: minmax(0, 860px);
  align-items: start;
  justify-content: center;
  place-items: start center;
  width: min(860px, calc(100% - 32px));
  min-height: auto;
  margin: 0 auto;
  padding: 24px 0 56px;
  gap: 18px;
}

.submit-page-layout .submit-card {
  width: 100%;
}

.submit-contact-card {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel-strong);
}

.submit-contact-card.has-operator-qr {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: stretch;
}

.submit-contact-main {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.submit-contact-card h2,
.submit-contact-card .field {
  margin: 0;
}

.submit-contact-card h2 {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
}

.submit-contact-note {
  color: var(--muted);
  line-height: 1.5;
}

.submit-contact-note.is-error {
  color: var(--red);
  font-weight: 700;
}

.submit-operator-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #cdeee1;
  border-radius: 14px;
  background: #f4fbf8;
}

.submit-operator-contact strong,
.submit-operator-contact p {
  display: block;
}

.submit-operator-contact strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.submit-operator-contact p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.submit-operator-qr {
  display: grid;
  gap: 5px;
  justify-items: center;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.submit-operator-qr img {
  display: block;
  width: 86px;
  height: 110px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}

.submit-operator-qr:focus-visible {
  outline: 3px solid rgba(18, 103, 242, 0.2);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .submit-contact-card.has-operator-qr {
    grid-template-columns: 1fr;
  }

  .submit-operator-contact {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .submit-operator-qr img {
    width: 92px;
    height: 124px;
  }
}

.submit-parser-card {
  display: grid;
  gap: 12px;
  margin: 20px 0 22px;
  padding: 18px;
  border: 1px solid #cdeee1;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 12%, rgba(40, 196, 70, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(244, 251, 248, 0.98), rgba(255, 255, 255, 0.98));
}

.submit-parser-card h2,
.submit-parser-card p {
  margin: 0;
}

.submit-parser-card h2 {
  color: #071021;
  font-size: 22px;
}

.submit-parser-card p {
  color: #5f708c;
  line-height: 1.65;
}

.submit-parser-card textarea {
  min-height: 118px;
  background: #ffffff;
}

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

.submit-parser-actions small {
  color: #5f708c;
  line-height: 1.5;
}

.submit-draft-summary {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d8e6f5;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.submit-draft-summary[hidden] {
  display: none;
}

.submit-draft-summary b,
.submit-draft-summary small {
  display: block;
}

.submit-draft-summary small {
  margin-top: 3px;
  color: #5f708c;
}

.submit-draft-summary p {
  margin: 0;
  color: #53657f;
}

.submit-mode-field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  border: 0;
}

.submit-mode-field legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: #101828;
  font-size: 14px;
  font-weight: 640;
}

.submit-mode-field.compact {
  margin-top: 10px;
}

.submit-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 82px;
  padding: 14px;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: 180ms ease;
}

.submit-choice:hover,
.submit-choice:has(input:checked) {
  border-color: #a7d6c9;
  background: #f4fbf8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.submit-choice input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: #08765f;
}

.submit-choice b,
.submit-choice small {
  display: block;
}

.submit-choice b {
  color: #101828;
  font-size: 15px;
}

.submit-choice small {
  margin-top: 4px;
  color: #5f6f85;
  line-height: 1.55;
}

.cjk-phrase {
  display: inline-block;
  white-space: nowrap;
}

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

.submit-form-grid .full {
  grid-column: 1 / -1;
}

.submit-field-hint {
  color: var(--color-muted, #5f708c);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.field textarea.submit-compact-textarea {
  min-height: 72px;
}

.beta-submit-fields {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #d8eee7;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(247, 252, 250, 0.96), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.beta-submit-fields[hidden] {
  display: none;
}

.submit-optional-card {
  margin: 18px 0;
  padding: 14px;
  border: 1px dashed #cde0f5;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}

.submit-optional-card summary {
  color: #0f5f4e;
  font-weight: 850;
  cursor: pointer;
}

.submit-optional-card .muted {
  margin: 8px 0 0;
}

.beta-code-note,
.beta-code-card,
.admin-beta-code-card {
  border: 1px solid #cdeee1;
  border-radius: 14px;
  background: #f6fffb;
}

.beta-code-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  color: #0f5f4e;
}

.beta-code-note span,
.beta-code-card small,
.admin-beta-code-card small {
  color: #60758a;
  line-height: 1.6;
}

.beta-code-card {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding: 16px;
}

.beta-code-card span,
.admin-beta-code-card span {
  color: #087a63;
  font-weight: 800;
}

.beta-code-card strong {
  color: #071228;
  font-size: 28px;
  letter-spacing: 0.04em;
}

.admin-beta-code-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.submit-subhead h2,
.submit-subhead p {
  margin: 0;
}

.submit-subhead h2 {
  color: #101828;
  font-size: 18px;
}

.submit-subhead p {
  margin-top: 4px;
  color: #5f6f85;
  line-height: 1.65;
}

.beta-field-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin: 4px 0 8px;
}

.beta-field-map span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d7e9e3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.beta-field-map b {
  color: var(--color-green-dark, #08765f);
  font-size: 13px;
}

.beta-field-map small {
  color: var(--color-muted, #5f708c);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .submit-page-layout {
    grid-template-columns: 1fr;
    width: min(860px, calc(100% - 24px));
    padding-top: 12px;
  }

  .submit-mode-field,
  .submit-form-grid {
    grid-template-columns: 1fr;
  }

  .submit-form-grid .full {
    grid-column: auto;
  }
}

@media (max-width: 1320px) {
  .layout {
    grid-template-columns: 210px minmax(0, 1fr) 280px;
  }

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

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

  .left-sidebar,
  .right-rail {
    position: static;
  }

  .left-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .left-sidebar {
    grid-template-columns: 1fr;
  }

  .product-grid,
  .compact-products {
    grid-template-columns: 1fr;
  }

  .company-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .company-card .logo-box {
    width: 44px;
    height: 44px;
  }

  .company-card .link-more {
    grid-column: 2;
  }

  .product-card {
    min-height: auto;
  }

  .podium-list {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .podium-card,
  .podium-card.place-1,
  .podium-card.place-2,
  .podium-card.place-3 {
    min-height: auto;
    grid-template-columns: 28px 38px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }
}

body[data-page="admin"] .app-shell {
  width: min(1880px, 100%);
  padding-inline: 14px;
}

body[data-page="admin"] .admin-shell {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
}

body[data-page="admin"] .admin-shell > section {
  min-width: 0;
}

body[data-page="admin"] .inspector {
  position: static;
  grid-column: 2;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.admin-detail-page,
.admin-create-panel {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-soft);
}

.admin-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.admin-detail-title {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.admin-detail-title h2 {
  margin: 0;
  font-size: 24px;
}

.admin-detail-title .logo-box {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

.admin-detail-title p,
.admin-detail-page .muted {
  line-height: 1.65;
}

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

.admin-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.candidate-editor-panel {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
}

.candidate-editor-panel > .admin-detail-head {
  grid-column: 1 / -1;
}

.candidate-editor-panel > .candidate-edit-form {
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
}

.candidate-editor-panel > .admin-detail-grid {
  position: static;
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: 1fr;
}

.admin-detail-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e4edf7;
  border-radius: 14px;
  background: #ffffff;
}

.admin-detail-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

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

.detail-field {
  min-width: 0;
  padding: 11px;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  background: #f8fbff;
}

.detail-field span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.detail-field strong,
.detail-field a {
  display: block;
  min-width: 0;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 14px;
}

.detail-progress {
  display: grid;
  gap: 8px;
}

.detail-progress-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9f0f8;
}

.detail-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

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

.admin-form-grid label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.admin-form-grid label.full {
  grid-column: 1 / -1;
}

.admin-form-grid > .full {
  min-width: 0;
  grid-column: 1 / -1;
}

.admin-basic-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8eee7;
  border-radius: 14px;
  background: #f7fffb;
}

.product-editor-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid #d8eee7;
  border-radius: 14px;
  background: #f7fffb;
}

.product-editor-map strong {
  grid-column: 1 / -1;
  color: #071021;
  font-size: 14px;
}

.product-editor-map span {
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff;
  color: #40516b;
  font-size: 12px;
  font-weight: 750;
}

.admin-form-section {
  margin-top: 8px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(216, 230, 245, 0.9);
}

.admin-form-section span {
  display: block;
  color: #007a63;
  font-size: 13px;
  font-weight: 900;
}

.admin-form-section p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.admin-form-grid label small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 650;
}

.structured-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.structured-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.structured-editor-head > div {
  display: grid;
  gap: 4px;
}

.structured-editor-head strong {
  color: var(--text);
  font-size: 14px;
}

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

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

.structured-editor-row {
  display: grid;
  grid-template-columns: 32px minmax(160px, 0.72fr) minmax(240px, 1.28fr) auto;
  min-width: 0;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.structured-editor-row label {
  min-width: 0;
}

.structured-editor-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 26px;
  border-radius: 9px;
  color: var(--green);
  background: var(--blue-2);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 900;
}

.structured-editor-row textarea {
  min-height: 84px;
}

.structured-editor-remove {
  align-self: end;
  margin-bottom: 1px;
}

.score-dimension-editor {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.score-dimension-head,
.score-dimension-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 140px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
}

.score-dimension-head {
  color: var(--muted);
  background: #f8fbff;
  font-size: 12px;
  font-weight: 850;
}

.score-dimension-row {
  border-top: 1px solid var(--line);
}

.score-dimension-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--green);
  background: var(--blue-2);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 900;
}

.score-dimension-row input {
  min-width: 0;
}

.admin-benefit-heading {
  margin-top: 20px;
}

.admin-relation-editor {
  display: grid;
  gap: 8px;
}

.admin-relation-editor > span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.admin-relation-editor > p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.competitor-editor-table {
  display: grid;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.competitor-editor-head,
.competitor-editor-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 112px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 12px;
}

.competitor-editor-head {
  color: #64748b;
  background: #f8fbff;
  font-size: 12px;
  font-weight: 850;
}

.competitor-editor-row {
  border-top: 1px solid #edf2f7;
}

.competitor-editor-row > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #08765f;
  background: #e7f6f0;
  font-size: 12px;
  font-weight: 900;
}

.competitor-editor-control {
  display: block;
  min-width: 0;
  width: 100%;
}

.competitor-editor-row input {
  width: 100%;
  min-height: 36px;
}

.competitor-editor-row small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.comparison-draft-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.comparison-draft-actions small,
.comparison-draft-editor small {
  color: var(--color-muted, #5f708c);
  font-size: 12px;
  line-height: 1.5;
}

.comparison-draft-editor {
  display: grid;
  gap: 8px;
}

.comparison-draft-editor textarea {
  min-height: 180px;
  padding: 12px;
  line-height: 1.6;
}

.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  outline: 0;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

.admin-form-grid textarea {
  min-height: 108px;
  padding-top: 11px;
  resize: vertical;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.candidate-edit-form .admin-form-actions .admin-status-line {
  flex: 1 1 260px;
}

.admin-status-line {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.admin-table tbody tr.selected {
  background: rgba(37, 109, 244, 0.08);
  box-shadow: inset 3px 0 0 var(--blue);
}

.admin-table tbody tr {
  cursor: pointer;
}

@media (max-width: 1180px) {
  body[data-page="admin"] .admin-shell,
  body[data-page="admin"] .inspector {
    grid-template-columns: 1fr;
    grid-column: 1 / -1;
  }

  .admin-sidebar {
    position: static;
    min-height: 0;
  }

  .admin-detail-grid,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .candidate-editor-panel {
    grid-template-columns: 1fr;
  }

  .candidate-editor-panel > .candidate-edit-form,
  .candidate-editor-panel > .admin-detail-grid {
    position: static;
    grid-column: 1;
    grid-row: auto;
  }

  .structured-editor-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .structured-editor-row label,
  .structured-editor-remove {
    grid-column: 2;
  }

  .product-editor-map {
    grid-template-columns: 1fr;
  }

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

  .competitor-editor-head span:last-child,
  .competitor-editor-row small {
    display: none;
  }
}

@media (max-width: 720px) {
  .admin-detail-head,
  .admin-detail-title,
  .detail-field-grid {
    grid-template-columns: 1fr;
  }

  .admin-detail-actions {
    justify-content: flex-start;
  }
}

/* Heat bar leaderboard, model sources, product community profile. */
.share-heat-button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: color 0.18s ease, transform 0.18s ease;
}

.share-heat-button:hover,
.share-heat-button:focus-visible {
  color: #075e4c;
  transform: translateX(2px);
}

.share-heat-button:focus-visible {
  outline: 2px solid rgba(15, 138, 107, 0.32);
  outline-offset: 3px;
  border-radius: 999px;
}

.share-heat-button:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.heatbar-list {
  position: relative;
  display: flex;
  align-items: end;
  gap: 10px;
  min-height: 214px;
  padding: 12px 8px 14px;
}

.heatbar-list::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 20px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #b8cad9 4%, #b8cad9 96%, transparent);
}

.heatbar-card {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  justify-items: center;
  gap: 9px;
  color: #0f172a;
}

.heatbar-likes {
  color: #0f6f58;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.heatbar-likes small {
  margin-left: 2px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.heatbar-column {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 72px;
  height: var(--bar-h);
  min-height: 82px;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #dff4ec, #bfe5d6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.heatbar-column::after {
  display: none;
}

.heatbar-card.place-1 .heatbar-column {
  background: linear-gradient(180deg, #d8f8ed, #73d5b4);
}

.heatbar-card.place-2 .heatbar-column {
  background: linear-gradient(180deg, #e9eef8, #cdd8f2);
}

.heatbar-card.place-3 .heatbar-column {
  background: linear-gradient(180deg, #edf4ff, #c4d8ff);
}

.heatbar-column .rank-logo {
  width: 38px;
  height: 38px;
  color: #ffffff;
  background: linear-gradient(135deg, #0f172a, #0f8a6b);
}

.heatbar-card strong,
.heatbar-card > small {
  max-width: 78px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heatbar-card strong {
  font-size: 13px;
}

.heatbar-card > small {
  color: #64748b;
  font-size: 11px;
}

.native-commercial-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.native-commercial-card,
.native-mini-service {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 18px;
  overflow: hidden;
  color: #0f172a;
  text-decoration: none;
  border: 1px solid #d7e7f4;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 12%, rgba(18, 103, 242, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(242, 250, 247, 0.92));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.native-commercial-card:hover,
.native-commercial-card:focus-visible,
.native-mini-service:hover,
.native-mini-service:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(18, 103, 242, 0.28);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.1);
}

.native-commercial-card span,
.native-mini-service span {
  width: fit-content;
  padding: 4px 9px;
  color: #08765f;
  font-size: 12px;
  font-weight: 900;
  border-radius: 999px;
  background: #eaf8f1;
}

.native-commercial-card strong,
.native-mini-service strong {
  font-size: 18px;
  line-height: 1.3;
}

.native-commercial-card p,
.native-mini-service small {
  margin: 0;
  color: #52647a;
  line-height: 1.65;
}

.native-commercial-card small {
  color: #08765f;
  font-weight: 900;
}

.commercial-geo {
  background:
    radial-gradient(circle at 92% 12%, rgba(52, 199, 75, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 251, 255, 0.92));
}

.native-mini-service {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
}

.native-mini-service strong {
  font-size: 15px;
}

.native-mini-service small {
  font-size: 12px;
}

.benchmark-source-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf2f7;
}

.benchmark-title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.benchmark-source {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #0f172a;
  background: #ffffff;
}

.benchmark-source strong {
  font-size: 13px;
}

.benchmark-source small {
  color: #64748b;
  font-size: 12px;
}

.product-overview .overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 12px;
}

.overview-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.overview-panel h3 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 16px;
}

.overview-panel .info-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.overview-panel .info-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.overview-panel .info-card + .info-card {
  padding-top: 10px;
  border-top: 1px solid #edf2f7;
}

.overview-panel .info-card h3 {
  margin-bottom: 4px;
  color: #334155;
  font-size: 13px;
}

.overview-panel .feature-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.overview-panel .feature-item {
  min-height: auto;
  padding: 9px;
  border-radius: 10px;
}

.case-grid {
  display: block;
  column-count: 2;
  column-gap: 12px;
}

.community-case {
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px;
  break-inside: avoid;
  border-radius: 14px;
}

.case-author {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  color: #0f6f58;
  background: #e8f7f2;
  font-weight: 900;
}

.case-author strong,
.case-author small {
  display: block;
}

.case-author small {
  color: #64748b;
  font-size: 12px;
}

.case-video-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.18), rgba(15, 138, 107, 0.16)),
    linear-gradient(135deg, #f8fafc, #dff4ec);
}

.case-video-card .media-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.case-video-card .duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.72);
  font-size: 12px;
}

.case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  color: #64748b;
  font-size: 12px;
}

.rating-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

.rating-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
}

.rating-row span {
  color: #334155;
  font-weight: 800;
}

.rating-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef5;
}

.rating-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f5fbf, #0f8a6b);
}

.rating-row strong {
  color: #0f6f58;
  text-align: right;
}

.rating-row small {
  grid-column: 2 / 4;
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 960px) {
  .product-overview .overview-grid {
    grid-template-columns: 1fr;
  }

  .case-grid {
    column-count: 1;
  }
}

@media (max-width: 720px) {
  .heatbar-list {
    min-height: 180px;
  }

  .heatbar-column {
    max-width: 64px;
  }

  .rating-row {
    grid-template-columns: 82px minmax(0, 1fr) 34px;
  }
}

/* Product page v2: compact info cards, campaign cases, transposed comparison. */
.product-info-cards {
  display: grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(360px, 0.95fr);
  gap: 12px;
  align-items: start;
}

.product-info-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

.product-info-card h3 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 16px;
}

.logo-box.logo-image:empty::after {
  content: attr(data-initial);
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  color: #ffffff;
  background: linear-gradient(135deg, #1267f2, #08765f);
  font-weight: 900;
}

.hero-intro {
  max-width: 62ch;
  margin: 8px 0 10px;
  color: #4a5d78;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  text-wrap: pretty;
}

.hero-basic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  max-width: 760px;
  margin: 2px 0 16px;
  color: #5f708c;
  font-size: 13px;
  line-height: 1.7;
}

.hero-basic-meta span {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  max-width: none;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hero-basic-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 9px;
  color: #9ab0c9;
}

.hero-basic-meta b {
  color: #5f708c;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.hero-basic-meta small {
  min-width: 0;
  overflow: visible;
  color: #17233a;
  font-size: 13px;
  font-weight: 760;
  text-overflow: clip;
  white-space: nowrap;
}

.intro-card p {
  margin: 0 0 14px;
  color: #475569;
  font-size: 14px;
  line-height: 1.8;
}

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

.info-meta-grid span,
.function-mini-grid span,
.pricing-list div {
  min-width: 0;
}

.info-meta-grid b,
.info-meta-grid small {
  display: block;
}

.info-meta-grid b {
  color: #64748b;
  font-size: 12px;
}

.info-meta-grid small {
  overflow: hidden;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

.function-mini-grid i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #0f8a6b;
  background: #e8f7f2;
  font-style: normal;
  font-size: 12px;
}

.function-mini-grid b {
  overflow: hidden;
  color: #334155;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.function-detail-list div {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2f2eb;
  border-radius: 12px;
  background: #f7fcfa;
}

.function-detail-list i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #08765f;
  background: #dff7ec;
  font-style: normal;
  font-size: 10px;
  line-height: 1;
}

.function-detail-list span,
.function-detail-list b,
.function-detail-list small {
  min-width: 0;
}

.function-detail-list b,
.function-detail-list small {
  display: block;
}

.function-detail-list b {
  overflow: hidden;
  color: #102038;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.function-detail-list small {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #60718c;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pricing-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.pricing-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f7;
}

.pricing-list .highlight-row {
  grid-template-columns: 1fr;
}

.strength-limit-card {
  grid-column: 1 / -1;
  gap: 14px;
}

.strength-limit-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #dce7e3;
  border-radius: 10px;
  background: #ffffff;
}

.strength-limit-section {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: #f7fcfa;
}

.strength-limit-section.is-limit {
  border-left: 1px solid #ece4d8;
  background: #fffaf4;
}

.strength-limit-label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 0 12px;
  border-bottom: 1px solid #dcebe5;
  color: #08765f;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.strength-limit-label::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22a06b;
  content: "";
}

.is-limit .strength-limit-label {
  color: #8a4f08;
  border-bottom-color: #f0e2d0;
  background: transparent;
}

.is-limit .strength-limit-label::before {
  border-radius: 2px;
  background: #d58a24;
}

.strength-limit-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(203, 218, 213, 0.58);
}

.strength-limit-row:last-child {
  border-bottom: 0;
}

.strength-limit-row i {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: #22a06b;
}

.is-limit .strength-limit-row i {
  border-radius: 2px;
  background: #d58a24;
}

.strength-limit-row b,
.strength-limit-row small {
  display: block;
}

.strength-limit-row b {
  color: #102038;
  font-size: 13px;
  line-height: 1.4;
}

.strength-limit-row small {
  margin-top: 3px;
  color: #60718c;
  font-size: 12px;
  line-height: 1.55;
}

.suitable-for {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #1267f2;
  color: #52647d;
  background: #f5f9ff;
  font-size: 12px;
  line-height: 1.6;
}

.suitable-for b {
  display: inline;
  margin-right: 10px;
  color: #1267f2;
}

.rating-card {
  min-width: 0;
}

.radar-rating-layout {
  display: grid;
  grid-template-columns: minmax(190px, 1.05fr) minmax(130px, 0.75fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.score-radar {
  min-width: 0;
  margin: 0;
}

.score-radar svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 206px;
  overflow: visible;
}

.score-radar-grid,
.score-radar-axis {
  fill: none;
  stroke: var(--scheme-line);
  stroke-width: 1;
}

.score-radar-axis {
  stroke: var(--scheme-line-soft);
}

.score-radar-area {
  fill: color-mix(in srgb, var(--scheme-blue) 17%, transparent);
  stroke: var(--scheme-blue);
  stroke-linejoin: round;
  stroke-width: 2;
}

.score-radar-point {
  fill: var(--scheme-green);
  stroke: var(--scheme-card);
  stroke-width: 2;
}

.score-radar-label {
  fill: var(--scheme-muted);
  font-size: 10px;
  font-weight: 700;
}

.radar-score-list {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.radar-score-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--scheme-line-soft);
}

.radar-score-list li:last-child {
  border-bottom: 0;
}

.radar-score-list span {
  overflow: hidden;
  color: var(--scheme-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radar-score-list strong {
  color: var(--scheme-green);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rating-card > .muted {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
}

.pricing-list .benefit-row {
  align-items: center;
  padding: 12px;
  border: 1px solid #cfeadc;
  border-radius: 12px;
  background: linear-gradient(135deg, #f1fbf6, #ffffff);
}

.pricing-list div:last-child {
  border-bottom: 0;
}

.pricing-list b,
.pricing-list small {
  display: block;
}

.pricing-list b {
  color: #0f172a;
  font-size: 13px;
}

.pricing-list small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.pricing-list strong {
  color: #0f172a;
  font-size: 13px;
  white-space: nowrap;
}

.pricing-list .benefit-row strong {
  color: #08765f;
  font-size: 14px;
}

.benefit-contact-btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  border: 0;
  color: #007a68;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.benefit-note {
  display: block;
  margin-top: 8px;
  line-height: 1.6;
}

.benefit-modal {
  width: min(420px, 100%);
}

.benefit-modal-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.benefit-modal-head h3 {
  margin: 4px 0 6px;
  color: #071021;
  font-size: 24px;
  line-height: 1.2;
}

.benefit-modal-head p {
  margin: 0;
  color: #5f708c;
  font-size: 14px;
  line-height: 1.5;
}

.benefit-qr-box {
  display: grid;
  width: min(240px, 82vw);
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto;
  padding: 14px;
  border: 1px solid #d8e6f5;
  border-radius: 24px;
  background: #ffffff;
}

.benefit-qr-box img,
.benefit-qr-box svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.benefit-qr-placeholder {
  color: #5f708c;
  font-size: 13px;
  font-weight: 800;
}

.benefit-contact-copy {
  margin: 14px 0 0;
  color: #5f708c;
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}

.hero-actions .ghost-btn.active {
  border-color: #bfe7d4;
  color: #007a68;
  background: #eefbf5;
}

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

.compact-rating-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.compact-rating-row span {
  overflow: hidden;
  color: #475569;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-rating-row i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef5;
}

.compact-rating-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f5fbf, #0f8a6b);
}

.compact-rating-row strong {
  color: #0f6f58;
  font-size: 13px;
  text-align: right;
}

.rating-card > small {
  display: block;
  margin-top: 12px;
}

.case-campaign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #d9eee7;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(232, 247, 242, 0.92), rgba(255, 255, 255, 0.96)),
    #ffffff;
}

.case-campaign h3 {
  margin: 10px 0 6px;
  color: #0f172a;
  font-size: 20px;
}

.case-campaign p {
  max-width: 720px;
  margin: 0;
  color: #475569;
  line-height: 1.7;
}

.campaign-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.campaign-benefits span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #0f6f58;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.campaign-reward {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 14px;
  border: 1px solid #dcebe5;
  border-radius: 14px;
  background: #ffffff;
}

.campaign-reward small,
.campaign-reward span {
  color: #64748b;
  font-size: 12px;
}

.campaign-reward strong {
  color: #0f6f58;
  font-size: 22px;
}

.campaign-reward .primary-btn {
  margin-top: 6px;
}

.case-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 12px;
}

.reward-tag {
  color: #9a5400;
  background: #fff4df;
}

.transposed-compare {
  min-width: 980px;
}

.transposed-compare th,
.transposed-compare td {
  min-width: 150px;
  vertical-align: top;
}

.transposed-compare th:first-child,
.transposed-compare td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 96px;
  color: #0f172a;
  background: #f8fafc;
}

.transposed-compare td strong + .status-pill {
  display: inline-flex;
  margin-left: 6px;
}

@media (max-width: 1200px) {
  .product-info-cards {
    grid-template-columns: 1fr;
  }

  .product-info-cards .function-card-wide,
  .product-info-cards .rating-card {
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  .product-info-cards .function-card-wide,
  .product-info-cards .strength-limit-card,
  .product-info-cards .rating-card {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .product-info-cards,
  .case-campaign {
    grid-template-columns: 1fr;
  }

  .product-info-cards .function-card-wide,
  .product-info-cards .strength-limit-card,
  .product-info-cards .rating-card {
    grid-column: auto;
    grid-row: auto;
  }

  .info-meta-grid,
  .function-mini-grid,
  .function-detail-list,
  .strength-limit-sections {
    grid-template-columns: 1fr;
  }

  .strength-limit-section.is-limit {
    border-top: 1px solid #ece4d8;
    border-left: 0;
  }

  .function-detail-list small {
    display: block;
    overflow: visible;
    -webkit-box-orient: initial;
    -webkit-line-clamp: initial;
  }

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

  .score-radar svg {
    max-height: 220px;
  }

  .radar-score-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* Forum-style community posts. */
#caseGrid.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-count: auto;
  gap: 12px;
}

.forum-post {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px;
  overflow: visible;
  border-radius: 14px;
}

.post-author {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.post-author .avatar {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}

.post-author strong,
.post-author small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-author strong {
  color: #0f172a;
  font-size: 15px;
}

.post-author small {
  color: #64748b;
  font-size: 12px;
}

.post-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.post-title {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.35;
}

.post-content {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.8;
}

.post-attachment {
  margin-top: 12px;
}

.video-attachment {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.18), rgba(15, 138, 107, 0.16)),
    linear-gradient(135deg, #f8fafc, #dff4ec);
}

.link-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: auto;
  padding: 12px 14px;
  border: 1px solid #d9e8f6;
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 10%, rgba(18, 103, 242, 0.08), transparent 28%),
    #f8fbff;
}

.link-attachment .media-badge {
  position: static;
}

.link-attachment .play-badge {
  display: none;
}

.link-attachment .link-more {
  margin-left: auto;
}

.upload-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.upload-inline-btn {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.upload-inline small {
  color: #64748b;
  line-height: 1.5;
}

.post-image-preview {
  position: relative;
  display: block;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #d9e8f6;
  border-radius: 14px;
  background: #f8fbff;
}

.post-image-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.post-image-preview .media-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

.video-attachment .media-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.video-attachment .duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.72);
  font-size: 12px;
}

.post-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.post-image-grid span {
  display: grid;
  place-items: center;
  min-height: 112px;
  border-radius: 12px;
  color: #0f6f58;
  background:
    linear-gradient(135deg, rgba(15, 138, 107, 0.12), rgba(31, 95, 191, 0.08)),
    #f8fafc;
  font-weight: 900;
}

.post-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  color: #64748b;
  font-size: 13px;
}

.post-reply {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fbfa;
}

.post-reply b {
  color: #0f6f58;
  font-size: 13px;
}

.post-reply span {
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

.community-composer {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid #d8eee7;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 253, 251, 0.98), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.community-composer h3,
.community-composer p {
  margin: 0;
}

.community-composer h3 {
  margin-top: 4px;
  color: #0f172a;
  font-size: 18px;
}

.community-composer p {
  margin-top: 6px;
  color: #64748b;
  line-height: 1.65;
}

.composer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);
  gap: 10px;
}

.composer-grid label,
.composer-row label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.composer-grid input,
.composer-grid textarea,
.composer-grid select,
.comment-form input {
  width: 100%;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

.composer-grid input,
.composer-grid select,
.comment-form input {
  min-height: 40px;
  padding: 0 11px;
}

.composer-grid textarea {
  min-height: 108px;
  padding: 10px 11px;
  resize: vertical;
}

.composer-grid label:nth-child(3) {
  grid-column: 1 / -1;
}

.composer-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  grid-column: 1 / -1;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.composer-actions span {
  color: #64748b;
  font-size: 13px;
}

/* Global community feed: light product mentions, not heavy category channels. */
.community-page {
  display: grid;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 16px 48px;
}

.community-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 26px 28px;
  border: 1px solid #dbe5ee;
  border-radius: 16px;
  background:
    radial-gradient(circle at right 10%, rgba(15, 118, 110, 0.08), transparent 26%),
    linear-gradient(135deg, rgba(248, 253, 251, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
}

.community-page-head h1,
.community-page-head p,
.community-feed-head h2,
.community-feed-head p,
.community-side-card h2 {
  margin: 0;
}

.community-page-head h1 {
  margin-top: 6px;
  color: #0f172a;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.16;
}

.community-page-head p {
  max-width: 760px;
  margin-top: 10px;
  color: #475569;
  font-size: 15px;
  line-height: 1.8;
}

.community-head-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: 8px;
}

.community-head-stats span,
.community-incentive-list span {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid #d8eee7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.community-head-stats b,
.community-incentive-list b {
  color: #08765f;
  font-size: 20px;
  line-height: 1.15;
}

.community-head-stats small,
.community-incentive-list small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

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

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

.community-main,
.community-side {
  display: grid;
  gap: 14px;
}

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

.community-feed-composer {
  margin-bottom: 0;
  padding: 18px;
}

.community-feed-side .community-feed-composer {
  position: relative;
  padding: 18px;
}

.community-feed-side .community-composer-grid {
  grid-template-columns: 1fr;
}

.community-feed-side .story-editor,
.community-feed-side .optional-product-picker,
.community-feed-side .field-group {
  grid-column: 1 / -1;
}

.community-feed-side .story-body-field textarea {
  min-height: 132px;
}

.community-feed-side .composer-actions {
  align-items: center;
  justify-content: flex-end;
}

.community-feed-side .composer-actions span {
  font-size: 12px;
  line-height: 1.55;
}

.community-feed-side .composer-status:empty {
  display: none;
}

.community-feed-side .composer-status:not(:empty) {
  margin-right: auto;
}

.community-feed-side .composer-intro-compact {
  margin-bottom: 12px;
}

.community-feed-side .composer-media-field {
  gap: 8px;
}

.composer-intro h2 {
  margin: 4px 0 0;
  color: #0f172a;
  font-size: 20px;
}

.community-composer-grid {
  grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
}

.community-composer-grid .scenario-label {
  grid-column: 1 / -1;
}

.composer-grid .scenario-label {
  grid-column: 1 / -1;
}

.community-feed-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid #dbe5ee;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.feed-count {
  flex: 0 0 auto;
  color: #08765f;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.community-feed-head h2 {
  color: #0f172a;
  font-size: 22px;
}

.community-feed-head p {
  margin-top: 4px;
  color: #64748b;
}

.community-feed-list {
  display: grid;
  gap: 12px;
}

.community-feed-list .forum-post {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.community-feed-list .forum-post:hover {
  border-color: #b8d9cf;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.post-product-mention {
  display: inline-grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  max-width: 100%;
  justify-self: end;
  width: min(190px, 100%);
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #d8eee7;
  border-radius: 999px;
  color: inherit;
  background: #f6fbf9;
  text-decoration: none;
}

.post-product-mention:hover {
  border-color: #9ed0c2;
  background: #edf7f3;
}

.post-product-mention .mention-logo,
.mention-product-list .mention-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
}

.post-product-mention b,
.post-product-mention small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-product-mention b {
  color: #0f172a;
  font-size: 13px;
}

.post-product-mention small {
  color: #64748b;
  font-size: 12px;
}

.community-side {
  position: sticky;
  top: 88px;
}

.community-side-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe5ee;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.community-side-card h2 {
  color: #0f172a;
  font-size: 18px;
}

.side-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.side-card-head h2,
.side-card-head small {
  margin: 0;
}

.side-card-head small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}

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

.community-author-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #edf3f8;
  border-radius: 13px;
  background: rgba(248, 252, 250, 0.86);
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #dff8ef, #eef6ff);
  color: #08765f;
}

.author-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.author-copy b,
.author-copy small,
.author-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author-copy b {
  color: #0f172a;
  font-size: 14px;
}

.author-copy small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.author-copy em {
  color: #08765f;
  font-size: 12px;
  font-style: normal;
}

.follow-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
}

.rail-empty {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
}

.community-incentive-list {
  display: grid;
  gap: 8px;
}

.community-rule-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  color: #475569;
  line-height: 1.65;
}

.compact-head {
  align-items: center;
}

.mention-product-list {
  display: grid;
  gap: 8px;
}

.mention-product-list a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  color: inherit;
  background: #fbfdfc;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}

.mention-product-list a:hover {
  border-color: #b8d9cf;
  background: #f4faf7;
}

.mention-product-list b,
.mention-product-list small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-product-list b {
  color: #0f172a;
  font-size: 14px;
}

.mention-product-list small {
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 1080px) {
  .community-layout,
  .community-page-head {
    grid-template-columns: 1fr;
  }

  .community-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .community-side-card:last-child {
    grid-column: 1 / -1;
  }

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

@media (max-width: 720px) {
  .community-page {
    padding: 12px 10px 34px;
  }

  .community-page-head,
  .community-feed-composer,
  .community-feed-head,
  .community-side-card {
    padding: 14px;
    border-radius: 13px;
  }

  .community-page-head h1 {
    font-size: 30px;
  }

  .community-head-stats,
  .community-composer-grid,
  .community-side,
  .mention-product-list {
    grid-template-columns: 1fr;
  }

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

.community-lite-layout {
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
}

.community-lite-composer-grid {
  grid-template-columns: 1fr;
}

.community-lite-composer-grid label,
.community-lite-composer-grid .optional-product-picker {
  grid-column: 1 / -1;
}

.optional-product-picker {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px dashed #cfe3dc;
  border-radius: 12px;
  background: #fbfdfc;
}

.optional-product-picker summary {
  color: #0f6f58;
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
}

.optional-product-picker select {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

.slim-badges {
  margin-top: 12px;
  margin-bottom: 0;
}

.slim-badges .tag {
  min-height: 24px;
  padding: 3px 8px;
}

.post-footer .link-button {
  min-height: 28px;
  padding: 0 4px;
  color: #0f6f58;
  font-weight: 620;
  cursor: pointer;
}

.post-footer .link-button:disabled {
  color: #94a3b8;
  cursor: default;
}

.admin-direct-composer {
  display: grid;
  gap: 14px;
  margin: 12px 0 16px;
  padding: 16px;
  border: 1px solid #d8eee7;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 253, 251, 0.98), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.admin-direct-composer strong,
.admin-direct-composer p {
  margin: 0;
}

.admin-direct-composer strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
}

.admin-direct-composer p {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

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

.admin-direct-grid .story-editor,
.admin-direct-grid .auto-topic-panel {
  grid-column: 1 / -1;
}

.admin-direct-grid > label:nth-child(3) {
  grid-column: auto;
}

.admin-direct-grid label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 620;
}

.admin-direct-grid label:nth-child(3) {
  grid-column: 1 / -1;
}

.admin-direct-grid > label:nth-child(3) {
  grid-column: auto;
}

.admin-direct-grid input,
.admin-direct-grid select,
.admin-direct-grid textarea {
  width: 100%;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

.admin-direct-grid input,
.admin-direct-grid select {
  min-height: 40px;
  padding: 0 11px;
}

.admin-direct-grid textarea {
  min-height: 96px;
  padding: 10px 11px;
  resize: vertical;
}

@media (max-width: 720px) {
  .admin-direct-grid {
    grid-template-columns: 1fr;
  }
}

.pending-post {
  border-color: #f1d7aa;
  background: #fffdf8;
}

.warn-tag {
  color: #8a4f08;
  background: #fff3d6;
}

.link-button {
  padding: 0;
  border: 0;
  color: #0f6f58;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.link-button:disabled {
  color: #94a3b8;
  cursor: default;
}

.post-image-grid-real {
  grid-template-columns: 1fr;
}

.post-image-grid-real a {
  display: grid;
  place-items: center;
  min-height: 112px;
  border-radius: 12px;
  color: #0f6f58;
  background:
    linear-gradient(135deg, rgba(15, 138, 107, 0.12), rgba(31, 95, 191, 0.08)),
    #f8fafc;
  font-weight: 900;
}

.comment-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fbfa;
}

.comment-list p {
  display: flex;
  gap: 8px;
  margin: 0;
  color: #475569;
  font-size: 13px;
}

.comment-list b {
  color: #0f6f58;
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.comment-form[hidden] {
  display: none;
}

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

.moderation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  background: #ffffff;
}

.moderation-item.pending {
  border-color: #f1d7aa;
  background: #fffdf8;
}

.moderation-item p,
.moderation-item small {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.moderation-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.link-ingest-card {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #d8eee7;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(248, 253, 251, 0.98), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.link-ingest-card h2,
.link-ingest-card p {
  margin: 0;
}

.link-ingest-card h2 {
  margin-top: 5px;
  color: #0f172a;
  font-size: 19px;
}

.link-ingest-card p {
  margin-top: 5px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.link-ingest-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px auto;
  gap: 10px;
  align-items: end;
}

.link-ingest-fields label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.link-ingest-fields input,
.link-ingest-fields select,
.link-ingest-fields textarea {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

.link-ingest-fields textarea {
  min-height: 112px;
  padding: 11px;
  line-height: 1.55;
  resize: vertical;
}

.multi-source-ingest-fields {
  grid-template-columns: minmax(0, 1fr) auto;
}

.link-ingest-source-field {
  min-width: 0;
}

.link-ingest-source-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.link-ingest-result {
  min-height: 0;
}

.ingest-result-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.ingest-result-card strong {
  color: #0f172a;
}

.ingest-result-head,
.ingest-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ingest-result-actions {
  margin-top: 6px;
}

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

@media (max-width: 720px) {
  .composer-grid,
  .composer-row,
  .comment-form,
  .moderation-item,
  .link-ingest-fields {
    grid-template-columns: 1fr;
  }

  .composer-actions,
  .moderation-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .post-image-grid {
    grid-template-columns: 1fr;
  }
}

/* Growth loop: beta offers, participation tasks, monetized posts, and product ops. */
.beta-section {
  border-color: #d8eee7;
  background:
    linear-gradient(135deg, rgba(248, 253, 251, 0.98), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.section-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.section-action-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;
}

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

.beta-directory-grid {
  align-items: stretch;
}

.home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  min-height: 0;
  padding: 18px;
}

.home-carousel {
  position: relative;
  min-height: 172px;
  overflow: hidden;
  border: 1px solid #d8eee7;
  border-radius: 16px;
  background: #f6fbfa;
}

.carousel-track {
  position: relative;
  min-height: 172px;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 26px 92px 26px 70px;
  overflow: hidden;
  color: #101828;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transform: translateX(18px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.slide-community {
  background:
    radial-gradient(circle at 84% 22%, rgba(255, 230, 153, 0.72), transparent 22%),
    radial-gradient(circle at 8% 82%, rgba(164, 224, 198, 0.72), transparent 22%),
    linear-gradient(135deg, #f2fbf5, #fffaf0);
}

.slide-beta {
  background:
    radial-gradient(circle at 82% 35%, rgba(175, 218, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #f4fbff, #f7fdf8);
}

.slide-ranking {
  background:
    radial-gradient(circle at 82% 34%, rgba(193, 218, 255, 0.8), transparent 24%),
    linear-gradient(135deg, #f7f9ff, #f3fbf7);
}

.slide-kicker {
  width: fit-content;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #075e4c;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 640;
}

.carousel-slide strong {
  max-width: 560px;
  color: #101828;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 680;
  line-height: 1.18;
}

.carousel-slide small {
  max-width: 520px;
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
}

.slide-mascot {
  position: absolute;
  right: 28px;
  bottom: -18px;
  width: 130px;
  opacity: 0.86;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.1));
}

.carousel-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(184, 217, 207, 0.9);
  border-radius: 50%;
  color: #075e4c;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  transform: translateY(-50%);
  transition: 180ms ease;
}

.carousel-nav:hover {
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.carousel-nav.prev {
  left: 12px;
}

.carousel-nav.next {
  right: 12px;
}

.carousel-dots {
  position: absolute;
  right: 20px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 118, 95, 0.26);
  cursor: pointer;
  transition: 180ms ease;
}

.carousel-dots button.active {
  width: 20px;
  background: #08765f;
}

.home-hero .demand-search {
  max-width: none;
  margin: 0;
}

.home-hero .hot-searches {
  margin-top: 0;
  padding: 0 2px;
}

@media (max-width: 720px) {
  .carousel-slide {
    padding: 24px 52px 72px 22px;
  }

  .carousel-slide strong {
    font-size: 24px;
  }

  .slide-mascot {
    right: 12px;
    bottom: -16px;
    width: 98px;
    opacity: 0.58;
  }

  .carousel-nav {
    width: 30px;
    height: 30px;
    font-size: 22px;
  }
}

@media (max-width: 1080px) {
  .layout {
    display: flex;
    flex-direction: column;
  }

  .layout > section {
    order: 1;
  }

  .left-sidebar {
    order: 2;
  }

  .right-rail {
    order: 3;
  }
}

@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell {
    padding-right: 8px;
    padding-left: 8px;
  }

  .layout,
  .layout > *,
  .glass-card,
  .section,
  .left-sidebar,
  .right-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .topbar {
    overflow: hidden;
  }

  .nav {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 6px;
  }

  .nav-link {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }

  .top-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .top-search {
    width: 100%;
    min-width: 0;
  }

  .home-carousel,
  .carousel-track {
    min-height: 214px;
  }

  .carousel-slide {
    padding-right: 18px;
  }

  .carousel-slide strong,
  .carousel-slide small {
    max-width: calc(100% - 22px);
    overflow-wrap: anywhere;
  }

  .slide-mascot {
    opacity: 0.28;
  }

  .home-hero,
  .home-hero * {
    min-width: 0;
  }

  .home-hero {
    overflow: hidden;
  }

  .home-hero .demand-search {
    grid-template-columns: minmax(0, 1fr) 42px;
    padding-left: 12px;
  }

  .home-hero .search-btn {
    width: 38px;
    height: 38px;
  }

  .home-hero .hot-searches {
    overflow: hidden;
    line-height: 1.8;
  }

  .beta-program-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    justify-content: start;
  }

  .beta-card-head {
    justify-content: start;
  }
}

.beta-program-card {
  display: grid;
  min-width: 0;
  min-height: 250px;
  gap: 9px;
  padding: 14px;
  border: 1px solid #dcebe5;
  border-radius: 14px;
  background: #ffffff;
  transition: 180ms ease;
}

.beta-program-card:hover {
  border-color: rgba(15, 138, 107, 0.32);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
  transform: translateY(-2px);
}

.beta-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.beta-phase {
  color: #0f6f58;
  font-size: 12px;
  font-weight: 900;
}

.beta-program-card h3,
.beta-program-card strong,
.beta-program-card p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.beta-program-card h3 {
  color: #0f172a;
  font-size: 18px;
}

.beta-program-card > strong {
  color: #1e293b;
  font-size: 14px;
}

.beta-program-card p {
  display: -webkit-box;
  overflow: hidden;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

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

.beta-card-meta span,
.participation-stats span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.beta-card-meta b,
.participation-stats b {
  color: #0f6f58;
  font-size: 14px;
}

.beta-card-meta small,
.participation-stats small {
  color: #64748b;
  font-size: 12px;
}

.beta-reward {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #8a4f08;
  background: #fff7e6;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.participation-strip {
  display: block;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d8eee7;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 253, 251, 0.98), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: none;
}

.participation-strip[hidden] {
  display: none !important;
}

.participation-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.participation-title-row h2 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 760px;
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.35;
  text-wrap: pretty;
}

.participation-title-row .primary-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.participation-summary p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

.participation-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #08765f;
  background: #e4f8ed;
  font-size: 12px;
  font-weight: 900;
}

.participation-summary .participation-compact-meta {
  margin-top: 12px;
}

.participation-public-reward {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #f0dec2;
  border-radius: 12px;
  background: #fff9ef;
}

.participation-public-reward small {
  color: #8a6b41;
  font-size: 12px;
}

.participation-public-reward strong {
  color: #7f4d0a;
  font-size: 13px;
  line-height: 1.5;
}

.participation-compact-meta,
.participation-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.participation-compact-meta span,
.participation-reward {
  display: grid;
  gap: 7px;
  align-content: center;
  padding: 14px;
  border: 1px solid #dcebe5;
  border-radius: 14px;
  background: #ffffff;
}

.participation-compact-meta span {
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
}

.participation-compact-meta b {
  min-width: 0;
  overflow: hidden;
  color: #0f6f58;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participation-compact-meta small {
  color: #64748b;
  font-size: 12px;
}

.participation-reward > small,
.participation-reward > span {
  color: #64748b;
  font-size: 12px;
}

.participation-reward > strong {
  color: #0f6f58;
  font-size: 22px;
  line-height: 1.2;
}

.participation-tasks {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.participation-tasks article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.participation-tasks article > span {
  color: #0f8a6b;
  font-size: 12px;
  font-weight: 900;
}

.participation-tasks h3,
.participation-tasks p {
  margin: 0;
}

.participation-tasks h3 {
  color: #0f172a;
  font-size: 16px;
}

.participation-tasks p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.participation-tasks strong {
  color: #8a4f08;
  font-size: 13px;
}

.campaign-task {
  margin-top: 8px !important;
  color: #0f6f58 !important;
  font-weight: 760;
}

.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.campaign-actions small {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f1f7f5;
}

.post-economy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #e9eef5;
  border-radius: 12px;
  background: #fbfcfe;
}

.post-economy span {
  display: grid;
  gap: 2px;
}

.post-economy b {
  color: #0f172a;
  font-size: 12px;
}

.post-economy small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.operation-board {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #d8eee7;
  border-radius: 16px;
  background: #fbfefd;
}

.operation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

.operation-head h2 {
  margin-top: 8px;
  color: #0f172a;
  font-size: 20px;
}

.operation-head p {
  margin-top: 4px;
  color: #64748b;
}

.admin-focus-strip,
.operation-todo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.admin-focus-card {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(216, 230, 245, 0.95);
  border-radius: 16px;
  background: #ffffff;
  color: #17233a;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.admin-focus-card:hover,
.admin-focus-card:focus-visible {
  border-color: rgba(18, 103, 242, 0.32);
  box-shadow: 0 14px 34px rgba(20, 92, 140, 0.08);
  transform: translateY(-1px);
}

.admin-focus-card.muted-card {
  cursor: default;
  background: rgba(248, 251, 255, 0.86);
}

.admin-focus-card span {
  color: #5f708c;
  font-size: 13px;
  font-weight: 800;
}

.admin-focus-card b {
  color: #08765f;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-focus-card small {
  color: #5f708c;
  font-size: 13px;
  line-height: 1.55;
}

.operation-todo-card,
.relation-merged-card {
  padding: 16px;
  border: 1px solid rgba(216, 230, 245, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.operation-todo-list {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.operation-todo-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(216, 230, 245, 0.78);
}

.operation-todo-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.operation-todo-list strong {
  display: block;
  color: #071021;
  font-size: 14px;
  line-height: 1.35;
}

.operation-todo-list p {
  margin: 4px 0 0;
  color: #5f708c;
  font-size: 13px;
  line-height: 1.55;
}

.relation-merged-card {
  display: grid;
  gap: 12px;
  max-width: 720px;
}

.relation-merged-card h2,
.relation-merged-card p {
  margin: 0;
}

.relation-merged-card p {
  max-width: 62ch;
  color: #5f708c;
  line-height: 1.7;
}

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

.operation-metrics span {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.operation-metrics b {
  color: #0f6f58;
  font-size: 24px;
}

.operation-metrics small,
.operation-metrics em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.operation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 12px;
}

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

.operation-actions article,
.sentiment-panel {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.operation-actions strong,
.sentiment-panel h3,
.sentiment-item strong {
  color: #0f172a;
}

.operation-actions p,
.sentiment-item p {
  margin: 6px 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.operation-actions span,
.sentiment-item span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #0f6f58;
  background: #e8f7f2;
  font-size: 12px;
  font-weight: 800;
}

.sentiment-panel {
  display: grid;
  gap: 10px;
}

.sentiment-panel h3 {
  margin: 0;
  font-size: 16px;
}

.sentiment-item {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid #edf2f7;
}

@media (max-width: 1180px) {
  .beta-program-grid,
  .participation-tasks,
  .operation-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-grid {
    grid-template-columns: 1fr;
  }

  .participation-compact-meta,
  .participation-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .beta-program-grid,
  .participation-tasks,
  .participation-compact-meta,
  .participation-stats,
  .operation-metrics,
  .operation-actions,
  .post-economy {
    grid-template-columns: 1fr;
  }

  .operation-head {
    display: grid;
  }
}

@media (max-width: 960px) {
  .page-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sticky-rail {
    position: static;
  }
}

@media (max-width: 720px) {
  .product-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .product-hero .logo-box {
    justify-self: start;
    width: 96px;
    height: 96px;
    font-size: 42px;
  }

  .score-card {
    grid-column: auto;
    width: 100%;
  }

  .hero-actions,
  .product-hero .tag-row,
  .section-head {
    justify-content: flex-start;
  }
}

/* Commercial polish: remove demo-like glass/gradient tone and force a stable Chinese sans stack. */
:root {
  --bg: #f6f8fa;
  --bg-2: #eef2f4;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --line: #e3e8ee;
  --line-strong: #cfd8e3;
  --text: #111827;
  --muted: #56657a;
  --faint: #8a96a8;
  --blue: #245f9f;
  --blue-2: #edf4fb;
  --green: #08765f;
  --green-2: #e8f5f1;
  --orange: #b86b12;
  --shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
  --shadow-soft: 0 3px 12px rgba(15, 23, 42, 0.04);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    "Source Han Sans SC",
    Arial,
    sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    "Source Han Sans SC",
    Arial,
    sans-serif;
}

body {
  color: var(--text);
  background: linear-gradient(180deg, #f8fafb 0, #f4f7f8 260px, #f6f8fa 100%);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
.brand-text,
.sidebar-title,
.section-head h1,
.section-head h2,
.card-title,
.product-card h3,
.mini-card strong,
.article-card h3,
.article-row h3,
.admin-detail-head h2,
.operation-head h2 {
  color: #101828;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.28;
}

.muted,
.section-head p,
.operation-head p,
.product-desc,
.article-body p,
.operation-actions p,
.sentiment-item p,
.admin-module-card p {
  color: var(--muted);
  font-weight: 400;
  line-height: 1.68;
}

.topbar,
.left-sidebar,
.right-rail,
.glass-card,
.section,
.auth-card,
.admin-panel,
.product-card,
.mini-card,
.article-card,
.article-row,
.case-card,
.info-card,
.signal-card,
.topic-card,
.stat-card,
.operation-board,
.operation-actions article,
.sentiment-panel,
.admin-module-card,
.link-ingest-card {
  border-color: var(--line);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}

.topbar {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 20px rgba(15, 23, 42, 0.045);
}

.brand-mark,
.logo-box,
.rank-logo {
  background: #0f766e;
  box-shadow: inset 0 -4px 10px rgba(15, 23, 42, 0.14);
}

.brand-mark::after {
  background: #245f9f;
}

.brand-text {
  color: #14324b;
  font-size: 20px;
}

.nav-link,
.admin-nav a {
  color: #344054;
  font-weight: 600;
}

.nav-link:hover,
.nav-link.active,
.admin-nav a.active,
.admin-nav a:hover {
  color: #075e4c;
  background: #e9f4f1;
}

.primary-btn,
.icon-btn,
.search-btn {
  color: #ffffff;
  background: #08765f;
  box-shadow: 0 6px 14px rgba(8, 118, 95, 0.16);
}

.primary-btn:hover,
.icon-btn:hover,
.search-btn:hover {
  background: #075e4c;
}

.secondary-btn {
  color: #075e4c;
  border-color: #b8d9cf;
  background: #f0faf6;
}

.ghost-btn {
  color: #344054;
  border-color: #d9e1ea;
  background: #ffffff;
}

.primary-btn:disabled,
.secondary-btn:disabled,
.ghost-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
  transform: none;
}

.product-card:hover,
.mini-card:hover,
.article-card:hover,
.topic-card:hover,
.stat-action:hover,
.stat-action:focus-visible {
  border-color: #b8d9cf;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.eyebrow,
.link-more,
.signal-card strong,
.operation-metrics b,
.score-big,
.metric-score,
.stat-action small {
  color: #08765f;
}

.tag,
.status-pill,
.status-chip,
.operation-actions span,
.sentiment-item span {
  color: #075e4c;
  background: #edf7f3;
  font-weight: 600;
}

.article-thumb,
.case-thumb,
.topic-thumb,
.website-shot,
.product-shot,
.screenshot-preview {
  background: #edf2f4;
}

.confidence span,
.detail-progress-bar span,
.rating-bar span,
.score-bar span {
  background: #08765f;
}

.admin-table tbody tr.selected {
  background: #edf7f3;
  box-shadow: inset 3px 0 0 #08765f;
}

.beta-access-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid #d8eee7;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(241, 250, 247, 0.94), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.beta-access-panel h3,
.beta-access-panel p {
  margin: 0;
}

.beta-access-panel h3 {
  margin-top: 5px;
  color: #101828;
  font-size: 20px;
  line-height: 1.35;
}

.beta-access-panel p {
  margin-top: 6px;
  color: #5f6f85;
  line-height: 1.7;
}

.beta-policy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.beta-policy-tags span {
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #d8eee7;
  border-radius: 999px;
  color: #075e4c;
  background: #ffffff;
  font-size: 12px;
  font-weight: 560;
}

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

.beta-access-meta span {
  display: grid;
  gap: 2px;
  min-height: 68px;
  align-content: center;
  padding: 10px;
  border: 1px solid #dcebe5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.beta-access-meta b {
  color: #08765f;
  font-size: 18px;
  line-height: 1.1;
}

.beta-access-meta small {
  color: #667085;
  font-size: 12px;
}

.beta-access-actions {
  display: grid;
  gap: 8px;
  min-width: 112px;
}

.private-beta-note {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #d8eee7;
  border-radius: 14px;
  background: #f7fcfa;
}

.private-beta-note strong {
  color: #075e4c;
  font-size: 14px;
}

.private-beta-note span {
  color: #5f6f85;
  font-size: 13px;
  line-height: 1.65;
}

.share-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(12px);
}

.share-modal {
  position: relative;
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid rgba(214, 228, 224, 0.9);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
}

.beta-application-modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.beta-application-head {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--color-line, #d8e6f5);
}

.beta-application-head h2,
.beta-application-head p {
  margin: 0;
}

.beta-application-head h2 {
  margin-top: 4px;
  color: var(--color-ink, #071021);
  font-size: 24px;
  line-height: 1.3;
}

.beta-application-head p {
  max-width: 52ch;
  margin-top: 8px;
  color: var(--color-muted, #5f708c);
  font-size: 14px;
  line-height: 1.7;
}

.beta-application-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 16px 24px 0;
  list-style: none;
}

.beta-application-steps li {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #d9e7e2;
  background: #f7fbf9;
  color: #304a43;
  font-size: 12px;
}

.beta-application-steps li span {
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #0c8a6c;
  color: #fff;
  font-weight: 800;
}

.beta-application-steps li strong {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beta-account-note,
.beta-login-gate {
  display: grid;
  gap: 4px;
  margin: 16px 24px 0;
  padding: 12px 16px;
  border: 1px solid var(--color-line, #d8e6f5);
  border-radius: 12px;
  background: var(--color-page, #f4f9fb);
}

.beta-account-note strong,
.beta-login-gate strong {
  color: var(--color-green-dark, #08765f);
  font-size: 14px;
}

.beta-account-note span,
.beta-login-gate p {
  margin: 0;
  color: var(--color-muted, #5f708c);
  font-size: 12px;
  line-height: 1.6;
}

.beta-login-gate {
  gap: 12px;
  margin-bottom: 24px;
  padding: 20px;
}

.beta-login-gate .primary-btn {
  justify-self: start;
}

.beta-application-form {
  display: grid;
  gap: 14px;
  padding: 18px 24px 22px;
}

.beta-application-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.beta-application-form-grid .full {
  grid-column: 1 / -1;
}

.beta-application-form label {
  display: grid;
  gap: 8px;
  color: var(--color-text, #17233a);
  font-size: 14px;
  font-weight: 720;
}

.beta-application-form textarea {
  min-height: 88px;
  resize: vertical;
}

.beta-application-form .beta-feedback-check {
  display: flex;
  grid-template-columns: none;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #cdeee1;
  border-radius: 12px;
  background: #f6fffb;
  line-height: 1.6;
}

.beta-feedback-check input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin-top: 3px;
  accent-color: var(--color-green-dark, #08765f);
}

.beta-privacy-note {
  margin: -4px 0 0;
  color: var(--color-muted, #5f708c);
  font-size: 12px;
  line-height: 1.6;
}

.beta-application-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.beta-application-actions .form-status {
  margin-right: auto;
  color: var(--color-green-dark, #08765f);
  font-size: 13px;
}

.beta-application-actions .form-status.is-error {
  color: var(--red, #ef5f5f);
}

.beta-application-success {
  display: grid;
  gap: 12px;
  padding: 12px 0 0;
}

.beta-application-success strong {
  color: var(--color-ink, #071021);
  font-size: 20px;
}

.beta-application-success p {
  margin: 0;
  color: var(--color-muted, #5f708c);
  line-height: 1.7;
}

.beta-application-success .secondary-btn {
  justify-self: start;
}

.private-product-detail-gate {
  display: grid;
  min-height: 240px;
  place-items: center;
  padding: 32px 24px;
}

@media (max-width: 560px) {
  .admin-basic-meta-grid {
    grid-template-columns: 1fr;
  }

  .score-dimension-head,
  .score-dimension-row {
    grid-template-columns: 38px minmax(0, 1fr) 104px;
    gap: 7px;
    padding-inline: 9px;
  }
}

.compare-product-link {
  color: var(--color-green-dark, #08765f);
  text-decoration: none;
}

.compare-product-link:hover,
.compare-product-link:focus-visible {
  text-decoration: underline;
}

.comparison-disclaimer {
  margin: 12px 0 0;
  color: var(--color-muted, #5f708c);
  font-size: 12px;
  line-height: 1.6;
}

.private-product-access {
  width: min(640px, 100%);
}

.private-product-access h2,
.private-product-access p {
  margin: 0;
}

.private-product-access h2 {
  margin-top: 8px;
  color: var(--color-ink, #071021);
  font-size: clamp(24px, 3vw, 32px);
}

.private-product-access p {
  max-width: 58ch;
  margin-top: 12px;
  color: var(--color-muted, #5f708c);
  line-height: 1.75;
}

.private-product-access .access-code-form {
  max-width: 520px;
  margin-top: 20px;
}

.admin-beta-applications {
  margin: 20px 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-line, #d8e6f5);
}

.beta-application-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line, #d8e6f5);
  border-radius: 14px;
  background: var(--color-surface, #ffffff);
}

.beta-application-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  table-layout: fixed;
}

.beta-application-table th,
.beta-application-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--color-line, #d8e6f5);
  text-align: left;
  vertical-align: top;
}

.beta-application-table th {
  color: var(--color-muted, #5f708c);
  background: var(--color-page, #f4f9fb);
  font-size: 12px;
  font-weight: 800;
}

.beta-application-table tr:last-child td {
  border-bottom: 0;
}

.beta-application-table td {
  color: var(--color-text, #17233a);
  font-size: 13px;
  line-height: 1.55;
}

.beta-application-table td strong,
.beta-application-table td small {
  display: block;
}

.beta-application-table td small {
  margin-top: 5px;
  color: var(--color-muted, #5f708c);
}

.beta-application-table th:nth-child(1) { width: 16%; }
.beta-application-table th:nth-child(2) { width: 17%; }
.beta-application-table th:nth-child(3) { width: 25%; }
.beta-application-table th:nth-child(4) { width: 14%; }
.beta-application-table th:nth-child(5) { width: 13%; }
.beta-application-table th:nth-child(6) { width: 15%; }

.beta-application-table select,
.beta-application-table textarea {
  width: 100%;
  min-height: 38px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-line, #d8e6f5);
  border-radius: 9px;
  background: #fff;
  color: var(--color-text, #17233a);
  font: inherit;
}

.beta-application-table textarea {
  resize: vertical;
}

.beta-application-purpose strong {
  font-weight: 650;
}

.admin-beta-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 14px;
}

.admin-beta-entry-card,
.admin-beta-code-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid #cfe7de;
  border-radius: 14px;
  background: #f7fcfa;
}

.admin-beta-entry-card {
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
}

.admin-beta-entry-card strong,
.admin-beta-code-card > span:first-child {
  color: var(--color-ink, #071021);
  font-size: 15px;
  font-weight: 820;
}

.admin-beta-entry-card p,
.admin-beta-code-card small {
  margin: 6px 0 0;
  color: var(--color-muted, #5f708c);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
}

.admin-beta-entry-qr {
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  padding: 8px;
  border: 1px solid #d6e4f0;
  border-radius: 12px;
  background: #fff;
}

.admin-beta-entry-qr svg {
  display: block;
  width: 96px;
  height: 96px;
}

.admin-beta-entry-card .secondary-btn {
  justify-self: start;
}

.admin-beta-code-card input {
  width: 100%;
  min-width: 0;
}

.admin-beta-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-benefit-bridge {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #cfe7de;
  border-radius: 14px;
  background: #f7fcfa;
}

.admin-benefit-bridge > div {
  display: grid;
  gap: 5px;
}

.admin-benefit-bridge strong {
  color: var(--color-ink, #071021);
  font-size: 15px;
}

.admin-benefit-bridge p {
  max-width: 76ch;
  margin: 0;
  color: var(--color-muted, #5f708c);
  font-size: 13px;
  line-height: 1.6;
}

.beta-application-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.beta-application-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-line, #d8e6f5);
  border-radius: 16px;
  background: var(--color-surface, #ffffff);
}

.beta-application-card header,
.beta-application-card footer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.beta-application-card h3,
.beta-application-card p {
  margin: 0;
}

.beta-application-card h3 {
  margin-top: 4px;
  color: var(--color-ink, #071021);
  font-size: 16px;
}

.beta-application-card header small,
.beta-application-card footer small {
  display: block;
  margin-top: 4px;
  color: var(--color-muted, #5f708c);
  font-size: 12px;
}

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

.beta-application-facts span {
  padding: 12px;
  border-radius: 12px;
  color: var(--color-text, #17233a);
  background: var(--color-page, #f4f9fb);
  font-size: 13px;
  line-height: 1.6;
}

.beta-application-facts b {
  display: block;
  color: var(--color-muted, #5f708c);
  font-size: 11px;
}

.beta-application-card > p {
  color: var(--color-text, #17233a);
  font-size: 14px;
  line-height: 1.75;
}

.beta-application-card footer {
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--color-line, #d8e6f5);
}

.beta-application-card footer span {
  color: var(--color-muted, #5f708c);
  font-size: 12px;
}

.beta-application-card footer strong {
  color: var(--color-green-dark, #08765f);
  font-size: 14px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dce5ef;
  border-radius: 50%;
  color: #475569;
  background: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  line-height: 1;
}

.share-preview-card {
  padding: 22px;
  background:
    radial-gradient(circle at right 18%, rgba(188, 231, 217, 0.75), transparent 26%),
    linear-gradient(135deg, #f6fbfa, #ffffff 72%);
}

.share-preview-top {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.share-product-logo {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  font-size: 28px;
}

.share-preview-card h3,
.share-preview-card p {
  margin: 0;
}

.share-preview-card h3 {
  margin-top: 4px;
  color: #101828;
  font-size: 24px;
  line-height: 1.2;
}

.share-preview-card p {
  margin-top: 8px;
  color: #5f6f85;
  line-height: 1.7;
}

.share-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.share-preview-tags span {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #075e4c;
  background: #e8f6f1;
  font-size: 12px;
  font-weight: 560;
}

.share-url {
  margin-top: 14px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid #dcebe5;
  border-radius: 12px;
  color: #475569;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 22px 8px;
}

.share-modal-actions .primary-btn,
.share-modal-actions .secondary-btn,
.share-modal-actions .ghost-btn {
  min-height: 40px;
}

.share-tip {
  margin: 0;
  padding: 0 22px 20px;
  color: #667085;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .beta-access-panel {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 560px) {
  .beta-access-meta {
    grid-template-columns: 1fr;
  }

  .share-modal-backdrop {
    align-items: end;
    padding: 12px;
  }

  .share-modal {
    border-radius: 20px;
  }

  .beta-application-head,
  .beta-application-form,
  .beta-application-steps {
    padding-inline: 16px;
  }

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

  .beta-application-form-grid {
    grid-template-columns: 1fr;
  }

  .beta-application-form-grid .full {
    grid-column: auto;
  }

  .admin-beta-access-grid {
    grid-template-columns: 1fr;
  }

  .admin-beta-entry-card {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .admin-beta-entry-qr {
    width: 96px;
    height: 96px;
  }

  .admin-beta-entry-qr svg {
    width: 80px;
    height: 80px;
  }

  .admin-benefit-bridge {
    align-items: stretch;
    flex-direction: column;
  }

  .beta-account-note,
  .beta-login-gate {
    margin-inline: 16px;
  }

  .beta-application-actions,
  .beta-application-actions .primary-btn {
    width: 100%;
  }

  .beta-application-list,
  .beta-application-facts {
    grid-template-columns: 1fr;
  }

  .share-preview-top {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .share-product-logo {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    font-size: 22px;
  }
}

/* Typography pass inspired by mature Chinese community products. */
:root {
  font-family:
    "HarmonyOS Sans SC",
    "MiSans",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    "Source Han Sans SC",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family:
    "HarmonyOS Sans SC",
    "MiSans",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    "Source Han Sans SC",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

body {
  color: #111827;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}

.brand-text {
  color: #10253f;
  font-size: 20px;
  font-weight: 650;
}

.nav-link,
.admin-nav a,
.filter-item,
.company-filter,
.anchor-list a {
  font-weight: 500;
}

.section-head h1,
.demand-copy h1,
.product-hero h1 {
  font-weight: 680;
  line-height: 1.22;
}

.section-head h2,
.sidebar-title,
.card-title,
.product-card h3,
.mini-card strong,
.article-card h3,
.article-row h3,
.admin-detail-head h2,
.operation-head h2,
.admin-module-card strong {
  font-weight: 640;
}

.product-card strong,
.rank-name,
.post-author strong,
.ops-title strong,
.sentiment-item strong,
.detail-field strong {
  font-weight: 620;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn,
.tag,
.status-pill,
.status-chip,
.operation-actions span,
.sentiment-item span {
  font-weight: 560;
}

.muted,
.section-head p,
.operation-head p,
.product-desc,
.article-body p,
.article-row p,
.operation-actions p,
.sentiment-item p,
.admin-module-card p,
.filter-item small,
.company-filter small {
  color: #5f6f85;
  font-weight: 400;
}

.eyebrow {
  font-size: 12px;
  font-weight: 560;
}

.stat-number,
.score-big,
.metric-score,
.operation-metrics b {
  font-weight: 680;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .carousel-slide {
    padding: 22px 16px 24px 22px;
  }

  .carousel-nav {
    display: none;
  }

  .carousel-slide strong {
    max-width: 100%;
    font-size: 22px;
    line-height: 1.25;
  }

  .carousel-slide small {
    max-width: 100%;
    font-size: 13px;
  }

  .slide-mascot {
    display: none;
  }

  .carousel-nav.next {
    right: 6px;
  }

  .carousel-dots {
    right: 12px;
  }

  .home-hero .hot-searches {
    display: block;
  }

  .home-hero .hot-searches a {
    display: inline-block;
    margin-right: 8px;
  }

  .home-hero .demand-search {
    grid-template-columns: 1fr;
    padding: 6px 14px;
  }

  .home-hero .search-btn {
    display: none;
  }

  .beta-card-head {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .beta-card-meta {
    grid-template-columns: 1fr;
  }

  .beta-reward {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Blue-green poster UI pass: bold Chinese type, bright accents, clean white cards. */
:root {
  --poster-blue: #1267f2;
  --poster-blue-2: #0b58df;
  --poster-green: #31bf43;
  --poster-green-2: #17983a;
  --poster-ink: #070b18;
  --poster-muted: #5e6b7d;
  --poster-line: #dbe7f5;
  --poster-soft: #f4f9ff;
  --poster-shadow: 0 18px 44px rgba(20, 82, 146, 0.11);
}

body {
  min-height: 100vh;
  color: var(--poster-ink);
  background:
    radial-gradient(circle at 10% 7%, rgba(18, 103, 242, 0.10), transparent 28%),
    radial-gradient(circle at 88% 3%, rgba(49, 191, 67, 0.11), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f5f9fc 58%, #f7fbff 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  background-image: radial-gradient(circle, rgba(18, 103, 242, 0.18) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 72%, transparent);
}

.app-shell {
  max-width: 1460px;
}

.topbar {
  border: 1px solid rgba(205, 221, 239, 0.95);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.08);
  backdrop-filter: blur(18px);
}

.brand-mark {
  width: 36px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0 5%, transparent 6%),
    linear-gradient(135deg, var(--poster-blue), #09a4d7 54%, var(--poster-green));
  box-shadow: 0 9px 24px rgba(18, 103, 242, 0.22);
}

.brand-text {
  color: #0a2450;
  font-size: 21px;
  font-weight: 900;
}

.nav {
  gap: 6px;
}

.nav-link {
  min-height: 38px;
  padding: 0 15px;
  color: #0f172a;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 760;
}

.nav-link:hover,
.nav-link.active {
  color: var(--poster-blue);
  border-color: rgba(18, 103, 242, 0.14);
  background: #edf5ff;
}

.top-search {
  border: 1px solid #d8e5f3;
  background: #ffffff;
  box-shadow: inset 0 1px 0 #ffffff, 0 8px 24px rgba(15, 40, 80, 0.05);
}

.icon-btn,
.search-btn {
  background: linear-gradient(135deg, var(--poster-blue), #0477dd);
  box-shadow: 0 12px 24px rgba(18, 103, 242, 0.22);
}

.layout {
  gap: 20px;
}

.left-sidebar,
.right-card,
.section,
.auth-card,
.admin-panel {
  border: 1px solid var(--poster-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--poster-shadow);
}

.home-hero {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #d7e7f7;
  border-radius: 26px;
  background:
    radial-gradient(circle at 84% 12%, rgba(49, 191, 67, 0.14), transparent 25%),
    radial-gradient(circle at 16% 24%, rgba(18, 103, 242, 0.10), transparent 27%),
    linear-gradient(135deg, #ffffff, #f7fbff);
}

.home-carousel,
.carousel-track {
  min-height: 228px;
  border-radius: 24px;
}

.carousel-slide {
  overflow: hidden;
  padding: 34px 38px;
  border: 1px solid #dbe8f8;
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 50%, rgba(18, 103, 242, 0.10), transparent 24%),
    radial-gradient(circle at 12% 18%, rgba(49, 191, 67, 0.11), transparent 26%),
    #ffffff;
}

.carousel-slide::after {
  content: "";
  position: absolute;
  right: 112px;
  bottom: 30px;
  width: 92px;
  height: 12px;
  border-radius: 999px;
  background: var(--poster-green);
  transform: rotate(-3deg);
}

.slide-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 12px;
  color: #ffffff;
  background: var(--poster-blue);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(18, 103, 242, 0.18);
}

.slide-kicker::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: rotate(45deg);
}

.slide-beta .slide-kicker,
.slide-ranking .slide-kicker {
  background: var(--poster-green);
  box-shadow: 0 10px 22px rgba(49, 191, 67, 0.16);
}

.carousel-slide strong {
  max-width: 720px;
  margin-top: 28px;
  color: #050812;
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.02;
}

.carousel-slide strong em {
  position: relative;
  display: inline-block;
  color: var(--poster-blue);
  font-style: normal;
  text-shadow: 0 10px 24px rgba(18, 103, 242, 0.13);
}

.carousel-slide strong em::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 0;
  bottom: -4px;
  height: 8px;
  border-radius: 999px;
  background: var(--poster-green);
  transform: rotate(-2deg);
}

.carousel-slide small {
  max-width: 560px;
  margin-top: 22px;
  color: #20304a;
  font-size: 17px;
  font-weight: 700;
}

.slide-mascot {
  right: 38px;
  bottom: 20px;
  width: 136px;
  height: 136px;
  padding: 10px;
  border: 1px solid #dce8f5;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
}

.carousel-nav {
  border-color: #cfe0f3;
  color: var(--poster-blue);
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.carousel-dots span.active {
  background: var(--poster-blue);
}

.demand-search {
  margin-top: 16px;
  min-height: 60px;
  border: 1px solid #d2e0f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(20, 64, 120, 0.08);
}

.demand-search input {
  font-size: 16px;
  font-weight: 560;
}

.hot-searches {
  color: var(--poster-muted);
  font-weight: 700;
}

.hot-searches a {
  color: #0b4e99;
  font-weight: 900;
}

.sidebar-title,
.section-head h1,
.section-head h2,
.right-card h2,
.auth-card h1,
.product-hero h1 {
  color: var(--poster-ink);
  font-weight: 950;
  letter-spacing: 0;
}

.section-head p,
.muted,
.article-summary,
.product-desc {
  color: var(--poster-muted);
}

.link-more,
.share-heat-button {
  color: #078943;
  font-weight: 900;
}

.filter-item {
  min-height: 38px;
  border-radius: 13px;
  color: #183451;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-item:hover {
  background: #eef8ff;
  box-shadow: 0 10px 22px rgba(18, 103, 242, 0.08);
  transform: translateY(-1px);
}

.filter-icon,
.category-icon {
  color: #078943;
  background: #e9f8ee;
  font-weight: 900;
}

.tag,
.status-pill,
.status-chip {
  border-radius: 999px;
  color: #08723f;
  background: #eaf8ee;
  font-weight: 860;
}

.status-pill.new,
.status-chip.ok,
.quote-badge {
  color: #ffffff;
  background: linear-gradient(135deg, var(--poster-blue), #0a81ee);
}

.status-pill.hot,
.beta-reward {
  color: #075e2a;
  background: #e9f8e8;
}

.product-card,
.mini-card,
.article-card,
.article-row,
.community-post,
.beta-program-card,
.directory-card,
.model-item,
.benchmark-source {
  border-color: #dbe7f5;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(20, 82, 146, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover,
.mini-card:hover,
.article-card:hover,
.article-row:hover,
.community-post:hover,
.beta-program-card:hover,
.directory-card:hover,
.model-item:hover {
  border-color: rgba(18, 103, 242, 0.28);
  box-shadow: 0 18px 42px rgba(18, 103, 242, 0.13);
  transform: translateY(-3px);
}

.product-card h3,
.mini-card strong,
.article-card h3,
.article-row h3,
.beta-program-card h3,
.community-post h3 {
  color: #071021;
  font-weight: 920;
}

.product-media {
  border: 1px solid #dbe9f8;
  background:
    radial-gradient(circle at 88% 72%, rgba(49, 191, 67, 0.18), transparent 28%),
    linear-gradient(135deg, #ffffff, #eef6ff);
}

.quote-line {
  border-color: #cdebd8;
  background: #f2fbf5;
}

.quote-badge {
  min-width: 44px;
}

.primary-btn {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, var(--poster-blue), #0b77f0);
  box-shadow: 0 12px 24px rgba(18, 103, 242, 0.18);
}

.secondary-btn {
  border-color: #b8e6c1;
  color: #08723f;
  background: #f0fbf3;
}

.ghost-btn {
  border-color: #d8e5f3;
  color: #183451;
  background: #ffffff;
}

.heatbar-card strong {
  max-width: 94px;
  color: #071021;
  font-size: 12.5px;
  font-weight: 920;
}

.heatbar-card > small {
  max-width: 94px;
}

.heatbar-likes {
  color: #078943;
}

.heatbar-card.place-1 .heatbar-column {
  background: linear-gradient(180deg, #caffd8, #6bd898);
}

.heatbar-card.place-2 .heatbar-column,
.heatbar-card.place-3 .heatbar-column {
  background: linear-gradient(180deg, #e8f2ff, #bdd6ff);
}

.heatbar-column .rank-logo,
.logo-box {
  background: linear-gradient(135deg, var(--poster-blue), #0649b9);
}

.logo-box.dark {
  background: #081124;
}

.daily-brief-item {
  border-color: #e0eaf5;
}

.auth-card {
  max-width: 520px;
  padding: 34px;
}

.auth-card h1 {
  font-size: 32px;
}

.auth-brand {
  margin-bottom: 18px;
}

.auth-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 18px;
}

.auth-tabs button {
  min-width: 96px;
}

.auth-tabs button[aria-pressed="true"] {
  color: #ffffff;
  border-color: var(--poster-blue);
  background: var(--poster-blue);
}

.auth-card #authSubmit {
  width: 100%;
}

.auth-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 14px;
}

.auth-remember-row[hidden] {
  display: none;
}

.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.auth-remember input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--poster-blue);
}

.auth-remember input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--poster-blue) 24%, transparent);
  outline-offset: 3px;
}

.auth-remember-help {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  gap: 8px;
}

.auth-code-row button {
  min-height: 44px;
  padding-inline: 12px;
  white-space: nowrap;
}

.auth-code-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.auth-footnote {
  margin-top: 16px;
}

.form-error.is-success {
  color: var(--poster-green);
}

.auth-dev-link {
  display: inline-flex;
  margin-top: 8px;
  color: var(--poster-blue);
  font-weight: 760;
  text-decoration: none;
}

.field input,
.field select,
.field textarea {
  border-color: #d5e3f2;
  border-radius: 14px;
  background: #ffffff;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--poster-blue);
  box-shadow: 0 0 0 4px rgba(18, 103, 242, 0.10);
  outline: 0;
}

@media (max-width: 1080px) {
  .carousel-slide strong {
    font-size: clamp(32px, 7vw, 52px);
  }

  .slide-mascot {
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 720px) {
  .topbar,
  .home-hero,
  .section,
  .right-card,
  .left-sidebar,
  .auth-card {
    border-radius: 20px;
  }

  .carousel-slide {
    padding: 26px 20px 28px;
  }

  .carousel-slide strong {
    margin-top: 24px;
    font-size: 34px;
  }

  .carousel-slide small {
    font-size: 14px;
  }

  .auth-card {
    padding: 24px 20px;
  }

  .auth-remember-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .auth-remember-help {
    padding-left: 26px;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .topbar {
    gap: 10px;
    padding: 12px;
  }

  .brand-mark {
    width: 38px;
    height: 30px;
  }

  .brand-text {
    font-size: 19px;
  }

  .nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 0 2px;
  }

  .nav-link {
    min-height: 34px;
    padding: 0 13px;
    font-size: 13px;
  }

  .top-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .top-actions .top-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .top-actions .ghost-btn,
  .top-actions .secondary-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
  }
}

/* Editorial right rail and WeChat share polish. */
body[data-page="home"] .right-rail {
  padding: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="home"] .right-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .right-card + .right-card {
  margin-top: 32px;
  padding-top: 0;
}

body[data-page="home"] .right-card .section-head {
  align-items: end;
  margin-bottom: 12px;
}

body[data-page="home"] .right-card .section-head h2 {
  position: relative;
  font-size: 22px;
  line-height: 1.15;
}

body[data-page="home"] .right-card .section-head h2::before {
  content: "//";
  margin-right: 7px;
  color: #1267f2;
  font-weight: 950;
}

body[data-page="home"] .right-card .section-head p {
  margin-top: 5px;
  line-height: 1.4;
}

body[data-page="home"] .share-heat-button,
body[data-page="home"] .link-more {
  color: #078943;
  font-weight: 900;
}

body[data-page="home"] .heatbar-list {
  min-height: 224px;
  padding: 22px 2px 12px;
  gap: 14px;
}

body[data-page="home"] .heatbar-list::after {
  left: 4px;
  right: 4px;
  bottom: 48px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #c1d2e4 9%, #c1d2e4 91%, transparent);
}

body[data-page="home"] .heatbar-card {
  gap: 11px;
}

body[data-page="home"] .heatbar-likes {
  font-size: 22px;
}

body[data-page="home"] .heatbar-column {
  max-width: 82px;
  margin-bottom: 8px;
  border-radius: 19px 19px 8px 8px;
}

body[data-page="home"] .heatbar-column .rank-logo {
  background: linear-gradient(135deg, #1267f2, #0050ca);
}

body[data-page="home"] .heatbar-card.place-1 .heatbar-column {
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.48), transparent 30%),
    linear-gradient(180deg, #ceffd9, #5bda90);
}

body[data-page="home"] .heatbar-card.place-2 .heatbar-column,
body[data-page="home"] .heatbar-card.place-3 .heatbar-column {
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.52), transparent 30%),
    linear-gradient(180deg, #eef5ff, #bcd5ff);
}

body[data-page="home"] .heatbar-card strong {
  max-width: 104px;
  margin-top: 2px;
  font-size: 13px;
}

body[data-page="home"] .daily-brief-list {
  gap: 0;
}

body[data-page="home"] .brief-item {
  grid-template-columns: 46px minmax(0, 1fr);
  padding: 12px 0;
  border-color: #e6edf5;
}

body[data-page="home"] .brief-item strong,
body[data-page="home"] .brief-item small {
  white-space: normal;
}

body[data-page="home"] .brief-item strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="home"] .brief-item small {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="home"] .model-list {
  gap: 8px;
}

body[data-page="home"] .model-item {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #e6edf5;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .model-item:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-page="home"] .benchmark-source-list {
  margin-top: 10px;
  padding-top: 10px;
}

body[data-page="home"] .benchmark-source {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #e6edf5;
  border-radius: 0;
  background: transparent;
}

.article-share-button {
  min-height: auto;
  padding: 0;
  color: #078943;
  font-weight: 900;
}

.article-row-actions {
  align-items: center;
}

.article-row-actions .article-share-button {
  margin-left: auto;
}

.share-modal {
  border-color: #d9e8f6;
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(18, 70, 140, 0.24);
}

.share-preview-card {
  position: relative;
  padding: 28px;
  background:
    radial-gradient(circle at 92% 12%, rgba(52, 199, 75, 0.22), transparent 26%),
    radial-gradient(circle at 8% 88%, rgba(18, 103, 242, 0.10), transparent 30%),
    linear-gradient(135deg, #ffffff, #f8fbff);
}

.share-preview-card::after {
  content: "";
  display: block;
  width: min(260px, 64%);
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: #34c947;
  transform: rotate(-2deg);
}

.share-preview-card .eyebrow,
.share-blue-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 12px 12px 12px 2px;
  color: #ffffff;
  background: #1267f2;
  font-size: 13px;
  font-weight: 900;
}

.share-preview-card h3 {
  color: #071021;
  font-size: 30px;
  font-weight: 950;
  line-height: 1.12;
}

.share-preview-card p {
  color: #475569;
}

.editorial-share-preview h3 {
  margin-top: 18px;
}

.share-preview-tags span {
  color: #075e4c;
  background: #eaf8ee;
  font-weight: 800;
}

.share-url {
  border-color: #d9e8f6;
  background: rgba(255, 255, 255, 0.82);
}

.product-share-modal {
  width: min(560px, 100%);
}

.product-poster-preview {
  padding-bottom: 24px;
}

.product-poster-preview .share-preview-top {
  align-items: start;
}

.share-poster-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #d9e8f6;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.share-poster-panel strong {
  display: block;
  color: #071021;
  font-size: 15px;
}

.share-poster-panel p {
  margin-top: 6px;
  color: #5f708c;
  font-size: 13px;
  line-height: 1.65;
}

.poster-qr-mock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: 64px;
  height: 64px;
  padding: 8px;
  border: 1px solid #cfe1f2;
  border-radius: 14px;
  background: #ffffff;
}

.poster-qr-mock span {
  border-radius: 5px;
  background: #071021;
}

.share-preview-benefit {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #bfead0;
  border-radius: 16px;
  color: #08765f;
  background: #f0fbf3;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.product-share-modal {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
}

.product-poster-sheet {
  margin: 18px 18px 0;
  padding: 0;
  border-radius: 22px;
  background: #f7fbff;
}

.product-poster-sheet img {
  display: block;
  width: 100%;
  max-height: min(68dvh, 720px);
  object-fit: contain;
  border-radius: 18px;
  background: #f7fbff;
  box-shadow: 0 12px 34px rgba(18, 70, 140, 0.12);
}

.poster-loading {
  display: grid;
  min-height: 420px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  border-radius: 18px;
  color: var(--taste-muted, #66758a);
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
}

.poster-loading span {
  width: 42px;
  height: 42px;
  border: 4px solid #dbeafe;
  border-top-color: var(--taste-blue, #1267f2);
  border-radius: 999px;
  animation: poster-spin 0.9s linear infinite;
}

.poster-loading b {
  color: var(--taste-ink, #071021);
  font-size: 16px;
}

.poster-loading small {
  max-width: 280px;
  line-height: 1.6;
}

.poster-error span {
  display: none;
}

.product-share-modal .share-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px 20px 8px;
}

.product-share-modal .share-modal-actions .primary-btn,
.product-share-modal .share-modal-actions .secondary-btn {
  justify-content: center;
}

.product-share-modal .share-tip {
  padding-inline: 20px;
}

@keyframes poster-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 520px) {
  .product-share-modal .share-modal-actions {
    grid-template-columns: 1fr;
  }

  .product-poster-sheet {
    margin-inline: 14px;
  }
}

@media (max-width: 1080px) {
  body[data-page="home"] .right-rail {
    padding: 0;
  }

  body[data-page="home"] .right-card {
    padding: 18px;
    border: 1px solid #dbe7f5;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(20, 82, 146, 0.08);
  }
}

@media (max-width: 720px) {
  .native-commercial-strip {
    grid-template-columns: 1fr;
  }
}

/* Taste-skill pass: mature editorial product UI, less template gloss, no fake previews. */
:root {
  --taste-ink: #071021;
  --taste-text: #152033;
  --taste-muted: #66758a;
  --taste-blue: #1267f2;
  --taste-blue-dark: #0649b9;
  --taste-green: #2fc553;
  --taste-green-dark: #08765f;
  --taste-line: #d9e6f2;
  --taste-line-soft: #eaf1f7;
  --taste-panel: rgba(255, 255, 255, 0.96);
  --taste-panel-soft: rgba(255, 255, 255, 0.78);
  --taste-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 50px rgba(18, 70, 140, 0.07);
  --taste-radius: 18px;
  --blue: var(--taste-blue);
  --green: var(--taste-green-dark);
  --text: var(--taste-text);
  --muted: var(--taste-muted);
  --line: var(--taste-line);
}

body,
button,
input,
select,
textarea {
  font-family:
    "HarmonyOS Sans SC",
    "MiSans",
    "Alibaba PuHuiTi",
    "PingFang SC",
    "Microsoft YaHei",
    Arial,
    sans-serif;
}

body {
  color: var(--taste-text);
  background:
    linear-gradient(180deg, rgba(246, 250, 255, 0.98) 0, rgba(247, 251, 249, 0.96) 360px, #f7f9fb 100%),
    #f7f9fb;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(18, 103, 242, 0.10) 1px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: 0.42;
}

.app-shell {
  width: min(1460px, 100%);
  padding: 14px 18px 54px;
}

.topbar {
  min-height: 60px;
  border: 1px solid var(--taste-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 34px rgba(18, 70, 140, 0.06);
}

.brand-mark {
  width: 40px;
  height: 32px;
  border-radius: 13px 22px 22px 13px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.92) 0 5%, transparent 6%),
    linear-gradient(135deg, var(--taste-blue), #0b77f0 48%, var(--taste-green-dark));
  box-shadow: inset 0 -8px 18px rgba(5, 56, 120, 0.15), 0 9px 22px rgba(18, 103, 242, 0.16);
}

.brand-text {
  color: #0b3270;
  font-size: 21px;
  font-weight: 850;
}

.nav {
  gap: 4px;
}

.nav-link {
  min-height: 38px;
  padding: 0 14px;
  color: #1d2939;
  font-size: 14px;
  font-weight: 720;
}

.nav-link:hover,
.nav-link.active {
  color: #0649b9;
  background: #eaf3ff;
}

.top-search,
.demand-search,
.field input,
.field textarea,
.composer-grid input,
.composer-grid textarea,
.composer-grid select,
.admin-form-grid input,
.admin-form-grid textarea,
.admin-form-grid select,
.admin-direct-grid input,
.admin-direct-grid textarea,
.admin-direct-grid select {
  border-color: var(--taste-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.primary-btn,
.search-btn,
.icon-btn {
  color: #ffffff;
  background: linear-gradient(135deg, var(--taste-blue), #0b77f0);
  box-shadow: 0 10px 22px rgba(18, 103, 242, 0.18);
}

.secondary-btn,
.ghost-btn {
  color: #0b3270;
  border-color: var(--taste-line);
  background: rgba(255, 255, 255, 0.82);
}

.primary-btn:active,
.secondary-btn:active,
.ghost-btn:active,
.danger-btn:active,
.nav-link:active,
.product-card:active,
.article-row:active {
  transform: translateY(1px);
}

.eyebrow,
.slide-kicker,
.tag,
.status-pill {
  letter-spacing: 0;
  text-transform: none;
}

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

.left-sidebar,
.section,
.home-hero,
.right-card,
.auth-card,
.product-hero,
.product-info-card,
.forum-post,
.community-feed-composer,
.community-side-card,
.admin-panel,
.admin-sidebar,
.inspector,
.admin-detail-card,
.admin-direct-composer,
.moderation-card {
  border: 1px solid var(--taste-line);
  border-radius: var(--taste-radius);
  background: var(--taste-panel);
  box-shadow: var(--taste-shadow);
}

.left-sidebar {
  padding: 18px;
}

.sidebar-title,
.section-head h2,
.right-card h2,
.community-page-head h1,
.product-hero h1,
.auth-card h1 {
  color: var(--taste-ink);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.filter-list {
  gap: 3px;
}

.filter-item,
.company-filter {
  min-height: 36px;
  padding: 0 8px;
  border-radius: 10px;
}

.filter-item:hover,
.company-filter:hover,
.filter-item.active,
.company-filter.active {
  color: var(--taste-green-dark);
  background: #ebf8f1;
}

.home-hero {
  padding: 0;
  overflow: hidden;
}

.home-carousel,
.carousel-track {
  min-height: 252px;
}

.carousel-slide {
  padding: 34px 42px 38px;
  border-radius: var(--taste-radius);
  background:
    radial-gradient(circle at 82% 24%, rgba(47, 197, 83, 0.20), transparent 28%),
    radial-gradient(circle at 9% 84%, rgba(18, 103, 242, 0.10), transparent 30%),
    linear-gradient(135deg, #ffffff, #f6fbff);
}

.carousel-slide strong {
  max-width: 700px;
  margin-top: 26px;
  color: var(--taste-ink);
  font-size: clamp(38px, 4.8vw, 66px);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 1.02;
}

.carousel-slide strong em {
  position: relative;
  color: var(--taste-blue);
  font-style: normal;
}

.carousel-slide strong em::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: 4px;
  left: -3px;
  z-index: -1;
  height: 8px;
  border-radius: 999px;
  background: var(--taste-green);
  transform: rotate(-1.5deg);
}

.carousel-slide small {
  max-width: 560px;
  margin-top: 18px;
  color: #48576c;
  font-size: 16px;
  line-height: 1.6;
}

.slide-kicker {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 12px 12px 12px 3px;
  color: #ffffff;
  background: var(--taste-blue);
  font-weight: 850;
}

.slide-mascot {
  right: 28px;
  bottom: 6px;
  max-width: 174px;
  opacity: 0.82;
}

.home-hero .demand-search {
  margin: 18px;
  min-height: 56px;
  border-radius: 16px;
}

.home-hero .hot-searches {
  margin: -4px 18px 18px;
  color: #48576c;
}

.home-hero .hot-searches a {
  color: #0b3270;
  font-weight: 750;
}

.section {
  padding: 22px;
}

.section-head {
  margin-bottom: 16px;
}

.section-head p {
  color: var(--taste-muted);
}

.product-grid,
.compact-products {
  gap: 16px;
}

body[data-page="home"] .product-card {
  min-height: 224px;
  padding: 18px;
  border-radius: 18px;
  background: #ffffff;
}

body[data-page="home"] .product-card:has(.product-media-image) {
  min-height: 316px;
}

.product-card,
.mini-card,
.article-card,
.article-row,
.beta-program-card,
.directory-card {
  border-color: var(--taste-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}

.product-card:hover,
.mini-card:hover,
.article-card:hover,
.article-row:hover,
.beta-program-card:hover,
.directory-card:hover {
  border-color: #b8d6ef;
  box-shadow: 0 18px 44px rgba(18, 70, 140, 0.09);
  transform: translateY(-1px);
}

.product-card h3,
.beta-program-card h3,
.article-row h3,
.forum-post h3 {
  color: var(--taste-ink);
  font-weight: 840;
}

.quote-line {
  border-color: #d8efe5;
  background: #f4fbf7;
}

.quote-badge,
.share-heat-button,
.link-more,
.article-share-button {
  color: var(--taste-green-dark);
}

body[data-page="home"] .right-rail {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .right-card {
  padding: 0 0 26px;
  border: 0;
  border-top: 1px solid var(--taste-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .right-card:first-child {
  border-top: 0;
}

body[data-page="home"] .right-card + .right-card {
  margin-top: 28px;
}

body[data-page="home"] .right-card .section-head h2::before {
  content: "//";
  color: var(--taste-blue);
}

body[data-page="home"] .right-card .section-head p {
  display: none;
}

body[data-page="home"] .heatbar-list {
  min-height: 232px;
  padding: 24px 4px 22px;
}

body[data-page="home"] .heatbar-list::after {
  right: 2px;
  bottom: 39px;
  left: 2px;
  height: 5px;
  background: linear-gradient(90deg, transparent, #b9cadc 8%, #b9cadc 92%, transparent);
}

body[data-page="home"] .heatbar-column {
  max-width: 86px;
  margin-bottom: 14px;
}

body[data-page="home"] .heatbar-likes {
  color: var(--taste-green-dark);
  font-size: 22px;
}

body[data-page="home"] .daily-brief-list {
  border-top: 1px solid var(--taste-line-soft);
}

body[data-page="home"] .brief-item {
  padding: 13px 0;
}

body[data-page="home"] .model-item {
  padding: 12px 0;
}

.native-mini-service {
  border-color: #cfe8dc;
  background: linear-gradient(135deg, #f5fcf8, #ffffff);
}

.product-hero {
  grid-template-columns: 144px minmax(0, 1fr) 210px;
  padding: 28px;
}

.product-hero .logo-box {
  width: 132px;
  height: 132px;
  border-radius: 24px;
}

.score-card {
  border-color: #d8efe5;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fffb, #ffffff);
}

.score-metrics span,
.score-action-card {
  border-color: var(--taste-line);
  border-radius: 12px;
  background: #ffffff;
}

.product-info-cards {
  gap: 14px;
}

.product-info-card {
  min-height: 168px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}

.product-info-card h3 {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.score-bar {
  height: 7px;
  background: transparent;
}

.score-bar span {
  background: linear-gradient(90deg, var(--taste-blue), var(--taste-green-dark));
}

.community-lite-layout {
  grid-template-columns: minmax(0, 860px);
}

.community-feed-composer {
  padding: 22px;
}

.community-feed-composer .eyebrow {
  color: var(--taste-green-dark);
  background: #eaf8ee;
}

.forum-post {
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}

.post-badges .tag,
.slim-badges .tag {
  color: var(--taste-green-dark);
  background: #eaf8ee;
}

.post-footer {
  border-top-color: var(--taste-line-soft);
}

body[data-page="admin"] {
  background: #f6f8fa;
}

body[data-page="admin"]::before {
  display: none;
}

body[data-page="admin"] .app-shell {
  width: min(1800px, 100%);
}

body[data-page="admin"] .admin-sidebar,
body[data-page="admin"] .admin-panel,
body[data-page="admin"] .section,
body[data-page="admin"] .inspector,
body[data-page="admin"] .admin-detail-card {
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-page="admin"] .admin-nav a.active,
body[data-page="admin"] .admin-nav a:hover {
  color: var(--taste-green-dark);
  background: #eaf8ee;
}

body[data-page="admin"] .admin-table th {
  background: #f8fafc;
}

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

  .right-rail {
    grid-column: 1 / -1;
  }

  body[data-page="home"] .right-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  body[data-page="home"] .right-card {
    padding: 18px;
    border: 1px solid var(--taste-line);
    border-radius: var(--taste-radius);
    background: var(--taste-panel);
    box-shadow: var(--taste-shadow);
  }
}

@media (max-width: 820px) {
  .app-shell {
    padding: 10px 10px 42px;
  }

  .layout,
  body[data-page="home"] .right-rail,
  .product-info-cards,
  .product-hero {
    grid-template-columns: 1fr;
  }

  .carousel-slide {
    padding: 28px 20px 30px;
  }

  .carousel-slide strong {
    max-width: 100%;
    font-size: 34px;
  }

  .slide-mascot {
    opacity: 0.18;
  }

  .left-sidebar {
    position: static;
  }

  body[data-page="home"] .product-card {
    min-height: auto;
  }
}

/* Scheme A: keep the cleaner type/nav, calm the poster treatment back into a product site. */
:root {
  --scheme-ink: #071224;
  --scheme-text: #1d2b42;
  --scheme-muted: #64748b;
  --scheme-blue: #1267f2;
  --scheme-green: #0b8a74;
  --scheme-green-soft: #eaf8f2;
  --scheme-line: #dce8f3;
  --scheme-line-soft: #edf3f8;
  --scheme-card: rgba(255, 255, 255, 0.94);
  --scheme-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 14px 34px rgba(36, 87, 132, 0.055);
}

body {
  color: var(--scheme-text);
  background:
    radial-gradient(circle at 80% 0%, rgba(52, 211, 153, 0.12), transparent 30%),
    linear-gradient(180deg, #f7fbff 0, #f8fbfa 380px, #f7f9fb 100%);
}

body::before {
  opacity: 0.18;
  background-size: 28px 28px;
}

.app-shell {
  width: min(1440px, 100%);
  padding: 12px 18px 54px;
}

.topbar {
  min-height: 58px;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 10px 26px rgba(36, 87, 132, 0.05);
}

.brand-mark {
  width: 42px;
  height: 30px;
  border-radius: 16px 24px 24px 16px;
}

.brand-text {
  color: #12386d;
  font-size: 20px;
  letter-spacing: 0;
}

.nav-link {
  min-height: 36px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 760;
}

.nav-link.active,
.nav-link:hover {
  color: #0649b9;
  background: #e9f3ff;
}

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

.left-sidebar,
.section,
.home-hero,
.right-card,
.product-hero,
.product-info-card,
.forum-post,
.community-feed-composer,
.community-side-card,
.admin-panel,
.admin-sidebar,
.inspector,
.admin-detail-card,
.admin-direct-composer,
.moderation-card {
  border-color: var(--scheme-line);
  border-radius: 16px;
  background: var(--scheme-card);
  box-shadow: var(--scheme-shadow);
}

.section,
.left-sidebar {
  padding: 18px;
}

.sidebar-title,
.section-head h2,
.right-card h2,
.product-hero h1,
.community-page-head h1,
.auth-card h1 {
  color: var(--scheme-ink);
  letter-spacing: 0;
}

.section-head {
  margin-bottom: 14px;
}

.section-head p {
  color: var(--scheme-muted);
}

.home-hero {
  padding: 0;
  overflow: hidden;
}

.home-carousel,
.carousel-track {
  min-height: 206px;
}

.carousel-slide {
  padding: 28px 34px 30px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 28%, rgba(52, 211, 153, 0.16), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f5fbff 58%, #f0f8f3 100%);
}

.slide-kicker {
  min-height: 28px;
  padding: 0 11px;
  border-radius: 10px 10px 10px 3px;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(18, 103, 242, 0.13);
}

.slide-kicker::after {
  left: 20px;
  bottom: -5px;
  width: 10px;
  height: 10px;
}

.carousel-slide strong {
  max-width: 630px;
  margin-top: 24px;
  font-size: clamp(34px, 3.8vw, 50px);
  line-height: 1.12;
  letter-spacing: 0;
}

.carousel-slide strong em::after {
  bottom: -1px;
  height: 5px;
  opacity: 0.9;
}

.carousel-slide small {
  max-width: 520px;
  margin-top: 14px;
  color: #52647a;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
}

.slide-mascot {
  right: 24px;
  bottom: 12px;
  width: 118px;
  height: 118px;
  opacity: 0.62;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.carousel-nav {
  width: 32px;
  height: 32px;
}

.home-hero .demand-search {
  min-height: 54px;
  margin: 16px 18px 12px;
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(20, 64, 120, 0.055);
}

.home-hero .hot-searches {
  margin: 0 18px 18px;
  font-size: 13px;
}

.home-hero .hot-searches a {
  font-weight: 800;
}

.beta-section {
  padding: 18px;
}

.beta-program-grid {
  gap: 12px;
}

.beta-program-card {
  min-height: 210px;
  padding: 16px;
}

.beta-program-card p {
  line-height: 1.58;
}

body[data-page="home"] .product-card {
  min-height: 200px;
  padding: 16px;
}

.product-card,
.mini-card,
.article-card,
.article-row,
.beta-program-card,
.directory-card {
  border-color: var(--scheme-line);
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.product-card:hover,
.mini-card:hover,
.article-card:hover,
.article-row:hover,
.beta-program-card:hover,
.directory-card:hover {
  border-color: #bfd8ee;
  box-shadow: 0 14px 34px rgba(18, 70, 140, 0.08);
}

.quote-line {
  border-color: #cfe9dc;
  background: #f6fcf8;
}

body[data-page="home"] .right-rail {
  padding-top: 0;
}

body[data-page="home"] .right-card {
  padding: 0 0 24px;
  border: 0;
  border-top: 1px solid var(--scheme-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .right-card:first-child {
  border-top: 0;
}

body[data-page="home"] .right-card + .right-card {
  margin-top: 28px;
}

body[data-page="home"] .right-card .section-head {
  align-items: center;
  margin-bottom: 12px;
}

body[data-page="home"] .right-card .section-head h2 {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 22px;
  line-height: 1.2;
}

body[data-page="home"] .right-card .section-head h2::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--scheme-blue);
  transform: rotate(14deg);
}

body[data-page="home"] .right-card .section-head p {
  display: none;
}

body[data-page="home"] .heatbar-list {
  min-height: 220px;
  padding: 18px 6px 24px;
}

body[data-page="home"] .heatbar-list::after {
  right: 4px;
  bottom: 48px;
  left: 4px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #c3d4e6 8%, #c3d4e6 92%, transparent);
}

body[data-page="home"] .heatbar-card {
  min-width: 0;
}

body[data-page="home"] .heatbar-likes {
  margin-bottom: 8px;
  color: #08765f;
  font-size: 21px;
  line-height: 1.1;
}

body[data-page="home"] .heatbar-column {
  width: 76px;
  margin-bottom: 22px;
}

body[data-page="home"] .heatbar-column .rank-logo {
  background: #075247;
}

body[data-page="home"] .heatbar-card strong {
  max-width: 86px;
  color: var(--scheme-ink);
  font-size: 14px;
  line-height: 1.2;
}

body[data-page="home"] .daily-brief-list {
  border-top: 0;
}

body[data-page="home"] .brief-item {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--scheme-line-soft);
}

body[data-page="home"] .brief-body strong,
body[data-page="home"] .brief-body span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

body[data-page="home"] .brief-body strong {
  line-height: 1.35;
}

body[data-page="home"] .brief-body span {
  display: -webkit-box;
  max-height: 40px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

body[data-page="home"] .model-item {
  padding: 13px 0;
  border-bottom: 1px solid var(--scheme-line-soft);
}

.native-mini-service {
  margin-top: 14px;
  border-color: #cde8dc;
  background: linear-gradient(135deg, #f3fbf7, #ffffff);
}

.product-hero {
  grid-template-columns: 136px minmax(0, 1fr) 200px;
  padding: 24px;
}

.product-hero .logo-box {
  width: 124px;
  height: 124px;
  border-radius: 22px;
}

.product-info-card {
  min-height: 164px;
  padding: 17px;
}

.product-info-cards {
  align-items: start;
}

.product-info-card {
  height: auto;
}

.product-info-card h3 {
  font-size: 18px;
}

.score-bar span {
  background: linear-gradient(90deg, var(--scheme-blue), var(--scheme-green));
}

@media (max-width: 1180px) {
  body[data-page="home"] .right-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  body[data-page="home"] .right-card {
    padding: 18px;
    border: 1px solid var(--scheme-line);
    border-radius: 16px;
    background: var(--scheme-card);
    box-shadow: var(--scheme-shadow);
  }
}

@media (max-width: 820px) {
  .app-shell {
    padding: 10px 10px 42px;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    padding: 10px 12px;
    overflow: hidden;
  }

  .topbar > *,
  .top-actions,
  .nav {
    min-width: 0;
  }

  .brand {
    width: max-content;
  }

  .nav {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    flex: 0 0 auto;
  }

  .top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
  }

  .top-search {
    min-width: 0;
    width: 100%;
  }

  .layout,
  body[data-page="home"] .right-rail,
  .product-hero,
  .product-info-cards {
    grid-template-columns: 1fr;
  }

  .home-carousel,
  .carousel-track {
    min-height: 184px;
  }

  .carousel-slide {
    padding: 24px 18px 26px;
  }

  .carousel-slide strong {
    max-width: 100%;
    font-size: 32px;
  }

  .slide-mascot {
    display: none;
  }

  .carousel-slide::after {
    display: none;
  }

  .home-hero .hot-searches {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .home-hero .hot-searches::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .product-card,
  .beta-program-card {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .top-actions {
    grid-template-columns: 1fr;
  }

  .top-actions .ghost-btn,
  .top-actions .secondary-btn {
    justify-content: center;
    min-height: 40px;
    width: 100%;
  }

  .carousel-slide strong em::after {
    height: 4px;
  }
}

/* Readability fixes: lighter quote chips, compact no-cover cards, explicit media attach flow. */
.field-group {
  display: grid;
  gap: 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 760;
}

.media-attach-control {
  display: grid;
  gap: 8px;
}

.media-attach-actions,
.upload-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.media-attach-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
}

.media-attach-actions > .upload-inline {
  display: contents;
}

.media-attach-actions .upload-inline-btn {
  grid-column: 1;
  grid-row: 1;
}

.media-attach-actions .media-link-toggle {
  grid-column: 2;
  grid-row: 1;
}

.media-attach-actions .upload-inline small {
  grid-column: 1 / -1;
  grid-row: 2;
}

.upload-inline small,
.form-hint {
  color: #64748b;
  font-size: 12px;
  font-weight: 560;
  line-height: 1.5;
}

.media-link-toggle,
.upload-inline-btn {
  min-height: 34px;
  padding: 0 12px;
}

.media-link-panel {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 720;
}

.media-link-panel[hidden] {
  display: none !important;
}

.media-link-panel input {
  width: 100%;
}

.story-editor {
  display: grid;
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid #d8e6f5;
  border-radius: 14px;
  background: #ffffff;
}

.story-editor label {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.story-editor .story-title-field {
  border-bottom: 1px solid #e5eef7;
}

.story-editor input,
.story-editor textarea {
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}

.story-editor input {
  min-height: 30px !important;
  padding: 0 !important;
  color: #071021;
  font-size: 16px;
  font-weight: 850;
}

.story-editor textarea {
  min-height: 142px !important;
  padding: 0 !important;
  resize: vertical;
  line-height: 1.7;
}

.auto-topic-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed rgba(15, 138, 107, 0.2);
  border-radius: 12px;
  background: rgba(244, 251, 247, 0.7);
}

.auto-topic-panel > span {
  color: #08765f;
  font-size: 12px;
  font-weight: 900;
}

.inline-topic-preview,
.topic-preview,
.post-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inline-topic-preview {
  padding: 0 14px 12px;
  margin-top: -2px;
}

.inline-topic-preview:empty {
  display: none;
}

.topic-chip,
.post-topics span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #08765f;
  background: #edf8f2;
  font-size: 12px;
  font-weight: 820;
}

.topic-chip-removable {
  gap: 4px;
  border: 0;
  cursor: pointer;
}

.topic-chip-removable:hover,
.topic-chip-removable:focus-visible {
  color: var(--color-ink, #071021);
  background: var(--color-line, #d8e6f5);
  outline: none;
}

.topic-chip-removable span {
  font-size: 14px;
  line-height: 1;
}

.post-topics {
  margin-top: 12px;
}

.post-meta-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin-top: 12px;
}

.post-meta-item,
.post-meta-more {
  min-width: 0;
  max-width: min(220px, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-meta-item {
  flex: 0 1 auto;
}

.post-meta-overflow {
  position: relative;
  flex: 0 0 auto;
}

.post-meta-overflow summary {
  cursor: pointer;
  list-style: none;
}

.post-meta-overflow summary::-webkit-details-marker {
  display: none;
}

.post-meta-overflow summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 32%, transparent);
  outline-offset: 2px;
}

.post-meta-overflow-panel {
  position: absolute;
  right: 0;
  z-index: var(--layer-popover);
  display: grid;
  gap: 8px;
  min-width: 160px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-soft);
}

.moderation-settings-card {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #d8eee7;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(244, 251, 247, 0.92), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.moderation-settings-card h3,
.moderation-settings-card p {
  margin: 0;
}

.moderation-settings-card h3 {
  margin-top: 4px;
  color: #071021;
  font-size: 18px;
}

.moderation-settings-card p {
  margin-top: 6px;
  color: #64748b;
  line-height: 1.65;
}

.moderation-settings-card label {
  display: grid;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.moderation-settings-card textarea {
  min-height: 96px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8e6f5;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  resize: vertical;
}

.product-card .tag-row {
  align-content: flex-start;
  align-items: flex-start;
  min-height: 0 !important;
  overflow: visible !important;
}

.product-card .tag,
.product-card .status-pill,
.product-card .benefit-card-badge {
  flex: 0 1 auto;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 22px !important;
  max-width: 100% !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.product-card .benefit-card-badge {
  display: inline-flex;
  align-items: center;
  color: #8a4f08;
  border: 1px solid #f0d5a7;
  background: #fff4df;
  font-weight: 900;
}

.product-card .quote-line {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  min-height: 0;
  padding: 9px 10px;
}

.product-card .quote-badge {
  justify-self: start;
  min-width: 0 !important;
  color: #08765f !important;
  background: #e9f8ef !important;
}

.product-card .community-quote {
  display: -webkit-box;
  width: 100%;
  min-height: 2.9em;
  overflow: hidden;
  color: #25364d;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card .quote-badge.ai {
  color: #215fbd !important;
  background: #edf4ff !important;
}

body[data-page="products"] .generic-grid {
  align-items: start;
}

body[data-page="products"] .product-card:not(:has(.product-media-image)) {
  min-height: 236px;
  align-content: start;
  gap: 12px;
}

body[data-page="products"] .product-card .product-desc {
  min-height: 44px;
}

body[data-page="products"] .product-card .tag-row {
  margin-top: 2px;
}

body[data-page="products"] .price-line {
  align-self: end;
  margin-top: 8px;
}

/* Brand mark: use the real whale symbol in compact navigation, keep text as live UI copy. */
.brand-mark {
  width: 44px !important;
  height: 38px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.brand-mark::after {
  display: none !important;
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-wordmark {
  display: inline-flex;
  align-items: center;
  width: 88px;
  height: 28px;
}

.brand-wordmark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Admin operations: product and article rows need real controls, not display-only tables. */
.ops-admin-table td {
  vertical-align: top;
}

.ops-admin-table small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.candidate-filter-toolbar {
  align-items: end;
}

.admin-lifecycle-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.admin-lifecycle-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel-strong);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.admin-lifecycle-step:hover,
.admin-lifecycle-step:focus-visible {
  border-color: var(--green);
  background: var(--green-2);
  transform: translateY(-1px);
}

.admin-lifecycle-step.is-active {
  border-color: var(--green);
  background: var(--green-2);
}

.admin-lifecycle-step:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.admin-lifecycle-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--blue);
  background: var(--blue-2);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.admin-lifecycle-step > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-lifecycle-step strong {
  color: var(--text);
  font-size: 15px;
}

.admin-lifecycle-step small {
  color: var(--muted);
  line-height: 1.5;
}

.admin-product-stage {
  scroll-margin-top: 96px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
}

.admin-stage-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.admin-stage-head h2 {
  margin: 4px 0 5px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.35;
}

.admin-stage-head p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.admin-stage-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--green);
  background: var(--green-2);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.unified-product-editor > .admin-detail-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.admin-editor-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.admin-editor-kicker .eyebrow {
  margin: 0;
}

.operation-product-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 20px;
  align-items: end;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
}

.operation-product-picker h2,
.experience-task-examples h2 {
  margin: 4px 0 6px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.35;
}

.operation-product-picker p,
.experience-task-examples .section-head p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.operation-product-picker-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.operation-product-picker-controls label {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.operation-product-picker-controls select {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel-strong);
  color: var(--text);
}

.operation-product-editor {
  min-width: 0;
}

.operation-benefit-settings {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
}

.operation-benefit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 20px;
  align-items: end;
  margin-top: 0;
}

.operation-benefit-head h2 {
  margin: 4px 0 6px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.35;
}

.operation-benefit-head p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.operation-benefit-product-control {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.operation-benefit-product-control select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  color: var(--text);
  font: inherit;
}

.operation-benefit-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-qr-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-qr-source-actions .upload-inline {
  flex: 0 1 auto;
}

.admin-qr-source-actions > small {
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-form-grid > label.admin-switch-row {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 70px;
  padding: 13px 15px;
  border: 1px solid #d8e6f2;
  border-radius: 14px;
  background: #fbfdff;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.admin-form-grid > label.admin-switch-row:hover {
  border-color: #9ed5c8;
  background: #f7fffb;
}

.admin-form-grid > label.admin-switch-row:has(.admin-switch-input:checked) {
  border-color: #9ed5c8;
  background: #f2fbf7;
}

.admin-form-grid .admin-switch-input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.admin-switch-track {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 24px;
  border: 1px solid #b9c8d8;
  border-radius: 999px;
  background: #dbe5ef;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.admin-switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.24);
  content: "";
  transition: transform 160ms ease;
}

.admin-switch-input:checked + .admin-switch-track {
  border-color: #08765f;
  background: #08765f;
}

.admin-switch-input:checked + .admin-switch-track::after {
  transform: translateX(20px);
}

.admin-switch-input:focus-visible + .admin-switch-track {
  outline: 3px solid rgba(18, 103, 242, 0.2);
  outline-offset: 3px;
}

.admin-switch-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-switch-copy strong {
  color: #17233a;
  font-size: 14px;
  line-height: 1.35;
}

.admin-switch-copy small {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.experience-task-examples {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
}

.experience-task-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.experience-task-flow li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: var(--blue-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.experience-task-flow li > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

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

.experience-example-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.experience-example-card header,
.experience-example-card footer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.experience-example-card h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
}

.experience-example-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.experience-example-card dl > div {
  display: grid;
  gap: 3px;
}

.experience-example-card dt,
.experience-example-card footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.experience-example-card dd {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.experience-example-card footer {
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.experience-example-card footer strong {
  color: var(--green);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.candidate-batch-row {
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px dashed rgba(8, 118, 95, 0.24);
  border-radius: 12px;
  background: rgba(239, 250, 246, 0.72);
}

.candidate-batch-row .muted {
  flex: 1 1 360px;
  font-size: 13px;
}

.candidate-admin-table th:first-child,
.candidate-admin-table td:first-child {
  width: 42px;
  text-align: center;
}

.article-editor-form {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid rgba(130, 160, 196, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.article-editor-form .editor-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.article-editor-form .editor-head-row h2 {
  margin: 4px 0 4px;
  font-size: 20px;
}

.article-product-field {
  display: grid;
  gap: 8px;
}

.article-product-field > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.article-product-field > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.article-product-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.article-product-add-row select {
  min-width: 0;
}

.article-product-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  padding: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
}

.article-product-chip {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--blue-2);
}

.article-product-chip > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.article-product-chip strong,
.article-product-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-product-chip strong {
  color: var(--text);
  font-size: 13px;
}

.article-product-chip small,
.article-product-empty,
.article-product-status {
  color: var(--muted);
  font-size: 11px;
}

.article-product-chip button {
  padding: 5px 7px;
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--red);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.article-product-chip button:hover,
.article-product-chip button:focus-visible {
  color: var(--panel-strong);
  background: var(--red);
  outline: none;
}

.article-product-empty {
  align-self: center;
  padding: 4px;
}

.article-product-status {
  min-height: 16px;
  color: var(--green);
}

.article-editor-form [data-article-editor-status] {
  min-height: 18px;
  color: #08765f;
}

.compact-control {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #dbe7f2;
  border-radius: 10px;
  outline: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font: inherit;
  font-size: 13px;
}

.compact-control:focus {
  border-color: rgba(18, 103, 242, 0.48);
  box-shadow: 0 0 0 3px rgba(18, 103, 242, 0.1);
}

.inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-checks label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.admin-row-actions .ghost-btn,
.admin-row-actions .secondary-btn,
.admin-row-actions .danger-btn {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.compact-admin-head {
  margin-top: 18px;
  margin-bottom: 10px;
}

.article-admin-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(340px, 0.95fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid #dbe7f2;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}

.article-admin-row.hidden,
.article-admin-row.deleted {
  background: rgba(248, 250, 252, 0.78);
  opacity: 0.78;
}

.article-admin-main {
  min-width: 0;
}

.article-admin-main p {
  margin: 8px 0;
  color: #52647a;
  line-height: 1.65;
}

.article-admin-main small {
  color: #64748b;
  font-weight: 700;
}

.article-admin-controls {
  display: grid;
  grid-template-columns: 120px 110px minmax(140px, 1fr);
  gap: 8px;
}

.article-admin-controls .inline-checks {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  .article-admin-row {
    grid-template-columns: 1fr;
  }

  .article-admin-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .operation-product-picker,
  .operation-benefit-head,
  .experience-example-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 720px) {
  .admin-lifecycle-nav {
    grid-template-columns: 1fr;
  }

  .admin-product-stage {
    padding: 14px;
  }

  .admin-stage-head {
    display: grid;
  }

  .admin-stage-count {
    justify-self: start;
  }

  .operation-product-picker-controls,
  .experience-task-flow {
    grid-template-columns: 1fr;
  }

  .operation-product-picker-controls label {
    grid-column: 1;
  }

  .article-product-add-row {
    grid-template-columns: 1fr;
  }

  .article-editor-form .editor-head-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .article-editor-form .editor-head-row .primary-btn {
    width: 100%;
  }
}

.product-card {
  align-content: start;
}

.product-card .product-media {
  width: 100%;
  min-height: 0;
  aspect-ratio: 2.12 / 1;
  padding: 12px;
  border-radius: 14px;
}

.product-card .product-media-image {
  padding: 0;
  background:
    radial-gradient(circle at 86% 78%, rgba(40, 196, 70, 0.16), transparent 30%),
    linear-gradient(135deg, #f8fbff, #eef7ff 48%, #f3fbf6);
}

.product-card .product-media-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  object-position: center;
}

.product-card .product-media-placeholder {
  align-content: space-between;
}

.product-card .product-top {
  align-items: flex-start;
}

.product-card .product-company {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-muted, #5f708c);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card .tag-row {
  min-height: 0;
  gap: 6px;
}

.product-card .tag,
.product-card .status-pill {
  flex: 0 1 auto;
  width: auto;
  max-width: 132px;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.product-hero {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) 200px;
}

.product-hero-media {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid var(--color-line, #d8e6f5);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 18%, rgba(40, 196, 70, 0.18), transparent 28%),
    linear-gradient(135deg, #eef6ff, #ffffff 54%, #eefbf4);
}

.product-hero-media > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 168px;
  object-fit: contain;
  object-position: center;
}

.hero-media-placeholder {
  display: grid;
  height: 100%;
  min-height: 168px;
  place-items: center;
  padding: 24px;
}

.hero-media-placeholder span {
  display: block;
  width: 72%;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.1);
}

.hero-media-placeholder span:nth-child(2) {
  width: 58%;
}

.hero-media-placeholder span:nth-child(3) {
  width: 42%;
}

.product-hero-media .hero-media-logo,
.product-hero .product-hero-media .logo-box {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 56px;
  height: 56px;
  border: 4px solid #ffffff;
  border-radius: 16px;
  font-size: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.beta-program-card {
  min-height: 252px;
}

.beta-program-card .product-media {
  width: 100%;
  min-height: 0;
  aspect-ratio: 2.12 / 1;
  margin-bottom: 12px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 14px;
}

.beta-media-wrap {
  position: relative;
  min-width: 0;
}

.beta-media-wrap .product-media {
  margin-bottom: 0;
}

.beta-media-wrap .beta-phase {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 9px;
  border: 1px solid rgba(15, 138, 107, 0.16);
  border-radius: 999px;
  color: #08765f;
  background: rgba(237, 250, 244, 0.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.beta-program-card .product-media-image {
  padding: 0;
}

.beta-program-card .product-media-image img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  object-position: center;
}

.beta-program-card .product-media-placeholder .media-content {
  align-items: center;
}

.product-media.product-media-image {
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px;
  background: #f8fbff;
}

.product-media.product-media-image::before {
  display: none;
  content: none;
}

.product-media.product-media-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
  object-position: center center;
}

.admin-inline-note {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid rgba(20, 134, 111, 0.18);
  border-radius: 12px;
  background: rgba(239, 251, 246, 0.78);
  color: #426176;
  font-size: 13px;
  font-weight: 650;
}

.submit-section-label {
  margin: 18px 0 10px;
  color: #007a68;
  font-size: 14px;
  font-weight: 850;
}

@media (max-width: 1180px) {
  .admin-focus-strip,
  .operation-todo-grid {
    grid-template-columns: 1fr;
  }
}

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

.beta-card-head > span {
  min-width: 0;
}

.beta-card-head > span b,
.beta-card-head > span small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beta-card-head > span b {
  color: var(--color-ink, #071021);
  font-size: 16px;
  line-height: 1.25;
}

.beta-card-head > span small {
  margin-top: 2px;
  color: var(--color-muted, #5f708c);
  font-size: 12px;
  font-weight: 650;
}

.product-card .product-main {
  gap: 2px;
}

.product-card .product-name {
  min-height: 0;
  -webkit-line-clamp: 1;
}

.product-card .product-desc {
  width: 100%;
  margin-top: 0;
}

.beta-card-head em {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--color-green-dark, #08765f);
  background: color-mix(in srgb, var(--color-green, #28c446) 13%, #ffffff);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.beta-compact-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(216, 230, 245, 0.9);
}

.beta-compact-foot span {
  min-width: 0;
  overflow: hidden;
  color: #08765f;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beta-compact-foot b {
  color: #1267f2;
  font-size: 12px;
}

.product-editor-form,
.daily-brief-create {
  margin-top: 14px;
}

.daily-brief-manager {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(216, 230, 245, 0.9);
}

.daily-brief-admin-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.daily-brief-admin-row {
  display: grid;
  grid-template-columns: 82px 96px minmax(160px, 1.1fr) minmax(180px, 1.4fr) minmax(140px, 1fr) 92px auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(216, 230, 245, 0.9);
  border-radius: 14px;
  background: #ffffff;
}

.daily-brief-admin-row input,
.daily-brief-admin-row select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #d8e6f5;
  border-radius: 10px;
  color: #17233a;
  background: #fbfdff;
}

@media (max-width: 1180px) {
  .product-hero {
    grid-template-columns: 1fr;
  }

  .daily-brief-admin-row {
    grid-template-columns: 1fr 1fr;
  }

  .daily-brief-admin-row .admin-row-actions {
    grid-column: 1 / -1;
  }
}

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

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

.category-card {
  min-height: 168px;
}

.category-card p {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 720px) {
  .directory-switch,
  .category-directory-grid {
    grid-template-columns: 1fr;
  }
}

#caseCampaign {
  margin-bottom: 12px;
}

.community-composer[hidden] {
  display: none;
}

.community-composer.compact-composer {
  margin-bottom: 12px;
  padding: 14px;
}

.composer-compact-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.composer-compact-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
}

.community-access-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #d8eee7;
  border-radius: 14px;
  background: rgba(248, 253, 251, 0.92);
}

.community-access-gate strong,
.community-access-gate span {
  display: block;
}

.community-access-gate strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.4;
}

.community-access-gate span,
.access-code-status {
  margin-top: 3px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.access-code-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.access-code-form input {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  color: #0f172a;
  background: #ffffff;
  font: inherit;
}

.access-code-status {
  grid-column: 1 / -1;
  margin-top: -4px;
}

body[data-page="home"] .brief-time {
  grid-row: span 2;
}

body[data-page="home"] .brief-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-page="home"] .brief-body small {
  line-height: 1.45;
}

body[data-page="home"] .brief-item {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, padding 0.18s ease;
}

body[data-page="home"] .brief-item.is-expanded {
  padding-inline: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

body[data-page="home"] .brief-summary {
  color: #64748b;
}

body[data-page="home"] .brief-item.is-expanded .brief-summary {
  -webkit-line-clamp: unset;
  max-height: none;
}

body[data-page="home"] .brief-detail {
  margin: 4px 0 0;
  color: #40516c;
  font-size: 12px;
  line-height: 1.62;
  white-space: normal;
}

body[data-page="home"] .brief-detail[hidden] {
  display: none;
}

.daily-brief-modal {
  width: min(520px, calc(100vw - 28px));
}

.daily-brief-modal-content {
  display: grid;
  gap: 12px;
  padding: 30px 28px 10px;
}

.daily-brief-modal-content h3 {
  margin: 0;
  color: #071021;
  font-size: 24px;
  line-height: 1.25;
}

.daily-brief-modal-content p {
  margin: 0;
  color: #34445f;
  font-size: 15px;
  line-height: 1.75;
}

.daily-brief-modal-content small {
  color: #6b7a92;
  font-size: 13px;
}

@media (max-width: 720px) {
  .community-access-gate,
  .access-code-form {
    grid-template-columns: 1fr;
  }
}

body[data-page="home"] .right-rail {
  padding-top: 14px;
}

body[data-page="home"] .right-card {
  padding-bottom: 18px;
}

body[data-page="home"] .home-category-section #categoryList {
  max-height: min(52vh, 486px);
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 103, 242, 0.28) transparent;
}

body[data-page="home"] .home-category-section #categoryList::-webkit-scrollbar {
  width: 6px;
}

body[data-page="home"] .home-category-section #categoryList::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(18, 103, 242, 0.24);
}

body[data-page="home"] .home-category-section #categoryList .filter-item {
  min-height: 38px;
}

@media (max-width: 820px) {
  body[data-page="home"] .home-category-section #categoryList {
    max-height: 360px;
  }
}

body[data-page="home"] .heat-share-card {
  margin-bottom: 10px;
}

body[data-page="home"] .heatbar-list {
  min-height: 208px;
  padding-top: 18px;
  padding-bottom: 14px;
}

body[data-page="home"] .heatbar-list::after {
  bottom: 42px;
}

body[data-page="home"] .heatbar-column {
  margin-bottom: 16px;
}

body[data-page="home"] .heatbar-product-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: #075247;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 7px 18px rgba(7, 82, 71, 0.18);
}

body[data-page="home"] .heatbar-product-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="home"] .heatbar-card strong {
  margin-top: 0;
}

body[data-page="home"] .heat-share-card + .right-card {
  margin-top: 4px;
}

.site-compliance-footer {
  width: 100%;
  margin-top: 32px;
  border-top: 1px solid rgba(15, 78, 70, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: #5f6f77;
  font-size: 13px;
}

.site-compliance-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1240px, calc(100% - 32px));
  min-height: 56px;
  margin: 0 auto;
}

.site-compliance-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.site-compliance-footer a {
  color: #376a65;
  text-decoration: none;
}

.site-compliance-footer a:hover {
  color: #08786c;
  text-decoration: underline;
}

.site-contact {
  position: relative;
}

.site-contact summary {
  list-style: none;
  cursor: pointer;
  color: #376a65;
  font-weight: 700;
}

.site-contact summary::-webkit-details-marker {
  display: none;
}

.site-contact__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: grid;
  grid-template-columns: 108px minmax(168px, 1fr);
  gap: 14px;
  width: 320px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 18px 44px rgba(19, 49, 68, 0.16);
}

.site-contact__panel img {
  display: block;
  width: 108px;
  height: 108px;
  object-fit: contain;
}

.site-contact__panel div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.site-contact__panel strong {
  color: var(--ink);
  font-size: 15px;
}

.site-contact__panel span {
  line-height: 1.55;
}

.auth-agreement-row {
  margin: 2px 0 14px;
}

.auth-agreement {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.auth-agreement input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--green);
}

.auth-agreement a {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.legal-page {
  width: min(920px, calc(100% - 32px));
  margin: 28px auto 56px;
}

.legal-document {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.legal-document h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 40px);
}

.legal-document h2 {
  margin: 30px 0 10px;
  font-size: 20px;
}

.legal-document h3 {
  margin: 20px 0 8px;
  font-size: 16px;
}

.legal-document p,
.legal-document li {
  color: #425466;
  line-height: 1.85;
}

.legal-document ul {
  padding-left: 22px;
}

.legal-document .legal-meta {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 13px;
}

.legal-document .legal-callout {
  margin: 20px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--green);
  background: var(--mint-soft);
}

@media (max-width: 720px) {
  .site-compliance-footer__inner {
    flex-direction: column;
    gap: 10px;
    min-height: 72px;
    padding: 12px 0;
    text-align: center;
  }

  .site-compliance-footer__links {
    justify-content: center;
  }

  .site-contact__panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    grid-template-columns: 92px minmax(0, 1fr);
    width: auto;
    text-align: left;
  }

  .site-contact__panel img {
    width: 92px;
    height: 92px;
  }
}

.article-link-ingest-fields {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.article-link-ingest-fields .link-ingest-source-field {
  min-width: 0;
}

.article-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.article-composer {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-strong);
}

.article-composer-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px 8px;
}

.article-composer-head strong {
  color: var(--text);
  font-size: 15px;
}

.article-composer-head span,
.article-composer-summary > span,
.article-editor-hint {
  color: var(--faint);
  font-size: 12px;
}

.article-composer-summary {
  display: grid;
  gap: 5px;
  margin: 0 16px;
  padding: 2px 0 12px;
  border-bottom: 1px dashed var(--line-strong);
}

.article-composer-summary textarea,
.article-body-editor textarea {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.article-composer-summary textarea {
  min-height: 52px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
}

.article-composer-summary textarea::placeholder,
.article-body-editor textarea::placeholder {
  color: var(--faint);
}

.article-editor-toolbar {
  display: flex;
  gap: 4px;
  padding: 10px 16px 6px;
}

.article-editor-toolbar button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.article-editor-toolbar button:hover,
.article-editor-toolbar button:focus-visible {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--blue-2);
  outline: 0;
}

.article-body-editor {
  display: block;
  padding: 0 16px;
}

.article-body-editor textarea {
  min-height: 340px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
  resize: vertical;
}

.article-editor-hint {
  display: block;
  padding: 8px 16px 14px;
}

.article-composer:focus-within {
  border-color: rgba(37, 109, 244, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 109, 244, 0.08);
}

.article-placement-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(18, 103, 242, 0.16);
  border-radius: 12px;
  background: rgba(241, 247, 255, 0.72);
  color: #40516c;
  font-size: 13px;
}

.article-placement-note strong {
  color: #0f172a;
}

.article-placement-note label {
  display: inline-flex;
  flex-direction: row;
  gap: 7px;
  align-items: center;
  color: #123b6d;
  font-weight: 800;
  white-space: nowrap;
}

.article-admin-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.article-admin-row .admin-row-actions {
  justify-content: flex-end;
}

.article-row .article-thumb,
.article-grid-media {
  overflow: hidden;
}

.article-row .article-thumb img,
.article-grid-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.article-row .article-thumb.has-cover img,
.article-grid-media.has-cover img {
  object-fit: cover;
}

.article-row .article-thumb.has-logo img,
.article-grid-media.has-logo img {
  object-fit: contain;
  padding: 16px;
  background: #f5f9fc;
}

.slide-article {
  text-decoration: none;
}

.slide-article .slide-article-cover {
  width: 180px;
  height: 112px;
  object-fit: cover;
  opacity: 0.92;
}

@media (max-width: 720px) {
  .article-link-ingest-fields,
  .article-placement-note {
    grid-template-columns: 1fr;
  }

  .article-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .article-editor-actions .primary-btn,
  .article-editor-actions .secondary-btn {
    width: 100%;
  }

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

  .article-admin-row .admin-row-actions {
    justify-content: flex-start;
  }

  .slide-article .slide-article-cover {
    width: 106px;
    height: 86px;
  }
}