@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/InterVariable.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

.staging-banner {
    padding: 8px 20px;
    color: #3b2500;
    background: #fff2c7;
    border-bottom: 1px solid #e5c45b;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .01em;
    text-align: center;
}

/* PR #18 — shift calendar and backend-owned work-time classification */
.work-page {
    min-height: calc(100vh - var(--ui-header-height));
    padding: 34px 0 70px;
    background: #f7f9fc;
}

.work-container {
    width: min(1380px, calc(100% - 68px));
    margin-inline: auto;
}

.work-container--confirmation {
    width: min(1320px, calc(100% - 68px));
}

.work-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

.work-heading > div {
    min-width: 0;
}

.work-heading .ui-eyebrow,
.work-entry-dialog .ui-eyebrow {
    margin: 0 0 7px;
}

.work-heading h1 {
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(34px, 3vw, 42px);
    font-weight: 790;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.work-heading > div > p:last-child {
    max-width: 780px;
    margin: 10px 0 0;
    color: var(--ui-muted);
    font-size: 15px;
}

.work-heading > .ui-badge {
    margin-top: 26px;
    padding: 7px 12px;
}

.work-stepper {
    display: grid;
    min-height: 62px;
    margin: 26px 0 22px;
    padding: 0 22px;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}

.work-stepper li {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 650;
}

.work-stepper li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -8px;
    width: 16px;
    height: 1px;
    content: "";
    background: var(--ui-border-strong);
}

.work-stepper strong,
.work-stepper li > .ui-icon {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    color: var(--ui-muted);
    background: var(--ui-neutral-soft);
    border-radius: 50%;
    font-size: 11px;
}

.work-stepper li > .ui-icon {
    padding: 6px;
    color: #fff;
    background: var(--ui-success);
}

.work-stepper .is-complete {
    color: var(--ui-success-dark);
}

.work-stepper .is-current {
    color: var(--ui-brand-dark);
}

.work-stepper .is-current strong {
    color: #fff;
    background: var(--ui-brand);
    box-shadow: 0 0 0 4px var(--ui-brand-soft);
}

.work-page__alert {
    margin: 0 0 18px;
}

.work-layout,
.work-confirmation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 28px;
    align-items: start;
}

.work-calendar-card {
    min-width: 0;
    padding: 22px;
    border-radius: 15px;
}

.work-calendar-toolbar {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
}

.work-calendar-toolbar h2 {
    min-width: 170px;
    margin: 0;
    padding-inline: 8px;
    font-size: 21px;
    font-weight: 760;
    text-align: center;
}

.work-calendar-toolbar .ui-icon-button {
    width: 34px;
    height: 34px;
    border-color: transparent;
}

.work-calendar-toolbar > .ui-badge {
    margin-left: auto;
}

.work-calendar-scroll {
    min-width: 0;
    margin-top: 16px;
}

.work-calendar {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: separate;
    border-top: 1px solid var(--ui-border);
    border-left: 1px solid var(--ui-border);
    border-radius: 10px;
    overflow: hidden;
}

.work-calendar th {
    height: 37px;
    color: var(--ui-muted);
    background: #fbfcfd;
    border-right: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    font-size: 10px;
    font-weight: 780;
    text-align: center;
}

.work-calendar th abbr {
    text-decoration: none;
}

.work-calendar td {
    height: 112px;
    padding: 7px;
    vertical-align: top;
    background: #fff;
    border-right: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.work-calendar td.is-outside {
    color: var(--ui-muted-light);
    background: #fafbfc;
}

.work-calendar td.is-today {
    box-shadow: inset 0 0 0 2px #98bffc;
}

.work-calendar__date {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #475467;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}

.work-calendar td.is-today .work-calendar__date {
    color: #fff;
    background: var(--ui-brand);
}

.work-calendar__entries {
    display: grid;
    margin-top: 4px;
    gap: 4px;
}

.work-shift-chip {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 27px;
    padding: 4px 5px;
    overflow: hidden;
    color: #175cd3;
    background: var(--ui-info-soft);
    border: 0;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 760;
    line-height: 1.15;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.work-shift-chip:hover {
    box-shadow: inset 0 0 0 1px currentColor;
}

.work-shift-chip--success { color: #14763c; background: var(--ui-success-soft); }
.work-shift-chip--info { color: #175cd3; background: var(--ui-info-soft); }
.work-shift-chip--warning { color: #a15c00; background: var(--ui-warning-soft); }
.work-shift-chip--purple { color: #6941c6; background: var(--ui-purple-soft); }
.work-shift-chip--danger { color: var(--ui-danger-dark); background: var(--ui-danger-soft); }

.work-shift-chip.is-continuation {
    border-left: 2px dashed currentColor;
}

.work-calendar-note {
    display: flex;
    margin: 14px 0 0;
    align-items: center;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 11px;
}

.work-empty-inline {
    display: grid;
    min-height: 86px;
    margin-top: 14px;
    padding: 14px;
    align-items: center;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 13px;
    background: var(--ui-surface-blue);
    border: 1px dashed #a8c7f8;
    border-radius: 10px;
}

.work-empty-inline > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--ui-brand);
    background: #fff;
    border-radius: 50%;
}

.work-empty-inline strong,
.work-empty-inline p {
    display: block;
}

.work-empty-inline p {
    margin: 2px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
}

.work-sidebar,
.work-confirmation-sidebar {
    display: grid;
    gap: 14px;
}

.work-sidebar > .ui-card,
.work-confirmation-sidebar > .ui-card {
    padding: 20px;
}

.work-card-heading,
.work-section-heading,
.work-section-heading > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.work-card-heading > span,
.work-section-heading > div > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 9px;
}

.work-card-heading h2,
.work-section-heading h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 750;
}

.work-card-heading p,
.work-section-heading p {
    margin: 2px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
}

.work-presets {
    display: grid;
    margin-top: 17px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.work-presets button {
    min-height: 43px;
    padding: 8px;
    color: var(--ui-ink-soft);
    background: #fff;
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.work-presets button:hover {
    color: var(--ui-brand-dark);
    background: var(--ui-brand-soft);
    border-color: #a8c7f8;
}

.work-raw-summary {
    margin: 16px 0 0;
}

.work-raw-summary > div {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #edf0f4;
}

.work-raw-summary dt {
    color: var(--ui-muted);
    font-size: 12px;
}

.work-raw-summary dd {
    margin: 0;
    color: var(--ui-ink);
    font-size: 13px;
    font-weight: 750;
    text-align: right;
}

.work-state-value--draft { color: var(--ui-warning-dark) !important; }
.work-state-value--ready { color: var(--ui-success-dark) !important; }

.work-overlap-note,
.work-privacy-note {
    display: flex;
    margin: 16px 0 0;
    align-items: flex-start;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.work-entry-dialog {
    width: min(758px, calc(100% - 40px));
    max-height: calc(100vh - 40px);
    padding: 36px 42px 32px;
    overflow-y: auto;
    border-radius: 16px;
}

.work-entry-dialog .ui-dialog__header h2 {
    margin-top: 0;
    font-size: 25px;
    letter-spacing: -.02em;
}

.work-dialog-intro {
    margin: 8px 0 22px;
    color: var(--ui-muted);
    font-size: 13px;
}

.work-entry-form {
    display: grid;
    gap: 18px;
}

.work-entry-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.work-entry-form legend,
.work-field > span {
    display: block;
    margin-bottom: 7px;
    color: var(--ui-ink-soft);
    font-size: 12px;
    font-weight: 700;
}

.work-type-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.work-type-options label,
.work-schedule-relation label {
    position: relative;
    display: block;
}

.work-type-options input,
.work-schedule-relation input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.work-type-options label > span {
    display: flex;
    min-height: 48px;
    padding: 9px 11px;
    align-items: center;
    gap: 8px;
    color: var(--ui-ink-soft);
    background: #fff;
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.work-type-options input:checked + span {
    color: var(--ui-brand-dark);
    background: var(--ui-brand-soft);
    border-color: #7eaff5;
    box-shadow: inset 0 0 0 1px #7eaff5;
}

.work-type-options input:focus-visible + span,
.work-schedule-relation input:focus-visible + span {
    outline: 3px solid var(--ui-brand-dark);
    outline-offset: 2px;
}

.work-form-grid {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.work-form-grid--date {
    grid-template-columns: minmax(0, 1fr);
}

.work-form-grid--time {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
}

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

.work-time-arrow {
    display: grid;
    height: 46px;
    place-items: center;
    color: var(--ui-muted-light);
}

.work-field {
    min-width: 0;
}

.work-field .ui-input {
    width: 100%;
    min-height: 46px;
}

.work-field small {
    display: block;
    margin-top: 4px;
    color: var(--ui-muted);
    font-size: 10px;
}

.work-field-help {
    margin: -12px 0 0;
    color: var(--ui-muted);
    font-size: 10px;
}

.work-check,
.work-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ui-ink-soft);
    cursor: pointer;
}

.work-check input,
.work-confirm-check input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--ui-brand);
}

.work-check span,
.work-confirm-check span {
    display: grid;
    gap: 2px;
}

.work-check strong,
.work-confirm-check strong {
    font-size: 12px;
}

.work-check small,
.work-confirm-check small {
    color: var(--ui-muted);
    font-size: 10.5px;
    line-height: 1.45;
}

.work-check--compact {
    margin-top: 10px;
}

.work-schedule-relation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.work-schedule-relation legend {
    grid-column: 1 / -1;
}

.work-schedule-relation label > span {
    display: grid;
    min-height: 73px;
    padding: 11px 13px;
    gap: 2px;
    color: var(--ui-ink-soft);
    background: #fff;
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
    cursor: pointer;
}

.work-schedule-relation label > span strong {
    font-size: 11.5px;
}

.work-schedule-relation label > span small {
    color: var(--ui-muted);
    font-size: 9.5px;
    line-height: 1.4;
}

.work-schedule-relation input:checked + span {
    background: var(--ui-brand-soft);
    border-color: #7eaff5;
    box-shadow: inset 0 0 0 1px #7eaff5;
}

.work-schedule-relation input:checked + span small {
    color: var(--ui-ink-soft);
}

.work-schedule-details {
    padding: 14px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

.work-engine-note {
    margin: 0;
}

.work-dialog-actions {
    display: flex;
    padding-top: 4px;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--ui-border);
}

.work-delete-form {
    margin-top: -44px;
    width: max-content;
}

.work-delete-form .ui-button {
    min-height: 40px;
}

.work-loading,
.work-state-panel {
    display: flex;
    min-height: 480px;
    padding: 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.work-loading h2,
.work-state-panel h2 {
    margin: 17px 0 5px;
    font-size: 23px;
}

.work-loading p,
.work-state-panel p {
    max-width: 560px;
    margin: 0 0 20px;
    color: var(--ui-muted);
}

.work-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid var(--ui-brand-soft);
    border-top-color: var(--ui-brand);
    border-radius: 50%;
    animation: work-spin .8s linear infinite;
}

.work-loading__grid {
    display: grid;
    width: min(640px, 100%);
    margin-top: 25px;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.work-loading__grid i {
    height: 42px;
    background: linear-gradient(90deg, #f2f4f7, #e8edf4, #f2f4f7);
    border-radius: 5px;
}

.work-state-panel__icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: var(--ui-warning-dark);
    background: var(--ui-warning-soft);
    border-radius: 50%;
}

.work-state-panel__icon .ui-icon {
    width: 28px;
    height: 28px;
}

.work-state-panel__icon--danger {
    color: var(--ui-danger-dark);
    background: var(--ui-danger-soft);
}

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

.work-confirmation-main {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.work-review-card,
.work-classification-card,
.work-day-breakdown,
.work-provenance,
.work-unclassified {
    padding: 22px;
}

.work-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.work-entry-list {
    display: grid;
    margin: 19px 0 0;
    padding: 0;
    gap: 9px;
    list-style: none;
}

.work-entry-list li {
    display: grid;
    min-height: 72px;
    padding: 11px 13px;
    align-items: center;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    background: #fbfcfd;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
}

.work-entry-list__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--ui-success-dark);
    background: var(--ui-success-soft);
    border-radius: 9px;
}

.work-entry-list__icon--night {
    color: var(--ui-info);
    background: var(--ui-info-soft);
}

.work-entry-list strong {
    display: block;
    font-size: 12.5px;
}

.work-entry-list p,
.work-entry-list small {
    display: block;
    margin: 2px 0 0;
    color: var(--ui-muted);
    font-size: 10.5px;
}

.work-review-empty {
    display: flex;
    min-height: 120px;
    margin-top: 18px;
    padding: 20px;
    align-items: center;
    gap: 15px;
    color: var(--ui-brand);
    background: var(--ui-surface-blue);
    border: 1px dashed #a8c7f8;
    border-radius: 10px;
}

.work-review-empty > .ui-icon {
    width: 34px;
    height: 34px;
}

.work-review-empty strong { color: var(--ui-ink); }
.work-review-empty p { margin: 4px 0 0; color: var(--ui-muted); font-size: 11px; }

.work-classification-hero {
    display: grid;
    margin-top: 19px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.work-classification-hero > div {
    display: flex;
    min-height: 74px;
    padding: 13px 15px;
    justify-content: center;
    flex-direction: column;
    background: var(--ui-surface-subtle);
    border-radius: 9px;
}

.work-classification-hero span {
    color: var(--ui-muted);
    font-size: 10px;
}

.work-classification-hero strong {
    font-size: 22px;
    line-height: 1.2;
}

.work-category-grid {
    display: grid;
    margin-top: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.work-category {
    display: flex;
    min-width: 0;
    min-height: 79px;
    padding: 11px;
    align-items: center;
    gap: 8px;
    color: var(--ui-ink-soft);
    background: var(--ui-surface-subtle);
    border-radius: 8px;
}

.work-category > .ui-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.work-category > div {
    display: grid;
    min-width: 0;
}

.work-category span,
.work-category small {
    overflow: hidden;
    color: #475467;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-category em {
    display: block;
    margin-top: 4px;
    color: var(--ui-warning-dark);
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
}

.work-category strong {
    font-size: 14px;
}

.work-category--success { color: var(--ui-success-dark); background: var(--ui-success-soft); }
.work-category--info { color: #0756d6; background: var(--ui-info-soft); }
.work-category--purple { color: var(--ui-purple); background: var(--ui-purple-soft); }
.work-category--warning { color: var(--ui-warning-dark); background: var(--ui-warning-soft); }
.work-category--danger { color: var(--ui-danger-dark); background: var(--ui-danger-soft); }

.work-category-note {
    display: flex;
    margin: 13px 0 0;
    align-items: flex-start;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 10px;
}

.work-unsupported {
    margin: 0;
}

.work-day-table {
    margin-top: 18px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    overflow: hidden;
}

.work-day-table__head,
.work-day-table__row {
    display: grid;
    grid-template-columns: 130px 130px minmax(0, 1fr);
    align-items: center;
}

.work-day-table__head {
    min-height: 38px;
    color: var(--ui-muted);
    background: var(--ui-surface-subtle);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.work-day-table__head > *,
.work-day-table__row > * {
    padding: 9px 12px;
}

.work-day-table__row {
    min-height: 61px;
    border-top: 1px solid var(--ui-border);
    font-size: 11px;
}

.work-day-table__row > span {
    display: grid;
    font-weight: 650;
}

.work-day-table__row > span small {
    color: var(--ui-muted);
    font-size: 9px;
}

.work-day-table__row > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.work-day-mobile-label {
    display: none;
}

.work-day-tag {
    padding: 3px 6px;
    color: var(--ui-ink-soft);
    background: var(--ui-neutral-soft);
    border-radius: 99px;
    font-size: 8.5px;
    font-weight: 650;
}

.work-provenance {
    padding: 0;
    overflow: hidden;
}

.work-provenance summary {
    display: grid;
    min-height: 72px;
    padding: 16px 20px;
    align-items: center;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.work-provenance summary::-webkit-details-marker { display: none; }
.work-provenance summary > span { color: var(--ui-brand); }
.work-provenance summary strong,
.work-provenance summary small { display: block; }
.work-provenance summary small { color: var(--ui-muted); font-size: 10px; }
.work-provenance[open] summary > .ui-icon:last-child { transform: rotate(180deg); }

.work-provenance__body {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--ui-border);
}

.work-provenance dl {
    margin: 0;
}

.work-provenance dl > div {
    display: grid;
    padding: 7px 0;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    border-bottom: 1px solid #edf0f4;
    font-size: 10px;
}

.work-provenance dt { color: var(--ui-muted); }
.work-provenance dd { margin: 0; overflow-wrap: anywhere; }
.work-provenance code { font-size: 10px; overflow-wrap: anywhere; }

.work-slice-list {
    display: grid;
    margin: 15px 0 0;
    padding: 0;
    gap: 5px;
    list-style: none;
}

.work-slice-list li {
    display: grid;
    padding: 8px 10px;
    grid-template-columns: 160px 70px minmax(0, 1fr);
    gap: 8px;
    background: var(--ui-surface-subtle);
    border-radius: 6px;
    font-size: 9.5px;
}

.work-slice-list small { color: var(--ui-muted); }

.work-unclassified {
    display: flex;
    min-height: 150px;
    align-items: center;
    gap: 18px;
    color: var(--ui-brand);
    background: linear-gradient(135deg, var(--ui-surface-blue), #fff);
}

.work-unclassified > .ui-icon {
    width: 39px;
    height: 39px;
}

.work-unclassified h2 { margin: 0; color: var(--ui-ink); font-size: 18px; }
.work-unclassified p { margin: 4px 0 0; color: var(--ui-muted); font-size: 11px; }

.work-confirm-card {
    position: sticky;
    top: 16px;
}

.work-confirm-form {
    display: grid;
    margin-top: 18px;
    gap: 16px;
}

.work-confirm-check {
    padding: 12px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 9px;
}

.work-confirm-check--warning {
    background: var(--ui-warning-soft);
    border-color: #f5c978;
}

.work-privacy-note {
    justify-content: center;
    margin: 0;
    text-align: center;
}

@media (max-width: 1099px) {
    .work-container,
    .work-container--confirmation {
        width: min(100% - 40px, 960px);
    }

    .work-layout,
    .work-confirmation-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 18px;
    }

    .work-calendar td {
        height: 92px;
        padding: 5px;
    }

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

@media (max-width: 767px) {
    .work-page {
        padding: 22px 0 46px;
    }

    .work-container,
    .work-container--confirmation {
        width: calc(100% - 24px);
    }

    .work-heading {
        display: block;
    }

    .work-heading h1 {
        font-size: 31px;
    }

    .work-heading > div > p:last-child {
        font-size: 13px;
    }

    .work-heading > .ui-badge {
        margin-top: 12px;
    }

    .work-stepper {
        min-height: 57px;
        margin: 18px 0 14px;
        padding: 0 8px;
    }

    .work-stepper li {
        gap: 4px;
        font-size: 9px;
    }

    .work-stepper strong,
    .work-stepper li > .ui-icon {
        width: 21px;
        height: 21px;
    }

    .work-stepper li:not(:last-child)::after {
        display: none;
    }

    .work-layout,
    .work-confirmation-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .work-calendar-card,
    .work-review-card,
    .work-classification-card,
    .work-day-breakdown,
    .work-provenance__body,
    .work-unclassified {
        padding: 15px;
    }

    .work-calendar-toolbar h2 {
        min-width: 126px;
        font-size: 17px;
    }

    .work-calendar-toolbar > .ui-badge {
        display: none;
    }

    .work-calendar-scroll {
        overflow: visible;
    }

    .work-calendar th {
        height: 30px;
        font-size: 8px;
    }

    .work-calendar td {
        height: 72px;
        padding: 3px;
    }

    .work-calendar__date {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    .work-shift-chip {
        min-height: 22px;
        padding: 3px 2px;
        font-size: 9.5px;
        text-align: center;
    }

    .work-empty-inline {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .work-empty-inline .ui-button {
        width: 100%;
        grid-column: 1 / -1;
    }

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

    .work-sidebar > .ui-button,
    .work-sidebar > .work-month-card,
    .work-sidebar > .work-quick-card {
        grid-column: 1 / -1;
    }

    .work-entry-dialog {
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        padding: 20px;
    }

    .work-entry-dialog .ui-dialog__header h2 {
        font-size: 21px;
    }

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

    .work-schedule-relation {
        grid-template-columns: 1fr;
    }

    .work-dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .work-dialog-actions .ui-button {
        width: 100%;
    }

    .work-delete-form {
        width: 100%;
        margin: 10px 0 0;
    }

    .work-delete-form .ui-button {
        width: 100%;
    }

    .work-confirm-card {
        position: static;
    }

    .work-classification-hero {
        grid-template-columns: 1fr 1fr;
    }

    .work-day-table__head,
    .work-day-table__row {
        grid-template-columns: 90px 90px minmax(0, 1fr);
    }

    .work-day-table__head > *,
    .work-day-table__row > * {
        padding: 8px;
    }

    .work-slice-list li {
        grid-template-columns: 1fr auto;
    }

    .work-slice-list li small {
        grid-column: 1 / -1;
    }
}

@media (max-width: 389px) {
    .work-container,
    .work-container--confirmation {
        width: calc(100% - 20px);
    }

    .work-heading h1 {
        font-size: 28px;
    }

    .work-stepper {
        padding-inline: 4px;
    }

    .work-stepper li {
        flex-direction: column;
        gap: 3px;
        font-size: 7.5px;
        line-height: 1.1;
        text-align: center;
    }

    .work-stepper strong,
    .work-stepper li > .ui-icon {
        width: 21px;
        height: 21px;
    }

    .work-stepper li:not(:last-child)::after {
        top: 31%;
        right: -4px;
        width: 8px;
    }

    .work-calendar-card {
        padding: 10px;
    }

    .work-calendar-toolbar h2 {
        min-width: 112px;
        font-size: 15px;
    }

    .work-calendar-toolbar .ui-icon-button {
        width: 30px;
        height: 30px;
    }

    .work-calendar td {
        height: 64px;
        padding: 2px;
    }

    .work-shift-chip {
        min-height: 20px;
        font-size: 9px;
    }

    .work-sidebar {
        grid-template-columns: 1fr;
    }

    .work-sidebar > .ui-button,
    .work-sidebar > .work-month-card {
        grid-column: 1;
    }

    .work-entry-dialog {
        padding: 17px;
    }

    .work-form-grid--time,
    .work-form-grid--two {
        grid-template-columns: 1fr;
    }

    .work-time-arrow {
        display: none;
    }

    .work-type-options label > span {
        min-height: 44px;
        padding: 7px;
        font-size: 9.5px;
    }

    .work-dialog-actions {
        grid-template-columns: 1fr;
    }

    .work-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .work-section-heading > .ui-button,
    .work-section-heading > .ui-badge {
        align-self: flex-start;
    }

    .work-entry-list li {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .work-entry-list li > .ui-badge {
        grid-column: 2;
        justify-self: start;
    }

    .work-classification-hero,
    .work-category-grid {
        grid-template-columns: 1fr;
    }

    .work-category {
        min-height: 71px;
        padding: 8px;
    }

    .work-day-table__head {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .work-day-table__row {
        display: grid;
        padding: 10px;
        grid-template-columns: 1fr auto;
    }

    .work-day-table__row > * {
        padding: 2px;
    }

    .work-day-table__row > div {
        grid-column: 1 / -1;
    }

    .work-day-mobile-label {
        display: block;
        margin-bottom: 3px;
        color: var(--ui-muted);
        font-size: 8px;
        font-weight: 750;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .work-provenance summary {
        padding: 14px;
    }

    .work-provenance dl > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.analysis-explanation {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px;
    border-color: color-mix(in srgb, var(--ui-accent, #2563eb) 22%, var(--ui-border));
    background:
        radial-gradient(circle at 100% 0, rgb(37 99 235 / 8%), transparent 38%),
        var(--ui-surface, #fff);
}

.analysis-explanation__heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
}

.analysis-explanation__heading h2,
.analysis-explanation__heading p,
.analysis-explanation__result h3,
.analysis-explanation__result p,
.analysis-explanation__status p {
    margin: 0;
}

.analysis-explanation__heading h2 {
    margin-block: 3px 5px;
    font-size: clamp(20px, 2.2vw, 26px);
}

.analysis-explanation__heading > div > p:last-child,
.analysis-explanation__status,
.analysis-explanation__notice,
.analysis-explanation__disclaimer {
    color: var(--ui-text-muted, #64748b);
}

.analysis-explanation__icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    color: #1d4ed8;
    background: #dbeafe;
}

.analysis-explanation__icon .ui-icon {
    width: 22px;
    height: 22px;
}

.analysis-explanation__status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--ui-surface-subtle, #f8fafc);
}

.analysis-explanation--error .analysis-explanation__status {
    color: #991b1b;
    background: #fef2f2;
}

.analysis-explanation__form {
    display: grid;
    justify-items: start;
    gap: 15px;
}

.analysis-explanation__authorization {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    max-width: 780px;
    line-height: 1.5;
    cursor: pointer;
}

.analysis-explanation__authorization input {
    width: 19px;
    height: 19px;
    margin-top: 3px;
    accent-color: #2563eb;
}

.analysis-explanation__authorization span,
.analysis-explanation__authorization strong {
    display: block;
}

.analysis-explanation__notice {
    max-width: 840px;
    font-size: 14px;
}

.analysis-explanation__notice summary {
    color: var(--ui-text, #0f172a);
    font-weight: 700;
    cursor: pointer;
}

.analysis-explanation__notice p {
    margin: 9px 0 0;
    line-height: 1.55;
}

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

.analysis-explanation__result article {
    padding: 16px;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: 13px;
    background: var(--ui-surface-subtle, #f8fafc);
}

.analysis-explanation__result h3 {
    margin-bottom: 7px;
    font-size: 15px;
}

.analysis-explanation__result article p {
    line-height: 1.55;
}

.analysis-explanation__next,
.analysis-explanation__disclaimer {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 8px;
}

.analysis-explanation__next {
    font-weight: 700;
}

.analysis-explanation__disclaimer {
    padding-top: 2px;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .analysis-explanation {
        padding: 19px;
    }

    .analysis-explanation__heading {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .analysis-explanation__heading > .ui-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .analysis-explanation__result {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 389px) {
    .analysis-explanation {
        padding: 16px;
    }

    .analysis-explanation__heading {
        grid-template-columns: 1fr;
    }

    .analysis-explanation__icon {
        width: 40px;
        height: 40px;
    }

    .analysis-explanation__form .ui-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-spinner {
        animation: none;
        border-color: var(--ui-brand);
    }
}

:root {
    --ui-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-ink: #101828;
    --ui-ink-soft: #344054;
    --ui-muted: #667085;
    --ui-muted-light: #98a2b3;
    --ui-brand: #0865f2;
    --ui-brand-dark: #0756d6;
    --ui-brand-soft: #eaf2ff;
    --ui-surface: #ffffff;
    --ui-surface-subtle: #f8fafc;
    --ui-surface-blue: #f3f7ff;
    --ui-border: #e2e7ee;
    --ui-border-strong: #cfd6df;
    --ui-success: #16a34a;
    --ui-success-dark: #117a38;
    --ui-success-soft: #eaf8ef;
    --ui-warning: #f79009;
    --ui-warning-dark: #b54708;
    --ui-warning-soft: #fff7e8;
    --ui-danger: #c62828;
    --ui-danger-dark: #b42318;
    --ui-danger-soft: #fff0f0;
    --ui-purple: #7c3aed;
    --ui-purple-soft: #f2ebff;
    --ui-info: #2878e5;
    --ui-info-soft: #edf5ff;
    --ui-neutral-soft: #f1f3f5;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;
    --ui-radius-control: 9px;
    --ui-radius-card: 14px;
    --ui-radius-large: 18px;
    --ui-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .055);
    --ui-shadow-float: 0 20px 56px rgba(16, 24, 40, .18);
    --ui-container: 1360px;
    --ui-header-height: 80px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ui-header-height) + 20px);
}

body.ui-app {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ui-ink);
    background: var(--ui-surface);
    font-family: var(--ui-font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.ui-app--application {
    background: #f7f9fc;
}

.ui-app button,
.ui-app input,
.ui-app select,
.ui-app textarea {
    font: inherit;
}

.ui-app button,
.ui-app a {
    -webkit-tap-highlight-color: transparent;
}

.ui-app a {
    color: inherit;
    text-decoration: none;
}

.ui-app img,
.ui-app svg {
    display: block;
}

.ui-icon {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ui-container {
    width: min(var(--ui-container), calc(100% - 96px));
    margin-inline: auto;
}

.ui-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ui-skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    color: #fff;
    background: var(--ui-ink);
    border-radius: var(--ui-radius-control);
    transform: translateY(-160%);
    transition: transform .15s ease;
}

.ui-skip-link:focus {
    transform: translateY(0);
}

.ui-app :focus-visible {
    outline: 3px solid var(--ui-brand-dark);
    outline-offset: 3px;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    color: var(--ui-ink);
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -1.3px;
    line-height: 1;
    white-space: nowrap;
}

.brand span {
    color: var(--ui-brand);
}

.brand--small {
    font-size: 23px;
}

.brand--mini {
    font-size: 16px;
    letter-spacing: -.6px;
}

.marketing-header,
.app-header {
    position: relative;
    z-index: 20;
    min-height: var(--ui-header-height);
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--ui-border);
}

.marketing-header__inner,
.app-header__inner {
    position: relative;
    min-height: var(--ui-header-height);
    display: flex;
    align-items: center;
    gap: 28px;
}

.marketing-nav,
.app-nav {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 34px;
}

.marketing-nav {
    margin-left: auto;
}

.marketing-nav a,
.app-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475467;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.marketing-nav a:hover,
.app-nav a:hover {
    color: var(--ui-brand);
}

.app-nav {
    position: absolute;
    left: 50%;
    height: var(--ui-header-height);
    margin-left: 0;
    gap: 10px;
    transform: translateX(-50%);
}

.app-nav a {
    position: relative;
    height: 100%;
    padding-inline: 16px;
}

.app-nav a.is-active {
    color: var(--ui-brand);
}

.app-nav a.is-active::after {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    content: "";
    background: var(--ui-brand);
    border-radius: 3px 3px 0 0;
}

.marketing-header__cta {
    margin-left: 16px;
}

.profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: var(--ui-ink-soft);
    font-size: 14px;
    font-weight: 600;
}

.profile-chip__avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    background: var(--ui-brand);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.mobile-menu-button,
.mobile-utility-button,
.ui-icon-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    color: var(--ui-ink-soft);
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-control);
    cursor: pointer;
}

.mobile-menu-button {
    display: none;
    margin-left: auto;
}

.mobile-utility-button {
    display: none;
    margin-left: auto;
    border: 0;
    opacity: 1;
}

.mobile-menu-button .ui-icon,
.mobile-utility-button .ui-icon,
.ui-icon-button .ui-icon {
    width: 20px;
    height: 20px;
}

.mobile-navigation {
    display: none;
}

.mobile-navigation[hidden] {
    display: none !important;
}

.ui-button {
    display: inline-flex;
    min-height: 42px;
    padding: 9px 16px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--ui-ink-soft);
    background: #fff;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-control);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ui-button:not(:disabled):hover {
    transform: translateY(-1px);
}

.ui-button--primary {
    color: #fff;
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    box-shadow: 0 1px 2px rgba(8, 101, 242, .22);
}

.ui-app .ui-button--primary {
    color: #fff;
}

.ui-button--primary:not(:disabled):hover {
    background: var(--ui-brand-dark);
    border-color: var(--ui-brand-dark);
}

.ui-button--outline {
    color: var(--ui-ink-soft);
    background: #fff;
    border-color: var(--ui-border-strong);
}

.ui-button--outline:not(:disabled):hover {
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-color: #a8c7f8;
}

.ui-button--danger {
    color: #fff;
    background: var(--ui-danger);
    border-color: var(--ui-danger);
}

.ui-app .ui-button--danger {
    color: #fff;
}

.ui-button--large {
    min-height: 54px;
    padding-inline: 23px;
    font-size: 15px;
}

.ui-button--small {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 12px;
}

.ui-button--full {
    width: 100%;
}

.ui-button:disabled,
.ui-icon-button:disabled {
    opacity: .52;
    cursor: not-allowed;
}

.ui-eyebrow {
    display: inline-flex;
    margin: 0;
    align-items: center;
    gap: 8px;
    color: var(--ui-brand);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .01em;
}

.ui-badge {
    display: inline-flex;
    width: max-content;
    min-height: 25px;
    padding: 4px 10px;
    align-items: center;
    color: var(--ui-ink-soft);
    background: var(--ui-neutral-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
}

.ui-badge--info { color: #175cd3; background: var(--ui-info-soft); }
.ui-badge--success { color: var(--ui-success-dark); background: var(--ui-success-soft); }
.ui-badge--warning { color: var(--ui-warning-dark); background: var(--ui-warning-soft); }
.ui-badge--neutral { color: #475467; background: var(--ui-neutral-soft); }

.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-card);
}

.ui-alert {
    display: flex;
    padding: 15px 16px;
    align-items: flex-start;
    gap: 11px;
    color: #175cd3;
    background: var(--ui-info-soft);
    border: 1px solid #cae0ff;
    border-radius: 10px;
    font-size: 13px;
}

.ui-alert > .ui-icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.ui-alert span {
    display: block;
}

.ui-alert strong {
    display: block;
    color: inherit;
}

.ui-alert--compact {
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.4;
}

.ui-alert--success { color: var(--ui-success-dark); background: var(--ui-success-soft); border-color: #c5ebd2; }
.ui-alert--warning { color: #934a08; background: var(--ui-warning-soft); border-color: #fedba8; }
.ui-alert--danger { color: var(--ui-danger-dark); background: var(--ui-danger-soft); border-color: #fecaca; }

/* Landing */
.landing-hero {
    overflow: hidden;
    padding: 42px 0 36px;
    background: linear-gradient(180deg, #fff 0%, #fff 77%, #fbfcff 100%);
}

.landing-hero__grid {
    display: grid;
    grid-template-columns: minmax(440px, 526px) minmax(660px, 1fr);
    gap: 66px;
    align-items: center;
}

.landing-hero__copy {
    padding: 18px 0 8px;
}

.landing-hero h1 {
    max-width: 570px;
    margin: 17px 0 20px;
    color: var(--ui-ink);
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 1.075;
}

.landing-hero h1 span {
    color: var(--ui-brand);
}

.landing-hero__lead {
    max-width: 530px;
    margin: 0;
    color: var(--ui-muted);
    font-size: 18px;
    line-height: 1.62;
}

.landing-hero__actions {
    display: flex;
    margin-top: 29px;
    gap: 12px;
}

.landing-hero__actions .ui-button {
    min-width: 230px;
}

.landing-hero__scope {
    display: flex;
    margin: 19px 0 0;
    align-items: center;
    gap: 8px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 550;
}

.landing-hero__scope .ui-icon {
    color: var(--ui-success);
}

.product-preview {
    overflow: hidden;
    min-height: 460px;
    background: #fff;
    border: 1px solid #dae1ec;
    border-radius: 16px;
    box-shadow: 0 22px 62px rgba(15, 23, 42, .12);
}

.product-preview__top {
    display: flex;
    height: 53px;
    padding: 0 19px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid var(--ui-border);
}

.product-preview__steps {
    display: flex;
    gap: 18px;
    color: var(--ui-muted);
    font-size: 8px;
    font-weight: 700;
}

.product-preview__steps span:first-child {
    color: var(--ui-brand);
}

.product-preview__grid {
    display: grid;
    min-height: 407px;
    padding: 19px;
    grid-template-columns: .87fr 1.18fr .95fr;
    gap: 11px;
    background: #f7f9fc;
}

.preview-panel {
    min-width: 0;
    padding: 14px;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: 9px;
    box-shadow: 0 2px 7px rgba(16, 24, 40, .035);
}

.preview-panel__title {
    display: flex;
    margin: 0 0 13px;
    align-items: center;
    gap: 6px;
    color: var(--ui-ink-soft);
    font-size: 10px;
    font-weight: 750;
}

.preview-panel__title--center {
    justify-content: center;
}

.preview-drop {
    display: flex;
    min-height: 118px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--ui-brand);
    background: #fbfdff;
    border: 1px dashed #9bc2fa;
    border-radius: 7px;
    text-align: center;
}

.preview-drop > .ui-icon {
    width: 25px;
    height: 25px;
}

.preview-drop strong {
    color: var(--ui-ink-soft);
    font-size: 8px;
}

.preview-drop span {
    color: var(--ui-muted);
    font-size: 7px;
}

.preview-facts {
    margin: 16px 0 0;
}

.preview-facts div {
    display: flex;
    padding: 7px 0;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f4;
    font-size: 7px;
}

.preview-facts dt { color: var(--ui-muted); }
.preview-facts dd { margin: 0; color: var(--ui-ink); font-weight: 750; }

.preview-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.preview-calendar span {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    color: #475467;
    background: #f3f5f8;
    border-radius: 4px;
    font-size: 7px;
    font-weight: 650;
}

.preview-calendar span.is-work { color: #15733a; background: #eaf8ef; }
.preview-calendar span.is-night { color: #175cd3; background: #eaf2ff; }
.preview-calendar span.is-free { color: #a15c00; background: #fff5df; }

.preview-summary {
    display: grid;
    margin-top: 15px;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.preview-summary span {
    display: flex;
    padding: 9px 6px;
    flex-direction: column;
    color: var(--ui-muted);
    background: #f8fafc;
    border-radius: 5px;
    font-size: 6px;
    text-align: center;
}

.preview-summary strong {
    color: var(--ui-ink);
    font-size: 10px;
}

.preview-panel--result {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

.preview-result__check {
    display: grid;
    width: 34px;
    height: 34px;
    margin: 3px auto 9px;
    place-items: center;
    color: #fff;
    background: var(--ui-success);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--ui-success-soft);
}

.preview-result__amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.preview-result__amounts span,
.preview-result__coverage {
    display: flex;
    padding: 8px;
    flex-direction: column;
    color: var(--ui-muted);
    background: #f7f9fc;
    border-radius: 5px;
    font-size: 6px;
}

.preview-result__amounts strong {
    color: var(--ui-ink);
    font-size: 9px;
    white-space: nowrap;
}

.preview-result__coverage {
    margin-top: 9px;
    flex-direction: row;
    justify-content: space-between;
}

.preview-result__coverage strong { color: var(--ui-ink); }

.preview-result__difference {
    display: flex;
    margin-top: auto;
    padding: 12px;
    align-items: center;
    justify-content: space-between;
    color: #934a08;
    background: var(--ui-warning-soft);
    border: 1px solid #fee0aa;
    border-radius: 7px;
    font-size: 7px;
}

.preview-result__difference strong { font-size: 11px; }

.landing-steps {
    display: grid;
    padding-block: 0 36px;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.step-card {
    position: relative;
    display: flex;
    min-height: 128px;
    padding: 23px 28px;
    align-items: center;
    gap: 17px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: 0 3px 14px rgba(16, 24, 40, .045);
}

.step-card__number {
    position: absolute;
    top: 12px;
    left: 12px;
    color: var(--ui-muted);
    font-size: 9px;
    font-weight: 750;
}

.step-card__icon,
.feature-card__icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 12px;
}

.step-card__icon .ui-icon,
.feature-card__icon .ui-icon {
    width: 23px;
    height: 23px;
}

.step-card h3,
.feature-card h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}

.step-card p,
.feature-card p {
    margin: 6px 0 0;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.45;
}

.step-card__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -32px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--ui-muted-light);
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    transform: translateY(-50%);
}

.trust-strip {
    display: grid;
    min-height: 70px;
    padding: 13px 30px;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    color: #1f3f78;
    background: #eef5ff;
    border: 1px solid #d7e6fd;
    border-radius: 11px;
}

.trust-strip > div {
    display: flex;
    min-width: 0;
    padding-inline: 24px;
    align-items: center;
    gap: 12px;
}

.trust-strip > div + div {
    border-left: 1px solid #cfdef4;
}

.trust-strip > div > .ui-icon {
    width: 22px;
    height: 22px;
    color: var(--ui-brand);
}

.trust-strip p {
    display: flex;
    margin: 0;
    flex-direction: column;
    font-size: 11px;
}

.trust-strip strong { color: #15345f; font-size: 12px; }
.trust-strip span { color: #567092; }

.feature-grid {
    display: grid;
    padding-block: 36px 28px;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card {
    display: flex;
    min-height: 154px;
    padding: 25px;
    align-items: flex-start;
    gap: 17px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
}

.feature-card a {
    display: inline-flex;
    margin-top: 11px;
    align-items: center;
    gap: 5px;
    color: var(--ui-brand);
    font-size: 11px;
    font-weight: 750;
}

.landing-note {
    padding-bottom: 32px;
}

.landing-note p {
    margin: 0;
    padding: 12px 16px;
    color: var(--ui-muted);
    background: var(--ui-surface-subtle);
    border-radius: 8px;
    font-size: 11px;
    text-align: center;
}

.marketing-footer {
    background: #fff;
    border-top: 1px solid var(--ui-border);
}

.marketing-footer__inner {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.marketing-footer p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 12px;
}

/* Dashboard */
.dashboard-page {
    padding-block: 28px 38px;
}

.dashboard-heading {
    position: relative;
    padding-right: 190px;
}

.dashboard-heading .ui-badge {
    position: absolute;
    top: 9px;
    right: 0;
}

.dashboard-heading h1 {
    margin: 0;
    font-size: clamp(38px, 3.35vw, 48px);
    font-weight: 800;
    letter-spacing: -1.9px;
    line-height: 1.15;
}

.dashboard-heading > p:last-child {
    margin: 8px 0 0;
    color: var(--ui-muted);
    font-size: 14px;
}

.flow-steps {
    display: grid;
    margin: 28px 0 24px;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    list-style: none;
    max-width: 934px;
}

.flow-steps li {
    position: relative;
    display: flex;
    min-height: 74px;
    padding: 16px 20px;
    align-items: center;
    gap: 12px;
    color: var(--ui-muted);
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
}

.flow-steps li > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #fff;
    background: var(--ui-muted);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.flow-steps li > .ui-icon {
    width: 21px;
    height: 21px;
}

.flow-steps li strong {
    font-size: 14px;
}

.flow-steps li.is-current {
    color: var(--ui-brand-dark);
    background: var(--ui-brand-soft);
    border-color: #aecdfa;
    box-shadow: inset 0 -3px 0 var(--ui-brand);
}

.flow-steps li.is-current > span {
    background: var(--ui-brand);
}

.dashboard-workspace {
    display: grid;
    grid-template-columns: .89fr 1.14fr .95fr;
    gap: 20px;
    align-items: stretch;
}

.dashboard-column {
    min-width: 0;
    padding: 20px;
}

.card-heading,
.calendar-heading {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-heading h2,
.calendar-heading h2,
.result-status h2 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 750;
}

.card-heading h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-heading h2 .ui-icon {
    color: var(--ui-brand);
}

.card-heading .ui-icon-button {
    width: 32px;
    height: 32px;
    border: 0;
}

.foundation-drop-zone {
    display: flex;
    min-height: 190px;
    margin-top: 13px;
    padding: 22px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: var(--ui-brand);
    background: #fbfdff;
    border: 1.5px dashed #9bc2fa;
    border-radius: 11px;
    text-align: center;
}

.foundation-drop-zone > .ui-icon {
    width: 39px;
    height: 39px;
}

.foundation-drop-zone strong {
    color: var(--ui-ink);
    font-size: 15px;
}

.foundation-drop-zone > span {
    max-width: 275px;
    margin-bottom: 5px;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.45;
}

.dashboard-upload > .ui-alert {
    margin-top: 12px;
}

.extracted-facts {
    margin-top: 17px;
}

.extracted-facts h3 {
    margin: 0;
    color: var(--ui-ink-soft);
    font-size: 12px;
}

.extracted-facts dl {
    margin: 10px 0 16px;
}

.extracted-facts dl div {
    display: flex;
    min-height: 47px;
    padding: 9px 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #edf0f4;
}

.extracted-facts dt {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 12px;
}

.extracted-facts dd {
    margin: 0;
    color: var(--ui-ink);
    font-size: 12px;
    font-weight: 750;
    text-align: right;
}

.calendar-heading {
    justify-content: center;
}

.calendar-heading h2 {
    min-width: 120px;
    text-align: center;
}

.calendar-heading .ui-button:disabled {
    color: var(--ui-brand-dark);
    background: #fff;
    border-color: #8ab8f8;
    opacity: 1;
}

.calendar-heading .ui-icon-button {
    width: 30px;
    height: 30px;
    border: 0;
}

.calendar-heading .ui-button {
    margin-left: auto;
}

.calendar-weekdays,
.mini-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
    margin-top: 10px;
}

.calendar-weekdays span {
    padding: 6px 0;
    color: var(--ui-muted);
    font-size: 9px;
    font-weight: 750;
    text-align: center;
}

.mini-calendar {
    overflow: hidden;
    border-top: 1px solid var(--ui-border);
    border-left: 1px solid var(--ui-border);
    border-radius: 8px;
}

.mini-calendar__day {
    min-width: 0;
    min-height: 70px;
    padding: 5px;
    color: #475467;
    background: #fff;
    border-right: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    font-size: 9px;
}

.mini-calendar__day.is-muted {
    color: var(--ui-muted);
    background: #fafbfc;
}

.shift-chip {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    padding: 3px 2px;
    border-radius: 4px;
    font-size: 8.5px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shift-chip--success { color: #14763c; background: var(--ui-success-soft); }
.shift-chip--info { color: #175cd3; background: var(--ui-info-soft); }
.shift-chip--warning { color: #a15c00; background: var(--ui-warning-soft); }
.shift-chip--purple { color: #6941c6; background: var(--ui-purple-soft); }

.work-summary {
    display: grid;
    margin-top: 14px;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.summary-card {
    display: flex;
    min-width: 0;
    min-height: 63px;
    padding: 10px 9px;
    align-items: center;
    gap: 5px;
    background: var(--ui-surface-subtle);
    border-radius: 7px;
}

.summary-card > .ui-icon {
    width: 17px;
    height: 17px;
}

.summary-card p {
    display: flex;
    min-width: 0;
    margin: 0;
    flex-direction: column;
}

.summary-card span {
    overflow: hidden;
    color: #475467;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.summary-card--success { color: var(--ui-success); background: var(--ui-success-soft); }
.summary-card--info { color: var(--ui-info); background: var(--ui-info-soft); }
.summary-card--purple { color: var(--ui-purple); background: var(--ui-purple-soft); }
.summary-card--warning { color: var(--ui-warning-dark); background: var(--ui-warning-soft); }

.dashboard-calendar > .ui-alert {
    margin-top: 13px;
}

.dashboard-result {
    padding-top: 36px;
    background: linear-gradient(180deg, #f2fcf5 0%, #ffffff 44%);
}

.result-status {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.result-status > span {
    display: grid;
    width: 43px;
    height: 43px;
    margin: 2px 0 12px;
    place-items: center;
    color: #fff;
    background: var(--ui-success);
    border-radius: 50%;
    box-shadow: 0 0 0 7px var(--ui-success-soft);
}

.result-status .ui-badge {
    margin-bottom: 8px;
}

.result-status small {
    margin-top: 3px;
    color: var(--ui-muted);
    font-size: 10px;
}

.result-amounts {
    display: grid;
    margin-top: 18px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.result-amounts > div {
    display: flex;
    padding: 12px 10px;
    flex-direction: column;
    color: var(--ui-muted);
    background: var(--ui-surface-subtle);
    border-radius: 8px;
    font-size: 11px;
    text-align: center;
}

.result-amounts strong {
    color: var(--ui-ink);
    font-size: 22px;
}

.result-coverage {
    display: grid;
    margin-top: 13px;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    color: var(--ui-muted);
    font-size: 10px;
}

.result-coverage strong { color: var(--ui-ink); }

.result-coverage > div {
    overflow: hidden;
    height: 6px;
    grid-column: 1 / -1;
    background: #e8edf4;
    border-radius: 99px;
}

.result-coverage i {
    display: block;
    width: 90%;
    height: 100%;
    background: var(--ui-success);
    border-radius: inherit;
}

.result-comparison {
    margin-top: 14px;
    border-top: 1px solid var(--ui-border);
}

.result-comparison > div {
    display: grid;
    min-height: 48px;
    padding: 8px 0;
    align-items: center;
    grid-template-columns: 1.2fr .48fr .48fr .82fr;
    gap: 5px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: 10px;
}

.result-comparison__header {
    min-height: 29px !important;
    color: var(--ui-muted) !important;
    font-size: 8px !important;
    font-weight: 700;
    text-transform: uppercase;
}

.comparison-value {
    color: var(--ui-ink-soft);
    text-align: right;
}

.comparison-value::before {
    content: "";
}

.comparison-name {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: var(--ui-ink-soft);
}

.status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    background: var(--ui-muted-light);
    border-radius: 50%;
}

.status-dot--success { background: var(--ui-success); }
.status-dot--warning { background: var(--ui-warning); }
.status-dot--neutral { background: var(--ui-muted-light); }

.comparison-status {
    justify-self: end;
    font-size: 9px;
    text-align: right;
}

.comparison-status--success { color: var(--ui-success-dark); }
.comparison-status--warning { color: var(--ui-warning-dark); }
.comparison-status--neutral { color: var(--ui-muted); }

.possible-difference {
    display: flex;
    margin-top: 14px;
    padding: 12px;
    align-items: center;
    gap: 11px;
    color: #9a4e07;
    background: var(--ui-warning-soft);
    border: 1px solid #fedba8;
    border-radius: 9px;
}

.possible-difference > .ui-icon {
    width: 23px;
    height: 23px;
}

.possible-difference p {
    display: flex;
    margin: 0;
    flex-direction: column;
}

.possible-difference span { font-size: 9px; }
.possible-difference strong { color: #873e04; font-size: 19px; }

.dashboard-result > .ui-alert {
    margin-block: 12px;
}

.ui-text-link {
    display: flex;
    margin-top: 13px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--ui-brand);
    font-size: 11px;
    font-weight: 750;
}

.dashboard-disclaimer {
    display: flex;
    margin: 18px 0 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 10px;
}

/* Shared component catalogue */
.component-page,
.error-page {
    padding-block: 36px 60px;
}

.component-heading,
.error-page {
    max-width: 900px;
}

.component-heading h1,
.error-page h1 {
    margin: 8px 0;
    font-size: 38px;
    letter-spacing: -1.2px;
}

.component-heading > p:last-child,
.error-page p {
    margin: 0;
    color: var(--ui-muted);
}

.component-section {
    margin-top: 25px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-card);
}

.component-section h2 {
    margin: 0 0 18px;
    font-size: 18px;
}

.component-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

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

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

.ui-loader-state {
    display: flex;
    min-height: 72px;
    padding: 15px 16px;
    align-items: center;
    gap: 13px;
    color: var(--ui-ink-soft);
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 13px;
}

.ui-loader-state span:last-child {
    display: flex;
    flex-direction: column;
}

.ui-loader-state small { color: var(--ui-muted); }

.ui-loader {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    border: 3px solid #cfe0fa;
    border-top-color: var(--ui-brand);
    border-radius: 50%;
    animation: ui-spin .8s linear infinite;
}

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

.ui-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--ui-ink-soft);
    font-size: 13px;
    font-weight: 650;
}

.ui-input,
.ui-select {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--ui-ink);
    background: #fff;
    border: 1px solid var(--ui-muted);
    border-radius: var(--ui-radius-control);
}

.ui-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ui-ink-soft);
    font-size: 13px;
}

.ui-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--ui-brand);
}

.ui-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-ink-soft);
    cursor: pointer;
    font-size: 13px;
}

.ui-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ui-toggle > span {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    background: var(--ui-muted);
    border: 1px solid var(--ui-ink-soft);
    border-radius: 999px;
    transition: background-color .15s ease;
}

.ui-toggle > span::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    content: "";
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .24);
    transition: transform .15s ease;
}

.ui-toggle input:checked + span { background: var(--ui-brand); border-color: var(--ui-brand-dark); }
.ui-toggle input:checked + span::after { transform: translateX(18px); }
.ui-toggle input:focus-visible + span { outline: 3px solid var(--ui-brand-dark); outline-offset: 3px; }
.ui-toggle em { font-style: normal; }

.ui-segmented {
    display: inline-flex;
    width: max-content;
    margin: 0;
    padding: 3px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

.ui-segmented legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.ui-segmented label { cursor: pointer; }
.ui-segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ui-segmented span { display: block; padding: 7px 12px; color: var(--ui-muted); border-radius: 7px; font-size: 12px; font-weight: 650; }
.ui-segmented input:checked + span { color: var(--ui-brand-dark); background: #fff; box-shadow: inset 0 -2px 0 var(--ui-brand), 0 0 0 1px #aecdfa; }
.ui-segmented input:focus-visible + span { outline: 3px solid var(--ui-brand-dark); outline-offset: 2px; }

.ui-tooltip-control {
    position: relative;
}

.ui-tooltip {
    position: absolute;
    z-index: 40;
    bottom: calc(100% + 9px);
    left: 50%;
    width: max-content;
    max-width: min(260px, 75vw);
    padding: 8px 10px;
    color: #fff;
    background: var(--ui-ink);
    border-radius: 7px;
    box-shadow: var(--ui-shadow-card);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    visibility: hidden;
    opacity: 0;
    pointer-events: auto;
    transform: translate(-50%, 4px);
    transition: opacity .12s ease, transform .12s ease;
}

.ui-tooltip::after {
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 9px;
    content: "";
}

.ui-tooltip-control:hover .ui-tooltip,
.ui-tooltip-control:focus-visible .ui-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.ui-tooltip-control[data-tooltip-dismissed="true"] .ui-tooltip {
    visibility: hidden;
    opacity: 0;
}

.ui-table-wrap {
    overflow-x: auto;
}

.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ui-table th,
.ui-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--ui-border);
    text-align: left;
}

.ui-table thead th {
    color: var(--ui-muted);
    background: var(--ui-surface-subtle);
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.ui-empty-state,
.modal-demo {
    display: flex;
    min-height: 210px;
    padding: 28px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--ui-surface-subtle);
    border: 1px dashed var(--ui-border-strong);
    border-radius: 12px;
    text-align: center;
}

.ui-empty-state > .ui-icon {
    width: 34px;
    height: 34px;
    color: var(--ui-brand);
}

.ui-empty-state h3 { margin: 10px 0 4px; }
.ui-empty-state p,
.modal-demo p { margin: 0 0 16px; color: var(--ui-muted); font-size: 13px; }

.ui-dialog {
    width: min(520px, calc(100% - 32px));
    padding: 25px;
    color: var(--ui-ink);
    background: #fff;
    border: 0;
    border-radius: var(--ui-radius-large);
    box-shadow: var(--ui-shadow-float);
}

.ui-dialog::backdrop {
    background: rgba(16, 24, 40, .55);
    backdrop-filter: blur(2px);
}

.ui-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.ui-dialog h2 { margin: 6px 0 0; font-size: 21px; }
.ui-dialog > p { color: var(--ui-muted); }

.ui-dialog__actions {
    display: flex;
    margin-top: 24px;
    justify-content: flex-end;
    gap: 10px;
}

.error-page .ui-button { margin-top: 22px; }

@media (max-width: 1399px) {
    .ui-container { width: min(var(--ui-container), calc(100% - 64px)); }
    .landing-hero__grid { grid-template-columns: minmax(390px, 460px) minmax(570px, 1fr); gap: 40px; }
    .landing-hero h1 { font-size: 48px; }
    .dashboard-workspace { grid-template-columns: .9fr 1.12fr .98fr; gap: 14px; }
    .dashboard-column { padding: 16px; }
}

@media (max-width: 1199px) {
    .marketing-nav { gap: 20px; }
    .marketing-header__cta { margin-left: 0; }
    .landing-hero__grid { grid-template-columns: minmax(340px, .82fr) minmax(520px, 1.18fr); gap: 30px; }
    .product-preview__grid { padding: 14px; gap: 8px; }
    .preview-panel { padding: 10px; }
    .dashboard-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-result { grid-column: 1 / -1; }
    .dashboard-result .result-comparison > div { font-size: 10px; }
}

@media (max-width: 991px) {
    :root { --ui-header-height: 70px; }
    .ui-container { width: calc(100% - 40px); }
    .marketing-nav,
    .marketing-header__cta,
    .app-nav,
    .profile-chip { display: none; }
    .mobile-menu-button { display: inline-grid; }
    .app-header .mobile-utility-button { display: inline-grid; }
    .app-header .mobile-menu-button { margin-left: 0; }
    .mobile-navigation {
        display: flex;
        padding: 10px 20px 20px;
        flex-direction: column;
        gap: 2px;
        background: #fff;
        border-top: 1px solid var(--ui-border);
        box-shadow: 0 14px 22px rgba(16, 24, 40, .08);
    }
    .mobile-navigation a:not(.ui-button) {
        display: flex;
        min-height: 44px;
        padding: 10px 8px;
        align-items: center;
        gap: 9px;
        color: var(--ui-ink-soft);
        font-size: 14px;
        font-weight: 650;
    }
    .landing-hero { padding-top: 31px; }
    .landing-hero__grid { grid-template-columns: 1fr; }
    .landing-hero__copy { max-width: 680px; padding-top: 0; }
    .landing-hero h1 { max-width: 660px; }
    .product-preview { width: 100%; }
    .step-card { padding: 20px; }
    .step-card__arrow { display: none; }
    .trust-strip { padding-inline: 10px; }
    .trust-strip > div { padding-inline: 14px; }
}

@media (max-width: 767px) {
    html {
        scroll-padding-bottom: 164px;
    }

    :root { --ui-header-height: 66px; }
    html { scroll-padding-top: 76px; }
    .ui-container { width: calc(100% - 32px); }
    .brand { font-size: 24px; }
    .marketing-header__inner,
    .app-header__inner { min-height: var(--ui-header-height); }
    .landing-hero { padding: 25px 0 26px; }
    .landing-hero__grid { gap: 27px; }
    .landing-hero h1 {
        margin: 12px 0 14px;
        font-size: 39px;
        letter-spacing: -1.6px;
        line-height: 1.09;
    }
    .landing-hero__lead { font-size: 16px; line-height: 1.52; }
    .landing-hero__actions { margin-top: 22px; flex-direction: column; }
    .landing-hero__actions .ui-button { width: 100%; }
    .landing-hero__scope { align-items: flex-start; font-size: 11px; }
    .product-preview { min-height: 0; border-radius: 13px; }
    .product-preview__top { height: 45px; padding-inline: 12px; }
    .product-preview__steps { gap: 8px; font-size: 7px; }
    .product-preview__grid { min-height: 0; padding: 10px; grid-template-columns: 1fr; }
    .preview-panel { padding: 13px; }
    .preview-panel--calendar,
    .preview-panel--result { min-height: 230px; }
    .preview-drop { min-height: 116px; }
    .preview-calendar span { aspect-ratio: auto; min-height: 23px; }
    .landing-steps,
    .feature-grid { grid-template-columns: 1fr; gap: 12px; }
    .landing-steps { padding-bottom: 25px; }
    .step-card { min-height: 108px; padding: 19px 20px; }
    .trust-strip { padding: 6px 17px; grid-template-columns: 1fr; }
    .trust-strip > div { min-height: 68px; padding: 11px 0; }
    .trust-strip > div + div { border-top: 1px solid #cfdef4; border-left: 0; }
    .feature-grid { padding-block: 25px 20px; }
    .feature-card { min-height: 132px; padding: 20px; }
    .marketing-footer__inner { padding-block: 22px; align-items: flex-start; flex-direction: column; gap: 10px; }
    .dashboard-page { padding-block: 22px 30px; }
    .dashboard-heading { padding-right: 0; }
    .dashboard-heading .ui-badge { position: static; margin-bottom: 9px; }
    .dashboard-heading h1 { font-size: 34px; letter-spacing: -1.2px; }
    .dashboard-heading > p:last-child { font-size: 13px; }
    .flow-steps { margin: 18px 0; gap: 8px; }
    .flow-steps li { min-height: 67px; padding: 10px; flex-direction: column; gap: 3px; text-align: center; }
    .flow-steps li > span { position: absolute; top: 6px; left: 7px; width: 19px; height: 19px; font-size: 8px; }
    .flow-steps li > .ui-icon { width: 18px; height: 18px; }
    .flow-steps li strong { font-size: 10px; }
    .dashboard-workspace { grid-template-columns: 1fr; gap: 13px; }
    .dashboard-result { height: max-content; padding-bottom: 48px; grid-column: auto; }
    .dashboard-column { padding: 17px; }
    .foundation-drop-zone { min-height: 170px; }
    .mini-calendar__day { min-height: 51px; padding: 4px; }
    .work-summary { grid-template-columns: repeat(2, 1fr); }
    .summary-card { padding: 9px; }
    .summary-card span { font-size: 10px; }
    .result-comparison > div { font-size: 8px !important; }
    .result-comparison__header { display: none !important; }
    .result-comparison__row {
        grid-template-areas: "name status" "expected employer";
        grid-template-columns: 1fr auto;
        gap: 8px 14px !important;
        padding-block: 11px !important;
        font-size: 10px !important;
    }
    .result-comparison__row .comparison-name { grid-area: name; }
    .result-comparison__row .comparison-status { grid-area: status; }
    .result-comparison__row .comparison-value {
        display: flex;
        min-width: 86px;
        flex-direction: column;
        text-align: left;
    }
    .result-comparison__row .comparison-value:nth-child(2) { grid-area: expected; }
    .result-comparison__row .comparison-value:nth-child(3) { grid-area: employer; }
    .result-comparison__row .comparison-value::before {
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: 9px;
    }
    .dashboard-disclaimer { align-items: flex-start; text-align: left; }
    .component-page { padding-block: 24px 36px; }
    .component-heading h1 { font-size: 31px; }
    .component-section { padding: 18px; }
    .component-grid--two { grid-template-columns: 1fr; }
    .ui-tooltip {
        right: 0;
        left: auto;
        transform: translateY(4px);
    }
    .ui-tooltip-control:hover .ui-tooltip,
    .ui-tooltip-control:focus-visible .ui-tooltip { transform: translateY(0); }
    .ui-table--stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .ui-table--stacked,
    .ui-table--stacked tbody,
    .ui-table--stacked tr,
    .ui-table--stacked th,
    .ui-table--stacked td { display: block; width: 100%; }
    .ui-table--stacked tr { padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
    .ui-table--stacked th,
    .ui-table--stacked td { display: flex; padding: 6px 0; justify-content: space-between; gap: 20px; border: 0; text-align: right; }
    .ui-table--stacked th::before,
    .ui-table--stacked td::before { content: attr(data-label); color: var(--ui-muted); font-weight: 500; text-align: left; }
    .ui-dialog__actions { flex-direction: column; }
    .ui-dialog__actions .ui-button { width: 100%; }
}

@media (max-width: 575px) {
    .landing-hero h1 { font-size: 35px; }
    .landing-hero__copy > .ui-eyebrow { font-size: 11px; }
    .step-card__icon,
    .feature-card__icon { width: 43px; height: 43px; }
    .calendar-heading button[aria-label="Sljedeći mjesec"] { display: none; }
    .calendar-heading h2 { min-width: 100px; }
    .mini-calendar__day { min-height: 47px; }
    .shift-chip { padding-inline: 1px; font-size: 7.5px; }
    .result-amounts strong { font-size: 14px; }
}

@media (min-width: 992px) {
    .dashboard-result { padding-top: 24px; padding-bottom: 16px; }
    .result-status > span { width: 38px; height: 38px; margin: 0 0 8px; }
    .result-status .ui-badge { margin-bottom: 5px; }
    .result-status small { margin-top: 1px; }
    .result-amounts { margin-top: 12px; }
    .result-amounts > div { padding-block: 8px; }
    .result-coverage { margin-top: 8px; }
    .result-comparison { margin-top: 9px; }
    .result-comparison > div { min-height: 42px; padding-block: 6px; }
    .result-comparison__header { min-height: 27px !important; }
    .possible-difference { margin-top: 9px; padding: 9px 12px; }
    .dashboard-result > .ui-alert { margin-block: 8px; padding-block: 8px; }
    .ui-text-link { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* PR #17 — private document flow */
.document-page {
    min-height: calc(100vh - var(--ui-header-height));
    padding: 38px 0 56px;
}

.document-container,
.review-container {
    width: min(1280px, calc(100% - 64px));
    margin-inline: auto;
}

.review-container {
    width: min(1358px, calc(100% - 64px));
}

.document-container--profile {
    width: min(1268px, calc(100% - 64px));
}

.document-heading {
    min-width: 0;
}

.document-heading h1 {
    margin: 8px 0 0;
    color: var(--ui-ink);
    font-size: 40px;
    font-weight: 790;
    letter-spacing: -1.6px;
    line-height: 1.14;
}

.document-heading > p:last-of-type,
.document-heading > div > p:last-of-type {
    max-width: 790px;
    margin: 10px 0 0;
    color: var(--ui-muted);
    font-size: 15px;
    line-height: 1.55;
}

.document-page__alert,
.employment-page__alert,
.privacy-page__alert,
.review-page__alert,
.processing-state-alert {
    margin-top: 18px;
}

/* Shared workflow progress */
.workflow-stepper {
    position: relative;
    display: grid;
    min-height: 107px;
    margin: 24px 0;
    padding: 22px 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
    list-style: none;
}

.workflow-stepper li {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    color: var(--ui-muted);
}

.workflow-stepper li:not(:last-child)::after {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 19px;
    left: 47px;
    height: 2px;
    content: "";
    background: #e8ecf2;
    transform: translateY(-50%);
}

.workflow-stepper li > span {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ui-muted);
    background: #fff;
    border: 2px solid #d7dde5;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.workflow-stepper li > span .ui-icon {
    width: 17px;
    height: 17px;
}

.workflow-stepper li strong {
    padding-right: 18px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.workflow-stepper li.is-complete {
    color: var(--ui-success-dark);
}

.workflow-stepper li.is-complete > span {
    color: #fff;
    background: var(--ui-success);
    border-color: var(--ui-success);
}

.workflow-stepper li.is-complete:not(:last-child)::after {
    background: #a9dfba;
}

.workflow-stepper li.is-current {
    color: var(--ui-brand-dark);
}

.workflow-stepper li.is-current > span {
    color: #fff;
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    box-shadow: 0 0 0 5px var(--ui-brand-soft);
}

/* Upload */
.document-heading--upload {
    width: 624px;
    max-width: 100%;
    margin-left: max(0px, calc((100% - 1256px) / 2));
}

.upload-layout {
    display: grid;
    width: min(1256px, 100%);
    margin: 30px auto 0;
    grid-template-columns: 624px 538px;
    gap: 94px;
    align-items: start;
}

.upload-layout > * {
    min-width: 0;
}

.upload-card {
    display: flex;
    min-height: 498px;
    padding: 20px;
    flex-direction: column;
    gap: 15px;
}

.upload-card__header {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.upload-card__header > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.upload-card__header h2,
.upload-guide h2,
.processing-grid h2 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 19px;
    font-weight: 750;
    letter-spacing: -.25px;
    line-height: 1.3;
}

.upload-card__step {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background: var(--ui-brand);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.document-dropzone {
    display: flex;
    min-height: 260px;
    padding: 24px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--ui-brand);
    background: #fbfdff;
    border: 1.5px dashed #8eb9f6;
    border-radius: 11px;
    cursor: pointer;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.document-dropzone:hover,
.document-dropzone.is-dragover,
.document-dropzone.is-dragging {
    background: var(--ui-brand-soft);
    border-color: var(--ui-brand);
    box-shadow: inset 0 0 0 1px rgba(8, 101, 242, .12);
}

.document-dropzone:has(+ [data-document-input]:focus) {
    border-color: var(--ui-brand-dark);
    outline: 3px solid var(--ui-brand-dark);
    outline-offset: 3px;
}

.document-dropzone.is-disabled {
    color: var(--ui-muted);
    background: #f6f7f9;
    border-color: var(--ui-border-strong);
    cursor: not-allowed;
}

.document-dropzone__icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 3px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 14px;
}

.document-dropzone__icon .ui-icon {
    width: 28px;
    height: 28px;
}

.document-dropzone strong {
    color: var(--ui-ink);
    font-size: 16px;
    font-weight: 750;
}

.document-dropzone > span:not(.document-dropzone__icon):not(.ui-button) {
    color: var(--ui-muted);
    font-size: 13px;
}

.document-dropzone .ui-button {
    min-width: 186px;
    margin-top: 8px;
    pointer-events: none;
}

.document-dropzone small {
    max-width: 430px;
    margin-top: 5px;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.45;
}

.selected-documents {
    padding: 13px 14px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

.selected-documents[hidden] {
    display: none !important;
}

.selected-documents__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ui-ink-soft);
    font-size: 12px;
}

.selected-documents__heading span {
    color: var(--ui-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.selected-documents ul {
    display: grid;
    margin: 9px 0 0;
    padding: 0;
    gap: 7px;
    list-style: none;
}

.selected-documents li {
    display: grid;
    min-width: 0;
    min-height: 42px;
    padding: 8px 9px 8px 11px;
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    color: var(--ui-ink-soft);
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-size: 12px;
}

.selected-document__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--ui-brand-dark);
    background: var(--ui-brand-soft);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
}

.selected-documents li > span,
.selected-documents li > div,
.selected-documents li strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-documents li small {
    display: block;
    color: var(--ui-muted);
    font-size: 10px;
}

.selected-documents li button {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    color: var(--ui-danger-dark);
    background: var(--ui-danger-soft);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.external-processing-consent {
    display: flex;
    padding: 13px 14px;
    align-items: flex-start;
    gap: 10px;
    color: #234b83;
    background: #f3f7ff;
    border: 1px solid #d7e6fd;
    border-radius: 10px;
}

.external-processing-consent__icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ui-brand);
    background: #fff;
    border-radius: 8px;
}

.external-processing-consent .ui-check {
    min-width: 0;
    color: #29496f;
    font-size: 11px;
    line-height: 1.45;
}

.external-processing-consent .ui-check > span {
    display: block;
}

.external-processing-consent strong {
    display: block;
    margin-bottom: 2px;
    color: #15345f;
    font-size: 12px;
}

.upload-card__fine-print {
    margin: -3px 0 0;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

.upload-guide {
    min-height: 708px;
    margin-top: -210px;
    padding: 27px 28px;
}

.upload-guide__icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 17px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 13px;
}

.upload-guide__icon .ui-icon {
    width: 26px;
    height: 26px;
}

.upload-guide__lead {
    margin: 8px 0 21px;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.5;
}

.upload-guide__steps {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
}

.upload-guide__steps li {
    position: relative;
    display: grid;
    min-height: 82px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 13px;
}

.upload-guide__steps li:not(:last-child)::after {
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 16px;
    width: 2px;
    content: "";
    background: #dce8fb;
}

.upload-guide__steps li > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--ui-brand-dark);
    background: var(--ui-brand-soft);
    border: 1px solid #cce0ff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.upload-guide__steps strong {
    display: block;
    color: var(--ui-ink-soft);
    font-size: 13px;
}

.upload-guide__steps p {
    margin: 3px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.45;
}

.upload-guide__scope {
    display: flex;
    margin-top: 8px;
    padding: 13px 14px;
    align-items: flex-start;
    gap: 10px;
    color: #70420a;
    background: var(--ui-warning-soft);
    border: 1px solid #fee0aa;
    border-radius: 9px;
}

.upload-guide__scope > .ui-icon {
    margin-top: 1px;
    color: var(--ui-warning-dark);
}

.upload-guide__scope p {
    margin: 0;
    color: #8a4b0b;
    font-size: 11px;
}

.upload-guide__scope strong {
    display: block;
    color: #70420a;
    font-size: 12px;
}

.upload-guide .ui-text-link {
    justify-content: flex-start;
}

/* Processing */
.processing-heading {
    max-width: 820px;
}

.processing-grid {
    display: grid;
    width: min(1196px, 100%);
    margin-inline: auto;
    grid-template-columns: 573px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.processing-grid > * {
    min-width: 0;
    min-height: 421px;
}

.processing-document-card,
.processing-status-card {
    padding: 24px;
}

.processing-document-card {
    display: flex;
    flex-direction: column;
}

.processing-document-card__header {
    display: flex;
    min-height: 48px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.processing-document-card__header > div {
    min-width: 0;
}

.processing-document-card__header h2 {
    margin-top: 7px;
}

.processing-document-card__header > .ui-icon {
    width: 25px;
    height: 25px;
    color: var(--ui-success);
}

.processing-document-card__visual {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 236px;
    margin: 17px 0 14px;
    padding: 38px 72px;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    color: var(--ui-brand);
    background: linear-gradient(145deg, #edf4ff, #fafcff 62%);
    border: 1px solid #d7e6fd;
    border-radius: 11px;
}

.processing-document-card__visual > .ui-icon {
    position: absolute;
    top: 30px;
    left: 31px;
    width: 39px;
    height: 39px;
}

.processing-document-card__visual span {
    display: block;
    height: 9px;
    background: #dce7f7;
    border-radius: 99px;
}

.processing-document-card__visual span:nth-of-type(2) { width: 82%; }
.processing-document-card__visual span:nth-of-type(3) { width: 91%; }
.processing-document-card__visual span:nth-of-type(4) { width: 67%; }
.processing-document-card__visual span:nth-of-type(5) { width: 77%; }

.processing-document-card > p {
    display: flex;
    margin: auto 0 0;
    flex-direction: column;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.45;
}

.processing-document-card > p strong {
    color: var(--ui-ink-soft);
    font-size: 12px;
}

.processing-status-card {
    display: flex;
    flex-direction: column;
}

.processing-status-card > .ui-loader-state {
    min-height: 72px;
    margin-bottom: 10px;
    color: #175cd3;
    background: var(--ui-info-soft);
    border-color: #cae0ff;
}

.processing-checklist {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.processing-checklist li {
    position: relative;
    display: grid;
    min-height: 67px;
    padding: 10px 7px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    color: var(--ui-muted-light);
    border-bottom: 1px solid #edf0f4;
}

.processing-checklist li > .ui-icon {
    width: 21px;
    height: 21px;
    margin: 1px 0 0 3px;
}

.processing-checklist li > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.processing-checklist strong {
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.35;
}

.processing-checklist small {
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.4;
}

.processing-checklist li.is-done {
    color: var(--ui-success);
}

.processing-checklist li.is-done strong {
    color: var(--ui-success-dark);
}

.processing-checklist li.is-active {
    color: var(--ui-brand);
    background: #f7faff;
}

.processing-checklist li.is-active strong {
    color: var(--ui-brand-dark);
}

.processing-checklist li.is-failed {
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
}

.processing-checklist li.is-failed strong {
    color: var(--ui-danger-dark);
}

.processing-checklist li.is-failed small {
    color: var(--ui-ink-soft);
}

.processing-failed-mark {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 3px auto 15px;
    place-items: center;
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
    border-radius: 50%;
}

.processing-failed-mark .ui-icon {
    width: 28px;
    height: 28px;
}

.processing-status-card > .ui-button {
    margin-top: auto;
}

.processing-privacy-note {
    width: min(1196px, 100%);
    min-height: 45px;
    margin: 22px auto 0;
    padding-block: 11px;
}

.upload-processing-preview[hidden] {
    display: none !important;
}

/* Review */
.review-page {
    padding-top: 27px;
}

.review-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.review-heading h1 {
    font-size: 42px;
    letter-spacing: -1.8px;
}

.review-heading__summary {
    display: flex;
    min-width: 210px;
    padding-top: 15px;
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
    color: var(--ui-muted);
    text-align: right;
}

.review-heading__summary small {
    font-size: 11px;
}

.review-mobile-tabs {
    display: none;
}

.review-layout {
    display: grid;
    grid-template-columns: 667px minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-layout > .ui-card {
    min-width: 0;
    height: 784px;
}

.document-viewer,
.review-data {
    padding: 24px;
}

.document-viewer {
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.document-viewer__header,
.review-data__header {
    display: flex;
    min-height: 48px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.document-viewer__header > div,
.review-data__header > div {
    min-width: 0;
}

.document-viewer__header h2,
.review-data__header h2,
.review-items-heading h3 {
    margin: 4px 0 0;
    color: var(--ui-ink);
    font-size: 19px;
    font-weight: 750;
    line-height: 1.3;
}

.document-viewer__toolbar {
    display: flex;
    min-height: 56px;
    margin-top: 16px;
    padding: 8px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #e7edf7;
    background: #344054;
    border-radius: 10px 10px 0 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.document-viewer__toolbar > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.document-viewer__toolbar .ui-icon-button {
    width: 36px;
    height: 36px;
    color: #f8fafc;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
}

.synthetic-document-preview {
    display: flex;
    overflow: auto;
    min-height: 0;
    padding: 28px 31px 21px;
    flex: 1 1 auto;
    flex-direction: column;
    color: #30394a;
    background: #fff;
    border: 1px solid #d8dee7;
    border-top: 0;
    box-shadow: inset 0 0 0 9px #f3f5f8;
}

.synthetic-document-preview__brand {
    display: flex;
    padding: 6px 0 18px;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 2px solid #3c4658;
}

.synthetic-document-preview__brand span {
    color: var(--ui-ink);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .05em;
}

.synthetic-document-preview__brand strong {
    color: var(--ui-muted);
    font-size: 12px;
}

.synthetic-document-preview__facts {
    display: grid;
    padding: 17px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.synthetic-document-preview__facts p {
    display: flex;
    min-width: 0;
    margin: 0;
    flex-direction: column;
}

.synthetic-document-preview__facts span {
    color: var(--ui-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.synthetic-document-preview__facts strong {
    overflow-wrap: anywhere;
    font-size: 11px;
}

.synthetic-document-preview__table {
    border-top: 1px solid #d8dee7;
    border-left: 1px solid #d8dee7;
}

.synthetic-document-preview__table > div {
    display: grid;
    min-height: 38px;
    grid-template-columns: 65px minmax(0, 1fr) 54px 70px;
}

.synthetic-document-preview__table span {
    display: flex;
    min-width: 0;
    padding: 7px 8px;
    align-items: center;
    border-right: 1px solid #d8dee7;
    border-bottom: 1px solid #d8dee7;
    font-size: 9px;
    overflow-wrap: anywhere;
}

.synthetic-document-preview__table .is-header {
    min-height: 30px;
    color: #475467;
    background: #eef1f5;
    font-weight: 750;
    text-transform: uppercase;
}

.synthetic-document-preview__total {
    display: flex;
    margin-top: 13px;
    padding: 10px 0;
    align-items: baseline;
    justify-content: flex-end;
    gap: 18px;
    border-bottom: 2px solid #3c4658;
    font-size: 10px;
}

.synthetic-document-preview__total strong {
    font-size: 15px;
}

.synthetic-document-preview__notice {
    margin: auto 0 0;
    padding-top: 13px;
    color: var(--ui-muted);
    font-size: 9px;
    line-height: 1.45;
    text-align: center;
}

.review-data {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.review-data__header p {
    margin: 3px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
}

.review-data > .ui-alert {
    margin-top: 13px;
}

.review-fact-grid {
    display: grid;
    margin-top: 13px;
    border-top: 1px solid var(--ui-border);
}

.review-field {
    display: grid;
    min-width: 0;
    min-height: 54px;
    padding: 7px 0;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 255px);
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--ui-border);
}

.review-field > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: var(--ui-ink-soft);
    font-size: 11px;
    font-weight: 700;
}

.review-field small {
    color: var(--ui-muted);
    font-size: 9px;
    font-weight: 500;
}

.review-field input,
.review-item__fields input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    color: var(--ui-ink);
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 12px;
}

.review-field input:focus,
.review-item__fields input:focus,
.profile-field .ui-input:focus {
    border-color: var(--ui-brand);
    box-shadow: 0 0 0 3px rgba(8, 101, 242, .12);
    outline: 0;
}

.review-field.is-missing {
    padding-inline: 10px;
    background: var(--ui-warning-soft);
    border-color: #fedba8;
}

.review-field.is-missing small {
    color: var(--ui-warning-dark);
}

.review-field.is-missing input {
    border-color: #f4b95f;
}

.review-items-heading {
    display: flex;
    margin-top: 18px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.review-items-heading p {
    margin: 2px 0 0;
    color: var(--ui-muted);
    font-size: 10px;
}

.review-items-heading > span {
    color: var(--ui-muted);
    font-size: 10px;
}

.review-items {
    display: grid;
    margin-top: 9px;
    gap: 8px;
}

.review-item {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
}

.review-item[open] {
    border-color: #cfd9e8;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
}

.review-item summary {
    display: grid;
    min-height: 55px;
    padding: 9px 12px;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    list-style: none;
}

.review-item summary::-webkit-details-marker {
    display: none;
}

.review-item summary > .ui-icon {
    color: var(--ui-muted);
    transition: transform .15s ease;
}

.review-item[open] summary > .ui-icon {
    transform: rotate(180deg);
}

.review-item__identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.review-item__identity strong {
    color: var(--ui-ink-soft);
    font-size: 12px;
}

.review-item__identity small {
    overflow: hidden;
    color: var(--ui-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-item__badges {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

.review-item__status-detail {
    margin: 0;
    padding: 9px 12px;
    color: var(--ui-muted);
    background: var(--ui-surface-subtle);
    border-top: 1px solid var(--ui-border);
    font-size: 10px;
    line-height: 1.45;
}

.review-item__status-detail strong {
    display: block;
    margin-top: 4px;
    color: var(--ui-warning-dark);
}

.review-item__fields {
    display: grid;
    padding: 12px;
    grid-template-columns: .75fr 1.45fr .75fr .85fr;
    gap: 8px;
}

.review-item__fields label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    color: var(--ui-muted);
    font-size: 9px;
    font-weight: 650;
}

.review-item__source {
    display: flex;
    padding: 0 12px 12px;
    align-items: center;
    gap: 5px;
    color: var(--ui-muted);
    font-size: 9px;
}

.review-action-bar {
    display: flex;
    width: min(659px, calc(100% - 699px));
    min-height: 74px;
    margin: 16px 0 0 auto;
    padding: 12px 14px;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: 0 9px 28px rgba(16, 24, 40, .1);
}

.review-action-bar > p {
    display: flex;
    min-width: 0;
    margin: 0 auto 0 0;
    align-items: flex-start;
    gap: 8px;
    color: var(--ui-muted);
    font-size: 9px;
    line-height: 1.4;
}

.review-action-bar > p > .ui-icon {
    margin-top: 1px;
    color: var(--ui-brand);
}

.review-action-bar > p span {
    display: block;
}

.review-action-bar > p strong {
    color: var(--ui-ink-soft);
}

.review-incomplete-check {
    max-width: 210px;
    font-size: 10px;
}

.review-action-bar .ui-button {
    flex: 0 0 auto;
}

.review-failed-state {
    display: flex;
    min-height: 420px;
    padding: 42px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.review-failed-state > span {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
    border-radius: 50%;
}

.review-failed-state > span .ui-icon {
    width: 31px;
    height: 31px;
}

.review-failed-state h2 {
    margin: 18px 0 7px;
    font-size: 23px;
}

.review-failed-state p {
    max-width: 540px;
    margin: 0 0 23px;
    color: var(--ui-muted);
}

@media (min-width: 1200px) {
    .review-form {
        position: relative;
    }

    .review-data {
        padding-bottom: 118px;
        scroll-padding-bottom: 118px;
    }

    .review-action-bar {
        position: absolute;
        right: 0;
        bottom: 14px;
        z-index: 2;
        margin: 0;
    }
}

/* Employment profile */
.employment-heading,
.privacy-heading {
    max-width: 910px;
}

.employment-heading h1,
.privacy-heading h1 {
    font-size: 34px;
    letter-spacing: -1.1px;
}

.employment-scope-note {
    width: min(650px, 100%);
    min-height: 67px;
    margin: 0 0 20px;
}

.employment-form {
    display: grid;
    gap: 11px;
}

.employment-section {
    min-width: 0;
    min-height: 153px;
    padding: 21px 24px;
}

.employment-section:nth-of-type(2) {
    min-height: 180px;
}

.employment-section:nth-of-type(3) {
    min-height: 169px;
}

.employment-section__heading {
    display: flex;
    margin-bottom: 17px;
    align-items: flex-start;
    gap: 13px;
}

.employment-section__heading > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 10px;
}

.employment-section__heading h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 750;
}

.employment-section__heading p {
    margin: 2px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
}

.employment-grid {
    display: grid;
    min-width: 0;
    gap: 14px 17px;
}

.employment-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.employment-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.employment-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.profile-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    color: var(--ui-ink-soft);
    font-size: 12px;
    font-weight: 650;
}

.profile-field > span {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: 7px;
}

.profile-field small {
    color: var(--ui-muted);
    font-size: 9px;
    font-weight: 500;
    text-align: right;
}

.profile-field .ui-input {
    min-width: 0;
    min-height: 46px;
    border-color: #d0d5dd;
    font-size: 13px;
}

.profile-field em {
    color: var(--ui-muted);
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
}

.employment-actions {
    display: flex;
    min-height: 76px;
    padding: 11px 0 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.employment-actions > p {
    display: flex;
    max-width: 450px;
    margin: 0 auto 0 0;
    align-items: flex-start;
    gap: 8px;
    color: var(--ui-muted);
    font-size: 10px;
}

.employment-actions > p .ui-icon {
    margin-top: 1px;
    color: var(--ui-success);
}

.employment-actions > p span,
.employment-actions > p strong {
    display: block;
}

.employment-actions > p strong {
    color: var(--ui-ink-soft);
}

.employment-scope-warning {
    margin-top: 12px;
}

/* Privacy and data */
.privacy-grid {
    display: grid;
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 20px;
}

.privacy-card {
    min-width: 0;
    min-height: 286px;
    padding: 24px;
}

.privacy-card--compact {
    min-height: 229px;
}

.privacy-card--muted {
    background: #fbfcfd;
    box-shadow: none;
}

.privacy-card__heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.privacy-card__icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
}

.privacy-card__icon .ui-icon {
    width: 24px;
    height: 24px;
}

.privacy-card__icon--blue { color: var(--ui-brand); background: var(--ui-brand-soft); }
.privacy-card__icon--green { color: var(--ui-success); background: var(--ui-success-soft); }
.privacy-card__icon--purple { color: var(--ui-purple); background: var(--ui-purple-soft); }
.privacy-card__icon--gray { color: var(--ui-muted); background: var(--ui-neutral-soft); }

.privacy-card__heading h2,
.privacy-danger-zone h2 {
    margin: 1px 0 0;
    color: var(--ui-ink);
    font-size: 19px;
    font-weight: 750;
    line-height: 1.3;
}

.privacy-card__heading p,
.privacy-danger-zone p {
    margin: 4px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.45;
}

.privacy-metrics {
    display: grid;
    margin-top: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--ui-border);
    border-left: 1px solid var(--ui-border);
    border-radius: 9px;
}

.privacy-metrics > div {
    display: flex;
    min-height: 55px;
    padding: 9px 12px;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.privacy-metrics span {
    color: var(--ui-muted);
    font-size: 9px;
}

.privacy-metrics strong {
    color: var(--ui-ink-soft);
    font-size: 13px;
}

.privacy-status {
    position: relative;
    padding-left: 13px;
}

.privacy-status::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    content: "";
    background: var(--ui-muted-light);
    border-radius: 50%;
    transform: translateY(-50%);
}

.privacy-status--active::before { background: var(--ui-success); }

.privacy-card__footnote {
    margin: 13px 0 0;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.45;
}

.privacy-source-state {
    display: flex;
    margin-top: 24px;
    padding: 15px;
    align-items: flex-start;
    gap: 12px;
    color: var(--ui-success-dark);
    background: var(--ui-success-soft);
    border: 1px solid #c5ebd2;
    border-radius: 10px;
}

.privacy-source-state__mark {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ui-success);
    background: #fff;
    border-radius: 50%;
}

.privacy-source-state strong {
    display: block;
    font-size: 13px;
}

.privacy-source-state p {
    margin: 2px 0 0;
    color: #397550;
    font-size: 10px;
    line-height: 1.4;
}

.privacy-check-list {
    display: grid;
    margin: 13px 0 0;
    padding: 0;
    gap: 6px;
    color: var(--ui-muted);
    font-size: 10px;
    list-style: none;
}

.privacy-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.privacy-check-list .ui-icon {
    margin-top: 1px;
    color: var(--ui-success);
}

.privacy-setting-row {
    display: flex;
    min-height: 58px;
    margin-top: 20px;
    padding: 10px 0;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.privacy-setting-row + .privacy-setting-row {
    margin-top: 0;
    border-top: 0;
}

.privacy-setting-row > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.privacy-setting-row strong {
    color: var(--ui-ink-soft);
    font-size: 12px;
}

.privacy-setting-row span {
    color: var(--ui-muted);
    font-size: 10px;
}

.privacy-setting-row.is-disabled {
    color: var(--ui-muted);
    opacity: 1;
}

.privacy-setting-row.is-disabled span {
    color: var(--ui-ink-soft);
}

.privacy-setting-row.is-disabled > span {
    flex: 0 0 auto;
    padding: 5px 8px;
    background: var(--ui-neutral-soft);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
}

.privacy-danger-zone {
    display: grid;
    min-height: 102px;
    margin-top: 18px;
    padding: 18px 22px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    background: #fffafa;
    border-color: #f4c7c7;
    box-shadow: none;
}

.privacy-danger-zone__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
    border-radius: 12px;
}

.privacy-danger-zone .ui-button {
    min-width: 202px;
}

.privacy-policy-note {
    display: flex;
    margin: 13px 0 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 10px;
    text-align: center;
}

.privacy-delete-dialog {
    width: min(535px, calc(100% - 32px));
}

.privacy-delete-dialog .ui-dialog__header > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.privacy-delete-dialog .ui-dialog__header h2 {
    margin: 0;
}

.privacy-dialog-icon {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
    border-radius: 11px;
}

/* Reference-aligned desktop density for PR #17 screens. */
@media (min-width: 1400px) {
    .upload-page .document-content {
        position: relative;
        min-height: 708px;
    }

    .upload-guide {
        position: absolute;
        top: 14px;
        right: 12px;
        width: 538px;
        margin-top: 0;
    }

    .upload-page .document-page__alert {
        width: 624px;
        margin-left: max(0px, calc((100% - 1256px) / 2));
    }

    .document-dropzone {
        min-height: 318px;
    }
}

@media (min-width: 768px) {
    .review-heading > div > .ui-eyebrow,
    .review-heading > div > p:last-child,
    .employment-heading > .ui-eyebrow,
    .privacy-heading > .ui-eyebrow {
        display: none;
    }

    .review-heading h1,
    .employment-heading h1,
    .privacy-heading h1 {
        margin-top: 0;
    }

    .review-page .workflow-stepper {
        min-height: 52px;
        margin: 8px 0 12px;
        padding: 6px 28px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .review-page .workflow-stepper li strong,
    .review-page .workflow-stepper li > span {
        background-color: #f7f9fc;
    }

    .review-page .workflow-stepper li.is-complete > span {
        background-color: var(--ui-success);
    }

    .review-page .workflow-stepper li.is-current > span {
        background-color: var(--ui-brand);
    }

    .employment-page {
        padding-top: 8px;
    }

    .employment-page > .document-container > .workflow-stepper {
        display: none;
    }

    .employment-scope-note {
        min-height: 67px;
        margin: 20px 0;
        padding: 10px 14px;
        font-size: 11px;
    }

    .privacy-page {
        padding-top: 8px;
    }

    .privacy-heading {
        position: relative;
    }

    .privacy-heading__scenario {
        position: absolute;
        top: 2px;
        right: 0;
    }
}

/* PR #17 tablet reflow */
@media (max-width: 1399px) {
    .document-container,
    .review-container,
    .document-container--profile {
        width: calc(100% - 64px);
    }

    .document-heading--upload {
        margin-left: 0;
    }

    .upload-layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
        gap: 32px;
    }

    .upload-guide {
        margin-top: 0;
    }

    .review-layout {
        grid-template-columns: minmax(0, .99fr) minmax(0, 1.01fr);
        gap: 24px;
    }

    .review-action-bar {
        width: calc(50.5% - 12px);
    }
}

@media (max-width: 1199px) {
    .upload-layout,
    .processing-grid,
    .review-layout {
        grid-template-columns: 1fr;
    }

    .upload-layout,
    .processing-grid {
        width: min(760px, 100%);
    }

    .upload-guide {
        min-height: 0;
    }

    .processing-grid > * {
        min-height: 390px;
    }

    .review-layout > .ui-card {
        height: auto;
        min-height: 640px;
    }

    .review-data {
        overflow: visible;
    }

    .review-action-bar {
        width: 100%;
    }

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

/* PR #17 mobile visual character: 390 × 844, with a 320 px overflow floor */
@media (max-width: 767px) {
    .document-page {
        padding: 22px 0 38px;
    }

    .document-container,
    .review-container,
    .document-container--profile {
        width: calc(100% - 32px);
    }

    .document-heading h1,
    .review-heading h1,
    .employment-heading h1,
    .privacy-heading h1 {
        margin-top: 6px;
        font-size: 30px;
        letter-spacing: -1px;
        line-height: 1.16;
    }

    .document-heading > p:last-of-type,
    .document-heading > div > p:last-of-type {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.5;
    }

    .document-page__alert,
    .employment-page__alert,
    .privacy-page__alert,
    .review-page__alert,
    .processing-state-alert {
        margin-top: 14px;
    }

    .workflow-stepper {
        min-height: 0;
        margin: 18px 0;
        padding: 12px 14px;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .workflow-stepper li {
        min-height: 43px;
        padding: 4px 0;
    }

    .workflow-stepper li:not(:last-child)::after {
        top: 33px;
        right: auto;
        bottom: -10px;
        left: 15px;
        width: 2px;
        height: auto;
        transform: none;
    }

    .workflow-stepper li > span {
        width: 31px;
        height: 31px;
        font-size: 10px;
    }

    .workflow-stepper li strong {
        padding-right: 0;
        font-size: 12px;
    }

    .document-heading--upload {
        width: auto;
    }

    .upload-layout,
    .processing-grid {
        width: 100%;
        margin-top: 20px;
        gap: 14px;
    }

    .upload-card,
    .upload-guide,
    .processing-document-card,
    .processing-status-card,
    .document-viewer,
    .review-data,
    .employment-section,
    .privacy-card {
        padding: 17px;
    }

    .upload-card {
        min-height: 0;
        gap: 13px;
    }

    .upload-card__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .upload-card__header > div {
        width: 100%;
    }

    .upload-card__header h2,
    .upload-guide h2,
    .processing-grid h2 {
        font-size: 17px;
    }

    .document-dropzone {
        min-height: 218px;
        padding: 19px 14px;
    }

    .document-dropzone__icon {
        width: 49px;
        height: 49px;
    }

    .document-dropzone .ui-button {
        width: min(220px, 100%);
        min-height: 46px;
    }

    .document-dropzone small {
        font-size: 10px;
    }

    .selected-documents li {
        min-height: 46px;
    }

    .selected-documents li button {
        width: 36px;
        height: 36px;
    }

    .external-processing-consent {
        padding: 12px;
    }

    .external-processing-consent__icon {
        display: none;
    }

    .external-processing-consent .ui-check input {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    .upload-card > .ui-button--large {
        min-height: 52px;
    }

    .upload-guide {
        margin-top: 0;
    }

    .upload-guide__steps li {
        min-height: 88px;
    }

    .processing-heading {
        max-width: none;
    }

    .processing-grid > * {
        min-height: 0;
    }

    .processing-status-card {
        grid-row: 1;
    }

    .processing-document-card {
        grid-row: 2;
    }

    .processing-document-card__visual {
        min-height: 190px;
        padding-inline: 54px;
    }

    .processing-status-card > .ui-loader-state {
        min-height: 68px;
    }

    .processing-checklist li {
        min-height: 62px;
        padding-inline: 3px;
    }

    .processing-privacy-note {
        margin-top: 14px;
    }

    .review-page {
        padding-top: 21px;
    }

    .review-heading {
        flex-direction: column;
        gap: 8px;
    }

    .review-heading__summary {
        min-width: 0;
        padding-top: 2px;
        align-items: flex-start;
        text-align: left;
    }

    .review-mobile-tabs {
        display: grid;
        position: sticky;
        z-index: 8;
        top: 8px;
        margin: 16px 0 12px;
        padding: 3px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background: #eef2f7;
        border: 1px solid var(--ui-border);
        border-radius: 11px;
        box-shadow: 0 5px 15px rgba(16, 24, 40, .08);
    }

    .review-mobile-tabs button {
        min-height: 44px;
        padding: 8px 12px;
        color: var(--ui-ink-soft);
        background: transparent;
        border: 0;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .review-mobile-tabs button[aria-selected="true"] {
        color: var(--ui-brand-dark);
        background: #fff;
        box-shadow: 0 1px 4px rgba(16, 24, 40, .12), inset 0 -2px 0 var(--ui-brand);
    }

    .review-layout {
        display: block;
    }

    .review-form,
    .employment-form {
        padding-bottom: 152px;
    }

    .review-field,
    .review-item,
    .profile-field {
        scroll-margin-top: 68px;
        scroll-margin-bottom: 164px;
    }

    .review-layout > .ui-card {
        min-height: 0;
    }

    .review-mobile-tabs + .review-form .document-viewer {
        display: none;
    }

    .review-mobile-tabs:has([data-review-tab="document"][aria-selected="true"]) + .review-form .document-viewer {
        display: flex;
    }

    .review-mobile-tabs:has([data-review-tab="document"][aria-selected="true"]) + .review-form .review-data {
        display: none;
    }

    .document-viewer {
        min-height: calc(100vh - var(--ui-header-height) - 112px) !important;
    }

    .document-viewer__header,
    .review-data__header {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .document-viewer__toolbar {
        min-height: 52px;
        margin-top: 13px;
        padding-inline: 8px;
    }

    .document-viewer__toolbar .ui-icon-button {
        width: 38px;
        height: 38px;
    }

    .synthetic-document-preview {
        min-height: 510px;
        padding: 24px 22px 18px;
    }

    .synthetic-document-preview__brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .synthetic-document-preview__facts {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .synthetic-document-preview__table {
        overflow-x: auto;
    }

    .synthetic-document-preview__table > div {
        min-width: 360px;
    }

    .review-fact-grid {
        margin-top: 12px;
    }

    .review-field {
        min-height: 79px;
        padding: 9px 0;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .review-field input,
    .review-item__fields input {
        min-height: 44px;
    }

    .review-field.is-missing {
        margin-inline: -8px;
        padding-inline: 8px;
    }

    .review-items-heading {
        align-items: flex-start;
    }

    .review-item summary {
        min-height: 62px;
        padding: 10px;
        gap: 7px;
    }

    .review-item__fields {
        grid-template-columns: 1fr 1fr;
    }

    .review-action-bar {
        position: sticky;
        z-index: 9;
        bottom: 8px;
        display: grid;
        width: 100%;
        margin-top: 12px;
        padding: 11px;
        gap: 10px;
        border-radius: 12px;
        box-shadow: 0 8px 26px rgba(16, 24, 40, .2);
    }

    .review-action-bar > p,
    .review-incomplete-check {
        max-width: none;
        font-size: 9px;
    }

    .review-action-bar .ui-button {
        width: 100%;
        min-height: 50px;
    }

    .review-failed-state {
        min-height: 390px;
        padding: 28px 19px;
    }

    .employment-scope-note {
        min-height: 0;
        margin-bottom: 14px;
    }

    .employment-form {
        gap: 12px;
    }

    .employment-section {
        min-height: 0 !important;
    }

    .employment-section__heading {
        margin-bottom: 15px;
    }

    .employment-section__heading h2 {
        font-size: 17px;
    }

    .employment-grid--two,
    .employment-grid--three,
    .employment-grid--four {
        grid-template-columns: 1fr;
    }

    .profile-field .ui-input {
        min-height: 48px;
    }

    .profile-field > span {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .profile-field small {
        text-align: left;
    }

    .employment-actions {
        position: sticky;
        z-index: 9;
        bottom: 8px;
        display: grid;
        min-height: 0;
        margin-top: 1px;
        padding: 11px;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        background: rgba(255, 255, 255, .97);
        border: 1px solid var(--ui-border);
        border-radius: 12px;
        box-shadow: 0 8px 26px rgba(16, 24, 40, .2);
    }

    .employment-actions > p {
        max-width: none;
        grid-column: 1 / -1;
    }

    .employment-actions .ui-button {
        width: 100%;
        min-height: 48px;
        padding-inline: 10px;
    }

    .privacy-grid {
        margin-top: 18px;
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .privacy-heading__scenario {
        display: inline-flex;
        margin-top: 11px;
    }

    .privacy-card,
    .privacy-card--compact {
        min-height: 0;
    }

    .privacy-card__icon {
        width: 47px;
        height: 47px;
    }

    .privacy-card__heading h2,
    .privacy-danger-zone h2 {
        font-size: 17px;
    }

    .privacy-metrics {
        margin-top: 17px;
    }

    .privacy-source-state {
        margin-top: 18px;
    }

    .privacy-setting-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .privacy-setting-row .ui-badge,
    .privacy-setting-row.is-disabled > span {
        align-self: flex-start;
    }

    .privacy-danger-zone {
        min-height: 0;
        margin-top: 13px;
        padding: 17px;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
    }

    .privacy-danger-zone__icon {
        width: 44px;
        height: 44px;
    }

    .privacy-danger-zone .ui-button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        grid-column: 1 / -1;
    }

    .privacy-policy-note {
        align-items: flex-start;
        text-align: left;
    }

    .privacy-delete-dialog {
        padding: 20px;
    }
}

@media (max-width: 389px) {
    .document-heading h1,
    .review-heading h1,
    .employment-heading h1,
    .privacy-heading h1 {
        font-size: 27px;
    }

    .upload-card,
    .upload-guide,
    .processing-document-card,
    .processing-status-card,
    .document-viewer,
    .review-data,
    .employment-section,
    .privacy-card {
        padding: 14px;
    }

    .document-dropzone {
        min-height: 204px;
    }

    .workflow-stepper {
        padding-inline: 11px;
    }

    .processing-document-card__visual {
        min-height: 170px;
        padding-inline: 45px;
    }

    .review-item summary {
        grid-template-columns: minmax(0, 1fr) 18px;
    }

    .review-form,
    .employment-form {
        padding-bottom: 0;
    }

    .review-action-bar,
    .employment-actions {
        position: static;
        bottom: auto;
    }

    .review-item summary .review-item__badges {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .review-item summary > .ui-icon {
        grid-column: 2;
        grid-row: 1;
    }

    .review-item__fields,
    .privacy-metrics,
    .employment-actions {
        grid-template-columns: 1fr;
    }

    .employment-actions > p {
        grid-column: 1;
    }

    .synthetic-document-preview {
        padding-inline: 17px;
    }

    .privacy-card__heading {
        gap: 10px;
    }

    .privacy-card__icon {
        width: 42px;
        height: 42px;
    }

    .ui-dialog.privacy-delete-dialog {
        width: calc(100% - 20px);
        padding: 17px;
    }

    .privacy-delete-dialog .ui-dialog__header > div {
        align-items: flex-start;
    }

    .privacy-dialog-icon {
        width: 38px;
        height: 38px;
    }
}

/* Keep the PR #18 dialog sizing after shared dialog and legacy breakpoints. */
.ui-dialog.work-entry-dialog {
    box-sizing: border-box;
    width: min(758px, calc(100% - 40px));
    max-height: calc(100vh - 40px);
    padding: 36px 42px 32px;
    overflow-y: auto;
    border-radius: 16px;
}

@media (max-width: 767px) {
    .ui-dialog.work-entry-dialog {
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        padding: 20px;
    }
}

@media (max-width: 389px) {
    .ui-dialog.work-entry-dialog {
        padding: 17px;
    }
}

/* PR #19 — engine-backed analysis result and calculation detail drawer */
.analysis-page {
    min-height: calc(100vh - var(--ui-header-height));
    padding: 34px 0 72px;
    background: #f7f9fc;
}

.analysis-container {
    width: min(1320px, calc(100% - 68px));
    margin-inline: auto;
}

.analysis-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

.analysis-heading > div:first-child {
    min-width: 0;
}

.analysis-heading .ui-eyebrow {
    margin: 0 0 7px;
}

.analysis-heading h1 {
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(34px, 3vw, 42px);
    font-weight: 790;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.analysis-heading > div:first-child > p:last-child {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--ui-muted);
    font-size: 15px;
}

.analysis-heading__meta {
    display: flex;
    min-width: 210px;
    margin-top: 24px;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 650;
}

.analysis-heading__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.analysis-heading__meta .ui-badge {
    min-height: 29px;
    padding-inline: 11px;
}

.analysis-page .ui-badge {
    gap: 5px;
    font-size: 12px;
}

.analysis-page .ui-badge > .ui-icon {
    width: 14px;
    height: 14px;
}

.analysis-page .ui-badge--danger {
    color: var(--ui-danger-dark);
    background: var(--ui-danger-soft);
}

.analysis-stepper {
    margin-bottom: 24px;
}

.analysis-stepper strong {
    font-size: 12px;
}

.analysis-kpis {
    display: grid;
    margin-bottom: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.analysis-kpi {
    display: flex;
    min-width: 0;
    min-height: 152px;
    padding: 26px 27px;
    align-items: center;
    gap: 21px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}

.analysis-kpi__icon {
    display: grid;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    place-items: center;
    color: var(--ui-brand);
    background: #f2f7ff;
    border: 1px solid #dce9ff;
    border-radius: 50%;
}

.analysis-kpi__icon .ui-icon {
    width: 28px;
    height: 28px;
}

.analysis-kpi > div {
    min-width: 0;
}

.analysis-kpi > div > span {
    display: block;
    color: var(--ui-ink-soft);
    font-size: 14px;
    font-weight: 650;
}

.analysis-kpi strong {
    display: block;
    margin: 3px 0 4px;
    overflow-wrap: anywhere;
    color: #0b61d8;
    font-size: clamp(25px, 2.4vw, 31px);
    font-weight: 790;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.analysis-kpi small {
    display: block;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.4;
}

.analysis-kpi--difference {
    background: linear-gradient(135deg, #f7fcf8 0%, #f1fbf4 100%);
    border-color: #cae9d4;
}

.analysis-kpi--difference .analysis-kpi__icon {
    color: var(--ui-success);
    background: #ebf9f0;
    border-color: #d1efdb;
}

.analysis-kpi--difference strong {
    color: var(--ui-success);
}

.analysis-kpi--difference.analysis-kpi--warning {
    background: linear-gradient(135deg, #fffbf5 0%, #fff7e9 100%);
    border-color: #fedba8;
}

.analysis-kpi--difference.analysis-kpi--warning .analysis-kpi__icon {
    color: var(--ui-warning-dark);
    background: #fff4df;
    border-color: #fedba8;
}

.analysis-kpi--difference.analysis-kpi--warning strong {
    color: var(--ui-warning-dark);
}

.analysis-kpi--difference.analysis-kpi--danger {
    background: linear-gradient(135deg, #fffafa 0%, var(--ui-danger-soft) 100%);
    border-color: #fecaca;
}

.analysis-kpi--difference.analysis-kpi--danger .analysis-kpi__icon {
    color: var(--ui-danger-dark);
    background: var(--ui-danger-soft);
    border-color: #fecaca;
}

.analysis-kpi--difference.analysis-kpi--danger strong {
    color: var(--ui-danger-dark);
}

.analysis-kpi--difference.analysis-kpi--neutral {
    background: #fbfcfd;
    border-color: var(--ui-border);
}

.analysis-kpi--difference.analysis-kpi--neutral .analysis-kpi__icon {
    color: var(--ui-muted);
    background: var(--ui-neutral-soft);
    border-color: var(--ui-border);
}

.analysis-kpi--difference.analysis-kpi--neutral strong {
    color: var(--ui-ink-soft);
}

.analysis-notice {
    min-height: 76px;
    margin: 0 0 22px;
    padding: 17px 20px;
    align-items: center;
    border-radius: 12px;
    font-size: 14px;
}

.analysis-notice > .ui-icon {
    width: 21px;
    height: 21px;
}

.analysis-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 24px;
    align-items: start;
}

.analysis-main,
.analysis-sidebar {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.analysis-comparison,
.analysis-classification,
.analysis-coverage,
.analysis-next {
    min-width: 0;
    padding: 21px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025), 0 7px 18px rgba(16, 24, 40, .035);
}

.analysis-section-heading,
.analysis-section-heading > div,
.analysis-sidebar-heading {
    display: flex;
    align-items: flex-start;
}

.analysis-section-heading {
    min-height: 48px;
    margin-bottom: 16px;
    justify-content: space-between;
    gap: 16px;
}

.analysis-section-heading > div {
    min-width: 0;
    gap: 11px;
}

.analysis-section-heading__icon,
.analysis-sidebar-heading > span {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 10px;
}

.analysis-section-heading__icon .ui-icon,
.analysis-sidebar-heading > span .ui-icon {
    width: 20px;
    height: 20px;
}

.analysis-section-heading h2,
.analysis-sidebar-heading h2 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -.015em;
}

.analysis-section-heading p,
.analysis-sidebar-heading p {
    margin: 3px 0 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.45;
}

.analysis-section-heading > .ui-badge {
    margin-top: 3px;
}

.analysis-table-wrap {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

.analysis-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: var(--ui-ink-soft);
    font-size: 14px;
}

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

.analysis-table thead th {
    height: 39px;
    padding-block: 9px;
    color: var(--ui-muted);
    background: #fbfcfd;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.analysis-table thead th:first-child {
    width: 26%;
}

.analysis-table thead th:nth-child(2),
.analysis-table thead th:nth-child(3),
.analysis-table thead th:nth-child(4) {
    width: 15%;
}

.analysis-table thead th:nth-child(5) {
    width: 22%;
}

.analysis-table thead th:last-child {
    width: 7%;
}

.analysis-table tbody tr:last-child > * {
    border-bottom: 0;
}

.analysis-table tbody tr:hover {
    background: #fcfdff;
}

.analysis-item-name {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.analysis-item-name > span:last-child {
    min-width: 0;
}

.analysis-item-name strong,
.analysis-item-name small {
    display: block;
    overflow-wrap: anywhere;
}

.analysis-item-name strong {
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 690;
}

.analysis-item-name small {
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 550;
}

.analysis-status-icon {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    color: #475467;
    background: var(--ui-neutral-soft);
    border-radius: 50%;
}

.analysis-status-icon .ui-icon {
    width: 14px;
    height: 14px;
}

.analysis-status-icon--success { color: var(--ui-success-dark); background: var(--ui-success-soft); }
.analysis-status-icon--warning { color: var(--ui-warning-dark); background: var(--ui-warning-soft); }
.analysis-status-icon--danger { color: var(--ui-danger-dark); background: var(--ui-danger-soft); }

.analysis-item-reason,
.analysis-excluded {
    display: inline-flex;
    margin: 6px 0 0 35px;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.45;
}

.analysis-item-reason {
    padding: 8px 10px;
    align-items: flex-start;
    gap: 7px;
    color: var(--ui-warning-dark);
    background: #fff4dd;
    border: 1px solid #f8cf91;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 550;
}

.analysis-item-reason > span {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.analysis-item-reason strong {
    font-size: 12px;
    font-weight: 760;
}

.analysis-item-reason .ui-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
}

.analysis-excluded {
    color: var(--ui-danger-dark);
    font-weight: 650;
}

.analysis-excluded .ui-icon {
    width: 14px;
    height: 14px;
}

.analysis-table tbody tr.analysis-item--semantic-warning > * {
    background: #fffbf3;
    border-top: 1px solid #f6c66f;
    border-bottom-color: #f6c66f;
}

.analysis-table tbody tr.analysis-item--semantic-warning > *:first-child {
    box-shadow: inset 4px 0 0 var(--ui-warning);
}

.analysis-table tbody tr.analysis-item--semantic-warning:hover > * {
    background: #fff8e9;
}

.analysis-cell-value,
.analysis-table td > small {
    display: block;
}

.analysis-cell-value {
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 700;
}

.analysis-cell-value--success { color: var(--ui-success-dark); }
.analysis-cell-value--warning { color: var(--ui-warning-dark); }
.analysis-cell-value--danger { color: var(--ui-danger-dark); }

.analysis-table td > small {
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 12px;
}

.analysis-table td .ui-badge {
    min-height: 23px;
    padding: 4px 7px;
    white-space: normal;
}

.analysis-verification {
    display: block;
    margin-top: 4px;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.analysis-detail-button {
    width: 34px;
    height: 34px;
    border-color: transparent;
}

.analysis-detail-button:hover {
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
}

.analysis-empty-items {
    display: flex;
    min-height: 150px;
    padding: 25px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--ui-muted);
    background: var(--ui-surface-subtle);
    border: 1px dashed var(--ui-border-strong);
    border-radius: 10px;
}

.analysis-empty-items > .ui-icon {
    width: 31px;
    height: 31px;
    color: var(--ui-brand);
}

.analysis-empty-items h3 {
    margin: 0 0 3px;
    color: var(--ui-ink);
    font-size: 16px;
}

.analysis-empty-items p {
    max-width: 520px;
    margin: 0;
    font-size: 14px;
}

.analysis-classification-grid {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.analysis-classification-grid > div {
    min-width: 0;
    padding: 11px 12px;
    background: #fbfcff;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
}

.analysis-classification-grid dt {
    overflow: hidden;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-classification-grid dd {
    margin: 3px 0 0;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 760;
}

.analysis-classification-grid dd small {
    display: block;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 550;
}

.analysis-sidebar-heading {
    gap: 11px;
}

.analysis-sidebar-heading > div {
    min-width: 0;
}

.analysis-coverage__number {
    display: flex;
    margin: 22px 0 8px;
    align-items: flex-end;
    justify-content: space-between;
    color: var(--ui-brand);
}

.analysis-coverage__number strong {
    font-size: 25px;
    font-weight: 790;
    letter-spacing: -.03em;
    line-height: 1;
}

.analysis-coverage__number span {
    font-size: 12px;
    font-weight: 720;
}

.analysis-progress {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    appearance: none;
    background: #e8edf4;
    border: 0;
    border-radius: 999px;
}

.analysis-progress::-webkit-progress-bar {
    background: #e8edf4;
    border-radius: 999px;
}

.analysis-progress::-webkit-progress-value {
    background: linear-gradient(90deg, #0865f2, #438bf7);
    border-radius: inherit;
}

.analysis-progress::-moz-progress-bar {
    background: linear-gradient(90deg, #0865f2, #438bf7);
    border-radius: inherit;
}

.analysis-coverage-breakdown {
    display: grid;
    margin: 18px 0 0;
    gap: 0;
}

.analysis-coverage-breakdown > div {
    display: flex;
    min-height: 33px;
    padding: 7px 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--ui-border);
}

.analysis-coverage-breakdown dt,
.analysis-coverage-breakdown dd {
    margin: 0;
    font-size: 12px;
}

.analysis-coverage-breakdown dt {
    color: var(--ui-muted);
}

.analysis-coverage-breakdown dd {
    color: var(--ui-ink);
    font-weight: 750;
}

.analysis-coverage__scope {
    display: flex;
    margin: 14px 0 0;
    align-items: flex-start;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.45;
}

.analysis-coverage__scope .ui-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--ui-brand);
}

.analysis-next {
    display: grid;
    gap: 11px;
}

.analysis-next .analysis-sidebar-heading {
    margin-bottom: 6px;
}

.analysis-next > p,
.analysis-privacy-note {
    display: flex;
    margin: 2px 0 0;
    align-items: flex-start;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.45;
}

.analysis-next > p .ui-icon,
.analysis-privacy-note .ui-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--ui-brand);
}

.analysis-privacy-note {
    padding: 0 13px;
}

.analysis-state {
    display: grid;
    min-height: 390px;
    padding: 48px;
    place-content: center;
    grid-template-columns: auto minmax(0, 620px);
    gap: 21px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    box-shadow: var(--ui-shadow-card);
}

.analysis-state__icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 50%;
}

.analysis-state__icon > .ui-icon {
    width: 28px;
    height: 28px;
}

.analysis-state .ui-loader {
    width: 28px;
    height: 28px;
}

.analysis-state h2 {
    margin: 4px 0 7px;
    color: var(--ui-ink);
    font-size: 25px;
    letter-spacing: -.025em;
}

.analysis-state p:not(.ui-eyebrow) {
    margin: 0;
    color: var(--ui-muted);
    font-size: 14px;
}

.analysis-state .ui-button {
    margin-top: 20px;
}

.analysis-state--error .analysis-state__icon {
    color: var(--ui-danger-dark);
    background: var(--ui-danger-soft);
}

.analysis-state--unavailable .analysis-state__icon {
    color: var(--ui-warning-dark);
    background: var(--ui-warning-soft);
}

.analysis-loading-grid {
    display: grid;
    margin-top: 28px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.analysis-loading-grid i {
    display: block;
    height: 88px;
    overflow: hidden;
    background: linear-gradient(100deg, #eef2f7 20%, #f9fbfd 42%, #eef2f7 64%);
    background-size: 300% 100%;
    border-radius: 12px;
    animation: analysis-shimmer 1.5s ease-in-out infinite;
}

@keyframes analysis-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

.work-analysis-ready {
    display: grid;
    padding: 20px;
    gap: 12px;
    background: linear-gradient(145deg, #f6fbff 0%, #eef5ff 100%);
    border-color: #cfe1fd;
}

.work-analysis-ready > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--ui-brand);
    background: #fff;
    border: 1px solid #d4e4fc;
    border-radius: 11px;
}

.work-analysis-ready > span .ui-icon {
    width: 22px;
    height: 22px;
}

.work-analysis-ready h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 750;
}

.work-analysis-ready p {
    margin: 3px 0 0;
    color: var(--ui-muted);
    font-size: 14px;
    line-height: 1.45;
}

.work-analysis-ready--pending {
    background: linear-gradient(145deg, #fffaf1 0%, #fff5e3 100%);
    border-color: #f6c66f;
}

.work-analysis-ready--pending > span {
    color: var(--ui-warning-dark);
    background: #fff;
    border-color: #f6c66f;
}

/* Native dialog becomes the reference-style, viewport-bound right drawer. */
.ui-dialog.analysis-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    box-sizing: border-box;
    width: min(620px, calc(100% - 48px));
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: 16px 0 0 16px;
}

.ui-dialog.analysis-drawer::backdrop {
    background: rgba(16, 24, 40, .58);
    backdrop-filter: blur(1.5px);
}

.analysis-drawer__shell {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
}

.analysis-drawer__header {
    display: flex;
    padding: 29px 31px 22px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border-bottom: 1px solid var(--ui-border);
}

.analysis-drawer__header > div {
    min-width: 0;
}

.analysis-drawer__header .ui-eyebrow {
    margin: 0 0 5px;
    font-size: 13px;
}

.analysis-drawer__header h2 {
    margin: 0 0 9px;
    overflow-wrap: anywhere;
    color: var(--ui-ink);
    font-size: 26px;
    font-weight: 790;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.analysis-drawer__header > .ui-icon-button {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-color: transparent;
}

.analysis-drawer__body {
    min-height: 0;
    padding: 24px 31px 32px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.analysis-drawer__footer {
    padding: 15px 31px;
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--ui-border);
}

.analysis-detail-intro {
    margin: 0 0 21px;
    color: var(--ui-muted);
    font-size: 14px;
    line-height: 1.55;
}

.analysis-detail-section {
    padding: 23px 0;
    border-top: 1px solid var(--ui-border);
}

.analysis-detail-intro + .analysis-detail-section {
    padding-top: 0;
    border-top: 0;
}

.analysis-detail-section h3 {
    margin: 0 0 13px;
    color: var(--ui-ink);
    font-size: 17px;
    font-weight: 760;
    letter-spacing: -.015em;
}

.analysis-detail-comparison {
    display: grid;
    gap: 10px;
}

.analysis-detail-comparison article {
    padding: 13px 15px;
    background: #fbfcff;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

.analysis-detail-comparison h4 {
    margin: 0 0 9px;
    color: var(--ui-ink-soft);
    font-size: 14px;
}

.analysis-detail-comparison dl {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analysis-detail-comparison dl > div {
    min-width: 0;
    padding-inline: 12px;
    border-left: 1px solid var(--ui-border);
}

.analysis-detail-comparison dl > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.analysis-detail-comparison dt,
.analysis-detail-comparison dd {
    overflow-wrap: anywhere;
}

.analysis-detail-comparison dt {
    color: var(--ui-muted);
    font-size: 12px;
}

.analysis-detail-comparison dd {
    margin: 3px 0 0;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 750;
}

.analysis-detail-reason {
    margin: 0 0 3px;
}

.analysis-trace {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    gap: 10px;
    list-style: none;
}

.analysis-trace li {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 10px;
}

.analysis-trace li > span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 50%;
}

.analysis-trace li > span::after {
    position: absolute;
    z-index: -1;
    top: 29px;
    bottom: -17px;
    left: 14px;
    width: 1px;
    content: "";
    background: #ccdaf0;
}

.analysis-trace li:last-child > span::after {
    display: none;
}

.analysis-trace li > span .ui-icon {
    width: 14px;
    height: 14px;
}

.analysis-trace li > div {
    min-width: 0;
    padding: 4px 12px 12px 0;
}

.analysis-trace strong,
.analysis-trace small,
.analysis-trace b,
.analysis-trace em {
    display: block;
    overflow-wrap: anywhere;
}

.analysis-trace strong {
    color: var(--ui-ink);
    font-size: 14px;
}

.analysis-trace small {
    margin-top: 1px;
    color: var(--ui-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.analysis-trace p {
    margin: 6px 0 2px;
    overflow-wrap: anywhere;
    color: var(--ui-muted);
    font-size: 12px;
}

.analysis-trace b {
    margin-top: 3px;
    color: var(--ui-brand-dark);
    font-size: 14px;
}

.analysis-trace em {
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 12px;
    font-style: normal;
}

.analysis-detail-empty {
    display: flex;
    margin: 0;
    padding: 13px;
    align-items: flex-start;
    gap: 8px;
    color: var(--ui-muted);
    background: var(--ui-neutral-soft);
    border-radius: 9px;
    font-size: 14px;
}

.analysis-document-trace-note {
    display: flex;
    margin: 0 0 14px;
    padding: 12px 13px;
    align-items: flex-start;
    gap: 8px;
    color: var(--ui-ink-soft);
    background: var(--ui-warning-soft);
    border: 1px solid #fedba8;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.5;
}

.analysis-document-trace-note .ui-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--ui-warning-dark);
}

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

.analysis-engine-meta > div {
    min-width: 0;
    padding: 13px 14px;
    background: #fbfcff;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
}

.analysis-engine-meta dt {
    color: var(--ui-muted);
    font-size: 12px;
}

.analysis-engine-meta dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 720;
}

.analysis-detail-empty .ui-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.analysis-rule-list,
.analysis-source-list {
    display: grid;
    gap: 9px;
}

.analysis-rule-list article,
.analysis-source-list article {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

.analysis-rule-list article > div:first-child,
.analysis-source-list article {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.analysis-rule-icon,
.analysis-source-list article > span {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 8px;
}

.analysis-rule-icon .ui-icon,
.analysis-source-list article > span .ui-icon {
    width: 16px;
    height: 16px;
}

.analysis-rule-list h4,
.analysis-source-list h4 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ui-ink);
    font-size: 14px;
}

.analysis-rule-list p,
.analysis-source-list p {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    color: var(--ui-muted);
    font-size: 13px;
}

.analysis-rule-list dl {
    display: grid;
    margin: 12px 0 0 41px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.analysis-rule-list dl > div {
    min-width: 0;
}

.analysis-rule-list dt,
.analysis-rule-list dd {
    overflow-wrap: anywhere;
    font-size: 12px;
}

.analysis-rule-list dt {
    color: var(--ui-muted);
}

.analysis-rule-list dd {
    margin: 2px 0 0;
    color: var(--ui-ink-soft);
    font-size: 13px;
    font-weight: 650;
}

.analysis-source-list article > div {
    min-width: 0;
}

.analysis-source-list small {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: var(--ui-muted);
    font-size: 12px;
}

.analysis-source-list a {
    display: inline-flex;
    margin-top: 8px;
    align-items: center;
    gap: 5px;
    color: var(--ui-brand-dark);
    font-size: 14px;
    font-weight: 700;
}

.analysis-source-list a .ui-icon {
    width: 12px;
    height: 12px;
}

.analysis-semantic {
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

.analysis-semantic summary {
    display: flex;
    min-height: 47px;
    padding: 11px 13px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ui-ink-soft);
    background: #fbfcfd;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.analysis-semantic summary::-webkit-details-marker {
    display: none;
}

.analysis-semantic summary .ui-icon {
    width: 15px;
    height: 15px;
}

.analysis-semantic[open] summary .ui-icon {
    transform: rotate(180deg);
}

.analysis-semantic dl {
    display: grid;
    margin: 0;
    padding: 12px 13px;
    gap: 9px;
}

.analysis-semantic dl > div {
    min-width: 0;
}

.analysis-semantic dt,
.analysis-semantic dd {
    overflow-wrap: anywhere;
    font-size: 12px;
}

.analysis-drawer__footer .ui-button--outline {
    color: var(--ui-brand-dark);
    background: #fff;
}

.analysis-drawer__footer .ui-button--outline:hover,
.analysis-drawer__footer .ui-button--outline:focus-visible {
    color: #064bbd;
    background: var(--ui-brand-soft);
}

.analysis-semantic dt {
    color: var(--ui-muted);
}

.analysis-semantic dd {
    margin: 2px 0 0;
    color: var(--ui-ink-soft);
    font-size: 13px;
}

@media (max-width: 1099px) {
    .analysis-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 18px;
    }

    .analysis-kpi {
        min-height: 140px;
        padding: 20px;
        gap: 14px;
    }

    .analysis-kpi__icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .analysis-table th,
    .analysis-table td {
        padding-inline: 8px;
    }
}

@media (max-width: 991px) {
    .analysis-container {
        width: calc(100% - 40px);
    }

    .analysis-kpis {
        gap: 13px;
    }

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

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

    .analysis-privacy-note {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .analysis-page {
        padding: 22px 0 42px;
    }

    .analysis-container {
        width: calc(100% - 32px);
    }

    .analysis-heading {
        flex-direction: column;
        gap: 10px;
    }

    .analysis-heading h1 {
        font-size: 30px;
        letter-spacing: -.03em;
    }

    .analysis-heading > div:first-child > p:last-child {
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.5;
    }

    .analysis-heading__meta {
        min-width: 0;
        width: 100%;
        margin-top: 0;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .analysis-stepper {
        min-height: 68px;
        margin: 17px 0;
        padding: 0 8px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .analysis-stepper li {
        min-height: 0;
        padding: 0;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        font-size: 12px;
        line-height: 1.1;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .analysis-stepper li:not(:last-child)::after {
        display: none;
    }

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

    .analysis-kpi {
        min-height: 116px;
        padding: 13px;
        align-items: flex-start;
        gap: 9px;
    }

    .analysis-kpi--difference {
        min-height: 108px;
        grid-column: 1 / -1;
        align-items: center;
    }

    .analysis-kpi__icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .analysis-kpi__icon .ui-icon {
        width: 19px;
        height: 19px;
    }

    .analysis-kpi > div > span {
        font-size: 13px;
        line-height: 1.25;
    }

    .analysis-kpi strong {
        margin-block: 2px;
        font-size: clamp(17px, 5vw, 22px);
        white-space: normal;
    }

    .analysis-kpi small {
        font-size: 12px;
    }

    .analysis-notice {
        min-height: 0;
        margin-bottom: 14px;
        padding: 13px;
        align-items: flex-start;
        font-size: 14px;
    }

    .analysis-layout {
        gap: 13px;
    }

    .analysis-main,
    .analysis-sidebar {
        display: contents;
    }

    .analysis-comparison { order: 1; }
    .analysis-coverage { order: 2; }
    .analysis-next { order: 3; }
    .analysis-classification { order: 4; }
    .analysis-privacy-note { order: 5; }

    .analysis-sidebar {
        grid-template-columns: 1fr;
    }

    .analysis-comparison,
    .analysis-classification,
    .analysis-coverage,
    .analysis-next {
        padding: 16px;
    }

    .analysis-section-heading {
        min-height: 0;
        margin-bottom: 13px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .analysis-section-heading__icon,
    .analysis-sidebar-heading > span {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .analysis-section-heading h2,
    .analysis-sidebar-heading h2 {
        font-size: 16px;
    }

    .analysis-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .analysis-table,
    .analysis-table tbody,
    .analysis-table tr,
    .analysis-table th,
    .analysis-table td {
        display: block;
        width: 100%;
    }

    .analysis-table {
        table-layout: auto;
    }

    .analysis-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .analysis-table tbody {
        display: grid;
        gap: 10px;
    }

    .analysis-table tbody tr {
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--ui-border);
        border-radius: 10px;
    }

    .analysis-table tbody tr:hover {
        background: #fff;
    }

    .analysis-table th,
    .analysis-table td {
        min-width: 0;
        padding: 9px 11px;
        border-bottom: 1px solid var(--ui-border);
    }

    .analysis-table th::before,
    .analysis-table td::before {
        display: block;
        margin-bottom: 4px;
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: 12px;
        font-weight: 650;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .analysis-table th:first-child::before {
        display: none;
    }

    .analysis-table th:first-child {
        padding-block: 11px;
        background: #fbfcfd;
    }

    .analysis-table td:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 0;
    }

    .analysis-table td:last-child::before {
        margin-bottom: 0;
    }

    .analysis-detail-button {
        width: 38px;
        height: 38px;
        border-color: var(--ui-border);
    }

    .analysis-excluded {
        margin-left: 35px;
    }

    .analysis-table tbody tr.analysis-item--semantic-warning {
        border-color: #f6c66f;
        box-shadow: 0 0 0 2px rgba(247, 144, 9, .16);
    }

    .analysis-table tbody tr.analysis-item--semantic-warning > *:first-child {
        background: #fff8e9;
    }

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

    .analysis-state {
        min-height: 360px;
        padding: 30px 20px;
        place-content: center;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .analysis-state__icon {
        margin-inline: auto;
    }

    .analysis-state h2 {
        font-size: 21px;
    }

    .analysis-state .ui-button {
        width: 100%;
    }

    .analysis-loading-grid {
        grid-template-columns: 1fr;
    }

    .analysis-loading-grid i {
        height: 60px;
    }

    .work-analysis-ready {
        padding: 17px;
    }

    .ui-dialog.analysis-drawer {
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .analysis-drawer__header {
        padding: 19px 16px 15px;
    }

    .analysis-drawer__header h2 {
        font-size: 23px;
    }

    .analysis-drawer__body {
        padding: 18px 16px 25px;
    }

    .analysis-drawer__footer {
        padding: 11px 16px max(11px, env(safe-area-inset-bottom));
    }

    .analysis-detail-comparison dl {
        gap: 0;
    }

    .analysis-rule-list dl {
        margin-left: 0;
    }

    .analysis-engine-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 389px) {
    .analysis-heading h1 {
        font-size: 27px;
    }

    .analysis-container {
        width: calc(100% - 28px);
    }

    .analysis-kpis {
        grid-template-columns: 1fr;
    }

    .analysis-kpi,
    .analysis-kpi--difference {
        min-height: 98px;
        grid-column: auto;
        align-items: center;
    }

    .analysis-kpi strong {
        font-size: 21px;
    }

    .analysis-comparison,
    .analysis-classification,
    .analysis-coverage,
    .analysis-next {
        padding: 13px;
    }

    .analysis-item-name {
        align-items: flex-start;
    }

    .analysis-classification-grid {
        grid-template-columns: 1fr;
    }

    .analysis-detail-comparison dl {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .analysis-detail-comparison dl > div,
    .analysis-detail-comparison dl > div:first-child {
        padding: 0 0 8px;
        border-width: 0 0 1px;
        border-style: solid;
        border-color: var(--ui-border);
    }

    .analysis-detail-comparison dl > div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .analysis-rule-list dl {
        grid-template-columns: 1fr;
    }

    .analysis-drawer__header {
        padding-inline: 14px;
    }

    .analysis-drawer__body,
    .analysis-drawer__footer {
        padding-inline: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .analysis-loading-grid i {
        animation: none;
        background: #eef2f7;
    }

    .analysis-semantic[open] summary .ui-icon {
        transform: none;
    }
}

/* PR #20 — server-owned history, salary statistics and accounting inquiry */
.ui-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ui-button--ghost {
    color: var(--ui-brand);
    background: transparent;
    border-color: transparent;
}

.ui-button--ghost:not(:disabled):hover {
    background: var(--ui-brand-soft);
}

.history-page {
    min-height: calc(100vh - var(--ui-header-height));
    padding: 36px 0 72px;
    background: #f7f9fc;
}

.history-container {
    width: min(1320px, calc(100% - 68px));
    margin-inline: auto;
}

.history-container--inquiry {
    width: min(1240px, calc(100% - 68px));
}

.history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

.history-heading > div {
    min-width: 0;
}

.history-heading .ui-eyebrow {
    margin-bottom: 7px;
}

.history-heading h1 {
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(34px, 3vw, 42px);
    font-weight: 790;
    letter-spacing: -.038em;
    line-height: 1.1;
}

.history-heading > div > p:last-child {
    max-width: 780px;
    margin: 10px 0 0;
    color: var(--ui-muted);
    font-size: 15px;
}

.history-heading > .ui-button,
.history-heading > .ui-badge {
    margin-top: 22px;
    flex: 0 0 auto;
}

.history-filters {
    display: flex;
    min-height: 84px;
    margin-top: 26px;
    padding: 16px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.history-filters form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.history-filters .ui-field {
    min-width: 210px;
}

.history-filters .ui-field > span,
.statistics-filter .ui-field > span {
    display: block;
    margin-bottom: 5px;
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 700;
}

.history-filter-summary {
    display: flex;
    margin: 0;
    gap: 10px;
}

.history-filter-summary > div {
    min-width: 98px;
    padding: 8px 12px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    text-align: center;
}

.history-filter-summary dt {
    color: var(--ui-muted);
    font-size: 10px;
}

.history-filter-summary dd {
    margin: 2px 0 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 780;
}

.history-list-card {
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .035);
}

.history-section-heading {
    display: flex;
    min-height: 68px;
    padding: 15px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--ui-border);
}

.history-section-heading h2 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -.02em;
}

.history-section-heading p {
    margin: 3px 0 0;
    color: var(--ui-muted);
    font-size: 12px;
}

.history-section-heading > .ui-icon {
    width: 22px;
    height: 22px;
    color: var(--ui-brand);
}

.history-table-wrap,
.history-items-table-wrap,
.statistics-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.history-table,
.history-items-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.history-table th,
.history-table td,
.history-items-table th,
.history-items-table td {
    padding: 16px 13px;
    vertical-align: middle;
    color: var(--ui-ink-soft);
    border-bottom: 1px solid var(--ui-border);
    font-size: 12px;
    text-align: left;
}

.history-table thead th,
.history-items-table thead th {
    padding-block: 12px;
    color: var(--ui-muted);
    background: #fbfcfd;
    font-size: 10px;
    font-weight: 740;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.history-table tbody tr:last-child > *,
.history-items-table tbody tr:last-child > * {
    border-bottom: 0;
}

.history-table tbody tr:hover,
.history-items-table tbody tr:hover {
    background: #fbfdff;
}

.history-table th:first-child { width: 16%; }
.history-table th:nth-child(2) { width: 17%; }
.history-table th:nth-child(3),
.history-table th:nth-child(4) { width: 14%; }
.history-table th:nth-child(5) { width: 12%; }
.history-table th:nth-child(6) { width: 21%; }
.history-table th:last-child { width: 6%; }

.history-period-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-period-cell strong { white-space: nowrap; }

.history-period-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 9px;
    flex: 0 0 38px;
}

.history-period-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.history-table strong,
.history-table small,
.history-items-table strong,
.history-items-table small,
.history-items-table em {
    display: block;
}

.history-table strong {
    color: var(--ui-ink);
    font-size: 13px;
    font-weight: 730;
}

.history-table small,
.history-items-table small {
    margin-top: 4px;
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 520;
    line-height: 1.35;
}

.history-table .ui-badge {
    margin-bottom: 1px;
}

.history-difference--warning {
    color: var(--ui-warning-dark) !important;
}

.history-difference--neutral {
    color: var(--ui-success-dark) !important;
}

.history-difference--unavailable {
    color: var(--ui-muted) !important;
}

.history-table td:last-child .ui-icon-button {
    width: 34px;
    height: 34px;
}

.history-privacy-note,
.history-detail-disclaimer {
    display: flex;
    margin: 18px 4px 0;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    color: var(--ui-muted);
    font-size: 12px;
    text-align: center;
}

.history-runtime-note {
    display: flex;
    margin: 16px 0 0;
    padding: 10px 13px;
    align-items: flex-start;
    gap: 8px;
    color: #175cd3;
    background: var(--ui-info-soft);
    border: 1px solid #c9ddfb;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.history-runtime-note .ui-icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.history-privacy-note .ui-icon,
.history-detail-disclaimer .ui-icon {
    margin-top: 2px;
    color: var(--ui-brand);
}

.history-state {
    display: grid;
    min-height: 430px;
    margin-top: 26px;
    padding: 52px;
    place-content: center;
    grid-template-columns: 70px minmax(0, 570px);
    align-items: center;
    gap: 24px;
    text-align: left;
}

.history-state > span:first-child {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 18px;
}

.history-state > span:first-child > .ui-icon {
    width: 32px;
    height: 32px;
}

.history-state h2 {
    margin: 6px 0 8px;
    font-size: 25px;
    letter-spacing: -.025em;
}

.history-state p:not(.ui-eyebrow) {
    margin: 0 0 20px;
    color: var(--ui-muted);
    font-size: 14px;
}

.history-state--error > span:first-child {
    color: var(--ui-danger-dark);
    background: var(--ui-danger-soft);
}

.history-state--filtered-empty {
    min-height: 300px;
    margin-top: 20px;
}

.history-state--loading {
    grid-template-columns: 70px minmax(0, 500px);
}

.history-skeleton {
    display: grid;
    min-width: 430px;
    grid-column: 1 / -1;
    gap: 9px;
}

.history-skeleton i {
    height: 58px;
    background: linear-gradient(90deg, #eef2f7 20%, #f8fafc 50%, #eef2f7 80%);
    background-size: 200% 100%;
    border-radius: 9px;
    animation: history-shimmer 1.5s ease-in-out infinite;
}

@keyframes history-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.history-breadcrumb {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 12px;
}

.history-breadcrumb a {
    color: var(--ui-brand);
    font-weight: 650;
}

.history-breadcrumb .ui-icon {
    width: 14px;
    height: 14px;
}

.history-kpis,
.statistics-kpis {
    display: grid;
    margin-top: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.history-kpi {
    display: flex;
    min-width: 0;
    min-height: 132px;
    padding: 20px;
    align-items: flex-start;
    gap: 14px;
}

.history-kpi > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 11px;
    flex: 0 0 44px;
}

.history-kpi--difference > span {
    color: var(--ui-warning-dark);
    background: var(--ui-warning-soft);
}

.history-kpi small,
.history-kpi strong,
.history-kpi p {
    display: block;
}

.history-kpi small {
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 650;
}

.history-kpi strong {
    margin: 5px 0 3px;
    color: var(--ui-ink);
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 790;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.history-kpi--difference strong {
    color: var(--ui-warning-dark);
}

.history-kpi p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.35;
}

.history-detail-alert {
    margin-top: 15px;
}

.history-mobile-actions,
.statistics-chart-scroll-note {
    display: none;
}

.history-detail-layout {
    display: grid;
    margin-top: 18px;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
}

.account-security-card,
.account-consent-card {
    min-height: 0;
    margin-top: 20px;
}

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

.account-security-card form > .ui-button,
.account-security-card form > .upload-card__fine-print {
    grid-column: 1 / -1;
    justify-self: start;
}

.account-security-card form > .upload-card__fine-print {
    margin: 0;
    text-align: left;
}

.account-consent-card {
    padding: 0 20px 20px;
}

.account-consent-card > p {
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.6;
}

.account-contribution-status {
    margin: 18px 0;
    padding: 16px 18px;
    color: var(--ui-ink-soft);
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-control);
}

.account-contribution-status h3,
.account-contribution-status p {
    margin: 0;
}

.account-contribution-status ul {
    margin: 10px 0;
    padding-left: 20px;
}

.account-contribution-status p {
    color: var(--ui-muted);
    font-size: 12px;
}

.account-contribution-form {
    display: grid;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ui-border);
    gap: 14px;
}

.account-contribution-form > label:not(.ui-check) {
    display: grid;
    color: var(--ui-ink-soft);
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
}

.account-contribution-form input[type="password"],
.account-contribution-form select {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--ui-ink);
    background: #fff;
    border: 1px solid var(--ui-muted);
    border-radius: var(--ui-radius-control);
}

.account-contribution-form input[type="password"]:focus,
.account-contribution-form select:focus {
    border-color: var(--ui-brand);
    outline: 3px solid rgba(8, 101, 242, .14);
}

.account-contribution-form > .ui-button {
    justify-self: start;
}

.history-detail-main,
.history-detail-aside {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.history-detail-card,
.history-action-card,
.history-coverage-card,
.history-provenance {
    overflow: hidden;
}

.history-items-table th:first-child { width: 20%; }
.history-items-table th:nth-child(2),
.history-items-table th:nth-child(3),
.history-items-table th:nth-child(4) { width: 9%; }
.history-items-table th:nth-child(5),
.history-items-table th:nth-child(6),
.history-items-table th:nth-child(7) { width: 11%; }
.history-items-table th:last-child { width: 20%; }

.history-items-table tbody th {
    color: var(--ui-ink);
    font-size: 12px;
}

.history-items-table em {
    margin-top: 6px;
    color: var(--ui-warning-dark);
    font-size: 10px;
    font-style: normal;
    font-weight: 620;
    line-height: 1.35;
}

.history-items-table em .ui-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: -2px;
}

.history-items-table tbody tr[data-excluded-from-complete-difference="true"] {
    background: #fffcf5;
}

.history-items-table td .ui-badge {
    white-space: normal;
}

.history-minute-grid {
    display: grid;
    margin: 0;
    padding: 18px 20px 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.history-minute-grid > div {
    padding: 13px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

.history-minute-grid dt {
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 650;
}

.history-minute-grid dd {
    margin: 5px 0 0;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 750;
}

.history-minute-grid dd small {
    display: block;
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 9px;
    font-weight: 550;
}

.history-action-card,
.history-coverage-card {
    padding: 22px;
}

.history-action-card__icon,
.inquiry-tips > span,
.inquiry-privacy > span {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 12px;
}

.history-action-card h2,
.history-coverage-card h2,
.inquiry-tips h2,
.inquiry-privacy h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -.02em;
}

.history-action-card p,
.history-coverage-card p {
    margin: 7px 0 17px;
    color: var(--ui-muted);
    font-size: 12px;
}

.history-action-card .ui-button + .ui-button {
    margin-top: 9px;
}

.history-coverage-card > strong {
    display: block;
    margin: 12px 0 7px;
    color: var(--ui-ink);
    font-size: 30px;
    font-weight: 790;
}

.history-coverage-card dl {
    margin: 14px 0 0;
}

.history-coverage-card dl > div {
    display: flex;
    padding: 8px 0;
    justify-content: space-between;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: 11px;
}

.history-coverage-card dd {
    margin: 0;
    color: var(--ui-ink);
    font-weight: 750;
}

.history-detail-disclaimer {
    margin: 0;
    padding: 0 8px;
    justify-content: flex-start;
    text-align: left;
}

.history-provenance summary,
.statistics-table-card summary {
    display: flex;
    min-height: 72px;
    padding: 16px 20px;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.history-provenance summary::-webkit-details-marker,
.statistics-table-card summary::-webkit-details-marker {
    display: none;
}

.history-provenance summary > span:not(.history-summary-copy),
.statistics-table-card summary > span:not(.history-summary-copy) {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 10px;
}

.history-summary-copy {
    min-width: 0;
    flex: 1;
}

.history-provenance summary strong,
.history-provenance summary small,
.statistics-table-card summary strong,
.statistics-table-card summary small {
    display: block;
}

.history-provenance summary strong,
.statistics-table-card summary strong {
    font-size: 15px;
}

.history-provenance summary small,
.statistics-table-card summary small {
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 11px;
}

.history-provenance summary > .ui-icon,
.statistics-table-card summary > .ui-icon {
    transition: transform .15s ease;
}

.history-provenance[open] summary > .ui-icon,
.statistics-table-card[open] summary > .ui-icon {
    transform: rotate(180deg);
}

.history-provenance__body {
    padding: 0 20px 22px;
    border-top: 1px solid var(--ui-border);
}

.history-provenance__body > dl {
    display: grid;
    margin: 18px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.history-provenance__body > dl > div {
    padding: 10px;
    background: var(--ui-surface-subtle);
    border-radius: 8px;
}

.history-provenance__body dt,
.history-provenance__body dd {
    margin: 0;
    font-size: 11px;
}

.history-provenance__body dt { color: var(--ui-muted); }
.history-provenance__body dd { margin-top: 3px; color: var(--ui-ink-soft); overflow-wrap: anywhere; }
.history-provenance__body h3 { margin: 16px 0 7px; font-size: 13px; }
.history-provenance__body ul { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; list-style: none; }
.history-provenance__body li { min-width: 0; padding: 8px 10px; background: #fbfcfd; border: 1px solid var(--ui-border); border-radius: 7px; font-size: 10px; overflow-wrap: anywhere; }
.history-provenance__body li small { display: block; margin-top: 2px; color: var(--ui-muted); }
.history-provenance__body a { color: var(--ui-brand); font-weight: 650; }

.statistics-filter {
    display: flex;
    min-height: 82px;
    margin-top: 25px;
    padding: 15px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.statistics-filter form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.statistics-filter .ui-field {
    min-width: 250px;
}

.statistics-filter > p {
    display: flex;
    max-width: 490px;
    margin: 0;
    align-items: center;
    gap: 8px;
    color: var(--ui-muted);
    font-size: 11px;
}

.statistics-kpi {
    min-width: 0;
    min-height: 145px;
    padding: 20px;
}

.statistics-kpi > span {
    display: grid;
    width: 40px;
    height: 40px;
    margin-bottom: 13px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 10px;
}

.statistics-kpi--difference > span {
    color: var(--ui-warning-dark);
    background: var(--ui-warning-soft);
}

.statistics-kpi small,
.statistics-kpi strong,
.statistics-kpi p {
    display: block;
}

.statistics-kpi small {
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 650;
}

.statistics-kpi strong {
    margin: 5px 0 4px;
    color: var(--ui-ink);
    font-size: 25px;
    font-weight: 790;
    letter-spacing: -.035em;
}

.statistics-kpi--difference strong { color: var(--ui-warning-dark); }
.statistics-kpi p { margin: 0; color: var(--ui-muted); font-size: 10px; line-height: 1.4; }

.statistics-charts {
    display: grid;
    margin-top: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.statistics-chart-card {
    min-width: 0;
    overflow: hidden;
}

.statistics-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-muted);
    font-size: 10px;
    white-space: nowrap;
}

.statistics-legend i {
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-radius: 50%;
}

.statistics-legend .is-employer { background: var(--ui-brand); }
.statistics-legend .is-expected { background: var(--ui-success); }

.statistics-chart {
    width: 100%;
    padding: 12px 18px 18px;
}

.statistics-chart svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.statistics-grid-line,
.statistics-baseline {
    stroke: #e7ebf0;
    stroke-width: 1;
}

.statistics-axis-label,
.statistics-period-label {
    fill: var(--ui-muted);
    font-family: var(--ui-font-sans);
    font-size: 9px;
}

.statistics-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.statistics-line--employer { stroke: var(--ui-brand); }
.statistics-line--expected { stroke: var(--ui-success); }
.statistics-point { stroke: #fff; stroke-width: 3; }
.statistics-point--employer { fill: var(--ui-brand); }
.statistics-point--expected { fill: var(--ui-success); }
.statistics-bar--positive { fill: var(--ui-warning); }
.statistics-bar--negative { fill: var(--ui-info); }
.statistics-bar--zero { fill: var(--ui-muted-light); }
.statistics-bar--missing { fill: #e5e7eb; stroke: #cbd1d9; stroke-dasharray: 3 3; }

.statistics-table-card {
    margin-top: 16px;
    overflow: hidden;
}

.statistics-table-card .history-table th:first-child { width: 12%; }
.statistics-table-card .history-table th:nth-child(2) { width: 15%; }
.statistics-table-card .history-table th:nth-child(3),
.statistics-table-card .history-table th:nth-child(4),
.statistics-table-card .history-table th:nth-child(5),
.statistics-table-card .history-table th:nth-child(6) { width: 12%; }
.statistics-table-card .history-table th:nth-child(7) { width: 13%; }
.statistics-table-card .history-table th:last-child { width: 12%; }

.statistics-summary-grid {
    display: grid;
    margin-top: 16px;
    grid-template-columns: .9fr 1.1fr;
    gap: 16px;
}

.statistics-summary-card {
    overflow: hidden;
    padding-bottom: 18px;
}

.statistics-summary-card > .history-section-heading {
    margin-bottom: 16px;
}

.statistics-coverage-number {
    display: flex;
    padding: 0 20px 7px;
    align-items: baseline;
    justify-content: space-between;
}

.statistics-coverage-number strong { font-size: 29px; letter-spacing: -.04em; }
.statistics-coverage-number span { color: var(--ui-brand); font-size: 18px; font-weight: 760; }
.statistics-summary-card > progress { margin-inline: 20px; width: calc(100% - 40px); }
.statistics-summary-card > p { margin: 10px 20px 0; color: var(--ui-muted); font-size: 11px; }

.statistics-verification-breakdown {
    display: grid;
    margin: 14px 20px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.statistics-verification-breakdown > div {
    display: flex;
    min-width: 0;
    padding: 8px 9px;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border-subtle);
    border-radius: 8px;
}

.statistics-verification-breakdown dt { color: var(--ui-muted); font-size: 9px; }
.statistics-verification-breakdown dd { margin: 0; color: var(--ui-ink); font-size: 12px; font-weight: 760; }

.statistics-minutes {
    display: grid;
    margin: 0;
    padding: 0 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.statistics-minutes > div {
    display: flex;
    min-width: 0;
    padding: 9px 10px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--ui-surface-subtle);
    border-radius: 8px;
}

.statistics-minutes dt { color: var(--ui-muted); font-size: 10px; }
.statistics-minutes dd { margin: 0; color: var(--ui-ink); font-size: 11px; font-weight: 730; text-align: right; }
.statistics-minutes dd small { display: block; color: var(--ui-muted); font-size: 8px; font-weight: 500; }

.statistics-action {
    display: flex;
    min-height: 90px;
    margin-top: 16px;
    padding: 17px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.statistics-action > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.statistics-action > div > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--ui-brand);
    background: var(--ui-brand-soft);
    border-radius: 11px;
}

.statistics-action h2 { margin: 0; font-size: 17px; }
.statistics-action p { margin: 3px 0 0; color: var(--ui-muted); font-size: 11px; }

.inquiry-summary {
    display: grid;
    min-height: 210px;
    margin-top: 26px;
    padding: 24px;
    grid-template-columns: 210px minmax(0, 1fr) 360px;
    align-items: center;
    gap: 25px;
}

.inquiry-summary h2 { margin: 5px 0 10px; font-size: 23px; letter-spacing: -.025em; }
.inquiry-summary dl { display: grid; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.inquiry-summary dl > div { padding: 11px 13px; background: var(--ui-surface-subtle); border: 1px solid var(--ui-border); border-radius: 9px; }
.inquiry-summary dt { color: var(--ui-muted); font-size: 10px; }
.inquiry-summary dd { margin: 4px 0 0; color: var(--ui-ink); font-size: 15px; font-weight: 760; }
.inquiry-summary dd small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 9px; font-weight: 520; line-height: 1.35; }

.inquiry-neutral-note {
    display: flex;
    min-height: 132px;
    padding: 18px;
    align-items: flex-start;
    gap: 12px;
    color: #175cd3;
    background: var(--ui-info-soft);
    border: 1px solid #c9ddfb;
    border-radius: 11px;
}

.inquiry-neutral-note > .ui-icon { width: 20px; height: 20px; margin-top: 2px; }
.inquiry-neutral-note p { margin: 0; font-size: 12px; line-height: 1.55; }
.inquiry-neutral-note strong { display: block; margin-bottom: 5px; font-size: 13px; }

.inquiry-layout {
    display: grid;
    margin-top: 18px;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 18px;
    align-items: start;
}

.inquiry-editor {
    min-width: 0;
    overflow: hidden;
    padding-bottom: 20px;
}

.inquiry-textarea-label {
    display: block;
    margin: 18px 20px 7px;
    color: var(--ui-ink-soft);
    font-size: 12px;
    font-weight: 700;
}

.inquiry-textarea {
    display: block;
    width: calc(100% - 40px);
    min-height: 590px;
    margin-inline: 20px;
    padding: 18px;
    resize: vertical;
    color: var(--ui-ink-soft);
    background: #fbfcfd;
    border: 1px solid var(--ui-border-strong);
    border-radius: 10px;
    font-family: var(--ui-font-sans);
    font-size: 13px;
    line-height: 1.58;
}

.inquiry-actions {
    display: flex;
    margin: 16px 20px 0;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.inquiry-feedback {
    min-height: 22px;
    margin: 10px 20px 0;
    color: var(--ui-success-dark);
    font-size: 12px;
    font-weight: 650;
}

.inquiry-actions [hidden] {
    display: none !important;
}

.inquiry-actions .ui-button[aria-busy="true"] {
    opacity: .72;
    cursor: progress;
}

.inquiry-manual-copy-note {
    margin: 10px 20px 0;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.5;
}

.inquiry-aside {
    display: grid;
    gap: 16px;
}

.inquiry-tips,
.inquiry-privacy {
    padding: 20px;
}

.inquiry-tips ul {
    display: grid;
    margin: 14px 0 0;
    padding-left: 18px;
    gap: 9px;
    color: var(--ui-muted);
    font-size: 12px;
}

.inquiry-privacy p {
    margin: 9px 0 14px;
    color: var(--ui-muted);
    font-size: 11px;
}

.inquiry-privacy dl {
    margin: 0;
}

.inquiry-privacy dl > div {
    display: flex;
    padding: 8px 0;
    justify-content: space-between;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: 11px;
}

.inquiry-privacy dd { margin: 0; color: var(--ui-ink); font-weight: 750; }

@media (max-width: 1199px) {
    .history-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .history-filter-summary {
        align-self: flex-end;
    }

    .history-table th,
    .history-table td,
    .history-items-table th,
    .history-items-table td {
        padding-inline: 8px;
        font-size: 11px;
    }

    .history-kpi,
    .statistics-kpi {
        padding: 16px;
    }

    .history-kpi > span {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .history-detail-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .inquiry-summary {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .inquiry-neutral-note {
        grid-column: 1 / -1;
        min-height: 0;
    }
}

@media (max-width: 991px) {
    .history-container,
    .history-container--inquiry {
        width: calc(100% - 40px);
    }

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

    .history-detail-layout,
    .inquiry-layout {
        grid-template-columns: 1fr;
    }

    .account-security-card form {
        grid-template-columns: 1fr;
    }

    .account-page .history-action-card {
        display: block;
    }

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

    .history-detail-disclaimer {
        grid-column: 1 / -1;
    }

    .statistics-charts,
    .statistics-summary-grid {
        grid-template-columns: 1fr;
    }

    .statistics-filter {
        align-items: flex-start;
        flex-direction: column;
    }

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

@media (max-width: 767px) {
    .history-page {
        padding: 22px 0 44px;
    }

    .history-container,
    .history-container--inquiry {
        width: calc(100% - 32px);
    }

    .history-heading {
        flex-direction: column;
        gap: 12px;
    }

    .history-heading h1 {
        font-size: 30px;
        letter-spacing: -.035em;
    }

    .history-heading > div > p:last-child {
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.5;
    }

    .history-heading > .ui-button,
    .history-heading > .ui-badge {
        width: 100%;
        margin-top: 0;
    }

    .history-filters {
        min-height: 0;
        margin-top: 18px;
        padding: 14px;
        gap: 14px;
    }

    .history-filters form,
    .statistics-filter form {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .history-filters .ui-field,
    .statistics-filter .ui-field {
        width: 100%;
        min-width: 0;
    }

    .history-filter-summary {
        width: 100%;
        align-self: stretch;
        gap: 7px;
    }

    .history-filter-summary > div {
        min-width: 0;
        padding: 8px 5px;
        flex: 1;
    }

    .history-section-heading {
        min-height: 0;
        padding: 14px;
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .history-list-card {
        margin-top: 14px;
        padding: 0 13px 13px;
        overflow: visible;
    }

    .history-list-card > .history-section-heading {
        margin-inline: -13px;
    }

    .history-table-wrap,
    .history-items-table-wrap,
    .statistics-table-wrap {
        overflow: visible;
    }

    .history-table,
    .history-table tbody,
    .history-table tr,
    .history-table th,
    .history-table td,
    .history-items-table,
    .history-items-table tbody,
    .history-items-table tr,
    .history-items-table th,
    .history-items-table td {
        display: block;
        width: 100% !important;
    }

    .history-table thead,
    .history-items-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .history-table tbody,
    .history-items-table tbody {
        display: grid;
        padding-top: 12px;
        gap: 10px;
    }

    .history-table tr,
    .history-items-table tr {
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--ui-border);
        border-radius: 11px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
    }

    .history-table th,
    .history-table td,
    .history-items-table th,
    .history-items-table td {
        min-width: 0;
        padding: 9px 11px;
        border-bottom: 1px solid var(--ui-border) !important;
        text-align: right;
    }

    .history-table th,
    .history-items-table th {
        text-align: left;
    }

    .history-table th::before,
    .history-table td::before,
    .history-items-table th::before,
    .history-items-table td::before {
        display: block;
        margin-bottom: 4px;
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .history-table th:first-child::before,
    .history-items-table th:first-child::before {
        display: none;
    }

    .history-table th:first-child,
    .history-items-table th:first-child {
        padding-block: 12px;
        background: #fbfcfd;
    }

    .history-table tr > *:last-child,
    .history-items-table tr > *:last-child {
        border-bottom: 0 !important;
    }

    .history-table td:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .history-table td:last-child::before {
        margin-bottom: 0;
    }

    .history-table td:last-child .ui-icon-button {
        margin-left: auto;
    }

    .history-state {
        min-height: 390px;
        margin-top: 18px;
        padding: 30px 20px;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .history-state--filtered-empty {
        min-height: 300px;
        margin-top: 14px;
    }

    .history-skeleton {
        width: 100%;
        min-width: 0;
    }

    .history-breadcrumb {
        margin-bottom: 14px;
    }

    .history-kpis,
    .statistics-kpis {
        margin-top: 16px;
        gap: 10px;
    }

    .history-kpi,
    .statistics-kpi {
        min-height: 124px;
        padding: 13px;
    }

    .history-kpi {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .history-kpi > span,
    .statistics-kpi > span {
        width: 36px;
        height: 36px;
        margin-bottom: 5px;
        flex-basis: 36px;
    }

    .history-kpi strong,
    .statistics-kpi strong {
        font-size: 20px;
        white-space: normal;
    }

    .history-detail-layout {
        margin-top: 13px;
        gap: 13px;
    }

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

    .history-detail-disclaimer {
        grid-column: auto;
    }

    .history-detail-card {
        padding: 0 13px 13px;
    }

    .history-detail-card > .history-section-heading {
        margin-inline: -13px;
        align-items: center;
        flex-direction: row;
    }

    .history-minute-grid {
        padding: 13px 0 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-action-card,
    .history-coverage-card {
        padding: 17px;
    }

    .history-mobile-actions {
        display: grid;
        margin-top: 13px;
        padding: 13px;
        gap: 8px;
    }

    .history-action-card {
        display: none;
    }

    .history-provenance summary,
    .statistics-table-card summary {
        padding: 14px;
    }

    .history-provenance__body {
        padding: 0 14px 17px;
    }

    .history-provenance__body > dl,
    .history-provenance__body ul {
        grid-template-columns: 1fr;
    }

    .statistics-filter {
        min-height: 0;
        margin-top: 18px;
        padding: 14px;
    }

    .statistics-filter > p {
        align-items: flex-start;
    }

    .statistics-charts {
        margin-top: 12px;
        gap: 12px;
    }

    .statistics-chart {
        padding: 8px 8px 12px;
        overflow-x: auto;
    }

    .statistics-chart svg {
        min-width: 610px;
    }

    .statistics-chart--bars svg {
        min-width: 560px;
    }

    .statistics-chart-scroll-note {
        display: block;
        margin: -2px 14px 13px;
        color: var(--ui-muted);
        font-size: 10px;
    }

    .statistics-table-card,
    .statistics-summary-grid,
    .statistics-action {
        margin-top: 12px;
    }

    .statistics-table-card .statistics-table-wrap {
        padding: 0 13px 13px;
    }

    .statistics-minutes {
        padding-inline: 14px;
        grid-template-columns: 1fr;
    }

    .statistics-summary-card > progress {
        margin-inline: 14px;
        width: calc(100% - 28px);
    }

    .statistics-coverage-number { padding-inline: 14px; }
    .statistics-summary-card > p { margin-inline: 14px; }
    .statistics-verification-breakdown { margin-inline: 14px; }

    .statistics-action {
        padding: 16px;
        align-items: stretch;
        flex-direction: column;
    }

    .statistics-action .ui-button {
        width: 100%;
    }

    .inquiry-summary {
        min-height: 0;
        margin-top: 18px;
        padding: 17px;
        grid-template-columns: 1fr;
        gap: 15px;
    }

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

    .inquiry-neutral-note {
        grid-column: auto;
    }

    .inquiry-layout {
        margin-top: 13px;
    }

    .inquiry-textarea-label {
        margin: 15px 14px 7px;
    }

    .inquiry-textarea {
        width: calc(100% - 28px);
        min-height: 620px;
        margin-inline: 14px;
        padding: 13px;
        font-size: 12px;
    }

    .inquiry-actions {
        margin-inline: 14px;
        align-items: stretch;
        flex-direction: column;
    }

    .inquiry-actions .ui-button {
        width: 100%;
    }

    .inquiry-feedback {
        margin-inline: 14px;
    }

    .inquiry-manual-copy-note {
        margin-inline: 14px;
    }

    .inquiry-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 389px) {
    .history-container,
    .history-container--inquiry {
        width: calc(100% - 28px);
    }

    .history-heading h1 {
        font-size: 27px;
    }

    .history-filter-summary {
        flex-direction: column;
    }

    .history-kpis,
    .statistics-kpis {
        grid-template-columns: 1fr;
    }

    .history-kpi,
    .statistics-kpi {
        min-height: 105px;
    }

    .history-kpi {
        align-items: center;
        flex-direction: row;
    }

    .history-minute-grid,
    .inquiry-summary dl {
        grid-template-columns: 1fr;
    }

    .history-state {
        padding-inline: 15px;
    }

    .statistics-legend {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .statistics-action > div {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .history-skeleton i {
        animation: none;
        background: #eef2f7;
    }

    .history-provenance[open] summary > .ui-icon,
    .statistics-table-card[open] summary > .ui-icon {
        transform: none;
    }
}
.statement-verification {
    margin-bottom: 1.25rem;
}

.statement-verification__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.statement-verification__grid article {
    border: 1px solid var(--ui-border, #dbe3ec);
    border-radius: .75rem;
    padding: 1rem;
    background: var(--ui-surface-subtle, #f8fafc);
}

.statement-verification__grid header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.statement-verification__grid h3 {
    margin: 0;
    font-size: 1rem;
}

.statement-verification__grid dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.statement-verification__grid dl div {
    display: grid;
    gap: .2rem;
}

.statement-verification__grid dt {
    color: var(--ui-text-muted, #64748b);
    font-size: .75rem;
}

.statement-verification__grid dd {
    margin: 0;
    font-weight: 700;
}

.statement-verification__grid ul {
    margin: .75rem 0 0;
    padding-left: 1.1rem;
    color: var(--ui-text-muted, #64748b);
    font-size: .85rem;
}

.statement-verification__grid p {
    display: flex;
    gap: .4rem;
    align-items: center;
    color: var(--ui-success-dark, #117a38);
    font-size: .85rem;
}

.statement-verification__breakdown {
    display: grid;
    gap: .45rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ui-border, #dbe3ec);
}

.statement-verification__breakdown div {
    display: grid;
    gap: .15rem;
}

.statement-verification__breakdown span,
.statement-verification__breakdown small,
.statement-verification__version,
.statement-verification__sources {
    color: var(--ui-text-muted, #64748b);
}

.statement-verification__version {
    display: block;
    margin-top: 1rem;
}

.statement-verification__sources {
    margin-top: .75rem;
    font-size: .85rem;
}

.statement-verification__sources summary {
    cursor: pointer;
    font-weight: 700;
}

.statement-verification__sources ul {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .statement-verification__grid {
        grid-template-columns: 1fr;
    }
}

/* PR #31 — protected public salary benchmark */
.salary-benchmark-page {
    min-height: calc(100vh - var(--ui-header-height));
    color: var(--ui-ink);
    background: #f7f9fc;
}

.salary-benchmark-page *,
.salary-benchmark-page *::before,
.salary-benchmark-page *::after {
    box-sizing: border-box;
}

.salary-benchmark-container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.salary-benchmark-hero {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 84% 20%, rgba(84, 126, 255, .34), transparent 34%),
        linear-gradient(128deg, #112b58 0%, #153e7a 56%, #0f336a 100%);
}

.salary-benchmark-hero__grid {
    display: grid;
    min-height: 390px;
    padding-block: 64px;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 64px;
    align-items: center;
}

.salary-benchmark-hero .ui-eyebrow {
    margin: 0 0 14px;
    color: #bcd1ff;
}

.salary-benchmark-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.salary-benchmark-hero__lead {
    max-width: 760px;
    margin: 22px 0 0;
    color: #e1eaff;
    font-size: 18px;
    line-height: 1.7;
}

.salary-benchmark-scope {
    display: flex;
    margin: 26px 0 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 11px 20px;
    list-style: none;
    color: #dce7ff;
    font-size: 13px;
    font-weight: 650;
}

.salary-benchmark-scope li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.salary-benchmark-scope .ui-icon {
    width: 17px;
    height: 17px;
    color: #9fc0ff;
}

.salary-benchmark-privacy-card {
    display: grid;
    padding: 26px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 24px 65px rgba(0, 16, 48, .22);
    backdrop-filter: blur(8px);
}

.salary-benchmark-privacy-card__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #143a74;
    background: #fff;
    border-radius: 14px;
}

.salary-benchmark-privacy-card__icon .ui-icon {
    width: 25px;
    height: 25px;
}

.salary-benchmark-privacy-card h2 {
    margin: 1px 0 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1.3;
}

.salary-benchmark-privacy-card p {
    margin: 0;
    color: #dce7ff;
    font-size: 13px;
    line-height: 1.65;
}

.salary-benchmark-content {
    padding-block: 38px 72px;
}

.salary-benchmark-synthetic {
    display: flex;
    margin-bottom: 18px;
    padding: 14px 16px;
    align-items: flex-start;
    gap: 10px;
    color: #6941c6;
    background: #f4f0ff;
    border: 1px solid #d9ceff;
    border-radius: 12px;
}

.salary-benchmark-synthetic .ui-icon {
    width: 19px;
    height: 19px;
    margin-top: 1px;
    flex: 0 0 auto;
}

.salary-benchmark-synthetic p {
    margin: 0;
    color: #53389e;
    font-size: 13px;
    line-height: 1.5;
}

.salary-benchmark-filter {
    display: flex;
    margin-bottom: 22px;
    padding: 18px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
}

.salary-benchmark-filter > label {
    color: var(--ui-ink-soft);
    font-size: 14px;
    font-weight: 750;
}

.salary-benchmark-filter > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.salary-benchmark-filter select {
    min-width: 220px;
    height: 42px;
    padding: 0 40px 0 13px;
    color: var(--ui-ink);
    background: #fff;
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
}

.salary-benchmark-result,
.salary-benchmark-state {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(16, 24, 40, .06);
}

.salary-benchmark-result {
    padding: 30px;
}

.salary-benchmark-result__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.salary-benchmark-result__heading .ui-eyebrow {
    margin: 0 0 6px;
}

.salary-benchmark-result__heading h2 {
    margin: 0;
    font-size: clamp(25px, 3vw, 33px);
    letter-spacing: -.025em;
}

.salary-benchmark-status {
    display: inline-flex;
    padding: 8px 11px;
    align-items: center;
    gap: 6px;
    color: var(--ui-success-dark);
    background: var(--ui-success-soft);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.salary-benchmark-status .ui-icon {
    width: 16px;
    height: 16px;
}

.salary-benchmark-quartiles {
    display: grid;
    margin-top: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.salary-benchmark-quartiles article {
    min-width: 0;
    padding: 22px;
    background: #f8fafc;
    border: 1px solid #e4e9f0;
    border-radius: 14px;
}

.salary-benchmark-quartiles__median {
    background: #f2f6ff !important;
    border-color: #cbdcff !important;
}

.salary-benchmark-quartiles article > span {
    display: inline-grid;
    min-width: 40px;
    height: 28px;
    padding-inline: 8px;
    place-items: center;
    color: var(--ui-brand-dark);
    background: var(--ui-brand-soft);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

.salary-benchmark-quartiles h3 {
    margin: 15px 0 8px;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.salary-benchmark-quartiles strong {
    display: block;
    color: var(--ui-ink);
    font-size: clamp(23px, 2.3vw, 31px);
    letter-spacing: -.035em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.salary-benchmark-quartiles p {
    margin: 10px 0 0;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.55;
}

.salary-benchmark-sample {
    display: flex;
    margin-top: 18px;
    padding: 18px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #f8fafc;
    border: 1px solid #e4e9f0;
    border-radius: 13px;
}

.salary-benchmark-sample > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.salary-benchmark-sample__icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ui-brand-dark);
    background: var(--ui-brand-soft);
    border-radius: 10px;
}

.salary-benchmark-sample__icon .ui-icon {
    width: 20px;
    height: 20px;
}

.salary-benchmark-sample p {
    display: grid;
    margin: 0;
    gap: 3px;
}

.salary-benchmark-sample p strong {
    font-size: 13px;
}

.salary-benchmark-sample p span {
    color: var(--ui-muted);
    font-size: 12px;
}

.salary-benchmark-sample > strong {
    color: var(--ui-brand-dark);
    font-size: 22px;
    white-space: nowrap;
}

.salary-benchmark-state {
    display: grid;
    min-height: 270px;
    padding: 48px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 24px;
    align-content: center;
}

.salary-benchmark-state > span {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: var(--ui-brand-dark);
    background: var(--ui-brand-soft);
    border-radius: 17px;
}

.salary-benchmark-state > span .ui-icon {
    width: 29px;
    height: 29px;
}

.salary-benchmark-state .ui-eyebrow {
    margin: 0 0 7px;
}

.salary-benchmark-state h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -.025em;
}

.salary-benchmark-state p:not(.ui-eyebrow) {
    max-width: 720px;
    margin: 10px 0 0;
    color: var(--ui-muted);
    line-height: 1.65;
}

.salary-benchmark-state .ui-button {
    margin-top: 20px;
}

.salary-benchmark-state--suppressed > span {
    color: #854a0e;
    background: var(--ui-warning-soft);
}

.salary-benchmark-state--error > span {
    color: var(--ui-danger-dark);
    background: var(--ui-danger-soft);
}

.salary-benchmark-context {
    display: grid;
    margin-top: 22px;
    padding: 28px 30px;
    grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
    gap: 42px;
    align-items: center;
    background: #eef4ff;
    border: 1px solid #d8e4fb;
    border-radius: 16px;
}

.salary-benchmark-context .ui-eyebrow {
    margin: 0 0 6px;
}

.salary-benchmark-context h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.3;
}

.salary-benchmark-context > p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .salary-benchmark-hero__grid {
        padding-block: 48px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .salary-benchmark-privacy-card {
        max-width: 680px;
    }

    .salary-benchmark-quartiles {
        grid-template-columns: 1fr;
    }

    .salary-benchmark-quartiles strong {
        font-size: 27px;
    }

    .salary-benchmark-context {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 600px) {
    .salary-benchmark-container {
        width: calc(100% - 28px);
    }

    .salary-benchmark-hero__grid {
        min-height: 0;
        padding-block: 38px;
    }

    .salary-benchmark-hero h1 {
        font-size: 36px;
    }

    .salary-benchmark-hero__lead {
        font-size: 16px;
    }

    .salary-benchmark-scope {
        display: grid;
        gap: 10px;
    }

    .salary-benchmark-privacy-card {
        padding: 20px;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
    }

    .salary-benchmark-privacy-card__icon {
        width: 42px;
        height: 42px;
    }

    .salary-benchmark-content {
        padding-block: 24px 48px;
    }

    .salary-benchmark-filter {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

    .salary-benchmark-filter > div {
        align-items: stretch;
        flex-direction: column;
    }

    .salary-benchmark-filter select,
    .salary-benchmark-filter .ui-button {
        width: 100%;
        min-width: 0;
    }

    .salary-benchmark-result {
        padding: 20px;
    }

    .salary-benchmark-result__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .salary-benchmark-quartiles {
        margin-top: 21px;
    }

    .salary-benchmark-quartiles article {
        padding: 18px;
    }

    .salary-benchmark-sample {
        align-items: flex-start;
        flex-direction: column;
    }

    .salary-benchmark-sample > strong {
        padding-left: 50px;
    }

    .salary-benchmark-state {
        min-height: 0;
        padding: 28px 22px;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .salary-benchmark-context {
        padding: 23px 21px;
    }
}

@media (max-width: 389px) {
    .salary-benchmark-container {
        width: calc(100% - 20px);
    }

    .salary-benchmark-hero h1 {
        font-size: 31px;
    }

    .salary-benchmark-privacy-card {
        padding: 17px;
        grid-template-columns: 1fr;
    }

    .salary-benchmark-result,
    .salary-benchmark-filter {
        padding-inline: 15px;
    }

    .salary-benchmark-quartiles strong {
        font-size: 24px;
    }

    .salary-benchmark-sample > strong {
        padding-left: 0;
    }
}