/* Apple-style skin for every lab demo. Loaded last, so it wins over base.css and each page's own <style>. */
:root{--bg:#f5f5f7;--panel:#fff;--line:rgba(0,0,0,.09);--ink:#1d1d1f;--mute:#6e6e73;--acc:#0071e3;--acc2:#0071e3;
 --ok:#34c759;--warn:#ff9f0a;--bad:#ff3b30;--r:18px;
 --disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Hebrew","Heebo",system-ui,sans-serif;
 --sh:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);--sh2:0 2px 6px rgba(0,0,0,.06),0 18px 44px rgba(0,0,0,.09);
 --spr:cubic-bezier(.32,.72,0,1)}
body{background:var(--bg);color:var(--ink);font-family:var(--disp);-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
::selection{background:rgba(0,113,227,.2)}

/* nav bar — translucent material, content scrolls under it */
.bar{background:rgba(251,251,253,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
 border-bottom:1px solid rgba(0,0,0,.08);padding:12px clamp(14px,3vw,32px)}
.bar a{color:var(--acc);font-size:14px}.bar a:hover{color:var(--acc);text-decoration:underline}
.bar b{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em}
.bar i{color:var(--mute);border:0;background:rgba(0,0,0,.05);letter-spacing:.08em;font-weight:600}

/* type — tight tracking on display sizes, near zero on body */
h1{font-family:var(--disp);font-weight:700;font-size:clamp(32px,5vw,56px);letter-spacing:-.028em;line-height:1.07;margin-top:clamp(8px,2vw,24px)}
.sub{color:var(--mute);font-size:clamp(17px,1.7vw,21px);line-height:1.45;margin:12px 0 34px;max-width:620px;font-weight:400}
h2,h3,h4{font-family:var(--disp)}
.mut{color:var(--mute)}

/* surfaces */
.card{background:#fff;border:0;border-radius:var(--r);padding:22px;box-shadow:var(--sh)}

/* controls — pill buttons, instant press feedback */
button{-webkit-tap-highlight-color:transparent}
button:active,.opt:active,.h:active,.p:active{transform:scale(.97);transition:transform .1s ease-out}
.btn{background:var(--acc);color:#fff;border-radius:980px;padding:12px 24px;font-weight:500;font-size:16px;letter-spacing:-.01em;transition:background .25s,transform .45s var(--spr)}
.btn:hover{background:#0077ed;filter:none;transform:none}
.btn.g{background:rgba(0,0,0,.05);border:0;color:var(--ink)}.btn.g:hover{background:rgba(0,0,0,.08)}
.chip{background:rgba(0,0,0,.05);border:0;border-radius:980px;padding:8px 16px;font-size:14px;font-weight:500;color:var(--ink)}
.chip:hover{background:rgba(0,0,0,.08);color:var(--ink)}
.chip.on{background:var(--ink);color:#fff}
input,select,textarea{background:#fff;border:1px solid #d2d2d7;border-radius:12px;padding:12px 14px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(0,113,227,.16)}
input[type=range]{accent-color:var(--acc);border:0;padding:0;box-shadow:none}
label{color:var(--mute);font-weight:500}
.toast{background:rgba(29,29,31,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font-weight:500;
 border-radius:980px;padding:13px 24px;box-shadow:0 12px 40px rgba(0,0,0,.25);transition:transform .5s var(--spr)}

/* shared "pick one" tiles: white, no borders, blue ring when chosen */
.svc button,.day,.slot,.opt{background:#fff!important;border:0!important;box-shadow:var(--sh);border-radius:14px;
 transition:box-shadow .3s var(--spr),transform .45s var(--spr),background .2s}
.svc button:hover,.day:hover,.slot:hover,.opt:hover{box-shadow:var(--sh2)}
.svc button.on,.opt.on{box-shadow:0 0 0 2px var(--acc),var(--sh2)}
.day.on,.slot.on{background:var(--acc)!important;color:#fff}
.day.on .mut{color:rgba(255,255,255,.75)}
h3{color:var(--ink)}

/* booking */
.pg-booking h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:34px 0 14px}
.pg-booking .svc button{padding:18px 20px}.pg-booking .svc b{font-weight:600}

/* ai assistant — iMessage bubbles */
.pg-ai-assistant .u{background:#0a84ff;color:#fff;border-radius:20px 20px 6px 20px}
.pg-ai-assistant .a{background:#e9e9eb;border:0;color:var(--ink);border-radius:20px 20px 20px 6px}

/* configurator */
.pg-configurator .stage{background:radial-gradient(circle at 50% 38%,#fff,#e8e8ed 75%);box-shadow:var(--sh)}
.pg-configurator .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.pg-configurator .sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--acc)}
.pg-configurator h3{font-size:15px;color:var(--ink);font-weight:600}

/* crm */
.pg-crm .col{background:rgba(0,0,0,.035);border:0;border-radius:20px}
.pg-crm .col.ov{box-shadow:inset 0 0 0 2px var(--acc)}
.pg-crm .ld{background:#fff;border:0;border-radius:14px;box-shadow:var(--sh)}
.pg-crm .tag{background:rgba(0,113,227,.1);color:var(--acc);font-weight:500}

/* dashboard */
.pg-dashboard .k b{font-family:var(--disp);font-weight:700;letter-spacing:-.025em}
.pg-dashboard .bars i{background:var(--acc)}

/* fitness — Apple Fitness is dark, keep the phone dark */
.pg-fitness-app .ph{--acc:#a6ff00;border:10px solid #1d1d1f;border-radius:52px;background:#000;color:#f5f5f7;box-shadow:var(--sh2)}
.pg-fitness-app .ph .mut{color:#8e8e93}
.pg-fitness-app .ring div{font-family:var(--disp);font-weight:700;letter-spacing:-.03em}
.pg-fitness-app .ex{background:#1c1c1e;border:0;border-radius:16px}.pg-fitness-app .ex.a{box-shadow:0 0 0 2px var(--acc)}

/* invoice — the document floats like a sheet of paper */
.pg-invoice .pp{border-radius:14px;box-shadow:var(--sh2)}
.pg-invoice .pp h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em}

/* loyalty — a Wallet pass */
.pg-loyalty .card2{background:linear-gradient(160deg,#0a84ff,#0040dd);color:#fff;border-radius:22px;box-shadow:0 30px 60px -24px rgba(0,64,221,.6)}
.pg-loyalty .card2 .mut{color:rgba(255,255,255,.72)}
.pg-loyalty .s{border-color:rgba(255,255,255,.35)}.pg-loyalty .s.f{background:#fff;color:#0040dd}.pg-loyalty .s.g{border-color:#ffd60a;color:#ffd60a}

/* menu */
.pg-menu .cats{top:52px;background:rgba(245,245,247,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.pg-menu .it{border-color:rgba(0,0,0,.08)}.pg-menu .it .e{background:#fff;box-shadow:var(--sh);border-radius:16px}
.pg-menu .add{color:#fff;font-weight:500}
.pg-menu .fl{color:#fff;border-radius:980px;box-shadow:0 14px 40px rgba(0,113,227,.4)}

/* quote */
.pg-quote .big{font-family:var(--disp);font-weight:700;letter-spacing:-.03em}
.pg-quote .ln{border-bottom:1px solid rgba(0,0,0,.07)}

/* real estate + shop — products on soft gray, like a store page */
.pg-realestate .h,.pg-shop .p{border:0;box-shadow:var(--sh);transition:transform .5s var(--spr),box-shadow .5s var(--spr)}
.pg-realestate .h:hover,.pg-shop .p:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.pg-realestate .h .im,.pg-shop .p .im{background:#f0f0f3!important}
.pg-realestate .h b.p{font-family:var(--disp);font-weight:700;letter-spacing:-.02em}
.pg-realestate .heart.on{color:#ff2d55}
.pg-shop .q button{border:0;background:rgba(0,0,0,.06);border-radius:50%}
.pg-shop .ci,.pg-shop .tot.b{border-color:rgba(0,0,0,.08)}

/* scheduler */
.pg-scheduler table{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.pg-scheduler th,.pg-scheduler td{border-color:rgba(0,0,0,.07)}
.pg-scheduler th,.pg-scheduler td.n{background:#fbfbfd}
.pg-scheduler .m{background:#0a84ff;color:#fff}.pg-scheduler .e{background:#ff9f0a;color:#fff}

/* whatsapp — the phone keeps WhatsApp's own dark look, framed like an iPhone */
.pg-whatsapp-bot .ph{border:10px solid #1d1d1f;border-radius:52px;color:#e9edef;box-shadow:var(--sh2)}
.pg-whatsapp-bot .ph .mut{color:#8696a0}

/* admin panel */
.pg-admin-panel .site{box-shadow:var(--sh2);border-radius:18px}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}button:active,.opt:active,.h:active,.p:active{transform:none}}