/* AML Sales app: mobile-first, animated, light and dark. */
:root {
  --bg: #f3f6fa; --surface: #ffffff; --surface-2: #eef2f7; --line: #e2e8f0;
  --ink: #0f1f30; --ink-2: #41546a; --ink-3: #6d7f92;
  --brand: #0b63ce; --brand-2: #0a4fa6; --sun: #ffb020; --good: #0d9f6e; --bad: #dc3545; --warn: #c77700;
  --hero-1: #0b1f33; --hero-2: #103a5e; --hero-3: #14608a;
  --shadow: 0 1px 2px rgba(15,31,48,.05), 0 6px 18px rgba(15,31,48,.07);
  --radius: 18px; --ease: cubic-bezier(.2,.8,.2,1);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0a1420; --surface: #13202f; --surface-2: #1b2b3d; --line: #24374b; --ink: #edf3f9; --ink-2: #b4c3d3; --ink-3: #8a9db1; --brand: #4b9dff; --brand-2: #2f86ee; --good: #34c08f; --bad: #ff6b76; --warn: #f0a93b; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.28); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; overscroll-behavior-y: contain; }
a { color: var(--brand); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
#app { min-height: 100%; max-width: 560px; margin: 0 auto; position: relative; }
@media (min-width: 620px) { body { background: linear-gradient(160deg, var(--hero-1), var(--hero-3)); } #app { background: var(--bg); min-height: 100vh; box-shadow: 0 0 60px rgba(0,0,0,.3); } .tabbar, .fab { max-width: 560px; } }

/* Splash + sun */
.splash { position: fixed; inset: 0; display: grid; place-items: center; background: var(--hero-1); }
.sun { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd76a, var(--sun)); box-shadow: 0 0 0 0 rgba(255,176,32,.5); animation: sunPulse 1.8s ease-in-out infinite; }
@keyframes sunPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,176,32,.45); transform: scale(1); } 50% { box-shadow: 0 0 0 26px rgba(255,176,32,0); transform: scale(1.06); } }

/* Sign in */
.login { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(165deg, var(--hero-1), var(--hero-2) 55%, var(--hero-3)); position: relative; overflow: hidden; color: #fff; }
.login .orb { position: absolute; border-radius: 50%; }
.login .orb.a { width: 150px; height: 150px; top: 6%; right: -30px; background: radial-gradient(circle at 35% 35%, #ffd76a, var(--sun)); filter: blur(.3px); animation: floaty 7s ease-in-out infinite; box-shadow: 0 0 90px rgba(255,176,32,.55); }
.login .panel-grid { position: absolute; left: -10%; right: -10%; top: 15%; height: 150px; transform: perspective(380px) rotateX(58deg); background-image: linear-gradient(rgba(255,255,255,.13) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255,255,255,.13) 1.5px, transparent 1.5px); background-size: 46px 34px; animation: gridSlide 9s linear infinite; }
@keyframes gridSlide { to { background-position: 46px 34px; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.login-brand { position: absolute; top: calc(30px + var(--safe-t)); left: 24px; display: flex; align-items: center; gap: 10px; animation: rise .6s var(--ease) both; }
.login-brand img { height: 42px; width: 42px; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; }
.login-brand b { font-size: 19px; letter-spacing: .01em; }
.login-card { position: relative; background: var(--surface); color: var(--ink); border-radius: 28px 28px 0 0; padding: 28px 22px calc(26px + var(--safe-b)); animation: sheetUp .6s var(--ease) both; }
.login-card h1 { font-size: 25px; font-weight: 700; }
.login-card p.sub { color: var(--ink-3); margin: 4px 0 18px; }

/* Layout */
.page { padding: 0 14px calc(92px + var(--safe-b)); animation: pageIn .32s var(--ease) both; }
.page.back { animation-name: pageBack; }
@keyframes pageIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes pageBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.stagger > * { animation: rise .42s var(--ease) both; }
.stagger > *:nth-child(2) { animation-delay: .05s; } .stagger > *:nth-child(3) { animation-delay: .1s; } .stagger > *:nth-child(4) { animation-delay: .15s; } .stagger > *:nth-child(5) { animation-delay: .2s; } .stagger > *:nth-child(6) { animation-delay: .25s; } .stagger > *:nth-child(n+7) { animation-delay: .3s; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--safe-t)) 14px 10px; margin: 0 -14px 6px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.topbar h1 { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; flex: none; color: var(--ink); transition: transform .12s; }
.icon-btn:active { transform: scale(.92); }
.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Hero (home) */
.hero { margin: 0 -14px 14px; padding: calc(16px + var(--safe-t)) 18px 58px; color: #fff; background: linear-gradient(150deg, var(--hero-1), var(--hero-2) 60%, var(--hero-3)); border-radius: 0 0 28px 28px; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; width: 170px; height: 170px; right: -40px; top: -50px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,215,106,.9), rgba(255,176,32,.55)); box-shadow: 0 0 80px rgba(255,176,32,.45); animation: floaty 8s ease-in-out infinite; }
.hero-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.hero small { opacity: .75; display: block; }
.hero h1 { font-size: 22px; font-weight: 700; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-weight: 700; flex: none; border: 0; color: #fff; cursor: pointer; }
.track-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 11px; border-radius: 99px; background: rgba(255,255,255,.14); font-size: 12.5px; position: relative; z-index: 1; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5ff0b5; box-shadow: 0 0 0 0 rgba(95,240,181,.7); animation: dotPing 1.6s infinite; }
.dot.off { background: #ffc46b; animation: none; }
@keyframes dotPing { 70% { box-shadow: 0 0 0 9px rgba(95,240,181,0); } 100% { box-shadow: 0 0 0 0 rgba(95,240,181,0); } }

/* Day card */
.day-card { margin-top: -46px; position: relative; z-index: 2; background: var(--surface); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); text-align: center; }
.clock { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.punch { position: relative; width: 138px; height: 138px; margin: 14px auto 10px; border-radius: 50%; border: 0; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(145deg, #12b886, #0b8a65); box-shadow: 0 12px 28px rgba(13,159,110,.38); transition: transform .15s var(--ease); }
.punch.out { background: linear-gradient(145deg, #ff7a59, #e0413f); box-shadow: 0 12px 28px rgba(224,65,63,.36); }
.punch:active { transform: scale(.94); }
.punch::before, .punch::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; color: #12b886; animation: ring 2.4s ease-out infinite; }
.punch.out::before, .punch.out::after { color: #e0413f; }
.punch::after { animation-delay: 1.2s; }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.42); opacity: 0; } }
.punch .ic { width: 30px; height: 30px; }
.punch[disabled] { background: var(--surface-2); color: var(--ink-3); box-shadow: none; cursor: default; }
.punch[disabled]::before, .punch[disabled]::after { display: none; }
.day-meta { display: flex; justify-content: center; gap: 22px; color: var(--ink-2); font-size: 13px; flex-wrap: wrap; }
.day-meta b { display: block; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }

/* Cards, lists */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-top: 12px; }
.card h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card h2 a, .card h2 button { font-size: 13px; font-weight: 500; background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.stats.three { grid-template-columns: repeat(3, 1fr); } .stats.two { grid-template-columns: repeat(2, 1fr); }
.stat { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 11px 8px; text-align: center; min-width: 0; }
.stat b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { font-size: 11.5px; color: var(--ink-3); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.quick button { border: 0; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 13px 4px 10px; font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: transform .12s; }
.quick button:active { transform: scale(.94); }
.quick i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.g1 { background: linear-gradient(145deg, #4b9dff, #0b63ce); } .g2 { background: linear-gradient(145deg, #34d399, #0d9f6e); } .g3 { background: linear-gradient(145deg, #ffc24b, #f08c00); } .g4 { background: linear-gradient(145deg, #a78bfa, #6d4fd8); } .g5 { background: linear-gradient(145deg, #ff8a80, #e0413f); } .g6 { background: linear-gradient(145deg, #4dd0e1, #0b8fa6); }
.row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; color: inherit; }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.badge.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.badge.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.badge.warn { background: color-mix(in srgb, var(--warn) 17%, transparent); color: var(--warn); }
.badge.blue { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }
.round-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line); background: var(--surface); padding: 6px 13px; border-radius: 99px; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip b { font-variant-numeric: tabular-nums; margin-left: 3px; }
.empty { text-align: center; color: var(--ink-3); padding: 34px 12px; }
.empty .ic { width: 38px; height: 38px; margin-bottom: 8px; opacity: .55; }
.skeleton { height: 62px; border-radius: 14px; margin-top: 10px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size: 240% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -240% 0; } }
.bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 5px; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); transform-origin: left; animation: barIn .8s var(--ease) both; }
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Forms */
.field { display: block; margin-top: 12px; }
.field > span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface); outline: none; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 16px; border: 0; border-radius: 14px; font-weight: 600; font-size: 15.5px; cursor: pointer; background: var(--surface-2); color: var(--ink); transition: transform .12s, opacity .15s; margin-top: 12px; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(145deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 32%, transparent); }
.btn.good { background: linear-gradient(145deg, #12b886, #0b8a65); color: #fff; }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .55; }
.btn.small { min-height: 38px; font-size: 13.5px; width: auto; margin: 0; padding: 7px 13px; border-radius: 11px; }
.btn-row { display: flex; gap: 8px; margin-top: 10px; }
.btn-row .btn { margin: 0; flex: 1; min-width: 0; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.gps-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); background: var(--surface-2); border-radius: 12px; padding: 9px 11px; margin-top: 12px; }
.gps-note.ok { color: var(--good); } .gps-note.bad { color: var(--bad); }
.photo-pick { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1.5px dashed var(--line); border-radius: 13px; cursor: pointer; margin-top: 12px; color: var(--ink-2); font-size: 14px; }
.photo-pick img { width: 46px; height: 46px; object-fit: cover; border-radius: 9px; }
.photo-pick input { display: none; }

/* Timeline */
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 13px; animation: rise .4s var(--ease) both; }
.tl-item::before { content: ''; position: absolute; left: -20px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2.5px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.tl-item .t { font-weight: 600; font-size: 14px; }
.tl-item .s { font-size: 12.5px; color: var(--ink-3); }

/* Route map */
.route-map { width: 100%; height: 190px; border-radius: 14px; background: var(--surface-2); display: block; }
.route-map .path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Tab bar + FAB */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + var(--safe-b)); }
.tabbar button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; color: var(--ink-3); font-size: 11px; font-weight: 500; cursor: pointer; position: relative; transition: color .15s; }
.tabbar button.on { color: var(--brand); }
.tabbar button.on .ic { animation: tabPop .35s var(--ease); }
@keyframes tabPop { 40% { transform: translateY(-3px) scale(1.14); } }
.tabbar .n { position: absolute; top: 0; left: 52%; background: var(--bad); color: #fff; font-size: 10px; border-radius: 99px; padding: 0 5px; min-width: 16px; line-height: 16px; text-align: center; }
.fab { position: fixed; right: 0; left: 0; margin: 0 auto; bottom: calc(76px + var(--safe-b)); height: 0; z-index: 19; pointer-events: none; }
.fab button { pointer-events: auto; position: absolute; right: 16px; bottom: 0; width: 56px; height: 56px; border-radius: 18px; border: 0; color: #fff; display: grid; place-items: center; cursor: pointer; background: linear-gradient(145deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 42%, transparent); animation: rise .4s var(--ease) both; transition: transform .12s; }
.fab button:active { transform: scale(.92); }

/* Sheet + toast */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(5,15,25,.5); animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet { background: var(--bg); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 8px 16px calc(20px + var(--safe-b)); animation: sheetUp .32s var(--ease) both; }
.sheet.closing { animation: sheetDown .2s ease-in both; }
@keyframes sheetDown { to { transform: translateY(100%); } }
.sheet .grab { width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 3px auto 12px; }
.sheet h2 { font-size: 19px; font-weight: 700; }
.sheet p.sub { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
#toasts { position: fixed; top: calc(10px + var(--safe-t)); left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 14px; }
.toast { background: #10202f; color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 14px; max-width: 520px; box-shadow: 0 10px 28px rgba(0,0,0,.3); animation: toastIn .3s var(--ease) both; }
.toast.ok { background: #0b8a65; } .toast.err { background: #c8303c; }
.toast.leaving { animation: fade .25s reverse both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
.offline-bar { background: var(--warn); color: #fff; font-size: 12.5px; text-align: center; padding: 4px; }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* Install + location check */
.link-btn { background: none; color: var(--brand); min-height: 40px; margin-top: 8px; box-shadow: none; }
.track-pill[id] { cursor: default; }
.track-pill.bad { background: rgba(220,53,69,.9); color: #fff; cursor: pointer; }
.chk { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.chk:last-child { border-bottom: 0; }
.chk .ic { width: 18px; height: 18px; margin-top: 2px; }
.chk.ok .ic { color: var(--good); } .chk.bad .ic { color: var(--bad); } .chk.warn .ic { color: var(--warn); }
.chk .grow { flex: 1; min-width: 0; }
.chk .t { font-weight: 600; font-size: 14px; }
.chk .s { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.fix-box { margin-top: 12px; padding: 12px 13px; border-radius: 13px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); font-size: 14px; }
.fix-box.good { background: color-mix(in srgb, var(--good) 11%, var(--surface)); }
.fix-box .s { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.steps { margin: 6px 0 0; padding-left: 20px; } .steps li { margin-top: 5px; }
.mono { font-variant-numeric: tabular-nums; }
.inline-input { display: flex; gap: 8px; align-items: stretch; }
.inline-input input { flex: 1; min-width: 0; width: 100%; padding: 11px 13px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface); font-size: 16px; outline: none; }
.inline-input .btn { width: auto; flex: none; }

/* New lead screens */
body.wizard .tabbar, body.wizard .fab { display: none; }
body.wizard .page { padding-bottom: calc(96px + var(--safe-b)); }
.wz-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.wz-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin-bottom: 12px; }
.wz-bar i { height: 5px; border-radius: 9px; background: var(--line); transition: background .25s; }
.wz-bar i.on { background: var(--brand); }
.wz-title { font-size: 22px; font-weight: 700; }
.wz-reset { background: none; border: 0; padding: 4px 0 0; color: var(--brand); font-size: 13px; cursor: pointer; }
.wz-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-width: 560px; margin: 0 auto; display: flex; gap: 8px; padding: 10px 14px calc(10px + var(--safe-b)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.wz-foot .btn { flex: 1; }
.wz-foot .btn[data-back] { flex: 0 0 34%; }
.pick-cards { display: grid; gap: 8px; margin-top: 12px; }
.pick-card { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s; }
.pick-card.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card .grow { flex: 1; min-width: 0; }
.pick-card .t { font-weight: 600; } .pick-card .s { font-size: 12.5px; color: var(--ink-3); }
.chips.wrap { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.rv-l { display: flex; gap: 10px; padding: 4px 0; font-size: 14px; }
.rv-l span { flex: 0 0 84px; color: var(--ink-3); } .rv-l b { font-weight: 500; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.media-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.media-btns label { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border: 1.5px dashed var(--line); border-radius: 14px; font-size: 12.5px; color: var(--ink-2); text-align: center; cursor: pointer; }
.media-btns input { display: none; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.media-grid:empty { display: none; }
.tile { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); color: var(--ink-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-ic { width: 100%; height: 100%; display: grid; place-items: center; }
.tile-n { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 4px; font-size: 10.5px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tile-x .ic { width: 14px; height: 14px; }
.btn:disabled { opacity: .5; }

/* Notifications bell on the home hero */
.avatar.bell { position: relative; margin-right: 6px; }
.bell-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }