/* AutoForge "Liquid Glass" theme layer (iOS 26-style). Active only when <body class="glass">.
   Enabled by glass.js on iOS (Capacitor) or ?glass=1 on web. Android/default web untouched. */
body.glass{
  --gR:22px;--gRs:16px;
  --gFill:rgba(28,28,36,.58);--gFill2:rgba(40,40,52,.50);--gBar:rgba(22,22,30,.52);
  --gEdge:rgba(255,255,255,.14);--gSpec:rgba(255,255,255,.22);--gInner:rgba(255,255,255,.06);
  --gBlur:blur(24px) saturate(180%);--gBlurS:blur(16px) saturate(160%);
  --gSh:0 10px 30px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --gSpring:cubic-bezier(.34,1.4,.64,1);
  --line:rgba(255,255,255,.10);
  background:var(--bg);
}
body.glass::before{content:"";position:fixed;left:0;right:0;bottom:0;height:45vh;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 120%,color-mix(in srgb,var(--acb) 16%,transparent) 0%,transparent 60%)}
body.glass[data-theme=light],[data-theme=light] body.glass{
  --gFill:rgba(255,255,255,.62);--gFill2:rgba(255,255,255,.55);--gBar:rgba(255,255,255,.60);
  --gEdge:rgba(0,0,0,.10);--gSpec:rgba(255,255,255,.9);--gInner:rgba(255,255,255,.5);
  --gSh:0 10px 30px rgba(20,30,50,.14),0 2px 6px rgba(20,30,50,.10);--line:rgba(0,0,0,.10);
  background:radial-gradient(120% 60% at 50% 110%,color-mix(in srgb,var(--acb) 14%,transparent) 0%,transparent 60%),#eef1f5;
}
/* ---- glass surfaces ---- */
body.glass .card,body.glass .tile,body.glass .garage,body.glass select,body.glass input,body.glass textarea,
body.glass .seg,body.glass .gbtn,body.glass .gear,body.glass .btn.sec,body.glass .tab,body.glass .chipb,body.glass .note{
  background:var(--gFill);
  -webkit-backdrop-filter:var(--gBlurS);backdrop-filter:var(--gBlurS);
  border:1px solid var(--gEdge);
  box-shadow:inset 0 1px 0 var(--gSpec),inset 0 0 0 1px var(--gInner),var(--gSh);
}
body.glass .card,body.glass .tile,body.glass .garage{border-radius:var(--gR)}
body.glass .card.tight{border-radius:var(--gRs)}
body.glass select,body.glass input,body.glass textarea{border-radius:var(--gRs);box-shadow:inset 0 1px 0 var(--gSpec),inset 0 0 0 1px var(--gInner)}
body.glass input[type=checkbox],body.glass input[type=radio],body.glass input[type=color]{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.glass .note{background:color-mix(in srgb,var(--nbg) 70%,transparent);border-color:color-mix(in srgb,var(--nbd) 70%,transparent)}
body.glass .tile .ic,body.glass .avatar,body.glass .prow .pi{border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
/* accent fills: keep solid sheen (contrast), add specular gloss */
body.glass .tab.on{background:var(--sheen);border-color:transparent;color:var(--on)}
body.glass .btn:not(.sec),body.glass .seg button.on,body.glass .tab.on{
  position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18),0 6px 18px color-mix(in srgb,var(--acb) 35%,transparent);
}
body.glass .btn{border-radius:18px}
body.glass .btn.sm,body.glass .tab,body.glass .chipb{border-radius:999px}
body.glass .seg{border-radius:999px;padding:4px}
body.glass .seg button{border-radius:999px}
/* ---- floating glass top bar ---- */
body.glass .gear,body.glass .gbtn{border-radius:50%}
/* ---- floating pill tab bar with glass lens ---- */
body.glass #nav{
  left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:var(--navh);padding:6px;
  max-width:456px;margin:0 auto;border-radius:999px;
  background:var(--gBar)!important;-webkit-backdrop-filter:var(--gBlur)!important;backdrop-filter:var(--gBlur)!important;
  border:1px solid var(--gEdge)!important;
  box-shadow:inset 0 1px 0 var(--gSpec),inset 0 0 0 1px var(--gInner),0 18px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4)!important;
}
body.glass #nav a{border-radius:999px;overflow:visible;color:var(--mut);transition:color .25s,transform .35s var(--gSpring)}
body.glass #nav a i{background:none!important;width:auto;height:28px}
body.glass #nav a.on{color:var(--ac)}
body.glass #nav a.on::before{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),color-mix(in srgb,var(--acb) 22%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 1px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.10),0 4px 12px rgba(0,0,0,.3);
  animation:glens .45s var(--gSpring)}
body.glass #nav a.on i,body.glass #nav a.on{color:var(--txt)}
body.glass #nav a.on i{color:var(--ac)}
@keyframes glens{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
body.glass #app{padding-bottom:calc(var(--navh) + 110px)}
body.glass .bar{--gBar:rgba(18,18,24,.86);left:12px;right:12px;bottom:calc(var(--navh) + 20px + env(safe-area-inset-bottom));border-radius:26px;border:1px solid var(--gEdge);
  background:var(--gBar);-webkit-backdrop-filter:var(--gBlur);backdrop-filter:var(--gBlur);box-shadow:inset 0 1px 0 var(--gSpec),var(--gSh);max-width:456px;margin:0 auto}
body.glass .pop{border-radius:var(--gR);-webkit-backdrop-filter:var(--gBlur);backdrop-filter:var(--gBlur);box-shadow:inset 0 1px 0 var(--gSpec),var(--gSh)}
/* Home header glow: intentionally NOT styled here; identical to the non-glass app. */
body.glass .hero{--mut:#8d8d99}
/* ---- micro-interactions ---- */
body.glass .btn,body.glass .tile,body.glass .garage,body.glass .tab,body.glass .chipb,body.glass .gbtn,body.glass .gear,body.glass .seg button,body.glass .row{
  transition:transform .35s var(--gSpring),box-shadow .25s ease,background-color .25s ease}
body.glass .btn:active,body.glass .tile:active,body.glass .garage:active,body.glass .tab:active,body.glass .chipb:active,
body.glass .gbtn:active,body.glass .gear:active,body.glass .seg button:active{transform:scale(.96);transition-duration:.12s}
body.glass #nav a:active{transform:scale(.92)}
body.glass .row:active{background:rgba(255,255,255,.05)}
body.glass .tile:hover{transform:translateY(-1px)}
/* ---- readability ---- */
body.glass{--mut:#a3a3b0}
body.glass[data-theme=light],[data-theme=light] body.glass{--mut:#4f5866}
/* ---- accessibility fallbacks ---- */
@media (prefers-reduced-motion:reduce){
  body.glass *,body.glass *::before{animation:none!important;transition:none!important}
  body.glass .btn:active,body.glass .tile:active,body.glass #nav a:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  body.glass{--gFill:var(--card);--gFill2:var(--card);--gBar:var(--card)}
  body.glass *,body.glass #nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body.glass #nav,body.glass .mhead,body.glass .bar{background:var(--card)!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.glass{--gFill:var(--card);--gBar:var(--card)}
}
body.glass #app:has(.bar){padding-bottom:var(--barspace,calc(var(--navh) + 110px))}
body.glass .catnow{background:var(--gFill);-webkit-backdrop-filter:var(--gBlurS);backdrop-filter:var(--gBlurS);border:1px solid var(--gEdge);box-shadow:inset 0 1px 0 var(--gSpec),inset 0 0 0 1px var(--gInner);border-radius:16px}
body.glass .catgrid .tab{border-radius:14px}
body.glass .bar:not(.open){padding-top:6px;padding-bottom:6px}
body.glass .barhit,body.glass .vspecs summary,body.glass .fitmore summary{transition:none}
/* keep the Home header glow untouched: no outer shadows from the top bar or hero button spill into it */
body.glass .mhead .seg,body.glass .mhead .gbtn{box-shadow:inset 0 1px 0 var(--gSpec),inset 0 0 0 1px var(--gInner)}
body.glass .hero .btn:not(.sec){box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18)}