/* Layout: clean app shell; illustrated covers carry the local flavour; sunset gradient only on key actions */
:root{
  --bg:#f6f4f7; --surface:#ffffff; --fg:#1f1a24; --muted:#77707f; --line:#e9e5ee;
  --g1:#ff7a45; --g2:#e8346f; --accent:#e23d68; --accent-soft:#fde8ee; --gold:#e8a317; --ok:#1f9d63;
  --sepia-bg:#f5ecdb; --sepia-fg:#3b2d1d;
  --cover:"DM Serif Display",Georgia,serif; --read:"Literata",Georgia,serif; --ui:"Plus Jakarta Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121015; --surface:#1d1a21; --fg:#f3eff6; --muted:#a69fae; --line:#2e2934;
  --accent:#ff6f90; --accent-soft:#3a1d27; --gold:#f2bd47; --ok:#55cf92; --sepia-bg:#2a2319; --sepia-fg:#ece0cb; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121015; --surface:#1d1a21; --fg:#f3eff6; --muted:#a69fae; --line:#2e2934;
  --accent:#ff6f90; --accent-soft:#3a1d27; --gold:#f2bd47; --ok:#55cf92; --sepia-bg:#2a2319; --sepia-fg:#ece0cb; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--ui);font-size:14px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:480px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main.wrap{padding-block:4px 100px}
.grad{background:linear-gradient(120deg,var(--g1),var(--g2))}

/* header */
.head .wrap{padding-block:14px 8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;background:linear-gradient(120deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{display:block;font-size:11px;font-weight:500;color:var(--muted);-webkit-text-fill-color:var(--muted);letter-spacing:0}
.coinpill{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 7px;font-weight:800;font-variant-numeric:tabular-nums}
.coin{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b8,#f0b11e 55%,#c98a08);box-shadow:inset 0 0 0 1.5px rgba(160,100,0,.55);flex:none;display:inline-block}
.hello{font-size:13px;color:var(--muted);margin:2px 0 12px}
.hello b{display:block;font-size:20px;color:var(--fg);letter-spacing:-.01em}

/* covers */
.cv{position:relative;aspect-ratio:2/3;max-width:100%;border-radius:10px;overflow:hidden;background:#222;box-shadow:0 6px 16px -8px rgba(30,10,30,.45)}
.cv .ph{position:absolute;inset:0}
.cv .scrim{position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(transparent,rgba(10,5,15,.82))}
.cv .ttl{position:absolute;left:9px;right:9px;bottom:9px;color:#fff;font-family:var(--cover);font-size:15px;line-height:1.08;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.cv .ttl small{display:block;font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-top:4px}
.cv .badge{position:absolute;top:7px;right:7px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px}
.cv.big .ttl{font-size:20px}

/* hero */
.hero{position:relative;display:block;width:100%;border:none;padding:0;text-align:left;border-radius:18px;overflow:hidden;aspect-ratio:16/10;max-width:100%;color:#fff;box-shadow:0 12px 28px -14px rgba(226,61,104,.55)}
.hero svg{position:absolute;inset:0;width:100%;height:100%}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,5,15,.78),rgba(10,5,15,.15) 75%)}
.hero .in{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;max-width:72%;gap:6px}
.hero .kick{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.hero h2{font-family:var(--cover);font-weight:400;font-size:24px;line-height:1.08;margin:0;text-wrap:balance}
.hero p{margin:0;font-size:12px;opacity:.9;line-height:1.45}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dots button{width:7px;height:7px;border-radius:9px;border:none;background:var(--line);padding:0}
.dots button[aria-current="true"]{width:20px;background:var(--accent)}

h2.sec{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:24px 0 12px;display:flex;justify-content:space-between;align-items:baseline}
h2.sec span{font-size:12px;font-weight:500;color:var(--muted)}
.demo{font-size:12px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin-top:14px}

.absen{background:var(--surface);border-radius:16px;padding:14px;border:1px solid var(--line)}
.absen-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.absen-h b{font-size:15px}
.meta{font-size:12px;color:var(--muted);line-height:1.55}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{border-radius:10px;background:var(--bg);padding:7px 0;text-align:center;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.day strong{display:block;font-size:13px;color:var(--fg)}
.day.done{background:linear-gradient(160deg,var(--g1),var(--g2));color:#fff}
.day.done strong{color:#fff}
.day.big{box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;font-weight:700}
.btn.pri{border:none;background:linear-gradient(120deg,var(--g1),var(--g2));color:#fff;box-shadow:0 6px 14px -8px rgba(226,61,104,.8)}
.btn.sm{padding:8px 13px;font-size:13px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}

.cont{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px}
.cont .cv{width:54px;flex:none;border-radius:7px}
.cont .txt{min-width:0;flex:1}
.cont .txt span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.prog{height:5px;border-radius:5px;background:var(--line);margin-top:8px;overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--g1),var(--g2))}

.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
.chip[aria-pressed="true"]{border-color:transparent;background:linear-gradient(120deg,var(--g1),var(--g2));color:#fff}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px}
.card{background:none;border:none;padding:0;text-align:left;min-width:0}
.card h3{font-size:13px;font-weight:700;margin:8px 0 2px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card p{margin:0;font-size:11px;color:var(--muted)}
.card .cv .ttl{font-size:12px}

/* detail */
.dhero{position:relative;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0;height:230px;overflow:hidden}
.dhero svg,.dhero .ph{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.03)}
.dhero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.15),var(--bg))}
.back{position:relative;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:999px;font-weight:700;padding:7px 13px;font-size:13px}
.dhero .back{position:absolute;top:12px;left:max(16px,env(safe-area-inset-left,0px))}
.det{position:relative;z-index:2;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:end;margin-top:-120px}
.det h1{font-family:var(--cover);font-weight:400;font-size:25px;line-height:1.1;margin:0 0 6px;text-wrap:balance}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.tag.adult{color:var(--accent);border-color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 0;text-align:center}
.stats div{font-size:11px;color:var(--muted)}
.stats b{display:block;font-size:15px;color:var(--fg);font-variant-numeric:tabular-nums}
.stats div+div{border-left:1px solid var(--line)}
.blurb{font-family:var(--read);font-size:15px;line-height:1.65;margin:14px 0}
.actions{display:flex;gap:10px}
.actions .btn{flex:1}
.chlist{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 12px}
.ch{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:12px 0}
.ch:last-child{border-bottom:none}
.ch .t{min-width:0;font-weight:600}
.ch .t small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.pill{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.free{background:var(--accent-soft);color:var(--accent)}
.lock{background:var(--bg);color:var(--fg)}
.lock .coin{width:12px;height:12px}
.opened{color:var(--ok);background:var(--bg)}

.cmt{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.cmt b{font-size:13px}
.cmt b small{font-weight:500;color:var(--muted);margin-left:6px}
.cmt p{margin:3px 0 0;font-size:14px;line-height:1.45}
.cmt .like{font-size:12px;color:var(--muted);margin-top:5px}

/* reader */
.rtools{display:flex;justify-content:space-between;align-items:center;gap:8px;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);padding-block:10px;z-index:5}
.rtools .grp{display:flex;gap:6px}
.rbar{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:6px}
.rbar i{display:block;height:100%;background:linear-gradient(90deg,var(--g1),var(--g2))}
.reader{font-family:var(--read);line-height:1.8;padding:6px 0 0}
.reader.sepia{background:var(--sepia-bg);color:var(--sepia-fg);border-radius:14px;padding:16px}
.reader .lbl{font:800 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.reader h1{font-family:var(--cover);font-weight:400;font-size:1.55em;line-height:1.2;margin:6px 0 18px;text-wrap:balance}
.reader p{margin:0 0 14px}
.reader .cliff{font-weight:600}
.endnote{text-align:center;font-size:12px;color:var(--muted);margin:20px 0 10px}
.nav{display:flex;gap:10px}
.nav .btn{flex:1}
.gate{position:relative;border-radius:20px;overflow:hidden;margin-top:12px;color:#fff;text-align:center}
.gate svg{position:absolute;inset:0;width:100%;height:100%}
.gate .shade{position:absolute;inset:0;background:rgba(12,6,16,.72);backdrop-filter:blur(2px)}
.gate .in{position:relative;padding:28px 18px 18px}
.gate .lbl{font-size:11px;font-weight:800;letter-spacing:.1em;opacity:.8}
.gate h3{font-family:var(--cover);font-weight:400;font-size:24px;margin:4px 0 8px}
.gate p{opacity:.85;margin:0 0 16px;line-height:1.5}
.gate .btn{width:100%;margin-bottom:8px}
.gate .btn:not(.pri){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.gate .save{font-size:11px;font-weight:800;color:#7ef0b4;margin-left:6px}

/* coins */
.balance{border-radius:18px;padding:18px;color:#fff;display:flex;align-items:center;gap:12px}
.balance .coin{width:40px;height:40px}
.balance b{font-size:26px;font-variant-numeric:tabular-nums;display:block}
.balance span{font-size:12px;opacity:.9}
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pack{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 12px;text-align:left;position:relative}
.pack b{display:flex;align-items:center;gap:6px;font-size:21px;font-variant-numeric:tabular-nums}
.pack .bonus{font-size:12px;color:var(--ok);font-weight:700;margin-top:2px;min-height:16px}
.pack .price{font-size:12px;color:var(--muted);margin-top:8px}
.pack .price strong{color:var(--fg)}
.pack.best{border:2px solid var(--accent)}
.pack .rib{position:absolute;top:-9px;right:10px;color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:6px}
.log{font-size:13px;line-height:2;color:var(--muted);font-variant-numeric:tabular-nums;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 12px}
.log div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}
.log div:last-child{border-bottom:none}
.plus{color:var(--ok);font-weight:700}.minus{color:var(--accent);font-weight:700}
.empty{color:var(--muted);text-align:center;padding:28px 10px;line-height:1.6}

.tabbar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);z-index:10}
.tabbar div{display:flex;max-width:480px;margin:0 auto}
.tabbar button{flex:1;background:none;border:none;padding:10px 4px 12px;font-size:11px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-current="true"]{color:var(--accent);font-weight:800}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(78px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:13px;font-weight:700;z-index:20;max-width:calc(100% - 32px);text-align:center}
@media (prefers-reduced-motion:no-preference){.toast{animation:up .2s ease-out}@keyframes up{from{transform:translate(-50%,8px);opacity:0}}.card:active .cv,.hero:active{transform:scale(.98)}}
.ph{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}

.cmt,.av{display:none}
.skeleton{background:linear-gradient(90deg,var(--line),var(--surface),var(--line));background-size:200% 100%;border-radius:10px}
@media (prefers-reduced-motion:no-preference){.skeleton{animation:sk 1.2s linear infinite}@keyframes sk{to{background-position:-200% 0}}}
.err{padding:40px 16px;text-align:center;color:var(--muted);line-height:1.6}

.brand{display:flex;align-items:center;gap:10px;min-width:0}.mark{width:40px;height:40px;border-radius:50%;flex:none}