/* QasirNet native pages, 2026-09-17. Dedicated to /app/*; never load on browser routes. */
:root{--qn-bg:#f5f6f8;--qn-card:#fff;--qn-line:#e7e9ed;--qn-ink:#14171c;--qn-muted:#77808d;--qn-accent:#ff6508;--qn-nav:68px;--qn-header:58px}
html:has(body.qn-native){width:100%;min-height:100%;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;background:var(--qn-bg)!important;overscroll-behavior-y:auto}
body.qn-native{position:relative!important;inset:auto!important;width:100%!important;min-height:100dvh!important;height:auto!important;max-height:none!important;overflow-x:hidden!important;overflow-y:visible!important;margin:0!important;padding:calc(var(--qn-header) + env(safe-area-inset-top)) 0 calc(var(--qn-nav) + env(safe-area-inset-bottom) + 16px)!important;background:var(--qn-bg)!important;color:var(--qn-ink)!important;font:14px/1.45 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;-webkit-text-size-adjust:100%}
body.qn-native *{box-sizing:border-box}body.qn-native a{text-decoration:none}body.qn-native a,body.qn-native button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.qn-native .top,body.qn-native .public-nav,body.qn-native .pn-mobile-menu,body.qn-native .footer,body.qn-native .mobile-bottom-nav,body.qn-native .mobile-more-sheet,body.qn-native .mobile-more-backdrop{display:none!important}
body.qn-native .qn-appbar{display:block!important;position:fixed!important;top:0!important;left:0!important;right:0!important;height:calc(var(--qn-header) + env(safe-area-inset-top))!important;z-index:600!important;background:rgba(255,255,255,.98)!important;border-bottom:1px solid var(--qn-line)!important;padding-top:env(safe-area-inset-top)!important;box-shadow:none!important;backdrop-filter:blur(10px)!important}
.qn-appbar-inner{height:var(--qn-header);max-width:760px;margin:auto;padding:0 14px;display:flex;align-items:center;gap:10px}.qn-brand,.qn-auth-brand a{flex:0 0 auto;color:var(--qn-ink)!important;font-size:21px!important;font-weight:950!important;letter-spacing:-.05em!important;white-space:nowrap!important}.qn-brand b,.qn-auth-brand b{color:var(--qn-accent)!important}.qn-merchant{margin-left:auto;min-width:0;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--qn-muted);font-weight:700}.qn-menu-button{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;background:#fff;border:1px solid var(--qn-line);border-radius:10px;color:var(--qn-ink);font-size:19px;cursor:pointer}
body.qn-native .qn-bottom-nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:760px!important;margin:auto!important;height:calc(var(--qn-nav) + env(safe-area-inset-bottom))!important;padding:4px 6px env(safe-area-inset-bottom)!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:center!important;gap:0!important;background:rgba(255,255,255,.99)!important;border-top:1px solid var(--qn-line)!important;z-index:650!important;backdrop-filter:blur(12px)}
.qn-bottom-nav a,.qn-bottom-nav .qn-nav-disabled{height:60px!important;min-width:0!important;padding:5px 1px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;border-radius:11px!important;color:#7b8491!important;font-size:9px!important;font-weight:750!important;line-height:1!important;text-align:center!important;background:transparent!important;border:0!important}.qn-bottom-nav a.current{color:var(--qn-accent)!important;background:#fff5ef!important}.qn-bottom-nav a.kasir{color:var(--qn-accent)!important}.qn-bottom-nav .qn-nav-disabled{opacity:.38}.qn-ico{width:22px;height:22px;display:grid;place-items:center;font-size:19px;line-height:1}
.qn-sheet-bg{position:fixed;inset:0;background:rgba(12,15,20,.46);z-index:690}.qn-sheet-bg[hidden]{display:none!important}.qn-sheet{position:fixed;left:50%;bottom:calc(var(--qn-nav) + env(safe-area-inset-bottom));width:min(100%,760px);max-height:min(72dvh,650px);overflow-y:auto;transform:translate(-50%,14px);opacity:0;visibility:hidden;pointer-events:none;z-index:700;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -20px 60px rgba(12,15,20,.16);transition:transform .18s ease,opacity .18s ease}.qn-sheet.open{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}.qn-sheet-title{display:flex;align-items:center;justify-content:space-between;padding:17px 17px 10px;font-size:16px;border-bottom:1px solid var(--qn-line)}.qn-sheet-title button{width:35px;height:35px;border:0;border-radius:10px;background:#f2f3f5;font-size:21px}.qn-sheet-links{padding:5px 13px 16px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.qn-sheet-links a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 11px;min-height:46px;background:#f8f9fa;border:1px solid var(--qn-line);border-radius:10px;color:var(--qn-ink);font-size:12px;font-weight:750}.qn-sheet-links a span{font-size:19px;color:var(--qn-muted)}body.qn-native.qn-menu-open{overflow:hidden!important}
/* Override legacy desktop & shared mobile geometry ONLY inside /app/. */
body.qn-native .wrap,body.qn-native main.wrap,body.qn-native .q-app-main,body.qn-native main,body.qn-native .container{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;height:auto!important;min-height:0!important;max-height:none!important;width:100%!important;max-width:760px!important;margin:0 auto!important;overflow:visible!important;transform:none!important}
body.qn-native .wrap,body.qn-native main.wrap,body.qn-native .q-app-main,body.qn-native main.wrap{padding:17px 13px 28px!important;background:var(--qn-bg)!important}
body.qn-native .head,body.qn-native .page-head,body.qn-native .q-page-head,body.qn-native .q-app-page-head{margin:0 0 15px!important;padding:0!important;gap:10px!important}
body.qn-native .head h1,body.qn-native .page-head h1,body.qn-native h1{font-size:clamp(23px,5.5vw,29px)!important;line-height:1.1!important;letter-spacing:-.035em!important;max-width:100%;overflow-wrap:anywhere}
body.qn-native h2{font-size:18px!important;line-height:1.2!important}body.qn-native h3{font-size:16px!important}
body.qn-native .grid,body.qn-native .summary,body.qn-native .products,body.qn-native .settings-grid,body.qn-native .plans,body.qn-native .staff-layout{gap:10px!important}
body.qn-native .card,body.qn-native .product,body.qn-native .metric,body.qn-native .plan,body.qn-native .history,body.qn-native .settings-card,body.qn-native .order-card,body.qn-native .tablewrap,body.qn-native .cart{background:#fff!important;border:1px solid var(--qn-line)!important;border-radius:14px!important;box-shadow:none!important;min-width:0!important}
body.qn-native .card,body.qn-native .metric,body.qn-native .history{padding:14px!important}body.qn-native .product{overflow:hidden!important}body.qn-native .badge,body.qn-native .status{border-radius:7px!important}
body.qn-native .btn,body.qn-native button,body.qn-native input,body.qn-native select,body.qn-native textarea{font-family:inherit!important}body.qn-native .btn{border-radius:10px!important;min-height:40px;padding:10px 12px;font-size:12px}body.qn-native input:not([type=checkbox]):not([type=radio]),body.qn-native select,body.qn-native textarea{max-width:100%;font-size:16px!important}body.qn-native .head-actions{max-width:100%!important}
body.qn-native .modal,body.qn-native .bal-modal,body.qn-native [role=dialog]:not(.qn-sheet){max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 22px)!important;overflow-y:auto!important;border-radius:14px!important}body.qn-native .modal-head{position:sticky;top:0;background:#fff;z-index:2}body.qn-native .modal-body{overflow-wrap:anywhere}
body.qn-native .tablewrap,body.qn-native .table{max-width:100%;overflow-x:auto!important}body.qn-native img,body.qn-native svg{max-width:100%}body.qn-native .actions{flex-wrap:wrap}body.qn-native .flash{max-width:100%;overflow-wrap:anywhere}
/* Native auth: entirely viewport-based, no marketing panel/card. */
body.qn-native.qn-auth{padding:calc(66px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom))!important;background:#fff!important}
body.qn-auth .qn-auth-brand{position:absolute;left:0;right:0;top:env(safe-area-inset-top);height:58px;display:flex;align-items:center;padding:0 22px;border-bottom:1px solid var(--qn-line);background:#fff}
body.qn-auth .wrap,body.qn-auth main.wrap{min-height:calc(100dvh - 100px - env(safe-area-inset-top))!important;max-width:540px!important;width:100%!important;padding:28px 20px 40px!important;background:#fff!important}
body.qn-auth .shell{display:block!important;background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;max-width:100%!important}
body.qn-auth .intro,body.qn-auth .features,body.qn-auth .trial{display:none!important}
body.qn-auth .formwrap{display:block!important;padding:14px 0 24px!important;width:100%!important;max-width:100%!important}
body.qn-auth .formhead{margin:0 0 25px!important}body.qn-auth .formhead h2{font-size:29px!important}body.qn-auth .formhead p{margin-top:6px!important;font-size:13px!important}
body.qn-auth .field{margin-bottom:15px!important}body.qn-auth .field input,body.qn-auth .field select{width:100%!important;min-height:48px!important}body.qn-auth .submit{min-height:48px!important;width:100%!important;border-radius:10px!important}
body.qn-auth .helper{gap:10px!important;flex-wrap:wrap}body.qn-auth .footer{display:none!important}
@media(max-width:520px){body.qn-native .products{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.qn-native .grid{max-width:100%}body.qn-native .head{align-items:center!important}body.qn-native .head .muted{font-size:12px!important}body.qn-native .card{padding:12px!important}body.qn-native .qn-sheet-links{grid-template-columns:1fr 1fr}body.qn-native .actions .btn{min-width:0}body.qn-native .page-head{flex-wrap:wrap!important}}
@media(max-width:370px){body.qn-native .wrap,body.qn-native main.wrap{padding:14px 10px 24px!important}.qn-appbar-inner{padding:0 11px}.qn-brand{font-size:19px!important}body.qn-native .head-actions{gap:5px!important}body.qn-native .products{gap:8px!important}.qn-bottom-nav a{font-size:8px!important}}
@media(min-width:760px){body.qn-native{background:#eef0f3!important}.qn-appbar-inner{max-width:760px}.qn-sheet-links{padding-left:18px;padding-right:18px}}
