body .q10-pull-refresh-indicator {
  display: none;
}

@media (max-width: 920px) {
  :root {
    --q10-app-vh: 100dvh;
    --q10-app-topbar-h: 92px;
    --q10-app-gap: 10px;
    --q10-app-pad-x: max(10px, env(safe-area-inset-left, 0px));
    --q10-app-pad-r: max(10px, env(safe-area-inset-right, 0px));
    --q10-app-pad-b: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    --q10-fixed-overlay-bottom: max(236px, calc(env(safe-area-inset-bottom, 0px) + 236px));
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--q10-app-vh) !important;
    overflow-x: hidden !important;
  }

  body.q10-mobile-app-fill {
    height: var(--q10-app-vh) !important;
    min-height: var(--q10-app-vh) !important;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
    overflow: hidden !important;
    overscroll-behavior-y: contain;
  }

  body:has(#loginView:not(.hidden)) {
    overflow-x: hidden !important;
  }

  #loginView.auth-shell.hidden {
    display: none !important;
  }

  #loginView.auth-shell:not(.hidden) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--q10-app-vh) !important;
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(76px, calc(env(safe-area-inset-bottom, 0px) + 76px))
      max(12px, env(safe-area-inset-left, 0px)) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  #loginView .auth-card {
    width: 100% !important;
    max-width: 430px !important;
    min-height: calc(var(--q10-app-vh) - 100px) !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #loginView .auth-card::before,
  #loginView #loginForm input,
  #loginView #loginForm button[type="submit"] {
    border-radius: 8px !important;
  }

  #loginView #loginForm {
    width: 100% !important;
    min-width: 0 !important;
  }

  #loginView #loginForm label,
  #loginView #loginForm input,
  #loginView #loginForm button[type="submit"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #q10PwaInstallFab,
  #q10InstallFab,
  .q10-pwa-install-fab,
  .q10-install-fab {
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 10px)) !important;
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 8px !important;
  }

  body.q10-mobile-app-fill #mainView.app-shell {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--q10-app-vh) !important;
    max-height: var(--q10-app-vh) !important;
    min-height: var(--q10-app-vh) !important;
    margin: 0 !important;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      var(--q10-app-pad-r)
      var(--q10-app-pad-b)
      var(--q10-app-pad-x) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: var(--q10-app-gap) !important;
    overflow: hidden !important;
  }

  body.q10-mobile-app-fill #mainView .topbar {
    position: sticky !important;
    top: max(0px, env(safe-area-inset-top, 0px)) !important;
    z-index: 80 !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    align-items: center !important;
    flex-direction: row !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(37, 99, 235, .12) !important;
    box-shadow: 0 12px 28px rgba(0, 16, 96, .08) !important;
  }

  body.q10-mobile-app-fill #mainView .topbar > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.q10-mobile-app-fill #mainView .topbar h2,
  body.q10-mobile-app-fill #mainView #salonTitle {
    max-width: 100% !important;
    margin: 0 0 2px !important;
    font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.q10-mobile-app-fill #mainView #userInfo {
    max-width: 100% !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.q10-mobile-app-fill #mainView .topbar-actions {
    width: auto !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  body.q10-mobile-app-fill #mainView #cashBadge {
    display: none !important;
  }

  body.q10-mobile-app-fill #mainView #logoutBtn {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
  }

  body.q10-mobile-app-fill #mainView #tabs {
    display: none !important;
  }

  body.q10-mobile-app-fill #content {
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 2px 0 calc(var(--q10-fixed-overlay-bottom) + 20px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-padding: 14px 0 calc(var(--q10-fixed-overlay-bottom) + 20px) !important;
  }

  body.q10-mobile-app-fill #content > * {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
    z-index: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.q10-mobile-app-fill #content > * + * {
    margin-top: 12px !important;
  }

  body.q10-mobile-app-fill .q10-pull-refresh-indicator {
    position: absolute !important;
    left: 50% !important;
    top: calc(var(--q10-app-topbar-h) + 6px) !important;
    z-index: 90 !important;
    min-height: 38px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(37, 99, 235, .18) !important;
    box-shadow: 0 12px 24px rgba(0, 16, 96, .12) !important;
    color: #001060 !important;
    font-size: .86rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translate(-50%, calc(-44px + var(--q10-pull-distance, 0px))) scale(.98) !important;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease !important;
  }

  body.q10-pull-refresh-active .q10-pull-refresh-indicator,
  body.q10-pull-refreshing .q10-pull-refresh-indicator {
    opacity: 1 !important;
    transform: translate(-50%, calc(-44px + var(--q10-pull-distance, 0px))) scale(1) !important;
  }

  body.q10-pull-refresh-ready .q10-pull-refresh-indicator {
    border-color: rgba(37, 99, 235, .38) !important;
  }

  body.q10-mobile-app-fill .q10-pull-refresh-dot {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 auto !important;
    border-radius: 8px !important;
    background: #2563eb !important;
  }

  body.q10-pull-refresh-ready .q10-pull-refresh-dot {
    background: #2563eb !important;
  }

  body.q10-pull-refreshing .q10-pull-refresh-dot {
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
    border: 2px solid rgba(37, 99, 235, .22) !important;
    border-top-color: #2563eb !important;
    animation: q10PullRefreshSpin .8s linear infinite !important;
  }

  body.q10-mobile-app-fill #content > .panel:last-child,
  body.q10-mobile-app-fill #content > section:last-child {
    flex: 1 1 auto !important;
  }

  body.q10-mobile-app-fill #content > .panel,
  body.q10-mobile-app-fill #content > section.panel,
  body.q10-mobile-app-fill #content > section.card {
    position: relative !important;
    overflow: visible !important;
    border-radius: 8px !important;
    padding: 15px !important;
    background:
      radial-gradient(circle at top right, rgba(18, 186, 242, .08), transparent 30%),
      linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(248, 251, 255, .98) 100%) !important;
    border: 1px solid rgba(37, 99, 235, .12) !important;
    box-shadow: 0 14px 30px rgba(0, 16, 96, .08) !important;
  }

  body.q10-mobile-app-fill #content .grid.two,
  body.q10-mobile-app-fill #content .grid.three,
  body.q10-mobile-app-fill #content .form-grid.two,
  body.q10-mobile-app-fill #content .form-grid.three,
  body.q10-mobile-app-fill #content .search-row {
    grid-template-columns: 1fr !important;
  }

  body.q10-mobile-app-fill #content > .panel:last-child,
  body.q10-mobile-app-fill #content > section.panel:last-child {
    display: flex !important;
    flex-direction: column !important;
    min-height: min(100%, calc(var(--q10-app-vh) - var(--q10-app-topbar-h) - 24px)) !important;
  }

  body.q10-mobile-app-fill .section-body {
    min-width: 0 !important;
  }

  body.q10-mobile-app-fill .section-head {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(37, 99, 235, .10) !important;
    gap: 10px !important;
  }

  body.q10-mobile-app-fill .section-head h3 {
    font-size: 1.04rem !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  body.q10-mobile-app-fill .section-head .muted,
  body.q10-mobile-app-fill .muted,
  body.q10-mobile-app-fill small {
    line-height: 1.38 !important;
  }

  body.q10-mobile-app-fill .actions,
  body.q10-mobile-app-fill .inline-actions,
  body.q10-mobile-app-fill .toolbar {
    gap: 8px !important;
  }

  body.q10-mobile-app-fill input,
  body.q10-mobile-app-fill select,
  body.q10-mobile-app-fill textarea {
    min-height: 46px !important;
    border-radius: 8px !important;
    border-color: rgba(37, 99, 235, .14) !important;
    background: #fff !important;
  }

  body.q10-mobile-app-fill textarea {
    min-height: 112px !important;
  }

  body.q10-mobile-app-fill #content > .panel:last-child > .section-body,
  body.q10-mobile-app-fill #content > section.panel:last-child > .section-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.q10-mobile-app-fill .q10-role-backbar {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.q10-mobile-app-fill .q10-role-backbar + * {
    margin-top: 0 !important;
  }

  body.q10-mobile-app-fill .q10-role-backbar button {
    max-width: 100% !important;
    min-height: 42px !important;
    touch-action: manipulation !important;
  }

  body.q10-launcher-mode.q10-mobile-app-fill #content > .panel {
    min-height: calc(var(--q10-app-vh) - var(--q10-app-topbar-h) - 24px) !important;
  }

  body.q10-mobile-app-fill .q10-role-launcher-wrap {
    flex: 1 1 auto !important;
    min-height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.q10-mobile-app-fill .q10-role-launcher-grid {
    min-height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(116px, 1fr) !important;
    align-content: stretch !important;
    gap: 12px !important;
  }

  body.q10-mobile-app-fill .q10-role-launcher-btn {
    min-height: 116px !important;
    height: 100% !important;
    border-radius: 8px !important;
    align-content: start !important;
    box-shadow: 0 10px 22px rgba(0, 16, 96, .08) !important;
  }

  body.q10-mobile-app-fill .empty,
  body.q10-mobile-app-fill .q10-app-empty-state {
    flex: 1 1 auto !important;
    min-height: clamp(190px, 42vh, 460px) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 24px 18px !important;
    border-radius: 8px !important;
    background:
      radial-gradient(circle at top right, rgba(18, 186, 242, .08), transparent 32%),
      linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    border: 1px dashed rgba(37, 99, 235, .20) !important;
    color: #001060 !important;
  }

  body.q10-mobile-app-fill .q10-app-empty-state::before {
    content: "" !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 8px !important;
    background:
      linear-gradient(180deg, rgba(37, 99, 235, .14) 0%, rgba(18, 186, 242, .16) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12) !important;
  }

  body.q10-mobile-app-fill .q10-single-loading-wrap,
  body.q10-mobile-app-fill .q10-global-loading,
  body.q10-mobile-app-fill .q10-app-loading-state {
    flex: 1 1 auto !important;
    min-height: clamp(260px, 58vh, 560px) !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }

  body.q10-mobile-app-fill .table-wrap {
    max-width: 100% !important;
    border-radius: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.q10-mobile-app-fill .modal-backdrop {
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    align-items: stretch !important;
  }

  body.q10-mobile-app-fill .modal-card {
    width: 100% !important;
    max-height: calc(var(--q10-app-vh) - 20px) !important;
    border-radius: 8px !important;
  }

  body.q10-mobile-app-fill #toast {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
    max-width: none !important;
    border-radius: 8px !important;
  }

  @keyframes q10PullRefreshSpin {
    to {
      transform: rotate(360deg);
    }
  }
}

@media (max-width: 920px) and (max-height: 700px) {
  body.q10-mobile-app-fill .q10-role-launcher-grid {
    grid-auto-rows: minmax(96px, 1fr) !important;
    gap: 10px !important;
  }

  body.q10-mobile-app-fill .q10-role-launcher-btn {
    min-height: 96px !important;
    padding: 14px 12px !important;
  }

  body.q10-mobile-app-fill .q10-role-launcher-subtitle {
    display: none !important;
  }
}

@media (max-width: 380px) {
  body.q10-mobile-app-fill .q10-role-launcher-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(86px, auto) !important;
  }
}

/* Q10_NATIVE_APP_2026_START */
@media (max-width:920px){
:root{--q10n-bg:#eef5ff;--q10n-ink:#071331;--q10n-muted:#60708c;--q10n-blue:#155eef;--q10n-cyan:#13bdf2;--q10n-card:rgba(255,255,255,.88);--q10n-line:rgba(15,23,42,.10);--q10n-shadow:0 20px 54px rgba(0,16,96,.16);--q10n-radius:26px;--q10n-nav-h:82px;--q10-fixed-overlay-bottom:max(118px,calc(env(safe-area-inset-bottom,0px) + 118px))!important}
html,body.q10-native-app-2026{background:radial-gradient(circle at 16% -4%,rgba(19,189,242,.30),transparent 34%),radial-gradient(circle at 104% 12%,rgba(21,94,239,.22),transparent 32%),linear-gradient(180deg,#fbfdff 0%,var(--q10n-bg) 100%)!important;color:var(--q10n-ink)!important;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body.q10-native-app-2026 #loginView.auth-shell:not(.hidden){padding:max(14px,env(safe-area-inset-top,0px)) 14px max(22px,env(safe-area-inset-bottom,0px))!important;background:transparent!important;align-items:center!important}
body.q10-native-app-2026 #loginView .auth-card{max-width:430px!important;border-radius:32px!important;padding:26px 20px!important;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78))!important;border:1px solid rgba(255,255,255,.80)!important;box-shadow:var(--q10n-shadow)!important;backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35)}
body.q10-native-app-2026 #loginView .auth-brand-logo{width:92px!important;height:92px!important;border-radius:28px!important;box-shadow:0 16px 34px rgba(0,16,96,.18)!important}
body.q10-native-app-2026 #loginView h1{font-size:clamp(1.55rem,7vw,2.15rem)!important;font-weight:900!important;letter-spacing:-.04em!important}
body.q10-native-app-2026 input,body.q10-native-app-2026 select,body.q10-native-app-2026 textarea,body.q10-native-app-2026 button,body.q10-native-app-2026 .button{min-height:50px!important;border-radius:18px!important;font-size:16px!important}
body.q10-native-app-2026 input,body.q10-native-app-2026 select,body.q10-native-app-2026 textarea{background:rgba(255,255,255,.94)!important;border:1px solid rgba(15,23,42,.11)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important}
body.q10-native-app-2026 button:not(.ghost),body.q10-native-app-2026 .button:not(.ghost),body.q10-native-app-2026 #loginForm button[type=submit]{background:linear-gradient(135deg,var(--q10n-blue),var(--q10n-cyan))!important;color:#fff!important;border:0!important;box-shadow:0 16px 30px rgba(21,94,239,.25)!important;font-weight:850!important}
body.q10-native-app-2026.q10-mobile-app-fill #mainView.app-shell{padding:max(10px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))!important;gap:12px!important;grid-template-rows:auto minmax(0,1fr)!important;background:transparent!important}
body.q10-native-app-2026.q10-mobile-app-fill #mainView .topbar{border-radius:30px!important;padding:12px 12px 12px 14px!important;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78))!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:var(--q10n-shadow)!important;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
body.q10-native-app-2026 .q10-topbar-company-logo,body.q10-native-app-2026 .q10-topbar-brand-logo{width:46px!important;height:46px!important;border-radius:17px!important;object-fit:cover!important;background:#fff!important;box-shadow:0 12px 24px rgba(0,16,96,.16)!important}
body.q10-native-app-2026 #salonTitle{font-size:clamp(1.08rem,4.8vw,1.36rem)!important;font-weight:900!important;letter-spacing:-.04em!important;color:#06163a!important}
body.q10-native-app-2026 #userInfo{color:var(--q10n-muted)!important;font-size:.76rem!important}
body.q10-native-app-2026 #cashBadge{display:none!important}
body.q10-native-app-2026 #logoutBtn{width:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;border-radius:17px!important;font-size:0!important;background:rgba(255,255,255,.76)!important;border:1px solid rgba(15,23,42,.08)!important;box-shadow:0 10px 22px rgba(0,16,96,.10)!important}
body.q10-native-app-2026 #logoutBtn:before{content:'⏻';font-size:18px;font-weight:900;color:#10224a}
body.q10-native-app-2026.q10-mobile-app-fill #content{padding:2px 0 calc(var(--q10n-nav-h) + env(safe-area-inset-bottom,0px) + 30px)!important;gap:14px!important;scroll-padding-bottom:calc(var(--q10n-nav-h) + 34px)!important}
body.q10-native-app-2026 #content>.panel,body.q10-native-app-2026 #content>section.panel,body.q10-native-app-2026 #content>section.card,body.q10-native-app-2026 #content>.card{border-radius:var(--q10n-radius)!important;padding:18px!important;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.80))!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:0 18px 44px rgba(0,16,96,.11)!important;backdrop-filter:blur(18px) saturate(1.18);-webkit-backdrop-filter:blur(18px) saturate(1.18)}
body.q10-native-app-2026 .section-head{border-bottom:0!important;margin-bottom:14px!important;padding-bottom:0!important}
body.q10-native-app-2026 .section-head h3{font-size:1.18rem!important;font-weight:900!important;letter-spacing:-.035em!important}
body.q10-native-app-2026 .q10-role-launcher-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
body.q10-native-app-2026 .q10-role-launcher-btn{min-height:132px!important;border-radius:28px!important;padding:16px!important;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(232,243,255,.86))!important;border:1px solid rgba(255,255,255,.84)!important;box-shadow:0 18px 40px rgba(0,16,96,.12)!important;transition:transform .18s ease,box-shadow .18s ease!important}
body.q10-native-app-2026 .q10-role-launcher-btn:active,body.q10-native-app-2026 button:active{transform:scale(.975)!important}
body.q10-native-app-2026 .q10-role-launcher-title{font-size:1rem!important;font-weight:900!important}
body.q10-native-app-2026 .q10-role-launcher-subtitle,body.q10-native-app-2026 .muted{color:var(--q10n-muted)!important}
body.q10-native-app-2026 .q10-safe-mobile-card-row,body.q10-native-app-2026 tr.q10-safe-mobile-card-row{border-radius:24px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(15,23,42,.07)!important;box-shadow:0 14px 34px rgba(0,16,96,.09)!important}
.q10-native-bottom-nav{position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:2147482000;min-height:var(--q10n-nav-h);display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.84);box-shadow:0 24px 62px rgba(0,16,96,.24);backdrop-filter:blur(26px) saturate(1.45);-webkit-backdrop-filter:blur(26px) saturate(1.45)}
.q10-native-bottom-nav[hidden]{display:none!important}
.q10-native-nav-item{appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;min-width:0!important;min-height:62px!important;padding:6px 2px!important;border-radius:22px!important;color:#42526f!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;font-size:10.5px!important;font-weight:850!important;line-height:1.05!important}
.q10-native-nav-item .q10-native-icon{font-size:22px!important;line-height:1!important}
.q10-native-nav-item.is-active{color:#fff!important;background:linear-gradient(135deg,var(--q10n-blue),var(--q10n-cyan))!important;box-shadow:0 13px 28px rgba(21,94,239,.30)!important}
.q10-native-scrim{position:fixed;inset:0;z-index:2147482001;background:rgba(6,19,58,.30);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .18s ease}
.q10-native-sheet{position:fixed;left:0;right:0;bottom:0;z-index:2147482002;max-height:min(78dvh,680px);padding:10px 14px max(18px,env(safe-area-inset-bottom,0px));border-radius:32px 32px 0 0;background:rgba(255,255,255,.97);box-shadow:0 -26px 74px rgba(0,16,96,.24);transform:translateY(105%);transition:transform .22s cubic-bezier(.2,.8,.2,1);overflow:auto}
.q10-native-sheet:before{content:'';display:block;width:46px;height:5px;border-radius:999px;background:rgba(15,23,42,.18);margin:2px auto 14px}
body.q10-native-sheet-open .q10-native-scrim{opacity:1;pointer-events:auto}
body.q10-native-sheet-open .q10-native-sheet{transform:translateY(0)}
.q10-native-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.q10-native-sheet-title{font-size:1.08rem;font-weight:900;letter-spacing:-.035em;color:#071331}
.q10-native-sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.q10-native-sheet-btn{min-height:72px!important;border-radius:24px!important;background:#f5f9ff!important;border:1px solid rgba(15,23,42,.08)!important;color:#0f1f44!important;text-align:left!important;justify-content:flex-start!important;padding:12px!important;box-shadow:none!important}
.q10-native-sheet-btn strong{display:block;font-size:.94rem}
.q10-native-sheet-btn span{font-size:1.32rem;margin-right:6px}
.q10-native-close{min-height:44px!important;border-radius:16px!important;background:#edf4ff!important;box-shadow:none!important}
}
@media (max-width:380px){body.q10-native-app-2026 .q10-role-launcher-grid,.q10-native-sheet-grid{grid-template-columns:1fr!important}.q10-native-nav-label{font-size:10px!important}}
@media (prefers-reduced-motion:reduce){.q10-native-bottom-nav *,.q10-native-sheet,.q10-native-scrim,body.q10-native-app-2026 *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Q10_NATIVE_APP_2026_END */