/* Yangle approved mockup alignment — 2026-10-29.
   Route-scoped, real DOM/data, no static screenshot overlay.
   Keep desktop branding untouched. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:wght@400;500;600;700&display=swap');
@media(max-width:899px){
  body.yangle-mobile-tab {
    --premium-ink:#0D2418;
    --premium-leaf:#12A150;
    --premium-lime:#CBF55C;
    --premium-paper:#EEF2E4;
    font-family:'DM Sans','Inter',sans-serif!important;
    background:var(--bg,#EEF2E4)!important;
  }
  body.yangle-mobile-tab .shell{
    background:radial-gradient(circle 255px at calc(50% + 200px) -130px,
        color-mix(in srgb,var(--g2) 10%,var(--bg)) 0 99%,transparent 100%),
      var(--bg)!important;
  }
  /* Keep exactly one primary title. ME is identified by the profile card,
     not a second text wordmark. Desktop nav/title stay as before. */
  body.yangle-mobile-tab .figma-home-header{
    width:100%!important;max-width:none!important;
    align-items:center!important;justify-content:space-between!important;
    padding:0!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .figma-home-header{
    justify-content:flex-end!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .figma-mobile-tab-name{
    display:none!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .nav [data-nav="#/me"] .label{
    display:none!important;
  }
  body.yangle-mobile-tab .figma-mobile-tab-name{
    position:relative!important;
    display:inline-flex!important;align-items:baseline!important;
    font:800 32px/38px 'Bricolage Grotesque','Outfit',sans-serif!important;
    letter-spacing:-1.2px!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="home"] .figma-mobile-tab-name,
  body.yangle-mobile-tab[data-yangle-tab="me"] .figma-mobile-tab-name{display:none!important}
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .figma-mobile-tab-name::after,
  body.yangle-mobile-tab[data-yangle-tab="glows"] .figma-mobile-tab-name::after,
  body.yangle-mobile-tab[data-yangle-tab="ynets"] .figma-mobile-tab-name::after{
    content:'';width:8px;height:8px;flex:0 0 8px;
    margin-left:4px;border-radius:7px 2px 7px 2px;background:#12A150;
  }
  body.yangle-mobile-tab .topbar{
    min-height:80px!important;height:80px!important;
    padding:12px 16px!important;
  }
  body.yangle-mobile-tab .main{
    width:100%!important;max-width:600px!important;
    padding:0 14px calc(112px + env(safe-area-inset-bottom))!important;
  }
  /* Floating dock at exactly the same inset/height on all five tabs.
     Only a fine reflective edge—not a neon glow. */
  body.yangle-mobile-tab .nav{
    box-sizing:border-box!important;
    left:12px!important;right:12px!important;
    bottom:calc(11px + env(safe-area-inset-bottom))!important;
    height:66px!important;padding:7px!important;
    background:linear-gradient(155deg,#16432E 0%,#0B3323 48%,#09281C 100%)!important;
    border:1px solid rgba(213,245,211,.21)!important;
    border-radius:36px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 15px rgba(10,36,21,.11)!important;
    backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
  }
  body.yangle-mobile-tab .nav [data-nav]{
    box-sizing:border-box!important;
    min-height:51px!important;height:51px!important;
    display:flex!important;justify-content:center!important;align-items:center!important;
    flex-direction:column!important;gap:3px!important;
    font:500 11px/14px 'DM Sans',sans-serif!important;
  }
  body.yangle-mobile-tab .nav [data-nav].active{
    background:linear-gradient(164deg,#DDFF87 0%,#CBF55C 70%,#B8EC43 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 1px 4px rgba(5,39,20,.08)!important;
    color:#0D2418!important;
  }
  body.yangle-mobile-tab .nav a[data-nav="#/me"] .label{
    display:none!important;
  }
  body.yangle-mobile-tab .nav [data-nav="#/me"] .icon{height:24px!important;width:24px!important}
  body.yangle-mobile-tab .nav a[data-nav="#/glows"]::before{display:none!important;content:none!important}
  body.yangle-mobile-tab .nav [data-nav="#/glows"] .icon{
    position:static!important;transform:none!important;
    width:22px!important;height:22px!important;margin:0 auto!important;
  }
  /* Figma Home: circular 24-segment Glow expiration progress.
     Fill = seconds remaining / 24h, not a fabricated social metric. */
  body.yangle-home .glow-item{
    display:flex!important;flex:0 0 70px!important;width:70px!important;
    min-height:104px!important;height:auto!important;
    align-items:center!important;flex-direction:column!important;
    gap:3px!important;padding:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;
    box-shadow:none!important;transform:none!important;
  }
  body.yangle-home .tray{
    width:calc(100% + 14px)!important;min-height:110px!important;
    padding:0!important;gap:11px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
  }
  body.yangle-home .glow-item .ring{
    position:relative!important;box-sizing:border-box!important;
    width:66px!important;height:66px!important;flex:0 0 66px!important;
    min-height:66px!important;min-width:66px!important;
    border-radius:50%!important;background:none!important;
    padding:7px!important;box-shadow:none!important;
  }
  body.yangle-home .glow-item .ring.glow-progress-ring{border:0!important}
  body.yangle-home .glow-item .ring.glow-progress-ring::before{
    position:absolute;content:'';inset:0;
    background:conic-gradient(from -90deg,
      #12A150 0% var(--glow-progress,100%),
      #C9D8BE var(--glow-progress,100%) 100%);
    border-radius:50%;
    -webkit-mask-image:
      radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.4px)),
      repeating-conic-gradient(#000 0deg 12deg,transparent 12deg 15deg);
    -webkit-mask-composite:source-in;
    mask-image:
      radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.4px)),
      repeating-conic-gradient(#000 0deg 12deg,transparent 12deg 15deg);
    mask-composite:intersect;
    pointer-events:none;
  }
  body.yangle-home .glow-item .ring.add{
    padding:7px!important;border:3px dashed #12A150!important;
  }
  body.yangle-home .glow-item .ring .in{
    width:100%!important;height:100%!important;border-radius:50%!important;
    display:grid!important;place-items:center!important;overflow:hidden!important;
  }
  body.yangle-home .glow-item .ring .av{
    width:100%!important;height:100%!important;min-width:0!important;
    min-height:0!important;border-radius:50%!important;object-fit:cover!important;
  }
  body.yangle-home .glow-item .name{
    font:600 11px/15px 'DM Sans',sans-serif!important;
    max-width:70px!important;color:var(--text)!important;
  }
  body.yangle-home .glow-item .glow-time-left{
    color:var(--muted)!important;
    font:400 10px/13px 'DM Sans',sans-serif!important;
    max-width:70px;white-space:nowrap;
  }
  body.yangle-home .glow-item:first-child::after{font-size:10px!important}
  body.yangle-home .home-slim-composer{
    border-radius:26px!important;
    box-shadow:0 4px 13px rgba(28,49,21,.04)!important;
  }
  body.yangle-home .main .post.card{
    border-radius:26px!important;box-shadow:0 4px 13px rgba(28,49,21,.04)!important;
  }
  body.yangle-home .main .post .actions .pop-btn{
    min-height:34px!important;border-radius:999px!important;background:#CBF55C!important;
    color:#0D2418!important;
  }
  body.yangle-home .main .post .actions .pop-btn .pop-flop-symbol{
    display:inline-flex!important;align-items:center!important;
    color:#0D2418!important;
  }
  body.yangle-home .main .post .actions .pop-btn .pop-flop-symbol svg{
    width:18px;height:18px;
  }
  /* YLinks compact action row: Away + new chat at left; settings at right. */
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-page-head{
    display:block!important;width:100%!important;margin:0 0 12px!important;
    padding:6px 0 0!important;min-height:0!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-head-actions{
    width:100%!important;display:flex!important;flex-wrap:nowrap!important;
    align-items:center!important;justify-content:flex-start!important;
    gap:8px!important;margin:0!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-presence-mini{
    order:0!important;margin:0!important;padding:0 12px!important;
    min-width:76px!important;min-height:39px!important;height:39px!important;
    border-radius:999px!important;
    font-size:12px!important;
    background:var(--surface)!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-new-btn{
    order:1!important;display:inline-grid!important;place-items:center!important;
    flex:0 0 39px!important;width:39px!important;height:39px!important;
    min-width:39px!important;min-height:39px!important;
    margin:0!important;padding:0!important;
    border-radius:14px 6px!important;
    background:linear-gradient(135deg,#91F4C2,#13D6A6)!important;
    box-shadow:0 2px 8px rgba(9,112,65,.10)!important;
    color:#0D2418!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-new-btn .icon,
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-new-btn svg{
    width:16px!important;height:16px!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-new-label{display:none!important}
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-settings-btn{
    order:2!important;margin:0 0 0 auto!important;
    flex:0 0 39px!important;width:39px!important;height:39px!important;
    min-width:39px!important;min-height:39px!important;
    border-radius:14px 6px!important;background:transparent!important;
    border:1px solid color-mix(in srgb,#12A150 45%,var(--line))!important;
    color:var(--text)!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-settings-btn .icon{width:20px!important;height:20px!important}
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-inbox-heading{
    margin:7px 0 9px!important;padding:0!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-inbox-heading h2{
    font:700 21px/26px 'Bricolage Grotesque',sans-serif!important;
    color:var(--text)!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-tabs{
    display:flex!important;width:100%!important;
    border-radius:23px!important;padding:5px!important;
    background:color-mix(in srgb,var(--surface-2) 90%,var(--surface))!important;
    margin:0 0 12px!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-tabs button{
    flex:1!important;min-width:0!important;border-radius:17px!important;
    min-height:42px!important;padding:10px!important;
    font:700 13px/18px 'DM Sans',sans-serif!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-chat-list{
    display:grid!important;gap:10px!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-chat-row{
    min-height:88px!important;
    border-radius:25px!important;
    background:var(--surface)!important;
    border:1px solid var(--line)!important;
    padding:13px 14px!important;gap:10px!important;
    box-shadow:0 3px 12px rgba(25,51,24,.035)!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-chat-row .ylink-chat-preview>.icon{
    display:none!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-chat-preview{
    font:400 13px/18px 'DM Sans',sans-serif!important;
    color:var(--muted)!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-security-note{
    display:none!important;
  }
  /* Personal: profile card serves as the visual page identity. */
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-profile-link{
    display:flex!important;align-items:center!important;
    gap:14px!important;
    min-height:121px!important;padding:17px 16px!important;
    border-radius:28px 10px!important;
    border:1px solid color-mix(in srgb,#12A150 23%,var(--line))!important;
    background:radial-gradient(circle 95px at 100% 0%,
      color-mix(in srgb,#12A150 9%,var(--surface)) 0 99%,transparent 100%),var(--surface)!important;
    box-shadow:0 5px 14px rgba(20,54,29,.06)!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-profile-link>.av,
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-profile-link>.avatar{
    flex:0 0 78px!important;width:78px!important;height:78px!important;
    min-width:78px!important;min-height:78px!important;border-radius:50%!important;
    object-fit:cover!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-heading{
    background:transparent!important;border:0!important;
    margin:12px 0 8px!important;padding:0 2px!important;min-height:0!important;
    box-shadow:none!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-heading .eyebrow{
    font:700 11px/17px 'DM Sans',sans-serif!important;
    color:#12A150!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-heading h2{
    font:800 27px/32px 'Bricolage Grotesque',sans-serif!important;
    letter-spacing:-.7px!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-space-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-space-tile{
    min-width:0!important;min-height:145px!important;
    border:1px solid var(--line)!important;
    background:var(--surface)!important;
    border-radius:25px!important;padding:16px 13px!important;
    box-shadow:0 3px 12px rgba(25,50,27,.035)!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-space-tile b{
    font:700 17px/21px 'Bricolage Grotesque',sans-serif!important;
    letter-spacing:-.25px!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="me"] .me-space-tile small{
    font:400 11px/16px 'DM Sans',sans-serif!important;color:var(--muted)!important;
  }
}
/* Avoid hard-coded white cards in dark theme while keeping original geometry. */
@media(max-width:899px){
  html[data-theme="dark"] body.yangle-mobile-tab{
    --premium-ink:#F2F7EC;--premium-paper:#101E16;
  }
  html[data-theme="dark"] body.yangle-mobile-tab .nav{
    border-color:rgba(211,250,211,.15)!important;
    background:linear-gradient(155deg,#173C2A,#0A281B)!important;
  }
  html[data-theme="dark"] body.yangle-mobile-tab .figma-mobile-tab-name::after{
    background:#CBF55C!important;
  }
  html[data-theme="dark"] body.yangle-mobile-tab[data-yangle-tab="me"] .me-profile-link,
  html[data-theme="dark"] body.yangle-mobile-tab[data-yangle-tab="me"] .me-space-tile,
  html[data-theme="dark"] body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-chat-row{
    background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important;
  }
  html[data-theme="dark"] body.yangle-mobile-tab[data-yangle-tab="ylinks"] .ylink-presence-mini{
    background:var(--surface)!important;color:var(--text)!important;
  }
}
@media (prefers-reduced-motion:reduce){
  body.yangle-mobile-tab .nav *,body.yangle-home .glow-item{transition:none!important;animation:none!important}
}