/* ════════════════════════════════════════════════════════════════
   ذكاء على الهواء · v2 theme (ذكاء مشع dark). Source of truth: ai-on-air-v2-package/design/tokens.css.
   Pages: <body class="air-page"> + <div class="air-grid" aria-hidden="true"></div> as the first child.
   Dashboard / forms: .air-page--nogrid. Coming soon: .air-grid--top. Green page: .air-page--green.
   Arabic: no letter-spacing (the design's -.02em applies to Latin only). Digits are Latin.
═════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Graphik Arabic";src:url(/fonts/webinar/GraphikArabic-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(/fonts/webinar/GraphikArabic-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(/fonts/webinar/GraphikArabic-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(/fonts/webinar/GraphikArabic-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --air-bg:#030303;--air-bg-2:#0A0A0A;--air-bg-3:#1F1F1F;
  --air-block:rgba(20,20,20,.86);--air-block-2:rgba(255,255,255,.07);--air-border:rgba(255,255,255,.10);
  --air-text:#E4EAE6;--air-text-2:#AEB6B1;--air-text-3:#7D857F;
  --air-green:#31E931;--air-on-green:#0A0A0A;--air-white:#FFFFFF;--air-black:#0A0A0A;--air-live:#FF3B30;
  --air-green-page-bottom:#1C9A28;
  --air-ink-2:#6B716E;--air-paper-2:#F2F3F1;--air-field:#262626;
  --air-font:"Graphik Arabic",system-ui,sans-serif;
  --air-h1:68px;--air-h2:46px;--air-h2-dash:54px;--air-h3:34px;--air-body:15px;--air-small:13px;--air-caption:12px;
  --air-glow-green:0 0 18px rgba(49,233,49,.18),0 0 2px rgba(49,233,49,.24);
  --air-glow-white:0 0 14px rgba(228,234,230,.18);
  --air-pad:64px;--air-header:112px;
  --air-radius-xl:28px;--air-radius-lg:24px;--air-radius-md:16px;--air-radius-pill:999px;
  --air-btn-h:52px;--air-btn-h-sm:44px;--air-input-h:56px;
  color-scheme:dark;
}
@media (max-width:600px){:root{--air-pad:20px;--air-h1:38px;--air-h2:30px;--air-h2-dash:34px;--air-h3:24px;--air-header:88px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
.air-page{position:relative;min-height:100vh;margin:0;overflow-x:hidden;background:linear-gradient(180deg,var(--air-bg) 0%,var(--air-bg-2) 55%,var(--air-bg-3) 100%);color:var(--air-text);font-family:var(--air-font);font-size:var(--air-body);line-height:1.6;font-variant-numeric:lining-nums}
.air-page--green{background:linear-gradient(180deg,#030303 0%,#0A0C0A 45%,#0D4A18 78%,var(--air-green-page-bottom) 100%)}
.air-page::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;z-index:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>") repeat}
.air-page>*{position:relative;z-index:1}
/* the header (and its drop-down menus) above the page content that follows it: same z-index → later siblings paint on top */
.air-page>.air-head{z-index:40}
/* top grid: cell = page padding, whole cells only, closed on both edges */
.air-page>.air-grid{position:absolute;z-index:0;top:120px;left:50%;transform:translateX(-50%);pointer-events:none;
  width:calc(100vw - 2 * var(--air-pad) + 1px);height:calc(9 * var(--air-pad) + 1px);
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:var(--air-pad) var(--air-pad);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 55%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 55%,transparent 100%)}
@supports (width:round(down,100px,7px)){.air-page>.air-grid{width:calc(round(down,100vw - 2 * var(--air-pad),var(--air-pad)) + 1px)}}
.air-page>.air-grid--top{top:var(--air-pad)}
.air-page--nogrid>.air-grid{display:none}

a{color:inherit}
img{max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--air-green);outline-offset:3px}
.air-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.air-i{width:18px;height:18px;flex-shrink:0}
.air-wrap{padding-inline:var(--air-pad)}
.air-skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:50;padding:10px 16px;border-radius:999px;background:var(--air-green);color:var(--air-on-green);text-decoration:none}
.air-skip:focus{top:16px}

/* type */
.air-h1{margin:0;font-size:var(--air-h1);font-weight:500;line-height:1.1;color:var(--air-green);text-shadow:var(--air-glow-green);text-wrap:balance}
.air-h2{margin:0;font-size:var(--air-h2);font-weight:500;line-height:1.1;color:var(--air-green);text-shadow:var(--air-glow-green)}
.air-h1:lang(en),.air-h2:lang(en){letter-spacing:-.02em}
.air-display{font-weight:500;line-height:1.25;text-shadow:var(--air-glow-white)}
.air-muted{color:var(--air-text-2)}

/* header + footer */
.air-head{display:flex;align-items:center;justify-content:space-between;height:var(--air-header);padding:0 var(--air-pad);flex-shrink:0}
.air-head__logo{display:block;border-radius:6px}
.air-head__logo img{height:80px;width:auto;display:block}   /* v3: 80px (54px on phones) */
.air-head__a{display:flex;gap:8px;align-items:center}
.air-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px var(--air-pad) 36px;border-top:1px solid var(--air-border);font-size:13px;color:var(--air-text-2)}
.air-foot__l{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.air-foot__l img{display:block;width:auto;opacity:.9}
.air-foot__links{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.air-foot a{color:var(--air-text-2);text-decoration:none}
.air-foot a:hover{color:var(--air-text)}
@media (max-width:600px){.air-head__logo img{height:54px}.air-foot{flex-direction:column;align-items:flex-start;padding:24px var(--air-pad) 28px}}

/* buttons */
.air-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--air-btn-h);padding:0 26px;border-radius:var(--air-radius-pill);font:500 15px/1 var(--air-font);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:filter .15s,background .15s,transform .1s}
.air-btn:active{transform:translateY(1px)}
.air-btn:disabled,.air-btn[aria-disabled="true"]{opacity:.5;cursor:default;transform:none}
.air-btn .air-i{width:17px;height:17px}
.air-page .air-btn--green,.air-btn--green{background:var(--air-green);color:var(--air-on-green);box-shadow:var(--air-glow-green)}
.air-btn--green:hover{filter:brightness(1.06)}
.air-page .air-btn--white,.air-btn--white{background:var(--air-white);color:var(--air-black)}
.air-page .air-btn--dark,.air-btn--dark{background:#262626;color:var(--air-text)}
.air-page .air-btn--soft,.air-btn--soft{background:var(--air-block-2);color:var(--air-text)}
.air-page .air-btn--black,.air-btn--black{background:var(--air-black);color:var(--air-text)}
.air-page .air-btn--ghost,.air-btn--ghost{background:transparent;color:var(--air-text);border:1.5px solid rgba(255,255,255,.35)}
.air-btn--dark:hover,.air-btn--soft:hover,.air-btn--black:hover{background:#2f2f2f}
.air-btn--ghost:hover{border-color:rgba(255,255,255,.6)}
.air-btn--sm{height:var(--air-btn-h-sm);padding:0 20px;font-size:14px}
.air-btn--42{height:42px;padding:0 18px;font-size:13.5px}
.air-btn--48{height:48px;padding:0 22px;font-size:14px}
.air-btn--lg{height:60px;padding:0 32px;font-size:16px}
.air-btn--block{width:100%}
.air-ib{width:52px;height:52px;border-radius:50%;border:0;background:#262626;color:var(--air-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;text-decoration:none}
.air-ib--soft{background:var(--air-block-2);color:var(--air-text)}
.air-ib--56{width:56px;height:56px}
.air-ib--44{width:44px;height:44px}
.air-ib:hover{background:#2f2f2f}
.air-ib:disabled{opacity:.35;cursor:default}
/* arrows are drawn pointing left (RTL «forward»); LTR mirrors them */
[dir="ltr"] .air-flip{transform:scaleX(-1)}
.air-arrow{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:500;color:var(--air-text);text-decoration:none}
.air-arrow:hover{color:var(--air-green)}

/* blocks, tags, inputs */
.air-block{border-radius:var(--air-radius-xl);background:var(--air-block);padding:28px}
.air-block--green{background:var(--air-green);color:var(--air-black)}
.air-tag{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:var(--air-radius-pill);font-size:12.5px;font-weight:500;white-space:nowrap}
.air-tag--green{background:var(--air-green);color:var(--air-black)}
.air-tag--white{background:var(--air-white);color:var(--air-black)}
.air-tag--paper{background:var(--air-paper-2);color:var(--air-black)}
.air-tag--gray{background:var(--air-block-2);color:var(--air-text)}
.air-tag--line{border:1px solid rgba(255,255,255,.25)}
.air-tag--live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--air-live);box-shadow:0 0 8px rgba(255,59,48,.6)}
.air-input,.air-textarea,.air-select{width:100%;height:var(--air-input-h);padding:0 20px;border-radius:var(--air-radius-pill);background:var(--air-field);border:1.5px solid transparent;color:var(--air-text);font:14.5px var(--air-font);outline:none}
.air-textarea{height:auto;min-height:120px;padding:16px 20px;border-radius:var(--air-radius-lg);line-height:1.7;resize:vertical}
.air-select{appearance:none;cursor:pointer}
.air-input::placeholder,.air-textarea::placeholder{color:var(--air-text-3)}
.air-input.is-err,.air-textarea.is-err{border-color:var(--air-live)}
.air-field{display:flex;flex-direction:column;gap:8px}
.air-field__l{font-size:13px;color:var(--air-text-2)}
.air-err{font-size:12.5px;color:#FF7A72}
.air-err:empty{display:none}
.air-switch{position:relative;width:46px;height:26px;border-radius:999px;background:#3a3a3a;border:0;padding:0;cursor:pointer;flex-shrink:0}
.air-switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:inset-inline-start .15s}
.air-switch[aria-checked="true"]{background:var(--air-green)}
.air-switch[aria-checked="true"]::after{inset-inline-start:23px;background:var(--air-black)}
.air-avs{display:inline-flex}
.air-av{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 25%;display:block;background:#2a2a2a;flex-shrink:0}
.air-avs .air-av{border:2px solid #0A0E0C}
.air-avs .air-av+.air-av{margin-inline-start:-10px}
.air-av--ph{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--air-text-2)}
.air-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:90;padding:12px 18px;border-radius:16px;background:#262626;color:var(--air-text);font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.air-skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:air-sk 1.4s infinite;border-radius:var(--air-radius-xl)}
@keyframes air-sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
/* keyboard focus (phase 7): fields get a solid green ring, scroll rails and composite fields too */
.air-input:focus,.air-textarea:focus,.air-select:focus{border-color:var(--air-green);box-shadow:0 0 0 1px var(--air-green)}

/* ════════════════════════════════════════════════════════════════
   v3 (ai-on-air-v3-package, 2026-10-07). Tokens are unchanged from v2; these are the v3 additions.
   Grid: .air-grid above already is the v3 grid (cell = page padding, from 120px, whole cells so both
   outer edges are closed, fades down). Live pages: no .air-grid, pure #000 (.air-page--live).
═════════════════════════════════════════════════════════════════ */
:root{--air-yt:#FF0033;--air-card:rgba(255,255,255,.045);--air-card-border:rgba(255,255,255,.09);--air-line:rgba(255,255,255,.35)}
.air-page--live{background:#000}
.air-page--live::before,.air-page--live>.air-grid{display:none}
/* «لوحة التحكم» (admins / editors only, added by JS) */
.air-page .air-btn--gline,.air-btn--gline{background:transparent;color:var(--air-green);border:1.5px solid var(--air-green);padding:0 20px}
.air-btn--gline:hover{background:rgba(49,233,49,.08)}
/* YouTube red (02b «شاهد التسجيل على YouTube») */
.air-page .air-btn--yt,.air-btn--yt{background:var(--air-yt);color:#fff}
.air-btn--yt:hover{filter:brightness(1.08)}
/* Close button: a plain two-line icon (never the X logo).
   <button class="air-close" aria-label="…"><svg class="air-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button> */
.air-close{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--air-text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.air-close:hover{background:var(--air-block-2);color:var(--air-text)}
.air-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
/* v3 footer: ذكاء مشع + the wide ذكاء على الهواء logo + © */
.air-foot__l .air-foot__wide{height:38px}
/* v3 session card (home grid, «جلسات ثانية قد تهمك»): photo 200px, meta row, bold title, speaker */
.air-card{display:flex;flex-direction:column;min-width:0;border-radius:18px;background:var(--air-card);border:1px solid var(--air-card-border);overflow:hidden;color:var(--air-text);text-decoration:none;transition:border-color .15s,background .15s}
.air-card:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.air-card__img{aspect-ratio:16/9;height:auto;background:var(--air-block-2);overflow:hidden;flex-shrink:0}
.air-card__img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.air-card__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 70% 25%,rgba(49,233,49,.22),rgba(49,233,49,0) 60%),#141414}
.air-card__ph img{width:44%;height:auto;object-fit:contain;opacity:.9}
.air-card__b{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.air-card__m{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--air-text-2);min-height:22px}
.air-card__m>span:first-child{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.air-card__t{margin:0;font-size:17px;font-weight:600;line-height:1.45;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.air-card__n{font-size:13px;color:var(--air-text-2);padding-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.air-card__pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--air-green);color:var(--air-black);flex-shrink:0}
.air-card__pill--gray{background:rgba(255,255,255,.08);color:var(--air-text)}
.air-card__pill--live{background:var(--air-live);color:#fff}
.air-card--ended{opacity:.85}
.air-card--ended .air-card__img img{filter:grayscale(1)}
.air-card--ended .air-card__t{color:var(--air-text-2)}
.air-card__rec{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--air-text);padding-top:6px}
.air-card__rec svg{width:10px;height:10px;fill:currentColor}
[dir="ltr"] .air-card__rec svg{transform:none}

/* «Continue with Google» in our own look (owner 2026-10-12): Graphik, no background, a thin outline. Google's own
   button (GSI, an iframe we can't style) sits on top, fully transparent, so the click is still Google's. */
.gx{position:relative;display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.28);overflow:hidden;cursor:pointer;transition:border-color .15s}
.gx:hover,.gx:focus-within{border-color:rgba(255,255,255,.6)}
.gx__face{display:inline-flex;align-items:center;gap:10px;font-family:"Graphik Arabic",system-ui,sans-serif;font-size:15px;font-weight:500;color:inherit;pointer-events:none}
.gx__g{flex:none;display:block}
.gx__gsi{position:absolute;inset:0;opacity:.01;display:flex;align-items:center;justify-content:center}
.gx__gsi>div{transform:scale(1.35)}