/* Shared phone shell. Safe areas are applied once, including every sticky layer. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-surface: #f5f5f0;
}
html.lio-app-shell {width:100%;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--app-safe-top) + 76px);touch-action:pan-x pan-y}
html.lio-app-shell,html.lio-app-shell body {overflow-x:clip!important;overflow-y:visible!important}
html.lio-app-shell body {box-sizing:border-box;min-width:0;max-width:100%;padding-top:var(--app-safe-top)!important;overscroll-behavior-y:none}
html.lio-app-shell body::before {content:'';position:fixed;z-index:50000;inset:0 0 auto;height:var(--app-safe-top);background:var(--app-surface);pointer-events:none}
html.lio-app-shell *,html.lio-app-shell *::before,html.lio-app-shell *::after {box-sizing:border-box}
html.lio-app-shell input,html.lio-app-shell textarea,html.lio-app-shell select {min-width:0;max-width:100%}
html.lio-app-shell img,html.lio-app-shell svg {max-width:100%}
html.lio-app-shell :is(button,a,input,textarea,select) {-webkit-tap-highlight-color:transparent}
html.lio-app-shell :is(input,textarea,[contenteditable='true']) {-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}
html.lio-app-shell img {-webkit-touch-callout:default}
html.lio-app-shell .portal-header {position:sticky;top:var(--app-safe-top);z-index:2000;background:var(--app-surface)}
html.lio-app-shell .market-workspace #mainAppWrapper>.top-header {position:sticky!important;top:var(--app-safe-top)!important;z-index:2000!important;background:var(--app-surface)!important}
html.lio-app-shell .topbar {top:var(--app-safe-top)!important;height:64px!important;padding:0 16px!important}
html.lio-app-shell .toolbar {top:calc(64px + var(--app-safe-top))!important}
html.lio-app-shell .select-back {top:calc(8px + var(--app-safe-top))!important;min-height:44px;display:flex;align-items:center}
html.lio-app-shell .modal {padding-top:calc(12px + var(--app-safe-top));padding-bottom:calc(12px + var(--app-safe-bottom))}
html.lio-app-shell .modal-box {max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 24px)!important;overflow-y:auto;overscroll-behavior:contain}
html.lio-app-shell .product-detail-modal {top:var(--app-safe-top)!important;height:calc(100dvh - var(--app-safe-top))!important}
html.lio-app-shell .product-detail-header {position:sticky;top:0}
html.lio-app-shell .img-view-modal .close-btn {top:calc(10px + var(--app-safe-top));min-width:44px;min-height:44px}
html.lio-app-shell .portal-dialog {max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 24px);overflow-y:auto}
@media(max-width:700px) {
  html.lio-app-shell body {padding-left:var(--app-safe-left)!important;padding-right:var(--app-safe-right)!important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  html.lio-app-shell :is(input,textarea,select) {font-size:16px!important}
  html.lio-app-shell :is(button,a,[role='button'],summary) {touch-action:manipulation}
  html.lio-app-shell .market-workspace #mainAppWrapper {width:100%!important;min-width:0!important;margin:0!important}
  html.lio-app-shell .market-workspace #mainAppWrapper>.top-header {min-height:60px!important;padding:8px 12px!important;gap:8px!important}
  html.lio-app-shell .market-workspace :is(.workspace-back,.workspace-account) {width:44px!important;height:44px!important;min-width:44px;flex-basis:44px!important;border:0;border-radius:12px;background:transparent}
  html.lio-app-shell .market-workspace #mainAppWrapper .top-header #pageTitle {font-size:18px!important;line-height:1.3!important}
  html.lio-app-shell .market-workspace #workspaceClientCaption {font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  html.lio-app-shell .market-workspace #buySaveStatus {position:relative!important;top:auto!important;right:auto!important;float:none!important;display:block!important;width:fit-content!important;max-width:calc(100% - 24px)!important;white-space:normal!important;overflow-wrap:anywhere!important;margin:4px 12px 0 auto!important;padding:4px 7px!important;font-size:10px!important;line-height:1.4!important;box-shadow:none!important;border-radius:6px!important}
  html.lio-app-shell .market-workspace #clientSelectPage {min-height:calc(100dvh - var(--app-safe-top));width:100%!important;min-width:0!important;padding:12px 16px 32px!important}
  html.lio-app-shell .workspace-portal-header {padding-bottom:22px;min-height:44px}
  html.lio-app-shell .workspace-intro h1 {font-size:26px;letter-spacing:-.5px}
  html.lio-app-shell .workspace-intro p {font-size:12px;line-height:1.7}
  html.lio-app-shell .market-workspace .client-entry-card {padding:18px!important;border-radius:18px!important}
  html.lio-app-shell .market-workspace #mainAppWrapper>.page {width:100%!important;min-width:0!important;padding:14px 12px calc(90px + var(--app-safe-bottom))!important}
  html.lio-app-shell .market-workspace .bottom-nav {width:auto!important;margin:0!important;left:var(--app-safe-left)!important;right:var(--app-safe-right)!important;padding:5px 8px calc(5px + var(--app-safe-bottom))!important;background:#fff!important;box-shadow:none!important}
  html.lio-app-shell .market-workspace .nav-item {min-height:50px!important;min-width:0!important;padding:6px 2px!important;border-radius:12px!important;font-size:10px!important;gap:4px!important}
  html.lio-app-shell .market-workspace .nav-icon {font-size:21px!important;height:24px!important}
  html.lio-app-shell .market-workspace .nav-item.active {background:#edf3ef!important;color:#17665b!important}
  html.lio-app-shell .market-workspace .kilo-merchant-page {width:100%;min-width:0;padding:14px 12px calc(90px + var(--app-safe-bottom))}
  html.lio-app-shell .market-workspace .finance-module>summary {padding:14px!important}
  html.lio-app-shell .market-workspace .finance-module>summary :is(h2,strong) {font-size:16px!important}
  html.lio-app-shell .market-workspace .finance-module>summary p {font-size:11px!important;line-height:1.6!important}
  html.lio-app-shell .market-workspace .finance-module-body {padding:0 10px 12px!important}
  html.lio-app-shell .market-workspace .finance-metric {padding:12px!important;min-width:0;min-height:88px!important}
  html.lio-app-shell .market-workspace .finance-metric>strong {font-size:20px!important;overflow-wrap:anywhere}
  html.lio-app-shell .market-workspace .finance-metric>small {font-size:11px!important}
  html.lio-app-shell .portal-header {height:64px;gap:8px}
  html.lio-app-shell .portal-account,html.lio-app-shell .portal-help-button {min-width:44px;min-height:44px}
  html.lio-app-shell .portal-welcome {padding:22px 0}
  html.lio-app-shell .portal-welcome h1 {font-size:25px}
  html.lio-app-shell .portal-business-card {position:relative;padding:18px;border-radius:18px}
  html.lio-app-shell .portal-business-top {position:absolute;top:18px;left:18px;margin:0}
  html.lio-app-shell .portal-business-label,html.lio-app-shell .portal-business-tags {display:none}
  html.lio-app-shell .portal-business-main {padding-left:50px;min-height:54px}
  html.lio-app-shell .portal-business-main h2 {font-size:20px;line-height:1.4}
  html.lio-app-shell .portal-business-main p {font-size:11px;line-height:1.6;margin-top:4px}
  html.lio-app-shell .portal-business-main h2 .lio-icon {width:18px;height:18px}
  html.lio-app-shell .portal-service-routes {margin:14px 0 0}
  html.lio-app-shell .portal-service-routes>a {min-height:44px}
  html.lio-app-shell .portal-enter {margin-top:14px;padding-top:10px;min-height:38px}
  html.lio-app-shell .portal-secondary-grid {margin-top:18px}
  html.lio-app-shell .portal-nav {background:#fff;padding-bottom:calc(6px + var(--app-safe-bottom))}
  html.lio-app-shell .portal-nav>a,html.lio-app-shell .portal-nav>button {min-height:50px}
}