/* HY_SOCIAL_HYMAIL_V16_BEAUTIFUL_UI — unified social visual contract.
   This file is loaded LAST on every HySocial surface. It keeps page-specific
   layout CSS for structure, but owns theme, depth, spacing, chroma, contrast,
   responsive behavior, and Beautiful UI interaction language. */

@property --hsx-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes hsx-edge-spin { to { --hsx-angle:360deg; } }
@keyframes hsx-breathe { 0%,100%{opacity:.72;filter:saturate(1)}50%{opacity:1;filter:saturate(1.22)} }
@keyframes hsx-pulse { 0%,100%{transform:scale(.96);opacity:.65}50%{transform:scale(1.04);opacity:1} }

:root {
  --hsx-bg:#070b14;
  --hsx-void:#030611;
  --hsx-surface:rgba(13,20,36,.92);
  --hsx-surface-raised:rgba(21,30,50,.96);
  --hsx-ink:#f6f9ff;
  --hsx-muted:#91a1bd;
  --hsx-dim:#5d6c87;
  --hsx-line:rgba(126,156,205,.28);
  --hsx-cyan:#35eaff;
  --hsx-blue:#438fff;
  --hsx-violet:#a657ff;
  --hsx-pink:#ff3fc8;
  --hsx-success:#35efb0;
  --hsx-warn:#ffd45f;
  --hsx-danger:#ff6688;
  --hsx-card-radius:18px;
  --hsx-control-radius:12px;
  --hsx-gutter:clamp(12px,2vw,24px);
  --hsx-edge:conic-gradient(from var(--hsx-angle),#ff315f,#ff34dd,#a83cff,#5f54ff,#248dff,#22dfff,#20edbd,#83f16d,#ecf35f,#ffb84b,#ff315f);
  --hsx-depth:0 24px 70px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);
  --hsx-depth-soft:0 14px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  --hsx-spring:cubic-bezier(.22,.9,.3,1);
  --hsx-pop:cubic-bezier(.34,1.28,.64,1);
  --accent:var(--hsx-cyan);
  --accent-dim:color-mix(in srgb,var(--accent) 14%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent) 26%,transparent);
  --success:var(--hsx-success);
  --online:var(--hsx-success);
  --success-bg:color-mix(in srgb,var(--success) 14%,transparent);
  --danger:var(--hsx-danger);
  --warning:var(--hsx-warn);
  --text:var(--hsx-ink);
  --muted:var(--hsx-muted);
  --bg:var(--hsx-bg);
  --bg-deep:var(--hsx-bg);
  --bg-card:var(--hsx-surface);
  --bg-surface:var(--hsx-surface-raised);
  --bg-input:rgba(5,10,21,.88);
  --border:var(--hsx-line);
}
html[data-mode="dark"] { color-scheme:dark; }
html[data-mode="light"] {
  color-scheme:light;
  --hsx-bg:#f4f7fc;
  --hsx-void:#eaf0f8;
  --hsx-surface:rgba(255,255,255,.78);
  --hsx-surface-raised:rgba(255,255,255,.92);
  --hsx-ink:#101827;
  --hsx-muted:#4f6078;
  --hsx-dim:#728198;
  --hsx-line:rgba(55,83,125,.22);
  --hsx-depth:0 24px 64px rgba(30,59,110,.16),inset 0 1px 0 rgba(255,255,255,.9);
  --hsx-depth-soft:0 12px 32px rgba(30,59,110,.12),inset 0 1px 0 rgba(255,255,255,.9);
  --accent:#087ea4;
  --accent-dim:color-mix(in srgb,var(--accent) 14%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent) 18%,transparent);
  --success:#087f5b;
  --online:var(--success);
  --success-bg:color-mix(in srgb,var(--success) 12%,transparent);
  --danger:#c92a4a;
  --warning:#8a5d00;
  --text:var(--hsx-ink);
  --muted:var(--hsx-muted);
  --bg:var(--hsx-bg);
  --bg-deep:var(--hsx-bg);
  --bg-card:var(--hsx-surface);
  --bg-surface:var(--hsx-surface-raised);
  --bg-input:rgba(255,255,255,.92);
  --border:var(--hsx-line);
}

html,body{max-width:100%;min-height:100%;overflow-x:hidden}
body{
  position:relative!important;
  isolation:isolate;
  color:var(--text)!important;
  background:
    radial-gradient(900px 560px at 10% -10%,rgba(34,106,255,.16),transparent 62%),
    radial-gradient(860px 600px at 92% 12%,rgba(178,37,255,.12),transparent 64%),
    var(--bg-deep)!important;
  -webkit-font-smoothing:antialiased;
}
html[data-mode="light"] body{
  background:
    radial-gradient(880px 560px at 8% 0%,rgba(53,214,255,.18),transparent 62%),
    radial-gradient(760px 540px at 96% 10%,rgba(166,87,255,.13),transparent 62%),
    var(--hsx-bg)!important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 86%);
}
html[data-mode="light"] body::before{opacity:.18;background-image:linear-gradient(rgba(25,66,120,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(25,66,120,.05) 1px,transparent 1px)}

*{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
button,input,textarea,select{font:inherit}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* HyMail V16 chrome translated to HySocial shells. */
:is(.hs-topbar,.hm-header,.ha-top,.ha-side,.hs-sidebar,.hsg-sidebar,.hsm-sidebar,.hsm-toolbar,.hp-topbar,.top-bar,.lg-topbar,.legal-nav,.nav,.hero-nav){
  background:color-mix(in srgb,var(--hsx-surface-raised) 92%,transparent)!important;
  border-color:var(--hsx-line)!important;
  color:var(--text)!important;
  -webkit-backdrop-filter:blur(24px) saturate(165%);
  backdrop-filter:blur(24px) saturate(165%);
  box-shadow:0 14px 42px rgba(0,0,0,.22);
}

/* Beautiful UI glass/chroma cards: edge-only chroma, no rainbow fills. */
:is(.hs-post,.hs-compose,.glass-card,.card,.ha-panel .card,.kpi,.hsg-card,.hsm-listing-card,.discover-card,.legal-doc,.live-page-area,.resume-banner,.onboard-card,.hm-card,.profile-card,.settings-card,.panel,.modal-content,.sheet,.drawer-panel,.match-modal-content,.filter-panel,.hs-ai-preview,.hs-search-results,.hs-event-card,.hs-poll-card){
  position:relative;
  isolation:isolate;
  border:1px solid transparent!important;
  border-radius:var(--hsx-card-radius)!important;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--hsx-surface-raised) 94%,transparent),color-mix(in srgb,var(--hsx-surface) 96%,transparent)) padding-box,
    var(--hsx-edge) border-box!important;
  color:var(--text)!important;
  box-shadow:var(--hsx-depth-soft)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  transition:transform .24s var(--hsx-spring),box-shadow .24s ease,filter .24s ease,border-color .2s ease;
}
:is(.hs-post,.glass-card,.card,.hsg-card,.hsm-listing-card,.discover-card,.kpi):hover{
  transform:translateY(-2px);
  box-shadow:0 20px 55px rgba(0,0,0,.38),0 0 22px rgba(53,234,255,.10)!important;
}
html[data-mode="light"] :is(.hs-post,.hs-compose,.glass-card,.card,.ha-panel .card,.kpi,.hsg-card,.hsm-listing-card,.discover-card,.legal-doc,.live-page-area,.resume-banner,.onboard-card,.hm-card,.profile-card,.settings-card,.panel,.modal-content,.sheet,.drawer-panel,.match-modal-content,.filter-panel,.hs-ai-preview,.hs-search-results,.hs-event-card,.hs-poll-card){
  background:
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(247,251,255,.90)) padding-box,
    var(--hsx-edge) border-box!important;
  box-shadow:var(--hsx-depth-soft)!important;
}

/* Beautiful UI tool chips, pills, tabs and task rows. */
:is(.hs-filter-pill,.chip,.pill,.badge,.tag,.status-chip,.tool-chip,.hs-ai-chip,.seg button,.hs-tab,.hm-tab,.hy-tabbar-item,.hsg-nav-item,.hsm-nav-item,.ha-navbtn){
  border-color:var(--hsx-line)!important;
  color:var(--muted)!important;
  background:color-mix(in srgb,var(--hsx-surface-raised) 82%,transparent)!important;
  border-radius:11px!important;
  transition:transform .18s var(--hsx-pop),background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
:is(.hs-filter-pill,.chip,.pill,.tool-chip,.hs-ai-chip,.seg button,.hs-tab,.hm-tab,.hy-tabbar-item,.hsg-nav-item,.hsm-nav-item,.ha-navbtn):hover{
  color:var(--text)!important;
  border-color:color-mix(in srgb,var(--accent) 60%,transparent)!important;
  background:linear-gradient(90deg,rgba(53,234,255,.13),rgba(166,87,255,.10))!important;
  box-shadow:0 0 18px rgba(53,234,255,.09);
}
:is(.hs-tab.active,.hm-tab.active,.hy-tabbar-item.active,.hsg-nav-item.active,.hsm-nav-item.active,.ha-navbtn.active,.seg button.active,[aria-current="page"]){
  color:var(--text)!important;
  border-color:var(--accent)!important;
  background:linear-gradient(90deg,rgba(53,234,255,.17),rgba(166,87,255,.14))!important;
  box-shadow:inset 3px 0 var(--accent),0 0 20px rgba(53,234,255,.12)!important;
}

/* Buttons / approval-card actions. */
:is(button,.btn,.lg-btn,.hsm-tool-btn,.hsg-btn,.da-btn,.action-btn,.primary-btn){
  min-height:40px;
  border-radius:11px!important;
  transition:transform .16s var(--hsx-pop),filter .18s ease,box-shadow .18s ease,border-color .18s ease;
}
:is(button,.btn,.lg-btn,.hsm-tool-btn,.hsg-btn,.da-btn,.action-btn,.primary-btn):active{transform:scale(.97)}
:is(.btn.primary,.primary,.btn-primary,.cta,.submit-btn,.filter-apply,.compose-send,.hs-ai-btn.primary){
  border:1px solid var(--hsx-cyan)!important;
  color:var(--text)!important;
  background:linear-gradient(110deg,rgba(53,234,255,.24),rgba(67,143,255,.24),rgba(166,87,255,.28))!important;
  box-shadow:0 0 22px rgba(53,234,255,.16)!important;
}
html[data-mode="light"] :is(.btn.primary,.primary,.btn-primary,.cta,.submit-btn,.filter-apply,.compose-send,.hs-ai-btn.primary){
  color:#102033!important;background:linear-gradient(110deg,rgba(53,214,255,.34),rgba(113,162,255,.28),rgba(187,132,255,.30))!important;
}

/* Inputs/search/prompt bars. */
:is(input,select,textarea,.hs-search input,.hsm-search-wrap input,.hsm-zip-wrap input,.ci-note,.prompt-bar){
  min-height:44px;
  max-width:100%;
  border:1px solid var(--hsx-line)!important;
  border-radius:var(--hsx-control-radius)!important;
  background:var(--bg-input)!important;
  color:var(--text)!important;
  caret-color:var(--accent);
}
:is(input,select,textarea):focus{
  outline:none!important;
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent),0 0 22px color-mix(in srgb,var(--accent) 12%,transparent)!important;
}
::placeholder{color:color-mix(in srgb,var(--muted) 78%,transparent)!important;opacity:1}

/* Search / table / records components */
:is(table,.records-table,.filter-table){border-color:var(--hsx-line)!important;color:var(--text)!important}
:is(th,.table-head){background:color-mix(in srgb,var(--hsx-surface-raised) 90%,transparent)!important;color:var(--muted)!important}
:is(td,th){border-color:var(--hsx-line)!important}
:is(tr):hover td{background:color-mix(in srgb,var(--accent) 5%,transparent)}

/* Thinking/loading/task-row language from Beautiful UI. */
:is(.loading-state,.m-loading,.hs-ai-loading,.thinking,.task-row,.status-row,.empty-state,.empty,.error-state){
  border-color:var(--hsx-line)!important;
  color:var(--muted)!important;
}
:is(.loading-state,.m-loading,.hs-ai-loading,.thinking){
  background:radial-gradient(circle at 50% 0,rgba(53,234,255,.11),transparent 65%),color-mix(in srgb,var(--hsx-surface) 88%,transparent)!important;
  box-shadow:0 0 24px rgba(53,234,255,.07);
}
:is(.task-row,.status-row){min-height:44px;padding:9px 11px;border-bottom:1px solid var(--hsx-line)}
:is(.task-row,.status-row):last-child{border-bottom:0}

/* Modals/sheets/backdrops */
:is(.hs-modal-back,.hs-ai-modal-overlay,.hsg-modal-bg,.hsm-modal-bg,.modal-backdrop,.overlay){
  background:color-mix(in srgb,var(--hsx-bg) 76%,transparent)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
:is(.modal-content,.sheet,.drawer-panel,.match-modal-content,.filter-panel){
  width:min(680px,calc(100vw - 24px));
  max-height:min(88dvh,920px);
  overflow:auto;
}

/* Bottom navigation */
:is(.hy-tabbar,.hm-tabbar,.hs-mobile-tabs,.mobile-tabbar){
  border-color:var(--hsx-line)!important;
  background:color-mix(in srgb,var(--hsx-surface-raised) 94%,transparent)!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  box-shadow:0 -14px 40px rgba(0,0,0,.28);
}

/* Typography and contrast normalization. */
:is(p,.sub,.subtitle,.hint,.muted,.desc,.description,.card-hint){color:var(--muted)!important}
:is(h1,h2,h3,h4,.title,.card-title,.section-title,.hs-section-title){color:var(--text)!important}
a{color:color-mix(in srgb,var(--accent) 82%,var(--text))}

/* Theme toggle — explicit because the global theme engine intentionally no longer injects one. */
#hysocial-theme-toggle{
  position:fixed;right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:10050;width:44px;height:44px;display:grid;place-items:center;padding:0;
  border:1px solid transparent!important;border-radius:14px!important;
  background:linear-gradient(145deg,var(--hsx-surface-raised),var(--hsx-surface)) padding-box,var(--hsx-edge) border-box!important;
  color:var(--text)!important;box-shadow:0 10px 30px rgba(0,0,0,.36),0 0 18px rgba(53,234,255,.16)!important;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  font-size:19px;line-height:1;cursor:pointer;
}
#hysocial-theme-toggle:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.42),0 0 24px rgba(53,234,255,.22)!important}

/* Remove legacy theme-green defaults while retaining semantic online/success green. */
[style*="color:#35eaff"],[style*="color: #35eaff"]{color:var(--accent)!important}
[style*="background:#35eaff"],[style*="background: #35eaff"]{background:var(--accent)!important}
[style*="border-color:#35eaff"],[style*="border-color: #35eaff"]{border-color:var(--accent)!important}

/* Desktop: use the canvas rather than leaving dead margins. */
@media (min-width:1200px){
  :is(.hs-main,.hm-main,.hsg-main,.hsm-main,.ha-main,.hp-main,.settings-main,.content-main){
    padding-left:clamp(20px,2vw,34px)!important;padding-right:clamp(20px,2vw,34px)!important;
  }
  :is(.hs-feed,.feed-column,.content-column){max-width:760px}
  :is(.hs-right,.right-sidebar,.aside-right){min-width:280px}
}

/* Tablet / fold-open: preserve two useful columns but collapse decorative rails. */
@media (min-width:700px) and (max-width:1100px){
  :is(.hs-sidebar,.hsg-sidebar,.hsm-sidebar,.ha-side){width:min(230px,28vw)!important}
  :is(.hs-right,.right-sidebar){display:none!important}
  :is(.hs-main,.hm-main,.hsg-main,.hsm-main,.ha-main,.hp-main,.settings-main){padding:16px!important}
  :is(.grid,.card-grid,.listing-grid,.discover-grid){gap:14px!important}
}

/* Folded phones / iPhone family */
@media (max-width:699px){
  :root{--hsx-card-radius:16px;--hsx-gutter:12px}
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  :is(.hs-main,.hm-main,.hsg-main,.hsm-main,.ha-main,.hp-main,.settings-main,.hp-content,.hs-wrap,.hm-content){
    width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important;margin-left:0!important;margin-right:0!important;
  }
  :is(.hs-post,.hs-compose,.glass-card,.card,.hsg-card,.hsm-listing-card,.discover-card,.legal-doc,.onboard-card,.profile-card,.settings-card){
    width:100%;max-width:100%;border-radius:16px!important;
  }
  :is(.hs-sidebar,.hsg-sidebar,.hsm-sidebar,.ha-side,.drawer,.side-panel){
    max-width:min(88vw,340px)!important;
  }
  :is(.grid,.card-grid,.listing-grid,.discover-grid,.stats-grid,.kpi-grid){grid-template-columns:1fr!important;gap:12px!important}
  :is(.toolbar,.actions,.button-row,.filter-row,.compose-actions){gap:8px;flex-wrap:wrap}
  :is(.toolbar,.actions,.button-row,.filter-row,.compose-actions)>*{max-width:100%}
  :is(input,select,textarea){font-size:16px!important}
  :is(.modal-content,.sheet,.drawer-panel,.match-modal-content,.filter-panel){
    width:calc(100vw - 16px)!important;max-width:none!important;max-height:calc(100dvh - 24px)!important;border-radius:18px!important;
  }
  :is(.hy-tabbar,.hm-tabbar,.hs-mobile-tabs,.mobile-tabbar){
    padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
  }
  #hysocial-theme-toggle{right:12px;bottom:calc(82px + env(safe-area-inset-bottom));width:42px;height:42px;border-radius:13px!important}
}

/* Very narrow folded screens */
@media (max-width:380px){
  :is(.hs-main,.hm-main,.hsg-main,.hsm-main,.ha-main,.hp-main,.settings-main,.hp-content,.hs-wrap,.hm-content){padding-left:9px!important;padding-right:9px!important}
  :is(.hs-post,.hs-compose,.glass-card,.card,.hsg-card,.hsm-listing-card,.discover-card){border-radius:14px!important}
  :is(.chip,.pill,.hs-filter-pill,.tool-chip){font-size:11px!important;padding-inline:8px!important}
}

/* Large unfolded fold and tablets: use width intentionally. */
@media (min-width:800px) and (max-width:1180px){
  :is(.listing-grid,.discover-grid,.card-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Light mode rescue: never permit white-on-white legacy declarations. */
html[data-mode="light"] :is(body,main,section,article,div,span,p,label,h1,h2,h3,h4,h5,h6,button,a){text-shadow:none}
html[data-mode="light"] :is(.hsx-force-dark,.media-overlay){color:#fff!important}
html[data-mode="light"] :is(.hs-sidebar,.hsg-sidebar,.hsm-sidebar,.ha-side,.hs-topbar,.hm-header,.hsm-toolbar,.hp-topbar,.top-bar,.lg-topbar){
  background:rgba(250,253,255,.88)!important;
}
html[data-mode="light"] :is(.hs-filter-pill,.chip,.pill,.tool-chip,.hs-ai-chip,.seg button,.hs-tab,.hm-tab,.hy-tabbar-item,.hsg-nav-item,.hsm-nav-item,.ha-navbtn){
  background:rgba(255,255,255,.78)!important;color:var(--muted)!important;
}

@media (prefers-reduced-motion:reduce),[data-reduce-motion="true"]{
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Feed mobile packing — no clipped visibility selector or filter pills. */
@media (max-width:699px){
  .hs-searchbar{width:100%;gap:6px!important}
  .hs-searchbar .hs-search{min-width:0;flex:1 1 auto}
  .hs-searchbar .hs-quick-btn{flex:0 0 44px;width:44px;min-width:44px}
  .hs-compose-actions{display:flex!important;flex-wrap:wrap!important;gap:4px!important;align-items:center}
  .hs-compose-actions .hs-compose-btn{flex:0 0 40px;min-width:40px!important;width:40px;height:40px;padding:6px!important}
  .hs-compose-actions .hs-visibility-select{order:20;flex:1 1 128px;min-width:118px;max-width:160px;margin-top:4px}
  .hs-compose-actions .hs-char-count{order:21;flex:0 0 auto;margin-left:auto}
  .hs-compose-actions .hs-compose-spacer{display:none!important}
  .hs-compose-actions .hs-post-btn{order:22;flex:0 0 auto;margin-top:4px}
  .hs-feed-filters{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:5px;scrollbar-width:none}
  .hs-feed-filters::-webkit-scrollbar{display:none}
  .hs-feed-filters .hs-filter-pill{flex:0 0 auto!important;white-space:nowrap;scroll-snap-align:start}
}
/* Landing light-mode contrast rescue for legacy local tokens. */
html[data-mode="light"] .hero-sub,
html[data-mode="light"] .ssub,
html[data-mode="light"] .hero-note,
html[data-mode="light"] .rep-desc,
html[data-mode="light"] .cdesc,
html[data-mode="light"] .step-desc,
html[data-mode="light"] .mc-desc,
html[data-mode="light"] .trust-text span{color:#50627a!important}
html[data-mode="light"] .hero-replace span,
html[data-mode="light"] .replace-pill{color:#41536a!important;background:rgba(255,255,255,.72)!important;border-color:rgba(50,82,126,.18)!important}
html[data-mode="light"] .hero-cta .secondary{color:#172033!important;background:rgba(255,255,255,.88)!important;border-color:rgba(50,82,126,.22)!important}
html[data-mode="light"] .cmp-table tbody tr{background:rgba(255,255,255,.78)!important}
html[data-mode="light"] .cmp-table .no{color:#8a96a8!important}
html[data-mode="light"] .trust-bar{background:rgba(255,255,255,.42)!important}

/* Landing-specific light contract: local legacy tokens must not wash out text. */
html[data-mode="light"] .nav{background:rgba(248,252,255,.92)!important;border-bottom-color:rgba(50,82,126,.16)!important}
html[data-mode="light"] .nav-links a{color:#50627a!important}
html[data-mode="light"] .nav-links a:hover{color:#101827!important;background:rgba(73,116,173,.08)!important}
html[data-mode="light"] .hero h1{color:#101827!important}
html[data-mode="light"] .hero h1 .gr,
html[data-mode="light"] .stitle .gr,
html[data-mode="light"] .cta h2 span{
  background:linear-gradient(135deg,#057f9d,#2a9ff4 42%,#9a4bff 72%,#e83fc7)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
  filter:saturate(1.18) contrast(1.12)!important;
}
html[data-mode="light"] .hero-badge{color:#b423c6!important;background:rgba(232,63,199,.08)!important;border-color:rgba(180,35,198,.22)!important}
html[data-mode="light"] .stitle,
html[data-mode="light"] .cmp-table .fn,
html[data-mode="light"] .trust-text strong,
html[data-mode="light"] .step-title,
html[data-mode="light"] .mc-title{color:#101827!important}

/* ── Authoritative HyMail / Blackhole-Chroma contract ──────────────────────
   This is the last HySocial layer. Components consume these tokens; page
   files may provide layout, but may not redefine the visual language. */
:root{
  --hs-contract-surface:var(--hsx-surface);
  --hs-contract-surface-raised:var(--hsx-surface-raised);
  --hs-contract-border:var(--hsx-line);
  --hs-contract-control:var(--bg-input);
  --hs-contract-radius:var(--hsx-card-radius);
  --hs-contract-control-radius:var(--hsx-control-radius);
  --hs-contract-gap:clamp(10px,2vw,16px);
  --hs-contract-gutter:clamp(12px,3vw,24px);
  --online:var(--success);
}
html[data-mode="light"]{
  --hs-contract-surface:rgba(255,255,255,.86);
  --hs-contract-surface-raised:rgba(255,255,255,.96);
  --hs-contract-control:rgba(255,255,255,.94);
}

/* Semantic green is reserved for status, validation, and presence. */
:is(.online,.is-online,[data-online="true"],[aria-label*="online" i],.status-online,
    .success,.is-success,.status-success,.field-hint.ok,.msg.ok){
  color:var(--online)!important;
}
:is(.success,.is-success,.status-success,.field-hint.ok,.msg.ok){
  background-color:var(--success-bg)!important;
  border-color:var(--online)!important;
}

/* Shared surface contract: cards, settings panels, sheets, and modals. */
:is(.hs-post,.hs-compose,.glass-card,.card,.settings-card,.panel,.modal-content,
    .sheet,.drawer-panel,.filter-panel,.match-modal-content,.hsg-card,
    .hsm-listing-card,.profile-card,.legal-doc){
  background:var(--hs-contract-surface)!important;
  border:1px solid var(--hs-contract-border)!important;
  border-radius:var(--hs-contract-radius)!important;
  color:var(--text)!important;
  box-shadow:var(--hsx-depth-soft)!important;
}
:is(.modal-content,.sheet,.drawer-panel,.filter-panel,.match-modal-content){
  background:var(--hs-contract-surface-raised)!important;
  max-width:min(680px,calc(100vw - 24px));
  max-height:min(88dvh,920px);
  overflow:auto;
}

/* Controls own their shape; navigation items remain controls, never cards. */
:is(.btn,.btn-primary,.btn-ghost,.hs-post-btn,.hs-follow-btn,.action-btn,
    .hsg-btn,.hsm-tool-btn,.primary-btn,.compose-send,.filter-apply,
    .hs-compose-btn,.hs-react-btn,.hs-filter-pill,.chip,.pill,.tool-chip,
    .hs-ai-chip,.seg button,.hs-tab,.hm-tab,.hy-tabbar-item,.hsg-nav-item,
    .hsm-nav-item,.ha-navbtn){
  min-height:var(--touch-target,40px);
  border-radius:var(--hs-contract-control-radius)!important;
  border-color:var(--hs-contract-border)!important;
  color:var(--text)!important;
  background:color-mix(in srgb,var(--hs-contract-surface-raised) 86%,transparent)!important;
}
:is(.hs-tab.active,.hm-tab.active,.hy-tabbar-item.active,
    .hy-tabbar-item[aria-current="page"],.hsg-nav-item.active,
    .hsm-nav-item.active,.ha-navbtn.active,.seg button.active){
  color:var(--accent)!important;
  border-color:color-mix(in srgb,var(--accent) 62%,var(--hs-contract-border))!important;
  background:color-mix(in srgb,var(--accent) 14%,var(--hs-contract-surface-raised))!important;
  box-shadow:inset 3px 0 var(--accent),0 0 18px var(--accent-glow)!important;
}
:is(.hs-filter-pill,.chip,.pill,.tool-chip,.hs-ai-chip){
  border-radius:999px!important;
  min-height:36px;
}
:is(input,select,textarea,.text-input,.select-input){
  background:var(--hs-contract-control)!important;
  border:1px solid var(--hs-contract-border)!important;
  border-radius:var(--hs-contract-control-radius)!important;
  color:var(--text)!important;
}
:is(input,select,textarea,.text-input,.select-input):focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)!important;
}

/* One responsive rhythm for feed, settings, cards, and modal gutters. */
:is(.hs-main,.hm-main,.hsg-main,.hsm-main,.settings-main,.content-main){
  padding-inline:var(--hs-contract-gutter);
}
:is(.settings-grid,.card-grid,.listing-grid,.discover-grid,.stats-grid){
  gap:var(--hs-contract-gap);
}
@media (max-width:699px){
  :is(.hs-main,.hm-main,.hsg-main,.hsm-main,.settings-main,.content-main){
    padding-inline:var(--hs-contract-gutter)!important;
  }
  :is(.modal-content,.sheet,.drawer-panel,.filter-panel,.match-modal-content){
    width:calc(100vw - 16px)!important;
    max-width:none;
    max-height:calc(100dvh - 24px);
  }
  :is(.settings-grid,.card-grid,.listing-grid,.discover-grid,.stats-grid){
    grid-template-columns:1fr!important;
  }
}