/* ==========================================================
   GameIOS Unified UI System for Bio 2026
   - Dark/neon GameIOS visual language
   - Mobile-first responsive cards
   - No external font dependency, Vietnamese-safe
   ========================================================== */
:root{
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --font-heading: var(--font-body);
  --ui-radius: 20px;
  --ui-radius-sm: 14px;
  --ui-line: rgba(148,163,184,.18);
  --ui-card: rgba(15,23,42,.78);
  --ui-card-strong: rgba(13,17,23,.92);
  --ui-shadow: 0 18px 60px rgba(0,0,0,.35);
  --ui-cyan: var(--bio-accent,#00f0ff);
  --ui-purple: var(--bio-accent2,#a855f7);
  --ui-pink: #ec4899;
  --ui-gradient: linear-gradient(135deg,var(--ui-cyan),var(--ui-purple) 52%,var(--ui-pink));
}
*{box-sizing:border-box}
html{font-family:var(--font-body);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--font-body)!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font:inherit;}
img,svg,video,canvas{max-width:100%;height:auto;}
a{-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:2px solid rgba(0,240,255,.82);outline-offset:3px;border-radius:12px;}
::selection{background:rgba(0,240,255,.25);color:#fff;}
.ui-card{position:relative;border:1px solid var(--ui-line);background:linear-gradient(180deg,rgba(15,23,42,.84),rgba(2,6,23,.74));border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);}
.ui-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(0,240,255,.44),rgba(168,85,247,.24),rgba(236,72,153,.34));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.78;}
.ui-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8;}
.ui-eyebrow::before{content:"";width:34px;height:2px;border-radius:99px;background:var(--ui-gradient);display:inline-block;}
.ui-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .72rem;border-radius:999px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.055);color:#cbd5e1;font-size:.78rem;font-weight:800;}
.ui-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:14px;font-weight:900;text-decoration:none!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.18);color:#e2e8f0;}
.ui-btn-primary{color:#001018!important;background:var(--ui-gradient);box-shadow:0 12px 32px rgba(0,240,255,.18);border-color:transparent;}
.ui-btn:hover{transform:translateY(-2px);filter:brightness(1.06);}
@media (max-width:640px){input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{font-size:16px!important}.ui-btn{width:100%;min-height:46px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}}