/* МВД ОХРАНА: PWA-пульт КТС и эмуляция охранного прибора.
   © 2026 ООО «СпецТехСервис ГРУПП», Республика Беларусь. */
.mvd-security-view{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.mvd-security-notice{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border:1px solid color-mix(in srgb,#5d9df6 30%,var(--line));border-radius:15px;background:color-mix(in srgb,#5d9df6 7%,var(--surface))}
.mvd-security-notice>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#0a335b;color:#fff;font-size:21px}
.mvd-security-notice p{display:grid;gap:2px;margin:0}
.mvd-security-notice b{font-size:12px}
.mvd-security-notice small{color:var(--muted);font-size:9px;line-height:1.35}
.mvd-security-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.mvd-security-tabs button{min-height:64px;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:1px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);color:var(--text);text-align:left}
.mvd-security-tabs button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,#0a335b 13%,var(--surface));color:#5d9df6;font-size:18px}
.mvd-security-tabs b{align-self:end;font-size:11px}
.mvd-security-tabs small{align-self:start;color:var(--muted);font-size:8px}
.mvd-security-tabs button.active{border-color:#ff521d;background:color-mix(in srgb,#ff521d 10%,var(--surface));box-shadow:0 6px 18px rgba(255,82,29,.1)}
.mvd-security-tabs button.active>span{background:#ff521d;color:#fff}
.mvd-security-content{min-height:360px}
.mvd-panic-card,.mvd-device-card{position:relative;overflow:hidden;padding:18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(155deg,color-mix(in srgb,#0a335b 16%,var(--surface)),var(--surface) 58%);box-shadow:0 12px 32px rgba(5,30,64,.13)}
.mvd-panic-card header,.mvd-device-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:15px}
.mvd-panic-card header>span,.mvd-device-card header>span{display:grid;gap:2px}
.mvd-panic-card header b,.mvd-device-card header b{font-size:14px}
.mvd-panic-card header small,.mvd-device-card header small{font-size:9px;color:var(--muted)}
.mvd-mode-pill{flex:0 0 auto;padding:6px 8px;border-radius:999px;background:rgba(93,157,246,.13);color:#5d9df6;font-size:8px;font-weight:900}
.mvd-panic-button{position:relative;width:min(64vw,238px);aspect-ratio:1;margin:8px auto 18px;border:10px solid color-mix(in srgb,#d64040 22%,var(--surface));border-radius:50%;background:radial-gradient(circle at 38% 30%,#ff7676 0,#d64040 40%,#9a1818 100%);color:#fff;box-shadow:0 15px 0 #7d1818,0 22px 34px rgba(214,64,64,.34),inset 0 4px 13px rgba(255,255,255,.34);font-size:18px;font-weight:950;letter-spacing:.05em;text-shadow:0 2px 3px rgba(80,0,0,.4);transition:transform .18s,box-shadow .18s}
.mvd-panic-button:active{transform:translateY(8px);box-shadow:0 7px 0 #7d1818,0 13px 24px rgba(214,64,64,.28),inset 0 4px 13px rgba(255,255,255,.3)}
.mvd-panic-button.pending{animation:mvdPanicPulse 1s infinite}
.mvd-panic-button.alarm{transform:translateY(8px);background:radial-gradient(circle at 38% 30%,#ff9b5f 0,#d64040 36%,#751212 100%);box-shadow:0 7px 0 #651010,0 0 0 7px rgba(214,64,64,.12),0 0 32px rgba(214,64,64,.48);animation:mvdAlarmHold 1.6s infinite}
.mvd-panic-button.cancel-requested{background:radial-gradient(circle at 38% 30%,#ffd07b 0,#c97715 45%,#8a4700 100%);box-shadow:0 7px 0 #704000,0 0 0 7px rgba(201,119,21,.13)}
.mvd-panic-status{display:grid;gap:4px;padding:12px;border-radius:14px;background:rgba(214,64,64,.09);text-align:center}
.mvd-panic-status strong{font-size:11px;line-height:1.4;color:#ef6969}
.mvd-panic-status small{font-size:9px;color:var(--muted)}
.mvd-panic-location{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:10px;color:var(--muted);font-size:9px}
.mvd-device-visual{display:grid;place-items:center;min-height:285px;margin:0 -3px 14px;border-radius:18px;background:radial-gradient(circle at 50% 46%,rgba(93,157,246,.11),transparent 66%)}
.mvd-device-visual img{display:block;width:min(68vw,260px);height:280px;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(5,30,64,.25))}
.mvd-device-state{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:11px 12px;border-radius:13px;background:var(--surface-soft)}
.mvd-device-state span{display:grid;gap:2px}
.mvd-device-state small{font-size:8px;color:var(--muted)}
.mvd-device-state b{font-size:13px}
.mvd-device-state i{width:12px;height:12px;border-radius:50%;background:#798b99;box-shadow:0 0 0 5px rgba(121,139,153,.1)}
.mvd-device-state.armed i{background:#19a66a;box-shadow:0 0 0 5px rgba(25,166,106,.12)}
.mvd-device-state.disarmed i{background:#d9a028;box-shadow:0 0 0 5px rgba(217,160,40,.12)}
.mvd-device-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mvd-device-actions button{min-height:48px;border-radius:12px;font-size:10px;font-weight:900}
.mvd-device-actions .arm{border:1px solid rgba(25,166,106,.4);background:rgba(25,166,106,.12);color:#27c981}
.mvd-device-actions .disarm{border:1px solid rgba(255,82,29,.38);background:rgba(255,82,29,.1);color:#ff7549}
.mvd-device-actions button:disabled{opacity:.42}
.mvd-panic-confirm-backdrop{z-index:2700}
.mvd-panic-confirm-dialog{text-align:center}
.mvd-confirm-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:rgba(214,64,64,.12);color:#d64040;font-size:30px;font-weight:950}
.mvd-panic-confirm-dialog h2{font-size:20px}
.mvd-panic-confirm-dialog p{color:var(--muted);font-size:11px;line-height:1.45}
.mvd-panic-confirm-dialog>div{display:grid;grid-template-columns:.7fr 1.3fr;gap:8px;margin-top:16px}
.mvd-panic-confirm-dialog button{min-height:44px;border-radius:11px;font-size:9px;font-weight:900}
.mvd-panic-confirm-dialog .danger{border:0;background:#d64040;color:#fff}
@keyframes mvdPanicPulse{50%{transform:scale(.97);filter:brightness(1.2)}
}
@keyframes mvdAlarmHold{50%{box-shadow:0 7px 0 #651010,0 0 0 12px rgba(214,64,64,.04),0 0 42px rgba(214,64,64,.55)}
}
@media(prefers-reduced-motion:reduce){.mvd-panic-button{animation:none!important;transition:none}
}
@media(max-width:360px){.mvd-security-notice{grid-template-columns:38px minmax(0,1fr);padding-inline:9px}
.mvd-security-notice>span{width:38px;height:38px}
.mvd-panic-card,.mvd-device-card{padding:14px}
.mvd-panic-button{width:210px}
.mvd-device-visual img{height:250px}
.mvd-device-visual{min-height:255px}
}

/* PWA 0.10.44: AI-КТС анфас, физическое залипание и дисплей прибора по серверному состоянию. */
.mvd-panic-button{position:relative;display:grid;justify-items:center;gap:5px;width:min(72vw,270px);margin:6px auto 18px;padding:0 0 4px;border:0;border-radius:24px;background:transparent;color:var(--text);box-shadow:none;isolation:isolate;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mvd-panic-button>img{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 18px rgba(5,19,42,.28));transform:translateY(-4px);transition:transform .14s cubic-bezier(.2,.8,.2,1),filter .14s}
.mvd-panic-action-label{display:grid;justify-items:center;gap:1px;min-width:150px;max-width:100%;min-height:39px;padding:6px 12px;border:1px solid color-mix(in srgb,#0a335b 15%,var(--line));border-radius:12px;background:color-mix(in srgb,#0a335b 8%,var(--surface));color:var(--text);box-shadow:0 6px 16px rgba(5,30,64,.08)}
.mvd-panic-action-label small{font-size:8px;font-weight:900;letter-spacing:.14em;color:var(--muted)}.mvd-panic-action-label b{font-size:10px;font-weight:950;line-height:1.2;text-align:center}
.mvd-panic-button:active>img,.mvd-panic-button.pending>img,.mvd-panic-button.alarm>img{transform:translateY(8px) scale(.965);filter:drop-shadow(0 5px 7px rgba(5,19,42,.22)) saturate(1.06) brightness(.92)}
.mvd-panic-button.pending{animation:none}.mvd-panic-button.pending>img{animation:mvdPanicImagePulse 1s infinite}.mvd-panic-button.alarm{transform:none;background:transparent;box-shadow:none;animation:none}.mvd-panic-button.alarm>img{filter:drop-shadow(0 0 20px rgba(225,30,39,.55)) saturate(1.08) brightness(.94);animation:mvdAlarmImageHold 1.6s infinite}.mvd-panic-button.alarm .mvd-panic-action-label{border-color:rgba(228,32,49,.42);background:rgba(228,32,49,.12);color:#e42031}.mvd-panic-button.cancel-requested .mvd-panic-action-label{border-color:rgba(217,160,40,.42);background:rgba(217,160,40,.12);color:#b87916}
.mvd-device-visual{position:relative;display:block;width:min(100%,340px);min-height:0;aspect-ratio:1.5;margin:0 auto 16px;border-radius:18px;background:radial-gradient(circle at 50% 46%,rgba(93,157,246,.12),transparent 68%);filter:drop-shadow(0 16px 20px rgba(5,30,64,.23))}.mvd-device-visual img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.mvd-device-screen{position:absolute;left:27.2%;top:10.2%;display:grid;place-items:center;align-content:center;width:45.8%;height:21.5%;overflow:hidden;border:1px solid rgba(132,166,202,.35);border-radius:7px;background:linear-gradient(155deg,#092346,#020a16);color:#b9d7ff;text-align:center;text-shadow:0 0 8px currentColor;box-shadow:inset 0 0 18px rgba(62,125,193,.24);transition:background .25s,color .25s,box-shadow .25s}.mvd-device-screen small{font-size:6px;font-weight:800;letter-spacing:.13em;opacity:.7}.mvd-device-screen b{font-size:11px;line-height:1.15}.mvd-device-led{position:absolute;right:16.2%;top:18.3%;width:4.4%;aspect-ratio:1;border-radius:50%;background:#7c8b99;box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 8px rgba(124,139,153,.45)}
.mvd-device-visual.armed .mvd-device-screen{background:linear-gradient(155deg,#4a060b,#180104);color:#ff9a9f;box-shadow:inset 0 0 22px rgba(255,31,45,.4),0 0 12px rgba(214,22,35,.18)}.mvd-device-visual.armed .mvd-device-led{background:#f02232;box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0 14px #f02232;animation:mvdDeviceArmed 1.8s infinite}
.mvd-device-visual.disarmed .mvd-device-screen{background:linear-gradient(155deg,#07394a,#03131b);color:#8ee9df;box-shadow:inset 0 0 20px rgba(40,198,177,.22)}.mvd-device-visual.disarmed .mvd-device-led{background:#2bbf9d;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 10px rgba(43,191,157,.75)}
.mvd-device-state.armed i{background:#e42031;box-shadow:0 0 0 5px rgba(228,32,49,.12),0 0 12px rgba(228,32,49,.55)}.mvd-device-state.armed b{color:#ef5b67}.mvd-device-state.disarmed i{background:#2bbf9d;box-shadow:0 0 0 5px rgba(43,191,157,.12)}.mvd-device-state.disarmed b{color:#2bbf9d}
@keyframes mvdPanicImagePulse{50%{filter:drop-shadow(0 5px 10px rgba(225,30,39,.42)) saturate(1.16) brightness(1.04)}}@keyframes mvdAlarmImageHold{50%{filter:drop-shadow(0 0 28px rgba(225,30,39,.68)) saturate(1.12) brightness(1.02)}}@keyframes mvdDeviceArmed{50%{filter:brightness(1.35);box-shadow:0 0 0 2px rgba(255,255,255,.68),0 0 20px #f02232}}
@media(prefers-reduced-motion:reduce){.mvd-panic-button,.mvd-panic-button>img,.mvd-device-led{animation:none!important;transition:none}}@media(max-width:360px){.mvd-panic-button{width:238px}.mvd-device-visual{min-height:0}.mvd-device-visual img{height:100%}.mvd-device-screen b{font-size:10px}}

/* Диалоги раздела МВД ОХРАНА являются подтверждениями, а не нижними листами.
   Поэтому они всегда располагаются по центру доступной области экрана. */
.mvd-panic-confirm-backdrop{
  place-items:center;
  align-content:center;
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
}
.mvd-panic-confirm-dialog{
  align-self:center;
  width:min(100%,390px);
  max-height:calc(100dvh - max(36px,env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overflow-y:auto;
  border-radius:22px;
  overscroll-behavior:contain;
}