/* ShaFX modern app layer (p81) — loaded LAST on every layout. Native-app feel: glass bars, floating tab bar,
   soft elevation, sheet-style dialogs, consistent radii/motion. Pure CSS; logical properties for RTL.
   Safe to remove: nothing else depends on it. */
:root{
  --mx-r:16px; --mx-r-lg:22px;
  --mx-glass:rgba(14,18,38,.9); --mx-glass-b:rgba(255,255,255,.09);
  --mx-elev-1:0 1px 0 rgba(255,255,255,.04) inset,0 6px 18px rgba(0,0,0,.28);
  --mx-elev-2:0 1px 0 rgba(255,255,255,.06) inset,0 14px 38px rgba(0,0,0,.42);
  --mx-ease:cubic-bezier(.22,.7,.3,1);
  --mx-tab-h:62px;
}
html{scroll-padding-top:76px;-webkit-tap-highlight-color:transparent}
body{text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
:focus-visible{outline:2px solid var(--brand,#2dd4bf);outline-offset:2px;border-radius:8px}

/* ---- surfaces ---- */
.card,.panel,.kpi,.tool-card,.why-card,.post-card,.step,.tier,.dash-stat,.hero-card{
  border-radius:var(--mx-r);border-color:var(--mx-glass-b);box-shadow:var(--mx-elev-1)}
.panel-head{border-bottom-color:var(--mx-glass-b)}
.card-hoverable:hover,.tool-card:hover,.post-card:hover,.tier:hover,.why-card:hover{box-shadow:var(--mx-elev-2)}
.kpi .val{letter-spacing:-.02em}
.badge,.eyebrow,.hero-pill{letter-spacing:.02em}

/* ---- buttons / inputs ---- */
.btn,.jm-btn,.mini-btn{border-radius:14px;transition:transform .16s var(--mx-ease),box-shadow .2s var(--mx-ease),background .2s}
.btn:active,.jm-btn:active,.mini-btn:active{transform:scale(.97)}
.btn-primary{background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));box-shadow:0 8px 22px rgba(45,212,191,.28),0 1px 0 rgba(255,255,255,.35) inset}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{
  border-radius:12px;transition:border-color .15s,box-shadow .2s}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  border-color:var(--brand,#2dd4bf)!important;box-shadow:0 0 0 4px rgba(45,212,191,.16);outline:0}
@media(max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}  /* no iOS zoom */
}

/* ---- top bars: glass ---- */
.site-header,.app-topbar{background:var(--mx-glass)!important;backdrop-filter:saturate(170%) blur(18px);-webkit-backdrop-filter:saturate(170%) blur(18px);
  border-bottom:1px solid var(--mx-glass-b)}
.app-topbar h1{font-size:1.15rem;letter-spacing:-.01em}
.user-chip{border-radius:999px;box-shadow:var(--mx-elev-1)}

/* ---- desktop sidebar ---- */
@media(min-width:961px){
  .app-side{background:linear-gradient(180deg,rgba(20,26,56,.9),rgba(11,14,28,.96));border-inline-end:1px solid var(--mx-glass-b)}
  .app-nav a{border-radius:12px;transition:background .18s,color .18s,transform .18s var(--mx-ease)}
  .app-nav a:hover{transform:translateX(2px)}
  html[dir=rtl] .app-nav a:hover{transform:translateX(-2px)}
  .app-nav a.active{background:linear-gradient(90deg,rgba(45,212,191,.18),rgba(45,212,191,.05));border-color:rgba(45,212,191,.28);box-shadow:0 0 0 1px rgba(45,212,191,.06) inset}
  .app-content{max-width:1320px;margin-inline:auto}
}

/* ---- dashboard bottom tab bar (floating, native) ---- */
.dt-tabbar{display:none}
@media(max-width:900px){
  .dt-tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:9980;
    inset-inline:12px;inset-block-end:calc(10px + env(safe-area-inset-bottom));
    height:var(--mx-tab-h);padding:6px;border-radius:22px;
    background:var(--mx-glass);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
    border:1px solid var(--mx-glass-b);box-shadow:0 18px 44px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.07) inset}
  .dt-tabbar a,.dt-tabbar button{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:none;border:0;color:var(--text-3,#8b91b5);font:inherit;font-size:.66rem;font-weight:650;
    border-radius:16px;text-decoration:none;cursor:pointer;min-height:48px;transition:color .18s,background .18s,transform .14s var(--mx-ease)}
  .dt-tabbar svg{width:22px;height:22px;transition:transform .2s var(--mx-ease)}
  .dt-tabbar a:active,.dt-tabbar button:active{transform:scale(.92)}
  .dt-tabbar a.active{color:var(--brand,#2dd4bf);background:rgba(45,212,191,.13)}
  .dt-tabbar a.active svg{transform:translateY(-1px) scale(1.08)}
  .dt-tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body:has(.dt-tabbar) .app-content{padding-bottom:calc(var(--mx-tab-h) + 34px + env(safe-area-inset-bottom))}
  body:has(.dt-tabbar) .app-disclaimer{margin-bottom:calc(var(--mx-tab-h) + 26px)!important}
  .dt-tabbar .sk40-nav-badge,.dt-tabbar .sp-nav-badge{inset-block-start:2px;inset-inline-end:22%}
  body.nav-open .dt-tabbar,.app-side.open ~ .dt-tabbar{opacity:0;pointer-events:none}
  /* public quick bar -> same floating style */
  .mn-bottom{inset-inline:12px!important;inset-block-end:calc(10px + env(safe-area-inset-bottom))!important;border-radius:22px!important;
    background:var(--mx-glass)!important;backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
    border:1px solid var(--mx-glass-b)!important;box-shadow:0 18px 44px rgba(0,0,0,.5)!important;padding:6px!important}
  .mn-bottom a.active{background:rgba(45,212,191,.13)}
  body.has-bottom-nav{padding-bottom:92px}
  /* topbar compact */
  .app-topbar{padding:12px 16px!important}
  .app-content{padding:16px 14px}
  .kpi-grid{gap:12px}
}

/* ---- dialogs -> bottom sheets on phones ---- */
@media(max-width:640px){
  dialog[open],.modal-box,.modal-card,[role=dialog]:not(dialog){
    border-radius:24px 24px 0 0!important}
  dialog[open]{margin-block-end:0!important;margin-inline:0!important;inline-size:100%!important;max-inline-size:100%!important;
    inset-block-end:0;inset-block-start:auto;animation:mxSheet .28s var(--mx-ease)}
}
@keyframes mxSheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ---- tables: swipeable on phones ---- */
@media(max-width:760px){
  .panel-body:has(>table),.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{white-space:nowrap}
}

/* ---- skeleton / loading shimmer ---- */
.skel-line,.skel-card,.skel-avatar,.skel-chip{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.11),rgba(255,255,255,.04));background-size:200% 100%;animation:mxShimmer 1.3s linear infinite}
@keyframes mxShimmer{to{background-position:-200% 0}}

/* ---- scrollbars (desktop) ---- */
@media(hover:hover){
  *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
}
@media(prefers-reduced-motion:reduce){
  .dt-tabbar *,dialog[open]{animation:none!important;transition:none!important}
}
@media print{.dt-tabbar,.mn-bottom{display:none!important}}

/* the legacy JS-injected English-only bar is replaced by .dt-tabbar on dashboard pages */
body:has(.dt-tabbar) .app-bottom-nav,body:has(.dt-tabbar) .sp-bottom-nav,body:has(.dt-tabbar) .sk40-bottom-nav{display:none!important}

.dt-tabbar button,.dt-tabbar a{color:var(--text-3,#8b91b5)!important;background:transparent;box-shadow:none!important;min-width:0}
.dt-tabbar a.active{color:var(--brand,#2dd4bf)!important;background:rgba(45,212,191,.13)}
.dt-tabbar button span,.dt-tabbar button svg{color:inherit!important}