.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: normal;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  header:has(.publish-top) { gap: 8px; }
  header:has(.publish-top) .brand .brand-name { display: none; }
  header:has(.publish-top) .header-search { flex: 0 0 38px; width: 38px; padding: 9px; font-size: 0; }
  header:has(.publish-top) .account > span:not(.avatar) { max-width: 88px; }
}
.brand .brand-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #111;
  color: #fff;
  font: 800 19px/1 Manrope, sans-serif;
  letter-spacing: -2px;
  padding-right: 2px;
}
.brand .brand-symbol span { color: inherit; }
.brand .brand-name {
  color: #111;
  font: 800 22px/1 Manrope, sans-serif;
  letter-spacing: -1.2px;
}
.brand .brand-period { color: #111; }

/* One monochrome outline style across navigation and actions. */
.icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.nav-icon, .side-item, .icon-btn, .header-search, .back,
.page-top > button, .chat-head button, .bot-button { color: #171717; }
.nav-icon > span, .side-item > span, .icon-btn,
.suggestion button, .chat-head button, .comment-form button,
#message-form button { display: inline-flex; align-items: center; justify-content: center; }
.nav-icon > span, .side-item > span { width: 22px; height: 22px; flex-shrink: 0; }
.nav-icon.active, .nav-icon:hover, .side-item.selected { background: #ededed; color: #111; }
.icon-btn { border: 1px solid #e6e6e6; border-radius: 11px; }
.header-search > span { display: inline-flex; color: #171717; }
.header-search .icon { width: 18px; height: 18px; }
.account small .icon, .profile p .icon { width: 13px; height: 13px; }
.header-streak { display:inline-flex; align-items:center; gap:3px; padding:6px 8px; border:1px solid #f2d9b3; border-radius:999px; background:#fff7e8; color:#9b4e16; white-space:nowrap; cursor:pointer; }
.header-streak strong { font-size:12px; }
.header-streak span { font-size:10px; }
@media (max-width:700px) { .header-streak { padding:5px; gap:1px; } .header-streak span { display:none; } }
.empty > span .icon { width: 42px; height: 42px; color: #222; stroke-width: 1.4; }
.comment-form button .icon, #message-form button .icon, .suggestion button .icon { width: 17px; height: 17px; color: #111; }
.post-meta .icon, .page-top > button .icon, .back .icon { width: 16px; height: 16px; }
.profile-actions .icon, .green .icon { width: 16px; height: 16px; }
.bot-button { color: #fff; background: #111; }
.bot-button .icon { width: 18px; height: 18px; }
.icon-btn i { background: #111; color: #fff; }
.nav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.unread-badge, .icon-btn i.unread-badge, .conversation-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border: 2px solid #fff; border-radius: 999px; background: #e32939;
  color: #fff; font: 700 10px/1 Arial, sans-serif; font-style: normal;
}
.nav-icon-wrap .unread-badge { position: absolute; top: -8px; right: -9px; }
.icon-btn i.unread-badge { position: absolute; top: -5px; right: -5px; }
.contacts button .conversation-badge { margin-left: auto; flex-shrink: 0; }
.notice-action { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; }
.notice-action > .icon { flex-shrink: 0; margin-top: 2px; }
.notice-action span { min-width: 0; }
.notice-action strong, .notice-action small { display: block; }
.notice-action small { margin-top: 5px; color: #68746b; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.unread-notice { background: #edf6ed; border-color: #cfe5d0; }
.notice-action:hover { background: #f3f6f2; }
.suggestion button[data-action="accept"] { border-color: #a8c8ab; background: #ecf7ed; color: #315e38; }
.friend-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #f5f5f5;
  color: #333;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}
.friend-status .icon { width: 15px; height: 15px; }
.suggestion .suggestion-status { color: #4c584f; font-size: 10px; line-height: 1.35; letter-spacing: 0; }
.suggestion-check { width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 9px; color: #222; flex-shrink: 0; }
.suggestion-check .icon { width: 16px; height: 16px; }
.modal-actions [data-friend-control] { flex: 1; display: flex; }
.modal-actions [data-friend-control] > * { width: 100%; justify-content: center; }
.organization-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.organization-heading-row h1 { margin: 10px 0 8px; }
.organization-heading-row .create-org { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.organization-list { display: grid; gap: 10px; }
.directory { padding: 20px; margin: 0 0 18px; }
.directory h2 { font-size: 16px; margin-top: 8px; }
.directory p { color: #718074; font-size: 11px; line-height: 1.55; margin: 8px 0; }
.directory-search { display: flex; gap: 8px; margin: 14px 0; }
.directory-search input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #dfe6df; border-radius: 9px; background: transparent; color: inherit; }
.directory-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid #edf0ed; }
.directory-item strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.directory-item small { display: block; margin-top: 5px; color: #718074; font-size: 10px; overflow-wrap: anywhere; }
.directory-source { color: #567d5f; font-size: 11px; font-weight: 700; }
.unverified-label { display: inline-block; width: fit-content; color: #6d766f; background: #f0f2ef; border-radius: 6px; padding: 4px 6px; font-size: 10px; font-weight: 600; }
.form-notice { color: #6d766f; font-size: 11px; line-height: 1.5; }
html[data-theme="dark"] .unverified-label { background: #334038; color: #d1ded4; }
.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; }
.ad-placeholder { border: 1px dashed #ccd6ce; border-radius: 14px; padding: 18px; margin-top: 35px; color: #879589; }
.ad-placeholder span { font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.ad-placeholder p { margin-top: 7px; font-size: 11px; line-height: 1.5; }
.settings-layout { display: grid; gap: 14px; max-width: 820px; }
.settings-section { padding: 22px; }
.settings-section-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; }
.settings-section-head > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #edf4ed; color: #57765d; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.settings-section-head h2 { font-size: 15px; margin: 0 0 5px; }
.settings-section-head p,.settings-note { font-size: 11px; color: #778479; line-height: 1.5; }
.settings-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 14px 0; text-align: left; border-top: 1px solid #edf0ed; }
.settings-row strong,.settings-check strong { display: block; font-size: 12px; }
.settings-row small,.settings-check small { display: block; margin-top: 4px; font-size: 10px; color: #829086; line-height: 1.5; }
.settings-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-bottom: 10px; }
.settings-fields label { display: grid; gap: 7px; color: #66766a; font-size: 11px; font-weight: 700; }
.settings-fields select { width: 100%; padding: 10px; border: 1px solid #e0e7df; border-radius: 9px; background: #fafbf9; color: #273329; }
.settings-check { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; border-top: 1px solid #edf0ed; cursor: pointer; }
.settings-check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: #547c5b; }
.settings-save { margin: 10px 0; }
.settings-logout { display: inline-flex; align-items: center; gap: 8px; color: #a43a3a; font-size: 12px; font-weight: 700; }
html[data-badges="false"] .unread-badge, html[data-badges="false"] .side-item .conversation-badge { display: none; }
html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html[data-text-size="large"] .news-item strong, html[data-text-size="large"] .competition-item strong, html[data-text-size="large"] .person strong { font-size: 16px; }
html[data-text-size="large"] .news-copy p, html[data-text-size="large"] .post-text, html[data-text-size="large"] .bubble, html[data-text-size="large"] .profile p, html[data-text-size="large"] .competition-item small { font-size: 14px; }
html[data-theme="dark"] { color-scheme: dark; background: #111714; color: #e8eee9; }
html[data-theme="dark"] body { background: #111714; color: #e8eee9; }
html[data-theme="dark"] header, html[data-theme="dark"] .mobile-nav, html[data-theme="dark"] .card, html[data-theme="dark"] .person, html[data-theme="dark"] dialog, html[data-theme="dark"] .news-item, html[data-theme="dark"] .discover-search, html[data-theme="dark"] .feed-filters select { background: #1d2621; color: #e8eee9; border-color: #35443a; }
html[data-theme="dark"] .brand .brand-name, html[data-theme="dark"] .brand .brand-period, html[data-theme="dark"] .nav-icon, html[data-theme="dark"] .side-item, html[data-theme="dark"] .icon-btn, html[data-theme="dark"] .page-top > button, html[data-theme="dark"] .header-search > span, html[data-theme="dark"] .chat-head button { color: #e8eee9; }
html[data-theme="dark"] .header-search, html[data-theme="dark"] .nav-icon.active, html[data-theme="dark"] .nav-icon:hover, html[data-theme="dark"] .side-item.selected, html[data-theme="dark"] .feed-switch, html[data-theme="dark"] .comment-form, html[data-theme="dark"] #message-form, html[data-theme="dark"] .profile-details section, html[data-theme="dark"] .bubble { background: #2b3930; color: #e8eee9; }
html[data-theme="dark"] .feed-switch button[aria-selected="true"], html[data-theme="dark"] .news-personalization, html[data-theme="dark"] .settings-section-head > span { background: #3b5141; color: #eef8ee; }
html[data-theme="dark"] .settings-fields select, html[data-theme="dark"] dialog input, html[data-theme="dark"] dialog select, html[data-theme="dark"] dialog textarea, html[data-theme="dark"] .settings input, html[data-theme="dark"] .settings select { background: #27352b; color: #f0f5f0; border-color: #526456; }
html[data-theme="dark"] .settings-row, html[data-theme="dark"] .settings-check, html[data-theme="dark"] .news-source, html[data-theme="dark"] .competition-item, html[data-theme="dark"] .opportunity-row { border-color: #3b4a3e; }
html[data-theme="dark"] .settings-note, html[data-theme="dark"] .settings-section-head p, html[data-theme="dark"] .settings-row small, html[data-theme="dark"] .settings-check small, html[data-theme="dark"] .news-copy p, html[data-theme="dark"] .news-meta, html[data-theme="dark"] .news-source { color: #bccbbf; }
html[data-theme="dark"] .news-image { background: #354b39; }
html[data-theme="dark"] .unread-badge, html[data-theme="dark"] .conversation-badge { border-color: #1d2621; }
html[data-theme="dark"] .suggestion button .icon, html[data-theme="dark"] .comment-form button .icon, html[data-theme="dark"] #message-form button .icon { color: #eef5ef; }
html[data-theme="dark"] .header-search kbd { background: #425247; color: #f0f5f0; border-color: #586a5d; }
html[data-theme="dark"] .settings-fields label { color: #b9c9bd; }
.feed-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 18px; }
.feed-filters label { display: grid; gap: 6px; flex: 1 1 130px; color: #718074; font-size: 10px; font-weight: 700; }
.feed-filters select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #dfe6df; border-radius: 9px; background: #fff; color: #273329; font: inherit; font-size: 11px; }
.feed-filters button { padding: 10px; color: #68776a; font-size: 11px; }
.feed-switch { display: flex; gap: 6px; padding: 5px; margin: 0 0 18px; background: #e9eeea; border-radius: 12px; width: fit-content; }
.feed-switch button { padding: 10px 22px; border-radius: 9px; color: #667368; font-size: 12px; font-weight: 700; }
.feed-switch button[aria-selected=true] { background: #fff; color: #1c2820; box-shadow: 0 2px 8px #0000000d; }
.news-list { margin: 0 0 22px; }
.news-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin: 4px 0 10px; }
.news-heading h2 { font-size: 17px; margin-top: 6px; }
.news-heading small,.news-empty { font-size: 10px; color: #78877b; }
.news-personalization { margin: 0 0 18px; padding: 12px 14px; background: #eff5ee; border-radius: 10px; color: #516754; font-size: 11px; line-height: 1.5; }
.news-personalization button { font-size: inherit; font-weight: 700; text-decoration: underline; }
.news-industry-options { margin: 0; padding: 14px; border: 1px solid #e0e7df; border-radius: 10px; }
.news-industry-options legend { color: #69766b; font-size: 11px; font-weight: 700; padding: 0 5px; }
.news-industry-options p { color: #78877b; font-size: 11px; line-height: 1.5; margin: 0 0 10px; }
.news-industry-options > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 10px; }
.news-industry-options label { display: flex; flex-direction: row; align-items: center; gap: 7px; font-weight: 500; }
.news-industry-options input[type=checkbox] { width: auto; margin: 0; }
.news-heading p { margin-top: 6px; color: #78877b; font-size: 11px; }
.news-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.news-item { display: flex; flex-direction: column; overflow: hidden; color: #1d2920; transition: transform .18s, box-shadow .18s; }
.news-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px #1b302010; }
.news-image { display: grid; place-items: center; aspect-ratio: 16 / 8; background: #e4eee2; color: #84a68a; font-size: 30px; overflow: hidden; }
.news-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-copy { display: flex; flex: 1; flex-direction: column; gap: 9px; padding: 16px; min-width: 0; }
.news-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; color: #718274; font-size: 10px; }
.news-meta > span { color: #52745a; font-weight: 700; }
.news-item strong { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.news-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.6; color: #78877b; }
.news-source { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid #eef1ed; color: #647369; font-size: 10px; font-weight: 700; }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } .news-image { aspect-ratio: 16 / 7; } }
.profile-details { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; margin-top: 22px; }
.profile-details section { padding: 16px; background: #f6f8f5; border-radius: 12px; min-width: 0; }
.profile-details h3 { font-size: 12px; }
.profile-details p { white-space: pre-wrap; overflow-wrap: anywhere; }
.opportunity-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid #edf0ed; }
.opportunity-row .competition-item { flex: 1; min-width: 0; border-top: 0; }
.opportunity-save { flex-shrink: 0; padding: 8px 10px; border: 1px solid #dce5dd; border-radius: 8px; font-size: 10px; font-weight: 700; }
.opportunity-save[aria-pressed=true] { background: #e4f1e6; }
.saved-opportunities-link { display: inline-block; padding: 9px 12px; margin: 0 0 14px; border: 1px solid #dce5dd; border-radius: 9px; background: white; font-size: 11px; font-weight: 700; }
#opportunity-search { margin-bottom: 12px; }
.competitions { padding: 20px; margin: 0 0 18px; }
.competitions-heading h2 { font-size: 17px; margin-top: 7px; }
.competition-update, .competition-empty { margin-top: 9px; color: #78877b; font-size: 11px; line-height: 1.5; }
.competition-list { margin-top: 12px; display: grid; }
.competition-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #edf0ed; }
.competition-item strong { display: block; font-size: 12px; }
.competition-item small { display: block; margin-top: 5px; color: #7f8d82; font-size: 10px; }
@media (min-width: 1151px) {
  .layout {
    max-width: 1740px;
    grid-template-columns: clamp(195px, 15vw, 245px) minmax(0, 1fr) clamp(255px, 18vw, 310px);
  }
}
.message-settings-link { display: block; border: 1px solid #dce4dc; border-radius: 9px; padding: 12px; margin: 10px 0 18px; text-align: left; width: 100%; }
.message-settings label { display: block; margin: 14px 0; }
.message-settings label input:not([type=checkbox]) { display: block; width: 100%; margin-top: 7px; }
.message-settings p { color: #657068; line-height: 1.6; font-size: 12px; }
.message-composer { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px; }
.message-tools, .message-input-row { display: flex; align-items: center; gap: 12px; }
.message-tools label, .message-tools button { cursor: pointer; font-size: 18px; }
.message-tools input[type=file] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.message-tools span { font-size: 11px; color: #69776b; overflow-wrap: anywhere; }
.attachment-info { position: relative; margin-left: auto; }
.attachment-info summary { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #b8c1b9; border-radius: 50%; color: #87918a; font: 600 10px/1 sans-serif; cursor: pointer; list-style: none; }
.attachment-info summary::-webkit-details-marker { display: none; }
.attachment-info summary:focus-visible { outline: 2px solid #505b52; outline-offset: 2px; }
.attachment-info > span { position: absolute; right: 0; bottom: 25px; z-index: 2; width: max-content; max-width: 220px; padding: 9px 11px; border-radius: 8px; background: #292e2a; color: white; box-shadow: 0 5px 18px #0002; line-height: 1.4; }
.message-input-row input { min-width: 0; flex: 1; }
.bubble img.message-image { display: block; max-width: min(260px, 100%); max-height: 280px; border-radius: 9px; margin-top: 7px; }
.bubble audio { display: block; max-width: 240px; margin-top: 7px; }
.message-attachment { display: block; margin-top: 7px; color: inherit; overflow-wrap: anywhere; }
.discover-search { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; background: white; border: 1px solid #dde4dd; border-radius: 14px; }
.discover-search > span { display: flex; color: #6b786d; }
.discover-search .icon { width: 20px; height: 20px; }
.discover-search input { flex: 1; width: 0; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; }
.discover-search button { white-space: nowrap; }
.search-tabs { overflow-x: auto; margin: 20px 0; }
.search-tabs button { white-space: nowrap; }
.search-tabs button span, .search-group h2 small { margin-left: 5px; color: #7e8a80; font-size: 11px; }
.search-group { margin: 22px 0; }
.search-group h2 { font-size: 16px; margin: 0 0 10px; }
.search-group-list { display: grid; gap: 10px; }
.search-org-result { position: relative; }
.search-type { display: inline-block; margin: 0 0 5px 4px; color: #6b786d; font-size: 11px; font-weight: 700; }
.organization-card { margin: 0; }
.organization-identity { display: flex; align-items: center; gap: 12px; flex: 1; text-align: left; min-width: 0; padding: 0; }
.organization-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.organization-copy small { margin: 0; }
.organization-description { font-size: 11px; color: #788279; line-height: 1.5; overflow-wrap: anywhere; }
.organization-owner { display: inline-flex; width: fit-content; border-radius: 6px; padding: 4px 7px; background: #eff5ee; color: #426c4b; font-size: 10px; font-weight: 600; }
.organization-actions { flex-shrink: 0; }
.organization-actions button { border: 1px solid #e1e7e1; border-radius: 8px; padding: 9px 12px; font-size: 10px; font-weight: 700; }
.organization-actions button .icon { width: 15px; height: 15px; }
.organization-detail-avatar { display: grid; width: 64px; height: 64px; border-radius: 19px; font-size: 30px; margin-bottom: 22px; }
.organization-detail-category { color: #869087; font-size: 12px; margin-top: 7px; }
.organization-detail-description { color: #4f5b51; font-size: 13px; line-height: 1.7; margin: 20px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.organization-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-error { color: #b33232; font-size: 12px; line-height: 1.5; }
.form-error:empty { display: none; }
/* Auth modal improvements */
.auth-header-card { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.social-header-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 4px 12px; background: #eef5ee; border-radius: 20px; font-size: 11px; font-weight: 700; color: #35603d; letter-spacing: 0.5px; }
.social-header-badge .cute-sticker { width: 18px; height: 18px; }
.auth-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 8px; padding: 4px; border: 1px solid #e2e8e1; border-radius: 12px; background: #f4f6f3; }
.auth-types button { min-width: 0; padding: 9px 5px; border-radius: 8px; color: #637064; font-size: 12px; font-weight: 600; transition: all 0.15s ease; border: 0; background: transparent; cursor: pointer; }
.auth-types button.active { background: #fff; color: #162018; box-shadow: 0 1px 4px rgba(0,0,0,0.08); font-weight: 700; }
.social-intro { margin: 18px 0 16px; text-align: center; }
.social-intro h2 { margin: 0 0 6px; font-size: 23px; font-weight: 750; letter-spacing: -.03em; color: #18241b; }
.social-intro p { margin: 0 auto; color: #667468; font-size: 13px; line-height: 1.5; max-width: 320px; }
.social-providers { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 18px 0; width: 100%; }
.social-providers > div { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; }
.social-providers small { color: #889489; font-size: 11px; margin-top: 4px; }
.social-providers small:empty { display: none; }

/* Google & Facebook unified sign-in buttons */
.facebook-signin-button,
.google-placeholder-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  max-width: 320px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  color: #3c4043 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease !important;
  box-sizing: border-box !important;
  user-select: none !important;
}
.facebook-signin-button:hover:not(:disabled),
.google-placeholder-button:hover:not(:disabled) {
  background-color: #f8fafd !important;
  border-color: #c6c9cc !important;
  box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
}
.facebook-signin-button:active:not(:disabled),
.google-placeholder-button:active:not(:disabled) {
  background-color: #f1f3f4 !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12) !important;
  transform: scale(0.99) !important;
}
.facebook-signin-button:disabled,
.google-placeholder-button:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  background: #f8f9fa !important;
  border-color: #e5e5e5 !important;
}
.social-btn-icon-wrapper {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
}
.social-btn-icon {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}
.social-btn-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #3c4043 !important;
  text-align: center !important;
  flex: 1 !important;
}
.social-divider { display: flex; align-items: center; gap: 12px; color: #8e9a8f; font-size: 12px; margin: 18px 0 14px; }
.social-divider::before,.social-divider::after { content: ''; height: 1px; flex: 1; background: #e2e8e1; }
.legacy-signin { background: #fafbf9; border: 1px solid #e7ede6; border-radius: 10px; padding: 10px 14px; }
.legacy-signin summary { cursor: pointer; color: #355d3d; font-size: 12px; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.legacy-signin summary::-webkit-details-marker { display: none; }
.legacy-signin summary::after { content: '▾'; font-size: 12px; color: #809082; }
.legacy-signin[open] summary { margin-bottom: 12px; border-bottom: 1px dashed #dce5db; padding-bottom: 8px; }
.legacy-signin[open] summary::after { content: '▴'; }
.post-composer { display: flex; align-items: center; gap: 12px; padding: 16px; margin-top: 20px; }
.publish-top { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 44px; padding: 0 17px; border-radius: 12px; background: #171d18; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.publish-top:hover { background: #303a31; }
.publish-top .icon { width: 23px; height: 23px; }
.composer-prompt { flex: 1; min-width: 0; padding: 13px 16px; border-radius: 10px; background: #f5f7f4; color: #7b857d; text-align: left; font-size: 12px; }
.composer-prompt:hover { background: #edf0eb; }
.composer-action { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.post-author-preview { display: flex; align-items: center; gap: 12px; margin: 20px 0 6px; }
.post-author-preview strong, .post-author-preview small { display: block; }
.post-author-preview strong { font-size: 13px; }
.post-author-preview small { color: #8a958b; font-size: 11px; margin-top: 4px; }
#modal > .back { display: flex; align-items: center; gap: 6px; width: fit-content; }
#modal > .eyebrow { display: block; margin-top: 4px; }
#create-post-form textarea { min-height: 150px; }
#create-post-form input[type="file"] { padding: 10px; }
#create-post-form label small { color: #87928a; font-weight: 400; }
.post-attachments { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.draft-attachment-slot { min-width: 0; }
.draft-file-remove { display: block; margin: 6px 0 0; padding: 3px 5px; border: 0; background: transparent; color: #6b756c; font-size: 11px; cursor: pointer; }
.draft-file-remove[hidden] { display: none; }
#create-post-form .attach-tile { position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; padding: 13px 12px; border: 1px solid #e1e6df; border-radius: 12px; cursor: pointer; background: #fbfcfa; }
.attach-tile:hover { border-color: #a8b8aa; background: #f4f8f3; }
.attach-tile:focus-within { outline: 3px solid #89caa5; outline-offset: 2px; }
.attach-tile > .icon { width: 22px; height: 22px; color: #202b22; }
.attach-tile > span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.attach-tile strong { color: #28342a; font-size: 11px; }
.attach-tile small { overflow-wrap: anywhere; line-height: 1.4; font-size: 10px; }
#create-post-form .attach-tile input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; cursor: pointer; }
.post .post-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-upload { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: 12px; background: #f4f5f3; }
.post-file { display: flex; align-items: center; gap: 11px; padding: 13px 14px; margin: 14px 0; border: 1px solid #e4eae2; border-radius: 11px; background: #f8faf7; color: #1b241d; }
.post-file > span { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.post-file strong { overflow-wrap: anywhere; font-size: 12px; }
.post-file small { color: #7c897e; font-size: 10px; }
.post-file:hover { background: #f0f5ef; }
.comment-list { display: grid; gap: 10px; margin-top: 14px; }
.comment-item { display: flex; align-items: flex-start; gap: 5px; }
.comment-content { min-width: 0; flex: 1; padding: 10px 12px; border-radius: 11px; background: #f5f7f4; }
.comment-content strong { display: block; color: #26332a; font-size: 11px; }
.comment-list .comment-content p { margin: 5px 0 0; padding: 0; background: none; color: #4d5a50; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-options { position: relative; flex-shrink: 0; }
.comment-options summary { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; list-style: none; color: #536055; }
.comment-options summary::-webkit-details-marker { display: none; }
.comment-options summary:hover, .comment-options[open] summary { background: #f0f2ef; }
.comment-options summary:focus-visible { outline: 3px solid #89caa5; outline-offset: 2px; }
.comment-options summary .icon { width: 19px; height: 19px; }
.comment-menu { position: absolute; z-index: 3; top: 32px; right: 0; width: 155px; padding: 5px; border: 1px solid #e2e8e0; border-radius: 10px; background: #fff; box-shadow: 0 8px 25px #1a2a1b1c; }
.comment-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px; border-radius: 7px; text-align: left; font-size: 11px; }
.comment-menu button:hover { background: #f2f5f1; }
.comment-menu button .icon { width: 16px; height: 16px; }
.comment-menu .comment-delete { color: #b53b3b; }
.comments-more { justify-self: start; padding: 3px 0; color: #536f58; font-size: 11px; font-weight: 700; }
.comments-more:hover { text-decoration: underline; }
.post .comment-own-hint { display: flex; align-items: center; gap: 5px; margin: 13px 0 0; color: #708274; font-size: 11px; }
.comment-own-hint .icon { width: 15px; height: 15px; }
#edit-comment-form textarea { min-height: 120px; }
.organization-actions { display: flex; align-items: center; gap: 6px; }
.organization-detail-actions { flex-wrap: wrap; }
@media (max-width: 700px) {
  .brand { gap: 7px; }
  .brand .brand-symbol { width: 36px; height: 36px; border-radius: 11px; font-size: 17px; }
  .brand .brand-name { font-size: 18px; }
  .account { gap: 5px; min-width: 0; }
  .header-actions .account > span:not(.avatar) {
    display: block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
  }
  .account small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
  .header-search { min-width: 48px; overflow: hidden; white-space: nowrap; }
  .header-actions .icon-btn[data-action="notifs"] { display: inline-flex; width: 34px; height: 34px; }
  .header-actions .icon-btn[data-action="notifs"] .icon { width: 19px; height: 19px; }
  .mobile-nav .nav-icon.active { background: #eee; }
  .contacts button .conversation-badge { margin-left: 0; }
  .organization-heading-row { align-items: flex-start; }
  .organization-heading-row .create-org { padding: 10px 11px; font-size: 10px; }
  .organization-card { flex-wrap: nowrap; }
  .organization-actions button { padding: 8px; white-space: nowrap; }
  .post-composer { gap: 8px; padding: 12px; }
  .publish-top { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 11px; }
  .publish-top > span { display: none; }
  .post-attachments { grid-template-columns: 1fr; }
  .post-composer .page-avatar { width: 36px; height: 36px; border-radius: 11px; font-size: 16px; }
  .composer-prompt { padding: 11px; font-size: 11px; }
  .composer-action { padding: 10px 9px; font-size: 10px; }
  .organization-actions { flex-direction: column; align-items: stretch; }
  .hero { height: auto; min-height: 270px; }
}

/* Personal profile cover */
.profile-cover{position:relative;overflow:hidden;height:200px;padding:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(125deg,#dceadc,#adcbb8)}
.profile-cover>img,.cover-preview img{width:100%;height:100%;object-fit:cover;display:block}
.profile-cover .cover-default{float:none;font-size:12px;letter-spacing:.18em;color:#627f69}
.cover-edit{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:7px;padding:10px 13px;border-radius:9px;background:#fff;color:#202820;box-shadow:0 2px 12px #0002;font-weight:700;font-size:11px}
.cover-edit svg{width:15px;height:15px}
.cover-preview{height:140px;overflow:hidden;border-radius:12px;background:linear-gradient(125deg,#dceadc,#adcbb8)}
dialog .cover-remove{display:flex;flex-direction:row;align-items:center;gap:8px}
dialog .cover-remove input{width:auto}
@media(max-width:600px){.profile-cover{height:150px}.cover-edit{right:10px;bottom:10px}}
.person-cover{height:120px;overflow:hidden;border-radius:12px;margin-bottom:14px;background:#dceadc}.person-cover img{width:100%;height:100%;object-fit:cover}
/* Keep the avatar above the cover image at their shared edge. */
.profile-cover{z-index:0}
.profile{position:relative;z-index:1}
.profile>.avatar{position:relative;z-index:2}
.person-cover + .avatar{position:relative;z-index:1;margin-top:-58px;margin-left:14px}
.crop-editor{display:grid;gap:10px}.crop-editor[hidden]{display:none}.crop-window{overflow:hidden;touch-action:none;cursor:grab;background:#dceadc;max-width:100%;outline-offset:3px}.crop-window:active{cursor:grabbing}.crop-square{width:min(250px,100%);aspect-ratio:1;border-radius:50%;margin:auto}.crop-wide{width:100%;aspect-ratio:1200/320;border-radius:12px}.crop-window canvas{display:block;width:100%;height:100%}dialog .crop-zoom{display:flex;flex-direction:row;align-items:center;gap:12px}dialog .crop-zoom input{flex:1;padding:0}.crop-editor small{color:#718076;line-height:1.4}
/* Full-screen image crop editor */
dialog.crop-fullscreen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#111;color:#fff;overflow:hidden;display:flex;flex-direction:column}
dialog.crop-fullscreen:not([open]){display:none}dialog.crop-fullscreen::backdrop{background:#000e}.crop-toolbar{display:flex;align-items:center;gap:12px;padding:18px 24px;background:#1b1b1b}.crop-toolbar>div{flex:1}.crop-toolbar strong,.crop-toolbar small{display:block}.crop-toolbar small{font-size:12px;color:#aaa;margin-top:5px}.crop-toolbar button{padding:10px 18px;border-radius:8px;color:#fff;background:#333}.crop-toolbar .crop-apply{background:#dbece0;color:#17251c;font-weight:700}.crop-workspace{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:28px}.crop-image{position:relative;line-height:0;max-width:100%;max-height:100%;display:flex}.crop-image img{display:block;max-width:100%;max-height:calc(100dvh - 200px);width:auto;height:auto;object-fit:contain}.crop-selection{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px #000a;cursor:move;touch-action:none;line-height:normal}.crop-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent calc(33.333% - .5px),#fff9 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#fff9 66.666%,transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),#fff9 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#fff9 66.666%,transparent calc(66.666% + .5px))}.crop-handle{position:absolute;width:24px;height:24px;padding:0;touch-action:none}.crop-handle:after{content:'';position:absolute;inset:6px;border:solid #fff;border-width:3px 0 0 3px}.crop-handle.nw{left:-12px;top:-12px;cursor:nwse-resize}.crop-handle.ne{right:-12px;top:-12px;cursor:nesw-resize}.crop-handle.sw{left:-12px;bottom:-12px;cursor:nesw-resize}.crop-handle.se{right:-12px;bottom:-12px;cursor:nwse-resize}.crop-handle.ne:after{transform:rotate(90deg)}.crop-handle.sw:after{transform:rotate(-90deg)}.crop-handle.se:after{transform:rotate(180deg)}.crop-help{text-align:center;color:#aaa;padding:12px;font-size:12px}.crop-selection:focus-visible,.crop-handle:focus-visible{outline:2px solid #b4e7c4;outline-offset:3px}@media(max-width:600px){.crop-toolbar{padding:12px;gap:6px}.crop-toolbar small{font-size:10px}.crop-toolbar button{padding:9px}.crop-workspace{padding:18px}.crop-image img{max-height:calc(100dvh - 180px)}}
.opportunity-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:20px;margin-bottom:14px}.opportunity-filters label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:#56645b}.opportunity-filters input,.opportunity-filters select{width:100%;min-width:0;border:1px solid #dfe7df;border-radius:9px;background:var(--surface,#fafbf9);color:inherit;padding:11px}.opportunity-filters button{align-self:end}.opportunity-source-note{font-size:12px;color:#718076;line-height:1.6;margin:12px 2px}.opportunity-results{display:grid;gap:12px}.opportunity-result{padding:20px}.opportunity-result-meta{font-size:11px;font-weight:700;color:#64856c}.opportunity-result h2{font-size:17px;margin:10px 0}.opportunity-result p{font-size:12px;color:#718076;line-height:1.5;margin:10px 0}.opportunity-facts{display:flex;gap:7px;flex-wrap:wrap}.opportunity-facts span{font-size:11px;background:#edf4ed;color:#526b57;padding:6px 9px;border-radius:8px}@media(max-width:700px){.opportunity-filters{grid-template-columns:1fr 1fr}}@media(max-width:420px){.opportunity-filters{grid-template-columns:1fr}}
.opportunity-progress{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#617066;margin:10px 0}.opportunity-progress select{border:1px solid #dce5dc;border-radius:8px;padding:8px;background:transparent;color:inherit}.opportunity-status-note{font-size:11px;color:#78867b;line-height:1.5}
.login-gate-background{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;gap:10px;padding:7vh 16px;color:#111;font-size:24px}.login-gate-background .brand-symbol{width:48px;height:48px}.login-gate-background strong{padding-top:8px}body:has(.login-gate-background) dialog::backdrop{background:rgba(20,30,24,.42)}
.people-hero{background:#e3eee4;border:1px solid #d8e7da;border-radius:18px;padding:28px;margin-bottom:18px}.people-hero h1{font-size:30px;letter-spacing:-1px;margin:12px 0}.people-hero p{color:#63776a;line-height:1.6;margin-bottom:20px}.team-list{display:grid;gap:12px}.team-card{padding:22px}.team-card h2{font-size:18px;margin:12px 0}.team-card p{line-height:1.6;margin:10px 0;white-space:pre-wrap}.team-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.team-role{font-size:11px;font-weight:700;color:#527b5e;background:#edf5ee;border-radius:20px;padding:7px 10px}.team-filter{margin:12px 0 18px}.team-filter select{margin-left:8px;padding:9px;border:1px solid #dce5dc;border-radius:8px;background:white}.team-card a{text-decoration:underline}.team-card button:disabled{opacity:.65;cursor:default}@media(max-width:600px){.people-hero{padding:20px}.people-hero h1{font-size:24px}}
.people-jobs-link{padding:11px 14px;border:1px solid #9fbca7;border-radius:9px;font-weight:700;color:#274531;margin-left:5px}
.find-people-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid #d9e8dc;background:#e9f2ea;border-radius:14px;padding:17px 20px;margin-bottom:16px}.find-people-banner strong{font-size:15px}.find-people-banner p{color:#64786a;font-size:12px;margin-top:5px}.find-people-banner button{flex-shrink:0}@media(max-width:520px){.find-people-banner{align-items:flex-start;flex-direction:column}}
.people-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}.people-filters label{display:flex;flex-direction:column;gap:6px;color:#53645a;font-size:12px;font-weight:600}.people-filters input,.people-filters select{width:100%;min-width:0;padding:10px;border:1px solid #dbe4dc;border-radius:9px;background:#fafbf9;color:#26342b}.people-filters button{align-self:end;padding:11px;border-radius:9px}.people-disclosure{color:#718076;font-size:12px;line-height:1.55;margin:12px 3px 18px}.people-result-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 2px}.people-result-heading button,.people-secondary{color:#436f4f;font-size:12px;font-weight:700}.people-result{border:1px solid #e8ebe7;background:white;border-radius:14px;padding-bottom:10px;margin-bottom:10px}.people-result .person{border:0;margin:0;padding-bottom:8px}.people-result>p,.people-result>small{display:block;margin:4px 18px;color:#718076;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.people-secondary{margin:18px 0}@media(max-width:700px){.people-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.people-filters{grid-template-columns:1fr}}
.post-like{border:1px solid #e1e6e1;border-radius:8px;padding:7px 10px;color:#6b756c}.post-like.liked{color:#ce3151;border-color:#f0b6c1;background:#fff2f5}
.team-member{display:inline-flex;align-items:center;gap:6px;margin:4px 8px 4px 0}.team-member .avatar{width:24px;height:24px}
.qa-header{display:flex;justify-content:space-between;align-items:center;margin:20px 0}
.qa-question-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.qa-question-top .team-role{font-size:11px;font-weight:700;color:#27683f;background:#e8f5ec;border-radius:999px;padding:4px 11px;border:1px solid #cbe7d3}
.qa-country{color:#6c7d71;font-size:11px}
.qa-badge-solved{font-size:11px;font-weight:700;color:#166534;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:999px;padding:3px 9px}
.qa-question h2{font-size:18px;line-height:1.35;margin:8px 0 10px;color:#19271e}
.qa-question-text{font-size:13.5px;line-height:1.65;color:#415246;margin:0 0 14px;white-space:pre-wrap}

/* QA Meta & Author Action Bar */
.qa-meta-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px;padding:12px 0 14px;border-top:1px solid #e7ede8}
.qa-author-box{display:flex;flex-direction:column;gap:3px;min-width:0}
.qa-author-identity{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:#17241c}
.qa-author-link{font-weight:700;color:#17241c;cursor:pointer}
.qa-author-link:hover{color:#26ac65;text-decoration:underline}
.qa-author-sub{font-size:11px;color:#728276;line-height:1.4}
.qa-question-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qa-action-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.qa-action-btn .qa-btn-icon{font-size:12px;line-height:1}
.qa-btn-edit{background:#ffffff;border:1px solid #d3ded5;color:#2b3d30}
.qa-btn-edit:hover{background:#f0f7f2;border-color:#26ac65;color:#1a7a43;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.07)}
.qa-btn-delete{background:#fff8f8;border:1px solid #fecaca;color:#dc2626}
.qa-btn-delete:hover{background:#fee2e2;border-color:#ef4444;color:#b91c1c;transform:translateY(-1px);box-shadow:0 3px 8px rgba(220,38,38,.12)}
.qa-btn-solve{background:#f0fdf4;border:1px solid #86efac;color:#15803d;font-weight:700}
.qa-btn-solve:hover{background:#dcfce7;border-color:#22c55e;color:#14532d;transform:translateY(-1px);box-shadow:0 3px 8px rgba(34,197,94,.2)}
.qa-btn-reopen{background:#fffbeb;border:1px solid #fde68a;color:#b45309;font-weight:700}
.qa-btn-reopen:hover{background:#fef3c7;border-color:#f59e0b;transform:translateY(-1px)}

/* QA Answer Form (Input on left, Send button anchored on right) */
.qa-answer-form{display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;margin-top:14px!important;background:#f4f6f4!important;border:1.5px solid #dfe6e0!important;border-radius:14px!important;padding:4px 6px 4px 16px!important;box-sizing:border-box!important;width:100%!important;transition:all .2s cubic-bezier(.16,1,.3,1)!important}
.qa-answer-form:focus-within{background:#ffffff!important;border-color:#26ac65!important;box-shadow:0 0 0 3.5px rgba(38,172,101,.14)!important}
.qa-answer-form input{flex:1 1 auto!important;min-width:0!important;border:none!important;background:transparent!important;padding:8px 0!important;font-size:13px!important;color:#17241c!important;outline:none!important}
.qa-answer-form input::placeholder{color:#8c9b90!important;font-size:13px!important}
.qa-answer-form button.qa-submit-btn,.qa-answer-form button[type="submit"]{flex-shrink:0!important;margin-left:auto!important;width:36px!important;height:36px!important;min-width:36px!important;border-radius:10px!important;background:#26ac65!important;color:#ffffff!important;border:none!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;transition:all .2s cubic-bezier(.16,1,.3,1)!important;box-shadow:0 2px 6px rgba(38,172,101,.28)!important}
.qa-answer-form button.qa-submit-btn:hover,.qa-answer-form button[type="submit"]:hover{background:#1e9455!important;transform:scale(1.06)!important;box-shadow:0 4px 12px rgba(38,172,101,.4)!important}
.qa-answer-form button.qa-submit-btn:active,.qa-answer-form button[type="submit"]:active{transform:scale(.96)!important}
.qa-send-icon{width:17px!important;height:17px!important;stroke:#ffffff!important;fill:none!important;stroke-width:2.2!important;margin-left:2px!important}

/* Dark mode and theme variations for QA */
html[data-theme='dark'] .qa-meta-bar{border-color:#384a3e!important}
html[data-theme='dark'] .qa-author-identity{color:#e8eee9!important}
html[data-theme='dark'] .qa-author-sub{color:#9bb0a1!important}
html[data-theme='dark'] .qa-btn-edit{background:#26362c!important;border-color:#3d4f42!important;color:#d4ded6!important}
html[data-theme='dark'] .qa-btn-edit:hover{background:#2f4336!important;border-color:#26ac65!important;color:#86efac!important}
html[data-theme='dark'] .qa-btn-delete{background:#3b1e1e!important;border-color:#602828!important;color:#fca5a5!important}
html[data-theme='dark'] .qa-btn-delete:hover{background:#502626!important;border-color:#ef4444!important;color:#fee2e2!important}
html[data-theme='dark'] .qa-btn-solve{background:#193825!important;border-color:#2d6240!important;color:#86efac!important}
html[data-theme='dark'] .qa-btn-solve:hover{background:#224b32!important;border-color:#22c55e!important;color:#bbf7d0!important}
html[data-theme='dark'] .qa-btn-reopen{background:#3b2e17!important;border-color:#634b20!important;color:#fde68a!important}
html[data-theme='dark'] .qa-answer-form{background:#243329!important;border-color:#384c3e!important}
html[data-theme='dark'] .qa-answer-form:focus-within{background:#1b271f!important;border-color:#26ac65!important}
html[data-theme='dark'] .qa-answer-form input{color:#f0f5f0!important}
html[data-theme='dark'] .qa-answer-form input::placeholder{color:#7f9585!important}
.online-dot{display:inline-block;width:9px;height:9px;background:#24b96a;border:1px solid white;border-radius:50%;margin-left:3px}#typing-status{color:#6b8972;font-size:11px;margin-left:6px}
.message-delete{font-size:14px;color:#7e8981;margin-left:8px;padding:2px 5px}
.message-search-hit{outline:3px solid #77bb8a;outline-offset:3px}.chat-body{overflow-y:auto;max-height:60vh}
.schedule-reminders{display:grid;gap:10px;max-width:520px;padding:15px;margin:14px 0;border:1px solid #e3ece4;border-radius:12px;background:#f8fbf8}.schedule-reminders>strong{font-size:12px}.schedule-reminder-row{display:flex;align-items:end;gap:9px}.schedule-reminder-row label{display:grid;gap:5px;font-size:11px;color:#65756a}.schedule-reminder-row input,.schedule-reminder-row select{min-width:0;border:1px solid #d8e2da;border-radius:8px;padding:8px;background:#fff;color:#243128}.schedule-reminder-row input{width:110px}.schedule-reminder-row>span{padding-bottom:9px;color:#7b8c80;font-size:11px}.schedule-reminders>button,.schedule-enable-notifications{justify-self:start;border:1px solid #cadacf;border-radius:8px;padding:9px 12px;font-size:11px;font-weight:700}.schedule-enable-notifications{margin-top:12px}.schedule-notification-state{margin-top:10px}.schedule-unit-label{font-size:11px}@media(max-width:450px){.schedule-reminder-row{flex-wrap:wrap}.schedule-reminder-row input{width:85px}}
.chat-find-bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;background:#f2f7f2;border-bottom:1px solid #e4ece5;font-size:.85rem}.chat-find-bar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chat-find-bar strong{white-space:nowrap}.chat-find-bar button{border:0;background:transparent;border-radius:.4rem;padding:.35rem .55rem;cursor:pointer}.chat-find-bar button:hover{background:#dfece1}.chat-find-bar button:disabled{opacity:.35;cursor:default}
.search-post-result{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:.4rem;text-align:left;padding:1rem;cursor:pointer}.search-post-result span{white-space:pre-wrap;overflow-wrap:anywhere}.search-post-result small{color:#758178}.search-post-result:hover{border-color:#92b899}.search-tabs{overflow-x:auto;white-space:nowrap}
.chat{min-width:0}.chat-head{position:relative;min-width:0}.chat-identity{flex:1;min-width:0}.chat-head .chat-identity strong,.chat-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-identity small{color:#819087;font-size:11px;margin-top:4px}.chat-identity #typing-status:empty{display:none}.chat-presence{white-space:nowrap;color:#8a958e;font-size:11px}.chat-presence.is-online{color:#47865d}.chat-team-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#e1eee3;font-weight:700}.chat-options{position:relative;flex:none}.chat-options summary{display:grid;place-items:center;list-style:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:22px}.chat-options summary::-webkit-details-marker{display:none}.chat-options summary:hover{background:#eef3ee}.chat-options-menu{position:absolute;right:0;top:40px;z-index:4;min-width:185px;padding:6px;background:white;border:1px solid #e1e8e1;border-radius:12px;box-shadow:0 8px 28px #172a1822}.chat-options-menu button{display:block;width:100%;padding:10px;text-align:left;font-size:12px;border-radius:7px}.chat-options-menu button:hover{background:#eef5ef}.chat-body{min-height:220px;overscroll-behavior:contain}@media(max-width:600px){.chat-head{gap:7px;padding:10px}.chat-head .avatar,.chat-head .page-avatar,.chat-team-avatar{width:36px;height:36px}.chat-presence{font-size:9px}.chat-options-menu{min-width:165px}}
.request-tabs{display:flex;gap:6px;margin-bottom:12px}.request-tabs button{flex:1;font-size:.8rem;padding:8px;border-radius:9px}.request-tabs button[aria-pressed=true]{background:#e3eee3;font-weight:700}.request-banner{background:#f5f5f1;padding:12px 16px;font-size:.85rem}.request-banner p{margin:0 0 8px}.request-banner button{padding:6px 10px;margin-right:6px;border:1px solid #d5ded4;border-radius:8px}.request-warning{margin-top:10px!important;background:#fff1c9;color:#634d0c;border-radius:8px;padding:10px}.link-shield{max-width:420px;border:1px solid #d7ded7;border-radius:16px;padding:24px;box-shadow:0 16px 50px #0003}.link-shield::backdrop{background:#0008}.link-shield button{padding:10px 14px;margin:8px 8px 0 0;border:1px solid #cdd6cd;border-radius:8px}
.report-link,.message-report{border:0;background:transparent;color:#66756b;cursor:pointer}.message-report{font-size:12px;margin-left:6px}.report-card{padding:16px;margin:12px 0}.report-actions{display:flex;flex-wrap:wrap;gap:8px}.report-actions button{padding:8px}

.qa-answers { margin-top: 16px; border-top: 1px solid #e7ebe7; padding-top: 12px; }
.qa-answer-count { display: block; margin-bottom: 10px; font-size: 12px; }
.qa-answers .comment-list { margin: 0 0 8px; }
.qa-vote { display: inline-block; padding: 3px 0; color: #5b7161; font-size: 11px; font-weight: 700; }
.qa-vote[aria-pressed='true'] { color: #168453; }
.qa-answers .comment-form { margin-top: 10px; }
html[data-theme='dark'] .qa-answers { border-color: #435348; }


.schedule-preset-label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600}.schedule-preset-label select{min-width:0;max-width:100%;border:1px solid #d8e2da;border-radius:9px;background:white;color:#243128;padding:10px;font:inherit}.schedule-custom{display:grid;gap:10px}.schedule-custom[hidden]{display:none}.schedule-custom>button{justify-self:start;border:1px solid #cadacf;border-radius:8px;padding:9px 12px;font-size:12px;font-weight:700}@media(max-width:450px){.schedule-preset-label{align-items:stretch;flex-direction:column;gap:6px}.schedule-preset-label select{width:100%}}

.onboarding{max-width:460px;margin:auto;padding:8px 2px}.onboarding-head{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.06em;color:#71867a}.onboarding-progress{height:7px;background:#e7eee8;border-radius:10px;overflow:hidden;margin:14px 0 24px}.onboarding-progress span{height:100%;display:block;background:#4b8c60;transition:width .2s ease}.onboarding h2{font-size:24px;line-height:1.2;margin:0 0 10px}.onboarding>p{color:#63756a;line-height:1.5;margin-bottom:20px}.onboarding form{display:grid;gap:14px}.onboarding form label{display:grid;gap:6px;font-size:13px;font-weight:600}.onboarding input,.onboarding select{width:100%;padding:12px;border:1px solid #d8e3da;border-radius:10px;background:#fff;font:inherit}.onboarding small{font-weight:400;color:#71867a}.onboarding-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}.onboarding-actions button{padding:11px 18px;border-radius:10px}@media(max-width:500px){.onboarding h2{font-size:21px}.onboarding-actions button{flex:1}}

/* --- Mobile Responsive & UX Enhancements --- */
.mobile-menu-btn { display: none; }
.chat-back-btn { display: none; }

@media (max-width: 700px) {
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #edf3ee;
    color: #213227;
    font-size: 20px;
    flex-shrink: 0;
    cursor: pointer;
  }
  html[data-theme="dark"] .mobile-menu-btn {
    background: #2b3930;
    color: #e8eee9;
  }

  /* Form & Dialog mobile responsiveness */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  dialog {
    padding: 20px 16px !important;
    width: min(490px, calc(100% - 16px)) !important;
    border-radius: 16px !important;
  }

  /* Opportunity rows wrap gracefully */
  .opportunity-row {
    flex-wrap: wrap !important;
    padding: 10px 0 !important;
    gap: 8px !important;
  }
  .opportunity-row .competition-item {
    flex: 1 1 100% !important;
  }
  .opportunity-row button, .opportunity-row .opportunity-save {
    flex: 1 1 auto !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Native Mobile Chat UI: switch cleanly between contacts and active conversation */
  .messaging {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
  }
  .messaging .contacts {
    display: block !important;
    width: 100% !important;
    border-right: none !important;
    padding: 12px !important;
  }
  .messaging .chat {
    display: none !important;
    width: 100% !important;
  }
  .messaging.in-chat .contacts {
    display: none !important;
  }
  .messaging.in-chat .chat {
    display: flex !important;
    width: 100% !important;
  }
  .chat-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: #edf3ee !important;
    color: #213227 !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }
  html[data-theme="dark"] .chat-back-btn {
    background: #2b3930 !important;
    color: #e8eee9 !important;
  }
}

/* --- Cute Border-line Stickers (Turtle & Cat) --- */
.cute-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: #3f8054;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}
.cute-sticker svg {
  width: 100%;
  height: 100%;
}
.cute-sticker:hover {
  transform: scale(1.12) rotate(4deg);
}
html[data-theme="dark"] .cute-sticker {
  color: #7bc092;
}

/* Background floating cute stickers */
.bg-sticker {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  transition: opacity 0.3s ease;
}
.bg-sticker.turtle-bg {
  bottom: 24px;
  left: 20px;
  width: 80px;
  height: 80px;
}
.bg-sticker.cat-bg {
  bottom: 24px;
  right: 24px;
  width: 84px;
  height: 84px;
}
@media (max-width: 700px) {
  .bg-sticker {
    opacity: 0.10;
    width: 52px;
    height: 52px;
  }
  .bg-sticker.turtle-bg { bottom: 64px; left: 8px; }
  .bg-sticker.cat-bg { bottom: 64px; right: 8px; }
}

/* Banner sticker decorations */
.banner-stickers {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.banner-stickers .cute-sticker {
  width: 44px;
  height: 44px;
  opacity: 0.85;
}
@media (max-width: 600px) {
  .banner-stickers {
    display: none;
  }
}

/* ==========================================================================
   DECOR STUDIO: DUAL AURA (COVER + AVATAR SPOTLIGHT), CHAT FRAMES &
   COMMUNICATION STYLING (POSTS, COMMENTS & COMMUNITY Q&A)
   ========================================================================== */

/* Decor Button */
.decor-button {
  background: linear-gradient(135deg, #fbf7ff 0%, #f3ebff 100%) !important;
  color: #6b21a8 !important;
  border: 1px solid #d8b4fe !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(107, 33, 168, 0.08) !important;
}
.decor-button:hover {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
  border-color: #a855f7 !important;
  color: #581c87 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.18) !important;
}
.decor-button .icon {
  width: 15px;
  height: 15px;
  color: #9333ea;
}

/* ==========================================================================
   CRITICAL: AVATAR VISIBILITY & DUAL-EFFECT ARCHITECTURE
   Ensure avatar rises proudly over cover thumbnail with zero clipping!
   ========================================================================== */
.profile.card {
  position: relative !important;
  overflow: visible !important; /* CRITICAL: Must be visible so negative margin avatar is NEVER clipped! */
  z-index: 2 !important;
}

.profile-cover,
.person-cover,
.preview-cover-mini {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* The wrapper hosting the Avatar and its Radiant Spotlight Aura Ring */
.avatar-aura-stage {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: -55px !important;
  z-index: 10 !important; /* Always sits on top of cover boundary */
  vertical-align: top;
}

.avatar-aura-stage > .avatar {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important; /* Stage handles top offset */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16) !important;
}

/* ==========================================================================
   1. COVER BACKDROP AURAS (ATMOSPHERIC BANNER EFFECTS)
   ========================================================================== */
.cover-aura-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

/* 1A. Dragon Silhouette & Clouds in Cover */
.aura-dragon-clouds .aura-dragon-silhouette {
  position: absolute;
  top: 15px;
  left: -220px;
  width: 220px;
  height: 90px;
  opacity: 0.92;
  animation: dragonFlyAcross 14s infinite ease-in-out;
  filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.7));
}
.aura-dragon-clouds .dragon-svg {
  width: 100%;
  height: 100%;
}
@keyframes dragonFlyAcross {
  0% { transform: translate3d(0, 0, 0) scaleX(1); left: -240px; }
  48% { transform: translate3d(850px, 15px, 0) scaleX(1); left: -240px; }
  50% { transform: translate3d(850px, 15px, 0) scaleX(-1); left: -240px; }
  98% { transform: translate3d(0, 0, 0) scaleX(-1); left: -240px; }
  100% { transform: translate3d(0, 0, 0) scaleX(1); left: -240px; }
}
.aura-dragon-clouds .aura-cloud {
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, rgba(254, 243, 199, 0.45) 50%, transparent 75%);
  border-radius: 50%;
  filter: blur(8px);
}
.aura-dragon-clouds .aura-cloud-1 {
  width: 180px; height: 60px; top: 15px; left: 5%;
  animation: cloudDrift 18s infinite alternate ease-in-out;
}
.aura-dragon-clouds .aura-cloud-2 {
  width: 220px; height: 70px; top: 30px; right: 8%;
  animation: cloudDrift 22s infinite alternate-reverse ease-in-out;
}
.aura-dragon-clouds .aura-cloud-3 {
  width: 150px; height: 50px; bottom: 20px; left: 30%;
  animation: cloudDrift 15s infinite alternate ease-in-out;
}
@keyframes cloudDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(35px); }
}
.aura-dragon-clouds .aura-sparkles {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  color: #f59e0b;
}
.aura-dragon-clouds .aura-sparkles span {
  animation: sparkleTwinkle 3s infinite ease-in-out;
}
.aura-dragon-clouds .aura-sparkles span:nth-child(2) { animation-delay: 0.8s; font-size: 20px; color: #fbbf24; }
.aura-dragon-clouds .aura-sparkles span:nth-child(3) { animation-delay: 1.6s; font-size: 14px; color: #f59e0b; }
.aura-dragon-clouds .aura-sparkles span:nth-child(4) { animation-delay: 2.3s; font-size: 18px; color: #fde68a; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(20deg); filter: drop-shadow(0 0 6px #ffd700); }
}

/* 1B. Sakura Petals Falling in Cover */
.aura-sakura-blossom {
  background: linear-gradient(180deg, rgba(255, 241, 242, 0.25) 0%, transparent 60%);
}
.aura-sakura-blossom .sakura-petal {
  position: absolute;
  font-size: 14px;
  top: -20px;
  opacity: 0.9;
  user-select: none;
  animation: sakuraFall 7s infinite linear;
}
.aura-sakura-blossom .p1 { left: 8%; animation-delay: 0s; animation-duration: 6.5s; font-size: 16px; }
.aura-sakura-blossom .p2 { left: 24%; animation-delay: 1.8s; animation-duration: 7.5s; font-size: 13px; }
.aura-sakura-blossom .p3 { left: 45%; animation-delay: 3.2s; animation-duration: 6.8s; font-size: 15px; }
.aura-sakura-blossom .p4 { left: 65%; animation-delay: 0.9s; animation-duration: 8s; font-size: 14px; }
.aura-sakura-blossom .p5 { left: 82%; animation-delay: 2.5s; animation-duration: 7.2s; font-size: 16px; }
.aura-sakura-blossom .p6 { left: 93%; animation-delay: 4.1s; animation-duration: 6.2s; font-size: 12px; }
@keyframes sakuraFall {
  0% { top: -20px; transform: translateX(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { top: 105%; transform: translateX(60px) rotate(360deg); opacity: 0; }
}

/* 1C. Galaxy Aurora in Cover */
.aura-galaxy-aurora {
  background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.18) 0%, rgba(168, 85, 247, 0.12) 40%, transparent 70%);
}
.aura-galaxy-aurora .aurora-beam {
  position: absolute;
  top: 0;
  height: 100px;
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0.7;
}
.aura-galaxy-aurora .beam-1 {
  left: 10%; right: 25%;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.45), rgba(236, 72, 153, 0.35));
  animation: auroraFlow 8s infinite alternate ease-in-out;
}
.aura-galaxy-aurora .beam-2 {
  left: 30%; right: 10%;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.3), rgba(99, 102, 241, 0.4), rgba(192, 132, 252, 0.35));
  animation: auroraFlow 11s infinite alternate-reverse ease-in-out;
}
@keyframes auroraFlow {
  0% { transform: skewX(-15deg) scaleY(0.9); }
  50% { transform: skewX(10deg) scaleY(1.15); }
  100% { transform: skewX(-5deg) scaleY(1); }
}
.aura-galaxy-aurora .aurora-stars {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  padding: 15px 30px;
  font-size: 13px;
  color: #c084fc;
}
.aura-galaxy-aurora .aurora-stars span {
  animation: starPulse 2.5s infinite ease-in-out;
}
.aura-galaxy-aurora .aurora-stars span:nth-child(2) { animation-delay: 0.6s; color: #a5b4fc; font-size: 15px; }
.aura-galaxy-aurora .aurora-stars span:nth-child(3) { animation-delay: 1.2s; color: #f472b6; font-size: 10px; }
.aura-galaxy-aurora .aurora-stars span:nth-child(4) { animation-delay: 1.8s; color: #67e8f9; font-size: 14px; }
.aura-galaxy-aurora .aurora-stars span:nth-child(5) { animation-delay: 2.2s; color: #fbcfe8; font-size: 12px; }
@keyframes starPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 6px #c084fc); }
}

/* 1D. Fireflies in Cover */
.aura-firefly-night .firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fef08a;
  border-radius: 50%;
  box-shadow: 0 0 10px 3px rgba(250, 204, 21, 0.85);
  animation: fireflyFloat 6s infinite ease-in-out;
}
.aura-firefly-night .f1 { top: 30%; left: 15%; animation-duration: 5.5s; }
.aura-firefly-night .f2 { top: 60%; left: 25%; animation-duration: 7s; animation-delay: 1s; }
.aura-firefly-night .f3 { top: 25%; right: 20%; animation-duration: 6.2s; animation-delay: 2s; }
.aura-firefly-night .f4 { top: 70%; right: 30%; animation-duration: 6.8s; animation-delay: 3s; }
.aura-firefly-night .f5 { top: 45%; left: 50%; animation-duration: 5.8s; animation-delay: 1.5s; }
@keyframes fireflyFloat {
  0%, 100% { transform: translate(0, 0) scale(0.7); opacity: 0.2; }
  35% { transform: translate(15px, -20px) scale(1.2); opacity: 1; }
  70% { transform: translate(-10px, -35px) scale(0.9); opacity: 0.6; }
}

/* 1E. Cyber Neon Pulse in Cover */
.aura-cyber-neon {
  border: 1px solid rgba(6, 182, 212, 0.35);
  box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.12);
}
.aura-cyber-neon .cyber-pulse {
  position: absolute;
  top: 15px; left: 20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid #06b6d4;
  opacity: 0;
  animation: cyberPulseRing 3.5s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
}
.aura-cyber-neon .pulse-2 {
  animation-delay: 1.75s;
  border-color: #8b5cf6;
}
@keyframes cyberPulseRing {
  0% { transform: scale(0.7); opacity: 0.8; box-shadow: 0 0 10px #06b6d4; }
  100% { transform: scale(2.4); opacity: 0; }
}
.aura-cyber-neon .cyber-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 182, 212, 0.12) 50%, transparent 100%);
  height: 35%;
  animation: cyberScan 4s infinite linear;
}
@keyframes cyberScan {
  0% { top: -35%; }
  100% { top: 100%; }
}

/* ==========================================================================
   2. AVATAR SPOTLIGHT AURA RINGS (HALOS & PARTICLES AROUND AVATAR)
   ========================================================================== */
.avatar-aura-ring {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  border-radius: 50%;
  z-index: 3;
}
.avatar-halo-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

/* 2A. Dragon Halo Ring */
.aura-ring-dragon {
  border: 2.5px solid #fbbf24;
  box-shadow: 0 0 20px 4px rgba(251, 191, 36, 0.7), inset 0 0 12px rgba(245, 158, 11, 0.4);
  animation: haloPulseDragon 3s infinite alternate ease-in-out;
}
@keyframes haloPulseDragon {
  0% { transform: scale(0.98); box-shadow: 0 0 14px 2px rgba(251, 191, 36, 0.5); }
  100% { transform: scale(1.04); box-shadow: 0 0 26px 7px rgba(251, 191, 36, 0.85); }
}
.aura-ring-dragon .avatar-flame {
  position: absolute;
  font-size: 14px;
  filter: drop-shadow(0 0 6px #f59e0b);
}
.aura-ring-dragon .df-1 { top: -14px; left: 50%; transform: translateX(-50%); animation: flameHover 2s infinite alternate; }
.aura-ring-dragon .df-2 { bottom: 0; left: -6px; animation: flameHover 2.4s infinite alternate-reverse; }
.aura-ring-dragon .df-3 { bottom: 0; right: -6px; animation: flameHover 2.2s infinite alternate; }
@keyframes flameHover {
  0% { transform: translateY(0) scale(0.9); }
  100% { transform: translateY(-4px) scale(1.15); }
}

/* 2B. Sakura Halo Ring */
.aura-ring-sakura {
  border: 2.5px solid #f472b6;
  box-shadow: 0 0 20px 4px rgba(244, 114, 182, 0.55), inset 0 0 10px rgba(251, 207, 232, 0.4);
  animation: haloPulseSakura 3.5s infinite alternate ease-in-out;
}
@keyframes haloPulseSakura {
  0% { transform: scale(0.98); box-shadow: 0 0 14px 2px rgba(244, 114, 182, 0.4); }
  100% { transform: scale(1.03); box-shadow: 0 0 24px 6px rgba(244, 114, 182, 0.75); }
}
.aura-ring-sakura .avatar-petal {
  position: absolute;
  font-size: 13px;
  filter: drop-shadow(0 0 5px rgba(244, 114, 182, 0.7));
}
.aura-ring-sakura .ap-1 { top: -10px; right: 10px; animation: petalBob 2.8s infinite ease-in-out; }
.aura-ring-sakura .ap-2 { bottom: -6px; left: 14px; animation: petalBob 3.2s infinite ease-in-out 0.8s; }
.aura-ring-sakura .ap-3 { top: 40%; left: -12px; font-size: 11px; animation: petalBob 2.5s infinite ease-in-out 1.4s; }
@keyframes petalBob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(3px, -4px) rotate(20deg); }
}

/* 2C. Galaxy Halo Ring */
.aura-ring-galaxy {
  border: 2.5px solid #a855f7;
  box-shadow: 0 0 24px 5px rgba(168, 85, 247, 0.65), 0 0 35px rgba(6, 182, 212, 0.45);
  animation: haloPulseGalaxy 3s infinite alternate ease-in-out;
}
@keyframes haloPulseGalaxy {
  0% { transform: scale(0.98) rotate(0deg); }
  100% { transform: scale(1.04) rotate(4deg); box-shadow: 0 0 30px 8px rgba(168, 85, 247, 0.8), 0 0 45px rgba(6, 182, 212, 0.6); }
}
.aura-ring-galaxy .avatar-star {
  position: absolute;
  color: #c084fc;
  filter: drop-shadow(0 0 6px #a855f7);
  animation: starTwinkleRing 2s infinite alternate ease-in-out;
}
.aura-ring-galaxy .as-1 { top: -12px; left: 20%; font-size: 15px; }
.aura-ring-galaxy .as-2 { bottom: -8px; right: 20%; font-size: 16px; color: #67e8f9; animation-delay: 0.7s; }
.aura-ring-galaxy .as-3 { top: 45%; right: -12px; font-size: 12px; color: #f472b6; animation-delay: 1.3s; }
@keyframes starTwinkleRing {
  0% { transform: scale(0.75); opacity: 0.4; }
  100% { transform: scale(1.25); opacity: 1; }
}

/* 2D. Firefly Halo Ring */
.aura-ring-firefly {
  border: 2.5px solid #eab308;
  box-shadow: 0 0 20px 4px rgba(234, 179, 8, 0.55), inset 0 0 12px rgba(254, 240, 138, 0.35);
  animation: haloPulseFirefly 3.2s infinite alternate ease-in-out;
}
@keyframes haloPulseFirefly {
  0% { transform: scale(0.98); }
  100% { transform: scale(1.03); box-shadow: 0 0 28px 7px rgba(234, 179, 8, 0.8); }
}
.aura-ring-firefly .avatar-fly {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fef08a;
  border-radius: 50%;
  box-shadow: 0 0 10px 3px rgba(250, 204, 21, 0.95);
  animation: avatarFlyOrbit 4s infinite ease-in-out;
}
.aura-ring-firefly .af-1 { top: -8px; left: 30%; animation-delay: 0s; }
.aura-ring-firefly .af-2 { bottom: -6px; right: 25%; animation-delay: 1s; }
.aura-ring-firefly .af-3 { top: 40%; left: -10px; animation-delay: 2s; }
.aura-ring-firefly .af-4 { top: 50%; right: -10px; animation-delay: 3s; }
@keyframes avatarFlyOrbit {
  0%, 100% { transform: scale(0.8) translate(0, 0); opacity: 0.3; }
  50% { transform: scale(1.3) translate(3px, -5px); opacity: 1; }
}

/* 2E. Cyber Neon Halo Ring */
.aura-ring-cyber {
  border: 2px dashed #06b6d4;
  box-shadow: 0 0 22px rgba(6, 182, 212, 0.7), inset 0 0 14px rgba(6, 182, 212, 0.25);
  animation: cyberSpinRing 16s infinite linear;
}
@keyframes cyberSpinRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.aura-ring-cyber .cyber-corner-bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #22d3ee;
  border-style: solid;
  pointer-events: none;
}
.aura-ring-cyber .cyber-corner-bracket.tl { top: -8px; left: -8px; border-width: 2.5px 0 0 2.5px; }
.aura-ring-cyber .cyber-corner-bracket.tr { top: -8px; right: -8px; border-width: 2.5px 2.5px 0 0; }
.aura-ring-cyber .cyber-corner-bracket.bl { bottom: -8px; left: -8px; border-width: 0 0 2.5px 2.5px; }
.aura-ring-cyber .cyber-corner-bracket.br { bottom: -8px; right: -8px; border-width: 0 2.5px 2.5px 0; }
.aura-ring-cyber .cyber-orbit-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border-top: 2px solid #8b5cf6;
  animation: cyberSpinRing 6s infinite reverse linear;
}

/* ==========================================================================
   3. CHAT MESSAGE BUBBLE FRAMES
   ========================================================================== */
.bubble.frame-fish-wave {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%) !important;
  color: #0c4a6e !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 18px 4px 18px 18px !important;
  box-shadow: 0 3px 12px rgba(56, 189, 248, 0.18) !important;
  position: relative !important;
}
.bubble.frame-fish-wave::after {
  content: '🐟';
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 13px;
  filter: drop-shadow(0 2px 4px rgba(12, 74, 110, 0.2));
}

.bubble.frame-cat-paw {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
  color: #881337 !important;
  border: 2px solid #fda4af !important;
  border-radius: 20px 20px 18px 6px !important;
  box-shadow: 0 3px 12px rgba(253, 164, 175, 0.22) !important;
  position: relative !important;
}
.bubble.frame-cat-paw::before {
  content: '🐱';
  position: absolute;
  top: -11px;
  left: 10px;
  font-size: 13px;
}

.bubble.frame-turtle-shell {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  color: #064e3b !important;
  border: 2px dashed #10b981 !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.16) !important;
  position: relative !important;
}
.bubble.frame-turtle-shell::after {
  content: '🐢';
  position: absolute;
  bottom: -9px;
  right: 8px;
  font-size: 12px;
}

.bubble.frame-cloud-dream {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%) !important;
  color: #0369a1 !important;
  border: 2px solid #bae6fd !important;
  border-radius: 24px 24px 6px 24px !important;
  box-shadow: 0 6px 18px rgba(186, 230, 253, 0.45) !important;
  position: relative !important;
}
.bubble.frame-cloud-dream::before {
  content: '☁️';
  position: absolute;
  top: -9px;
  right: 12px;
  font-size: 11px;
  opacity: 0.85;
}

.bubble.frame-cyber-frame {
  background: #091e32 !important;
  color: #67e8f9 !important;
  border: 1.5px solid #06b6d4 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.35) !important;
  clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%) !important;
  position: relative !important;
  letter-spacing: 0.2px;
}
.bubble.frame-cyber-frame::after {
  content: '⚡';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  color: #22d3ee;
}

.bubble.frame-royal-gold {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  color: #78350f !important;
  border: 3px double #f59e0b !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22) !important;
  position: relative !important;
  font-weight: 500;
}
.bubble.frame-royal-gold::before {
  content: '👑';
  position: absolute;
  top: -11px;
  left: 10px;
  font-size: 12px;
}

/* ==========================================================================
   4. COMMUNICATION STYLES (POSTS, COMMENTS & COMMUNITY Q&A)
   ========================================================================== */

/* 4A. Theme: Sunset Warmth */
.post.card.theme-sunset,
.qa-question.theme-sunset {
  background: linear-gradient(135deg, #fff2e6 0%, #ffe5ea 100%) !important;
  color: #431407 !important;
  border-color: #fed7aa !important;
}
.post.card.theme-sunset .post-head strong,
.qa-question.theme-sunset h2 { color: #7c2d12 !important; }
.post.card.theme-sunset .post-head small,
.qa-question.theme-sunset small { color: #9a3412 !important; }
.post.card.theme-sunset .post-text,
.qa-question.theme-sunset p { color: #571b0a !important; }

.comment-item.theme-sunset .comment-content {
  background: linear-gradient(135deg, #fff4eb 0%, #ffe9ee 100%) !important;
  color: #431407 !important;
  border: 1px solid #ffd8be !important;
}
.comment-item.theme-sunset .comment-content strong { color: #7c2d12 !important; }
.comment-item.theme-sunset .comment-content p { color: #571b0a !important; }

/* 4B. Theme: Ocean Breeze */
.post.card.theme-ocean,
.qa-question.theme-ocean {
  background: linear-gradient(135deg, #eef9ff 0%, #dcf2fd 100%) !important;
  color: #082f49 !important;
  border-color: #bae6fd !important;
}
.post.card.theme-ocean .post-head strong,
.qa-question.theme-ocean h2 { color: #0369a1 !important; }
.post.card.theme-ocean .post-head small,
.qa-question.theme-ocean small { color: #0284c7 !important; }
.post.card.theme-ocean .post-text,
.qa-question.theme-ocean p { color: #0c4a6e !important; }

.comment-item.theme-ocean .comment-content {
  background: linear-gradient(135deg, #f0faff 0%, #e2f4fe 100%) !important;
  color: #082f49 !important;
  border: 1px solid #bfe7fd !important;
}
.comment-item.theme-ocean .comment-content strong { color: #0369a1 !important; }
.comment-item.theme-ocean .comment-content p { color: #0c4a6e !important; }

/* 4C. Theme: Fresh Mint */
.post.card.theme-mint,
.qa-question.theme-mint {
  background: linear-gradient(135deg, #eefaf2 0%, #dcf5e4 100%) !important;
  color: #064e3b !important;
  border-color: #bbf7d0 !important;
}
.post.card.theme-mint .post-head strong,
.qa-question.theme-mint h2 { color: #047857 !important; }
.post.card.theme-mint .post-head small,
.qa-question.theme-mint small { color: #059669 !important; }
.post.card.theme-mint .post-text,
.qa-question.theme-mint p { color: #065f46 !important; }

.comment-item.theme-mint .comment-content {
  background: linear-gradient(135deg, #f2fcf5 0%, #e2f8e9 100%) !important;
  color: #064e3b !important;
  border: 1px solid #bbf7d0 !important;
}
.comment-item.theme-mint .comment-content strong { color: #047857 !important; }
.comment-item.theme-mint .comment-content p { color: #065f46 !important; }

/* 4D. Theme: Dreamy Lavender */
.post.card.theme-lavender,
.qa-question.theme-lavender {
  background: linear-gradient(135deg, #f7f2ff 0%, #ece2ff 100%) !important;
  color: #3b0764 !important;
  border-color: #e9d5ff !important;
}
.post.card.theme-lavender .post-head strong,
.qa-question.theme-lavender h2 { color: #6b21a8 !important; }
.post.card.theme-lavender .post-head small,
.qa-question.theme-lavender small { color: #7e22ce !important; }
.post.card.theme-lavender .post-text,
.qa-question.theme-lavender p { color: #581c87 !important; }

.comment-item.theme-lavender .comment-content {
  background: linear-gradient(135deg, #faf6ff 0%, #f1e9ff 100%) !important;
  color: #3b0764 !important;
  border: 1px solid #eedcff !important;
}
.comment-item.theme-lavender .comment-content strong { color: #6b21a8 !important; }
.comment-item.theme-lavender .comment-content p { color: #581c87 !important; }

/* 4E. Theme: Obsidian Midnight */
.post.card.theme-midnight,
.qa-question.theme-midnight {
  background: linear-gradient(135deg, #182029 0%, #222d3b 100%) !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}
.post.card.theme-midnight .post-head strong,
.qa-question.theme-midnight h2 { color: #ffffff !important; }
.post.card.theme-midnight .post-head small,
.qa-question.theme-midnight small { color: #94a3b8 !important; }
.post.card.theme-midnight .post-text,
.qa-question.theme-midnight p { color: #e2e8f0 !important; }
.post.card.theme-midnight .post-meta { color: #cbd5e1 !important; }
.qa-question.theme-midnight .qa-meta-bar { border-color: rgba(255, 255, 255, 0.14) !important; }
.qa-question.theme-midnight .qa-author-identity,
.qa-question.theme-midnight .qa-author-link { color: #ffffff !important; }
.qa-question.theme-midnight .qa-author-sub { color: #94a3b8 !important; }
.qa-question.theme-midnight .qa-btn-edit { background: #243142 !important; border-color: #475569 !important; color: #f1f5f9 !important; }
.qa-question.theme-midnight .qa-btn-delete { background: #3b1820 !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
.qa-question.theme-midnight .qa-btn-solve { background: #143522 !important; border-color: #166534 !important; color: #86efac !important; }
.qa-question.theme-midnight .qa-answer-form { background: #1e293b !important; border-color: #334155 !important; }
.qa-question.theme-midnight .qa-answer-form input { color: #f8fafc !important; }
.qa-question.theme-midnight .qa-answer-form input::placeholder { color: #64748b !important; }

.comment-item.theme-midnight .comment-content {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
.comment-item.theme-midnight .comment-content strong { color: #ffffff !important; }
.comment-item.theme-midnight .comment-content small { color: #94a3b8 !important; }
.comment-item.theme-midnight .comment-content p { color: #e2e8f0 !important; }

/* 4F. Theme: Artistic Parchment */
.post.card.theme-parchment,
.qa-question.theme-parchment {
  background: #fbf7ee !important;
  color: #451a03 !important;
  border-color: #e5dec9 !important;
}
.post.card.theme-parchment .post-head strong,
.qa-question.theme-parchment h2 { color: #78350f !important; }
.post.card.theme-parchment .post-head small,
.qa-question.theme-parchment small { color: #92400e !important; }
.post.card.theme-parchment .post-text,
.qa-question.theme-parchment p { color: #582607 !important; }

.comment-item.theme-parchment .comment-content {
  background: #f6f0e2 !important;
  color: #451a03 !important;
  border: 1px solid #e7dfcb !important;
}
.comment-item.theme-parchment .comment-content strong { color: #78350f !important; }
.comment-item.theme-parchment .comment-content p { color: #582607 !important; }

/* 4G. Communication Borders */
.post.card.border-gold-double,
.qa-question.border-gold-double {
  border: 3px double #d97706 !important;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.15) !important;
}
.comment-item.border-gold-double .comment-content {
  border: 2px double #d97706 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12) !important;
}

.post.card.border-cute-stickers,
.qa-question.border-cute-stickers {
  border: 2px dashed #f472b6 !important;
  position: relative !important;
}
.post.card.border-cute-stickers::before,
.qa-question.border-cute-stickers::before {
  content: '🐢';
  position: absolute;
  top: 10px;
  right: 32px;
  font-size: 16px;
  pointer-events: none;
}
.post.card.border-cute-stickers::after,
.qa-question.border-cute-stickers::after {
  content: '🐱';
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 16px;
  pointer-events: none;
}
.comment-item.border-cute-stickers .comment-content {
  border: 2px dashed #f472b6 !important;
}

.post.card.border-neon-glow,
.qa-question.border-neon-glow {
  border: 2px solid #8b5cf6 !important;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.28) !important;
}
.comment-item.border-neon-glow .comment-content {
  border: 1.5px solid #8b5cf6 !important;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.2) !important;
}

.post.card.border-wave,
.qa-question.border-wave {
  border: 2px solid #0284c7 !important;
  border-radius: 26px 8px 26px 8px !important;
}
.comment-item.border-wave .comment-content {
  border: 1.5px solid #0284c7 !important;
  border-radius: 18px 4px 18px 4px !important;
}

/* ==========================================================================
   5. DECOR STUDIO MODAL INTERFACE & PREVIEW SUITE
   ========================================================================== */
.decor-studio-modal {
  padding: 4px;
}
.decor-studio-head {
  text-align: center;
  margin-bottom: 20px;
}
.decor-studio-head h2 {
  font-size: 22px;
  letter-spacing: -0.5px;
  margin: 6px 0;
  color: #171b18;
}
.decor-studio-head .subtle {
  font-size: 12px;
  max-width: 440px;
  margin: 0 auto;
}

/* Tabs */
.decor-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e7eae7;
  padding-bottom: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.decor-tab-btn {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.decor-tab-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.decor-tab-btn.active {
  background: #6b21a8;
  color: #ffffff;
  border-color: #6b21a8;
  box-shadow: 0 2px 8px rgba(107, 33, 168, 0.25);
}

/* Tab Panels */
.decor-tab-panel {
  display: none;
}
.decor-tab-panel.active {
  display: block;
  animation: fadeInPanel 0.25s ease-out;
}
@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Live Preview Stages */
.decor-preview-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin-bottom: 22px;
  position: relative;
  overflow: visible;
}

/* Aura Dual Preview Stage (Cover Banner + Avatar Overlap) */
.aura-preview-stage {
  padding: 0 0 16px 0 !important;
  overflow: visible !important;
}
.preview-cover-mini {
  height: 100px;
  background: linear-gradient(135deg, #1e293b, #334155);
  border-radius: 16px 16px 0 0;
  position: relative !important;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-cover-tag {
  position: absolute;
  top: 8px;
  left: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.preview-avatar-stage {
  margin-top: -36px !important;
  z-index: 10 !important;
}
.preview-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: linear-gradient(135deg, #e0f2fe, #f3e8ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.preview-desc {
  margin-top: 10px;
}
.preview-desc strong {
  display: block;
  font-size: 14px;
  color: #1e293b;
}
.preview-desc small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.decor-test-btn {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}
.decor-test-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Chat Preview Stage */
.chat-preview-stage {
  padding: 24px 16px;
}
.chat-preview-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* Communication Preview Stage (Post, Comment & Q&A) */
.comm-preview-stage {
  padding: 16px !important;
  text-align: left !important;
}
.comm-preview-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-preview-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  text-align: left;
  transition: all 0.25s;
}
.post-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.preview-avatar-mini {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #1d4ed8;
  font-size: 13px;
}
.post-preview-head strong {
  display: block;
  font-size: 12px;
}
.post-preview-head small {
  display: block;
  font-size: 10px;
  color: #64748b;
}
.post-preview-body {
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}
.comment-preview-wrap,
.qa-preview-wrap {
  width: 100%;
}
.comment-preview-wrap .comment-item,
.qa-preview-wrap .comment-item {
  margin: 0;
}

/* Decor Items Grid */
.decor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.decor-item-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}
.decor-item-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.decor-item-card.selected {
  border-color: #8b5cf6;
  background: #faf5ff;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25), 0 4px 14px rgba(139, 92, 246, 0.12);
}
.decor-badge-tier {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.decor-badge-tier.vip {
  background: linear-gradient(135deg, #fef08a, #facc15);
  color: #713f12;
}
.decor-badge-tier.free {
  background: #ecfdf5;
  color: #065f46;
}
.decor-item-icon {
  font-size: 26px;
  margin: 4px 0 2px;
}
.decor-item-card strong {
  font-size: 11px;
  line-height: 1.3;
  color: #1e293b;
}
.decor-item-card small {
  font-size: 10px;
  color: #64748b;
  line-height: 1.3;
}

/* Post Palette Swatches */
.theme-color-palette {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 8px;
}
.palette-circle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.palette-circle-btn:hover {
  transform: scale(1.12);
}
.palette-circle-btn.selected {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
  transform: scale(1.1);
}
.palette-circle-btn .palette-check {
  display: none;
  font-weight: 900;
  font-size: 14px;
  color: #1e293b;
}
.palette-circle-btn.selected .palette-check {
  display: block;
}
.palette-circle-btn[data-select-theme="theme-midnight"] .palette-check {
  color: #ffffff;
}
#theme-active-label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

/* Decor Actions Bar */
.decor-actions-bar {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e7eae7;
}
.decor-actions-bar button {
  padding: 12px 18px;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .aura-dragon-silhouette,
  .aura-cloud,
  .aura-sparkles span,
  .sakura-petal,
  .aurora-beam,
  .aurora-stars span,
  .firefly,
  .cyber-pulse,
  .cyber-scanline,
  .aura-ring-dragon,
  .aura-ring-sakura,
  .aura-ring-galaxy,
  .aura-ring-firefly,
  .aura-ring-cyber,
  .avatar-flame,
  .avatar-petal,
  .avatar-star,
  .avatar-fly,
  .cyber-orbit-ring {
    animation: none !important;
  }
}

/* ==========================================================================
   Findasky Modern Jobs & Career Hub UI
   ========================================================================== */
.jobs-container {
  max-width: 980px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hero Section */
.jobs-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 30px 34px;
  border-radius: 20px;
  background: linear-gradient(135deg, #e6f6ec 0%, #f7faf8 55%, #ecfdf5 100%);
  border: 1.5px solid #d1fae5;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.06);
}
.jobs-hero-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 340px;
  min-width: 280px;
}
.jobs-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
  background: #ffffff;
  border: 1px solid #a7f3d0;
  border-radius: 9999px;
  padding: 4px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.jobs-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: pulse-dot 2s infinite ease-in-out;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.jobs-hero-main h1 {
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 4px 0 2px;
}
.jobs-hero-main p {
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
  margin: 0;
  max-width: 560px;
}
.jobs-hero-action {
  margin-top: 10px;
}
.jobs-hero-create-btn {
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.jobs-hero-create-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4) !important;
}

/* Hero Stats Cards */
.jobs-hero-stats {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.jobs-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}
.jobs-stat-icon {
  font-size: 24px;
  line-height: 1;
}
.jobs-stat-card strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}
.jobs-stat-card small {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  margin-top: 2px;
}

/* Filters & Search Form */
form#job-filter-form.jobs-filters,
.jobs-filters.card {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 20px 24px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2ebe3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.jobs-filters-top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
}
label.jobs-filter-search,
label.jobs-filter-loc {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 2px 14px !important;
  min-height: 44px !important;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
label.jobs-filter-search {
  flex: 2 1 240px !important;
}
label.jobs-filter-loc {
  flex: 1 1 180px !important;
}
label.jobs-filter-search:focus-within,
label.jobs-filter-loc:focus-within {
  background: #ffffff;
  border-color: #10b981;
  box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.14);
}
.jobs-filter-icon {
  font-size: 15px;
  opacity: 0.75;
  margin-right: 4px;
  line-height: 1;
  flex-shrink: 0;
  align-self: center;
}
label.jobs-filter-search input,
label.jobs-filter-loc input {
  border: none !important;
  background: transparent !important;
  padding: 8px 0 !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}
.jobs-filter-search input::placeholder,
.jobs-filter-loc input::placeholder {
  color: #94a3b8 !important;
}
.jobs-filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.jobs-btn-submit {
  padding: 10px 20px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.jobs-btn-submit:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.38) !important;
}
.jobs-btn-clear {
  padding: 10px 15px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.jobs-btn-clear:hover {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

.jobs-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.jobs-filters-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
}
.jobs-filters-grid input,
.jobs-filters-grid select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 11px !important;
  border-radius: 9px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 12.5px !important;
  color: #1e293b !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.jobs-filters-grid input:focus,
.jobs-filters-grid select:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}

/* Toolbar & Match Counter */
.jobs-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -4px 4px;
}
.jobs-count {
  font-size: 13.5px;
  color: #64748b;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jobs-count strong {
  color: #0f172a;
  font-weight: 800;
}

/* Job Cards & Listing */
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.job-card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid #e7ede8;
  padding: 24px 26px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s;
}
.job-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.job-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}
.job-company-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}
.job-card-heading {
  flex: 1;
  min-width: 0;
}
.job-company-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.job-company-name-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
}
.job-company-name-btn:hover {
  color: #10b981 !important;
  text-decoration: underline !important;
}
.job-verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 9999px;
  padding: 2px 9px;
}
.job-unverified-tag {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 2px 9px;
}
.job-card-title {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin: 5px 0 0;
  line-height: 1.35;
}
.job-report-btn {
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 16px !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  transition: all 0.15s !important;
  line-height: 1 !important;
}
.job-report-btn:hover {
  color: #e11d48 !important;
  background: #ffe4e6 !important;
}

/* Tag Pills */
.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.job-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 9px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.job-tag-ind {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.job-tag-loc {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.job-tag-exp {
  background: #fefce8;
  color: #a16207;
  border-color: #fef08a;
}
.job-tag-type {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}
.job-tag-mode {
  background: #fdf2f8;
  color: #be185d;
  border-color: #fbcfe8;
}
.job-tag-empty {
  background: #f8fafc;
  color: #94a3b8;
  border-color: #e2e8f0;
  font-style: italic;
  font-weight: 500;
}

/* Job Image & Description */
.job-image-wrap {
  margin-top: 14px;
  max-height: 300px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}
.job-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
}
.job-description {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: #334155;
  white-space: pre-wrap;
}

/* Closed Status */
.job-status-banner.closed {
  margin-top: 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

/* Job Action Buttons */
.job-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
.job-btn-apply {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 22px !important;
  border-radius: 11px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.job-btn-apply:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 5px 14px rgba(16, 185, 129, 0.42) !important;
}
.job-btn-apply:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  background: #e2e8f0 !important;
  color: #64748b !important;
}
.job-btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  border-radius: 11px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.job-btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}
.job-btn-mgmt {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.job-btn-mgmt:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
.job-btn-mgmt.job-btn-del {
  border-color: #fecaca !important;
  color: #dc2626 !important;
  background: #fff8f8 !important;
}
.job-btn-mgmt.job-btn-del:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
}

/* Security / Safety Tip */
.job-safety {
  margin-top: 14px;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  color: #166534;
  font-size: 12px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 10px;
}

/* Empty State Card */
.jobs-empty-card {
  text-align: center;
  padding: 48px 24px !important;
  border-radius: 18px !important;
}
.jobs-empty-icon {
  font-size: 44px;
  margin-bottom: 12px;
}
.jobs-empty-card h2 {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}
.jobs-empty-card p {
  color: #64748b;
  font-size: 13.5px;
  margin: 0 0 18px;
}

/* Dark Mode Support for Jobs */
html[data-theme='dark'] .jobs-hero,
body.dark .jobs-hero,
body.theme-midnight .jobs-hero {
  background: linear-gradient(135deg, #064e3b 0%, #0f172a 65%, #064e3b 100%);
  border-color: #047857;
}
html[data-theme='dark'] .jobs-hero-badge,
body.dark .jobs-hero-badge,
body.theme-midnight .jobs-hero-badge {
  background: #0f172a;
  border-color: #059669;
  color: #6ee7b7;
}
html[data-theme='dark'] .jobs-hero-main h1,
body.dark .jobs-hero-main h1,
body.theme-midnight .jobs-hero-main h1 {
  color: #f1f5f9;
}
html[data-theme='dark'] .jobs-hero-main p,
body.dark .jobs-hero-main p,
body.theme-midnight .jobs-hero-main p {
  color: #94a3b8;
}
html[data-theme='dark'] .jobs-stat-card,
body.dark .jobs-stat-card,
body.theme-midnight .jobs-stat-card {
  background: rgba(15, 23, 42, 0.8);
  border-color: #334155;
}
html[data-theme='dark'] .jobs-stat-card strong,
body.dark .jobs-stat-card strong,
body.theme-midnight .jobs-stat-card strong {
  color: #f8fafc;
}
html[data-theme='dark'] .jobs-filters.card,
body.dark .jobs-filters.card,
body.theme-midnight .jobs-filters.card {
  background: #1e293b;
  border-color: #334155;
}
html[data-theme='dark'] .jobs-filter-search,
html[data-theme='dark'] .jobs-filter-loc,
body.dark .jobs-filter-search,
body.dark .jobs-filter-loc,
body.theme-midnight .jobs-filter-search,
body.theme-midnight .jobs-filter-loc {
  background: #0f172a;
  border-color: #334155;
}
html[data-theme='dark'] .jobs-filter-search input,
html[data-theme='dark'] .jobs-filter-loc input,
body.dark .jobs-filter-search input,
body.dark .jobs-filter-loc input,
body.theme-midnight .jobs-filter-search input,
body.theme-midnight .jobs-filter-loc input {
  color: #f8fafc !important;
}
html[data-theme='dark'] .jobs-filters-grid,
body.dark .jobs-filters-grid,
body.theme-midnight .jobs-filters-grid {
  border-color: #334155;
}
html[data-theme='dark'] .jobs-filters-grid label,
body.dark .jobs-filters-grid label,
body.theme-midnight .jobs-filters-grid label {
  color: #cbd5e1;
}
html[data-theme='dark'] .jobs-filters-grid input,
html[data-theme='dark'] .jobs-filters-grid select,
body.dark .jobs-filters-grid input,
body.dark .jobs-filters-grid select,
body.theme-midnight .jobs-filters-grid input,
body.theme-midnight .jobs-filters-grid select {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html[data-theme='dark'] .jobs-count strong,
body.dark .jobs-count strong,
body.theme-midnight .jobs-count strong {
  color: #f8fafc;
}
html[data-theme='dark'] .job-card,
body.dark .job-card,
body.theme-midnight .job-card {
  background: #1e293b;
  border-color: #334155;
}
html[data-theme='dark'] .job-card-title,
body.dark .job-card-title,
body.theme-midnight .job-card-title {
  color: #f8fafc;
}
html[data-theme='dark'] .job-company-name-btn,
body.dark .job-company-name-btn,
body.theme-midnight .job-company-name-btn {
  color: #cbd5e1 !important;
}
html[data-theme='dark'] .job-description,
body.dark .job-description,
body.theme-midnight .job-description {
  color: #cbd5e1;
}
html[data-theme='dark'] .job-actions,
body.dark .job-actions,
body.theme-midnight .job-actions {
  border-color: #334155;
}
html[data-theme='dark'] .job-btn-secondary,
html[data-theme='dark'] .job-btn-mgmt,
body.dark .job-btn-secondary,
body.dark .job-btn-mgmt,
body.theme-midnight .job-btn-secondary,
body.theme-midnight .job-btn-mgmt {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html[data-theme='dark'] .job-safety,
body.dark .job-safety,
body.theme-midnight .job-safety {
  background: #064e3b;
  border-color: #047857;
  color: #a7f3d0;
}
html[data-theme='dark'] .job-tag-ind,
body.dark .job-tag-ind,
body.theme-midnight .job-tag-ind {
  background: #1e3a8a;
  color: #bfdbfe;
  border-color: #2563eb;
}
html[data-theme='dark'] .job-tag-loc,
body.dark .job-tag-loc,
body.theme-midnight .job-tag-loc {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #059669;
}
html[data-theme='dark'] .job-tag-exp,
body.dark .job-tag-exp,
body.theme-midnight .job-tag-exp {
  background: #78350f;
  color: #fef08a;
  border-color: #b45309;
}
html[data-theme='dark'] .job-tag-type,
body.dark .job-tag-type,
body.theme-midnight .job-tag-type {
  background: #581c87;
  color: #e9d5ff;
  border-color: #7e22ce;
}
html[data-theme='dark'] .job-tag-mode,
body.dark .job-tag-mode,
body.theme-midnight .job-tag-mode {
  background: #831843;
  color: #fbcfe8;
  border-color: #db2777;
}

@media (max-width: 768px) {
  .jobs-hero {
    padding: 20px 22px;
  }
  .jobs-hero-stats {
    width: 100%;
    justify-content: flex-start;
  }
  .jobs-stat-card {
    flex: 1;
  }
  .jobs-filter-actions {
    width: 100%;
  }
  .jobs-btn-submit {
    flex: 1;
  }
  .job-card {
    padding: 18px 20px;
  }
}

.post-head > div { min-width:0; }
.post-head strong, .post-head small, .post-text, .team-card h2, .team-card p, .job-card-title, .portfolio-description, .portfolio-story-details h3, .news-copy strong { overflow-wrap:anywhere; }
.post-meta { flex-wrap:wrap; align-items:center; gap:8px 12px; }
.post-meta .saved-control, .portfolio-actions .saved-control { margin:0; min-height:38px; }
.saved-content-actions a, .saved-content-actions button { display:inline-flex; align-items:center; min-height:40px; padding:8px 13px; border:1px solid #cde4d2; border-radius:10px; background:#f2faf3; color:#28633d; font-weight:650; }
.saved-content-actions button:hover, .saved-content-actions a:hover { background:#e2f5e6; }
@media (max-width:700px) {
  .post { padding:16px; }
  .post-head { align-items:flex-start; }
  .post-head > div { flex:1; }
  .post-head .report-link { white-space:normal; }
  .post-meta { justify-content:flex-start; }
  .saved-content-actions > * { flex:1 1 auto; justify-content:center; }
}

.match-panel { padding:20px; margin-bottom:18px; border:1px solid #dce9dd; background:#fbfefb; }
.team-mode-switch { display:flex; gap:5px; padding:5px; margin-bottom:16px; border:1px solid #e2e9e2; border-radius:12px; background:#e9eeea; }
.team-mode-switch button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 16px; border-radius:9px; color:#5e6c61; font-weight:700; }
.team-mode-switch button[aria-pressed="true"] { background:#fff; color:#217444; box-shadow:0 1px 5px #142b1a12; }
.team-mode-switch .icon { width:17px; height:17px; }
.team-mode-switch button:focus-visible { outline:2px solid #239c58; outline-offset:2px; }
html[data-theme="dark"] .team-mode-switch { background:#27362b; border-color:#354b39; }
html[data-theme="dark"] .team-mode-switch button { color:#c4d1c6; }
html[data-theme="dark"] .team-mode-switch button[aria-pressed="true"] { background:#3b5141; color:#e4f7e8; }
@media (max-width:700px) { .team-mode-switch button { flex:1 1 0; min-width:0; padding:8px; } }
.match-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.match-panel h2 { margin:5px 0; font-size:19px; }
.match-panel p { margin:5px 0 12px; color:#64766a; line-height:1.45; }
.match-panel small { display:block; margin-top:10px; color:#718276; line-height:1.4; }
.match-fields { border:0; padding:0; margin:0; min-width:0; }
.match-fields .team-filter { margin:12px 0; }
.match-fields:disabled,.team-filter:disabled { opacity:.68; }
.match-start { min-height:42px; padding:9px 15px; border-radius:9px; }
.match-result-card { padding:14px; margin:12px 0; border:1px solid #dbeadd; border-radius:14px; background:#f3faf4; }
.match-result-card h3 { margin:10px 0; }
.match-people { display:flex; flex-wrap:wrap; gap:8px; }
.match-person { display:inline-flex; align-items:center; gap:7px; padding:5px 9px; background:#fff; border-radius:999px; }
.match-actions .match-secondary { color:#9b4c32; border-color:#edd4ca; }
.match-spinner { display:inline-block; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:match-spin .8s linear infinite; }
@keyframes match-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .match-spinner { animation:none; } }
html[data-theme="dark"] .match-result-card { background:#293d2c; border-color:#435b47; }
html[data-theme="dark"] .match-person { background:#344b38; }
.match-status { flex:none; padding:6px 10px; border-radius:999px; background:#e4f6e8; color:#257544; font-size:12px; font-weight:700; }
.match-form { display:grid; grid-template-columns:minmax(0,2fr) minmax(120px,1fr) minmax(90px,.65fr); align-items:end; gap:10px; }
.match-form label { display:grid; gap:5px; min-width:0; color:#526557; font-size:12px; font-weight:700; }
.match-form input,.match-form select { width:100%; min-width:0; min-height:42px; padding:8px 10px; background:#fff; border:1px solid #dfe8df; border-radius:9px; color:#24372a; }
.match-form button,.match-actions button { min-height:42px; padding:9px 14px; border-radius:9px; }
.match-progress { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:12px; margin:8px 0; border-radius:10px; background:#edf7ef; color:#27643b; }
.match-progress [data-match-time] { font-variant-numeric:tabular-nums; }
.match-actions { display:flex; flex-wrap:wrap; gap:8px; }
.match-actions button { background:#fff; border:1px solid #dbe8dd; color:#27643b; font-weight:700; }
html[data-theme="dark"] .match-panel { background:#1c2b20; border-color:#354b39; }
html[data-theme="dark"] .match-panel p,html[data-theme="dark"] .match-panel small,html[data-theme="dark"] .match-form label { color:#b7c9ba; }
html[data-theme="dark"] .match-form input,html[data-theme="dark"] .match-form select,html[data-theme="dark"] .match-actions button { background:#27382b; color:#e4f7e8; border-color:#435b47; }
html[data-theme="dark"] .match-progress { background:#2a4130; color:#d5efda; }
@media (max-width:700px) { .match-form { grid-template-columns:repeat(2,minmax(0,1fr)); } .match-form label:first-child,.match-form button { grid-column:1 / -1; } .match-panel { padding:16px; } }
html[data-theme="dark"] .settings-nav { background:#202c24; border-color:#364a3b; }
html[data-theme="dark"] .settings-nav button { color:#c5d3c8; }
html[data-theme="dark"] .settings-nav button[aria-current="page"] { background:#294a34; color:#d7f8df; }
html[data-theme="dark"] .filter-disclosure > summary { background:#203c2a; border-color:#426a4d; color:#e0f5e5; }
html[data-theme="dark"] .filter-disclosure-hint { color:#bbd7c1; }
html[data-theme="dark"] .saved-control, html[data-theme="dark"] .saved-content-actions a, html[data-theme="dark"] .saved-content-actions button { background:#253d2c; color:#d8f3df; border-color:#46694e; }
html[data-theme="dark"] .saved-control[aria-pressed="true"] { background:#31583c; color:#e2ffea; }
html[data-theme="dark"] .streak-next { background:#294431; color:#e3f5e7; }
html[data-theme="dark"] .streak-reward-row { border-color:#425648; }
html[data-theme="dark"] .streak-reward-row small, html[data-theme="dark"] .streak-reward-row b { color:#c0d1c4; }
html[data-theme="dark"] .streak-reward-row.is-unlocked { background:#243e2d; border-color:#4b7556; }
html[data-theme="dark"] .streak-reward-row.is-unlocked b { color:#b4e8c0; }
html[data-theme="dark"] .saved-content-status { color:#f0cc8b; }
html[data-theme="dark"] .saved-focus-note { background:#203c2a; color:#e0f5e5; border-color:#426a4d; }

/* ==========================================================================
   Ultra-Compact Facebook-Style Streamlined Feed Header
   ========================================================================== */
.feed-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 6px 0 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1.5px solid #eef2ee !important;
}
.feed-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f1f5f9 !important;
  padding: 5px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
}
.feed-switch button[role="tab"] {
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.feed-switch button[role="tab"]:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
.feed-switch button[role="tab"][aria-selected="true"] {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.feed-header-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.country-scope {
  display: inline-flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  padding: 4px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  gap: 3px !important;
  margin: 0 !important;
}
.country-scope button[data-action="country-scope"] {
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}
.country-scope button[data-action="country-scope"]:hover {
  color: #0f172a !important;
}
.country-scope button[data-action="country-scope"][aria-pressed="true"] {
  background: #10b981 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.28) !important;
}
.country-scope small {
  display: none !important;
}

/* Compact Filter Disclosure Pill */
.filter-disclosure {
  margin: 4px 0 10px !important;
  min-width: 0 !important;
  width: 100% !important;
}
.filter-disclosure > summary {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  list-style: none !important;
}
.filter-disclosure > summary::-webkit-details-marker {
  display: none !important;
}
.filter-disclosure > summary:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
.filter-disclosure[open] > summary {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12) !important;
}
.filter-disclosure-hint {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}
.filter-disclosure[open] .feed-filters {
  background: #ffffff !important;
  border: 1px solid #e2ebe3 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-top: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 14px !important;
}
.feed-filters-fields {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 14px !important;
  width: 100% !important;
}
.feed-filters-fields label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  flex: 1 1 200px !important;
  min-width: 160px !important;
}
.feed-filters-fields select {
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 13px !important;
  background: #ffffff !important;
  color: #1e293b !important;
}
.feed-filters-fields button {
  padding: 9px 18px !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  align-self: flex-end !important;
}
.feed-filters-fields button:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}
.news-personalization {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  font-size: 12px !important;
  color: #475569 !important;
  background: #f8fafc !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  border: 1px solid #e2e8f0 !important;
  margin: 0 !important;
}
.news-personalization button {
  border: none !important;
  background: transparent !important;
  color: #10b981 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  text-decoration: underline !important;
  margin-left: auto !important;
}

/* Compact News Heading */
.news-heading.compact {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 4px 2px 10px !important;
  padding: 0 !important;
}
.news-heading.compact h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}
.news-heading.compact .news-status {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Post Composer (Like Facebook Create Post box) */
.post-composer.card {
  margin: 0 0 14px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  border: 1px solid #e2ebe3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
.post-composer .page-avatar {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
}
.post-composer .composer-prompt {
  flex: 1 !important;
  text-align: left !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding: 9px 18px !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
}
.post-composer .composer-prompt:hover {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

/* Dark mode overrides for streamlined feed */
html[data-theme="dark"] .feed-header-bar {
  border-color: #2e3d32 !important;
}
html[data-theme="dark"] .feed-switch {
  background: #18241b !important;
  border-color: #2e3d32 !important;
}
html[data-theme="dark"] .feed-switch button[role="tab"] {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .feed-switch button[role="tab"]:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .feed-switch button[role="tab"][aria-selected="true"] {
  background: #233427 !important;
  color: #86efac !important;
}
html[data-theme="dark"] .country-scope {
  background: #18241b !important;
  border-color: #2e3d32 !important;
}
html[data-theme="dark"] .country-scope button[data-action="country-scope"] {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .country-scope button[data-action="country-scope"][aria-pressed="true"] {
  background: #059669 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .filter-disclosure > summary {
  background: #18241b !important;
  border-color: #2e3d32 !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .filter-disclosure[open] .feed-filters {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .news-personalization {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .feed-filters-fields select {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .feed-filters-fields button {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .news-heading.compact h3 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .post-composer.card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .post-composer .composer-prompt {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* Feed navigation uses the same soft neutrals and outline icons as the header. */
.feed-header-bar { align-items:center !important; flex-wrap:nowrap !important; gap:10px 14px !important; padding:0 0 14px !important; border-color:#e4eae4 !important; }
.feed-switch, .country-scope { background:#e9eeea !important; border:1px solid #e3e9e3 !important; border-radius:12px !important; box-shadow:none !important; }
.feed-switch { flex:1 1 0; min-width:0; width:auto; margin:0 !important; }
.feed-switch button[role="tab"] { flex:1 1 auto; justify-content:center; min-width:0; min-height:42px; padding:8px 8px !important; color:#5e6c61 !important; font-size:13px !important; white-space:normal !important; text-align:center; }
.feed-switch button[role="tab"][aria-selected="true"] { color:#1c2820 !important; background:#fff !important; box-shadow:0 1px 5px #142b1a10 !important; }
.feed-header-tools { flex:0 0 auto; min-width:0; }
.country-scope { max-width:100%; }
.country-scope button[data-action="country-scope"] { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:8px 11px !important; color:#5e6c61 !important; font-size:13px !important; }
.country-scope button[data-action="country-scope"][aria-pressed="true"] { background:#fff !important; color:#217444 !important; box-shadow:0 1px 5px #142b1a10 !important; }
.feed-switch .icon,.country-scope .icon { width:17px; height:17px; flex:none; }
.country-scope small { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; display:block !important; }
.feed-switch button:focus-visible,.country-scope button:focus-visible { outline:2px solid #239c58; outline-offset:2px; }
html[data-theme="dark"] .feed-switch,html[data-theme="dark"] .country-scope { background:#27362b !important; border-color:#354b39 !important; }
html[data-theme="dark"] .feed-switch button[role="tab"],html[data-theme="dark"] .country-scope button[data-action="country-scope"] { color:#c4d1c6 !important; }
html[data-theme="dark"] .feed-switch button[role="tab"][aria-selected="true"],html[data-theme="dark"] .country-scope button[data-action="country-scope"][aria-pressed="true"] { background:#3b5141 !important; color:#e4f7e8 !important; }
html[data-theme="dark"] .country-scope small { color:#b5c8b9; }
@media (max-width:700px) {
 .feed-header-bar { flex-wrap:wrap !important; gap:8px !important; }
 .feed-switch { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); flex-basis:100%; gap:3px !important; }
 .feed-switch button[role="tab"] { min-width:0; padding:8px 4px !important; white-space:normal !important; text-align:center; }
 .feed-header-tools { width:100%; margin-left:0 !important; }
 .country-scope { display:flex !important; width:100%; }
 .country-scope button[data-action="country-scope"] { flex:1 1 0; min-width:0; }
}