@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Cinzel:wght@500;700;800&family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;700&family=Orbitron:wght@400;600;800&family=Share+Tech+Mono&family=Teko:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #05040c;
--bg-secondary: #070a1a;
--text-primary: rgba(241, 245, 249, 0.95);
--text-secondary: rgba(148, 163, 184, 0.92);
--neon-cyan: #2ef2ff;
--neon-magenta: #ff3bd4;
--neon-lime: #33ff7a;
--neon-amber: #ffb020;
--accent-primary: var(--neon-cyan);
--accent-secondary: var(--neon-magenta);
--border-color: rgba(var(--accent-rgb), 0.38);
--card-bg: rgba(var(--bg-base-rgb), 0.78);
--shadow: 0 24px 70px rgba(0, 0, 0, 0.82);
--glow-cyan: 0 0 18px rgba(var(--accent-rgb), 0.45);
--glow-magenta: 0 0 18px rgba(var(--accent2-rgb), 0.35);
--glow-strong: 0 0 22px rgba(var(--accent-rgb), 0.5), 0 0 32px rgba(var(--accent2-rgb), 0.35);
--glow-soft: var(--glow-cyan);
--accent-rgb: 46, 242, 255;
--accent2-rgb: 255, 59, 212;
--bg-base-rgb: 8, 10, 24;
--radius-card: 18px;
--radius-bar: 18px;
--container-max: 1100px;
--container-pad: 20px;
--container-outer: calc(var(--container-max) + (var(--container-pad) * 2));
--side-art-w: clamp(220px, 14vw, 460px);
--side-art-left: url("Armgddn_Cyber_Pirate_Skull.png");
--side-art-right: url("Armgddn_Cyber_Pirate_Skull.png");
}
[data-theme="light"] {
--bg-primary: #f8fafc;
--bg-secondary: #ffffff;
--text-primary: #0f172a;
--text-secondary: #475569;
--accent-primary: #2563eb;
--accent-secondary: #7c3aed;
--border-color: rgba(71, 85, 105, 0.25);
--card-bg: rgba(255, 255, 255, 0.98);
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--accent-rgb: 37, 99, 235;
--accent2-rgb: 124, 58, 237;
--bg-base-rgb: 248, 250, 252;
}
@media (prefers-color-scheme: light) {
[data-theme="system"] {
--bg-primary: #f8fafc;
--bg-secondary: #ffffff;
--text-primary: #0f172a;
--text-secondary: #475569;
--accent-primary: #2563eb;
--accent-secondary: #7c3aed;
--border-color: rgba(71, 85, 105, 0.25);
--card-bg: rgba(255, 255, 255, 0.98);
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--accent-rgb: 37, 99, 235;
--accent2-rgb: 124, 58, 237;
--bg-base-rgb: 248, 250, 252;
}
}
[data-theme="blood-moon"] {
--bg-primary: #0a0004;
--bg-secondary: #110008;
--text-primary: rgba(255, 220, 210, 0.95);
--text-secondary: rgba(200, 130, 120, 0.88);
--neon-cyan: #ff3030;
--neon-magenta: #ff7040;
--neon-lime: #ff1050;
--neon-amber: #ff6020;
--accent-primary: #ff2020;
--accent-secondary: #cc0040;
--border-color: rgba(255, 30, 30, 0.40);
--card-bg: rgba(18, 0, 6, 0.82);
--shadow: 0 24px 70px rgba(180, 0, 0, 0.55);
--glow-cyan: 0 0 18px rgba(255, 30, 30, 0.5);
--glow-magenta: 0 0 18px rgba(200, 0, 50, 0.45);
--glow-strong: 0 0 22px rgba(255, 30, 30, 0.6), 0 0 40px rgba(180, 0, 30, 0.4);
--accent-rgb: 255, 30, 30;
--accent2-rgb: 200, 0, 40;
--bg-base-rgb: 18, 0, 6;
--radius-card: 12px 22px 12px 22px;
--radius-bar: 10px;
}
[data-theme="blood-moon"] body {
background:
radial-gradient(ellipse at 50% 0%, rgba(120, 0, 20, 0.30) 0%, rgba(10, 0, 4, 0) 55%),
linear-gradient(180deg, rgba(26, 0, 8, 0.80) 0%, rgba(10, 0, 4, 0.82) 45%, rgba(5, 0, 3, 0.84) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll !important;
background-color: #0a0004 !important;
}
[data-theme="blood-moon"] .header,
[data-theme="blood-moon"] .browser-section {
border-radius: 10px !important;
overflow: hidden;
}
[data-theme="blood-moon"] .header {
background: linear-gradient(135deg, rgba(30, 0, 8, 0.95), rgba(15, 0, 4, 0.98)) !important;
border-color: rgba(255, 30, 30, 0.35) !important;
box-shadow: 0 16px 42px rgba(120, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 100, 100, 0.08) !important;
}
[data-theme="blood-moon"] .header::before { background: radial-gradient(ellipse at 50% -20%, rgba(200, 0, 30, 0.18) 0%, transparent 70%) !important; }
[data-theme="blood-moon"] .toolbar {
background: linear-gradient(180deg, rgba(22, 0, 8, 0.96), rgba(14, 0, 5, 0.88)) !important;
border-color: rgba(255, 30, 30, 0.22) !important;
border-radius: 14px !important;
box-shadow: inset 0 0 0 1px rgba(255, 90, 90, 0.08) !important;
}
[data-theme="blood-moon"] .search-bar,
[data-theme="blood-moon"] .remote-filter-select,
[data-theme="blood-moon"] .category-filter-select {
border-radius: 10px !important;
}
[data-theme="blood-moon"] .search-bar {
background: linear-gradient(180deg, rgba(26, 0, 8, 0.96), rgba(16, 0, 6, 0.92)) !important;
box-shadow: inset 0 0 0 1px rgba(255, 40, 40, 0.10), 0 0 0 1px rgba(255, 30, 30, 0.10) !important;
}
[data-theme="blood-moon"] .search-input,
[data-theme="blood-moon"] select {
background: rgba(22, 0, 8, 0.9) !important;
border-color: rgba(255, 30, 30, 0.3) !important;
color: rgba(255, 200, 190, 0.95) !important;
min-height: 38px;
}
[data-theme="blood-moon"] .search-input::placeholder {
color: rgba(255, 180, 180, 0.58) !important;
letter-spacing: 0.14em;
}
[data-theme="blood-moon"] .remote-card,
[data-theme="blood-moon"] .file-item {
background: linear-gradient(180deg, rgba(28, 0, 8, 0.88), rgba(18, 0, 6, 0.82)) !important;
border-color: rgba(255, 30, 30, 0.25) !important;
box-shadow: 0 12px 28px rgba(200, 0, 20, 0.24), inset 0 0 0 1px rgba(255, 90, 90, 0.05) !important;
}
[data-theme="blood-moon"] .remote-card:hover,
[data-theme="blood-moon"] .file-item:hover {
border-color: rgba(255, 30, 30, 0.6) !important;
box-shadow: 0 16px 34px rgba(200, 0, 20, 0.42) !important;
transform: translateY(-2px) !important;
}
[data-theme="blood-moon"] .header-star-1,
[data-theme="blood-moon"] .header-star-2,
[data-theme="blood-moon"] .header-star-3 { background: radial-gradient(circle, rgba(255,60,60,0.35) 0%, transparent 70%) !important; }
[data-theme="blood-moon"] .back-to-top {
background: rgba(255, 30, 30, 0.15) !important;
border-color: rgba(255, 30, 30, 0.5) !important;
border-radius: 999px !important;
}
[data-theme="blood-moon"] .trending-pill {
background: rgba(255, 30, 30, 0.15) !important;
border-color: rgba(255, 30, 30, 0.35) !important;
border-radius: 22px !important;
}
[data-theme="blood-moon"] .theme-toggle,
[data-theme="blood-moon"] .animation-toggle,
[data-theme="blood-moon"] .theme-dropdown-btn {
border-radius: 999px !important;
text-shadow: 0 0 8px rgba(255, 80, 80, 0.45);
}
[data-theme="blood-moon"] .theme-dropdown-menu {
border-radius: 12px !important;
box-shadow: 0 18px 42px rgba(120, 0, 0, 0.4) !important;
}
[data-theme="blood-moon"] .header h1,
[data-theme="blood-moon"] .theme-toggle,
[data-theme="blood-moon"] .animation-toggle,
[data-theme="blood-moon"] .theme-dropdown-btn,
[data-theme="blood-moon"] .back-to-top,
[data-theme="blood-moon"] .remote-filter-select,
[data-theme="blood-moon"] .category-filter-select {
font-family: 'Cinzel', Georgia, serif !important;
letter-spacing: 0.14em;
text-transform: uppercase;
}
[data-theme="blood-moon"] .subtitle,
[data-theme="blood-moon"] .file-meta,
[data-theme="blood-moon"] .remote-description {
font-family: 'Cormorant Garamond', Georgia, serif !important;
letter-spacing: 0.04em;
}
[data-theme="blood-moon"] .remote-card,
[data-theme="blood-moon"] .file-item {
border-radius: 12px 22px 12px 22px !important;
padding-top: 14px;
}
[data-theme="blood-moon"] .search-bar {
border-radius: 4px 18px 4px 18px !important;
}
[data-theme="blood-moon"] .theme-dropdown-menu {
background: rgba(18, 0, 6, 0.97) !important;
border-color: rgba(255, 30, 30, 0.40) !important;
}
[data-theme="blood-moon"] .theme-dropdown-item:hover {
background: rgba(255, 30, 30, 0.10) !important;
border-color: rgba(255, 30, 30, 0.30) !important;
}
[data-theme="blood-moon"] .theme-dropdown-item.active {
background: rgba(255, 30, 30, 0.14) !important;
border-color: rgba(255, 30, 30, 0.45) !important;
}
[data-theme="blood-moon"] .alpha-jump {
background: rgba(18, 0, 6, 0.88) !important;
border-color: rgba(255, 30, 30, 0.22) !important;
}
[data-theme="blood-moon"] .alpha-jump-btn {
border-color: rgba(255, 30, 30, 0.18) !important;
}
[data-theme="blood-moon"] .alpha-jump-btn:hover {
background: rgba(255, 30, 30, 0.14) !important;
border-color: rgba(255, 30, 30, 0.42) !important;
}
[data-theme="blood-moon"] .alpha-jump-btn.disabled:hover {
background: transparent !important;
border-color: rgba(255, 30, 30, 0.12) !important;
}
[data-theme="forest-ghost"] {
--bg-primary: #020a04;
--bg-secondary: #041208;
--text-primary: rgba(200, 240, 210, 0.95);
--text-secondary: rgba(120, 180, 130, 0.88);
--neon-cyan: #00ff88;
--neon-magenta: #40ffaa;
--neon-lime: #88ff44;
--neon-amber: #aaffcc;
--accent-primary: #00e870;
--accent-secondary: #00aa55;
--border-color: rgba(0, 220, 100, 0.38);
--card-bg: rgba(4, 14, 8, 0.82);
--shadow: 0 24px 70px rgba(0, 80, 30, 0.55);
--glow-cyan: 0 0 18px rgba(0, 220, 100, 0.45);
--glow-magenta: 0 0 18px rgba(0, 160, 80, 0.35);
--glow-strong: 0 0 22px rgba(0, 220, 100, 0.5), 0 0 38px rgba(0, 160, 70, 0.35);
--accent-rgb: 0, 220, 100;
--accent2-rgb: 0, 180, 80;
--bg-base-rgb: 4, 14, 8;
--radius-card: 22px 10px 22px 10px;
--radius-bar: 22px 10px 22px 10px;
}
[data-theme="forest-ghost"] body {
background:
radial-gradient(ellipse at 50% 0%, rgba(0, 180, 80, 0.18) 0%, rgba(2, 10, 4, 0) 55%),
linear-gradient(180deg, rgba(4, 20, 8, 0.80) 0%, rgba(2, 10, 4, 0.82) 45%, rgba(1, 6, 3, 0.84) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll !important;
background-color: #020a04 !important;
}
[data-theme="forest-ghost"] .header,
[data-theme="forest-ghost"] .browser-section,
[data-theme="forest-ghost"] .toolbar {
border-radius: 18px !important;
backdrop-filter: blur(12px);
}
[data-theme="forest-ghost"] .header {
background: linear-gradient(135deg, rgba(4, 16, 8, 0.88), rgba(2, 10, 4, 0.95)) !important;
border-color: rgba(0, 200, 90, 0.32) !important;
box-shadow: 0 18px 44px rgba(0, 65, 30, 0.34), inset 0 0 0 1px rgba(120, 255, 170, 0.05) !important;
}
[data-theme="forest-ghost"] .header::before { background: radial-gradient(ellipse at 50% -20%, rgba(0, 180, 80, 0.15) 0%, transparent 70%) !important; }
[data-theme="forest-ghost"] .toolbar {
background: linear-gradient(180deg, rgba(5, 18, 9, 0.92), rgba(3, 12, 6, 0.88)) !important;
border-color: rgba(0, 200, 90, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(130, 255, 170, 0.04) !important;
}
[data-theme="forest-ghost"] .search-bar {
background: linear-gradient(180deg, rgba(5, 20, 10, 0.94), rgba(3, 14, 7, 0.90)) !important;
}
[data-theme="forest-ghost"] .search-input,
[data-theme="forest-ghost"] select {
background: rgba(4, 16, 8, 0.9) !important;
border-color: rgba(0, 200, 90, 0.28) !important;
color: rgba(190, 240, 200, 0.95) !important;
min-height: 40px;
border-radius: 14px !important;
}
[data-theme="forest-ghost"] .search-input::placeholder {
color: rgba(170, 220, 180, 0.55) !important;
letter-spacing: 0.08em;
}
[data-theme="forest-ghost"] .remote-card,
[data-theme="forest-ghost"] .file-item {
background: linear-gradient(180deg, rgba(8, 22, 13, 0.88), rgba(4, 14, 8, 0.82)) !important;
border-color: rgba(0, 200, 90, 0.22) !important;
box-shadow: 0 14px 30px rgba(0, 70, 30, 0.22), inset 0 0 0 1px rgba(150, 255, 190, 0.04) !important;
}
[data-theme="forest-ghost"] .remote-card:hover,
[data-theme="forest-ghost"] .file-item:hover {
border-color: rgba(0, 230, 100, 0.6) !important;
box-shadow: 0 18px 34px rgba(0, 180, 70, 0.35) !important;
transform: translateY(-2px) scale(1.005) !important;
}
[data-theme="forest-ghost"] .header-star-1,
[data-theme="forest-ghost"] .header-star-2,
[data-theme="forest-ghost"] .header-star-3 { background: radial-gradient(circle, rgba(0,220,90,0.3) 0%, transparent 70%) !important; }
[data-theme="forest-ghost"] .back-to-top {
border-radius: 999px !important;
}
[data-theme="forest-ghost"] .trending-pill {
border-radius: 22px !important;
}
[data-theme="forest-ghost"] .back-to-top { background: rgba(0, 200, 90, 0.12) !important; border-color: rgba(0, 200, 90, 0.45) !important; }
[data-theme="forest-ghost"] .trending-pill { background: rgba(0, 200, 90, 0.12) !important; border-color: rgba(0, 200, 90, 0.32) !important; }
[data-theme="forest-ghost"] .theme-toggle,
[data-theme="forest-ghost"] .animation-toggle,
[data-theme="forest-ghost"] .theme-dropdown-btn {
border-radius: 999px !important;
box-shadow: 0 8px 22px rgba(0, 70, 30, 0.2) !important;
}
[data-theme="forest-ghost"] .header h1,
[data-theme="forest-ghost"] .theme-toggle,
[data-theme="forest-ghost"] .animation-toggle,
[data-theme="forest-ghost"] .theme-dropdown-btn,
[data-theme="forest-ghost"] .back-to-top {
font-family: 'Cormorant Garamond', Georgia, serif !important;
letter-spacing: 0.10em;
text-transform: uppercase;
}
[data-theme="forest-ghost"] .subtitle,
[data-theme="forest-ghost"] .file-meta,
[data-theme="forest-ghost"] .remote-description {
font-family: 'IBM Plex Mono', monospace !important;
letter-spacing: 0.02em;
}
[data-theme="forest-ghost"] .header,
[data-theme="forest-ghost"] .toolbar {
border-radius: 22px 10px 22px 10px !important;
}
[data-theme="forest-ghost"] .remote-card,
[data-theme="forest-ghost"] .file-item {
border-radius: 22px 10px 22px 10px !important;
}
[data-theme="forest-ghost"] .search-bar {
border-radius: 999px 18px 999px 18px !important;
}
[data-theme="forest-ghost"] .theme-dropdown-menu {
background: rgba(4, 14, 8, 0.97) !important;
border-color: rgba(0, 200, 90, 0.40) !important;
}
[data-theme="forest-ghost"] .theme-dropdown-item:hover {
background: rgba(0, 200, 90, 0.10) !important;
border-color: rgba(0, 200, 90, 0.30) !important;
}
[data-theme="forest-ghost"] .theme-dropdown-item.active {
background: rgba(0, 200, 90, 0.14) !important;
border-color: rgba(0, 200, 90, 0.45) !important;
}
[data-theme="forest-ghost"] .alpha-jump {
background: rgba(4, 14, 8, 0.88) !important;
border-color: rgba(0, 200, 90, 0.22) !important;
}
[data-theme="forest-ghost"] .alpha-jump-btn {
border-color: rgba(0, 200, 90, 0.18) !important;
}
[data-theme="forest-ghost"] .alpha-jump-btn:hover {
background: rgba(0, 200, 90, 0.14) !important;
border-color: rgba(0, 200, 90, 0.42) !important;
}
[data-theme="forest-ghost"] .alpha-jump-btn.disabled:hover {
background: transparent !important;
border-color: rgba(0, 200, 90, 0.12) !important;
}
[data-theme="vaporwave"] {
--bg-primary: #0d0016;
--bg-secondary: #12001e;
--text-primary: rgba(240, 200, 255, 0.95);
--text-secondary: rgba(180, 140, 210, 0.88);
--neon-cyan: #ff71ce;
--neon-magenta: #b967ff;
--neon-lime: #01cdfe;
--neon-amber: #fffb96;
--accent-primary: #ff71ce;
--accent-secondary: #b967ff;
--border-color: rgba(185, 103, 255, 0.40);
--card-bg: rgba(16, 0, 26, 0.82);
--shadow: 0 24px 70px rgba(120, 0, 160, 0.50);
--glow-cyan: 0 0 18px rgba(255, 113, 206, 0.45);
--glow-magenta: 0 0 18px rgba(185, 103, 255, 0.40);
--glow-strong: 0 0 22px rgba(255, 113, 206, 0.55), 0 0 40px rgba(185, 103, 255, 0.40);
--accent-rgb: 185, 103, 255;
--accent2-rgb: 255, 113, 206;
--bg-base-rgb: 16, 0, 26;
--radius-card: 24px 24px 10px 24px;
--radius-bar: 20px;
}
[data-theme="vaporwave"] body {
background:
linear-gradient(180deg, rgba(255, 113, 206, 0.10) 0%, rgba(13, 0, 22, 0) 28%),
radial-gradient(ellipse at 50% 0%, rgba(26, 0, 48, 0.82) 0%, rgba(13, 0, 22, 0.84) 60%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll !important;
background-color: #0d0016 !important;
}
[data-theme="vaporwave"] .header,
[data-theme="vaporwave"] .toolbar,
[data-theme="vaporwave"] .browser-section {
border-radius: 20px !important;
}
[data-theme="vaporwave"] .header {
background: linear-gradient(135deg, rgba(24, 0, 40, 0.95), rgba(12, 0, 22, 0.98)) !important;
border-color: rgba(185, 103, 255, 0.35) !important;
box-shadow: 0 18px 44px rgba(90, 0, 120, 0.35), inset 0 0 0 1px rgba(255, 160, 240, 0.05) !important;
}
[data-theme="vaporwave"] .header::before { background: radial-gradient(ellipse at 50% -20%, rgba(185, 103, 255, 0.18) 0%, transparent 70%) !important; }
[data-theme="vaporwave"] .toolbar {
background: linear-gradient(180deg, rgba(20, 0, 34, 0.94), rgba(12, 0, 20, 0.88)) !important;
border-color: rgba(185, 103, 255, 0.20) !important;
box-shadow: inset 0 0 0 1px rgba(255, 160, 240, 0.04) !important;
}
[data-theme="vaporwave"] .search-bar {
background: linear-gradient(90deg, rgba(21, 0, 34, 0.95), rgba(14, 0, 26, 0.92)) !important;
}
[data-theme="vaporwave"] .search-input,
[data-theme="vaporwave"] select {
background: rgba(18, 0, 30, 0.9) !important;
border-color: rgba(185, 103, 255, 0.30) !important;
color: rgba(240, 200, 255, 0.95) !important;
min-height: 40px;
}
[data-theme="vaporwave"] .search-input::placeholder {
color: rgba(255, 175, 235, 0.58) !important;
letter-spacing: 0.12em;
}
[data-theme="vaporwave"] .remote-card,
[data-theme="vaporwave"] .file-item {
background: linear-gradient(135deg, rgba(22, 0, 36, 0.86), rgba(16, 0, 26, 0.82)) !important;
border-color: rgba(185, 103, 255, 0.24) !important;
box-shadow: 0 14px 32px rgba(80, 0, 120, 0.24), inset 0 0 0 1px rgba(255, 160, 240, 0.04) !important;
}
[data-theme="vaporwave"] .remote-card:hover,
[data-theme="vaporwave"] .file-item:hover {
border-color: rgba(255, 113, 206, 0.65) !important;
box-shadow: 0 18px 34px rgba(180, 80, 255, 0.38) !important;
transform: translateY(-2px) !important;
}
[data-theme="vaporwave"] .header-star-1,
[data-theme="vaporwave"] .header-star-2,
[data-theme="vaporwave"] .header-star-3 { background: radial-gradient(circle, rgba(255,113,206,0.32) 0%, transparent 70%) !important; }
[data-theme="vaporwave"] .back-to-top {
border-radius: 999px !important;
}
[data-theme="vaporwave"] .trending-pill {
border-radius: 22px !important;
}
[data-theme="vaporwave"] .back-to-top { background: rgba(185, 103, 255, 0.14) !important; border-color: rgba(185, 103, 255, 0.50) !important; }
[data-theme="vaporwave"] .trending-pill { background: rgba(185, 103, 255, 0.13) !important; border-color: rgba(185, 103, 255, 0.35) !important; }
[data-theme="vaporwave"] .theme-toggle,
[data-theme="vaporwave"] .animation-toggle,
[data-theme="vaporwave"] .theme-dropdown-btn {
border-radius: 18px !important;
letter-spacing: 0.12em;
}
[data-theme="vaporwave"] .header h1,
[data-theme="vaporwave"] .theme-toggle,
[data-theme="vaporwave"] .animation-toggle,
[data-theme="vaporwave"] .theme-dropdown-btn,
[data-theme="vaporwave"] .back-to-top {
font-family: 'Audiowide', sans-serif !important;
text-transform: uppercase;
letter-spacing: 0.16em;
}
[data-theme="vaporwave"] .subtitle,
[data-theme="vaporwave"] .remote-description,
[data-theme="vaporwave"] .file-meta {
font-family: 'IBM Plex Mono', monospace !important;
letter-spacing: 0.06em;
}
[data-theme="vaporwave"] .remote-card,
[data-theme="vaporwave"] .file-item {
border-radius: 24px 24px 10px 24px !important;
}
[data-theme="vaporwave"] .search-bar {
border-radius: 999px !important;
box-shadow: inset 0 0 0 1px rgba(255, 160, 240, 0.08), 0 0 18px rgba(185, 103, 255, 0.10) !important;
}
[data-theme="vaporwave"] .theme-dropdown-menu {
background: rgba(16, 0, 26, 0.97) !important;
border-color: rgba(185, 103, 255, 0.40) !important;
border-radius: 8px 24px 8px 24px !important;
}
[data-theme="vaporwave"] .theme-dropdown-item:hover {
background: rgba(185, 103, 255, 0.10) !important;
border-color: rgba(185, 103, 255, 0.30) !important;
}
[data-theme="vaporwave"] .theme-dropdown-item.active {
background: rgba(185, 103, 255, 0.15) !important;
border-color: rgba(255, 113, 206, 0.50) !important;
}
[data-theme="vaporwave"] .alpha-jump {
background: rgba(16, 0, 26, 0.88) !important;
border-color: rgba(185, 103, 255, 0.22) !important;
}
[data-theme="vaporwave"] .alpha-jump-btn {
border-color: rgba(185, 103, 255, 0.18) !important;
}
[data-theme="vaporwave"] .alpha-jump-btn:hover {
background: rgba(185, 103, 255, 0.14) !important;
border-color: rgba(255, 113, 206, 0.45) !important;
}
[data-theme="vaporwave"] .alpha-jump-btn.disabled:hover {
background: transparent !important;
border-color: rgba(185, 103, 255, 0.12) !important;
}
[data-theme="solar-flare"] {
--bg-primary: #080400;
--bg-secondary: #100800;
--text-primary: rgba(255, 240, 200, 0.95);
--text-secondary: rgba(200, 160, 80, 0.88);
--neon-cyan: #ffaa00;
--neon-magenta: #ff6600;
--neon-lime: #ffdd00;
--neon-amber: #ff8800;
--accent-primary: #ffaa00;
--accent-secondary: #ff6600;
--border-color: rgba(255, 160, 0, 0.40);
--card-bg: rgba(14, 8, 0, 0.82);
--shadow: 0 24px 70px rgba(180, 80, 0, 0.50);
--glow-cyan: 0 0 18px rgba(255, 160, 0, 0.48);
--glow-magenta: 0 0 18px rgba(255, 100, 0, 0.38);
--glow-strong: 0 0 22px rgba(255, 160, 0, 0.55), 0 0 40px rgba(255, 80, 0, 0.38);
--accent-rgb: 255, 150, 0;
--accent2-rgb: 255, 100, 0;
--bg-base-rgb: 14, 8, 0;
--radius-card: 6px 18px 6px 18px;
--radius-bar: 6px 18px 6px 18px;
}
[data-theme="solar-flare"] body {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 150, 0, 0.20) 0%, rgba(8, 4, 0, 0) 60%),
linear-gradient(180deg, rgba(24, 12, 0, 0.82) 0%, rgba(8, 4, 0, 0.84) 56%, rgba(4, 2, 0, 0.86) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll !important;
background-color: #080400 !important;
}
[data-theme="solar-flare"] .header,
[data-theme="solar-flare"] .toolbar,
[data-theme="solar-flare"] .browser-section {
border-radius: 8px !important;
}
[data-theme="solar-flare"] .header {
background: linear-gradient(135deg, rgba(28, 14, 0, 0.96), rgba(10, 5, 0, 0.98)) !important;
border-color: rgba(255, 150, 0, 0.32) !important;
box-shadow: 0 18px 44px rgba(130, 60, 0, 0.32), inset 0 0 0 1px rgba(255, 200, 120, 0.05) !important;
}
[data-theme="solar-flare"] .header::before { background: radial-gradient(ellipse at 50% -20%, rgba(255, 140, 0, 0.16) 0%, transparent 70%) !important; }
[data-theme="solar-flare"] .toolbar {
background: linear-gradient(180deg, rgba(18, 10, 0, 0.94), rgba(10, 6, 0, 0.88)) !important;
border-color: rgba(255, 150, 0, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.04) !important;
}
[data-theme="solar-flare"] .search-bar {
background: linear-gradient(90deg, rgba(24, 14, 0, 0.95), rgba(14, 8, 0, 0.92)) !important;
}
[data-theme="solar-flare"] .search-input,
[data-theme="solar-flare"] select {
background: rgba(16, 9, 0, 0.9) !important;
border-color: rgba(255, 150, 0, 0.28) !important;
color: rgba(255, 240, 190, 0.95) !important;
min-height: 40px;
}
[data-theme="solar-flare"] .search-input::placeholder {
color: rgba(255, 220, 150, 0.60) !important;
letter-spacing: 0.08em;
}
[data-theme="solar-flare"] .remote-card,
[data-theme="solar-flare"] .file-item {
background: linear-gradient(180deg, rgba(24, 14, 0, 0.88), rgba(14, 8, 0, 0.82)) !important;
border-color: rgba(255, 150, 0, 0.22) !important;
box-shadow: 0 14px 28px rgba(150, 70, 0, 0.24), inset 0 0 0 1px rgba(255, 210, 120, 0.04) !important;
}
[data-theme="solar-flare"] .remote-card:hover,
[data-theme="solar-flare"] .file-item:hover {
border-color: rgba(255, 170, 0, 0.65) !important;
box-shadow: 0 18px 34px rgba(220, 100, 0, 0.38) !important;
transform: translateY(-2px) !important;
}
[data-theme="solar-flare"] .header-star-1,
[data-theme="solar-flare"] .header-star-2,
[data-theme="solar-flare"] .header-star-3 { background: radial-gradient(circle, rgba(255,160,0,0.32) 0%, transparent 70%) !important; }
[data-theme="solar-flare"] .back-to-top,
[data-theme="solar-flare"] .trending-pill {
border-radius: 10px !important;
}
[data-theme="solar-flare"] .back-to-top { background: rgba(255, 150, 0, 0.12) !important; border-color: rgba(255, 150, 0, 0.48) !important; }
[data-theme="solar-flare"] .trending-pill { background: rgba(255, 150, 0, 0.12) !important; border-color: rgba(255, 150, 0, 0.32) !important; }
[data-theme="solar-flare"] .theme-toggle,
[data-theme="solar-flare"] .animation-toggle,
[data-theme="solar-flare"] .theme-dropdown-btn {
border-radius: 10px !important;
box-shadow: 0 10px 20px rgba(160, 70, 0, 0.18) !important;
}
[data-theme="solar-flare"] .header h1,
[data-theme="solar-flare"] .theme-toggle,
[data-theme="solar-flare"] .animation-toggle,
[data-theme="solar-flare"] .theme-dropdown-btn,
[data-theme="solar-flare"] .back-to-top {
font-family: 'Teko', sans-serif !important;
text-transform: uppercase;
letter-spacing: 0.18em;
}
[data-theme="solar-flare"] .subtitle,
[data-theme="solar-flare"] .remote-description,
[data-theme="solar-flare"] .file-meta {
font-family: 'IBM Plex Mono', monospace !important;
letter-spacing: 0.03em;
}
[data-theme="solar-flare"] .header,
[data-theme="solar-flare"] .toolbar,
[data-theme="solar-flare"] .search-bar,
[data-theme="solar-flare"] .remote-card,
[data-theme="solar-flare"] .file-item {
border-radius: 6px 18px 6px 18px !important;
}
[data-theme="solar-flare"] .theme-dropdown-menu {
background: rgba(14, 8, 0, 0.97) !important;
border-color: rgba(255, 150, 0, 0.40) !important;
border-radius: 6px 18px 6px 18px !important;
}
[data-theme="solar-flare"] .theme-dropdown-item:hover {
background: rgba(255, 150, 0, 0.10) !important;
border-color: rgba(255, 150, 0, 0.30) !important;
}
[data-theme="solar-flare"] .theme-dropdown-item.active {
background: rgba(255, 150, 0, 0.14) !important;
border-color: rgba(255, 180, 0, 0.48) !important;
}
[data-theme="solar-flare"] .alpha-jump {
background: rgba(14, 8, 0, 0.88) !important;
border-color: rgba(255, 150, 0, 0.22) !important;
}
[data-theme="solar-flare"] .alpha-jump-btn {
border-color: rgba(255, 150, 0, 0.18) !important;
}
[data-theme="solar-flare"] .alpha-jump-btn:hover {
background: rgba(255, 150, 0, 0.14) !important;
border-color: rgba(255, 170, 0, 0.45) !important;
}
[data-theme="solar-flare"] .alpha-jump-btn.disabled:hover {
background: transparent !important;
border-color: rgba(255, 150, 0, 0.12) !important;
}
[data-theme="void"] {
--bg-primary: #030303;
--bg-secondary: #080808;
--text-primary: rgba(255, 255, 255, 0.95);
--text-secondary: rgba(160, 160, 160, 0.85);
--neon-cyan: #ffffff;
--neon-magenta: #aaaaaa;
--neon-lime: #e0e0e0;
--neon-amber: #cccccc;
--accent-primary: #ffffff;
--accent-secondary: #888888;
--border-color: rgba(255, 255, 255, 0.22);
--card-bg: rgba(10, 10, 10, 0.88);
--shadow: 0 24px 70px rgba(0, 0, 0, 0.90);
--glow-cyan: 0 0 14px rgba(255, 255, 255, 0.28);
--glow-magenta: 0 0 14px rgba(200, 200, 200, 0.20);
--glow-strong: 0 0 18px rgba(255, 255, 255, 0.32), 0 0 32px rgba(180, 180, 180, 0.18);
--accent-rgb: 255, 255, 255;
--accent2-rgb: 160, 160, 160;
--bg-base-rgb: 8, 8, 8;
--radius-card: 0;
--radius-bar: 0;
}
[data-theme="void"] body {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(3, 3, 3, 0) 30%),
linear-gradient(180deg, rgba(3, 3, 3, 0.86) 0%, rgba(3, 3, 3, 0.88) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll !important;
background-color: #030303 !important;
}
[data-theme="void"] .header,
[data-theme="void"] .toolbar,
[data-theme="void"] .browser-section {
border-radius: 4px !important;
}
[data-theme="void"] .header {
background: linear-gradient(135deg, rgba(12, 12, 12, 0.97), rgba(6, 6, 6, 0.99)) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}
[data-theme="void"] .header::before { background: radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, 0.05) 0%, transparent 70%) !important; }
[data-theme="void"] .toolbar {
background: rgba(7, 7, 7, 0.92) !important;
border-color: rgba(255, 255, 255, 0.09) !important;
box-shadow: none !important;
}
[data-theme="void"] .search-bar {
background: rgba(8, 8, 8, 0.92) !important;
}
[data-theme="void"] .search-input,
[data-theme="void"] select {
background: rgba(12, 12, 12, 0.94) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
color: rgba(255, 255, 255, 0.92) !important;
border-radius: 4px !important;
min-height: 38px;
}
[data-theme="void"] .search-input::placeholder {
color: rgba(255, 255, 255, 0.38) !important;
letter-spacing: 0.04em;
}
[data-theme="void"] .remote-card,
[data-theme="void"] .file-item {
background: rgba(10, 10, 10, 0.88) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
box-shadow: none !important;
}
[data-theme="void"] .remote-card:hover,
[data-theme="void"] .file-item:hover {
border-color: rgba(255, 255, 255, 0.40) !important;
box-shadow: 0 8px 28px rgba(255, 255, 255, 0.08) !important;
transform: translateY(-1px) !important;
}
[data-theme="void"] .header-star-1,
[data-theme="void"] .header-star-2,
[data-theme="void"] .header-star-3 { background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%) !important; }
[data-theme="void"] .back-to-top,
[data-theme="void"] .trending-pill {
border-radius: 4px !important;
}
[data-theme="void"] .back-to-top { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.28) !important; }
[data-theme="void"] .trending-pill { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.18) !important; }
[data-theme="void"] .theme-toggle,
[data-theme="void"] .animation-toggle,
[data-theme="void"] .theme-dropdown-btn {
border-radius: 4px !important;
box-shadow: none !important;
}
[data-theme="void"] .header h1,
[data-theme="void"] .theme-toggle,
[data-theme="void"] .animation-toggle,
[data-theme="void"] .theme-dropdown-btn,
[data-theme="void"] .back-to-top,
[data-theme="void"] .remote-filter-select,
[data-theme="void"] .category-filter-select {
font-family: 'IBM Plex Mono', monospace !important;
letter-spacing: 0.02em;
text-transform: uppercase;
}
[data-theme="void"] .subtitle,
[data-theme="void"] .file-meta,
[data-theme="void"] .remote-description {
font-family: 'IBM Plex Mono', monospace !important;
letter-spacing: 0.01em;
}
[data-theme="void"] .header,
[data-theme="void"] .toolbar,
[data-theme="void"] .search-bar,
[data-theme="void"] .remote-card,
[data-theme="void"] .file-item,
[data-theme="void"] .theme-dropdown-menu {
border-radius: 0 !important;
}
[data-theme="void"] .theme-dropdown-menu {
background: rgba(8, 8, 8, 0.98) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
}
[data-theme="void"] .theme-dropdown-item:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
[data-theme="void"] .theme-dropdown-item.active {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
}
[data-theme="void"] .alpha-jump {
background: rgba(8, 8, 8, 0.92) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
[data-theme="void"] .alpha-jump-btn {
border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="void"] .alpha-jump-btn:hover {
background: rgba(255, 255, 255, 0.10) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
}
[data-theme="void"] .alpha-jump-btn.disabled:hover {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="8bit"] {
--bg-primary: #0a0f0a;
--bg-secondary: #0f160f;
--text-primary: #9bbc0f;
--text-secondary: #8bac0f;
--neon-cyan: #9bbc0f;
--neon-magenta: #306230;
--neon-lime: #0f380f;
--neon-amber: #8bac0f;
--accent-primary: #9bbc0f;
--accent-secondary: #306230;
--border-color: rgba(155, 188, 15, 0.50);
--card-bg: rgba(15, 22, 15, 0.92);
--shadow: 0 0 0 3px #306230, 0 0 0 6px #0f380f;
--glow-cyan: 0 0 10px rgba(155, 188, 15, 0.7);
--glow-magenta: 0 0 10px rgba(48, 98, 48, 0.6);
--glow-strong: 0 0 0 2px #9bbc0f, 0 0 16px rgba(155, 188, 15, 0.5);
--accent-rgb: 155, 188, 15;
--accent2-rgb: 48, 98, 48;
--bg-base-rgb: 10, 15, 10;
}
[data-theme="8bit"] * {
font-family: 'Press Start 2P', monospace !important;
letter-spacing: 0 !important;
image-rendering: pixelated;
}
[data-theme="8bit"] body {
background:
linear-gradient(180deg, rgba(10, 15, 10, 0.88) 0%, rgba(10, 15, 10, 0.90) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll !important;
background-color: #0a0f0a !important;
image-rendering: pixelated;
}
[data-theme="8bit"] .header {
background: #0f160f !important;
border: none !important;
box-shadow: inset 0 0 0 3px #9bbc0f, inset 0 0 0 6px #306230, inset 0 0 0 9px #0f380f !important;
border-radius: 0 !important;
}
[data-theme="8bit"] .header::before { display: none !important; }
[data-theme="8bit"] .header-stars { display: none !important; }
[data-theme="8bit"] .remote-card,
[data-theme="8bit"] .file-item {
background: #0f160f !important;
border: none !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 #306230, 6px 6px 0 #0f380f !important;
}
[data-theme="8bit"] .remote-card:hover,
[data-theme="8bit"] .file-item:hover {
background: #162016 !important;
box-shadow: 3px 3px 0 #9bbc0f, 6px 6px 0 #306230 !important;
transform: translate(-2px, -2px) !important;
}
[data-theme="8bit"] .toolbar {
background: #0f160f !important;
border: none !important;
border-radius: 0 !important;
box-shadow: 0 3px 0 #306230 !important;
}
[data-theme="8bit"] .search-input,
[data-theme="8bit"] select {
background: #0a0f0a !important;
border: none !important;
border-radius: 0 !important;
color: #9bbc0f !important;
box-shadow: inset 0 0 0 2px #306230 !important;
font-size: 8px !important;
}
[data-theme="8bit"] .search-bar {
height: 44px !important;
padding: 7px 12px !important;
}
[data-theme="8bit"] .search-input {
font-size: 9px !important;
line-height: 1.35 !important;
min-height: 20px;
}
[data-theme="8bit"] .search-input::placeholder {
font-size: 9px !important;
line-height: 1.35 !important;
}
[data-theme="8bit"] .search-input:focus,
[data-theme="8bit"] select:focus {
box-shadow: inset 0 0 0 2px #9bbc0f !important;
outline: none !important;
}
[data-theme="8bit"] .action-btn {
background: #0f160f !important;
border: none !important;
border-radius: 0 !important;
color: #9bbc0f !important;
box-shadow: 3px 3px 0 #306230 !important;
font-size: 7px !important;
}
[data-theme="8bit"] .action-btn:hover,
[data-theme="8bit"] .action-btn.active {
background: #9bbc0f !important;
color: #0a0f0a !important;
box-shadow: 3px 3px 0 #0f380f !important;
transform: translate(-1px, -1px) !important;
}
[data-theme="8bit"] .back-to-top {
background: #0f160f !important;
border: none !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 #306230 !important;
color: #9bbc0f !important;
}
[data-theme="8bit"] .back-to-top:hover {
background: #9bbc0f !important;
color: #0a0f0a !important;
}
[data-theme="8bit"] .trending-pill {
background: #0f160f !important;
border: none !important;
border-radius: 0 !important;
box-shadow: 2px 2px 0 #306230 !important;
color: #9bbc0f !important;
font-size: 7px !important;
}
[data-theme="8bit"] .breadcrumb-item {
border-radius: 0 !important;
}
[data-theme="8bit"] .animation-toggle,
[data-theme="8bit"] .theme-toggle,
[data-theme="8bit"] .theme-dropdown-btn {
background: #0f160f !important;
border: none !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 #306230 !important;
color: #9bbc0f !important;
font-size: 10px !important;
}
[data-theme="8bit"] .header-top-actions {
top: 10px;
right: 10px;
gap: 6px 6px;
transform: scale(0.94);
transform-origin: top right;
}
[data-theme="8bit"] .header-top-actions .animation-toggle,
[data-theme="8bit"] .header-top-actions .theme-toggle,
[data-theme="8bit"] .header-top-actions .theme-dropdown-btn {
padding: 4px 8px !important;
font-size: 10px !important;
line-height: 1.2 !important;
}
[data-theme="8bit"] .theme-dropdown-btn-text {
font-size: 10px !important;
}
[data-theme="8bit"] .animation-toggle:hover,
[data-theme="8bit"] .theme-toggle:hover,
[data-theme="8bit"] .theme-dropdown-btn:hover {
background: #9bbc0f !important;
color: #0a0f0a !important;
box-shadow: 3px 3px 0 #0f380f !important;
}
[data-theme="8bit"] .theme-dropdown-menu {
background: #0a0f0a !important;
border: none !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 #306230, 6px 6px 0 #0f380f !important;
}
[data-theme="8bit"] .theme-dropdown-item {
border-radius: 0 !important;
font-size: 7px !important;
color: #9bbc0f !important;
}
[data-theme="8bit"] .theme-dropdown-item:hover,
[data-theme="8bit"] .theme-dropdown-item.active {
background: #9bbc0f !important;
color: #0a0f0a !important;
}
[data-theme="8bit"] .file-name {
font-size: 8px !important;
line-height: 1.6 !important;
}
[data-theme="8bit"] .header h1 {
font-size: clamp(1.2rem, 2.5vw, 2rem) !important;
color: #9bbc0f !important;
text-shadow: 2px 2px 0 #306230, 3px 3px 0 #0f380f !important;
}
[data-theme="8bit"] .subtitle {
font-size: 11px !important;
color: #8bac0f !important;
}
[data-theme="8bit"] .cover-art,
[data-theme="8bit"] .remote-card img {
image-rendering: pixelated !important;
filter: saturate(0.3) contrast(1.4) sepia(0.5) hue-rotate(60deg) !important;
}
[data-theme="aurora"] {
--bg-primary: #010814;
--bg-secondary: #020d1e;
--text-primary: rgba(218, 238, 255, 0.95);
--text-secondary: rgba(130, 170, 220, 0.88);
--neon-cyan: #2878ff;
--neon-magenta: #ff2060;
--neon-lime: #00e898;
--neon-amber: #00c8ff;
--accent-primary: #2060e0;
--accent-secondary: #ff2060;
--border-color: rgba(24, 80, 220, 0.38);
--card-bg: rgba(1, 8, 22, 0.88);
--shadow: 0 24px 70px rgba(0, 10, 50, 0.75);
--glow-cyan: 0 0 18px rgba(24, 80, 220, 0.50);
--glow-magenta: 0 0 18px rgba(255, 30, 90, 0.38);
--glow-strong: 0 0 20px rgba(24, 80, 220, 0.55), 0 0 40px rgba(255, 30, 90, 0.25), 0 0 60px rgba(0, 220, 148, 0.20);
--accent-rgb: 24, 80, 220;
--accent2-rgb: 255, 30, 90;
--aurora-green: 0, 220, 148;
--bg-base-rgb: 1, 8, 20;
}
[data-theme="aurora"] body {
font-family: 'Space Grotesk', system-ui, sans-serif !important;
background:
radial-gradient(ellipse at 20% 25%, rgba(0, 200, 140, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 78% 18%, rgba(255, 30, 90, 0.05) 0%, transparent 48%),
url('/FatNinja_Background.jpg') top center / 100% auto repeat-y scroll !important;
background-color: #010814 !important;
}
[data-theme="aurora"] .header,
[data-theme="aurora"] .browser-section {
border-radius: 18px !important;
}
[data-theme="aurora"] .header {
background: linear-gradient(135deg, rgba(1, 10, 30, 0.96), rgba(0, 6, 20, 0.98)) !important;
border-color: rgba(24, 80, 220, 0.32) !important;
box-shadow: 0 18px 50px rgba(0, 10, 50, 0.50), inset 0 0 0 1px rgba(24, 80, 220, 0.08) !important;
}
[data-theme="aurora"] .header::before {
background:
radial-gradient(ellipse at 25% -20%, rgba(24, 80, 220, 0.22) 0%, transparent 60%),
radial-gradient(ellipse at 75% -10%, rgba(255, 30, 90, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 50% -15%, rgba(0, 200, 140, 0.10) 0%, transparent 55%) !important;
}
[data-theme="aurora"] .toolbar {
background: linear-gradient(180deg, rgba(1, 10, 28, 0.95), rgba(0, 7, 20, 0.92)) !important;
border-color: rgba(24, 80, 220, 0.20) !important;
}
[data-theme="aurora"] .search-bar {
background: linear-gradient(90deg, rgba(1, 10, 28, 0.96), rgba(0, 7, 20, 0.93)) !important;
}
[data-theme="aurora"] .search-input,
[data-theme="aurora"] select {
background: rgba(1, 8, 22, 0.94) !important;
border-color: rgba(24, 80, 220, 0.32) !important;
color: rgba(218, 238, 255, 0.95) !important;
}
[data-theme="aurora"] .search-input:focus,
[data-theme="aurora"] select:focus {
border-color: rgba(24, 80, 220, 0.65) !important;
box-shadow: 0 0 0 2px rgba(24, 80, 220, 0.15) !important;
}
[data-theme="aurora"] .search-input::placeholder {
color: rgba(130, 165, 220, 0.50) !important;
}
[data-theme="aurora"] .remote-card,
[data-theme="aurora"] .file-item {
background: linear-gradient(135deg, rgba(1, 10, 28, 0.90), rgba(0, 7, 22, 0.86)) !important;
border-color: rgba(24, 80, 220, 0.24) !important;
border-radius: 16px !important;
box-shadow: 0 10px 28px rgba(0, 10, 50, 0.30) !important;
}
[data-theme="aurora"] .remote-card:hover,
[data-theme="aurora"] .file-item:hover {
border-color: rgba(0, 220, 148, 0.60) !important;
box-shadow: 0 16px 40px rgba(0, 20, 70, 0.45), 0 0 24px rgba(0, 200, 140, 0.14) !important;
transform: translateY(-2px) !important;
}
[data-theme="aurora"] .header-star-1 { background: radial-gradient(circle, rgba(0,220,148,0.42) 0%, transparent 70%) !important; }
[data-theme="aurora"] .header-star-2 { background: radial-gradient(circle, rgba(24,80,255,0.36) 0%, transparent 70%) !important; }
[data-theme="aurora"] .header-star-3 { background: radial-gradient(circle, rgba(255,30,90,0.30) 0%, transparent 70%) !important; }
[data-theme="aurora"] .action-btn {
background: linear-gradient(135deg, rgba(255, 30, 90, 0.10), rgba(24, 80, 220, 0.08)) !important;
border-color: rgba(255, 30, 90, 0.32) !important;
border-radius: 14px !important;
}
[data-theme="aurora"] .action-btn:hover {
background: rgba(255, 30, 90, 0.20) !important;
border-color: rgba(255, 30, 90, 0.68) !important;
}
[data-theme="aurora"] .back-to-top {
border-radius: 999px !important;
}
[data-theme="aurora"] .trending-pill {
border-radius: 22px !important;
}
[data-theme="aurora"] .back-to-top {
background: rgba(24, 80, 220, 0.14) !important;
border-color: rgba(24, 80, 220, 0.45) !important;
}
[data-theme="aurora"] .trending-pill {
background: rgba(255, 30, 90, 0.10) !important;
border-color: rgba(255, 30, 90, 0.30) !important;
}
[data-theme="aurora"] .side-art-layer { display: none !important; }
[data-theme="aurora"] .theme-toggle,
[data-theme="aurora"] .animation-toggle,
[data-theme="aurora"] .theme-dropdown-btn {
border-radius: 14px !important;
}
[data-theme="aurora"] .header h1,
[data-theme="aurora"] .theme-toggle,
[data-theme="aurora"] .animation-toggle,
[data-theme="aurora"] .theme-dropdown-btn,
[data-theme="aurora"] .action-btn,
[data-theme="aurora"] .back-to-top {
font-family: 'Space Grotesk', system-ui, sans-serif !important;
letter-spacing: 0.04em;
}
[data-theme="aurora"] .header h1 {
background: linear-gradient(135deg, #00e898 0%, #2878ff 50%, #ff3060 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
[data-theme="aurora"] .subtitle,
[data-theme="aurora"] .file-meta,
[data-theme="aurora"] .remote-description {
font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
[data-theme="aurora"] .header,
[data-theme="aurora"] .toolbar,
[data-theme="aurora"] .search-bar,
[data-theme="aurora"] .remote-card,
[data-theme="aurora"] .file-item {
border-radius: 16px !important;
}
[data-theme="aurora"] .theme-dropdown-menu {
background: rgba(1, 8, 22, 0.97) !important;
border-color: rgba(24, 80, 220, 0.38) !important;
}
[data-theme="aurora"] .theme-dropdown-item:hover {
background: rgba(24, 80, 220, 0.12) !important;
border-color: rgba(24, 80, 220, 0.32) !important;
}
[data-theme="aurora"] .theme-dropdown-item.active {
background: rgba(0, 200, 140, 0.14) !important;
border-color: rgba(0, 220, 148, 0.45) !important;
}
[data-theme="aurora"] .alpha-jump {
background: rgba(1, 8, 22, 0.92) !important;
border-color: rgba(0, 200, 140, 0.24) !important;
}
[data-theme="aurora"] .alpha-jump-btn {
border-color: rgba(0, 200, 140, 0.18) !important;
}
[data-theme="aurora"] .alpha-jump-btn:hover {
background: rgba(0, 200, 140, 0.15) !important;
border-color: rgba(0, 220, 148, 0.45) !important;
}
[data-theme="aurora"] .alpha-jump-btn.disabled:hover {
background: transparent !important;
border-color: rgba(0, 200, 140, 0.10) !important;
}
[data-theme="aurora"] .header {
background:
url('/aurora-banner.jpg') center center / cover no-repeat !important;
min-height: 260px !important;
padding: 0 !important;
border-color: rgba(0, 180, 110, 0.45) !important;
box-shadow: 0 18px 50px rgba(0, 20, 50, 0.75), 0 0 0 1px rgba(0, 200, 140, 0.18) !important;
}
[data-theme="aurora"] .header::before,
[data-theme="aurora"] .header::after {
display: none !important;
}
[data-theme="aurora"] .header-stars {
display: none !important;
}
[data-theme="aurora"] .header-inner {
display: none !important;
}
[data-theme="aurora"] .header-top-actions {
top: 14px !important;
right: 14px !important;
background: rgba(1, 8, 20, 0.72) !important;
border: 1px solid rgba(0, 200, 140, 0.30) !important;
border-radius: 12px !important;
padding: 7px 10px !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
gap: 8px !important;
}
[data-theme="aurora"] .header-top-actions .animation-toggle,
[data-theme="aurora"] .header-top-actions .theme-toggle,
[data-theme="aurora"] .header-top-actions .theme-dropdown-btn {
background: rgba(0, 200, 140, 0.12) !important;
border: 1px solid rgba(0, 200, 140, 0.28) !important;
color: rgba(210, 248, 235, 0.95) !important;
font-size: 0.72rem !important;
padding: 4px 8px !important;
}
[data-theme="aurora"] .header-top-actions .animation-toggle:hover,
[data-theme="aurora"] .header-top-actions .theme-toggle:hover,
[data-theme="aurora"] .header-top-actions .theme-dropdown-btn:hover {
background: rgba(0, 220, 148, 0.22) !important;
border-color: rgba(0, 220, 148, 0.55) !important;
}
[data-theme="aurora"] .header.theme-dropdown-open {
overflow: visible !important;
}
[data-theme="aurora"] .header-top-actions {
grid-template-columns: auto auto auto !important;
}
[data-theme="aurora"] .header-top-actions .theme-dropdown-wrap {
grid-column: auto !important;
justify-self: auto !important;
}
html {
background-color: rgba(5, 4, 12, 1);
scrollbar-gutter: stable;
}
body {
font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
background:
linear-gradient(to bottom, transparent 55%, rgba(5, 4, 12, 0.92) 88%, rgba(5, 4, 12, 1) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll;
background-color: rgba(5, 4, 12, 1);
min-height: 100vh;
color: var(--text-primary);
line-height: 1.6;
transition: color 0.3s ease;
position: relative;
}
.side-art-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
display: none;
background-image: var(--side-art-left), var(--side-art-right);
background-repeat: no-repeat;
background-size: var(--side-art-w) auto, var(--side-art-w) auto;
background-position:
left calc((((100vw - var(--container-outer)) / 4) - (var(--side-art-w) / 2))) center,
right calc((((100vw - var(--container-outer)) / 4) - (var(--side-art-w) / 2))) center;
opacity: 0.50;
filter: saturate(112%) contrast(108%) brightness(0.95);
mix-blend-mode: screen;
}
@media (display-mode: fullscreen) and (min-aspect-ratio: 16/9) {
.side-art-layer {
display: block;
}
}
@media (display-mode: browser) and (min-width: 1400px) and (min-aspect-ratio: 16/9) {
.side-art-layer {
display: block;
}
}
html[data-pwa-fullscreen="1"] .side-art-layer {
display: block;
}
button,
input,
select,
textarea {
font-family: inherit;
}
select,
option {
background: rgba(var(--bg-base-rgb), 0.96);
color: var(--text-primary);
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background:
repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.04) 0px,
rgba(255, 255, 255, 0.04) 1px,
rgba(0, 0, 0, 0) 3px,
rgba(0, 0, 0, 0) 7px
),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 60%);
opacity: 0.35;
mix-blend-mode: overlay;
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0) 28%, rgba(255, 255, 255, 0.02) 56%, rgba(0, 0, 0, 0) 85%),
linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24));
opacity: 0.22;
filter: contrast(120%) saturate(120%);
}
@media (min-width: 1400px) {
html::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-image:
radial-gradient(circle at 18% 20%, rgba(var(--accent-rgb), 0.10), transparent 52%),
radial-gradient(circle at 86% 30%, rgba(var(--accent2-rgb), 0.10), transparent 56%);
background-repeat: no-repeat;
background-size:
auto,
auto;
background-position:
18% 20%,
86% 30%;
opacity: 0.16;
filter: saturate(112%) contrast(108%) brightness(0.95);
mix-blend-mode: screen;
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) calc((((100vw - var(--container-outer)) / 2) - 140px)),
rgba(0, 0, 0, 0) calc((((100vw - var(--container-outer)) / 2) + 60px)),
rgba(0, 0, 0, 0) 100%,
rgba(0, 0, 0, 0) 100%,
rgba(0, 0, 0, 1) 100%
);
-webkit-mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) calc((((100vw - var(--container-outer)) / 2) - 140px)),
rgba(0, 0, 0, 0) calc((((100vw - var(--container-outer)) / 2) + 60px)),
rgba(0, 0, 0, 0) 100%,
rgba(0, 0, 0, 0) 100%,
rgba(0, 0, 0, 1) 100%
);
}
html::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-image: none;
opacity: 0.16;
filter: saturate(112%) contrast(108%) brightness(0.95);
mix-blend-mode: screen;
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc((100% - (((100vw - var(--container-outer)) / 2) + 60px))),
rgba(0, 0, 0, 1) calc((100% - (((100vw - var(--container-outer)) / 2) - 140px))),
rgba(0, 0, 0, 1) 100%
);
-webkit-mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc((100% - (((100vw - var(--container-outer)) / 2) + 60px))),
rgba(0, 0, 0, 1) calc((100% - (((100vw - var(--container-outer)) / 2) - 140px))),
rgba(0, 0, 0, 1) 100%
);
}
body {
background:
radial-gradient(circle at 20% 10%, rgba(var(--accent-rgb), 0.18), transparent 44%),
radial-gradient(circle at 72% 18%, rgba(var(--accent2-rgb), 0.16), transparent 46%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll;
}
}
[data-theme="light"] html {
background-color: #f8fafc;
}
[data-theme="light"] body {
background:
linear-gradient(135deg, rgba(224, 231, 255, 0.88) 0%, rgba(248, 250, 252, 0.90) 50%, rgba(226, 232, 240, 0.88) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll;
background-color: #f8fafc;
}
@media (prefers-color-scheme: light) {
[data-theme="system"] html {
background-color: #f8fafc;
}
[data-theme="system"] body {
background:
linear-gradient(135deg, rgba(224, 231, 255, 0.88) 0%, rgba(248, 250, 252, 0.90) 50%, rgba(226, 232, 240, 0.88) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll;
background-color: #f8fafc;
}
}
[data-theme="light"] .header,
[data-theme="light"] .auth-section,
[data-theme="light"] .browser-section {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(71, 85, 105, 0.15);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .telegram-login-container {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(71, 85, 105, 0.15);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .telegram-login-btn {
background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
color: #ffffff;
border: 1px solid rgba(37, 99, 235, 0.35);
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}
[data-theme="light"] .telegram-login-btn:hover {
background: linear-gradient(135deg, #0ea5e9 0%, #1d4ed8 100%);
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}
[data-theme="light"] .telegram-login-container iframe {
background: #ffffff !important;
border-radius: 12px !important;
filter: none !important;
}
[data-theme="light"] .telegram-login-info {
color: #475569;
}
[data-theme="light"] .remote-card,
[data-theme="light"] .file-item {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(71, 85, 105, 0.12);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .remote-card:hover,
[data-theme="light"] .file-item:hover {
background: rgba(255, 255, 255, 1);
border-color: var(--accent-primary);
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
}
[data-theme="light"] .toolbar {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(71, 85, 105, 0.12);
}
[data-theme="light"] .breadcrumb-item {
color: var(--text-secondary);
}
[data-theme="light"] .breadcrumb-item:hover {
color: var(--accent-primary);
}
[data-theme="light"] .search-input,
[data-theme="light"] select {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(71, 85, 105, 0.2);
color: var(--text-primary);
}
[data-theme="light"] .search-input:focus,
[data-theme="light"] select:focus {
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
[data-theme="light"] .action-btn {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
color: #ffffff;
border: none;
}
[data-theme="light"] .action-btn:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
[data-theme="light"] .trending-pill {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(71, 85, 105, 0.12);
}
[data-theme="light"] .trending-pill-card {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(71, 85, 105, 0.1);
}
[data-theme="light"] .back-to-top {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(71, 85, 105, 0.2);
color: var(--text-primary);
}
[data-theme="light"] .logout-btn {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, 0.3);
}
[data-theme="light"] .logout-btn:hover {
background: #dc2626;
color: #ffffff;
}
[data-theme="light"] .admin-role-btn {
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
border: 1px solid rgba(37, 99, 235, 0.3);
}
[data-theme="light"] .status-indicator {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(71, 85, 105, 0.15);
}
[data-theme="light"] .header-logo-glyph {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .header h1 {
background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .subtitle {
color: #64748b;
}
[data-theme="light"] .user-avatar {
border: 2px solid rgba(37, 99, 235, 0.3);
}
[data-theme="light"] .file-name {
color: var(--text-primary);
}
[data-theme="light"] .file-meta {
color: var(--text-secondary);
}
[data-theme="light"] .new-item-badge {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}
[data-theme="light"] .testers-item-badge {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
}
[data-theme="light"] .theme-dropdown-menu {
background: rgba(255, 255, 255, 0.98) !important;
border-color: rgba(37, 99, 235, 0.25) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] .theme-dropdown-item {
color: #1e293b !important;
}
[data-theme="light"] .theme-dropdown-item:hover {
background: rgba(37, 99, 235, 0.08) !important;
border-color: rgba(37, 99, 235, 0.22) !important;
}
[data-theme="light"] .theme-dropdown-item.active {
background: rgba(37, 99, 235, 0.12) !important;
border-color: rgba(37, 99, 235, 0.38) !important;
}
[data-theme="light"] .alpha-jump {
background: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(71, 85, 105, 0.20) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .alpha-jump-btn {
color: #334155 !important;
border-color: rgba(71, 85, 105, 0.15) !important;
}
[data-theme="light"] .alpha-jump-btn:hover {
background: rgba(37, 99, 235, 0.10) !important;
border-color: rgba(37, 99, 235, 0.35) !important;
color: #2563eb !important;
}
[data-theme="light"] .alpha-jump-btn.disabled {
color: #94a3b8 !important;
}
[data-theme="light"] .alpha-jump-btn.disabled:hover {
background: transparent !important;
border-color: rgba(71, 85, 105, 0.10) !important;
color: #94a3b8 !important;
}
@media (prefers-color-scheme: light) {
[data-theme="system"] .header,
[data-theme="system"] .auth-section,
[data-theme="system"] .browser-section {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(71, 85, 105, 0.15);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
[data-theme="system"] .remote-card,
[data-theme="system"] .file-item {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(71, 85, 105, 0.12);
}
[data-theme="system"] .toolbar {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(71, 85, 105, 0.12);
}
[data-theme="system"] .search-input,
[data-theme="system"] select {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(71, 85, 105, 0.2);
color: var(--text-primary);
}
[data-theme="system"] .btn-primary {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: #ffffff;
border: none;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}
[data-theme="system"] .btn-primary:hover {
background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4);
}
}
.back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 10000;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb), 0.45);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent2-rgb), 0.10)),
rgba(var(--bg-base-rgb), 0.92);
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.back-to-top:hover {
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent2-rgb), 0.14)),
rgba(var(--bg-base-rgb), 0.92);
border-color: rgba(var(--accent-rgb), 0.75);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85), var(--glow-strong);
}
.feedback-button {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 10000;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb), 0.45);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent2-rgb), 0.10)),
rgba(var(--bg-base-rgb), 0.92);
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.feedback-button:hover {
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent2-rgb), 0.14)),
rgba(var(--bg-base-rgb), 0.92);
border-color: rgba(var(--accent-rgb), 0.75);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85), var(--glow-strong);
}
.downloads-button {
position: fixed;
left: 20px;
bottom: 70px;
z-index: 10000;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb), 0.45);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent2-rgb), 0.10)),
rgba(var(--bg-base-rgb), 0.92);
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.downloads-button:hover {
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent2-rgb), 0.14)),
rgba(var(--bg-base-rgb), 0.92);
border-color: rgba(var(--accent-rgb), 0.75);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85), var(--glow-strong);
}
.downloads-badge {
background: rgba(var(--accent2-rgb), 0.18);
color: rgba(255, 214, 247, 0.95);
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 999px;
min-width: 18px;
text-align: center;
border: 1px solid rgba(var(--accent2-rgb), 0.45);
}
.downloads-badge.empty {
background: rgba(100, 116, 139, 0.6);
}
.stream-slot-indicator {
position: fixed;
left: 20px;
bottom: 125px;
z-index: 10000;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb), 0.40);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.10), rgba(51, 255, 122, 0.07)),
rgba(var(--bg-base-rgb), 0.88);
color: var(--text-secondary);
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.05em;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
pointer-events: none;
transition: opacity 0.3s ease;
}
.stream-slot-indicator.active {
color: var(--text-primary);
border-color: rgba(var(--accent-rgb), 0.65);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(51, 255, 122, 0.10)),
rgba(var(--bg-base-rgb), 0.92);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 10px rgba(var(--accent-rgb), 0.15);
}
.stream-slot-indicator.at-limit {
border-color: rgba(var(--accent2-rgb), 0.65);
color: rgba(255, 214, 247, 0.95);
}
.stream-slot-queued {
font-size: 11px;
color: rgba(255, 170, 80, 0.9);
}
.downloads-panel {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 380px;
max-width: 100vw;
background:
linear-gradient(180deg, rgba(var(--bg-base-rgb), 0.98), rgba(var(--bg-base-rgb), 0.92)),
radial-gradient(circle at 20% 10%, rgba(var(--accent-rgb), 0.10), transparent 55%);
border-right: 1px solid rgba(var(--accent-rgb), 0.38);
z-index: 10001;
transform: translateX(-100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
backdrop-filter: blur(20px);
box-shadow: 18px 0 55px rgba(0, 0, 0, 0.8);
}
.downloads-panel.open {
transform: translateX(0);
}
.downloads-panel-header {
padding: 16px 20px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
display: flex;
align-items: center;
justify-content: space-between;
background:
linear-gradient(90deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent2-rgb), 0.06), rgba(var(--bg-base-rgb), 0.45));
}
.downloads-panel-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.downloads-panel-close {
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 20px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.downloads-panel-close:hover {
background: rgba(var(--accent-rgb), 0.12);
color: var(--text-primary);
}
.downloads-panel-content {
flex: 1;
overflow-y: auto;
padding: 12px;
}
.downloads-section {
margin-bottom: 20px;
}
.downloads-section-title {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
padding: 0 4px;
}
.download-item {
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.92), rgba(var(--bg-base-rgb), 0.78)),
radial-gradient(circle at 10% 20%, rgba(var(--accent-rgb), 0.08), transparent 60%);
border: 1px solid rgba(var(--accent-rgb), 0.28);
border-radius: 10px;
padding: 12px;
margin-bottom: 8px;
}
.download-item-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.download-item-name {
font-size: clamp(11px, 1.6vw, 13px);
font-weight: 500;
color: var(--text-primary);
word-break: break-word;
overflow-wrap: anywhere;
min-width: 0;
flex: 1;
}
.download-item-type {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(var(--accent-rgb), 0.12);
color: rgba(217, 249, 255, 0.95);
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.download-item-type.zip-job {
background: rgba(16, 185, 129, 0.2);
color: #6ee7b7;
}
.download-item-progress {
height: 6px;
background: rgba(100, 116, 139, 0.3);
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.download-item-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--neon-cyan), var(--neon-lime), var(--neon-magenta));
border-radius: 3px;
transition: width 0.3s ease;
}
.download-item-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--text-secondary);
}
.download-item-disclaimer {
font-size: 10px;
color: var(--text-secondary);
font-style: italic;
opacity: 0.7;
margin-top: 6px;
line-height: 1.3;
}
.download-item-cancel {
background: rgba(239, 68, 68, 0.2);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #fca5a5;
font-size: 11px;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
}
.download-item-cancel:hover {
background: rgba(239, 68, 68, 0.4);
}
.download-item-status {
font-size: clamp(10px, 1.35vw, 11px);
color: var(--text-secondary);
margin-bottom: 6px;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.25;
}
.download-item-speed {
color: #10b981;
font-weight: 500;
}
.download-item-children {
margin-top: 8px;
}
.download-item-children summary {
cursor: pointer;
font-size: 11px;
color: var(--text-secondary);
user-select: none;
}
.download-item-children-list {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 6px;
}
.download-item-child {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-width: 0;
font-size: 11px;
color: var(--text-secondary);
}
.download-item-child-name {
flex: 1;
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.download-item-child-status {
flex: none;
white-space: nowrap;
opacity: 0.9;
}
.download-item-actions {
display: flex;
gap: 6px;
margin-left: auto;
}
.download-item-complete {
background: rgba(16, 185, 129, 0.2);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #6ee7b7;
font-size: 11px;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
}
.download-item-complete:hover {
background: rgba(16, 185, 129, 0.4);
}
.download-item-dismiss {
background: rgba(107, 114, 128, 0.2);
border: 1px solid rgba(107, 114, 128, 0.4);
color: #9ca3af;
font-size: 11px;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
}
.download-item-dismiss:hover {
background: rgba(107, 114, 128, 0.4);
}
.download-item.completed {
opacity: 0.7;
}
.download-item.completed .download-item-progress-bar {
background: #10b981;
}
.download-item.failed .download-item-progress-bar {
background: #ef4444;
}
.download-item.cancelled .download-item-progress-bar {
background: #6b7280;
}
.downloads-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-secondary);
font-size: 13px;
}
.downloads-empty-icon {
font-size: 32px;
margin-bottom: 12px;
opacity: 0.5;
}
.downloads-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.downloads-overlay.open {
opacity: 1;
visibility: visible;
}
.alpha-jump {
position: fixed;
right: 10px;
top: 74px;
bottom: 90px;
transform: none;
z-index: 99990;
display: none;
visibility: hidden;
flex-direction: column;
gap: 4px;
padding: 8px 6px;
border-radius: 14px;
background: rgba(var(--bg-base-rgb), 0.86);
border: 1px solid rgba(var(--accent-rgb), 0.22);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
user-select: none;
overflow-y: auto;
}
.alpha-jump.open {
display: flex;
}
.alpha-jump.positioned {
visibility: visible;
max-height: none;
justify-content: flex-start;
gap: 6px;
}
.alpha-jump.dimmed {
opacity: 0.22;
filter: blur(1.5px);
pointer-events: none;
}
.alpha-jump-btn {
width: clamp(18px, 2.2vh, 22px);
height: clamp(18px, 2.2vh, 22px);
border-radius: 8px;
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: transparent;
color: rgba(240, 248, 255, 0.92);
font-size: clamp(9px, 1.2vh, 11px);
font-weight: 700;
letter-spacing: 0.08em;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.alpha-jump-btn:hover {
background: rgba(var(--accent-rgb), 0.14);
border-color: rgba(var(--accent-rgb), 0.35);
}
.alpha-jump-btn.disabled {
opacity: 0.25;
cursor: default;
}
.alpha-jump-btn.disabled:hover {
background: transparent;
border-color: rgba(var(--accent-rgb), 0.12);
}
.alpha-jump-dots {
font-size: 12px;
letter-spacing: 0.18em;
}
.alpha-jump-numbers {
position: fixed;
right: 44px;
top: 74px;
bottom: 90px;
transform: none;
z-index: 99989;
display: none;
visibility: hidden;
flex-direction: column;
gap: 6px;
padding: 10px 8px;
border-radius: 14px;
background: rgba(var(--bg-base-rgb), 0.86);
border: 1px solid rgba(var(--accent2-rgb), 0.22);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
user-select: none;
overflow-y: auto;
}
@media (max-height: 750px) {
.alpha-jump {
gap: 3px;
padding: 6px 5px;
border-radius: 12px;
}
.alpha-jump-numbers {
gap: 4px;
padding: 8px 6px;
border-radius: 12px;
}
}
.alpha-jump-numbers.open {
display: flex;
}
.alpha-jump-numbers.positioned {
visibility: visible;
max-height: none;
justify-content: flex-start;
gap: 6px;
}
.alpha-jump-numbers.dimmed {
opacity: 0.22;
filter: blur(1.5px);
pointer-events: none;
}
@keyframes minimizeToDownloads {
0% {
opacity: 1;
transform: scale(1) translate(0, 0);
}
100% {
opacity: 0;
transform: scale(0.1) translate(-80vw, 80vh);
}
}
.zip-overlay-box.minimizing {
animation: minimizeToDownloads 0.4s ease-in forwards;
pointer-events: none;
}
.zip-overlay-overlay.minimizing {
animation: fadeOut 0.3s ease-out forwards;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes downloadsPulse {
0% { transform: scale(1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); }
50% { transform: scale(1.1); box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.45), 0 0 18px rgba(var(--accent2-rgb), 0.25); }
100% { transform: scale(1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); }
}
.downloads-button.pulse {
animation: downloadsPulse 0.5s ease-in-out 3;
}
.zip-overlay-overlay {
animation: zipOverlayFadeIn 380ms ease-out;
backdrop-filter: blur(10px);
}
.zip-overlay-box {
animation: zipOverlayPop 320ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
border: 1px solid rgba(148, 163, 184, 0.65);
}
.zip-progress-bar-animated {
background: linear-gradient(90deg, var(--neon-cyan), var(--neon-lime), var(--neon-magenta));
background-size: 200% 100%;
animation: zipProgressGlow 1.4s linear infinite;
}
.media-preview-overlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(12px);
z-index: 10050;
}
.media-preview-box {
background: var(--card-bg);
border-radius: 18px;
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
padding: 18px 20px 20px;
width: 90%;
max-width: 900px;
max-height: 80vh;
display: flex;
flex-direction: column;
gap: 10px;
}
#ownerSystemWidget {
position: fixed;
right: 14px;
top: 50%;
left: auto;
z-index: 10002;
max-width: 240px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(var(--bg-base-rgb), 0.72);
border: 1px solid rgba(var(--accent-rgb), 0.24);
box-shadow: 0 10px 26px rgba(0,0,0,0.55);
color: var(--text-primary);
font-family: 'Share Tech Mono', monospace;
font-size: 0.76rem;
line-height: 1.25;
pointer-events: auto;
backdrop-filter: blur(6px);
display: none;
transform: translateY(-50%);
}
#ownerSystemWidget .owner-system-title {
font-family: 'Orbitron', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 6px;
}
#ownerSystemWidget .owner-system-row {
display: flex;
justify-content: space-between;
gap: 10px;
white-space: nowrap;
}
#ownerSystemWidget .owner-system-row-clickable {
cursor: pointer;
}
#ownerSystemWidget .owner-system-row-clickable:hover {
filter: brightness(1.15);
}
#ownerSystemWidget .owner-system-row + .owner-system-row {
margin-top: 3px;
}
#ownerSystemWidget .owner-system-label {
color: var(--text-secondary);
}
#ownerSystemWidget .owner-system-value {
color: var(--text-primary);
}
#ownerSystemWidget .owner-system-spark {
height: 14px;
margin: 1px 0 4px;
opacity: 0.85;
}
#ownerSystemWidget .owner-system-queue-breakdown {
margin-top: 2px;
color: var(--text-secondary);
font-size: 0.62rem;
line-height: 1.25;
letter-spacing: 0.02em;
white-space: nowrap;
}
#ownerSystemWidget .owner-system-spark svg {
display: block;
width: 100%;
height: 14px;
}
.media-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.media-preview-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.media-preview-source {
font-size: 0.8rem;
color: var(--text-secondary);
}
.media-preview-close-btn {
border: none;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.8rem;
cursor: pointer;
background: rgba(15, 23, 42, 0.95);
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
.media-preview-close-btn:hover {
background: rgba(var(--accent-rgb), 0.14);
color: var(--text-primary);
border-color: rgba(var(--accent-rgb), 0.65);
box-shadow: var(--glow-cyan);
}
.media-preview-body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding-top: 4px;
}
.media-preview-image {
max-width: 100%;
max-height: 65vh;
border-radius: 12px;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.7);
object-fit: contain;
background: #020617;
}
.media-preview-video {
width: 100%;
max-width: 900px;
max-height: 65vh;
border-radius: 12px;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.7);
background: #020617;
aspect-ratio: 16 / 9;
object-fit: contain;
}
.media-preview-iframe {
display: none;
width: 100%;
max-width: 100%;
max-height: 65vh;
border-radius: 12px;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.7);
background: #020617;
border: none;
aspect-ratio: 16 / 9;
}
@keyframes zipOverlayFadeIn {
from {
opacity: 0;
}
50% {
opacity: 0.6;
}
to {
opacity: 1;
}
}
@keyframes zipOverlayPop {
from {
transform: translateY(24px) scale(0.9);
opacity: 0;
}
60% {
transform: translateY(-4px) scale(1.02);
opacity: 1;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes zipProgressGlow {
0% {
background-position: 0% 50%;
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.55);
}
50% {
background-position: 100% 50%;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.9);
}
100% {
background-position: 0% 50%;
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.55);
}
}
@keyframes headerStarStreaks {
0% {
left: -120px;
opacity: 0;
}
10% {
opacity: 1;
}
50% {
left: 45%;
opacity: 1;
}
90% {
opacity: 1;
}
100% {
left: 120%;
opacity: 0;
}
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 32px 20px 40px;
position: relative;
z-index: 2;
}
.landing-credit {
position: absolute;
top: 6px;
right: 22px;
font-size: 0.6rem;
pointer-events: none;
user-select: none;
}
.fire-text {
position: relative;
z-index: 2;
background: linear-gradient(to bottom, #ff6b35 0%, #f7931e 25%, #ffcc00 50%, #ff6b35 75%, #cc3300 100%);
background-size: 100% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fireFlicker 0.8s ease-in-out infinite alternate;
filter: drop-shadow(0 0 3px rgba(255, 150, 50, 0.6)) drop-shadow(0 0 6px rgba(255, 100, 30, 0.4));
}
.fire-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
overflow: visible;
}
.flame {
position: absolute;
bottom: 50%;
width: 3px;
height: 8px;
background: linear-gradient(to top, #ff6b35, #ffcc00, transparent);
border-radius: 50% 50% 20% 20%;
opacity: 0;
animation: flameRise 1.2s ease-out infinite;
}
.flame:nth-child(1) { left: 5%; animation-delay: 0s; animation-duration: 1.1s; width: 2px; height: 6px; }
.flame:nth-child(2) { left: 18%; animation-delay: 0.4s; animation-duration: 1.3s; width: 4px; height: 10px; }
.flame:nth-child(3) { left: 32%; animation-delay: 0.1s; animation-duration: 1.0s; width: 3px; height: 7px; }
.flame:nth-child(4) { left: 45%; animation-delay: 0.7s; animation-duration: 1.4s; width: 5px; height: 12px; }
.flame:nth-child(5) { left: 58%; animation-delay: 0.25s; animation-duration: 1.2s; width: 2px; height: 8px; }
.flame:nth-child(6) { left: 72%; animation-delay: 0.55s; animation-duration: 1.1s; width: 4px; height: 9px; }
.flame:nth-child(7) { left: 85%; animation-delay: 0.85s; animation-duration: 1.3s; width: 3px; height: 6px; }
.flame:nth-child(8) { left: 95%; animation-delay: 0.35s; animation-duration: 1.0s; width: 5px; height: 11px; }
@keyframes flameRise {
0% {
opacity: 0;
transform: translateY(0) scale(1);
}
20% {
opacity: 0.9;
}
60% {
opacity: 0.6;
}
100% {
opacity: 0;
transform: translateY(-18px) scale(0.3) translateX(2px);
}
}
@keyframes fireFlicker {
0% {
background-position: 0% 0%;
filter: drop-shadow(0 0 3px rgba(255, 150, 50, 0.6)) drop-shadow(0 0 6px rgba(255, 100, 30, 0.4));
}
50% {
background-position: 0% 50%;
filter: drop-shadow(0 0 5px rgba(255, 180, 50, 0.8)) drop-shadow(0 0 10px rgba(255, 120, 30, 0.5));
}
100% {
background-position: 0% 100%;
filter: drop-shadow(0 0 4px rgba(255, 130, 50, 0.7)) drop-shadow(0 0 8px rgba(255, 80, 30, 0.45));
}
}
.header {
position: relative;
overflow: hidden;
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.92), rgba(var(--bg-base-rgb), 0.76)),
radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.12), transparent 55%),
radial-gradient(circle at 80% 35%, rgba(var(--accent2-rgb), 0.10), transparent 60%);
border: 1px solid rgba(var(--accent-rgb), 0.35);
border-radius: 18px;
padding: 18px 18px;
margin-bottom: 14px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.70), var(--glow-soft);
}
.header::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.0), rgba(var(--accent-rgb), 0.22), rgba(var(--accent2-rgb), 0.18), rgba(var(--accent2-rgb), 0.0));
opacity: 0.28;
mix-blend-mode: screen;
}
.header-stars {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.header-star {
position: absolute;
left: -120px;
width: 6px;
height: 6px;
border-radius: 999px;
background: radial-gradient(circle at center,
#ffffff 0%,
rgba(217, 249, 255, 0.95) 35%,
rgba(var(--accent-rgb), 0) 70%);
box-shadow:
0 0 28px rgba(217, 249, 255, 0.95),
0 0 52px rgba(var(--accent-rgb), 0.85),
0 0 86px rgba(var(--accent2-rgb), 0.55);
opacity: 0;
mix-blend-mode: screen;
animation: headerStarStreaks 4s linear infinite;
}
.header-star::before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translate(-8%, -50%);
width: 220px;
height: 110px;
border-radius: 999px;
background: radial-gradient(ellipse at 16% 50%,
rgba(var(--accent2-rgb), 0.35) 0%,
rgba(var(--accent-rgb), 0.22) 32%,
rgba(15, 23, 42, 0) 80%);
filter: blur(12px);
mix-blend-mode: screen;
pointer-events: none;
}
.header-star::after {
content: '';
position: absolute;
top: 50%;
right: 50%;
transform: translateY(-50%);
width: 80px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(var(--accent-rgb), 0.85) 0%,
rgba(var(--accent2-rgb), 0.0) 100%);
filter: blur(1px);
mix-blend-mode: screen;
pointer-events: none;
}
.header-star-1 {
top: 34%;
animation-duration: 3.0s;
animation-delay: -0.7s;
}
.header-star-2 {
top: 50%;
animation-duration: 4.2s;
animation-delay: -1.9s;
}
.header-star-3 {
top: 66%;
animation-duration: 5.6s;
animation-delay: -3.4s;
}
.header-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 18px;
}
.header-logo {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
opacity: 0;
transition: opacity 0.12s ease;
}
.header-logo.positioned {
opacity: 1;
}
.header-logo img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.header-logo-glyph {
display: none;
}
.header-text {
text-align: center;
}
.header h1 {
font-family: 'Orbitron', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
display: inline-block;
font-size: 2.15rem;
margin: 0 0 6px;
letter-spacing: 0.12em;
text-transform: uppercase;
background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), var(--neon-amber));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25), 0 0 22px rgba(var(--accent2-rgb), 0.18);
}
.subtitle {
margin: 0;
font-size: 0.95rem;
color: var(--text-secondary);
}
.auth-section {
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.09), rgba(var(--bg-base-rgb), 0.72) 48%, rgba(var(--accent2-rgb), 0.06)),
radial-gradient(circle at top right, rgba(var(--accent2-rgb), 0.14), transparent 55%) var(--card-bg);
backdrop-filter: blur(18px);
border-radius: 22px;
padding: 28px 26px 26px;
text-align: left;
box-shadow: var(--shadow);
margin-bottom: 26px;
border: 1px solid rgba(var(--accent-rgb), 0.40);
}
.auth-section h2 {
margin-bottom: 16px;
color: var(--text-primary);
font-size: 1.2rem;
text-align: center;
}
.auth-section p {
font-size: 0.94rem;
color: var(--text-secondary);
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.telegram-login-container {
text-align: center;
margin: 22px 0 6px;
padding: 20px 18px;
background: rgba(15, 23, 42, 0.95);
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.6);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
}
.telegram-login-btn {
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent2-rgb), 0.14));
color: rgba(241, 245, 249, 0.98);
border: 1px solid rgba(var(--accent-rgb), 0.55);
padding: 16px 32px;
border-radius: 999px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.72);
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
min-width: 280px;
}
.telegram-login-btn:hover {
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent2-rgb), 0.18));
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85), var(--glow-strong);
border-color: rgba(var(--accent-rgb), 0.75);
transform: translateY(-2px);
}
.telegram-login-info {
margin-top: 14px;
color: var(--text-secondary);
font-size: 0.85rem;
font-family: inherit;
max-width: 680px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.telegram-login-info .bot-name {
color: var(--accent-primary);
font-weight: 600;
}
.browser-section {
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.86), rgba(7, 10, 26, 0.76)),
radial-gradient(circle at 18% 20%, rgba(var(--accent-rgb), 0.09), transparent 52%);
backdrop-filter: blur(18px);
border-radius: 24px;
padding: 22px 22px 24px;
box-shadow: var(--shadow);
border: 1px solid rgba(var(--accent-rgb), 0.38);
min-height: 420px;
display: none;
}
.toolbar {
display: flex;
flex-direction: column;
margin-bottom: 12px;
padding: 12px 18px;
background:
linear-gradient(120deg, rgba(var(--bg-base-rgb), 0.96), rgba(var(--bg-base-rgb), 0.82)),
radial-gradient(circle at 15% 10%, rgba(var(--accent-rgb), 0.10), transparent 55%);
border-radius: 18px;
gap: 10px;
border: 1px solid rgba(var(--accent-rgb), 0.45);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.78);
}
.trending-pill {
padding: 10px 14px 12px;
margin-bottom: 10px;
border-radius: 18px;
background:
linear-gradient(120deg, rgba(var(--bg-base-rgb), 0.96), rgba(var(--bg-base-rgb), 0.82)),
radial-gradient(circle at 85% 30%, rgba(var(--accent2-rgb), 0.10), transparent 55%);
border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.game-radar-panel {
padding: 12px 14px 14px;
margin-bottom: 10px;
border-radius: 18px;
background:
linear-gradient(120deg, rgba(var(--bg-base-rgb), 0.98), rgba(var(--bg-base-rgb), 0.82)),
radial-gradient(circle at 16% 20%, rgba(124, 58, 237, 0.18), transparent 45%),
radial-gradient(circle at 84% 24%, rgba(var(--accent-rgb), 0.12), transparent 50%);
border: 1px solid rgba(124, 58, 237, 0.42);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72);
overflow: hidden;
}
.game-radar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.game-radar-header-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.game-radar-resume-btn {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(var(--accent-rgb), 0.20));
border: 1px solid rgba(168, 85, 247, 0.65);
color: var(--text-primary);
box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22);
}
.game-radar-resume-btn:hover {
border-color: rgba(168, 85, 247, 0.9);
box-shadow: 0 12px 26px rgba(124, 58, 237, 0.32);
}
.game-radar-refresh-btn {
width: 38px;
min-width: 38px;
height: 38px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 1rem;
line-height: 1;
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(124, 58, 237, 0.22));
border: 1px solid rgba(var(--accent-rgb), 0.55);
color: var(--text-primary);
box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.12);
}
.game-radar-refresh-btn:hover {
border-color: rgba(var(--accent-rgb), 0.9);
box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.22);
}
.game-radar-reset-btn {
width: 38px;
min-width: 38px;
height: 38px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 1rem;
line-height: 1;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(124, 58, 237, 0.18));
border: 1px solid rgba(251, 191, 36, 0.5);
color: var(--text-primary);
box-shadow: 0 10px 22px rgba(251, 191, 36, 0.12);
}
.game-radar-reset-btn:hover {
border-color: rgba(251, 191, 36, 0.9);
box-shadow: 0 12px 26px rgba(251, 191, 36, 0.22);
}
.game-radar-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.02em;
}
.game-radar-subtitle {
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.14em;
}
.game-radar-track {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-top: 10px;
}
.game-radar-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border-radius: 14px;
background: rgba(15, 23, 42, 0.94);
border: 1px solid rgba(148, 163, 184, 0.30);
overflow: hidden;
min-width: 0;
}
.game-radar-cover {
width: 100%;
height: 88px;
flex-shrink: 0;
position: relative;
overflow: hidden;
background: #020617;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.10);
}
.game-radar-cover-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(7px) brightness(0.45) saturate(1.4);
transform: scale(1.1);
display: block;
}
.game-radar-cover-fg {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.game-radar-cover-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
text-align: center;
font-size: 0.66rem;
line-height: 1.2;
color: rgba(226, 232, 240, 0.82);
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent2-rgb), 0.08));
}
.game-radar-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
}
.game-radar-title {
font-size: 0.98rem;
font-weight: 700;
color: var(--text-primary);
word-break: break-word;
overflow-wrap: anywhere;
}
.game-radar-reason {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.35;
}
.game-radar-why {
display: inline-block;
align-self: flex-start;
width: auto;
max-width: 100%;
box-sizing: border-box;
padding: 6px 8px 7px;
border-radius: 16px;
background: rgba(var(--accent-rgb), 0.10);
border: 1px solid rgba(var(--accent-rgb), 0.18);
color: rgba(217, 249, 255, 0.96);
font-size: 0.72rem;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: normal;
line-height: 1.1;
overflow-wrap: anywhere;
width: fit-content;
}
.game-radar-why-label {
display: block;
font-size: 0.66rem;
opacity: 0.75;
margin-bottom: 3px;
}
.game-radar-why-text {
display: block;
font-size: 0.78rem;
letter-spacing: 0.02em;
text-transform: none;
line-height: 1.28;
white-space: normal;
overflow-wrap: anywhere;
}
.game-radar-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.game-radar-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.24);
background: rgba(15, 23, 42, 0.72);
color: rgba(226, 232, 240, 0.92);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.game-radar-badge.primary {
border-color: rgba(var(--accent-rgb), 0.28);
background: rgba(var(--accent-rgb), 0.12);
color: rgba(217, 249, 255, 0.98);
}
.game-radar-badge.saved {
border-color: rgba(168, 85, 247, 0.32);
background: rgba(168, 85, 247, 0.15);
color: #e9d5ff;
}
.game-radar-badge.history {
border-color: rgba(34, 197, 94, 0.32);
background: rgba(34, 197, 94, 0.14);
color: #bbf7d0;
}
.game-radar-badge.trending {
border-color: rgba(245, 158, 11, 0.32);
background: rgba(245, 158, 11, 0.14);
color: #fde68a;
}
.game-radar-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 0.72rem;
color: rgba(226, 232, 240, 0.76);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.game-radar-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;
}
.game-radar-empty {
margin-top: 10px;
padding: 12px;
border-radius: 12px;
border: 1px dashed rgba(148, 163, 184, 0.28);
color: var(--text-secondary);
font-size: 0.88rem;
background: rgba(15, 23, 42, 0.42);
}
.trending-pill-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.trending-pill-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
}
.trending-pill-mode-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 2px 10px;
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.12);
color: rgba(217, 249, 255, 0.95);
text-transform: uppercase;
letter-spacing: 0.14em;
animation: trendingFlash 1.1s ease-in-out infinite alternate;
border: 1px solid rgba(var(--accent-rgb), 0.38);
box-shadow: var(--glow-cyan);
}
.trending-badge-week {
background: rgba(34, 197, 94, 0.22);
color: #bbf7d0;
}
.trending-badge-month {
background: rgba(250, 204, 21, 0.22);
color: #fef9c3;
}
.trending-badge-alltime {
background: rgba(248, 113, 113, 0.24);
color: #fee2e2;
}
.trending-pill-track {
position: relative;
margin-top: 6px;
overflow: hidden;
}
.trending-pill-inner {
position: relative;
z-index: 1;
display: flex;
gap: 10px;
align-items: stretch;
will-change: transform, opacity;
transition: opacity 0.4s ease;
}
.trending-pill-card {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.96);
border: 1px solid rgba(148, 163, 184, 0.45);
cursor: pointer;
position: relative;
overflow: hidden;
}
.trending-pill-card-track {
display: flex;
align-items: center;
gap: 10px;
will-change: transform;
}
.trending-pill-card-track.trending-marquee {
animation: trendingMarqueeLTR var(--marquee-duration, 9s) linear forwards;
}
.trending-pill-card-inner {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.trending-pill-cover {
height: 80px;
width: 220px;
max-width: 220px;
border-radius: 14px;
overflow: hidden;
background: #020617;
flex-shrink: 0;
position: relative;
}
.trending-pill-cover-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(7px) brightness(0.45) saturate(1.4);
transform: scale(1.1);
display: block;
}
.trending-pill-cover-fg {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
object-fit: contain;
display: block;
}
.trending-pill-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.trending-pill-title {
font-size: 0.85rem;
color: var(--text-primary);
white-space: nowrap;
margin-bottom: 2px;
}
.trending-pill-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 0.75rem;
color: var(--text-secondary);
}
.trending-mobile-dots {
display: none;
}
@keyframes trendingFlash {
from {
opacity: 0.5;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1.02);
}
}
@keyframes trendingMarqueeLTR {
0% {
transform: translateX(var(--marquee-start, 0px));
}
100% {
transform: translateX(var(--marquee-end, 0px));
}
}
.trending-goat-mode {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.trending-goat-mode .trending-pill-card {
display: flex;
justify-content: center;
width: 100%;
}
.trending-goat-mode .trending-pill-card-track {
animation: none !important;
transform: none !important;
display: flex;
justify-content: center;
width: 100%;
}
.trending-goat-mode .trending-pill-card-inner {
animation: goatPulse 2s ease-in-out infinite;
display: flex !important;
}
@keyframes goatPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
.fireworks-container {
position: absolute;
top: -50px;
left: -50px;
right: -50px;
bottom: -50px;
pointer-events: none;
overflow: visible;
z-index: 10;
}
.firework {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow:
0 0 6px 2px currentColor,
0 0 12px 4px currentColor;
animation: fireworkLaunch var(--fw-duration, 1s) ease-out forwards;
}
.firework::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: linear-gradient(to bottom, currentColor, transparent);
opacity: 0.6;
}
.firework-particle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow:
0 0 8px 3px currentColor,
0 0 16px 6px currentColor,
0 0 24px 8px rgba(255,255,255,0.3);
animation: fireworkBurst var(--burst-duration, 1s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.firework-particle.sparkle {
width: 3px;
height: 3px;
box-shadow:
0 0 4px 2px currentColor,
0 0 8px 4px currentColor;
animation: fireworkSparkle var(--burst-duration, 0.8s) ease-out forwards;
}
.firework-particle.trail {
width: 4px;
height: 4px;
opacity: 0.7;
animation: fireworkTrail var(--burst-duration, 1.2s) ease-out forwards;
}
@keyframes fireworkLaunch {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: translateY(var(--fw-travel, -100px)) scale(0.3);
opacity: 0;
}
}
@keyframes fireworkBurst {
0% {
transform: translate(0, 0) scale(1.5);
opacity: 1;
}
30% {
opacity: 1;
}
100% {
transform: translate(var(--burst-x, 30px), var(--burst-y, 30px)) scale(0);
opacity: 0;
}
}
@keyframes fireworkSparkle {
0% {
transform: translate(0, 0) scale(1) rotate(0deg);
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
transform: translate(var(--burst-x, 20px), var(--burst-y, 20px)) scale(0) rotate(180deg);
opacity: 0;
}
}
@keyframes fireworkTrail {
0% {
transform: translate(0, 0) scale(1);
opacity: 0.8;
}
100% {
transform: translate(var(--burst-x, 40px), calc(var(--burst-y, 40px) + 20px)) scale(0);
opacity: 0;
}
}
.trending-badge-goat {
background: linear-gradient(135deg, #ffd700 0%, #ff8c00 50%, #ffd700 100%) !important;
color: #1a1a2e !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(255,255,255,0.3);
animation: goatBadgeShine 2s linear infinite;
}
@keyframes goatBadgeShine {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.trending-badge-goat {
background-size: 200% auto;
}
@media (max-width: 960px) {
.trending-pill-inner {
flex-direction: column;
}
.trending-pill-card {
width: 100%;
}
.trending-pill-cover {
height: 64px;
max-width: 180px;
}
}
.toolbar-top-row {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 16px;
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.toolbar-left {
display: flex;
align-items: flex-start;
gap: 8px;
flex-wrap: nowrap;
min-width: 0;
justify-content: center;
}
.search-bar-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 360px;
max-width: 700px;
min-width: 240px;
position: relative;
justify-content: flex-start;
align-items: stretch;
}
.search-bar {
display: flex;
align-items: center;
gap: 8px;
background: rgba(var(--bg-base-rgb), 0.72);
padding: 8px 14px;
border-radius: 12px;
border: 1px solid rgba(var(--accent-rgb), 0.35);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
height: 38px;
box-sizing: border-box;
font-family: 'Orbitron', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.search-bar:focus-within {
border-color: var(--accent-primary);
box-shadow: var(--glow-strong);
}
.search-icon {
font-size: 0.85rem;
opacity: 0.6;
cursor: pointer;
transition: opacity 0.2s ease;
}
.search-bar:focus-within .search-icon {
opacity: 1;
}
.remote-filter-select,
.category-filter-select {
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(var(--accent-rgb), 0.35);
background: rgba(var(--bg-base-rgb), 0.72);
font-size: 0.85rem;
color: var(--text-primary);
outline: none;
min-width: 130px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
height: 38px;
box-sizing: border-box;
}
.remote-filter-select:hover,
.category-filter-select:hover {
border-color: rgba(var(--accent-rgb), 0.55);
}
.remote-filter-select:focus,
.category-filter-select:focus {
border-color: var(--accent-primary);
box-shadow: var(--glow-strong);
}
.search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 0.9rem;
color: var(--text-primary);
}
.search-input::placeholder {
color: rgba(148, 163, 184, 0.7);
font-size: 0.85rem;
}
.search-clear-btn {
background: rgba(148, 163, 184, 0.1);
border: none;
cursor: pointer;
font-size: 1.1rem;
color: rgba(148, 163, 184, 0.6);
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
line-height: 1;
}
.search-clear-btn:hover {
background: rgba(248, 113, 113, 0.15);
color: #fca5a5;
}
.search-results {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
}
.search-results-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px 8px;
margin-bottom: 4px;
border-bottom: 1px solid var(--border-color);
}
.search-results-count {
font-size: 0.78rem;
color: var(--text-secondary);
letter-spacing: 0.04em;
}
.search-export-btn {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb), 0.35);
background: rgba(var(--accent-rgb), 0.08);
color: rgba(var(--accent-rgb), 0.85);
cursor: pointer;
transition: all 0.15s ease;
}
.search-export-btn:hover {
background: rgba(var(--accent-rgb), 0.16);
border-color: rgba(var(--accent-rgb), 0.65);
color: var(--neon-cyan);
}
.search-result-item {
padding: 6px 8px;
border-radius: 8px;
cursor: pointer;
display: flex;
gap: 8px;
align-items: center;
color: var(--text-primary);
font-size: 0.9rem;
}
.search-category-badge {
margin-left: auto;
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 2px 8px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.18);
color: rgba(191, 219, 254, 0.95);
border: 1px solid rgba(37, 99, 235, 0.35);
}
[data-theme="light"] .search-category-badge {
background: rgba(37, 99, 235, 0.12);
color: #1d4ed8;
border: 1px solid rgba(37, 99, 235, 0.22);
}
.search-result-item:hover {
background: var(--card-bg);
}
.search-scroll-hint {
margin-top: 6px;
font-size: 0.78rem;
color: rgba(226, 232, 240, 0.92);
text-align: center;
letter-spacing: 0.04em;
font-weight: 600;
}
.search-disclaimer {
margin-top: 4px;
font-size: 0.7rem;
color: rgba(148, 163, 184, 0.6);
text-align: center;
max-width: 100%;
word-break: break-word;
overflow: visible;
line-height: 1.3;
}
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 4px;
}
.breadcrumb-item {
color: var(--accent-primary);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
padding: 8px 14px;
border-radius: 12px;
background: rgba(var(--accent-rgb), 0.10);
border: 1px solid rgba(var(--accent-rgb), 0.28);
transition: all 0.2s ease;
cursor: pointer;
height: 38px;
box-sizing: border-box;
white-space: nowrap;
display: flex;
align-items: center;
}
.breadcrumb-item:hover {
background: rgba(var(--accent-rgb), 0.16);
border-color: rgba(var(--accent-rgb), 0.55);
box-shadow: var(--glow-cyan);
transform: translateY(-1px);
}
.user-info {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
padding: 6px 0;
flex-wrap: wrap;
}
.admin-role-btn {
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid rgba(var(--accent-rgb), 0.38);
color: rgba(217, 249, 255, 0.95);
padding: 5px 10px;
border-radius: 999px;
cursor: pointer;
font-size: 0.72rem;
font-weight: 500;
display: none;
transition: all 0.2s ease;
}
.admin-role-btn.visible {
display: inline-flex;
align-items: center;
gap: 4px;
}
.admin-role-btn:hover {
background: rgba(var(--accent-rgb), 0.14);
border-color: rgba(var(--accent-rgb), 0.65);
box-shadow: var(--glow-cyan);
transform: translateY(-1px);
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, #667eea, #764ba2);
object-fit: cover;
border: 2px solid rgba(148, 163, 184, 0.2);
}
#userName {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-primary);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.logout-btn {
background: rgba(var(--accent2-rgb), 0.08);
border: 1px solid rgba(var(--accent2-rgb), 0.45);
color: rgba(255, 214, 247, 0.95);
padding: 5px 12px;
border-radius: 999px;
cursor: pointer;
font-size: 0.75rem;
font-weight: 500;
transition: all 0.2s ease;
}
.logout-btn:hover {
background: rgba(var(--accent2-rgb), 0.14);
border-color: rgba(var(--accent2-rgb), 0.7);
box-shadow: var(--glow-magenta);
transform: translateY(-1px);
}
.admin-panel-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
display: none;
align-items: center;
justify-content: center;
z-index: 10040;
pointer-events: none;
}
.admin-panel-box {
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.96), rgba(var(--bg-base-rgb), 0.86)),
radial-gradient(circle at 20% 15%, rgba(var(--accent-rgb), 0.10), transparent 60%);
border-radius: 18px;
border: 1px solid rgba(var(--accent-rgb), 0.45);
box-shadow: var(--shadow);
padding: 18px 20px;
width: 95%;
max-width: 1100px;
max-height: 80vh;
overflow: auto;
color: var(--text-primary);
font-size: 0.85rem;
pointer-events: auto;
}
.admin-panel-box.admin-panel-flash {
animation: admin-panel-flash 0.35s ease-out;
}
@keyframes admin-panel-flash {
0% {
box-shadow: var(--shadow);
background-color: var(--card-bg);
}
30% {
box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.35), var(--shadow);
background-color: rgba(15, 23, 42, 0.96);
}
100% {
box-shadow: var(--shadow);
background-color: var(--card-bg);
}
}
.admin-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
gap: 8px;
}
.admin-panel-header-actions {
display: flex;
align-items: center;
gap: 6px;
}
.admin-panel-title {
font-size: 1rem;
font-weight: 600;
}
.admin-panel-close-btn {
border: none;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.8rem;
cursor: pointer;
background: rgba(var(--bg-base-rgb), 0.85);
color: var(--text-secondary);
border: 1px solid rgba(var(--accent-rgb), 0.32);
}
.admin-panel-close-btn:hover {
background: rgba(var(--accent-rgb), 0.14);
color: var(--text-primary);
border-color: rgba(var(--accent-rgb), 0.65);
box-shadow: var(--glow-cyan);
}
.admin-panel-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 14px;
}
.admin-panel-section {
background: rgba(var(--bg-base-rgb), 0.72);
border-radius: 12px;
border: 1px solid rgba(var(--accent-rgb), 0.28);
padding: 10px 12px;
}
.admin-panel-section h4 {
font-size: 0.85rem;
margin-bottom: 6px;
}
.admin-panel-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.78rem;
white-space: pre-wrap;
word-break: break-word;
}
.owner-console-output-wrap {
position: relative;
}
.owner-console-run-wrap {
display: flex;
flex-direction: column;
gap: 6px;
align-items: stretch;
}
.owner-console-popout-btn {
width: 26px;
height: 26px;
border-radius: 8px;
border: 1px solid rgba(var(--accent-rgb), 0.35);
background: rgba(var(--accent-rgb), 0.10);
color: var(--text-primary);
cursor: pointer;
font-size: 0.85rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-end;
}
.owner-console-popout-btn:hover {
background: rgba(var(--accent-rgb), 0.16);
border-color: rgba(var(--accent-rgb), 0.6);
}
.owner-help-popout-overlay {
z-index: 10120;
pointer-events: auto;
}
.owner-help-popout-box {
max-width: 1200px;
width: 98%;
max-height: 92vh;
overflow: auto;
animation: ownerHelpPopoutIn 0.22s ease-out;
}
@keyframes ownerHelpPopoutIn {
0% {
opacity: 0;
transform: translateY(6px) scale(0.985);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.owner-help-popout-pre {
margin-top: 10px;
white-space: pre;
word-break: normal;
overflow: hidden;
font-size: 0.78rem;
}
.admin-panel-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
margin-bottom: 6px;
}
.admin-panel-card {
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.90), rgba(var(--bg-base-rgb), 0.74)),
radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.08), transparent 60%);
border-radius: 10px;
border: 1px solid rgba(var(--accent-rgb), 0.32);
padding: 6px 8px;
}
.admin-panel-card-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.admin-panel-card-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
}
.admin-panel-card-sub {
font-size: 0.7rem;
color: var(--text-secondary);
}
.admin-panel-card-reset-btn {
margin-top: 4px;
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(var(--accent2-rgb), 0.45);
background: rgba(var(--accent2-rgb), 0.10);
color: rgba(255, 214, 247, 0.95);
cursor: pointer;
float: right;
}
.admin-panel-card-reset-btn:hover {
background: rgba(var(--accent2-rgb), 0.16);
border-color: rgba(var(--accent2-rgb), 0.75);
box-shadow: var(--glow-magenta);
}
.admin-panel-table {
margin-top: 4px;
overflow-x: visible;
}
.owner-quick-console {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
background:
linear-gradient(90deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent2-rgb), 0.06), rgba(var(--bg-base-rgb), 0.92));
border-top: 1px solid rgba(var(--accent-rgb), 0.55);
padding: 10px 16px;
display: none;
z-index: 99999 !important;
box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.8);
box-sizing: border-box;
}
.owner-quick-console.visible {
display: flex !important;
align-items: center;
gap: 10px;
}
.owner-quick-console-prefix {
color: rgba(217, 249, 255, 0.95);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 600;
font-size: 0.9rem;
text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.22);
}
.owner-quick-console-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.9rem;
}
.owner-quick-console-input::placeholder {
color: var(--text-secondary);
opacity: 0.6;
}
.owner-quick-console-output {
position: fixed !important;
bottom: 50px !important;
left: 16px !important;
right: 16px !important;
max-height: 200px;
overflow-y: auto;
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.96), rgba(var(--bg-base-rgb), 0.84)),
radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.08), transparent 60%);
border: 1px solid rgba(var(--accent-rgb), 0.35);
border-radius: 8px;
padding: 10px 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.8rem;
color: var(--text-primary);
white-space: pre-wrap;
display: none;
z-index: 99998 !important;
}
.owner-quick-console-output.visible {
display: block;
}
.owner-quick-console-hint {
color: var(--text-secondary);
font-size: 0.75rem;
opacity: 0.7;
}
.admin-remotes-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
table-layout: fixed;
}
.admin-remotes-table th,
.admin-remotes-table td {
padding: 6px 10px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.16);
vertical-align: middle;
box-sizing: border-box;
border-right: 1px solid rgba(var(--accent-rgb), 0.10);
}
.admin-remotes-table th:last-child,
.admin-remotes-table td:last-child {
border-right: none;
}
.admin-remotes-table th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.68rem;
}
.admin-remotes-table th:nth-child(n+3) {
padding-left: 8px;
padding-right: 8px;
}
.admin-remotes-table th:nth-child(5) {
text-overflow: clip;
}
.admin-remotes-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-remotes-table th:nth-child(1),
.admin-remotes-table td:nth-child(1) {
width: 43%;
}
.admin-remotes-table th:nth-child(2),
.admin-remotes-table td:nth-child(2) {
width: 22%;
}
.admin-remotes-table th:nth-child(3),
.admin-remotes-table td:nth-child(3),
.admin-remotes-table th:nth-child(4),
.admin-remotes-table td:nth-child(4) {
width: 11%;
text-align: right;
font-variant-numeric: tabular-nums;
}
.admin-remotes-table th:nth-child(5),
.admin-remotes-table td:nth-child(5) {
width: 13%;
text-align: right;
font-variant-numeric: tabular-nums;
}
.admin-remotes-table th:nth-child(n+3) {
text-align: right;
}
.admin-remotes-table tbody tr {
background: rgba(var(--bg-base-rgb), 0.22);
}
.admin-remotes-table tbody tr:nth-child(even) {
background: rgba(var(--bg-base-rgb), 0.34);
}
.admin-remotes-table tbody tr:hover {
background: rgba(var(--accent-rgb), 0.06);
}
.admin-remote-status-pill {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
border: 1px solid transparent;
}
.admin-remote-status-ok {
background: rgba(22, 163, 74, 0.18);
color: #bbf7d0;
border-color: rgba(51, 255, 122, 0.38);
}
.admin-remote-status-warn {
background: rgba(245, 158, 11, 0.18);
color: #fed7aa;
border-color: rgba(255, 176, 32, 0.45);
}
.admin-remote-status-error {
background: rgba(239, 68, 68, 0.16);
color: #fecaca;
border-color: rgba(var(--accent2-rgb), 0.35);
}
.admin-remote-error-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
padding: 1px 6px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
background: rgba(248, 113, 113, 0.16);
color: #fecaca;
border: 1px solid rgba(var(--accent2-rgb), 0.25);
}
.admin-remote-info-pill {
background: rgba(250, 204, 21, 0.24);
color: #fef9c3;
border: 1px solid rgba(255, 176, 32, 0.35);
}
.admin-remote-link {
background: none;
border: none;
padding: 0;
margin: 0;
color: var(--accent-primary);
cursor: pointer;
font-size: 0.78rem;
}
.remotes-grid {
display: grid;
grid-template-columns: repeat(6, 130px);
justify-content: center;
gap: 18px;
margin-bottom: 26px;
}
.remote-card {
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.88), rgba(var(--bg-base-rgb), 0.72)),
radial-gradient(circle at top, rgba(var(--accent-rgb), 0.12), transparent 65%);
border: 1px solid rgba(var(--accent-rgb), 0.35);
border-radius: 18px;
padding: 18px 18px 16px;
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.remotes-grid .remote-card:nth-child(1) { grid-column: 1 / 3; }
.remotes-grid .remote-card:nth-child(2) { grid-column: 3 / 5; }
.remotes-grid .remote-card:nth-child(3) { grid-column: 5 / 7; }
.remotes-grid.grid-5 .remote-card:nth-child(4) { grid-column: 2 / 4; }
.remotes-grid.grid-5 .remote-card:nth-child(5) { grid-column: 4 / 6; }
.remotes-grid.grid-6 .remote-card:nth-child(4) { grid-column: 1 / 3; }
.remotes-grid.grid-6 .remote-card:nth-child(5) { grid-column: 3 / 5; }
.remotes-grid.grid-6 .remote-card:nth-child(6) { grid-column: 5 / 7; }
.remote-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.85), var(--glow-strong);
border-color: rgba(var(--accent-rgb), 0.7);
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.92), rgba(var(--bg-base-rgb), 0.76)),
radial-gradient(circle at top, rgba(var(--accent-rgb), 0.18), transparent 70%);
}
.remote-card.remote-at-quota {
cursor: default;
opacity: 0.6;
filter: grayscale(0.9);
}
.remote-card.remote-at-quota:hover {
transform: none;
box-shadow: none;
border-color: var(--border-color);
}
.remote-status-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #fb923c;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
background: rgba(15, 23, 42, 0.78);
pointer-events: none;
}
.tooltip-wrap {
position: relative;
display: inline-flex;
}
.tooltip-wrap::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
padding: 8px 10px;
border-radius: 10px;
max-width: 280px;
width: max-content;
background: rgba(15, 23, 42, 0.96);
border: 1px solid rgba(var(--accent-rgb), 0.22);
color: var(--text-primary);
font-size: 0.85rem;
line-height: 1.25;
white-space: normal;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 10020;
}
.tooltip-wrap:hover::after {
opacity: 1;
}
.remote-icon {
font-size: 2rem;
margin-bottom: 12px;
display: inline-flex;
}
.remote-name {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.remote-type {
color: var(--text-secondary);
font-size: 0.85rem;
}
.files-container {
display: none;
margin-top: 16px;
}
.browse-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
margin-bottom: 12px;
}
.browse-toolbar .btn,
.browse-toolbar select.btn {
height: 38px;
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.browse-toolbar select.btn {
line-height: 38px;
}
.home-landing-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
margin-bottom: 6px;
}
.home-landing-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.home-promo-card {
margin-bottom: 20px;
padding: 24px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
border: 2px solid rgba(16, 185, 129, 0.5);
border-radius: 16px;
text-align: center;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}
.home-promo-card-title {
font-size: 1.5rem;
font-weight: 700;
color: #10b981;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.home-promo-card-copy {
margin: 0 0 16px 0;
font-size: 1rem;
color: var(--text-primary);
line-height: 1.6;
font-weight: 500;
}
.home-promo-card-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.home-promo-card-footer {
margin: 12px 0 0 0;
font-size: 0.85rem;
color: var(--text-secondary);
}
.file-grid {
display: grid;
gap: 10px;
}
.file-item {
display: flex;
align-items: center;
padding: 12px 14px;
border-radius: 14px;
margin-bottom: 6px;
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.92), rgba(var(--bg-base-rgb), 0.80)),
radial-gradient(circle at 10% 20%, rgba(var(--accent-rgb), 0.08), transparent 55%);
border: 1px solid rgba(var(--accent-rgb), 0.32);
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
content-visibility: auto;
contain-intrinsic-size: auto 104px;
}
.scroll-target-active .file-item {
content-visibility: visible !important;
}
.file-item:hover {
border-color: rgba(var(--accent-rgb), 0.7);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.85), var(--glow-cyan);
transform: translateY(-2px);
}
.file-cover {
flex: 0 0 220px;
max-width: 220px;
border-radius: 8px;
overflow: hidden;
height: 80px;
position: relative;
contain: paint;
}
.file-cover-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: blur(7px) brightness(0.45) saturate(1.4);
transform: scale(1.1);
display: block;
will-change: transform;
}
.file-cover-fg {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.new-item-badge {
position: absolute;
top: 6px;
right: 6px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 3px 7px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
z-index: 2;
pointer-events: none;
}
.testers-item-badge {
position: absolute;
top: 6px;
left: 6px;
background: linear-gradient(135deg, rgba(249, 115, 22, 0.96) 0%, rgba(234, 88, 12, 0.96) 100%);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 3px 7px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.08em;
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
border: 1px solid rgba(255, 255, 255, 0.12);
z-index: 2;
pointer-events: none;
}
.file-cover-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 0.8rem;
font-weight: 600;
text-align: center;
padding: 6px;
color: var(--text-secondary);
background: #020617;
}
.file-icon {
font-size: 24px;
margin-right: 8px;
width: 30px;
text-align: center;
}
.file-info {
flex: 1 1 260px;
min-width: 220px;
}
.file-name {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
word-break: break-word;
}
.file-meta {
font-size: 14px;
color: var(--text-secondary);
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.file-actions {
display: flex;
gap: 10px;
align-items: center;
background: rgba(var(--bg-base-rgb), 0.82);
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb), 0.38);
box-shadow: 0 0 0 1px rgba(var(--bg-base-rgb), 0.9);
}
.btn {
padding: 7px 14px;
border: none;
border-radius: 999px;
font-weight: 500;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
letter-spacing: 0.02em;
}
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(0.35);
transform: none;
box-shadow: none;
}
.btn:active {
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.btn-primary {
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent2-rgb), 0.14));
color: rgba(241, 245, 249, 0.98);
border: 1px solid rgba(var(--accent-rgb), 0.55);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.65);
}
.btn-primary:hover {
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent2-rgb), 0.18));
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.72), var(--glow-strong);
border-color: rgba(var(--accent-rgb), 0.75);
}
.btn-secondary {
background: rgba(var(--bg-base-rgb), 0.62);
color: var(--text-primary);
border: 1px solid rgba(var(--accent-rgb), 0.32);
}
.btn-secondary:hover {
background: rgba(var(--bg-base-rgb), 0.74);
border-color: rgba(var(--accent-rgb), 0.6);
box-shadow: var(--glow-cyan);
}
.action-btn {
background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.08));
border: 1px solid rgba(var(--accent-rgb), 0.38);
border-radius: 999px;
padding: 7px 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.action-btn:hover {
background: rgba(var(--accent-rgb), 0.20);
border-color: rgba(var(--accent-rgb), 0.72);
box-shadow: var(--glow-soft);
}
.btn-batch-disabled {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
.my-list-badge {
display: none;
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold;
border: 2px solid rgba(30, 41, 59, 0.8);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
z-index: 1;
}
.btn-in-list {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.95) 0%, rgba(168, 85, 247, 0.95) 100%) !important;
border-color: rgba(168, 85, 247, 0.85) !important;
color: #ffffff !important;
box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25) !important;
}
.btn-in-list:hover {
background: linear-gradient(135deg, rgba(109, 40, 217, 0.98) 0%, rgba(147, 51, 234, 0.98) 100%) !important;
border-color: rgba(147, 51, 234, 0.95) !important;
box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35) !important;
}
.my-list-item {
transition: background-color 0.2s ease;
}
.my-list-item:hover {
background-color: rgba(30, 41, 59, 0.5);
}
[data-theme="light"] .my-list-item:hover {
background-color: rgba(226, 232, 240, 0.8);
}
.checkbox-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 12px;
background: rgba(30, 41, 59, 0.8);
border: 1px solid var(--border-color);
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
transition: all 0.2s ease;
user-select: none;
}
.checkbox-toggle:hover {
background: rgba(51, 65, 85, 0.9);
border-color: var(--accent-primary);
}
.checkbox-toggle input[type="checkbox"] {
display: none;
}
.checkbox-toggle .toggle-indicator {
width: 16px;
height: 16px;
border-radius: 4px;
border: 2px solid var(--border-color);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.checkbox-toggle .toggle-indicator::after {
content: '';
width: 8px;
height: 8px;
border-radius: 2px;
background: transparent;
transition: all 0.2s ease;
}
.checkbox-toggle input[type="checkbox"]:checked + .toggle-indicator {
border-color: var(--accent-primary);
background: linear-gradient(135deg, #4338ca, #6b21a8);
}
.checkbox-toggle input[type="checkbox"]:checked + .toggle-indicator::after {
background: white;
}
.checkbox-toggle .toggle-label {
white-space: nowrap;
}
[data-theme="light"] .checkbox-toggle {
background: #ffffff;
border-color: rgba(71, 85, 105, 0.2);
}
[data-theme="light"] .checkbox-toggle:hover {
background: rgba(37, 99, 235, 0.1);
border-color: var(--accent-primary);
}
.status-indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10010;
padding: 15px 20px;
border-radius: 15px;
font-size: 0.9rem;
text-align: center;
max-width: min(90%, 700px);
}
.status-success {
background: rgba(51, 255, 122, 0.10);
color: rgba(224, 255, 238, 0.95);
border: 1px solid rgba(51, 255, 122, 0.45);
box-shadow: 0 0 18px rgba(51, 255, 122, 0.22);
}
.status-info {
background: rgba(var(--accent-rgb), 0.10);
color: rgba(217, 249, 255, 0.95);
border: 1px solid rgba(var(--accent-rgb), 0.45);
box-shadow: var(--glow-cyan);
}
.wiki-overlay {
position: fixed;
inset: 0;
z-index: 10020;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
}
.wiki-panel {
width: min(960px, 100% - 32px);
max-height: min(90vh, 780px);
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.96), rgba(var(--bg-base-rgb), 0.86)),
radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.10), transparent 55%);
border-radius: 18px;
border: 1px solid rgba(var(--accent-rgb), 0.45);
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.95);
display: flex;
flex-direction: column;
overflow: hidden;
}
.wiki-panel-header {
padding: 14px 18px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.wiki-panel-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.wiki-panel-close-btn {
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb), 0.32);
background: rgba(var(--bg-base-rgb), 0.75);
color: var(--text-secondary);
font-size: 0.8rem;
cursor: pointer;
}
.wiki-panel-close-btn:hover {
background: rgba(var(--accent-rgb), 0.14);
border-color: rgba(var(--accent-rgb), 0.65);
color: #e5e7eb;
box-shadow: var(--glow-cyan);
}
.wiki-panel-body {
padding: 16px 18px 18px;
overflow-y: auto;
font-size: 0.9rem;
color: var(--text-secondary);
}
.wiki-panel-body h2 {
font-size: 1.05rem;
margin-top: 0;
margin-bottom: 8px;
color: var(--text-primary);
}
.wiki-panel-body h3 {
font-size: 0.95rem;
margin-top: 14px;
margin-bottom: 6px;
color: var(--text-primary);
}
.wiki-panel-body p {
margin: 4px 0 8px;
}
.wiki-panel-body ul {
margin: 4px 0 10px 18px;
padding: 0;
}
.wiki-panel-body li {
margin-bottom: 4px;
}
.title-details-header {
display: flex;
gap: 14px;
align-items: flex-start;
}
.title-details-cover {
width: 140px;
height: 200px;
border-radius: 14px;
overflow: hidden;
background: rgba(15, 23, 42, 0.35);
border: 1px solid rgba(148, 163, 184, 0.18);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.title-details-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.title-details-title {
font-size: 1.25rem;
font-weight: 800;
color: var(--text-primary);
margin: 0;
line-height: 1.2;
}
.title-details-subtitle {
margin-top: 6px;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.4;
}
.title-details-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.title-details-pill {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.02em;
padding: 3px 10px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.18);
color: rgba(191, 219, 254, 0.95);
border: 1px solid rgba(37, 99, 235, 0.35);
}
[data-theme="light"] .title-details-pill {
background: rgba(37, 99, 235, 0.12);
color: #1d4ed8;
border: 1px solid rgba(37, 99, 235, 0.22);
}
.title-details-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.title-details-actions .btn {
min-width: 0;
}
.title-details-section {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(var(--accent-rgb), 0.14);
}
.title-details-section-title {
font-size: 0.95rem;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 8px 0;
}
.title-details-warning {
padding: 10px 12px;
border-radius: 12px;
background: rgba(124, 58, 237, 0.14);
border: 1px solid rgba(124, 58, 237, 0.30);
color: rgba(233, 213, 255, 0.96);
line-height: 1.45;
margin-top: 12px;
}
.readme-gate-header {
background: rgba(255, 77, 79, 0.18);
border-bottom: 1px solid rgba(255, 77, 79, 0.45);
justify-content: center;
}
#readmeGateOverlay.readme-gate-image .readme-gate-header {
display: none;
}
.readme-gate-title {
color: #ff4d4f;
font-weight: 900;
letter-spacing: 0.02em;
text-transform: uppercase;
text-align: center;
width: 100%;
}
.readme-gate-body {
padding: 16px 18px 18px;
overflow-y: auto;
flex: 1;
font-size: 0.9rem;
color: var(--text-secondary);
}
#readmeGateOverlay.readme-gate-image .readme-gate-body {
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.readme-gate-body img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
#readmeGateOverlay.readme-gate-image .readme-gate-body img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: 0;
}
.readme-gate-body pre {
white-space: pre-wrap;
word-break: break-word;
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.85rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.98);
}
[data-theme="light"] .readme-gate-body pre {
color: rgba(15, 23, 42, 0.92);
}
.readme-gate-footer {
padding: 14px 18px;
border-top: 1px solid rgba(var(--accent-rgb), 0.18);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(var(--bg-base-rgb), 0.72);
}
.readme-gate-footer-note {
font-size: 1.05rem;
font-weight: 900;
color: #ff4d4f;
letter-spacing: 0.02em;
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.95),
1px -1px 0 rgba(0, 0, 0, 0.95),
-1px 1px 0 rgba(0, 0, 0, 0.95),
1px 1px 0 rgba(0, 0, 0, 0.95);
}
.readme-gate-footer-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.loading {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
}
.loading-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(2px);
}
.loading-modal {
position: relative;
background:
linear-gradient(135deg, rgba(var(--bg-base-rgb), 0.96), rgba(var(--bg-base-rgb), 0.86)),
radial-gradient(circle at 20% 20%, rgba(var(--accent2-rgb), 0.10), transparent 60%);
border-radius: 12px;
padding: 24px 28px;
min-width: 260px;
max-width: 360px;
text-align: center;
border: 1px solid rgba(var(--accent-rgb), 0.38);
box-shadow: 0 22px 45px rgba(0, 0, 0, 0.6);
color: var(--text-secondary);
}
.loading-modal p {
margin-top: 12px;
font-size: 0.95rem;
}
.loading-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid rgba(148, 163, 184, 0.4);
border-top-color: var(--accent-primary);
border-right-color: var(--accent-secondary);
animation: spin 0.8s linear infinite, spinnerPulse 1.6s ease-in-out infinite;
margin: 0 auto;
box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.0);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spinnerPulse {
0% {
box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.0);
}
50% {
box-shadow: 0 0 18px 3px rgba(96, 165, 250, 0.45);
}
100% {
box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.0);
}
}
.hidden {
display: none !important;
}
.auth-error-display {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.auth-error-display h3 {
margin-top: 0;
margin-bottom: 10px;
color: #721c24;
}
.auth-error-display p {
margin-bottom: 20px;
font-size: 16px;
}
.auth-error-display a {
color: #8a1f27;
text-decoration: underline;
cursor: pointer;
word-break: break-word;
}
.auth-error-display a:hover {
color: #5f272b;
}
.auth-error-note {
margin-top: -6px;
margin-bottom: 18px;
font-size: 0.9rem;
color: #5f272b;
}
.error-actions {
display: flex;
gap: 15px;
justify-content: center;
}
.error-actions .btn {
padding: 10px 20px;
font-size: 16px;
}
@media (max-width: 768px) {
html,
body {
overflow-x: hidden;
}
.container {
padding: 18px 10px 24px;
width: 100%;
max-width: 100%;
}
.header {
padding: 16px 14px;
border-radius: 16px;
margin-bottom: 10px;
}
.landing-credit {
position: relative;
top: auto;
right: auto;
text-align: right;
font-size: 0.55rem;
margin-bottom: 6px;
padding-right: 8px;
opacity: 0.5;
}
.header-inner {
flex-direction: column;
gap: 8px;
padding-left: 0;
}
.header-logo {
position: static;
transform: none;
width: 44px;
height: 44px;
margin-bottom: 4px;
}
.header h1 {
font-size: 1.4rem;
letter-spacing: 0.08em;
}
.subtitle {
font-size: 0.8rem;
}
.auth-section {
padding: 18px 14px;
border-radius: 16px;
}
.auth-section h2 {
font-size: 1rem;
}
.telegram-login-container {
padding: 14px 12px;
}
.telegram-login-btn {
padding: 14px 24px;
font-size: 16px;
min-width: 240px;
width: 100%;
max-width: 300px;
}
.browser-section {
padding: 14px 12px 18px;
border-radius: 16px;
min-height: auto;
}
.title-details-header {
flex-direction: column;
align-items: stretch;
}
.title-details-cover {
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 140 / 200;
margin: 0 auto;
}
.title-details-title {
font-size: 1.05rem;
word-break: break-word;
}
.title-details-badges,
.title-details-actions,
.title-details-section {
width: 100%;
}
.title-details-actions .btn {
width: 100%;
}
.file-grid {
gap: 8px;
}
.file-item {
flex-direction: column;
align-items: stretch;
padding: 10px;
gap: 10px;
}
.file-cover {
width: 100%;
max-width: none;
height: 120px;
}
.file-info {
width: 100%;
min-width: 0;
}
.file-actions {
width: 100%;
justify-content: stretch;
flex-wrap: wrap;
}
.file-actions .btn {
flex: 1 1 140px;
}
.my-list-item {
padding: 12px !important;
gap: 10px !important;
flex-direction: column !important;
align-items: stretch !important;
}
.my-list-item > div:last-child {
width: 100%;
justify-content: stretch;
flex-wrap: wrap;
}
.my-list-item > div:last-child .btn {
flex: 1 1 140px;
}
.admin-panel-header,
.readme-gate-footer,
.wiki-panel-header {
flex-direction: column;
align-items: stretch;
}
.admin-panel-header-actions,
.wiki-panel-close-btn,
.readme-gate-footer > * {
width: 100%;
}
.admin-panel-grid,
.admin-panel-cards {
grid-template-columns: 1fr;
}
.admin-panel-box,
.wiki-panel,
.media-preview-box,
.loading-modal {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
}
.wiki-panel,
.admin-panel-box {
max-height: 88vh;
}
.wiki-panel-body,
.readme-gate-body,
#myRequestsContent,
#userActivityContent,
#missingCoversContent {
padding-left: 12px !important;
padding-right: 12px !important;
}
.admin-panel-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-panel-mono {
word-break: break-word;
}
.admin-request-item,
.request-audit-item {
padding: 12px !important;
}
.admin-request-item > div,
.request-audit-item > div {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
text-align: left !important;
}
.admin-request-item > div:last-child,
.request-audit-item > div:last-child {
align-items: stretch !important;
}
.admin-request-item > div > div:first-child,
.request-audit-item > div > div:first-child {
min-width: 0 !important;
}
.admin-request-item > div > div:last-child,
.request-audit-item > div > div:last-child {
width: 100% !important;
align-items: stretch !important;
}
.admin-request-item select,
.admin-request-item input,
.request-audit-item select,
.request-audit-item input {
width: 100%;
}
.admin-request-item button,
.request-audit-item button {
width: 100%;
}
#downloadStatusIndicator {
left: 8px !important;
right: 8px !important;
bottom: 8px !important;
width: auto !important;
max-width: none !important;
font-size: 0.85rem !important;
}
.status-indicator {
max-width: calc(100% - 16px);
width: calc(100% - 16px);
top: auto;
bottom: 12px;
transform: none;
left: 8px;
right: 8px;
}
#ownerSystemWidget,
.alpha-jump,
.alpha-jump-numbers,
.owner-quick-console,
.owner-quick-console-output {
display: none !important;
}
.downloads-button {
left: 8px;
bottom: 56px;
}
.feedback-button {
left: 8px;
bottom: 8px;
}
.back-to-top {
right: 8px;
bottom: 8px;
}
.home-landing-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.home-landing-row h3 {
margin-bottom: 0;
font-size: 1rem;
line-height: 1.3;
}
.home-landing-actions {
width: 100%;
gap: 6px;
}
.home-landing-actions .btn {
width: 100%;
}
.home-promo-card {
padding: 16px 12px;
}
.home-promo-card-title {
font-size: 1.1rem;
line-height: 1.35;
}
.home-promo-card-copy {
font-size: 0.92rem;
}
.home-promo-card-actions .btn,
.home-promo-card-actions a.btn {
width: 100%;
max-width: 100%;
}
.browse-toolbar {
flex-wrap: wrap;
align-items: stretch;
}
.browse-toolbar .btn,
.browse-toolbar select.btn {
width: 100%;
flex: 1 1 100%;
}
#batchControls {
width: 100%;
flex-wrap: wrap;
gap: 8px;
}
.title-details-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.title-details-actions .btn {
width: 100%;
justify-content: center;
}
.toolbar {
padding: 10px 12px;
border-radius: 14px;
gap: 10px;
}
.toolbar-top-row {
flex-direction: column;
gap: 10px;
}
.toolbar-left {
flex-wrap: wrap;
gap: 6px;
width: 100%;
align-items: stretch;
}
.search-bar-wrapper {
flex: 1 1 100%;
max-width: 100%;
min-width: 0;
width: 100%;
}
.search-bar {
height: auto;
min-height: 38px;
padding: 6px 10px;
gap: 6px;
}
.search-input {
font-size: 16px;
min-width: 0;
}
.search-disclaimer {
font-size: 0.72rem;
line-height: 1.35;
margin-top: 4px;
}
.remote-filter-select,
.category-filter-select {
min-width: 0;
flex: 1;
height: 42px;
font-size: 14px;
}
.breadcrumb {
gap: 4px;
flex-wrap: wrap;
}
.breadcrumb-item {
padding: 6px 10px;
font-size: 0.8rem;
height: auto;
}
.user-info {
flex-wrap: wrap;
gap: 6px;
}
#userName {
max-width: 100px;
font-size: 0.8rem;
}
.logout-btn {
padding: 4px 10px;
font-size: 0.7rem;
}
.admin-role-btn {
font-size: 0.65rem;
padding: 4px 8px;
}
.remotes-container {
display: flex;
flex-direction: column;
}
.remotes-grid {
order: 2;
grid-template-columns: 1fr;
justify-content: stretch;
gap: 10px;
margin-bottom: 16px;
}
.admin-panel-header,
.readme-gate-footer,
.wiki-panel-header,
.title-details-actions,
.file-actions,
.my-list-item > div:last-child {
gap: 8px;
}
.remote-card {
padding: 12px 10px;
border-radius: 14px;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.remotes-grid .remote-card:nth-child(1),
.remotes-grid .remote-card:nth-child(2),
.remotes-grid .remote-card:nth-child(3),
.remotes-grid .remote-card:nth-child(4),
.remotes-grid .remote-card:nth-child(5),
.remotes-grid .remote-card:nth-child(6) {
grid-column: auto !important;
}
.remotes-grid.grid-5 .remote-card:nth-child(4),
.remotes-grid.grid-5 .remote-card:nth-child(5),
.remotes-grid.grid-6 .remote-card:nth-child(4),
.remotes-grid.grid-6 .remote-card:nth-child(5),
.remotes-grid.grid-6 .remote-card:nth-child(6) {
grid-column: auto !important;
}
.home-promo-card {
order: 1;
margin-top: 0;
margin-bottom: 12px;
}
.remote-icon {
font-size: 1.6rem;
margin-bottom: 8px;
}
.remote-name {
font-size: 0.9rem;
}
.remote-type {
font-size: 0.75rem;
}
.file-item {
flex-direction: column;
align-items: stretch;
padding: 10px;
gap: 10px;
border-radius: 12px;
}
.file-cover {
flex: none;
max-width: 100%;
width: 100%;
height: 100px;
border-radius: 8px;
}
.new-item-badge {
font-size: 0.55rem;
padding: 2px 5px;
top: 4px;
right: 4px;
}
.testers-item-badge {
font-size: 0.55rem;
padding: 2px 5px;
top: 4px;
left: 4px;
}
.file-info {
flex: none;
min-width: 0;
width: 100%;
}
.file-name {
font-size: 0.9rem;
}
.file-meta {
font-size: 12px;
gap: 8px;
}
.file-icon {
font-size: 20px;
margin-right: 6px;
width: 24px;
}
.file-actions {
width: 100%;
justify-content: center;
padding: 8px 10px;
gap: 8px;
}
.btn {
padding: 8px 12px;
font-size: 12px;
}
.trending-pill {
padding: 10px 6px 12px;
border-radius: 14px;
margin-left: -4px;
margin-right: -4px;
width: calc(100% + 8px);
}
.trending-pill-label {
font-size: 0.9rem;
}
.trending-pill-mode-badge {
font-size: 0.7rem;
padding: 3px 10px;
}
.trending-pill-track {
overflow: visible;
min-height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.trending-pill-inner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.trending-pill-card {
width: calc(100% - 8px) !important;
max-width: none !important;
padding: 8px !important;
margin: 0 4px;
border-radius: 10px;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: visible;
min-height: auto;
display: flex;
}
.trending-pill-card-track {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
}
.trending-pill-card-inner {
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
display: none !important;
padding: 8px 0;
flex-shrink: 1 !important;
}
.trending-pill-card-inner.mobile-active {
display: flex !important;
animation: trendingMobileFadeIn 0.4s ease-out;
}
@keyframes trendingMobileFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.trending-pill-cover {
height: auto !important;
aspect-ratio: 460 / 215 !important;
width: 100% !important;
max-width: none !important;
border-radius: 10px !important;
flex-shrink: 1 !important;
}
.trending-pill-cover-fg {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.trending-pill-text {
gap: 6px;
width: 100%;
text-align: center;
padding: 4px 0;
}
.trending-pill-title {
font-size: 1.1rem;
white-space: normal;
line-height: 1.3;
font-weight: 600;
}
.trending-pill-meta {
font-size: 0.85rem;
gap: 10px;
justify-content: center;
}
.trending-mobile-dots {
display: flex;
flex-direction: row-reverse;
justify-content: center;
gap: 8px;
margin-top: 16px;
padding-bottom: 4px;
}
.trending-mobile-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(148, 163, 184, 0.3);
transition: background 0.2s ease, transform 0.2s ease;
}
.trending-mobile-dot.active {
background: var(--accent-primary);
transform: scale(1.2);
}
.wiki-panel {
width: calc(100% - 16px);
max-height: 85vh;
border-radius: 14px;
}
.wiki-panel-header {
padding: 12px 14px;
}
.wiki-panel-title {
font-size: 0.95rem;
}
.wiki-panel-body {
padding: 12px 14px;
font-size: 0.85rem;
}
.admin-panel-box {
width: 95%;
max-width: 100%;
padding: 14px 12px;
border-radius: 14px;
}
.admin-panel-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.admin-panel-cards {
grid-template-columns: repeat(2, 1fr);
}
.media-preview-box {
width: 95%;
padding: 14px 12px;
border-radius: 14px;
}
.media-preview-image,
.media-preview-video {
max-height: 50vh;
}
.loading-modal {
min-width: 200px;
max-width: 90%;
padding: 18px 20px;
}
.back-to-top {
right: 12px;
bottom: 12px;
padding: 8px 12px;
font-size: 12px;
}
.feedback-button {
left: 12px;
bottom: 12px;
padding: 8px 12px;
font-size: 12px;
}
.downloads-button {
left: 12px;
bottom: 56px;
padding: 8px 12px;
font-size: 12px;
}
.downloads-panel {
width: 100%;
}
.status-indicator {
max-width: 90%;
padding: 12px 16px;
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.container {
padding: 8px 8px 20px;
}
.header {
padding: 14px 12px;
}
.header h1 {
font-size: 1.2rem;
}
.remotes-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.remote-card {
padding: 12px 10px;
}
.file-cover {
height: 80px;
}
.trending-pill-card {
width: 260px;
min-width: 260px;
}
.trending-pill-cover {
height: 110px;
}
.trending-pill-title {
font-size: 0.9rem;
}
.admin-panel-cards {
grid-template-columns: 1fr;
}
}
.theme-toggle {
position: absolute;
top: 12px;
right: 12px;
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent2-rgb), 0.08)),
rgba(var(--bg-base-rgb), 0.82);
border: 1px solid rgba(var(--accent-rgb), 0.45);
border-radius: 20px;
padding: 6px 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
z-index: 10;
}
.theme-toggle:hover {
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent2-rgb), 0.12)),
rgba(var(--bg-base-rgb), 0.82);
border-color: rgba(var(--accent-rgb), 0.75);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), var(--glow-strong);
}
.theme-toggle-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.theme-toggle-text {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.header-top-actions {
position: absolute;
top: 12px;
right: 12px;
z-index: 1000;
display: grid;
grid-template-columns: auto auto;
gap: 10px 10px;
justify-items: center;
align-items: start;
}
.header-top-actions .animation-toggle,
.header-top-actions .theme-toggle,
.header-top-actions .theme-dropdown-wrap {
position: static;
top: auto;
right: auto;
left: auto;
}
.header-top-actions .theme-dropdown-wrap {
grid-column: 1 / -1;
justify-self: center;
z-index: 1001;
}
.header.theme-dropdown-open {
overflow: visible;
z-index: 50;
}
@media (max-width: 768px) {
.header-top-actions {
top: 8px;
right: 8px;
gap: 8px 8px;
}
.theme-toggle {
padding: 6px 8px;
}
.theme-toggle-text {
display: none;
}
}
.theme-dropdown-wrap {
position: relative;
z-index: 1001;
}
.theme-dropdown-btn {
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent2-rgb), 0.08)),
rgba(var(--bg-base-rgb), 0.82);
border: 1px solid rgba(var(--accent-rgb), 0.45);
border-radius: 20px;
padding: 6px 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
font-family: inherit;
white-space: nowrap;
}
.theme-dropdown-btn:hover {
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent2-rgb), 0.12)),
rgba(var(--bg-base-rgb), 0.82);
border-color: rgba(var(--accent-rgb), 0.75);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), var(--glow-strong);
}
.theme-dropdown-btn-text {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.theme-dropdown-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: rgba(var(--bg-base-rgb), 0.97);
border: 1px solid rgba(var(--accent-rgb), 0.40);
border-radius: 12px;
padding: 6px;
min-width: 170px;
box-shadow: 0 16px 40px rgba(0,0,0,0.7), var(--glow-cyan);
display: none;
flex-direction: column;
gap: 2px;
z-index: 1002;
}
.theme-dropdown-menu.open {
display: flex;
}
.theme-dropdown-item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 10px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-primary);
transition: background 0.15s ease;
border: 1px solid transparent;
font-family: inherit;
background: none;
width: 100%;
text-align: left;
}
.theme-dropdown-item:hover {
background: rgba(var(--accent-rgb), 0.10);
border-color: rgba(var(--accent-rgb), 0.30);
}
.theme-dropdown-item.active {
background: rgba(var(--accent-rgb), 0.14);
border-color: rgba(var(--accent-rgb), 0.45);
}
.theme-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
@media (max-width: 768px) {
.theme-dropdown-wrap {
}
.theme-dropdown-btn-text {
display: none;
}
}
.animation-toggle {
position: absolute;
top: 12px;
right: 100px;
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent2-rgb), 0.08)),
rgba(var(--bg-base-rgb), 0.82);
border: 1px solid rgba(var(--accent-rgb), 0.45);
border-radius: 20px;
padding: 6px 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
z-index: 10;
}
.animation-toggle:hover {
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent2-rgb), 0.12)),
rgba(var(--bg-base-rgb), 0.82);
border-color: rgba(var(--accent-rgb), 0.75);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), var(--glow-strong);
}
.animation-toggle-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.animation-toggle-text {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.animation-toggle {
top: 8px;
right: 55px;
padding: 6px 8px;
}
.animation-toggle-text {
display: none;
}
}
.animations-off .firework,
.animations-off .firework-particle,
.animations-off .flame,
.animations-off .header-star,
.animations-off .header-star::before,
.animations-off .header-star::after {
animation: none !important;
opacity: 0 !important;
}
.animations-off .fireworks-container,
.animations-off .flames-container,
.animations-off .header-stars {
display: none !important;
}
[data-theme="light"] {
--bg-primary: #f1f5f9 !important;
--bg-secondary: #ffffff !important;
--text-primary: #0f172a !important;
--text-secondary: #475569 !important;
--accent-primary: #2563eb !important;
--accent-secondary: #7c3aed !important;
--border-color: rgba(71, 85, 105, 0.2) !important;
--card-bg: #ffffff !important;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] body {
background:
linear-gradient(135deg, rgba(219, 234, 254, 0.88) 0%, rgba(241, 245, 249, 0.90) 50%, rgba(224, 231, 255, 0.88) 100%),
url('/Pirate-Background.jpg') top center / 100% auto repeat-y scroll !important;
}
[data-theme="light"] .container {
background: transparent !important;
}
[data-theme="light"] .header {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(71, 85, 105, 0.15) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .header h1 {
background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
[data-theme="light"] .header-logo-glyph {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
[data-theme="light"] .subtitle {
color: #64748b !important;
}
[data-theme="light"] .browser-section {
background: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(71, 85, 105, 0.12) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .toolbar {
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(71, 85, 105, 0.1) !important;
}
[data-theme="light"] .remote-card {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.12) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .remote-card:hover {
background: #ffffff !important;
border-color: #2563eb !important;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15) !important;
}
[data-theme="light"] .remote-name {
color: #0f172a !important;
}
[data-theme="light"] .remote-description {
color: #64748b !important;
}
[data-theme="light"] .file-item {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.1) !important;
}
[data-theme="light"] .file-item:hover {
background: #f8fafc !important;
border-color: #2563eb !important;
}
[data-theme="light"] .file-name {
color: #0f172a !important;
}
[data-theme="light"] .file-meta,
[data-theme="light"] .file-meta span {
color: #64748b !important;
}
[data-theme="light"] .search-input,
[data-theme="light"] .remote-filter-select,
[data-theme="light"] .category-filter-select,
[data-theme="light"] select {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.2) !important;
color: #0f172a !important;
}
[data-theme="light"] .search-input::placeholder {
color: #94a3b8 !important;
}
[data-theme="light"] .breadcrumb-item {
color: #64748b !important;
}
[data-theme="light"] .breadcrumb-item:hover {
color: #2563eb !important;
}
[data-theme="light"] .action-btn {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
color: #ffffff !important;
border: none !important;
}
[data-theme="light"] .action-btn:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
}
[data-theme="light"] .btn-primary {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}
[data-theme="light"] .btn-primary:hover {
background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%) !important;
box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4) !important;
}
[data-theme="light"] .btn-secondary {
background: #ffffff !important;
color: #0f172a !important;
border: 1px solid rgba(71, 85, 105, 0.3) !important;
}
[data-theme="light"] .btn-secondary:hover {
background: #f1f5f9 !important;
border-color: #2563eb !important;
}
[data-theme="light"] .trending-pill {
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(71, 85, 105, 0.1) !important;
}
[data-theme="light"] .trending-pill-label {
color: #0f172a !important;
}
[data-theme="light"] .trending-pill-card {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.1) !important;
}
[data-theme="light"] .trending-pill-title {
color: #0f172a !important;
}
[data-theme="light"] .trending-pill-meta {
color: #64748b !important;
}
[data-theme="light"] .user-info {
color: #0f172a !important;
}
[data-theme="light"] .logout-btn {
background: rgba(239, 68, 68, 0.1) !important;
color: #dc2626 !important;
border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
[data-theme="light"] .logout-btn:hover {
background: #dc2626 !important;
color: #ffffff !important;
}
[data-theme="light"] .admin-role-btn {
background: rgba(37, 99, 235, 0.1) !important;
color: #2563eb !important;
border: 1px solid rgba(37, 99, 235, 0.3) !important;
}
[data-theme="light"] .trending-pill-card {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.1) !important;
}
[data-theme="light"] .trending-pill-mode-badge {
background: rgba(37, 99, 235, 0.12) !important;
color: #1d4ed8 !important;
border: 1px solid rgba(37, 99, 235, 0.22) !important;
box-shadow: none !important;
animation: none !important;
}
[data-theme="light"] .game-radar-panel {
background: rgba(255, 255, 255, 0.94) !important;
border: 1px solid rgba(71, 85, 105, 0.14) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .game-radar-card {
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(71, 85, 105, 0.12) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .game-radar-cover {
background: #f8fafc !important;
border-bottom-color: rgba(71, 85, 105, 0.14) !important;
}
[data-theme="light"] .game-radar-cover-placeholder {
color: #475569 !important;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(124, 58, 237, 0.06)) !important;
}
[data-theme="light"] .game-radar-title,
[data-theme="light"] .game-radar-reason,
[data-theme="light"] .game-radar-meta {
color: var(--text-primary) !important;
}
[data-theme="light"] .game-radar-why {
background: rgba(37, 99, 235, 0.10) !important;
border-color: rgba(37, 99, 235, 0.18) !important;
color: #1d4ed8 !important;
}
[data-theme="light"] .game-radar-why-label,
[data-theme="light"] .game-radar-why-text {
color: #1e293b !important;
}
[data-theme="light"] .game-radar-badge {
background: rgba(241, 245, 249, 0.96) !important;
border-color: rgba(71, 85, 105, 0.14) !important;
color: #334155 !important;
}
[data-theme="light"] .game-radar-badge.primary,
[data-theme="light"] .game-radar-badge.saved,
[data-theme="light"] .game-radar-badge.history,
[data-theme="light"] .game-radar-badge.trending {
color: #0f172a !important;
}
[data-theme="light"] .back-to-top {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.2) !important;
color: #0f172a !important;
}
[data-theme="light"] .theme-toggle {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.2) !important;
color: #0f172a !important;
}
[data-theme="light"] .search-disclaimer {
color: #64748b !important;
}
[data-theme="light"] .remotes-section-title {
color: #0f172a !important;
}
[data-theme="light"] .feedback-button {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.2) !important;
color: #0f172a !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .feedback-button:hover {
background: #f1f5f9 !important;
border-color: #2563eb !important;
color: #2563eb !important;
}
[data-theme="light"] .downloads-button {
background: #ffffff !important;
border: 1px solid rgba(71, 85, 105, 0.2) !important;
color: #0f172a !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .downloads-button:hover {
background: #f1f5f9 !important;
border-color: #2563eb !important;
color: #2563eb !important;
}
[data-theme="light"] .downloads-panel {
background: rgba(255, 255, 255, 0.98) !important;
border-right-color: rgba(71, 85, 105, 0.2) !important;
}
[data-theme="light"] .downloads-panel-header {
background: rgba(241, 245, 249, 0.8) !important;
border-bottom-color: rgba(71, 85, 105, 0.2) !important;
}
[data-theme="light"] .download-item {
background: rgba(241, 245, 249, 0.6) !important;
border-color: rgba(71, 85, 105, 0.2) !important;
}
[data-theme="light"] .download-item-name {
color: #0f172a !important;
}
[data-theme="light"] .downloads-section-title {
color: #64748b !important;
}
.firefox-warning-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
padding: 20px;
}
.firefox-warning-card {
width: min(720px, 100%);
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 22px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
color: #e2e8f0;
}
.firefox-warning-title {
font-size: 1.35rem;
font-weight: 800;
margin: 0 0 10px 0;
color: #f97316;
}
.firefox-warning-body {
margin: 0 0 16px 0;
color: rgba(226, 232, 240, 0.92);
line-height: 1.55;
}
.firefox-warning-body ul {
margin: 10px 0 0 18px;
padding: 0;
}
.firefox-warning-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
margin-top: 16px;
}
.firefox-warning-btn {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
color: #e2e8f0;
border-radius: 12px;
padding: 10px 14px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.firefox-warning-btn:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.25);
}
.firefox-warning-btn-primary {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
border-color: rgba(249, 115, 22, 0.55);
color: #0b1220;
}
.firefox-warning-btn-primary:hover {
background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
border-color: rgba(249, 115, 22, 0.75);
}
@media (display-mode: standalone) {
html .header {
padding: calc(18px + var(--wco-inset-top, 0px)) 14px 18px 14px;
margin-bottom: 12px;
border-radius: 16px;
min-height: 120px;
}
html .header-inner {
position: static;
align-items: center;
justify-content: center;
gap: 12px;
padding-left: calc(14px + var(--wco-inset-left, 0px));
padding-right: calc(14px + var(--wco-inset-right, 0px));
min-height: 86px;
}
html .header-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: max-content;
max-width: 70vw;
text-align: center;
pointer-events: none;
}
html .header-text * {
pointer-events: none;
}
html .header-logo {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
margin-right: 4px;
}
html .subtitle {
display: block;
font-size: 0.82rem;
margin-top: 4px;
}
html .header-text h1 {
font-size: 1.1rem;
letter-spacing: 0.12em;
margin-bottom: 0;
}
html .header-stars {
opacity: 0.35;
}
html .header,
html .header-inner {
-webkit-app-region: drag;
app-region: drag;
}
html .theme-toggle,
html .animation-toggle,
html button,
html a,
html input,
html select,
html textarea {
-webkit-app-region: no-drag;
app-region: no-drag;
}
}
@media (display-mode: window-controls-overlay) {
html .header {
padding: calc(18px + var(--wco-inset-top, 0px)) 14px 18px 14px;
margin-bottom: 12px;
border-radius: 16px;
min-height: 120px;
}
html .header-inner {
position: static;
align-items: center;
justify-content: center;
gap: 12px;
padding-left: calc(14px + var(--wco-inset-left, 0px));
padding-right: calc(14px + var(--wco-inset-right, 0px));
min-height: 86px;
}
html .header-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: max-content;
max-width: 70vw;
text-align: center;
pointer-events: none;
}
html .header-text * {
pointer-events: none;
}
html .header-logo {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
margin-right: 4px;
}
html .subtitle {
display: block;
font-size: 0.82rem;
margin-top: 4px;
}
html .header-text h1 {
font-size: 1.1rem;
letter-spacing: 0.12em;
margin-bottom: 0;
}
html .header-stars {
opacity: 0.35;
}
html .header,
html .header-inner {
-webkit-app-region: drag;
app-region: drag;
}
html .theme-toggle,
html .animation-toggle,
html button,
html a,
html input,
html select,
html textarea {
-webkit-app-region: no-drag;
app-region: no-drag;
}
}
html[data-app-mode="pwa"] .header {
padding-top: calc(18px + var(--wco-inset-top, 0px));
padding-left: 14px;
padding-right: 14px;
padding-bottom: 18px;
min-height: 120px;
}
html[data-app-mode="pwa"] .header-inner {
position: static;
min-height: 86px;
}
html[data-app-mode="pwa"] .header-logo {
width: 56px;
height: 56px;
}
html[data-app-mode="pwa"] .subtitle {
display: block;
font-size: 0.82rem;
margin-top: 4px;
}
html[data-app-mode="pwa"] .header-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: max-content;
max-width: 70vw;
text-align: center;
pointer-events: none;
}
html[data-app-mode="pwa"] .header-text * {
pointer-events: none;
}
html[data-app-mode="pwa"] .header-inner {
transition: opacity 0.12s ease;
}
html[data-app-mode="pwa"]:not([data-header-ready="1"]) .header-inner {
opacity: 0;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.mandatory-badge {
display: inline-block;
padding: 0.12em 0.5em;
border-radius: 999px;
background: rgba(255, 77, 79, 0.18);
border: 1px solid rgba(255, 77, 79, 0.6);
color: #ff4d4f;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
vertical-align: baseline;
margin-right: 0.15em;
margin-left: 0.15em;
}
.right-fab-stack {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.right-fab-stack .back-to-top {
position: static;
right: auto;
bottom: auto;
}
.right-fab-stack #ownerSystemWidget {
position: static;
right: auto;
top: auto;
transform: none;
}
.floating-my-list-btn {
position: relative;
z-index: 9998;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
color: white;
border: 2px solid rgba(168, 85, 247, 0.6);
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
transition: all 0.3s ease;
padding: 0;
font-family: inherit;
}
.floating-my-list-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 28px rgba(124, 58, 237, 0.6);
background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
}
.floating-my-list-btn:active {
transform: scale(0.97);
}
.floating-my-list-count {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: bold;
border: 2px solid rgba(124, 58, 237, 0.8);
min-width: 28px;
}
.floating-my-list-count.empty {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
@media (max-width: 640px) {
.right-fab-stack {
right: 12px;
bottom: 12px;
gap: 14px;
}
.floating-my-list-btn {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.floating-my-list-count {
width: 24px;
height: 24px;
font-size: 0.6rem;
top: -6px;
right: -6px;
}
}