.global-footer {
  position: fixed;
  z-index: 900;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) clamp(86px,21vw,94px) minmax(0,1fr) minmax(0,1fr);
  align-items: stretch;
  width: 100%;
  height: calc(var(--footer-height) + env(safe-area-inset-bottom));
  padding: 0 max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-top: 1px solid #dfe2e6;
  color: #090b0f;
  background: #fff;
  box-shadow: 0 -3px 12px rgba(0,0,0,.1);
  pointer-events: auto;
  touch-action: manipulation;
}
.global-footer::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: clamp(90px,23vw,104px);
  height: 54px;
  border: 1px solid #dfe2e6;
  border-bottom: 0;
  border-radius: 52px 52px 0 0;
  content: "";
  background: #fff;
  box-shadow: 0 -5px 13px rgba(0,0,0,.07);
  transform: translateX(-50%);
  pointer-events: none;
}
.footer-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 0;
  padding: 7px 2px 3px;
  border: 0;
  border-right: 1px solid #eceef1;
  color: #090b0f;
  background: transparent;
  font-size: .84rem;
  font-weight: 680;
  line-height: 1.08;
  gap: 4px;
  touch-action: manipulation;
}
.footer-item:last-child { border-right: 0; }
.footer-item svg { width: 23px; height: 23px; }
.footer-item span { display: block; max-width: 100%; white-space: nowrap; letter-spacing: .005em; text-align: center; }
.footer-item.active { color: #090b0f; }
.footer-item.active::after {
  position: absolute;
  bottom: 2px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: var(--red);
}
.footer-sos {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: end;
  width: clamp(82px,21vw,90px);
  height: clamp(82px,21vw,90px);
  margin: 0 0 3px;
  padding: 0;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 25%,#ff5158 0,#f31d27 27%,#d70b15 64%,#9e050c 100%);
  box-shadow: 0 0 0 1px #ef1b24,0 9px 20px rgba(204,10,20,.42),inset 0 2px 3px rgba(255,255,255,.35);
  touch-action: manipulation;
  pointer-events: auto;
  transition: transform .08s ease,filter .08s ease,box-shadow .08s ease;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.footer-sos:active {
  filter: brightness(.94);
  box-shadow: 0 0 0 1px #ef1b24,0 5px 12px rgba(204,10,20,.35),inset 0 2px 3px rgba(255,255,255,.3);
  transform: scale(.94);
}
.footer-sos:focus-visible { outline: 3px solid rgba(18,99,225,.42); outline-offset: 3px; }
.footer-sos strong { position: relative; z-index: 2; font-size: clamp(1.14rem,5vw,1.35rem); line-height: 1; font-weight: 800; letter-spacing: .01em; }
.sos-rings,.sos-rings::before,.sos-rings::after {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  content: "";
}
.sos-rings::before { inset: 6px; }
.sos-rings::after { inset: 13px; }
.panic-panel {
  position: fixed;
  z-index: 890;
  right: 0;
  bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) - 1px);
  left: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 8px 14px;
  background: linear-gradient(180deg,rgba(244,246,248,0),rgba(244,246,248,.96) 28%,rgba(244,246,248,.99));
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .2s ease,transform .2s ease;
}
.panic-panel.open { pointer-events: auto; opacity: 1; transform: translateY(0); }
.panic-panel-instruction {
  padding: 7px 12px;
  border: 1px solid #e2e6ea;
  border-radius: 999px;
  color: #404a55;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 18px rgba(12,20,28,.08);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.panic-card-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(7px,2vw,14px);
  width: min(calc(100% - 4px),446px);
}
.panic-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 128px;
  height: auto;
  padding: 14px 8px 17px;
  overflow: hidden;
  border: 1px solid #e1e4e8;
  border-radius: 22px;
  color: #111;
  background: #fff;
  box-shadow: 0 13px 34px rgba(0,0,0,.18);
  gap: 7px;
  touch-action: none;
  transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.panic-option svg { width: 39px; height: 39px; flex: 0 0 auto; }
.panic-option span { font-size: clamp(14px,3.8vw,17px); font-weight: 760; line-height: 1.14; text-align: center; }
.panic-option small { color: #6b737d; font-size: clamp(11px,3vw,13px); font-weight: 650; line-height: 1.2; text-align: center; }
.panic-silent { color: #111; }
.panic-medical { color: var(--red); }
.panic-security { color: var(--blue); }
.panic-option.holding {
  border-color: currentColor;
  background: color-mix(in srgb,currentColor 7%,white);
  box-shadow: 0 15px 38px rgba(0,0,0,.22);
  transform: translateY(-3px) scale(1.015);
}
.panic-option.activating { animation: panicActivatePulse .72s ease-in-out infinite alternate; }
.panic-hold-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
.panic-option.holding .panic-hold-progress { animation: panicHoldProgress 2s linear forwards; }
@keyframes panicHoldProgress { to { transform: scaleX(1); } }
@keyframes panicActivatePulse { to { transform: scale(.975); opacity: .78; } }
@media (max-width:680px) {
  .global-footer { grid-template-columns: minmax(0,1fr) minmax(0,1fr) clamp(84px,22vw,90px) minmax(0,1fr) minmax(0,1fr); }
  .footer-item { padding: 6px 1px 3px; font-size: .8rem; }
  .footer-item svg { width: 22px; height: 22px; }
  .footer-sos { width: clamp(80px,22vw,86px); height: clamp(80px,22vw,86px); margin-bottom: 3px; }
}
@media (max-width:360px) {
  .global-footer { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 82px minmax(0,1fr) minmax(0,1fr); }
  .footer-item { font-size: .74rem; gap: 3px; }
  .footer-item svg { width: 21px; height: 21px; }
  .footer-sos { width: 80px; height: 80px; margin-bottom: 3px; }
  .panic-card-grid { gap: 6px; width: 100%; }
  .panic-option { min-height: 122px; padding-inline: 5px; border-radius: 19px; }
  .panic-option svg { width: 36px; height: 36px; }
}
@media (max-height:620px) {
  .footer-sos { width: 78px; height: 78px; }
  .panic-option { min-height: 112px; padding-top: 10px; }
}
