:root {
    --bg: #f4f8f7;
    --surface: #ffffff;
    --ink: #14202e;
    --muted: #64748b;
    --line: #dbe7e5;
    --primary: #42d8b7;
    --primary-strong: #109b81;
    --primary-dark: #132238;
    --accent: #9be21f;
    --danger: #b42318;
    --shadow: 0 16px 36px rgba(20, 32, 46, 0.08);
}

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top right, rgba(66, 216, 183, 0.12), transparent 28rem),
        var(--bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    font-size: 14px;
    max-width: 100%;
    overflow-x: hidden;
    transition: grid-template-columns 0.18s ease;
    width: 100%;
}

.app-shell > main {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.app-shell.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar {
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}

.sidebar {
    background: linear-gradient(180deg, #101b2b 0%, #142238 58%, #0f1b2c 100%);
    color: #eef4fb;
    padding: 22px;
    min-width: 0;
    transition: padding 0.18s ease;
    box-shadow: 8px 0 30px rgba(15, 23, 42, 0.12);
}

.brand-text {
    color: #69e0c6;
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.15;
    overflow: hidden;
    text-shadow: 0 10px 24px rgba(66, 216, 183, 0.22);
    white-space: nowrap;
}

.topbar-left,
.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.brand-row {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 20px;
    min-width: 0;
}

.brand-logo {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    flex: 0 0 42px;
    height: 42px;
    object-fit: contain;
    padding: 4px;
    width: 42px;
}

.brand-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-row .sidebar-toggle {
    flex: 0 0 auto;
}

.menu-toggle {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-size: 13px;
    height: 38px;
    line-height: 1;
    min-width: 58px;
    padding: 0 10px;
}

.sidebar-toggle {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.nav-link {
    display: block;
    padding: 11px 12px;
    border-radius: 8px;
    color: #dbe7f3;
    margin-bottom: 4px;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.nav-link:hover {
    background: rgba(66, 216, 183, 0.12);
    color: #fff;
    transform: translateX(2px);
}

.nav-link.active {
    background: linear-gradient(90deg, rgba(66, 216, 183, 0.22), rgba(155, 226, 31, 0.12));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--primary);
}

.topbar {
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: 0 8px 20px rgba(20, 32, 46, 0.04);
}

.content {
    min-width: 0;
    padding: 24px;
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
}

.grid {
    display: grid;
    gap: 16px;
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.stat {
    font-size: 28px;
    font-weight: 700;
    margin-top: 8px;
}

.muted {
    color: var(--muted);
}

.toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.toolbar h1 {
    margin: 0;
}

.button {
    border: 0;
    border-radius: 6px;
    background: var(--primary-strong);
    color: #fff;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.button:hover {
    background: #0b816c;
    box-shadow: 0 10px 20px rgba(16, 155, 129, 0.22);
    transform: translateY(-1px);
}

.button.secondary {
    background: #e7f2f0;
    color: var(--ink);
}

.button.secondary:hover {
    background: #d7ebe7;
    box-shadow: 0 10px 20px rgba(20, 32, 46, 0.08);
}

.button.danger {
    background: var(--danger);
}

.compact-button {
    display: inline-block;
    padding: 7px 10px;
    white-space: nowrap;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
}

.table-scroll {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.table-scroll > .table {
    min-width: 100%;
    width: max-content;
}

.inventory-results {
    margin-bottom: 22px;
}

.inventory-table-scroll {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.inventory-table-scroll .table {
    border: 0;
    min-width: 980px;
}

.inventory-pagination {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 12px;
    padding: 12px;
}

.pagination-summary {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.pagination-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.pagination-button,
.pagination-ellipsis {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: center;
    min-height: 34px;
    min-width: 34px;
    padding: 7px 10px;
}

.pagination-button {
    background: #fff;
    color: var(--ink);
}

.pagination-button:hover {
    border-color: rgba(16, 155, 129, 0.42);
    color: var(--primary-strong);
}

.pagination-button.active {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    color: #fff;
}

.pagination-button.disabled,
.pagination-ellipsis {
    background: #f4f7f7;
    color: var(--muted);
    cursor: default;
}

.table th,
.table td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.table th {
    color: var(--muted);
    font-size: 13px;
}

.nowrap {
    white-space: nowrap;
}

.row-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: max-content;
}

.admin-materials-scroll {
    border: 1px solid var(--line);
    border-radius: 8px;
    max-width: 100%;
}

.work-order-materials-card {
    margin-top: 16px;
    overflow: visible;
}

.work-order-materials-card h2 {
    margin-top: 0;
}

.admin-material-add-grid {
    align-items: end;
    grid-template-columns: minmax(280px, 2fr) minmax(130px, 0.8fr) minmax(130px, 0.8fr) minmax(150px, 0.9fr);
}

.admin-material-add-grid .admin-measured-material-field {
    grid-column: span 1;
}

.admin-materials-table {
    border: 0;
    min-width: 1240px;
    table-layout: fixed;
}

.admin-materials-table th:nth-child(1),
.admin-materials-table td:nth-child(1) {
    width: 320px;
}

.admin-materials-table th:nth-child(2),
.admin-materials-table td:nth-child(2) {
    width: 330px;
}

.admin-materials-table th:nth-child(3),
.admin-materials-table td:nth-child(3) {
    width: 130px;
}

.admin-materials-table th:nth-child(4),
.admin-materials-table td:nth-child(4) {
    width: 90px;
}

.admin-materials-table th:nth-child(5),
.admin-materials-table td:nth-child(5) {
    text-align: right;
    width: 135px;
}

.admin-materials-table th:nth-child(6),
.admin-materials-table td:nth-child(6) {
    text-align: right;
    width: 135px;
}

.admin-materials-table th:nth-child(7),
.admin-materials-table td:nth-child(7) {
    width: 190px;
}

.admin-material-product-cell,
.admin-material-product-cell input,
.admin-material-help {
    max-width: 100%;
    min-width: 0;
}

.admin-material-help {
    display: block;
    overflow-wrap: anywhere;
}

.admin-material-quantity {
    min-width: 0;
    width: 100%;
}

.admin-material-measure-cell {
    display: grid;
    gap: 8px;
}

.admin-material-measure-summary {
    display: block;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-material-measure-edit {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(88px, 1fr));
}

.admin-material-measure-edit[hidden] {
    display: none;
}

.admin-material-measure-edit input,
.admin-materials-table input {
    min-width: 0;
    width: 100%;
}

.admin-material-total {
    color: var(--primary-strong);
    font-weight: 800;
}

.admin-materials-table .location-results {
    width: min(520px, calc(100vw - 48px));
}

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
    background: #e8faf5;
    color: var(--primary-strong);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.operations-page-header .toolbar-actions,
.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.operations-form-card,
.operations-filter-card,
.operations-table-card,
.route-create-card,
.route-stops-card {
    margin-bottom: 16px;
}

.operations-form-card .operations-section-title,
.route-create-card .operations-section-title,
.route-stops-card .operations-section-title {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: -4px 0 18px;
    padding-bottom: 14px;
}

.operations-section-title h2 {
    margin: 0 0 4px;
}

.operations-section-title p {
    margin: 0;
}

.operations-form-grid .wide {
    grid-column: 1 / -1;
}

.operations-checkbox-field {
    align-content: end;
    min-height: 74px;
}

.operations-file-field input[type="file"] {
    background: #f8fafc;
}

.required-mark {
    color: #dc2626;
}

.operations-form-actions {
    border-top: 1px solid var(--line);
    margin-top: 18px;
    padding-top: 16px;
}

.operations-filter-grid {
    align-items: end;
    grid-template-columns: minmax(260px, 1fr) auto;
}

.route-filter-grid {
    align-items: end;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-primary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.route-location-filter {
    margin-bottom: 16px;
}

.route-create-card {
    overflow: hidden;
}

.route-create-layout {
    display: grid;
    gap: 16px;
}

.route-mode-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-mode-option {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 12px;
}

.route-mode-option:has(input:checked) {
    background: #ecfdf5;
    border-color: rgba(20, 184, 166, 0.38);
    box-shadow: 0 12px 28px rgba(20, 184, 166, 0.08);
}

.route-mode-option input {
    margin-top: 3px;
}

.route-mode-option span {
    display: grid;
    gap: 3px;
}

.route-mode-option small {
    color: var(--muted);
}

.route-same-work-panel[hidden],
.route-bulk-apply[hidden] {
    display: none;
}

.route-location-status {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    min-height: 44px;
    padding: 10px 12px;
}

.route-location-status span {
    display: block;
    font-size: 12px;
    margin-top: 3px;
}

.route-location-status.success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
    font-weight: 700;
}

.route-location-status.warning {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.route-location-status.muted {
    background: #f8fafc;
}

.route-manual-start[hidden] {
    display: none;
}

.route-live-search-panel {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-top: 18px;
    padding: 16px;
}

.route-location-list-panel {
    border-top: 1px solid var(--line);
    margin-top: 18px;
    padding-top: 16px;
}

.route-live-search-title {
    margin-top: 0;
}

.route-live-search-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.route-live-search-box label {
    display: block;
    font-weight: 800;
    margin-bottom: 6px;
}

.route-live-search-message {
    margin: 8px 0 0;
}

.route-live-search-message.is-success {
    color: #047857;
}

.route-live-search-message.is-warning {
    color: #b45309;
}

.route-live-results {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    max-height: 360px;
    overflow-y: auto;
}

.route-live-result {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.route-live-result:hover {
    border-color: rgba(16, 155, 129, 0.36);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.route-live-result input {
    flex: 0 0 auto;
    height: 18px;
    margin-top: 3px;
    width: 18px;
}

.route-live-result-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.route-live-result-body small,
.route-live-result-body em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.route-selected-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.route-selected-bottom-panel {
    background: #fbfefd;
    border-color: rgba(20, 184, 166, 0.22);
    margin-top: 18px;
}

.route-selected-header h2 {
    margin: 0;
}

.route-selected-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.route-selected-header p {
    margin: 4px 0 0;
}

.route-selected-list {
    display: grid;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.route-selected-empty {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: var(--muted);
    padding: 14px;
    text-align: center;
}

.route-selected-item {
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
}

.route-selected-detail-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

.route-selected-sequence {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    color: var(--primary-strong);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.route-selected-body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.route-selected-body span,
.route-selected-body small {
    color: var(--muted);
    font-size: 12px;
}

.route-selected-field {
    display: grid;
    gap: 5px;
    margin-top: 6px;
}

.route-selected-field span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.route-selected-field input,
.route-selected-field textarea,
.route-selected-field select {
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    padding: 8px 9px;
    width: 100%;
}

.route-selected-fields-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-selected-field-wide {
    grid-column: 1 / -1;
}

.route-same-applied {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    color: #047857 !important;
    display: inline-flex;
    font-weight: 800;
    justify-self: flex-start;
    margin-top: 4px;
    padding: 5px 9px;
}

.route-bulk-apply {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 14px;
}

.route-bulk-apply .operations-section-title {
    border-bottom: 0;
    margin: 0 0 12px;
    padding-bottom: 0;
}

.route-bulk-apply h3 {
    margin: 0 0 4px;
}

.route-bulk-grid {
    align-items: end;
    grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.2fr) auto;
}

.route-bulk-action {
    align-self: end;
}

.route-selected-remove {
    white-space: nowrap;
}

.route-selection-toolbar {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
}

.route-selection-toolbar p {
    margin: 4px 0 0;
}

.route-location-table {
    min-width: 1060px;
}

.route-location-table input[type="checkbox"] {
    height: 18px;
    width: 18px;
}

.route-location-table td span {
    display: block;
    margin-top: 4px;
}

.operations-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.operations-table-card {
    padding: 0;
}

.operations-table-card .table {
    margin: 0;
}

.operations-summary-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.operations-summary-card {
    display: grid;
    gap: 6px;
}

.operations-summary-card span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.operations-summary-card strong {
    color: var(--ink);
    font-size: 24px;
}

.operations-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.operations-chip-list span {
    background: #eefbf7;
    border: 1px solid #c7efe5;
    border-radius: 999px;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.route-action-stack form {
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
}

.route-action-stack form:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.route-stop-table {
    min-width: 1120px;
}

.route-stop-description,
.route-stop-table td span {
    display: block;
    margin-top: 4px;
}

.route-sequence-input {
    max-width: 92px;
}

.badge.warning {
    background: #fff7ed;
    color: #c2410c;
}

.work-order-filters {
    margin-bottom: 16px;
}

.work-order-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.work-orders-toolbar .button {
    flex: 0 0 auto;
}

.work-orders-table {
    min-width: 1360px;
}

.work-orders-results {
    transition: opacity 0.15s ease;
}

.work-orders-results.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.field label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px;
    font: inherit;
}

.login-remember-row {
    align-items: center;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 12px;
    user-select: none;
}

.login-remember-row input {
    accent-color: var(--primary-strong);
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
}

.autocomplete-field {
    position: relative;
}

.location-results {
    background: #fff;
    border: 1px solid #d5dde8;
    border-radius: 6px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
    margin-top: 6px;
    max-height: 320px;
    overflow-y: auto;
    position: absolute;
    width: min(680px, calc(100vw - 48px));
    z-index: 20;
}

.location-result {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #edf1f7;
    color: #172033;
    cursor: pointer;
    display: block;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.location-result:hover,
.location-result:focus {
    background: #f3f6fb;
    outline: none;
}

.location-result strong,
.location-result span {
    display: block;
}

.location-result span {
    color: #64748b;
    font-size: 13px;
    margin-top: 4px;
}

.location-result.empty {
    cursor: default;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: #eefbf7;
}

.dashboard-hero {
    align-items: center;
    background: linear-gradient(135deg, #132238 0%, #16324a 62%, #0f8b78 100%);
    border-radius: 10px;
    box-shadow: var(--shadow);
    color: #fff;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 24px;
}

.dashboard-hero h1 {
    font-size: 28px;
    margin: 4px 0;
}

.dashboard-hero p {
    color: #d8f1ec;
    margin: 0;
}

.eyebrow {
    color: #9be21f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-stats .stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    color: var(--ink);
    display: block;
    min-height: 142px;
    padding: 18px;
    position: relative;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.dashboard-stats .stat-card::after {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 999px;
    content: "";
    height: 36px;
    opacity: 0.18;
    position: absolute;
    right: 16px;
    top: 16px;
    width: 36px;
}

.dashboard-stats .stat-card:hover {
    border-color: rgba(16, 155, 129, 0.45);
    box-shadow: 0 18px 42px rgba(16, 155, 129, 0.16);
    transform: translateY(-3px);
}

.stat-label {
    color: var(--muted);
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.stat-link {
    color: var(--primary-strong);
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-top: 12px;
}

.dashboard-table .table {
    box-shadow: var(--shadow);
}

.mobile-shell {
    max-width: 560px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--surface);
}

.mobile-header {
    position: sticky;
    top: 0;
    background: #132238;
    color: #fff;
    padding: 16px;
    z-index: 5;
}

.mobile-content {
    padding: 16px;
}

.job-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mobile-action-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.mobile-primary-action {
    align-items: center;
    display: inline-flex;
    font-size: 16px;
    font-weight: 800;
    justify-content: center;
    min-height: 48px;
    text-align: center;
}

.mobile-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.mobile-section summary {
    cursor: pointer;
    font-weight: 800;
    list-style: none;
    padding: 15px 44px 15px 14px;
    position: relative;
}

.mobile-section summary::-webkit-details-marker {
    display: none;
}

.mobile-section summary::after {
    color: var(--primary-strong);
    content: "+";
    font-size: 24px;
    line-height: 1;
    position: absolute;
    right: 16px;
    top: 12px;
}

.mobile-section[open] summary {
    border-bottom: 1px solid var(--line);
}

.mobile-section[open] summary::after {
    content: "-";
}

.mobile-section-body {
    padding: 14px;
}

.photo-upload-warning {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 10px;
    color: #134e4a;
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
}

.photo-upload-warning[hidden] {
    display: none;
}

.photo-upload-warning strong,
.photo-upload-warning small {
    display: block;
}

.photo-upload-warning small {
    color: #0f766e;
    margin-top: 2px;
}

.photo-upload-spinner {
    animation: photo-upload-spin 0.8s linear infinite;
    border: 3px solid rgba(20, 184, 166, 0.22);
    border-top-color: #0f766e;
    border-radius: 999px;
    flex: 0 0 24px;
    height: 24px;
    width: 24px;
}

[data-photo-upload-form].is-uploading {
    cursor: wait;
}

[data-photo-upload-form].is-uploading input,
[data-photo-upload-form].is-uploading button {
    pointer-events: none;
}

[data-photo-upload-form] button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.material-operation-warning {
    align-items: center;
    background: #eff6ff;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 10px;
    color: #1e3a8a;
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
}

.material-operation-warning[hidden] {
    display: none;
}

.material-operation-warning strong,
.material-operation-warning small {
    display: block;
}

.material-operation-warning small {
    color: #2563eb;
    margin-top: 2px;
}

.material-operation-spinner {
    animation: photo-upload-spin 0.8s linear infinite;
    border: 3px solid rgba(37, 99, 235, 0.2);
    border-top-color: #2563eb;
    border-radius: 999px;
    flex: 0 0 24px;
    height: 24px;
    width: 24px;
}

form.is-material-loading {
    cursor: wait;
}

form.is-material-loading button:disabled {
    cursor: wait;
    opacity: 0.72;
}

@keyframes photo-upload-spin {
    to {
        transform: rotate(360deg);
    }
}

.mobile-photo-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.mobile-photo-grid a {
    background: #f5f7fb;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: block;
    overflow: hidden;
}

.mobile-photo-grid img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.location-detail-list {
    display: grid;
    gap: 8px;
}

.location-detail-row {
    align-items: start;
    background: #f8fbfa;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(120px, 42%) 1fr;
    padding: 10px;
}

.location-detail-row span:first-child {
    color: var(--muted);
    font-weight: 800;
}

.location-detail-row span:last-child {
    color: var(--ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.app-shell h1 {
    font-size: 22px;
    line-height: 1.2;
}

.app-shell h2 {
    font-size: 18px;
    line-height: 1.25;
}

.app-shell h3 {
    font-size: 16px;
    line-height: 1.3;
}

.app-shell .brand-text {
    font-size: 14px;
}

.app-shell .topbar {
    height: 56px;
    padding: 0 20px;
}

.app-shell .content {
    padding: 20px;
}

.app-shell .sidebar {
    padding: 18px;
}

.app-shell .nav-link {
    border-radius: 6px;
    font-size: 14px;
    padding: 9px 10px;
}

.app-shell .toolbar {
    margin-bottom: 12px;
}

.app-shell .card {
    padding: 14px;
}

.app-shell .button {
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.15;
    padding: 8px 11px;
}

.app-shell .compact-button {
    font-size: 12px;
    padding: 6px 8px;
}

.app-shell .table th,
.app-shell .table td {
    font-size: 13px;
    line-height: 1.32;
    padding: 8px 10px;
}

.app-shell .table th {
    font-size: 12px;
    white-space: nowrap;
}

.app-shell .field label {
    font-size: 13px;
    margin-bottom: 5px;
}

.app-shell .field input,
.app-shell .field select,
.app-shell .field textarea {
    font-size: 13px;
    min-height: 34px;
    padding: 8px 9px;
}

.app-shell .form-grid {
    gap: 12px;
}

.app-shell .badge {
    font-size: 11px;
    padding: 3px 7px;
}

.form-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.work-order-list-filter-form {
    margin: 0;
}

.app-shell .column-filter-row th {
    background: #f8fbfa;
    border-top: 1px solid var(--line);
    padding: 6px 7px;
}

.app-shell .column-filter-row input,
.app-shell .column-filter-row select {
    background: #fff;
    border: 1px solid #cfddda;
    border-radius: 5px;
    box-shadow: none;
    font-size: 12px;
    height: 30px;
    min-height: 30px;
    padding: 5px 7px;
    width: 100%;
}

.app-shell .column-filter-row input::placeholder {
    color: #94a3b8;
}

.app-shell .column-filter-row .button {
    min-height: 30px;
    padding: 6px 8px;
}

.app-shell nav[role="navigation"] {
    color: var(--muted);
    font-size: 12px;
    margin-top: 12px;
}

.app-shell nav[role="navigation"] > div:first-child {
    display: none;
}

.app-shell nav[role="navigation"] > div:last-child {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.app-shell nav[role="navigation"] p {
    margin: 0;
}

.app-shell nav[role="navigation"] > div:last-child > div:last-child > span {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.app-shell nav[role="navigation"] a,
.app-shell nav[role="navigation"] span[aria-current] > span,
.app-shell nav[role="navigation"] span[aria-disabled] > span {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink);
    display: inline-flex;
    font-size: 12px;
    justify-content: center;
    line-height: 1;
    min-height: 30px;
    min-width: 30px;
    padding: 6px 8px;
}

.app-shell nav[role="navigation"] a:hover {
    border-color: rgba(16, 155, 129, 0.42);
    color: var(--primary-strong);
}

.app-shell nav[role="navigation"] span[aria-current] > span {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    color: #fff;
}

.app-shell nav[role="navigation"] span[aria-disabled] > span {
    background: #f4f7f7;
    color: var(--muted);
}

.app-shell nav[role="navigation"] svg {
    display: block;
    height: 14px;
    max-height: 14px;
    max-width: 14px;
    width: 14px;
}

@media (max-width: 900px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        bottom: 0;
        left: 0;
        max-width: 280px;
        overflow-y: auto;
        padding: 14px;
        position: fixed;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.18s ease;
        width: 82vw;
        z-index: 40;
    }

    .app-shell.sidebar-collapsed .sidebar {
        overflow-y: auto;
        padding-left: 14px;
        padding-right: 14px;
        transform: translateX(0);
    }

    .nav-link {
        display: block;
    }

    .grid-4,
    .grid-2,
    .form-grid,
    .route-filter-grid,
    .route-primary-grid,
    .route-bulk-grid,
    .operations-summary-grid,
    .admin-material-add-grid,
    .work-order-filter-grid {
        grid-template-columns: 1fr;
    }

    .operations-filter-actions,
    .operations-page-header .toolbar-actions,
    .toolbar-actions {
        justify-content: flex-start;
    }

    .operations-form-card .operations-section-title,
    .route-create-card .operations-section-title,
    .route-stops-card .operations-section-title {
        display: grid;
    }

    .route-selection-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .route-live-search-layout,
    .route-selected-item,
    .route-selected-detail-item,
    .route-mode-options,
    .route-selected-fields-grid {
        grid-template-columns: 1fr;
    }

    .route-selection-toolbar .toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-material-measure-edit {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 0 16px;
    }

    .content {
        padding: 16px;
    }

    .inventory-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-buttons {
        justify-content: flex-start;
    }

    .brand-text {
        font-size: 14px;
        max-width: 100%;
    }

    .brand-logo {
        flex-basis: 40px;
        height: 40px;
        width: 40px;
    }

    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 18px;
    }

    .dashboard-hero h1 {
        font-size: 22px;
    }
}

/* UI-2 Modern Enterprise SaaS theme */
:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e5e7eb;
    --primary: #14b8a6;
    --primary-strong: #0f766e;
    --primary-dark: #0f172a;
    --accent: #22c55e;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --info: #2563eb;
    --company-accent: #14b8a6;
    --shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
    --shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.05);
}

body {
    background: var(--bg);
    color: var(--ink);
}

.app-shell {
    grid-template-columns: 268px minmax(0, 1fr);
    font-size: 13px;
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0) 210px),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100vh;
    padding: 20px 14px;
}

.brand-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--company-accent);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 10px;
}

.brand-text {
    color: #f8fafc;
    font-size: 14px;
    letter-spacing: 0;
    text-shadow: none;
}

.brand-logo {
    border: 1px solid rgba(226, 232, 240, 0.90);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    flex: 0 0 42px;
    height: 42px;
    width: 42px;
}

.brand-logo-fallback {
    align-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    border-color: transparent;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
}

.brand-name {
    font-size: 14px;
    font-weight: 800;
    max-width: 150px;
}

.sidebar-nav {
    display: grid;
    gap: 4px;
}

.nav-section {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    display: block;
    margin-top: 8px;
    padding-top: 10px;
}

.nav-section:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.nav-section-title {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    gap: 10px;
    justify-content: space-between;
    letter-spacing: 0;
    line-height: 1.25;
    padding: 10px;
    text-align: left;
    width: 100%;
}

.nav-section-title:hover {
    background: rgba(20, 184, 166, 0.10);
    border-color: rgba(20, 184, 166, 0.24);
    color: #fff;
}

.nav-section.active .nav-section-title,
.nav-section.is-open .nav-section-title {
    background: rgba(20, 184, 166, 0.13);
    border-color: rgba(45, 212, 191, 0.26);
    color: #5eead4;
}

.nav-section.active .nav-section-title {
    box-shadow: inset 3px 0 0 #14b8a6;
}

.nav-section-chevron {
    align-items: center;
    color: #94a3b8;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 18px;
    height: 18px;
    justify-content: center;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.16s ease, color 0.16s ease;
    width: 18px;
}

.nav-section.is-open .nav-section-chevron {
    color: #5eead4;
    transform: rotate(90deg);
}

.nav-section-links {
    border-left: 1px solid rgba(148, 163, 184, 0.16);
    display: grid;
    gap: 4px;
    margin: 6px 0 0 10px;
    padding-left: 8px;
}

.nav-section-links[hidden] {
    display: none !important;
}

.nav-section-links .nav-link {
    min-height: 36px;
    padding: 8px 9px;
}

.nav-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #cbd5e1;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 10px;
    line-height: 1.15;
    margin-bottom: 0;
    min-height: 40px;
    padding: 9px 10px;
}

.nav-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: #e2e8f0;
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.nav-icon svg {
    display: block;
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 17px;
}

.nav-link:hover {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.20);
    color: #fff;
    transform: translateX(2px);
}

.nav-link:hover .nav-icon {
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(45, 212, 191, 0.28);
    color: #fff;
}

.nav-link.active {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.20);
    color: #fff;
}

.nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.nav-link[data-icon]::before {
    content: none;
    display: none;
}

.sidebar-toggle {
    display: none;
}

.sidebar-footer-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #e5edf8;
    display: flex;
    gap: 10px;
    margin-top: auto;
    min-width: 0;
    padding: 10px;
}

.sidebar-user-avatar,
.avatar-initial {
    align-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 12px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.avatar-icon .nav-icon {
    background: transparent;
    border: 0;
    color: #fff;
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

.avatar-icon .nav-icon svg {
    height: 18px;
    width: 18px;
}

.sidebar-footer-card div,
.user-chip span:last-child {
    min-width: 0;
}

.sidebar-footer-card div strong,
.sidebar-footer-card div span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer-card div strong {
    font-size: 13px;
}

.sidebar-footer-card div span {
    color: #94a3b8;
    font-size: 12px;
}

.topbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    gap: 18px;
    height: 72px;
    padding: 0 24px;
}

.topbar-title {
    display: grid;
    gap: 2px;
}

.topbar-title strong {
    color: var(--ink);
    font-size: 15px;
}

.breadcrumb-text {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.topbar-search {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    color: var(--muted);
    display: flex;
    flex: 1 1 360px;
    gap: 8px;
    max-width: 460px;
    min-width: 180px;
    padding: 0 10px;
}

.topbar-search input {
    border: 0;
    color: var(--ink);
    flex: 1 1 auto;
    font: inherit;
    height: 38px;
    min-width: 0;
    outline: none;
}

.topbar-search kbd {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    font-size: 11px;
    padding: 3px 6px;
}

.topbar-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.topbar-icon {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    min-width: 38px;
    padding: 0 9px;
}

.topbar-icon:hover {
    border-color: rgba(20, 184, 166, 0.45);
    color: var(--primary-strong);
}

.user-chip {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 9px;
    max-width: 230px;
    min-width: 0;
    padding: 7px 10px;
}

.user-chip strong,
.user-chip small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chip strong {
    font-size: 13px;
}

.user-chip small {
    color: var(--muted);
    font-size: 12px;
}

.topbar-logout {
    height: 38px;
    padding: 0 12px;
}

.content {
    padding: 24px;
}

.card,
.dashboard-panel,
.inventory-table-scroll,
.mobile-section,
.job-card {
    border-color: var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.button {
    border-radius: 8px;
    min-height: 36px;
    padding: 8px 13px;
}

.button.secondary {
    background: #f1f5f9;
    color: #334155;
}

.field input,
.field select,
.field textarea {
    border-color: #d6dee8;
    border-radius: 8px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: rgba(20, 184, 166, 0.70);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.10);
    outline: none;
}

.table {
    border: 1px solid var(--line);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.table th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.table th,
.table td {
    padding: 10px 12px;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.table-primary-link {
    color: var(--primary-strong);
    font-weight: 800;
}

.table-action,
.panel-link {
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.badge,
.badge-status {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    min-height: 24px;
    padding: 5px 9px;
    white-space: nowrap;
}

.badge-neutral {
    background: #f1f5f9;
    color: #475569;
}

.badge-success {
    background: #dcfce7;
    color: #15803d;
}

.badge-warning {
    background: #fef3c7;
    color: #b45309;
}

.badge-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.badge-info {
    background: #dbeafe;
    color: #1d4ed8;
}

.page-header {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 18px;
}

.page-header h1 {
    font-size: 23px;
    line-height: 1.15;
    margin: 3px 0 4px;
}

.page-header p {
    color: var(--muted);
    margin: 0;
}

.enterprise-header {
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(37, 99, 235, 0.06)),
        #fff;
}

.eyebrow {
    color: var(--primary-strong);
    letter-spacing: 0;
}

.dashboard-page {
    display: grid;
    gap: 18px;
}

.dashboard-kpi-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    color: var(--ink);
    display: grid;
    gap: 8px;
    min-height: 142px;
    overflow: hidden;
    padding: 16px;
    position: relative;
}

.kpi-card::after {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 68px;
    opacity: 0.07;
    position: absolute;
    right: -16px;
    top: -18px;
    width: 68px;
}

.kpi-card:hover {
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.kpi-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.kpi-icon svg {
    display: block;
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}

.kpi-label,
.kpi-hint {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.kpi-card strong {
    color: var(--ink);
    font-size: 27px;
    line-height: 1;
}

.tone-teal {
    color: var(--primary-strong);
}

.tone-green {
    color: var(--success);
}

.tone-amber {
    color: var(--warning);
}

.tone-violet {
    color: #7c3aed;
}

.tone-blue {
    color: var(--info);
}

.tone-teal .kpi-icon {
    background: var(--primary-strong);
    color: #fff;
}

.tone-green .kpi-icon {
    background: var(--success);
    color: #fff;
}

.tone-amber .kpi-icon {
    background: var(--warning);
    color: #fff;
}

.tone-violet .kpi-icon {
    background: #7c3aed;
    color: #fff;
}

.tone-blue .kpi-icon {
    background: var(--info);
    color: #fff;
}

.dashboard-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.dashboard-main,
.dashboard-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.dashboard-panel {
    background: #fff;
    border: 1px solid var(--line);
    padding: 16px;
}

.panel-header {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.panel-header h2 {
    color: var(--ink);
    font-size: 16px;
    margin: 0;
}

.panel-header p {
    color: var(--muted);
    font-size: 12px;
    margin: 3px 0 0;
}

.dashboard-work-orders {
    min-width: 1060px;
}

.dashboard-bottom-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.status-list {
    display: grid;
    gap: 12px;
}

.status-row-head {
    align-items: center;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    margin-bottom: 6px;
}

.status-row-head span {
    align-items: center;
    color: #334155;
    display: inline-flex;
    font-weight: 800;
    gap: 7px;
}

.status-row-head small {
    color: var(--muted);
    font-weight: 700;
}

.status-dot {
    border-radius: 999px;
    display: inline-flex;
    height: 10px;
    width: 10px;
}

.status-track {
    background: #eef2f7;
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.status-fill {
    border-radius: inherit;
    display: block;
    height: 100%;
}

.status-fill.badge-success,
.status-dot.badge-success {
    background: var(--success);
}

.status-fill.badge-warning,
.status-dot.badge-warning {
    background: var(--warning);
}

.status-fill.badge-danger,
.status-dot.badge-danger {
    background: var(--danger);
}

.status-fill.badge-info,
.status-dot.badge-info {
    background: var(--info);
}

.status-fill.badge-neutral,
.status-dot.badge-neutral {
    background: #94a3b8;
}

.trend-bars {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, minmax(38px, 1fr));
    min-height: 210px;
    padding-top: 10px;
}

.trend-day {
    align-items: center;
    display: grid;
    gap: 7px;
    grid-template-rows: 1fr auto auto;
    height: 210px;
    justify-items: center;
}

.trend-bar {
    align-self: end;
    background: linear-gradient(180deg, var(--primary), rgba(20, 184, 166, 0.25));
    border-radius: 8px 8px 2px 2px;
    display: block;
    min-height: 8px;
    width: 100%;
}

.trend-day strong {
    font-size: 12px;
}

.trend-day small {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.activity-feed {
    display: grid;
    gap: 12px;
}

.activity-item {
    align-items: start;
    display: flex;
    gap: 10px;
}

.activity-icon {
    align-items: center;
    background: #ccfbf1;
    border-radius: 8px;
    color: var(--primary-strong);
    display: inline-flex;
    flex: 0 0 34px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
}

.activity-item strong {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
}

.activity-item p {
    color: #334155;
    font-size: 12px;
    margin: 0 0 3px;
}

.activity-item small {
    color: var(--muted);
    font-size: 11px;
}

.compact-insights {
    display: grid;
    gap: 10px;
}

.insight-row {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 11px 12px;
}

.insight-row span {
    color: #334155;
    font-weight: 800;
}

.insight-row strong {
    color: var(--primary-strong);
    font-size: 18px;
}

.empty-state {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
    padding: 18px;
    text-align: center;
}

@media (max-width: 1280px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        width: 86vw;
    }

    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topbar {
        align-items: stretch;
        flex-wrap: wrap;
        height: auto;
        padding: 12px 16px;
    }

    .topbar-search {
        flex-basis: 100%;
        max-width: none;
        order: 3;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .user-chip {
        display: none;
    }

    .dashboard-kpi-grid,
    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .topbar-icon,
    .topbar-search kbd,
    .topbar-logout {
        display: none;
    }

    .trend-bars {
        gap: 6px;
        grid-template-columns: repeat(7, minmax(28px, 1fr));
    }
}

/* UI-2 dashboard balance pass */
.dashboard-layout-balanced {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.recent-work-orders-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.recent-work-orders-panel .table-scroll {
    flex: 1 1 auto;
}

.panel-footer {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
}

.dashboard-side-stacked {
    align-content: start;
    display: grid;
    gap: 16px;
    grid-auto-rows: auto;
}

.dashboard-side-card {
    min-height: 0;
    overflow: hidden;
}

.activity-card {
    max-height: 420px;
}

.activity-card .activity-feed {
    max-height: 330px;
    overflow: hidden;
}

.activity-card .activity-item {
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 10px;
}

.activity-card .activity-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.insight-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insight-tile {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    min-height: 82px;
    padding: 12px;
}

.insight-tile span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.insight-tile strong {
    font-size: 23px;
    line-height: 1;
}

.insight-danger strong {
    color: var(--danger);
}

.insight-warning strong {
    color: var(--warning);
}

.insight-info strong {
    color: var(--info);
}

.insight-teal strong {
    color: var(--primary-strong);
}

.dashboard-lower-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

.operation-map-panel {
    display: grid;
    gap: 12px;
}

.map-card {
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(37, 99, 235, 0.10)),
        #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 92px;
    min-height: 172px;
    overflow: hidden;
    padding: 12px;
}

.map-canvas {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 30% 30%, rgba(20, 184, 166, 0.22), transparent 32%),
        radial-gradient(circle at 70% 62%, rgba(37, 99, 235, 0.18), transparent 30%),
        #ffffff;
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 8px;
    min-height: 148px;
    position: relative;
}

.map-pin {
    align-items: center;
    background: var(--primary-strong);
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
    color: #fff;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 7px;
    position: absolute;
}

.map-pin strong {
    font-size: 11px;
}

.pin-1 {
    left: 18%;
    top: 22%;
}

.pin-2 {
    left: 54%;
    top: 34%;
}

.pin-3 {
    left: 32%;
    top: 62%;
}

.pin-4 {
    left: 72%;
    top: 66%;
}

.pin-5 {
    left: 76%;
    top: 18%;
}

.map-summary {
    align-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    justify-items: center;
}

.map-summary strong {
    color: var(--primary-strong);
    font-size: 25px;
    line-height: 1;
}

.map-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.map-region-list {
    display: grid;
    gap: 7px;
}

.map-region-list > div {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 8px 10px;
}

.map-region-list span,
.map-location-list span {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-region-list strong {
    color: var(--primary-strong);
}

.map-location-list {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 6px;
    padding-top: 10px;
}

@media (max-width: 1400px) {
    .dashboard-lower-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operation-map-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1280px) {
    .dashboard-layout-balanced,
    .dashboard-lower-grid {
        grid-template-columns: 1fr;
    }

    .activity-card,
    .activity-card .activity-feed {
        max-height: none;
    }

    .operation-map-panel {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .insight-grid,
    .map-card {
        grid-template-columns: 1fr;
    }
}

/* UI-2 dashboard overlap guard + technician back action */
.dashboard-layout-balanced {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 350px);
    isolation: isolate;
    overflow: visible;
}

.dashboard-layout-balanced > .dashboard-main {
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.dashboard-layout-balanced > .dashboard-side-stacked {
    align-self: start;
    min-width: 0;
    position: relative;
    width: 100%;
    z-index: 0;
}

.recent-work-orders-panel {
    overflow: hidden;
}

.recent-work-orders-panel .table-scroll {
    max-height: 440px;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
}

.dashboard-work-orders {
    min-width: 920px;
}

.dashboard-side-stacked .dashboard-panel {
    width: 100%;
}

.activity-card {
    max-height: none;
}

.activity-card .activity-feed {
    max-height: 310px;
    overflow: auto;
    padding-right: 2px;
}

.compact-insights {
    align-self: start;
}

.technician-back-button {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 12px;
    min-height: 42px;
    width: 100%;
}

@media (max-width: 1320px) {
    .dashboard-layout-balanced {
        grid-template-columns: 1fr;
    }

    .dashboard-side-stacked {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-card .activity-feed {
        max-height: 340px;
    }
}

@media (max-width: 900px) {
    .dashboard-side-stacked {
        grid-template-columns: 1fr;
    }

    .recent-work-orders-panel .table-scroll,
    .activity-card .activity-feed {
        max-height: none;
    }
}

/* UI-2 final dashboard layout pass */
.dashboard-layout-balanced {
    gap: 18px;
    grid-template-columns: minmax(760px, 1.45fr) minmax(520px, 0.9fr);
}

.dashboard-layout-balanced > .dashboard-main {
    overflow: visible;
}

.dashboard-side-stacked {
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-side-stacked .dashboard-side-card {
    min-width: 0;
}

.recent-work-orders-panel .table-scroll {
    max-height: 430px;
}

.dashboard-work-orders {
    min-width: 840px;
}

.activity-card .activity-feed {
    max-height: 330px;
}

.activity-card .panel-header,
.compact-insights .panel-header {
    align-items: start;
}

.insight-grid {
    grid-template-columns: 1fr;
}

.insight-tile {
    min-height: 68px;
}

.technician-admin-return {
    background: #14b8a6;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    margin-top: 12px;
    width: 100%;
}

.technician-admin-return:hover {
    background: #0f766e;
}

@media (max-width: 1580px) {
    .dashboard-layout-balanced {
        grid-template-columns: minmax(680px, 1.35fr) minmax(500px, 0.95fr);
    }
}

@media (max-width: 1360px) {
    .dashboard-layout-balanced {
        grid-template-columns: 1fr;
    }

    .dashboard-side-stacked {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard-side-stacked {
        grid-template-columns: 1fr;
    }

    .dashboard-work-orders {
        min-width: 820px;
    }
}

/* UI-2 final requested dashboard order: work orders full row, side cards below */
.dashboard-layout-balanced {
    display: block;
}

.dashboard-layout-balanced > .dashboard-main {
    margin-bottom: 18px;
    overflow: visible;
    width: 100%;
}

.dashboard-layout-balanced > .dashboard-side-stacked {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    width: 100%;
}

.recent-work-orders-panel .table-scroll {
    max-height: 430px;
    overflow: auto;
}

.dashboard-work-orders {
    min-width: 980px;
    width: 100%;
}

.activity-card .activity-feed {
    max-height: 320px;
}

.compact-insights .insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .dashboard-layout-balanced > .dashboard-side-stacked,
    .compact-insights .insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .recent-work-orders-panel .table-scroll,
    .activity-card .activity-feed {
        max-height: none;
    }
}

/* Technician mobile field theme */
.technician-shell {
    background: #f4f7fb;
    max-width: 720px;
}

.technician-header {
    background:
        radial-gradient(circle at 82% 16%, rgba(20, 184, 166, 0.24), transparent 28%),
        linear-gradient(135deg, #071a35 0%, #0f2748 58%, #071426 100%);
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24);
    padding: 18px 16px 20px;
}

.technician-header-top,
.technician-header-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.technician-header-title {
    min-width: 0;
}

.technician-header-title span,
.technician-eyebrow {
    color: #99f6e4;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.technician-header-title strong {
    color: #fff;
    display: block;
    font-size: 21px;
    line-height: 1.15;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technician-header-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 14px;
}

.technician-icon-button,
.technician-back-button,
.technician-admin-return {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
    min-height: 38px;
    padding: 9px 13px;
    text-decoration: none;
}

.technician-icon-button {
    background: rgba(255, 255, 255, 0.10);
    color: #e2e8f0;
}

.technician-back-button {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.technician-admin-return {
    background: #14b8a6;
    color: #fff;
}

.technician-content {
    padding: 16px;
}

.technician-hero,
.technician-detail-hero,
.technician-card,
.technician-search-panel,
.technician-info-card,
.technician-calendar,
.technician-empty-state {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.technician-hero,
.technician-detail-hero {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 18px;
}

.technician-hero h1,
.technician-detail-hero h1 {
    color: #0f172a;
    font-size: 24px;
    line-height: 1.12;
    margin: 4px 0 6px;
}

.technician-hero p,
.technician-detail-hero p {
    color: #64748b;
    margin: 0;
}

.technician-hero-count {
    align-items: center;
    background: #ccfbf1;
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 900;
    min-height: 34px;
    padding: 7px 12px;
}

.technician-search-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px;
}

.technician-search span {
    color: #64748b;
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.technician-search input {
    background: #f8fafc;
    border: 1px solid #d7e2ee;
    border-radius: 14px;
    color: #0f172a;
    font-size: 15px;
    min-height: 48px;
    padding: 0 14px;
    width: 100%;
}

.technician-filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.technician-filter-chip {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 900;
    min-height: 38px;
    padding: 8px 14px;
    text-decoration: none;
}

.technician-filter-chip.active {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.technician-card,
.technician-calendar,
.technician-empty-state {
    margin-bottom: 14px;
    padding: 14px;
}

.technician-alert {
    border-radius: 14px;
    font-weight: 800;
    margin-bottom: 14px;
    padding: 12px 14px;
}

.technician-alert.success {
    background: #ecfdf5;
    border: 1px solid rgba(22, 163, 74, 0.22);
    color: #166534;
}

.technician-location-card .muted {
    margin: 8px 0 0;
}

.technician-primary-btn,
.technician-action-btn,
.technician-primary-actions .mobile-primary-action {
    align-items: center;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border: 0;
    border-radius: 14px;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    min-height: 50px;
    padding: 12px 16px;
    text-decoration: none;
}

.technician-section-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.technician-section-title h2 {
    color: #0f172a;
    font-size: 17px;
    margin: 0;
}

.technician-section-title span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.technician-mini-list {
    display: grid;
    gap: 8px;
}

.technician-mini-list a,
.technician-route-order-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #0f172a;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    text-decoration: none;
}

.technician-mini-list span {
    color: #64748b;
    font-size: 13px;
}

.technician-calendar summary {
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.technician-calendar summary::-webkit-details-marker {
    display: none;
}

.technician-calendar-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 12px;
}

.technician-calendar-grid a {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #334155;
    display: grid;
    min-height: 48px;
    padding: 6px 4px;
    text-align: center;
    text-decoration: none;
}

.technician-calendar-grid a.active,
.technician-calendar-grid a.has-job {
    background: #ecfdf5;
    border-color: rgba(20, 184, 166, 0.35);
    color: #0f766e;
}

.technician-calendar-grid small {
    font-size: 10px;
}

.technician-job-list {
    display: grid;
    gap: 12px;
}

.technician-job-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    color: #0f172a;
    display: flex;
    gap: 12px;
    padding: 14px;
    text-decoration: none;
}

.technician-job-icon {
    align-items: center;
    background: #ccfbf1;
    border-radius: 16px;
    color: #0f766e;
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 20px;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    text-transform: uppercase;
}

.technician-job-body {
    min-width: 0;
    width: 100%;
}

.technician-job-topline {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.technician-job-topline strong,
.technician-job-customer,
.technician-job-meta,
.technician-job-service {
    overflow-wrap: anywhere;
}

.technician-job-customer {
    font-weight: 900;
    margin: 8px 0 3px;
}

.technician-job-meta,
.technician-job-service,
.technician-job-footer span:first-child {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.technician-job-footer {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 12px;
}

.technician-action-btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 14px;
}

.technician-status-badge {
    background: #eef2ff;
    border-radius: 999px;
    color: #3730a3;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    padding: 8px 10px;
    white-space: nowrap;
}

.technician-status-badge.status-completed,
.technician-status-badge.status-control_completed,
.technician-status-badge.status-review_pending,
.technician-status-badge.status-approved,
.technician-status-badge.status-invoiced {
    background: #dcfce7;
    color: #166534;
}

.technician-status-badge.status-in_progress {
    background: #ffedd5;
    color: #c2410c;
}

.technician-status-badge.status-cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.technician-status-badge.status-assigned,
.technician-status-badge.status-open,
.technician-status-badge.status-planned {
    background: #dbeafe;
    color: #1d4ed8;
}

.technician-detail-hero {
    align-items: center;
}

.technician-stepper {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
    padding: 14px;
}

.technician-step {
    color: #94a3b8;
    display: grid;
    gap: 5px;
    justify-items: center;
    min-width: 0;
    text-align: center;
}

.technician-step span {
    align-items: center;
    background: #f1f5f9;
    border: 2px solid #d6e0ea;
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.technician-step strong {
    color: #334155;
    font-size: 12px;
}

.technician-step small {
    font-size: 11px;
}

.technician-step.done span,
.technician-step.current span {
    background: #0f766e;
    border-color: #14b8a6;
    color: #fff;
}

.technician-info-card {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
    padding: 14px;
}

.technician-info-card div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px;
}

.technician-info-card span {
    color: #64748b;
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 4px;
}

.technician-info-card strong {
    color: #0f172a;
    display: block;
    overflow-wrap: anywhere;
}

.technician-quick-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.technician-quick-actions a {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    color: #0f172a;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    min-height: 58px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
}

.technician-primary-actions {
    margin-bottom: 14px;
}

.technician-primary-actions .mobile-primary-action {
    width: 100%;
}

.technician-shell .mobile-section {
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}

.technician-shell .mobile-section summary {
    font-size: 15px;
    min-height: 52px;
}

.technician-shell .mobile-section-body {
    padding: 16px;
}

.technician-shell [data-photo-upload-form] {
    background: #f8fafc;
    border: 1px dashed rgba(20, 184, 166, 0.45);
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 14px;
}

.technician-shell .photo-upload-warning {
    background: #eff6ff;
    border-color: rgba(37, 99, 235, 0.22);
    color: #1e3a8a;
}

.technician-shell .photo-upload-warning small {
    color: #2563eb;
}

.technician-shell .field input,
.technician-shell .field select,
.technician-shell .field textarea {
    border-radius: 12px;
    font-size: 15px;
    min-height: 46px;
}

.technician-shell .job-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

#complete {
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
}

#complete .mobile-primary-action {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-radius: 16px;
    min-height: 58px;
}

@media (min-width: 760px) {
    .technician-shell {
        border-left: 1px solid #e2e8f0;
        border-right: 1px solid #e2e8f0;
    }

    .technician-quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .technician-hero,
    .technician-detail-hero,
    .technician-job-card {
        flex-direction: column;
    }

    .technician-info-card,
    .technician-quick-actions {
        grid-template-columns: 1fr;
    }

    .technician-stepper {
        gap: 6px;
        padding: 12px 8px;
    }

    .technician-step strong {
        font-size: 11px;
    }

    .technician-step span {
        height: 30px;
        width: 30px;
    }
}

.error-page-shell {
    align-items: center;
    background:
        radial-gradient(circle at 12% 8%, rgba(20, 184, 166, 0.16), transparent 28rem),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.error-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.12);
    max-width: 620px;
    padding: 34px;
    text-align: center;
    width: 100%;
}

.error-brand {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    font-size: 15px;
    font-weight: 800;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
    max-width: 100%;
}

.error-brand-logo,
.error-brand-mark {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    object-fit: contain;
    padding: 5px;
    width: 44px;
}

.error-brand-mark {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border: 0;
    color: #fff;
    font-weight: 900;
    padding: 0;
}

.error-code-pill {
    background: #ecfeff;
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    padding: 7px 13px;
}

.error-card h1 {
    color: #0f172a;
    font-size: 28px;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 10px;
}

.error-card p {
    color: #64748b;
    font-size: 15px;
    margin: 0 auto 24px;
    max-width: 480px;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

@media (max-width: 640px) {
    .error-card {
        padding: 24px;
    }

    .error-card h1 {
        font-size: 23px;
    }

    .error-actions .button {
        width: 100%;
    }
}

.landing-page {
    background: #f8fafc;
    color: #0f172a;
    min-height: 100vh;
}

.landing-nav {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 18px clamp(20px, 5vw, 72px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.landing-brand {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    font-size: 20px;
    font-weight: 900;
    gap: 10px;
    text-decoration: none;
}

.landing-brand img {
    height: 38px;
    width: 38px;
}

.landing-brand strong {
    color: #0f766e;
}

.landing-nav nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

.landing-nav nav a {
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.landing-login {
    background: #0f766e;
    border-radius: 999px;
    color: #fff !important;
    padding: 10px 16px;
}

.landing-hero {
    align-items: center;
    background: #0f172a;
    display: grid;
    gap: clamp(24px, 5vw, 58px);
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    min-height: calc(100vh - 76px);
    overflow: hidden;
    padding: clamp(42px, 7vw, 86px) clamp(20px, 5vw, 72px);
}

.landing-hero-copy {
    max-width: 760px;
}

.landing-eyebrow {
    color: #14b8a6;
    display: inline-block;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.landing-hero h1,
.landing-section-head h2,
.landing-cta h2 {
    letter-spacing: 0;
}

.landing-hero h1 {
    color: #fff;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.02;
    margin: 0 0 20px;
    max-width: 900px;
}

.landing-hero p {
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.65;
    margin: 0 0 26px;
    max-width: 680px;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-product-panel {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.28);
    padding: 22px;
}

.landing-product-top {
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    padding-bottom: 18px;
}

.landing-product-top span,
.landing-kpi-row span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.landing-product-top strong {
    background: #ecfeff;
    border-radius: 999px;
    color: #0f766e;
    font-size: 12px;
    padding: 8px 12px;
}

.landing-kpi-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    margin: 18px 0;
}

.landing-kpi-row div,
.landing-work-list div {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
}

.landing-kpi-row strong {
    color: #0f172a;
    display: block;
    font-size: 28px;
    margin-top: 8px;
}

.landing-work-list {
    display: grid;
    gap: 10px;
}

.landing-work-list div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.landing-work-list span {
    color: #0f172a;
    font-weight: 800;
}

.landing-work-list strong {
    color: #0f766e;
    font-size: 13px;
}

.landing-section,
.landing-cta {
    padding: clamp(42px, 6vw, 74px) clamp(20px, 5vw, 72px);
}

.landing-section-head {
    max-width: 760px;
}

.landing-section-head h2,
.landing-cta h2 {
    color: #0f172a;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.14;
    margin: 0 0 24px;
}

.landing-feature-grid,
.landing-pricing-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
}

.landing-feature-card,
.landing-price-card,
.landing-cta {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.landing-feature-card,
.landing-price-card {
    padding: 24px;
}

.landing-feature-card h3,
.landing-price-card h3 {
    color: #0f172a;
    font-size: 19px;
    margin: 0 0 10px;
}

.landing-feature-card p,
.landing-price-card span,
.landing-cta p {
    color: #64748b;
    line-height: 1.6;
}

.landing-price-card.featured {
    border-color: rgba(20, 184, 166, 0.55);
    box-shadow: 0 20px 52px rgba(20, 184, 166, 0.18);
}

.landing-price-card ul {
    color: #334155;
    line-height: 1.8;
    margin: 18px 0 22px;
    padding-left: 18px;
}

.landing-table-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    overflow-x: auto;
}

.landing-module-table {
    border-collapse: collapse;
    min-width: 720px;
    width: 100%;
}

.landing-module-table th,
.landing-module-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 15px 18px;
    text-align: left;
}

.landing-module-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    text-transform: uppercase;
}

.landing-module-table td:not(:first-child) {
    color: #0f766e;
    font-weight: 800;
}

.landing-cta {
    margin: 0 clamp(20px, 5vw, 72px) clamp(42px, 6vw, 74px);
}

.landing-cta p {
    max-width: 680px;
}

@media (max-width: 980px) {
    .landing-hero,
    .landing-feature-grid,
    .landing-pricing-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .landing-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-nav nav {
        justify-content: flex-start;
    }

    .landing-kpi-row {
        grid-template-columns: 1fr;
    }
}

/* Onboarding */
.onboarding-compact-card {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto;
    padding: 14px 16px;
}

.onboarding-compact-card h2,
.onboarding-summary-panel h2,
.onboarding-step-card h2 {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    margin: 2px 0 4px;
}

.onboarding-compact-card p,
.onboarding-summary-panel p,
.onboarding-step-card p {
    color: #64748b;
    margin: 0;
}

.onboarding-compact-progress {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.onboarding-compact-progress small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.onboarding-progress {
    background: #e5e7eb;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    width: 100%;
}

.onboarding-progress span {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.onboarding-compact-card.is-complete {
    border-color: rgba(22, 163, 74, 0.22);
}

.onboarding-page {
    display: grid;
    gap: 18px;
}

.onboarding-summary-panel {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.onboarding-progress-wrap {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(160px, 280px) auto;
    min-width: 220px;
}

.onboarding-progress-wrap strong {
    color: #0f766e;
    font-size: 16px;
}

.onboarding-detail-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-step-card {
    align-content: start;
    display: grid;
    gap: 14px;
}

.onboarding-step-status {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.onboarding-step-icon {
    align-items: center;
    background: #ecfeff;
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    font-size: 15px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.onboarding-step-card.is-pending .onboarding-step-icon {
    background: #fffbeb;
    border-color: rgba(245, 158, 11, 0.28);
    color: #b45309;
}

.onboarding-step-action {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 38px;
}

.onboarding-step-action .muted {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.company-settings-locked {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    display: grid;
    gap: 4px;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.company-settings-locked strong {
    color: #0f172a;
    font-size: 19px;
    line-height: 1.25;
}

.company-settings-locked p {
    color: #64748b;
    margin: 0;
}

.company-settings-logo-preview {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    margin-bottom: 8px;
    min-height: 70px;
    padding: 10px;
    width: 160px;
}

.company-settings-logo-preview img {
    max-height: 56px;
    max-width: 136px;
    object-fit: contain;
}

@media (max-width: 900px) {
    .onboarding-compact-card,
    .onboarding-summary-panel {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .onboarding-summary-panel {
        display: grid;
    }

    .onboarding-detail-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-progress-wrap {
        grid-template-columns: 1fr auto;
        min-width: 0;
    }
}

/* Admin layout overflow guards */
.app-shell,
.app-shell > main,
.topbar,
.content,
.toolbar,
.card,
.dashboard-page,
.dashboard-panel,
.dashboard-layout,
.dashboard-layout-balanced,
.dashboard-layout-balanced > .dashboard-main,
.dashboard-layout-balanced > .dashboard-side-stacked,
.work-orders-results {
    max-width: 100%;
    min-width: 0;
}

.app-shell {
    grid-template-columns: 268px minmax(0, 1fr);
    overflow-x: hidden;
    width: 100%;
}

.app-shell.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
}

.app-shell > main,
.content,
.topbar {
    overflow-x: hidden;
    width: 100%;
}

.topbar-left,
.topbar-title,
.topbar-actions,
.work-orders-results,
.recent-work-orders-panel {
    min-width: 0;
}

.work-orders-results,
.dashboard-layout-balanced > .dashboard-main,
.recent-work-orders-panel {
    overflow: hidden;
}

.table-scroll {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    width: 100%;
}

.table-scroll > .table {
    min-width: 100%;
    width: max-content;
}

/* Admin compact data tables */
.work-orders-compact-wrap,
.audit-logs-table-wrap {
    overflow-x: visible;
}

.work-orders-compact-wrap > .work-orders-table,
.audit-logs-table-wrap > .audit-logs-table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.app-shell .admin-compact-table {
    font-size: 11.5px;
}

.app-shell .admin-compact-table th,
.app-shell .admin-compact-table td {
    font-size: 11.5px;
    line-height: 1.22;
    overflow-wrap: anywhere;
    padding: 5px 6px;
    vertical-align: top;
    word-break: normal;
}

.app-shell .admin-compact-table th {
    font-size: 10.5px;
    white-space: normal;
}

.app-shell .admin-compact-table input,
.app-shell .admin-compact-table select {
    font-size: 10.5px;
    min-height: 26px;
    min-width: 0;
    padding: 4px 5px;
    width: 100%;
}

.app-shell .admin-compact-table .badge {
    display: inline-flex;
    line-height: 1.12;
    padding: 4px 6px;
    white-space: normal;
}

.app-shell .admin-compact-table .compact-button {
    font-size: 10.5px;
    min-height: 26px;
    padding: 4px 6px;
}

.work-orders-table .wo-col-no { width: 7%; }
.work-orders-table .wo-col-customer { width: 10%; }
.work-orders-table .wo-col-customer-type { width: 5.2%; }
.work-orders-table .wo-col-location-no { width: 5.8%; }
.work-orders-table .wo-col-atm { width: 5.8%; }
.work-orders-table .wo-col-location { width: 9%; }
.work-orders-table .wo-col-city { width: 5.5%; }
.work-orders-table .wo-col-district { width: 5.5%; }
.work-orders-table .wo-col-service { width: 6.8%; }
.work-orders-table .wo-col-action { width: 9%; }
.work-orders-table .wo-col-group { width: 6.2%; }
.work-orders-table .wo-col-tech { width: 7.5%; }
.work-orders-table .wo-col-date { width: 7%; }
.work-orders-table .wo-col-status { width: 6%; }
.work-orders-table .wo-col-row-action { width: 3.7%; }

.work-orders-table td:nth-child(2),
.work-orders-table td:nth-child(6),
.work-orders-table td:nth-child(9),
.work-orders-table td:nth-child(10),
.work-orders-table td:nth-child(11),
.work-orders-table td:nth-child(12) {
    white-space: normal;
}

.work-orders-table td:nth-child(1),
.work-orders-table td:nth-child(4),
.work-orders-table td:nth-child(5),
.work-orders-table td:nth-child(13) {
    overflow-wrap: normal;
    word-break: normal;
}

.work-orders-table .column-filter-row th {
    padding: 4px;
}

.audit-log-filters {
    margin-bottom: 16px;
}

.audit-log-filter-grid {
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.audit-log-filters .field label {
    font-size: 11px;
}

.audit-log-filters .field input,
.audit-log-filters .field select {
    min-height: 32px;
    padding: 7px 8px;
}

.audit-logs-table .audit-col-date { width: 12%; }
.audit-logs-table .audit-col-user { width: 15%; }
.audit-logs-table .audit-col-role { width: 7%; }
.audit-logs-table .audit-col-event { width: 11%; }
.audit-logs-table .audit-col-module { width: 8%; }
.audit-logs-table .audit-col-description { width: 26%; }
.audit-logs-table .audit-col-ip { width: 7%; }
.audit-logs-table .audit-col-record { width: 14%; }

.audit-logs-table.has-company-column .audit-col-date { width: 11%; }
.audit-logs-table.has-company-column .audit-col-company { width: 10%; }
.audit-logs-table.has-company-column .audit-col-user { width: 14%; }
.audit-logs-table.has-company-column .audit-col-role { width: 6%; }
.audit-logs-table.has-company-column .audit-col-event { width: 10%; }
.audit-logs-table.has-company-column .audit-col-module { width: 8%; }
.audit-logs-table.has-company-column .audit-col-description { width: 24%; }
.audit-logs-table.has-company-column .audit-col-ip { width: 6%; }
.audit-logs-table.has-company-column .audit-col-record { width: 11%; }

.audit-logs-table code,
.audit-logs-table details,
.audit-logs-table summary,
.audit-logs-table .muted,
.audit-url,
.audit-company-cell,
.audit-user-cell,
.audit-event-cell,
.audit-description-cell,
.audit-record-cell {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 1200px) {
    .audit-log-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .work-orders-compact-wrap,
    .audit-logs-table-wrap {
        overflow-x: auto;
    }

    .work-orders-compact-wrap > .work-orders-table {
        min-width: 980px;
    }

    .audit-logs-table-wrap > .audit-logs-table {
        min-width: 820px;
    }
}

@media (max-width: 900px) {
    .app-shell {
        display: block;
        width: 100%;
    }

    .app-shell > main,
    .topbar,
    .content {
        width: 100%;
    }
}

/* Public landing/pricing pages */
.public-site-body {
    background:
        radial-gradient(circle at 8% 12%, rgba(20, 184, 166, 0.10), transparent 26%),
        radial-gradient(circle at 94% 10%, rgba(37, 99, 235, 0.10), transparent 24%),
        #f8fbff;
    color: #0f172a;
    margin: 0;
    overflow-x: hidden;
}

.site-page {
    margin: 0 auto;
    max-width: 1440px;
    overflow: hidden;
    padding: 0 clamp(18px, 4vw, 54px) 34px;
}

.site-nav {
    align-items: center;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 18px;
    grid-template-columns: auto 1fr auto;
    margin: 0 auto 30px;
    max-width: 1180px;
    padding: 18px 26px;
    position: relative;
    z-index: 2;
}

.site-brand {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    font-size: 23px;
    font-weight: 900;
    gap: 10px;
    text-decoration: none;
}

.site-brand img {
    height: 38px;
    object-fit: contain;
    width: 38px;
}

.site-brand strong {
    color: #0ea5a4;
}

.site-nav nav {
    align-items: center;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.site-nav nav a,
.site-login,
.site-footer a {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.site-nav nav a.active {
    color: #0f766e;
    position: relative;
}

.site-nav nav a.active::after {
    background: #0f766e;
    border-radius: 999px;
    bottom: -10px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
}

.site-nav-actions,
.site-actions {
    align-items: center;
    display: flex;
    gap: 14px;
}

.site-button {
    align-items: center;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border: 1px solid rgba(15, 118, 110, 0.28);
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(20, 184, 166, 0.22);
    color: #fff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 900;
    gap: 10px;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    text-decoration: none;
    white-space: nowrap;
}

.site-button-secondary {
    background: #fff;
    border-color: #bfdbfe;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08);
    color: #0f172a;
}

.site-hero {
    align-items: center;
    display: grid;
    gap: clamp(32px, 4vw, 56px);
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    margin: 0 auto;
    max-width: 1220px;
    min-height: 460px;
    padding: 34px 0 24px;
}

.site-hero-copy {
    align-self: center;
    max-width: 700px;
    min-width: 0;
}

.site-eyebrow {
    background: #ecfeff;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    padding: 7px 12px;
}

.site-hero h1,
.pricing-hero h1 {
    color: #061532;
    font-size: clamp(2.45rem, 4vw, 3.6rem);
    letter-spacing: 0;
    line-height: 1.08;
    margin: 20px 0 18px;
    max-width: 700px;
    overflow-wrap: break-word;
    text-transform: none;
}

.site-hero p,
.pricing-hero p,
.site-section-head p,
.site-card p,
.site-cta-band p {
    color: #475569;
    font-size: 16px;
    line-height: 1.75;
}

.site-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
}

.site-trust-row span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.site-product-preview {
    align-items: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 0.26fr);
    justify-self: end;
    max-width: 760px;
    min-width: 0;
    position: relative;
    width: 100%;
}

.site-dashboard-mock,
.site-phone-mock,
.site-card,
.pricing-plan-card,
.site-table-wrap,
.site-stat-strip,
.pricing-trust-strip,
.site-cta-band {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.site-dashboard-mock {
    border-radius: 26px;
    min-height: 315px;
    min-width: 0;
    padding: 20px;
}

.site-mock-top,
.site-mock-table div,
.site-footer,
.pricing-trust-strip {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.site-mock-top span,
.site-mock-metrics small,
.site-mock-table span,
.site-phone-mock small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.site-mock-metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 22px;
}

.site-mock-metrics div {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
}

.site-mock-metrics strong {
    display: block;
    font-size: clamp(18px, 1.6vw, 23px);
    margin-top: 7px;
}

.site-mock-chart {
    align-items: end;
    background: linear-gradient(180deg, #f8fbff, #ecfeff);
    border-radius: 18px;
    display: flex;
    gap: 14px;
    height: 118px;
    margin-top: 18px;
    padding: 18px;
}

.site-mock-chart span {
    background: linear-gradient(180deg, #2563eb, #14b8a6);
    border-radius: 999px 999px 6px 6px;
    flex: 1;
}

.site-mock-table {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.site-mock-table div {
    border-bottom: 1px solid #eef2f7;
    padding: 10px 0;
}

.site-mock-table strong {
    color: #0f766e;
    font-size: 12px;
}

.site-phone-mock {
    aspect-ratio: 9 / 16;
    border: 4px solid #0f172a;
    border-radius: 26px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    box-sizing: border-box;
    margin-left: -24px;
    max-width: 172px;
    min-height: 0;
    overflow: hidden;
    padding: 11px 9px;
    position: relative;
    width: 100%;
}

.site-phone-brand {
    align-items: center;
    display: flex;
    gap: 7px;
}

.site-phone-brand > span {
    align-items: center;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.site-phone-brand > span svg {
    height: 14px;
    width: 14px;
}

.site-phone-brand > strong {
    color: #061532;
    font-size: 12px;
    line-height: 1;
}

.site-phone-welcome {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(37, 99, 235, 0.10));
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 12px;
    display: grid;
    gap: 3px;
    margin-top: 10px;
    padding: 9px;
}

.site-phone-welcome span {
    color: #0f766e;
    font-size: 10px;
    font-weight: 900;
}

.site-phone-welcome strong {
    color: #061532;
    font-size: 13px;
    line-height: 1.15;
}

.site-phone-summary {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.site-phone-summary div {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 6px 7px;
}

.site-phone-summary strong {
    color: #061532;
    font-size: 14px;
}

.site-phone-summary span {
    color: #64748b;
    font-size: 9px;
    font-weight: 900;
    text-align: right;
}

.site-phone-modules {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 9px;
}

.site-phone-modules span {
    background: #ecfeff;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 9px;
    color: #0f766e;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.1;
    min-height: 24px;
    padding: 5px 5px;
    text-align: center;
}

.site-stat-strip {
    border-radius: 22px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 20px auto 34px;
    max-width: 1040px;
    padding: 24px;
}

.site-stat-strip div {
    border-right: 1px solid #e5e7eb;
    display: grid;
    gap: 3px;
    padding: 0 18px;
}

.site-stat-strip div:last-child {
    border-right: 0;
}

.site-stat-strip strong {
    color: #061532;
    font-size: 24px;
}

.site-stat-strip span {
    color: #0f172a;
    font-weight: 900;
}

.site-stat-strip small {
    color: #64748b;
}

.site-section,
.pricing-table-section,
.pricing-faq-section {
    margin: 0 auto;
    max-width: 1180px;
    padding: 36px 0;
}

.site-section-head {
    margin: 0 auto 24px;
    max-width: 760px;
    text-align: center;
}

.site-section-head.compact {
    margin-left: 0;
    text-align: left;
}

.site-section-head h2,
.site-card h2,
.site-cta-band h2,
.pricing-table-section h2,
.pricing-faq-section h2 {
    color: #061532;
    font-size: clamp(26px, 3vw, 42px);
    letter-spacing: 0;
    line-height: 1.1;
    margin: 14px 0 10px;
    text-transform: uppercase;
}

.site-feature-grid,
.pricing-faq-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-card {
    border-radius: 18px;
    padding: 24px;
}

.site-card-icon {
    color: #0ea5a4;
    font-size: 28px;
}

.site-card h3 {
    color: #0f172a;
    font-size: 18px;
    margin: 10px 0 8px;
}

.site-split-section {
    display: grid;
    gap: 18px;
    grid-template-columns: 1.2fr 1fr 1fr;
}

.site-module-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-module-grid div {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    display: grid;
    gap: 4px;
    padding: 14px;
}

.site-module-grid small,
.site-why-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.site-why-card .site-section-head {
    margin-bottom: 0;
}

.site-why-icon,
.site-why-item-icon {
    align-items: center;
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid rgba(20, 184, 166, 0.12);
    color: #0f766e;
    display: inline-flex;
    justify-content: center;
}

.site-why-icon {
    border-radius: 22px;
    height: 64px;
    width: 64px;
}

.site-why-icon svg {
    height: 32px;
    width: 32px;
}

.site-why-list {
    display: grid;
    gap: 0;
}

.site-why-item {
    display: grid;
    gap: 14px;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 18px 0;
}

.site-why-item + .site-why-item {
    border-top: 1px solid #e5e7eb;
}

.site-why-item-icon {
    border-radius: 18px;
    height: 52px;
    width: 52px;
}

.site-why-item-icon svg {
    height: 26px;
    width: 26px;
}

.site-why-item strong {
    color: #061532;
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
}

.site-why-item p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.site-why-cta {
    justify-content: center;
    width: 100%;
}

.site-cta-band {
    align-items: center;
    border-radius: 24px;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin: 34px auto;
    max-width: 1180px;
    padding: 28px 32px;
}

.site-footer {
    color: #64748b;
    margin: 0 auto;
    max-width: 1180px;
    padding: 18px 0 4px;
}

.site-footer nav {
    display: flex;
    gap: 18px;
}

.pricing-hero {
    margin: 0 auto;
    max-width: 820px;
    padding: 32px 0 24px;
    text-align: center;
}

.pricing-hero h1 {
    font-size: clamp(2.25rem, 4vw, 3.35rem);
    margin-inline: auto;
    max-width: 820px;
}

.pricing-hero p {
    margin-inline: auto;
    max-width: 720px;
}

.billing-toggle {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    display: inline-grid;
    gap: 6px;
    grid-template-columns: 1fr 1.4fr;
    margin-top: 18px;
    min-width: 330px;
    padding: 6px;
}

.billing-toggle span,
.billing-toggle strong {
    border-radius: 999px;
    color: #0f172a;
    font-size: 14px;
    padding: 12px 18px;
}

.billing-toggle strong {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
}

.pricing-card-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin: 0 auto 24px;
    max-width: 1180px;
}

.site-mini-plans {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.site-mini-plans a {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    color: #0f172a;
    display: grid;
    gap: 12px;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 12px 14px;
    text-decoration: none;
}

.site-mini-plans strong {
    min-width: 0;
}

.site-mini-plan-icon {
    align-items: center;
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid rgba(20, 184, 166, 0.12);
    border-radius: 14px;
    color: #0f766e;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.site-mini-plan-icon svg {
    height: 24px;
    width: 24px;
}

.site-mini-plan-price {
    color: #0f766e;
    font-weight: 800;
    white-space: nowrap;
}

.site-request-page {
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    min-height: 100vh;
}

.request-hero {
    margin: 34px auto 24px;
    max-width: 760px;
    text-align: center;
}

.request-hero h1 {
    color: #0f172a;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.04;
    margin: 14px 0;
}

.request-hero p {
    color: #475569;
    font-size: 17px;
    margin: 0 auto;
    max-width: 680px;
}

.request-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    margin-bottom: 44px;
}

.request-form,
.request-summary {
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.request-form-head {
    margin-bottom: 18px;
}

.request-form-head h2,
.request-summary h2 {
    margin: 0 0 6px;
}

.request-form-head p,
.request-summary p {
    color: #64748b;
    margin: 0;
}

.site-form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-form-grid label,
.request-consent {
    display: grid;
    gap: 7px;
}

.site-form-grid .wide {
    grid-column: 1 / -1;
}

.site-form-grid span,
.request-consent span {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.site-form-grid input,
.site-form-grid select,
.site-form-grid textarea {
    background: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 13px;
    color: #0f172a;
    font: inherit;
    padding: 12px 14px;
}

.site-form-grid input:focus,
.site-form-grid select:focus,
.site-form-grid textarea:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.13);
    outline: none;
}

.request-consent {
    align-items: flex-start;
    display: flex;
    margin: 18px 0;
}

.request-consent input {
    margin-top: 3px;
}

.request-alert {
    border-radius: 14px;
    margin-bottom: 16px;
    padding: 13px 15px;
}

.request-alert.success {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.request-alert.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.request-alert ul {
    margin: 8px 0 0 18px;
}

.site-honeypot {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.request-summary ol {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.request-summary li {
    border-left: 3px solid #14b8a6;
    padding-left: 14px;
}

.request-summary li span {
    color: #64748b;
    display: block;
    font-size: 13px;
    margin-top: 3px;
}

.request-highlight {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.13), rgba(37, 99, 235, 0.10));
    border: 1px solid rgba(20, 184, 166, 0.24);
    border-radius: 16px;
    display: grid;
    gap: 4px;
    padding: 15px;
}

.request-highlight span {
    color: #475569;
    font-size: 13px;
}

.pricing-plan-card {
    border-radius: 24px;
    padding: 30px;
    position: relative;
}

.pricing-plan-card.popular {
    border-color: #14b8a6;
    transform: translateY(-8px);
}

.popular-badge {
    background: #0f766e;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    left: 50%;
    padding: 8px 22px;
    position: absolute;
    top: -18px;
    transform: translateX(-50%);
}

.pricing-plan-icon {
    align-items: center;
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid rgba(20, 184, 166, 0.12);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px rgba(15, 118, 110, 0.08);
    color: #0f766e;
    display: inline-flex;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.pricing-plan-icon svg {
    height: 31px;
    width: 31px;
}

.pricing-plan-card h2 {
    font-size: 24px;
    margin: 18px 0 4px;
}

.pricing-plan-card p,
.pricing-plan-card small {
    color: #64748b;
}

.pricing-price {
    color: #061532;
    display: block;
    font-size: 32px;
    margin-top: 18px;
}

.pricing-plan-card ul {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 24px 0;
    padding: 0;
}

.pricing-plan-card li {
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}

.pricing-plan-card li::before {
    color: #0f766e;
    content: "✓";
    font-weight: 900;
    margin-right: 10px;
}

.site-table-wrap {
    border-radius: 18px;
    overflow-x: auto;
}

.site-compare-table {
    border-collapse: collapse;
    min-width: 780px;
    width: 100%;
}

.site-compare-table th,
.site-compare-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 13px 18px;
    text-align: center;
}

.site-compare-table th:first-child,
.site-compare-table td:first-child {
    text-align: left;
}

.site-compare-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    text-transform: uppercase;
}

.site-compare-table td.highlight {
    background: rgba(20, 184, 166, 0.08);
    color: #0f766e;
    font-weight: 900;
}

.pricing-faq-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-trust-strip {
    border-radius: 18px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 20px auto;
    max-width: 1060px;
    padding: 18px;
}

.pricing-trust-strip div {
    border-right: 1px solid #e5e7eb;
    display: grid;
    gap: 4px;
    padding: 0 14px;
}

.pricing-trust-strip div:last-child {
    border-right: 0;
}

.pricing-trust-strip span {
    color: #64748b;
    font-size: 12px;
}

.site-page *,
.site-page *::before,
.site-page *::after {
    box-sizing: border-box;
}

.site-page h1,
.site-page h2,
.site-page h3,
.site-page p,
.site-page a,
.site-page span,
.site-page strong,
.site-page small,
.site-page li {
    min-width: 0;
    overflow-wrap: break-word;
}

.site-page .site-section-head h2,
.site-page .site-card h2,
.site-page .site-cta-band h2,
.site-page .pricing-table-section h2,
.site-page .pricing-faq-section h2 {
    text-transform: none;
}

.site-actions,
.site-nav-actions {
    flex-wrap: wrap;
}

.site-button {
    max-width: 100%;
    text-align: center;
}

.site-card-icon {
    align-items: center;
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 16px;
    color: #0f766e;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.site-card-icon svg {
    height: 24px;
    width: 24px;
}

.site-showcase-section {
    align-items: stretch;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1280px;
}

.site-showcase-card {
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: clamp(24px, 2.4vw, 34px);
}

.site-showcase-card h2 {
    font-size: 34px;
    line-height: 1.16;
    margin: 22px 0 14px;
}

.site-showcase-card > p {
    margin: 0 0 24px;
}

.site-card-kicker {
    align-items: center;
    align-self: flex-start;
    background: #ecfeff;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    font-size: 14px;
    font-weight: 900;
    gap: 10px;
    padding: 9px 14px;
}

.site-card-kicker-icon,
.site-soft-icon,
.site-large-soft-icon,
.site-why-item-icon {
    align-items: center;
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid rgba(20, 184, 166, 0.16);
    color: #0f766e;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.site-card-kicker-icon {
    background: transparent;
    border: 0;
    height: 22px;
    width: 22px;
}

.site-card-kicker-icon svg {
    height: 21px;
    width: 21px;
}

.site-soft-icon {
    border-radius: 16px;
    height: 50px;
    width: 50px;
}

.site-soft-icon svg {
    height: 25px;
    width: 25px;
}

.site-large-soft-icon {
    border-radius: 24px;
    height: 70px;
    width: 70px;
}

.site-large-soft-icon svg {
    height: 34px;
    width: 34px;
}

.site-module-tile-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-module-tile {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    display: grid;
    gap: 10px;
    padding: 18px;
}

.site-module-tile strong,
.site-package-copy strong,
.pricing-module-list strong {
    color: #061532;
    font-weight: 900;
}

.site-module-tile small,
.site-package-copy small {
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.site-package-list {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    display: grid;
    margin-top: 10px;
    overflow: hidden;
}

.site-package-row {
    align-items: center;
    color: #0f172a;
    display: grid;
    gap: 16px;
    grid-template-columns: 58px minmax(0, 1fr) minmax(126px, auto);
    padding: 16px 18px;
    text-decoration: none;
}

.site-package-row + .site-package-row {
    border-top: 1px solid #e2e8f0;
}

.site-package-row:hover {
    background: #f8fafc;
}

.site-package-copy {
    display: grid;
    gap: 4px;
}

.site-package-cta,
.site-text-link {
    align-items: center;
    color: #0f766e;
    display: inline-flex;
    font-size: 14px;
    font-weight: 900;
    gap: 8px;
    justify-content: flex-end;
    text-decoration: none;
}

.site-package-cta {
    white-space: nowrap;
}

.site-text-link {
    border-top: 1px solid #e2e8f0;
    justify-content: center;
    margin-top: auto;
    padding-top: 20px;
}

.site-why-showcase {
    position: relative;
}

.site-why-showcase .site-why-list {
    margin-top: 8px;
}

.site-why-showcase .site-why-item {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 18px 0;
}

.site-why-showcase .site-why-item-icon {
    border-radius: 18px;
    height: 58px;
    width: 58px;
}

.site-why-showcase .site-why-item-icon svg {
    height: 28px;
    width: 28px;
}

.pricing-hero-final {
    max-width: 920px;
}

.pricing-hero-note {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    color: #334155;
    font-weight: 800;
    line-height: 1.6;
    margin: 22px auto 0;
    max-width: 780px;
    padding: 16px 20px;
}

.pricing-hero-actions {
    justify-content: center;
    margin-top: 20px;
}

.pricing-plan-final-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-plan-final-card {
    display: flex;
    flex-direction: column;
}

.pricing-plan-final-card h2 {
    line-height: 1.18;
}

.pricing-quote-note {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: grid;
    gap: 4px;
    margin-top: 18px;
    padding: 14px;
}

.pricing-quote-note strong {
    color: #0f766e;
    font-size: 15px;
}

.pricing-quote-note span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.pricing-plan-final-card ul {
    flex: 1;
}

.pricing-plan-final-card .site-button {
    margin-top: auto;
}

.pricing-price {
    display: none;
}

.pricing-modules-section,
.pricing-option-section {
    margin: 0 auto;
    max-width: 1180px;
    padding: 40px 0;
}

.pricing-module-category-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-module-category-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pricing-category-head {
    align-items: center;
    display: flex;
    gap: 14px;
}

.pricing-category-head h3 {
    color: #061532;
    font-size: 19px;
    line-height: 1.25;
    margin: 0;
}

.pricing-module-list {
    display: grid;
    gap: 14px;
}

.pricing-module-list div {
    border-top: 1px solid #e2e8f0;
    padding-top: 14px;
}

.pricing-module-list div:first-child {
    border-top: 0;
    padding-top: 0;
}

.pricing-module-list p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
    margin: 5px 0 0;
}

.pricing-option-card {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.pricing-option-card h2 {
    font-size: 34px;
    line-height: 1.16;
    margin: 16px 0 10px;
}

.pricing-option-card p {
    margin: 0;
}

.pricing-option-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pricing-option-tags span,
.pricing-option-legend span {
    background: #f8fafc;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: #0f172a;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    line-height: 1.35;
    padding: 10px 12px;
}

.pricing-option-tags small {
    color: #0f766e;
    font-size: 12px;
}

.pricing-option-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    grid-column: 1 / -1;
}

.pricing-option-legend span {
    background: #ecfeff;
    border-color: rgba(20, 184, 166, 0.22);
    color: #0f766e;
}

.pricing-final-cta .site-actions {
    justify-content: flex-end;
}

@media (max-width: 1180px) {
    .site-showcase-section,
    .pricing-plan-final-grid,
    .pricing-module-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-package-row {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .site-package-cta {
        grid-column: 2;
        justify-content: flex-start;
    }

    .pricing-option-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .site-showcase-section,
    .pricing-plan-final-grid,
    .pricing-module-category-grid,
    .site-module-tile-grid {
        grid-template-columns: 1fr;
    }

    .site-showcase-card h2,
    .pricing-option-card h2 {
        font-size: 28px;
    }

    .site-package-row {
        align-items: start;
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 15px;
    }

    .site-package-cta {
        white-space: normal;
    }

    .site-button {
        white-space: normal;
        width: 100%;
    }

    .pricing-final-cta .site-actions,
    .pricing-hero-actions {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .site-hero {
        grid-template-columns: 1fr;
        max-width: 860px;
        min-height: 0;
        padding-top: 26px;
    }

    .site-hero-copy {
        text-align: center;
        justify-self: center;
    }

    .site-hero h1 {
        margin-inline: auto;
        max-width: 760px;
    }

    .site-hero p {
        margin-inline: auto;
        max-width: 720px;
    }

    .site-hero .site-actions,
    .site-trust-row {
        justify-content: center;
    }

    .site-product-preview {
        justify-self: center;
        max-width: 760px;
    }
}

@media (max-width: 1080px) {
    .site-nav,
    .site-hero,
    .site-split-section,
    .request-layout,
    .pricing-card-grid {
        grid-template-columns: 1fr;
    }

    .site-nav nav {
        justify-content: flex-start;
    }

    .site-product-preview {
        grid-template-columns: 1fr;
    }

    .site-phone-mock {
        justify-self: center;
        margin: 18px 0 0;
        max-width: 210px;
    }

    .site-feature-grid,
    .pricing-faq-grid,
    .pricing-trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .site-page {
        padding-inline: 14px;
    }

    .site-nav,
    .site-nav-actions,
    .site-actions,
    .site-cta-band,
    .site-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .site-nav {
        display: flex;
    }

    .site-nav nav {
        flex-wrap: wrap;
        gap: 14px;
    }

    .site-hero h1,
    .pricing-hero h1 {
        font-size: 34px;
        line-height: 1.12;
    }

    .site-mock-metrics,
    .site-stat-strip,
    .site-feature-grid,
    .site-module-grid,
    .site-form-grid,
    .pricing-faq-grid,
    .pricing-trust-strip {
        grid-template-columns: 1fr;
    }

    .site-stat-strip div,
    .pricing-trust-strip div {
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 14px;
    }

    .billing-toggle {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 1080px) and (min-width: 761px) {
    .pricing-card-grid.pricing-plan-final-grid,
    .pricing-module-category-grid,
    .site-showcase-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .pricing-card-grid.pricing-plan-final-grid,
    .pricing-module-category-grid,
    .site-showcase-section,
    .site-module-tile-grid {
        grid-template-columns: 1fr;
    }

    .pricing-final-cta .site-actions,
    .pricing-hero-actions {
        width: 100%;
    }

    .site-button {
        white-space: normal;
        width: 100%;
    }
}

/* Public marketing responsive hardening */
.public-site-body .site-page h1,
.public-site-body .site-page h2,
.public-site-body .site-page h3,
.public-site-body .site-card-kicker,
.public-site-body .site-brand span,
.public-site-body .site-package-copy strong,
.public-site-body .site-package-cta,
.public-site-body .site-text-link,
.public-site-body .pricing-plan-card h2,
.public-site-body .pricing-category-head h3,
.public-site-body .pricing-option-tags span,
.public-site-body .pricing-option-legend span,
.public-site-body .site-button {
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

.public-site-body .site-page p,
.public-site-body .site-page small,
.public-site-body .site-page li,
.public-site-body .request-alert li {
    hyphens: none;
    overflow-wrap: break-word;
    word-break: normal;
}

.public-site-body .site-card,
.public-site-body .site-showcase-card,
.public-site-body .pricing-plan-card,
.public-site-body .pricing-module-category-card,
.public-site-body .site-module-tile,
.public-site-body .request-form,
.public-site-body .request-summary {
    min-width: 0;
}

.public-site-body .site-nav nav {
    flex-wrap: wrap;
    row-gap: 10px;
}

.public-site-body .site-button {
    flex: 0 0 auto;
    min-width: max-content;
}

.public-site-body .site-actions,
.public-site-body .site-nav-actions {
    min-width: 0;
}

.public-site-body .site-showcase-section {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.public-site-body .pricing-card-grid.pricing-plan-final-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.public-site-body .pricing-module-category-grid,
.public-site-body .pricing-faq-grid,
.public-site-body .site-feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.public-site-body .site-module-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
}

.public-site-body .site-package-row {
    align-items: start;
    grid-template-columns: 54px minmax(0, 1fr);
}

.public-site-body .site-package-row > .site-soft-icon {
    grid-row: 1 / span 2;
}

.public-site-body .site-package-copy {
    min-width: 0;
}

.public-site-body .site-package-copy strong {
    display: block;
    line-height: 1.25;
    white-space: normal;
}

.public-site-body .site-package-cta {
    grid-column: 2;
    justify-content: flex-start;
    justify-self: start;
    margin-top: 2px;
    width: fit-content;
}

.public-site-body .site-cta-band {
    flex-wrap: wrap;
}

.public-site-body .site-cta-band > div:first-child {
    flex: 1 1 420px;
    min-width: 0;
}

.public-site-body .site-cta-band .site-actions {
    flex: 0 1 auto;
}

.public-site-body .request-layout {
    grid-template-columns: minmax(min(100%, 520px), 1.35fr) minmax(280px, 0.65fr);
}

@media (min-width: 1181px) {
    .public-site-body .site-landing .site-hero {
        align-items: center;
        gap: clamp(30px, 2.8vw, 44px);
        grid-template-columns: minmax(540px, 0.96fr) minmax(640px, 1.04fr);
        max-width: 1340px;
        min-height: 520px;
        padding-top: 26px;
    }

    .public-site-body .site-landing .site-hero-copy {
        max-width: 650px;
    }

    .public-site-body .site-landing .site-hero h1 {
        font-size: clamp(2.35rem, 3.05vw, 3.08rem);
        line-height: 1.08;
        max-width: 650px;
    }

    .public-site-body .site-landing .site-hero p {
        max-width: 610px;
    }

    .public-site-body .site-landing .site-product-preview {
        display: block;
        max-width: 720px;
        overflow: visible;
        padding-right: 108px;
        position: relative;
        width: 100%;
    }

    .public-site-body .site-landing .site-dashboard-mock {
        min-height: 390px;
        padding: 22px;
        width: 100%;
    }

    .public-site-body .site-landing .site-phone-mock {
        bottom: 22px;
        margin: 0;
        max-width: 118px;
        position: absolute;
        right: -18px;
        width: 118px;
        z-index: 1;
    }

    .public-site-body .site-landing .site-phone-mock span,
    .public-site-body .site-landing .site-phone-mock strong {
        hyphens: none;
        overflow-wrap: normal;
        word-break: normal;
    }

    .public-site-body .site-landing .site-phone-brand > strong {
        font-size: 9.5px;
        line-height: 1.05;
        white-space: normal;
    }

    .public-site-body .site-landing .site-phone-welcome strong {
        font-size: 11.5px;
        line-height: 1.18;
    }

    .public-site-body .site-landing .site-phone-summary span {
        font-size: 8.5px;
        white-space: nowrap;
    }

    .public-site-body .site-landing .site-phone-modules {
        display: none;
    }

    .public-site-body .site-landing .site-mock-metrics {
        gap: 8px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .public-site-body .site-landing .site-mock-metrics div {
        min-height: 86px;
        padding: 10px 9px;
    }

    .public-site-body .site-landing .site-mock-metrics small {
        display: block;
        font-size: 10.5px;
        letter-spacing: 0;
        line-height: 1.2;
        white-space: nowrap;
    }

    .public-site-body .site-landing .site-mock-metrics strong {
        font-size: clamp(19px, 1.45vw, 23px);
        line-height: 1.15;
    }

    .public-site-body .site-landing .site-mock-table div {
        gap: 16px;
    }

    .public-site-body .site-landing .site-mock-table span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .public-site-body .site-landing .site-mock-table strong {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 1200px) {
    .public-site-body .site-nav {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .public-site-body .site-nav nav,
    .public-site-body .site-nav-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1180px) {
    .public-site-body .site-landing .site-hero h1 {
        font-size: clamp(2.1rem, 4vw, 2.8rem);
        line-height: 1.1;
    }

    .public-site-body .site-landing .site-mock-metrics small,
    .public-site-body .site-landing .site-mock-table strong {
        white-space: nowrap;
    }
}

@media (max-width: 1080px) {
    .public-site-body .request-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .public-site-body .pricing-card-grid.pricing-plan-final-grid,
    .public-site-body .pricing-module-category-grid,
    .public-site-body .pricing-faq-grid,
    .public-site-body .site-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .public-site-body .pricing-card-grid.pricing-plan-final-grid,
    .public-site-body .pricing-module-category-grid,
    .public-site-body .pricing-faq-grid,
    .public-site-body .site-feature-grid,
    .public-site-body .site-showcase-section,
    .public-site-body .site-module-tile-grid,
    .public-site-body .request-layout {
        grid-template-columns: 1fr;
    }

    .public-site-body .site-button {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        width: 100%;
    }

    .public-site-body .site-package-cta,
    .public-site-body .site-text-link {
        white-space: normal;
    }

    .public-site-body .site-landing .site-hero h1 {
        font-size: clamp(1.88rem, 8vw, 2.15rem);
        line-height: 1.12;
        margin-top: 16px;
    }

    .public-site-body .site-landing .site-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .public-site-body .site-landing .site-dashboard-mock {
        padding: 18px;
    }

    .public-site-body .site-landing .site-mock-metrics div {
        min-height: 72px;
    }

    .public-site-body .site-landing .site-phone-mock {
        max-width: 176px;
    }
}

.global-feedback-overlay {
    align-items: center;
    background: rgba(15, 23, 42, 0.36);
    backdrop-filter: blur(4px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 9999;
}

.global-feedback-overlay[hidden] {
    display: none;
}

.global-feedback-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(219, 231, 229, 0.95);
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
    color: #14202e;
    display: grid;
    gap: 14px;
    grid-template-columns: 48px minmax(0, 1fr);
    max-width: 440px;
    min-width: 280px;
    padding: 22px;
    position: relative;
    width: min(440px, calc(100vw - 32px));
}

.global-feedback-status {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid rgba(16, 155, 129, 0.2);
    border-radius: 14px;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.global-feedback-status-dot {
    background: #109b81;
    border-radius: 999px;
    display: inline-block;
    height: 16px;
    position: relative;
    width: 16px;
}

.global-feedback-status-dot::after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    height: 8px;
    left: 5px;
    position: absolute;
    top: 2px;
    transform: rotate(45deg);
    width: 4px;
}

.global-feedback-spinner {
    animation: global-feedback-spin 0.8s linear infinite;
    border: 3px solid rgba(16, 155, 129, 0.18);
    border-top-color: #109b81;
    border-radius: 999px;
    display: none;
    height: 24px;
    width: 24px;
}

.global-feedback-status.is-loading .global-feedback-spinner {
    display: inline-block;
}

.global-feedback-status.is-loading .global-feedback-status-dot {
    display: none;
}

.global-feedback-content {
    min-width: 0;
    padding-right: 22px;
}

.global-feedback-content strong {
    display: block;
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 6px;
}

.global-feedback-content p {
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

.global-feedback-content ul {
    color: #b42318;
    margin: 12px 0 0 18px;
    padding: 0;
}

.global-feedback-content li {
    line-height: 1.45;
    margin: 4px 0;
    overflow-wrap: anywhere;
}

.global-feedback-close {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
}

.global-feedback-close:hover {
    background: #eef2f7;
    color: #14202e;
}

.global-feedback-overlay[data-type="error"] .global-feedback-status {
    background: #fef2f2;
    border-color: rgba(180, 35, 24, 0.2);
}

.global-feedback-overlay[data-type="error"] .global-feedback-status-dot {
    background: #b42318;
}

.global-feedback-overlay[data-type="error"] .global-feedback-status-dot::before,
.global-feedback-overlay[data-type="error"] .global-feedback-status-dot::after {
    background: #fff;
    border: 0;
    content: "";
    height: 10px;
    left: 7px;
    position: absolute;
    top: 3px;
    transform: rotate(45deg);
    width: 2px;
}

.global-feedback-overlay[data-type="error"] .global-feedback-status-dot::after {
    transform: rotate(-45deg);
}

.global-feedback-overlay[data-type="warning"] .global-feedback-status {
    background: #fff7ed;
    border-color: rgba(217, 119, 6, 0.22);
}

.global-feedback-overlay[data-type="warning"] .global-feedback-status-dot {
    background: #d97706;
}

.global-feedback-overlay[data-type="warning"] .global-feedback-status-dot::after {
    background: #fff;
    border: 0;
    border-radius: 999px;
    content: "";
    height: 3px;
    left: 6px;
    position: absolute;
    top: 11px;
    transform: none;
    width: 3px;
}

.global-feedback-overlay[data-type="warning"] .global-feedback-status-dot::before {
    background: #fff;
    content: "";
    height: 7px;
    left: 7px;
    position: absolute;
    top: 3px;
    width: 2px;
}

.human-check-box {
    background: #f8fffd;
    border: 1px solid rgba(16, 155, 129, 0.18);
    border-radius: 10px;
    display: grid;
    gap: 10px;
    margin: 16px 0;
    padding: 14px;
}

.human-check-box label {
    display: grid;
    gap: 4px;
    margin: 0;
}

.human-check-box label span {
    color: #132238;
    font-weight: 800;
}

.human-check-box label small {
    color: #64748b;
    font-size: 13px;
}

.human-check-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: max-content minmax(120px, 220px);
}

.human-check-row strong {
    background: #ecfdf5;
    border: 1px solid rgba(16, 155, 129, 0.2);
    border-radius: 8px;
    color: #0f766e;
    font-size: 18px;
    line-height: 1;
    padding: 12px 14px;
    white-space: nowrap;
}

.human-check-row input {
    min-width: 0;
}

.human-check-error {
    color: var(--danger);
    font-size: 13px;
    margin: 0;
}

@keyframes global-feedback-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 560px) {
    .global-feedback-overlay {
        padding: 14px;
    }

    .global-feedback-card {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 18px;
        width: calc(100vw - 28px);
    }

    .global-feedback-status {
        border-radius: 12px;
        height: 40px;
        width: 40px;
    }

    .global-feedback-content strong {
        font-size: 16px;
    }

    .human-check-row {
        grid-template-columns: 1fr;
    }
}