/* Measurements taken from the signed-in Serika reference; I/O keeps its branding. */
:root { --io-gutter:48px; }
.navbar { height:68px; padding-inline:40px; border:0; background:linear-gradient(#08080cdd,#08080c00); }
.nav-left { gap:32px; min-width:0; }
.nav-links { gap:24px; white-space:nowrap; }
.nav-links li a { font-weight:600; border:0; }
.nav-links li a.active { color:#fff; }
.nav-right { gap:14px; }
.hero-content { max-width:660px; padding-inline:5vw; }
.hero-desc { line-height:1.65; font-size:18px; }
.hero-title { line-height:1.08; }
.hero-actions { gap:16px; }
.rows-wrap { padding-bottom:24px; }
.row-section { margin-bottom:32px; }
.row-title { padding-inline:var(--io-gutter); font-size:20px; line-height:28px; margin-bottom:12px; letter-spacing:0; }
.row-scroll { gap:16px; padding:4px var(--io-gutter) 12px; scroll-padding-inline:var(--io-gutter); scroll-snap-type:x proximity; }
.card.io-media-card { display:block; background:transparent; border:0; border-radius:6px; overflow:visible; scroll-snap-align:start; }
.card.io-media-card.poster-card { width:192px; contain-intrinsic-size:192px 344px; }
.io-media-card .thumb { border-radius:6px; }
.io-media-card .card-body { padding:10px 0 0; }
.io-media-card .card-title { font-size:16px; line-height:22px; font-weight:750; font-style:italic; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row-scroll .io-media-card .card-sub { display:none; }
.io-media-card:hover { transform:translateY(-3px); }
.io-media-card:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.grid .io-media-card { width:100%; min-width:0; }
.grid .card.io-media-card.poster-card { width:100%; }
.card-progress { border-radius:3px; overflow:hidden; bottom:56px; }
.profile-menu { position:fixed; top:62px; right:40px; width:288px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 88px); overflow-y:auto; background:#17141dee; border:1px solid #ffffff20; border-radius:10px; backdrop-filter:blur(18px); }
.profile-menu li a,.profile-menu li button { padding:11px 18px; min-height:44px; font-size:14px; }
.profile-menu:not(.open),.notif-panel:not(.open) { visibility:hidden; }
.profile-menu.open,.notif-panel.open { visibility:visible; }
.profile-menu a:focus-visible,.profile-menu button:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; background:#ffffff10; }
.notif-panel { top:44px; border-color:#ffffff20; background:#17141df5; }
.io-detail-ref { min-height:620px; }
.io-detail-ref .detail-content { padding:120px var(--io-gutter) 48px; }
.io-detail-ref .detail-info { max-width:860px; }
.io-detail-ref .detail-actions { gap:12px; flex-wrap:wrap; }
.io-detail-more[open] { z-index:8; }
.io-detail-more[open] button { width:calc(100% - 16px); text-align:left; }
.io-watch-info { max-width:896px; padding:40px 32px 90px; }
.io-watch-info h1 { font-size:30px; line-height:1.25; margin:0 0 10px; }
.io-watch-info .io-episode-meta { font-size:14px; margin-top:0; }
.io-watch-info>p { font-size:16px; line-height:1.75; }
.io-track-links a { padding:6px 12px; background:#322957; border-radius:3px; font-size:14px; font-weight:600; }
.player-top { padding:20px 24px; }
.player-top .title-block .show-title { font-size:18px; }
.player-top .title-block .ep-title { font-size:14px; margin-top:5px; }
.player-controls-bar { padding:30px 16px 14px; gap:12px; flex-wrap:nowrap; }
#ctlCurrentTime,#ctlDuration { order:0; }
#ctlSeek { left:16px; width:calc(100% - 32px); min-width:0; height:6px; }
#ctlDuration::before { content:'/ '; }
.io-previous-episode svg { transform:scaleX(-1); }
.io-settings-panel { width:232px; bottom:80px; right:16px; max-height:calc(100% - 100px); border-radius:6px; padding:8px; background:#080808f2; border:1px solid #ffffff16; }
.io-settings-panel .ctl-menu-wrap { min-height:40px; padding:0; }
.io-settings-panel .ctl-menu-wrap::before { top:11px; left:8px; font-size:14px; }
.io-settings-panel .ctl-btn { min-height:40px; padding:0 10px 0 88px; font-size:13px; height:auto; }
.io-settings-panel .ctl-btn::after { content:'›'; margin-left:12px; color:#999; }
.io-settings-panel .ctl-popup { margin:0; max-width:none; max-height:190px; overflow:auto; background:#17141c; }
.io-settings-row,.io-chapters-toggle { width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px; background:none; border:0; color:#fff; font:inherit; font-size:14px; text-align:left; }
.io-settings-row>span:last-child,.io-chapters-toggle>span:last-child { font-size:13px; color:#aaa; }
.io-settings-row:hover,.io-chapters-toggle:hover { background:#ffffff0d; }
.io-settings-panel button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.io-episode-drawer { width:min(360px,100%); max-height:100%; overflow:auto; }
.io-discussion-form textarea,#ioDiscussionText { border-radius:10px; }
@media(max-width:1100px) {
  .nav-left { gap:20px; }.nav-links { gap:15px; }.navbar { padding-inline:24px; }
  #shuffleBtn { display:none; }
}
@media(min-width:701px) and (max-width:900px) {
  .nav-links { display:flex; gap:12px; }.nav-links li a { font-size:12px; }.logo-mark { width:72px; }.nav-right { gap:7px; }
}
@media(max-width:767px) {
  :root { --io-gutter:20px; }
  .card.io-media-card.poster-card { width:160px; contain-intrinsic-size:160px 292px; }
  .row-title { font-size:18px; line-height:25px; }
  .row-scroll { gap:12px; }.row-section { margin-bottom:28px; }
  .io-media-card .card-title { font-size:14px; line-height:20px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  .profile-menu { right:16px; top:62px; max-height:calc(100dvh - 145px); }
  .io-detail-ref { min-height:560px; }.io-detail-ref .detail-content { padding:110px 20px 36px; }
  .io-detail-ref h1 { overflow-wrap:anywhere; }.detail-actions .btn { padding:11px 16px; }
  .io-settings-page { padding-bottom:70px; }.io-settings-content { min-width:0; }
  .io-settings-card code { overflow-wrap:anywhere; }
  .io-account-ref .account-header h1 { overflow-wrap:anywhere; }
  .player-top { gap:10px; padding:14px 12px; }.player-top .title-block .show-title { font-size:14px; }.player-top .title-block .ep-title { font-size:12px; }
  .player-controls-bar { gap:3px; padding:32px 10px 10px; flex-wrap:nowrap; }
  .player-controls-bar .ctl-btn { width:38px; height:44px; }
  #ctlCurrentTime,#ctlDuration { order:0; font-size:11px; }
  #ctlDuration { margin-right:auto; }#ctlSeek { left:12px; width:calc(100% - 24px); min-width:0; height:8px; }
  #ctlPipBtn,#ctlRewindBtn,#ctlForwardBtn { display:none!important; }
  .io-settings-panel { bottom:78px; max-height:calc(100% - 140px); }
  .io-watch-info { padding:28px 20px 85px; }.io-watch-info h1 { font-size:24px; }
  .io-episode-drawer { top:0; bottom:0; }
  .io-live-card { min-width:0; }.io-live-card h3 { overflow-wrap:anywhere; }
}
@media(max-width:480px) { #prevBtn,#ctlNextEpBtn { display:none!important; } }
@media(prefers-reduced-motion:reduce) {
  html,body,.row-scroll { scroll-behavior:auto; }.card,.hero-dots button,.profile-menu { transition:none; }
}