/* ============================================================
   dorama.hypertv.org — styles.css (FINAL with app.js selectors)
   Pages:
   - index.html + app.js (rows, seriesCard)
   - player.html (mobile player)
   - player_desktop.html (desktop player)
   ============================================================ */

:root{
  --bg:#0b0d12;
  --text:#eef2ff;
  --muted:rgba(238,242,255,.72);

  --panel:rgba(20,24,33,.72);
  --panel2:rgba(20,24,33,.88);

  --stroke:rgba(255,255,255,.14);
  --stroke2:rgba(255,255,255,.20);

  --shadow1:0 10px 26px rgba(0,0,0,.35);
  --shadow2:0 14px 30px rgba(0,0,0,.48);
  --shadow3:0 22px 70px rgba(0,0,0,.55);

  --r12:12px;
  --r14:14px;
  --r16:16px;
  --r22:22px;

  --safeB: env(safe-area-inset-bottom, 0px);
  --safeT: env(safe-area-inset-top, 0px);

  --fs:14px;
  --fsSm:12px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:var(--fs);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
button, input, select{ font:inherit; }
button{ cursor:pointer; }
img{ max-width:100%; display:block; }
.hidden{ display:none !important; }
.uiHidden{ opacity:0; pointer-events:none; }

/* ============================================================
   MAIN PAGE (index.html + app.js)
   ============================================================ */

.app{
  width:100%;
  min-height:100%;
  padding: 12px;
}

/* sticky top bar */
.topBar{
  position:sticky;
  top:0;
  z-index:5;

  display:flex;
  gap:10px;
  align-items:center;

  margin: -12px -12px 12px -12px; /* full width */
  padding: 10px 12px;
  padding-top: calc(var(--safeT) + 10px);

  background: rgba(10,12,18,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

#search{
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
}
#search::placeholder{ color: rgba(238,242,255,.55); }

#filter{
  flex: 0 0 auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
}

/* rows container */
#rows{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* each category row */
.row{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.row h2{
  margin:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
  color: var(--text);
}

/* grid of posters */
.rowList{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (min-width: 520px){
  .rowList{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px){
  .app{ padding: 14px; }
  .topBar{
    margin: -14px -14px 14px -14px;
    padding: 12px 14px;
    padding-top: 14px;
  }
  .rowList{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap:12px; }
}

/* card */
.seriesCard{
  position:relative;
  border-radius: var(--r16);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.seriesCard:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.seriesCard:active{ transform: translateY(0px) scale(.99); }

/* poster */
.seriesCard img{
  width:100%;
  aspect-ratio: 2 / 3;
  object-fit:cover;
  background:#000;
}

/* title */
.seriesTitle{
  padding: 10px 10px 12px 10px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

/* badge count */
.badge{
  position:absolute;
  top:8px;
  right:8px;
  min-width:28px;
  height:22px;
  padding: 0 8px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  font-weight:900;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* label (trending/drama/crime) */
.label{
  position:absolute;
  top:8px;
  left:8px;
  height:22px;
  padding: 0 8px;
  display:flex;
  align-items:center;

  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* optional category color accents */
.label.trending{ border-color: rgba(255,220,80,.35); }
.label.drama{ border-color: rgba(180,160,255,.35); }
.label.crime{ border-color: rgba(255,120,120,.35); }

/* MOBILE main page compact */
@media (max-width: 899px){
  .app{ padding: 10px; }
  .topBar{
    margin: -10px -10px 10px -10px;
    padding: 8px 10px;
    padding-top: calc(var(--safeT) + 8px);
    gap:8px;
  }
  #search, #filter{ height: 36px; font-size: 14px; }
  #filter{ padding: 0 10px; }
  .row h2{ font-size: 14px; }
  .seriesTitle{ padding: 9px 9px 10px 9px; font-size: 13px; }
  .badge, .label{ top:7px; }
}

/* ============================================================
   MOBILE PLAYER (player.html)
   ============================================================ */

.appPlayer{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.feed{
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling: touch;
}
.card{
  position:relative;
  height:100vh;
  scroll-snap-align:start;
  background:#000;
}
.card video{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.progress{
  position:absolute;
  top:0; left:0;
  height:3px;
  width:0%;
  background:rgba(255,255,255,.85);
  z-index:3;
  opacity:.9;
}

/* overlay */
.overlayControls{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
}
.overlayControls > *{ pointer-events:auto; }

.overlayTop{
  position:absolute;
  top: calc(var(--safeT) + 10px);
  left: 10px;
  right: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.overlayCenter{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 18px;
}
.overlayBottom{
  position:absolute;
  left:0; right:0;
  bottom: calc(var(--safeB) + 10px);
  padding: 0 12px;
}
.overlayRightBottom{
  position:absolute;
  right: 10px;
  bottom: calc(var(--safeB) + 78px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* icon wrappers */
.iconSm{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.iconLg{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; }

.chipBtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color:var(--text);
  box-shadow:var(--shadow1);
}
.chipText{ font-size:13px; }

.chipCounter{
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size:13px;
  box-shadow:var(--shadow1);
}

.bigBtn{
  width:56px;
  height:56px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background:var(--panel2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color:var(--text);
  box-shadow:var(--shadow2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.roundBtn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background:var(--panel2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color:var(--text);
  box-shadow:var(--shadow2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.chipBtn .iconSm{ width:16px; height:16px; }
.roundBtn .iconSm{ width:18px; height:18px; }
.bigBtn .iconLg{ width:26px; height:26px; }

.timeLabel{
  font-size:12px;
  color:var(--muted);
  margin:0 2px 8px 2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* seek bars */
.seekBar, .deskSeek{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.22);
  outline:none;
}
.seekBar::-webkit-slider-thumb, .deskSeek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}

/* drawers */
.drawerBackdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index:20;
}
.episodesDrawer{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:21;
  max-height:72vh;
  border-top-left-radius:var(--r22);
  border-top-right-radius:var(--r22);
  background: rgba(16,18,24,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow: 0 -18px 50px rgba(0,0,0,.6);
  overflow:hidden;
}
.drawerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.drawerTitle{ font-size:14px; font-weight:900; }
.drawerClose{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:var(--text);
  padding:6px 10px;
  border-radius:999px;
}

.episodesList{
  overflow:auto;
  max-height:calc(72vh - 54px);
  padding:10px 10px calc(var(--safeB) + 12px) 10px;
}
.epItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:var(--r16);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin-bottom:10px;
}
.epItem.active{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.epThumbWrap{ width:54px; height:54px; flex:0 0 auto; }
.epThumb{
  width:54px; height:54px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
}
.epThumbPlaceholder{
  width:54px; height:54px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.epInfo{ flex:1 1 auto; min-width:0; }
.epName{
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.epType{ font-size:12px; color:var(--muted); margin-top:2px; }
.epGo{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
}

/* comments */
.commentsBody{ display:flex; flex-direction:column; height: calc(72vh - 54px); }
.commentsList{ flex:1 1 auto; overflow:auto; padding:10px; }
.commentEmpty{
  padding:14px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--r16);
  color:var(--muted);
  background: rgba(255,255,255,.03);
}
.commentInputRow{
  display:flex;
  gap:10px;
  padding:10px 10px calc(var(--safeB) + 12px) 10px;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.commentInput{
  flex:1 1 auto;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:0 14px;
  outline:none;
}
.commentInput::placeholder{ color: rgba(238,242,255,.55); }
.sendComment{
  height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:var(--text);
}

/* ============================================================
   DESKTOP PLAYER (player_desktop.html)
   ============================================================ */
.deskWrap{
  height:100vh;
  display:flex;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.deskSide{
  width: 360px;
  min-width: 320px;
  max-width: 420px;
  border-right: 1px solid rgba(255,255,255,.10);
  background: rgba(12,14,20,.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.deskSideHeader{
  padding: 16px 14px 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.deskTitle{ font-size:16px; font-weight:900; }
.deskSub{ margin-top:6px; font-size:12px; color:var(--muted); }
.deskList{ flex:1 1 auto; overflow:auto; padding: 12px; }

.deskEpItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:var(--r16);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin-bottom:10px;
}
.deskEpItem:hover{ background: rgba(255,255,255,.06); }
.deskEpItem.active{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }

.deskEpThumb{
  width:56px; height:56px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
}
.deskEpThumbPh{
  width:56px; height:56px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.deskEpMid{ flex:1 1 auto; min-width:0; }
.deskEpName{
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.deskEpMeta{ font-size:12px; color:var(--muted); margin-top:3px; }
.deskEpGo{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
}

.deskCenter{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
}

.deskPlayerFrame{
  width:min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background:#000;
  border-radius:var(--r22);
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow3);
  border:1px solid rgba(255,255,255,.10);
}
.deskPlayerFrame video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

.deskControls{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 14px;
  gap: 10px;
}
.deskControls > *{ pointer-events:auto; }

.deskTopRow{
  position:absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.deskCounter{
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(16,18,24,.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size:12px;
  box-shadow:var(--shadow1);
}
.deskBtns{ display:flex; align-items:center; gap:10px; }

.deskBtn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(16,18,24,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color:var(--text);
  box-shadow:var(--shadow1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.deskMidRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom: 8px;
}
.deskBig{
  width:60px;
  height:60px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(16,18,24,.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color:var(--text);
  box-shadow:var(--shadow2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.deskBottomRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:var(--r16);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(16,18,24,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 26px rgba(0,0,0,.38);
}
.deskTime{ font-size:12px; color:var(--muted); min-width:110px; }

/* Motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}
/* =========================
   AUTH UI (injected by app.js)
   ========================= */

.authWrap { flex: 0 0 auto; }

.authBtn{
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:flex;
  align-items:center;
  gap:8px;
}
.authBadge{
  width:22px; height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.35);
}

.authBackdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index:50;
}

.authModal{
  position:fixed;
  left:50%;
  top: calc(var(--safeT) + 14px);
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 24px));
  z-index:51;
  border-radius: var(--r22);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(16,18,24,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow3);
  overflow:hidden;
}

.authHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.authTitle{ font-size:15px; font-weight:900; }
.authX{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  height:32px;
  padding: 0 10px;
  border-radius: 999px;
}

.authTabs{
  display:flex;
  gap:8px;
  padding: 10px 14px 0 14px;
}
.authTab{
  flex:1 1 auto;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:900;
}
.authTab.active{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}

.authMsg{
  margin: 10px 14px 0 14px;
  padding: 10px 12px;
  border-radius: var(--r16);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(238,242,255,.9);
}
.authMsg.error{
  border-color: rgba(255,120,120,.35);
  background: rgba(255,80,80,.08);
}

.authBox{
  padding: 12px 14px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.authLabel{ font-size:12px; color: var(--muted); }

.authInput{
  height:40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 0 14px;
  outline:none;
}

.authPrimary{
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: var(--text);
  font-weight:900;
}

.authFooter{
  padding: 0 14px 14px 14px;
  display:flex;
  justify-content:flex-end;
}
.authSecondary{
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
}
.topRight{ display:flex; gap:8px; align-items:center; }
.authBadge{ padding:6px 10px; border-radius:10px; background:#111; color:#fff; font-size:13px; }
.authBtn{ padding:8px 10px; border-radius:10px; border:1px solid #333; background:#0d0d0d; color:#fff; cursor:pointer; text-decoration:none; }

.modalBack{
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center; padding:16px;
  z-index:9999;
}
.modalCard{
  width:min(520px, 100%); background:#0b0b0b; border:1px solid #222;
  border-radius:16px; padding:14px;
}
.modalHead{ display:flex; justify-content:space-between; align-items:center; }
.modalTitle{ font-size:18px; font-weight:700; color:#fff; }
.modalClose{ background:transparent; border:0; color:#fff; font-size:18px; cursor:pointer; }

.profileRow{ display:flex; gap:12px; align-items:center; margin:12px 0; }
.avatarImg{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:1px solid #333; background:#000; }

.profileGrid{ display:grid; grid-template-columns: 120px 1fr; gap:8px 10px; align-items:center; }
.profileLabel{ color:#aaa; font-size:13px; }

.profileActions{ margin-top:12px; display:flex; justify-content:flex-end; }