/* Shared desktop web presentation: flat surfaces and quiet separators. */
:root {
  --bg: #fff;
  --card: #fff;
  --surface: #fff;
  --line: #e5e7eb;
  --border: #e5e7eb;
  --shadow: none;
  --radius-xl: 0;
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
}

body { background: #fff; }
/* Keep every card surface square, including cards added by later page modules. */
:where([class*="card"], [class*="Card"]):not([class*="avatar"]):not([class*="Avatar"]) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.topbar,
.topbar.scrolled {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
}

/* Sections read as one continuous page instead of separate floating cards. */
.section-card,
.info-item,
.search-history,
.search-layout .user-card,
.page-profile-edit .avatar-upload-shell,
.appeal-item__reply,
.empty-state,
.ui-state,
.ui-state-skeleton,
.publish-media-panel,
.inline-reply-box,
.verification-modal,
.page-phone-edit .modal-dialog,
.page-deactivate .modal-dialog,
.legal-document-dialog,
.app-dialog-card,
.report-sheet-card,
.report-sheet-option {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.section-card {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.section-card:is(.composer, .posts-browser-hero, .posts-topic-panel, .profile-hero,
  .profile-tabs-wrap, .user-hero, .user-tabs-wrap, .settings-card,
  .auth-card, .feature-card, .conversation-list, .chat-panel) {
  border-top: 1px solid var(--line);
}
.section-card.side-block + .section-card.side-block { border-top: 0; }
.feed .tabs,
.feed-browser-tabs { background: #fff; backdrop-filter: none; }

.profile-stats-grid,
.feature-grid,
.info-grid { gap: 0; }
.profile-stats-grid > *,
.feature-grid > *,
.info-grid > * {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.stat-card-button:hover,
.search-layout .user-card:hover { transform: none; box-shadow: none; background: #f8fafc; }
.stat-card-button:active { transform: none; }
.post-simple:last-child,
.user-card:last-child { border-bottom: 1px solid var(--line); }

/* Content, image frames, controls, and dialogs share the same square edge. */
body :where(button, input:not([type="radio"]):not([type="checkbox"]), textarea, select) {
  border-radius: 0 !important;
}
.btn,
.hero-tag,
.tag-list span,
.soft-badge,
.thumb-overflow-tag,
.ui-state__badge,
.report-sheet-tag,
.chat-history-indicator,
.page-profile-edit .profile-edit-fixed-list span {
  border-radius: 0 !important;
}
:where(.preview-thumb, .post-thumb, .detail-thumb, .media-card,
  .hot-post-spotlight__thumb, .upload-preview-item, .search-history,
  .info-item, .conversation-item, .bubble, .reply-indicator,
  .detail-menu-popover, .tag-list span, .soft-badge, .hero-tag,
  .search-history__tag, .search-history__clear, .follow-pill,
  .appeal-type, .appeal-item__status, .verification-badge,
  .verification-section, .reject-reason, .radio-option,
  .activity-web-card__cover, .activity-web-badge,
  .activity-web-config-note, .activity-web-poll-option,
  .activity-web-type, .activity-web-poll-option__choice,
  .activity-web-field, .activity-web-option, .activity-web-state,
  .activity-web-admin, .activity-web-code, .activity-web-detail,
  .chat-connection-banner, .app-toast) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.btn:hover,
.btn-dark:hover,
.btn-light:hover,
.page-login .auth-code-btn:hover {
  box-shadow: none;
  transform: none;
}
.btn:active { transform: none; }
.preview-thumb,
.post-thumb,
.detail-thumb,
.media-card,
.hot-post-spotlight__thumb,
.upload-preview-item { border: 1px solid var(--line); }

.empty-state,
.ui-state,
.ui-state-skeleton,
.publish-media-panel,
.inline-reply-box,
.search-history,
.page-profile-edit .avatar-upload-shell,
.appeal-item__reply,
.reject-reason {
  background: #fff;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.search-layout .user-grid { gap: 0; }
.search-layout .user-card {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.page-phone-edit .danger-zone-card,
.page-deactivate .danger-zone-card {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.conversation-item { border-bottom: 1px solid var(--line); }
.conversation-item:hover,
.conversation-item.active { background: #f8fafc; }
.page-messages .conversation-list {
  border: 0;
  border-right: 1px solid var(--line);
}
.page-messages .chat-panel { border: 0; }

/* Activity listing, submissions, and voting follow the same line rhythm. */
.activity-web-card,
.activity-web-detail__main,
.activity-web-poll,
.activity-web-admin,
.activity-web-code,
.activity-web-option,
.activity-web-submission-form,
.activity-web-my-submission {
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.activity-web-code form,
.activity-web-poll__heading,
.activity-web-vote-dock { border-top-width: 1px; border-bottom-width: 1px; }
.activity-web-poll-option,
.activity-web-type {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.activity-web-poll-option.active,
.activity-web-type.active {
  border-left: 2px solid var(--blue);
  border-bottom-color: var(--line);
  background: #f7fbff;
}
.activity-web-card__cover { border: 1px solid var(--line); }
.activity-web-config-note { border-left: 2px solid var(--blue); background: #f8fafc; }

/* Login calls to action use the same treatment as the rest of the site. */
.page-login .login-submit-btn,
.page-login .register-submit-btn {
  height: 52px;
  background: #111;
  border: 1px solid #111;
  isolation: auto;
}
.page-login .glass-base,
.page-login .liquid-wrap,
.page-login .glass-highlight { display: none; }
.page-login .btn-text { color: #fff; text-shadow: none; letter-spacing: 0; }
.page-login .auth-code-btn { box-shadow: none; }

/* Overlay separation remains visible without a raised card effect. */
.app-dialog-card,
.report-sheet-card,
.verification-modal,
.page-phone-edit .modal-dialog,
.page-deactivate .modal-dialog,
.legal-document-dialog {
  background: #fff;
  border: 1px solid var(--line);
}
.report-sheet-option,
.report-sheet-option:has(input:checked) {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.report-sheet-option:has(input:checked) { border-left: 2px solid var(--blue); }

@media (max-width: 760px) {
  .feature-grid > *,
  .profile-stats-grid > *,
  .info-grid > * { border-right: 0; }
  .page-messages .conversation-list { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* The theme control stays square like the rest of the desktop Web shell. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.theme-toggle__icon { font-size: 18px; line-height: 1; }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 760px) {
  .theme-toggle { min-width: 42px; padding: 8px; }
  .theme-toggle__label { display: none; }
}

/* Dark mode changes color only; the flat layout and square surfaces remain. */
html[data-theme="dark"] {
  --bg: #111418;
  --card: #181c22;
  --surface: #181c22;
  --text: #e7ebf0;
  --subtext: #b3bdc8;
  --muted: #aab4c0;
  --line: #37414c;
  --border: #37414c;
  --white: #181c22;
  --black: #e7ebf0;
  --blue: #76bcff;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .topbar.scrolled,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .feed .tabs,
html[data-theme="dark"] .feed-browser-tabs,
html[data-theme="dark"] .profile-stats-grid > *,
html[data-theme="dark"] .feature-grid > *,
html[data-theme="dark"] .info-grid > *,
html[data-theme="dark"] .search-layout .user-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .ui-state,
html[data-theme="dark"] .ui-state-skeleton,
html[data-theme="dark"] .publish-media-panel,
html[data-theme="dark"] .inline-reply-box,
html[data-theme="dark"] .search-history,
html[data-theme="dark"] .page-profile-edit .avatar-upload-shell,
html[data-theme="dark"] .appeal-item__reply,
html[data-theme="dark"] .reject-reason,
html[data-theme="dark"] .app-dialog-card,
html[data-theme="dark"] .report-sheet-card,
html[data-theme="dark"] .report-sheet-option,
html[data-theme="dark"] .legal-document-dialog,
html[data-theme="dark"] .page-phone-edit .modal-dialog,
html[data-theme="dark"] .page-deactivate .modal-dialog {
  background: var(--card) !important;
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] body :where(input:not([type="radio"]):not([type="checkbox"]), textarea, select) {
  background: #20262d;
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] body :where(input, textarea)::placeholder { color: #96a3b1; opacity: 1; }
html[data-theme="dark"] .topbar-search-input,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .soft-badge,
html[data-theme="dark"] .hero-tag,
html[data-theme="dark"] .bubble,
html[data-theme="dark"] .chat-history-indicator,
html[data-theme="dark"] .detail-menu-popover,
html[data-theme="dark"] .comment-picker,
html[data-theme="dark"] .chat-input-row,
html[data-theme="dark"] .message-interaction-filters button {
  background: #20262d;
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .btn-dark,
html[data-theme="dark"] .bubble-row.right .bubble,
html[data-theme="dark"] .detail-comment-sort__button.active,
html[data-theme="dark"] .page-login .login-submit-btn,
html[data-theme="dark"] .page-login .register-submit-btn,
html[data-theme="dark"] .page-login .auth-code-btn {
  background: var(--black) !important;
  color: var(--bg) !important;
  border-color: var(--black) !important;
}
html[data-theme="dark"] .page-login .btn-text { color: var(--bg) !important; }
html[data-theme="dark"] .nav-links a.active,
html[data-theme="dark"] .nav-links a:hover { color: var(--text); }
html[data-theme="dark"] .x-post:hover,
html[data-theme="dark"] .conversation-item:hover,
html[data-theme="dark"] .conversation-item.active,
html[data-theme="dark"] .stat-card-button:hover,
html[data-theme="dark"] .search-layout .user-card:hover,
html[data-theme="dark"] .message-assistant-link:hover,
html[data-theme="dark"] .activity-web-card:hover,
html[data-theme="dark"] .activity-extra-mine-row:hover { background: #222a32 !important; }
html[data-theme="dark"] .more-btn:hover,
html[data-theme="dark"] .action-btn:hover { background: #27313b; }
html[data-theme="dark"] .comment-picker,
html[data-theme="dark"] .detail-menu-popover,
html[data-theme="dark"] .app-dialog-card,
html[data-theme="dark"] .report-sheet-card { box-shadow: none; }
html[data-theme="dark"] .report-sheet-option:has(input:checked) { background: #263543 !important; border-left-color: var(--blue); }
html[data-theme="dark"] .report-sheet-option:hover { border-color: var(--blue); }
html[data-theme="dark"] .publish-reselect-hint,
html[data-theme="dark"] .chat-connection-banner--connecting { background: #40331c; color: #f4d898; border-color: #705827; }
html[data-theme="dark"] .user-report-button,
html[data-theme="dark"] .user-block-button,
html[data-theme="dark"] .danger-zone-card .btn-danger-outline { color: #ff9a92; }

/* Activity pages have their own fixed light colors, so their main surfaces follow the global theme here. */
html[data-theme="dark"] .activity-web-page,
html[data-theme="dark"] .activity-web-head,
html[data-theme="dark"] .activity-web-toolbar,
html[data-theme="dark"] .activity-web-grid,
html[data-theme="dark"] .activity-web-card,
html[data-theme="dark"] .activity-web-state,
html[data-theme="dark"] .activity-web-detail,
html[data-theme="dark"] .activity-web-poll,
html[data-theme="dark"] .activity-web-admin,
html[data-theme="dark"] .activity-web-type,
html[data-theme="dark"] .activity-web-option,
html[data-theme="dark"] .activity-web-config-note,
html[data-theme="dark"] .activity-web-vote-dock,
html[data-theme="dark"] .activity-extra-section,
html[data-theme="dark"] .activity-extra-calendar > span,
html[data-theme="dark"] .activity-extra-day,
html[data-theme="dark"] .activity-extra-month button,
html[data-theme="dark"] .activity-extra-work-image,
html[data-theme="dark"] .activity-extra-mine-row,
html[data-theme="dark"] #activity-time-policy .activity-settings-channel {
  background: var(--card) !important;
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .activity-web-field :where(input, textarea, select),
html[data-theme="dark"] .activity-extra-filter :where(input, select),
html[data-theme="dark"] .activity-extra-form-row :where(input, textarea, select),
html[data-theme="dark"] .activity-settings-slot input,
html[data-theme="dark"] #activity-search {
  background: #20262d !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .activity-web-head p,
html[data-theme="dark"] .activity-web-card p,
html[data-theme="dark"] .activity-web-card__foot,
html[data-theme="dark"] .activity-web-filter button,
html[data-theme="dark"] .activity-web-detail__description,
html[data-theme="dark"] .activity-web-facts,
html[data-theme="dark"] .activity-web-poll p,
html[data-theme="dark"] .activity-extra-line > span,
html[data-theme="dark"] .activity-extra-note,
html[data-theme="dark"] .activity-extra-session :where(span, small),
html[data-theme="dark"] .activity-extra-mine-row :where(span, small),
html[data-theme="dark"] .activity-extra-assistant-row p,
html[data-theme="dark"] .activity-extra-form-row,
html[data-theme="dark"] .activity-settings-slot label { color: var(--subtext); }
html[data-theme="dark"] .activity-web-fact strong,
html[data-theme="dark"] .activity-web-admin__stats strong,
html[data-theme="dark"] .activity-extra-section,
html[data-theme="dark"] .activity-extra-day,
html[data-theme="dark"] .activity-extra-form-row input { color: var(--text) !important; }
html[data-theme="dark"] .activity-web-filter button.active,
html[data-theme="dark"] .activity-web-mine-tabs button.active,
html[data-theme="dark"] .activity-web-mine-status button.active { color: var(--blue); }
html[data-theme="dark"] .activity-web-type.active,
html[data-theme="dark"] .activity-web-poll-option.active,
html[data-theme="dark"] .activity-extra-day.active,
html[data-theme="dark"] .activity-web-badge { background: #20374a !important; color: var(--blue) !important; }
html[data-theme="dark"] .activity-extra-day--blank,
html[data-theme="dark"] .activity-web-work-select--ended { background: #20262d !important; color: var(--subtext); }
html[data-theme="dark"] .activity-web-work-select { background: #20262d; color: var(--blue); border-color: var(--line); }
html[data-theme="dark"] .message-assistant-link,
html[data-theme="dark"] .message-interaction-filters button { color: var(--subtext); border-color: var(--line); }
html[data-theme="dark"] .message-interaction-filters button.active { color: var(--blue); border-bottom-color: var(--blue); }

html[data-theme="dark"] .secondhand-tile,
html[data-theme="dark"] .secondhand-dialog { background: var(--card); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] .secondhand-tile:hover,
html[data-theme="dark"] .secondhand-mine-row:hover { background: #222a32; }
html[data-theme="dark"] .secondhand-page__header,
html[data-theme="dark"] .secondhand-filters,
html[data-theme="dark"] .secondhand-tile,
html[data-theme="dark"] .secondhand-detail__head,
html[data-theme="dark"] .secondhand-detail__section,
html[data-theme="dark"] .secondhand-detail__aside,
html[data-theme="dark"] .secondhand-detail__aside p,
html[data-theme="dark"] .secondhand-tabs,
html[data-theme="dark"] .secondhand-mine-row,
html[data-theme="dark"] .secondhand-form fieldset,
html[data-theme="dark"] .secondhand-form__consent,
html[data-theme="dark"] .secondhand-form__footer { border-color: var(--line); }
html[data-theme="dark"] .secondhand-page__header p,
html[data-theme="dark"] .secondhand-filters label,
html[data-theme="dark"] .secondhand-tile__meta,
html[data-theme="dark"] .secondhand-detail__aside p,
html[data-theme="dark"] .secondhand-detail__aside .secondhand-safety,
html[data-theme="dark"] .secondhand-form fieldset p,
html[data-theme="dark"] .secondhand-mine-row__body small,
html[data-theme="dark"] .secondhand-state { color: var(--subtext); }
html[data-theme="dark"] .secondhand-tile__price,
html[data-theme="dark"] .secondhand-detail__price,
html[data-theme="dark"] .secondhand-mine-row b,
html[data-theme="dark"] .secondhand-tabs :is(button, a).active { color: var(--blue); }
html[data-theme="dark"] .secondhand-tile__cover,
html[data-theme="dark"] .secondhand-mine-row__no-image,
html[data-theme="dark"] .secondhand-image-preview { background: #20262d; }