@font-face{
  font-family:'Nunito';
  src:url('../assets/fonts/nunito/nunito-vf.woff2') format('woff2');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:0;overflow:visible;background:#05070d;}
body{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;}
#ra-app{
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  background:linear-gradient(135deg,#2c3e50 0%,#000 100%);
  color:#fff;
  min-height:0;
  width:100%;
  overflow:visible;
  border-radius:16px;
  position:relative;
}
#ra-wrap{width:100%;display:flex;flex-direction:column;align-items:center;padding:8px 0 24px;}
#ra-header{
  width:min(100%,76rem);
  margin:0 auto 12px;
  padding:14px 12px;
  border-radius:18px;
  text-align:center;
  background:linear-gradient(145deg,#1e293b,#0f172a);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15);
}
#ra-title{
  margin:0;
  color:#fff;
  font-size:1.55rem;
  line-height:1.9rem;
  font-weight:900;
  letter-spacing:.5px;
  text-shadow:0 2px 4px rgba(0,0,0,.55);
}
#ra-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  justify-items:center;
  align-items:center;
  width:100%;
  max-width:640px;
  margin:14px auto 0;
}
.ra-num-btn{
  width:100%;
  aspect-ratio:1/1;
  max-width:52px;
  min-width:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
  user-select:none;
  text-shadow:0 1px 2px rgba(0,0,0,.32);
}
.ra-num-btn:hover{transform:translateY(-2px);filter:brightness(1.12);}
.ra-num-btn.active{transform:scale(1.10);box-shadow:0 0 16px rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);z-index:10;}
.btn-color-0{background:linear-gradient(135deg,#f43f5e,#be123c);}
.btn-color-1{background:linear-gradient(135deg,#ef4444,#b91c1c);}
.btn-color-2{background:linear-gradient(135deg,#f97316,#c2410c);}
.btn-color-3{background:linear-gradient(135deg,#eab308,#a16207);}
.btn-color-4{background:linear-gradient(135deg,#22c55e,#15803d);}
.btn-color-5{background:linear-gradient(135deg,#06b6d4,#0e7490);}
.btn-color-6{background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
.btn-color-7{background:linear-gradient(135deg,#6366f1,#4338ca);}
.btn-color-8{background:linear-gradient(135deg,#a855f7,#7e22ce);}
.btn-color-9{background:linear-gradient(135deg,#d946ef,#a21caf);}
.ra-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.ra-action-btn{
  border-radius:999px;
  padding:8px 17px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.22);
  background:#f8fafc;
  color:#0f172a;
  transition:all .2s;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}
.ra-action-btn:hover{background:#fff;transform:translateY(-1px);}
.ra-play-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;border:none;box-shadow:0 4px 10px rgba(217,119,6,.3);}
.ra-play-btn:hover{background:linear-gradient(135deg,#fbbf24,#b45309);}
.ra-fullscreen-btn{color:#6b21a8;}
#ra-desc{margin:10px 0 0;color:#94a3b8;font-size:15px;font-weight:700;}
#ra-video-container{
  width:min(100%,72rem);
  max-width:72rem;
  margin:0 auto;
  position:relative;
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
#ra-video-container.ra-all-normal{width:min(100%,92rem);max-width:92rem;grid-template-columns:repeat(2,minmax(0,1fr));}
@media(min-width:768px){#ra-video-container.ra-all-normal{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ra-video-card{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,.4);
  position:relative;
}
.ra-video-card iframe{width:100%;height:100%;border:0;display:block;aspect-ratio:16/9;}
.ra-yt-fullscreen-proxy{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:8;
  width:44px;
  height:44px;
  border:0;
  border-radius:10px;
  background:rgba(15,23,42,.02);
  color:rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:.18;
  transition:background .18s ease,color .18s ease,opacity .18s ease,transform .18s ease;
}
.ra-video-card:hover .ra-yt-fullscreen-proxy,
.ra-video-card:focus-within .ra-yt-fullscreen-proxy{background:rgba(15,23,42,.72);color:#fff;opacity:.86;}
.ra-yt-fullscreen-proxy:hover{transform:scale(1.04);}
.ra-yt-fullscreen-proxy .ild-yt-fs-svg{width:24px;height:24px;display:block;}
.ra-video-card:fullscreen,.ra-video-card:-webkit-full-screen{width:100vw!important;height:100vh!important;border-radius:0!important;border:0!important;box-shadow:none!important;background:#000!important;}
.ra-video-card:fullscreen iframe,.ra-video-card:-webkit-full-screen iframe{width:100%!important;height:100%!important;aspect-ratio:unset!important;}
#ra-exit-btn{
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  background:rgba(220,38,38,.9);
  border:2px solid rgba(255,255,255,.55);
  color:#fff;
  padding:8px 20px;
  border-radius:999px;
  font-weight:900;
  font-size:.9rem;
  box-shadow:0 4px 15px rgba(0,0,0,.5);
  cursor:pointer;
  display:none;
  align-items:center;
  gap:8px;
  opacity:0;
  transition:opacity .3s ease,transform .2s ease,background .2s ease;
}
#ra-exit-btn.visible{display:flex;opacity:1;}
#ra-exit-btn:hover{background:#ef4444;transform:translateX(-50%) scale(1.05);}
#ra-app.fit-mode{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;background:#000;padding:0;border-radius:0;overflow:hidden;}
#ra-app.fit-mode #ra-wrap{padding:0;height:100%;}
#ra-app.fit-mode #ra-header{display:none;}
#ra-app.fit-mode #ra-video-container{width:100%;height:100%;max-width:none;padding:0;gap:0;margin:0;}
#ra-app.fit-mode.ra-view-single #ra-video-container{grid-template-columns:1fr!important;grid-template-rows:100vh!important;}
#ra-app.fit-mode.ra-view-all #ra-video-container{display:grid;grid-template-columns:repeat(3,1fr)!important;grid-template-rows:33.33vh 33.33vh 33.34vh!important;}
#ra-app.fit-mode .ra-video-card{border-radius:0;border:0;aspect-ratio:unset;height:100%;box-shadow:none;}
#ra-app.fit-mode .ra-video-card iframe{height:100%;aspect-ratio:unset;}
.mobile-hide{display:none;}
@media(min-width:640px){.mobile-hide{display:inline-flex;}}
@media(min-width:900px){
  #ra-header{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-areas:"ra-title ra-title" "ra-grid ra-actions";
    justify-content:center;
    align-items:center;
    column-gap:18px;
    row-gap:8px;
    width:min(100%,80rem);
    padding:10px 16px 12px;
  }
  #ra-title{grid-area:ra-title;text-align:center;justify-self:center;width:100%;font-size:1.72rem;line-height:1.95rem;}
  #ra-grid{grid-area:ra-grid;margin:0;grid-template-columns:repeat(10,42px);max-width:none;justify-content:center;justify-self:center;gap:8px;}
  .ra-num-btn{width:42px;height:42px;min-width:42px;max-width:42px;aspect-ratio:auto;font-size:17px;border-radius:10px;}
  .ra-actions{grid-area:ra-actions;margin:0;justify-content:center;justify-self:center;flex-wrap:nowrap;}
  #ra-desc{display:none;}
}
@media(max-width:575.98px){
  #ra-wrap{padding:8px 0 16px;}
  #ra-header{padding:9px 8px;margin-bottom:8px;border-radius:16px;}
  #ra-title{font-size:clamp(.98rem,4.7vw,1.12rem);line-height:1.28;letter-spacing:.12px;white-space:nowrap;overflow:visible;text-overflow:clip;padding-top:.06em;}
  #ra-grid{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:9px;max-width:320px;}
  .ra-num-btn{max-width:46px;min-width:38px;font-size:18px;border-radius:11px;}
  #ra-desc{margin-top:8px;font-size:13px;line-height:1.25;}
  #ra-video-container{gap:8px;}
  #ra-video-container.ra-all-normal{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ra-yt-fullscreen-proxy{right:9px!important;bottom:9px!important;width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(15,23,42,.64)!important;color:#fff!important;opacity:.96!important;box-shadow:0 3px 10px rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.12)!important;}
  .ra-yt-fullscreen-proxy .ild-yt-fs-svg{width:25px!important;height:25px!important;}
  #ra-app.fit-mode.ra-view-all #ra-video-container{grid-template-columns:repeat(2,1fr)!important;grid-template-rows:repeat(5,20vh)!important;}
}