:root {
--bg-core: #0a0014;
--bg-deep: #050008;
--bg-card: rgba(20, 10, 40, 0.6);
--bg-card-hover: rgba(30, 15, 60, 0.8);
--purple-primary: #8b5cf6;
--purple-dark: #6d28d9;
--purple-darker: #4c1d95;
--purple-light: #a78bfa;
--purple-lighter: #c4b5fd;
--purple-glow: rgba(139, 92, 246, 0.5);
--purple-ultra: #ddd6fe;
--pink-accent: #ec4899;
--pink-glow: rgba(236, 72, 153, 0.4);
--glass-nav: rgba(10, 0, 20, 0.85);
--dock-glass: rgba(15, 5, 30, 0.75);
--modal-glass: rgba(20, 10, 40, 0.95);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--line: rgba(139, 92, 246, 0.15);
--line-light: rgba(139, 92, 246, 0.25);
--font-main: 'Vazir', 'IRANSansX', 'Tahoma', sans-serif;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
--shadow-sm: 0 2px 8px rgba(139, 92, 246, 0.1);
--shadow-md: 0 8px 24px rgba(139, 92, 246, 0.15);
--shadow-lg: 0 16px 48px rgba(139, 92, 246, 0.2);
--shadow-xl: 0 24px 64px rgba(139, 92, 246, 0.25);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg-core);
background-image:
radial-gradient(circle at 15% 25%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
radial-gradient(circle at 85% 75%, rgba(236, 72, 153, 0.1) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(109, 40, 217, 0.08) 0%, transparent 60%);
background-attachment: fixed;
color: var(--text-primary);
font-family: var(--font-main);
min-height: 100vh;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
position: relative;
}
/* Scroll Progress */
#scroll-progress {
position: fixed;
top: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--purple-primary), var(--pink-accent), var(--purple-light));
z-index: 9998;
width: 100%;
transform: scaleX(0);
transform-origin: right center;
box-shadow: 0 0 12px var(--purple-glow);
pointer-events: none;
transition: transform 0.15s linear;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--purple-primary), var(--purple-dark));
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--purple-light), var(--purple-primary));
}
* {
scrollbar-width: thin;
scrollbar-color: var(--purple-primary) transparent;
}
#app-view {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#scroll-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-top: 16px;
padding-bottom: 120px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
position: relative;
}
/* Ripple Effect */
.ripple {
position: relative;
overflow: hidden;
}
.ripple-effect {
position: absolute;
border-radius: 50%;
background: rgba(139, 92, 246, 0.4);
transform: scale(0);
animation: ripple-animation 0.6s linear;
pointer-events: none;
}
@keyframes ripple-animation {
to { transform: scale(4); opacity: 0; }
}
/* Reveal Animation */
.reveal-section {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal-section.visible {
opacity: 1;
transform: translateY(0);
}
/* Toast */
#toast-container {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
background: var(--modal-glass);
border: 1px solid var(--line-light);
border-radius: 16px;
padding: 14px 20px;
color: #fff;
font-size: 13px;
font-weight: 850;
display: flex;
align-items: center;
gap: 10px;
box-shadow: var(--shadow-lg);
animation: toast-in 0.4s var(--ease-spring);
pointer-events: auto;
min-width: 280px;
}
.toast.success { border-color: rgba(16, 185, 129, 0.4); }
.toast.success .toast-icon { color: #34d399; }
.toast.error { border-color: rgba(239, 68, 68, 0.4); }
.toast.error .toast-icon { color: #f87171; }
.toast.info { border-color: var(--line-light); }
.toast.info .toast-icon { color: var(--purple-light); }
.toast.hide {
animation: toast-out 0.3s var(--ease-out) forwards;
}
@keyframes toast-in {
from { transform: translateY(-20px) scale(0.9); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toast-out {
to { transform: translateY(-20px) scale(0.9); opacity: 0; }
}
.toast-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* Top App Bar - Redesigned */
.top-appbar {
margin: 0 16px 20px 16px;
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.1) 0%,
rgba(109, 40, 217, 0.08) 50%,
rgba(236, 72, 153, 0.06) 100%);
border: 1px solid var(--line-light);
border-radius: 24px;
box-shadow: var(--shadow-md);
padding: 20px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.top-appbar::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 60%);
pointer-events: none;
animation: rotate-bg 20s linear infinite;
}
@keyframes rotate-bg {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.top-appbar .brand {
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
line-height: 1;
position: relative;
z-index: 1;
}
.brand-title {
font-weight: 950;
font-size: 24px;
letter-spacing: -0.02em;
background: linear-gradient(135deg,
#ffffff 0%,
var(--purple-lighter) 30%,
var(--purple-light) 50%,
var(--pink-accent) 70%,
#ffffff 100%);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
animation: shine 6s linear infinite;
text-align: center;
}
@keyframes shine {
0% { background-position: 0% center; }
100% { background-position: 300% center; }
}
.brand-sub {
font-size: 11px;
color: var(--text-muted);
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
@media (min-width: 640px) {
.top-appbar {
margin: 0 24px 24px 24px;
padding: 24px;
}
.brand-title {
font-size: 28px;
}
}
@media (min-width: 768px) {
.brand-title {
font-size: 32px;
}
}
/* Slider */
.slider-wrapper {
position: relative;
width: calc(100% - 32px);
margin: 0 auto 24px auto;
border-radius: 24px;
overflow: hidden;
background: var(--bg-deep);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 5;
max-height: 520px;
contain: layout style paint;
}
@media (min-width: 640px) {
.slider-wrapper {
width: calc(100% - 48px);
aspect-ratio: 16 / 9;
max-height: 480px;
}
}
@media (min-width: 1024px) {
.slider-wrapper {
width: 100%;
max-width: 100%;
margin: 0 0 28px 0;
aspect-ratio: auto;
height: 480px;
border-radius: 0;
border-left: none;
border-right: none;
}
}
.slide-item {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
pointer-events: none;
transition: opacity 0.6s var(--ease-smooth);
}
.slide-item.active {
opacity: 1;
z-index: 10;
pointer-events: auto;
}
.slide-card {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
position: relative;
}
@media (min-width: 768px) {
.slide-card {
flex-direction: row;
}
}
.slide-img-area {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
background: var(--bg-deep);
display: flex;
align-items: center;
justify-content: center;
}
.slide-img-area::before {
content: '';
position: absolute;
inset: -20%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
filter: blur(40px);
z-index: 0;
animation: pulse-bg 8s ease-in-out infinite alternate;
}
@keyframes pulse-bg {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.2); opacity: 0.8; }
}
@media (min-width: 768px) {
.slide-img-area {
flex: 1.2;
}
}
.slide-img-area img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
-webkit-user-drag: none;
user-select: none;
transition: transform 8s ease-out;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}
.slide-item.active .slide-img-area img {
transform: scale(1.05);
}
.slide-mobile-info {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 20px;
    gap: 8px; 
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 30%,
        rgba(10, 0, 20, 0.5) 55%,
        rgba(10, 0, 20, 0.92) 80%,
        rgba(10, 0, 20, 1) 100%
    );
    pointer-events: none;
}

.slide-mobile-info .slide-cta {
    margin-top: 0 !important;
}
.slide-mobile-info > * {
    pointer-events: auto;
}

.slide-mobile-info .slide-heading {
    font-size: 18px !important; 
    font-weight: 950;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slide-mobile-summary {
    font-size: 13px !important; 
    font-weight: 500;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    background: rgba(139, 92, 246, 0.3);
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (min-width: 768px) {
.slide-mobile-info {
display: none;
}
}
.slide-info-panel {
display: none;
flex-direction: column;
justify-content: center;
gap: 18px;
padding: 32px 28px;
background: linear-gradient(
135deg,
rgba(15, 5, 30, 0.98) 0%,
rgba(10, 0, 20, 0.95) 100%
);
border-right: 1px solid var(--line);
min-width: 0;
}
@media (min-width: 768px) {
.slide-info-panel {
display: flex;
flex: 0.65;
max-width: 420px;
padding: 24px;
}
}
@media (min-width: 1024px) {
.slide-info-panel {
flex: 0.6;
max-width: 460px;
padding: 32px;
}
}
.slide-meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.slide-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 12px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.02em;
}
.slide-pill--type {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.15));
border: 1px solid var(--line-light);
color: var(--purple-lighter);
}
.slide-pill--status {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--text-secondary);
}
.slide-pill--chapter {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
.slide-pill b {
color: #fff;
font-weight: 950;
}
.slide-heading {
font-size: 20px;
font-weight: 950;
color: #fff;
line-height: 1.4;
margin: 0;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
.slide-heading {
font-size: 28px;
}
}
@media (min-width: 1024px) {
.slide-heading {
font-size: 38px;
line-height: 1.3;
}
}
.slide-description {
font-size: 14px;
font-weight: 500;
line-height: 1.8;
color: rgba(203, 213, 225, 0.9);
margin: 0;
margin-bottom: 24px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 1024px) {
.slide-description {
font-size: 16px;
-webkit-line-clamp: 4;
}
}
.slide-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 20px;
font-size: 14px;
font-weight: 900;
color: #fff;
background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-darker) 100%);
border: 1px solid var(--line-light);
border-radius: 16px;
text-decoration: none;
box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255, 255, 255, 0.2);
transition: all 0.3s var(--ease-spring);
white-space: nowrap;
letter-spacing: 0.02em;
cursor: pointer;
user-select: none;
position: relative;
overflow: hidden;
margin-top: auto;
}
.slide-cta::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.slide-cta:hover::before {
left: 100%;
}
.slide-cta:hover {
background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple-primary) 100%);
box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
}
.slide-cta:active {
transform: scale(0.97);
}
@media (min-width: 768px) {
.slide-cta {
padding: 16px 26px;
font-size: 16px;
border-radius: 18px;
}
}
@media (min-width: 1024px) {
.slide-cta {
padding: 18px 32px;
font-size: 18px;
border-radius: 20px;
}
}
.slide-dots {
position: absolute;
top: 18px;
left: 18px;
display: flex;
gap: 8px;
align-items: center;
padding: 8px 14px;
background: rgba(10, 0, 20, 0.6);
border-radius: 20px;
border: 1px solid var(--line-light);
z-index: 20;
backdrop-filter: blur(8px);
}
@media (min-width: 768px) {
.slide-dots {
top: 20px;
left: auto;
right: 20px;
}
}
.slide-dot-btn {
width: 8px;
height: 8px;
border-radius: 8px;
border: none;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
padding: 0;
transition: all 0.35s var(--ease-spring);
flex-shrink: 0;
outline: none;
}
.slide-dot-btn.active {
width: 24px;
height: 8px;
border-radius: 4px;
background: linear-gradient(90deg, var(--purple-primary), var(--pink-accent));
box-shadow: 0 0 16px var(--purple-glow);
}
.slide-dot-btn:hover {
background: rgba(255, 255, 255, 0.6);
}
.slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 35;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(10, 0, 20, 0.7);
border: 1px solid var(--line-light);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s var(--ease-spring);
opacity: 0.8;
backdrop-filter: blur(6px);
}
.slider-nav:hover {
background: rgba(139, 92, 246, 0.8);
transform: translateY(-50%) scale(1.1);
opacity: 1;
box-shadow: var(--shadow-md);
}
.slider-prev {
right: 16px;
}
.slider-next {
left: 16px;
}
@media (max-width: 768px) {
.slider-nav {
width: 40px;
height: 40px;
}
.slider-nav svg {
width: 20px;
height: 20px;
}
}
@media (min-width: 1024px) {
.slider-nav {
width: 56px;
height: 56px;
}
.slider-nav svg {
width: 28px;
height: 28px;
}
}
/* Manga Cards - Redesigned */
.manga-card {
display: flex;
flex-direction: column;
background: var(--bg-card);
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
contain: layout style paint;
content-visibility: auto;
contain-intrinsic-size: 320px 400px;
}
@media (hover: hover) {
.manga-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-xl);
border-color: var(--purple-light);
}
}
.manga-card:active {
transform: scale(0.98);
}
.card-media {
position: relative;
aspect-ratio: 3 / 4.2;
background: var(--bg-deep);
overflow: hidden;
}
.card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease-smooth);
}
.manga-card:hover .card-media img {
transform: scale(1.1);
}
.card-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
pointer-events: none;
}
.card-ribbon {
position: absolute;
top: 18px;
left: -32px;
transform: rotate(-45deg);
background: linear-gradient(135deg, var(--pink-accent), var(--purple-primary));
color: #fff;
font-size: 10px;
font-weight: 950;
padding: 6px 40px;
z-index: 6;
box-shadow: 0 4px 10px rgba(236, 72, 153, 0.4);
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid rgba(255,255,255,0.2);
}
.card-badges-top {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
}
.type-badge {
font-size: 10px;
font-weight: 950;
padding: 6px 12px;
border-radius: 10px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--shadow-sm);
}
.type-manga {
background: rgba(239, 68, 68, 0.2);
color: #fca5a5;
border: 1px solid rgba(239, 68, 68, 0.4);
}
.type-manhwa {
background: rgba(139, 92, 246, 0.2);
color: var(--purple-lighter);
border: 1px solid var(--line-light);
}
.type-manhua {
background: rgba(16, 185, 129, 0.2);
color: #6ee7b7;
border: 1px solid rgba(16, 185, 129, 0.4);
}
.type-comic {
background: rgba(59, 130, 246, 0.2);
color: #93c5fd;
border: 1px solid rgba(59, 130, 246, 0.4);
}
.type-novel {
background: rgba(245, 158, 11, 0.2);
color: #fcd34d;
border: 1px solid rgba(245, 158, 11, 0.4);
}
.type-default {
background: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.tag-status {
font-size: 10px;
font-weight: 950;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(0, 0, 0, 0.3);
color: var(--text-primary);
white-space: nowrap;
}
.status-ongoing {
color: #bbf7d0;
background: rgba(16, 185, 129, 0.2);
border-color: rgba(16, 185, 129, 0.4);
}
.status-completed {
color: #fecaca;
background: rgba(244, 63, 94, 0.2);
border-color: rgba(244, 63, 94, 0.4);
}
.status-dropped {
color: #bfdbfe;
background: rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.4);
}
.status-default {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.card-body {
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
background: rgba(10, 0, 20, 0.6);
flex: 1;
}
.card-meta-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.card-title-new {
margin: 0;
font-size: 15px;
font-weight: 950;
color: var(--text-primary);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center;
transition: color 0.2s ease;
}
.manga-card:hover .card-title-new {
color: var(--purple-lighter);
}
.card-stats {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
margin-top: auto;
}
.stat {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 950;
color: var(--text-secondary);
white-space: nowrap;
}
.stat b {
color: var(--purple-light);
font-weight: 950;
}
.rating-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 12px;
background: rgba(10, 0, 20, 0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(245, 158, 11, 0.4);
color: #fde68a;
font-size: 11px;
font-weight: 950;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* Dock */
.dock-island {
position: fixed;
bottom: 24px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 50;
pointer-events: none;
}
.dock-glass {
pointer-events: auto;
background: var(--dock-glass);
border: 1px solid var(--line-light);
border-radius: 28px;
padding: 10px 16px;
max-width: calc(100vw - 24px);
display: flex;
align-items: center;
gap: 8px;
box-shadow: var(--shadow-xl);
}
.dock-icon {
width: 48px;
height: 48px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: all 0.3s var(--ease-spring);
background: transparent;
border: none;
cursor: pointer;
position: relative;
}
.dock-icon:hover,
.dock-icon.active {
color: var(--purple-lighter);
background: rgba(139, 92, 246, 0.15);
transform: translateY(-4px);
}
.dock-home {
width: 60px;
height: 60px;
border-radius: 22px;
background: linear-gradient(145deg, var(--purple-primary) 0%, var(--purple-darker) 100%);
color: #fff;
margin: -34px 12px 0 12px;
box-shadow: var(--shadow-lg);
border: 3px solid var(--bg-deep);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s var(--ease-spring);
}
.dock-home:hover {
transform: translateY(-6px) scale(1.05);
box-shadow: var(--shadow-xl);
}
.dock-home:active {
transform: scale(0.95);
}
.dock-glass-better {
padding: 10px 14px;
gap: 8px;
border-radius: 32px;
}
.dock-labeled {
width: 66px;
height: auto;
min-height: 58px;
border-radius: 18px;
flex-direction: column;
gap: 4px;
padding: 8px 4px;
}
.dock-label {
font-size: 10px;
font-weight: 900;
color: var(--text-secondary);
line-height: 1;
}
.dock-icon:hover .dock-label,
.dock-icon.active .dock-label {
color: var(--purple-lighter);
}
/* Modals */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.modal-overlay.open {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.modal-card {
width: 92%;
max-width: 520px;
background: var(--modal-glass);
border: 1px solid var(--line-light);
border-radius: 28px;
padding: 24px;
box-shadow: var(--shadow-xl);
transform: translateY(30px) scale(0.95);
transition: transform 0.4s var(--ease-spring);
max-height: 82vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.modal-overlay.open .modal-card {
transform: translateY(0) scale(1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.modal-close-btn {
width: 40px;
height: 40px;
background: rgba(139, 92, 246, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: all 0.2s;
border: none;
cursor: pointer;
}
.modal-close-btn:hover {
background: rgba(244, 63, 94, 0.15);
color: #f43f5e;
transform: rotate(90deg);
}
.menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 24px;
}
.menu-btn {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(109, 40, 217, 0.05));
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--text-secondary);
font-size: 12px;
font-weight: 850;
transition: all 0.3s var(--ease-spring);
text-align: center;
text-decoration: none;
}
.menu-btn:hover {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.15));
transform: translateY(-4px);
border-color: var(--purple-light);
color: var(--text-primary);
box-shadow: var(--shadow-md);
}
.action-btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: rgba(139, 92, 246, 0.05);
border: 1px solid var(--line);
border-radius: 16px;
font-weight: 850;
color: var(--text-secondary);
font-size: 13px;
transition: all 0.3s var(--ease-spring);
margin-bottom: 12px;
text-decoration: none;
}
.action-btn:hover {
background: rgba(139, 92, 246, 0.15);
padding-right: 26px;
border-color: var(--purple-light);
color: var(--text-primary);
transform: translateX(-4px);
}
/* Loading */
#app-loading-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(10, 0, 20, 0.9), rgba(10, 0, 20, 0.98));
color: #fff;
font-weight: 950;
gap: 14px;
flex-direction: column;
padding: 20px;
transition: opacity 0.3s ease;
}
.skeleton-grid {
width: calc(100% - 32px);
max-width: 1280px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.skeleton-card {
height: 240px;
border-radius: 16px;
background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.5);
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: translateY(0);
}
50% {
opacity: 0.6;
transform: translateY(-4px);
}
}
/* Footer */
.footer-trust {
margin: 20px 16px 0 16px;
padding: 20px 16px;
border-radius: 22px;
border: 1px solid var(--line-light);
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(109, 40, 217, 0.05));
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
overflow: hidden;
content-visibility: auto;
contain-intrinsic-size: 0 100px;
}
@media (min-width: 640px) {
.footer-trust {
margin: 24px 24px 0 24px;
}
}
.footer-trust .hint {
font-size: 12px;
font-weight: 950;
color: var(--text-muted);
letter-spacing: 0.05em;
text-align: center;
}
.enamad-slot {
transform: translateY(16px);
opacity: 0;
transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
padding: 12px 16px;
border-radius: 20px;
border: 1px solid var(--line);
background: rgba(10, 0, 20, 0.3);
}
.enamad-slot.ready {
transform: translateY(0);
opacity: 1;
}
.enamad-slot img {
height: 58px;
width: auto;
display: block;
filter: drop-shadow(0 12px 20px rgba(139, 92, 246, 0.3));
}
.contact-info {
width: 100%;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.contact-item {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 850;
color: var(--text-muted);
text-align: center;
}
.contact-item .contact-icon {
width: 18px;
height: 18px;
stroke-width: 2px;
color: var(--purple-light);
flex-shrink: 0;
}
/* Home Sections */
.home-section {
margin: 0 16px 24px 16px;
}
@media (min-width: 640px) {
.home-section {
margin: 0 24px 28px 24px;
}
}
.home-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
}
.home-section-title {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.home-section-title .icon-wrap {
width: 44px;
height: 44px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.15));
border: 1px solid var(--line-light);
color: var(--purple-lighter);
box-shadow: var(--shadow-sm);
flex: 0 0 auto;
}
.home-section-title .texts {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.home-section-title h2 {
margin: 0;
font-size: 18px;
font-weight: 950;
color: var(--text-primary);
line-height: 1.3;
}
.home-section-title p {
margin: 0;
font-size: 12px;
font-weight: 850;
color: var(--text-muted);
line-height: 1.8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 52vw;
}
@media (min-width: 768px) {
.home-section-title h2 {
font-size: 22px;
}
.home-section-title p {
max-width: none;
}
}
.section-link-btn {
height: 44px;
padding: 0 16px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(139, 92, 246, 0.08);
color: var(--text-primary);
font-size: 13px;
font-weight: 950;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
transition: all 0.3s var(--ease-spring);
box-shadow: var(--shadow-sm);
text-decoration: none;
}
.section-link-btn:hover {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.15));
border-color: var(--purple-light);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.section-link-btn:active {
transform: scale(0.98);
}
.horizontal-scroll {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(180px, 180px);
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
padding: 6px 4px 12px 4px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
.horizontal-scroll {
grid-auto-columns: minmax(200px, 200px);
gap: 16px;
}
}
@media (min-width: 1024px) {
.horizontal-scroll {
grid-auto-columns: minmax(220px, 220px);
gap: 18px;
}
}
.horizontal-scroll > * {
scroll-snap-align: start;
}
/* Genre Grid */
.genre-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 14px;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.genre-grid > * {
flex-shrink: 0;
width: 160px;
scroll-snap-align: start;
}
@media (min-width: 768px) {
.genre-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
overflow-x: visible;
gap: 14px;
}
.genre-grid > * {
width: auto;
}
}
@media (min-width: 1200px) {
.genre-grid {
grid-template-columns: repeat(6, 1fr);
}
}
.genre-card {
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 16px 14px;
min-height: 80px;
display: flex;
align-items: flex-end;
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.15) 0%,
rgba(109, 40, 217, 0.1) 50%,
rgba(236, 72, 153, 0.08) 100%);
border: 1px solid var(--line-light);
box-shadow: var(--shadow-md);
transition: all 0.3s var(--ease-spring);
text-decoration: none;
}
.genre-card:hover {
transform: translateY(-6px) scale(1.03);
border-color: var(--purple-light);
box-shadow: var(--shadow-lg);
}
.genre-card::before {
content: "";
position: absolute;
inset: auto -24px -24px auto;
width: 90px;
height: 90px;
border-radius: 999px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
}
.genre-card strong {
position: relative;
z-index: 2;
font-size: 16px;
font-weight: 950;
color: var(--text-primary);
}
.genre-card span {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
font-size: 11px;
font-weight: 900;
color: var(--purple-lighter);
background: rgba(139, 92, 246, 0.2);
border: 1px solid var(--line-light);
border-radius: 999px;
padding: 6px 12px;
}
/* Rank Board - Optimized */
.rank-board {
display: flex;
flex-direction: column;
gap: 18px;
}
.rank-tabs {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.rank-tabs::-webkit-scrollbar {
display: none;
}
.rank-tab {
flex-shrink: 0;
padding: 12px 20px;
border-radius: 16px;
font-size: 14px;
font-weight: 900;
background: rgba(139, 92, 246, 0.08);
border: 1px solid var(--line);
color: var(--text-muted);
white-space: nowrap;
cursor: pointer;
transition: all 0.3s var(--ease-spring);
}
.rank-tab.active {
background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
border-color: var(--purple-light);
color: var(--text-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.rank-tab:hover:not(.active) {
background: rgba(139, 92, 246, 0.15);
border-color: var(--purple-light);
color: var(--text-primary);
}
.rank-single-box {
border-radius: 24px;
border: 1px solid var(--line-light);
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(109, 40, 217, 0.05));
box-shadow: var(--shadow-md);
overflow: hidden;
}
.rank-list {
display: flex;
flex-direction: column;
}
.rank-item {
display: grid;
grid-template-columns: auto 58px 1fr auto;
gap: 12px;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
transition: background 0.2s ease;
text-decoration: none;
color: inherit;
}
.rank-item:last-child {
border-bottom: none;
}
.rank-item:hover {
background: rgba(139, 92, 246, 0.1);
}
.rank-num {
width: 32px;
height: 32px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 950;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.15));
border: 1px solid var(--line-light);
color: var(--purple-lighter);
}
.rank-cover {
width: 58px;
height: 78px;
border-radius: 12px;
object-fit: cover;
border: 1px solid var(--line);
background: var(--bg-deep);
}
.rank-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.rank-main .title {
font-size: 14px;
font-weight: 950;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-main .meta {
font-size: 11px;
font-weight: 850;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-side {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
}
.manga-card.horizontal-card {
min-width: 180px;
width: 180px;
}
@media (min-width: 640px) {
.manga-card.horizontal-card {
min-width: 200px;
width: 200px;
}
}
@media (min-width: 1024px) {
.manga-card.horizontal-card {
min-width: 220px;
width: 220px;
}
}
/* Search Modal */
.modal-card.search-modal-wide {
max-width: 680px;
padding: 0;
}
.modal-card.search-modal-wide .search-shell {
padding: 24px;
}
/* Info Banner */
.info-banner-wrapper {
margin: 0 16px 18px 16px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(109, 40, 217, 0.15) 50%, rgba(236, 72, 153, 0.12) 100%);
border: 1px solid var(--line-light);
border-radius: 22px;
box-shadow: var(--shadow-lg);
padding: 18px 18px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.info-banner-wrapper:hover {
box-shadow: var(--shadow-xl);
border-color: var(--purple-light);
}
.info-banner-wrapper::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.4) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.2) 0%, transparent 60%);
background-size: 200% 200%;
animation: mesh-move 15s ease-in-out infinite;
z-index: 0;
filter: blur(40px);
opacity: 0.8;
pointer-events: none;
}
@keyframes mesh-move {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
.banner-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.banner-title {
font-size: 17px;
font-weight: 950;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 10px;
text-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
}
.banner-subtitle {
font-size: 12px;
font-weight: 800;
color: var(--text-secondary);
line-height: 1.7;
margin: 0;
max-width: 90%;
}
.banner-actions {
display: flex;
justify-content: center;
gap: 14px;
width: 100%;
margin-top: 6px;
}
.banner-btn {
flex: 1;
max-width: 170px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 14px;
border-radius: 16px;
font-size: 13px;
font-weight: 900;
color: var(--text-primary);
text-decoration: none;
transition: all 0.3s var(--ease-spring);
border: 1px solid var(--line-light);
cursor: pointer;
position: relative;
overflow: hidden;
}
.banner-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.btn-suresh {
background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(244, 63, 94, 0.1));
border-color: rgba(244, 63, 94, 0.4);
color: #fecdd3;
}
.btn-suresh:hover {
background: linear-gradient(135deg, rgba(244, 63, 94, 0.35), rgba(244, 63, 94, 0.2));
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: rgba(244, 63, 94, 0.6);
color: var(--text-primary);
}
.btn-rubika {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.15));
border-color: var(--line-light);
color: var(--purple-lighter);
}
.btn-rubika:hover {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(109, 40, 217, 0.25));
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--purple-light);
color: var(--text-primary);
}
@media (min-width: 640px) {
.info-banner-wrapper {
margin: 0 24px 20px 24px;
padding: 20px 22px;
}
.banner-title {
font-size: 19px;
}
.banner-subtitle {
font-size: 13px;
}
.banner-btn {
padding: 14px 18px;
font-size: 14px;
}
}
/* Daily Suggest Badge */
.daily-suggest-badge {
position: absolute;
top: 18px;
right: 18px;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.badge-glow {
position: absolute;
inset: -10px;
border-radius: 40px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.6) 0%, rgba(139, 92, 246, 0.3) 40%, transparent 70%);
filter: blur(14px);
animation: badge-pulse 3s ease-in-out infinite;
z-index: -1;
}
@keyframes badge-pulse {
0%, 100% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
.badge-content {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: rgba(10, 0, 20, 0.85);
border: 1px solid var(--line-light);
border-radius: 32px;
box-shadow: var(--shadow-lg);
backdrop-filter: blur(8px);
}
.badge-content span {
font-size: 13px;
font-weight: 950;
color: var(--text-primary);
letter-spacing: 0.02em;
text-shadow: 0 2px 10px rgba(196, 181, 253, 0.5);
white-space: nowrap;
}
.badge-content i {
color: var(--purple-lighter);
filter: drop-shadow(0 2px 8px rgba(196, 181, 253, 0.6));
}
@media (min-width: 768px) {
.daily-suggest-badge {
top: 22px;
right: 26px;
}
.badge-content {
padding: 12px 22px;
}
.badge-content span {
font-size: 15px;
}
}
@media (min-width: 1024px) {
.daily-suggest-badge {
right: auto;
left: 50%;
transform: translateX(-50%);
top: 20px;
}
}
/* Search Input */
.search-shell {
width: 100%;
text-align: right;
}
.search-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.search-title {
font-size: 20px;
font-weight: 950;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 12px;
}
.search-sub {
font-size: 12px;
font-weight: 850;
color: var(--text-muted);
line-height: 1.9;
margin: 0 0 16px 0;
}
.search-input-wrap {
position: relative;
width: 100%;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(109, 40, 217, 0.08));
border: 1px solid var(--line-light);
border-radius: 22px;
padding: 10px;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
}
.search-input-wrap:focus-within {
border-color: var(--purple-light);
box-shadow: var(--shadow-lg), 0 0 0 4px rgba(139, 92, 246, 0.2);
}
.search-input {
width: 100%;
height: 60px;
font-size: 16px;
font-weight: 850;
border-radius: 18px;
padding: 0 100px 0 18px;
background: rgba(255, 255, 255, 0.05);
border: none;
color: var(--text-primary);
transition: background 0.2s ease;
outline: none;
font-family: var(--font-main);
}
.search-input::placeholder {
color: rgba(148, 163, 184, 0.6);
font-weight: 800;
}
.search-input:focus {
background: rgba(255, 255, 255, 0.08);
}
.search-icon {
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
color: var(--text-muted);
width: 22px;
height: 22px;
pointer-events: none;
transition: color 0.2s;
}
.search-input-wrap:focus-within .search-icon {
color: var(--purple-lighter);
}
.search-shortcuts {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 6px;
}
.kbd-badge {
background: rgba(139, 92, 246, 0.15);
border: 1px solid var(--line-light);
padding: 4px 8px;
border-radius: 8px;
font-size: 11px;
font-weight: 900;
color: var(--purple-lighter);
font-family: monospace;
}
@media (max-width: 640px) {
.search-shortcuts {
display: none;
}
}
.search-meta-section {
margin-top: 16px;
margin-bottom: 12px;
}
.search-meta-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.search-meta-title span {
font-size: 13px;
font-weight: 900;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.search-meta-clear {
background: none;
border: none;
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
border-radius: 10px;
transition: all 0.2s;
font-family: var(--font-main);
}
.search-meta-clear:hover {
background: rgba(244, 63, 94, 0.15);
color: #f87171;
}
.search-meta-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.meta-tag {
padding: 8px 14px;
background: rgba(139, 92, 246, 0.1);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
font-weight: 850;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s var(--ease-spring);
display: inline-flex;
align-items: center;
gap: 6px;
}
.meta-tag:hover {
background: rgba(139, 92, 246, 0.2);
border-color: var(--purple-light);
color: var(--purple-lighter);
transform: translateY(-2px);
}
.meta-tag .tag-icon {
width: 12px;
height: 12px;
}
.search-suggest {
margin-top: 14px;
border-radius: 20px;
background: rgba(10, 0, 20, 0.5);
border: 1px solid var(--line);
box-shadow: var(--shadow-md);
display: none;
max-height: 420px;
overflow-y: auto;
}
.search-suggest.show {
display: block;
}
.search-suggest.loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 140px;
gap: 12px;
color: var(--text-muted);
font-size: 14px;
font-weight: 850;
}
.search-suggest .spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(139, 92, 246, 0.3);
border-top-color: var(--purple-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.search-suggest-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 22px;
gap: 12px;
color: var(--text-muted);
text-align: center;
}
.search-suggest-empty .empty-icon {
width: 44px;
height: 44px;
color: var(--text-muted);
opacity: 0.6;
}
.search-suggest-empty h4 {
margin: 0;
font-size: 15px;
font-weight: 900;
color: var(--text-primary);
}
.search-suggest-empty p {
margin: 0;
font-size: 13px;
font-weight: 800;
color: var(--text-muted);
line-height: 1.7;
}
.sug-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 0.2s ease;
text-decoration: none;
color: inherit;
}
.sug-item:last-child {
border-bottom: none;
}
.sug-item:hover {
background: rgba(139, 92, 246, 0.1);
}
.sug-cover {
width: 54px;
height: 70px;
border-radius: 12px;
object-fit: cover;
border: 1px solid var(--line);
background: var(--bg-deep);
flex: 0 0 auto;
transition: transform 0.2s;
}
.sug-item:hover .sug-cover {
transform: scale(1.05);
}
.sug-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.sug-title {
font-size: 14px;
font-weight: 950;
color: var(--text-primary);
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sug-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.sug-sub {
font-size: 12px;
font-weight: 850;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 5px;
}
.sug-badges {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.sug-pill {
font-size: 11px;
font-weight: 950;
padding: 6px 10px;
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(139, 92, 246, 0.1);
color: var(--text-primary);
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}
.sug-pill.type-manhwa {
background: rgba(139, 92, 246, 0.2);
color: var(--purple-lighter);
border-color: var(--line-light);
}
.sug-pill.type-manga {
background: rgba(239, 68, 68, 0.2);
color: #fca5a5;
border-color: rgba(239, 68, 68, 0.4);
}
.search-actions {
margin-top: 16px;
display: flex;
gap: 12px;
align-items: center;
}
.btn-ghost {
flex: 1;
height: 50px;
border-radius: 18px;
border: 1px solid var(--line);
background: rgba(139, 92, 246, 0.08);
color: var(--text-primary);
font-weight: 950;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s var(--ease-spring);
cursor: pointer;
font-family: var(--font-main);
}
.btn-ghost:hover {
background: rgba(139, 92, 246, 0.15);
border-color: var(--purple-light);
}
.btn-ghost:active {
transform: scale(0.98);
}
.btn-primary {
flex: 1.2;
height: 50px;
border-radius: 18px;
border: 1px solid var(--purple-light);
background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
color: var(--text-primary);
font-weight: 950;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: var(--shadow-md);
transition: all 0.3s var(--ease-spring);
cursor: pointer;
font-family: var(--font-main);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--purple-light), var(--purple-primary));
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-primary:active {
transform: scale(0.98);
}
/* Upcoming Section */
#upcoming-home-section {
margin: 0 16px 28px 16px;
}
@media (min-width: 640px) {
#upcoming-home-section {
margin: 0 24px 32px 24px;
}
}
#upcoming-row {
display: flex;
overflow-x: auto;
overflow-y: hidden;
gap: 14px;
padding: 6px 6px 22px 6px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--purple-primary) transparent;
}
#upcoming-row::-webkit-scrollbar {
height: 6px;
display: block;
}
#upcoming-row::-webkit-scrollbar-track {
background: transparent;
}
#upcoming-row::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, var(--purple-primary), var(--purple-dark));
border-radius: 99px;
}
#upcoming-row > .upcoming-card {
flex: 0 0 auto;
width: 170px;
min-height: 260px;
scroll-snap-align: start;
}
@media (min-width: 768px) {
#upcoming-row > .upcoming-card {
width: 200px;
min-height: 280px;
}
}
.upcoming-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.15) 0%,
rgba(109, 40, 217, 0.1) 50%,
rgba(236, 72, 153, 0.08) 100%);
border: 1px solid var(--line-light);
border-radius: 22px;
padding: 16px 14px;
transition: all 0.3s var(--ease-spring);
position: relative;
overflow: hidden;
}
.upcoming-card:hover {
transform: translateY(-6px) scale(1.03);
border-color: var(--purple-light);
box-shadow: var(--shadow-lg);
}
.upcoming-cover {
width: 100%;
aspect-ratio: 3 / 4;
border-radius: 16px;
object-fit: cover;
background: var(--bg-deep);
border: 2px solid var(--line-light);
box-shadow: var(--shadow-md);
margin-bottom: 12px;
}
.upcoming-info {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.upcoming-title {
font-size: 13px;
font-weight: 900;
color: var(--text-primary);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.upcoming-chapter {
font-size: 11px;
font-weight: 850;
color: var(--purple-lighter);
background: rgba(139, 92, 246, 0.2);
padding: 5px 12px;
border-radius: 999px;
width: fit-content;
margin: 0 auto;
border: 1px solid var(--line-light);
}
.timer-box {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
background: rgba(10, 0, 20, 0.5);
border-radius: 12px;
padding: 8px 10px;
margin-top: auto;
border: 1px solid var(--line);
width: 100%;
}
.timer-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 32px;
}
.timer-number {
font-weight: 900;
font-size: 14px;
color: var(--text-primary);
background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(109, 40, 217, 0.2));
padding: 4px 8px;
border-radius: 8px;
min-width: 32px;
text-align: center;
}
.timer-label {
font-size: 9px;
color: var(--text-muted);
font-weight: 800;
}
.timer-separator {
color: var(--purple-primary);
font-weight: 900;
font-size: 14px;
}
#upcoming-view-more {
position: fixed;
bottom: 94px;
left: 50%;
transform: translateX(-50%);
z-index: 45;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
border: 2px solid var(--line-light);
border-radius: 999px;
color: var(--text-primary);
font-size: 14px;
font-weight: 900;
box-shadow: var(--shadow-lg);
cursor: pointer;
transition: all 0.3s var(--ease-spring);
animation: float-pulse 3s ease-in-out infinite;
}
#upcoming-view-more:hover {
transform: translateX(-50%) translateY(-4px);
box-shadow: var(--shadow-xl);
}
#upcoming-view-more:active {
transform: translateX(-50%) scale(0.98);
}
#upcoming-view-more.hidden {
display: none;
}
#upcoming-view-more .btn-icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
#upcoming-view-more.showing .btn-icon {
transform: rotate(180deg);
}
@keyframes float-pulse {
0%, 100% {
box-shadow: var(--shadow-lg);
}
50% {
box-shadow: var(--shadow-xl);
}
}
@media (min-width: 768px) {
#upcoming-view-more {
bottom: 104px;
padding: 16px 32px;
font-size: 15px;
}
}
#upcoming-modal {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(10, 0, 20, 0.95);
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
#upcoming-modal.open {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
#upcoming-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid var(--line-light);
background: rgba(10, 0, 20, 0.9);
}
#upcoming-modal-title {
font-size: 18px;
font-weight: 950;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 12px;
}
#upcoming-modal-close {
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(139, 92, 246, 0.15);
border: 1px solid var(--line-light);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s var(--ease-spring);
}
#upcoming-modal-close:hover {
background: rgba(244, 63, 94, 0.2);
color: #f43f5e;
transform: rotate(90deg);
}
#upcoming-modal-grid {
flex: 1;
overflow-y: auto;
padding: 18px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
align-content: start;
}
@media (min-width: 768px) {
#upcoming-modal-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 26px;
}
}
@media (min-width: 1024px) {
#upcoming-modal-grid {
grid-template-columns: repeat(4, 1fr);
max-width: 1200px;
margin: 0 auto;
}
}
#upcoming-modal-grid::-webkit-scrollbar {
width: 8px;
}
#upcoming-modal-grid::-webkit-scrollbar-track {
background: transparent;
}
#upcoming-modal-grid::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--purple-primary), var(--purple-dark));
border-radius: 99px;
}
#upcoming-modal-grid::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--purple-light), var(--purple-primary));
}
/* Utility Classes */
.tw-flex { display: flex; }
.tw-flex-col { display: flex; flex-direction: column; }
.tw-items-center { display: flex; align-items: center; }
.tw-justify-center { display: flex; justify-content: center; }
.tw-gap-2 { gap: 8px; }
.tw-gap-3 { gap: 12px; }
.tw-text-center { text-align: center; }
.tw-text-white { color: var(--text-primary); }
.tw-font-bold { font-weight: 700; }
.tw-font-black { font-weight: 900; }
.tw-text-xl { font-size: 1.25rem; }
.tw-text-sm { font-size: 0.875rem; }
.tw-text-[10px] { font-size: 10px; }
.tw-text-[9px] { font-size: 9px; }
.tw-text-gray-400 { color: var(--text-muted); }
.tw-text-gray-500 { color: #6b7280; }
.tw-text-gray-700 { color: #374151; }
.tw-text-accent { color: var(--purple-primary); }
.tw-text-accent-light { color: var(--purple-lighter); }
.tw-bg-black { background-color: var(--bg-deep); }
.tw-bg-transparent { background: transparent; }
.tw-bg-white/5 { background: rgba(255, 255, 255, 0.05); }
.tw-bg-rose-500 { background: #f43f5e; }
.tw-bg-emerald-400 { background: #34d399; }
.tw-rounded-full { border-radius: 9999px; }
.tw-rounded-xl { border-radius: 12px; }
.tw-rounded-lg { border-radius: 8px; }
.tw-border-none { border: none; }
.tw-border-t { border-top-width: 1px; border-top-style: solid; }
.tw-border-white/5 { border-color: rgba(255, 255, 255, 0.05); }
.tw-border-[#1a1a1d] { border-color: #1a1a1d; }
.tw-p-0 { padding: 0; }
.tw-p-8 { padding: 32px; }
.tw-p-10 { padding: 40px; }
.tw-px-2 { padding-left: 8px; padding-right: 8px; }
.tw-py-1 { padding-top: 4px; padding-bottom: 4px; }
.tw-p-[1px] { padding: 1px; }
.tw-mt-6 { margin-top: 24px; }
.tw-pt-4 { padding-top: 16px; }
.tw-uppercase { text-transform: uppercase; }
.tw-tracking-widest { letter-spacing: 0.1em; }
.tw-shadow-md { box-shadow: var(--shadow-md); }
.tw-shadow-[0_0_8px_#34d399] { box-shadow: 0 0 8px #34d399; }
.tw-transition-colors { transition: color 0.15s, background-color 0.15s; }
.tw-animate-spin { animation: tw-spin 1s linear infinite; }
@keyframes tw-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Icons */
.icon-3 { width: 12px; height: 12px; }
.icon-3\.5 { width: 14px; height: 14px; }
.icon-4 { width: 16px; height: 16px; }
.icon-5 { width: 20px; height: 20px; }
.icon-6 { width: 24px; height: 24px; }
.icon-8 { width: 32px; height: 32px; }
.icon-10 { width: 40px; height: 40px; }
.icon-fill-current { fill: currentColor; }
.icon-stroke-white { stroke: var(--text-primary); }
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-1 { top: 4px; }
.right-1 { right: 4px; }
.-top-1 { top: -4px; }
.-right-0 { right: 0; }
.group-hover-accent:hover { color: var(--purple-primary); }
.group-hover-bg-accent20:hover { background: rgba(139, 92, 246, 0.20); }
.dock-status-dot {
position: absolute;
top: -4px;
right: 0;
width: 12px;
height: 12px;
border-radius: 9999px;
border: 2px solid var(--bg-deep);
}
.dock-status-dot.online {
background: #34d399;
box-shadow: 0 0 10px #34d399;
}
.dock-status-dot.offline {
background: #f43f5e;
}
.dock-login-dot {
position: absolute;
top: 4px;
right: 4px;
width: 10px;
height: 10px;
border-radius: 9999px;
background: #f43f5e;
border: 2px solid var(--bg-deep);
}
.dock-avatar-wrap {
width: 36px;
height: 36px;
border-radius: 14px;
background: linear-gradient(135deg, var(--purple-primary), var(--purple-darker));
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.dock-avatar-wrap .avatar-icon {
width: 26px;
height: 26px;
color: var(--text-primary);
}
.menu-icon-circle {
width: 44px;
height: 44px;
border-radius: 9999px;
background: rgba(139, 92, 246, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s var(--ease-spring);
}
.menu-icon-circle:hover {
background: rgba(139, 92, 246, 0.25);
transform: scale(1.1);
}
.menu-icon-circle .menu-icon-inner {
width: 22px;
height: 22px;
color: var(--text-muted);
}
.menu-icon-circle:hover .menu-icon-inner {
color: var(--purple-lighter);
}
.action-icon-left { width: 18px; height: 18px; color: var(--text-muted); }
.action-icon-right { width: 18px; height: 18px; color: var(--text-muted); }
a.manga-card,
a.manga-card:hover,
a.manga-card:active,
a.manga-card:visited {
text-decoration: none;
}
a.genre-card,
a.genre-card:hover,
a.genre-card:active,
a.genre-card:visited {
text-decoration: none;
}
a.rank-item,
a.rank-item:hover,
a.rank-item:active,
a.rank-item:visited {
text-decoration: none;
}
a {
text-decoration: none;
color: inherit;
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}