@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@500;600&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#202c59;background:#edf2fc;font-synthesis:none;--paper:#fff;--bg:#f7f9ff;--line:#dfe5f2;--muted:#65708b;--blue:#2845c7;--sunshine:#ffcf00;--green:#168a3f;--purple:#842cc0;--teal:#008d99;--orange:#f47816;--danger:#bf1738;--yellow:#fff7d6;--red:#fff0f2}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:46px;color:inherit}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2845c7;outline-offset:3px}a{color:inherit}h1,h2,p{margin:0}h1{font:500 30px/1.2 'Fredoka',sans-serif;letter-spacing:-.3px}h2{font:500 21px/1.3 'Fredoka',sans-serif}p{line-height:1.55;color:var(--muted)}
.app-shell{max-width:520px;min-height:100dvh;margin:auto;background:var(--bg);padding-bottom:90px;box-shadow:0 0 50px #2845c70c}header{padding:21px 22px 17px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:9px;font:600 30px 'Fredoka',sans-serif;text-decoration:none;letter-spacing:-1px}
.icon-button{border:1px solid var(--line);background:var(--paper);border-radius:24px;padding:8px 12px;display:flex;align-items:center;gap:5px;font-size:22px}
.icon-button span{font-size:12px}main{padding:12px 20px 25px}
.mode-banner{padding:8px 20px;background:#fff7d6;color:#795600;font-size:12px;text-align:center}
.heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.subtitle{font-size:14px;margin-top:5px}
.live-label{font-size:12px;color:#137537;display:flex;align-items:center;gap:6px}
.live-label:before{content:'';width:7px;height:7px;background:#168a3f;border-radius:50%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}
.stats>div{border-right:1px solid var(--line)}
.stats>div:last-child{border:0}
.stats strong{display:block;font:500 31px 'Fredoka',sans-serif}
.stats span{font-size:12px;color:var(--muted)}
.stats>div:nth-child(2) strong{color:#916100}
.stats>div:nth-child(3) strong{color:#bf1738}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}
.section-heading h2{font:600 15px 'DM Sans',sans-serif}
.section-heading span{font-size:12px;color:var(--muted)}#sessions{display:grid;gap:13px}
.session{padding:17px;background:var(--paper);border:1px solid var(--line);border-radius:20px}
.session.soon{background:var(--yellow);border-color:#f4df8a}
.session.over{background:var(--red);border-color:#f2c8d2}
.child-heading{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:39px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:#eef2ff;font:500 20px 'Fredoka',sans-serif}
.soon .avatar{background:#ffe890}
.over .avatar{background:#ffd6de}
.child-person{flex:1;min-width:0}
.child-person h2{font:600 16px/1.3 'DM Sans',sans-serif;overflow-wrap:anywhere}
.child-person>span{font-size:12px;color:var(--muted)}
.status-label{font-size:12px;color:#137537;white-space:nowrap}
.soon .status-label{color:#916100}
.over .status-label{color:#bf1738}
.time-row{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:19px 0 15px}
.countdown{font:500 37px/1 'Fredoka',sans-serif;font-variant-numeric:tabular-nums}
.over .countdown{font-size:29px;color:#bf1738}
.time-row>span{font-size:12px;text-align:right;color:var(--muted)}
.session-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.secondary{border:1px solid var(--line);border-radius:12px;padding:11px;background:var(--paper);font-size:14px;font-weight:500}
.quiet{background:transparent}
.primary{display:flex;justify-content:center;align-items:center;gap:8px;min-height:54px;width:100%;background:var(--blue);border:0;border-radius:14px;color:#fff;font-weight:600;padding:13px 15px;font-size:16px}
.full{width:100%;margin-top:14px}
.completed-package{font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.checkin-dock{position:sticky;bottom:83px;padding:15px 0 5px;background:linear-gradient(transparent,var(--bg) 28%);margin-top:10px}
.fine{font-size:12px;line-height:1.6;margin-top:12px}
.sync{text-align:center}
.empty{text-align:center;padding:45px 15px}
.empty>span{display:block;font-size:55px;color:#ffcf00;margin-bottom:15px}
.empty p{margin-top:8px;font-size:14px}nav{position:fixed;bottom:0;width:100%;max-width:520px;display:grid;grid-template-columns:repeat(4,1fr);background:#ffffff;border-top:1px solid var(--line);padding:8px 12px max(10px,env(safe-area-inset-bottom));z-index:5}nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:0;border-radius:13px;font-size:12px;color:var(--muted)}nav button>span{font-size:23px;line-height:1.1}nav button[aria-current]{background:#eef2ff;color:var(--blue)}label{display:block;margin-top:22px;font-size:14px;font-weight:500}input:not([type=checkbox]):not([type=radio]){display:block;width:100%;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:8px;font-size:16px;color:#202c59}input[type=checkbox],input[type=radio]{accent-color:var(--blue);width:20px;height:20px;flex-shrink:0}fieldset{border:0;padding:0;margin:24px 0}legend{font-size:14px;margin-bottom:10px;padding:0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{border:1px solid var(--line);border-radius:17px;background:var(--paper);padding:16px 8px;display:flex;align-items:center;flex-direction:column}
.choice[aria-pressed=true]{background:#eef2ff;border:2px solid #2845c7;padding:15px 7px}
.choice strong{font:500 34px 'Fredoka',sans-serif}
.choice span{font-size:14px;color:var(--muted)}
.choice b{font-weight:600;margin-top:9px}
.step{font-size:12px;color:var(--muted);margin-right:5px}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.methods label{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--paper);border-radius:12px;margin:0;padding:12px;min-height:48px}
.confirm-payment{display:flex;align-items:center;gap:9px;margin:0 0 20px;line-height:1.5}
.back{border:0;background:none;padding:0;color:var(--muted);margin-bottom:16px;font-size:14px}
.ticket{background:var(--yellow);border-radius:18px;height:60px;width:60px;display:grid;place-items:center;font-size:36px;color:#2845c7;margin-bottom:18px}
.upgrade-detail{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;margin:25px 0}
.big-number{font:500 45px 'Fredoka',sans-serif;margin:15px 0}
.detail-line{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:16px;font-size:14px}
.detail-line>span{color:var(--muted)}
.detail-line strong{text-align:right}
.history-list{margin-top:20px;display:grid;gap:12px}
.history-item{background:var(--paper);padding:18px;border:1px solid var(--line);border-radius:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.history-item h2{font:600 16px 'DM Sans',sans-serif;overflow-wrap:anywhere}
.history-item p{font-size:12px;margin-top:4px}
.payment-history{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px;display:grid;gap:5px;font-size:12px;color:var(--muted)}
.periods{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:22px 0 12px;background:#edeafa;padding:5px;border-radius:13px}
.periods button{font-size:14px;border:0;background:none;border-radius:9px}
.periods button[aria-pressed=true]{background:white;box-shadow:0 2px 5px #46207110}
.date-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.date-fields label{margin-top:8px}
.revenue{background:#2845c7;color:#fff;padding:23px;border-radius:22px;margin-top:18px}
.revenue>span{font-size:14px;color:#f0dfff}
.revenue>strong{display:block;font:500 40px 'Fredoka',sans-serif;margin:7px 0 20px}
.revenue>div{display:flex;gap:25px;font-size:12px}
.revenue b{display:block;font-size:16px;margin-top:4px;font-weight:500}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 24px}
.report-grid>div{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px}
.report-grid strong{font:500 26px 'Fredoka',sans-serif;display:block}
.report-grid span{font-size:12px;color:var(--muted)}
.report-section{padding:20px 0;border-top:1px solid var(--line)}
.chart-row{display:flex;gap:10px;align-items:center;font-size:12px;margin-top:15px}
.chart-row>b{font-weight:500;min-width:70px;text-align:right}
.bar-track{flex:1;background:#edeafa;border-radius:4px;overflow:hidden}
.bar-track>div{height:13px;background:#008d99;border-radius:4px}
.settings-section{margin:25px 0;padding-bottom:24px;border-bottom:1px solid var(--line)}
.settings-section>p{font-size:14px;margin-top:12px}
.upgrade-hint{background:var(--yellow);font-size:14px;border-radius:12px;padding:15px;margin:20px 0;line-height:1.7}
.welcome{padding:25px 0}
.welcome-icon{font-size:75px;color:#2845c7;margin-bottom:22px}
.eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:12px;color:var(--blue);font-weight:600}
.welcome>p{margin-top:10px}
.welcome form .primary{margin-top:25px}
.setup-note{margin:30px 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px}
.setup-note p{font-size:14px;margin-top:10px}
.toast:not(:empty){margin:0 20px 15px;background:#e6f7eb;border:1px solid #bce5c9;border-radius:12px;padding:13px;font-size:14px;overflow-wrap:anywhere}
.toast.error{background:var(--red);border-color:#f2c8d2;color:#bf1738}#network:not(:empty){padding:12px 20px;background:#fff7d6;font-size:14px}
.alarm-banner{background:#bf1738;color:#fff;padding:17px 20px;display:grid;gap:6px}
.alarm-banner span{font-size:14px}
.alarm-banner button{background:#fff;color:#bf1738;border:0;border-radius:9px;font-weight:600;margin-top:5px}
.alarm-banner strong{overflow-wrap:anywhere}dialog{width:calc(100% - 32px);max-width:420px;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:#202c59;padding:25px}dialog::backdrop{background:#18235180}dialog p{margin-top:12px}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:23px}
.dialog-actions .primary{font-size:14px}
@media(min-width:700px){.app-shell{margin:25px auto;border-radius:25px;min-height:calc(100dvh - 50px);overflow:hidden}nav{border-radius:0 0 25px 25px;bottom:0}}
@media(max-width:350px){main{padding:10px 14px 25px}header{padding:18px 15px}
.session{padding:13px}
.status-label{font-size:11px}
.child-person h2{font-size:14px}
.time-row>span{font-size:11px}
.secondary{font-size:13px}
.countdown{font-size:33px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,box-shadow .15s}button:hover:not(:disabled){filter:brightness(.97)}}

/* Pikazuu brand: colors taken from the supplied playzone logo. */
h1 { color: #243ba1; }
header { position: relative; padding: 13px 20px 10px; gap: 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--blue) 0% 16.66%, #e2213e 16.66% 33.33%, var(--sunshine) 33.33% 50%, var(--green) 50% 66.66%, var(--purple) 66.66% 83.33%, var(--teal) 83.33% 100%); }
/* Frame the square source artwork; keep the original image unchanged. */
.brand { position: relative; display: block; width: 196px; aspect-ratio: 1.7; overflow: hidden; flex-shrink: 0; border-radius: 12px; }
.brand-logo { position: absolute; width: 118.5%; height: auto; max-width: none; left: -9.25%; top: -53%; }
.icon-button { border-color: #dce3ff; background: #f0f4ff; color: var(--blue); padding: 8px 11px; }
.icon-button span { font-weight: 600; white-space: nowrap; }
main { padding-top: 24px; }
.live-label { background: #e9f8ed; padding: 7px 11px; border-radius: 20px; font-weight: 600; }
.stats { gap: 8px; margin: 24px 0 26px; }
.stats > div { background: #eaf8f0; border: 1px solid #d0eedc; padding: 13px 10px; border-radius: 16px; }
.stats strong { color: #137537; }
.stats span { font-size: 11px; color: #506880; white-space: nowrap; }
.stats > div:nth-child(2) { background: var(--yellow); border-color: #f6e6a1; }
.stats > div:nth-child(3) { background: var(--red); border: 1px solid #f4d6dd; }
.section-heading h2 { font-weight: 700; }
.session { border-left: 4px solid var(--teal); box-shadow: 0 3px 9px #203e7c04; }
.session.soon { border-left-color: #eda900; }
.session.over { border-left-color: #e2213e; }
.avatar { background: #e3f6f7; color: #00717c; }
.soon .avatar { color: #795600; }
.over .avatar { color: var(--danger); }
.status-label { font-size: 11px; background: #eaf8ee; border-radius: 20px; padding: 5px 8px; font-weight: 600; }
.soon .status-label { background: #ffe890; color: #795600; }
.over .status-label { background: #ffd6de; }
.countdown { color: var(--blue); }
.soon .countdown { color: #916100; }
.secondary { color: var(--blue); font-weight: 600; }
.quiet { color: #52607a; }
.primary { background: var(--sunshine); color: #24316a; border: 1px solid #f0be00; font-weight: 700; box-shadow: 0 3px 0 #e8b600; }
.checkin-dock { padding-bottom: 8px; }
.empty { padding: 35px 15px; background: var(--paper); border: 1px dashed #ced9f3; border-radius: 20px; }
.empty > span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 25px; font-size: 53px; background: #eef0ff; margin: 0 auto 19px; text-shadow: 2px 2px 0 #e8ac00; transform: rotate(-8deg); }
.empty h2 { color: var(--blue); }
nav { box-shadow: 0 -4px 18px #2845c705; }
nav button { min-height: 51px; }
nav button[aria-current] { font-weight: 700; }
nav [data-nav=history][aria-current] { background: #e8f8f9; color: #007984; }
nav [data-nav=reports][aria-current] { background: #f5ebff; color: var(--purple); }
nav [data-nav=settings][aria-current] { background: #fff3e3; color: #a75800; }
input:not([type=checkbox]):not([type=radio]) { border-color: #d4ddf0; }
input::placeholder { color: #7a8297; }
.choice[aria-pressed=true] { box-shadow: 0 3px 0 #d6dfff; }
.choice strong { color: var(--blue); }
.choice b { font-weight: 700; }
.step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #edf0ff; font-size: 11px; color: var(--blue); margin-right: 6px; font-weight: 700; }
.methods label:has(input:checked) { border-color: #9bacf0; background: #eef2ff; color: var(--blue); }
.back { color: var(--blue); }
.ticket { background: var(--sunshine); box-shadow: 4px 4px 0 #ffeb8a; transform: rotate(-5deg); }
.upgrade-detail { border-color: #ded0f0; border-top: 4px solid var(--purple); }
.big-number { color: var(--purple); }
.history-item { border-left: 4px solid var(--teal); }
.history-item > strong { color: #007984; }
.periods button[aria-pressed=true] { color: var(--purple); font-weight: 700; }
.revenue { background: var(--purple); border-bottom: 5px solid #672298; }
.revenue > strong { color: #ffe16b; }
.report-grid strong { color: var(--blue); }
.report-grid > div:nth-child(2) strong { color: #007984; }
.report-grid > div:nth-child(3) strong { color: var(--purple); }
.report-grid > div:nth-child(4) strong { color: #a75800; }
.upgrade-hint { border-left: 3px solid var(--sunshine); }
.welcome { padding: 15px 0; }
.welcome-icon { display: grid; place-items: center; width: 76px; height: 76px; background: var(--sunshine); border-radius: 24px; font-size: 57px; margin-bottom: 28px; box-shadow: 5px 5px 0 #ffeb8a; transform: rotate(-7deg); }
.eyebrow { color: var(--purple); font-weight: 700; }
.toast:not(:empty) { color: #166636; }
.toast.error { color: var(--danger); }
#network:not(:empty) { color: #795600; }
@media (max-width: 350px) {
  main { padding-top: 20px; }
  header { padding: 12px 14px 10px; gap: 7px; }
  .brand { width: 154px; }
  .icon-button { padding: 8px; }
  .icon-button span { font-size: 11px; }
  .stats > div { padding: 12px 7px; }
  .stats span { font-size: 10px; }
  .child-heading { gap: 7px; }
  .status-label { font-size: 10px; padding: 5px 6px; }
}

select { display: block; width: 100%; min-width: 0; min-height: 50px; margin-top: 8px; padding: 12px 34px 12px 12px; border: 1px solid #d4ddf0; border-radius: 12px; background: var(--paper); color: #202c59; font: inherit; font-size: 16px; text-overflow: ellipsis; }
select:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.voice-sample { margin-top: 16px; padding: 16px; border-radius: 14px; background: #f4ebff; border-left: 3px solid var(--purple); color: #66308b; font-size: 14px; line-height: 1.7; }