/* KTR MANHWA — "Ink + Light" design system (qa/DESIGN_V2_FINAL.md), mobile-first: ink surfaces, paper text, KTR red as
   the hanko seal + the one primary action, hard "misprint" shadows (never blur), static masked screentone / speed lines.
   Media vocabulary (DESIGN_V2_FINAL 3.8):
     phone      (max-width:640px)            tablet  (min-width:641px) and (max-width:1023px)
     desktop    (min-width:1024px)           wide    (min-width:1600px)        xwide (min-width:2200px)
     land-short (orientation:landscape) and (max-height:500px)  [+ and (max-width:1023px) to exclude desktop windows]
     spread     (min-width:1024px), (orientation:landscape) and (min-width:641px), (orientation:landscape) and (max-height:500px)
     carousel-hero = NOT spread (phones + portrait tablets); JS: !matchMedia(SPREAD).matches
     fine       (hover:hover) and (pointer:fine)  = html.is-fine          calm (JS KTR.calm()) = html.is-calm
   FROZEN-MODAL SAFETY (3.9): the pay/auth/chat sheets reuse .btn .btn-r .btn-g .btn-w .logo .ic .inp .sheet .mbody .sclose
   h2 p. Never put pseudo-elements, text-transform, filter, transform or outline on those bare selectors: scope them
   (:is(main,.nav,.kmodal) .btn-r:hover …), keep specificity ≤ (0,3,0) and stay ABOVE the FROZEN block (always last).
   No backdrop blur, blur filters, blend-mode layers or colour mixing anywhere outside the FROZEN block (3.6, 8.1). */

/* fonts: Manrope variable 200–800, self-hosted, 4 subsets. Pages preload cyrillic, cyrillic-ext, latin; latin-ext (₮)
   downloads only when one of its glyphs is on the page. */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/manrope-latin.woff2) format('woff2');
  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}
/* metric-matched fallback (qa/wp_a/probes/fallback_probe.py: ±2% width, same line count), so the swap never re-wraps.
   Two faces: synthetic bold Arial is 7% narrower than Manrope 700 (regular tuned at 500, bold at 700). */
@font-face{font-family:'Manrope Fallback';font-style:normal;font-weight:200 599;
  src:local('Arial'),local('ArialMT'),local('Roboto'),local('Roboto-Regular'),local('Helvetica Neue'),local('HelveticaNeue');
  size-adjust:103.8%;ascent-override:102.7%;descent-override:28.9%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';font-style:normal;font-weight:600 800;
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold'),local('Helvetica Neue Bold'),local('HelveticaNeue-Bold');
  size-adjust:99.6%;ascent-override:107%;descent-override:30.1%;line-gap-override:0%}

/* ===== TOKENS (existing names re-mapped; new ones added) ===== */
:root{
  color-scheme:dark;
  /* ink — surfaces */
  --bg:#0a0a0c; --bg2:#111114; --card:#18181c; --card2:#222228; --ink-4:#2c2c33;   /* ink-4: chip hover only */
  /* paper — text (17.27 / 9.93 / 6.15 : 1 on ink-0) */
  --tx:#f4efe6; --tx2:#bdb7ad; --tx3:#948f86; --tx-dis:#5f5b55; --on-light:#0a0a0c;
  /* seal red: --r is a FILL only (seal, the one primary action, progress, kicker square, misprint, active tick);
     --r2 is red TEXT on ink (6.01:1) */
  --r:#e50914; --r2:#ff4b52; --r-press:#c10711; --r-deep:#6a030a; --on-r:#fffaf3;
  --r-dim:rgba(229,9,20,.14); --r-tint:rgba(229,9,20,.14);
  /* status */
  --ok:#46d369; --ok-dim:rgba(70,211,105,.14); --warn:#f5a524; --qpay:#0f766e;
  --anime:#7c6cff; --anime-dim:rgba(124,108,255,.14);
  /* lines: paper at .10 / .18 / .42 (.42 = 3.68:1, the control-boundary minimum of WCAG 1.4.11) */
  --line:rgba(244,239,230,.10); --line2:rgba(244,239,230,.18); --line-ctl:rgba(244,239,230,.42);
  --focus:#f4efe6;
  /* chrome is fully opaque: no blur behind anything, and no page text smearing through the header or the tab bar */
  --nav-bg:#0a0a0c; --tab-bg:#111114; --plate:rgba(10,10,12,.82);
  /* ambient light (4.13). KTR.applyPal(el,s) writes the per-series values; these are the KTR ink-red fallback */
  --amb-a:#7f1a22; --amb-b:#3e2458; --amb-deep:#240f10; --amb-a-55:rgba(127,26,34,.55); --amb-b-28:rgba(62,36,88,.28);

  /* type (3.2). Display S/M/L follow data-len (KTR.lenClass): s ≤25 · m 26–40 · l >40 characters */
  --font:Manrope,'Manrope Fallback','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --fs-dS:clamp(30px,6.4vw + 7px,36px); --fs-dM:27px; --fs-dL:23px;
  --fs-h2:21px; --fs-kick:12px; --fs-card:14px; --fs-cmeta:12.5px; --fs-body:15px; --fs-metal:13px; --fs-btn:16px; --fs-tab:12px;
  --fs-display:var(--fs-dS); --fs-display-lg:var(--fs-dS);           /* legacy names still read by page CSS */
  --fs-20:20px; --fs-18:18px; --fs-16:16px; --fs-15:15px; --fs-14:14px; --fs-13:13px; --fs-12:12px; --fs-11:11px;

  /* space & layout (3.3): 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --gutter:16px; --nav-h:52px; --tab-h:66px;       /* tab bar: floating 58px panel + 8px gap */
  --sec:40px; --row-gap:12px;                     /* chapter gap · gap between row cards */
  /* page width + full-bleed rows (--sbw = classic scrollbar width, app.js): margin-inline -bleed-l/-bleed-r inside .wrap
     reaches both screen edges while the first card stays on the content edge */
  --wrap-max:1440px; --sbw:0px;
  --pad-l:max(var(--gutter),env(safe-area-inset-left,0px)); --pad-r:max(var(--gutter),env(safe-area-inset-right,0px));
  --bleed-l:max(var(--gutter),env(safe-area-inset-left,0px),calc((100vw - var(--sbw) - var(--wrap-max)) / 2 + var(--gutter)));
  --bleed-r:max(var(--gutter),env(safe-area-inset-right,0px),calc((100vw - var(--sbw) - var(--wrap-max)) / 2 + var(--gutter)));
  /* count-based rows (4.4): the cross axis always shows a partial card. --row-w = the .wrap content width */
  --row-n:2.2; --row-n-l:1.6; --row-n-c:2.5;
  --row-w:calc(min(100vw - var(--sbw), var(--wrap-max)) - var(--pad-l) - var(--pad-r));
  --row-card:calc((var(--row-w) - (var(--row-n) - 1) * var(--row-gap)) / var(--row-n));
  --row-card-l:calc((var(--row-w) - (var(--row-n-l) - 1) * var(--row-gap)) / var(--row-n-l));
  --cont-card:72vw;
  --rank-col:44px; --rank-col-2d:72px; --rank-fs:64px;
  /* ranked rows: panel = a row card; ≥1024 sized from --row-n-r cards over first card -> screen edge (.42 peeks) */
  --row-vis:calc(var(--row-w) + var(--bleed-r));
  --row-card-r:var(--row-card);

  /* radii (3.4): panels are sharp. pill = round icon buttons only */
  --rad-xs:2px; --rad-sm:4px; --rad-md:6px; --rad-pill:999px;
  /* depth (3.5): hard offset "misprint" shadows. --shadow-* stay for page CSS written before v2 only */
  --mis-r:3px 3px 0 var(--r); --mis-deep:3px 3px 0 var(--r-deep);
  --mis-hover:5px 5px 0 var(--r); --mis-hover-deep:5px 5px 0 var(--r-deep);
  --mis-card:4px 4px 0 var(--r); --mis-panel:6px 6px 0 var(--r);
  --mis-float:4px 4px 0 rgba(0,0,0,.55);                  /* always with a 1px --line2 edge */
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 10px 30px rgba(0,0,0,.45); --shadow-xl:0 24px 60px rgba(0,0,0,.6);
  /* textures (3.6): zero requests */
  --tone:radial-gradient(rgba(244,239,230,.13) .9px,transparent 1.35px) 0 0/7px 7px,radial-gradient(rgba(244,239,230,.13) .9px,transparent 1.35px) 3.5px 3.5px/7px 7px;
  --tone-ph:radial-gradient(rgba(244,239,230,.06) .7px,transparent 1px) 0 0/5px 5px,radial-gradient(rgba(244,239,230,.06) .7px,transparent 1px) 2.5px 2.5px/5px 5px;
  /* motion (3.7): transform + opacity only (box-shadow only on a button press); linear only for time progress */
  --dur-1:120ms; --dur-2:200ms; --dur-3:280ms; --dur-4:420ms; --dur-amb:600ms; --dur-out:220ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1); --ease-wipe:cubic-bezier(.87,0,.13,1);
  /* z-index map (no other values) */
  --z-player:45; --z-chipbar:50; --z-nav:60; --z-search:80; --z-tab:85; --z-modal:100; --z-toast:120;
  /* KTR logotype (icon.svg path): seal red = the header logotype before KTR.mount() (app shell, see HEADER) */
  --ktr-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274 100'%3E%3Cpath fill='%23e50914' d='M0 0 L20 0 L20 100 L0 100Z M20 38 L55 0 L84 0 L20 70Z M37.7 50.6 L54.7 32.06 L84 100 L59 100Z M96 0 L180 0 L180 20 L96 20Z M128 0 L148 0 L148 100 L128 100Z M192 0 L212 0 L212 100 L192 100Z M206 0 H237 A33 33 0 0 1 237 66 H206 Z M212 46 H236 A13 13 0 0 0 236 20 H212 Z M227.8 60 L250.8 60 L273 100 L250 100Z'/%3E%3C/svg%3E");
  /* KTR logotype (icon.svg path), paper at 20%: broken-cover placeholder */
  --ktr-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274 100'%3E%3Cpath fill='%23f4efe6' fill-opacity='.2' d='M0 0 L20 0 L20 100 L0 100Z M20 38 L55 0 L84 0 L20 70Z M37.7 50.6 L54.7 32.06 L84 100 L59 100Z M96 0 L180 0 L180 20 L96 20Z M128 0 L148 0 L148 100 L128 100Z M192 0 L212 0 L212 100 L192 100Z M206 0 H237 A33 33 0 0 1 237 66 H206 Z M212 46 H236 A13 13 0 0 0 236 20 H212 Z M227.8 60 L250.8 60 L273 100 L250 100Z'/%3E%3C/svg%3E");
}
@media (max-width:359px){:root{--fs-dS:24px;--fs-dM:22px;--fs-dL:20px;--fs-h2:19px;--fs-kick:11px;--fs-cmeta:12px;--fs-btn:15px;--fs-tab:11px}}
@media (min-width:641px){:root{--gutter:24px;--nav-h:56px;--sec:52px;--row-gap:14px;
  --row-n:3.3;--row-n-l:2.3;--row-n-c:2.5;--cont-card:calc((var(--row-w) - (var(--row-n-c) - 1) * var(--row-gap)) / var(--row-n-c));
  --rank-col:56px;--rank-col-2d:92px;--rank-fs:80px;
  --fs-dS:44px;--fs-dM:36px;--fs-dL:30px;--fs-h2:26px;--fs-cmeta:13px;--fs-body:16px;--fs-metal:14px}}
@media (min-width:1024px){:root{--gutter:32px;--nav-h:64px;--tab-h:0px;--sec:64px;--row-gap:16px;
  --row-n:4.3;--row-n-l:3.25;--row-n-c:3.4;--rank-col:76px;--rank-col-2d:124px;--rank-fs:104px;
  --row-n-r:3.42;--row-card-r:calc((var(--row-vis) + var(--row-gap)) / var(--row-n-r) - var(--row-gap) - var(--rank-col));
  --fs-dS:clamp(48px,3.4vw,60px);--fs-dM:clamp(38px,2.6vw,48px);--fs-dL:clamp(32px,2vw,40px);--fs-h2:30px;--fs-card:15px}}
@media (min-width:1280px){:root{--row-n:5.3;--row-n-l:4.25;--row-n-c:4.3;--row-n-r:4.42}}
/* wide tier (big monitors): 1920 wrap, fluid gutter, 72px header, larger type. Below 1600 nothing changes. */
@media (min-width:1600px){:root{--wrap-max:1920px;--gutter:clamp(32px,3vw,64px);--nav-h:72px;--sec:80px;--row-gap:20px;
  --row-n:6.3;--row-n-l:5.25;--row-n-c:4.6;--row-n-r:5.42;--rank-col:84px;--rank-col-2d:140px;--rank-fs:124px;
  --fs-dS:clamp(60px,3.3vw,84px);--fs-dM:58px;--fs-dL:46px;--fs-h2:34px;--fs-kick:13px;--fs-card:16px;--fs-cmeta:14px;
  --fs-body:17px;--fs-metal:15px;--fs-btn:17px}}
@media (min-width:2200px){:root{--row-n:7.3;--row-n-l:6.25;--row-n-c:5.2;--row-n-r:6.42}}
/* short landscape (phones sideways): 52px header that scrolls away, 48px floating tab bar, compact type */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){:root{--gutter:16px;--nav-h:52px;--tab-h:54px;--sec:40px;
  --row-n:4.2;--row-n-l:3.2;--row-n-c:3.3;--rank-fs:64px;--rank-col:48px;--rank-col-2d:76px;
  --fs-dS:24px;--fs-dM:22px;--fs-dL:20px;--fs-h2:21px}}

/* ===== BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:16px;font-weight:500;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
main{flex:1}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--r);color:var(--on-r)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* focus handed back by script after a touch session (app.js _srReturnFocus): no ring until the next key press */
.is-quiet:focus-visible{outline:none}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding-inline:var(--pad-l) var(--pad-r)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}

/* icons (sprite injected by KTR.mount; KTR.icon(name,size)) */
.ic{width:24px;height:24px;flex-shrink:0;display:inline-block;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-12{width:12px;height:12px}.ic-14{width:14px;height:14px}.ic-16{width:16px;height:16px}.ic-18{width:18px;height:18px}
.ic-20{width:20px;height:20px}.ic-24{width:24px;height:24px}.ic-28{width:28px;height:28px}.ic-32{width:32px;height:32px}.ic-40{width:40px;height:40px}

/* ---------- type scale (3.2). Display titles are uppercase via CSS; data stays as written ---------- */
.t-display{font-size:var(--fs-dS);line-height:1.1;font-weight:800;letter-spacing:-.025em;text-transform:uppercase;
  text-wrap:balance;overflow-wrap:anywhere}
.t-display[data-len="m"]{font-size:var(--fs-dM)}
.t-display[data-len="l"]{font-size:var(--fs-dL);letter-spacing:-.015em}
.t-h2{font-size:var(--fs-h2);line-height:1.15;font-weight:800;letter-spacing:-.015em}
.t-sheet{font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.t-h3{font-size:16px;line-height:1.35;font-weight:700}
.t-body{font-size:var(--fs-body);line-height:1.6;font-weight:500;color:var(--tx2);max-width:60ch}
.t-card{font-size:var(--fs-card);line-height:1.35;font-weight:600}
.t-row{font-size:15px;line-height:1.3;font-weight:700}
.t-meta{font-size:var(--fs-metal);line-height:1.4;font-weight:700;color:var(--tx2);font-variant-numeric:tabular-nums}
.t-meta3{font-size:var(--fs-metal);line-height:1.4;font-weight:700;color:var(--tx3);font-variant-numeric:tabular-nums}
.t-tab{font-size:var(--fs-tab);line-height:1.2;font-weight:700}
.t-caps{font-size:11px;line-height:1.2;font-weight:800;text-transform:uppercase;letter-spacing:.08em}

/* ---------- textures (3.6): static, masked, zero requests ---------- */
/* screentone: a 45° dot lattice, masked to 0 over its area (override the fade with --tone-mask) */
.tex-tone{position:absolute;inset:0;pointer-events:none;background:var(--tone);
  -webkit-mask-image:var(--tone-mask,linear-gradient(180deg,#000,transparent));mask-image:var(--tone-mask,linear-gradient(180deg,#000,transparent))}
/* speed lines: two conic sweeps from --sx/--sy masked to a ring (hero, title ≥1024, membership, 404, empty; never under
   dense text) */
.tex-speed{position:absolute;inset:0;pointer-events:none;--sx:72%;--sy:40%;
  background:repeating-conic-gradient(from 0deg at var(--sx) var(--sy),rgba(244,239,230,.075) 0 .45deg,transparent .45deg 3.1deg),
    repeating-conic-gradient(from 1.4deg at var(--sx) var(--sy),rgba(244,239,230,.05) 0 .25deg,transparent .25deg 4.7deg);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at var(--sx) var(--sy),transparent 0 26%,#000 72%);
  mask-image:radial-gradient(ellipse 70% 80% at var(--sx) var(--sy),transparent 0 26%,#000 72%)}

/* ===== BUTTONS (3.5): bare classes use only properties the FROZEN block resets; transforms under :is(main,.nav,.kmodal).
   .btn-r the ONE primary action per screen · .btn-w paper + red misprint · .btn-g ghost · .btn-t text · .btn-icon ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;
  border:0;border-radius:var(--rad-sm);font-family:var(--font);font-size:var(--fs-btn);font-weight:800;line-height:1.2;letter-spacing:.01em;
  white-space:nowrap;flex-shrink:0;cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:transform var(--dur-4) var(--ease-pop),box-shadow var(--dur-4) var(--ease-pop),background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.btn-r{background:var(--r);color:var(--on-r);box-shadow:var(--mis-deep)}
.btn-w{background:var(--tx);color:var(--on-light);box-shadow:var(--mis-r)}
.btn-g{background:rgba(244,239,230,.04);color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line-ctl)}
.btn-t{background:transparent;color:var(--tx2);font-size:15px;font-weight:700;min-height:44px;padding:0 8px}
.btn-icon{background:transparent;color:var(--tx);width:48px;height:48px;min-height:48px;padding:0;border-radius:var(--rad-pill)}
.btn-block{display:flex;width:100%}
.btn-lg{min-height:52px;padding:0 26px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn-r[disabled],.btn-w[disabled]{background:var(--ink-4);color:var(--tx-dis);box-shadow:none;opacity:1}
.btn.is-loading{pointer-events:none}
@media (hover:hover) and (pointer:fine){
  :is(main,.nav,.kmodal) .btn-r:hover,:is(main,.nav,.kmodal) .btn-w:hover{transform:translate(-1px,-1px)}
  .btn-r:hover{background:#f0121d;box-shadow:var(--mis-hover-deep)}
  .btn-w:hover{box-shadow:var(--mis-hover)}
  .btn-g:hover{background:rgba(244,239,230,.09);box-shadow:inset 0 0 0 1.5px var(--tx2)}
  .btn-t:hover{color:var(--tx)}
  .btn-icon:hover{background:rgba(244,239,230,.07)}
  .btn-icon{width:44px;height:44px;min-height:44px}
}
/* press: the panel is pushed into its own shadow (80ms); ghosts and icons shrink */
:is(main,.nav,.kmodal) .btn:active{transform:scale(.97);transition-duration:80ms}
:is(main,.nav,.kmodal) .btn-r:active,:is(main,.nav,.kmodal) .btn-w:active{transform:translate(3px,3px)}
.btn-r:active{background:var(--r-press);box-shadow:0 0 0 var(--r-deep)}
.btn-w:active{background:#e4ddd1;box-shadow:0 0 0 var(--r)}
.btn-g:active{background:rgba(244,239,230,.10)}
.btn-t:active{color:var(--tx)}
.btn-icon:active{background:rgba(244,239,230,.10)}
:is(main,.nav,.kmodal) .btn[disabled]:active,:is(main,.nav,.kmodal) .btn[aria-disabled="true"]:active{transform:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){.btn{min-height:44px}.btn-lg{min-height:48px}}

/* ===== CATALOG PRIMITIVES (4.9): chips, segmented control, select ===== */
.pills{display:flex;gap:8px;flex-wrap:wrap}
.chip,.gpill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px;
  border-radius:var(--rad-xs);background:var(--bg2);border:1px solid var(--line-ctl);color:var(--tx2);
  font-family:var(--font);font-size:14px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.chip::before,.gpill::before{content:"";position:absolute;inset:-3px 0}       /* 40px chip (1px edge), 44px hit */
.chip:active,.gpill:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.chip:hover,.gpill:hover{background:var(--ink-4);color:var(--tx)}}
.chip.on,.gpill.on,.chip[aria-pressed="true"],.chip.on:hover,.gpill.on:hover{background:var(--tx);border-color:var(--tx);color:var(--on-light);box-shadow:2px 2px 0 var(--r)}
.chip[disabled],.gpill[disabled]{opacity:.4;cursor:not-allowed}
.chip-n{font-size:12px;font-weight:600;color:var(--tx3);font-variant-numeric:tabular-nums}
.chip.on .chip-n,.gpill.on .chip-n{color:rgba(10,10,12,.62)}

.seltab{display:inline-flex;max-width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--rad-sm);padding:3px;gap:3px}
.seltab button{min-height:44px;padding:0 16px;border:0;border-radius:var(--rad-xs);background:none;color:var(--tx2);
  font-family:var(--font);font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.seltab button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.seltab button:not(.on):hover{color:var(--tx);background:rgba(244,239,230,.06)}}
.seltab button.on,.seltab button[aria-pressed="true"]{background:var(--tx);color:var(--on-light);box-shadow:2px 2px 0 var(--r)}
@media (max-width:640px){
  .seltab{display:flex;width:100%}
  .seltab button{flex:1 1 auto;min-width:0;padding:0 8px;overflow:hidden;text-overflow:ellipsis}
}
select.sel{-webkit-appearance:none;appearance:none;min-height:44px;padding:0 38px 0 14px;
  background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bdb7ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px 16px;
  border:1px solid var(--line-ctl);border-radius:var(--rad-sm);color:var(--tx);font-family:var(--font);font-size:16px;font-weight:700;cursor:pointer}
select.sel option{background:var(--bg2);color:var(--tx)}
@media (min-width:1024px){select.sel{font-size:14px}}

/* ---------- badges (title/watch pages; never access badges on cards) ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:3px 8px;border-radius:var(--rad-xs);
  font-family:var(--font);font-size:11px;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.b-recap{background:var(--r-dim);color:var(--r2)}
.b-anime{background:var(--anime-dim);color:#a89dff}
.b-movie{background:rgba(255,176,32,.16);color:#ffc65c}
.b-free{background:var(--ok-dim);color:var(--ok)}
.b-lock{background:rgba(244,239,230,.08);color:var(--tx2)}
.b-member{background:var(--r);color:var(--on-r)}
.b-line{background:none;box-shadow:inset 0 0 0 1px var(--line-ctl);color:var(--tx2)}
.badge.on-art{background:var(--plate);color:var(--tx)}
.badge.on-art.b-free{color:var(--ok)}
.badge .ic{width:12px;height:12px}

/* ===== HEADER (4.1) — opaque ink; transparent gradient over art at the top of home / ambient pages ===== */
.nav{position:sticky;top:0;z-index:60;background-color:var(--nav-bg);padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid transparent;transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.nav.is-scrolled{border-bottom-color:var(--line)}
/* top-over-art: home and pages with an ambient header (body.has-amb) pull their first block under the header */
body[data-page="home"] .nav,body.has-amb .nav{background-image:linear-gradient(rgba(10,10,12,.78),rgba(10,10,12,0))}
body[data-page="home"] .nav:not(.is-scrolled),body.has-amb .nav:not(.is-scrolled){background-color:transparent;border-bottom-color:transparent}
/* CLS: hold the header's space until KTR.mount() inserts .nav; ambient pages pull their first block up (.pull-up) */
body:not(:has(>.nav)){padding-top:calc(var(--nav-h) + 1px + env(safe-area-inset-top,0px))}
/* boot hold: main is not painted before KTR.mount() + the first render (one task), so nothing shifts; shown after 1.5s
   anyway. Static markup opts out with <main data-boot="early">; nodes JS rewrites there take data-boot="hold". */
body:not(:has(>.nav))>main:not([data-boot="early"]),body:not(:has(>.nav)) [data-boot="hold"]{visibility:hidden;animation:kBoot 0s step-end 1.5s forwards}
@keyframes kBoot{to{visibility:visible}}
/* app shell: the logotype is printed where the real header's will sit until KTR.mount() (first paint needs CSS only) */
body:not(:has(>.nav))::before{content:"MANHWA";position:absolute;z-index:61;top:env(safe-area-inset-top,0px);left:0;right:0;
  --logo-h:18px;--logo-fs:10px;--logo-gap:7px;
  display:flex;align-items:center;max-width:var(--wrap-max);height:var(--nav-h);margin:0 auto;
  padding-left:calc(var(--pad-l) + var(--logo-h) * 2.74 + var(--logo-gap));
  background:var(--ktr-logo) no-repeat var(--pad-l) 50%/auto var(--logo-h);
  color:var(--tx);font-size:var(--logo-fs);font-weight:800;letter-spacing:.2em;line-height:1;pointer-events:none}
@media (min-width:641px){body:not(:has(>.nav))::before{--logo-h:20px;--logo-fs:11px}}
@media (min-width:1024px){body:not(:has(>.nav))::before{--logo-h:22px;--logo-fs:12px;--logo-gap:8px}}
@media (min-width:1600px){body:not(:has(>.nav))::before{--logo-h:24px}}
@media (max-width:359px){body:not(:has(>.nav))::before{--logo-h:17px;--logo-fs:9px;align-items:flex-start;
  padding:31.5px 0 0 var(--pad-l);background-position:var(--pad-l) 11.5px;letter-spacing:.07em}}   /* stacked lockup */
.pull-up{margin-top:calc(-1 * (var(--nav-h) + 1px + env(safe-area-inset-top,0px)));padding-top:calc(var(--nav-h) + 1px + env(safe-area-inset-top,0px))}
.nav-in{height:var(--nav-h);max-width:var(--wrap-max);margin:0 auto;display:flex;align-items:center;gap:4px;padding-inline:var(--pad-l) var(--pad-r)}
/* logo = SVG KTR logotype (red, currentColor) + «MANHWA». inline-flex + wrap: at 200% text MANHWA drops under the mark
   instead of overflowing. ≥44×44 hit area. */
.nav .logo{display:inline-flex;flex-wrap:wrap;align-items:center;align-content:center;column-gap:7px;row-gap:3px;min-height:44px;min-width:44px;
  flex-shrink:0;line-height:1;color:var(--r);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.logo-k{display:block;height:18px;width:auto;aspect-ratio:274/100;flex-shrink:0;overflow:visible}
.nav .logo span{color:var(--tx);font-size:10px;font-weight:800;letter-spacing:.2em;line-height:1}
.nav-links{display:none}
.nav-sp{flex:1;min-width:4px}
.nav-search{flex-shrink:0}

/* chat entry (class kept: .fb-fab, #fbBadge) — docked in the header, never covers content */
.fb-fab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;
  height:44px;min-width:44px;padding:0 10px;border:0;border-radius:var(--rad-pill);background:transparent;color:var(--tx);
  font-family:var(--font);font-size:15px;font-weight:700;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--dur-2) var(--ease-out)}
.fb-fab .ic{width:24px;height:24px}
.fb-fab .fb-txt{display:none}
.fb-fab:active{background:rgba(244,239,230,.10)}
@media (hover:hover) and (pointer:fine){.fb-fab:hover{background:rgba(244,239,230,.07)}}
.fb-badge{position:absolute;top:2px;right:2px;display:none;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--rad-pill);background:var(--r);color:var(--on-r);font-size:11px;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--bg)}

/* user area (#hbtns: frozen _renderUser, CSS only): at 200% text the label is clipped, not the header; the 3px clip
   margin keeps the ::after hit extension (40 -> 46px) */
.nav-user{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:4px}
.nav-user .btn{min-height:40px;max-width:38vw;padding:0 14px;font-size:15px;font-weight:700;border-radius:var(--rad-sm);
  overflow:clip;overflow-clip-margin:3px;text-overflow:ellipsis}
.nav-user .btn::after{content:"";position:absolute;inset:-3px}
/* Safari clips overflow:clip at the border box (no overflow-clip-margin): the button itself is the 44px target there */
@supports not (overflow-clip-margin:3px){.nav-user .btn{min-height:44px}}
.nav-user .btn-r{display:none}             /* «Бүртгүүлэх»: same Google flow as «Нэвтрэх» — one label in the header */
.nav-user .nav-login{display:inline-flex}  /* «Нэвтрэх» always visible when signed out */
.nav-user .btn-g:not(.nav-login){background:transparent;box-shadow:none;color:var(--tx2);padding:0 10px}
.uavatar{width:32px;height:32px;border-radius:50%;object-fit:cover;margin:0 4px;box-shadow:0 0 0 1px var(--line2)}
.uname{display:none}

/* ===== SEARCH (4.11): sheet ≤1023, dropdown ≥1024; result rows stay the FIRST links inside #sres ===== */
.search{display:none}
.search-bar{display:flex;align-items:center;gap:4px}
.search-field{position:relative;flex:1;min-width:0}
.search-field .sic{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;color:var(--tx3);pointer-events:none}
#q{display:block;width:100%;height:48px;padding:0 44px;background:var(--card);border:0;border-radius:var(--rad-sm);box-shadow:inset 0 0 0 1px var(--line-ctl);
  color:var(--tx);font-family:var(--font);font-size:16px;font-weight:600;line-height:1.3;outline:none;-webkit-appearance:none;appearance:none;
  transition:box-shadow var(--dur-2) var(--ease-out)}
#q::placeholder{color:var(--tx3);opacity:1}
#q:focus{box-shadow:inset 0 0 0 2px var(--tx)}
#q:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the open field's own 2px paper ring (17:1) is its focus indicator: no second ring around it */
.search.is-open #q:focus-visible{outline:none}
#q::-webkit-search-cancel-button,#q::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search-clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;background:none;color:var(--tx2);cursor:pointer;border-radius:var(--rad-pill);-webkit-tap-highlight-color:transparent}
.search.has-q .search-clear{display:inline-flex}
.sres{display:none}
@media (max-width:1023px){
  /* collapsed: #q itself is the 44px round search trigger in the header (tap → full-screen view, keyboard opens at once) */
  .search:not(.is-open){display:block;position:relative;flex-shrink:0;width:44px;height:44px}
  .search:not(.is-open) .search-field{width:44px;height:44px}
  .search:not(.is-open) .search-back,.search:not(.is-open) .search-clear{display:none}
  .search:not(.is-open) #q{width:44px;height:44px;padding:0;border:0;border-radius:var(--rad-pill);background:transparent;box-shadow:none;
    color:transparent;caret-color:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .search:not(.is-open) #q::placeholder{color:transparent}
  .search:not(.is-open) #q:active{background:rgba(244,239,230,.10)}
  .search:not(.is-open) .sic{left:10px;color:var(--tx)}
  .search:not(.is-open) .sic .ic{width:24px;height:24px}
  .search:not(.is-open) #q:focus-visible{outline-offset:-2px}   /* keyboard focus on the collapsed icon (it no longer opens the sheet) */
  .search.is-open{display:flex;flex-direction:column;position:fixed;inset:0;z-index:80;background:var(--bg2);padding-top:env(safe-area-inset-top,0px);
    animation:kFade var(--dur-2) var(--ease-out)}
  .search.is-open .search-bar{height:64px;flex-shrink:0;border-bottom:1px solid var(--line);
    padding-inline:max(4px,env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
  .search.is-open .sres{display:block;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:8px 0 calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 16px)}
  html.search-open,html.search-open body{overflow:hidden}
  /* on-screen keyboard up (html.kb-up, app.js _kbWire): the tab bar would ride on it. Keyboard down or a hardware one:
     the bar and its «Гишүүн» stay, as on LIVE */
  html.search-open.kb-up .tabbar{display:none}
  html.search-open.kb-up .search.is-open .sres{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
  /* the tab bar shows over the sheet (html.tb-on): the results scroller ends above it, rows never slide under the bar */
  html.search-open.tb-on .search.is-open .sres{margin-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding-bottom:16px}
}
@keyframes kFade{from{opacity:0}}
@media (min-width:1024px){
  .nav-search{display:none}
  .search{display:block;position:relative;width:min(320px,26vw);min-width:200px;flex-shrink:1;margin-left:8px}
  .search-back{display:none}
  #q{height:40px;padding:0 38px;font-size:15px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2)}
  #q:focus{box-shadow:inset 0 0 0 2px var(--tx)}
  #q:focus-visible{outline:none}
  .search-field .sic{left:11px}
  .search-clear{width:36px;height:36px}
  html.is-coarse #q{height:44px}                                /* touch laptops / big tablets in desktop layout */
  html.is-coarse .search-clear{width:44px;height:44px}
  .sres{position:absolute;top:calc(100% + 10px);left:0;width:420px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg2);border:1px solid var(--line2);border-radius:var(--rad-md);box-shadow:var(--mis-float);padding:6px 0}
  .sres.open{display:block}
}
/* section label = the chapter kicker (red square + uppercase + hairline rule): «■ ОДОО ТРЕНД ——», «■ 6 ИЛЭРЦ ——» */
.sr-sec{display:flex;align-items:center;gap:10px;padding:16px var(--gutter) 8px;font-size:var(--fs-kick);font-weight:800;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx2)}
.sr-sec::before{content:"";width:9px;height:9px;flex:none;background:var(--r);transform:rotate(8deg)}
.sr-sec::after{content:"";flex:1 1 16px;min-width:16px;height:1px;background:var(--line)}
.sr-sec b{margin-right:-4px;color:var(--r2);font-weight:800;font-variant-numeric:tabular-nums}
.sr-sec--more{margin-top:12px;padding-top:24px}          /* suggestions after a short result list (the sheet only) */
.sr-row{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:8px var(--gutter);color:var(--tx);-webkit-tap-highlight-color:transparent}
.sr-row:active{background:var(--card)}
.sr-row:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.sr-row:hover{background:var(--card)}}
/* rank numeral: outlined, like the ranked rows */
.sr-rank{width:26px;flex-shrink:0;text-align:center;font-size:20px;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.25px var(--tx2);font-variant-numeric:tabular-nums}
.sr-thumb{position:relative;width:96px;aspect-ratio:16/9;flex-shrink:0;border-radius:var(--rad-xs);overflow:hidden;background:var(--tone-ph),var(--card);
  outline:1px solid rgba(244,239,230,.12);outline-offset:-1px}
.sr-thumb img{width:100%;height:100%;object-fit:cover}
/* caption at thumbnail scale (≤136px frames, no size container): fixed 8px, one line. Hosts: .sr-thumb or .cap-xs */
.sr-thumb .cap,.cap-xs .cap,.sr-thumb .cap--tall.cap--n,.cap-xs .cap--tall.cap--n{display:flex;flex-direction:row;
  padding:.38em .6em .32em;font-size:8px;letter-spacing:.06em;white-space:nowrap}
.sr-thumb .cap--tall.cap--n>*+*,.cap-xs .cap--tall.cap--n>*+*{margin-left:.33em}
.sr-thumb .cap--tall.cap--n b,.cap-xs .cap--tall.cap--n b{order:0;margin-bottom:0;font-size:1em;line-height:1;letter-spacing:inherit}
.sr-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-t{font-size:15px;font-weight:700;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.sr-t mark{background:none;color:var(--tx);font-weight:800;box-shadow:inset 0 -2px 0 var(--r)}
.sr-m{font-size:13px;font-weight:600;line-height:1.4;color:var(--tx3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sr-empty{padding:32px var(--gutter) 8px;text-align:center}
.sr-empty .seal{--seal-s:64px;margin:0 auto 14px}
.sres .none{font-size:17px;font-weight:800;color:var(--tx)}
.sr-empty p{margin-top:4px;font-size:14px;color:var(--tx2);overflow-wrap:anywhere}
.sr-help{display:flex;justify-content:center;padding:8px var(--gutter) 16px}
.sr-help .btn-t{white-space:normal;text-align:center;color:var(--tx);text-decoration:underline;text-decoration-color:var(--r);text-decoration-thickness:2px;text-underline-offset:4px}
@media (min-width:1024px){
  .sr-row{min-height:64px;padding:6px 14px}
  .sr-thumb{width:96px}
  .sr-sec{padding:12px 14px 6px}
  .sr-sec--more{padding-top:18px}
}
/* portrait tablets (768–1023px sheet): bigger panels and type (COVER_SIZES.search matches) */
@media (min-width:641px) and (max-width:1023px) and (min-height:501px){
  .search.is-open .sr-row{min-height:96px;gap:18px;padding-block:10px}
  .search.is-open .sr-thumb{width:136px}
  .search.is-open .sr-thumb .cap{font-size:10px}
  .search.is-open .sr-t{font-size:17px}
  .search.is-open .sr-m{font-size:14px}
  .search.is-open .sr-rank{width:34px;font-size:26px;-webkit-text-stroke-width:1.5px}
  .search.is-open .sr-sec{padding-top:20px;padding-bottom:10px}
  .search.is-open .sr-sec--more{padding-top:32px}
}
/* phones sideways: two result columns (reading order 1 2 / 3 4); labels, empty state and help span both */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){
  .search.is-open .sres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;align-content:start;
    padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .search.is-open .sres>:not(.sr-row){grid-column:1 / -1}
}

/* ===== BOTTOM TAB BAR (4.2) — floating ink panel ≤1023 ===== */
.tabbar{position:fixed;z-index:85;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));
  bottom:max(8px,env(safe-area-inset-bottom,0px));display:flex;height:58px;
  background:var(--tab-bg);border-radius:var(--rad-md);box-shadow:inset 0 0 0 1px var(--line2),var(--mis-float)}
.tabbar a{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:var(--fs-tab);font-weight:700;line-height:1.2;color:var(--tx3);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color var(--dur-2) var(--ease-out)}
.tabbar a .ic{width:24px;height:24px;transition:transform var(--dur-3) var(--ease-pop)}
.tabbar a:active .ic{transform:scale(.88)}
.tabbar a:active{color:var(--tx)}
.tabbar a:focus-visible{outline-offset:-4px;border-radius:var(--rad-sm)}
.tabbar a.on{color:var(--tx)}
/* current item: a skewed red tick printed on the panel's top edge */
.tabbar a.on::before,html.search-open .tabbar a.tab-search::before{content:"";position:absolute;top:0;left:50%;width:26px;height:3px;margin-left:-13px;
  background:var(--r);transform:skewX(-24deg)}
html.search-open .tabbar a.on{color:var(--tx3)}
html.search-open .tabbar a.on::before{display:none}
html.search-open .tabbar a.tab-search{color:var(--tx)}
html.search-open .tabbar a.tab-search .ic{stroke-width:2.5}
@media (hover:hover) and (pointer:fine){.tabbar a:hover{color:var(--tx)}}
@media (min-width:641px){.tabbar{left:max(10px,calc(50% - 280px));right:max(10px,calc(50% - 280px))}}
@media (min-width:1024px){.tabbar{display:none}}
/* short landscape: 48px bar, icon + label in a row, centred ≤520px */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){
  .tabbar{height:48px;bottom:max(6px,env(safe-area-inset-bottom,0px));left:max(10px,env(safe-area-inset-left,0px),calc(50% - 260px));right:max(10px,env(safe-area-inset-right,0px),calc(50% - 260px))}
  .tabbar a{flex-direction:row;gap:8px}
}

/* ===== CARDS (4.5) — manga panels: 16:9, 4px radius, inner hairline, caption box top-left ===== */
.card{position:relative;display:block;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.card .cov{position:relative;aspect-ratio:16/9;border-radius:var(--rad-sm);overflow:hidden;background:var(--tone-ph),var(--card);
  container-type:inline-size;outline:1px solid rgba(244,239,230,.14);outline-offset:-1px;
  transition:transform var(--dur-4) var(--ease-pop),box-shadow var(--dur-4) var(--ease-pop),outline-color var(--dur-2) var(--ease-out)}
.card .cov img{width:100%;height:100%;object-fit:cover}
.card .cov.cov-portrait{aspect-ratio:2/3}
.card .cov .tag{position:absolute;top:6px;right:6px}
.card .cov .epn{display:none}
/* caption box: a narration box over the painted «PART n» badge (KTR.capHTML / capAttr). Default 31% × 21.4% top-left;
   per cover (KTR_CAP) --cap-w/--cap-h, .cap--r top-right · .cap--b bottom-left · .cap--br bottom-right · .cap--x at --cap-x
   on the edge · .cap--none. Words 4.2cqi (11px floor). Host: position:relative + container-type. */
.cap{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;justify-content:center;
  min-width:calc(var(--cap-w,31) * 1%);min-height:calc(var(--cap-h,21.4) * 1%);
  padding:.55em .8em .5em;border-radius:0 0 var(--rad-xs) 0;background:var(--tx);color:var(--on-light);
  font-size:11px;font-size:clamp(11px,4.2cqi,40px);font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
/* KTR.capHTML: number <b> and words <span> are flex items; a margin is the word space (no flex gap: old WebViews) */
.cap b{font-weight:inherit}
.cap--n>*+*{margin-left:.33em}
.cap--r{left:auto;right:0;border-radius:0 0 0 var(--rad-xs)}
.cap--b{top:auto;bottom:0;border-radius:0 var(--rad-xs) 0 0}
.cap--b.cap--br{left:auto;right:0;border-radius:var(--rad-xs) 0 0 0}
.cap--x{left:calc(var(--cap-x,0) * 1%);border-radius:0 0 var(--rad-xs) var(--rad-xs)}
.cap--x.cap--b{border-radius:var(--rad-xs) var(--rad-xs) 0 0}
.cap--none{display:none}
/* OWNER RULE 2026-09-24: no caption boxes over covers anywhere (capHTML returns ''); this also hides any leftover .cap
   markup (e.g. the empty poster patch) so every cover shows as painted, like the live site */
.cap{display:none!important}
/* …and no hanko seal stamped over the hero cover art either (final audit 2026-09-24, owner rule 2). The element stays
   in the DOM (index.html's hero script reads it), it is just never drawn. */
.hero-seal{display:none!important}
/* in the player a bottom box would sit under the control bar and its scrim (an ink patch there reads as a black slab on
   big players): the box steps aside while the bar is up; under the lock panel it stays the page's ink patch */
.pv-box:not(:has(.pv-panel.show)) .pv-poster .cap--b{visibility:hidden}
/* tall box (≥ 30% high: a big painted badge). Plain text (older page code): the words stack and scale with the box. */
.cap--tall{display:grid;grid-template-columns:min-content;align-content:center;justify-content:center;
  padding:.5em .62em;white-space:normal;text-align:center;font-size:11px;font-size:clamp(11px,calc(var(--cap-h,36) * .167cqi),56px)}
/* …with its number marked up (capHTML, .cap--n): a narration numeral, big over a small «ХЭСЭГ» (either word order),
   sized by the box height and capped under a desktop H1. Panels < 140px: one line like the neighbours. */
.cap--tall.cap--n{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.42em .72em .5em;
  white-space:nowrap;font-size:11px;font-size:clamp(11px,calc(var(--cap-h,36) * .105cqi),18px)}
.cap--tall.cap--n>*+*{margin-left:0}
.cap--tall.cap--n b{order:-1;display:block;margin-bottom:.06em;font-size:1.6em;font-size:clamp(1.6em,calc(var(--cap-h,36) * .36cqi),2.4em);
  line-height:.86;letter-spacing:-.02em}
@container (max-width:139px){
  .cap--tall.cap--n{flex-direction:row}
  .cap--tall.cap--n>*+*{margin-left:.33em}
  .cap--tall.cap--n b{order:0;margin-bottom:0;font-size:1em;line-height:1;letter-spacing:inherit}
}
/* panels < 150px: tighter padding keeps the 11px box in proportion and inside --cap-h (kim_ojin: above the title) */
@container (max-width:149px){.cap,.cap--tall.cap--n{padding:.42em .7em .38em}}
/* single big panels (≥ 320px): words follow the box HEIGHT (21.4% -> 4.2cqi), so a taller box is not a blank slab, and
   never smaller than the default; row cards stay under 320px with one caption size per row */
@container (min-width:320px){.cap:not(.cap--tall){font-size:clamp(11px,max(4.2cqi,calc(var(--cap-h,21.4) * .196cqi)),40px)}}
.card .t{margin-top:8px;font-size:var(--fs-card);font-weight:600;line-height:1.35;color:var(--tx);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.card .m{margin-top:2px;font-size:var(--fs-cmeta);font-weight:600;line-height:1.4;color:var(--tx3);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.card .m .ic{margin-right:4px;vertical-align:-2px}
.card .prog{margin-top:6px;height:4px;background:var(--line2);overflow:hidden}
.card .prog i{display:block;height:100%;background:var(--r)}
.card .cov .prog{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;height:4px;background:rgba(10,10,12,.7)}
.card:focus-visible{outline:none}
.card:focus-visible .cov{outline:2px solid var(--focus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .card:hover .cov{transform:translate(-2px,-2px);box-shadow:var(--mis-card);outline-color:rgba(244,239,230,.75)}
  .card:hover .cov img{transform:scale(1.045)}
  .card:focus-visible:hover .cov{outline-color:var(--focus)}
}
.card:active .cov{transform:scale(.97);box-shadow:none;transition-duration:100ms}
/* image reveal (KTR._in adds .is-in): screentone until loaded, logotype when broken. .01, not 0: Chrome then records LCP
   at the first paint after load, not at the end of the fade */
.cov img,.sr-thumb img,.tcov img,.backdrop img,.epi-th img{opacity:.01;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-4) var(--ease-pop)}
.cov img.is-in,.sr-thumb img.is-in,.tcov img.is-in,.backdrop img.is-in,.epi-th img.is-in{opacity:1}
/* loading sweep: on-screen loading frames only (.is-vis), 1.5s late, twice, then static (idle infinite sweeps cost ≈2s
   of main thread per 4s on a throttled phone) */
.cov::before,.sr-thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(244,239,230,0) 25%,rgba(244,239,230,.06) 50%,rgba(244,239,230,0) 75%);
  transform:translateX(-100%)}
.cov.is-vis::before,.sr-thumb.is-vis::before{animation:kSweep 1.6s var(--ease-inout) 1.5s 2}
.cov.is-in::before,.cov.is-broken::before,.sr-thumb.is-in::before,.sr-thumb.is-broken::before{content:none;animation:none}
@keyframes kSweep{to{transform:translateX(100%)}}
.cov.is-broken img,.sr-thumb.is-broken img,.epi-th.is-broken img{opacity:0}
.cov.is-broken::after,.sr-thumb.is-broken::after,.epi-th.is-broken::after{content:"";position:absolute;inset:0;background:var(--ktr-mark) center/44% auto no-repeat}
/* legacy trending numeral injected by old index.html: legible plate, small footprint */
.card .cov .rankbadge{position:absolute;left:6px;top:6px;min-width:32px;height:28px;padding:0 8px;border-radius:var(--rad-xs);
  background:var(--plate);color:var(--tx);font-family:var(--font);font-size:16px;font-weight:800;line-height:28px;text-align:center;
  -webkit-text-stroke:0;text-shadow:none;pointer-events:none;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--line2)}
.card .cov .rankbadge::before{content:"#";color:var(--tx2);font-weight:700;margin-right:1px}

/* large card (Кино): .card--l in .rowscroll--l (or any row that holds one) */
.card--l .t{font-size:calc(var(--fs-card) + 1px)}

/* ranked card: a giant numeral printed behind the panel's left edge (paper outline, tone fill, red misprint 5/4px) */
.card--rank{display:grid;grid-template-columns:var(--rank-col) minmax(0,1fr);width:calc(var(--rank-col) + var(--row-card-r))}
.card--rank.is-2d{grid-template-columns:var(--rank-col-2d) minmax(0,1fr);width:calc(var(--rank-col-2d) + var(--row-card-r))}
.card--rank .card-col{grid-column:2;grid-row:1;position:relative;z-index:1;min-width:0}
.rank-n{grid-column:1;grid-row:1;justify-self:end;align-self:start;position:relative;z-index:0;
  margin-top:calc(var(--row-card-r) * .5625 - var(--rank-fs) * .76 + 2px);margin-right:calc(var(--rank-fs) * -.14);
  font-family:var(--font);font-size:var(--rank-fs);font-weight:800;line-height:.76;letter-spacing:-.05em;
  -webkit-user-select:none;user-select:none;pointer-events:none;font-variant-numeric:tabular-nums}
/* printed numeral: <span class="num-print" data-n="4"><span>4</span></span>; the red ::before copy sits under it */
.rank-n>span,.num-print>span{position:relative;display:block;color:transparent;-webkit-text-stroke:2px var(--tx);
  background:radial-gradient(var(--tx) 1.05px,transparent 1.5px) 0 0/5px 5px;-webkit-background-clip:text;background-clip:text}
.rank-n::before,.num-print::before{content:attr(data-n);position:absolute;left:5px;top:4px;z-index:-1;color:var(--r);-webkit-text-stroke:0}
.num-print{position:relative;z-index:0;display:inline-block}
.num-print::before{left:.04em;top:.03em}

/* continue card: the EPISODE thumbnail, caption «ХЭСЭГ N», 4px red progress, 36px play glyph */
.card--cont .t{-webkit-line-clamp:1}
.card--cont .m{color:var(--tx2)}
.card--cont .cov .cplay{position:absolute;right:8px;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:rgba(10,10,12,.72);box-shadow:inset 0 0 0 1.5px rgba(244,239,230,.85);color:var(--tx);pointer-events:none}
.card--cont .cov .cplay .ic{width:16px;height:16px;margin-left:2px}
.card--cont .cov .cap--b{bottom:4px}           /* a bottom caption sits on the progress bar, not under it */

/* "see all" tile at the end of a row: ink tone panel + paper arrow square */
.card-end{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:16/9;
  overflow:hidden;border-radius:var(--rad-sm);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);color:var(--tx);
  font-size:14px;font-weight:700;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-4) var(--ease-pop)}
.card-end::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tone);
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 75%);mask-image:linear-gradient(135deg,#000,transparent 75%)}
.card-end .ic{width:44px;height:44px;padding:10px;border-radius:var(--rad-sm);background:var(--tx);color:var(--on-light);stroke-width:2.5;
  box-shadow:var(--mis-r);transition:transform var(--dur-4) var(--ease-pop),box-shadow var(--dur-4) var(--ease-pop)}
@media (hover:hover) and (pointer:fine){.card-end:hover .ic{transform:translate(-1px,-1px);box-shadow:var(--mis-hover)}}
.card-end:active{transform:scale(.97);transition-duration:100ms}

/* ===== ROWS (4.4) + CHAPTER TITLE CARDS (4.3) ===== */
.row{margin:var(--sec) 0}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.row-head h2{display:block;min-width:0;font-size:var(--fs-h2);font-weight:800;line-height:1.15;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-head .more{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 8px;margin-right:-8px;flex-shrink:0;
  font-size:14px;font-weight:700;color:var(--tx2);white-space:nowrap;transition:color var(--dur-2) var(--ease-out)}
.row-head .more .ic{transition:transform var(--dur-3) var(--ease-pop)}
.row-head .more:active{color:var(--tx)}
@media (hover:hover) and (pointer:fine){.row-head .more:hover{color:var(--tx)}.row-head .more:hover .ic{transform:translateX(3px)}}
/* chapter title card: kicker «■ БҮЛЭГ 02 ———» over the H2 + «Бүгдийг үзэх ›», optional sub line (KTR.chead) */
.chead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:16px;margin-bottom:14px}
.chead .kick{grid-column:1 / -1;margin-bottom:8px}
.chead .kick::after{content:"";flex:1;min-width:16px;height:1px;background:var(--line)}
.chead h2{grid-column:1}
.chead .more{grid-column:2;align-self:center;margin-block:-8px}
.chead .sub{grid-column:1 / -1;margin-top:6px;font-size:13px;font-weight:600;line-height:1.4;color:var(--tx3)}
/* kicker: 9×9 red square rotated 8°, uppercase +0.16em, red number */
.kick{display:flex;align-items:center;gap:10px;font-size:var(--fs-kick);font-weight:800;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2)}
.kick::before{content:"";width:9px;height:9px;flex:none;background:var(--r);transform:rotate(8deg)}
.kick>*{white-space:nowrap}
.kick b{color:var(--r2);font-weight:800}
@media (min-width:1024px){.chead{margin-bottom:18px}.chead .kick{margin-bottom:12px}}
@media (max-width:374px){.chead{column-gap:12px}}   /* one-line heads at 360: «Шинээр нэмэгдсэн» + «Бүгдийг үзэх ›» */

.rowscroll{display:grid;grid-auto-flow:column;grid-auto-columns:var(--row-card);gap:var(--row-gap);align-items:start;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--bleed-l)) calc(-1 * var(--bleed-r));padding-inline:var(--bleed-l) var(--bleed-r);
  scroll-padding-inline:var(--bleed-l) var(--bleed-r);padding-top:8px;margin-top:-8px;padding-bottom:8px;
  scroll-snap-type:x proximity;scrollbar-width:none}
.rowscroll::-webkit-scrollbar{display:none}
.rowscroll>*{scroll-snap-align:start}
/* row variants: class OR :has() in SEPARATE rules (a list holding :has() is dropped whole by WebView < 105, iOS < 15.4) */
.rowscroll--rank{grid-auto-columns:max-content}
.rowscroll:has(>.card--rank){grid-auto-columns:max-content}
.rowscroll--rank>:not(.card--rank){width:var(--row-card-r)}
.rowscroll:has(>.card--rank)>:not(.card--rank){width:var(--row-card-r)}
.rowscroll--l{grid-auto-columns:var(--row-card-l)}
.rowscroll:has(>.card--l){grid-auto-columns:var(--row-card-l)}
.rowscroll--cont{grid-auto-columns:var(--cont-card)}
.rowscroll:has(>.card--cont){grid-auto-columns:var(--cont-card)}
/* no :has() and no class: a ranked card fits the normal column instead of overlapping the next */
@supports not selector(:has(a)){
  .rowscroll:not(.rowscroll--rank)>.card--rank{--row-card-r:calc(var(--row-card) - var(--rank-col));width:auto}
  .rowscroll:not(.rowscroll--rank)>.card--rank.is-2d{--row-card-r:calc(var(--row-card) - var(--rank-col-2d))}
}
@media (hover:hover) and (pointer:fine){
  .rowscroll{scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent;padding-bottom:12px}
  .rowscroll::-webkit-scrollbar{display:block;height:6px}
  .rowscroll::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:3px}
}

/* ---------- catalog grid (4.9): 2 · 3 (≥600) · 4 (≥1024, land-short) · 5 (≥1280) · 6 (≥1600) · 7 (≥2200) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;align-items:start}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}}
@media (min-width:1024px),(orientation:landscape) and (max-height:500px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.grid{gap:32px 20px}}
@media (min-width:1280px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1600px){.grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 20px}}
@media (min-width:2200px){.grid{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* ---------- page head ---------- */
.phead{padding:24px 0 8px}
.phead h1{font-size:var(--fs-display);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.phead p{margin-top:4px;font-size:14px;line-height:1.5;color:var(--tx2)}

/* ===== EPISODE INDEX (4.7): title rows (a.ep.epi) + watch list (.wep.epi). [number][thumb ≥641][body][end ≥44px];
   [data-state] free · locked · member · progress · current · unavailable ===== */
.eplist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ep{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad-sm);font-size:15px;font-weight:700;color:var(--tx);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.ep:active{background:var(--card2)}
@media (hover:hover) and (pointer:fine){.ep:hover{border-color:var(--line2);background:var(--card2)}}
.ep.free{border-color:rgba(70,211,105,.35)}
.ep.on{border-color:var(--r);background:var(--r-tint)}
.ep .lk{margin-left:auto;flex-shrink:0;font-size:13px;color:var(--tx3)}
.ep.free .lk{color:var(--ok)}
.ep .lk.paid{color:var(--tx3)}

.epilist{display:flex;flex-direction:column;gap:0}
.epi{position:relative;display:grid;grid-template-columns:36px auto minmax(0,1fr) auto;grid-template-areas:"num th body end";align-items:center;
  width:100%;min-height:64px;padding:10px 4px 10px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;
  color:var(--tx);font-family:var(--font);font-size:15px;font-weight:700;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-1) var(--ease-out)}
.epilist>.epi:first-child,.weps>.epi:first-child,.vol-h+.epi{border-top-color:transparent}
.epi:active{background:var(--card)}
@media (hover:hover) and (pointer:fine){.epi:hover{background:rgba(244,239,230,.035)}}
.epi:focus-visible{outline-offset:-2px}
.epi-num{grid-area:num;display:block;min-width:0;padding:0;background:none;text-align:right;
  font-size:18px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--tx3);font-variant-numeric:tabular-nums}
.epi-th{grid-area:th;display:none;position:relative;width:152px;aspect-ratio:16/9;margin-left:12px;border-radius:var(--rad-xs);overflow:hidden;
  background:var(--tone-ph),var(--card);outline:1px solid rgba(244,239,230,.14);outline-offset:-1px}
.epi-th img{width:100%;height:100%;object-fit:cover}
.epi-body{grid-area:body;min-width:0;padding-left:12px}
.epi-title{display:block;font-size:15px;font-weight:700;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.epi-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:3px;font-size:12px;font-weight:700;line-height:1.35;color:var(--tx3)}
.epi-end{grid-area:end;justify-self:end;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:12px;
  font-size:13px;font-weight:700;color:var(--tx3);white-space:nowrap}
.epi-prog{grid-area:body;position:absolute;left:12px;right:0;bottom:-6px;height:3px;background:var(--line2);overflow:hidden}
.epi-prog i{display:block;height:100%;background:var(--r)}
/* progress / current: red print bar on the left, red tint fading right, red number */
.epi[data-state="progress"],.epi[data-state="current"]{background:linear-gradient(90deg,var(--r-tint),rgba(229,9,20,0) 70%)}
.epi[data-state="progress"]::before,.epi[data-state="current"]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:var(--r)}
.epi[data-state="progress"] .epi-num,.epi[data-state="current"] .epi-num{color:var(--r2)}
.epi[data-state="progress"] .epi-sub{color:var(--r2)}
/* member / progress: 44px round play ring */
.epi[data-state="member"] .epi-end,.epi[data-state="progress"] .epi-end{justify-content:center;width:44px;height:44px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--line-ctl);color:var(--tx);transition:transform var(--dur-3) var(--ease-pop),background-color var(--dur-2) var(--ease-out)}
.epi[data-state="member"] .epi-end .ic,.epi[data-state="progress"] .epi-end .ic{width:16px;height:16px;margin-left:2px}
@media (hover:hover) and (pointer:fine){.epi[data-state="member"]:hover .epi-end,.epi[data-state="progress"]:hover .epi-end{transform:scale(1.08)}}
.epi[data-state="current"] .epi-end{color:var(--r2)}
/* locked: dimmed number + thumb, lock + «Гишүүнд» in red text */
.epi[data-state="locked"] .epi-num{color:var(--tx3)}
.epi[data-state="locked"] .epi-end{color:var(--r2)}
.epi[data-state="locked"] .epi-th img{filter:grayscale(.5) brightness(.7)}
.epi[data-state="unavailable"] .epi-num{color:var(--tx-dis)}
.epi[data-state="unavailable"] .epi-end{color:var(--tx3)}
/* free (guests): green chip with the play icon */
.chip-free{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:3px 8px;border-radius:var(--rad-xs);
  background:var(--ok-dim);color:var(--ok);font-size:12px;font-weight:800;letter-spacing:.02em}
.chip-free .ic{width:12px;height:12px}
/* «Төгсгөл» / «Одоо» print tags */
.tag-fin,.tag-now{display:inline-block;padding:3px 6px 2px;border-radius:var(--rad-xs);font-size:10px;font-weight:800;line-height:1.2;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tag-fin{background:var(--r);color:var(--on-r)}
.tag-now{background:var(--tx);color:var(--on-light)}
/* volumes (боть): visual groups over one continuous list, h3 in the kicker look; jump chips for long series */
.vol-h{display:flex;align-items:center;gap:10px;margin:28px 0 6px;font-size:var(--fs-kick);font-weight:800;line-height:1.2;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx2);scroll-margin-top:calc(var(--nav-h) + 16px)}
.vol-h::before{content:"";width:9px;height:9px;flex:none;background:var(--r);transform:rotate(8deg)}
.vol-h::after{content:"";flex:1;min-width:16px;height:1px;background:var(--line)}
.vol-h small{font-size:inherit;font-weight:700;letter-spacing:.04em;color:var(--tx3)}
.vol-h:first-child{margin-top:4px}
.vol-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.vol-jump a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--rad-xs);background:var(--bg2);
  box-shadow:inset 0 0 0 1px var(--line-ctl);font-size:14px;font-weight:700;color:var(--tx2);white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.vol-jump a small{font-size:12px;font-weight:600;color:var(--tx3)}
.vol-jump a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.vol-jump a:hover{background:var(--ink-4);color:var(--tx)}}
@media (min-width:641px){
  .epi-th{display:block}
  .epi:has(>.epi-th){min-height:88px}
  .epi-num{font-size:22px}
}
@media (min-width:1280px){.epi-th{width:168px}}

/* ---------- empty / not found ---------- */
.empty{position:relative;padding:48px var(--gutter);text-align:center;color:var(--tx2)}
.empty::before{content:"";display:block;width:72px;height:72px;margin:0 auto 18px;background:url(/assets/seal.svg) center/contain no-repeat;transform:rotate(-8deg)}
.empty>.ic{display:none}
.empty h2,.empty h3{margin-bottom:4px;font-size:18px;font-weight:800;color:var(--tx)}
.empty p{max-width:36ch;margin:0 auto 18px;font-size:15px;color:var(--tx2)}
.nf{padding:96px var(--gutter) 48px;text-align:center}
.nf h1{margin-bottom:8px;font-size:var(--fs-dM);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.nf p{margin-bottom:20px;font-size:15px;color:var(--tx2)}

/* 404 / not-found (4.14, reused by title/watch !S): printed «404», the «0» a red seal square, speed lines behind */
.e404{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 0 8px}
.e404::before{content:"";position:absolute;z-index:-1;top:-24px;bottom:-24px;left:calc(-1 * var(--bleed-l));right:calc(-1 * var(--bleed-r));pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(244,239,230,.075) 0 .45deg,transparent .45deg 3.1deg),
    repeating-conic-gradient(from 1.4deg at 50% 30%,rgba(244,239,230,.05) 0 .25deg,transparent .25deg 4.7deg);
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,transparent 0 22%,#000 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,transparent 0 22%,#000 60%,transparent 100%)}
.e404-n{display:flex;align-items:center;justify-content:center;gap:.04em;font-size:clamp(72px,min(34vw,24vh),168px);font-weight:800;line-height:.9;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;animation:e404In var(--dur-4) var(--ease-out) both}
.e404-n .num-print>span{-webkit-text-stroke-width:max(2px,.017em)}
/* the «0» = a red seal square: ink numeral, paper inner frame, stamped slightly askew */
.e404-n b{display:inline-flex;align-items:center;justify-content:center;width:1.24em;height:1.24em;margin:0 .1em;border-radius:.07em;
  background:var(--r);color:var(--bg);font-size:.66em;font-weight:800;line-height:1;letter-spacing:0;
  box-shadow:inset 0 0 0 .05em var(--r),inset 0 0 0 .085em var(--on-r);transform:rotate(-7deg)}
.e404 h1{margin-top:22px;font-size:var(--fs-dM);line-height:1.1;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.e404 p{margin-top:10px;max-width:36ch;font-size:var(--fs-body);line-height:1.6;color:var(--tx2)}
.e404-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px;width:100%}
.e404-cta .btn{flex:1 1 0;min-width:0;max-width:220px}
.e404-row{margin-top:48px;width:100%}
@keyframes e404In{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:641px){
  .e404{padding-top:72px}
  .e404-cta .btn{flex:0 0 auto;min-width:180px}
}
@media (min-width:1024px){.e404{padding-top:88px}}
/* landscape phones: the message and both buttons stay on the first screen */
@media (max-height:500px){
  .e404{padding-top:12px}
  .e404 h1{margin-top:10px}
  .e404 p{margin-top:6px}
  .e404-cta{margin-top:14px}
}
/* …centred between the header and the tab bar, so the row below starts past the first screen */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){
  .e404{justify-content:center;padding-bottom:calc(var(--tab-h) + 8px);
    min-height:calc(100vh - var(--nav-h) - 1px - env(safe-area-inset-top,0px));min-height:calc(100svh - var(--nav-h) - 1px - env(safe-area-inset-top,0px))}
  .e404-row{margin-top:32px}
}

/* ===== SHARED PIECES: seal (hanko), ambient light, resume line ===== */
/* the KTR hanko (/assets/seal.svg): --seal-s, --seal-rot; .seal-tag on a paper tag; .seal--stamp lands once */
.seal{display:block;flex:none;width:var(--seal-s,72px);height:var(--seal-s,72px);background:url(/assets/seal.svg) center/contain no-repeat;
  transform:rotate(var(--seal-rot,-8deg))}
.seal-tag{padding:4px;border-radius:3px;background:url(/assets/seal.svg) center/calc(100% - 8px) auto no-repeat,var(--tx);box-shadow:var(--mis-float)}
.seal--stamp{animation:kStamp 620ms var(--ease-pop) var(--stamp-delay,450ms) both}
@keyframes kStamp{0%{opacity:0;transform:rotate(-26deg) scale(1.9)}55%{opacity:1}100%{opacity:1;transform:rotate(var(--seal-rot,-8deg)) scale(1)}}

/* ambient light (4.13): .amb > i.amb-l ×2; KTR.applyPal(layer,s) fills the hidden layer, .is-on cross-fades (opacity).
   Glow centres: --amb-x/-y, --amb-x2/-y2. Text only where the glow is ≤ .22. Plain rgba stops, no blur. */
.amb{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.amb-l{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-amb) var(--ease-inout);
  background:radial-gradient(90% 70% at var(--amb-x,72%) var(--amb-y,18%),var(--amb-a-55),rgba(10,10,12,0) 62%),
    radial-gradient(70% 60% at var(--amb-x2,8%) var(--amb-y2,88%),var(--amb-b-28),rgba(10,10,12,0) 60%),
    linear-gradient(180deg,var(--amb-deep) 0%,var(--bg) 88%)}
.amb-l.is-on{opacity:1}

/* resume line: .resume > .resume-bar > i (red fill) + .resume-t «Хэсэг 5 / 16 · 11 мин үлдсэн» */
.resume{display:flex;align-items:center;gap:12px;min-width:0;font-size:13px;font-weight:700;line-height:1.3;color:var(--tx2);font-variant-numeric:tabular-nums}
.resume-bar{position:relative;flex:0 0 auto;width:clamp(120px,32vw,200px);height:4px;background:rgba(244,239,230,.2);overflow:hidden}
.resume-bar i{position:absolute;left:0;top:0;bottom:0;display:block;background:var(--r)}
.resume-t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 12px);z-index:120;
  display:none;align-items:center;gap:12px;width:max-content;max-width:min(420px,calc(100vw - 32px));min-height:48px;padding:12px 16px;
  border-radius:var(--rad-md);background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2),var(--mis-float);
  color:var(--tx);font-size:15px;font-weight:700;line-height:1.35;transform:translateX(-50%)}
.toast.show{display:flex;animation:toastIn var(--dur-3) var(--ease-out)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.toast .ic{width:20px;height:20px}
.toast--ok .ic{color:var(--ok)}
.toast--err .ic{color:var(--r2)}
.toast-msg{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.toast-act{flex-shrink:0;min-height:44px;margin:-10px -8px -10px 0;padding:0 8px;border:0;background:none;color:var(--r2);
  font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer}

/* ---------- NEW sheets (opt-in: class="modal kmodal"), ink with a 6px top radius ----------
   The three existing modals keep their original look (frozen block below). */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.open{display:flex}
.kmodal{background:rgba(10,10,12,.78);align-items:flex-end;justify-content:center;padding:0;overflow:hidden}
.kmodal .sheet{position:relative;display:flex;flex-direction:column;width:100%;max-height:92vh;max-height:92dvh;
  background:var(--bg2);border:1px solid var(--line2);border-bottom:0;border-radius:var(--rad-md) var(--rad-md) 0 0;
  overflow:hidden;color:var(--tx);animation:ksheetIn var(--dur-3) var(--ease-out)}
@keyframes ksheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes kfadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sheet-grip{flex-shrink:0;width:36px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--line2)}
.sheet-head{flex-shrink:0;display:flex;align-items:center;gap:4px;min-height:56px;padding:0 4px 0 var(--gutter)}
.sheet-head .sheet-back{margin-left:calc(-1 * var(--gutter) + 4px)}
.sheet-head .t-sheet{flex:1;min-width:0}
.kmodal .sclose{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;
  border-radius:var(--rad-pill);background:transparent;color:var(--tx);cursor:pointer}
.kmodal .sclose:active{background:rgba(244,239,230,.10)}
.kmodal .mbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--gutter) 16px;text-align:left}
.sheet-foot{flex-shrink:0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg2);border-top:1px solid var(--line)}
@media (min-width:641px){
  .kmodal{align-items:center;padding:24px}
  .kmodal .sheet{width:440px;max-height:88vh;border-radius:var(--rad-md);border-bottom:1px solid var(--line2);box-shadow:var(--mis-float);animation-name:kfadeIn}
  .sheet-grip{display:none}
}

/* ---------- footer (4.12): hairline, a masked screentone band, logotype + tag, 44px links ---------- */
footer{margin-top:var(--sec);border-top:1px solid var(--line);color:var(--tx3);font-size:14px;line-height:1.5}
footer::before{content:"";display:block;height:24px;background:var(--tone);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.foot-in{max-width:var(--wrap-max);margin:0 auto;display:grid;gap:6px;padding:4px var(--pad-r) 24px var(--pad-l)}
.foot-brand{display:flex;flex-direction:column;gap:4px}
.foot-logo{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--r);line-height:1}
.foot-logo .logo-k{height:20px}
.foot-logo span{color:var(--tx);font-size:11px;font-weight:800;letter-spacing:.2em}
.foot-tag{color:var(--tx2);font-weight:600}
.foot-links{display:flex;flex-wrap:wrap;margin-left:-10px}
.foot-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;color:var(--tx2);font-weight:700;
  transition:color var(--dur-2) var(--ease-out)}
.foot-links a:active{color:var(--tx)}
@media (hover:hover) and (pointer:fine){.foot-links a:hover{color:var(--tx)}}
.foot-copy{font-size:13px;color:var(--tx3)}

/* ===== TABLET ≥641 ===== */
@media (min-width:641px){
  .logo-k{height:20px}
  .nav .logo span{font-size:11px}
  .fb-fab{padding:0 14px 0 12px}
  .fb-fab .fb-txt{display:inline}
  .phead{padding:32px 0 8px}
  .eplist{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
}

/* ===== DESKTOP ≥1024 (no tab bar; header links + inline search) ===== */
@media (min-width:1024px){
  body{padding-bottom:0}
  .logo-k{height:22px}
  .nav .logo{column-gap:8px}
  .nav .logo span{font-size:12px}
  .nav-links{display:flex;align-items:center;gap:2px;margin-left:24px}
  .nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
    font-size:15px;font-weight:700;color:var(--tx2);white-space:nowrap;transition:color var(--dur-2) var(--ease-out)}
  .nav-links a:hover{color:var(--tx)}
  .nav-links a.on{color:var(--tx)}
  .nav-links a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;background:var(--r);transform:skewX(-24deg)}
  .phead{padding:40px 0 12px}
  .phead h1{font-size:var(--fs-display-lg)}
  .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .foot-in{grid-template-columns:1fr auto;align-items:center;gap:6px 24px}
  .foot-copy{grid-column:1 / -1}
}
@media (min-width:1200px){
  .uname{display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;color:var(--tx)}
}
@media (min-width:1600px){
  .logo-k{height:24px}
  .nav-links{margin-left:32px}
  .nav-links a{font-size:16px}
}
/* ≤359: the logotype stacks (mark over «MANHWA») so the whole lockup, both icons and «Нэвтрэх» fit at 320 */
@media (max-width:359px){
  .nav .logo{flex-direction:column;align-items:flex-start;justify-content:center;row-gap:3px}
  .logo-k{height:17px}
  .nav .logo span{font-size:9px;letter-spacing:.07em}
  .nav-user .btn{padding:0 12px}
  /* one-line chapter heads at 320: «Бүгдийг үзэх» collapses to its chevron (the text stays the accessible name) */
  .row-head .more{min-width:44px;justify-content:center;gap:0;font-size:0}
  .row-head .more .ic{width:20px;height:20px}
}
/* short landscape (phones sideways): the header scrolls away (not sticky) */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){
  .nav{position:relative}
}

/* ---------- skip link (first Tab stop; markup class="sr-only skip", injected by KTR.mount) ---------- */
.skip:focus{position:fixed!important;left:max(8px,env(safe-area-inset-left,0px));top:calc(8px + env(safe-area-inset-top,0px));
  width:auto;height:auto;margin:0;clip:auto;z-index:130;padding:12px 16px;border-radius:var(--rad-sm);
  background:var(--tx);color:var(--on-light);font-size:15px;font-weight:800;line-height:1.3;box-shadow:var(--mis-r)}

/* ---------- calm (KTR.calm(): reduced motion or Save-Data): no stamp, no sweep, instant reveals ---------- */
html.is-calm .seal--stamp{animation:none}
html.is-calm .cov::before,html.is-calm .sr-thumb::before{content:none;animation:none}
html.is-calm .cov img,html.is-calm .sr-thumb img,html.is-calm .tcov img,html.is-calm .backdrop img,html.is-calm .epi-th img{transition:none}
html.is-calm .amb-l{transition:none}

/* ---------- reduced motion: every animation collapses (keep this the last rule above the FROZEN block) ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .seal--stamp{animation:none!important}
  /* not motion: the boot hold's 1.5s safety timer keeps its delay (duration stays 0) */
  body:not(:has(>.nav))>main:not([data-boot="early"]),body:not(:has(>.nav)) [data-boot="hold"]{animation-delay:1.5s!important;animation-duration:0s!important}
}

/* ================================================================
   FROZEN — ORIGINAL LOOK OF #payModal / #authModal / #fbModal
   Copied verbatim from the pre-redesign site.css and scoped under
   .modal:not(.kmodal) with the OLD token values and OLD font stack,
   so no redesign rule above can change these sheets. Do not edit
   (owner: payment/bank section is out of scope for the redesign).
   ================================================================ */
.modal:not(.kmodal){
  --r:#e50914; --r2:#ff2530; --r-dim:rgba(229,9,20,.12);
  --bg:#101014; --bg2:#16161c; --card:#1b1b22; --card2:#22222b;
  --line:#2a2a33; --line2:#3a3a45;
  --tx:#f2f2f5; --tx2:#a7a7b3; --tx3:#71717d;
  --ok:#46d369; --ok-dim:rgba(70,211,105,.12);
  --anime:#7c6cff; --anime-dim:rgba(124,108,255,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 10px 30px rgba(0,0,0,.45);
  --shadow-xl:0 24px 60px rgba(0,0,0,.6);
  --nav-h:56px;
  /* inherited text properties reset to the old body values */
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:16px;font-weight:400;font-style:normal;font-stretch:normal;
  font-variant:normal;font-feature-settings:normal;font-kerning:auto;line-height:normal;letter-spacing:normal;word-spacing:normal;
  text-transform:none;text-align:start;text-indent:0;text-shadow:none;white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:manual;
  color:#f2f2f5;color-scheme:normal;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:initial;scrollbar-color:auto;cursor:auto;
  visibility:visible;direction:ltr;
  /* old .modal */
  position:fixed;inset:0;z-index:100;background:rgba(6,6,9,.78);backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
.modal:not(.kmodal) :focus-visible{outline:2px solid var(--r2);outline-offset:2px;border-radius:4px}
.modal:not(.kmodal) ::selection{background:var(--r);color:#fff}
.modal:not(.kmodal) .logo{display:block;height:auto;line-height:normal;font-weight:900;font-size:20px;letter-spacing:1.5px;color:var(--r);white-space:nowrap;flex-shrink:0}
.modal:not(.kmodal) .logo span{color:var(--tx);letter-spacing:.5px;font-size:13px;font-weight:700;margin-left:2px;opacity:.9}

/* buttons (old) */
.modal:not(.kmodal) .btn{position:static;cursor:pointer;border:none;border-radius:8px;font-family:inherit;font-weight:600;font-size:14px;line-height:normal;
  letter-spacing:normal;padding:9px 18px;min-height:0;white-space:nowrap;flex-shrink:0;opacity:1;box-shadow:none;text-decoration:none;
  -webkit-tap-highlight-color:inherit;touch-action:auto;-webkit-user-select:auto;user-select:auto;
  transition:transform .12s,background .15s,border-color .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.modal:not(.kmodal) .btn::after{content:none}
.modal:not(.kmodal) .btn:active{transform:scale(.97)}
.modal:not(.kmodal) .btn-r{background:var(--r);color:#fff}
.modal:not(.kmodal) .btn-r:hover{background:var(--r2)}
.modal:not(.kmodal) .btn-g{background:var(--card2);color:var(--tx);border:1px solid var(--line2)}
.modal:not(.kmodal) .btn-g:hover{border-color:var(--tx3)}
.modal:not(.kmodal) .btn-w{background:#fff;color:#000;font-weight:700}
.modal:not(.kmodal) .btn-w:hover{background:#d9d9de}
.modal:not(.kmodal) .btn[disabled]{opacity:.5;cursor:not-allowed}

/* sheet (old) */
.modal:not(.kmodal) .sheet{background:var(--bg2);border:1px solid var(--line);border-radius:14px;max-width:440px;width:100%;
  overflow:hidden;box-shadow:var(--shadow-xl);position:relative}
.modal:not(.kmodal) .mbody{padding:32px 28px;text-align:center;position:relative}
.modal:not(.kmodal) .mbody .ic{width:60px;height:60px;border-radius:50%;background:var(--r-dim);border:1px solid rgba(229,9,20,.35);
  display:grid;place-items:center;margin:0 auto 16px;
  flex-shrink:1;vertical-align:baseline;fill:initial;stroke:initial;stroke-width:initial;stroke-linecap:initial;stroke-linejoin:initial}
.modal:not(.kmodal) .mbody h2{font-size:21px;font-weight:900}
.modal:not(.kmodal) .mbody p{color:var(--tx2);margin:8px 0 20px;font-size:14px;line-height:1.55}
.modal:not(.kmodal) .sclose{position:absolute;top:12px;right:12px;z-index:5;width:36px;height:36px;border-radius:50%;
  background:rgba(16,16,20,.7);border:1px solid var(--line);color:#fff;font-size:20px;cursor:pointer;line-height:1}
.modal:not(.kmodal) .inp{width:100%;padding:11px 14px;background:var(--card);border:1px solid var(--line);border-radius:9px;
  color:#fff;font-size:14px;outline:none;margin-bottom:8px;font-family:inherit}
.modal:not(.kmodal) .inp:focus{border-color:var(--r)}
.modal:not(.kmodal) .note{color:var(--tx3);font-size:12px;margin-top:12px;line-height:1.5}

/* plan selector (old) */
.modal:not(.kmodal) .plansel{display:flex;gap:8px;margin:14px 0 0}
.modal:not(.kmodal) .popt{flex:1;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 4px;text-align:center;
  cursor:pointer;color:var(--tx2);font-size:12px;line-height:1.4;transition:border-color .15s}
.modal:not(.kmodal) .popt b{display:block;font-size:13px;color:var(--tx)}
.modal:not(.kmodal) .popt span{display:block;font-weight:800;font-size:15px;color:var(--r);margin-top:2px}
.modal:not(.kmodal) .popt.on{border-color:var(--r);background:var(--r-dim);box-shadow:0 0 0 1px var(--r) inset}

/* qpay qr (old) */
.modal:not(.kmodal) .qrwrap{margin-top:14px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.modal:not(.kmodal) .qrtitle{font-weight:800;font-size:15px;margin-bottom:10px;text-align:center}
.modal:not(.kmodal) .qr{width:200px;height:200px;margin:0 auto;border-radius:12px;background:#fff;display:grid;place-items:center;
  color:#111;font-weight:800;font-size:12px;text-align:center;padding:12px}
.modal:not(.kmodal) .qr img{width:100%;height:100%;border-radius:8px}
.modal:not(.kmodal) .qrsub{color:var(--tx3);font-size:12px;text-align:center;margin-top:10px}
.modal:not(.kmodal) .bankhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;text-align:left}
.modal:not(.kmodal) .bankhead b{font-size:14px}
.modal:not(.kmodal) .banksub{color:var(--tx3);font-size:11px;margin-top:2px}
.modal:not(.kmodal) .qpaybadge{background:#0d9488;color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:10px;letter-spacing:.5px;flex-shrink:0}
.modal:not(.kmodal) .qrlinks{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:180px;overflow-y:auto;padding-right:2px}
.modal:not(.kmodal) .bank{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;
  text-decoration:none;color:#111;min-width:0;transition:border-color .15s,transform .1s}
.modal:not(.kmodal) .bank:hover{border-color:#9ca3af;transform:translateY(-1px)}
.modal:not(.kmodal) .bank:active{transform:scale(.97)}
.modal:not(.kmodal) .bico{width:28px;height:28px;border-radius:8px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;font-size:11px;font-weight:800;color:#fff}
.modal:not(.kmodal) .bico img{width:24px;height:24px;object-fit:contain}
.modal:not(.kmodal) .bname{font-size:12px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal:not(.kmodal) .barrow{color:#9ca3af;font-size:15px;flex-shrink:0}

/* chat (old) */
.modal:not(.kmodal) .fb-thread{max-height:300px;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;text-align:left}
.modal:not(.kmodal) .fb-msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.modal:not(.kmodal) .fb-msg.u{align-self:flex-end;background:var(--r);color:#fff;border-bottom-right-radius:4px}
.modal:not(.kmodal) .fb-msg.a{align-self:flex-start;background:var(--card2);color:var(--tx);border-bottom-left-radius:4px}
.modal:not(.kmodal) .fb-time{display:block;font-size:10px;opacity:.65;margin-top:3px}
.modal:not(.kmodal) .fb-input{display:flex;gap:8px}
.modal:not(.kmodal) .fb-input .inp{margin-bottom:0;resize:none}
.modal:not(.kmodal) .fb-login-box{padding:8px 0}

/* old mobile bottom-sheet rules */
@media (max-width:640px){
  .modal:not(.kmodal) .logo{font-size:17px}
  .modal:not(.kmodal) .logo span{font-size:10px;letter-spacing:.3px}
  .modal:not(.kmodal) .btn:active{transform:scale(.96)}
  .modal:not(.kmodal){align-items:flex-end;padding:0}
  .modal:not(.kmodal) .sheet{max-width:none;border-radius:18px 18px 0 0;max-height:92vh;overflow-y:auto;
    animation:sheetUp .28s cubic-bezier(.16,1,.3,1)}
  .modal:not(.kmodal) .mbody{padding:26px 20px calc(26px + env(safe-area-inset-bottom,0px))}
}
@keyframes sheetUp{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}