/* FITRICH App v45 — immersive live and a lighter, feed-first mobile system. */

/* The app should feel like a continuous editorial feed, not a framed dashboard. */
.app-main{--feed-line:rgba(11,13,12,.14)}
.card{border:0;box-shadow:none}
.home-grid>.card,.routine-layout>.card,.member-layout .card,.profile-layout .card{border:0}
.home-grid{gap:0}
.home-grid>.card{margin:0;border-bottom:1px solid var(--feed-line)}
.home-product-showcase{border:0!important;background:var(--fitrich-paper)}
.home-product-controls button{border:0;border-radius:50%;background:var(--fitrich-stone)}
.home-product-card{border:0;background:#eef0ed}
.home-product-copy{border-top:0;background:rgba(255,255,255,.72)}
.campaign-card{border:0!important}
.sovereign-mini{border:0!important}
.quick-card{background:var(--fitrich-paper)}
.quick-grid{gap:0;border-top:1px solid var(--feed-line)}
.quick-grid button{border:0;border-bottom:1px solid var(--feed-line);background:transparent}
.quick-grid button:nth-child(odd){border-right:1px solid var(--feed-line)}
.quick-grid i{border-radius:50%}

/* Shop follows a compact social-commerce feed: media first, minimal chrome. */
.shop-intro{padding-bottom:22px;margin-bottom:0;border-bottom:1px solid var(--feed-line)}
.shop-tools{position:sticky;z-index:20;top:92px;padding:11px 0;background:rgba(242,242,238,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--feed-line)}
.app-filters{gap:4px;scrollbar-width:none}.app-filters::-webkit-scrollbar{display:none}
.app-filters button,.bag-preview{border:0;border-radius:999px;background:#e2e5e1}
.app-filters button.active{background:var(--fitrich-black)}
.app-product-grid{gap:2px;margin-top:2px;background:var(--fitrich-canvas)}
.app-product{border:0;background:var(--fitrich-paper)}
.app-product.ready{border:0;box-shadow:none}
.app-product:hover{border:0;transform:none}
.app-product-art{border:0}
.app-product-copy{border:0;padding-top:14px}
.app-product-copy .product-plus{border:0;border-radius:50%}

/* Routine becomes two uninterrupted chapters instead of two framed widgets. */
.routine-layout{gap:0;background:var(--fitrich-paper)}
.routine-builder{border-bottom:1px solid var(--feed-line)}
.builder-row,.builder-row:first-of-type{border-color:var(--feed-line)}
.builder-row button{border:0;border-radius:999px;background:#e4e6e2}
.builder-row button.active{background:var(--fitrich-black)}
.routine-result{border:0;min-height:560px}
.routine-result ol{border-bottom:1px solid rgba(11,13,12,.16)}

/* Member is one identity canvas followed by list-style account information. */
.member-layout{gap:0}
.member-hero{border:0}
.member-panel{gap:0;background:var(--fitrich-paper)}
.member-panel .card{border-bottom:1px solid var(--feed-line);background:var(--fitrich-paper)!important}
.points-card{grid-column:auto}
.benefit-grid{gap:0;margin-top:0;background:var(--fitrich-paper)}
.benefit-grid article,.benefit-grid article:nth-child(2){border:0;border-bottom:1px solid var(--feed-line);background:transparent}

/* Profile uses a clean account header and native-style settings rows. */
.profile-layout{gap:0;background:var(--fitrich-paper)}
.profile-card{border:0;border-bottom:1px solid var(--feed-line)}
.settings-card{border:0}
.setting-row{border-color:var(--feed-line)}
.setting-row i{border:0;border-radius:50%}

/* TikTok-like persistent navigation: lightweight labels, no framed tiles. */
.bottom-nav{height:70px!important;padding:7px 9px calc(7px + env(safe-area-inset-bottom))!important}
.bottom-nav .nav-item,
.bottom-nav .nav-item.active{border:0!important;border-radius:0!important;background:transparent!important;color:#9ba29e!important}
.bottom-nav .nav-item i,
.bottom-nav .nav-item.active i{width:24px!important;height:24px!important;border:0!important;border-radius:50%!important;background:transparent!important;color:inherit!important;font-size:11px}
.bottom-nav .nav-item.active{color:#fff!important}
.bottom-nav .nav-item.active span{color:var(--fitrich-sage)}
.bottom-nav .nav-centre i,
.bottom-nav .nav-centre.active i{width:40px!important;height:40px!important;margin-top:-22px!important;background:linear-gradient(135deg,#ff6c68 0 48%,var(--fitrich-sage) 49% 100%)!important;color:#fff!important;box-shadow:0 0 0 4px #0b0d0c!important}

/* LIVE is a true immersive surface. Navigation stays available through the exit arrow. */
.live-exit{display:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(11,13,12,.54);color:#fff;backdrop-filter:blur(10px);font:500 18px/1 Space Grotesk}
body.live-immersive{overflow:hidden;background:#000}
body.live-immersive .app-shell{width:100%;max-width:none;min-height:100dvh;margin:0;padding-top:0;background:#000;box-shadow:none}
body.live-immersive .phase-ribbon,
body.live-immersive .side-nav,
body.live-immersive .app-header,
body.live-immersive .bottom-nav,
body.live-immersive .app-whatsapp-fab{display:none!important}
body.live-immersive .app-main{width:100%;min-height:100dvh;margin:0;padding:0!important;background:#000}
body.live-immersive #view-live.active{width:100%;height:100dvh;margin:0!important;padding:0}
body.live-immersive .live-commerce-shell{display:block;width:100%;max-width:none;height:100dvh;margin:0}
body.live-immersive .live-stage{width:100%;height:100dvh;min-height:100dvh;aspect-ratio:auto;border:0}
body.live-immersive .live-desktop-panel{display:none}
body.live-immersive .live-exit{display:grid;place-items:center;flex:0 0 auto}
body.live-immersive .live-topbar{top:max(14px,calc(env(safe-area-inset-top) + 8px));display:grid;grid-template-columns:auto minmax(0,1fr) auto}
body.live-immersive .live-host{min-width:0}
body.live-immersive .live-host>div{overflow:hidden}
body.live-immersive .live-host b,body.live-immersive .live-host small{overflow:hidden;text-overflow:ellipsis}
body.live-immersive .live-actions{bottom:max(13px,calc(env(safe-area-inset-bottom) + 9px))}
body.live-immersive .live-pinned-product{bottom:max(75px,calc(env(safe-area-inset-bottom) + 70px))}
body.live-immersive .live-comments{bottom:max(177px,calc(env(safe-area-inset-bottom) + 172px))}
body.live-immersive .live-reactions{bottom:max(190px,calc(env(safe-area-inset-bottom) + 185px))}

@media(max-width:760px){
  .app-main{padding-inline:0}
  .app-stories{padding:0 14px}
  .home-grid>.card{margin:0!important}
  .home-product-head,.home-product-hint{margin-inline:0}
  .home-product-head{padding-inline:17px}
  .home-product-hint{padding-inline:17px}
  .home-product-track{padding-inline:17px}
  .campaign-card{min-height:72dvh}
  .campaign-copy{padding:27px 22px}
  .sovereign-mini,.quick-card{padding:24px 20px}
  .shop-intro{padding:10px 18px 24px}
  .shop-tools{top:87px;padding-inline:12px}
  .app-product-grid{grid-template-columns:1fr 1fr}
  .app-product{min-height:330px}
  .app-product-copy h3{font-size:14px;line-height:1.06}
  .routine-layout,.member-layout,.profile-layout{margin:0}
  .routine-builder,.routine-result{padding:28px 20px}
  .member-hero{min-height:76dvh;padding:28px 22px}
  .member-panel .card,.benefit-grid article{padding:24px 20px}
  .profile-card{min-height:54dvh;margin:0!important;padding:34px 22px}
  .settings-card{padding:25px 20px 40px}
  .settings-head{margin-bottom:24px}
  .setting-row{min-height:61px}
}

@media(max-width:390px){
  body.live-immersive .live-topbar{left:10px;right:10px;gap:7px}
  body.live-immersive .live-host{gap:6px}
  body.live-immersive .live-host>span{width:31px;height:31px}
  body.live-immersive .live-host small{display:none}
  body.live-immersive .live-host button{padding-inline:7px}
  body.live-immersive .live-audience{gap:4px;padding:4px}
}

@media(min-width:761px){
  .app-shell{overflow:hidden}
  .member-panel{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  body.live-immersive .live-stage{scroll-behavior:auto}
}

/* v46 — FITRICH Live follows a clean social-live hierarchy. */
body.live-immersive .live-stage-backdrop,
body.live-immersive .live-copy{display:none}
body.live-immersive .live-demo-note{display:block;top:max(66px,calc(env(safe-area-inset-top) + 58px));left:12px;z-index:6;border:0;border-radius:999px;background:rgba(11,13,12,.58);font-size:5px;backdrop-filter:blur(9px)}
body.live-immersive .live-topbar{
  left:14px;right:14px;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:9px;
  align-items:center
}
.live-brand{min-width:0;display:flex;align-items:center;gap:8px}
.live-brand-logo{width:118px;height:22px;display:block;overflow:hidden}
.live-brand-logo svg{width:100%;height:auto;display:block;filter:invert(1) brightness(1.8)}
.live-brand i{padding:5px 7px;border-radius:999px;background:#ff545b;color:#fff;font:800 5px/1 Space Grotesk;font-style:normal;letter-spacing:.12em}
.live-top-metrics{display:flex;align-items:center;gap:5px}
.live-top-metrics span{min-height:30px;padding:0 9px;border-radius:999px;background:rgba(11,13,12,.48);backdrop-filter:blur(10px);display:flex;align-items:center;gap:4px;color:#fff;font:700 7px Space Grotesk}
.live-top-metrics span:first-child{color:#ff777b}.live-top-metrics b{color:#fff;font:inherit}
body.live-immersive .live-exit{width:36px;height:36px;background:rgba(11,13,12,.5);font:300 25px/1 Arial}

body.live-immersive .live-comments{
  left:14px;right:76px;
  bottom:max(151px,calc(env(safe-area-inset-bottom) + 146px));
  max-height:34dvh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  overflow:hidden
}
body.live-immersive .live-comments p{
  width:max-content;
  max-width:100%;
  padding:5px 8px;
  border-radius:11px;
  background:rgba(8,10,9,.28);
  color:#fff;
  font-size:11px;
  line-height:1.3;
  text-shadow:0 1px 5px rgba(0,0,0,.7);
  backdrop-filter:blur(5px);
  animation:fitrichLiveCommentRise .34s ease both
}
body.live-immersive .live-comments b{color:var(--fitrich-sage);font-size:10px}
@keyframes fitrichLiveCommentRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

body.live-immersive .live-reactions{
  right:17px;
  bottom:max(151px,calc(env(safe-area-inset-bottom) + 146px));
  width:52px;
  height:190px;
  display:block;
  pointer-events:none
}
body.live-immersive .live-reactions i{
  position:absolute;
  right:4px;
  bottom:0;
  color:#ff5259;
  font-size:28px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  animation:fitrichLiveHeart 2.65s ease-out both
}
body.live-immersive .live-reactions i:nth-child(2){right:17px;animation-delay:.75s}
body.live-immersive .live-reactions i:nth-child(3){right:8px;animation-delay:1.45s}
body.live-immersive .live-reactions .live-reaction-pop{right:10px;animation:fitrichLiveHeart 2.65s ease-out both}
@keyframes fitrichLiveHeart{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.65)}
  15%{opacity:1}
  70%{opacity:.9}
  100%{opacity:0;transform:translate3d(var(--heart-drift,8px),-170px,0) scale(1.3) rotate(12deg)}
}

body.live-immersive .live-pinned-product{
  left:12px;right:auto;
  bottom:max(69px,calc(env(safe-area-inset-bottom) + 64px));
  width:min(73vw,315px);
  min-height:64px;
  padding:7px;
  grid-template-columns:50px minmax(0,1fr) auto;
  gap:8px;
  border:0;
  border-radius:12px;
  background:rgba(251,251,248,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 9px 28px rgba(0,0,0,.28)
}
body.live-immersive .live-product-object{width:50px;height:50px;border-radius:8px}
body.live-immersive .live-product-copy>span{display:none}
body.live-immersive .live-product-copy h3{margin:0 0 5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.live-immersive .live-product-copy p{font-size:6px;white-space:nowrap}
body.live-immersive .live-product-cta{display:block}
body.live-immersive .live-product-cta button:first-child{min-width:66px;min-height:38px;border:0;border-radius:9px;background:var(--fitrich-sage);font-size:5px}
body.live-immersive .live-product-cta button:last-child{display:none}

body.live-immersive .live-actions{
  left:12px;right:12px;
  bottom:max(10px,calc(env(safe-area-inset-bottom) + 7px));
  grid-template-columns:minmax(0,1fr) repeat(3,42px);
  gap:7px;
  align-items:center
}
body.live-immersive .live-comment-form{height:42px;border:0;background:rgba(11,13,12,.5)}
body.live-immersive .live-comment-form input{padding-left:14px;font-size:11px}
body.live-immersive .live-round-action{width:42px;height:42px;border:0;background:rgba(11,13,12,.52);font-size:17px;backdrop-filter:blur(9px)}
body.live-immersive .live-round-action.active{background:#ff545b;transform:scale(1.08)}
body.live-immersive .live-round-action small{top:-10px;color:#fff;font-size:5px;text-shadow:0 1px 4px #000}
body.live-immersive .live-bag-action{color:var(--fitrich-sage)}

@media(max-width:390px){
  .live-brand-logo{width:102px;height:20px}
  .live-top-metrics{gap:3px}
  .live-top-metrics span{min-height:28px;padding-inline:6px;font-size:5.5px}
  body.live-immersive .live-comments{right:62px}
  body.live-immersive .live-pinned-product{width:calc(100vw - 84px)}
  body.live-immersive .live-product-cta button:first-child{min-width:59px}
}

@media(prefers-reduced-motion:reduce){
  body.live-immersive .live-comments p,
  body.live-immersive .live-reactions i{animation:none}
}