/* ============ NEXUS — Cinematic Streaming UI ============ */
*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: #050912; color: #e8f0ff;
font-family: 'Barlow', -apple-system, system-ui, sans-serif; font-weight: 400;
overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
input, select, textarea { font-family: inherit; }
::selection { background: rgba(var(--accent-rgb), .35); color: #fff; }
/* === Custom Cursor === */
/* Only on non-touch, non-reduced-motion environments */
@media (pointer: fine) and (hover: hover) {
*, *::before, *::after { cursor: none !important; }
#cursor-dot {
position: fixed; top: -100px; left: -100px; z-index: 99999;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px rgba(var(--accent-rgb), .9), 0 0 20px rgba(var(--accent-rgb), .4);
pointer-events: none;
transform: translate(-50%, -50%);
transition: width .15s, height .15s, background .3s, opacity .2s;
will-change: transform;
}
#cursor-ring {
position: fixed; top: -100px; left: -100px; z-index: 99998;
width: 38px; height: 38px; border-radius: 50%;
border: 1.5px solid rgba(var(--accent-rgb), .65);
box-shadow: 0 0 14px rgba(var(--accent-rgb), .2), inset 0 0 8px rgba(var(--accent-rgb), .05);
pointer-events: none;
transform: translate(-50%, -50%);
transition: width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1),
border-color .3s, box-shadow .3s, background .3s, opacity .2s;
will-change: transform;
}
/* Hover state — ring expands + fills slightly */
body.cursor-hover #cursor-dot {
width: 5px; height: 5px;
background: #fff;
box-shadow: 0 0 14px rgba(var(--accent-rgb), 1);
}
body.cursor-hover #cursor-ring {
width: 54px; height: 54px;
border-color: var(--accent);
background: rgba(var(--accent-rgb), .06);
box-shadow: 0 0 24px rgba(var(--accent-rgb), .35), inset 0 0 12px rgba(var(--accent-rgb), .08);
}
/* Click state */
body.cursor-click #cursor-dot {
width: 12px; height: 12px;
box-shadow: 0 0 20px rgba(var(--accent-rgb), 1);
}
body.cursor-click #cursor-ring {
width: 28px; height: 28px;
border-color: var(--accent);
background: rgba(var(--accent-rgb), .12);
}
/* Hide when leaving window */
body.cursor-out #cursor-dot,
body.cursor-out #cursor-ring { opacity: 0; }
/* Dragging in marquee */
body.cursor-drag #cursor-dot { width: 14px; height: 14px; background: var(--accent); }
body.cursor-drag #cursor-ring { width: 44px; height: 44px; border-style: dashed; }
}
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
:root {
--bg: #050912;
--bg-2: #0a1220;
--surface: rgba(255,255,255,0.04);
--surface-2: rgba(255,255,255,0.08);
--border: rgba(255,255,255,0.10);
--border-strong: rgba(255,255,255,0.20);
--text: #e8f0ff;
--muted: rgba(232,240,255,0.55);
--muted-2: rgba(232,240,255,0.35);
--gold: #f5c518;
--danger: #ff5b67;
--success: #10c08a;
--accent: #00c6ff;
--accent2: #0072ff;
--accent-rgb: 0,198,255;
--accent2-rgb: 0,114,255;
--nav-h: 72px;
}
/* === Ambient === */
#particles-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35; }
.ambient-blob { position: fixed; border-radius: 50%; filter: blur(140px); pointer-events: none; z-index: 0; transition: background 1.5s; }
#blob1 { width: 700px; height: 700px; top: -200px; left: -200px; background: rgba(var(--accent2-rgb), .10); animation: blobFloat1 12s ease-in-out infinite; }
#blob2 { width: 600px; height: 600px; bottom: -200px; right: -150px; background: rgba(var(--accent-rgb), .08); animation: blobFloat2 14s ease-in-out infinite; }
@keyframes blobFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.1); } }
@keyframes blobFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, -30px) scale(1.05); } }
#app { position: relative; z-index: 1; min-height: 80vh; }
/* === NAVBAR (restored old design) === */
#navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 0 3rem; height: var(--nav-h);
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
transition: background .4s, backdrop-filter .4s;
border-bottom: none;
}
#navbar.scrolled {
background: rgba(5,9,18,0.85);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border-bottom-color: transparent;
}
.logo {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900; font-size: 1.7rem; letter-spacing: 5px;
background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; color: transparent;
text-shadow: 0 0 30px rgba(var(--accent-rgb), .4);
}
.nav-links { display: flex; gap: 1.75rem; list-style: none; }
.nav-links a {
color: var(--muted); font-size: .78rem; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
position: relative; padding: .4rem 0;
transition: color .25s;
}
.nav-links a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
background: linear-gradient(90deg, var(--accent2), var(--accent));
border-radius: 2px; transform: scaleX(0); transform-origin: left;
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.nav-links a:hover, .nav-links a.active { color: #fff; text-shadow: 0 0 18px rgba(var(--accent-rgb), .6); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.search-btn {
background: var(--surface); border: 1px solid var(--border);
padding: .45rem 1rem; border-radius: 50px;
display: flex; align-items: center; gap: .5rem;
font-size: .78rem; font-weight: 500; letter-spacing: 1.5px;
color: var(--muted); transition: all .25s; text-transform: uppercase;
}
.search-btn:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); box-shadow: 0 0 20px rgba(var(--accent-rgb), .25); }
.nav-cta {
background: linear-gradient(135deg, var(--accent2), var(--accent));
padding: .5rem 1.2rem; border-radius: 50px;
font-size: .78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: #fff; transition: transform .25s, box-shadow .25s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(var(--accent-rgb), .4); }
.avatar {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .9rem; color: #fff;
border: 2px solid transparent; cursor: pointer;
transition: all .25s; background: linear-gradient(135deg, var(--accent2), var(--accent));
background-size: cover; background-position: center top;
}
.avatar.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar:hover { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 22px rgba(var(--accent-rgb), .4); }
.profile-menu { position: relative; }
.profile-dropdown {
position: absolute; top: calc(100% + .8rem); right: 0;
min-width: 240px;
background: rgba(10, 18, 32, .97); backdrop-filter: blur(24px);
border: 1px solid var(--border); border-radius: 12px;
padding: .5rem;
opacity: 0; pointer-events: none; transform: translateY(-6px);
transition: opacity .25s, transform .25s;
box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
.profile-dropdown .dropdown-name { padding: .6rem .8rem; border-bottom: 1px solid var(--border); margin-bottom: .4rem; font-weight: 700; font-size: .85rem; }
.profile-dropdown .dropdown-name span { font-weight: 400; font-size: .72rem; color: var(--muted); }
.profile-dropdown a, .profile-dropdown .logout-btn {
display: block; padding: .55rem .8rem; border-radius: 8px;
font-size: .82rem; color: var(--muted); text-align: left; width: 100%;
transition: background .2s, color .2s;
}
.profile-dropdown a:hover, .profile-dropdown .logout-btn:hover { background: var(--surface-2); color: #fff; }
.logout-btn { cursor: pointer; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; padding: .5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
/* === MAIN HERO (homepage) === */
#hero {
position: relative;
min-height: 100vh; /* full viewport */
display: flex; align-items: flex-end;
padding: 0 3rem 6rem;
overflow: hidden;
}
.hero-bg-layer, .hero-bg-next {
position: absolute; inset: 0; background-size: cover; background-position: center;
transition: opacity 1s ease-in-out; will-change: opacity;
}
.hero-bg-next { opacity: 0; }
.hero-overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to right, rgba(5,9,18,0.95) 0%, rgba(5,9,18,0.75) 30%, rgba(5,9,18,0.2) 70%, transparent 100%),
linear-gradient(to top, rgba(5,9,18,0.98) 0%, rgba(5,9,18,0.4) 50%, transparent 100%);
}
.hero-noise {
position: absolute; inset: 0; z-index: 1; opacity: .04; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero-badge {
display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem;
background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3);
border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: 2px;
color: var(--accent); margin-bottom: 1.5rem; text-transform: uppercase;
}
.hero-badge .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.hero-logo-wrap { margin-bottom: 1.5rem; min-height: 80px; }
.hero-logo-wrap img { max-height: 140px; max-width: 380px; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .6)); }
.hero-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2.2rem, 5.5vw, 4.5rem); font-weight: 900; line-height: 1;
margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px;
text-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}
.hero-meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; align-items: center; font-size: .85rem; color: var(--muted); }
.hero-meta .meta-pill, .meta-pill {
padding: .25rem .7rem; background: rgba(255, 255, 255, .07); border: 1px solid var(--border);
border-radius: 6px; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase;
}
.meta-pill-muted { opacity: .65; }
.meta-pill-hd { background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--accent2-rgb), .15)); color: var(--accent); border-color: rgba(var(--accent-rgb), .3); font-weight: 600; }
.hero-meta .star { color: var(--gold); font-weight: 700; }
.hero-desc { font-size: 1rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.8rem; max-width: 580px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hero-btns { display: flex; flex-wrap: wrap; gap: .8rem; }
/* Hero bar indicators (image-2 horizontal stacked) */
.hero-bars {
position: absolute; right: 3rem; bottom: 6.5rem; z-index: 3;
display: flex; flex-direction: column; gap: .7rem; align-items: flex-end;
}
.hero-bar {
width: 84px; height: 4px; background: rgba(255, 255, 255, .18);
border-radius: 4px; padding: 0; position: relative; overflow: hidden;
transition: width .4s ease, background .3s ease, box-shadow .3s;
}
.hero-bar:hover { background: rgba(255, 255, 255, .32); }
.hero-bar.active { width: 132px; background: rgba(var(--accent-rgb), .25); box-shadow: 0 0 14px rgba(var(--accent-rgb), .5); }
.hero-bar-fill {
position: absolute; inset: 0;
background: linear-gradient(to right, var(--accent), var(--accent2));
transform: scaleX(0); transform-origin: left; border-radius: 4px;
}
.hero-bar.active .hero-bar-fill { animation: heroFill var(--rotate-dur, 7s) linear forwards; }
@keyframes heroFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 720px) { .hero-bars { display: none; } }
.hero-scroll-cue {
position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.8rem; z-index: 2;
display: flex; flex-direction: column; gap: .3rem; align-items: center;
color: var(--muted-2); font-size: .65rem; letter-spacing: 3px; font-weight: 500;
animation: bounce 2.5s ease-in-out infinite;
}
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); opacity: .6; } 50% { transform: translate(-50%, 8px); opacity: 1; } }
/* === SUB-HERO (movies/tv pages) — matches #hero structure === */
.sub-hero {
position: relative; min-height: 100vh; padding: 0 3rem 6rem;
margin-top: calc(var(--nav-h) * -1);
overflow: hidden; display: flex; align-items: flex-end;
}
.sub-hero .detail-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sub-hero .hero-noise {
position: absolute; inset: 0; z-index: 1; opacity: .04; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
.sub-hero-inner { position: relative; z-index: 2; max-width: 720px; }
.detail-bg-overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to right, rgba(5,9,18,0.95) 0%, rgba(5,9,18,0.75) 30%, rgba(5,9,18,0.2) 70%, transparent 100%),
linear-gradient(to top, rgba(5,9,18,0.98) 0%, rgba(5,9,18,0.4) 50%, transparent 100%);
}
.detail-bg-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 30%, rgba(5, 9, 18, .7) 100%); }
/* === BUTTONS === */
.btn-primary, .btn-secondary, .btn-icon {
display: inline-flex; align-items: center; gap: .6rem;
padding: .85rem 1.8rem; border-radius: 8px;
font-weight: 700; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase;
transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
cursor: pointer; position: relative; overflow: hidden;
}
.btn-primary { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; box-shadow: 0 8px 25px rgba(var(--accent-rgb), .35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(var(--accent-rgb), .5); }
.btn-glow { position: relative; }
.btn-glow::after { content: ''; position: absolute; inset: -2px; border-radius: 12px; background: linear-gradient(135deg, var(--accent2), var(--accent)); filter: blur(12px); opacity: .4; z-index: -1; }
.btn-secondary { background: rgba(255, 255, 255, .08); border: 1px solid var(--border-strong); color: #fff; }
.btn-secondary:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; background: rgba(255, 255, 255, .08); border: 1px solid var(--border); color: var(--muted); }
.btn-icon:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-icon.btn-danger:hover { background: rgba(255, 91, 103, .18); color: var(--danger); border-color: rgba(255, 91, 103, .4); }
.btn-watchlist.in-list { background: rgba(var(--accent-rgb), .18); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-weight: 600; font-size: .82rem; padding: .3rem .6rem; border-radius: 6px; }
.btn-link:hover { background: rgba(var(--accent-rgb), .1); }
/* === SECTION HEADER (above content-section) === */
.section-header {
display: flex; align-items: center; justify-content: space-between;
padding: 2.8rem 3rem 1.2rem; position: relative;
}
.section-header::before {
content: ''; position: absolute; left: 3rem; top: 50%; transform: translateY(-50%);
width: 4px; height: 1.4rem; background: linear-gradient(180deg, var(--accent), var(--accent2));
border-radius: 4px; box-shadow: 0 0 12px rgba(var(--accent-rgb), .6);
}
.section-title {
font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800;
letter-spacing: 3px; text-transform: uppercase; padding-left: 1.2rem;
}
.section-title-page { font-size: 2.2rem; }
.row-controls { display: flex; gap: .5rem; align-items: center; }
.see-all { font-size: .72rem; color: var(--muted); padding: .4rem .8rem; border-radius: 6px; transition: all .2s; margin-right: .3rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.see-all:hover { color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.row-arrow {
width: 36px; height: 36px; background: rgba(255, 255, 255, .06); border: 1px solid var(--border);
border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
transition: all .2s;
}
.row-arrow:hover { background: rgba(var(--accent-rgb), .15); border-color: rgba(var(--accent-rgb), .3); color: var(--accent); }
.section-header-channel { padding-bottom: 2.2rem; }
.section-header-channel::after {
content: ''; position: absolute; left: 3rem; right: 3rem; bottom: .6rem;
height: 1px; background: linear-gradient(to right, rgba(var(--accent-rgb), .3), transparent);
}
.content-section { padding: 0 0 0 48px;; margin-bottom: 1.5rem; }
.content-section-flush { padding: 0 3rem; }
/* === CARD ROW + CARD (info on hover only, slide-up from bottom) === */
/* Horizontal padding lives INSIDE the row so scaled cards don't clip on the left edge */
.cards-row, .cast-row, .cards-row-progress {
display: flex; gap: 1rem;
overflow-x: auto; scroll-behavior: smooth;
padding: 1.5rem 3rem 2rem 24px; /* TOP gives hover scale room, LEFT/RIGHT match section padding */
scroll-snap-type: x proximity;
}
.card {
flex: 0 0 175px; border-radius: 10px; overflow: hidden;
position: relative; display: block; scroll-snap-align: start;
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.card:hover { transform: scale(1.07) translateY(-8px); z-index: 5; }
.card-img-wrap { position: relative; width: 100%; aspect-ratio: 2/3; background: var(--bg-2); border-radius: 10px; overflow: hidden; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.card:hover .card-img { transform: scale(1.05); }
.card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(5,9,18,0.95) 0%, rgba(5,9,18,0.4) 40%, transparent 70%);
opacity: 0; transition: opacity .3s;
}
.card:hover .card-overlay { opacity: 1; }
.card-glow {
position: absolute; inset: 0; border-radius: 10px;
border: 1.5px solid transparent; pointer-events: none;
transition: border-color .3s, box-shadow .3s;
}
.card:hover .card-glow { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 35px rgba(var(--accent-rgb), .25), 0 20px 50px rgba(0, 0, 0, .6); }
.card-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
width: 50px; height: 50px; border-radius: 50%;
background: rgba(var(--accent-rgb), .95);
display: flex; align-items: center; justify-content: center;
color: #fff; backdrop-filter: blur(10px);
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.card:hover .card-play { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 35px rgba(var(--accent-rgb), .6); }
.card-info {
position: absolute; bottom: 0; left: 0; right: 0;
padding: .7rem .8rem;
transform: translateY(100%);
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.card:hover .card-info { transform: translateY(0); }
.card-title { font-size: .82rem; font-weight: 700; letter-spacing: .3px; margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; gap: .6rem; align-items: center; font-size: .7rem; color: var(--muted); }
.card-rating { color: var(--gold); font-weight: 600; }
.card-wide { flex: 0 0 290px; }
.card-wide .card-img-wrap { aspect-ratio: 16/9; }
/* Watchlist button on card hover (top-right) */
.card-watchlist-btn {
position: absolute; top: 8px; right: 8px; z-index: 10;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(0, 0, 0, .75); border: 1px solid rgba(255, 255, 255, .18);
color: #fff; backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(.75);
transition: opacity .2s, transform .2s, background .2s, border-color .2s;
cursor: pointer; padding: 0; pointer-events: none;
}
.card:hover .card-watchlist-btn { opacity: 1; transform: scale(1); pointer-events: auto; }
.card-watchlist-btn:hover { background: rgba(var(--accent-rgb), .95); border-color: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb), .5); transform: scale(1.08); }
.card-watchlist-btn .wl-check { display: none; }
.card-watchlist-btn.in-list .wl-add { display: none; }
.card-watchlist-btn.in-list .wl-check { display: block; }
.card-watchlist-btn.in-list { background: rgba(var(--accent-rgb), .9); border-color: var(--accent); color: #fff; opacity: 1; transform: scale(1); }
/* Progress strip for continue-watching — always visible with bigger height for the look user wants */
.card-progress .progress-strip {
position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
background: rgba(0, 0, 0, .6); z-index: 3; overflow: hidden;
}
.card-progress .progress-fill {
height: 100%; min-width: 3%;
background: linear-gradient(to right, var(--accent), var(--accent2));
box-shadow: 0 0 10px rgba(var(--accent-rgb), .8);
transition: width .4s ease;
}
/* === GRID VIEW === */
.grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.6rem 1rem; padding: 1.5rem 0; }
/* === ACCORDION (homepage collections + collection-detail carousel) === */
.accordion {
display: flex; gap: 0; height: 380px;
border-radius: 16px; overflow: hidden;
border: 1px solid var(--border); background: var(--bg-2);
position: relative;
}
.acc-panel {
flex: 1; min-width: 0;
background-size: cover; background-position: center;
position: relative; overflow: hidden; cursor: pointer;
transition: flex .75s cubic-bezier(.4, 0, .2, 1);
}
.acc-panel.active { flex: 6; }
.acc-panel:hover:not(.active) { flex: 1.4; }
/* Edge shadow between adjacent panels for a cleaner divider */
.acc-panel:not(:first-child)::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 24px;
background: linear-gradient(to right, rgba(0, 0, 0, .55), transparent);
z-index: 2; pointer-events: none;
}
.acc-panel:not(:last-child)::after {
content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 24px;
background: linear-gradient(to left, rgba(0, 0, 0, .55), transparent);
z-index: 2; pointer-events: none;
opacity: .8;
}
.acc-panel.active::before, .acc-panel.active::after { opacity: 0; transition: opacity .4s; }
.acc-overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to right, rgba(5,9,18,0.92) 0%, rgba(5,9,18,0.55) 35%, rgba(5,9,18,0.2) 70%, transparent 100%),
linear-gradient(to top, rgba(5,9,18,0.85) 0%, transparent 50%);
}
.acc-collapsed-label {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 1.2rem .8rem; display: flex; align-items: flex-end; justify-content: flex-start;
font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; opacity: 1; transition: opacity .3s ease;
z-index: 3;
}
.acc-collapsed-label span {
display: block;
writing-mode: vertical-rl; transform: rotate(180deg);
white-space: nowrap; padding: .5rem 0;
text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.85);
}
.acc-panel.active .acc-collapsed-label { opacity: 0; pointer-events: none; }
.acc-content {
position: absolute; left: 0; bottom: 0; right: 0; padding: 2rem 2.4rem;
display: flex; flex-direction: column; gap: .6rem;
opacity: 0; transform: translateY(20px); transition: all .5s .2s ease-out;
max-width: 560px; z-index: 3;
}
.acc-panel.active .acc-content { opacity: 1; transform: translateY(0); }
.acc-label { font-size: .68rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
.acc-name { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
.acc-logo {
max-height: 90px; max-width: 360px; width: auto;
margin: .1rem 0 .2rem;
filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .75)) drop-shadow(0 0 16px rgba(0, 0, 0, .65));
object-fit: contain;
}
.acc-sub { color: var(--muted); font-size: 1rem; line-height: 1.4; }
.acc-sub-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acc-meta-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.acc-meta-row .meta-pill.star { color: var(--gold); }
.acc-cta { margin-top: .6rem; display: inline-block; padding: .55rem 1.1rem; background: linear-gradient(135deg, var(--accent2), var(--accent)); border-radius: 8px; font-weight: 700; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; box-shadow: 0 4px 20px rgba(var(--accent-rgb), .3); align-self: flex-start; }
/* Collection detail variant — slightly taller for more breathing room */
.collection-accordion { height: 460px; }
@media (max-width: 720px) {
.accordion { height: auto; flex-direction: column; gap: 4px; padding: 4px; background: var(--bg-2); }
.collection-accordion { height: auto; }
/* Inactive panels — compact strip showing just the title */
.acc-panel, .acc-panel.active { flex: 0 0 auto; height: 70px; border-radius: 8px; overflow: hidden; }
/* Active panel — taller to show content */
.acc-panel.active { height: 200px; }
.acc-collapsed-label { padding: .6rem 1rem; }
.acc-collapsed-label span { writing-mode: horizontal-tb; transform: none; padding: 0; font-size: .82rem; font-weight: 700; }
/* Active panel content */
.acc-content { padding: 1rem 1.2rem; gap: .35rem; }
.acc-logo { max-height: 48px; max-width: 160px; }
.acc-name { font-size: 1.2rem; }
.acc-label { font-size: .62rem; }
.acc-sub { display: none; }
.acc-meta-row { display: none; }
.acc-cta { padding: .4rem .9rem; font-size: .72rem; margin-top: .2rem; }
.acc-panel:not(:first-child)::before,
.acc-panel:not(:last-child)::after { display: none; }
}
/* === MARQUEE (channels) === */
.marquee {
position: relative; overflow: hidden;
margin-top: .5rem; padding: 1rem 0;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
user-select: none; cursor: grab;
}
.marquee.dragging { cursor: grabbing; }
.marquee-track { display: flex; gap: .75rem; width: max-content; will-change: transform; transition: none; }
.ch-tile {
flex-shrink: 0; height: 90px; width: 200px;
border-radius: 14px; padding: 1rem;
display: flex; align-items: center; justify-content: center;
background-size: cover; background-position: center;
position: relative; overflow: hidden;
border: 1px solid var(--border);
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ch-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 60%); pointer-events: none; }
.ch-tile:hover { transform: scale(1.04); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--accent-rgb), .5); border-color: rgba(var(--accent-rgb), .4); }
.ch-tile { --ch-glow: rgba(255, 255, 255, .85); }
.ch-logo {
max-height: 56px; max-width: 80%; object-fit: contain;
/* Glow uses the channel's text_color (set inline as --ch-glow) so it always
contrasts with the tile's gradient — white on dark, dark on light tiles. */
filter:
drop-shadow(0 0 8px var(--ch-glow))
drop-shadow(0 0 18px var(--ch-glow))
drop-shadow(0 0 3px rgba(0, 0, 0, .35));
}
.ch-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
/* === INLINE PLAYER === */
.inline-player { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.inline-player.open { max-height: 1500px; margin-bottom: 1.5rem; }
.inline-player .ip-inner { padding: 0 3rem; max-width: 1100px; margin: 0 auto; }
.ip-header { display: flex; align-items: center; justify-content: space-between; padding: 1.8rem 0 1rem; }
.ip-frame { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 16px 50px rgba(0, 0, 0, .5); max-width: 960px; margin: 0 auto; }
.ip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.ip-now-playing { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: 1.4rem 0 .6rem; justify-content: center; }
/* Always-visible episode picker */
.ep-picker {
display: grid; grid-template-columns: 240px 1fr; gap: 1.2rem; align-items: start;
max-width: 1100px; margin: 0 auto; /* centered */
}
.ep-picker-seasons {
display: flex; flex-direction: column; gap: .4rem;
max-height: 480px; overflow-y: auto; padding-right: .3rem;
padding-top: 24px;
}
.ep-season-btn {
display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; color: var(--muted); text-align: left; transition: all .2s;
width: 100%; position: relative;
}
.ep-season-btn:hover { background: var(--surface-2); color: #fff; border-color: var(--border-strong); }
/* "browsing" — user clicked this season but hasn't played it yet */
.ep-season-btn.browsing {
background: rgba(var(--accent-rgb), .12);
border-color: rgba(var(--accent-rgb), .4);
color: var(--accent);
}
/* "playing" — this season's episode is currently in the player */
.ep-season-btn.playing {
background: linear-gradient(135deg, var(--accent2), var(--accent));
border-color: var(--accent); color: #fff;
box-shadow: 0 0 22px rgba(var(--accent-rgb), .4), inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.ep-season-btn.playing .ep-season-count { color: rgba(255, 255, 255, .85); }
/* Both at once — bright + a small "playing" dot */
.ep-season-btn.playing::after {
content: '●';
position: absolute; top: .6rem; right: .8rem;
color: #fff; font-size: .6rem;
animation: playingPulse 1.4s ease-in-out infinite;
text-shadow: 0 0 8px #fff;
}
@keyframes playingPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.ep-season-num { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.ep-season-count { font-size: .72rem; color: var(--muted-2); letter-spacing: 1px; text-transform: uppercase; }
.ep-season-btn.browsing .ep-season-count { color: var(--accent); opacity: .8; }
.ep-picker-episodes {
display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: .5rem; align-content: start; max-height: 480px; overflow-y: auto;
padding-top: 24px;
}
.ep-btn {
padding: .8rem .5rem; background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; color: var(--muted); font-weight: 700; font-size: .85rem; letter-spacing: 1px;
text-align: center; transition: all .2s; display: flex; flex-direction: column; gap: .15rem;
text-transform: uppercase; position: relative;
}
.ep-btn:hover:not(.unaired) { background: var(--surface-2); color: #fff; border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
/* "playing" — this exact episode is in the player */
.ep-btn.playing {
background: linear-gradient(135deg, var(--accent2), var(--accent));
color: #fff; border-color: var(--accent);
box-shadow: 0 0 22px rgba(var(--accent-rgb), .45), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.ep-btn.playing::after {
content: ''; position: absolute; top: 6px; right: 6px;
width: 7px; height: 7px; border-radius: 50%; background: #fff;
box-shadow: 0 0 8px #fff;
animation: playingPulse 1.4s ease-in-out infinite;
}
/* "unaired" — TMDB air_date is in the future, vidlink can't have it */
.ep-btn.unaired {
opacity: .3; cursor: not-allowed; pointer-events: none;
background: var(--surface); border-style: dashed;
}
.ep-btn.unaired::before {
content: 'TBA'; position: absolute; top: 4px; right: 6px;
font-size: .55rem; color: var(--muted-2); letter-spacing: 1px;
background: rgba(0, 0, 0, .4); padding: 1px 4px; border-radius: 3px;
}
.ep-btn .ep-num { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 900; line-height: 1; }
.ep-btn .ep-label { font-size: .62rem; opacity: .85; letter-spacing: 1px; }
.ep-picker-current { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
@media (max-width: 720px) {
.ep-picker { grid-template-columns: 1fr; }
.ep-picker-seasons { flex-direction: row; max-height: none; overflow-x: auto; padding-bottom: .5rem; }
.ep-season-btn { flex: 0 0 auto; min-width: 140px; }
}
.ip-controls { padding: 1.4rem 0 .6rem; display: flex; flex-direction: column; gap: 1rem; }
.ip-now-playing { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ip-np-label { font-size: .68rem; letter-spacing: 3px; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.ip-np-title { font-weight: 700; font-size: 1.05rem; }
.ip-np-sub { color: var(--muted); font-size: .92rem; }
.ip-season-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.ip-season {
padding: .5rem .95rem; background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .82rem; letter-spacing: 1px; text-transform: uppercase;
transition: all .2s;
}
.ip-season:hover { background: var(--surface-2); color: #fff; }
.ip-season.active { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .4); color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .3); }
.ip-episodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: .5rem; }
.ip-ep {
padding: .65rem; background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .8rem;
letter-spacing: 1px; text-align: center; transition: all .2s;
}
.ip-ep:hover { background: var(--surface-2); color: #fff; border-color: var(--border-strong); }
.ip-ep.active { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .4); color: var(--accent); }
/* === DETAIL HERO (movie/tv page) === */
.detail-hero {
position: relative; min-height: 88vh; padding: 7rem 3rem 4rem;
display: flex; align-items: flex-end; overflow: hidden;
}
.detail-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.detail-hero-inner { position: relative; z-index: 2; max-width: 880px; }
.detail-logo { max-height: 200px; max-width: min(460px, 85vw); width: 100%; margin-bottom: 1.5rem; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .5)); }
.detail-title-big { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 900; line-height: 1; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
.detail-tagline { font-style: italic; color: var(--muted); margin-bottom: 1.2rem; font-size: 1.05rem; }
.detail-meta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; align-items: center; }
.detail-badge { padding: .3rem .8rem; background: linear-gradient(135deg, var(--accent2), var(--accent)); border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.detail-rating { color: var(--gold); font-weight: 700; font-size: 1.15rem; }
.rating-out { color: var(--muted-2); font-size: .8rem; font-weight: 400; }
.detail-genres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.genre-chip { padding: .35rem .9rem; background: rgba(255, 255, 255, .06); border: 1px solid var(--border); border-radius: 999px; font-size: .76rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); transition: all .2s; }
.genre-chip:hover { background: rgba(var(--accent-rgb), .15); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.detail-desc { font-size: 1.05rem; color: var(--muted); line-height: 1.7; max-width: 720px; margin-bottom: 2rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.detail-body { padding-bottom: 4rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; padding: 2.5rem 3rem 0; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.4rem; }
.stat-label { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1; margin: .4rem 0 .3rem; }
.stat-val span { font-size: 1rem; color: var(--muted-2); }
.stat-sub { font-size: .8rem; color: var(--muted-2); }
.crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; padding: 2.5rem 3rem 0; }
.crew-label { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: .4rem; }
.crew-val a { color: #fff; font-weight: 600; }
.crew-val a:hover { color: var(--accent); }
.collection-banner { display: block; margin: 2.5rem 3rem 0; aspect-ratio: 4/1; border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; transition: transform .3s; border: 1px solid var(--border); }
.collection-banner:hover { transform: scale(1.01); }
.cb-overlay { position: absolute; inset: 0; padding: 1.5rem 2rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to right, rgba(5, 9, 18, .85) 30%, transparent 70%); }
.cb-label { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cb-name { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 800; margin: .3rem 0; text-transform: uppercase; }
.cb-cta { color: var(--muted); font-size: .82rem; letter-spacing: 1px; text-transform: uppercase; }
.cast-item { flex: 0 0 140px; text-align: center; transition: transform .25s; display: block; }
.cast-item:hover { transform: translateY(-4px); }
.cast-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: .5rem; background: var(--bg-2); border: 1px solid var(--border); transition: border-color .25s, box-shadow .25s; }
.cast-item:hover img { border-color: var(--accent); box-shadow: 0 0 25px rgba(var(--accent-rgb), .3); }
.cast-name { font-weight: 600; font-size: .85rem; }
.cast-char { font-size: .74rem; color: var(--muted-2); margin-top: .2rem; }
/* === TIMELINE (collection detail page) === */
.timeline { display: flex; flex-direction: column; gap: 1rem; padding: 0 3rem; max-width: 1100px; margin: 0 auto; }
.timeline-item {
display: grid; grid-template-columns: 60px 100px 1fr 30px;
gap: 1.5rem; align-items: center; padding: 1rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
transition: transform .3s, border-color .3s, box-shadow .3s;
}
.timeline-item:hover { transform: translateX(8px); border-color: rgba(var(--accent-rgb), .4); box-shadow: 0 15px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(var(--accent-rgb), .15); }
.timeline-num { font-family: 'Barlow Condensed', sans-serif; font-size: 2.5rem; font-weight: 900; color: var(--accent); opacity: .7; text-align: center; }
.timeline-item img { width: 100px; height: 150px; object-fit: cover; border-radius: 8px; background: var(--bg-2); }
.timeline-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .4rem; }
.timeline-meta { display: flex; gap: .7rem; align-items: center; margin-bottom: .5rem; font-size: .75rem; color: var(--muted); }
.rating-pill { color: var(--gold); font-weight: 700; }
.timeline-desc { font-size: .85rem; line-height: 1.55; color: var(--muted); max-width: 560px; }
.timeline-arrow { font-size: 1.3rem; color: var(--accent); opacity: .5; transition: opacity .25s, transform .25s; }
.timeline-item:hover .timeline-arrow { opacity: 1; transform: translateX(6px); }
/* === BROWSE FILTERS === */
.browse-page { padding: calc(var(--nav-h) + 2rem) 3rem 3rem; }
.browse-header { margin-bottom: 2rem; }
.browse-header .page-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .4rem; }
.browse-header .page-sub { color: var(--muted); font-size: 1rem; max-width: 700px; }
.filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px); }
.filter-segment { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 50px; padding: .25rem; margin-bottom: 1.2rem; gap: .25rem; }
.filter-segment input { display: none; }
.filter-segment label, .filter-segment a {
padding: .5rem 1.2rem; border-radius: 50px;
font-size: .72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
color: var(--muted); cursor: pointer; transition: all .2s;
}
.filter-segment input:checked + label, .filter-segment a.active { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.filter-field label { display: block; font-size: .68rem; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: .4rem; }
.filter-field select, .filter-field input[type="text"] {
width: 100%; padding: .7rem .9rem;
background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; color: #fff; font-size: .85rem;
transition: border-color .2s, box-shadow .2s;
}
.filter-field select:focus, .filter-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.person-search-wrap { position: relative; }
.person-results { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10, 18, 32, .97); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 8px; margin-top: .3rem; max-height: 300px; overflow-y: auto; z-index: 10; display: none; }
.person-results.show { display: block; }
.person-result { display: flex; gap: .7rem; align-items: center; padding: .5rem .8rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.person-result:hover { background: var(--surface-2); }
.person-result img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.filter-actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.result-count { margin-left: auto; font-size: .76rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
/* === Pagination === */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 3rem; margin-top: 1rem; }
.page-btn { padding: .6rem 1.4rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: .72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; transition: all .2s; }
.page-btn:hover:not(.disabled) { background: rgba(var(--accent-rgb), .15); border-color: var(--accent); color: var(--accent); }
.page-btn.disabled { opacity: .3; pointer-events: none; }
.page-info { font-size: .85rem; color: var(--muted); font-weight: 600; }
/* === GENRE CHIPS ROW === */
.genre-chips-row { padding: 0 3rem 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
/* === PEOPLE GRID === */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem; padding: 0 3rem; }
.people-card { text-align: center; transition: transform .25s; display: block; }
.people-card:hover { transform: translateY(-4px); }
.people-card img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; margin-bottom: .7rem; background: var(--bg-2); border: 1px solid var(--border); transition: border-color .25s, box-shadow .25s; }
.people-card:hover img { border-color: var(--accent); box-shadow: 0 0 25px rgba(var(--accent-rgb), .3); }
.people-name { font-weight: 700; font-size: .85rem; margin-bottom: .2rem; }
.people-job { font-size: .68rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
/* === EMPTY STATE === */
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .5; font-family: 'Barlow Condensed', sans-serif; }
.empty-state h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: .5rem; color: #fff; }
/* === SEARCH OVERLAY === */
#search-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(5, 9, 18, .97); backdrop-filter: blur(24px);
display: flex; flex-direction: column; padding: 6rem 3rem 2rem;
opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
#search-overlay.open { opacity: 1; visibility: visible; }
.search-wrap { display: flex; align-items: center; gap: 1rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--border-strong); border-radius: 14px; padding: .5rem 1rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.search-icon-wrap { color: var(--muted); flex-shrink: 0; display: flex; }
.search-input { flex: 1; background: none; border: none; padding: 1rem .5rem; font-size: 1.2rem; outline: none; color: #fff; }
.search-close { background: rgba(255, 255, 255, .1); padding: .4rem .7rem; border-radius: 8px; color: #fff; }
/* === Search suggestions & results — SAME max width === */
.search-suggestions, .search-results { max-width: 1100px; margin: 1.5rem auto 0; width: 100%; }
.search-results { overflow-y: auto; flex: 1; padding-right: 0; }
.sugg-label { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted-2); margin-bottom: .8rem; }
.sugg-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.sugg-pills button {
padding: .5rem 1rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--border); border-radius: 999px;
color: var(--muted); font-size: .82rem; transition: all .2s; letter-spacing: 1px;
}
.sugg-pills button:hover { background: rgba(var(--accent-rgb), .15); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.search-result-section { margin-bottom: 1.5rem; }
.search-result-section h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; padding-left: .3rem; }
.search-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
.search-result-card { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; border-radius: 10px; transition: background .2s; }
.search-result-card:hover { background: rgba(255, 255, 255, .06); }
.search-result-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; background: var(--bg-2); }
.search-result-card .src-title { font-weight: 600; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-card .src-sub { font-size: .72rem; color: var(--muted); }
.src-empty { text-align: center; color: var(--muted); padding: 3rem 0; }
.src-loading { text-align: center; color: var(--muted); padding: 2rem 0; font-size: .85rem; letter-spacing: 1px; }
/* === Trailer modal === */
.player-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .85); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 2rem; }
.player-modal.open { display: flex; }
.player-inner { width: min(1100px, 100%); aspect-ratio: 16/9; position: relative; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.player-close { position: absolute; top: .8rem; right: .8rem; z-index: 10; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 1.1rem; }
.player-frame { width: 100%; height: 100%; }
.player-frame iframe { width: 100%; height: 100%; border: none; }
/* === Page padding, forms, settings === */
.page-pad { padding: calc(var(--nav-h) + 2rem) 3rem 3rem; max-width: 1440px; margin: 0 auto; }
.page-narrow { max-width: 880px; }
.page-header { margin-bottom: 2rem; }
.page-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .4rem; }
.page-sub { color: var(--muted); font-size: 1rem; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; }
.form-card label { display: block; margin-bottom: 1rem; }
.form-card label > span { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .5rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.form-card input[type="text"], .form-card input[type="email"], .form-card input[type="password"], .form-card input[type="number"], .form-card textarea, .form-card select,
.admin-form input, .admin-form select, .admin-form textarea {
width: 100%; padding: .7rem .9rem; background: rgba(0, 0, 0, .3); border: 1px solid var(--border-strong);
border-radius: 8px; color: #fff; font-size: .9rem; transition: border-color .2s;
}
.form-card input:focus, .form-card textarea:focus, .form-card select:focus,
.admin-form input:focus, .admin-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.form-card input[type="color"] { width: 100%; height: 44px; padding: 4px; cursor: pointer; }
.form-section-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; letter-spacing: 2px; text-transform: uppercase; margin: 1.5rem 0 .4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.form-sub { font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .6rem; }
.form-actions { display: flex; gap: .7rem; margin-top: 1.5rem; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1rem; }
.hint { color: var(--muted-2); font-size: .82rem; margin-bottom: 1rem; }
.hint small { display: block; color: var(--muted-2); font-size: .76rem; margin-top: .2rem; }
.toggle-grid { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.toggle-row strong { display: block; font-weight: 600; font-size: .9rem; }
.toggle-row p { font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.toggle-row input[type="checkbox"] { appearance: none; width: 44px; height: 24px; background: rgba(255, 255, 255, .12); border-radius: 999px; position: relative; transition: background .2s; flex-shrink: 0; cursor: pointer; }
.toggle-row input[type="checkbox"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left .2s; }
.toggle-row input[type="checkbox"]:checked { background: var(--accent); }
.toggle-row input[type="checkbox"]:checked::after { left: 23px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; margin-bottom: 1.5rem; }
.theme-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .8rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .2s; }
.theme-tile:hover { background: var(--surface-2); }
.theme-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(var(--accent-rgb), .25); }
.theme-tile input { display: none; }
.theme-swatch { width: 56px; height: 56px; border-radius: 12px; }
.theme-custom { background: conic-gradient(from 0deg, #ff6b6b, #fbbf24, #1ce783, #00c6ff, #a78bfa, #ff6b6b); }
.theme-tile span { font-size: .78rem; font-weight: 600; letter-spacing: 1px; }
.custom-colors { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.5rem; }
.theme-preview { padding: 1rem; background: rgba(0, 0, 0, .3); border-radius: 12px; margin-bottom: 1rem; }
.preview-row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.preview-card { width: 90px; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .76rem; color: #fff; letter-spacing: 1px; text-transform: uppercase; }
.preview-btn { padding: .55rem 1rem; background: linear-gradient(135deg, var(--accent2), var(--accent)); border-radius: 8px; font-weight: 600; color: #fff; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; }
.preview-pill { padding: .3rem .7rem; background: rgba(var(--accent-rgb), .18); color: var(--accent); border-radius: 6px; font-size: .72rem; font-weight: 600; letter-spacing: 1px; }
/* === Compact Player Customization === */
.player-customize-grid {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 1.2rem; margin: 1rem 0 1.5rem;
}
@media (max-width: 900px) { .player-customize-grid { grid-template-columns: 1fr; } }
.player-controls-col { display: flex; flex-direction: column; gap: .9rem; }
.player-row-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: .85rem; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--muted);
padding: .4rem 0 .2rem;
border-bottom: 1px solid var(--border);
margin-bottom: .4rem;
}
.color-swatch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.color-swatch {
display: flex; flex-direction: column; gap: .4rem;
padding: .65rem .7rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--border);
border-radius: 10px; transition: border-color .2s;
}
.color-swatch:hover { border-color: var(--border-strong); }
.color-swatch span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.color-swatch input[type="color"] {
width: 100%; height: 36px; padding: 2px;
background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.player-select-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.player-select-row label { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.player-select-row label > span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin: 0; }
.player-select-row select { padding: .55rem .7rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 8px; color: #fff; font-size: .85rem; }
.player-chip-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
.chip-toggle {
position: relative; padding: .7rem .85rem;
background: rgba(255, 255, 255, .03); border: 1px solid var(--border);
border-radius: 11px; cursor: pointer; transition: all .15s;
display: flex; align-items: center; gap: .65rem;
font-size: .82rem; font-weight: 600; letter-spacing: .3px;
color: var(--muted); user-select: none;
}
.chip-toggle:hover { border-color: var(--border-strong); }
.chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
/* the pill switch */
.chip-toggle::before {
/*content: ''; width: 34px; height: 19px; border-radius: 999px; flex-shrink: 0; */
/*background: rgba(255, 255, 255, .14); transition: background .18s; */
display: none;
}
.chip-toggle::after {
/*content: ''; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); */
/*width: 13px; height: 13px; border-radius: 50%; background: #fff; */
/*transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.4); */
display: none;
}
.chip-toggle:has(input:checked) {
border-color: rgba(var(--accent-rgb), .5); color: #fff;
background: rgba(var(--accent-rgb), .08);
}
.chip-toggle:has(input:checked)::before { background: var(--accent); }
.chip-toggle:has(input:checked)::after { transform: translateY(-50%) translateX(15px); }
.player-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.player-text-grid label { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.player-text-grid label > span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin: 0; font-family: ui-monospace, monospace; }
.player-text-grid input { padding: .55rem .7rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 8px; color: #fff; font-size: .82rem; font-family: ui-monospace, monospace; }
.player-text-grid input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
@media (max-width: 540px) { .color-swatch-row, .player-select-row, .player-text-grid { grid-template-columns: 1fr; } }
.player-preview-col { display: flex; flex-direction: column; }
.player-preview-card {
background: rgba(0, 0, 0, .35); border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 14px;
padding: 1rem; box-shadow: 0 0 30px rgba(var(--accent-rgb), .1);
display: flex; flex-direction: column; gap: .7rem;
position: sticky; top: calc(var(--nav-h) + 1rem);
}
.player-preview-head { display: flex; align-items: center; justify-content: space-between; }
.player-preview-label { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.player-preview-frame { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.player-preview-frame iframe { width: 100%; height: 100%; border: none; }
.player-preview-url { display: flex; gap: .5rem; align-items: center; font-size: .78rem; }
.player-preview-url code {
display: inline-block; flex: 1; min-width: 0;
padding: .5rem .7rem; background: rgba(0, 0, 0, .5); border-radius: 6px;
color: var(--accent); font-family: ui-monospace, monospace; font-size: .68rem;
overflow-x: auto; white-space: nowrap;
}
/* === Collections page logo + cards === */
.cc-logo {
max-width: 220px; max-height: 60px; width: auto; height: auto;
margin: .2rem 0 .3rem;
filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .75)) drop-shadow(0 0 12px rgba(0, 0, 0, .5));
object-fit: contain;
}
/* === Profile page: color picker row + avatar preview === */
.color-picker-row {
display: flex; align-items: center; gap: 1rem;
}
.color-picker-row input[type="color"] {
width: 56px; height: 56px; padding: 4px;
background: rgba(0, 0, 0, .35); border: 1px solid var(--border-strong);
border-radius: 12px; cursor: pointer;
}
.avatar-preview {
width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1.4rem; color: #fff;
border: 2px solid rgba(255, 255, 255, .15);
box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
/* === Channel hero === */
.channel-hero { padding: calc(var(--nav-h) + 3rem) 3rem 2rem; text-align: center; background: radial-gradient(ellipse at top, rgba(var(--accent-rgb), .15), transparent 60%); }
.channel-hero-logo img {
max-height: 90px; margin: 0 auto 1rem;
/* No invert — preserve original logo colors. Two-layer glow: tight accent
halo for contrast + soft white outer for visibility on dark hero. */
filter:
drop-shadow(0 0 10px rgba(var(--accent-rgb), .55))
drop-shadow(0 0 22px rgba(255, 255, 255, .35))
drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
}
.channel-name { font-family: 'Barlow Condensed', sans-serif; font-size: 3rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.channel-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0; }
.channel-desc { max-width: 740px; margin: 1rem auto; color: var(--muted); line-height: 1.6; }
.channel-link { display: inline-block; margin-top: .5rem; color: var(--accent); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: .82rem; }
.channel-link:hover { text-decoration: underline; }
/* === Collections page grid === */
.collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; padding: 1rem 0; }
.collection-card { display: block; aspect-ratio: 16/9; border-radius: 14px; background-size: cover; background-position: center; background-color: var(--bg-2); position: relative; overflow: hidden; border: 1px solid var(--border); transition: transform .3s, box-shadow .3s; }
.collection-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--accent-rgb), .4); }
.cc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 9, 18, .95) 30%, transparent 80%); }
.cc-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.2rem 1.4rem; }
.cc-label { font-size: .66rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: .2rem; }
.cc-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; line-height: 1.1; text-transform: uppercase; letter-spacing: 1px; }
.cc-sub { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.cc-cta { margin-top: .6rem; font-size: .76rem; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
/* === FOOTER === */
.site-footer { padding: 3rem 3rem 2rem; border-top: 1px solid var(--border); margin-top: 4rem; }
.footer-inner { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.site-footer .logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 900; letter-spacing: 5px; background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; font-size: .82rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.footer-links a:hover { color: var(--accent); }
.footer-meta { color: var(--muted-2); font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.r3tr0-brand {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
letter-spacing: 3px;
font-size: 1rem;
background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
text-transform: uppercase;
}
.r3tr0-suffix { -webkit-text-fill-color: var(--accent); color: var(--accent); }
.footer-tmdb { font-size: .68rem; color: var(--muted-2); opacity: .7; letter-spacing: .5px; }
/* === Flash messages — auto-dismissing toast === */
.flash {
position: fixed; top: calc(var(--nav-h) + 1rem); left: 50%;
transform: translate(-50%, -20px);
z-index: 1000; padding: .9rem 1.4rem; border-radius: 12px;
font-weight: 600; font-size: .88rem; letter-spacing: .5px;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
display: flex; align-items: center; gap: .6rem;
min-width: 280px; max-width: 90vw;
opacity: 0; pointer-events: none;
animation: flashIn 4.5s cubic-bezier(.4, 0, .2, 1) forwards;
margin: 0; box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
}
.flash::before {
content: ''; flex-shrink: 0;
width: 8px; height: 8px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 12px currentColor;
}
.flash-success { background: rgba(16, 192, 138, .15); border: 1px solid rgba(16, 192, 138, .45); color: var(--success); }
.flash-error { background: rgba(255, 91, 103, .15); border: 1px solid rgba(255, 91, 103, .45); color: var(--danger); }
@keyframes flashIn {
0% { opacity: 0; transform: translate(-50%, -20px); }
10% { opacity: 1; transform: translate(-50%, 0); }
88% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -20px); pointer-events: none; }
}
/* === Toast === */
#toast { position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 100px); z-index: 500; padding: .8rem 1.4rem; background: rgba(15, 22, 38, .95); border: 1px solid var(--border-strong); border-radius: 10px; backdrop-filter: blur(20px); transition: transform .3s; }
#toast.show { transform: translate(-50%, 0); }
/* === ADMIN PANEL === */
body.admin-body { background: var(--bg); display: flex; min-height: 100vh; }
.admin-sidebar { width: 250px; background: rgba(10, 18, 32, .65); backdrop-filter: blur(20px); border-right: 1px solid var(--border); padding: 1.5rem 1rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; height: 100vh; }
.admin-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: 5px; padding: 0 .5rem 1rem; border-bottom: 1px solid var(--border); }
.admin-logo span { color: var(--accent); font-weight: 600; font-size: .85rem; letter-spacing: 2px; }
.admin-nav { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.admin-nav a { padding: .7rem .9rem; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: .7rem; transition: all .15s; }
.admin-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.admin-nav a.active { background: rgba(var(--accent-rgb), .15); color: var(--accent); }
.admin-sb-foot { padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
.admin-sb-foot a, .admin-sb-foot button { padding: .5rem .7rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: .76rem; text-align: center; letter-spacing: 1px; text-transform: uppercase; }
.admin-sb-foot a:hover, .admin-sb-foot button:hover { background: var(--surface-2); color: #fff; }
.admin-main { flex: 1; padding: 2rem; min-width: 0; }
.admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.admin-crumb { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.admin-greeting { color: var(--muted); font-size: .82rem; margin: .2rem 0 0; letter-spacing: 1px; }
.admin-greeting strong { color: #fff; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.admin-stats .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.4rem; }
.admin-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.admin-cards-split { grid-template-columns: 1fr 1.4fr; }
@media (max-width: 1100px) { .admin-cards-split { grid-template-columns: 1fr; } }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; }
.admin-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; padding: .7rem .6rem; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--border); font-weight: 600; }
.admin-table td { padding: .8rem .6rem; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: .9rem; vertical-align: middle; }
.admin-table tr:hover td { background: rgba(255, 255, 255, .02); }
.admin-table small { color: var(--muted-2); font-size: .76rem; }
.user-cell { display: flex; align-items: center; gap: .7rem; }
.role-admin { padding: .18rem .55rem; background: rgba(var(--accent-rgb), .18); color: var(--accent); border-radius: 4px; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.role-user { padding: .18rem .55rem; background: rgba(255, 255, 255, .07); color: var(--muted); border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.badge-on { padding: .18rem .55rem; background: rgba(16, 192, 138, .18); color: var(--success); border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.badge-off { padding: .18rem .55rem; background: rgba(255, 255, 255, .08); color: var(--muted-2); border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.kind-pill { padding: .18rem .55rem; background: rgba(255, 255, 255, .07); border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.kind-pill.kind-company { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.row-actions { display: flex; gap: .4rem; align-items: center; }
.row-actions form { display: inline; }
.row-actions .btn-icon { width: 32px; height: 32px; padding: 0; }
.thumb-cell { width: 80px; height: 45px; background-size: cover; background-position: center; border-radius: 6px; background-color: var(--bg-2); }
.ch-cell-preview { width: 70px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; }
.admin-form { display: flex; flex-direction: column; gap: .6rem; }
.admin-form label { display: block; }
.admin-form label > span { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .35rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.admin-form input[type="color"] { height: 44px; padding: 4px; }
.admin-form input[type="range"] { width: 100%; }
.admin-form output { color: var(--accent); font-weight: 700; }
.quick-actions { display: grid; gap: .5rem; }
.qa { padding: .8rem 1rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 10px; transition: all .15s; }
.qa:hover { background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .3); }
.qa strong { display: block; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: .82rem; }
.qa span { display: block; font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.marquee-preview { background: rgba(0, 0, 0, .3); border: 1px solid var(--border); border-radius: 10px; }
/* === Auth forms === */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 3rem; background: radial-gradient(ellipse at top, rgba(var(--accent2-rgb), .18), transparent 60%); }
.auth-card { width: min(440px, 100%); background: rgba(15, 22, 38, .7); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 18px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.auth-card h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: .4rem; }
.auth-sub { color: var(--muted); margin-bottom: 2rem; }
.auth-card label { display: block; margin-bottom: 1rem; }
.auth-card label > span { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .4rem; letter-spacing: 1.5px; text-transform: uppercase; }
.auth-card input { width: 100%; padding: .75rem 1rem; background: rgba(0, 0, 0, .35); border: 1px solid var(--border-strong); border-radius: 10px; color: #fff; font-size: 1rem; }
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card .btn-primary { width: 100%; justify-content: center; }
.auth-meta { text-align: center; margin-top: 1.5rem; color: var(--muted); font-size: .85rem; }
.auth-meta a { color: var(--accent); font-weight: 600; }
.auth-note { background: rgba(0, 0, 0, .3); border: 1px dashed var(--border-strong); border-radius: 10px; padding: .8rem 1rem; margin: 1.2rem 0; font-size: .82rem; color: var(--muted); line-height: 1.55; text-align: left; }
.auth-note strong { color: var(--accent); }
/* === Person page === */
.person-page { padding: calc(var(--nav-h) + 2rem) 3rem 3rem; max-width: 1440px; margin: 0 auto; }
/* === Profile page === */
.profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: visible; margin-bottom: 2rem; }
.profile-banner { position: relative; height: 180px; background: linear-gradient(135deg, var(--accent2), var(--accent)); overflow: hidden; border-radius: 16px 16px 0 0; }
.profile-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 9, 18, .9), transparent 65%); }
.profile-banner-glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .2), transparent 40%),
radial-gradient(circle at 80% 20%, rgba(0, 0, 0, .25), transparent 50%),
repeating-linear-gradient(45deg, transparent 0px, transparent 18px, rgba(255, 255, 255, .03) 18px, rgba(255, 255, 255, .03) 19px);
}
/* Avatar sits below the banner and pulls up over it — no z-index fights */
.profile-avatar-wrap {
position: relative;
display: inline-block;
margin-top: -62px;
margin-left: 2rem;
margin-bottom: 0;
width: 124px; height: 124px;
z-index: 5;
}
.profile-avatar-big {
width: 124px; height: 124px; border-radius: 50%;
border: 5px solid var(--bg);
display: flex; align-items: center; justify-content: center;
font-family: 'Barlow Condensed', sans-serif;
font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0;
background-size: cover; background-position: center top;
box-shadow: 0 8px 32px rgba(0, 0, 0, .7), 0 0 24px rgba(var(--accent-rgb), .35);
overflow: hidden;
}
.profile-avatar-big .pab-initial { line-height: 1; pointer-events: none; }
.avatar-edit-btn {
position: absolute; bottom: 2px; right: 2px; z-index: 6;
width: 34px; height: 34px; border-radius: 50%;
background: var(--accent); color: #fff;
border: 3px solid var(--bg); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform .15s, box-shadow .15s;
}
.avatar-edit-btn:hover { transform: scale(1.12); box-shadow: 0 4px 16px rgba(var(--accent-rgb), .6); }
.profile-meta { padding: 1rem 2rem 2rem; }
.profile-meta h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: .3rem; }
.profile-meta p { color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }
.profile-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.profile-stats > div { display: flex; flex-direction: column; }
.profile-stats strong { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1; }
.profile-stats strong.stat-on { color: #10c08a; text-shadow: 0 0 14px rgba(16,192,138,.5); }
.profile-stats span { font-size: .68rem; color: var(--muted-2); letter-spacing: 2px; text-transform: uppercase; margin-top: .3rem; font-weight: 600; }
/* Avatar picker modal — must be appended to body via JS for reliable fixed positioning */
.avatar-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 9000;
background: rgba(3, 6, 14, .85);
display: none;
align-items: center; justify-content: center;
padding: 1.5rem;
}
.avatar-modal.open { display: flex; }
.avatar-modal-box {
background: var(--surface); border: 1px solid var(--border-strong);
border-radius: 18px; width: 100%; max-width: 600px;
max-height: 85vh; display: flex; flex-direction: column;
box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.avatar-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 1.4rem 1.4rem .4rem;
}
.avatar-modal-head h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.avatar-modal-close {
background: rgba(255,255,255,.06); border: 1px solid var(--border);
color: var(--muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: .9rem;
}
.avatar-modal-close:hover { color: #fff; border-color: var(--border-strong); }
.avatar-modal-sub { padding: 0 1.4rem; margin: .2rem 0 .8rem; }
.avatar-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
gap: .7rem; padding: .6rem 1.4rem 1rem; overflow-y: auto;
}
.avatar-grid-loading { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 2rem 0; }
.avatar-option {
aspect-ratio: 1; border-radius: 50%; cursor: pointer;
background-size: cover; background-position: center top;
border: 3px solid transparent; transition: transform .12s, border-color .12s;
position: relative;
}
.avatar-option:hover { transform: scale(1.08); border-color: var(--border-strong); }
.avatar-option.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb),.5); }
.avatar-modal-foot {
padding: 1rem 1.4rem; border-top: 1px solid var(--border);
display: flex; justify-content: flex-end;
}
/* 2FA panes inside profile */
.twofa-pane { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.twofa-pane .hint { margin-bottom: 1rem; }
.color-picker-note { font-size: .72rem; color: var(--muted-2); text-transform: none; letter-spacing: 0; }
/* profile-meta name spacing */
.profile-meta { padding: 1rem 2rem 2rem; }
.profile-meta h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin: .8rem 0 .3rem; }
.profile-meta > p { color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }
/* === Auth pages (login / register) === */
.auth-page {
position: relative; min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 2rem 3rem;
overflow: hidden;
}
.auth-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 60% 60% at 20% 30%, rgba(var(--accent2-rgb), .28), transparent 70%),
radial-gradient(ellipse 60% 60% at 80% 70%, rgba(var(--accent-rgb), .22), transparent 70%);
}
.auth-bg::before {
content: ''; position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 12% 22%, rgba(255, 255, 255, .8), transparent 60%),
radial-gradient(1.5px 1.5px at 24% 67%, rgba(var(--accent-rgb), .85), transparent 60%),
radial-gradient(1.5px 1.5px at 42% 18%, rgba(255, 255, 255, .6), transparent 60%),
radial-gradient(2px 2px at 58% 78%, rgba(var(--accent2-rgb), .9), transparent 60%),
radial-gradient(1.5px 1.5px at 73% 32%, rgba(255, 255, 255, .7), transparent 60%),
radial-gradient(1.5px 1.5px at 85% 88%, rgba(var(--accent-rgb), .75), transparent 60%),
radial-gradient(2px 2px at 38% 51%, rgba(255, 255, 255, .5), transparent 60%),
radial-gradient(1.5px 1.5px at 92% 14%, rgba(var(--accent2-rgb), .65), transparent 60%);
animation: authStars 14s ease-in-out infinite;
}
.auth-bg::after {
content: ''; position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 8% 88%, rgba(var(--accent-rgb), .7), transparent 60%),
radial-gradient(2px 2px at 64% 12%, rgba(255, 255, 255, .55), transparent 60%),
radial-gradient(1.5px 1.5px at 28% 42%, rgba(var(--accent2-rgb), .8), transparent 60%),
radial-gradient(1.5px 1.5px at 52% 64%, rgba(255, 255, 255, .55), transparent 60%),
radial-gradient(2px 2px at 90% 48%, rgba(var(--accent-rgb), .85), transparent 60%);
animation: authStars 19s ease-in-out -3s infinite reverse;
}
@keyframes authStars {
0%, 100% { opacity: .55; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-14px); }
}
.auth-card {
position: relative; z-index: 1;
width: min(440px, 100%);
background: rgba(15, 22, 38, .72);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid var(--border); border-radius: 20px;
padding: 2.5rem 2.2rem;
box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(var(--accent-rgb), .12);
}
.auth-logo {
display: block; text-align: center; margin-bottom: 1.4rem;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900; font-size: 1.8rem; letter-spacing: 6px;
background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.auth-card h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .4rem; text-align: center; }
.auth-sub { color: var(--muted); font-size: .85rem; text-align: center; margin-bottom: 1.6rem; }
.auth-form { display: flex; flex-direction: column; gap: .8rem; }
.auth-form label { display: flex; flex-direction: column; gap: .35rem; }
.auth-form label > span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; padding-left: .2rem; }
.auth-form input {
padding: .8rem 1rem; background: rgba(0, 0, 0, .35);
border: 1px solid var(--border-strong); border-radius: 10px;
color: #fff; font-size: .95rem; transition: border-color .2s, box-shadow .2s;
}
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.btn-block { display: flex; width: 100%; justify-content: center; margin-top: .4rem; }
.auth-foot { text-align: center; margin-top: 1.4rem; color: var(--muted); font-size: .85rem; }
.auth-foot a { color: var(--accent); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.flash.inline { position: static; transform: none; opacity: 1; pointer-events: auto; animation: none; margin: 0 0 1rem; width: 100%; min-width: 0; }
/* === Responsive === */
@media (max-width: 980px) {
#navbar { padding: 0 1.5rem; }
.nav-links { display: none !important; } /* hidden on mobile — drawer used instead */
.nav-toggle { display: flex; }
}
@media (max-width: 720px) {
#hero, .sub-hero, .detail-hero, .channel-hero, .browse-page, .page-pad, .section-header, .content-section, .cards-row, .stats-grid, .crew-grid, .timeline, .pagination, .genre-chips-row, .people-grid, .site-footer, .inline-player .ip-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
.hero-bars { right: 1.5rem; }
.section-header::before { left: 1.5rem; }
.section-header-channel::after { left: 1.5rem; right: 1.5rem; }
.card { flex: 0 0 140px; }
.card-wide { flex: 0 0 240px; }
.timeline-item { grid-template-columns: 50px 80px 1fr; gap: .8rem; }
.timeline-item img { width: 80px; height: 120px; }
.timeline-arrow { display: none; }
.filter-grid { grid-template-columns: 1fr; }
}
/* === Auth: forgot/2fa supplemental === */
.auth-meta-row { text-align: center; margin-top: .8rem; }
.auth-link-muted { color: var(--muted); font-size: .82rem; letter-spacing: .5px; }
.auth-link-muted:hover { color: var(--accent); text-decoration: underline; }
.otp-input-big {
width: 100%; max-width: 280px; margin: 0 auto;
text-align: center; letter-spacing: 14px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 1.8rem; font-weight: 700;
padding: 1rem .5rem 1rem 1.5rem; /* extra left padding compensates for letter-spacing visual offset */
background: rgba(0, 0, 0, .35);
border: 1px solid var(--border-strong); border-radius: 12px;
color: var(--accent);
}
.otp-input-big:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }
/* === Security page === */
.security-status-card {
display: flex; align-items: center; gap: 1.4rem;
padding: 1.4rem 1.6rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; margin-bottom: 2rem;
}
.security-status-card.on { border-color: rgba(16,192,138,.45); background: rgba(16,192,138,.06); }
.security-status-card.off { border-color: rgba(255,91,103,.3); background: rgba(255,91,103,.04); }
.ssc-icon { font-size: 2.2rem; line-height: 1; }
.ssc-body { flex: 1; }
.ssc-body h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: .25rem; color: #fff; }
.ssc-body p { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; }
.ssc-state { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: 3px; }
.security-status-card.on .ssc-state { color: #10c08a; text-shadow: 0 0 18px rgba(16,192,138,.55); }
.security-status-card.off .ssc-state { color: var(--muted-2); }
.sec-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 2rem;
margin-bottom: 1.6rem;
}
.sec-panel-danger { border-color: rgba(255,91,103,.3); background: rgba(255,91,103,.03); }
.sec-panel-header { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.4rem; }
.sec-panel-icon { font-size: 2rem; line-height: 1; margin-top: .1rem; flex-shrink: 0; }
.sec-panel-header h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: .3rem; }
.sec-panel-header p { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0; }
.sec-app-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.sec-badge {
padding: .3rem .75rem;
background: rgba(255,255,255,.05);
border: 1px solid var(--border);
border-radius: 99px;
font-size: .75rem; font-weight: 600; letter-spacing: .5px; color: var(--muted);
}
.sec-divider { border: none; border-top: 1px solid var(--border); margin: 1.6rem 0; }
.otp-confirm-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.otp-input-big {
width: 200px;
text-align: center; letter-spacing: 10px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 1.6rem; font-weight: 700;
padding: .9rem .5rem .9rem 1rem;
background: rgba(0,0,0,.35);
border: 1px solid var(--border-strong); border-radius: 12px;
color: var(--accent);
}
.otp-input-big:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18); }
.qr-setup-grid {
display: grid; grid-template-columns: 264px 1fr;
gap: 2rem; margin: 0 0 1.4rem; align-items: center;
}
/* ═══ QR Card — compact dark variant with scan line + glow badge ═══ */
.qr-card {
position: relative;
width: 280px;
height: 280px;
border-radius: 22px;
background: linear-gradient(145deg, #161f2c, #0a0f15);
border: 1px solid rgba(255,255,255,.08);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
box-shadow:
inset 0 0 20px rgba(255,255,255,.04),
inset 0 0 50px rgba(55,191,255,.08),
0 20px 60px rgba(0,0,0,.65),
0 0 40px rgba(55,191,255,.18);
}
/* Animated outer glow halo */
.qr-card::after {
content: '';
position: absolute; inset: -2px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(55,191,255,0), rgba(55,191,255,.35), rgba(55,191,255,0));
z-index: -1;
filter: blur(14px);
animation: qrBorderGlow 4s ease infinite;
}
@keyframes qrBorderGlow {
0%, 100% { opacity: .5; }
50% { opacity: 1; }
}
/* Scan line — BEHIND the QR (z-index 0) */
.qr-scan-line {
position: absolute;
left: 0; right: 0;
height: 3px;
top: -10%;
background: linear-gradient(90deg, transparent, #6fe8ff, transparent);
box-shadow: 0 0 14px #6fe8ff;
animation: qrScan 4s linear infinite;
z-index: 0;
pointer-events: none;
}
@keyframes qrScan {
from { top: -10%; }
to { top: 110%; }
}
/* Inner QR area — sits ABOVE the scan line */
.qr-inner {
position: relative;
z-index: 2;
width: 240px; height: 240px;
border-radius: 14px;
background: #0a0f15;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
isolation: isolate;
box-shadow:
inset 0 0 20px rgba(255,255,255,.04),
0 0 24px rgba(55,191,255,.10);
}
.qr-inner canvas { display: block; position: relative; z-index: 1; }
/* Centered NEXUS badge */
.qr-center-badge {
position: absolute;
z-index: 5;
padding: 5px 12px;
border-radius: 8px;
background: linear-gradient(145deg, rgba(10,18,28,.95), rgba(5,10,18,.88));
border: 1px solid rgba(100,200,255,.22);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow:
0 0 14px rgba(55,191,255,.18),
inset 0 0 8px rgba(255,255,255,.03);
color: #fff;
font-family: 'Barlow Condensed', Impact, sans-serif;
font-size: 18px;
font-weight: 900;
letter-spacing: 4px;
text-shadow: 0 0 8px #37bfff, 0 0 18px #37bfff;
animation: qrBadgeGlow 2s ease infinite alternate;
pointer-events: none;
}
@keyframes qrBadgeGlow {
from { text-shadow: 0 0 8px #37bfff, 0 0 16px #37bfff; }
to { text-shadow: 0 0 14px #6fe8ff, 0 0 28px #37bfff, 0 0 44px #37bfff; }
}
.qr-instructions ol { padding-left: 1.2rem; color: var(--muted); line-height: 1.7; margin: 0; }
.qr-instructions li { margin-bottom: .45rem; font-size: .9rem; }
.qr-instructions strong { color: #fff; }
.manual-key {
padding: .65rem .9rem;
background: rgba(0,0,0,.5);
border: 1px dashed var(--border-strong);
border-radius: 8px;
font-family: ui-monospace, monospace; font-size: .95rem;
color: var(--accent); letter-spacing: 2px; user-select: all;
}
.form-stack { display: flex; flex-direction: column; gap: .8rem; max-width: 400px; }
.btn-danger {
padding: .75rem 1.5rem;
background: linear-gradient(135deg, #ff5577, #ff7e3f);
color: #fff; border: none; border-radius: 10px;
font-weight: 700; font-size: .82rem; letter-spacing: 1.5px;
text-transform: uppercase; cursor: pointer; align-self: flex-start;
}
.btn-danger:hover { box-shadow: 0 6px 20px rgba(255,91,103,.4); }
@media (max-width: 720px) {
.qr-setup-grid { grid-template-columns: 1fr; }
.qr-card { margin: 0 auto; }
.otp-confirm-row { flex-direction: column; align-items: flex-start; }
}
/* === Admin form-grid-2 (used by SMTP page) === */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.form-grid-2 label { display: flex; flex-direction: column; gap: .35rem; }
.form-grid-2 label > span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.form-grid-2 input, .form-grid-2 select {
padding: .65rem .8rem;
background: rgba(0, 0, 0, .25);
border: 1px solid var(--border);
border-radius: 8px; color: #fff; font-size: .9rem;
}
.form-grid-2 input:focus, .form-grid-2 select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.form-grid-2-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
.qr-setup-grid { grid-template-columns: 1fr; }
.qr-card { margin: 0 auto; }
}
/* OTP input fix */
.otp-input-big {
color: var(--accent) !important;
background: rgba(0,0,0,.5) !important;
caret-color: var(--accent);
}
.otp-input-big::placeholder { color: rgba(255,255,255,.25); letter-spacing: 6px; }
/* ── 404 Error Page ── */
.error-page {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3rem var(--pad, 3rem);
overflow: hidden;
gap: 1.2rem;
}
/* Radial glow backdrop — two orbs pulsing */
.error-page::before,
.error-page::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
z-index: 0;
animation: errOrb 6s ease-in-out infinite;
}
.error-page::before {
width: 600px; height: 600px;
top: -200px; left: -150px;
background: radial-gradient(circle, rgba(var(--accent2-rgb), .28), transparent 70%);
animation-delay: 0s;
}
.error-page::after {
width: 500px; height: 500px;
bottom: -150px; right: -100px;
background: radial-gradient(circle, rgba(var(--accent-rgb), .25), transparent 70%);
animation-delay: -3s;
}
@keyframes errOrb {
0%, 100% { transform: scale(1) translate(0, 0); opacity: .7; }
50% { transform: scale(1.2) translate(30px, -20px); opacity: 1; }
}
/* Everything in front of the orbs */
.error-page > * { position: relative; z-index: 1; }
/* Scanline sweep overlay */
.error-page .error-code::before {
content: '';
position: absolute; inset: -40px;
background: repeating-linear-gradient(
to bottom,
transparent 0px, transparent 3px,
rgba(0, 0, 0, .12) 3px, rgba(0, 0, 0, .12) 4px
);
pointer-events: none; z-index: 2;
animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
from { background-position: 0 0; }
to { background-position: 0 80px; }
}
/* ─── 404 number with RGB glitch ─── */
.error-code {
position: relative;
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(8rem, 22vw, 18rem);
font-weight: 900;
line-height: 1;
letter-spacing: -4px;
/* Gradient fill */
background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 50%, #fff 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
/* Outer glow around the text */
filter:
drop-shadow(0 0 30px rgba(var(--accent-rgb), .7))
drop-shadow(0 0 80px rgba(var(--accent2-rgb), .4));
animation: errFloat 4s ease-in-out infinite, errIn .8s cubic-bezier(.4,0,.2,1) both;
user-select: none;
}
/* Glitch layers via pseudo-elements */
.error-code::after {
content: '404';
position: absolute; inset: 0;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: glitch 3.5s steps(1) infinite;
pointer-events: none; z-index: 3;
}
@keyframes glitch {
0%, 93%, 100% { transform: translate(0,0); opacity: 0; clip-path: inset(0 0 100% 0); }
94% { transform: translate(-4px, 2px); opacity: .6; clip-path: inset(28% 0 50% 0); }
95% { transform: translate( 3px, -1px); opacity: .5; clip-path: inset(55% 0 20% 0); }
96% { transform: translate(-2px, 3px); opacity: .7; clip-path: inset(10% 0 70% 0); }
97% { transform: translate( 4px, -2px); opacity: .4; clip-path: inset(75% 0 5% 0); }
98% { transform: translate(-3px, 1px); opacity: .6; clip-path: inset(40% 0 35% 0); }
99% { transform: translate( 0, 0); opacity: 0; clip-path: inset(0 0 100% 0); }
}
@keyframes errFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
/* Entrance animations */
@keyframes errIn { from { opacity: 0; transform: scale(1.18) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes errFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.error-page h1 {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 30px rgba(var(--accent-rgb), .5);
animation: errFadeUp .7s .35s cubic-bezier(.4,0,.2,1) both;
}
.error-page p {
color: var(--muted, rgba(232,240,255,.55));
font-size: 1.05rem;
max-width: 400px;
line-height: 1.6;
animation: errFadeUp .7s .5s cubic-bezier(.4,0,.2,1) both;
}
.error-page .btn-primary {
animation: errFadeUp .7s .65s cubic-bezier(.4,0,.2,1) both;
margin-top: .4rem;
}
/* Floating accent dots around the giant number */
.error-page .error-code ~ * { } /* spacer selector, targets nothing */
.error-page::before { /* repurposed above */ }
/* Extra floating particles unique to 404 (CSS-only, no JS needed) */
.error-page .error-code {
/* Subtle sparkle grid via background-image */
}
@keyframes errSparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } }
.err-spark {
position: absolute;
width: var(--s, 5px);
height: var(--s, 5px);
left: var(--x, 50%);
top: var(--y, 50%);
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent), 0 0 20px rgba(var(--accent-rgb), .6);
pointer-events: none;
z-index: 0;
animation: errSparkle 2.8s var(--d, 0s) ease-in-out infinite;
}
/* Every other one uses accent2 */
.err-spark:nth-child(even) {
background: var(--accent2);
box-shadow: 0 0 8px var(--accent2), 0 0 20px rgba(var(--accent2-rgb), .6);
}
/* ═══ 2FA OTP — final overrides (centered, numeric, themed) ═══ */
.otp-confirm-row {
display: flex; gap: .8rem; align-items: center; justify-content: center;
flex-wrap: wrap;
}
.otp-input-big {
text-align: center; letter-spacing: 10px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 1.6rem; font-weight: 700;
width: 220px; padding: .9rem 1rem;
background: rgba(0,0,0,.5) !important;
border: 1px solid var(--border-strong); border-radius: 12px;
color: var(--accent) !important; caret-color: var(--accent);
}
.otp-input-big::placeholder { color: rgba(255,255,255,.25); letter-spacing: 8px; }
#twofa-pending form[data-twofa="confirm"] { text-align: center; }
#twofa-pending form[data-twofa="confirm"] .hint { text-align: center; }
@media (max-width: 720px) {
.otp-confirm-row { flex-direction: column; align-items: center; }
.otp-input-big { width: 100%; max-width: 260px; }
}
/* ═══ 2FA Recovery / Backup Codes ═══ */
.recovery-block, .recovery-reveal {
background: rgba(0,114,255,.05);
border: 1px solid rgba(0,114,255,.25);
border-radius: 14px;
padding: 1.2rem 1.3rem;
}
.recovery-reveal {
background: rgba(245,158,11,.06);
border-color: rgba(245,158,11,.35);
}
.recovery-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.15rem; font-weight: 800; letter-spacing: 1px;
text-transform: uppercase; color: #fff; margin-bottom: .5rem;
}
.recovery-count { font-size: .85rem; color: var(--muted); margin-top: .6rem; }
.recovery-count strong { color: var(--accent2); font-size: 1rem; }
.recovery-codes-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: .55rem; margin: 1rem 0;
}
.recovery-code {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 1rem; font-weight: 700; letter-spacing: 2px;
text-align: center; padding: .6rem .4rem;
background: rgba(0,0,0,.45);
border: 1px solid var(--border-strong);
border-radius: 9px; color: #fff;
user-select: all;
}
.recovery-actions {
display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem;
}
.recovery-actions .btn-primary,
.recovery-actions .btn-secondary { font-size: .8rem; padding: .6rem 1.1rem; }
@media (max-width: 540px) {
.recovery-codes-grid { grid-template-columns: 1fr; }
}
/* ═══ Person page — hero layout (portrait + bio side-by-side) ═══ */
.person-hero {
display: flex;
gap: 3rem;
align-items: flex-start;
padding: calc(var(--nav-h) + 2.5rem) 3rem 2.5rem;
max-width: 1200px;
margin: 0 auto;
}
.person-portrait {
flex-shrink: 0;
width: 260px;
}
.person-portrait img {
width: 100%;
border-radius: 16px;
aspect-ratio: 2/3;
object-fit: cover;
background: var(--surface);
box-shadow: 0 20px 60px rgba(0,0,0,.5);
border: 1px solid var(--border);
}
.person-bio {
flex: 1;
min-width: 0;
padding-top: .5rem;
}
.person-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2.2rem, 4vw, 3.8rem);
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.person-meta {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1.8rem;
}
.person-bio-text {
margin-bottom: 1.8rem;
}
.person-bio-text h3 {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .7rem;
}
.person-bio-text p {
color: rgba(255,255,255,.78);
line-height: 1.75;
font-size: .97rem;
max-width: 680px;
}
/* ═══ Watchlist page — remove button ═══ */
.remove-btn {
background: none;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: .75rem;
cursor: pointer;
flex-shrink: 0;
transition: border-color .15s, color .15s, background .15s;
line-height: 1;
padding: 0;
}
.remove-btn:hover {
border-color: rgba(255,85,119,.5);
color: #ff5577;
background: rgba(255,85,119,.1);
}
/* ═══ Person page responsive ═══ */
@media (max-width: 720px) {
.person-hero {
flex-direction: column;
padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
gap: 1.5rem;
}
.person-portrait {
width: 160px;
margin: 0 auto;
}
.person-name { text-align: center; }
.person-meta { justify-content: center; }
}
/* ═══ Person page — hero layout (portrait + bio side-by-side) ═══ */
.person-hero {
display: flex;
gap: 3rem;
align-items: flex-start;
padding: calc(var(--nav-h) + 2.5rem) 3rem 2.5rem;
max-width: 1200px;
margin: 0 auto;
}
.person-portrait {
flex-shrink: 0;
width: 260px;
}
.person-portrait img {
width: 100%;
border-radius: 16px;
aspect-ratio: 2/3;
object-fit: cover;
background: var(--surface);
box-shadow: 0 20px 60px rgba(0,0,0,.5);
border: 1px solid var(--border);
}
.person-bio {
flex: 1;
min-width: 0;
padding-top: .5rem;
}
.person-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2.2rem, 4vw, 3.8rem);
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.person-meta {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1.8rem;
}
.person-bio-text {
margin-bottom: 1.8rem;
}
.person-bio-text h3 {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .7rem;
}
.person-bio-text p {
color: rgba(255,255,255,.78);
line-height: 1.75;
font-size: .97rem;
max-width: 680px;
}
/* ═══ Watchlist page — remove button ═══ */
.remove-btn {
background: none;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: .75rem;
cursor: pointer;
flex-shrink: 0;
transition: border-color .15s, color .15s, background .15s;
line-height: 1;
padding: 0;
}
.remove-btn:hover {
border-color: rgba(255,85,119,.5);
color: #ff5577;
background: rgba(255,85,119,.1);
}
/* ═══ Person page responsive ═══ */
@media (max-width: 720px) {
.person-hero {
flex-direction: column;
padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
gap: 1.5rem;
}
.person-portrait { width: 160px; margin: 0 auto; }
.person-name { text-align: center; }
.person-meta { justify-content: center; }
}
/* ═══ OTP input row — centered ═══ */
.otp-input-row {
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0;
}
/* ═══ Password show/hide toggle ═══ */
.pw-wrap {
position: relative;
display: block;
}
.pw-wrap input {
width: 100%;
padding-right: 2.8rem !important;
}
.pw-eye {
position: absolute;
right: .65rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--muted);
padding: .25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: color .15s;
line-height: 0;
z-index: 2;
}
.pw-eye:hover { color: var(--accent2); }
.pw-eye svg { width: 18px; height: 18px; }
/* ═══ Search page ═══ */
.search-page-form {
display: flex;
gap: .6rem;
align-items: center;
max-width: 720px;
margin: 0 0 1.8rem;
position: relative;
}
.search-page-form .search-icon-wrap {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
line-height: 0;
}
.search-page-input {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: .9rem 1.1rem .9rem 2.6rem;
color: #fff;
font-size: .95rem;
transition: border-color .15s, background .15s;
}
.search-page-input:focus {
outline: none;
border-color: var(--accent);
background: var(--surface2);
box-shadow: 0 0 0 4px rgba(0,114,255,.15);
}
.search-page-input::placeholder { color: var(--muted2); }
.search-page-form .btn-primary { padding: .9rem 1.6rem; flex-shrink: 0; }
.search-tabs {
display: flex;
gap: .25rem;
border-bottom: 1px solid var(--border);
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.search-tabs a {
padding: .7rem 1.2rem;
text-decoration: none;
color: var(--muted);
font-weight: 600;
font-size: .88rem;
letter-spacing: .5px;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
margin-bottom: -1px;
}
.search-tabs a:hover { color: #fff; }
.search-tabs a.active {
color: var(--accent2);
border-bottom-color: var(--accent2);
}
.result-summary {
color: var(--muted);
font-size: .9rem;
margin-bottom: 1.3rem;
}
.result-summary strong { color: #fff; }
/* People grid in search results */
.people-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1.2rem;
}
.people-card {
text-decoration: none;
text-align: center;
transition: transform .15s;
}
.people-card:hover { transform: translateY(-4px); }
.people-card img {
width: 100%;
aspect-ratio: 2/3;
object-fit: cover;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--border);
margin-bottom: .6rem;
box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.people-name {
font-weight: 700;
font-size: .88rem;
color: #fff;
margin-bottom: .15rem;
line-height: 1.3;
}
.people-job {
font-size: .72rem;
color: var(--muted);
letter-spacing: .5px;
}
@media (max-width: 540px) {
.search-page-form { flex-direction: column; align-items: stretch; }
.search-page-form .search-icon-wrap { top: 1.3rem; }
.search-page-form .btn-primary { width: 100%; }
}
/* ═══════════════════════════════════════════
FRIENDS PAGE
═══════════════════════════════════════════ */
/* Navbar badge */
.nav-friends-link { position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.nav-pending-badge {
background: #ff5577; color: #fff;
border-radius: 99px; font-size: .6rem; font-weight: 800;
padding: .1rem .4rem; line-height: 1.4; min-width: 18px; text-align: center;
}
.friends-search-form { display: flex; gap: .6rem; }
.friends-search-input {
flex: 1; background: var(--surface2); border: 1px solid var(--border);
border-radius: 10px; padding: .75rem 1rem; color: #fff; font-size: .9rem;
}
.friends-search-input:focus { outline: none; border-color: var(--accent); }
.friend-row {
display: flex; align-items: center; gap: .8rem;
padding: .7rem 0;
border-bottom: 1px solid var(--border);
}
.friend-row:last-child { border-bottom: none; }
.friend-avatar-wrap { position: relative; flex-shrink: 0; }
.friend-avatar {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: .9rem; font-weight: 800; color: #fff; overflow: hidden;
}
.friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.friend-online-dot {
position: absolute; bottom: 0; right: 0;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid var(--surface);
}
.friend-online-dot.online { background: #10c08a; }
.friend-online-dot.offline { background: var(--muted2); }
.friend-info { flex: 1; min-width: 0; }
.friend-name { font-weight: 700; font-size: .9rem; color: #fff; }
.friend-sub { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.friend-sub.online-text { color: #10c08a; }
.friend-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.btn-sm { padding: .4rem .85rem; font-size: .75rem; }
.btn-danger-hover:hover { border-color: rgba(255,85,119,.5); color: #ff5577; }
.badge-count {
background: var(--surface2); border-radius: 99px;
padding: .05rem .45rem; font-size: .65rem; font-weight: 700; color: var(--accent2);
}
/* ═══ Username#tag handle display ═══ */
.profile-handle {
font-size: .95rem;
font-weight: 600;
margin-top: .2rem;
letter-spacing: .5px;
user-select: all; /* easy to copy */
cursor: text;
}
.handle-name { color: rgba(255,255,255,.75); }
.handle-tag { color: var(--accent2); font-weight: 800; }
/* Friends list + chat — tag suffix */
.friend-tag {
color: var(--muted);
font-size: .78em;
font-weight: 600;
margin-left: .05rem;
}
/* ═══════════════════════════════════════════
SERVER PICKER — futuristic dropdown
═══════════════════════════════════════════ */
.server-picker {
position: relative;
margin-right: auto;
margin-left: 1rem;
}
.srv-trigger {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .45rem .85rem;
background: linear-gradient(135deg, rgba(0,114,255,.06), rgba(0,198,255,.04));
border: 1px solid rgba(0,198,255,.22);
border-radius: 10px;
color: var(--muted);
font-size: .72rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: border-color .18s, background .18s, transform .15s;
position: relative;
}
.srv-trigger:hover {
border-color: rgba(0,198,255,.5);
background: linear-gradient(135deg, rgba(0,114,255,.1), rgba(0,198,255,.08));
}
.server-picker.open .srv-trigger {
border-color: var(--accent2);
background: linear-gradient(135deg, rgba(0,114,255,.14), rgba(0,198,255,.12));
}
.srv-trigger .srv-pulse {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
animation: srvPulse 1.8s ease-in-out infinite;
box-shadow: 0 0 8px currentColor;
}
@keyframes srvPulse {
0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px currentColor; }
50% { transform: scale(1.35); opacity: .65; box-shadow: 0 0 14px currentColor; }
}
.srv-trigger .srv-label { color: var(--muted); }
.srv-trigger .srv-name { font-weight: 800; letter-spacing: 1px; text-transform: none; font-size: .82rem; }
.srv-trigger .srv-chev { color: var(--muted); transition: transform .2s; }
.server-picker.open .srv-trigger .srv-chev { transform: rotate(180deg); color: var(--accent2); }
.srv-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
background: linear-gradient(160deg, #131c2a, #0a0f15);
border: 1px solid rgba(0,198,255,.22);
border-radius: 12px;
padding: .45rem;
box-shadow:
0 20px 50px rgba(0,0,0,.6),
0 0 30px rgba(0,198,255,.12);
z-index: 100;
animation: srvMenuIn .18s cubic-bezier(.22,1,.36,1);
}
@keyframes srvMenuIn {
from { opacity: 0; transform: translateY(-8px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.srv-menu-hint {
font-size: .65rem;
color: var(--muted2);
padding: .35rem .55rem .55rem;
border-bottom: 1px solid rgba(255,255,255,.06);
margin-bottom: .35rem;
letter-spacing: .5px;
}
.srv-option {
display: flex;
align-items: center;
gap: .55rem;
width: 100%;
padding: .55rem .6rem;
background: transparent;
border: none;
border-radius: 8px;
color: rgba(255,255,255,.85);
font-size: .85rem;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: background .12s, color .12s;
}
.srv-option:hover {
background: rgba(0,198,255,.08);
color: #fff;
}
.srv-option.active {
background: linear-gradient(90deg, rgba(0,114,255,.18), rgba(0,198,255,.10));
color: #fff;
}
.srv-option.active .srv-opt-name { font-weight: 700; }
.srv-option .srv-dot {
width: 9px; height: 9px; border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 6px currentColor;
}
.srv-option .srv-opt-name { flex: 1; }
.srv-option .srv-num {
font-size: .68rem; color: var(--muted2);
font-family: ui-monospace, monospace;
letter-spacing: .5px;
}
.srv-option svg { color: var(--accent2); flex-shrink: 0; }
@media (max-width: 540px) {
.server-picker { margin-left: .5rem; }
.srv-trigger .srv-label { display: none; }
.srv-trigger { padding: .4rem .7rem; }
}
/* ═══════════════════════════════════════════
FRIEND CHAT DOCK
═══════════════════════════════════════════ */
.chat-dock {
position: fixed !important;
bottom: 1.4rem !important;
right: 1.4rem !important;
top: auto !important;
left: auto !important;
z-index: 9000;
font-family: inherit;
transform: translateZ(0);
contain: layout;
}
/* ── Floating bubble (collapsed) ── */
.chat-dock-bubble {
position: relative;
width: 56px; height: 56px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #0072ff, #00c6ff);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow:
0 8px 24px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.06) inset,
0 0 24px rgba(0,150,255,.35);
transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.chat-dock-bubble:hover {
transform: scale(1.06);
box-shadow:
0 12px 32px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.1) inset,
0 0 36px rgba(0,150,255,.55);
}
.chat-dock-bubble.has-unread {
animation: chatBubblePulse 2s ease-in-out infinite;
}
@keyframes chatBubblePulse {
0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 20px rgba(0,150,255,.35); }
50% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 36px rgba(0,210,255,.7); }
}
.chat-bubble-badge {
position: absolute;
top: -4px; right: -4px;
min-width: 22px; height: 22px;
padding: 0 6px;
border-radius: 11px;
background: #ff5577;
color: #fff;
font-size: .7rem;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
border: 2px solid #0a0f15;
}
.chat-dock[data-open="true"] .chat-dock-bubble { display: none; }
/* ── Expanded panel ── */
.chat-panel {
width: 360px;
height: 540px;
max-height: calc(100vh - 5rem);
background: linear-gradient(160deg, #131c2a, #0a0f15);
border: 1px solid rgba(0,198,255,.18);
border-radius: 18px;
box-shadow:
0 20px 60px rgba(0,0,0,.7),
0 0 40px rgba(0,150,255,.15),
0 0 0 1px rgba(255,255,255,.04) inset;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(20px) scale(.96);
opacity: 0;
pointer-events: none;
transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s;
/* Anchored to bottom-right, grows upward */
position: absolute;
bottom: calc(100% + .75rem);
right: 0;
}
.chat-panel.show {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
/* ── Panel header ── */
.chat-panel-head {
display: flex; align-items: center; gap: .5rem;
padding: .85rem 1rem;
border-bottom: 1px solid rgba(255,255,255,.06);
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
flex-shrink: 0;
}
.chat-back-btn, .chat-close-btn {
background: none; border: none; cursor: pointer;
color: var(--muted); padding: .35rem;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
transition: color .15s, background .15s;
}
.chat-back-btn:hover, .chat-close-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.chat-panel-title {
flex: 1;
font-weight: 800;
font-size: .92rem;
letter-spacing: .5px;
color: #fff;
display: flex; align-items: center; gap: .55rem;
min-width: 0;
}
.chat-conv-avatar {
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .8rem; font-weight: 800; color: #fff;
flex-shrink: 0;
}
.chat-conv-info { min-width: 0; flex: 1; }
.chat-conv-name {
font-size: .85rem; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conv-status {
font-size: .68rem; font-weight: 600; color: var(--muted);
}
.chat-conv-status.online { color: #10c08a; }
/* ── List view ── */
.chat-list-view { flex: 1; overflow-y: auto; }
.chat-list-empty {
text-align: center;
padding: 3rem 1.5rem;
color: var(--muted);
}
.chat-empty-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.chat-empty-title { font-weight: 700; color: #fff; margin-bottom: .3rem; }
.chat-empty-sub { font-size: .82rem; }
.chat-list-row {
display: flex; align-items: center; gap: .7rem;
width: 100%;
padding: .7rem 1rem;
background: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,.04);
color: inherit;
cursor: pointer;
text-align: left;
transition: background .12s;
}
.chat-list-row:hover { background: rgba(0,198,255,.05); }
.chat-row-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-row-avatar {
width: 38px; height: 38px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .9rem; font-weight: 800; color: #fff;
}
.chat-row-dot {
position: absolute;
bottom: 0; right: 0;
width: 11px; height: 11px;
border-radius: 50%;
border: 2px solid #0a0f15;
}
.chat-row-dot.online { background: #10c08a; }
.chat-row-dot.offline { background: #5a6478; }
.chat-row-body { flex: 1; min-width: 0; }
.chat-row-top {
display: flex; justify-content: space-between; align-items: center;
gap: .5rem;
}
.chat-row-name {
font-size: .85rem; font-weight: 700; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-row-time { font-size: .68rem; color: var(--muted2); flex-shrink: 0; }
.chat-row-last {
font-size: .78rem;
color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: .1rem;
}
.chat-row-last.unread { color: #fff; font-weight: 600; }
.chat-row-unread {
background: #ff5577;
color: #fff;
font-size: .65rem; font-weight: 800;
border-radius: 99px;
padding: .15rem .45rem;
min-width: 20px;
text-align: center;
flex-shrink: 0;
}
/* ── Conversation view ── */
.chat-conv-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-messages {
flex: 1;
overflow-y: auto;
padding: .8rem .9rem;
display: flex;
flex-direction: column;
gap: .5rem;
min-height: 0;
/* Custom scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(0,198,255,.2) transparent;
}
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
background: rgba(0,198,255,.25);
border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,198,255,.5); }
.chat-loading, .chat-no-msgs {
text-align: center;
color: var(--muted2);
font-size: .82rem;
padding: 2rem 1rem;
}
.chat-msg {
display: flex; flex-direction: column;
max-width: 78%;
gap: .15rem;
}
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-msg-bubble {
padding: .55rem .8rem;
border-radius: 16px;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
.chat-msg.mine .chat-msg-bubble {
background: linear-gradient(135deg, #0072ff, #00c6ff);
color: #fff;
border-bottom-right-radius: 4px;
}
.chat-msg.theirs .chat-msg-bubble {
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.95);
border-bottom-left-radius: 4px;
}
.chat-msg-text { font-size: .86rem; line-height: 1.4; }
.chat-msg-text.big-emoji { font-size: 2.2rem; line-height: 1.1; padding: .1rem; background: transparent !important; }
.chat-msg.mine .chat-msg-text.big-emoji,
.chat-msg.theirs .chat-msg-text.big-emoji { background: transparent; }
.chat-msg-text a { color: inherit; text-decoration: underline; }
.chat-msg-time {
font-size: .65rem; color: var(--muted2);
padding: 0 .3rem;
}
.chat-msg-gif {
display: block;
max-width: 100%;
max-height: 200px;
border-radius: 12px;
object-fit: cover;
}
.chat-msg.mine .chat-msg-bubble:has(.chat-msg-gif),
.chat-msg.theirs .chat-msg-bubble:has(.chat-msg-gif) {
padding: 3px; background: rgba(255,255,255,.06);
}
.chat-msg.mine .chat-msg-bubble:has(.chat-msg-gif) {
background: linear-gradient(135deg, rgba(0,114,255,.5), rgba(0,198,255,.5));
}
/* ── Composer ── */
.chat-composer {
display: flex;
align-items: center;
gap: .35rem;
padding: .55rem .65rem;
border-top: 1px solid rgba(255,255,255,.06);
background: rgba(255,255,255,.02);
flex-shrink: 0;
}
.chat-tool-btn {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: .4rem;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
transition: color .15s, background .15s;
flex-shrink: 0;
}
.chat-tool-btn:hover { color: var(--accent2); background: rgba(0,198,255,.08); }
.chat-gif-tag {
font-weight: 800;
font-size: .68rem;
letter-spacing: .5px;
border: 1.5px solid currentColor;
padding: .1rem .3rem;
border-radius: 5px;
line-height: 1;
}
.chat-composer-input {
flex: 1;
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: .5rem .85rem;
color: #fff;
font-size: .85rem;
outline: none;
transition: border-color .15s;
}
.chat-composer-input:focus { border-color: var(--accent2); }
.chat-composer-input::placeholder { color: var(--muted2); }
.chat-send-btn {
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #0072ff, #00c6ff);
border: none;
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: opacity .15s, transform .15s;
}
.chat-send-btn:hover { transform: scale(1.05); }
.chat-send-btn svg { transform: translateX(-1px); }
/* ── Emoji panel ── */
.chat-emoji-panel {
border-top: 1px solid rgba(255,255,255,.06);
background: rgba(255,255,255,.02);
padding: .55rem;
max-height: 200px;
overflow-y: auto;
}
.chat-emoji-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: .15rem;
}
.chat-emoji-btn {
background: none; border: none;
font-size: 1.25rem;
padding: .35rem;
cursor: pointer;
border-radius: 7px;
transition: background .12s, transform .12s;
}
.chat-emoji-btn:hover { background: rgba(255,255,255,.08); transform: scale(1.2); }
/* ── GIF panel ── */
.chat-gif-panel {
border-top: 1px solid rgba(255,255,255,.06);
background: rgba(255,255,255,.02);
padding: .55rem;
max-height: 260px;
display: flex;
flex-direction: column;
}
.chat-gif-search-wrap { margin-bottom: .5rem; }
.chat-gif-search {
width: 100%;
background: rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
padding: .45rem .75rem;
color: #fff;
font-size: .82rem;
outline: none;
}
.chat-gif-search:focus { border-color: var(--accent2); }
.chat-gif-results {
flex: 1;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .4rem;
align-content: start;
}
.chat-gif-thumb {
background: rgba(255,255,255,.04);
border: none;
padding: 0;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
height: 100px;
transition: transform .15s, box-shadow .15s;
}
.chat-gif-thumb:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgba(0,198,255,.3); }
.chat-gif-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.chat-gif-placeholder {
grid-column: 1 / -1;
text-align: center;
color: var(--muted2);
font-size: .8rem;
padding: 1rem;
}
.chat-gif-attribution {
text-align: right;
color: var(--muted2);
font-size: .65rem;
margin-top: .35rem;
padding-right: .25rem;
}
/* ── Mobile adaptations ── */
@media (max-width: 540px) {
.chat-dock { bottom: .8rem; right: .8rem; }
.chat-panel {
width: calc(100vw - 1.6rem);
height: calc(100vh - 5rem);
max-height: 600px;
}
.chat-emoji-grid { grid-template-columns: repeat(6, 1fr); }
}
/* d-none — reliable display:none override, works even inside flex parents */
.d-none { display: none !important; }
/* ═══════════════════════════════════════════
ANIME SECTION
═══════════════════════════════════════════ */
.anime-hero {
position: relative;
min-height: 320px;
display: flex;
align-items: flex-end;
background: linear-gradient(135deg, #0a0f15 0%, #0d1b2a 50%, #0a0f15 100%);
overflow: hidden;
padding: 0 0 2rem;
margin-bottom: 2rem;
}
.anime-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(124,92,255,.18), transparent),
radial-gradient(ellipse 40% 40% at 20% 30%, rgba(0,198,255,.08), transparent);
}
.anime-hero-content {
position: relative;
max-width: 1400px;
margin: 0 auto;
padding: 4rem 2rem 0;
text-align: center;
width: 100%;
}
.anime-hero-eyebrow { font-size: .75rem; letter-spacing: 4px; text-transform: uppercase; color: #a78bfa; margin-bottom: .5rem; }
.anime-hero-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; letter-spacing: -1px; color: #fff; margin: 0; }
.anime-hero-sub { color: var(--muted); margin-top: .75rem; font-size: .95rem; }
/* Filters */
.anime-page { max-width: 1400px; margin: 0 auto; padding: 0 2rem 4rem; }
.anime-filters {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2rem;
padding: 1rem 1.2rem;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
}
.anime-tabs { display: flex; gap: .4rem; flex: 1; flex-wrap: wrap; }
.anime-tab {
padding: .5rem 1rem;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
color: var(--muted);
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
.anime-tab:hover { color: #fff; border-color: rgba(255,255,255,.18); }
.anime-tab.active { background: rgba(124,92,255,.15); border-color: #a78bfa; color: #a78bfa; }
.anime-search-wrap { position: relative; }
.anime-search-inp {
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
padding: .5rem .75rem .5rem 2.2rem;
color: #fff;
font-size: .85rem;
width: 200px;
outline: none;
transition: border-color .15s;
}
.anime-search-inp:focus { border-color: #a78bfa; }
.anime-search-icon { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.anime-genre-select {
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
padding: .5rem .75rem;
color: #fff;
font-size: .82rem;
outline: none;
}
/* Anime card grid */
.anime-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
}
.anime-card {
display: flex;
flex-direction: column;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: transform .18s, border-color .18s, box-shadow .18s;
}
.anime-card:hover {
transform: translateY(-4px);
border-color: #a78bfa;
box-shadow: 0 8px 24px rgba(124,92,255,.2);
}
.anime-card-img { aspect-ratio: 2/3; overflow: hidden; background: rgba(255,255,255,.04); }
.anime-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.anime-card:hover .anime-card-img img { transform: scale(1.04); }
.anime-card-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(124,92,255,.1), rgba(0,198,255,.05)); }
.anime-card-info { padding: .65rem .75rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.anime-card-title { font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anime-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ac-tag { font-size: .65rem; background: rgba(124,92,255,.15); color: #a78bfa; border-radius: 4px; padding: .1rem .35rem; font-weight: 600; }
.ac-eps { font-size: .65rem; color: var(--muted); }
.ac-score { font-size: .7rem; color: #f59e0b; font-weight: 700; }
.anime-card-genres { font-size: .65rem; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anime-no-results { text-align: center; color: var(--muted); padding: 3rem; grid-column: 1/-1; }
/* Load more */
.anime-load-more-wrap { text-align: center; margin-top: 2rem; }
.anime-load-more { padding: .65rem 2rem; font-size: .85rem; }
.anime-loading { text-align: center; padding: 2rem; }
.anime-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid rgba(124,92,255,.2); border-top-color: #a78bfa; border-radius: 50%; animation: spin .7s linear infinite; }
/* Sub/Dub toggle */
.anime-dub-toggle { display: flex; gap: .4rem; margin-bottom: 1.2rem; }
.dub-btn {
padding: .45rem 1.1rem;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.04);
color: var(--muted);
font-size: .78rem;
font-weight: 800;
letter-spacing: 1px;
cursor: pointer;
transition: all .15s;
}
.dub-btn.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }
/* Anime episode grid */
.anime-ep-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: .5rem;
}
.anime-ep-grid .ep-btn {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
cursor: pointer;
transition: all .15s;
padding: .4rem;
}
.anime-ep-grid .ep-btn:hover { border-color: #a78bfa; background: rgba(124,92,255,.1); }
.anime-ep-grid .ep-btn.active { background: rgba(124,92,255,.2); border-color: #a78bfa; color: #a78bfa; }
.anime-ep-grid .ep-num { font-size: 1rem; font-weight: 800; line-height: 1; }
.anime-ep-grid .ep-label { font-size: .55rem; color: var(--muted2); margin-top: .15rem; }
/* Detail stats */
.detail-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 1rem;
}
.detail-stat-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
padding: 1rem;
text-align: center;
}
.stat-val { font-size: 1.8rem; font-weight: 900; color: #fff; }
.stat-val span { font-size: .9rem; color: var(--muted); }
.stat-label { font-size: .72rem; color: var(--muted2); margin-top: .2rem; text-transform: uppercase; letter-spacing: 1px; }
/* Related scroll */
.related-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: rgba(124,92,255,.2) transparent; }
.related-card { flex-shrink: 0; width: 120px; text-decoration: none; }
.related-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; display: block; }
.related-label { font-size: .65rem; color: #a78bfa; margin-top: .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.related-title { font-size: .78rem; color: #fff; font-weight: 600; margin-top: .2rem; line-height: 1.3; }
.related-format { font-size: .65rem; color: var(--muted2); }
@media (max-width: 640px) {
.anime-page { padding: 0 1rem 3rem; }
.anime-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.anime-filters { flex-direction: column; align-items: stretch; }
.anime-search-inp { width: 100%; }
}
/* ── Anime genre chips (multi-select) ── */
.anime-genre-chips {
display: flex;
flex-wrap: wrap;
gap: .45rem;
}
.anime-genre-chip {
padding: .35rem .85rem;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: 99px;
color: var(--muted);
font-size: .78rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
}
.anime-genre-chip:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.anime-genre-chip.active {
background: rgba(124,92,255,.18);
border-color: #a78bfa;
color: #a78bfa;
}
.anime-genre-clear {
color: var(--muted2) !important;
border-style: dashed !important;
}
/* Sub/Dub toggle */
.anime-dub-toggle { display: flex; gap: .4rem; }
.dub-btn {
padding: .4rem 1rem;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.04);
color: var(--muted);
font-size: .78rem;
font-weight: 800;
letter-spacing: 1px;
cursor: pointer;
transition: all .15s;
}
.dub-btn.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }
/* Anime episode grid (same as ep-picker-episodes but tighter) */
.anime-ep-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: .5rem;
}
.anime-ep-grid .ep-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
aspect-ratio: 1;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
cursor: pointer;
transition: all .15s;
color: var(--text);
}
.anime-ep-grid .ep-btn:hover { border-color: #a78bfa; background: rgba(124,92,255,.1); }
.anime-ep-grid .ep-btn.active { background: rgba(124,92,255,.2); border-color: #a78bfa; color: #a78bfa; }
.anime-ep-grid .ep-num { font-size: 1rem; font-weight: 800; line-height: 1; }
.anime-ep-grid .ep-label { font-size: .55rem; color: var(--muted2); margin-top: .15rem; }
/* Browse results grid — same card width as rows */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
}
/* Anime card score badge */
.card-score {
position: absolute;
top: .5rem;
left: .5rem;
background: rgba(0,0,0,.7);
color: #f59e0b;
font-size: .7rem;
font-weight: 700;
padding: .18rem .45rem;
border-radius: 6px;
backdrop-filter: blur(4px);
}
/* Anime spinner */
.anime-spinner {
display: inline-block;
width: 32px; height: 32px;
border: 3px solid rgba(124,92,255,.2);
border-top-color: #a78bfa;
border-radius: 50%;
animation: spin .7s linear infinite;
}
/* ── Anime toolbar ── */
.anime-toolbar {
display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.anime-search-wrap { position: relative; }
.anime-search-inp {
padding: .42rem .75rem .42rem 2.1rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
color: #fff; font-size: .82rem; outline: none;
width: 170px; transition: border-color .15s, background .15s;
}
.anime-search-inp:focus { border-color: var(--accent2); background: rgba(255,255,255,.09); }
.anime-search-inp::placeholder { color: var(--muted2); }
/* Format pills */
.anime-format-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.fmt-pill {
padding: .35rem .75rem; border-radius: 99px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
color: var(--muted); font-size: .76rem; font-weight: 600;
cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fmt-pill:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.fmt-pill.active { background: rgba(0,198,255,.12); border-color: var(--accent2); color: var(--accent2); }
/* Browse results grid */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
}
/* Make cards-grid items behave like cards-row items */
.cards-grid .card { flex: none; width: auto; }
/* ═══════════════════════════════════════════
MISSING / NEW VIEW STYLES
═══════════════════════════════════════════ */
/* Hero title fallback (used when no logo image) */
.hero-title-fallback {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 900;
letter-spacing: -1px;
color: #fff;
margin: 0 0 .5rem;
text-shadow: 0 2px 12px rgba(0,0,0,.8);
line-height: 1.1;
}
/* btn-outline — ghost bordered button */
.btn-outline {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .55rem 1.2rem;
background: transparent;
border: 1px solid rgba(255,255,255,.18);
border-radius: 10px;
color: rgba(255,255,255,.8);
font-size: .85rem; font-weight: 600;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.btn-outline:hover {
border-color: var(--accent2);
color: var(--accent2);
background: rgba(0,198,255,.06);
}
/* Admin section layout */
.admin-section { padding: 1.5rem 2rem 3rem; max-width: 960px; }
.admin-section-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.admin-section-title { font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 0 .3rem; }
.admin-section-sub { font-size: .82rem; color: var(--muted); margin: 0; }
/* Admin server list rows */
.srv-admin-list { display: flex; flex-direction: column; gap: .75rem; }
.srv-admin-row {
display: flex; align-items: center; gap: 1rem;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px; padding: 1rem 1.2rem;
transition: border-color .15s, opacity .15s;
cursor: grab;
}
.srv-admin-row.inactive { opacity: .5; }
.srv-admin-row.dragging { opacity: .3; border-color: var(--accent2); }
.srv-admin-row.drag-over { border-color: var(--accent2); background: rgba(0,198,255,.05); }
.srv-admin-drag { color: rgba(255,255,255,.25); flex-shrink: 0; }
.srv-admin-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.srv-admin-info { flex: 1; min-width: 0; }
.srv-admin-name {
font-weight: 700; font-size: .95rem;
display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem;
color: #fff;
}
.srv-admin-caps { display: flex; gap: .5rem; font-size: .75rem; color: var(--muted); margin-bottom: .3rem; }
.srv-admin-urls code {
font-size: .68rem; color: var(--muted2);
background: rgba(255,255,255,.04); padding: .15rem .4rem; border-radius: 4px;
display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-admin-note { font-size: .72rem; color: var(--muted2); margin-top: .3rem; font-style: italic; }
.srv-admin-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
/* Server admin badges */
.badge-beta {
font-size: .6rem; background: #f59e0b; color: #000;
border-radius: 4px; padding: .1rem .35rem; font-weight: 800; letter-spacing: .5px;
}
.badge-off {
font-size: .6rem; background: rgba(255,255,255,.1); color: var(--muted);
border-radius: 4px; padding: .1rem .35rem; font-weight: 700;
}
/* Server toggle button in admin */
.srv-toggle-btn {
padding: .4rem .8rem; border-radius: 8px; border: none;
font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.srv-toggle-btn.on { background: rgba(16,192,138,.15); color: #10c08a; border: 1px solid rgba(16,192,138,.3); }
.srv-toggle-btn.off { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }
/* Live test modal */
.srv-test-modal {
position: fixed; inset: 0; z-index: 99999;
background: rgba(0,0,0,.85);
display: flex; align-items: center; justify-content: center;
}
.srv-test-modal[hidden] { display: none; }
.srv-test-modal-inner {
width: min(900px, 95vw); height: 75vh;
background: #0a0f15;
border: 1px solid rgba(0,198,255,.25);
border-radius: 16px;
display: flex; flex-direction: column; overflow: hidden;
}
.srv-test-modal-head {
display: flex; justify-content: space-between; align-items: center;
padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07);
font-weight: 700; color: #fff;
}
.srv-test-note {
font-size: .75rem; color: var(--muted2);
padding: .5rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.srv-test-iframe { flex: 1; width: 100%; border: none; }
.srv-test-close {
background: none; border: none; color: var(--muted);
font-size: 1.1rem; cursor: pointer; padding: .2rem .5rem; border-radius: 6px;
transition: color .15s;
}
.srv-test-close:hover { color: #fff; }
/* Anime dub toggle */
.anime-dub-toggle { display: flex; gap: .4rem; margin-bottom: 1.2rem; }
.dub-btn {
padding: .4rem 1rem; border-radius: 8px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.04);
color: var(--muted); font-size: .78rem; font-weight: 800;
letter-spacing: 1px; cursor: pointer; transition: all .15s;
}
.dub-btn.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }
/* Anime episode grid */
.anime-ep-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: .5rem;
}
.anime-ep-grid .ep-btn {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
aspect-ratio: 1;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px; cursor: pointer; color: var(--text);
transition: all .15s;
}
.anime-ep-grid .ep-btn:hover { border-color: #a78bfa; background: rgba(124,92,255,.1); }
.anime-ep-grid .ep-btn.active { background: rgba(124,92,255,.2); border-color: #a78bfa; color: #a78bfa; }
.anime-ep-grid .ep-num { font-size: 1rem; font-weight: 800; line-height: 1; }
.anime-ep-grid .ep-label { font-size: .55rem; color: var(--muted2); margin-top: .15rem; }
/* Cards browse grid */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
}
.cards-grid .card { flex: none; width: auto; }
/* Card score badge */
.card-score {
position: absolute; top: .5rem; left: .5rem;
background: rgba(0,0,0,.7); color: #f59e0b;
font-size: .7rem; font-weight: 700;
padding: .18rem .45rem; border-radius: 6px;
backdrop-filter: blur(4px);
}
/* Anime genre chips */
.anime-genre-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.anime-genre-chip {
padding: .35rem .85rem; border-radius: 99px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
color: var(--muted); font-size: .78rem; font-weight: 600;
cursor: pointer; transition: all .15s; white-space: nowrap;
}
.anime-genre-chip:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.anime-genre-chip.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }
.anime-genre-clear { color: var(--muted2) !important; border-style: dashed !important; }
/* Anime toolbar */
.anime-toolbar { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.anime-search-wrap { position: relative; }
.anime-search-inp {
padding: .42rem .75rem .42rem 2.1rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; color: #fff; font-size: .82rem; outline: none;
width: 170px; transition: border-color .15s, background .15s;
}
.anime-search-inp:focus { border-color: var(--accent2); background: rgba(255,255,255,.09); }
.anime-search-inp::placeholder { color: var(--muted2); }
/* Format pills */
.anime-format-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.fmt-pill {
padding: .35rem .75rem; border-radius: 99px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
color: var(--muted); font-size: .76rem; font-weight: 600;
cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fmt-pill:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.fmt-pill.active { background: rgba(0,198,255,.12); border-color: var(--accent2); color: var(--accent2); }
/* Anime loading spinner */
.anime-spinner {
display: inline-block; width: 32px; height: 32px;
border: 3px solid rgba(124,92,255,.2);
border-top-color: #a78bfa; border-radius: 50%;
animation: spin .7s linear infinite;
}
/* Anime stats grid on detail page */
.detail-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 1rem; margin-bottom: 2rem;
}
.detail-stat-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px; padding: 1rem; text-align: center;
}
.stat-val { font-size: 1.8rem; font-weight: 900; color: #fff; }
.stat-val span { font-size: .9rem; color: var(--muted); }
.stat-label { font-size: .72rem; color: var(--muted2); margin-top: .2rem; text-transform: uppercase; letter-spacing: 1px; }
.stat-sub { font-size: .7rem; color: var(--muted2); margin-top: .15rem; }
/* Related anime scroll */
.related-scroll {
display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem;
scrollbar-width: thin; scrollbar-color: rgba(124,92,255,.2) transparent;
}
.related-card { flex-shrink: 0; width: 120px; text-decoration: none; }
.related-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; display: block; }
.related-label { font-size: .65rem; color: #a78bfa; margin-top: .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.related-title { font-size: .78rem; color: #fff; font-weight: 600; margin-top: .2rem; line-height: 1.3; }
.related-format { font-size: .65rem; color: var(--muted2); }
/* ip-close is already btn-icon — just needs cursor */
.ip-close { cursor: pointer; }
/* ═══════════════════════════════════════════
MISSING / NEW VIEW STYLES — COMPLETE FIX
═══════════════════════════════════════════ */
/* Hero title fallback (used on anime page when no logo image) */
.hero-title-fallback {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 900;
letter-spacing: -1px;
color: #fff;
margin: 0 0 .5rem;
text-shadow: 0 2px 12px rgba(0,0,0,.8);
line-height: 1.1;
}
/* btn-outline — ghost bordered button used on anime browse */
.btn-outline {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .55rem 1.2rem;
background: transparent;
border: 1px solid rgba(255,255,255,.18);
border-radius: 10px;
color: rgba(255,255,255,.8);
font-size: .85rem; font-weight: 600;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.btn-outline:hover { border-color: var(--accent2); color: var(--accent2); background: rgba(0,198,255,.06); }
/* Admin section layout */
.admin-section { padding: 1.5rem 2rem 3rem; max-width: 960px; }
.admin-section-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.admin-section-title { font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 0 .3rem; }
.admin-section-sub { font-size: .82rem; color: var(--muted); margin: 0; }
/* Admin stream server list */
.srv-admin-list { display: flex; flex-direction: column; gap: .75rem; }
.srv-admin-row {
display: flex; align-items: center; gap: 1rem;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px; padding: 1rem 1.2rem;
transition: border-color .15s, opacity .15s;
cursor: grab;
}
.srv-admin-row.inactive { opacity: .5; }
.srv-admin-row.dragging { opacity: .3; border-color: var(--accent2); }
.srv-admin-row.drag-over { border-color: var(--accent2); background: rgba(0,198,255,.05); }
.srv-admin-drag { color: rgba(255,255,255,.25); flex-shrink: 0; }
.srv-admin-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.srv-admin-info { flex: 1; min-width: 0; }
.srv-admin-name { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; color: #fff; }
.srv-admin-caps { display: flex; gap: .5rem; font-size: .75rem; color: var(--muted); margin-bottom: .3rem; }
.srv-admin-urls code {
font-size: .68rem; color: var(--muted2);
background: rgba(255,255,255,.04); padding: .15rem .4rem; border-radius: 4px;
display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-admin-note { font-size: .72rem; color: var(--muted2); margin-top: .3rem; font-style: italic; }
.srv-admin-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
/* Badges */
.badge-beta { font-size: .6rem; background: #f59e0b; color: #000; border-radius: 4px; padding: .1rem .35rem; font-weight: 800; letter-spacing: .5px; }
.badge-off { font-size: .6rem; background: rgba(255,255,255,.1); color: var(--muted); border-radius: 4px; padding: .1rem .35rem; font-weight: 700; }
/* Toggle button in admin server list */
.srv-toggle-btn { padding: .4rem .8rem; border-radius: 8px; border: none; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.srv-toggle-btn.on { background: rgba(16,192,138,.15); color: #10c08a; border: 1px solid rgba(16,192,138,.3); }
.srv-toggle-btn.off { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }
/* Live server test modal */
.srv-test-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; }
.srv-test-modal[hidden] { display: none; }
.srv-test-modal-inner { width: min(900px,95vw); height: 75vh; background: #0a0f15; border: 1px solid rgba(0,198,255,.25); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.srv-test-modal-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 700; color: #fff; }
.srv-test-note { font-size: .75rem; color: var(--muted2); padding: .5rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.srv-test-iframe { flex: 1; width: 100%; border: none; }
.srv-test-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .2rem .5rem; border-radius: 6px; transition: color .15s; }
.srv-test-close:hover { color: #fff; }
/* Anime detail — stats strip */
.detail-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 1rem; margin-bottom: 2rem; }
.detail-stat-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 1rem; text-align: center; }
.stat-val { font-size: 1.8rem; font-weight: 900; color: #fff; }
.stat-val span { font-size: .9rem; color: var(--muted); }
.stat-label { font-size: .72rem; color: var(--muted2); margin-top: .2rem; text-transform: uppercase; letter-spacing: 1px; }
.stat-sub { font-size: .7rem; color: var(--muted2); margin-top: .15rem; }
/* Related anime horizontal scroll */
.related-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: rgba(124,92,255,.2) transparent; }
.related-card { flex-shrink: 0; width: 120px; text-decoration: none; }
.related-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; display: block; }
.related-label { font-size: .65rem; color: #a78bfa; margin-top: .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.related-title { font-size: .78rem; color: #fff; font-weight: 600; margin-top: .2rem; line-height: 1.3; }
.related-format { font-size: .65rem; color: var(--muted2); }
/* Card score badge (absolute overlay) */
.card-score { position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.7); color: #f59e0b; font-size: .7rem; font-weight: 700; padding: .18rem .45rem; border-radius: 6px; backdrop-filter: blur(4px); }
/* Cards browse grid */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 1rem; }
.cards-grid .card { flex: none; width: auto; }
/* Anime genre chips */
.anime-genre-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.anime-genre-chip { padding: .35rem .85rem; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); color: var(--muted); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.anime-genre-chip:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.anime-genre-chip.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }
.anime-genre-clear { color: var(--muted2) !important; border-style: dashed !important; }
/* Anime toolbar + search */
.anime-toolbar { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.anime-search-wrap { position: relative; }
.anime-search-inp { padding: .42rem .75rem .42rem 2.1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #fff; font-size: .82rem; outline: none; width: 170px; transition: border-color .15s; }
.anime-search-inp:focus { border-color: var(--accent2); }
.anime-search-inp::placeholder { color: var(--muted2); }
/* Format pills */
.anime-format-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.fmt-pill { padding: .35rem .75rem; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); color: var(--muted); font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.fmt-pill:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.fmt-pill.active { background: rgba(0,198,255,.12); border-color: var(--accent2); color: var(--accent2); }
/* Sub/dub toggle */
.anime-dub-toggle { display: flex; gap: .4rem; }
.dub-btn { padding: .4rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: all .15s; }
.dub-btn.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }
/* Anime episode grid */
.anime-ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px,1fr)); gap: .5rem; }
.anime-ep-grid .ep-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; cursor: pointer; color: var(--text); transition: all .15s; }
.anime-ep-grid .ep-btn:hover { border-color: #a78bfa; background: rgba(124,92,255,.1); }
.anime-ep-grid .ep-btn.active { background: rgba(124,92,255,.2); border-color: #a78bfa; color: #a78bfa; }
.anime-ep-grid .ep-num { font-size: 1rem; font-weight: 800; line-height: 1; }
.anime-ep-grid .ep-label { font-size: .55rem; color: var(--muted2); margin-top: .15rem; }
/* Anime loading spinner */
.anime-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid rgba(124,92,255,.2); border-top-color: #a78bfa; border-radius: 50%; animation: spin .7s linear infinite; }
/* ip-close needs explicit cursor since btn-icon may not set it */
.ip-close { cursor: pointer; }
/* ── Continue Watching — remove button + time left ── */
.cw-item { position: relative; }
.cw-link { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.cw-pct { font-size: .68rem; color: var(--accent2); font-weight: 700; }
/* Fade out on remove */
.cw-item.removing {
opacity: 0; transform: scale(.96);
transition: opacity .25s, transform .25s;
pointer-events: none;
}
/* ═══════════════════════════════════════════
ANIME PALETTE FIX — use site accent colors
(overrides hardcoded purples from earlier appends)
═══════════════════════════════════════════ */
/* crew-val — was missing color entirely */
.crew-val { color: rgba(255,255,255,.9); font-size: .92rem; }
.crew-val a { color: #fff; font-weight: 600; }
.crew-val a:hover { color: var(--accent2); }
/* dub toggle — use site palette */
.dub-btn { padding: .4rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: all .15s; }
.dub-btn.active { background: rgba(var(--accent-rgb),.15); border-color: var(--accent2); color: var(--accent2); }
/* Episode buttons — use site palette */
.anime-ep-grid .ep-btn:hover { border-color: var(--accent2); background: rgba(var(--accent-rgb),.08); color: var(--accent2); }
.anime-ep-grid .ep-btn.active { background: rgba(var(--accent-rgb),.18); border-color: var(--accent2); color: var(--accent2); }
/* Genre chips — already correct but ensure site accent on hover */
.genre-chip:hover { background: rgba(var(--accent-rgb),.12); color: var(--accent2); border-color: var(--accent2); }
/* detail-badge — already uses site gradient, just ensure no override */
.detail-badge { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff !important; }
/* ── Anime card image quality — ensure crisp rendering at all sizes ── */
.card-img { image-rendering: auto; }
.cards-row .card { min-width: 150px; }
.cards-grid .card .card-img-wrap { aspect-ratio: 2/3; }
.cards-grid .card .card-img { object-position: top center; }
/* ── Anime Parts & Seasons row ── */
.anime-parts-row {
display: flex; gap: 1rem; overflow-x: auto;
padding-bottom: .75rem;
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
}
.anime-part-card {
flex-shrink: 0; width: 130px;
text-decoration: none; color: inherit;
border-radius: 10px; overflow: hidden;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
transition: border-color .15s, transform .15s;
}
.anime-part-card:hover { border-color: var(--accent2); transform: translateY(-2px); }
.anime-part-card--current {
border-color: var(--accent2);
background: rgba(var(--accent-rgb),.08);
cursor: default;
}
.anime-part-card--current:hover { transform: none; }
.anime-part-thumb {
position: relative; aspect-ratio: 2/3;
overflow: hidden; background: rgba(255,255,255,.04);
}
.anime-part-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anime-part-now {
position: absolute; bottom: .35rem; left: .35rem;
background: var(--accent2); color: #000;
font-size: .6rem; font-weight: 800; padding: .15rem .4rem;
border-radius: 4px; letter-spacing: .5px;
}
.anime-part-rel {
position: absolute; bottom: .35rem; left: .35rem;
background: rgba(0,0,0,.75); color: rgba(255,255,255,.85);
font-size: .58rem; font-weight: 700; padding: .15rem .4rem;
border-radius: 4px; backdrop-filter: blur(4px);
}
.anime-part-info { padding: .5rem .6rem .6rem; }
.anime-part-title {
font-size: .72rem; font-weight: 700; color: #fff;
line-height: 1.3; margin-bottom: .2rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.anime-part-meta { font-size: .65rem; color: var(--muted2); }
/* ═══════════════════════════════════════════
NOTIFICATIONS + WATCHLIST + COMING SOON
═══════════════════════════════════════════ */
/* Notification bell */
.notif-wrap { position: relative; }
.notif-bell {
background: none; border: none; color: var(--muted);
cursor: pointer; padding: .4rem; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
transition: color .15s, background .15s; position: relative;
}
.notif-bell:hover { color: #fff; background: rgba(255,255,255,.07); }
.notif-badge {
position: absolute; top: -.2rem; right: -.2rem;
background: #ef4444; color: #fff;
font-size: .6rem; font-weight: 800;
min-width: 16px; height: 16px;
border-radius: 99px; padding: 0 .3rem;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--bg);
}
.notif-panel {
position: absolute; right: 0; top: calc(100% + .5rem);
width: 320px; max-height: 420px;
background: #111827; border: 1px solid rgba(255,255,255,.1);
border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,.6);
overflow: hidden; display: flex; flex-direction: column;
z-index: 9999;
}
.notif-panel[hidden] { display: none; }
.notif-header {
display: flex; justify-content: space-between; align-items: center;
padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07);
font-weight: 700; font-size: .85rem; color: #fff;
}
.notif-read-all {
background: none; border: none; color: var(--accent2); font-size: .72rem;
cursor: pointer; font-weight: 600;
}
.notif-list { overflow-y: auto; flex: 1; }
.notif-empty { padding: 2rem; text-align: center; color: var(--muted); font-size: .85rem; }
.notif-item {
display: flex; align-items: flex-start; gap: .75rem;
padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04);
text-decoration: none; color: inherit; transition: background .1s;
}
.notif-item:hover { background: rgba(255,255,255,.04); }
.notif-item.unread { background: rgba(var(--accent-rgb),.05); }
.notif-thumb { width: 40px; height: 56px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.notif-thumb-placeholder { width: 40px; height: 56px; border-radius: 6px; background: rgba(255,255,255,.08); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 700; font-size: .82rem; color: #fff; margin-bottom: .2rem; }
.notif-msg { font-size: .75rem; color: var(--muted); line-height: 1.4; }
.notif-time { font-size: .65rem; color: var(--muted2); margin-top: .25rem; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); flex-shrink: 0; margin-top: .35rem; }
/* Anime watchlist button */
.wl-anime-btn { transition: color .15s, background .15s; }
.wl-anime-btn.active { color: #f59e0b; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }
/* WL toast */
.wl-toast {
position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%);
background: #1f2937; color: #fff; padding: .65rem 1.5rem;
border-radius: 99px; font-size: .85rem; font-weight: 600;
box-shadow: 0 4px 20px rgba(0,0,0,.4); z-index: 99999;
border: 1px solid rgba(255,255,255,.1);
animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
/* Next episode notice */
.next-episode-notice {
display: inline-flex; align-items: center; gap: .5rem;
margin-top: .75rem; padding: .4rem .85rem;
background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
border-radius: 99px; color: #f59e0b; font-size: .78rem; font-weight: 600;
}
/* Coming Soon badge */
.coming-soon-badge {
display: inline-flex; align-items: center; gap: .65rem;
padding: .65rem 1.4rem;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.15);
border-radius: 12px; color: var(--muted);
font-size: .95rem; font-weight: 700;
}
.coming-soon-date {
background: rgba(0,198,255,.15); border: 1px solid rgba(0,198,255,.3);
color: var(--accent2); border-radius: 8px;
padding: .2rem .65rem; font-size: .78rem; font-weight: 800;
}
/* Library tabs */
.lib-tabs { display: flex; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.lib-tab {
padding: .45rem 1.1rem; border-radius: 99px; text-decoration: none;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
color: var(--muted); font-size: .82rem; font-weight: 600; transition: all .15s;
}
.lib-tab:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.lib-tab.active { background: rgba(var(--accent-rgb),.12); border-color: var(--accent2); color: var(--accent2); }
/* Type badge */
.badge-type {
font-size: .62rem; font-weight: 800; padding: .1rem .4rem;
border-radius: 4px; background: rgba(255,255,255,.08); color: var(--muted2);
letter-spacing: .5px;
}
/* ── Filler episode coloring ── */
.ep-btn.ep-filler {
background: rgba(107,114,128,.08) !important;
border-color: rgba(107,114,128,.15) !important;
}
.ep-btn.ep-filler .ep-num { color: #6b7280 !important; }
.ep-btn.ep-filler .ep-label { color: #9ca3af !important; }
.ep-btn.ep-filler::before {
content: 'F';
position: absolute; top: .2rem; right: .25rem;
font-size: .5rem; font-weight: 800;
color: #9ca3af; letter-spacing: 0;
}
.ep-btn.ep-recap {
background: rgba(234,179,8,.07) !important;
border-color: rgba(234,179,8,.15) !important;
}
.ep-btn.ep-recap .ep-num { color: #ca8a04 !important; }
.ep-btn.ep-recap::before {
content: 'R';
position: absolute; top: .2rem; right: .25rem;
font-size: .5rem; font-weight: 800;
color: #ca8a04; letter-spacing: 0;
}
.ep-btn { position: relative; } /* needed for ::before positioning */
/* Filler legend */
.ep-filler-legend {
display: flex; align-items: center; gap: 1.25rem;
padding: .5rem 0 .75rem;
font-size: .72rem; color: var(--muted);
}
.fl-item { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.fl-dot { width: 10px; height: 10px; border-radius: 3px; }
.fl-normal .fl-dot { background: rgba(0,198,255,.3); border: 1px solid rgba(0,198,255,.4); }
.fl-filler .fl-dot { background: rgba(107,114,128,.2); border: 1px solid rgba(107,114,128,.3); }
.fl-recap .fl-dot { background: rgba(234,179,8,.2); border: 1px solid rgba(234,179,8,.3); }
/* ═══════════════════════════════════════════
ANIME PARTS PICKER
— vertical column, same as ep-picker-seasons
— cover art fills button bg, overlay + text on top
═══════════════════════════════════════════ */
/* Override: column layout (same as TMDB seasons) */
.anime-parts-picker {
flex-direction: column !important;
max-height: 480px;
overflow-y: auto;
overflow-x: hidden;
gap: .4rem;
padding-right: .3rem;
padding-top: 24px;
}
/* Anime part button — same base dimensions as ep-season-btn */
.anime-part-btn {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
position: relative;
overflow: hidden;
padding: .85rem 1rem !important;
min-height: 66px;
cursor: pointer;
text-decoration: none;
}
/* Cover image fills button background */
.ep-season-thumb-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.ep-season-thumb {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 20%;
display: block;
}
/* Dark gradient overlay — same direction as TMDB left-fade */
.anime-part-btn::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
to right,
rgba(5,9,18,.95) 0%,
rgba(5,9,18,.82) 55%,
rgba(5,9,18,.55) 100%
);
transition: background .2s;
}
.anime-part-btn:hover::before {
background: linear-gradient(
to right,
rgba(5,9,18,.85) 0%,
rgba(5,9,18,.68) 55%,
rgba(5,9,18,.4) 100%
);
}
/* Text rendered above overlay */
.anime-part-btn .ep-season-num,
.anime-part-btn .ep-season-count {
position: relative; z-index: 2;
padding: 0 !important;
}
/* Browsing state (user selected, not playing) */
.anime-part-btn.browsing {
border-color: rgba(var(--accent-rgb), .4) !important;
}
.anime-part-btn.browsing::before {
background: linear-gradient(to right, rgba(var(--accent-rgb),.55) 0%, rgba(var(--accent-rgb),.25) 100%) !important;
}
/* Playing state (currently in player) */
.anime-part-btn.playing {
border-color: var(--accent) !important;
box-shadow: 0 0 22px rgba(var(--accent-rgb),.4), inset 0 0 0 1px rgba(255,255,255,.15);
}
.anime-part-btn.playing::before {
background: linear-gradient(to right, rgba(var(--accent-rgb),.7) 0%, rgba(var(--accent-rgb),.35) 100%) !important;
}
.anime-part-btn.playing .ep-season-count { color: rgba(255,255,255,.85) !important; }
/* Pulsing dot */
.anime-part-btn.playing::after {
content: '●';
position: absolute; top: .6rem; right: .8rem; z-index: 3;
color: #fff; font-size: .6rem;
animation: playingPulse 1.4s ease-in-out infinite;
text-shadow: 0 0 8px #fff;
}
/* Season not yet released */
.ep-season-btn.season-upcoming {
opacity: .65; cursor: default;
border-style: dashed;
}
.ep-season-btn.season-upcoming:hover {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--muted) !important;
}
.season-date {
color: #f59e0b !important;
font-size: .65rem !important;
}
/* ── Continue Watching remove button ── */
.cw-remove-btn {
position: absolute; top: .5rem; right: .5rem; z-index: 20;
width: 26px; height: 26px; border-radius: 50%;
background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2);
color: #fff; cursor: pointer; pointer-events: auto !important;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s, background .15s;
}
.cw-item:hover .cw-remove-btn,
.card:hover .cw-remove-btn { opacity: 1; }
.cw-remove-btn:hover { background: rgba(220,38,38,.9); border-color: transparent; }
.cw-pct { font-size: .68rem; color: var(--accent2); font-weight: 700; }
.cw-item.removing { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; pointer-events: none; }
/* ── Continue Watching remove button ── */
.cw-remove-btn {
position: absolute; top: .5rem; right: .5rem; z-index: 20;
width: 26px; height: 26px; border-radius: 50%;
background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2);
color: #fff; cursor: pointer; pointer-events: auto !important;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s, background .15s;
}
.cw-item:hover .cw-remove-btn,
.card:hover .cw-remove-btn { opacity: 1; }
.cw-remove-btn:hover { background: rgba(220,38,38,.9); border-color: transparent; }
.cw-pct { font-size: .68rem; color: var(--accent2); font-weight: 700; }
.cw-item.removing { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; pointer-events: none; }
/* ── Admin Analytics / Tracking ── */
.track-grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1rem; }
.track-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .track-grid-2 { grid-template-columns: 1fr; } }
.track-card {
border-radius: 14px; padding: 1.4rem 1.2rem;
border: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.03);
position: relative; overflow: hidden;
}
.track-card::before { content:''; position:absolute; inset:0; opacity:.06; pointer-events:none; }
.track-card--blue::before { background: radial-gradient(circle at 80% 20%, #00c6ff, transparent 70%); }
.track-card--green::before { background: radial-gradient(circle at 80% 20%, #10c08a, transparent 70%); }
.track-card--purple::before{ background: radial-gradient(circle at 80% 20%, #a78bfa, transparent 70%); }
.track-card--amber::before { background: radial-gradient(circle at 80% 20%, #f59e0b, transparent 70%); }
.track-icon { font-size: 1.3rem; margin-bottom: .5rem; }
.track-val { font-size: 2rem; font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1; }
.track-label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted2); margin: .3rem 0 .2rem; font-weight: 700; }
.track-sub { font-size: .72rem; color: var(--muted2); }
.track-panel {
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
border-radius: 14px; padding: 1.2rem 1.4rem;
}
.track-panel-title { font-size: .82rem; font-weight: 800; color: #fff; letter-spacing: .5px; margin-bottom: 1rem; text-transform: uppercase; }
.track-bar-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.track-bar-label { font-size: .78rem; color: var(--muted); width: 70px; flex-shrink: 0; }
.track-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.track-bar-fill { height: 100%; border-radius: 99px; transition: width .5s; min-width: 2px; }
.track-bar-val { font-size: .75rem; color: #fff; font-weight: 600; width: 90px; text-align: right; flex-shrink: 0; }
.track-bar-val small { color: var(--muted2); font-weight: 400; }
.track-chart { display: flex; align-items: flex-end; gap: 3px; height: 100px; padding: .5rem 0; }
.track-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; cursor: default; }
.track-chart-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; transition: height .4s; }
.track-chart-lbl { font-size: .6rem; color: var(--muted2); white-space: nowrap; }
.track-chart-legend { font-size: .75rem; color: var(--muted2); margin-top: .5rem; }
.track-content-list { display: flex; flex-direction: column; gap: .6rem; }
.track-content-row { display: flex; align-items: center; gap: .75rem; }
.track-rank { width: 1.2rem; font-size: .72rem; font-weight: 800; color: var(--muted2); text-align: center; flex-shrink: 0; }
.track-poster { width: 32px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.track-content-info { flex: 1; min-width: 0; }
.track-content-title { font-size: .82rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-content-meta { display: flex; gap: .5rem; font-size: .7rem; color: var(--muted); margin-top: .1rem; flex-wrap: wrap; }
.track-type { background: rgba(255,255,255,.08); border-radius: 4px; padding: .05rem .35rem; font-weight: 700; font-size: .62rem; }
.track-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.track-table th { text-align: left; padding: .5rem .75rem; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted2); border-bottom: 1px solid rgba(255,255,255,.07); }
.track-table td { padding: .65rem .75rem; border-bottom: 1px solid rgba(255,255,255,.04); color: #fff; }
.track-table tr:last-child td { border-bottom: none; }
.track-table tr:hover td { background: rgba(255,255,255,.02); }
/* ═══════════════════════════════════════════
NEXUS LOADER
═══════════════════════════════════════════ */
#nexus-loader {
position: fixed; inset: 0; z-index: 99999;
background: #050912;
display: flex; align-items: center; justify-content: center;
transition: opacity .7s ease, visibility .7s ease;
pointer-events: none;
}
/* Re-enable pointer events on inner content so particles/clicks still work */
#nexus-loader .nl-center {
pointer-events: none;
}
#nexus-loader.nl-done {
opacity: 0; visibility: hidden; pointer-events: none;
}
.nl-blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.nl-blob1 { width: 600px; height: 600px; top: -200px; left: -150px; background: radial-gradient(circle, rgba(var(--accent2-rgb),.18), transparent 70%); animation: nlBlob1 8s ease-in-out infinite; }
.nl-blob2 { width: 500px; height: 500px; bottom: -150px; right: -100px; background: radial-gradient(circle, rgba(var(--accent-rgb),.14), transparent 70%); animation: nlBlob2 10s ease-in-out infinite; }
@keyframes nlBlob1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,40px) scale(1.15)} }
@keyframes nlBlob2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,-30px) scale(1.1)} }
.nl-center { display: flex; flex-direction: column; align-items: center; gap: 0; }
/* Stage — brackets wrap only the logo */
.nl-stage {
position: relative; width: 360px; height: 120px;
display: flex; align-items: center; justify-content: center;
}
/* Brackets */
.nl-brackets { position: absolute; inset: 0; pointer-events: none; }
.nl-bracket { position: absolute; width: 20px; height: 20px; opacity: 0; animation: nlBracketIn .4s ease forwards; }
.nl-bracket::before,.nl-bracket::after { content:''; position:absolute; background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),.8); }
.nl-bracket::before { width:100%; height:1.5px; top:0; left:0; }
.nl-bracket::after { width:1.5px; height:100%; top:0; left:0; }
.nl-tl { top:0; left:0; animation-delay:1.3s; }
.nl-tr { top:0; right:0; transform:scaleX(-1); animation-delay:1.4s; }
.nl-bl { bottom:0; left:0; transform:scaleY(-1); animation-delay:1.5s; }
.nl-br { bottom:0; right:0; transform:scale(-1,-1); animation-delay:1.6s; }
@keyframes nlBracketIn { to { opacity:.85; } }
/* Scan lines */
.nl-scanline { position:absolute; left:-60px; right:-60px; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.6),rgba(255,255,255,.5),rgba(var(--accent-rgb),.6),transparent); animation:nlScan 3s ease-in-out infinite; pointer-events:none; }
.nl-scanline:nth-child(2){animation-delay:-1.5s;opacity:.35;}
@keyframes nlScan { 0%{top:-20px;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:140px;opacity:0} }
/* Morph ring */
.nl-ring { position:absolute; width:100%; height:100%; top:0; left:0; overflow:visible; pointer-events:none; }
.nl-ellipse { animation: nlMorph 3s ease-in-out infinite; }
.nl-e2 { animation-delay:-1s; }
.nl-e3 { animation-delay:-2s; }
@keyframes nlMorph {
0% { rx:172; ry:52; } 25% { rx:185; ry:44; }
50% { rx:160; ry:58; } 75% { rx:188; ry:48; } 100%{ rx:172; ry:52; }
}
/* Orbit particles */
.nl-orbit { position:absolute; width:100%; height:100%; top:0; left:0; pointer-events:none; }
.nl-p { position:absolute; border-radius:50%; top:50%; left:50%; background:var(--accent); box-shadow:0 0 6px var(--accent),0 0 12px rgba(var(--accent-rgb),.5); }
.nl-p1{width:4px;height:4px;margin:-2px 0 0 -2px;animation:nlOrb1 3.2s linear infinite;}
.nl-p2{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:var(--accent2);box-shadow:0 0 6px var(--accent2);animation:nlOrb2 4.1s linear infinite;}
.nl-p3{width:2px;height:2px;margin:-1px 0 0 -1px;animation:nlOrb1 2.6s linear -1.3s infinite;opacity:.6;}
.nl-p4{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:#fff;box-shadow:0 0 5px #fff;animation:nlOrb2 5s linear -2s infinite;opacity:.45;}
.nl-p5{width:2px;height:2px;margin:-1px 0 0 -1px;animation:nlOrb1 3.8s linear -1.8s infinite;opacity:.55;}
@keyframes nlOrb1{from{transform:rotate(0deg) translateX(200px) rotate(0deg)} to{transform:rotate(360deg) translateX(200px) rotate(-360deg)}}
@keyframes nlOrb2{from{transform:rotate(60deg) translateX(200px) rotate(-60deg)} to{transform:rotate(420deg) translateX(200px) rotate(-420deg)}}
/* Logo SVG */
.nl-logo { position:relative; z-index:2; overflow:visible; }
.nl-txt-stroke {
font-family:'Barlow Condensed','Arial Black',sans-serif; font-weight:900; font-size:96px; letter-spacing:5px;
fill:none; stroke:url(#nlGlare); stroke-width:1.5; stroke-linejoin:round;
filter:url(#nlGlow);
stroke-dasharray:1400; stroke-dashoffset:1400;
animation:nlDraw 1.2s cubic-bezier(.4,0,.2,1) .15s forwards, nlPulse 2.4s 1.35s ease-in-out infinite;
}
.nl-txt-fill {
font-family:'Barlow Condensed','Arial Black',sans-serif; font-weight:900; font-size:96px; letter-spacing:5px;
fill:url(#nlFill); stroke:none; filter:url(#nlGlow);
opacity:0; animation:nlFillFade .6s ease 1.35s forwards;
}
@keyframes nlDraw { to { stroke-dashoffset:0; } }
@keyframes nlFillFade{ to { opacity:1; } }
@keyframes nlPulse { 0%,100%{filter:url(#nlGlow)} 50%{filter:url(#nlGlowBright)} }
/* Progress */
.nl-progress { margin-top:28px; width:220px; opacity:0; animation:nlFadeUp .5s ease 1.5s forwards; }
.nl-track { height:1.5px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.nl-fill { height:100%; width:0%; border-radius:2px; background:linear-gradient(90deg,var(--accent2),var(--accent),#fff); box-shadow:0 0 8px rgba(var(--accent-rgb),.8); animation:nlBar 2.2s cubic-bezier(.4,0,.2,1) 1.5s forwards; }
@keyframes nlBar { 0%{width:0%} 60%{width:75%} 85%{width:88%} 100%{width:100%} }
.nl-label { margin-top:.55rem; text-align:center; font-size:.6rem; letter-spacing:4px; text-transform:uppercase; color:rgba(232,240,255,.3); font-family:system-ui; animation:nlFlicker 2s ease 1.5s infinite; }
@keyframes nlFlicker { 0%,100%{opacity:.3} 50%{opacity:.7} }
@keyframes nlFadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
/* Hero watchlist button inherits from btn-secondary and btn-watchlist */
/* ═══════════════════════════════════════════
DUAL MODE — TV/Film ↔ Anime switch
═══════════════════════════════════════════ */
/* Logo anime tag */
.logo-mode-tag {
font-family: 'Barlow Condensed', sans-serif;
font-size: .65rem; font-weight: 900;
letter-spacing: 3px; text-transform: uppercase;
background: linear-gradient(135deg, #a78bfa, #c084fc);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
margin-left: .3rem; align-self: flex-end; padding-bottom: .05rem;
}
/* Mode switch pill */
.mode-switch {
display: inline-flex; align-items: center; gap: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: 50px; padding: .2rem;
transition: border-color .25s;
flex-shrink: 0;
}
.mode-switch:hover { border-color: var(--border-strong); }
.mode-switch-option {
display: inline-flex; align-items: center; gap: .35rem;
padding: .32rem .75rem; border-radius: 50px;
font-size: .7rem; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--muted);
transition: all .2s; white-space: nowrap;
}
.mode-switch-divider {
width: 1px; height: 14px; background: var(--border);
flex-shrink: 0; margin: 0 .1rem;
}
/* Active state — normal mode */
body:not(.anime-mode) .mode-switch #ms-normal {
background: rgba(255,255,255,.1);
color: #fff;
}
/* Active state — anime mode */
body.anime-mode .mode-switch #ms-anime {
background: rgba(167,139,250,.18);
color: #a78bfa;
box-shadow: 0 0 14px rgba(167,139,250,.25);
}
body.anime-mode .mode-switch {
border-color: rgba(167,139,250,.3);
}
body.anime-mode .mode-switch:hover {
border-color: rgba(167,139,250,.5);
}
/* Hide/show nav link sets */
body:not(.anime-mode) #nav-links-anime { display: none !important; }
body.anime-mode #nav-links-normal { display: none !important; }
/* Anime mode — navbar accent glow */
body.anime-mode #navbar.scrolled {
box-shadow: 0 0 0 1px rgba(167,139,250,.15) inset;
}
body.anime-mode #nav-logo .logo-nexus {
background: linear-gradient(135deg, #a78bfa, #fff 55%, #c084fc);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
/* Anime nav links — subtle purple active */
body.anime-mode .nav-links a.active,
body.anime-mode .nav-links-anime a.active {
color: #a78bfa;
text-shadow: 0 0 18px rgba(167,139,250,.6);
}
body.anime-mode .nav-links a:hover,
body.anime-mode .nav-links-anime a:hover { color: #fff; }
body.anime-mode .nav-links a::after,
body.anime-mode .nav-links-anime a::after {
background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
/* Anime mode search btn */
body.anime-mode .search-btn:hover {
border-color: rgba(167,139,250,.5);
color: #a78bfa;
box-shadow: 0 0 20px rgba(167,139,250,.25);
}
/* Mobile: mode switch compact */
@media (max-width: 980px) {
.mode-switch { padding: .15rem; }
.mode-switch-option { padding: .3rem .5rem; }
.ms-label { display: none; } /* icon only on mobile */
.mode-switch-divider { display: none; }
}
/* Mode switch — no transition (removed) */
/* ═══════════════════════════════════════════
SEASON STRIP — anime detail page
═══════════════════════════════════════════ */
.season-strip {
display: flex; gap: .65rem;
overflow-x: auto; padding: .25rem .1rem 1rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.season-strip::-webkit-scrollbar { height: 4px; }
.season-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.season-card {
flex: 0 0 90px; scroll-snap-align: start;
display: flex; flex-direction: column;
background: var(--surface); border: 2px solid transparent;
border-radius: 10px; overflow: hidden; cursor: pointer;
transition: border-color .2s, transform .15s, box-shadow .2s;
text-align: center;
}
.season-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.season-card.active {
border-color: var(--accent);
box-shadow: 0 0 16px rgba(var(--accent-rgb), .35);
}
body.anime-mode .season-card.active {
border-color: #a78bfa;
box-shadow: 0 0 16px rgba(167,139,250,.35);
}
.season-card-cover {
position: relative; width: 100%; aspect-ratio: 2/3;
background: var(--surface2); overflow: hidden;
}
.season-card-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.season-card-no-img {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.5rem; font-weight: 900; color: var(--muted);
}
.season-card-now {
position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: #000;
font-size: .55rem; font-weight: 800; letter-spacing: 1.5px;
padding: .18rem .45rem; border-radius: 99px; white-space: nowrap;
}
body.anime-mode .season-card-now { background: #a78bfa; }
.season-card-airing {
position: absolute; top: 5px; right: 5px;
background: rgba(245,158,11,.9); color: #000;
font-size: .5rem; font-weight: 800; letter-spacing: 1px;
padding: .15rem .4rem; border-radius: 4px;
}
.season-card-info {
padding: .4rem .3rem .45rem;
display: flex; flex-direction: column; gap: .15rem; align-items: center;
}
.season-card-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: .85rem; font-weight: 800; color: #fff; letter-spacing: .5px;
}
.season-card-eps {
font-size: .62rem; color: var(--muted); letter-spacing: .3px;
}
.season-card.active .season-card-num { color: var(--accent); }
body.anime-mode .season-card.active .season-card-num { color: #a78bfa; }
/* ── Season card overhaul — wider than tall (landscape), relation badge ── */
.season-strip {
justify-content: center;
flex-wrap: wrap;
}
.season-card {
flex: 0 0 160px !important; /* wider */
}
.season-card-cover {
aspect-ratio: 2/3; /* portrait cover stays, card is wider overall */
width: 100%;
}
.season-card-info {
padding: .5rem .6rem .55rem !important;
align-items: flex-start !important;
text-align: left;
}
.season-card-top-row {
display: flex; align-items: center; justify-content: space-between;
width: 100%; gap: .3rem;
}
.season-card-rel {
font-size: .58rem; font-weight: 700; letter-spacing: .8px;
text-transform: uppercase; color: var(--muted);
border: 1px solid var(--border); border-radius: 4px;
padding: .1rem .35rem; flex-shrink: 0;
}
.season-card.active .season-card-rel { border-color: rgba(var(--accent-rgb),.4); color: var(--accent); }
body.anime-mode .season-card.active .season-card-rel { border-color: rgba(167,139,250,.4); color: #a78bfa; }
.season-card-year {
font-size: .62rem; color: var(--muted); display: block; margin-top: .1rem;
}
/* Unaired episode button */
.ep-btn.ep-unaired {
opacity: .45; cursor: not-allowed;
border-style: dashed;
}
.ep-btn.ep-unaired .ep-label { color: var(--muted); font-style: italic; }
/* Center episode section */
.anime-ep-grid {
justify-content: center;
}
/* Prequel badge — amber/orange to distinguish from sequel */
.season-card-rel.is-prequel {
border-color: rgba(245,158,11,.4);
color: #f59e0b;
}
.season-card.active .season-card-rel.is-prequel {
border-color: rgba(245,158,11,.6);
color: #f59e0b;
}
/* ═══════════════════════════════════════════════════════════════
NEXUS PATCH — Mobile Friendly + Episode Pagination + Prev/Next
═══════════════════════════════════════════════════════════════ */
/* ── Episode grid centered ── */
.anime-ep-grid,
#ep-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: .5rem;
justify-content: center;
max-width: 900px;
margin: 0 auto;
}
/* ── Episode Pagination ── */
.ep-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1.25rem;
padding: .5rem 0;
}
.ep-page-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .45rem 1rem; border-radius: 8px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text); font-size: .8rem; font-weight: 600;
cursor: pointer; transition: all .15s;
}
.ep-page-btn:hover:not(:disabled) {
background: var(--surface-2); border-color: var(--border-strong); color: #fff;
}
.ep-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.ep-page-info { font-size: .82rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
/* ── Player Prev/Next episode nav ── */
.ip-ep-nav {
display: flex; align-items: center; justify-content: center; gap: 1rem;
padding: .85rem 1.5rem .5rem;
border-top: 1px solid var(--border);
margin-top: .5rem;
}
.ip-ep-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .5rem 1.1rem; border-radius: 8px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text); font-size: .82rem; font-weight: 600;
cursor: pointer; transition: all .15s;
}
.ip-ep-btn:hover:not(:disabled) {
background: rgba(124,92,255,.15); border-color: #a78bfa; color: #a78bfa;
}
.ip-ep-btn:disabled { opacity: .3; cursor: not-allowed; }
.ip-ep-badge {
font-size: .85rem; font-weight: 700; color: var(--muted);
padding: .25rem .75rem; background: rgba(255,255,255,.05);
border-radius: 6px; border: 1px solid var(--border);
}
/* ── Section header centered for episodes ── */
.section-header[style*="text-align:center"] .row-controls {
justify-content: center;
flex-wrap: wrap;
}
/* ── Mobile: global improvements ── */
@media (max-width: 540px) {
/* Navbar */
#navbar { padding: 0 1rem; }
/* Page padding tighter */
.page-pad {
padding: calc(var(--nav-h) + 1.25rem) 1rem 2rem;
}
/* Page header stacks */
.page-header {
flex-direction: column; align-items: flex-start; gap: .75rem;
}
.page-header > div:last-child { width: 100%; }
/* Library tabs scroll horizontally */
.lib-tabs {
display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .35rem;
-webkit-overflow-scrolling: touch; padding-bottom: .25rem;
scrollbar-width: none;
}
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-tab { white-space: nowrap; flex-shrink: 0; }
/* Grid smaller cards */
.grid-view {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 1rem .75rem;
}
/* Detail hero */
.detail-hero-inner { padding: 1.25rem 1rem 1.5rem; }
.detail-title-big { font-size: clamp(1.1rem, 5.5vw, 1.6rem); word-break: break-word; overflow-wrap: break-word; line-height: 1.1; }
.detail-actions { flex-wrap: wrap; gap: .5rem; }
.detail-actions .btn-primary,
.detail-actions .btn-secondary { flex: 1 1 calc(50% - .25rem); justify-content: center; }
.detail-actions .btn-icon { flex: 0 0 auto; }
/* Stats grid */
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
/* Crew grid */
.crew-grid { grid-template-columns: repeat(2, 1fr); }
/* Inline player inner */
.inline-player .ip-inner { padding: 0 .75rem; }
.ip-header { flex-wrap: wrap; gap: .5rem; }
/* Prev/next ep nav */
.ip-ep-nav { padding: .75rem .5rem .5rem; gap: .5rem; }
.ip-ep-btn { padding: .45rem .75rem; font-size: .75rem; }
/* Episode grid smaller */
.anime-ep-grid, #ep-grid {
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
gap: .4rem;
}
/* Sections */
.section-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
.section-header[style*="text-align:center"] { align-items: center; text-align: center; }
.content-section { padding: 0 1rem; }
/* Season strip */
.season-strip { gap: .5rem; }
.season-card { min-width: 80px; }
/* Search overlay */
.search-wrap { padding: 0 1rem; }
.search-input { font-size: .95rem; }
/* Settings form */
.settings-grid { grid-template-columns: 1fr; }
/* Browse */
.browse-page { padding: calc(var(--nav-h) + 1.25rem) 1rem 2rem; }
/* Cards row horizontal scroll */
.cards-row { padding-bottom: 1rem; }
/* Dub toggle */
.anime-dub-toggle { justify-content: center; }
/* Ep pagination */
.ep-pagination { gap: .6rem; }
.ep-page-btn { padding: .4rem .7rem; font-size: .75rem; }
.ep-page-info { font-size: .75rem; }
/* Footer */
.site-footer { padding: 1.5rem 1rem; }
.footer-links { flex-wrap: wrap; gap: .5rem .75rem; font-size: .8rem; }
/* Home hero */
#hero, .sub-hero { padding-left: 1rem; padding-right: 1rem; padding-bottom: 4rem; }
.hero-title { font-size: clamp(1.2rem, 6.5vw, 2.2rem); word-break: break-word; overflow-wrap: break-word; }
.sub-hero-inner { padding-bottom: 1rem; }
/* Friends / profile / settings */
.profile-header { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
}
@media (max-width: 375px) {
.grid-view { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.anime-ep-grid, #ep-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.detail-actions .btn-primary,
.detail-actions .btn-secondary { flex: 1 1 100%; }
}
/* ── Tablet (541px–900px) tweaks ── */
@media (min-width: 541px) and (max-width: 900px) {
.page-pad { padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2.5rem; }
.browse-page { padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2.5rem; }
.detail-hero-inner { padding: 2rem 1.5rem 2rem; }
.inline-player .ip-inner { padding: 0 1.5rem; }
.grid-view { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Ensure lib-tab works as button ── */
.lib-tab {
background: none;
border: 1px solid transparent;
cursor: pointer;
font-family: inherit;
}
.lib-tabs { display: flex; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
/* ═══════════════════════════════════════════════════════════════
NAVBAR MOBILE REDESIGN
═══════════════════════════════════════════════════════════════ */
/* ── Unified icon button (search, notif bell) ── */
.nav-icon-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .42rem .9rem; border-radius: 50px;
background: var(--surface); border: 1px solid var(--border);
color: var(--muted); font-size: .78rem; font-weight: 500;
letter-spacing: 1.2px; text-transform: uppercase;
cursor: pointer; transition: all .22s; flex-shrink: 0;
white-space: nowrap; position: relative;
}
.nav-icon-btn:hover {
border-color: rgba(var(--accent-rgb), .5);
color: var(--accent);
box-shadow: 0 0 18px rgba(var(--accent-rgb), .2);
}
.nav-icon-label { font-size: .72rem; }
/* ── Hamburger button ── */
.nav-toggle {
display: none; flex-direction: column;
justify-content: center; align-items: center;
gap: 5px; width: 38px; height: 38px;
border-radius: 10px; cursor: pointer;
background: var(--surface); border: 1px solid var(--border);
flex-shrink: 0; transition: border-color .2s, background .2s;
}
.nav-toggle span {
display: block; width: 18px; height: 2px;
background: var(--muted); border-radius: 2px;
transition: all .25s cubic-bezier(.4,0,.2,1);
transform-origin: center;
}
/* Animated X when open */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #fff; }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fff; }
.nav-toggle:hover { border-color: var(--border-strong); background: var(--surface-2); }
/* ── Mobile drawer ── */
.mobile-nav-drawer {
position: fixed; top: var(--nav-h); left: 0; right: 0;
z-index: 99; max-height: 0; overflow: hidden;
transition: max-height .35s cubic-bezier(.4,0,.2,1);
background: rgba(5,9,18,.98);
backdrop-filter: blur(28px) saturate(140%);
-webkit-backdrop-filter: blur(28px) saturate(140%);
border-bottom: 1px solid transparent;
}
.mobile-nav-drawer.open {
max-height: 85vh; overflow-y: auto;
border-bottom-color: var(--border);
box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.mobile-nav-inner { padding: 1rem 1.25rem 1.5rem; }
/* Mode switch row in drawer */
.mobile-mode-row {
display: flex; gap: .5rem; margin-bottom: .75rem;
}
.mobile-mode-btn {
flex: 1; display: inline-flex; align-items: center;
justify-content: center; gap: .45rem;
padding: .6rem .75rem; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
color: var(--muted); font-size: .78rem; font-weight: 700;
letter-spacing: .8px; text-transform: uppercase; cursor: pointer;
transition: all .18s;
}
.mobile-mode-btn.active {
background: rgba(var(--accent-rgb), .12);
border-color: var(--accent2); color: var(--accent2);
}
body.anime-mode .mobile-mode-btn#mob-ms-anime.active {
background: rgba(167,139,250,.15);
border-color: #a78bfa; color: #a78bfa;
}
/* Separator */
.mobile-nav-sep {
height: 1px; background: var(--border);
margin: .75rem 0;
}
/* Nav link sections */
.mobile-nav-section {
display: flex; flex-direction: column; gap: .15rem;
}
.mobile-nav-section a {
display: flex; align-items: center;
padding: .75rem .85rem; border-radius: 10px;
font-size: .88rem; font-weight: 600; letter-spacing: .5px;
color: var(--muted); transition: background .15s, color .15s;
}
.mobile-nav-section a:hover,
.mobile-nav-section a:active {
background: var(--surface-2); color: #fff;
}
.mobile-nav-user a { font-size: .84rem; }
/* Sign out button in drawer */
.mob-logout-btn {
display: flex; align-items: center; width: 100%;
padding: .75rem .85rem; border-radius: 10px;
font-size: .84rem; font-weight: 600; letter-spacing: .5px;
color: #ef4444; cursor: pointer;
background: rgba(239,68,68,.06);
border: 1px solid rgba(239,68,68,.15);
margin-top: .25rem; transition: background .15s;
}
.mob-logout-btn:hover { background: rgba(239,68,68,.12); }
/* Sign in / register in drawer */
.mob-signin-btn {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; text-align: center;
font-weight: 700 !important; color: var(--text) !important;
}
.mob-register-btn {
background: linear-gradient(135deg, var(--accent2), var(--accent));
border-radius: 10px; text-align: center;
font-weight: 700 !important; color: #fff !important;
margin-top: .35rem;
}
/* Overlay */
.mobile-nav-overlay {
display: none; position: fixed; inset: 0; z-index: 98;
background: rgba(0,0,0,.45);
}
.mobile-nav-overlay.open { display: block; }
/* ── Mobile: nav-right layout ── */
@media (max-width: 980px) {
#navbar {
padding: 0 1rem;
gap: .75rem;
}
.nav-right {
gap: .4rem;
margin-left: auto;
}
.nav-toggle { display: flex; }
/* Hide text label in search on smaller screens */
.nav-icon-label { display: none; }
.nav-icon-btn { padding: .42rem .55rem; }
/* Mode switch: icon only */
.ms-label { display: none; }
.mode-switch-divider { display: none; }
.mode-switch { padding: .15rem; gap: 0; }
.mode-switch-option { padding: .32rem .45rem; }
/* Avatar smaller */
.avatar { width: 34px; height: 34px; font-size: .8rem; }
/* Notif badge adjustment */
.notif-bell { padding: .42rem .55rem; }
/* Profile dropdown: position from right edge */
.profile-dropdown {
right: -0.5rem;
min-width: 210px;
}
/* Notif panel: keep on screen */
.notif-panel {
position: fixed;
top: calc(var(--nav-h) + .25rem);
left: .75rem;
right: .75rem;
width: auto;
max-width: none;
max-height: 70vh;
border-radius: 12px;
}
}
@media (max-width: 480px) {
#navbar { padding: 0 .85rem; gap: .5rem; }
.nav-right { gap: .25rem; }
.logo { font-size: 1.4rem; letter-spacing: 4px; }
.mode-switch-option { padding: .28rem .38rem; }
}
/* ═══════════════════════════════════════════════════════════════
NEXUS — Anime Homepage Redesign + Schedule + Dub Awareness
═══════════════════════════════════════════════════════════════ */
/* ── Favorites button on cards ─────────────────────────────────────────── */
.card-fav-btn {
position: absolute; top: .5rem; left: .5rem;
width: 30px; height: 30px; border-radius: 50%;
background: rgba(5,9,18,.7); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.12);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .2s; z-index: 3;
color: var(--muted);
}
/* ── Mobile: always-visible card title ─────────────────────────────────── */
@media (hover: none) {
/* On touch devices, the overlay stays partially visible */
.card-overlay {
opacity: .7 !important;
background: linear-gradient(to top, rgba(5,9,18,.95) 0%, rgba(5,9,18,.4) 50%, transparent 100%) !important;
}
.card-info {
opacity: 1 !important;
transform: none !important;
}
.card-play { opacity: 0 !important; }
}
/* ── Section title accent dot ──────────────────────────────────────────── */
.section-title-accent {
color: var(--accent2); font-size: .7em;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: .4; }
}
/* ══════════════════════════════════════════════════════
SCHEDULE STRIP — compact on homepage
══════════════════════════════════════════════════════ */
.schedule-strip-section {
padding: 2rem 3rem;
max-width: 1440px; margin: 0 auto;
}
.schedule-strip {
display: flex; gap: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
margin-top: 1.25rem;
}
/* ── Individual day ── */
.sched-day {
flex: 1; min-width: 0;
border-right: 1px solid var(--border);
transition: flex .3s cubic-bezier(.4,0,.2,1);
}
.sched-day:last-child { border-right: none; }
.sched-day.is-today {
background: rgba(var(--accent-rgb), .04);
flex: 1.5;
}
.sched-day.expanded { flex: 2.5; }
/* ── Day header ── */
.sched-day-header {
display: flex; align-items: center; gap: .5rem;
padding: .85rem 1rem; width: 100%;
cursor: pointer; transition: background .15s;
border-bottom: 1px solid var(--border);
}
.sched-day-header:hover { background: rgba(255,255,255,.04); }
.sched-day-label { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.sched-today-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent2);
box-shadow: 0 0 8px var(--accent2);
animation: pulse-dot 1.5s ease-in-out infinite;
margin-bottom: .15rem;
}
.sched-day-name {
font-size: .82rem; font-weight: 800;
letter-spacing: 1px; text-transform: uppercase;
color: #fff; line-height: 1;
}
.is-today .sched-day-name { color: var(--accent2); }
.sched-day-date { font-size: .68rem; color: var(--muted); margin-top: .15rem; }
.sched-day-count {
font-size: .65rem; font-weight: 700;
background: rgba(255,255,255,.07); border-radius: 20px;
padding: .15rem .5rem; color: var(--muted); white-space: nowrap;
}
.is-today .sched-day-count { background: rgba(var(--accent-rgb),.15); color: var(--accent2); }
.sched-chevron {
flex-shrink: 0; color: var(--muted);
transition: transform .25s;
}
.expanded .sched-chevron { transform: rotate(180deg); }
/* ── Timeline line ── */
.sched-timeline-wrap { padding: 1rem .75rem; position: relative; }
.sched-line {
position: relative; height: 2px;
background: rgba(255,255,255,.08);
border-radius: 2px; margin: 3.5rem 0;
}
.line-today {
background: linear-gradient(90deg,
rgba(var(--accent-rgb),.3) 0%,
var(--accent2) 50%,
rgba(var(--accent-rgb),.3) 100%);
}
/* Now marker */
.sched-now-marker {
position: absolute; top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; align-items: center;
z-index: 5;
}
.sched-now-pulse {
width: 12px; height: 12px; border-radius: 50%;
background: var(--accent2);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.3), 0 0 16px var(--accent2);
animation: now-pulse 2s ease-out infinite;
}
@keyframes now-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.7), 0 0 16px var(--accent2); }
70% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),0), 0 0 16px var(--accent2); }
100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0), 0 0 16px var(--accent2); }
}
.sched-now-label {
font-size: .55rem; font-weight: 900; letter-spacing: 1.5px;
color: var(--accent2); margin-top: .3rem; white-space: nowrap;
}
/* Preview cards (collapsed, 2 shown) */
.sched-preview-cards {
display: flex; flex-direction: column; gap: 1rem;
position: relative; margin-top: .5rem;
}
.sched-card {
display: flex; align-items: center; gap: .6rem;
background: rgba(255,255,255,.04); border: 1px solid var(--border);
border-radius: 10px; overflow: hidden;
transition: all .15s; cursor: pointer;
}
.sched-card:hover {
background: rgba(var(--accent-rgb),.08);
border-color: var(--accent2);
transform: translateY(-1px);
}
.sched-card img {
width: 36px; height: 50px; object-fit: cover; flex-shrink: 0;
}
.sched-card-info {
display: flex; flex-direction: column; gap: .2rem; padding: .4rem .5rem;
}
.sched-card-title {
display: none; /* shown only in expanded state */
font-size: .7rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
padding: 0 .5rem .4rem;
}
.expanded .sched-card-title { display: block; }
.sched-ep-badge {
font-size: .6rem; font-weight: 800; letter-spacing: 1px;
background: rgba(var(--accent-rgb),.15); color: var(--accent2);
border-radius: 4px; padding: .1rem .35rem;
}
.sched-card-time { font-size: .62rem; color: var(--muted); }
.sched-card-dot {
position: absolute; left: 50%; top: -3.5rem;
width: 8px; height: 8px; border-radius: 50%;
background: var(--border); transform: translateX(-50%);
border: 2px solid var(--surface);
display: none; /* shown only in timeline view */
}
/* Expanded list */
.sched-expanded-list {
display: flex; flex-direction: column; gap: .5rem;
margin-top: .75rem; padding-top: .5rem;
border-top: 1px solid rgba(255,255,255,.06);
max-height: 400px; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.sched-full-card {
display: flex; align-items: center; gap: .75rem;
border-radius: 10px; padding: .4rem;
transition: background .15s; text-decoration: none;
position: relative;
}
.sched-full-card:hover { background: rgba(255,255,255,.05); }
.sched-full-card.aired { opacity: .6; }
.sched-full-card img {
width: 40px; height: 55px; object-fit: cover;
border-radius: 6px; flex-shrink: 0;
}
.sched-full-card-body { flex: 1; min-width: 0; }
.sched-full-card-title {
font-size: .78rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: .25rem;
}
.sched-full-card-meta { display: flex; align-items: center; gap: .5rem; }
.sched-full-time { font-size: .65rem; color: var(--muted); }
.time-soon { color: var(--accent2); font-weight: 600; }
.time-aired { color: var(--muted); }
.sched-full-card .sched-card-dot {
display: block; position: static; transform: none;
flex-shrink: 0;
}
.dot-soon {
background: var(--accent2);
box-shadow: 0 0 8px var(--accent2);
animation: now-pulse 2s ease-out infinite;
}
.dot-aired { background: rgba(255,255,255,.2); }
/* ══════════════════════════════════════════════════════
RECENTLY UPDATED — list grid style
══════════════════════════════════════════════════════ */
.recently-updated-section { padding-bottom: 0; }
.ru-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .75rem;
}
.ru-item {
display: flex; align-items: center; gap: .85rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: .6rem .85rem;
transition: all .18s; text-decoration: none; cursor: pointer;
position: relative; overflow: hidden;
}
.ru-item::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: linear-gradient(to bottom, var(--accent2), var(--accent));
opacity: 0; transition: opacity .18s;
}
.ru-item:hover { background: var(--surface-2); border-color: var(--border-strong); }
.ru-item:hover::before { opacity: 1; }
.ru-rank {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.4rem; font-weight: 900;
color: rgba(255,255,255,.12); min-width: 2ch; text-align: center;
line-height: 1;
}
.ru-cover {
position: relative; width: 38px; height: 52px;
border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.ru-cover img { width: 100%; height: 100%; object-fit: cover; }
.ru-cover-glow {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(var(--accent-rgb),.2), transparent);
}
.ru-info { flex: 1; min-width: 0; }
.ru-title {
font-size: .82rem; font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: .3rem;
}
.ru-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ru-ep-badge {
font-size: .6rem; font-weight: 800; letter-spacing: .8px;
background: rgba(var(--accent-rgb),.15); color: var(--accent2);
border-radius: 4px; padding: .1rem .35rem;
}
.ru-lang-badge {
font-size: .6rem; font-weight: 800; letter-spacing: .8px;
border-radius: 4px; padding: .1rem .35rem;
}
.ru-sub { background: rgba(34,197,94,.12); color: #4ade80; }
.ru-dub { background: rgba(251,191,36,.12); color: #fbbf24; }
.ru-type { font-size: .65rem; color: var(--muted); margin-top: .2rem; }
.ru-arrow { color: var(--muted); flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.ru-item:hover .ru-arrow { opacity: 1; }
/* ── Ranked card style ─────────────────────────────────────────────────── */
.ranked-row .card { position: relative; }
.ranked-num {
position: absolute; bottom: 0; left: -0.2rem; z-index: 4;
font-family: 'Barlow Condensed', sans-serif;
font-size: 4.5rem; font-weight: 900; line-height: 1;
color: transparent;
-webkit-text-stroke: 2px rgba(255,255,255,.15);
pointer-events: none; user-select: none;
letter-spacing: -2px;
}
/* ══════════════════════════════════════════════════════
FULL SCHEDULE PAGE
══════════════════════════════════════════════════════ */
.schedule-page { min-height: 80vh; }
/* Day tabs */
.schedule-day-tabs {
display: flex; gap: .5rem; margin-bottom: 2.5rem;
flex-wrap: wrap; overflow-x: auto;
scrollbar-width: none; padding-bottom: .25rem;
}
.schedule-day-tabs::-webkit-scrollbar { display: none; }
.sched-tab {
display: flex; flex-direction: column; align-items: center;
padding: .7rem 1.25rem; border-radius: 12px;
background: var(--surface); border: 1px solid var(--border);
cursor: pointer; transition: all .18s; flex-shrink: 0;
gap: .15rem;
}
.sched-tab:hover { border-color: var(--border-strong); color: #fff; }
.sched-tab.active {
background: rgba(var(--accent-rgb),.12);
border-color: var(--accent2); color: var(--accent2);
}
.sched-tab-name { font-size: .8rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.sched-tab-date { font-size: .68rem; color: var(--muted); }
.sched-tab-count {
font-size: .62rem; font-weight: 700;
background: rgba(255,255,255,.07); border-radius: 20px;
padding: .1rem .45rem; color: var(--muted); margin-top: .15rem;
}
.sched-tab.active .sched-tab-count { background: rgba(var(--accent-rgb),.2); color: var(--accent2); }
/* Day panels */
.full-schedule-day { display: none; }
.full-schedule-day.active { display: block; }
/* Full timeline line */
.full-timeline-wrap {
position: relative; margin: 4rem 0 6rem; padding: 0 2rem;
display: none; /* Hidden on mobile, shown on desktop */
}
.full-timeline-line {
position: relative; height: 3px;
background: linear-gradient(90deg,
transparent 0%, var(--border) 5%, var(--border) 95%, transparent 100%);
border-radius: 3px;
}
/* Now marker on full schedule */
.full-now-marker {
position: absolute; top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; align-items: center;
z-index: 10;
}
.full-now-pulse {
width: 16px; height: 16px; border-radius: 50%;
background: var(--accent2);
box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.3), 0 0 24px var(--accent2);
animation: now-pulse 2s ease-out infinite;
}
.full-now-label {
font-size: .6rem; font-weight: 900; letter-spacing: 2px;
color: var(--accent2); margin-top: .4rem; white-space: nowrap;
}
.full-now-line {
width: 2px; height: 60px; background: linear-gradient(to bottom, var(--accent2), transparent);
margin-top: .25rem;
}
/* Episode nodes on full timeline */
.full-ep-node {
position: absolute; top: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center;
z-index: 5;
}
.full-ep-node.above { align-items: center; }
.full-ep-node.below { flex-direction: column-reverse; }
.full-node-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--border-strong); border: 2px solid var(--surface);
position: relative; z-index: 2;
}
.full-ep-node.upcoming .full-node-dot {
background: var(--accent2);
box-shadow: 0 0 10px var(--accent2);
}
.full-node-pulse {
position: absolute; inset: -4px; border-radius: 50%;
background: rgba(var(--accent-rgb),.3);
animation: now-pulse 2s ease-out infinite;
}
.full-node-time {
font-size: .62rem; color: var(--muted); font-weight: 600;
white-space: nowrap; margin: .4rem 0;
}
.full-ep-node.upcoming .full-node-time { color: var(--accent2); }
/* Episode card on full timeline */
.full-ep-card {
display: flex; flex-direction: column;
background: rgba(5,9,18,.92); border: 1px solid var(--border);
border-radius: 12px; overflow: hidden;
width: 140px; text-decoration: none;
transition: all .18s; margin: .4rem 0;
backdrop-filter: blur(8px);
}
.full-ep-card:hover {
border-color: var(--accent2);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.full-ep-cover { position: relative; }
.full-ep-cover img { width: 100%; height: 85px; object-fit: cover; }
.full-ep-cover-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(5,9,18,.8) 100%);
}
.full-ep-aired-badge {
position: absolute; top: .4rem; right: .4rem;
font-size: .58rem; font-weight: 800; letter-spacing: 1px;
background: rgba(0,0,0,.7); color: var(--muted);
border-radius: 4px; padding: .1rem .4rem;
}
.full-ep-node.aired .full-ep-card { opacity: .65; }
.full-ep-body { padding: .6rem .7rem; }
.full-ep-title {
font-size: .72rem; font-weight: 700; color: var(--text);
line-height: 1.3; margin-bottom: .35rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.full-ep-meta { display: flex; align-items: center; gap: .4rem; }
.full-ep-num {
font-size: .6rem; font-weight: 800;
background: rgba(var(--accent-rgb),.15); color: var(--accent2);
border-radius: 4px; padding: .1rem .35rem;
}
.full-ep-score { font-size: .62rem; color: #fbbf24; }
.full-ep-genres { display: flex; gap: .3rem; margin-top: .3rem; flex-wrap: wrap; }
.full-ep-genres span {
font-size: .55rem; color: var(--muted);
background: rgba(255,255,255,.06); border-radius: 4px;
padding: .1rem .35rem;
}
/* Mobile schedule list */
.schedule-mobile-list { display: none; }
.sml-item {
display: flex; align-items: center; gap: .85rem;
padding: .75rem; border-radius: 12px;
background: var(--surface); border: 1px solid var(--border);
margin-bottom: .5rem; text-decoration: none;
transition: all .15s;
}
.sml-item:hover { background: var(--surface-2); border-color: var(--border-strong); }
.sml-item.sml-aired { opacity: .65; }
.sml-cover { width: 44px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.sml-info { flex: 1; min-width: 0; }
.sml-title {
font-size: .88rem; font-weight: 700; color: var(--text);
margin-bottom: .35rem; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.sml-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sml-time { font-size: .72rem; color: var(--muted); }
.sml-score { font-size: .7rem; color: #fbbf24; }
.sml-arrow { color: var(--muted); flex-shrink: 0; }
/* ── Dub notice ────────────────────────────────────────────────────────── */
.dub-notice {
text-align: center; font-size: .78rem; font-weight: 600;
color: #fbbf24; background: rgba(251,191,36,.1);
border: 1px solid rgba(251,191,36,.25);
border-radius: 8px; padding: .5rem 1rem;
margin: .5rem 0; display: none; transition: opacity .3s;
}
.dub-notice.visible { display: block; }
/* Dub button disabled state */
#btn-dub:disabled {
opacity: .35; cursor: not-allowed;
text-decoration: line-through;
}
/* SUB-only badge on episode buttons */
.ep-btn.ep-sub-only::after {
content: 'SUB'; position: absolute;
top: .2rem; left: .25rem;
font-size: .42rem; font-weight: 900; letter-spacing: .8px;
background: rgba(34,197,94,.2); color: #4ade80;
border-radius: 3px; padding: .05rem .25rem;
}
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
/* Schedule strip: vertical on tablet */
.schedule-strip { flex-direction: column; }
.sched-day { border-right: none; border-bottom: 1px solid var(--border); }
.sched-day:last-child { border-bottom: none; }
/* Full timeline: hide complex layout, show mobile list */
.full-timeline-wrap { display: none; }
.schedule-mobile-list { display: block; }
/* Recently updated: 2 cols */
.ru-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.schedule-strip-section { padding: 1.25rem 1rem; }
.schedule-page { padding: calc(var(--nav-h) + 1rem) 1rem 2rem; }
/* Recently updated: 1 col */
.ru-grid { grid-template-columns: 1fr; }
/* Day tabs scroll */
.schedule-day-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; }
.sched-tab { padding: .6rem 1rem; }
.ranked-num { font-size: 3rem; }
}
@media (min-width: 981px) {
/* Full timeline visible on desktop */
.full-timeline-wrap { display: block; }
.schedule-mobile-list { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
NEXUS ANIME HOMEPAGE V2 — Unique sections + Timeline + Cards
═══════════════════════════════════════════════════════════════ */
/* ── Card action buttons (watchlist + fav) — stacked top-right ─────── */
.card-actions {
position: absolute; top: .45rem; right: .45rem;
display: flex; flex-direction: column; gap: .3rem;
z-index: 6; opacity: 0; transform: translateX(6px);
transition: opacity .2s, transform .2s;
}
.card:hover .card-actions { opacity: 1; transform: translateX(0); }
/* Always visible on mobile (touch devices) */
@media (hover: none) {
.card-actions { opacity: 1 !important; transform: none !important; }
}
.card-action-btn {
width: 28px; height: 28px; border-radius: 8px;
background: rgba(5,9,18,.82); backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.14);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .18s; color: rgba(255,255,255,.8);
flex-shrink: 0;
}
.card-action-btn:hover { transform: scale(1.1); }
/* Watchlist button states */
.card-wl-btn .wl-check { display: none; }
.card-wl-btn.in-list .wl-add { display: none; }
.card-wl-btn.in-list .wl-check { display: flex; }
.card-wl-btn:hover { background: rgba(var(--accent-rgb),.85); border-color: var(--accent2); color: #fff; }
.card-wl-btn.in-list { background: rgba(var(--accent-rgb),.85); border-color: var(--accent); color: #fff; opacity: 1; }
/* Fav button states */
/* Score stays bottom-left — no overlap */
.card-score {
position: absolute; bottom: auto; top: auto;
bottom: 3.5rem; left: .5rem; z-index: 4;
}
/* ── Section identity — eyebrow labels + accent colors ──────────────── */
.anime-section { padding: 2.5rem 3rem; max-width: 1440px; margin: 0 auto; }
.section-header {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 1.5rem; gap: 1rem;
}
.section-header-left { display: flex; flex-direction: column; gap: .2rem; }
.section-eyebrow {
font-size: .65rem; font-weight: 900; letter-spacing: 3px;
text-transform: uppercase; color: var(--muted);
}
.section-view-all {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .75rem; font-weight: 700; letter-spacing: 1px;
color: var(--muted); transition: color .18s; white-space: nowrap;
text-transform: uppercase;
}
.section-view-all:hover { color: var(--accent2); }
/* Each section gets a distinct eyebrow color */
.recently-eyebrow { color: #4ade80; } /* green */
.toprated-eyebrow { color: #fbbf24; } /* gold */
.seasonal-eyebrow { color: #38bdf8; } /* sky blue */
.popular-eyebrow { color: #a78bfa; } /* purple */
.films-eyebrow { color: #fb923c; } /* orange */
/* Each section gets a subtle left-border accent on the title */
.toprated-section .section-title { border-left: 3px solid #fbbf24; padding-left: .75rem; }
.recently-section .section-title { border-left: 3px solid #4ade80; padding-left: .75rem; }
.seasonal-section .section-title { border-left: 3px solid #38bdf8; padding-left: .75rem; }
.popular-section .section-title { border-left: 3px solid #a78bfa; padding-left: .75rem; }
.films-section .section-title { border-left: 3px solid #fb923c; padding-left: .75rem; }
/* Top rated section — golden background tint */
.toprated-section {
background: linear-gradient(135deg, rgba(251,191,36,.04) 0%, transparent 60%);
border-radius: 20px;
}
/* Recently updated — green tint */
.recently-section {
background: linear-gradient(135deg, rgba(74,222,128,.04) 0%, transparent 60%);
border-radius: 20px;
}
/* Films — orange tint */
.films-section {
background: linear-gradient(135deg, rgba(251,146,60,.04) 0%, transparent 60%);
border-radius: 20px;
}
/* Ranked number — big outlined digit */
.ranked-card { position: relative; }
.ranked-num {
position: absolute; bottom: 3.5rem; left: -.15rem; z-index: 4;
font-family: 'Barlow Condensed', sans-serif;
font-size: 4.5rem; font-weight: 900; line-height: 1;
color: transparent;
-webkit-text-stroke: 2px rgba(251,191,36,.4);
pointer-events: none; user-select: none; letter-spacing: -3px;
transition: -webkit-text-stroke-color .2s;
}
.ranked-card:hover .ranked-num { -webkit-text-stroke-color: rgba(251,191,36,.8); }
/* ── Recently Updated grid ────────────────────────────────────────── */
.ru-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: .6rem;
}
.ru-item {
display: flex; align-items: center; gap: .8rem;
background: rgba(255,255,255,.03); border: 1px solid var(--border);
border-radius: 12px; padding: .6rem .8rem;
text-decoration: none; transition: all .18s; position: relative;
overflow: hidden;
}
.ru-item::after {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 2px; background: #4ade80; opacity: 0; transition: opacity .18s;
}
.ru-item:hover { background: rgba(74,222,128,.06); border-color: rgba(74,222,128,.25); }
.ru-item:hover::after { opacity: 1; }
.ru-rank {
font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem;
font-weight: 900; color: rgba(255,255,255,.1); min-width: 2ch;
text-align: center; line-height: 1;
}
.ru-cover {
position: relative; width: 36px; height: 50px;
border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.ru-cover img { width: 100%; height: 100%; object-fit: cover; }
.ru-cover-shine {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 60%);
}
.ru-info { flex: 1; min-width: 0; }
.ru-title {
font-size: .8rem; font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: .25rem;
}
.ru-badges { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .2rem; }
.ru-ep {
font-size: .58rem; font-weight: 800; letter-spacing: .8px;
background: rgba(74,222,128,.15); color: #4ade80;
border-radius: 4px; padding: .1rem .35rem;
}
.ru-lang { font-size: .58rem; font-weight: 800; letter-spacing: .8px; border-radius: 4px; padding: .1rem .35rem; }
.ru-sub { background: rgba(56,189,248,.12); color: #38bdf8; }
.ru-dub { background: rgba(251,191,36,.12); color: #fbbf24; }
.ru-type { font-size: .62rem; color: var(--muted); }
.ru-arrow { color: var(--muted); flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.ru-item:hover .ru-arrow { opacity: 1; }
/* ══════════════════════════════════════════════════════════════════
TIMELINE — horizontal alternating cards above/below line
══════════════════════════════════════════════════════════════════ */
.timeline-section { overflow: hidden; }
/* Day tabs */
.tl-day-tabs {
display: flex; gap: .4rem; margin-bottom: 1.5rem;
overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem;
-webkit-overflow-scrolling: touch;
}
.tl-day-tabs::-webkit-scrollbar { display: none; }
.tl-tab {
display: flex; flex-direction: column; align-items: center;
gap: .12rem; padding: .55rem 1rem; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
cursor: pointer; transition: all .2s; flex-shrink: 0;
position: relative;
}
.tl-tab:hover { border-color: var(--border-strong); }
.tl-tab.active {
background: rgba(var(--accent-rgb),.1);
border-color: var(--accent2); color: var(--accent2);
}
.tl-tab.is-today.active { background: rgba(var(--accent-rgb),.15); }
.tl-today-pip {
position: absolute; top: .35rem; left: 50%; transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent2); animation: now-pulse 1.5s ease-out infinite;
}
.tl-tab-dow { font-size: .78rem; font-weight: 800; letter-spacing: .8px; }
.tl-tab-date { font-size: .62rem; color: var(--muted); }
.tl-tab-count {
font-size: .58rem; font-weight: 700;
background: rgba(255,255,255,.07); border-radius: 20px;
padding: .08rem .4rem; color: var(--muted);
}
.tl-tab.active .tl-tab-count { background: rgba(var(--accent-rgb),.2); color: var(--accent2); }
/* Timeline panel */
.tl-panel { display: none; }
.tl-panel.active { display: block; }
/* Track container — holds the line and all cards */
.tl-track-wrap {
position: relative;
padding: 130px 2rem 130px; /* space for cards above and below */
min-height: 320px;
}
/* The horizontal line */
.tl-line {
position: absolute; left: 2rem; right: 2rem;
top: 50%; transform: translateY(-50%);
height: 3px; border-radius: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--accent-rgb),.25) 5%,
rgba(var(--accent-rgb),.5) 50%,
rgba(var(--accent-rgb),.25) 95%,
transparent 100%);
}
/* Animated shimmer on the line */
.tl-line-glow {
position: absolute; inset: -1px;
background: linear-gradient(90deg,
transparent 0%, transparent 20%,
rgba(255,255,255,.6) 50%,
transparent 80%, transparent 100%);
background-size: 200% 100%;
animation: tl-shimmer 3s ease-in-out infinite;
border-radius: 3px;
}
@keyframes tl-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Now marker on the line */
.tl-now-marker {
position: absolute; top: 50%; transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; z-index: 10;
}
.tl-now-dot {
width: 14px; height: 14px; border-radius: 50%;
background: var(--accent2);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.3), 0 0 20px var(--accent2);
animation: now-pulse 2s ease-out infinite;
}
.tl-now-ring {
position: absolute; width: 28px; height: 28px; border-radius: 50%;
border: 1px solid rgba(var(--accent-rgb),.4);
animation: tl-ring-pulse 2s ease-out infinite;
}
@keyframes tl-ring-pulse {
0% { transform: scale(.5); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
.tl-now-text {
position: absolute; top: 18px; font-size: .52rem; font-weight: 900;
letter-spacing: 2px; color: var(--accent2); white-space: nowrap;
}
/* Cards container — inline-flex for horizontal layout */
.tl-cards-wrap {
display: flex; align-items: stretch;
gap: 0; position: relative; z-index: 5;
overflow-x: auto; scrollbar-width: none;
padding: 0 1rem;
}
.tl-cards-wrap::-webkit-scrollbar { display: none; }
/* Individual episode node */
.tl-ep {
display: flex; flex-direction: column;
align-items: center; flex-shrink: 0;
width: 140px; position: relative;
}
/* Above: card on top, stem going down */
.tl-above { flex-direction: column; padding-bottom: 0; justify-content: flex-end; }
/* Below: stem on top, card going down */
.tl-below { flex-direction: column-reverse; padding-top: 0; justify-content: flex-start; }
/* Connector (dot + stem) */
.tl-connector { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.tl-above .tl-connector { order: 1; }
.tl-below .tl-connector { order: -1; }
.tl-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--border-strong); border: 2px solid var(--surface);
position: relative; z-index: 2; flex-shrink: 0;
}
.tl-dot.tl-dot-pulse { background: var(--accent2); box-shadow: 0 0 8px var(--accent2); }
.tl-dot-inner {
position: absolute; inset: -4px; border-radius: 50%;
background: rgba(var(--accent-rgb),.25);
animation: now-pulse 2s ease-out infinite;
}
.tl-stem {
width: 2px; height: 30px;
background: linear-gradient(to bottom, var(--border-strong), transparent);
flex-shrink: 0;
}
.tl-below .tl-stem {
background: linear-gradient(to top, var(--border-strong), transparent);
}
.tl-soon .tl-stem { background: linear-gradient(to bottom, var(--accent2), transparent); opacity: .5; }
.tl-below.tl-soon .tl-stem { background: linear-gradient(to top, var(--accent2), transparent); opacity: .5; }
/* Episode card */
.tl-card {
display: flex; flex-direction: column;
background: rgba(5,9,18,.88); border: 1px solid var(--border);
border-radius: 12px; overflow: hidden; text-decoration: none;
transition: all .2s; width: 130px;
backdrop-filter: blur(10px);
}
.tl-card:hover {
border-color: var(--accent2); transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(var(--accent-rgb),.2);
}
.tl-aired .tl-card { opacity: .55; }
.tl-aired .tl-card:hover { opacity: .85; }
.tl-card-img { position: relative; width: 100%; aspect-ratio: 2/3; overflow: hidden; }
.tl-card-img img { width: 100%; height: 100%; object-fit: cover; }
.tl-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(5,9,18,.9) 100%);
}
.tl-aired-badge {
position: absolute; top: .4rem; left: .4rem;
font-size: .56rem; font-weight: 800; letter-spacing: 1px;
background: rgba(0,0,0,.75); color: var(--muted);
border-radius: 4px; padding: .1rem .35rem;
}
.tl-card-ep {
position: absolute; bottom: .4rem; left: .4rem;
font-size: .58rem; font-weight: 800; letter-spacing: .8px;
background: rgba(var(--accent-rgb),.8); color: #fff;
border-radius: 4px; padding: .1rem .35rem;
}
.tl-card-body { padding: .5rem .6rem; }
.tl-card-title {
font-size: .72rem; font-weight: 700; color: var(--text);
line-height: 1.3; margin-bottom: .2rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-card-time { font-size: .62rem; color: var(--muted); }
.tl-time-soon { color: var(--accent2); font-weight: 700; }
/* Expand button */
.tl-expand-wrap { text-align: center; margin-top: 1.25rem; }
.tl-expand-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .5rem 1.25rem; border-radius: 20px;
background: var(--surface); border: 1px solid var(--border);
color: var(--muted); font-size: .78rem; font-weight: 600;
cursor: pointer; transition: all .18s;
}
.tl-expand-btn svg { transform: rotate(180deg); }
.tl-expand-btn:hover { border-color: var(--accent2); color: var(--accent2); }
/* Mobile timeline — scrollable horizontal */
@media (max-width: 720px) {
.anime-section { padding: 1.5rem 1rem; }
.tl-track-wrap { padding: 120px 1rem 120px; }
.tl-ep { width: 115px; }
.tl-card { width: 105px; }
.ru-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
.section-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
@media (max-width: 480px) {
.ru-grid { grid-template-columns: 1fr; }
.tl-ep { width: 100px; }
.tl-card { width: 90px; }
.tl-card-title { font-size: .65rem; }
.tl-card-time { font-size: .56rem; }
}
/* Episode/Season font size increases */
.ep-btn .ep-num { font-size: 1.2rem !important; font-weight: 900 !important; }
.ep-btn .ep-label { font-size: .65rem !important; }
.season-card-num { font-size: 1rem !important; font-weight: 800 !important; }
.season-card-eps { font-size: .78rem !important; }
.season-card-year { font-size: .75rem !important; }
/* ── card-score final position fix — bottom-left above card-info ── */
.card-score {
position: absolute !important;
top: auto !important;
bottom: 3.8rem !important;
left: .45rem !important;
right: auto !important;
background: rgba(0,0,0,.75) !important;
color: #fbbf24 !important;
font-size: .68rem !important;
font-weight: 700 !important;
padding: .18rem .45rem !important;
border-radius: 6px !important;
backdrop-filter: blur(4px) !important;
z-index: 4 !important;
}
/* card-watchlist-btn restored — was incorrectly hidden by a stale v4 override */
/* card-fav-btn override removed */
/* ═══════════════════════════════════════════════════════════════
NEXUS v4 — Browse Filters + Range Picker + Timeline Fix
═══════════════════════════════════════════════════════════════ */
/* ── Browse filter bar ─────────────────────────────────────────────── */
.browse-filters {
display: flex; flex-wrap: wrap; gap: .6rem;
align-items: flex-end; margin-bottom: 1.75rem;
padding: 1rem 1.25rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px;
}
.bf-group { display: flex; flex-direction: column; gap: .3rem; }
.bf-label { font-size: .62rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.bf-select {
appearance: none; -webkit-appearance: none;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 8px; padding: .45rem .9rem;
font-size: .8rem; font-weight: 600; color: var(--text);
cursor: pointer; transition: border-color .15s;
display: flex; align-items: center; gap: .4rem;
white-space: nowrap; min-width: 130px;
}
select.bf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23888' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem; }
.bf-select:hover, .bf-select:focus { border-color: var(--accent2); outline: none; }
/* Genre multi-select dropdown */
.bf-multi-wrap { position: relative; }
.bf-multi-wrap.open .bf-select { border-color: var(--accent2); }
.bf-dropdown {
position: absolute; top: calc(100% + .4rem); left: 0; z-index: 200;
background: rgba(10,18,32,.97); border: 1px solid var(--border);
border-radius: 12px; padding: .75rem;
min-width: 320px; max-width: 420px;
box-shadow: 0 20px 50px rgba(0,0,0,.5);
backdrop-filter: blur(20px);
}
.bf-dropdown-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: .25rem; max-height: 200px; overflow-y: auto;
margin-bottom: .5rem;
}
.bf-checkbox {
display: flex; align-items: center; gap: .4rem;
font-size: .75rem; color: var(--muted); cursor: pointer;
padding: .3rem .4rem; border-radius: 6px; transition: background .12s;
}
.bf-checkbox:hover { background: var(--surface-2); color: #fff; }
.bf-checkbox input { accent-color: var(--accent2); }
.bf-clear-genres {
font-size: .72rem; color: var(--muted); cursor: pointer;
padding: .3rem .6rem; border-radius: 6px;
border: 1px solid var(--border); background: none;
transition: all .15s; width: 100%;
}
.bf-clear-genres:hover { border-color: #ef4444; color: #ef4444; }
/* Reset button */
.bf-reset {
display: inline-flex; align-items: center; gap: .4rem;
padding: .45rem .9rem; border-radius: 8px;
background: none; border: 1px solid rgba(239,68,68,.3);
color: rgba(239,68,68,.7); font-size: .78rem; font-weight: 600;
cursor: pointer; transition: all .15s; align-self: flex-end;
}
.bf-reset:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); }
/* ── Episode range picker ────────────────────────────────────────────── */
.ep-section-header {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: .75rem;
padding: 1rem 2rem; border-bottom: 1px solid var(--border);
margin-bottom: .5rem;
}
.ep-header-left { display: flex; align-items: center; gap: .75rem; }
.ep-total-badge {
font-size: .68rem; font-weight: 700;
background: rgba(var(--accent-rgb),.12); color: var(--accent2);
border: 1px solid rgba(var(--accent-rgb),.25);
border-radius: 20px; padding: .2rem .65rem;
}
.ep-header-right {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.ep-range-picker { display: flex; align-items: center; gap: .4rem; }
.ep-range-select {
appearance: none; -webkit-appearance: none;
background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; padding: .4rem 2rem .4rem .75rem;
font-size: .8rem; font-weight: 700; color: var(--text);
cursor: pointer; transition: border-color .15s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23888' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .6rem center;
font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px;
}
.ep-range-select:hover, .ep-range-select:focus {
border-color: var(--accent2); outline: none;
}
/* ── Timeline layout COMPLETE FIX ──────────────────────────────────── */
/* The track wrap needs to create proper space for above/below cards */
.tl-track-wrap {
position: relative;
padding: 0 2rem;
margin: 1rem 0 1.5rem;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.tl-track-wrap::-webkit-scrollbar { height: 4px; }
.tl-track-wrap::-webkit-scrollbar-track { background: transparent; }
.tl-track-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* The line sits in the middle */
.tl-line {
position: relative;
height: 3px;
margin: 140px 0; /* space for cards above and below */
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--accent-rgb),.3) 5%,
rgba(var(--accent-rgb),.6) 50%,
rgba(var(--accent-rgb),.3) 95%,
transparent 100%);
border-radius: 3px;
flex-shrink: 0;
min-width: 100%;
}
/* Cards wrap is an absolutely positioned overlay */
.tl-cards-wrap {
position: absolute;
top: 0; left: 2rem; right: 2rem;
display: flex;
align-items: flex-start;
gap: 1.5rem;
pointer-events: none;
}
/* Each episode node */
.tl-ep {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 130px;
pointer-events: all;
}
/* Above: card → stem → dot (card is above the line) */
.tl-above {
padding-top: 0;
/* card at top, then stem, then dot at line level */
}
.tl-above .tl-card { order: 1; margin-bottom: .4rem; }
.tl-above .tl-connector { order: 2; }
/* Below: dot → stem → card (card is below the line) */
.tl-below { margin-top: 146px; /* push below the line (140px margin + 3px line + 3px) */ }
.tl-below .tl-connector { order: 1; }
.tl-below .tl-card { order: 2; margin-top: .4rem; }
/* Stem direction */
.tl-above .tl-stem {
background: linear-gradient(to top, var(--border-strong), transparent);
}
.tl-below .tl-stem {
background: linear-gradient(to bottom, var(--border-strong), transparent);
}
/* Today tab — more prominent */
.tl-tab.is-today {
background: rgba(var(--accent-rgb),.08);
border-color: rgba(var(--accent-rgb),.3);
min-width: 90px;
}
.tl-tab.is-today .tl-tab-dow {
color: var(--accent2); font-size: .88rem;
}
.tl-tab.is-today.active {
background: rgba(var(--accent-rgb),.2);
border-color: var(--accent2);
box-shadow: 0 0 16px rgba(var(--accent-rgb),.2);
}
/* ── Card action buttons final fix — truly stacked vertically ───────── */
.card-actions {
position: absolute !important;
top: .4rem !important;
right: .4rem !important;
left: auto !important;
display: flex !important;
flex-direction: column !important; /* VERTICAL stack */
gap: .3rem !important;
z-index: 6;
opacity: 0;
transform: translateX(4px);
transition: opacity .2s, transform .2s;
}
.card:hover .card-actions,
.card:focus-within .card-actions {
opacity: 1;
transform: translateX(0);
}
@media (hover: none) {
.card-actions { opacity: 1 !important; transform: none !important; }
}
/* ── Browse mobile ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
.browse-filters { flex-direction: column; }
.bf-group { width: 100%; }
.bf-select, select.bf-select { width: 100%; }
.bf-dropdown { min-width: 280px; max-width: 100vw; }
.bf-dropdown-grid { grid-template-columns: repeat(2, 1fr); }
.ep-section-header { padding: .75rem 1rem; }
.tl-cards-wrap { gap: 1rem; }
.tl-ep { width: 110px; }
.tl-card { width: 100px; }
.tl-below { margin-top: 148px; }
}
@media (max-width: 480px) {
.ep-section-header { flex-direction: column; align-items: flex-start; }
.ep-header-right { width: 100%; }
.tl-ep { width: 95px; }
.tl-card { width: 85px; }
}
/* ── btn-secondary active state (for status page tabs) ─────────────── */
.btn-secondary.active {
background: rgba(var(--accent-rgb),.12);
border-color: var(--accent2);
color: var(--accent2);
}
/* ═══════════════════════════════════════════════════════════════
NEXUS v5 — Countdown + Schedule v2 + Player Controls + Cards
═══════════════════════════════════════════════════════════════ */
/* ── Card structure fix — actions outside ──────────────────────── */
.card.card-v2, div.card {
position: relative;
display: inline-block;
width: 100%;
}
.card-link-wrap {
display: block;
text-decoration: none;
color: inherit;
}
/* Make sure card-actions are on top and don't affect layout */
div.card .card-actions {
position: absolute;
top: .4rem; right: .4rem;
z-index: 10;
display: flex;
flex-direction: column;
gap: .3rem;
opacity: 0;
transform: translateX(4px);
transition: opacity .2s, transform .2s;
pointer-events: all;
}
div.card:hover .card-actions { opacity: 1; transform: translateX(0); }
@media (hover: none) { div.card .card-actions { opacity: 1 !important; transform: none !important; } }
/* ── Section backgrounds — full screen width ───────────────────────── */
.anime-section { position: relative; overflow: hidden; }
.toprated-section::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, rgba(251,191,36,.06) 0%, transparent 50%);
}
.recently-section::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, rgba(74,222,128,.05) 0%, transparent 50%);
}
.films-section::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, rgba(251,146,60,.05) 0%, transparent 50%);
}
/* Remove old border-radius that was clipping the bg */
.toprated-section, .recently-section, .films-section { border-radius: 0; }
/* Make sections span full width */
.anime-section { margin-left: calc(-3rem); margin-right: calc(-3rem); padding-left: 3rem; padding-right: 3rem; }
@media (max-width: 720px) {
.anime-section { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}
/* ── Countdown section ─────────────────────────────────────────────── */
.countdown-section {
position: relative; overflow: hidden;
margin: 0; padding: 0;
}
.cd-inner {
position: relative; min-height: 200px;
display: flex; align-items: center;
padding: 2.5rem 3rem;
overflow: hidden;
}
.cd-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: blur(8px) brightness(.35);
transform: scale(1.05);
}
.cd-bg-overlay {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(5,9,18,.95) 0%, rgba(5,9,18,.7) 60%, rgba(5,9,18,.4) 100%);
}
.cd-content {
position: relative; z-index: 2;
display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.cd-eyebrow {
font-size: .65rem; font-weight: 900; letter-spacing: 3px;
text-transform: uppercase; color: var(--accent2);
display: block; margin-bottom: .25rem;
}
.cd-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900;
letter-spacing: 1px; text-transform: uppercase; color: #fff;
margin: 0 0 .15rem;
}
.cd-ep {
font-size: .8rem; color: var(--muted); font-weight: 600;
margin-bottom: .75rem;
}
.cd-timer {
display: flex; align-items: center; gap: .5rem;
background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1);
border-radius: 12px; padding: .75rem 1.25rem;
}
.cd-unit { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.cd-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: 2.2rem; font-weight: 900; line-height: 1;
color: #fff; min-width: 2.2ch; text-align: center;
}
.cd-label { font-size: .58rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
.cd-sep { font-size: 1.8rem; font-weight: 900; color: var(--accent2); margin-bottom: .8rem; }
.cd-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .55rem 1.25rem; border-radius: 8px;
background: linear-gradient(135deg, var(--accent2), var(--accent));
color: #fff; font-weight: 700; font-size: .82rem;
text-decoration: none; transition: transform .18s, box-shadow .18s;
margin-left: 1rem;
}
.cd-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--accent-rgb),.4); }
@media (max-width: 640px) {
.cd-inner { padding: 1.5rem 1rem; flex-direction: column; align-items: flex-start; }
.cd-content { flex-direction: column; gap: 1rem; }
.cd-timer { flex-wrap: wrap; }
.cd-btn { margin-left: 0; }
}
/* ── Schedule v2 ───────────────────────────────────────────────────── */
.schedule-v2-page { min-height: 80vh; }
.schv2-header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 1.75rem; flex-wrap: wrap; gap: .75rem;
}
.schv2-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.6rem; font-weight: 900; letter-spacing: 2px;
text-transform: uppercase; color: #fff; margin: 0;
}
.schv2-now { font-size: .78rem; color: var(--muted); margin-top: .2rem; display: block; }
/* Day strip */
.schv2-day-strip {
display: flex; align-items: center; gap: .5rem;
background: rgba(255,255,255,.03); border: 1px solid var(--border);
border-radius: 14px; padding: .5rem;
margin-bottom: 1.5rem; overflow: hidden;
}
.schv2-nav-arrow {
width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
background: var(--surface); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--muted); transition: all .15s;
}
.schv2-nav-arrow:hover { border-color: var(--accent2); color: var(--accent2); }
.schv2-days {
display: flex; gap: .3rem; overflow-x: auto;
scrollbar-width: none; flex: 1;
}
.schv2-days::-webkit-scrollbar { display: none; }
.schv2-day {
display: flex; flex-direction: column; align-items: center;
padding: .6rem 1.5rem; border-radius: 10px; flex-shrink: 0;
cursor: pointer; border: 1px solid transparent;
transition: all .18s; position: relative; gap: .1rem;
}
.schv2-day:hover { background: rgba(255,255,255,.05); }
.schv2-day.active {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.1);
}
.schv2-day-month { font-size: .65rem; color: var(--muted); letter-spacing: .5px; }
.schv2-day-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.5rem; font-weight: 900; letter-spacing: 2px;
color: var(--muted); transition: color .18s;
}
.schv2-day.is-today .schv2-day-name { color: #fff; font-size: 1.7rem; }
.schv2-day.is-today { background: rgba(255,255,255,.04); }
.schv2-day.active .schv2-day-name { color: #fff; }
.schv2-today-line {
position: absolute; bottom: 0; left: 25%; right: 25%; height: 2px;
background: linear-gradient(90deg, var(--accent2), var(--accent));
border-radius: 2px;
}
/* Schedule panels */
.schv2-panel { display: none; }
.schv2-panel.active { display: block; }
/* Episode rows */
.schv2-ep-list { display: flex; flex-direction: column; gap: .5rem; }
.schv2-row {
display: flex; align-items: center; gap: 1rem;
padding: .85rem 1.25rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; text-decoration: none;
transition: all .15s; color: var(--text);
}
.schv2-row:hover {
background: var(--surface-2); border-color: var(--border-strong);
transform: translateX(4px);
}
.schv2-row.schv2-aired { opacity: .55; }
.schv2-row-time {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.1rem; font-weight: 700; color: var(--accent2);
min-width: 50px; letter-spacing: 1px;
}
.schv2-row-cover {
width: 42px; height: 58px; border-radius: 6px;
overflow: hidden; flex-shrink: 0;
background: rgba(255,255,255,.05);
}
.schv2-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.schv2-row-info { flex: 1; min-width: 0; }
.schv2-row-title {
font-size: .9rem; font-weight: 700; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.schv2-row-genres { font-size: .72rem; color: var(--muted); margin-top: .2rem; }
.schv2-row-ep {
display: flex; align-items: center; gap: .4rem;
font-size: .78rem; font-weight: 600; color: var(--muted);
background: rgba(255,255,255,.06); border-radius: 6px;
padding: .3rem .7rem; white-space: nowrap; flex-shrink: 0;
transition: background .15s, color .15s;
}
.schv2-row:hover .schv2-row-ep { background: rgba(var(--accent-rgb),.15); color: var(--accent2); }
.schv2-show-more {
width: 100%; padding: .85rem; margin-top: .5rem;
background: none; border: 1px dashed var(--border);
border-radius: 12px; color: var(--muted);
font-size: .82rem; font-weight: 600; cursor: pointer;
transition: all .15s; text-align: center;
}
.schv2-show-more:hover { border-color: var(--accent2); color: var(--accent2); background: rgba(var(--accent-rgb),.05); }
/* ── Player controls bar ───────────────────────────────────────────── */
.ip-header {
display: flex; align-items: center; gap: .75rem;
flex-wrap: wrap; padding: .75rem 1rem;
border-bottom: 1px solid var(--border);
margin-bottom: .5rem;
}
.ip-header-left { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.ip-controls-bar {
display: flex; align-items: center; gap: .4rem;
flex-wrap: wrap; flex: 1;
}
.ip-ctrl-btn {
display: inline-flex; align-items: center; gap: .3rem;
padding: .35rem .7rem; border-radius: 7px;
background: rgba(255,255,255,.06); border: 1px solid var(--border);
color: var(--muted); font-size: .72rem; font-weight: 600;
cursor: pointer; transition: all .15s; white-space: nowrap;
letter-spacing: .5px;
}
.ip-ctrl-btn:hover { border-color: var(--border-strong); color: #fff; background: rgba(255,255,255,.1); }
.ip-ctrl-wl { color: var(--accent2); border-color: rgba(var(--accent-rgb),.3); }
.ip-ctrl-wl:hover { background: rgba(var(--accent-rgb),.12); border-color: var(--accent2); }
/* Toggle button with checkbox */
.ip-toggle-btn { cursor: pointer; user-select: none; }
.ip-toggle-btn input { display: none; }
.ip-toggle-track {
display: inline-block; width: 24px; height: 13px; border-radius: 7px;
background: rgba(255,255,255,.15); position: relative;
transition: background .2s; flex-shrink: 0;
}
.ip-toggle-track::after {
content: ''; position: absolute;
width: 9px; height: 9px; border-radius: 50%;
background: #fff; top: 2px; left: 2px;
transition: transform .2s;
}
.ip-toggle-btn input:checked ~ .ip-toggle-track { background: var(--accent2); }
.ip-toggle-btn input:checked ~ .ip-toggle-track::after { transform: translateX(11px); }
/* Expanded player mode */
.inline-player.ip-expanded { position: fixed; inset: 0; z-index: 500; max-height: 100vh !important; }
.inline-player.ip-expanded .ip-frame { height: calc(100vh - 120px); }
/* Light mode */
body.ip-light-mode::after {
content: ''; position: fixed; inset: 0; z-index: 490;
background: rgba(255,255,255,.85); pointer-events: none;
}
body.ip-light-mode .inline-player { position: fixed; inset: 0; z-index: 500; max-height: 100vh !important; }
/* Mobile schedule */
@media (max-width: 720px) {
.schv2-day { padding: .6rem 1rem; }
.schv2-day-name { font-size: 1.2rem; }
.schv2-day.is-today .schv2-day-name { font-size: 1.3rem; }
.schv2-row { padding: .65rem .85rem; gap: .75rem; }
.schv2-row-time { font-size: .95rem; min-width: 40px; }
.schv2-row-cover { width: 34px; height: 46px; }
.ip-controls-bar { gap: .3rem; }
.ip-ctrl-btn { padding: .3rem .55rem; font-size: .68rem; }
}
/* ═══════════════════════════════════════════════════════════════
NEXUS v6 — Full-width sections + Card buttons + Browse + Countdown
═══════════════════════════════════════════════════════════════ */
/* ── Full-width sections — remove max-width constraint ─────────────── */
.anime-section {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 3rem !important;
padding-right: 3rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Section headers and content also full width */
.anime-section .section-header {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
}
.anime-section .section-header::before { left: 0 !important; }
.anime-section .content-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Recently updated grid full width */
.ru-grid {
max-width: none !important;
width: 100%;
}
@media (max-width: 720px) {
.anime-section {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
/* ── bf-select (browse filter dropdowns) — dark themed ─────────────── */
.bf-select,
select.bf-select {
appearance: none !important;
-webkit-appearance: none !important;
background-color: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 8px !important;
padding: .5rem 2.2rem .5rem .9rem !important;
font-size: .8rem !important;
font-weight: 600 !important;
color: rgba(255,255,255,.8) !important;
cursor: pointer !important;
transition: border-color .15s, background .15s !important;
min-width: 120px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right .7rem center !important;
}
select.bf-select option {
background: #0d1423 !important;
color: #fff !important;
}
.bf-select:hover,
select.bf-select:hover,
.bf-select:focus,
select.bf-select:focus {
border-color: rgba(var(--accent-rgb),.6) !important;
background-color: rgba(255,255,255,.08) !important;
outline: none !important;
}
/* Genre button (non-select) */
.bf-multi-wrap .bf-select {
display: flex !important;
align-items: center !important;
gap: .5rem !important;
background-image: none !important;
padding-right: .9rem !important;
}
.bf-multi-wrap .bf-select svg { margin-left: auto; opacity: .5; flex-shrink: 0; }
.bf-multi-wrap.open .bf-select {
border-color: var(--accent2) !important;
background-color: rgba(var(--accent-rgb),.08) !important;
}
/* Dropdown panel */
.bf-dropdown {
background: rgba(8,14,28,.97) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 24px 60px rgba(0,0,0,.7) !important;
}
.bf-checkbox { color: rgba(255,255,255,.65) !important; }
.bf-checkbox:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
/* Filter group label */
.bf-label { color: rgba(255,255,255,.4) !important; }
/* Reset button */
.bf-reset {
border-color: rgba(239,68,68,.25) !important;
color: rgba(239,68,68,.6) !important;
}
.bf-reset:hover {
border-color: #ef4444 !important;
color: #ef4444 !important;
background: rgba(239,68,68,.08) !important;
}
/* Browse filter bar */
.browse-filters {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
/* ── Card action buttons — circular, semi-transparent, stacked ──────── */
/* Reset ALL old conflicting card button styles */
.card-actions,
div.card .card-actions {
position: absolute !important;
top: .5rem !important;
right: .5rem !important;
left: auto !important;
bottom: auto !important;
display: flex !important;
flex-direction: column !important;
gap: .35rem !important;
z-index: 10 !important;
opacity: 0 !important;
transform: translateX(6px) !important;
transition: opacity .2s ease, transform .2s ease !important;
pointer-events: all !important;
}
/* Show on hover (desktop) */
.card:hover .card-actions,
div.card:hover .card-actions { opacity: 1 !important; transform: translateX(0) !important; }
/* Always visible on touch */
@media (hover: none) {
.card-actions, div.card .card-actions {
opacity: 1 !important;
transform: none !important;
}
}
/* Each button — circular pill */
.card-action-btn {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background: rgba(5,9,18,.75) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255,255,255,.14) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all .2s !important;
color: rgba(255,255,255,.7) !important;
flex-shrink: 0 !important;
padding: 0 !important;
position: static !important; /* not absolute — parent .card-actions is absolute */
}
.card-action-btn:hover {
transform: scale(1.1) !important;
border-color: rgba(255,255,255,.35) !important;
color: #fff !important;
}
/* Watchlist button states */
.card-wl-btn .wl-check { display: none !important; }
.card-wl-btn.in-list .wl-add { display: none !important; }
.card-wl-btn.in-list .wl-check { display: flex !important; }
.card-wl-btn:hover,
.card-wl-btn.in-list {
background: rgba(var(--accent-rgb),.8) !important;
border-color: var(--accent) !important;
color: #fff !important;
}
/* Favorite button states */
/* ── Countdown section redesign — left text / right panels ─────────── */
.countdown-section {
position: relative;
overflow: hidden;
min-height: 280px;
background: #05091a;
}
.cd-inner {
display: flex;
align-items: stretch;
min-height: 280px;
padding: 0;
}
/* Left side — 50% — text + countdown */
.cd-left {
flex: 0 0 50%;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.5rem 3rem;
background: rgba(5,9,18,.92);
}
/* Right side — 50% — 4 image panels */
.cd-panels {
flex: 0 0 50%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2px;
overflow: hidden;
}
.cd-panel {
position: relative;
overflow: hidden;
background: #0d1423;
}
.cd-panel img {
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(1.2) brightness(.85);
transition: transform .6s ease;
}
.cd-panel:hover img { transform: scale(1.05); }
/* BW overlay on each panel that reveals color on hover */
.cd-panel::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background: inherit;
mix-blend-mode: color;
opacity: .6;
background: #1a1a2e;
transition: opacity .4s;
pointer-events: none;
}
.cd-panel:hover::before { opacity: 0; }
/* Gradient fade on left edge of panels */
.cd-panels::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 80px; z-index: 5;
background: linear-gradient(to right, rgba(5,9,18,.95), transparent);
pointer-events: none;
}
/* CD content */
.cd-eyebrow {
font-size: .62rem;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--accent2);
margin-bottom: .5rem;
}
.cd-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(1.8rem, 3.5vw, 3rem);
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
line-height: 1.05;
margin: 0 0 .3rem;
}
.cd-subtitle {
font-size: .88rem;
color: var(--muted);
font-weight: 600;
margin-bottom: .4rem;
}
.cd-genres {
font-size: .78rem;
color: var(--muted);
margin-bottom: 1.25rem;
font-style: italic;
}
.cd-label-coming {
font-size: 1rem;
font-weight: 700;
color: rgba(255,255,255,.85);
margin-bottom: .75rem;
}
.cd-timer {
display: flex;
align-items: flex-end;
gap: .5rem;
margin-bottom: 1.25rem;
background: none !important;
border: none !important;
padding: 0 !important;
}
.cd-unit {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
padding: .5rem .75rem;
min-width: 56px;
}
.cd-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: 2rem;
font-weight: 900;
color: #fff;
line-height: 1;
min-width: 2ch;
text-align: center;
}
.cd-label {
font-size: .55rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,.4);
margin-top: .2rem;
}
.cd-sep {
font-size: 1.6rem;
font-weight: 900;
color: rgba(255,255,255,.3);
margin-bottom: .6rem;
line-height: 1;
}
.cd-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .6rem 1.4rem;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent2), var(--accent));
color: #fff;
font-weight: 700;
font-size: .82rem;
text-decoration: none;
align-self: flex-start;
transition: transform .18s, box-shadow .18s;
}
.cd-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--accent-rgb),.4); }
/* ── Timeline section on homepage — full width strip ───────────────── */
.timeline-section .tl-day-tabs { max-width: none; }
/* Mobile countdown */
@media (max-width: 768px) {
.cd-inner { flex-direction: column; }
.cd-left { flex: none; padding: 1.5rem 1.25rem; }
.cd-panels {
flex: none;
height: 180px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
}
.cd-timer { gap: .35rem; }
.cd-unit { min-width: 44px; padding: .4rem .5rem; }
.cd-num { font-size: 1.6rem; }
}
/* ── Homepage schedule strip — matches reference ────────────────────── */
.hs-day-strip {
display: flex; gap: 0;
border-bottom: 1px solid rgba(255,255,255,.07);
margin-bottom: .5rem; overflow-x: auto;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hs-day-strip::-webkit-scrollbar { display: none; }
.hs-day-btn {
flex: 1; min-width: 80px; max-width: 140px;
display: flex; flex-direction: column; align-items: center;
padding: .85rem 1rem 1rem; border: none; border-bottom: 3px solid transparent;
background: none; cursor: pointer; position: relative;
transition: all .18s; color: var(--muted);
}
.hs-day-btn:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.03); }
.hs-day-btn.active, .hs-day-btn.is-today.active { color: #fff; }
.hs-day-month { font-size: .65rem; letter-spacing: .5px; margin-bottom: .2rem; color: inherit; }
.hs-day-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.45rem; font-weight: 900; letter-spacing: 2px;
color: inherit; line-height: 1;
}
.hs-day-btn.is-today .hs-day-name { font-size: 1.65rem; color: #fff; }
.hs-today-line {
position: absolute; bottom: -3px; left: 20%; right: 20%; height: 3px;
background: linear-gradient(90deg, var(--accent2), var(--accent));
border-radius: 3px 3px 0 0;
}
.hs-day-btn.is-today { border-bottom-color: transparent; }
/* Episode rows */
.hs-panel { display: none; padding: .5rem 0 1rem; }
.hs-panel.active { display: block; }
.hs-ep-list { display: flex; flex-direction: column; gap: .35rem; }
.hs-ep-row {
display: flex; align-items: center; gap: 1rem;
padding: .7rem .5rem; border-radius: 10px;
text-decoration: none; color: var(--text);
transition: background .15s;
}
.hs-ep-row:hover { background: rgba(255,255,255,.04); }
.hs-ep-row.hs-aired { opacity: .55; }
.hs-ep-time {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.05rem; font-weight: 700;
color: var(--accent2); min-width: 44px; letter-spacing: 1px;
}
.hs-ep-cover {
width: 36px; height: 50px; border-radius: 5px;
overflow: hidden; flex-shrink: 0;
background: rgba(255,255,255,.05);
}
.hs-ep-cover img { width: 100%; height: 100%; object-fit: cover; }
.hs-ep-title {
flex: 1; font-size: .88rem; font-weight: 600; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-ep-badge {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .74rem; font-weight: 600; color: var(--muted);
background: rgba(255,255,255,.06); border-radius: 5px;
padding: .25rem .6rem; flex-shrink: 0; white-space: nowrap;
transition: background .15s, color .15s;
}
.hs-ep-row:hover .hs-ep-badge { background: rgba(var(--accent-rgb),.15); color: var(--accent2); }
.hs-show-more {
display: block; width: 100%; text-align: center;
padding: .65rem; margin-top: .5rem;
color: var(--muted); font-size: .82rem; font-weight: 600;
text-decoration: none; border-radius: 8px;
border: 1px dashed rgba(255,255,255,.1);
transition: all .15s;
}
.hs-show-more:hover { border-color: var(--accent2); color: var(--accent2); }
@media (max-width: 720px) {
.hs-day-btn { min-width: 64px; padding: .65rem .6rem .85rem; }
.hs-day-name { font-size: 1.1rem; }
.hs-day-btn.is-today .hs-day-name { font-size: 1.25rem; }
.hs-ep-row { gap: .65rem; }
}
/* ═══════════════════════════════════════════════════════════════
NEXUS v7 — 3-Column Streaming Layout
═══════════════════════════════════════════════════════════════ */
/* ── Stream layout wrapper — hidden until player opens ─────────── */
.stream-layout {
display: none;
width: 100%;
background: #05091a;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.stream-layout.open { display: block; }
.stream-inner {
display: grid;
grid-template-columns: 240px 1fr 280px;
min-height: 500px;
max-height: 85vh;
}
/* ══ LEFT SIDEBAR — episode list ══════════════════════════════════ */
.stream-sidebar {
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255,255,255,.07);
background: rgba(5,9,18,.95);
overflow: hidden;
}
.stream-sidebar-header {
padding: .6rem .75rem;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
}
/* Sub/Dub + range in sidebar */
.stream-ep-controls {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.stream-dub-toggle {
display: flex; border-radius: 6px; overflow: hidden;
border: 1px solid rgba(255,255,255,.12); flex-shrink: 0;
}
.sdub-btn {
padding: .3rem .65rem; font-size: .7rem; font-weight: 800;
letter-spacing: 1px; cursor: pointer; transition: all .15s;
background: none; border: none; color: rgba(255,255,255,.5);
}
.sdub-btn.active {
background: #e8a020;
color: #000; font-weight: 900;
}
.stream-range-select {
flex: 1; appearance: none; -webkit-appearance: none;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
border-radius: 6px; padding: .3rem .65rem;
font-size: .7rem; font-weight: 700; color: #fff;
cursor: pointer; min-width: 90px;
}
/* Episode list scroll area */
.stream-ep-list {
flex: 1; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.stream-ep-list::-webkit-scrollbar { width: 3px; }
.stream-ep-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
/* Each episode row */
.stream-ep-item {
display: flex; align-items: center; gap: .6rem;
width: 100%; padding: .6rem .85rem;
border: none; border-bottom: 1px solid rgba(255,255,255,.04);
background: none; cursor: pointer; text-align: left;
color: rgba(255,255,255,.6); transition: all .13s;
}
.stream-ep-item:hover {
background: rgba(232,160,32,.08);
color: rgba(255,255,255,.9);
}
.stream-ep-item.active {
background: rgba(232,160,32,.15);
border-left: 3px solid #e8a020;
color: #fff;
}
.stream-ep-item.active .sei-play { color: #e8a020; opacity: 1; }
.stream-ep-item.ep-unaired { opacity: .4; cursor: not-allowed; }
.sei-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: .9rem; font-weight: 900; min-width: 24px;
color: rgba(255,255,255,.4);
}
.stream-ep-item.active .sei-num { color: #e8a020; }
.sei-label {
flex: 1; font-size: .75rem; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sei-play { opacity: 0; transition: opacity .13s; flex-shrink: 0; }
.stream-ep-item:hover .sei-play { opacity: .5; }
/* ══ CENTER — player ══════════════════════════════════════════════ */
.stream-center {
display: flex; flex-direction: column;
background: #000;
overflow: hidden;
}
.stream-frame {
flex: 1; position: relative;
background: #000;
min-height: 0;
}
.stream-frame iframe {
width: 100%; height: 100%;
position: absolute; inset: 0;
border: none;
}
/* Controls bar below player */
.stream-controls {
display: flex; align-items: center; justify-content: space-between;
padding: .5rem .85rem; gap: .5rem; flex-wrap: wrap;
background: #080f1f;
border-top: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
}
.sc-left, .sc-right {
display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
/* Control buttons */
.sc-btn {
display: inline-flex; align-items: center; gap: .28rem;
padding: .3rem .65rem; border-radius: 6px;
font-size: .7rem; font-weight: 700; letter-spacing: .5px;
cursor: pointer; transition: all .15s; white-space: nowrap;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.05); color: rgba(255,255,255,.6);
}
.sc-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
/* Toggle buttons */
.sc-toggle { cursor: pointer; user-select: none; }
.sc-toggle input { display: none; }
.sc-track {
display: inline-block; width: 22px; height: 12px; border-radius: 6px;
background: rgba(255,255,255,.12); position: relative; transition: background .2s;
}
.sc-track::after {
content: ''; position: absolute; width: 8px; height: 8px;
border-radius: 50%; background: #fff; top: 2px; left: 2px;
transition: transform .2s;
}
.sc-toggle input:checked ~ .sc-track { background: #e8a020; }
.sc-toggle input:checked ~ .sc-track::after { transform: translateX(10px); }
/* Specific button accents */
.sc-expand:hover { border-color: rgba(59,130,246,.5); color: #60a5fa; }
.sc-nav { border-color: rgba(255,255,255,.08); }
.sc-fav {
border-color: rgba(244,63,94,.3); color: rgba(244,63,94,.7);
padding: .3rem .55rem;
}
.sc-fav:hover, .sc-fav.sc-fav-active {
background: rgba(244,63,94,.15) !important;
border-color: #f43f5e !important; color: #f43f5e !important;
}
.sc-fav.sc-fav-active svg { fill: #f43f5e; stroke: none; }
.sc-wl {
background: rgba(232,160,32,.08) !important;
border-color: rgba(232,160,32,.3) !important;
color: #e8a020 !important;
}
.sc-wl:hover {
background: rgba(232,160,32,.18) !important;
border-color: #e8a020 !important;
}
.sc-close {
border-color: rgba(239,68,68,.25) !important;
color: rgba(239,68,68,.6) !important;
padding: .3rem .55rem;
}
.sc-close:hover { background: rgba(239,68,68,.12) !important; border-color: #ef4444 !important; color: #ef4444 !important; }
.sc-now-playing {
font-size: .68rem; color: rgba(255,255,255,.45); font-style: italic;
max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Server picker inside stream layout */
.stream-server-row {
padding: .5rem .85rem;
background: #080f1f;
border-top: 1px solid rgba(255,255,255,.05);
flex-shrink: 0;
}
/* ══ RIGHT SIDEBAR — related ══════════════════════════════════════ */
.stream-related {
display: flex; flex-direction: column;
border-left: 1px solid rgba(255,255,255,.07);
background: rgba(5,9,18,.9);
overflow: hidden;
}
.stream-related-header {
padding: .75rem 1rem;
font-family: 'Barlow Condensed', sans-serif;
font-size: 1rem; font-weight: 900; letter-spacing: 2px;
text-transform: uppercase; color: rgba(255,255,255,.85);
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
}
.stream-related-list {
flex: 1; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
}
.stream-related-list::-webkit-scrollbar { width: 3px; }
.stream-related-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
/* Related item */
.srel-item {
display: flex; align-items: center; gap: .75rem;
padding: .65rem .9rem;
border-bottom: 1px solid rgba(255,255,255,.04);
text-decoration: none; transition: background .13s;
}
.srel-item:hover { background: rgba(255,255,255,.04); }
.srel-cover {
width: 48px; height: 66px; border-radius: 6px;
overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,.05);
}
.srel-cover img { width: 100%; height: 100%; object-fit: cover; }
.srel-info { flex: 1; min-width: 0; }
.srel-title {
font-size: .8rem; font-weight: 700; color: #fff;
line-height: 1.3; margin-bottom: .3rem;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.srel-meta { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.srel-rel {
font-size: .6rem; font-weight: 800; letter-spacing: .8px;
text-transform: uppercase; padding: .1rem .35rem; border-radius: 4px;
background: rgba(34,197,94,.12); color: #4ade80;
}
.srel-meta span:not(.srel-rel) { font-size: .65rem; color: rgba(255,255,255,.4); }
/* ══ Responsive ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.stream-inner { grid-template-columns: 210px 1fr 240px; }
}
@media (max-width: 900px) {
/* Hide right sidebar, keep left */
.stream-inner { grid-template-columns: 190px 1fr; }
.stream-related { display: none; }
}
@media (max-width: 640px) {
/* Stack: player on top, episode list below */
.stream-inner {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
max-height: none;
}
.stream-sidebar { order: 2; max-height: 220px; border-right: none; border-top: 1px solid rgba(255,255,255,.07); }
.stream-center { order: 1; }
.stream-frame { aspect-ratio: 16/9; }
.stream-frame iframe { position: static; width: 100%; height: 100%; }
.stream-controls { padding: .4rem .6rem; }
.sc-btn { padding: .25rem .5rem; font-size: .65rem; }
}
/* ── inline-player restored ─────────────────────────────────────── */
/* stream-layout was abandoned; inline-player is the active player */
/* ═══════════════════════════════════════════════════════════════
NEXUS v8 — Countdown (user-provided CSS, dynamic image via var)
═══════════════════════════════════════════════════════════════ */
.countdown-section { position: relative; overflow: hidden; }
.cd-inner {
display: flex;
align-items: stretch;
height: 500px;
padding: 0;
position: relative;
overflow: hidden;
}
.cd-left {
flex: 0 0 50%;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.5rem 3rem;
}
/* B&W bleed background — spans 200% to cover right side too */
.cd-left::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 200%;
height: 100%;
background-image:
linear-gradient(rgba(5,9,18,0.5), rgba(5 9 18)),
var(--cd-img);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: grayscale(100%);
z-index: -1;
}
/* Right: 4 color strips of the same image */
.cd-panels {
flex: 0 0 50%;
display: flex;
gap: 15px;
height: 100%;
position: relative;
z-index: 2;
}
/* Each strip: full color slice of the image */
.cd-panels > div {
flex: 1;
background-image: var(--cd-img);
background-size: calc(500% + 60px) 100%;
background-repeat: no-repeat;
}
.cd-strip-1 { background-position: calc(0 * (100% / 4)) center; }
.cd-strip-2 { background-position: calc(1 * (100% / 4)) center; }
.cd-strip-3 { background-position: calc(2 * (100% / 4)) center; }
.cd-strip-4 { background-position: calc(3 * (100% / 4)) center; }
/* Left-edge gradient bridge into the strips */
.cd-panels::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0; width: 50px; z-index: 10;
background: linear-gradient(to right, rgba(5,9,18,.85), transparent);
pointer-events: none;
}
/* ── Countdown timer ── */
.cd-timer {
display: flex;
align-items: flex-end;
gap: .5rem;
margin-bottom: 1.5rem;
padding: 0;
background: none;
border: none;
}
.cd-unit {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,0.54);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
padding: .5rem .75rem;
min-width: 56px;
}
.cd-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: 2rem;
font-weight: 900;
color: #000;
line-height: 1;
min-width: 2ch;
text-align: center;
}
.cd-label {
font-size: .55rem;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(0,0,0,.6);
margin-top: .2rem;
}
.cd-sep {
font-size: 1.8rem;
font-weight: 900;
color: rgba(255,255,255,.6);
margin-bottom: .65rem;
line-height: 1;
}
/* ── Text ── */
.cd-eyebrow {
font-size: .62rem; font-weight: 900; letter-spacing: 4px;
text-transform: uppercase; color: var(--accent2); margin-bottom: .5rem;
}
.cd-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900;
letter-spacing: 1px; text-transform: uppercase;
color: #fff; line-height: 1.05; margin: 0 0 .35rem;
}
.cd-genres {
font-size: .82rem; color: rgba(255,255,255,.65);
margin-bottom: 1.25rem; font-style: italic;
}
.cd-label-coming {
font-size: .9rem; font-weight: 700;
color: rgba(255,255,255,.8); margin-bottom: .75rem;
}
.cd-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .65rem 1.5rem; border-radius: 8px;
background: linear-gradient(135deg, var(--accent2), var(--accent));
color: #fff; font-weight: 800; font-size: .85rem;
text-decoration: none; align-self: flex-start;
transition: transform .18s, box-shadow .18s; margin-top: .25rem;
}
.cd-btn:hover { opacity: .9; }
/* Mobile */
@media (max-width: 768px) {
.cd-inner { height: auto; flex-direction: column; }
.cd-left { flex: none; padding: 1.75rem 1.25rem 1.5rem; }
.cd-left::before { width: 100%; }
.cd-panels { flex: none; height: 160px; gap: 8px; }
.cd-title { font-size: 1.8rem; }
.cd-unit { min-width: 48px; padding: .4rem .55rem; }
.cd-num { font-size: 1.6rem; }
}
/* ═══════════════════════════════════════════════
NEXUS — NEW FEATURES CSS
═══════════════════════════════════════════════ */
/* ── Continue Watching — TV/Movie Tab Switch ── */
.cw-type-switch {
display: flex; align-items: center; gap: .3rem;
background: rgba(255,255,255,.05); border: 1px solid var(--border);
border-radius: 8px; padding: 3px;
}
.cw-type-btn {
padding: .32rem .75rem; border-radius: 6px; font-size: .7rem; font-weight: 700;
letter-spacing: .6px; text-transform: uppercase; cursor: pointer;
border: none; background: transparent; color: var(--muted);
transition: background .2s, color .2s;
}
.cw-type-btn.active {
background: linear-gradient(135deg, var(--accent2), var(--accent));
color: #fff;
}
/* ── Favorite button on card overlay ── */
.card-fav-btn {
position: absolute; top: .5rem; left: .5rem; z-index: 10;
width: 30px; height: 30px; border-radius: 50%;
background: rgba(5,9,18,.75); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.12);
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity .2s, transform .2s, background .2s;
pointer-events: none;
}
.card:hover .card-fav-btn { opacity: 1; pointer-events: auto; }
.card-fav-btn svg { width: 13px; height: 13px; }
.card-fav-btn .fav-on { display: none; }
.card-fav-btn .fav-off { display: block; }
.card-fav-btn.is-fav { background: rgba(220,38,38,.25); border-color: rgba(220,38,38,.5); opacity: 1; pointer-events: auto; }
.card-fav-btn.is-fav .fav-on { display: block; fill: #ef4444; stroke: #ef4444; }
.card-fav-btn.is-fav .fav-off { display: none; }
.card-fav-btn:hover { transform: scale(1.15); background: rgba(220,38,38,.2); }
/* ── Settings — full page sectioned layout ── */
.settings-layout {
display: grid; grid-template-columns: 220px 1fr; gap: 2rem;
max-width: 1100px; margin: 0 auto;
padding: calc(var(--nav-h) + 2rem) 1.5rem 3rem;
min-height: 100vh;
}
.settings-nav { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; }
.settings-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.settings-nav-link {
display: flex; align-items: center; gap: .6rem;
padding: .55rem .9rem; border-radius: 8px; font-size: .82rem;
font-weight: 600; color: var(--muted); cursor: pointer;
border: none; background: transparent; text-align: left; width: 100%;
transition: background .2s, color .2s;
}
.settings-nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.settings-nav-link.active { background: linear-gradient(135deg,rgba(var(--accent2-rgb),.18),rgba(var(--accent-rgb),.18)); color: var(--accent); }
.settings-nav-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.settings-content { min-width: 0; }
.settings-section-panel { display: none; }
.settings-section-panel.active { display: block; }
.settings-section-head { margin-bottom: 1.5rem; }
.settings-section-head h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 .2rem; }
.settings-section-head p { color: var(--muted); font-size: .85rem; margin: 0; }
.settings-divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
@media (max-width: 768px) {
.settings-layout { grid-template-columns: 1fr; }
.settings-nav { position: static; }
.settings-nav-list { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
}
/* ── Rive server label in picker ── */
.srv-opt-name .srv-rive-badge {
display: inline-block; font-size: .55rem; font-weight: 800; letter-spacing: 1px;
text-transform: uppercase; background: linear-gradient(90deg,#ff6b35,#f7c59f);
color: #1a0a00; padding: .1rem .35rem; border-radius: 4px; margin-left: .35rem;
vertical-align: middle;
}
/* ── Admin — Add/Edit server form ── */
.srv-form-wrap {
background: rgba(255,255,255,.03); border: 1px solid var(--border);
border-radius: 14px; padding: 1.5rem; margin-bottom: 2rem;
}
.srv-form-wrap h3 { font-size: .95rem; font-weight: 800; margin: 0 0 1rem; }
.srv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.srv-form-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.srv-form-grid label span { color: var(--muted); }
.srv-form-grid input, .srv-form-grid select, .srv-form-grid textarea {
background: rgba(255,255,255,.05); border: 1px solid var(--border);
border-radius: 7px; color: #fff; padding: .5rem .7rem; font-size: .82rem;
font-family: inherit; transition: border-color .2s;
}
.srv-form-grid input:focus, .srv-form-grid select:focus, .srv-form-grid textarea:focus {
outline: none; border-color: var(--accent);
}
.srv-form-grid .full-width { grid-column: 1/-1; }
.srv-form-actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.srv-admin-row .srv-admin-del { background: rgba(220,38,38,.15); color: #ef4444; border: 1px solid rgba(220,38,38,.3); }
.srv-admin-row .srv-admin-del:hover { background: rgba(220,38,38,.3); }
.srv-admin-row .srv-admin-edit { background: rgba(var(--accent-rgb),.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.25); }
.srv-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.srv-preset-btn { padding: .3rem .7rem; border-radius: 6px; font-size: .72rem; font-weight: 700;
background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--muted);
cursor: pointer; transition: background .2s, color .2s; }
.srv-preset-btn:hover { background: rgba(var(--accent-rgb),.15); color: var(--accent); border-color: rgba(var(--accent-rgb),.3); }
/* ── Detail page fav icon button ── */
.detail-fav-icon {
width: 42px; height: 42px; border-radius: 50%;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
color: var(--muted); display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s;
flex-shrink: 0;
}
.detail-fav-icon:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.5); color: #ef4444; transform: scale(1.1); }
/* ═══════════════════════════════════════════════════════════════
ADMIN PANEL — Mobile Responsive
═══════════════════════════════════════════════════════════════ */
/* Table scroll wrapper — all screen sizes */
.admin-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
}
.admin-table-wrap .admin-table,
.admin-table-wrap .at {
min-width: 480px;
width: max-content;
}
/* Overlay behind drawer */
.admin-mob-overlay {
display: none;
position: fixed; inset: 0; z-index: 199;
background: rgba(0,0,0,.6);
}
.admin-mob-overlay.mob-open { display: block; }
/* Sidebar top row — hidden on desktop */
.admin-sidebar-top { display: none; }
.admin-mob-close { display: none; }
/* Mobile top bar — hidden on desktop */
.admin-mob-topbar { display: none; }
@media (max-width: 768px) {
/* ── Kill horizontal scroll completely ── */
html { overflow-x: hidden; }
body.admin-body {
overflow-x: hidden !important;
display: block !important; /* override flex so sidebar stops being a column */
position: relative;
}
/* ── Sidebar: fixed drawer, slides in from left ── */
.admin-sidebar {
position: fixed !important;
top: 0 !important; left: 0 !important; bottom: 0 !important;
width: 260px !important;
height: 100vh !important;
z-index: 200 !important;
transform: translateX(-100%) !important;
transition: transform .28s ease !important;
overflow-y: auto !important;
flex-direction: column !important;
padding: 0 0 1rem !important;
}
.admin-sidebar.mob-open {
transform: translateX(0) !important;
}
/* Sidebar internal top row with logo + close btn */
.admin-sidebar-top {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 1rem 1rem .75rem;
border-bottom: 1px solid var(--border);
margin-bottom: .5rem;
}
.admin-sidebar-top .admin-logo {
padding: 0 !important;
border-bottom: none !important;
font-size: 1.3rem;
}
.admin-mob-close {
display: flex !important;
align-items: center; justify-content: center;
width: 30px; height: 30px;
background: rgba(255,255,255,.07);
border: 1px solid var(--border);
border-radius: 8px;
color: #fff; cursor: pointer;
font-size: 1rem;
}
/* Hide the standalone .admin-logo that's outside .admin-sidebar-top */
.admin-sidebar > .admin-logo {
display: none !important;
}
/* Nav stays vertical inside drawer */
.admin-nav {
flex-direction: column !important;
overflow-x: visible !important;
padding: 0 .75rem !important;
gap: .25rem !important;
}
.admin-nav a {
white-space: normal;
font-size: .85rem;
padding: .65rem .9rem;
}
.admin-sb-foot {
padding: .75rem .75rem 0;
flex-direction: column !important;
gap: .4rem;
border-top: 1px solid var(--border);
margin-top: auto;
}
/* ── Main: full width ── */
.admin-main {
width: 100% !important;
max-width: 100vw !important;
padding: 0 !important;
overflow-x: hidden !important;
}
/* ── Mobile top bar ── */
.admin-mob-topbar {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: .65rem 1rem;
background: rgba(10,18,32,.98);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 100;
gap: .75rem;
}
.admin-mob-hamburger {
display: flex; flex-direction: column;
gap: 4px; background: none; border: none;
cursor: pointer; padding: .35rem; flex-shrink: 0;
}
.admin-mob-hamburger span {
display: block; width: 20px; height: 2px;
background: #fff; border-radius: 2px;
}
.admin-mob-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1rem; font-weight: 800;
letter-spacing: 1.5px; text-transform: uppercase;
color: #fff; flex: 1; text-align: center;
}
.admin-mob-home {
font-size: .72rem; color: var(--accent);
white-space: nowrap; flex-shrink: 0;
}
/* Hide desktop header */
.admin-top { display: none !important; }
/* ── Prevent ALL overflow ── */
.admin-main,
.admin-main * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* except table wrappers which handle their own scroll */
.admin-table-wrap,
.admin-table-wrap .admin-table,
.admin-table-wrap .at {
max-width: none !important;
}
/* ── Inner content padding + top gap below mobile topbar ── */
.admin-main > * {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* First real content block gets top spacing */
.admin-main > .admin-stats,
.admin-main > .admin-cards,
.admin-main > .admin-cards-split,
.admin-main > .admin-card,
.admin-main > .admin-section,
.admin-main > .admin-header,
.admin-main > .admin-card-block,
.admin-main > .admin-page-head,
.admin-main > form {
margin-top: 1rem !important;
}
.admin-main > .admin-section {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* ── Stats 2 columns ── */
.admin-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: .75rem;
margin-bottom: 1.25rem;
}
/* ── Always single column ── */
.admin-cards-split,
.admin-cards { grid-template-columns: 1fr !important; }
.admin-card { padding: 1rem; }
.admin-section { padding: 1rem 1rem 2rem; max-width: 100% !important; }
/* ── Server rows stack ── */
.srv-admin-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: .5rem; padding: .75rem;
}
.srv-admin-actions {
display: flex !important;
flex-wrap: wrap; gap: .35rem; width: 100%;
}
.srv-admin-actions > * { flex: 1; text-align: center; justify-content: center; }
.srv-form-grid { grid-template-columns: 1fr !important; }
/* ── Forms — inputs never overflow ── */
.admin-form input,
.admin-form select,
.admin-form textarea,
.form-grid-2 input,
.form-grid-2 select {
width: 100% !important;
min-width: 0 !important;
}
.form-grid-2 { grid-template-columns: 1fr !important; }
.admin-form { width: 100% !important; }
/* ── Analytics grids ── */
.ag5, .ag4, .ag3 { grid-template-columns: repeat(2, 1fr) !important; }
.ag2 { grid-template-columns: 1fr !important; }
/* ── SMTP inline form ── */
form[style*="display:flex"][style*="align-items:flex-end"] {
flex-direction: column !important;
align-items: stretch !important;
}
/* ── Cards never overflow screen ── */
.admin-card,
.admin-card-block,
.admin-cards,
.admin-cards-split,
.quick-actions,
.qa {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Color grid in channels form — single column */
.form-grid {
grid-template-columns: 1fr !important;
}
/* Prevent any direct child from overflowing */
.admin-main > div,
.admin-main > section,
.admin-main > form {
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Flash messages */
.flash { margin: 0 0 .75rem !important; }
}
@media (max-width: 480px) {
.ag5, .ag4, .ag3 { grid-template-columns: 1fr !important; }
.admin-stats { grid-template-columns: repeat(2, 1fr) !important; }
}