/* Mobile-only shared Yangle Figma shell. Desktop branding/layout remain unchanged. */
@media(max-width:899px){
body.yangle-mobile-tab{--bg:#EEF2E4;--surface:#FBFCF6;--surface-2:#EEF2E4;--line:#D3DCC4;--text:#0D2418;--muted:#5C7064;--g1:#CBF55C;--g2:#12A150;--g3:#0B5A33;background:#EEF2E4!important;color:#0D2418!important}
body.yangle-mobile-tab .shell{min-height:100dvh;background:#EEF2E4!important}
body.yangle-mobile-tab .topbar{display:flex!important;position:relative!important;z-index:2!important;align-items:center!important;justify-content:center!important;min-height:82px!important;height:82px!important;padding:12px 14px!important;background:transparent!important;border:0!important;backdrop-filter:none!important;box-shadow:none!important}
body.yangle-mobile-tab .topbar>.brand,body.yangle-mobile-tab .topbar>.header-create{display:none!important}
body.yangle-mobile-tab .figma-home-header{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;max-width:none!important;gap:12px!important;margin:0!important}
body.yangle-mobile-tab .figma-wordmark{display:none!important}
body.yangle-mobile-tab .figma-mobile-tab-name{display:block!important;font:800 32px/38px 'Bricolage Grotesque','Outfit',sans-serif!important;letter-spacing:-1.2px!important;color:#0D2418!important;margin:0!important;white-space:nowrap}
body.yangle-mobile-tab[data-yangle-tab="home"] .figma-wordmark{display:block!important;width:113px!important;height:38px!important;object-fit:contain!important;filter:none!important}
body.yangle-mobile-tab[data-yangle-tab="home"] .figma-mobile-tab-name{display:none!important}
body.yangle-mobile-tab .figma-header-actions{display:flex!important;gap:10px!important;align-items:center!important}
body.yangle-mobile-tab .figma-header-btn{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border:1px solid #D3DCC4!important;border-radius:50%!important;background:#FBFCF6!important;color:#0D2418!important;padding:0!important;box-shadow:none!important}
body.yangle-mobile-tab .figma-header-btn .icon{width:20px!important;height:20px!important}
body.yangle-mobile-tab .figma-notification-dot{position:absolute;top:6px;right:5px;width:10px;height:10px;border-radius:50%;background:#CBF55C;border:1.5px solid #0D2418}
body.yangle-mobile-tab .main{width:100%!important;max-width:600px!important;padding:0 12px calc(105px + env(safe-area-inset-bottom))!important;margin:0 auto!important}
body.yangle-mobile-tab .nav{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;width:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:0!important;height:66px!important;padding:7px!important;border-radius:40px!important;border:0!important;background:#0D2418!important;backdrop-filter:none!important;box-shadow:none!important;z-index:40!important}
body.yangle-mobile-tab .nav a[data-nav]{flex:1 1 20%!important;min-width:0!important;max-width:none!important;height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:3px!important;padding:6px 2px!important;border-radius:26px 9px!important;background:transparent!important;color:#D7E6D4!important;transform:none!important;box-shadow:none!important}
body.yangle-mobile-tab .nav a[data-nav] .label{display:block!important;font:500 11px/14px 'DM Sans','Inter',sans-serif!important;color:inherit!important}
body.yangle-mobile-tab .nav a[data-nav] .icon{width:22px!important;height:22px!important;display:inline-flex!important;color:inherit!important}
body.yangle-mobile-tab .nav a[data-nav].active{background:#CBF55C!important;color:#0D2418!important}
body.yangle-mobile-tab .nav a[data-nav].glows-nav-item .glows-nav-plus-only{display:none!important}
body.yangle-mobile-tab .nav a[data-nav].glows-nav-item:before{content:'✧';font-size:27px;line-height:22px}
body.yangle-mobile-tab .nav>.brand,body.yangle-mobile-tab .nav>.spacer,body.yangle-mobile-tab .nav a[href="#/admin"]{display:none!important}
/* Let the existing tab content retain its behavior and internal UI. */
body.yangle-mobile-tab:not([data-yangle-tab="home"]) .main{padding-top:8px!important}
body.yangle-mobile-tab:not([data-yangle-tab="home"]) .main .card{border-radius:24px 10px}
body.yangle-mobile-tab[data-yangle-tab="home"] .home-glows-panel{margin-top:0!important}
}
@media(max-width:899px){
html[data-theme="dark"] body.yangle-mobile-tab{--bg:#101E16;--surface:#192D21;--surface-2:#243B2B;--text:#F2F7EC;--muted:#B7C7B9;--line:#3D5848;background:#101E16!important;color:#F2F7EC!important}
html[data-theme="dark"] body.yangle-mobile-tab .shell{background:#101E16!important}
html[data-theme="dark"] body.yangle-mobile-tab .figma-mobile-tab-name{color:#F2F7EC!important}
html[data-theme="dark"] body.yangle-mobile-tab .figma-header-btn{background:#243B2B!important;color:#F2F7EC!important;border-color:#3D5848!important}
html[data-theme="dark"] body.yangle-mobile-tab .figma-wordmark{filter:brightness(0) invert(94%)!important}
}

/* Premium mobile wordmarks — same typographic DNA as the Figma Yangle logo. */
@media(max-width:899px){
body.yangle-mobile-tab:not([data-yangle-tab="home"]) .figma-mobile-tab-name{
  font-family:'Bricolage Grotesque','Outfit',sans-serif!important;
  font-size:32px!important;font-weight:800!important;line-height:38px!important;
  letter-spacing:-1.2px!important;text-transform:none!important;
  color:#0D2418!important;white-space:nowrap;
}
body.yangle-mobile-tab .nav{
  background:linear-gradient(162deg,#17412D 0%,#102D20 44%,#0D2418 100%)!important;
  border:1px solid rgba(230,255,220,.15)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(8,39,22,.12)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
body.yangle-mobile-tab .nav a[data-nav].active{
  background:linear-gradient(160deg,#D7FF75 0%,#CBF55C 62%,#B9E951 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 2px 7px rgba(8,30,14,.12)!important;
}
html[data-theme="dark"] body.yangle-mobile-tab:not([data-yangle-tab="home"]) .figma-mobile-tab-name{color:#F2F7EC!important}
}