:root {
  --ink:#122851;
  --muted:#687c99;
  --line:#dfe8f5;
  --primary:#0a469f;
  --bg:#f4f8fd;
  --nav:#061f58
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg)
}
a {
  color:var(--primary);
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  outline-offset:3px
}
button {
  cursor:pointer
}
.sidebar {
  width:248px;
  background:var(--nav);
  color:#d5e5ff;
  position:fixed;
  inset:0 auto 0 0;
  padding:33px 20px;
  display:flex;
  flex-direction:column
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:white;
  font-weight:750;
  font-size:23px;
  letter-spacing:-.6px;
  margin:0 9px 42px
}
.brand-logo {
  display:block;
  width:68px;
  height:68px;
  object-fit:contain;
  background:transparent;
  border-radius:0;
  flex-shrink:0;
}
.brand-copy { font-size:24px; letter-spacing:-.5px; }
.sidebar .brand { flex-direction:column; align-items:flex-start; gap:14px; margin:0 9px 25px; }
.sidebar .brand-logo { width:100%; height:auto; aspect-ratio:1; border-radius:12px; }
.sidebar .brand-copy { font-size:22px; }
.brand small {
  display:block;
  font-size:8px;
  font-weight:600;
  letter-spacing:2.8px;
  color:#a3c6f0
}
.nav-caption {
  font-size:10px;
  letter-spacing:1.7px;
  color:#8caedb;
  margin:22px 14px 13px
}
nav a {
  display:flex;
  gap:13px;
  align-items:center;
  color:#c6d9f5;
  padding:12px 14px;
  margin:6px 0;
  border-radius:8px;
  font-weight:500
}
nav a span {
  font-size:19px;
  width:21px
}
nav a:hover {
  background:#103574
}
nav a.active {
  background:#124886;
  color:#ffffff;
  border:1px solid #1fa4ef
}
.sidebar-bottom {
  margin-top:auto;
  font-size:11px;
  color:#c3d9f5;
  padding:20px 9px 0;
  border-top:1px solid #22467e
}
.sidebar-bottom small {
  display:block;
  font-size:10px;
  color:#8faed7;
  margin-top:10px
}
.live-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1fa4ef;
  margin-right:6px
}
.workspace {
  margin-left:248px
}
header {
  height:87px;
  background:white;
  border-bottom:1px solid var(--line);
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.breadcrumbs {
  color:var(--muted);
  font-size:12px
}
.breadcrumbs span {
  margin:0 14px;
  color:#c8d2d7
}
.breadcrumbs strong {
  color:var(--ink);
  font-weight:500
}
.user {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px
}
.user small {
  display:block;
  color:var(--muted);
  font-size:10px
}
.avatar {
  width:35px;
  height:35px;
  background:#edf3f5;
  border:1px solid #d9e2e6;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:650
}
.text-button {
  background:none;
  border:0;
  color:var(--muted);
  font-size:11px;
  padding:8px
}
main {
  max-width:1570px;
  margin:auto;
  padding:35px 40px 55px;
  min-height:calc(100vh - 142px)
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:27px
}
h1 {
  font-size:29px;
  line-height:1.3;
  font-weight:650;
  letter-spacing:-1px;
  margin:0 0 6px
}
h2 {
  font-size:16px;
  font-weight:650;
  letter-spacing:-.2px;
  margin:0 0 6px
}
h3 {
  font-size:14px;
  margin:0 0 10px
}
p {
  margin:5px 0 16px
}
.subtle {
  color:var(--muted);
  font-size:12px
}
.eyebrow {
  text-transform:uppercase;
  color:var(--primary);
  font-size:10px;
  letter-spacing:1.8px;
  font-weight:650;
  margin-bottom:10px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--primary);
  border:1px solid var(--primary);
  color:white;
  border-radius:7px;
  padding:10px 17px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap
}
.button:hover {
  filter:brightness(.95)
}
.button.secondary {
  background:white;
  border-color:#d9e2e6;
  color:var(--ink)
}
.button.danger {
  background:#fff4f1;
  border-color:#f0d3cb;
  color:#9b4336
}
.button.small {
  padding:5px 10px;
  font-size:11px
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:22px 0
}
.metric {
  background:white;
  border:1px solid var(--line);
  padding:21px 22px;
  border-radius:10px
}
.metric-label {
  font-size:11px;
  color:#617580;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px
}
.metric-value {
  font-size:28px;
  font-weight:650;
  letter-spacing:-1px;
  line-height:1.2
}
.metric-value small {
  font-size:11px;
  color:var(--muted);
  letter-spacing:0;
  margin-left:5px
}
.metric-foot {
  margin-top:13px;
  color:var(--muted);
  font-size:10px
}
.metric.accent {
  background:#eaf5ff;
  border-color:#c6e3fc
}
.metric.accent .metric-value {
  color:#084192
}
.card {
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:22px;
  overflow:hidden
}
.card-head {
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  gap:15px
}
.card-body {
  padding:24px
}
.card-head p {
  margin:3px 0 0
}
.split {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:22px
}
.two-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.table-wrap {
  overflow:auto
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap
}
th {
  font-size:10px;
  font-weight:550;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:#7e8f99;
  background:#fafbfc;
  padding:13px 23px;
  border-bottom:1px solid var(--line)
}
td {
  padding:16px 23px;
  border-bottom:1px solid #eef1f3;
  font-size:12px
}
tr:last-child td {
  border-bottom:0
}
td small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px
}
td strong {
  font-weight:600
}
.mono {
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:11px
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:5px;
  padding:4px 8px;
  background:#eef3f5;
  color:#5d7382;
  font-size:10px;
  white-space:nowrap
}
.badge[data-status="Delivered"],.badge[data-status="Ready for Dispatch"] {
  background:#e5f4ed;
  color:#21765c
}
.badge[data-status="Booked"],.badge[data-status="Received"] {
  background:#edf2fb;
  color:#526f9f
}
.badge[data-status="Dispatched"],.badge[data-status="In Transit"] {
  background:#f0edfb;
  color:#7962a0
}
.badge[data-status="Exception"],.badge[data-status="Cancelled"] {
  background:#fbefea;
  color:#ae6450
}
.empty {
  padding:45px 25px;
  color:var(--muted);
  text-align:center
}
.filters {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
  margin-bottom:22px
}
.filters label {
  min-width:140px
}
.filters input,.filters select {
  min-width:160px
}
.filters .search {
  flex:1;
  min-width:180px
}
.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.field-grid .full {
  grid-column:1/-1
}
label {
  font-size:11px;
  font-weight:550;
  display:block;
  color:#506572
}
input,select,textarea {
  background:white;
  border:1px solid #dce4e8;
  border-radius:6px;
  width:100%;
  padding:10px 12px;
  min-height:40px;
  margin-top:6px;
  color:var(--ink)
}
textarea {
  min-height:85px;
  resize:vertical
}
input:focus,select:focus,textarea:focus {
  outline:2px solid #a5d8fb;
  border-color:var(--primary)
}
.help {
  font-size:10px;
  color:var(--muted);
  margin:5px 0 0
}
.form-actions {
  margin-top:22px;
  padding-top:19px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px
}
.notice {
  padding:15px 19px;
  border-radius:8px;
  margin-bottom:22px;
  font-size:12px
}
.notice.success {
  background:#edf6ff;
  border:1px solid #c5dff9;
  color:#174e8c
}
.notice.error {
  background:#fff1ee;
  color:#984b3d;
  border:1px solid #f1d5cf
}
.notice ul {
  margin:5px 0;
  padding-left:20px
}
.intro-banner {
  padding:24px 27px;
  background:#eaf3ff;
  border:1px solid #d4e3fa;
  border-radius:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  margin:28px 0
}
.intro-banner h2 {
  font-size:17px
}
.intro-banner p {
  font-size:12px;
  color:#687d89;
  margin:5px 0 0
}
.summary-list {
  margin:0
}
.summary-list>div {
  display:flex;
  gap:20px;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.summary-list dt {
  color:var(--muted)
}
.summary-list dd {
  margin:0;
  text-align:right;
  max-width:65%;
  overflow-wrap:anywhere
}
.summary-list .total {
  font-size:17px;
  font-weight:650;
  color:var(--primary);
  border:0;
  padding-top:20px
}
.timeline {
  list-style:none;
  padding:0;
  margin:0
}
.timeline li {
  position:relative;
  padding:0 0 24px 24px;
  border-left:1px solid #d8e5f8;
  margin-left:6px
}
.timeline li:before {
  content:"";
  position:absolute;
  left:-5px;
  top:5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#1fa4ef;
  border:2px solid white
}
.timeline strong {
  font-size:12px
}
.timeline p {
  font-size:11px;
  margin:5px 0;
  color:#637581;
  white-space:pre-wrap
}
.timeline small {
  font-size:10px;
  color:var(--muted)
}
.quote {
  background:#eaf5ff;
  border:1px solid #c1def7;
  border-radius:8px;
  padding:22px;
  margin-top:22px
}
.quote strong {
  display:block;
  font-size:27px;
  color:var(--primary);
  margin-top:8px
}
.checklist {
  max-height:300px;
  overflow:auto
}
.checklist label {
  padding:12px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:10px;
  align-items:center
}
.checklist input[type=checkbox] {
  width:16px;
  min-height:16px;
  margin:0
}
.section-gap {
  margin-top:25px
}
.wrap {
  white-space:normal;
  overflow-wrap:anywhere
}
details {
  border-bottom:1px solid var(--line);
  padding:16px 22px
}
summary {
  cursor:pointer;
  font-size:12px;
  font-weight:600
}
details form {
  margin-top:20px
}
pre {
  white-space:pre-wrap;
  word-break:break-word;
  font-size:10px;
  background:#f6f8fa;
  padding:12px
}
.pagination {
  padding:18px 24px;
  display:flex;
  justify-content:space-between;
  font-size:11px
}
.pagination a {
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:5px
}
footer {
  padding:17px 40px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
  display:flex;
  justify-content:space-between
}
.login-body {
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#edf4fd
}
.login-shell {
  width:min(950px,94vw);
  display:grid;
  grid-template-columns:1fr 1fr;
  background:white;
  border:1px solid #dce5e7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 25px 80px #15333f0d
}
.login-story {
  background:#062467;
  padding:56px 42px;
  color:#dae9ff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:560px
}
.login-story .brand {
  margin:0 0 65px
}
.login-story h1 {
  font-size:37px;
  color:white;
  line-height:1.15
}
.login-story p {
  color:#b4ccef;
  font-size:13px;
  max-width:270px;
  margin-top:20px
}
.login-story small {
  font-size:10px;
  color:#9dbce8
}
.login-form {
  padding:60px 42px
}
.login-form h1 {
  font-size:25px
}
.login-form label {
  margin:20px 0
}
.login-form button {
  width:100%;
  margin-top:10px
}
.login-form .subtle {
  margin-top:24px
}
.print-page {
  max-width:900px;
  margin:30px auto;
  background:white;
  padding:35px
}
.print-head {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:2px solid #062467;
  padding-bottom:20px;
  margin-bottom:25px
}
.print-head h1 {
  font-size:24px
}
.print-toolbar {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:22px
}
.label-number {
  font:22px ui-monospace,monospace;
  letter-spacing:1px;
  border:1px dashed #9badb4;
  text-align:center;
  padding:20px;
  margin:22px 0
}
.print-page table {
  white-space:normal
}
.print-page td,.print-page th {
  padding:10px
}
.preserve {
  white-space:pre-wrap
}
.danger-text {
  color:#a05847
}
.right {
  text-align:right
}
.hide {
  display:none
}
@media(max-width:1150px) {
  .sidebar {
  width:210px
}
.workspace {
  margin-left:210px
}
main {
  padding:28px 25px
}
header {
  padding:0 25px
}
.metrics {
  gap:10px
}
.metric {
  padding:18px 16px
}
.metric-value {
  font-size:23px
}
.split {
  grid-template-columns:1fr
}
.two-columns {
  gap:15px
}

}
@media(max-width:780px) {
  .sidebar {
  position:static;
  width:100%;
  padding:14px 18px
}
.brand {
  font-size:20px;
  margin:0 0 12px
}
.brand small,.nav-caption,.sidebar-bottom {
  display:none
}
nav {
  display:flex;
  flex-wrap:wrap;
  gap:4px
}
nav a {
  margin:0;
  padding:7px;
  font-size:10px;
  gap:5px
}
nav a span {
  font-size:14px;
  width:auto
}
.workspace {
  margin:0
}
header {
  height:68px;
  padding:0 18px
}
.user .avatar {
  display:none
}
.breadcrumbs {
  font-size:10px
}
.user {
  font-size:10px;
  gap:6px
}
main {
  padding:24px 18px
}
.page-heading {
  align-items:start
}
h1 {
  font-size:24px
}
.metrics {
  grid-template-columns:1fr 1fr
}
.two-columns,.field-grid {
  grid-template-columns:1fr
}
.metric-value {
  font-size:24px
}
.card-body {
  padding:18px
}
.card-head {
  padding:16px 18px
}
.intro-banner {
  align-items:start
}
.intro-banner .button {
  white-space:normal
}
.login-shell {
  grid-template-columns:1fr;
  max-width:450px
}
.login-story {
  min-height:0;
  padding:28px
}
.login-story .brand {
  margin-bottom:20px
}
.login-story h1 {
  font-size:25px
}
.login-story p,.login-story small {
  display:none
}
.login-form {
  padding:30px
}
.print-page {
  margin:10px;
  padding:20px
}
footer {
  padding:14px 18px
}
footer span {
  display:none
}

}
@media print {
  body {
  background:white;
  color:black
}
.print-toolbar,.sidebar,header,footer {
  display:none!important
}
.print-page {
  margin:0;
  max-width:none;
  padding:0
}
.card {
  break-inside:avoid
}
.print-page table {
  font-size:10px
}
.print-page .two-columns {
  display:grid;
  grid-template-columns:1fr 1fr
}
@page {
  size:A4;
  margin:15mm
}

}

/* Standard's supplied sky-blue and navy identity. */
:root { --brand-sky:#1fa4ef; --brand-navy:#062467; }
.login-story { background:linear-gradient(145deg, #062467 0%, #0a347d 100%); }
.login-story .brand { align-items:center; gap:20px; margin-bottom:35px; }
.login-story .brand-logo { width:124px; height:124px; border-radius:14px; }
.login-story .brand-copy { font-size:28px; }
.login-story .brand small { font-size:9px; letter-spacing:1.6px; color:#c9e4ff; }
.login-story .eyebrow { color:#76cbff; }
nav a.active { box-shadow:inset 3px 0 0 var(--brand-sky); }
.button { box-shadow:0 3px 8px #0624670d; }
.print-company { display:flex; gap:20px; align-items:center; }
.print-logo { width:110px; height:110px; object-fit:contain; flex-shrink:0; }
@media(max-width:1150px) and (min-width:781px) {
  .sidebar .brand-logo { max-width:150px; }
}
@media(max-width:780px) {
  .sidebar .brand { flex-direction:row; align-items:center; margin:0 0 14px; gap:14px; }
  .sidebar .brand-logo { width:72px; height:72px; }
  .sidebar .brand small { display:block; font-size:8px; letter-spacing:1.5px; }
  .login-story .brand-logo { width:82px; height:82px; }
  .login-story .brand small { display:block; }
  .login-story .brand { margin-bottom:22px; }
  .print-company { gap:10px; }
  .print-logo { width:80px; height:80px; }
}
@media print {
  .print-logo { width:26mm; height:26mm; }
  .print-head { border-color:#062467; }
}

/* Keep the extracted navy emblem legible without a white image tile. */
.sidebar { background:#edf5ff; border-right:1px solid #d6e4f8; color:#062467; }
.sidebar .brand { color:#062467; }
.sidebar .brand-logo { background:transparent; border-radius:0; }
.sidebar .brand small { color:#506d9d; }
.sidebar .nav-caption { color:#647da5; }
.sidebar nav a { color:#153d78; }
.sidebar nav a:hover { background:#dcecff; }
.sidebar nav a.active { background:#0a469f; color:white; border-color:#0a469f; }
.sidebar-bottom { color:#45628e; border-color:#ceddf2; }
.sidebar-bottom small { color:#647da5; }
.login-story { background:linear-gradient(145deg,#edf7ff,#d9ebff); color:#062467; }
.login-story .brand, .login-story h1 { color:#062467; }
.login-story .brand-logo { background:transparent; border-radius:0; }
.login-story .brand small, .login-story p, .login-story small { color:#496b9a; }
.login-story .eyebrow { color:#0a469f; }

.language-switch { display:inline-flex; gap:3px; padding:3px; border:1px solid #d3e2f5; border-radius:8px; background:#f3f7fd; flex-shrink:0; }
.language-switch button { width:auto; margin:0; padding:6px 10px; min-height:32px; border:0; border-radius:5px; background:transparent; color:#3e5b86; font-size:11px; line-height:1.6; }
.language-switch button[aria-pressed="true"] { background:#0a469f; color:white; }
.login-form>.language-switch { display:flex; width:max-content; margin:0 0 24px auto; }
html[lang="my"] body { font-family:"Myanmar Sangam MN","Noto Sans Myanmar","Myanmar Text",sans-serif; line-height:1.85; }
html[lang="my"] h1 { font-size:25px; line-height:1.65; letter-spacing:0; }
html[lang="my"] h2,html[lang="my"] h3 { line-height:1.8; letter-spacing:0; }
html[lang="my"] .eyebrow,html[lang="my"] .nav-caption,html[lang="my"] th { letter-spacing:0; }
html[lang="my"] .brand-copy { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
html[lang="my"] .brand small { letter-spacing:0; font-size:10px; }
html[lang="my"] nav a { font-size:12px; align-items:flex-start; }
html[lang="my"] .button { white-space:normal; line-height:1.8; }
html[lang="my"] .metric-value { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
html[lang="my"] .sidebar { overflow-y:auto; }
html[lang="my"] .sidebar-bottom { padding-top:15px; }
@media(max-width:780px) {
 .user { flex-wrap:wrap; justify-content:flex-end; }
 header { height:auto; min-height:78px; padding-top:12px; padding-bottom:12px; gap:12px; }
 .language-switch button { padding:5px 7px; font-size:10px; }
 html[lang="my"] nav a { font-size:10px; }
 html[lang="my"] .page-heading { flex-wrap:wrap; }
 html[lang="my"] .card-head { flex-wrap:wrap; }
 html[lang="my"] .metric-label { min-height:40px; }
}

html[lang="my"] .subtle { font-size:13px; }
html[lang="my"] label,html[lang="my"] td { font-size:13px; }
html[lang="my"] .metric-label { font-size:12px; }
html[lang="my"] .metric-foot,html[lang="my"] .help,html[lang="my"] th { font-size:11px; }
html[lang="my"] .intro-banner p { font-size:13px; }

.storage-entry-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
}
.storage-entry-actions .button { white-space: normal; max-width: 220px; }

.parcel-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.parcel-photo-grid:empty { display: none; }
.parcel-photo-grid img { display: block; width: 100%; height: 160px; object-fit: contain; border-radius: 12px; background: var(--line); }
.parcel-photo-grid span { display: block; margin-top: 8px; }
input[type="file"] { max-width: 100%; }

.simple-flow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.simple-flow span { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; }
.simple-flow .current { background: #1d5dab; color: #fff; border-color: #1d5dab; }
.workflow-details { margin: 20px 0; }
.workflow-details > summary { padding: 16px; font-weight: 650; cursor: pointer; }
.workflow-check { display: flex; align-items: center; gap: 10px; }
.workflow-check input { width: auto; }

.nav-more { margin-top: 14px; border: 0; }
.nav-more > summary { padding: 14px; cursor: pointer; font-weight: 600; }
.queue-section > summary { padding: 22px; cursor: pointer; font-size: 18px; font-weight: 650; }
.queue-section > summary .badge { margin-left: 10px; }
.queue-section .card-head:empty { display: none; }

.payment-details [hidden] { display: none !important; }

.photo-preview-open{border:0;padding:0;background:transparent;cursor:zoom-in}.photo-viewer{width:min(1100px,94vw);max-height:94vh;border:1px solid var(--border,#cbd5e1);border-radius:20px;padding:18px;background:var(--surface,#fff);color:var(--text,#172554)}.photo-viewer::backdrop{background:rgba(5,10,25,.8);backdrop-filter:blur(12px)}.photo-viewer-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.photo-viewer-toolbar span{flex:1;overflow-wrap:anywhere}.photo-viewer>img{display:block;width:100%;max-height:75vh;object-fit:contain}.parcel-photo-grid [data-photo-open]{cursor:zoom-in}

/* Shared Home branch selection and parcel journey. */
.home-branch-picker {
    display:flex;
    gap:12px;
    margin:0 0 26px;
    flex-wrap:wrap}
.home-branch-picker a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
    border:2px solid var(--border,#c8d7ec);
    border-radius:16px;
    background:var(--surface,rgba(255,255,255,.12));
    color:inherit;
    text-decoration:none}
.home-branch-picker strong {
    font-size:21px}
.home-branch-picker a[aria-current=page] {
    background:#1d5dab;
    color:#fff;
    border-color:#1d5dab}
.parcel-progress {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    list-style:none;
    padding:12px 0;
    margin:12px 0;
    isolation:isolate}
.parcel-progress li {
    position:relative;
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:10px;
    text-align:center;
    font-weight:700}
.parcel-progress li:not(:first-child)::before {
    content:"";
    position:absolute;
    left:-50%;
    right:50%;
    top:19px;
    height:3px;
    background:#9ab6db;
    z-index:-1}
.parcel-progress li.is-complete::before,.parcel-progress li.is-current::before {
    background:#159ef0}
.parcel-progress-dot {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    box-sizing:border-box;
    border:2px solid #7ca8d8;
    border-radius:50%;
    background:var(--surface,#fff);
    color:var(--text,#24456b);
    font-size:19px}
.is-complete .parcel-progress-dot,.is-current .parcel-progress-dot {
    background:#079cf0;
    color:white;
    border-color:#079cf0}
.is-current .parcel-progress-dot {
    box-shadow:0 0 0 5px rgba(21,158,240,.22)}
.parcel-progress-label {
    font-size:15px;
    line-height:1.65}
.parcel-progress-compact {
    min-width:280px;
    margin:14px 0 2px}
.parcel-progress-compact .parcel-progress-dot {
    width:27px;
    height:27px;
    font-size:14px}
.parcel-progress-compact li:not(:first-child)::before {
    top:12px}
.parcel-progress-compact .parcel-progress-label {
    font-size:13px}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0}

.home-branch-picker a span { width:auto; color:inherit; font-size:16px; white-space:nowrap; }
.home-branch-picker a { align-items:center !important; }
.parcel-progress-dot { background:var(--card,#fff); color:var(--ink,#24456b); }
.parcel-progress .is-complete .parcel-progress-dot,.parcel-progress .is-current .parcel-progress-dot { background:#079cf0; color:white; }

/* All selected photos stay visible, with individual removal controls. */
.photo-selection-toolbar:not(.hide) { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.photo-preview-item { min-width:0; position:relative; }
.photo-preview-item .photo-preview-open { display:block; width:100%; }
.photo-preview-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.photo-preview-remove { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface,#fff); color:var(--ink); box-shadow:0 2px 8px #263b4d18; font-size:22px; line-height:1; }
.photo-preview-remove:hover { background:var(--rose-soft,#f3e6e9); color:var(--rose-ink,#903a51); }