:root{
  --emerald:#059669;       /* Primary */
  --white:#ffffff;         /* Secondary */
  --slate:#6b7280;         /* Soft Slate Gray (accent text) */
  --bg:#f8fafc;            /* page background */
  --ink:#0f172a;           /* primary text */
  --card:#ffffff;          /* card surface */
  --shadow: 0 10px 30px rgba(2, 6, 23, .06), 0 4px 12px rgba(2, 6, 23, .05);
  --radius:18px;
  --gap:14px;

  /* Responsive type scale */
  --fs-base: clamp(15px, 0.95rem + 0.25vw, 17px);
  --fs-h1: clamp(22px, 1.1rem + 1.2vw, 30px);
  --fs-h2: clamp(18px, 1rem + 1vw, 22px);
  --fs-tag: clamp(13px, 0.9rem + 0.2vw, 15px);
  --fs-btn: clamp(14px, 0.9rem + 0.3vw, 16px);
  --fs-price: clamp(16px, 1rem + 0.4vw, 18px);
  --fs-note: clamp(11px, 0.75rem + 0.2vw, 13px);
  --fs-hint: clamp(11px, 0.75rem + 0.2vw, 13px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(5,150,105,.10), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(5,150,105,.08), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height:1.35;
  font-size: var(--fs-base);
}

.wrap{max-width:980px;margin:0 auto;padding:22px 16px 88px}

/* UTIL */
.container{max-width:780px;margin-inline:auto}
.center{display:grid;place-items:center}

/* HERO */
.hero{
  display:grid; gap:16px; align-items:center; justify-items:center;
  padding:26px 16px 16px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  border-radius:calc(var(--radius) + 4px);
}
.brand{display:flex; gap:12px; align-items:center; justify-content:center}
.brand img{width:64px;height:64px;object-fit:contain;border-radius:14px;background:#fff;filter: drop-shadow(0 2px 6px rgba(2,6,23,.12))}
.brand h1{margin:0; font-size: var(--fs-h1); letter-spacing:.2px; font-weight:800}
.tag{color:var(--slate); font-weight:600; font-size: var(--fs-tag);}

.cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.btn{
  appearance:none; border:0; cursor:pointer; padding:14px 16px; font-weight:800;
  border-radius:14px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-size: var(--fs-btn);
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--emerald); color:#fff}
.btn.primary:hover{box-shadow:0 14px 36px rgba(5,150,105,.28), 0 6px 16px rgba(5,150,105,.18)}
.btn.light{background:#ffffff; color:#0f172a}
.btn.light:hover{box-shadow:0 14px 36px rgba(2,6,23,.08), 0 6px 16px rgba(2,6,23,.06)}

.mini-actions{display:flex; gap:10px; justify-content:center; margin:8px 0 2px}
.icon{width:18px;height:18px;display:inline-block}

/* BOOK WRAPPER */
.book-area{margin-top:16px}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)}

/* FLIPBOOK */
.book-shell{position:relative; perspective:1400px; max-width:760px; margin:0 auto}
.book{position:relative; width:100%; aspect-ratio: 7 / 5; max-height: 560px}

.page{
  position:absolute; inset:0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding:18px 16px 18px; display:grid; grid-template-rows:auto 1fr; transform-origin:left center; backface-visibility:hidden;
}
.page h2{margin:2px 6px 12px; font-size: var(--fs-h2); letter-spacing:.2px; font-weight:900; display:flex; align-items:center; gap:10px}
.pill{font-size:11px; background: rgba(5,150,105,.1); color: var(--emerald); padding:6px 10px; border-radius:999px; font-weight:800; letter-spacing:.3px}

.list{overflow:auto; padding:8px; border-radius:12px; background:linear-gradient(180deg,rgba(2,6,23,.02),transparent 40%)}

/* Aligned two-column rows with stable numbers */
.row{
  display:grid; grid-template-columns: 1fr max-content; gap:16px; align-items:center;
  padding:12px 12px; border-radius:12px;
}
.row:not(:last-child){margin-bottom:6px}
.row:hover{background: rgba(2,6,23,.035)}
.name{font-weight:700; line-height:1.25}
.price{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
  color:#0b1220; font-weight:900; text-align:right; min-width:90px;
  font-size: var(--fs-price);
}

/* tiny note for * items */
.note{margin:10px 2px 0; font-size: var(--fs-note); color:var(--slate); text-align:center}

.nav{display:grid; grid-template-columns: 44px 1fr 44px; align-items:center; gap:10px; margin-top:12px}
.nav .dotbar{display:flex; gap:8px; align-items:center; justify-content:center}
.dot{width:8px;height:8px;border-radius:999px;background:#e5e7eb; transition:transform .18s, background .18s, width .18s}
.dot.active{background:var(--emerald); transform:translateY(-1px); width:18px}
.nav-btn{background:#fff; border:0; border-radius:12px; box-shadow:var(--shadow); width:44px;height:44px; display:grid; place-items:center; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; color:#0f172a}
.nav-btn:active{transform:translateY(1px)}
.hint{font-size: var(--fs-hint); color:var(--slate); text-align:center; margin-top:6px}

/* SHARE STRIP */
.share-strip{display:flex; gap:10px; justify-content:center; margin:18px auto 12px}
.chip{display:inline-flex; align-items:center; gap:10px; background:#fff; padding:10px 12px; border-radius:999px; box-shadow:var(--shadow); cursor:pointer; border:0; font-weight:800}
.chip:active{transform:translateY(1px)}

/* QR MODAL */
.modal-backdrop{position:fixed; inset:0; background:rgba(2,6,23,.38); display:none; align-items:center; justify-content:center; padding:20px; z-index:40}
.modal{width:min(96vw, 380px); background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:18px; position:relative}
.modal h3{margin:0 0 10px; font-size:18px}
.qr-wrap{display:grid; place-items:center; padding:8px; border-radius:16px; background:linear-gradient(180deg, rgba(2,6,23,.03), transparent 40%)}
canvas.qr{width:220px;height:220px; image-rendering: pixelated}
.modal-actions{display:flex; gap:10px; margin-top:14px}
.modal-actions .btn{flex:1; padding:12px 14px}
.close-x{position:absolute; right:14px; top:14px; width:36px; height:36px; border-radius:12px; border:0; background:#fff; box-shadow:var(--shadow); cursor:pointer; display:grid; place-items:center}

/* FOOTER */
footer{margin-top:28px; text-align:center; color:var(--slate); font-size:13px}

/* Motion preferences */
@media (prefers-reduced-motion: no-preference){ .page{transition: transform 520ms cubic-bezier(.2,.6,.2,1), box-shadow 520ms} }
@media (prefers-reduced-motion: reduce){ .page{transition:none} .btn, .nav-btn, .chip{transition:none} }

/* Responsiveness tweaks */
@media (min-width:720px){
  .page h2{font-size: calc(var(--fs-h2) + 1px)}
  .row{padding:14px 14px}
}