@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
--bg: #080b16;
--panel: #101629;
--panel-light: #151d33;
--line: #25304b;
--text: #f0f3ff;
--muted: #98a5c1;
--blue: #7893ff;
--cyan: #7de4e5;
--purple: #a68aff;
--radius: 18px;
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
scroll-padding-top: 85px;
}

body {
margin: 0;
min-height: 100vh;
overflow-x: hidden;
background: var(--bg);
color: var(--text);
font-family: 'DM Sans', Arial, sans-serif;
}

button,
input,
select {
font: inherit;
}

button {
color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 3px;
}

button:disabled {
opacity: 0.45;
cursor: not-allowed;
}

.ambient {
position: fixed;
width: 350px;
height: 350px;
z-index: -1;
pointer-events: none;
filter: blur(100px);
opacity: 0.12;
border-radius: 50%;
}

.ambient-one {
top: 100px;
right: -180px;
background: #5e67ff;
}

.ambient-two {
top: 900px;
left: -200px;
background: #27b7d0;
}

.topbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 5%;
border-bottom: 1px solid rgba(110, 133, 190, 0.14);
background: rgba(8, 11, 22, 0.92);
backdrop-filter: blur(18px);
}

.brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
text-decoration: none;
white-space: nowrap;
font-family: 'Space Grotesk', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.1px;
}

.brand-mark {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border: 1px solid #8497ff;
border-radius: 11px;
background: linear-gradient(145deg, #5667d8, #182039);
color: white;
font-size: 21px;
}

.brand-light {
color: var(--blue);
}

.navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}

.nav-link {
padding: 10px 12px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--muted);
font-size: 13px;
cursor: pointer;
transition: 0.2s;
}

.nav-link:hover,
.nav-link.active {
background: #182039;
color: white;
}

.profile-button {
width: 36px;
height: 36px;
flex: 0 0 36px;
border: 1px solid #586bc4;
border-radius: 50%;
background: #1a2543;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}

.mobile-menu {
display: none;
border: 1px solid var(--line);
border-radius: 9px;
padding: 8px 11px;
background: var(--panel);
cursor: pointer;
}

main {
width: min(1180px, 92%);
margin: 0 auto;
}

.page {
display: none;
min-height: 60vh;
padding-bottom: 35px;
}

.page.active-page {
display: block;
animation: fade-in 0.25s ease;
}

@keyframes fade-in {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.hero {
position: relative;
display: flex;
min-height: 475px;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 50px 4%;
margin-top: 24px;
overflow: hidden;
border: 1px solid rgba(123, 145, 255, 0.19);
border-radius: 26px;
background:
radial-gradient(ellipse at 85% 40%, rgba(93, 94, 226, 0.19), transparent 44%),
linear-gradient(120deg, #11182d 0%, #0c1120 70%);
}

.hero-content {
position: relative;
z-index: 2;
width: 57%;
}

.eyebrow {
color: var(--cyan);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1.7;
}

.live-dot {
display: inline-block;
width: 7px;
height: 7px;
margin-right: 7px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 12px var(--cyan);
}

.hero h1,
.page-banner h1 {
margin: 18px 0;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(38px, 5.5vw, 68px);
line-height: 1.04;
letter-spacing: -2.5px;
}

.hero h1 span,
.page-banner h1 span {
background: linear-gradient(90deg, #9baeff, #8ee9e5);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

.hero-copy {
max-width: 440px;
color: #aebbd5;
font-size: 15px;
line-height: 1.9;
}

.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}

.button {
display: inline-flex;
min-height: 43px;
align-items: center;
justify-content: center;
padding: 11px 17px;
border: 1px solid transparent;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
}

.button:hover {
transform: translateY(-2px);
}

.button-primary {
background: linear-gradient(110deg, #6d7eff, #5265d6);
color: white;
}

.button-ghost {
border-color: var(--line);
background: rgba(17, 25, 45, 0.8);
color: #dce4ff;
}

.hero-stats {
display: flex;
gap: 35px;
margin-top: 40px;
}

.hero-stats div {
display: grid;
gap: 5px;
}

.hero-stats strong {
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
letter-spacing: 1px;
}

.hero-stats span {
color: var(--muted);
font-size: 11px;
}

.portal-art {
position: relative;
display: grid;
width: 38%;
min-width: 220px;
max-width: 360px;
aspect-ratio: 1;
place-items: center;
}

.portal-ring {
position: absolute;
width: 85%;
height: 85%;
border: 1px solid rgba(135, 158, 255, 0.4);
border-radius: 50%;
transform: rotate(-30deg) scaleY(0.75);
box-shadow: 0 0 30px rgba(104, 119, 255, 0.1);
}

.ring-two {
width: 70%;
height: 90%;
border-color: rgba(125, 228, 229, 0.5);
transform: rotate(48deg) scaleY(0.8);
}

.ring-three {
width: 95%;
height: 58%;
border-color: rgba(166, 138, 255, 0.45);
transform: rotate(45deg) scaleY(0.7);
}

.portal-core {
display: grid;
width: 35%;
height: 35%;
place-items: center;
border: 1px solid rgba(151, 172, 255, 0.8);
border-radius: 50%;
background: radial-gradient(circle at 35% 25%, #6574da, #1b2042 75%);
box-shadow: 0 0 55px rgba(104, 119, 255, 0.4);
font-family: 'Space Grotesk', sans-serif;
font-size: 65px;
font-weight: 700;
}

.orbit-label {
position: absolute;
color: #98a8e5;
font-size: 8px;
letter-spacing: 2px;
}

.orbit-label-one {
top: 9%;
right: -1%;
}

.orbit-label-two {
bottom: 9%;
left: -3%;
}

.star {
position: absolute;
color: var(--cyan);
text-shadow: 0 0 15px var(--cyan);
}

.star-one {
top: 18%;
left: 13%;
font-size: 20px;
}

.star-two {
right: 10%;
bottom: 20%;
font-size: 26px;
}

.star-three {
top: 45%;
right: 0;
font-size: 13px;
}

.search-panel,
.content-section {
margin-top: 65px;
}

.search-panel {
padding: 27px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(16, 22, 41, 0.72);
}

.section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 20px;
}

.section-heading h2,
.reader-toolbar h2,
.player-panel h2,
.profile-panel h2 {
margin: 8px 0;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(21px, 3vw, 29px);
letter-spacing: -0.7px;
}

.section-heading p,
.page-banner p,
.news-card p,
.profile-panel p {
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

.search-form {
display: flex;
align-items: center;
gap: 9px;
padding: 8px;
border: 1px solid #303d5c;
border-radius: 13px;
background: #090f1e;
}

.search-icon {
padding-left: 9px;
color: #8294cb;
font-size: 26px;
}

.search-form input,
.search-form select,
.video-form input {
min-width: 0;
min-height: 43px;
border: 0;
outline: none;
background: transparent;
color: white;
font-size: 13px;
}

.search-form input {
flex: 1 1 160px;
}

.search-form input::placeholder,
.video-form input::placeholder {
color: #75819c;
}

.search-form select {
max-width: 180px;
padding: 0 8px;
border-left: 1px solid var(--line);
color: #cbd6f3;
}

.search-form option {
background: #101629;
}

.status {
min-height: 18px;
margin: 14px 0;
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

.text-button {
padding: 8px 0;
border: 0;
background: transparent;
color: var(--blue);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}

.category-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 15px;
}

.category-card {
position: relative;
display: flex;
min-height: 165px;
flex-direction: column;
align-items: flex-start;
padding: 22px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 16px;
text-align: left;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s;
}

.category-card:hover {
transform: translateY(-4px);
border-color: #697fda;
}

.category-anime {
background: linear-gradient(140deg, #182443, #101629);
}

.category-manga {
background: linear-gradient(140deg, #25203e, #101629);
}

.category-novels {
background: linear-gradient(140deg, #123034, #101629);
}

.category-symbol {
margin-bottom: 18px;
color: var(--cyan);
font-size: 27px;
}

.category-name {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 700;
}

.category-description {
margin-top: 7px;
color: var(--muted);
font-size: 11px;
}

.category-arrow {
position: absolute;
top: 20px;
right: 20px;
color: var(--blue);
}

.media-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 17px;
}

.media-card {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(82, 100, 143, 0.4);
border-radius: 13px;
background: #0e1425;
transition: transform 0.2s, border-color 0.2s;
}

.media-card:hover {
transform: translateY(-4px);
border-color: #6578ce;
}

.media-cover {
position: relative;
display: block;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
border: 0;
padding: 0;
background: #151d33;
cursor: pointer;
}

.media-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}

.media-card:hover .media-cover img {
transform: scale(1.04);
}

.cover-fallback {
display: grid;
width: 100%;
height: 100%;
min-height: 150px;
place-items: center;
padding: 12px;
background: linear-gradient(145deg, #232c50, #101629);
color: #aabaff;
font-family: 'Space Grotesk', sans-serif;
font-size: 25px;
}

.media-info {
padding: 10px;
}

.media-title {
display: -webkit-box;
min-height: 34px;
margin: 0 0 7px;
overflow: hidden;
color: #f0f3ff;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.media-meta {
min-height: 17px;
margin: 0 0 8px;
color: var(--muted);
font-size: 10px;
}

.media-actions {
display: flex;
gap: 6px;
}

.small-button {
flex: 1;
min-width: 0;
padding: 8px 5px;
border: 1px solid #2b3858;
border-radius: 7px;
background: #151e34;
color: #dbe4ff;
font-size: 10px;
cursor: pointer;
}

.small-button:hover {
border-color: var(--blue);
}

.page-banner {
padding: 65px 5% 40px;
margin-top: 24px;
border: 1px solid var(--line);
border-radius: 20px;
background:
radial-gradient(ellipse at 90% 0%, rgba(105, 104, 225, 0.17), transparent 50%),
linear-gradient(130deg, #121a30, #0c1120);
}

.page-banner h1 {
font-size: clamp(36px, 6vw, 57px);
}

.page-banner p {
max-width: 570px;
}

.banner-anime {
background:
radial-gradient(ellipse at 90% 20%, rgba(91, 115, 255, 0.24), transparent 50%),
#101629;
}

.banner-manga {
background:
radial-gradient(ellipse at 90% 20%, rgba(175, 117, 255, 0.2), transparent 50%),
#101629;
}

.banner-novels {
background:
radial-gradient(ellipse at 90% 20%, rgba(67, 201, 179, 0.17), transparent 50%),
#101629;
}

.section-search {
margin: 25px 0 16px;
}

.filter-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 15px 0;
}

.filter-chip {
padding: 9px 13px;
border: 1px solid var(--line);
border-radius: 30px;
background: #101629;
color: var(--muted);
font-size: 11px;
cursor: pointer;
}

.filter-chip.active,
.filter-chip:hover {
border-color: #6378dc;
background: #1b2645;
color: white;
}

.pagination {
display: flex;
justify-content: center;
margin: 28px 0;
}

.info-note {
margin: 20px 0;
padding: 16px;
border: 1px solid #34405f;
border-radius: 12px;
background: #101629;
color: #b7c5e1;
font-size: 12px;
line-height: 1.8;
}

.news-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 35px;
}

.news-card {
padding: 24px;
border: 1px solid var(--line);
border-radius: 15px;
background: #101629;
}

.news-icon {
color: var(--cyan);
font-size: 28px;
}

.news-card h3 {
margin-top: 18px;
font-family: 'Space Grotesk', sans-serif;
font-size: 17px;
}

.news-card .button {
margin-top: 12px;
}

.library-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 25px 0 40px;
}

.summary-card {
padding: 22px;
border: 1px solid var(--line);
border-radius: 13px;
background: #101629;
}

.summary-card span {
color: var(--cyan);
font-family: 'Space Grotesk', sans-serif;
font-size: 27px;
font-weight: 700;
}

.summary-card p {
margin-bottom: 0;
color: var(--muted);
font-size: 11px;
}

.reader-panel,
.player-panel,
.profile-panel {
margin-top: 35px;
padding: 25px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #0e1425;
}

.reader-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.reader-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
}

.reader-content {
max-width: 760px;
min-height: 160px;
margin: 25px auto;
color: #dce3f3;
font-family: Georgia, serif;
font-size: 18px;
line-height: 1.95;
overflow-wrap: anywhere;
}

.reader-content h2 {
color: white;
font-family: 'Space Grotesk', sans-serif;
}

.reader-content pre {
white-space: pre-wrap;
font: inherit;
}

.reader-content p {
margin: 0 0 22px;
}

.video-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0;
}

.video-form input {
flex: 1 1 220px;
padding: 0 13px;
border: 1px solid var(--line);
border-radius: 10px;
background: #080b16;
}

#video-player {
display: block;
width: 100%;
max-height: 520px;
margin-top: 18px;
border-radius: 12px;
background: black;
}

.muted {
color: var(--muted);
}

.small {
font-size: 11px;
line-height: 1.7;
}

.profile-panel {
margin-bottom: 30px;
}

.footer {
margin-top: 60px;
padding: 40px 5% 25px;
border-top: 1px solid var(--line);
background: rgba(8, 11, 22, 0.8);
text-align: center;
}

.footer-brand {
justify-content: center;
}

.footer > p {
color: var(--muted);
font-size: 12px;
line-height: 1.8;
}

.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 22px 0;
}

.footer-links button {
border: 0;
background: transparent;
color: #c3cde5;
font-size: 12px;
cursor: pointer;
}

.copyright {
margin-top: 28px;
}

.modal {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
}

.modal.open {
display: flex;
}

.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 4, 12, 0.82);
backdrop-filter: blur(7px);
}

.modal-content {
position: relative;
z-index: 1;
width: min(720px, 100%);
max-height: 85vh;
overflow-y: auto;
padding: 25px;
border: 1px solid #394769;
border-radius: 18px;
background: #101629;
}

.modal-close {
position: sticky;
top: 0;
float: right;
width: 36px;
height: 36px;
border: 1px solid var(--line);
border-radius: 50%;
background: #182039;
font-size: 23px;
cursor: pointer;
}

.modal-detail {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 22px;
clear: both;
}

.modal-detail > img {
width: 100%;
border-radius: 11px;
}

.modal-detail h2 {
margin-top: 0;
font-family: 'Space Grotesk', sans-serif;
}

.modal-detail p {
color: #b6c2dc;
font-size: 12px;
line-height: 1.9;
}

.modal-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}

.toast {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 150;
max-width: calc(100% - 40px);
padding: 13px 17px;
border: 1px solid #45598c;
border-radius: 10px;
background: #18223b;
color: white;
font-size: 12px;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: 0.25s;
}

.toast.visible {
opacity: 1;
transform: translateY(0);
}

.empty-state {
grid-column: 1 / -1;
padding: 30px 15px;
border: 1px dashed #34405f;
border-radius: 12px;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
text-align: center;
}

@media (max-width: 1000px) {
.topbar {
flex-wrap: wrap;
gap: 10px;
}

.navigation {
gap: 0;
}

.nav-link {
padding: 9px 8px;
font-size: 11px;
}

.media-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero {
min-height: 410px;
}
}

@media (max-width: 720px) {
.topbar {
padding: 12px 4%;
}

.brand {
font-size: 11px;
}

.mobile-menu {
display: block;
margin-left: auto;
}

.navigation {
display: none;
width: 100%;
flex-basis: 100%;
flex-wrap: wrap;
justify-content: flex-start;
padding-top: 7px;
}

.navigation.open {
display: flex;
}

.nav-link {
padding: 10px 12px;
font-size: 12px;
}

.profile-button {
display: none;
}

main {
width: 92%;
}

.hero {
min-height: unset;
padding: 35px 23px;
}

.hero-content {
width: 100%;
}

.hero h1 {
font-size: clamp(39px, 10vw, 57px);
}

.portal-art {
position: absolute;
right: -95px;
bottom: -35px;
width: 240px;
min-width: 0;
opacity: 0.2;
}

.hero-stats {
gap: 22px;
}

.hero-stats strong {
font-size: 10px;
}

.hero-copy {
font-size: 13px;
}

.search-panel {
padding: 18px;
}

.search-form {
flex-wrap: wrap;
}

.search-form input {
flex-basis: calc(100% - 60px);
}

.search-form select {
flex: 1 1 125px;
max-width: none;
border-left: 0;
}

.search-form button {
flex: 1 1 100px;
}

.category-grid {
grid-template-columns: 1fr;
}

.category-card {
min-height: 135px;
}

.media-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 11px;
}

.media-info {
padding: 8px;
}

.media-title {
font-size: 11px;
}

.small-button {
font-size: 9px;
padding: 8px 2px;
}

.content-section,
.search-panel {
margin-top: 42px;
}

.page-banner {
padding: 40px 22px 25px;
}

.news-grid {
grid-template-columns: 1fr;
}

.library-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reader-panel,
.player-panel,
.profile-panel {
padding: 17px;
}

.modal-content {
padding: 17px;
}

.modal-detail {
grid-template-columns: 95px minmax(0, 1fr);
gap: 13px;
}

.modal-detail h2 {
font-size: 18px;
}

.modal-detail p {
font-size: 11px;
}
}

@media (max-width: 390px) {
.media-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-stats {
gap: 15px;
}

.section-heading {
align-items: flex-start;
}

.section-heading h2 {
font-size: 20px;
}

.reader-toolbar {
align-items: flex-start;
flex-direction: column;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}