/* =========================================================
   ZMC - iOS Liquid Glass (clean)
   Load AFTER app.css. Visual overlay only, no markup changes.
   Public site: dark by default, light automatically.
   Dashboard / admin (body.shell): light glass.
   ========================================================= */

:root{
  --lg-tint:#0a84ff;
  --lg-spring:cubic-bezier(.32,.72,0,1);
  --lg-blur:blur(26px) saturate(180%);
  --lg-glass:rgba(44,44,50,.55);
  --lg-glass-solid:rgba(28,28,32,.92);
  --lg-edge:rgba(255,255,255,.14);
  --lg-edge-top:rgba(255,255,255,.28);
  --lg-fill:rgba(120,120,128,.24);
  --lg-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 18px 44px rgba(0,0,0,.42);
  --pop:rgba(28,28,32,.94);
  --wall:
    radial-gradient(55% 45% at 12% -4%,rgba(94,92,230,.30),transparent 70%),
    radial-gradient(46% 38% at 96% 12%,rgba(10,132,255,.22),transparent 70%),
    radial-gradient(60% 42% at 55% 108%,rgba(255,159,10,.09),transparent 70%),
    #000;
}

/* ---------- Base ---------- */
html{background:#000;-webkit-tap-highlight-color:transparent}
body{background:transparent;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--wall)}
::selection{background:rgba(10,132,255,.35)}
h1,h2,h3,h4{letter-spacing:-.035em}
h1{font-weight:800}
:focus-visible{outline:3px solid rgba(10,132,255,.55);outline-offset:3px}

/* ---------- Header pill ---------- */
.hd .pill{
  background:var(--lg-glass);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:0;box-shadow:var(--lg-shadow);
}
.nav>a,.nav>.dd>button{border-radius:999px;transition:background .25s,color .25s}
.nav>a:hover,.nav>.dd>button:hover{background:var(--lg-fill);color:var(--tx)}
.nav>a[aria-current]{background:var(--lg-fill);color:var(--tx)}
.signin:hover,.lang summary:hover{color:var(--tx)}
.mega,.lang ul{
  background:var(--pop);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:0;border-radius:24px;box-shadow:var(--lg-shadow);
}
.mega h3{color:var(--tx)}
.mega a{border-radius:12px;padding:.35rem .5rem;margin-inline:-.5rem;transition:background .2s,color .2s}
.mega a:hover{background:var(--lg-fill);color:var(--tx)}
.lang li a:hover,.lang li a[aria-current]{background:var(--lg-fill)}

/* ---------- Buttons ---------- */
.btn{border:0;transition:transform .35s var(--lg-spring),opacity .2s,background .2s}
.btn:active{transform:scale(.96)}
.btn.p{background:var(--lg-tint);color:#fff;box-shadow:0 8px 22px rgba(10,132,255,.35)}
.btn.p:hover{background:#3d9bff}
.btn.s{background:var(--lg-fill);color:var(--tx);border:0}
.btn.s:hover{background:rgba(120,120,128,.34);border:0}
.signin{background:transparent}
.burger{border:0;background:var(--lg-fill);border-radius:50%}

/* ---------- Drawer ---------- */
.drawer{background:var(--lg-glass-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
.drawer nav>a,.drawer summary{border-radius:14px;padding-inline:.4rem;border-bottom-color:var(--line)}
.drawer nav>a:active,.drawer summary:active{background:var(--lg-fill)}
.langrow a{border:0;background:var(--lg-fill)}
.langrow a[aria-current]{background:rgba(10,132,255,.18);color:var(--lg-tint)}

/* ---------- Public content surfaces ---------- */
body:not(.shell) :is(.case,.svc,.post,.aside-card,.band-in,.faq details,.empty,.auth-card){
  background:var(--lg-glass);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:0;border-radius:24px;box-shadow:var(--lg-shadow);
}
body:not(.shell) .empty{border:1px dashed var(--line);box-shadow:none}
body:not(.shell) .faq details{padding:1.2rem 1.4rem;margin-bottom:.7rem}
body:not(.shell) .faq details:last-child{border-bottom:0}
.case,.svc,.post{transition:transform .5s var(--lg-spring),background .25s}
@media (hover:hover){.case:hover,.svc:hover,.post:hover{transform:translateY(-4px)}}
a.case:hover{border-color:transparent}
.svc:hover{translate:none}
.plat .badge-i{border:0;background:var(--lg-fill);border-radius:16px}
.tag{background:rgba(10,132,255,.16);color:var(--lg-tint)}
.plat li a,.filters a,.pager a{border:0;background:var(--lg-fill);color:var(--mu)}
.filters a.on,.filters a:hover,.plat li a:hover{background:rgba(10,132,255,.18);color:var(--lg-tint)}
.pager span{background:var(--lg-tint);border:0;color:#fff}
.step::before{background:transparent;border-color:var(--lg-tint)}
.post img,.prose img{border-radius:18px}

/* ---------- Forms ---------- */
.field input,.field select,.field textarea,.cw-f input[type=text],.errpage .search input{
  background:var(--lg-fill);border:0;border-radius:14px;color:var(--tx);
}
.field input:focus,.field select:focus,.field textarea:focus{
  background:var(--lg-fill);border:0;box-shadow:0 0 0 3px rgba(10,132,255,.45);
}
.field.bad input,.field.bad select,.field.bad textarea{box-shadow:0 0 0 2px var(--danger)}
.field label,.lbl{color:var(--tx)}
.check input{accent-color:var(--lg-tint)}
.alert{border:0;border-radius:16px}
.alert.ok,.alert.success{background:rgba(48,209,88,.14);color:#30d158}
.alert.error{background:rgba(255,69,58,.14);color:#ff6b62}
.alert.info{background:rgba(10,132,255,.14);color:#64b5ff}
.auth-side{background:var(--lg-glass);border-inline-end:0;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
body:not(.shell) .auth-card{padding:2rem}

/* ---------- Footer ---------- */
.ft{background:var(--lg-glass);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border-top:1px solid var(--line)}
.fg h4,.legal a:hover{color:var(--tx)}
.fg li a:hover,.crumbs a:hover,.link,.auth-links a,.prose a,.check a{color:var(--lg-tint)}
.fg li a:hover{color:var(--tx)}

/* ---------- Chat widget (cw) ---------- */
.cw{background:var(--pop);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:0;border-radius:26px;box-shadow:var(--lg-shadow)}
.cw-h{border-bottom-color:var(--line)}
.cm{background:var(--lg-fill)}
.cm.me{background:var(--lg-tint);color:#fff}
.cw-f .ib{border:0;background:var(--lg-fill)}
.cw-f .ib.p{background:var(--lg-tint);color:#fff}

/* ---------- Scrollbar ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(120,120,128,.5) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(120,120,128,.5);border-radius:999px}

/* =========================================================
   LIGHT MODE (public site only)
   ========================================================= */
@media (prefers-color-scheme:light){
  :root{
    --lg-glass:rgba(255,255,255,.68);
    --lg-glass-solid:rgba(255,255,255,.95);
    --lg-fill:rgba(120,120,128,.14);
    --lg-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 34px rgba(60,60,90,.12),0 0 0 .5px rgba(60,60,67,.08);
    --wall:
      radial-gradient(55% 45% at 10% -4%,rgba(120,110,255,.26),transparent 70%),
      radial-gradient(46% 38% at 98% 12%,rgba(10,132,255,.20),transparent 70%),
      radial-gradient(60% 42% at 55% 108%,rgba(255,170,60,.16),transparent 70%),
      #f2f2f7;
  }
  html{background:#f2f2f7}
  body:not(.shell){
    --bg:#f2f2f7;--bg2:rgba(255,255,255,.7);--bg3:rgba(255,255,255,.9);
    --line:rgba(60,60,67,.14);--tx:#111114;--mu:rgba(60,60,67,.68);--pop:rgba(255,255,255,.96);
    --danger:#d92d20;
  }
  body:not(.shell) :is(.markets strong,.stats b,.prose h2,.prose h3,.prose blockquote,.svc .price){color:var(--tx)}
  body:not(.shell) .prose{color:rgba(60,60,67,.85)}
  body:not(.shell) .map text{fill:var(--tx)}
  body:not(.shell) .map .hubl{fill:var(--tx)}
  body:not(.shell) .land{stroke:rgba(60,60,67,.35)}
  body:not(.shell) .plat .badge-i{color:var(--tx)}
  body:not(.shell) .alert.ok,body:not(.shell) .alert.success{color:#1f9d45}
  body:not(.shell) .alert.error{color:#d92d20}
  body:not(.shell) .alert.info{color:#0a6fd6}
  .step::before{background:var(--bg)}
  .field select option{color:#111}
  ::selection{background:rgba(10,132,255,.25)}
}

/* =========================================================
   APP SHELL (dashboard + admin) - light glass
   ========================================================= */
body.shell{
  --lg-glass:rgba(255,255,255,.7);
  --lg-fill:rgba(120,120,128,.12);
  --lg-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 28px rgba(60,60,90,.10),0 0 0 .5px rgba(60,60,67,.08);
  --wall:
    radial-gradient(55% 40% at 8% -6%,rgba(120,110,255,.22),transparent 70%),
    radial-gradient(46% 36% at 98% 8%,rgba(10,132,255,.16),transparent 70%),
    #f2f2f7;
  color:var(--ink);
}
html:has(body.shell){background:#f2f2f7}
.shell .topbar{background:var(--lg-glass);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border-bottom:1px solid rgba(60,60,67,.1)}
.shell .iconbtn{border:0;background:var(--lg-fill)}
.shell .panel,.shell .kpi,.shell .chat-list,.shell .chat-pane,.shell .editor,.shell .media-item{
  background:var(--lg-glass);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:0;border-radius:22px;box-shadow:var(--lg-shadow);
}
.shell .kpi b{letter-spacing:-.04em}
.shell .modal .box{border-radius:26px}
.shell .tbl th{border-bottom-color:rgba(60,60,67,.12)}
.shell .tbl td{border-bottom-color:rgba(60,60,67,.08)}
.shell .tbl tr:hover td{background:rgba(120,120,128,.07)}
.shell .badge{font-weight:650}
.shell .badge.ok{background:rgba(48,209,88,.16);color:#1f9d45}
.shell .badge.bad{background:rgba(255,69,58,.14);color:#d92d20}
.shell .badge.warn{background:rgba(255,159,10,.18);color:#b36b00}
.shell .badge.info{background:rgba(10,132,255,.14);color:#0a6fd6}
.shell .btn.p{background:var(--lg-tint);color:#fff}
.shell .btn.p:hover{background:#3d9bff}
.shell .btn.s{background:var(--lg-fill);border:0;color:var(--ink)}
.shell .field input,.shell .field select,.shell .field textarea,.shell .toolbar input,.shell .toolbar select,.shell .chat-pane input[type=text]{
  background:var(--lg-fill);border:0;border-radius:12px;
}
.shell .field input:focus,.shell .field select:focus,.shell .field textarea:focus{background:var(--lg-fill);box-shadow:0 0 0 3px rgba(10,132,255,.4)}
.shell .side{background:rgba(20,20,24,.92);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
.shell .side a{border-radius:12px}
.shell .side a[aria-current=page]{background:rgba(10,132,255,.22)}
.shell .side a[aria-current=page]::before{background:var(--lg-tint)}
.shell .side .cnt{background:var(--lg-tint);color:#fff}
.shell .bars i,.shell .hbar i{background:var(--lg-tint)}
.shell .progress div.done::before{background:var(--lg-tint)}
.shell .msg{background:var(--lg-fill)}
.shell .msg.self{background:var(--lg-tint);color:#fff}
.shell .msg.staff{background:rgba(48,209,88,.14)}
.shell .notif.unread{background:linear-gradient(90deg,rgba(10,132,255,.08),transparent)}
.shell .notif .dot{background:var(--lg-tint)}

/* ---------- Phones: lighter blur ---------- */
@media (max-width:640px){
  :root{--lg-blur:blur(18px) saturate(170%)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd .pill,.mega,.drawer,.cw,.ft{background:var(--lg-glass-solid)}
  body:not(.shell) :is(.case,.svc,.post,.aside-card,.band-in,.faq details){background:var(--lg-glass-solid)}
}
@media (prefers-reduced-motion:reduce){.btn,.case,.svc,.post{transition:none}}