/* Ocean refresh (2026-10-26): same identity, readable type, calmer cards and a cover-led series header.
   Loaded last; earlier layers stay untouched so the previous look can be restored by dropping this file. */
:root{--pill:999px;--status-ongoing:#86f0c6;--status-finished:#a9d1ff;--status-hiatus:#ffd98a;--score:#f2c96c}
html[data-theme="light"]{--status-ongoing:#0b7a55;--status-finished:#2563b0;--status-hiatus:#9a6a06;--score:#b07a16}

/* Bottom navigation: real touch targets and legible labels. */
.app-nav{width:min(calc(100% - 48px),360px)}
.app-nav button{gap:1px;font-size:10.5px;line-height:1.15;transition:color .18s,background .18s}
.app-nav button[aria-current="page"]{font-weight:600}

/* Home hero */
.feature-tags{flex-wrap:wrap;gap:6px}
.feature-tags span,.feature-tags span+span{padding:2px 9px;border:1px solid #c8eefa26;border-radius:var(--pill);background:#06182a66;backdrop-filter:blur(6px)}
.feature-status{color:var(--status-ongoing)}.feature-status.finished{color:#a9d1ff}.feature-status.hiatus{color:#ffd98a}
.feature-tags .feature-status{color:#86f0c6}.feature-tags .feature-status.finished{color:#a9d1ff}.feature-tags .feature-status.hiatus{color:#ffd98a}
.feature-copy .primary{font-weight:600}

/* Search shortcut */
.home-search{text-align:start;min-height:48px;font-size:13px;border-radius:14px;transition:border-color .18s}
.home-search:hover{border-color:#76d4ec55}

/* Genre shortcuts become one row of pills instead of tall tiles. */
.genre-shortcuts{gap:8px;padding:2px 1px 6px;margin-bottom:6px}
.genre-shortcuts button{flex:0 0 auto;flex-direction:row;min-width:0;min-height:42px;padding:5px 7px 5px 14px;gap:8px;border-radius:var(--pill);background:var(--surface)}
.genre-shortcuts .genre-symbol{width:30px;height:30px;border-radius:50%}
.genre-shortcuts .genre-symbol svg{width:16px;height:16px}
.genre-shortcuts strong{font-size:12.5px;font-weight:600;white-space:nowrap}
.genre-shortcuts small{font-size:11px;white-space:nowrap}
.genre-shortcuts small::before{content:"· "}

/* Shelf headings */
.shelf-heading h2{font-size:16px}
.shelf-actions>button{font-size:12px;gap:3px}
.shelf-actions>button svg,.shelf-actions>button>svg{display:block;width:14px;height:14px}
.rail-controls{display:none}
.cover-rail,.resume-rail{scrollbar-width:none;padding-bottom:4px}
.cover-rail::-webkit-scrollbar,.resume-rail::-webkit-scrollbar{display:none}

/* Work cards: full-bleed cover, two-line title, type + score footer. */
.catalog-card,.home-view .catalog-card,.catalog-grid .catalog-card{padding:0;border-radius:14px;overflow:hidden}
.catalog-card .work-card-open{border-radius:0;height:100%}
.catalog-card .cover-frame,.catalog-grid .catalog-card .cover-frame{border-radius:0;box-shadow:none;border:0}
.catalog-card h3,.home-view .catalog-card h3,.catalog-grid .catalog-card h3{font-size:13px;line-height:1.5;font-weight:500;margin:10px 10px 6px;min-height:3em;-webkit-line-clamp:2}
.catalog-card .work-meta,.home-view .catalog-card .work-meta,.catalog-grid .catalog-card .work-meta{margin:auto 10px 0;padding:0 0 10px;min-height:0;border-top:0;font-size:11px;color:var(--muted);gap:6px}
.catalog-card .work-meta>span:last-child{font-size:inherit;color:inherit}
.catalog-card .work-meta>.card-score:last-child,.card-score{display:inline-flex;align-items:center;gap:3px;color:var(--score);font-weight:600;direction:ltr;font-family:'Poseidon Roboto',Vazirmatn,sans-serif}
.card-score span{font-size:12px;line-height:1}
.cover-count,.catalog-grid .cover-count{top:6px;left:6px;font-size:9.5px;padding:0 6px;border-radius:var(--pill);line-height:1.7}
.cover-status,.catalog-grid .cover-status{inset:auto 6px 6px auto;font-size:9px;padding:0 6px;border-radius:var(--pill);line-height:1.75;box-shadow:none;text-shadow:none;backdrop-filter:blur(6px)}
.cover-status::before{width:4px;height:4px;margin-inline-end:4px;box-shadow:none}

/* Continue reading */
.resume-rail{grid-auto-columns:260px}
.resume-card{padding:10px;gap:11px;border-radius:14px}
.resume-card>img{width:44px;height:62px;border-radius:7px}
.resume-card strong{font-size:13px;line-height:1.5}
.resume-card .resume-details{justify-content:flex-start;gap:8px;font-size:11px}
.resume-details>span:first-child{color:var(--ink)}
.resume-details>span:nth-child(2){color:var(--sea);font-weight:600}
.resume-details time{display:inline;font-size:10.5px;opacity:.75;margin-inline-start:auto}
.mini-progress{height:3px}
.resume-arrow{width:30px;height:30px;border-radius:10px}
.resume-arrow svg{width:15px;height:15px}

/* Browse / library / updates headings */
.page-heading{margin:4px 0 18px}
.page-heading .heading-emblem{display:none}
.page-heading small{font-size:10px}
.page-heading h1{font-size:24px;margin-top:4px}
.explore-search.field{min-height:50px;border-radius:14px}
.filter-types{gap:4px;padding:4px;margin-bottom:12px;border:1px solid var(--hairline);border-radius:14px;background:var(--surface)}
.filter-types button{border:0;background:transparent;border-radius:10px;padding:8px 10px;font-size:13px;min-height:38px}
.filter-types button[aria-pressed="true"]{box-shadow:0 3px 12px #36c6e824}
.genre-filters{gap:7px;padding-bottom:16px}
.genre-filters button,.series-genres button{font-size:12px;padding:6px 13px;border-radius:var(--pill);min-height:34px;white-space:nowrap}
.genre-filters button[aria-pressed="true"]{font-weight:600}
.catalog-toolbar{font-size:12px;margin:14px 0}
.catalog-toolbar>span{color:var(--ink);font-weight:600}
.catalog-toolbar select{font-size:12px;padding:6px 10px;border-radius:9px;min-height:34px}
.catalog-toolbar>button{font-size:12px;color:var(--sea)}
.catalog-grid{gap:16px 12px}
.more-works{min-height:44px;padding-inline:26px;border-radius:12px;font-size:13px}
.personal-tabs button{font-size:13px;min-height:42px}
.history-list .resume-card{background:var(--surface)}
.shelf-empty h2{font-size:17px}.shelf-empty p{font-size:13px}

/* Profile */
.profile-stats strong{font-size:22px}
.profile-stats span{font-size:11px}
.profile-group h2{font-size:12px}
.profile-row>span:not(.row-icon){font-size:13.5px}
.profile-row small{font-size:11px}
.profile-row>small{font-size:12px}
.profile-hero>small{font-size:11px}
.profile-support strong{font-size:13px}.profile-support p{font-size:12px}
.profile-support a{border-radius:12px;min-height:46px;font-size:13px}

/* Favorite updates */
.page-caption{font-size:13px}
.update-row{padding:11px;gap:12px;border-radius:14px}
.update-row strong{font-size:13px}
.update-row small{font-size:11.5px}
.update-row time{font-size:10.5px}

/* Series page: cover beside the title over a tinted backdrop, facts strip, then actions. */
.series-overview{display:block;border-radius:20px}
.series-artwork{display:flex;align-items:flex-end;justify-items:normal;gap:22px;min-height:0;padding:22px 24px 16px}
.rating-empty{font-size:11.5px;color:var(--muted);direction:rtl}
.series-backdrop{opacity:.3;filter:blur(22px) saturate(1.1)}
.series-artwork::after{background:linear-gradient(0deg,var(--series-panel) 8%,transparent 85%)}
.series-cover{width:160px;flex-shrink:0;border-radius:12px}
.series-headline{position:relative;z-index:2;flex:1;min-width:0;padding-bottom:2px}
.series-headline h1{font:600 24px/1.4 'Poseidon Roboto',Vazirmatn,sans-serif;margin:0 0 8px;letter-spacing:0;text-align:start;overflow-wrap:anywhere;color:var(--ink)}
.series-headline .series-aliases{font-size:12px;margin-bottom:8px}
.series-headline .series-genres{margin:8px 0 0;gap:6px}
.series-headline .series-genres button{font-size:11.5px;min-height:28px;padding:2px 11px;background:#0a1a2a40;backdrop-filter:blur(6px);color:var(--ink);border-color:#9fdcf130}
html[data-theme="light"] .series-headline .series-genres button{background:#ffffffa8}
.series-headline .series-facts{display:grid;grid-template-columns:1fr;margin:12px 0 0;padding:2px 12px;border:1px solid var(--line);border-radius:12px;background:#11203299;backdrop-filter:blur(8px)}
html[data-theme="light"] .series-headline .series-facts{background:#ffffffc4}
.series-headline .series-facts>div{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;min-height:36px;padding:4px 0}
.series-headline .series-facts>div+div{border-inline-start:0;border-top:1px solid var(--line)}
.series-headline .series-facts dt{font-size:11.5px;line-height:1.4}
.series-headline .series-facts dd,.series-headline .series-facts>div:first-child dd{font-size:13px;line-height:1.4;text-align:end}
.series-facts>div{min-height:54px;padding:6px;gap:3px}
.series-facts dt{font-size:11px;line-height:1.3}
.series-facts dd,.series-facts>div:first-child dd{font-size:13.5px;line-height:1.4;font-weight:600}
.series-facts>div:first-child dd{color:var(--series-accent)}
.series-facts small{font-size:10.5px}
.series-facts .status-ongoing{color:var(--status-ongoing)}.series-facts .status-finished{color:var(--status-finished)}.series-facts .status-hiatus{color:var(--status-hiatus)}
.series-overview>.series-actions{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;margin:6px 24px 0}
.series-overview>.series-actions.resume-first{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 48px}
.series-overview>.series-actions:not(:has(button+button)){grid-template-columns:48px}
.series-actions button{min-height:48px;padding:6px 12px;border-radius:13px;font-size:13.5px;font-weight:600;gap:8px}
.series-actions span{font-size:11px;font-weight:400;opacity:.8}
.series-actions svg{width:18px;height:18px}
.series-actions .primary{background:linear-gradient(115deg,#a1ebf3,#62c9e6);color:#072233;box-shadow:0 6px 22px #35c3e624}
html[data-theme="light"] .series-actions .primary{background:linear-gradient(115deg,#1784ad,#0d6589);color:#fff}
.series-actions .secondary{background:var(--series-subtle);color:var(--ink)}
.series-actions .series-favorite{width:48px;height:48px;min-height:48px;margin:0;padding:0;border-radius:13px;background:var(--series-subtle);color:var(--series-muted)}
.series-actions .series-favorite svg{width:22px;height:22px}
.series-actions .series-favorite [data-favorite-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.series-actions .series-favorite[aria-pressed="true"]{color:#ff7d9c;border-color:#ff7d9c66;background:#ff7d9c14}
.series-copy{padding:18px 24px 20px;align-self:auto}
.series-synopsis h2{font-size:12px;margin-bottom:6px}
.series-synopsis p{font-size:14px;line-height:2}
.series-more{font-size:12px}
.series-rating{margin-top:14px;padding-top:12px}
.series-rating-head>span:first-child,.rate-work>span{font-size:12px}
.rate-stars button{width:34px;height:36px}
.rate-stars svg{width:23px;height:23px}
.clear-rating{font-size:11px}

/* Chapter list */
.series-chapters{margin-top:16px;border-radius:18px}
.series-chapters h2{font-size:16px}
.series-chapters .sort-button{font-size:12px;padding:7px 12px;border-radius:9px;min-height:34px}
.series-chapters .field{min-height:46px;border-radius:12px}
.series-chapter-list .chapter-tile{min-height:58px;padding:12px 18px;font-size:14px}
.chapter-row-label{font-size:14px;font-weight:500}
.chapter-row-label>span{display:flex;align-items:center;gap:8px}
.chapter-row-label small,.series-chapter-list small{font-size:11px}
.chapter-date{font-size:11px}
.chapter-new{font-style:normal;font-size:10.5px;font-weight:600;line-height:1.6;padding:0 8px;border-radius:var(--pill);background:#6fd6ee1f;color:var(--sea);border:1px solid #6fd6ee40}
.series-chapter-list .chapter-tile.read .chapter-row-label{color:var(--series-muted)}

/* Reader chrome */
.reader-header .icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.reader-heading strong{font-size:14px}
.reader-heading small{font-size:11px;opacity:.65}
.reader-actions span{font-size:11.5px}
.progress-row{font-size:11px}
.reader-tools label{font-size:12px}
.theme-picker button{font-size:12px;padding:5px 14px;border-radius:var(--pill)}
.resume-prompt{font-size:13px;border-radius:14px}
.resume-prompt button{padding:6px 12px;border-radius:9px}
.reader-end{display:flex;flex-direction:column;align-items:center;gap:4px}
.reader-end p{font-size:14px}
.reader-end .primary{min-height:48px;padding:0 30px;border-radius:14px;font-size:14px;font-weight:600;background:linear-gradient(115deg,#a1ebf3,#62c9e6);color:#072233}
.reader-end .secondary{min-height:42px;border-radius:12px;font-size:13px;margin-top:8px;background:transparent;color:inherit;border-color:#8996a244}
.drawer-chapters .chapter-tile{font-size:13px;min-height:46px}
.drawer-chapters .current{border-color:var(--sea);color:var(--sea)}
#toast{font-size:13px;border-radius:14px;padding:12px 22px}

@media(max-width:700px){
  /* Nav */
  .app-nav{width:min(calc(100% - 56px),330px);padding:4px;border-radius:18px}
  .app-nav button{min-height:44px;padding:3px 2px;font-size:10px;gap:1px;border-radius:14px}
  .app-nav svg{width:20px;height:20px;stroke-width:1.6}
  .app-nav button[aria-current="page"]{background:#72d8ee1a}
  html[data-theme="light"] .app-nav button[aria-current="page"]{background:#12789c14}
  .app-nav button[aria-current="page"]::before{display:none}
  #main,.home-view #main{padding-bottom:calc(100px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)))}

  /* Hero */
  .feature-slider{border-radius:20px;min-height:210px}
  #feature-content{min-height:210px;padding:18px 18px 34px;gap:16px}
  .feature-cover{width:100px;border-radius:10px}
  .feature-eyebrow{font-size:10.5px;margin-bottom:8px}
  .feature-copy h1{font-size:18px;line-height:1.4;margin-bottom:10px}
  .feature-tags{font-size:10.5px;gap:5px;margin-bottom:14px}
  .feature-tags span,.feature-tags span+span{padding:1px 8px}
  .feature-copy .primary{font-size:12.5px;min-height:38px;padding:6px 14px;gap:10px;border-radius:11px}
  .feature-copy .primary svg{width:16px;height:16px}
  .slider-controls{inset:auto 14px 6px}
  .branded-slide .feature-copy h1{font-size:19px}

  .home-search{min-height:48px;padding:12px 14px;margin:14px 0 12px;font-size:12.5px;gap:10px}
  .home-search svg{width:19px;height:19px}

  .genre-shortcuts{margin-bottom:2px}
  .genre-shortcuts button{min-width:0;min-height:42px;padding:5px 6px 5px 13px;gap:7px;border-radius:var(--pill)}
  .genre-shortcuts strong{font-size:12px}
  .genre-shortcuts small{font-size:10.5px}
  .genre-shortcuts .genre-symbol{width:30px;height:30px}

  .discovery-shelf{margin-top:24px}
  .shelf-heading{margin-bottom:12px}
  .shelf-heading h2{font-size:15px}
  .shelf-actions>button{font-size:11.5px}
  .shelf-actions>button>svg{display:block;width:13px;height:13px}
  .cover-rail{grid-auto-columns:calc((100% - 20px)/2.45);gap:10px;margin-inline:-14px;padding-inline:14px;scroll-padding-inline:14px}

  .catalog-card,.home-view .catalog-card,.catalog-grid .catalog-card{border-radius:13px;padding:0}
  .catalog-card h3,.home-view .catalog-card h3,.catalog-grid .catalog-card h3{font-size:12.5px;margin:9px 9px 5px}
  .catalog-card .work-meta,.home-view .catalog-card .work-meta,.catalog-grid .catalog-card .work-meta{font-size:10.5px;margin-inline:9px;padding-bottom:9px}
  .cover-count,.catalog-grid .cover-count{font-size:9px;padding:0 5px;top:5px;left:5px}
  .cover-status,.catalog-grid .cover-status{font-size:8.5px;padding:0 5px;right:5px;bottom:5px}
  .catalog-grid,.home-view .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
  .catalog-grid .catalog-card h3{font-size:12px;margin:8px 8px 4px}
  .catalog-grid .catalog-card .work-meta{font-size:10px;margin-inline:8px;padding-bottom:8px}
  .catalog-grid .cover-count,.catalog-grid .cover-status{font-size:8.5px;padding:0 5px}
  .catalog-grid .cover-status{right:5px;bottom:5px;max-width:calc(100% - 10px)}
  .catalog-grid .cover-count{left:5px;top:5px}

  .resume-rail{grid-auto-columns:min(236px,66%);gap:8px;margin-inline:-14px;padding-inline:14px}
  .resume-card{padding:8px;gap:8px}
  .resume-card>img{width:42px;height:59px}
  .resume-card strong{font-size:12.5px}
  .resume-card .resume-details{font-size:10.5px}
  .resume-details time{display:inline;font-size:10px}
  .resume-arrow{width:24px;height:24px;border-radius:8px}
  .resume-arrow svg{width:13px;height:13px}
  .resume-card .resume-details{gap:6px}

  /* Browse: filters stay on one scrollable row so results start above the fold. */
  .page-heading{margin:2px 2px 14px}
  .page-heading h1{font-size:22px}
  .page-heading small{font-size:9.5px}
  .heading-emblem{width:40px;height:40px}
  .explore-search.field{min-height:48px;padding:8px 10px 8px 12px}
  .explore-search input::placeholder{font-size:12.5px}
  .filter-types{margin-bottom:10px}
  .filter-types button{font-size:12.5px;padding:7px 5px;min-height:36px;border-radius:10px}
  .genre-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 14px;gap:6px}
  .genre-filters::-webkit-scrollbar{display:none}
  .genre-filters button{font-size:12px;padding:5px 12px;min-height:34px;flex-shrink:0}
  .catalog-toolbar{font-size:11.5px;margin:12px 0}
  .catalog-toolbar>button,.catalog-toolbar select{font-size:11.5px}
  .personal-tabs{margin-bottom:18px}
  .personal-tabs button{font-size:12.5px;min-height:40px}

  /* Profile + updates */
  .profile-stats span{font-size:10.5px}
  .profile-row>span:not(.row-icon){font-size:13px}
  .profile-row small{font-size:10.5px}
  .update-row strong{font-size:12.5px}
  .update-row small{font-size:11px}
  .update-row time{font-size:10px}

  /* Series */
  .series-overview{border-radius:18px}
  .series-artwork{gap:14px;padding:16px 16px 12px;min-height:0}
  .series-cover{width:112px;border-radius:10px}
  .series-headline h1{font-size:18px;line-height:1.45;margin-bottom:6px}
  .series-headline .series-aliases{font-size:11px;margin-bottom:4px}
  .series-headline .series-genres{gap:5px;margin-top:6px}
  .series-headline .series-genres button{font-size:11px;padding:1px 9px;min-height:26px}
  .series-headline .series-facts{margin-top:8px;padding:0 10px}
  .series-headline .series-facts>div{min-height:31px;padding:3px 0}
  .series-headline .series-facts dt{font-size:10.5px}
  .series-headline .series-facts dd,.series-headline .series-facts>div:first-child dd{font-size:12px}
  .series-headline .series-facts small{font-size:10px}
  .series-overview>.series-actions{margin:2px 16px 0;gap:7px;grid-template-columns:minmax(0,1fr) 46px}
  .series-overview>.series-actions.resume-first{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 46px}
  .series-actions button{min-height:46px;font-size:12.5px;padding:5px 8px;gap:6px;border-radius:12px}
  .series-actions span{font-size:10.5px}
  .series-actions svg{width:17px;height:17px}
  .series-actions .series-favorite{width:46px;height:46px;min-height:46px;border-radius:12px}
  .series-copy{padding:14px 16px 16px}
  .series-synopsis h2{font-size:11.5px}
  .series-synopsis p{font-size:13px;line-height:1.95}
  .series-more{font-size:12px}
  .series-rating-head>span:first-child,.rate-work>span{font-size:11.5px}
  .rate-stars button{width:32px;height:34px}
  .rate-stars svg{width:22px;height:22px}
  .series-chapters{padding:15px}
  .series-chapters h2{font-size:15px}
  .series-chapters .sort-button{font-size:11.5px}
  .series-chapter-list .chapter-tile{min-height:54px;padding-block:11px;gap:10px}
  .chapter-row-label{font-size:13.5px}
  .chapter-row-label small{font-size:10.5px}
  .chapter-date{font-size:10.5px}
  .series-chapter-list .chapter-open{width:34px;height:32px}

  /* Reader */
  .reader-actions span{font-size:11px}
  .reader-actions button{min-height:38px}
  .reader-heading strong{font-size:13px}
  .reader-heading small{font-size:10.5px}
  .resume-prompt{font-size:12px}
}
@media(max-width:350px){
  .catalog-grid,.home-view .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
  .series-cover{width:96px}
  .series-headline h1{font-size:16px}
  .series-actions span{display:none}
  .feature-cover{width:84px}
}
@media(min-width:701px){
  .app-nav button{min-height:46px;padding:4px;font-size:10.5px}
  .series-artwork{padding:30px 28px 22px}
  .series-overview>.series-actions{margin-inline:28px}
  .series-copy{padding-inline:28px}
}
@media(prefers-reduced-motion:reduce){.app-nav button,.home-search{transition:none}}

/* Deep-sea backdrop: soft light shafts from the surface, wave beds and a faint trident at the floor,
   a few slow bubbles in between. Only transforms animate; everything stops with reduced motion. */
body,body.home-view{background-color:#050e19;background-image:linear-gradient(180deg,#0d2639 0%,#09182a 30%,#060f1c 68%,#030911 100%);background-attachment:fixed}
html[data-theme="light"] body,html[data-theme="light"] body.home-view{background-color:#e8f4f9;background-image:linear-gradient(180deg,#cfe9f5 0%,#e2f1f8 34%,#edf6fa 72%,#e3eff6 100%)}
body::before{content:"";position:fixed;inset:-18% -12% 38%;z-index:-1;pointer-events:none;opacity:1;transform-origin:60% 0;filter:blur(20px);
  background:
    radial-gradient(ellipse 62% 48% at 62% 0%,#4cc3eb24,transparent 72%),
    linear-gradient(104deg,transparent 33%,#8fe3ff12 40%,transparent 47%),
    linear-gradient(96deg,transparent 52%,#8fe3ff0e 57%,transparent 63%),
    linear-gradient(113deg,transparent 12%,#8fe3ff0a 20%,transparent 28%),
    linear-gradient(89deg,transparent 69%,#8fe3ff09 74%,transparent 80%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 22%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 22%,transparent 100%)}
body::after{content:"";position:fixed;inset:auto 0 0;height:min(42vh,320px);z-index:-1;pointer-events:none;opacity:1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 240'%3E%3Cg fill='none' stroke='%2378d6f5' stroke-opacity='.10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 236V60M60 18l-9 30h18ZM24 34c0 26 14 40 36 40s36-14 36-40M24 34l-8 14M24 34l9 12M96 34l8 14M96 34l-9 12M44 236h32'/%3E%3C/g%3E%3C/svg%3E") left 6% bottom 18px/auto 78% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%230b2236' fill-opacity='.55' d='M0 90Q150 40 300 86T600 80T900 92T1200 74V200H0Z'/%3E%3Cpath fill='%23071a2b' fill-opacity='.7' d='M0 130Q170 90 340 128T680 122T1000 136T1200 118V200H0Z'/%3E%3Cpath fill='none' stroke='%237fdcff' stroke-opacity='.10' d='M0 90Q150 40 300 86T600 80T900 92T1200 74M0 130Q170 90 340 128T680 122T1000 136T1200 118'/%3E%3C/svg%3E") bottom/100% 62% no-repeat}
html[data-theme="light"] body::before{background:
    radial-gradient(ellipse 62% 48% at 62% 0%,#ffffffb3,transparent 72%),
    linear-gradient(104deg,transparent 33%,#ffffff8c 40%,transparent 47%),
    linear-gradient(96deg,transparent 52%,#ffffff73 57%,transparent 63%),
    linear-gradient(113deg,transparent 12%,#ffffff59 20%,transparent 28%),
    linear-gradient(89deg,transparent 69%,#ffffff4d 74%,transparent 80%)}
html[data-theme="light"] body::after{opacity:1;background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 240'%3E%3Cg fill='none' stroke='%23166f98' stroke-opacity='.09' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 236V60M60 18l-9 30h18ZM24 34c0 26 14 40 36 40s36-14 36-40M24 34l-8 14M24 34l9 12M96 34l8 14M96 34l-9 12M44 236h32'/%3E%3C/g%3E%3C/svg%3E") left 6% bottom 18px/auto 78% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%23b9dcec' fill-opacity='.45' d='M0 90Q150 40 300 86T600 80T900 92T1200 74V200H0Z'/%3E%3Cpath fill='%23a6d1e5' fill-opacity='.5' d='M0 130Q170 90 340 128T680 122T1000 136T1200 118V200H0Z'/%3E%3C/svg%3E") bottom/100% 62% no-repeat}
#shell,.home-view #shell{position:relative;isolation:isolate}
#shell::before,.home-view #shell::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(100vh + 900px);z-index:-1;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(circle at 18% 30%,#a8ecff55 0 1.6px,transparent 2.4px),
    radial-gradient(circle at 72% 64%,#a8ecff40 0 2.4px,transparent 3.4px),
    radial-gradient(circle at 46% 86%,#a8ecff33 0 1.2px,transparent 2px),
    radial-gradient(circle at 88% 12%,#a8ecff38 0 3px,transparent 4px),
    radial-gradient(circle at 34% 58%,#a8ecff30 0 1.4px,transparent 2.2px),
    radial-gradient(circle at 8% 78%,#a8ecff40 0 2px,transparent 3px),
    radial-gradient(circle at 60% 22%,#a8ecff2e 0 1.8px,transparent 2.6px);
  background-size:330px 450px,330px 450px,520px 900px,520px 900px,410px 450px,260px 900px,470px 900px}
html[data-theme="light"] #shell::before{opacity:1;background-image:
    radial-gradient(circle at 18% 30%,#ffffffcc 0 1.4px,#1784ad59 1.6px 2.3px,transparent 2.6px),
    radial-gradient(circle at 72% 64%,#ffffffcc 0 2.2px,#1784ad4d 2.4px 3.2px,transparent 3.5px),
    radial-gradient(circle at 46% 86%,#ffffffcc 0 1px,#1784ad4d 1.2px 1.9px,transparent 2.2px),
    radial-gradient(circle at 88% 12%,#ffffffcc 0 2.8px,#1784ad47 3px 3.8px,transparent 4.1px),
    radial-gradient(circle at 34% 58%,#ffffffcc 0 1.2px,#1784ad47 1.4px 2.1px,transparent 2.4px),
    radial-gradient(circle at 8% 78%,#ffffffcc 0 1.8px,#1784ad52 2px 2.8px,transparent 3.1px),
    radial-gradient(circle at 60% 22%,#ffffffcc 0 1.6px,#1784ad47 1.8px 2.5px,transparent 2.8px)}
body.reading::before,body.reading::after{display:none}
@media(prefers-reduced-motion:no-preference){
  body::before{animation:sea-sway 18s ease-in-out infinite alternate}
  #shell::before{animation:sea-bubbles 70s linear infinite}
}
@keyframes sea-sway{from{transform:rotate(-1.5deg) translateX(-1%);opacity:.75}to{transform:rotate(1.5deg) translateX(1%);opacity:1}}
@keyframes sea-bubbles{from{transform:translateY(0)}to{transform:translateY(-900px)}}
@media(max-width:700px){body::after{height:min(34vh,240px)}}
/* English titles follow the RTL block they sit in, so they line up with the tags below them. */
/* Series title: left-aligned English, box shrunk to its longest line (from JS) and pinned to the right edge,
   so it lines up with the genre pills below. Physical margins: the title is LTR (dir=auto). */
.series-headline h1{text-align:left;width:fit-content;max-width:100%;margin-left:auto;margin-right:0;text-wrap:wrap}
.feature-copy h1{text-align:left}

/* Series header backdrop: the work's own cover as a soft cinematic glow instead of drawn rays and waves. */
.series-artwork .ocean-rays,.series-artwork .ocean-waves{display:none}
.series-artwork .ocean-scene{background:radial-gradient(ellipse 70% 90% at 85% 0%,#3cc4ec26,transparent 65%)}
.series-artwork .ocean-scene i{opacity:0}
.series-backdrop{inset:-50px;width:calc(100% + 100px);height:calc(100% + 100px);object-position:50% 22%;filter:blur(24px) saturate(1.5) brightness(.95);opacity:1;transform:scale(1.12)}
.series-artwork::after{background:
  linear-gradient(0deg,var(--series-panel) 2%,#14203200 46%),
  linear-gradient(270deg,#14203200 30%,#142032a6 100%),
  linear-gradient(180deg,#0a142233,#0a142200 40%)}
.series-artwork{box-shadow:inset 0 1px 0 #ffffff12}
html[data-theme="light"] .series-backdrop{filter:blur(24px) saturate(1.3) brightness(1.1);opacity:.7}
html[data-theme="light"] .series-artwork .ocean-scene{background:radial-gradient(ellipse 70% 90% at 85% 0%,#5bc3e62e,transparent 65%)}
html[data-theme="light"] .series-artwork::after{background:
  linear-gradient(0deg,var(--series-panel) 2%,#ffffff00 46%),
  linear-gradient(270deg,#ffffff00 30%,#ffffffb3 100%)}
.series-cover{box-shadow:0 18px 40px #000a,0 0 0 1px #ffffff22}
html[data-theme="light"] .series-cover{box-shadow:0 14px 32px #1b3b5a40,0 0 0 1px #ffffff99}
@media(prefers-reduced-motion:no-preference){.series-backdrop{animation:series-glow 14s ease-in-out infinite alternate}}
@keyframes series-glow{from{transform:scale(1.12) translateX(-1.5%)}to{transform:scale(1.18) translateX(1.5%)}}

/* English work titles use Kanit (semi-condensed geometric sans, as on WEBTOON): it sits well beside
   Vazirmatn and fits long titles. Two real weights are bundled (500 for card titles, 600 for headings), so
   nothing is synthesized; Persian characters still fall through to Vazirmatn. */
@font-face{font-family:'Poseidon Kanit';src:url('/assets/Kanit-latin-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poseidon Kanit';src:url('/assets/Kanit-latin-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.series-headline h1,.feature-copy h1,.catalog-card h3,.home-view .catalog-card h3,.catalog-grid .catalog-card h3,.resume-card strong,.update-row strong,#reader-title,.series-copy h1{font-family:'Poseidon Kanit',Vazirmatn,sans-serif;font-weight:500;font-synthesis:none;letter-spacing:0}
.series-headline h1,.feature-copy h1,#reader-title{font-weight:600}
.series-headline h1{font-size:26px;line-height:1.35}
.feature-copy h1{font-size:25px;letter-spacing:.3px}
.catalog-card h3,.home-view .catalog-card h3{font-size:13.5px}
.resume-card strong{font-size:13.5px}
@media(max-width:700px){
  .series-headline h1{font-size:19px}
  .feature-copy h1{font-size:19px}
  .catalog-card h3,.home-view .catalog-card h3{font-size:13px}
  .catalog-grid .catalog-card h3{font-size:12.5px}
  .resume-card strong{font-size:13px}
}
/* Narrow resume cards: titles wrap to two lines beside the cover instead of being cut off. */
.resume-card strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}

/* Work cards v2: inset cover with glass badges, Kanit title, latest-chapter footer. */
.catalog-card,.home-view .catalog-card,.catalog-grid .catalog-card{padding:6px;border-radius:16px;background:linear-gradient(165deg,#7fd6f00d,transparent 45%),var(--surface);border:1px solid #8fd3ec24;box-shadow:0 6px 20px #0003,inset 0 1px 0 #d8f6ff0d}
html[data-theme="light"] .catalog-card,html[data-theme="light"] .home-view .catalog-card,html[data-theme="light"] .catalog-grid .catalog-card{background:#fff;border-color:#1f5a7d1f;box-shadow:0 6px 18px #1b3b5a14}
.catalog-card .work-card-open{border-radius:11px}
.catalog-card .cover-frame,.catalog-grid .catalog-card .cover-frame{border-radius:11px;isolation:isolate}
.catalog-card .cover-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff1a;background:linear-gradient(180deg,#00000040 0%,transparent 22%,transparent 62%,#000000a6 100%)}
.catalog-card .cover-frame>span{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:3px;max-width:calc(100% - 12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9.5px;line-height:1.75;padding:0 7px;border-radius:var(--pill);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cover-type{top:6px;left:6px;background:#06142299;color:#e3f6ff;border:1px solid #ffffff24}
.cover-new{top:6px;right:6px;background:linear-gradient(115deg,#a1ebf3,#62c9e6);color:#06202e;font-weight:700;box-shadow:0 0 12px #5fd6f266}
.catalog-card .cover-frame>.card-score{bottom:6px;left:6px;top:auto;right:auto;background:#06142299;border:1px solid #ffffff24;color:#ffd77a;font-weight:600}
.catalog-card .cover-frame>.cover-status,.catalog-grid .catalog-card .cover-frame>.cover-status{bottom:6px;right:6px;top:auto;left:auto;inset:auto 6px 6px auto;max-width:calc(100% - 52px);font-size:9px;padding:0 6px}
.catalog-card h3,.home-view .catalog-card h3,.catalog-grid .catalog-card h3{margin:9px 4px 7px;min-height:2.7em;line-height:1.35}
.catalog-card .work-meta,.home-view .catalog-card .work-meta,.catalog-grid .catalog-card .work-meta{margin:auto 4px 0;padding:0 0 3px;justify-content:space-between;align-items:center;gap:6px;font-size:10.5px;flex-wrap:nowrap}
.card-chapter{flex-shrink:0;padding:1px 8px;border-radius:var(--pill);background:#6fd6ee1a;border:1px solid #6fd6ee33;color:var(--sea);font-weight:600;line-height:1.6}
.card-chapter.muted{color:var(--muted);background:transparent}
.catalog-card .work-meta time{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .catalog-card .cover-frame img{transition:transform .35s ease}
  .catalog-card:hover .cover-frame img{transform:scale(1.04)}
  .catalog-card:hover,.home-view .catalog-card:hover{border-color:#7ad9f066;box-shadow:0 10px 28px #0004,0 0 22px #4dd6eb14}
}
@media(max-width:700px){
  .catalog-card,.home-view .catalog-card,.catalog-grid .catalog-card{padding:5px;border-radius:14px}
  .catalog-card .cover-frame,.catalog-grid .catalog-card .cover-frame{border-radius:10px}
  .catalog-card .cover-frame>span{font-size:9px;padding:0 6px}
  .catalog-card h3,.home-view .catalog-card h3{margin:8px 3px 6px}
  .catalog-card .work-meta,.home-view .catalog-card .work-meta{font-size:10px;margin-inline:3px}
  .catalog-grid .catalog-card{padding:4px;border-radius:12px}
  .catalog-grid .catalog-card .cover-frame>span{font-size:8.5px;padding:0 5px}
  .catalog-grid .catalog-card .cover-frame>.cover-status{display:none}
  .catalog-grid .catalog-card h3{margin:7px 3px 5px}
  .catalog-grid .catalog-card .work-meta{font-size:9.5px;margin-inline:3px}
  .catalog-grid .card-chapter{padding:0 6px}
  .catalog-grid .catalog-card .work-meta time{display:none}
}


/* ===== Design B (live; index.html sets data-design="b"): the cover is the card, the slider is a poster strip. ===== */
[data-design="b"] .catalog-card,[data-design="b"] .home-view .catalog-card,[data-design="b"] .catalog-grid .catalog-card,
html[data-design="b"][data-theme="light"] .catalog-card,html[data-design="b"][data-theme="light"] .catalog-grid .catalog-card{padding:0;background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
[data-design="b"] .catalog-card .cover-frame,[data-design="b"] .catalog-grid .catalog-card .cover-frame{border-radius:14px;overflow:hidden;box-shadow:0 12px 26px #0007,0 0 0 1.5px #5fd0ee5c,0 0 22px #3cc4ec1f}
html[data-design="b"][data-theme="light"] .catalog-card .cover-frame{box-shadow:0 10px 22px #1b3b5a30,0 0 0 1.5px #1784ad59}
[data-design="b"] .catalog-card .cover-frame::after{box-shadow:none;background:linear-gradient(180deg,#000000a0 0%,transparent 26%,transparent 70%,#00000080 100%)}
[data-design="b"] .catalog-card .cover-frame>.cover-type,[data-design="b"] .catalog-card .cover-frame>.card-score{display:none}
[data-design="b"] .catalog-card .cover-frame>.cover-views{display:inline-flex;top:6px;left:6px;background:#06142299;color:#e3f6ff;border:1px solid #ffffff24;font-family:'Poseidon Roboto',Vazirmatn,sans-serif;direction:ltr}
[data-design="b"] .cover-views svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-design="b"] .catalog-card h3,[data-design="b"] .home-view .catalog-card h3,[data-design="b"] .catalog-grid .catalog-card h3{margin:10px 2px 6px;min-height:2.7em;color:var(--ink)}
[data-design="b"] .catalog-card .work-meta,[data-design="b"] .catalog-grid .catalog-card .work-meta{margin:0 2px;padding:0;gap:7px;justify-content:flex-start}
[data-design="b"] .work-meta>.card-score{display:inline-flex;font-size:11px;color:var(--score)}
[data-design="b"] .catalog-card .work-meta time{margin-inline-start:auto;font-size:10px}
[data-design="b"] .card-chapter{border:0;color:#fff;background:linear-gradient(110deg,#3fb6e3,#3b7fe0);box-shadow:0 3px 10px #2f9fe040}
[data-design="b"] .card-chapter.muted{background:#8aa3bb33;color:var(--muted);box-shadow:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  [data-design="b"] .catalog-card:hover,[data-design="b"] .home-view .catalog-card:hover{box-shadow:none;transform:translateY(-3px)}
  [data-design="b"] .catalog-card:hover .cover-frame{box-shadow:0 16px 30px #0008,0 0 0 1.5px #7fe2f5aa,0 0 28px #3cc4ec40}
}
@media(max-width:700px){
  [data-design="b"] .catalog-card .cover-frame,[data-design="b"] .catalog-grid .catalog-card .cover-frame{border-radius:12px}
  [data-design="b"] .catalog-card .cover-frame>span{font-size:9px}
  [data-design="b"] .catalog-grid .catalog-card .cover-frame>.cover-status{display:none}
  [data-design="b"] .catalog-grid .catalog-card .work-meta{gap:5px}
  [data-design="b"] .catalog-grid .work-meta>.card-score{font-size:10px}
  [data-design="b"] .cover-rail{gap:12px}
}

/* Slider B: poster layout. The whole cover stands at full height on one side and fades into its own
   blurred colors; the Poseidon banner is shown complete (contain) instead of being cropped. */
[data-design="b"] .feature-slider{min-height:0;aspect-ratio:12/5;border-radius:22px;background:#05101c}
[data-design="b"] #feature-content{min-height:0;height:100%;align-items:center;padding:20px 26px 34px}
[data-design="b"] .feature-backdrop{filter:blur(22px) saturate(1.3) brightness(.6);opacity:1;transform:scale(1.15)}
[data-design="b"] .feature-cover{display:block;position:absolute;z-index:-1;top:0;bottom:0;left:0;height:100%;width:auto;aspect-ratio:5/7;margin:0;order:0;border:0;border-radius:0;transform:none;box-shadow:none;object-fit:cover;-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 38%);mask-image:linear-gradient(270deg,transparent 0%,#000 38%)}
[data-design="b"] .feature-slider:hover .feature-cover{transform:none}
[data-design="b"] .feature-slider::after{background:linear-gradient(270deg,#04101de6 0%,#04101db3 42%,#04101d00 72%),linear-gradient(0deg,#04101d99,transparent 30%)}
[data-design="b"] .feature-tide{opacity:.4}
[data-design="b"] .feature-copy{max-width:58%;margin-inline-end:auto}
[data-design="b"] .feature-copy h1{font-size:26px;text-shadow:0 2px 14px #000c;-webkit-line-clamp:3}
[data-design="b"] .feature-copy .primary{min-height:44px;padding:0 22px;border-radius:var(--pill);background:linear-gradient(110deg,#8ff0f6,#3fb6e3 50%,#3b7fe0);color:#fff;font-size:13px;box-shadow:0 8px 26px #2f9fe055;text-shadow:0 1px 4px #0004}
[data-design="b"] .slider-controls{inset:auto 0 8px;justify-content:center}
[data-design="b"] .branded-slide .feature-backdrop{filter:none;opacity:1;transform:none;object-fit:contain;object-position:center}
[data-design="b"] .feature-slider.branded-slide::after{background:linear-gradient(270deg,#04101dcc 0%,#04101d00 45%)}
[data-design="b"] .branded-slide #feature-content{align-items:flex-end}
[data-design="b"] .branded-slide .feature-copy{max-width:45%}
@media(max-width:700px){
  [data-design="b"] .feature-slider{aspect-ratio:16/11;border-radius:18px}
  [data-design="b"] #feature-content{padding:14px 14px 28px}
  [data-design="b"] .feature-copy{max-width:56%}
  [data-design="b"] .feature-copy h1{font-size:18px;line-height:1.3;margin-bottom:8px}
  [data-design="b"] .feature-eyebrow{margin-bottom:6px}
  [data-design="b"] .feature-tags{margin-bottom:10px}
  [data-design="b"] .feature-tags span:nth-child(3){display:none}
  [data-design="b"] .feature-copy .primary{min-height:36px;font-size:12px;padding:0 16px}
  [data-design="b"] .branded-slide .feature-copy{max-width:50%}
  [data-design="b"] .branded-slide .feature-copy h1{font-size:15px}
}

/* Slider B, compact copy: smaller type and button so the cover stays the focus. */
[data-design="b"] .feature-copy{max-width:52%}
[data-design="b"] .feature-eyebrow{font-size:10px;margin-bottom:6px}
[data-design="b"] .feature-copy h1{font-size:20px;line-height:1.3;margin-bottom:8px}
[data-design="b"] .feature-tags{font-size:10px;gap:4px;margin-bottom:12px}
[data-design="b"] .feature-tags span,[data-design="b"] .feature-tags span+span{padding:0 7px}
[data-design="b"] .feature-copy .primary{min-height:36px;padding:0 16px;font-size:12px;gap:8px}
[data-design="b"] .feature-copy .primary svg{width:15px;height:15px}
@media(max-width:700px){
  [data-design="b"] .feature-copy{max-width:50%}
  [data-design="b"] .feature-eyebrow{font-size:9px;margin-bottom:4px}
  [data-design="b"] .feature-copy h1{font-size:15px;margin-bottom:6px}
  [data-design="b"] .feature-tags{font-size:9px;margin-bottom:9px}
  [data-design="b"] .feature-copy .primary{min-height:30px;padding:0 12px;font-size:11px;gap:6px}
  [data-design="b"] .feature-copy .primary svg{width:13px;height:13px}
}

/* Status badge: one gap between dot and text, even padding, smaller. */
.catalog-card .cover-frame>.cover-status,.catalog-grid .catalog-card .cover-frame>.cover-status{align-items:center;justify-content:center;gap:4px;height:16px;padding:0 7px 0 6px;font-size:8.5px;line-height:16px}
.catalog-card .cover-frame>.cover-status::before{margin:0;flex-shrink:0}

/* Reader dock: the download button gets a wider column so its icon and label have breathing room. */
.reader-actions{grid-template-columns:1fr 1fr 1.4fr 1fr}
.reader-actions #download{padding-inline:10px;gap:6px}
/* Scrollable pill rows fade out at their far edge, so a partly visible pill reads as "more to scroll". */
.genre-filters{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 28px);mask-image:linear-gradient(to left,transparent 0,#000 28px)}

/* Slider: the English title keeps left alignment but its block hugs the right edge, next to the tags. */
/* Physical margins: the title is LTR (dir=auto), so logical ones would flip to the wrong side. */
.feature-copy h1{width:fit-content;max-width:100%;margin-left:auto;margin-right:0;text-wrap:balance}

/* Genre shortcuts: a draggable, snapping row; on phones exactly three whole pills fill the width. */
.genre-shortcuts{cursor:grab;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain}
.genre-shortcuts.is-dragging{scroll-snap-type:none}
.genre-shortcuts button{scroll-snap-align:start}
@media(max-width:700px){
  .genre-shortcuts{gap:8px}
  .genre-shortcuts button{flex:0 0 calc((100% - 16px)/3);justify-content:flex-start;padding:5px 5px 5px 8px;gap:6px;min-width:0}
  .genre-shortcuts strong{overflow:hidden;text-overflow:ellipsis;font-size:12px}
  .genre-shortcuts small{display:none}
}

/* Slider B copy: a vertically centered group with one even gap between label, title, tags and button.
   The title box is shrunk to its longest line from JS, so it sits flush with the right edge like the rest. */
[data-design="b"] #feature-content{align-items:center}
[data-design="b"] .feature-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;flex:none;max-width:52%;margin-inline-end:0}
[data-design="b"] .feature-copy>*{margin:0}
[data-design="b"] .feature-copy h1{margin:0 0 0 auto;-webkit-line-clamp:3}
[data-design="b"] .branded-slide #feature-content{align-items:flex-end}
@media(max-width:700px){
  [data-design="b"] .feature-copy{gap:13px;max-width:50%}
  [data-design="b"] .feature-copy h1{font-size:15px;line-height:1.3}
}

/* Card B halo: no panel and no border. A blurred plate sits behind each card; its faint cyan rim is blurred
   too, so the card is lifted by a soft glow with no hard edge. */
[data-design="b"] .catalog-card,[data-design="b"] .home-view .catalog-card,[data-design="b"] .catalog-grid .catalog-card,
html[data-design="b"][data-theme="light"] .catalog-card,html[data-design="b"][data-theme="light"] .catalog-grid .catalog-card{position:relative;isolation:isolate;padding:8px 8px 10px;border:0;border-radius:16px;background:none;box-shadow:none;overflow:visible}
[data-design="b"] .catalog-card::before{content:"";position:absolute;inset:2px;z-index:-1;pointer-events:none;border-radius:18px;filter:blur(8px);
  background:linear-gradient(180deg,#16324acc 0%,#10263ab3 60%,#0d1f3099 100%);box-shadow:0 0 0 2px #3cc4ec2e,0 10px 18px #00000059}
html[data-design="b"][data-theme="light"] .catalog-card::before{background:linear-gradient(180deg,#ffffffe6 0%,#ffffffcc 100%);box-shadow:0 0 0 2px #2a6f9a14,0 10px 18px #1b3b5a1f}
[data-design="b"] .catalog-card .cover-frame,[data-design="b"] .catalog-grid .catalog-card .cover-frame{border-radius:10px;box-shadow:0 10px 22px #0000008c,0 2px 6px #00000059}
html[data-design="b"][data-theme="light"] .catalog-card .cover-frame{box-shadow:0 8px 18px #1b3b5a2e,0 2px 5px #1b3b5a1a}
[data-design="b"] .catalog-card h3,[data-design="b"] .home-view .catalog-card h3,[data-design="b"] .catalog-grid .catalog-card h3{margin:10px 2px 8px}
[data-design="b"] .catalog-card .work-meta{margin:0 2px}
[data-design="b"] .cover-rail{padding:22px 12px 22px;margin:-10px -12px -4px;gap:16px;scroll-padding-inline:12px}
[data-design="b"] .catalog-grid{padding:10px 4px 6px;gap:18px 12px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  [data-design="b"] .catalog-card{transition:transform .2s}
  [data-design="b"] .catalog-card::before{transition:box-shadow .2s}
  [data-design="b"] .catalog-card:hover,[data-design="b"] .home-view .catalog-card:hover,html[data-design="b"][data-theme="light"] .catalog-card:hover{transform:translateY(-3px);border:0;box-shadow:none}
  [data-design="b"] .catalog-card:hover::before{box-shadow:0 0 0 2px #3cc4ec47,0 14px 24px #00000066}
  html[data-design="b"][data-theme="light"] .catalog-card:hover::before{box-shadow:0 0 0 2px #2a6f9a24,0 14px 24px #1b3b5a29}
}
@media(max-width:700px){
  [data-design="b"] .catalog-card,[data-design="b"] .home-view .catalog-card{padding:6px 6px 8px}
  [data-design="b"] .catalog-card .cover-frame{border-radius:9px}
  [data-design="b"] .cover-rail{padding:20px 14px 20px;margin:-10px -14px -4px;gap:14px}
  [data-design="b"] .catalog-grid .catalog-card{padding:4px 4px 6px}
  [data-design="b"] .catalog-grid{gap:16px 10px;padding:8px 2px 4px}
}
/* Narrow B panels on phones: when a card has a score, the footer keeps chapter + score and drops the date. */
[data-design="b"] .catalog-grid .catalog-card .work-meta:has(.card-score) time,[data-design="b"] .cover-rail .catalog-card .work-meta:has(.card-score) time{display:none}

/* Slider B uses the same height rules as slider A (min 230px, 210px on phones, growing only for long titles)
   instead of a fixed aspect ratio, so both designs take the same space on the home page. */
[data-design="b"] .feature-slider{aspect-ratio:auto;min-height:230px}
[data-design="b"] #feature-content{height:auto;min-height:230px}
@media(max-width:700px){
  [data-design="b"] .feature-slider{aspect-ratio:auto;min-height:210px}
  [data-design="b"] #feature-content{min-height:210px}
}

/* Slider B, hybrid: slider A's sharp tilted cover card over the blurred cover (no edge fade), combined with
   B's copy column, pill button and complete banner slide. */
[data-design="b"] .feature-cover{position:static;z-index:auto;order:2;align-self:center;width:124px;height:auto;aspect-ratio:5/7;margin:0;margin-inline-start:auto;
  border:1px solid #b5f5ff40;border-radius:11px;transform:rotate(-3deg);object-fit:cover;-webkit-mask-image:none;mask-image:none;
  box-shadow:0 15px 40px #0009,0 0 0 1px #00000033,0 0 26px #3cc4ec1f}
[data-design="b"] .feature-backdrop{filter:blur(20px) saturate(.9) brightness(.85);opacity:.45;transform:scale(1.12)}
[data-design="b"] .feature-slider:not(.branded-slide)::after{background:linear-gradient(90deg,#071a2b26,#061323d9 78%),linear-gradient(0deg,#061323e0,transparent 70%)}
[data-design="b"] #feature-content{gap:20px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  [data-design="b"] .feature-cover{transition:transform .3s}
  [data-design="b"] .feature-slider:hover .feature-cover{transform:rotate(0)}
}
@media(max-width:700px){
  [data-design="b"] .feature-cover{width:104px;border-radius:9px}
  [data-design="b"] #feature-content{gap:14px}
}
/* Wide screens: keep slider B's cover next to its copy instead of pushing it to the far edge. */
@media(min-width:701px){
  [data-design="b"] #feature-content{justify-content:flex-start;gap:30px;padding-inline:34px}
  [data-design="b"] .feature-cover{margin-inline-start:0;width:132px}
}

/* Slider B on phones, from the user's mockup: a 2.3:1 strip, the tilted cover filling ~90% of the height near
   the left edge, the copy column pinned top (label) to bottom (button) on the right, dots centred at the base. */
@media(max-width:700px){
  [data-design="b"] .feature-slider{aspect-ratio:23/10;min-height:0}
  [data-design="b"] #feature-content{min-height:0;height:100%;padding:16px 13px 24px;align-items:stretch;justify-content:flex-start;gap:0}
  [data-design="b"] .feature-cover{position:absolute;left:11px;top:5px;bottom:auto;width:auto;height:calc(100% - 15px);aspect-ratio:5/7;margin:0;border-radius:8px}
  [data-design="b"] .feature-copy{justify-content:space-between;gap:4px;max-width:calc(100% - 128px)}
  [data-design="b"] .feature-eyebrow{font-size:9.5px}
  [data-design="b"] .feature-copy h1{font-size:15px;line-height:1.25;-webkit-line-clamp:2}
  [data-design="b"] .feature-tags{font-size:9.5px}
  [data-design="b"] .feature-copy .primary{min-height:27px;padding:0 13px;font-size:11px}
  [data-design="b"] .slider-controls{inset:auto 0 2px;justify-content:center}
  [data-design="b"] .branded-slide .feature-copy{justify-content:flex-end;gap:8px}
}

/* Slider B on phones, scaled with the slider itself (cqw = 1% of slider width), so every element keeps the
   mockup's proportions at any phone width. Values come from the 1920px-wide mockup; px lines are fallbacks. */
@media(max-width:700px){
  [data-design="b"] .feature-slider{container-type:inline-size}
  [data-design="b"] #feature-content{padding:4.7cqw 3.4cqw 7cqw}
  [data-design="b"] .feature-cover{left:4.4cqw;top:3.6cqw;height:calc(100% - 8.2cqw);border-radius:2.4cqw}
  [data-design="b"] .feature-copy{max-width:calc(100% - 38cqw)}
  [data-design="b"] .feature-eyebrow{font-size:2.45cqw;gap:1.5cqw}
  [data-design="b"] .feature-eyebrow::before{width:1.5cqw;height:1.5cqw}
  [data-design="b"] .feature-copy h1{font-size:4.05cqw;line-height:1.25}
  [data-design="b"] .feature-tags{font-size:2.4cqw;gap:1.1cqw}
  [data-design="b"] .feature-tags span,[data-design="b"] .feature-tags span+span{padding:0.5cqw 2.2cqw;line-height:1.5}
  [data-design="b"] .feature-copy .primary{min-height:7.8cqw;padding:0 3.5cqw;font-size:2.95cqw;gap:2.2cqw}
  [data-design="b"] .feature-copy .primary svg{width:3.4cqw;height:3.4cqw}
  [data-design="b"] .slider-controls{inset:auto 0 calc(4.6cqw - 13px)}
}

/* Slider B backdrop (chosen option "cover spotlight"): instead of the blurred cover, a soft cyan beam behind the
   cover that fades toward the copy over a deep-sea gradient. Work slides only; the banner keeps its artwork. */
[data-design="b"] .feature-slider:not(.branded-slide) .feature-backdrop,[data-design="b"] .feature-slider:not(.branded-slide) .feature-tide{display:none}
[data-design="b"] .feature-slider:not(.branded-slide){background:
  radial-gradient(ellipse 30% 70% at 17% 50%,#5fd4f58c 0%,#2aa9dc40 40%,transparent 72%),
  radial-gradient(ellipse 70% 130% at 12% 50%,#1d7aa866 0%,transparent 70%),
  linear-gradient(90deg,#0c2a40 0%,#071728 58%,#05111d 100%)}
[data-design="b"] .feature-slider:not(.branded-slide)::after{background:linear-gradient(180deg,#ffffff08,transparent 30%);box-shadow:inset 0 1px 0 #bdeeff14}

/* Slider B on phones, final sizing: the same height as slider A (210px + border) with the mockup's vertical
   proportions (label ~11% from the top, button ~16% from the bottom, cover ~81% of the height). Horizontal
   sizes still follow the slider width (cqw), slightly larger to suit the taller strip. */
@media(max-width:700px){
  [data-design="b"] .feature-slider{aspect-ratio:auto;min-height:210px}
  [data-design="b"] #feature-content{height:auto;min-height:210px;padding:23px 3.4cqw 34px}
  [data-design="b"] .feature-cover{top:8%;height:81%;left:4.4cqw}
  [data-design="b"] .feature-copy{max-width:calc(100% - 42cqw)}
  [data-design="b"] .feature-eyebrow{font-size:2.75cqw}
  [data-design="b"] .feature-copy h1{font-size:4.55cqw;-webkit-line-clamp:3}
  [data-design="b"] .feature-tags{font-size:2.7cqw}
  [data-design="b"] .feature-copy .primary{min-height:8.8cqw;padding:0 3.9cqw;font-size:3.3cqw}
  /* Small dots, sitting in the strip below the button. */
  [data-design="b"] .slider-controls{inset:auto 0 3px}
  [data-design="b"] .slide-dots{gap:0}
  [data-design="b"] .slide-dots button{width:14px;height:20px}
  [data-design="b"] .slide-dots button::after{width:3px;height:3px}
  [data-design="b"] .slide-dots button[aria-current]::after{width:11px;height:3px}
}

/* Genre pills on phones: three whole pills plus a slice of the fourth, so the row visibly continues. */
@media(max-width:700px){
  .genre-shortcuts button{flex:0 0 calc((100% - 24px)/3.35)}
}

/* Series header backdrop (chosen option "ocean depth"): instead of the blurred cover, a lighter sea-green
   surface sinking into deep navy with a soft glow at the top. The rising bubbles (.ocean-scene i) stay. */
.series-backdrop{display:none}
.series-artwork .ocean-scene{background:none}
.series-artwork{background:
  radial-gradient(ellipse 80% 45% at 50% 0%,#5fd4f526,transparent 75%),
  linear-gradient(180deg,#145068 0%,#0f3a55 30%,#0b2640 62%,#0a1d31 100%)}
.series-artwork::after{background:linear-gradient(0deg,var(--series-panel) 0%,#14203200 40%),linear-gradient(270deg,#14203200 45%,#1420328c 100%)}
/* Day mode: the same depth idea in light water, from pale aqua at the surface down to the white panel. */
html[data-theme="light"] .series-artwork{background:
  radial-gradient(ellipse 80% 45% at 50% 0%,#ffffffb3,transparent 75%),
  linear-gradient(180deg,#bfe6f2 0%,#d6eff7 35%,#e9f6fa 70%,#f6fbfd 100%)}
html[data-theme="light"] .series-artwork::after{background:linear-gradient(0deg,var(--series-panel) 0%,#ffffff00 40%),linear-gradient(270deg,#ffffff00 45%,#ffffff8c 100%)}
html[data-theme="light"] .ocean-scene i{background:#ffffff;box-shadow:0 0 0 1px #1784ad4d,0 0 6px #5bc3e680}
/* Series header: title and cover share the same top edge; when the text is taller the header grows downward,
   never above the cover. */
.series-artwork{align-items:flex-start}
/* Series header v4: cover (whole, natural 5:7) on the right with only the title and other names beside it;
   genres and the facts strip move to a full-width row below, so the cover never has to stretch or crop. */
.series-artwork{flex-direction:row;align-items:flex-start;gap:18px;padding:22px 24px 14px}
.series-cover{align-self:flex-start;width:170px;height:auto;min-height:0;aspect-ratio:5/7;object-fit:cover;border-radius:12px}
.series-headline{display:block;flex:1;min-width:0;padding-top:2px}
.series-headline .series-aliases{margin:6px 0 0}
.series-meta{display:flex;flex-direction:column;gap:10px;padding:0 24px}
.series-meta .series-genres{margin:0;gap:6px}
.series-meta .series-genres button{font-size:11.5px;min-height:28px;padding:2px 11px}
.series-meta .series-facts{margin:0;border-radius:12px}
.series-meta .series-facts>div{min-height:44px;padding:5px 4px;gap:2px}
.series-meta .series-facts dt{font-size:10.5px}
.series-meta .series-facts dd,.series-meta .series-facts>div:first-child dd{font-size:12.5px}
.series-overview>.series-actions{margin-top:12px}
@media(max-width:700px){
  .series-artwork{gap:14px;padding:16px 16px 12px}
  .series-cover{width:126px;border-radius:10px}
  .series-meta{padding:0 16px;gap:8px}
  .series-meta .series-genres button{font-size:11px;min-height:26px;padding:1px 10px}
  .series-meta .series-facts>div{min-height:40px}
  .series-meta .series-facts dt{font-size:10px}
  .series-meta .series-facts dd,.series-meta .series-facts>div:first-child dd{font-size:12px}
  .series-overview>.series-actions{margin-top:10px}
}
@media(max-width:350px){.series-cover{width:104px}}
/* Series header v4 tuning: the cover scales with the card (about 40% of it), the title sits vertically
   centred beside it, and the chapter count reads like the other facts (same size and weight). */
.series-cover{width:clamp(126px,40%,230px)}
.series-headline{align-self:center;padding-top:0}
.series-meta .series-facts dd,.series-meta .series-facts>div:first-child dd{font-weight:700}
.series-meta .series-facts small{font-size:inherit;font-weight:inherit;padding-inline-start:4px}
@media(max-width:700px){.series-cover{width:clamp(126px,40%,200px)}}
@media(max-width:350px){.series-cover{width:112px}}
/* The cover's drop shadow must fade out naturally below the header instead of being cut at its bottom edge;
   the bubbles stay clipped by .ocean-scene and the card keeps its rounded corners via .series-overview. */
.series-artwork{overflow:visible}
.series-meta{position:relative;z-index:1}

/* Status badges: one dark badge for every status; only the dot carries the colour
   (green انگویینگ, red پایان یافته, amber متوقف شده). Used on cards, the slider and the series facts. */
:root{--dot-ongoing:#4fe3a1;--dot-finished:#ff5f6d;--dot-hiatus:#ffc24d}
.catalog-card .cover-frame>.cover-status,.catalog-grid .catalog-card .cover-frame>.cover-status,html[data-theme="light"] .catalog-card .cover-frame>.cover-status,
.cover-status.finished,.cover-status.hiatus,html[data-theme="light"] .cover-status{background:#06142ab3;color:#e8f3fa;border:1px solid #ffffff24;text-shadow:none;box-shadow:none}
.cover-status::before,.feature-status::before,.series-facts [class^="status-"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--dot-ongoing);box-shadow:0 0 6px var(--dot-ongoing)}
.cover-status.finished::before,.feature-status.finished::before,.series-facts .status-finished::before{background:var(--dot-finished);box-shadow:0 0 6px var(--dot-finished)}
.cover-status.hiatus::before,.feature-status.hiatus::before,.series-facts .status-hiatus::before{background:var(--dot-hiatus);box-shadow:0 0 6px var(--dot-hiatus)}
.feature-tags .feature-status,.feature-tags .feature-status.finished,.feature-tags .feature-status.hiatus{display:inline-flex;align-items:center;gap:5px;color:#e8f3fa}
.series-facts .status-ongoing,.series-facts .status-finished,.series-facts .status-hiatus{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--ink)}
.series-facts [class^="status-"]::before{margin:0}
/* Cover badges: status top-right across from the views badge (top-left); «جدید» moves to the bottom-right. */
[data-design="b"] .catalog-card .cover-frame>.cover-status,[data-design="b"] .catalog-grid .catalog-card .cover-frame>.cover-status{inset:6px 6px auto auto;max-width:calc(100% - 64px)}
[data-design="b"] .catalog-card .cover-frame>.cover-new{top:auto;bottom:6px;right:6px}
/* Cover badges more see-through: the cover shows through; a light blur and text shadow keep them readable. */
.catalog-card .cover-frame>.cover-status,.catalog-grid .catalog-card .cover-frame>.cover-status,html[data-theme="light"] .catalog-card .cover-frame>.cover-status,
[data-design="b"] .catalog-card .cover-frame>.cover-views{background:#06142a6b;border-color:#ffffff2e;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);text-shadow:0 1px 2px #000000b3}

/* Series header "info column": cover on the right; beside it the title at the top (full column width,
   left-aligned) and the facts list at the bottom, ending level with the cover's bottom edge. */
.series-artwork{align-items:stretch}
.series-cover{align-self:flex-start;margin:0}
.series-headline{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:0}
.series-headline h1{width:auto;margin:0;text-align:left}
.series-headline .series-facts{display:grid;grid-template-columns:1fr;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#0a1a2c8c;backdrop-filter:blur(6px)}
html[data-theme="light"] .series-headline .series-facts{background:#ffffffc4}
.series-headline .series-facts>div{flex-direction:row;justify-content:space-between;align-items:center;gap:8px;min-height:34px;padding:4px 0;border:0}
.series-headline .series-facts>div+div{border-top:1px solid var(--line)}
.series-headline .series-facts dt{font-size:11px}
.series-headline .series-facts dd,.series-headline .series-facts>div:first-child dd{font-size:12.5px;font-weight:700;text-align:end}
.series-headline .series-facts small{font-size:inherit;font-weight:inherit;padding-inline-start:4px}
/* The cover keeps its 5:7 size as a minimum and stretches (cropping slightly) when the column beside it is
   taller, so its bottom always meets the facts box. cqw = 1% of the header's width. */
.series-artwork{container-type:inline-size}
.series-cover{align-self:stretch;aspect-ratio:auto;height:auto;object-fit:cover;width:clamp(126px,40cqw,230px);min-height:clamp(176px,56cqw,322px)}
@media(max-width:700px){.series-cover{width:clamp(126px,40cqw,200px);min-height:clamp(176px,56cqw,280px)}}
@media(max-width:350px){.series-cover{width:112px;min-height:157px}}

/* Series header: title block sits a little below the cover's top edge; the admin-set Persian name follows it. */
.series-headline{padding-top:10px}
.series-fa-title{margin:6px 0 0;font-size:14px;font-weight:600;line-height:1.6;color:var(--series-muted);text-align:right;overflow-wrap:anywhere}
@media(max-width:700px){.series-headline{padding-top:8px}.series-fa-title{font-size:13px;margin-top:4px}}
/* Series status: coloured text, no dot (green انگویینگ, red پایان یافته, amber متوقف شده). */
:root{--status-text-ongoing:#4fe3a1;--status-text-finished:#ff6b78;--status-text-hiatus:#ffc24d}
html[data-theme="light"]{--status-text-ongoing:#0f9d63;--status-text-finished:#d93848;--status-text-hiatus:#b7790a}
.series-facts [class^="status-"]::before{content:none;display:none}
.series-facts .status-ongoing{color:var(--status-text-ongoing)}
.series-facts .status-finished{color:var(--status-text-finished)}
.series-facts .status-hiatus{color:var(--status-text-hiatus)}

/* Bookmark button (replaces the heart): outline marker, filled periwinkle-blue when the work is bookmarked. */
.series-actions .series-favorite svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.series-actions .series-favorite[aria-pressed="true"]{color:#7d9bff;border-color:#7d9bff66;background:#7d9bff17}
.series-actions .series-favorite[aria-pressed="true"] svg{fill:currentColor;stroke-width:1.2;filter:drop-shadow(0 2px 6px #5b7dff59)}
html[data-theme="light"] .series-actions .series-favorite[aria-pressed="true"]{color:#4f6fe6;border-color:#4f6fe64d;background:#4f6fe612}
/* Slider titles break naturally at the copy column's edge (no balancing), so short titles stay on one line. */
.feature-copy h1{text-wrap:wrap}
/* The copy column always spans up to its max width, so every slide wraps at the same left edge. */
[data-design="b"] .feature-copy{width:100%}
/* Kanit needs no extra tracking; the old 0.3px (from the Marcellus era) pushed near-fitting titles onto two lines. */
.feature-copy h1{letter-spacing:0}

/* Cover badges as clear glass: a faint tint, strong blur behind, light top edge. */
.catalog-card .cover-frame>.cover-status,.catalog-grid .catalog-card .cover-frame>.cover-status,html[data-theme="light"] .catalog-card .cover-frame>.cover-status,
[data-design="b"] .catalog-card .cover-frame>.cover-views{background:linear-gradient(180deg,#ffffff1f,#0a1a2c33);border:1px solid #ffffff38;border-top-color:#ffffff5c;backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 2px 8px #0000002e;text-shadow:0 1px 3px #000000cc}

/* Card titles: moonlit-water gradient (white to pale cyan), no glow or shadow. */
[data-design="b"] .catalog-card h3{background:linear-gradient(180deg,#ffffff 0%,#c9f3ff 45%,#6fd3f0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:none}
html[data-design="b"][data-theme="light"] .catalog-card h3{background:linear-gradient(180deg,#0d2a44 0%,#14507a 60%,#1784ad 100%);-webkit-background-clip:text;background-clip:text;filter:none}

/* Search toolbar: sort sits in the right corner, «clear filters» in the left; the result count gets its own
   quiet line just above the results. */
.catalog-toolbar{flex-wrap:wrap;justify-content:flex-start;row-gap:10px}
.catalog-toolbar>label{order:1}
.catalog-toolbar>#clear-filters{order:2;margin-inline-start:auto}
.catalog-toolbar>#catalog-count{order:3;flex-basis:100%;font-size:11.5px;font-weight:500;color:var(--muted)}

/* Series header: title and Persian name sit together, vertically centred in the space above the facts box
   (the two auto margins split that space evenly). */
.series-headline{justify-content:flex-start;padding-top:0}
.series-headline>h1{margin-top:auto}
.series-headline>.series-facts{margin-top:auto}
.series-fa-title{margin-top:8px}
@media(max-width:700px){.series-headline{padding-top:0}.series-fa-title{margin-top:6px}}

/* Rating summary: a single gold star, the average, then «از N نفر». Reads right-to-left in Persian order. */
.rating-summary{direction:rtl;gap:6px;align-items:center}
.rating-summary .rating-star{font-size:17px;line-height:1;color:#f4c45c;text-shadow:0 0 8px #f4c45c4d}
.rating-summary .rating-value{font-size:15px;font-weight:700;color:var(--ink)}
.rating-summary small{font-size:11.5px;color:var(--series-muted)}
html[data-theme="light"] .rating-summary .rating-star{color:#d99a1c;text-shadow:none}

/* Reader dock: «بعدی» at the right edge and «قبلی» at the left (list and download keep the middle). */
.reader-actions #next-chapter{order:-1}
.reader-actions #prev-chapter{order:5}
/* Shorter end-of-chapter area: just enough room under the buttons for the floating dock. */
.reader-end,body .reader-end{padding:26px 20px calc(100px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)))}
.reader-end p{margin:6px 0}
.reader-end .primary span{font-size:17px;line-height:1}

/* Compact cover badges: smaller type, padding, dot and eye icon so they cover less of the artwork. */
.catalog-card .cover-frame>.cover-status,.catalog-grid .catalog-card .cover-frame>.cover-status,
[data-design="b"] .catalog-card .cover-frame>.cover-status,[data-design="b"] .catalog-card .cover-frame>.cover-views{height:15px;line-height:15px;padding:0 5px;gap:3px;font-size:8.5px;top:5px}
[data-design="b"] .catalog-card .cover-frame>.cover-status{right:5px}
[data-design="b"] .catalog-card .cover-frame>.cover-views{left:5px}
.catalog-card .cover-frame>.cover-status::before{width:4px;height:4px;box-shadow:0 0 4px currentColor}
[data-design="b"] .cover-views svg{width:10px;height:10px}
@media(max-width:700px){
  .catalog-card .cover-frame>.cover-status,[data-design="b"] .catalog-card .cover-frame>.cover-status,[data-design="b"] .catalog-card .cover-frame>.cover-views{height:14px;line-height:14px;font-size:8px;padding:0 4px}
}

/* Settings rows are whole-row controls: the switch and the moon/sun toggle are only indicators. */
.profile-group .profile-row>span.preference-switch,.profile-group .profile-row>span.theme-toggle{flex:none;pointer-events:none}
.profile-row[role="switch"]{cursor:pointer;transition:background .15s}
.profile-row[role="switch"]:active{background:#6fd6ee12}
.profile-row .preference-switch{width:46px;height:28px;padding:3px;border-radius:999px}
.profile-row .preference-switch i{width:20px;height:20px}
.profile-row[aria-checked="true"]>.preference-switch{background:#69cde425;border-color:#70d5e666}
.profile-row[aria-checked="true"]>.preference-switch i{transform:translateX(18px);background:var(--sea)}
.profile-row>.theme-toggle{width:64px;flex-basis:64px;height:32px;padding:2px}
.profile-row>.theme-toggle .theme-option{width:28px;height:28px}
.profile-row>.theme-toggle .theme-thumb{top:2px;left:2px;width:28px;height:28px}
html[data-theme="light"] .profile-row>.theme-toggle .theme-thumb{transform:translateX(32px)}

/* Toast: quick slide in and fade out. */
#toast:not([hidden]){animation:toast-in .18s ease-out}
#toast.leaving{animation:toast-out .18s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toast-out{to{opacity:0;transform:translate(-50%,6px)}}
@media(prefers-reduced-motion:reduce){#toast:not([hidden]),#toast.leaving{animation:none}}

/* ===== Liquid Glass (after Apple's HIG, iOS 26) — experimental, self-contained block; delete it to revert.
   Only the floating control layer gets glass: header controls, reader dock and toasts (the tab bar keeps its
   original look by request). Content (cards,
   covers) stays solid. "Regular" variant: blur + saturation + a slight luminosity lift keep labels legible; a
   bright top rim, faint lower rim and soft sheen stand in for refraction, which browsers can't render portably
   (iOS Telegram uses WebKit). Becomes opaque with Reduce Transparency. */
:root{--lg-tint:rgba(14,30,48,.44);--lg-rim:rgba(255,255,255,.16);--lg-rim-top:rgba(255,255,255,.38);--lg-sheen:rgba(255,255,255,.22);--lg-lens:rgba(255,255,255,.13);--lg-shadow:0 12px 32px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.22)}
html[data-theme="light"]{--lg-tint:rgba(255,255,255,.52);--lg-rim:rgba(255,255,255,.75);--lg-rim-top:rgba(255,255,255,1);--lg-sheen:rgba(255,255,255,.7);--lg-lens:rgba(255,255,255,.75);--lg-shadow:0 12px 30px rgba(27,59,90,.16),0 2px 6px rgba(27,59,90,.1)}
#toast,.site-header .header-menu,.site-header .theme-toggle{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 55%,rgba(255,255,255,.05)),var(--lg-tint);
  backdrop-filter:blur(18px) saturate(180%) brightness(1.06);-webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.06);
  border:1px solid var(--lg-rim);box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 20px rgba(255,255,255,.04),var(--lg-shadow)}
/* Header controls: same glass, and a 44pt-class hit area around the small buttons. */
.site-header .header-menu,.site-header .theme-toggle{position:relative}
.site-header .header-menu::after,.site-header .theme-toggle::after{content:"";position:absolute;inset:-5px}
.site-header .theme-toggle .theme-thumb{background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 6px rgba(0,0,0,.25)}
html[data-theme="light"] .site-header .theme-toggle .theme-thumb{background:#fff}
/* Reader dock keeps its reading-theme tint (night/day/sepia) but gains the glass rim and sheen. */
.reader-nav{border-color:var(--lg-rim);box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 -1px 0 rgba(255,255,255,.05),var(--lg-shadow);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%)}
/* Toasts are transient glass with normal text colour. */
#toast{color:var(--ink);font-weight:600}
@media(prefers-reduced-transparency:reduce){
  #toast,.site-header .header-menu,.site-header .theme-toggle,.reader-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0f1d2e}
  html[data-theme="light"] #toast,html[data-theme="light"] .site-header .header-menu,html[data-theme="light"] .site-header .theme-toggle{background:#f4f9fc}
}