:root{
  --brand1:#2f00ff;
  --brand2:#22c55e;
  --ring: 0 0 0 10px rgba(197,34,34,0.5);
}

/* --- page + theme --- */
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#b30059 0%, #b30059 40%, #b30059 100%);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* theme overrides (unchanged semantics) */
@media (prefers-color-scheme: dark){
  body{ background: linear-gradient(180deg,#08df25 0%, #08df25 40%, #cce204 100%); color:#cce204; }
}
html[data-theme="light"] body{ background: linear-gradient(180deg,#ffcc00,#ffcc00 40%,#ffcc00); color:#da089b; }
html[data-theme="dark"]  body{ background: linear-gradient(180deg,#1DA1F2,#1DA1F2 40%,#1DA1F2); color:#0c71f5; }
html[data-theme="red"]   body{ background: linear-gradient(180deg,#DE3163,#DE3163 40%,#DE3163); color:#DE3163; }

/* --- player wrapper: responsive & touch-friendly --- */
#playerWrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;       /* maintain 16:9 by default */
  overflow: hidden;
  border-radius: 1rem;
  background-color: #000;
  box-shadow: 0 8px 28px rgba(2,6,23,0.08);
  margin: 1rem auto;
  max-width: 1200px;
}

/* make media fill cleanly; avoid !important */
#videoPlayer,
#ytContainer,
#ytContainer iframe{
  position: absolute;
  inset: 0;                  /* top:0;right:0;bottom:0;left:0; */
  width: 100%;
  height: 100%;
  object-fit: cover;         /* use 'contain' if you need full frame visible */
  display: block;
}

/* optional big play button for mobile (toggle via JS if needed) */
.play-overlay{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .75rem 1rem;
  font-weight:700;
  font-size: 1.15rem;
  box-shadow: 0 8px 20px rgba(47,0,255,0.16);
  display: none; /* show via JS for touch interfaces or keep hidden for native controls */
}

/* --- glass / card --- */
.glass{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px) saturate(140%);
}
@media (prefers-color-scheme: dark){
  .glass{ background: rgba(17,40,40,0.65); }
}
.card{
  border-radius: 18px;
  border: 1px solid rgba(253,5,108,0.12); /* softened border for less visual weight */
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}

/* brand text/pill */
.brand-text{
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.brand-pill{
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  color: #000;
  padding: .25rem .5rem;
  border-radius: 8px;
  display:inline-block;
}

/* buttons */
.btn{
  border-radius: 12px;
  padding:.55rem .95rem;
  font-weight:700;
  transition: transform .12s ease, box-shadow .15s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* --- lesson items --- */
.lessons { max-width:1200px; margin: .6rem auto; padding: 0 .75rem; display: grid; gap: .6rem; }

.lesson-item{
  display:flex;
  gap:.75rem;
  align-items:center;
  padding:.75rem;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.18);
  cursor:pointer;
  background: rgba(255,255,255,0.45);
  transition: transform .12s, border-color .12s, background .12s;
}
@media (prefers-color-scheme: dark){
  .lesson-item{ background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.03); }
}
.lesson-item:hover{ border-color: #86efac; transform: translateY(-2px); }
.lesson-item.active{ border-color: #86efac; background: linear-gradient(180deg, rgba(34,197,94,0.08), transparent); }
.lesson-item:focus-visible{ outline: var(--ring); outline-offset: 4px; }

/* thumbnail and meta */
.lesson-thumb{
  min-width:56px;
  min-height:56px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:700;
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  color:white;
}
.lesson-meta{ flex:1; display:flex; flex-direction:column; gap:6px; }

/* progress bar */
.pbar{ height:6px; background: rgba(148,163,184,0.18); border-radius:999px; overflow:hidden; width:100%; }
.pbar>span{ display:block; height:100%; background: linear-gradient(90deg,var(--brand1),var(--brand2)); }

/* misc */
.loading::after{ content:""; position:absolute; inset:0; background: rgba(0,0,0,0.15); pointer-events:none; }
.logo{ image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }
.logo-title{ line-height:1; }
.presets{ display:flex; gap:.4rem; margin-left:.5rem; align-items:center; }
.preset-btn{ border-radius:10px; padding:.35rem .6rem; font-weight:700; border:1px solid rgba(0,0,0,0.06); background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:white; cursor:pointer; }
.kbd{ background: rgba(15,23,42,0.8); color:#f8fafc; border-radius:6px; padding:.12rem .4rem; font-weight:700; font-size:12px; margin-left:.4rem; }
.note{ font-size:12px; color:#374151; margin-left:.5rem; }

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Mobile specific tweaks ---------- */
@media (max-width: 640px){
  /* tone down busy page background on small screens so player and text are readable */
  body{ background: linear-gradient(180deg,#06e94a9d,#06e94a9d 40%); color:#0f172a; }

  #playerWrap{
    padding-top:56.25%;
    min-height:220px;    /* prevents player looking tiny on short viewports */
    margin: .6rem;
    border-radius:14px;
  }

  .brand-text{ font-size:1rem; }
  .lessons{ padding: 0 .5rem; gap:.5rem; }
  .lesson-item{
    padding: .9rem;
    gap:.9rem;
    align-items:center;
  }
  .lesson-thumb{ min-width:64px; min-height:64px; border-radius:12px; }

  /* show large tappable play overlay by default on touch devices */
  .play-overlay{ display:block; }

 /* Mobile-optimized glass + card + progress bar */
.glass{
  background: rgba(255,255,255,0.92);        /* brighter = better readability outdoors */
  backdrop-filter: blur(4px) saturate(120%); /* lighter blur = faster + cleaner */
}

.card{
  border: 1px solid rgba(0,0,0,0.04);        /* extremely soft border */
  border-radius: 14px;
  background: rgba(255,255,255,0.55);        /* subtle transparency */
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);   /* softer shadow so it doesn't look heavy */
  padding: .9rem;
}

.pbar{
  height: 8px;                                /* slightly bigger for finger visibility */
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}

.pbar > span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
}

}