:root {
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-alt: #f9f4ee;
  --surface-strong: #eef7f4;
  --line: #dfd8cc;
  --text: #264653;
  --muted: #5b6f72;
  --primary: #2A9D8F;
  --primary-strong: #264653;
  --primary-soft: #e6f5f2;
  --accent: #F4A261;
  --accent-soft: #fff1e5;
  --danger: #E76F51;
  --success: #2A9D8F;
  --warning: #E9C46A;
  --shadow: 0 16px 44px rgba(38, 70, 83, 0.08);
  --radius: 20px;
  --radius-sm: 14px;
  --topbar-height: 78px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(15,118,110,.10), transparent 24%),
    radial-gradient(circle at top left, rgba(124,58,237,.06), transparent 22%),
    linear-gradient(180deg, #f8fcfc 0%, var(--bg) 220px);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
img, video, iframe { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { transition: .2s ease; }
.site-shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216,229,232,.95);
  padding: 14px 18px 12px;
}
.brand-row, .main-nav, .actions-row, .stats-row, .search-row, .meta-row { display: flex; gap: 12px; align-items: center; }
.brand-row { justify-content: space-between; flex-wrap: wrap; }
.brand {
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  display: inline-flex; align-items: center; gap: 10px;
}
.brand::before {
  content: "";
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 5px rgba(15,118,110,.10);
}
.top-search { display: flex; gap: 8px; width: min(560px, 100%); }
.top-search input,
.search-row input,
.stack-form input,
.stack-form textarea,
.stack-form select,
.comment-form input,
.chat-form input,
.rate-form select,
.django-form input,
.django-form textarea,
.django-form select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 12px 14px;
  border-radius: 14px;
  outline: none;
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.top-search input:focus,
.search-row input:focus,
.stack-form input:focus,
.stack-form textarea:focus,
.stack-form select:focus,
.comment-form input:focus,
.chat-form input:focus,
.rate-form select:focus,
.django-form input:focus,
.django-form textarea:focus,
.django-form select:focus {
  border-color: rgba(15,118,110,.45);
  box-shadow: 0 0 0 4px rgba(15,118,110,.10);
  background: #fff;
}
.top-search button,
.btn {
  border: none;
  border-radius: 14px;
  padding: 11px 14px;
  cursor: pointer;
  background: #eef7f6;
  color: var(--text);
  font-weight: 700;
}
.btn:hover,
.top-search button:hover { transform: translateY(-1px); }
.main-nav {
  margin-top: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.main-nav a {
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 700;
}
.main-nav a:hover,
.main-nav a:focus {
  background: var(--primary-soft);
  color: var(--primary);
}
.page-wrap { width: min(1380px, calc(100% - 24px)); margin: 24px auto; }
.card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(219,228,240,.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.simple-page, .form-card { max-width: 900px; margin: 0 auto; }
.messages-stack { display: grid; gap: 10px; margin-bottom: 16px; }
.flash { padding: 12px 14px; border-radius: 14px; }
.flash-success { background: #ecfdf5; color: #047857; }
.flash-error { background: #fef2f2; color: #b91c1c; }
.flash-info { background: #eff6ff; color: #1d4ed8; }
.flash-warning { background: #fffbeb; color: #b45309; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.auth-shell { min-height: calc(100vh - 180px); display: grid; place-items: center; }
.auth-card { width: min(460px, 100%); }
.stack-form { display: grid; gap: 14px; }
.stack-form label, .field-label { display: grid; gap: 8px; font-weight: 700; }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
}
.btn-danger { background: var(--danger); color: #fff; }
.btn-small { padding: 8px 10px; font-size: .9rem; }
.btn-ghost { background: var(--surface-alt); }
.feed-layout, .grid-two, .messages-layout { display: grid; gap: 18px; }
.feed-layout { grid-template-columns: 280px minmax(0, 1fr) 280px; align-items: start; }
.grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-two.equal > * { min-width: 0; }
.main-column { display: grid; gap: 18px; }
.side-column { display: block; }
.sticky-box { position: sticky; top: 112px; }
.shortcut-list { display: grid; gap: 10px; }
.shortcut-list a {
  background: var(--surface-alt);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
}
.shortcut-list a:hover { background: var(--primary-soft); color: var(--primary); }
.composer {
  overflow: hidden;
  position: relative;
}
.composer::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), #14b8a6, var(--accent));
}
.composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.composer-title h1 { margin: 0 0 4px; font-size: 1.3rem; }
.composer-title p { margin: 0; color: var(--muted); }
.composer .stack-form { gap: 16px; }
.composer textarea {
  min-height: 132px;
  resize: vertical;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.upload-box {
  border: 1px dashed rgba(15,118,110,.28);
  background: linear-gradient(180deg, #f8fffe, #f3fbfa);
  border-radius: 16px;
  padding: 14px;
}
.upload-box span { font-size: .8rem; color: var(--muted); }
.grid-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.compact { align-items: end; }
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  display: inline-flex;
  padding: 9px 12px;
  background: var(--surface-alt);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
}
.pill.active { background: var(--primary-soft); color: var(--primary); }
.between { justify-content: space-between; }
.post-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
}
.post-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.author-block {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  flex: 0 0 48px;
}
.author-meta {
  display: grid;
  gap: 4px;
}
.author-meta strong { font-size: 1rem; }
.visibility-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}
.post-content {
  margin: 0;
  line-height: 1.9;
  font-size: 1rem;
}
.post-media-stack { display: grid; gap: 12px; }
.media-frame {
  border-radius: 18px;
  overflow: hidden;
  background: #091222;
  border: 1px solid rgba(15,23,42,.08);
}
.image-frame {
  background:
    linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.06)),
    repeating-linear-gradient(45deg, #eef2f7, #eef2f7 10px, #f8fafc 10px, #f8fafc 20px);
}
.image-frame img {
  width: 100%;
  height: auto;
  max-height: 660px;
  object-fit: contain;
  margin: 0 auto;
}
.media-frame video,
.media-frame iframe {
  width: 100%;
  max-height: 620px;
  border: 0;
}
.ratio-video { aspect-ratio: 16/9; }
.file-box, .card-muted {
  padding: 14px;
  background: var(--surface-alt);
  border-radius: 14px;
}
.file-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
}
.file-link span:last-child { color: var(--primary); }
.post-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.stat-pack,
.engagement-pack { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}
.post-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.post-actions-grid > * { min-width: 0; }
.reaction-wrap { position: relative; }
.reaction-main,
.action-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.reaction-menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  display: none;
  z-index: 30;
}
.reaction-wrap.open .reaction-menu { display: grid; gap: 6px; }
.reaction-menu button {
  width: 100%;
  text-align: start;
  border: none;
  background: var(--surface-alt);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
.reaction-menu button:hover { background: var(--primary-soft); color: var(--primary); }
.comment-form, .rate-form, .chat-form { display: flex; gap: 10px; align-items: center; }
.comment-form input, .chat-form input { flex: 1; }
.rate-row,
.comment-box {
  background: #fbfcff;
  border: 1px solid rgba(216,225,238,.85);
  border-radius: 16px;
  padding: 14px;
}
.rate-form label {
  font-weight: 700;
  color: var(--muted);
}
.comments-list, .list-blocks, .mini-cards { display: grid; gap: 10px; }
.comment-item, .list-row, .mini-card {
  background: var(--surface-alt);
  border-radius: 14px;
  padding: 12px;
}
.comment-item { line-height: 1.8; }
.list-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.list-row.vertical { display: grid; justify-content: start; }
.profile-cover { display: grid; gap: 18px; }
.profile-head-grid { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.profile-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.profile-stats div { min-width: 100px; background: var(--surface-alt); border-radius: 14px; padding: 14px; text-align: center; }
.messages-layout { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.conversations-panel, .chat-panel { min-height: 65vh; }
.conversation-link {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-alt);
  margin-bottom: 10px;
}
.conversation-link.active { background: var(--primary-soft); }
.badge {
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
}
.messages-thread { display: grid; gap: 10px; max-height: 55vh; overflow: auto; padding: 8px 0; }
.bubble { max-width: 75%; padding: 12px 14px; border-radius: 16px; background: var(--surface-alt); }
.bubble.mine { margin-inline-start: auto; background: var(--primary); color: #fff; }
.bubble-meta { font-size: .78rem; opacity: .75; margin-bottom: 4px; }
.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background: linear-gradient(180deg, #fbfdff, #f5f8fd);
  border-radius: 18px;
}
.highlight-row { border: 1px solid var(--primary-soft); background: #f8fbff; }
.mini-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.watch-shell { display: grid; gap: 18px; }
.django-form p { display: grid; gap: 8px; }
.django-form input, .django-form textarea, .django-form select { width: 100%; }
.section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.section-title h2,
.section-title h3 { margin: 0; }
.dot-divider { width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; }
@media (max-width: 1120px) {
  .feed-layout { grid-template-columns: 1fr; }
  .side-column { order: 2; }
  .sticky-box { position: static; }
}
@media (max-width: 900px) {
  .grid-two, .messages-layout, .grid-three, .upload-grid { grid-template-columns: 1fr; }
  .post-actions-grid { grid-template-columns: 1fr; }
  .list-row, .brand-row, .comment-form, .chat-form, .actions-row.between, .post-stats { flex-direction: column; align-items: stretch; }
  .profile-head-grid, .composer-head { flex-direction: column; align-items: stretch; }
  .page-wrap { width: min(100% - 16px, 1380px); }
  .topbar { padding-inline: 12px; }
  .main-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .main-nav a { white-space: nowrap; }
  .reaction-menu { inset-inline: 0; min-width: auto; }
}
@media (max-width: 640px) {
  .card { padding: 14px; border-radius: 18px; }
  .page-wrap { margin-top: 16px; }
  .top-search { width: 100%; }
  .top-search button { flex: 0 0 auto; }
  .author-block { align-items: flex-start; }
  .avatar { width: 42px; height: 42px; flex-basis: 42px; }
  .post-content { font-size: .96rem; }
  .comment-form .btn, .chat-form .btn { width: 100%; }
}


.chat-header-polished {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.messages-layout-polished { grid-template-columns: 360px minmax(0, 1fr); }
.conversations-list { display: grid; gap: 10px; }
.conversation-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 0;
  border: 1px solid transparent;
}
.conversation-link:hover { border-color: rgba(37,99,235,.18); }
.conversation-link.active {
  background: linear-gradient(180deg, #eef5ff, #e8f1ff);
  border-color: rgba(37,99,235,.18);
}
.conversation-avatar { width: 44px; height: 44px; flex-basis: 44px; }
.conversation-main { min-width: 0; }
.conversation-main p { margin: 4px 0 0; color: var(--muted); }
.conversation-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.conversation-side { display: flex; align-items: center; }
.messages-thread-polished {
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
  border: 1px solid rgba(216,225,238,.8);
  border-radius: 18px;
  padding: 14px;
}
.chat-form-polished {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.bubble.theirs {
  border-top-inline-start-radius: 6px;
}
.bubble.mine {
  border-top-inline-end-radius: 6px;
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}
.profile-cover-polished { overflow: hidden; position: relative; }
.profile-banner {
  height: 120px;
  margin: -18px -18px 0;
  background: linear-gradient(135deg, rgba(37,99,235,.9), rgba(96,165,250,.75));
}
.profile-head-grid-polished {
  margin-top: -30px;
  position: relative;
  z-index: 2;
}
.profile-main-block { display: grid; gap: 12px; }
.profile-identity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.profile-avatar-lg {
  width: 84px;
  height: 84px;
  flex-basis: 84px;
  border: 4px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
}
.profile-bio {
  margin: 0;
  line-height: 1.9;
  max-width: 760px;
}
.profile-stats-polished div {
  min-width: 120px;
  background: linear-gradient(180deg, #f8fbff, #eef4ff);
}
.profile-actions-row { flex-wrap: wrap; }
.profile-sections-grid { margin-top: 18px; }
.profile-post-row p { margin: 6px 0 0; line-height: 1.8; }
.notifications-card { display: grid; gap: 14px; }
.notifications-head { margin-bottom: 0; }
.notifications-list { gap: 12px; }
.notification-row {
  align-items: center;
  border: 1px solid transparent;
}
.notification-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}
@media (max-width: 900px) {
  .chat-header-polished,
  .conversation-topline,
  .notification-row,
  .notification-main,
  .profile-identity-row { flex-direction: column; align-items: stretch; }
  .messages-layout-polished { grid-template-columns: 1fr; }
  .conversation-link { grid-template-columns: auto minmax(0, 1fr); }
  .conversation-side { justify-content: flex-start; }
}

.card-soft {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,251,255,.92));
  border: 1px solid rgba(216,225,238,.9);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  padding: 16px 18px;
}
.topbar-grid {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.brand-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  gap: 12px;
}
.brand::before { display: none; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1d4ed8, #60a5fa);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(37,99,235,.2);
}
.brand strong { display: block; }
.brand small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.menu-toggle,
.menu-close {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  display: none;
}
.top-search-polished {
  position: relative;
  align-items: center;
  background: rgba(247,250,255,.95);
  padding: 6px;
  border: 1px solid rgba(216,225,238,.9);
  border-radius: 16px;
}
.top-search-polished input {
  border: none;
  background: transparent;
  padding-inline-start: 36px;
}
.top-search-polished input:focus {
  box-shadow: none;
  background: transparent;
}
.search-icon {
  position: absolute;
  inset-inline-start: 16px;
  color: var(--muted);
  pointer-events: none;
}
.top-quick-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(248,250,255,.92);
  border: 1px solid rgba(216,225,238,.9);
  border-radius: 14px;
  color: var(--muted);
  font-weight: 800;
}
.quick-pill:hover,
.quick-pill-notify:hover {
  color: var(--primary);
  border-color: rgba(37,99,235,.18);
  background: var(--primary-soft);
}
.quick-pill-accent {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: var(--primary);
}
.count-badge,
.mini-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
}
.main-nav a.is-active,
.mobile-bottom-nav a.is-active {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(96,165,250,.15));
  color: var(--primary);
}
.welcome-ribbon {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}
.welcome-ribbon::after {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  inset-block-start: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,.18), transparent 68%);
}
.ribbon-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-shell-split {
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .9fr);
  gap: 22px;
  align-items: stretch;
}
.auth-side-panel {
  display: grid;
  gap: 16px;
  align-content: center;
  min-height: 560px;
}
.auth-side-gradient {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(135deg, rgba(29,78,216,.98), rgba(96,165,250,.84));
  color: #fff;
  border: none;
}
.auth-side-gradient.alt {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, rgba(3,105,161,.98), rgba(14,165,233,.78));
}
.auth-side-gradient .muted,
.auth-side-gradient p,
.auth-side-gradient li,
.auth-side-gradient .mini-card p { color: rgba(255,255,255,.88); }
.eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: inherit;
  font-weight: 800;
  font-size: .78rem;
}
.auth-card-polished {
  align-self: center;
  width: min(520px, 100%);
  border: 1px solid rgba(216,225,238,.95);
}
.auth-card-polished h2 { margin: 8px 0 6px; }
.auth-form-polished input {
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.auth-footer-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.auth-feature-grid .mini-card,
.auth-points {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.auth-points {
  margin: 0;
  padding: 14px 18px;
  border-radius: 18px;
  display: grid;
  gap: 10px;
}
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.38);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 70;
}
.mobile-drawer.open { display: block; }
.mobile-drawer-panel {
  width: min(86vw, 360px);
  height: 100%;
  background: #fff;
  padding: 18px;
  box-shadow: -12px 0 40px rgba(15,23,42,.16);
}
.mobile-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}
.mobile-drawer-links {
  display: grid;
  gap: 10px;
}
.mobile-drawer-links a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-alt);
  font-weight: 700;
}
.mobile-bottom-nav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(216,225,238,.9);
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mobile-bottom-nav a {
  padding: 10px 6px 12px;
  display: grid;
  place-items: center;
  gap: 4px;
  position: relative;
  color: var(--muted);
  font-weight: 800;
  font-size: .72rem;
}
.mobile-bottom-nav a span { font-size: 1rem; }
.mobile-bottom-nav .mini-count {
  position: absolute;
  top: 6px;
  inset-inline-start: 50%;
  transform: translateX(-18px);
}
@media (max-width: 1180px) {
  .topbar-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .top-quick-actions { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .welcome-ribbon,
  .auth-shell-split {
    grid-template-columns: 1fr;
  }
  .auth-side-panel { min-height: auto; }
}
@media (max-width: 760px) {
  .menu-toggle,
  .menu-close,
  .mobile-bottom-nav { display: grid; place-items: center; }
  .main-nav,
  .top-quick-actions { display: none; }
  .page-wrap { padding-bottom: 80px; }
  .welcome-ribbon { align-items: stretch; flex-direction: column; }
  .brand small { display: none; }
}


.composer-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .86rem;
  font-weight: 700;
}
.comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.comment-item span {
  word-break: break-word;
}


/* ==== we talk phase 2 ==== */
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 12px 24px rgba(15, 118, 110, .18);
}
.brand-cluster, .top-quick-actions, .ribbon-actions, .wrap-actions { display:flex; gap:12px; align-items:center; }
.brand strong { display:block; font-size:1.1rem; }
.brand small { display:block; color:var(--muted); font-size:.78rem; font-weight:700; }
.brand::before { display:none; }
.topbar-grid { display:grid; grid-template-columns: minmax(220px, auto) minmax(280px, 1fr) auto; gap:16px; align-items:center; }
.top-search-polished { position:relative; }
.top-search-polished .search-icon { position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.top-search-polished input { padding-inline-start:38px; }
.quick-pill { padding:10px 14px; background:var(--surface-alt); border-radius:999px; font-weight:800; display:inline-flex; gap:8px; align-items:center; }
.quick-pill-accent { background:linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); color:var(--text); }
.quick-pill-notify { position:relative; }
.count-badge, .mini-count {
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--danger); color:#fff; font-size:.72rem; font-weight:800;
}
.main-nav a.is-active, .mobile-bottom-nav a.is-active { background:linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); color:var(--primary); }
.card-soft { background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(124,58,237,.05)); border:1px solid rgba(15,118,110,.12); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.brand-hero-ribbon { display:flex; justify-content:space-between; gap:18px; align-items:center; }
.section-title { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
.section-title h1, .section-title h2, .section-title h3 { margin:0; }
.compact-title { margin-bottom:12px; }
.side-feature-card, .side-stats-card, .trend-card, .entity-posts-card, .entity-hero-card { overflow:hidden; }
.rich-shortcuts a { display:grid; gap:4px; }
.rich-shortcuts a strong { font-size:.96rem; }
.rich-shortcuts a span { color:var(--muted); font-size:.84rem; font-weight:600; }
.stats-mini-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.stats-mini-grid > div { background:var(--surface-alt); border-radius:16px; padding:14px; display:grid; gap:4px; }
.stats-mini-grid strong { font-size:1.2rem; }
.stats-mini-grid span { color:var(--muted); font-size:.82rem; font-weight:700; }
.composer-premium { padding:22px; }
.enhanced-composer-head { margin-bottom:16px; }
.composer-form-v2 textarea { min-height:140px; }
.unified-upload-box {
  border:1px dashed rgba(15,118,110,.28);
  background:linear-gradient(180deg, #f9fffe, #f5fbff);
  border-radius:18px;
  padding:16px;
  display:grid;
  gap:14px;
}
.unified-upload-top { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.unified-upload-top p { margin:4px 0 0; }
.unified-upload-actions { display:flex; gap:10px; flex-wrap:wrap; }
.media-chip-button, .preview-chip {
  border:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.media-chip-button:hover { background:var(--primary-soft); color:var(--primary); }
.composer-preview { display:flex; gap:10px; flex-wrap:wrap; }
.preview-chip { background:linear-gradient(135deg, var(--primary-soft), #fff); cursor:default; }
.hidden-upload-inputs input { display:none; }
.composer-submit-row { margin-top:4px; }
.info-banner-v2 { background:linear-gradient(135deg, rgba(15,118,110,.08), rgba(124,58,237,.04)); border-color:rgba(15,118,110,.12); }
.trend-list { margin:0; padding-inline-start:18px; display:grid; gap:10px; color:var(--muted); font-weight:700; }
.post-card { border:1px solid rgba(15,118,110,.10); }
.post-card .post-content { margin:0; line-height:1.9; font-size:1.02rem; }
.media-frame, .file-box { border-radius:18px; overflow:hidden; }
.media-frame { background:#0b1120; }
.file-box { background:var(--surface-alt); padding:14px; }
.author-link:hover { color:var(--primary); }
.page-badge { background:rgba(124,58,237,.10); color:var(--accent); }
.group-badge { background:rgba(15,118,110,.10); color:var(--primary); }
.mobile-drawer {
  position:fixed; inset:0; background:rgba(16,32,51,.35); opacity:0; visibility:hidden; transition:.2s ease; z-index:70;
}
.mobile-drawer.open { opacity:1; visibility:visible; }
.mobile-drawer-panel {
  width:min(340px, 92vw); height:100%; background:#fff; box-shadow:-12px 0 30px rgba(16,32,51,.15); margin-inline-start:auto; padding:20px; display:grid; align-content:start; gap:16px;
}
.mobile-drawer-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.menu-toggle, .menu-close {
  border:none; background:var(--surface-alt); width:40px; height:40px; border-radius:12px; cursor:pointer; font-size:1.2rem;
}
.mobile-drawer-links { display:grid; gap:10px; }
.mobile-drawer-links a { padding:12px 14px; border-radius:14px; background:var(--surface-alt); font-weight:700; }
.mobile-bottom-nav {
  position:sticky; bottom:0; display:none; grid-template-columns:repeat(5, 1fr); gap:8px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:10px 12px; z-index:40;
}
.mobile-bottom-nav a { position:relative; border-radius:14px; padding:10px 6px; display:grid; place-items:center; gap:4px; color:var(--muted); font-weight:800; font-size:.8rem; }
.mobile-bottom-nav a span { font-size:1.1rem; }
@media (max-width: 1100px) {
  .feed-layout { grid-template-columns: 1fr; }
  .side-column { display:grid; gap:16px; }
  .sticky-box { position:static; }
  .topbar-grid { grid-template-columns: 1fr; }
  .brand-row { align-items:stretch; }
}
@media (max-width: 768px) {
  .brand-hero-ribbon, .unified-upload-top, .enhanced-composer-head { grid-template-columns:1fr; display:grid; }
  .grid-two, .grid-three, .stats-mini-grid { grid-template-columns:1fr; }
  .main-nav { display:none; }
  .mobile-bottom-nav { display:grid; }
  .top-quick-actions { display:none; }
}


/* ===== Phase 3 visual polish ===== */
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(14,165,233,.10), transparent 22%),
    radial-gradient(circle at 88% 0%, rgba(124,58,237,.10), transparent 20%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 280px, #eef3f8 100%);
}

.topbar {
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.topbar-grid,
.brand-cluster,
.top-quick-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar-grid { justify-content: space-between; }
.brand-cluster { min-width: 0; }
.top-search-polished {
  flex: 1 1 520px;
  max-width: 680px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  padding: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.top-search-polished input {
  border: none;
  background: transparent;
  min-width: 0;
}
.top-search-polished input:focus { box-shadow: none; }
.search-icon {
  color: #64748b;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
}
.brand {
  gap: 12px;
}
.brand::before { display:none; }
.brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 12px 24px rgba(37,99,235,.22);
}
.brand strong {
  display:block;
  font-size: 1.9rem;
  line-height: 1;
  color: #2563eb;
}
.brand small {
  display:block;
  margin-top: 4px;
  color: #475569;
  font-size: .92rem;
}
.quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  padding: 11px 16px;
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #334155;
  font-weight: 800;
}
.quick-pill-notify { background: linear-gradient(180deg, #fff9e9, #fff4cd); }
.quick-pill-accent {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  border: none;
}
.count-badge {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background:#ef4444;
  color:#fff;
  font-size:.76rem;
  font-weight:800;
}
.main-nav {
  gap: 10px;
  border-top: 1px solid rgba(226,232,240,.8);
  margin-top: 14px;
  padding-top: 14px;
}
.main-nav a {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(148,163,184,.14);
}
.main-nav a.is-active,
.main-nav a:hover,
.main-nav a:focus {
  background: linear-gradient(135deg, #dbeafe, #ede9fe);
  color: #1d4ed8;
  border-color: rgba(59,130,246,.18);
}

.polished-feed-layout {
  grid-template-columns: 290px minmax(0, 1fr) 290px;
  gap: 20px;
}
.side-column,
.main-column,
.side-column > *,
.main-column > * { min-width: 0; }

.feed-welcome-band {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.10), rgba(14,165,233,.06));
}
.hero-copy h2 {
  margin: 0 0 8px;
  font-size: 1.8rem;
}
.hero-copy p {
  margin: 0;
  line-height: 1.9;
  color: #475569;
}
.hero-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.hero-metrics {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.hero-metric {
  padding: 16px;
  border-radius: 18px;
  color: #0f172a;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.78);
}
.hero-metric strong {
  display:block;
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.hero-metric:nth-child(1){background:linear-gradient(135deg,#dbeafe,#eff6ff);}
.hero-metric:nth-child(2){background:linear-gradient(135deg,#ede9fe,#f5f3ff);}
.hero-metric:nth-child(3){background:linear-gradient(135deg,#dcfce7,#f0fdf4);}
.hero-metric:nth-child(4){background:linear-gradient(135deg,#fff7ed,#fffbeb);}

.side-feature-card,
.side-stats-card,
.trend-card,
.composer-premium,
.info-banner-v2 {
  border: 1px solid rgba(203,213,225,.6);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
}
.side-feature-card { background: linear-gradient(180deg, #ffffff, #f8fbff); }
.side-stats-card { background: linear-gradient(180deg, #ffffff, #f8faff); }
.trend-card { background: linear-gradient(180deg, #ffffff, #faf8ff); }
.info-banner-v2 {
  color: #334155;
  line-height: 1.8;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}
.compact-title { margin-bottom: 14px; }
.compact-title h3 { font-size: 1.5rem; }
.section-title .pill,
.compact-title .pill { flex-shrink: 0; }

.shortcut-list a {
  display: grid;
  gap: 6px;
  line-height: 1.55;
  border: 1px solid transparent;
}
.shortcut-list a strong,
.shortcut-list a span {
  display: block;
}
.shortcut-list a span {
  color: #5b6779;
  font-size: .94rem;
  font-weight: 600;
}
.rich-shortcuts a:nth-child(1) { background: linear-gradient(135deg, #eff6ff, #f8fbff); border-color: rgba(59,130,246,.16); }
.rich-shortcuts a:nth-child(2) { background: linear-gradient(135deg, #f5f3ff, #faf8ff); border-color: rgba(124,58,237,.16); }
.rich-shortcuts a:nth-child(3) { background: linear-gradient(135deg, #ecfeff, #f4fdff); border-color: rgba(8,145,178,.16); }
.rich-shortcuts a:nth-child(4) { background: linear-gradient(135deg, #fffbeb, #fffdf4); border-color: rgba(217,119,6,.16); }
.rich-shortcuts a:nth-child(5) { background: linear-gradient(135deg, #f0fdf4, #f7fff9); border-color: rgba(22,163,74,.16); }
.rich-shortcuts a:nth-child(6) { background: linear-gradient(135deg, #fff1f2, #fff8f9); border-color: rgba(225,29,72,.16); }

.stats-mini-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.stats-mini-grid > div {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(148,163,184,.16);
}
.stats-mini-grid strong {
  display:block;
  font-size:1.2rem;
  margin-bottom:4px;
  color:#1d4ed8;
}
.stats-mini-grid span {
  color:#64748b;
  font-size:.9rem;
}

.enhanced-composer-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(226,232,240,.86);
  margin-bottom: 16px;
}
.composer-title h1 { font-size: 2rem; }
.composer-title p { font-size: 1rem; line-height: 1.8; }
.composer-premium textarea {
  border-radius: 18px;
  min-height: 150px;
  line-height: 1.9;
}
.unified-upload-box {
  border: 1px dashed rgba(59,130,246,.26);
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}
.unified-upload-top {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom: 14px;
}
.unified-upload-top strong {
  display:block;
  font-size:1.05rem;
  margin-bottom:4px;
}
.unified-upload-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.media-chip-button {
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  cursor:pointer;
}
.media-chip-button[data-uploader-kind="image"] { background:#dbeafe; color:#1d4ed8; }
.media-chip-button[data-uploader-kind="video"] { background:#ede9fe; color:#6d28d9; }
.media-chip-button[data-uploader-kind="pdf"] { background:#fee2e2; color:#b91c1c; }
.composer-preview {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.preview-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:9px 14px;
  font-size:.9rem;
  font-weight:800;
  background:#eef2ff;
  color:#4338ca;
}
.preview-chip[data-preview-chip="image"] { background:#dbeafe; color:#1d4ed8; }
.preview-chip[data-preview-chip="video"] { background:#ede9fe; color:#6d28d9; }
.preview-chip[data-preview-chip="pdf"] { background:#fee2e2; color:#b91c1c; }
.preview-chip[data-preview-chip="video_url"] { background:#dcfce7; color:#166534; }
.composer-submit-row { align-items: center; }

.post-card {
  border: 1px solid rgba(203,213,225,.65);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}
.post-head,
.author-block,
.author-meta,
.post-content,
.file-link,
.list-row,
.section-title,
.comment-item,
.empty-state { min-width: 0; }
.author-meta strong,
.author-meta small,
.author-meta div,
.file-link,
.post-content {
  overflow-wrap:anywhere;
  word-break:break-word;
}
.post-actions-grid .btn,
.post-actions-grid .action-btn,
.post-actions-grid .reaction-main {
  min-height: 44px;
  border-radius: 14px;
}
.trend-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap:10px;
}
.trend-list li {
  padding:12px 14px;
  border-radius:14px;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border:1px solid rgba(148,163,184,.14);
  line-height:1.7;
}
.trend-list li:nth-child(1){border-inline-start:4px solid #2563eb;}
.trend-list li:nth-child(2){border-inline-start:4px solid #7c3aed;}
.trend-list li:nth-child(3){border-inline-start:4px solid #0f766e;}

.wrap-actions { flex-wrap: wrap; }
.entity-hero-card,
.entity-posts-card {
  background: linear-gradient(180deg, #ffffff, #fafcff);
}

@media (max-width: 1200px) {
  .polished-feed-layout { grid-template-columns: 1fr; }
  .side-column { order: 2; }
  .sticky-box { position: static; }
  .feed-welcome-band { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .topbar-grid,
  .top-quick-actions,
  .brand-cluster,
  .unified-upload-top,
  .composer-submit-row { flex-direction: column; align-items: stretch; }
  .top-search-polished { max-width: none; }
  .stats-mini-grid,
  .hero-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .brand strong { font-size: 1.55rem; }
  .brand-mark { width: 44px; height: 44px; }
  .composer-title h1 { font-size: 1.55rem; }
  .compact-title h3 { font-size: 1.2rem; }
  .media-chip-button,
  .quick-pill,
  .main-nav a { justify-content: center; }
}


.main-nav a.is-active,
.mobile-bottom-nav a.is-active {
  background: linear-gradient(135deg, rgba(15,118,110,.16), rgba(124,58,237,.14));
  color: var(--text);
}

.list-row, .job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f9fbff);
  border: 1px solid rgba(216,229,232,.9);
}
.list-row + .list-row, .job-row + .job-row { margin-top: 12px; }
.job-row:hover {
  border-color: rgba(15,118,110,.22);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(16, 32, 51, .06);
}

.professional-shell { display: grid; gap: 18px; }
.pro-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr);
  gap: 20px;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(15,118,110,.14), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.pro-hero-copy h1, .pro-hero-copy h2 { margin: 10px 0 8px; font-size: 1.9rem; }
.pro-hero-copy p { margin: 0; color: var(--muted); line-height: 1.9; }
.pro-hero-side {
  display: grid;
  gap: 16px;
  justify-items: center;
}
.completion-ring {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(var(--primary) 0 45%, var(--accent) 45% 78%, #dce9f2 78% 100%);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.92), 0 20px 40px rgba(16,32,51,.10);
}
.completion-ring strong { display: block; font-size: 1.8rem; color: var(--text); }
.completion-ring span { color: var(--muted); font-weight: 700; }
.completion-ring.small-ring { width: 128px; height: 128px; }
.hero-status-grid {
  display: grid;
  gap: 10px;
  width: 100%;
}
.status-chip {
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(216,229,232,.95);
  color: var(--muted);
  font-weight: 700;
}
.status-chip.status-on { background: rgba(15,118,110,.12); color: var(--primary); }
.status-chip.status-on.alt { background: rgba(124,58,237,.12); color: var(--accent); }
.status-chip.status-on.soft { background: rgba(59,130,246,.10); color: #1d4ed8; }
.pro-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.metric-card {
  min-height: 110px;
  border-radius: 20px;
  padding: 18px;
  color: #fff;
  box-shadow: 0 18px 38px rgba(16,32,51,.10);
  display: grid;
  align-content: center;
  gap: 8px;
}
.metric-card strong { font-size: 2rem; }
.metric-card span { font-weight: 700; opacity: .95; }
.metric-card-primary { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.metric-card-accent { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.metric-card-success { background: linear-gradient(135deg, #0ea5a4, #22c55e); }
.metric-card-warm { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.profile-focus-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.avatar-lg { width: 68px; height: 68px; font-size: 1.3rem; flex-basis: 68px; }
.profile-focus-copy { min-width: 0; }
.profile-focus-copy h2 { margin: 0 0 8px; }
.profile-headline { font-weight: 700; color: var(--text); line-height: 1.8; }
.mini-tags, .skills-cloud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mini-tags span, .skills-cloud span, .job-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
}
.mini-tags span { background: rgba(15,118,110,.10); color: var(--primary); }
.skills-cloud span {
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(15,118,110,.10));
  color: var(--text);
}
.profile-summary-block + .profile-summary-block { margin-top: 18px; }
.profile-summary-block h4 { margin: 0 0 10px; }
.profile-summary-block p { margin: 0; line-height: 1.95; }
.pro-check-list {
  display: grid;
  gap: 12px;
}
.check-item {
  border: 1px solid rgba(216,229,232,.95);
  background: linear-gradient(180deg, #fff, #f8fbff);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 6px;
}
.check-item span { color: var(--muted); line-height: 1.8; }
.career-cta-box {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.job-stack { display: grid; gap: 12px; }
.pro-job-row { text-decoration: none; }
.job-type-badge {
  background: rgba(124,58,237,.12);
  color: var(--accent);
  white-space: nowrap;
}
.job-type-badge.subtle {
  background: rgba(15,118,110,.12);
  color: var(--primary);
}
.jobs-filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(180px, .8fr) auto;
  gap: 14px;
  align-items: end;
}
.jobs-filter-form label {
  display: grid;
  gap: 8px;
  font-weight: 700;
}
.featured-jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.featured-job-card {
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #f6fbff);
}
.featured-job-card h3 { margin: 0; }
.featured-job-card p { margin: 0; line-height: 1.85; }
.wide-job-stack .job-row.wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.job-row-main, .job-row-side { min-width: 0; display: grid; gap: 6px; }
.job-row-side { justify-items: end; }
.job-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 360px;
  gap: 18px;
  align-items: start;
}
.job-detail-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.job-detail-top h1 { margin: 10px 0 8px; }
.job-highlight-box {
  min-width: 130px;
  text-align: center;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(124,58,237,.10));
}
.job-highlight-box strong { display: block; font-size: 1.8rem; }
.job-highlight-box span { color: var(--muted); font-weight: 700; }
.job-detail-body h3 { margin-top: 0; }
.rich-copy { line-height: 2; word-break: break-word; }
.pro-form-card p { line-height: 1.9; }
.pro-form-grid p { margin: 0; }

@media (max-width: 1100px) {
  .pro-stats-grid, .featured-jobs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-detail-grid, .pro-hero, .jobs-filter-form { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .pro-stats-grid, .featured-jobs-grid, .grid-two.equal { grid-template-columns: 1fr; }
  .profile-focus-head, .job-detail-top, .wide-job-stack .job-row.wide { grid-template-columns: 1fr; display: grid; }
  .job-row-side { justify-items: start; }
}


/* Phase 5: freelancer marketplace */
.btn-accent { background: linear-gradient(135deg, var(--accent), #9333ea); color: #fff; }
.wrap-actions { flex-wrap: wrap; }
.pro-hero-split { overflow: hidden; }
.pro-hero-side-grid { display: grid; gap: 14px; align-content: start; }
.freelance-promo-box {
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(15,118,110,.08));
  border: 1px solid rgba(124,58,237,.16);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 6px;
  text-align: center;
}
.pro-stats-grid-extended { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric-card-dark { background: linear-gradient(180deg, #1f2937, #111827); color: #fff; }
.metric-card-soft { background: linear-gradient(180deg, #f3e8ff, #ede9fe); color: #5b21b6; }
.marketplace-card {
  background: linear-gradient(180deg, #fff, #faf7ff);
  border-color: rgba(124,58,237,.18);
}
.service-row .job-type-badge,
.accent-badge {
  background: var(--accent-soft);
  color: var(--accent);
}
.service-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.service-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(91,33,182,.10);
  border-color: rgba(124,58,237,.24);
}
.service-card-top,
.service-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.service-meta-row {
  color: var(--muted);
  font-size: .88rem;
}
.service-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,118,110,.10);
  color: var(--primary);
  font-weight: 800;
}
.featured-service-card { border-color: rgba(124,58,237,.18); }
.services-hero {
  background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(15,118,110,.04));
}
.accent-ring {
  box-shadow: inset 0 0 0 10px rgba(124,58,237,.08);
}
.service-pricing-box {
  min-width: 180px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #faf5ff, #f5f3ff);
  border: 1px solid rgba(124,58,237,.16);
  text-align: center;
  display: grid;
  gap: 6px;
}
.service-pricing-box strong { font-size: 1.4rem; color: var(--accent); }
.compact-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jobs-filter-form, .job-detail-top, .service-detail-top { gap: 14px; }

@media (max-width: 1200px) {
  .pro-stats-grid-extended { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pro-stats-grid-extended,
  .service-list-grid,
  .compact-services-grid { grid-template-columns: 1fr; }
}

/* Phase 9 safety alerts */
.system-alert{margin-bottom:16px;padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.45)}
.system-alert strong{display:block;margin-bottom:6px;font-size:1.05rem}
.warning-alert{background:linear-gradient(135deg,rgba(255,244,214,.95),rgba(255,232,191,.92));color:#6b4b00;border-color:rgba(196,140,0,.25)}
.subtle-alert{background:linear-gradient(135deg,rgba(235,243,255,.9),rgba(245,247,255,.95));color:#274472;border-color:rgba(89,119,189,.18)}


/* Phase 11 stability + palette refresh */
:root {
  --bg: #f6f8f6;
  --surface: #ffffff;
  --surface-alt: #f8faf9;
  --surface-strong: #eef6f3;
  --line: #d7e3df;
  --text: #264653;
  --muted: #55727c;
  --primary: #2a9d8f;
  --primary-strong: #1f7f73;
  --primary-soft: #e7f6f3;
  --accent: #e76f51;
  --accent-soft: #fde9e3;
  --warning: #e9c46a;
  --success: #2a9d8f;
  --shadow: 0 14px 34px rgba(38, 70, 83, 0.08);
}
body {
  background:
    radial-gradient(circle at top right, rgba(42,157,143,.10), transparent 24%),
    radial-gradient(circle at top left, rgba(233,196,106,.10), transparent 20%),
    linear-gradient(180deg, #fffdfa 0%, var(--bg) 240px);
}
.topbar {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(215,227,223,.95);
}
.brand::before {
  background: linear-gradient(135deg, #264653, #2a9d8f 45%, #e9c46a 72%, #f4a261 86%, #e76f51 100%);
  box-shadow: 0 0 0 5px rgba(42,157,143,.10);
}
.btn-primary {
  background: linear-gradient(135deg, #264653 0%, #2a9d8f 42%, #f4a261 78%, #e76f51 100%);
}
.main-nav a:hover,
.main-nav a:focus,
.shortcut-list a:hover,
.pill.active {
  background: linear-gradient(135deg, rgba(42,157,143,.15), rgba(233,196,106,.18));
  color: var(--text);
}
.card {
  border: 1px solid rgba(215,227,223,.98);
}
.feed-layout { grid-template-columns: 250px minmax(0, 1fr) 250px; }
.hero-metrics,
.stats-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hero-metric,
.stats-mini-grid > div {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.post-head,
.author-block,
.author-meta,
.hero-copy,
.section-title,
.shortcut-list a,
.trend-list li,
.unified-upload-top,
.unified-actions-bar,
.comments-list,
.comment-item,
.service-card,
.job-card,
.professional-summary,
.metric-card,
.quick-stat,
.info-banner-v2,
.feed-info-banner,
.feed-welcome-band,
.side-feature-card,
.side-stats-card,
.trend-card {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.author-meta strong,
.author-meta .muted,
.post-content,
.hero-copy h2,
.hero-copy p,
.shortcut-list a strong,
.shortcut-list a span,
.section-title h3,
.hero-metric strong,
.hero-metric span,
.trend-list,
.trend-list li {
  line-height: 1.65;
}
.shortcut-list.rich-shortcuts a {
  display: grid;
  gap: 6px;
  align-content: start;
}
.shortcut-list.rich-shortcuts a strong,
.shortcut-list.rich-shortcuts a span {
  display: block;
}
.feed-welcome-band {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
  gap: 20px;
  align-items: start;
}
.composer-head,
.enhanced-composer-head,
.actions-row.between,
.composer-submit-row {
  flex-wrap: wrap;
}
.unified-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.unified-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.media-chip-button {
  background: linear-gradient(135deg, rgba(38,70,83,.06), rgba(42,157,143,.10));
  border: 1px solid rgba(42,157,143,.18);
}
@media (max-width: 1200px) {
  .feed-layout { grid-template-columns: 1fr; }
  .sticky-box { position: static; }
  .feed-welcome-band { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .grid-two,
  .hero-metrics,
  .stats-mini-grid,
  .comment-form {
    grid-template-columns: 1fr;
  }
  .top-search { width: 100%; }
}


/* UI cleanup and warm palette */
body {
  background:
    radial-gradient(circle at top right, rgba(42,157,143,.10), transparent 22%),
    radial-gradient(circle at top left, rgba(244,162,97,.10), transparent 20%),
    linear-gradient(180deg, #fffdfa 0%, var(--bg) 220px);
}
.topbar { background: rgba(255,255,255,.94); }
.card {
  background: rgba(255,255,255,.96);
  border-color: rgba(223,216,204,.92);
}
.pill.active { background: var(--primary-soft); color: var(--primary-strong); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); }
.btn-accent { background: linear-gradient(135deg, var(--accent), var(--danger)); color: #fff; }
.btn-ghost { background: #f4efe7; }
.composer::after { background: linear-gradient(90deg, var(--primary), var(--warning), var(--accent), var(--danger)); }
.feed-welcome-band {
  grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr);
  background: linear-gradient(135deg, rgba(38,70,83,.08), rgba(42,157,143,.08), rgba(233,196,106,.10));
}
.hero-metric:nth-child(1){background:linear-gradient(135deg,#edf6f5,#ffffff);}
.hero-metric:nth-child(2){background:linear-gradient(135deg,#fff8ef,#ffffff);}
.hero-metric:nth-child(3){background:linear-gradient(135deg,#fff6ed,#ffffff);}
.hero-metric:nth-child(4){background:linear-gradient(135deg,#fff1ef,#ffffff);}
.hero-metric strong { color: var(--primary-strong); }
.rich-shortcuts a:nth-child(1) { background: linear-gradient(135deg, #edf6f5, #ffffff); border-color: rgba(42,157,143,.18); }
.rich-shortcuts a:nth-child(2) { background: linear-gradient(135deg, #fff8ef, #ffffff); border-color: rgba(244,162,97,.18); }
.rich-shortcuts a:nth-child(3) { background: linear-gradient(135deg, #fff7df, #ffffff); border-color: rgba(233,196,106,.18); }
.rich-shortcuts a:nth-child(4) { background: linear-gradient(135deg, #fff1ef, #ffffff); border-color: rgba(231,111,81,.18); }
.rich-shortcuts a:nth-child(5) { background: linear-gradient(135deg, #eef4f6, #ffffff); border-color: rgba(38,70,83,.14); }
.rich-shortcuts a:nth-child(6) { background: linear-gradient(135deg, #eefaf8, #ffffff); border-color: rgba(42,157,143,.14); }

.professional-shell-clean { gap: 22px; }
.compact-alert p { margin: 8px 0 0; line-height: 1.8; }
.pro-hero-clean {
  grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
  align-items: stretch;
  gap: 22px;
  background:
    radial-gradient(circle at top left, rgba(42,157,143,.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(244,162,97,.12), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f9f4ee 100%);
}
.pro-hero-copy, .pro-side-panel, .pro-side-stats, .hero-actions, .hero-status-grid, .profile-focus-copy, .check-item, .job-row > div { min-width: 0; }
.pro-hero-copy h1 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.25; max-width: 15ch; }
.pro-hero-copy p { max-width: 62ch; overflow-wrap: anywhere; }
.pro-side-panel { display: grid; gap: 16px; align-content: start; }
.completion-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f6faf9);
  border: 1px solid rgba(42,157,143,.16);
}
.pro-side-stats { display: grid; gap: 12px; }
.side-stat {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f9f4ee);
  border: 1px solid rgba(223,216,204,.92);
}
.side-stat strong { font-size: 1.35rem; color: var(--primary-strong); }
.side-stat span { color: var(--muted); line-height: 1.5; }
.clean-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { min-height: 96px; }
.metric-card-primary { background: linear-gradient(135deg, #2A9D8F, #264653); }
.metric-card-accent { background: linear-gradient(135deg, #F4A261, #E76F51); }
.metric-card-success { background: linear-gradient(135deg, #E9C46A, #2A9D8F); }
.metric-card-warm { background: linear-gradient(135deg, #E76F51, #F4A261); }
.clean-pro-grid { align-items: start; }
.profile-focus-card, .marketplace-card, .jobs-preview-card { overflow: hidden; }
.sub-list-label {
  margin: 4px 0 2px;
  font-weight: 800;
  color: var(--primary-strong);
  background: #f4efe7;
  padding: 10px 12px;
  border-radius: 12px;
}
.job-row, .pro-job-row {
  flex-wrap: wrap;
  align-items: start;
}
.job-row strong, .pro-job-row strong, .check-item strong, .profile-headline, .hero-copy h2, .hero-copy p {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-actions .btn, .career-cta-box .btn { min-height: 44px; }
.author-meta, .author-meta strong, .author-meta div, .post-content, .hero-metrics, .hero-metric, .section-title, .compact-title { min-width: 0; }
.section-title, .compact-title { flex-wrap: wrap; }
.hero-copy h2 { line-height: 1.3; }

@media (max-width: 1100px) {
  .pro-hero-clean, .feed-welcome-band { grid-template-columns: 1fr; }
  .clean-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .clean-stats-grid, .pro-stats-grid-extended, .grid-two.equal, .stats-mini-grid, .hero-metrics { grid-template-columns: 1fr; }
  .pro-hero-copy h1 { max-width: none; }
}


/* Phase 15 actual cleanup overrides */

.feed-layout-clean-v2 { align-items: start; }
.feed-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 22px;
  align-items: start;
  background:
    radial-gradient(circle at top left, rgba(42,157,143,.10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(244,162,97,.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f9f4ee 100%);
}
.feed-hero-copy, .feed-hero-stats, .hero-stat-card { min-width: 0; }
.feed-hero-copy h2 {
  margin: 12px 0 10px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.22;
  max-width: 14ch;
  color: var(--primary-strong);
}
.feed-hero-copy p {
  margin: 0;
  max-width: 60ch;
  line-height: 1.95;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.feed-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hero-stat-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(223,216,204,.92);
  background: linear-gradient(135deg, #ffffff, #f7f3ec);
  display: grid;
  gap: 6px;
}
.hero-stat-card:nth-child(1){ background: linear-gradient(135deg, #edf6f5, #ffffff); }
.hero-stat-card:nth-child(2){ background: linear-gradient(135deg, #fff8ef, #ffffff); }
.hero-stat-card:nth-child(3){ background: linear-gradient(135deg, #fff7df, #ffffff); }
.hero-stat-card:nth-child(4){ background: linear-gradient(135deg, #fff1ef, #ffffff); }
.hero-stat-card strong { font-size: 1.5rem; color: var(--primary-strong); }
.hero-stat-card span { color: var(--muted); line-height: 1.5; }
.stats-mini-grid-v2 {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stats-mini-grid-v2 > div {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f9f4ee);
  border: 1px solid rgba(223,216,204,.92);
}
.stats-mini-grid-v2 strong { display: block; font-size: 1.2rem; margin-bottom: 4px; color: var(--primary-strong); }
.stats-mini-grid-v2 span { color: var(--muted); line-height: 1.5; }

.pro-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
  gap: 22px;
  align-items: start;
}
.pro-hero-v2 .pro-hero-copy h1 {
  margin: 12px 0 10px;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.22;
  max-width: 14ch;
}
.pro-hero-v2 .pro-hero-copy p {
  line-height: 1.9;
  max-width: 62ch;
}
.pro-side-panel-v2 {
  display: grid;
  gap: 16px;
  align-content: start;
}
.pro-side-stats-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pro-side-stats-v2 .side-stat {
  min-height: 110px;
  align-content: start;
}
.profile-focus-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.profile-focus-copy h2,
.profile-headline,
.check-item span,
.job-row .muted.small,
.pro-job-row .muted.small {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.marketplace-card .career-cta-box,
.wrap-actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.section-title.compact-title {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 1100px) {
  .feed-hero-v2,
  .pro-hero-v2,
  .feed-layout-clean-v2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .feed-hero-stats,
  .stats-mini-grid-v2,
  .pro-side-stats-v2,
  .clean-stats-grid {
    grid-template-columns: 1fr;
  }
  .feed-hero-copy h2,
  .pro-hero-v2 .pro-hero-copy h1 { max-width: none; }
  .profile-focus-head { grid-template-columns: 1fr; }
}


/* Phase 16 overlap fix */
.feed-hero-v3 {
  grid-template-columns: 1fr;
  gap: 16px;
}
.feed-hero-v3 .feed-hero-copy {
  max-width: 100%;
}
.feed-hero-v3 .hero-actions {
  margin-top: 18px;
}
.feed-hero-v3 .btn {
  min-width: 0;
}
@media (max-width: 1100px) {
  .feed-hero-v3 { grid-template-columns: 1fr; }
}


/* Phase 17 premium polish */
.phase17-feed-layout {
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  gap: 20px;
}
.phase17-panel {
  box-shadow: 0 18px 44px rgba(38,70,83,.08);
}
.phase17-shortcuts a,
.phase17-list li {
  border-radius: 18px;
}
.phase17-main-column {
  gap: 20px;
}
.phase17-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr);
  gap: 20px;
  align-items: center;
  background:
    radial-gradient(circle at top left, rgba(42,157,143,.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(244,162,97,.16), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fff8f1 100%);
}
.phase17-hero-copy h2 {
  margin: 12px 0 10px;
  font-size: clamp(2.1rem, 3vw, 3.15rem);
  line-height: 1.18;
  color: var(--primary-strong);
}
.phase17-hero-copy p {
  margin: 0;
  max-width: 60ch;
  line-height: 1.95;
  color: var(--muted);
}
.phase17-hero-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.phase17-hero-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.phase17-metric {
  min-height: 110px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(223,216,204,.92);
  background: linear-gradient(135deg, #ffffff, #f7f3ec);
  display: grid;
  align-content: center;
  gap: 4px;
}
.phase17-metric:nth-child(1){ background: linear-gradient(135deg, #edf6f5, #ffffff); }
.phase17-metric:nth-child(2){ background: linear-gradient(135deg, #fff8ef, #ffffff); }
.phase17-metric:nth-child(3){ background: linear-gradient(135deg, #fff7df, #ffffff); }
.phase17-metric:nth-child(4){ background: linear-gradient(135deg, #fff1ef, #ffffff); }
.phase17-metric strong {
  font-size: 1.6rem;
  color: var(--primary-strong);
}
.phase17-metric span {
  color: var(--muted);
  line-height: 1.5;
}
.phase17-composer {
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,244,238,.98));
}
.phase17-composer-head {
  align-items: end;
}
.phase17-banner {
  border-inline-start: 5px solid var(--primary);
}
.phase17-state-grid > div {
  min-height: 96px;
}

.professional-shell-v3 {
  gap: 20px;
}
.phase17-pro-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .7fr);
  gap: 22px;
  align-items: center;
  background:
    radial-gradient(circle at top left, rgba(42,157,143,.15), transparent 28%),
    radial-gradient(circle at bottom right, rgba(231,111,81,.15), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fff8f1 100%);
}
.phase17-pro-copy h1 {
  margin: 12px 0 10px;
  font-size: clamp(2.1rem, 3vw, 3rem);
  line-height: 1.18;
  color: var(--primary-strong);
}
.phase17-pro-copy p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.95;
  color: var(--muted);
}
.phase17-pro-completion {
  display: grid;
  gap: 16px;
  justify-items: center;
  background: linear-gradient(180deg, #ffffff, #f8fbfa);
  border: 1px solid rgba(42,157,143,.14);
  border-radius: 22px;
  padding: 18px;
}
.phase17-status-grid {
  width: 100%;
}
.phase17-pro-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.phase17-stat-card {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 110px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff, #f7f3ec);
}
.phase17-stat-card:nth-child(1){ border-top: 4px solid #264653; }
.phase17-stat-card:nth-child(2){ border-top: 4px solid #2A9D8F; }
.phase17-stat-card:nth-child(3){ border-top: 4px solid #E9C46A; }
.phase17-stat-card:nth-child(4){ border-top: 4px solid #F4A261; }
.phase17-stat-card:nth-child(5){ border-top: 4px solid #E76F51; }
.phase17-stat-card:nth-child(6){ border-top: 4px solid #2A9D8F; }
.phase17-stat-card strong {
  font-size: 1.7rem;
  color: var(--primary-strong);
}
.phase17-stat-card span {
  color: var(--muted);
  line-height: 1.45;
}
.phase17-card-surface {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,244,238,.98));
}
.phase17-profile-head {
  margin-bottom: 16px;
}
.phase17-checks {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.phase17-row {
  border-radius: 18px;
}

@media (max-width: 1280px) {
  .phase17-feed-layout {
    grid-template-columns: 270px minmax(0, 1fr) 270px;
  }
  .phase17-pro-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .phase17-feed-layout,
  .phase17-hero,
  .phase17-pro-hero {
    grid-template-columns: 1fr;
  }
  .phase17-pro-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .phase17-hero-metrics,
  .phase17-pro-stats,
  .phase17-state-grid {
    grid-template-columns: 1fr;
  }
  .phase17-hero-copy h2,
  .phase17-pro-copy h1 {
    max-width: none;
  }
}


/* Phase 18 robust layout fixes */
.phase18-hero-simple,
.phase18-pro-hero-simple {
  grid-template-columns: 1fr !important;
}
.phase18-hero-simple .phase17-hero-copy,
.phase18-pro-hero-simple .phase17-pro-copy {
  max-width: 100%;
}
.phase18-hero-simple .phase17-hero-copy h2,
.phase18-pro-hero-simple .phase17-pro-copy h1 {
  max-width: none;
}
.phase18-pro-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.phase18-stat-card {
  display: grid;
  gap: 6px;
  min-height: 108px;
  align-content: center;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(180deg,#ffffff,#f8fbfa);
  border: 1px solid rgba(38,70,83,.10);
}
.phase18-stat-card strong {
  font-size: 1.8rem;
  color: #264653;
}
.phase18-stat-card span {
  color: #5b6573;
}
.phase18-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.phase18-pro-hero-simple .hero-actions,
.phase18-hero-simple .hero-actions {
  justify-content: center;
}
@media (max-width: 960px) {
  .phase18-pro-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .phase18-pro-stats {
    grid-template-columns: 1fr !important;
  }
}


/* Phase 19 color polish + micro overlap fixes */
:root {
  --bg: #f6f2ea;
  --surface: #ffffff;
  --surface-alt: #fcf8f1;
  --surface-strong: #eef6f3;
  --line: #ddd4c7;
  --text: #264653;
  --muted: #5f6b72;
  --primary: #2A9D8F;
  --primary-strong: #1f3f4a;
  --primary-soft: #e6f4f1;
  --accent: #F4A261;
  --accent-soft: #fff2e4;
  --danger: #E76F51;
  --warning: #E9C46A;
  --shadow: 0 18px 46px rgba(38, 70, 83, 0.08);
}

body {
  background:
    radial-gradient(circle at top right, rgba(42,157,143,.10), transparent 23%),
    radial-gradient(circle at top left, rgba(244,162,97,.07), transparent 20%),
    linear-gradient(180deg, #fbfcfc 0%, var(--bg) 240px);
}

.card,
.phase17-panel,
.phase17-hero,
.phase17-pro-hero,
.phase18-stat-card,
.profile-focus-card,
.marketplace-card,
.jobs-preview-card,
.polished-composer,
.sticky-box {
  box-shadow: var(--shadow);
  border: 1px solid rgba(38,70,83,.06);
}

.btn,
.top-search button {
  background: linear-gradient(180deg, #f7fbfa, #eef7f4);
  color: var(--primary-strong);
}
.btn-primary {
  background: linear-gradient(135deg, #2A9D8F, #264653);
  color: #fff;
}
.btn-accent {
  background: linear-gradient(135deg, #F4A261, #E76F51);
  color: #fff;
}
.btn-ghost {
  background: linear-gradient(180deg, #ffffff, #f7f3ec);
  color: var(--primary-strong);
  border: 1px solid rgba(38,70,83,.10);
}

.pill {
  background: #f6efe7;
  color: var(--primary-strong);
  border: 1px solid rgba(38,70,83,.08);
}
.pill.active {
  background: linear-gradient(135deg, #2A9D8F, #264653);
  color: #fff;
  border-color: transparent;
}

.phase18-pro-stats {
  margin-top: 2px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.phase18-stat-card {
  min-height: 96px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f9fbfa 100%);
}
.phase18-stat-card strong {
  line-height: 1.1;
}
.phase18-stat-card span {
  line-height: 1.45;
}

.phase18-status-row {
  margin-top: 2px;
  margin-bottom: 2px;
}
.status-chip {
  width: auto;
  min-width: 150px;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid rgba(38,70,83,.10);
}
.status-chip.status-on {
  background: rgba(42,157,143,.12);
  color: #1d6f65;
}
.status-chip.status-on.alt {
  background: rgba(244,162,97,.14);
  color: #a4551d;
}
.status-chip.status-on.soft {
  background: rgba(233,196,106,.22);
  color: #8a6712;
}

.phase18-pro-hero-simple,
.phase18-hero-simple {
  padding: 28px !important;
  background:
    radial-gradient(circle at top left, rgba(42,157,143,.10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(244,162,97,.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fff8f2 100%) !important;
}
.phase18-pro-hero-simple .phase17-pro-copy h1,
.phase18-hero-simple .phase17-hero-copy h2 {
  color: var(--primary-strong);
  line-height: 1.18;
}
.phase18-pro-hero-simple .phase17-pro-copy p,
.phase18-hero-simple .phase17-hero-copy p {
  color: var(--muted);
  line-height: 1.9;
}

.profile-focus-card,
.marketplace-card,
.jobs-preview-card {
  padding: 22px;
}
.profile-focus-copy h2,
.marketplace-card h2,
.jobs-preview-card h2,
.profile-focus-copy h3,
.marketplace-card h3,
.jobs-preview-card h3 {
  line-height: 1.25;
  margin-top: 0;
}

.profile-focus-card p,
.marketplace-card p,
.jobs-preview-card p,
.profile-focus-card li,
.marketplace-card li,
.jobs-preview-card li {
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.phase17-composer {
  background:
    linear-gradient(180deg, #ffffff 0%, #fcf8f1 100%);
}
.composer-head h1 {
  color: var(--primary-strong);
}
.composer-head p {
  color: var(--muted);
}

.section-title h3,
.compact-title h3 {
  color: var(--primary-strong);
}
.shortcut-list a,
.rich-shortcuts a {
  background: linear-gradient(180deg, #ffffff, #faf6ef);
}
.shortcut-list a:hover,
.rich-shortcuts a:hover {
  border-color: rgba(42,157,143,.22);
  background: linear-gradient(180deg, #ffffff, #f4fbf8);
}

.feed-welcome-band,
.system-alert {
  border-radius: 20px;
}

@media (max-width: 1200px) {
  .phase18-pro-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .phase18-pro-stats,
  .phase18-status-row {
    grid-template-columns: 1fr;
  }
  .status-chip {
    width: 100%;
  }
  .phase18-pro-hero-simple,
  .phase18-hero-simple,
  .profile-focus-card,
  .marketplace-card,
  .jobs-preview-card {
    padding: 18px !important;
  }
}


.stat-rating-chip {
  display: inline-flex;
  align-items: center;
}
.rating-display-stars,
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
}
.rating-display-star,
.star-rating__star {
  font-size: 1.15rem;
  line-height: 1;
  color: rgba(214, 184, 107, .35);
}
.rating-display-star.is-active,
.star-rating__star.is-active {
  color: #f5b301;
}
.star-rating__star {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
}
.star-rating__star:hover {
  transform: translateY(-1px) scale(1.06);
}
.clean-rate-form {
  display: inline-flex;
  align-items: center;
}
.clean-rate-form [data-rating-input] {
  display: none;
}


/* v9 interaction polish */
.star-rating{display:flex;gap:.3rem;align-items:center;flex-direction:row}
.star-button{background:none;border:none;padding:0 .1rem;font-size:1.25rem;cursor:pointer;line-height:1;color:#c2c7d0}
.star-button.is-active,.rating-display-star.is-active{color:#f5b301}
.rating-display-stars{display:inline-flex;gap:.1rem;flex-direction:row}
.toast-stack{position:fixed;left:1rem;bottom:5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem}
.toast{background:#1f2937;color:#fff;padding:.75rem 1rem;border-radius:.8rem;box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:.2s}
.toast.is-visible{opacity:1;transform:translateY(0)}
.toast-success{background:#166534}
.toast-error{background:#991b1b}
.comments-more-btn[disabled]{opacity:.6;cursor:default}
.comment-wrap[hidden]{display:none!important}


/* build-v12 */
.profile-page-layout{display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:18px;align-items:start}
.profile-page-layout .side-column{display:block}
.comments-more-btn[disabled]{opacity:.6;cursor:not-allowed}
.unified-upload-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.media-chip-button{border:1px solid #d7def0;background:#fff;border-radius:999px;padding:10px 14px;cursor:pointer}
.media-chip-button:hover{background:#f5f8ff}
.unified-upload-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.composer-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.preview-chip{background:#eef3ff;border:1px solid #d7def0;color:#24407a;border-radius:999px;padding:6px 10px;font-size:13px}
.toast-stack{position:fixed;left:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{background:#1f2937;color:#fff;padding:12px 14px;border-radius:12px;opacity:0;transform:translateY(8px);transition:.2s ease}
.toast.is-visible{opacity:1;transform:translateY(0)}
.toast-success{background:#166534}.toast-error{background:#991b1b}.toast-info{background:#1f2937}
@media (max-width: 1100px){.profile-page-layout{grid-template-columns:minmax(0,1fr)}.profile-page-layout .side-column{display:none}}


/* build-v17 fixes */
.quick-notify-wrap{position:relative;display:inline-flex}.notify-dropdown{position:absolute;top:calc(100% + 10px);left:0;min-width:320px;max-width:380px;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:18px;box-shadow:0 18px 48px rgba(15,23,42,.14);padding:12px;z-index:30}.notify-dropdown-head{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 10px}.notify-dropdown-item{display:block;padding:10px 12px;border-radius:14px;text-decoration:none;color:inherit}.notify-dropdown-item:hover{background:#f8fafc}.notify-dropdown-item.is-unread{background:#f0fdfa}.notify-item-time{font-size:.82rem;color:#64748b;margin-top:4px}.notify-empty{padding:10px;color:#64748b}.entity-page-layout{display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:18px;align-items:start}.entity-page-layout .main-column{min-width:0}.entity-cover-image{width:100%;height:100%;min-height:180px;display:block;object-fit:cover;border-radius:18px}.entity-banner{background:linear-gradient(135deg,#eef2ff,#f8fafc);border-radius:18px;overflow:hidden;min-height:180px;display:flex;align-items:center;justify-content:center}.entity-banner.is-empty{background:linear-gradient(135deg,#f8fafc,#eef2ff)}.banner-empty-state,.media-missing-state{padding:18px;color:#64748b;text-align:center;font-size:.95rem}.entity-avatar-image{object-fit:cover}.fallback-avatar{display:flex;align-items:center;justify-content:center}.market-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.market-card{display:flex;flex-direction:column;gap:10px}.market-card-media{border-radius:16px;overflow:hidden;background:#f8fafc;min-height:180px;display:flex;align-items:center;justify-content:center}.market-card-media img{width:100%;height:220px;object-fit:cover;display:block}.notifications-layout{grid-template-columns:minmax(0,1fr) 300px}.comments-list .comment-wrap{margin-top:10px}.comment-replies{margin-top:8px;padding-right:18px;border-right:2px solid #e2e8f0}.comment-item{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:14px;padding:10px 12px}.comment-reply{background:#f8fafc}.page-shell-card{overflow:visible}.page-source-card .author-block .avatar,.group-source-card .author-block .avatar{overflow:hidden}.profile-cover .entity-banner{min-height:220px}.profile-cover .entity-cover-image{min-height:220px}.notifications-card .list-row{border:1px solid rgba(15,23,42,.06);border-radius:16px;margin-bottom:10px;padding:14px}.notification-main{display:flex;gap:12px;align-items:flex-start}.notification-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ecfeff;color:#0f766e;font-weight:700}.page-source-card .media-frame,.group-source-card .media-frame,.unified-post-card .media-frame{background:#0f172a;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:220px}.page-source-card .media-frame img,.group-source-card .media-frame img,.unified-post-card .media-frame img{width:100%;max-height:560px;object-fit:contain;display:block;background:#fff}.page-source-card .media-frame video,.group-source-card .media-frame video,.unified-post-card .media-frame video{width:100%;max-height:560px;display:block}.right-only-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.right-only-shell .main-column{min-width:0}@media (max-width:1100px){.entity-page-layout,.notifications-layout,.right-only-shell{grid-template-columns:1fr}.entity-side-left{display:none}.entity-side-right,.side-column{order:2}.notify-dropdown{right:0;left:auto;min-width:280px}}


/* fix32 final merged mobile + messages + voice + video */
:root {
  --mobile-nav-height: 74px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.media-frame {
  position: relative;
  display: block;
  width: 100%;
}
.video-frame { background: #000; }
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  background: #000;
}
.embed-frame { background: #000; overflow: hidden; }
.embed-frame.ratio-video { aspect-ratio: 16 / 9; min-height: 240px; }
.embed-frame.ratio-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-height: none; display: block; border: 0;
}
.image-frame img {
  display: block; width: 100%; height: auto; max-height: min(72vh, 760px);
  object-fit: contain; object-position: center; margin: 0 auto;
}
.voice-chat-form { gap: 10px; flex-wrap: wrap; }
.voice-chat-form > .btn { min-height: 46px; }
.voice-record-status {
  width: 100%; padding: 8px 10px; background: rgba(248,250,255,.9);
  border: 1px solid rgba(216,225,238,.9); border-radius: 12px;
}
.voice-note-box, .message-attachment-box { margin-top: 8px; display: grid; gap: 8px; }
.voice-note-box audio, .message-attachment-box audio, .message-attachment-video {
  width: min(320px, 100%); display: block;
}
.message-attachment-image { display: block; width: min(260px, 100%); border-radius: 14px; }
.voice-fallback-link { width: fit-content; }
.attachment-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: rgba(248,250,255,.92); border: 1px solid rgba(216,225,238,.9); border-radius: 14px;
}
.mobile-bottom-nav {
  position: fixed !important; left: 0; right: 0; bottom: var(--mobile-safe-bottom);
  width: 100%; z-index: 9999; visibility: visible; opacity: 1;
  transform: translateZ(0); -webkit-transform: translateZ(0);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding-bottom: max(0px, var(--mobile-safe-bottom));
  box-shadow: 0 -10px 28px rgba(15, 23, 42, .12);
}
.mobile-bottom-nav a { min-height: 58px; }

@media (max-width: 760px) {
  html, body { overflow-x: hidden; min-height: 100%; }
  body { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)); }
  .site-shell { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)); }
  .topbar { position: sticky; top: 0; padding: 8px 8px 6px !important; }
  .brand-row.topbar-grid, .topbar-grid {
    display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; align-items: start !important;
  }
  .brand-cluster {
    position: relative; display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 10px; min-height: auto; padding: 0 !important;
  }
  .brand { width: 100%; justify-content: center !important; text-align: center; gap: 10px; margin: 0; }
  .brand > span:last-child { display: grid; gap: 2px; }
  .brand strong { font-size: .98rem !important; line-height: 1.15; }
  .brand small { display: block !important; font-size: .64rem !important; line-height: 1.2; margin: 0; }
  .brand-mark { width: 42px !important; height: 42px !important; border-radius: 14px !important; flex: 0 0 42px; }
  .menu-toggle {
    position: static !important; width: 40px; height: 40px; border-radius: 12px; display: grid !important; place-items: center; order: 2;
  }
  .top-search, .top-search-polished {
    width: 100% !important; max-width: 100% !important; display: flex !important; align-items: center !important;
    gap: 8px !important; padding: 8px !important; min-height: 60px !important; height: auto !important;
    border-radius: 16px !important; overflow: hidden;
  }
  .top-search input, .top-search-polished input {
    flex: 1 1 auto; min-width: 0; width: auto !important; max-width: none !important; height: 44px !important;
    min-height: 44px !important; padding-block: 10px !important; padding-inline-start: 38px !important;
    padding-inline-end: 12px !important; font-size: 16px !important; line-height: 1.25 !important;
  }
  .top-search button, .top-search-polished button {
    flex: 0 0 auto; min-width: 72px; width: auto !important; height: 44px !important; padding: 0 14px !important; border-radius: 14px !important;
  }
  .search-icon { inset-inline-start: 16px !important; top: 50% !important; transform: translateY(-50%) !important; }
  .welcome-ribbon, .brand-hero-ribbon, .phase17-hero, .phase18-hero-simple, .trend-card, .side-feature-card,
  .top-quick-actions, .main-nav, .watch-side, .watch-side-right, .side-column, .entity-side-left, .entity-side-right {
    display: none !important;
  }
  .page-wrap {
    width: min(100% - 12px, 100%); margin: 10px auto !important;
    padding-bottom: calc(var(--mobile-nav-height) + 14px + var(--mobile-safe-bottom)) !important;
  }
  .card { padding: 12px !important; border-radius: 16px !important; }
  .feed-layout, .entity-page-layout, .watch-layout, .watch-layout-enhanced, .messages-layout, .grid-two, .grid-three, .upload-grid, .post-actions-grid {
    grid-template-columns: 1fr !important;
  }
  .main-column, .phase17-main-column { gap: 10px !important; }
  .composer, .polished-composer, .composer-premium, .phase17-composer { padding: 10px !important; border-radius: 16px !important; }
  .composer-head, .enhanced-composer-head, .phase17-composer-head, .section-title, .actions-row.wrap-actions, .actions-row.between, .market-hero-actions, .market-card-actions {
    flex-direction: column !important; align-items: stretch !important; gap: 8px !important;
  }
  .composer-title h1 { font-size: 1.02rem !important; margin: 0 0 2px !important; }
  .composer-title p { font-size: .82rem !important; margin: 0 !important; }
  .composer textarea { min-height: 82px !important; }
  .grid-two.compact, .grid-two { grid-template-columns: 1fr !important; gap: 8px !important; }
  .unified-upload-box { padding: 10px !important; border-radius: 14px !important; }
  .unified-upload-top { gap: 8px !important; flex-direction: column !important; align-items: stretch !important; }
  .unified-upload-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
  .shortcut-list { gap: 8px !important; }
  .shortcut-list a, .shortcut-list span { padding: 10px 12px !important; border-radius: 12px !important; }
  .feed-stream, [data-feed-stream], .comments-list, .list-blocks, .mini-cards { gap: 8px !important; }
  .list-row, .mini-card, .comment-item { padding: 10px !important; border-radius: 12px !important; }
  .empty-state { padding: 14px !important; min-height: auto !important; }
  .mobile-bottom-nav { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: stretch; }
  .mobile-bottom-nav a { min-width: 0; padding: 8px 2px 10px; }
  .mobile-bottom-nav a small {
    font-size: .62rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mobile-bottom-nav .mini-count { transform: translateX(-14px); }
  .embed-frame.ratio-video { min-height: 200px; }
  .image-frame img { max-height: 52vh; }
  .market-card-media, .market-detail-media { min-height: 180px; }
  .voice-chat-form > .btn { flex: 1 1 calc(50% - 8px); }
}

@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand strong { font-size: .92rem !important; }
  .brand small { font-size: .6rem !important; }
  .brand-mark { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
  .menu-toggle { width: 38px; height: 38px; }
  .top-search, .top-search-polished { gap: 6px !important; padding: 6px !important; }
  .top-search button, .top-search-polished button { min-width: 64px; }
  .unified-upload-actions { grid-template-columns: 1fr !important; }
  .filter-pills { gap: 6px !important; }
  .pill { padding: 7px 10px !important; font-size: .76rem !important; }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    .mobile-bottom-nav { bottom: max(0px, env(safe-area-inset-bottom)); }
    body, .site-shell, .page-wrap { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 14px); }
  }
}


/* fix33 messages tool row + stable mobile bottom nav */
.message-tools-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.btn-tool {
  min-width: 0;
  white-space: nowrap;
}

.mobile-bottom-nav {
  position: fixed !important;
  inset-inline: 0 !important;
  bottom: 0 !important;
  z-index: 2147483000 !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
  will-change: transform;
  contain: layout paint style;
}

@media (max-width: 760px) {
  .voice-chat-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .voice-chat-form > input[type="text"] {
    width: 100% !important;
  }

  .message-tools-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .message-tools-row .btn-tool {
    min-height: 42px;
    padding: 0 6px !important;
    font-size: .82rem !important;
    border-radius: 12px !important;
  }

  .message-tools-row .btn-send-inline {
    font-weight: 800;
  }

  .voice-record-status {
    margin-top: 0 !important;
  }

  .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-shadow: 0 -8px 22px rgba(15, 23, 42, .16) !important;
  }

  .mobile-bottom-nav a {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  body,
  .site-shell,
  .page-wrap {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 420px) {
  .message-tools-row .btn-tool {
    font-size: .74rem !important;
    padding: 0 4px !important;
  }
}