/* QiXiTSNPro mobile shell — UI/UX Pro Max mobile adaptation */
:root{
  --app-tabbar-h:64px;
  --app-safe-bottom:env(safe-area-inset-bottom,0px);
  --touch-min:48px;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
html{color-scheme:dark;background:#0f172a}
.mobile-only,.mobile-tabbar,.mobile-sheet-scrim,.mobile-sheet,.mobile-connect{display:none}

@media(max-width:900px){
  html,body{min-height:100%;background:#0f172a}
  body{
    font-size:14px;
    line-height:1.55;
    overscroll-behavior-y:none;
    -webkit-tap-highlight-color:transparent;
    padding:0;
    background:
      radial-gradient(120% 48% at 8% -12%,rgba(34,197,94,.10),transparent 58%),
      radial-gradient(110% 44% at 100% 2%,rgba(74,158,255,.12),transparent 62%),
      #0f172a;
  }
  .app-shell{display:block;min-height:100dvh}
  .sidebar{display:none!important}
  .main-area{width:100%;min-width:0}
  .wrap{
    max-width:none;
    padding:12px 12px calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 24px);
  }

  /* Header and section rhythm */
  .topbar{
    align-items:flex-start;
    gap:12px;
    padding:4px 2px 14px;
    margin-bottom:14px;
    border-bottom-color:rgba(148,163,184,.20);
  }
  .topbar>div:first-child{min-width:0;flex:1}
  .topbar>.row,.topbar>button.act{flex:none}
  h1{
    font-size:20px;
    line-height:1.25;
    letter-spacing:-.02em;
    font-weight:700;
  }
  h2{font-size:16px;line-height:1.35;margin-bottom:12px}
  .sub{display:block;margin:4px 0 0;font-size:12.5px;line-height:1.45}
  .badges{gap:6px;margin-top:10px!important}
  .badge{
    min-height:30px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 10px;
    border-color:rgba(148,163,184,.24);
    background:rgba(30,41,59,.78);
    color:#aebbd0;
  }
  .badge b{margin-left:2px;color:#f8fafc}

  /* Home page sub-navigation */
  .tabs{
    position:sticky;
    top:0;
    z-index:24;
    margin:0 -12px 14px;
    padding:9px 12px;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    background:rgba(15,23,42,.94);
    border-bottom:1px solid rgba(148,163,184,.16);
    backdrop-filter:blur(14px);
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{
    flex:0 0 auto;
    min-width:92px;
    min-height:44px;
    padding:9px 16px;
    border-radius:12px;
    font-size:14px;
    border-color:rgba(148,163,184,.20);
  }
  .tabs button.active{
    background:rgba(34,197,94,.16);
    border-color:rgba(34,197,94,.78);
    color:#eafff4;
    box-shadow:0 0 0 1px rgba(34,197,94,.08) inset;
  }

  /* Cards, controls and forms */
  .card{
    padding:14px;
    margin-bottom:12px;
    border-radius:16px;
    border-color:rgba(148,163,184,.18);
    background:rgba(27,35,54,.92);
    box-shadow:0 10px 30px rgba(2,6,23,.20);
  }
  .grid2{grid-template-columns:1fr;gap:12px}
  .row{gap:10px;align-items:stretch}
  .row>.grow{flex:1 1 100%;min-width:0}
  .row>button.act{align-self:stretch}
  label{font-size:13px;color:#aebbd0;margin-bottom:6px}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{
    min-height:var(--touch-min);
    padding:11px 12px;
    border-radius:12px;
    border-color:rgba(148,163,184,.28);
    background:#111a2d;
    color:#f8fafc;
    font-size:16px;
  }
  input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{
    outline:2px solid rgba(59,130,246,.7);
    outline-offset:1px;
    border-color:#60a5fa;
  }
  input[type="checkbox"],input[type="radio"]{
    width:20px;
    height:20px;
    min-width:20px;
    min-height:20px;
    padding:0;
    margin:0;
    accent-color:#22c55e;
  }
  label:has(input[type="checkbox"]),label:has(input[type="radio"]){min-height:44px;display:flex;align-items:center;gap:8px}
  button.act{
    min-height:var(--touch-min);
    padding:10px 15px;
    border-radius:12px;
    font-size:14px;
    border-color:rgba(148,163,184,.28);
    background:#243047;
    transition:background .16s var(--ease-out),border-color .16s var(--ease-out),opacity .16s var(--ease-out);
  }
  button.act.primary{
    background:#22c55e;
    border-color:#22c55e;
    color:#07130c;
    box-shadow:0 8px 22px rgba(34,197,94,.20);
  }
  button.act.danger{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.48)}
  button.act:active,.group-chip:active,ul.tasklist li:active{opacity:.78;transform:scale(.985)}
  button.act:disabled{transform:none}

  .selbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px 10px;
  }
  .selbar>button:first-child{grid-column:1}
  .selbar>span{grid-column:1/-1;order:3;color:#aebbd0;font-size:12.5px}
  .filter-control,.group-tools,.groupbar{align-items:stretch}
  .filter-control{grid-column:1/-1;margin-left:0;width:100%}
  .filter-control select{width:100%;flex:1}
  .groupbar{flex-direction:column}
  .group-list{min-width:0}
  .group-tools{width:100%}
  .group-tools input,.group-tools select{width:100%;flex:1 1 100%}
  .group-chip{min-height:38px;padding:8px 12px}
  .range-inputs{width:100%}
  .range-inputs input{width:calc(50% - 14px)}
  .remark{display:block;margin:3px 0 0}

  /* Dense data tables become readable cards */
  .scroll{max-height:none;overflow:visible}
  table.mobile-card-table{font-size:14px;border-collapse:separate;border-spacing:0}
  table.mobile-card-table thead{display:none}
  table.mobile-card-table,
  table.mobile-card-table tbody,
  table.mobile-card-table tr,
  table.mobile-card-table td{display:block;width:100%}
  table.mobile-card-table tbody tr{
    position:relative;
    margin:0 0 10px;
    padding:10px 12px;
    border:1px solid rgba(148,163,184,.19);
    border-radius:14px;
    background:rgba(17,26,45,.72);
  }
  table.mobile-card-table tbody tr:last-child{margin-bottom:0}
  table.mobile-card-table td{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:10px;
    align-items:center;
    min-height:36px;
    padding:6px 0;
    border:0;
    overflow-wrap:anywhere;
  }
  table.mobile-card-table td::before{
    content:attr(data-label);
    color:#7f8da5;
    font-size:12px;
    line-height:1.35;
  }
  table.mobile-card-table td:empty{display:none}
  table.mobile-card-table td.mobile-actions-cell{
    display:block;
    margin-top:3px;
    padding-top:10px;
    border-top:1px solid rgba(148,163,184,.14);
  }
  table.mobile-card-table td.mobile-actions-cell::before{display:none}
  .ops{gap:8px}
  .ops button.act{min-width:84px}

  .schedule-table-wrap{
    margin-right:-4px;
    padding-bottom:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .schedule-table-wrap table{min-width:900px}
  .schedule-table-wrap input,.schedule-table-wrap select{
    min-height:40px;
    padding:7px 8px;
    font-size:14px;
  }
  .schedule-preview{max-height:46vh}

  .logs{
    height:48dvh;
    min-height:260px;
    padding:12px;
    border-radius:12px;
    font-size:12px;
    line-height:1.7;
    overscroll-behavior:contain;
  }
  .ln{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px}
  .ln .t{margin-right:0}
  ul.tasklist{max-height:none;overflow:visible}
  ul.tasklist li{min-height:48px;padding:11px 12px;border-radius:12px}
  .taskcard{border-radius:13px;padding:13px}
  .mini{height:auto;max-height:76px}

  /* Map and touch controls */
  #path-map{height:clamp(340px,58dvh,520px);border-radius:14px}
  #page-paths .card:first-of-type>.row:first-of-type{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #page-paths .card:first-of-type>.row:first-of-type>button.act{width:100%;white-space:normal}
  #page-paths .card:first-of-type>.row:first-of-type>span{grid-column:1/-1}
  .geobar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .geofield{min-width:0}
  .geoico{display:flex;align-items:center;justify-content:center;width:16px;height:16px}
  .geoico svg{display:block}
  .leaflet-control-layers{
    padding:7px 9px!important;
    border-radius:12px!important;
    font-size:12px!important;
    box-shadow:0 8px 24px rgba(2,6,23,.26)!important;
  }
  .leaflet-control-layers label{min-height:32px!important;display:flex!important;align-items:center!important;gap:8px!important;margin:0!important}
  .leaflet-control-layers-separator{margin:4px 0!important}
  .geofield input{font-size:15px}
  .geolist{max-height:42dvh}
  .geoitem{min-height:52px;padding:10px 12px}
  .gname,.gaddr{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .geoclr{min-width:44px;min-height:44px}

  /* Toasts above the fixed tab bar */
  .toasts{
    left:12px;
    right:12px;
    bottom:calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 12px);
    align-items:stretch;
  }
  .toast{
    max-width:none;
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    font-size:13px;
  }

  /* Fixed bottom navigation */
  .mobile-tabbar{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    min-height:calc(var(--app-tabbar-h) + var(--app-safe-bottom));
    padding:6px 8px calc(6px + var(--app-safe-bottom));
    background:rgba(15,23,42,.97);
    border-top:1px solid rgba(148,163,184,.20);
    box-shadow:0 -12px 34px rgba(2,6,23,.38);
    backdrop-filter:blur(18px);
  }
  .mobile-tabbar button{
    appearance:none;
    border:0;
    background:transparent;
    color:#8fa0b8;
    min-width:0;
    min-height:52px;
    padding:5px 2px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    font:600 11px/1.2 inherit;
    cursor:pointer;
    transition:color .16s var(--ease-out),background .16s var(--ease-out);
  }
  .mobile-tabbar button svg{width:22px;height:22px;stroke-width:1.9}
  .mobile-tabbar button[aria-current="page"]{
    color:#86efac;
    background:rgba(34,197,94,.11);
  }
  .mobile-tabbar button:active{background:rgba(148,163,184,.12)}

  /* Bottom sheet: history, groups and connection settings */
  .mobile-sheet-scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:75;
    background:rgba(2,6,23,.70);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s var(--ease-out);
  }
  .mobile-sheet{
    display:block;
    position:fixed;
    z-index:80;
    left:0;
    right:0;
    bottom:0;
    padding:10px 12px calc(16px + var(--app-safe-bottom));
    border:1px solid rgba(148,163,184,.22);
    border-bottom:0;
    border-radius:22px 22px 0 0;
    background:#151f34;
    box-shadow:0 -24px 64px rgba(2,6,23,.56);
    transform:translateY(105%);
    transition:transform .24s var(--ease-out);
  }
  .mobile-sheet.is-open{transform:translateY(0)}
  .mobile-sheet-scrim.is-open{opacity:1;pointer-events:auto}
  .mobile-sheet-handle{width:44px;height:5px;border-radius:999px;background:#526079;margin:0 auto 14px}
  .mobile-sheet h2{margin:0 0 12px;font-size:17px}
  .mobile-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mobile-sheet-action{
    appearance:none;
    min-height:74px;
    padding:12px;
    text-align:left;
    color:#f8fafc;
    background:#202c43;
    border:1px solid rgba(148,163,184,.20);
    border-radius:14px;
    font:600 14px/1.3 inherit;
    cursor:pointer;
  }
  .mobile-sheet-action small{display:block;margin-top:5px;color:#93a4bb;font-size:11.5px;font-weight:400}
  .mobile-sheet-action:active{background:#273651}
  .mobile-sheet-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin:12px 0 0;
    color:#8fa0b8;
    font-size:11.5px;
    min-width:0;
  }
  .mobile-sheet-meta svg{width:18px;height:18px;flex:none;stroke-width:1.8}
  .mobile-sheet-meta span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* First-run server configuration state */
  .mobile-connect{
    display:flex;
    position:fixed;
    inset:0;
    z-index:90;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
      radial-gradient(80% 50% at 50% 0%,rgba(34,197,94,.15),transparent 65%),
      #0f172a;
  }
  .mobile-connect[hidden]{display:none}
  .mobile-connect-card{
    width:min(100%,380px);
    padding:26px 22px;
    border:1px solid rgba(148,163,184,.24);
    border-radius:22px;
    background:#1b2336;
    box-shadow:0 24px 70px rgba(2,6,23,.48);
    text-align:center;
  }
  .mobile-connect-mark{
    width:58px;height:58px;margin:0 auto 16px;border-radius:18px;
    display:grid;place-items:center;background:rgba(34,197,94,.14);
    color:#86efac;border:1px solid rgba(34,197,94,.34);
  }
  .mobile-connect-mark svg{width:30px;height:30px}
  .mobile-connect h2{font-size:19px;margin-bottom:8px}
  .mobile-connect p{color:#aebbd0;font-size:13px;margin:0 0 20px}
  .mobile-connect button.act{width:100%;min-height:50px;border-radius:14px}

  /* ---------- Native App account experience ---------- */
  body.qixi-native.native-modal-open{overflow:hidden}
  .qixi-native .native-account-actions{display:block;margin:0 0 12px}
  .qixi-native .native-auth-open{
    width:100%;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:14px;
    font-size:15px;
    box-shadow:0 10px 28px rgba(34,197,94,.18);
  }
  .qixi-native .native-auth-open svg{width:20px;height:20px}

  .qixi-native #tab-accounts>.grid2{gap:10px}
  .qixi-native #tab-accounts .selbar{
    display:flex;
    grid-template-columns:none;
    margin-bottom:10px;
    gap:8px;
  }
  .qixi-native #tab-accounts .selbar>button:first-child,
  .qixi-native #tab-accounts .selbar>span,
  .qixi-native #tab-accounts .groupbar{display:none!important}
  .qixi-native #tab-accounts .selbar>.filter-control{
    display:flex;
    width:100%;
    min-height:44px;
    align-items:center;
    gap:8px;
    margin:0;
  }
  .qixi-native #tab-accounts .selbar>.filter-control select{flex:1}
  .qixi-native #tab-accounts .grid2>div:first-child>.card{padding:12px}

  .qixi-native table.mobile-card-table tbody tr.native-account-row{
    padding:0;
    margin:0 0 8px;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .qixi-native table.mobile-card-table tbody tr.native-account-row:hover td{background:transparent}
  .qixi-native table.mobile-card-table td.native-account-cell{
    display:block;
    padding:0;
    border:0;
  }
  .qixi-native table.mobile-card-table td.native-account-cell::before{display:none}
  .native-account-card{
    position:relative;
    padding:11px 12px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(29,39,62,.92),rgba(20,29,48,.94));
    box-shadow:0 5px 14px rgba(2,6,23,.14);
  }
  .native-account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
  .native-account-title{
    min-width:0;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:3px 6px;
  }
  .native-account-title b{
    color:#f8fafc;
    font-size:16px;
    line-height:1.35;
    font-weight:700;
    overflow-wrap:anywhere;
  }
  .native-account-title .remark{margin:0;font-size:11.5px}
  .native-account-gear{
    appearance:none;
    flex:none;
    width:48px;
    height:48px;
    margin:-7px -7px -5px 0;
    display:grid;
    place-items:center;
    border:1px solid rgba(148,163,184,.18);
    border-radius:12px;
    background:rgba(15,23,42,.72);
    color:#b9c6d9;
    cursor:pointer;
  }
  .native-account-gear svg{width:20px;height:20px;stroke-width:1.8}
  .native-account-gear:active{background:rgba(34,197,94,.14);color:#86efac}
  .native-account-schoolline{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:2px 7px;
    margin-top:1px;
    color:#c8d3e2;
    font-size:13px;
    line-height:1.4;
  }
  .native-account-schoolline span{overflow-wrap:anywhere}
  .native-account-schoolline small{color:#7f8da5;font-size:11.5px}
  .native-account-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:8px}
  .native-account-meta .pill,
  .native-meta-chip{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:1px 8px;
    border-radius:999px;
    font-size:10.5px;
    line-height:1.2;
  }
  .native-meta-chip{border:1px solid rgba(148,163,184,.20);background:#111a2d;color:#aebbd0}
  .native-meta-chip b{color:#f8fafc;margin-left:3px}
  .native-meta-chip.warn{color:#ffd79b;border-color:rgba(240,166,60,.30)}
  .native-account-meta .group-tag{margin:0}
  .native-account-password{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    margin-top:7px;
    color:#69788f;
    font-size:10.5px;
  }
  .native-account-password span{flex:none;text-transform:uppercase;letter-spacing:.05em}
  .native-account-password code{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#9eacc1;
    font:11px/1.35 ui-monospace,Consolas,monospace;
  }

  /* Native modal and bottom sheets */
  .native-overlay{display:block;position:fixed;inset:0;z-index:105;pointer-events:none}
  .native-overlay[hidden]{display:none}
  .native-overlay.is-open{pointer-events:auto}
  .native-overlay-scrim{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.76);
    opacity:0;
    transition:opacity .18s var(--ease-out);
  }
  .native-overlay.is-open .native-overlay-scrim{opacity:1}
  .native-auth-overlay{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    overflow:hidden;
  }
  .native-auth-dialog{
    position:relative;
    z-index:1;
    width:min(100%,520px);
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px;
    border:1px solid rgba(148,163,184,.24);
    border-radius:20px;
    background:#151f34;
    box-shadow:0 24px 80px rgba(2,6,23,.64);
    transform:translateY(14px) scale(.985);
    opacity:0;
    transition:transform .2s var(--ease-out),opacity .18s var(--ease-out);
  }
  .native-overlay.is-open .native-auth-dialog{transform:none;opacity:1}
  .native-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .native-dialog-eyebrow{
    display:block;
    margin-bottom:3px;
    color:#6f819b;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.14em;
  }
  .native-dialog-head h2{margin:0;font-size:19px;line-height:1.3}
  .native-icon-button{
    appearance:none;
    flex:none;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(148,163,184,.20);
    border-radius:12px;
    background:#1e2a40;
    color:#b9c6d9;
    cursor:pointer;
  }
  .native-icon-button svg{width:20px;height:20px}
  .native-icon-button:active{background:#273651;color:#f8fafc}
  .native-auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin:14px 0 12px;
    padding:4px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:13px;
    background:#10192b;
  }
  .native-auth-tabs button{
    appearance:none;
    min-height:48px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#8fa0b8;
    font:600 14px/1 inherit;
    cursor:pointer;
  }
  .native-auth-tabs button.active{
    background:rgba(34,197,94,.16);
    color:#d9ffe7;
    box-shadow:0 0 0 1px rgba(34,197,94,.36) inset;
  }
  .native-auth-panes{padding-bottom:2px}
  .native-auth-pane[hidden]{display:none}
  .native-auth-pane>.card{
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .native-auth-pane>.card>h2{display:none}
  .native-auth-pane .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .native-auth-pane .row>button.act{width:100%;min-width:0;white-space:normal}
  .native-auth-pane p{margin-bottom:4px!important}
  .native-auth-pane input:not([type="checkbox"]):not([type="radio"]),
  .native-auth-pane select{font-size:15px}

  .native-account-menu-overlay{display:flex;align-items:flex-end}
  .native-account-menu{
    position:relative;
    z-index:1;
    width:100%;
    max-height:86dvh;
    overflow-y:auto;
    padding:9px 14px calc(16px + var(--app-safe-bottom));
    border:1px solid rgba(148,163,184,.24);
    border-bottom:0;
    border-radius:22px 22px 0 0;
    background:#151f34;
    box-shadow:0 -24px 70px rgba(2,6,23,.58);
    transform:translateY(105%);
    transition:transform .22s var(--ease-out);
  }
  .native-overlay.is-open .native-account-menu{transform:none}
  .native-sheet-grab{width:44px;height:5px;margin:0 auto 12px;border-radius:999px;background:#526079}
  .native-account-menu-head{padding:0 2px 10px}
  .native-account-action-list{display:flex;flex-direction:column;gap:7px}
  .native-account-action{
    appearance:none;
    width:100%;
    min-height:60px;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 20px;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border:1px solid rgba(148,163,184,.17);
    border-radius:13px;
    background:#1b263b;
    color:#f8fafc;
    text-align:left;
    cursor:pointer;
  }
  .native-account-action:active{background:#24334e}
  .native-account-action-icon{
    width:38px;height:38px;display:grid;place-items:center;
    border-radius:11px;background:rgba(74,158,255,.12);color:#9ecbff;
  }
  .native-account-action-icon svg{width:20px;height:20px}
  .native-account-action-copy{min-width:0;display:block}
  .native-account-action-copy b{display:block;font-size:14px;line-height:1.3}
  .native-account-action-copy small{display:block;margin-top:2px;color:#8fa0b8;font-size:11px;line-height:1.3}
  .native-account-action-chevron{color:#65758e;font-size:22px;line-height:1}
  .native-account-action.danger{color:#ffb3aa;border-color:rgba(239,68,68,.24);background:rgba(127,29,29,.12)}
  .native-account-action.danger .native-account-action-icon{background:rgba(239,68,68,.12);color:#ff8a7a}
  .native-account-action.danger small{color:#c9928c}

  .qixi-native #tab-runs>.grid2{display:block}
  .qixi-native #tab-runs>.grid2>.card.native-hide-in-app,
  .qixi-native #tab-runs .native-hide-in-app{display:none!important}

  .native-account-gear:focus-visible,
  .native-auth-tabs button:focus-visible,
  .native-account-action:focus-visible,
  .native-icon-button:focus-visible,
  .native-auth-open:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}

  /* ---------- Native drawer, app header and profile ---------- */
  .qixi-native .app-shell{padding-top:8px}
  .qixi-native .topbar{padding-left:52px}
  .qixi-native .mobile-tabbar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .qixi-native .native-drawer-toggle{
    display:grid;
    appearance:none;
    position:fixed;
    z-index:58;
    top:10px;
    left:12px;
    width:44px;
    height:44px;
    place-items:center;
    border:1px solid rgba(148,163,184,.22);
    border-radius:13px;
    background:rgba(21,31,52,.94);
    color:#dbe5f3;
    box-shadow:0 8px 24px rgba(2,6,23,.26);
    backdrop-filter:blur(14px);
    cursor:pointer;
  }
  .native-drawer-toggle svg{width:22px;height:22px}
  .native-drawer-toggle:active{background:#24334b;color:#86efac}
  .native-drawer-toggle[aria-expanded="true"]{color:#86efac;border-color:rgba(34,197,94,.48)}
  .native-drawer-scrim{
    position:fixed;
    inset:0;
    z-index:118;
    background:rgba(2,6,23,.72);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s var(--ease-out);
  }
  .native-drawer-scrim.is-open{opacity:1;pointer-events:auto}
  .native-drawer{
    position:fixed;
    z-index:120;
    top:0;
    bottom:0;
    left:0;
    width:min(84vw,332px);
    display:flex;
    flex-direction:column;
    padding:18px 13px calc(16px + var(--app-safe-bottom));
    border-right:1px solid rgba(148,163,184,.22);
    background:
      radial-gradient(80% 34% at 0% 0%,rgba(34,197,94,.13),transparent 64%),
      #111a2c;
    box-shadow:24px 0 70px rgba(2,6,23,.56);
    transform:translateX(-104%);
    transition:transform .24s var(--ease-out);
    pointer-events:none;
  }
  .native-drawer.is-open{transform:none;pointer-events:auto}
  .native-drawer-head{display:flex;align-items:center;gap:11px;padding:3px 3px 18px;border-bottom:1px solid rgba(148,163,184,.16)}
  .native-brand-mark{
    flex:none;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:linear-gradient(145deg,#22c55e,#15803d);
    color:#06140b;
    box-shadow:0 8px 20px rgba(34,197,94,.22);
    font-size:21px;
    font-weight:800;
  }
  .native-brand-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
  .native-brand-copy strong{font-size:16px;line-height:1.3;color:#f8fafc;white-space:nowrap}
  .native-brand-copy strong em{color:#86efac;font-size:10px;font-style:normal;letter-spacing:.08em;margin-left:3px}
  .native-brand-copy span{color:#7f8da5;font-size:11.5px}
  .native-drawer-close{width:48px;height:48px;background:rgba(30,42,64,.72)}
  .native-drawer-nav{display:flex;flex-direction:column;gap:5px;padding:14px 0;overflow-y:auto;overscroll-behavior:contain}
  .native-drawer-nav button{
    appearance:none;
    width:100%;
    min-height:48px;
    display:grid;
    grid-template-columns:26px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border:1px solid transparent;
    border-radius:12px;
    background:transparent;
    color:#aab8cc;
    text-align:left;
    font:600 14px/1.25 inherit;
    cursor:pointer;
  }
  .native-drawer-nav button svg{width:21px;height:21px;stroke-width:1.8}
  .native-drawer-nav button:active{background:rgba(148,163,184,.10)}
  .native-drawer-nav button[aria-current="page"]{
    color:#dcffe8;
    border-color:rgba(34,197,94,.30);
    background:rgba(34,197,94,.13);
  }
  .native-drawer-nav button[aria-current="page"] svg{color:#86efac}
  .native-drawer-foot{
    margin-top:auto;
    padding:12px 10px 0;
    border-top:1px solid rgba(148,163,184,.15);
    display:flex;
    flex-direction:column;
    gap:3px;
    color:#7f8da5;
    font-size:11px;
  }
  .native-drawer-foot small{color:#aebbd0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .native-me-page{min-height:70dvh}
  .native-profile-hero{
    display:flex;
    align-items:center;
    gap:13px;
    padding:18px;
    margin-bottom:12px;
    border:1px solid rgba(148,163,184,.19);
    border-radius:18px;
    background:
      radial-gradient(90% 120% at 100% 0%,rgba(34,197,94,.15),transparent 58%),
      linear-gradient(145deg,#1d2940,#151f34);
    box-shadow:0 12px 32px rgba(2,6,23,.18);
  }
  .native-profile-mark{
    flex:none;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(34,197,94,.34);
    border-radius:18px;
    background:rgba(34,197,94,.12);
    color:#86efac;
  }
  .native-profile-mark svg{width:29px;height:29px}
  .native-profile-hero>div:nth-child(2){min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
  .native-profile-hero strong{font-size:18px;color:#f8fafc}
  .native-profile-hero span{color:#91a2b9;font-size:12px}
  .native-profile-hero em{
    flex:none;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(34,197,94,.13);
    border:1px solid rgba(34,197,94,.28);
    color:#9cf4bc;
    font-size:11px;
    font-style:normal;
  }
  .native-info-card h2{margin-bottom:8px}
  .native-info-list{margin:0;padding:0}
  .native-info-list>div{
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(148,163,184,.13);
  }
  .native-info-list>div:last-child{border-bottom:0}
  .native-info-list dt{color:#7f8da5;font-size:12px}
  .native-info-list dd{margin:0;text-align:right;color:#d9e2ef;font-size:12.5px;overflow-wrap:anywhere}
  .native-info-list dd.ok{color:#8ee6c0}

  .native-account-gear:focus-visible,
  .native-drawer-toggle:focus-visible,
  .native-drawer-nav button:focus-visible,
  .native-auth-tabs button:focus-visible,
  .native-account-action:focus-visible,
  .native-icon-button:focus-visible,
  .native-auth-open:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}

  button,a,label,.group-chip,.geoitem,ul.tasklist li{touch-action:manipulation}

  /* Keyboard and dialog overlays */
  input,select,textarea{scroll-margin-bottom:110px}
  .leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important;font-size:22px!important}
}

@media(max-width:380px){
  .wrap{padding-left:9px;padding-right:9px}
  .tabs{margin-left:-9px;margin-right:-9px;padding-left:9px;padding-right:9px}
  h1{font-size:18px}
  .card{padding:12px}
  .mobile-tabbar button{font-size:10px}
  .mobile-sheet-grid{grid-template-columns:1fr}
}

@media(orientation:landscape) and (max-height:520px){
  .tabs{position:static}
  #path-map{height:360px}
  .mobile-sheet{max-height:86dvh;overflow-y:auto}
  .logs{height:60dvh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

.qixi-native .native-account-card{transition:border-color .16s var(--ease-out),background .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.qixi-native .native-account-card.is-selected{border-color:rgba(34,197,94,.72);background:linear-gradient(145deg,rgba(28,59,48,.92),rgba(20,34,43,.96));box-shadow:0 0 0 1px rgba(34,197,94,.16) inset,0 8px 20px rgba(2,6,23,.18)}
.native-account-check{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(148,163,184,.32);color:transparent;background:#111a2d}
.native-account-card.is-selected .native-account-check{border-color:#22c55e;background:#22c55e;color:#06140b}
.native-account-check svg{width:15px;height:15px;stroke-width:3}
.native-account-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.native-account-footer .native-account-password{margin-top:0;flex:1;min-width:0}
.native-account-go{appearance:none;flex:none;min-width:56px;min-height:48px;border:1px solid rgba(34,197,94,.42);border-radius:10px;background:rgba(34,197,94,.15);color:#9cf4bc;font:800 12px/1 inherit;letter-spacing:.06em;cursor:pointer}
.native-account-go:active{background:rgba(34,197,94,.28)}
.native-account-state-note{color:#8fa0b8;font-size:11px;margin:0 2px 8px}