html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--content-top-gap)); }
:root {
--text-main: #e2e8f0;
--text-muted: #94a3b8;
--accent: #38bdf8;
--border-color: rgba(148,163,184,.18);
--card-bg: rgba(15,23,42,.85);
}
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; color: var(--text-main); background: #0b0f19; }
.site-wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; background-color: rgba(11,15,25,.85); }
/* Navbar */
.site-header { flex-shrink: 0; margin-bottom: 0; }
.navbar { position: static; background-color: rgba(17,24,39,.95); border-bottom: 1px solid var(--border-color); }
.nav-container { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(120px, 160px); align-items: center; height: var(--header-height); padding: 0 1.25rem; gap: 1rem; }
.logo { font-weight: 700; font-size: 1.05rem; white-space: nowrap; background: linear-gradient(90deg,#38bdf8,#818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; justify-self: start; flex-shrink: 0; }
.nav-links-desktop { display: flex; gap: .25rem; align-items: center; justify-content: center; justify-self: center; }
.nav-link-btn { display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: 6px; color: var(--text-muted); text-decoration: none; font-size: .88rem; font-weight: 500; white-space: nowrap; }
.nav-link-btn:hover { color: var(--text-main); background-color: rgba(31,41,55,.6); }
.nav-right { justify-self: end; display: flex; gap: .75rem; align-items: center; }
.account-nav { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.account-name { display: inline-block; max-width: 7rem; overflow: hidden; color: var(--text-muted); font-size: .82rem; font-weight: 500; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.account-name:hover, .account-name:focus-visible { color: var(--text-main); text-decoration: underline; outline: none; }
.login-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 4.4rem; height: 2.15rem; padding: 0 .72rem; border: 1px solid rgba(56,189,248,.38); border-radius: 3px; background: linear-gradient(180deg,rgba(56,189,248,.22),rgba(14,165,233,.14)); color: var(--accent); font-size: .78rem; font-weight: 700; text-decoration: none; letter-spacing: .01em; box-shadow: 0 0 14px rgba(56,189,248,.12); }
.login-btn:hover, .login-btn:focus-visible { background: linear-gradient(180deg,rgba(56,189,248,.34),rgba(14,165,233,.22)); border-color: rgba(56,189,248,.65); color: #e0f2fe; outline: none; }
.hamburger-btn { width: 2.5rem; height: 2.15rem; display: none; align-items: center; justify-content: center; border: 0; border-radius: 3px; background: #05070b; color: #fff; font-size: 1.18rem; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: none; padding: 0; transition: background-color .15s ease, color .15s ease; }
.hamburger-btn:hover { background: #0a0d12; color: #fff; }
.hamburger-btn:focus,
.hamburger-btn:focus-visible,
.hamburger-btn:active { outline: none; border: 0; box-shadow: none; background: #0c1118; color: #fff; }
.header-search-row { display: block; padding: 0 1.25rem 1rem; background-color: rgba(17,24,39,.95); }
.nav-search-bar { display: flex; gap: .5rem; padding: 0; border-top: 0; background: transparent; }
.nav-search-bar input { flex: 1; padding: .4rem .75rem; border-radius: 6px; border: 1px solid var(--border-color); background-color: rgba(3,7,18,.5); color: var(--text-main); font-size: .85rem; outline: none; min-width: 0; min-height: 2.55rem; }
.nav-search-bar input:focus { border-color: var(--accent); }
.nav-search-bar input::placeholder { color: var(--text-muted); opacity: .7; }
.nav-search-bar button { padding: .4rem .7rem; border-radius: 6px; border: 1px solid var(--border-color); background-color: rgba(31,41,55,.4); color: var(--text-main); font-size: .85rem; cursor: pointer; opacity: 1; flex-shrink: 0; }
.nav-search-bar button:hover,
.nav-search-bar button:focus-visible { border-color: rgba(56,189,248,.38); background-color: rgba(31,41,55,.62); color: #e0f2fe; outline: none; }
/* Mobile drawer */
.mobile-drawer { inset: 0 auto 0 0; height: 100dvh; width: 280px; margin: 0; padding: 2rem 1.5rem; box-sizing: border-box; border: 0; border-right: 1px solid rgba(31,41,55,.8); background-color: var(--card-bg); opacity: 0; transform: translateX(-100%); transition: opacity .18s ease, transform .18s ease, overlay .18s ease allow-discrete, display .18s ease allow-discrete; }
.mobile-drawer:popover-open { opacity: 1; transform: translateX(0); }
@starting-style { .mobile-drawer:popover-open { opacity: 0; transform: translateX(-100%); } }
.mobile-drawer h3 { margin: 0 0 1.5rem; color: #fff; font-size: 1.1rem; }
.mobile-account-nav { margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border-color); }
.mobile-drawer::backdrop { background-color: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.drawer-close { background: none; border: 0; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; position: absolute; top: 1rem; right: 1rem; }
.drawer-close:hover { color: var(--text-main); }
.dropdown-item { display: block; padding: .6rem .75rem; color: var(--text-main); text-decoration: none; font-size: .9rem; border-radius: 6px; }
.dropdown-item:hover { background-color: var(--border-color); color: var(--accent); }
.menu-placeholder { opacity: .45; pointer-events: none; }
/* Content */
.content-body { flex: 1 0 auto; padding: var(--content-top-gap) 1.25rem 1.25rem; }
.site-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; flex-shrink: 0; text-align: center; padding: 1.25rem 1.25rem 1.5rem; border-top: 1px solid var(--border-color); }
.site-footer-left { grid-column: 1; justify-self: start; padding-left: .75rem; }
.site-footer-left a { color: var(--text-muted); font-size: .82rem; text-decoration: none; }
.site-footer-left a:hover, .site-footer-left a:focus-visible { color: var(--text-main); text-decoration: underline; outline: none; }
.site-footer p { grid-column: 2; justify-self: center; margin: 0; color: var(--text-muted); font-size: .82rem; }
/* Notice card */
.notice-card { padding: 2rem 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); background: radial-gradient(circle at top right,rgba(56,189,248,.12),transparent 20rem),linear-gradient(180deg,rgba(17,24,39,.96),rgba(17,24,39,.9)); }
.notice-card h1 { margin: 0 0 .75rem; font-size: 1.8rem; font-weight: 800; }
.notice-card p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.notice-card-error { border-color: rgba(248,113,113,.28); background: radial-gradient(circle at top right,rgba(248,113,113,.14),transparent 20rem),linear-gradient(180deg,rgba(17,24,39,.96),rgba(17,24,39,.92)); }
.notice-card-error h1 { color: #fca5a5; }
.notice-card-error p { color: #fecaca; }
.notice-card-warning { position: relative; margin-bottom: 1rem; padding: .85rem 1rem .85rem 3rem; border-color: rgba(245,158,11,.48); border-left: 4px solid #f59e0b; border-radius: 8px; background: linear-gradient(90deg,rgba(120,53,15,.34),rgba(17,24,39,.94) 42%); box-shadow: 0 5px 18px rgba(245,158,11,.08); }
.notice-card-warning::before { content: "!"; position: absolute; top: .8rem; left: .8rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid rgba(253,230,138,.8); border-radius: 50%; background: rgba(245,158,11,.2); color: #fcd34d; font-size: .82rem; font-weight: 900; line-height: 1; }
.notice-card-warning h2 { margin: 0 0 .2rem; color: #fcd34d; font-size: .95rem; font-weight: 800; letter-spacing: .01em; }
.notice-card-warning p { margin: 0; color: #fde68a; font-size: .86rem; line-height: 1.45; }
.settings-card { max-width: 42rem; padding: 2rem; border: 1px solid var(--border-color); border-radius: 12px; background: linear-gradient(180deg,rgba(17,24,39,.96),rgba(17,24,39,.9)); }
.settings-card h1 { margin: 0 0 2rem; font-size: 1.8rem; }
.settings-card h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.settings-checkbox { display: flex; gap: .7rem; align-items: center; color: var(--text-main); cursor: pointer; }
.settings-checkbox input { width: 1.1rem; height: 1.1rem; }
.settings-help { margin: .8rem 0 1.5rem 1.8rem; color: var(--text-muted); font-size: .9rem; line-height: 1.5; }
.settings-save { padding: .65rem 1rem; border: 1px solid rgba(56,189,248,.5); border-radius: 4px; background: rgba(56,189,248,.16); color: var(--text-main); cursor: pointer; }
.settings-state { min-height: 1.2rem; color: var(--text-muted); font-size: .85rem; }
.nsfw-account-dialog { max-width: 30rem; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 10px; background: #111827; color: var(--text-main); }
.nsfw-account-dialog::backdrop { background: rgba(0,0,0,.65); }
.nsfw-account-dialog h2 { margin-top: 0; font-size: 1.15rem; }
.nsfw-account-dialog p { color: var(--text-muted); line-height: 1.5; }
.nsfw-dialog-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.dialog-cancel-btn { padding: .65rem 1rem; border: 1px solid var(--border-color); border-radius: 4px; background: transparent; color: var(--text-main); cursor: pointer; }
/* Base hidden attribute — prevents component display values from overriding */
[hidden] { display: none !important; }
/* Shared poster sizing */
:root {
--bg-color: #0b0f19;
--card-bg: #111827;
--border-color: #1f2937;
--text-main: #f3f4f6;
--text-muted: #9ca3af;
--accent: #38bdf8;
--accent-hover: #0ea5e9;
--header-height: 3.5rem;
--content-top-gap: 1.5rem;
--poster-width: 170px;
--poster-gap: 20px;
}
/* Poster cards */
.poster-card {
width: var(--poster-width);
flex: 0 0 var(--poster-width);
background: transparent;
display: block;
text-decoration: none;
color: inherit;
}
.poster-cover {
position: relative;
aspect-ratio: 173 / 260;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(145deg, #15334a 0%, #0b1a2c 58%, #060d18 100%);
color: rgba(255, 255, 255, .22);
font-size: 2rem;
font-weight: 800;
box-shadow: 0 8px 14px rgba(0, 0, 0, .46);
transition:
filter .16s ease,
box-shadow .16s ease;
}
.poster-cover::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, .02) 0%,
rgba(255, 255, 255, 0) 20%,
rgba(0, 0, 0, .06) 42%,
rgba(0, 0, 0, .46) 72%,
rgba(0, 0, 0, .88) 100%
);
transition:
background .16s ease,
opacity .16s ease;
pointer-events: none;
}
.poster-card:hover .poster-cover {
filter: brightness(1.08) saturate(1.08);
box-shadow: 0 8px 14px rgba(0, 0, 0, .52);
}
.poster-card:hover .poster-cover::before {
background:
linear-gradient(
180deg,
rgba(80, 180, 255, .18) 0%,
rgba(110, 200, 255, .14) 18%,
rgba(255, 255, 255, .05) 34%,
rgba(0, 0, 0, .10) 52%,
rgba(0, 0, 0, .54) 76%,
rgba(0, 0, 0, .90) 100%
);
}
.poster-cover::after {
content: "▶";
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
width: 2.6rem;
height: 2.6rem;
display: grid;
place-items: center;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, .92);
background: rgba(0, 0, 0, .28);
color: #fff;
font-size: 1.05rem;
line-height: 1;
opacity: 0;
transform: translate(-50%, -50%) scale(.96);
transition: opacity .16s ease, transform .16s ease;
pointer-events: none;
}
.poster-card:hover .poster-cover::after,
.poster-card:focus-visible .poster-cover::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.poster-image {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.poster-initials {
position: relative;
z-index: 0;
}
.poster-corner-badge {
position: absolute;
top: 0;
border-radius: 0;
z-index: 5;
display: inline-flex;
align-items: center;
padding: .2rem .45rem;
font-size: .62rem;
font-weight: 800;
letter-spacing: .03em;
pointer-events: none;
box-sizing: border-box;
}
.poster-corner-badge-left {
left: 0;
}
.poster-corner-badge-right {
right: 0;
}
.poster-kind-badge {
background: rgba(56,189,248,.9);
color: #08111d;
}
.poster-rating-badge {
background: rgba(15,23,42,.9);
color: #fde68a;
}
.poster-title {
display: block;
margin-top: .55rem;
color: var(--text-main);
font-size: .92rem;
font-weight: 800;
line-height: 1.12;
text-align: center;
}
.poster-year {
margin-top: .15rem;
color: var(--text-muted);
font-size: .73rem;
font-weight: 600;
text-align: center;
}
.poster-detail-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .3rem;
margin-top: .45rem;
}
.poster-detail-chip {
display: inline-flex;
align-items: center;
padding: .14rem .46rem;
border-radius: 999px;
font-size: .67rem;
font-weight: 700;
white-space: nowrap;
border: 1px solid rgba(56,189,248,.2);
background: rgba(56,189,248,.1);
color: var(--accent);
}
.poster-detail-chip-status {
border-color: rgba(52,211,153,.2);
background: rgba(52,211,153,.1);
color: #34d399;
}
.poster-detail-chip-role {
border-color: rgba(251,191,36,.2);
background: rgba(251,191,36,.1);
color: #fbbf24;
}
.poster-detail-chip-canon {
border-color: rgba(248,113,113,.2);
background: rgba(248,113,113,.1);
color: #fca5a5;
}
.poster-card-error {
width: var(--poster-width);
flex: 0 0 var(--poster-width);
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 173 / 260;
background: rgba(31,41,55,.3);
border: 1px solid rgba(248,113,113,.2);
border-radius: 6px;
color: var(--text-muted);
font-size: .78rem;
font-weight: 600;
text-align: center;
padding: .5rem;
box-sizing: border-box;
}
/* Catalog heading */
.catalog-heading { margin: .75rem 0 1rem; text-align: center; }
.catalog-heading h1 { margin: 0; font-size: 1.55rem; font-weight: 400; letter-spacing: .02em; color: var(--text-main); }
/* Filter panel */
.filter-panel { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.kind-filter-panel { align-items: center; }
.kind-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.kind-filter-button {
padding: .42rem .9rem;
border-radius: 8px;
border: 1px solid rgba(56,189,248,.16);
background: rgba(31,41,55,.42);
color: var(--text-muted);
font-size: .82rem;
font-weight: 700;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.kind-filter-button:hover,
.kind-filter-button:focus-visible {
outline: none;
border-color: rgba(56,189,248,.38);
background: rgba(31,41,55,.62);
color: var(--text-main);
}
.kind-filter-button-active {
border-color: rgba(56,189,248,.44);
background: rgba(56,189,248,.14);
color: #d7f4ff;
}
.nsfw-filter { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: .82rem; font-weight: 700; cursor: pointer; }
.nsfw-filter input { width: 1rem; height: 1rem; accent-color: #ef4444; }
/* Filter summary */
.filter-result-summary { margin-left: auto; display: flex; align-items: center; }
.filtered-title-count { display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: 999px; background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.2); color: var(--accent); font-size: .78rem; font-weight: 600; white-space: nowrap; }
/* Catalog panel */
.catalog-panel { margin-bottom: 2rem; }
.catalog-state { padding: 2rem 0; text-align: center; color: var(--text-muted); font-size: .9rem; }
.catalog-empty-state { color: var(--text-muted); }
.catalog-list { display: flex; flex-wrap: wrap; gap: var(--poster-gap); justify-content: flex-start; }
/* Search layout card */
.search-layout-card {
margin-bottom: 1.25rem;
padding: 1.25rem;
border: 1px solid var(--border-color);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(56,189,248,.08), transparent 18rem),
rgba(17,24,39,.86);
}
.search-context {
display: flex;
align-items: flex-start;
gap: 1.15rem;
margin-bottom: 1rem;
}
.search-context-poster {
flex: 0 0 112px;
width: 112px;
aspect-ratio: 173 / 260;
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(31,41,55,.7);
background: linear-gradient(145deg, #15334a 0%, #0b1a2c 58%, #060d18 100%);
box-shadow: 0 8px 18px rgba(0,0,0,.36);
position: relative;
}
.search-context-poster .item-poster-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.search-context-main {
min-width: 0;
flex: 1;
}
.search-kicker { margin-bottom: .35rem; color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.search-title { margin: 0 0 .35rem; font-size: 1.7rem; font-weight: 800; color: var(--text-main); line-height: 1.15; }
.search-subtitle { color: var(--text-muted); font-size: .96rem; margin-bottom: .55rem; }
.search-filter-label { margin-right: .15rem; color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.search-filter-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .3rem .2rem .55rem; border: 1px solid rgba(56,189,248,.28); border-radius: 999px; background: rgba(56,189,248,.1); color: #bae6fd; font-size: .8rem; font-weight: 700; line-height: 1.25; }
.search-filter-pill-close { display: inline-grid; width: 1.15rem; height: 1.15rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #7dd3fc; font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; }
.search-filter-pill-close:hover, .search-filter-pill-close:focus-visible { background: rgba(56,189,248,.2); color: #e0f2fe; outline: none; }
.search-description { color: var(--text-muted); font-size: .92rem; line-height: 1.65; max-width: 70ch; margin: 0 0 .75rem; }
.search-context-meta { color: #dbeafe; font-size: .88rem; font-weight: 600; }
.search-context-no-poster .search-context-poster {
display: none !important;
}
/* Search form */
.search-primary-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .6rem;
margin-top: .9rem;
}
.search-primary-form input {
min-height: 2.75rem;
padding: 0 .9rem;
border: 1px solid var(--border-color);
border-radius: 9px;
background: rgba(3,7,18,.55);
color: var(--text-main);
font-size: .92rem;
}
.search-primary-form button {
min-width: 6rem;
border-radius: 9px;
border: 1px solid rgba(56,189,248,.34);
background: rgba(56,189,248,.14);
color: #dff7ff;
font-weight: 800;
cursor: pointer;
}
/* Search controls */
.search-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
margin-top: .9rem;
}
.search-tabs {
display: inline-flex;
flex-wrap: wrap;
padding: .2rem;
border: 1px solid rgba(56,189,248,.14);
border-radius: 10px;
background: rgba(3,7,18,.35);
}
.search-tabs button {
min-height: 2rem;
padding: 0 .85rem;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--text-muted);
font-weight: 800;
cursor: pointer;
}
.search-tabs button.kind-filter-button-active {
background: rgba(56,189,248,.18);
color: #e0f2fe;
}
.search-sort {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .45rem .7rem;
border-radius: 10px;
border: 1px solid rgba(56,189,248,.14);
background: rgba(3,7,18,.35);
color: var(--text-muted);
font-size: .82rem;
font-weight: 800;
}
.search-sort select {
border: 0;
background: transparent;
color: var(--text-main);
font: inherit;
min-width: 9rem;
}
.search-sort select:focus {
outline: none;
}
/* Search results section */
.search-results-section {
margin-bottom: 2rem;
}
/* Hide header search on search page */
.search-page .header-search-row {
display: none;
}
/* Pagination */
.ui-pagination { display: flex; gap: .35rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; border-radius: 6px; font-size: .85rem; font-weight: 500; color: var(--text-muted); background-color: rgba(31,41,55,.3); border: 1px solid var(--border-color); }
.page-num.active { color: var(--accent); border-color: var(--accent); background-color: rgba(56,189,248,.1); }
.page-num.disabled { opacity: .4; pointer-events: none; }
/* Scroll top */
.scroll-top-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(31,41,55,.85); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 1rem; text-decoration: none; z-index: 90; }
.scroll-top-btn:hover { background-color: var(--card-bg); border-color: var(--accent); color: var(--accent); }
/* Desktop >= 1221px */
@media (min-width: 1221px) {
body { justify-content: center; background: radial-gradient(ellipse 80% 60% at 50% -10%,rgba(56,189,248,.1),transparent 70%),radial-gradient(ellipse 60% 50% at 80% 90%,rgba(129,140,248,.07),transparent 60%),linear-gradient(180deg,#0b0f19,#030712); background-attachment: fixed; }
.site-wrapper { max-width: 1200px; margin: 0 auto; border-left: 1px solid rgba(31,41,55,.6); border-right: 1px solid rgba(31,41,55,.6); box-shadow: 0 0 40px rgba(0,0,0,.5); }
.site-header { position: sticky; top: 0; z-index: 50; }
.nav-links-desktop { display: flex; }
.hamburger-btn { display: none; }
}
/* Tablet <= 1220px */
@media (max-width: 1220px) {
body { justify-content: flex-start; background: #0b0f19; }
.site-wrapper { max-width: none; width: 100%; margin: 0; border: 0; box-shadow: none; }
.site-header { position: static; }
.nav-container { grid-template-columns: 1fr auto; }
.logo { justify-self: start; }
.nav-right { justify-self: end; }
.nav-links-desktop { display: none; }
.hamburger-btn { display: inline-flex; }
.header-search-row { display: block; }
html { scroll-padding-top: 0; }
}
/* Mobile <= 760px */
@media (max-width: 760px) {
:root { --poster-width: min(240px,calc((100vw - 3rem) / 2)); --poster-gap: 16px; }
.content-body { padding: 1rem .75rem .75rem; }
.nav-container { height: 64px; padding: 0 .75rem; gap: .6rem; }
.logo { font-size: 1rem; }
.nav-right { gap: .5rem; }
.login-btn { min-width: 5.5rem; height: 2.5rem; padding: 0 .75rem; }
.hamburger-btn { width: 2.5rem; height: 2.5rem; }
.catalog-list { justify-content: center; }
.filter-panel { flex-direction: column; align-items: stretch; }
.filter-actions { justify-content: stretch; }
.filter-result-summary { margin-left: 0; justify-content: center; }
.header-search-row { padding: 0 .75rem .75rem; }
.filter-actions button { flex: 1; }
.site-footer { padding: 1rem .75rem; }
.scroll-top-btn { bottom: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; font-size: .9rem; }
}
/* Narrow mobile <= 430px */
@media (max-width: 430px) {
:root { --poster-width: min(255px,calc(100vw - 2rem)); }
.catalog-list { justify-content: center; }
}
/* Extra-narrow <= 340px */
@media (max-width: 340px) {
:root { --poster-width: calc(100vw - 2rem); }
.catalog-list { justify-content: center; }
.poster-title { font-size: 1rem; }
}
/* Shared page shell + breadcrumb (item/release/reader/catalog) */
.page-shell { max-width: 1160px; margin: 0 auto; width: 100%; }
.page-breadcrumb { font-size: .85rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.page-breadcrumb a { color: var(--accent); text-decoration: none; }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb span { color: var(--text-main); }
/* Title page */
.item-hero-panel {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
grid-template-areas:
"poster meta"
"poster description";
gap: .9rem 2rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
align-items: start;
}
.item-meta { grid-area: meta; min-width: 0; }
.item-hero-description { grid-area: description; }
.item-title { margin: 0 0 .35rem; font-size: 1.65rem; font-weight: 800; color: var(--text-main); line-height: 1.15; }
.item-native-title { font-size: .95rem; color: var(--text-muted); margin-bottom: .15rem; }
.item-english-title { font-size: .95rem; color: var(--text-muted); margin-bottom: .5rem; }
.item-title-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.item-meta-chip { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.2); color: var(--accent); }
.item-meta-chip-kind { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.2); color: var(--accent); }
.item-meta-chip-status { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.2); color: #34d399; }
.item-meta-chip-nsfw { background: rgba(127,29,29,.28); border-color: rgba(239,68,68,.5); color: #fca5a5; }
.item-fact-list { width: 100%; border-spacing: 0; margin: 0 0 .75rem; }
.item-fact-row-label,
.item-fact-row-value { padding: .175rem 0; vertical-align: top; }
.item-fact-row-label { font-size: .82rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; text-align: left; }
.item-fact-row-value { padding-left: .75rem; font-size: .82rem; color: var(--text-main); margin: 0; overflow-wrap: anywhere; }
.item-fact-row-value a,
.item-fact-list a { color: var(--accent); text-decoration: none; }
.item-fact-row-value a:hover,
.item-fact-row-value a:focus-visible,
.item-fact-list a:hover,
.item-fact-list a:focus-visible { text-decoration: underline; }
.item-fact-row-value a:hover,
.item-fact-row-value a:focus-visible { color: #f87171; }
.item-fact-row-value a.item-theme-link { text-decoration: none; }
.item-fact-row-value a.item-theme-link:hover,
.item-fact-row-value a.item-theme-link:focus-visible { color: #f87171; text-decoration: none; }
.item-theme-collapsible { position: relative; max-height: 1.5rem; overflow: hidden; padding-bottom: 2.35rem; transition: max-height .25s ease; }
.item-theme-collapsible.item-theme-expanded { max-height: 100rem; }
.item-theme-links { min-width: 0; }
.item-theme-toggle { position: absolute; inset: auto 0 0; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; min-height: 2.35rem; padding: .8rem .5rem .2rem; border: 0; background: linear-gradient(180deg, rgba(17,24,39,0), rgba(17,24,39,.96) 58%); color: var(--accent); font-size: .72rem; font-weight: 700; cursor: pointer; text-align: right; }
.item-theme-toggle:hover,
.item-theme-toggle:focus-visible { color: #f87171; outline: none; }
.item-tags { display: flex; flex-direction: column; gap: .6rem; }
.item-taxonomy-group { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.item-taxonomy-label { color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.item-taxonomy-chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.item-tag-chip { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.2); color: var(--accent); font-size: .78rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.item-tag-chip:hover,
.item-tag-chip:focus-visible { border-color: rgba(56,189,248,.38); color: #e0f2fe; text-decoration: none; }
.item-section-summary { list-style: none; cursor: pointer; margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.item-section-summary::-webkit-details-marker { display: none; }
.item-section-summary::-moz-list-bullet { list-style: none; }
.item-section-summary::after { content: "\203A"; color: var(--text-muted); font-size: 1.25em; font-weight: 400; transition: transform .15s ease, color .15s ease; display: inline-block; transform: rotate(0deg); }
.item-section-summary:hover::after { color: var(--accent); }
details[open] > .item-section-summary::after { transform: rotate(90deg); }
.item-editions-section > details > .item-edition-list { margin-top: .95rem; }
.item-section-summary { outline: none; -webkit-tap-highlight-color: transparent; }
.item-section-summary:focus { outline: none; }
.item-section-summary:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(56,189,248,.28); border-radius: 6px; }
details > .item-section-summary { border: 0; }
.item-description-text { min-width: 0; font-size: .9rem; color: var(--text-muted); line-height: 1.65; margin: 0; padding: .65rem .85rem .8rem; border: 1px solid var(--border-color); border-radius: .45rem; }
.item-description-text legend { padding: 0 .35rem; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.item-release-list { display: flex; flex-direction: column; gap: .75rem; }
.item-release-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .9rem 1rem; border: 1px solid rgba(56,189,248,.16); border-radius: 12px; background: rgba(3,7,18,.32); color: inherit; text-decoration: none; }
.item-release-card-link:hover { border-color: rgba(56,189,248,.42); background: rgba(56,189,248,.08); }
.item-release-info { min-width: 0; }
.item-release-info strong { display: block; color: var(--text-main); font-size: .95rem; font-weight: 900; overflow-wrap: anywhere; }
.item-release-meta { margin-top: .25rem; color: var(--text-muted); font-size: .8rem; overflow-wrap: anywhere; }
.item-release-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0 .85rem; border-radius: 999px; border: 1px solid rgba(56,189,248,.24); background: rgba(56,189,248,.12); color: var(--accent); font-size: .78rem; font-weight: 900; white-space: nowrap; }
.item-edition-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .95rem; }
.item-edition-card { padding: .85rem .9rem; border: 1px solid rgba(56,189,248,.12); border-radius: 12px; background: rgba(3,7,18,.26); }
.item-edition-card strong { display: block; color: var(--text-main); font-size: .92rem; font-weight: 900; }
.item-edition-meta { margin-top: .22rem; color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
.item-edition-notes { margin-top: .45rem; color: var(--text-muted); font-size: .82rem; line-height: 1.55; }
.item-empty { font-size: .9rem; color: var(--text-muted); font-style: italic; }
.item-empty a,
.item-empty a:visited,
.item-empty a:hover,
.item-empty a:focus-visible,
.item-empty a:active { color: inherit; font: inherit; }
[data-item-releases] { display: contents; }
@media (max-width: 640px) {
.item-release-card {
grid-template-columns: 1fr;
align-items: stretch;
}
.item-release-cta {
width: 100%;
box-sizing: border-box;
}
}
/* Shared Release surfaces */
.item-poster { grid-area: poster; flex: 0 0 260px; width: 100%; max-width: 260px; aspect-ratio: 173 / 260; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #15334a 0%, #0b1a2c 58%, #060d18 100%); color: rgba(255,255,255,.22); font-size: 2.5rem; font-weight: 800; box-shadow: 0 8px 14px rgba(0,0,0,.46); position: relative; border-radius: 8px; border: 1px solid rgba(31,41,55,.6); }
.item-poster-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.item-section-card { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); background: var(--card-bg); }
.item-section-card h2 { margin: 0 0 .65rem; font-size: 1.15rem; font-weight: 700; color: var(--text-main); }
[data-release-active-bundle-section] details > .release-facts { margin-top: .65rem; }
[data-release-active-bundle-section] details > .release-facts { margin-top: .65rem; }
/* Release page */
.release-content { }
.release-hero-panel { display: flex; gap: 1.75rem; margin-bottom: 1.75rem; padding: 1.35rem 1.4rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; }
.release-poster { flex: 0 0 260px; aspect-ratio: 173 / 260; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #15334a 0%, #0b1a2c 58%, #060d18 100%); color: rgba(255,255,255,.22); font-size: 2.5rem; font-weight: 800; box-shadow: 0 8px 14px rgba(0,0,0,.46); position: relative; border-radius: 8px; border: 1px solid rgba(31,41,55,.6); }
.release-meta { flex: 1; min-width: 0; }
.release-title { margin: 0 0 .35rem; font-size: 1.65rem; font-weight: 800; color: var(--text-main); line-height: 1.15; }
.release-subtitle { font-size: .95rem; color: var(--text-muted); margin-bottom: .5rem; }
.release-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: 0 0 .75rem; }
.release-fact-row-label { font-size: .82rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.release-fact-row-value { font-size: .82rem; color: var(--text-main); margin: 0; }
.release-section-card { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); background: var(--card-bg); }
.release-section-card h2 { margin: 0 0 .65rem; font-size: 1.15rem; font-weight: 700; color: var(--text-main); }
.release-notes { font-size: .9rem; color: var(--text-muted); line-height: 1.65; max-width: 70ch; }
.release-notes p { margin: 0 0 .5rem; }
.release-empty { font-size: .9rem; color: var(--text-muted); font-style: italic; }
.release-action-link { display: inline-block; margin-top: .35rem; padding: .25rem .6rem; border-radius: 4px; border: 1px solid rgba(56,189,248,.22); background: rgba(56,189,248,.08); color: #7dd3fc; font-size: .72rem; font-weight: 600; text-decoration: none; }
.release-action-link:hover { border-color: rgba(56,189,248,.34); background: rgba(56,189,248,.12); }
.release-action-link[aria-disabled="true"] { border-color: rgba(156,163,175,.2); background: rgba(156,163,175,.08); color: var(--text-muted); cursor: default; pointer-events: none; }
.release-notice-card { }
/* Reader shell — PhotoSwipe-based */
.reader-hero { margin-bottom: 1.35rem; padding: 1rem 0; }
.reader-hero-title { margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 800; color: var(--text-main); line-height: 1.2; }
.reader-hero-subtitle { font-size: .9rem; color: var(--text-muted); margin-bottom: .65rem; }
.reader-hero-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.reader-start-btn { display: inline-flex; align-items: center; padding: .45rem 1rem; border-radius: 8px; border: 1px solid rgba(56,189,248,.35); background: linear-gradient(180deg, rgba(56,189,248,.2), rgba(14,165,233,.12)); color: #7dd3fc; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.reader-start-btn:hover { background: linear-gradient(180deg, rgba(56,189,248,.32), rgba(14,165,233,.2)); border-color: rgba(56,189,248,.5); }
.reader-start-btn:focus,
.reader-start-btn:focus-visible {
outline: none;
box-shadow: none;
}
.reader-storage-warning { margin-bottom: 1rem; }
.reader-dimension-warning { margin-bottom: 1rem; }
.reader-grid-section { margin-bottom: 1.5rem; padding: 1rem 1.15rem; border-radius: 12px; border: 1px solid var(--border-color); background: rgba(17,24,39,.55); }
.reader-grid-heading { margin: 0 0 .85rem; font-size: 1rem; font-weight: 700; color: var(--text-main); }
.reader-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem; }
.reader-page-card { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid rgba(148,163,184,.18); background: rgba(15,23,42,.6); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.reader-page-card:hover { border-color: rgba(56,189,248,.35); box-shadow: 0 0 12px rgba(56,189,248,.08); }
.reader-page-card-unavailable { opacity: .55; cursor: default; }
.reader-page-card-unavailable:hover { border-color: rgba(148,163,184,.18); box-shadow: none; }
.reader-page-thumb { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: linear-gradient(145deg, #15334a 0%, #0b1a2c 58%, #060d18 100%); }
.reader-page-overlay { position: absolute; inset: 0; pointer-events: none; }
.reader-page-label { position: absolute; bottom: 0; left: 0; right: 0; padding: .35rem .5rem; font-size: .72rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); text-align: center; pointer-events: none; }
.reader-page-status { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78rem; color: var(--text-muted); background: rgba(0,0,0,.5); }
.reader-aux-section { margin-bottom: 1.5rem; padding: 1rem 1.15rem; border-radius: 12px; border: 1px solid var(--border-color); background: rgba(17,24,39,.5); }
.reader-aux-heading { margin: 0 0 .85rem; font-size: .95rem; font-weight: 700; color: var(--text-main); }
.reader-aux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .65rem; }
.reader-aux-card { cursor: default; }
.reader-aux-card:hover { border-color: rgba(148,163,184,.18); box-shadow: none; }
.reader-aux-thumb { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: linear-gradient(145deg, #15334a 0%, #0b1a2c 58%, #060d18 100%); }
.reader-aux-label { position: absolute; bottom: 1.45rem; left: 0; right: 0; padding: 0 .5rem; font-size: .7rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); text-align: center; pointer-events: none; }
.reader-aux-meta { position: absolute; bottom: .2rem; left: .35rem; right: .35rem; font-size: .62rem; color: rgba(226,232,240,.74); text-align: center; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-empty { font-size: .9rem; color: var(--text-muted); font-style: italic; }
.reader-active { overflow: hidden !important; }
.reader-strip-overlay { position: fixed; inset: 0; z-index: 200; background: #0b0f19; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; }
.reader-strip-overlay * { -webkit-tap-highlight-color: transparent; }
.reader-strip-close { position: fixed; top: .75rem; right: .75rem; z-index: 210; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.65); color: #fff; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.reader-strip-close:hover { background: rgba(0,0,0,.85); border-color: rgba(255,255,255,.45); }
.reader-strip-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 210; display: flex; align-items: center; height: 1.6rem; padding: 0 .65rem; background: rgba(0,0,0,.88); border-top: 1px solid rgba(255,255,255,.1); gap: .5rem; }
.reader-strip-bar-left { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-strip-bar-left .sbar-title { color: #e2e8f0; font-weight: 700; }
.reader-strip-bar-left .sbar-label { color: #7dd3fc; font-weight: 600; }
.reader-strip-bar-left .sbar-sep { color: rgba(255,255,255,.25); font-weight: 400; }
.reader-strip-bar-center { flex: 0 1 auto; color: rgba(255,255,255,.7); font-size: .68rem; font-weight: 600; white-space: nowrap; text-align: center; }
.reader-strip-bar-right { flex: 1; min-width: 0; text-align: right; color: #fff; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.reader-strip-quiet .reader-strip-bar,
.reader-strip-quiet .reader-strip-close { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.reader-strip-container { width: 100%; max-width: 100%; margin: 0 auto; padding: .25rem 0; }
.reader-strip-page { display: block; width: 100%; height: auto; border: 0; margin: 0; padding: 0; cursor: pointer; background: linear-gradient(145deg, #15334a 0%, #0b1a2c 58%, #060d18 100%); }
.reader-strip-page:hover { cursor: pointer; }
/* Scroll/long-strip shells: stable aspect-ratio keeps scroll geometry; the
placeholder is shown while the image is unloaded or loading. */
.reader-strip-shell { position: relative; width: 100%; background: linear-gradient(145deg, #15334a 0%, #0b1a2c 58%, #060d18 100%); }
.reader-strip-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(226,232,240,.45); font-size: .85rem; font-weight: 700; letter-spacing: .03em; pointer-events: none; }
.reader-strip-shell .reader-strip-page { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Per-page placeholders / notices for grid + scroll error/unavailable state */
.reader-page-loading .reader-page-thumb,
.reader-page-unloaded .reader-page-thumb { visibility: hidden; }
.reader-page-notice { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .5rem; text-align: center; background: rgba(11,15,25,.85); }
.reader-page-notice-text { font-size: .8rem; color: var(--text-muted); }
.reader-page-retry { padding: .3rem .7rem; border-radius: 6px; border: 1px solid rgba(56,189,248,.4); background: rgba(56,189,248,.12); color: #7dd3fc; font-size: .75rem; font-weight: 700; cursor: pointer; }
.reader-page-retry:hover { background: rgba(56,189,248,.22); }
/* Shared Release mobile surfaces */
@media (max-width: 760px) {
.page-shell {
max-width: none;
}
.item-hero-panel {
display: flex;
flex-direction: column;
align-items: center;
padding: .85rem .75rem;
border-radius: 6px;
border-color: rgba(31,41,55,.45);
background: rgba(17,24,39,.55);
}
.item-poster {
flex: 0 0 auto;
width: min(240px,calc(100vw - 3rem));
}
.item-title,
.item-native-title,
.item-english-title {
text-align: center;
}
.item-title-chips {
justify-content: center;
}
.item-tags {
justify-content: center;
}
.item-fact-list {
text-align: left;
width: 100%;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.item-fact-row-label {
padding: .175rem 0;
text-align: right;
}
.item-fact-row-value {
padding: .175rem 0 .175rem .65rem;
text-align: left;
overflow-wrap: anywhere;
}
.item-content {
display: flex;
flex-direction: column;
}
.item-hero-panel { order: 0; }
.item-releases-section { order: 1; }
.item-editions-section { order: 2; }
.item-section-card {
padding: .85rem .75rem;
border-radius: 6px;
background: rgba(17,24,39,.35);
}
.item-section-card h2 {
text-align: left;
}
.release-hero-panel {
flex-direction: column;
align-items: center;
padding: .85rem .75rem;
border-radius: 6px;
border-color: rgba(31,41,55,.45);
background: rgba(17,24,39,.55);
}
.release-poster {
flex: 0 0 auto;
width: min(240px,calc(100vw - 3rem));
}
.release-title,
.release-subtitle {
text-align: center;
}
.release-facts {
grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
gap: .35rem .65rem;
text-align: left;
width: 100%;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.release-fact-row-label {
text-align: right;
}
.release-fact-row-value {
text-align: left;
overflow-wrap: anywhere;
}
.release-section-card {
padding: .85rem .75rem;
border-radius: 6px;
background: rgba(17,24,39,.35);
}
.release-section-card h2 {
text-align: left;
}
.release-notes {
max-width: none;
text-align: left;
}
.search-layout-card {
padding: 1rem;
}
.search-context {
gap: .9rem;
}
.search-context-poster {
flex-basis: 88px;
width: 88px;
}
.search-title,
.search-subtitle,
.search-context-meta,
.search-description,
.search-kicker {
text-align: center;
}
.search-primary-form {
grid-template-columns: 1fr;
}
.search-primary-form button {
width: 100%;
}
.search-controls {
align-items: stretch;
flex-direction: column;
}
.search-tabs {
width: 100%;
justify-content: space-between;
}
.search-tabs button {
flex: 1;
}
.search-sort {
width: 100%;
justify-content: space-between;
box-sizing: border-box;
}
.search-result-count {
margin-left: 0;
justify-content: center;
}
.search-results-grid {
justify-content: center;
}
.reader-hero {
padding: .75rem 0;
}
.reader-hero-title {
font-size: 1.15rem;
}
.reader-hero-actions {
flex-direction: column;
align-items: flex-start;
}
.reader-grid-section {
padding: .75rem .65rem;
border-radius: 8px;
}
.reader-page-grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: .5rem;
}
}
/* Shared Release intermediate surface */
@media (min-width: 561px) and (max-width: 760px) {
.item-hero-panel {
display: grid;
grid-template-columns: clamp(150px, 31vw, 210px) minmax(0, 1fr);
grid-template-areas:
"poster meta"
"description description";
gap: .9rem 1rem;
align-items: start;
padding: 1rem;
border-radius: 8px;
}
.item-poster {
grid-area: poster;
width: 100%;
max-width: 210px;
flex: none;
}
.item-meta {
grid-area: meta;
min-width: 0;
}
.item-hero-description {
grid-area: description;
margin-top: .25rem;
text-align: left;
}
.item-title,
.item-native-title,
.item-english-title {
text-align: left;
}
.item-title {
font-size: clamp(1.25rem, 4vw, 1.55rem);
line-height: 1.12;
}
.item-native-title,
.item-english-title {
font-size: .84rem;
}
.item-title-chips {
justify-content: flex-start;
}
.item-meta-chip {
font-size: .66rem;
padding: .12rem .42rem;
}
.item-tag-chip {
font-size: .7rem;
padding: .16rem .46rem;
}
.item-fact-list {
width: 100%;
max-width: none;
margin: .55rem 0 .65rem;
text-align: left;
}
.item-fact-row-label {
padding: .125rem 0;
text-align: left;
font-size: .74rem;
}
.item-fact-row-value {
padding: .125rem 0 .125rem .5rem;
text-align: left;
font-size: .74rem;
overflow-wrap: anywhere;
}
.item-description-text {
font-size: .84rem;
line-height: 1.55;
}
}
/* Narrow mobile */
@media (max-width: 430px) {
.item-fact-list {
font-size: .8rem;
}
.item-hero-panel {
padding: .65rem .5rem;
}
.item-section-card {
padding: .65rem .5rem;
}
.release-facts {
grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
gap: .25rem .5rem;
font-size: .8rem;
}
.release-hero-panel {
padding: .65rem .5rem;
}
.release-section-card {
padding: .65rem .5rem;
}
.reader-hero {
padding: .5rem 0;
}
.reader-hero-title {
font-size: 1rem;
}
.reader-grid-section {
padding: .65rem .5rem;
}
.reader-page-grid {
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: .4rem;
}
}
.reader-supplemental { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.reader-supplemental-link { padding: .6rem .85rem; border: 1px solid #c9b99b; border-radius: .5rem; background: #f6efe2; color: inherit; }
/* Static Catalog detail presentation */
#catalog-root > main,
.catalog-detail {
max-width: 72rem;
margin: 0 auto;
padding: clamp(1rem, 3vw, 2rem) 1.25rem 2.5rem;
}
#catalog-root > main > nav,
.catalog-detail-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin-bottom: 1rem;
color: var(--text-muted);
font-size: .8rem;
}
#catalog-root > main > nav a,
.catalog-detail-breadcrumb a,
.catalog-detail-link {
color: #bae6fd;
text-decoration: none;
}
#catalog-root > main > nav a,
.catalog-detail-breadcrumb a {
padding: .3rem .6rem;
border: 1px solid rgba(56,189,248,.2);
border-radius: 999px;
background: rgba(56,189,248,.08);
}
#catalog-root > main > nav a:hover,
.catalog-detail-breadcrumb a:hover,
.catalog-detail-link:hover {
color: #e0f2fe;
text-decoration: underline;
}
#catalog-root > main > article,
.catalog-detail-content {
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid var(--border-color);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(56,189,248,.09), transparent 24rem),
linear-gradient(180deg, rgba(17,24,39,.96), rgba(17,24,39,.86));
box-shadow: 0 14px 30px rgba(0,0,0,.16);
}
#catalog-root > main > article > h1,
.catalog-detail-title {
margin: 0 0 .85rem;
color: var(--text-main);
font-size: clamp(1.6rem, 4vw, 2.35rem);
line-height: 1.1;
overflow-wrap: anywhere;
}
#catalog-root > main > article > p {
margin: .45rem 0;
color: var(--text-muted);
line-height: 1.5;
}
#catalog-root > main > article > dl,
.catalog-detail-facts {
display: grid;
grid-template-columns: minmax(8rem, .35fr) minmax(0, 1fr);
gap: .35rem .9rem;
margin: 1.25rem 0 0;
padding: 1rem;
border: 1px solid rgba(148,163,184,.14);
border-radius: 10px;
background: rgba(3,7,18,.28);
}
#catalog-root > main > article > dl dt,
.catalog-detail-facts dt {
color: var(--text-muted);
font-size: .78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
#catalog-root > main > article > dl dd,
.catalog-detail-facts dd {
margin: 0;
color: var(--text-main);
overflow-wrap: anywhere;
}
#catalog-root > main > article > section,
.catalog-detail-section {
margin-top: 1.4rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(148,163,184,.14);
}
#catalog-root > main > article > section h2,
.catalog-detail-section h2 {
margin: 0 0 .65rem;
color: var(--text-main);
font-size: 1.05rem;
}
#catalog-root > main > article > section p {
max-width: 75ch;
margin: 0;
color: #dbeafe;
line-height: 1.7;
overflow-wrap: anywhere;
}
#catalog-root > main > article > section ul,
.catalog-detail-list {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
}
#catalog-root > main > article > section li,
.catalog-detail-list li {
max-width: 100%;
padding: .45rem .65rem;
border: 1px solid rgba(56,189,248,.16);
border-radius: 8px;
background: rgba(56,189,248,.07);
color: var(--text-muted);
overflow-wrap: anywhere;
}
#catalog-root > main > article > section li a,
.catalog-detail-list li a {
font-weight: 700;
}
@media (max-width: 600px) {
#catalog-root > main,
.catalog-detail {
padding: 1rem .75rem 1.5rem;
}
#catalog-root > main > article,
.catalog-detail-content {
padding: 1rem .75rem;
border-radius: 10px;
}
#catalog-root > main > article > dl,
.catalog-detail-facts {
grid-template-columns: 1fr;
gap: .15rem;
}
#catalog-root > main > article > dl dd,
.catalog-detail-facts dd {
margin-bottom: .45rem;
}
}
.bundle-page { max-width: 980px; margin: 0 auto; }
.bundle-breadcrumb { margin: 0 0 1rem; }
.bundle-breadcrumb a { color: #7dd3fc; font-size: .82rem; font-weight: 700; text-decoration: none; }
.bundle-breadcrumb a:hover { color: #e0f2fe; }
.bundle-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid rgba(56,189,248,.2); border-radius: 16px; background: radial-gradient(circle at 100% 0, rgba(56,189,248,.16), transparent 23rem), linear-gradient(145deg, rgba(17,24,39,.98), rgba(11,18,32,.94)); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.bundle-hero-copy { min-width: 0; }
.bundle-kicker { margin: 0 0 .45rem; color: #7dd3fc; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.bundle-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.bundle-title-row h1 { margin: 0; color: #f8fafc; font-size: clamp(1.8rem, 4vw, 2.65rem); letter-spacing: -.035em; }
.bundle-description { max-width: 58ch; margin: .7rem 0 .85rem; color: #cbd5e1; font-size: .98rem; line-height: 1.55; }
.bundle-id, .bundle-card-id { color: #64748b; font: .7rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.bundle-state { display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0 .6rem; border: 1px solid rgba(148,163,184,.24); border-radius: 999px; color: #cbd5e1; background: rgba(148,163,184,.08); font-size: .62rem; font-weight: 800; letter-spacing: .07em; white-space: nowrap; }
.bundle-state-assembling { border-color: rgba(251,191,36,.3); color: #fde68a; background: rgba(251,191,36,.08); }
.bundle-state-ready_for_review { border-color: rgba(52,211,153,.3); color: #a7f3d0; background: rgba(52,211,153,.08); }
.bundle-state-finalized { border-color: rgba(129,140,248,.35); color: #c7d2fe; background: rgba(129,140,248,.1); }
.bundle-primary-action, .bundle-card-action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.45rem; padding: 0 .82rem; border: 1px solid rgba(148,163,184,.2); border-radius: 8px; background: rgba(148,163,184,.07); color: #cbd5e1; font-size: .78rem; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bundle-primary-action, .bundle-card-action-primary { border-color: rgba(56,189,248,.42); background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(14,165,233,.1)); color: #e0f2fe; }
.bundle-primary-action:hover, .bundle-card-action:hover { border-color: rgba(56,189,248,.65); color: #fff; }
.bundle-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0 2rem; }
.bundle-fact { padding: .9rem 1rem; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; background: rgba(17,24,39,.72); }
.bundle-fact-label { display: block; margin-bottom: .25rem; color: #64748b; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bundle-fact-value { color: #e2e8f0; font-size: .9rem; }
.bundle-finalization { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 2rem; padding: 1.2rem 1.35rem; border: 1px solid rgba(52,211,153,.24); border-radius: 12px; background: linear-gradient(135deg, rgba(52,211,153,.1), rgba(15,23,42,.72)); }
.bundle-finalization h2 { margin: 0 0 .3rem; color: #ecfdf5; font-size: 1.05rem; }
.bundle-finalization p { margin: 0; color: #a7f3d0; font-size: .82rem; line-height: 1.45; }
.bundle-feedback { max-width: 28rem; text-align: right; }
.bundle-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.bundle-section-heading h2 { margin: 0; color: #f8fafc; font-size: 1.45rem; }
.bundle-section-note { margin: 0; color: #64748b; font-size: .78rem; }
.bundle-manifest-list { display: grid; gap: .8rem; }
.bundle-manifest-card { padding: 1.15rem; border: 1px solid rgba(148,163,184,.15); border-radius: 12px; background: linear-gradient(145deg, rgba(17,24,39,.92), rgba(15,23,42,.72)); }
.bundle-manifest-card-ready { border-color: rgba(52,211,153,.35); }
.bundle-card-heading, .bundle-readiness-header, .bundle-card-actions { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.bundle-card-identity { min-width: 0; }
.bundle-card-identity h3 { margin: 0 0 .28rem; color: #f1f5f9; font-size: 1rem; }
.bundle-readiness { margin: 1rem 0 .8rem; }
.bundle-readiness-header { align-items: baseline; margin-bottom: .45rem; }
.bundle-readiness-header strong { color: #e2e8f0; font-size: .84rem; }
.bundle-readiness-header span { color: #94a3b8; font-size: .76rem; }
.bundle-progress-track { height: .36rem; overflow: hidden; border-radius: 999px; background: rgba(148,163,184,.13); }
.bundle-progress-value { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #818cf8); }
.bundle-manifest-card-ready .bundle-progress-value { background: linear-gradient(90deg, #34d399, #2dd4bf); }
.bundle-card-note { display: flex; gap: .45rem; margin: .65rem 0 .9rem; color: #fcd34d; font-size: .76rem; line-height: 1.4; }
.bundle-card-note strong { color: #fde68a; white-space: nowrap; }
.bundle-card-actions { justify-content: flex-start; flex-wrap: wrap; }
.bundle-card-actions button { font: inherit; }
.bundle-loading, .bundle-empty-state { padding: 1.4rem; border: 1px dashed rgba(148,163,184,.2); border-radius: 10px; color: #94a3b8; }
.bundle-empty-state strong { display: block; margin-bottom: .35rem; color: #e2e8f0; }
.bundle-empty-state p { margin: 0; font-size: .82rem; line-height: 1.5; }
.bundle-error { margin: 1.2rem 0 0; color: #fca5a5; font-size: .82rem; }
.bundle-access-editor { margin: 0 0 2rem; padding: 1.2rem 1.35rem; border: 1px solid rgba(129,140,248,.28); border-radius: 12px; background: linear-gradient(145deg, rgba(129,140,248,.08), rgba(17,24,39,.72)); }
.bundle-access-editor .bundle-section-heading { margin-bottom: .35rem; }
.bundle-access-editor h2 { margin: 0; color: #f8fafc; font-size: 1.15rem; }
.bundle-access-help { margin: 0 0 1rem; color: #94a3b8; font-size: .8rem; line-height: 1.45; }
.bundle-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.bundle-access-role { min-width: 0; padding: .8rem; border: 1px solid rgba(148,163,184,.14); border-radius: 9px; }
.bundle-access-role legend { padding: 0 .35rem; color: #e2e8f0; font-size: .82rem; font-weight: 800; }
.bundle-wallet-picker { display: grid; gap: .4rem; }
.bundle-wallet-option { display: flex; align-items: flex-start; gap: .5rem; padding: .48rem .55rem; border: 1px solid rgba(148,163,184,.13); border-radius: 6px; color: #94a3b8; font-size: .71rem; line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; }
.bundle-wallet-option:has(input:checked) { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); color: #d1fae5; }
.bundle-wallet-option:has(input:disabled) { cursor: default; opacity: .78; }
.bundle-wallet-option input { flex: 0 0 auto; margin-top: .14rem; accent-color: #34d399; }
.bundle-wallet-loading { color: #64748b; font-size: .74rem; }
.bundle-access-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.bundle-access-footer p { margin: 0; color: #a7f3d0; font-size: .78rem; }
@media (max-width: 680px) { .bundle-hero, .bundle-finalization { align-items: stretch; flex-direction: column; } .bundle-primary-action { width: 100%; box-sizing: border-box; } .bundle-overview { grid-template-columns: 1fr; } .bundle-section-heading { align-items: flex-start; flex-direction: column; } .bundle-feedback { text-align: left; } }
@media (max-width: 680px) { .bundle-access-grid { grid-template-columns: 1fr; } .bundle-access-footer { align-items: stretch; flex-direction: column; } }
.login-page {
width: min(980px, 100%);
margin: 0 auto;
padding-top: .5rem;
}
.login-page .page-breadcrumb {
margin: 0 0 1.15rem;
}
.login-page .page-breadcrumb a {
color: var(--text-muted);
font-size: .82rem;
font-weight: 700;
text-decoration: none;
}
.login-page .page-breadcrumb a:hover,
.login-page .page-breadcrumb a:focus-visible {
color: var(--accent);
}
.login-card {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 58%);
width: 100%;
min-height: 520px;
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: 22px;
background: var(--card-bg);
box-shadow: 0 28px 70px rgba(0, 0, 0, .38), 0 0 0 1px rgba(56, 189, 248, .03);
}
.login-visual {
position: relative;
display: flex;
min-width: 0;
overflow: hidden;
isolation: isolate;
background: linear-gradient(145deg, #0b1e37 0%, #101a39 52%, #191334 100%);
}
.visual-brand {
position: absolute;
top: 1.8rem;
left: 2rem;
z-index: 1;
color: #e0f2fe;
font-size: .9rem;
font-weight: 800;
letter-spacing: .02em;
}
.login-visual::before,
.login-visual::after {
position: absolute;
content: "";
pointer-events: none;
}
.login-visual::before {
inset: 0;
z-index: -2;
background: repeating-linear-gradient(132deg, transparent 0 46px, rgba(125, 211, 252, .045) 47px, transparent 48px 96px);
opacity: .8;
}
.login-visual::after {
right: -7rem;
bottom: -8rem;
z-index: -1;
width: 23rem;
height: 23rem;
border: 1px solid rgba(167, 139, 250, .3);
border-radius: 50%;
box-shadow: 0 0 0 24px rgba(167, 139, 250, .04), 0 0 0 48px rgba(167, 139, 250, .035), 0 0 0 72px rgba(167, 139, 250, .025);
}
.login-visual-art {
position: absolute;
inset: 4.5rem 1.8rem 1.8rem;
opacity: .88;
}
.manga-panel {
position: absolute;
display: block;
border: 1px solid rgba(125, 211, 252, .28);
background: linear-gradient(140deg, rgba(56, 189, 248, .15), rgba(129, 140, 248, .02));
box-shadow: inset 0 0 28px rgba(56, 189, 248, .05);
transform: skewY(-10deg) rotate(-7deg);
}
.manga-panel-one {
top: 8%;
left: 7%;
width: 66%;
height: 42%;
}
.manga-panel-two {
top: 34%;
right: 2%;
width: 60%;
height: 36%;
border-color: rgba(196, 181, 253, .3);
transform: skewY(13deg) rotate(8deg);
}
.manga-panel-three {
bottom: 4%;
left: 15%;
width: 46%;
height: 30%;
transform: skewY(-5deg) rotate(3deg);
}
.manga-panel::after {
position: absolute;
inset: 12% 16%;
border: 1px solid rgba(255, 255, 255, .12);
content: "";
transform: rotate(17deg);
}
.manga-spark {
position: absolute;
display: block;
width: 5rem;
height: 5rem;
border: 1px solid rgba(253, 230, 138, .6);
transform: rotate(45deg);
}
.manga-spark-one { top: 20%; right: 15%; }
.manga-spark-two { bottom: 17%; left: 4%; width: 2.5rem; height: 2.5rem; border-color: rgba(125, 211, 252, .42); }
.login-panel {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 2.4rem clamp(2rem, 5vw, 4.4rem);
background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(11, 15, 25, .98));
}
.login-panel-heading { width: min(100%, 400px); margin: 0 auto 1.35rem; }
.login-panel h1 { margin: 1.8rem 0 .55rem; color: var(--text-main); font-size: clamp(1.75rem, 3vw, 2.2rem); line-height: 1.12; }
.login-lead, .auth-view-copy { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
.login-loading { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 12rem; color: var(--text-muted); font-size: .9rem; }
.login-spinner { width: 1rem; height: 1rem; border: 2px solid rgba(148, 163, 184, .3); border-top-color: var(--accent); border-radius: 50%; animation: login-spin .8s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.auth-view { width: min(100%, 400px); margin: 0 auto; }
.google-login-button { width: 100%; min-height: 44px; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0 1.5rem; color: var(--text-muted); font-size: .7rem; letter-spacing: .04em; white-space: nowrap; }
.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; background: var(--border-color); content: ""; }
.login-form { display: flex; flex-direction: column; gap: .58rem; }
.login-form label { margin-top: .35rem; color: #dbeafe; font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.login-form label.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.login-form input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 .9rem; border: 1px solid rgba(148, 163, 184, .25); border-radius: 10px; outline: none; background: rgba(3, 7, 18, .72); color: var(--text-main); font: inherit; font-size: .92rem; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.login-form input::placeholder { color: #708096; }
.login-form input:hover { border-color: rgba(148, 163, 184, .42); }
.login-form input:focus { border-color: var(--accent); background: rgba(3, 7, 18, .9); box-shadow: 0 0 0 3px rgba(56, 189, 248, .13); }
.login-form button { min-height: 48px; margin-top: .85rem; padding: 0 1rem; border: 1px solid rgba(56, 189, 248, .5); border-radius: 10px; background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #f8fafc; font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px rgba(14, 165, 233, .16); transition: filter .15s ease, transform .15s ease, opacity .15s ease; }
.login-form button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.login-form button:focus-visible, .link-button:focus-visible, .secondary-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.login-form button:disabled { cursor: wait; opacity: .55; transform: none; }
.login-form button.secondary-action { margin-top: .25rem; border-color: var(--border-color); background: transparent; color: var(--text-muted); box-shadow: none; }
.login-form button.secondary-action:hover { background: rgba(148, 163, 184, .08); color: var(--text-main); filter: none; }
.auth-switch { margin: 1.65rem 0 0; color: var(--text-muted); font-size: .84rem; text-align: center; }
.auth-switch-top { margin: 0; text-align: right; }
.link-button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }
.link-button:hover { color: #bae6fd; text-decoration: underline; }
.login-status { min-height: 1.5rem; margin: 1.2rem auto 0; color: #fca5a5; font-size: .83rem; line-height: 1.45; text-align: center; }
@media (max-width: 900px) {
.login-card { grid-template-columns: minmax(0, 40%) minmax(0, 60%); }
.login-panel { padding: 2.75rem 2rem; }
}
@media (max-width: 760px) {
.login-page { padding-top: 0; }
.login-card { display: block; min-height: 0; border-radius: 16px; }
.login-visual { min-height: 92px; }
.visual-brand { top: 1.35rem; left: 1.35rem; }
.login-visual-art { inset: .7rem 1rem .7rem 42%; }
.login-panel { padding: 2.25rem 1.35rem 2rem; }
.login-panel-heading { margin-bottom: 1.6rem; }
}
@media (max-width: 360px) {
.login-panel { padding-inline: 1rem; }
.visual-brand { left: 1rem; }
}
.section-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.section-heading h2 { margin: 0; }
.section-kicker,
.bundle-form-kicker {
margin: 0 0 .3rem;
color: var(--accent);
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.section-badge,
.bundle-status-badge,
.bundle-role-count {
display: inline-flex;
align-items: center;
min-height: 1.6rem;
padding: 0 .55rem;
border: 1px solid rgba(56,189,248,.22);
border-radius: 999px;
background: rgba(56,189,248,.08);
color: #7dd3fc;
font-size: .62rem;
font-weight: 800;
letter-spacing: .06em;
white-space: nowrap;
}
.bundle-create-details {
margin: 0 0 1.25rem;
border: 1px solid rgba(56,189,248,.18);
border-radius: 12px;
background: rgba(15,23,42,.48);
overflow: hidden;
}
.bundle-create-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .95rem 1.05rem;
cursor: pointer;
list-style: none;
}
.bundle-create-summary::-webkit-details-marker { display: none; }
.bundle-create-summary::after { content: "\203A"; color: var(--text-muted); font-size: 1.45rem; line-height: 1; transition: transform .15s ease, color .15s ease; }
.bundle-create-details[open] .bundle-create-summary::after { transform: rotate(90deg); color: var(--accent); }
.bundle-create-summary:hover { background: rgba(56,189,248,.06); }
.bundle-create-summary:focus-visible { outline: 2px solid rgba(56,189,248,.45); outline-offset: -2px; }
.bundle-create-summary-copy { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.bundle-create-summary-title { color: var(--text-main); font-size: .98rem; font-weight: 800; }
.bundle-create-summary-description { color: var(--text-muted); font-size: .78rem; }
.bundle-create-summary-action { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.bundle-create-summary-action span { font-size: 1.1rem; line-height: 1; }
.bundle-create-form {
margin: 0;
border-top: 1px solid rgba(148,163,184,.14);
padding: 1.35rem;
border-radius: 0;
background:
radial-gradient(circle at 100% 0, rgba(56,189,248,.1), transparent 22rem),
linear-gradient(145deg, rgba(15,23,42,.98), rgba(11,18,32,.94));
box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.release-bundle-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1.25rem;
align-items: center;
margin-bottom: .7rem;
padding: 1rem 1.1rem;
border: 1px solid rgba(148,163,184,.16);
border-radius: 11px;
background: linear-gradient(135deg, rgba(15,23,42,.8), rgba(3,7,18,.42));
transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.release-bundle-card:hover { border-color: rgba(56,189,248,.35); background: linear-gradient(135deg, rgba(15,35,55,.86), rgba(3,7,18,.5)); transform: translateY(-1px); }
.release-bundle-card-main { min-width: 0; }
.release-bundle-card-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .7rem; }
.release-bundle-card-heading h3 { margin: 0; color: var(--text-main); font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; }
.release-bundle-status { display: inline-flex; align-items: center; min-height: 1.35rem; padding: 0 .48rem; border: 1px solid rgba(148,163,184,.2); border-radius: 999px; background: rgba(148,163,184,.08); color: var(--text-muted); font-size: .59rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.release-bundle-status-finalized { border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.1); color: #6ee7b7; }
.release-bundle-status-assembling,
.release-bundle-status-finalizing { border-color: rgba(56,189,248,.28); background: rgba(56,189,248,.1); color: #7dd3fc; }
.release-bundle-description { margin: .35rem 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; }
.release-bundle-meta { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin: .65rem 0 0; color: var(--text-muted); font-size: .68rem; }
.release-bundle-meta dt { color: #64748b; font-weight: 700; }
.release-bundle-meta dd { margin: 0; color: #cbd5e1; }
.release-bundle-meta code { color: #93c5fd; font: inherit; overflow-wrap: anywhere; }
.release-bundle-card-actions { flex: 0 0 auto; }
.release-bundle-action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.15rem; padding: 0 .78rem; border: 1px solid rgba(56,189,248,.28); border-radius: 7px; background: rgba(56,189,248,.1); color: #7dd3fc; font-size: .74rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.release-bundle-action:hover, .release-bundle-action:focus-visible { border-color: rgba(56,189,248,.62); background: rgba(56,189,248,.18); color: #e0f2fe; outline: none; }
.release-notes > .release-bundle-card:last-child { margin-bottom: 0; }
.bundle-form-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1.15rem;
border-bottom: 1px solid rgba(148,163,184,.14);
}
.bundle-form-heading h3 { margin: 0 0 .35rem; font-size: 1.25rem; color: var(--text-main); }
.bundle-form-heading p:last-child { margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.5; }
.bundle-status-badge { border-color: rgba(52,211,153,.24); background: rgba(52,211,153,.08); color: #6ee7b7; }
.bundle-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(10rem, .34fr);
gap: 1rem;
padding: 1.2rem 0;
}
.bundle-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.bundle-field-wide { grid-column: 1 / -1; }
.bundle-field > span { color: #dbeafe; font-size: .78rem; font-weight: 750; }
.bundle-field em { margin-left: .35rem; color: var(--text-muted); font-size: .67rem; font-style: normal; font-weight: 500; }
.bundle-field input,
.bundle-field textarea {
width: 100%;
box-sizing: border-box;
padding: .72rem .8rem;
border: 1px solid rgba(148,163,184,.2);
border-radius: 8px;
outline: 0;
background: rgba(3,7,18,.52);
color: var(--text-main);
font: inherit;
font-size: .88rem;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bundle-field textarea { resize: vertical; min-height: 5rem; line-height: 1.45; }
.bundle-field input::placeholder,
.bundle-field textarea::placeholder { color: #64748b; }
.bundle-field input:focus,
.bundle-field textarea:focus { border-color: rgba(56,189,248,.7); background: rgba(3,7,18,.72); box-shadow: 0 0 0 3px rgba(56,189,248,.1); }
.bundle-access { margin: 0; padding: 1rem; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; }
.bundle-access legend { padding: 0 .45rem; color: var(--text-main); font-size: .9rem; font-weight: 800; }
.bundle-field-hint { margin: -.15rem 0 1rem; color: var(--text-muted); font-size: .78rem; line-height: 1.45; }
.bundle-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.bundle-role { min-width: 0; padding: .85rem; border: 1px solid rgba(148,163,184,.13); border-radius: 9px; background: rgba(3,7,18,.26); }
.bundle-role-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.bundle-role-heading strong { display: block; color: var(--text-main); font-size: .85rem; }
.bundle-role-heading span:not(.bundle-role-count) { display: block; margin-top: .2rem; color: var(--text-muted); font-size: .72rem; }
.bundle-role-count { min-height: 1.25rem; padding: 0 .4rem; color: var(--text-muted); border-color: rgba(148,163,184,.16); background: rgba(148,163,184,.06); font-size: .56rem; }
.wallet-picker { display: grid; gap: .45rem; }
.wallet-picker-loading,
.wallet-picker-empty { color: var(--text-muted); font-size: .75rem; }
.wallet-checkbox-label { display: flex; align-items: flex-start; gap: .55rem; padding: .58rem .62rem; border: 1px solid rgba(148,163,184,.13); border-radius: 7px; background: rgba(15,23,42,.52); color: var(--text-muted); font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.wallet-checkbox-label:hover { border-color: rgba(56,189,248,.35); color: var(--text-main); background: rgba(56,189,248,.07); }
.wallet-checkbox-label.is-selected { border-color: rgba(52,211,153,.46); background: rgba(52,211,153,.1); color: #d1fae5; }
.wallet-checkbox-label input { flex: 0 0 auto; margin: .12rem 0 0; accent-color: #34d399; }
.bundle-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.bundle-form-footer [data-bundle-create-status] { min-height: 1.4rem; margin: 0; color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
.bundle-submit { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.65rem; padding: 0 .9rem; border: 1px solid rgba(56,189,248,.38); border-radius: 8px; background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(14,165,233,.12)); color: #dff7ff; font-size: .82rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.bundle-submit:hover,
.bundle-submit:focus-visible { border-color: rgba(56,189,248,.7); background: linear-gradient(180deg, rgba(56,189,248,.32), rgba(14,165,233,.2)); outline: none; }
.bundle-submit span { color: var(--accent); font-size: 1.05rem; line-height: 1; }
@media (max-width: 700px) {
.bundle-form-grid,
.bundle-role-grid { grid-template-columns: 1fr; }
.bundle-field-wide { grid-column: auto; }
}
@media (max-width: 520px) {
.bundle-create-summary { align-items: flex-start; }
.bundle-create-summary-action { display: none; }
.bundle-create-form { padding: 1rem; }
.bundle-form-heading,
.bundle-form-footer { flex-direction: column; align-items: stretch; }
.bundle-submit { justify-content: center; }
.section-badge { display: none; }
}
@media (max-width: 620px) {
.release-bundle-card { grid-template-columns: 1fr; gap: .8rem; }
.release-bundle-action { width: 100%; box-sizing: border-box; }
}
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
.pswp {
--pswp-bg: #000;
--pswp-placeholder-bg: #222;
--pswp-root-z-index: 100000;
--pswp-preloader-color: rgba(79, 79, 79, 0.4);
--pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
/* defined via js:
--pswp-transition-duration: 333ms; */
--pswp-icon-color: #fff;
--pswp-icon-color-secondary: #4f4f4f;
--pswp-icon-stroke-color: #4f4f4f;
--pswp-icon-stroke-width: 2px;
--pswp-error-text-color: var(--pswp-icon-color);
}
/*
Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/
.pswp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--pswp-root-z-index);
display: none;
touch-action: none;
outline: 0;
opacity: 0.003;
contain: layout style size;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Prevents focus outline on the root element,
(it may be focused initially) */
.pswp:focus {
outline: 0;
}
.pswp * {
box-sizing: border-box;
}
.pswp img {
max-width: none;
}
.pswp--open {
display: block;
}
.pswp,
.pswp__bg {
transform: translateZ(0);
will-change: opacity;
}
.pswp__bg {
opacity: 0.005;
background: var(--pswp-bg);
}
.pswp,
.pswp__scroll-wrap {
overflow: hidden;
}
.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pswp__img,
.pswp__zoom-wrap {
width: auto;
height: auto;
}
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pswp__item {
/* z-index for fade transition */
z-index: 1;
overflow: hidden;
}
.pswp__hidden {
display: none !important;
}
/* Allow to click through pswp__content element, but not its children */
.pswp__content {
pointer-events: none;
}
.pswp__content > * {
pointer-events: auto;
}
/*
PhotoSwipe UI
*/
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
display: grid;
}
.pswp__error-msg {
margin: auto;
font-size: 1em;
line-height: 1;
color: var(--pswp-error-text-color);
}
/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
*/
.pswp .pswp__hide-on-close {
opacity: 0.005;
will-change: opacity;
transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
z-index: 10; /* always overlap slide content */
pointer-events: none; /* hidden elements should not be clickable */
}
/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
opacity: 1;
pointer-events: auto;
}
/*