:root {
    --navy: #11243d;
    --blue: #1769aa;
    --blue-dark: #0d4f86;
    --teal: #147d75;
    --background: #f3f6fa;
    --surface: #ffffff;
    --border: #dce4ed;
    --text: #182332;
    --muted: #657386;
    --danger: #a93232;
    --success-bg: #e9f7f3;
    --success-text: #176b5f;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: var(--blue);
    text-decoration: none;
}

.topbar {
    min-height: 76px;
    padding: 0 5%;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
}

.brand small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: white;
    font-size: 23px;
    font-weight: 800;
}

.brand-mark.large {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 34px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.nav a,
.logout-button {
    font: inherit;
    color: var(--navy);
}

.primary-link {
    font-weight: 700;
}

.logout-button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.container {
    width: min(1180px, 92%);
    margin: 36px auto 70px;
}

.page-heading,
.patient-header,
.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.page-heading,
.patient-header {
    margin-bottom: 26px;
}

h1,
h2 {
    margin-top: 0;
    color: var(--navy);
}

h1 {
    margin-bottom: 8px;
    font-size: 32px;
}

h2 {
    margin-bottom: 10px;
    font-size: 20px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

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

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--blue);
    border-radius: 9px;
    background: var(--blue);
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.button:hover {
    background: var(--blue-dark);
}

.button.secondary {
    background: white;
    color: var(--blue);
}

.button.full {
    width: 100%;
    margin-top: 18px;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.metric,
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(29, 54, 82, 0.05);
}

.metric {
    padding: 22px;
}

.metric span {
    display: block;
    color: var(--muted);
    font-size: 14px;
}

.metric strong {
    display: block;
    margin-top: 10px;
    color: var(--navy);
    font-size: 30px;
}

.panel {
    padding: 24px;
    margin-bottom: 22px;
}

.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.completion-list > div,
.summary-list > div {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.completion-list > div:last-child,
.summary-list > div:last-child {
    border-bottom: 0;
}

.quick-actions {
    display: grid;
    gap: 10px;
}

.quick-actions a {
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f8fafc;
}

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

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

th {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--success-bg);
    color: var(--success-text);
    font-size: 12px;
    font-weight: 700;
}

.status.large {
    padding: 8px 14px;
}

.empty {
    padding: 34px;
    color: var(--muted);
    text-align: center;
}

.search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.search-form input {
    flex: 1;
}

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

.field label {
    display: block;
    margin-bottom: 7px;
    color: var(--navy);
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #c8d3df;
    border-radius: 8px;
    background: white;
    color: var(--text);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(23, 105, 170, 0.14);
    border-color: var(--blue);
}

input[type="checkbox"] {
    width: auto;
}

.field-error,
.alert {
    color: var(--danger);
}

.alert {
    padding: 12px;
    border: 1px solid #efc0c0;
    border-radius: 8px;
    background: #fff3f3;
    margin-bottom: 18px;
}

.form-actions {
    margin-top: 26px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.module-tabs {
    margin-bottom: 24px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    display: flex;
    gap: 7px;
    overflow-x: auto;
}

.module-tabs a {
    padding: 10px 13px;
    border-radius: 8px;
    color: var(--muted);
    white-space: nowrap;
}

.module-tabs a.active {
    background: var(--blue);
    color: white;
}

.module-tabs a.complete {
    background: var(--success-bg);
    color: var(--success-text);
}

.summary-list {
    margin: 0;
}

.summary-list dt {
    color: var(--muted);
}

.summary-list dd {
    margin: 0;
    font-weight: 700;
}

.module-status {
    display: grid;
    gap: 10px;
}

.module-status > div {
    padding: 12px 14px;
    border-radius: 8px;
}

.module-status .done {
    background: var(--success-bg);
    color: var(--success-text);
}

.module-status .pending {
    background: #f3f5f7;
    color: var(--muted);
}

.notice {
    margin-top: 18px;
    padding: 12px;
    border-left: 4px solid var(--blue);
    background: #f1f7fc;
    color: var(--muted);
}

.login-page {
    min-height: 100vh;
    background:
        linear-gradient(
            120deg,
            rgba(17, 36, 61, 0.98),
            rgba(23, 105, 170, 0.92)
        );
    display: grid;
    place-items: center;
}

.login-shell {
    width: min(950px, 92%);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.login-introduction {
    padding: 58px;
    color: white;
}

.login-introduction h1 {
    margin-top: 26px;
    color: white;
    font-size: 42px;
}

.login-introduction p {
    max-width: 480px;
    font-size: 18px;
    line-height: 1.6;
}

.secure-note {
    margin-top: 42px;
    opacity: 0.8;
}

.login-card {
    padding: 54px;
    background: white;
}

.login-card label {
    display: block;
    margin: 18px 0 7px;
    font-weight: 700;
}

@media (max-width: 850px) {
    .topbar,
    .page-heading,
    .patient-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .metrics,
    .grid-two,
    .form-grid,
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-introduction {
        display: none;
    }
}

.attempt-list {
    display: grid;
    gap: 18px;
    margin-top: 20px;
}

.attempt-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.attempt-card:nth-child(even) {
    background: #f4f8fb;
}

.attempt-list {
    display: grid;
    gap: 18px;
    margin-top: 20px;
}

.attempt-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.attempt-card:nth-child(even) {
    background: #f4f8fb;
}

.ras-angiography-field {
    max-width: 520px;
    margin-bottom: 24px;
}

.ras-diameter-grid,
.ras-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.ras-result-grid {
    margin-top: 24px;
}

.ras-result-card {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.ras-result-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
}

.ras-result-card strong {
    color: var(--navy);
    font-size: 22px;
}

.ras-result-card strong.ras-positive {
    color: #a93232;
}

.ras-result-card strong.ras-negative {
    color: var(--success-text);
}

@media (max-width: 700px) {
    .ras-diameter-grid,
    .ras-result-grid {
        grid-template-columns: 1fr;
    }
}

.ras-summary-banner {
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.ras-summary-banner > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ras-summary-banner span {
    color: var(--muted);
    font-weight: 600;
}

.ras-summary-banner strong {
    font-size: 24px;
}

.ras-summary-banner small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.ras-summary-banner.positive {
    border-color: #efb5b5;
    background: #fff3f3;
}

.ras-summary-banner.negative {
    border-color: #b9e3d7;
    background: var(--success-bg);
}

@media (max-width: 700px) {
    .ras-summary-banner > div {
        align-items: flex-start;
        flex-direction: column;
    }
}

.hemostasis-timing-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(220px, 1fr)
        minmax(200px, 0.7fr);
    gap: 24px;
    align-items: end;
}

.hemostasis-timing-grid .ras-result-card {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 850px) {
    .hemostasis-timing-grid {
        grid-template-columns: 1fr;
    }
}

.hemodynamic-group {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.hemodynamic-group:first-of-type {
    margin-top: 0;
}

.hemodynamic-group-title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hemodynamic-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hemodynamic-row .field {
    margin: 0;
}

.hemodynamic-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.field-unit {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

.hemodynamic-pre {
    border-color: #b8d8fb;
    background: #f2f8ff;
}

.hemodynamic-pre .hemodynamic-group-title {
    color: #1769aa;
}

.hemodynamic-intra {
    border-color: #bfe4c5;
    background: #f2fbf3;
}

.hemodynamic-intra .hemodynamic-group-title {
    color: #21833b;
}

.hemodynamic-post {
    border-color: #d9c7f2;
    background: #faf6ff;
}

.hemodynamic-post .hemodynamic-group-title {
    color: #6c43a8;
}

.hemodynamic-events {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.hemodynamic-event {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    cursor: pointer;
}

.hemodynamic-event:nth-child(odd) {
    border-right: 1px solid var(--border);
}

.hemodynamic-event:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.hemodynamic-event input[type="checkbox"] {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .hemodynamic-row {
        grid-template-columns: 1fr;
    }

    .hemodynamic-events {
        grid-template-columns: 1fr;
    }

    .hemodynamic-event,
    .hemodynamic-event:nth-child(odd),
    .hemodynamic-event:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .hemodynamic-event:last-child {
        border-bottom: 0;
    }
}

.procedure-history-panel {
    margin-bottom: 26px;
}

.procedure-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.procedure-history-header h2 {
    margin-bottom: 4px;
}

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

.procedure-record-row {
    display: grid;
    grid-template-columns:
        minmax(170px, 0.8fr)
        minmax(180px, 1fr)
        minmax(160px, 0.8fr);
    gap: 20px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.procedure-record-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.procedure-record-row > div:first-child {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.procedure-index-badge {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--success-bg);
    color: var(--success-text);
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 800px) {
    .procedure-history-header {
        flex-direction: column;
    }

    .procedure-record-row {
        grid-template-columns: 1fr;
    }
}

.procedure-context-line {
    margin-top: 6px;
    color: var(--muted);
}

.procedure-context-line strong {
    color: var(--navy);
}

.procedure-record-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

.procedure-record-actions .button {
    white-space: nowrap;
}

.procedure-record-row {
    grid-template-columns:
        minmax(150px, 0.8fr)
        minmax(170px, 1fr)
        minmax(150px, 0.8fr)
        minmax(140px, auto);
}

@media (max-width: 800px) {
    .procedure-record-actions {
        justify-content: flex-start;
    }
}

.procedure-record-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.procedure-record-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.procedure-workspace-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.procedure-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.procedure-module-card {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

a.procedure-module-card:hover {
    transform: translateY(-2px);
    border-color: var(--navy);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.procedure-module-card.complete {
    border-color: #a7d7b1;
    background: #f1faf3;
}

.procedure-module-card .module-state {
    font-size: 22px;
    font-weight: 900;
    color: var(--muted);
}

.procedure-module-card.complete .module-state {
    color: #21833b;
}

.procedure-module-card strong {
    font-size: 17px;
}

.procedure-module-card small {
    color: var(--muted);
    line-height: 1.4;
}

.pending-module {
    opacity: 0.65;
    cursor: default;
}

@media (max-width: 1050px) {
    .procedure-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .procedure-workspace-heading {
        flex-direction: column;
    }

    .procedure-module-grid {
        grid-template-columns: 1fr;
    }
}

.procedure-color-blue {
    border-color: #b8d8fb;
    background: #f2f8ff;
}

.procedure-color-green {
    border-color: #bfe4c5;
    background: #f2fbf3;
}

.procedure-color-orange {
    border-color: #f2d4ad;
    background: #fff8ef;
}

.procedure-color-purple {
    border-color: #d9c7f2;
    background: #faf6ff;
}

.dedicated-device-grid {
    display: grid;
    gap: 14px;
}

.dedicated-device-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.8fr)
        minmax(240px, 1fr)
        minmax(240px, 1fr);
    gap: 18px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.dedicated-device-row .field {
    margin: 0;
}

@media (max-width: 850px) {
    .dedicated-device-row {
        grid-template-columns: 1fr;
    }
}

.procedure-color-blue {
    border-color: #b8d8fb;
    background: #f2f8ff;
}

.procedure-color-green {
    border-color: #bfe4c5;
    background: #f2fbf3;
}

.procedure-color-orange {
    border-color: #f2d4ad;
    background: #fff8ef;
}

.procedure-color-purple {
    border-color: #d9c7f2;
    background: #faf6ff;
}

.dedicated-device-grid {
    display: grid;
    gap: 14px;
}

.dedicated-device-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.8fr)
        minmax(240px, 1fr)
        minmax(240px, 1fr);
    gap: 18px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.dedicated-device-row .field {
    margin: 0;
}

@media (max-width: 850px) {
    .dedicated-device-row {
        grid-template-columns: 1fr;
    }
}

.procedure-color-blue {
    border-color: #b8d8fb;
    background: #f2f8ff;
}

.procedure-color-green {
    border-color: #bfe4c5;
    background: #f2fbf3;
}

.procedure-color-orange {
    border-color: #f2d4ad;
    background: #fff8ef;
}

.procedure-color-purple {
    border-color: #d9c7f2;
    background: #faf6ff;
}

.dedicated-device-grid {
    display: grid;
    gap: 14px;
}

.dedicated-device-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.8fr)
        minmax(240px, 1fr)
        minmax(240px, 1fr);
    gap: 18px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.dedicated-device-row .field {
    margin: 0;
}

@media (max-width: 850px) {
    .dedicated-device-row {
        grid-template-columns: 1fr;
    }
}

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

.procedure-section-heading h2 {
    margin: 2px 0 0;
}

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

@media (max-width: 900px) {
    .procedure-setup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .procedure-setup-grid {
        grid-template-columns: 1fr;
    }
}

.device-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.device-resource-card {
    display: flex;
    min-height: 135px;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid #c7e5cc;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.device-resource-label {
    min-height: 44px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.35;
}

.device-resource-card .field {
    margin: 0;
}

.device-resource-card input,
.device-resource-card select {
    width: 100%;
}

@media (max-width: 1050px) {
    .device-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .device-resource-grid {
        grid-template-columns: 1fr;
    }
}

.dedicated-device-grid {
    display: grid;
    gap: 14px;
}

.dedicated-device-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.75fr)
        minmax(240px, 1fr)
        minmax(300px, 1.25fr);
    gap: 18px;
    align-items: end;
    padding: 18px;
    border: 1px solid #c7e5cc;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
}

.dedicated-device-row .field {
    margin: 0;
}

.device-reason-wide {
    grid-column: span 2;
}

.dedicated-device-row input,
.dedicated-device-row select {
    width: 100%;
}

@media (max-width: 900px) {
    .dedicated-device-row {
        grid-template-columns: 1fr;
    }

    .device-reason-wide {
        grid-column: auto;
    }
}

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

.radiation-resource-card {
    display: flex;
    min-height: 132px;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid #efd1aa;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
}

.radiation-resource-label {
    font-weight: 800;
    color: var(--navy);
    line-height: 1.35;
}

.radiation-resource-card .field {
    margin: 0;
}

.radiation-resource-card input {
    width: 100%;
}

@media (max-width: 650px) {
    .radiation-resource-grid {
        grid-template-columns: 1fr;
    }
}

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

.lesion-result-card {
    display: flex;
    min-height: 132px;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid #d9c7f2;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
}

.lesion-result-label {
    min-height: 42px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.35;
}

.lesion-result-card .field {
    margin: 0;
}

.lesion-result-card input:not([type="checkbox"]),
.lesion-result-card select {
    width: 100%;
}

.result-success-card {
    border-color: #b8d8fb;
    background: #f4f9ff;
}

@media (max-width: 900px) {
    .lesion-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .lesion-result-grid {
        grid-template-columns: 1fr;
    }
}


/* PATCH-5F-HEMODYNAMICS */

.hemodynamic-group {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.hemodynamic-group:first-of-type {
    margin-top: 0;
}

.hemodynamic-group-title {
    margin-bottom: 16px;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.hemodynamic-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.hemodynamic-row .field {
    margin: 0;
}

.hemodynamic-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 750;
}

.hemodynamic-row input {
    width: 100%;
}

.hemodynamic-pre {
    border-color: #b8d8fb;
    background: #f2f8ff;
}

.hemodynamic-pre .hemodynamic-group-title {
    color: #1769aa;
}

.hemodynamic-during {
    border-color: #bfe4c5;
    background: #f2fbf3;
}

.hemodynamic-during .hemodynamic-group-title {
    color: #21833b;
}

.hemodynamic-post {
    border-color: #d9c7f2;
    background: #faf6ff;
}

.hemodynamic-post .hemodynamic-group-title {
    color: #6c43a8;
}

@media (max-width: 760px) {
    .hemodynamic-row {
        grid-template-columns: 1fr;
    }
}

/* PATCH-5G-PROCEDURE-TIMING */

.procedure-timing-panel {
    border-color: #bfd3e8;
    background: #f5f9fd;
}

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

.procedure-timing-card,
.procedure-duration-card {
    display: flex;
    min-height: 132px;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid #c8dced;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.procedure-timing-label {
    font-weight: 800;
    color: var(--navy);
    line-height: 1.35;
}

.procedure-timing-card .field {
    margin: 0;
}

.procedure-timing-card input {
    width: 100%;
}

.procedure-duration-card {
    grid-column: 1 / -1;
    min-height: 115px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-color: #abc9e5;
    background: #eef6fd;
}

.procedure-duration-card span {
    font-weight: 750;
    color: var(--muted);
}

.procedure-duration-card strong {
    font-size: 28px;
    color: #1769aa;
}

.procedure-duration-card small {
    color: var(--muted);
}

@media (max-width: 800px) {
    .procedure-timing-grid {
        grid-template-columns: 1fr;
    }

    .procedure-duration-card {
        grid-column: auto;
    }
}

/* Simplified Hemostasis Module */

.hemostasis-blue {
    border-color: #b8d8fb;
    background: #f2f8ff;
}

.hemostasis-green {
    border-color: #bfe4c5;
    background: #f2fbf3;
}

.hemostasis-purple {
    border-color: #d9c7f2;
    background: #faf6ff;
}

.hemostasis-orange {
    border-color: #efd1aa;
    background: #fff8ef;
}

.hemostasis-red {
    border-color: #efb8b8;
    background: #fff5f5;
}

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

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

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

.hemostasis-field-card {
    display: flex;
    min-height: 125px;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
}

.hemostasis-label {
    font-weight: 800;
    color: var(--navy);
    line-height: 1.35;
}

.hemostasis-field-card .field {
    margin: 0;
}

.hemostasis-field-card input,
.hemostasis-field-card select,
.hemostasis-field-card textarea {
    width: 100%;
}

.hemostasis-duration-card {
    display: flex;
    margin-top: 16px;
    min-height: 110px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 18px;
    border: 1px solid #a9d8b2;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
}

.hemostasis-duration-card span {
    font-weight: 750;
    color: var(--muted);
}

.hemostasis-duration-card strong {
    font-size: 28px;
    color: #21833b;
}

.hemostasis-duration-card small {
    color: var(--muted);
}

@media (max-width: 850px) {
    .hemostasis-grid.two-columns,
    .hemostasis-grid.three-columns {
        grid-template-columns: 1fr;
    }
}

/* Excel Export Center */

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

.export-summary-card {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid #bfd3e8;
    border-radius: 14px;
    background: #f5f9fd;
    text-align: center;
}

.export-summary-card span {
    color: var(--muted);
    font-weight: 700;
}

.export-summary-card strong {
    color: var(--navy);
    font-size: 28px;
}

.export-panel {
    border-color: #bfe4c5;
    background: #f2fbf3;
}

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

.export-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.export-sheet-grid span {
    padding: 13px 15px;
    border: 1px solid #d8e1ea;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--navy);
    font-weight: 700;
}

@media (max-width: 760px) {
    .export-summary-grid,
    .export-filter-grid,
    .export-sheet-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard Excel Export card */

.dashboard-export-card {
    border-color: #b8d8fb;
    background: #f2f8ff;
}

.dashboard-export-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-export-content h2 {
    margin-top: 4px;
    margin-bottom: 8px;
}

.dashboard-export-content p {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .dashboard-export-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Patient core edit action */

.patient-core-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.patient-core-heading h2 {
    margin: 0;
}

@media (max-width: 760px) {
    .patient-core-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   Procedure workspace progress
   ========================================================= */

.procedure-progress-panel {
    margin-bottom: 24px;
}

.procedure-progress-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.procedure-progress-heading h2 {
    margin: 3px 0 5px;
}

.procedure-progress-heading .eyebrow {
    margin: 0;
}

.procedure-progress-heading .muted {
    margin: 0;
}

.procedure-progress-percent {
    flex: 0 0 auto;
    font-size: 32px;
    line-height: 1;
    font-weight: 800;
}

.procedure-progress-track {
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf3;
}

.procedure-progress-fill {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: #21833b;
    transition: width 0.25s ease;
}

.procedure-progress-message {
    margin: 12px 0 0;
    color: var(--muted);
}

.procedure-progress-message.complete {
    color: #21833b;
    font-weight: 700;
}

@media (max-width: 650px) {
    .procedure-progress-heading {
        flex-direction: column;
        gap: 12px;
    }

    .procedure-progress-percent {
        font-size: 27px;
    }
}

/* Dashboard background only */
body:has(.page-heading) {
    background: #083b66;
}

body:has(.page-heading) main,
body:has(.page-heading) .page-shell,
body:has(.page-heading) .content,
body:has(.page-heading) .container {
    background: transparent;
}

/* Keep dashboard text readable on dark background */
body:has(.page-heading) .page-heading h1,
body:has(.page-heading) .page-heading .eyebrow {
    color: #ffffff;
}

body:has(.page-heading) .page-heading .muted {
    color: #d6e4f0;
}

/* Keep cards white */
body:has(.page-heading) .metric,
body:has(.page-heading) .panel {
    background: #ffffff;
}

/* Dashboard background only */
body:has(.page-heading) {
    background: #083b66;
}

body:has(.page-heading) main,
body:has(.page-heading) .page-shell,
body:has(.page-heading) .content,
body:has(.page-heading) .container {
    background: transparent;
}

/* Keep dashboard text readable on dark background */
body:has(.page-heading) .page-heading h1,
body:has(.page-heading) .page-heading .eyebrow {
    color: #ffffff;
}

body:has(.page-heading) .page-heading .muted {
    color: #d6e4f0;
}

/* Keep cards white */
body:has(.page-heading) .metric,
body:has(.page-heading) .panel {
    background: #ffffff;
}

/* Dashboard dark RADIUS background */
.dashboard-page {
    background: #083b66;
    margin: -32px -40px -40px;
    padding: 32px 40px 48px;
    min-height: calc(100vh - 90px);
}

/* Keep dashboard cards white */
.dashboard-page .metric,
.dashboard-page .panel {
    background: #ffffff;
}

/* Header text on dark background */
.dashboard-page .page-heading h1,
.dashboard-page .page-heading .eyebrow {
    color: #ffffff;
}

.dashboard-page .page-heading .muted {
    color: #d6e4f0;
}

/* =========================================================
   Dashboard - RADIUS blue background
   ========================================================= */

.radius-dashboard-background {
    background: #0B4F7C;
    margin: -32px -40px -48px;
    padding: 32px 40px 52px;
    min-height: calc(100vh - 90px);
    border-radius: 0;
}

/* Keep dashboard cards exactly white */
.radius-dashboard-background .metric,
.radius-dashboard-background .panel {
    background: #ffffff;
}

/* Dashboard heading readability */
.radius-dashboard-background .page-heading h1 {
    color: #ffffff;
}

.radius-dashboard-background .page-heading .eyebrow {
    color: #9fd3f2;
}

.radius-dashboard-background .page-heading .muted {
    color: #d7e8f3;
}

/* ==========================================================
   RADIUS Coronary Anatomy - dynamic lesion workspace
   ========================================================== */

.coronary-anatomy-section {
    position: relative;
    overflow: hidden;
}

.coronary-anatomy-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    border-radius: 8px 0 0 8px;
}

.graft-anatomy-section::before {
    background: #c78716;
}

.native-anatomy-section::before {
    background: #126bad;
}

.coronary-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.coronary-section-heading h2 {
    margin: 3px 0 7px;
}

.coronary-section-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.graft-badge {
    color: #85560d;
    background: #fff5df;
    border: 1px solid #f1d39c;
}

.native-badge {
    color: #0d5c97;
    background: #edf7ff;
    border: 1px solid #cfe5f7;
}

.dynamic-form-list {
    display: grid;
    gap: 18px;
}

.dynamic-form-card {
    position: relative;
    margin: 0;
}

.graft-lesion-card {
    background: linear-gradient(
        180deg,
        #fffdf8 0%,
        #f8fbff 100%
    );
}

.native-lesion-card {
    background: linear-gradient(
        180deg,
        #f7fbff 0%,
        #f8fbff 100%
    );
}

.dynamic-card-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.dynamic-card-heading h3 {
    margin: 2px 0 0;
    font-size: 18px;
}

.dynamic-card-kicker {
    display: block;
    color: #1772b5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
}

.graft-lesion-card .dynamic-card-kicker {
    color: #9b6710;
}

.dynamic-delete-control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: #fff4f4;
}

.dynamic-delete-control label {
    margin: 0;
    color: #9d2929;
    font-size: 13px;
    font-weight: 700;
}

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

.dynamic-add-button {
    border-color: #1473b7;
    color: #0967aa;
}

.dynamic-stop-button {
    border-color: #ccd8e4;
    color: #53677d;
}

.dynamic-resume-button {
    border-color: #1473b7;
    color: #0967aa;
}

[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .coronary-section-heading {
        flex-direction: column;
    }

    .dynamic-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   RADIUS Coronary Anatomy - dynamic lesion workspace
   ========================================================== */

.coronary-anatomy-section {
    position: relative;
    overflow: hidden;
}

.coronary-anatomy-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    border-radius: 8px 0 0 8px;
}

.graft-anatomy-section::before {
    background: #c78716;
}

.native-anatomy-section::before {
    background: #126bad;
}

.coronary-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.coronary-section-heading h2 {
    margin: 3px 0 7px;
}

.coronary-section-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.graft-badge {
    color: #85560d;
    background: #fff5df;
    border: 1px solid #f1d39c;
}

.native-badge {
    color: #0d5c97;
    background: #edf7ff;
    border: 1px solid #cfe5f7;
}

.dynamic-form-list {
    display: grid;
    gap: 18px;
}

.dynamic-form-card {
    position: relative;
    margin: 0;
}

.graft-lesion-card {
    background: linear-gradient(
        180deg,
        #fffdf8 0%,
        #f8fbff 100%
    );
}

.native-lesion-card {
    background: linear-gradient(
        180deg,
        #f7fbff 0%,
        #f8fbff 100%
    );
}

.dynamic-card-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.dynamic-card-heading h3 {
    margin: 2px 0 0;
    font-size: 18px;
}

.dynamic-card-kicker {
    display: block;
    color: #1772b5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
}

.graft-lesion-card .dynamic-card-kicker {
    color: #9b6710;
}

.dynamic-delete-control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: #fff4f4;
}

.dynamic-delete-control label {
    margin: 0;
    color: #9d2929;
    font-size: 13px;
    font-weight: 700;
}

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

.dynamic-add-button {
    border-color: #1473b7;
    color: #0967aa;
}

.dynamic-stop-button {
    border-color: #ccd8e4;
    color: #53677d;
}

.dynamic-resume-button {
    border-color: #1473b7;
    color: #0967aa;
}

[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .coronary-section-heading {
        flex-direction: column;
    }

    .dynamic-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   RADIUS - General Coronary Anatomy
   ========================================================== */

.coronary-general-card {
    padding: 26px 28px;
    border-top: 3px solid #116fba;
}

.coronary-general-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 24px;
    align-items: start;
}

.coronary-general-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}

.coronary-general-title h2 {
    margin: 2px 0 5px;
}

.coronary-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    background: #eaf5ff;
    color: #0871c4;
    font-size: 23px;
    font-weight: 800;
}

.coronary-general-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.coronary-general-grid .field {
    margin: 0;
}

.coronary-choice-card {
    padding: 0;
}

.coronary-choice-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.coronary-choice-heading strong {
    color: #122a47;
    font-size: 15px;
}

.field-help-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border: 1px solid #8799ad;
    border-radius: 50%;
    color: #6b7e93;
    font-size: 11px;
    font-weight: 800;
    cursor: help;
}

.hidden-original-boolean {
    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;
}

.coronary-boolean-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 42px;
    overflow: hidden;
    border: 1px solid #cdd9e6;
    border-radius: 8px;
    background: #fff;
}

.coronary-bool-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    color: #30465e;
    font-weight: 700;
    transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.coronary-bool-option:first-child {
    border-right: 1px solid #d6e0ea;
}

.coronary-bool-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.coronary-bool-option.selected-no {
    background: #edf3f8;
    color: #173450;
}

.coronary-bool-option.selected-orange {
    background: linear-gradient(
        135deg,
        #ff9f42,
        #f07d22
    );
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}

.coronary-bool-option.selected-green {
    background: linear-gradient(
        135deg,
        #42b56c,
        #24904d
    );
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}

.coronary-followup-box {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid #ffd5ad;
    border-radius: 9px;
    background: #fff9f1;
}

.coronary-followup-label {
    display: block;
    margin-bottom: 4px;
    color: #9b5815;
    font-weight: 800;
}

.muted.compact {
    margin: 0;
    font-size: 13px;
}

.coronary-anomaly-details,
.coronary-notes-field {
    grid-column: span 1;
}

.coronary-anomaly-details textarea,
.coronary-notes-field textarea {
    min-height: 106px;
}

.coronary-info-rail {
    display: grid;
    gap: 14px;
}

.coronary-info-card,
.coronary-tip-card {
    border-radius: 12px;
    padding: 17px;
}

.coronary-info-card {
    border: 1px solid #cfe2f5;
    background: #f4f9ff;
}

.coronary-tip-card {
    border: 1px solid #f1d59e;
    background: #fff8e9;
}

.coronary-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #075da3;
}

.coronary-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 1px solid #1775bc;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.coronary-info-card p,
.coronary-tip-card p {
    margin: 0;
    color: #445a71;
    font-size: 13px;
    line-height: 1.6;
}

.anomaly-example-card strong {
    display: block;
    margin-bottom: 9px;
    color: #193754;
}

.anomaly-example-card ul {
    margin: 0;
    padding-left: 18px;
}

.anomaly-example-card li {
    margin: 6px 0;
    color: #40576e;
    font-size: 13px;
}

@media (max-width: 1050px) {
    .coronary-general-layout {
        grid-template-columns: 1fr;
    }

    .coronary-info-rail {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .coronary-general-card {
        padding: 20px;
    }

    .coronary-general-grid {
        grid-template-columns: 1fr;
    }

    .coronary-anomaly-details,
    .coronary-notes-field {
        grid-column: 1;
    }

    .coronary-info-rail {
        grid-template-columns: 1fr;
    }
}



/* ==========================================================
   RADIUS - Coronary anatomy real multi-select fields
   ========================================================== */

.coronary-followup-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.coronary-followup-heading strong {
    color: #173a5e;
    font-size: 15px;
}

.coronary-followup-heading span {
    color: #73869a;
    font-size: 12px;
}

.coronary-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.coronary-anomaly-selector {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px solid #d8d5f5;
    border-radius: 11px;
    background: #faf9ff;
}

.coronary-anomaly-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.coronary-check-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.coronary-check-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.coronary-check-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid #cbd9e6;
    border-radius: 9px;
    background: #ffffff;
    color: #29445f;
    font-size: 13px;
    font-weight: 700;
    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.coronary-check-chip:hover span {
    border-color: #86b9df;
    transform: translateY(-1px);
}

.ectasia-chip-grid
.coronary-check-chip input[type="checkbox"]:checked + span {
    border-color: #f28a2a;
    background: #fff0df;
    color: #a9550f;
    box-shadow: inset 0 0 0 1px rgba(242,138,42,.10);
}

.anomaly-chip
input[type="checkbox"]:checked + span {
    border-color: #8878dd;
    background: #eeeaff;
    color: #4d3ea3;
    box-shadow: inset 0 0 0 1px rgba(136,120,221,.12);
}

.coronary-other-field {
    margin-top: 13px;
}

.coronary-other-field label {
    display: block;
    margin-bottom: 6px;
    color: #243e59;
    font-size: 13px;
    font-weight: 700;
}

.coronary-other-field input {
    width: 100%;
}

#ectasia-followup {
    padding: 15px 16px;
    border-color: #f4c38e;
    background: #fffaf4;
}

#coronary-anomaly-details-wrap {
    margin-top: 0;
}

@media (max-width: 760px) {
    .coronary-followup-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .coronary-check-chip span {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 12px;
    }
}



/* ==========================================================
   RADIUS - Coronary anatomy DB choice chips
   ========================================================== */

.coronary-subsection-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.coronary-subsection-title strong {
    color: #173a5e;
    font-size: 15px;
    font-weight: 800;
}

.coronary-subsection-title span {
    color: #77899d;
    font-size: 12px;
}

.coronary-choice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.coronary-db-chip {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.coronary-db-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.coronary-db-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 14px;

    background: #ffffff;
    border: 1px solid #cbd8e5;
    border-radius: 9px;

    color: #29445f;
    font-size: 13px;
    font-weight: 750;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.coronary-db-chip:hover span {
    transform: translateY(-1px);
}

/* Ectasia = orange */
.ectasia-choice-chips
.coronary-db-chip
input[type="checkbox"]:checked + span {
    background: #fff0df;
    border-color: #ff9637;
    color: #a8540b;
}

/* Anomaly = purple */
.anomaly-choice-chips
.coronary-db-chip
input[type="checkbox"]:checked + span {
    background: #eeeaff;
    border-color: #8c79dd;
    color: #4d3ca4;
}

.coronary-anomaly-selector {
    padding: 15px;
    margin-bottom: 16px;

    background: #faf9ff;
    border: 1px solid #ddd7f7;
    border-radius: 11px;
}

.coronary-other-details {
    margin-top: 14px;
}

.coronary-other-details label {
    display: block;
    margin-bottom: 6px;

    color: #263f59;
    font-size: 13px;
    font-weight: 750;
}

.coronary-other-details input {
    width: 100%;
}

.coronary-free-details {
    margin-top: 4px;
}

.coronary-free-details small {
    display: block;
    margin-top: 6px;
}



/* ==========================================================
   RADIUS - Compact native coronary lesion cards
   ========================================================== */

.native-lesion-card {
    padding: 18px 20px;
    border: 1px solid #c9ddf4;
    border-radius: 12px;
    background: #f8fbff;
    box-shadow: none;
}

.native-lesion-card + .native-lesion-card {
    margin-top: 10px;
}

.native-lesion-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.native-lesion-heading-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.native-lesion-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0d6fc2;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.native-lesion-card .dynamic-card-kicker {
    display: block;
    margin-bottom: 2px;
    color: #0d6fc2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.native-lesion-card .dynamic-card-title {
    margin: 0;
    color: #152f4b;
    font-size: 18px;
    font-weight: 800;
}

.native-lesion-delete {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 9px;
    background: #fff2f2;
    color: #b53030;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.native-lesion-delete input {
    margin: 0;
}

.native-lesion-main-grid {
    display: grid;
    grid-template-columns:
        minmax(190px, 2fr)
        minmax(110px, .8fr)
        minmax(170px, 1.2fr)
        minmax(130px, .9fr)
        minmax(90px, .65fr);
    gap: 14px;
    align-items: end;
}

.native-lesion-secondary-grid {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(320px, 2fr);
    gap: 14px;
    margin-top: 13px;
}

.native-lesion-card .field {
    margin: 0;
}

.native-lesion-card .field > label {
    display: block;
    margin-bottom: 5px;
    color: #233d58;
    font-size: 12px;
    font-weight: 750;
}

.native-lesion-card select,
.native-lesion-card input[type="text"],
.native-lesion-card input[type="number"],
.native-lesion-card textarea {
    width: 100%;
    min-height: 38px;
}

.native-lesion-card textarea {
    min-height: 40px;
    max-height: 80px;
    resize: vertical;
}

.native-checkbox-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
}

.native-checkbox-line input {
    margin: 0;
}

.native-checkbox-line span {
    color: #334d67;
    font-size: 13px;
    font-weight: 650;
}

.native-hidden-previous-stent {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.native-isr-field[hidden],
.native-other-segment-field[hidden] {
    display: none !important;
}


/* Dynamic action controls */

#add-segment-form {
    border-color: #0d6fc2;
    color: #0d6fc2;
    background: #fff;
}

#stop-segment-forms {
    color: #1768ad;
}

#resume-segment-forms {
    color: #1768ad;
}


/* Responsive */

@media (max-width: 1100px) {

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

    .native-lesion-secondary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {

    .native-lesion-main-grid {
        grid-template-columns: 1fr;
    }

    .native-lesion-heading {
        align-items: flex-start;
    }
}



/* ==========================================================
   RADIUS NATIVE CORONARY LESION UI V3
   ========================================================== */

#segment-form-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#segment-form-list .native-lesion-card {
    position: relative;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #c9ddf5;
    border-radius: 10px;
    background: #f8fbff;
    box-shadow: none;
}


/* ---------- heading ---------- */

#segment-form-list .dynamic-card-heading,
#segment-form-list .native-lesion-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

#segment-form-list .dynamic-card-heading > div:first-child,
#segment-form-list .native-lesion-heading-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.native-lesion-ui-number {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0872c9;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

#segment-form-list .dynamic-card-kicker {
    display: block;
    margin: 0 0 2px;
    color: #0872c9;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: .08em;
    font-weight: 800;
}

#segment-form-list .dynamic-card-title {
    margin: 0;
    color: #16324f;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
}


/* ---------- convert old grid to compact lesion grid ---------- */

#segment-form-list .native-lesion-card .form-grid {
    display: grid !important;

    grid-template-columns:
        minmax(170px, 1.55fr)
        minmax(105px, .65fr)
        minmax(155px, 1fr)
        minmax(115px, .72fr)
        minmax(85px, .48fr);

    column-gap: 12px;
    row-gap: 10px;
    align-items: end;
}


/* field labels */

#segment-form-list .native-lesion-card .field {
    margin: 0 !important;
    min-width: 0;
}

#segment-form-list .native-lesion-card .field > label {
    display: block;
    margin: 0 0 5px;
    color: #193652;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 750;
}


/* controls */

#segment-form-list .native-lesion-card select,
#segment-form-list .native-lesion-card input[type="text"],
#segment-form-list .native-lesion-card input[type="number"],
#segment-form-list .native-lesion-card textarea {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
}

#segment-form-list .native-lesion-card textarea {
    min-height: 36px;
    height: 36px;
    resize: vertical;
}


/* classes assigned by JS */

#segment-form-list .native-field-segment {
    grid-column: 1;
}

#segment-form-list .native-field-stenosis {
    grid-column: 2;
}

#segment-form-list .native-field-stent-status {
    grid-column: 3;
}

#segment-form-list .native-field-isr {
    grid-column: 4;
}

#segment-form-list .native-field-cto {
    grid-column: 5;
}

#segment-form-list .native-field-other {
    grid-column: 1 / span 2;
}

#segment-form-list .native-field-notes {
    grid-column: 1 / span 4;
}


/* Previous stent remains in POST but is not shown separately */

#segment-form-list .native-field-previous-stent {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}


/* Existing conditional class must not hide stent-status itself */

#segment-form-list
.native-lesion-card
.conditional-stent-status.native-field-stent-status {
    display: block !important;
}


/* ISR / Other are controlled by our small JS */

#segment-form-list .native-ui-hidden {
    display: none !important;
}


/* CTO compact */

#segment-form-list .native-field-cto input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 8px 0 9px;
}


/* delete */

#segment-form-list .native-lesion-delete-ui {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d63c3c;
    font-size: 12px;
    font-weight: 700;
}

#segment-form-list .native-lesion-delete-ui input {
    margin: 0;
}


/* add / stop buttons */

#add-segment-form {
    border-color: #0872c9 !important;
    color: #0872c9 !important;
    background: #fff !important;
    font-weight: 700;
}

#stop-segment-forms {
    color: #0872c9 !important;
    background: transparent !important;
}

#resume-segment-forms {
    color: #0872c9 !important;
    background: #fff !important;
}


/* marked for delete */

#segment-form-list .native-lesion-card.native-marked-delete {
    opacity: .48;
    border-color: #efbcbc;
}


/* responsive */

@media (max-width: 1050px) {

    #segment-form-list .native-lesion-card .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #segment-form-list .native-field-segment,
    #segment-form-list .native-field-stenosis,
    #segment-form-list .native-field-stent-status,
    #segment-form-list .native-field-isr,
    #segment-form-list .native-field-cto {
        grid-column: auto;
    }

    #segment-form-list .native-field-other,
    #segment-form-list .native-field-notes {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {

    #segment-form-list .native-lesion-card .form-grid {
        grid-template-columns: 1fr;
    }

    #segment-form-list .native-field-other,
    #segment-form-list .native-field-notes {
        grid-column: auto;
    }
}



/* ==========================================================
   RADIUS - Compact bypass graft cards
   ========================================================== */

#graft-form-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#graft-form-list .graft-lesion-card,
#graft-form-list .dynamic-form-card {
    position: relative;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #ead3a5;
    border-radius: 10px;
    background: #fffdf8;
    box-shadow: none;
}

#graft-form-list .graft-ui-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

#graft-form-list .graft-ui-heading-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.graft-ui-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 50%;
    background: #b77b13;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

#graft-form-list .graft-ui-kicker {
    display: block;
    margin-bottom: 2px;
    color: #9a6510;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: .08em;
    font-weight: 800;
}

#graft-form-list .graft-ui-title {
    margin: 0;
    color: #19324d;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
}

#graft-form-list .form-grid {
    display: grid !important;
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(180px, 1.25fr)
        minmax(140px, .9fr)
        minmax(120px, .75fr);
    gap: 12px;
    align-items: end;
}

#graft-form-list .field {
    margin: 0 !important;
    min-width: 0;
}

#graft-form-list .field > label {
    display: block;
    margin: 0 0 5px;
    color: #273d54;
    font-size: 11px;
    font-weight: 750;
}

#graft-form-list select,
#graft-form-list input[type="text"],
#graft-form-list input[type="number"],
#graft-form-list textarea {
    width: 100%;
    min-height: 36px;
    font-size: 13px;
}

#graft-form-list textarea {
    min-height: 36px;
    height: 36px;
    resize: vertical;
}

#graft-form-list .graft-field-type {
    grid-column: 1;
}

#graft-form-list .graft-field-target {
    grid-column: 2;
}

#graft-form-list .graft-field-status {
    grid-column: 3;
}

#graft-form-list .graft-field-stenosis {
    grid-column: 4;
}

#graft-form-list .graft-field-other {
    grid-column: 1 / span 2;
}

#graft-form-list .graft-field-notes {
    grid-column: 3 / span 2;
}

#graft-form-list .graft-ui-hidden {
    display: none !important;
}

#graft-form-list .graft-delete-ui {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d33c3c;
    font-size: 12px;
    font-weight: 700;
}

#graft-form-list .graft-marked-delete {
    opacity: .5;
    border-color: #efbcbc;
}

#add-graft-form {
    border-color: #b77b13 !important;
    color: #9a6510 !important;
    background: #fff !important;
    font-weight: 700;
}

#stop-graft-forms {
    color: #9a6510 !important;
    background: transparent !important;
}

#resume-graft-forms {
    color: #9a6510 !important;
    background: #fff !important;
}

@media (max-width: 1050px) {
    #graft-form-list .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #graft-form-list .graft-field-type,
    #graft-form-list .graft-field-target,
    #graft-form-list .graft-field-status,
    #graft-form-list .graft-field-stenosis {
        grid-column: auto;
    }

    #graft-form-list .graft-field-other,
    #graft-form-list .graft-field-notes {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    #graft-form-list .form-grid {
        grid-template-columns: 1fr;
    }

    #graft-form-list .graft-field-other,
    #graft-form-list .graft-field-notes {
        grid-column: auto;
    }
}


/* ===== GRAFT DELETE BUTTON ===== */

#graft-form-list .graft-ui-heading {
    position: relative;
}

#graft-form-list .graft-delete-button {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #dc3545;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
}

#graft-form-list .graft-delete-button:hover {
    background: #fff0f1;
    color: #b4232f;
}

#graft-form-list .graft-delete-button svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

#graft-form-list .graft-marked-delete {
    display: none !important;
}

/* Django'nun orijinal DELETE checkbox'ını gizle */
#graft-form-list input[name$="-DELETE"] {
    display: none !important;
}


/* ===== GRAFT DELETE CONTROL FIX ===== */

#graft-form-list .graft-lesion-card,
#graft-form-list .dynamic-form-card {
    position: relative;
}

#graft-form-list .graft-delete-control {
    position: absolute;
    top: 14px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #ffd1d1;
    border-radius: 8px;
    background: #fff3f3;
    color: #bd3030;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    z-index: 20;
}

#graft-form-list .graft-delete-control:hover {
    background: #ffe7e7;
}

#graft-form-list .graft-delete-control input[type="checkbox"] {
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    opacity: 1 !important;
    position: static !important;
}

#graft-form-list .graft-delete-icon {
    font-size: 14px;
    line-height: 1;
}


/* ==========================================================
   GRAFT DELETE - DEFINITIVE OVERRIDE
   ========================================================== */

#graft-form-list article {
    position: relative !important;
}

#graft-form-list .graft-delete-control {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    width: auto !important;
    height: auto !important;

    padding: 7px 10px !important;

    border: 1px solid #f4c5c5 !important;
    border-radius: 8px !important;

    background: #fff3f3 !important;
    color: #c93434 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    cursor: pointer !important;
    z-index: 50 !important;
}

#graft-form-list .graft-delete-control:hover {
    background: #ffe7e7 !important;
    border-color: #eaa7a7 !important;
}

#graft-form-list .graft-delete-control input[type="checkbox"] {
    display: inline-block !important;
    position: static !important;

    width: 15px !important;
    height: 15px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    clip: auto !important;
    clip-path: none !important;
}

#graft-form-list .graft-delete-icon {
    display: inline !important;
    font-size: 14px !important;
}



/* ==========================================================
   CORONARY ANOMALY - FOLLOW-UP UNDER YES/NO
   ========================================================== */

.coronary-choice-anomaly {
    align-self: start;
}

.coronary-choice-anomaly
.coronary-anomaly-inline-followup {
    width: 100%;
    margin-top: 14px;
}

.coronary-choice-anomaly
.coronary-anomaly-selector {
    width: 100%;
    margin: 0;
    padding: 16px 18px;

    border: 1px solid #d8d0f4;
    border-radius: 10px;

    background: #faf8ff;
}

.coronary-choice-anomaly
.coronary-anomaly-selector > div:first-child,
.coronary-choice-anomaly
.coronary-anomaly-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.coronary-choice-anomaly
.coronary-anomaly-selector strong {
    color: #263b56;
    font-size: 14px;
    font-weight: 800;
}

/* anomaly chips stay compact */
.coronary-choice-anomaly
.coronary-anomaly-selector
.coronary-db-chip {
    margin: 4px 4px 4px 0;
}

/* optional free-text details belong to anomaly too */
.coronary-choice-anomaly
.coronary-free-details {
    width: 100%;
    margin-top: 12px;
}

/*
 * Prevent old grid positioning from making the anomaly
 * follow-up appear under the ectasia column.
 */
#coronary-anomaly-details-wrap.coronary-anomaly-inline-followup {
    grid-column: auto !important;
    position: static !important;
}

/* If hidden by the existing conditional JS, respect it */
#coronary-anomaly-details-wrap[hidden] {
    display: none !important;
}



/* ==========================================================
   FORCE CORONARY ANOMALY FOLLOW-UP TO RIGHT COLUMN
   ========================================================== */

#ectasia-followup {
    grid-column: 1 !important;
}

#coronary-anomaly-details-wrap.force-anomaly-right-column {
    grid-column: 2 !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 14px 0 0 !important;

    position: static !important;
    left: auto !important;
    right: auto !important;

    align-self: start !important;
}


/* Purple anomaly selector */
#coronary-anomaly-details-wrap
.coronary-anomaly-selector {
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 16px 18px !important;

    border: 1px solid #d8d0f4 !important;
    border-radius: 10px !important;

    background: #faf8ff !important;
}


/* Free-detail box stays under anomaly types */
#coronary-anomaly-details-wrap
.coronary-free-details {
    width: 100% !important;
    margin-top: 12px !important;
}


/* Notes should not pull anomaly back to column 1 */
.coronary-notes-field {
    grid-column: 1 / -1 !important;
}


/* Mobile: naturally return to single column */
@media (max-width: 800px) {

    #ectasia-followup,
    #coronary-anomaly-details-wrap.force-anomaly-right-column {
        grid-column: 1 !important;
    }

}


/* ==========================================================
   ANOMALY FOLLOW-UP INSIDE CORONARY ANOMALY CARD
   ========================================================== */

.coronary-choice-anomaly {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.coronary-choice-anomaly
#coronary-anomaly-details-wrap.anomaly-inside-card {
    display: block;
    width: 100% !important;
    margin-top: 14px !important;
    grid-column: auto !important;
    position: static !important;
}

.coronary-choice-anomaly
#coronary-anomaly-details-wrap[hidden] {
    display: none !important;
}

.coronary-choice-anomaly
.coronary-anomaly-selector {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.coronary-choice-anomaly
.coronary-free-details {
    width: 100% !important;
    margin-top: 12px !important;
}



/* ==========================================================
   CORONARY ANOMALY - TRUE DOM POSITION
   ========================================================== */

.coronary-choice-anomaly {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: start !important;
}


/* Yes / No stays full width */
.coronary-choice-anomaly
.coronary-boolean-control {
    width: 100% !important;
}


/* Follow-up now physically belongs to anomaly card */
.coronary-choice-anomaly
#coronary-anomaly-details-wrap {
    display: block;
    width: 100% !important;

    margin: 14px 0 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;

    position: static !important;
    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
}


/* Existing conditional logic may apply hidden */
.coronary-choice-anomaly
#coronary-anomaly-details-wrap[hidden] {
    display: none !important;
}


/* Purple anomaly type panel */
.coronary-choice-anomaly
.coronary-anomaly-selector {
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 16px 18px !important;

    border: 1px solid #d8d0f4 !important;
    border-radius: 10px !important;

    background: #faf8ff !important;
}


/* Details box stays under anomaly types */
.coronary-choice-anomaly
.coronary-free-details {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
}


/* ==========================================================
   ACCESS - PREVIOUS RADIAL HISTORY CONDITIONAL FIELDS
   ========================================================== */

.access-conditional-hidden,
.field[hidden] {
    display: none !important;
}



/* ==========================================================
   ACCESS MODULE - COLORED SECTION PANELS
   ========================================================== */

.access-panel {
    border-radius: 14px !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* Previous radial-access history */
.access-panel-history {
    background: #fff7f8 !important;
    border-color: #f1c8ce !important;
}

/* Primary access */
.access-panel-primary {
    background: #f4f9ff !important;
    border-color: #c7dcf3 !important;
}

/* Crossover */
.access-panel-crossover {
    background: #f4fbf5 !important;
    border-color: #c8e5cc !important;
}

/* RAS / next Access section */
.access-panel-ras {
    background: #fffaf1 !important;
    border-color: #ead7ac !important;
}


/* ==========================================================
   ACCESS MODULE - MAROON SECTION HEADINGS
   ========================================================== */

.access-panel > h2,
.access-panel > h3,
.access-panel .section-title,
.access-panel .panel-title {
    color: #8b1e2d !important;
    font-weight: 800 !important;
}


/* Keep field labels dark navy for readability */
.access-panel label,
.access-panel .field label {
    color: #142b47 !important;
}


/* Inputs remain white */
.access-panel input,
.access-panel select,
.access-panel textarea {
    background: #ffffff !important;
}



/* ==========================================================
   ACCESS MODULE - REMAINING RAS PANELS
   ========================================================== */

/* Angiographic RAS assessment */
.access-panel-ras-assessment {
    background: #f8f6ff !important;
    border: 1px solid #d8cff4 !important;
    border-radius: 14px !important;
}

/* Radial artery spasm */
.access-panel-spasm {
    background: #f2fbf8 !important;
    border: 1px solid #bfe3d8 !important;
    border-radius: 14px !important;
}


/* Maroon headings */
.access-panel-ras-assessment > h2,
.access-panel-spasm > h2 {
    color: #8b1e2d !important;
    font-weight: 800 !important;
}


/* Keep field labels navy */
.access-panel-ras-assessment label,
.access-panel-spasm label {
    color: #142b47 !important;
}


/* Inputs remain white */
.access-panel-ras-assessment input,
.access-panel-ras-assessment select,
.access-panel-ras-assessment textarea,
.access-panel-spasm input,
.access-panel-spasm select,
.access-panel-spasm textarea {
    background: #ffffff !important;
}


/* Radial artery spasm - Parliament Blue heading */
.access-panel-spasm > h2 {
    color: #356A9A !important;
    font-weight: 800 !important;
}



/* ==========================================================
   RADIAL ARTERY SPASM - PARLIAMENT BLUE DESIGN
   ========================================================== */

/* Entire Radial artery spasm panel */
.access-panel-spasm {
    background: #f1f7fd !important;
    border: 1px solid #8db9e3 !important;
    border-radius: 14px !important;
}

/* Main heading */
.access-panel-spasm > h2 {
    color: #356A9A !important;
    font-weight: 800 !important;
}

/* Automatic RAS result inner card */
.access-panel-spasm [class*="ras-result"],
.access-panel-spasm [class*="result-card"],
.access-panel-spasm [class*="automatic"] {
    background: #e5f0fb !important;
    border-color: #9fc4e7 !important;
}

/* RAS notes textarea remains white */
.access-panel-spasm textarea {
    background: #ffffff !important;
}



/* ==========================================================
   RAS RESULT COLORS
   No  = dark parliament blue
   Yes = burgundy
   ========================================================== */

.ras-result-value {
    font-weight: 800 !important;
}

.ras-result-no {
    color: #173F67 !important;
}

.ras-result-yes {
    color: #8B1E2D !important;
}



/* ==========================================================
   CORONARY ANATOMY MODULE - SECTION COLOR SYSTEM
   ========================================================== */

/* ----------------------------------------------------------
   1. GENERAL CORONARY ANATOMY
   Soft medical blue
   ---------------------------------------------------------- */

.coronary-color-general {
    background: #f2f7fd !important;
    border: 1px solid #bdd4eb !important;
    border-radius: 16px !important;
}


/* ----------------------------------------------------------
   2. PRIOR CABG / BYPASS GRAFTS
   Warm cream / gold
   ---------------------------------------------------------- */

.coronary-color-graft {
    background: #fff9ef !important;
    border: 1px solid #e8c982 !important;
    border-radius: 16px !important;
}


/* ----------------------------------------------------------
   3. NATIVE CORONARY SEGMENTS
   Soft lavender
   ---------------------------------------------------------- */

.coronary-color-native {
    background: #f7f5ff !important;
    border: 1px solid #d5ccf1 !important;
    border-radius: 16px !important;
}


/* ==========================================================
   CORONARY ANATOMY - BURGUNDY SECTION HEADINGS
   ========================================================== */

.coronary-color-general .coronary-section-heading > div > h2,
.coronary-color-graft .coronary-section-heading > div > h2,
.coronary-color-native .coronary-section-heading > div > h2,

.coronary-color-general > h2,
.coronary-color-graft > h2,
.coronary-color-native > h2 {
    color: #8B1E2D !important;
    font-weight: 800 !important;
}


/* Eyebrow headings */
.coronary-color-general .eyebrow,
.coronary-color-graft .eyebrow,
.coronary-color-native .eyebrow {
    color: #8B1E2D !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
}


/* ==========================================================
   KEEP FORM LABELS DARK NAVY
   ========================================================== */

.coronary-color-general label,
.coronary-color-graft label,
.coronary-color-native label {
    color: #142B47 !important;
}


/* Inputs should stay white */
.coronary-color-general input,
.coronary-color-general select,
.coronary-color-general textarea,

.coronary-color-graft input,
.coronary-color-graft select,
.coronary-color-graft textarea,

.coronary-color-native input,
.coronary-color-native select,
.coronary-color-native textarea {
    background: #ffffff !important;
}


/* ==========================================================
   GRAFT BADGE
   Keep warm-gold identity
   ========================================================== */

.coronary-color-graft .graft-badge {
    background: #fff3d7 !important;
    border-color: #dfb75e !important;
    color: #875717 !important;
}


/* ==========================================================
   NATIVE CORONARY BADGE
   Lavender identity if badge exists
   ========================================================== */

.coronary-color-native .coronary-section-badge {
    background: #eee9ff !important;
    border-color: #c9bdef !important;
    color: #59469c !important;
}



/* ==========================================================
   CLINICAL HISTORY MODULE
   ========================================================== */

/* Main Clinical History panel */
.clinical-history-color-panel {
    background: #f3f8fd !important;
    border: 1px solid #bfd7ee !important;
    border-radius: 16px !important;
}

/* Main heading */
.clinical-history-color-panel > h2 {
    color: #8B1E2D !important;
    font-weight: 800 !important;
}

/* All Clinical History subsection headings */
.clinical-history-color-panel h3 {
    color: #8B1E2D !important;
    font-weight: 800 !important;
}


/* ----------------------------------------------------------
   SUBSECTION CARDS
   ---------------------------------------------------------- */

.clinical-subcard-profile,
.clinical-subcard-risk,
.clinical-subcard-cv,
.clinical-subcard-renal,
.clinical-subcard-valvular,
.clinical-subcard-additional {
    border-radius: 12px !important;
    padding: 18px !important;
    border: 1px solid !important;
}


/* Clinical profile - soft blue */
.clinical-subcard-profile {
    background: #f4f9ff !important;
    border-color: #c6dbef !important;
}


/* Cardiovascular risk factors - very light rose */
.clinical-subcard-risk {
    background: #fff7f8 !important;
    border-color: #eccbd1 !important;
}


/* Previous cardiovascular history - light blue */
.clinical-subcard-cv {
    background: #f3f8fd !important;
    border-color: #c7dced !important;
}


/* Renal / systemic - light mint */
.clinical-subcard-renal {
    background: #f3faf7 !important;
    border-color: #c4e2d5 !important;
}


/* Valvular / cancer - soft lavender */
.clinical-subcard-valvular {
    background: #f8f5ff !important;
    border-color: #d9cff0 !important;
}


/* Additional history - warm cream */
.clinical-subcard-additional {
    background: #fffaf1 !important;
    border-color: #ead7ac !important;
}


/* Burgundy divider under subsection headings */
.clinical-history-color-panel h3 {
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid rgba(139, 30, 45, 0.30) !important;
}


/* Labels stay dark navy */
.clinical-history-color-panel label,
.clinical-history-color-panel .baseline-field label {
    color: #142B47 !important;
}


/* Inputs remain white */
.clinical-history-color-panel input,
.clinical-history-color-panel select,
.clinical-history-color-panel textarea {
    background: #ffffff !important;
}


/* Clinical History page eyebrow */
.patient-header .eyebrow {
    color: #8B1E2D !important;
    font-weight: 800 !important;
}



/* ==========================================================
   LABORATORY MODULE - FINAL COLOR OVERRIDES
   ========================================================== */

/* Common */
section.panel.laboratory-color-panel {
    border-radius: 16px !important;
    border-style: solid !important;
    border-width: 1px !important;
}

/* Burgundy headings */
section.panel.laboratory-color-panel > h2 {
    color: #8B1E2D !important;
    font-weight: 800 !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
    border-bottom: 2px solid rgba(139, 30, 45, 0.24) !important;
}


/* Renal function - soft blue */
section.panel.laboratory-panel-renal {
    background: #F2F7FD !important;
    border-color: #B8D3EC !important;
}


/* Hemoglobin - soft rose */
section.panel.laboratory-panel-hemoglobin {
    background: #FFF5F6 !important;
    border-color: #EBC4CB !important;
}


/* Notes - warm cream */
section.panel.laboratory-panel-notes {
    background: #FFF9EF !important;
    border-color: #E7CF98 !important;
}


/* Keep controls clean white */
section.panel.laboratory-color-panel input,
section.panel.laboratory-color-panel select,
section.panel.laboratory-color-panel textarea {
    background: #FFFFFF !important;
}


/* Keep labels navy */
section.panel.laboratory-color-panel label {
    color: #142B47 !important;
}


/* Laboratory page eyebrow */
body:has(section.laboratory-color-panel) .patient-header .eyebrow {
    color: #8B1E2D !important;
    font-weight: 800 !important;
}



/* ==========================================================
   LABORATORY - KDIGO AKI RESULT
   ========================================================== */

.aki-result-card {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

/* No AKI = green */
.aki-result-card.aki-result-no {
    background: #edf9f1 !important;
    border: 1px solid #9fd4ae !important;
}

.aki-result-card.aki-result-no span {
    color: #47705a !important;
}

.aki-result-card.aki-result-no strong {
    color: #167348 !important;
    font-weight: 800 !important;
}

/* Stage 1 / 2 / 3 = red */
.aki-result-card.aki-result-yes {
    background: #fff0f0 !important;
    border: 1px solid #ef8f8f !important;
}

.aki-result-card.aki-result-yes span {
    color: #8B1E2D !important;
}

.aki-result-card.aki-result-yes strong {
    color: #C61D24 !important;
    font-weight: 800 !important;
}



/* ==========================================================
   LABORATORY - KDIGO AKI STATUS FINAL
   ========================================================== */

section.laboratory-panel-renal article.kdigo-status-card {
    border-radius: 12px !important;
    transition: none !important;
}

section.laboratory-panel-renal article.kdigo-status-card > span {
    font-weight: 600 !important;
}

section.laboratory-panel-renal article.kdigo-status-card > strong {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
}


/* NO AKI = GREEN */
section.laboratory-panel-renal article.kdigo-status-card.kdigo-no-aki {
    background: #ECF8F1 !important;
    border: 1px solid #84C99E !important;
}

section.laboratory-panel-renal article.kdigo-status-card.kdigo-no-aki > span {
    color: #527363 !important;
}

section.laboratory-panel-renal article.kdigo-status-card.kdigo-no-aki > strong {
    color: #147A48 !important;
}


/* STAGE 1 / 2 / 3 = STRONG RED */
section.laboratory-panel-renal article.kdigo-status-card.kdigo-aki {
    background: #FFF0F0 !important;
    border: 2px solid #E53935 !important;
}

section.laboratory-panel-renal article.kdigo-status-card.kdigo-aki > span {
    color: #9B1C27 !important;
}

section.laboratory-panel-renal article.kdigo-status-card.kdigo-aki > strong {
    color: #D71920 !important;
}


/* Timing missing / outside window = neutral */
section.laboratory-panel-renal article.kdigo-status-card.kdigo-neutral {
    background: #F7F8FA !important;
    border: 1px solid #D7DFE8 !important;
}

section.laboratory-panel-renal article.kdigo-status-card.kdigo-neutral > strong {
    color: #64748B !important;
}


/* ==========================================================
   LABORATORY - HEMOGLOBIN DROP ALERT
   Hemoglobin drop >= 3.0 g/dL
   ========================================================== */

section.laboratory-panel-hemoglobin .hemoglobin-drop-card {
    position: relative;
}

section.laboratory-panel-hemoglobin .hemoglobin-drop-card.hemoglobin-drop-alert {
    background: #FFF0F0 !important;
    border: 2px solid #E53935 !important;
    padding-right: 72px;
}

section.laboratory-panel-hemoglobin .hemoglobin-drop-card.hemoglobin-drop-alert > span {
    color: #9B1C27 !important;
}

section.laboratory-panel-hemoglobin .hemoglobin-drop-card.hemoglobin-drop-alert > strong {
    color: #D71920 !important;
    font-weight: 800 !important;
}

section.laboratory-panel-hemoglobin .hemoglobin-drop-card.hemoglobin-drop-alert::after {
    content: "!";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 32px solid #D71920;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 900;
    line-height: 38px;
    text-align: center;
    text-indent: -5px;
}

/* ==========================================================
   DAY-1 OUTCOMES - COLORED CLINICAL PANELS
   ========================================================== */

section.day1-color-panel {
    border-width: 1px;
    border-style: solid;
}

/* Burgundy section headings */
section.day1-color-panel > h2 {
    color: #8B1E2D !important;
    font-weight: 800;
}

/* Assessment - soft rose */
section.day1-panel-assessment {
    background: #FFF4F6 !important;
    border-color: #EFC5CE !important;
}

/* BARC bleeding - soft clinical blue */
section.day1-panel-barc {
    background: #F2F8FF !important;
    border-color: #BFD8F2 !important;
}

/* EASY hematoma - soft green */
section.day1-panel-easy {
    background: #F3FAF4 !important;
    border-color: #C6E2CA !important;
}

/* Radial artery occlusion - soft amber */
section.day1-panel-rao {
    background: #FFFAF0 !important;
    border-color: #E8D49F !important;
}

/* Additional vascular outcomes - soft lavender */
section.day1-panel-vascular {
    background: #F7F3FF !important;
    border-color: #D8C8EE !important;
}

/* Notes - soft rose */
section.day1-panel-notes {
    background: #FFF5F7 !important;
    border-color: #EFC8D0 !important;
}

/* ==========================================================
   FOLLOW-UP - COLORED CLINICAL PANELS
   ========================================================== */

section.followup-color-panel {
    border-width: 1px;
    border-style: solid;
}

/* Burgundy section headings */
section.followup-color-panel > h2 {
    color: #8B1E2D !important;
    font-weight: 800;
}

/* Follow-up information - soft clinical blue */
section.followup-panel-info {
    background: #F2F8FF !important;
    border-color: #BFD8F2 !important;
}

/* Clinical events after discharge - soft green */
section.followup-panel-events {
    background: #F3FAF4 !important;
    border-color: #C6E2CA !important;
}

/* Notes - soft amber */
section.followup-panel-notes {
    background: #FFFAF0 !important;
    border-color: #E8D49F !important;
}

/* =========================================================
   Patient detail - active procedure selector
   ========================================================= */

.procedure-record-row {
    cursor: pointer;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.procedure-record-row:hover {
    border-color: #1473b9;
    box-shadow: 0 4px 14px rgba(15, 67, 112, 0.10);
}

.procedure-record-row:focus-visible {
    outline: 3px solid rgba(20, 115, 185, 0.28);
    outline-offset: 2px;
}

.procedure-record-row.active-procedure-row {
    background: #0f4c81;
    border-color: #0f4c81;
    box-shadow: 0 6px 18px rgba(15, 67, 112, 0.20);
}

.procedure-record-row.active-procedure-row strong,
.procedure-record-row.active-procedure-row .muted {
    color: #ffffff;
}

.procedure-record-row.active-procedure-row .button {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f4c81;
}

.procedure-record-row.active-procedure-row .button:hover {
    background: #f3f7fb;
    border-color: #f3f7fb;
    color: #0f4c81;
}

/* ============================================================
   Patient detail - selected procedure visual override
   ============================================================ */

.procedure-record-row.active-procedure-row {
    background: #0f4c81 !important;
    background-color: #0f4c81 !important;
    border-color: #0f4c81 !important;
    box-shadow: 0 6px 18px rgba(15, 67, 112, 0.20);
}

.procedure-record-row.active-procedure-row strong,
.procedure-record-row.active-procedure-row .muted {
    color: #ffffff !important;
}

.procedure-record-row.active-procedure-row .button {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f4c81 !important;
}

.procedure-record-row.active-procedure-row .button:hover {
    background: #f3f7fb !important;
    border-color: #f3f7fb !important;
    color: #0f4c81 !important;
}

/* =========================================================
   Patient detail - selected procedure contrast
   ========================================================= */

.procedure-record-row.active-procedure-row,
.procedure-record-row.active-procedure-row > div,
.procedure-record-row.active-procedure-row strong,
.procedure-record-row.active-procedure-row span,
.procedure-record-row.active-procedure-row .muted {
    color: #ffffff !important;
}

/* Keep action button inverse: white button / blue text */
.procedure-record-row.active-procedure-row .button {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f4c81 !important;
}

.procedure-record-row.active-procedure-row .button:hover {
    background: #f3f7fb !important;
    border-color: #f3f7fb !important;
    color: #0f4c81 !important;
}

/* =========================================================
   Procedure module - PCI characteristics checkbox alignment
   ========================================================= */

.form-card .form-check-list .form-check-item {
    align-items: center;
}

.form-card .form-check-list .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.form-card .form-check-list .form-check-label {
    margin: 0;
    line-height: 1.25;
}

/* =========================================================
   Procedure - PCI characteristics checkbox alignment
   ========================================================= */

.pci-characteristics-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pci-characteristics-options > label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px;
    margin: 0 !important;
    width: 100%;
}

.pci-characteristics-options > label input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pci-characteristics-options > label > span {
    margin: 0;
    line-height: 1.25;
}

/* PCI characteristics - definitive inline checkbox layout */
.pci-characteristics-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.pci-characteristics-options > .pci-characteristic-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
}

.pci-characteristics-options > .pci-characteristic-option > input[type="checkbox"] {
    display: block !important;
    position: static !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* PCI characteristics - definitive inline checkbox layout */
.pci-characteristics-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.pci-characteristics-options > .pci-characteristic-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
}

.pci-characteristics-options > .pci-characteristic-option > input[type="checkbox"] {
    display: inline-block !important;
    position: static !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   Procedure form - Drug-Coated Balloon (DCB)
   ========================================================= */

.dcb-resource-panel {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(22, 101, 52, 0.18);
}

.dcb-resource-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.dcb-resource-kicker {
    margin-bottom: 5px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    color: #1670ad;
}

.dcb-resource-header h3 {
    margin: 0;
    font-size: 1.12rem;
    color: #162c46;
}

.dcb-used-control {
    min-width: 280px;
    max-width: 360px;
    flex: 0 1 360px;
}

.dcb-detail-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    gap: 18px;
}

.dcb-detail-grid[hidden] {
    display: none !important;
}

@media (max-width: 1250px) {
    .dcb-detail-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 800px) {
    .dcb-resource-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dcb-used-control {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

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

/* =========================================================
   DCB PANEL - visual refinement
   ========================================================= */

.dcb-resource-panel {
    margin-top: 28px;
    padding: 22px 20px 20px;
    border: 2px solid #0f6b43;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.38);
}

.dcb-resource-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.dcb-resource-header > div:first-child {
    flex: 1 1 auto;
}

.dcb-resource-kicker {
    margin: 0 0 6px;
    font-size: 1.18rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.015em;
    color: #0f6b43;
    text-transform: uppercase;
}

.dcb-resource-header h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 800;
    color: #152b45;
}

.dcb-used-control {
    flex: 0 0 360px;
    min-width: 320px;
}

.dcb-used-control .device-resource-label {
    margin-bottom: 8px;
    font-size: 0.98rem;
    font-weight: 800;
    color: #152b45;
}

.dcb-used-control .field select,
.dcb-used-control .field input {
    width: 100%;
}

/* Yes/No alanını geniş, temiz bir kontrol satırı yap */
.dcb-resource-header + .dcb-detail-grid {
    margin-top: 0;
}

.dcb-detail-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.dcb-detail-grid .device-resource-card {
    min-height: 165px;
    padding: 18px 16px;
    border: 1.5px solid #b9dfc2;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
}

.dcb-detail-grid .device-resource-label {
    min-height: 48px;
    margin-bottom: 12px;
    font-size: 0.96rem;
    line-height: 1.25;
    font-weight: 800;
    color: #152b45;
}

.dcb-detail-grid .field-unit {
    display: block;
    margin-top: 2px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #657891;
}

.dcb-detail-grid .field input,
.dcb-detail-grid .field select {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
}

.dcb-detail-grid[hidden] {
    display: none !important;
}

/* DCB used control - white card effect */
.dcb-used-control {
    padding: 14px 16px;
    border: 1.5px solid #b9dfc2;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
}

/* Desktop */
@media (max-width: 1450px) {
    .dcb-detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet */
@media (max-width: 980px) {
    .dcb-resource-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dcb-used-control {
        flex: none;
        min-width: 0;
        width: 100%;
    }

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

/* Mobile */
@media (max-width: 640px) {
    .dcb-resource-panel {
        padding: 18px 14px;
    }

    .dcb-resource-kicker {
        font-size: 1rem;
    }

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