/* I/O: coral, lavender and a quiet black canvas. */
:root { --accent:#a78bfa; --accent-2:#ff7767; --bg:#08080c; --bg-elevated:#101015; --bg-card:#15151d; }
.logo-mark { width:94px; height:42px; object-fit:contain; }
.navbar { background:rgba(8,8,12,.94); border-bottom:1px solid rgba(167,139,250,.12); }
.section-title { text-transform:uppercase; letter-spacing:.07em; font-size:18px; }
.anime-card,.manga-card { border-radius:6px; }
.hero { border-radius:0; }
.io-login { display:block; background:#000; padding:0 4vw 36px; }
.io-login-header { height:94px; max-width:1440px; margin:auto; display:flex; align-items:center; gap:25px; border-bottom:1px solid #34323b; }
.io-login-header img { width:122px; height:66px; }
.io-login-header span { color:#9b97a6; font-size:13px; border-left:1px solid #45414d; padding-left:25px; }
.io-login .login-card { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:4vw; width:1360px; max-width:100%; margin:28px auto 0; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.io-login-art { min-height:700px; height:calc(100vh - 160px); max-height:900px; background-image:url('/img/io-login-concept.png'); background-size:auto 112%; background-repeat:no-repeat; background-position:2% 100%; }
.io-login .login-form-area { padding:30px 40px; background:linear-gradient(145deg,#101012,#050505); border:1px solid #5b5861; border-radius:28px; text-align:center; }
.io-form-logo { width:150px; height:75px; }
.io-login h1 { font-size:clamp(25px,3vw,40px); letter-spacing:-.04em; margin:3px 0; }
.io-tagline { color:#ff8778; font-size:clamp(18px,2vw,26px); font-weight:700; margin:0 0 20px; }
.io-tagline::after { content:''; display:block; width:80px; height:4px; border-radius:4px; background:linear-gradient(90deg,#a78bfa 50%,#ff7767 50%); margin:16px auto; }
.io-login-description { font-size:17px; font-weight:600; margin-bottom:24px; }
.io-login .login-heading { font-size:18px; }
.io-login .login-form-area .auth-subtitle { line-height:1.6; }
.io-login .login-field input { border:1px solid #77717e; background:#09090c; border-radius:12px; }
.io-login .login-submit-btn { border-radius:30px; background:#a78bfa; color:#101019; box-shadow:none; }
.io-login .login-qr-btn { border-radius:30px; }
.io-login .forgot-link { color:#ff8778; }
.io-login .auth-mode-toggle-link { color:#ff8778; margin-top:12px; }
.io-login button:focus-visible,.io-login a:focus-visible { outline:3px solid #ff7767; outline-offset:4px; }
@media(max-width:950px) { .io-login-art { min-height:540px; height:650px; } .io-login .login-card { gap:20px; } .io-login .login-form-area { padding:28px 22px; } }
@media(max-width:700px) { .io-login-header { height:72px; } .io-login-header img { width:90px; } .io-login-header span { font-size:11px; padding-left:15px; } .io-login .login-card { display:block; max-width:470px; } .io-login-art { display:none; } .io-login .login-form-area { border-radius:22px; } }
.io-watch-info { max-width:1120px; padding:36px 40px 80px; margin:auto; }
.io-watch-info h1 { font-size:28px; margin-bottom:12px; }
.io-watch-info h2 { margin:40px 0 24px; font-size:22px; }
.io-watch-info p { line-height:1.7; color:#c4c0cc; }
.io-watch-info .io-episode-meta { color:#8b8497; font-size:13px; margin-bottom:20px; }
.io-track-links { display:flex; gap:20px; margin-top:20px; color:#a78bfa; }
#ioDiscussionForm { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
#ioDiscussionText { width:100%; min-height:100px; resize:vertical; padding:16px; background:#111115; color:#fff; border:1px solid #33313b; border-radius:6px; font:inherit; }
#ioDiscussionError { width:100%; color:#ff8778; }
.io-discussion { padding:22px 0; border-bottom:1px solid #23212a; }
.io-discussion header { display:flex; gap:16px; align-items:center; }
.io-discussion time { color:#817b8b; font-size:12px; }
.io-discussion header button { margin-left:auto; background:none; color:#a78bfa; border:0; }
.io-discussion p { white-space:pre-wrap; overflow-wrap:anywhere; margin:10px 0; }
.io-muted { color:#8d8797; text-align:center; padding:25px; }
.io-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.io-episodes-button { position:absolute; right:120px; bottom:62px; z-index:46; background:#151319b0; }
.io-episode-drawer { position:absolute; right:0; top:0; bottom:0; width:min(420px,90vw); background:#101014f5; z-index:60; overflow:auto; padding:24px; border-left:1px solid #312b3e; }
.io-episode-drawer header { display:flex; justify-content:space-between; align-items:center; }
.io-episode-drawer header button { background:none; border:0; font-size:30px; color:#fff; }
.io-episode-drawer h3 { color:#a78bfa; font-size:14px; margin:22px 0 12px; }
.io-episode-drawer a { display:flex; padding:15px 12px; gap:18px; border-radius:5px; font-size:13px; }
.io-episode-drawer a.active,.io-episode-drawer a:hover { background:#a78bfa25; }
.io-episode-drawer small { display:block; color:#a78bfa; margin-top:5px; }
.io-footer { padding:70px 5vw 30px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:45px; border-top:1px solid #24212d; background:#08080a; }
.io-footer img { width:110px; }
.io-footer p { color:#8c8798; font-size:13px; line-height:1.9; }
.io-footer h4 { text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px; font-size:12px; }
.io-footer a { display:block; font-size:13px; color:#a49cad; margin:14px 0; }
.io-footer-credit { grid-column:1/-1; border-top:1px solid #24212d; padding-top:22px; font-size:12px; color:#7b7486; }
.player-controls-bar { padding-top:30px; }
#ctlSeek { position:absolute; top:8px; left:24px; width:calc(100% - 48px); height:4px; }
#ctlPlay { order:-3; } #ctlRewindBtn { order:-2; } #ctlForwardBtn { order:-1; }
#ctlDuration { margin-right:auto; }
@media(max-width:700px) { .io-watch-info { padding:28px 20px 80px; } .io-footer { grid-template-columns:1fr 1fr; } .io-footer>div:first-child { grid-column:1/-1; } }
.io-login-art { background-size:190% auto; background-position:left bottom; clip-path:inset(9% 0 0 0); }
.io-form-logo { display:block; margin:0 auto; }
.io-mobile-nav { display:none; }
.hero-title { text-transform:uppercase; font-size:clamp(30px,4.5vw,64px); }
.hero-desc { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.row-title { font-size:19px; font-weight:800; font-style:italic; text-transform:uppercase; }
.hero-actions .btn { border-radius:2px; }
@media(max-width:700px) {
  .io-mobile-nav { position:fixed; bottom:0; left:0; right:0; z-index:80; display:flex; justify-content:space-around; background:#09090bf5; border-top:1px solid #25212c; padding:8px 0 max(8px,env(safe-area-inset-bottom)); }
  .io-mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:3px; color:#928b9e; font-size:10px; }
  .io-mobile-nav a.active { color:#a78bfa; }
  .io-mobile-nav span { font-size:24px; line-height:26px; }
  .nav-links,#shuffleBtn { display:none; }
  .navbar { padding:12px 16px; background:linear-gradient(#08080dd9,transparent); border:0; }
  .logo-mark { width:84px; height:34px; }
  .hero { min-height:620px; height:88vh; }
  .hero-content { padding:0 16px 80px; max-width:100%; }
  .hero-title { font-size:32px; }
  .hero-desc { font-size:14px; }
  .hero-bg::after { background:linear-gradient(to top,#08080c 1%,#08080c55 70%,#08080c55); }
  .hero-dots { bottom:32px; }
  .io-footer { padding-bottom:100px; }
}
body { font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.hero-title { text-transform:none; font-weight:700; letter-spacing:-.025em; }
.hero-content { padding-left:5vw; }
.hero-meta { margin:24px 0; }
.hero-actions .btn-primary { background:#7814e6; color:white; }
.hero-actions .btn-secondary { background:#303238; border:0; }
.hero-actions .btn { padding:16px 34px; font-size:16px; }
.row-title,.card-title { text-transform:uppercase; }
.io-login { font-family:'Poppins',ui-sans-serif,system-ui,sans-serif; }
@media(max-width:700px) { .hero-content { padding-left:16px; } .hero-actions .btn { padding:12px 24px; font-size:14px; } }
.io-settings-panel { position:absolute; bottom:88px; right:24px; width:min(340px,calc(100% - 48px)); max-height:70%; overflow:auto; z-index:55; padding:8px; border:1px solid #29232e; border-radius:4px; background:#090909f5; display:none; box-shadow:0 15px 50px #0008; }
.io-settings-panel.open { display:block; }
.io-settings-panel .ctl-menu-wrap { position:relative; min-height:46px; padding:4px 10px; }
.io-settings-panel .ctl-menu-wrap::before { content:attr(data-setting-label); position:absolute; top:15px; left:12px; font-size:14px; pointer-events:none; }
.io-settings-panel .ctl-btn { width:100%; border-radius:2px; justify-content:flex-end; color:#b8b2bf; padding-right:8px; }
.io-settings-panel .ctl-btn:hover { background:#ffffff0d; }
.io-settings-panel .ctl-popup { position:static; width:100%; min-width:0; box-shadow:none; background:#19161f; margin-top:5px; }
.io-chapters-toggle { display:block; width:100%; text-align:left; background:none; color:#fff; border:0; padding:15px 12px; font-size:14px; }
.io-chapters-list { padding:6px; }
.io-chapters-list button { display:flex; gap:20px; width:100%; justify-content:space-between; padding:12px 8px; text-align:left; background:none; border:0; color:#ddd7e7; }
.io-chapters-list button:hover { background:#7814e633; }
.io-chapters-list p { padding:12px; font-size:12px; color:#aaa2b5; }
.player-top .title-block { flex:1; min-width:0; }
.player-top .show-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.io-settings-panel .ctl-menu-wrap { display:block; }
.io-settings-panel .ctl-popup { flex-shrink:0; right:auto; left:auto; bottom:auto; }
.player-page .rating-badge-wrap { top:90px; left:24px; }
/* Threaded discussion and moderation */
.io-thread { border-bottom:1px solid #292530; padding:14px 0; }
.io-thread .io-discussion { border:0; padding:15px 0; }
.io-thread-replies { margin-left:30px; padding-left:22px; border-left:2px solid #34283e; }
.io-comment-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; }
.io-comment-actions button,.io-load-replies { background:none; color:#a69caf; border:0; padding:4px 0; cursor:pointer; font-size:12px; }
.io-comment-actions button:hover,.io-comment-actions button[aria-pressed="true"] { color:#b894ff; }
.io-load-replies { color:#b894ff; margin:10px 0 10px 52px; }
.io-spoiler { padding:12px 16px; border:1px solid #4a3c5e; border-radius:6px; background:#a78bfa09; }
.io-spoiler summary { color:#bfa8ed; cursor:pointer; font-size:13px; }
.io-spoiler:not([open]) { min-height:45px; }
.io-spoiler-check { display:flex; align-items:center; gap:8px; margin-right:auto; font-size:13px; color:#aca0b7; }
.io-spoiler-check input { accent-color:#a78bfa; }
.io-reply-target { width:100%; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 14px; background:#a78bfa16; font-size:13px; }
.io-reply-target[hidden] { display:none; }
.io-reply-target button { border:0; color:#bfa8ed; background:none; cursor:pointer; }
#ioDiscussionError.io-discussion-status { color:#c6b5da; }
.io-more-discussions { margin:20px 0; }
.io-report-dialog { width:min(500px,92vw); border:1px solid #4b3e5b; border-radius:12px; background:#141119; color:#eee8f6; padding:28px; }
.io-report-dialog::backdrop { background:#000a; }
.io-report-dialog h2 { margin-top:0; }
.io-report-dialog p { color:#b6a9c5; line-height:1.6; font-size:14px; }
.io-report-dialog textarea { width:100%; min-height:120px; resize:vertical; margin:12px 0; padding:12px; background:#09080d; border:1px solid #594967; border-radius:6px; color:white; font:inherit; }
.io-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:22px; }
.io-report-card { padding:24px; border:1px solid #342c3e; border-radius:8px; margin:20px 0; background:#111015; }
.io-report-card header { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.io-report-card p { font-size:14px; line-height:1.7; }
.io-report-card .io-muted { text-align:left; padding:0; }
.io-report-card a { color:#bfa8ed; font-size:13px; }
.io-report-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.io-moderation>p { color:#a69caf; }
.io-moderation select { margin:12px; padding:10px; background:#1a1521; color:white; border:1px solid #564367; border-radius:5px; }
.io-thread button:focus-visible,.io-report-card button:focus-visible { outline:2px solid #bfa8ed; outline-offset:4px; }
/* Collections and login palette controls */
.io-collection { position:relative; padding-top:10px; }
.io-collection-description { margin:0 48px 8px; color:#9d92ac; font-size:13px; }
.io-browse-end { padding:60px 24px 75px; text-align:center; }
.io-browse-end>div { font-size:40px; color:#a78bfa; margin-bottom:20px; }
.io-browse-end h2 { font-size:24px; margin:12px 0; }
.io-browse-end p { color:#9c91aa; max-width:540px; margin:16px auto 24px; font-size:14px; line-height:1.7; }
.io-browse-end button:disabled { opacity:.5; cursor:default; }
.io-login-themes { display:flex; gap:4px; margin-left:auto; padding:4px; border:1px solid #51445e; border-radius:24px; }
.io-login-themes button { color:#bdb2ce; background:none; border:0; border-radius:20px; padding:8px 12px; font:inherit; font-size:11px; cursor:pointer; }
.io-login-themes button[aria-pressed="true"] { color:#140e21; background:#b59af2; }
.io-login[data-login-theme="indigo"] { background:#111127; }
.io-login[data-login-theme="indigo"] .login-form-area { background:linear-gradient(145deg,#242142,#141329); border-color:#655585; }
.io-login[data-login-theme="indigo"] .io-login-art { border-radius:25px; background-color:#000; }
.io-login[data-login-theme="light"] { background:#f3effa; color:#241b31; }
.io-login[data-login-theme="light"] .login-form-area { background:#fff; border-color:#c5b7dc; box-shadow:0 20px 70px #4c296015; }
.io-login[data-login-theme="light"] .io-login-header { border-color:#d6cbe3; }
.io-login[data-login-theme="light"] .io-login-header>img,.io-login[data-login-theme="light"] .io-form-logo { background:#181320; border-radius:10px; padding:4px; }
.io-login[data-login-theme="light"] .io-login-header>span { color:#695c78; border-color:#d6cbe3; }
.io-login[data-login-theme="light"] .login-field input { color:#241b31; background:#f8f5fc; border-color:#9a85b3; }
.io-login[data-login-theme="light"] .login-field input::placeholder { color:#776586; }
.io-login[data-login-theme="light"] .auth-subtitle,.io-login[data-login-theme="light"] .qr-instructions { color:#685973; }
.io-login[data-login-theme="light"] .io-tagline,.io-login[data-login-theme="light"] .forgot-link,.io-login[data-login-theme="light"] .auth-mode-toggle-link { color:#b43d3c; }
.io-login[data-login-theme="light"] .login-qr-btn { color:#49335f; border-color:#a48bbf; background:#f8f5fc; }
.io-login[data-login-theme="light"] .login-divider { color:#7a668a; }
.io-login[data-login-theme="light"] .io-login-themes button { color:#665174; }
.io-login[data-login-theme="light"] .io-login-themes button[aria-pressed="true"] { color:#21132c; }
@media(max-width:700px) { .io-thread-replies { margin-left:12px; padding-left:14px; } .io-login-header>span { display:none; } .io-login-themes button { padding:7px 10px; } .io-collection-description { margin:0 16px 10px; } .io-browse-end { padding-bottom:100px; } }
.io-more-discussions[hidden] { display:none; }
.io-login[data-login-theme="light"] { color-scheme:only light; }
.io-login-art { min-height:0; height:auto; max-height:none; aspect-ratio:.9; background-position:left top; clip-path:inset(5vw 0 0 0 round 20px); }