/* PALECO PTW — BAC Procurement visual system alignment
   Bright workspace, light mint sidebar, PALECO green actions, restrained blue information accents. */
:root,
html[data-theme="dark"]{
  --navy:#123654;
  --navy-2:#184b70;
  --navy-3:#1d5d86;
  --blue:#2467a8;
  --sky:#eef6fb;
  --green:#0b6b42;
  --green-2:#128253;
  --red:#b42318;
  --orange:#b54708;
  --gold:#e9b949;
  --bg:#f6faf8;
  --surface:#ffffff;
  --surface-2:#f8fbfa;
  --surface-3:#eef7f2;
  --text:#18242d;
  --text-2:#34464f;
  --muted:#6b7a83;
  --line:#dce7e1;
  --line-2:#cbdcd3;
  --shadow-sm:0 2px 8px rgba(30,65,48,.045);
  --shadow:0 8px 24px rgba(21,75,48,.07);
  --shadow-lg:0 22px 55px rgba(16,57,38,.14);
  --radius:14px;
  --radius-sm:9px;
  --sidebar:252px;
}
html[data-theme="dark"] body{color-scheme:light}
body{
  background:
    radial-gradient(circle at 92% -5%,rgba(18,130,83,.075),transparent 25%),
    linear-gradient(180deg,#fbfdfc 0,#f5faf7 100%);
}
#themeToggle{display:none!important}

/* Loading/auth */
.app-loading{background:linear-gradient(145deg,#f2fbf6,#e6f5ec 56%,#f8fcfa);color:var(--text)}
.loading-card p{color:var(--muted)}.loading-card .spinner{border-color:#d5e8dd;border-top-color:var(--green)}
.auth-page{background:#fbfdfc}
.auth-brand{background:linear-gradient(145deg,#eef9f2 0%,#dff1e6 58%,#f7fbf9 100%);color:var(--text);border-right:1px solid var(--line)}
.auth-brand:before{background:radial-gradient(circle,rgba(18,130,83,.16),rgba(18,130,83,0) 70%)}
.auth-brand:after{background:radial-gradient(circle,rgba(36,103,168,.10),rgba(36,103,168,0) 68%)}
.auth-brand h1{color:var(--navy)}.auth-brand h1 span{color:var(--green)}
.auth-brand .eyebrow{color:var(--green)}
.auth-lead{color:#486256}
.auth-feature{background:rgba(255,255,255,.72);border-color:#cfe3d7;box-shadow:0 5px 14px rgba(25,83,52,.045)}
.auth-feature span{color:#63786c}
.auth-boundary{background:#fff;border-color:#d8e7de;color:#50695b}
.auth-panel{background:#fff}
.glass-card{background:#fff;border-color:var(--line);box-shadow:0 20px 50px rgba(26,79,51,.10)}
.auth-tabs{background:#edf7f1}.auth-tabs button.active{color:var(--green);box-shadow:0 2px 8px rgba(16,81,48,.08)}

/* Sidebar — BAC Procurement style */
.sidebar{
  background:linear-gradient(180deg,#fbfefc 0%,#f1f9f4 100%);
  color:var(--text);
  border-right:1px solid #dce9e1;
  box-shadow:8px 0 24px rgba(32,75,51,.045);
}
.brand{border-bottom:1px solid var(--line)}
.brand-logo-shell{background:#fff;border:1px solid #dce9e1;box-shadow:0 5px 14px rgba(18,83,50,.08)}
.brand strong{color:var(--navy)}
.brand span{color:#698178}
.sidebar-context{background:#fff;border-color:#dbe9e1;box-shadow:var(--shadow-sm)}
.sidebar-context b{color:var(--navy)}
.sidebar-context small{color:#6e847a}
.nav-title{color:#7a9387}
.nav-btn{color:#3f5b4d}
.nav-btn:hover{background:#e8f5ed;color:var(--green);transform:translateX(1px)}
.nav-btn.active{
  background:linear-gradient(135deg,#0b6b42,#128253);
  color:#fff;
  border-color:#0b6b42;
  box-shadow:0 7px 18px rgba(11,107,66,.18);
}
.nav-btn .ico{background:#e5f2ea;color:#0b6b42}
.nav-btn.active .ico{background:rgba(255,255,255,.17);color:#fff}
.sidebar-foot{border-top-color:var(--line);color:#7b9187}
.side-slogan{color:var(--green)}

/* Header/workspace */
.topbar{background:rgba(255,255,255,.96);border-color:var(--line);box-shadow:0 2px 10px rgba(35,74,51,.03)}
.top-eyebrow{color:#71867b}
.user-chip{background:#fff;border-color:#dbe7e0}
.avatar{background:#e8f5ed;color:var(--green)}
.icon-btn{background:#fff}
.content{max-width:1540px}
.card{border-color:#dce7e1;box-shadow:var(--shadow);background:#fff}
.card:hover{border-color:#d1e3d8}
.page-title h2{color:#172d3b}
.btn.primary,.btn.success{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 7px 18px rgba(11,107,66,.12)}
.btn.primary:hover,.btn.success:hover{background:#075b37;border-color:#075b37}
.btn.secondary{background:#fff;border-color:#cfded5;color:#355649}
.btn.secondary:hover{background:#f0f8f3;border-color:#a9ccb8;color:var(--green)}
.btn.ghost{color:#486159}
.field input,.field select,.field textarea{background:#fff;border-color:#cfded5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#3b9b6d;box-shadow:0 0 0 3px rgba(18,130,83,.10)}
.table th{background:#edf7f1;color:#355a49}
.table tr:hover td{background:#fbfdfc}
.tabs{border-color:var(--line)}
.tab.active{color:var(--green);border-color:var(--green)}
.doc-badge{background:#edf7f1;border-color:#c9e1d3;color:#0a6940}
.status.approved,.status.active,.status.completed,.status.ready{background:#e8f7ee;border-color:#c4e7d2;color:#08713f}
.status.pending,.status.in_progress{background:#fff8e7;border-color:#f1dfad;color:#805b00}

/* Dashboard */
.dashboard-hero{
  background:linear-gradient(135deg,#ffffff 0%,#eff9f3 72%,#e5f4eb 100%);
  color:var(--text);
  border:1px solid #d7e8de;
  box-shadow:0 12px 32px rgba(24,88,52,.07);
}
.dashboard-hero:after{background:radial-gradient(circle,rgba(18,130,83,.16),transparent 70%)}
.hero-copy h2{color:var(--navy)}.hero-copy p{color:#60766b}.hero-brand span{color:#6d857a}
.workflow-mini{background:#fff;border:1px solid #dce8e1}
.workflow-mini.current{border-color:#8fb8d4;box-shadow:0 0 0 2px rgba(36,103,168,.07)}
.workflow-mini.done{border-color:#b9dec8}

/* Calls */
.callout.mint{background:#eef9f2;color:#265b40;border:1px solid #cbe6d5}
.callout.blue{background:#eef6fb;color:#2d5875;border-color:#cee0ec}
.callout.gold{background:#fff9e9;color:#715a18;border-color:#f1e0ae}

/* New official form UX */
.ptw-number-preview{
  background:#fff;border:1px solid #cfe1d6;color:var(--green);border-radius:11px;
  padding:10px 14px;font-size:12px;font-weight:900;letter-spacing:.04em;box-shadow:var(--shadow-sm)
}
.section-card{border-top:3px solid #0b6b42}
.section-divider{height:1px;background:var(--line);margin:22px 0}
.geo-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.geo-row input{max-width:180px}
.safety-class-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.required-doc-grid,.safety-verification-grid,.postjob-check-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px
}
.required-doc-grid .check-item,.safety-verification-grid .check-item,.postjob-check-grid .check-item{
  margin:0!important;padding:10px 11px;border:1px solid #dce7e1;border-radius:10px;background:#fbfdfc
}
.checked-lock{background:#eef9f2!important;border-color:#cce5d6!important}
.auto-tag{margin-left:auto;font-size:8px;letter-spacing:.08em;color:#0b6b42;background:#dff1e6;padding:2px 5px;border-radius:5px;font-weight:900}
.approval-safety-panel{background:#f8fbf9;border:1px solid #dce7e1;border-radius:13px;padding:14px;margin:12px 0}
.approval-docs{grid-template-columns:repeat(2,minmax(0,1fr))}
.signatory-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.signatory-block{background:linear-gradient(180deg,#fbfdfc,#f2f9f5);border:1px solid #d7e7de;border-radius:12px;padding:13px}
.signatory-block span{display:block;color:#0b6b42;font-size:9px;font-weight:900;letter-spacing:.11em;margin-bottom:5px}
.signatory-block b{display:block;color:#183a2b;font-size:12px}.signatory-block small{display:block;color:#6b8075;margin-top:5px}
.review-panel{border:1px solid #d9e8df;border-radius:12px;background:#fbfdfc;overflow:hidden}
.review-title{padding:10px 13px;background:#edf7f1;color:#22563c;font-weight:900;font-size:12px}
.official-detail-grid{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;align-items:start}
.verification-list{display:grid;grid-template-columns:1fr;gap:7px}
.verification-list.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.verification-list>div{display:flex;align-items:flex-start;gap:8px;font-size:12px;padding:6px 0;border-bottom:1px dashed #e2ece6}
.verify-dot{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;border-radius:50%;background:#f0f3f1;color:#8a9891;font-weight:900;font-size:11px}
.verify-dot.yes{background:#dff3e7;color:#08713f}
.reference-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.reference-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#e7f4ec;color:#0b6b42;font-size:10px;font-weight:900;margin-bottom:10px}
.job-col h4{background:#edf7f1;color:#22563c;border-color:#d5e7dd}
.wizard-head{border-color:#dce8e1;background:#fff}
.wizard-step.active{background:#e9f6ee;color:#0a6b40}.wizard-step.done{color:#0a6b40}
.photo-upload-panel{background:#fbfdfc;border:1px dashed #bdd7c8;border-radius:14px;padding:0 14px 14px}
.sigpad{border-color:#a9c9b7;background:#fff}

/* BAC-style subtle motion */
.card,.btn,.nav-btn,.permit-mobile-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.btn:not(:disabled):active{transform:translateY(1px)}
.card:hover{box-shadow:0 10px 28px rgba(21,75,48,.075)}

/* Mobile */
@media(max-width:1100px){
  .reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .official-detail-grid{grid-template-columns:1fr!important}
}
@media(max-width:780px){
  :root,html[data-theme="dark"]{--sidebar:268px}
  .sidebar{box-shadow:16px 0 38px rgba(22,67,43,.12)}
  .nav-overlay{background:rgba(20,49,36,.28)}
  .safety-class-grid,.required-doc-grid,.safety-verification-grid,.postjob-check-grid,.approval-docs,.signatory-map,.verification-list.compact{grid-template-columns:1fr!important}
  .ptw-number-preview{width:100%;text-align:center;margin-top:8px}
  .geo-row{display:grid;grid-template-columns:1fr 1fr}.geo-row input{max-width:none}.geo-row .btn{grid-column:1/-1}
  .reference-grid{grid-template-columns:1fr!important}
  .modal-backdrop{background:rgba(22,52,38,.34)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Compact PALECO document/app typography - uses installed narrow fonts when available. */
body,.app-shell,.modal,.card,.table,input,select,textarea,button{font-family:"Segoe UI",Arial,sans-serif;font-size:15px}


/* === Streamlined PTW + Inbox UAT — 2026-09-02 === */
.nav-btn{font-size:14.5px;min-height:44px}
.nav-btn .ico{font-size:16px}
.nav-count{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#c62828;color:#fff;font-size:11px;font-weight:800;box-shadow:0 2px 8px rgba(198,40,40,.25)}
.nav-count.hidden{display:none!important}
.page-title h2{font-size:27px;letter-spacing:-.02em}
.card h3,.section-title h3{font-size:19px}
.table{font-size:14px}
.table th{font-size:12px}
.btn{font-size:14px;font-weight:700}
.btn.btn-action{min-height:44px;padding:10px 16px;font-size:14.5px}
.next-action-cta{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:center;min-width:190px}
.ptw-action-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.combined-role-badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.combined-role-badge{background:#e8f5ed;color:#086a41;border:1px solid #c6e5d3;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800}
.inbox-shell{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px}
.inbox-list{display:flex;flex-direction:column;gap:10px}
.inbox-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:13px;align-items:center;padding:15px 16px;border:1px solid #dce9e2;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(17,74,47,.05)}
.inbox-item:hover{border-color:#a9d0ba;box-shadow:0 9px 24px rgba(17,74,47,.09)}
.inbox-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#edf8f2;color:#087f4d;font-size:21px}
.inbox-main{min-width:0}
.inbox-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inbox-title-row b{font-size:15px;color:#193d2d}
.inbox-meta{font-size:11px;color:#71837a;font-weight:700;margin-top:3px}
.inbox-message{font-size:13.5px;line-height:1.45;color:#40584c;margin-top:5px}
.inbox-cta{white-space:nowrap}
.inbox-summary{display:grid;gap:10px;position:sticky;top:82px}
.inbox-summary .summary-block{padding:14px;border-radius:13px;border:1px solid #dce9e2;background:#fbfefc}
.inbox-summary .summary-block strong{font-size:25px;color:#086a41;display:block}
.inbox-empty{padding:36px;text-align:center;color:#6d8076}
.inbox-empty .inbox-empty-icon{font-size:38px;margin-bottom:8px}
.action-owner-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#fff4ce;border:1px solid #f1d87b;padding:3px 7px;font-size:10px;font-weight:800;color:#7b5b00}
@media(max-width:900px){.inbox-shell{grid-template-columns:1fr}.inbox-summary{position:static;grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){body,.app-shell,.modal,.card,.table,input,select,textarea,button{font-size:15px}.page-title h2{font-size:23px}.inbox-item{grid-template-columns:42px 1fr;padding:13px}.inbox-item .inbox-cta{grid-column:1/-1;width:100%}.inbox-item .inbox-cta .btn{width:100%}.inbox-summary{grid-template-columns:1fr}.tracker-main strong{font-size:15px}.next-action-cta{width:100%}}


/* ===== MOBILE FIELD WORKER UI / FINAL UAT 2026-09-10 ===== */
.mobile-hero,.mobile-sync-bar,.mobile-bottom-nav{display:none}
@media(max-width:820px){
  :root{--mobile-navy:#07345c;--mobile-blue:#0c5fb5;--mobile-green:#078a51;--mobile-yellow:#f6c72d;--mobile-bg:#f4f8fb;--mobile-text:#0b2f59}
  html,body{background:var(--mobile-bg);font-family:"Segoe UI",Arial,sans-serif!important}
  body{font-size:16px!important;padding-bottom:88px}
  .shell{display:block!important;min-height:100vh}
  .sidebar,.nav-overlay,.topbar{display:none!important}
  .main{margin:0!important;width:100%!important;padding:0!important}
  .mobile-hero{display:block;background:linear-gradient(135deg,#06365f 0%,#0b5485 100%);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 18px 18px;border-radius:0 0 24px 24px;box-shadow:0 8px 28px rgba(4,44,78,.20)}
  .mobile-brand-row{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center}.mobile-brand-row>img{width:70px;height:70px;object-fit:contain}.mobile-brand-copy{display:flex;flex-direction:column}.mobile-brand-copy b{font-size:26px;letter-spacing:.01em}.mobile-brand-copy span{font-size:11px;letter-spacing:.28em;opacity:.86}.mobile-user-mini{display:flex;flex-direction:column;align-items:center;gap:3px}.mobile-user-mini>span{width:46px;height:46px;border:2px solid rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;font-weight:800;background:rgba(255,255,255,.10)}.mobile-user-mini small{max-width:82px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-hero-tagline{margin-left:82px;margin-top:4px;font-size:14px;opacity:.92}
  .mobile-sync-bar{display:flex;margin:-1px 14px 0;padding:12px 13px;align-items:center;gap:8px;background:#e6f8ee;border:1px solid #bfe9d0;border-radius:0 0 16px 16px;color:#17663f;position:relative;z-index:5}.mobile-sync-bar .sync-cloud{font-size:18px}.mobile-sync-bar b{font-size:13px}.mobile-sync-bar .sync-queue{font-size:11px;background:#078a51;color:#fff;border-radius:999px;padding:3px 7px}.mobile-sync-bar button{margin-left:auto;border:0;background:transparent;color:#0b5ca9;font-weight:800;font-size:12px;padding:6px}
  .content{padding:14px 12px 108px!important;max-width:none!important}.page-title{gap:8px!important;margin:2px 2px 12px!important;align-items:flex-start!important}.page-title h2{font-size:25px!important;line-height:1.08}.page-title p{font-size:13px!important}.page-title>.btn{display:none!important}
  .card,.section-card,.filter-card{border-radius:17px!important;box-shadow:0 6px 18px rgba(4,48,84,.06)!important;border:1px solid #e2eaf1!important}.card-pad{padding:15px!important}.section-title{gap:8px!important}.section-title h3{font-size:19px!important}.section-title p{font-size:12.5px!important}
  .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.card.stat{padding:14px!important;min-height:112px}.card.stat .n{font-size:32px!important}.card.stat .label{font-size:13px!important}.dashboard-hero{border-radius:18px!important}.dashboard-hero .hero-inner{padding:16px!important}.dashboard-hero .hero-copy h2{font-size:24px!important}.dashboard-hero .hero-copy p{font-size:13px!important}.dashboard-hero .hero-brand{display:none!important}.workflow-strip{overflow:auto!important;display:flex!important;gap:8px!important;padding:12px!important}.workflow-mini{min-width:142px!important;border-radius:12px!important}
  .dashboard-grid{grid-template-columns:1fr!important}.quick-panel{display:none!important}.status-board-row{grid-template-columns:1fr!important;gap:8px!important;padding:14px!important;text-align:left!important}.status-board-next{font-size:13px!important}
  .form-grid,.compact-grid,.filter-grid{grid-template-columns:1fr!important}.span-4,.span-6,.span-8,.span-12{grid-column:1/-1!important}.field{margin-bottom:4px}.field label{font-size:14px!important;font-weight:750!important;color:#173e66}.field input,.field select,.field textarea,.mini-input{min-height:50px!important;border-radius:12px!important;font-size:16px!important;padding:12px 13px!important}.field textarea{min-height:94px!important}.geo-row{grid-template-columns:1fr 1fr!important}.geo-row .btn{grid-column:1/-1;min-height:48px!important}.btn{min-height:46px!important;border-radius:12px!important;font-size:15px!important}.btn.small{min-height:38px!important}.check-item{min-height:42px!important;padding:9px 8px!important;font-size:14px!important;border-radius:10px}.check-item input{width:21px!important;height:21px!important;flex:0 0 21px!important}
  .wizard-head{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:5px!important;background:#fff!important;padding:10px!important;border-radius:16px!important;position:sticky!important;top:0!important;z-index:14!important;box-shadow:0 4px 14px rgba(0,0,0,.07)!important}.wizard-step{font-size:0!important;padding:5px!important;text-align:center!important;background:transparent!important;border:none!important}.wizard-step:before{content:counter(mobstep);counter-increment:mobstep;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#e9eef4;color:#34506d;font-size:14px;font-weight:800}.wizard-head{counter-reset:mobstep}.wizard-step.active:before{background:#146ee8;color:#fff;box-shadow:0 0 0 5px #e4efff}.wizard-step.done:before{content:'✓';background:#079455;color:#fff}.wizard-step:nth-child(1):after{content:'Basic Info'}.wizard-step:nth-child(2):after{content:'Job Type'}.wizard-step:nth-child(3):after{content:'Attachments'}.wizard-step:nth-child(4):after{content:'Review'}.wizard-step:after{display:block;font-size:10px;font-weight:700;margin-top:5px;color:#58708b}.wizard-step.active:after{color:#146ee8}
  .permit-pane{padding:14px!important}.section-divider{margin:14px 0!important}.worker-row{grid-template-columns:28px 1fr!important;gap:7px!important}.worker-row input:last-child{grid-column:2!important}.job-cols{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.job-col{border:1px solid #dce6ef!important;border-radius:14px!important;overflow:hidden!important;background:#fff}.job-col h4{margin:0!important;padding:15px 14px!important;font-size:17px!important;background:#f5f8fb!important;color:#143d67!important;cursor:pointer;position:relative}.job-col h4:after{content:'⌄';position:absolute;right:14px;font-size:20px}.job-col.mobile-collapsed .job-items{display:none!important}.job-items{padding:7px!important}.job-row{border-bottom:1px solid #edf1f5!important;padding:3px 0!important}.subchoices{padding:5px 9px 10px 38px!important;display:flex!important;gap:10px!important;flex-wrap:wrap}.subchoices label{font-size:13px!important}.check-grid,.safety-verification-grid{grid-template-columns:1fr!important;gap:5px!important}.required-doc-grid{grid-template-columns:1fr!important}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.photo-card img{height:132px!important}.photo-card-body{padding:8px!important}.signatory-map{grid-template-columns:1fr!important}.review-panel .kv{grid-template-columns:1fr!important}.review-panel .kv>div:nth-child(odd){font-size:11px;color:#718397;padding-top:8px}.review-panel .kv>div:nth-child(even){font-size:14px;padding-bottom:8px;border-bottom:1px solid #edf1f5}
  .wizard-actions{position:sticky!important;bottom:82px!important;z-index:20!important;background:rgba(247,250,252,.96)!important;margin:12px -14px -14px!important;padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;border-top:1px solid #dae4ec!important;display:grid!important;grid-template-columns:1fr 1.35fr!important;gap:8px!important}.wizard-actions>div{display:contents!important}.wizard-actions .btn{width:100%!important}.wizard-actions #submitBtn{background:#f4c430!important;color:#092e59!important;border-color:#e0ae18!important;font-weight:850!important}
  .permit-desktop-table{display:none!important}.permit-mobile-list{display:flex!important;flex-direction:column!important;gap:10px!important}.permit-mobile-card{border-radius:16px!important;padding:15px!important;background:#fff!important}.permit-mobile-head b{font-size:16px!important;color:#0c3763}.permit-mobile-job{font-size:14px!important}.mobile-next-action{margin-top:9px;padding:9px;border-radius:10px;background:#fff8de;color:#6d570b;font-size:12px}
  .inbox-shell{display:block!important}.inbox-summary{display:none!important}.inbox-item{grid-template-columns:48px 1fr!important;border-radius:16px!important}.inbox-cta{grid-column:1/-1!important}.inbox-cta .btn{width:100%!important}.inbox-message{font-size:13px!important}
  .ptw-tracker{padding:14px!important}.tracker-main{grid-template-columns:1fr!important}.tracker-rail{overflow:auto!important;gap:6px!important}.tracker-step{min-width:72px!important}.tracker-step span{font-size:9px!important}.next-action-cta{width:100%!important;min-height:50px!important;background:#f4c430!important;color:#0c315a!important;border-color:#e0ae18!important}
  .pdf-doc-grid,.document-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sigpad{height:210px!important;min-height:210px!important}.modal{width:calc(100vw - 20px)!important;max-height:92vh!important;border-radius:20px 20px 0 0!important;position:fixed!important;bottom:0!important;top:auto!important}.modal-card{padding:16px!important}
  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.98);border-top:1px solid #dbe4ec;padding:7px 4px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -5px 18px rgba(0,32,64,.10)}.mobile-bottom-nav button{position:relative;border:0;background:transparent;color:#60758b;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:22px;min-height:54px}.mobile-bottom-nav button small{font-size:10px;font-weight:700}.mobile-bottom-nav button.active{color:#0a4d98}.mobile-bottom-nav .mobile-new span{width:50px;height:50px;margin-top:-25px;border-radius:50%;display:grid;place-items:center;background:#073f80;color:#fff;font-size:31px;box-shadow:0 5px 14px rgba(4,56,110,.25)}.mobile-badge{position:absolute;top:-3px;right:14px;background:#e53935;color:#fff;border-radius:999px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:800}.mobile-badge.hidden{display:none!important}
  .profile-sync-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.offline-draft-card{padding:12px;border:1px solid #dce6ef;border-radius:13px;background:#fff;margin-top:8px}.offline-draft-card b{display:block;color:#103e6c}.offline-draft-actions{display:flex;gap:7px;margin-top:8px}.offline-draft-actions .btn{flex:1}
  .auth-page{grid-template-columns:1fr!important}.auth-brand{display:none!important}.auth-panel{padding:18px 12px!important}.auth-box{max-width:none!important}.auth-box h2{font-size:25px!important}.auth-tabs button{min-height:46px}.account-org-guide{font-size:13px}
}
@media(max-width:390px){.mobile-brand-copy b{font-size:22px}.mobile-brand-row{grid-template-columns:60px 1fr auto}.mobile-brand-row>img{width:60px;height:60px}.mobile-hero-tagline{margin-left:72px}.content{padding-left:9px!important;padding-right:9px!important}.photo-grid{grid-template-columns:1fr 1fr!important}}


/* ==========================================================
   MOBILE UI V2 — APPROVED PHONE MOCKUP ALIGNMENT
   ========================================================== */

/* Absolute auth/app isolation: fixes sign-in page leaking the app below it. */
body.mode-auth,
body.mode-pending{overflow:hidden!important;height:100dvh!important}
body.mode-auth #appShell,
body.mode-auth #pendingPage,
body.mode-pending #appShell,
body.mode-pending #authPage{display:none!important}
body.mode-auth #authPage,
body.mode-pending #pendingPage{display:grid!important;position:fixed!important;inset:0!important;z-index:500!important;overflow:auto!important;overscroll-behavior:contain;background:#f6f9fc}
body.mode-app #authPage,
body.mode-app #pendingPage{display:none!important}
body.mode-app #appShell{display:grid!important}

/* Prevent hidden app controls from ever becoming visible on auth screens. */
body:not(.mode-app) .mobile-bottom-nav,
body:not(.mode-app) .mobile-hero,
body:not(.mode-app) .mobile-sync-bar{display:none!important}

.mobile-only{display:none}
.mobile-v2-screen{display:none}

@media(max-width:820px){
  :root{
    --m-navy:#0a3157;
    --m-blue:#0a5aa0;
    --m-green:#098653;
    --m-yellow:#f7c62f;
    --m-bg:#f4f8fc;
    --m-border:#dce7ef;
    --m-text:#102a43;
    --m-muted:#6b7f91;
  }
  html,body{background:var(--m-bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
  body.mode-app{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .mobile-only{display:block!important}

  /* AUTH — full-screen, no app content beneath it */
  body.mode-auth #authPage,
  body.mode-pending #pendingPage{
    display:flex!important;flex-direction:column!important;min-height:100dvh!important;
    padding:0!important;background:#f4f8fc!important
  }
  body.mode-auth .auth-brand,
  body.mode-pending .auth-brand{
    display:block!important;min-height:auto!important;padding:calc(24px + env(safe-area-inset-top)) 22px 28px!important;
    background:
      linear-gradient(90deg,rgba(4,45,78,.97),rgba(9,87,133,.92)),
      url("mobile-hero-grid.svg") center/cover no-repeat!important;
    border:0!important;border-radius:0 0 32px 32px!important;color:#fff!important
  }
  body.mode-auth .auth-brand-inner,
  body.mode-pending .auth-brand-inner{max-width:none!important;margin:0!important}
  body.mode-auth .auth-logo-wrap,
  body.mode-pending .auth-logo-wrap{width:82px;height:82px;margin:0 0 10px;background:transparent!important;border:0!important;box-shadow:none!important}
  body.mode-auth .auth-logo,
  body.mode-pending .auth-logo{width:82px!important;height:82px!important}
  body.mode-auth .auth-brand .eyebrow,
  body.mode-pending .auth-brand .eyebrow{color:#d9edf8!important;font-size:10px!important}
  body.mode-auth .auth-brand h1,
  body.mode-pending .auth-brand h1{font-size:30px!important;line-height:1.05!important;color:#fff!important;margin:4px 0 8px!important}
  body.mode-auth .auth-brand h1 span,
  body.mode-pending .auth-brand h1 span{color:#fff!important;font-size:17px!important;letter-spacing:.16em;font-weight:500}
  body.mode-auth .auth-lead,
  body.mode-pending .auth-lead{color:#edf7ff!important;font-size:15px!important;line-height:1.4!important;max-width:330px}
  body.mode-auth .auth-feature-grid,
  body.mode-auth .auth-boundary,
  body.mode-pending .auth-feature-grid,
  body.mode-pending .auth-boundary{display:none!important}
  body.mode-auth .auth-panel,
  body.mode-pending .auth-panel{padding:18px 16px calc(28px + env(safe-area-inset-bottom))!important;background:#f4f8fc!important;flex:1}
  body.mode-auth .auth-box,
  body.mode-pending .auth-box{margin:-2px auto 0!important;max-width:520px!important;border-radius:24px!important;background:#fff!important;border:1px solid #dde8ef!important;box-shadow:0 14px 40px rgba(15,55,89,.10)!important;padding:20px!important}
  .auth-box-head{align-items:center}
  .auth-box-head .auth-mini-logo{display:none!important}
  .auth-tabs{border-radius:14px!important;padding:4px!important}
  .auth-tabs button{font-size:15px!important;border-radius:11px!important}
  .auth-box .field label{font-size:14px!important;color:#16385a!important}
  .auth-box .field input,.auth-box .field select{font-size:16px!important;min-height:54px!important;border-radius:15px!important}
  .auth-box .btn-lg{min-height:56px!important;border-radius:16px!important;font-size:16px!important;background:#116e43!important}

  /* MOBILE APP SHELL */
  #appShell.shell{grid-template-columns:1fr!important;display:grid}
  .main{min-width:0;background:var(--m-bg)}
  .sidebar,.nav-overlay,.topbar{display:none!important}
  .mobile-hero{
    display:block!important;
    background:
      linear-gradient(90deg,rgba(4,45,78,.96),rgba(9,87,133,.89)),
      url("mobile-hero-grid.svg") center/cover no-repeat!important;
    padding:calc(18px + env(safe-area-inset-top)) 18px 22px!important;
    border-radius:0 0 30px 30px!important;
    box-shadow:0 8px 25px rgba(5,52,86,.18)!important
  }
  .mobile-brand-row{grid-template-columns:76px 1fr 58px!important;gap:12px!important}
  .mobile-brand-row>img{width:76px!important;height:76px!important}
  .mobile-brand-copy b{font-size:27px!important;line-height:1!important}
  .mobile-brand-copy span{font-size:11px!important;letter-spacing:.24em!important;margin-top:7px}
  .mobile-user-mini>span{width:50px!important;height:50px!important;font-size:17px!important}
  .mobile-user-mini small{font-size:12px!important;color:#fff!important}
  .mobile-hero-tagline{margin-left:88px!important;font-size:14px!important;line-height:1.35!important;max-width:250px}
  .mobile-sync-bar{
    display:flex!important;margin:-4px 16px 18px!important;position:relative;z-index:5;
    min-height:58px!important;border:1px solid #bae8ce!important;border-radius:0 0 22px 22px!important;
    background:#e9faf0!important;color:#166540!important;padding:0 16px!important;
    box-shadow:0 4px 12px rgba(18,112,70,.05)
  }
  .mobile-sync-bar .sync-cloud{font-size:20px}
  .mobile-sync-bar b{font-size:14px}
  .mobile-sync-bar button{font-size:13px!important;font-weight:800!important;color:#0a5aa0!important}
  .content{padding:0 14px 22px!important;max-width:100%!important}
  .page-title{margin:0 0 15px!important;align-items:flex-start!important}
  .page-title h2{font-size:29px!important;line-height:1.05!important;letter-spacing:-.025em!important;color:#112d43!important}
  .page-title p{font-size:14px!important;line-height:1.45!important;color:#738394!important;margin-top:6px}
  .page-title>.btn{display:none!important}

  /* Common cards */
  .card,.section-card,.filter-card{border:1px solid var(--m-border)!important;border-radius:22px!important;box-shadow:0 8px 24px rgba(21,61,94,.055)!important}
  .card-pad{padding:18px!important}
  .section-title h3{font-size:19px!important;color:#112d43!important}
  .section-title p{font-size:13px!important}
  .status{border-radius:999px!important;padding:7px 11px!important;font-size:10px!important;font-weight:900!important}
  .btn{min-height:46px!important;border-radius:14px!important;font-size:14px!important}
  .btn.primary,.btn.success{box-shadow:0 6px 12px rgba(10,83,148,.12)}
  input,select,textarea{font-size:16px!important;border-radius:14px!important;min-height:50px!important}
  textarea{min-height:104px!important}

  /* MOBILE BOTTOM NAV — target mockup */
  .mobile-bottom-nav{
    display:grid!important;grid-template-columns:repeat(5,1fr)!important;
    padding:8px 5px calc(8px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.985)!important;border-top:1px solid #dfe7ee!important;
    box-shadow:0 -8px 26px rgba(13,43,70,.08)!important
  }
  .mobile-bottom-nav button{font-size:23px!important;min-height:58px!important;color:#65788b!important}
  .mobile-bottom-nav button small{font-size:11px!important}
  .mobile-bottom-nav button.active{color:#0a4f92!important}
  .mobile-bottom-nav .mobile-new span{
    width:58px!important;height:58px!important;margin-top:-31px!important;
    background:linear-gradient(145deg,#0b5ca7,#073c78)!important;font-size:34px!important;
    box-shadow:0 9px 19px rgba(5,64,123,.28)!important
  }

  /* V2 DASHBOARD */
  .desktop-dashboard{display:none!important}
  .mobile-v2-screen{display:block}
  .m-dashboard-title{padding:4px 2px 10px}
  .m-dashboard-title h2{font-size:29px;margin:0;color:#112d43;letter-spacing:-.025em}
  .m-dashboard-title p{margin:5px 0 0;color:#748496;font-size:14px}
  .m-new-ptw{
    display:flex;width:100%;border:0;border-radius:20px;padding:17px 20px;margin-bottom:14px;
    align-items:center;gap:15px;text-align:left;color:#092b50;
    background:linear-gradient(135deg,#ffd84e,#f3bd1d);
    box-shadow:0 10px 22px rgba(211,158,10,.22)
  }
  .m-new-ptw .plus{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#073f7c;color:#fff;font-size:31px}
  .m-new-ptw b{font-size:20px}.m-new-ptw span{display:block;font-size:13px;margin-top:2px}.m-new-ptw .chev{margin-left:auto;font-size:27px}
  .m-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .m-stat{padding:15px;border:1px solid var(--m-border);border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(16,54,87,.05)}
  .m-stat .mi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:#edf4fb}
  .m-stat b{display:block;font-size:24px;color:#0e3154;margin-top:8px}.m-stat span{font-size:12px;color:#65798b}
  .m-flow-card{margin-top:12px;padding:17px;border-radius:20px;background:#fff;border:1px solid var(--m-border)}
  .m-flow-head{display:flex;justify-content:space-between;align-items:center}.m-flow-head b{font-size:16px}.m-flow-head span{font-size:11px;color:#788a9a}
  .m-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:16px}
  .m-flow-step{text-align:center;position:relative}.m-flow-step:not(:last-child):after{content:"";position:absolute;top:14px;left:62%;right:-38%;height:3px;background:#dce4ec}
  .m-flow-step i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#e8eef4;color:#143c61;font-style:normal;font-weight:800;position:relative;z-index:1}
  .m-flow-step:first-child i{background:#0b66c1;color:#fff}.m-flow-step small{display:block;font-size:10px;margin-top:5px;color:#617588}
  .m-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .m-quick button{border:1px solid var(--m-border);border-radius:17px;background:#fff;padding:15px;text-align:left;min-height:74px;color:#153c61}
  .m-quick button b{display:block;font-size:14px}.m-quick button span{font-size:11px;color:#788b9c}
  .m-recent{margin-top:14px}.m-section-head{display:flex;justify-content:space-between;align-items:center;margin:0 3px 9px}.m-section-head b{font-size:17px}.m-section-head button{border:0;background:none;color:#0b60ad;font-size:12px;font-weight:800}
  .m-permit-list{display:flex;flex-direction:column;gap:10px}
  .m-permit-card{width:100%;background:#fff;border:1px solid var(--m-border);border-radius:17px;padding:14px;text-align:left;color:#173650;box-shadow:0 5px 14px rgba(23,58,88,.04)}
  .m-permit-card-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.m-permit-card-head b{font-size:15px;color:#0b3764}.m-permit-card .job{font-size:13px;font-weight:700;margin-top:4px}.m-permit-card .meta{font-size:11px;color:#76899a;margin-top:5px}
  .m-waiting{margin-top:9px;border-top:1px solid #edf1f4;padding-top:8px;font-size:11px;color:#657789}.m-waiting strong{color:#173b59}

  /* Permit Register matching approved mockup */
  .filter-card{padding:16px!important}
  .filter-grid{grid-template-columns:1fr!important;gap:10px!important}
  .permit-desktop-table{display:none!important}
  .permit-mobile-list{display:flex!important;flex-direction:column;gap:11px}
  .permit-mobile-card{
    border-radius:19px!important;padding:16px!important;background:#fff!important;border:1px solid var(--m-border)!important;
    box-shadow:0 6px 16px rgba(19,52,82,.05)!important
  }
  .permit-mobile-head b{font-size:16px!important;color:#0a3766}
  .permit-mobile-job{font-size:14px!important;font-weight:700!important}
  .mobile-next-action{border-radius:12px!important;background:#fff8df!important;padding:9px 10px!important;margin-top:10px!important;font-size:12px!important}
  .permit-mobile-meta{font-size:11px!important}

  /* Inbox matching action center mockup */
  .inbox-shell{grid-template-columns:1fr!important}
  .inbox-summary{display:none!important}
  .inbox-item{
    grid-template-columns:48px 1fr!important;padding:14px!important;border-radius:18px!important;gap:12px!important
  }
  .inbox-icon{width:46px!important;height:46px!important;border-radius:14px!important;font-size:21px!important}
  .inbox-title-row b{font-size:15px!important}
  .inbox-message{font-size:12px!important}
  .inbox-cta{grid-column:1/-1!important}
  .inbox-cta .btn{width:100%!important;background:linear-gradient(135deg,#0b62b5,#084b91)!important}

  /* New PTW 4-step field worker form */
  .wizard-head{
    position:sticky!important;top:0!important;z-index:20!important;
    display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:4px!important;
    margin:0 0 12px!important;padding:10px 5px!important;background:rgba(244,248,252,.96)!important;
    backdrop-filter:blur(8px)
  }
  .wizard-step{font-size:10px!important;border:0!important;background:transparent!important;padding:8px 3px!important;text-align:center!important;color:#738597!important}
  .wizard-step.active{color:#0a59a4!important;font-weight:900!important}
  .permit-pane{padding:15px!important}
  .form-grid{grid-template-columns:1fr!important;gap:12px!important}
  .form-grid>[class*="span-"]{grid-column:1/-1!important}
  .worker-row{grid-template-columns:24px 1fr!important;gap:7px!important}
  .worker-row input:last-child{grid-column:2!important}
  .job-cols{display:block!important}
  .job-col{border:1px solid var(--m-border)!important;border-radius:17px!important;margin-bottom:10px!important;overflow:hidden!important}
  .job-col h4{font-size:15px!important;padding:15px!important;margin:0!important;background:#fff!important;cursor:pointer}
  .job-col h4:after{content:"⌄";float:right;color:#60798e;font-size:18px}
  .job-col.mobile-collapsed .job-items{display:none!important}
  .job-col:not(.mobile-collapsed) h4{background:#ecfaf3!important;color:#087b4d!important}
  .job-col:not(.mobile-collapsed) h4:after{content:"⌃"}
  .job-items{padding:6px 10px 12px!important}
  .job-row{padding:8px 0!important;border-bottom:1px solid #edf2f5!important}
  .check-item{font-size:14px!important;min-height:38px!important}
  .check-item input[type="checkbox"],.check-item input[type="radio"]{width:21px!important;height:21px!important;min-height:21px!important}
  .check-grid{grid-template-columns:1fr!important}
  .wizard-actions{position:sticky!important;bottom:calc(73px + env(safe-area-inset-bottom))!important;z-index:18!important;background:rgba(244,248,252,.97)!important;padding:10px 0!important;margin-top:10px!important}
  .wizard-actions .btn.primary{background:linear-gradient(135deg,#ffd348,#efb813)!important;color:#0d3159!important;border:0!important;font-weight:900!important}
  .photo-card{border-radius:16px!important}
  .photo-card img{height:145px!important}
  .offline-save-panel{border-radius:17px!important}

  /* Permit detail matching approved mockup */
  .permit-header{display:block!important}
  .permit-header h2{font-size:24px!important}
  .permit-primary-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:12px}
  .permit-primary-actions .btn{width:100%!important}
  .ptw-tracker{border-radius:20px!important}
  .tracker-main{grid-template-columns:1fr!important}
  .tracker-main>div{padding:12px!important}
  .tracker-rail{overflow-x:auto!important;gap:18px!important;padding-bottom:5px}
  .tracker-step{min-width:72px}
  .doc-downloads,.document-download-bar{grid-template-columns:repeat(2,1fr)!important}
  .tabs{display:flex!important;overflow-x:auto!important;gap:5px!important;padding-bottom:5px!important}
  .tab{min-width:max-content!important;font-size:11px!important;border-radius:12px!important;padding:10px 12px!important}

  /* Profile */
  .profile-sync-grid{grid-template-columns:1fr 1fr!important}
  .kv{font-size:13px!important}.kv>div{padding:11px 10px!important}

  /* Hide desktop duplicate cards where v2 mobile screens are rendered */
  .m-hide-on-v2{display:none!important}
}

@media(max-width:390px){
  .mobile-brand-row{grid-template-columns:66px 1fr 52px!important}
  .mobile-brand-row>img{width:66px!important;height:66px!important}
  .mobile-brand-copy b{font-size:23px!important}
  .mobile-hero-tagline{margin-left:78px!important}
  .m-stat-grid{grid-template-columns:1fr 1fr}
}


/* ===== Role Matrix / Permission Fix / Desktop & Mobile Header ===== */
.role-matrix-select{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:8px}
.role-choice{display:flex;gap:10px;align-items:center;border:1px solid #dbe7e1;border-radius:14px;padding:11px;background:#fff;cursor:pointer}
.role-choice input{width:20px;height:20px;flex:0 0 auto}
.role-choice-icon{width:34px;height:34px;border-radius:10px;background:#edf7f2;display:grid;place-items:center}
.role-choice span:last-child{display:flex;flex-direction:column;line-height:1.2}.role-choice b{font-size:13px}.role-choice small{font-size:10px;color:#728379;margin-top:3px}
.role-chip-wrap{display:flex;gap:5px;flex-wrap:wrap}.role-chip{display:inline-flex;padding:4px 7px;border-radius:999px;background:#edf7f2;color:#176c47;border:1px solid #cee7d8;font-size:10px;font-weight:800}
.role-matrix-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.role-matrix-preview>div{border:1px solid #dbe7e1;border-radius:11px;padding:9px;background:#f8fcfa}.role-matrix-preview b,.role-matrix-preview span,.role-matrix-preview em{display:block}.role-matrix-preview b{font-size:11px}.role-matrix-preview span{font-size:12px;margin-top:4px}.role-matrix-preview em{font-size:9px;color:#177147;margin-top:5px;font-style:normal;font-weight:800}.role-matrix-preview .not-required{opacity:.55;background:#f6f7f8}.role-matrix-preview .not-required em{color:#71808a}
.profile-signout-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.profile-signout-card .btn{min-width:130px}

/* The mobile hero is a phone-only Dashboard element. It is never rendered
   as a giant laptop banner and is hidden on Inbox, Permits, Profile, etc. */
@media(min-width:821px){
  .mobile-hero,.mobile-sync-bar,.mobile-bottom-nav{display:none!important}
  .main{padding-top:0!important}
}
@media(max-width:820px){
  body.mode-app .mobile-hero,body.mode-app .mobile-sync-bar{display:none!important}
  body.mode-app.view-dashboard .mobile-hero{display:block!important}
  body.mode-app.view-dashboard .mobile-sync-bar{display:flex!important}
  body.mode-app.view-inner .content{padding-top:14px!important}
  .role-matrix-select{grid-template-columns:1fr}
  .role-matrix-preview{grid-template-columns:1fr 1fr}
  .profile-signout-card{margin-bottom:12px}
}
@media(max-width:430px){.role-matrix-preview{grid-template-columns:1fr}}


/* =========================================================
   MOBILE UI FINE-TUNE V29
   ========================================================= */
@media(max-width:820px){
  body.mode-app.view-inner .content{padding-top:calc(18px + env(safe-area-inset-top))!important}
  html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}

  /* Modern colored vector navigation */
  .mobile-bottom-nav button{gap:3px!important}
  .mobile-bottom-nav .nav-svg{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:#fff;box-shadow:0 7px 16px rgba(20,56,103,.22),inset 0 2px 3px rgba(255,255,255,.42);transition:.18s ease}
  .mobile-bottom-nav .nav-svg svg{width:20px;height:20px;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))}
  .mobile-bottom-nav .nav-svg svg .line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mobile-bottom-nav .nav-svg svg .thick{stroke-width:2.3}
  .mobile-bottom-nav .nav-home{background:linear-gradient(145deg,#79b9ff,#2666d8)}
  .mobile-bottom-nav .nav-inbox{background:linear-gradient(145deg,#78ddff,#2496d1)}
  .mobile-bottom-nav .nav-permits{background:linear-gradient(145deg,#86b9ff,#506fd8)}
  .mobile-bottom-nav .nav-profile{background:linear-gradient(145deg,#b38dff,#7751d7)}
  .mobile-bottom-nav .nav-new{width:58px!important;height:58px!important;margin-top:-31px!important;border-radius:19px!important;background:linear-gradient(145deg,#ffd95c,#e2a70a)!important;color:#0a4f91!important;box-shadow:0 11px 24px rgba(180,129,0,.30),inset 0 2px 4px rgba(255,255,255,.7)!important}
  .mobile-bottom-nav .nav-new svg{width:28px;height:28px;fill:none!important;stroke:currentColor!important}.mobile-bottom-nav .nav-new svg .line{stroke:currentColor!important}
  .mobile-bottom-nav button.active .nav-svg{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 20px rgba(15,64,129,.28),inset 0 2px 4px rgba(255,255,255,.48)}

  /* Dashboard icon tiles */
  .m3d-v29{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:#fff;box-shadow:0 9px 20px rgba(15,60,112,.20),inset 0 2px 4px rgba(255,255,255,.45);flex:0 0 auto}
  .m3d-v29 svg{width:27px;height:27px;fill:currentColor}.m3d-v29 svg .line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.m3d-v29 svg .thick{stroke-width:2.4}
  .m3d-v29.tone-amber{background:linear-gradient(145deg,#ffd85c,#e6a719)}
  .m3d-v29.tone-cyan{background:linear-gradient(145deg,#6edcff,#199bd3)}
  .m3d-v29.tone-green{background:linear-gradient(145deg,#77e49d,#24aa5c)}
  .m3d-v29.tone-violet{background:linear-gradient(145deg,#a897ff,#6f58d9)}
  .m3d-v29.tone-blue{background:linear-gradient(145deg,#79baff,#2c71d9)}
  .m3d-v29.tone-gold{background:linear-gradient(145deg,#ffe36f,#e4a80f);color:#114c82}
  .m-stat-v29{position:relative;overflow:hidden;padding:16px!important;border-radius:22px!important;background:linear-gradient(180deg,#fff,#f8fbff)!important;box-shadow:0 10px 24px rgba(16,58,98,.07)!important}
  .m-stat-v29:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-45px;top:-50px;background:rgba(255,255,255,.75)}
  .m-stat-v29 .m3d-v29{position:relative;z-index:1}.m-stat-v29 b{font-size:27px!important;margin-top:10px!important}.m-stat-v29>span:last-child{font-size:12px!important;color:#65798b}
  .m-new-ptw-v29{gap:14px!important}.m-new-ptw-v29 .m3d-v29{width:52px;height:52px}.m-new-ptw-v29>.chev{margin-left:auto!important}
  .m-quick-grid-v29{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .m-quick-v29{border:1px solid var(--m-border);border-radius:19px;background:#fff;padding:14px 12px;min-height:92px;color:#153c61;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;box-shadow:0 9px 20px rgba(16,58,98,.055)}
  .m-quick-v29 .m3d-v29{width:42px;height:42px;border-radius:14px}.m-quick-v29 .m3d-v29 svg{width:23px;height:23px}.m-quick-v29 div{display:flex;flex-direction:column;gap:3px}.m-quick-v29 b{font-size:13px}.m-quick-v29 div span{font-size:10px;color:#75889a}.m-quick-v29 em{font-size:23px;color:#8aa0b3;font-style:normal}

  /* Profile page */
  .mobile-profile-root .page-title{margin-bottom:10px!important}
  .mobile-profile-hero-v29{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:16px;margin:0 0 12px;border-radius:22px;background:linear-gradient(145deg,#0c4d82,#1674a5);color:#fff;box-shadow:0 12px 26px rgba(9,70,114,.18)}
  .profile-avatar-v29{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#f5fbff,#cbe8ff);color:#0a4e86;font-size:22px;font-weight:900;box-shadow:inset 0 2px 4px #fff,0 6px 15px rgba(0,0,0,.15)}
  .mobile-profile-hero-v29 span{display:block;font-size:9px;letter-spacing:.14em;opacity:.8}.mobile-profile-hero-v29 b{display:block;font-size:18px;margin:3px 0}.mobile-profile-hero-v29 small{font-size:11px;line-height:1.35;opacity:.9}.mobile-profile-hero-v29 i{align-self:start;padding:6px 9px;border-radius:999px;font-size:9px;font-style:normal;font-weight:800;background:rgba(255,255,255,.15)}.mobile-profile-hero-v29 i.online{background:#daf7e6;color:#0d7042}.mobile-profile-hero-v29 i.offline{background:#fff0cf;color:#855a00}
  .mobile-profile-root .card{border-radius:21px!important;box-shadow:0 10px 23px rgba(14,55,92,.06)!important}.mobile-profile-root .profile-signout-card{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px!important}

  /* Bulk multi-selection controls */
  .bulk-select-v29{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0 8px;padding:7px 8px;border:1px solid #d9e7ef;border-radius:12px;background:#f7fbfe}
  .bulk-select-v29>span{font-size:10px;color:#61778a;font-weight:800}.bulk-select-v29>div{display:flex;gap:5px}.bulk-select-v29 button{min-height:32px!important;padding:5px 9px!important;border-radius:9px;border:1px solid #bfd8e8;background:#fff;color:#155b8e;font-size:10px!important;font-weight:900}.bulk-select-v29 .bulk-all-v29{background:#e4f4ff;border-color:#acd7ef}.bulk-select-v29 .bulk-clear-v29{color:#6e7e89}

  /* Proportional, readable mobile pop-up / bottom sheet */
  .modal-backdrop{padding:max(8px,env(safe-area-inset-top)) 8px max(0px,env(safe-area-inset-bottom))!important;align-items:end!important;overflow:hidden!important;box-sizing:border-box!important}
  .modal{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;max-height:calc(100dvh - max(12px,env(safe-area-inset-top)))!important;margin:0!important;padding:18px 16px calc(20px + env(safe-area-inset-bottom))!important;border-radius:24px 24px 0 0!important;box-sizing:border-box!important;overflow-y:auto!important;overflow-x:hidden!important;font-size:16px!important;line-height:1.42!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important}
  .modal h3{font-size:21px!important;line-height:1.2!important;margin-bottom:8px!important}.modal h4{font-size:16px!important}.modal p,.modal .muted,.modal .small{font-size:13px!important;line-height:1.45!important}.modal input,.modal select,.modal textarea{font-size:16px!important;max-width:100%!important;box-sizing:border-box!important}.modal .form-grid,.modal .check-grid{grid-template-columns:1fr!important}.modal .kv{grid-template-columns:minmax(105px,38%) minmax(0,62%)!important;width:100%!important}.modal .kv>div{overflow-wrap:anywhere!important}.modal .table-wrap,.modal table{max-width:100%!important}.modal .table-wrap{overflow-x:auto!important}.modal table{min-width:560px!important}.modal .sigpad{width:100%!important;height:185px!important;min-height:185px!important;box-sizing:border-box!important}.modal .btn{font-size:14px!important;min-height:46px!important}.modal>div[style*="justify-content:flex-end"]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.modal>div[style*="justify-content:flex-end"] .btn:last-child{grid-column:auto}.modal .section-title{display:block!important}
}
@media(max-width:390px){.m-quick-grid-v29{grid-template-columns:1fr}.mobile-profile-hero-v29{grid-template-columns:58px 1fr}.mobile-profile-hero-v29>i{grid-column:2;justify-self:start}.profile-avatar-v29{width:58px;height:58px}.modal{padding-left:13px!important;padding-right:13px!important}}

@media(max-width:820px){.mobile-bottom-nav .mobile-new .nav-new{width:58px!important;height:58px!important;margin-top:-31px!important;border-radius:19px!important;background:linear-gradient(145deg,#ffd95c,#e2a70a)!important;color:#0a4f91!important;box-shadow:0 11px 24px rgba(180,129,0,.30),inset 0 2px 4px rgba(255,255,255,.7)!important;font-size:0!important}.mobile-bottom-nav .mobile-new .nav-new svg{width:28px!important;height:28px!important}}

/* =========================================================
   MOBILE UI REALISTIC ICON + SPACE OPTIMIZATION — V30
   ========================================================= */
@media(max-width:820px){
  body.mode-app.view-dashboard .main{padding-bottom:92px!important}
  body.mode-app.view-dashboard .content{padding:10px 12px 86px!important}
  body.mode-app.view-inner .content{padding:12px 12px 86px!important}

  /* slimmer hero and sync blocks to maximize screen */
  .mobile-hero{padding:10px 16px 14px!important;border-radius:0 0 34px 34px!important;min-height:auto!important}
  .mobile-brand-row{gap:12px!important;align-items:center!important}
  .mobile-brand-row img{width:62px!important;height:62px!important}
  .mobile-brand-copy b{font-size:21px!important;letter-spacing:.01em!important}
  .mobile-brand-copy span{font-size:9px!important;letter-spacing:.22em!important}
  .mobile-hero-tagline{margin-top:8px!important;font-size:11px!important;line-height:1.35!important;max-width:88%!important}
  .mobile-user-mini span{width:52px!important;height:52px!important;font-size:20px!important}
  .mobile-sync-bar{margin-top:-6px!important;padding:11px 16px!important;border-radius:0 0 28px 28px!important;min-height:auto!important}
  .mobile-sync-bar b,.mobile-sync-bar button{font-size:11px!important}
  .mobile-sync-bar .sync-queue{display:none!important}

  /* bottom nav more compact, more realistic */
  .mobile-bottom-nav{padding:6px 6px calc(7px + env(safe-area-inset-bottom))!important;box-shadow:0 -7px 20px rgba(8,34,66,.11)!important}
  .mobile-bottom-nav button{min-height:48px!important;gap:1px!important}
  .mobile-bottom-nav button small{font-size:9px!important;letter-spacing:.01em!important}
  .mobile-bottom-nav .mobile-new .nav-svg{margin-top:-20px!important}
  .mobile-bottom-nav .nav-svg-v30{background:none!important;box-shadow:none!important;width:auto!important;height:auto!important;border-radius:0!important;display:block!important}
  .mobile-bottom-nav .nav-svg-v30>.m3d-v30{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;box-shadow:0 10px 22px rgba(16,61,110,.16), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 8px rgba(0,0,0,.08)}
  .mobile-bottom-nav .mobile-new .nav-svg-v30>.m3d-v30{width:52px;height:52px;border-radius:18px;box-shadow:0 12px 26px rgba(186,135,8,.28), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 10px rgba(136,96,0,.14)}
  .mobile-bottom-nav button.active .nav-svg-v30>.m3d-v30{transform:translateY(-2px) scale(1.03)}

  /* realistic icon shell */
  .m3d-v30{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(180deg,#fffefc,#eef5ff);box-shadow:0 10px 22px rgba(15,60,110,.18), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -5px 14px rgba(0,0,0,.05);overflow:hidden}
  .m3d-v30:before{content:"";position:absolute;inset:1px auto auto 1px;width:70%;height:42%;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0));pointer-events:none}
  .m3d-v30.tone-amber{background:linear-gradient(180deg,#ffe37b,#efc42d)}
  .m3d-v30.tone-cyan{background:linear-gradient(180deg,#89e3ff,#46baf2)}
  .m3d-v30.tone-green{background:linear-gradient(180deg,#8beab0,#4dce7a)}
  .m3d-v30.tone-violet{background:linear-gradient(180deg,#b9a8ff,#8c73f2)}
  .m3d-v30.tone-blue{background:linear-gradient(180deg,#98c1ff,#5f88ec)}
  .m3d-v30.tone-gold{background:linear-gradient(180deg,#ffe786,#f2c840)}
  .m3d-v30 svg{width:31px;height:31px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.12));position:relative;z-index:1}
  .m3d-v30 .i-line{fill:none;stroke:#6b7c90;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .m3d-v30 .i-check{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
  .m3d-v30 .i-plus{fill:none;stroke:#1d4c84;stroke-width:5;stroke-linecap:round}
  .m3d-v30 .i-shadow{fill:#c9921f}.m3d-v30 .i-gold1{fill:#f3cf4d}.m3d-v30 .i-gold2{fill:#ffd970}
  .m3d-v30 .i-blue1{fill:#52bdf0}.m3d-v30 .i-blue2{fill:#2f8fd1}.m3d-v30 .i-paper{fill:#fffdf8}
  .m3d-v30 .i-green1{fill:#22c069}.m3d-v30 .i-green2{fill:#32d27a}
  .m3d-v30 .i-violet1{fill:#8168eb}.m3d-v30 .i-metal{fill:#72849a}.m3d-v30 .i-center{fill:#e8eef5}
  .m3d-v30 .i-clip{fill:#5d83df}.m3d-v30 .i-sun{fill:#ffd655}
  .m3d-v30 .i-home-roof{fill:#2d68d4}.m3d-v30 .i-home-body{fill:#fffefb}
  .m3d-v30 .i-skin{fill:#ffe1c8}.m3d-v30 .i-shirt{fill:#ffffff}.m3d-v30 .i-hair{fill:#4f6076}

  /* dashboard spacing */
  .m-dashboard-title-v30{margin:4px 2px 10px!important}
  .m-dashboard-title-v30 h2{font-size:28px!important;line-height:1.02!important;margin-bottom:6px!important}
  .m-dashboard-title-v30 p{font-size:11px!important;line-height:1.35!important;color:#6b7f92!important}
  .m-new-ptw-v30{padding:14px 16px!important;border-radius:24px!important;gap:12px!important;box-shadow:0 12px 26px rgba(183,139,13,.16)!important}
  .m-new-ptw-v30 .m3d-v30{width:50px;height:50px;border-radius:16px}
  .m-new-ptw-v30 b{font-size:16px!important}.m-new-ptw-v30 span span{font-size:12px!important;line-height:1.25!important}
  .m-stat-grid-v30{gap:10px!important;margin-top:10px!important}
  .m-stat-v30{padding:12px!important;border-radius:20px!important;min-height:128px!important;background:linear-gradient(180deg,#ffffff,#fbfdff)!important;box-shadow:0 8px 18px rgba(16,58,98,.06)!important}
  .m-stat-v30:after{display:none!important}
  .m-stat-v30 .m3d-v30{width:44px;height:44px;border-radius:15px}
  .m-stat-v30 b{font-size:25px!important;margin-top:8px!important;line-height:1!important}
  .m-stat-v30>span:last-child{font-size:10px!important;line-height:1.2!important}
  .m-flow-card-v30{padding:14px!important;margin-top:10px!important;border-radius:22px!important}
  .m-flow-card-v30 .m-flow-head{margin-bottom:10px!important}.m-flow-card-v30 .m-flow-head b{font-size:15px!important}.m-flow-card-v30 .m-flow-head span{font-size:10px!important}
  .m-flow-card-v30 .m-flow-step i{width:33px!important;height:33px!important;font-size:15px!important}.m-flow-card-v30 .m-flow-step small{font-size:10px!important}
  .m-quick-grid-v30{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px!important}
  .m-quick-v30{border:1px solid var(--m-border);border-radius:18px;background:#fff;padding:12px 11px;min-height:84px;color:#153c61;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;text-align:left;box-shadow:0 8px 18px rgba(16,58,98,.05)}
  .m-quick-v30 .m3d-v30{width:40px;height:40px;border-radius:14px}.m-quick-v30 .m3d-v30 svg{width:25px;height:25px}
  .m-quick-v30 div{display:flex;flex-direction:column;gap:2px}.m-quick-v30 b{font-size:12px;line-height:1.15}.m-quick-v30 div span{font-size:10px;line-height:1.15;color:#75889a}.m-quick-v30 em{font-size:21px;color:#8aa0b3;font-style:normal}
  .m-recent-v30{margin-top:12px!important}.m-recent-v30 .m-section-head{margin-bottom:8px!important}.m-recent-v30 .m-section-head b{font-size:15px!important}.m-recent-v30 .m-section-head button{font-size:11px!important}

  /* signature map / labels readability */
  .signatory-map .signatory-block span{font-size:10px!important;letter-spacing:.08em!important}
  .signatory-map .signatory-block b{font-size:14px!important;line-height:1.22!important}
  .signatory-map .signatory-block small{font-size:11px!important;line-height:1.35!important}
}
@media(max-width:390px){
  .mobile-brand-copy b{font-size:19px!important}
  .m-dashboard-title-v30 h2{font-size:25px!important}
  .m-quick-grid-v30{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .m-quick-v30{padding:11px 9px!important;min-height:80px!important}
  .m-quick-v30 b{font-size:11px!important}
  .m-stat-v30{min-height:122px!important}
}

/* =========================================================
   MOBILE UI REFERENCE STYLE — V31
   Closer to the shared mobile reference: app-like icons,
   denser spacing, structured sections, and polished cards.
   ========================================================= */
@media(max-width:820px){
  body.mode-app.view-dashboard .content{padding:8px 10px 92px!important}
  body.mode-app.view-dashboard .main{padding-bottom:94px!important}
  body.mode-app .mobile-hero{display:block!important;position:relative;padding:calc(10px + env(safe-area-inset-top)) 14px 14px!important;border-radius:0 0 24px 24px!important;overflow:hidden;background:
    linear-gradient(90deg,rgba(4,32,73,.96) 0%,rgba(9,81,140,.92) 58%,rgba(12,95,156,.84) 100%),
    url("mobile-hero-grid.svg") center/cover no-repeat!important;box-shadow:0 10px 24px rgba(5,39,78,.18)!important}
  body.mode-app .mobile-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 35%,rgba(255,255,255,.16),transparent 25%),linear-gradient(90deg,transparent 52%,rgba(255,255,255,.08) 53%,transparent 54%);pointer-events:none}
  .mobile-brand-row{grid-template-columns:64px 1fr auto!important;gap:10px!important;align-items:center!important;position:relative;z-index:1}
  .mobile-brand-row>img{width:60px!important;height:60px!important}
  .mobile-brand-copy b{font-size:20px!important;font-weight:800!important;letter-spacing:.01em!important}
  .mobile-brand-copy span{font-size:8.5px!important;letter-spacing:.22em!important}
  .mobile-hero-tagline{margin-left:74px!important;margin-top:6px!important;font-size:12px!important;line-height:1.25!important;max-width:210px!important;position:relative;z-index:1}
  .mobile-user-mini{position:relative;z-index:1}.mobile-user-mini>span{width:48px!important;height:48px!important;font-size:17px!important;background:rgba(255,255,255,.9)!important;color:#234a82!important;border:3px solid rgba(255,255,255,.6)!important;box-shadow:0 8px 16px rgba(0,0,0,.12)}
  .mobile-user-mini small{font-size:10px!important;max-width:74px!important}

  .mobile-sync-bar{display:flex!important;align-items:center;gap:10px;background:#edf9ef!important;border:1px solid #cfe7d5!important;border-top:none!important;padding:11px 14px!important;margin-top:-2px!important;border-radius:0 0 20px 20px!important;box-shadow:0 8px 18px rgba(26,88,41,.06)!important}
  .mobile-sync-bar .sync-cloud{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(180deg,#33c15a,#199244);color:#fff!important;font-size:18px!important;box-shadow:0 8px 14px rgba(28,136,63,.16)}
  .mobile-sync-bar b{font-size:12px!important;color:#224b27!important}
  .mobile-sync-bar button{margin-left:auto;background:#fff!important;border:1px solid #d9e7f3!important;border-radius:15px!important;min-height:42px!important;padding:0 16px!important;font-size:11px!important;font-weight:800!important;color:#1f67d2!important;box-shadow:0 6px 14px rgba(31,103,210,.08)}
  .mobile-sync-bar .sync-queue{display:none!important}

  .mobile-v31-dashboard{display:flex;flex-direction:column;gap:10px}
  .v31-cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px;border:none;border-radius:22px;background:linear-gradient(180deg,#ffd944,#f4c62a);color:#153c61;box-shadow:0 12px 24px rgba(196,154,26,.18);text-align:left}
  .v31-cta .v31-icon{width:54px;height:54px;border-radius:18px;background:linear-gradient(180deg,#0b4aa2,#083c84)!important}.v31-cta .v31-icon svg{width:32px;height:32px}.v31-cta b{display:block;font-size:17px;line-height:1.05;margin-bottom:3px}.v31-cta div span{font-size:11px;color:#17365b}.v31-cta em{font-style:normal;font-size:28px;color:#153c61}

  .v31-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .v31-stat-card{border:1px solid #e6ecf3;border-radius:18px;background:linear-gradient(180deg,#ffffff,#fafcff);padding:10px 8px 10px;display:flex;flex-direction:column;align-items:flex-start;min-height:120px;box-shadow:0 8px 18px rgba(17,56,96,.06);text-align:left}
  .v31-stat-card .v31-icon{width:42px;height:42px;border-radius:14px;margin-bottom:10px}.v31-stat-card .v31-icon svg{width:26px;height:26px}
  .v31-stat-card b{font-size:24px;line-height:1;color:#103a6a;margin-bottom:5px}.v31-stat-card>span{font-size:9.8px;line-height:1.18;color:#506377}.v31-stat-card small{font-size:9px;line-height:1.1;color:#7f90a1;margin-top:2px}

  .v31-workflow-card,.v31-quick-section,.v31-recent-section{background:#fff;border:1px solid #e8edf4;border-radius:20px;box-shadow:0 8px 18px rgba(17,56,96,.05);padding:14px}
  .v31-workflow-card .head,.v31-quick-section .head,.v31-recent-section .head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
  .v31-workflow-card .head b,.v31-quick-section .head b,.v31-recent-section .head b{font-size:14px;color:#15263b}
  .v31-workflow-card .head span,.v31-quick-section .head span{font-size:10px;color:#7c8c9b}
  .v31-recent-section .head button{background:none;border:none;color:#2365cf;font-size:11px;font-weight:700;padding:0}

  .v31-workflow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:relative}
  .v31-workflow-steps:before{content:"";position:absolute;left:9%;right:9%;top:18px;height:3px;background:#d8e2f0;z-index:0}
  .v31-workflow-steps .step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
  .v31-workflow-steps .step i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#edf2fb;color:#24436e;font-style:normal;font-weight:800;font-size:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
  .v31-workflow-steps .step.active i{background:linear-gradient(180deg,#2f80ff,#205fca);color:#fff;box-shadow:0 6px 12px rgba(32,95,202,.2)}
  .v31-workflow-steps .step b{font-size:10.5px;color:#23426d}.v31-workflow-steps .step small{font-size:8.3px;line-height:1.15;color:#6f8095}

  .v31-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .v31-quick-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:none;border-radius:16px;padding:13px 12px;text-align:left;min-height:78px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
  .v31-quick-card.tone-green{background:#e8f9ee}.v31-quick-card.tone-amber{background:#fff7df}.v31-quick-card.tone-blue{background:#edf5ff}.v31-quick-card.tone-violet{background:#f2ecff}
  .v31-quick-card .v31-icon{width:42px;height:42px;border-radius:14px}.v31-quick-card .v31-icon svg{width:26px;height:26px}
  .v31-quick-card div{display:flex;flex-direction:column}.v31-quick-card b{font-size:13px;line-height:1.12;color:#173967}.v31-quick-card span{font-size:10px;line-height:1.2;color:#6e8094}.v31-quick-card em{font-style:normal;font-size:23px;color:#6b7f92}

  .v31-recent-section .list{display:flex;flex-direction:column;gap:10px}
  .v31-recent-card{border:1px solid #e6ebf3;border-radius:16px;background:#fff;padding:11px 12px;text-align:left;box-shadow:0 6px 14px rgba(17,56,96,.04)}
  .v31-recent-card .top{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;margin-bottom:8px}.v31-recent-card .top b{display:block;font-size:13px;color:#153b68;line-height:1.15}.v31-recent-card .top div span{display:block;font-size:10.5px;line-height:1.25;color:#5d6f83;margin-top:3px}
  .v31-recent-card .meta-row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:10px;color:#617587;margin-bottom:8px}
  .v31-recent-card .bottom{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;font-size:10px;color:#64788b}.v31-recent-card .bottom em{font-style:normal;font-size:24px;color:#88a0b6;line-height:1}
  .v31-recent-card .status{font-size:10px;padding:5px 10px;border-radius:999px;font-weight:800}

  /* polished app-icon style */
  .v31-icon{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(180deg,#fefefe,#eaf2fb);box-shadow:0 10px 20px rgba(16,61,110,.12), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -4px 8px rgba(8,36,68,.06);overflow:hidden;flex:0 0 auto}
  .v31-icon:before{content:"";position:absolute;inset:2px auto auto 2px;width:72%;height:42%;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));pointer-events:none}
  .v31-icon svg{width:28px;height:28px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}
  .v31-icon.tone-blue{background:linear-gradient(180deg,#ddecff,#c7e0ff)}
  .v31-icon.tone-green{background:linear-gradient(180deg,#daf6df,#c5efcd)}
  .v31-icon.tone-violet{background:linear-gradient(180deg,#eadfff,#d8c7ff)}
  .v31-icon.tone-amber{background:linear-gradient(180deg,#fff0c8,#f8e4ab)}
  .v31-icon.tone-slate{background:linear-gradient(180deg,#eef2f8,#dde4ee)}
  .v31-icon .i-line,.v31-icon .i-list-line,.v31-icon .i-clip-line{fill:none;stroke:#355f97;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .v31-icon .i-page,.v31-icon .i-mail{fill:#ffffff}.v31-icon .i-fold{fill:#d4e5ff}.v31-icon .i-tray{fill:#7b5604}
  .v31-icon .i-check{fill:none;stroke:#fef7db;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
  .v31-icon .i-check-bg{fill:#2cb25d}.v31-icon .i-check-stroke{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
  .v31-icon .i-gear{fill:#2369d1}.v31-icon .i-gear-hole{fill:#eef6ff}
  .v31-icon .i-blue-disc{fill:#0b57c1}.v31-icon .i-plus-white{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
  .v31-icon .i-list{fill:#f8fbff}.v31-icon .i-list-dot{fill:#2165cb}
  .v31-icon .i-shield{fill:#7f5cf0}.v31-icon .i-shield-core{fill:#6b47e0}.v31-icon .i-shield-line{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round}
  .v31-icon .i-clip-board{fill:#5a85e8}.v31-icon .i-clip-top{fill:#3159bf}
  .v31-icon .i-house{fill:#2365cf}.v31-icon .i-door{fill:#fefefe}
  .v31-icon .i-user-head{fill:#6a86b5}.v31-icon .i-user-body{fill:none;stroke:#6a86b5;stroke-width:5;stroke-linecap:round}

  .mobile-bottom-nav-v31{padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.96)!important;border-top:1px solid #e6ebf2!important;box-shadow:0 -10px 22px rgba(16,61,110,.08)!important}
  .mobile-bottom-nav-v31 button{gap:2px!important;min-height:50px!important;position:relative}.mobile-bottom-nav-v31 button small{font-size:10px!important;font-weight:700!important;color:#63778c!important}
  .mobile-bottom-nav-v31 .nav-svg-v31{background:none!important;box-shadow:none!important;width:auto!important;height:auto!important;border-radius:0!important}
  .mobile-bottom-nav-v31 .nav-svg-v31 .v31-icon{width:40px;height:40px;border-radius:14px;box-shadow:0 8px 16px rgba(16,61,110,.12), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -4px 8px rgba(8,36,68,.05)}
  .mobile-bottom-nav-v31 .mobile-new .nav-svg-v31 .v31-icon{width:52px;height:52px;border-radius:18px;background:linear-gradient(180deg,#0b57c1,#09479f)!important}.mobile-bottom-nav-v31 .mobile-new .nav-svg-v31 .v31-icon svg{width:32px;height:32px}
  .mobile-bottom-nav-v31 button.active small{color:#1456bc!important}.mobile-bottom-nav-v31 button.active:after{content:"";position:absolute;left:28%;right:28%;bottom:2px;height:4px;border-radius:999px;background:#2365cf}
  .mobile-bottom-nav-v31 .mobile-badge{top:2px!important;right:14px!important;background:#ff4d4f!important;border:2px solid #fff!important;min-width:20px!important;height:20px!important;line-height:16px!important;font-size:10px!important}

  /* compact page sections in permit details/forms */
  .permit-pane .field label,.form-grid .field label{font-size:12px!important;line-height:1.25!important}
  .signatory-map .signatory-block span{font-size:10px!important}.signatory-map .signatory-block b{font-size:13px!important;line-height:1.2!important}.signatory-map .signatory-block small{font-size:10.5px!important;line-height:1.28!important}
}
@media(max-width:430px){
  .v31-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  .v31-stat-card{padding:9px 7px!important;min-height:114px!important}.v31-stat-card b{font-size:21px!important}.v31-stat-card>span{font-size:9px!important}.v31-stat-card .v31-icon{width:38px!important;height:38px!important;border-radius:13px!important}
  .v31-workflow-card,.v31-quick-section,.v31-recent-section{padding:12px!important}
  .v31-quick-grid{gap:8px!important}.v31-quick-card{padding:11px 10px!important;min-height:74px!important}.v31-quick-card b{font-size:12px!important}
  .mobile-brand-copy b{font-size:18px!important}.mobile-hero-tagline{font-size:11px!important;max-width:190px!important}
}


/* =========================================================
   MOBILE UI REFERENCE ICON SCALE — V32
   Dashboard/icon proportions aligned to the supplied target image.
   ========================================================= */
@media(max-width:820px){
  body.mode-app.view-dashboard .content{padding:8px 10px 96px!important}
  .mobile-v32-dashboard{display:flex;flex-direction:column;gap:10px}

  .v32-cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;width:100%;padding:13px 15px;border:0;border-radius:20px;background:linear-gradient(180deg,#ffdb3f 0%,#f9c825 100%);box-shadow:0 10px 22px rgba(184,137,16,.18);color:#103b67;text-align:left}
  .v32-cta .v32-icon{width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,#0b4e93,#073a70)!important;box-shadow:0 8px 16px rgba(5,47,92,.24);border:0}
  .v32-cta .v32-icon:before{display:none}.v32-cta .v32-icon svg{width:34px;height:34px}.v32-cta .v32-plus{stroke:#fff;stroke-width:5;stroke-linecap:round}
  .v32-cta b{display:block;font-size:19px;line-height:1.05;margin-bottom:4px}.v32-cta div span{display:block;font-size:11.5px;color:#173e62}.v32-cta em{font-style:normal;font-size:30px;line-height:1;color:#173e62}

  .v32-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .v32-stat-card{position:relative;min-width:0;min-height:126px;padding:10px 7px 11px;border:1px solid #e3eaf2;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);box-shadow:0 7px 18px rgba(19,57,96,.07);display:flex;flex-direction:column;align-items:center;text-align:center;color:#113b69;overflow:hidden}
  .v32-stat-card .v32-icon{width:50px;height:50px;border-radius:15px;margin:0 0 9px;flex:0 0 auto}
  .v32-stat-card .v32-icon svg{width:31px;height:31px}
  .v32-stat-card b{font-size:25px;line-height:1;font-weight:800;margin:0 0 5px;color:#0e3765}
  .v32-stat-card>span{font-size:10.5px;line-height:1.12;font-weight:600;color:#425a73;max-width:62px;min-height:23px}
  .v32-stat-card>em{position:absolute;right:7px;bottom:23px;font-style:normal;font-size:21px;line-height:1;color:#6f87a1}

  .v32-workflow-card,.v32-quick-section,.v32-recent-section{background:#fff;border:1px solid #e8edf4;border-radius:19px;box-shadow:0 7px 18px rgba(17,56,96,.05);padding:13px}
  .v32-workflow-card .head,.v32-quick-section .head,.v32-recent-section .head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
  .v32-workflow-card .head b,.v32-quick-section .head b,.v32-recent-section .head b{font-size:14.5px;color:#142b47}
  .v32-workflow-card .head span,.v32-quick-section .head span{font-size:10px;color:#74869a}
  .v32-recent-section .head button{background:none;border:0;padding:0;color:#1766d1;font-size:11px;font-weight:800}

  .v32-workflow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;position:relative}
  .v32-workflow-steps:before{content:"";position:absolute;left:9%;right:9%;top:18px;height:3px;background:#d9e3ef;z-index:0}
  .v32-workflow-steps .step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
  .v32-workflow-steps .step i{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#e9eff8;color:#24466e;font-style:normal;font-weight:800;font-size:16px;border:2px solid #edf2f8}
  .v32-workflow-steps .step.active i{background:linear-gradient(180deg,#2682e7,#1261bf);color:#fff;border-color:#dbeaff;box-shadow:0 5px 11px rgba(21,101,190,.22)}
  .v32-workflow-steps .step b{font-size:10.5px;color:#203f67;white-space:nowrap}.v32-workflow-steps .step small{font-size:8.1px;line-height:1.12;color:#77889a;max-width:62px}

  .v32-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .v32-quick-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;min-height:78px;padding:11px 10px;border:0;border-radius:16px;text-align:left;color:#173b66}
  .v32-quick-card.tone-green{background:#e8f8ee}.v32-quick-card.tone-amber{background:#fff5d9}.v32-quick-card.tone-blue{background:#eaf4ff}.v32-quick-card.tone-violet{background:#f0eaff}
  .v32-quick-card .v32-icon{width:46px;height:46px;border-radius:14px}.v32-quick-card .v32-icon svg{width:29px;height:29px}
  .v32-quick-card div{min-width:0;display:flex;flex-direction:column;gap:2px}.v32-quick-card b{font-size:12.5px;line-height:1.12}.v32-quick-card div span{font-size:9.8px;line-height:1.16;color:#657b91}.v32-quick-card em{font-style:normal;font-size:22px;color:#68809a}

  .v32-recent-section .list{display:flex;flex-direction:column;gap:9px}
  .v32-recent-section .v31-recent-card{border-radius:15px;padding:10px 11px;box-shadow:0 5px 12px rgba(17,56,96,.035)}

  /* Reference-style app icons: simple filled glyph + soft rounded square. */
  .v32-icon{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;overflow:hidden;flex:0 0 auto;border:1px solid rgba(255,255,255,.66);box-shadow:0 7px 15px rgba(16,61,110,.10),inset 0 1px 0 rgba(255,255,255,.82)}
  .v32-icon:before{content:"";position:absolute;inset:1px 2px auto;height:45%;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
  .v32-icon svg{position:relative;z-index:1;width:30px;height:30px}
  .v32-icon.tone-blue{background:linear-gradient(180deg,#dcedff,#c7e2ff)}
  .v32-icon.tone-cyan{background:linear-gradient(180deg,#d9f5ff,#bfeaff)}
  .v32-icon.tone-green{background:linear-gradient(180deg,#dcf8e7,#c8f0d7)}
  .v32-icon.tone-amber{background:linear-gradient(180deg,#fff2c9,#f9e1a1)}
  .v32-icon.tone-violet{background:linear-gradient(180deg,#ebdfff,#d9c9ff)}
  .v32-icon.tone-indigo{background:linear-gradient(180deg,#dfe9ff,#cbd8ff)}
  .v32-icon.tone-gold{background:linear-gradient(180deg,#ffdf54,#ffc928)}
  .v32-icon.tone-navy{background:linear-gradient(180deg,#0c559c,#073b72)}

  .v32-doc{fill:#2675c9}.v32-doc-fold{fill:#8fc1f0}.v32-white-line{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round}
  .v32-clip{fill:#7c5a0b}.v32-clip-top{fill:#9b761e}.v32-amber-line{fill:none;stroke:#fff7df;stroke-width:3;stroke-linecap:round}.v32-amber-check{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
  .v32-check-disc{fill:#16a759}.v32-check-line{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
  .v32-gear{fill:#2576d7}.v32-gear-hole{fill:#d8efff}
  .v32-plus{fill:none;stroke:#123f70;stroke-width:5;stroke-linecap:round}
  .v32-create-doc{fill:#138f53}.v32-create-fold{fill:#70c99b}.v32-create-plus-disc{fill:#0d7d48}.v32-create-plus{fill:none;stroke:#fff;stroke-width:3.8;stroke-linecap:round}
  .v32-inbox{fill:#805b0b}.v32-inbox-slot{fill:none;stroke:#fff6d9;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
  .v32-register{fill:#2168c9}.v32-register-top{fill:#174e9f}.v32-register-line{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round}
  .v32-shield{fill:#7354de}.v32-shield-mark{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round}
  .v32-home{fill:#fff}.v32-permit{fill:#fff}.v32-permit-top{fill:#e7efff}.v32-permit-line{fill:none;stroke:#5b74cc;stroke-width:3;stroke-linecap:round}
  .v32-user-head,.v32-user-body{fill:#fff}

  /* Bottom nav sized to the supplied reference: larger app-style icons. */
  .mobile-bottom-nav-v32{padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #e7ecf3!important;box-shadow:0 -9px 22px rgba(16,61,110,.08)!important}
  .mobile-bottom-nav-v32 button{gap:2px!important;min-height:55px!important;position:relative}.mobile-bottom-nav-v32 button small{font-size:10px!important;font-weight:700!important;color:#64788f!important}
  .mobile-bottom-nav-v32 .nav-svg-v32{background:none!important;box-shadow:none!important;width:auto!important;height:auto!important;border-radius:0!important}
  .mobile-bottom-nav-v32 .nav-svg-v32 .v32-icon{width:44px;height:44px;border-radius:14px;box-shadow:0 7px 14px rgba(16,61,110,.12),inset 0 1px 0 rgba(255,255,255,.78)}
  .mobile-bottom-nav-v32 .nav-svg-v32 .v32-icon svg{width:27px;height:27px}
  .mobile-bottom-nav-v32 .nav-home .v32-icon{background:linear-gradient(180deg,#61a6ff,#2e76e6)}
  .mobile-bottom-nav-v32 .nav-inbox .v32-icon{background:linear-gradient(180deg,#50d5f2,#22add2)}
  .mobile-bottom-nav-v32 .nav-permits .v32-icon{background:linear-gradient(180deg,#6da0ff,#5572df)}
  .mobile-bottom-nav-v32 .nav-profile .v32-icon{background:linear-gradient(180deg,#a470f0,#814ee0)}
  .mobile-bottom-nav-v32 .mobile-new .nav-svg-v32 .v32-icon{width:58px;height:58px;border-radius:18px;background:linear-gradient(180deg,#ffdc45,#ffc324)!important;box-shadow:0 9px 17px rgba(201,145,13,.23)}
  .mobile-bottom-nav-v32 .mobile-new .nav-svg-v32 .v32-icon svg{width:34px;height:34px}.mobile-bottom-nav-v32 .mobile-new .v32-plus{stroke:#17456e;stroke-width:4.5}
  .mobile-bottom-nav-v32 button.active small{color:#165ab9!important}.mobile-bottom-nav-v32 button.active:after{content:"";position:absolute;left:29%;right:29%;bottom:1px;height:3px;border-radius:99px;background:#2167cf}
  .mobile-bottom-nav-v32 .mobile-badge{top:1px!important;right:11px!important;background:#ef3538!important;border:2px solid #fff!important;min-width:20px!important;height:20px!important;line-height:16px!important;font-size:10px!important}
}

@media(max-width:430px){
  .v32-stats-grid{gap:6px!important}
  .v32-stat-card{min-height:123px!important;padding:9px 5px 10px!important;border-radius:16px!important}
  .v32-stat-card .v32-icon{width:48px!important;height:48px!important;border-radius:14px!important;margin-bottom:8px!important}
  .v32-stat-card .v32-icon svg{width:30px!important;height:30px!important}
  .v32-stat-card b{font-size:24px!important}.v32-stat-card>span{font-size:10px!important;max-width:58px!important}.v32-stat-card>em{right:5px!important;bottom:22px!important}
  .v32-quick-card{padding:10px 9px!important;gap:8px!important}.v32-quick-card .v32-icon{width:44px!important;height:44px!important}.v32-quick-card b{font-size:12px!important}
}

@media(max-width:365px){
  .v32-stat-card .v32-icon{width:44px!important;height:44px!important}.v32-stat-card .v32-icon svg{width:27px!important;height:27px!important}
  .v32-stat-card>span{font-size:9.2px!important}.v32-stat-card b{font-size:22px!important}
}

/* =====================================================================
   PALECO PTW MOBILE EXACT REFERENCE — V33
   Master visual reference: approved mobile mockup supplied 2026-09-13.
   This block intentionally overrides older V29–V32 experimental styles.
   ===================================================================== */
@media (max-width:820px){
  :root{
    --v33-navy:#073d78;--v33-navy-deep:#062f5d;--v33-blue:#1269cf;--v33-blue-bright:#1f75e6;
    --v33-yellow:#ffc928;--v33-green:#0ca35a;--v33-text:#0b315b;--v33-muted:#687c92;
    --v33-bg:#f4f8fd;--v33-border:#dfe7f0;--v33-shadow:0 8px 22px rgba(20,58,96,.07)
  }
  html,body{background:var(--v33-bg)!important}
  body.mode-app,.app-shell,.main{background:var(--v33-bg)!important;color:var(--v33-text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Arial,sans-serif!important}
  body.mode-app .topbar{display:none!important}
  body.mode-app .sidebar{display:none!important}
  body.mode-app .main{margin:0!important;width:100%!important;min-height:100dvh!important}

  /* Header: same proportions, imagery and hierarchy as the approved reference. */
  body.mode-app .mobile-hero.mobile-hero-v33,
  body.mode-app .mobile-hero{
    display:block!important;position:relative!important;overflow:hidden!important;min-height:205px!important;
    padding:calc(16px + env(safe-area-inset-top)) 17px 17px!important;border-radius:0 0 24px 24px!important;
    background-image:
      linear-gradient(90deg,rgba(4,49,93,.99) 0%,rgba(5,65,116,.96) 49%,rgba(5,65,116,.57) 72%,rgba(5,54,99,.30) 100%),
      url("mobile-hero-worker-v33.jpg"),
      linear-gradient(135deg,#073867,#0b609e)!important;
    background-repeat:no-repeat,no-repeat,no-repeat!important;
    background-position:center,right 6px center,center!important;
    background-size:cover,auto 100%,cover!important;
    box-shadow:0 8px 20px rgba(6,45,84,.15)!important
  }
  body.mode-app .mobile-hero:after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.06))!important;pointer-events:none!important}
  .mobile-brand-row{position:relative!important;z-index:2!important;display:grid!important;grid-template-columns:76px minmax(0,1fr) 68px!important;gap:10px!important;align-items:start!important}
  .mobile-brand-row>img{width:76px!important;height:76px!important;object-fit:contain!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.16))!important}
  .mobile-brand-copy{padding-top:10px!important;min-width:0!important}
  .mobile-brand-copy b{display:block!important;font-size:25px!important;line-height:1!important;letter-spacing:-.025em!important;color:#fff!important;font-weight:850!important;white-space:nowrap!important;text-shadow:0 1px 1px rgba(0,0,0,.08)!important}
  .mobile-brand-copy span{display:block!important;margin-top:8px!important;font-size:11px!important;letter-spacing:.28em!important;color:rgba(255,255,255,.95)!important;white-space:nowrap!important}
  .mobile-user-mini{position:relative!important;z-index:3!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;margin-top:0!important}
  .mobile-user-mini>span{width:60px!important;height:60px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgba(250,253,255,.95)!important;color:#164574!important;border:4px solid rgba(255,255,255,.95)!important;box-shadow:0 3px 10px rgba(0,0,0,.16)!important;font-size:20px!important;font-weight:850!important}
  .mobile-user-mini small{font-size:10.5px!important;line-height:1!important;color:#fff!important;white-space:nowrap!important;text-shadow:0 1px 2px rgba(0,0,0,.25)!important}
  .mobile-hero-tagline{position:relative!important;z-index:2!important;margin:9px 0 0 87px!important;max-width:205px!important;color:#fff!important;font-size:12px!important;line-height:1.3!important;font-weight:500!important;text-shadow:0 1px 2px rgba(0,0,0,.18)!important}

  /* Sync strip appears on Home only, matching the reference. */
  body.view-inner .mobile-sync-bar{display:none!important}
  body.view-dashboard .mobile-sync-bar.mobile-sync-bar-v33,
  body.view-dashboard .mobile-sync-bar{
    display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;
    margin:10px 14px 11px!important;padding:9px 10px 9px 12px!important;min-height:69px!important;border:1px solid #cfe9da!important;border-radius:19px!important;
    background:linear-gradient(100deg,#eaf9ef 0%,#f2fcf5 100%)!important;box-shadow:0 7px 16px rgba(22,110,65,.06)!important;color:#174c32!important
  }
  .v33-sync-cloud{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;background:none!important;color:#0d9e56!important;font-size:0!important}
  .v33-sync-cloud svg{width:40px!important;height:40px!important;fill:#0c9f56!important}.v33-sync-cloud svg .plus{fill:none!important;stroke:#fff!important;stroke-width:3.5!important;stroke-linecap:round!important}
  .mobile-sync-bar .sync-copy{display:flex!important;flex-direction:column!important;min-width:0!important;gap:2px!important}
  .mobile-sync-bar #mobileSyncState{font-size:13px!important;line-height:1.15!important;color:#17492f!important;font-weight:820!important;white-space:nowrap!important}
  .mobile-sync-bar .sync-subtext{font-size:9.7px!important;line-height:1.2!important;color:#668070!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .mobile-sync-bar .sync-queue{font-size:9px!important;color:#28704a!important}
  .mobile-sync-bar>button{height:47px!important;min-width:113px!important;padding:0 12px!important;border:1px solid #d6e2ef!important;border-radius:16px!important;background:#fff!important;color:#1767c8!important;box-shadow:0 5px 13px rgba(19,72,122,.07)!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;font-size:12px!important;font-weight:800!important}
  .mobile-sync-bar>button svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.1!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .mobile-sync-bar.is-offline{background:#fff8df!important;border-color:#f1df9c!important}.mobile-sync-bar.is-offline #mobileSyncState{color:#715700!important}

  /* Mobile content spacing. The old Field Dashboard heading is removed by the V33 renderer. */
  .content{max-width:none!important;width:100%!important;margin:0!important;background:transparent!important}
  body.view-dashboard .content{padding:0 14px calc(112px + env(safe-area-inset-bottom))!important}
  body.view-inner .content{padding:18px 16px calc(112px + env(safe-area-inset-bottom))!important}
  .mobile-v33-dashboard{display:flex!important;flex-direction:column!important;gap:10px!important}

  /* Primary yellow New PTW control. */
  .v33-cta{width:100%!important;min-height:86px!important;border:0!important;border-radius:18px!important;padding:12px 15px!important;background:linear-gradient(100deg,#ffd23c 0%,#ffc523 100%)!important;box-shadow:0 9px 19px rgba(190,135,10,.18)!important;display:grid!important;grid-template-columns:58px minmax(0,1fr) 20px!important;align-items:center!important;gap:13px!important;text-align:left!important;color:#0a315c!important}
  .v33-cta-plus{width:58px!important;height:58px!important;border-radius:50%!important;background:#073f7c!important;color:#ffd33b!important;display:grid!important;place-items:center!important;font-size:39px!important;line-height:1!important;font-weight:300!important;box-shadow:0 7px 14px rgba(5,50,96,.2)!important}
  .v33-cta div{min-width:0!important}.v33-cta b{display:block!important;font-size:21px!important;line-height:1.05!important;font-weight:850!important;letter-spacing:-.02em!important}.v33-cta div span{display:block!important;margin-top:5px!important;font-size:11.5px!important;line-height:1.2!important;color:#173e61!important}.v33-cta em{font-style:normal!important;font-size:32px!important;line-height:1!important;color:#113a65!important;font-weight:300!important}

  /* Four compact counters exactly as the reference: icon tile, value, label and chevron. */
  .v33-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
  .v33-stat{position:relative!important;min-width:0!important;min-height:126px!important;padding:10px 8px 11px!important;border:1px solid var(--v33-border)!important;border-radius:16px!important;background:#fff!important;box-shadow:var(--v33-shadow)!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important;color:var(--v33-text)!important;overflow:hidden!important}
  .v33-stat .v33-icon{margin-bottom:8px!important}.v33-stat strong{font-size:26px!important;line-height:.95!important;font-weight:850!important;letter-spacing:-.03em!important;color:#082f61!important}.v33-stat>span:not(.v33-icon){margin-top:5px!important;font-size:10.2px!important;line-height:1.15!important;font-weight:650!important;color:#16385f!important;min-height:24px!important}.v33-stat em{position:absolute!important;right:8px!important;bottom:16px!important;font-style:normal!important;font-size:24px!important;line-height:1!important;color:#68809c!important;font-weight:300!important}

  /* Shared reference icon tiles. */
  .v33-icon{width:44px!important;height:44px!important;border-radius:12px!important;display:grid!important;place-items:center!important;flex:0 0 auto!important;box-shadow:none!important;border:0!important;overflow:hidden!important}
  .v33-icon svg{width:29px!important;height:29px!important}.v33-icon.tone-blue{background:#e4f2ff!important}.v33-icon.tone-amber{background:#fff2cf!important}.v33-icon.tone-green{background:#def8ea!important}.v33-icon.tone-violet{background:#eee7ff!important}
  .v33-icon .g-blue{fill:#1768c7}.v33-icon .g-blue-soft{fill:#8fc4ef}.v33-icon .g-blue-line{fill:none;stroke:#1768c7;stroke-width:5;stroke-linecap:round}.v33-icon .g-amber{fill:#825b08}.v33-icon .g-amber-dark{fill:#684500}.v33-icon .g-green{fill:#0da65b}.v33-icon .g-green-soft{fill:#6dc794}.v33-icon .g-green-dark{fill:#087b44}.v33-icon .g-violet{fill:#6547d5}.v33-icon .g-hole{fill:#dff1ff}.v33-icon .g-white-line{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.v33-icon .g-white-check{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}.v33-icon .g-plus-white{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round}.v33-icon .g-green-pale{fill:#dff6ec}.v33-icon .g-green-stroke{fill:none;stroke:#11885a;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}

  /* Shared white panels, headers and workflow. */
  .v33-panel{border:1px solid var(--v33-border)!important;border-radius:16px!important;background:#fff!important;box-shadow:var(--v33-shadow)!important;padding:11px 12px!important}
  .v33-panel-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:9px!important}.v33-panel-head>b{font-size:14px!important;line-height:1.1!important;font-weight:850!important;color:#0b315c!important}.v33-panel-head>span{font-size:9.5px!important;color:#71849a!important}.v33-panel-head>button{padding:0!important;border:0!important;background:none!important;color:#1168d8!important;font-size:10.5px!important;font-weight:800!important}
  .v33-workflow{padding-bottom:10px!important}.v33-workflow-steps{position:relative!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:2px!important}.v33-workflow-steps:before{content:""!important;position:absolute!important;left:8%!important;right:8%!important;top:16px!important;height:3px!important;background:#dbe4ef!important;border-radius:99px!important}.v33-workflow-steps:after{content:""!important;position:absolute!important;left:8%!important;width:11%!important;top:16px!important;height:3px!important;background:#1f73e3!important;border-radius:99px!important}.v33-workflow-steps .step{position:relative!important;z-index:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;min-width:0!important}.v33-workflow-steps .step i{width:33px!important;height:33px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#e8eef7!important;color:#183b64!important;border:0!important;font-style:normal!important;font-size:14px!important;font-weight:850!important}.v33-workflow-steps .step.active i{background:#1d72e1!important;color:#fff!important;box-shadow:0 4px 9px rgba(23,106,207,.25)!important}.v33-workflow-steps .step b{margin-top:4px!important;font-size:9.8px!important;line-height:1!important;color:#15365c!important;white-space:nowrap!important}.v33-workflow-steps .step.active b{color:#1365cc!important}.v33-workflow-steps .step small{margin-top:3px!important;font-size:7.6px!important;line-height:1.12!important;color:#72859a!important;max-width:65px!important}

  /* Quick Actions: compact 2 x 2 pastel cards. */
  .v33-quick-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.v33-quick{min-height:65px!important;border:0!important;border-radius:12px!important;padding:9px!important;display:grid!important;grid-template-columns:43px minmax(0,1fr) 14px!important;align-items:center!important;gap:8px!important;text-align:left!important;color:#123861!important}.v33-quick.tone-green{background:#e7f9ee!important}.v33-quick.tone-amber{background:#fff4da!important}.v33-quick.tone-blue{background:#eaf5ff!important}.v33-quick.tone-violet{background:#f0ebff!important}.v33-quick .v33-icon{width:42px!important;height:42px!important}.v33-quick .v33-icon svg{width:27px!important;height:27px!important}.v33-quick div{min-width:0!important;display:flex!important;flex-direction:column!important;gap:2px!important}.v33-quick b{font-size:11px!important;line-height:1.08!important;font-weight:800!important}.v33-quick div span{font-size:8.7px!important;line-height:1.14!important;color:#60758b!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.v33-quick em{font-style:normal!important;font-size:21px!important;color:#56718f!important;font-weight:300!important}

  /* Recent permits: compact list rows, not the large V31 cards. */
  .v33-recent{padding-bottom:8px!important}.v33-recent-list{display:flex!important;flex-direction:column!important;gap:6px!important}.v33-recent-row{position:relative!important;width:100%!important;min-height:78px!important;padding:9px 25px 8px 10px!important;border:1px solid #e1e8f0!important;border-radius:12px!important;background:#fff!important;display:grid!important;grid-template-columns:minmax(0,1fr) 92px!important;gap:7px!important;text-align:left!important;color:#15385f!important}.v33-recent-main{min-width:0!important;display:flex!important;flex-direction:column!important}.v33-recent-main>b{font-size:10.7px!important;line-height:1.1!important;color:#0e315c!important;font-weight:850!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.v33-recent-main .desc{margin-top:3px!important;font-size:8.7px!important;line-height:1.12!important;color:#4f6681!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.v33-recent-main .meta{margin-top:6px!important;display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}.v33-recent-main .meta span{display:flex!important;align-items:center!important;gap:3px!important;font-size:7.7px!important;line-height:1!important;color:#647891!important;white-space:nowrap!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}.v33-recent-main .meta svg{width:11px!important;height:11px!important;fill:#5d7596!important;flex:0 0 auto!important}.v33-recent-main .meta svg .hole{fill:#fff!important}.v33-recent-main .meta svg .line{fill:none!important;stroke:#fff!important;stroke-width:1.7!important;stroke-linecap:round!important}.v33-recent-side{display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:flex-start!important;min-width:0!important}.v33-recent-side .status{font-size:8px!important;line-height:1!important;padding:6px 8px!important;border-radius:999px!important;white-space:nowrap!important}.v33-recent-side small{margin-top:3px!important;max-width:88px!important;font-size:7.8px!important;line-height:1.05!important;color:#637791!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.v33-recent-row>em{position:absolute!important;right:8px!important;top:50%!important;transform:translateY(-50%)!important;font-style:normal!important;font-size:24px!important;line-height:1!important;color:#607994!important}.v33-no-records{padding:20px!important;text-align:center!important;color:#78899b!important;font-size:11px!important}

  /* Inbox screen matching the approved reference. */
  .v33-inbox-screen{display:flex!important;flex-direction:column!important;gap:16px!important}.v33-page-title{padding:0 2px!important}.v33-page-title>span{display:block!important;font-size:10.5px!important;line-height:1!important;letter-spacing:.27em!important;color:#14588f!important;font-weight:850!important}.v33-page-title h2{margin:5px 0 5px!important;font-size:35px!important;line-height:1!important;letter-spacing:-.035em!important;color:#0c2f55!important;font-weight:850!important}.v33-page-title p{margin:0!important;font-size:15px!important;line-height:1.3!important;color:#718397!important}
  .v33-inbox-card{min-height:535px!important;border:1px solid #dce6f0!important;border-radius:20px!important;background:#fff!important;box-shadow:var(--v33-shadow)!important;padding:18px!important;display:flex!important;flex-direction:column!important}.v33-inbox-card-head{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important}.v33-inbox-card-head h3{margin:0!important;font-size:22px!important;line-height:1.1!important;color:#0d3159!important;font-weight:850!important}.v33-inbox-card-head p{margin:6px 0 0!important;font-size:12.5px!important;line-height:1.3!important;color:#697d92!important}.v33-pending{display:inline-flex!important;align-items:center!important;height:32px!important;padding:0 12px!important;border-radius:999px!important;background:#e9f8ef!important;border:1px solid #bfe7cf!important;color:#137448!important;font-size:11px!important;font-weight:800!important}.v33-pending.has-items{background:#fff4d8!important;border-color:#f2d99c!important;color:#7d5a00!important}.v33-inbox-divider{height:1px!important;background:#e6ebf1!important;margin:12px 0!important}.v33-inbox-empty{flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:24px 8px 48px!important}.v33-inbox-empty .v33-icon{width:88px!important;height:88px!important;border-radius:50%!important;background:transparent!important}.v33-inbox-empty .v33-icon svg{width:78px!important;height:78px!important}.v33-inbox-empty h3{margin:12px 0 0!important;font-size:24px!important;line-height:1!important;color:#547664!important;font-weight:780!important}.v33-inbox-empty p{margin:18px 0 0!important;font-size:16px!important;line-height:1.35!important;color:#6d8090!important}.v33-inbox-list{display:flex!important;flex-direction:column!important;gap:10px!important}.v33-inbox-item{display:grid!important;grid-template-columns:46px minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;padding:11px!important;border:1px solid #e1e8f0!important;border-radius:14px!important;background:#fbfdff!important}.v33-inbox-item .action-dot .v33-icon{width:44px!important;height:44px!important}.v33-inbox-item>div{min-width:0!important;display:flex!important;flex-direction:column!important}.v33-inbox-item b{font-size:12px!important;color:#12385f!important}.v33-inbox-item div>span{font-size:9px!important;color:#75869a!important;margin-top:2px!important}.v33-inbox-item p{font-size:10px!important;line-height:1.25!important;color:#596f86!important;margin:5px 0 0!important}.v33-inbox-item .btn{min-height:35px!important;padding:0 11px!important;border-radius:10px!important;font-size:10px!important}

  /* Bottom navigation: flat reference icons; only New PTW is a blue circle. */
  .mobile-bottom-nav.mobile-bottom-nav-v33,
  .mobile-bottom-nav-v33{position:fixed!important;z-index:80!important;left:0!important;right:0!important;bottom:0!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;align-items:end!important;min-height:83px!important;padding:7px 8px calc(8px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.98)!important;border-top:1px solid #e6ebf1!important;border-radius:20px 20px 0 0!important;box-shadow:0 -8px 24px rgba(14,49,85,.08)!important;backdrop-filter:blur(16px)!important}
  .mobile-bottom-nav-v33 button{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;min-height:57px!important;padding:0!important;border:0!important;background:none!important;color:#647892!important;font-size:0!important}
  .mobile-bottom-nav-v33 button small{font-size:10px!important;line-height:1!important;font-weight:650!important;color:inherit!important}.mobile-bottom-nav-v33 button.active{color:#0d62c8!important}.mobile-bottom-nav-v33 button.active small{font-weight:820!important;color:#0d62c8!important}.mobile-bottom-nav-v33 button.active:after{content:""!important;position:absolute!important;bottom:-2px!important;left:31%!important;right:31%!important;height:3px!important;border-radius:99px!important;background:#0c62cb!important}
  .mobile-bottom-nav-v33 .nav-svg-v33{width:auto!important;height:auto!important;margin:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;display:block!important;color:inherit!important;transform:none!important}
  .mobile-bottom-nav-v33 .v33-nav-glyph{display:grid!important;place-items:center!important;width:31px!important;height:31px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:inherit!important}.mobile-bottom-nav-v33 .v33-nav-glyph svg{width:28px!important;height:28px!important;fill:currentColor!important;stroke:none!important;filter:none!important}.mobile-bottom-nav-v33 .v33-nav-glyph svg .cut{fill:none!important;stroke:#fff!important;stroke-width:2!important;stroke-linecap:round!important}.mobile-bottom-nav-v33 .nav-inbox .v33-nav-glyph svg .cut,.mobile-bottom-nav-v33 .nav-prepared .v33-nav-glyph svg .cut{stroke:#fff!important}
  .mobile-bottom-nav-v33 .mobile-new{justify-content:flex-end!important}.mobile-bottom-nav-v33 .mobile-new .nav-svg-v33{width:62px!important;height:62px!important;margin-top:-25px!important;margin-bottom:0!important;border-radius:50%!important;background:#0b55a9!important;display:grid!important;place-items:center!important;box-shadow:0 9px 20px rgba(7,70,137,.26)!important;color:#fff!important}.mobile-bottom-nav-v33 .mobile-new .v33-nav-glyph{width:38px!important;height:38px!important;color:#fff!important}.mobile-bottom-nav-v33 .mobile-new .v33-nav-glyph svg{width:37px!important;height:37px!important;fill:none!important}.mobile-bottom-nav-v33 .mobile-new .v33-nav-glyph svg .plus{fill:none!important;stroke:#fff!important;stroke-width:2.6!important;stroke-linecap:round!important}.mobile-bottom-nav-v33 .mobile-new.active:after{display:none!important}.mobile-bottom-nav-v33 .mobile-new small{margin-top:1px!important}
  .mobile-bottom-nav-v33 .mobile-badge{position:absolute!important;top:0!important;right:17px!important;min-width:20px!important;height:20px!important;padding:0 5px!important;border-radius:999px!important;background:#f03b35!important;color:#fff!important;border:2px solid #fff!important;font-size:9px!important;line-height:16px!important;font-weight:850!important;font-style:normal!important;display:grid!important;place-items:center!important}.mobile-bottom-nav-v33 .mobile-badge.hidden{display:none!important}

  /* Bring the rest of the existing build into the same visual system without changing behavior. */
  body.view-inner .page-title{margin-bottom:14px!important;align-items:flex-start!important}.page-title h2{color:#0d3159!important;letter-spacing:-.025em!important}.page-title p{color:#6b7f94!important}.card,.wizard-card,.permit-detail-card,.reference-card{border-color:#dfe7f0!important;border-radius:18px!important;box-shadow:0 7px 18px rgba(20,58,96,.055)!important}.btn{border-radius:11px!important}.btn.primary{background:#0d5db8!important;border-color:#0d5db8!important}.field input:not([type="checkbox"]):not([type="radio"]),.field select,.field textarea,input:not([type="checkbox"]):not([type="radio"]),select,textarea{border-radius:11px!important}.status{border-radius:999px!important}
}

@media (max-width:390px){
  .mobile-brand-row{grid-template-columns:70px minmax(0,1fr) 62px!important;gap:8px!important}.mobile-brand-row>img{width:70px!important;height:70px!important}.mobile-brand-copy b{font-size:22px!important}.mobile-brand-copy span{font-size:9.8px!important}.mobile-user-mini>span{width:55px!important;height:55px!important;font-size:18px!important}.mobile-hero-tagline{margin-left:79px!important;max-width:185px!important;font-size:11px!important}
  .mobile-sync-bar #mobileSyncState{font-size:12px!important}.mobile-sync-bar .sync-subtext{font-size:8.8px!important}.mobile-sync-bar>button{min-width:104px!important;padding:0 9px!important;font-size:11px!important}
  .v33-cta{grid-template-columns:54px minmax(0,1fr) 18px!important;min-height:82px!important}.v33-cta-plus{width:54px!important;height:54px!important}.v33-cta b{font-size:20px!important}.v33-stats{gap:6px!important}.v33-stat{min-height:122px!important;padding:9px 6px 10px!important}.v33-stat .v33-icon{width:41px!important;height:41px!important}.v33-stat .v33-icon svg{width:27px!important;height:27px!important}.v33-stat strong{font-size:24px!important}.v33-stat>span:not(.v33-icon){font-size:9.4px!important}.v33-stat em{right:5px!important;bottom:15px!important}.v33-quick{grid-template-columns:40px minmax(0,1fr) 12px!important;gap:6px!important}.v33-quick .v33-icon{width:39px!important;height:39px!important}.v33-quick b{font-size:10.5px!important}.v33-quick div span{font-size:8.2px!important}
}

/* =====================================================================
   PALECO PTW MOBILE FINAL TWEAK — V34
   2026-09-13
   - Compact top banner/header height.
   - Bottom New PTW control now matches the Home-page New PTW plus button:
     navy circle + PALECO yellow plus, same diameter/shadow treatment.
   ===================================================================== */
@media (max-width:820px){
  /* Compact the branded banner without changing its content or navigation. */
  body.mode-app .mobile-hero.mobile-hero-v33,
  body.mode-app .mobile-hero{
    min-height:150px!important;
    padding:max(9px,env(safe-area-inset-top)) 15px 10px!important;
    border-radius:0 0 21px 21px!important;
    background-position:center,right 4px center,center!important;
  }
  .mobile-brand-row{
    grid-template-columns:62px minmax(0,1fr) 56px!important;
    gap:9px!important;
    align-items:start!important;
  }
  .mobile-brand-row>img{
    width:62px!important;
    height:62px!important;
  }
  .mobile-brand-copy{
    padding-top:7px!important;
  }
  .mobile-brand-copy b{
    font-size:22px!important;
    line-height:1!important;
  }
  .mobile-brand-copy span{
    margin-top:6px!important;
    font-size:9.5px!important;
    letter-spacing:.25em!important;
  }
  .mobile-user-mini{
    gap:3px!important;
  }
  .mobile-user-mini>span{
    width:52px!important;
    height:52px!important;
    border-width:3px!important;
    font-size:18px!important;
  }
  .mobile-user-mini small{
    font-size:9.5px!important;
  }
  .mobile-hero-tagline{
    margin:4px 0 0 71px!important;
    max-width:195px!important;
    font-size:10.7px!important;
    line-height:1.22!important;
  }

  /* Make the bottom-center New PTW button visually identical to the
     circular plus used in the Home-page yellow New PTW CTA. */
  .mobile-bottom-nav-v33 .mobile-new .nav-svg-v33{
    width:58px!important;
    height:58px!important;
    margin-top:-22px!important;
    background:#073f7c!important;
    box-shadow:0 7px 14px rgba(5,50,96,.20)!important;
    color:#ffd33b!important;
  }
  .mobile-bottom-nav-v33 .mobile-new .v33-nav-glyph{
    width:36px!important;
    height:36px!important;
    color:#ffd33b!important;
  }
  .mobile-bottom-nav-v33 .mobile-new .v33-nav-glyph svg{
    width:35px!important;
    height:35px!important;
  }
  .mobile-bottom-nav-v33 .mobile-new .v33-nav-glyph svg .plus{
    stroke:#ffd33b!important;
    stroke-width:2.45!important;
  }
  .mobile-bottom-nav-v33 .mobile-new small{
    margin-top:1px!important;
  }
}

@media (max-width:390px){
  body.mode-app .mobile-hero.mobile-hero-v33,
  body.mode-app .mobile-hero{
    min-height:145px!important;
    padding:max(8px,env(safe-area-inset-top)) 13px 9px!important;
  }
  .mobile-brand-row{
    grid-template-columns:58px minmax(0,1fr) 52px!important;
    gap:7px!important;
  }
  .mobile-brand-row>img{width:58px!important;height:58px!important}
  .mobile-brand-copy{padding-top:6px!important}
  .mobile-brand-copy b{font-size:20px!important}
  .mobile-brand-copy span{font-size:8.8px!important;letter-spacing:.23em!important}
  .mobile-user-mini>span{width:49px!important;height:49px!important;font-size:17px!important}
  .mobile-user-mini small{font-size:9px!important}
  .mobile-hero-tagline{margin:3px 0 0 65px!important;max-width:180px!important;font-size:10px!important}
  .mobile-bottom-nav-v33 .mobile-new .nav-svg-v33{width:54px!important;height:54px!important;margin-top:-20px!important}
  .mobile-bottom-nav-v33 .mobile-new .v33-nav-glyph{width:34px!important;height:34px!important}
  .mobile-bottom-nav-v33 .mobile-new .v33-nav-glyph svg{width:33px!important;height:33px!important}
}

/* =====================================================================
   PALECO PTW MOBILE BOTTOM-NAV PLUS CENTERING — V35
   2026-09-13
   Fixes legacy .mobile-new span rules that were shifting the inner plus
   glyph upward inside the circular New PTW navigation button.
   ===================================================================== */
@media (max-width:820px){
  .mobile-bottom-nav-v33 .mobile-new .nav-svg-v33{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
  }
  .mobile-bottom-nav-v33 .mobile-new .nav-svg-v33 > .v33-nav-glyph{
    position:static!important;
    width:36px!important;
    height:36px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    display:grid!important;
    place-items:center!important;
    transform:none!important;
    line-height:0!important;
  }
  .mobile-bottom-nav-v33 .mobile-new .nav-svg-v33 > .v33-nav-glyph svg{
    display:block!important;
    width:35px!important;
    height:35px!important;
    margin:0!important;
    transform:none!important;
  }
}
@media (max-width:390px){
  .mobile-bottom-nav-v33 .mobile-new .nav-svg-v33 > .v33-nav-glyph{
    width:34px!important;
    height:34px!important;
  }
  .mobile-bottom-nav-v33 .mobile-new .nav-svg-v33 > .v33-nav-glyph svg{
    width:33px!important;
    height:33px!important;
  }
}