:root {
    --bg: #efe6da;
    --bg-2: #f7f0e6;
    --ink: #121417;
    --muted: #64605b;
    --line: rgba(18, 20, 23, 0.12);
    --card: rgba(244, 236, 224, 0.92);
    --card-solid: #f3ebdf;
    --brand: #183a76;
    --brand-2: #c26d2f;
    --brand-3: #1f7c6d;
    --danger: #b42318;
    --shadow: 0 24px 80px rgba(18, 20, 23, 0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.gregan-app {
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(194, 109, 47, 0.17), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(31, 124, 109, 0.14), transparent 20%),
        linear-gradient(180deg, var(--bg), var(--bg-2));
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    padding: 22px 30px;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(16px);
    background: rgba(242, 235, 226, 0.76);
    border-bottom: 1px solid var(--line);
}

.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-mark {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-decoration: none;
    color: var(--ink);
}
.brand-copy { display: grid; }
.brand-title { font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.brand-subtitle { font-size: 13px; color: var(--muted); font-weight: 700; }

.topnav { display: flex; gap: 10px; flex-wrap: wrap; }
.topnav a {
    text-decoration: none;
    border-radius: 999px;
    padding: 10px 14px;
    border: 1px solid transparent;
    color: var(--muted);
}
.topnav a:hover { background: rgba(243, 235, 223, 0.75); border-color: var(--line); color: var(--ink); }
.topnav a.active { background: var(--ink); color: #fff; }

.app-header { margin-bottom: 18px; }
.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    padding: 9px 14px 9px 10px;
    border: 1px solid var(--line);
    background: var(--card);
    text-decoration: none;
    font-weight: 900;
}
.profile-chip:hover { border-color: rgba(24, 58, 118, 0.24); box-shadow: 0 10px 20px rgba(18, 20, 23, 0.08); }
.profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-3));
    color: #fff;
    font-size: 15px;
}

.page-wrap {
    width: min(1380px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 72px;
}

.hero, .grid-two, .auth-layout, .dashboard-hero {
    display: grid;
    gap: 22px;
}
.hero { grid-template-columns: 1.4fr 0.9fr; }
.hero-copy, .hero-panel, .card {
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow);
    border-radius: 28px;
}
.hero-copy, .hero-panel, .card { padding: 30px; }
.hero h1, .dashboard-hero h1, .auth-card h1 { font-family: 'Newsreader', serif; margin: 10px 0 12px; font-size: clamp(34px, 4vw, 60px); line-height: 1.02; }
.hero p, .dashboard-hero p, .auth-card p { color: var(--muted); max-width: 70ch; }
.hero-panel, .accent-panel { display: grid; gap: 14px; align-content: start; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand-2); font-weight: 900; font-size: 12px; }

.stack-card, .summary-card, .empty-state, .feedback-box {
    border: 1px solid var(--line);
    background: rgba(243, 235, 223, 0.88);
    border-radius: 20px;
    padding: 18px;
}
.stack-card strong { display: block; margin-top: 4px; }

.cta-grid { display: grid; gap: 14px; margin-top: 22px; }
.cta-card {
    display: grid;
    gap: 6px;
    text-decoration: none;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--card);
}
.cta-card.primary { border-color: rgba(24, 58, 118, 0.25); }
.cta-card.secondary { border-color: rgba(31, 124, 109, 0.25); }
.cta-card.tertiary { border-color: rgba(194, 109, 47, 0.25); }
.cta-card.admin-card { border-color: rgba(24, 58, 118, 0.32); background: linear-gradient(135deg, rgba(24, 58, 118, 0.1), var(--card)); }
.cta-card strong { font-size: 18px; }
.cta-card span { color: var(--muted); }

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill, .status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    background: var(--card);
    font-size: 12px;
    font-weight: 800;
}
.status-B { color: var(--brand); }
.status-C { color: var(--brand-3); }
.status-PENDING { color: var(--brand-2); }
.status-APPROVED { color: var(--brand); }
.status-READY_FOR_PICKUP { color: var(--brand-3); }
.status-IN_TRANSIT { color: var(--danger); }
.status-DELIVERED { color: #2a6f3a; }
.button.small { padding: 9px 12px; border-radius: 12px; font-size: 12px; }

.button {
    border: 0;
    border-radius: 16px;
    padding: 13px 18px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.button.primary { background: var(--ink); color: white; }
.button.secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.button.danger { background: var(--danger); color: #fff; }
.button:disabled { opacity: 0.65; cursor: not-allowed; }
.full { width: 100%; }

.grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intro-strip { align-items: center; margin-bottom: 22px; }

.auth-card { max-width: 720px; }
.auth-form, .cmr-form { display: grid; gap: 16px; }
.auth-form label, .cmr-form label { display: grid; gap: 7px; font-weight: 700; }
.password-field { gap: 7px; }
.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.password-input-wrap input {
    padding-right: 48px;
}
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
}
.password-toggle:hover { background: rgba(31, 124, 109, 0.08); color: var(--ink); }
.password-toggle:focus-visible {
    outline: 2px solid rgba(31, 124, 109, 0.35);
    outline-offset: 2px;
}
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 14px;
    background: var(--card);
}
textarea { min-height: 110px; resize: vertical; }
.hint-box ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }

.section-head, .candidate-row, .device-row, .offer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.dashboard-hero { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
.dashboard-hero--expediteur,
.dashboard-hero--profile { margin-bottom: 22px; }
.dashboard-hero--transporteur { margin-bottom: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dashboard-summary-panel { align-content: start; gap: 16px; }
.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 22px;
}
.metric-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    padding: 18px;
    display: grid;
    gap: 8px;
}
.metric-card span { color: var(--muted); font-size: 13px; font-weight: 800; }
.metric-card strong { font-size: 30px; line-height: 1; }
.dashboard-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.transporteur-dashboard-grid,
.transporteur-market-grid {
    align-items: start;
}
.board-column { display: grid; gap: 16px; min-height: 100%; }
.transport-card {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card);
    padding: 16px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 12px;
}
.transport-card-static { cursor: default; }
.transport-card:hover { border-color: rgba(24, 58, 118, 0.22); box-shadow: 0 14px 28px rgba(18, 20, 23, 0.08); }
.transport-card.selected { border-color: rgba(31, 124, 109, 0.42); box-shadow: 0 0 0 2px rgba(31, 124, 109, 0.08) inset; }
.transport-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.transport-card-head strong { display: block; }
.transport-card-head span, .transport-card-meta { color: var(--muted); }
.transport-card-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.selected-detail { display: grid; gap: 16px; }
.selected-transport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.profile-grid { align-items: start; }
.profile-form { display: grid; gap: 14px; }
.profile-side-panel { display: grid; gap: 16px; }
.compact-stack-card { padding: 16px; }
.routing-controls { display: grid; gap: 14px; }
.routing-checkbox { display: flex; gap: 10px; align-items: center; font-weight: 800; }
.routing-checkbox input { width: auto; }
.case-block--routing { background: linear-gradient(135deg, rgba(31, 124, 109, 0.08), var(--card)); }
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.detail-grid div { display: grid; gap: 4px; }
.detail-grid span { color: var(--muted); }
.stack-list { display: grid; gap: 12px; }
.mail-list-card {
    display: grid;
    gap: 12px;
}
.offer-row, .candidate-row, .device-row {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card);
    padding: 16px 18px;
    text-align: left;
}
.offer-row.selected { border-color: rgba(31, 124, 109, 0.4); box-shadow: 0 0 0 2px rgba(31, 124, 109, 0.08) inset; }
.offer-row strong, .candidate-row strong, .device-row strong { display: block; }
.offer-row span, .candidate-row span, .device-row span { color: var(--muted); }

.case-block {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(243, 235, 223, 0.88);
    padding: 22px;
    margin-bottom: 18px;
}
.case-block header { font-weight: 900; margin-bottom: 14px; }

body.gregan-app .case-block,
body.gregan-app .case-block--routing {
    background: linear-gradient(135deg, rgba(10, 24, 43, 0.96), rgba(7, 17, 31, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px rgba(3, 11, 24, 0.24);
    color: #f7faff;
}

body.gregan-app .case-block header,
body.gregan-app .case-block .section-note,
body.gregan-app .case-block label,
body.gregan-app .case-block p,
body.gregan-app .case-block .field span,
body.gregan-app .case-block strong {
    color: #f7faff;
}

body.gregan-app .case-block .section-note {
    color: #bcd2ff;
}

body.gregan-app .cmr-form label {
    color: #f7faff;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { margin-top: 18px; display: flex; justify-content: flex-end; }
.form-actions-split { justify-content: space-between; gap: 14px; }
.feedback-box { margin-top: 16px; min-height: 68px; color: var(--muted); }

.transport-dashboard-card, .transport-detail-shell, .mobile-scan-card {
    display: grid;
    gap: 16px;
}
.transport-table {
    display: grid;
    gap: 10px;
}
.transport-table-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 0.8fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--card);
}
.transport-table-head {
    background: rgba(24, 58, 118, 0.08);
    font-weight: 900;
    color: var(--brand);
}
.archive-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.mail-summary-grid { display: grid; gap: 12px; }
.transport-id { font-family: monospace; font-size: 12px; color: var(--muted); }
.transport-summary-grid, .detail-blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.transport-summary-grid div, .detail-block {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(243, 235, 223, 0.88);
}
.transport-summary-grid span, .detail-block span { color: var(--muted); }
.shared-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.shared-party {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(243, 235, 223, 0.88);
}
.shared-party span { color: var(--muted); }
.shared-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.shared-log {
    display: grid;
    gap: 10px;
}
.shared-log-item {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(243, 235, 223, 0.88);
}
.shared-log-item.active {
    border-color: rgba(24,58,118,0.24);
    background: linear-gradient(135deg, rgba(24,58,118,0.08), rgba(245, 238, 228, 0.96));
}
.shared-log-item > div {
    display: grid;
    gap: 3px;
}
.shared-log-item span { color: var(--muted); }
.action-form { display: grid; gap: 16px; }
.qr-preview-wrap { display: grid; gap: 14px; justify-items: start; }
.qr-preview {
    width: 220px;
    height: 220px;
    object-fit: contain;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: var(--card-solid);
    padding: 12px;
}
.mobile-hero {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}
.mobile-hero h1 {
    margin: 0;
    font-family: 'Newsreader', serif;
    font-size: clamp(28px, 7vw, 42px);
}
.mobile-scan-card { max-width: 760px; }
.signature-stack { display: grid; gap: 18px; }

.workflow-shell { display: grid; gap: 18px; }
.workflow-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.workflow-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(243, 235, 223, 0.88);
    color: var(--muted);
}
.workflow-step.active {
    color: var(--ink);
    background: linear-gradient(135deg, rgba(24,58,118,0.10), var(--card));
    border-color: rgba(24,58,118,0.22);
}
.workflow-step-index {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    flex: 0 0 auto;
}
.workflow-step strong { display: block; font-size: 14px; margin-bottom: 2px; }
.workflow-step p { margin: 0; font-size: 12px; line-height: 1.35; }
.workflow-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.workflow-tab {
    border: 1px solid var(--line);
    background: rgba(243, 235, 223, 0.88);
    border-radius: 999px;
    padding: 11px 14px;
    font-weight: 900;
    color: var(--muted);
}
.workflow-tab.active {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 12px 28px rgba(18, 20, 23, 0.18);
}
.workflow-panels { display: grid; gap: 18px; }
.actor-panel {
    display: none;
    gap: 18px;
    animation: fadeInPanel 180ms ease-out;
}
.actor-panel.active { display: grid; }
.actor-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(245, 238, 228, 0.96), rgba(243, 235, 223, 0.88));
}
.actor-hero h2 { margin: 8px 0 6px; font-size: clamp(22px, 2.7vw, 34px); }
.actor-hero p { margin: 0; color: var(--muted); max-width: 70ch; }
.locked-pill { color: var(--brand-2); }
.section-stack { display: grid; gap: 16px; }
.section-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--card);
    padding: 22px;
}
.section-card-info { background: linear-gradient(135deg, rgba(24,58,118,0.08), var(--card)); }
.section-card-head {
    display: flex;
    justify-content: flex-start;
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}
.section-card h3 { margin: 0; font-size: 18px; }
.section-note { margin: 8px 0 0; color: var(--muted); }

.create-fret-intro,
.profile-page-intro {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 22px;
}
.create-fret-intro h1,
.profile-page-intro h1 {
    margin: 8px 0 8px;
    font-family: 'Newsreader', serif;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
}
.create-fret-intro p,
.profile-page-intro p {
    margin: 0;
    color: var(--muted);
    max-width: 62ch;
}

.create-fret-steps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: sticky;
    top: 88px;
    z-index: 12;
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(7, 17, 31, 0.88);
    backdrop-filter: blur(12px);
}
.create-fret-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #bcd2ff;
    border-radius: 999px;
    padding: 8px 12px 8px 8px;
    cursor: pointer;
    text-align: left;
}
.create-fret-step:hover,
.create-fret-step.is-active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.create-fret-step-index,
.create-fret-section-index {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 140, 255, 0.22);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 auto;
}
.create-fret-step-label {
    font-size: 13px;
    font-weight: 700;
    max-width: 16ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.create-fret-actions {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 24, 43, 0.96);
    position: sticky;
    bottom: 16px;
}
.create-fret-actions-hint {
    margin: 0;
    color: #bcd2ff;
    font-size: 14px;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.75fr);
    gap: 22px;
    align-items: start;
}
.profile-form--grouped {
    gap: 28px;
}
.profile-group {
    display: grid;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.profile-group:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}
.profile-group-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
}
.profile-group-head p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}
.profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.profile-fields label {
    display: grid;
    gap: 7px;
}
.profile-fields label.full {
    grid-column: 1 / -1;
}
.profile-fields span {
    font-size: 13px;
    color: #bcd2ff;
    font-weight: 700;
}
.profile-preview {
    display: grid;
    gap: 4px;
    min-width: min(320px, 100%);
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
}
.profile-preview-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7ea2ff;
    font-weight: 800;
}
.profile-preview strong {
    font-size: 18px;
}
.profile-preview span {
    color: #bcd2ff;
    font-size: 13px;
}
.profile-side .section-note {
    margin-top: 4px;
}

body.gregan-app .create-fret-intro p,
body.gregan-app .profile-page-intro p,
body.gregan-app .profile-group-head p {
    color: #bcd2ff;
}
.field { display: grid; gap: 7px; font-weight: 800; }
.field span { font-size: 13px; color: var(--muted); }
.field.full { grid-column: 1 / -1; }
.form-grid.compact { gap: 12px; }
.goods-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.goods-field.full { grid-column: 1 / -1; }
.fees-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.fee-column {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(135deg, rgba(10, 24, 43, 0.96), rgba(7, 17, 31, 0.98));
    box-shadow: 0 12px 24px rgba(3, 11, 24, 0.18);
}
.fee-column h4 { margin: 0 0 14px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: #f7faff; }
.confidential-note {
    border: 1px solid rgba(31, 124, 109, 0.18);
    background: rgba(31, 124, 109, 0.08);
    color: var(--brand-3);
    border-radius: 18px;
    padding: 14px 16px;
    font-weight: 700;
}
.signature-field { gap: 10px; }
.signature-pad {
    position: relative;
    min-height: 180px;
    border: 1px dashed rgba(18, 20, 23, 0.22);
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(245, 238, 228, 0.96), rgba(248,244,238,0.95)),
        repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(18, 20, 23, 0.04) 27px);
}
.signature-canvas {
    display: block;
    width: 100%;
    height: 180px;
    touch-action: none;
    cursor: crosshair;
}
.signature-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 700;
    pointer-events: none;
    transition: opacity 160ms ease;
}
.signature-actions { display: flex; justify-content: flex-end; }

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-hero { grid-template-columns: 1.3fr 0.8fr; margin-bottom: 22px; }
.admin-form-card { display: grid; gap: 18px; }
.admin-form { width: 100%; }
.admin-conditional-fields { border: 1px dashed var(--line); border-radius: 20px; padding: 18px; margin-top: 18px; background: rgba(243, 235, 223, 0.75); }
.admin-conditional-fields h3 { margin-top: 0; }
.admin-request-card span { display: block; margin-top: 4px; color: var(--muted); }
.inline-field { display: flex; gap: 12px; align-items: center; }
.inline-field input { flex: 1; }

.alert-banner {
    margin-bottom: 16px;
    background: rgba(180, 35, 24, 0.1);
    border: 1px solid rgba(180, 35, 24, 0.22);
    color: var(--danger);
    border-radius: 18px;
    padding: 16px 18px;
    font-weight: 800;
}
.tab-switch { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.tab-button {
    border: 1px solid var(--line);
    background: rgba(243, 235, 223, 0.88);
    border-radius: 999px;
    padding: 11px 14px;
    font-weight: 800;
}
.tab-button.active { background: var(--ink); color: #fff; }
.tab-panel { display: none; margin-top: 18px; }
.tab-panel.active { display: block; }

.overview-card {
    margin-bottom: 22px;
}

.overview-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
}

.overview-panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.06);
}

.overview-panel-accent {
    background: linear-gradient(135deg, rgba(79, 140, 255, 0.16), rgba(255, 255, 255, 0.05));
}

.overview-panel ul {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #dce8ff;
}

.checklist-box {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 14px 16px;
    min-width: 320px;
}

.checklist-box strong {
    display: block;
    margin-bottom: 8px;
}

.checklist-box ul {
    margin: 0 0 8px;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.checklist-item.ok {
    color: #86eeac;
}

.checklist-item.pending {
    color: #dce8ff;
}

body.gregan-app {
    background: linear-gradient(135deg, #07111f 0%, #112543 45%, #183a76 100%);
    color: #f2f6ff;
}

body.gregan-app .page-shell {
    width: min(1440px, calc(100% - 36px));
    margin: 0 auto;
    padding: 28px 0 84px;
}

body.gregan-app .topbar {
    background: rgba(7, 17, 31, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 20px 44px rgba(5, 10, 23, 0.35);
    color: #f7faff;
}

body.gregan-app .brand-mark,
body.gregan-app .brand-title,
body.gregan-app .brand-subtitle,
body.gregan-app .topnav a,
body.gregan-app .profile-chip {
    color: inherit;
}

body.gregan-app .topnav a {
    color: rgba(243, 248, 255, 0.76);
}

body.gregan-app .topnav a.active,
body.gregan-app .topnav a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

body.gregan-app .hero-copy,
body.gregan-app .hero-panel,
body.gregan-app .card,
body.gregan-app .stack-card,
body.gregan-app .metric-card,
body.gregan-app .offer-row,
body.gregan-app .transport-card,
body.gregan-app .section-card,
body.gregan-app .selected-detail,
body.gregan-app .transport-dashboard-card,
body.gregan-app .mobile-scan-card,
body.gregan-app .detail-block,
body.gregan-app .shared-party,
body.gregan-app .action-form,
body.gregan-app .feedback-box,
body.gregan-app .transport-table-row,
body.gregan-app .actor-hero,
body.gregan-app .workflow-step,
body.gregan-app .workflow-step.active {
    background: rgba(10, 24, 43, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px rgba(3, 11, 24, 0.24);
    color: #f7faff;
}

body.gregan-app .hero-copy h1,
body.gregan-app .hero-panel strong,
body.gregan-app .card h2,
body.gregan-app .card h3,
body.gregan-app .section-card h3,
body.gregan-app .actor-hero h2,
body.gregan-app .transport-card strong,
body.gregan-app .metric-card strong {
    color: #ffffff;
}

body.gregan-app .eyebrow,
body.gregan-app .pill,
body.gregan-app .status-badge,
body.gregan-app .transport-card-meta,
body.gregan-app .section-note,
body.gregan-app .field span,
body.gregan-app .detail-grid span,
body.gregan-app .shared-party span,
body.gregan-app .transport-summary-grid span,
body.gregan-app .detail-block span,
body.gregan-app .transport-id,
body.gregan-app .hint-box,
body.gregan-app .hint-box ul,
body.gregan-app .stack-card span,
body.gregan-app .stack-card strong,
body.gregan-app .actor-hero p,
body.gregan-app .workflow-step p {
    color: #bcd2ff;
}

body.gregan-app .pill,
body.gregan-app .status-badge {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.12);
}

body.gregan-app input,
body.gregan-app select,
body.gregan-app textarea {
    background: rgba(245, 238, 228, 0.96);
    color: #07111f;
    border-color: rgba(255,255,255,0.15);
}

body.gregan-app .button.primary {
    background: linear-gradient(135deg, #4f8cff 0%, #1f6fff 100%);
    color: white;
    box-shadow: 0 16px 32px rgba(31, 111, 255, 0.24);
}

body.gregan-app .button.secondary {
    background: rgba(255, 255, 255, 0.11);
    color: #f7faff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

body.gregan-app .button:hover {
    transform: translateY(-1px);
}

body.gregan-app .profile-chip {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
}

body.gregan-app .cta-card {
    background: rgba(7, 17, 31, 0.9);
}

body.gregan-app .exp-dash-account,
body.gregan-app .exp-process-step,
body.gregan-app .exp-dash-list-panel,
body.gregan-app .exp-dash-detail-panel,
body.gregan-app .exp-offer-card,
body.gregan-app .exp-confirm-form,
body.gregan-app .empty-state,
body.gregan-app .summary-card,
body.gregan-app .candidate-row,
body.gregan-app .metric-card,
body.gregan-app .dashboard-summary-panel,
body.gregan-app .simple-landing-card {
    background: rgba(10, 24, 43, 0.96);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f7faff;
}

body.gregan-app .exp-process-step.is-active {
    background: linear-gradient(180deg, rgba(31, 124, 109, 0.28), rgba(10, 24, 43, 0.96));
}

body.gregan-app .exp-offer-card.is-selected {
    border-color: rgba(79, 140, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.12) inset;
}

body.gregan-app .exp-dash-hint,
body.gregan-app .exp-offer-meta,
body.gregan-app .exp-detail-hero p,
body.gregan-app .exp-detail-empty,
body.gregan-app .exp-confirm-form p {
    color: #bcd2ff;
}

body.gregan-app .exp-next-action {
    background: rgba(31, 124, 109, 0.18);
    border-color: rgba(31, 124, 109, 0.35);
    color: #d7fff3;
}

body.gregan-app .exp-detail-empty {
    border-color: rgba(255, 255, 255, 0.18);
}

.simple-auth-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.simple-auth-card {
    width: min(560px, 100%);
    padding: 36px 32px;
    border-radius: 28px;
    background: rgba(245, 238, 228, 0.96);
    box-shadow: var(--shadow);
}

.simple-hint-box {
    margin-top: 16px;
    border-radius: 18px;
    padding: 16px 18px;
    background: rgba(24,58,118,0.06);
}

body.gregan-app .simple-auth-card {
    background: rgba(10, 24, 43, 0.96);
    border: 1px solid rgba(255,255,255,0.14);
    color: #f7faff;
}

body.gregan-app .simple-hint-box {
    background: rgba(255,255,255,0.08);
}

.page-footer {
    display: flex;
    justify-content: center;
    padding: 18px 24px 32px;
}

.footer-admin-button {
    min-width: 180px;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #183a76 0%, #1f6fff 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(24, 58, 118, 0.22);
}

.simple-landing {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.simple-landing-card {
    width: min(760px, 100%);
    text-align: center;
    padding: 42px 32px;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: rgba(245, 238, 228, 0.96);
    box-shadow: var(--shadow);
}

.simple-landing-card h1 {
    margin: 0 0 28px;
    font-family: 'Newsreader', serif;
    font-size: clamp(34px, 4vw, 52px);
}

.landing-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.landing-choice-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(24,58,118,0.08), rgba(245, 238, 228, 0.96));
    color: var(--ink);
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.landing-choice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(18,20,23,0.08);
}

body.gregan-app .simple-landing-card {
    background: rgba(10, 24, 43, 0.96);
    border-color: rgba(255,255,255,0.14);
    color: #f7faff;
}

body.gregan-app .simple-landing-card h1 {
    color: #ffffff;
}

body.gregan-app .landing-choice-card {
    background: rgba(255,255,255,0.1);
    color: #f7faff;
    border-color: rgba(255,255,255,0.14);
}

@media (max-width: 720px) {
    .landing-choice-grid {
        grid-template-columns: 1fr;
    }
}
    border-color: rgba(255,255,255,0.12);
}

body.gregan-app .cta-card.primary { border-color: rgba(79, 140, 255, 0.45); }
body.gregan-app .cta-card.secondary { border-color: rgba(31, 124, 109, 0.45); }
body.gregan-app .cta-card.tertiary { border-color: rgba(194, 109, 47, 0.45); }
body.gregan-app .cta-card.admin-card { border-color: rgba(255,255,255,0.2); }

body.gregan-app .empty-state {
    background: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.2);
    color: #dce8ff;
}
.hidden { display: none !important; }
.empty-state {
    min-height: 120px;
    display: grid;
    align-items: center;
    color: var(--muted);
}

/* Expediteur process dashboard */
.exp-dash-intro {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 22px;
    align-items: end;
    margin-bottom: 22px;
}
.exp-dash-intro h1 {
    font-family: 'Newsreader', serif;
    margin: 10px 0 12px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
}
.exp-dash-intro p { color: var(--muted); max-width: 62ch; margin: 0; }
.exp-dash-intro-actions {
    display: grid;
    gap: 12px;
    justify-items: stretch;
}
.exp-dash-account {
    border: 1px solid var(--line);
    background: rgba(243, 235, 223, 0.88);
    border-radius: 18px;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
}
.exp-dash-account strong { font-size: 15px; }
.exp-dash-account span { color: var(--muted); font-size: 13px; }

.exp-process-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.exp-process-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    text-align: left;
    border: 1px solid var(--line);
    background: rgba(243, 235, 223, 0.88);
    border-radius: 22px;
    padding: 16px 14px;
    cursor: pointer;
    min-height: 92px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.exp-process-step:hover {
    border-color: rgba(24, 58, 118, 0.28);
    transform: translateY(-1px);
}
.exp-process-step.is-active {
    border-color: rgba(31, 124, 109, 0.45);
    background: linear-gradient(180deg, rgba(31, 124, 109, 0.12), rgba(245, 238, 228, 0.96));
    box-shadow: 0 16px 30px rgba(18, 20, 23, 0.08);
}
.exp-process-step.has-items .exp-process-count {
    background: var(--ink);
    color: #fff;
}
.exp-process-index {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    background: rgba(24, 58, 118, 0.1);
    color: var(--brand);
}
.exp-process-step.is-active .exp-process-index {
    background: var(--brand-3);
    color: #fff;
}
.exp-process-copy { display: grid; gap: 2px; min-width: 0; }
.exp-process-copy strong { font-size: 14px; }
.exp-process-copy span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-process-count {
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
    background: rgba(18,20,23,0.08);
}
.exp-process-connector {
    display: none;
}

.exp-dash-workspace {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: start;
}
.exp-dash-list-panel,
.exp-dash-detail-panel {
    border: 1px solid var(--line);
    background: rgba(243, 235, 223, 0.88);
    border-radius: 28px;
    padding: 22px;
    box-shadow: var(--shadow);
    min-height: 420px;
}
.exp-dash-list-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
}
.exp-dash-list-head h2 { margin: 0 0 6px; font-size: 22px; }
.exp-dash-hint { margin: 0; color: var(--muted); font-size: 13px; }

.exp-offer-list {
    display: grid;
    gap: 12px;
}
.exp-offer-card {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(245, 238, 228, 0.96);
    border-radius: 18px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 10px;
}
.exp-offer-card:hover { border-color: rgba(24, 58, 118, 0.24); }
.exp-offer-card.is-selected {
    border-color: rgba(31, 124, 109, 0.5);
    box-shadow: 0 0 0 2px rgba(31, 124, 109, 0.08) inset;
}
.exp-offer-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}
.exp-offer-route { font-weight: 800; font-size: 15px; }
.exp-offer-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
}

.exp-detail-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 20px;
    padding: 24px;
}
.exp-detail-body { display: grid; gap: 18px; }
.exp-detail-hero {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
}
.exp-detail-hero h3 {
    margin: 8px 0 6px;
    font-family: 'Newsreader', serif;
    font-size: 28px;
}
.exp-detail-hero p { margin: 0; color: var(--muted); }
.exp-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.exp-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.exp-next-action {
    border: 1px solid rgba(31, 124, 109, 0.22);
    background: rgba(31, 124, 109, 0.08);
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.transporteur-fleet-strip {
    margin-top: 22px;
}

.journey-panel {
    gap: 16px;
}
.journey-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.journey-panel-head strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
}
.journey-panel-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 800;
    color: #7ea2ff;
}
.journey-mode-toggle {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #f7faff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}
.journey-mode-toggle:hover {
    background: rgba(79, 140, 255, 0.22);
    border-color: rgba(79, 140, 255, 0.4);
}
.journey-card {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    padding: 18px 18px 14px;
    background:
        linear-gradient(180deg, rgba(79, 140, 255, 0.12), rgba(10, 24, 43, 0.2)),
        rgba(7, 17, 31, 0.55);
}
.journey-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 18px;
}
.journey-card-top strong {
    font-size: 15px;
    letter-spacing: 0.04em;
}
.journey-card-top span {
    color: #bcd2ff;
    font-size: 13px;
}
.journey-timeline {
    display: grid;
    gap: 0;
}
.journey-stop {
    display: grid;
    grid-template-columns: 58px 18px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 64px;
}
.journey-stop--arrival {
    min-height: 0;
}
.journey-time {
    text-align: right;
    font-weight: 800;
    font-size: 14px;
    padding-top: 2px;
    color: #f7faff;
}
.journey-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}
.journey-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #4f8cff;
    box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.18);
    flex: 0 0 auto;
    margin-top: 4px;
}
.journey-dot--end {
    background: #1f7c6d;
    box-shadow: 0 0 0 4px rgba(31, 124, 109, 0.2);
}
.journey-line {
    width: 2px;
    flex: 1 1 auto;
    min-height: 34px;
    margin-top: 6px;
    background: linear-gradient(180deg, rgba(79, 140, 255, 0.9), rgba(31, 124, 109, 0.7));
}
.journey-place {
    display: grid;
    gap: 4px;
    padding-bottom: 14px;
}
.journey-place strong {
    font-size: 18px;
    line-height: 1.15;
}
.journey-place span {
    color: #bcd2ff;
    font-size: 13px;
}
.journey-hint {
    margin: 0;
    color: #bcd2ff;
    font-size: 14px;
    line-height: 1.4;
}

body.gregan-app .journey-card,
body.gregan-app .journey-mode-toggle {
    border-color: rgba(255, 255, 255, 0.14);
}

.exp-confirm-dialog {
    border: 0;
    border-radius: 24px;
    padding: 0;
    max-width: min(440px, calc(100vw - 32px));
    background: transparent;
}
.exp-confirm-dialog::backdrop {
    background: rgba(18, 20, 23, 0.45);
    backdrop-filter: blur(4px);
}
.exp-confirm-form {
    background: var(--card-solid);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 24px;
    display: grid;
    gap: 14px;
    box-shadow: var(--shadow);
}
.exp-confirm-form h3 { margin: 0; font-family: 'Newsreader', serif; font-size: 28px; }
.exp-confirm-form p { margin: 0; color: var(--muted); }
.exp-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.feedback-error {
    border-color: rgba(180, 35, 24, 0.35);
    color: var(--danger);
}

/* Process commun expéditeur / transporteur — style type SNCF Connect */
.process-page {
    display: grid;
    gap: 18px;
}
.process-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
}
.process-topbar h1 {
    margin: 8px 0 0;
    font-family: 'Newsreader', serif;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.05;
}
.process-topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.process-status-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    background: rgba(79, 140, 255, 0.18);
    border: 1px solid rgba(79, 140, 255, 0.35);
    color: #dce8ff;
}
.process-status-chip.status-DELIVERED {
    background: rgba(31, 124, 109, 0.22);
    border-color: rgba(31, 124, 109, 0.4);
    color: #c9fff0;
}
.process-status-chip.status-IN_TRANSIT,
.process-status-chip.status-READY_FOR_PICKUP {
    background: rgba(194, 109, 47, 0.2);
    border-color: rgba(194, 109, 47, 0.4);
    color: #ffe0c2;
}

.process-journey-card {
    border-radius: 28px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at 12% 0%, rgba(79, 140, 255, 0.22), transparent 42%),
        linear-gradient(135deg, rgba(12, 28, 52, 0.98), rgba(8, 18, 36, 0.96));
    box-shadow: 0 22px 48px rgba(3, 11, 24, 0.28);
}
.process-journey-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    align-items: baseline;
}
.process-journey-meta strong {
    letter-spacing: 0.04em;
    font-size: 15px;
}
.process-journey-meta span {
    color: #bcd2ff;
    font-size: 13px;
}
.process-journey-timeline {
    display: grid;
    gap: 0;
}
.process-journey-stop {
    display: grid;
    grid-template-columns: 88px 18px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-height: 78px;
}
.process-journey-stop--arrival { min-height: 0; }
.process-journey-time {
    text-align: right;
    font-weight: 800;
    font-size: 13px;
    color: #f7faff;
    padding-top: 2px;
}
.process-journey-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}
.process-journey-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #4f8cff;
    box-shadow: 0 0 0 5px rgba(79, 140, 255, 0.18);
    margin-top: 3px;
    flex: 0 0 auto;
}
.process-journey-dot--end {
    background: #2bb673;
    box-shadow: 0 0 0 5px rgba(43, 182, 115, 0.18);
}
.process-journey-line {
    width: 3px;
    flex: 1 1 auto;
    min-height: 42px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #4f8cff 0%, #2bb673 100%);
}
.process-journey-place {
    display: grid;
    gap: 4px;
    padding-bottom: 16px;
}
.process-journey-place strong {
    font-size: 20px;
    line-height: 1.15;
}
.process-journey-place span {
    color: #bcd2ff;
    font-size: 13px;
    line-height: 1.35;
}

.process-phase-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.process-phase-step {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #9bb6e8;
}
.process-phase-step.is-done {
    background: rgba(43, 182, 115, 0.12);
    border-color: rgba(43, 182, 115, 0.28);
    color: #dfffee;
}
.process-phase-step.is-current {
    background: linear-gradient(135deg, rgba(79, 140, 255, 0.24), rgba(24, 58, 118, 0.35));
    border-color: rgba(79, 140, 255, 0.45);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(31, 111, 255, 0.16);
}
.process-phase-index {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 900;
    font-size: 13px;
    flex: 0 0 auto;
}
.process-phase-step.is-done .process-phase-index {
    background: #2bb673;
    color: #04140f;
}
.process-phase-step.is-current .process-phase-index {
    background: #4f8cff;
    color: #ffffff;
}
.process-phase-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.process-phase-copy strong {
    font-size: 14px;
}
.process-phase-copy span {
    font-size: 12px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.process-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
    gap: 18px;
    align-items: start;
}
.process-main,
.process-side {
    display: grid;
    gap: 16px;
}
.process-block,
.process-action-card {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 24, 43, 0.92);
    padding: 20px;
    box-shadow: 0 16px 36px rgba(3, 11, 24, 0.2);
}
.process-block--parties {
    background:
        linear-gradient(135deg, rgba(79, 140, 255, 0.1), transparent 48%),
        rgba(10, 24, 43, 0.94);
}
.process-block-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.process-block-head h2 {
    margin: 0;
    font-size: 18px;
}
.process-action-step {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: #7ea2ff;
}
.process-party-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.process-party-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(79, 140, 255, 0.22);
    background: rgba(79, 140, 255, 0.1);
}
.process-party-card--dest {
    border-color: rgba(43, 182, 115, 0.28);
    background: rgba(43, 182, 115, 0.1);
}
.process-party-card--carrier {
    border-color: rgba(194, 109, 47, 0.3);
    background: rgba(194, 109, 47, 0.12);
}
.process-party-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: #9bb6e8;
}
.process-party-card strong {
    font-size: 16px;
}
.process-party-card span {
    color: #bcd2ff;
    font-size: 13px;
    line-height: 1.35;
}
.process-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.process-info-grid--compact {
    margin-bottom: 14px;
}
.process-info-item {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}
.process-info-item--full {
    grid-column: 1 / -1;
}
.process-info-item strong {
    font-size: 13px;
    color: #9bb6e8;
}
.process-info-item span {
    color: #e8f0ff;
    font-size: 14px;
    line-height: 1.4;
}

.process-action-card {
    display: grid;
    gap: 12px;
}
.process-action-card p,
.process-wait span {
    margin: 0;
    color: #bcd2ff;
    font-size: 14px;
    line-height: 1.45;
}
.process-action-card--accent {
    border-color: rgba(79, 140, 255, 0.35);
    background:
        linear-gradient(160deg, rgba(79, 140, 255, 0.18), rgba(10, 24, 43, 0.95));
}
.process-action-card--success {
    border-color: rgba(43, 182, 115, 0.35);
    background:
        linear-gradient(160deg, rgba(43, 182, 115, 0.16), rgba(10, 24, 43, 0.95));
}
.process-action-card--muted {
    background: rgba(255, 255, 255, 0.03);
}
.process-wait {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
}
.process-wait .button {
    justify-self: start;
    margin-top: 4px;
}

body.gregan-app .process-journey-card,
body.gregan-app .process-block,
body.gregan-app .process-action-card,
body.gregan-app .process-phase-step,
body.gregan-app .process-party-card,
body.gregan-app .process-info-item {
    box-shadow: 0 16px 36px rgba(3, 11, 24, 0.2);
}

@media (max-width: 980px) {
    .topbar, .hero, .grid-two, .auth-layout, .dashboard-hero, .detail-grid, .form-grid { grid-template-columns: 1fr; }
    .topbar { position: static; }
    .inline-field { flex-direction: column; align-items: stretch; }
    .fees-grid, .goods-grid { grid-template-columns: 1fr; }
    .actor-hero { flex-direction: column; }
    .workflow-stepper { grid-template-columns: 1fr; }
    .transport-table-row { grid-template-columns: 1fr; }
    .transport-summary-grid, .detail-blocks, .shared-hub-grid { grid-template-columns: 1fr; }
    .shared-log-item { grid-template-columns: 1fr; }
    .metric-grid, .dashboard-board, .selected-transport-grid { grid-template-columns: 1fr; }
    .exp-dash-intro,
    .exp-process-rail,
    .exp-dash-workspace,
    .exp-detail-grid,
    .profile-layout,
    .profile-fields,
    .create-fret-intro,
    .profile-page-intro,
    .process-layout,
    .process-party-grid,
    .process-info-grid,
    .process-phase-rail { grid-template-columns: 1fr; }
    .create-fret-intro,
    .profile-page-intro,
    .process-topbar { flex-direction: column; align-items: stretch; }
    .create-fret-steps { top: 12px; }
    .create-fret-step-label { max-width: 12ch; }
    .process-journey-stop { grid-template-columns: 72px 16px minmax(0, 1fr); }
    .topnav { justify-content: flex-start; }
}