/* ============================================================
   KOREVRA CRM+ — v10 · Mobile App (phone simulator)
   Realistic device · screen stack · transitions · effects
============================================================ */
.mobile-shell-v10{ display: grid; grid-template-columns: 400px 1fr; gap: 36px; align-items: start; }
@media(max-width: 1100px){ .mobile-shell-v10{ grid-template-columns: 1fr; } }

/* ---------- Device ---------- */
.mp-device{
  width: 390px; margin: 0 auto;
  background: linear-gradient(160deg, #2a2d35, #14151a);
  border-radius: 54px;
  padding: 13px;
  box-shadow:
    0 0 0 2px #3a3d45,
    0 0 0 8px #1a1b20,
    0 50px 90px -30px rgba(0,0,0,.8),
    inset 0 0 6px rgba(255,255,255,.06);
  position: relative;
}
.mp-device::before{ /* side buttons */
  content:""; position:absolute; left:-3px; top:150px; width:3px; height:64px; border-radius:3px 0 0 3px; background:linear-gradient(180deg,#3a3d45,#26272d); box-shadow:0 84px 0 #3a3d45, 0 -84px 0 #3a3d45;
}
.mp-device::after{ content:""; position:absolute; right:-3px; top:185px; width:3px; height:90px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#3a3d45,#26272d); }
.mp-screen{
  background: var(--navy-deep);
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  height: 800px;
  display: flex; flex-direction: column;
}
/* Dynamic island */
.mp-island{
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 33px; background: #000; border-radius: 20px; z-index: 60;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; gap: 8px;
}
.mp-island::before{ content:""; width:9px; height:9px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #2a3a4a, #050608 70%); }

/* Status bar */
.mp-statusbar{
  height: 52px; flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 26px 6px; z-index: 55;
  font-family: var(--ff-sans); color: var(--cream);
}
.mp-sb-time{ font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.mp-sb-right{ display: flex; align-items: center; gap: 6px; }
.mp-sb-carrier{ font-size: 10px; opacity: .8; letter-spacing: .04em; margin-right: 2px; }
.mp-sb-bars{ display: inline-flex; gap: 2px; align-items: flex-end; }
.mp-sb-bars i{ width: 3px; background: var(--cream); border-radius: 1px; display:block; }
.mp-sb-bars i:nth-child(1){ height:4px; } .mp-sb-bars i:nth-child(2){ height:6px; } .mp-sb-bars i:nth-child(3){ height:8px; } .mp-sb-bars i:nth-child(4){ height:10px; }
.mp-sb-bat{ width: 24px; height: 12px; border: 1.3px solid rgba(244,237,223,.6); border-radius: 3px; position: relative; padding: 1.5px; }
.mp-sb-bat::after{ content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px; background: rgba(244,237,223,.6); border-radius: 0 1px 1px 0; }
.mp-sb-bat i{ display:block; height:100%; width:82%; background: var(--cream); border-radius: 1px; }

/* Viewport (screen content) */
.mp-viewport{ flex: 1; position: relative; overflow: hidden; }
.mp-page{
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--navy-deep);
}
.mp-page::-webkit-scrollbar{ width: 0; }
.mp-page.tabbed{ padding-bottom: 78px; }
.mp-page.headered{ }

@keyframes mpInRight{ from{ transform: translateX(100%);} to{ transform: translateX(0);} }
@keyframes mpOutLeft{ from{ transform: translateX(0);} to{ transform: translateX(-26%); opacity:.5;} }
@keyframes mpInLeft{ from{ transform: translateX(-26%); opacity:.5;} to{ transform: translateX(0); opacity:1;} }
@keyframes mpOutRight{ from{ transform: translateX(0);} to{ transform: translateX(100%);} }
@keyframes mpFade{ from{opacity:0; transform: scale(.98);} to{opacity:1; transform:scale(1);} }
.mp-in-right{ animation: mpInRight .34s cubic-bezier(.2,.7,.2,1); }
.mp-out-left{ animation: mpOutLeft .34s cubic-bezier(.2,.7,.2,1) forwards; z-index:1; }
.mp-in-left{ animation: mpInLeft .34s cubic-bezier(.2,.7,.2,1); }
.mp-out-right{ animation: mpOutRight .34s cubic-bezier(.2,.7,.2,1) forwards; z-index:2; }
.mp-fade{ animation: mpFade .3s ease; }

/* App header (sub-screens) */
.mp-head{
  display: grid; grid-template-columns: 36px 1fr 36px; align-items: center;
  padding: 6px 16px 12px; gap: 8px;
  position: sticky; top: 0; background: var(--navy-deep); z-index: 20;
  border-bottom: 1px solid var(--rule-cream);
}
.mp-head.flush{ border-bottom: 0; }
.mp-back{ width: 34px; height: 34px; border-radius: 50%; background: rgba(244,237,223,.06); border: 1px solid var(--rule-cream); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; }
.mp-back:active{ transform: scale(.92); }
.mp-head-title{ font-family: var(--ff-serif); font-size: 17px; color: var(--cream); font-weight: 500; text-align: center; }
.mp-head-action{ width: 34px; height: 34px; border-radius: 50%; background: rgba(212,168,67,.12); border: 1px solid var(--rule); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }

/* Tab bar */
.mp-tabbar{
  position: absolute; bottom: 0; left: 0; right: 0; height: 72px;
  background: rgba(8,27,51,.92); backdrop-filter: blur(20px);
  border-top: 1px solid var(--rule-cream);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: 8px; z-index: 40;
}
.mp-tab{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--cream); opacity: .66; transition: opacity .15s; padding-top: 8px; position: relative; }
.mp-tab.active{ opacity: 1; color: var(--gold); }
.mp-tab.active::before{ content:""; position:absolute; top:0; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.mp-tab-ic{ font-size: 19px; height: 22px; display:flex; align-items:center; }
.mp-tab-lbl{ font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; }
.mp-tab .mp-tab-fab{ width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--navy-deep); display:flex; align-items:center; justify-content:center; font-size: 24px; font-weight: 700; margin-top: -18px; box-shadow: 0 -6px 18px -6px rgba(212,168,67,.6); }

/* Home indicator */
.mp-home-ind{ position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 130px; height: 5px; border-radius: 3px; background: rgba(244,237,223,.5); z-index: 70; }

/* ---------- Generic app content ---------- */
.mp-pad{ padding: 8px 18px 18px; }
.mp-greet{ font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mp-h1{ font-family: var(--ff-serif); font-size: 24px; color: var(--cream); letter-spacing: -.015em; font-weight: 400; }
.mp-h1 em{ color: var(--gold); font-style: italic; }
.mp-row{ display: flex; align-items: center; justify-content: space-between; }
.mp-av{ width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep)); color: var(--cream); display:flex; align-items:center; justify-content:center; font-family: var(--ff-serif); font-weight: 600; font-size: 15px; border: 2px solid var(--gold); position: relative; }
.mp-av .dot{ position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%; background: var(--good); border: 2px solid var(--navy-deep); }

/* Hero card with progress ring */
.mp-hero{ background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--navy-deep); border-radius: 20px; padding: 18px; margin-top: 14px; position: relative; overflow: hidden; }
.mp-hero::after{ content:""; position:absolute; top:-40px; right:-30px; width:150px; height:150px; background: rgba(255,255,255,.1); border-radius:50%; }
.mp-hero-grid{ display: grid; grid-template-columns: 1fr 80px; gap: 12px; align-items: center; position: relative; z-index:1; }
.mp-hero-l{ font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.mp-hero-v{ font-family: var(--ff-serif); font-size: 34px; font-weight: 500; letter-spacing: -.025em; line-height: 1; margin: 2px 0; }
.mp-hero-d{ font-family: var(--ff-mono); font-size: 11px; }
.mp-ring{ width: 76px; height: 76px; }
.mp-ring circle{ fill: none; stroke-width: 8; }
.mp-ring .bg{ stroke: rgba(0,0,0,.15); }
.mp-ring .fg{ stroke: var(--navy-deep); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1); }
.mp-ring-txt{ font-family: var(--ff-serif); font-size: 17px; font-weight: 700; fill: var(--navy-deep); }

.mp-stat2{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mp-stat{ background: rgba(244,237,223,.05); border: 1px solid var(--rule-cream); border-radius: 14px; padding: 13px 15px; }
.mp-stat .l{ font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); opacity: .6; }
.mp-stat .v{ font-family: var(--ff-serif); font-size: 21px; color: var(--gold); font-weight: 500; letter-spacing: -.015em; margin-top: 3px; }
.mp-stat .d{ font-family: var(--ff-mono); font-size: 9.5px; margin-top: 2px; }
.mp-stat .d.up{ color: var(--good); } .mp-stat .d.down{ color: var(--bad-ink); }

.mp-sec{ margin-top: 18px; }
.mp-sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 10px; }
.mp-sec-t{ font-family: var(--ff-serif); font-size: 15px; color: var(--cream); font-weight: 500; }
.mp-sec-m{ font-family: var(--ff-mono); font-size: 10px; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }

.mp-card{ background: rgba(244,237,223,.04); border: 1px solid var(--rule-cream); border-radius: 16px; padding: 14px; margin-bottom: 10px; cursor: pointer; position: relative; overflow: hidden; transition: transform .1s; }
.mp-card:active{ transform: scale(.98); }
.mp-card.gold{ background: linear-gradient(135deg, rgba(212,168,67,.18), rgba(212,168,67,.04)); border-color: var(--rule); }
.mp-card-top{ display:flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mp-card-t{ font-family: var(--ff-serif); font-size: 14.5px; color: var(--cream); font-weight: 500; line-height: 1.25; }
.mp-card-s{ font-family: var(--ff-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft); margin-top: 4px; }
.mp-card-tag{ font-family: var(--ff-mono); font-size: 8.5px; padding: 3px 7px; border-radius: 8px; background: rgba(91,193,120,.16); color: var(--good); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mp-card-tag.gold{ background: rgba(212,168,67,.18); color: var(--gold-ink); }   /* --gold on its own tint was 4.10 */
.mp-card-foot{ display:flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }

/* Quick action grid */
.mp-qa{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.mp-qa-item{ display:flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.mp-qa-ic{ width: 56px; height: 56px; border-radius: 18px; background: rgba(244,237,223,.05); border: 1px solid var(--rule-cream); display:flex; align-items:center; justify-content:center; font-size: 22px; color: var(--gold); transition: all .12s; }
.mp-qa-item:active .mp-qa-ic{ transform: scale(.9); background: rgba(212,168,67,.14); }
.mp-qa-lbl{ font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .04em; color: var(--cream); opacity: .8; text-align:center; }

/* AI nudge */
.mp-nudge{ background: linear-gradient(135deg, rgba(27,138,138,.18), rgba(27,138,138,.04)); border: 1px solid rgba(43,177,177,.4); border-radius: 16px; padding: 14px; margin-top: 14px; }
.mp-nudge-l{ font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 6px; }
.mp-nudge-b{ font-family: var(--ff-sans); font-size: 12.5px; color: var(--cream); line-height: 1.5; }
.mp-nudge-b b{ color: var(--gold-soft); }

/* list rows */
.mp-list{ display:flex; flex-direction: column; }
.mp-li{ display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--rule-cream); cursor: pointer; }
.mp-li:active{ background: rgba(244,237,223,.03); }
.mp-li-av{ width: 42px; height: 42px; border-radius: 13px; display:flex; align-items:center; justify-content:center; font-family: var(--ff-mono); font-size: 13px; font-weight: 700; background: rgba(212,168,67,.12); color: var(--gold); }
.mp-li-t{ font-family: var(--ff-serif); font-size: 14px; color: var(--cream); font-weight: 500; }
.mp-li-s{ font-family: var(--ff-mono); font-size: 9.5px; color: var(--cream); opacity: .6; letter-spacing: .04em; margin-top: 2px; }

/* segmented control */
.mp-seg{ display: flex; gap: 2px; background: rgba(244,237,223,.06); border-radius: 12px; padding: 3px; margin: 0 0 14px; }
.mp-seg-b{ flex:1; background: transparent; border: 0; color: var(--cream); opacity: .6; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 0; border-radius: 9px; cursor: pointer; }
.mp-seg-b.active{ background: var(--gold); color: var(--navy-deep); opacity: 1; font-weight: 700; }

/* primary button */
.mp-btn{ width: 100%; background: var(--gold); color: var(--navy-deep); border: 0; padding: 15px; border-radius: 14px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: transform .1s; }
.mp-btn:active{ transform: scale(.97); }
.mp-btn.ghost{ background: rgba(244,237,223,.06); border: 1px solid var(--rule-cream); color: var(--cream); }
.mp-btn.green{ background: var(--good); }
.mp-btn-row{ display:flex; gap: 8px; }

/* GPS check-in animation */
.mp-gps{ display:flex; flex-direction: column; align-items: center; padding: 30px 0; }
.mp-gps-pin{ width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(91,193,120,.25), transparent 70%); display:flex; align-items:center; justify-content:center; position: relative; }
.mp-gps-pin::before, .mp-gps-pin::after{ content:""; position:absolute; inset:0; border-radius:50%; border: 2px solid var(--good); animation: gpspulse 2s ease-out infinite; }
.mp-gps-pin::after{ animation-delay: 1s; }
@keyframes gpspulse{ 0%{ transform: scale(.6); opacity: 1;} 100%{ transform: scale(1.6); opacity: 0;} }
.mp-gps-dot{ width: 18px; height: 18px; border-radius:50%; background: var(--good); border: 3px solid var(--navy-deep); z-index:1; }

/* Camera viewfinder (shelf audit) */
.mp-cam{ background: #0a0e14; border-radius: 16px; height: 300px; position: relative; overflow: hidden; margin-bottom: 14px; }
.mp-cam-shelf{ position:absolute; inset: 16px; display:flex; flex-direction: column; gap: 6px; justify-content: center; }
.mp-cam-shelf .r{ display:flex; gap: 5px; height: 56px; }
.mp-cam-shelf .b{ flex:1; border-radius: 3px; }
.mp-cam-frame{ position:absolute; inset: 12px; border: 2px solid rgba(212,168,67,.6); border-radius: 12px; pointer-events:none; }
.mp-cam-corner{ position:absolute; width: 22px; height: 22px; border: 3px solid var(--gold); }
.mp-cam-scan{ position:absolute; left: 12px; right: 12px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: scanline 2s ease-in-out infinite; }
@keyframes scanline{ 0%{ top: 14px;} 50%{ top: 280px;} 100%{ top: 14px;} }
.mp-cam-hint{ position:absolute; bottom: 14px; left:0; right:0; text-align:center; font-family: var(--ff-mono); font-size: 10px; color: var(--gold); letter-spacing: .1em; }

/* numeric keypad */
.mp-keypad{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mp-key{ background: rgba(244,237,223,.05); border: 1px solid var(--rule-cream); color: var(--cream); font-family: var(--ff-serif); font-size: 24px; padding: 16px 0; border-radius: 14px; cursor: pointer; text-align: center; transition: transform .08s; }
.mp-key:active{ transform: scale(.92); background: rgba(212,168,67,.12); }
.mp-amount{ font-family: var(--ff-serif); font-size: 42px; color: var(--gold); text-align: center; font-weight: 500; letter-spacing: -.02em; padding: 16px 0; }

/* product / order item */
.mp-prod{ display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--rule-cream); }
.mp-prod-ic{ width: 40px; height: 40px; border-radius: 10px; background: rgba(212,168,67,.1); display:flex; align-items:center; justify-content:center; font-size: 18px; }
.mp-qty{ display:flex; align-items:center; gap: 10px; }
.mp-qty-b{ width: 28px; height: 28px; border-radius: 50%; background: rgba(244,237,223,.06); border: 1px solid var(--rule-cream); color: var(--cream); font-size: 16px; cursor: pointer; display:flex; align-items:center; justify-content:center; }
.mp-qty-b:active{ transform: scale(.9); }
.mp-qty-n{ font-family: var(--ff-mono); font-size: 14px; color: var(--cream); min-width: 18px; text-align:center; }

/* bottom sheet */
.mp-sheet-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.5); z-index: 80; opacity: 0; transition: opacity .25s; }
.mp-sheet-backdrop.show{ opacity:1; }
.mp-sheet{ position:absolute; left:0; right:0; bottom:0; background: var(--navy-mid); border-radius: 24px 24px 0 0; padding: 10px 18px 26px; z-index: 81; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); border-top: 1px solid var(--rule); }
.mp-sheet.show{ transform: translateY(0); }
.mp-sheet-grip{ width: 40px; height: 4px; border-radius: 2px; background: rgba(244,237,223,.3); margin: 0 auto 14px; }
.mp-sheet-t{ font-family: var(--ff-serif); font-size: 17px; color: var(--cream); font-weight: 500; margin-bottom: 12px; }

/* confetti */
.mp-confetti{ position:absolute; inset:0; pointer-events:none; z-index: 90; overflow: hidden; }
.mp-conf{ position:absolute; width: 8px; height: 12px; top: -16px; animation: conffall 2.2s ease-in forwards; }
@keyframes conffall{ to{ transform: translateY(820px) rotate(540deg); opacity: .2; } }

/* success check */
.mp-success{ display:flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center; }
.mp-success-ic{ width: 84px; height: 84px; border-radius: 50%; background: rgba(91,193,120,.16); border: 2px solid var(--good); color: var(--good); display:flex; align-items:center; justify-content:center; font-size: 40px; margin-bottom: 18px; animation: popin .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes popin{ from{ transform: scale(0);} to{ transform: scale(1);} }
.mp-success-t{ font-family: var(--ff-serif); font-size: 22px; color: var(--cream); font-weight: 400; margin-bottom: 6px; }
.mp-success-d{ font-family: var(--ff-sans); font-size: 13px; color: var(--cream); opacity: .8; line-height: 1.5; }

/* in-phone toast */
.mp-toast{ position:absolute; bottom: 86px; left: 18px; right: 18px; background: var(--navy-mid); border: 1px solid var(--gold); border-radius: 12px; padding: 12px 14px; z-index: 85; font-family: var(--ff-sans); font-size: 12.5px; color: var(--cream); box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); animation: mpToastIn .3s ease; }
@keyframes mpToastIn{ from{ transform: translateY(20px); opacity: 0;} to{ transform: translateY(0); opacity: 1;} }
.mp-toast b{ color: var(--gold); }

/* leaderboard */
.mp-lb{ display: grid; grid-template-columns: 30px 40px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--rule-cream); }
.mp-lb.you{ background: rgba(212,168,67,.08); margin: 0 -18px; padding: 11px 18px; border-radius: 10px; }
.mp-lb-rank{ font-family: var(--ff-serif); font-size: 17px; color: var(--gold); font-weight: 600; text-align:center; }
.mp-lb-medal{ font-size: 18px; text-align:center; }

/* badges */
.mp-badges{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mp-badge{ background: rgba(244,237,223,.04); border: 1px solid var(--rule-cream); border-radius: 16px; padding: 16px 8px; text-align: center; }
.mp-badge.locked{ opacity: .35; }
.mp-badge-ic{ font-size: 30px; margin-bottom: 6px; }
.mp-badge-t{ font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }

/* chat */
.mp-chat-msg{ max-width: 78%; padding: 9px 13px; border-radius: 14px; font-family: var(--ff-sans); font-size: 13px; line-height: 1.4; margin-bottom: 8px; }
.mp-chat-in{ background: rgba(244,237,223,.06); border-bottom-left-radius: 3px; align-self: flex-start; color: var(--cream); }
.mp-chat-out{ background: linear-gradient(135deg, rgba(212,168,67,.2), rgba(212,168,67,.08)); border: 1px solid var(--rule); border-bottom-right-radius: 3px; align-self: flex-end; color: var(--cream); margin-left: auto; }
.mp-chat-time{ font-family: var(--ff-mono); font-size: 8px; opacity: .5; margin-top: 3px; }
.mp-chat-input{ position: sticky; bottom: 0; display:flex; gap: 8px; padding: 10px 0; background: var(--navy-deep); }
.mp-chat-input input{ flex:1; background: rgba(244,237,223,.06); border: 1px solid var(--rule-cream); border-radius: 18px; padding: 10px 14px; color: var(--cream); font-family: var(--ff-sans); font-size: 13px; }
.mp-send{ width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); border: 0; font-size: 16px; cursor: pointer; }

/* settings rows */
.mp-set-row{ display:flex; align-items:center; justify-content: space-between; padding: 14px 0; border-bottom: 1px dashed var(--rule-cream); }
.mp-set-l{ display:flex; align-items: center; gap: 12px; }
.mp-set-ic{ width: 32px; height: 32px; border-radius: 9px; background: rgba(212,168,67,.1); color: var(--gold); display:flex; align-items:center; justify-content:center; font-size: 15px; }
.mp-set-t{ font-family: var(--ff-sans); font-size: 13.5px; color: var(--cream); }
.mp-toggle-s{ width: 42px; height: 24px; border-radius: 12px; background: rgba(244,237,223,.12); position: relative; cursor: pointer; transition: background .2s; }
.mp-toggle-s.on{ background: var(--good); }
.mp-toggle-s::after{ content:""; position:absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.mp-toggle-s.on::after{ left: 21px; }

/* customer banking skin */
.mp-bank-hero{ background: linear-gradient(135deg, #0F6E6E, #1B8A8A); color: #fff; border-radius: 20px; padding: 18px; margin-top: 14px; position: relative; overflow: hidden; }
.mp-bank-hero::after{ content:""; position:absolute; top:-30px; right:-20px; width:130px; height:130px; background:rgba(255,255,255,.08); border-radius:50%; }
.mp-card-visual{ background: linear-gradient(135deg, #1a3a5c, #0d2240); border-radius: 16px; padding: 18px; position: relative; overflow: hidden; border: 1px solid rgba(244,237,223,.12); }
.mp-card-chip{ width: 36px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, #D4A843, #E5BC4F); margin-bottom: 22px; }
.mp-card-num{ font-family: var(--ff-mono); font-size: 16px; letter-spacing: .14em; color: var(--cream); }

/* right info panel reuse */
.mp-info-card{ background: linear-gradient(180deg, var(--navy-mid), var(--navy)); border: 1px solid var(--rule-cream); border-radius: 4px; padding: 20px; margin-bottom: 18px; }

/* manager live map */
.mp-map{ background: #081B33; border-radius: 16px; height: 200px; position: relative; overflow: hidden; border: 1px solid var(--rule-cream); margin-bottom: 12px; }
.mp-map-dot{ position:absolute; width: 12px; height: 12px; border-radius: 50%; }
.mp-map-dot.live{ background: var(--teal-light); box-shadow: 0 0 0 4px rgba(43,177,177,.25); animation: blink 2s infinite; }
.mp-map-dot.idle{ background: var(--warn); }
.mp-map-dot.done{ background: var(--good); }

@media (max-width: 460px){ .mp-device{ transform: scale(.86); transform-origin: top center; } }