/* phone.css — the in-game handset. Everything is scoped under #modal.phone-mode (or the .pdev device), so non-phone sheets are untouched.
   Layers: device chrome (titanium frame, bezel, island, status) → wallpaper → home / lock / Control Center / search → iOS-style app screens. */

@property --sk0 { syntax: '<color>'; inherits: true; initial-value: #4FB4FF; }
@property --sk1 { syntax: '<color>'; inherits: true; initial-value: #8ED3FF; }
@property --sk2 { syntax: '<color>'; inherits: true; initial-value: #D9F3FF; }
@property --sea0 { syntax: '<color>'; inherits: true; initial-value: #17B7C8; }
@property --sea1 { syntax: '<color>'; inherits: true; initial-value: #19D1CF; }
@property --sea2 { syntax: '<color>'; inherits: true; initial-value: #4BE6D3; }
@property --sea3 { syntax: '<color>'; inherits: true; initial-value: #8FF3E0; }
@property --sh0 { syntax: '<color>'; inherits: true; initial-value: #7FF2E2; }
@property --sh1 { syntax: '<color>'; inherits: true; initial-value: #D9FFF2; }
@property --sa0 { syntax: '<color>'; inherits: true; initial-value: #F7E9C4; }
@property --sa1 { syntax: '<color>'; inherits: true; initial-value: #E6C98E; }
@property --isl { syntax: '<color>'; inherits: true; initial-value: #5FA3A8; }
@property --pl { syntax: '<color>'; inherits: true; initial-value: #134D37; }

#modal.phone-mode {
  --pd-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif;
  --pd-bg: #F2F2F7; --pd-card: #fff; --pd-sep: rgba(60, 60, 67, .16); --pd-label: #000; --pd-label2: rgba(60, 60, 67, .62);
  --pd-tint: #007AFF; --pd-green: #34C759; --pd-red: #FF3B30;
  --pd-top: calc(54px + env(safe-area-inset-top, 0px));
  --pd-spring: cubic-bezier(.2, .9, .25, 1.04);
  /* re-map the game's tokens so existing screens inherit the system look */
  --nl-ink: #000; --nl-ink-2: rgba(60, 60, 67, .85); --nl-ink-3: rgba(60, 60, 67, .6); --nl-line: var(--pd-sep); --nl-line-2: rgba(120, 120, 128, .32);
  --nl-surface: #fff; --nl-surface-2: #F2F2F7; --nl-teal: #1E8E3E; --nl-teal-soft: rgba(0, 122, 255, .1); --nl-owed: #FF3B30;
}
#modal.phone-mode, #modal.phone-mode * { font-family: var(--pd-font); }
#modal.phone-mode .scrim { background: radial-gradient(120% 90% at 50% 40%, rgba(6, 14, 34, .5), rgba(2, 6, 16, .82)); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ================= device ================= */
.pdev { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; overflow: hidden; z-index: 1; }
#modal.phone-mode .pdev { display: grid; }
.pd-body {
  position: relative; width: 417px; height: 876px; padding: 4px; border-radius: 60px; pointer-events: auto; flex: none;
  transform: scale(var(--ps, 1));
  background: linear-gradient(145deg, #e3e0d9 0%, #9b978f 16%, #efece6 34%, #78746d 52%, #c7c3bb 74%, #8a867f 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .5), 0 30px 60px rgba(0, 0, 0, .5), 0 60px 120px rgba(0, 10, 30, .5), inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 6px rgba(0, 0, 0, .35);
}
.pd-body::before { /* anisotropic edge highlight */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none; z-index: 3;
  background: conic-gradient(from 205deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .08) 16%, rgba(255, 255, 255, .7) 34%, rgba(255, 255, 255, .04) 52%, rgba(255, 255, 255, .8) 72%, rgba(255, 255, 255, .12) 88%, rgba(255, 255, 255, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pd-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #8d8981, #d6d2ca 50%, #8d8981); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5); }
.b-act { left: -3px; top: 128px; height: 32px; } .b-vu { left: -3px; top: 192px; height: 58px; } .b-vd { left: -3px; top: 262px; height: 58px; } .b-pw { right: -3px; top: 220px; height: 96px; }
.pd-bezel { width: 100%; height: 100%; padding: 8px; border-radius: 56px; background: #050507; box-shadow: inset 0 0 0 1px #202024, inset 0 0 0 3px #0a0a0c; }
.pd-screen { position: relative; width: 393px; height: 852px; border-radius: 48px; overflow: hidden; background: #0a2a3c; isolation: isolate; color: #fff; contain: layout paint; }
.pd-glare { position: absolute; inset: 0; z-index: 16; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(0deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, 0)); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pd-x { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; pointer-events: auto; color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); left: calc(50% + 218px * var(--ps, 1)); top: calc(50% - 438px * var(--ps, 1) + 6px); transition: background .2s, transform .2s; }
.pd-x:hover { background: rgba(255, 255, 255, .3); transform: scale(1.06); } .pd-x svg { width: 18px; height: 18px; }

/* ================= wallpaper ================= */
.pd-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; transition: --sk0 2.2s, --sk1 2.2s, --sk2 2.2s, --sea0 2.2s, --sea1 2.2s, --sea2 2.2s, --sea3 2.2s, --sh0 2.2s, --sh1 2.2s, --sa0 2.2s, --sa1 2.2s, --isl 2.2s, --pl 2.2s; background: var(--sk2); }
.pd-wall[data-tod="day"] { --sk0: #3FA9FF; --sk1: #86D0FF; --sk2: #D6F2FF; --sea0: #14AFC6; --sea1: #17CBCF; --sea2: #49E3D3; --sea3: #92F3E1; --sh0: #7DF0E0; --sh1: #DCFFF3; --sa0: #F8EBC8; --sa1: #E5C78A; --isl: #5EA6AB; --pl: #124A35; }
.pd-wall[data-tod="dawn"] { --sk0: #5876C8; --sk1: #F3A6B9; --sk2: #FFDCAA; --sea0: #3A8CB0; --sea1: #5AB7C6; --sea2: #8DD4CE; --sea3: #C3EAD6; --sh0: #A9E5DC; --sh1: #F2F0DA; --sa0: #F7DEB6; --sa1: #D8B484; --isl: #7A8FB2; --pl: #1B3B33; }
.pd-wall[data-tod="dusk"] { --sk0: #38378C; --sk1: #D9688C; --sk2: #FFB36E; --sea0: #28598F; --sea1: #3E84A6; --sea2: #58B0B6; --sea3: #8DD5C6; --sh0: #70C3C1; --sh1: #CAE7CF; --sa0: #E6B88B; --sa1: #B88C62; --isl: #5A4E86; --pl: #1C1A2E; }
.pd-wall[data-tod="night"] { --sk0: #050A22; --sk1: #111946; --sk2: #2A3A78; --sea0: #0A2A54; --sea1: #0D3F66; --sea2: #11607A; --sea3: #1A8591; --sh0: #12607F; --sh1: #1E8C93; --sa0: #5B5A72; --sa1: #3B3C55; --isl: #111A3C; --pl: #040F0C; }
.wl { position: absolute; inset: -4% -6%; will-change: transform; transform: translate3d(0, 0, 0) scale(1.08); }
.wl svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wl-sky { background: linear-gradient(180deg, var(--sk0) 0%, var(--sk1) 26%, var(--sk2) 43%, var(--sk2) 100%); }
.wl-sky .sun { position: absolute; left: 60%; top: 14%; width: 190px; height: 190px; margin: -95px; border-radius: 50%; background: radial-gradient(circle, #fff 0 14%, rgba(255, 244, 190, .95) 18%, rgba(255, 226, 140, .4) 36%, rgba(255, 220, 130, 0) 68%); transition: top 2s, opacity 2s, filter 2s; }
.pd-wall[data-tod="dawn"] .sun { top: 36%; filter: hue-rotate(-18deg); } .pd-wall[data-tod="dusk"] .sun { top: 38%; filter: hue-rotate(-36deg) saturate(1.3); } .pd-wall[data-tod="night"] .sun { top: 50%; opacity: 0; }
.wl-sky .moon { position: absolute; left: 30%; top: 12%; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fff, #e6e9ff 60%, #b9c0ee); box-shadow: 0 0 40px 10px rgba(190, 200, 255, .35); opacity: 0; transition: opacity 2s; }
.pd-wall[data-tod="night"] .moon { opacity: 1; }
.wl-sky .stars { position: absolute; inset: 0 0 50% 0; opacity: 0; transition: opacity 2s;
  background: radial-gradient(1.4px 1.4px at 12% 10%, #fff, transparent 70%), radial-gradient(1px 1px at 24% 22%, #fff, transparent 70%), radial-gradient(1.6px 1.6px at 41% 8%, #fff, transparent 70%), radial-gradient(1px 1px at 55% 24%, #fff, transparent 70%), radial-gradient(1.4px 1.4px at 71% 14%, #fff, transparent 70%), radial-gradient(1px 1px at 86% 26%, #fff, transparent 70%), radial-gradient(1.2px 1.2px at 92% 8%, #fff, transparent 70%), radial-gradient(1px 1px at 8% 32%, #fff, transparent 70%), radial-gradient(1.2px 1.2px at 63% 36%, #fff, transparent 70%), radial-gradient(1px 1px at 35% 34%, #fff, transparent 70%); }
.pd-wall[data-tod="night"] .stars { opacity: .95; } .pd-wall[data-tod="dusk"] .stars { opacity: .25; }
.wl-sky .clouds { position: absolute; left: 0; top: 4%; width: 100%; height: 36%; opacity: .9; filter: blur(2px); transition: opacity 2s; } .pd-wall[data-tod="night"] .clouds { opacity: .12; } .pd-wall[data-tod="dusk"] .clouds, .pd-wall[data-tod="dawn"] .clouds { opacity: .7; }
.wl-isle .isle { fill: var(--isl); opacity: .85; } .wl-isle .isle2 rect { fill: var(--isl); opacity: .95; } .wl-isle svg { filter: blur(.4px); }
.wl-near .palm, .wl-palm .palm { fill: var(--pl); }
.wl-palm .palm path:first-child { stroke: var(--pl); }
.wl-shade { position: absolute; inset: 0; transform: none !important; background: linear-gradient(180deg, rgba(0, 12, 34, .30) 0%, rgba(0, 12, 34, 0) 24%, rgba(0, 12, 34, 0) 58%, rgba(2, 16, 40, .34) 100%); }
.wl-shade::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); transition: opacity .2s; }
.pd-screen.torch-on .pd-wall { filter: brightness(1.22) saturate(1.1); }

/* ================= status bar, island, home indicator ================= */
.pd-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 12; display: flex; justify-content: space-between; align-items: center; padding: 6px 34px 0 46px; color: #fff; pointer-events: none; font-weight: 600; letter-spacing: .1px; transition: color .25s; }
.pd-screen[data-tone="dark"] .pd-status { color: #000; }
.sb-time { font-size: 17px; font-variant-numeric: tabular-nums; }
.sb-r { display: flex; align-items: center; gap: 6px; } .sb-r svg { fill: currentColor; height: 12.5px; width: auto; display: block; }
.sb-bat { position: relative; width: 26px; height: 12.5px; border-radius: 4px; box-shadow: inset 0 0 0 1px currentColor; opacity: .98; margin-right: 1px; padding: 2px; }
.sb-bat::after { content: ""; position: absolute; right: -3px; top: 4px; width: 1.6px; height: 4.5px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .55; }
.sb-bat i { display: block; height: 100%; border-radius: 2px; background: currentColor; transition: width .6s; } .sb-bat.low i { background: #FF453A; }
.pd-screen.airplane .sb-sig, .pd-screen.airplane .sb-wifi { opacity: .25; }
.pd-island { position: absolute; z-index: 13; top: 11px; left: 50%; translate: -50% 0; width: 124px; height: 36px; border-radius: 20px; background: #000; color: #fff; overflow: hidden; cursor: pointer; transition: width .55s var(--pd-spring), height .55s var(--pd-spring), border-radius .55s, box-shadow .3s; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .06); }
.pd-island.has { width: 156px; } .pd-island.open { width: min(369px, calc(100% - 24px)); height: 78px; border-radius: 39px; }
.pd-island.alert { box-shadow: 0 0 0 1.5px rgba(255, 69, 58, .85), 0 0 18px rgba(255, 69, 58, .45); animation: pdAlert 1.4s ease-in-out infinite; }
.isl-c, .isl-e { position: absolute; inset: 0; display: flex; align-items: center; transition: opacity .25s; }
.isl-c { padding: 0 9px; justify-content: space-between; opacity: 0; } .pd-island.has .isl-c { opacity: 1; } .pd-island.open .isl-c { opacity: 0; }
.isl-c .ic .ico, .isl-e .ic .ico { width: 24px; height: 24px; box-shadow: none; } .isl-c .dot { display: none; }
.isl-c .rg svg { display: block; } .isl-c .tm { font-size: 12px; font-weight: 600; color: #5CF29B; }
.isl-e { padding: 0 18px 0 14px; gap: 12px; opacity: 0; pointer-events: none; transition-delay: 0s; } .pd-island.open .isl-e { opacity: 1; transition-delay: .14s; pointer-events: auto; }
.isl-e .ic .ico { width: 44px; height: 44px; } .isl-e .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.isl-e b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .isl-e i { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-e .tm { font-size: 15px; font-weight: 600; color: #5CF29B; font-variant-numeric: tabular-nums; } .pd-island.alert .isl-e .tm { color: #FF6B6B; }
.isl-e .rg svg { width: 30px; height: 30px; }
.pd-ccz { position: absolute; z-index: 14; top: 0; right: 0; width: 38%; height: 40px; cursor: pointer; }
.pd-home { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; height: 48px; display: grid; place-items: end center; cursor: pointer; touch-action: none; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px) * .3); }
.pd-home i { width: 138px; height: 5px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .25); transition: transform .2s, width .2s, background .25s; }
.pd-home:hover i, .pd-home.act i { transform: scaleX(1.08); } .pd-screen[data-tone="dark"] .pd-home i { background: #0b0b0c; box-shadow: none; }
@keyframes pdAlert { 50% { box-shadow: 0 0 0 1.5px rgba(255, 69, 58, .35), 0 0 6px rgba(255, 69, 58, .15); } }

/* ================= layers inside the screen ================= */
#modal.phone-mode #sheet {
  position: absolute; inset: 0; right: auto; bottom: auto; top: 0; left: 0; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none; animation: none; border: 0;
  background: var(--pd-bg); display: flex; flex-direction: column; z-index: 2; overflow: hidden; color: var(--pd-label);
}
#modal.phone-mode #sheet.phone { background: transparent; color: #fff; }
.pd-screen.is-locked #sheet { opacity: 0; visibility: hidden; }
.pd-screen.is-locked .pd-ghosts { display: none; }
.pd-ghosts { position: absolute; inset: 0; pointer-events: none; }
.pd-g { position: absolute; inset: 0; overflow: hidden; } .pd-g.g-app, .pd-g.g-over { z-index: 3; background: var(--pd-bg); } .pd-g.g-home { z-index: 1; } .pd-g.g-under { z-index: 1; background: var(--pd-bg); }
.pd-gw { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pd-gw.is-home { color: #fff; } .pd-g.g-app .pd-gw.is-home { background: transparent; }
.pd-g * { pointer-events: none !important; animation: none !important; }
#modal.phone-mode .scr > * { animation: none !important; }

/* ================= icons ================= */
.ico {
  position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 22.4%; overflow: hidden; flex: none;
  background: linear-gradient(158deg, var(--g1) 0%, var(--g2) 100%);
  box-shadow: 0 7px 14px rgba(5, 16, 44, .3), 0 1.5px 2.5px rgba(5, 16, 44, .32), inset 0 0 0 .5px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(0, 0, 0, .16);
  transition: transform .22s var(--pd-spring), filter .2s;
}
@supports (corner-shape: squircle) { .ico { corner-shape: squircle; border-radius: 34%; } }
.ico .gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .1) 44%, rgba(255, 255, 255, 0) 45%), radial-gradient(120% 70% at 50% 120%, rgba(255, 255, 255, .22), transparent 60%); }
.ico .gl { width: 70%; height: 70%; position: relative; overflow: visible; filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .3)); }
.gl .w { fill: #fff; } .gl .w5 { fill: #fff; fill-opacity: .58; } .gl .k { fill: var(--g2); } .gl .s { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.2; }
.papp { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; color: #fff; -webkit-tap-highlight-color: transparent; min-width: 0; }
.papp .lbl { font-size: 11.5px; font-weight: 500; letter-spacing: .05px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 8px rgba(0, 0, 0, .18); }
.papp:active .ico { scale: .9; filter: brightness(.82); animation: pdWig .26s ease-in-out infinite; }
.papp:focus-visible .ico, .wid:focus-visible, .hs-search:focus-visible { outline: 3px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
.papp .bdg { position: absolute; top: -7px; right: calc(50% - 41px); min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6.5px; background: linear-gradient(#FF5A4F, #FF2D20); color: #fff; font: 600 14px/22px var(--pd-font); font-style: normal; text-align: center; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .0), 0 3px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .4); animation: pdPop .5s var(--pd-spring) both; }
@keyframes pdWig { 0%, 100% { rotate: 0deg; } 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
@keyframes pdPop { from { scale: .2; opacity: 0; } }

/* ================= home screen ================= */
#modal.phone-mode .scr.hs { padding: 0; overflow: hidden; background: transparent; position: relative; display: flex; flex-direction: column; flex: 1; }
.hs-pages { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; cursor: default; }
.hs-pages::-webkit-scrollbar { display: none; } .hs-pages.drag { scroll-snap-type: none; cursor: grabbing; }
.hs-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: calc(var(--pd-top) + 6px) 20px 196px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.hs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 6px; justify-items: center; align-content: start; }
.hs-wid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wid { position: relative; height: var(--wh, 169px); border-radius: 26px; padding: 14px 15px; color: #fff; text-align: left; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 22px rgba(5, 18, 44, .26), inset 0 0 0 .5px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .25s var(--pd-spring), filter .2s; }
@supports (corner-shape: squircle) { .wid { corner-shape: squircle; border-radius: 40px; } }
.wid:active { scale: .96; filter: brightness(.9); }
.w-wx .wx-l { font-size: 15px; font-weight: 600; letter-spacing: .1px; } .w-wx .wx-t { font-size: 56px; font-weight: 300; line-height: 1.02; letter-spacing: -2px; margin-top: 2px; }
.w-wx .wx-i { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; } .w-wx .wx-c { margin-top: auto; font-size: 14px; font-weight: 600; } .w-wx .wx-h { font-size: 13.5px; opacity: .85; font-weight: 500; }
.w-cal { background: linear-gradient(165deg, #fff, #eef1f7); color: #111; } .w-cal .cd { font-size: 13px; font-weight: 700; color: #FF3B30; letter-spacing: .5px; } .w-cal .cn { font-size: 66px; font-weight: 300; line-height: 1; letter-spacing: -2.5px; margin-top: 2px; } .w-cal .cm { font-size: 14px; font-weight: 600; color: rgba(60, 60, 67, .6); text-transform: uppercase; letter-spacing: .6px; }
.w-cal .ce { margin-top: auto; display: flex; gap: 7px; align-items: flex-start; font-size: 13px; line-height: 16px; } .w-cal .ce i { width: 4px; align-self: stretch; border-radius: 2px; background: #FF3B30; flex: none; } .w-cal .ce b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-goal { background: linear-gradient(165deg, #FF9F5E, #E8336D 80%); gap: 5px; } .w-goal .wh2 { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; margin-bottom: 3px; } .w-goal .wh2 .gi { width: 20px; height: 20px; }
.w-goal .wh2 i { display: grid; place-items: center; width: 22px; height: 22px; } .w-goal .wh2 em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .25); border-radius: 9px; padding: 1px 7px; }
.w-goal .gi .w { fill: #fff; } .w-goal .gi .k { fill: #E8336D; } .w-goal .gr { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 15px; font-weight: 500; } .w-goal .gr b { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .w-goal .gr.d b { opacity: .7; text-decoration: line-through; text-decoration-thickness: 1px; } .w-goal .wr { flex: none; }
/* wallet widget = a mini face of the player's bank card; material classes (.bc-*) are defined with the Wallet card below */
.w-wal { color: var(--bc-ink, #fff); box-shadow: 0 10px 22px rgba(5, 18, 44, .26), inset 0 0 0 1px var(--bc-edge, rgba(255, 255, 255, .28)), inset 0 1px 0 var(--bc-lip, rgba(255, 255, 255, .35)); }
.w-wal .wal-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; position: relative; } .w-wal .wal-hd b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-wal .wal-hd em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; opacity: .85; flex: none; }
.w-wal .wrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; } .w-wal .wchip { width: 36px; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } .w-wal .bc-nfc { width: 18px; height: 18px; opacity: .8; }
.w-wal .wn { margin-top: auto; font-size: 25px; font-weight: 700; letter-spacing: -.5px; position: relative; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w-wal .wn.wn-long { font-size: 21px; letter-spacing: -.6px; } .w-wal .ws { font-size: 12.5px; opacity: .85; font-weight: 500; position: relative; }
.hs-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 12px 34px; pointer-events: none; }
.hs-foot > * { pointer-events: auto; }
.hs-dots { display: flex; gap: 8px; height: 8px; align-items: center; } .hs-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .42); transition: background .25s, scale .25s var(--pd-spring); } .hs-dots i.on { background: #fff; scale: 1.12; }
.hs-search { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; width: 150px; border-radius: 17px; background: rgba(255, 255, 255, .24); color: #fff; font-size: 14.5px; font-weight: 500; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); transition: opacity .25s, scale .2s; } .hs-search svg { width: 15px; height: 15px; } .hs-search.hide { opacity: 0; pointer-events: none; } .hs-search:active { scale: .96; }
.hs-dock { display: flex; justify-content: space-between; width: 100%; padding: 13px 16px; border-radius: 36px; background: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 12px 28px rgba(4, 14, 40, .22); }
.hs-dock .lbl { display: none; } .hs-dock .papp { gap: 0; } .hs-dock .bdg { right: calc(50% - 42px); }
.hs-lib .hs-find { display: flex; align-items: center; gap: 8px; height: 42px; width: 100%; padding: 0 14px; border-radius: 13px; background: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .92); font-size: 17px; font-weight: 400; text-align: left; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); } .hs-find svg { width: 17px; height: 17px; }
.lib-g { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.lib-t { display: flex; flex-direction: column; gap: 6px; } .lib-t > span { font-size: 12.5px; font-weight: 600; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.lib-i { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-radius: 26px; background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.papp.mini .ico { width: 100%; height: auto; aspect-ratio: 1; box-shadow: 0 3px 7px rgba(5, 16, 44, .25), inset 0 .5px 0 rgba(255, 255, 255, .55); } .papp.mini { width: 100%; } .papp.mini .bdg { top: -8px; right: -8px; min-width: 18px; height: 18px; font: 600 11px/18px var(--pd-font); padding: 0 4px; }

/* ================= lock screen ================= */
.pd-lock { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; padding: calc(var(--pd-top) + 4px) 18px 0; color: #fff; text-align: center; touch-action: none; cursor: pointer; background: linear-gradient(180deg, rgba(0, 8, 30, .28) 0%, rgba(0, 8, 30, 0) 34%, rgba(0, 8, 30, .06) 60%, rgba(0, 8, 30, .5) 100%); user-select: none; }
.pd-lock[hidden] { display: none; }
.lk-date { font-size: 20px; font-weight: 600; opacity: .94; letter-spacing: .15px; text-shadow: 0 1px 8px rgba(0, 0, 0, .18); }
.lk-time { font-size: 98px; font-weight: 700; line-height: 1.02; letter-spacing: -4px; font-variant-numeric: tabular-nums; margin-top: -2px; background: linear-gradient(180deg, #fff 8%, rgba(255, 255, 255, .72) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(0, 18, 50, .28)); }
.lk-n { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 28px; }
.lk-card { width: 100%; display: flex; gap: 11px; align-items: center; text-align: left; padding: 12px 13px; border-radius: 24px; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .38), 0 10px 26px rgba(0, 16, 48, .18); animation: pdCard .7s var(--pd-spring) both; animation-delay: calc(var(--i) * 80ms + 140ms); color: #fff; position: relative; }
.lk-card .ic .ico { width: 40px; height: 40px; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); } .lk-card .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lk-card b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 40px; } .lk-card i { font-style: normal; font-size: 14px; line-height: 18px; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lk-card em { position: absolute; right: 14px; top: 12px; font-style: normal; font-size: 12px; opacity: .72; } .lk-card:active { scale: .98; }
.lk-more { margin: -2px 14px 0; padding: 7px 12px; border-radius: 0 0 18px 18px; font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); animation: pdCard .7s var(--pd-spring) both; animation-delay: calc(var(--i) * 80ms + 140ms); }
.lk-bot { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 22px 52px; }
.lk-rd { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20, 28, 54, .4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); transition: scale .2s var(--pd-spring), background .2s; } .lk-rd svg { width: 22px; height: 22px; } .lk-rd:active { scale: .9; } .pd-lock.torch [data-lk="torch"] { background: #fff; color: #111; }
.lk-hint { font-size: 14px; font-weight: 500; opacity: .85; animation: pdHint 2.4s ease-in-out infinite; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); margin-top: 8px; }
@keyframes pdCard { from { opacity: 0; transform: translateY(22px) scale(.94); } } @keyframes pdHint { 50% { opacity: .4; transform: translateY(-3px); } }
@keyframes pdFlash { from { opacity: .9; } to { opacity: 0; } }

/* ================= Control Center ================= */
.pd-cc { position: absolute; inset: 0; z-index: 10; padding: calc(var(--pd-top) + 8px) 20px 0; background: rgba(30, 36, 58, .5); -webkit-backdrop-filter: blur(34px) saturate(1.6); backdrop-filter: blur(34px) saturate(1.6); opacity: 0; visibility: hidden; transform: scale(1.05) translateY(-16px); transition: opacity .28s, transform .55s var(--pd-spring), visibility 0s .55s; color: #fff; }
.pd-cc.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 80px; gap: 12px; }
.cc-t { border-radius: 26px; background: rgba(255, 255, 255, .17); color: #fff; position: relative; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: scale .2s var(--pd-spring), background .2s; }
.cc-t svg { width: 26px; height: 26px; } .cc-t small { font-size: 11px; font-weight: 500; opacity: .85; }
.cc-conn { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 12px; }
.cc-b { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: #fff; transition: background .2s, scale .2s var(--pd-spring); } .cc-b:active { scale: .9; } .cc-b.on { background: #0A84FF; } .cc-b.on.grn { background: #30D158; } .cc-b.on.air { background: #FF9F0A; } .cc-b svg { width: 25px; height: 25px; }
.cc-np { grid-column: span 2; grid-row: span 2; padding: 14px 14px 10px; align-items: flex-start; justify-content: flex-start; gap: 3px; }
.np-art { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: end center; padding-bottom: 8px; margin-bottom: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); } .np-art.off { background: rgba(255, 255, 255, .16); place-items: center; padding: 0; }
.cc-np b { font-size: 15px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-np > i { font-style: normal; font-size: 12.5px; opacity: .65; }
.np-c { margin-top: auto; width: 100%; display: flex; justify-content: space-between; } .np-c button { width: 40px; height: 34px; display: grid; place-items: center; border-radius: 10px; } .np-c button:active { background: rgba(255, 255, 255, .2); } .np-c svg { width: 22px; height: 22px; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; } .eq i { width: 4px; height: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; animation: pdEq 1s ease-in-out infinite; } .eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; } .eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes pdEq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.cc-sl { grid-row: span 2; touch-action: none; cursor: ns-resize; justify-content: flex-end; border-radius: 28px; } .cc-sl i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v, .5) * 100%); background: #fff; } .cc-sl span { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; color: #8A8F9C; display: grid; }
.cc-sq.on { background: #fff; color: #1c1c1e; } .cc-sq:active { scale: .94; }
.cc-spd { grid-column: span 4; flex-direction: row; justify-content: space-between; padding: 0 16px; gap: 12px; } .cc-spd b { font-size: 15px; font-weight: 600; }
.cc-seg { display: flex; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .26); gap: 2px; } .cc-seg button { height: 34px; padding: 0 13px; border-radius: 9px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .8); } .cc-seg button[aria-pressed="true"] { background: #fff; color: #111; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.cc-snap { grid-column: span 4; grid-row: span 2; padding: 0; } .cc-snap[hidden] { display: none; } .cc-snap .sn, .cc-snap .sn img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .cc-snap .sn span { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600; background: rgba(0, 0, 0, .45); border-radius: 10px; padding: 4px 9px; color: #fff; } .sn-wait { font-size: 14px; opacity: .8; }
.pd-flash { position: absolute; inset: 0; z-index: 15; background: #fff; pointer-events: none; animation: pdFlash .42s ease-out forwards; }

/* ================= search ================= */
.pd-sr { position: absolute; inset: 0; z-index: 9; padding: calc(var(--pd-top) - 4px) 0 0; background: rgba(14, 24, 52, .62); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .25s, transform .45s var(--pd-spring), visibility 0s .45s; color: #fff; display: flex; flex-direction: column; }
.pd-sr.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sr-bar { display: flex; gap: 12px; align-items: center; padding: 6px 16px 10px; } .sr-bar label { flex: 1; display: flex; align-items: center; gap: 7px; height: 38px; border-radius: 12px; padding: 0 11px; background: rgba(255, 255, 255, .2); } .sr-bar svg { width: 16px; height: 16px; opacity: .8; flex: none; }
.sr-bar input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 17px; height: 100%; } .sr-bar input::placeholder { color: rgba(255, 255, 255, .6); } .sr-c { color: #fff; font-size: 17px; }
.sr-l { flex: 1; overflow-y: auto; padding: 4px 16px 80px; scrollbar-width: none; } .sr-h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; opacity: .6; margin: 8px 6px; }
.sr-g { border-radius: 18px; background: rgba(255, 255, 255, .14); overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.sr-r { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; text-align: left; color: #fff; position: relative; } .sr-r + .sr-r::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: .5px; background: rgba(255, 255, 255, .22); }
.sr-r .ico { width: 38px; height: 38px; box-shadow: none; } .sr-r b { flex: 1; font-size: 17px; font-weight: 500; } .sr-r svg { width: 14px; height: 14px; opacity: .5; } .sr-r:active { background: rgba(255, 255, 255, .14); } .sr-e { padding: 40px 0; text-align: center; opacity: .7; }

/* ================= iOS-style app screens ================= */
#modal.phone-mode .scr.pd-scr { padding: 0 16px calc(46px + env(safe-area-inset-bottom, 0px)); background: var(--pd-bg); position: relative; scroll-behavior: auto; }
#modal.phone-mode .scr.pd-scr::-webkit-scrollbar { display: none; } #modal.phone-mode .scr.pd-scr { scrollbar-width: none; }
#modal.phone-mode .pd-nav { position: sticky; top: 0; z-index: 20; margin: 0 -16px; padding: calc(var(--pd-top) - 4px) 6px 0 4px; min-height: calc(var(--pd-top) + 40px); display: flex; align-items: center; gap: 4px; background: transparent; justify-content: flex-start; flex: none; }
#modal.phone-mode .pd-nav:has(.im-who) { min-height: calc(var(--pd-top) + 56px); }
#modal.phone-mode .pd-nav:has(.im-who) .mid { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; width: max-content; max-width: 60%; pointer-events: none; } /* contact name + avatar truly centred, independent of the Back label width */
#modal.phone-mode .pd-nav:has(.im-who) .im-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#modal.phone-mode .pd-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .2s; background: rgba(247, 247, 250, .78); -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9); box-shadow: 0 .5px 0 var(--pd-sep); }
#modal.phone-mode .pd-sc .pd-nav::before, #modal.phone-mode .pd-thread .pd-nav::before { opacity: 1; }
#modal.phone-mode .pd-nav .back { color: var(--pd-tint); font-size: 17px; font-weight: 400; padding: 8px 8px 8px 0; border-radius: 10px; gap: 0; z-index: 1; } #modal.phone-mode .pd-nav .back svg { width: 24px; height: 24px; margin-left: -2px; } #modal.phone-mode .pd-nav .back:active { opacity: .35; } #modal.phone-mode .pd-nav .back:hover { background: none; }
#modal.phone-mode .pd-nav .xbtn { display: none; }
#modal.phone-mode .pd-nav .mid { color: var(--pd-label2); font-size: 13px; text-align: center; min-width: 0; }
#modal.phone-mode .pd-nt { position: absolute; left: 50%; bottom: 11px; transform: translate(-50%, 6px); font-size: 17px; font-weight: 600; opacity: 0; max-width: 52%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .18s, transform .3s var(--pd-spring); color: var(--pd-label); pointer-events: none; }
#modal.phone-mode .pd-tin .pd-nt { opacity: 1; transform: translate(-50%, 0); }
#modal.phone-mode .fhero.pd-hero { margin: 0; padding: 0; background: none !important; color: var(--pd-label); border-radius: 0; overflow: visible; }
#modal.phone-mode .fhero.pd-hero::after { display: none; }
#modal.phone-mode .fhero .h1, #modal.phone-mode .h1 { color: var(--pd-label); }
#modal.phone-mode .fhero .sub, #modal.phone-mode .sub { color: var(--pd-label2); }
#modal.phone-mode .fhero .eyebrow, #modal.phone-mode .eyebrow { color: var(--pd-label2); }
#modal.phone-mode .h1 { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .35px; margin: 0 4px 4px; }
#modal.phone-mode .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; margin: 6px 4px 0; }
#modal.phone-mode .sub { font-size: 15px; line-height: 20px; margin: 0 4px 10px; }
#modal.phone-mode .sec { font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; color: var(--pd-label2); margin: 24px 16px 7px; }
#modal.phone-mode .sec a, #modal.phone-mode .sec button { color: var(--pd-tint); text-transform: none; font-size: 15px; }
#modal.phone-mode .list, #modal.phone-mode .card { border: 0; border-radius: 14px; background: var(--pd-card); box-shadow: none; }
#modal.phone-mode .row { position: relative; border-top: 0; min-height: 48px; padding: 10px 14px; gap: 12px; align-items: center; transition: background .15s; }
#modal.phone-mode .row + .row::before, #modal.phone-mode .im-row + .im-row::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: .5px; background: var(--pd-sep); }
#modal.phone-mode .row:has(.ic, .av) + .row::before { left: 56px; }
#modal.phone-mode button.row:active { background: rgba(60, 60, 67, .1); }
#modal.phone-mode .row.sel { background: var(--pd-card); }
#modal.phone-mode .row .ic { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(#5AC8FA, #0A84FF); color: #fff; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .5); } #modal.phone-mode .row .ic svg { width: 17px; height: 17px; }
#modal.phone-mode .row .tx b { font-size: 16.5px; font-weight: 500; line-height: 21px; letter-spacing: -.1px; } #modal.phone-mode .row .tx span { font-size: 13.5px; line-height: 18px; color: var(--pd-label2); }
#modal.phone-mode .row .rt { font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums; } #modal.phone-mode .row .rt.muted { font-size: 15px; color: var(--pd-label2); } #modal.phone-mode .row .rt small { font-size: 12px; }
#modal.phone-mode .row .chev { color: rgba(60, 60, 67, .3); } #modal.phone-mode .row .chev svg { width: 14px; height: 14px; stroke-width: 2.8; }
#modal.phone-mode .row .radio { width: 22px; height: 22px; border: 0; background: none; box-shadow: none; position: relative; } #modal.phone-mode .row .radio.on::after { content: ""; position: absolute; left: 6px; top: 1px; width: 7px; height: 14px; border: solid var(--pd-tint); border-width: 0 2.6px 2.6px 0; transform: rotate(40deg); } #modal.phone-mode .row .radio:not(.on) { display: none; } #modal.phone-mode .row .radio::before { display: none; }
#modal.phone-mode .av { box-shadow: none; }
#modal.phone-mode .toggle { width: 51px; height: 31px; border-radius: 16px; background: rgba(120, 120, 128, .32); transition: background .3s; } #modal.phone-mode .toggle::after { left: 2px; top: 2px; width: 27px; height: 27px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform .35s var(--pd-spring); } #modal.phone-mode .toggle[aria-checked="true"] { background: var(--pd-green); } #modal.phone-mode .toggle[aria-checked="true"]::after { transform: translateX(20px); }
#modal.phone-mode .seg { background: rgba(118, 118, 128, .12); padding: 2px; border-radius: 9px; margin: 6px 0; gap: 0; } #modal.phone-mode .seg button { height: 28px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--pd-label); transition: background .2s, box-shadow .2s; } #modal.phone-mode .seg button[aria-selected="true"] { background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); font-weight: 600; color: #000; }
#modal.phone-mode .row .seg { margin: 0; }
#modal.phone-mode .pd-cta { padding: 10px 16px calc(36px + env(safe-area-inset-bottom, 0px)); background: rgba(247, 247, 250, .82); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: 0 -.5px 0 var(--pd-sep); position: relative; z-index: 21; }
#modal.phone-mode .cta { height: 50px; border-radius: 14px; background: var(--pd-tint); color: #fff; font-size: 17px; font-weight: 600; box-shadow: none; transition: opacity .15s, scale .2s var(--pd-spring); } #modal.phone-mode .cta:hover { background: var(--pd-tint); } #modal.phone-mode .cta:active { opacity: .75; scale: .98; } #modal.phone-mode .cta.gold, #modal.phone-mode .cta.glow { background: var(--pd-tint); color: #fff; box-shadow: none; }
#modal.phone-mode .btn2 { border-radius: 12px; background: rgba(0, 122, 255, .12); color: var(--pd-tint); font-weight: 600; }
#modal.phone-mode .field input, #modal.phone-mode input.search { height: 44px; border-radius: 11px; background: #fff; font-size: 17px; box-shadow: none; border: 0; }
#modal.phone-mode .chip { border-radius: 10px; } #modal.phone-mode input[type=range] { accent-color: var(--pd-tint); }
#modal.phone-mode .empty, #modal.phone-mode .note { color: var(--pd-label2); }
#modal.phone-mode .ringmini svg circle:last-child { stroke-linecap: round; }

/* ---- Messages ---- */
#modal.phone-mode .scr.pd-scr.pd-thread { background: #fff; }
.im-who { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 500; color: var(--pd-label); width: 100%; } .im-who .av { width: 38px; height: 38px; font-size: 16px; } .im-who b { font-weight: 500; }
.im-th { display: flex; flex-direction: column; padding: 4px 0 20px; }
.im { display: flex; margin-top: 2px; } .im.first { margin-top: 10px; } .im.me { justify-content: flex-end; }
.im > span { position: relative; max-width: 76%; padding: 7px 13px 8px; border-radius: 19px; font-size: 16.5px; line-height: 21px; overflow-wrap: anywhere; }
.im.me > span { background: linear-gradient(180deg, #2F9BFF, #0A7CFF); color: #fff; } .im.them > span { background: #E9E9EB; color: #000; }
.im.tail > span::before, .im.tail > span::after { content: ""; position: absolute; bottom: 0; height: 20px; }
.im.me.tail > span::before { right: -7px; width: 20px; background: #0A7CFF; border-bottom-left-radius: 16px 14px; } .im.me.tail > span::after { right: -26px; width: 26px; background: #fff; border-bottom-left-radius: 10px; }
.im.them.tail > span::before { left: -7px; width: 20px; background: #E9E9EB; border-bottom-right-radius: 16px 14px; } .im.them.tail > span::after { left: -26px; width: 26px; background: #fff; border-bottom-right-radius: 10px; }
.im.tail.me { margin-right: 8px; } .im.tail.them { margin-left: 8px; }
.im-ts { text-align: center; font-size: 11.5px; color: #8E8E93; margin: 16px 0 4px; font-weight: 500; } .im-ts b { font-weight: 700; }
.im-st { align-self: flex-end; font-size: 11px; font-weight: 500; color: #8E8E93; margin: 3px 4px 0; }
.im.typing > span { padding: 12px 14px; display: flex; gap: 4px; align-items: center; min-width: 54px; } .im.typing i { width: 8px; height: 8px; border-radius: 50%; background: #9A9AA0; animation: pdDot 1.2s ease-in-out infinite; } .im.typing i:nth-child(2) { animation-delay: .15s; } .im.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pdDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.im-bar { padding: 0; } .im-in { display: flex; align-items: center; background: #fff; border: 1px solid rgba(60, 60, 67, .28); border-radius: 21px; padding: 3px 3px 3px 15px; }
.im-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 34px; font-size: 17px; color: #000; } .im-in input::placeholder { color: rgba(60, 60, 67, .4); }
.im-send { width: 30px; height: 30px; border-radius: 50%; background: #0A84FF; color: #fff; display: grid; place-items: center; opacity: .3; transition: opacity .2s, scale .25s var(--pd-spring); scale: .9; } .im-send.has { opacity: 1; scale: 1; } .im-send svg { width: 20px; height: 20px; }
.im-list .im-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px 10px 24px; min-height: 72px; } .im-list .im-row:active { background: rgba(60, 60, 67, .1); }
.im-row .ud { position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #0A84FF; scale: 0; transition: scale .3s var(--pd-spring); } .im-row.unread .ud { scale: 1; }
.im-row .av { width: 48px; height: 48px; font-size: 20px; flex: none; } .im-row .tx { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; } .im-row .tx b { font-size: 16.5px; font-weight: 600; } .im-row .tx em { font-style: normal; font-size: 14px; color: var(--pd-label2); }
.im-row .tx > span { grid-column: 1 / -1; font-size: 14.5px; line-height: 19px; color: var(--pd-label2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .im-row.unread .tx b { font-weight: 700; }
#modal.phone-mode .im-list .im-row + .im-row::before { left: 74px; }

/* ---- Radio: Now Playing ---- */
.np { border-radius: 26px; padding: 20px 20px 18px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; background: linear-gradient(165deg, color-mix(in srgb, var(--t) 55%, #1B2250) 0%, #12183A 100%); box-shadow: 0 18px 36px rgba(18, 24, 58, .28); position: relative; overflow: hidden; }
.np::before { content: ""; position: absolute; inset: -40% -20% auto; height: 80%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t) 70%, transparent), transparent); opacity: .55; }
.np-art2 { position: relative; width: 176px; height: 176px; border-radius: 24px; background: linear-gradient(135deg, var(--t), #0A6FB8); box-shadow: 0 22px 38px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding-bottom: 20px; overflow: hidden; }
.np-art2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 45%); } .np-art2 small { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; opacity: .9; position: relative; z-index: 1; }
.eq.big { height: 54px; gap: 6px; position: relative; z-index: 1; } .eq.big i { width: 9px; border-radius: 5px; background: rgba(255, 255, 255, .95); animation-play-state: paused; transform: scaleY(.3); } .np.live .eq.big i { animation-play-state: running; }
.np-meta { text-align: center; position: relative; } .np-meta b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.2px; } .np-meta span { display: block; font-size: 14.5px; opacity: .7; margin-top: 2px; }
.np-ctl { display: flex; align-items: center; gap: 30px; position: relative; } .np-ctl button { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: scale .2s var(--pd-spring), background .2s; } .np-ctl button:active { scale: .88; background: rgba(255, 255, 255, .15); } .np-ctl svg { width: 28px; height: 28px; }
.np-ctl .pp { width: 68px; height: 68px; background: #fff; color: #12183A; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); } .np-ctl .pp svg { width: 32px; height: 32px; }

/* ---- Wallet: neobank layout, one physical card whose material follows net worth (phone.js CARD_TIERS) ---- */
.bcard { position: relative; aspect-ratio: 1.586; border-radius: 16px; padding: 6.5% 7% 6%; display: flex; flex-direction: column; overflow: hidden; color: var(--bc-ink); transition: transform .5s var(--pd-spring);
  box-shadow: 0 22px 34px -12px rgba(5, 14, 36, .45), 0 4px 10px rgba(5, 14, 36, .18), inset 0 0 0 1px var(--bc-edge), inset 0 1px 0 var(--bc-lip); }
.bcard .bc-top { display: flex; justify-content: space-between; align-items: baseline; position: relative; }
.bc-bank { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.bc-tier { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; opacity: .85; }
.bcard .bc-mid { display: flex; align-items: center; gap: 12px; margin-top: 9%; position: relative; }
.bc-chip { width: 17%; min-width: 44px; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.bcard .bc-nfc { width: 26px; height: 26px; opacity: .8; }
.bc-num { margin-top: auto; font-size: 17px; font-weight: 600; letter-spacing: 2.5px; font-variant-numeric: tabular-nums; position: relative; }
.bcard .bc-bot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; position: relative; } .bcard .bc-bot i { font-style: normal; }
.bc-kind { font-size: 13px; letter-spacing: 1.5px; font-weight: 800 !important; font-style: italic !important; opacity: .9; }
.bcard .bc-top, .bcard .bc-num, .bcard .bc-bot, .w-wal .wal-hd, .w-wal .wn, .w-wal .ws { text-shadow: var(--bc-engrave); }
/* live specular highlight: follows the pointer on the wallet card, sits at the top-right corner otherwise */
.bc-sheen { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at var(--mx, 82%) var(--my, 8%), var(--bc-spec), transparent 62%); mix-blend-mode: var(--bc-blend, soft-light); transition: background-position .2s; }

/* card materials. Low-contrast brushing only (no speckle): fine hairlines at a few % plus broad anisotropic light bands */
.bc-plastic, .bc-alu, .bc-bronze, .bc-metal, .bc-black, .bc-gold, .bc-plat { --bc-edge: rgba(255, 255, 255, .18); --bc-lip: rgba(255, 255, 255, .3); --bc-spec: rgba(255, 255, 255, .55); }
.bc-plastic { --bc-ink: #fff; --bc-engrave: none; --bc-blend: screen; --bc-spec: rgba(255, 255, 255, .28);
  background: radial-gradient(120% 140% at 0% 100%, #0B3E7A 0%, transparent 60%), linear-gradient(150deg, #22C7D3 0%, #0E8CC0 45%, #0A5596 100%); }
.bc-alu { --bc-ink: #2B3139; --bc-edge: rgba(255, 255, 255, .55); --bc-lip: #fff; --bc-engrave: 0 1px 0 rgba(255, 255, 255, .6), 0 -.5px 0 rgba(0, 0, 0, .18);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, .014) 1px 2px, transparent 2px 3px), linear-gradient(112deg, #C9CED5 0%, #EEF1F4 20%, #BCC2CA 42%, #E4E8EC 60%, #AEB4BD 82%, #D3D8DE 100%); }
.bc-bronze { --bc-ink: #FFF1E2; --bc-engrave: 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 220, 180, .25);
  background: repeating-linear-gradient(90deg, rgba(255, 230, 200, .03) 0 1px, rgba(0, 0, 0, .022) 1px 2px, transparent 2px 3px), linear-gradient(112deg, #6E3F1F 0%, #B9784A 22%, #8A5229 44%, #CF9563 62%, #7A4522 84%, #A4673B 100%); }
.bc-metal { --bc-ink: #EEF1F4; --bc-engrave: 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .14);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, rgba(0, 0, 0, .028) 1px 2px, transparent 2px 3px), linear-gradient(112deg, #2F343B 0%, #646B74 22%, #3A3F46 44%, #737A83 62%, #2A2E34 84%, #50565E 100%); }
.bc-black { --bc-ink: #D9DADF; --bc-edge: rgba(255, 255, 255, .1); --bc-lip: rgba(255, 255, 255, .14); --bc-spec: rgba(255, 255, 255, .16); --bc-blend: screen; --bc-engrave: 0 -1px 0 rgba(0, 0, 0, .7);
  background: radial-gradient(90% 120% at 100% 0%, #26272C 0%, transparent 60%), linear-gradient(160deg, #141518 0%, #0A0A0C 55%, #17181C 100%); }
.bc-black .bc-bank, .bc-black .wal-hd b { background: linear-gradient(100deg, #9EA2AA, #F2F3F5 45%, #8D9199); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.bc-gold { --bc-ink: #3A280A; --bc-edge: rgba(255, 245, 210, .5); --bc-lip: rgba(255, 250, 225, .9); --bc-engrave: 0 1px 0 rgba(255, 240, 190, .55), 0 -.5px 0 rgba(70, 45, 5, .3);
  background: repeating-linear-gradient(90deg, rgba(255, 250, 220, .04) 0 1px, rgba(90, 60, 10, .022) 1px 2px, transparent 2px 3px), linear-gradient(112deg, #A07224 0%, #EDCF84 22%, #B4853A 44%, #F5DE9C 62%, #95671F 84%, #CFA557 100%); }
.bc-plat { --bc-ink: #22262D; --bc-edge: rgba(255, 255, 255, .65); --bc-lip: #fff; --bc-engrave: 0 1px 0 rgba(255, 255, 255, .7), 0 -.5px 0 rgba(0, 0, 0, .2);
  background: linear-gradient(125deg, rgba(160, 210, 255, .16), rgba(255, 190, 230, .12) 40%, rgba(190, 255, 225, .14) 75%, rgba(255, 230, 170, .12)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, rgba(0, 0, 0, .012) 1px 2px, transparent 2px 3px), linear-gradient(112deg, #B9BFC8 0%, #F3F5F8 22%, #C9CFD7 44%, #FBFCFD 62%, #A9B0BA 84%, #DDE1E6 100%); }

/* ================= Wallet (2026-10-28). Calm and premium: flat surfaces, one primary colour, sentence case, two UI weights (600/700) plus the display face for numbers. 4/8 px rhythm. ================= */
#modal.phone-mode .scr.pd-scr.pd-wallet { --w-ink: #0B1430; --w-ink2: #3A4566; --w-ink3: #667192; --w-line: rgba(11, 20, 48, .08); --w-shadow: 0 1px 2px rgba(11, 20, 48, .04), 0 6px 18px -10px rgba(11, 20, 48, .14); background: #F4F7FB; color: var(--w-ink); }
#modal.phone-mode .pd-wallet .pd-nav .back { color: var(--nl-ocean, #0A6FB8); font-weight: 600; }
#modal.phone-mode .pd-wallet .wb-bal b, #modal.phone-mode .pd-wallet .wi-hd b, #modal.phone-mode .pd-wallet .wb-accts b, #modal.phone-mode .pd-wallet .wtx-empty b, #modal.phone-mode .wd-hd b, #modal.phone-mode .wa-amt b, #modal.phone-mode .wa-rc h3, #modal.phone-mode .wa-rv h3, #modal.phone-mode .wa-ti { font-family: var(--nl-font-display, 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif); }
.pd-wallet .eyebrow.wh-eye, .pd-wallet .eyebrow { margin: 8px 4px 2px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--w-ink2); }
.pd-wallet .wb-bal { margin: 0 4px; }
.pd-wallet .wb-bal b { display: block; font-size: 52px; line-height: 58px; font-weight: 800; letter-spacing: -.035em; color: var(--w-ink); opacity: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-wallet .wb-bal.long b { font-size: 42px; line-height: 48px; }
.wh-nw { margin: 2px 4px 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink3); } .wh-nw b { color: var(--w-ink2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* card stage: one soft tier-tinted ambient glow and a contact shadow; the card is the hero */
.wb-stage { position: relative; margin: 20px 0 24px; padding: 4px 0 16px; isolation: isolate; }
.wb-glow { position: absolute; z-index: -1; left: 2%; right: 2%; top: 4%; bottom: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 60%, transparent), transparent); filter: blur(26px); opacity: .5; }
.wb-ground { position: absolute; z-index: -1; left: 10%; right: 10%; bottom: 8px; height: 18px; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 20, 48, .5), rgba(11, 20, 48, .14) 62%, transparent); filter: blur(7px); }
.bcard-wrap { position: relative; perspective: 900px; touch-action: pan-y; cursor: pointer; border-radius: 18px; outline-offset: 4px; -webkit-tap-highlight-color: transparent; }
.bcard-wrap:active .bcard { scale: .985; } .bcard-wrap:focus-visible { outline: 2.5px solid var(--nl-ocean, #0A6FB8); }
.pd-wallet .bcard { box-shadow: 0 2px 4px rgba(11, 20, 48, .18), 0 14px 22px -10px rgba(11, 20, 48, .5), inset 0 0 0 1px var(--bc-edge), inset 0 1px 0 var(--bc-lip); transition: transform .5s var(--pd-spring), scale .25s var(--pd-spring), filter .35s; }
.bcard.frozen { filter: saturate(.25) brightness(.92); }
.bc-frz { display: none; position: absolute; right: 7%; top: 44%; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #0B3E7A; font-size: 11px; font-weight: 700; letter-spacing: .4px; } .bcard.frozen .bc-frz { display: block; }
/* action row: four circles, one label each */
.wb-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 24px; }
.qa { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; background: none; color: var(--w-ink); touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.qa i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #E2ECF7; color: var(--w-ink); transition: transform .12s ease-out, filter .12s ease-out; will-change: transform; } .qa i svg { width: 22px; height: 22px; }
.qa.pri i { background: var(--w-ink); color: #fff; }
.qa b { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.qa.dn i, .qa:active i { transform: scale(.94); filter: brightness(.92); } .qa:focus-visible { outline: none; } .qa:focus-visible i { outline: 2.5px solid var(--nl-ocean, #0A6FB8); outline-offset: 2px; }
/* account tiles */
.wb-accts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.wb-accts span { min-width: 0; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--w-shadow); display: grid; gap: 2px; }
.wb-accts u { width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, #fff); } .wb-accts u svg { width: 15px; height: 15px; }
.wb-accts i { font-style: normal; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--w-ink2); }
.wb-accts b { display: block; font-size: 17px; line-height: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--w-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* card status: plain surface, thin track */
.wb-tier { margin: 0 0 16px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--w-shadow); }
.wst-row { display: flex; align-items: center; gap: 14px; }
.wst-mini { position: relative; flex: none; display: block; width: 48px; aspect-ratio: 1.586; padding: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(11, 20, 48, .25), inset 0 0 0 1px var(--bc-edge), inset 0 1px 0 var(--bc-lip); }
.wm-chip { position: absolute; left: 12%; top: 32%; width: 19%; aspect-ratio: 1.3; border-radius: 2px; background: linear-gradient(135deg, #F6E3A1, #C99A40); }
.wst-tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .wst-tx b { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--w-ink); } .wst-tx .nw { white-space: nowrap; }
.wst-tx span { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink3); font-variant-numeric: tabular-nums; }
.wst-more { flex: none; padding: 8px 0 8px 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--nl-ocean, #0A6FB8); touch-action: manipulation; } .wst-more:active { opacity: .5; }
.wst-track { height: 4px; margin-top: 16px; border-radius: 2px; background: rgba(11, 20, 48, .1); overflow: hidden; }
.wst-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--w-ink); transition: width .6s ease-out .1s; } .wb-tier.on .wst-fill { width: max(var(--p), 4px); }
/* spend insight */
.wb-ins { padding: 16px; border-radius: 20px; background: #fff; margin: 0 0 16px; box-shadow: var(--w-shadow); }
.wi-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .wi-hd span { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink2); } .wi-hd b { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--w-ink); font-variant-numeric: tabular-nums; }
.wi-bar { display: flex; gap: 3px; height: 8px; margin: 14px 0 16px; } .wi-bar i { min-width: 8px; border-radius: 4px; transform-origin: left; animation: wi-grow .6s ease-out both; }
@keyframes wi-grow { from { transform: scaleX(0); } }
.wi-lg { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .wi-lg li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink); } .wi-lg li > i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .wi-lg li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wi-lg li em { font-style: normal; font-size: 13px; color: var(--w-ink3); font-variant-numeric: tabular-nums; } .wi-lg li b { min-width: 76px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wi-in { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--w-line); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink2); display: flex; justify-content: space-between; } .wi-in b { color: color-mix(in srgb, var(--nl-palm, #2BB673) 68%, #0B1430); font-weight: 600; font-variant-numeric: tabular-nums; }
.wc-owed { margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--nl-owed, #FF4D5E) 10%, #fff); color: #B3202F; font-weight: 600; font-size: 14.5px; }
/* activity */
#modal.phone-mode .pd-wallet .sec { margin: 24px 4px 8px; text-transform: none; letter-spacing: 0; color: var(--w-ink); }
.pd-wallet .sec, .wtx .sec { margin: 24px 4px 8px; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--w-ink); }
.wtx-flt { display: flex; gap: 8px; margin: 0 4px 12px; } .wtx-flt button { padding: 7px 14px; border-radius: 99px; background: #E2ECF7; color: var(--w-ink); font-size: 13px; line-height: 18px; font-weight: 600; touch-action: manipulation; } .wtx-flt button[aria-pressed="true"] { background: var(--w-ink); color: #fff; }
.wtx-day { margin: 0 0 16px; } .wtx-day header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 8px; } .wtx-day header b { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--w-ink2); } .wtx-day header span { font-size: 13px; font-weight: 600; color: var(--w-ink3); font-variant-numeric: tabular-nums; }
.wtx-list { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--w-shadow); }
.wtx-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative; transition: background .12s; } .wtx-row[hidden], .wtx-day[hidden] { display: none; } .wtx-row + .wtx-row::before { content: ""; position: absolute; left: 66px; right: 14px; top: 0; height: 1px; background: var(--w-line); } .wtx-row:active { background: #F4F7FB; }
.wtx-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, #fff); } .wtx-ic svg { width: 20px; height: 20px; }
.wtx-tx { flex: 1; min-width: 0; display: grid; gap: 1px; } .wtx-tx b { font-size: 15.5px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wtx-tx em { font-style: normal; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--w-ink3); }
.wtx-amt { font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--w-ink); white-space: nowrap; } .wtx-amt.in { color: color-mix(in srgb, var(--nl-palm, #2BB673) 68%, #0B1430); }
.wtx-empty { text-align: center; padding: 28px 24px; border-radius: 20px; background: #fff; box-shadow: var(--w-shadow); } .wtx-empty .we-art { display: block; width: 132px; height: 104px; margin: 0 auto 8px; } .wtx-empty .we-art svg { width: 100%; height: 100%; }
.wtx-empty b { display: block; font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--w-ink); } .wtx-empty p { margin: 6px auto 0; max-width: 260px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink2); }
/* sheets (card details + money actions) */
.wd-ov, .wa-ov { --w-ink: #0B1430; --w-ink2: #3A4566; --w-ink3: #667192; --w-line: rgba(11, 20, 48, .08); --w-shadow: 0 1px 2px rgba(11, 20, 48, .04), 0 6px 18px -10px rgba(11, 20, 48, .14); }
.wd-ov, .wa-ov { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; pointer-events: none; visibility: hidden; } .wd-ov.on, .wa-ov.on { pointer-events: auto; visibility: visible; }
.wa-ov { z-index: 31; transition: visibility 0s .3s; } .wa-ov.on { transition-delay: 0s; }
.wd-bd, .wa-bd { position: absolute; inset: 0; background: rgba(11, 20, 48, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .22s; } .wd-ov.on .wd-bd, .wa-ov.on .wa-bd { opacity: 1; }
.wd-panel, .wa-panel { position: relative; width: 100%; max-height: 94%; overflow-y: auto; border-radius: 28px 28px 0 0; background: #F4F7FB; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate3d(0, 105%, 0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); scrollbar-width: none; color: var(--w-ink, #0B1430); will-change: transform; overscroll-behavior: contain; } .wd-panel::-webkit-scrollbar, .wa-panel::-webkit-scrollbar { display: none; } .wd-ov.on .wd-panel, .wa-ov.on .wa-panel { transform: none; }
.wd-grab, .wa-grab { display: block; width: 36px; height: 5px; border-radius: 3px; background: rgba(11, 20, 48, .16); margin: 0 auto 8px; }
.wd-hd, .wa-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 40px; } .wd-hd b, .wa-ti { flex: 1; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.03em; } .wa-ti { text-align: left; }
.wd-x { color: var(--nl-ocean, #0A6FB8); font-size: 16px; font-weight: 600; padding: 8px 4px; touch-action: manipulation; }
.wa-x, .wa-bk { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #E2ECF7; color: var(--w-ink, #0B1430); touch-action: manipulation; } .wa-bk[hidden] { display: none; } .wa-x svg, .wa-bk svg { width: 18px; height: 18px; } .wa-x:active, .wa-bk:active { transform: scale(.94); }
.wd-card { margin: 4px 0 20px; perspective: 900px; }
.wd-list, .wa-list { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--w-shadow); } .wd-list > div, .wa-list > div:not(.wa-row) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; line-height: 20px; position: relative; } .wd-list > div + div::before, .wa-list > div + div::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--w-line); } .wd-list span, .wa-list > div > span { color: var(--w-ink2); font-weight: 600; } .wd-list small { display: block; font-size: 13px; margin-top: 2px; } .wd-list b, .wa-list > div > b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.wd-frz span { color: var(--w-ink, #0B1430); font-weight: 600; } .wd-frz small { color: var(--w-ink3, #667192); font-weight: 600; }
.wd-tg { flex: none; width: 51px; height: 31px; border-radius: 16px; background: rgba(11, 20, 48, .2); position: relative; transition: background .2s; touch-action: manipulation; } .wd-tg i { position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(11, 20, 48, .25); transition: transform .25s var(--pd-spring); } .wd-tg[aria-checked="true"] { background: var(--nl-palm, #2BB673); } .wd-tg[aria-checked="true"] i { transform: translateX(20px); } .wd-tg:focus-visible { outline: 2.5px solid var(--nl-ocean, #0A6FB8); outline-offset: 2px; }
.wd-sec { margin: 24px 4px 8px; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--w-ink, #0B1430); }
.wd-tiers { list-style: none; margin: 0; padding: 4px 16px; background: #fff; border-radius: 20px; box-shadow: var(--w-shadow); } .wd-tiers li { display: flex; align-items: center; gap: 14px; padding: 12px 0; } .wd-tiers li + li { border-top: 1px solid var(--w-line); }
.wd-tiers .wt-n { flex: 1; min-width: 0; display: grid; gap: 1px; } .wd-tiers b { font-size: 15.5px; line-height: 20px; font-weight: 600; } .wd-tiers em { font-style: normal; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--w-ink3, #667192); font-variant-numeric: tabular-nums; }
.wd-tiers li:not(.wt-ps):not(.wt-cu) .wst-mini { opacity: .55; } .wt-ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--w-ink, #0B1430); color: #fff; } .wt-ok svg { width: 14px; height: 14px; stroke-width: 2.4; }
.wd-perks { list-style: none; margin: 0; padding: 4px 16px; background: #fff; border-radius: 20px; box-shadow: var(--w-shadow); } .wd-perks li { position: relative; padding: 12px 0 12px 22px; font-size: 15px; line-height: 20px; font-weight: 600; } .wd-perks li + li { border-top: 1px solid var(--w-line); }
.wd-perks li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--m1); box-shadow: inset 0 0 0 1px rgba(11, 20, 48, .2); }
.wd-note { margin: 10px 4px 0; font-size: 13px; line-height: 18px; color: var(--w-ink2, #3A4566); font-weight: 600; }
/* money action sheets */
.wa-body { display: block; }
.wa-lead { margin: 0 4px 16px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--w-ink2); }
.wa-amt { text-align: center; padding: 8px 0 0; } .wa-amt b { display: block; font-size: 52px; line-height: 58px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--w-ink); } .wa-amt b.zero { color: rgba(11, 20, 48, .28); } .wa-amt.rv b { font-size: 44px; line-height: 50px; }
.wa-err { margin: 0; min-height: 20px; padding: 2px 4px; text-align: center; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--w-ink3); } .wa-err.bad { color: #C0243A; }
.wa-pair { position: relative; display: grid; gap: 8px; } .wa-acct { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--w-shadow); transition: transform .2s ease-out, opacity .2s; } .wa-acct u { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; background: #E2ECF7; } .wa-acct u svg { width: 18px; height: 18px; }
.wa-acct span { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .wa-acct .n { font-style: normal; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--w-ink3); } .wa-acct .b { font-style: normal; font-size: 16px; line-height: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wa-pair.flip [data-r="from"] { transform: translateY(calc(100% + 8px)); opacity: .5; } .wa-pair.flip [data-r="to"] { transform: translateY(calc(-100% - 8px)); opacity: .5; }
.wa-sw { position: absolute; z-index: 2; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; display: grid; place-items: center; background: var(--w-ink); color: #fff; box-shadow: 0 0 0 4px #F4F7FB; touch-action: manipulation; transition: transform .2s ease-out; } .wa-sw svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .2s ease-out; } .wa-sw:active, .wa-sw.dn { transform: scale(.92); } .wa-pair.flip .wa-sw svg { transform: rotate(270deg); }
.wa-chips { display: flex; justify-content: center; gap: 8px; margin: 4px 0 8px; } .wa-chip { padding: 8px 16px; border-radius: 99px; background: #E2ECF7; color: var(--w-ink); font-size: 14px; line-height: 18px; font-weight: 600; touch-action: manipulation; transition: transform .1s, filter .1s; } .wa-chip:active, .wa-chip.dn { transform: scale(.94); filter: brightness(.93); }
.wa-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; margin: 4px 0 12px; } .wa-key { height: 52px; border-radius: 16px; background: transparent; color: var(--w-ink); font-size: 26px; line-height: 1; font-weight: 600; font-family: var(--nl-font-display, inherit); touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background .08s, transform .08s; } .wa-key:active, .wa-key.dn { background: #E2ECF7; transform: scale(.94); } .wa-key svg { width: 26px; height: 26px; margin: auto; }
.wa-cta { position: relative; width: 100%; height: 54px; border-radius: 18px; background: #E2ECF7; color: var(--w-ink); font-size: 16px; line-height: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; touch-action: manipulation; transition: transform .1s, filter .1s, background .2s; } .wa-cta:not(:disabled) { background: var(--w-ink); color: #fff; } .wa-cta:disabled { color: var(--w-ink3); } .wa-cta:not(:disabled):active, .wa-cta.dn { transform: scale(.98); filter: brightness(1.25); }
.wa-cta .sp, .wa-cta .ck { display: none; width: 22px; height: 22px; } .wa-cta.busy .sp { display: block; animation: waSpin .7s linear infinite; } .wa-cta.busy { background: var(--w-ink); color: #fff; } .wa-cta.ok { background: var(--nl-palm, #2BB673); color: #fff; } .wa-cta.ok .ck { display: block; } .wa-cta.ok:disabled { color: #fff; }
@keyframes waSpin { to { transform: rotate(360deg); } }
.wa-find { display: flex; align-items: center; gap: 4px; padding: 0 16px; height: 52px; border-radius: 16px; background: #fff; box-shadow: var(--w-shadow); } .wa-find span { color: var(--w-ink3); font-size: 18px; font-weight: 700; } .wa-find input, .wa-memo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 16px/24px var(--pd-font); color: var(--w-ink); } .wa-find input::placeholder, .wa-memo input::placeholder { color: var(--w-ink3); }
.wa-memo { display: block; margin: 8px 0 8px; padding: 0 16px; height: 48px; border-radius: 16px; background: #fff; box-shadow: var(--w-shadow); } .wa-memo input { width: 100%; height: 100%; font-size: 15px; }
.wa-res { margin-top: 12px; display: grid; gap: 0; background: #fff; border-radius: 20px; box-shadow: var(--w-shadow); overflow: hidden; min-height: 56px; } .wa-res:has(.wa-hintp) { background: transparent; box-shadow: none; } .wa-hintp { margin: 8px 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink3); }
.wa-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: left; color: var(--w-ink); touch-action: manipulation; transition: background .1s; position: relative; } .wa-row + .wa-row::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--w-line); } .wa-row:active, .wa-row.dn { background: #EEF3F9; }
.wa-row u { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; text-decoration: none; background: #E2ECF7; } .wa-row u svg { width: 20px; height: 20px; }
.wa-rt { flex: 1; min-width: 0; display: grid; gap: 1px; } .wa-rt b { font-size: 15.5px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-rt em { font-style: normal; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--w-ink3); } .wa-row > i { width: 18px; height: 18px; color: var(--w-ink3); } .wa-row > i svg { width: 18px; height: 18px; transform: rotate(180deg); }
.wa-row.sw { cursor: default; } .wa-row.sw:active { background: transparent; }
.wa-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h) 70% 88%); color: hsl(var(--h) 60% 28%); font: 700 16px/1 var(--pd-font); background-size: cover; background-position: center; } .wa-av.sm { width: 32px; height: 32px; font-size: 14px; } .wa-av.lg { width: 72px; height: 72px; font-size: 28px; margin: 0 auto 12px; } .wa-av.has { color: transparent; }
.wa-to { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink2); } .wa-to b { color: var(--w-ink); font-weight: 700; }
.wa-rv { text-align: center; padding: 8px 0 16px; } .wa-rv p { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink3); } .wa-rv h3 { margin: 2px 0 4px; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.03em; }
.wa-warn { margin: 12px 4px 0; padding: 12px 14px; border-radius: 14px; background: #FFF4D6; color: #6B4A00; font-size: 14px; line-height: 20px; font-weight: 600; } .wa-rv + .wa-list + .wa-err, .wa-list + .wa-err { margin-bottom: 8px; }
.wa-list + .wa-warn + .wa-err, .wa-list + .wa-err { margin-top: 8px; } .wa-body > .wa-cta { margin-top: 8px; }
.wa-rc { text-align: center; padding: 8px 0 20px; } .wa-ring { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--nl-palm, #2BB673); color: #fff; animation: waPop .4s cubic-bezier(.2, .9, .3, 1.2) both; } .wa-ring svg { width: 34px; height: 34px; } @keyframes waPop { from { transform: scale(.5); opacity: 0; } }
.wa-rc h3 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -.03em; } .wa-rc p { margin: 2px 0 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--w-ink2); }
.wa-note { text-align: center; padding: 16px 8px 20px; } .wa-note u { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; background: #E2ECF7; } .wa-note u svg { width: 24px; height: 24px; } .wa-note b { display: block; font-size: 17px; line-height: 22px; font-weight: 700; } .wa-note p { margin: 6px auto 0; max-width: 280px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--w-ink2); }
@media (prefers-reduced-motion: reduce) { .wd-panel, .wa-panel, .wd-bd, .wa-bd, .qa i, .bcard, .wd-tg, .wd-tg i, .wst-fill, .wa-acct, .wa-sw, .wa-sw svg { transition-duration: .01ms !important; transition-delay: 0s !important; } .wi-bar i, .wa-ring, .wa-cta.busy .sp { animation: none !important; } }
@media (max-width: 380px) { .pd-wallet .wb-bal b { font-size: 44px; line-height: 50px; } .pd-wallet .wb-bal.long b { font-size: 36px; line-height: 42px; } .qa i { width: 52px; height: 52px; } .wb-accts b { font-size: 15px; } .wb-accts span { padding: 10px; } .wa-key { height: 46px; } .wa-amt b { font-size: 44px; line-height: 50px; } }

/* game toasts while the phone is open: a banner that grows out of the dynamic island (game.js nextToast) */
.pd-screen > .toast.pd-toast { position: absolute; z-index: 40; top: 10px; left: 50%; translate: -50% 0; width: min(calc(100% - 24px), 369px); box-sizing: border-box; display: block; height: 40px; line-height: 40px !important; padding: 0 16px 0 32px; border-radius: 22px; background: #05070D; color: #fff; font: 600 13px/18px var(--pd-font); letter-spacing: -.1px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform-origin: 50% 0; animation: pdTin .5s var(--pd-spring) both; }
.pd-screen > .toast.pd-toast::before { position: absolute; left: 14px; top: 16px; background: var(--nl-lagoon, #2FD9D0); box-shadow: 0 0 8px var(--nl-lagoon, #2FD9D0); } .pd-screen > .toast.pd-toast.gold::before { background: var(--nl-gold, #FFC72C); box-shadow: 0 0 8px var(--nl-gold, #FFC72C); } .pd-screen > .toast.pd-toast.warn::before { background: var(--nl-owed, #FF4D5E); box-shadow: 0 0 8px var(--nl-owed, #FF4D5E); }
.pd-screen > .toast.pd-toast.out { opacity: 0; transform: scale(.7, .5); transition: opacity .2s, transform .26s; }
@keyframes pdTin { from { opacity: 0; transform: scale(.34, .8); } }
@media (prefers-reduced-motion: reduce) { .pd-screen > .toast.pd-toast { animation: none; } }

/* Share to Gapseed (snapshot tile) */
.cc-snap .sn-gs { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; padding: 8px 10px; border-radius: 10px; border: 0; background: rgba(17, 12, 24, .78); color: #fff; font: 700 13px/1 var(--nl-font-ui, system-ui, sans-serif); cursor: pointer; }

/* Trip budget (tripbudget.js): wallet row + home widget line + the bank call. Calm solid surfaces, thin track, no glow. */
.wb-trip { margin: 0 0 16px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--w-shadow); }
.wb-trip .wst-fill { width: max(var(--p), 3px); }
.wb-trip[data-state="over"] .wst-fill { background: var(--nl-owed, #FF4D5E); }
.wtr-note { margin: 12px 0 0; font-size: 12.5px; line-height: 17px; font-weight: 500; color: var(--w-ink3); }
.w-wal .wtl { display: block; height: 3px; margin-top: 7px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative; } .w-wal .wtl b { display: block; height: 100%; border-radius: 2px; background: currentColor; }
.pd-bank .bk-av { color: #fff; } .pd-bank .bk-av svg { width: 52px; height: 52px; }
.bk-st { color: #0A6FB8; } .bk-chat { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.pd-bank .pc-body { padding-bottom: 56px; }
.bk-say { max-width: 88%; font: 500 14.5px/1.4 var(--nl-font-ui); animation: bkIn .26s var(--nl-ease-out, ease-out) both; }
.bk-say { align-self: flex-start; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #F1F4F9; color: var(--nl-ink, #0B1430); }
.bk-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .bk-opts.col { grid-template-columns: 1fr; }
.bk-opt { min-height: 52px; padding: 0 10px; border-radius: 16px; border: 1.5px solid rgba(11, 20, 48, .12); background: #fff; color: var(--nl-ink, #0B1430); font: 700 16px/1.1 var(--nl-font-ui); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; transition: transform .12s, border-color .15s; }
.bk-opt:active { transform: scale(.97); border-color: var(--nl-ink, #0B1430); } .bk-opt.bad { border-color: var(--nl-owed, #FF4D5E); color: var(--nl-owed, #FF4D5E); opacity: .55; cursor: default; }
.bk-cta { width: 100%; height: 54px; margin-top: 12px; border: 0; border-radius: 18px; background: var(--nl-ink, #0B1430); color: #fff; font: 700 16px/1 var(--nl-font-ui); cursor: pointer; touch-action: manipulation; } .bk-cta.alt { background: #E2ECF7; color: var(--nl-ink, #0B1430); } .bk-cta:active { transform: scale(.98); }
.bk-hint { margin: 10px 0 0; text-align: center; font: 500 12.5px/1.3 var(--nl-font-ui); color: var(--nl-ink-3, #7A84A3); }
.bk-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; margin-left: 5px; vertical-align: -1px; } .bk-eq i { width: 3px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: bkEq .8s ease-in-out infinite; } .bk-eq i:nth-child(2) { animation-delay: .2s; } .bk-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes bkEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } @keyframes bkIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bk-say, .bk-eq i { animation: none !important; } }