/* Shared component layer. Values come from tokens.css only (DESIGN_SYSTEM.md §16). */
.ce-icon { flex: none; }
.ce-muted { color: var(--text-secondary); }
.ce-stack { display: grid; gap: var(--space-4); min-width: 0; }
.ce-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ce-row > * { flex: 1 1 140px; }
.ce-inline-notice { margin-bottom: var(--space-3); padding: var(--space-3); color: var(--status-info); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--status-info-soft); font-size: var(--text-small); }
.ce-inline-notice[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Buttons */
.ce-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-4); color: var(--brand-primary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-card); font-size: var(--text-small); font-weight: 700; transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.ce-btn:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.ce-btn:active { transform: translateY(1px); }
.ce-btn:disabled { color: var(--text-disabled); border-color: var(--border-default); background: var(--surface-disabled); cursor: not-allowed; }
.ce-btn-primary { color: var(--brand-on-primary); border-color: transparent; background: var(--brand-primary); }
.ce-btn-primary:hover { background: var(--brand-primary-hover); border-color: transparent; }
.ce-btn-ghost { border-color: transparent; background: transparent; }
.ce-btn-danger { color: var(--status-danger); border-color: var(--status-danger); background: var(--status-danger-soft); }
.ce-btn-danger:hover { background: var(--status-danger-soft); border-color: var(--status-danger); }
.ce-btn-full { width: 100%; }
.ce-btn-lg { min-height: 52px; font-size: var(--text-body); }
.ce-btn.is-busy { position: relative; color: transparent; }
.ce-btn.is-busy > * { visibility: hidden; }
.ce-btn.is-busy::after { position: absolute; width: 18px; height: 18px; content: ''; border: 2px solid var(--brand-primary); border-top-color: transparent; border-radius: 50%; animation: ce-spin .7s linear infinite; }
.ce-btn-primary.is-busy::after { border-color: var(--brand-on-primary); border-top-color: transparent; }
@keyframes ce-spin { to { transform: rotate(360deg); } }
.ce-icon-btn { display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height); color: var(--text-secondary); border: 0; border-radius: var(--radius-control); background: transparent; }
.ce-icon-btn:hover { background: var(--surface-section); }

/* Badges and tones */
.ce-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 700; }
.ce-tone-success { color: var(--status-success); background: var(--status-success-soft); }
.ce-tone-warning { color: var(--status-warning); background: var(--status-warning-soft); }
.ce-tone-danger { color: var(--status-danger); background: var(--status-danger-soft); }
.ce-tone-info { color: var(--status-info); background: var(--status-info-soft); }
.ce-tone-neutral { color: var(--status-neutral); background: var(--surface-section); }
.ce-tone-brand { color: var(--brand-primary); background: var(--brand-primary-soft); }

/* Forms */
.ce-form { display: grid; gap: var(--space-3); }
.ce-field { display: grid; gap: var(--space-2); min-width: 0; }
.ce-field label { margin: 0; font-size: var(--text-small); font-weight: 700; }
.ce-required { color: var(--text-tertiary); font-weight: 500; }
.ce-field input, .ce-field select, .ce-field textarea { width: 100%; min-height: var(--control-height); padding: var(--space-3); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-card); font: inherit; }
.ce-field textarea { resize: vertical; }
.ce-field input:focus, .ce-field select:focus, .ce-field textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--brand-primary-soft); outline: 0; }
.ce-field [aria-invalid='true'] { border-color: var(--status-danger); }
.ce-hint { color: var(--text-tertiary); }
.ce-field-error { min-height: 0; color: var(--status-danger); font-weight: 600; }

/* Cards and data */
.ce-card { min-width: 0; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-subtle); }
.ce-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; }
.ce-card-head h3 { margin: 0; font-size: var(--heading-card); letter-spacing: -.02em; }
.ce-card-body { display: grid; gap: var(--space-3); padding: var(--space-4); }
.ce-card-foot { padding: 0 var(--space-4) var(--space-4); }
.ce-kv { display: grid; gap: var(--space-2); margin: 0; }
.ce-kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-default); }
.ce-kv > div:last-child { padding-bottom: 0; border-bottom: 0; }
.ce-kv dt { color: var(--text-secondary); }
.ce-kv dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.ce-stat { display: grid; gap: var(--space-1); }
.ce-stat-label { color: var(--text-tertiary); font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ce-stat-value { font-size: var(--heading-card); letter-spacing: -.02em; }
.ce-progress { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-section); }
.ce-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-accent); transition: width var(--motion-fast); }
.ce-list { display: grid; gap: var(--space-2); }
.ce-list-item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-control); }
.ce-list-item > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.ce-skeleton { display: grid; gap: var(--space-2); }
.ce-skeleton-line { height: 14px; border-radius: var(--radius-control); background: linear-gradient(90deg, var(--surface-section), var(--surface-disabled), var(--surface-section)); background-size: 200% 100%; animation: ce-shimmer 1.2s linear infinite; }
@keyframes ce-shimmer { to { background-position: -200% 0; } }
.ce-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); color: var(--text-secondary); text-align: center; }
.ce-empty strong { color: var(--text-primary); }
.ce-empty p { max-width: 36ch; margin: 0; }
.ce-empty-error { color: var(--status-danger); }

/* Toasts and dialogs */
.ce-toasts { position: fixed; z-index: 60; right: var(--space-4); bottom: calc(var(--bottom-nav-height) + var(--space-4)); left: var(--space-4); display: grid; justify-items: end; gap: var(--space-2); pointer-events: none; }
.ce-toast { display: flex; align-items: center; gap: var(--space-2); max-width: 420px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); font-weight: 600; pointer-events: auto; }
.ce-dialog { width: min(92vw, 480px); max-height: 90vh; padding: 0; color: var(--text-primary); border: 0; border-radius: var(--radius-container); background: var(--surface-overlay); box-shadow: var(--shadow-overlay); }
.ce-dialog::backdrop { background: var(--backdrop); }
.ce-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; }
.ce-dialog-head h2 { margin: 0; font-size: var(--heading-card); }
.ce-dialog-body { display: grid; gap: var(--space-3); max-height: 66vh; padding: var(--space-4); overflow-y: auto; }
.ce-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.ce-dialog-sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; border-radius: var(--radius-container) var(--radius-container) 0 0; }
.ce-dialog-drawer { position: fixed; inset: 0 0 0 auto; width: min(100vw, 480px); max-height: none; height: 100%; margin: 0; border-radius: var(--radius-container) 0 0 var(--radius-container); }
.ce-dialog-drawer[open], .ce-dialog-sheet[open] { display: flex; flex-direction: column; }
.ce-dialog-drawer .ce-dialog-body { flex: 1; max-height: none; }
.ce-dialog-sheet .ce-dialog-body { max-height: 70vh; }

/* Auth pages (login, registration): centered card, legacy layout with Cak Ed tokens */
.ce-auth { display: grid; align-content: start; justify-items: center; gap: var(--space-4); min-height: 100vh; padding: var(--space-6) var(--space-4); background: var(--surface-page); }
.ce-auth-card { width: min(100%, 440px); overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-container); background: var(--surface-card); box-shadow: var(--shadow-subtle); }
.ce-auth-head { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-4); text-align: center; border-bottom: 1px solid var(--border-default); }
.ce-auth-head h1 { margin: var(--space-2) 0 0; color: var(--brand-primary); font-size: var(--heading-card); letter-spacing: -.01em; }
.ce-auth-head p { max-width: 34ch; margin: 0; color: var(--text-secondary); font-size: var(--text-small); }
.ce-auth-body { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-4); background: var(--surface-page); }
.ce-auth-foot { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-default); text-align: center; }
.ce-auth-foot p { margin: 0; color: var(--text-secondary); font-size: var(--text-small); }
.ce-auth-note { max-width: 440px; margin: 0; color: var(--text-tertiary); font-size: var(--text-caption); text-align: center; }
.ce-brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.ce-brand-mark { display: block; flex: none; width: 44px; height: 44px; color: transparent; font-size: 0; background: var(--brand-primary) url('/brand/logo-mark.png') center / cover no-repeat; border-radius: var(--radius-card); }
.ce-brand-name { display: grid; color: var(--brand-primary); font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.ce-brand-name small { color: var(--text-tertiary); font-size: 10px; font-weight: 600; letter-spacing: .32em; }

/* Driver shell: mobile-first, bottom navigation */
.ce-shell-driver { max-width: 480px; min-height: 100vh; margin: 0 auto; background: var(--surface-page); }
.ce-driver-content { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-4) var(--space-4) calc(var(--bottom-nav-height) + var(--space-6)); }
.ce-bottom-nav { position: fixed; z-index: var(--layer-sticky); right: 0; bottom: 0; left: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--bottom-nav-height); max-width: 480px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--border-default); background: var(--surface-card); }
.ce-nav-item { display: grid; place-items: center; align-content: center; gap: var(--space-1); min-height: 56px; color: var(--text-tertiary); border: 0; background: transparent; font-size: var(--text-caption); font-weight: 600; }
.ce-nav-item:hover { color: var(--brand-primary); }
.ce-nav-item.is-active { color: var(--brand-primary); font-weight: 800; }

/* Admin shell: sidebar on wide screens, bottom navigation on phones */
.ce-shell-admin { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; background: var(--surface-page); }
.ce-sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: var(--space-4); height: 100vh; padding: var(--space-4); overflow-y: auto; border-right: 1px solid var(--border-default); background: var(--surface-card); }
.ce-sidebar.is-collapsed { width: var(--sidebar-collapsed); }
.ce-sidebar.is-collapsed .ce-sidebar-item span, .ce-sidebar.is-collapsed .ce-sidebar-label, .ce-sidebar.is-collapsed .ce-brand-name { display: none; }
.ce-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ce-sidebar-nav { display: grid; gap: var(--space-1); }
.ce-sidebar-label { margin: var(--space-3) 0 var(--space-1); color: var(--text-tertiary); font-size: var(--text-caption); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ce-sidebar-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: 0 var(--space-3); color: var(--text-secondary); border: 0; border-radius: var(--radius-control); background: transparent; font-size: var(--text-body); font-weight: 600; text-align: left; }
.ce-sidebar-item:hover { background: var(--surface-section); }
.ce-sidebar-item.is-active { color: var(--brand-primary); background: var(--brand-primary-soft); font-weight: 800; }
.ce-admin-content { display: grid; align-content: start; gap: var(--space-4); min-width: 0; padding: var(--space-6); }
.ce-bottom-nav-admin { display: none; }
.ce-admin-body { display: grid; align-content: start; gap: var(--space-4); min-width: 0; }
.ce-breadcrumb { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-small); }
.ce-breadcrumb strong { color: var(--text-primary); font-weight: 700; }
.ce-breadcrumb-sep { opacity: .6; }
.ce-breadcrumb:empty { display: none; }
@media (max-width: 767px) {
  .ce-shell-admin { display: block; }
  .ce-sidebar { display: none; }
  .ce-breadcrumb { display: none; }
  .ce-admin-content { padding: var(--space-4) var(--space-4) calc(var(--bottom-nav-height) + var(--space-6)); }
  .ce-bottom-nav-admin { display: grid; max-width: none; }
}

/* Page furniture and tabs */
.ce-page-title { margin: 0; font-size: var(--heading-section); letter-spacing: -.03em; }
.ce-section-title { margin: var(--space-2) 0 0; font-size: var(--heading-card); letter-spacing: -.02em; }
.ce-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-control); background: var(--surface-section); }
.ce-tab { flex: 1 1 auto; min-height: var(--control-height); padding: 0 var(--space-3); color: var(--text-secondary); border: 0; border-radius: var(--radius-control); background: transparent; font-size: var(--text-small); font-weight: 700; }
.ce-tab[aria-pressed='true'] { color: var(--brand-primary); background: var(--surface-card); box-shadow: var(--shadow-subtle); }
.ce-profile-head { display: flex; align-items: center; gap: var(--space-4); }
.ce-avatar { display: grid; flex: none; place-items: center; width: 56px; height: 56px; color: var(--brand-on-primary); border-radius: 50%; background: var(--brand-primary); font-weight: 800; }
.ce-auth-wide .ce-auth-card { width: min(100%, 560px); }
.ce-auth-body .ce-card { box-shadow: none; }
.ce-photo-preview { max-width: 100%; max-height: 180px; border: 1px solid var(--border-default); border-radius: var(--radius-control); object-fit: cover; }
.ce-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.ce-doc { display: grid; gap: var(--space-2); margin: 0; }
.ce-doc figcaption { color: var(--text-secondary); font-size: var(--text-caption); font-weight: 600; }
.ce-doc-frame { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-section); }
.ce-doc-frame img { width: 100%; height: 100%; object-fit: cover; }
.ce-doc-frame a { display: block; width: 100%; height: 100%; }
.ce-doc-missing { color: var(--status-danger); font-size: var(--text-caption); text-align: center; }

.ce-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ce-more-list { display: grid; gap: var(--space-1); }
.ce-more-list .ce-sidebar-item { width: 100%; }

/* Driver Beranda: hero with the BID switch */
.ce-hero { display: grid; gap: var(--space-4); padding: var(--space-4); color: var(--text-inverse); border-radius: var(--radius-container); background: linear-gradient(160deg, var(--brand-primary), var(--surface-inverse)); box-shadow: var(--shadow-subtle); }
.ce-hero-top { display: flex; align-items: center; gap: var(--space-3); }
.ce-hero-name { margin: 0; font-size: var(--heading-card); letter-spacing: -.02em; }
.ce-hero-code { display: inline-block; margin-left: var(--space-2); padding: var(--space-1) var(--space-2); color: var(--brand-on-accent); border-radius: var(--radius-pill); background: var(--brand-accent); font-size: var(--text-caption); font-weight: 800; }
.ce-hero small { display: block; opacity: .85; }
.ce-avatar-onbrand { color: var(--brand-primary); background: var(--surface-card); }
.ce-hero-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid rgb(255 255 255 / 22%); font-size: var(--text-small); font-weight: 700; }
.ce-hero-stats span { display: inline-flex; align-items: center; gap: var(--space-2); }
.ce-hero-panel { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4); text-align: center; border-radius: var(--radius-card); background: rgb(255 255 255 / 12%); }
.ce-hero-label { font-size: var(--text-caption); font-weight: 800; letter-spacing: .12em; }
.ce-hero-switch { display: flex; align-items: center; gap: var(--space-3); font-size: var(--heading-card); }
.ce-hero-note, .ce-hero-orders { margin: 0; font-size: var(--text-caption); }
.ce-hero-note { display: inline-flex; align-items: center; gap: var(--space-2); }
.ce-hero-orders { margin-left: var(--space-2); }
.ce-switch { position: relative; flex: none; width: 64px; height: var(--control-height); border: 0; border-radius: var(--radius-pill); background: rgb(255 255 255 / 30%); transition: background var(--motion-fast); }
.ce-switch[aria-checked='true'] { background: var(--brand-accent); }
.ce-switch-knob { position: absolute; top: 4px; left: 4px; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-card); box-shadow: var(--shadow-subtle); transition: transform var(--motion-fast); }
.ce-switch[aria-checked='true'] .ce-switch-knob { transform: translateX(20px); }
.ce-switch:focus-visible { outline: 3px solid var(--text-inverse); outline-offset: 3px; }
.ce-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ce-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-3); text-align: center; border-radius: var(--radius-control); background: var(--surface-section); }
.ce-times small { display: block; color: var(--text-tertiary); font-size: var(--text-caption); font-weight: 800; letter-spacing: .06em; }
.ce-times strong { font-size: var(--heading-card); }
.ce-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ce-quick-item { display: grid; place-items: center; gap: var(--space-1); min-height: 76px; color: var(--brand-primary); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-card); font-size: var(--text-small); font-weight: 700; }
.ce-quick-item:hover { background: var(--brand-primary-soft); }
.ce-camera-frame { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-control); background: var(--surface-inverse); }
.ce-camera { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
img.ce-camera { transform: none; }
.ce-location { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--text-secondary); font-size: var(--text-small); }
.ce-thumb { flex: 0 0 96px; }
.ce-btn small { display: block; font-weight: 500; }

.ce-hero small, .ce-btn small { color: inherit; }
.ce-btn-primary small { opacity: .9; }

.ce-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ce-filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.ce-list-item .ce-kv { margin-top: var(--space-2); }

/* Driver bottom navigation with centre action, order screens */
.ce-bottom-nav-driver { grid-template-columns: 1fr 1fr 84px 1fr 1fr; }
.ce-fab-slot { position: relative; display: grid; place-items: center; }
.ce-fab { position: absolute; top: -22px; display: grid; place-items: center; width: 58px; height: 58px; color: var(--brand-on-primary); border: 4px solid var(--surface-card); border-radius: 50%; background: var(--brand-primary); box-shadow: var(--shadow-overlay); }
.ce-fab:hover, .ce-fab.is-active { background: var(--brand-primary-hover); }
.ce-fab:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
.ce-money { font-size: var(--heading-card); letter-spacing: -.02em; }
.ce-order-card .ce-row-between { align-items: flex-start; }
.ce-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ce-checks { display: grid; gap: var(--space-2); }
.ce-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-control); font-weight: 600; }
.ce-check input { width: 20px; min-height: 20px; margin: 0; accent-color: var(--brand-primary); }
.ce-quote { display: grid; gap: var(--space-2); }
.ce-quote-line, .ce-quote-total { display: flex; justify-content: space-between; gap: var(--space-3); }
.ce-quote-total { padding-top: var(--space-2); border-top: 1px solid var(--border-default); font-size: var(--heading-card); }
.ce-quote-error { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--status-danger); font-weight: 600; }
.ce-success { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4); color: var(--status-success); text-align: center; }
.ce-share { display: grid; gap: var(--space-3); }
.ce-link { display: block; padding: var(--space-3); overflow-wrap: anywhere; border: 1px dashed var(--border-strong); border-radius: var(--radius-control); background: var(--brand-primary-soft); font-size: var(--text-small); }
.ce-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ce-step { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.ce-step:last-child { padding-bottom: 0; }
.ce-step::before { position: absolute; top: 20px; bottom: 0; left: 9px; width: 2px; content: ''; background: var(--border-default); }
.ce-step:last-child::before { display: none; }
.ce-step-dot { display: grid; flex: none; place-items: center; width: 20px; height: 20px; color: var(--brand-on-primary); border: 2px solid var(--border-default); border-radius: 50%; background: var(--surface-card); }
.ce-step.is-done .ce-step-dot { border-color: var(--status-success); background: var(--status-success); }
.ce-step.is-done::before { background: var(--status-success); }
.ce-step.is-current .ce-step-dot { border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--brand-primary-soft); }
.ce-step.is-idle { color: var(--text-tertiary); }
.ce-step small { display: block; color: var(--text-secondary); }
.ce-has-sticky { padding-bottom: 96px; }
.ce-sticky-action { position: fixed; z-index: calc(var(--layer-sticky) + 1); right: 0; bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); left: 0; display: grid; gap: var(--space-1); max-width: 480px; margin: 0 auto; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-default); background: var(--surface-card); box-shadow: var(--shadow-overlay); }
a.ce-btn { text-decoration: none; }

/* Customer portal (public page, mobile first) */
.ce-portal-head { display: flex; justify-content: center; padding: var(--space-4); background: var(--surface-card); border-bottom: 1px solid var(--border-default); }
.ce-portal { width: min(100%, 560px); margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-8); }
.ce-stars { display: flex; gap: var(--space-1); }
.ce-star { display: grid; place-items: center; width: 48px; height: 48px; color: var(--text-tertiary); border: 0; border-radius: var(--radius-control); background: transparent; }
.ce-star.is-on { color: var(--brand-accent); }
.ce-star:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
.ce-review { width: 100%; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-control); font: inherit; resize: vertical; }

/* Driver balance and finance (M6) */
.ce-balance { justify-items: start; }
.ce-balance-value { font-size: 2.25rem; line-height: 1.1; letter-spacing: -.03em; }
.ce-balance-plain { display: block; margin-bottom: var(--space-3); color: var(--text-primary); }
.ce-amount-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ce-amount-chips .ce-btn { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-small); }
.ce-ledger-row { align-items: center; }
.ce-ledger-amount { display: grid; gap: 4px; justify-items: end; text-align: right; }
.ce-money-in { color: var(--status-success); }
.ce-money-out { color: var(--status-danger); }
.ce-wallet-strip { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); color: var(--text-primary); text-align: left; border: 1px solid var(--border-default); border-radius: var(--radius-container); background: var(--surface-card); font: inherit; }
.ce-wallet-strip > span { display: grid; flex: 1; }
.ce-wallet-strip small { color: var(--text-tertiary); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ce-wallet-strip.is-low { border-color: var(--status-warning); }

/* Admin dashboard, comparisons, branding (M7+) */
.ce-queue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.ce-queue { display: grid; justify-items: start; gap: var(--space-1); padding: var(--space-3); color: var(--text-primary); text-align: left; border: 1px solid var(--border-default); border-radius: var(--radius-container); background: var(--surface-card); font: inherit; }
.ce-queue strong { font-size: var(--heading-card); }
.ce-queue span { color: var(--text-secondary); font-size: var(--text-small); }
.ce-queue.is-pending { border-color: var(--status-warning); background: var(--status-warning-soft); }
.ce-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-4); }
.ce-trend-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-3); font-size: var(--text-small); }
.ce-compare { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.ce-compare small { color: var(--text-tertiary); text-decoration: line-through; }
.ce-compare span { color: var(--status-success); font-weight: 700; }
.ce-brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius-control); }
.ce-portal-footer { margin-top: var(--space-4); text-align: center; }

/* Offline banner (PWA) */
.ce-offline { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: var(--space-2) var(--space-4); color: var(--text-inverse); text-align: center; background: var(--surface-inverse); font-size: var(--text-small); font-weight: 700; }

/* Type scale: <small> would otherwise fall back to the browser's 11px, below the caption token. */
small { font-size: var(--text-small); }

/* Bulk import */
.ce-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ce-import-card { align-items: center; }
.ce-import-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ce-import-summary { margin: 0; font-weight: 700; }
.ce-import-error { color: var(--status-danger); }
.ce-inline-notice-danger { color: var(--status-danger); background: var(--status-danger-soft); }
.ce-dialog-wide { width: min(94vw, 760px); }
@media (max-width: 767px) { .ce-import-actions { width: 100%; } .ce-import-actions .ce-btn { flex: 1 1 140px; } }

/* Operations: Live Tracking and Dashboard Operasional */
.ce-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.ce-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-4); align-items: start; }
.ce-split-even { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
.ce-inline-notice-warning { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--status-warning); background: var(--status-warning-soft); }
a.ce-btn { text-decoration: none; }
.ce-map { display: block; width: 100%; height: auto; border-radius: var(--radius-control); }
.ce-map-bg { fill: var(--brand-primary-soft); }
.ce-map-ring { fill: none; stroke: var(--border-default); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ce-map-fence { fill: none; stroke: var(--brand-primary); stroke-width: 2; stroke-dasharray: 8 5; opacity: .7; }
.ce-map-center { fill: var(--brand-primary); }
.ce-map-label { fill: var(--text-secondary); font-size: 11px; font-weight: 700; }
.ce-map-empty { fill: var(--text-secondary); font-size: 14px; font-weight: 700; text-anchor: middle; }
.ce-pin circle { stroke: var(--surface-card); stroke-width: 3; }
.ce-pin text { fill: var(--brand-on-primary); font-size: 12px; font-weight: 800; text-anchor: middle; pointer-events: none; }
.ce-pin-stay circle { fill: var(--status-success); }
.ce-pin-progress circle { fill: var(--status-info); }
.ce-pin-break circle { fill: var(--status-warning); }
.ce-pin.is-stale { opacity: .45; }
.ce-queue-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ce-queue-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-card); }
.ce-queue-list li.is-first { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.ce-queue-no { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--surface-section); font-weight: 800; }
.is-first .ce-queue-no { color: var(--brand-on-primary); background: var(--brand-primary); }
.ce-queue-who { display: grid; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ce-queue-who span { color: var(--text-secondary); font-size: var(--text-small); }
@media (max-width: 1023px) { .ce-split { grid-template-columns: minmax(0, 1fr); } }

.ce-livemap-canvas { position: relative; width: 100%; height: 380px; overflow: hidden; border-radius: var(--radius-control); background: var(--brand-primary-soft); }
.ce-livemap-canvas[hidden] { display: none; }
.ce-map-pin { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--brand-on-primary); border: 3px solid var(--surface-card); border-radius: var(--radius-pill); font: inherit; font-size: var(--text-small); font-weight: 800; cursor: pointer; box-shadow: var(--shadow-overlay); }
.ce-map-pin-stay { background: var(--status-success); }
.ce-map-pin-progress { background: var(--status-info); }
.ce-map-pin-break { background: var(--status-warning); }
.ce-map-pin.is-stale { opacity: .5; }
.ce-map-pin:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
.ce-map-popup { display: grid; gap: var(--space-1); font-size: var(--text-small); }
.ce-map-popup a { color: var(--brand-primary); font-weight: 700; }
@media (max-width: 767px) { .ce-livemap-canvas { height: 300px; } }

/* Folded sections */
.ce-fold > summary { display: flex; align-items: center; min-height: var(--control-height); color: var(--brand-primary); font-size: var(--text-small); font-weight: 700; cursor: pointer; }
.ce-fold > summary:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
.ce-fold-card { padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-card); }
.ce-fold-card[open] { padding-bottom: var(--space-4); }

/* Phones: denser, shorter pages. Touch targets stay at 44px. */
@media (max-width: 767px) {
  .ce-stack { gap: var(--space-3); }
  .ce-page-title { font-size: 1.25rem; }
  .ce-card-head { padding: var(--space-3) var(--space-3) 0; }
  .ce-card-head h3 { font-size: var(--text-large); }
  .ce-card-body { gap: var(--space-2); padding: var(--space-3); }
  .ce-list { gap: 6px; }
  .ce-list-item { align-items: center; gap: 6px var(--space-2); padding: 10px var(--space-3); }
  .ce-list-item > div { flex: 1 1 150px; gap: 2px; }
  .ce-list-item strong { font-size: var(--text-body); line-height: 1.3; }
  .ce-list-item small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
  .ce-list-item .ce-actions, .ce-list-item .ce-badges { flex-wrap: nowrap; gap: 6px; }
  .ce-list-item .ce-actions { width: 100%; }
  .ce-list-item .ce-actions > .ce-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--space-2); }
  .ce-badges { gap: 4px; }
  .ce-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .ce-stat-value { font-size: var(--text-large); }
  .ce-queue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .ce-queue { padding: var(--space-2); }
  .ce-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ce-tabs::-webkit-scrollbar { display: none; }
  .ce-tab { flex: 0 0 auto; white-space: nowrap; }
  .ce-filter-row, .ce-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .ce-inline-notice { padding: var(--space-2) var(--space-3); }
}

.ce-import-item { border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-card); }
.ce-import-item > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2) var(--space-3); cursor: pointer; list-style: none; }
.ce-import-item > summary::-webkit-details-marker { display: none; }
.ce-import-item > summary:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: -3px; border-radius: var(--radius-control); }
.ce-import-item > summary strong { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ce-import-body { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.ce-import-body p { margin: 0; font-size: var(--text-small); }
.ce-map-pin { position: relative; }
.ce-map-pin::after { position: absolute; inset: -6px; content: ''; }