/* ==========================================================================
   Android APK — UI Material Design 3 di dalam bingkai ponsel
   ========================================================================== */
.m-app {
  --m-primary: #146c2e; --m-on-primary: #fff; --m-pc: #a3f5ad; --m-on-pc: #002107;
  --m-sec-c: #d3e8d1; --m-tert: #00658f;
  --m-surface: #f6fbf2; --m-sc-low: #f0f5ec; --m-sc: #eaefe6; --m-sc-high: #e4eae0; --m-sc-highest: #dfe4da;
  --m-on-surface: #171d17; --m-on-sv: #414941; --m-outline: #717970; --m-outline-v: #c1c9be;
  --m-error: #ba1a1a; --m-error-c: #ffdad6; --m-on-error-c: #410002; --m-warn-c: #ffdcbe; --m-on-warn-c: #6a3b00;
  position: absolute; inset: 0; overflow: hidden; background: var(--m-surface); color: var(--m-on-surface);
  font-family: Roboto, "Plus Jakarta Sans", system-ui, sans-serif; font-size: 14px; letter-spacing: .01em;
}
[data-theme="dark"] .m-app {
  --m-primary: #88d995; --m-on-primary: #00391a; --m-pc: #005322; --m-on-pc: #a3f5ad;
  --m-sec-c: #384b39; --m-tert: #7fd0ff;
  --m-surface: #0f1510; --m-sc-low: #171d17; --m-sc: #1b211b; --m-sc-high: #252b25; --m-sc-highest: #30362f;
  --m-on-surface: #dee5da; --m-on-sv: #c1c9be; --m-outline: #8b9389; --m-outline-v: #414941;
  --m-error: #ffb4ab; --m-error-c: #93000a; --m-on-error-c: #ffdad6; --m-warn-c: #5a3300; --m-on-warn-c: #ffdcbe;
}
.m-app button { font-family: inherit; color: inherit; border: 0; background: none; padding: 0; }
.m-app svg.lucide { width: 22px; height: 22px; stroke-width: 1.9; }

.m-status { position: absolute; top: 0; left: 0; right: 0; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0 28px; font-size: 13.5px; font-weight: 500; z-index: 60; pointer-events: none; }
.m-status .ic { display: flex; gap: 5px; align-items: center; }
.m-status svg.lucide { width: 15px; height: 15px; stroke-width: 2.2; }
.m-status.light { color: #fff; }

.m-main { position: absolute; inset: 0; }
.m-body { position: absolute; top: 38px; left: 0; right: 0; bottom: 96px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.m-body::-webkit-scrollbar { display: none; }
.m-top { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 16px; background: var(--m-surface); transition: background .2s; }
.m-top.scrolled { background: var(--m-sc); }
.m-top h2 { font-size: 22px; font-weight: 400; letter-spacing: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-top .hello { flex: 1; min-width: 0; }
.m-top .hello span { display: block; font-size: 12.5px; color: var(--m-on-sv); }
.m-top .hello b { display: block; font-size: 19px; font-weight: 500; }
.m-ib { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--m-on-sv); }
.m-ib:active, .m-ib:hover { background: color-mix(in srgb, var(--m-on-surface) 8%, transparent); }
.m-ib .bdg { position: absolute; top: 9px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--m-error); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
[data-theme="dark"] .m-ib .bdg { color: #690005; }
.m-ib .bdg:empty { display: none; }
.m-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--m-pc); color: var(--m-on-pc); font-weight: 700; font-size: 13px; }
.m-pad { padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.m-sec { display: flex; align-items: center; justify-content: space-between; margin: 6px 4px -4px; }
.m-sec h3 { font-size: 15px; font-weight: 500; }
.m-sec button { color: var(--m-primary); font-weight: 500; font-size: 13.5px; }

/* Kartu */
.m-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 20px; color: #fff; background: radial-gradient(260px 160px at 100% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(140deg, #0f5f2a, #1d8a43 60%, #4aa63a); }
[data-theme="dark"] .m-hero { background: radial-gradient(260px 160px at 100% 0%, rgba(255, 255, 255, .1), transparent 60%), linear-gradient(140deg, #0a3d1b, #13602f 60%, #2c6e24); }
.m-hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .08); }
.m-hero small { font-size: 12.5px; opacity: .85; }
.m-hero .big { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px; }
.m-hero .big b { font-size: 46px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.m-hero .big span { font-size: 16px; opacity: .8; }
.m-hero .ring { position: absolute; right: 18px; top: 20px; }
.m-hero .ring .ring-track { stroke: rgba(255, 255, 255, .22); }
.m-hero .ring b { color: #fff; font-size: 14px; }
.m-hero .chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.m-hero .chips span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 10px; background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 500; }
.m-hero .chips svg.lucide { width: 15px; height: 15px; }
.m-card { background: var(--m-sc-low); border-radius: 18px; padding: 16px; }
.m-card.out { background: var(--m-surface); border: 1px solid var(--m-outline-v); }
.m-dept { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 12px; border-radius: 18px; background: var(--m-sc-low); width: 100%; text-align: left; transition: background .15s; }
.m-dept:active { background: var(--m-sc-high); }
.m-dept .ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--c); flex-shrink: 0; }
.m-dept .grow b { font-size: 15px; font-weight: 500; display: block; }
.m-dept .grow small { font-size: 12.5px; color: var(--m-on-sv); }
.m-dept .bar { margin-top: 8px; height: 5px; background: var(--m-sc-highest); }
.m-dept .bar i { background: var(--c); }
.m-dept .n { text-align: right; }
.m-dept .n b { display: block; font-size: 17px; font-weight: 500; }
.m-dept .n small { font-size: 11px; color: var(--m-on-sv); }
.m-alert { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--m-error-c); color: var(--m-on-error-c); width: 100%; text-align: left; }
.m-alert .ico { width: 40px; height: 40px; border-radius: 50%; background: var(--m-error); color: #fff; display: grid; place-items: center; flex-shrink: 0; animation: mPulse 1.8s infinite; }
[data-theme="dark"] .m-alert .ico { color: #690005; }
.m-alert b { display: block; font-size: 14px; font-weight: 600; }
.m-alert small { font-size: 12.5px; opacity: .85; display: block; line-height: 1.35; }
@keyframes mPulse { 0% { box-shadow: 0 0 0 0 rgba(186, 26, 26, .45); } 70% { box-shadow: 0 0 0 10px rgba(186, 26, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(186, 26, 26, 0); } }
.m-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 12px; }
.m-bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.m-bars .col i { display: block; border-radius: 4px; background: var(--c); min-height: 3px; }
.m-bars-l { display: flex; gap: 8px; margin-top: 6px; }
.m-bars-l span { flex: 1; text-align: center; font-size: 11px; color: var(--m-on-sv); }
.m-legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--m-on-sv); }
.m-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }

/* Daftar */
.m-item { display: flex; gap: 12px; align-items: center; padding: 10px 16px; width: 100%; text-align: left; transition: background .12s; }
.m-item:active { background: color-mix(in srgb, var(--m-on-surface) 8%, transparent); }
.m-item img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.m-item .grow { min-width: 0; }
.m-item b { display: block; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-item small { display: block; font-size: 12.5px; color: var(--m-on-sv); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-item .meta { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.m-item time { font-size: 11.5px; color: var(--m-on-sv); }
.m-st { height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.m-st.pending { background: var(--m-warn-c); color: var(--m-on-warn-c); }
.m-st.approved { background: var(--m-pc); color: var(--m-on-pc); }
.m-st.revision { background: #eaddff; color: #21005d; }
.m-st.rejected { background: var(--m-error-c); color: var(--m-on-error-c); }
[data-theme="dark"] .m-st.revision { background: #4f378b; color: #eaddff; }
.m-divider { height: 1px; background: var(--m-outline-v); margin: 0 16px; opacity: .6; }
.m-search { display: flex; align-items: center; gap: 12px; height: 54px; margin: 4px 16px 10px; padding: 0 16px; border-radius: 28px; background: var(--m-sc-high); color: var(--m-on-sv); }
.m-search input { flex: 1; border: 0; background: none; outline: none; font: inherit; font-size: 15px; color: var(--m-on-surface); min-width: 0; }
.m-chips { display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chip { flex-shrink: 0; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--m-outline) !important; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--m-on-sv) !important; }
.m-chip.on { background: var(--m-sec-c) !important; border-color: transparent !important; color: var(--m-on-surface) !important; }
.m-chip svg.lucide { width: 16px; height: 16px; }
.m-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 0 16px 10px; border: 1px solid var(--m-outline); border-radius: 20px; overflow: hidden; }
.m-seg button { height: 38px; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }
.m-seg button + button { border-left: 1px solid var(--m-outline) !important; }
.m-seg button.on { background: var(--m-sec-c); }
.m-seg svg.lucide { width: 16px; height: 16px; }
.m-group { font-size: 13px; font-weight: 500; color: var(--m-primary); padding: 14px 16px 6px; }
.m-notif { display: flex; gap: 14px; padding: 12px 16px; width: 100%; text-align: left; position: relative; }
.m-notif.unread::after { content: ""; position: absolute; right: 18px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--m-primary); }
.m-notif .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--m-sec-c); }
.m-notif .ico.alert { background: var(--m-error-c); color: var(--m-error); }
.m-notif .ico svg.lucide { width: 20px; height: 20px; }
.m-notif b { display: block; font-size: 14px; font-weight: 500; padding-right: 18px; }
.m-notif p { font-size: 13px; color: var(--m-on-sv); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-notif time { font-size: 11.5px; color: var(--m-on-sv); }
.m-empty { text-align: center; padding: 50px 30px; color: var(--m-on-sv); }

/* Navigasi bawah */
.m-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; padding: 12px 0 22px; background: var(--m-sc); display: grid; grid-template-columns: repeat(4, 1fr); z-index: 40; }
.m-nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--m-on-sv); position: relative; }
.m-nav .pill { width: 64px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: background .25s; position: relative; }
.m-nav .on { color: var(--m-on-surface); font-weight: 700; }
.m-nav .on .pill { background: var(--m-sec-c); }
.m-nav .bdg { position: absolute; top: -3px; left: 36px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--m-error); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
[data-theme="dark"] .m-nav .bdg { color: #690005; }
.m-nav .bdg:empty { display: none; }
.m-gesture { position: absolute; left: 50%; bottom: 8px; width: 108px; height: 4px; margin-left: -54px; border-radius: 2px; background: var(--m-on-surface); opacity: .45; z-index: 70; }

/* Layar tumpuk (detail, profil) */
.m-layer { position: absolute; inset: 0; background: var(--m-surface); z-index: 45; transform: translateX(100%); transition: transform .34s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.m-layer.open { transform: none; box-shadow: -10px 0 30px rgba(0, 0, 0, .15); }
.m-layer .m-body { bottom: 0; }
.m-layer.has-actions .m-body { bottom: 96px; }
.m-actions { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; padding: 14px 16px 30px; display: flex; gap: 10px; background: var(--m-sc); z-index: 5; }
.m-btn { height: 44px; border-radius: 22px; padding: 0 22px; font-weight: 500 !important; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.m-btn.filled { background: var(--m-primary) !important; color: var(--m-on-primary) !important; }
.m-btn.outlined { border: 1px solid var(--m-outline) !important; color: var(--m-primary) !important; }
.m-btn.tonal { background: var(--m-sec-c) !important; }
.m-btn.danger { background: var(--m-error) !important; color: #fff !important; }
.m-btn svg.lucide { width: 18px; height: 18px; }
.m-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; padding: 0 16px; }
.m-carousel::-webkit-scrollbar { display: none; }
.m-carousel img { flex: 0 0 100%; width: 100%; height: 210px; object-fit: cover; border-radius: 24px; scroll-snap-align: center; }
.m-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.m-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--m-outline-v); transition: .2s; }
.m-dots i.on { width: 18px; background: var(--m-primary); }
.m-det h1 { font-size: 21px; font-weight: 500; line-height: 1.3; margin: 2px 0 10px; letter-spacing: 0; }
.m-det .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.m-tag { height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; background: var(--m-sc-high); }
.m-tag svg.lucide { width: 14px; height: 14px; }
.m-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-info div { padding: 12px; border-radius: 14px; background: var(--m-sc-low); }
.m-info span { display: block; font-size: 11.5px; color: var(--m-on-sv); }
.m-info b { display: block; font-size: 14px; font-weight: 500; margin-top: 2px; }
.m-acts li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 14px; }
.m-acts li svg.lucide { width: 18px; height: 18px; color: var(--m-primary); margin-top: 1px; }
.m-issue { border-radius: 16px; padding: 14px; background: var(--m-warn-c); color: var(--m-on-warn-c); }
.m-issue.berat { background: var(--m-error-c); color: var(--m-on-error-c); }
.m-issue b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.m-issue p { font-size: 13.5px; margin-top: 6px; line-height: 1.45; }
.m-progress { height: 8px; border-radius: 4px; background: var(--m-sc-highest); overflow: hidden; margin: 8px 0 4px; }
.m-progress i { display: block; height: 100%; border-radius: 4px; background: var(--c, var(--m-primary)); }
.m-app .minimap { border-color: var(--m-outline-v); border-radius: 16px; }
.m-app .minimap svg { height: 120px; }
.m-app .minimap-cap { background: var(--m-sc-low); border-color: var(--m-outline-v); }
.m-app .minimap-cap svg.lucide { width: 14px; height: 14px; }
.m-review { padding: 14px; border-radius: 16px; background: var(--m-sc-low); font-size: 13.5px; }
.m-review b { font-weight: 600; }

/* Profil */
.m-prof { text-align: center; padding: 10px 16px 18px; }
.m-prof .m-av { width: 84px; height: 84px; font-size: 28px; margin: 0 auto 12px; }
.m-prof b { font-size: 20px; font-weight: 500; display: block; }
.m-prof small { color: var(--m-on-sv); font-size: 13.5px; }
.m-set { display: flex; align-items: center; gap: 16px; padding: 14px 20px; width: 100%; text-align: left; }
.m-set > svg.lucide { color: var(--m-on-sv); }
.m-set .grow b { display: block; font-size: 15px; font-weight: 400; }
.m-set .grow small { display: block; font-size: 12.5px; color: var(--m-on-sv); }
.m-switch { position: relative; width: 52px; height: 32px; border-radius: 16px; border: 2px solid var(--m-outline); background: var(--m-sc-highest); flex-shrink: 0; transition: .2s; }
.m-switch::after { content: ""; position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--m-outline); transition: .22s cubic-bezier(.2, .9, .3, 1.2); }
.m-switch.on { background: var(--m-primary); border-color: var(--m-primary); }
.m-switch.on::after { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--m-on-primary); }

/* Snackbar, sheet, heads-up */
.m-snack { position: absolute; left: 12px; right: 12px; bottom: 108px; z-index: 80; background: #2d322c; color: #eef2ea; border-radius: 6px; padding: 14px 16px; font-size: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transform: translateY(16px); opacity: 0; pointer-events: none; transition: .25s; }
[data-theme="dark"] .m-snack { background: #dee5da; color: #2d322c; }
.m-snack.show { transform: none; opacity: 1; pointer-events: auto; }
.m-snack button { margin-left: auto; color: #88d995 !important; font-weight: 600 !important; }
[data-theme="dark"] .m-snack button { color: #146c2e !important; }
.m-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); z-index: 85; opacity: 0; pointer-events: none; transition: opacity .25s; }
.m-scrim.on { opacity: 1; pointer-events: auto; }
.m-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--m-sc-low); border-radius: 28px 28px 0 0; padding: 10px 20px 34px; transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.m-sheet.open { transform: none; }
.m-sheet .handle { width: 32px; height: 4px; border-radius: 2px; background: var(--m-outline); margin: 6px auto 16px; opacity: .6; }
.m-sheet h3 { font-size: 20px; font-weight: 400; margin-bottom: 4px; }
.m-sheet p { font-size: 13.5px; color: var(--m-on-sv); margin-bottom: 14px; }
.m-field { width: 100%; min-height: 90px; border-radius: 6px; border: 1px solid var(--m-outline); background: transparent; padding: 12px; font: inherit; font-size: 14px; color: var(--m-on-surface); outline: none; resize: none; }
.m-field:focus { border: 2px solid var(--m-primary); padding: 11px; }
.m-headsup { position: absolute; top: 44px; left: 8px; right: 8px; z-index: 95; display: flex; gap: 12px; padding: 14px 16px; border-radius: 26px; background: var(--m-sc-high); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transform: translateY(-160%); transition: transform .45s cubic-bezier(.2, .9, .3, 1.15); text-align: left; width: auto; }
.m-headsup.show { transform: none; }
.m-headsup .app-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--m-primary); color: var(--m-on-primary); flex-shrink: 0; }
.m-headsup .app-ic svg.lucide { width: 20px; height: 20px; }
.m-headsup .t { font-size: 12px; color: var(--m-on-sv); }
.m-headsup b { display: block; font-size: 14px; font-weight: 600; margin: 1px 0; }
.m-headsup p { font-size: 13px; color: var(--m-on-sv); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Splash & login */
.m-splash { position: absolute; inset: 0; z-index: 150; display: grid; place-items: center; align-content: center; gap: 18px; color: #fff; background: radial-gradient(400px 400px at 50% 40%, #1f8f45, #0b4a20); transition: opacity .5s, visibility .5s; }
.m-splash.hide { opacity: 0; visibility: hidden; }
.m-splash .logo-mark { width: 92px; height: 92px; border-radius: 28px; animation: splashPop .9s cubic-bezier(.2, .9, .3, 1.3) both; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.m-splash b { font-size: 26px; font-weight: 600; letter-spacing: -.01em; animation: slideUp .6s .25s both; text-align: center; }
.m-splash small { display: block; font-size: 13px; opacity: .75; font-weight: 400; margin-top: 4px; }
.m-splash .ld { position: absolute; bottom: 70px; width: 120px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.m-splash .ld::after { content: ""; position: absolute; inset: 0; width: 40%; background: #fff; border-radius: 2px; animation: ld 1.1s ease-in-out infinite; }
@keyframes ld { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes splashPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.m-login { position: absolute; inset: 0; z-index: 140; background: var(--m-surface); display: flex; flex-direction: column; align-items: center; padding: 86px 28px 40px; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s; }
.m-login.hide { transform: translateY(-30px); opacity: 0; pointer-events: none; }
.m-login .m-av { width: 72px; height: 72px; font-size: 24px; }
.m-login h3 { font-size: 22px; font-weight: 400; margin-top: 16px; }
.m-login p { color: var(--m-on-sv); font-size: 13.5px; margin-top: 4px; }
.pin { display: flex; gap: 16px; margin: 28px 0 26px; }
.pin i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--m-outline); transition: .15s; }
.pin i.on { background: var(--m-primary); border-color: var(--m-primary); transform: scale(1.1); }
.pin.err { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px 26px; }
.keypad button { width: 72px; height: 72px; border-radius: 50%; font-size: 28px; font-weight: 400; display: grid; place-items: center; background: var(--m-sc-high) !important; transition: background .12s; }
.keypad button:active { background: var(--m-sc-highest) !important; }
.keypad button.ghost { background: none !important; }
.keypad button.fp { color: var(--m-primary) !important; }
.keypad button svg.lucide { width: 28px; height: 28px; }
.fp-scan { position: absolute; inset: 0; z-index: 145; display: grid; place-items: center; align-content: center; gap: 16px; background: color-mix(in srgb, var(--m-surface) 90%, transparent); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.fp-scan.on { opacity: 1; pointer-events: auto; }
.fp-scan .fp { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: var(--m-primary); background: var(--m-pc); position: relative; overflow: hidden; }
.fp-scan .fp svg.lucide { width: 52px; height: 52px; stroke-width: 1.5; }
.fp-scan .fp::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--m-primary); box-shadow: 0 0 12px var(--m-primary); animation: scanY 1s ease-in-out infinite alternate; }
.fp-scan.ok .fp::after { display: none; }
.fp-scan b { font-size: 15px; font-weight: 500; }
@keyframes scanY { from { top: 10%; } to { top: 88%; } }