/* ZAHM zahm-app — Visual Identity System 02 skin for the functional pages
   (login / orders / about-style pages built on style.css). Loaded AFTER style.css;
   structure and scripts untouched — only tokens, fonts and the brand lockup change. */
@import url('../brand/zahm-tokens.css');
:root{
  color-scheme:dark;
  --bg:var(--zahm-void); --bg-elev:var(--zahm-carbon); --bg-card:var(--zahm-carbon); --bg-card-2:#1A1A21;
  --line:rgba(244,242,250,.08); --line-strong:rgba(244,242,250,.16);
  --txt:var(--zahm-white); --txt-soft:#A9A9B6; --txt-mute:#80808F;
  --accent:var(--zahm-violet); --accent-2:var(--zahm-ion); --accent-ink:#ffffff;
  --accent-glow:rgba(139,92,246,.35);
  --ok:var(--zahm-success); --warn:var(--zahm-warning); --danger:var(--zahm-danger);
  --radius:var(--zahm-radius-md); --radius-sm:12px; --radius-lg:var(--zahm-radius-lg);
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
  --shadow-glow:0 0 0 1px var(--line), 0 30px 80px -30px var(--accent-glow);
  --font-en:'Noto Sans',system-ui,sans-serif;
  --font-ar:'Noto Sans Arabic','Noto Kufi Arabic',system-ui,sans-serif;
  --kufi:'Noto Kufi Arabic','Noto Sans Arabic',system-ui,sans-serif;
  --sora:'Sora','Noto Sans',system-ui,sans-serif;
}
body{background:var(--bg);color:var(--txt)}
html[dir="rtl"] body{font-family:var(--font-ar)}
h1,h2,h3,h4,.h2,.display{font-family:var(--kufi);letter-spacing:0;font-weight:600}
.display{font-weight:700}
/* engineering grid instead of the ambient glow */
body::before{background:var(--bg)}
body::after{opacity:.5;background-image:linear-gradient(to right,rgba(38,38,46,.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(38,38,46,.5) 1px,transparent 1px);background-size:64px 64px}
/* nav */
.nav{background:rgba(8,8,15,.78)!important;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand .zmark{width:32px;height:32px;filter:drop-shadow(0 0 10px rgba(139,92,246,.45))}
.nav .brand .lock{display:flex;flex-direction:column;line-height:1;gap:3px}
.nav .brand .lock .en{font-family:var(--sora);letter-spacing:.16em;text-transform:uppercase;font-weight:700;font-size:15px;color:var(--txt)}
.nav .brand .lock .ar{font-family:var(--kufi);font-weight:500;font-size:12.5px;color:var(--zahm-fog)}
.nav-links a.active{background:rgba(139,92,246,.14);color:var(--txt)}
.lang-toggle{font-family:var(--sora);letter-spacing:.1em;font-size:11px}
/* buttons */
.btn{border-radius:999px;font-weight:600}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--zahm-glow)}
.btn-primary:hover{background:#7C4DEF;box-shadow:0 8px 30px var(--accent-glow)}
.btn-ghost{border-color:var(--line-strong);color:var(--txt)}
.btn-ghost:hover{color:var(--txt);border-color:var(--zahm-fog);background:rgba(244,242,250,.04)}
/* fields */
input,select,textarea,.input,.select,.textarea{background:var(--bg)!important;border-color:var(--zahm-graphite)!important;color:var(--txt)!important;border-radius:12px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(139,92,246,.22)}
.seg{border-radius:12px;background:var(--bg-elev);border:1px solid var(--zahm-graphite)}
.seg button.active{background:rgba(139,92,246,.18);color:var(--txt);box-shadow:inset 0 0 0 1px rgba(139,92,246,.4)}
/* surfaces */
.glass-panel,.auth-card,.card,.panel{background:var(--bg-card);border:1px solid var(--zahm-graphite);border-radius:var(--radius-lg);box-shadow:var(--shadow-glow)}
.glass-panel{background:linear-gradient(160deg,rgba(139,92,246,.08),rgba(20,20,25,.6))}
.card .ico{background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.28)}
.card .tag{border:1px solid rgba(139,92,246,.3)}
.feature-list .dot{background:rgba(139,92,246,.16)}
.plan.featured{border-color:rgba(139,92,246,.5)}
.bell.has{border-color:rgba(139,92,246,.45)}
.ntf.unread{background:rgba(139,92,246,.06)}
.steps .step.done{background:var(--accent)}
.eyebrow{font-family:var(--sora);letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--zahm-ion)}
/* auth side: earth render instead of the mascot stage */
.auth-side{position:relative;overflow:hidden;background:var(--bg-elev)}
.auth-side::before{content:"";position:absolute;inset:0;background:url('../brand/images/earth-hero.webp') 40% 50%/cover no-repeat;opacity:.9}
.auth-side::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,15,.9),rgba(8,8,15,.15) 60%)}
.auth-side .mascot-stage{position:relative;z-index:1}
.auth-side .mascot-stage .halo,.auth-side .mascot-stage .ring{display:none}
.auth-side .mascot-stage img.mascot{width:96px!important;margin:0 auto 18px;filter:drop-shadow(0 0 22px rgba(139,92,246,.6))}
.auth-side .lead{font-family:var(--kufi);font-weight:500;color:var(--txt)}
/* legal/about text (about.html on style.css) */
.legal h1{font-family:var(--kufi);font-weight:700}
.legal a{color:var(--zahm-ion)}
footer{border-top:1px solid var(--line)}