.phone-symbol.mobile-preview {
  position: relative;
  width: 246px;
  min-height: 470px;
  padding: 0;
  border: 11px solid #152a35;
  border-radius: 30px;
  background: #f4f8fb;
  box-shadow: 0 28px 55px rgba(4, 35, 66, .28);
  color: #123653;
  transform: rotate(2deg);
  overflow: hidden;
}
.mobile-preview::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 64px;
  height: 6px;
  border-radius: 8px;
  background: #091820;
  transform: translateX(-50%);
  z-index: 3;
}
.mobile-status {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 9px 13px 7px;
  background: #063e77;
  color: #dcebfa;
  font-size: 9px;
  font-weight: 700;
}
.mobile-appbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 15px 15px;
  background: linear-gradient(135deg, #0874d7, #0553a8);
  color: #fff;
  box-shadow: 0 6px 15px rgba(0, 76, 150, .22);
}
.mobile-appbar i {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: rgba(255,255,255,.18);
  font-style: normal;
  font-size: 16px;
}
.mobile-appbar strong {font-size: 14px;line-height: 1.1}
.mobile-appbar small {display: block;margin: 3px 0 0;color: #dceeff;font-size: 8px}
.mobile-summary {
  width: calc(100% - 24px);
  margin: 14px 12px 10px;
  padding: 13px;
  border: 1px solid #d5e4ef;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(17, 65, 103, .08);
}
.mobile-summary>small {display:block;margin:0;color:#668099;font-size:8px;text-transform:uppercase;letter-spacing:.7px}
.mobile-summary>b {display:block;margin:4px 0 10px;color:#0b3154;font-size:16px}
.mobile-progress {display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:8px;color:#4f6c85}
.mobile-progress i {display:block;height:7px;border-radius:5px;background:linear-gradient(90deg,#0a76d8 68%,#dbe8f1 68%);grid-column:1/-1}
.mobile-actions {width:100%;display:grid;gap:8px;padding:0 12px 12px}
.mobile-action {
  width: 100%;
  display: grid;
  grid-template-columns: 35px 1fr 12px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d9e5ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(17, 65, 103, .06);
}
.mobile-action i {display:grid;place-items:center;width:35px;height:35px;border-radius:9px;background:#e7f3fd;color:#0767c0;font-style:normal;font-size:16px}
.mobile-action strong {display:block;color:#113957;font-size:10px}
.mobile-action small {display:block;margin:2px 0 0;color:#7890a4;font-size:7px}
.mobile-action em {color:#0b70ce;font-style:normal;font-size:14px}
.mobile-homebar {width:70px;height:4px;margin:0 auto 8px;border-radius:5px;background:#9fb2bf}
@media(max-width:620px){.phone-symbol.mobile-preview{width:224px;min-height:430px}.mobile-action{padding:8px}.mobile-summary{margin-top:11px}}