:root{
  --bg: #ffffff;
  --card: #f8fafc;
  --muted: #6b7280;
  --accent: #009fdc; /* main theme color */
  --accent-2: #007bb0;
  --glass: rgba(0,0,0,0.03);
  --radius:12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body,#app{height:100%}

body{
  margin:0;
  background: var(--accent);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

header h2{
  color: var(--bg);
  margin:0 0 8px;
}

.brand-img{width:86px;height:auto}

.video-skeleton{position:relative;background:linear-gradient(90deg,#e6eef6,#f8fafc);display:flex;align-items:center;justify-content:center;border-radius:6px;overflow:hidden;width:100%;aspect-ratio:16/9}
.skeleton-shimmer{position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,0.03), rgba(255,255,255,0));transform:translateX(-100%);animation:shimmer 1.6s infinite}
.loader-icon{font-size:48px;color:var(--accent);opacity:0.95;z-index:2}

/* pulse for the loader icon */
.loader-icon .fa-brain{animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* facts inside the video skeleton */
.video-facts{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,0.92);color:#0b1220;padding:10px;border-radius:8px;z-index:3}
.video-facts .fact{margin:0;font-size:14px}

/* small spinning indicator for video loading (top-right) */
.video-loading{position:absolute;top:10px;right:10px;color:rgba(255,255,255,0.9);z-index:4}
.video-loading .fa-spin{color: var(--accent-2)}
.video-facts-title{margin:0 0 6px;color:#0b1220}

@keyframes shimmer{100%{transform:translateX(100%)}}

/* Did you know fact */
.fact{font-size:16px;color:#0f1724;animation:fadeSlide 5s infinite}
@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0}}

/* Button focus uses accent color */
.btn-outline-primary:focus, .btn-primary:focus{box-shadow:0 0 0 .25rem rgba(0,159,220,0.25)}

@media (max-width:880px){
  .brand-img{width:64px}
}

/* Ensure iframe fills the ratio container */
.ratio iframe, .video-skeleton iframe{width:100%;height:100%;border:0}

/* Ensure ratio container and video-skeleton preserve 16:9 */
.ratio, .ratio > div, .video-skeleton{aspect-ratio:16/9}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16/9){
  .video-skeleton{height:0;padding-bottom:56.25%}
  .ratio, .ratio > div{height:0;padding-bottom:56.25%}
  .ratio iframe{position:absolute;left:0;top:0}
}

/* Facts hide animation */
.facts-hidden{opacity:0;transform:translateY(8px);transition:opacity 400ms ease, transform 400ms ease;pointer-events:none;height:0;overflow:hidden}