/* Mobile UX 3.2.4.2 — visual polish + Emergency WARP */

/* Emergency WARP card */
.emergency-warp-card{
  margin-top:16px;
  padding:16px;
  border:1px solid rgba(116,184,255,.20);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(30,73,110,.16),rgba(15,18,24,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.emergency-warp-head{display:flex;gap:12px;align-items:flex-start}
.emergency-warp-icon{
  width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
  border:1px solid rgba(116,184,255,.24);border-radius:12px;
  background:rgba(116,184,255,.08);color:#86c8ff;
}
.emergency-warp-icon svg{width:22px;height:22px;fill:currentColor}
.emergency-warp-copy{min-width:0}
.emergency-warp-kicker{display:block;margin-bottom:3px;color:#86c8ff;font-size:10px!important;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.emergency-warp-copy strong{display:block;font-size:16px!important;line-height:1.25}
.emergency-warp-copy p{margin:5px 0 0;color:var(--muted);font-size:12px!important;line-height:1.5}
.emergency-warp-note{
  display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 11px;
  border:1px solid rgba(242,180,92,.18);border-radius:12px;background:rgba(242,180,92,.055);
  color:#c9c2b8;font-size:11px!important;line-height:1.45;
}
.emergency-warp-note b{color:var(--accent);font-size:11px!important}
.emergency-warp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.emergency-warp-actions button,.emergency-warp-actions .linkbtn{min-height:44px;margin:0;flex:1 1 180px}
.emergency-warp-status{margin-top:11px;padding:9px 10px;border-radius:10px;background:#0b0e13;border:1px solid #ffffff0e;color:var(--muted);font-size:11px!important;line-height:1.45}
.emergency-warp-status.ok{color:#77dfa0;border-color:#56d68b30;background:#56d68b08}
.emergency-warp-status.err{color:#ff8f8f;border-color:#ff6b6b30;background:#ff6b6b08}
.emergency-warp-result{margin-top:12px;padding:12px;border:1px solid #ffffff10;border-radius:14px;background:#0b0e13}
.emergency-warp-result[hidden]{display:none!important}
.emergency-warp-result-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.emergency-warp-result-head strong{font-size:14px!important}
.emergency-warp-result-head small{display:block;margin-top:3px;color:var(--muted);font-size:10px!important;line-height:1.4}
.emergency-warp-result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.emergency-warp-result-actions .linkbtn,.emergency-warp-result-actions button{min-height:42px;flex:1 1 160px;margin:0}
.emergency-warp-qr{display:grid;place-items:center;margin-top:12px;padding:12px;border-radius:12px;background:#fff}
.emergency-warp-qr[hidden]{display:none!important}
.emergency-warp-qr img{display:block;width:min(260px,100%);height:auto}
.emergency-warp-disclaimer{margin:10px 0 0;color:var(--muted);font-size:10px!important;line-height:1.45}

/* Device picker polish */
.guided-target-grid .device-type-card .device-type-icon svg{width:21px;height:21px;fill:currentColor}
.guided-target-grid .device-type-card .device-copy{min-width:0}

@media(max-width:760px){
  .connection-wizard-card{padding:14px!important;border-radius:18px!important}
  .wizard-page-head{margin-bottom:12px}
  .wizard-page-head h3{font-size:20px!important;line-height:1.2;margin-top:5px}
  .wizard-page-head p{font-size:12px!important;line-height:1.45;margin-top:6px}
  .wizard-kicker{font-size:10px!important;letter-spacing:.12em}

  .guided-target-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .guided-target-grid .device-type-card{
    min-height:118px!important;
    padding:11px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    grid-template-rows:auto 1fr auto!important;
    column-gap:8px!important;
    row-gap:8px!important;
    align-items:start!important;
    overflow:hidden;
    border-radius:15px!important;
  }
  .guided-target-grid .device-type-icon{
    width:34px!important;height:34px!important;
    border-radius:10px!important;
  }
  .guided-target-grid .device-type-card strong{
    font-size:14px!important;line-height:1.18!important;
  }
  .guided-target-grid .device-type-card small{
    margin-top:4px!important;font-size:10px!important;line-height:1.3!important;
  }
  .guided-target-grid .device-type-card>b{
    position:static!important;
    grid-column:1/-1!important;
    justify-self:start!important;
    max-width:100%;
    margin:0!important;
    padding:4px 7px!important;
    border:1px solid rgba(242,180,92,.22);
    border-radius:999px;
    background:rgba(242,180,92,.07);
    color:var(--accent)!important;
    font-size:9px!important;
    line-height:1.1!important;
    letter-spacing:.025em!important;
    text-transform:none!important;
    white-space:normal!important;
  }
  .guided-target-grid .device-type-card>.locked-badge{
    color:var(--muted)!important;
    border-color:#ffffff18!important;
    background:#ffffff05!important;
  }
  .guided-target-grid .device-type-card.active>b:not(.locked-badge){
    border-color:rgba(242,180,92,.34);background:rgba(242,180,92,.11)
  }

  .wizard-field{margin-top:14px!important}
  .wizard-field>span{font-size:12px!important;margin-bottom:7px!important}
  .wizard-field>small{font-size:10px!important;line-height:1.4!important}
  .wizard-field input{min-height:46px;font-size:16px!important}

  .client-choice-card{padding:14px!important;border-radius:15px!important}
  .client-choice-head{gap:7px!important;align-items:flex-start!important;flex-wrap:wrap!important}
  .client-choice-head strong{font-size:15px!important;line-height:1.2!important}
  .client-choice-head>span{font-size:9px!important;line-height:1.1!important;padding:4px 7px!important;white-space:normal!important}
  .client-choice-card p{font-size:11px!important;line-height:1.45!important;margin-top:7px!important}
  .client-choice-platforms{gap:5px!important;margin-top:9px!important}
  .client-choice-platforms span{font-size:9px!important;line-height:1.2!important;padding:4px 7px!important}

  .mobile-client-stability-note strong,.vless-client-note strong,.vless-mode-simple strong,.created-client-choice strong{font-size:12px!important;line-height:1.3!important}
  .mobile-client-stability-note p,.vless-client-note p,.vless-mode-simple p,.created-client-choice p{font-size:10px!important;line-height:1.45!important}

  .inline-wizard-actions{
    bottom:calc(80px + env(safe-area-inset-bottom))!important;
    margin:18px -2px 0!important;
    padding:9px!important;
    border-radius:16px!important;
    box-shadow:0 14px 40px #0008!important;
  }
  .inline-wizard-actions button{min-height:48px!important;padding:10px 14px!important;font-size:14px!important;border-radius:13px!important}

  .portal-shell,.admin-shell{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
  .app-sidebar .section-nav a.mobile-primary-nav,.mobile-more-toggle{min-height:58px!important;padding:7px 2px!important;gap:4px!important}
  .app-sidebar .section-nav a.mobile-primary-nav .nav-label,.mobile-more-toggle .nav-label{font-size:10px!important;line-height:1.05!important}

  .emergency-warp-card{margin-top:14px;padding:14px;border-radius:17px}
  .emergency-warp-copy p{font-size:11px!important}
  .emergency-warp-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .emergency-warp-actions button,.emergency-warp-actions .linkbtn{width:100%;min-height:46px}
  .emergency-warp-result-actions{display:grid;grid-template-columns:1fr;gap:8px}
}

@media(max-width:340px){
  .guided-target-grid{grid-template-columns:1fr!important}
  .guided-target-grid .device-type-card{min-height:88px!important}
}