/* Mobile UX 3.2.4 — compact mobile navigation + guided client choice */
.mobile-more-toggle,.mobile-more-sheet{display:none}

.client-choice-card[hidden]{display:none!important}
.mobile-client-stability-note,
.vless-client-note,
.vless-mode-simple,
.created-client-choice{
  border:1px solid #56d68b2e;
  background:#56d68b08;
  border-radius:14px;
  padding:12px;
  margin-top:10px;
  text-align:left;
}
.mobile-client-stability-note strong,
.vless-client-note strong,
.vless-mode-simple strong,
.created-client-choice strong{display:block;font-size:10px}
.mobile-client-stability-note p,
.vless-client-note p,
.vless-mode-simple p,
.created-client-choice p{margin:4px 0 0;color:var(--muted);font-size:9px;line-height:1.45}
.client-choice-platforms{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.client-choice-platforms span{padding:3px 6px;border:1px solid #ffffff10;border-radius:999px;color:var(--muted);font-size:7px;font-weight:800}
.client-choice-head .stable-pill{color:#56d68b;border-color:#56d68b35;background:#56d68b0d}
.client-choice-head .vless-pill{color:#6bc8ff;border-color:#6bc8ff35;background:#6bc8ff0d}
.reserve-protocol.vless-selected{border-color:#6bc8ff35;background:#6bc8ff05}
.vless-routing-card{border-color:#6bc8ff30!important;background:#6bc8ff06!important}

@media(max-width:760px){
  .portal-shell,.admin-shell{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
  .app-sidebar{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));padding:6px;border-radius:17px}
  .app-sidebar .section-nav .mobile-overflow-nav{display:none!important}
  .app-sidebar .section-nav{justify-content:stretch;gap:3px;overflow:visible}
  .app-sidebar .section-nav a.mobile-primary-nav,
  .mobile-more-toggle{
    flex:1 1 20%;width:auto;min-width:0;min-height:54px;margin:0;padding:6px 2px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:1px solid transparent;border-radius:11px;background:transparent;color:#a9b1bf;
    font:inherit;font-size:9px;font-weight:800;line-height:1.08;text-align:center;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .app-sidebar .section-nav a.mobile-primary-nav[href="#add-device"]{
    color:var(--accent);background:#f2b45c0a;border-color:#f2b45c18;
  }
  .app-sidebar .section-nav a.mobile-primary-nav .nav-label,
  .mobile-more-toggle .nav-label{font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-more-toggle .nav-icon{width:19px;height:19px}
  .mobile-more-toggle .nav-icon svg{width:18px;height:18px;fill:currentColor}
  .mobile-more-toggle.active,.mobile-more-toggle[aria-expanded="true"]{color:var(--accent);background:#f2b45c0d;border-color:#f2b45c28}

  .mobile-more-sheet{
    position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:1002;padding:10px;
    border:1px solid #ffffff16;border-radius:16px;background:#10131afd;box-shadow:0 18px 48px #000c;
    backdrop-filter:blur(18px)
  }
  .mobile-more-sheet:not([hidden]){display:block}
  .mobile-more-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:1px 2px 8px}
  .mobile-more-head strong{font-size:11px}
  .mobile-more-close{width:32px;height:32px;min-height:0;margin:0;padding:0;display:grid;place-items:center;border:1px solid #ffffff12;border-radius:9px;background:#ffffff06;color:var(--muted);font-size:18px}
  .mobile-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .mobile-more-grid a{min-width:0;min-height:56px;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #ffffff0d;border-radius:12px;background:#0d1016;color:#a9b1bf;font-size:10px;font-weight:800}
  .mobile-more-grid a.active{color:var(--accent);border-color:#f2b45c2b;background:#f2b45c0b}
  .mobile-more-grid .nav-label{font-size:10px;text-align:left;white-space:normal;overflow:visible;text-overflow:clip}
  body.mobile-more-open{overflow:hidden}

  .guided-target-grid{grid-template-columns:1fr 1fr!important}
  .guided-target-grid .device-type-card{min-height:88px}
  .client-choice-grid{grid-template-columns:1fr!important}
  .client-choice-card{min-height:0;padding:13px}
  .client-choice-card p{font-size:10px}
  .client-choice-card small{font-size:9px}
  .connection-wizard-card{padding:12px!important}
  .wizard-progress-step strong{display:none}
  .wizard-progress-step span{width:30px;height:30px;font-size:11px}
  .wizard-page-head h3{font-size:19px}
  .wizard-page-head p{font-size:10px}
  .inline-wizard-actions{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:20;padding:8px;margin:14px -4px -4px;background:#11151cf2;border:1px solid #ffffff0d;border-radius:14px;backdrop-filter:blur(12px)}
  .inline-wizard-actions button{min-height:46px}
  .created-client-choice{margin:12px 0}
}

@media(max-width:390px){
  .guided-target-grid{grid-template-columns:1fr!important}
  .app-sidebar .section-nav a.mobile-primary-nav .nav-label,
  .mobile-more-toggle .nav-label{font-size:8px}
}

.created-app-install{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.created-app-install:empty{display:none}
.created-app-install .linkbtn{flex:1 1 220px}

@media(max-width:760px){
  .created-app-install{display:grid;grid-template-columns:1fr;margin-top:8px}
  .created-app-install .linkbtn{width:100%;min-height:46px}
}