:root{
  --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.70);
  --primary:#ff4d8d; --primary2:#1f5cff; --shadow:0 18px 55px rgba(0,0,0,.35);
  --radius:18px; --max:1100px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);
  background:radial-gradient(900px 340px at 8% 0%, rgba(255,77,141,.22), transparent 60%),
             radial-gradient(900px 360px at 92% 10%, rgba(31,92,255,.22), transparent 60%),
             linear-gradient(180deg, #070a1a, #050617);
  color:var(--text);}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto;}
.header{position:sticky; top:0; z-index:50; background:rgba(5,6,23,.7); backdrop-filter: blur(10px); border-bottom:1px solid var(--border);}
.header-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px;}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{width:44px;height:44px;border-radius:12px;border:1px solid var(--border); background:#111}
.brand-name{font-weight:950}
.brand-tag{font-size:12px;color:var(--muted)}
.nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--text);font-weight:900;box-shadow:0 10px 22px rgba(0,0,0,.18);}
.btn.primary{background: linear-gradient(135deg, var(--primary), var(--primary2)); border-color: rgba(255,255,255,.18);}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px; border-radius:12px; font-size:13px}
.section{padding:22px 0 34px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.h2{font-size:22px;margin:0}
.h3{font-size:16px;margin:0}
.muted{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);font-size:12px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:14px;}
.item{padding:12px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));}
.cover{width:100%;aspect-ratio:4/5;border-radius:14px;border:1px solid var(--border);overflow:hidden;
  background: radial-gradient(700px 240px at 12% 0%, rgba(255,77,141,.20), transparent 60%),
              radial-gradient(650px 220px at 92% 15%, rgba(31,92,255,.20), transparent 60%),
              rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.76);font-weight:1000;text-align:center;padding:10px;}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.divider{height:1px;background:var(--border);margin:14px 0}
.reader{position:relative;width:100%;padding-top:62.5%;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:rgba(0,0,0,.25);}
.reader iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* Email watermark overlay (does not affect the embedded FlipHTML5 itself) */
.reader-watermark{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  font-weight:800;
  font-size:20px;
  letter-spacing:.2px;
  text-align:center;
  opacity:.18;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
  pointer-events:none;
  user-select:none;
  z-index:4;
  white-space:nowrap;
  transition: opacity .6s ease;
}

.reader-watermark.wm-hidden{
  opacity:0;
}

/* Fullscreen enabled (no blocker overlay) */
.reader-blocker{display:none !important;}

/* Fullscreen mode for the reader */
.reader:fullscreen{
  padding-top:0;
  width:100vw;
  height:100vh;
  border-radius:0;
}
.reader:fullscreen iframe{width:100%;height:100%;}

/* Safari / WebKit fullscreen */
.reader:-webkit-full-screen{
  padding-top:0;
  width:100vw;
  height:100vh;
  border-radius:0;
}
.reader:-webkit-full-screen iframe{width:100%;height:100%;}

@media (max-width: 520px){
  .reader-watermark{font-size:16px;}
}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border-bottom:1px solid var(--border); text-align:left}
.notice{padding:12px;border-radius:14px;border:1px dashed rgba(255,215,74,.55);
  background: linear-gradient(135deg, rgba(255,215,74,.10), rgba(255,255,255,.02));}
input{width:100%;padding:12px;border-radius:14px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);outline:none}
@media(max-width:860px){.header-row{flex-direction:column; align-items:flex-start}}

/* Added: access page helpers */
.notice{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255, 60, 80, .10);
  padding: 12px 14px;
  border-radius: 14px;
}
.notice strong{color:#fff;}

.checklist{margin: 10px 0 0 18px; padding:0;}
.checklist li{margin: 8px 0;}

.form input[type="text"], .form input[type="email"]{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color:#fff;
}
.form input::placeholder{color: rgba(255,255,255,.55);}
.form .muted{display:block; margin-top: 10px;}


.install-btn{cursor:pointer;}
.install-btn.is-visible{display:inline-flex !important;}
.install-btn[hidden]{display:none !important;}
.pwa-status{position:fixed;left:16px;bottom:16px;z-index:60;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(5,6,23,.92);color:rgba(255,255,255,.86);font-size:13px;box-shadow:0 16px 38px rgba(0,0,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateY(18px);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;}
.pwa-status.show{opacity:1;transform:translateY(0);}
@media(max-width:640px){.nav{width:100%;}.nav .btn,.nav .install-btn{flex:1 1 auto;}.pwa-status{left:12px;right:12px;bottom:12px;}}


.quiz-entry-btn{
  background:linear-gradient(135deg,#ffd54f 0%, #ff9f1c 42%, #ff4d8d 100%);
  color:#201022;
  border-color:rgba(255,255,255,.24);
  padding:11px 15px;
  transform:scale(1.1);
  transform-origin:center;
  box-shadow:0 16px 30px rgba(255,159,28,.28), 0 10px 24px rgba(255,77,141,.22);
}
.quiz-entry-btn:hover{filter:brightness(1.04);}
.quick-access-row{align-items:center;gap:14px;}
@media(max-width:640px){
  .quick-access-row .btn,.quick-access-row .quiz-entry-btn{width:100%;}
  .quiz-entry-btn{transform:none;padding:12px 16px;}
}


/* Manual access admin dashboard */
.label{display:block;margin:0 0 8px;font-size:13px;font-weight:800;color:rgba(255,255,255,.85)}
.input, select.input, textarea.admin-textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:#fff;outline:none;}
.admin-success{background:linear-gradient(135deg, rgba(32,153,95,.18), rgba(31,92,255,.10));border:1px solid rgba(106,216,145,.34);border-radius:22px;padding:18px;box-shadow:0 18px 48px rgba(0,0,0,.24);}
.admin-success-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.success-pill{background:rgba(32,153,95,.18);border-color:rgba(106,216,145,.34);color:#d8ffe6;}
.admin-success-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:16px;}
.admin-stat{padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));display:flex;flex-direction:column;gap:6px;}
.admin-label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:4px;}
.admin-code-card{background:linear-gradient(135deg, rgba(255,213,79,.16), rgba(255,77,141,.12));}
.admin-code-value{font-size:24px;letter-spacing:.08em;line-height:1.2;word-break:break-word;}
.receipt-card{margin-top:16px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(7,10,26,.76);}
.receipt-top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;}
.receipt-brand{font-size:20px;font-weight:950;}
.receipt-badge{padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#ffd54f,#ff9f1c);color:#201022;font-weight:900;}
.receipt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px;}
.receipt-grid strong{display:block;}
.receipt-code-wrap{margin-top:16px;padding:14px;border-radius:18px;border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.04);}
.receipt-code{font-size:28px;font-weight:950;letter-spacing:.12em;word-break:break-word;}
.receipt-note{margin:14px 0 0;color:rgba(255,255,255,.72);}
.admin-textarea{margin-top:14px;min-height:96px;resize:vertical;}
@media(max-width:760px){.admin-success-head .row{width:100%;}.admin-success-head .row .btn{flex:1 1 100%;}.receipt-code{font-size:22px;}}
@media print{body{background:#fff;color:#111}.header,.nav,.notice,.pill,.btn,.admin-textarea,.card > .row:first-child{display:none !important}.container{width:100%;margin:0;padding:0}.card, .admin-success, .receipt-card{background:#fff !important;color:#111 !important;border:1px solid #ddd;box-shadow:none}.muted,.admin-label,.receipt-note{color:#555 !important}.receipt-card{margin:0}.receipt-badge{background:#eee !important;color:#111 !important}.receipt-top,.receipt-grid{color:#111 !important}.receipt-code{color:#111 !important}}