/* HDFC Connect — Smart Branch prototype
   Values are taken 1:1 from the Figma Final Flows (402 × 874 frames). */

:root {
  --primary: #1C3FCA;
  --primary-50: #F3F6FD;
  --primary-100: #D0DDFC;
  --primary-400: #4F6FDF;
  --secondary: #E30613;
  --n-50: #F9FAFF;
  --n-100: #F5F6FB;
  --n-200: #ECEDF3;
  --n-300: #D2D5DB;
  --n-500: #6B7280;
  --n-600: #4B5563;
  --n-700: #374151;
  --n-900: #111827;
  --grey-55: #555555;
  --warning: #F99F35;
  --warning-50: #FEF8E6;
  --violet: #7454F2;
  --violet-50: #F4F0FF;
  --blue: #4BB3F6;
  --blue-50: #EBFCFE;
  --success: #00875F;
  --amber: #FEC93B;
  --white: #FFFFFF;
  --navy-grad: linear-gradient(-66.77deg, #0E346B 21.276%, #080326 125.33%);
  --card-grad: linear-gradient(120.74deg, #101733 1.97%, rgba(37, 48, 86, 0.7) 97.22%);
  --phone-w: 402px;
  --phone-h: 874px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01" 1;
  -webkit-font-smoothing: antialiased;
  background: #EEF1F8;
  color: var(--n-900);
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; font-feature-settings: inherit; }
input, textarea { font: inherit; font-feature-settings: inherit; color: inherit; }
img { display: block; }
p { font-feature-settings: "ss01" 1; }

/* ───────────── Presentation page ───────────── */
.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 72px;
  padding: 24px;
  background:
    radial-gradient(1000px 600px at 85% 10%, rgba(28, 63, 202, .10), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(227, 6, 19, .06), transparent 60%),
    #EEF1F8;
}
.intro { max-width: 340px; }
.intro .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.intro h1 { font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; margin: 12px 0 14px; color: var(--n-900); }
.intro p { font-size: 15px; line-height: 1.55; color: var(--n-600); }
.intro ul { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.intro li { font-size: 13.5px; color: var(--n-700); display: flex; gap: 10px; align-items: center; }
.intro li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none; }
.intro .hint { margin-top: 26px; font-size: 12.5px; color: var(--n-500); }

.device-wrap { flex: none; position: relative; }
.device {
  width: calc(var(--phone-w) + 24px); height: calc(var(--phone-h) + 24px);
  padding: 12px; border-radius: 68px;
  background: linear-gradient(145deg, #2A2F3A, #0B0D12);
  box-shadow: 0 0 0 1.5px #3A3F4B inset, 0 40px 80px -20px rgba(17, 24, 39, .35), 0 18px 36px -18px rgba(17, 24, 39, .3);
  transform-origin: top left;
}
.phone {
  position: relative; width: var(--phone-w); height: var(--phone-h);
  border-radius: 56px; overflow: hidden; background: #fff;
  isolation: isolate; transform: translateZ(0);
}
.dynamic-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 124px; height: 36px; border-radius: 20px; background: #000; z-index: 60; pointer-events: none; }

/* Embed mode: transparent, no page chrome, phone scaled to the iframe. */
body.embed { background: transparent; }
body.embed .stage { background: transparent; padding: 0; gap: 0; }
body.embed .intro { display: none; }

@media (max-width: 900px) {
  .intro { display: none; }
}

/* ───────────── Phone chrome ───────────── */
.statusbar { position: absolute; top: 0; left: 0; width: 402px; height: 64px; z-index: 50; pointer-events: none; transition: background .25s, box-shadow .25s; }
.statusbar img { position: absolute; inset: 0; width: 402px; height: 64px; transition: opacity .2s; }
.statusbar .sb-dark { opacity: 0; }
.statusbar.dark .sb-dark, .statusbar.solid .sb-dark { opacity: 1; }
.statusbar.dark .sb-light, .statusbar.solid .sb-light { opacity: 0; }
.statusbar.solid { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(17,24,39,.06); }

.screens { position: absolute; inset: 0; overflow: hidden; }
.screen {
  position: absolute; inset: 0; background: #fff;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: none; will-change: transform;
}
.screen::-webkit-scrollbar { display: none; }
.screen.bg-soft { background: var(--n-50); }

.screen.enter-right { animation: enterRight .38s var(--ease) both; }
.screen.leave-left { animation: leaveLeft .38s var(--ease) both; }
.screen.enter-left { animation: enterLeft .38s var(--ease) both; }
.screen.leave-right { animation: leaveRight .38s var(--ease) both; z-index: 2; }
.screen.fade-in { animation: fadeIn .22s ease both; }
@keyframes enterRight { from { transform: translateX(100%); } to { transform: none; } }
@keyframes leaveLeft { from { transform: none; } to { transform: translateX(-28%); filter: brightness(.92); } }
@keyframes enterLeft { from { transform: translateX(-28%); filter: brightness(.92); } to { transform: none; } }
@keyframes leaveRight { from { transform: none; } to { transform: translateX(100%); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Bottom navigation (1568:13337) */
.bottom-nav {
  position: absolute; left: 0; bottom: 0; width: 402px; height: 92.667px; z-index: 40;
  background: #fff; border-radius: 13.4px 13.4px 0 0; padding-top: 4.467px;
}
.bottom-nav .nav-bg { position: absolute; left: 0; top: 0; width: 402px; height: 72.583px; pointer-events: none; }
.bottom-nav .nav-glow {
  position: absolute; top: 0; left: 0; width: 80.4px; height: 2.3px; pointer-events: none; z-index: 1;
  transition: transform .45s var(--ease);
}
.bottom-nav .nav-glow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(90deg, rgba(255, 64, 75, 0) 0%, #4C71FF 56%, rgba(255, 68, 79, 0) 100%);
}
.nav-items { position: relative; display: flex; width: 100%; }
.nav-item {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4.467px;
  padding: 6.7px 0; height: 63.2px;
}
.nav-item .nav-ic { width: 22.333px; height: 22.333px; position: relative; }
.nav-item .nav-ic img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s; }
.nav-item .nav-ic img.on { opacity: 0; }
.nav-item span { font-size: 13.4px; line-height: 22.333px; color: var(--n-600); font-weight: 400; transition: color .2s; }
.nav-item.active span { color: var(--primary); font-weight: 600; }
.nav-item.active .nav-ic img.on { opacity: 1; }
.nav-item.active .nav-ic img.off { opacity: 0; }
.home-indicator { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 100px; background: #000; z-index: 45; pointer-events: none; }

/* ───────────── Overlays: sheets, toasts, panels ───────────── */
.overlay { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
.scrim { position: absolute; inset: 0; background: rgba(8, 3, 38, .45); opacity: 0; transition: opacity .3s; }
.overlay.open { pointer-events: auto; }
.overlay.open .scrim { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; background: #fff;
  border-radius: 24px 24px 0 0; padding: 10px 22px 42px;
  transform: translateY(100%); transition: transform .38s var(--ease);
  max-height: 86%; overflow-y: auto; scrollbar-width: none;
}
.overlay.open .sheet { transform: none; }
.sheet .grab { width: 36px; height: 4.467px; border-radius: 100px; background: var(--n-300); margin: 0 auto 18px; }
.sheet h3 { font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--n-900); }
.sheet .sub { font-size: 13.4px; line-height: 20px; color: var(--n-600); margin-top: 4px; }

.toast {
  position: absolute; left: 50%; bottom: 112px; z-index: 80;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 12px 16px; border-radius: 12px; background: var(--n-900); color: #fff;
  font-size: 13.4px; font-weight: 500; box-shadow: 0 12px 24px -8px rgba(17, 24, 39, .4);
  transition: transform .3s var(--ease), opacity .3s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast .tick { width: 20px; height: 20px; border-radius: 50%; background: #16A34A; display: grid; place-items: center; flex: none; }

/* ───────────── Shared app components ───────────── */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; border-radius: 11.167px; background: var(--primary); color: #fff;
  font-size: 15.633px; font-weight: 600; line-height: 22.333px; text-align: center;
  transition: transform .12s, background .2s;
}
.btn-primary:active { transform: scale(.98); }
.btn-outline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; border-radius: 11.167px; border: 1.117px solid var(--primary); color: var(--primary);
  font-size: 15.633px; font-weight: 600; background: #fff;
}
.tap { transition: transform .12s, opacity .12s; }
.tap:active { transform: scale(.97); }

.icon-btn {
  display: flex; align-items: center; padding: 8.933px; border-radius: 111.667px;
  border: 1.117px solid rgba(255, 255, 255, .2);
}
.icon-btn img { width: 17.867px; height: 17.867px; }

/* Sub-page header: navy gradient bar with back arrow + title */
.page-head {
  background: var(--navy-grad); padding: 64px 22.333px 0; color: #fff; position: relative;
}
.page-head .row { display: flex; align-items: center; gap: 12px; height: 54px; }
.page-head .back { width: 24px; height: 24px; display: grid; place-items: center; margin-left: -2px; }
.page-head .back img { width: 24px; height: 24px; }
.page-head h1 { font-size: 20.1px; line-height: 26.8px; font-weight: 600; letter-spacing: -.2px; }
.page-head .curve { position: absolute; left: 0; right: 0; bottom: -1px; height: 24px; background: #fff; border-radius: 24px 24px 0 0; }

.sec-title { font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--n-900); }
.link { display: flex; align-items: center; font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: var(--primary); }
.link img { width: 17.867px; height: 17.867px; }
.row-between { display: flex; align-items: center; justify-content: space-between; }

/* ───────────── Branch tab (1568:13060) ───────────── */
.scr-branch { padding-bottom: 164px; }
.fold {
  height: 495px; margin-bottom: -157px; padding-top: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  background: var(--navy-grad); overflow: hidden;
}
.dash-head { width: 402px; display: flex; justify-content: space-between; align-items: flex-start; padding: 11.167px 22.333px 8.933px; }
.dash-head h1 { font-size: 26.8px; line-height: 35.733px; font-weight: 600; letter-spacing: -.536px; color: #fff; }
.dash-head .actions { display: flex; gap: 17.867px; }

.visit-card {
  width: 358px; height: 169px; padding: 16px; border-radius: 16px;
  border: 1.12px solid #1F2937; background: var(--card-grad);
  display: flex; flex-direction: column; justify-content: space-between; color: #fff; text-align: left;
}
.visit-card .head { display: flex; gap: 8px; align-items: center; }
.status-tag { background: var(--success); border-radius: 4px; padding: 4px 8px; font-size: 11px; font-weight: 600; color: #fff; line-height: normal; }
.visit-card .head .where { font-size: 12px; color: rgba(255, 255, 255, .7); }
.visit-card .body { display: flex; flex-direction: column; gap: 16px; }
.visit-card .token-row { display: flex; align-items: flex-end; justify-content: space-between; white-space: nowrap; }
.visit-card .tok { display: flex; flex-direction: column; gap: 2px; }
.visit-card .tok .lbl { font-size: 13.4px; color: rgba(255, 255, 255, .7); }
.visit-card .tok .val { font-size: 24px; font-weight: 700; }
.visit-card .wait { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.visit-card .wait .lbl { font-size: 12px; }
.visit-card .wait .val { font-size: 18px; font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; }
.visit-card .queue { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.visit-card .queue img { width: 6px; height: 6px; }
.visit-card .queue .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(254, 201, 59, .6); animation: pulse 1.8s infinite; }
.visit-card.next .wait .val { color: #4ADE80; }
.visit-card.next .queue .pulse { background: #4ADE80; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(254, 201, 59, .55); } 70% { box-shadow: 0 0 0 7px rgba(254, 201, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(254, 201, 59, 0); } }

.sheet-top { position: relative; display: flex; flex-direction: column; gap: 11.167px; }
.sheet-top .grad { width: 402px; height: 30.15px; }
.sheet-top .grabber { position: absolute; left: 50%; top: calc(50% - .56px); transform: translate(-50%, -50%); width: 31.267px; height: 4.467px; border-radius: 111.667px; background: var(--n-300); }
.branch-body { position: relative; margin-top: -1px; background: #fff; display: flex; flex-direction: column; gap: 32px; padding: 12px 22px 22px; width: 402px; }

.quick-actions { display: flex; justify-content: space-between; align-items: center; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 8.933px; width: 89.333px; }
.qa .ic { width: 71.467px; display: flex; align-items: center; justify-content: center; padding: 13.4px 20.1px; border: 1.117px solid var(--n-300); border-radius: 17.867px; transition: background .2s, border-color .2s; }
.qa:active .ic { background: var(--primary-50); border-color: var(--primary-400); }
.qa .ic img { width: 32px; height: 32px; }
.qa .ic img.rm { width: 30.052px; height: 31.999px; }
.qa span { font-size: 13.4px; line-height: 22.333px; color: var(--n-700); text-align: center; white-space: nowrap; }

.bookings { display: flex; flex-direction: column; gap: 16px; }
.booking-card {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px; border-radius: 13.4px; background: var(--n-50); border: 1.117px solid var(--n-100);
}
.booking-card .l { display: flex; gap: 12px; align-items: center; }
.date-ic { width: 52px; height: 64px; padding: 8px; border-radius: 8px; background: var(--primary-100); color: var(--primary-400); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: normal; }
.date-ic b { font-size: 18.2px; font-weight: 600; }
.date-ic span { font-size: 13px; }
.booking-card .t { font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: var(--n-900); }
.booking-card .s { font-size: 12px; color: var(--n-500); line-height: normal; }
.booking-card .chev { width: 22.333px; height: 22.333px; }
.empty-bookings {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 13.4px;
  border: 1.117px dashed var(--n-300); background: var(--n-50);
}
.empty-bookings .e-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-50); display: grid; place-items: center; flex: none; }
.empty-bookings .e-ic img { width: 24px; height: 24px; }
.empty-bookings .t { font-size: 13.4px; font-weight: 600; line-height: 20px; }
.empty-bookings .s { font-size: 12px; color: var(--n-500); line-height: 17px; margin-top: 2px; }
.empty-bookings .link { margin-left: auto; white-space: nowrap; }

.explore { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.explore .row-between { width: 356.967px; }
.svc-tiles { display: flex; justify-content: space-between; width: 356.967px; }
.svc-tile { flex: 1 0 0; display: flex; flex-direction: column; align-items: center; gap: 13.4px; }
.svc-tile .ic { width: 79.283px; height: 58.067px; border-radius: 13.4px; display: flex; align-items: center; justify-content: center; }
.svc-tile .ic img { width: 32px; height: 32px; }
.svc-tile span { font-size: 13.4px; line-height: 22.333px; color: var(--n-700); text-align: center; }
.bg-warning { background: var(--warning-50); }
.bg-violet { background: var(--violet-50); }
.bg-blue { background: var(--blue-50); }
.bg-primary { background: var(--primary-50); }

.recent { display: flex; flex-direction: column; gap: 22px; width: 357px; }
.recent-scroll { display: flex; gap: 12px; width: 380px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.recent-scroll::-webkit-scrollbar { display: none; }
.rv-card { flex: none; scroll-snap-align: start; background: var(--n-100); border-radius: 13.4px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.rv-card .top { display: flex; gap: 14px; align-items: center; }
.rv-card .art { height: 80px; }
.rv-card .info { display: flex; flex-direction: column; gap: 8px; white-space: nowrap; }
.rv-card .info b { font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--n-900); }
.rv-card .info span { font-size: 13.4px; line-height: 13.4px; color: var(--grey-55); display: flex; gap: 4px; align-items: center; }
.rv-card .info span img { width: 16px; height: 16px; }
.rv-card .bottom { display: flex; justify-content: space-between; align-items: center; }
.key-outcome { width: 150px; background: var(--violet-50); border-radius: 8px; padding: 10px 12px; font-size: 12px; font-weight: 500; color: #4B3FA0; line-height: normal; }
.btn-small { width: 150px; height: 50px; border-radius: 11.167px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; font-size: 17.867px; line-height: 26.8px; font-weight: 600; white-space: nowrap; }
.btn-small img { width: 22.333px; height: 22.333px; }

.rm-card-wrap { padding: 10px 20px; display: flex; justify-content: center; }
.rm-card { width: 357.333px; border-radius: 13.4px; overflow: hidden; }
.rm-card .top { background: var(--n-100); border-bottom: 1.117px solid var(--n-300); padding: 17.867px; display: flex; gap: 17.867px; align-items: center; width: 100%; text-align: left; }
.rm-card .top img { width: 53.6px; height: 53.6px; }
.rm-card .top b { display: block; font-size: 17.867px; line-height: 26.8px; font-weight: 600; }
.rm-card .top span { display: block; font-size: 13.4px; line-height: 22.333px; color: var(--n-600); margin-top: 2.233px; }
.rm-card .acts { background: var(--n-100); display: flex; align-items: center; gap: 12.283px; }
.rm-card .acts button { flex: 1 0 0; display: flex; gap: 8.933px; align-items: center; justify-content: center; padding: 11.167px; font-size: 15.633px; line-height: 22.333px; font-weight: 500; }
.rm-card .acts button img { width: 17.867px; height: 17.867px; }
.rm-card .acts .div { width: 1.117px; height: 49.133px; background: var(--n-300); }

/* ───────────── Sub-page header (e.g. 1500:12520) ───────────── */
.sub-head-wrap { position: sticky; top: 0; z-index: 5; }
.sub-head-wrap.static { position: relative; }
.sub-head {
  position: relative; z-index: 1; width: 402px; min-height: 120px;
  padding: 75px 0 22px; border-radius: 0 0 26px 26px; overflow: hidden;
  background: linear-gradient(-29.46deg, #0E346B 21.276%, #080326 125.33%);
  display: flex; flex-direction: column; gap: 20px; color: #fff;
}
.sub-head.tall { background: linear-gradient(-38.34deg, #0E346B 21.276%, #080326 125.33%); }
.head-glow { position: absolute; left: 0; bottom: -4.15px; width: 402px; height: 30.15px; z-index: 0; pointer-events: none; }
.title-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.title-group { display: flex; align-items: center; gap: 16px; }
.title-group .back { width: 24px; height: 24px; display: block; }
.title-group .back img { width: 24px; height: 24px; }
.title-group h1 { font-size: 20px; font-weight: 600; line-height: normal; white-space: nowrap; }
.title-group .sub { font-size: 12px; color: rgba(255,255,255,.7); line-height: normal; margin-top: 2px; }

/* Filter tabs (1458:14032) */
.h-tabs { position: relative; display: flex; gap: 12px; padding: 0 22px; width: 402px; overflow-x: auto; scrollbar-width: none; }
.h-tabs::-webkit-scrollbar { display: none; }
.h-tab { position: relative; z-index: 1; padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; line-height: normal; color: rgba(255,255,255,.8); white-space: nowrap; transition: color .25s; }
.h-tab.active { color: var(--primary); font-weight: 600; }
.h-tabs .pill { position: absolute; z-index: 0; top: 0; height: 100%; border-radius: 16px; background: #fff; transition: left .35s var(--ease), width .35s var(--ease); }

/* Screens with the soft neutral background */
.soft { background: var(--n-50); padding-bottom: 120px; min-height: 100%; }
.content-zone { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.content-pad { display: flex; flex-direction: column; gap: 20px; padding: 20px 22px 0; }

/* Service cards (1458:13193) */
.service-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px;
  background: #fff; border: 1px solid var(--n-200); border-radius: 16px; text-align: left;
  transition: transform .12s, box-shadow .2s;
}
.service-card:active { transform: scale(.985); }
.service-card .s-ic { padding: 10px; border-radius: 10px; flex: none; }
.service-card .s-ic img { width: 20px; height: 20px; }
.service-card .s-desc { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 4px; line-height: normal; }
.service-card .s-desc b { font-size: 15px; font-weight: 600; color: var(--n-900); }
.service-card .s-desc span { font-size: 12px; color: var(--n-500); }
.service-card .chev { width: 20px; height: 20px; flex: none; }
.svc-list .service-card { animation: cardIn .35s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Service detail (1500:12465) */
.overview { display: flex; flex-direction: column; gap: 8px; }
.overview p.lead { font-size: 14px; line-height: 20px; color: var(--n-500); }
.badge-time { align-self: flex-start; display: flex; gap: 6px; align-items: center; height: 28px; padding: 4px 10px; border-radius: 16px; background: #E6DDFE; color: var(--violet); font-size: 11px; font-weight: 600; }
.badge-time img { width: 14px; height: 14px; }
.info-card { width: 357.333px; background: #fff; border: 1.117px solid var(--n-300); border-radius: 13.4px; padding: 17.867px; display: flex; flex-direction: column; gap: 16px; }
.info-card .grp { display: flex; flex-direction: column; gap: 12px; }
.info-card .grp .sec-title { line-height: 20px; }
.check-list { display: flex; flex-direction: column; gap: 8px; }
.check-item { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--n-900); line-height: normal; }
.check-item img { width: 16px; height: 16px; flex: none; }
.dot-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: normal; color: var(--n-900); }
.sep { height: 1.117px; background: var(--n-300); }
.cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 0; border-radius: 12px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 600; line-height: normal; transition: transform .12s, background .2s; position: relative; overflow: hidden; min-height: 46px; }
.cta:active { transform: scale(.985); }
.cta.ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.cta .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.4px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
.cta.done { background: var(--success); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Book appointment (1502:12917) */
.sec-block { display: flex; flex-direction: column; gap: 12px; }
.sec-block.tight { gap: 8px; }
.h-scroll { display: flex; gap: 12px; width: 380px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-right: 22px; }
.h-scroll::-webkit-scrollbar { display: none; }
.branch-opt {
  flex: none; width: 358px; scroll-snap-align: start; text-align: left;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 12px 0;
  background: #fff; border: 1px solid var(--n-200); border-radius: 12px; transition: border-color .2s, box-shadow .2s;
}
.branch-opt.sel { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.slots-tag { align-self: flex-start; background: #DFF0EB; color: var(--success); padding: 0 12px 0 16px; border-radius: 0 100px 100px 0; font-size: 10px; font-weight: 600; letter-spacing: 1px; line-height: 20px; text-transform: uppercase; }
.branch-opt .row { display: flex; gap: 20px; align-items: center; padding: 0 20px; }
.branch-opt .nm { flex: 1 0 0; }
.branch-opt .nm b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--n-900); }
.branch-opt .nm span { display: block; font-size: 12px; line-height: 20px; color: var(--n-500); }
.branch-opt .dist { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; color: var(--primary); }
.radio { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--n-300); transition: all .2s; }
.sel .radio, .radio.on { border: 3.5px solid var(--primary); background: #fff; }

.date-row { display: flex; gap: 10px; width: 100%; }
.date-chip { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--n-200); background: #fff; line-height: normal; transition: background .2s, border-color .2s, color .2s; }
.date-chip span { font-size: 12px; font-weight: 500; color: var(--n-500); }
.date-chip b { font-size: 16px; font-weight: 700; color: var(--n-900); }
.date-chip.sel { background: var(--primary); border-color: transparent; }
.date-chip.sel span, .date-chip.sel b { color: #fff; }
.date-chip.off { opacity: .45; pointer-events: none; }
.time-row { display: flex; gap: 4px; width: 380px; overflow-x: auto; scrollbar-width: none; padding-right: 22px; }
.time-row::-webkit-scrollbar { display: none; }
.time-chip { flex: none; padding: 12px; border-radius: 10px; border: 1px solid var(--n-200); background: #fff; font-size: 13px; font-weight: 600; color: var(--n-900); line-height: normal; transition: all .2s; }
.time-chip.sel { background: var(--primary-50); border-color: var(--primary); color: var(--primary); }
.time-chip.off { color: var(--n-300); text-decoration: line-through; pointer-events: none; }

/* Booked (1502:13623) */
.success-head { min-height: 231px; }
.success-state { display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 16px; }
.success-ring { width: 64px; height: 64px; border-radius: 32px; background: var(--success); border: 4px solid rgba(255,255,255,.25); display: grid; place-items: center; animation: pop .5s cubic-bezier(.2,1.6,.4,1) both .1s; position: relative; }
.success-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(0,135,95,.8); animation: ring 1.2s ease-out .4s both; }
.success-ring img { width: 28px; height: 28px; animation: pop .4s cubic-bezier(.2,1.6,.4,1) both .35s; }
.success-state h2 { font-family: 'General Sans', 'Inter', sans-serif; font-weight: 700; font-size: 24px; line-height: 24px; color: #fff; animation: rise .5s var(--ease) both .25s; }
.success-state p { font-size: 13px; color: rgba(255,255,255,.8); animation: rise .5s var(--ease) both .35s; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.confirm-card { background: #fff; border: 1px solid var(--n-200); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.detail-row { display: flex; justify-content: space-between; align-items: center; line-height: normal; white-space: nowrap; }
.detail-row .k { font-size: 13px; color: var(--n-500); }
.detail-row .v { font-size: 14px; font-weight: 600; color: var(--n-900); }
.detail-row .v.ref { font-weight: 700; color: var(--primary); }
.detail-row .rm-tag { display: flex; gap: 6px; align-items: center; }
.detail-row .rm-tag img { width: 24px; height: 24px; }
.hr { height: 1px; background: var(--n-200); }
.checklist-card { background: #fff; border: 1px solid var(--n-200); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.checklist-card .check-item { gap: 8px; }
.utility { display: flex; gap: 16px; }
.utility button { flex: 1 0 0; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--n-200); background: #fff; font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.utility button img { width: 16px; height: 16px; }
.utility button:active { background: var(--primary-50); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ───────────── Find a Branch (1543:13209) ───────────── */
.search-bar { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 22px; border-radius: 12px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25); transition: background .2s, border-color .2s; }
.search-bar:focus-within { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.search-bar img { width: 20px; height: 20px; flex: none; }
.search-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font-size: 14px; line-height: normal; }
.search-bar input::placeholder { color: rgba(255,255,255,.8); }
.search-bar .clear { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.25); color: #fff; font-size: 13px; line-height: 20px; text-align: center; flex: none; }
.sub-head.with-search { gap: 16px; }
.fb-body { display: flex; flex-direction: column; gap: 20px; padding: 22px 22px 0; }
.chips { display: flex; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--n-200); background: #fff; font-size: 12px; font-weight: 500; line-height: normal; color: var(--n-900); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.map { position: relative; width: 360px; height: 229px; border: 1px solid var(--n-200); border-radius: 16px; overflow: hidden; background: #F4EFE6; }
.map .layer { position: absolute; inset: 0; transform-origin: 50% 45%; transition: transform .45s var(--ease); }
.map .layer > img { width: 360px; height: 229px; }
.map .pin { position: absolute; transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.map .pin.main img { width: 40px; height: 40px; }
.map .pin.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(17,24,39,.35); }
.map .pin.dot.sel { background: var(--secondary); }
.map .zoom { position: absolute; left: 10px; top: 10px; width: 32.346px; height: 62.332px; padding: 1.18px; border: 1.18px solid rgba(0,0,0,.2); border-radius: 4px; display: flex; flex-direction: column; background-clip: padding-box; z-index: 2; }
.map .zoom button { height: 29.986px; background: #fff; color: #000; font-family: 'Lucida Console', Monaco, monospace; font-size: 22px; line-height: 30px; text-align: center; }
.map .zoom button:first-child { border-bottom: 1.18px solid #ccc; border-radius: 2px 2px 0 0; }
.map .zoom button:last-child { border-radius: 0 0 2px 2px; }
.map .attrib { position: absolute; right: 6px; bottom: 4px; font-size: 9px; color: rgba(17,24,39,.5); z-index: 2; }
.branch-list { display: flex; flex-direction: column; gap: 15px; }
.branch-card { background: #fff; border: 1px solid var(--n-200); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; text-align: left; width: 100%; transition: border-color .2s, box-shadow .2s; animation: cardIn .35s var(--ease) both; }
.branch-card.hl { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.branch-card .t-row { display: flex; justify-content: space-between; align-items: center; font-weight: 600; line-height: normal; white-space: nowrap; }
.branch-card .t-row b { font-size: 16px; color: var(--n-900); font-weight: 600; }
.branch-card .t-row span { font-size: 12px; color: var(--primary); }
.branch-card .addr { font-size: 13px; color: var(--n-500); line-height: normal; }
.tags { display: flex; gap: 6px; }
.tag { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; line-height: normal; white-space: nowrap; }
.tag.green { background: rgba(0,135,95,.13); color: var(--success); }
.tag.violet { background: rgba(116,84,242,.13); color: var(--violet); }
.tag.amber { background: rgba(249,159,53,.15); color: #C2410C; }
.tag.grey { background: var(--n-200); color: var(--n-600); }
.branch-card .foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: var(--primary); line-height: normal; }
.branch-card .foot img { width: 16px; height: 16px; }
.no-results { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 20px; background: #fff; border: 1px dashed var(--n-300); border-radius: 16px; animation: cardIn .35s var(--ease) both; }
.no-results .nr-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-50); display: grid; place-items: center; margin-bottom: 4px; }
.no-results b { font-size: 16px; font-weight: 600; color: var(--n-900); }
.no-results p { font-size: 13px; line-height: 19px; color: var(--n-500); }
.no-results .chips { margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* Branch details (1546:13877) */
.photo-head { position: relative; height: 300px; border-radius: 0 0 26px 26px; overflow: hidden; background: #cfd6e3; }
.photo-head > img { width: 402px; height: 300px; object-fit: cover; }
.photo-head .nav { position: absolute; left: 22px; right: 22px; top: 75px; display: flex; justify-content: space-between; }
.circle-btn { width: 32px; height: 32px; border-radius: 18px; background: rgba(0,0,0,.5); display: grid; place-items: center; }
.circle-btn img { width: 20px; height: 20px; }
.bd-body { display: flex; flex-direction: column; gap: 20px; padding: 24px 22px 0; }
.bd-title { display: flex; flex-direction: column; gap: 8px; }
.bd-title .addr { font-size: 14px; color: var(--n-500); line-height: normal; }
.dir-btn { align-self: flex-start; display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; line-height: normal; }
.dir-btn img { width: 16px; height: 16px; }
.quick-info { background: #fff; border: 1px solid var(--n-200); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.info-row { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; }
.info-row > img { width: 20px; height: 20px; flex: none; }
.info-row .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.info-row .tx b { font-size: 13px; font-weight: 600; color: var(--n-900); }
.info-row .tx span { font-size: 12px; color: var(--n-500); }
.info-row .open-now { font-size: 11px; font-weight: 600; color: var(--success); background: rgba(0,135,95,.13); padding: 3px 8px; border-radius: 4px; }
.svc-cells { display: flex; gap: 13px; width: 380px; overflow-x: auto; scrollbar-width: none; padding-right: 22px; }
.svc-cells::-webkit-scrollbar { display: none; }
.svc-cell { flex: none; display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--n-200); font-size: 12px; font-weight: 500; color: var(--n-900); line-height: normal; white-space: nowrap; }
.svc-cell img { width: 18px; height: 18px; }
.svc-cell:active { background: var(--primary-50); }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* ───────────── My RM (1548:19674) ───────────── */
.sub-head.px { padding-left: 22px; padding-right: 22px; }
.sub-head.px .title-bar { padding: 0; }
.rm-profile { width: 358px; padding: 16px; border-radius: 16px; border: 1.12px solid #1F2937; display: flex; flex-direction: column; gap: 30px; background: linear-gradient(126.49deg, #101733 1.97%, rgba(37,48,86,.7) 97.22%); }
.rm-profile .hd { display: flex; gap: 12px; align-items: center; }
.rm-profile .hd > img { width: 40px; height: 40px; flex: none; }
.rm-profile .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.rm-profile .nm { display: flex; gap: 6px; align-items: center; }
.rm-profile .nm b { font-size: 16px; font-weight: 600; color: #fff; }
.rating { display: flex; gap: 2px; align-items: center; padding: 2px 4px; border-radius: 4px; background: var(--amber); font-size: 10px; font-weight: 700; color: #080326; }
.rating img { width: 10px; height: 10px; }
.rm-profile .role { font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.rm-actions { display: flex; gap: 12px; }
.rm-actions button { flex: 1 0 0; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 500; line-height: normal; transition: background .2s; }
.rm-actions button:active { background: rgba(255,255,255,.2); }
.rm-actions img { width: 17.867px; height: 17.867px; }
.rm-body { display: flex; flex-direction: column; gap: 36px; padding: 22px 22px 190px; background: #fff; }
.rm-page { background: #fff; min-height: 100%; }
.interactions { display: flex; flex-direction: column; gap: 8px; }
.interaction { display: flex; gap: 12px; align-items: center; width: 100%; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--n-200); text-align: left; animation: cardIn .3s var(--ease) both; }
.interaction .tx { flex: 1; display: flex; flex-direction: column; gap: 4px; line-height: normal; white-space: nowrap; }
.interaction .tx b { font-size: 14px; font-weight: 600; color: var(--n-900); }
.interaction .tx span { font-size: 12px; color: var(--n-500); }
.pill-status { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: normal; white-space: nowrap; }
.pill-status.done { background: rgba(0,135,95,.08); color: var(--success); }
.pill-status.ver { background: rgba(28,63,202,.08); color: var(--primary); }
.pill-status.prog { background: rgba(249,159,53,.12); color: #C2410C; }
.sticky-cta { position: sticky; bottom: 114px; margin: -170px 22px 0; z-index: 3; }
.sticky-cta .cta { box-shadow: 0 10px 24px -10px rgba(28,63,202,.55); }

/* Product carousel (1548:20296) */
.carousel { display: flex; gap: 22px; width: 380px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-right: 22px; }
.carousel::-webkit-scrollbar { display: none; }
.pcard { position: relative; flex: none; scroll-snap-align: start; text-align: left; }
.pcard.rd { width: 214.4px; height: 321.6px; border-radius: 13.4px; background: var(--n-100); }
.pcard.rd .art { position: absolute; left: 17.87px; top: 35.73px; width: 121.717px; height: 80.4px; }
.pcard.rd .txt { position: absolute; left: 17.87px; top: 142.93px; display: flex; flex-direction: column; gap: 8.933px; }
.pcard .t1 { font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--n-900); }
.pcard .t2 { font-size: 13.4px; line-height: 22.333px; color: var(--grey-55); width: 178.667px; }
.pcard .t3 { font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: #108A06; white-space: nowrap; }
.pcard.rd .btn { position: absolute; left: 17.87px; top: 259.07px; width: 178.667px; display: flex; gap: 13.4px; align-items: center; justify-content: center; padding: 8.933px 13.4px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 17.87px; line-height: 26.8px; font-weight: 600; }
.pcard.rd .btn img { width: 22.333px; height: 22.333px; }
.pcard.passion { width: 214.4px; height: 321.6px; }
.pcard.passion .top { display: flex; gap: 8.933px; align-items: center; padding: 17.867px; border-radius: 13.4px; background: #F9FAFB; }
.pcard.passion .top b { width: 147.4px; font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--primary); }
.pcard .arr { width: 22.333px; height: 22.333px; flex: none; }
.pcard.passion .box { position: absolute; left: 0; top: 107.2px; width: 214.4px; height: 214.4px; border-radius: 13.4px; background: var(--n-100); }
.pcard.passion .yel { position: absolute; left: 1.12px; top: 1.12px; width: 212.167px; height: 152.983px; padding: 17.867px; border-radius: 13.4px; background: var(--amber); display: flex; flex-direction: column; gap: 10.05px; }
.pcard.passion .yel img { width: 71.467px; height: 62.533px; }
.pcard.passion .yel p { font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: var(--n-900); white-space: nowrap; }
.pcard .foot { position: absolute; display: flex; align-items: center; justify-content: space-between; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.pcard.passion .foot { left: 17.87px; top: 174.2px; width: 178.667px; }
.pcard.goal { width: 285.867px; height: 321.6px; border-radius: 13.4px; background: var(--n-100); }
.pcard.goal .purple { position: absolute; left: 1.12px; top: 1.44px; width: 283.633px; height: 262.417px; border-radius: 12.283px; background: #583DD0; }
.pcard.goal .inner { position: absolute; left: 22.33px; top: 14.84px; display: flex; flex-direction: column; gap: 8.933px; }
.pcard.goal .inner > img { width: 111.667px; height: 111.667px; }
.pcard.goal .inner b { display: block; width: 236.733px; font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: #fff; }
.pcard.goal .inner span { display: block; width: 225.567px; font-size: 13.4px; line-height: 22.333px; color: var(--n-200); }
.pcard.goal .inner em { display: block; font-style: normal; font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: #57DB9A; margin-top: 8.933px; }
.pcard.goal .foot { left: 17.87px; top: 281.4px; width: 250.13px; }

/* Book RM meeting (1552:20461) */
.type-cards { display: flex; gap: 12px; }
.type-card { flex: 1 0 0; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--n-200); background: #fff; text-align: left; line-height: normal; transition: border-color .2s; }
.type-card b { font-size: 14px; font-weight: 600; color: var(--n-900); }
.type-card span { font-size: 11px; color: var(--n-500); }
.type-card.sel { border: 2px solid var(--primary); padding: 11px; }
.type-card.sel b { color: var(--primary); }
.agenda { width: 100%; height: 80px; padding: 12px; border-radius: 8px; border: 1px solid var(--n-200); background: #fff; font-size: 14px; line-height: normal; color: var(--n-900); resize: none; outline: none; }
.agenda:focus { border-color: var(--primary); }
.content-pad.gap22 { gap: 22px; }

/* RM chat (1552:20960) */
.scr-rmChat { display: flex; flex-direction: column; overflow: hidden; background: var(--n-50); }
.scr-rmChat .sub-head-wrap { flex: none; }
.chat-head { display: flex; gap: 8px; align-items: center; }
.chat-head img { width: 24px; height: 24px; }
.chat-head .who { display: flex; flex-direction: column; gap: 2px; line-height: normal; white-space: nowrap; }
.chat-head .who b { font-size: 15px; font-weight: 600; color: #fff; }
.chat-head .who span { font-size: 10px; font-weight: 700; color: var(--success); letter-spacing: .02em; }
.circle-btn.light { background: rgba(0,0,0,.25); }
.circle-btn.light img { width: 17.867px; height: 17.867px; }
.chat-log { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 24px 22px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-log::-webkit-scrollbar { display: none; }
.msg { display: flex; gap: 8px; align-items: flex-end; width: 100%; animation: msgIn .3s var(--ease) both; }
.msg.right { justify-content: flex-end; }
.msg time { font-size: 10px; color: #9CA3AF; line-height: normal; white-space: nowrap; }
.bubble { max-width: 260px; padding: 12px; font-size: 13px; line-height: normal; color: var(--n-900); background: #E9EBF2; border-radius: 12px 12px 12px 4px; white-space: pre-wrap; word-break: break-word; }
.msg.right .bubble { background: var(--primary); color: #fff; border-radius: 12px 12px 4px 12px; }
.doc-bubble { width: 260px; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--n-200); background: #fff; text-align: left; }
.doc-bubble .ic { padding: 10px; border-radius: 8px; background: var(--primary-50); }
.doc-bubble .ic img { width: 20px; height: 20px; }
.doc-bubble .tx { display: flex; flex-direction: column; gap: 4px; line-height: normal; white-space: nowrap; min-width: 0; }
.doc-bubble .tx b { font-size: 13px; font-weight: 600; color: var(--n-900); overflow: hidden; text-overflow: ellipsis; }
.doc-bubble .tx span { font-size: 11px; color: var(--n-500); }
.typing { display: flex; gap: 4px; padding: 14px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9CA3AF; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quick-replies { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.quick-replies button { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--primary-400); color: var(--primary); background: #fff; font-size: 12px; font-weight: 500; }
.input-bar { flex: none; display: flex; gap: 12px; align-items: center; padding: 12px 16px 20px; margin-bottom: 81px; background: #fff; border-top: 1px solid var(--n-200); position: relative; z-index: 2; }
.input-bar .att { width: 24px; height: 24px; display: grid; place-items: center; }
.input-bar .att img { width: 14.4px; height: 14.4px; }
.input-bar input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 20px; background: var(--n-100); border: 0; outline: 0; font-size: 14px; line-height: normal; color: var(--n-900); }
.input-bar input::placeholder { color: #9CA3AF; }
.send-btn { width: 36px; height: 36px; border-radius: 20px; background: var(--primary); display: grid; place-items: center; flex: none; transition: transform .15s, opacity .2s; }
.send-btn img { width: 13.5px; height: 13.5px; }
.send-btn:disabled { opacity: .5; }
.send-btn:not(:disabled):active { transform: scale(.9); }
.scr-rmChat .title-group { gap: 12px; }

/* ───────────── RM recommendations (1552:21156) ───────────── */
.sub-head .lede { padding: 0 22px; font-size: 11px; line-height: normal; color: rgba(255,255,255,.7); }
.sub-head.gap12 { gap: 12px; }
.recs { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 230px; }
.rec-card { background: #fff; border: 1px solid var(--n-200); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: cardIn .35s var(--ease) both; }
.rec-card .top { display: flex; gap: 12px; align-items: center; }
.rec-card .top .s-ic { padding: 10px; border-radius: 10px; background: var(--primary-50); }
.rec-card .top .s-ic img { width: 20px; height: 20px; }
.rec-card .top .tx { flex: 1; display: flex; flex-direction: column; gap: 4px; line-height: normal; }
.rec-card .top .tx .r { display: flex; justify-content: space-between; align-items: center; }
.rec-card .top .tx b { font-size: 15px; font-weight: 600; color: var(--n-900); white-space: nowrap; }
.rec-card .top .tx span { font-size: 12px; color: var(--n-500); }
.rec-tag { padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.rec-actions { display: flex; gap: 12px; }
.rec-actions button { flex: 1 0 0; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: normal; text-align: center; }
.rec-actions .learn { background: var(--n-100); color: var(--primary); }
.rec-actions .apply { background: var(--primary); color: #fff; }
.double-cta { position: sticky; bottom: 107px; margin: -212px 22px 0; display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.double-cta .cta { font-size: 14px; }
.double-cta .cta.ghost { padding: 12px 0; min-height: 0; }
.compare { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12px; }
.compare th, .compare td { padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--n-200); vertical-align: top; line-height: 16px; }
.compare th { font-size: 11px; color: var(--n-500); font-weight: 600; }
.compare td b { font-weight: 600; color: var(--n-900); }

/* ───────────── Visit summary (1552:21609) ───────────── */
.sub-head.orange { background: linear-gradient(-44.26deg, #FF9D00 21.276%, #080326 125.33%); gap: 22px; padding-left: 22px; padding-right: 22px; }
.sub-head.orange .title-bar { padding: 0; }
.visit-info { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.13); font-size: 12px; color: rgba(255,255,255,.7); line-height: normal; white-space: nowrap; }
.visit-info div { display: flex; justify-content: space-between; }
.vs-body { display: flex; flex-direction: column; gap: 34px; padding: 22px 22px 130px; }
.box { background: #fff; border: 1px solid var(--n-200); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.box.tight { gap: 10px; }
.box.steps8 { gap: 8px; font-size: 13px; font-weight: 600; color: var(--n-900); line-height: normal; }
.cb-row { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--n-900); line-height: normal; }
.cb-row img { width: 20px; height: 20px; }
.stepper { gap: 16px; }
.step { position: relative; display: flex; gap: 12px; align-items: flex-start; }
.step .dot { position: relative; width: 16px; height: 12px; flex: none; display: grid; place-items: center; }
.step .dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--n-300); }
.step:not(:last-child) .dot::after { content: ""; position: absolute; left: 7px; top: 12px; width: 2px; height: calc(100% + 28px); background: var(--n-200); }
.step.done .dot::before { background: var(--success); }
.step.done .dot::after { background: var(--success) !important; }
.step.now .dot::before { background: var(--primary); box-shadow: 0 0 0 3px rgba(28,63,202,.18); animation: nowPulse 1.8s infinite; }
@keyframes nowPulse { 50% { box-shadow: 0 0 0 5px rgba(28,63,202,.1); } }
.step .tx { display: flex; flex-direction: column; gap: 2px; line-height: normal; white-space: nowrap; }
.step .tx b { font-size: 13px; font-weight: 600; color: var(--n-900); }
.step .tx span { font-size: 11px; color: var(--n-500); }
.step.now .tx b { color: var(--primary); }
.step.todo .tx b { color: var(--n-500); }
.doc-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--n-900); line-height: normal; white-space: nowrap; }
.doc-row em { font-style: normal; font-size: 11px; font-weight: 600; }
.doc-row em.ok { color: var(--success); }
.doc-row em.pend { color: var(--amber); }
.rating-block { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.rating-block p { font-size: 14px; font-weight: 600; color: var(--n-500); line-height: normal; }
.stars { display: flex; gap: 8px; }
.stars button { width: 24px; height: 24px; position: relative; transition: transform .15s; }
.stars button img { position: absolute; inset: 0; width: 24px; height: 24px; }
.stars button:active { transform: scale(1.25); }
.stars .on { opacity: 0; transition: opacity .15s; }
.stars button.lit .on { opacity: 1; }

/* ───────────── Your Active Visit (1552:22117) ───────────── */
.sub-head.visit { padding-top: 64px; gap: 20px; align-items: center; min-height: 299px; background: linear-gradient(-54.61deg, #0E346B 21.276%, #080326 125.33%); }
.sub-head.visit .title-bar { width: 100%; padding-top: 11px; }
.av-body { display: flex; flex-direction: column; gap: 22px; padding: 24px 22px 130px; background: #fff; }
.av-page { background: #fff; min-height: 100%; }
.queue-card { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; border: 1px solid var(--n-200); background: #fff; }
.ring { position: relative; width: 64px; height: 64px; flex: none; }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6.4; }
.ring .trk { stroke: #E5E7EB; }
.ring .prg { stroke: var(--primary); transition: stroke-dashoffset .8s var(--ease), stroke .3s; }
.ring.next .prg { stroke: var(--success); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--n-900); }
.queue-card .tx { flex: 1; display: flex; flex-direction: column; gap: 4px; line-height: normal; }
.queue-card .tx b { font-size: 15px; font-weight: 600; color: var(--n-900); }
.queue-card .tx span { font-size: 13px; color: var(--n-500); }
.notify-card { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 12px; border: 1px solid var(--n-200); background: #fff; width: 100%; text-align: left; }
.notify-card .tx { display: flex; flex-direction: column; gap: 2px; line-height: normal; white-space: nowrap; }
.notify-card .tx b { font-size: 14px; font-weight: 600; color: var(--n-900); }
.notify-card .tx span { font-size: 12px; color: var(--n-500); }
.toggle { position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--n-300); flex: none; transition: background .25s; }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1.5px 3px rgba(0,0,0,.12); transition: transform .25s var(--ease); }
.toggle.on { background: var(--primary); }
.toggle.on::after { transform: translateX(20px); }
.milestones { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; border: 1px solid var(--n-200); background: #fff; }
.ms { position: relative; display: flex; gap: 12px; align-items: center; }
.ms > img { width: 20px; height: 20px; position: relative; z-index: 1; }
.ms:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 20px; width: 2px; height: 34px; background: #E5E7EB; transition: background .4s; }
.ms.done:not(:last-child)::before { background: var(--success); }
.ms .tx { display: flex; flex-direction: column; gap: 2px; line-height: normal; white-space: nowrap; }
.ms .tx b { font-size: 14px; font-weight: 500; color: var(--n-900); }
.ms .tx span { font-size: 12px; color: var(--n-500); }
.ms.now .tx b { font-weight: 600; color: var(--primary); }
.ms.now > img { animation: nowPulseImg 1.8s infinite; border-radius: 50%; }
@keyframes nowPulseImg { 50% { box-shadow: 0 0 0 5px rgba(28,63,202,.14); } }
.cta img { width: 16px; height: 16px; }
.visit-card.static { cursor: default; }

/* ───────────── Navigate to RM Cabin 3 (1552:22680) ───────────── */
.sub-head.navh .title-group { align-items: flex-start; }
.sub-head.navh h1 { font-family: 'General Sans', 'Inter', sans-serif; font-weight: 600; }
.sub-head.navh .sub { margin-top: 8px; }
.nav-body { display: flex; flex-direction: column; gap: 34px; padding: 24px 22px 130px; }
.floorplan { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--n-200); background: #fff; }
.floorplan .hd { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: var(--n-900); line-height: normal; }
.floorplan .badge { padding: 2px 6px; border-radius: 4px; background: var(--primary-50); color: var(--primary); font-size: 10px; font-weight: 600; }
.plan { position: relative; height: 200px; border-radius: 12px; background: var(--n-50); overflow: hidden; }
.plan .room { position: absolute; border-radius: 8px; background: #E5E7EB; border: 1px solid #D1D5DB; }
.plan .room.rm { background: var(--primary-50); border: 2px solid var(--primary); }
.plan .lbl { position: absolute; font-size: 12px; font-weight: 600; color: var(--n-500); line-height: normal; white-space: nowrap; }
.plan .lbl.rm { font-weight: 700; color: var(--primary); }
.plan .counter { position: absolute; left: 10px; top: 140px; width: 220px; height: 30px; border-radius: 4px; background: #F3F4F6; border: 1px solid #D1D5DB; }
.plan .lbl.small { font-size: 11px; font-weight: 400; }
.plan .track { position: absolute; border-color: var(--primary); border-style: dotted; border-width: 0; }
.plan .track.h { left: 120px; top: 108.5px; width: 160px; border-top-width: 3px; }
.plan .track.v { left: 278.5px; top: 50px; height: 60px; border-left-width: 3px; }
.plan .you { position: absolute; width: 16px; height: 16px; left: 105px; top: 103px; transition: left .9s var(--ease), top .9s var(--ease); z-index: 2; }
.plan .you::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: rgba(28,63,202,.18); animation: youPulse 1.6s infinite; z-index: -1; }
@keyframes youPulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.plan .target { position: absolute; left: 270px; top: 35px; width: 28px; height: 28px; border-radius: 14px; background: var(--primary); display: grid; place-items: center; z-index: 1; }
.plan .target img { width: 16px; height: 16px; }
.guidance { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--n-200); background: #fff; }
.dir-step { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font-size: 13px; font-weight: 500; line-height: normal; color: var(--n-900); }
.dir-step img { width: 22px; height: 22px; flex: none; }
.dir-step.done { color: var(--n-500); }
.dist-card { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-radius: 12px; border: 1px solid var(--n-200); background: #fff; }
.dist-card .m { display: flex; flex-direction: column; gap: 2px; line-height: normal; white-space: nowrap; }
.dist-card .m span { font-size: 12px; color: var(--n-500); }
.dist-card .m b { font-size: 16px; font-weight: 700; color: var(--n-900); }
.dist-card .div { width: 1px; height: 32px; background: var(--n-200); }
.arrived { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(0,135,95,.1); color: var(--success); font-size: 13px; font-weight: 600; animation: cardIn .35s var(--ease) both; }

/* ───────────── Home tab (1426:6593) ───────────── */
.scr-home { padding-bottom: 130px; background: #fff; }
.home-fold { padding: 64px 0 53.6px; display: flex; flex-direction: column; gap: 13.4px; align-items: center; background: linear-gradient(-65.39deg, #0E346B 21.276%, #080326 125.33%); }
.home-head { width: 402px; display: flex; justify-content: space-between; align-items: flex-start; padding: 11.167px 22.333px 8.933px; }
.home-head .l { display: flex; gap: 17.867px; align-items: center; }
.home-head .l .me { width: 37.967px; height: 37.967px; }
.home-head .l .dp { width: 71.467px; height: 35.733px; }
.home-head .r { display: flex; gap: 17.867px; align-items: center; }
.home-head .gift { width: 35.733px; height: 35.733px; border-radius: 100px; }
.acct-row { width: 359.567px; display: flex; gap: 26.8px; align-items: center; }
.acct-row .sel { flex: 1; display: flex; gap: 8.933px; align-items: center; font-size: 17.46px; line-height: 24.939px; color: var(--n-200); white-space: nowrap; }
.acct-row .sel img { width: 22.333px; height: 22.333px; }
.acct-row .manage { white-space: nowrap; font-size: 14.96px; line-height: 24.939px; color: var(--n-200); text-decoration: underline; }
.bal-block { display: flex; flex-direction: column; gap: 44.667px; align-items: center; width: 100%; margin-top: 40.2px; }
.bal { display: flex; flex-direction: column; gap: 4.467px; align-items: center; }
.bal .v { display: flex; gap: 5.583px; align-items: center; font-size: 26.8px; line-height: 35.733px; font-weight: 600; letter-spacing: -.536px; color: #fff; white-space: nowrap; min-height: 35.733px; }
.bal .v img { width: 22.333px; height: 22.333px; }
.bal .stmt { font-size: 17.46px; line-height: 24.939px; color: var(--n-200); text-decoration: underline; }
.cdli { width: 357.333px; display: flex; border: 1.117px solid rgba(255,255,255,.3); border-radius: 12px; overflow: hidden; }
.cdli button { flex: 1 0 0; display: flex; gap: 6.7px; align-items: center; justify-content: center; padding: 13.4px 11.167px; color: #fff; font-size: 13.4px; line-height: 22.333px; transition: background .2s; }
.cdli button:active { background: rgba(255,255,255,.1); }
.cdli img { width: 17.867px; height: 17.867px; }
.swipe-hint { display: flex; gap: 8.933px; align-items: center; height: 22.333px; margin-top: 4.467px; font-size: 13.4px; line-height: 22.333px; color: var(--n-200); }
.swipe-hint img { width: 22.333px; height: 22.333px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
.home-sheet { position: relative; margin-top: -35.73px; }
.z360 { zoom: 1.116667; width: 360px; }
.sm-top { width: 360px; height: 27px; display: block; }
.sm { background: #fff; padding: 0 20px 16px; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.promo { width: 320px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.promo .track { width: 320px; height: 80px; border-radius: 20px; overflow: hidden; position: relative; }
.promo .slide { position: absolute; inset: 0; padding: 20px; border-radius: 20px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--n-900); transition: transform .5s var(--ease), opacity .5s; }
.promo .slide img { position: absolute; right: 0; top: 0; width: 80px; height: 80px; }
.promo .dots { display: flex; gap: 8px; align-items: center; }
.promo .dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--n-200); transition: width .3s, background .3s; }
.promo .dots i.on { width: 28px; background: var(--primary); }
.send-money { width: 320px; display: flex; flex-direction: column; gap: 12px; }
.send-money .hd { display: flex; gap: 3px; align-items: center; height: 24px; }
.send-money .hd > img { width: 32px; height: 32px; }
.send-money .hd b { flex: 1; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--n-900); }
.send-money .hd button { display: flex; gap: 4px; align-items: center; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--primary); }
.send-money .hd button img { width: 16px; height: 16px; }
.payee-search { width: 320px; height: 48px; display: flex; gap: 8px; align-items: center; padding: 8px 12px 8px 4px; border-radius: 12px; border: 1.5px solid #F8BAF2; background: #fff; text-align: left; }
.payee-search .si { width: 40px; height: 40px; border-radius: 8px; background: var(--n-100); display: grid; place-items: center; flex: none; }
.payee-search .si img { width: 16px; height: 16px; }
.payee-search .ph { flex: 1; font-size: 12px; line-height: 20px; color: var(--n-700); white-space: nowrap; }
.payee-search .ph b { font-weight: 600; }
.payee-search .vr { width: 1px; height: 20px; border-radius: 100px; background: var(--n-200); }
.rails { position: relative; width: 47px; height: 20px; overflow: hidden; flex: none; }
.rails .reel { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; animation: reel 7.5s infinite; }
.rails .reel span { height: 20px; display: flex; gap: 2px; align-items: center; font-size: 12px; line-height: 20px; color: var(--n-900); }
.rails .reel img { width: 14px; height: 14px; }
@keyframes reel { 0%, 16% { transform: translateY(0); } 20%, 36% { transform: translateY(-20px); } 40%, 56% { transform: translateY(-40px); } 60%, 76% { transform: translateY(-60px); } 80%, 100% { transform: translateY(-80px); } }
.tip { width: 100%; display: flex; flex-direction: column; transition: opacity .25s, max-height .3s; max-height: 60px; overflow: hidden; }
.tip.hide { opacity: 0; max-height: 0; }
.tip .arrow { width: 8px; height: 4.949px; margin-left: 16px; }
.tip.center .arrow { margin: 0 auto; }
.tip .bub { display: flex; gap: 4px; align-items: center; padding: 4px 4px 4px 12px; border-radius: 8px; background: var(--primary-400); color: #fff; font-size: 12px; line-height: 20px; }
.tip .bub span { flex: 1; }
.tip .bub u { font-weight: 600; }
.tip .bub button { width: 20px; height: 20px; opacity: .9; }
.tip .bub button img { width: 20px; height: 20px; }
.sm-grid { display: grid; grid-template-columns: 154px 154px; gap: 12px; justify-content: space-between; width: 320px; }
.sm-tile { display: flex; flex-direction: column; gap: 4px; justify-content: center; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--n-200); background: #fff; font-size: 12px; line-height: 20px; color: var(--n-900); text-align: left; }
.sm-tile .ir { display: flex; gap: 12px; align-items: flex-start; }
.sm-tile img { width: 20px; height: 20px; }
.badge-green { padding: 0 6px; border-radius: 12px; background: var(--success); color: #fff; font-size: 10px; line-height: 20px; }
.upi { background: #fff; }
.upi .in { padding: 16px 20px 26.8px; display: flex; justify-content: center; }
.upi .col { width: 320px; display: flex; flex-direction: column; gap: 16px; }
.upi .t { display: flex; gap: 8.933px; align-items: center; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--n-900); }
.upi .t img { width: 24px; height: 24px; }
.upi .tiles { display: flex; gap: 7px; align-items: center; }
.upi-tile { flex: 1 0 0; display: flex; flex-direction: column; gap: 13.4px; align-items: center; padding: 17.867px 8px; border-radius: 17.867px; background: var(--n-100); font-size: 14px; line-height: 20px; color: var(--n-900); text-align: center; }
.upi-tile.sm { flex: none; width: 102px; gap: 8px; padding: 16px 8px; border-radius: 12px; }
.upi-tile img { width: 24px; height: 24px; }
.upi .idbar { background: var(--n-100); padding: 8px 20px; display: flex; justify-content: center; }
.upi .idbar button { display: flex; gap: 2px; align-items: center; font-size: 14px; line-height: 20px; color: var(--primary); }
.upi .idbar b { font-weight: 600; }
.upi .idbar img { width: 16px; height: 16px; }
.upi .tipwrap { display: flex; justify-content: center; padding-top: 4px; }
.upi .tipwrap .tip { width: 320px; }
.hsec { padding: 26.8px 22.333px 17.867px; display: flex; flex-direction: column; gap: 17.867px; background: #fff; }
.hsec .row-between b { font-size: 17.87px; line-height: 26.8px; font-weight: 600; color: var(--n-900); }
.hsec .row-between button { font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--primary); }
.recents { display: flex; justify-content: space-between; }
.recent-p { width: 89.333px; height: 84.867px; display: flex; flex-direction: column; align-items: center; gap: 4.47px; font-size: 13.4px; line-height: 22.333px; color: var(--n-900); }
.recent-p img { width: 53.6px; height: 53.6px; }
.recent-p.warn span { color: #E22853; display: flex; gap: 4px; align-items: center; }
.recent-p.warn span i { width: 13.4px; height: 13.4px; border-radius: 50%; border: 1.3px solid #E22853; font-style: normal; font-size: 9px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.sched { white-space: nowrap; width: 134px; height: 138.467px; padding: 13.4px; border-radius: 13.4px; background: var(--n-100); border: 1.117px solid var(--n-200); display: flex; flex-direction: column; gap: 26.8px; text-align: left; font-size: 17.46px; line-height: 24.939px; font-weight: 500; color: var(--n-900); }
.sched .plus { align-self: flex-start; padding: 8.933px; border-radius: 111.667px; border: 1.117px solid var(--primary); }
.sched .plus img { width: 22.333px; height: 22.333px; display: block; }
.hsec.pad { padding: 26.8px 22.333px; }
.home-more { padding: 35.733px 22.333px; display: flex; flex-direction: column; gap: 35.733px; align-items: center; background: #fff; }
.tickets { width: 357.333px; display: flex; flex-direction: column; gap: 17.867px; }
.tickets .t { display: flex; gap: 2.233px; align-items: center; height: 26.8px; }
.tickets .t b { font-size: 17.87px; line-height: 26.8px; font-weight: 600; color: var(--n-900); }
.tickets .t span { font-size: 13.4px; line-height: 22.333px; color: var(--n-600); }
.tickets .t .upi-l { display: flex; gap: 2.233px; align-items: center; font-size: 13.4px; color: var(--n-900); }
.tickets .t .upi-l img { width: 15.633px; height: 15.633px; }
.tickets .sub { font-size: 13.4px; line-height: 22.333px; color: var(--n-600); margin-top: -13.4px; }
.tk-row { display: flex; gap: 17.867px; }
.tk { width: 169.733px; padding: 13.4px; border-radius: 12px; display: flex; flex-direction: column; gap: 8.933px; text-align: left; }
.tk > img { width: 71.467px; height: 71.467px; }
.tk .r { display: flex; gap: 8.933px; align-items: flex-start; }
.tk .r span { flex: 1; display: flex; flex-direction: column; gap: 2.233px; white-space: nowrap; }
.tk .r b { font-size: 15.63px; line-height: 22.333px; font-weight: 600; color: var(--n-900); }
.tk .r em { font-style: normal; font-size: 13.4px; line-height: 22.333px; color: var(--n-600); }
.tk .r img { width: 22.333px; height: 22.333px; }
.hcards { display: flex; gap: 22.33px; width: 380px; overflow-x: auto; scrollbar-width: none; padding-right: 22px; margin-right: -22px; scroll-snap-type: x mandatory; }
.hcards::-webkit-scrollbar { display: none; }
.hcards > * { scroll-snap-align: start; flex: none; }
.bill { padding: 17.867px; border-radius: 12px; background: var(--n-100); text-align: left; }
.bill .in { width: 178.667px; display: flex; flex-direction: column; gap: 22.333px; }
.bill .top { display: flex; justify-content: space-between; align-items: flex-start; }
.bill .top .l { display: flex; flex-direction: column; gap: 8.933px; width: 99.383px; }
.bill .top .l > img { width: 96.177px; height: 134px; }
.bill .top .flip { width: 22.333px; height: 22.333px; }
.bill .cat { font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: var(--n-600); letter-spacing: 1px; text-transform: uppercase; }
.bill .amt { font-size: 22.33px; line-height: 31.267px; font-weight: 600; letter-spacing: -.4466px; color: var(--n-900); }
.bill .due { font-size: 13.4px; line-height: 22.333px; color: #E22853; }
.bill .pay { display: flex; gap: 8.933px; align-items: center; justify-content: center; padding: 6.7px 13.4px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 15.63px; line-height: 22.333px; font-weight: 600; width: 178.667px; }
.bill .pay img { width: 17.867px; height: 17.867px; }
.bill.paid .pay { background: var(--success); }
.stack2 { position: relative; width: 214.4px; height: 321.6px; }
.stack2 .nominee { position: absolute; left: 0; top: 0; width: 214.4px; height: 84.867px; padding: 13.4px 17.867px; border-radius: 13.4px; background: var(--n-100); display: flex; gap: 8.933px; align-items: center; text-align: left; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--primary); }
.stack2 .nominee img { width: 22.333px; height: 22.333px; }
.stack2 .car { position: absolute; left: 0; top: 107.2px; width: 214.4px; height: 214.4px; border-radius: 13.4px; background: var(--n-100); text-align: left; }
.stack2 .car .y { position: absolute; left: 1.12px; top: 1.12px; width: 212.167px; height: 155.217px; border-radius: 12.283px; background: var(--amber); overflow: hidden; }
.stack2 .car .y p { position: absolute; left: 17.87px; top: 17.87px; width: 121.717px; font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; font-size: 17.867px; line-height: 24.567px; letter-spacing: .3573px; color: var(--n-900); }
.stack2 .car .y img { position: absolute; left: 117.25px; top: 50.25px; width: 69.233px; height: 91.567px; transform: scaleX(-1); }
.hfoot { position: absolute; display: flex; align-items: center; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--primary); }
.hfoot span { flex: 1; }
.hfoot img { width: 26.8px; height: 26.8px; }
.stack2 .car .hfoot { left: 17.87px; top: 171.97px; width: 178.667px; }
.depo { position: relative; width: 285.867px; height: 321.6px; border-radius: 13.4px; background: var(--n-100); text-align: left; }
.depo .v { position: absolute; left: 1.12px; top: 1.12px; width: 284.75px; height: 262.417px; border-radius: 12.283px; background: var(--violet); overflow: hidden; }
.depo .v p { position: absolute; left: 21.21px; top: 21.21px; width: 139.583px; font-size: 20.1px; line-height: 26.8px; font-weight: 600; letter-spacing: -.402px; color: #fff; }
.depo .v img { position: absolute; left: 156.33px; top: 87.1px; width: 116.133px; height: 164.15px; object-fit: cover; object-position: left top; }
.depo .hfoot { left: 17.87px; top: 279.17px; width: 250.133px; }
.rm-card.home .top img { border-radius: 50%; }

/* ───────────── Shared sheet parts (rows, fields, menus) ───────────── */
.sheet > .cta { margin-top: 18px; }
.s-rows { margin-top: 18px; border: 1px solid var(--n-200); border-radius: 12px; overflow: hidden; }
.s-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; font-size: 13.4px; line-height: 19px; color: var(--n-600); border-top: 1px solid var(--n-100); }
.s-row:first-child { border-top: 0; }
.s-row b { color: var(--n-900); font-weight: 600; text-align: right; }
.s-row b.ok { color: var(--success); }
.s-row small { display: block; font-size: 11.5px; line-height: 16px; color: var(--n-500); margin-top: 1px; }
.menu-list { margin-top: 12px; display: flex; flex-direction: column; }
.menu-list button { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--n-100); font-size: 14.5px; line-height: 20px; color: var(--n-900); text-align: left; }
.menu-list button:last-child { border-bottom: 0; }
.menu-list button img { width: 20px; height: 20px; opacity: .6; }
.menu-list .danger { color: #E22853; font-weight: 500; }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.field > span { font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--n-600); }
.field input { height: 46px; border: 1px solid var(--n-300); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--n-900); outline: none; }
.field input:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px rgba(79,111,223,.15); }
.chips.wrap { flex-wrap: wrap; }
.fetched { margin-top: 14px; border: 1px solid var(--n-200); border-radius: 12px; overflow: hidden; animation: fadeUp .3s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }
.pay-amt { margin-top: 18px; padding: 16px; border-radius: 12px; background: var(--primary-50); display: flex; flex-direction: column; gap: 2px; }
.pay-amt span { font-size: 12.5px; color: var(--n-600); }
.pay-amt b { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -.4px; color: var(--n-900); }
.pay-amt em { font-style: normal; font-size: 12px; font-weight: 500; color: #D67D26; }

/* ───────────── Bills tab (1426:8027) ───────────── */
.scr-bills { background: #fff; padding-bottom: 130px; }
.home-head .l .dpn { width: 120.6px; height: 35.733px; }
.bills-fold { padding: 64px 0 62.533px; display: flex; flex-direction: column; gap: 13.4px; align-items: center; background: linear-gradient(-70.48deg, #0E346B 0%, #080326 100%); }
.bf-body { width: 359.567px; display: flex; flex-direction: column; gap: 22.333px; align-items: center; }
.bf-title { width: 100%; height: 27px; display: flex; justify-content: space-between; align-items: center; }
.bf-title b { font-size: 20.1px; line-height: 26.8px; font-weight: 600; color: #fff; letter-spacing: -.2px; }
.bf-title .va { display: flex; gap: 4.467px; align-items: center; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: #fff; }
.bf-title .va img { width: 17.867px; height: 17.867px; }
.bill-row { align-self: stretch; margin: 0 -21.216px 0 1.117px; padding-right: 21.216px; display: flex; gap: 13.4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bill-row::-webkit-scrollbar { display: none; }
.bill-card { zoom: 1.116667; width: 200px; flex: none; scroll-snap-align: start; position: relative; background: #fff; border: 1px solid #D2D5DB; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.bill-card .bg { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; }
.bill-card .in { position: relative; display: flex; flex-direction: column; gap: 20px; }
.bill-card .top { display: flex; flex-direction: column; gap: 4px; }
.bill-card .nm { display: flex; gap: 16px; align-items: flex-start; }
.bill-card .nm .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 20px; color: #111827; white-space: nowrap; }
.bill-card .nm b { font-size: 14px; font-weight: 600; }
.bill-card .nm .t span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.bill-card .logo { width: 32px; height: 32px; flex: none; }
.bill-card .logo.alt { border-radius: 12px; border: .5px solid #E5E5E5; background: #F9FAFF; display: grid; place-items: center; }
.bill-card .logo.alt img { width: 22px; height: 22px; }
.bill-card .num { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bill-card .num b { font-size: 14px; line-height: 20px; font-weight: 600; color: #111827; white-space: nowrap; }
.bill-card .sp { display: flex; gap: 4px; align-items: center; font-size: 14px; line-height: 20px; font-weight: 600; color: #1C3FCA; white-space: nowrap; }
.bill-card .sp.issue { color: #E22853; }
.bill-card .sp.on { color: var(--success); }
.bill-card .sp img { width: 20px; height: 20px; }
.bill-card .amt { display: flex; flex-direction: column; align-items: flex-start; }
.bill-card .amt p { font-size: 18px; line-height: 28px; letter-spacing: -.24px; color: #111827; }
.bill-card .amt p b { font-size: 24px; line-height: 32px; font-weight: 700; }
.bill-card .due { display: inline-flex; gap: 2px; align-items: center; border-radius: 12px; background: #fff; font-size: 12px; line-height: 16px; font-weight: 500; color: #D67D26; white-space: nowrap; }
.bill-card .due img { width: 12px; height: 12px; }
.bill-card .due.paid { color: #6B7280; }
.bill-card .due.paid img { filter: grayscale(1) brightness(1.15); }
.bill-card .due.ok { color: var(--success); }
.bill-card .acts { position: relative; display: flex; gap: 12px; align-items: center; width: 172px; }
.bill-card .pay { flex: 1; background: #1C3FCA; border-radius: 11px; padding: 10px 16px; font-size: 16px; line-height: 24px; font-weight: 600; color: #fff; text-align: center; transition: transform .12s, background .2s; }
.bill-card .pay:active { transform: scale(.97); }
.bill-card .pay.done { background: var(--success); }
.bill-card .kebab { width: 24px; height: 24px; display: grid; place-items: center; }
.bill-card .kebab img { width: 24px; height: 24px; }
.pay-new { padding: 8.933px 17.867px; border: 1.117px solid #4D71FF; border-radius: 11.167px; font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: #4D71FF; transition: background .2s; }
.pay-new:active { background: rgba(77,113,255,.12); }

.bills-top { background: #fff; padding: 8.933px 22.333px 35.733px; display: flex; flex-direction: column; gap: 26.8px; }
.bill-search { height: 45.333px; display: flex; gap: 8.933px; align-items: center; padding: 0 13.4px; border: 1.117px solid #9CA3AF; border-radius: 8.933px; background: #fff; }
.bill-search img { width: 22.333px; height: 22.333px; flex: none; }
.bill-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 15.633px; line-height: 22.333px; color: var(--n-900); }
.bill-search input::placeholder { color: #6B7280; }
.bill-search input::-webkit-search-cancel-button { display: none; }
.bp-cards { display: flex; gap: 13.4px; }
.bp { position: relative; width: 171.967px; height: 205.467px; flex: none; border: 1.117px solid #ECEDF3; border-radius: 17.867px; background: #fff; overflow: hidden; text-align: left; transition: transform .12s; }
.bp:active { transform: scale(.98); }
.bp .art { position: absolute; left: -1.117px; top: -1.117px; width: 171.967px; height: 147.4px; }
.bp .art .bgv { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp .cal { position: absolute; left: 98.345px; top: 90.785px; width: 63.742px; height: 46.98px; }
.bp .tick { position: absolute; left: 136.453px; top: 84.867px; width: 16.232px; height: 16.232px; animation: pop 2.4s ease-in-out infinite; }
@keyframes pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } }
.bp .woman { position: absolute; left: 93.8px; top: 46.9px; width: 75.933px; height: 100.5px; }
.bp .copy { position: absolute; left: 14.517px; top: 14.517px; width: 90.45px; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: #fff; }
.bp.yellow .copy { left: 12.283px; top: 12.283px; width: 137.35px; color: var(--n-900); }
.bp .cta-row { position: absolute; left: 12.283px; top: 164.15px; width: 145.367px; display: flex; justify-content: space-between; align-items: center; font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: var(--primary); }
.bp .cta-row img { width: 22.333px; height: 22.333px; }

.popular { background: #F9FAFF; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
.popular .h { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--n-900); }
.pp-grid { display: grid; grid-template-columns: repeat(4, 80px); justify-content: space-between; row-gap: 20px; }
.pp-grid.in-sheet { width: 320px; margin-top: 16px; }
.pp { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pp[hidden] { display: none; }
.pp .ic { width: 64px; height: 52px; display: grid; place-items: center; border: 1px solid #D2D5DB; border-radius: 16px; background: #fff; transition: background .2s, border-color .2s; }
.pp:active .ic { background: var(--primary-50); border-color: var(--primary-400); }
.pp .ic img { width: 28px; height: 28px; }
.pp .l { width: 80px; font-size: 12px; line-height: 20px; color: var(--n-700); text-align: center; }
.pp-empty { font-size: 12px; line-height: 18px; color: var(--n-500); text-align: center; padding: 8px 0 4px; }
.pcat { background: #fff; padding-top: 40px; display: flex; flex-direction: column; gap: 25px; }
.pcat .hd { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.pcat .hd p { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--n-900); }
.pcat .hd button { display: flex; align-items: center; font-size: 12px; line-height: 20px; font-weight: 600; color: var(--primary); }
.pcat .hd button img { width: 16px; height: 16px; }
.pcat .row { display: flex; gap: 12px; padding: 0 20px; align-items: flex-start; }
.pcat .row button { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; font-size: 12px; line-height: 20px; color: var(--n-700); text-align: center; }
.pcat .row button span { width: 71px; height: 52px; border-radius: 12px; display: grid; place-items: center; transition: transform .12s; }
.pcat .row button:active span { transform: scale(.95); }
.pcat .row img { width: 28px; height: 28px; }
.bills-foot { background: #fff; padding: 44.667px 22.333px 58px; display: flex; flex-direction: column; align-items: center; }
.regalia { position: relative; width: 357.333px; height: 147.4px; border-radius: 17.867px; background: #CDBBFD; overflow: hidden; }
.regalia .band { position: absolute; inset: 0; width: 100%; height: 100%; }
.regalia .cards { position: absolute; left: 230.897px; top: 21.418px; width: 81.332px; height: 114.703px; }
.regalia p { position: absolute; left: 22.333px; top: 22.333px; width: 172px; font-family: 'Archivo', 'Inter', sans-serif; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--n-900); white-space: nowrap; }
.regalia button { position: absolute; left: 22.333px; top: 93.8px; width: 101.617px; height: 31.267px; border-radius: 8.933px; background: var(--primary); color: #fff; font-family: 'Archivo', 'Inter', sans-serif; font-size: 15.633px; line-height: 22.333px; font-weight: 600; }
.dots5 { display: flex; gap: 6.7px; align-items: center; margin-top: 16.75px; }
.dots5 i { width: 8.933px; height: 8.933px; border-radius: 10px; background: #D2D5DB; }
.dots5 i.on { width: 31.267px; background: var(--primary); }
.bb { width: 320px; margin-top: 44.667px; border: 1px solid #D2D5DB; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 16px; background: #fff; }
.bb button { display: flex; gap: 16px; align-items: center; text-align: left; }
.bb button:first-child { align-items: flex-start; }
.bb button > img:first-child { width: 24px; height: 24px; flex: none; }
.bb button > img:last-child { width: 20px; height: 20px; flex: none; }
.bb .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 20px; color: var(--n-900); }
.bb .tx small { font-size: 12px; line-height: 20px; color: #1F2937; }
.bb .tx b { font-size: 16px; line-height: 24px; font-weight: 600; }
.bb .sep { display: block; height: 1px; background: #ECEDF3; }
.all-bills { padding: 20px 22.333px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.all-bills .bill-card { width: 320px; }
.all-bills .bill-card .acts { width: auto; }

.sm-top.seam { margin-bottom: -1px; position: relative; }

/* ───────────── Deposits tab (1428:7970) ───────────── */
.scr-deposits { background: #fff; padding-bottom: 114px; }
.dep-fold { padding: 64px 0 62.533px; display: flex; flex-direction: column; gap: 35.733px; align-items: center; background: linear-gradient(-70.48deg, #0E346B 0%, #080326 100%); }
.dep-fold > div:first-child { width: 402px; display: flex; flex-direction: column; gap: 8.933px; }
.dep-hdr { display: flex; justify-content: space-between; align-items: flex-start; padding: 11.167px 22.333px 8.933px; }
.dep-hdr h1 { font-size: 26.8px; line-height: 35.733px; font-weight: 600; letter-spacing: -.536px; color: #fff; }
.dep-hdr .r { display: flex; gap: 17.867px; align-items: center; }
.dep-hdr .gift { width: 35.733px; height: 35.733px; border-radius: 100px; display: block; }
.dep-tabs { display: flex; }
.dep-tabs button { position: relative; width: 201px; padding-top: 17.867px; height: 58.733px; font-size: 15.63px; line-height: 22.333px; color: #9CA3AF; text-align: center; }
.dep-tabs button::before, .dep-tabs button::after { content: ""; position: absolute; left: 0; right: 0; background: rgba(255,255,255,.2); transition: background .25s; }
.dep-tabs button::before { bottom: 0; height: 2.233px; border-radius: 2px; transform: scaleY(0); transform-origin: bottom; transition: transform .25s, background .25s; }
.dep-tabs button::after { bottom: 0; height: 1.117px; }
.dep-tabs button.on { color: #fff; font-weight: 600; }
.dep-tabs button.on::before { background: #4F6FDF; transform: none; }
.dep-tabs button.on::after { background: #4F6FDF; }
.dep-body { width: 359.567px; display: flex; flex-direction: column; gap: 35.733px; align-items: center; }
.dep-total { width: 178.667px; display: flex; flex-direction: column; gap: 8.933px; align-items: center; }
.dep-total span { font-size: 15.63px; line-height: 22.333px; color: #9CA3AF; white-space: nowrap; }
.dep-total p { font-size: 26.8px; line-height: 35.733px; font-weight: 600; letter-spacing: -.536px; color: #fff; white-space: nowrap; }
.dep-total p b { font-weight: 600; }
.dep-total p small { font-size: 17.867px; }
.dep-cards { width: 357.333px; display: flex; gap: 17.867px; }
.dep-card { position: relative; width: 169.733px; height: 195.633px; border-radius: 13.4px; padding: 17.867px 8.933px 8.933px; display: flex; flex-direction: column; gap: 17.867px; }
.dep-card.solid { background: linear-gradient(180deg, #101733 0%, rgba(37,48,86,.7) 100%); border: 1.117px solid #1F2937; }
.dep-card .dash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dep-card .dash rect { fill: none; stroke: #D2D5DB; stroke-width: 1.117; stroke-dasharray: 1.117 4.467; stroke-linecap: round; }
.dep-card .ic { padding: 0 8.933px; height: 44.667px; }
.dep-card .ic img { width: 44.667px; height: 44.667px; }
.dep-card .tx { display: flex; flex-direction: column; gap: 2.233px; width: 151.867px; }
.dep-card .tx > span { font-size: 13.4px; line-height: 22.333px; color: #9CA3AF; }
.dep-card .tx b { font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: #fff; white-space: nowrap; }
.dep-card .tx b span { font-weight: 600; }
.dep-card .tx b small { font-size: 13.4px; }
.dep-card button { margin-top: auto; height: 40.2px; border: 1.117px solid #4D71FF; border-radius: 11.167px; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: #4D71FF; transition: background .2s; }
.dep-card button:active { background: rgba(77,113,255,.14); }
.dep-open { display: flex; flex-direction: column; gap: 35.733px; align-items: center; }
.open-fd { display: flex; gap: 13.4px; align-items: center; padding: 15.633px 22.333px; border-radius: 14.517px; background: #4F6FDF; color: #fff; font-size: 17.867px; line-height: 26.8px; font-weight: 600; transition: transform .12s; }
.open-fd:active { transform: scale(.97); }
.open-fd img { width: 22.333px; height: 22.333px; }
.dep-open .rates { font-size: 15.633px; line-height: 22.333px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.dep-sheet { background: #fff; padding: 0 22.333px 22.333px; display: flex; flex-direction: column; gap: 35.733px; }
.dep-sheet > section { display: flex; flex-direction: column; gap: 22.333px; }
.dep-sheet > section[data-slot="dep-list"] { gap: 0; }
.dep-head { display: flex; justify-content: space-between; align-items: center; height: 26.8px; margin-bottom: 22.333px; }
.dep-head p, .dep-h { font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--n-900); }
.dep-h small { display: block; margin-top: 2.233px; font-size: 15.633px; line-height: 22.333px; font-weight: 400; color: #4B5563; }
.dep-head button { display: flex; gap: 8.933px; align-items: center; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--primary); }
.dep-head button img { width: 17.867px; height: 17.867px; }
.dep-list { display: flex; flex-direction: column; gap: 17.867px; }
.dep-item { width: 357.333px; display: flex; flex-direction: column; gap: 8.933px; padding: 13.4px 17.867px; background: #fff; border: 1.117px solid #ECEDF3; border-radius: 13.4px; text-align: left; overflow: hidden; transition: border-color .2s, transform .12s; }
.dep-item:active { transform: scale(.99); border-color: var(--primary-400); }
.dl-top { display: flex; gap: 8.933px; align-items: center; height: 22.333px; }
.dl-tag { padding: 0 13.4px 0 17.867px; margin-left: -17.867px; background: #F5F6FB; font-size: 11.167px; line-height: 22.333px; font-weight: 600; letter-spacing: .125px; color: #4F6FDF; text-transform: uppercase; white-space: nowrap; }
.dl-acct { font-size: 13.4px; line-height: 22.333px; color: #6B7280; }
.dl-main { display: flex; justify-content: space-between; align-items: center; gap: 22.333px; height: 27px; }
.dl-amt { display: flex; gap: 5.583px; align-items: baseline; white-space: nowrap; }
.dl-amt b { font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--n-900); }
.dl-amt b small { font-size: 13.4px; }
.dl-amt em, .dl-amt i { font-style: normal; font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: var(--n-900); }
.dl-amt i { font-weight: 400; color: #6B7280; margin-left: -2px; }
.dl-main img { width: 22.333px; height: 22.333px; }
.dl-bar { display: block; height: 6.7px; border-radius: 111.667px; background: #F5F6FB; margin-top: 4.467px; overflow: hidden; }
.dl-bar i { display: block; height: 100%; border-radius: 13.4px; background: #4F6FDF; }
.dl-foot { display: flex; justify-content: space-between; font-size: 13.4px; line-height: 22.333px; color: #4B5563; margin-top: -4.467px; }
.dep-new { position: relative; margin-top: 22.333px; width: 357.333px; padding: 17.867px; border-radius: 13.4px; background: #1430AD; display: flex; flex-direction: column; gap: 13.4px; text-align: left; overflow: hidden; transition: transform .12s; }
.dep-new:active { transform: scale(.985); }
.dep-new .rs { width: 35.733px; height: 35.733px; border-radius: 50%; background: #D0DDFC; display: grid; place-items: center; }
.dep-new .rs span { font-size: 25px; font-weight: 500; line-height: 1; color: var(--primary); }
.dep-new .tx { display: flex; flex-direction: column; gap: 2.233px; position: relative; }
.dep-new .tx span { font-size: 13.4px; line-height: 22.333px; color: #fff; }
.dep-new .tx b { font-size: 26.8px; line-height: 35.733px; font-weight: 500; letter-spacing: -.268px; color: #fff; }
.dep-new .wm { position: absolute; left: 197.65px; top: -31.27px; width: 170.56px; text-align: center; font-size: 190.61px; line-height: 231px; color: #fff; opacity: .05; pointer-events: none; }
.dep-viewall { margin-top: 17.867px; height: 44.867px; display: flex; gap: 13.4px; align-items: center; justify-content: center; font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--primary); }
.dep-viewall img { width: 22.333px; height: 22.333px; }
.ql-row, .ss-row, .gs-row { display: flex; gap: 17.867px; margin-right: -22.333px; padding-right: 22.333px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.ql-row::-webkit-scrollbar, .ss-row::-webkit-scrollbar, .gs-row::-webkit-scrollbar { display: none; }
.ql { flex: none; width: 149.633px; min-height: 98.6px; padding: 13.4px; border: 1.117px solid #F5F6FB; border-radius: 13.4px; background: #F9FAFF; display: flex; flex-direction: column; justify-content: space-between; gap: 4.467px; text-align: left; scroll-snap-align: start; transition: border-color .2s; }
.ql:active { border-color: var(--primary-400); }
.ql > img { width: 22.333px; height: 22.333px; }
.ql > span { display: flex; gap: 8.933px; align-items: flex-end; justify-content: space-between; }
.ql b { width: 91.567px; font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: var(--n-900); }
.ql span img { width: 22.333px; height: 22.333px; flex: none; }
.ss-card { position: relative; flex: none; width: 312.667px; height: 276.933px; border-radius: 13.4px; background: #F3F6FD; overflow: hidden; scroll-snap-align: start; }
.ss-card .corner { position: absolute; right: 0; top: 0; width: 89.333px; height: 89.333px; }
.ss-card .piggy { position: absolute; left: 232.27px; top: 13.4px; width: 67px; height: 67px; }
.ss-card .tag { position: absolute; left: 17.867px; top: 17.867px; padding: 2.233px 8.933px; border-radius: 6.7px; background: #7454F2; font-size: 13.4px; line-height: 22.333px; font-weight: 500; color: #fff; white-space: nowrap; }
.ss-card .t { position: absolute; left: 17.867px; top: 55.83px; font-size: 20.1px; line-height: 26.8px; font-weight: 600; letter-spacing: -.2px; color: var(--n-900); }
.ss-card .d { position: absolute; left: 17.867px; top: 84.87px; font-size: 13.4px; line-height: 22.333px; color: #374151; white-space: nowrap; }
.ss-card .rule { position: absolute; left: 13.4px; top: 125.07px; width: 285.867px; border-top: 1.117px dashed #D2D5DB; }
.ss-card .k { position: absolute; top: 142.93px; font-size: 13.4px; line-height: 22.333px; color: #6B7280; }
.ss-card .v { position: absolute; top: 165.27px; font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--n-900); }
.ss-card .k1, .ss-card .v1 { left: 17.867px; }
.ss-card .k2, .ss-card .v2 { left: 171.967px; }
.ss-card .v1 { color: #00875F; }
.ss-card .b1, .ss-card .b2 { position: absolute; top: 214.4px; height: 44.867px; border-radius: 11.167px; font-size: 17.867px; line-height: 26.8px; font-weight: 600; transition: transform .12s; }
.ss-card .b1 { left: 17.867px; width: 145.167px; background: var(--primary); color: #fff; }
.ss-card .b2 { left: 171.967px; width: 122.833px; border: 1.117px solid var(--primary); color: var(--primary); background: #fff; }
.ss-card .b1:active, .ss-card .b2:active { transform: scale(.97); }
.gs-row { align-items: flex-start; gap: 22.333px; }
.gs-rd { position: relative; flex: none; width: 214.4px; height: 321.6px; border-radius: 13.4px; background: #F5F6FB; scroll-snap-align: start; }
.gs-rd .il { position: absolute; left: 17.867px; top: 35.733px; width: 121.717px; height: 80.4px; }
.gs-rd .tx { position: absolute; left: 17.867px; top: 142.93px; width: 178.667px; display: flex; flex-direction: column; gap: 2.233px; }
.gs-rd .tx b { font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--n-900); }
.gs-rd .tx span { font-size: 13.4px; line-height: 22.333px; color: #555; }
.gs-rd .tx em { margin-top: 6.7px; font-style: normal; font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: #108A06; }
.gs-rd button { position: absolute; left: 17.867px; top: 259.07px; width: 178.667px; height: 44.867px; border-radius: 11.167px; background: var(--primary); color: #fff; display: flex; gap: 13.4px; align-items: center; justify-content: center; font-size: 17.867px; line-height: 26.8px; font-weight: 600; }
.gs-rd button img { width: 22.333px; height: 22.333px; }
.gs-col { flex: none; width: 214.4px; display: flex; flex-direction: column; gap: 17.467px; scroll-snap-align: start; }
.gs-own { height: 89.733px; padding: 17.867px; border-radius: 13.4px; background: #F9FAFB; display: flex; gap: 8.933px; align-items: center; text-align: left; }
.gs-own b { width: 147.4px; font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--primary); }
.gs-own img, .gs-rate .lk img, .gs-passion .lk img { width: 22.333px; height: 22.333px; flex: none; }
.gs-rate { position: relative; height: 214.4px; border-radius: 13.4px; background: #F5F6FB; text-align: left; }
.gs-rate .y { position: absolute; left: 1.117px; top: 1.117px; width: 212.167px; height: 152.983px; border-radius: 13.4px; background: #FEC93B; padding: 17.867px; display: flex; flex-direction: column; gap: 10.05px; }
.gs-rate .y img { width: 71.467px; height: 62.533px; }
.gs-rate .y b { width: 159px; font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: var(--n-900); }
.gs-rate .lk, .gs-passion .lk { position: absolute; left: 17.867px; top: 174.2px; width: 177.933px; display: flex; justify-content: space-between; align-items: center; font-size: 15.633px; line-height: 22.333px; font-weight: 600; color: var(--primary); }
.gs-passion { position: relative; flex: none; width: 285.867px; height: 321.6px; border-radius: 13.4px; background: #F5F6FB; text-align: left; scroll-snap-align: start; }
.gs-passion .v { position: absolute; left: 1.117px; top: 1.437px; width: 283.633px; height: 262.417px; border-radius: 12.283px; background: #583DD0; padding: 13.4px 21.217px; display: flex; flex-direction: column; }
.gs-passion .v img { width: 111.667px; height: 111.667px; margin-bottom: 8.933px; }
.gs-passion .v b { font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: #fff; }
.gs-passion .v span { width: 225.567px; font-size: 13.4px; line-height: 22.333px; color: #ECEDF3; }
.gs-passion .v em { margin-top: 8.933px; font-style: normal; font-size: 13.4px; line-height: 22.333px; font-weight: 600; color: #57DB9A; }
.gs-passion .lk { top: 281.4px; width: 245.67px; }
.upi-bar { width: 100%; background: #F3F6FD; padding: 6.7px 22.333px; display: flex; gap: 2.233px; align-items: center; justify-content: center; font-size: 13.4px; line-height: 22.333px; color: var(--primary); }
.upi-bar > img:first-child { width: 22.333px; height: 22.333px; margin-right: 6.7px; }
.upi-bar b { font-weight: 600; }
.upi-bar .ch { width: 17.867px; height: 17.867px; }
.all-deps { padding: 20px 22.333px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.all-deps .dep-h { align-self: flex-start; }

/* Open FD flow */
.ofd { padding: 20px 22.333px; display: flex; flex-direction: column; gap: 14px; }
.ofd-card { background: #fff; border: 1px solid var(--n-200); border-radius: 13.4px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ofd-card .lbl { font-size: 13px; font-weight: 500; color: var(--n-600); }
.amt-in { display: flex; align-items: center; gap: 4px; border-bottom: 1.5px solid var(--n-200); padding-bottom: 6px; }
.amt-in:focus-within { border-color: var(--primary-400); }
.amt-in span { font-size: 28px; font-weight: 600; color: var(--n-900); }
.amt-in input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 28px; font-weight: 600; letter-spacing: -.4px; color: var(--n-900); background: none; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; padding: 10px 6px; border: 1px solid var(--n-200); border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background .2s, border-color .2s; }
.seg button b { font-size: 14px; font-weight: 600; color: var(--n-900); }
.seg button span { font-size: 11.5px; color: var(--n-500); }
.seg button.on { background: var(--primary-50); border-color: var(--primary); }
.seg button.on b { color: var(--primary); }
.seg.two button { align-items: flex-start; padding: 10px 12px; }
.ofd-sum { margin-top: 0; background: #fff; }
.ofd .cta { margin-top: 4px; }
.two-btn { display: flex; gap: 10px; margin-top: 18px; }
.two-btn .cta { flex: 1; }
.cta.ghost.danger { color: #E22853; border-color: #F3B5C4; }
.rates-t { margin-top: 14px; }
.sheet .rates-t + .cta { margin-top: 18px; }
.faq { margin-top: 14px; display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--n-100); padding: 12px 0; }
.faq summary { list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--n-900); display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary); font-weight: 500; font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--n-600); }
.dep-card button, .ss-card .b1, .ss-card .b2 { display: flex; align-items: center; justify-content: center; text-align: center; }
.gs-rate .y b { width: auto; white-space: nowrap; }

/* ───────────── Cards tab (designed; no Figma frame) ───────────── */
.scr-cards { background: #fff; padding-bottom: 130px; }
.cards-head { padding: 64px 0 62.533px; background: linear-gradient(-70.48deg, #0E346B 0%, #080326 100%); display: flex; flex-direction: column; }
.card-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 41px 4px; scrollbar-width: none; }
.card-rail::-webkit-scrollbar { display: none; }
.plastic { position: relative; flex: none; width: 320px; height: 200px; border-radius: 18px; padding: 18px 20px; scroll-snap-align: center; color: #fff; text-align: left; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 34px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .2s, filter .35s; }
.plastic:active { transform: scale(.985); }
.plastic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 110% -10%, rgba(255,255,255,.22), transparent 55%), radial-gradient(90% 70% at -20% 120%, rgba(255,255,255,.08), transparent 60%); pointer-events: none; }
.plastic.regalia { background: linear-gradient(135deg, #2A2A33 0%, #0E0E12 55%, #3A3326 100%); }
.plastic.regalia .pc-top span { color: #E9C987; }
.plastic.millennia { background: linear-gradient(135deg, #4F6FDF 0%, #1C3FCA 45%, #7454F2 100%); }
.plastic.debit { background: linear-gradient(135deg, #0E346B 0%, #1C3FCA 60%, #4BB3F6 130%); }
.pc-top { position: relative; display: flex; justify-content: space-between; align-items: baseline; }
.pc-top b { font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.pc-top span { font-size: 13px; font-weight: 600; letter-spacing: .02em; opacity: .95; }
.chip-ic { position: relative; margin-top: 22px; width: 42px; height: 31px; border-radius: 6px; background: linear-gradient(135deg, #F3D98B, #C79B3F 60%, #EED89A); overflow: hidden; }
.chip-ic i { position: absolute; inset: 7px 12px; border: 1px solid rgba(90,60,10,.4); border-radius: 3px; }
.chip-ic::before, .chip-ic::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(90,60,10,.35); }
.chip-ic::after { top: 0; bottom: 0; left: 50%; width: 1px; height: auto; }
.pc-num { position: relative; margin-top: 18px; font-size: 18px; letter-spacing: .14em; font-weight: 500; font-variant-numeric: tabular-nums; }
.pc-foot { position: relative; margin-top: auto; display: flex; gap: 22px; align-items: flex-end; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.pc-foot small { display: block; font-size: 7.5px; font-weight: 500; letter-spacing: .1em; opacity: .7; margin-bottom: 2px; }
.net { margin-left: auto; }
.net.mc { display: flex; }
.net.mc i { width: 26px; height: 26px; border-radius: 50%; background: #EB001B; }
.net.mc i + i { margin-left: -10px; background: rgba(247,158,27,.92); }
.net.visa { font-size: 20px; font-style: italic; font-weight: 800; letter-spacing: 0; }
.net.rupay { font-size: 15px; font-weight: 800; font-style: italic; letter-spacing: 0; }
.net.rupay em { color: #F99F35; font-style: normal; margin-left: 1px; }
.frost { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .02em; background: rgba(157,196,245,.35); backdrop-filter: blur(3px) saturate(.6); -webkit-backdrop-filter: blur(3px) saturate(.6); opacity: 0; transition: opacity .35s; pointer-events: none; }
.plastic.frozen { filter: saturate(.35); }
.plastic.frozen .frost { opacity: 1; }
.rail-dots { display: flex; gap: 6.7px; justify-content: center; margin-top: 14px; }
.rail-dots i { width: 8px; height: 8px; border-radius: 8px; background: rgba(255,255,255,.3); transition: width .3s, background .3s; }
.rail-dots i.on { width: 24px; background: #fff; }
.card-sum { margin: 20px 22.333px 0; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.cs-row { display: flex; justify-content: space-between; }
.cs-row div { display: flex; flex-direction: column; gap: 2px; }
.cs-row div:last-child { text-align: right; }
.cs-row span { font-size: 12.5px; color: #9CA3AF; }
.cs-row b { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.2px; color: #fff; }
.cs-row b small { font-size: 14px; }
.cs-bar { margin-top: 12px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.cs-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #4F6FDF, #8FA6FF); transition: width .5s var(--ease); }
.cs-due { margin-top: 10px; font-size: 12.5px; color: #D2D5DB; }
.cs-due b { color: #fff; font-weight: 600; }
.cs-acts { display: flex; gap: 10px; margin-top: 14px; }
.cs-acts button { flex: 1; height: 44px; border-radius: 11.167px; font-size: 15px; font-weight: 600; transition: transform .12s; }
.cs-acts button:active { transform: scale(.97); }
.cs-pay { background: #4F6FDF; color: #fff; }
.cs-pay:disabled { background: rgba(0,135,95,.85); }
.cs-ghost { border: 1.117px solid #4D71FF; color: #fff; }
.cards-body { background: #fff; padding: 4px 22.333px 12px; display: flex; flex-direction: column; gap: 28px; }
.cd-sec { display: flex; flex-direction: column; gap: 14px; }
.cd-h { display: flex; justify-content: space-between; align-items: center; }
.cd-h p { font-size: 17.867px; line-height: 26.8px; font-weight: 600; color: var(--n-900); }
.cd-h button { font-size: 14px; font-weight: 600; color: var(--primary); }
.frz-pill { padding: 2px 10px; border-radius: 20px; background: #EAF4FF; color: #0967D8; font-size: 12px; font-weight: 600; }
.ctl-list { border: 1px solid var(--n-200); border-radius: 16px; overflow: hidden; }
.ctl { width: 100%; display: flex; gap: 12px; align-items: center; padding: 13px 14px; text-align: left; border-top: 1px solid var(--n-100); background: #fff; transition: opacity .25s, background .2s; }
.ctl:first-child { border-top: 0; }
.ctl:active { background: var(--n-50); }
.ctl.dis { opacity: .45; }
.ctl .ci { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-50); display: grid; place-items: center; flex: none; }
.ctl:first-child .ci { background: #EAF4FF; }
.ctl .tx, .rw .tx, .txn .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ctl .tx b { font-size: 14.5px; line-height: 20px; font-weight: 600; color: var(--n-900); }
.ctl .tx span { font-size: 12px; line-height: 17px; color: var(--n-500); }
.ctl .toggle.on { background: var(--primary); }
.ctl:first-child .toggle.on { background: #0967D8; }
.lim-card { border: 1px solid var(--n-200); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.lim .lr, .sl .lr { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.4px; color: var(--n-600); }
.lim .lr b, .sl .lr b { font-size: 14px; font-weight: 600; color: var(--n-900); }
.lim .lr b small { font-weight: 400; color: var(--n-500); font-size: 12px; }
.lb { margin-top: 8px; height: 6.7px; border-radius: 10px; background: #F5F6FB; overflow: hidden; }
.lb i { display: block; height: 100%; border-radius: 10px; background: #4F6FDF; transition: width .5s var(--ease); }
.lb.off { background: repeating-linear-gradient(-45deg, #F5F6FB 0 6px, #ECEDF3 6px 12px); }
.cq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cq-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px; border: 1.117px solid var(--n-300); border-radius: 16px; font-size: 12px; line-height: 16px; color: var(--n-700); text-align: center; transition: background .2s, border-color .2s; }
.cq-grid button:active { background: var(--primary-50); border-color: var(--primary-400); }
.txn-list { display: flex; flex-direction: column; }
.txn { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--n-100); }
.txn:last-child { border-bottom: 0; }
.txn .av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; flex: none; }
.txn .tx b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--n-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txn .tx span { font-size: 12px; line-height: 17px; color: var(--n-500); }
.txn .amt { font-size: 14.5px; font-weight: 600; color: var(--n-900); white-space: nowrap; }
.txn .amt.in { color: var(--success); }
.txn-list.in-sheet { margin-top: 10px; }
.tx-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--n-500); border: 1px dashed var(--n-300); border-radius: 14px; }
.rw { width: 100%; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: linear-gradient(110deg, #7454F2, #4F6FDF); text-align: left; color: #fff; }
.rw .ci { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.rw .tx span { font-size: 12.5px; opacity: .85; }
.rw .tx b { font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.rw .go { padding: 8px 14px; border-radius: 10px; background: #fff; color: var(--primary); font-size: 13.4px; font-weight: 600; }
.pay-opts { display: flex; gap: 10px; margin-top: 18px; }
.po { flex: 1; padding: 12px 14px; border: 1px solid var(--n-200); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; transition: border-color .2s, background .2s; }
.po span { font-size: 12px; color: var(--n-500); }
.po b { font-size: 18px; font-weight: 700; color: var(--n-900); }
.po.on { border-color: var(--primary); background: var(--primary-50); }
.sliders { margin-top: 18px; display: flex; flex-direction: column; gap: 20px; }
.sl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin-top: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--primary) var(--v, 0%), var(--n-200) var(--v, 0%)); outline: none; }
.sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 2px 6px rgba(28,63,202,.3); cursor: pointer; }
.sl input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); cursor: pointer; }
.pin-boxes { display: flex; gap: 14px; justify-content: center; margin: 22px 0 18px; }
.pin-boxes i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--n-300); transition: background .15s, border-color .15s, transform .15s; }
.pin-boxes i.f { background: var(--primary); border-color: var(--primary); transform: scale(1.1); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { height: 52px; border-radius: 12px; background: var(--n-100); font-size: 22px; font-weight: 500; color: var(--n-900); }
.keypad button:active { background: var(--n-200); }
.cta.danger-fill { background: #E22853; margin-top: 18px; }
.seg.emi { margin-top: 18px; }
.cs-acts button { display: flex; align-items: center; justify-content: center; text-align: center; }
.toast { white-space: normal; width: max-content; max-width: 350px; line-height: 18px; }

/* ───────────── Supporting sheets & screens ───────────── */
.purpose-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.purpose { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--n-200); border-radius: 12px; background: #fff; font-size: 12px; line-height: 15px; color: var(--n-700); text-align: center; transition: border-color .2s, background .2s; }
.purpose .s-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.purpose .s-ic img { width: 20px; height: 20px; }
.purpose.sel { border-color: var(--primary); background: var(--primary-50); color: var(--primary); font-weight: 600; }
.reqs { display: flex; flex-direction: column; gap: 12px; }
.req { background: #fff; border: 1px solid var(--n-200); border-radius: 14px; overflow: hidden; }
.req-h { width: 100%; display: flex; gap: 10px; align-items: center; padding: 14px; text-align: left; }
.req-h .tx { flex: 1; display: flex; flex-direction: column; }
.req-h .tx b { font-size: 14.5px; font-weight: 600; color: var(--n-900); }
.req-h .tx span { font-size: 12px; color: var(--n-500); }
.req-h .chev { width: 20px; height: 20px; transition: transform .25s; }
.req.open .req-h .chev { transform: rotate(90deg); }
.req-b { display: none; padding: 0 14px 14px; }
.req.open .req-b { display: block; }
.req-b .box { border: 0; padding: 0; background: none; }
.dialog { position: absolute; left: 22px; right: 22px; top: 50%; transform: translate(0, -46%) scale(.96); opacity: 0; background: #fff; border-radius: 20px; padding: 22px; text-align: center; transition: transform .3s var(--ease), opacity .25s; }
.overlay.open .dialog { transform: translate(0, -50%); opacity: 1; }
.dialog h3 { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--n-900); margin-top: 12px; }
.dialog .sub { font-size: 13.4px; line-height: 20px; color: var(--n-600); margin-top: 6px; }
.d-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--primary-50); display: inline-grid; place-items: center; }
.d-ic.warn { background: #FDECEF; }
.d-ic img { width: 24px; height: 24px; }
.d-acts { display: flex; gap: 10px; margin-top: 18px; }
.d-acts .cta { flex: 1; margin: 0; }
.panel { position: absolute; inset: 0; background: var(--n-50); transform: translateX(100%); transition: transform .38s var(--ease); display: flex; flex-direction: column; padding-top: 58px; }
.overlay.open .panel { transform: none; }
.panel-h { display: flex; align-items: center; gap: 12px; padding: 10px 22px 14px; }
.panel-h h3 { flex: 1; font-size: 20px; font-weight: 600; color: var(--n-900); }
.panel-h .lnk { font-size: 13.4px; font-weight: 600; color: var(--primary); }
.circle-btn.light { background: #fff; border: 1px solid var(--n-200); }
.notes { flex: 1; overflow-y: auto; padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.note { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--n-200); text-align: left; }
.note.unread { border-color: var(--primary-100); background: #fff; }
.note.unread::before { content: ""; position: absolute; left: 6px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); }
.note .n-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--primary-50); display: grid; place-items: center; flex: none; }
.note .n-ic img { width: 20px; height: 20px; }
.note .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.note .tx b { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--n-900); }
.note .tx span { font-size: 12.5px; line-height: 17px; color: var(--n-500); margin-top: 2px; }
.note em { font-style: normal; font-size: 11.5px; color: var(--n-500); white-space: nowrap; }
.notes-empty { margin: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.notes-empty .e-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--primary); display: grid; place-items: center; }
.notes-empty b { font-size: 16px; color: var(--n-900); }
.notes-empty p { font-size: 13px; color: var(--n-500); }
.clear-notes { margin: 12px 16px 120px; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--n-600); background: #fff; border: 1px solid var(--n-200); }
.call-top { display: flex; gap: 14px; align-items: center; }
.call-av { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; }
.call-av.bank { background: var(--primary-50); display: grid; place-items: center; }
.call-av.bank img { width: 26px; height: 26px; }
.call-live { margin-top: 16px; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #E9F7F1; color: var(--success); font-size: 14px; }
.call-live b { flex: 1; font-weight: 600; }
.call-live .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--success); animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,135,95,.5); } 100% { box-shadow: 0 0 0 10px rgba(0,135,95,0); } }
.route-map { position: relative; margin-top: 16px; height: 150px; border-radius: 14px; overflow: hidden; }
.route-map > img { width: 100%; height: 100%; object-fit: cover; }
.route-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route { fill: none; stroke: #1C3FCA; stroke-width: 4; stroke-linecap: round; }
.route-map .me { position: absolute; left: 30px; top: 116px; width: 14px; height: 14px; border-radius: 50%; background: #1C3FCA; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(28,63,202,.2); }
.route-map .dest { position: absolute; left: 288px; top: 8px; }
.route-map .dest img { width: 26px; height: 26px; }
.seg.modes { margin-top: 14px; }
.eta { margin-top: 10px; font-size: 13px; color: var(--n-600); }
.eta b { color: var(--n-900); }
.lockscreen { position: absolute; inset: 0; z-index: 90; background: linear-gradient(-65deg, #0E346B 20%, #080326 120%); display: grid; place-items: center; opacity: 0; transition: opacity .35s; border-radius: inherit; }
.lockscreen.on { opacity: 1; }
.lk-in { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; text-align: center; }
.lk-logo { font-size: 26px; font-weight: 700; letter-spacing: -.4px; }
.lk-hi { margin-top: 20px; font-size: 16px; font-weight: 600; }
.lk-sub { font-size: 13.4px; color: #9CA3AF; }
.lk-fp { margin-top: 34px; width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; }
.lk-btn { margin-top: 18px; padding: 12px 28px; border-radius: 12px; background: #4F6FDF; color: #fff; font-weight: 600; }
.acct-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.acct { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--n-200); border-radius: 12px; text-align: left; }
.acct .tx { flex: 1; display: flex; flex-direction: column; }
.acct .tx b { font-size: 14.5px; font-weight: 600; color: var(--n-900); }
.acct .tx span { font-size: 12.5px; color: var(--n-500); }
.acct .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--n-300); }
.acct.on { border-color: var(--primary); background: var(--primary-50); }
.acct.on .radio { border: 6px solid var(--primary); }

/* Embed mode: hide the badge Netlify injects on free-plan sites so the iframe shows only the phone. */
html.is-embed #nl-badge-frame, body.embed #nl-badge-frame, html.is-embed [id^="nl-badge"], body.embed [id^="nl-badge"] { display: none !important; }