:root {
  --purple: #4527d6;
  --purple-2: #5a2ff0;
  --violet: #6b47f5;
  --lav: #eeeafe;
  --lav-2: #e8e6f8;
  --ink: #111;
  --grey: #555;
  --page: #f2f2f7;
  --orange: #f7891f;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --nav-h: 49px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; background: #fff; }
.hidden { display: none !important; }
.wordmark { font-family: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; font-weight: 600; letter-spacing: -0.3px; }
.mont { font-family: 'Montserrat', sans-serif; }

/* Sizes below are iOS points measured from the owner's DigiLocker screenshots (440pt-wide iPhone).
   DigiLocker is a native app, so like it we keep the same sizes on every phone width. */

/* ---------- Splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 50;
  background: linear-gradient(100deg, #6a3dff 0%, #5a31ec 45%, #4423cf 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 48px;
  color: #fff; transition: opacity .35s ease;
}
.splash.out { opacity: 0; pointer-events: none; }
.splash .logo { width: 86px; height: 86px; }
.splash .wordmark { font-size: 42.6px; line-height: 1; margin-top: -4px; }
.splash .tag {
  position: absolute; left: 0; right: 0; bottom: calc(37px + var(--safe-bot));
  text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 19px; line-height: 27px; color: rgba(255,255,255,.78);
}
.splash .tag::after { content: ''; display: block; width: 40px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.55); margin: 11px auto 0; }

/* ---------- Home ---------- */
.home { padding-bottom: calc(var(--nav-h) + var(--safe-bot) + 14px); background: #fff; font-family: 'Open Sans', sans-serif; }
.hero { position: relative; color: #fff; padding-top: max(calc(var(--safe-top) - 19px), 12px); }
.hero-bg { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 86px); background: #4123d0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 94px), 79.5% calc(100% - 34px), 0 100%); }
.hero > :not(.hero-bg) { position: relative; }
.brandbar { display: flex; align-items: center; padding-left: 30px; height: 24px; }
.brandbar .emblem { width: 16px; height: 24px; }
.brandbar .logo { width: 30px; height: 30px; margin-left: 4px; }
.brandbar .wordmark { font-size: 24.3px; line-height: 1; margin-left: 0; position: relative; top: -2px; }
.welcome { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 21px; margin-top: 23px; }
.welcome h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 23.05px; margin: 0; line-height: 1.2; letter-spacing: -.1px; position: relative; top: 2.6px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; flex: none; background: #ddd center/cover no-repeat; }
.welcome .avatar { width: 50px; height: 50px; border-width: 2.5px; }
.hero .par { font-size: 15px; line-height: 20.7px; margin: 26px 21px 0; max-width: 330px; }
.issued-head { display: flex; align-items: center; justify-content: space-between; padding: 0 15px 0 16px; margin-top: 15px; height: 39px; }
.issued-head h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17.2px; margin: 0; }
.pill-see { background: #d9d3f6; color: #4123d0; border: 1px solid #a8a3b5; border-radius: 20px; width: 80px; height: 39px; font-family: 'Open Sans', sans-serif; font-size: 12.8px; }
.doc-strip { display: flex; gap: 20px; overflow-x: auto; padding: 18px 0 3px 20px; scroll-snap-type: x mandatory; scroll-padding-left: 20px; scrollbar-width: none; }
.doc-strip::-webkit-scrollbar { display: none; }
.doc-strip::after { content: ''; flex: 0 0 1px; }
.dcard {
  flex: 0 0 310px; height: 165px; background: #fff; border-radius: 7px; scroll-snap-align: start;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); position: relative; overflow: hidden; text-align: left; color: #000;
}
.dcard .dlogo { position: absolute; left: 16px; top: 32px; width: 70px; height: 47px; display: flex; align-items: center; justify-content: center; }
.dcard .dlogo svg { max-width: 100%; max-height: 100%; }
.dcard .t { position: absolute; left: 96px; top: 20.6px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; }
.dcard .n { position: absolute; left: 96.3px; top: 49.7px; font-size: 14.6px; line-height: 1; color: #797676; letter-spacing: .3px; white-space: nowrap; }
.dcard .iss { position: absolute; left: 30px; right: 30px; top: 104px; font-size: 13.3px; color: #797676; text-align: center; line-height: 17.7px; z-index: 1; }
.dcard .wm { position: absolute; right: 0; top: 83px; width: 100px; height: 67px; opacity: .1; display: flex; justify-content: center; }
.dcard .wm svg { height: 100%; width: auto; }

.wallet {
  margin: 27px 16px 0 14px; height: 159px; border-radius: 10px; background: #f2ecff; border: 1px solid #e6dafe;
  position: relative; overflow: hidden;
}
.wallet .fp { position: absolute; left: 207px; top: -80px; width: 320px; opacity: .3; }
.wallet .txt { position: absolute; left: 16.5px; top: 0; z-index: 1; }
.wallet h3 { margin: 27.6px 0 0; color: #4123d0; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 15.8px; line-height: 1; white-space: nowrap; }
.wallet p { margin: 10px 0 0; font-size: 14.1px; line-height: 1; color: #3b3b3b; white-space: nowrap; }
.btn-primary { background: #4511f2; color: #fff; border-radius: 22px; padding: 10px 15px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; }
.wallet .btn-primary { position: absolute; left: 0; top: 94px; width: 169px; height: 41px; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 13.3px; border-radius: 21px; box-shadow: 0 3px 6px rgba(69,17,242,.25); white-space: nowrap; }
.vc-stack { position: absolute; left: 279px; top: 23px; width: 160px; height: 120px; }
.vc-stack .s { position: absolute; left: 0; right: 0; height: 109px; border-radius: 6px; }
.vc-stack .s1 { top: 11px; left: 13px; background: #c4b3fb; }
.vc-stack .s2 { top: 5px; left: 6px; background: #a688fb; }
.vc { position: absolute; top: 0; left: 0; right: 0; height: 109px; border-radius: 6px; background: linear-gradient(135deg, #6c2df3, #5a1fe9); color: #fff; overflow: hidden; white-space: nowrap; }
.vc .logo { position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; }
.vc .vt { position: absolute; left: 45px; top: 13px; font-size: 7.9px; line-height: 1; }
.vc .vsub { position: absolute; left: 45px; top: 26px; font-size: 6.2px; line-height: 1; opacity: .85; }
.vc .vsub i { display: inline-block; width: 6px; height: 6px; background: #e9f7ee url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2 5.2l2 2 4-4.4%27 fill=%27none%27 stroke=%27%2334a853%27 stroke-width=%271.6%27/%3E%3C/svg%3E") center/100% no-repeat; border-radius: 1.5px; margin-left: 6px; vertical-align: -1px; }
.vc .lbl { position: absolute; left: 12.5px; font-size: 5.5px; line-height: 1; opacity: .85; }
.vc .val { position: absolute; left: 12.5px; font-size: 8.3px; line-height: 1; }
.dots { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; transform: translate(1px, 4px); }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 1px rgba(0,0,0,.1); }

.utility { background: #fafafa; margin-top: 22px; padding: 15px 16px 20px; }
.utility h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17.4px; line-height: 1; color: #2f2f2f; margin: 2px 0 17px; }
.ugrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 17px; }
.utile { position: relative; background: #f3f3f3; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.1); height: 94px; text-align: left; }
.utile svg { position: absolute; left: 13px; top: 8px; width: 30px; height: 30px; }
.utile span { position: absolute; left: 10px; right: 6px; top: 35.3px; bottom: 0; display: flex; align-items: center; font-size: 15.4px; color: #434343; line-height: 20px; }

/* bottom nav */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 480px; margin: 0 auto;
  background: #fff; height: calc(var(--nav-h) + var(--safe-bot)); padding-bottom: var(--safe-bot);
  display: flex; align-items: flex-start;
}
.bnav .it { width: 88px; flex: none; display: flex; flex-direction: column; align-items: center; padding-top: 6px; font-family: 'Inter', -apple-system, sans-serif; font-weight: 500; font-size: 10.3px; line-height: 1; color: #000; }
.bnav .it svg { width: 24px; height: 24px; margin-bottom: 7px; }
.bnav .it.on { color: #673ffd; }
.bnav .umang { position: absolute; right: 0; top: 2px; width: 70px; height: 46px; background: #f58321; color: #fff; border-radius: 10px 0 0 10px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .3px; }

/* ---------- Subpages ---------- */
.sub { min-height: 100vh; min-height: 100dvh; background: var(--page); padding-bottom: calc(var(--nav-h) + var(--safe-bot) + 10px); }
.topbar { position: sticky; top: 0; z-index: 10; background: #fafafa; padding: max(calc(var(--safe-top) - 18px), 0px) 30px 0 22px; height: calc(max(calc(var(--safe-top) - 18px), 0px) + 46px); display: flex; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.topbar .back { width: 18px; height: 32px; display: flex; align-items: center; justify-content: flex-start; flex: none; }
.topbar .back svg { width: 20px; height: 20px; position: relative; top: -2.5px; overflow: visible; }
.topbar h1 { flex: 1; margin: 0 0 0 20.3px; position: relative; top: -2px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16.5px; color: #2f2f2f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .avatar { width: 41px; height: 41px; border: 2.5px solid #4cc35a; margin-top: -5px; }

.paper { display: flow-root; background: #fff; margin: 10px 10px 0; border-radius: 5px; box-shadow: 0 2px 12px rgba(0,0,0,.14); }
.dyk { background: #e9e8f9; margin: 10px 10px 0; border-radius: 10px; padding: 21.4px 8px 17px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.dyk .q { font-size: 12px; line-height: 1; color: #737276; }
.dyk .a { font-size: 14px; color: #555; margin-top: 14px; line-height: 16px; }
.tell { display: flex; align-items: center; justify-content: center; gap: 10px; color: #536dfe; font-size: 12.9px; padding: 22px 11px 25px 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; }
.tell svg { width: 28.7px; height: 28.7px; color: #333; }

.docbar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 20; background: #fff; height: calc(var(--nav-h) + var(--safe-bot)); padding-bottom: var(--safe-bot); display: flex; align-items: center; }
.docbar button { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; color: #333; }
.docbar svg { width: 24px; height: 24px; }
.docbar svg.dh { width: 23.4px; height: 24.3px; margin-left: 1px; }
.docbar svg.dl { width: 18px; height: 21.6px; }

/* Pawdhaar card */
.aad { font-family: 'Inter', -apple-system, sans-serif; color: #17202a; }
.aad .band { margin: 15px 30px 0 15px; height: 65px; background: #fafafa; display: flex; align-items: flex-start; padding-left: 30px; }
.aad .band .emblem { width: 33px; height: 52px; margin-top: 8px; flex: none; }
.aad .band .gov { width: 177px; height: 26px; margin: 18px 0 0 30px; flex: none; }
.aad .band .alogo { width: 68px; height: 45px; margin: 8px 0 0 5px; flex: none; }
.aad .main { display: flex; padding: 16px 15px 30px; }
.aad .photo { width: 80px; height: 100px; background: #ddd center/cover no-repeat; flex: none; }
.aad .main .f { padding-left: 10px; }
.aad .nm { font-size: 16.1px; line-height: 1; font-weight: 500; margin-top: 1px; }
.aad .dt { font-size: 12px; line-height: 1; margin-top: 14.3px; }
.aad .gd { font-size: 12px; line-height: 1; margin-top: 11.3px; }
.aad .no { font-size: 18.45px; line-height: 1; font-weight: 500; margin-top: 12.4px; letter-spacing: .3px; }
.aad .addr { border-top: 1px solid #e3e3e3; padding: 11px 15px 10px; margin: 0; }
.aad .addr b { display: block; font-size: 11px; line-height: 1; font-weight: 600; }
.aad .addr div { font-size: 11.9px; margin-top: 11.3px; line-height: 14.3px; }
.aad .foot { border-top: 1px solid #e3e3e3; margin: 0 10px; height: 106px; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 18px 0 16px; }
.aad .foot .powered { width: 184px; height: 76px; margin: -1px 0 0 -3px; }
.qrbox { display: flex; flex-direction: column; align-items: center; font-size: 11.25px; line-height: 1; font-weight: 600; color: #17202a; white-space: nowrap; }
.aad .qrbox { margin-top: 3px; width: 68px; }
.qr { width: 68px; height: 68px; image-rendering: pixelated; margin-bottom: 13.3px; }
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.aad .slogan { position: relative; height: 59px; margin-top: 10px; }
.aad .slogan::before { content: ''; position: absolute; left: 52px; width: 316px; top: 0; border-top: 1px solid #e53935; }
.aad .slogan::after { content: ''; position: absolute; left: 399px; top: -1px; height: 45px; border-left: 1px solid #c62828; }
.aad .slogan span.s { position: absolute; left: 0; right: 8px; top: 11.3px; text-align: center; font-family: 'Noto Sans Devanagari', sans-serif; font-weight: 500; font-size: 25.1px; line-height: 1.1; word-spacing: 7px; color: #000; }
.aad .slogan .r { color: #f00; }
.powered { width: 162px; height: 68px; display: block; }

/* DL / table docs */
.tbl { font-family: 'Inter', -apple-system, sans-serif; color: #17202a; }
.tbl .head { position: relative; height: 73px; margin: 0 10px; border-bottom: 1px solid #d3d3d3; }
.tbl .head .emblem { position: absolute; left: 16px; top: 12px; width: 36px; height: 58px; }
.tbl .head h2 { position: absolute; left: 50px; right: 0; top: 33px; margin: 0; text-align: center; font-size: 15.3px; line-height: 1; font-weight: 600; color: #000; }
.tbl .rows { padding: 11px 6px 4px 11px; }
.tbl .r { display: grid; grid-template-columns: 120px 35px 1fr; align-items: center; padding: 5.15px 0; }
.tbl .r .k { font-size: 13.35px; font-weight: 600; line-height: 16.7px; }
.tbl .r .c { font-size: 13.35px; font-weight: 600; text-align: center; line-height: 16.7px; }
.tbl .r .v { font-size: 11.8px; line-height: 14.2px; text-transform: uppercase; }
.tbl .r .v.keep { text-transform: none; }
.tbl .mid { border-top: 1px solid #e3e3e3; display: flex; justify-content: space-between; padding: 10px 40px 0 29px; }
.tbl .mid .qrbox { margin-top: 5px; width: 91px; }
.tbl .mid .qr { width: 91px; height: 91px; margin-bottom: 11px; }
.tbl .mid .photo { width: 80px; height: 100px; background: #ddd center/cover no-repeat; }
.tbl .pw { display: flex; justify-content: center; padding: 19.5px 0 21px; }
.tbl .pw .powered { width: 205px; height: 86px; }
.vtab { margin: 4px 11px 10px; border: 1px solid #e3e3e3; border-radius: 3px; font-size: 13px; width: calc(100% - 22px); border-collapse: collapse; }
.vtab th { background: #f5f4fd; text-align: left; font-weight: 600; padding: 7px 8px; font-size: 13px; }
.vtab td { padding: 7px 8px; border-top: 1px solid #eee; text-transform: uppercase; }
/* list pages */
.list { padding: 9px 0; }
.lrow { display: flex; align-items: center; gap: 12px; background: #fff; margin: 0 9px 9px; border-radius: 6px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1); width: calc(100% - 18px); text-align: left; }
.lrow .dlogo { width: 52px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.lrow .dlogo svg { max-width: 100%; max-height: 100%; }
.lrow .m { flex: 1; min-width: 0; }
.lrow .t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; }
.lrow .s { font-size: 11.5px; color: #666; margin-top: 3px; }
.lrow .chev { color: #999; }
.lrow .avatar { width: 44px; height: 44px; border: 0; }
.lrow.on { outline: 2px solid var(--purple-2); }
.secttl { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #444; margin: 14px 18px 8px; }
.search-in { margin: 12px 9px 4px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 22px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.search-in input { border: 0; outline: 0; flex: 1; font-size: 15px; background: transparent; }
.search-in svg { width: 20px; height: 20px; color: #777; }
.empty { text-align: center; color: #777; font-size: 13px; padding: 40px 20px; }

/* menu */
.mhead { background: var(--purple); color: #fff; padding: calc(var(--safe-top) + 22px) 18px 22px; display: flex; align-items: center; gap: 14px; }
.mhead .avatar { width: 60px; height: 60px; }
.mhead .nm { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; }
.mhead .s { font-size: 12.5px; opacity: .9; margin-top: 3px; }
.mitem { display: flex; align-items: center; gap: 14px; width: 100%; background: #fff; padding: 15px 18px; border-bottom: 1px solid #eee; font-size: 14.5px; text-align: left; }
.mitem svg { width: 22px; height: 22px; color: var(--purple); flex: none; }
.mitem.danger, .mitem.danger svg { color: #c62828; }
.fineprint { font-size: 11px; color: #888; text-align: center; padding: 18px 26px; line-height: 1.5; }

/* form */
.form { padding: 4px 0 30px; }
.fsec { background: #fff; margin: 10px 9px 0; border-radius: 8px; padding: 6px 14px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fsec h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--purple); margin: 10px 0 4px; }
.fld { display: block; margin-top: 12px; }
.fld > span { display: block; font-size: 11.5px; color: #666; margin-bottom: 5px; font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; border: 1px solid #d9d9e3; border-radius: 6px; padding: 10px 11px; font-size: 15px; background: #fff; color: #111; -webkit-appearance: none; appearance: none; }
.fld textarea { min-height: 64px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid #b7a8fa; border-color: var(--purple-2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two .fld { min-width: 0; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; margin-top: 10px; }
.chk input { width: 18px; height: 18px; accent-color: var(--purple-2); }
.photo-pick { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.photo-pick .ph { width: 72px; height: 90px; border-radius: 4px; background: #eee center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #999; font-size: 26px; flex: none; }
.btn-out { border: 1.5px solid var(--purple-2); color: var(--purple-2); border-radius: 20px; padding: 8px 16px; font-weight: 600; font-size: 13px; }
.vrow { display: grid; grid-template-columns: 1.3fr 1fr 1fr 26px; gap: 6px; align-items: end; margin-top: 8px; }
.vrow input { width: 100%; border: 1px solid #d9d9e3; border-radius: 6px; padding: 9px 7px; font-size: 13.5px; min-width: 0; background: #fff; }
.vrow .x { color: #c62828; font-size: 20px; height: 38px; }
.vhd { display: grid; grid-template-columns: 1.3fr 1fr 1fr 26px; gap: 6px; font-size: 11px; color: #666; margin-top: 10px; }
.addv { margin-top: 12px; color: var(--purple-2); font-weight: 600; font-size: 13px; }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; background: #fff; padding: 10px 14px calc(10px + var(--safe-bot)); box-shadow: 0 -1px 6px rgba(0,0,0,.08); z-index: 20; }
.savebar .btn-primary { width: 100%; padding: 14px; font-size: 14.5px; border-radius: 26px; }

/* welcome (no pets yet) */
.intro { min-height: 100vh; min-height: 100dvh; background: linear-gradient(160deg, #6a3dff 0%, #4423cf 100%); color: #fff; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 40px) 26px calc(var(--safe-bot) + 30px); }
.intro .logo { width: 56px; height: 56px; }
.intro .wordmark { font-size: 34px; margin-top: 6px; }
.intro h1 { font-family: 'Montserrat', sans-serif; font-size: 25px; line-height: 1.3; margin: 40px 0 12px; }
.intro p { font-size: 14.5px; line-height: 1.5; opacity: .92; margin: 0 0 12px; }
.intro .grow { flex: 1; }
.btn-white { background: #fff; color: var(--purple); border-radius: 26px; padding: 15px; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; }
.intro ul { padding-left: 18px; margin: 6px 0 0; font-size: 14px; line-height: 1.8; opacity: .95; }

/* shared view banner */
.sharedbar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-bot)); max-width: 480px; margin: 0 auto; z-index: 19; background: #1f1449; color: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; font-size: 12.5px; }
.sharedbar span { flex: 1; line-height: 1.35; }
.sharedbar button { background: var(--orange); color: #fff; border-radius: 16px; padding: 7px 12px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.has-sharedbar { padding-bottom: calc(var(--nav-h) + var(--safe-bot) + 64px) !important; }

/* sheets / modals */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.sheet { background: #fff; width: 100%; max-width: 480px; border-radius: 16px 16px 0 0; padding: 10px 0 calc(16px + var(--safe-bot)); max-height: 85vh; overflow: auto; animation: up .22s ease-out; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: #ddd; margin: 0 auto 10px; }
.sheet h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; margin: 4px 18px 12px; }
.sheet .lrow { box-shadow: none; border: 1px solid #eee; }
.zoom { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; animation: fade .2s; }
.zoom .box { background: #fff; padding: 22px; border-radius: 10px; text-align: center; }
.zoom .qr { width: 260px; height: 260px; }
.zoom .cap { font-size: 12px; color: #666; margin-top: 12px; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }

.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-bot) + 20px); transform: translateX(-50%) translateY(20px); background: #222; color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 80; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }