/* Blush Bali customer app — V.1.168.0 design (approved mock-up, colour option 1:
   rose gold everywhere — blush-white screens, rose-gold buttons with a light shine).
   One stylesheet for every app screen; phone first, two columns on a tablet. */
:root {
  --bg:#FCF9F8; --bg2:#F7EEEB; --card:#FFFFFF; --ink:#2B2224; --ink2:#5E4E4F; --muted:#9A8585; --faint:#D3C2BF;
  --line:#F3E8E5; --line2:#EBDAD5; --bd:#F0DFD9; --accent:#B9837A; --accent2:#9A6A62; --soft:#F7EAE6; --sel:#B9837A;
  --green:#2F8A5B; --green-soft:#E3F2E9; --amber:#B07A1E; --amber-soft:#FBEFD8; --red:#B3423A; --red-soft:#F8E3E0;
  --blue:#3D6394; --blue-soft:#E4ECF6; --violet:#6E4C93; --violet-soft:#EEE6F6;
  --rg:linear-gradient(120deg,#EBCABD 0%,#CC998B 34%,#B27D71 62%,#DDB2A5 100%);
  --rgd:linear-gradient(125deg,#D9AE9F 0%,#B9857A 45%,#93645B 100%);
  --shadow:0 1px 2px rgba(60,35,25,.05),0 6px 18px rgba(60,35,25,.06);
  --font:Jost,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --serif:"Cormorant Garamond",Georgia,serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-weight:400; font-size:15px; -webkit-font-smoothing:antialiased; font-feature-settings:"lnum" 1; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
[hidden] { display:none !important; }
.serif { font-family:var(--serif); }
.eyb { font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.note { font-size:13px; color:var(--muted); line-height:1.5; }
.lnk { color:var(--accent2); font-weight:500; cursor:pointer; }
svg.i { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; display:block; }

/* ---------- page ---------- */
.page { max-width:560px; margin:0 auto; padding:calc(10px + env(safe-area-inset-top,0px)) 18px 40px; }
.page.has-cta { padding-bottom:150px; }
.chd { display:flex; align-items:center; gap:12px; padding:4px 2px 14px; }
.chd .tx { flex:1; min-width:0; }
.chd h1 { font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.05; margin:0; letter-spacing:-.2px; }
.chd .sub { font-size:13.5px; color:var(--muted); margin-top:3px; }
.bkb { width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #F0DFDA; box-shadow:0 4px 12px rgba(185,131,122,.12); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; cursor:pointer; padding:0; }
.bkb svg.i { width:20px; height:20px; stroke-width:2.2; }
.bkb:active { transform:scale(.94); }
.ibtn { width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink2); position:relative; flex:none; cursor:pointer; }
.ibtn .bd { position:absolute; top:-3px; right:-3px; }
.bd { min-width:18px; height:18px; border-radius:9px; background:var(--red); color:#fff; font-size:10.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--bg); }
.dot { width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); position:absolute; top:2px; right:2px; }
.sect { font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:22px 4px 10px; display:flex; justify-content:space-between; align-items:center; }
.sect a, .sect .lnk { letter-spacing:0; text-transform:none; font-size:13.5px; color:var(--accent2); font-weight:500; }
.hi { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:2px 2px 14px; }
.hi h1 { font-family:var(--serif); font-weight:500; font-size:32px; line-height:1.05; margin:3px 0 0; }
.hi .rt { display:flex; gap:8px; align-items:center; margin-top:4px; }
.cpill { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--bd); border-radius:99px; padding:6px 12px; font-size:13px; color:var(--accent2); font-weight:500; cursor:pointer; }
.cpill svg.i { width:15px; height:15px; }
.lang { display:inline-flex; background:#F5EAE7; border-radius:99px; padding:3px; }
.lang button { border:0; background:none; padding:6px 12px; border-radius:99px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; min-height:30px; }
.lang button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* ---------- buttons & controls ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font:500 15px var(--font); border-radius:99px; padding:13px 20px; border:0; background:var(--rgd); color:#fff; white-space:nowrap; cursor:pointer; letter-spacing:.02em; text-align:center; }
.btn svg.i { width:18px; height:18px; }
.btn.full { display:flex; width:100%; }
.btn.sec { background:var(--soft); color:var(--accent2); }
.btn.out { background:#fff; color:var(--ink); border:1px solid #EBD8D2; }
.btn.ghost { background:transparent; color:var(--accent2); }
.btn.red { background:var(--red-soft); color:var(--red); }
.btn.redf { background:var(--red); color:#fff; }
.btn.wa { background:#25A35A; color:#fff; }
.btn.sm { font-size:13.5px; padding:8px 14px; }
.btn.xs { font-size:12.5px; padding:6px 12px; }
.btn:disabled, .btn.dis { opacity:.45; cursor:default; }
.btn:active:not(:disabled) { transform:scale(.98); }
.btns { display:flex; gap:9px; } .btns .btn { flex:1; }
.seg { display:flex; background:#F5EAE7; border-radius:12px; padding:3px; gap:2px; }
.seg button { flex:1; border:0; background:none; font-size:13.5px; font-weight:500; color:#7e6a6a; padding:8px 4px; border-radius:9px; white-space:nowrap; cursor:pointer; }
.seg button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(60,35,25,.12); }
.chips { display:flex; gap:7px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); padding-bottom:2px; }
.chips::-webkit-scrollbar { display:none; }
.chips.wrap { flex-wrap:wrap; overflow:visible; white-space:normal; -webkit-mask-image:none; mask-image:none; }
.chip { flex:none; font-size:13.5px; font-weight:500; padding:8px 14px; border-radius:99px; background:#fff; border:1px solid var(--line2); color:var(--ink2); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.chip.on { background:var(--sel); border-color:var(--sel); color:#fff; }
.chip.acc { background:var(--soft); border-color:#EBD3C7; color:var(--accent2); }
.chip svg.i { width:15px; height:15px; }
.tg { width:51px; height:31px; border-radius:16px; background:#EADCD9; position:relative; flex:none; cursor:pointer; border:0; padding:0; transition:background .2s; }
.tg:after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.18); transition:left .2s; }
.tg.on { background:#C08E83; } .tg.on:after { left:22px; }
.tg:disabled { opacity:.5; }
.radio { width:22px; height:22px; border-radius:50%; border:2px solid #DCC9C6; flex:none; }
.radio.on { border:7px solid var(--sel); }
.cbx { width:22px; height:22px; border-radius:7px; border:2px solid #DCC9C6; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }
.cbx.on { background:var(--sel); border-color:var(--sel); } .cbx svg.i { width:14px; height:14px; stroke-width:3; }
.opt { width:100%; border:1.5px solid var(--line2); background:#fff; border-radius:16px; padding:13px 14px; display:flex; gap:12px; align-items:center; font-size:14.5px; font-weight:500; text-align:left; cursor:pointer; color:var(--ink); }
.opt + .opt { margin-top:9px; }
.opt small { display:block; font-weight:400; font-size:12.5px; color:var(--muted); margin-top:1px; }
.opt.on { border-color:var(--sel); background:var(--soft); }
.opt.on .radio { border:7px solid var(--sel); }
.who3 { display:flex; gap:8px; }
.who3 button { flex:1; border:1.5px solid var(--line2); border-radius:14px; padding:9px 6px; text-align:center; font-size:13.5px; font-weight:500; background:#fff; color:var(--ink2); cursor:pointer; }
.who3 button small { display:block; font-size:11px; color:var(--muted); font-weight:400; }
.who3 button.on { border-color:var(--sel); background:var(--sel); color:#fff; } .who3 button.on small { color:rgba(255,255,255,.8); }

/* ---------- forms ---------- */
.fld { margin-bottom:12px; display:block; }
.fld > span, .fld label { display:block; font-size:12.5px; color:var(--ink2); font-weight:500; margin:0 4px 6px; }
.fld input, .fld textarea, .fld select { width:100%; background:#fff; border:1px solid var(--line2); border-radius:14px; padding:13px 14px; font:400 16px var(--font); color:var(--ink); outline:none; min-height:50px; -webkit-appearance:none; appearance:none; }
.fld textarea { min-height:86px; resize:vertical; line-height:1.45; }
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(185,131,122,.15); }
.fld .hint { font-size:12.5px; color:var(--muted); margin:6px 4px 0; line-height:1.4; }
.fld .err { font-size:12.5px; color:var(--red); margin:6px 4px 0; }
.pwbox { position:relative; } .pwbox input { padding-right:50px; }
.pwbox button { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; background:none; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.codebox { display:flex; gap:8px; } .codebox input { text-align:center; font-size:22px; font-weight:600; padding:10px 0; letter-spacing:.3em; }
.checkrow { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; margin:4px 4px 10px; cursor:pointer; line-height:1.4; }

/* ---------- grouped lists ---------- */
.grp { background:var(--card); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(243,232,229,.7); }
.grp + .grp { margin-top:12px; }
.gfoot { font-size:12.5px; color:var(--muted); padding:8px 6px 0; line-height:1.45; }
.row { display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:54px; position:relative; width:100%; background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
a.row, button.row { cursor:pointer; }
.row.static { cursor:default; }
.row + .row:before { content:""; position:absolute; top:0; right:0; left:var(--inset,14px); height:1px; background:var(--line); }
.row.ii { --inset:58px; } .row.ai { --inset:64px; }
.row .tx { flex:1; min-width:0; }
.row .t { font-size:15.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .s { font-size:13px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .s.w { white-space:normal; }
.row .v { font-size:14.5px; color:var(--muted); white-space:nowrap; text-align:right; }
.row .v b { color:var(--ink); font-weight:500; }
.row .chev { color:#CDB8B4; } .row .chev svg.i { width:18px; height:18px; stroke-width:2.2; }
.row.danger .t { color:var(--red); }
.row.sel { background:var(--soft); }
.row .lb { font-size:15px; flex:none; min-width:104px; }
.row .in { flex:1; text-align:right; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .in.ph { color:#BFA9A6; }
.rowic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.rowic svg.i { width:18px; height:18px; stroke-width:1.9; }
.rowic.r { border-radius:50%; }
.c-rose{background:#C98572}.c-cocoa{background:#8E5948}.c-gold{background:#C39A4A}.c-green{background:#4C9A70}.c-blue{background:#5B7FAF}.c-violet{background:#8C6BB0}.c-grey{background:#A08E8C}.c-teal{background:#4E9A9A}.c-red{background:#C2554B}.c-sand{background:#C6A399}.c-wa{background:#25A35A}
.av { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; color:#fff; flex:none; background:#C08E83; background-size:cover; background-position:center; }
.av.lg { width:68px; height:68px; font-size:24px; } .av.sm { width:32px; height:32px; font-size:12.5px; } .av.xs { width:24px; height:24px; font-size:10px; }
.a1{background-color:#C98572}.a2{background-color:#8E6B9E}.a3{background-color:#5F8A9E}.a4{background-color:#B28A4E}.a5{background-color:#6E9A78}.a6{background-color:#A86A6A}.a7{background-color:#7A7FB0}.a8{background-color:#C08E83}
.tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; letter-spacing:.04em; padding:3px 8px; border-radius:99px; background:var(--bg2); color:var(--ink2); white-space:nowrap; }
.tag.g{background:var(--green-soft);color:var(--green)}.tag.a{background:var(--amber-soft);color:var(--amber)}.tag.r{background:var(--red-soft);color:var(--red)}.tag.b{background:var(--blue-soft);color:var(--blue)}.tag.v{background:var(--violet-soft);color:var(--violet)}.tag.rg{background:var(--rg);color:#fff}
.stt { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.03em; border-radius:99px; padding:4px 10px; white-space:nowrap; }
.stt i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.stt.a{background:var(--amber-soft);color:var(--amber)}.stt.b{background:var(--blue-soft);color:var(--blue)}.stt.g{background:var(--green-soft);color:var(--green)}.stt.r{background:var(--red-soft);color:var(--red)}.stt.n{background:var(--bg2);color:var(--ink2)}
.banner { display:flex; align-items:flex-start; gap:10px; border-radius:14px; padding:11px 13px; font-size:13.5px; line-height:1.45; }
.banner svg.i { width:19px; height:19px; margin-top:1px; }
.banner.a{background:var(--amber-soft);color:#7A5410}.banner.b{background:var(--blue-soft);color:var(--blue)}.banner.r{background:var(--red-soft);color:var(--red)}.banner.g{background:var(--green-soft);color:var(--green)}.banner.s{background:var(--soft);color:var(--accent2)}

/* ---------- cards ---------- */
.card { background:var(--card); border-radius:18px; box-shadow:var(--shadow); border:1px solid rgba(243,232,229,.7); padding:14px 16px; }
.card + .card { margin-top:10px; }
.card.row2 { display:flex; gap:12px; align-items:center; cursor:pointer; }
.card.row2 b { font-size:15px; font-weight:600; display:block; } .card.row2 .s { font-size:13px; color:var(--muted); }
.nextc { background:linear-gradient(150deg,#F8EBE7,#FFFFFF 75%); border:1px solid var(--bd); border-radius:22px; padding:16px; position:relative; overflow:hidden; box-shadow:0 8px 24px -12px rgba(154,106,98,.35); }
.nextc h3 { font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.1; margin:6px 0 0; position:relative; }
.nextc .m { font-size:13.5px; color:var(--ink2); margin-top:3px; position:relative; }
.nextc .head { display:flex; justify-content:space-between; align-items:center; gap:8px; position:relative; }
.nextc .when { display:flex; gap:10px; align-items:center; margin-top:12px; position:relative; }
.nextc .when .big { font-size:22px; font-weight:600; }
.dtile { width:52px; height:56px; border-radius:14px; background:var(--rgd); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10.5px; letter-spacing:.1em; font-weight:600; flex:none; text-transform:uppercase; }
.dtile b { font-size:21px; letter-spacing:0; line-height:1; }
.dtile.soft { background:var(--soft); color:var(--accent2); width:50px; height:54px; }
.nextc .acts { display:flex; gap:8px; margin-top:14px; position:relative; }
.nextc .acts > * { flex:1; background:#fff; border:1px solid var(--bd); border-radius:14px; padding:9px 4px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:500; color:var(--accent2); cursor:pointer; }
.nextc .acts svg.i { width:20px; height:20px; }
.nextc:after { content:""; position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%; border:26px solid rgba(185,131,122,.07); pointer-events:none; }
.nextc.center { text-align:center; }
.cats { display:flex; justify-content:space-between; gap:4px; }
.cats a { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--ink2); flex:1; max-width:76px; text-align:center; }
.cats img { width:58px; height:58px; border-radius:50%; box-shadow:0 0 0 1px var(--bd); background:#fff; }
.cats small { font-size:10.5px; color:var(--muted); margin-top:-4px; }
.cico { width:42px; height:42px; border-radius:50%; flex:none; box-shadow:0 0 0 1px var(--bd); background:#fff; object-fit:cover; }
.cico.lg { width:60px; height:60px; }
.ptbar { background:#fff; border:1px solid var(--bd); border-radius:18px; padding:13px 15px; display:block; }
.ptbar .t { display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--ink2); }
.ptbar .t b { font-family:var(--serif); font-size:24px; color:var(--ink); font-weight:600; margin-right:4px; }
.bar { height:7px; border-radius:7px; background:#F3E7E4; overflow:hidden; margin-top:9px; }
.bar b { display:block; height:100%; border-radius:7px; background:var(--rgd); }
.ptbar .s { font-size:12.5px; color:var(--muted); margin-top:6px; }
.offer { border-radius:20px; padding:16px; background:#fff; border:1px solid var(--bd); display:flex; gap:14px; align-items:center; position:relative; overflow:hidden; }
.offer + .offer { margin-top:10px; }
.offer h4 { font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.1; margin:3px 0 0; }
.offer p { font-size:12.5px; color:var(--muted); margin:3px 0 0; line-height:1.4; }
.offer .pc { font-family:var(--serif); font-size:34px; color:var(--accent); font-weight:600; line-height:1; white-space:nowrap; }
.vis { background:#fff; border:1px solid var(--bd); border-radius:20px; padding:14px; position:relative; display:block; cursor:pointer; }
.vis + .vis { margin-top:10px; }
.vis.on { box-shadow:0 0 0 2px var(--accent); }
.vis .top { display:flex; gap:12px; align-items:center; }
.vis .tx { flex:1; min-width:0; } .vis .tx b { font-size:15.5px; font-weight:600; display:block; } .vis .tx span { font-size:13px; color:var(--muted); }
.vis .ft { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line); font-size:13px; color:var(--ink2); flex-wrap:wrap; }
.vis .ft .sp { flex:1; }
.dayh { font-size:13px; font-weight:600; color:var(--ink2); margin:18px 4px 8px; display:flex; justify-content:space-between; }
.sumc { background:#fff; border:1px solid var(--bd); border-radius:20px; padding:14px 16px; }
.sumc .ln { display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:6px 0; color:var(--ink2); }
.sumc .ln b { color:var(--ink); font-weight:500; text-align:right; }
.sumc .ln.t { border-top:1px dashed var(--line2); margin-top:6px; padding-top:12px; font-size:17px; color:var(--ink); font-weight:600; }
.sumc .ln.g { color:var(--green); } .sumc .ln.g b { color:var(--green); }
.timeline2 { position:relative; padding-left:22px; }
.timeline2:before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line2); }
.timeline2 > div { position:relative; font-size:13.5px; padding:0 0 12px; color:var(--ink2); }
.timeline2 > div:before { content:""; position:absolute; left:-21px; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--line2); }
.timeline2 > div.on:before { background:var(--accent); border-color:var(--accent); }
.timeline2 b { display:block; color:var(--ink); font-weight:500; }
.qa { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.qa > * { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11.5px; font-weight:500; color:var(--ink2); text-align:center; background:none; border:0; cursor:pointer; padding:0; }
.qa i { width:54px; height:54px; border-radius:17px; background:#fff; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:var(--accent2); border:1px solid rgba(243,232,229,.7); }
.qa i svg.i { width:24px; height:24px; }
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.kpi { background:#fff; border-radius:16px; padding:11px 13px; box-shadow:var(--shadow); border:1px solid rgba(243,232,229,.7); }
.kpi .l { font-size:12px; color:var(--muted); font-weight:500; } .kpi .n { font-size:21px; font-weight:600; margin-top:2px; }

/* ---------- points / rewards ---------- */
.ptcard { border-radius:24px; padding:18px; color:#fff; background:var(--rg); position:relative; overflow:hidden; box-shadow:0 18px 34px -16px rgba(140,95,88,.6); display:block; }
.ptcard .k { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.9; font-weight:600; }
.ptcard .nm { font-size:14px; margin-top:2px; opacity:.95; }
.ptcard .pts { font-family:var(--serif); font-size:56px; font-weight:600; line-height:1; margin-top:10px; }
.ptcard .pts small { font-family:var(--font); font-size:14px; font-weight:400; opacity:.85; margin-left:4px; }
.ptcard .lg { position:absolute; right:16px; top:16px; width:46px; height:46px; border-radius:50%; border:2px solid rgba(255,255,255,.6); }
.ptcard:after { content:""; position:absolute; right:-60px; bottom:-70px; width:200px; height:200px; border-radius:50%; border:30px solid rgba(255,255,255,.08); pointer-events:none; }
.ptcard .qr { background:#fff; border-radius:16px; padding:10px; display:flex; gap:12px; align-items:center; color:var(--ink); margin-top:14px; position:relative; z-index:1; cursor:pointer; }
.ptcard .qr img { width:86px; height:86px; display:block; }
.ptcard .qr b { font-family:var(--serif); font-size:24px; display:block; }
.ptcard .qr span { font-size:12px; color:var(--muted); display:block; line-height:1.35; }
.ptcard .bar { background:rgba(255,255,255,.28); } .ptcard .bar b { background:#fff; }
.rw { display:flex; align-items:center; gap:12px; padding:12px 14px; }
.rw + .rw { border-top:1px solid var(--line); }
.rw .v { font-family:var(--serif); font-size:22px; font-weight:600; width:92px; flex:none; }
.rw .tx { flex:1; font-size:13px; color:var(--muted); } .rw .tx b { display:block; color:var(--ink); font-size:14.5px; font-weight:500; }
.rw.lk .v, .rw.lk .tx b { color:#BFA9A6; }
.vch { border-radius:18px; background:#fff; border:1.5px dashed #E2C7BF; padding:14px; display:flex; gap:12px; align-items:center; }
.vch + .vch { margin-top:10px; }
.vch .v { font-family:var(--serif); font-size:28px; font-weight:600; color:var(--accent2); min-width:90px; }
.vch .tx { flex:1; font-size:12.5px; color:var(--muted); } .vch .tx b { display:block; font-size:14.5px; color:var(--ink); font-weight:500; letter-spacing:.06em; }
.vch.used { opacity:.5; }
.gift { background:linear-gradient(150deg,#F8EBE7,#fff); border:1px solid var(--bd); border-radius:22px; padding:20px; text-align:center; }
.gift h3 { font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.08; margin:8px 0 0; }
.gift .code { display:inline-block; background:#fff; border:1.5px dashed #E0C2BA; border-radius:14px; padding:10px 22px; margin-top:14px; font-family:var(--serif); font-size:30px; letter-spacing:.14em; font-weight:600; }
.gift .code small { display:block; font-family:var(--font); font-size:10.5px; letter-spacing:.2em; color:var(--muted); font-weight:600; }

/* ---------- messages / reviews ---------- */
.msg { display:flex; gap:12px; padding:13px 14px; align-items:flex-start; width:100%; background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.msg + .msg { border-top:1px solid var(--line); }
.msg .rowic { width:38px; height:38px; border-radius:50%; }
.msg .tx { flex:1; min-width:0; } .msg .tx b { font-size:15px; font-weight:600; display:block; } .msg .tx span { font-size:13px; color:var(--ink2); display:block; line-height:1.4; margin-top:2px; }
.msg .tm { font-size:12px; color:var(--muted); white-space:nowrap; text-align:right; }
.msg .tm i { display:block; width:9px; height:9px; border-radius:50%; background:var(--accent); margin:6px 0 0 auto; }
.msg.rd b { font-weight:500; }
.stars { display:flex; gap:10px; justify-content:center; }
.stars button { background:none; border:0; padding:2px; cursor:pointer; }
.stars svg.i { width:40px; height:40px; color:#E0C9A6; stroke-width:1.4; }
.stars .on svg.i, .stars svg.i.on { fill:#D9A441; color:#D9A441; }
.stars.sm { gap:2px; justify-content:flex-start; } .stars.sm svg.i { width:14px; height:14px; }
.rev { background:#fff; border:1px solid var(--bd); border-radius:18px; padding:13px 14px; }
.rev + .rev { margin-top:9px; }
.rev p { font-size:13.5px; line-height:1.5; color:var(--ink2); margin:6px 0 0; }
.rev .by { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.rev .by b { color:var(--ink); font-weight:600; }

/* ---------- about ---------- */
.map { border-radius:20px; background:#F3E9E6; position:relative; overflow:hidden; display:block; background-image:linear-gradient(115deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),linear-gradient(25deg,transparent 60%,#fff 60%,#fff 63%,transparent 63%),linear-gradient(160deg,transparent 30%,#F9F1EF 30%,#F9F1EF 33%,transparent 33%),radial-gradient(circle at 75% 70%,#DCE8D5 0 18%,transparent 18.5%),radial-gradient(circle at 20% 25%,#DCE8D5 0 12%,transparent 12.5%); }
.map .pinm { position:absolute; left:50%; top:46%; transform:translate(-50%,-100%) rotate(-45deg); width:44px; height:44px; border-radius:50% 50% 50% 0; background:var(--accent); box-shadow:0 6px 14px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; }
.map .pinm img { width:30px; height:30px; border-radius:50%; transform:rotate(45deg); }
.map .go { position:absolute; right:10px; bottom:10px; }
.hours { font-size:14px; }
.hours div { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); }
.hours div:last-child { border-bottom:0; }
.hours div.td { font-weight:600; color:var(--accent2); }
.tmem { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; }
.tmem::-webkit-scrollbar { display:none; }
.tmem > div { flex:none; width:92px; text-align:center; font-size:13.5px; font-weight:500; }
.tmem .av { width:76px; height:76px; margin:0 auto 7px; font-size:24px; box-shadow:0 0 0 3px #fff,0 0 0 4px var(--bd); }
.tmem small { display:block; font-size:11px; color:var(--muted); letter-spacing:.06em; }
.galx { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.galx > * { aspect-ratio:1; border-radius:14px; background:var(--soft) center/cover no-repeat; display:block; }

/* ---------- sheets, alerts, toasts ---------- */
.dim { position:fixed; inset:0; background:rgba(35,24,20,.38); z-index:400; animation:fadeIn .18s ease; }
.sheet { position:fixed; left:0; right:0; bottom:0; max-height:92vh; background:var(--bg); border-radius:26px 26px 0 0; z-index:401; display:flex; flex-direction:column; box-shadow:0 -10px 40px rgba(40,25,20,.18); animation:sheetUp .24s cubic-bezier(.2,.8,.3,1); padding-bottom:env(safe-area-inset-bottom,0px); max-width:620px; margin:0 auto; }
.sheet .grab { width:40px; height:5px; border-radius:5px; background:#DFCDCA; margin:8px auto 2px; flex:none; }
.sheet .sh { display:flex; align-items:center; justify-content:space-between; padding:8px 18px 10px; flex:none; }
.sheet .sh button { font:500 16px var(--font); color:var(--accent2); min-width:64px; background:none; border:0; cursor:pointer; padding:6px 0; }
.sheet .sh .r { text-align:right; font-weight:600; }
.sheet .sh .m { font-weight:600; font-size:16.5px; text-align:center; flex:1; }
.sheet .sb { flex:1; overflow-y:auto; padding:4px 18px 22px; -webkit-overflow-scrolling:touch; }
@media (min-width:761px) { .sheet { left:50%; right:auto; bottom:50%; transform:translate(-50%,50%); width:560px; border-radius:26px; animation:popIn .2s ease; max-height:86vh; } }
.alert { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:300px; max-width:calc(100vw - 40px); background:rgba(252,249,247,.99); border-radius:20px; z-index:402; text-align:center; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.alert .ab { padding:20px 18px 16px; } .alert h4 { font-size:17px; font-weight:600; margin:0; } .alert p { font-size:13.5px; color:var(--ink2); margin:6px 0 0; line-height:1.45; }
.alert .aa { display:flex; border-top:1px solid var(--line); }
.alert .aa button { flex:1; padding:14px; font:500 16px var(--font); color:var(--accent2); background:none; border:0; cursor:pointer; }
.alert .aa button + button { border-left:1px solid var(--line); } .alert .aa .red { color:var(--red); font-weight:600; }
.toast2 { position:fixed; left:14px; right:14px; bottom:calc(96px + env(safe-area-inset-bottom,0px)); max-width:520px; margin:0 auto; background:#3A2C2D; color:#fff; border-radius:16px; padding:13px 16px; font-size:14.5px; display:flex; align-items:center; gap:10px; z-index:500; box-shadow:0 10px 30px rgba(0,0,0,.25); animation:sheetUp .2s ease; }
.toast2 svg.i { color:#8FD3A9; } .toast2 button { margin-left:auto; color:#F1C9B8; font-weight:600; background:none; border:0; font-size:14.5px; cursor:pointer; }
@media (min-width:761px) { .toast2 { bottom:24px; left:calc(250px + 24px); } }
@keyframes sheetUp { from { transform:translateY(30px); opacity:0; } }
@keyframes fadeIn { from { opacity:0; } }
@keyframes popIn { from { opacity:0; transform:translate(-50%,calc(50% + 14px)); } }
.empty { text-align:center; padding:40px 26px; color:var(--muted); }
.empty .ill { width:92px; height:92px; border-radius:50%; background:var(--soft); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.empty .ill svg.i { width:40px; height:40px; stroke-width:1.4; }
.empty h4 { font-size:18px; color:var(--ink); font-weight:600; margin:0 0 6px; } .empty p { font-size:14px; line-height:1.5; margin:0; }
.sk { background:linear-gradient(90deg,#F5EBE8,#FBF3F1,#F5EBE8); background-size:200% 100%; border-radius:10px; animation:sk 1.2s linear infinite; }
@keyframes sk { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .sk, .sheet, .dim, .toast2 { animation:none; } }
.done { text-align:center; padding:10px 22px 0; }
.done .ok { width:92px; height:92px; border-radius:50%; background:var(--soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:24px auto 16px; box-shadow:0 0 0 10px rgba(247,234,230,.5); }
.done .ok svg.i { width:44px; height:44px; stroke-width:2; }
.done h2 { font-family:var(--serif); font-size:34px; font-weight:500; line-height:1.08; margin:0; } .done p { font-size:14.5px; color:var(--ink2); line-height:1.5; margin:8px 0 0; }
.dstrip { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 0 6px; }
.dstrip::-webkit-scrollbar { display:none; }
.dstrip button { flex:none; width:48px; text-align:center; padding:6px 0; border-radius:14px; font-size:11px; color:var(--muted); font-weight:500; letter-spacing:.04em; background:#fff; border:1px solid var(--line2); cursor:pointer; text-transform:uppercase; }
.dstrip button b { display:block; font-size:17px; color:var(--ink); font-weight:600; margin-top:1px; letter-spacing:0; }
.dstrip button.on { background:var(--sel); border-color:var(--sel); color:rgba(255,255,255,.85); } .dstrip button.on b { color:#fff; }
.dstrip button.x { background:transparent; border-style:dashed; color:#D3C2BF; } .dstrip button.x b { color:#D3C2BF; }
.slots { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.slots button { text-align:center; padding:11px 0; border-radius:12px; background:#fff; border:1px solid var(--line2); font-size:14px; font-weight:500; cursor:pointer; color:var(--ink); }
.slots button.on { background:var(--sel); color:#fff; border-color:var(--sel); }
.slh { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin:14px 2px 8px; display:flex; align-items:center; gap:6px; }
.slh svg.i { width:15px; height:15px; }
.pushask { position:fixed; left:18px; right:18px; top:50%; transform:translateY(-50%); max-width:420px; margin:0 auto; background:#fff; border-radius:26px; z-index:402; padding:24px 20px 14px; text-align:center; box-shadow:0 30px 70px rgba(40,25,20,.3); }
.pushask .ill { width:74px; height:74px; border-radius:50%; background:var(--soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.pushask .ill svg.i { width:34px; height:34px; }
.pushask h3 { font-family:var(--serif); font-size:27px; font-weight:600; line-height:1.1; margin:0; } .pushask p { font-size:14px; color:var(--ink2); line-height:1.5; margin:8px 0 0; }
.pushask .li { text-align:left; margin:14px 0 16px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:var(--ink2); }
.pushask .li div { display:flex; gap:9px; align-items:center; } .pushask .li svg.i { width:18px; height:18px; color:var(--accent); }
.pin { display:flex; gap:16px; justify-content:center; margin:20px 0; }
.pin i { width:15px; height:15px; border-radius:50%; border:2px solid var(--accent); }
.pin i.f { background:var(--accent); }
.pin.shake { animation:shake .35s; }
@keyframes shake { 20%,60% { transform:translateX(-8px); } 40%,80% { transform:translateX(8px); } }
.keys { display:grid; grid-template-columns:repeat(3,78px); gap:16px 26px; justify-content:center; }
.keys button { width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.85); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:30px; font-weight:400; color:var(--ink); cursor:pointer; }
.keys button small { font-size:9.5px; letter-spacing:.2em; color:var(--muted); font-weight:600; }
.keys button.n { background:transparent; border:0; }
.cta { position:fixed; left:0; right:0; bottom:calc(76px + env(safe-area-inset-bottom,0px)); padding:10px 12px; z-index:140; pointer-events:none; }
.sumf { pointer-events:auto; max-width:540px; margin:0 auto; display:flex; align-items:center; gap:10px; background:var(--rgd); color:#fff; border-radius:20px; padding:10px 10px 10px 16px; box-shadow:0 12px 26px -10px rgba(140,95,88,.7); }
.sumf .tx { flex:1; min-width:0; } .sumf b { font-size:15.5px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sumf span { font-size:12px; opacity:.88; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sumf .btn { background:#fff; color:var(--accent2); padding:10px 18px; font-size:14.5px; font-weight:600; }
.qrfull { position:fixed; inset:0; z-index:450; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; }
.qrfull img.q { width:260px; height:260px; margin:22px 0; padding:14px; border-radius:24px; box-shadow:0 0 0 1px var(--bd); }

/* ---------- tablet & computer ---------- */
@media (min-width:761px) {
  .page { max-width:1080px; padding:30px 34px 50px; }
  .page.narrow { max-width:720px; }
  .chd h1, .hi h1 { font-size:40px; }
  .cols > *, .cols3 > *, .split > * { min-width:0; }
  .cols { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:22px; align-items:start; }
  .cols3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
  .cols .sect:first-child, .cols3 .sect:first-child { margin-top:2px; }
  .split { display:grid; grid-template-columns:360px 1fr; gap:22px; align-items:start; }
  .split .det { background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px 24px; position:sticky; top:24px; }
  .cta { left:250px; bottom:16px; }
  .cats a { max-width:96px; } .cats img { width:72px; height:72px; }
  .ph-only { display:none !important; }
}
@media (max-width:760px) { .tb-only { display:none !important; } }
/* The website's dark "change venue" strip: the app has the salon switch in its own header and menu. */
.bb-venue-bar { display:none !important; }