/* Professional layer: type scale, dark theme, lock dialog, real-login states. Loads last. */
:root{
  --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-base:15px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:20px;--fs-3xl:24px;--fs-4xl:30px;--fs-5xl:36px;
  --lh-tight:1.25;--lh-body:1.55;--surface:#FFFFFF;
}
body{font-size:var(--fs-base);line-height:var(--lh-body);text-rendering:optimizeLegibility}
h1{font-size:var(--fs-4xl)}h2{font-size:var(--fs-3xl)}h3{font-size:var(--fs-xl)}h4,h5{font-size:var(--fs-lg)}
@media(max-width:768px){input,select,textarea{font-size:16px}}   /* iOS never zooms on focus */
.menu-viewer-label,#menubar-viewer-select,.drawer-viewer{display:none!important}  /* demo "viewing as" switcher: real accounts only */

/* ---- dark theme ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg-app:#0E1511;--bg-card:#16211A;--surface:#16211A;
  --gray-50:#121B15;--gray-100:#1B2820;--gray-200:#2A3A2F;--gray-300:#3A4D3F;--gray-400:#7F9585;--gray-500:#9DB1A2;--gray-600:#B7C7BB;--gray-700:#CFDBD2;--gray-800:#E3EBE5;--gray-900:#F1F5F2;
  --text-primary:#EAF1EC;--text-secondary:#B7C7BB;--text-tertiary:#8CA292;--border:#2A3A2F;
  --sprout-lt:#1A2B1C;--sprout-md:#2A4A2C;--maize-lt:#2E2511;--sky-lt:#15233B;--harvest-lt:#341A1A;--clay-lt:#2E2210;--market-lt:#241B3A;--agro-lt:#12302D;--vet-lt:#341A1A;--route-lt:#10282E;
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);--shadow-md:0 4px 8px rgba(0,0,0,.5);--shadow-lg:0 10px 18px rgba(0,0,0,.55);--shadow-xl:0 20px 28px rgba(0,0,0,.6);
}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:var(--gray-400)}
:root[data-theme="dark"] .badge-red{color:#FCA5A5}:root[data-theme="dark"] .badge-green{color:#9BE49B}
:root[data-theme="dark"] .badge-yellow{color:#FCD34D}:root[data-theme="dark"] .badge-blue{color:#93C5FD}
:root[data-theme="dark"] .info-box{color:var(--text-secondary)}

/* ---- theme toggle ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-full);color:inherit;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.theme-toggle:hover{background:rgba(255,255,255,.16)}.theme-toggle:focus-visible{outline:2px solid var(--sprout);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px}
#auth-overlay .theme-toggle{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:5;color:#fff}
.drawer-theme{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:var(--fs-md);color:var(--text-secondary)}
.drawer-theme .theme-toggle{color:var(--text-primary);background:var(--gray-100);border-color:var(--border)}

/* ---- locked features ---- */
.ul-lock{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:20px}
.ul-lock.open{display:flex}.ul-lock-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.ul-lock-box{position:relative;width:100%;max-width:420px;background:var(--bg-card);color:var(--text-primary);border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow-2xl)}
.ul-lock-ico{width:44px;height:44px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;background:var(--clay-lt);color:var(--clay);margin-bottom:12px}
.ul-lock-ico svg{width:22px;height:22px}
.ul-lock-box h3{font-size:var(--fs-xl);margin-bottom:6px}.ul-lock-box p{font-size:var(--fs-md);color:var(--text-secondary);margin-bottom:10px}
.ul-lock-box code{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);background:var(--gray-100);color:var(--text-primary);padding:8px 10px;border-radius:var(--r-sm);word-break:break-word;margin-bottom:16px}
.ul-lock-box .btn{width:100%}
.is-locked{position:relative}.is-locked::after{content:"";position:absolute;top:6px;right:6px;width:14px;height:14px;background:currentColor;opacity:.7;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- login errors ---- */
.au-form-err{min-height:18px;margin:-4px 0 8px;font-size:var(--fs-sm);color:#FCA5A5;text-align:left}
.au-btn-primary[disabled]{opacity:.65;cursor:progress}
.au-btn-social.is-locked{opacity:.85}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- dark-mode text colours (generated from the stylesheet rules that set dark text on light tints) ---- */
:root[data-theme="dark"] .uc-safe{color:#93C5FD}
:root[data-theme="dark"] .kpi-trend.up{color:#86EFAC}
:root[data-theme="dark"] .kpi-trend.down{color:#FCA5A5}
:root[data-theme="dark"] .badge-green{color:#86EFAC}
:root[data-theme="dark"] .badge-red{color:#FCA5A5}
:root[data-theme="dark"] .vet-rating{color:#FCD34D}
:root[data-theme="dark"] .alert-strip.sev-high{color:#FCA5A5}
:root[data-theme="dark"] .alert-strip.sev-medium{color:#FCD34D}
:root[data-theme="dark"] .price-bar-change.up{color:#86EFAC}
:root[data-theme="dark"] .ledger-amount .amt-value.credit{color:#86EFAC}
:root[data-theme="dark"] .ledger-amount .amt-value.pending{color:#FCD34D}
:root[data-theme="dark"] .info-box.blue{color:#93C5FD}
:root[data-theme="dark"] .info-box.red{color:#FCA5A5}
:root[data-theme="dark"] .badge-green .ico-dot{color:#86EFAC}
:root[data-theme="dark"] .toast-ico{color:#86EFAC}
:root[data-theme="dark"] .toast.t-error .toast-ico{color:#FCA5A5}
:root[data-theme="dark"] .toast.t-warn .toast-ico{color:#FCD34D}
:root[data-theme="dark"] .toast.t-info .toast-ico{color:#93C5FD}
:root[data-theme="dark"] .ledger-ico.credit{color:#86EFAC}
:root[data-theme="dark"] .ledger-ico.debit{color:#FCA5A5}
:root[data-theme="dark"] .ledger-ico.pending{color:#FCD34D}
:root[data-theme="dark"] .kpi-green .kpi-icon{color:#86EFAC}
:root[data-theme="dark"] .kpi-blue .kpi-icon{color:#93C5FD}
:root[data-theme="dark"] .kpi-amber .kpi-icon{color:#FCD34D}
:root[data-theme="dark"] .kpi-red .kpi-icon{color:#FCA5A5}
:root[data-theme="dark"] .hp-search input{color:#EAF1EC}
:root[data-theme="dark"] .hp-go{color:#86EFAC}
:root[data-theme="dark"] .hp-form input,:root[data-theme="dark"] .hp-form select,:root[data-theme="dark"] .hp-form textarea{color:#EAF1EC}
:root[data-theme="dark"] .hp-err{color:#FCA5A5}
:root[data-theme="dark"] .lg-box{color:#EAF1EC}
:root[data-theme="dark"] .lg-sec h3 span{color:#86EFAC}
:root[data-theme="dark"] .lg-sec h4{color:#86EFAC}
:root[data-theme="dark"] .lg-contact a{color:#86EFAC}
:root[data-theme="dark"] .lg-btn-ghost{color:#EAF1EC}
:root[data-theme="dark"] .lg-back{color:#86EFAC}
:root[data-theme="dark"] .fm-tag.soon{color:#FCD34D}
:root[data-theme="dark"] .fm-tag.svc{color:#C4B5FD}
:root[data-theme="dark"] .fm-seller .fm-ver{color:#86EFAC}
:root[data-theme="dark"] .fm-note{color:#FCD34D}
:root[data-theme="dark"] .fm-note.info{color:#93C5FD}
:root[data-theme="dark"] .fm-err{color:#FCA5A5}
:root[data-theme="dark"] .badge-amber{color:#FCD34D}
:root[data-theme="dark"] .mn-err{color:#FCA5A5}
:root[data-theme="dark"] .mn-done > .ico{color:#86EFAC}
:root[data-theme="dark"] .mn-list li .ico{color:#86EFAC}
:root[data-theme="dark"] .mn-step.bad{color:#FCA5A5}
:root[data-theme="dark"] .mn-step.bad span{color:#FCA5A5}
:root[data-theme="dark"] .mn-sponsor-body{color:#FCD34D}
:root[data-theme="dark"] .mn-sponsor p{color:#FCD34D}
:root[data-theme="dark"] .fm-btn-escrow{color:#EAF1EC}
:root[data-theme="dark"] .mn-cta-ico{color:#FCD34D}
:root[data-theme="dark"] .mn-cta-body p{color:#FCD34D}
:root[data-theme="dark"] .lo-box{color:#EAF1EC}
:root[data-theme="dark"] .lo-ico{color:#FCA5A5}
:root[data-theme="dark"] .lo-ghost{color:#EAF1EC}
:root[data-theme="dark"] .menu-logout:hover,:root[data-theme="dark"] .menu-logout:focus-visible{color:#FCA5A5}

/* ---- dark-mode refinements found by a contrast audit of every page ---- */
:root[data-theme="dark"] .alert-strip.sev-low{color:#BFD7F5}
:root[data-theme="dark"] .hp-search input{color:#EAF1EC}
:root[data-theme="dark"] .hp-item summary{color:#EAF1EC}
:root[data-theme="dark"] .hp-go{color:#86EFAC}
:root[data-theme="dark"] .hp-still b{color:#EAF1EC}
:root[data-theme="dark"] .hp-card b{color:#EAF1EC}
:root[data-theme="dark"] .hp-h{color:#EAF1EC}
:root[data-theme="dark"] .hp-form input,:root[data-theme="dark"] .hp-form select,:root[data-theme="dark"] .hp-form textarea{color:#EAF1EC}
:root[data-theme="dark"] .lg-box{color:#EAF1EC}
:root[data-theme="dark"] .lg-sec h3{color:#EAF1EC}
:root[data-theme="dark"] .lg-sec h3 span{color:#86EFAC}
:root[data-theme="dark"] .lg-sec h4{color:#86EFAC}
:root[data-theme="dark"] .lg-contact a{color:#86EFAC}
:root[data-theme="dark"] .lg-btn-ghost{color:#EAF1EC}
:root[data-theme="dark"] .lg-page{color:#EAF1EC}
:root[data-theme="dark"] .lg-back{color:#86EFAC}
:root[data-theme="dark"] .mn-sponsor-h{color:#FDE68A}
:root[data-theme="dark"] .fm-btn-escrow{color:#EAF1EC}
:root[data-theme="dark"] .mn-cta-body b{color:#FDE68A}
:root[data-theme="dark"] .lo-box{color:#EAF1EC}
:root[data-theme="dark"] .lo-ghost{color:#EAF1EC}
:root[data-theme="dark"]{--leaf:#4F8A49}
:root[data-theme="dark"] .badge{border:1px solid rgba(255,255,255,.08)}
:root[data-theme="dark"] .badge-blue{background:#15233B;color:#93C5FD}:root[data-theme="dark"] .badge-yellow{background:#2E2510;color:#FCD34D}
:root[data-theme="dark"] .badge-green{background:#17301B;color:#9BE49B}:root[data-theme="dark"] .badge-red{background:#341A1A;color:#FCA5A5}
:root[data-theme="dark"] .badge-gray{background:#222E26;color:#B7C7BB}
:root[data-theme="dark"] .mn-sponsor-h,:root[data-theme="dark"] .mn-sponsor b{color:#FDE68A}
:root[data-theme="dark"] .al-title,:root[data-theme="dark"] .al-msg,:root[data-theme="dark"] .al-meta{color:#BFD7F5}

/* ---- account card, location, tracking map ---- */
.au-loc{margin:0 0 10px;text-align:left}.au-loc .au-btn-social{width:100%;justify-content:center;gap:8px}.au-loc .au-btn-social.done{border-color:#86EFAC;color:#86EFAC}
.au-loc-st{font-size:var(--fs-xs);opacity:.8;margin-top:6px;line-height:1.4}
.am-card{padding:16px;margin:12px 0 16px}.am-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.am-label{font-size:var(--fs-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em}.am-bal{font-size:var(--fs-4xl);font-weight:800;color:var(--text-primary)}
.am-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--border);font-size:var(--fs-md);color:var(--text-primary)}
.am-row small{display:block;font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:2px}.am-row>span{min-width:0;word-break:break-word}
.am-tick{font-size:var(--fs-xs);font-weight:700;color:var(--text-tertiary)}.am-tick.ok{color:#2F8F3A}:root[data-theme="dark"] .am-tick.ok{color:#86EFAC}
.am-hist{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}.am-h{display:flex;justify-content:space-between;font-size:var(--fs-sm);padding:4px 0;color:var(--text-secondary)}.am-h b.pos{color:#2F8F3A}
.am-chips{display:flex;gap:6px;flex-wrap:wrap}.mn-usewallet{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:var(--fs-md)}
#tk{position:fixed;inset:0;z-index:100001;display:flex;flex-direction:column;background:var(--bg-app);color:var(--text-primary)}
.tk-hd{display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 14px 12px;background:var(--soil,#1B2C1A);color:#fff;font-size:var(--fs-lg)}
#tk-map{flex:1;min-height:0}.tk-ft{padding:12px 14px max(14px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;font-size:var(--fs-md)}
.tk-ico div{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.4);border:2px solid #fff}
:root[data-theme="dark"] .leaflet-tile{filter:brightness(.72) contrast(1.1) saturate(.8)}

#tk-steps{display:flex;gap:4px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.tk-st{flex:1;text-align:center;font-size:var(--fs-xs);color:var(--text-tertiary)}.tk-st i{display:block;height:4px;border-radius:2px;background:var(--gray-200);margin-bottom:6px}
.tk-st.done i,.tk-st.now i{background:#2F8F3A}.tk-st.now{color:var(--text-primary);font-weight:700}.tk-st.done{color:var(--text-secondary)}
#tk-eta{font-size:var(--fs-xl);font-weight:800;color:var(--text-primary)}#tk-info{font-size:var(--fs-sm);color:var(--text-secondary)}
.tk-btns{display:flex;flex-direction:column;gap:8px}.tk-btns .btn{width:100%}

/* ---- toasts readable in both themes ---- */
.toast{background:#1F2D24;color:#F1F5F2;border:1px solid rgba(255,255,255,.12)}.toast-msg{color:inherit;font-size:var(--fs-md)}
:root[data-theme="dark"] .toast{background:#2B3D31;color:#F7FAF8;border-color:#4A6150;box-shadow:0 8px 24px rgba(0,0,0,.6)}
:root[data-theme="dark"] .toast-ico{color:#86EFAC}
/* ---- back button ---- */
#back-btn[hidden]{display:none}#back-btn{margin-right:6px}
/* ---- crop photos ---- */
.photo-upload-zone{position:relative;border:2px dashed var(--border);border-radius:var(--r-lg);padding:16px;text-align:center;color:var(--text-secondary);background:var(--gray-50)}
.photo-upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.puz-icon{color:var(--leaf);display:flex;justify-content:center;margin-bottom:6px}.puz-text{font-size:var(--fs-md);color:var(--text-primary)}.puz-sub{font-size:var(--fs-xs);margin-top:2px}
.photo-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.photo-preview-item{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border)}.photo-preview-item img{width:100%;height:100%;object-fit:cover;display:block}
.photo-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ph-cover{display:block;position:relative;width:100%;padding:0;border:0;border-radius:var(--r-md);overflow:hidden;margin-bottom:10px;background:var(--gray-100);cursor:pointer}
.ph-cover img{width:100%;height:150px;object-fit:cover;display:block}.ph-count{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;font-size:var(--fs-xs);padding:3px 8px;border-radius:var(--r-full)}
#ph-view{position:fixed;inset:0;z-index:100002;background:#080C09;display:flex;flex-direction:column;color:#fff;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.ph-x{align-self:flex-end;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ph-main{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.ph-main img{max-width:100%;max-height:100%;border-radius:var(--r-lg);object-fit:contain}
.ph-cap{text-align:center;font-size:var(--fs-md);padding:8px 0;opacity:.9}.ph-strip{display:flex;gap:8px;justify-content:center;overflow-x:auto;padding-bottom:4px}
.ph-strip button{width:56px;height:56px;border-radius:var(--r-md);overflow:hidden;border:2px solid transparent;padding:0;background:#000;opacity:.65;cursor:pointer;flex:none}.ph-strip button.on{border-color:#86EFAC;opacity:1}.ph-strip img{width:100%;height:100%;object-fit:cover}

.am-tabs{display:flex;gap:6px;margin:8px 0 12px}.am-tabs button{flex:1;padding:10px;border-radius:var(--r-md);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:var(--fs-md);font-weight:600;cursor:pointer}.am-tabs button.on{background:var(--leaf);border-color:var(--leaf);color:#fff}
.am-net{font-size:var(--fs-sm);color:var(--text-tertiary);margin:6px 0}.am-net.ok{color:#2F8F3A}:root[data-theme="dark"] .am-net.ok{color:#86EFAC}
.am-bank{margin-top:12px;padding:12px;border:1px dashed var(--border);border-radius:var(--r-md);font-size:var(--fs-md);display:flex;flex-direction:column;gap:2px}.am-bank small{color:var(--text-tertiary);margin-top:6px}.am-ref{font-family:var(--font-mono);letter-spacing:.06em}
.am-plan-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 4px}.am-plan-btns .btn{line-height:1.3;padding:10px}.am-plans{border-bottom:0}

/* ================= Login and sign-up: legible, scrollable, fits every screen ================= */
#auth-overlay{height:100vh;height:100dvh}
#auth-overlay .theme-toggle{z-index:30}
#au-cards-layer{top:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 64px) 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
#au-cards-layer>#au-login-card,#au-cards-layer>#au-reg-card{width:100%;max-width:440px;margin:auto auto 0}   /* sits at the bottom when there is room, scrolls when there is not */
.au-glass-card{background:rgba(7,20,9,.64);border-color:rgba(255,255,255,.3)}
.au-card-head h2{font-size:var(--fs-3xl)}.au-card-head p{font-size:var(--fs-sm);color:rgba(255,255,255,.88)}
.au-field input,.au-field select{font-size:16px;color:#fff;background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.36);min-height:48px}
.au-field input::placeholder{color:rgba(255,255,255,.82);opacity:1}
.au-field select:required:invalid,.au-field select{color:#fff}
.au-field input:focus,.au-field select:focus{border-color:#86EFAC;background:rgba(0,0,0,.42);box-shadow:0 0 0 3px rgba(134,239,172,.25)}
.au-field input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 100px rgba(10,30,14,.95) inset;caret-color:#fff}
.au-field-icon{color:rgba(255,255,255,.78)}
.au-role-tab{color:rgba(255,255,255,.86);font-size:var(--fs-sm)}.au-role-tab.active{color:#fff}
.au-remember-row span,.au-terms-row p{color:rgba(255,255,255,.94);font-size:var(--fs-sm)}
.au-switch-link,.au-or-divider span,.au-card-footer{color:rgba(255,255,255,.82);font-size:var(--fs-sm)}.au-card-footer strong{color:#fff}
.au-link,.au-switch-link b{color:#A7F3B8;text-decoration:underline;text-underline-offset:2px}
.au-form-err,.au-terms-err{color:#FFC1C1;font-weight:600;font-size:var(--fs-sm);line-height:1.4}
.au-loc-st{color:rgba(255,255,255,.9);font-size:var(--fs-sm);line-height:1.45}
.au-loc .au-btn-social{min-height:48px;font-size:var(--fs-md)}
.au-btn-social{color:#fff;border-color:rgba(255,255,255,.34)}
.au-btn-primary,.au-btn-social{min-height:48px}
@media (max-width:360px){
  .au-glass-card{padding:18px 14px 16px;border-radius:22px}
  .au-name-row{flex-wrap:wrap;gap:0}.au-name-row .au-field{flex:1 1 100%}
  .au-role-tab{font-size:var(--fs-xs);padding:7px 2px}
  #au-cards-layer{padding-left:10px;padding-right:10px}
}
@media (max-height:560px){#au-cards-layer{padding-top:calc(env(safe-area-inset-top,0px) + 52px)}.au-glass-card{padding:16px 16px 14px}.au-field{margin-bottom:8px}}
@media (min-width:700px){
  #au-cards-layer{padding-top:80px;padding-bottom:40px}
  #au-cards-layer>#au-login-card,#au-cards-layer>#au-reg-card{margin:auto;max-width:480px}
  .au-glass-card{padding:30px 28px 24px}
}

/* ============ Installed app (Home Screen) and iPhone zoom ============ */
/* With viewport-fit=cover the page draws under the status bar and notch. The header grows by the safe-area height so the
   menu and bell sit below the clock, on every phone, and stay normal size on devices without a notch. */
:root{--safe-top:env(safe-area-inset-top,0px);--hdr-base:60px;--header-h:calc(var(--hdr-base) + var(--safe-top))}
@media (max-width:768px){:root{--hdr-base:52px}}
@media (max-width:480px){:root{--hdr-base:50px}}
#header{box-sizing:border-box;padding-top:var(--safe-top)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
/* iOS zooms into any field smaller than 16px and stays zoomed. Every field is 16px on touch screens, whatever else sets its size. */
@media (hover:none) and (pointer:coarse),(max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{font-size:16px!important}
}

/* ---- status bar area: solid brand green, never a grey fade ----
   On the Home Screen app iOS tints the strip under the clock from the page background. The page background is the header colour,
   and the app itself carries the light/dark page colour, so the strip stays one solid green. */
html,body{background-color:#1B2C1A}
#app{background:var(--bg-app)}

/* ---- brand emblem: transparent logo in the header, menu and login splash ---- */
.logo-mark{width:44px;height:44px;background:none;box-shadow:none;border-radius:0}
.logo-mark img,#mobile-drawer .drawer-logo img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
#mobile-drawer .drawer-logo{width:44px;height:44px;background:none;border-radius:0}
.logo-wrap{min-width:48px}
#au-logo-img{display:block;width:96px;height:96px;margin:0 auto 10px;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}

/* On phones the header now carries the emblem, centred between the menu button and the message/bell buttons, just under the status bar. */
@media (max-width:768px){
  #header{position:relative}
  #header .logo-wrap{display:flex!important;position:absolute;left:50%;top:var(--safe-top);height:var(--hdr-base);transform:translateX(-50%);min-width:0;max-width:none;padding:0;border:0;align-items:center;justify-content:center;pointer-events:none}
  #header .logo-wrap>div:not(.logo-mark){display:none}
  .logo-mark{width:44px;height:44px}
}