:root{color-scheme:dark;--bg:#080f0d;--bg2:#101917;--surface:rgba(16,28,25,.88);--surface-solid:#111d1a;--surface-soft:rgba(25,38,34,.92);--text:#f6fbf8;--muted:#9fb3ad;--line:rgba(128,161,151,.24);--primary:#36dec4;--primary-2:#14b8a6;--danger:#ff4d4d;--warning:#f59e0b;--safe:#2dd4a7;--shadow:0 22px 60px rgba(0,0,0,.34)}body:not(.dark){color-scheme:light;--bg:#eef5f2;--bg2:#e1ebe8;--surface:rgba(255,255,255,.9);--surface-solid:#fff;--surface-soft:rgba(247,251,249,.94);--text:#10201c;--muted:#61746e;--line:rgba(15,118,110,.16);--primary:#0f766e;--primary-2:#0b5c57;--danger:#dc2626;--warning:#d97706;--safe:#059669;--shadow:0 18px 44px rgba(15,118,110,.14)}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-height:100vh;color:var(--text);background:radial-gradient(circle at top left,rgba(54,222,196,.14),transparent 28rem),radial-gradient(circle at bottom right,rgba(255,77,77,.1),transparent 22rem),linear-gradient(180deg,var(--bg),var(--bg2));font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app-shell{width:min(100%,480px);min-height:100vh;margin:0 auto;padding:18px 16px 110px;position:relative}h1,h2,h3,p{margin:0}h1{font-size:27px;letter-spacing:-.04em}h2{font-size:23px;letter-spacing:-.04em}h3{font-size:18px;letter-spacing:-.03em}small,.muted{color:var(--muted);line-height:1.5}.eyebrow{color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.eyebrow.red{color:#ff9a9a}.hidden{display:none!important}.topbar,.top-actions,.section-head,.hero-panel,.report-item header,.home-report-item,.alarm-banner,.gps-box{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar{margin-bottom:16px}.glass-card,.hero-panel,.stat-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.glass-card{border-radius:26px;padding:18px;margin-bottom:16px}.hero-panel{align-items:flex-start;border-radius:28px;padding:18px;margin-bottom:16px;overflow:hidden;position:relative}.hero-panel:after{content:"";width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(54,222,196,.22),transparent 64%);position:absolute;right:-58px;top:-58px}.hero-meta{display:grid;gap:8px;justify-items:end;position:relative;z-index:1}.login-card{margin-top:28px}.brand-mark{width:72px;height:72px;display:grid;place-items:center;border-radius:24px;margin-bottom:14px;font-size:34px;background:linear-gradient(135deg,var(--primary),#ffb85c);box-shadow:0 16px 34px rgba(54,222,196,.18)}label{display:block;margin:14px 0 8px;font-size:13px;font-weight:800}input,select,textarea{width:100%;padding:14px;color:var(--text);background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;font:inherit;outline:none}textarea{resize:vertical}input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--primary) 58%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent)}.grid-2,.quick-stats,.quick-actions,.profile-grid,.report-actions,.sheet-actions{display:grid;gap:12px}.grid-2{grid-template-columns:1fr 1fr}.quick-stats{grid-template-columns:repeat(3,1fr);margin-bottom:14px}.stat-card{border-radius:22px;padding:14px}.stat-card small,.stat-card strong{display:block}.stat-card strong{margin-top:6px;font-size:22px}button{border:0;font:inherit;font-weight:850;cursor:pointer;transition:transform .16s ease,opacity .16s ease,filter .16s ease}button:active{transform:scale(.98)}.primary-button,.secondary-button,.outline-button,.danger-outline,.icon-button,.segment,.tab,.quick-action,.report-actions button{min-height:46px;border-radius:16px}.primary-button,.secondary-button{width:100%;color:white}.primary-button{margin-top:18px;background:linear-gradient(135deg,var(--primary),var(--primary-2))}.secondary-button{background:linear-gradient(135deg,var(--primary),var(--primary-2))}.outline-button,.icon-button,.segment,.report-actions button,.quick-action{color:var(--text);background:var(--surface-soft);border:1px solid var(--line)}.outline-button{padding:10px 14px}.compact{min-height:40px;padding-inline:14px}.icon-button{width:44px;display:inline-grid;place-items:center;font-size:20px}.danger-outline{width:100%;margin-top:16px;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 38%,var(--line));background:transparent}.disabled-button,button:disabled{opacity:.5;cursor:not-allowed}.pill{min-height:30px;padding:6px 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap}.safe{color:#052b22;background:color-mix(in srgb,var(--safe) 34%,white)}.alert{color:white;background:color-mix(in srgb,var(--danger) 76%,black 6%)}.info{color:#071513;background:color-mix(in srgb,var(--primary) 72%,white 10%)}.warn{color:#241400;background:color-mix(in srgb,var(--warning) 72%,white 10%)}.tabs{position:fixed;left:50%;bottom:16px;z-index:30;transform:translateX(-50%);width:min(calc(100% - 24px),448px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px;border-radius:24px;border:1px solid var(--line);background:rgba(8,15,13,.88);backdrop-filter:blur(20px);box-shadow:0 18px 46px rgba(0,0,0,.28)}body:not(.dark) .tabs{background:rgba(255,255,255,.9)}.tab{display:grid;place-items:center;gap:2px;color:var(--muted);background:transparent}.tab span{font-size:18px}.tab small{font-size:12px}.tab.active{color:white;background:linear-gradient(135deg,var(--primary),var(--primary-2))}.home-reports-list,.reports-list,.audit-list{display:grid;gap:10px;margin-top:14px}.home-report-item,.report-item,.audit-item,.profile-item,.home-empty{padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--surface-soft)}.home-report-item{align-items:flex-start}.home-report-item strong,.home-report-item small{display:block}.report-item header{align-items:flex-start;margin-bottom:10px}.report-item p{margin:8px 0}.report-meta{display:grid;gap:4px}.sos-stage{display:grid;place-items:center;margin:16px 0}.panic-button{width:min(100%,360px);min-height:248px;border-radius:50%;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.22),transparent 26%),radial-gradient(circle at center,rgba(255,90,90,.96) 0 25%,rgba(255,61,61,.94) 26% 42%,rgba(105,12,12,.78) 43% 100%);box-shadow:0 28px 70px rgba(255,61,61,.35);position:relative}.panic-button:before,.panic-button:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18)}.panic-button:before{width:74%;height:74%}.panic-button:after{width:88%;height:88%}.panic-button span{font-size:42px;position:relative;z-index:1}.panic-button strong,.panic-button small{position:relative;z-index:1}.panic-button strong{font-size:22px}.panic-button small{width:76%;color:rgba(255,255,255,.88)}.quick-actions{grid-template-columns:repeat(3,1fr);margin-bottom:16px}.quick-action{min-height:52px;padding:12px 10px;font-size:13px}.standby-card{display:grid;gap:12px}.segmented-control{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;margin-bottom:14px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}.segment.active{color:white;background:linear-gradient(135deg,var(--primary),var(--primary-2))}.report-actions{grid-template-columns:repeat(3,1fr);margin-top:12px}.report-actions button{min-height:40px;padding:8px;font-size:12px}.location-link{display:inline-flex;width:fit-content;margin-top:8px;color:var(--primary);text-decoration:none;font-weight:900}.report-photo{width:100%;max-height:260px;object-fit:cover;display:block;margin-top:12px;border-radius:18px;border:1px solid var(--line)}.locked-note{display:inline-flex;margin-top:10px;padding:8px 10px;border-radius:14px;color:var(--muted);background:color-mix(in srgb,var(--surface-soft) 86%,var(--primary) 14%);font-size:12px;font-weight:800}.home-empty,.empty-state{color:var(--muted);border:1px dashed var(--line);text-align:center}.empty-state{padding:18px;border-radius:18px}.security-card ul{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.6}.modal{position:fixed;inset:0;z-index:70}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(10px)}.bottom-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,480px);max-height:min(88vh,740px);overflow:auto;padding:10px 16px 22px;color:var(--text);background:var(--surface-solid);border:1px solid var(--line);border-radius:30px 30px 0 0;box-shadow:0 -26px 70px rgba(0,0,0,.45);animation:sheetUp .22s ease-out}@keyframes sheetUp{from{transform:translate(-50%,26px);opacity:0}to{transform:translate(-50%,0);opacity:1}}.sheet-handle{width:48px;height:5px;margin:0 auto 14px;border-radius:999px;background:color-mix(in srgb,var(--muted) 42%,transparent)}.gps-box{margin-top:14px;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--surface-soft)}.gps-box strong,.gps-box small{display:block}.gps-ready{border-color:color-mix(in srgb,var(--safe) 46%,var(--line));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--safe) 20%,transparent)}.photo-preview{display:grid;gap:10px;margin-top:12px}.photo-preview img{width:100%;max-height:220px;object-fit:cover;border-radius:18px;border:1px solid var(--line)}.sheet-actions{grid-template-columns:2fr 1fr;margin-top:16px}.alarm-banner{position:sticky;top:0;z-index:60;margin-bottom:14px;padding:14px 16px;border-radius:20px;color:white;border:1px solid rgba(255,90,90,.34);background:linear-gradient(135deg,rgba(115,15,15,.98),rgba(185,28,28,.95));box-shadow:0 20px 44px rgba(127,29,29,.34)}.alarm-banner small{color:rgba(255,255,255,.86)}.toast{position:fixed;left:50%;bottom:100px;z-index:90;transform:translateX(-50%);width:min(calc(100% - 28px),420px);padding:14px 16px;border-radius:18px;color:white;background:rgba(5,10,18,.94);box-shadow:0 18px 44px rgba(0,0,0,.28);font-weight:750;line-height:1.45}.mini-note{margin-top:12px;font-size:12px;color:var(--muted)}@media(max-width:390px){.quick-stats,.quick-actions,.report-actions,.grid-2,.sheet-actions{grid-template-columns:1fr}.panic-button{min-height:220px}.hero-panel,.topbar,.section-head,.alarm-banner,.gps-box{align-items:flex-start}}@media(min-width:700px){body{display:grid;place-items:center}.app-shell{min-height:880px;margin:28px auto;border:10px solid #10141f;border-radius:48px;overflow:auto}.bottom-sheet{border-radius:30px;bottom:32px}}

/* V7 compact report list and detail popup */
.report-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.report-row-main {
  display: grid;
  gap: 6px;
}

.report-row-main strong {
  font-size: 16px;
}

.report-row-main small {
  display: block;
}

.report-row-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.compact-report-card {
  align-items: center;
}

.compact-report-card button {
  flex-shrink: 0;
}

.detail-content {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.detail-grid {
  display: grid;
  gap: 10px;
}

.detail-item {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.detail-item strong,
.detail-item small {
  display: block;
}

@media (min-width: 390px) {
  .report-row-actions {
    grid-template-columns: 1fr 1fr;
  }
}


/* V8 home info: weather + date/time */
.quick-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.weather-card,
.time-card {
  min-height: 104px;
}

.weather-card small,
.weather-card strong,
.weather-card span,
.time-card small,
.time-card strong,
.time-card span {
  display: block;
}

.weather-card strong,
.time-card strong {
  margin-top: 6px;
  font-size: 20px;
  line-height: 1.12;
}

.weather-card span,
.time-card span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 390px) {
  .quick-info-grid {
    grid-template-columns: 1fr;
  }
}


/* V9 Google-like weather card */
.quick-info-grid {
  display: none !important;
}

.weather-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.weather-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weather-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  font-size: 44px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(54, 222, 196, 0.12));
  border: 1px solid var(--line);
}

.weather-main strong {
  display: block;
  margin-top: 4px;
  font-size: 38px;
  letter-spacing: -0.06em;
  line-height: 1;
}

.weather-main span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}

.weather-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.weather-detail-grid div {
  padding: 12px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.weather-detail-grid small,
.weather-detail-grid strong {
  display: block;
}

.weather-detail-grid strong {
  margin-top: 5px;
  font-size: 14px;
}

.weather-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.weather-footer span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.time-strip {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 12px;
  margin-bottom: 14px;
}

.time-strip div {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.time-strip small,
.time-strip strong {
  display: block;
}

.time-strip strong {
  margin-top: 5px;
  font-size: 16px;
}

@media (max-width: 390px) {
  .weather-detail-grid,
  .time-strip {
    grid-template-columns: 1fr;
  }

  .weather-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* V10 SOS button style like modern emergency app */
.sos-stage {
  position: relative;
  min-height: 380px;
  margin: 18px 0;
  border-radius: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255, 77, 77, 0.16) 0 24%, rgba(255, 77, 77, 0.08) 25% 44%, rgba(255, 77, 77, 0.035) 45% 62%, transparent 63%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 244, 244, 0.9));
  border: 1px solid rgba(255, 77, 77, 0.16);
  box-shadow: 0 28px 80px rgba(255, 77, 77, 0.12);
}

body.dark .sos-stage {
  background:
    radial-gradient(circle at center, rgba(255, 77, 77, 0.30) 0 24%, rgba(255, 77, 77, 0.16) 25% 44%, rgba(255, 77, 77, 0.07) 45% 62%, transparent 63%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 247, 0.86));
}

.sos-stage::before,
.sos-stage::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 999px;
  border: 1px solid rgba(255, 77, 77, 0.20);
  animation: sosPulse 2.8s ease-in-out infinite;
}

.sos-stage::after {
  width: 245px;
  height: 245px;
  animation-delay: 0.55s;
  background: rgba(255, 77, 77, 0.05);
}

@keyframes sosPulse {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.48;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.panic-button.sos-button {
  width: 190px;
  height: 190px;
  min-height: 190px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(180deg, #ff6b6b, #e54343);
  box-shadow:
    0 26px 52px rgba(229, 67, 67, 0.33),
    inset 0 10px 20px rgba(255, 255, 255, 0.18),
    inset 0 -12px 20px rgba(146, 19, 19, 0.18);
  z-index: 2;
}

.panic-button.sos-button::before,
.panic-button.sos-button::after {
  display: none;
}

.sos-text {
  color: #fff;
  font-size: 54px !important;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(112, 19, 19, 0.26);
}

.sos-caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  color: rgba(75, 85, 99, 0.86);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

body.dark .sos-caption {
  color: rgba(71, 85, 105, 0.92);
}

@media (max-width: 390px) {
  .sos-stage {
    min-height: 330px;
  }

  .sos-stage::before {
    width: 270px;
    height: 270px;
  }

  .sos-stage::after {
    width: 218px;
    height: 218px;
  }

  .panic-button.sos-button {
    width: 165px;
    height: 165px;
    min-height: 165px;
  }

  .sos-text {
    font-size: 46px !important;
  }
}


/* V11 compact weather and transparent SOS area */
.compact-weather-panel {
  gap: 12px;
}

.weather-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.weather-main-info strong,
.weather-main-info span {
  display: block;
}

.weather-meta-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
}

.weather-meta-box {
  padding: 12px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.weather-meta-box small,
.weather-meta-box strong {
  display: block;
}

.weather-meta-box strong {
  margin-top: 5px;
  font-size: 15px;
}

.weather-date-box strong {
  line-height: 1.35;
}

.weather-footer {
  padding-top: 2px;
}

.weather-footer span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* hide old weather detail / time strip if still present somewhere */
.weather-detail-grid,
.time-strip {
  display: none !important;
}

.sos-stage {
  min-height: 340px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
}

.sos-stage::before,
.sos-stage::after {
  border-color: rgba(255, 77, 77, 0.16);
}

body.dark .sos-stage {
  background: transparent !important;
}

.sos-caption {
  color: rgba(156, 163, 175, 0.95) !important;
  bottom: 18px;
}

@media (max-width: 390px) {
  .weather-meta-row {
    grid-template-columns: 1fr;
  }

  .weather-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .sos-stage {
    min-height: 300px;
  }
}


/* V12 home: live monitor removed, weather auto */
.monitor-card {
  display: none !important;
}

.sos-stage {
  margin-top: 10px;
}

.weather-footer span::after {
  content: "";
}


/* V13 completion photo requirement */
.complete-info-box {
  display: grid;
  gap: 5px;
  padding: 14px;
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.complete-info-box strong,
.complete-info-box small {
  display: block;
}


/* V14 profile cleanup and edit controls */
.profile-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.clean-profile-item {
  display: grid;
  gap: 4px;
}

.clean-profile-item strong,
.clean-profile-item small {
  display: block;
}

@media (max-width: 390px) {
  .profile-action-grid {
    grid-template-columns: 1fr;
  }
}


/* V15 profile cleanup and admin dashboard link */
.admin-dashboard-link {
  text-decoration: none;
}

.security-card {
  display: none !important;
}


/* V20 splash screen and strict admin-created login */
.app-hidden {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--text);
  background:
    radial-gradient(circle at center, rgba(54, 222, 196, 0.18), transparent 22rem),
    linear-gradient(180deg, var(--bg), var(--bg2));
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

.splash-screen.splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-logo {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(135deg, var(--primary), #ffb85c);
  box-shadow: 0 24px 70px rgba(54, 222, 196, 0.22);
  animation: splashPop 1.2s ease-in-out infinite alternate;
}

.splash-logo span {
  font-size: 48px;
}

.splash-screen h1 {
  margin-top: 12px;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.splash-screen p {
  color: var(--primary);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}

.splash-loader {
  width: 170px;
  height: 8px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.splash-loader i {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #ffb85c);
  animation: splashLoad 1.15s ease-in-out infinite;
}

@keyframes splashPop {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(-4px) scale(1.03);
  }
}

@keyframes splashLoad {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(240%);
  }
}

.login-card .brand-mark {
  margin-left: auto;
  margin-right: auto;
}

.login-card h2,
.login-card > .muted,
.login-card .mini-note {
  text-align: center;
}


/* V21 faster splash screen */
.splash-screen {
  transition: opacity 0.22s ease, visibility 0.22s ease !important;
}

.splash-loader i {
  animation-duration: 0.65s !important;
}

.splash-logo {
  animation-duration: 0.75s !important;
}


/* V23 anti-stuck loading fix */
.splash-screen {
  animation: splashAutoFade 0.01s linear 0.75s forwards;
}

.app-shell.app-hidden {
  animation: appShellAutoShow 0.01s linear 0.75s forwards;
}

@keyframes splashAutoFade {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes appShellAutoShow {
  to {
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
  }
}


/* V26 mobile login password row */
.password-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.password-row input {
  min-width: 0;
}

.password-row button {
  height: 48px;
}


/* V27 login diagnostics and eye-only password toggle */
.eye-button {
  width: 52px;
  height: 48px;
  min-height: 48px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
}

.login-helper {
  min-height: 18px;
  margin: 10px 4px 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.login-helper.error {
  color: #ef4444;
  font-weight: 800;
}

.login-helper.success {
  color: #0f766e;
  font-weight: 800;
}

body.dark .login-helper.success {
  color: var(--primary);
}


/* V29 login helper behavior */
.login-helper {
  display: none;
  min-height: 0;
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}

.login-helper.info,
.login-helper.error,
.login-helper.success {
  display: block;
  margin: 10px 4px 0;
}

.login-helper.info {
  color: var(--muted);
}

.login-helper.error {
  color: #ef4444;
  font-weight: 800;
}

.login-helper.success {
  color: #10b981;
  font-weight: 800;
}


/* V30: custom password mask and no native browser eye */
.masked-password {
  -webkit-text-security: disc;
  text-security: disc;
}

.password-row input::-ms-reveal,
.password-row input::-ms-clear {
  display: none;
}

.password-row input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
}


/* V34 clean warga home buttons */
#resetDemoButton,
#viewReportsButton,
#testSirenButton {
  display: none !important;
}


/* V35 bottom navigation fix */
.bottom-nav,
.tab-button {
  pointer-events: auto !important;
  position: relative;
  z-index: 50;
}

/* Hide only small quick action buttons under SOS, not the bottom menu */
.sos-actions,
.home-actions,
.quick-actions {
  display: none !important;
}

.bottom-nav #viewReportsButton,
.bottom-nav #testSirenButton {
  display: flex !important;
}


/* V36 clean SOS helper only */
.sos-caption {
  display: none !important;
}

/* V36 password eye icon: clean SVG only */
.eye-button {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden;
}

.eye-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.eye-button,
.eye-button * {
  font-family: Arial, sans-serif !important;
}


/* V36 keep main menu clickable */
.tabs,
.tabs .tab {
  pointer-events: auto !important;
  position: relative;
  z-index: 100;
}

.quick-actions {
  display: none !important;
}


/* V37: menu position under SOS */
#homePage .tabs {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: 14px 0 16px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: 20px !important;
  z-index: 20 !important;
}

#homePage .tabs .tab {
  min-height: 48px !important;
  pointer-events: auto !important;
}

#homePage .tabs .tab small {
  font-size: 11px !important;
}

#homePage .tabs .tab span {
  font-size: 17px !important;
}


/* V38: keep menu below page content on all mobile pages */
.page .tabs {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: 18px 0 16px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: 20px !important;
  z-index: 20 !important;
}

.page .tabs .tab {
  min-height: 48px !important;
  pointer-events: auto !important;
}

.page .tabs .tab small {
  font-size: 11px !important;
}

.page .tabs .tab span {
  font-size: 17px !important;
}

#reportsPage .tabs,
#profilePage .tabs {
  margin-top: 20px !important;
}


/* V40 OTP WhatsApp and secure admin route */
.otp-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.otp-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.otp-head strong {
  font-size: 15px;
}

.otp-head small {
  font-size: 12px;
}

.otp-actions {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
  margin-top: 10px;
}

.otp-actions .secondary-button,
.otp-actions .outline-button {
  width: 100%;
}

.wa-otp-link {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 15px;
  text-align: center;
  color: #07231e;
  background: #25d366;
  text-decoration: none;
  font-weight: 900;
}

.admin-secure-note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.45;
}

@media (max-width: 390px) {
  .otp-actions {
    grid-template-columns: 1fr;
  }
}