:root { --bg:#080811; --card:#111124; --card2:#17152b; --accent:#9180ff; --accent-bright:#c3b9ff; --text:#f4f2ff; --muted:#aaa8c3; --line:#302b53; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 55% -10%,#332b79 0,transparent 31%),radial-gradient(circle at 0 45%,#17134b 0,transparent 38%),var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; border:0; }
.app-shell { min-height:100vh; max-width:680px; margin:auto; padding:18px 16px 100px; }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin:3px 0 22px; }
.brand { display:flex; align-items:center; justify-content:center; background:none; padding:0; grid-column:2; }.brand img { width:42px; height:42px; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 0 9px rgba(158,143,255,.72)); }
.back { justify-self:start; background:#15142b; border:1px solid var(--line); border-radius:12px; padding:8px 10px; font-size:13px; font-weight:700; }.back:disabled { visibility:hidden; }
.topbar .pill { justify-self:end; }.pill,.tag { color:#cbc4ff; border:1px solid #4b4386; background:#17142f; border-radius:999px; padding:5px 10px; font-size:12px; }
h1 { font-size:31px; margin:0 0 8px; line-height:1.1; } h2 { font-size:22px; margin:25px 0 14px; } p { color:var(--muted); line-height:1.55; }
.hero,.card { border:1px solid var(--line); background:linear-gradient(135deg,rgba(29,25,58,.96),rgba(12,12,27,.96)); box-shadow:0 14px 35px rgba(0,0,0,.25); border-radius:22px; padding:22px; }
.hero { min-height:220px; display:flex; flex-direction:column; justify-content:end; background:radial-gradient(circle at 80% 14%,rgba(149,129,255,.42),transparent 27%),linear-gradient(125deg,#201b51,#111124 70%); }.kicker { color:var(--accent-bright); text-transform:uppercase; letter-spacing:3px; font-size:12px; font-weight:800; }
.primary { background:linear-gradient(135deg,#a99bff,#6855de); box-shadow:0 7px 20px rgba(102,82,218,.32); border-radius:12px; padding:13px 17px; font-weight:800; margin-top:12px; align-self:flex-start; }.outline { border:1px solid #514984; background:rgba(19,17,44,.7); border-radius:12px; padding:11px 14px; font-weight:700; }
.list { display:grid; gap:11px; }.title-card { display:flex; align-items:center; gap:13px; text-align:left; width:100%; padding:12px; border:1px solid transparent; border-radius:16px; background:var(--card2); }.title-card:hover { border-color:#5a4ca3; }.cover { width:51px; height:66px; flex:0 0 auto; overflow:hidden; border-radius:10px; background:linear-gradient(145deg,#9d8dff,#3c3278 55%,#101022); display:grid; place-items:center; font-size:19px; font-weight:900; }.cover img,.detail-cover img { width:100%; height:100%; object-fit:cover; display:block; }.placeholder { color:#ddd8ff; }.title-card strong { display:block; font-size:16px; }.meta { display:block; color:var(--muted); font-size:13px; margin-top:5px; }
.updates { display:grid; gap:12px; }.update-card { display:flex; align-items:flex-start; gap:13px; width:100%; padding:13px; text-align:left; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,#191630,#111124); }.update-card:hover { border-color:#5a4ca3; }.update-cover { flex:0 0 62px; width:62px; padding:0; background:transparent; border-radius:11px; }.update-cover .cover { width:62px; min-width:62px; max-width:62px; height:82px; min-height:82px; max-height:82px; aspect-ratio:auto; }.update-cover .cover img { width:100%; height:100%; object-fit:cover; }.update-cover:hover .cover { outline:2px solid var(--accent-bright); }.update-content { flex:1; min-width:0; }.update-title { display:block; padding:0; margin:1px 0 8px; text-align:left; background:transparent; font-weight:800; font-size:17px; }.update-row { display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; padding:4px 3px; border-radius:7px; text-align:left; background:transparent; font-size:14px; }.update-row:hover { background:rgba(139,122,255,.13); }.update-row b { color:#e6e3ff; }.update-row:first-of-type b::after { content:'  ✦'; color:var(--accent-bright); font-size:11px; }.update-row small { color:var(--muted); white-space:nowrap; font-size:12px; }
.catalog-head { display:flex; gap:10px; justify-content:space-between; align-items:center; }.search { background:#111124; border:1px solid var(--line); color:var(--text); border-radius:12px; padding:11px; width:58%; }
.support-card { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:18px; border:1px solid #4a417b; border-radius:20px; background:linear-gradient(135deg,#1d183e,#111124); box-shadow:0 12px 30px rgba(0,0,0,.28); }.support-card h2 { margin:7px 0 5px; font-size:19px; }.support-card p { margin:0 0 9px; font-size:13px; }.support-card .primary { flex:0 0 auto; margin:0; }.support-progress { width:100%; height:7px; overflow:hidden; border:1px solid #403868; border-radius:99px; background:#0d0c1d; }.support-progress i { display:block; width:4%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7663ed,#b9adff); }.support-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:9px 0 18px; }.support-options button { display:flex; flex-direction:column; gap:4px; min-width:0; padding:11px 8px; text-align:left; border:1px solid var(--line); border-radius:13px; background:#15132c; }.support-options b { font-size:13px; }.support-options span { color:var(--muted); font-size:10px; }.home-search { display:flex; align-items:center; gap:9px; margin:18px 0 8px; padding:0 14px; border:1px solid #463e75; border-radius:17px; background:#111024; }.home-search span { color:var(--muted); font-size:24px; }.home-search input { width:100%; padding:14px 0; color:var(--text); border:0; outline:0; background:transparent; font:inherit; }.layout-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.layout-heading h2 { margin:18px 0 12px; }.layout-switch { display:flex; gap:5px; padding:4px; border:1px solid var(--line); border-radius:13px; background:#111024; }.layout-switch button { width:38px; height:34px; border-radius:9px; color:var(--muted); background:transparent; font-size:20px; }.layout-switch .active-layout { color:#f2efff; background:#5b4cb2; }.title-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:14px 10px; }.title-grid-card { min-width:0; padding:0; text-align:left; background:transparent; }.title-grid-card .cover { display:block; width:100%; min-width:100%; max-width:100%; height:auto; aspect-ratio:3 / 4; overflow:hidden; border-radius:13px; }.title-grid-card .cover img { width:100%; height:100%; object-fit:cover; }.title-grid-card strong { display:-webkit-box; overflow:hidden; margin:8px 2px 4px; font-size:13px; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.title-grid-card > span:last-child { margin-left:2px; color:#a99cff; font-size:11px; }.title-grid-card:hover .cover { outline:2px solid #8877ec; }
.banner-carousel { position:relative; overflow:hidden; margin:0 -16px 22px; padding:4px 0 24px; }.carousel-stage { position:relative; aspect-ratio:16 / 9; }.banner-slide { position:absolute; inset:0 auto 0 6%; width:88%; overflow:hidden; padding:0; border:1px solid #49417a; border-radius:18px; background:#111124; box-shadow:0 12px 28px rgba(0,0,0,.4); opacity:.45; transition:transform .48s cubic-bezier(.22,.7,.25,1),opacity .48s ease,border-color .48s ease; }.banner-slide.active-slide { z-index:3; opacity:1; transform:translateX(0) scale(1); border-color:#7063bd; }.banner-slide.prev-slide { z-index:1; transform:translateX(-92%) scale(.9); }.banner-slide.next-slide { z-index:2; transform:translateX(92%) scale(.9); }.banner-slide img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }.banner-slide::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 58%,rgba(5,5,12,.3)); }.carousel-dots { position:absolute; z-index:5; display:flex; gap:6px; left:50%; bottom:7px; transform:translateX(-50%); }.carousel-dots button { width:7px; height:7px; padding:0; border-radius:99px; background:rgba(238,235,255,.5); transition:.2s; }.carousel-dots .active-dot { width:22px; background:#c1b7ff; }
.detail-cover { height:300px; max-width:225px; overflow:hidden; border-radius:20px; background:linear-gradient(135deg,#9786ff,#312569 55%,#101022); box-shadow:0 12px 35px rgba(87,65,203,.28); display:grid; place-items:center; font-size:54px; font-weight:900; margin:15px auto; }.chapter-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.chapter-heading h2 { margin:25px 0 14px; }.sort-chapters { background:#16142d; color:#cbc4ff; border:1px solid #49417a; border-radius:12px; padding:9px 11px; white-space:nowrap; font-size:13px; font-weight:700; }.chapters button { width:100%; text-align:left; color:var(--text); background:var(--card); border:1px solid var(--line); padding:15px; border-radius:13px; margin-bottom:8px; }.chapter-line { display:flex; align-items:center; justify-content:space-between; gap:10px; }.chapter-line b { font-size:16px; }.chapter-views { color:var(--muted); border:1px solid #403860; border-radius:999px; padding:5px 9px; white-space:nowrap; font-size:13px; }.reader-head { padding:20px 0 8px; }.reader-head h2 { margin:8px 0; }.comic-pages { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#0b0a0a; margin:12px 0 18px; }.comic-pages img { display:block; width:100%; height:auto; margin:0; }
.chapters .chapter-line.read-chapter { color:#858199; border-color:#1f1c34; background:#0b0a14; opacity:.72; }.chapters .chapter-line.read-chapter .chapter-views { color:#777389; border-color:#29253e; }
.project-stats { display:flex; flex-wrap:wrap; gap:10px 14px; color:var(--muted); font-size:13px; margin:5px 0 18px; }.project-tabs { display:grid; grid-template-columns:1fr 1fr; padding:5px; border:1px solid var(--line); border-radius:15px; background:#111024; }.project-tabs button { padding:10px; border-radius:11px; background:transparent; color:var(--muted); font-weight:700; }.project-tabs .active-tab { color:#f0edff; background:linear-gradient(135deg,#806cf2,#5543bb); }.project-description { margin:18px 0 12px; }.project-status { display:grid; gap:8px; margin:12px 0; color:var(--muted); font-size:14px; }.project-status span { display:flex; justify-content:space-between; gap:12px; }.project-status b { color:#88e7af; }.read-first { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; width:100%; margin:16px 0 4px; padding:15px; text-align:left; border:1px solid #5b4ca4; border-radius:16px; background:linear-gradient(135deg,#211a48,#15132c); }.read-first span { grid-row:1 / 3; display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:linear-gradient(135deg,#ad9fff,#6651dc); font-size:18px; }.read-first b { color:#ddd8ff; }.read-first small { color:var(--muted); margin-top:3px; }.chapter-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }.chapter-tools input { min-width:0; width:52%; padding:10px; color:var(--text); border:1px solid var(--line); border-radius:11px; background:#121126; }.chapter-tools span { color:var(--muted); white-space:nowrap; font-size:13px; }
.alternative-titles { display:flex; flex-wrap:wrap; gap:4px 8px; margin:-1px 0 10px; color:var(--muted); font-size:13px; }.alternative-titles span:not(:last-child)::after { content:' /'; color:#66617e; margin-left:8px; }
.title-page { position:relative; isolation:isolate; }.title-page::before { position:absolute; z-index:-1; content:""; inset:-28px -24px 18px; background-image:linear-gradient(180deg,rgba(8,8,17,.16),var(--bg) 52%),var(--cover-bg); background-repeat:no-repeat; background-size:cover; background-position:center top; filter:blur(28px) saturate(1.25); opacity:.5; pointer-events:none; }
.title-actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }.title-actions .outline { padding:9px 11px; font-size:13px; }.title-actions .selected-action { color:#f0edff; border-color:#9789f5; background:rgba(113,91,220,.25); }
.payment { margin:13px 0; }.payment h2 { margin:5px 0; }.payment .primary { width:100%; }.price { color:#d2ccff; font-size:25px; font-weight:900; }
.nav { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); width:min(648px,calc(100% - 32px)); display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:8px; border:1px solid #373162; border-radius:25px; background:rgba(15,14,34,.94); backdrop-filter:blur(12px); box-shadow:0 10px 30px rgba(0,0,0,.32); }.nav button { background:transparent; padding:8px 3px; border-radius:17px; color:var(--muted); font-size:20px; }.nav button.active { color:#e0dcff; background:linear-gradient(135deg,#6254bb,#3e347d); }.nav small { display:block; margin-top:2px; font-size:11px; }
@media (min-width:700px){.app-shell{padding-top:34px}.hero{min-height:270px}}
@media (max-width:430px){.support-card{align-items:stretch;flex-direction:column}.support-card .primary{width:100%}.support-options{grid-template-columns:1fr}.title-grid{gap:13px 8px}}

.vk-access-card { margin-top:18px; padding:20px; border:1px solid #4b4480; border-radius:22px; background:radial-gradient(circle at 100% 0,rgba(78,118,255,.2),transparent 42%),linear-gradient(145deg,#1d193b,#111024); box-shadow:0 20px 45px rgba(0,0,0,.28); }
.vk-access-head { display:flex; align-items:center; gap:13px; }
.vk-access-head h2 { margin:3px 0 0; }
.vk-mark { display:grid; width:48px; height:48px; place-items:center; border-radius:15px; background:#2787f5; color:white; font-size:18px; font-weight:800; box-shadow:0 8px 24px rgba(39,135,245,.3); }
.vk-access-points { display:grid; gap:8px; margin:16px 0; padding:0; list-style:none; color:#c9c3e8; }
.vk-access-points li::before { margin-right:8px; color:#8e7cff; content:'✓'; font-weight:800; }
.vk-status { display:flex; align-items:center; gap:9px; margin:15px 0; padding:12px 14px; border:1px solid #3d3765; border-radius:14px; background:#0d0c1d; color:#b8b2d2; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#8a839e; box-shadow:0 0 0 4px rgba(138,131,158,.12); }
.vk-status.active { border-color:#456f60; color:#bff4dd; }
.vk-status.active .status-dot { background:#54d7a1; box-shadow:0 0 0 4px rgba(84,215,161,.14),0 0 14px rgba(84,215,161,.5); }
.vk-auth-message { margin:10px 0; padding:12px 14px; border:1px solid #5b4ea0; border-radius:13px; background:#1a1735; color:#ddd7ff; }
.vk-connect { width:100%; }
.vk-connect:disabled { cursor:wait; opacity:.65; }
.vk-group-link { display:block; margin-top:13px; color:#9ea9ff; text-align:center; text-decoration:none; }
.payment-muted { opacity:.7; }