/* Z9 public UI — Apple-inspired Liquid Glass material layer. */
:root{
  --glass-clear:rgba(255,255,255,.48);
  --glass-regular:rgba(255,255,255,.66);
  --glass-thick:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.82);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(255,255,255,.26);
  --glass-shadow:0 18px 45px rgba(48,64,91,.10),0 2px 8px rgba(48,64,91,.05);
  --glass-shadow-soft:0 10px 28px rgba(48,64,91,.075),0 1px 4px rgba(48,64,91,.04);
  --glass-blue:#0a84ff;
  --glass-blue-deep:#0066d6;
  --glass-radius:24px;
  --glass-control-radius:18px;
  --glass-ease:260ms cubic-bezier(.22,1,.36,1);
  --bg:#edf4fb;
  --card:var(--glass-thick);
  --line:rgba(45,55,72,.105);
  --shadow:var(--glass-shadow-soft);
}

html{background:#edf4fb}
.mobile-body{
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 4%,rgba(116,204,255,.36),transparent 31%),
    radial-gradient(circle at 92% 18%,rgba(171,153,255,.23),transparent 29%),
    radial-gradient(circle at 30% 86%,rgba(92,225,197,.18),transparent 28%),
    linear-gradient(145deg,#f6fbff 0%,#eef3fb 44%,#f8f5ff 100%)!important;
}
.mobile-body::before,.mobile-body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(10px);pointer-events:none;opacity:.62}
.mobile-body::before{width:260px;height:260px;left:-110px;top:18%;background:radial-gradient(circle at 65% 40%,rgba(54,169,255,.34),rgba(141,210,255,.08) 63%,transparent 66%)}
.mobile-body::after{width:310px;height:310px;right:-155px;bottom:12%;background:radial-gradient(circle at 35% 45%,rgba(163,125,255,.25),rgba(255,153,206,.06) 62%,transparent 66%)}
.mobile-app{position:relative;z-index:1;background:rgba(247,250,255,.18)}

/* Thick material for readable content. */
.mobile-card,.price-grid article,.home-ranking,.member-mini-card,.member-card-mobile,.notice-strip,.mobile-search,.stats-triple>div{
  border:1px solid var(--glass-line)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.58))!important;
  box-shadow:var(--glass-inner),var(--glass-shadow-soft)!important;
  -webkit-backdrop-filter:blur(28px) saturate(155%);
  backdrop-filter:blur(28px) saturate(155%);
}
.mobile-card,.member-card-mobile,.member-mini-card,.home-ranking{border-radius:var(--glass-radius)!important}
.mobile-card{transition:transform var(--glass-ease),box-shadow var(--glass-ease),border-color var(--glass-ease)}

/* Clear Liquid Glass belongs to floating navigation and controls. */
.bottom-nav{
  left:50%!important;
  bottom:max(10px,var(--safe-bottom))!important;
  width:min(calc(100% - 20px),740px)!important;
  height:64px!important;
  padding:7px 10px!important;
  border:1px solid rgba(255,255,255,.76)!important;
  border-radius:25px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(239,247,255,.42))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 18px 44px rgba(30,49,78,.18),0 2px 8px rgba(30,49,78,.08)!important;
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  backdrop-filter:blur(30px) saturate(190%);
}
.bottom-nav a{min-width:58px;height:50px;border-radius:18px;transition:background var(--glass-ease),color var(--glass-ease),transform var(--glass-ease)}
.bottom-nav a.active{background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(220,239,255,.48));box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 6px 16px rgba(10,132,255,.13)}
.bottom-nav a.active .nav-icon{background:rgba(10,132,255,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.nav-icon{border-radius:12px!important}
.mobile-body{padding-bottom:calc(92px + var(--safe-bottom))!important}
.mobile-page{padding-bottom:38px}

.mobile-header:not(.simple){
  top:8px;
  width:calc(100% - 20px);
  min-height:54px;
  margin:8px 10px 4px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(241,248,255,.43))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 10px 28px rgba(46,62,88,.10)!important;
  -webkit-backdrop-filter:blur(28px) saturate(185%);
  backdrop-filter:blur(28px) saturate(185%);
}
.mobile-header .back,.floating-back,.header-count,.profile-notice-button{
  border:1px solid rgba(255,255,255,.78)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(230,241,252,.44))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(45,62,90,.09)!important;
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
}
.mobile-header .back{font-size:27px;color:#2c3440}

/* Controls react like small pieces of glass. */
.mobile-primary,.fixed-submit,.mobile-search button{
  border:1px solid rgba(255,255,255,.42)!important;
  background:linear-gradient(145deg,#178cff,#0877ec 56%,#006bd8)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 10px 24px rgba(0,105,216,.25)!important;
  border-radius:18px!important;
}
.mobile-secondary,.project-tabs button,.member-level-tabs a,.earnings-filters>a,.earnings-range>summary,.mobile-rank-tabs a,.mobile-period-tabs a,.option-chip-grid span{
  border:1px solid rgba(255,255,255,.78)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(235,244,252,.48))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 4px 12px rgba(45,62,90,.06)!important;
  -webkit-backdrop-filter:blur(18px) saturate(165%);
  backdrop-filter:blur(18px) saturate(165%);
}
.project-tabs button.active,.member-level-tabs a.active,.earnings-filters>a.active,.earnings-range>summary.active,.mobile-rank-tabs a.active,.mobile-period-tabs a.active,.option-chip-grid input:checked+span{
  border-color:rgba(10,132,255,.28)!important;
  background:linear-gradient(145deg,rgba(50,157,255,.95),rgba(0,112,231,.88))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 7px 18px rgba(0,105,216,.20)!important;
}
.mobile-form input,.mobile-form select,.mobile-form textarea,.receipt-paste-area,.earnings-range input,.nickname-editor input,.project-search{
  border:1px solid rgba(255,255,255,.76)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(237,245,252,.48))!important;
  box-shadow:inset 0 1px 1px rgba(30,49,78,.055),0 1px 0 rgba(255,255,255,.8)!important;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
input:focus,select:focus,textarea:focus{border-color:rgba(10,132,255,.42)!important;box-shadow:0 0 0 4px rgba(10,132,255,.10),inset 0 1px 1px rgba(30,49,78,.04)!important}

/* High-value feature surfaces. */
.home-hero{position:relative}.home-hero::after{content:"";position:absolute;right:34px;top:8px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(94,199,255,.18),transparent 68%);pointer-events:none}
.hero-avatar,.z9-avatar,.mini-z9{border:1px solid rgba(255,255,255,.55);background:linear-gradient(145deg,#1798ff,#48c5ff 58%,#8ddfff)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 10px 25px rgba(0,122,255,.22)!important}
.promo-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(255,255,255,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 38px rgba(38,105,174,.20)!important}
.promo-card::after,.balance-card::after,.report-grid>a::before{content:"";position:absolute;z-index:-1;left:-15%;top:-55%;width:72%;height:110%;border-radius:50%;background:linear-gradient(105deg,rgba(255,255,255,.42),rgba(255,255,255,.04) 62%);transform:rotate(18deg);pointer-events:none}
.notice-strip{border-radius:20px!important}
.balance-card,.receipt-intro,.report-grid>a{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(255,255,255,.38)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 18px 38px rgba(30,102,178,.21)!important}
.balance-card{border-radius:26px!important;background:linear-gradient(145deg,#168cf6,#2aa9fb 58%,#73d5ff)!important}
.report-grid>a{border-radius:25px!important}.report-grid>a>span{border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.member-profile-hero{border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 18px 40px rgba(16,103,183,.18)}
.member-profile-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.24),transparent 42%,rgba(95,200,255,.12));pointer-events:none}

/* Refine grouped content so the glass never becomes visually noisy. */
.menu-list,.transaction-list,.quick-links,.mobile-ranking-list{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.61))!important}
.menu-list>a,.transaction-list>div,.quick-links a,.mobile-ranking-row,.compact-prices>div,.order-summary-grid{border-color:rgba(61,72,91,.085)!important}
.menu-icon{border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 12px rgba(33,48,72,.10)}
.order-history-card,.payment-card{box-shadow:var(--glass-inner),var(--glass-shadow-soft)!important}
.order-status-actions>span,.tag-row span,.member-photo i,.profile-main .accepting{border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.earnings-metrics,.locked-stats{background:rgba(228,243,255,.48)!important}.earnings-metrics>div:nth-child(n+4){background:rgba(255,255,255,.42)!important}
.verified-dispatch-card,.companion-earnings-card{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(232,246,255,.60))!important}
.verified-dispatch-grid>div,.parsed-people>div,.readonly-price-list,.receipt-guide pre,.rating-result,.review-note{border:1px solid rgba(255,255,255,.7);background:rgba(244,249,254,.64)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.notice-popover-panel,.earnings-range form{border:1px solid rgba(255,255,255,.82)!important;background:rgba(248,252,255,.78)!important;box-shadow:var(--glass-inner),0 24px 64px rgba(30,49,78,.20)!important;-webkit-backdrop-filter:blur(32px) saturate(180%);backdrop-filter:blur(32px) saturate(180%)}

@media(hover:hover){
  .mobile-card:hover,.member-card-mobile:hover,.member-mini-card:hover{border-color:rgba(255,255,255,.96)!important;box-shadow:var(--glass-inner),var(--glass-shadow)!important;transform:translateY(-2px)}
  .bottom-nav a:hover{background:rgba(255,255,255,.36)}
}
@media(min-width:761px){
  .mobile-app{border:1px solid rgba(255,255,255,.76)!important;background:rgba(255,255,255,.25)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 30px 100px rgba(39,56,83,.18)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .bottom-nav{bottom:34px!important;width:min(720px,calc(100% - 44px))!important;border-radius:26px!important}
}
@media(max-width:390px){.mobile-header:not(.simple){width:calc(100% - 14px);margin-left:7px;margin-right:7px}.bottom-nav{width:calc(100% - 14px)!important}.mobile-page{padding-left:10px;padding-right:10px}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .mobile-card,.bottom-nav,.mobile-header:not(.simple),.mobile-secondary,.project-tabs button,.member-level-tabs a{background:#f8fbff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mobile-card,.bottom-nav,.mobile-header:not(.simple){background:rgba(249,252,255,.96)!important}
}