:root {
  color-scheme: dark light;
  --md-primary: 255 103 64;
  --md-primary-10: 230 97 62;
  --md-primary-20: 188 85 59;
  --md-status-red: 255 64 64;
  --md-status-green: 4 208 0;
  --md-status-yellow: 218 117 0;
  --md-status-blue: 0 201 245;
  --md-status-grey: 196 196 196;
  --md-status-purple: 125 64 255;
  --md-danger: 255 64 64;
  --md-danger-10: 219 49 49;

  --md-background: 25 26 28;
  --md-accent: 44 44 44;
  --md-accent-hover: 57 57 57;
  --md-accent-active: 29 29 29;
  --md-accent-10: 61 61 61;
  --md-accent-10-hover: 73 73 73;
  --md-accent-20: 79 79 79;
  --md-accent-20-hover: 104 104 104;
  --md-accent-30: 88 88 88;
  --md-accent-50: 102 102 102;
  --md-text: 255 255 255;
  --md-muted: 168 168 168;
  --md-button-accent: var(--md-accent-20);

  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --banner-height: 18rem;
}
@media (prefers-color-scheme: light) {
  :root {
    --md-background: 255 255 255;
    --md-accent: 240 241 242;
    --md-accent-hover: 218 220 223;
    --md-accent-active: 201 203 206;
    --md-accent-10: 232 234 235;
    --md-accent-10-hover: 216 219 220;
    --md-accent-20: 224 228 230;
    --md-accent-20-hover: 205 209 210;
    --md-accent-30: 217 221 223;
    --md-accent-50: 201 207 209;
    --md-text: 0 0 0;
    --md-muted: 90 90 90;
    --md-button-accent: var(--md-accent);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: rgb(var(--md-background));
  color: rgb(var(--md-text));
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}
a { color: rgb(var(--md-primary)); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h3 { font-size: 1.15rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: .25rem 0; }
code { font-family: var(--mono); font-size: .9em; background: rgb(var(--md-accent)); padding: .05em .4em; border-radius: .25rem; }
.muted { color: rgb(var(--md-muted)); }
.small { font-size: .85rem; }
.center { text-align: center; }
svg { display: inline-block; }

.main { position: relative; min-height: 100vh; }
.cover-banner {
  position: absolute; top: 0; left: 0; right: 0; height: var(--banner-height); z-index: 0;
  background-position: 50% 25%; background-size: cover; background-repeat: no-repeat; overflow: hidden; background-color: rgb(var(--md-accent));
}
.cover-banner::after {
  content: ""; position: absolute; inset: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background: linear-gradient(67.81deg, rgba(0,0,0,.64) 35.51%, rgba(0,0,0,0) 100%);
}
.cover-banner::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 1;
  background: linear-gradient(to bottom, rgb(var(--md-background) / 0), rgb(var(--md-background)));
}
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; padding: .75rem 2rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: rgb(var(--md-text)); font-weight: 700; font-size: 1.35rem; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 40px; height: 34px; flex: none; }
.brand-sub { color: rgb(var(--md-primary)); font-weight: 600; }
.nav-search {
  display: flex; align-items: center; width: min(100%, 460px); height: 40px;
  background: rgb(var(--md-accent)); border-radius: 9999px; padding-left: 1rem; border: 1px solid transparent; transition: border-color .15s ease-out;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.nav-search:focus-within { border-color: rgb(var(--md-primary)); }
.nav-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: inherit; font: inherit; font-size: .95rem; outline: 0; }
.nav-search input::placeholder { color: rgb(var(--md-muted)); }
.search-go { width: 40px; height: 38px; border: 0; background: transparent; color: rgb(var(--md-text)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; }
.search-go svg { width: 20px; height: 20px; }
.search-go:disabled { opacity: .5; }

.content { position: relative; z-index: 1; padding: 0 2rem 2rem; max-width: 1240px; margin: 0 auto; }
.badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .3em .7em; border-radius: 9999px; background: rgb(var(--md-accent)); color: rgb(var(--md-muted)); white-space: nowrap;
}
.badge.ok { color: rgb(var(--md-status-green)); }
.badge.bad { color: rgb(var(--md-status-red)); }

.md-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 500; cursor: pointer; border: 0; border-radius: .25rem;
  padding: .55rem 1rem; color: rgb(var(--md-text)); background: rgb(var(--md-button-accent));
  transition: filter .1s ease-out, background-color .1s ease-out; white-space: nowrap; text-decoration: none;
}
.md-btn:hover { filter: brightness(1.15); text-decoration: none; }
.md-btn:active { filter: brightness(.9); }
.md-btn:disabled { opacity: .6; cursor: not-allowed; filter: none; }
.md-btn.primary { background: rgb(var(--md-primary)); color: #fff; }
.md-btn.primary:hover { background: rgb(var(--md-primary-10)); filter: none; }
.md-btn.danger { background: rgb(var(--md-danger)); color: #fff; }
.md-btn.danger:hover { background: rgb(var(--md-danger-10)); filter: none; }
.md-btn.small { padding: .4rem .8rem; font-size: .85rem; }
.md-btn.big { height: 48px; padding: 0 2.25rem; font-size: 1rem; }
.md-btn.icon { width: 48px; height: 48px; padding: 0; background: rgb(var(--md-accent-20)); }
.md-btn svg { width: 1.3em; height: 1.3em; }
.md-btn.icon svg { width: 24px; height: 24px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.md-input, .md-select select {
  font: inherit; color: rgb(var(--md-text)); background: rgb(var(--md-accent));
  border: 1px solid transparent; border-radius: .25rem; padding: .55rem .75rem; min-width: 0; outline: 0; width: 100%;
  transition: border-color .15s ease-out;
}
.md-input:focus, .md-select select:focus { border-color: rgb(var(--md-primary)); }
.md-select { display: flex; }
.md-select select { cursor: pointer; }
.check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.check input { margin: 0; width: 1rem; height: 1rem; accent-color: rgb(var(--md-primary)); flex: none; }
.small-check { font-size: .9rem; margin-top: .5rem; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: .25rem; min-height: 1.35rem;
  padding: .1rem .45rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  background: rgb(var(--md-accent)); color: rgb(var(--md-text));
}
.tag.plain { background: transparent; padding-left: 0; }
.tag .dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgb(var(--md-status-grey)); }
.tag .dot.green { background: rgb(var(--md-status-green)); }
.tag .dot.blue { background: rgb(var(--md-status-blue)); }
.tag .dot.yellow { background: rgb(var(--md-status-yellow)); }
.tag .dot.red { background: rgb(var(--md-status-red)); }
.tag.purple { background: rgb(var(--md-status-purple)); color: #fff; }
.tag.rating-suggestive { background: rgb(var(--md-status-yellow)); color: #fff; }
.tag.rating-erotica, .tag.rating-pornographic { background: rgb(var(--md-status-red)); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: rgb(var(--md-accent)); border-radius: .25rem; padding: .25rem .6rem; font-size: .85rem; }

.alert { margin: .75rem 0 0; padding: .75rem 1rem; border-radius: .25rem; background: rgb(var(--md-accent)); border-left: 4px solid rgb(var(--md-status-yellow)); }
.alert.error { border-left-color: rgb(var(--md-status-red)); }
.search-opts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-size: .9rem; padding-top: .5rem; }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; margin-top: .75rem; }
.result {
  display: flex; gap: .75rem; padding: .5rem; border: 0; border-radius: .25rem; font: inherit;
  background: rgb(var(--md-accent)); color: rgb(var(--md-text)); cursor: pointer; text-align: left; align-items: flex-start;
  transition: background-color .1s ease-out;
}
.result:hover { background: rgb(var(--md-accent-hover)); }
.result img { width: 64px; height: 91px; object-fit: cover; border-radius: .25rem; background: rgb(var(--md-accent-10)); flex: none; }
.result .r-title { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.result .r-meta { font-size: .78rem; color: rgb(var(--md-muted)); margin-top: .3rem; }

.title-layout {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas: "art title" "art buttons" "art tags" "art stats"; gap: 1rem 1.5rem; align-items: start; padding-top: .5rem;
}
.cover { grid-area: art; width: 200px; border-radius: .25rem; box-shadow: 0 4px 12px rgba(0,0,0,.45); background: rgb(var(--md-accent)); }
.title-block { grid-area: title; min-width: 0; min-height: 13.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem; }
.manga-title { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.manga-authors { margin: 0; font-size: 1rem; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.title-buttons { grid-area: buttons; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.title-layout .tags { grid-area: tags; }
.stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .95rem; }
.stats span { display: inline-flex; align-items: center; gap: .3rem; }
.stats svg { width: 18px; height: 18px; }
.stats .hot { color: rgb(var(--md-primary)); }

.tabs { display: flex; gap: .25rem; margin: 2rem 0 1rem; padding: .25rem; border-radius: .25rem; background: rgb(var(--md-accent) / .55); width: max-content; max-width: 100%; }
.tab { padding: .45rem .75rem; border-radius: .25rem; font-weight: 700; color: rgb(var(--md-muted)); white-space: nowrap; }
.tab:hover { text-decoration: none; color: rgb(var(--md-text)); }
.tab.active { background: rgb(var(--md-accent-10)); color: rgb(var(--md-text)); }

.content-grid { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: .5rem; }
.info-col h4 { margin-top: .75rem; }
.info-col h4:first-child { margin-top: 0; }
.range { display: flex; gap: .5rem; }
.range input { flex: 1; }
.synopsis { margin-top: 1rem; color: rgb(var(--md-muted)); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.chapters-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

.chapter-list { display: flex; flex-direction: column; gap: 1rem; }
.volume-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 700; padding: 0 .25rem .4rem; cursor: pointer; user-select: none; }
.volume-head .check { font-weight: 700; }
.volume-head .vol-meta { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .85rem; color: rgb(var(--md-muted)); }
.volume-head .vol-meta svg { width: 18px; height: 18px; transition: transform .15s ease-out; }
.volume.collapsed .vol-meta svg { transform: rotate(180deg); }
.volume.collapsed .chapters { display: none; }
.chapters { background: rgb(var(--md-accent)); border-radius: .25rem; overflow: hidden; }
.chapter {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .15rem .75rem;
  padding: .45rem .75rem .45rem .6rem; font-size: .875rem; cursor: pointer; border-radius: 2px;
  transition: background-color .1s ease-out;
}
.chapter:not(:last-child) { border-bottom: 1px solid rgb(var(--md-accent-10)); }
.chapter:hover { background-color: rgb(var(--md-accent-hover)); }
.chapter.selected { background-image: linear-gradient(.25turn, rgb(var(--md-primary)) 0, rgb(var(--md-primary)) 3px, transparent 3px); }
.chapter.disabled { opacity: .5; cursor: not-allowed; }
.chapter > input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: rgb(var(--md-primary)); }
.ch-main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ch-title { display: flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 700; }
.ch-title .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-chip {
  flex: none; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgb(var(--md-status-red)); color: #fff; border-radius: .2rem; padding: .12rem .3rem; line-height: 1.2;
}
.ch-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; font-size: .8rem; color: rgb(var(--md-text)); min-width: 0; }
.ch-sub svg, .ch-right svg { width: 16px; height: 16px; flex: none; }
.group-tag { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .3rem; border-radius: .25rem; color: rgb(var(--md-text)); max-width: 100%; }
.group-tag .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter:hover .group-tag { background: rgb(var(--md-accent-20-hover)); }
.uploader { display: inline-flex; align-items: center; gap: .3rem; }
.ch-right { display: grid; grid-template-rows: auto auto; gap: .15rem; justify-items: end; font-size: .8rem; white-space: nowrap; }
.ch-right span { display: inline-flex; align-items: center; gap: .3rem; }
.tag.inline { min-height: 0; padding: .05rem .35rem; font-size: .58rem; }

.download-section { margin-top: 2.5rem; }
.download-section h3 { margin-bottom: .75rem; }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; background: rgb(var(--md-accent)); border-radius: .25rem; padding: 1rem; }
.opt { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.opt-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--md-muted)); }
.opt .md-select select, .opt .md-input { background: rgb(var(--md-accent-10)); }
.opt .check { font-size: .92rem; align-items: flex-start; }
.opt .check input { margin-top: .25rem; }
.opt .check .muted { font-size: .8rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }

.progress { margin-top: 1rem; }
.bar { height: .9rem; background: rgb(var(--md-accent)); border-radius: 9999px; overflow: hidden; margin-bottom: .4rem; }
.bar.thin { height: .45rem; }
.fill { height: 100%; width: 0; background: rgb(var(--md-primary)); transition: width .15s linear; }
.fill.alt { background: rgb(var(--md-status-blue)); }
.log {
  margin: .75rem 0 0; padding: .6rem .8rem; max-height: 240px; overflow: auto;
  background: rgb(var(--md-accent)); border-radius: .25rem;
  font-family: var(--mono); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.log .ok { color: rgb(var(--md-status-green)); }
.log .warn { color: rgb(var(--md-status-yellow)); }
.log .error { color: rgb(var(--md-status-red)); }

.notes { margin-top: 2.5rem; background: rgb(var(--md-accent)); border-radius: .25rem; padding: 1rem 1.25rem; }
.notes ul { margin: .6rem 0 .2rem; padding-left: 1.2rem; color: rgb(var(--md-muted)); font-size: .92rem; }
.notes li { margin: .35rem 0; }
.sticky-bar {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 15;
  display: flex; align-items: center; gap: 1rem; padding: .5rem .6rem .5rem 1rem;
  background: rgb(var(--md-accent)); border: 1px solid rgb(var(--md-accent-20)); border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); font-weight: 500; white-space: nowrap;
}
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; padding: 1.5rem 0 .5rem; text-align: center; }

@media (max-width: 1024px) {
  .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .content { padding: 0 1rem 2rem; }
  .topbar { padding: .6rem 1rem; }
  .brand { font-size: 1.15rem; }
  .nav-search { width: 100%; }
  .title-layout { grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: "art title" "buttons buttons" "tags tags" "stats stats"; }
  .cover { width: 110px; }
  .title-block { min-height: 8rem; }
  .manga-title { font-size: 1.4rem; }
  :root { --banner-height: 13rem; }
  .chapter { grid-template-columns: auto minmax(0, 1fr); }
  .ch-right { grid-column: 2; grid-template-rows: auto; grid-auto-flow: column; gap: .75rem; justify-items: start; }
  .sticky-bar { left: 1rem; right: 1rem; transform: none; justify-content: space-between; }
}