/* ---------- Thmanyah font (خط ثمانية) — self-hosted, offline ---------- */
@font-face{font-family:"Thmanyah";src:url("fonts/thmanyahsans-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Thmanyah";src:url("fonts/thmanyahsans-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Thmanyah";src:url("fonts/thmanyahsans-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Thmanyah";src:url("fonts/thmanyahsans-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Thmanyah";src:url("fonts/thmanyahsans-Black.otf") format("opentype");font-weight:800 900;font-style:normal;font-display:swap;}

/* ===================================================================
   NHSN Organism Explorer — Aceternity-style design system (vanilla)
   Effects: Aurora · Spotlight · Grid+Dot BG · Background Beams ·
            Card Spotlight · Meteors · Moving Border · Bento Grid ·
            Vanish Input · Text Generate
   =================================================================== */

/* ---------- Tokens (dark-first, Tailwind neutral palette) ---------- */
:root {
  --n-950:#050506; --n-900:#0a0a0b; --n-850:#111113; --n-800:#1a1a1d;
  --n-700:#26262b; --n-600:#3f3f46; --n-400:#a1a1aa; --n-300:#d4d4d8; --n-50:#fafafa;

  --bg:            var(--n-950);
  --panel:         rgba(20,20,23,.72);
  --panel-solid:   #121215;
  --head-bg:       #16161b;
  --card:          rgba(23,23,27,.60);
  --border:        rgba(255,255,255,.09);
  --border-2:      rgba(255,255,255,.16);
  --text:          #ededf0;
  --text-2:        #a1a1aa;
  --text-3:        #71717a;

  --brand:#3b82f6; --brand-2:#22d3ee; --brand-3:#8b5cf6;
  --grad-brand:linear-gradient(135deg,#2563eb 0%,#22d3ee 48%,#8b5cf6 100%);
  --cc:#f59e0b;  --cc-glow:rgba(245,158,11,.16);
  --mbi:#a78bfa; --mbi-glow:rgba(167,139,250,.16);
  --uti:#38bdf8; --uti-glow:rgba(56,189,248,.16);

  --grid-line: rgba(255,255,255,.045);
  --dot: rgba(255,255,255,.08);
  --spot-a: rgba(59,130,246,.18);
  --spot-b: rgba(139,92,246,.15);

  --radius:16px; --radius-lg:22px;
  --maxw:1180px;
  --font:"Thmanyah","Inter","Segoe UI",Tahoma,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
[data-theme="light"] {
  --bg:#f7f8fa;
  --panel:rgba(255,255,255,.82); --panel-solid:#ffffff; --head-bg:#f0f2f5;
  --card:rgba(255,255,255,.78);
  --border:rgba(9,9,11,.09); --border-2:rgba(9,9,11,.16);
  --text:#0c0d10; --text-2:#52525b; --text-3:#8a8a94;
  --brand:#2563eb; --brand-2:#0891b2; --brand-3:#7c3aed;
  --grad-brand:linear-gradient(135deg,#2563eb 0%,#06b6d4 48%,#7c3aed 100%);
  --cc:#b45309; --mbi:#6d28d9; --uti:#0369a1;
  --cc-glow:rgba(180,83,9,.12); --mbi-glow:rgba(109,40,217,.12); --uti-glow:rgba(3,105,161,.12);
  --grid-line:rgba(9,9,11,.055); --dot:rgba(9,9,11,.09);
  --spot-a:rgba(37,99,235,.12); --spot-b:rgba(124,58,237,.10);
}

*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh; position:relative;
}
a{color:inherit;text-decoration:none;}

/* ===================== Background layers ===================== */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;}
/* Grid background with radial mask fade (Aceternity "Grid and Dot Backgrounds") */
.bg-grid{
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
}
.bg-dots{
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 10%,#000 10%,transparent 75%);
          mask-image:radial-gradient(ellipse 60% 50% at 50% 10%,#000 10%,transparent 75%);
  opacity:.55;
}
/* Background beams */
.beams{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.beam{
  position:absolute; top:-30%; inset-inline-start:var(--x); width:1px; height:30vh;
  background:linear-gradient(to bottom,transparent,var(--brand),transparent);
  opacity:.30; filter:blur(.4px);
  animation:beamFall var(--d) linear var(--delay) infinite;
}
.beam:nth-child(even){background:linear-gradient(to bottom,transparent,var(--brand-3),transparent);}
@keyframes beamFall{0%{transform:translateY(0);opacity:0}10%{opacity:.4}90%{opacity:.4}100%{transform:translateY(160vh);opacity:0}}

/* ===================== Navbar (resizable/floating) ===================== */
.navbar{position:fixed;top:14px;inset-inline:0;z-index:60;display:flex;justify-content:center;padding:0 16px;transition:top .3s;}
.navbar__inner{
  width:100%;max-width:var(--maxw);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 12px 9px 16px;border-radius:999px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--panel-solid) 68%,transparent);
  backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 8px 30px rgba(0,0,0,.28);
  transition:max-width .35s cubic-bezier(.4,0,.2,1),padding .35s,background .3s;
}
.navbar.is-shrunk .navbar__inner{max-width:940px;background:color-mix(in srgb,var(--panel-solid) 88%,transparent);box-shadow:0 10px 40px rgba(0,0,0,.4);}
.brand{display:flex;align-items:center;gap:11px;}
.brand__mark{
  width:34px;height:34px;display:grid;place-items:center;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--brand) 45%,transparent));
}
.brand__mark svg{display:block;border-radius:11px;}
.brand__mark img{width:34px;height:34px;object-fit:contain;display:block;}
.brand__text{display:flex;flex-direction:column;line-height:1.15;}
.brand__wm{font-weight:800;font-size:17px;letter-spacing:-.04em;}
.brand__wm-a{color:var(--text);}
.brand__wm-b{color:var(--brand);}
.brand__sub{font-size:10.5px;color:var(--text-3);letter-spacing:0;margin-top:1px;}
.navbar__actions{display:flex;align-items:center;gap:7px;}
.nav-pill{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;
  background:transparent;border:1px solid transparent;transition:.18s;
}
.nav-pill:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent);border-color:var(--border);}
.nav-pill--icon{width:34px;padding:0;justify-content:center;}
.i-moon{display:none;}
[data-theme="light"] .i-sun{display:none;}
[data-theme="light"] .i-moon{display:block;}

/* ===================== Hero: Aurora + Spotlight ===================== */
main{position:relative;z-index:1;}
/* overflow stays on .hero__bg (not .hero) so the search dropdown can escape the section */
/* z-index:2 keeps the hero's stacking context (and its dropdown) above .container */
.hero{position:relative;z-index:2;padding:150px 20px 56px;text-align:center;isolation:isolate;}
.hero__bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
/* Aurora — animated multi-stop gradient (Aceternity aurora keyframes) */
.aurora{
  position:absolute;inset:-140px -10% auto -10%;height:560px;
  background-image:
    repeating-linear-gradient(100deg,var(--brand) 10%,var(--brand-2) 20%,var(--brand-3) 30%,#c084fc 40%,var(--brand) 50%),
    repeating-linear-gradient(100deg,transparent 0%,transparent 12%,rgba(255,255,255,.04) 16%,transparent 20%);
  background-size:300% 200%,200% 100%;
  filter:blur(72px);opacity:.30;
  animation:aurora 45s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 62% at 50% 0%,#000 30%,transparent 78%);
}
@keyframes aurora{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
/* Spotlight — the signature tilted blurred ellipse */
.spotlight{
  position:absolute;top:-180px;inset-inline-start:-8%;width:820px;height:680px;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--spot-a),transparent 62%);
  filter:blur(46px);transform:rotate(-32deg);opacity:0;
  animation:spotIn 2.4s cubic-bezier(.22,1,.36,1) .1s forwards;
}
.hero__bg::after{
  content:"";position:absolute;top:-140px;inset-inline-end:-6%;width:680px;height:560px;
  background:radial-gradient(ellipse at center,var(--spot-b),transparent 62%);
  filter:blur(52px);transform:rotate(24deg);opacity:0;
  animation:spotIn 2.4s cubic-bezier(.22,1,.36,1) .5s forwards;
}
@keyframes spotIn{to{opacity:1}}

.hero__content{position:relative;z-index:1;max-width:820px;margin:0 auto;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:5px 14px 5px 10px;
  border-radius:999px;border:1px solid var(--border);background:var(--card);
  backdrop-filter:blur(10px);font-size:11.5px;font-weight:600;letter-spacing:.05em;
  color:var(--text-2);text-transform:uppercase;
}
.eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}

/* ---------- Floating organism cards (Shopify-Editions-style depth) ---------- */
.hero__float{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.float-card{
  position:absolute;will-change:transform;transition:transform .35s cubic-bezier(.22,1,.36,1);
  opacity:0;animation:floatIn .9s cubic-bezier(.22,1,.36,1) forwards;
}
.float-card__inner{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;white-space:nowrap;
  border:1px solid var(--border-2);background:color-mix(in srgb,var(--panel-solid) 74%,transparent);
  backdrop-filter:blur(14px) saturate(160%);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
  animation:floatBob var(--bob,7s) ease-in-out infinite;
}
.float-card__code{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 13%,transparent);border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  padding:3px 8px;border-radius:7px;}
.float-card__name{font-size:12.5px;font-weight:600;font-style:italic;color:var(--text);}
@keyframes floatIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes floatBob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}
@media(max-width:1040px){.hero__float{display:none;}}

.hero__title{
  font-size:clamp(30px,5.4vw,56px);font-weight:700;letter-spacing:-.035em;line-height:1.15;margin:0 0 18px;
  color:var(--text);
}
@keyframes wordIn{to{opacity:1;filter:blur(0)}}
/* opacity handled per-segment by Text Effect */
.hero__lead{max-width:600px;margin:0 auto 34px;color:var(--text-2);font-size:16px;}

/* ---------- Vanish input ---------- */
.vanish{position:relative;max-width:620px;margin:0 auto;opacity:0;animation:wordIn .9s ease .9s forwards;z-index:20;}
@keyframes spin{to{transform:rotate(360deg)}}
.vanish__inner{
  position:relative;z-index:1;display:flex;align-items:center;gap:11px;height:58px;padding:0 8px 0 20px;
  border-radius:999px;border:1px solid var(--border-2);
  background:color-mix(in srgb,var(--panel-solid) 92%,transparent);
  backdrop-filter:blur(12px);box-shadow:0 10px 40px -12px rgba(0,0,0,.6);
  transition:border-color .25s,box-shadow .25s;
}
.vanish:focus-within .vanish__inner{
  border-color:color-mix(in srgb,var(--brand) 62%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent),0 10px 40px -12px rgba(0,0,0,.6);
}
.vanish:focus-within .vanish__icon{color:var(--brand);}
.vanish__icon{color:var(--text-3);flex-shrink:0;}
.vanish__field{position:relative;flex:1;height:100%;display:flex;align-items:center;min-width:0;}
.vanish__field input{
  width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--text);
  font-family:inherit;font-size:15.5px;padding:0;
}
.vanish__field input::-webkit-search-cancel-button{display:none;}
.vanish__ph{position:absolute;inset-inline-start:0;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;overflow:hidden;}
.vanish__ph span{
  position:absolute;inset-inline-start:0;white-space:nowrap;color:var(--text-3);font-size:15.5px;
  transform:translateY(0);opacity:1;
}
.vanish__ph span.out{animation:phOut .45s cubic-bezier(.4,0,.2,1) forwards;}
.vanish__ph span.in{animation:phIn .45s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes phOut{to{transform:translateY(-120%);opacity:0;filter:blur(4px)}}
@keyframes phIn{from{transform:translateY(120%);opacity:0;filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}
.vanish__clear{
  flex-shrink:0;width:32px;height:32px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:50%;background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text-2);transition:.15s;
}
.vanish__clear:hover{background:color-mix(in srgb,var(--text) 16%,transparent);color:var(--text);}
.vanish__kbd{
  flex-shrink:0;font-family:var(--font);font-size:11.5px;color:var(--text-3);margin-inline-end:10px;
  border:1px solid var(--border-2);border-radius:6px;padding:2px 7px;background:color-mix(in srgb,var(--text) 5%,transparent);
}

/* ---------- Live search dropdown ---------- */
.suggest{
  position:absolute;top:calc(100% + 10px);inset-inline:0;z-index:30;text-align:start;
  border-radius:18px;border:1px solid var(--border-2);overflow:hidden;
  background:var(--panel-solid);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.75);
  animation:sgIn .18s cubic-bezier(.22,1,.36,1);
  max-height:min(52vh,400px);overflow-y:auto;
}
@keyframes sgIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.sg-head{
  padding:9px 16px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--text) 3%,transparent);
}
.sg-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;cursor:pointer;
  background:transparent;font-family:inherit;text-align:start;color:var(--text);
  border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent);transition:background .12s;
}
.sg-item:last-of-type{border-bottom:0;}
.sg-item:hover,.sg-item.is-active{background:color-mix(in srgb,var(--brand) 11%,transparent);}
.sg-code{
  flex-shrink:0;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  padding:3px 8px;border-radius:7px;min-width:74px;text-align:center;
}
.sg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.sg-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-term{font-size:11.5px;color:var(--text-3);font-family:var(--mono);}
.sg-item .badges{flex-shrink:0;}
.sg-all{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;border:0;
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 7%,transparent);
  border-top:1px solid var(--border);transition:background .15s;
}
.sg-all:hover,.sg-all.is-active{background:color-mix(in srgb,var(--brand) 16%,transparent);}
.sg-empty{padding:26px 16px;text-align:center;color:var(--text-3);font-size:13px;}
.sg-empty strong{display:block;color:var(--text-2);font-size:14px;margin-bottom:3px;}

/* ===================== Container ===================== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px 70px;position:relative;z-index:1;}

/* ---------- Navbar ⌘K pill ---------- */
.nav-pill--cmdk{gap:8px;padding-inline-end:6px;}
.nav-pill__kbd{
  font-family:var(--font);font-size:10.5px;font-weight:700;color:var(--text-3);
  border:1px solid var(--border-2);border-radius:6px;padding:1px 6px;
  background:color-mix(in srgb,var(--text) 5%,transparent);line-height:1.5;
}
@media(max-width:560px){.nav-pill--cmdk .nav-pill__kbd{display:none;}.nav-pill--cmdk{width:34px;padding:0;justify-content:center;}}

/* ---------- Recently viewed ---------- */
.recent{margin-bottom:16px;animation:blurFade .5s cubic-bezier(.22,1,.36,1);}
.recent__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.recent__title{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text-2);}
.recent__title svg{color:var(--brand);}
.recent__clear{
  font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text-3);cursor:pointer;
  background:transparent;border:0;padding:3px 6px;border-radius:7px;transition:.15s;
}
.recent__clear:hover{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent);}
.recent__list{display:flex;gap:8px;flex-wrap:wrap;}
.recent-item{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--card);
  color:var(--text-2);transition:.16s;
}
.recent-item:hover{color:var(--text);border-color:color-mix(in srgb,var(--brand) 50%,transparent);
  background:color-mix(in srgb,var(--brand) 8%,var(--card));transform:translateY(-1px);}
.recent-item__code{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--brand);}
.recent-item__name{font-size:12.5px;font-weight:600;font-style:italic;}

/* ---------- Did-you-mean (empty state) ---------- */
.empty__sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;}
.empty__sugg-label{width:100%;font-size:12px;color:var(--text-3);margin-bottom:2px;}
.dym{
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);
  background:color-mix(in srgb,var(--brand) 9%,transparent);color:var(--brand);transition:.16s;
}
.dym:hover{background:color-mix(in srgb,var(--brand) 16%,transparent);transform:translateY(-1px);}
.dym i{font-style:italic;font-weight:700;}

/* ---------- Command palette ---------- */
.cmdk{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;}
.cmdk__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);animation:fade .2s;}
.cmdk__box{
  position:relative;width:min(600px,100%);border-radius:18px;overflow:hidden;
  background:var(--panel-solid);border:1px solid var(--border-2);
  box-shadow:0 32px 80px -20px rgba(0,0,0,.75);
  animation:cmdkIn .22s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;max-height:74vh;
}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.cmdk__inputwrap{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border);}
.cmdk__icon{color:var(--text-3);flex-shrink:0;}
.cmdk__inputwrap input{flex:1;border:0;outline:0;background:transparent;color:var(--text);font-family:inherit;font-size:16px;}
.cmdk__esc{font-family:var(--font);font-size:10.5px;font-weight:700;color:var(--text-3);border:1px solid var(--border-2);border-radius:6px;padding:2px 7px;}
.cmdk__list{overflow-y:auto;padding:6px;overscroll-behavior:contain;}
.cmdk__section{padding:9px 12px 5px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);}
.cmdk-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;cursor:pointer;
  background:transparent;font-family:inherit;text-align:start;color:var(--text);border-radius:11px;transition:background .12s;
}
.cmdk-item:hover,.cmdk-item.is-active{background:color-mix(in srgb,var(--brand) 12%,transparent);}
.cmdk-item__code{
  flex-shrink:0;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--brand);min-width:70px;text-align:center;
  background:color-mix(in srgb,var(--brand) 12%,transparent);border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  padding:4px 6px;border-radius:7px;
}
.cmdk-item__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.cmdk-item__name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmdk-item__sub{font-size:11.5px;color:var(--text-3);font-family:var(--mono);}
.cmdk-item .badges{flex-shrink:0;}
.cmdk-item__hint{flex-shrink:0;font-size:10.5px;color:var(--text-3);opacity:0;}
.cmdk-item.is-active .cmdk-item__hint{opacity:1;}
.cmdk__empty{padding:34px 16px;text-align:center;color:var(--text-3);font-size:14px;}
.cmdk__foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--text-3);flex-wrap:wrap;}
.cmdk__foot kbd{font-family:var(--font);border:1px solid var(--border-2);border-radius:5px;padding:0 5px;margin-inline-end:2px;background:color-mix(in srgb,var(--text) 5%,transparent);}
@media(max-width:520px){.cmdk{padding-top:8vh;}.cmdk__foot{display:none;}.cmdk-item__code{min-width:58px;}}

/* ---------- About modal ---------- */
.about{position:fixed;inset:0;z-index:85;display:flex;justify-content:center;align-items:flex-start;padding:8vh 16px 16px;overflow-y:auto;}
.about__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);animation:fade .2s;}
.about__box{
  position:relative;width:min(620px,100%);border-radius:20px;overflow:hidden;
  background:var(--panel-solid);border:1px solid var(--border-2);
  box-shadow:0 32px 80px -20px rgba(0,0,0,.75);animation:cmdkIn .24s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;max-height:86vh;
}
.about__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);}
.about__title{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em;}
.about__body{padding:22px;overflow-y:auto;overscroll-behavior:contain;}
.about h3{font-size:14px;font-weight:700;margin:20px 0 7px;color:var(--text);}
.about h3:first-child{margin-top:0;}
.about p{font-size:13.5px;color:var(--text-2);margin:0 0 8px;line-height:1.7;}
.about a{color:var(--brand);font-weight:600;}
.about a:hover{text-decoration:underline;}
.about__cats{display:flex;flex-direction:column;gap:10px;margin:10px 0;}
.about__cat{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);}
.about__cat .badge{flex-shrink:0;margin-top:1px;}
.about__cat-txt{font-size:12.5px;color:var(--text-2);line-height:1.6;}
.about__cat-txt strong{color:var(--text);display:block;margin-bottom:2px;}
.about__meta{margin-top:16px;padding:13px 15px;border-radius:12px;border:1px solid var(--border);background:color-mix(in srgb,var(--text) 3%,transparent);font-size:12.5px;color:var(--text-3);}
.about__meta b{color:var(--text-2);}
.about__note{margin-top:14px;padding:13px 15px;border-radius:12px;border:1px solid color-mix(in srgb,var(--cc) 26%,transparent);background:var(--cc-glow);font-size:12.5px;color:var(--text-2);line-height:1.65;}
.about__note b{color:var(--cc);}
/* About — feature list */
.about__feats{display:flex;flex-direction:column;gap:9px;margin:10px 0 4px;}
.about__feat{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-2);line-height:1.6;}
.about__feat b{color:var(--text);font-weight:700;}
.about__feat-tx{display:flex;flex-direction:column;gap:2px;}
.about__feat-ic{flex-shrink:0;width:20px;height:20px;margin-top:1px;border-radius:6px;display:grid;place-items:center;
  color:#fff;background:var(--grad-brand);font-size:11px;font-weight:800;line-height:1;}
/* About — developer + contact */
.about__dev{margin-top:14px;padding:16px;border-radius:14px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--brand) 7%,transparent);}
.about__dev-name{font-size:15px;font-weight:800;color:var(--text);margin:0 0 3px;}
.about__dev-role{font-size:12.5px;color:var(--text-2);margin:0 0 12px;line-height:1.6;}
.about__contacts{display:flex;flex-wrap:wrap;gap:8px;}
.about__contact{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;border:1px solid var(--border-2);
  background:var(--card);color:var(--text-2);font-size:12.5px;font-weight:600;transition:.15s;direction:ltr;}
.about__contact:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent);}
.about__contact svg{flex-shrink:0;}

/* ===== Welcome / intro card (first visit) ===== */
.welcome{position:fixed;inset:0;z-index:95;display:flex;padding:16px;overflow-y:auto;overscroll-behavior:contain;}
.welcome__overlay{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);animation:fade .25s;}
.welcome__box{
  position:relative;margin:auto;width:min(500px,100%);border-radius:24px;padding:34px 30px 28px;
  background:var(--panel-solid);border:1px solid var(--border-2);
  box-shadow:0 40px 100px -24px rgba(0,0,0,.8);
  animation:cmdkIn .3s cubic-bezier(.22,1,.36,1);text-align:center;overflow:hidden;
}
.welcome__glow{position:absolute;top:-42%;left:50%;transform:translateX(-50%);width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--brand) 32%,transparent), transparent 70%);
  filter:blur(22px);pointer-events:none;}
.welcome__close{position:absolute;top:14px;inset-inline-end:14px;z-index:3;display:grid;place-items:center;width:34px;height:34px;
  border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text-2);cursor:pointer;transition:.15s;}
.welcome__close:hover{color:var(--text);border-color:var(--border-2);}
.welcome__badge{position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--grad-brand);
  box-shadow:0 6px 20px -6px color-mix(in srgb,var(--brand) 60%,transparent);}
.welcome__mark{position:relative;display:block;margin:16px auto 0;width:76px;height:76px;line-height:0;filter:drop-shadow(0 8px 22px color-mix(in srgb,var(--brand) 40%,transparent));}
.welcome__mark img{width:76px;height:76px;object-fit:contain;display:block;}
.welcome__title{position:relative;font-size:23px;font-weight:800;margin:16px 0 0;letter-spacing:-.02em;}
.welcome__subtitle{position:relative;font-size:13.5px;font-weight:600;color:var(--text-3);margin:3px 0 0;letter-spacing:.01em;}
.welcome__lead{position:relative;font-size:14px;line-height:1.75;color:var(--text-2);margin:12px auto 0;max-width:42ch;}
.welcome__lead--en{font-size:13px;color:var(--text-3);margin-top:9px;padding-top:11px;border-top:1px solid var(--border);}
.welcome__dev{position:relative;margin-top:22px;padding:16px;border-radius:16px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--text) 3%,transparent);text-align:start;}
.welcome__dev-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;}
.welcome__dev-by{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);}
.welcome__dev-name{font-size:16px;font-weight:800;color:var(--text);}
.welcome__dev-role{font-size:12.5px;color:var(--text-2);}
.welcome__links{display:flex;flex-wrap:wrap;gap:8px;}
.welcome__link{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:11px;border:1px solid var(--border);
  background:var(--card);color:var(--text-2);font-size:12.5px;font-weight:600;transition:.15s;direction:ltr;}
.welcome__link:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent);}
.welcome__link svg{flex-shrink:0;}
.welcome__cta{position:relative;margin-top:22px;width:100%;padding:13px;border-radius:14px;border:0;cursor:pointer;
  font-size:14.5px;font-weight:700;color:#fff;background:var(--grad-brand);
  box-shadow:0 12px 30px -10px color-mix(in srgb,var(--brand) 60%,transparent);transition:.18s;}
.welcome__cta:hover{filter:brightness(1.06);transform:translateY(-1px);}

/* ===================== Bento grid + Card Spotlight + Meteors ===================== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px;}
.scard{
  position:relative;overflow:hidden;cursor:pointer;text-align:start;font-family:inherit;
  border-radius:var(--radius-lg);border:1px solid var(--border);
  background:var(--card);backdrop-filter:blur(12px);
  padding:20px;min-height:126px;display:flex;align-items:flex-end;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.scard--hero{grid-column:span 1;}
/* Blur Fade entrance, staggered per card */
.bento .scard{opacity:0;animation:blurFade .65s cubic-bezier(.22,1,.36,1) forwards;}
.bento .scard:nth-child(1){animation-delay:.05s}
.bento .scard:nth-child(2){animation-delay:.13s}
.bento .scard:nth-child(3){animation-delay:.21s}
.bento .scard:nth-child(4){animation-delay:.29s}
.scard:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:0 16px 40px -16px rgba(0,0,0,.6);}
/* Card spotlight — radial gradient follows cursor via --mx/--my */
.scard__spot{
  position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 16%,transparent),transparent 72%);
}
.scard:hover .scard__spot{opacity:1;}
.scard--cc .scard__spot{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--cc-glow),transparent 72%);}
.scard--mbi .scard__spot{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--mbi-glow),transparent 72%);}
.scard--uti .scard__spot{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--uti-glow),transparent 72%);}
.scard[aria-pressed="true"]{border-color:color-mix(in srgb,var(--brand) 55%,transparent);background:color-mix(in srgb,var(--brand) 7%,var(--card));}
.scard--cc[aria-pressed="true"]{border-color:color-mix(in srgb,var(--cc) 55%,transparent);background:color-mix(in srgb,var(--cc) 7%,var(--card));}
.scard--mbi[aria-pressed="true"]{border-color:color-mix(in srgb,var(--mbi) 55%,transparent);background:color-mix(in srgb,var(--mbi) 7%,var(--card));}
.scard--uti[aria-pressed="true"]{border-color:color-mix(in srgb,var(--uti) 55%,transparent);background:color-mix(in srgb,var(--uti) 7%,var(--card));}
.scard__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:1px;}
.scard__num{font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums;}
.scard--cc .scard__num{color:var(--cc);} .scard--mbi .scard__num{color:var(--mbi);} .scard--uti .scard__num{color:var(--uti);}
/* Gradient must sit on the leaf spans: background-clip:text on an ancestor
   leaves descendant text transparent with nothing to clip. */
.scard--hero .scard__num{color:var(--brand);}
.scard--hero .slidenum__u,.scard--hero .slidenum__sep{
  background:linear-gradient(135deg,var(--brand),var(--brand-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.scard__label{font-size:12.5px;font-weight:600;color:var(--text-2);}
.scard__hint{font-size:11px;color:var(--text-3);margin-top:2px;}
/* Meteors */
.meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.meteors i{
  position:absolute;top:-10%;inset-inline-start:var(--l);width:1px;height:56px;border-radius:99px;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--brand) 85%,transparent));
  opacity:0;transform:rotate(38deg);animation:meteor 5.5s linear var(--dl) infinite;
}
@keyframes meteor{0%{transform:rotate(38deg) translateY(-40px);opacity:0}12%{opacity:.85}70%{opacity:.5}100%{transform:rotate(38deg) translateY(300px);opacity:0}}

/* ===================================================================
   Magic UI components (vanilla): Marquee · Shine Border · Shimmer
   Button · Animated Shiny Text · Blur Fade · Animated List
   =================================================================== */

/* ---------- Marquee ---------- */
.quick{margin-bottom:30px;}
.quick__head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.quick__title{font-size:13px;font-weight:700;color:var(--text-2);}
.quick__hint{font-size:11.5px;color:var(--text-3);}
.marquee{
  --duration:44s; --gap:10px;
  display:flex;gap:var(--gap);overflow:hidden;direction:ltr;margin-bottom:10px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marquee__group{
  display:flex;gap:var(--gap);flex-shrink:0;min-width:100%;align-items:center;
  animation:marquee var(--duration) linear infinite;
}
.marquee--reverse{--duration:52s;}
.marquee--reverse .marquee__group{animation-direction:reverse;}
.marquee:hover .marquee__group{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))}}
.mq-item{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;cursor:pointer;font-family:inherit;
  padding:8px 14px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--border);background:var(--card);color:var(--text-2);
  transition:border-color .2s,color .2s,transform .2s,background .2s;
}
.mq-item:hover{color:var(--text);border-color:color-mix(in srgb,var(--brand) 55%,transparent);
  background:color-mix(in srgb,var(--brand) 9%,var(--card));transform:translateY(-2px);}
.mq-item__code{
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  padding:2px 7px;border-radius:6px;
}
.mq-item__name{font-size:12.5px;font-weight:600;font-style:italic;}

/* ---------- Shine Border (animated gradient border on the panel) ---------- */
@property --shine-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
.shine-border::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:9;pointer-events:none;
  background:conic-gradient(from var(--shine-angle),transparent 0%,var(--brand) 9%,var(--brand-3) 16%,transparent 26%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:shineRotate 8s linear infinite;
}
@keyframes shineRotate{to{--shine-angle:360deg}}

/* ---------- Shimmer Button ---------- */
.shimmer .mborder__inner{position:relative;overflow:hidden;}
.shimmer .mborder__inner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--brand) 32%,transparent) 50%,transparent 70%);
  transform:translateX(-100%);animation:shimmerSweep 3.6s ease-in-out infinite;
}
@keyframes shimmerSweep{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}

/* ---------- Animated Shiny Text ---------- */
.shiny{
  background:linear-gradient(110deg,var(--text-3) 42%,var(--text) 50%,var(--text-3) 58%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shinyText 5s linear infinite;
}
@keyframes shinyText{from{background-position:250% 0}to{background-position:-250% 0}}

/* ---------- Blur Fade (staggered entrance) ---------- */
.blur-fade{opacity:0;animation:blurFade .65s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes blurFade{from{opacity:0;filter:blur(7px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}

/* ---------- Animated List (dropdown items) ---------- */
.sg-item,.sg-all{animation:listIn .3s cubic-bezier(.22,1,.36,1) backwards;}
@keyframes listIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* ===================================================================
   Motion-Primitives (vanilla): Text Effect · Sliding Number · In View
   =================================================================== */

/* ---------- Text Effect: presets × per(word|char|line) ---------- */
.te-seg{
  display:inline-block;white-space:pre;opacity:0;
  animation-duration:.3s;animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
.te--fade         .te-seg{animation-name:teFade;}
.te--blur-sm      .te-seg{animation-name:teBlurSm;}
.te--fade-in-blur .te-seg{animation-name:teFadeInBlur;}
.te--scale        .te-seg{animation-name:teScale;}
.te--slide        .te-seg{animation-name:teSlide;}
@keyframes teFade{to{opacity:1}}
@keyframes teBlurSm{from{filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes teFadeInBlur{from{filter:blur(12px);transform:translateY(20%)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes teScale{from{transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes teSlide{from{transform:translateY(20px)}to{opacity:1;transform:none}}
/* hero gradient must live on the segments, not the h1.
   Stays fully opaque — a fade-to-transparent bottom swallowed the Arabic dots. */
.hero__title .te-seg{
  background:linear-gradient(180deg,var(--text),color-mix(in srgb,var(--text) 84%,var(--text-3)));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Arabic is cursive — negative tracking crushes the joins and the dots.
   Reset it and give the letters solid rendering. */
[dir="rtl"] .hero__title{letter-spacing:normal;line-height:1.35;}
[dir="rtl"] .hero__title .te-seg{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text);}
[dir="rtl"] .brand__title,[dir="rtl"] .scard__num,[dir="rtl"] .drawer__title{letter-spacing:normal;}

/* ---------- Sliding Number (odometer) ---------- */
/* direction:ltr keeps digit order logical — flex items would otherwise reverse under dir=rtl */
.slidenum{display:inline-flex;direction:ltr;align-items:center;line-height:1;font-variant-numeric:tabular-nums;}
.slidenum__digit{display:inline-block;height:1em;overflow:hidden;}
.slidenum__col{
  display:flex;flex-direction:column;transform:translateY(0);
  transition:transform 1.15s cubic-bezier(.22,1,.36,1);
}
.slidenum__u{display:block;height:1em;line-height:1;}
.slidenum__sep{display:inline-block;}

/* ---------- In View ---------- */
.inview{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);}
.inview.is-in{opacity:1;transform:none;}

/* ===================== Animated tabs (segmented) ===================== */
.tabs{
  position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;
  border:1px solid var(--border);background:color-mix(in srgb,var(--text) 4%,transparent);
}
.tabs__pill{
  position:absolute;top:4px;bottom:4px;inset-inline-start:0;width:0;border-radius:999px;z-index:0;
  background:var(--text);
  transition:transform .34s cubic-bezier(.4,0,.2,1),width .34s cubic-bezier(.4,0,.2,1),background .25s;
}
.tabs__pill[data-cat="CC"]{background:var(--cc);}
.tabs__pill[data-cat="MBI"]{background:var(--mbi);}
.tabs__pill[data-cat="UTI"]{background:var(--uti);}
.chip{
  position:relative;z-index:1;font-family:inherit;font-size:12.5px;font-weight:650;cursor:pointer;
  padding:7px 16px;border-radius:999px;border:0;background:transparent;color:var(--text-2);
  transition:color .25s;white-space:nowrap;
}
.chip:hover{color:var(--text);}
.chip.is-active{color:var(--bg);}
.result-count{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;}
.share-btn{
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;font-weight:600;
  border:1px solid var(--border);background:var(--card);color:var(--text-2);
  padding:7px 13px;border-radius:10px;cursor:pointer;transition:.16s;backdrop-filter:blur(8px);white-space:nowrap;
}
.share-btn:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 50%,transparent);box-shadow:var(--shadow-sm);}
.share-btn svg{color:var(--brand);}

/* Moving border button */
.mborder{position:relative;padding:1.5px;border:0;background:transparent;border-radius:999px;cursor:pointer;overflow:hidden;font-family:inherit;}
.mborder__track{position:absolute;inset:0;border-radius:999px;overflow:hidden;}
.mborder__dot{
  position:absolute;top:50%;left:50%;width:130px;height:130px;margin:-65px 0 0 -65px;
  background:conic-gradient(from 0deg,transparent 0deg,var(--brand) 60deg,var(--brand-3) 110deg,transparent 180deg);
  animation:spin 3s linear infinite;
}
.mborder__inner{
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--panel-solid) 96%,transparent);color:var(--text-2);
  font-size:12.5px;font-weight:600;transition:color .18s;
}
.mborder:hover .mborder__inner{color:var(--text);}

/* ===================== Results panel ===================== */
.panel{
  position:relative;border-radius:var(--radius-lg);border:1px solid var(--border);
  background:var(--panel);backdrop-filter:blur(14px);overflow:hidden;
  box-shadow:0 20px 60px -30px rgba(0,0,0,.8);
}
.panel__glow{
  position:absolute;top:0;inset-inline:0;height:1px;z-index:8;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand) 70%,transparent),transparent);
}
/* Bar inside the card, above the table */
.panel__bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 16px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--text) 2.5%,transparent);
}
.panel__bar-right{display:flex;align-items:center;gap:14px;}
/* Own scroll box — the sticky thead pins to this, keeping it "inside the table" */
.table-wrap{max-height:min(66vh,620px);overflow-y:auto;overscroll-behavior:contain;}
.table-wrap::-webkit-scrollbar{width:10px;}
.table-wrap::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid transparent;background-clip:content-box;}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:content-box;}
.panel__foot{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--text) 2.5%,transparent);
}
.panel__foot:empty{display:none;}
.results{width:100%;border-collapse:collapse;font-size:13.5px;}
/* Header pins to the top of .table-wrap (not the viewport) and is fully opaque,
   so rows can never bleed through it. */
.results thead th{
  position:sticky;top:0;z-index:5;text-align:start;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
  background:var(--head-bg);
  padding:13px 18px;box-shadow:inset 0 -1px 0 var(--border);
}
.results th.sortable{cursor:pointer;user-select:none;transition:color .15s;}
.results th.sortable:hover{color:var(--text);}
.sort-i{display:inline-block;width:0;height:0;margin-inline-start:6px;opacity:.35;vertical-align:middle;
  border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:5px solid currentColor;}
th[data-dir="asc"] .sort-i{border-top:0;border-bottom:5px solid currentColor;opacity:1;}
th[data-dir="desc"] .sort-i{opacity:1;}
.results tbody tr{border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);cursor:pointer;transition:background .15s;}
.results tbody tr:last-child{border-bottom:0;}
.results tbody tr:hover{background:color-mix(in srgb,var(--brand) 6%,transparent);}
.results td{padding:12px 18px;vertical-align:middle;}
.cell-code{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--brand);white-space:nowrap;}
.cell-name{font-weight:600;color:var(--text);}
.cell-term{color:var(--text-2);}
.cell-snomed{font-family:var(--mono);font-size:12.5px;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums;}
mark{background:color-mix(in srgb,var(--brand) 26%,transparent);color:var(--text);border-radius:3px;padding:0 2px;}

/* Badges */
.badges{display:flex;gap:5px;flex-wrap:wrap;}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px;border:1px solid transparent;white-space:nowrap;}
.badge--cc{color:var(--cc);background:var(--cc-glow);border-color:color-mix(in srgb,var(--cc) 32%,transparent);}
.badge--mbi{color:var(--mbi);background:var(--mbi-glow);border-color:color-mix(in srgb,var(--mbi) 32%,transparent);}
.badge--uti{color:var(--uti);background:var(--uti-glow);border-color:color-mix(in srgb,var(--uti) 32%,transparent);}
.badge--all{color:var(--text-3);background:color-mix(in srgb,var(--text) 6%,transparent);border-color:var(--border);}

/* Empty */
.empty{text-align:center;padding:70px 20px;}
.empty__mark{width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--border);background:var(--card);color:var(--text-3);}
.empty__title{font-weight:600;font-size:16px;margin:0 0 4px;}
.empty__sub{color:var(--text-3);margin:0;font-size:13.5px;}

/* Pager (inside the card footer) */
.panel__foot button{
  font-family:inherit;min-width:34px;height:34px;padding:0 12px;font-weight:600;font-size:13px;
  border:1px solid var(--border);background:var(--card);color:var(--text-2);
  border-radius:9px;cursor:pointer;transition:.15s;font-variant-numeric:tabular-nums;
}
.panel__foot button:hover:not(:disabled){color:var(--text);border-color:var(--border-2);}
.panel__foot button.is-current{background:var(--text);border-color:var(--text);color:var(--bg);}
.panel__foot button:disabled{opacity:.35;cursor:default;}
.pager__ellipsis{color:var(--text-3);padding:0 4px;}

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed;top:0;inset-inline-start:0;height:2px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--brand),var(--brand-3));
  box-shadow:0 0 12px color-mix(in srgb,var(--brand) 60%,transparent);
  transition:width .1s linear;
}

/* ---------- Back to top ---------- */
.totop{
  position:fixed;bottom:24px;inset-inline-end:24px;z-index:55;width:42px;height:42px;
  display:grid;place-items:center;cursor:pointer;border-radius:50%;
  border:1px solid var(--border-2);background:color-mix(in srgb,var(--panel-solid) 92%,transparent);
  backdrop-filter:blur(12px);color:var(--text-2);
  opacity:0;pointer-events:none;transform:translateY(10px);transition:.28s;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.55);
}
.totop.is-show{opacity:1;pointer-events:auto;transform:translateY(0);}
.totop:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 55%,transparent);}

/* ---------- Stat mini bars ---------- */
.scard__bar{display:block;height:3px;border-radius:99px;margin-top:9px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden;}
.scard__bar i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.1s cubic-bezier(.22,1,.36,1) .25s;}
.scard--cc .scard__bar i{background:var(--cc);}
.scard--mbi .scard__bar i{background:var(--mbi);}
.scard--uti .scard__bar i{background:var(--uti);}

/* ---------- Row entrance stagger ---------- */
.results tbody tr{animation:rowIn .34s cubic-bezier(.22,1,.36,1) backwards;}
@keyframes rowIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- Badge tooltip ---------- */
.badge[data-tip]{position:relative;}
.badge[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);inset-inline-start:50%;
  transform:translateX(-50%) translateY(3px);white-space:nowrap;
  background:var(--head-bg);color:var(--text);border:1px solid var(--border-2);
  font-size:11px;font-weight:600;padding:5px 9px;border-radius:7px;letter-spacing:0;text-transform:none;
  opacity:0;pointer-events:none;transition:.18s;z-index:20;box-shadow:0 8px 22px -6px rgba(0,0,0,.6);
}
[dir="rtl"] .badge[data-tip]::after{transform:translateX(50%) translateY(3px);}
.badge[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
[dir="rtl"] .badge[data-tip]:hover::after{transform:translateX(50%) translateY(0);}

/* Notice */
.notice{
  display:flex;gap:11px;align-items:flex-start;margin-top:26px;padding:15px 18px;border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--cc) 26%,transparent);background:var(--cc-glow);
  font-size:13px;color:var(--text-2);
}
.notice strong{color:var(--cc);}
.notice__icon{color:var(--cc);flex-shrink:0;margin-top:1px;}

/* Footer */
.footer{position:relative;z-index:1;border-top:1px solid var(--border);margin-top:20px;}
.footer__inner{
  max-width:var(--maxw);margin:0 auto;padding:26px 20px 40px;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;color:var(--text-3);font-size:12px;
}
.footer__inner a{color:var(--brand);}
.footer__inner a:hover{text-decoration:underline;}
.footer__disc{flex:1 1 100%;order:3;color:var(--text-3);opacity:.85;line-height:1.6;}
.footer__link{order:2;background:none;border:0;padding:0;cursor:pointer;color:var(--brand);font:inherit;font-weight:700;}
.footer__link:hover{text-decoration:underline;}
@media(max-width:560px){.footer__inner{justify-content:center;text-align:center;}}

/* ===================== Drawer ===================== */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);z-index:70;animation:fade .25s;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{
  position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(430px,100vw);z-index:71;overflow:hidden;
  background:var(--panel-solid);border-inline-start:1px solid var(--border);
  box-shadow:-30px 0 80px rgba(0,0,0,.6);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);
}
[dir="rtl"] .drawer{transform:translateX(-100%);}
.drawer.is-open{transform:translateX(0)!important;}
.drawer__aurora{
  position:absolute;top:-160px;inset-inline:0;height:340px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 68%);
  filter:blur(44px);
}
.drawer__head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 18px;border-bottom:1px solid var(--border);}
.drawer__eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--brand);}
.drawer__title{font-size:21px;font-weight:700;margin:5px 0 0;letter-spacing:-.02em;line-height:1.25;}
.drawer__body{position:relative;padding:20px 22px 40px;overflow-y:auto;}
.field{margin-bottom:17px;}
.field__label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:6px;}
.field__value{display:flex;align-items:center;gap:10px;}
.field__value .v{font-size:14.5px;font-weight:600;word-break:break-word;}
.field__value .v.mono{font-family:var(--mono);color:var(--brand);}
.copy-btn{flex-shrink:0;width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--border);
  background:var(--card);color:var(--text-3);border-radius:8px;cursor:pointer;transition:.15s;}
.copy-btn:hover{color:var(--brand);border-color:var(--border-2);}
.drawer__links{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.drawer__link{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border);background:var(--card);font-weight:600;font-size:13.5px;color:var(--text);transition:.18s;}
.drawer__link:hover{border-color:color-mix(in srgb,var(--brand) 50%,transparent);background:color-mix(in srgb,var(--brand) 8%,transparent);}
button.drawer__link{width:100%;font-family:inherit;cursor:pointer;text-align:start;}
.drawer__link--copy{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 30%,transparent);background:color-mix(in srgb,var(--brand) 7%,transparent);}
.drawer__link--copy svg{color:var(--brand);}
.drawer__link svg{color:var(--text-3);}

/* Toast */
.toast{
  position:fixed;bottom:26px;inset-inline-start:50%;transform:translateX(-50%) translateY(12px);
  background:var(--text);color:var(--bg);padding:11px 20px;border-radius:999px;
  font-size:13.5px;font-weight:600;z-index:90;opacity:0;transition:.25s;box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}
[dir="rtl"] .toast{transform:translateX(50%) translateY(12px);}
[dir="rtl"] .toast.is-show{transform:translateX(50%) translateY(0);}

/* ===================== Responsive ===================== */
@media(max-width:980px){.bento{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  .hero{padding:130px 18px 40px;}
  .brand__sub{display:none;}
  .results thead{display:none;}
  .results,.results tbody,.results tr,.results td{display:block;width:100%;}
  .results tbody tr{padding:15px 18px;}
  .results td{padding:3px 0;border:0;}
  .cell-code{font-size:13px;}
  .cell-term::before{content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-top:7px;}
  .cell-snomed::before{content:attr(data-label) " · ";color:var(--text-3);}
  .cell-cat{margin:6px 0;}
  .panel__bar{flex-direction:column;align-items:stretch;gap:11px;}
  .panel__bar-right{justify-content:space-between;}
  .tabs{justify-content:space-between;}
  .chip{flex:1;text-align:center;padding:7px 8px;}
  .table-wrap{max-height:none;}
}
/* Navbar gets crowded on phones — drop the redundant CDC link (also in About + footer) and tighten spacing */
@media(max-width:560px){
  .nav-pill--cdc{display:none;}
  .navbar{padding:0 10px;}
  .navbar__inner{padding:8px 10px;gap:8px;}
  .navbar__actions{gap:5px;}
  .brand__mark{width:30px;height:30px;}
  .brand__mark svg{width:30px;height:30px;}
  .brand__mark img{width:30px;height:30px;}
  .brand__wm{font-size:16px;}
}
@media(max-width:520px){
  .bento{grid-template-columns:1fr 1fr;gap:10px;}
  .scard{min-height:104px;padding:15px;}
  .scard__num{font-size:25px;}
  .navbar{top:8px;}
  .vanish__inner{height:52px;padding-inline-start:16px;}
  .vanish__kbd{display:none;}
}
/* Modals (welcome + about) on phones: compact, and always closeable */
@media(max-width:560px){
  /* Welcome card */
  .welcome{padding:12px;}
  .welcome__box{padding:24px 18px 20px;border-radius:20px;}
  .welcome__close{width:40px;height:40px;top:10px;inset-inline-end:10px;}
  .welcome__mark,.welcome__mark img{width:58px;height:58px;}
  .welcome__title{font-size:19px;}
  .welcome__subtitle{font-size:12.5px;}
  .welcome__lead{font-size:13px;line-height:1.65;margin-top:10px;}
  .welcome__lead--en{font-size:12px;}
  .welcome__dev{margin-top:16px;padding:13px;}
  .welcome__links{width:100%;}
  .welcome__link{flex:1;justify-content:center;min-width:0;}
  .welcome__link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .welcome__cta{margin-top:16px;padding:14px;}
  /* About modal */
  .about{padding:10px;}
  .about__box{max-height:94vh;width:100%;}
  .about__head{padding:14px 16px;}
  .about__title{font-size:17px;}
  .about__body{padding:16px;}
  .about #aboutClose,.about .nav-pill--icon{width:40px;height:40px;}
  .about__contacts{width:100%;}
  .about__contact{flex:1;justify-content:center;min-width:0;}
  .about__contact span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}
  .spotlight,.hero__bg::after,.hero__lead,.vanish,.te-seg,.inview,.bento .scard{
    opacity:1!important;filter:none!important;transform:none!important;}}

/* ===================== Print / PDF ===================== */
@media print{
  .bg-layer,.beams,.hero__bg,.navbar,.totop,.progress,.welcome,.about,.cmdk,.drawer,.drawer-overlay,
  .quick,.recent,.notice,.bento,.panel__bar,.panel__foot,.footer__link,.hero__float,.eyebrow,.vanish{display:none!important;}
  html,body{background:#fff!important;color:#000!important;}
  .hero{padding:0!important;min-height:0!important;}
  .hero__content{padding:0!important;max-width:none!important;}
  .hero__title{color:#000!important;font-size:22px!important;margin:0 0 4px;}
  .container{max-width:none!important;padding:0!important;}
  .panel,.table-wrap{box-shadow:none!important;border:0!important;background:#fff!important;max-height:none!important;overflow:visible!important;}
  .results thead{display:table-header-group!important;}
  .results,.results tbody,.results tr,.results td,.results th{display:revert!important;width:auto!important;color:#000!important;border-color:#ccc!important;}
  .results th,.results td{padding:6px 8px!important;font-size:11px!important;border:1px solid #ddd!important;}
  a{color:#000!important;text-decoration:none!important;}
  @page{margin:14mm;}
}