/*
 * Xiaojie Instrument Community
 * Modern industrial community and account surfaces.
 * The file is intentionally self-contained and only targets community/account UI.
 */

#communityView,
#accountView,
.community-page,
.account-page {
  --community-ink: var(--ink, #0c171b);
  --community-ink-2: var(--ink-2, #162328);
  --community-paper: var(--paper, #edf1ec);
  --community-surface: var(--surface, #f7f8f3);
  --community-line: var(--line, #cfd7d0);
  --community-muted: var(--muted, #66736f);
  --community-orange: var(--orange, #ff6a2a);
  --community-orange-deep: var(--orange-deep, #dd4d13);
  --community-mint: var(--mint, #8bd4b1);
  --community-blue: var(--blue, #7ca7d8);
  --community-radius-sm: var(--ui-radius-sm, 10px);
  --community-radius-md: var(--ui-radius-md, 16px);
  --community-radius-lg: var(--ui-radius-lg, 24px);
  --community-shadow: 0 16px 42px rgba(7, 23, 27, .08);
  --community-shadow-hover: 0 22px 58px rgba(7, 23, 27, .13);
  color: var(--community-ink);
}

#accountEntry {
  cursor: pointer;
  text-align: left;
}

#accountEntry > i {
  color: var(--community-muted);
  font-style: normal;
}

#communityView,
.community-page {
  min-height: calc(100vh - 72px);
  padding-bottom: 84px;
}

.community-head,
.community-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  min-height: 252px;
  margin: 24px clamp(22px, 3.4vw, 54px) 0;
  padding: 38px clamp(26px, 4vw, 54px);
  overflow: hidden;
  color: #f1f7f4;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 20%, rgba(78, 142, 255, .18), transparent 18rem),
    radial-gradient(circle at 9% 110%, rgba(255, 106, 42, .2), transparent 20rem),
    linear-gradient(rgba(137, 168, 159, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137, 168, 159, .05) 1px, transparent 1px),
    linear-gradient(135deg, #07171b 0%, #0a292d 62%, #0d3332 100%);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  box-shadow: 0 28px 72px rgba(7, 23, 27, .18);
}

.community-head::after,
.community-hero::after {
  content: "FIELD KNOWLEDGE NETWORK";
  position: absolute;
  top: 24px;
  right: 30px;
  z-index: -1;
  color: rgba(205, 224, 218, .22);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 2.1px;
}

.community-hero-copy,
.community-head-copy {
  max-width: 790px;
}

.community-kicker,
.community-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ff9a70;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.1px;
  text-transform: uppercase;
}

.community-kicker::before,
.community-eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, #ff6a2a, transparent);
}

.community-head h1,
.community-hero h1 {
  max-width: 760px;
  margin: 15px 0 12px;
  color: #f5faf7;
  font-size: clamp(34px, 4vw, 55px);
  line-height: 1.08;
  letter-spacing: -2.2px;
}

.community-head p,
.community-hero p {
  max-width: 700px;
  margin: 0;
  color: #a9bbb5;
  font-size: 13px;
  line-height: 1.8;
}

.community-hero-actions,
.community-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.community-primary-action,
.community-create,
.community-compose-button,
.community-submit,
#communityPublish {
  min-height: 46px;
  border: 0;
  border-radius: 13px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff7540, #e75320);
  box-shadow: 0 12px 26px rgba(231, 83, 32, .27);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.community-primary-action:hover,
.community-create:hover,
.community-compose-button:hover,
.community-submit:hover,
#communityPublish:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 34px rgba(231, 83, 32, .34);
}

.community-secondary-action,
.community-ghost-button {
  min-height: 44px;
  border: 1px solid rgba(201, 221, 215, .22);
  border-radius: 13px;
  padding: 0 15px;
  color: #dbe6e2;
  background: rgba(255, 255, 255, .055);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.community-secondary-action:hover,
.community-ghost-button:hover {
  border-color: rgba(255, 150, 106, .55);
  background: rgba(255, 106, 42, .11);
  color: #ffad87;
}

.community-stats,
.community-hero-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 24px;
}

.community-stats > div,
.community-hero-stats > div {
  min-width: 110px;
  padding: 0 18px;
  border-left: 1px solid rgba(199, 218, 212, .16);
}

.community-stats > div:first-child,
.community-hero-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.community-stats b,
.community-stats span,
.community-hero-stats b,
.community-hero-stats span {
  display: block;
}

.community-stats b,
.community-hero-stats b {
  color: #f6faf8;
  font: 700 21px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.community-stats span,
.community-hero-stats span {
  margin-top: 6px;
  color: #7f948f;
  font-size: 9px;
}

.community-layout,
.community-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  gap: 22px;
  align-items: start;
  padding: 24px clamp(22px, 3.4vw, 54px) 0;
}

.community-main,
.community-feed-column {
  min-width: 0;
}

.community-aside,
.community-sidebar {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 92px;
}

.community-panel,
.community-aside-card,
.community-sidebar-card {
  border: 1px solid rgba(128, 150, 143, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 32px rgba(7, 23, 27, .045);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.community-aside-card,
.community-sidebar-card {
  padding: 20px;
}

.community-aside-card h2,
.community-aside-card h3,
.community-sidebar-card h2,
.community-sidebar-card h3 {
  margin: 5px 0 14px;
  font-size: 16px;
  letter-spacing: -.3px;
}

.community-aside-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.community-aside-title span {
  color: var(--community-muted);
  font-size: 9px;
}

.community-tabs,
.community-category-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid rgba(128, 150, 143, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  scrollbar-width: none;
}

.community-tabs::-webkit-scrollbar,
.community-category-tabs::-webkit-scrollbar {
  display: none;
}

.community-tab,
.community-tabs button,
.community-category-tab,
.community-category-tabs button {
  min-height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 11px;
  padding: 0 13px;
  color: var(--community-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.community-tab:hover,
.community-tabs button:hover,
.community-category-tab:hover,
.community-category-tabs button:hover {
  color: var(--community-ink);
  background: rgba(18, 46, 51, .055);
}

.community-tab.active,
.community-tab[aria-selected="true"],
.community-tabs button.active,
.community-category-tab.active,
.community-category-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #17373d, #0d2429);
  box-shadow: 0 7px 17px rgba(7, 23, 27, .15);
}

.community-toolbar,
.community-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(126px, auto));
  gap: 9px;
  align-items: end;
  margin: 12px 0 16px;
}

.community-search {
  position: relative;
  min-width: 0;
}

.community-search::before {
  content: "⌕";
  position: absolute;
  left: 14px;
  top: 50%;
  color: var(--community-muted);
  font: 18px/1 Georgia, serif;
  transform: translateY(-52%);
  pointer-events: none;
}

.community-search input,
#communitySearch,
.community-filter select,
.community-sort select,
#communitySort {
  width: 100%;
  height: 44px;
  min-width: 0;
  border: 1px solid rgba(115, 140, 132, .26);
  border-radius: 12px;
  color: var(--community-ink);
  background: rgba(255, 255, 255, .78);
  font-size: 11px;
  outline: 0;
}

.community-search input,
#communitySearch {
  padding: 0 14px 0 41px;
}

.community-filter select,
.community-sort select,
#communitySort {
  padding: 0 35px 0 12px;
  cursor: pointer;
}

.community-result-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 13px 2px;
  color: var(--community-muted);
  font-size: 10px;
}

.community-result-line b {
  color: var(--community-ink);
}

.community-feed,
#communityFeed {
  display: grid;
  gap: 12px;
}

.community-post-card,
.community-post {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(128, 150, 143, .2);
  border-radius: 20px;
  padding: 21px;
  background: rgba(255, 255, 255, .79);
  box-shadow: 0 9px 30px rgba(7, 23, 27, .045);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.community-post-card::before,
.community-post::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

.community-post-card.category-question::before { background: var(--community-orange); }
.community-post-card.category-experience::before { background: #42a579; }
.community-post-card.category-case::before { background: #d45b4f; }
.community-post-card.category-resource::before { background: #4e8eff; }

.community-post-status.category-experience {
  border-color: rgba(66, 165, 121, .25);
  color: #28714f;
  background: rgba(66, 165, 121, .09);
}

.community-post-status.category-case {
  border-color: rgba(212, 91, 79, .24);
  color: #a84338;
  background: rgba(212, 91, 79, .08);
}

.community-post-status.category-resource {
  border-color: rgba(78, 142, 255, .24);
  color: #356da9;
  background: rgba(78, 142, 255, .09);
}

.community-post-card:hover,
.community-post:hover {
  z-index: 1;
  transform: translateY(-3px);
  border-color: rgba(105, 132, 123, .35);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--community-shadow-hover);
}

.community-post-card.is-question::before,
.community-post.question::before {
  background: var(--community-orange);
}

.community-post-card.is-solved::before,
.community-post.solved::before {
  background: #42a579;
}

.community-post-card.is-article::before,
.community-post.article::before {
  background: #4e8eff;
}

.community-post-head,
.community-post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.community-author,
.community-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.community-avatar,
.community-author-avatar,
.community-comment-avatar,
.account-avatar,
.account-profile-avatar {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #1e4548, #0c2429);
  box-shadow: 0 8px 20px rgba(7, 23, 27, .12);
  font-size: 12px;
  font-weight: 800;
}

.community-avatar img,
.community-author-avatar img,
.community-comment-avatar img,
.account-avatar img,
.account-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-author b,
.community-author span,
.community-post-author b,
.community-post-author span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-author b,
.community-post-author b {
  font-size: 12px;
}

.community-author span,
.community-post-author span,
.community-post-meta {
  margin-top: 3px;
  color: var(--community-muted);
  font-size: 9px;
}

.community-role,
.community-author-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 5px;
  border: 1px solid rgba(78, 142, 255, .23);
  border-radius: 999px;
  padding: 0 6px;
  color: #3b6fae;
  background: rgba(78, 142, 255, .08);
  font-size: 8px;
  font-style: normal;
  vertical-align: middle;
}

.community-post-status,
.community-type-pill {
  min-height: 26px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 106, 42, .24);
  border-radius: 999px;
  padding: 0 9px;
  color: #a44a25;
  background: rgba(255, 106, 42, .085);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .3px;
}

.community-post-status.solved,
.community-post-card.is-solved .community-post-status {
  border-color: rgba(66, 165, 121, .25);
  color: #2c7754;
  background: rgba(66, 165, 121, .1);
}

.community-post-status.article,
.community-type-pill.article {
  border-color: rgba(78, 142, 255, .24);
  color: #356da9;
  background: rgba(78, 142, 255, .09);
}

.community-post-body {
  margin-top: 16px;
}

.community-post-title,
.community-post-card h2,
.community-post-card h3,
.community-post h2,
.community-post h3 {
  margin: 0;
  color: var(--community-ink);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -.35px;
}

button.community-post-title {
  width: 100%;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.community-post-meta b,
.community-post-meta span {
  display: block;
}

.community-post-meta b {
  color: var(--community-ink);
  font-size: 11px;
}

.community-post-title a,
.community-post-card h2 a,
.community-post-card h3 a {
  color: inherit;
  text-decoration: none;
}

.community-post-title a:hover,
.community-post-card h2 a:hover,
.community-post-card h3 a:hover {
  color: var(--community-orange-deep);
}

.community-post-excerpt,
.community-post-body > p {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--community-muted);
  font-size: 11px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.community-post-facts,
.community-device-facts {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 13px;
}

.community-post-facts span,
.community-device-facts span {
  border: 1px solid rgba(122, 146, 138, .2);
  border-radius: 8px;
  padding: 6px 8px;
  color: #536660;
  background: rgba(235, 241, 237, .7);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.community-post-media,
.community-post-image {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.community-post-media img,
.community-post-image img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: 12px;
  background: #dfe6e1;
}

.community-post-tags,
.community-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 13px;
}

.community-post-tags a,
.community-post-tags span,
.community-tags a,
.community-tags span {
  color: #55706a;
  font-size: 9px;
  text-decoration: none;
}

.community-post-tags a::before,
.community-post-tags span::before,
.community-tags a::before,
.community-tags span::before {
  content: "#";
  margin-right: 1px;
  color: var(--community-orange-deep);
}

.community-post-actions,
.community-card-actions,
.community-comment-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(128, 150, 143, .16);
}

.community-post-actions button,
.community-card-actions button,
.community-comment-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 0 9px;
  color: var(--community-muted);
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}

.community-post-actions button:hover,
.community-card-actions button:hover,
.community-comment-actions button:hover {
  color: var(--community-ink);
  background: rgba(18, 46, 51, .055);
}

.community-post-actions button.active,
.community-post-actions button[aria-pressed="true"],
.community-card-actions button.active,
.community-card-actions button[aria-pressed="true"] {
  color: var(--community-orange-deep);
  background: rgba(255, 106, 42, .09);
}

.community-action-spacer {
  margin-left: auto;
}

.community-aside-list,
.community-unanswered-list,
.community-hot-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-aside-list a,
.community-unanswered-list a,
.community-hot-list a {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  border-radius: 10px;
  padding: 10px 7px;
  color: var(--community-ink);
  text-decoration: none;
}

.community-aside-list a:hover,
.community-unanswered-list a:hover,
.community-hot-list a:hover {
  background: rgba(18, 46, 51, .045);
}

.community-aside-list i,
.community-unanswered-list i,
.community-hot-list i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: var(--community-orange-deep);
  background: rgba(255, 106, 42, .09);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-style: normal;
}

.community-aside-list b,
.community-unanswered-list b,
.community-hot-list b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.community-aside-list span,
.community-unanswered-list span,
.community-hot-list span {
  display: block;
  margin-top: 4px;
  color: var(--community-muted);
  font-size: 8px;
}

.community-guidelines {
  border-left: 3px solid var(--community-orange);
  background: linear-gradient(135deg, rgba(255, 246, 239, .9), rgba(255, 255, 255, .72));
}

.community-guidelines p,
.community-guidelines li {
  color: var(--community-muted);
  font-size: 9px;
  line-height: 1.75;
}

.community-guidelines ul {
  margin: 0;
  padding-left: 17px;
}

.community-composer,
#communityComposer {
  margin-bottom: 16px;
  border: 1px solid rgba(128, 150, 143, .21);
  border-radius: 21px;
  padding: 22px;
  background: rgba(255, 255, 255, .83);
  box-shadow: var(--community-shadow);
}

.community-composer[hidden],
#communityComposer[hidden] {
  display: none !important;
}

.community-composer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 19px;
}

.community-composer-head h2 {
  margin: 5px 0 4px;
  font-size: 21px;
}

.community-composer-head p {
  margin: 0;
  color: var(--community-muted);
  font-size: 10px;
  line-height: 1.6;
}

.community-composer-close,
.community-modal-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--community-line);
  border-radius: 11px;
  color: var(--community-muted);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

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

.community-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.community-field.full,
.community-field-wide,
.community-form > textarea,
#communityTitle,
#communityBody {
  grid-column: 1 / -1;
}

.community-field label,
.community-field > span,
.community-form label,
.community-form-label {
  color: #455a54;
  font-size: 9px;
  font-weight: 800;
}

.community-field label small,
.community-field > span small {
  margin-left: 4px;
  color: var(--community-muted);
  font-weight: 400;
}

.community-field input,
.community-field select,
.community-field textarea,
.community-form input,
.community-form select,
.community-form textarea,
#communityTitle,
#communityBody,
#communityCategory {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(115, 140, 132, .28);
  border-radius: 11px;
  color: var(--community-ink);
  background: rgba(247, 250, 247, .86);
  font-size: 12px;
  line-height: 1.6;
  outline: 0;
}

.community-field input,
.community-field select,
.community-form input,
.community-form select,
#communityTitle,
#communityCategory {
  min-height: 45px;
  padding: 0 12px;
}

.community-field textarea,
.community-form textarea,
#communityBody {
  min-height: 150px;
  padding: 12px;
  resize: vertical;
}

.community-field-error,
.community-form-error {
  color: #b23e2c;
  font-size: 9px;
}

.community-field [aria-invalid="true"],
.community-form [aria-invalid="true"] {
  border-color: #d75b47;
  background: #fff5f2;
}

.community-template-hint,
.community-safety-notice,
.community-privacy-notice {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 106, 42, .19);
  border-left: 3px solid var(--community-orange);
  border-radius: 10px;
  padding: 11px 13px;
  color: #795446;
  background: #fff4ed;
  font-size: 9px;
  line-height: 1.7;
}

.community-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  grid-column: 1 / -1;
  color: var(--community-muted);
  font-size: 9px;
  line-height: 1.55;
}

.community-check input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--community-orange);
}

.community-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  grid-column: 1 / -1;
  margin-top: 4px;
}

.community-form-actions .community-ghost-button {
  color: var(--community-muted);
  border-color: var(--community-line);
  background: transparent;
}

.community-submit:disabled,
#communityPublish:disabled,
.community-load-more:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.community-empty,
.community-feed-empty {
  min-height: 240px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px dashed rgba(112, 139, 130, .34);
  border-radius: 20px;
  padding: 34px;
  text-align: center;
  background: rgba(255, 255, 255, .45);
}

.community-empty > span,
.community-feed-empty > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: var(--community-orange-deep);
  background: rgba(255, 106, 42, .09);
  font: 22px/1 Georgia, serif;
}

.community-empty h3,
.community-feed-empty h3 {
  margin: 14px 0 6px;
  font-size: 16px;
}

.community-empty p,
.community-feed-empty p {
  max-width: 430px;
  margin: 0;
  color: var(--community-muted);
  font-size: 10px;
  line-height: 1.7;
}

.community-empty button,
.community-feed-empty button {
  min-height: 40px;
  margin-top: 16px;
  border: 1px solid var(--community-line);
  border-radius: 11px;
  padding: 0 13px;
  color: var(--community-ink);
  background: var(--community-surface);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.community-load-more,
#communityLoadMore {
  width: 100%;
  min-height: 46px;
  margin-top: 14px;
  border: 1px solid rgba(113, 138, 130, .25);
  border-radius: 13px;
  color: var(--community-muted);
  background: rgba(255, 255, 255, .62);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.community-load-more:hover,
#communityLoadMore:hover {
  color: var(--community-ink);
  border-color: rgba(88, 119, 109, .4);
  background: rgba(255, 255, 255, .9);
}

.community-post-detail {
  border: 1px solid rgba(128, 150, 143, .2);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 34px);
  background: rgba(255, 255, 255, .84);
  box-shadow: var(--community-shadow);
}

.community-post-detail .community-post-title {
  margin-top: 18px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
  letter-spacing: -1px;
}

.community-post-content {
  margin-top: 24px;
  color: #334a44;
  font-size: 13px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

.community-post-content h2,
.community-post-content h3 {
  margin: 28px 0 10px;
  color: var(--community-ink);
}

.community-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.community-post-content pre,
.community-post-content code {
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #e8efeb;
}

.community-post-content code {
  padding: 2px 5px;
}

.community-post-content pre {
  padding: 14px;
  overflow: auto;
}

.community-fact-grid,
.community-site-conditions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0;
}

.community-fact,
.community-site-conditions > div {
  min-width: 0;
  border: 1px solid rgba(122, 146, 138, .2);
  border-radius: 11px;
  padding: 11px;
  background: rgba(235, 241, 237, .62);
}

.community-fact span,
.community-fact b,
.community-site-conditions span,
.community-site-conditions b {
  display: block;
}

.community-fact span,
.community-site-conditions span {
  color: var(--community-muted);
  font-size: 8px;
}

.community-fact b,
.community-site-conditions b {
  margin-top: 5px;
  overflow: hidden;
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-overflow: ellipsis;
}

.community-comments,
.community-comment-section,
.community-comment-panel {
  margin-top: 18px;
  border: 1px solid rgba(128, 150, 143, .2);
  border-radius: 22px;
  padding: clamp(18px, 2.5vw, 28px);
  background: rgba(255, 255, 255, .78);
}

.community-comments-head,
.community-comment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}

.community-comments-head h2,
.community-comment-heading h2 {
  margin: 0;
  font-size: 20px;
}

.community-comment-heading > b {
  font-size: 15px;
}

.community-comment-heading > span,
.community-comment-loading,
.community-comment-empty {
  color: var(--community-muted);
  font-size: 9px;
  line-height: 1.65;
}

.community-comment-panel .community-comment-form {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(128, 150, 143, .17);
}

.community-comment-panel .community-comment-form .community-field {
  grid-column: 1;
}

.community-comment-login {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  padding: 0 15px;
  color: #fff;
  background: var(--community-ink);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.community-comment-sort {
  min-height: 37px;
  border: 1px solid var(--community-line);
  border-radius: 10px;
  padding: 0 30px 0 10px;
  color: var(--community-muted);
  background: transparent;
  font-size: 9px;
}

.community-comment-form,
.community-reply-form {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 20px;
}

.community-comment-form textarea,
.community-reply-form textarea,
.community-comment-input {
  width: 100%;
  min-height: 74px;
  border: 1px solid rgba(115, 140, 132, .28);
  border-radius: 12px;
  padding: 11px;
  color: var(--community-ink);
  background: rgba(247, 250, 247, .86);
  font-size: 11px;
  line-height: 1.65;
  resize: vertical;
  outline: 0;
}

.community-comment-form button,
.community-reply-form button {
  min-height: 42px;
  border: 0;
  border-radius: 11px;
  padding: 0 14px;
  color: #fff;
  background: var(--community-ink);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.community-comment-list,
.community-comments-list {
  display: grid;
  gap: 0;
}

.community-comment,
.community-comment-card {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  gap: 11px;
  padding: 18px 0;
  border-top: 1px solid rgba(128, 150, 143, .17);
}

.community-comment:first-child,
.community-comment-card:first-child {
  border-top: 0;
}

.community-comment.is-accepted,
.community-comment-card.is-accepted {
  margin: 8px -12px;
  border: 1px solid rgba(66, 165, 121, .24);
  border-left: 3px solid #42a579;
  border-radius: 14px;
  padding: 17px 14px;
  background: rgba(66, 165, 121, .06);
}

.community-comment-main {
  min-width: 0;
}

.community-comment-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.community-comment-head b {
  font-size: 11px;
}

.community-comment-head span,
.community-comment-head time {
  color: var(--community-muted);
  font-size: 8px;
}

.community-accepted-badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  padding: 0 7px;
  color: #26704d;
  background: rgba(66, 165, 121, .12);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.community-comment-body {
  margin-top: 7px;
  color: #40564f;
  font-size: 11px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.community-comment-actions {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.community-comment-replies,
.community-replies {
  grid-column: 2;
  margin-top: 11px;
  border-left: 2px solid rgba(128, 150, 143, .16);
  padding-left: 14px;
}

.community-comment-replies .community-comment,
.community-replies .community-comment-card {
  grid-template-columns: 32px minmax(0, 1fr);
  padding: 13px 0;
}

.community-comment-replies .community-comment-avatar,
.community-replies .community-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.community-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 22px;
  background: rgba(3, 13, 16, .66);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.community-modal[hidden] {
  display: none !important;
}

.community-modal-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 22px;
  padding: 24px;
  background: var(--community-surface);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .32);
}

/* Account / sign-in / profile */
#accountView,
.account-page {
  min-height: calc(100vh - 72px);
  padding: clamp(24px, 5vw, 60px) clamp(18px, 5vw, 72px) 80px;
}

.account-shell {
  width: min(980px, 100%);
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(390px, 1.14fr);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(128, 150, 143, .2);
  border-radius: 28px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 30px 90px rgba(7, 23, 27, .14);
}

.account-brand,
.account-aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  color: #eff6f3;
  background:
    radial-gradient(circle at 8% 100%, rgba(255, 106, 42, .22), transparent 19rem),
    radial-gradient(circle at 90% 12%, rgba(78, 142, 255, .17), transparent 16rem),
    linear-gradient(rgba(131, 162, 153, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131, 162, 153, .055) 1px, transparent 1px),
    linear-gradient(145deg, #07171b, #0b3031);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
}

.account-brand-mark {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.account-brand-mark span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  color: var(--community-orange);
  background: rgba(255, 255, 255, .06);
  font: 17px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.account-brand h1,
.account-aside h1 {
  margin: 34px 0 14px;
  color: #f5faf7;
  font-size: clamp(30px, 4vw, 43px);
  line-height: 1.12;
  letter-spacing: -1.8px;
}

.account-brand p,
.account-aside p {
  margin: 0;
  color: #9fb2ac;
  font-size: 12px;
  line-height: 1.8;
}

.account-benefits {
  display: grid;
  gap: 10px;
  margin-top: 31px;
}

.account-benefits div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(197, 219, 212, .12);
  border-radius: 13px;
  padding: 11px;
  background: rgba(255, 255, 255, .045);
}

.account-benefits i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ff9568;
  background: rgba(255, 106, 42, .12);
  font-style: normal;
}

.account-benefits b,
.account-benefits span {
  display: block;
}

.account-benefits b {
  font-size: 10px;
}

.account-benefits span {
  margin-top: 3px;
  color: #849a94;
  font-size: 8px;
}

.account-brand small,
.account-aside small {
  color: #708681;
  font-size: 8px;
  line-height: 1.6;
}

.account-card,
.account-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 62px);
  background: rgba(250, 252, 249, .86);
}

.account-card-head h2,
.account-panel h2 {
  margin: 7px 0 7px;
  font-size: 27px;
  letter-spacing: -1px;
}

.account-card-head p,
.account-panel > p {
  margin: 0 0 22px;
  color: var(--community-muted);
  font-size: 10px;
  line-height: 1.7;
}

.account-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-bottom: 24px;
  border-radius: 13px;
  padding: 5px;
  background: #e9efeb;
}

.account-tab,
.account-tabs button {
  min-height: 41px;
  border: 0;
  border-radius: 10px;
  color: var(--community-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.account-tab.active,
.account-tab[aria-selected="true"],
.account-tabs button.active {
  color: var(--community-ink);
  background: #fff;
  box-shadow: 0 7px 20px rgba(7, 23, 27, .08);
}

.account-form,
#accountProfileForm {
  display: grid;
  gap: 13px;
}

.account-form[hidden],
#accountProfileForm[hidden] {
  display: none !important;
}

.account-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.account-field label,
.account-form label {
  color: #455a54;
  font-size: 9px;
  font-weight: 800;
}

.account-field input,
.account-field select,
.account-field textarea,
.account-form input,
.account-form select,
.account-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(115, 140, 132, .28);
  border-radius: 11px;
  color: var(--community-ink);
  background: #f8faf7;
  font-size: 12px;
  outline: 0;
}

.account-field input,
.account-field select,
.account-form input,
.account-form select {
  min-height: 47px;
  padding: 0 12px;
}

.account-field textarea,
.account-form textarea {
  min-height: 92px;
  padding: 11px;
  line-height: 1.6;
  resize: vertical;
}

.account-password-wrap {
  position: relative;
}

.account-password-wrap input {
  padding-right: 48px;
}

.account-password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 37px;
  height: 35px;
  border: 0;
  border-radius: 9px;
  color: var(--community-muted);
  background: transparent;
  font-size: 9px;
  cursor: pointer;
  transform: translateY(-50%);
}

.account-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--community-muted);
  font-size: 9px;
  line-height: 1.55;
}

.account-checkbox input {
  width: 17px;
  height: 17px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--community-orange);
}

.account-link {
  border: 0;
  padding: 0;
  color: var(--community-orange-deep);
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.account-submit,
.account-primary {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #16393e, #0b2328);
  box-shadow: 0 12px 25px rgba(7, 23, 27, .16);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.account-submit:hover,
.account-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 31px rgba(7, 23, 27, .23);
}

.account-submit:disabled,
.account-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.account-message,
.account-error,
.account-success {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 9px;
  line-height: 1.6;
}

.account-error {
  border: 1px solid rgba(196, 67, 48, .2);
  color: #a13728;
  background: #fff1ee;
}

.account-success {
  border: 1px solid rgba(49, 146, 99, .2);
  color: #28724f;
  background: #eef9f2;
}

.account-note {
  margin-top: 16px;
  color: var(--community-muted);
  font-size: 8px;
  line-height: 1.7;
  text-align: center;
}

.account-profile {
  width: min(980px, 100%);
  margin: 0 auto;
}

.account-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(128, 150, 143, .2);
  border-radius: 22px;
  padding: 24px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--community-shadow);
}

.account-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  font-size: 22px;
}

.account-profile-copy h1 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -.7px;
}

.account-profile-copy p {
  margin: 6px 0 0;
  color: var(--community-muted);
  font-size: 10px;
  line-height: 1.65;
}

.account-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.account-actions button {
  min-height: 40px;
  border: 1px solid var(--community-line);
  border-radius: 11px;
  padding: 0 12px;
  color: var(--community-ink);
  background: var(--community-surface);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

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

.account-profile-stats > div {
  border: 1px solid rgba(128, 150, 143, .18);
  border-radius: 14px;
  padding: 15px;
  background: rgba(255, 255, 255, .67);
}

.account-profile-stats b,
.account-profile-stats span {
  display: block;
}

.account-profile-stats b {
  font: 700 22px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.account-profile-stats span {
  margin-top: 6px;
  color: var(--community-muted);
  font-size: 8px;
}

.account-profile-grid,
.account-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 16px;
  margin-top: 16px;
}

.account-profile-panel,
.account-settings-panel {
  border: 1px solid rgba(128, 150, 143, .18);
  border-radius: 18px;
  padding: 21px;
  background: rgba(255, 255, 255, .72);
}

.account-profile-panel h2,
.account-settings-panel h2 {
  margin: 0 0 15px;
  font-size: 17px;
}

/* Loading states */
.community-skeleton {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid rgba(128, 150, 143, .15);
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
}

.community-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .66), transparent);
  animation: communityShimmer 1.25s infinite;
}

/* Exact hooks used by the site's community/account markup. */
.community-view .community-head {
  min-height: 178px;
  margin: 0;
  padding: 44px clamp(34px, 5vw, 78px) 30px;
  align-items: end;
  color: var(--community-ink);
  border: 0;
  border-bottom: 1px solid var(--community-line);
  border-radius: 0;
  background: rgba(255, 255, 255, .18);
  box-shadow: none;
}

.community-view .community-head::after {
  display: none;
}

.community-view .community-head h1 {
  margin: 7px 0 5px;
  color: var(--community-ink);
  font-size: 36px;
  letter-spacing: -2px;
}

.community-view .community-head p {
  color: var(--community-muted);
  font-size: 12px;
}

.community-view .community-head .community-hero-stats {
  margin: 0;
}

.community-view .community-head .community-hero-stats > div {
  border-left-color: var(--community-line);
}

.community-view .community-head .community-hero-stats b {
  color: var(--community-ink);
}

.community-view .community-head .community-hero-stats span {
  color: var(--community-muted);
}

.community-view .community-hero {
  min-height: 270px;
}

.community-hero-copy > span {
  display: block;
  color: #ff9a70;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.community-hero-copy h2 {
  max-width: 720px;
  margin: 14px 0 10px;
  color: #f5faf7;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -1.7px;
}

.community-hero-actions button {
  min-height: 46px;
  border: 1px solid rgba(201, 221, 215, .22);
  border-radius: 13px;
  padding: 0 16px;
  color: #dbe6e2;
  background: rgba(255, 255, 255, .055);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.community-hero-actions button:first-child {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ff7540, #e75320);
  box-shadow: 0 12px 26px rgba(231, 83, 32, .27);
}

.community-hero-actions button:hover {
  transform: translateY(-2px);
}

.community-toolbar {
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px);
}

.community-sort {
  display: grid;
  gap: 6px;
}

.community-sort > span {
  color: var(--community-muted);
  font-size: 8px;
  font-weight: 700;
}

.community-composer-head,
.community-composer-foot {
  grid-column: 1 / -1;
}

.community-composer-head {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) 38px;
  align-items: center;
}

.community-composer-head b,
.community-composer-head span {
  display: block;
}

.community-composer-head b {
  font-size: 12px;
}

.community-composer-head span {
  margin-top: 4px;
  color: var(--community-muted);
  font-size: 9px;
  line-height: 1.5;
}

.community-composer-head > button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--community-line);
  border-radius: 11px;
  color: var(--community-muted);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.community-field:has(#communityBody) {
  grid-column: 1 / -1;
}

.community-field > small {
  justify-self: end;
  color: var(--community-muted);
  font-size: 8px;
}

.community-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 3px;
  padding-top: 14px;
  border-top: 1px solid rgba(128, 150, 143, .17);
}

.community-composer-foot p {
  max-width: 570px;
  margin: 0;
  color: var(--community-muted);
  font-size: 8px;
  line-height: 1.6;
}

.community-composer-foot .community-submit {
  width: auto;
  flex: 0 0 auto;
}

.community-signin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 16px;
  border: 1px solid rgba(128, 150, 143, .2);
  border-left: 3px solid var(--community-orange);
  border-radius: 18px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(255, 247, 241, .92), rgba(255, 255, 255, .76));
}

.community-signin-card > div > span {
  color: var(--community-orange-deep);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.community-signin-card h2 {
  margin: 7px 0 4px;
  font-size: 17px;
}

.community-signin-card p {
  margin: 0;
  color: var(--community-muted);
  font-size: 9px;
  line-height: 1.6;
}

.community-signin-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
}

.community-signin-actions button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--community-line);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.community-signin-actions button {
  border-color: var(--community-ink);
  color: #fff;
  background: var(--community-ink);
}

.guest-access-form {
  display: grid;
  gap: 13px;
}

.guest-agreement {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: var(--community-muted);
  font-size: 9px;
  line-height: 1.6;
  cursor: pointer;
}

.guest-agreement input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--community-orange);
}

.guest-access-notice {
  margin: 12px 0 0 !important;
  border-left: 3px solid var(--community-orange);
  border-radius: 9px;
  padding: 10px 12px;
  color: #795446 !important;
  background: #fff4ed;
  font-size: 8px !important;
  line-height: 1.7 !important;
}

.guest-author-label {
  color: #a34d2e !important;
  font-weight: 800;
}

.community-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  margin: 4px 0 10px;
  border: 1px solid rgba(128, 150, 143, .16);
  border-radius: 11px;
  padding: 0 12px;
  color: var(--community-muted);
  background: rgba(255, 255, 255, .45);
  font-size: 9px;
}

.community-side-card {
  border: 1px solid rgba(128, 150, 143, .18);
  border-radius: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 32px rgba(7, 23, 27, .045);
}

.community-side-card h2 {
  margin: 7px 0 14px;
  font-size: 16px;
}

.community-side-card ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-side-card li {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid rgba(128, 150, 143, .14);
}

.community-side-card li:first-child {
  border-top: 0;
}

.community-side-card li b {
  color: var(--community-orange-deep);
  font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.community-side-card li span,
.community-side-card > p {
  color: var(--community-muted);
  font-size: 9px;
  line-height: 1.65;
}

.community-guide > div {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(128, 150, 143, .14);
}

.community-guide > div b {
  font-size: 10px;
}

.community-guide > div span {
  color: var(--community-muted);
  font-size: 8px;
  line-height: 1.5;
}

.account-nudge {
  border-left: 3px solid var(--community-blue);
}

.account-nudge > b {
  font-size: 12px;
}

.account-nudge button {
  width: 100%;
  min-height: 40px;
  margin-top: 11px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--community-ink);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.account-head .account-security {
  border: 1px solid var(--community-line);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--community-muted);
  background: rgba(255, 255, 255, .4);
  font-size: 8px;
}

.account-card-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #1d4548, #0b2227);
  box-shadow: 0 12px 27px rgba(7, 23, 27, .17);
  font-size: 19px;
  font-weight: 800;
}

.account-card > span {
  color: var(--community-orange-deep);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.account-card > h2 {
  margin: 8px 0 7px;
  font-size: 27px;
}

.account-card > p {
  margin: 0 0 20px;
  color: var(--community-muted);
  font-size: 10px;
  line-height: 1.7;
}

.account-card > small {
  margin-top: 12px;
  color: var(--community-muted);
  font-size: 8px;
  text-align: center;
}

.account-submit:is(a) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.account-profile .profile-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #1e4548, #0c2429);
  font-size: 18px;
  font-weight: 800;
}

.account-profile .profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 17px 0;
}

.account-profile .profile-grid > div {
  border: 1px solid rgba(128, 150, 143, .18);
  border-radius: 12px;
  padding: 11px;
  background: rgba(235, 241, 237, .55);
}

.account-profile .profile-grid b,
.account-profile .profile-grid span {
  display: block;
}

.account-profile .profile-grid b {
  font: 700 18px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.account-profile .profile-grid span {
  margin-top: 5px;
  color: var(--community-muted);
  font-size: 8px;
}

.account-profile .account-actions {
  margin-top: 15px;
}

.account-profile .account-actions a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--community-line);
  border-radius: 11px;
  padding: 0 12px;
  color: var(--community-muted);
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.account-status {
  grid-column: 1 / -1;
  padding: 9px 14px;
  color: var(--community-muted);
  border-top: 1px solid rgba(128, 150, 143, .14);
  background: rgba(255, 255, 255, .35);
  font-size: 8px;
  text-align: center;
}

.account-panel.account-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #eff6f3;
  background:
    radial-gradient(circle at 8% 100%, rgba(255, 106, 42, .22), transparent 19rem),
    radial-gradient(circle at 90% 12%, rgba(78, 142, 255, .17), transparent 16rem),
    linear-gradient(rgba(131, 162, 153, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131, 162, 153, .055) 1px, transparent 1px),
    linear-gradient(145deg, #07171b, #0b3031);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
}

.account-panel.account-brand h2 {
  margin: 34px 0 14px;
  color: #f5faf7;
  font-size: clamp(30px, 4vw, 43px);
  line-height: 1.12;
  letter-spacing: -1.8px;
}

.account-panel.account-brand > p {
  color: #9fb2ac;
}

@keyframes communityShimmer {
  100% { transform: translateX(100%); }
}

/* Shared keyboard focus and invalid states */
#communityView :is(button, a, input, select, textarea):focus-visible,
#accountView :is(button, a, input, select, textarea):focus-visible,
.community-page :is(button, a, input, select, textarea):focus-visible,
.account-page :is(button, a, input, select, textarea):focus-visible,
#accountEntry:focus-visible {
  outline: 3px solid rgba(78, 142, 255, .48);
  outline-offset: 3px;
}

.community-search input:focus,
.community-field input:focus,
.community-field select:focus,
.community-field textarea:focus,
.community-form input:focus,
.community-form select:focus,
.community-form textarea:focus,
.community-comment-input:focus,
.community-comment-form textarea:focus,
.account-field input:focus,
.account-field select:focus,
.account-field textarea:focus,
.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus {
  border-color: rgba(61, 111, 174, .65);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(78, 142, 255, .09);
}

/* Dark theme follows the site's existing body.light-off switch. */
body.light-off #communityView,
body.light-off #accountView,
body.light-off .community-page,
body.light-off .account-page {
  --community-surface: #172429;
  --community-line: #334247;
  --community-muted: #91a09c;
  color: #e8efeb;
}

body.light-off .community-panel,
body.light-off .community-aside-card,
body.light-off .community-sidebar-card,
body.light-off .community-tabs,
body.light-off .community-category-tabs,
body.light-off .community-post-card,
body.light-off .community-post,
body.light-off .community-composer,
body.light-off #communityComposer,
body.light-off .community-post-detail,
body.light-off .community-comments,
body.light-off .community-comment-section,
body.light-off .community-empty,
body.light-off .community-feed-empty,
body.light-off .community-load-more,
body.light-off #communityLoadMore,
body.light-off .account-shell,
body.light-off .account-profile-head,
body.light-off .account-profile-stats > div,
body.light-off .account-profile-panel,
body.light-off .account-settings-panel {
  border-color: rgba(142, 165, 157, .14);
  background: rgba(20, 36, 40, .8);
}

body.light-off .guest-access-notice {
  color: #d6b5a7 !important;
  background: #38251e;
}

body.light-off .community-post-card:hover,
body.light-off .community-post:hover {
  background: rgba(26, 46, 50, .96);
}

body.light-off .community-post-title,
body.light-off .community-post-card h2,
body.light-off .community-post-card h3,
body.light-off .community-post h2,
body.light-off .community-post h3,
body.light-off .community-result-line b,
body.light-off .community-tab:hover,
body.light-off .community-tabs button:hover,
body.light-off .community-empty h3,
body.light-off .community-feed-empty h3,
body.light-off .community-comment-head b,
body.light-off .account-card-head h2,
body.light-off .account-panel h2,
body.light-off .account-profile-copy h1,
body.light-off .account-profile-panel h2,
body.light-off .account-settings-panel h2 {
  color: #eaf1ed;
}

body.light-off .community-post-excerpt,
body.light-off .community-post-body > p,
body.light-off .community-post-content,
body.light-off .community-comment-body,
body.light-off .account-profile-copy p {
  color: #9cacA7;
}

body.light-off .community-search input,
body.light-off #communitySearch,
body.light-off .community-filter select,
body.light-off .community-sort select,
body.light-off #communitySort,
body.light-off .community-field input,
body.light-off .community-field select,
body.light-off .community-field textarea,
body.light-off .community-form input,
body.light-off .community-form select,
body.light-off .community-form textarea,
body.light-off #communityTitle,
body.light-off #communityBody,
body.light-off #communityCategory,
body.light-off .community-comment-form textarea,
body.light-off .community-reply-form textarea,
body.light-off .community-comment-input,
body.light-off .account-field input,
body.light-off .account-field select,
body.light-off .account-field textarea,
body.light-off .account-form input,
body.light-off .account-form select,
body.light-off .account-form textarea {
  color: #e8efeb;
  border-color: rgba(142, 165, 157, .2);
  background: #101d21;
}

body.light-off .community-post-facts span,
body.light-off .community-device-facts span,
body.light-off .community-fact,
body.light-off .community-site-conditions > div,
body.light-off .community-post-content pre,
body.light-off .community-post-content code,
body.light-off .account-tabs {
  color: #bdcac6;
  border-color: rgba(142, 165, 157, .16);
  background: #1a2b2f;
}

body.light-off .community-guidelines,
body.light-off .community-template-hint,
body.light-off .community-safety-notice,
body.light-off .community-privacy-notice {
  color: #d7b4a4;
  background: #38251e;
}

body.light-off .account-card,
body.light-off .account-panel {
  background: #132126;
}

body.light-off .account-tab.active,
body.light-off .account-tabs button.active {
  color: #edf4f0;
  background: #24363a;
}

body.light-off .community-view .community-head {
  color: #e8efeb;
  border-bottom-color: #334247;
  background: #111b1f;
}

body.light-off .community-view .community-head h1,
body.light-off .community-view .community-head .community-hero-stats b {
  color: #eaf1ed;
}

body.light-off .community-signin-card,
body.light-off .community-side-card,
body.light-off .community-status {
  color: #e8efeb;
  border-color: rgba(142, 165, 157, .14);
  background: rgba(20, 36, 40, .8);
}

body.light-off .community-signin-card h2,
body.light-off .community-side-card h2,
body.light-off .account-card > h2 {
  color: #eaf1ed;
}

body.light-off .account-nudge button {
  color: #102026;
  background: #e9f0ec;
}

body.light-off .account-profile .profile-grid > div {
  border-color: rgba(142, 165, 157, .16);
  background: #1a2b2f;
}

body.light-off .account-status {
  border-top-color: rgba(142, 165, 157, .14);
  background: rgba(8, 20, 24, .35);
}

@media (max-width: 1100px) {
  .community-head,
  .community-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .community-hero-actions,
  .community-head-actions {
    justify-content: flex-start;
  }

  .community-layout,
  .community-shell {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 270px);
  }

  .community-toolbar,
  .community-filters {
    grid-template-columns: minmax(190px, 1fr) minmax(115px, auto);
  }

  .community-toolbar > :last-child,
  .community-filters > :last-child {
    grid-column: auto;
  }

  .account-shell {
    grid-template-columns: minmax(260px, .78fr) minmax(340px, 1.22fr);
  }
}

@media (max-width: 860px) {
  .community-layout,
  .community-shell {
    grid-template-columns: 1fr;
  }

  .community-aside,
  .community-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }

  .community-guidelines {
    grid-column: 1 / -1;
  }

  .community-fact-grid,
  .community-site-conditions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .account-brand,
  .account-aside {
    min-height: 250px;
  }

  .account-benefits {
    display: none;
  }

  .account-profile-grid,
  .account-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #communityView,
  .community-page {
    padding-bottom: 92px;
  }

  .community-head,
  .community-hero {
    min-height: 0;
    margin: 12px 12px 0;
    padding: 30px 20px 24px;
    border-radius: 23px;
  }

  .community-head::after,
  .community-hero::after {
    top: 19px;
    right: 18px;
    font-size: 7px;
  }

  .community-head h1,
  .community-hero h1 {
    margin-top: 16px;
    font-size: 34px;
    letter-spacing: -1.6px;
  }

  .community-head p,
  .community-hero p {
    font-size: 12px;
  }

  .community-hero-actions,
  .community-head-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .community-primary-action,
  .community-create,
  .community-compose-button,
  .community-submit,
  #communityPublish,
  .community-secondary-action,
  .community-ghost-button {
    width: 100%;
    min-height: 48px;
  }

  .community-stats,
  .community-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .community-stats > div,
  .community-hero-stats > div {
    min-width: 0;
    padding: 0 9px;
  }

  .community-stats b,
  .community-hero-stats b {
    font-size: 17px;
  }

  .community-stats span,
  .community-hero-stats span {
    font-size: 7px;
  }

  .community-layout,
  .community-shell {
    gap: 14px;
    padding: 15px 12px 0;
  }

  .community-tabs,
  .community-category-tabs {
    margin-right: -12px;
    border-right: 0;
    border-radius: 14px 0 0 14px;
  }

  .community-tab,
  .community-tabs button,
  .community-category-tab,
  .community-category-tabs button {
    min-height: 42px;
  }

  .community-toolbar,
  .community-filters {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .community-search {
    grid-column: 1 / -1;
  }

  .community-search input,
  #communitySearch,
  .community-filter select,
  .community-sort select,
  #communitySort {
    height: 46px;
    font-size: 16px;
  }

  .community-filter select,
  .community-sort select,
  #communitySort {
    font-size: 12px;
  }

  .community-post-card,
  .community-post {
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: none;
  }

  .community-post-card:hover,
  .community-post:hover {
    transform: none;
  }

  .community-post-head,
  .community-post-header {
    gap: 9px;
  }

  .community-post-title,
  .community-post-card h2,
  .community-post-card h3,
  .community-post h2,
  .community-post h3 {
    font-size: 16px;
  }

  .community-post-excerpt,
  .community-post-body > p {
    font-size: 12px;
  }

  .community-post-media,
  .community-post-image {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-post-media img,
  .community-post-image img {
    height: 112px;
  }

  .community-post-actions,
  .community-card-actions,
  .community-comment-actions {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .community-post-actions button,
  .community-card-actions button,
  .community-comment-actions button {
    min-height: 44px;
    flex: 0 0 auto;
  }

  .community-aside,
  .community-sidebar {
    grid-template-columns: 1fr;
  }

  .community-guidelines {
    grid-column: auto;
  }

  .community-composer,
  #communityComposer,
  .community-post-detail,
  .community-comments,
  .community-comment-section {
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: none;
  }

  .community-form,
  .community-compose-form {
    grid-template-columns: 1fr;
  }

  .community-field.full,
  .community-field-wide,
  .community-form > textarea,
  #communityTitle,
  #communityBody {
    grid-column: auto;
  }

  .community-template-hint,
  .community-safety-notice,
  .community-privacy-notice,
  .community-check,
  .community-form-actions {
    grid-column: auto;
  }

  .community-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .community-field input,
  .community-field select,
  .community-field textarea,
  .community-form input,
  .community-form select,
  .community-form textarea,
  #communityTitle,
  #communityBody,
  #communityCategory {
    font-size: 16px;
  }

  .community-fact-grid,
  .community-site-conditions {
    grid-template-columns: 1fr 1fr;
  }

  .community-comment-form,
  .community-reply-form {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .community-comment-form button,
  .community-reply-form button {
    grid-column: 2;
    min-height: 44px;
  }

  .community-comment,
  .community-comment-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .community-comment-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .community-comment-body {
    font-size: 12px;
  }

  .community-comment-replies,
  .community-replies {
    grid-column: 1 / -1;
    margin-left: 34px;
  }

  .community-modal {
    align-items: end;
    padding: 0;
  }

  .community-modal-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }

  #accountView,
  .account-page {
    padding: 12px 12px 88px;
  }

  .account-shell {
    border-radius: 22px;
  }

  .account-brand,
  .account-aside {
    min-height: 190px;
    padding: 26px 22px;
  }

  .account-brand h1,
  .account-aside h1 {
    margin: 25px 0 10px;
    font-size: 30px;
  }

  .account-brand small,
  .account-aside small {
    display: none;
  }

  .account-card,
  .account-panel {
    padding: 27px 20px 30px;
  }

  .account-card-head h2,
  .account-panel h2 {
    font-size: 24px;
  }

  .account-field input,
  .account-field select,
  .account-field textarea,
  .account-form input,
  .account-form select,
  .account-form textarea {
    font-size: 16px;
  }

  .account-form-row {
    align-items: flex-start;
  }

  .account-profile-head {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
  }

  .account-profile-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  .account-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .account-actions button {
    min-height: 44px;
    flex: 1;
  }

  .account-profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .community-view .community-head {
    min-height: 150px;
    margin: 0;
    padding: 30px 18px 22px;
    border-radius: 0;
  }

  .community-view .community-head h1 {
    font-size: 29px;
  }

  .community-view .community-head .community-hero-stats {
    display: none;
  }

  .community-view .community-hero {
    min-height: 0;
    margin: 12px 12px 0;
  }

  .community-hero-copy h2 {
    font-size: 29px;
  }

  .community-hero-actions button {
    width: 100%;
    min-height: 48px;
  }

  .community-composer-head,
  .community-composer-foot {
    grid-column: auto;
  }

  .community-composer-head {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
  }

  .community-composer-foot {
    display: grid;
    grid-template-columns: 1fr;
  }

  .community-composer-foot .community-submit {
    width: 100%;
  }

  .community-signin-card {
    display: grid;
    gap: 15px;
    padding: 18px 16px;
  }

  .community-side-card {
    border-radius: 18px;
    padding: 18px;
    box-shadow: none;
  }

  .account-head .account-security {
    display: none;
  }

  .account-panel.account-brand {
    min-height: 190px;
    padding: 26px 22px;
  }

  .account-panel.account-brand h2 {
    margin: 25px 0 10px;
    font-size: 30px;
  }

  .account-profile .profile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 430px) {
  #accountEntry > i { display: none; }

  .community-stats > div,
  .community-hero-stats > div {
    padding: 0 7px;
  }

  .community-toolbar,
  .community-filters {
    grid-template-columns: 1fr;
  }

  .community-search {
    grid-column: auto;
  }

  .community-post-facts,
  .community-device-facts {
    gap: 5px;
  }

  .community-post-media,
  .community-post-image,
  .community-fact-grid,
  .community-site-conditions {
    grid-template-columns: 1fr;
  }

  .community-post-media img,
  .community-post-image img {
    height: 180px;
  }

  .account-profile-head {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .account-profile-avatar {
    justify-self: center;
  }

  .account-profile-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .community-signin-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .community-signin-actions button {
    width: 100%;
    min-height: 48px;
  }

  .guest-access-form .account-submit {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #communityView *,
  #communityView *::before,
  #communityView *::after,
  #accountView *,
  #accountView *::before,
  #accountView *::after,
  .community-page *,
  .account-page * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}