/* PawCard 31.3.0 — shared layers, bottom navigation and touch transitions. */
[hidden] { display: none !important; }
.modal-close-btn, .preview-tile > button.remove-photo-btn {
  position: relative; display: inline-flex; flex: 0 0 44px;
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  min-height: 44px !important; max-width: 44px; max-height: 44px;
  padding: 0 !important; margin: 0; aspect-ratio: 1; border: 0 !important;
  border-radius: 50% !important; align-items: center; justify-content: center;
  background: transparent !important; color: #f1f3f4 !important;
  line-height: 1; isolation: isolate; touch-action: manipulation;
}
.modal-close-btn::before, .remove-photo-btn::before {
  content: ""; position: absolute; inset: 7px; z-index: -1;
  border-radius: 50%; background: #262b2f; border: 1px solid #3b4247;
}
.modal-close-btn .icon, .remove-photo-btn .icon { width: 16px; height: 16px; stroke-width: 2; }
.modal-close-btn:hover::before, .remove-photo-btn:hover::before { background: #3a4146; }
.modal-close-btn:focus-visible, .remove-photo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.modal-header { align-items: center; min-width: 0; }
.modal-header > span:first-child { min-width: 0; flex: 1; }
.preview-tile > button.remove-photo-btn { position: absolute; top: -17px; right: -15px; z-index: 2; }
.upload-tiles { padding: 22px 16px 6px 0; align-items: center; }
.floating-layer { position: fixed; inset: 0; z-index: 9000; isolation: isolate; }
.floating-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.54); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); touch-action: none; }
.floating-layer .floating-surface {
  display: block !important; position: fixed !important; bottom: auto !important; right: auto !important;
  z-index: 1; margin: 0 !important; padding: 14px 16px 16px !important; box-sizing: border-box;
  background: #101416 !important; color: var(--text); border: 1px solid #333b40 !important;
  border-radius: 18px; box-shadow: 0 18px 65px #000a; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.floating-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -7px -7px 10px 0; }
.floating-heading > strong { font-size: 17px; font-weight: 600; }
.floating-surface .directory-filter-row { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 8px; }
.floating-surface #homeStoreFilter { grid-column: 1 / -1; }
.floating-surface select { min-width: 0; width: 100%; }
.floating-surface .clean-select { min-height: 44px; padding-inline: 10px; font-size: 15px; }
.floating-surface .custom-date-input { min-height: 44px; padding: 10px; font-size: 16px; }
.floating-surface .date-pills-row { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 12px; }
.floating-surface .date-pill { min-height: 40px; }
.floating-surface .earn-breakdown-heading > strong { display: none; }
.floating-surface #earnRateLabel { font-size: 14px !important; color: var(--muted) !important; }
.floating-surface .earn-breakdown-rows { gap: 12px 16px; }
.floating-surface #earnSummaryGross, .floating-surface #earnSummaryTips, .floating-surface #earnNetCommission { font-size: 17px !important; text-align: right; color: var(--text) !important; font-variant-numeric: tabular-nums; }
.floating-surface#createMenu > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px; text-align: left; border-radius: 10px; font-size: 17px; }
.floating-surface#createMenu > button:hover { background: var(--surface-hover); }
.has-interaction-layer #appRoot { pointer-events: none; }
.nav-symbol { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.nav-symbol .nav-count {
  position: absolute; top: -7px !important; bottom: auto !important; right: -12px !important;
  min-width: 18px !important; height: 18px; min-height: 18px !important; padding: 0 4px !important;
  display: grid; place-items: center; border: 2px solid var(--bg); border-radius: 999px;
  background: #e43e4e !important; color: #fff !important; font-size: 10px !important;
  font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1 !important; margin: 0;
}
.nav-item.has-unread .active-page-dot { top: auto !important; bottom: -2px; right: -4px !important; }
.inbox-card { position: relative; }
.inbox-card:not(.is-read) .inbox-copy h3::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.inbox-read-action { padding: 0; text-align: left; color: inherit; font: inherit; line-height: inherit; }
.inbox-read-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
.inbox-request-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.inbox-request-actions .status-pill { margin: 0; }
#accountCenterModal {
  padding: 0 !important; justify-content: flex-start; align-items: stretch; z-index: 9500;
  background: rgba(0,0,0,var(--drawer-dim,0)); backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: background-color 220ms ease; overflow: hidden; overscroll-behavior: contain;
}
#accountCenterModal .account-center-card {
  width: min(82vw,360px); min-width: 0; max-width: 360px !important; height: 100%;
  max-height: none !important; border: 0; border-radius: 0; box-shadow: 12px 0 50px #0005;
  background: #000; transform: translate3d(calc(var(--drawer-offset,0px) - 100%),0,0);
  transition: transform 220ms cubic-bezier(.2,.75,.25,1); overflow: hidden;
}
#accountCenterModal .modal-header { padding: calc(10px + env(safe-area-inset-top,0px)) 16px 0; border: 0; background: #000 !important; }
#accountCenterTitle { font-size: 13px; color: var(--muted); font-weight: 500; }
#accountCenterBody { padding: 12px 24px max(20px,env(safe-area-inset-bottom,0px)); gap: 0; background: #000; overscroll-behavior-y: contain; }
.drawer-identity { margin-bottom: 18px; }
.drawer-avatar { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); margin-bottom: 12px; }
.drawer-avatar .icon { width: 27px; height: 27px; color: #c7cdd1; }
.drawer-identity h2 { font-size: 25px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.drawer-identity p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.drawer-location { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 9px; }
.drawer-location .account-location { margin: 0; font-size: 15px; line-height: 1.5; }
.drawer-location select { font-size: 15px; min-height: 44px; }
.drawer-menu, .drawer-secondary { display: flex; flex-direction: column; padding-block: 8px; }
.drawer-secondary { margin-top: 10px; border-top: 1px solid var(--line); }
#accountCenterBody .account-menu-row { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 11px 0; gap: 18px; text-align: left; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 20px; line-height: 1.4; font-weight: 600; }
#accountCenterBody .account-menu-row > .icon { width: 25px; height: 25px; flex: 0 0 25px; }
#accountCenterBody .account-menu-row > span { min-width: 0; overflow-wrap: anywhere; }
#accountCenterBody .account-menu-row > .drawer-status { margin-left: auto; flex: 0 1 95px; color: var(--accent); text-align: right; font-size: 11px; font-weight: 450; }
#accountCenterBody .drawer-secondary .account-menu-row, #accountCenterBody .drawer-bottom .account-menu-row { min-height: 48px; font-size: 16px; font-weight: 450; }
.drawer-bottom { margin-top: auto; padding-top: 20px; }
.drawer-bottom .account-version { margin: 8px 0 0; color: var(--subtle); font-size: 12px; }
#appRoot { transition: transform 220ms cubic-bezier(.2,.75,.25,1); }
.drawer-dragging #appRoot, .drawer-dragging #accountCenterModal, .drawer-dragging #accountCenterModal .account-center-card { transition: none !important; }
.back-preview { position: absolute !important; inset: 0; z-index: 1; pointer-events: none !important; }
.back-moving { position: relative; z-index: 2; background: var(--bg); transition: transform 200ms cubic-bezier(.2,.75,.25,1); will-change: transform; }
.back-moving.is-dragging { transition: none; }
.clients-page { position: relative; }
.workspace { position: relative; }
@media (min-width: 769px) {
  .mobile-brand, .workspace-title > .mobile-account { display: none !important; }
}
@media (max-width: 768px) {
  :root {
    /* Lowest layout requested by the owner. Increase only this offset to lift it. */
    --mobile-nav-offset: 0px; --mobile-nav-content: 48px; --mobile-nav-safe: 0px;
    --mobile-nav-height: calc(var(--mobile-nav-content) + var(--mobile-nav-offset));
  }
  html, body { min-height: 0; padding-bottom: 0; }
  .app-shell { position: fixed; inset: 0; height: auto; min-height: 0; max-height: none; padding-bottom: var(--mobile-nav-height); }
  .mobile-nav {
    position: absolute; inset: auto 0 var(--mobile-nav-offset); width: auto; height: var(--mobile-nav-content); min-height: var(--mobile-nav-content);
    padding: 0 max(4px,env(safe-area-inset-right,0px)) 0 max(4px,env(safe-area-inset-left,0px)); margin: 0;
    display: flex; align-items: center; border-top: 0; box-shadow: 0 -1px 0 var(--line); background: #000;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .mobile-nav .nav-item, .mobile-nav .nav-create { height: 48px; min-height: 48px; padding: 0; margin: 0; flex: 0 0 20%; width: 20%; }
  .mobile-nav .icon { width: 28px; height: 28px; }
  .app-shell.mobile-nav-hidden, .app-shell.mobile-keyboard-open { padding-bottom: 0; }
  .mobile-keyboard-open .mobile-nav { display: none; }
  .mobile-nav .nav-symbol .active-page-dot { width: 6px; height: 6px; }
  .workspace-header {
    position: relative; min-height: calc(54px + env(safe-area-inset-top,0px)); height: calc(54px + env(safe-area-inset-top,0px));
    padding: calc(5px + env(safe-area-inset-top,0px)) 12px 5px; gap: 0;
  }
  .workspace-title { min-width: 0; flex: 1; gap: 6px; }
  .workspace-title .mobile-account, .workspace-title .header-back { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; }
  .workspace-title .mobile-account { border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
  .workspace-title .mobile-account .icon { width: 24px; height: 24px; }
  .workspace-header.is-home-header .header-copy { display: none; }
  .workspace-header .header-copy { min-width: 0; }
  .workspace-header h1 { font-size: 21px; line-height: 28px; }
  .mobile-brand { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); display: flex; width: 36px; height: 36px; pointer-events: none; }
  .mobile-brand img { display: block; width: 36px; height: 36px; }
  #mobileDirectoryCount { display: none; }
  .account-drawer-open #appRoot { transform: translate3d(var(--drawer-offset,0px),0,0); }
  .floating-surface .custom-date-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; }
  .floating-surface .custom-date-row > span { display: none; }
  .floating-surface .schedule-control-buttons { display: flex; flex-direction: column; gap: 9px; }
  .floating-surface .schedule-control-buttons > button { width: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  #appRoot, #accountCenterModal, #accountCenterModal .account-center-card, .back-moving { transition: none !important; }
}