/* Code Yantra notes pages: library, book pages and the reader popup */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:'Inter',system-ui,sans-serif; color:#E2E8F0; background:#0B1120;
  background-image: radial-gradient(60% 50% at 80% -5%, rgba(37,99,235,.30) 0%, transparent 60%),
    radial-gradient(50% 40% at 0% 10%, rgba(59,130,246,.15) 0%, transparent 60%); background-repeat:no-repeat;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, select, textarea { user-select:text; -webkit-user-select:text; }
img, canvas { -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
a { color:inherit; }
:focus-visible { outline:3px solid #38BDF8; outline-offset:2px; border-radius:6px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }

/* top bar */
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { width:40px; height:40px; border-radius:50%; }
.brand span { font-weight:800; font-size:20px; color:#fff; }
.brand span i { color:#3B82F6; font-style:normal; }
.top-nav { display:flex; gap:6px; flex-wrap:wrap; }
.top-nav a { text-decoration:none; font-size:14px; font-weight:600; color:#CBD5E1; padding:8px 12px; border-radius:999px; }
.top-nav a:hover { background:rgba(96,165,250,.12); color:#fff; }
@media (max-width:560px) { .top-nav a:not(:first-child) { display:none; } }

/* hero */
.hero { padding:22px 0 6px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:.22em; color:#60A5FA; }
h1 { font-size:clamp(30px,6vw,54px); line-height:1.1; letter-spacing:-.02em; margin:14px 0 0; color:#F8FAFC; font-weight:800; }
h1 i { font-style:normal; background:linear-gradient(90deg,#3B82F6,#22D3EE); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede { margin-top:16px; font-size:clamp(16px,2.2vw,19px); line-height:1.65; color:#94A3B8; max-width:70ch; }
.lede b { color:#E2E8F0; }
.stats { margin-top:26px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-width:640px; }
.stats.small { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:440px; }
.stats div { border:1px solid rgba(96,165,250,.22); background:rgba(15,23,42,.6); border-radius:14px; padding:14px 16px; }
.stats b { display:block; font-size:clamp(20px,3.4vw,28px); font-weight:800; color:#F8FAFC; }
.stats span { font-size:13px; color:#94A3B8; font-weight:600; }
@media (max-width:520px) { .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }

h2 { font-size:clamp(22px,3.4vw,30px); font-weight:800; color:#F8FAFC; margin:54px 0 6px; letter-spacing:-.01em; }

/* continue reading */
.continue h2 { margin-top:40px; }
.cont-list { margin-top:14px; display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.cont-item { flex:0 0 auto; scroll-snap-align:start; display:flex; align-items:center; gap:12px; min-width:260px; max-width:320px;
  padding:10px 14px 10px 10px; border-radius:14px; border:1px solid rgba(34,211,238,.35); background:rgba(8,47,73,.45);
  cursor:pointer; text-align:left; color:inherit; font:inherit; }
.cont-item img { width:44px; height:62px; object-fit:cover; object-position:top; border-radius:4px; }
.cont-item b { display:block; font-size:15px; color:#F8FAFC; }
.cont-item span { font-size:13px; color:#94A3B8; }
.cont-bar { display:block; margin-top:6px; height:4px; border-radius:4px; background:rgba(148,163,184,.25); overflow:hidden; }
.cont-bar i { display:block; height:100%; background:linear-gradient(90deg,#2563EB,#22D3EE); }

/* toolbar */
.toolbar { position:sticky; top:0; z-index:5; margin:40px -20px 0; padding:14px 20px; display:flex; flex-direction:column; gap:10px;
  background:rgba(11,17,32,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(96,165,250,.12); }
#q { width:100%; padding:14px 18px; border-radius:14px; border:1px solid rgba(96,165,250,.3); background:#0F172A; color:#F8FAFC;
  font:500 16px 'Inter',system-ui,sans-serif; }
#q::placeholder { color:#64748B; }
.chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:0 0 auto; padding:8px 14px; border-radius:999px; border:1px solid rgba(96,165,250,.3); background:transparent; color:#CBD5E1;
  font:600 14px 'Inter',system-ui,sans-serif; cursor:pointer; }
.chip:hover { border-color:rgba(96,165,250,.7); color:#fff; }
.chip.on { background:#2563EB; border-color:#2563EB; color:#fff; }

/* cards */
.grid { margin-top:22px; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
@media (max-width:540px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
.n-card { display:flex; flex-direction:column; border:1px solid rgba(96,165,250,.2); border-radius:16px; background:rgba(15,23,42,.55);
  overflow:hidden; transition:transform .18s, border-color .18s, background .18s; scroll-margin-top:170px; }
.n-card:hover { border-color:rgba(96,165,250,.6); background:rgba(15,23,42,.9); transform:translateY(-3px); }
.n-card[hidden] { display:none; }
.n-cover { position:relative; display:block; aspect-ratio:210/297; max-height:320px; background:#f7f5ef; overflow:hidden; cursor:pointer; }
.n-cover img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; pointer-events:none; transition:transform .3s; }
.n-card:hover .n-cover img { transform:scale(1.03); }
.badge { position:absolute; top:10px; left:10px; z-index:1; padding:4px 10px; border-radius:999px; font:800 11px 'Inter',sans-serif; letter-spacing:.08em; }
.badge.new { background:#F59E0B; color:#1F2937; box-shadow:0 4px 10px rgba(0,0,0,.25); }
.n-body { display:flex; flex-direction:column; gap:4px; padding:14px 16px 16px; flex:1; }
.n-title { font-size:17px; font-weight:700; color:#F8FAFC; text-decoration:none; line-height:1.3; }
.n-title:hover { color:#93C5FD; }
.n-sub { font-size:14px; color:#94A3B8; }
.n-meta { font-size:12px; font-weight:600; letter-spacing:.04em; color:#64748B; margin-top:2px; }
.n-reads:not(:empty)::before { content:" \00b7  "; }
.n-cont { font-size:13px; font-weight:600; color:#22D3EE; }
.n-actions { margin-top:auto; padding-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:540px) {
  .n-body { padding:12px; }
  .n-title { font-size:15px; }
  .n-sub { font-size:13px; }
  .n-actions .copy { display:none; }
  .n-actions .btn { width:100%; text-align:center; }
}
.empty { margin-top:24px; color:#94A3B8; font-size:16px; }
.empty a { color:#60A5FA; }

/* book page */
.crumbs { font-size:14px; color:#64748B; margin-top:6px; }
.crumbs a { color:#94A3B8; text-decoration:none; }
.crumbs a:hover { color:#fff; }
.book { margin-top:22px; display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(20px,4vw,48px); align-items:start; }
.book-cover { position:relative; display:block; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.45); background:#f7f5ef; }
.book-cover img { display:block; width:100%; height:auto; pointer-events:none; }
.book-info h1 { margin-top:10px; }
.book-info .btns { margin-top:24px; }
.book-info .n-cont { display:block; margin-top:16px; font-size:15px; }
@media (max-width:760px) { .book { grid-template-columns:1fr; } .book-cover { max-width:300px; } }
.inside .topics { margin:18px 0 0; padding:0; list-style:none; counter-reset:t; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.inside .topics li { counter-increment:t; display:flex; gap:12px; align-items:center; padding:12px 16px; border-radius:12px;
  border:1px solid rgba(96,165,250,.16); background:rgba(15,23,42,.5); font-size:15px; color:#E2E8F0; }
.inside .topics li::before { content:counter(t, decimal-leading-zero); font-weight:800; font-size:13px; color:#60A5FA; min-width:22px; }

/* notify */
.notify { margin-top:60px; padding:clamp(22px,4vw,36px); border-radius:22px; border:1px solid rgba(96,165,250,.28);
  background:rgba(15,23,42,.6); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:24px; align-items:center; }
.notify h2 { margin:0; }
.notify p { color:#94A3B8; margin:8px 0 0; line-height:1.6; }
.notify-form { display:grid; grid-template-columns:1fr auto auto; gap:10px; }
.notify-form input[type=email], .notify-form select { padding:14px 16px; border-radius:12px; border:1px solid rgba(96,165,250,.3);
  background:#0B1120; color:#F8FAFC; font:500 15px 'Inter',system-ui,sans-serif; min-width:0; }
.notify-form .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.nf-msg { grid-column:1/-1; margin:0; min-height:1.2em; font-size:14px; font-weight:600; }
.nf-msg.ok { color:#34D399; } .nf-msg.err { color:#F87171; }
@media (max-width:820px) { .notify { grid-template-columns:1fr; } }
@media (max-width:520px) { .notify-form { grid-template-columns:1fr; } }

/* buttons, cta, footer */
.cta { margin:56px 0 70px; padding:clamp(24px,4vw,40px); border-radius:22px; border:1px solid rgba(34,211,238,.3);
  background:linear-gradient(135deg, rgba(8,47,73,.6), rgba(15,23,42,.6)); }
.cta h2 { margin:0; }
.cta p { color:#94A3B8; font-size:17px; line-height:1.6; margin:12px 0 0; max-width:60ch; }
.cta b { color:#E2E8F0; }
.btns { margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.btn { display:inline-block; text-decoration:none; font-weight:700; font-size:16px; padding:14px 26px; border-radius:999px;
  background:linear-gradient(90deg,#2563EB,#0EA5E9); color:#fff; border:0; cursor:pointer; font-family:inherit; transition:filter .15s, transform .15s; }
.btn:hover { filter:brightness(1.1); }
.btn:active { transform:scale(.98); }
.btn[disabled] { opacity:.6; cursor:wait; }
.btn.ghost { background:transparent; border:1px solid rgba(96,165,250,.45); color:#E2E8F0; }
.btn.sm { font-size:14px; padding:10px 16px; }
footer { border-top:1px solid rgba(148,163,184,.12); padding:26px 0 90px; color:#64748B; font-size:14px; line-height:1.8; }
footer a { color:#94A3B8; }

/* ---------- reader popup (SweetAlert2) ---------- */
.nv-wrap.swal2-container { padding:12px; background:rgba(2,6,23,.85) !important; }
.nv-pop.swal2-popup { display:flex !important; flex-direction:column; height:calc(100dvh - 24px); max-height:calc(100dvh - 24px);
  padding:0; border:1px solid rgba(96,165,250,.25); border-radius:16px; overflow:hidden; }
.nv-html.swal2-html-container { margin:0; padding:0; flex:1; min-height:0; overflow:hidden; display:flex !important; text-align:left; }
.nv { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; }
.nv-bar { display:flex; align-items:center; gap:12px; padding:12px 56px 12px 18px; border-bottom:1px solid rgba(96,165,250,.18);
  background:#0F172A; color:#E2E8F0; font:600 15px 'Inter',system-ui,sans-serif; }
.nv-t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#F8FAFC; }
.nv-c { display:flex; align-items:center; gap:6px; color:#94A3B8; white-space:nowrap; }
.nv-c b { color:#E2E8F0; font-weight:600; }
.nv-in { width:58px; padding:6px 8px; border-radius:8px; border:1px solid rgba(96,165,250,.35); background:#0B1120; color:#F8FAFC;
  font:600 14px 'Inter',system-ui,sans-serif; text-align:center; -moz-appearance:textfield; }
.nv-in::-webkit-outer-spin-button, .nv-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.nv-z { padding:6px 12px; border-radius:999px; border:1px solid rgba(96,165,250,.45); background:transparent; color:#E2E8F0;
  font:600 13px 'Inter',system-ui,sans-serif; cursor:pointer; }
.nv-prog { height:3px; background:rgba(148,163,184,.18); }
.nv-prog i { display:block; height:100%; width:0; background:linear-gradient(90deg,#2563EB,#22D3EE); transition:width .2s; }
.nv-x.swal2-close { position:absolute; top:6px; right:6px; color:#94A3B8; font-size:34px; width:44px; height:44px; z-index:3; }
.nv-x.swal2-close:hover { color:#fff; }
.nv-x.swal2-close:focus { box-shadow:none; }
.nv-scroll { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:#1E293B; outline:none; }
.nv-pages { width:100%; margin:0 auto; padding:14px; display:flex; flex-direction:column; gap:14px; transition:width .15s; }
.nv-pg { position:relative; width:100%; aspect-ratio:1024/1440; background:#f7f5ef; border-radius:4px; overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.35); }
.nv-pg::before { content:attr(data-label) " \2022  loading\2026"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#94A3B8; font:600 15px 'Inter',system-ui,sans-serif; }
.nv-pg[data-state="ready"]::before { content:none; }
.nv-pg[data-state="error"]::before { content:attr(data-label) " \2022  could not load, scroll to retry"; }
.nv-pg canvas { position:relative; display:block; width:100%; height:100%; pointer-events:none; }
@media (max-width:640px) {
  .nv-wrap.swal2-container { padding:0; }
  .nv-pop.swal2-popup { width:100vw !important; height:100dvh; max-height:100dvh; border-radius:0; border:0; margin:0; }
  .nv-bar { padding:10px 52px 10px 12px; gap:8px; font-size:14px; }
  .nv-in { width:50px; }
  .nv-pages { padding:8px; gap:8px; }
}
@media (max-width:380px) { .nv-z { display:none; } }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

/* no printing, no screenshot flash */
@media print { html, body { display:none !important; } }
html.nv-hide body { filter:blur(30px); }