/* =====================================================================
   NICEOPPAI ORANGE — engine skin stylesheet  (handle: wpm_thm)
   Ported verbatim from the prototype niceoppai-orange.html <style> block.
   Loaded by the engine on EVERY front-end page (incl. the standalone reader),
   AFTER the structural css/cre.css — so this is the single source of truth for
   the whole orange design: tokens + reset + all content/chrome/reader components.
   SPA-only .view display-toggling was removed (multi-page build = one view/page).
   Fonts are loaded via <link> in the theme header + page-reader.php for now.
   The "ENGINE-LEGACY BRIDGE" section at the bottom restyles the few legacy
   engine hooks that survive in the reskinned templates (ratings, pagination…).
   ===================================================================== */

/* ============ TOKENS ============ */
:root{
  --paper:#0D0A07;
  --paper-2:#1B140D;
  --paper-card:#171009;
  --ink:#F6ECE0;
  --ink-soft:#C9B7A2;
  --ink-faint:#8E7A64;
  --line:rgba(255,150,60,.16);
  --seal:#F26A1E;
  --seal-deep:#C24E12;
  --indigo:#FFA23E;
  --indigo-soft:#C98A45;
  --rule:rgba(255,150,60,.09);
  --rule-2:rgba(255,150,60,.18);

  --r-chip:9px;
  --r-btn:14px;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;

  --maxw:1180px;

  --disp:"Kanit","Anuphan",system-ui,sans-serif;
  --body:"Anuphan","Noto Sans Thai",system-ui,-apple-system,sans-serif;
  --seal-font:"Noto Serif JP",serif;

  --reader-bg:#0A0705;
  --reader-panel:#120C07;
  --reader-text:#F6ECE0;
  --reader-faint:#A08A72;
}

/* ============ DARK THEME (browsing) ============ */
body.light{
  --paper:#FBF3E7;
  --paper-2:#F3E7D3;
  --paper-card:#FFFBF3;
  --ink:#2A1C10;
  --ink-soft:#5C4632;
  --ink-faint:#977C5F;
  --line:rgba(190,90,20,.18);
  --seal:#E0611A;
  --seal-deep:#B8480F;
  --indigo:#C0781F;
  --indigo-soft:#A9812F;
  --rule:rgba(190,90,20,.10);
  --rule-2:rgba(190,90,20,.18);
  --reader-bg:#0A0705;
  --reader-text:#F6ECE0;
}
body.light::before{background-image:radial-gradient(rgba(190,90,20,.05) .5px,transparent .6px)}
body.light .topbar{background:rgba(251,243,231,.85)}
body.light .adbox{background:repeating-linear-gradient(45deg,rgba(190,90,20,.05) 0 9px,transparent 9px 18px),var(--paper-card)}
body.light .bottomnav{background:rgba(251,243,231,.94)}

/* ============ RESET / BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
input{font-family:inherit}
:focus-visible{outline:3px solid var(--seal);outline-offset:2px;border-radius:3px}

/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:radial-gradient(rgba(23,20,15,.05) .5px,transparent .6px);
  background-size:3px 3px;
}

/* ============ UTILITIES ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
.tone{
  background-image:radial-gradient(currentColor 1px,transparent 1.5px);
  background-size:5px 5px;
}
.eyebrow{
  font-family:var(--disp);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.74rem;color:var(--seal);display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--seal)}

/* seal stamp signature */
.seal{
  --d:46px;
  width:var(--d);height:var(--d);flex:0 0 var(--d);
  display:grid;place-items:center;border-radius:50%;
  color:#fff;font-family:var(--seal-font);font-weight:700;
  font-size:calc(var(--d)*.42);line-height:1;user-select:none;
  background:
     radial-gradient(circle at 32% 28%, #E8483B, var(--seal) 55%, var(--seal-deep));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.34), inset 0 0 0 4px var(--seal);
  position:relative;transform:rotate(-7deg);
}
.seal::after{ /* rough ink edge */
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--seal-deep);opacity:.35;
  -webkit-mask:radial-gradient(circle, #000 62%, transparent 63%);
  mask:radial-gradient(circle, #000 62%, transparent 63%);
}

/* generic comic-panel card frame */
.panel{
  background:var(--paper-card);
  border:2.5px solid var(--line);
  box-shadow:4px 4px 0 var(--line);
}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:600;letter-spacing:.01em;
  padding:3px 9px;border-radius:var(--r-chip);
  border:1.5px solid var(--rule-2);color:var(--ink-soft);background:transparent;
  white-space:nowrap;
}
.chip--genre{border-color:rgba(40,50,79,.3);color:var(--indigo);background:rgba(40,50,79,.06)}
.chip--live{border-color:var(--seal);color:var(--seal);background:rgba(214,43,30,.07)}
.chip--done{border-color:var(--ink-faint);color:var(--ink-faint)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:.92rem;padding:11px 18px;border-radius:var(--r-btn);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn--solid{background:var(--ink);color:var(--paper-card);box-shadow:3px 3px 0 var(--seal)}
.btn--solid:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--seal)}
.btn--solid:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--seal)}
.btn--ghost{border:2px solid var(--line);background:var(--paper-card)}
.btn--ghost:hover{background:var(--paper-2)}

/* ============ TOP BAR ============ */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(242,237,225,.86);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:2.5px solid var(--line);
}
.topbar__in{display:flex;align-items:center;gap:var(--s4);height:62px;max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand .seal{--d:34px}
.brandfist{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center}
.brandfist img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.brandfist--foot{width:38px;height:38px;flex-basis:38px}
.brand__name{font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:.02em;line-height:.9;text-transform:uppercase;text-shadow:0 -1px 0 rgba(255,255,255,.14),0 1px 0 rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.42),0 3px 1px rgba(0,0,0,.32),0 5px 10px rgba(0,0,0,.5)}
.brand__name b{color:#FF8F3C}
.brand__sub{display:block;font-family:var(--body);font-weight:600;font-size:.56rem;letter-spacing:.32em;color:var(--ink-faint);text-transform:uppercase;margin-top:1px;text-shadow:none}

.nav{display:flex;gap:2px;margin-left:var(--s3)}
.nav a{
  font-weight:600;font-size:.92rem;padding:8px 13px;border-radius:7px;color:var(--ink-soft);
  position:relative;transition:color .15s, background .15s;
}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.nav a.is-active{color:var(--ink)}
.nav a.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2.5px;background:var(--seal)}

.search{display:flex;align-items:center;gap:8px;
  background:var(--paper-card);border:2px solid var(--line);border-radius:9px;
  padding:7px 12px;width:230px;transition:width .2s, box-shadow .15s}
.search:focus-within{box-shadow:3px 3px 0 var(--ink)}
.search svg{flex:0 0 16px;opacity:.6}
.search input{border:none;background:none;outline:none;font-size:.9rem;width:100%;color:var(--ink)}
.search input::placeholder{color:var(--ink-faint)}

.iconbtn{width:42px;height:42px;border:2px solid var(--line);border-radius:9px;background:var(--paper-card);display:none;place-items:center}
.iconbtn:hover{background:var(--paper-2)}

.topbar__act{margin-left:auto;display:flex;align-items:center;gap:10px}
.themebtn{width:42px;height:42px;flex:0 0 auto;border:2px solid var(--line);border-radius:9px;background:var(--paper-card);
  display:grid;place-items:center;color:var(--ink);transition:background .15s,box-shadow .12s,transform .12s}
.themebtn:hover{background:var(--paper-2)}
.themebtn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--line)}
.themebtn .ic-moon{display:none}
.themebtn .ic-sun{display:block}
body.light .themebtn .ic-sun{display:none}
body.light .themebtn .ic-moon{display:block}

/* ============ HOME ============ */
/* (SPA .view display-toggling removed — multi-page build shows one view per page) */

section.block{padding:var(--s7) 0 var(--s2)}
.block__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4)}
.block__title{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1;letter-spacing:.01em}
.block__title .th{font-family:var(--body);font-weight:700;font-size:.62em;display:block;letter-spacing:0;color:var(--ink-soft);margin-top:6px}
.seeall{font-weight:700;font-size:.85rem;color:var(--ink-soft);display:inline-flex;gap:6px;align-items:center}
.seeall:hover{color:var(--seal)}

/* HERO */
.hero{padding-top:var(--s6)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:stretch}
.hero__art{
  position:relative;border:3px solid var(--line);box-shadow:8px 8px 0 var(--line);
  min-height:420px;overflow:hidden;color:#E8483B;
  background:linear-gradient(140deg,#C8431F,#6B1E12);
  animation:inkin .5s ease both;
}
@keyframes inkin{from{box-shadow:0 0 0 var(--line);transform:translate(-6px,-6px)}to{box-shadow:8px 8px 0 var(--line);transform:none}}
.hero__art .tone{position:absolute;inset:0;opacity:.22;color:#fff;mix-blend-mode:overlay}
.hero__speed{position:absolute;inset:0;opacity:.16;
  background:repeating-conic-gradient(from 0deg at 78% 40%, #fff 0deg 1.4deg, transparent 1.4deg 7deg);
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%)}
.hero__sealwrap{position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:10px;z-index:3}
.hero__sealwrap .seal{--d:58px;animation:stamp .6s cubic-bezier(.2,1.4,.4,1) .25s both}
@keyframes stamp{0%{transform:rotate(-24deg) scale(1.9);opacity:0}60%{opacity:1}100%{transform:rotate(-7deg) scale(1);opacity:1}}
.hero__today{font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.12em;color:#fff;text-transform:uppercase;background:rgba(0,0,0,.35);padding:5px 10px;border-radius:6px}
.hero__cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s5);z-index:3;
  background:linear-gradient(transparent,rgba(10,4,2,.85) 62%);color:#fff}
.hero__series{font-family:var(--disp);font-weight:900;font-size:clamp(2.4rem,6vw,3.8rem);line-height:.92;letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero__ch{font-weight:700;font-size:1.05rem;margin-top:6px;opacity:.95}
.hero__ch b{color:#FFD9A0}

.hero__side{display:flex;flex-direction:column;gap:var(--s4);justify-content:space-between}
.hero__pitch h1{font-family:var(--body);font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.25;letter-spacing:-.01em}
.hero__pitch h1 em{font-style:normal;color:var(--seal)}
.hero__pitch p{color:var(--ink-soft);margin-top:10px;font-size:1rem;max-width:42ch}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);border:2.5px solid var(--line);background:var(--paper-card)}
.hero__stats div{padding:14px;text-align:center;border-right:2px solid var(--rule)}
.hero__stats div:last-child{border-right:none}
.hero__stats b{font-family:var(--disp);font-weight:800;font-size:1.7rem;display:block;line-height:1}
.hero__stats span{font-size:.72rem;color:var(--ink-faint);font-weight:600}

/* horizontal rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:148px;gap:var(--s3);overflow-x:auto;padding-bottom:var(--s3);scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:8px}
.rail>*{scroll-snap-align:start}

/* cover card */
.cover{position:relative;aspect-ratio:2/3;border:2.5px solid var(--line);overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end}
.cover .tone{position:absolute;inset:0;opacity:.2;color:#fff;mix-blend-mode:overlay}
.cover__spine{position:absolute;top:9px;left:9px;right:9px;font-family:var(--disp);font-weight:800;
  font-size:1.05rem;line-height:.95;letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.45);z-index:2}
.cover__seal{position:absolute;top:8px;right:8px;z-index:3}
.cover__seal .seal{--d:30px}
.cover__foot{position:relative;z-index:2;padding:9px;background:linear-gradient(transparent,rgba(8,4,2,.82))}
.cover__rate{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:.78rem;color:#FFD27A}
/* cover with a real image (engine wpm_url_tbn) — img fills the frame */
.cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.mangacard{cursor:pointer;transition:transform .14s ease}
.mangacard:hover{transform:translateY(-4px)}
.mangacard:hover .cover{box-shadow:3px 3px 0 var(--line)}
.mangacard__meta{padding-top:9px}
.mangacard__title{font-weight:700;font-size:.92rem;line-height:1.2;color:var(--ink)}
.mangacard__ch{font-size:.78rem;color:var(--ink-faint);margin-top:2px}

/* popular grid */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}

/* update feed */
.feed{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.fcard{display:grid;grid-template-columns:84px 1fr;gap:var(--s4);padding:var(--s3);cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease}
.fcard:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--line)}
.fcard .cover{aspect-ratio:2/3}
.fcard .cover__spine{font-size:.78rem;top:6px;left:6px;right:6px}
.fcard__body{min-width:0;display:flex;flex-direction:column}
.fcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.fcard__title{font-weight:700;font-size:1.02rem;line-height:1.15;color:var(--ink)}
.fcard__genres{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 9px}
.fcard__chs{display:flex;flex-direction:column;gap:1px;margin-top:auto}
.fcard__ch{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 9px;border:1.5px solid var(--rule);border-radius:6px;font-size:.82rem;font-weight:600;
  transition:background .12s, border-color .12s}
.fcard__ch:hover{background:var(--paper-2);border-color:var(--rule-2)}
.fcard__ch .d{color:var(--ink-faint);font-weight:500;font-size:.74rem}
.fcard__ch .new{color:#F5433A;font-weight:700;font-size:.72rem}

/* genres strip */
.genres{display:flex;flex-wrap:wrap;gap:9px}
.gtag{font-weight:700;font-size:.9rem;padding:9px 15px;border:2px solid var(--line);border-radius:9px;background:var(--paper-card);
  transition:transform .12s, box-shadow .12s, color .12s}
.gtag:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line);color:var(--seal)}
.gtag span{color:var(--ink-faint);font-weight:600;font-size:.78rem;margin-left:6px}

/* mature toggle bar */
.matbar{display:flex;align-items:center;gap:12px;padding:13px var(--s4);border:2.5px dashed var(--rule-2);
  border-radius:11px;background:var(--paper-card);margin-top:var(--s5)}
.matbar p{font-size:.86rem;color:var(--ink-soft);flex:1}
.matbar b{color:var(--ink)}
.toggle{--w:46px;width:var(--w);height:26px;border-radius:30px;background:var(--ink-faint);position:relative;
  flex:0 0 var(--w);transition:background .18s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}
.toggle[aria-pressed="true"]{background:var(--seal)}
.toggle[aria-pressed="true"]::after{transform:translateX(20px)}

/* ============ SERIES PAGE ============ */
.series{padding-top:var(--s6)}
.crumbs{font-size:.84rem;color:var(--ink-faint);font-weight:600;margin-bottom:var(--s4);display:flex;gap:8px;align-items:center}
.crumbs a:hover{color:var(--seal)}
.series__top{display:grid;grid-template-columns:230px 1fr;gap:var(--s6);align-items:start}
.series__cover{position:relative}
.series__cover .cover{box-shadow:7px 7px 0 var(--line)}
.series__info h1{font-family:var(--disp);font-weight:900;font-size:clamp(2rem,5vw,3.1rem);line-height:.95;letter-spacing:.01em}
.series__alt{color:var(--ink-faint);font-weight:600;font-size:.92rem;margin-top:4px}
.series__rowmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:var(--s4) 0}
.series__rate{display:flex;align-items:center;gap:7px}
.series__rate b{font-family:var(--disp);font-weight:800;font-size:1.7rem;line-height:1}
.stars{color:#E0A52A;letter-spacing:1px}
.series__genres{display:flex;gap:7px;flex-wrap:wrap;margin:var(--s3) 0 var(--s4)}
.series__syn{color:var(--ink-soft);max-width:62ch;font-size:1rem}
.series__facts{display:grid;grid-template-columns:repeat(4,auto);gap:var(--s5);margin:var(--s5) 0;padding:var(--s4) 0;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.fact span{display:block;font-size:.72rem;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.fact b{font-family:var(--disp);font-weight:700;font-size:1.25rem}
.series__cta{display:flex;gap:11px;flex-wrap:wrap}

.chlist{margin-top:var(--s7)}
.chlist__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.chlist__rows{border:2.5px solid var(--line);background:var(--paper-card)}
.chrow{display:flex;align-items:center;gap:var(--s4);padding:13px var(--s4);border-bottom:1.5px solid var(--rule);cursor:pointer;
  transition:background .12s}
.chrow:last-child{border-bottom:none}
.chrow:hover{background:var(--paper-2)}
.chrow__n{font-family:var(--disp);font-weight:800;font-size:1.15rem;min-width:74px}
.chrow__t{flex:1;font-weight:600;font-size:.94rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrow__d{font-size:.8rem;color:var(--ink-faint);font-weight:600}
.chrow__go{opacity:.4;transition:opacity .12s, transform .12s}
.chrow:hover .chrow__go{opacity:1;transform:translateX(2px)}
.chrow.read .chrow__n,.chrow.read .chrow__t{color:var(--ink-faint)}
.chrow__read{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;color:var(--ink-faint);border:1.5px solid var(--rule-2);border-radius:var(--r-chip);padding:2px 8px;white-space:nowrap}
.chrow__read b{color:var(--seal);font-size:.82rem;line-height:1}

/* ============ READER ============ */
body.reading{background:var(--reader-bg)}
body.reading .topbar,body.reading .bottomnav{display:none}
body.reading::before{display:none}

.reader{background:var(--reader-bg);color:var(--reader-text);min-height:100vh;padding-bottom:var(--s6)}
.rcrumb{max-width:760px;margin:0 auto;padding:var(--s5) var(--s4) 0;font-size:.84rem;font-weight:600;color:var(--reader-faint);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rcrumb a{color:var(--reader-faint)}
.rcrumb a:hover{color:var(--seal)}
.rcrumb__series b{color:var(--reader-text);font-weight:700}
.rcrumb__cur{color:var(--reader-text)}
.rprogress{position:fixed;top:0;left:0;height:3px;background:var(--seal);z-index:61;width:0;transition:width .1s linear}

/* the reading stage */
.stage{max-width:var(--rw,720px);margin:0 auto;padding:0;transition:max-width .2s}
/* top banners inside the reader */
.rads{max-width:760px;margin:0 auto;padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
/* end-of-chapter ad slot (after last page) */
.radbox{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:728px;max-width:calc(100% - 32px);height:200px;margin:var(--s5) auto var(--s2);
  text-align:center;color:var(--reader-faint);
  border:2px dashed rgba(255,255,255,.2);border-radius:10px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 9px,transparent 9px 18px),rgba(255,255,255,.02)}
.radbox b{font-family:var(--disp);font-weight:700;letter-spacing:.1em;font-size:.92rem;color:var(--reader-text);text-transform:uppercase}
.radbox span{font-size:.74rem;font-weight:600}
.radbox::before{content:"AD";position:absolute;top:8px;left:8px;font-family:var(--disp);font-weight:800;font-size:.6rem;
  letter-spacing:.12em;color:var(--reader-faint);border:1.5px solid rgba(255,255,255,.22);border-radius:4px;padding:1px 6px}
.rads .adbox{margin:0 auto;border-color:rgba(233,226,210,.18);color:var(--reader-faint);
  background:repeating-linear-gradient(45deg,rgba(233,226,210,.05) 0 9px,transparent 9px 18px),#17150f}
.rads .adbox::before{color:var(--reader-faint);border-color:rgba(233,226,210,.22)}
.rads .adbox b{color:var(--reader-text)}
/* real image page in the reader (fits column width, any aspect ratio) */
.mpage-img{display:block;width:100%;height:auto;border-bottom:2px solid #000;background:#cfcabd}
.mpage-demo{position:relative}
.mpage-demo::after{content:"หน้าตัวอย่าง · แนวนอน";position:absolute;top:8px;left:8px;z-index:3;
  font-family:var(--disp);font-weight:800;font-size:.6rem;letter-spacing:.08em;color:#fff;
  background:rgba(214,43,30,.92);padding:3px 8px;border-radius:5px}
/* landscape (wide / double-page spread) breaks out of the column to fill the screen width */
.mpage-demo--wide{left:50%;transform:translateX(-50%);width:100vw;max-width:1500px}
.rfilter{position:fixed;inset:0;background:#000;opacity:var(--rdim,0);pointer-events:none;z-index:55}
.mpage{position:relative;width:100%;aspect-ratio:5/7;border-bottom:2px solid #000;background:#cfcabd;overflow:hidden;color:#15140f}
.mpage .tone{position:absolute;inset:0;color:#15140f}
.mpanel{position:absolute;border:3px solid #111;overflow:hidden}
.spd{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at var(--cx,50%) var(--cy,50%), #111 0 1.1deg, transparent 1.1deg 6deg);opacity:.5}
.sfx{position:absolute;font-family:var(--disp);font-weight:900;color:#111;line-height:.8;letter-spacing:-.02em;
  -webkit-text-stroke:2px #111;text-shadow:3px 3px 0 rgba(255,255,255,.7)}
.gut{position:absolute;background:#cfcabd}

/* reader chapter nav (inline: under banner & above comments) — nsvscans style */
.rnavbar{display:flex;align-items:center;gap:var(--s3);max-width:760px;margin:var(--s5) auto;padding:0 var(--s4)}
.rnav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:.9rem;
  padding:11px 14px;border-radius:9px;border:1.5px solid rgba(255,255,255,.16);color:var(--reader-text)}
.rnav:hover{background:rgba(255,255,255,.08)}
.rnav--next{background:var(--seal);border-color:var(--seal);color:#fff}
.rnav--next:hover{background:var(--seal-deep)}
.rnav[disabled]{opacity:.35;pointer-events:none}
.rnav--series{background:rgba(255,255,255,.06)}
.rnav--series:hover{background:rgba(255,255,255,.14)}
@media(max-width:560px){.rnav--series span{display:none}}
.rselect{position:relative;flex:1;min-width:0;display:flex}
.rsel{width:100%;appearance:none;-webkit-appearance:none;background:#1a1813;color:var(--reader-text);
  border:1.5px solid rgba(255,255,255,.16);border-radius:9px;padding:11px 40px 11px 14px;
  font-family:inherit;font-weight:700;font-size:.9rem;line-height:1.1;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsel:hover{border-color:rgba(255,255,255,.32)}
.rselect__i{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--reader-faint)}

/* ============ BOTTOM NAV (mobile) ============ */
.bottomnav{display:none}

/* ============ FOOTER ============ */
.foot{margin-top:var(--s8);border-top:2.5px solid var(--line);background:var(--paper-2)}
.foot__in{max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between}
.foot__brand{max-width:340px}
.foot__brand p{color:var(--ink-soft);font-size:.88rem;margin-top:10px}
.foot__cols{display:flex;gap:var(--s7);flex-wrap:wrap}
.foot__col h4{font-family:var(--disp);font-weight:700;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.foot__col a{display:block;font-size:.88rem;color:var(--ink-soft);padding:3px 0}
.foot__col a:hover{color:var(--seal)}
.foot__bot{border-top:1.5px solid var(--rule);text-align:center;padding:16px;font-size:.78rem;color:var(--ink-faint)}

/* ============ AD SLOTS + SIDEBAR ============ */
/* leaderboard strip under the top bar */
.adstrip{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s4) var(--s4) var(--s5)}
body.reading .adstrip{display:none}

/* generic ad placeholder (concept slot) */
.adbox{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  text-align:center;color:var(--ink-faint);flex:0 0 auto;
  border:2px dashed var(--rule-2);
  background:repeating-linear-gradient(45deg,rgba(23,20,15,.035) 0 9px,transparent 9px 18px),var(--paper-card)}
.adbox b{font-family:var(--disp);font-weight:700;letter-spacing:.1em;font-size:.82rem;color:var(--ink-soft);text-transform:uppercase}
.adbox span{font-size:.72rem;font-weight:600}
.adbox::before{content:"AD";position:absolute;top:6px;left:6px;font-family:var(--disp);font-weight:800;font-size:.58rem;
  letter-spacing:.12em;color:var(--ink-faint);border:1.5px solid var(--rule-2);border-radius:4px;padding:0 5px}
.adbox--leaderboard{width:728px;max-width:100%;height:90px}
.adbox--rect{width:300px;height:250px;max-width:100%}

/* two-column content shell: main + right rail */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s6);align-items:start}
.layout__main{min-width:0}
.layout__side{position:static;display:flex;flex-direction:column;gap:var(--s4)}
.layout .block:first-child{padding-top:var(--s5)}
#view-home .layout__side{padding-top:var(--s5)}

/* sidebar widget frame */
.swid{border:2.5px solid var(--line);background:var(--paper-card);box-shadow:4px 4px 0 var(--line)}
.swid__h{font-family:var(--disp);font-weight:800;font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;
  padding:10px var(--s3);border-bottom:2.5px solid var(--line);display:flex;align-items:center;gap:8px}
.swid__b{padding:6px var(--s3) var(--s2)}
.rankrow{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1.5px solid var(--rule);cursor:pointer}
.rankrow:last-child{border-bottom:none}
.rankrow:hover .rankrow__t{color:var(--seal)}
.rankrow__n{font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--seal);min-width:22px;text-align:center}
.rankrow__t{display:flex;flex-direction:column;font-weight:700;font-size:.9rem;line-height:1.15;color:var(--ink)}
.rankrow__t small{font-weight:600;font-size:.74rem;color:var(--ink-faint);margin-top:1px}

/* top 10 ranking widget */
.swtabs{margin-left:auto;display:flex;gap:4px}
.swtabs button{font-family:var(--body);font-weight:700;font-size:.72rem;padding:4px 10px;border-radius:8px;border:1.5px solid var(--rule-2);background:transparent;color:var(--ink-faint);cursor:pointer;transition:background .12s,color .12s}
.swtabs button.on{background:var(--seal);border-color:var(--seal);color:#fff}
.t10{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1.5px solid var(--rule);cursor:pointer}
.t10:last-child{border-bottom:none}
.t10:hover .t10__name{color:var(--seal)}
.t10__n{font-family:var(--disp);font-weight:900;font-style:italic;font-size:1.02rem;line-height:1;color:var(--ink-faint);min-width:34px;text-align:center;flex:0 0 34px}
.t10--top .t10__n{font-size:1.75rem}
.t10--g1 .t10__n{color:var(--seal)}
.t10--g2 .t10__n{color:var(--ink)}
.t10--g3 .t10__n{color:var(--ink-soft)}
.t10__cv{width:34px;height:46px;flex:0 0 34px;border:1.5px solid var(--line);border-radius:6px;background-size:cover;background-position:center}
.t10__t{display:flex;flex-direction:column;min-width:0}
.t10__name{font-weight:700;font-size:.88rem;line-height:1.15;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t10__t small{font-weight:600;font-size:.72rem;color:var(--ink-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t10__d{margin-left:auto;flex:0 0 auto;font-weight:800;font-size:.68rem;letter-spacing:.02em;padding:3px 7px;border-radius:99px}
.t10__d--up{color:#8FCF9A;background:rgba(62,122,58,.18)}
.t10__d--dn{color:#E89A8A;background:rgba(200,67,31,.16)}
.t10__d--eq{color:var(--ink-faint);background:var(--paper-2)}
.t10__d--new{color:#FFC58A;background:rgba(242,106,30,.16)}
body.light .t10__d--up{color:#2F6E3C;background:rgba(62,122,58,.14)}
body.light .t10__d--dn{color:#A03A28;background:rgba(200,67,31,.12)}
body.light .t10__d--new{color:#B4550F;background:rgba(242,106,30,.14)}

@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .layout__side{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:var(--s4)}
  .layout__side .swid{flex:1 1 280px;max-width:340px}
}
@media(max-width:760px){
  .adbox--leaderboard{height:72px}
  .adstrip{padding-top:var(--s3)}
}

/* ============ COMMENTS ============ */
.comments{margin-top:var(--s7);border-top:2.5px solid var(--line);padding-top:var(--s5)}
.comments__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.comments__title{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:.01em}
.comments__count{font-family:var(--body);font-weight:700;font-size:.6em;color:var(--ink-faint)}
.comments__sort{display:flex;gap:6px}
.csort{font-weight:700;font-size:.82rem;padding:6px 12px;border-radius:7px;border:1.5px solid var(--rule-2);color:var(--ink-faint);background:transparent}
.csort.on{color:var(--ink);border-color:var(--line);background:var(--paper-2)}

.cavatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.95rem;color:#fff;border:2px solid var(--line);overflow:hidden;
  background:var(--col,var(--indigo));font-family:var(--disp);letter-spacing:.02em}
.cavatar--me{background:var(--seal)}
.cavatar--sm{width:34px;height:34px;flex-basis:34px;font-size:.8rem}

.cbox{display:flex;gap:var(--s3);margin-bottom:var(--s5)}
.cbox__main{flex:1;min-width:0;border:2px solid var(--line);background:var(--paper-card);border-radius:var(--r-btn);
  overflow:hidden;transition:box-shadow .15s}
.cbox__main:focus-within{box-shadow:3px 3px 0 var(--line)}
.cinput{display:block;width:100%;border:none;background:none;outline:none;resize:none;color:var(--ink);
  font-family:var(--body);font-size:.95rem;line-height:1.5;padding:11px 13px;max-height:200px}
.cinput::placeholder{color:var(--ink-faint)}
.cbox__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 9px;border-top:1.5px solid var(--rule)}
.cbox__hint{font-size:.74rem;color:var(--ink-faint);font-weight:600}
.cpost{padding:8px 15px;font-size:.85rem}

.clist{display:flex;flex-direction:column;gap:var(--s5)}
.citem{display:flex;gap:var(--s3)}
.citem__body{flex:1;min-width:0}
.citem__head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.citem__head b{font-weight:700;font-size:.92rem;color:var(--ink)}
.citem__op{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--seal);
  border:1.5px solid var(--seal);border-radius:4px;padding:0 5px;line-height:1.5}
.citem__time{font-size:.76rem;color:var(--ink-faint);font-weight:600}
.citem__text{font-size:.92rem;color:var(--ink-soft);margin:4px 0 8px;white-space:pre-wrap;word-wrap:break-word;line-height:1.55}
.citem__acts{display:flex;align-items:center;gap:16px}
.cact{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.8rem;color:var(--ink-faint)}
.cact:hover{color:var(--ink)}
.clike svg{width:15px;height:15px;transition:transform .12s}
.clike.on{color:var(--seal)}
.clike.on svg{fill:var(--seal);stroke:var(--seal);transform:scale(1.1)}

.creplies{margin-top:var(--s3);padding-left:var(--s4);border-left:2px solid var(--rule);display:flex;flex-direction:column;gap:var(--s3)}
.creply-box{display:flex;gap:8px;margin-top:10px;align-items:flex-start}
.creply-box textarea{flex:1;min-width:0;border:2px solid var(--line);background:var(--paper-card);border-radius:8px;outline:none;
  resize:none;color:var(--ink);font-family:var(--body);font-size:.88rem;line-height:1.45;padding:8px 10px;max-height:140px}
.creply-box textarea::placeholder{color:var(--ink-faint)}
.creply-send{padding:7px 13px;font-size:.8rem;align-self:stretch}

.cempty{font-size:.9rem;color:var(--ink-faint);text-align:center;padding:var(--s5) 0}

/* reader-scoped remap: same component, ink theme */
.comments--reader{max-width:720px;margin-left:auto;margin-right:auto;padding:var(--s5) var(--s4) 0;
  --paper-card:#17150f;--paper-2:#211e16;--ink:var(--reader-text);--ink-soft:#cdc6b6;--ink-faint:var(--reader-faint);
  --line:rgba(233,226,210,.16);--rule:rgba(233,226,210,.09);--rule-2:rgba(233,226,210,.16)}
.comments--reader .btn--solid{background:var(--seal);color:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.45)}
.comments--reader .btn--solid:hover{background:var(--seal-deep);box-shadow:4px 4px 0 rgba(0,0,0,.45)}

/* ============ BROWSE (list) ============ */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin:var(--s6) 0 var(--s4)}
.pagehead__title{font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,4.5vw,2.6rem);line-height:.95}
.pagehead__title .th{font-family:var(--body);font-weight:700;font-size:.42em;display:block;color:var(--ink-soft);margin-top:6px;letter-spacing:0}
.pagehead__count{font-size:.86rem;color:var(--ink-faint);font-weight:600}
.pagehead__count b{color:var(--seal);font-family:var(--disp);font-size:1.15rem}
.filterbar{border:2.5px solid var(--line);background:var(--paper-card);box-shadow:4px 4px 0 var(--line);margin-bottom:var(--s5)}
.filterbar__row{display:flex;align-items:center;gap:9px;padding:var(--s3) var(--s4);border-bottom:1.5px solid var(--rule);flex-wrap:wrap}
.filterbar__row:last-child{border-bottom:none}
.filterbar__lab{font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);flex:0 0 auto;margin-right:2px}
.fchip{font-weight:700;font-size:.82rem;padding:6px 13px;border-radius:var(--r-chip);border:1.5px solid var(--rule-2);color:var(--ink-soft);background:transparent;transition:all .12s;white-space:nowrap}
.fchip:hover{border-color:var(--line);color:var(--ink)}
.fchip.on{background:var(--ink);color:var(--paper-card);border-color:var(--ink)}
.filterbar__spacer{flex:1;min-width:8px}

/* ============ LIBRARY ============ */
.profhead{display:flex;align-items:center;gap:var(--s4);padding:var(--s5);border:2.5px solid var(--line);background:var(--paper-card);box-shadow:5px 5px 0 var(--line);margin:var(--s6) 0 var(--s5)}
.profhead .seal{--d:64px}
.profhead__id{flex:1;min-width:0}
.profhead__name{font-family:var(--disp);font-weight:900;font-size:clamp(1.4rem,4vw,2rem);line-height:1}
.profhead__sub{color:var(--ink-faint);font-weight:600;font-size:.86rem;margin-top:4px}
.profhead__stats{display:flex;gap:var(--s5);flex:0 0 auto}
.pstat{text-align:center}
.pstat b{font-family:var(--disp);font-weight:800;font-size:1.7rem;display:block;line-height:1;color:var(--ink)}
.pstat span{font-size:.72rem;color:var(--ink-faint);font-weight:600}
.crrail{display:grid;grid-auto-flow:column;grid-auto-columns:272px;gap:var(--s4);overflow-x:auto;padding-bottom:var(--s3);scroll-snap-type:x mandatory;scrollbar-width:thin}
.crrail::-webkit-scrollbar{height:8px}.crrail::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:8px}
.crrail>*{scroll-snap-align:start}
.crcard{display:grid;grid-template-columns:70px 1fr;gap:var(--s3);padding:var(--s3);cursor:pointer;transition:transform .14s,box-shadow .14s}
.crcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.crcard .cover{aspect-ratio:2/3}
.crcard .cover__spine{font-size:.68rem;top:5px;left:5px;right:5px}
.crcard__body{min-width:0;display:flex;flex-direction:column;justify-content:center}
.crcard__t{font-weight:700;font-size:.95rem;line-height:1.15;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crcard__ch{font-size:.82rem;color:var(--ink-soft);font-weight:600;margin:3px 0 9px}
.crcard__ch b{color:var(--seal)}
.crbar{height:7px;border-radius:5px;background:var(--paper-2);border:1.5px solid var(--rule-2);overflow:hidden}
.crbar i{display:block;height:100%;background:var(--seal)}
.crcard__pct{font-size:.68rem;color:var(--ink-faint);font-weight:700;margin-top:5px}
.histrow{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);border-bottom:1.5px solid var(--rule);cursor:pointer;transition:background .12s}
.histrow:last-child{border-bottom:none}
.histrow:hover{background:var(--paper-2)}
.histrow .cover{width:36px;aspect-ratio:2/3;flex:0 0 36px}
.histrow .cover__spine,.histrow .cover__foot,.histrow .cover__seal{display:none}
.histrow__t{flex:1;min-width:0;font-weight:700;font-size:.92rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.histrow__t small{display:block;font-weight:600;font-size:.76rem;color:var(--ink-faint)}
.histrow__time{font-size:.76rem;color:var(--ink-faint);font-weight:600;white-space:nowrap}
.lib-empty{padding:var(--s6) var(--s4);text-align:center;border:2.5px dashed var(--rule-2);border-radius:12px;color:var(--ink-faint);font-size:.9rem}
.lib-empty b{display:block;font-family:var(--disp);font-size:1.15rem;color:var(--ink-soft);margin-bottom:6px}
.bookbtn.on{background:var(--seal);color:#fff;border-color:var(--seal)}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .hero__grid{grid-template-columns:1fr;}
  .hero__art{min-height:340px;order:-1}
  .series__top{grid-template-columns:180px 1fr;gap:var(--s5)}
}
@media(max-width:760px){
  .nav,.search{display:none}
  .iconbtn{display:grid}
  .feed{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(3,1fr)}
  .series__facts{grid-template-columns:repeat(2,auto);gap:var(--s4)}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:45;
    background:rgba(242,237,225,.94);backdrop-filter:blur(10px);border-top:2.5px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;
    font-size:.66rem;font-weight:700;color:var(--ink-faint)}
  .bottomnav a.is-active{color:var(--seal)}
  .bottomnav svg{width:21px;height:21px}
  body{padding-bottom:64px}
  section.block{padding-top:var(--s6)}
}
@media(max-width:480px){
  .series__top{grid-template-columns:130px 1fr;gap:var(--s4)}
  .grid{grid-template-columns:repeat(3,1fr);gap:var(--s2)}
  .hero__stats b{font-size:1.4rem}
  .topbar__in{height:56px}
  .block__title{font-size:1.5rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* ============ ORANGE-BLACK THEME OVERRIDES ============ */
body{background:radial-gradient(1000px 520px at 82% -6%, rgba(242,106,30,.30), transparent 58%), radial-gradient(760px 420px at 8% 3%, rgba(226,72,20,.20), transparent 60%), var(--paper)}
body.light{background:var(--paper)}
body.reading{background:var(--reader-bg)}
body::before{background-image:radial-gradient(rgba(255,180,120,.05) .5px,transparent .6px)}

/* seal stamp (orange 新) — references the old NICEOPPAI mark */
.seal{filter:drop-shadow(0 4px 7px rgba(0,0,0,.5))}
.brand__name{color:#FF8F3C}
.hero__sealwrap .seal{animation:none}

/* bars */
.topbar{background:rgba(13,10,7,.82);border-bottom:1px solid var(--line)}
.bottomnav{background:rgba(13,10,7,.9);border-top:1px solid var(--line)}

/* soft rounded cards (was hard comic offsets) */
.panel{border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 46px -28px rgba(0,0,0,.8)}
.cover{border:1px solid var(--line);border-radius:14px}
.mangacard:hover .cover{box-shadow:0 16px 30px -14px rgba(0,0,0,.6)}
.fcard{border-radius:16px}
.fcard:hover{transform:translateY(-3px);box-shadow:0 22px 42px -24px rgba(0,0,0,.65)}
.gtag{border:1px solid var(--rule-2);border-radius:13px;background:var(--paper-card)}
.gtag:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.55);color:var(--seal)}
.chlist__rows{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.series__cover .cover{box-shadow:0 26px 50px -24px rgba(0,0,0,.7)}
.swid{border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 46px -28px rgba(0,0,0,.7);overflow:hidden}
.swid__h{border-bottom:1px solid var(--line)}
.filterbar{border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 42px -28px rgba(0,0,0,.7)}
.profhead{border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 48px -28px rgba(0,0,0,.7)}
.crcard{border-radius:14px}
.crcard:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(0,0,0,.6)}
.crbar{border-color:var(--rule-2)}

/* buttons */
.btn{border-radius:14px}
.btn--solid{background:var(--seal);color:#fff;box-shadow:0 12px 26px -10px rgba(242,106,30,.55)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(242,106,30,.62)}
.btn--solid:active{transform:translateY(0);box-shadow:0 8px 18px -8px rgba(242,106,30,.5)}
.btn--ghost{border:1px solid var(--rule-2);background:rgba(255,255,255,.05)}
.btn--ghost:hover{background:rgba(255,255,255,.09)}

/* inputs / icon buttons */
.search{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05)}
.search:focus-within{box-shadow:0 0 0 3px rgba(242,106,30,.28)}
.iconbtn,.themebtn{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05)}
.iconbtn:hover,.themebtn:hover{background:rgba(255,255,255,.09)}
.themebtn:active{transform:translateY(1px);box-shadow:none}

/* nav */
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.is-active::after{height:2px;border-radius:2px}

/* chips */
.chip{border-radius:9px}
.chip--genre{border-color:var(--rule-2);color:var(--indigo);background:rgba(255,162,62,.1)}
.chip--live{border-color:var(--seal);color:#FFC58A;background:rgba(242,106,30,.14)}

/* comment composer */
.cbox__main{border:1px solid var(--line);border-radius:14px}
.cbox__main:focus-within{box-shadow:0 0 0 3px rgba(242,106,30,.24)}

/* ad slots */
.adbox{border:1px dashed var(--rule-2);border-radius:12px;background:repeating-linear-gradient(45deg,rgba(255,180,120,.05) 0 9px,transparent 9px 18px),var(--paper-card)}
.adbox::before{color:var(--ink-faint);border-color:var(--rule-2)}

/* browse filter chips */
.fchip{border-radius:10px}
.fchip.on{background:var(--seal);color:#fff;border-color:var(--seal)}

/* ============ "ใหม่" badge → red ============ */
.chip--new{border-color:#F5433A;color:#FF6B5E;background:rgba(245,67,58,.14)}
body.light .chip--new{color:#D62B1E;border-color:#E5342B;background:rgba(229,52,43,.08)}

/* ============ BOOKMARKS PAGE ============ */
.bmhead{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding:var(--s5);border:1px solid var(--line);border-radius:20px;background:var(--paper-card);box-shadow:0 24px 48px -28px rgba(0,0,0,.7);margin-bottom:var(--s5)}
.bmhead__ic{width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border-radius:16px;color:#fff;background:linear-gradient(150deg,#FF5C4E,#E5342B);box-shadow:0 12px 26px -8px rgba(229,52,43,.6)}
.bmhead__ic svg{width:30px;height:30px}
.bmhead__id{flex:1;min-width:220px}
.bmhead__name{font-family:var(--disp);font-weight:900;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bmhead__name span{font-family:var(--body);font-weight:700;font-size:.5em;letter-spacing:.14em;color:var(--ink-faint)}
.bmhead__sub{color:var(--ink-faint);font-weight:600;font-size:.88rem;margin-top:6px}
.bmhead__count{text-align:center;flex:0 0 auto;padding:0 var(--s3)}
.bmhead__count b{font-family:var(--disp);font-weight:800;font-size:2.2rem;display:block;line-height:1;color:#FF5C4E}
.bmhead__count span{font-size:.72rem;color:var(--ink-faint);font-weight:600}
.bmtools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:var(--s5)}
.bmclear{margin-left:auto}
.bmclear:hover{border-color:#F5433A;color:#F5433A}
.bmcard{position:relative}
.bmcard__fav{position:absolute;top:8px;right:8px;z-index:4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;line-height:1;color:#fff;background:linear-gradient(150deg,#FF5C4E,#E5342B);border:2px solid rgba(255,255,255,.55);box-shadow:0 5px 14px -3px rgba(229,52,43,.65);cursor:pointer;transition:transform .12s}
.bmcard__fav:hover{transform:scale(1.12)}
.bmcard__fav:active{transform:scale(.92)}
@media(max-width:720px){#savedBtn{display:none}}

/* =====================================================================
   ENGINE-LEGACY BRIDGE
   Restyle the few legacy engine hooks that survive in reskinned templates
   (ratings, pagination, tips, popups). cre.css loads before this file, so
   these rules win by source order. Grows as templates are reskinned.
   ===================================================================== */
.clr{clear:both}
/* engine pagination (.pgg) -> orange pills */
.pgg{list-style:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:var(--s4) 0;margin:0}
.pgg li{display:inline-flex}
.pgg li a,.pgg li span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper-card);color:var(--ink-soft);font-weight:700;font-size:.86rem}
.pgg li a:hover{color:var(--ink);border-color:var(--rule-2);background:var(--paper-2)}
.pgg li.act span,.pgg li .cur{background:var(--seal);border-color:var(--seal);color:#fff}

/* bookmark grid — bkm.js injects: li > a.rmv + a.itm > (span.cvr>img + span.nme) */
#wpm_bkm_lst .bkm_grd{list-style:none;margin:0;padding:0}
#wpm_bkm_lst .bkm_grd li{position:relative}
#wpm_bkm_lst .itm{display:block}
#wpm_bkm_lst .cvr{position:relative;display:block;aspect-ratio:2/3;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-2)}
#wpm_bkm_lst .cvr img{width:100%;height:100%;object-fit:cover}
#wpm_bkm_lst .nme{display:block;font-weight:700;font-size:.9rem;line-height:1.2;color:var(--ink);margin-top:9px}
#wpm_bkm_lst .rmv{position:absolute;top:8px;right:8px;z-index:4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1rem;line-height:1;color:#fff;text-decoration:none;background:linear-gradient(150deg,#FF5C4E,#E5342B);border:2px solid rgba(255,255,255,.55);box-shadow:0 5px 14px -3px rgba(229,52,43,.65)}
#wpm_bkm_lst .rmv:hover{transform:scale(1.1)}

/* flat latest list (manga-latest-chapter-home): li > a.cvr>img + span.ttl>(a.mng+a.mng_chp) + span.dte */
.lts_chp{list-style:none;margin:0;padding:0}
.lts_chp li{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1.5px solid var(--rule)}
.lts_chp li:last-child{border-bottom:none}
.lts_chp .cvr img{width:40px;border-radius:6px;border:1px solid var(--line)}
.lts_chp .ttl{flex:1;min-width:0;display:flex;flex-direction:column}
.lts_chp .ttl .mng{font-weight:700;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lts_chp .ttl .mng_chp{font-size:.8rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lts_chp .dte{font-size:.76rem;color:var(--ink-faint);white-space:nowrap}
.lts_chp .upd_sts,.lts_chp .hot_sts{color:var(--seal);font-size:.72rem;margin-left:4px}
#sct_latest_chapter h1{font-family:var(--disp);font-weight:800;font-size:1.3rem;margin-bottom:var(--s3)}
#sct_latest_chapter .more{display:inline-block;margin-top:var(--s3);color:var(--seal);font-weight:700;font-size:.86rem}

/* advanced-search form (.wpm_frm) */
.wpm_frm .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1.5px solid var(--rule)}
.wpm_frm .row.exp{align-items:flex-start}
.wpm_frm .row label{flex:0 0 130px;font-weight:700;font-size:.86rem;color:var(--ink-soft)}
.wpm_frm .txt,.wpm_frm .cbo{height:38px;border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--ink);padding:0 12px;font-size:.9rem}
.wpm_frm .txt{flex:1;min-width:160px}
.wpm_frm .adv_chk_lst{flex:1;min-width:0}
.wpm_frm .adv_chk_lst .ctn{display:flex;flex-wrap:wrap;gap:6px}
.wpm_frm .adv_chk_lst .nde{border:1.5px solid var(--rule-2);border-radius:8px;padding:4px 10px;font-size:.8rem;color:var(--ink-soft);cursor:pointer}
.wpm_frm .adv_chk_lst .nde .chk{margin-right:4px}
.wpm_frm .adv_chk_lst .nde.chk_inc{border-color:var(--seal);color:var(--seal);background:rgba(242,106,30,.12)}
.wpm_frm .adv_chk_lst .nde.chk_exc{border-color:#F5433A;color:#FF6B5E;background:rgba(245,67,58,.12)}
.tol_tip_hdl{color:var(--seal);cursor:help;font-weight:700}

/* sidebar widget templates (wgt/*) rendered inside .layout__side .wid */
.wpm_wgt ul{list-style:none;margin:0;padding:0}
.wpm_wgt.mng_ppl li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1.5px solid var(--rule)}
.wpm_wgt.mng_ppl li:last-child{border-bottom:none}
.wpm_wgt.mng_ppl .cvr img{width:38px;border-radius:6px;border:1px solid var(--line)}
.wpm_wgt.mng_ppl .det{min-width:0;flex:1}
.wpm_wgt.mng_ppl .det .ttl{font-weight:700;font-size:.9rem;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpm_wgt.mng_ppl .det .chp{font-size:.78rem;color:var(--ink-soft)}
.wpm_wgt.mng_ppl .det b{color:var(--seal);font-size:.72rem}
.wpm_wgt .mng_det_pop{color:inherit}
/* statistics widget */
.wpm_wgt.mng_stc .stc_grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.wpm_wgt.mng_stc .stc_item{text-align:center;padding:10px 6px;border:1px solid var(--rule-2);border-radius:10px}
.wpm_wgt.mng_stc .stc_item b{display:block;font-family:var(--disp);font-weight:800;font-size:1.4rem;color:var(--seal)}
.wpm_wgt.mng_stc .stc_item span{font-size:.72rem;color:var(--ink-faint)}
/* hover detail popup (ThickBox, ajx/mng-det-pop) */
.wpm_pop.mng_det{max-width:520px;padding:var(--s4);background:var(--paper-card);color:var(--ink)}
.wpm_pop.mng_det .cvr{float:left;width:150px;margin:0 var(--s4) var(--s3) 0}
.wpm_pop.mng_det .cvr img{width:100%;border-radius:10px;border:1px solid var(--line)}
.wpm_pop.mng_det .det p{font-size:.86rem;color:var(--ink-soft);margin:0 0 4px}
.wpm_pop.mng_det .det b{color:var(--ink)}

/* single-page reader (mng-rdr-sng.js) page nav */
.rnavbar--single{flex-wrap:wrap}
.prw{text-align:center}
.prw img{max-width:100%;height:auto;margin:0 auto;border-radius:6px}
.pag_lst .pag{display:inline-block;min-width:30px;padding:3px 9px;margin:2px;border:1px solid rgba(255,255,255,.16);border-radius:6px;color:var(--reader-text);font-weight:700;font-size:.82rem}
.pag_lst .pag:hover{background:rgba(255,255,255,.08);color:#fff}
#sct_img_mng_enl{max-width:100%}
#sct_img_mng_enl img{max-width:100%;height:auto}

/* ---- sidebar widget bridges (keep each widget's JS contract; style only) ---- */
/* latest-chapter widget list */
.wpm_wid.mng_lts_chp ul,.wpm_wgt.mng_lts_chp ul{list-style:none;margin:0;padding:0}
.wpm_wid.mng_lts_chp li{padding:7px 0;border-bottom:1.5px solid var(--rule);font-size:.88rem}
.wpm_wid.mng_lts_chp li:last-child{border-bottom:none}
.wpm_wid.mng_lts_chp li a{color:var(--ink)}
.wpm_wid.mng_lts_chp li a:hover{color:var(--seal)}
.wpm_wid.mng_lts_chp li.mre a{color:var(--seal);font-weight:700}
/* index widget tabs (cre.js wpm_tab — hooks .wpm_tab_pln/.wpm_tab_ctt) */
.wpm_wgt.mng_idx .wpm_tab_pln{list-style:none;display:flex;gap:6px;margin:0 0 var(--s3);padding:0;flex-wrap:wrap}
.wpm_wgt.mng_idx .wpm_tab_pln li a{display:inline-block;padding:5px 11px;border-radius:8px;border:1.5px solid var(--rule-2);color:var(--ink-soft);font-weight:700;font-size:.8rem}
.wpm_wgt.mng_idx .wpm_tab_pln li a.selected{background:var(--seal);border-color:var(--seal);color:#fff}
.wpm_wgt.mng_idx .wpm_tab_ctt{display:flex;flex-wrap:wrap;gap:6px}
.wpm_wgt.mng_idx .wpm_tab_ctt a{display:inline-block;padding:3px 8px;border:1px solid var(--rule);border-radius:6px;color:var(--ink-soft);font-size:.82rem}
.wpm_wgt.mng_idx .wpm_tab_ctt a:hover{color:var(--seal);border-color:var(--rule-2)}
.wpm_wgt.mng_idx .wpm_tab_ctt ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.wpm_wgt.mng_idx .cbo{width:100%;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--ink);padding:0 10px}
/* of-the-week widget */
.wpm_wgt.mng_wek .cvr{float:left;width:70px;margin:0 var(--s3) var(--s2) 0}
.wpm_wgt.mng_wek .cvr img{width:100%;border-radius:8px;border:1px solid var(--line)}
.wpm_wgt.mng_wek .ttl{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--ink)}
.wpm_wgt.mng_wek b{color:var(--ink)}
.wpm_wgt.mng_wek a{color:var(--seal)}
/* slideshow widget (cre.js wpm_sld_shw — keep .sld_hld/.sld_rnr/.sld/.sld_nav) */
.wpm_wgt.sld_shw .sld_hld{max-width:100%;overflow:hidden;border-radius:12px;border:1px solid var(--line)}
.wpm_wgt.sld_shw .sld_nav{text-align:center;margin:0}
.wpm_wgt.sld_shw .sld_nav a{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rule-2);margin:0 3px}
.wpm_wgt.sld_shw .sld_nav a.sel{background:var(--seal)}
/* search widget */
.wpm_wid.mng_sch .cmd{width:100%}