@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght,SOFT,WONK@9..144,500,0,1;9..144,700,0,1&display=swap');
:root{
  --paper:#fff8ef;
  --paper-2:#fff4ea;
  --cream:#fff1e2;
  --ink:#37251e;
  --muted:#76685e;
  --pink:#f9b2a8;
  --coral:#ea765e;
  --accent:#ee6f52;
  --accent-2:#ffaf6c;
  --deep:#175e69;
  --deep-2:#2f7d8a;
  --lightgreen:#e2f2ea;
  --lilac:#efe8ff;
  --sky:#e8f6ff;
  --sun:#ffd87c;
  --border:#edd8c5;
  --white:#fff;
  --chapter-accent:#ef7a5f;
  --chapter-accent-2:#ffbd6d;
  --chapter-soft:#fff0e7;
  --chapter-soft-2:#fff8f2;
  --chapter-ink:#603126;
  --chapter-mint:#ddf2e6;
  --chapter-shadow:0 26px 70px rgba(100,45,27,.16);
  --shadow:0 22px 70px rgba(94,59,41,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, #ffe7d5 0, transparent 22%),
    radial-gradient(circle at top right, #ffeed9 0, transparent 26%),
    linear-gradient(180deg,var(--paper) 0%, #fff9f1 30%, #fff6ee 100%);
  color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:15px;
  line-height:1.75;
}
main{overflow:hidden}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:'Fraunces',Georgia,serif;line-height:1.1;letter-spacing:-.045em}
h1{font-size:clamp(44px,5vw,82px)}
h2{font-size:clamp(30px,3.6vw,50px)}
h3{font-size:22px;line-height:1.3;letter-spacing:-.02em}
em{color:var(--accent);font-weight:600;font-style:normal}
button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}a:hover{color:var(--accent)}
.section-width{width:min(1140px,calc(100% - 44px));margin-inline:auto}
.view{display:none}.view.active{display:block}
.header{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:15px max(24px,calc((100vw - 1140px)/2));
  background:rgba(255,248,240,.86);
  border-bottom:1px solid rgba(237,216,197,.85);
  backdrop-filter:blur(16px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;letter-spacing:.14em;font-size:13px;line-height:1.2}
.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:.2em;margin-top:6px}
.brand-mark{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;font-size:28px;color:white;
  background:linear-gradient(135deg,#ff916f 0%,#ec6f63 58%,#d25553 100%);
  box-shadow:0 12px 24px rgba(234,118,94,.28)
}
.header-actions{display:flex;align-items:center;gap:11px}
.text-btn{background:none;border:0;padding:10px 7px;color:var(--ink);font-size:13px;font-weight:700}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 24px;border-radius:999px;
  text-decoration:none;font-weight:800;font-size:13px;border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow:0 10px 24px rgba(76,35,25,.06)
}
.btn:hover{transform:translateY(-2px);color:inherit;box-shadow:0 16px 30px rgba(76,35,25,.12)}
.btn-primary{background:linear-gradient(135deg,var(--accent) 0%, #ff9168 100%);color:#fff;border-color:#ea6b51}
.btn-primary:hover{color:#fff;background:linear-gradient(135deg,#de6145 0%,#ff885c 100%)}
.btn-dark{background:linear-gradient(135deg,#43302a 0%,#291d18 100%);color:#fff}
.btn-dark:hover{color:#fff}
.btn-outline{background:rgba(255,255,255,.88);color:var(--ink);border-color:var(--border)}
.btn-cream{background:#f5e9d9;color:var(--ink);border-color:#ead8c4}
.btn-small{font-size:12px;min-height:39px;padding:8px 14px}
.btn-whatsapp{background:linear-gradient(135deg,#1aa36f 0%,#157a58 100%);color:#fff}
.btn-whatsapp:hover{color:#fff}
.fill{width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.19em;font-weight:800;color:#b1634f}
.little-dot{display:inline-block;width:8px;height:8px;background:linear-gradient(180deg,var(--accent),#ffb67c);border-radius:50%;box-shadow:0 0 0 5px rgba(238,111,82,.12)}
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:64px;padding-top:78px;padding-bottom:82px;position:relative}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(8px);z-index:-1}
.hero:before{width:220px;height:220px;background:#ffe7d2;right:8%;top:0;opacity:.72}
.hero:after{width:170px;height:170px;background:#e2f2ea;left:40%;bottom:25px;opacity:.8}
.hero h1{margin:18px 0 20px}
.hero .lead{font-size:16px;max-width:520px;color:var(--muted);line-height:1.95}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
.hero-attributes{display:flex;gap:15px;flex-wrap:wrap;font-size:11px;color:var(--muted);font-weight:700}
.hero-attributes span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(237,216,197,.65)}
.hero-visual{position:relative;min-height:590px;display:grid;place-items:center}
.halo{
  position:absolute;inset:5% 1%;
  background:radial-gradient(circle at 30% 30%, #ffeab4 0, #fbd9b5 28%, #f6c7a0 56%, #f5dfc1 100%);
  border-radius:42% 52% 42% 48%;transform:rotate(-9deg);box-shadow:inset 0 -20px 50px rgba(255,255,255,.45)
}
.cover{position:relative;z-index:1;width:min(80%,360px);border-radius:18px;box-shadow:18px 28px 54px rgba(82,45,36,.25);transform:rotate(4deg);animation:book-sway 7s ease-in-out infinite}
.hero-note{
  position:absolute;z-index:3;bottom:15px;left:12px;background:linear-gradient(135deg,#ffffff 0%,#fff5ec 100%);
  border:1px solid rgba(237,216,197,.8);border-radius:22px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;padding:15px 18px;transform:rotate(-7deg)
}
.hero-note b{color:var(--accent);font-size:39px;font-family:Georgia}
.hero-note span{font-size:10px;line-height:1.3;font-weight:900;letter-spacing:.1em}
.marquee{
  background:linear-gradient(90deg,#ef9e80 0%,#f7bf7d 45%,#86cbbd 100%);
  padding:13px 15px;color:#4e2a20;display:flex;gap:40px;justify-content:space-around;text-align:center;
  font-size:11px;letter-spacing:.16em;font-weight:900;overflow:hidden;white-space:nowrap;border-block:1px solid rgba(255,255,255,.35)
}
.marquee span{color:#fff8f0}
.section-gap{padding:92px 0}.section-heading{max-width:680px;margin:0 auto 42px;text-align:center}.section-heading h2{margin:14px 0}.section-heading p{color:var(--muted)}
.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mini-card{
  border:1px solid rgba(237,216,197,.85);border-radius:30px;padding:30px;background:linear-gradient(180deg,#fff 0%,#fffaf4 100%);
  box-shadow:0 18px 44px rgba(102,55,35,.05)
}
.mini-card h3{font-size:20px;margin-bottom:7px}.mini-card p{font-size:13px;color:var(--muted);margin:0}
.mini-icon{display:grid;place-items:center;width:54px;height:54px;background:linear-gradient(180deg,#fff1df 0%,#ffe1cf 100%);border-radius:18px;font-size:29px;color:var(--coral);margin-bottom:22px;box-shadow:0 10px 20px rgba(234,118,94,.16)}
.sample-block{
  background:linear-gradient(135deg,#e8f4ea 0%,#fff8ef 45%,#ffeadd 100%);border:1px solid rgba(223,239,232,.75);
  border-radius:36px;display:grid;grid-template-columns:1fr 1fr;gap:55px;padding:36px 65px 36px 36px;align-items:center;box-shadow:var(--shadow)
}
.sample-block h2{margin:20px 0}.sample-block p{color:#617367}.sample-art{border-radius:28px;overflow:hidden;background:#dcecdf;box-shadow:0 16px 34px rgba(86,110,91,.12)}
.sample-art img{width:100%;display:block}
.toc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 21px}
.toc-item{display:flex;align-items:center;gap:18px;padding:15px 20px;background:linear-gradient(180deg,#fff 0%,#fff9f4 100%);border-radius:16px;border:1px solid #eee4d6;font-size:13px;font-weight:700;box-shadow:0 8px 16px rgba(96,50,34,.04)}
.toc-item i{color:var(--accent);font-size:14px;font-style:normal;font-weight:900}.toc-item span{flex:1}.toc-lock{color:#c7b3a3;font-weight:600}
.order-area{background:linear-gradient(180deg,#f7e7d8 0%,#fff6ee 100%);margin-top:26px;padding:84px 0;position:relative}
.order-area:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 25%, rgba(255,230,201,.85), transparent 24%), radial-gradient(circle at 90% 80%, rgba(216,240,230,.75), transparent 22%);pointer-events:none}
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:start;position:relative}
.order-story h2{margin:15px 0 22px}.order-story>p{color:#745f51}
.price-tag{margin-top:38px;background:linear-gradient(135deg,#2f251f 0%,#543529 100%);color:#fff;border-radius:28px;padding:26px 30px;display:flex;flex-direction:column;align-items:flex-start;max-width:360px;box-shadow:0 18px 34px rgba(50,28,21,.18)}
.price-tag span{font-size:10px;letter-spacing:.2em}.price-tag strong{font-size:46px;font-family:Georgia;line-height:1.55}.price-tag small{font-size:11px;color:#e5d7cd}.trust-note{color:#795e4e;font-size:12px;margin-top:20px;max-width:360px}
.purchase-card{background:linear-gradient(180deg,#fff 0%,#fffaf5 100%);border:1px solid #efe5db;padding:35px;border-radius:34px;box-shadow:var(--chapter-shadow)}
.purchase-card h3{margin:10px 0}.purchase-card p{color:var(--muted);font-size:13px}
.step-label{font-size:10px;font-weight:900;letter-spacing:.18em;color:#bc715a}
.purchase-card form,.gate form{display:grid;gap:14px}.purchase-card label,.gate label{display:block;font-weight:800;font-size:12px}
input:not([type=checkbox]),select{background:#fffefb;border:1px solid #e6dccc;border-radius:14px;padding:13px 14px;width:100%;outline:none;min-height:48px;color:var(--ink);box-shadow:0 6px 14px rgba(109,70,50,.03) inset}
label>input:not([type=checkbox]){display:block;margin-top:5px}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(246,174,162,.22)}
.check{display:flex!important;align-items:flex-start;gap:10px;font-size:11px!important;font-weight:500!important;line-height:1.55}.check input{accent-color:var(--accent);margin-top:4px;min-width:17px;min-height:17px}.check a{text-decoration:underline}
.pay-box{
  border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,#fff8f1 0%,#fff 100%);
  padding:22px 20px;margin:17px 0;text-align:center;box-shadow:0 18px 36px rgba(110,62,42,.07)
}
.pay-box h3{font-size:27px;letter-spacing:.02em;margin:4px 0}.pay-box p{margin:0 0 12px}.payment-caption{font-size:10px;font-weight:900;letter-spacing:.13em;color:#aa776a}
.qr-box{
  text-align:center;border:1px dashed #e3cabb;border-radius:24px;padding:16px;background:linear-gradient(180deg,#fff8f2 0%,#ffffff 100%);
  box-shadow:0 16px 34px rgba(90,47,31,.06)
}
.qr-box>p{font-size:11px;font-weight:800;letter-spacing:.16em;margin:4px 0 10px}
.qr-box img{
  width:min(100%,340px);display:block;margin:10px auto 12px;background:#fff;border-radius:20px;padding:10px;
  box-shadow:0 18px 35px rgba(55,33,24,.12);mix-blend-mode:multiply;image-rendering:auto
}
.qr-box small{display:block;color:var(--muted);font-size:11px;line-height:1.6}.top-gap{margin-top:25px}
.soft-note{background:linear-gradient(135deg,#fff1e5 0%,#fff9f1 100%);padding:14px;border-radius:14px;margin-top:16px;font-size:12px;color:#875e45;border:1px solid #f3dac8}
.privacy{padding:68px 0;max-width:900px}.privacy h2{font-size:28px}.privacy p{color:var(--muted);font-size:13px}.privacy details{border-top:1px solid var(--border);margin-top:20px;padding-top:15px;font-size:13px}.privacy summary{font-weight:800;cursor:pointer}.revoke-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.revoke-form .btn{grid-column:span 2}
.footer{display:flex;justify-content:space-between;gap:25px;align-items:center;border-top:1px solid var(--border);padding:25px max(24px,calc((100vw - 1140px)/2));font-size:12px;background:rgba(255,255,255,.4)}
.footer>div{font-weight:900;letter-spacing:.1em;white-space:nowrap}.footer span{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:10px}.footer p{font-size:11px;color:var(--muted);margin:0;max-width:420px}
.page-view,.admin-view{padding-top:44px;padding-bottom:88px;min-height:70vh}
#read{
  --chapter-accent:#ef7a5f;
  --chapter-accent-2:#ffbd6d;
  --chapter-soft:#fff0e7;
  --chapter-soft-2:#fff8f2;
  --chapter-ink:#603126;
  --chapter-mint:#ddf2e6;
}
.reader-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:30px}.reader-head h2{margin:8px 0}
.gate{width:min(430px,100%);padding:36px;background:linear-gradient(180deg,#fff 0%,#fffaf4 100%);border:1px solid var(--border);border-radius:30px;box-shadow:var(--chapter-shadow);margin:35px auto;text-align:center}
.gate-icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ffe6d8 0%,#ffd3c2 100%);color:#b85d45;font-size:35px;display:grid;place-items:center;margin:0 auto 17px;box-shadow:0 12px 24px rgba(234,118,94,.14)}
.gate h3{margin-bottom:7px}.gate p,.gate small{font-size:12px;color:var(--muted)}.gate form{text-align:left;margin:25px 0 15px}.gate small{display:block}.simple-link{display:block;font-size:12px;margin-top:20px;color:var(--deep)}
.reader-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.reader-sidebar{
  position:sticky;top:92px;border:1px solid rgba(237,216,197,.78);border-radius:26px;
  background:linear-gradient(180deg,#fff 0%,#fff9f4 100%);padding:18px;max-height:78vh;overflow:auto;
  box-shadow:0 18px 44px rgba(102,53,33,.08)
}
.sidebar-heading{font-size:11px;letter-spacing:.1em;font-weight:900;display:flex;justify-content:space-between;padding:8px 4px 15px}.sidebar-heading span{color:var(--chapter-accent)}
.reader-toc{display:grid;gap:7px}
.reader-toc button{
  text-align:left;display:flex;align-items:flex-start;gap:11px;border:0;background:transparent;border-radius:16px;padding:11px 10px;font-size:12px;color:#6b5c52;line-height:1.45;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.reader-toc button:hover{background:rgba(255,244,236,.95);transform:translateX(2px)}
.reader-toc button b{color:var(--chapter-accent)}
.reader-toc button.active{background:linear-gradient(135deg,var(--chapter-soft) 0%,#fff 100%);color:var(--chapter-ink);font-weight:800;box-shadow:0 10px 20px rgba(120,60,42,.08)}
.reading-sheet{
  position:relative;min-width:0;background:linear-gradient(180deg,#fff 0%,#fffbf7 100%);border:1px solid rgba(237,216,197,.8);border-radius:32px;overflow:hidden;box-shadow:var(--chapter-shadow)
}
.reading-sheet::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--chapter-accent) 16%, white) 0, transparent 23%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--chapter-accent-2) 18%, white) 0, transparent 27%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 25%);
}
.chapter-top{padding:24px 36px 18px;display:flex;justify-content:space-between;gap:10px;font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--chapter-accent);position:relative;z-index:1}
.spark-text{color:color-mix(in srgb, var(--chapter-accent) 58%, #8a6f63)}
.chapter-illustration{
  position:relative;margin:0 28px;border-radius:28px;overflow:hidden;
  background:linear-gradient(135deg,var(--chapter-soft) 0%, var(--chapter-soft-2) 100%);
  box-shadow:0 18px 34px rgba(118,69,50,.10)
}
.chapter-illustration::after{content:"";position:absolute;inset:auto 14px 14px auto;width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg, rgba(255,255,255,.22), transparent)}
.chapter-illustration img{width:100%;display:block;max-height:360px;object-fit:cover}
.reading-body{position:relative;z-index:1;padding:36px clamp(22px,6vw,76px) 22px}
.reading-body h2{margin:12px 0 21px;font-size:clamp(31px,4vw,48px);color:var(--chapter-ink)}
.reading-body p{color:#5d5148;font-size:15px;line-height:1.97}
.reading-body .opening{font-weight:600;color:#4e423a;font-size:17px}
.phrases-box{
  margin:32px 0;padding:24px;background:linear-gradient(135deg,var(--chapter-soft) 0%, #fff 100%);
  border-radius:24px;border:1px solid rgba(237,216,197,.75);box-shadow:0 16px 28px rgba(116,69,50,.06)
}
.phrases-box h3{font-family:Georgia;font-size:22px;margin-bottom:15px;color:var(--chapter-ink)}
.phrases-box p{
  font-style:italic;padding:13px 15px;background:#fff;border-left:4px solid var(--chapter-accent);border-radius:0 12px 12px 0;
  font-weight:600;font-size:14px;margin:10px 0;box-shadow:0 10px 16px rgba(118,68,49,.05)
}
.practice-box{
  padding:21px 25px;border-radius:22px;background:linear-gradient(135deg,var(--chapter-mint) 0%, #eff9f2 100%);
  border:1px solid rgba(180,220,194,.85);box-shadow:0 14px 26px rgba(65,105,85,.07)
}
.practice-box span{font-size:10px;font-weight:900;letter-spacing:.15em;color:#426958}
.practice-box p{margin:9px 0 0;color:#315845}
.reading-body .chapter-remember{border-top:1px solid var(--border);margin-top:26px;padding-top:15px;font-style:italic;color:var(--chapter-accent);font-weight:600}
.chapter-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:24px 34px 30px;border-top:1px solid rgba(237,216,197,.8);position:relative;z-index:1}
.chapter-nav span{font-size:12px;color:var(--muted);font-weight:800}.chapter-nav .btn{min-height:42px;padding:8px 15px}
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.admin-toolbar p{margin:0;color:var(--muted);font-size:12px}
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:18px 0}
.stat{padding:17px;background:linear-gradient(180deg,#fff 0%,#fffaf4 100%);border:1px solid var(--border);border-radius:17px;box-shadow:0 14px 26px rgba(109,65,45,.05)}
.stat b{display:block;font-size:28px;font-family:Georgia;line-height:1.2}.stat small{color:var(--muted);font-size:10px}
.dash-card{background:linear-gradient(180deg,#fff 0%,#fffbf6 100%);border-radius:22px;padding:20px;border:1px solid var(--border);box-shadow:var(--shadow)}
.dash-filter{display:flex;gap:10px;margin-bottom:15px}.dash-filter input{flex:1}.dash-filter select{max-width:230px}
.export-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:16px;font-size:11px;color:var(--muted)}.table-scroller{overflow-x:auto}
.order-table{border-collapse:collapse;width:100%;font-size:12px;min-width:890px}.order-table th{text-align:left;font-size:10px;letter-spacing:.05em;background:#f8eee6;padding:12px}.order-table td{vertical-align:top;border-bottom:1px solid #eee4dc;padding:14px 10px}.order-table td small{color:var(--muted)}.order-table td .btn{margin:2px}
.status-pill{border-radius:30px;font-size:10px;padding:5px 8px;background:#fff0d6;color:#865a15;font-weight:800;white-space:nowrap}.status-pill.paid{background:#dff1e6;color:#286a43}.status-pill.revoked{background:#fbe3de;color:#963b36}
.code-result{background:#e4f4e9;border-radius:12px;padding:15px;margin:12px 0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.code-result b{font-size:22px;letter-spacing:.05em}.code-result button{margin-top:9px}
.modal[hidden],[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:50;background:rgba(44,32,29,.72);display:grid;place-items:center;padding:25px;overflow:auto;backdrop-filter:blur(5px)}
.modal-content{position:relative;background:linear-gradient(180deg,#fffaf2 0%,#fff 100%);padding:23px 30px 30px;border-radius:30px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 26px 58px rgba(44,32,29,.24)}
.modal-illustration{border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 14px 30px rgba(88,47,30,.12)}.modal-illustration img{width:100%;max-height:210px;object-fit:cover;display:block}
.modal-content h2{font-size:32px;margin:8px 0}.modal-content p{font-size:13px}.phrase-sample{background:#f9e9df;padding:14px;border-radius:12px;margin-bottom:17px;font-style:italic}.modal-close{position:absolute;right:18px;top:16px;border:0;background:white;width:35px;height:35px;border-radius:50%;z-index:1}
#notice{position:fixed;top:83px;right:18px;z-index:70;max-width:390px;background:#2d5e50;color:white;border-radius:12px;padding:12px 18px;box-shadow:var(--shadow);font-size:13px;display:none}#notice.error{background:#9e3d37}#notice.show{display:block}
@keyframes book-sway{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(2deg) translateY(-10px)}}
@media(max-width:800px){
  .hero{grid-template-columns:1fr;gap:24px;padding-top:54px;padding-bottom:52px}
  .hero-visual{min-height:470px;order:-1}.hero-copy{text-align:center}.hero .lead{margin-inline:auto}.hero-actions,.hero-attributes{justify-content:center}.cover{width:min(70%,315px)}
  .three-cards{grid-template-columns:1fr}.sample-block{grid-template-columns:1fr;padding:20px 25px 30px;gap:20px}.order-grid{grid-template-columns:1fr;gap:24px}.reader-layout{grid-template-columns:1fr}.reader-sidebar{position:static;max-height:240px}.stats-grid{grid-template-columns:repeat(3,1fr)}.footer{flex-direction:column;align-items:start}.toc-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .section-width{width:calc(100% - 30px)}.header{padding:11px 15px}.brand{font-size:10px;gap:7px}.brand-mark{width:33px;height:33px;font-size:24px}.brand small{font-size:7px}.header-actions{gap:4px}.header-actions .text-btn{font-size:10px;padding:6px 2px}.header-actions .btn{min-height:32px;padding:5px 8px;font-size:10px}
  .hero{padding-top:18px}.hero-visual{min-height:395px}.hero h1{font-size:45px}.hero .lead{font-size:14px}.hero-actions .btn{width:100%}.hero-note{left:0;bottom:10px}.marquee{gap:20px;font-size:9px}.section-gap{padding:62px 0}.sample-block h2{font-size:30px}
  .order-area{padding:56px 0}.purchase-card{padding:24px 20px;border-radius:24px}.price-tag{max-width:none}.reader-head h2{font-size:31px}.reader-head .btn{font-size:10px}.page-view,.admin-view{padding-top:27px}.reading-sheet{border-radius:22px}.chapter-top{padding:18px 18px 12px}.chapter-illustration{margin:0 13px}.chapter-illustration img{max-height:300px}.reading-body{padding:26px 20px 15px}.reading-body p{font-size:14px}.chapter-nav{padding:18px 12px;gap:6px}.chapter-nav .btn{font-size:10px;padding:8px}.stats-grid{grid-template-columns:repeat(2,1fr)}.dash-filter{flex-wrap:wrap}.dash-filter input{flex-basis:100%}.dash-filter select{max-width:none;flex:1}.revoke-form{grid-template-columns:1fr}.revoke-form .btn{grid-column:1}.footer{padding:20px 15px}.section-heading h2{font-size:35px}
  .qr-box img{width:min(100%,300px)}
}


/* Premium book-reading upgrade */
.page-view{background:radial-gradient(circle at 15% 10%, rgba(255,231,209,.8), transparent 20%),radial-gradient(circle at 88% 24%, rgba(229,242,233,.75), transparent 18%),linear-gradient(180deg,#fffaf3 0%,#fff5ec 100%);border-radius:36px;padding-inline:18px}.reader-head{margin-bottom:22px}.reader-head .eyebrow{letter-spacing:.16em}.reader-layout{grid-template-columns:290px minmax(0,1fr);gap:30px}.reading-sheet{max-width:920px;margin-inline:auto;border-radius:34px;border:1px solid rgba(204,170,148,.35);box-shadow:0 32px 68px rgba(89,49,31,.16), inset 0 1px 0 rgba(255,255,255,.7);background:linear-gradient(90deg, rgba(110,77,60,.07) 0, rgba(255,255,255,0) 8%, rgba(255,255,255,0) 92%, rgba(110,77,60,.06) 100%),linear-gradient(180deg,#fffdf9 0%,#fffaf4 100%)}.reading-sheet::after{content:"";position:absolute;inset:16px;border-radius:24px;pointer-events:none;box-shadow: inset 18px 0 28px rgba(101,73,59,.06), inset -18px 0 28px rgba(101,73,59,.04)}.chapter-top{padding:28px 42px 18px}.chapter-top span:first-child{background:rgba(255,255,255,.8);padding:7px 14px;border-radius:999px;box-shadow:0 8px 18px rgba(104,66,48,.08)}.chapter-illustration{margin:0 36px}.reading-body{padding:38px clamp(24px,6vw,82px) 26px}.reading-body h2{font-size:clamp(34px,4vw,52px);line-height:1.12}.reading-body p{font-size:15.8px;line-height:2;color:#564941}.reading-body .opening{font-size:18px;line-height:1.95}.phrases-box{position:relative;overflow:hidden}.phrases-box::before{content:"Kalimat sakti";position:absolute;right:18px;top:14px;font-size:10px;letter-spacing:.16em;color:rgba(130,91,77,.32);font-weight:800;text-transform:uppercase}.practice-box,.phrases-box{break-inside:avoid}.chapter-nav{padding:22px 34px 30px}.chapter-nav::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:120px;height:4px;border-radius:99px;background:rgba(145,98,71,.16)}.reader-sidebar{top:96px;border-radius:28px}.reader-toc button{padding:12px 12px}.reader-toc button.active{border-left:4px solid var(--chapter-accent)}@media(min-width:1060px){.reading-body .opening,.reading-body #chapterBody,.reading-body .phrases-box,.reading-body .practice-box,.reading-body .chapter-remember{max-width:720px}}@media(max-width:800px){.page-view{padding-inline:0;border-radius:0}.reader-layout{gap:18px}.reading-sheet{max-width:none}.chapter-illustration{margin:0 18px}}


/* ===== Mobile reading comfort fix ===== */
@media (max-width: 1100px){
  .page-view{padding-inline:0 !important;border-radius:0 !important}
  .reader-layout{grid-template-columns:1fr !important;gap:16px !important}
  .reader-sidebar{position:static !important;top:auto !important;max-height:240px !important;overflow:auto !important;padding:16px 14px !important;border-radius:22px !important}
  .reading-sheet{max-width:100% !important;width:100% !important;border-radius:24px !important}
  .chapter-top{padding:18px 18px 12px !important}
  .chapter-illustration{margin:0 16px !important}
  .chapter-illustration img{max-height:260px !important;border-radius:20px !important}
  .reading-body{padding:28px 20px 18px !important}
  .reading-body h2{font-size:clamp(28px,7vw,40px) !important;line-height:1.16 !important}
  .reading-body .opening{font-size:18px !important;line-height:1.8 !important}
  .reading-body p{font-size:16px !important;line-height:1.85 !important}
  .phrases-box p{font-size:16px !important;line-height:1.8 !important}
  .chapter-nav{padding:18px 16px 24px !important;gap:10px !important}
  .chapter-nav .btn{min-height:44px !important;padding:12px 14px !important;font-size:13px !important}
}
@media (max-width: 700px){
  .reader-head h2{font-size:36px !important}
  .reader-sidebar{max-height:210px !important}
  .sidebar-heading{font-size:12px !important}
  .reader-toc button{padding:12px 10px !important;font-size:14px !important}
  .reader-toc button b{min-width:28px !important}
  .chapter-top span:first-child{font-size:11px !important}
  .chapter-top .spark-text{font-size:11px !important}
  .chapter-illustration img{max-height:220px !important}
  .reading-body{padding:24px 16px 16px !important}
  .reading-body h2{font-size:clamp(26px,8vw,34px) !important}
  .reading-body .opening{font-size:17px !important}
  .reading-body p{font-size:15px !important;line-height:1.8 !important}
  .phrases-box,.practice-box{padding:18px 14px !important}
  .chapter-remember{font-size:17px !important;line-height:1.7 !important}
}


/* Professional payment section */
.professional-pay{padding:24px 22px;border-radius:24px;background:linear-gradient(180deg,#fff8f0 0%,#fff 100%);text-align:left}.professional-pay .payment-caption{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f7eadf;color:#9e684d;margin-bottom:10px}.professional-pay h3{font-size:18px;margin:2px 0 8px;letter-spacing:.03em}.pay-account-number{font-size:34px;line-height:1.15;font-weight:900;letter-spacing:.02em;color:#2d1f1a;word-break:break-word}.pay-account-name{font-size:14px;color:#604f46;margin:8px 0 16px}.professional-qris{padding:20px;border-style:solid;border-color:#ead9c9;background:linear-gradient(180deg,#fffaf5 0%,#fff 100%)}.qris-head{text-align:center;margin-bottom:12px}.qris-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f7eadf;color:#9e684d;font-size:10px;font-weight:900;letter-spacing:.14em}.qris-head h4{margin:10px 0 6px;font-size:26px;line-height:1.1}.qris-head p{margin:0;font-size:12px;color:#7a6d64}.qris-frame{background:#fff;border:1px solid #f0e2d5;border-radius:26px;padding:16px;box-shadow:0 18px 38px rgba(70,40,28,.08)}.qris-frame img{width:min(100%,360px);padding:0;box-shadow:none;background:transparent;border-radius:16px}.qris-meta{margin-top:14px;text-align:center;font-size:12px;line-height:1.7;color:#6d5b51}.qris-meta strong{color:#2d201a}.qris-meta span{color:#8a7a70}@media(max-width:520px){.professional-pay,.professional-qris{padding:18px}.pay-account-number{font-size:28px}.qris-head h4{font-size:22px}.qris-frame{padding:12px}.qris-frame img{width:min(100%,320px)}}

/* Reader: paper turning, minimal mobile interface */
.reading-sheet{isolation:isolate;transform-style:preserve-3d;perspective:1100px;}
.reading-sheet::after{z-index:5;pointer-events:none}
.reading-sheet.is-turning::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,rgba(112,74,45,.04) 0%,rgba(255,253,247,.96) 40%,rgba(255,255,255,.99) 52%,rgba(198,168,135,.25) 94%);transform-origin:left center;animation:ks-page-flip .55s cubic-bezier(.33,.02,.18,1) both;box-shadow:inset -12px 0 25px #76594317;z-index:10;}
@keyframes ks-page-flip{0%{transform:perspective(1100px) rotateY(0deg);opacity:1}72%{opacity:.91}100%{transform:perspective(1100px) rotateY(-85deg);opacity:0}}
.book-tools{display:flex;justify-content:flex-end;gap:10px;margin:0 0 12px}.book-tools button{font:inherit;font-weight:700;font-size:12px;border:1px solid #e8dbcf;background:#fffcf7;color:#544037;border-radius:999px;padding:9px 14px;cursor:pointer}
.reading-sheet .chapter-nav{position:relative;z-index:12}
@media(max-width:1100px){
 .page-view{width:100%!important;max-width:100%!important;padding:24px 14px 60px!important;border-radius:0!important}
 .reader-layout,.demo-reader{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;max-width:100%!important;margin-inline:auto!important;gap:12px!important;min-width:0!important}
 .reader-layout > *,.demo-reader > *{width:100%!important;min-width:0!important;max-width:100%!important}
 .reader-sidebar{position:static!important;top:auto!important;max-height:none!important;overflow:visible!important;padding:10px 12px!important;border-radius:15px!important}
 .reader-toc{display:none!important;max-height:290px!important;overflow-y:auto!important}.reader-sidebar.toc-open .reader-toc{display:grid!important}
 .sidebar-heading{cursor:pointer;margin:0;padding:8px 4px!important;font-size:12px!important}
 .sidebar-heading:after{content:'⌄';margin-left:6px}
 .reading-sheet{width:100%!important;max-width:100%!important;border-radius:17px!important;min-width:0!important;margin:0!important}
 .chapter-top{padding:16px 16px 12px!important}
 .chapter-illustration{margin:0 12px!important}
 .reading-body{padding:22px 18px 16px!important}
 .reading-body h2{font-size:clamp(27px,7vw,38px)!important;line-height:1.16!important}
 .reading-body .opening{font-size:17px!important;line-height:1.75!important}
 .reading-body p{font-size:15.5px!important;line-height:1.78!important}
 .phrases-box,.practice-box{padding:18px!important}
 .phrases-box p{font-size:15px!important;line-height:1.75!important}
 .chapter-nav{padding:16px 12px 24px!important;gap:8px!important}
 .chapter-nav .btn{font-size:12px!important;min-height:42px!important;padding:8px 12px!important}
 .demo-heading{padding:0 16px!important;margin:22px 0 14px!important}
}
@media(prefers-reduced-motion:reduce){.reading-sheet.is-turning::after{animation:none}}

/* Adjustable reading font; simple phone controls */
.font-tools{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin:0 0 14px;color:#705f52;font-size:13px;font-weight:700}.font-tools button{border:1px solid #e5d4c3;border-radius:14px;background:#fffdf9;color:#46332c;min-width:44px;min-height:42px;font-size:17px;font-weight:800}.font-tools button:focus-visible{outline:3px solid #e5ac82;outline-offset:2px}.reading-body{--reading-scale:1}.reading-body p{font-size:calc(15.8px * var(--reading-scale))!important}.reading-body .opening{font-size:calc(18px * var(--reading-scale))!important}.reading-body .phrases-box p{font-size:calc(15px * var(--reading-scale))!important}.reading-body h2{font-size:clamp(29px,calc(46px * var(--reading-scale)),63px)!important}@media(max-width:700px){.reading-body p{font-size:calc(15px * var(--reading-scale))!important}.reading-body .opening{font-size:calc(17px * var(--reading-scale))!important}.reading-body h2{font-size:clamp(26px,calc(32px * var(--reading-scale)),48px)!important}.font-tools{justify-content:center;flex-wrap:wrap}}