:root {
  --ibl-bg: #080a10;
  --ibl-surface: #10141e;
  --ibl-surface-2: #171c28;
  --ibl-border: rgba(255,255,255,.09);
  --ibl-text: #f7f8fb;
  --ibl-muted: #9ba4b5;
  --ibl-accent: #ff3d63;
  --ibl-accent-2: #ff7657;
  --ibl-radius: 14px;
  --ibl-shadow: 0 22px 65px rgba(0,0,0,.42);
}

html { background: var(--ibl-bg); }
body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}

/* Catalog */
.home-page { background: var(--ibl-bg) !important; color: var(--ibl-text); }
.home-page .navbar {
  height: 76px; padding: 0 clamp(20px,4.5vw,72px);
  background: linear-gradient(180deg,rgba(8,10,16,.98),rgba(8,10,16,.72) 75%,transparent) !important;
  backdrop-filter: blur(12px); border-bottom: 1px solid transparent;
}
.home-page .navbar.scrolled { background: rgba(8,10,16,.9) !important; border-color: var(--ibl-border); }
.home-page .nav-left { gap: clamp(24px,3vw,50px); }
.home-page .logo {
  font-family: Manrope,Inter,sans-serif !important; font-size: 1.45rem !important;
  font-weight: 800; letter-spacing: -.05em !important; color: #fff !important; text-shadow: none !important;
}
.home-page .logo::after { content:""; display:inline-block; width:7px; height:7px; margin-left:5px; border-radius:50%; background:var(--ibl-accent); }
.home-page .nav-links { gap: 7px; }
.home-page .nav-links a {
  color: #aeb5c2; padding: 9px 11px; border-radius: 9px; font-size: 13px; font-weight: 600;
}
.home-page .nav-links a:hover { color:#fff; background:rgba(255,255,255,.06); }
.home-page .nav-links a.active { color:#fff; background:rgba(255,61,99,.12); }
.home-page .nav-right { gap:14px; }
.home-page .search-btn, .home-page .mobile-search-btn { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.055); }
.home-page .search-box { border:1px solid var(--ibl-border); border-radius:12px; background:#111621; box-shadow:var(--ibl-shadow); }
.home-page .user-avatar { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--ibl-accent),var(--ibl-accent-2)); }
.home-page .user-dropdown { border:1px solid var(--ibl-border); border-radius:12px; background:rgba(16,20,30,.98); box-shadow:var(--ibl-shadow); overflow:hidden; }

.home-page .billboard {
  height:min(78vh,780px); min-height:590px; max-height:none;
  background-color:#11151f; background-position:center 22%;
}
.home-page .billboard::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(8,10,16,.96) 0%,rgba(8,10,16,.62) 42%,rgba(8,10,16,.08) 72%),linear-gradient(0deg,var(--ibl-bg) 0%,transparent 30%);
}
.home-page .billboard-content { margin-left:clamp(20px,4.5vw,72px); max-width:620px; z-index:3; }
.home-page .billboard-tag { border:1px solid rgba(255,61,99,.25); border-radius:999px; background:rgba(255,61,99,.1); color:#ff8ba2; padding:7px 12px; }
.home-page .billboard-title { font-family:Manrope,Inter,sans-serif; font-size:clamp(2.7rem,5vw,5.3rem); letter-spacing:-.055em; line-height:.98; text-shadow:0 4px 24px rgba(0,0,0,.5); }
.home-page .billboard-desc { color:#c4cad4; line-height:1.65; max-width:560px; font-size:clamp(.94rem,1.2vw,1.06rem); }
.home-page .billboard-btn { min-height:48px; padding:0 20px; border-radius:12px; font-weight:700; transition:transform .2s,box-shadow .2s,background .2s; }
.home-page .billboard-btn.play { background:#fff; color:#0b0d12; }
.home-page .billboard-btn.play:hover { background:#f1f2f5; transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.home-page .billboard-btn.info { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px); }

.home-page #rowsContainer { position:relative; z-index:4; margin-top:-32px; padding-bottom:70px; }
.home-page .row { margin-bottom:42px; }
.home-page .row-header { padding:0 clamp(20px,4.5vw,72px); margin-bottom:15px; }
.home-page .row-title { font-family:Manrope,Inter,sans-serif; font-size:clamp(1.12rem,1.7vw,1.45rem); letter-spacing:-.025em; }
.home-page .row-explore { color:var(--ibl-muted); font-size:12px; font-weight:600; }
.home-page .slider-container { padding:0 clamp(20px,4.5vw,72px); }
.home-page .slider { gap:14px; padding:7px 2px 18px; scrollbar-width:none; }
.home-page .card, .home-page .search-card { border-radius:var(--ibl-radius); background:var(--ibl-surface); border:1px solid var(--ibl-border); overflow:hidden; box-shadow:0 8px 26px rgba(0,0,0,.2); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.home-page .card:hover, .home-page .search-card:hover { transform:translateY(-7px) scale(1.015); border-color:rgba(255,255,255,.19); box-shadow:0 22px 46px rgba(0,0,0,.38); z-index:10; }
.home-page .card-poster, .home-page .search-card-poster { border-radius:0 !important; }
.home-page .card-info { background:linear-gradient(0deg,rgba(8,10,16,.98),rgba(8,10,16,.1)); padding:30px 13px 13px; }
.home-page .card-title { font-weight:650; font-size:13px; }
.home-page .card-meta { color:var(--ibl-muted); font-size:11px; }
.home-page .card-btn, .home-page .search-card-btn { border:1px solid rgba(255,255,255,.18); background:rgba(12,15,22,.78); backdrop-filter:blur(8px); }
.home-page .card-btn.play, .home-page .search-card-btn.play { background:#fff; color:#10131a; border-color:#fff; }
.home-page .slider-arrow { width:42px; height:64px; border-radius:12px; background:rgba(8,10,16,.8); border:1px solid var(--ibl-border); backdrop-filter:blur(10px); }

.home-page .detail-modal-overlay { background:rgba(2,3,6,.78); backdrop-filter:blur(10px); }
.home-page .detail-modal { border-radius:20px; border:1px solid var(--ibl-border); background:var(--ibl-surface); box-shadow:0 40px 100px rgba(0,0,0,.65); overflow:hidden; }
.home-page .modal-body { background:var(--ibl-surface); }
.home-page .modal-title { font-family:Manrope,Inter,sans-serif; letter-spacing:-.04em; }
.home-page .modal-btn.play { border-radius:11px; }
.home-page .modal-btn-circle, .home-page .modal-close { background:rgba(12,15,22,.78); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); }
.home-page .modal-episode-item { border-radius:12px; border:1px solid transparent; }
.home-page .modal-episode-item:hover { background:var(--ibl-surface-2); border-color:var(--ibl-border); }
.home-page .modal-season-select { border-radius:10px; border:1px solid var(--ibl-border); background:var(--ibl-surface-2); }

/* Login */
.login-page { background:var(--ibl-bg) !important; overflow:auto !important; }
.login-page::before { inset:0 !important; width:auto !important; height:auto !important; background:radial-gradient(circle at 15% 15%,rgba(255,61,99,.15),transparent 32%),radial-gradient(circle at 85% 80%,rgba(86,104,255,.12),transparent 34%) !important; animation:none !important; }
.login-page::after { content:""; position:fixed; z-index:0; pointer-events:none; inset:0; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.login-page .particles { display:none; }
.login-page .login-container { z-index:2; max-width:460px; padding:28px; }
.login-page .login-box { border-radius:22px; padding:42px; background:rgba(16,20,30,.86); border:1px solid var(--ibl-border); box-shadow:var(--ibl-shadow); backdrop-filter:blur(24px); animation:none; }
.login-page .logo { margin-bottom:34px; }
.login-page .logo h1 { font-family:Manrope,Inter,sans-serif; font-size:30px; letter-spacing:-.055em; color:#fff; text-shadow:none; }
.login-page .logo h1::after { content:""; display:inline-block; width:7px; height:7px; margin-left:5px; border-radius:50%; background:var(--ibl-accent); }
.login-page .logo p { color:var(--ibl-muted); margin-top:10px; }
.login-page .tabs { padding:4px; border:1px solid var(--ibl-border); background:#0c0f17; border-radius:12px; }
.login-page .tab { border-radius:9px; padding:11px; font-size:13px; color:var(--ibl-muted); }
.login-page .tab.active { background:var(--ibl-surface-2); color:#fff; box-shadow:none; }
.login-page .input-group { margin-bottom:18px; }
.login-page .input-group label { color:#c7ccd5; font-size:12px; }
.login-page .input-group input { min-height:50px; border:1px solid var(--ibl-border); border-radius:11px; background:#0c0f17; padding:0 15px; }
.login-page .input-group input:focus { border-color:rgba(255,61,99,.8); background:#0c0f17; box-shadow:0 0 0 4px rgba(255,61,99,.1); }
.login-page .btn-submit { min-height:50px; border-radius:11px; background:linear-gradient(135deg,var(--ibl-accent),var(--ibl-accent-2)); text-transform:none; letter-spacing:0; box-shadow:none; }
.login-page .btn-submit:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,61,99,.22); }
.login-page .footer-text { color:#70798a; }
.login-page .footer-text a { color:#c8ced8; }

/* Player */
.player-page { background:#030406 !important; }
.player-page .top-bar { background:linear-gradient(180deg,rgba(3,4,6,.96),transparent) !important; padding:22px 28px !important; }
.player-page .back-button, .player-page .settings-button { border:1px solid rgba(255,255,255,.13) !important; background:rgba(13,16,22,.7) !important; backdrop-filter:blur(12px); border-radius:12px !important; }
.player-page .video-title { font-family:Manrope,Inter,sans-serif; font-weight:700; letter-spacing:-.025em; }
.player-page .controls-container { background:linear-gradient(0deg,rgba(3,4,6,.98),rgba(3,4,6,.78) 55%,transparent) !important; padding:70px 28px 24px !important; }
.player-page .progress-bar { height:4px !important; border-radius:99px; }
.player-page .progress-filled { background:var(--ibl-accent) !important; }
.player-page .control-button { border-radius:10px; transition:background .2s,transform .2s; }
.player-page .control-button:hover { background:rgba(255,255,255,.09); transform:none !important; }
.player-page .settings-menu { border:1px solid var(--ibl-border) !important; background:rgba(13,16,22,.96) !important; border-radius:16px !important; box-shadow:var(--ibl-shadow); backdrop-filter:blur(18px); overflow:hidden; }

@media (max-width:900px) {
  .home-page .navbar { height:64px; padding:0 16px; }
  .home-page .logo { font-size:1.22rem !important; }
  .home-page .billboard { min-height:560px; height:72vh; background-position:center; }
  .home-page .billboard::after { background:linear-gradient(0deg,var(--ibl-bg) 2%,rgba(8,10,16,.2) 75%),linear-gradient(90deg,rgba(8,10,16,.78),transparent); }
  .home-page .billboard-content { margin:150px 20px 0; max-width:620px; }
  .home-page #rowsContainer { margin-top:-14px; }
  .home-page .row-header,.home-page .slider-container { padding-left:16px; padding-right:16px; }
  .home-page .card:hover,.home-page .search-card:hover { transform:none; }
  .player-page .top-bar { padding:14px 16px !important; }
  .player-page .controls-container { padding:58px 16px 16px !important; }
}

@media (max-width:520px) {
  .login-page { align-items:flex-start; }
  .login-page .login-container { padding:18px; margin:auto 0; }
  .login-page .login-box { padding:30px 22px; border-radius:18px; }
  .home-page .billboard-title { font-size:2.55rem; }
  .home-page .billboard-desc { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}