/* Layout: social feed. Left rail navigation (bottom bar on phones), one centered timeline,
     right rail with suggestions. Hairlines instead of boxes; green is the only accent. */
  :root {
    --bg: #F6FCF8;
    --surface: #FFFFFF;
    --surface-2: #EBF8F0;
    --fg: #12291C;
    --muted: #54705F;
    --line: #DDEFE3;
    --accent: #30D675;       /* verde del logo de Saludnity */
    --accent-fg: #0B2F1A;    /* texto oscuro sobre el verde (el blanco no tiene contraste) */
    --accent-ink: #148A47;   /* verde más profundo para texto e íconos sobre fondo claro */
    --accent-soft: #DDF8E7;
    --amber: #7A5712;
    --amber-soft: #FCF2D8;
    --danger: #B3261E;
    --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--body); }
  h1, h2, h3 { font-family: var(--display); line-height: 1.2; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
  p { margin: 0; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .muted { color: var(--muted); }
  .num { font-variant-numeric: tabular-nums; }

  .strip { background: var(--amber-soft); color: var(--amber); font-size: 0.78rem; font-weight: 600; padding-block: 6px; text-align: center; }

  /* shell */
  .shell { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 232px minmax(0, 640px) 300px; gap: 0 24px; justify-content: center; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .side { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 18px 0; }
  .brand { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: none; border: 0; padding: 6px 14px; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; }
  .brand svg { width: 26px; height: 32px; flex: none; }
  .brand span { color: var(--accent-ink); }
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-item { display: flex; align-items: center; gap: 14px; background: none; border: 0; border-radius: 999px; padding: 12px 16px; cursor: pointer; font-size: 1.05rem; font-weight: 500; text-align: left; color: var(--fg); }
  .nav-item svg { width: 24px; height: 24px; flex: none; }
  .nav-item:hover { background: var(--surface-2); }
  .nav-item[aria-current="page"] { font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); }
  .cta { margin-top: 10px; padding: 13px 20px; font-size: 1.02rem; }

  .col { background: var(--surface); border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; min-width: 0; }
  .colhead { padding: 18px 20px 12px; }
  .colhead h1 { font-size: 1.5rem; font-weight: 700; }
  .colhead p { color: var(--muted); font-size: 0.94rem; margin-top: 4px; }
  .pad { padding: 4px 20px 24px; }
  .foot-note { padding: 20px; color: var(--muted); font-size: 0.82rem; border-top: 1px solid var(--line); }

  .rail { position: sticky; top: 0; align-self: start; padding: 18px 0; display: grid; gap: 16px; max-height: 100vh; overflow: auto; }
  .rbox { background: var(--surface-2); border-radius: 24px; padding: 18px; display: grid; gap: 14px; }
  .rbox h2 { font-size: 1.1rem; }
  .rrow { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .rrow .who { min-width: 0; flex: 1; }
  .rrow .name { font-size: 0.96rem; }
  .rnote { color: var(--muted); font-size: 0.8rem; padding: 0 6px; }

  /* shared bits */
  .avatar { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none; font-family: var(--display); font-weight: 700; background: hsl(var(--h) 42% 86%); color: hsl(var(--h) 48% 24%); }
  .avatar { position: relative; overflow: hidden; }
  .avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .avatar.sm { width: 40px; height: 40px; font-size: 0.9rem; }
  .avatar.story { width: 60px; height: 60px; font-size: 1.15rem; }
  .avatar.xl { width: 92px; height: 92px; font-size: 2rem; border: 4px solid var(--surface); }
  .name { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-weight: 700; font-size: 1rem; line-height: 1.25; }
  .name:hover { text-decoration: underline; }
  .name.stretch::after { content: ""; position: absolute; inset: 0; }
  .vf { display: inline-flex; color: var(--accent); vertical-align: -3px; margin-left: 3px; }
  .vf svg { width: 17px; height: 17px; }
  .role { color: var(--muted); font-size: 0.9rem; }
  .tag { font-size: 0.74rem; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 600; white-space: nowrap; }
  .tag.demo { background: var(--amber-soft); color: var(--amber); letter-spacing: 0.05em; }
  .tag.ex { background: var(--amber-soft); color: var(--amber); }
  .tag.free { background: var(--accent-soft); color: var(--accent-ink); }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); border-radius: 999px; padding: 10px 22px; font-weight: 700; cursor: pointer; }
  .btn:hover { filter: brightness(1.07); }
  .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
  .btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
  .btn.ghost:hover { border-color: var(--accent-ink); filter: none; }
  .btn.danger { background: transparent; color: var(--danger); border-color: var(--line); }
  .btn.sm { padding: 6px 14px; font-size: 0.88rem; }
  .btn.block { width: 100%; }

  /* home */
  .seg { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  .seg button { background: none; border: 0; padding: 14px 8px; cursor: pointer; font-weight: 600; color: var(--muted); position: relative; }
  .seg button:hover { background: var(--surface-2); }
  .seg button[aria-selected="true"] { color: var(--fg); font-weight: 700; }
  .seg button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 4px; margin-left: -28px; border-radius: 4px; background: var(--accent); }
  .stories { display: flex; gap: 14px; overflow-x: auto; padding: 16px 20px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .stories::-webkit-scrollbar { display: none; }
  .story { background: none; border: 0; padding: 0; cursor: pointer; display: grid; gap: 6px; justify-items: center; width: 72px; flex: none; }
  .ring { display: grid; place-items: center; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, #8DF0B4, #30D675); }
  .ring .avatar { border: 3px solid var(--surface); }
  .sname { font-size: 0.78rem; color: var(--muted); max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .post { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .av-btn { background: none; border: 0; padding: 0; cursor: pointer; align-self: start; border-radius: 50%; }
  .phd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .phd .sub { color: var(--muted); font-size: 0.88rem; }
  .post h3 { font-size: 1.12rem; margin: 6px 0 4px; font-weight: 700; }
  .post .txt { overflow-wrap: anywhere; }
  .post .txt p + p { margin-top: 8px; }
  .post.locked .txt { -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); user-select: none; }
  .pfoot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .atts { display: grid; gap: 8px; margin-top: 10px; }
  .atts.imgs { grid-template-columns: 1fr 1fr; gap: 6px; }
  .att-img { display: block; width: 100%; padding: 0; border-radius: 18px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); cursor: zoom-in; }
  .att-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
  /* a single photo: whole image, full column width, centered if it's tall */
  .atts.imgs.n1 { grid-template-columns: 1fr; }
  .atts.imgs.n1 .att-img img { aspect-ratio: auto; width: auto; max-width: 100%; height: auto; max-height: 540px; margin: 0 auto; }
  .atts.imgs.n3 .att-img:first-child { grid-column: 1 / -1; }
  .atts.imgs.n3 .att-img:first-child img { aspect-ratio: 16 / 9; }
  /* image viewer */
  .modal-bg.lb { background: rgba(6, 14, 10, 0.92); padding: 56px 16px; }
  .lb-img { max-width: 100%; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); object-fit: contain; border-radius: 8px; }
  .lb-btn { position: fixed; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; font-size: 1.7rem; line-height: 1; }
  .lb-btn:hover { background: rgba(255, 255, 255, 0.26); }
  .lb-btn svg { width: 22px; height: 22px; }
  .lb-close { top: 12px; right: 12px; }
  .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
  .lb-next { right: 12px; top: 50%; transform: translateY(-50%) scaleX(-1); }
  .lb-count { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.88rem; font-weight: 600; background: rgba(255, 255, 255, 0.14); padding: 4px 12px; border-radius: 999px; }
  .att-pdf { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--fg); min-width: 0; }
  .att-pdf:hover { border-color: var(--accent-ink); }
  .att-pdf svg { width: 26px; height: 26px; color: var(--accent-ink); flex: none; }
  .att-pdf b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.94rem; }
  .att-pdf small { color: var(--muted); }
  .attnote { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
  .attnote svg { width: 18px; height: 18px; color: var(--accent-ink); }
  .filebox { display: grid; gap: 8px; }
  .filebox input[type="file"] { width: 100%; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 16px; background: var(--surface-2); cursor: pointer; }
  [hidden] { display: none !important; }
  .att-vid { width: 100%; max-height: 380px; border-radius: 18px; background: #0B2F1A; display: block; }
  .small { font-size: 0.84rem; }
  .poll { display: grid; gap: 8px; margin-top: 10px; }
  .popt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; background: var(--surface); cursor: pointer; overflow: hidden; font-weight: 500; }
  .popt:hover:not([disabled]) { border-color: var(--accent); }
  .popt[disabled] { cursor: default; }
  .popt .bar { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); z-index: 0; }
  .popt.me { border-color: var(--accent); font-weight: 700; }
  .popt.me .bar { background: #BDF2D2; }
  .popt .lab, .popt b { position: relative; z-index: 1; }
  .evt, .prod, .course { margin-top: 10px; border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; display: grid; gap: 10px; }
  .evt-h, .course-h { display: flex; align-items: center; gap: 10px; font-weight: 700; }
  .evt-h svg, .course-h svg { width: 22px; height: 22px; color: var(--accent-ink); flex: none; }
  .course details { border-top: 1px solid var(--line); padding: 10px 0 2px; }
  .course summary { cursor: pointer; font-weight: 600; }
  .course details .txt { margin-top: 8px; color: var(--fg); }
  .lsn { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 10px 0 2px; color: var(--muted); font-weight: 600; }
  .lsn svg { width: 16px; height: 16px; flex: none; color: var(--accent-ink); }
  .prod-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .prod-top .price { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
  .deliver { background: var(--accent-soft); border-radius: 16px; padding: 12px 14px; }
  .lesson-box { border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: grid; gap: 8px; margin-bottom: 10px; }
  .lesson-box textarea { min-height: 80px; }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .kpi { border: 1px solid var(--line); border-radius: 22px; padding: 14px 16px; min-width: 0; background: var(--surface); }
  .kpi.hl { background: var(--accent-soft); border-color: transparent; }
  .kpi .n { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
  .kpi .l { font-size: 0.84rem; font-weight: 600; margin-top: 2px; }
  .kpi .d { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
  .bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding-top: 6px; }
  .bcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
  .bbar { width: 100%; max-width: 38px; border-radius: 10px 10px 4px 4px; background: var(--accent); }
  .bval { font-size: 0.76rem; font-weight: 600; }
  .blab { font-size: 0.72rem; color: var(--muted); }
  .tblw { overflow-x: auto; }
  .tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
  .tbl th { text-align: right; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
  .tbl th:first-child, .tbl td:first-child { text-align: left; }
  .tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
  .tbl tfoot td { border-bottom: 0; font-weight: 700; }
  .lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 12px 14px; border-radius: 18px; background: var(--accent-soft); font-weight: 600; font-size: 0.92rem; }
  .lock span { display: inline-flex; align-items: center; gap: 8px; }
  .lock svg { width: 18px; height: 18px; color: var(--accent-ink); }

  /* explore */
  .searchbar { padding: 4px 20px 12px; }
  .searchbar input { width: 100%; padding: 13px 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
  .searchbar input:focus { background: var(--surface); }
  .chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 14px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 15px; cursor: pointer; font-weight: 500; font-size: 0.92rem; }
  .chip:hover { border-color: var(--accent-ink); }
  .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  .prorow { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: start; }
  .prorow:hover { background: var(--bg); }
  .prorow .top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .prorow .bio { color: var(--fg); font-size: 0.94rem; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .prorow .pp { text-align: right; font-size: 0.8rem; color: var(--muted); }
  .prorow .pp strong { display: block; color: var(--fg); font-family: var(--display); font-size: 1.05rem; }

  /* profile */
  .topbar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
  .topbar .back { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .topbar .back:hover { background: var(--surface-2); }
  .topbar .back svg { width: 20px; height: 20px; }
  .topbar strong { font-family: var(--display); font-size: 1.1rem; display: block; line-height: 1.2; }
  .topbar span { color: var(--muted); font-size: 0.82rem; }
  .cover, .pc-cover { position: relative; overflow: hidden; background: linear-gradient(120deg, hsl(var(--h) 48% 78%), hsl(var(--h) 55% 90%) 70%, var(--surface-2)); }
  .cover { height: 124px; }
  .cover img, .pc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px 20px 28px; }
  .pcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; }
  .pcard:hover { box-shadow: 0 10px 28px rgba(18, 41, 28, 0.1); transform: translateY(-2px); }
  .pc-cover { height: 92px; }
  .pc-body { padding: 0 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
  .pc-av { margin-top: -34px; margin-bottom: 4px; }
  .pc-av .avatar { width: 68px; height: 68px; font-size: 1.4rem; border: 4px solid var(--surface); }
  .pc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .pc-bio { color: var(--fg); font-size: 0.92rem; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
  .pc-foot .price { font-family: var(--display); font-weight: 700; }
  .pc-foot .price small { font-family: var(--body); font-weight: 400; color: var(--muted); }
  .shell.wide { grid-template-columns: 232px minmax(0, 900px); }
  .pinfo { padding: 0 20px 16px; border-bottom: 1px solid var(--line); }
  .prow1 { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: -46px; flex-wrap: wrap; }
  .pinfo h2 { font-size: 1.5rem; margin-top: 10px; }
  .pinfo .about { margin-top: 10px; max-width: 56ch; }
  .verif { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 0.86rem; }
  .verif svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; margin-top: 1px; }
  .pstats { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; font-size: 0.92rem; color: var(--muted); }
  .pstats b { color: var(--fg); font-weight: 700; }
  .sec-title { padding: 14px 20px; font-weight: 700; border-bottom: 1px solid var(--line); font-family: var(--display); }

  /* forms + panels */
  .panel { border: 1px solid var(--line); border-radius: 22px; padding: 20px; background: var(--surface); margin-bottom: 16px; min-width: 0; }
  .panel h2, .panel h3 { font-size: 1.1rem; margin-bottom: 12px; }
  .field { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
  .field label, .field .lab { font-weight: 600; font-size: 0.92rem; }
  .field .hint { color: var(--muted); font-size: 0.84rem; }
  input[type="text"], input[type="number"], textarea, select { width: 100%; padding: 11px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  textarea { min-height: 110px; resize: vertical; }
  .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; margin-bottom: 16px; }
  .check input { margin-top: 4px; flex: none; }
  .radios { display: flex; flex-wrap: wrap; gap: 8px; }
  .radios label { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 500; }
  .radios input:checked + span { font-weight: 700; }
  .btns { display: flex; flex-wrap: wrap; gap: 10px; }
  .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 0.92rem; }
  .ticks li { display: flex; gap: 8px; }
  .ticks svg { width: 16px; height: 16px; color: var(--accent-ink); flex: none; margin-top: 3px; }
  .steps { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 0.94rem; display: grid; gap: 4px; }
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-bottom: 16px; }
  .stat { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
  .stat:last-child { border-right: 0; }
  .stat .n { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .stat .l { color: var(--muted); font-size: 0.78rem; }
  .mypost { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
  .mypost .t { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
  .appitem { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); min-width: 0; }
  .appitem .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
  .status { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
  .status.ok { background: var(--accent-soft); color: var(--accent-ink); }
  .status.wait { background: var(--amber-soft); color: var(--amber); }
  .cred { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; background: var(--accent-soft); border-radius: 18px; padding: 14px 16px; margin: 14px 0 0; }
  .cred dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
  .cred dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

  .flash { margin: 12px 20px 0; padding: 12px 18px; border-radius: 18px; font-weight: 600; }
  .flash.ok { background: var(--accent-soft); }
  .flash.err { background: var(--amber-soft); color: var(--amber); }
  .empty { margin: 20px; border: 1px solid var(--line); border-radius: 24px; padding: 36px 20px; text-align: center; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
  .empty h3 { color: var(--fg); font-size: 1.1rem; }
  .skel { margin: 16px 20px; height: 110px; border-radius: 20px; background: var(--surface-2); animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.55; } }

  .modal-bg { position: fixed; inset: 0; background: rgba(8, 24, 16, 0.5); display: grid; place-items: center; padding: 16px; z-index: 30; }
  .modal { background: var(--surface); border-radius: 28px; padding: 26px; width: min(430px, 100%); display: grid; gap: 14px; max-height: 100%; overflow: auto; }
  .modal h2 { font-size: 1.3rem; }
  .sum { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
  .sim { background: var(--amber-soft); color: var(--amber); border-radius: 16px; padding: 12px 16px; font-size: 0.88rem; }

  @media (max-width: 1100px) {
    .shell, .shell.wide { grid-template-columns: 76px minmax(0, 900px); }
    .rail { display: none; }
    .brand span, .nav-item span, .cta { display: none; }
    .brand { padding: 6px 10px; }
    .nav-item { justify-content: center; padding: 13px; }
    .side { align-items: center; }
  }
  @media (max-width: 760px) {
    .shell { display: block; padding-left: 0; padding-right: 0; }
    .side { position: static; max-height: none; padding: 8px max(12px, env(safe-area-inset-left, 0px)); flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: var(--surface); }
    .brand span { display: inline; }
    .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; flex-direction: row; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--line); padding: 4px max(8px, env(safe-area-inset-left, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)); }
    .nav-item { flex: 1; flex-direction: column; gap: 2px; padding: 8px 2px; font-size: 0.66rem; border-radius: 14px; min-width: 0; }
    .nav-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .col { border-left: 0; border-right: 0; min-height: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .two { grid-template-columns: minmax(0, 1fr); }
    .cards { grid-template-columns: minmax(0, 1fr); padding-left: 14px; padding-right: 14px; }
    .prorow { grid-template-columns: 48px minmax(0, 1fr); }
    .prorow .pp { grid-column: 2; text-align: left; display: flex; gap: 6px; align-items: baseline; }
    .prorow .pp strong { display: inline; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  /* account + auth */
  .acct { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 8px 10px; border: 0; border-radius: 999px; background: none; cursor: pointer; text-align: left; min-width: 0; }
  .acct:hover, .acct[aria-current="page"] { background: var(--surface-2); }
  .acct-txt { display: grid; min-width: 0; line-height: 1.25; }
  .acct-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.94rem; }
  .acct-txt small { color: var(--muted); font-size: 0.8rem; }
  .acct-in { margin-top: 10px; }
  .acct-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
  .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent-ink); font-weight: 600; text-align: left; }
  .linkbtn:hover { text-decoration: underline; }
  .danger-t { color: var(--danger); }
  .gbtn { gap: 10px; }
  .or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.84rem; }
  .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .authform .field { margin-bottom: 12px; }
  input[type="email"], input[type="password"] { width: 100%; padding: 11px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .verify { display: grid; gap: 10px; }
  .legal-links { margin-top: 8px; }
  .legal-links .linkbtn { font-weight: 500; color: var(--muted); }
  .legal h1 { font-size: 1.5rem; margin-bottom: 12px; }
  .legal .txt p + p { margin-top: 10px; }

  /* badges, tabs, shared rows */
  .nav-item { position: relative; }
  .badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font: 700 0.72rem/1 var(--body); font-variant-numeric: tabular-nums; }
  .nav-item .badge { margin-left: auto; }
  .avatar.xs { width: 32px; height: 32px; font-size: 0.74rem; }
  .seg.three { grid-template-columns: repeat(3, 1fr); }
  .tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; background: none; border: 0; padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--muted); position: relative; display: inline-flex; align-items: center; gap: 6px; }
  .tabs button:hover { background: var(--surface-2); }
  .tabs button[aria-selected="true"] { color: var(--fg); font-weight: 700; }
  .tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 4px; border-radius: 4px; background: var(--accent); }
  .ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .ph h2 { margin: 0 !important; }
  .h2 { font-size: 1.1rem; margin: 22px 0 6px; }
  .subh { font-size: 1rem; margin: 6px 0 12px; }
  .nowrap { flex-wrap: nowrap; flex: none; }
  .pstat { color: var(--muted); margin-top: 2px; }
  .note { background: var(--amber-soft); color: var(--amber); border-radius: 12px; padding: 8px 12px; font-size: 0.9rem; }
  .panel.hl { background: var(--accent-soft); border-color: transparent; }
  .radios.stack { flex-direction: column; align-items: stretch; }
  .radios.stack label { border-radius: 14px; }
  .curatts { display: grid; gap: 2px; margin-bottom: 6px; }
  .curatts .check { margin-bottom: 4px; }
  .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
  .toolbar input { flex: 1; min-width: 0; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
  .urow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
  .urow .who { min-width: 0; overflow-wrap: anywhere; }
  .tagrow { margin: 4px 0 2px; gap: 6px; }
  .log { display: grid; }
  .logrow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.92rem; overflow-wrap: anywhere; }

  /* post actions + comments */
  .pfoot { flex-wrap: wrap; }
  .pacts { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
  .iconbtn { display: inline-flex; align-items: center; gap: 4px; min-width: 38px; height: 38px; justify-content: center; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 0.86rem; }
  .iconbtn svg { width: 20px; height: 20px; }
  .iconbtn:hover { background: var(--surface-2); color: var(--fg); }
  .iconbtn.on { color: var(--accent-ink); }
  .iconbtn.on svg { fill: var(--accent-soft); }
  .iconbtn[data-act="like"].on { color: #C2185B; }
  .iconbtn[data-act="like"].on svg { fill: #F8BBD0; }
  .cmts { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
  .cmt { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .cmt.reply { margin-left: 42px; }
  .chd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.92rem; }
  .cbody .txt { font-size: 0.94rem; overflow-wrap: anywhere; }
  .cacts { display: flex; gap: 14px; margin-top: 2px; }
  .cacts .linkbtn { font-size: 0.82rem; }
  .cform { display: grid; gap: 8px; }
  .cform textarea { min-height: 64px; }

  /* professional profile extras */
  .pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 0.92rem; }
  .pmeta svg { width: 16px; height: 16px; }
  .plinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .plinks .chip { text-decoration: none; color: var(--fg); }
  .plinks .btn svg { width: 16px; height: 16px; }

  /* notifications */
  .notifs { display: grid; }
  .notif { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
  .notif:hover { background: var(--bg); }
  .notif.new { background: var(--accent-soft); }
  .nico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--accent-ink); }
  .nico svg { width: 20px; height: 20px; }
  .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

  /* professional space */
  .phero { position: relative; border-bottom: 1px solid var(--line); }
  .phero .cover { height: 210px; }
  .back.onimg { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: var(--fg); cursor: pointer; box-shadow: 0 2px 10px rgba(18, 41, 28, 0.15); }
  .back.onimg svg { width: 20px; height: 20px; }
  .phero .pinfo { border-bottom: 0; padding-bottom: 20px; }
  .phero .prow1 { margin-top: -50px; position: relative; z-index: 1; }
  .prow1 .btns { align-items: center; }
  .prow1 .btn svg { width: 18px; height: 18px; }
  .phero .about { max-width: 64ch; }
  .psub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding: 16px 20px; border-radius: 22px; background: linear-gradient(120deg, var(--accent-soft), #F1FBF5); }
  .psub b { display: block; font-family: var(--display); font-size: 1.1rem; }
  .psub span { color: var(--muted); font-size: 0.92rem; }
  .ptabs { position: sticky; top: 0; z-index: 5; background: var(--surface); }
  .tabs button svg { width: 18px; height: 18px; }
  .cnt { font-size: 0.78rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
  .psec { padding: 20px 20px 4px; }
  .psec + .psec { border-top: 1px solid var(--line); }
  .psec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .psec-h h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 1.15rem; }
  .psec-h h3 svg { width: 22px; height: 22px; color: var(--accent-ink); }
  .pgrid { padding-top: 20px; }
  .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding-bottom: 16px; }
  .ccard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface); transition: box-shadow 0.15s, transform 0.15s; min-width: 0; }
  .ccard:hover { box-shadow: 0 10px 28px rgba(18, 41, 28, 0.1); transform: translateY(-2px); }
  .ccard:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ccard .name:focus-visible { outline: none; }
  .cthumb, .cvis { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
  .cthumb img, .cthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cthumb.blur img, .cthumb.blur video { filter: blur(14px) saturate(0.8); transform: scale(1.15); }
  .cplay { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 47, 26, 0.72); color: #fff; }
  .cplay svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
  .cmore { position: absolute; right: 10px; bottom: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(11, 47, 26, 0.72); color: #fff; font-size: 0.8rem; font-weight: 700; }
  .cvis { display: grid; place-items: center; aspect-ratio: 16 / 7; }
  a.btn { text-decoration: none; }
  .cvis > svg { width: 46px; height: 46px; stroke-width: 1.5; }
  .cv-course { background: linear-gradient(135deg, #DDF8E7, #B9EFCF); color: #148A47; }
  .cv-guide { background: linear-gradient(135deg, #FCF2D8, #F6E0A8); color: #7A5712; }
  .cv-poll { background: linear-gradient(135deg, #E3EEFC, #C7DCF7); color: #2A5C9A; }
  .cv-event { background: linear-gradient(135deg, #EEE6FA, #D9C9F3); color: #5B3A94; }
  .cv-article { background: linear-gradient(135deg, #E6F4F1, #C9E8E2); color: #23695C; }
  .cv-media { background: linear-gradient(135deg, #E6F4F1, #C9E8E2); color: #23695C; }
  .cdate { display: grid; place-items: center; width: 74px; padding: 8px 0; border-radius: 18px; background: var(--surface); color: #5B3A94; line-height: 1.05; box-shadow: 0 4px 14px rgba(91, 58, 148, 0.15); }
  .cdate b { font-family: var(--display); font-size: 1.9rem; }
  .cdate span { text-transform: uppercase; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; }
  .cbody { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; min-width: 0; }
  .ckind { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); }
  .ccard h4 { margin: 0; font-family: var(--display); font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
  .ccard h4 .name { font: inherit; }
  .cex { color: var(--muted); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }
  .cfoot .muted { margin-left: auto; }
  .tag svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }
  .tag.price { background: var(--fg); color: var(--surface); }
  .pnext { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 20px 20px 4px; padding: 16px 20px; border-radius: 22px; background: linear-gradient(135deg, #EEE6FA, #F7F2FD); }
  .pnext-t { display: grid; gap: 2px; flex: 1; min-width: 180px; }
  .pnext-t b { font-family: var(--display); font-size: 1.15rem; }
  .pnext .ckind { color: #5B3A94; }
  .pdetail-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
  .pdetail-bar .linkbtn { display: inline-flex; align-items: center; gap: 6px; }
  .pdetail-bar svg { width: 18px; height: 18px; }

  @media (max-width: 1100px) {
    .acct-txt, .acct-in { display: none; }
    .acct { justify-content: center; width: auto; padding: 6px; }
    .nav-item .badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; font-size: 0.66rem; }
  }
  @media (max-width: 760px) {
    #acct { display: flex; }
    .acct { margin: 0; }
    .acct-in { display: inline-flex; width: auto; margin: 0; padding: 6px 14px; font-size: 0.88rem; }
    .nav-item .badge { top: 2px; right: calc(50% - 22px); }
    .urow { grid-template-columns: 40px minmax(0, 1fr); }
    .urow > .btns { grid-column: 2; }
    .logrow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .mypost { flex-wrap: wrap; }
  }
  @media (max-width: 760px) {
    .phero .cover { height: 150px; }
    .phero .prow1 { margin-top: -40px; }
    .phero .avatar.xl { width: 80px; height: 80px; }
    .cgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .cbody { padding: 12px; }
    .ccard h4 { font-size: 0.98rem; }
    .psec, .pdetail-bar { padding-left: 14px; padding-right: 14px; }
    .pnext { margin-left: 14px; margin-right: 14px; }
    .psub .btn { width: 100%; }
  }

  /* login button: icon + text; icon only where the bar is compact */
  .acct-in svg { width: 20px; height: 20px; display: none; }
  @media (max-width: 1100px) and (min-width: 761px) {
    .acct-in { display: inline-flex; width: 48px; height: 48px; padding: 0; border-radius: 50%; margin-top: 10px; }
    .acct-in svg { display: block; }
    .acct-in span { display: none; }
  }

  /* compact left bar on a professional's space (desktop only; phones keep the bottom bar) */
  @media (min-width: 761px) {
    .shell.slim { grid-template-columns: 76px minmax(0, 1100px); }
    .shell.slim .side { align-items: center; }
    .shell.slim .brand { padding: 6px 10px; }
    .shell.slim .brand span, .shell.slim .nav-item span, .shell.slim .cta, .shell.slim .acct-txt { display: none; }
    .shell.slim .nav-item { justify-content: center; padding: 13px; }
    .shell.slim .nav-item .badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; font-size: 0.66rem; }
    .shell.slim .acct { justify-content: center; width: auto; padding: 6px; }
    .shell.slim .acct-in { display: inline-flex; width: 48px; height: 48px; padding: 0; border-radius: 50%; margin-top: 10px; }
    .shell.slim .acct-in svg { display: block; }
    .shell.slim .acct-in span { display: none; }
    .shell.slim .cgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  }

  /* recommendations rail */
  .rbox-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .rcards { display: grid; gap: 12px; }
  .rcard { position: relative; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: box-shadow 0.15s, transform 0.15s; }
  .rcard:hover { box-shadow: 0 8px 22px rgba(18, 41, 28, 0.12); transform: translateY(-1px); }
  .rcard:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rcard .name:focus-visible { outline: none; }
  .rc-cover { position: relative; height: 64px; overflow: hidden; background: linear-gradient(120deg, hsl(var(--h) 48% 78%), hsl(var(--h) 55% 90%) 70%, var(--surface-2)); }
  .rc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .rc-body { display: flex; align-items: flex-start; gap: 10px; padding: 0 14px; margin-top: -26px; position: relative; }
  .rc-av .avatar { width: 56px; height: 56px; font-size: 1.1rem; border: 3px solid var(--surface); }
  .rc-main { min-width: 0; padding-top: 30px; }
  .rc-name { display: flex; align-items: center; min-width: 0; }
  .rc-name .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.96rem; }
  .rc-spec { display: inline-block; margin-top: 3px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.76rem; font-weight: 700; }
  .rc-why { display: flex; align-items: center; gap: 6px; margin: 10px 14px 0; color: var(--muted); font-size: 0.82rem; }
  .rc-why svg { width: 15px; height: 15px; flex: none; color: var(--accent-ink); }
  .rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; }
  .rc-foot .price { font-family: var(--display); font-weight: 700; }
  .rc-foot .price small { font-family: var(--body); font-weight: 400; color: var(--muted); }
  .rc-int { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); font-size: 0.82rem; }
  .rc-int svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-ink); }
  .intbox { display: grid; gap: 8px; }
  .intchips { display: flex; flex-wrap: wrap; gap: 6px; }
  .intchips .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.84rem; padding: 5px 12px; }
  .intchips .chip svg { width: 14px; height: 14px; }
  .intbox .btn { justify-self: start; }

  /* welcome: first screen for visitors without a session */
  .welcome { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 40px max(16px, env(safe-area-inset-left, 0px)) 24px;
    background: radial-gradient(900px 480px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg); }
  .wl-in { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .wl-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--accent-ink); }
  .wl-mark svg { width: 30px; height: 38px; display: block; }
  .wl-wait svg { width: 44px; height: 56px; animation: wl-pulse 1.4s ease-in-out infinite; }
  @keyframes wl-pulse { 50% { opacity: 0.35; } }
  .wl-title { font-size: clamp(1.7rem, 6vw, 2.2rem); margin-top: 18px; }
  .wl-sub { color: var(--muted); max-width: 34ch; }
  .wl-card { width: 100%; margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; display: grid; gap: 14px; text-align: left; box-shadow: 0 10px 30px -18px rgba(18, 41, 28, 0.25); }
  .wl-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 999px; padding: 4px; }
  .wl-tabs button { border: 0; background: none; border-radius: 999px; padding: 9px 8px; font-weight: 600; color: var(--muted); cursor: pointer; }
  .wl-tabs button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(18, 41, 28, 0.12); }
  .wl-h { font-size: 1.2rem; }
  .wl-card .authform .field:last-of-type { margin-bottom: 14px; }
  .wl-pro { font-size: 0.86rem; color: var(--muted); max-width: 36ch; }
  .wl-foot { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 0.8rem; color: var(--muted); }
  .wl-flash:empty { display: none; }
  .wl-flash { width: 100%; text-align: left; }

  /* Mi espacio for regular users */
  .uprof { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .uprof-txt { flex: 1; min-width: 0; }
  .uprof-txt p { overflow-wrap: anywhere; }
  .kbtn { text-align: left; cursor: pointer; font: inherit; color: inherit; }
  .kbtn:hover { border-color: var(--accent); }
  #uact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 520px) { #uact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uprof { flex-direction: column; text-align: center; } .uprof .btns { justify-content: center; } }
  .ulinks { display: grid; gap: 4px; margin-top: 10px; }
  .ulink { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; border-radius: 16px; padding: 10px 12px; cursor: pointer; }
  .ulink:hover { background: var(--surface-2); }
  .ulink svg { width: 22px; height: 22px; flex: none; color: var(--accent-ink); }
  .ulink span { display: grid; }
  .ulink small { color: var(--muted); font-size: 0.82rem; }

  /* photos and videos in a post span the whole post width, under the avatar too */
  .post .atts.imgs, .post .atts:has(> .att-vid) { margin-left: -60px; }

  /* ---------- phone layout: app-style top bar, bottom tabs by role, bottom sheets ---------- */
  .mtop, .mtabs, .mrec, .psticky { display: none; }
  @media (min-width: 761px) { .monly { display: none; } }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } }
  @media (max-width: 760px) {
    .side { display: none; }
    .colhead { display: none; }
    .mhide { display: none; }
    .strip { font-size: 0.7rem; padding-block: 3px; }

    .mtop { display: flex; position: sticky; top: 0; z-index: 15; align-items: center; gap: 8px; min-height: 56px;
      padding: 8px max(16px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--bg) 92%, transparent);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
    .mtop:empty { display: none; }
    .mtop h1 { flex: 1; font-size: 1.3rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mlogo { flex: 1; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--accent-ink); }
    .mlogo svg { width: 22px; height: 28px; }
    .mico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
    .mico svg { width: 20px; height: 20px; }
    .mico .dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
    .mtop .mico:first-child { border: 0; background: none; margin-left: -8px; }

    .mtabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-around; align-items: center;
      background: var(--surface); border-top: 1px solid var(--line); padding: 4px max(6px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)); }
    .mtabs:empty { display: none; }
    .mtab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
      color: var(--muted); font-size: 0.7rem; font-weight: 600; border-radius: 14px; }
    .mtab svg { width: 23px; height: 23px; }
    .mtab[aria-current="page"] { color: var(--accent-ink); }
    .mtab[aria-current="page"] svg { stroke-width: 2.4; }
    .mtab .fab { width: 48px; height: 48px; border-radius: 17px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(20, 138, 71, 0.8); }
    .mtab .fab svg { width: 24px; height: 24px; stroke-width: 2.6; }
    .mtab .badge { position: absolute; top: 1px; right: calc(50% - 24px); }
    .shell:has(+ .mtabs:empty) .col { padding-bottom: 24px; }

    /* windows become sheets that rise from the bottom (the image viewer stays full screen) */
    .modal-bg:not(.lb) { align-items: end; padding: 0; }
    .modal-bg:not(.lb) .modal { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 26px 26px 0 0; padding: 12px 20px calc(22px + env(safe-area-inset-bottom, 0px)); animation: sheet-up 0.22s ease-out; }
    .modal-bg:not(.lb) .modal::before { content: ""; justify-self: center; width: 42px; height: 5px; border-radius: 5px; background: var(--line); margin-bottom: 4px; }

    /* sticky subscribe bar on a professional's space */
    .psticky { display: flex; position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); z-index: 19; align-items: center; gap: 12px;
      padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px -16px rgba(18, 41, 28, 0.4); }
    .psticky.low { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .psticky > div { flex: 1; min-width: 0; line-height: 1.25; white-space: nowrap; }
    .psticky small { overflow: hidden; text-overflow: ellipsis; }
    .psticky .btn { flex: none; }
    .psticky b { font-family: var(--display); font-size: 1.1rem; }
    .psticky small { display: block; color: var(--muted); font-size: 0.78rem; }
    .col:has(.psticky) { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

    /* explore: recommendations as a swipeable row */
    .mrec { display: block; padding: 6px 0 4px; }
    .mrec:empty { display: none; }
    .mrec-h { font-size: 1rem; padding: 4px 16px 10px; }
    .mrec-row { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .mrec-row::-webkit-scrollbar { display: none; }
    .mrec-row .rcard { flex: none; width: 252px; scroll-snap-align: start; }
  }

  /* publish sheet */
  .ctypes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ctype { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); cursor: pointer; font-weight: 700; text-align: left; }
  .ctype:hover { border-color: var(--accent); background: var(--accent-soft); }
  .ctype svg { width: 24px; height: 24px; color: var(--accent-ink); }
  .ctype.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }

  /* course lessons: editor and rich content */
  .lesson-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .lesson-n { font-family: var(--display); font-size: 0.98rem; }
  .lesson-tools { display: flex; gap: 4px; }
  .rtb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: var(--surface-2); margin-bottom: -8px; }
  .rtb-b { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: 0.95rem; font-weight: 600; color: var(--fg); }
  .rtb-b:hover { background: var(--surface); }
  .rtb-b svg { width: 18px; height: 18px; }
  .rtb-b small { font-size: 0.66rem; font-weight: 700; }
  .rtb-s { height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0 6px; font-size: 0.86rem; max-width: 128px; }
  .rtb-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
  .rtb-col { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#148a47, #1d5fbf, #6b3fa0, #b3261e, #b85c00, #148a47); }
  .rtb-hl { background: #FCF2D8; padding: 0 4px; border-radius: 4px; color: var(--amber); }
  .rtb-clear { text-decoration: line-through; font-size: 0.85rem; }
  .rtb-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-top: 0; background: var(--surface); margin-bottom: -8px; }
  .rtb-pop[hidden] { display: none; }
  .rtb-pop input { flex: 1; min-width: 180px; }
  .rtb-swatches { display: flex; gap: 6px; }
  .rtb-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
  .rte { min-height: 160px; max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 0 0 14px 14px; padding: 12px 14px; background: var(--surface); outline: none; overflow-wrap: anywhere; }
  .rte:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .rte:empty::before { content: attr(data-ph); color: var(--muted); }
  .rt-up { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 0.85rem; font-weight: 600; }
  .rt > * + * { margin-top: 10px; }
  .rt h2 { font-size: 1.3rem; margin-top: 16px; }
  .rt h3 { font-size: 1.1rem; margin-top: 14px; }
  .rt blockquote { margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 12px 12px 0; }
  .rt ul, .rt ol { padding-left: 22px; margin: 8px 0; }
  .rt a { color: var(--accent-ink); }
  .rt img, .rt video { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: 10px 0; background: var(--surface-2); }
  .rt video { width: 100%; max-height: 420px; background: #0B2F1A; }
  .rt .rt-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0B2F1A; margin: 10px 0; }
  .rt .rt-embed iframe, .rt .rt-embed img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; margin: 0; border-radius: 0; }
  .rt .rt-embed span { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 4px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
  .rt .rt-embed span svg { width: 14px; height: 14px; }
  .rt a.rt-file { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--fg); background: var(--surface); margin: 10px 0; }
  .rte a.rt-file { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 0.9rem; }
  .rt a.rt-file svg { width: 26px; height: 26px; color: var(--accent-ink); flex: none; }
  .rt a.rt-file span { display: grid; min-width: 0; }
  .rt a.rt-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rt a.rt-file small { color: var(--muted); }
  .rt .c-green { color: #148A47; } .rt .c-blue { color: #1D5FBF; } .rt .c-red { color: #B3261E; } .rt .c-orange { color: #B85C00; } .rt .c-purple { color: #6B3FA0; }
  .rt .hl { background: #FCF2D8; border-radius: 3px; padding: 0 2px; }
  .rt .ff-serif { font-family: Georgia, 'Times New Roman', serif; } .rt .ff-mono { font-family: ui-monospace, Menlo, Consolas, monospace; } .rt .ff-display { font-family: var(--display); }
  .rt .fs-s { font-size: 0.85em; } .rt .fs-l { font-size: 1.25em; }
  @media (max-width: 760px) { .rtb { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .rtb::-webkit-scrollbar { display: none; } .rtb-s, .rtb-b, .rtb-sep { flex: none; } }

  /* stories row */
  .ring { position: relative; }
  .ring.plain { background: var(--line); }
  .ring.seen { background: #C9D9CF; }
  .ring.live { background: conic-gradient(from 200deg, #30D675, #148A47, #8DF0B4, #30D675); }
  .story-add { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); border: 3px solid var(--surface); display: grid; place-items: center; }
  .story-add svg { width: 13px; height: 13px; stroke-width: 3; }

  /* story viewer: full screen on phones, a phone-sized card on computers */
  .modal-bg.storyv { background: #050B08; padding: 0; z-index: 40; place-items: center; }
  .sv { position: relative; width: min(100%, 440px); height: 100%; max-height: 100dvh; background: #000; display: grid; overflow: hidden; }
  @media (min-width: 761px) { .sv { height: min(92vh, 820px); border-radius: 22px; } }
  .sv-media { display: grid; place-items: center; overflow: hidden; }
  .sv-media img, .sv-media video { width: 100%; height: 100%; object-fit: contain; }
  .sv-bars { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
  .sv-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
  .sv-bars i { display: block; height: 100%; width: 0; background: #fff; }
  .sv-bars i.done { width: 100%; }
  .sv-bars i.timed { animation: sv-fill 5s linear forwards; }
  @keyframes sv-fill { to { width: 100%; } }
  .sv-head { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; display: flex; align-items: center; gap: 6px; z-index: 3; }
  .sv-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; cursor: pointer; padding: 4px; text-align: left; }
  .sv-who b { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sv-who small { opacity: 0.75; font-size: 0.8rem; white-space: nowrap; }
  .sv-ic { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
  .sv-ic svg { width: 20px; height: 20px; }
  .sv-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px calc(22px + env(safe-area-inset-bottom, 0px)); color: #fff; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); z-index: 2; text-align: center; }
  .sv-tap { position: absolute; top: 80px; bottom: 80px; width: 35%; border: 0; background: none; cursor: pointer; z-index: 1; }
  .sv-prev { left: 0; } .sv-next { right: 0; width: 65%; }
  .sv-add { position: absolute; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 4; }
  .sv-add svg { width: 16px; height: 16px; }
  .sn-prev { border-radius: 18px; overflow: hidden; background: #000; max-height: 46vh; display: grid; place-items: center; }
  .sn-prev img, .sn-prev video { width: 100%; max-height: 46vh; object-fit: contain; }

  /* reels in the feed and the vertical viewer */
  .reel { position: relative; display: block; width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 10px 0 4px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #0B2F1A; cursor: pointer; }
  .reel video, .reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .reel-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
  .reel-play svg { width: 54px; height: 54px; padding: 14px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); fill: #fff; }
  .reel-tag { position: absolute; left: 10px; top: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
  .cthumb.vert { aspect-ratio: 9 / 14; }
  .modal-bg.reelv { background: #000; padding: 0; z-index: 40; display: block; }
  .rv-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
  .rv-scroll::-webkit-scrollbar { display: none; }
  .rv-slide { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; background: #000; }
  .rv-slide video, .rv-slide iframe { width: min(100%, calc(100dvh * 9 / 16)); height: 100%; object-fit: contain; border: 0; background: #000; }
  .rv-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 18px calc(24px + env(safe-area-inset-bottom, 0px)); color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); pointer-events: none; max-width: 640px; margin: 0 auto; }
  .rv-who { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; cursor: pointer; padding: 0; font-size: 0.95rem; }
  .rv-t { font-weight: 700; margin-top: 8px; }
  .rv-b { opacity: 0.85; font-size: 0.9rem; margin-top: 4px; }
  .rv-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; }
  .rv-sound { top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 2; }
  .rv-sound svg { width: 22px; height: 22px; }

  /* camera buttons in the publish form (phones) */
  .camrow { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  .camrow .btn svg { width: 18px; height: 18px; }
  .post .cmt-more { display: block; margin-top: 8px; color: var(--muted); font-size: 0.9rem; }

  /* =====================================================================
     Motion and modern polish. Everything here is decoration: removing this
     block leaves the app fully working. prefers-reduced-motion turns it off.
     ===================================================================== */
  :root {
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --shadow-sm: 0 1px 2px rgba(18, 41, 28, 0.05), 0 2px 8px -2px rgba(18, 41, 28, 0.06);
    --shadow-md: 0 10px 28px -12px rgba(18, 41, 28, 0.22), 0 2px 6px -2px rgba(18, 41, 28, 0.06);
    --grad: linear-gradient(135deg, #3EE385 0%, #27C76A 100%);
  }
  body { background:
    radial-gradient(1100px 600px at 100% -10%, rgba(48, 214, 117, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(127, 179, 255, 0.10), transparent 60%),
    var(--bg); background-attachment: fixed; }

  /* buttons */
  .btn { transition: transform 0.18s var(--spring), box-shadow 0.2s var(--ease), background-color 0.2s, border-color 0.2s, filter 0.2s; }
  .btn:not(.ghost):not(.danger) { background: var(--grad); border-color: transparent; box-shadow: 0 6px 16px -8px rgba(20, 138, 71, 0.65); }
  .btn:not(.ghost):not(.danger):hover { filter: none; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(20, 138, 71, 0.75); }
  .btn.ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
  .btn:active:not(:disabled) { transform: scale(0.96); }
  .btn:disabled { opacity: 0.55; box-shadow: none; }
  .iconbtn, .chip, .nav-item, .mtab, .linkbtn, .ulink, .rtb-b, .story, .mico, .tabs button, .seg button, .wl-tabs button { transition: background-color 0.2s var(--ease), color 0.2s, border-color 0.2s, transform 0.18s var(--spring), box-shadow 0.2s; }
  .iconbtn:active, .mico:active, .rtb-b:active { transform: scale(0.88); }
  .story:hover .ring { transform: scale(1.05); }
  .ring { transition: transform 0.25s var(--spring); }

  /* like: heart pop */
  .iconbtn.pop svg { animation: heart-pop 0.5s var(--spring); }
  @keyframes heart-pop { 0% { transform: scale(1); } 30% { transform: scale(1.45) rotate(-8deg); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }

  /* navigation */
  .nav-item svg { transition: transform 0.25s var(--spring); }
  .nav-item:hover svg { transform: translateX(2px) scale(1.06); }
  .nav-item[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(48, 214, 117, 0.25); }
  .brand svg { transition: transform 0.4s var(--spring); }
  .brand:hover svg, .mlogo:hover svg { animation: beat 0.9s var(--ease); }
  @keyframes beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.14); } 40% { transform: scale(0.98); } 60% { transform: scale(1.08); } }

  /* surfaces */
  .panel, .kpi, .empty, .rcard, .ccard, .wl-card, .app, .list { box-shadow: var(--shadow-sm); }
  .panel { border-color: rgba(221, 239, 227, 0.9); }
  .kpi.hl { background: linear-gradient(135deg, var(--accent-soft), #F0FBF4); }
  .ccard:hover, .rcard:hover, .kbtn:hover, .ctype:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .kbtn, .ctype { transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.2s, background-color 0.2s; }
  .ccard .cthumb img, .ccard .cthumb video { transition: transform 0.5s var(--ease); }
  .ccard:hover .cthumb img, .ccard:hover .cthumb video { transform: scale(1.05); }
  .post { transition: background-color 0.25s var(--ease); }
  .post:hover { background: rgba(235, 248, 240, 0.35); }
  .att-img img, .reel { transition: transform 0.4s var(--ease), box-shadow 0.3s; }
  .att-img:hover img { transform: scale(1.02); }
  .reel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .chip:hover { border-color: var(--accent); }
  .chip[aria-pressed="true"] { box-shadow: 0 4px 12px -6px rgba(18, 41, 28, 0.5); }

  /* tabs: the underline grows in */
  .seg button[aria-selected="true"]::after, .tabs button[aria-selected="true"]::after { animation: grow 0.35s var(--ease); }
  @keyframes grow { from { transform: scaleX(0.2); opacity: 0; } }
  .wl-tabs button[aria-selected="true"] { animation: pop-in 0.3s var(--spring); }

  /* messages, loading, windows */
  .flash { animation: drop-in 0.4s var(--spring); box-shadow: var(--shadow-sm); }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
  .skel { background: linear-gradient(90deg, var(--surface-2) 25%, #F6FCF8 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
  @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  .modal-bg { animation: fade 0.2s var(--ease); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .modal-bg.lb, .modal-bg.storyv, .modal-bg.reelv { -webkit-backdrop-filter: none; backdrop-filter: none; }
  @keyframes fade { from { opacity: 0; } }
  @media (min-width: 761px) { .modal { animation: pop-in 0.28s var(--spring); box-shadow: 0 30px 60px -20px rgba(8, 24, 16, 0.4); } }
  @keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(6px); } }
  .lb-img { animation: pop-in 0.3s var(--ease); }
  .sv-media img, .sv-media video { animation: fade 0.35s var(--ease); }

  /* stories: live ring turns slowly */
  .ring.live { background: none; isolation: isolate; }
  .ring.live::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; background: conic-gradient(#30D675, #148A47, #8DF0B4, #7FB3FF, #30D675); animation: spin 4s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* entering a screen: content rises in, lists cascade */
  .v-enter > *, .v-enter .wl-in > * { animation: rise 0.5s var(--ease) both; }
  .v-enter > *:nth-child(2) { animation-delay: 0.04s; } .v-enter > *:nth-child(3) { animation-delay: 0.08s; } .v-enter > *:nth-child(4) { animation-delay: 0.12s; } .v-enter > *:nth-child(n+5) { animation-delay: 0.16s; }
  .v-enter #feed > .post, .v-enter .cards > *, .v-enter .cgrid > *, .v-enter .pad > .panel, .v-enter .kpis > *, .v-enter .stories > .story, .v-enter .mrec-row > * { animation: rise 0.55s var(--ease) both; }
  .v-enter #feed > .post:nth-child(2), .v-enter .cgrid > :nth-child(2), .v-enter .cards > :nth-child(2), .v-enter .pad > .panel:nth-child(2), .v-enter .kpis > :nth-child(2), .v-enter .stories > :nth-child(2), .v-enter .mrec-row > :nth-child(2) { animation-delay: 0.06s; }
  .v-enter #feed > .post:nth-child(3), .v-enter .cgrid > :nth-child(3), .v-enter .cards > :nth-child(3), .v-enter .pad > .panel:nth-child(3), .v-enter .kpis > :nth-child(3), .v-enter .stories > :nth-child(3), .v-enter .mrec-row > :nth-child(3) { animation-delay: 0.12s; }
  .v-enter #feed > .post:nth-child(4), .v-enter .cgrid > :nth-child(4), .v-enter .cards > :nth-child(4), .v-enter .pad > .panel:nth-child(4), .v-enter .kpis > :nth-child(4), .v-enter .stories > :nth-child(4) { animation-delay: 0.18s; }
  .v-enter #feed > .post:nth-child(n+5), .v-enter .cgrid > :nth-child(n+5), .v-enter .cards > :nth-child(n+5), .v-enter .pad > .panel:nth-child(n+5), .v-enter .stories > :nth-child(n+5) { animation-delay: 0.24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  .v-enter .phero .cover { animation: cover-in 0.9s var(--ease) both; }
  @keyframes cover-in { from { transform: scale(1.06); filter: saturate(0.6); } }

  /* welcome: soft moving light behind the card */
  .welcome { position: relative; overflow: hidden; isolation: isolate; }
  .welcome::before, .welcome::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(60px); opacity: 0.45; animation: drift 16s ease-in-out infinite alternate; }
  .welcome::before { background: #8DF0B4; top: -180px; left: -140px; }
  .welcome::after { background: #BFD8FF; bottom: -200px; right: -160px; animation-delay: -8s; }
  @keyframes drift { to { transform: translate(80px, 60px) scale(1.1); } }
  .wl-card { box-shadow: 0 24px 50px -24px rgba(18, 41, 28, 0.3); }

  /* phone tab bar: frosted glass, lit pill behind the current icon */
  @media (max-width: 760px) {
    .mtabs { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
    .mtab svg { transition: transform 0.3s var(--spring); }
    .mtab[aria-current="page"] svg { transform: translateY(-1px) scale(1.08); }
    .mtab[aria-current="page"]::before { content: ""; position: absolute; top: 3px; left: 50%; width: 52px; height: 32px; margin-left: -26px; border-radius: 999px; background: var(--accent-soft); z-index: -1; animation: pop-in 0.3s var(--spring); }
    .mtab { isolation: isolate; }
    .mtab .fab { transition: transform 0.25s var(--spring), box-shadow 0.25s; }
    .mtab:active .fab { transform: scale(0.9) rotate(90deg); }
    .modal-bg:not(.lb) .modal { animation: sheet-up 0.32s var(--spring); }
  }
  @media (prefers-reduced-motion: reduce) { *::before, *::after { animation: none !important; transition: none !important; } .v-enter * { animation: none !important; } }
  .phero { overflow: hidden; }

  /* file pickers: the browser's grey button becomes a platform pill */
  input[type="file"] { max-width: 100%; font: inherit; font-size: 0.92rem; color: var(--muted); cursor: pointer; }
  input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color 0.2s, border-color 0.2s, transform 0.18s var(--spring); }
  input[type="file"]::-webkit-file-upload-button { margin-right: 12px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; }
  input[type="file"]:hover::file-selector-button { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
  input[type="file"]:active::file-selector-button { transform: scale(0.96); }
  input[type="file"]:focus-visible { outline: none; }
  input[type="file"]:focus-visible::file-selector-button { outline: 2px solid var(--accent); outline-offset: 2px; }
  .field > input[type="file"] { display: block; width: 100%; padding: 10px; border: 1px dashed #C9DFD1; border-radius: 18px; background: var(--surface-2); }
  .filebox input[type="file"] { padding: 10px; border-color: #C9DFD1; border-radius: 18px; }

  /* legal pages */
  .legal { max-width: 72ch; }
  .legal .txt h2 { font-size: 1.12rem; margin: 26px 0 8px; }
  .legal .txt p, .legal .txt li { color: var(--fg); line-height: 1.65; }
  .legal .txt > p:first-child { color: var(--muted); font-size: 0.9rem; }
  .legal .txt ul { margin: 8px 0; padding-left: 22px; display: grid; gap: 6px; }
  .legal .txt p + p, .legal .txt ul + p, .legal .txt p + ul { margin-top: 10px; }