:root{
  --bg:#f7f3ed;
  --bg-soft:#fbf8f4;
  --panel:#ffffffd9;
  --panel-strong:#ffffff;
  --text:#1f1a17;
  --muted:#776d63;
  --line:#e7ddd2;
  --gold:#d6a85d;
  --gold-strong:#bf8f3a;
  --gold-soft:#f9e9c9;
  --accent:#8d6b45;
  --success:#1f9d71;
  --danger:#c74c4c;
  --shadow:0 15px 35px rgba(104,80,49,.10);
  --shadow-hover:0 22px 40px rgba(104,80,49,.14);
  --radius:24px;
  --radius-sm:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(214,168,93,.20), transparent 20%),
    radial-gradient(circle at 100% 10%, rgba(255,255,255,.9), transparent 25%),
    linear-gradient(180deg,#fcfaf7 0%, #f7f3ed 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}
.container{max-width:1240px;margin:0 auto;padding:0 18px}
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(251,248,244,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(191,143,58,.12);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 0;
}
.brand{display:flex;align-items:center;gap:14px}
.brand strong{display:block;font-size:18px;letter-spacing:.2px}
.brand small{display:block;color:var(--muted);font-size:12px}
.brand-icon{
  width:50px;height:50px;border-radius:18px;
  display:grid;place-items:center;font-size:24px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  box-shadow:0 12px 26px rgba(191,143,58,.28);
}
.nav{display:flex;gap:8px;align-items:center}
.nav a,.mobile-nav a{
  padding:10px 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted);
  transition:.25s ease;
}
.nav a:hover,.mobile-nav a:hover{background:#fff;color:var(--text);box-shadow:var(--shadow)}
.nav-toggle{
  display:none;border:none;background:#fff;width:42px;height:42px;border-radius:14px;
  box-shadow:var(--shadow);font-size:18px
}
.mobile-nav{
  display:none;padding:0 18px 16px;flex-direction:column;gap:8px;
}
.mobile-nav.show{display:flex}
.bg-orb{
  position:fixed;border-radius:999px;filter:blur(32px);opacity:.6;z-index:-1;pointer-events:none;
  animation:floatOrb 12s ease-in-out infinite;
}
.orb-1{width:220px;height:220px;left:-50px;top:120px;background:rgba(214,168,93,.20)}
.orb-2{width:280px;height:280px;right:-80px;top:240px;background:rgba(255,220,172,.28);animation-delay:2s}
.orb-3{width:180px;height:180px;left:45%;bottom:100px;background:rgba(255,255,255,.45);animation-delay:4s}
@keyframes floatOrb{
  0%,100%{transform:translateY(0) translateX(0)}
  50%{transform:translateY(-18px) translateX(8px)}
}
.hero{
  padding:34px 0 10px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch
}
.panel{
  background:var(--panel);
  border:1px solid rgba(214,168,93,.18);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.premium-panel{
  position:relative;overflow:hidden;
}
.premium-panel:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.35), rgba(214,168,93,.05));
  pointer-events:none;
}
.hero-copy{padding:34px;position:relative}
.hero-copy h1{
  margin:10px 0 12px;font-size:clamp(36px,5vw,62px);line-height:1.02;letter-spacing:-1.8px
}
.hero-copy h1 span{
  background:linear-gradient(135deg,var(--gold-strong),#7e5a1c);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-copy p{color:var(--muted);line-height:1.75;max-width:700px}
.eyebrow,.section-kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold-strong);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{
  border:none;border-radius:16px;padding:14px 18px;font-weight:800;transition:.28s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:8px
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn.gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  color:#fff;
}
.btn.light{
  background:#fff;color:var(--text);border:1px solid var(--line)
}
.btn.small{padding:10px 14px;border-radius:12px;font-size:13px}
.pulse{animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(191,143,58,.35)}
  70%{box-shadow:0 0 0 14px rgba(191,143,58,0)}
  100%{box-shadow:0 0 0 0 rgba(191,143,58,0)}
}
.hero-highlights{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px
}
.mini-card{
  background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:18px;padding:14px;
  transition:.25s ease
}
.mini-card:hover{transform:translateY(-4px)}
.mini-card strong{display:block;font-size:20px}
.mini-card span{color:var(--muted);font-size:13px}
.hero-side{display:flex}
.schedule-preview{padding:24px;display:flex;flex-direction:column;justify-content:center;width:100%}
.preview-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:18px}
.preview-head small{color:var(--muted)}
.preview-head h3{margin:4px 0 0;font-size:28px}
.preview-list{display:grid;gap:10px}
.preview-item{
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:18px;padding:14px;
  display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:center;transition:.25s ease
}
.preview-item.active{border-color:rgba(191,143,58,.35);box-shadow:0 12px 30px rgba(214,168,93,.12)}
.preview-item:hover{transform:translateY(-3px)}
.preview-item span{font-weight:800;font-size:18px}
.preview-item small{color:var(--muted)}
.section{padding:26px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-head h2{margin:4px 0 8px;font-size:34px;letter-spacing:-1px}
.section-sub{margin:0;color:var(--muted)}
.studio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.studio-card{
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:26px;padding:24px;
  box-shadow:var(--shadow);transition:.28s ease;cursor:pointer;position:relative;overflow:hidden
}
.studio-card:before{
  content:"";position:absolute;inset:auto -20% -60% auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(214,168,93,.10), transparent 70%);
}
.studio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.studio-card.selected{border-color:rgba(191,143,58,.48);box-shadow:0 22px 45px rgba(191,143,58,.16)}
.selected-off{opacity:.96}
.studio-head{display:flex;align-items:center;justify-content:space-between}
.studio-icon{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:28px;
  background:linear-gradient(135deg,#fff8ee,#f6e1b6);border:1px solid rgba(191,143,58,.18)
}
.studio-card h3{margin:16px 0 8px;font-size:26px}
.studio-card p{margin:0;color:var(--muted);line-height:1.65}
.price{margin-top:18px;font-size:34px;font-weight:900;letter-spacing:-1px}
.price small{font-size:14px;color:var(--muted);font-weight:700}
.studio-features{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.studio-features span,.chip{
  padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800
}
.studio-features span{background:#faf7f2;border:1px solid var(--line);color:var(--accent)}
.chip-soft{background:#fff7ea;color:#946724;border:1px solid #f0d39d}
.chip-gold{background:linear-gradient(135deg,var(--gold),var(--gold-strong));color:white}
.badge{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900;display:inline-flex;align-items:center}
.badge.success{background:#eaf8f2;color:var(--success)}
.badge.danger{background:#fdeeee;color:var(--danger)}
.booking-layout{display:grid;grid-template-columns:1.06fr .94fr;gap:18px;align-items:start}
.form-panel{padding:24px}
.block + .block{margin-top:24px}
.block-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.block-head h3{margin:0;font-size:22px}
.block-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.block-number{
  flex:0 0 40px;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  font-weight:900;color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-strong))
}
.date-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(76px,1fr);gap:10px;overflow:auto;padding-bottom:4px
}
.date-chip,.slot-btn,.duration-btn{
  border:none;transition:.25s ease
}
.date-chip{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px 10px;min-height:84px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-weight:800
}
.date-chip strong{font-size:22px}
.date-chip small{color:var(--muted)}
.date-chip.active{
  background:linear-gradient(180deg,#fff8ee,#fff);border-color:rgba(191,143,58,.42);
  box-shadow:0 14px 26px rgba(191,143,58,.14)
}
.time-grid,.duration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.slot-btn,.duration-btn{
  min-height:52px;border-radius:16px;background:#fff;border:1px solid var(--line);font-weight:800;color:var(--text)
}
.slot-btn:hover,.duration-btn:hover{transform:translateY(-2px)}
.slot-btn.active,.duration-btn.active{
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));color:#fff;border-color:transparent
}
.slot-btn.disabled,.duration-btn.disabled{
  background:#f3eee7;color:#b9ab9d;cursor:not-allowed;border-style:dashed
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:13px;font-weight:800;color:#5d554d}
input,textarea{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px 15px;color:var(--text);
  outline:none;transition:.25s ease
}
input:focus,textarea:focus{border-color:rgba(191,143,58,.55);box-shadow:0 0 0 4px rgba(214,168,93,.12)}
textarea{min-height:110px;resize:vertical}
.hidden-input{position:absolute;left:-9999px;opacity:0}
.status-box{
  margin-top:18px;padding:15px 16px;border-radius:16px;background:#f6faf8;border:1px solid #d9efe6;color:#2c7a58;font-weight:700
}
.status-box.error{background:#fdf2f2;border-color:#f3d2d2;color:#a84242}
.summary-panel{padding:24px;position:sticky;top:86px}
.summary-top h3{margin:6px 0 0;font-size:28px}
.summary-rows{display:grid;gap:6px;margin:18px 0}
.summary-row{
  display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px dashed rgba(191,143,58,.25)
}
.summary-row span{color:var(--muted)}
.summary-total{
  padding:18px;border-radius:20px;background:linear-gradient(135deg,#fff6e9,#fff);border:1px solid rgba(191,143,58,.18)
}
.summary-total small{display:block;color:var(--muted);margin-bottom:4px}
.summary-total strong{font-size:34px;letter-spacing:-1px;color:#8b611f}
.summary-panel .btn{width:100%;margin-top:18px}
.secure-box{
  margin-top:16px;display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid var(--line)
}
.secure-box span{font-weight:900;color:var(--success)}
.secure-box p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.schedule-list{display:grid;gap:12px}
.schedule-item{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:center;
  transition:.25s ease
}
.schedule-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.schedule-time strong{display:block;font-size:22px}
.schedule-time span,.schedule-info p{color:var(--muted);font-size:13px}
.schedule-info h4{margin:0 0 5px;font-size:18px}
.schedule-info p{margin:0}
.empty-state{
  padding:38px;text-align:center;border:1px dashed var(--line);border-radius:20px;background:#fff;color:var(--muted)
}
.footer{padding:10px 0 90px;color:var(--muted);text-align:center}
.mobile-bar{
  display:none;position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid rgba(191,143,58,.16);
  box-shadow:var(--shadow-hover);border-radius:18px;padding:10px;z-index:55;align-items:center;gap:12px
}
.mobile-price{flex:1}
.mobile-price small{display:block;color:var(--muted);font-size:11px}
.mobile-price strong{font-size:18px}
.modal{
  position:fixed;inset:0;background:rgba(48,35,19,.35);display:none;align-items:center;justify-content:center;
  z-index:80;padding:18px;backdrop-filter:blur(6px)
}
.modal.show{display:flex}
.modal-card{width:min(480px,100%);padding:28px;text-align:center}
.modal-check{
  width:72px;height:72px;border-radius:24px;margin:0 auto 12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));color:#fff;font-size:34px;font-weight:900
}
.modal-card h3{margin:0 0 14px;font-size:30px}
.receipt{
  margin:18px 0;padding:16px;border-radius:20px;background:#fff;border:1px solid var(--line);text-align:left
}
.receipt-code{font-weight:900;font-size:22px;color:#8b611f;margin-bottom:8px}
.receipt-detail{display:grid;gap:6px;color:var(--muted)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-box{padding:22px}
.stat-box small{display:block;color:var(--muted);margin-bottom:8px}
.stat-box strong{font-size:32px}
.table-panel{padding:14px}
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:separate;border-spacing:0 10px;min-width:1100px}
.data-table thead th{
  text-align:left;padding:0 14px 8px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em
}
.data-table tbody tr{background:#fff;box-shadow:var(--shadow)}
.data-table tbody td{
  padding:16px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px
}
.data-table tbody td:first-child{
  border-left:1px solid var(--line);border-top-left-radius:14px;border-bottom-left-radius:14px
}
.data-table tbody td:last-child{
  border-right:1px solid var(--line);border-top-right-radius:14px;border-bottom-right-radius:14px
}
.reveal{opacity:0;transform:translateY(22px);transition:all .7s cubic-bezier(.2,.8,.2,1)}
.reveal.show{opacity:1;transform:none}
.delay-1{transition-delay:.1s}
@media (max-width:980px){
  .hero,.booking-layout,.stats-grid{grid-template-columns:1fr}
  .summary-panel{position:relative;top:auto}
  .time-grid,.duration-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .nav{display:none}
  .nav-toggle{display:inline-grid;place-items:center}
  .hero-highlights,.studio-grid,.form-grid{grid-template-columns:1fr}
  .hero-copy{padding:26px}
  .hero-copy h1{font-size:38px}
  .section-head h2{font-size:28px}
  .time-grid,.duration-grid{grid-template-columns:repeat(2,1fr)}
  .schedule-item{grid-template-columns:1fr;gap:10px}
  .mobile-bar{display:flex}
  .footer{padding-bottom:110px}
}
@media (max-width:520px){
  .container{padding:0 12px}
  .topbar-inner{padding:12px 0}
  .brand-icon{width:44px;height:44px}
  .studio-card,.panel{border-radius:20px}
  .date-strip{grid-auto-columns:minmax(72px,1fr)}
  .slot-btn,.duration-btn{min-height:48px}
}

/* ===== Interactive + responsive consistency upgrade ===== */
html{scroll-padding-top:92px}
body.modal-open{overflow:hidden}
.scroll-progress{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:120;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,#e5bd78,#b57a23,#e5bd78);
  box-shadow:0 1px 8px rgba(181,122,35,.28)
}
.topbar{transition:box-shadow .25s ease,background .25s ease}
.topbar.scrolled{background:rgba(251,248,244,.93);box-shadow:0 8px 28px rgba(103,75,36,.08)}
.nav a.active{background:#fff;color:#7d571d;box-shadow:0 8px 20px rgba(104,80,49,.09)}
.eyebrow i,.live-badge i{
  width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;
  box-shadow:0 0 0 0 currentColor;animation:livePing 2s infinite
}
@keyframes livePing{70%{box-shadow:0 0 0 8px rgba(31,157,113,0)}100%{box-shadow:0 0 0 0 rgba(31,157,113,0)}}
.live-badge i{color:var(--success)}
.interactive-card{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .24s ease,box-shadow .28s ease,border-color .28s ease
}
.ripple{position:relative;overflow:hidden;isolation:isolate}
.ripple-wave{
  position:absolute;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:-1;
  background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);
  animation:rippleWave .62s ease-out forwards
}
.btn.light .ripple-wave{background:rgba(181,122,35,.13)}
@keyframes rippleWave{to{transform:translate(-50%,-50%) scale(18);opacity:0}}
.visualizer{
  height:62px;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 6px 12px;margin-bottom:8px
}
.visualizer span{
  width:5px;min-height:8px;border-radius:999px;
  background:linear-gradient(180deg,#e5bd78,#a76d1e);
  animation:equalizer 1.2s ease-in-out infinite alternate
}
.visualizer span:nth-child(2n){animation-delay:.15s}.visualizer span:nth-child(3n){animation-delay:.3s}.visualizer span:nth-child(4n){animation-delay:.45s}
@keyframes equalizer{from{height:10px;opacity:.45}to{height:48px;opacity:1}}
.selection-pill{
  white-space:nowrap;background:#fff;border:1px solid #ead8b8;color:#865b1c;
  padding:10px 14px;border-radius:999px;font-size:13px;font-weight:800;box-shadow:var(--shadow)
}
.studio-card{min-width:0}
.selected-mark{
  position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:white;background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  transform:scale(0) rotate(-30deg);opacity:0;transition:.28s cubic-bezier(.2,.8,.2,1)
}
.studio-card.selected .selected-mark{transform:scale(1) rotate(0);opacity:1}
.studio-card:focus-visible,.date-chip:focus-visible,.slot-btn:focus-visible,.duration-btn:focus-visible,.btn:focus-visible,.nav-toggle:focus-visible{
  outline:3px solid rgba(191,143,58,.28);outline-offset:3px
}
.booking-progress{display:flex;gap:7px;align-items:center}
.booking-progress span{width:26px;height:7px;border-radius:99px;background:#e8dfd4;transition:.3s ease}
.booking-progress span.active{width:38px;background:linear-gradient(90deg,var(--gold),var(--gold-strong))}
.field-hint{color:#9b8f84;font-size:11px;margin-top:-2px}
input.invalid{border-color:#d96868!important;box-shadow:0 0 0 4px rgba(217,104,104,.10)!important;animation:shake .28s ease}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.status-box.loading{background:#fbf8f1;color:#8d682d;border-color:#ead8b8;position:relative;overflow:hidden}
.status-box.loading:after{
  content:"";position:absolute;left:-35%;top:0;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:shine 1.1s infinite
}
@keyframes shine{to{left:110%}}
.spinner{
  width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:white;
  animation:spin .7s linear infinite;display:inline-block
}
@keyframes spin{to{transform:rotate(360deg)}}
.schedule-panel{padding:18px}
.schedule-enter{opacity:0;transform:translateY(10px);animation:scheduleIn .42s ease forwards;animation-delay:var(--delay,0ms)}
@keyframes scheduleIn{to{opacity:1;transform:none}}
.empty-state{display:grid;gap:6px;place-items:center}
.empty-state strong{font-size:18px;color:var(--text)}
.empty-state span{font-size:13px}
.empty-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#fff7ea;color:#9b691e;font-size:22px;margin-bottom:4px}
.skeleton-list{display:grid;gap:12px}
.skeleton-list div,.skeleton-line{
  border-radius:18px;background:linear-gradient(100deg,#f3eee8 25%,#fff 40%,#f3eee8 55%);background-size:220% 100%;animation:skeleton 1.2s infinite
}
.skeleton-list div{height:76px}.skeleton-line{height:22px;width:100%}
@keyframes skeleton{to{background-position-x:-220%}}
.toast-wrap{
  position:fixed;right:18px;top:88px;z-index:140;display:grid;gap:10px;width:min(360px,calc(100vw - 28px));pointer-events:none
}
.toast{
  display:grid;grid-template-columns:32px 1fr;align-items:center;gap:10px;padding:12px 14px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(77,54,25,.15);
  transform:translateX(22px);opacity:0;transition:.28s ease
}
.toast.show{transform:none;opacity:1}.toast span{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-weight:900}
.toast.success span{background:#e9f7f1;color:var(--success)}.toast.error span{background:#fceded;color:var(--danger)}.toast.info span{background:#fff5e4;color:#976518}
.toast p{margin:0;font-size:13px;font-weight:700;line-height:1.4}
.modal.show .modal-card{animation:modalIn .4s cubic-bezier(.2,.9,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modal.show .modal-check{animation:checkPop .55s .08s both cubic-bezier(.2,.9,.2,1)}
@keyframes checkPop{0%{transform:scale(.35) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.confetti:before,.confetti:after{
  content:"✦  •  ✧  •  ✦  •  ✧";position:absolute;left:12%;right:12%;top:10px;color:#d6a85d;letter-spacing:16px;opacity:.75;
  animation:confettiFloat 2.2s ease-in-out infinite alternate
}
.confetti:after{top:auto;bottom:10px;animation-delay:.6s}
@keyframes confettiFloat{to{transform:translateY(6px);opacity:.35}}

/* Admin interaction */
.admin-hero{padding:34px}.admin-hero h1{font-size:clamp(36px,5vw,56px);line-height:1.04;margin:12px 0;letter-spacing:-1.5px}.admin-hero p{color:var(--muted);line-height:1.6;max-width:720px}
.stat-box{position:relative;overflow:hidden}.stat-box:after{content:"";position:absolute;right:-24px;bottom:-40px;width:110px;height:110px;border-radius:50%;background:rgba(214,168,93,.09)}
.stat-box span{display:block;color:#a29386;font-size:12px;margin-top:4px}.stat-box strong{position:relative;z-index:1}
.table-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:4px 2px 14px}
.search-box{display:flex;align-items:center;gap:9px;flex:1;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:0 12px}
.search-box input{border:0;box-shadow:none!important;padding:12px 4px;background:transparent}.search-box input:focus{box-shadow:none}
.table-toolbar select{border:1px solid var(--line);background:#fff;border-radius:15px;padding:12px 14px;color:var(--text);font:inherit;font-weight:700;outline:none}
.table-row-enter{animation:tableIn .35s ease both}@keyframes tableIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.empty-table{padding:22px;text-align:center;color:var(--muted)}

/* Consistent desktop/tablet/mobile scale */
@media (min-width:1200px){
  .container{max-width:1240px}.hero{gap:22px}.booking-layout{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)}
  .time-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.duration-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:1199px){
  .container{max-width:100%;padding:0 24px}.hero{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)}
  .hero-copy{padding:28px}.hero-copy h1{font-size:clamp(40px,5vw,54px)}
  .booking-layout{grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr)}
  .time-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.duration-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}.hero-side{display:block}.schedule-preview{min-height:auto}
  .booking-layout{grid-template-columns:1fr}.summary-panel{position:relative;top:auto}
  .studio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  html{scroll-padding-top:76px}.container{padding:0 14px}.topbar-inner{padding:10px 0}
  .brand strong{font-size:16px}.brand small{font-size:10px}.brand-icon{width:43px;height:43px;border-radius:15px}
  .mobile-nav{display:grid;grid-template-rows:0fr;overflow:hidden;padding:0 14px;transition:grid-template-rows .3s ease,padding .3s ease}
  .mobile-nav>*{min-height:0;opacity:0;transition:opacity .2s ease}.mobile-nav.show{display:grid;grid-template-rows:repeat(4,1fr);padding:0 14px 12px}
  .mobile-nav.show>*{opacity:1}.mobile-nav a{background:rgba(255,255,255,.72);margin-top:6px;text-align:center}
  .hero{padding-top:20px;gap:12px}.hero-copy{padding:22px}.hero-copy h1{font-size:clamp(34px,10vw,44px);letter-spacing:-1.2px}
  .hero-copy p{font-size:14px;line-height:1.65}.hero-actions .btn{flex:1;min-width:145px}
  .hero-highlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mini-card{padding:11px 9px;border-radius:15px}.mini-card strong{font-size:15px}.mini-card span{font-size:10px}
  .visualizer{height:48px}.preview-item{grid-template-columns:68px 1fr;padding:12px}.preview-item span{font-size:16px}
  .section{padding:20px 0}.section-head{align-items:flex-start;flex-direction:column}.section-head h2{font-size:clamp(26px,7vw,32px);margin-bottom:5px}.selection-pill{font-size:12px}
  .studio-grid{grid-template-columns:1fr;gap:12px}.studio-card{padding:20px}.studio-card h3{font-size:23px}.price{font-size:30px}
  .form-panel,.summary-panel{padding:18px}.block+.block{margin-top:22px}.block-number{width:36px;height:36px;flex-basis:36px;border-radius:12px}.block-head h3{font-size:19px}.block-head p{font-size:12px}
  .date-strip{margin-left:-4px;margin-right:-4px;padding:2px 4px 7px;grid-auto-columns:73px}.date-chip{min-height:78px;border-radius:17px}.date-chip strong{font-size:20px}
  .time-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.duration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.slot-btn,.duration-btn{min-height:48px;border-radius:14px;font-size:13px}
  .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}input,textarea{font-size:16px;padding:13px 14px}
  .summary-row{font-size:13px}.summary-total strong{font-size:31px}.secure-box{font-size:12px}
  .schedule-panel{padding:12px}.schedule-item{grid-template-columns:86px 1fr;gap:10px;padding:13px}.schedule-item .chip{grid-column:1/-1;justify-self:start}.schedule-time strong{font-size:19px}.schedule-info h4{font-size:16px}
  .toast-wrap{top:72px;right:14px}.mobile-bar{display:flex}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-box{padding:17px}.stat-box strong{font-size:25px}
  .table-toolbar{align-items:stretch;flex-direction:column}.search-box{max-width:none}.table-toolbar select{width:100%}
}
@media (max-width:430px){
  .container{padding:0 10px}.hero-copy{padding:20px 17px}.hero-highlights{grid-template-columns:1fr 1fr 1fr}
  .hero-actions{gap:8px}.hero-actions .btn{width:100%;flex-basis:100%}.schedule-preview{padding:17px}
  .time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.duration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking-progress{display:none}.section-head{gap:9px}.selection-pill{white-space:normal}
  .mobile-bar{left:7px;right:7px;padding:8px}.mobile-bar .btn{padding:12px 15px}
  .stats-grid{grid-template-columns:1fr 1fr}.stat-box small{font-size:11px}.stat-box strong{font-size:22px}
}
@media (hover:none),(pointer:coarse){
  .interactive-card{transform:none!important}.studio-card:hover,.mini-card:hover,.preview-item:hover,.schedule-item:hover,.btn:hover,.slot-btn:hover,.duration-btn:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ===== White • Blue • Red Premium Theme ===== */
:root{
  --bg:#f6faff;
  --bg-soft:#edf5ff;
  --panel:rgba(255,255,255,.92);
  --panel-strong:#ffffff;
  --text:#10233f;
  --muted:#64748b;
  --line:#dbe7f5;
  /* Legacy variable names are retained for compatibility with the existing markup. */
  --gold:#1976d2;
  --gold-strong:#0b4fa3;
  --gold-soft:#e8f3ff;
  --accent:#145fae;
  --red:#e63946;
  --red-strong:#b91c2d;
  --red-soft:#fff0f2;
  --success:#16845b;
  --danger:#d93646;
  --shadow:0 15px 35px rgba(16,74,140,.10);
  --shadow-hover:0 24px 48px rgba(16,74,140,.16);
}
body{
  background:
    radial-gradient(circle at 0% 0%, rgba(25,118,210,.15), transparent 24%),
    radial-gradient(circle at 100% 8%, rgba(230,57,70,.09), transparent 20%),
    radial-gradient(circle at 52% 48%, rgba(255,255,255,.86), transparent 38%),
    linear-gradient(180deg,#fbfdff 0%,#f3f8ff 100%);
}
.topbar{
  background:rgba(255,255,255,.84);
  border-bottom-color:rgba(25,118,210,.12);
}
.topbar.scrolled{
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 28px rgba(16,74,140,.09);
}
.brand-icon{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-strong) 72%,var(--red) 72%,var(--red) 100%);
  box-shadow:0 12px 28px rgba(25,118,210,.24);
}
.nav a.active{
  color:var(--gold-strong);
  box-shadow:0 8px 20px rgba(16,74,140,.09);
}
.orb-1{background:rgba(25,118,210,.16)}
.orb-2{background:rgba(230,57,70,.10)}
.orb-3{background:rgba(59,130,246,.08)}
.panel{border-color:rgba(25,118,210,.13)}
.premium-panel:before{
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(25,118,210,.045) 58%,rgba(230,57,70,.035));
}
.hero-copy h1 span{
  background:linear-gradient(100deg,var(--gold-strong) 0%,var(--gold) 54%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow,.section-kicker{color:var(--gold-strong)}
.btn.gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  box-shadow:0 12px 28px rgba(25,118,210,.19);
}
.btn.gold:hover{box-shadow:0 18px 34px rgba(25,118,210,.24)}
.btn.light{border-color:var(--line)}
.pulse{animation:pulseBlue 2.4s infinite}
@keyframes pulseBlue{
  0%{box-shadow:0 0 0 0 rgba(25,118,210,.30)}
  70%{box-shadow:0 0 0 14px rgba(25,118,210,0)}
  100%{box-shadow:0 0 0 0 rgba(25,118,210,0)}
}
.preview-item.active{
  border-color:rgba(230,57,70,.30);
  box-shadow:0 12px 30px rgba(230,57,70,.08);
}
.studio-card:before{
  background:radial-gradient(circle,rgba(25,118,210,.09),transparent 70%);
}
.studio-card.selected{
  border-color:rgba(25,118,210,.42);
  box-shadow:0 22px 45px rgba(25,118,210,.13);
}
.studio-card.premium:before{
  background:radial-gradient(circle,rgba(230,57,70,.10),transparent 70%);
}
.studio-card.premium.selected{
  border-color:rgba(230,57,70,.40);
  box-shadow:0 22px 45px rgba(230,57,70,.12);
}
.studio-icon{
  background:linear-gradient(135deg,#f4f9ff,#e2f0ff);
  border-color:rgba(25,118,210,.15);
}
.studio-card.premium .studio-icon{
  background:linear-gradient(135deg,#fff7f8,#ffe2e6);
  border-color:rgba(230,57,70,.16);
}
.studio-features span{
  background:#f7fbff;
  color:var(--accent);
}
.chip-soft{
  background:#edf6ff;color:#0b5cab;border-color:#cde4fb;
}
.chip-gold{
  background:linear-gradient(135deg,var(--red),var(--red-strong));
  color:#fff;
}
.block-number{
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
}
.block:nth-child(even) .block-number{
  background:linear-gradient(135deg,var(--red),var(--red-strong));
}
.date-chip.active{
  background:linear-gradient(180deg,#edf6ff,#fff);
  border-color:rgba(25,118,210,.35);
  box-shadow:0 14px 26px rgba(25,118,210,.10);
}
.slot-btn.active,.duration-btn.active{
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
}
.slot-btn.disabled,.duration-btn.disabled{
  background:#f3f6fa;color:#a2acb9;
}
input:focus,textarea:focus{
  border-color:rgba(25,118,210,.52);
  box-shadow:0 0 0 4px rgba(25,118,210,.10);
}
.status-box{
  background:#eef7ff;border-color:#cfe5fb;color:#0c5ca8;
}
.status-box.loading{
  background:#f2f8ff;color:#155f9f;border-color:#d1e6fa;
}
.status-box.error{
  background:var(--red-soft);border-color:#f5cfd4;color:var(--red-strong);
}
.summary-row{border-bottom-color:rgba(25,118,210,.18)}
.summary-total{
  background:linear-gradient(135deg,#eef7ff,#fff 70%,#fff5f6);
  border-color:rgba(25,118,210,.14);
}
.summary-total strong{color:var(--gold-strong)}
.secure-box span{color:var(--gold)}
.mobile-bar{border-color:rgba(25,118,210,.14)}
.modal{background:rgba(10,35,70,.32)}
.modal-check{
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  box-shadow:0 0 0 7px rgba(230,57,70,.08);
}
.receipt-code{color:var(--gold-strong)}
.scroll-progress{
  background:linear-gradient(90deg,var(--gold-strong),var(--gold),var(--red));
  box-shadow:0 1px 8px rgba(25,118,210,.24);
}
.btn.light .ripple-wave{background:rgba(25,118,210,.12)}
.visualizer span{
  background:linear-gradient(180deg,var(--gold),var(--gold-strong));
}
.visualizer span:nth-child(3n){background:linear-gradient(180deg,#ef5a66,var(--red-strong))}
.selection-pill{
  border-color:#cfe3f8;color:var(--gold-strong);
}
.selected-mark{
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
}
.studio-card.premium .selected-mark{
  background:linear-gradient(135deg,var(--red),var(--red-strong));
}
.studio-card:focus-visible,.date-chip:focus-visible,.slot-btn:focus-visible,.duration-btn:focus-visible,.btn:focus-visible,.nav-toggle:focus-visible{
  outline-color:rgba(25,118,210,.24);
}
.booking-progress span{background:#dce9f6}
.booking-progress span.active{
  background:linear-gradient(90deg,var(--gold),var(--red));
}
.empty-icon{
  background:#edf6ff;color:var(--gold-strong);
}
.toast.info span{background:#edf6ff;color:var(--gold-strong)}
.stat-box:after{background:rgba(25,118,210,.07)}
.stat-box:nth-child(3):after{background:rgba(230,57,70,.07)}
.data-table tbody tr{box-shadow:0 10px 26px rgba(16,74,140,.07)}
@media (hover:hover) and (pointer:fine){
  .nav a:hover,.mobile-nav a:hover{color:var(--gold-strong)}
  .studio-card.premium:hover{border-color:rgba(230,57,70,.26)}
}

/* ===== Responsive Consistency v3: Android • iPhone • Tablet ===== */
html,body{width:100%;max-width:100%}
.hero>* ,.booking-layout>* ,.studio-grid>* ,.section-head>* ,.topbar-inner>* ,.form-grid>*{min-width:0}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
.date-strip,.time-grid,.duration-grid,.studio-grid,.hero,.booking-layout{width:100%;max-width:100%}

/* Tablet landscape & portrait: a real tablet composition */
@media (min-width:768px) and (max-width:1023px){
  .container{padding-left:22px;padding-right:22px}
  .topbar-inner{min-height:72px}
  .brand-icon{width:46px;height:46px;border-radius:15px}
  .brand strong{font-size:17px}
  .nav a{padding:9px 11px;font-size:13px}

  .hero{grid-template-columns:1fr;gap:16px;padding-top:26px}
  .hero-copy{padding:30px}
  .hero-copy h1{font-size:clamp(42px,6vw,56px);max-width:820px}
  .hero-copy p{max-width:780px}
  .hero-side{display:block}
  .schedule-preview{padding:22px}
  .preview-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .preview-item{grid-template-columns:1fr;gap:6px;align-content:start}
  .visualizer{height:54px}

  .section{padding:24px 0}
  .section-head{align-items:flex-start}
  .section-head h2{font-size:32px}
  .studio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .studio-card{padding:22px}

  .booking-layout{grid-template-columns:1fr;gap:16px}
  .form-panel,.summary-panel{padding:22px}
  .summary-panel{position:relative;top:auto}
  .summary-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .summary-row{min-width:0}
  .summary-total{display:flex;align-items:end;justify-content:space-between;gap:18px}
  .summary-total strong{font-size:32px;text-align:right}
  .summary-panel>.btn{max-width:360px}

  .date-strip{grid-auto-columns:minmax(80px,90px);scroll-snap-type:x mandatory;overscroll-behavior-inline:contain}
  .date-chip{scroll-snap-align:start}
  .time-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
  .duration-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .slot-btn,.duration-btn{min-height:50px}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .schedule-item{grid-template-columns:110px minmax(0,1fr) auto}
  .mobile-bar{display:none!important}
}

/* Phones: dedicated mobile structure, not scaled desktop */
@media (max-width:767px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%)}
  .bg-orb{display:none}
  .container{width:100%;max-width:none;padding-left:14px;padding-right:14px}
  .topbar{background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}
  .topbar-inner{min-height:64px;padding:9px 0;gap:10px}
  .brand{gap:10px;min-width:0}
  .brand-icon{width:42px;height:42px;min-width:42px;border-radius:14px;font-size:20px}
  .brand strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
  .brand small{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
  .nav-toggle{display:grid;place-items:center;width:42px;height:42px;min-width:42px;border-radius:13px;box-shadow:none;border:1px solid var(--line);color:var(--gold-strong)}
  .mobile-nav{display:none!important;padding:7px 14px 13px;background:#fff;border-top:1px solid var(--line)}
  .mobile-nav.show{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mobile-nav a{margin:0!important;min-height:44px;display:flex;align-items:center;justify-content:center;background:#f6faff;border:1px solid var(--line);border-radius:13px;color:var(--gold-strong)}

  .hero{display:block;padding:16px 0 4px}
  .hero-copy{padding:20px 17px;border-radius:20px}
  .hero-copy h1{font-size:clamp(32px,9.5vw,42px);line-height:1.06;letter-spacing:-1.15px;margin-top:9px}
  .hero-copy p{font-size:14px;line-height:1.62;margin-bottom:0}
  .eyebrow{font-size:10px;letter-spacing:.08em;line-height:1.45}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
  .hero-actions .btn{width:100%;min-width:0;min-height:48px;padding:12px 10px;font-size:13px}
  .hero-highlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:16px}
  .mini-card{padding:10px 7px;min-width:0;text-align:center;border-radius:14px}
  .mini-card strong{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
  .mini-card span{display:block;font-size:9px;line-height:1.25;margin-top:3px}
  .hero-side{display:none}

  .section{padding:18px 0}
  .section-head{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin-bottom:13px}
  .section-head>div{min-width:0}
  .section-kicker{font-size:10px;letter-spacing:.1em}
  .section-head h2{font-size:clamp(25px,7vw,30px);line-height:1.12;letter-spacing:-.6px;margin:3px 0 5px}
  .section-sub{font-size:13px;line-height:1.55}
  .selection-pill{width:100%;justify-content:center;text-align:center;white-space:normal;padding:9px 12px}
  .booking-progress{display:none}

  .studio-grid{grid-template-columns:1fr;gap:10px}
  .studio-card{padding:17px;border-radius:19px;box-shadow:0 9px 26px rgba(16,74,140,.08)}
  .studio-head{gap:10px}
  .studio-icon{width:48px;height:48px;border-radius:15px;font-size:23px}
  .studio-card h3{font-size:21px;margin:12px 0 6px}
  .studio-card p{font-size:13px;line-height:1.5}
  .price{font-size:28px;margin-top:13px}
  .studio-features{gap:6px;margin-top:12px}
  .studio-features span,.chip{font-size:10px;padding:7px 9px}
  .selected-mark{width:28px;height:28px;right:12px;top:12px}

  .booking-layout{display:block}
  .form-panel,.summary-panel,.schedule-panel{padding:15px;border-radius:20px}
  .form-panel{overflow:hidden}
  .block+.block{margin-top:20px;padding-top:19px;border-top:1px solid #edf2f8}
  .block-head{gap:10px;margin-bottom:12px;align-items:flex-start}
  .block-number{width:34px;height:34px;min-width:34px;flex-basis:34px;border-radius:11px;font-size:13px}
  .block-head h3{font-size:18px;line-height:1.25}
  .block-head p{font-size:12px;line-height:1.45;margin-top:2px}

  .date-strip{display:flex!important;gap:8px;overflow-x:auto;overflow-y:hidden;margin:0 -1px;padding:2px 1px 9px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .date-strip::-webkit-scrollbar{display:none}
  .date-chip{flex:0 0 70px;width:70px;min-width:70px;min-height:74px;padding:9px 6px;border-radius:15px;scroll-snap-align:start}
  .date-chip strong{font-size:19px}
  .date-chip small{font-size:10px}

  .time-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .duration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .slot-btn,.duration-btn{width:100%;min-width:0;min-height:46px;padding:8px 5px;border-radius:13px;font-size:12px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
  .slot-btn.disabled,.duration-btn.disabled{opacity:.72}

  .form-grid{grid-template-columns:1fr;gap:12px}
  .field.full{grid-column:auto}
  label{font-size:12px}
  input,textarea{width:100%;max-width:100%;font-size:16px!important;border-radius:13px;padding:13px 12px}
  textarea{min-height:96px}
  .field-hint{font-size:10px}
  .status-box{font-size:12px;line-height:1.5;padding:12px 13px;border-radius:13px;margin-top:15px}

  .summary-panel{position:relative;top:auto;margin-top:12px}
  .summary-top h3{font-size:22px}
  .summary-rows{gap:0;margin:12px 0}
  .summary-row{display:grid;grid-template-columns:minmax(85px,.8fr) minmax(0,1.2fr);align-items:start;gap:10px;padding:11px 0;font-size:12px}
  .summary-row strong{text-align:right;overflow-wrap:anywhere;line-height:1.4}
  .summary-total{padding:14px;border-radius:16px}
  .summary-total small{font-size:11px}
  .summary-total strong{font-size:28px;line-height:1.15;overflow-wrap:anywhere}
  .summary-panel>.btn{display:none}
  .secure-box{padding:11px;border-radius:13px;margin-top:12px}
  .secure-box p{font-size:11px;line-height:1.45}

  #schedule .section-head .btn{width:100%;min-height:44px}
  .schedule-list{gap:9px}
  .schedule-item{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:9px;padding:12px;border-radius:15px;align-items:center}
  .schedule-time strong{font-size:17px}
  .schedule-time span,.schedule-info p{font-size:10px;line-height:1.4}
  .schedule-info h4{font-size:14px;line-height:1.3;margin-bottom:2px;overflow-wrap:anywhere}
  .schedule-item .chip{grid-column:auto;justify-self:end;align-self:start}
  .empty-state{padding:26px 14px;border-radius:15px;font-size:12px}

  .footer{padding:4px 8px 20px;font-size:11px;line-height:1.45}
  .mobile-bar{display:flex!important;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom,8px));width:auto;max-width:none;padding:8px 8px 8px 12px;border-radius:17px;gap:8px;background:rgba(255,255,255,.98)}
  .mobile-price{min-width:0}
  .mobile-price small{font-size:9px}
  .mobile-price strong{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-bar .btn{min-height:44px;padding:10px 15px;border-radius:13px;font-size:12px;white-space:nowrap}

  .toast-wrap{left:12px;right:12px;top:70px;width:auto;max-width:none}
  .toast{width:100%;max-width:none}
  .modal{padding:12px;align-items:center}
  .modal-card{width:100%;max-width:430px;max-height:calc(100% - 24px);overflow:auto;padding:20px 16px;border-radius:20px}
  .modal-check{width:60px;height:60px;border-radius:19px;font-size:27px}
  .modal-card h3{font-size:24px;line-height:1.2}
  .receipt{padding:13px;border-radius:15px}
  .receipt-code{font-size:18px;overflow-wrap:anywhere}
  .receipt-detail{font-size:12px;line-height:1.45}
}

/* Narrow Android/iPhone screens (320–389px) */
@media (max-width:389px){
  .container{padding-left:10px;padding-right:10px}
  .brand strong{max-width:158px}.brand small{max-width:158px}
  .hero-copy{padding:17px 14px}
  .hero-copy h1{font-size:30px}
  .hero-actions{grid-template-columns:1fr}
  .hero-highlights{gap:5px}
  .mini-card{padding:9px 5px}
  .mini-card strong{font-size:12px}.mini-card span{font-size:8px}
  .time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .date-chip{flex-basis:66px;width:66px;min-width:66px}
  .schedule-item{grid-template-columns:68px minmax(0,1fr)}
  .schedule-item .chip{grid-column:1/-1;justify-self:start}
  .summary-row{grid-template-columns:82px minmax(0,1fr)}
}

/* Larger phones / small tablets in landscape */
@media (min-width:600px) and (max-width:767px){
  .container{padding-left:20px;padding-right:20px}
  .hero-copy{padding:26px}
  .hero-copy h1{font-size:42px}
  .studio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .time-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .duration-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field.full{grid-column:1/-1}
  .summary-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .summary-row{grid-template-columns:1fr;gap:4px}
  .summary-row strong{text-align:left}
  .schedule-item{grid-template-columns:90px minmax(0,1fr) auto}
}

/* iOS safe area and rotation resilience */
@supports (padding:max(0px)){
  @media (max-width:767px){
    .container{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
    .mobile-bar{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  }
  @media (max-width:389px){
    .container{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  }
}

/* Mustika Record booking additions */
.whatsapp-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;background:#16a34a;color:#fff;border-color:#16a34a;box-shadow:0 12px 28px rgba(22,163,74,.18)}
.whatsapp-btn:hover{box-shadow:0 18px 34px rgba(22,163,74,.24)}
.modal-card #closeModal{width:100%;margin-top:10px}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(440px,100%);padding:30px}
.login-card h1{margin:8px 0 8px;font-size:32px}
.login-card p{color:var(--muted);line-height:1.6}
.login-card .field{margin-top:15px}
.login-card .btn{width:100%;margin-top:18px}
.login-error{margin-top:14px;padding:12px 14px;border-radius:14px;background:#fff1f2;color:#b42318;border:1px solid #fecdd3;font-size:14px;font-weight:700}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.wa-link{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:10px;background:#ecfdf3;color:#15803d;text-decoration:none;font-weight:800;font-size:12px;border:1px solid #bbf7d0}