*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html,body{font-family:'Poppins','Segoe UI',Arial,sans-serif}
body{min-height:100vh;color:#EAF2FB;position:relative}
.bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(700px 380px at 82% 4%,rgba(212,162,76,.18),rgba(212,162,76,0) 70%),
  linear-gradient(152deg,#0A1D34 0%,#0C2748 52%,#0F3A63 100%)}

.appwrap{max-width:440px;margin:0 auto;padding:18px 14px 24px;min-height:100vh;display:flex;flex-direction:column}
.app{background:#FBFAF7;border-radius:30px;overflow:hidden;position:relative;flex:1;min-height:640px;
  box-shadow:0 22px 60px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.10)}
.brandfoot{text-align:center;font-size:12px;color:#9FB4CC;letter-spacing:.5px;margin-top:14px}
.brandfoot b{color:#E9C578}

/* screens */
.scr{display:none;animation:fade .25s ease}
.scr.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* app chrome */
.abar{background:#141419;color:#fff;padding:18px 16px 15px;font-size:17px;font-weight:600;position:sticky;top:0;z-index:5}
.abar .bk{color:#D4A24C;font-weight:400;margin-right:10px;cursor:pointer;font-size:20px}
.abar .sub{font-size:12px;color:#9aa0ad;font-weight:400;margin-top:3px;letter-spacing:.3px}
.body{padding:18px 16px}
.sect{font-size:12px;color:#8A8D96;letter-spacing:1.2px;text-transform:uppercase;margin:2px 0 12px 2px}
.loading{color:#8A8D96;font-size:13px;padding:20px 2px}

/* HOME */
.home{height:100%;min-height:640px;background:linear-gradient(160deg,#17181d 0%,#0d0d10 100%);
  text-align:center;color:#fff;position:relative;display:flex;flex-direction:column;align-items:center}
.bigJ{width:150px;height:150px;border-radius:50%;background:#FBFAF7;border:3px solid #D4A24C;
  padding:22px;object-fit:contain;display:block;margin:64px auto 0;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.home h1{font-size:34px;letter-spacing:8px;margin-top:24px}
.home .hc{font-size:15px;letter-spacing:9px;color:#D4A24C;margin-top:9px}
.home .tag{font-size:13px;color:#aeb4c0;margin-top:20px;letter-spacing:.4px;padding:0 20px}
.cta{margin-top:36px;background:linear-gradient(90deg,#E9C578,#D4A24C);color:#141419;font-weight:700;
  font-size:15px;padding:15px 42px;border-radius:30px;letter-spacing:.4px;border:none;cursor:pointer;
  box-shadow:0 10px 24px rgba(212,162,76,.35)}
.cta:active{transform:scale(.97)}
.hfoot{position:absolute;bottom:22px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.hfoot .byl{font-size:9.5px;color:#7f8593;letter-spacing:2.5px;text-transform:uppercase}
.hfoot .slogo{height:27px;opacity:.95}

/* service cards */
.svc{border:1.5px solid #ececee;border-radius:16px;padding:14px;margin-bottom:11px;background:#fff;cursor:pointer;
  display:flex;align-items:center;transition:.15s}
.svc:active{transform:scale(.99)}
.svc.sel{border:2px solid #D4A24C;background:#FFF9EC}
.svc .ic{width:44px;height:44px;border-radius:11px;background:#141419;color:#E9C578;text-align:center;
  line-height:44px;font-size:20px;flex:none}
.svc .mid{margin-left:13px;flex:1}
.svc .nm{font-size:14.5px;font-weight:600;color:#26272d}
.svc .du{font-size:12px;color:#8A8D96;margin-top:3px}
.svc .blok{display:inline-block;font-size:10.5px;color:#B07D1E;background:#FBEFD3;padding:2px 8px;border-radius:8px;margin-top:6px}
.svc .chk{width:26px;height:26px;border-radius:50%;background:#D4A24C;color:#fff;text-align:center;
  line-height:26px;font-size:15px;flex:none;opacity:0;transition:.15s}
.svc.sel .chk{opacity:1}

/* calendar */
.mrow{text-align:center;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:16px}
.mrow .mm{font-size:16px;font-weight:600;color:#26272d;min-width:150px}
.mrow .ar{width:30px;height:30px;line-height:28px;border-radius:9px;border:1px solid #e2e2e5;
  color:#8A8D96;text-align:center;font-size:16px;cursor:pointer;user-select:none}
.mrow .ar.dis{opacity:.35;pointer-events:none}
.cal{max-width:322px;margin:0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal .dow{height:24px;line-height:24px;font-size:11px;color:#a7abb3}
.cal .d{height:40px;line-height:40px;font-size:13.5px;color:#3a3b42;border-radius:11px;cursor:pointer}
.cal .d.off{color:#cfd1d6;pointer-events:none;cursor:default}
.cal .d.sel{background:#D4A24C;color:#fff;font-weight:700}
.cal .d.avail:active{background:#FFF3D6}
.note{font-size:11.5px;color:#8A8D96;background:#F2F3F5;border-radius:10px;padding:10px 12px;margin-top:16px;line-height:1.5}
.note b{color:#B07D1E}

/* slot chips */
.chip-svc{font-size:11.5px;color:#B07D1E;background:#FBEFD3;border-radius:9px;padding:8px 11px;margin-bottom:14px;display:block}
.legend{margin-bottom:13px}
.legend .lg{display:inline-block;font-size:11px;color:#6b6d75;margin-right:14px}
.legend .sq{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:middle;margin-right:5px}
.slots{display:flex;flex-wrap:wrap;gap:9px}
.tm{width:64px;height:40px;line-height:40px;text-align:center;font-size:12.5px;border-radius:10px;cursor:pointer}
.tm.free{background:#E6F5EC;color:#2E7D4F;border:1px solid #cdecd8}
.tm.busy{background:#FBE9E9;color:#C25050;border:1px solid #f4d3d3;cursor:not-allowed}
.tm.shut{background:#EEEFF1;color:#b3b6bd;border:1px solid #e4e5e8;cursor:not-allowed}
.tm.lock{opacity:.5;cursor:not-allowed}
.tm.pick{background:#D4A24C;color:#fff;border:1px solid #D4A24C;font-weight:700}
.slots .empty{color:#8A8D96;font-size:13px;padding:14px 2px}

/* confirm */
.sum{border:1.5px solid #eee;border-radius:16px;padding:15px;background:#fff;margin-bottom:16px}
.sum .r{padding:8px 0;border-bottom:1px dashed #ececed;display:flex}
.sum .r:last-child{border-bottom:none}
.sum .k{width:100px;font-size:12px;color:#8A8D96}
.sum .v{flex:1;font-size:13px;color:#26272d;font-weight:600}
.fld{margin-bottom:12px}
.fld .lb{font-size:11.5px;color:#8A8D96;margin-bottom:6px}
.fld .in{width:100%;border:1.5px solid #e6e6e9;border-radius:10px;padding:12px;font-size:14px;color:#26272d;
  background:#fff;font-family:inherit;outline:none}
.fld .in:focus{border-color:#D4A24C}
.err{color:#C25050;font-size:12.5px;margin:2px 0 10px;min-height:16px}
.cta2{width:100%;background:linear-gradient(90deg,#E9C578,#D4A24C);color:#141419;font-weight:700;text-align:center;
  padding:15px;border-radius:12px;font-size:15px;border:none;cursor:pointer;font-family:inherit}
.cta2:active{transform:scale(.99)}
.cta2:disabled{opacity:.6;cursor:default}

/* success */
.ok{text-align:center;padding-top:46px}
.ok .ring{width:92px;height:92px;border-radius:50%;background:#E6F5EC;margin:0 auto;line-height:92px;font-size:46px;color:#2E9E5B}
.ok h2{font-size:21px;color:#1f7a45;margin-top:18px}
.ok p{font-size:12.5px;color:#8A8D96;margin-top:6px}
.ticket{margin:20px 16px 0;background:#141419;color:#fff;border-radius:16px;padding:18px}
.ticket .code{font-size:12px;color:#E9C578;letter-spacing:2px}
.ticket .big{font-size:23px;font-weight:700;letter-spacing:3px;margin:4px 0 12px}
.ticket .tr{font-size:12.5px;padding:6px 0;border-top:1px solid rgba(255,255,255,.08);display:flex}
.ticket .tk{color:#9aa0ad;width:82px}
.ticket .tv{color:#fff;font-weight:600;flex:1}
.tnote{margin:16px 16px 0}
.again{width:auto;margin:18px 16px 22px;padding:13px 26px;background:#141419;color:#E9C578}