:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel2: #f7f9fc;
    --text: #172033;
    --muted: #68758a;
    --accent: #5664e8;
    --accent2: #16b8a6;
    --accent-soft: #eef0ff;
    --accent-soft2: #e9fbf8;
    --danger: #d6455d;
    --ok: #198a68;
    --border: #e1e7f0;
    --border-strong: #cfd8e6;
    --shadow-sm: 0 2px 8px rgba(23, 32, 51, 0.06);
    --shadow: 0 12px 32px rgba(23, 32, 51, 0.08);
    --shadow-lg: 0 24px 64px rgba(23, 32, 51, 0.14);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Ubuntu,
        Cantarell,
        Noto Sans,
        sans-serif;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

main {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 32px clamp(18px, 3vw, 48px) 56px;
    display: grid;
    gap: 18px;
}

button,
input,
select,
textarea,
.select {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text);
    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:focus,
select:focus,
textarea:focus,
.select:focus {
    border-color: rgba(86, 100, 232, .65);
    outline: none;
    box-shadow: 0 0 0 3px rgba(86, 100, 232, .12);
}

textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
}

table {
    border-collapse: collapse;
}

header.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(170px, auto) minmax(280px, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding: 10px clamp(18px, 3vw, 42px);
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(23, 32, 51, 0.02);
    backdrop-filter: blur(20px) saturate(150%);
}

header.app-header.compact-header {
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto;
}

.header-spacer {
    min-width: 0;
}

.header-actions {
    justify-content: flex-end;
}

.language-select {
    min-height: 34px;
    width: 72px;
    padding: 5px 24px 5px 8px;
    font-size: 12px;
    font-weight: 800;
}

.brand,
.toolbar,
.panel-header,
.row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbar,
.row {
    flex-wrap: wrap;
}

.brand {
    flex: 0 0 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.logo {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(145deg, #6f7bf7, #4653d1);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(86, 100, 232, 0.28);
}

.title {
    font-size: 19px;
    font-weight: 760;
    letter-spacing: -0.025em;
}

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

.btn,
.mode-switch-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    text-decoration: none;
    font-weight: 680;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

header.app-header > nav.toolbar {
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 4px;
    background: rgba(247, 251, 255, 0.82);
    border: 1px solid rgba(219, 231, 243, 0.86);
    border-radius: 12px;
}

header.app-header > .toolbar:last-child {
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
}

header.app-header #auth-indicator {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 7px 10px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(22, 32, 39, 0.05);
    white-space: nowrap;
    text-overflow: ellipsis;
}

header.app-header #auth-indicator strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
}

header.app-header .mode-switch-link {
    min-height: 34px;
    padding: 7px 10px;
    border-color: transparent;
    background: transparent;
    border-radius: 9px;
    color: var(--muted);
}

header.app-header .mode-switch-link .material-icons,
header.app-header .btn .material-icons {
    font-size: 18px;
}

header.app-header .admin-link {
    color: #5b3db3;
}

header.app-header .btn {
    border-radius: 999px;
}

.btn:hover,
.mode-switch-link:hover {
    border-color: rgba(86, 100, 232, .45);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

header.app-header .mode-switch-link:hover {
    color: var(--accent);
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(47, 128, 237, 0.1);
}

.btn.primary {
    background: linear-gradient(135deg, #6673ef, #505dde);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(86, 100, 232, 0.24);
}

.btn.primary:hover {
    background: linear-gradient(135deg, #5966e6, #4552d2);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(86, 100, 232, 0.3);
}

.btn.ghost {
    background: transparent;
}

.btn.danger {
    background: #fff3f3;
    border-color: #ffd1d1;
    color: var(--danger);
}

.icon-btn {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

.admin-link {
    background: #f3efff;
    border-color: #d5c8ff;
    color: #5b3db3;
}

.panel {
    min-width: 0;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.panel .panel {
    box-shadow: none;
}

.panel-header {
    justify-content: space-between;
    margin-bottom: 12px;
}

.analysis-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.analysis-title-line h2 {
    margin: 0;
}

.analysis-inline-back {
    min-height: 32px;
    padding: 5px 9px;
    flex: 0 0 auto;
}

.analysis-inline-back .material-icons {
    font-size: 18px;
}

.panel h2,
.panel h3 {
    margin: 0;
}

.col {
    flex: 1 1 0;
    min-width: 0;
}

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

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted);
    font-size: 14px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(18, 25, 40, 0.48);
    backdrop-filter: blur(10px);
}

.login-box {
    width: min(420px, 100%);
    padding: 28px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.create-project-modal {
    width: min(520px, 100%);
    display: grid;
    gap: 20px;
    padding: 22px;
    overflow: hidden;
}

.create-project-modal-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

.create-project-modal-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(86, 100, 232, .18);
    border-radius: 12px;
    font-size: 23px;
}

.create-project-modal-heading {
    min-width: 0;
}

.create-project-modal-heading h2,
.create-project-modal-heading p {
    margin: 0;
}

.create-project-modal-heading h2 {
    margin-top: 2px;
}

.create-project-modal-heading p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
}

.create-project-close {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
}

.create-project-close .material-icons {
    font-size: 19px;
}

.create-project-field {
    width: 100%;
    display: grid;
    gap: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.create-project-field input {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
}

.create-project-field small {
    font-size: 11px;
    font-weight: 600;
}

.create-project-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.create-project-actions .btn {
    min-width: 110px;
}

.create-project-actions .material-icons {
    font-size: 18px;
}

.content-type-modal {
    display: grid;
    gap: 16px;
    position: relative;
    z-index: 10000;
    pointer-events: auto;
}

.content-type-select-wrap {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.content-type-select-wrap select {
    width: 100%;
    min-height: 42px;
}

.content-type-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.content-type-actions .btn {
    flex: 1 1 0;
}

.content-type-loading {
    color: var(--muted);
    font-size: 14px;
}

.selected-content-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-content-type > span {
    flex: 1;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    font-weight: 800;
}

.aoi-inline-meta {
    display: grid;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.aoi-inline-meta select {
    width: 100%;
    min-height: 34px;
    font-size: 13px;
}

.benchmark-project-picker {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.benchmark-type-filter {
    display: grid;
    gap: 8px;
    max-width: 320px;
    font-weight: 800;
}

.benchmark-type-filter select {
    min-height: 42px;
}

.benchmark-source-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    font-weight: 800;
}

.benchmark-source-toggle .segmented-control {
    flex: 0 1 auto;
}

.benchmark-project-list {
    display: grid;
    gap: 8px;
}

.benchmark-project-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.benchmark-project-row strong,
.benchmark-project-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benchmark-project-row small {
    margin-top: 3px;
    color: var(--muted);
}

.benchmark-selection-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.benchmark-selection-filters .compare-search {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.benchmark-selection-grid .compare-choice {
    min-width: 0;
}

.benchmark-selection-pagination {
    margin-top: 8px;
}

.benchmark-reference-filter > div:first-child {
    flex: 1 1 260px;
}

.benchmark-compare-modal {
    width: min(1180px, 94vw);
    max-height: 90vh;
    display: grid;
    gap: 14px;
    overflow: auto;
}

.benchmark-compare-table td small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.benchmark-compare-table .positive {
    color: #177245;
}

.benchmark-compare-table .negative {
    color: #a83232;
}

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

.benchmark-compare-output {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.benchmark-compare-visual,
.benchmark-compare-results {
    min-width: 0;
}

.benchmark-compare-stage {
    position: relative;
    width: min(100%, 380px);
    margin: 0 auto;
    background: #f4f7f7;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.benchmark-compare-stage img,
.benchmark-compare-overlay {
    width: 100%;
    display: block;
}

.benchmark-compare-overlay {
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
}

.benchmark-compare-overlay polygon {
    fill: rgba(47, 128, 237, 0.16);
    stroke: #2f80ed;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.benchmark-compare-overlay text {
    fill: #ffffff;
    stroke: rgba(10, 18, 28, 0.9);
    stroke-width: 4;
    paint-order: stroke;
    font-size: 18px;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: middle;
}

@media (max-width: 960px) {
    .benchmark-compare-output {
        grid-template-columns: 1fr;
    }

}

.compare-page {
    display: block;
}

.compare-shell {
    display: grid;
    gap: 9px;
}

.compare-page-header.result-summary-card {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.compare-back-btn {
    flex: 0 0 auto;
    width: 36px;
    min-height: 36px;
    padding: 0;
    background: #ffffff;
}

.compare-back-btn .material-icons { font-size: 18px; }

.compare-page-title { min-width: 0; }
.compare-page-title .page-eyebrow { margin-bottom: 3px; }
.compare-page-title h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}
.compare-page-title p {
    margin: 5px 0 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-header-reference {
    min-width: 0;
    max-width: min(42vw, 560px);
    margin: 0 0 0 auto;
    padding: 7px 10px;
    overflow: hidden;
    color: var(--muted);
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-header-reference strong { color: var(--text); }

.compare-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-top: 7px;
    padding: 7px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-selector p {
    margin: 2px 0 0;
}

.benchmark-compare-selector > div:first-child {
    flex: 1 1 260px;
    min-width: 220px;
}

.benchmark-compare-selector .benchmark-compare-select {
    flex: 1 1 300px;
    max-width: 420px;
}

.benchmark-compare-selector .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.compare-search {
    flex: 1;
    min-width: 220px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-search .material-icons {
    color: var(--muted);
    font-size: 18px;
}

.compare-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
}

.compare-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.compare-choice {
    display: grid;
    grid-template-columns: auto 82px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.compare-choice.active,
.compare-choice:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.compare-choice.active {
    box-shadow: inset 0 0 0 2px rgba(47, 128, 237, 0.28);
}

.compare-choice-check {
    display: grid;
    align-items: center;
    color: var(--accent);
}

.compare-choice-check .material-icons {
    font-size: 22px;
}

.compare-choice-thumb {
    position: relative;
    height: 120px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f5f8fb;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-choice-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.compare-choice small {
    margin-top: 3px;
    color: var(--muted);
}

.compare-choice-text {
    min-width: 0;
    align-self: center;
}

.compare-selected-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-top: 12px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-selected-card {
    flex: 0 0 220px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--accent-soft);
    border: 1px solid rgba(47, 128, 237, 0.45);
    border-radius: 8px;
}

.compare-selected-card img,
.compare-selected-card > .material-icons {
    width: 58px;
    height: 46px;
    display: grid;
    place-items: center;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.compare-selected-card strong,
.compare-selected-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-selected-card small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.compare-selection-panel {
    display: grid;
    gap: 14px;
    padding: 14px !important;
    background: #f1f6fb;
}

.compare-selection-heading,
.compare-library-header,
.compare-selection-actions,
.compare-library-filters {
    display: flex;
    align-items: center;
}

.compare-selection-heading,
.compare-library-header {
    justify-content: space-between;
    gap: 16px;
}

.compare-selection-heading .report-section-title {
    min-width: 0;
    margin: 0;
}

.compare-selection-heading .report-step {
    width: 38px;
    height: 38px;
}

.compare-selection-heading .report-step .material-icons {
    font-size: 19px;
}

.compare-selection-actions,
.compare-library-filters {
    flex: 0 0 auto;
    gap: 8px;
}

.compare-capacity-pill,
.compare-reference-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(47, 128, 237, .28);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.compare-capacity-pill {
    min-height: 34px;
    padding: 0 11px;
    white-space: nowrap;
}

.compare-capacity-pill.full {
    color: #8a5a00;
    background: #fff6dc;
    border-color: #f0d07a;
}

.compare-selection-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    color: #3c5d80;
    background: #eaf3fc;
    border: 1px solid #cfe1f3;
    border-radius: 9px;
    font-size: 12px;
}

.compare-selection-hint .material-icons {
    font-size: 18px;
}

.compare-selection-panel .compare-selected-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
}

.compare-selection-panel .compare-selected-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(29, 60, 94, .05);
}

.compare-selection-panel .compare-selected-card.reference {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .18);
}

.compare-selected-thumb {
    width: 72px;
    height: 62px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-selected-thumb img,
.compare-selected-thumb > .material-icons {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    object-fit: contain;
}

.compare-selected-card-copy {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 3px;
}

.compare-selected-card-copy strong,
.compare-selected-card-copy small {
    max-width: 100%;
}

.compare-reference-badge {
    padding: 2px 7px;
}

.compare-reference-badge .material-icons {
    font-size: 13px;
}

.compare-reference-action {
    padding: 0;
    color: var(--accent);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
}

.compare-reference-action:hover {
    text-decoration: underline;
}

.compare-selected-remove {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
}

.compare-library-header {
    padding-top: 2px;
}

.compare-library-header p {
    margin: 2px 0 0;
    font-size: 11px;
}

.compare-library-filters .compare-search {
    width: min(260px, 26vw);
    min-width: 170px;
}

.compare-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 9px;
    margin-top: 0;
}

.compare-library-grid .compare-choice {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(29, 60, 94, .04);
}

.compare-library-grid .compare-choice:disabled {
    cursor: not-allowed;
}

.compare-library-grid .compare-choice.at-limit {
    opacity: .48;
}

.compare-library-grid .compare-choice.reference {
    border-color: var(--accent);
}

.compare-library-grid .compare-choice-check {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 2;
    width: 29px;
    height: 29px;
    place-items: center;
    background: rgba(255, 255, 255, .94);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(20, 45, 74, .16);
}

.compare-library-grid .compare-choice-thumb {
    width: 100%;
    height: 132px;
}

.compare-choice-reference {
    position: absolute;
    left: 7px;
    bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    color: #ffffff;
    background: rgba(29, 60, 94, .86);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.compare-choice-reference .material-icons {
    font-size: 12px;
}

.compare-library-grid .compare-choice-text {
    width: 100%;
}

.compare-output,
.compare-metric-panel {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.compare-output-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.compare-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.compare-analysis-header > div {
    min-width: 0;
}

.compare-analysis-header h3 {
    margin: 2px 0 0;
    font-size: 18px;
}

.compare-analysis-header p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.compare-selection-btn {
    flex: 0 0 auto;
    background: #ffffff;
}

.compare-metric-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.compare-metric-switcher button {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    color: var(--muted);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.compare-metric-switcher button > .material-icons {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 9px;
    font-size: 18px;
}

.compare-metric-switcher button > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.compare-metric-switcher strong,
.compare-metric-switcher small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-metric-switcher strong {
    color: var(--text);
    font-size: 12px;
}

.compare-metric-switcher small {
    font-size: 9px;
}

.compare-metric-switcher button:hover,
.compare-metric-switcher button.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(47, 128, 237, .48);
}

.compare-metric-switcher button.active {
    box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .18);
}

.compare-control-deck {
    display: grid;
    grid-template-columns: auto minmax(300px, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.compare-control-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.compare-control-title > .material-icons {
    color: var(--accent);
    font-size: 18px;
}

.compare-control-title > span:last-child {
    min-width: 0;
    display: grid;
    line-height: 1.05;
}

.compare-control-title small {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.compare-control-title strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-metric-switcher.compare-metric-switcher-compact {
    gap: 3px;
    padding: 3px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-metric-switcher.compare-metric-switcher-compact button {
    min-height: 28px;
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 7px;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    text-align: center;
}

.compare-metric-switcher.compare-metric-switcher-compact button > .material-icons {
    width: auto;
    height: auto;
    display: inline;
    background: transparent;
    border-radius: 0;
    font-size: 14px;
}

.compare-metric-switcher.compare-metric-switcher-compact strong {
    font-size: 10px;
}

.compare-control-deck .compare-view-actions-compact {
    padding: 3px;
}

.compare-control-deck .segmented-btn {
    min-height: 28px;
    padding: 4px 7px;
    font-size: 10px;
}

.compare-control-deck .compare-selection-btn {
    white-space: nowrap;
}

.compare-back-projects {
    white-space: nowrap;
}

.compare-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-view-label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.compare-view-label > .material-icons {
    color: var(--accent);
    font-size: 18px;
}

.compare-view-label > span:last-child {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.compare-view-label strong {
    font-size: 11px;
}

.compare-view-label small {
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-view-actions {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.compare-view-actions .segmented-btn {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.compare-view-actions .segmented-btn.active {
    color: #1559b7;
    background: var(--accent-soft);
}

.compare-reading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    color: #0c6b5e;
    background: #e8f8f4;
    border: 1px solid #b8e8dd;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.compare-reading-indicator .material-icons {
    font-size: 13px;
}

.compare-workspace {
    display: grid;
    gap: 8px;
    align-items: start;
}

.compare-main-area {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.compare-image-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
}

.compare-image-row-simple {
    display: block;
}

.compare-canvas-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 6px;
    padding: 5px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(47, 128, 237, .22);
    border-radius: 11px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .08);
}

.compare-side-controls {
    display: grid;
    gap: 6px;
    padding: 6px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-side-btn {
    min-height: 0;
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 5px 3px;
    color: var(--muted);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
}

.compare-side-btn .material-icons {
    font-size: 16px;
}

.compare-side-btn.active {
    color: #1559b7;
    background: var(--accent-soft);
    border-color: rgba(47, 128, 237, 0.48);
}

.compare-page .compare-tabs {
    position: sticky;
    top: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    margin: 0 0 7px;
    min-width: 0;
    padding: 3px;
}

.compare-page .segmented-btn,
.compare-page .btn {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 12px;
}

.compare-page .segmented-btn .material-icons,
.compare-page .btn .material-icons {
    font-size: 16px;
}

.compare-column-grid {
    display: grid;
    gap: 6px;
    min-width: min-content;
}

.compare-image-cell {
    display: grid;
    gap: 4px;
    align-content: start;
    min-width: 0;
    padding: 6px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-image-spacer {
    grid-column: span 2;
    align-self: end;
    padding: 8px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.compare-image-cell.reference {
    border-color: rgba(47, 128, 237, 0.55);
    background: var(--accent-soft);
}

.compare-image-cell strong,
.compare-image-cell small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-image-cell small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.compare-image-frame {
    min-height: 120px;
    height: min(28vh, 260px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f8fb;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-image-stage {
    position: relative;
    display: inline-grid;
    max-width: 100%;
    max-height: 100%;
}

.compare-image-stage img {
    grid-area: 1 / 1;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(28vh, 260px);
    object-fit: contain;
}

.compare-image-overlay {
    grid-area: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}

.compare-journey-path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.38));
    vector-effect: non-scaling-stroke;
}

.compare-journey-point circle {
    fill: #ffffff;
    stroke: #12a594;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    vector-effect: non-scaling-stroke;
}

.compare-journey-point text {
    fill: #0f3f37;
    font-size: 10px;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: middle;
}

.compare-aoi-layer polygon {
    fill: rgba(47, 128, 237, 0.13);
    stroke: rgba(47, 128, 237, 0.88);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.compare-aoi-layer text {
    fill: #ffffff;
    stroke: rgba(10, 18, 28, 0.92);
    stroke-width: 3;
    paint-order: stroke;
    font-size: 14px;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: middle;
}

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

.compare-table {
    display: grid;
    width: max-content;
    min-width: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(219, 231, 243, 0.92);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(22, 32, 39, 0.04);
}

.compare-table thead,
.compare-table tbody,
.compare-table tfoot,
.compare-table tr {
    display: contents;
}

.compare-table th,
.compare-table td {
    min-height: 24px;
    display: grid;
    align-items: center;
    border-right: 1px solid rgba(219, 231, 243, 0.7);
    border-bottom: 1px solid rgba(219, 231, 243, 0.7);
    padding: 3px 5px;
    font-size: 9px;
    line-height: 1.1;
}

.compare-table th {
    color: #4f6172;
    background: #f5f8fb;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.compare-table th:last-child,
.compare-table td:last-child {
    border-right: 0;
}

.compare-table td:first-child {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 5px;
    justify-items: start;
    text-align: left;
    background: #ffffff;
}

.compare-table td:first-child strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-meta-cell {
    overflow: hidden;
    color: var(--muted);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-aoi-letter {
    grid-row: 1 / span 2;
    display: inline-grid;
    place-items: center;
    align-self: center;
    width: 15px;
    height: 15px;
    color: #ffffff;
    background: #2f80ed;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
}

.compare-table td:not(:first-child) {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 3px;
    justify-items: center;
    justify-content: center;
    font-weight: 900;
}

.compare-image-view-cycle {
    min-width: 118px;
    justify-content: flex-start;
    color: #1559b7;
    background: var(--accent-soft);
    border-color: rgba(47, 128, 237, .28);
    white-space: nowrap;
}

.compare-image-view-cycle .material-icons {
    color: var(--accent);
}

.compare-repartition-pair {
    width: 100%;
    min-width: 108px;
    display: grid;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    gap: 4px;
}

.compare-repartition-pair > span {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 4px 6px;
    color: #1559b7;
    background: #eef6ff;
    border: 1px solid #cfe2f8;
    border-radius: 7px;
}

.compare-repartition-pair > span:last-child {
    color: #6842ad;
    background: #f5f0ff;
    border-color: #ded0f7;
}

.compare-repartition-pair small {
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.compare-repartition-pair strong {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.compare-reading-cell {
    min-width: 88px;
    display: grid;
    justify-items: center;
    gap: 1px;
}

.compare-reading-cell > span {
    color: #0c6b5e;
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.compare-reading-cell strong {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.compare-reading-cell small {
    color: var(--muted);
    font-size: 8px;
}

.compare-size-value,
.compare-reading-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 5px 8px;
    color: #1559b7;
    background: var(--accent-soft);
    border: 1px solid rgba(47, 128, 237, .24);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.compare-reading-total {
    color: #0c6b5e;
    background: #e8f8f4;
    border-color: #b8e8dd;
}

.compare-total-row td {
    background: #f7fafd !important;
    border-top: 2px solid var(--border);
}

.compare-total-row td:first-child {
    display: flex;
    align-items: center;
    gap: 5px;
}

.compare-total-row td:first-child .material-icons {
    color: var(--accent);
    font-size: 14px;
}

.compare-table td.missing {
    color: var(--muted);
    font-weight: 700;
}

.compare-value-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    font-size: 11px;
    font-weight: 1000;
}

.compare-best-badge {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 3px;
    color: #7c4a00;
    background: linear-gradient(145deg, #fff7cc, #f4bf36);
    border: 1px solid #d99a08;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(217, 154, 8, 0.28);
}

.compare-best-badge .material-icons {
    font-size: 11px;
}

.compare-value-with-best {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.compare-aoi-edit-btn {
    width: 17px;
    height: 17px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--muted);
    background: #ffffff;
    border: 1px solid rgba(219, 231, 243, 0.9);
    border-radius: 5px;
    cursor: pointer;
}

.compare-aoi-edit-btn:hover {
    color: #1559b7;
    border-color: rgba(47, 128, 237, 0.45);
    background: var(--accent-soft);
}

.compare-aoi-edit-btn .material-icons {
    font-size: 11px;
}

.benchmark-aoi-list {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 10px;
}

.benchmark-aoi-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 10px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.benchmark-aoi-card.active,
.benchmark-aoi-card:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.benchmark-aoi-card strong,
.benchmark-aoi-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benchmark-aoi-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.benchmark-aoi-card small {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    color: var(--accent);
    font-weight: 900;
}

.mode-badge,
.status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-weight: 800;
}

.mode-badge {
    padding: 2px 8px;
    background: #eef3f4;
    color: var(--muted);
}

.mode-badge.free {
    background: var(--accent-soft);
    color: var(--accent);
}

.mode-badge.locked {
    background: #fff1de;
    color: #9a5a18;
}

.status-pill {
    padding: 4px 8px;
    background: #edf5ff;
    color: #24609d;
    font-size: 12px;
}

.status-pill.done {
    background: #e8f6ef;
    color: var(--ok);
}

.status-pill.error {
    background: #fff0ef;
    color: var(--danger);
}

.result-info-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.result-info-bar.danger {
    color: var(--danger);
    background: #fff3f3;
    border-color: #ffd1d1;
}

.results-table {
    width: 100%;
    table-layout: fixed;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.results-table th,
.results-table td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.results-table th {
    background: #eef3f4;
    color: #45545f;
    font-weight: 700;
}

.disabled-row {
    opacity: 0.55;
}

.generation-params {
    margin: 12px 0;
    padding: 12px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.result-summary-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.result-summary-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.result-summary-heading h2 {
    margin: 2px 0 0;
    font-size: 22px;
    line-height: 1.2;
}

.result-summary-heading h2 span {
    color: var(--muted);
    font-weight: 650;
}

.params-title,
.metrics-title {
    font-size: 14px;
    font-weight: 700;
}

.params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.result-summary-card .params-grid {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
}

.result-summary-card .param-item {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 4px 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.result-summary-card .mode-badge {
    margin-top: 0 !important;
}

.result-summary-card .param-label,
.result-summary-card .param-value {
    display: inline;
}

.result-summary-card .param-label::after {
    content: " : ";
}

.param-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.param-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}

.param-value {
    font-weight: 650;
}

.results-grid,
.aoi-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.aoi-metric-section {
    padding: 12px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.aoi-metric-label {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.aoi-metric-values {
    display: grid;
    gap: 6px;
    font-size: 13px;
}

.result-canvas-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: auto;
    padding: 4px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.result-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    cursor: zoom-in;
}

/* History */
.page-back-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;
}

/* Results page: clear context, navigation and reading hierarchy */
.results-page {
    --results-toolbar-control-height: 36px;
    --results-toolbar-button-height: 30px;
    --results-metric-text-size: 15px;
    --results-metric-line-height: 1.25;
    max-width: 1680px;
    margin: 0 auto;
    padding: 6px clamp(8px, 1vw, 16px) 18px;
}

.results-shell {
    padding: 7px;
    background: #f8fbfe;
}

.results-content {
    min-width: 0;
}

.results-toolbar-upload {
    flex: 0 0 220px;
    min-width: 0;
    max-width: 220px;
    height: var(--results-toolbar-control-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 7px;
}

.results-toolbar-upload .material-icons {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 20px;
}

.results-toolbar-upload strong {
    min-width: 0;
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.results-page .result-summary-card {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 6px 9px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(29, 60, 94, 0.07);
}

.results-page .result-summary-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    content: "";
    background: var(--accent);
}

.results-page .result-model-summary {
    min-height: 0;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
    padding: 3px 5px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.results-page .result-model-summary::before { display: none; }
.results-page .result-model-summary .params-grid {
    width: auto;
    margin-left: auto;
}

.result-title-block { min-width: 0; }
.result-title-block h2 { overflow-wrap: anywhere; }
.result-title-block p {
    display: none;
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.result-eyebrow {
    display: none;
    color: var(--accent);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.results-page .result-summary-card .param-item {
    padding: 3px 7px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 2px 8px rgba(29, 60, 94, .04);
}

.results-page .result-tabs {
    position: static;
    top: auto;
    gap: 4px;
    margin: 0;
    padding: 3px;
    box-shadow: 0 8px 24px rgba(29, 60, 94, .08);
}

.results-sticky-controls {
    position: static;
    top: auto;
    z-index: auto;
    min-width: 0;
    max-width: 100%;
    display: grid;
    gap: 3px;
    overflow: visible;
    margin: 0 0 8px;
    padding: 8px;
    background: #f1f6fb;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: none;
    backdrop-filter: none;
}

.app-sidebar-nav {
    width: 100%;
    display: grid;
    gap: 8px;
}

.app-sidebar-link {
    position: relative;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 760;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.app-sidebar-link::before {
    content: "";
    position: absolute;
    left: -8px;
    width: 4px;
    height: 24px;
    border-radius: 0 4px 4px 0;
    background: var(--accent);
    opacity: 0;
}

.app-sidebar-link .material-icons {
    flex: 0 0 22px;
    width: 22px;
    font-size: 22px;
    text-align: center;
}

.app-sidebar-label {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-8px);
    visibility: hidden;
    transition: max-width .22s ease, opacity .16s ease .03s, transform .18s ease .03s, visibility 0s linear .22s;
}

header.app-header:hover .app-sidebar-label,
header.app-header:focus-within .app-sidebar-label {
    max-width: 150px;
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s, .03s, .03s, 0s;
}

.app-sidebar-link:hover {
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateX(2px);
}

.app-sidebar-link.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(86, 100, 232, .16);
}

.app-sidebar-link.active::before {
    opacity: 1;
}

.section-page-title {
    min-width: 0;
}

.section-page-title .page-eyebrow {
    display: block;
    margin-bottom: 3px;
}

.section-page-title h1 {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    letter-spacing: -.035em;
}

.results-page .results-sticky-controls .result-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    scrollbar-width: none;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
}

.results-page .results-sticky-controls .result-tabs::-webkit-scrollbar { display: none; }

.result-image-mode-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;
    padding: 2px;
    background: #eef3f8;
    border-radius: 8px;
}

.result-image-mode-btn { flex: 0 0 auto; }

.results-toolbar-back {
    flex: 0 0 auto;
    width: var(--results-toolbar-control-height);
    min-width: var(--results-toolbar-control-height);
    padding: 0 !important;
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border-color: rgba(47, 128, 237, .35) !important;
}

.results-toolbar-back .material-icons { font-size: 22px !important; }

.results-page .result-summary-heading { gap: 8px; }
.results-page .result-summary-heading h2 {
    margin-top: 0;
    font-size: 16px;
}

.results-page .result-summary-heading .icon-btn {
    width: 31px;
    min-width: 31px;
    min-height: 31px;
    padding: 0;
}

.results-page .result-summary-card .params-grid { gap: 4px; }
.results-page .result-summary-card .param-label { font-size: 8px; }
.results-page .result-summary-card .param-value { font-size: 10px; }

.results-page .result-tab-group,
.results-page .result-action-group {
    flex: 0 0 auto;
    height: var(--results-toolbar-control-height);
    box-sizing: border-box;
    align-items: center;
    gap: 2px;
    padding: 2px;
    overflow: visible;
    border-radius: 7px;
}

.results-page .result-tab-group {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: safe center;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.results-page .result-tab-group::-webkit-scrollbar { display: none; }

.results-page .result-tab {
    height: var(--results-toolbar-button-height);
    min-height: var(--results-toolbar-button-height);
    box-sizing: border-box;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 7px;
    font-size: 17px;
}

.results-page .result-tab .material-icons { font-size: 15px; }

.results-page .results-toolbar-back {
    height: var(--results-toolbar-control-height);
    min-height: var(--results-toolbar-control-height);
}

.result-action-label {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 0 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.result-action-label .material-icons { font-size: 16px; }
.result-export-btn { padding-inline: 9px; }
.result-export-btn.primary {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.result-export-btn.primary:hover {
    color: #fff;
    background: #1f6fd1;
}

.results-overview {
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.results-metric-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 6px;
    padding: 6px 8px;
    background: #f1f6fb;
    border: 1px solid var(--border);
    border-radius: 10px;
    scrollbar-width: none;
}

.results-metric-heading::-webkit-scrollbar { display: none; }
.results-metric-heading .report-section-title {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
}
.results-metric-heading .report-section-title > div { min-width: 0; }
.results-metric-heading .report-section-title h3 {
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.results-metric-heading .report-section-title p {
    margin-top: 2px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.results-metric-heading .result-image-mode-bar { flex: 0 0 auto; }

.results-metric-heading.metric-in-panel {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 10px;
    margin: 0 0 8px;
    padding: 8px 10px 10px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}

.results-metric-heading.metric-in-panel .report-section-title {
    flex: 0 1 auto;
    justify-self: center;
    justify-content: center;
    text-align: center;
}

.results-metric-heading.metric-in-panel .report-section-title p {
    max-width: 760px;
    white-space: normal;
}

.results-metric-heading.metric-in-panel .result-canvas-controls {
    position: static;
    justify-self: start;
    margin: 0;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
}

.results-page .overview-primary-panel {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
    background: #f1f6fb;
    border-radius: 14px;
}

.results-page .overview-primary-panel .result-journey-tabs,
.results-page .overview-primary-panel .journey-summary {
    grid-column: 1;
    margin: 0;
}

.results-page .overview-primary-panel .result-journey-tabs {
    gap: 3px;
    padding: 3px;
}

.results-page .overview-primary-panel .result-journey-tabs .btn,
.results-page .overview-primary-panel .journey-tab {
    min-height: 27px;
    padding: 3px 7px;
    font-size: 10px;
}

.results-page .overview-primary-panel .journey-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 7px;
}

.results-page .overview-primary-panel .journey-summary-main,
.results-page .overview-primary-panel .journey-order {
    align-items: center;
    flex-direction: row;
    gap: 4px;
    font-size: 10px;
}

.results-page .overview-primary-panel .journey-summary-main span {
    padding: 2px 6px;
}

.results-page .overview-primary-panel .journey-reading-value { font-size: 13px; }
.results-page .overview-primary-panel .journey-node {
    width: 21px;
    height: 21px;
    font-size: 10px;
}

.results-page .overview-loading,
.results-page .overview-stage-frame {
    grid-column: 1;
    grid-row: auto;
    min-height: clamp(500px, 68vh, 760px);
}

.results-page .overview-stage { max-height: none; }
.results-page .overview-result-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(64vh, 680px);
}

.results-page .overview-journey-grid {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px;
    min-width: 0;
}

.results-page .overview-journey-grid.has-1 {
    width: min(100%, 1080px);
    grid-template-columns: minmax(0, 1fr);
    justify-self: center;
}
.results-page .overview-journey-grid.has-2 {
    width: min(100%, 1340px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: center;
}
.results-page .overview-journey-grid.has-3 {
    width: min(100%, 1500px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: center;
}

.results-page .overview-journey-grid .overview-stage-frame {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    min-height: clamp(280px, 42vh, 500px);
    padding: 5px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.results-page .overview-journey-grid.has-1 .overview-stage-frame {
    min-height: clamp(400px, 54vh, 620px);
}

.results-page .overview-journey-grid.has-2 .overview-stage-frame {
    min-height: clamp(300px, 43vh, 520px);
}

.results-page .overview-journey-grid.has-3 .overview-stage-frame {
    min-height: clamp(260px, 38vh, 460px);
}

.results-page .overview-journey-grid .overview-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: none;
}

.results-page .overview-journey-grid .overview-stage svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.results-page .overview-journey-grid.has-2 .overview-result-image,
.results-page .overview-journey-grid.has-3 .overview-result-image {
    max-height: min(58vh, 620px);
}

.results-page .overview-journey-path {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
}

.results-page .cluster-text-label { font-size: 12px; }
.results-page .cluster-id-label { font-size: 13px; }

.results-page .report-sections {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 8px;
}

.results-page .report-sections > .report-section { grid-column: 1; }
.results-page .report-section {
    padding: 8px;
    background: #f1f6fb;
}

.results-page .report-section-title {
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.results-page .report-section-title > div { min-width: 0; }
.results-page .report-section-title h3 { font-size: 15px; line-height: 1.15; }
.results-page .report-section-title p {
    margin-top: 2px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.results-page .report-step {
    width: 32px;
    min-width: 32px;
    height: 22px;
    padding: 0;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.results-page .report-section-grid {
    grid-template-columns: minmax(380px, .72fr) minmax(420px, 1fr);
    gap: 8px;
}

.results-page .report-section-grid > * { min-width: 0; }

.results-page .report-mini-visual { gap: 4px; }
.results-page .report-mini-frame {
    min-height: clamp(360px, 52vh, 590px);
    padding: 5px;
}
.results-page .report-mini-frame img { max-height: min(58vh, 620px); }

.results-page .report-table-wrap { border-radius: 6px; }
.results-page .report-table th,
.results-page .report-table td {
    padding: 5px 7px;
    font-size: var(--results-metric-text-size);
    line-height: var(--results-metric-line-height);
    white-space: nowrap;
}

.results-page .size-chart,
.results-page .color-chart {
    gap: 6px;
    padding: 7px;
}

.results-page .size-chart-row,
.results-page .color-chart-row {
    gap: 7px;
}

.results-page .size-chart-label,
.results-page .color-chart-label strong,
.results-page .size-chart-total {
    font-size: var(--results-metric-text-size);
    line-height: var(--results-metric-line-height);
}

.results-page .size-chart-label {
    font-weight: 400;
}

.results-page .size-chart-total {
    gap: 7px;
}

.results-page .size-chart-total-value {
    padding-right: 7px;
}

.results-page .size-chart-track { min-height: 21px; }
.results-page .color-chart-track,
.results-page .color-chart-track span { min-height: 20px; }
.results-page .size-chart-track span,
.results-page .color-chart-track span {
    padding-inline: 7px;
    font-size: var(--results-metric-text-size);
    line-height: var(--results-metric-line-height);
}

.results-page .reading-total-bubble,
.results-page .reading-time-legend-labels,
.results-page .aoi-letter-chip {
    font-size: var(--results-metric-text-size);
    line-height: var(--results-metric-line-height);
}

.results-page .report-table td,
.results-page .size-chart-track span,
.results-page .color-chart-track span,
.results-page .size-chart-total-value,
.results-page .reading-total-bubble,
.results-page .reading-time-legend-labels {
    font-variant-numeric: tabular-nums;
}

.results-page .color-chart-swatch {
    width: 22px;
    height: 22px;
}

.results-page .color-chart-label { grid-template-columns: 22px minmax(0, 1fr); gap: 5px; }
.results-page .color-chart-bars { gap: 3px; }

.results-page .reading-report-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}
.results-page .reading-ring { max-width: 160px; gap: 2px; }
.results-page .reading-ring strong { font-size: 30px; }
.results-page .reading-ring span,
.results-page .reading-ring small {
    font-size: var(--results-metric-text-size);
    line-height: var(--results-metric-line-height);
}
}

.results-page .report-section,
.results-page .video-slide-card,
.compare-page .compare-metric-panel,
.compare-shell > section.panel {
    border-radius: 14px;
}

.compare-page .compare-metric-panel {
    padding: 8px;
    background: #f1f6fb;
}
.compare-shell > section.panel { padding: 10px; }
.compare-reference-section { margin-top: 8px; display: grid; gap: 7px; }
.workflow-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 0; }
.workflow-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 11px; }
.workflow-tabs button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.workflow-tabs button:disabled { cursor: not-allowed; opacity: .55; }
.workflow-tabs button span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--border); }
.workflow-tabs button.active span { color: #fff; background: var(--accent); }
.workflow-next { justify-self: end; }
.compare-reference-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin-top: 0;
}
.compare-search select {
    width: 100%;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
}
.admin-users-panel { overflow-x: auto; }
.admin-users-table { min-width: 980px; }
.admin-user-column { width: 19%; }
.admin-role-column { width: 10%; }
.admin-features-column { width: 29%; }
.admin-activity-column { width: 8%; }
.admin-status-column { width: 10%; }
.admin-actions-column { width: 24%; }
.admin-user-cell { text-align: left !important; }
.admin-user-identity { min-width: 0; display: grid; gap: 3px; }
.admin-user-identity strong,
.admin-user-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-identity strong { font-size: 14px; }
.admin-user-identity span { color: var(--muted); font-size: 11px; }
.features-cell { text-align: left !important; }
.feature-menu { width: 100%; min-width: 0; margin-top: 7px; }
.feature-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    color: var(--text);
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    list-style: none;
}
.feature-menu-trigger::-webkit-details-marker { display: none; }
.feature-menu-trigger .material-icons { font-size: 18px; transition: transform .16s ease; }
.feature-menu[open] .feature-menu-trigger .material-icons { transform: rotate(180deg); }
.feature-menu-list {
    display: grid;
    gap: 3px;
    max-height: 290px;
    margin-top: 5px;
    padding: 5px;
    overflow-y: auto;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.feature-menu-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 8px;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    text-align: left;
}
.feature-menu-option:hover { background: rgba(77, 163, 255, .09); }
.feature-menu-option.active { color: var(--accent); background: rgba(77, 163, 255, .13); }
.feature-menu-option:disabled { cursor: wait; opacity: .68; }
.feature-menu-check { font-size: 18px; }
.feature-chip-list { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.feature-chip {
    max-width: 150px;
    overflow: hidden;
    padding: 2px 7px;
    color: var(--accent);
    background: rgba(77, 163, 255, .1);
    border: 1px solid rgba(77, 163, 255, .24);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feature-chip-more { color: var(--muted); background: var(--panel2); border-color: var(--border); }
.admin-actions {
    display: grid;
    grid-template-columns: repeat(4, 34px);
    grid-template-rows: auto 34px auto 34px;
    justify-content: center;
    gap: 5px;
}
.admin-actions::before,
.admin-actions::after {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}
.admin-actions::before { content: "Configuration"; grid-row: 1; }
.admin-actions::after { content: "Activité et compte"; grid-row: 3; margin-top: 2px; }
.admin-actions .btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 0 !important;
}
.admin-action-edit { grid-column: 1; grid-row: 2; }
.admin-action-password { grid-column: 2; grid-row: 2; }
.admin-action-settings { grid-column: 3; grid-row: 2; }
.admin-action-role { grid-column: 4; grid-row: 2; }
.admin-action-logs { grid-column: 1; grid-row: 4; }
.admin-action-login { grid-column: 2; grid-row: 4; }
.admin-action-status { grid-column: 3; grid-row: 4; }
.admin-action-delete { grid-column: 4; grid-row: 4; }
.benchmark-visibility-card {
    display: grid;
    gap: 13px;
    margin-top: 16px;
    padding: 15px;
    background: rgba(77, 163, 255, .035);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.benchmark-visibility-heading { display: flex; align-items: center; gap: 10px; }
.benchmark-visibility-heading > .material-icons { color: var(--accent); }
.benchmark-visibility-heading > div { display: grid; gap: 3px; }
.benchmark-visibility-heading small { color: var(--muted); }
.benchmark-visibility-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.benchmark-visibility-options button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: var(--muted);
    text-align: left;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}
.benchmark-visibility-options button > span:last-child { display: grid; gap: 3px; }
.benchmark-visibility-options button strong { color: var(--text); }
.benchmark-visibility-options button small { line-height: 1.35; }
.benchmark-visibility-options button.active { color: var(--accent); background: rgba(77, 163, 255, .1); border-color: rgba(77, 163, 255, .48); }
.benchmark-private-notice { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.benchmark-private-notice .material-icons { font-size: 17px; }
.benchmark-scope-summary { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.benchmark-scope-summary .material-icons { color: var(--accent); font-size: 17px; }
.benchmark-scope-summary strong { color: var(--text); }
.benchmark-scope-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    width: fit-content;
    padding: 2px 6px;
    color: var(--muted);
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}
.benchmark-scope-badge.global { color: var(--accent); background: rgba(77, 163, 255, .1); border-color: rgba(77, 163, 255, .3); }
.benchmark-scope-badge .material-icons { font-size: 11px !important; }
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}
.project-card {
    position: relative;
    color: inherit;
    text-decoration: none;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.project-card:hover {
    transform: translateY(-2px);
    border-color: rgba(86, 100, 232, .4);
    box-shadow: 0 14px 30px rgba(23, 32, 51, .1);
}
.create-resource-card {
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 20px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px dashed rgba(86, 100, 232, .55);
    cursor: pointer;
    font: inherit;
    text-align: center;
}
.create-resource-card:hover {
    color: var(--accent);
    background: rgba(86, 100, 232, .12);
    border-color: var(--accent);
}
.create-resource-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(86, 100, 232, .13);
    font-size: 24px;
}
.create-resource-title { font-size: 15px; font-weight: 800; }
.create-resource-description { max-width: 220px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.project-card-link { display: block; color: inherit; text-decoration: none; }
.benchmark-card-trigger {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.project-thumbnails {
    position: relative;
    height: 92px;
    padding: 8px;
    background: linear-gradient(145deg, #f2f5fa, #eef1f7);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    align-items: stretch;
}
.project-thumbnails.has-1 { grid-template-columns: 1fr; }
.project-thumbnails.has-2 { grid-template-columns: repeat(2, 1fr); }
.project-thumbnails.has-3 { grid-template-columns: repeat(3, 1fr); }
.project-thumbnails.has-4 { grid-template-columns: repeat(4, 1fr); }
.project-thumb {
    min-width: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 7px;
    background: #ffffff;
    color: #8b96a9;
}
.project-thumb .material-icons { font-size: 21px; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-empty-thumb {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #8b96a9;
    font-size: 12px;
    font-weight: 700;
}
.project-empty-thumb .material-icons { font-size: 27px; }
.project-extra-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
    color: #ffffff;
    background: rgba(23, 32, 51, .78);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(23, 32, 51, .18);
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(5px);
}
.project-card-info { padding: 12px 13px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-card-info > a,
.project-card-info > .benchmark-card-title { color: inherit; text-decoration: none; min-width: 0; flex: 1; }
.benchmark-card-title {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.project-card-info h2 {
    margin: 0 0 8px;
    overflow: hidden;
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-card-meta { display: flex; align-items: center; gap: 9px; min-width: 0; }
.project-card-meta > span,
.project-owner { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }
.project-card-meta > span .material-icons { font-size: 14px; }
.project-owner { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-owner .material-icons { font-size: 14px; }
.project-card-actions { display: flex; align-items: center; gap: 4px; }
.project-edit-btn,
.project-delete-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    opacity: 0;
    transform: translateX(4px);
}
.project-card:hover .project-edit-btn,
.project-edit-btn:focus-visible,
.project-card:hover .project-delete-btn,
.project-delete-btn:focus-visible { opacity: 1; transform: translateX(0); }
.project-rename-form {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 5px;
}
.project-rename-form input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--text);
    background: #ffffff;
    font: inherit;
}
.history-shell {
    min-width: 0;
    display: grid;
    gap: 20px;
}

.history-shell > div {
    min-width: 0;
}

.history-header-tabs {
    min-width: 0;
    width: fit-content;
    display: flex;
    justify-self: center;
    gap: 3px;
    padding: 3px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.history-header-tab {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 11px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.history-header-tab .material-icons {
    font-size: 16px;
}

.history-header-tab.active {
    color: var(--accent);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.benchmark-gallery-modal {
    width: min(1080px, 94vw);
    max-height: 90vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 16px;
    overflow: hidden;
}

.benchmark-gallery-header,
.benchmark-gallery-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.benchmark-gallery-header h2,
.benchmark-gallery-header p {
    margin: 0;
}

.benchmark-gallery-header h2 {
    font-size: clamp(20px, 3vw, 28px);
}

.benchmark-gallery-header p {
    margin-top: 5px;
}

.benchmark-gallery-tabs,
.benchmark-model-tabs {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: color-mix(in srgb, var(--panel2) 90%, var(--accent) 10%);
    border-radius: 12px;
}

.benchmark-gallery-tab,
.benchmark-model-tabs button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.benchmark-gallery-tab .material-icons {
    font-size: 18px;
}

.benchmark-gallery-tab:hover,
.benchmark-model-tabs button:hover {
    color: var(--text);
}

.benchmark-gallery-tab.active,
.benchmark-model-tabs button.active {
    color: var(--accent);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.benchmark-gallery-content,
.benchmark-gallery-pane {
    min-height: 0;
}

.benchmark-gallery-content {
    overflow: hidden;
}

.benchmark-gallery-pane {
    height: 100%;
    overflow: auto;
}

.benchmark-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    align-content: start;
    gap: 12px;
    padding: 2px 4px 8px 2px;
}

.benchmark-gallery-item {
    min-width: 0;
    margin: 0;
    padding: 8px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.benchmark-gallery-image {
    height: 170px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.benchmark-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.benchmark-gallery-item figcaption {
    margin-top: 7px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benchmark-gallery-footer {
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.benchmark-gallery-spinner {
    animation: spin 1s linear infinite;
}

.history-app-header {
    min-height: 56px;
    padding-block: 7px;
}

.history-app-header .logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.history-app-header .title { font-size: 18px; }
.history-app-header .language-select,
.history-app-header .btn,
.history-app-header .mode-switch-link,
.history-app-header #auth-indicator { min-height: 32px; }
.history-app-header .btn { width: 32px; height: 32px; }
.history-app-header #auth-indicator { padding-block: 4px; }

.history-page {
    padding-top: 18px;
    gap: 12px;
}

.history-page .projects-overview { gap: 14px; }

.history-page .project-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.history-page .project-thumbnails {
    height: 78px;
    padding: 6px;
}

.history-page .create-resource-card {
    min-height: 128px;
    gap: 5px;
    padding: 14px;
}

.history-page .create-resource-icon {
    width: 36px;
    height: 36px;
    font-size: 21px;
}

.history-page .project-card-info { padding: 9px 10px 10px; }
.history-page .project-card-info h2 {
    margin-bottom: 5px;
    font-size: 14px;
}
.history-page .project-content { gap: 12px; }
.history-page .history-shell { gap: 12px; }
.history-page .upload-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.history-page .upload-card { gap: 7px; padding: 8px; }
.history-page .upload-preview { height: 84px; }
.history-page .upload-create-card {
    min-height: 300px;
    gap: 0;
    padding: 0;
}

.project-content {
    min-height: calc(100vh - 132px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.page-title-group { min-width: 0; }
.page-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.projects-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 540px);
    align-items: center;
    gap: 14px;
}
.projects-heading > .btn {
    min-height: 38px;
    justify-self: end;
    padding-inline: 15px;
}
.overview-heading-controls {
    width: min(540px, 100%);
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
    padding: 3px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.overview-heading-controls .history-search {
    flex: 0 1 390px;
    width: 390px;
    min-width: 0;
}
.overview-heading-controls .history-limit { flex: 0 0 auto; }
.active-project-heading {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 16px;
}

.active-project-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    grid-column: 1;
}

.active-project-title-row h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-back-btn {
    flex: 0 0 auto;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    color: var(--muted);
    background: #ffffff;
}

.project-back-btn:hover { color: var(--accent); }
.project-back-btn .material-icons { font-size: 18px; }

.project-toolbar {
    display: contents;
}

.active-project-heading .history-display-bar {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
}

.history-display-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.compare-table th strong,
.compare-table th small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-table th small {
    margin-top: 2px;
    color: var(--accent);
    font-size: 7px;
    letter-spacing: .03em;
}

.history-display-label .material-icons {
    font-size: 17px;
}

.history-display-bar {
    width: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px;
    background: transparent;
    border: 0;
    border-radius: 10px;
}

.history-display-controls {
    min-width: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 3px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.history-display-controls .history-filters { display: contents; }

.segmented-control {
    display: inline-flex;
    padding: 2px;
    background: #eef2f7;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.segmented-btn {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.segmented-btn .material-icons {
    font-size: 17px;
}

.segmented-btn.active {
    color: var(--accent);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.history-heading h1 {
    margin: 0;
    font-size: clamp(23px, 2vw, 30px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.history-heading p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.history-filters {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.history-search {
    flex: 0 1 230px;
    width: 230px;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 8px;
    background: #ffffff;
    border: 0;
    border-radius: 6px;
}

.history-search .material-icons {
    color: var(--muted);
    font-size: 17px;
}

.history-search input {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
}

.history-limit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 6px;
    background: #ffffff;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.history-limit .material-icons {
    font-size: 16px;
}

.history-limit select {
    min-height: 26px;
    padding: 0 18px 0 4px;
    border: 0;
    background-color: transparent;
    font-size: 12px;
    font-weight: 800;
}

.history-selection-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 36px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.history-selection-bar .icon-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 4px;
}

.upload-list,
.upload-grid {
    display: grid;
    gap: 14px;
}

.upload-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: stretch;
}

.history-pagination {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 1100;
    width: fit-content;
    max-width: calc(100vw - 28px);
    margin: 0;
    padding: 6px;
    gap: 6px;
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(23, 32, 51, .1);
    backdrop-filter: blur(14px);
    transform: translateX(-50%);
}

.pagination-page {
    padding-bottom: 96px;
}

.history-pagination .btn {
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
}

.history-page-indicator {
    min-width: 118px;
    padding: 0 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    text-align: center;
}

.upload-card {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    padding: 9px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    min-height: 190px;
    min-width: 0;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.upload-create-card {
    min-height: 190px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(145deg, #f8f9ff 0%, var(--accent-soft) 100%);
    border: 1px dashed rgba(86, 100, 232, .55);
    text-align: center;
}

.upload-create-visual {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 18px 14px;
    color: #ffffff;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .2), transparent 32%),
        linear-gradient(145deg, #6c78f1 0%, #4c58d1 100%);
    text-align: center;
}

.upload-create-visual .material-icons {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 17px;
    font-size: 30px;
}

.upload-create-visual strong {
    font-size: 15px;
}

.upload-create-visual small {
    max-width: 120px;
    color: rgba(255, 255, 255, .8);
    font-size: 10px;
    line-height: 1.35;
}

.upload-create-content {
    min-width: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 4px 0;
}

.upload-create-section {
    min-height: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 9px 11px;
}

.upload-add-section {
    flex: 1 1 0;
}

.upload-create-heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--accent);
    text-align: left;
}

.upload-create-heading .create-resource-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-grid;
    place-items: center;
    background: rgba(86, 100, 232, .12);
    border-radius: 9px;
    font-size: 17px;
}

.upload-create-heading strong {
    min-width: 0;
    display: block;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-create-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
}

.upload-create-action {
    min-width: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px;
    color: var(--accent);
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(86, 100, 232, .22);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(45, 54, 118, .04);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.upload-create-action:hover {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 7px 16px rgba(45, 54, 118, .1);
}

.upload-create-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.upload-create-action .material-icons {
    flex: 0 0 auto;
    font-size: 17px;
}
.upload-create-action > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-card:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    box-shadow: 0 10px 24px rgba(23, 32, 51, .08);
}

.upload-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(45, 124, 246, 0.14), var(--shadow);
}

.history-select-btn {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 2;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(22, 32, 39, 0.08);
}

.history-select-btn .material-icons {
    font-size: 18px;
}

.history-select-btn.selected {
    color: var(--accent);
    border-color: #b9d7fb;
    background: #ffffff;
}

.history-delete-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #c33f4d;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(195, 63, 77, .24);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(22, 32, 39, .08);
    cursor: pointer;
}

.history-delete-btn .material-icons {
    font-size: 17px;
}

.history-delete-btn:hover {
    color: #ffffff;
    background: #c33f4d;
    border-color: #c33f4d;
}

.upload-preview {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    height: 100%;
    min-height: 170px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.preview-pair {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 3px;
    padding: 3px;
}

.preview-pair img,
.upload-card img {
    width: auto !important;
    height: auto !important;
    max-width: 106px !important;
    max-height: 88px !important;
    object-fit: contain !important;
    border-radius: 6px;
    background: #ffffff;
    cursor: zoom-in;
}

.upload-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 30px 4px 2px 2px;
}

.upload-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.upload-title-row > div {
    min-width: 0;
    flex: 1 1 0;
}

.upload-title-row .status-pill {
    min-width: 0;
    max-width: 55%;
    flex: 0 1 auto;
    align-self: flex-start;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
}

.upload-title-row h2 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.2;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.owner-chip {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 6px;
    color: var(--accent);
    background: rgba(45, 124, 246, 0.08);
    border: 1px solid rgba(45, 124, 246, 0.18);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.owner-chip .material-icons {
    font-size: 14px;
}

.model-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #5b3db5;
    background: rgba(112, 72, 210, 0.08) !important;
    border-color: rgba(112, 72, 210, 0.2) !important;
    font-weight: 700;
}

.model-chip .material-icons { font-size: 14px; }

.upload-title-row p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.upload-meta,
.upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.upload-meta {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.upload-meta > span:not(.mode-badge):not(.owner-chip) {
    min-width: 0;
    max-width: 100%;
    padding: 2px 6px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow-wrap: anywhere;
}

.upload-actions {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    max-width: none;
    padding: 2px 4px 2px 2px;
}

.upload-actions .btn {
    min-height: 28px;
    padding: 4px 7px;
    gap: 4px;
    font-size: 12px;
}

.upload-actions .btn .material-icons {
    font-size: 16px;
}

.upload-actions .compact-secondary {
    width: 30px;
    padding-inline: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--text);
    gap: 0;
    font-size: 0;
}

.upload-actions .compact-secondary .material-icons {
    color: var(--text);
    font-size: 16px;
}

.empty-state {
    min-height: 220px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 28px;
    color: var(--muted);
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.reference-preview {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 3px;
}

.reference-preview img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.empty-state > strong { color: var(--text); font-size: 16px; }
.empty-state > span:not(.material-icons) { max-width: 430px; font-size: 13px; }
.empty-state .empty-state-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 15px;
    font-size: 26px;
}

/* Results journeys */
.journey-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.result-journey-tabs {
    position: sticky;
    top: 74px;
    z-index: 2;
    margin-bottom: 10px;
}

.journey-tab {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.journey-tab.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 8px 18px rgba(47, 128, 237, 0.14);
}

.journey-swatch {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.journey-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.journey-summary-main,
.journey-order {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.journey-summary-main {
    color: var(--muted);
    font-size: 13px;
}

.journey-summary-main strong {
    color: var(--text);
}

.journey-summary-main span {
    padding: 4px 8px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.journey-reading-value {
    color: var(--text);
    font-size: 18px;
    line-height: 1;
}

.journey-node {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent-soft2);
    border: 1px solid #bceee6;
    color: #087a6e;
    font-size: 12px;
    font-weight: 800;
}

.overview-main-col {
    min-width: 0;
}

.overview-primary-panel {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.overview-side-controls,
.overview-primary-panel .result-journey-tabs,
.overview-primary-panel .journey-summary {
    grid-column: 1;
}

.overview-side-controls {
    display: grid;
    gap: 6px;
    padding: 8px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.overview-primary-panel .result-journey-tabs {
    position: static;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.overview-primary-panel .journey-tab {
    justify-content: flex-start;
    min-width: 0;
}

.overview-primary-panel .journey-summary {
    margin-bottom: 0;
}

.overview-primary-panel .journey-summary-main,
.overview-primary-panel .journey-order {
    align-items: flex-start;
    flex-direction: column;
}

.overview-primary-panel .journey-order {
    flex-direction: row;
}

.overview-loading,
.overview-stage-frame {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-height: 520px;
}

.overview-stage-frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overview-stage {
    max-height: 560px;
}

.overview-map-stack {
    display: none !important;
}

svg text {
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.cluster-text-label {
    font-size: 18px;
}

.cluster-id-label {
    font-size: 20px;
}

.cluster-accordion {
    display: grid;
    gap: 8px;
    margin-bottom: 32px;
}

.cluster-item {
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.cluster-item summary {
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

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

.cluster-item summary::after {
    content: "expand_more";
    font-family: "Material Icons";
    color: var(--muted);
}

.cluster-item[open] summary::after {
    content: "expand_less";
}

.cluster-summary-words {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cluster-summary-score {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: #1559b7;
    font-size: 12px;
    white-space: nowrap;
}

.cluster-item > div {
    padding: 0 14px 14px;
}

.report-sections {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 18px;
    margin: 0 0 28px;
}

.report-side-controls {
    position: sticky;
    top: 150px;
    grid-column: 1;
    grid-row: 1 / span 8;
    align-self: start;
}

.report-sections > .report-section {
    grid-column: 2;
}

.result-tabs {
    position: sticky;
    top: 74px;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0 0 16px;
    padding: 6px;
    background: rgba(247, 251, 255, 0.94);
    border: 1px solid var(--border);
    border-radius: 12px;
    backdrop-filter: blur(12px);
}

.result-tab-group,
.result-action-group {
    display: flex;
    gap: 6px;
    min-width: 0;
    padding: 4px;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid rgba(219, 231, 243, 0.82);
    border-radius: 9px;
}

.result-action-group {
    justify-content: flex-end;
}

.result-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
    padding: 6px;
    background: rgba(247, 251, 255, 0.94);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.result-tab {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    white-space: nowrap;
    color: var(--muted);
    background: transparent;
    border-color: transparent;
    border-radius: 9px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.result-tab .material-icons {
    font-size: 18px;
}

.result-tab:disabled,
.result-tab.disabled {
    cursor: not-allowed;
    color: #9aa8b4;
    background: #eef2f5;
    border-color: #d7e0e7;
    box-shadow: none;
    opacity: 0.65;
}

.result-tab:hover,
.result-tab.active {
    color: var(--accent);
    background: #ffffff;
    border-color: rgba(47, 128, 237, 0.22);
    box-shadow: 0 6px 14px rgba(47, 128, 237, 0.1);
}

.result-tab:disabled:hover,
.result-tab.disabled:hover {
    color: #9aa8b4;
    background: #eef2f5;
    border-color: #d7e0e7;
    box-shadow: none;
}

.clickable-result-image {
    cursor: zoom-in;
}

.image-zoom-modal {
    display: grid;
    gap: 12px;
    width: min(1100px, 94vw);
    max-height: 92vh;
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(22, 32, 39, 0.28);
}

.image-zoom-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
}

.image-zoom-frame img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.image-zoom-frame svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.video-preview-modal {
    display: grid;
    gap: 12px;
    width: min(920px, 94vw);
    max-height: 92vh;
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(22, 32, 39, 0.28);
}

.video-preview-frame {
    display: grid;
    place-items: center;
    min-height: 320px;
    overflow: hidden;
    background: #000000;
    border-radius: 8px;
}

.video-preview-frame video {
    width: 100%;
    max-height: 74vh;
    outline: none;
}

.report-section {
    padding: 16px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.report-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.report-section-title h3 {
    margin: 0;
    font-size: 18px;
}

.report-section-title p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.report-step {
    display: inline-grid;
    min-width: 44px;
    height: 28px;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(45, 124, 246, 0.2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.report-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.report-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: #ffffff;
}

.report-table.compact {
    min-width: 420px;
}

.report-table th,
.report-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 13px;
}

.report-table th {
    color: #ffffff;
    background: var(--accent);
    font-weight: 800;
}

.report-table td:not(:first-child),
.report-table th:not(:first-child) {
    text-align: center;
}

.report-table tbody tr:nth-child(even) {
    background: #f8fbff;
}

.report-total-row td {
    background: #dff5ec !important;
    font-weight: 800;
}

.report-section-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.report-mini-visual {
    display: grid;
    gap: 8px;
}

.report-mini-frame {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.report-mini-frame > div {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.result-upload-caption {
    width: 100%;
    max-width: 100%;
    padding: 2px 6px 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-mini-frame > .result-upload-caption {
    position: static;
    display: block;
}

.color-metrics-table {
    align-self: stretch;
}

.color-metrics-table .report-table th,
.color-metrics-table .report-table td {
    text-align: center;
    vertical-align: middle;
}

.color-table-swatch {
    width: 26px;
    height: 26px;
    display: inline-block;
    border: 2px solid #ffffff;
    border-radius: 7px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
}

.report-mini-frame img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
}

.report-mini-frame svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.report-aoi-outline {
    fill: transparent;
    stroke: rgba(3, 13, 24, .82);
    stroke-width: 3;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.report-aoi-poly {
    fill: rgba(0, 190, 255, .24);
    stroke: #00bfff;
    stroke-width: 1.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.compare-saliency-mode .compare-aoi-layer polygon {
    stroke: #000000;
}

.results-saliency-mode .report-aoi-outline,
.results-saliency-mode .report-aoi-poly {
    stroke: #000000;
}

.report-aoi-label-circle {
    fill: #071522;
    stroke: #ffffff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.report-aoi-label-text {
    fill: #ffffff;
    stroke: #071522;
    stroke-width: 2px;
    font-size: 16px;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: central;
}

.result-canvas-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(47, 128, 237, .22);
    border-radius: 11px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .13);
    backdrop-filter: blur(8px);
}

.canvas-mode-options {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background: #edf3f9;
    border: 1px solid #dce7f2;
    border-radius: 8px;
}

.canvas-mode-option {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 9px;
    color: #526174;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.canvas-mode-option .material-icons {
    font-size: 16px;
}

.canvas-mode-option:hover:not(:disabled) {
    color: var(--accent);
    background: rgba(255, 255, 255, .72);
}

.canvas-mode-option.active {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 3px 8px rgba(47, 128, 237, .24);
}

.canvas-mode-option:disabled {
    color: #9aa8b4;
    cursor: not-allowed;
    opacity: .55;
}

.canvas-aoi-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    color: #42526a;
    background: #ffffff;
    border: 1px solid #cbd8e6;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.canvas-aoi-toggle.active {
    color: #06766c;
    background: rgba(18, 165, 148, .14);
    border-color: rgba(18, 165, 148, .42);
    box-shadow: 0 3px 8px rgba(18, 165, 148, .12);
}

.canvas-aoi-toggle .material-icons {
    font-size: 17px;
}

.results-page .overview-stage svg,
.results-page .report-mini-frame svg,
.image-zoom-frame svg {
    display: block;
    overflow: visible;
}

.report-name-cell { max-width: 190px; }
.report-name-cell > span { vertical-align: middle; }

.reading-table th:nth-child(2),
.reading-table td:nth-child(2) {
    text-align: left;
}

.reading-table .report-name-cell {
    white-space: nowrap;
}

.aoi-letter-chip {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    margin-right: 5px;
    color: #ffffff;
    background: #071522;
    border: 2px solid #00bfff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
}

.report-name-text {
    display: inline-block;
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.size-chart {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.size-chart-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.size-chart-label {
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.size-chart-label .aoi-letter-chip {
    flex: 0 0 auto;
}

.size-chart-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.size-chart-track {
    position: relative;
    min-height: 28px;
    overflow: hidden;
    background: #f4f7fb;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.size-chart-bar {
    position: absolute;
    inset: 0 auto 0 0;
    min-width: 6px;
    background: #ffc000;
    border-radius: inherit;
}

.size-chart-track span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding: 0 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.size-chart-total {
    display: grid;
    grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding-top: 10px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 800;
}

.size-chart-total-value {
    justify-self: stretch;
    padding-right: 10px;
    color: var(--text);
    text-align: right;
}

.color-chart {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.color-chart-toolbar {
    display: inline-flex;
    width: fit-content;
    gap: 4px;
    padding: 4px;
    background: #eef6ff;
    border: 1px solid #cfe6ff;
    border-radius: 999px;
}

.color-chart-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.28fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.color-chart-label {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.color-chart-swatch {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(22, 32, 39, 0.18);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.color-chart-label strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-chart-bars {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.color-chart-track {
    position: relative;
    min-height: 26px;
    overflow: hidden;
    background: #f4f7fb;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.color-chart-bar {
    position: absolute;
    inset: 0 auto 0 0;
    min-width: 3px;
    background: #2f80ed;
    border-radius: inherit;
}

.color-chart-track.size .color-chart-bar {
    background: #6b7280;
}

.color-chart-track.score .color-chart-bar {
    box-shadow: inset 0 0 0 1px rgba(22, 32, 39, 0.16);
}

.color-chart-track span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 26px;
    padding: 0 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

.report-journey-path {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.reading-total-bubble.good,
.reading-ring.good {
    background: #00df76;
}

.reading-total-bubble.medium,
.reading-ring.medium {
    background: #fff36d;
}

.reading-total-bubble.slow,
.reading-ring.slow {
    background: #ffb347;
}

.reading-total-bubble.critical,
.reading-ring.critical {
    background: #ff6b6b;
}

.reading-total-row td {
    background: #eef5fb !important;
    border-top: 2px solid var(--border);
    font-weight: 850;
    text-align: center !important;
}

.reading-total-row .reading-total-cell {
    text-align: right !important;
}

.reading-total-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 10px;
    color: var(--text);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(22, 32, 39, .12);
}

.reading-total-bubble > span {
    white-space: nowrap;
}

.reading-total-bubble small {
    font-size: 10px;
    font-weight: 750;
}

.reading-time-legend {
    display: grid;
    gap: 3px;
    padding: 0 3px;
}

.reading-time-gradient {
    height: 9px;
    background: linear-gradient(90deg, #00df76 0%, #9ce77a 20%, #fff36d 40%, #ffb347 68%, #ff6b6b 100%);
    border: 1px solid rgba(22, 32, 39, .13);
    border-radius: 999px;
}

.reading-time-legend-labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
}

.reading-time-legend-labels span:nth-child(2),
.reading-time-legend-labels span:nth-child(3) { text-align: center; }
.reading-time-legend-labels span:last-child { text-align: right; }

.video-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.report-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.report-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
}

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

.metric-kpi {
    display: grid;
    gap: 4px;
    padding: 10px;
    background: #f8fbff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.metric-kpi span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.metric-kpi strong {
    color: var(--text);
    font-size: 22px;
}

.video-report {
    gap: 18px;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
}

.video-report .report-side-controls {
    display: grid;
    grid-template-columns: 1fr;
}

.video-report .compare-side-btn {
    min-height: 42px;
    justify-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 7px;
    padding: 7px 8px;
    text-align: left;
    font-size: 11px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.video-aoi-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.video-aoi-tab {
    min-height: 34px;
    padding: 7px 12px;
    color: var(--text);
    background: #eef6ff;
    border: 1px solid #cfe6ff;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.video-aoi-tab.active {
    color: #064e3b;
    background: #c9f7dc;
    border-color: #66d99b;
}

.video-frame-mode {
    display: inline-flex;
    width: fit-content;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    background: #eef6ff;
    border: 1px solid #cfe6ff;
    border-radius: 999px;
}

.video-frame-mode-btn {
    min-height: 30px;
    padding: 5px 12px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.video-frame-mode-btn.active {
    color: #064e3b;
    background: #c9f7dc;
}

.video-slide-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.video-slide-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-size: 18px;
}

.video-slide-title strong {
    color: var(--text);
}

.video-slide-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(240px, 0.8fr);
    gap: 14px;
    align-items: stretch;
}

/* Compact video result visual: prioritize the curve and result table. */
.results-page .video-report .video-slide-card {
    gap: 8px;
    padding: 10px;
}

.results-page .video-report {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 8px;
}

.results-page .video-report > .report-section {
    grid-column: 1;
}

.results-page .video-metric-section {
    padding: 8px;
    background: #f1f6fb;
}

.video-mode-slider.canvas-mode-slider {
    position: relative;
    width: 46px;
    height: 20px;
    min-height: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    padding: 1px;
    overflow: hidden;
    color: #526174;
    background: #e8eef5;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.video-mode-slider.canvas-mode-slider > span:not(.canvas-mode-thumb) {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
}

.video-mode-slider.canvas-mode-slider > span.active {
    color: #ffffff;
}

.video-mode-slider .canvas-mode-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    width: 19px;
    height: 16px;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(37, 99, 235, .3);
    transition: transform .2s ease;
}

.video-mode-slider {
    width: 46px;
    grid-template-columns: repeat(2, 1fr);
}

.video-mode-slider.mode-overlay .canvas-mode-thumb {
    transform: translateX(20px);
}

.results-page .video-report .video-slide-layout {
    grid-template-columns:
        minmax(420px, 1.35fr)
        minmax(330px, .75fr);
    gap: 8px;
    align-items: start;
}

.results-page .video-report .video-graph-panel,
.results-page .video-report .video-frame-panel,
.results-page .video-report .video-metrics-panel {
    padding: 8px;
    background: #ffffff;
}

.results-page .video-report .video-chart {
    height: 130px;
    margin-top: 6px;
}

.results-page .video-report .video-frame-panel {
    gap: 6px;
}

.results-page .video-report .video-frame-panel img {
    max-height: 180px;
}

.results-page .video-report .video-frame-empty {
    min-height: 125px;
}

.results-page .video-report .video-metrics-panel {
    grid-column: auto;
    align-self: stretch;
    gap: 7px;
}

.results-page .video-report .video-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
}

.results-page .video-report .video-kpis .metric-kpi {
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    padding: 5px 7px;
    border-radius: 10px;
    text-align: center;
}

.results-page .video-report .video-kpis .metric-kpi span {
    font-size: 7px;
    line-height: 1.1;
}

.results-page .video-report .video-kpis .metric-kpi strong {
    font-size: 11px;
    line-height: 1.1;
}

.video-chart-heading-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.results-page .video-report .video-chart-header,
.results-page .video-report .video-frame-title,
.results-page .video-report .video-chart-axis,
.results-page .video-report .video-best-frame-meta strong,
.results-page .video-report .video-best-frame-meta span {
    font-size: var(--results-metric-text-size);
    line-height: var(--results-metric-line-height);
}

.results-page .video-report .report-table {
    min-width: 360px;
}

.results-page .video-report .report-table th,
.results-page .video-report .report-table td {
    padding: 4px 5px;
    font-size: 11px;
}

.results-page .video-report .video-transposed-table {
    min-width: 0;
    table-layout: fixed;
}

.results-page .video-report .video-transposed-table th,
.results-page .video-report .video-transposed-table td {
    overflow-wrap: anywhere;
    white-space: normal;
}

.results-page .video-report .video-transposed-table thead th:first-child,
.results-page .video-report .video-transposed-table tbody th {
    width: 68px;
}

.results-page .video-report .video-transposed-table tbody th {
    padding: 4px 5px;
    color: var(--text);
    background: #f1f6fb;
    border-bottom: 1px solid var(--border);
    font-size: 9px;
    font-weight: 800;
    text-align: left;
}

.results-page .video-report .video-best-frames {
    gap: 6px;
    margin-top: 7px;
}

.results-page .video-report .video-best-frame-card {
    gap: 5px;
    overflow: hidden;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(31, 66, 104, 0.08);
}

.results-page .video-report .video-best-frame-card.rank-0 {
    border-color: rgba(0, 154, 82, 0.42);
}

.results-page .video-report .video-best-frame-card.rank-1 {
    border-color: rgba(217, 119, 6, 0.38);
}

.results-page .video-report .video-best-frame-card.rank-2 {
    border-color: rgba(220, 38, 38, 0.3);
}

.results-page .video-report .video-best-frame-card img {
    height: 78px;
}

.results-page .video-report .video-best-frame-meta {
    text-align: center;
}

.video-graph-panel,
.video-frame-panel,
.video-metrics-panel {
    min-width: 0;
    padding: 12px;
    background: #f8fbff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.video-metrics-panel {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
}

.video-chart-header,
.video-frame-title,
.video-chart-axis {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.video-chart-header strong {
    color: var(--text);
}

.video-chart {
    position: relative;
    height: 260px;
    margin-top: 10px;
    overflow: hidden;
    background:
        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
        #ffffff;
    background-size: 20% 100%, 100% 25%;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.video-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: calc(100% - 24px);
}

.video-chart-area {
    fill: rgba(0, 50, 255, 0.18);
}

.video-chart-line {
    fill: none;
    stroke: #2563eb;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.05;
}

.video-best-window {
    position: absolute;
    top: 0;
    bottom: 24px;
    z-index: 0;
    background: rgba(0, 223, 118, 0.26);
    border-inline: 2px solid rgba(0, 154, 82, 0.5);
}

.video-best-window.rank-1 {
    background: rgba(255, 192, 0, 0.18);
    border-inline-color: rgba(217, 119, 6, 0.42);
}

.video-best-window.rank-2 {
    background: rgba(255, 107, 107, 0.16);
    border-inline-color: rgba(220, 38, 38, 0.36);
}

.video-chart-axis {
    position: absolute;
    right: 10px;
    bottom: 6px;
    left: 10px;
}

.video-frame-panel {
    display: grid;
    align-content: start;
    gap: 10px;
}

.video-best-frames {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.video-best-frame-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.video-best-frame-card img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: #f8fbff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.video-best-frame-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.video-best-frame-meta strong {
    color: var(--text);
    font-size: 12px;
}

.video-best-frame-meta span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.video-frame-panel img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.video-frame-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    color: var(--muted);
    background: #ffffff;
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.video-frame-empty.small {
    min-height: 120px;
    font-size: 12px;
}

.video-kpis .metric-kpi {
    background: #ffffff;
}

.video-page {
    max-width: 1800px;
    height: calc(100vh - 68px);
    margin: 0 auto;
    padding: 10px 12px;
    overflow: hidden;
}

.video-workspace-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
    border-radius: 14px;
}

.video-upload-header {
    align-items: flex-start;
    margin-bottom: 0;
    padding: 0 3px;
}

.video-upload-header .analysis-title-line h2 { font-size: 17px; }

.video-upload-header p {
    margin: 2px 0 0;
    font-size: 11px;
}

.video-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    align-items: stretch;
}

.video-config-column,
.video-stage-column {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: 8px;
}

.video-config-column {
    grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
    align-content: stretch;
}

.video-editor-shell {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: stretch;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: #f7f9fa;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(23, 32, 51, 0.10);
}

.video-editor-shell.is-empty {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

.video-config-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    background: linear-gradient(180deg, #ffffff, var(--panel2));
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 5px 16px rgba(23, 32, 51, 0.05);
}

.video-source-card {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.72fr);
    align-items: center;
}

.video-settings-card {
    grid-template-columns: repeat(3, minmax(115px, 1fr)) minmax(160px, auto);
    align-items: end;
}

.video-config-card label {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
}

.video-config-card .visual-card-title {
    gap: 7px;
    font-size: 14px;
}

.video-config-card .visual-card-title .material-icons {
    font-size: 17px;
}

.video-config-card select,
.video-config-card input,
.video-config-card .selected-content-type > span,
.video-config-card .selected-content-type > .btn,
.video-compact-file {
    min-height: 32px;
}

.video-config-card .selected-content-type {
    gap: 5px;
}

.video-file-drop {
    position: relative;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 48px;
    gap: 7px !important;
    padding: 6px 9px;
    overflow: hidden;
    text-align: left;
    color: var(--accent);
    background: #ffffff;
    border: 1px dashed #b9d7fb;
    border-radius: 12px;
    cursor: pointer;
}

.video-file-drop:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.video-file-drop.needs-type {
    color: var(--muted);
    border-color: var(--border);
}

.video-file-drop.needs-type:hover {
    background: #f7f9fc;
    border-color: var(--accent);
    color: var(--accent);
}

.video-file-drop .material-icons {
    font-size: 24px;
}

.video-file-drop strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-file-drop small {
    color: var(--muted);
    font-weight: 650;
    white-space: nowrap;
}

.benchmark-meta-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.benchmark-meta-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.benchmark-meta-toolbar p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.benchmark-model-tabs {
    flex: 0 0 auto;
}

.benchmark-model-tabs button {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
}

.benchmark-meta-table-wrap {
    min-height: 0;
    overflow: auto;
    border-radius: 12px;
}

.benchmark-meta-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0 5px;
    color: var(--text);
}

.benchmark-meta-table th,
.benchmark-meta-table td {
    padding: 11px 14px;
    border: 0;
    text-align: left;
    vertical-align: middle;
}

.benchmark-meta-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--muted);
    background: var(--panel);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.benchmark-meta-table tbody th,
.benchmark-meta-table tbody td {
    background: color-mix(in srgb, var(--panel2) 88%, transparent);
}

.benchmark-meta-table tbody th {
    max-width: 250px;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benchmark-meta-table tbody tr > :first-child {
    border-radius: 10px 0 0 10px;
}

.benchmark-meta-table tbody tr > :last-child {
    border-radius: 0 10px 10px 0;
}

.benchmark-meta-table td strong,
.benchmark-meta-table td small {
    display: block;
}

.benchmark-meta-table td strong {
    color: var(--text);
    font-size: 13px;
}

.benchmark-meta-table td small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.video-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.video-compact-file {
    display: inline-flex !important;
    justify-content: center;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-hidden-file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
}

.video-upload-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    color: var(--ok);
    background: #e8f6ef;
    border: 1px solid rgba(35, 139, 99, 0.18);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.video-upload-status .material-icons {
    font-size: 18px;
}

.video-stage-card,
.annotation-side,
.annotation-toolbox,
.annotation-list {
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.video-stage-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #f7f9fa;
    border: 0;
    border-radius: 0;
}

.video-editor-heading {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 7px 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f7f8ff 68%, #eefaf8 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 0 3px 0 var(--accent);
}

.video-editor-heading h2,
.video-editor-heading p {
    margin: 0;
}

.video-editor-heading h2 {
    margin-top: 1px;
    font-size: 17px;
}

.video-editor-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.video-editor-summary {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

.video-editor-summary span {
    padding: 6px 9px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.video-editor-summary strong { color: var(--text); }

.video-upload-header {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(260px, 1.4fr) minmax(80px, 0.5fr);
    align-items: center;
    gap: 8px;
}

.video-project-heading {
    min-width: 0;
    grid-column: 2;
    justify-self: center;
    width: min(620px, 100%);
}

.video-project-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.video-project-title-row h1 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-align: center;
    font-size: 18px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-project-edit-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.video-project-edit-row input {
    flex: 1;
    min-width: 180px;
    min-height: 32px;
    font-size: 15px;
    font-weight: 750;
}

.visual-editor-toolbar.video-editor-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 48px;
    gap: 4px 8px;
    padding: 5px 7px;
    border-radius: 0;
}

.video-editor-toolbar > .visual-editor-tool-group {
    min-width: 0;
    flex-wrap: wrap;
}

.video-editor-toolbar {
    position: relative;
    z-index: 100;
    overflow: visible;
    isolation: isolate;
}

.video-editor-toolbar .visual-polygon-tool,
.video-editor-toolbar .visual-new-aoi-popover {
    pointer-events: auto;
}

.video-frame-navigation,
.video-stage {
    position: relative;
    z-index: 0;
}

.video-editor-toolbar .visual-tool-button {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 10px;
}

.video-editor-toolbar .visual-tool-button .material-icons {
    font-size: 18px;
}

.video-editor-toolbar .visual-editor-status {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 18px;
    justify-content: flex-start;
    padding: 0 7px;
}

.video-editor-toolbar .visual-editor-right {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: wrap;
}

.visual-new-aoi-inline.video-new-aoi-inline {
    grid-template-columns: minmax(150px, 0.55fr) minmax(280px, 1.45fr) auto;
    align-items: end;
    gap: 12px;
    padding: 10px 12px;
}

.visual-new-aoi-inline-fields.video-new-aoi-inline-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.video-new-aoi-inline .visual-new-aoi-inline-heading {
    align-self: center;
    min-height: 34px;
}

.video-new-aoi-inline .visual-new-aoi-inline-heading small {
    display: block;
}

.video-new-aoi-inline .visual-new-aoi-inline-fields input,
.video-new-aoi-inline .visual-new-aoi-inline-fields select {
    min-height: 34px;
    padding: 5px 7px;
    font-size: 11px;
}

.video-new-aoi-inline .visual-create-gate-actions {
    flex-wrap: nowrap;
    gap: 4px;
}

.video-new-aoi-inline .visual-create-gate-actions .btn {
    min-height: 34px;
    padding: 5px 9px;
    white-space: nowrap;
}

.video-empty-preview {
    display: grid;
    min-height: 280px;
    place-items: center;
    align-content: center;
    gap: 7px;
    color: var(--muted);
    text-align: center;
    background: #f8fbff;
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.video-empty-preview .material-icons {
    color: var(--accent);
    font-size: 38px;
}

.video-empty-preview strong {
    color: var(--text);
}

.video-empty-preview small {
    font-weight: 700;
}

.video-stage-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.video-frame-navigation {
    flex-wrap: nowrap;
    padding: 5px 7px;
    background: #ffffff;
    border-bottom: 1px solid #cbd4d9;
}

.frame-counter {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    color: var(--muted);
    background: #f8fbff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: 800;
}

.frame-counter strong {
    color: var(--text);
}

.fps-field {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.fps-field input {
    width: 64px;
    min-height: 30px;
}

.video-stage {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background-color: #d9dee2;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.22) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.22) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.22) 75%);
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-size: 12px 12px;
    border: 0;
    border-radius: 0;
}

.video-frame-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    transform-origin: 0 0;
}

.video-zoom-space {
    position: relative;
    flex: 0 0 auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.video-zoom-space.is-zoomable {
    max-width: none;
    max-height: none;
}

.video-frame-wrap.is-zoomable {
    max-width: none;
    max-height: none;
}

.video-frame-wrap.is-zoomable video {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.video-stage video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.annotation-overlay {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.annotation-overlay {
    z-index: 2;
    cursor: crosshair;
}

.annotation-shape {
    fill: rgba(0, 168, 255, 0.22);
    stroke: #000000;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    pointer-events: visiblePainted;
    cursor: move;
}

.annotation-shape-outline {
    fill: none;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.annotation-shape-outline-dark {
    stroke: #0033ff;
    stroke-width: 6;
}

.annotation-shape-outline-light {
    stroke: #000000;
    stroke-width: 4;
}

g.selected .annotation-shape {
    fill: rgba(255, 0, 92, 0.30) !important;
    stroke: #000000 !important;
    stroke-width: 3;
}

g.selected .annotation-shape-outline-dark,
g.marked .annotation-shape-outline-dark {
    stroke-width: 7;
}

g.selected .annotation-shape-outline-light,
g.marked .annotation-shape-outline-light {
    stroke-width: 5;
}

g.marked .annotation-shape {
    fill: rgba(255, 176, 0, 0.32) !important;
    stroke: #000000 !important;
    stroke-width: 3;
    stroke-dasharray: none;
}

.video-auto-aoi-candidate-outline {
    fill: none;
    stroke: #0033ff;
    stroke-width: 5;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.video-auto-aoi-candidate-group.is-selected .video-auto-aoi-candidate-outline {
    stroke-width: 6;
    stroke-dasharray: none;
}

.video-auto-aoi-candidate {
    fill: rgba(0, 210, 180, 0.20);
    stroke: #000000;
    stroke-width: 2.5;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
    pointer-events: visiblePainted;
    cursor: pointer;
}

.video-auto-aoi-candidate:hover {
    fill: rgba(0, 210, 180, 0.34);
}

.video-auto-aoi-candidate.is-selected {
    fill: rgba(255, 176, 0, 0.58);
    stroke: #000000;
    stroke-width: 2.5;
    stroke-dasharray: none;
}

.annotation-overlay.auto-aoi-active {
    cursor: pointer;
}

.annotation-overlay.auto-aoi-active .annotation-aoi-group * {
    pointer-events: none !important;
}

.annotation-point-handle {
    pointer-events: auto;
    cursor: grab;
}

.annotation-point-halo { fill: rgba(255, 255, 255, 0.96); }
.annotation-point-core { fill: rgba(255, 0, 92, 1); }
.annotation-point-active { fill: rgba(255, 214, 0, 1); }

.annotation-virtual-handle {
    cursor: grab;
}

.annotation-virtual-halo {
    fill: rgba(17, 24, 39, 0.72);
    pointer-events: none;
}

.annotation-virtual-core {
    fill: rgba(255, 255, 255, 0.88);
    stroke: rgba(255, 46, 99, 1);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.annotation-virtual-plus {
    stroke: rgba(255, 46, 99, 1);
    stroke-width: 1.5;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.annotation-virtual-handle:hover .annotation-virtual-halo { r: 9px; }
.annotation-virtual-handle:hover .annotation-virtual-core {
    r: 7px;
    fill: #ffffff;
    stroke-width: 3;
}

.video-aoi-selection-marquee {
    fill: rgba(47, 128, 237, 0.14);
    stroke: rgba(47, 128, 237, 0.95);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.video-canvas-hint {
    min-height: 22px;
    padding: 3px 7px;
    font-size: 9px;
    border-top: 1px solid #cbd4d9;
}

.annotation-draft-dim {
    fill: rgba(16, 24, 32, 0.22);
    pointer-events: none;
}

.annotation-draft {
    pointer-events: none;
}

.annotation-draft-fill {
    fill: rgba(0, 210, 118, 0.18);
    stroke: none;
}

.annotation-draft-line {
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 6 5;
    vector-effect: non-scaling-stroke;
}

.annotation-draft-line-outline {
    fill: none;
    stroke-dasharray: 6 5;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.annotation-draft-line-outline-dark {
    stroke: #0033ff;
    stroke-width: 6;
}

.annotation-draft-line-outline-light {
    stroke: #000000;
    stroke-width: 4;
}

.annotation-draft-line.is-solid,
.annotation-draft-line-outline.is-solid {
    stroke-dasharray: none;
}

.annotation-draft-point {
    fill: rgba(0, 255, 128, 1);
    stroke: none;
}

.annotation-draft-hover-core {
    fill: rgba(0, 210, 118, 1);
    stroke: none;
}

.annotation-draft-hover {
    fill: rgba(255, 255, 255, 0.96);
    stroke: none;
}

.annotation-draft-start-target {
    fill: rgba(0, 210, 118, 0.30);
    stroke: #ffffff;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.video-aoi-bulkbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 9px 10px;
    background: var(--panel2);
    border-bottom: 1px solid var(--border);
}

.annotation-draft-start {
    fill: rgba(0, 210, 118, 1);
    stroke: none;
}

.video-aoi-bulkbar .btn {
    min-width: 0;
    min-height: 34px;
    padding: 5px 7px;
    font-size: 10px;
}

.video-aoi-bulkbar .material-icons {
    font-size: 16px;
}

.video-aoi-check {
    display: grid;
    place-items: center;
}

.video-aoi-check input {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
}

.video-aoi-name-input {
    width: 100%;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 12px;
    font-weight: 800;
}

.frame-slider {
    flex: 1 1 180px;
    width: auto;
    min-width: 100px;
    min-height: 30px;
    margin: 0 5px;
    padding: 0;
    accent-color: var(--accent);
}

.video-frame-zoom {
    flex: 0 0 auto;
}

.video-frame-zoom .visual-tool-button,
.video-frame-zoom .visual-zoom-value {
    min-height: 28px;
}

.annotation-side {
    display: grid;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #f8fbff;
    border: 0;
    border-left: 1px solid #cfd8de;
    border-radius: 0;
}

.annotation-toolbox {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.annotation-actions-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.annotation-draft-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.annotation-draft-actions .btn {
    min-width: 0;
    padding: 6px 7px;
    font-size: 11px;
}

.annotation-toolbox label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.annotation-list {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: 0;
    min-height: 0;
    padding: 0;
    overflow: auto;
    background: #f8fbff;
    border: 0;
    border-radius: 0;
}

.video-aoi-panel-header {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.video-aoi-panel-header h3 {
    margin: 2px 0 0;
    font-size: 16px;
}

.video-aoi-count {
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--accent);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.video-aoi-panel-help {
    margin: 0;
    padding: 9px 12px;
    color: var(--muted);
    background: #f4f6f7;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
}

.video-aoi-panel-help.is-merge {
    color: #8a5a00;
    background: #fff8df;
}

.annotation-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.annotation-list-title span {
    color: var(--accent);
}

.annotation-item {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(90px, 0.85fr) 28px;
    gap: 5px;
    align-items: center;
    padding: 6px 7px;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e5eaed;
    border-left: 3px solid transparent;
    border-radius: 0;
    cursor: pointer;
}

.annotation-item.merge-mode {
    grid-template-columns: 18px minmax(80px, 1fr) minmax(80px, 0.85fr) 28px;
}

.video-aoi-item-main { min-width: 0; }

.annotation-item .aoi-inline-meta {
    grid-column: 2;
}

.annotation-item.merge-mode .aoi-inline-meta {
    grid-column: 3;
}

.annotation-item > .icon-only {
    grid-row: 1;
    grid-column: 3;
}

.annotation-item.merge-mode > .icon-only {
    grid-column: 4;
}

.annotation-item.active {
    border-color: #e5eaed;
    border-left: 3px solid #ff005c;
    background: #fff0f4;
    box-shadow: none;
}

.annotation-item.marked {
    border-color: #e5eaed;
    border-left: 3px solid #ffb000;
    background: #fff8df;
    box-shadow: none;
}

.annotation-item.disabled {
    opacity: 0.62;
    cursor: default;
}

.annotation-item strong,
.annotation-item small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.annotation-item small {
    color: var(--muted);
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
}

.icon-only {
    width: 28px;
    min-height: 28px;
    padding: 3px;
}

.annotation-item .icon-only .material-icons {
    font-size: 16px;
}

.annotation-item .aoi-inline-meta {
    gap: 3px;
    margin-top: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
}

.annotation-item .aoi-inline-meta select {
    min-height: 32px;
    padding: 4px 6px;
    font-size: 11px;
}

.video-config-launch {
    min-height: 34px;
    font-size: 13px;
}

@media (max-width: 1420px) {
    .video-workspace-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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

	.video-file-drop {
	    min-height: 48px;
    }
}

@media (max-width: 900px) {
	.video-page {
	    height: auto;
	    min-height: calc(100vh - 68px);
	    overflow: visible;
	}

	.video-workspace-panel {
	    height: auto;
	}
    .video-workspace-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .visual-editor-toolbar.video-editor-toolbar {
        grid-template-columns: 1fr;
    }

	.video-config-column,
	.video-editor-shell {
	    grid-template-columns: minmax(0, 1fr);
	}

	.video-editor-heading {
	    align-items: flex-start;
	    flex-direction: column;
	}

	.video-editor-summary {
	    flex-wrap: wrap;
	}

	.visual-new-aoi-inline.video-new-aoi-inline {
	    grid-template-columns: minmax(0, 1fr);
	    align-items: stretch;
	}

    .video-editor-toolbar .visual-editor-right,
    .video-editor-toolbar .visual-editor-status {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
    }

	.annotation-side {
	    max-height: 56vh;
	    border-top: 1px solid #cfd8de;
	    border-left: 0;
	}

	.video-stage {
	    height: clamp(340px, 54vh, 560px);
	    min-height: 340px;
    }
}

/* Infobulle AOI commune aux tableaux Results et Comparaison. */
.table-aoi-tooltip {
    position: fixed;
    z-index: 12000;
    width: max-content;
    max-width: min(360px, calc(100vw - 20px));
    display: grid;
    gap: 4px;
    padding: 9px 11px;
    color: #ffffff;
    background: rgba(7, 21, 34, .96);
    border: 1px solid rgba(0, 191, 255, .55);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    font-size: 12px;
    line-height: 1.25;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .1s ease, transform .1s ease;
    pointer-events: none;
}

.table-aoi-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.table-aoi-tooltip strong,
.table-aoi-tooltip span {
    overflow-wrap: anywhere;
}

.table-aoi-tooltip strong {
    font-size: 13px;
}

.table-aoi-tooltip span {
    color: #bfe9ff;
    font-size: 11px;
    font-weight: 700;
}

.results-page .report-name-cell[aoi-table-tooltip],
.compare-page [aoi-table-tooltip] {
    cursor: help;
}

/* Lecture : garder un préfixe réellement lisible avant l’ellipse. */
.results-page .reading-report-grid .report-table-wrap {
    overflow: auto;
    overscroll-behavior: contain;
}

.results-page .reading-table {
    min-width: 620px !important;
}

.results-page .reading-table .reading-order-col { width: 12% !important; }
.results-page .reading-table .reading-name-col { width: 38% !important; }
.results-page .reading-table .reading-time-col,
.results-page .reading-table .reading-total-col { width: 25% !important; }

.results-page .reading-table .report-name-text {
    min-width: 14ch;
    max-width: calc(100% - 30px);
}

.empty-state.compact {
    padding: 18px;
    font-size: 13px;
}

.reading-report-grid,
.report-split {
    display: grid;
    grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.reading-ring {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    max-width: 220px;
    color: var(--text);
    border-radius: 50%;
    margin: auto;
    text-align: center;
}

.reading-ring.good,
.reading-ring.medium,
.reading-ring.slow,
.reading-ring.critical {
    background-image: radial-gradient(circle at center, #ffffff 0 54%, transparent 55%);
}

.reading-ring span,
.reading-ring small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.reading-ring strong {
    font-size: 38px;
    line-height: 1;
}

.color-bubble-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
}

.color-bubble {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    box-shadow: var(--shadow);
}

.color-bubble strong {
    font-size: 22px;
}

.color-bubble span {
    font-size: 12px;
    font-weight: 800;
}

.empty-state.compact {
    min-height: 90px;
    padding: 12px;
}

/* Visual analysis */
.visual-page {
    max-width: none;
}

.visual-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.visual-workspace.settings-only {
    grid-template-columns: minmax(0, 1fr);
}

.visual-workspace.settings-only .visual-config-panel {
    position: static;
    max-width: none;
}

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

.visual-step {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
    padding: 10px;
    color: inherit;
    text-align: left;
    font: inherit;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        transform 0.16s ease;
}

.visual-step:not(:disabled):hover {
    border-color: rgba(77, 163, 255, 0.48);
    transform: translateY(-1px);
}

.visual-step:focus-visible {
    outline: 3px solid rgba(77, 163, 255, 0.22);
    outline-offset: 2px;
}

.visual-step:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.visual-step span {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 900;
}

.visual-step strong,
.visual-step small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Génération : espace de travail plat, aligné sur Results et Comparaison. */
body.generation-body,
body.generation-body .generation-page {
    background: #f7f8fb;
}

.generation-page:not(.workspace-index-page) {
    padding-top: 10px;
}

.generation-page .generation-shell.generation-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.generation-workspace-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 8px 10px;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e1e6ef;
}

.generation-workspace-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.generation-workspace-title > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.generation-workspace-title h1,
.generation-workspace-title p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generation-workspace-title h1 {
    color: #17243a;
    font-size: 18px;
    line-height: 1.2;
}

.generation-workspace-title p {
    color: #6a7688;
    font-size: 11px;
}

.generation-workspace-title .page-eyebrow {
    color: #0033ff;
    font-size: 9px;
    letter-spacing: .09em;
}

.generation-workspace-toolbar .generation-back-link {
    display: inline-grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    color: #0033ff;
    background: #edf1ff;
    border: 1px solid rgba(0, 51, 255, .12);
    border-radius: 8px;
}

.generation-workspace-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: #59677b;
    font-size: 11px;
    font-weight: 750;
}

.generation-workspace-meta .material-icons {
    color: #0033ff;
    font-size: 17px;
}

.generation-page .generation-detail {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    min-width: 0;
}

.generation-page .generation-aoi-side {
    --generation-control-height: 40px;
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns:
        minmax(245px, 1.15fr)
        minmax(210px, .9fr)
        minmax(190px, .78fr)
        minmax(150px, .58fr);
    gap: 8px;
    align-items: end;
    min-width: 0;
    padding: 8px 10px;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e1e6ef;
    border-radius: 0;
    box-shadow: none;
}

.generation-page .generation-aoi-side > .generation-control-heading-row {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.generation-page .generation-unified-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.generation-page .generation-unified-heading .generation-back-link {
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    color: #0033ff;
    background: #edf1ff;
    border: 1px solid rgba(0, 51, 255, .12);
    border-radius: 8px;
}

.generation-page .generation-unified-heading .generation-workspace-title {
    flex: 1 1 auto;
}

.generation-page .generation-unified-heading .generation-workspace-title h1 {
    font-size: 14px;
}

.generation-page .generation-unified-heading .generation-workspace-title p {
    font-size: 10px;
}

.generation-page .generation-pane-icon {
    width: 32px;
    height: 32px;
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3 70%, #30d9f8);
    border-radius: 8px;
    box-shadow: 0 5px 13px rgba(0, 51, 255, .18);
}

.generation-page .generation-section-heading strong {
    color: #243248;
    font-size: 13px;
}

.generation-page .generation-section-heading small {
    margin-top: 1px;
    color: #758196;
    font-size: 10px;
}

.generation-page .generation-zone-field {
    grid-column: 2;
    grid-row: 1;
}

.generation-page .generation-aoi-side > .generation-advanced {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    background: #ffffff;
    border-color: #dfe5ee;
    border-radius: 7px;
}

.generation-page .generation-launch-btn {
    grid-column: 4;
    grid-row: 1;
    min-height: var(--generation-control-height);
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3 72%, #30d9f8);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 51, 255, .22);
}

.generation-page .generation-launch-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 19px rgba(0, 51, 255, .27);
}

.generation-page .generation-action-help,
.generation-page .generation-aoi-side > .result-info-bar {
    grid-column: 1 / -1;
    margin: 0;
    text-align: right;
}

.generation-page .generation-preview-wrap {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    place-items: stretch;
    gap: 0;
    min-height: 420px;
    height: min(70vh, 740px);
    padding: 0;
    overflow: auto;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.generation-pane-heading,
.generation-output-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 9px 11px;
    background: #ffffff;
    border-bottom: 1px solid #e1e6ef;
}

.generation-pane-heading > div,
.generation-output-heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.generation-pane-heading > div > .material-icons,
.generation-output-heading > div:first-child > .material-icons {
    color: #0033ff;
    font-size: 20px;
}

.generation-pane-heading > div > span:last-child,
.generation-output-heading > div:first-child > span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.generation-pane-heading strong,
.generation-output-heading strong {
    color: #243248;
    font-size: 13px;
}

.generation-pane-heading small,
.generation-output-heading small {
    overflow: hidden;
    color: #758196;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generation-pane-heading > span:last-child {
    color: #0033ff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.generation-page .generation-image-stage {
    align-self: center;
    justify-self: center;
    margin: 14px;
}

.generation-page .generation-reference-caption {
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 8px 11px;
    border-top: 1px solid #eef1f5;
}

.generation-page .generation-tabs-panel {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0;
    align-self: stretch;
    height: min(70vh, 740px);
    padding: 0;
    overflow: visible;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.generation-output-heading .generation-saliency-toolbar {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    align-items: center;
    gap: 3px;
    height: auto;
}

.generation-output-heading .generation-saliency-toolbar .btn {
    min-height: 30px;
    height: 30px;
    padding: 4px 7px;
    color: #667388;
    background: #f5f7fb;
    border-color: transparent;
    border-radius: 6px;
    box-shadow: none;
}

.generation-output-heading .generation-saliency-toolbar .btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border-color: transparent;
    box-shadow: 0 4px 11px rgba(0, 51, 255, .18);
}

.generation-output-heading .generation-saliency-toolbar .btn.active .material-icons {
    color: #ffffff;
}

.generation-page .generation-sample-tabs {
    padding: 6px 10px;
    background: #fafbfe;
    border-bottom: 1px solid #e1e6ef;
}

.generation-page .generation-sample-tab {
    min-width: 72px;
    padding: 4px 7px;
    background: transparent;
    border-color: transparent;
    border-radius: 6px;
}

.generation-page .generation-sample-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border-color: transparent;
    box-shadow: 0 4px 11px rgba(0, 51, 255, .16);
}

.generation-page .generation-sample-tab.active small {
    color: rgba(255, 255, 255, .78);
}

.generation-page .generation-tab-content {
    gap: 0;
    padding: 0;
    background: #f7f8fb;
}

.generation-page .generation-generated-frame {
    margin: 10px;
}

.generation-page .generation-comparison-card,
.generation-page .generation-result-summary {
    background: #ffffff;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
}

.generation-page .generation-comparison-card {
    border-bottom: 0;
}

.generation-page .generation-result-empty {
    grid-row: 2 / 4;
    min-height: 0;
    height: 100%;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

@media (max-width: 1180px) {
    .generation-page .generation-aoi-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .generation-page .generation-aoi-side > .generation-control-heading-row {
        grid-column: 1;
        grid-row: 1;
    }

    .generation-page .generation-launch-btn {
        grid-column: 2;
        grid-row: 1;
    }

    .generation-page .generation-zone-field {
        grid-column: 1;
        grid-row: 2;
    }

    .generation-page .generation-aoi-side > .generation-advanced {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 900px) {
    .generation-page .generation-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .generation-page .generation-aoi-side,
    .generation-page .generation-preview-wrap,
    .generation-page .generation-tabs-panel {
        grid-column: 1;
    }

    .generation-page .generation-aoi-side { grid-row: 1; }
    .generation-page .generation-preview-wrap { grid-row: 2; }
    .generation-page .generation-tabs-panel { grid-row: 3; }

    .generation-page .generation-preview-wrap,
    .generation-page .generation-tabs-panel {
        height: min(68vh, 680px);
    }
}

@media (max-width: 620px) {
    .generation-output-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .generation-workspace-meta {
        padding-left: 46px;
    }

    .generation-page .generation-aoi-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .generation-page .generation-aoi-side > .generation-control-heading-row,
    .generation-page .generation-zone-field,
    .generation-page .generation-aoi-side > .generation-advanced,
    .generation-page .generation-launch-btn {
        grid-column: 1;
    }

    .generation-page .generation-aoi-side > .generation-control-heading-row { grid-row: 1; }
    .generation-page .generation-zone-field { grid-row: 2; }
    .generation-page .generation-aoi-side > .generation-advanced { grid-row: 3; }
    .generation-page .generation-launch-btn { grid-row: 4; }

    .generation-output-heading .generation-saliency-toolbar {
        width: 100%;
    }

    .generation-output-heading .generation-saliency-toolbar .btn {
        flex: 1 1 0;
    }

    .generation-page .generation-advanced-content {
        right: auto;
        left: 0;
        width: min(620px, calc(100vw - 94px));
    }
}

/* Edit an existing image analysis from its history card. */
.history-edit-btn {
    position: absolute;
    top: 7px;
    right: 42px;
    z-index: 2;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--accent);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(86, 100, 232, .28);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(22, 32, 39, .08);
    cursor: pointer;
}

.history-edit-btn .material-icons { font-size: 17px; }

.history-edit-btn:hover {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
}

.visual-relaunch-button {
    align-items: center;
    gap: 7px;
}

/* Comparaison : centrage strict des lettres AOI avec leur libellé. */
.compare-page .compare-table .compare-aoi-row:not(.compare-reading-step-row) > td:first-child {
    grid-template-columns: 24px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
}

.compare-page .compare-table .compare-aoi-row:not(.compare-reading-step-row) > td:first-child .compare-aoi-letter {
    grid-row: auto;
    align-self: center;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.compare-page .compare-table .compare-aoi-row:not(.compare-reading-step-row) > td:first-child > strong {
    align-self: center;
    display: block;
    line-height: 1.25;
}

/* Benchmark : parcours Projet > Uploads et surface de configuration allégée. */
.benchmark-create-page {
    display: grid;
    align-content: start;
    gap: 14px;
    padding-top: 18px;
    background: #f7f8fb;
}

.benchmark-builder-header,
.benchmark-library-header,
.benchmark-builder-title,
.benchmark-builder-actions,
.benchmark-config-footer,
.benchmark-access-control,
.benchmark-source-control,
.benchmark-library-tools,
.benchmark-project-detail-title,
.benchmark-project-detail-actions,
.benchmark-selection-toolbar,
.benchmark-upload-pagination {
    display: flex;
    align-items: center;
}

.benchmark-builder-header,
.benchmark-library-header,
.benchmark-config-footer,
.benchmark-selection-toolbar,
.benchmark-upload-pagination {
    justify-content: space-between;
}

.benchmark-builder-header {
    gap: 20px;
    padding: 4px 2px 14px;
    border-bottom: 1px solid #dde3ec;
}

.benchmark-builder-title {
    min-width: 0;
    gap: 12px;
}

.benchmark-builder-title > div,
.benchmark-library-header > div,
.benchmark-project-detail-title > div {
    min-width: 0;
}

.benchmark-builder-title h1,
.benchmark-library-header h2 {
    margin: 2px 0 0;
    color: #17243a;
    letter-spacing: -.025em;
}

.benchmark-builder-title h1 { font-size: 27px; }
.benchmark-library-header h2 { font-size: 20px; }

.benchmark-builder-title p,
.benchmark-library-header p {
    margin: 3px 0 0;
    color: #7c899b;
    font-size: 12px;
}

.benchmark-back {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: #0033ff;
    background: #edf1ff;
    border-color: transparent;
}

.benchmark-builder-actions {
    flex: 0 0 auto;
    gap: 12px;
}

.benchmark-builder-actions .btn.primary {
    min-height: 42px;
    padding-inline: 16px;
}

.benchmark-selected-count {
    color: #7b8799;
    font-size: 12px;
    white-space: nowrap;
}

.benchmark-selected-count strong { color: #0033ff; font-size: 16px; }

.benchmark-builder-config,
.benchmark-source-surface {
    background: #ffffff;
    border: 1px solid #e0e5ed;
}

.benchmark-builder-config {
    padding: 18px 20px 0;
    border-radius: 10px;
}

.benchmark-config-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) repeat(3, minmax(150px, 1fr));
    gap: 12px;
}

.benchmark-config-grid label {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.benchmark-config-grid label > span,
.benchmark-config-label {
    color: #667388;
    font-size: 11px;
    font-weight: 800;
}

.benchmark-config-grid input,
.benchmark-config-grid select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    background: #f8f9fc;
    border-color: #e1e6ee;
}

.benchmark-config-footer {
    gap: 20px;
    margin-top: 16px;
    padding: 12px 0;
    border-top: 1px solid #edf0f5;
}

.benchmark-access-control,
.benchmark-source-control {
    gap: 9px;
}

.benchmark-source-control { margin-left: auto; }
.benchmark-config-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.benchmark-config-label .material-icons { font-size: 16px; }

.benchmark-access-options,
.benchmark-source-control .segmented-control {
    padding: 2px;
    background: #f2f4f8;
    border: 0;
    border-radius: 7px;
}

.benchmark-access-options .segmented-btn,
.benchmark-source-control .segmented-btn {
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: 5px;
    font-size: 11px;
}

.benchmark-access-options .segmented-btn.active,
.benchmark-source-control .segmented-btn.active {
    color: #0033ff;
    background: #ffffff;
    box-shadow: 0 1px 5px rgba(69, 88, 116, .12);
}

.benchmark-source-surface {
    min-width: 0;
    padding: 18px 20px 20px;
    border-radius: 10px;
}

.benchmark-library-header {
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e9f0;
}

.benchmark-library-tools,
.benchmark-project-detail-actions {
    flex: 0 0 auto;
    gap: 7px;
}

.benchmark-library-tools .history-search,
.benchmark-upload-toolbar .history-search {
    width: min(340px, 32vw);
    background: #f8f9fc;
    border-color: #e1e6ee;
    box-shadow: none;
}

.benchmark-selection-toolbar {
    min-height: 40px;
    margin: 0 -20px;
    padding: 7px 20px;
    color: #526174;
    background: #f5f7ff;
    border-bottom: 1px solid #e1e6f5;
    font-size: 12px;
}

.benchmark-selection-toolbar strong { color: #0033ff; }
.benchmark-selection-toolbar .text-btn { min-height: 28px; padding: 3px 6px; color: #0033ff; background: transparent; border: 0; }

.benchmark-project-list-modern {
    display: grid;
    margin-top: 4px;
}

.benchmark-library-project {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid #e8ebf1;
    transition: background .16s ease;
}

.benchmark-library-project:hover { background: #fafbfe; }
.benchmark-library-project.selected { background: #f6f8ff; }
.benchmark-library-project.complete { box-shadow: inset 3px 0 #0033ff; }

.benchmark-project-open,
.benchmark-project-select {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.benchmark-project-open {
    min-width: 0;
    min-height: 70px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-align: left;
}

.benchmark-project-folder {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #0033ff;
    background: #edf1ff;
    border-radius: 9px;
    font-size: 22px;
}

.benchmark-project-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.benchmark-project-copy strong,
.benchmark-project-copy small,
.benchmark-upload-copy strong,
.benchmark-upload-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benchmark-project-copy strong { color: #243248; font-size: 14px; }
.benchmark-project-copy small { color: #8a95a6; font-size: 11px; }
.benchmark-project-arrow { color: #a6afbd; font-size: 19px; }

.benchmark-project-select {
    min-width: 145px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-right: 12px;
    padding: 6px 9px;
    color: #0033ff;
    font-size: 11px;
    font-weight: 750;
}

.benchmark-project-select:hover { background: #edf1ff; border-radius: 6px; }
.benchmark-project-select .material-icons { font-size: 18px; }

.benchmark-project-detail-title { min-width: 0; gap: 10px; }
.benchmark-project-detail-header { align-items: center; }

.benchmark-select-project-btn {
    color: #0033ff;
    background: #edf1ff;
    border-color: transparent;
}

.benchmark-upload-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.benchmark-upload-toolbar .history-search { width: 100%; }
.benchmark-upload-toolbar .history-limit { background: #f8f9fc; box-shadow: none; }

.benchmark-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.benchmark-upload-card {
    min-width: 0;
    display: grid;
    grid-template-rows: 124px auto;
    padding: 0;
    overflow: hidden;
    color: inherit;
    background: #ffffff;
    border: 1px solid #e0e5ed;
    border-radius: 8px;
    text-align: left;
    box-shadow: none;
}

.benchmark-upload-card:hover { border-color: #aebcf8; }
.benchmark-upload-card.active { border-color: #0033ff; box-shadow: inset 0 0 0 1px #0033ff; }

.benchmark-upload-thumb {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #9ba6b5;
    background: #f2f4f8;
}

.benchmark-upload-thumb > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.benchmark-upload-thumb > .material-icons:not(.benchmark-upload-check) { font-size: 32px; }

.benchmark-upload-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: #0033ff;
    background: rgba(255, 255, 255, .94);
    border-radius: 50%;
    font-size: 21px;
    box-shadow: 0 2px 7px rgba(47, 64, 91, .14);
}

.benchmark-upload-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 10px 11px;
}

.benchmark-upload-copy strong { color: #243248; font-size: 12px; }
.benchmark-upload-copy small { color: #8a95a6; font-size: 10px; }

.benchmark-upload-pagination {
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e9f0;
    color: #7d899a;
    font-size: 11px;
}

.benchmark-upload-pagination .btn { min-height: 32px; padding: 5px 10px; }

.benchmark-zip-source .visual-file-drop { margin-top: 14px; }

@media (max-width: 1080px) {
    .benchmark-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benchmark-builder-header { align-items: flex-start; }
    .benchmark-builder-actions { align-items: flex-end; flex-direction: column-reverse; }
}

@media (max-width: 760px) {
    .benchmark-create-page { padding: 12px; }
    .benchmark-builder-header,
    .benchmark-library-header,
    .benchmark-config-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .benchmark-builder-actions { width: 100%; align-items: stretch; }
    .benchmark-builder-actions .btn.primary { width: 100%; }
    .benchmark-config-grid { grid-template-columns: minmax(0, 1fr); }
    .benchmark-source-control { margin-left: 0; }
    .benchmark-access-control,
    .benchmark-source-control { justify-content: space-between; }
    .benchmark-library-tools { width: 100%; }
    .benchmark-library-tools .history-search { width: 100%; }
    .benchmark-library-project { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
    .benchmark-project-select { width: calc(100% - 24px); margin: 0 12px; background: #f5f7fb; border-radius: 6px; }
    .benchmark-project-detail-actions { width: 100%; }
    .benchmark-project-detail-actions .btn { width: 100%; }
    .benchmark-upload-toolbar { grid-template-columns: minmax(0, 1fr); }
    .benchmark-upload-toolbar .history-limit,
    .benchmark-upload-toolbar .history-limit select { width: 100%; max-width: none; }
    .benchmark-upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .benchmark-builder-config,
    .benchmark-source-surface { padding-inline: 14px; }
    .benchmark-config-footer { gap: 12px; }
    .benchmark-access-control,
    .benchmark-source-control { align-items: stretch; flex-direction: column; }
    .benchmark-upload-grid { grid-template-columns: minmax(0, 1fr); }
}

.visual-step small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.visual-step.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.visual-step.active span,
.visual-step.done span {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
}

.visual-step.done {
    border-color: rgba(32, 199, 181, 0.36);
}

.visual-step.locked span {
    color: var(--muted);
    background: #ffffff;
    border-color: var(--border);
}

.visual-config-panel {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 14px;
    padding: 14px;
}

.visual-config-panel,
.visual-preview-panel {
    min-width: 0 !important;
}

.visual-form {
    display: grid;
    gap: 14px;
}

.visual-form label {
    display: grid;
    gap: 6px;
    font-weight: 650;
}

.visual-form input[type="file"] {
    width: 100%;
    background: var(--panel2);
}

.visual-config-header {
    align-items: flex-start;
    margin-bottom: 0;
}

.visual-config-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.visual-config-card {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(180deg, #ffffff, var(--panel2));
    border: 1px solid var(--border);
    border-radius: 8px;
}

.visual-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.visual-card-title .material-icons {
    color: var(--accent);
    font-size: 19px;
}

.visual-file-drop {
    position: relative;
    display: grid !important;
    place-items: center;
    min-height: 118px;
    gap: 4px !important;
    padding: 18px;
    overflow: hidden;
    text-align: center;
    color: var(--accent);
    background: #ffffff;
    border: 1px dashed #b9d7fb;
    border-radius: 8px;
    cursor: pointer;
}

.visual-file-drop:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.visual-file-drop.needs-type {
    color: var(--muted);
    border-color: var(--border);
}

.visual-file-drop.needs-type:hover {
    background: #f7f9fc;
    border-color: var(--accent);
    color: var(--accent);
}

.visual-file-drop .material-icons {
    font-size: 30px;
}

.visual-file-drop small {
    color: var(--muted);
    font-weight: 650;
}

.visual-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.visual-source-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.visual-model-stack {
    display: grid;
    gap: 10px;
}

.visual-model-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(82px, 0.45fr) minmax(0, 1fr);
    gap: 8px;
}

.visual-model-row select {
    min-width: 0;
}

.visual-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
}

.visual-disclosure {
    padding: 0;
}

.visual-disclosure summary {
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.visual-disclosure summary::-webkit-details-marker {
    display: none;
}

.visual-disclosure .disclosure-icon {
    margin-left: auto;
    color: var(--muted);
    transition: transform 0.16s ease;
}

.visual-disclosure[open] .disclosure-icon {
    transform: rotate(180deg);
}

.visual-disclosure-body {
    padding: 0 12px 12px;
}

.visual-launch {
    display: grid;
    gap: 10px;
}

.visual-image-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.visual-image-actions .result-info-bar {
    grid-column: 1 / -1;
}

.visual-launch .btn.primary {
    width: 100%;
    min-height: 46px;
    font-size: 15px;
}

.visual-preview-grid {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    align-items: flex-start;
}

.visual-gallery-layout {
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
}

.visual-gallery-panel .poly-item {
    cursor: pointer;
}

.visual-global-preview {
    width: 100%;
    justify-self: stretch;
    align-self: start;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 14px;
    min-height: 0;
    padding: 18px;
}

.visual-preview-header {
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 0;
}

.visual-preview-header h2,
.visual-preview-header p {
    margin: 0;
}

.visual-preview-header p {
    margin-top: 4px;
    font-size: 13px;
}

.visual-preview-header input[type="file"] {
    display: none;
}

.visual-preview-drop {
    min-height: 142px;
}

.visual-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 180px));
    grid-auto-rows: 170px;
    gap: 10px;
    align-items: stretch;
    justify-content: start;
    min-height: max-content;
    overflow: visible;
    padding: 2px;
}

.visual-image-tile {
    position: relative;
    min-height: 170px;
    padding: 8px;
    grid-template-rows: minmax(98px, 1fr) auto;
    background: #ffffff;
}

.visual-add-tile {
    min-height: 170px;
    align-content: center;
}

.visual-add-tile strong {
    color: var(--accent);
}

.visual-image-tile:hover {
    border-color: rgba(77, 163, 255, 0.54);
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
}

.visual-image-tile .visual-image-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.visual-image-tile .visual-tile-thumb {
    width: 100%;
    height: 104px;
    object-fit: contain;
}

.visual-image-tile-body {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.visual-image-tile-body strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-zip-tile {
    display: grid;
    place-items: center;
    gap: 8px;
    color: var(--muted);
    text-align: center;
    background: var(--panel2);
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.visual-zip-tile .material-icons {
    color: var(--accent);
    font-size: 34px;
}

.visual-zip-tile strong,
.visual-zip-tile small {
    max-width: 100%;
    overflow: hidden;
    padding: 0 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-preview-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.visual-preview-actions .result-info-bar {
    margin-right: auto;
}

.visual-preview-actions .btn {
    min-height: 44px;
}

.visual-tile-thumb {
    width: 76px;
    height: 56px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.visual-tile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.visual-tile-meta .material-icons {
    font-size: 16px;
    color: var(--accent);
}

.visual-image-delete {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 4px;
}

.visual-image-delete .material-icons {
    font-size: 16px;
}

.visual-annotation-modal {
    width: min(1280px, 96vw);
    height: min(94vh, 900px);
    max-height: 94vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 7px;
    overflow: hidden;
    padding: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.visual-modal-header {
    margin-bottom: 0;
    gap: 7px;
}

@media (max-width: 540px) {
    .analysis-title-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .visual-new-aoi-inline-fields.video-new-aoi-inline-fields {
        grid-template-columns: 1fr;
    }
}

.visual-modal-header h2,
.visual-modal-header p {
    margin: 0;
}

.visual-modal-header h2 { font-size: 20px; }
.visual-modal-header p { font-size: 12px; }
.visual-modal-header > .icon-btn {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
}
.visual-modal-header > .icon-btn .material-icons { font-size: 20px; }

.visual-modal-title {
    min-width: 0;
}

.visual-project-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.visual-project-title-row h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-title-edit {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 4px;
}

.visual-title-edit .material-icons {
    font-size: 16px;
}

.visual-title-input {
    max-width: min(420px, 58vw);
}

.visual-project-edit-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.visual-project-edit-row .visual-title-input {
    flex: 1;
    min-width: 160px;
}

.visual-modal-thumb {
    width: 60px;
    height: 46px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.visual-preview-grid > div:first-child {
    max-width: none !important;
}

.poly-item {
    display: grid;
    gap: 5px;
    padding: 6px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

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

.visual-selected {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 6px;
    overflow: hidden;
}

.visual-modal-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 3px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.visual-modal-tab {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.visual-modal-tab .material-icons { font-size: 15px; }
.visual-modal-tab.active {
    color: var(--accent);
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 2px 7px rgba(22, 32, 39, 0.07);
}
.visual-modal-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.visual-canvas-and-aoi {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    min-height: 0;
    gap: 5px;
    align-items: stretch;
}

.visual-preview-canvas {
    min-height: 0;
    max-width: 100%;
    max-height: none;
    overflow: auto;
}

.visual-preview-canvas img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 920px);
    max-height: min(70vh, 760px);
    object-fit: contain;
}

#visualCanvas {
    touch-action: none;
}

.visual-image-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.visual-image-stage:not(.is-zoomable) {
    visibility: hidden;
}

.visual-aoi-panel {
    position: static;
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding: 7px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.visual-aoi-bulkbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 5px;
}

.visual-aoi-bulkbar .btn {
    min-width: 0;
    min-height: 25px;
    padding: 3px 5px;
    font-size: 9px;
    border-radius: 6px;
}

.visual-aoi-bulkbar .material-icons { font-size: 14px; }

.visual-aoi-list {
    display: grid;
    gap: 3px;
}

.visual-aoi-item {
    display: block;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
}

.visual-aoi-item:hover {
    border-color: var(--accent);
}

.visual-aoi-item.active {
    border-color: #ff2e63;
    background: rgba(255, 46, 99, 0.12);
    box-shadow: 0 0 0 2px rgba(255, 46, 99, 0.18);
}

.visual-aoi-item.marked {
    border-color: #ffb000;
    background: rgba(255, 176, 0, 0.16);
    box-shadow: 0 0 0 2px rgba(255, 176, 0, 0.18);
}

.visual-aoi-row-editor {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
}

.visual-aoi-check {
    display: grid;
    place-items: center;
}

.visual-aoi-check input {
    width: 14px;
    height: 14px;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.visual-aoi-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(130px, 1fr);
    gap: 4px;
    align-items: center;
}

.visual-aoi-name-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px;
    align-items: center;
}

.visual-aoi-index {
    color: #007ea6;
    font-size: 10px;
    font-weight: 900;
}

.visual-aoi-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
}

.visual-aoi-meta-row select {
    width: 100%;
    min-width: 0;
    min-height: 24px;
    padding: 2px 5px;
    font-size: 10px;
}

.visual-aoi-meta-row span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.visual-aoi-delete {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
}

.visual-aoi-delete .material-icons {
    font-size: 16px;
}

/* AOI editor: fixed CVAT-style workspace with no floating selection palette. */
.visual-annotation-modal {
    width: min(1460px, 94vw);
    height: min(92vh, 920px);
    max-height: 92vh;
	grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid rgba(86, 100, 232, .18);
    border-radius: 18px;
    box-shadow: 0 28px 90px rgba(23, 32, 51, .26);
}

.visual-annotation-modal #visualCanvas {
    background: rgba(7, 15, 28, .08);
}

.visual-modal-header {
    gap: 12px;
    padding: 11px 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f7f8ff 68%, #eefaf8 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 0 3px 0 var(--accent);
}

.visual-modal-header > .icon-btn,
.visual-title-edit {
    color: var(--muted);
    background: rgba(255, 255, 255, .82);
    border-color: var(--border);
    border-radius: 10px;
}

.visual-modal-header > .icon-btn:hover,
.visual-title-edit:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(86, 100, 232, .3);
}

.visual-selected { gap: 0; }

.visual-modal-tabs {
    padding: 4px 10px;
    background: var(--panel2);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}

.visual-modal-tab.active {
    box-shadow: 0 1px 4px rgba(22, 32, 39, 0.08);
}

.visual-editor-toolbar {
    min-height: 56px;
    display: grid;
    grid-template-columns: auto minmax(190px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    color: var(--text);
    background: var(--panel2);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(23, 32, 51, .05);
}

.visual-editor-tool-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.visual-polygon-tool {
    position: relative;
    display: flex;
}

.visual-new-aoi-popover {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 40;
    width: min(460px, calc(100vw - 48px));
    display: grid;
    gap: 12px;
    padding: 14px;
    color: var(--text);
    background: #ffffff;
    border: 1px solid #cbd4d9;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(12, 20, 27, 0.2);
}

.visual-new-aoi-popover::before,
.visual-new-aoi-popover::after {
    position: absolute;
    left: 24px;
    width: 0;
    height: 0;
    content: "";
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.visual-new-aoi-popover::before {
    top: -9px;
    border-bottom: 9px solid #cbd4d9;
}

.visual-new-aoi-popover::after {
    top: -8px;
    border-bottom: 9px solid #ffffff;
}

.visual-new-aoi-popover-heading {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.visual-new-aoi-popover-heading > .material-icons {
    color: #168b56;
    font-size: 22px;
}

.visual-new-aoi-popover-heading strong,
.visual-new-aoi-popover-heading small {
    display: block;
}

.visual-new-aoi-popover-heading strong {
    font-size: 13px;
}

.visual-new-aoi-popover-heading small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.visual-new-aoi-popover .visual-create-gate-actions {
    padding-top: 2px;
}

.visual-editor-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.visual-tool-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 11px;
    color: #4c5870;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.visual-tool-button:hover:not(:disabled),
.visual-tool-button.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(86, 100, 232, .26);
}

.visual-tool-button.active { box-shadow: 0 2px 8px rgba(86, 100, 232, .12); }
.visual-tool-button:disabled { opacity: 0.42; cursor: not-allowed; }
.visual-tool-button .material-icons { font-size: 20px; }

.visual-icon-tool {
    width: 36px;
    min-width: 36px;
    padding: 4px;
}

.visual-zoom-controls {
    gap: 1px;
    padding: 2px;
    background: #eef1f7;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.visual-zoom-controls .visual-tool-button {
    min-height: 32px;
    border-radius: 7px;
}

.visual-zoom-value {
    min-width: 64px;
    min-height: 32px;
    padding: 4px 7px;
    color: var(--text);
    background: #ffffff;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.visual-tool-confirm {
    color: #ffffff;
    background: var(--accent2);
    border-color: var(--accent2);
}

.visual-tool-confirm:hover:not(:disabled) { color: #ffffff; background: #10998a; }

.auto-aoi-settings-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(0, 210, 180, .08), rgba(255, 255, 255, .96));
    border-bottom: 1px solid var(--border);
}

.auto-aoi-settings-heading {
    flex: 0 1 290px;
    min-width: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.auto-aoi-settings-heading strong,
.auto-aoi-settings-heading small {
    display: block;
}

.auto-aoi-settings-heading strong {
    font-size: 12px;
}

.auto-aoi-settings-heading small,
.auto-aoi-setting > small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.25;
}

.auto-aoi-zone-count {
    flex: 0 0 auto;
    padding: 4px 7px;
    color: #087d6f;
    background: rgba(0, 210, 180, .14);
    border: 1px solid rgba(0, 160, 140, .22);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.auto-aoi-settings-grid {
    flex: 1 1 560px;
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 12px;
}

.auto-aoi-settings-grid.auto-aoi-single-setting {
    grid-template-columns: minmax(220px, 1fr);
}

.auto-aoi-setting {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.auto-aoi-setting > label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #4c5870;
    font-size: 10px;
    font-weight: 800;
}

.auto-aoi-setting > label strong {
    color: var(--text);
    font-size: 10px;
}

.auto-aoi-settings-grid input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: #00a88f;
    cursor: pointer;
}

.auto-aoi-target-control {
    display: grid !important;
    grid-template-columns: 32px minmax(120px, 1fr) 32px;
    align-items: center;
    gap: 7px;
}

.auto-aoi-target-control .visual-icon-tool {
    width: 32px;
    min-width: 32px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    justify-content: center;
}

.auto-aoi-target-control .material-icons {
    font-size: 17px;
}

.auto-aoi-range-legend {
    display: flex !important;
    justify-content: space-between;
    gap: 16px;
}

.auto-aoi-regenerate {
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.auto-aoi-regenerate .material-icons {
    font-size: 18px;
}

.visual-toolbar-separator {
    width: 1px;
    height: 24px;
    margin: 0 4px;
    background: #c4cfd5;
}

.visual-editor-status {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.visual-editor-status .material-icons {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 18px;
}

.visual-editor-status span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-canvas-and-aoi {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 0;
    background: #d9dee2;
}

.visual-canvas-column {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.visual-preview-canvas {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 22px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background-color: #d9dee2;
    background-image:
	        linear-gradient(45deg, rgba(255, 255, 255, 0.22) 25%, transparent 25%),
	        linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 25%, transparent 25%),
	        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.22) 75%),
	        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.22) 75%);
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-size: 12px 12px;
    border: 0;
    border-radius: 0;
}

.visual-preview-canvas img { box-shadow: 0 10px 28px rgba(49, 63, 72, 0.2); }

.visual-image-stage {
    max-width: 100%;
    margin: 0;
    transform-origin: 0 0;
}

.visual-zoom-space {
    position: relative;
    flex: 0 0 auto;
    max-width: 100%;
    margin: 0 auto;
}

.visual-zoom-space.is-zoomable,
.visual-image-stage.is-zoomable {
    max-width: none;
    max-height: none;
}

.visual-image-stage.is-zoomable .visual-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.visual-canvas-hint {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    color: #4f5f68;
    background: #edf1f3;
    border-top: 1px solid #cbd4d9;
    font-size: 11px;
    font-weight: 700;
}

.visual-canvas-hint-shortcut { margin-left: auto; color: #708089; }

.visual-handle-legend {
    width: 11px;
    height: 11px;
    display: inline-block;
    margin-left: 7px;
    border: 2px solid #ff2e63;
    border-radius: 50%;
}

.visual-handle-legend:first-child { margin-left: 0; }
.visual-handle-legend-vertex { background: #ff2e63; }
.visual-handle-legend-virtual { background: #ffffff; }

.visual-aoi-panel {
    padding: 0;
    background: #f7f9fa;
    border: 0;
    border-left: 1px solid #cfd8de;
    border-radius: 0;
}

.visual-aoi-bulkbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 8px;
    background: var(--panel2);
    border-bottom: 1px solid var(--border);
}

.visual-aoi-bulkbar .btn {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 11.5px;
    border-radius: 8px;
}

.visual-aoi-bulkbar .material-icons { font-size: 17px; }

.visual-aoi-list {
    gap: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.visual-aoi-item {
    padding: 9px 10px;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e5eaed;
    border-left: 3px solid transparent;
    border-radius: 0;
}

.visual-aoi-item:hover { background: #f1f5f7; border-left-color: #8fcbea; }
.visual-aoi-item.active { border-left-color: #ff2e63; background: #fff0f4; box-shadow: none; }
.visual-aoi-item.marked { border-left-color: #ffb000; background: #fff8df; box-shadow: none; }
.visual-aoi-item.disabled { opacity: 0.62; cursor: default; }
.visual-aoi-item.disabled:hover { background: #ffffff; border-left-color: transparent; }
.visual-aoi-panel > .muted { display: block; padding: 12px; }

.visual-aoi-main { grid-template-columns: minmax(0, 1fr); }

.visual-aoi-name-row strong {
    overflow: hidden;
    color: #24313a;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-aoi-meta-row .visual-aoi-meta-value {
    overflow: hidden;
    color: #687780;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-properties-card {
    display: grid;
    gap: 9px;
    margin: 10px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #dbe2e6;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(22, 32, 39, 0.05);
}

.visual-new-aoi-inline {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(190px, 0.65fr) minmax(360px, 1.35fr) auto;
    align-items: end;
    gap: 12px;
    padding: 9px 12px;
    background: #f4f6f7;
    border-bottom: 1px solid #cbd4d9;
    box-shadow: inset 0 3px 0 #22a86b;
}

.visual-new-aoi-inline-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: center;
}

.visual-new-aoi-inline-heading > .material-icons {
    color: #168b56;
    font-size: 21px;
}

.visual-new-aoi-inline-heading strong,
.visual-new-aoi-inline-heading small {
    display: block;
}

.visual-new-aoi-inline-heading strong { font-size: 12px; }
.visual-new-aoi-inline-heading small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.visual-new-aoi-inline-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.visual-new-aoi-inline-fields label {
    min-width: 0;
    display: grid;
    gap: 3px;
    color: #52616a;
    font-size: 10px;
    font-weight: 800;
}

.visual-new-aoi-inline-fields input,
.visual-new-aoi-inline-fields select {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 11px;
}

.visual-create-gate-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.visual-create-gate-actions .btn {
    min-width: 0;
    min-height: 34px;
    padding: 5px 7px;
    font-size: 10px;
}

.visual-create-gate-actions .material-icons { font-size: 16px; }

.visual-new-aoi-drawing-state {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    color: #16643f;
    background: #e4f5ec;
    border: 1px solid #b8dfca;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
}

.visual-new-aoi-drawing-state .material-icons { font-size: 16px; }

.visual-properties-heading { display: flex; align-items: center; gap: 8px; }
.visual-properties-heading > .material-icons { color: #ff2e63; font-size: 20px; }
.visual-properties-heading strong,
.visual-properties-heading small { display: block; }
.visual-properties-heading strong { font-size: 13px; }
.visual-properties-heading small { margin-top: 1px; color: var(--muted); font-size: 10.5px; }

.visual-properties-card label {
    display: grid;
    gap: 4px;
    color: #52616a;
    font-size: 11.5px;
    font-weight: 800;
}

.visual-properties-card input,
.visual-properties-card select {
    width: 100%;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 13px;
}

.visual-properties-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.visual-properties-actions .btn {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 11.5px;
}

.visual-properties-actions .material-icons { font-size: 17px; }

.visual-properties-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 7px;
    color: #54636c;
    background: #f4f7f8;
    border-radius: 4px;
    font-size: 10.5px;
    line-height: 1.35;
}

.visual-properties-tip .material-icons { color: #ff2e63; font-size: 15px; }

.generation-page {
    max-width: 1680px;
}

.generation-workspace {
    padding: 14px;
}

.generation-workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.generation-title-group {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.generation-title-group h2,
.generation-title-group p {
    margin: 0;
}

.generation-title-group h2 {
    margin-top: 2px;
    font-size: clamp(22px, 2vw, 30px);
}

.generation-title-group p {
    margin-top: 5px;
}

.generation-back-link {
    flex: 0 0 auto;
    color: var(--text);
    background: var(--panel2);
    text-decoration: none;
}

.generation-back-link:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
}

.generation-back-link .material-icons {
    font-size: 18px;
}

.generation-control-heading-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.generation-control-heading-row .generation-back-link {
    justify-content: center;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
}

.generation-control-heading-row .generation-section-heading {
    min-width: 0;
}

.generation-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.generation-sidebar,
.generation-workspace,
.generation-history-panel {
    min-width: 0;
    padding: 14px;
}

.generation-sidebar {
    position: sticky;
    top: 82px;
}

.generation-project-list {
    display: grid;
    gap: 10px;
}

.generation-project {
    width: 100%;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px;
    text-align: left;
    color: var(--text);
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.generation-project.active,
.generation-project:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.generation-project img {
    width: 74px;
    height: 54px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

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

.generation-project small {
    margin-top: 4px;
    color: var(--muted);
}

.generation-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.generation-preview-wrap {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    place-items: center;
    gap: 14px;
    min-height: 360px;
    height: min(70vh, 740px);
    box-sizing: border-box;
    overflow: auto;
    padding: 16px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.generation-reference-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.generation-reference-caption .material-icons {
    color: var(--accent);
    font-size: 15px;
}

.generation-reference-caption span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generation-section-heading {
    width: 100%;
}

.generation-pane-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 8px;
    font-size: 17px;
}

.generation-section-heading > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.generation-section-heading strong,
.generation-section-heading small {
    display: block;
}

.generation-section-heading strong {
    color: var(--text);
    font-size: 14px;
}

.generation-section-heading small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.generation-step {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: #ffffff;
    background: var(--accent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.generation-aoi-count {
    float: right;
    margin-top: -26px;
    padding: 4px 8px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.generation-image-stage {
    position: relative;
    display: inline-grid;
    max-width: 100%;
    max-height: min(48vh, 520px);
}

.generation-preview-img {
    grid-area: 1 / 1;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(48vh, 520px);
    object-fit: contain;
}

.generation-aoi-svg {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.generation-aoi-svg polygon,
.generation-aoi-svg text {
    pointer-events: auto;
    cursor: pointer;
}

.generation-aoi-svg polygon {
    fill: rgba(45, 124, 246, 0.16);
    stroke: rgba(45, 124, 246, 0.92);
    stroke-width: 3px;
}

.generation-aoi-svg polygon.active {
    fill: rgba(255, 190, 11, 0.24);
    stroke: #d18b00;
    stroke-width: 5px;
}

.generation-aoi-svg text {
    fill: #111827;
    font-size: 28px;
    font-weight: 800;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 5px;
}

.generation-aoi-side {
    --generation-control-height: 42px;
    grid-column: 1 / -1;
    grid-row: 1;
    container-type: inline-size;
    display: grid;
    grid-template-columns:
        minmax(210px, 0.9fr)
        minmax(165px, 0.65fr)
        minmax(210px, 0.9fr)
        minmax(165px, 0.7fr)
        minmax(165px, 0.7fr);
    grid-template-rows: auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.generation-launch-btn {
    grid-column: 5;
    grid-row: 1;
    width: 100%;
    height: var(--generation-control-height);
    min-height: var(--generation-control-height);
    box-sizing: border-box;
    align-self: end;
}

.generation-aoi-side > .generation-section-heading,
.generation-aoi-side > .generation-control-heading-row {
    grid-column: 1;
    grid-row: 1;
}

.generation-aoi-side > .generation-advanced {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
}

.generation-saliency-toolbar {
    grid-column: 4;
    grid-row: 1;
    height: var(--generation-control-height);
    align-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.generation-saliency-toolbar .btn {
    justify-content: center;
    height: var(--generation-control-height);
    min-height: var(--generation-control-height);
    box-sizing: border-box;
    padding: 7px 8px;
    font-size: 11px;
    font-weight: 800;
}

.generation-aoi-side > .btn,
.generation-aoi-side .generation-saliency-toolbar .btn {
    min-height: var(--generation-control-height);
    border-radius: 9px;
}

.generation-aoi-side > .generation-action-help,
.generation-aoi-side > .result-info-bar {
    grid-column: 1 / -1;
}

.generation-aoi-side label {
    display: grid;
    gap: 5px;
    min-width: 0;
    font-weight: 700;
    font-size: 12px;
}

.generation-zone-field {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}

.generation-zone-field select {
    height: var(--generation-control-height);
    min-height: var(--generation-control-height);
    box-sizing: border-box;
}

.generation-prompt-field {
    grid-column: 2;
    grid-row: 2;
}

.generation-field-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.generation-field-label .material-icons {
    color: var(--accent);
    font-size: 16px;
}

.generation-aoi-side select,
.generation-aoi-side textarea,
.generation-aoi-side input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.generation-aoi-side textarea {
    min-height: 40px;
    max-height: 62px;
    resize: vertical;
}

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

.generation-param-grid input {
    min-width: 0;
}

.generation-advanced {
    position: relative;
    overflow: visible;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.generation-aoi-side > .generation-advanced,
.generation-aoi-side > .generation-advanced summary {
    height: var(--generation-control-height);
    min-height: var(--generation-control-height);
    box-sizing: border-box;
}

.generation-advanced[open] {
    z-index: 30;
    border-color: var(--accent);
}

.generation-advanced summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    box-sizing: border-box;
    padding: 8px 10px;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 800;
}

.generation-advanced summary::-webkit-details-marker {
    display: none;
}

.generation-advanced summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.generation-advanced summary .material-icons {
    font-size: 17px;
}

.generation-advanced[open] .generation-chevron {
    transform: rotate(180deg);
}

.generation-advanced-content {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 40;
    display: grid;
    gap: 10px;
    width: min(620px, 82vw);
    box-sizing: border-box;
    padding: 11px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(31, 41, 55, 0.2);
}

.generation-advanced-content .generation-prompt-field {
    grid-column: 1;
    grid-row: auto;
}

.generation-advanced-content .generation-prompt-field textarea {
    min-height: 74px;
    max-height: 120px;
}

.generation-action-help {
    margin: -3px 0 0;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

@container (max-width: 300px) {
    .generation-param-grid {
        grid-template-columns: 1fr;
    }
}

.generation-checkbox {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
}

.generation-checkbox input {
    width: auto;
}

.generation-history-panel {
    margin-top: 18px;
}

.generation-run {
    display: grid;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.generation-run > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.generation-run h3,
.generation-run p {
    margin: 0;
}

.generation-run p {
    margin-top: 4px;
    color: var(--muted);
}

.generation-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

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

.generation-pane-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.generation-result-card {
    display: grid;
    gap: 10px;
    padding: 10px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.generation-result-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.generation-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    font-size: 11px;
}

.generation-metrics span,
.generation-metrics strong {
    padding: 5px 7px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.generation-metrics .positive {
    color: #177245;
}

.generation-metrics .negative {
    color: #a83232;
}

.generation-tabs-panel {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    height: min(70vh, 740px);
    box-sizing: border-box;
    overflow: visible;
    padding: 10px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.generation-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.generation-tabs-header > div:first-child {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.generation-tabs-header > div:first-child > div {
    display: grid;
    gap: 2px;
}

.generation-tabs-header > div:first-child strong {
    font-size: 15px;
}

.generation-tabs-header > div:first-child small {
    color: var(--muted);
    font-size: 11px;
}

.generation-tabs-header h2,
.generation-tabs-header p {
    margin: 0;
}

.generation-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(47, 128, 237, 0.22);
    border-radius: 999px;
    font-size: 13px;
}

.generation-saliency-models {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.generation-saliency-models .btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 26px;
    padding: 3px 6px;
    font-size: 10px;
    line-height: 1.1;
}

.generation-saliency-models .material-icons {
    font-size: 13px;
}

.generation-saliency-models .btn.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.generation-sample-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 1px 1px 7px;
    border-bottom: 1px solid var(--border);
}

.generation-sample-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 74px;
    padding: 5px 7px;
    text-align: left;
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}

.generation-sample-tab:hover {
    border-color: rgba(47, 128, 237, 0.28);
}

.generation-sample-tab.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.generation-sample-tab span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
}

.generation-sample-tab span strong {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: #ffffff;
    background: var(--accent);
    border-radius: 999px;
    font-size: 11px;
}

.generation-sample-tab small {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.generation-tab-content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-content: stretch;
    gap: 8px;
    height: 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
    overflow: visible;
    padding-right: 2px;
}

.generation-result-summary {
    position: relative;
    overflow: visible;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.generation-result-summary[open] {
    z-index: 50;
    border-color: var(--accent);
}

.generation-result-details-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: max-content;
    min-height: 32px;
    margin: 0;
    padding: 5px 9px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    font-weight: 800;
}

.generation-result-details-button::-webkit-details-marker {
    display: none;
}

.generation-result-details-button > .material-icons {
    color: var(--accent);
    font-size: 16px;
}

.generation-result-params {
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    width: min(460px, 100%);
    box-sizing: border-box;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(31, 41, 55, 0.2);
}

.generation-result-param-wide {
    grid-column: 1 / -1;
}

.generation-result-params > span {
    display: grid;
    gap: 1px;
}

.generation-result-params small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.generation-result-params strong {
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.4;
}

.generation-result-summary > summary .generation-chevron {
    margin-left: 2px;
    color: var(--muted);
    font-size: 16px;
}

.generation-result-summary[open] > summary .generation-chevron {
    transform: rotate(180deg);
}

.generation-comparison-card {
    min-height: 116px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.generation-comparison-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--border);
}

.generation-comparison-heading > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.generation-comparison-heading .material-icons {
    color: var(--accent);
    font-size: 16px;
}

.generation-comparison-heading strong {
    font-size: 12px;
}

.generation-comparison-heading > span {
    padding: 3px 7px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

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

.generation-comparison-table {
    width: 100%;
    min-width: 390px;
    border-collapse: collapse;
    font-size: 11px;
}

.generation-comparison-table th,
.generation-comparison-table td {
    padding: 7px 9px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
}

.generation-comparison-table thead th {
    color: var(--muted);
    background: #fafbfe;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.generation-comparison-table th:first-child {
    text-align: left;
}

.generation-comparison-table tbody th {
    color: var(--text);
    font-weight: 800;
}

.generation-comparison-table tbody tr:last-child > * {
    border-bottom: 0;
}

.generation-comparison-table td:last-child {
    font-weight: 900;
}

.generation-comparison-table .positive {
    color: #177245;
    background: #f1fbf6;
}

.generation-comparison-table .negative {
    color: #a83232;
    background: #fff5f5;
}

.generation-comparison-table .neutral,
.generation-comparison-table .unavailable {
    color: var(--muted);
}

.generation-tab-content h3,
.generation-tab-content p {
    margin: 0;
}

.generation-tab-content p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.generation-tab-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.generation-tab-pane {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.generation-generated-frame {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

.generation-generated-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.generation-generated-unavailable {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.generation-saliency-frame,
.generation-empty-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: #0b0e12;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.generation-empty-frame {
    color: var(--muted);
    background: var(--panel2);
    font-size: 12px;
    font-weight: 700;
}

.generation-saliency-frame .generation-tab-image {
    border: 0;
    border-radius: 7px;
    background: transparent;
    max-height: min(38vh, 420px);
}

.generation-tab-stage {
    position: relative;
    display: inline-grid;
    max-width: 100%;
    justify-self: center;
}

.generation-tab-image {
    grid-area: 1 / 1;
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(66vh, 760px);
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.generation-tab-aoi-svg {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.generation-tab-aoi-svg polygon {
    fill: rgba(255, 190, 11, 0.2);
    stroke: #d18b00;
    stroke-width: 4px;
}

.generation-metric-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}

.generation-result-summary .generation-metric-table {
    align-self: stretch;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    font-size: 11px;
}

.generation-result-summary .generation-metric-table th,
.generation-result-summary .generation-metric-table td {
    padding: 5px 7px;
}

.generation-result-empty {
    min-height: 260px;
    align-content: center;
}

.generation-result-empty strong,
.generation-result-empty small {
    display: block;
}

.generation-result-empty small {
    margin-top: 4px;
    color: var(--muted);
}

.generation-metric-table th,
.generation-metric-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    text-align: right;
}

.generation-metric-table th:first-child,
.generation-metric-table td:first-child {
    color: var(--muted);
    text-align: left;
    font-weight: 800;
}

.generation-metric-table tr:last-child td {
    border-bottom: 0;
}

.generation-metric-table .positive {
    color: #177245;
    font-weight: 800;
}

.generation-metric-table .negative {
    color: #a83232;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .generation-detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .generation-aoi-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
    }

    .generation-aoi-side > .generation-control-heading-row {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    .generation-launch-btn {
        grid-column: 2;
        grid-row: 1;
    }

    .generation-zone-field {
        grid-column: 1;
        grid-row: 2;
    }

    .generation-prompt-field {
        grid-column: 2;
        grid-row: 2;
    }

    .generation-aoi-side > .generation-advanced {
        grid-column: 2;
        grid-row: 2;
    }

    .generation-saliency-toolbar {
        grid-column: 1 / -1;
        grid-row: 3;
    }

}

@media (max-width: 760px) {
    .generation-workspace {
        padding: 12px;
    }

    .generation-workspace-header,
    .generation-title-group {
        align-items: stretch;
        flex-direction: column;
    }

    .generation-workspace-header .status-pill,
    .generation-back-link {
        align-self: flex-start;
    }

    .generation-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        overflow: visible;
    }

    .generation-aoi-side {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: stretch;
    }

    .generation-preview-wrap {
        grid-column: 1;
        grid-row: 2;
    }

    .generation-tabs-panel {
        grid-column: 1;
        grid-row: 3;
        height: auto;
        overflow: visible;
    }

    .generation-preview-wrap {
        min-height: 300px;
        padding: 12px;
    }

    .generation-aoi-side {
        position: static;
    }

    .generation-aoi-side > .generation-control-heading-row,
    .generation-zone-field,
    .generation-aoi-side > .generation-advanced,
    .generation-saliency-toolbar,
    .generation-launch-btn {
        grid-column: 1;
        grid-row: auto;
    }

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

    .generation-tabs-header {
        align-items: flex-start;
    }

    .generation-tab-content {
        grid-template-rows: auto auto auto;
        height: auto;
        overflow: visible;
        padding-right: 0;
    }

    .generation-generated-frame {
        height: min(72vw, 420px);
        min-height: 0;
    }

    .generation-generated-image {
        height: 100%;
        max-height: 100%;
    }

    .generation-comparison-table {
        min-width: 0;
        font-size: 9px;
    }

    .generation-comparison-table th,
    .generation-comparison-table td {
        padding: 6px 4px;
    }

    .generation-comparison-table thead th {
        font-size: 8px;
        letter-spacing: 0;
    }

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

}

@media (max-width: 1200px) {
    .visual-editor-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .visual-editor-status {
        display: none;
    }

    .auto-aoi-settings-panel {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .auto-aoi-settings-heading {
        flex: 1 1 100%;
    }
}

@media (max-width: 600px) {
    .auto-aoi-settings-grid {
        flex-basis: 100%;
        grid-template-columns: 1fr;
    }

    .auto-aoi-regenerate {
        width: 100%;
        justify-content: center;
    }
}

/* Sélection AOI synchronisée entre tableaux et images. */
.report-aoi-row,
.compare-aoi-row {
    cursor: pointer;
    outline: none;
}

.report-aoi-row:focus-visible td,
.compare-aoi-row:focus-visible td {
    box-shadow: inset 0 0 0 2px rgba(255, 107, 44, .55);
}

.results-page .report-table .report-aoi-row.selected td,
.compare-page .compare-table .compare-aoi-row.selected td {
    background: #fff2e8 !important;
    box-shadow: inset 0 1px 0 #ffb88f, inset 0 -1px 0 #ffb88f;
}

.results-page .report-table .report-aoi-row.selected td:first-child,
.compare-page .compare-table .compare-aoi-row.selected td:first-child {
    box-shadow: inset 4px 0 0 #ff6b2c, inset 0 1px 0 #ffb88f, inset 0 -1px 0 #ffb88f;
}

.report-aoi-group.selected .report-aoi-outline,
.report-aoi-group.selected .report-aoi-poly,
.compare-aoi-layer.selected polygon {
    fill: rgba(255, 107, 44, .3) !important;
    stroke: #ff5a1f !important;
    stroke-width: 5px !important;
    filter: drop-shadow(0 0 5px rgba(255, 90, 31, .75));
}

.report-aoi-group.selected .report-aoi-label-circle,
.compare-aoi-layer.selected .compare-aoi-label-circle {
    fill: #ff5a1f !important;
    stroke: #ffffff !important;
    stroke-width: 3px !important;
}

.report-aoi-group.selected .report-aoi-label-text,
.compare-aoi-layer.selected .compare-aoi-label-text {
    stroke: #8a2600 !important;
}

/* Results Lecture : le nom prend moins de place pour préserver les valeurs. */
.results-page .reading-table .reading-order-col { width: 16% !important; }
.results-page .reading-table .reading-name-col { width: 23% !important; }
.results-page .reading-table .reading-time-col { width: 27% !important; }
.results-page .reading-table .reading-total-col { width: 34% !important; }
.results-page .reading-table th:nth-child(2) { width: 23% !important; }
.results-page .reading-table th:nth-child(3) { width: 27% !important; }
.results-page .reading-table th:nth-child(4) { width: 34% !important; }

/* Comparaison simplifiée : une seule surface, des contrôles directs et lisibles. */
.compare-page .compare-shell {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.compare-page .compare-control-deck,
.compare-page .compare-display-toolbar {
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e1e6ef;
    border-radius: 0;
    box-shadow: none;
}

.compare-page .compare-image-cell {
    border-radius: 6px;
    box-shadow: none;
}

.compare-time-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: #eef1f6;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
}

.compare-time-toggle button {
    min-height: 32px;
    padding: 5px 11px;
    color: #667388;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.compare-time-toggle button.active {
    color: #ffffff;
    background: #0033ff;
    box-shadow: 0 3px 8px rgba(0, 51, 255, .2);
}

.compare-metric-value {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.compare-metric-value > strong {
    font-size: 15px;
}

.compare-reference-diff,
.compare-difference {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.compare-reference-diff {
    color: #526174;
    background: #eef1f6;
}

.compare-difference.positive {
    color: #087443;
    background: #e4f7ed;
}

.compare-difference.negative {
    color: #c92a2a;
    background: #fff0f0;
}

.compare-difference.neutral {
    color: #667085;
    background: #f1f3f6;
}

.compare-reading-order {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    color: #ffffff;
    background: #0033ff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
}

.compare-reading-step-value {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.compare-reading-step-value > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-reading-step-value > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.compare-table.reading-mode th:first-child,
.compare-table.reading-mode td:first-child {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    justify-items: center;
    text-align: center;
}

.compare-journey-layer {
    pointer-events: none;
}

/* Comparaison : plein écran, grille image/table 50/50 et scroll local du tableau. */
@media (min-width: 981px) {
    body.compare-body {
        height: 100dvh;
        overflow: hidden;
    }

    body.compare-body > div[ng-show="loggedIn"] {
        height: 100dvh;
        min-height: 0;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    body.compare-body .compare-page {
        height: 100%;
        min-height: 0;
    }

    body.compare-body .compare-page.workspace-index-page {
        overflow: auto;
        overscroll-behavior: contain;
    }

    body.compare-body .compare-page:not(.workspace-index-page) {
        padding: 10px clamp(14px, 2vw, 30px);
        overflow: hidden;
    }

    .compare-page:not(.workspace-index-page) .compare-shell,
    .compare-page:not(.workspace-index-page) .compare-output,
    .compare-page:not(.workspace-index-page) .compare-metric-panel,
    .compare-page:not(.workspace-index-page) .compare-workspace,
    .compare-page:not(.workspace-index-page) .compare-main-area,
    .compare-page:not(.workspace-index-page) .compare-image-row-simple {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .compare-page:not(.workspace-index-page) .compare-shell {
        display: block;
    }

    .compare-page:not(.workspace-index-page) .compare-output,
    .compare-page:not(.workspace-index-page) .compare-metric-panel {
        grid-template-rows: minmax(0, 1fr);
    }

    .compare-page:not(.workspace-index-page) .compare-metric-panel {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .compare-page:not(.workspace-index-page) .compare-main-area {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .compare-page:not(.workspace-index-page) .compare-image-row-simple {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .compare-page:not(.workspace-index-page) .compare-column-grid {
        min-width: 100%;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .compare-page:not(.workspace-index-page) .compare-image-spacer {
        grid-column: auto;
    }

    .compare-page:not(.workspace-index-page) .compare-image-cell {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) auto auto;
        overflow: hidden;
    }

    .compare-page:not(.workspace-index-page) .compare-image-frame {
        height: 100%;
        min-height: 0;
    }

    .compare-page:not(.workspace-index-page) .compare-image-stage,
    .compare-page:not(.workspace-index-page) .compare-image-stage img {
        max-height: 100%;
    }

    .compare-page:not(.workspace-index-page) .compare-table-wrap {
        height: 100%;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .compare-page:not(.workspace-index-page) .compare-selection-panel {
        height: 100%;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }
}

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

@media (max-width: 900px) {
    header.app-header {
        align-items: flex-start;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 14px;
    }

    header.app-header.compact-header {
        grid-template-columns: 1fr;
    }

    header.app-header.compact-header .header-spacer {
        display: none;
    }

    header.app-header.compact-header .header-actions {
        grid-column: 1;
    }

    header.app-header > nav.toolbar {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        max-width: 100%;
    }

    header.app-header > .toolbar:last-child {
        justify-content: space-between;
        width: 100%;
    }

    header.app-header #auth-indicator {
        max-width: min(62vw, 260px);
    }

    main {
        padding: 14px;
    }

    .form-grid,
    .visual-sequence,
    .generation-compare-grid,
    .generation-shell,
    .generation-detail,
    .visual-workspace,
    .visual-preview-grid,
    .visual-settings-grid,
    .visual-model-row,
    .visual-canvas-and-aoi,
    .video-workspace-grid {
        grid-template-columns: 1fr !important;
    }

    .video-report-grid,
    .video-slide-layout,
    .video-best-frames,
    .report-section-grid,
    .reading-report-grid,
    .report-split,
    .report-sections {
        grid-template-columns: 1fr;
    }

    .report-side-controls {
        position: static;
        grid-column: 1;
        grid-row: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-sections > .report-section {
        grid-column: 1;
    }

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

    .history-heading,
    .upload-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .upload-title-row > div {
        width: 100%;
        flex: none;
    }

    .upload-title-row .status-pill {
        max-width: 100%;
    }

    .compare-selector {
        align-items: flex-start;
        flex-direction: column;
    }

    .benchmark-reference-filter > div:first-child,
    .benchmark-compare-selector > div:first-child {
        flex: 0 1 auto;
        width: 100%;
        min-width: 0;
    }

    .compare-selector .compare-search,
    .benchmark-compare-selector .benchmark-compare-select {
        width: 100%;
        max-width: none;
    }

    .compare-column-grid {
        overflow-x: auto;
    }

    .compare-image-row {
        grid-template-columns: 1fr;
    }

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

    .result-tabs {
        grid-template-columns: 1fr;
    }

    .result-action-group {
        justify-content: flex-start;
    }

    .video-upload-header {
        grid-template-columns: 1fr;
    }

    .video-project-heading {
        grid-column: 1;
        justify-self: stretch;
    }

    .result-summary-card {
        grid-template-columns: 1fr;
    }

    .results-page .result-summary-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .result-summary-card .params-grid {
        justify-content: flex-start;
    }

    .results-page {
        padding: 6px 0 18px;
    }

    .results-shell {
        padding: 6px;
        border-radius: 0;
    }

    .results-page .result-summary-card {
        padding: 6px 8px;
    }

    .results-sticky-controls { position: static; }

    .results-page .overview-loading,
    .results-page .overview-stage-frame {
        min-height: 380px;
    }

    .results-page .report-mini-frame { min-height: 340px; }

    .results-page .report-section-grid { grid-template-columns: minmax(0, 1fr); }

    .result-action-label {
        display: none;
    }

    .overview-primary-panel {
        grid-template-columns: 1fr;
    }

    .overview-loading,
    .overview-stage-frame {
        grid-column: 1;
        grid-row: auto;
        min-height: 320px;
    }

    .results-page .video-report .video-slide-layout {
        grid-template-columns: 1fr;
    }

    .history-display-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .history-display-controls {
        justify-content: space-between;
        width: 100%;
    }

    .history-filters {
        width: 100%;
    }

    .history-search {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .history-limit {
        flex: 0 0 auto;
    }

    .benchmark-selection-filters {
        grid-template-columns: 1fr;
    }

    .upload-card {
        grid-template-columns: 1fr;
    }

    .upload-preview {
        width: 100%;
        height: 104px;
    }

    .preview-pair img,
    .upload-card img {
        max-width: 106px !important;
        max-height: 96px !important;
    }

    .upload-actions {
        justify-content: flex-start;
        max-width: none;
    }

    .visual-config-panel,
    .generation-sidebar,
    .generation-aoi-side,
    .generation-tabs-panel,
    .visual-aoi-panel {
        position: static;
    }

    .visual-aoi-create-panel,
    .visual-aoi-create-fields {
        grid-template-columns: 1fr;
    }

    .visual-aoi-create-actions .btn {
        flex: 1 1 140px;
    }

    .visual-aoi-create-actions {
        justify-content: stretch;
    }

    .visual-preview-canvas,
    .visual-preview-canvas img,
    .visual-aoi-panel {
        max-height: none;
    }

    .visual-annotation-modal {
        height: 92vh;
        max-height: calc(100vh - 32px);
        grid-template-rows: auto auto auto;
        overflow-y: auto;
    }

    .visual-selected {
        overflow: visible;
    }

    .visual-editor-toolbar {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .visual-editor-tool-group {
        flex-wrap: wrap;
    }

    .visual-new-aoi-inline {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .visual-create-gate-actions {
        justify-content: flex-start;
    }

    .visual-editor-status {
        order: -1;
        min-height: 26px;
        justify-content: flex-start;
    }

    .visual-canvas-column {
        min-height: 55vh;
    }

    .visual-canvas-hint {
        flex-wrap: wrap;
    }

    .visual-canvas-hint-shortcut {
        width: 100%;
        margin-left: 0;
    }

    .visual-canvas-and-aoi {
        flex: 0 0 auto;
    }

    .visual-aoi-panel {
        max-height: 55vh;
    }

    .results-table {
        display: block;
        overflow-x: auto;
    }
}

.video-copy-range-overlay { z-index: 12000; }
.video-copy-range-modal {
    width: min(92vw, 680px);
    display: grid;
    gap: 18px;
    padding: 22px;
}
.video-copy-range-modal h2,
.video-copy-range-modal p { margin: 0; }
.video-copy-range-modal p { margin-top: 5px; }
.video-copy-range-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
}
.video-copy-range-summary .material-icons { color: var(--muted); font-size: 18px; }
.video-dual-range {
    position: relative;
    height: 8px;
    margin: 12px 10px 0;
    border-radius: 999px;
}
.video-range-input {
    position: absolute;
    inset: 50% 0 auto;
    width: 100%;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    pointer-events: none;
}
.video-range-input::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
}
.video-range-input::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -7px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 3px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(23, 32, 51, .25);
    cursor: grab;
    pointer-events: auto;
}
.video-range-input::-moz-range-track {
    height: 8px;
    background: transparent;
}
.video-range-input::-moz-range-thumb {
    width: 17px;
    height: 17px;
    background: #fff;
    border: 3px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(23, 32, 51, .25);
    cursor: grab;
    pointer-events: auto;
}
.video-copy-range-scale {
    display: flex;
    justify-content: space-between;
    margin: -8px 8px 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}
.video-copy-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.video-copy-range-fields label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.video-copy-range-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.visual-aoi-required-alert {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 11px 13px;
    color: #a51f36;
    background: #fff0f2;
    border: 2px solid #e05269;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.visual-aoi-required-alert:hover { background: #ffe7eb; }
.visual-aoi-required-alert .material-icons { font-size: 24px; }
.visual-aoi-required-alert strong { display: block; margin-bottom: 2px; }
.visual-image-tile.missing-aoi {
    border-color: #e05269 !important;
    background: #fff5f6 !important;
    box-shadow: 0 0 0 2px rgba(224, 82, 105, .12);
}
.aoi-count-missing,
.visual-zero-aoi {
    color: #c62f49 !important;
    font-weight: 850 !important;
}

.visual-saved-gallery {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
    padding: 4px 2px 2px;
}
.visual-saved-gallery-header h2,
.visual-saved-gallery-header p { margin: 0; }
.visual-saved-gallery-header { margin-bottom: 0; }
.visual-saved-gallery-header p { margin-top: 3px; font-size: 11px; }
.visual-saved-gallery-header h2 { font-size: 19px; }
.visual-gallery-back {
    min-height: 38px;
    padding: 7px 11px;
    font-size: 13px;
}
.visual-gallery-back .material-icons { font-size: 18px; }
.visual-saved-gallery-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.visual-saved-project-grid,
.visual-saved-gallery-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    grid-auto-rows: max-content;
    align-items: start;
    gap: 8px;
    overflow-y: auto;
    padding: 2px;
}
.visual-saved-project-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: max-content;
    align-items: start;
    gap: 10px;
    overflow-y: auto;
    padding: 2px;
}
.visual-saved-project-card {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.visual-saved-project-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow);
}
.visual-saved-project-previews {
    height: 142px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
    overflow: hidden;
    background: #e7ecf3;
}
.visual-saved-project-previews.single { grid-template-columns: 1fr; }
.visual-saved-project-previews.double { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visual-saved-project-preview,
.visual-saved-project-empty {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--muted);
    background: #eef2f7;
    border-radius: 8px;
}
.visual-saved-project-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.visual-saved-project-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
}
.visual-saved-project-info > span:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.visual-saved-project-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.visual-saved-project-info small { color: var(--muted); }
.visual-saved-project-info > .material-icons {
    flex: 0 0 auto;
    color: var(--muted);
}
.visual-saved-annotation-card {
    position: relative;
    min-width: 0;
    width: 100%;
    display: block;
    align-self: start;
    padding: 0;
    overflow: hidden;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.visual-saved-annotation-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow);
}
.visual-saved-annotation-preview {
    position: relative;
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
    background: #eef2f7;
}
.visual-saved-annotation-frame {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    overflow: hidden;
}
.visual-saved-annotation-frame img,
.visual-saved-annotation-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.visual-saved-annotation-frame img { object-fit: contain; }
.visual-saved-annotation-overlay { pointer-events: none; }
.visual-saved-annotation-overlay polygon {
    fill: rgba(224, 82, 105, .18);
    stroke: #e05269;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}
.visual-saved-annotation-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 11px;
}
.visual-saved-annotation-info strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.visual-saved-annotation-info small {
    flex: 0 0 auto;
    color: #c62f49;
    font-weight: 800;
}
.visual-gallery-loading { animation: spin 1s linear infinite; }

/* Shared interaction and responsive polish */
::selection {
    color: var(--text);
    background: rgba(86, 100, 232, .2);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(86, 100, 232, .24);
    outline-offset: 2px;
}

button:disabled,
.btn:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
    box-shadow: none;
}

.auth-separator { color: #b0bac9; }

.login-box h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -.025em;
}

@media (hover: none) {
    .project-edit-btn,
    .project-delete-btn {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 900px) {
    header.app-header.history-app-header {
        grid-template-columns: minmax(125px, auto) minmax(180px, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
    }
    header.app-header.history-app-header .header-actions { grid-column: auto; }
    .history-page .project-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .compare-page-header.result-summary-card {
        align-items: flex-start;
        flex-direction: column;
    }
    .compare-page .compare-tabs { grid-template-columns: 1fr; }
    .compare-header-reference {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 50px;
        text-align: left;
    }
    .active-project-heading { grid-template-columns: minmax(0, 1fr); }
    .active-project-title-row { grid-column: 1; grid-row: 1; }
    .active-project-heading .history-display-bar {
        width: min(540px, 100%);
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
    .history-display-bar { grid-column: 2; grid-row: 2; }
    .projects-heading > .btn { grid-column: 2; grid-row: 1; align-self: center; }
    .project-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
    .project-delete-btn { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
    .compare-canvas-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
    .compare-canvas-controls .canvas-mode-options {
        flex: 1 1 100%;
        justify-content: center;
    }
    .compare-canvas-controls .canvas-mode-option {
        flex: 1 1 auto;
    }
    .results-page .result-summary-card { grid-template-columns: 1fr; }
    .results-page .result-summary-card .params-grid { justify-content: flex-start; }
    .results-page .results-metric-heading.metric-in-panel {
        grid-template-columns: minmax(0, 1fr);
    }
    .results-page .results-metric-heading.metric-in-panel .result-canvas-controls {
        width: 100%;
        box-sizing: border-box;
        justify-self: stretch;
        justify-content: center;
        flex-wrap: wrap;
    }
    .results-page .canvas-mode-options {
        flex: 1 1 auto;
        justify-content: center;
    }
    .results-page .canvas-mode-option {
        flex: 1 1 auto;
    }
    .results-page .overview-journey-grid.has-2,
    .results-page .overview-journey-grid.has-3 { grid-template-columns: minmax(0, 1fr); }
    .results-page .overview-journey-grid.has-1 .overview-stage-frame,
    .results-page .overview-journey-grid.has-2 .overview-stage-frame,
    .results-page .overview-journey-grid.has-3 .overview-stage-frame { min-height: 300px; }
    .results-page .overview-primary-panel .journey-summary {
        align-items: flex-start;
        flex-direction: column;
    }
    .history-app-header #auth-indicator { display: none; }
    .projects-heading { grid-template-columns: 1fr; }
    .projects-heading > .page-title-group { grid-column: 1; grid-row: 1; }
    .overview-heading-controls {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .results-toolbar-upload { flex-basis: 150px; max-width: 150px; }
    .results-page .result-export-text { display: none; }
    header.app-header.history-app-header {
        grid-template-columns: auto 1fr;
    }
    .history-app-header .brand .title { display: none; }
    .history-app-header .history-header-tabs {
        width: 100%;
        justify-self: stretch;
    }
    .history-app-header .history-header-tab { flex: 1 1 0; padding-inline: 7px; }
    .history-app-header .header-actions {
        grid-column: 1 / -1 !important;
        grid-row: 2;
    }
}

@media (max-width: 540px) {
	.create-project-modal {
	    gap: 16px;
	    padding: 18px;
	}

	.create-project-modal-icon {
	    display: none;
	}

	.create-project-modal-header {
	    grid-template-columns: minmax(0, 1fr) auto;
	}

	.create-project-actions .btn {
	    flex: 1 1 0;
	    min-width: 0;
	}
    .result-image-mode-btn { flex: 1 1 0; padding-inline: 5px; }
    .results-toolbar-upload { flex-basis: 150px; max-width: 150px; }
    .results-metric-heading { gap: 5px; padding-inline: 5px; }
    .results-metric-heading .report-section-title { flex-basis: 120px; }
    .results-metric-heading .report-section-title p { display: none; }
    .results-metric-heading .report-section-title h3 { font-size: 12px; }
    .results-page .result-action-group { gap: 0; }
    .results-page .result-export-btn { padding-inline: 5px; }
    .results-page .result-export-text { display: none; }
    .results-page .report-section-title p { display: none; }
    .results-page .results-metric-heading.metric-in-panel .report-section-title p {
        display: block;
        font-size: 9px;
    }
    .results-page .overview-loading,
    .results-page .overview-stage-frame,
    .results-page .report-mini-frame { min-height: 300px; }
    header.app-header #auth-indicator { display: none; }
    header.app-header > .toolbar:last-child { justify-content: flex-end; }
    .compare-header-reference { margin-left: 0; }
    .projects-heading { grid-template-columns: 1fr; }
    .projects-heading > .page-title-group { grid-column: 1; grid-row: 1; }
    .overview-heading-controls { grid-column: 1; grid-row: 2; }
    .projects-heading > .btn { grid-column: 1; grid-row: 3; width: 100%; }
    .benchmark-gallery-modal {
        width: 100%;
        max-height: calc(100vh - 24px);
        padding: 14px;
    }
    .benchmark-gallery-grid { grid-template-columns: 1fr; }
    .benchmark-gallery-tabs { width: 100%; }
    .benchmark-gallery-tab { flex: 1 1 0; }
    .benchmark-meta-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .benchmark-model-tabs { width: 100%; }
    .benchmark-model-tabs button { flex: 1 1 0; }
    .benchmark-gallery-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }
    .benchmark-gallery-footer .btn { width: 100%; }
    .project-grid { grid-template-columns: 1fr; }
    .project-thumbnails { height: 84px; }
    .active-project-heading { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
    .active-project-title-row { gap: 9px; }
    .history-display-bar {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .history-display-controls { width: 100%; }
    .history-display-bar .segmented-control { width: auto; }
    .history-display-bar .history-filters { display: contents; }
    .segmented-btn { justify-content: center; }
    .project-content { min-height: calc(100vh - 138px); }
    .history-pagination {
        width: min(100%, 360px);
    }
    .history-pagination .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 8px;
    }
    .history-page-indicator {
        flex: 0 0 90px;
        min-width: 90px;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.disabled-row td {
    opacity: 0.55;
}

.create-user-modal {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}
.create-user-modal form { display: flex; max-height: calc(100vh - 32px); flex-direction: column; }
.create-user-header,
.create-user-footer { display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.create-user-header { justify-content: space-between; border-bottom: 1px solid var(--border); }
.create-user-heading { display: flex; align-items: center; gap: 13px; }
.create-user-heading h2 { margin: 0; font-size: 20px; }
.create-user-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.create-user-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--accent);
    background: rgba(77, 163, 255, .12);
    border: 1px solid rgba(77, 163, 255, .28);
    border-radius: 12px;
}
.create-user-body { display: grid; gap: 14px; padding: 18px 22px; overflow: auto; }
.create-user-section {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, .018);
    border: 1px solid var(--border);
    border-radius: 13px;
}
.create-user-section-title { display: flex; align-items: center; gap: 10px; }
.create-user-section-title > .material-icons { color: var(--accent); font-size: 21px; }
.create-user-section-title div:not(.feature-bulk-actions) { display: grid; gap: 2px; }
.create-user-section-title small,
.create-user-section label small { color: var(--muted); font-size: 11px; font-style: normal; }
.create-user-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.create-user-fields label,
.create-user-password-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.create-user-fields label > span,
.create-user-password-field > span { color: var(--text); font-weight: 700; }
.create-user-section .field-error { color: var(--danger); }
.create-user-fields em,
.create-user-password-field em { color: var(--danger); font-style: normal; }
.create-user-password-input { display: grid; grid-template-columns: minmax(0, 1fr) 36px auto; gap: 6px; }
.create-user-password-input input { min-width: 0; }
.create-user-password-input .icon-btn { width: 36px; min-width: 36px; padding: 0; }
.generate-password-btn { display: inline-flex; align-items: center; gap: 5px; }
.generate-password-btn .material-icons { font-size: 16px; }
.password-strength { display: flex; align-items: center; gap: 10px; }
.password-strength > span { height: 4px; flex: 1; overflow: hidden; background: var(--panel2); border-radius: 999px; }
.password-strength i { display: block; height: 100%; background: var(--danger); border-radius: inherit; transition: width .2s ease; }
.password-strength.medium i { background: #f59e0b; }
.password-strength.strong i { background: var(--ok); }
.create-user-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.create-user-role-grid button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    padding: 13px;
    color: var(--muted);
    text-align: left;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
}
.create-user-role-grid button .material-icons { grid-row: 1 / 3; align-self: center; }
.create-user-role-grid button strong { color: var(--text); }
.create-user-role-grid button small { line-height: 1.35; }
.create-user-role-grid button.active { color: var(--accent); background: rgba(77, 163, 255, .1); border-color: rgba(77, 163, 255, .48); }
.create-user-status-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.create-user-status-toggle > input,
.create-user-feature-grid input { position: absolute; opacity: 0; pointer-events: none; }
.create-user-status-toggle > span:last-child { display: grid; gap: 2px; }
.modern-switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; background: #303744; border-radius: 999px; transition: background .2s ease; }
.modern-switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .2s ease; }
.create-user-status-toggle input:checked + .modern-switch { background: var(--danger); }
.create-user-status-toggle input:checked + .modern-switch i { transform: translateX(16px); }
.feature-section-heading { flex-wrap: wrap; }
.feature-bulk-actions { display: flex !important; flex-direction: row !important; gap: 6px; margin-left: auto; }
.feature-bulk-actions .btn { padding: 4px 8px; font-size: 10px; }
.create-user-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.create-user-feature-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 11px;
    color: var(--muted);
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
}
.create-user-feature-grid label.active { color: var(--accent); background: rgba(77, 163, 255, .08); border-color: rgba(77, 163, 255, .36); }
.create-user-feature-grid .material-icons { font-size: 18px; }
.create-user-feature-grid strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.create-user-error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--danger); background: rgba(255, 92, 92, .1); border: 1px solid rgba(255, 92, 92, .3); border-radius: 9px; font-size: 12px; }
.create-user-error .material-icons { font-size: 18px; }
.create-user-footer { border-top: 1px solid var(--border); background: var(--panel); }
.create-user-summary { display: flex; align-items: center; gap: 7px; min-width: 0; margin-right: auto; color: var(--muted); font-size: 11px; }
.create-user-summary .material-icons { color: var(--accent); font-size: 17px; }
.create-user-submit { display: inline-flex; align-items: center; gap: 6px; min-width: 150px; justify-content: center; }
.create-user-submit .material-icons { font-size: 18px; }
.spin { animation: spin 1s linear infinite; }

.user-default-settings-modal {
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.default-settings-sections {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

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

.default-settings-grid label {
    min-width: 0;
}

.default-settings-grid select,
.default-settings-grid input {
    width: 100%;
}

.default-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    position: sticky;
    bottom: -16px;
    margin: 18px -16px -16px;
    padding: 14px 16px;
    background: var(--panel);
    border-top: 1px solid var(--border);
}

.default-settings-loading,
.default-settings-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 160px;
    color: var(--muted);
}

.default-settings-error {
    min-height: 80px;
    color: var(--danger);
}

/* ===== Projets Comparaison / Génération ===== */
.tool-projects-overview {
    display: grid;
    gap: 20px;
}

.tool-projects-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.tool-projects-heading h1 {
    margin: 4px 0 0;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.1;
    letter-spacing: -.035em;
}

.tool-projects-heading p {
    margin: 7px 0 0;
}

.tool-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}

.tool-project-card {
    position: relative;
    min-width: 0;
    min-height: 190px;
    display: flex;
    padding: 0;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.tool-project-card:hover {
    transform: translateY(-2px);
    border-color: rgba(86, 100, 232, .36);
    box-shadow: var(--shadow);
}

.tool-project-open {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.tool-project-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(86, 100, 232, .16);
    border-radius: 17px;
    font-size: 28px;
}

.tool-project-card-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.tool-project-card-copy strong,
.tool-project-card-copy small,
.tool-project-card-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-project-card-copy strong {
    font-size: 17px;
}

.tool-project-card-copy small {
    color: var(--muted);
    font-size: 13px;
}

.tool-project-card-copy > span {
    color: var(--muted);
    font-size: 11px;
}

.tool-project-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    min-height: 34px;
    width: 34px;
    min-width: 34px;
    opacity: 0;
    transition: opacity .16s ease;
}

.tool-project-card:hover .tool-project-delete,
.tool-project-card:focus-within .tool-project-delete {
    opacity: 1;
}

.tool-project-create-card {
    min-height: 190px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--accent);
    background: linear-gradient(145deg, #f8f9ff, var(--accent-soft));
    border: 1px dashed rgba(86, 100, 232, .52);
    cursor: pointer;
    text-align: center;
}

.tool-project-create-card > .material-icons {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: rgba(86, 100, 232, .12);
    border-radius: 17px;
    font-size: 28px;
}

.tool-project-create-card strong {
    font-size: 16px;
}

.tool-project-create-card small {
    max-width: 230px;
    color: var(--muted);
    line-height: 1.4;
}

.tool-project-preview {
    width: 92px;
    height: 112px;
    flex: 0 0 92px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.tool-project-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-project-preview-collage {
    width: 126px;
    height: 112px;
    flex: 0 0 126px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    overflow: hidden;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 13px;
}

.tool-project-preview-thumb {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
    background: #ffffff;
    border: 1px solid rgba(213, 224, 235, .9);
    border-radius: 7px;
}

.tool-project-preview-thumb.reference {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.tool-project-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-project-preview-thumb > .material-icons:not(.preview-reference) {
    font-size: 18px;
}

.tool-project-preview-thumb .preview-reference {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: #ffffff;
    background: var(--accent);
    border-radius: 50%;
    font-size: 10px;
    box-shadow: 0 1px 4px rgba(20, 45, 74, .24);
}

.tool-project-modal {
    width: min(560px, 100%);
    display: grid;
    gap: 18px;
    padding: 22px;
}

.tool-project-generation-modal {
    width: min(820px, 100%);
    max-height: min(90vh, 860px);
    overflow: auto;
}

.tool-project-source-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tool-project-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding: 2px;
}

.tool-project-source-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
}

.tool-project-source-card:hover,
.tool-project-source-card.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(86, 100, 232, .6);
}

.tool-project-source-image {
    width: 64px;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
    background: var(--panel2);
    border-radius: 9px;
}

.tool-project-source-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-project-source-card > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.tool-project-source-card strong,
.tool-project-source-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-project-source-card small {
    color: var(--muted);
}

@media (max-width: 640px) {
    .tool-projects-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .tool-project-grid,
    .tool-project-source-grid {
        grid-template-columns: 1fr;
    }

    .tool-project-delete {
        opacity: 1;
    }
}

@media (max-width: 800px) {
    .default-settings-grid { grid-template-columns: 1fr; }
    .create-user-fields,
    .create-user-role-grid,
    .create-user-feature-grid { grid-template-columns: 1fr; }
    .create-user-footer { flex-wrap: wrap; }
    .create-user-summary { width: 100%; }
}

/* ===== Navigation latérale commune ===== */
:root {
    --app-sidebar-width: 72px;
}

header.app-header,
header.app-header.compact-header,
header.app-header.history-app-header {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    width: var(--app-sidebar-width);
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at 15% 0, rgba(86, 100, 232, .11), transparent 32%),
        rgba(255, 255, 255, .96);
    border-right: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: 12px 0 34px rgba(23, 32, 51, .07);
    backdrop-filter: blur(20px) saturate(150%);
    transition: width .22s ease, box-shadow .22s ease;
}

header.app-header:hover,
header.app-header:focus-within,
header.app-header.compact-header:hover,
header.app-header.compact-header:focus-within,
header.app-header.history-app-header:hover,
header.app-header.history-app-header:focus-within {
    width: 236px;
    box-shadow: 18px 0 42px rgba(23, 32, 51, .15);
}

header.app-header .brand {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    padding: 2px;
}

header.app-header:hover .brand,
header.app-header:focus-within .brand {
    justify-content: flex-start;
    gap: 12px;
    padding-inline: 10px;
}

header.app-header .logo,
header.app-header.history-app-header .logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
}

header.app-header .title,
header.app-header.history-app-header .title {
    display: none;
}

header.app-header:hover .title,
header.app-header:focus-within .title {
    display: block;
    white-space: nowrap;
}

header.app-header .header-spacer {
    display: none;
}

header.app-header > .toolbar:last-child,
header.app-header .header-actions,
header.app-header.history-app-header .header-actions {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
    margin-top: auto;
}

header.app-header .header-actions > .admin-link,
header.app-header .header-actions > #auth-indicator {
    grid-column: 1;
}

header.app-header .header-actions > .admin-link {
    width: 100%;
    min-height: 34px;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-color: rgba(91, 61, 179, .14);
    background: rgba(243, 239, 255, .72);
    font-size: 0;
}

header.app-header .header-actions > .admin-link .material-icons {
    margin: 0;
    font-size: 18px !important;
}

header.app-header .language-select,
header.app-header.history-app-header .language-select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    font-size: 11px;
}

header.app-header #auth-indicator,
header.app-header.history-app-header #auth-indicator {
    display: none;
}

header.app-header .header-actions > .btn,
header.app-header.history-app-header .header-actions > .btn {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
}

.results-page .overview-journey-frame {
    flex-direction: column;
    gap: 6px;
}

header.app-header .material-icons {
    font-size: 17px;
}

.history-content-tabs {
    width: fit-content;
    justify-self: start;
    padding: 3px;
}

.history-content-tabs .history-header-tab {
    min-height: 34px;
    padding: 6px 10px;
}

.history-refresh-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    flex: 0 0 30px;
    padding: 0;
    color: var(--accent);
    background: #ffffff;
    border-color: var(--border);
    border-radius: 7px;
}

.history-refresh-btn .material-icons {
    font-size: 17px;
}

.history-refresh-btn:hover {
    border-color: rgba(86, 100, 232, .4);
    background: var(--accent-soft);
}

.history-page .project-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}

.history-page .project-thumbnails {
    height: 132px;
    padding: 8px;
}

.history-page .create-resource-card {
    min-height: 190px;
    padding: 20px;
}

.history-page .project-card-info {
    position: relative;
    padding: 13px 14px 14px;
}

.history-page .project-card-info h2 {
    padding-right: 72px;
    margin-bottom: 7px;
    font-size: 16px;
}

.history-page .project-card-actions {
    position: absolute;
    top: 9px;
    right: 10px;
}

.history-page .project-rename-form + .project-card-actions { display: none; }

/* ===== Harmonisation des tuiles des espaces projets ===== */
main.workspace-index-page {
    padding: 18px clamp(18px, 3vw, 48px) 56px;
}

.history-page .projects-overview,
.tool-projects-overview {
    gap: 16px;
}

.history-page .section-page-title h1,
.tool-projects-overview .section-page-title h1 {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    letter-spacing: -.035em;
}

.history-page .project-grid,
.tool-project-grid {
    align-items: stretch;
}

.history-page .project-card,
.history-page .create-resource-card,
.tool-project-card,
.tool-project-create-card {
    width: 100%;
    height: 200px;
    min-height: 200px;
    border-radius: var(--radius-lg);
}

.history-page .project-thumbnails {
    height: 124px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.history-page .project-thumb img { object-fit: contain; }

.history-page .create-resource-icon,
.tool-project-create-card > .material-icons {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 26px;
}

.history-page .create-resource-title,
.history-page .project-card-info h2,
.tool-project-create-card strong,
.tool-project-card-copy strong {
    font-size: 16px;
    line-height: 1.25;
}

.history-page .create-resource-description,
.tool-project-create-card small,
.tool-project-card-copy small {
    font-size: 12px;
    line-height: 1.4;
}

.history-page .project-card-meta > span,
.history-page .project-owner,
.tool-project-card-copy > span {
    font-size: 11px;
}

.tool-project-open {
    gap: 14px;
    padding: 20px;
}

.history-page .upload-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
    justify-content: stretch;
}

.history-page .upload-card {
    gap: 7px;
    padding: 8px;
}

.history-page .upload-image-canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background: #ffffff;
}

.history-page .upload-image-canvas .reference-preview {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.history-page .upload-image-canvas .reference-preview img {
    position: absolute;
    inset: 6px;
    display: block;
    width: calc(100% - 12px) !important;
    height: calc(100% - 12px) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
    border-radius: 0;
    cursor: zoom-in;
}

.history-page .upload-create-card {
    min-height: 190px;
}

/* Toutes les listes de projets partagent désormais la structure de History. */
.history-page .benchmark-card-trigger {
    height: 124px;
}

.history-page .project-card-info {
    min-height: 76px;
}

.workspace-project-thumb {
    position: relative;
}

.workspace-project-thumb.reference {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.workspace-reference-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #ffffff;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(23, 32, 51, .24);
    font-size: 12px !important;
}

.benchmark-project-help {
    margin: -8px 0 0;
    font-size: 12px;
}

.benchmark-project-selection-summary {
    min-height: 24px;
    margin-top: -8px;
}

.benchmark-secondary-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.benchmark-secondary-filters .history-limit {
    min-width: 0;
}

.benchmark-secondary-filters .history-limit select {
    max-width: 230px;
}

.benchmark-source-project-card {
    display: block;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.benchmark-source-project-card.active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 2px rgba(86, 100, 232, .24), var(--shadow-sm);
}

.benchmark-source-project-card .project-card-info {
    width: 100%;
}

.benchmark-project-card-copy {
    min-width: 0;
    width: 100%;
}

.benchmark-project-selected {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--accent);
    background: rgba(255, 255, 255, .94);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(23, 32, 51, .18);
    font-size: 20px;
}

@media (max-width: 760px) {
    .benchmark-secondary-filters {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .benchmark-secondary-filters .history-limit,
    .benchmark-secondary-filters .history-limit select {
        width: 100%;
        max-width: none;
    }
}

header.app-header ~ main {
    width: calc(100% - var(--app-sidebar-width));
    max-width: none;
    margin-right: 0;
    margin-left: var(--app-sidebar-width);
}

@media (max-width: 900px) {
    :root {
        --app-sidebar-width: 64px;
    }

    header.app-header,
    header.app-header.compact-header,
    header.app-header.history-app-header {
        width: var(--app-sidebar-width);
        display: flex;
        align-items: stretch;
        gap: 10px;
        padding: 10px 6px;
    }

    header.app-header:hover,
    header.app-header:focus-within,
    header.app-header.compact-header:hover,
    header.app-header.compact-header:focus-within,
    header.app-header.history-app-header:hover,
    header.app-header.history-app-header:focus-within {
        width: var(--app-sidebar-width);
    }

    header.app-header:hover .title,
    header.app-header:focus-within .title,
    header.app-header:hover .app-sidebar-label,
    header.app-header:focus-within .app-sidebar-label {
        display: none;
        opacity: 0;
    }

    .app-sidebar-link {
        min-height: 44px;
        justify-content: center;
        padding-inline: 0;
    }

    .app-sidebar-label {
        display: none;
    }

    header.app-header:hover .brand,
    header.app-header:focus-within .brand {
        justify-content: center;
        padding-inline: 2px;
    }

    header.app-header .brand {
        justify-content: center;
        padding: 0;
    }

    header.app-header .brand .title {
        display: none;
    }

    header.app-header > .toolbar:last-child,
    header.app-header .header-actions,
    header.app-header.history-app-header .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: auto;
    }

    header.app-header .header-actions > .admin-link {
        grid-column: 1;
        justify-content: center;
        padding: 0;
        overflow: hidden;
        font-size: 0;
    }

    header.app-header .header-actions > .admin-link .material-icons {
        margin: 0;
        font-size: 18px !important;
    }

    header.app-header .language-select {
        width: 100%;
        padding: 5px 4px;
        text-align: center;
        background-image: none;
    }

    header.app-header #auth-indicator,
    header.app-header.history-app-header #auth-indicator {
        display: none;
    }

    header.app-header .header-actions > .btn,
    header.app-header.history-app-header .header-actions > .btn {
        width: 100%;
        padding: 0;
    }

    header.app-header ~ main {
        width: calc(100% - var(--app-sidebar-width));
        margin-left: var(--app-sidebar-width);
        padding: 14px;
    }

    .history-page .project-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .history-page .upload-grid {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
}

@media (max-width: 480px) {
    :root {
        --app-sidebar-width: 56px;
    }

    header.app-header,
    header.app-header.compact-header,
    header.app-header.history-app-header {
        padding-inline: 5px;
    }

    header.app-header .logo,
    header.app-header.history-app-header .logo {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    header.app-header ~ main {
        padding: 10px;
    }

    .history-page .project-grid,
    .history-page .upload-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .history-page .project-thumbnails {
        height: 118px;
    }

    .history-page .upload-image-canvas {
        height: 100%;
        aspect-ratio: auto;
    }
}

@media (max-width: 620px) {
    .history-page .upload-card,
    .history-page .upload-create-card {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .upload-create-visual {
        padding-inline: 10px;
    }

    .upload-create-visual small {
        max-width: 96px;
    }
}

@media (max-width: 760px) {
    .compare-control-deck {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .compare-control-title {
        display: none;
    }

    .compare-metric-switcher.compare-metric-switcher-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .compare-control-deck .compare-view-actions-compact {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .compare-control-deck .compare-selection-btn {
        justify-self: start;
    }

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

    .compare-analysis-header .compare-selection-btn {
        align-self: flex-start;
    }

    .compare-metric-switcher {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-view-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .compare-view-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .compare-view-actions .segmented-btn {
        justify-content: center;
    }

    .compare-reading-indicator {
        align-self: flex-start;
    }

    .compare-selection-heading,
    .compare-library-header {
        align-items: stretch;
        flex-direction: column;
    }

    .compare-selection-actions,
    .compare-library-filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .compare-selection-actions .btn {
        flex: 1 1 210px;
    }

    .compare-library-filters .compare-search {
        width: 100%;
        max-width: none;
        flex: 1 1 220px;
    }

    .compare-selection-panel .compare-selected-strip,
    .compare-library-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-project-card-with-previews .tool-project-open {
        gap: 11px;
        padding: 16px;
    }

    .tool-project-preview-collage {
        width: 112px;
        flex-basis: 112px;
    }
}

/* ===== Identité Ittention 2026 — inspirée de l'interface historique ===== */
:root {
    --bg: #f2f3f8;
    --panel: #ffffff;
    --panel2: #f7f8fb;
    --text: #304156;
    --muted: #79869a;
    --accent: #0033ff;
    --accent2: #30d9f8;
    --accent-soft: #edf1ff;
    --accent-soft2: #eafcff;
    --border: #e3e7ef;
    --border-strong: #d3dae6;
    --shadow-sm: 0 1px 10px rgba(179, 192, 206, .30);
    --shadow: 0 1px 10px rgba(179, 192, 206, .52), 0 6px 10px rgba(179, 192, 206, .08), 0 1px 18px rgba(179, 192, 206, .06);
    --shadow-lg: 0 20px 50px rgba(35, 55, 91, .16);
    --radius-sm: 10px;
    --radius: 15px;
    --radius-lg: 20px;
    --app-sidebar-width: 256px;
    --ittention-gradient: linear-gradient(145deg, #0033ff 0%, #116df5 52%, #30d9f8 100%);
}

body {
    font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .0125rem;
    background: var(--bg);
    color: var(--text);
}

.panel,
.overview-card,
.history-page .project-card,
.history-page .upload-card,
.tool-project-card,
.tool-project-create-card {
    border-color: rgba(222, 228, 238, .94);
    box-shadow: var(--shadow);
}

.btn.primary {
    background: linear-gradient(135deg, #0033ff, #176ff3);
    box-shadow: 0 8px 20px rgba(0, 51, 255, .22);
}

.btn.primary:hover {
    background: linear-gradient(135deg, #002bd8, #075ee2);
    box-shadow: 0 10px 24px rgba(0, 51, 255, .28);
}

input:focus,
select:focus,
textarea:focus,
.select:focus {
    border-color: rgba(0, 51, 255, .62);
    box-shadow: 0 0 0 3px rgba(0, 51, 255, .11);
}

header.app-header,
header.app-header.compact-header,
header.app-header.history-app-header {
    inset: 0 auto 0 0;
    width: var(--app-sidebar-width);
    height: 100dvh;
    padding: 22px 16px 16px;
    gap: 22px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #ffffff;
    background: var(--ittention-gradient);
    border: 0;
    box-shadow: 5px 0 24px rgba(0, 51, 145, .16);
    backdrop-filter: none;
    transition: none;
}

header.app-header:hover,
header.app-header:focus-within,
header.app-header.compact-header:hover,
header.app-header.compact-header:focus-within,
header.app-header.history-app-header:hover,
header.app-header.history-app-header:focus-within {
    width: var(--app-sidebar-width);
    box-shadow: 5px 0 24px rgba(0, 51, 145, .16);
}

header.app-header .brand,
header.app-header:hover .brand,
header.app-header:focus-within .brand {
    min-height: 52px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 10px 16px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

header.app-header .logo,
header.app-header.history-app-header .logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: transparent url("/app/templates/assets/ittention-logo-blanc-2026.png") center / contain no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Administration unifiée : navigation, organisations et processing. */
[ng-cloak] { display: none !important; }
body.admin-body main { max-width: none; }
.admin-console { width: 100%; max-width: none; margin: 0; }
.admin-console-header,
.admin-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.admin-console-header h1 { margin: 4px 0 5px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; }
.admin-console-header p,
.admin-section-heading p { margin: 0; color: var(--muted); }
.admin-console-context { display: grid; gap: 6px; min-width: 250px; }
.admin-console-context label,
.admin-users-toolbar > label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-console-context select,
.admin-users-toolbar select { width: 100%; min-height: 42px; }
.admin-tabs { display: flex; width: 100%; align-items: center; gap: 5px; margin: 0 0 20px; padding: 5px; overflow-x: auto; background: var(--panel2); border: 1px solid var(--border); border-radius: 13px; }
.admin-tabs button { position: relative; display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 18px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
.admin-tabs button:hover { color: var(--text); background: rgba(86, 100, 232, .06); }
.admin-tabs button.active { color: var(--accent); background: var(--panel); box-shadow: 0 2px 9px rgba(23, 32, 51, .09); }
.admin-tabs .material-icons { font-size: 19px; }
.admin-tabs em,
.admin-count-pill { display: inline-grid; min-width: 22px; height: 22px; padding: 0 6px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-size: 10px; font-style: normal; }
.admin-count-pill.danger { color: var(--danger); background: rgba(244,82,82,.1); }
.admin-tab-panel { width: 100%; min-width: 0; animation: admin-panel-in .18s ease both; }
@keyframes admin-panel-in { from { opacity: 0; transform: translateY(5px); } }
.admin-feedback { position: fixed; z-index: 230; top: 22px; right: 24px; display: flex; align-items: center; gap: 8px; max-width: 420px; padding: 11px 14px; border: 1px solid; border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); font-size: 13px; }
.admin-feedback.success { color: var(--ok); border-color: rgba(76,175,80,.35); }
.admin-feedback.error { color: var(--danger); border-color: rgba(244,82,82,.35); }
.admin-feedback .material-icons { font-size: 18px; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 14px 0; }
.admin-kpi { display: flex; align-items: center; gap: 13px; min-height: 94px; padding: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-sm); }
.admin-kpi > .material-icons { display: grid; width: 42px; height: 42px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 11px; }
.admin-kpi > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 8px; }
.admin-kpi strong { font-size: 27px; line-height: 1; }
.admin-kpi small { grid-column: 1 / -1; margin-top: 6px; color: var(--muted); font-size: 11px; }
.admin-kpi mark { padding: 2px 6px; color: var(--ok); background: rgba(76,175,80,.09); border-radius: 99px; font-size: 10px; }
.admin-activity-panel { margin-top: 14px; overflow: hidden; }
.admin-inactive-panel .page-eyebrow { color: #d97706; }
.admin-inactive-panel .admin-person > span { color: #b45309; background: rgba(245, 158, 11, .1); }
.admin-activity-panel .panel-header,
.admin-processing-table .panel-header { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.admin-activity-panel h2,
.admin-section-heading h2 { margin: 3px 0; }
.admin-table-scroll { width: 100%; overflow-x: auto; }
.admin-clean-table { width: 100%; border-collapse: collapse; }
.admin-clean-table th,
.admin-clean-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.admin-clean-table th { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-clean-table tbody tr { transition: background .15s ease; }
.admin-clean-table tbody tr[ng-click] { cursor: pointer; }
.admin-clean-table tbody tr:hover { background: var(--panel2); }
.admin-clean-table tbody tr:last-child td { border-bottom: 0; }
.admin-clean-table code { color: var(--accent); font-size: 11px; }
.admin-person { display: flex; align-items: center; gap: 10px; }
.admin-person > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 10px; font-size: 11px; font-weight: 900; }
.admin-person > div { display: grid; gap: 2px; }
.admin-person small,
.admin-block-muted { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.admin-org-badge { display: inline-flex; padding: 4px 8px; color: #7257c8; background: rgba(114,87,200,.09); border: 1px solid rgba(114,87,200,.2); border-radius: 999px; font-size: 10px; font-weight: 700; }
.admin-users-panel { overflow: visible; }
.admin-users-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 180px auto; align-items: end; gap: 12px; margin: 4px 0 14px; padding: 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: 11px; }
.admin-search { position: relative; display: block; }
.admin-search .material-icons { position: absolute; left: 11px; bottom: 10px; color: var(--muted); font-size: 19px; }
.admin-search input { width: 100%; min-height: 42px; padding-left: 38px; }
.admin-users-toolbar > span { align-self: center; justify-self: end; }
.admin-users-table { min-width: 1180px; }
.admin-accounts-table { min-width: 850px; }
.admin-accounts-table tbody tr { cursor: pointer; }
.admin-accounts-table tbody tr:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.admin-role-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 750; }
.admin-role-badge .material-icons { font-size: 15px; }
.admin-role-badge.is-admin { color: #c47716; }
.admin-users-table tbody > tr { cursor: pointer; }
.admin-inline-org { width: 145px; min-height: 34px; padding: 5px 8px; font-size: 11px; }
.admin-activity-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(190px, .55fr) minmax(170px, .45fr) auto; align-items: end; gap: 12px; margin-bottom: 14px; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.admin-activity-toolbar > label { position: relative; display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-activity-toolbar input,
.admin-activity-toolbar select { width: 100%; min-width: 0; min-height: 42px; }
.admin-activity-toolbar .admin-search i { position: absolute; z-index: 1; left: 11px; bottom: 11px; color: var(--muted); font-size: 19px; font-style: normal; }
.admin-activity-toolbar .admin-search input { padding-left: 38px; }
.admin-activity-toolbar > .admin-count-pill { align-self: center; min-width: 34px; }
.admin-activity-table-panel { padding: 0; overflow: hidden; }
.admin-activity-table { min-width: 780px; }
.admin-activity-table tbody tr { cursor: pointer; }
.admin-activity-table tbody tr:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.admin-activity-table th:nth-last-child(-n + 3),
.admin-activity-table td:nth-last-child(-n + 3) { text-align: center; }
.admin-row-arrow { color: var(--muted); font-size: 20px; transition: transform .15s ease, color .15s ease; }
.admin-activity-table tbody tr:hover .admin-row-arrow { color: var(--accent); transform: translateX(3px); }
.admin-user-explorer { display: grid; grid-template-columns: minmax(275px, 330px) minmax(0, 1fr); gap: 14px; min-width: 0; }
.admin-activity-users { display: grid; align-content: start; gap: 6px; max-height: calc(100vh - 300px); min-height: 420px; padding: 8px; overflow-y: auto; }
.admin-activity-user { width: 100%; min-height: 70px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; color: var(--text); background: transparent; border-color: transparent; text-align: left; cursor: pointer; }
.admin-activity-user:hover { background: var(--panel2); border-color: var(--border); }
.admin-activity-user.selected { color: var(--accent); background: var(--accent-soft); border-color: rgba(86,100,232,.3); box-shadow: inset 3px 0 var(--accent); }
.admin-activity-user.disabled { opacity: .62; }
.admin-user-avatar { display: grid; width: 38px; height: 38px; place-items: center; color: var(--accent); background: #ffffff; border: 1px solid var(--border); border-radius: 11px; font-size: 11px; font-weight: 900; }
.admin-activity-user-copy { min-width: 0; display: grid; gap: 2px; }
.admin-activity-user-copy strong,
.admin-activity-user-copy small,
.admin-activity-user-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity-user-copy strong { font-size: 13px; }
.admin-activity-user-copy small { color: var(--muted); font-size: 10px; font-weight: 650; }
.admin-activity-user-copy em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 500; }
.admin-upload-total { display: grid; justify-items: end; color: var(--text); font-size: 15px; font-weight: 900; }
.admin-upload-total small { color: var(--muted); font-size: 8px; font-weight: 650; text-transform: uppercase; }
.admin-user-uploads { min-height: 420px; min-width: 0; }
.admin-user-uploads-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.admin-user-uploads-header > div:last-child { color: var(--accent); font-size: 18px; }
.admin-user-uploads-header > div:last-child small { color: var(--muted); font-size: 11px; }
.admin-upload-list { display: grid; gap: 9px; }
.admin-upload-list-item { min-width: 0; display: grid; grid-template-columns: 104px minmax(180px, 1fr) auto auto; align-items: center; gap: 14px; padding: 9px; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-sm); }
.admin-upload-list-preview { width: 104px; height: 66px; display: grid; place-items: center; overflow: hidden; color: #8b96a9; background: linear-gradient(145deg, #f2f5fa, #e9eef6); border-radius: 8px; }
.admin-upload-list-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.admin-upload-list-preview > .material-icons { font-size: 28px; }
.admin-upload-list-copy { min-width: 0; display: grid; gap: 7px; }
.admin-upload-list-copy > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-upload-list-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; color: var(--muted); font-size: 9px; }
.admin-upload-kind { display: inline-flex; align-items: center; gap: 4px; text-transform: capitalize; }
.admin-upload-kind .material-icons { font-size: 14px; }
.admin-upload-result-link { min-height: 34px; padding: 6px 10px; font-size: 10px; white-space: nowrap; }
.admin-upload-result-link .material-icons { font-size: 14px; }
.admin-upload-no-result { min-width: 128px; text-align: center; font-size: 9px; }
.admin-upload-empty { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.admin-upload-empty .material-icons { color: var(--accent); font-size: 42px; }
.admin-upload-empty p { margin: 0; font-size: 11px; }
.admin-upload-empty.compact { min-height: 250px; }
.admin-user-uploads-modal { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; overflow: hidden; }
.admin-user-uploads-modal .admin-user-uploads-header { margin: 0; padding: 16px 18px; }
.admin-user-uploads-modal .admin-person h2 { margin: 2px 0; }
.admin-user-uploads-modal-actions { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
.admin-user-uploads-modal-actions > span > strong { color: var(--accent); font-size: 17px; }
.admin-user-uploads-modal-body { min-height: 260px; padding: 16px 18px 20px; overflow-y: auto; }
.admin-account-modal { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; overflow: hidden; }
.admin-account-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.admin-account-modal-header h2 { margin: 2px 0; }
.admin-account-modal-body { display: grid; gap: 14px; padding: 16px 18px 22px; overflow-y: auto; }
.admin-account-section { padding: 15px; background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; }
.admin-account-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.admin-account-section-title > div { display: flex; align-items: center; gap: 8px; }
.admin-account-section-title .material-icons { color: var(--accent); font-size: 20px; }
.admin-account-section-title h3 { margin: 0; font-size: 14px; }
.admin-account-section-title p { max-width: 520px; margin: 2px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.admin-account-profile-form { display: grid; grid-template-columns: 1fr 1.2fr 1fr auto; align-items: end; gap: 10px; }
.admin-account-profile-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-account-profile-form input,
.admin-account-profile-form select { width: 100%; min-width: 0; min-height: 40px; }
.admin-account-profile-form .btn { min-height: 40px; }
.admin-account-access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-account-access-grid article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.admin-account-access-grid article > div { display: grid; gap: 3px; }
.admin-account-access-grid small { color: var(--muted); font-size: 9px; }
.admin-account-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.admin-account-feature-grid button { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 9px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; font: inherit; font-size: 9px; font-weight: 700; text-align: left; }
.admin-account-feature-grid button:hover { border-color: var(--accent); }
.admin-account-feature-grid button.active { color: var(--accent); background: var(--accent-soft); border-color: rgba(86,100,232,.35); }
.admin-account-feature-grid button:disabled { cursor: not-allowed; opacity: .65; }
.admin-account-feature-grid .material-icons { flex: 0 0 auto; font-size: 17px; }
.admin-account-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.admin-account-stats article { display: grid; gap: 4px; padding: 11px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.admin-account-stats span { color: var(--muted); font-size: 9px; }
.admin-account-stats strong { color: var(--accent); font-size: 20px; }
.admin-account-logs { min-width: 680px; background: var(--panel); border: 1px solid var(--border); }
.admin-account-logs td { font-size: 10px; }
.admin-log-action { display: inline-flex; padding: 3px 7px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-weight: 700; }
.admin-account-logs-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 90px; color: var(--muted); font-size: 11px; }
.admin-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-account-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.admin-account-actions .material-icons { font-size: 17px; }
.admin-ppt-modal { width: min(1220px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; overflow: hidden; }
.admin-ppt-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.admin-ppt-header h2 { margin: 3px 0 4px; font-size: 20px; }
.admin-ppt-header p { margin: 0; color: var(--muted); font-size: 11px; }
.admin-ppt-body { min-height: 300px; padding: 16px 20px 20px; overflow-y: auto; }
.admin-ppt-type-switch { width: fit-content; display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; background: var(--panel2); border: 1px solid var(--border); border-radius: 11px; }
.admin-ppt-type-switch button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 13px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.admin-ppt-type-switch button.active { color: #ffffff; background: var(--accent); box-shadow: 0 4px 10px rgba(47,128,237,.22); }
.admin-ppt-type-switch .material-icons { font-size: 17px; }
.admin-ppt-state { min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; }
.admin-ppt-content { display: grid; gap: 13px; }
.admin-ppt-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: 11px; }
.admin-ppt-toolbar > label { width: min(430px, 100%); display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.admin-ppt-toolbar select { width: 100%; min-height: 40px; }
.admin-ppt-selection-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.admin-ppt-selection-actions > span { margin-right: 4px; color: var(--muted); font-size: 10px; }
.admin-ppt-selection-actions > span strong { color: var(--accent); font-size: 16px; }
.admin-ppt-upload { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(190px, .55fr) minmax(190px, .55fr) auto; align-items: center; gap: 9px; padding: 11px 12px; background: rgba(47,128,237,.055); border: 1px dashed rgba(47,128,237,.34); border-radius: 11px; }
.admin-ppt-upload > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.admin-ppt-upload > div > .material-icons { color: var(--accent); font-size: 27px; }
.admin-ppt-upload > div > div { min-width: 0; display: grid; gap: 2px; }
.admin-ppt-upload strong { font-size: 11px; }
.admin-ppt-upload small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.admin-ppt-upload input[type="text"] { width: 100%; min-height: 38px; }
.admin-ppt-file-button { min-width: 0; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ppt-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.admin-ppt-colors { display: grid; gap: 11px; padding: 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: 11px; }
.admin-ppt-colors > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-ppt-colors > header > div { display: flex; align-items: center; gap: 9px; }
.admin-ppt-colors > header > div > .material-icons { display: grid; width: 34px; height: 34px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 9px; font-size: 19px; }
.admin-ppt-colors > header > div > div { display: grid; gap: 2px; }
.admin-ppt-colors > header strong { font-size: 11px; }
.admin-ppt-colors > header small { color: var(--muted); font-size: 9px; }
.admin-ppt-colors > header .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.admin-ppt-colors > header .btn .material-icons { font-size: 16px; }
.admin-ppt-color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 9px; }
.admin-ppt-color-card { min-width: 0; padding: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-sm); }
.admin-ppt-color-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.admin-ppt-color-card-title strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-ppt-color-card-title .icon-btn { width: 26px; min-width: 26px; height: 26px; padding: 0; }
.admin-ppt-color-card-title .material-icons { font-size: 15px; }
.admin-ppt-color-preview { display: flex; height: 11px; margin-bottom: 9px; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; }
.admin-ppt-color-preview i { flex: 1; min-width: 0; }
.admin-ppt-color-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.admin-ppt-color-fields label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.admin-ppt-color-control { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px 4px 4px; background: var(--panel2); border: 1px solid var(--border); border-radius: 7px; }
.admin-ppt-color-control input[type="color"] { flex: 0 0 31px; width: 31px; height: 25px; padding: 0; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }
.admin-ppt-color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.admin-ppt-color-control input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.admin-ppt-color-control code { min-width: 0; overflow: hidden; color: var(--text); font-size: 8px; text-overflow: ellipsis; }
.admin-ppt-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; }
.admin-ppt-slide { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 7px; padding: 8px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 11px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.admin-ppt-slide:hover { border-color: var(--accent); }
.admin-ppt-slide:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-ppt-slide:not(.selected) { opacity: .58; }
.admin-ppt-slide.selected { border-color: rgba(47,128,237,.48); box-shadow: 0 0 0 2px rgba(47,128,237,.08), var(--shadow-sm); }
.admin-ppt-check { position: absolute; z-index: 2; top: 13px; right: 13px; color: #ffffff; background: rgba(15,23,42,.7); border-radius: 4px; font-size: 21px; box-shadow: 0 2px 7px rgba(15,23,42,.2); }
.admin-ppt-slide.selected .admin-ppt-check { color: var(--accent); background: #ffffff; }
.admin-ppt-slide-number { grid-row: 2 / 4; align-self: center; display: grid; width: 24px; height: 24px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 7px; font-size: 10px; font-weight: 900; }
.admin-ppt-preview { grid-column: 1 / -1; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: #eef2f7; border-radius: 8px; }
.admin-ppt-preview img { width: 100%; height: 100%; display: block; object-fit: contain; background: #ffffff; }
.admin-ppt-preview .material-icons { font-size: 28px; }
.admin-ppt-slide strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-ppt-slide small { min-width: 0; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.admin-ppt-slide.selected small { color: var(--accent); }
.admin-ppt-empty { grid-column: 1 / -1; min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); background: var(--panel2); border: 1px dashed var(--border); border-radius: 11px; font-size: 11px; }
.admin-ppt-empty .material-icons { color: var(--accent); font-size: 38px; }
.admin-ppt-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--border); }
.admin-ppt-footer > span { margin-right: auto; color: var(--muted); font-size: 9px; }
.admin-ppt-footer .btn { display: inline-flex; align-items: center; gap: 5px; }
.admin-ppt-footer .material-icons { font-size: 17px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.admin-org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 14px; }
.admin-org-card { display: flex; min-height: 245px; flex-direction: column; }
.admin-org-card-head { display: flex; justify-content: space-between; align-items: center; }
.admin-org-card-head > .material-icons { display: grid; width: 42px; height: 42px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 11px; }
.admin-org-card h3 { margin: 16px 0 6px; font-size: 18px; }
.admin-org-card > p { min-height: 38px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.admin-org-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 17px 0; }
.admin-org-stats span { display: grid; gap: 2px; padding: 9px; text-align: center; background: var(--panel2); border-radius: 8px; color: var(--muted); font-size: 9px; }
.admin-org-stats strong { color: var(--text); font-size: 17px; }
.admin-org-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; }
.admin-org-card footer button { display: inline-flex; align-items: center; gap: 3px; padding: 0; color: var(--accent); background: none; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.admin-org-card footer .material-icons { font-size: 14px; }
.admin-org-card.is-unassigned { border-style: dashed; }
.admin-organization-modal { display: grid; gap: 16px; width: min(520px, calc(100% - 28px)); }
.admin-organization-modal label,
.create-user-organization-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.admin-organization-modal textarea { resize: vertical; }
.admin-organization-modal footer { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.admin-processing-notice { margin-bottom: 12px; padding: 10px 13px; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); border-radius: 9px; font-size: 11px; }
.admin-processing-notice.error { color: var(--danger); border-color: rgba(244,82,82,.35); }
.admin-processing-health,
.admin-processing-table { margin-top: 14px; overflow: hidden; }
.admin-processing-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 15px; }
.admin-health-grid > div { display: flex; align-items: center; gap: 10px; padding: 13px; background: var(--panel2); border-radius: 9px; }
.admin-health-grid i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.admin-health-grid .ok i { background: var(--ok); box-shadow: 0 0 0 4px rgba(76,175,80,.12); }
.admin-health-grid .bad i { background: var(--danger); box-shadow: 0 0 0 4px rgba(244,82,82,.12); }
.admin-health-grid span { display: grid; gap: 2px; }
.admin-health-grid small { color: var(--muted); font-size: 10px; }
.admin-error-text { max-width: 420px; color: var(--danger); overflow-wrap: anywhere; }
.admin-empty { padding: 24px !important; color: var(--muted); text-align: center !important; }

@media (max-width: 900px) {
    .admin-console-header,
    .admin-section-heading { align-items: stretch; flex-direction: column; }
    .admin-console-context { width: 100%; }
    .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-users-toolbar { grid-template-columns: 1fr; }
    .admin-users-toolbar > span { justify-self: start; }
    .admin-activity-toolbar { grid-template-columns: 1fr 1fr; }
    .admin-account-profile-form { grid-template-columns: 1fr 1fr; }
    .admin-account-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-health-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    body.admin-body main { padding: 13px 10px 32px; }
    .admin-tabs button { flex: 1 0 auto; padding-inline: 12px; }
    .admin-kpi-grid { grid-template-columns: 1fr; }
    .admin-activity-toolbar { grid-template-columns: 1fr; }
    .admin-upload-list-item { grid-template-columns: 76px minmax(0, 1fr); gap: 9px; }
    .admin-upload-list-preview { width: 76px; height: 54px; }
    .admin-upload-list-item > .status-pill { justify-self: start; margin-left: 85px; }
    .admin-upload-result-link,
    .admin-upload-no-result { grid-column: 1 / -1; width: 100%; }
    .admin-user-uploads-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    .admin-user-uploads-modal .admin-user-uploads-header { align-items: flex-start; flex-direction: column; }
    .admin-user-uploads-modal-actions { width: 100%; justify-content: space-between; }
    .admin-account-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    .admin-account-modal-header { align-items: flex-start; }
    .admin-account-modal-body { padding: 10px; }
    .admin-account-section { padding: 11px; }
    .admin-account-section-title { display: grid; gap: 5px; }
    .admin-account-section-title p { text-align: left; }
    .admin-account-profile-form,
    .admin-account-access-grid,
    .admin-account-stats { grid-template-columns: 1fr; }
    .admin-account-feature-grid { grid-template-columns: 1fr 1fr; }
    .admin-account-access-grid article { align-items: stretch; flex-direction: column; }
    .admin-account-actions .btn { width: 100%; justify-content: center; }
    .admin-ppt-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    .admin-ppt-header { padding: 13px; }
    .admin-ppt-body { padding: 11px; }
    .admin-ppt-type-switch { width: 100%; }
    .admin-ppt-type-switch button { flex: 1; justify-content: center; }
    .admin-ppt-toolbar { align-items: stretch; flex-direction: column; }
    .admin-ppt-selection-actions { justify-content: flex-start; }
    .admin-ppt-upload { grid-template-columns: 1fr; }
    .admin-ppt-colors > header { align-items: stretch; flex-direction: column; }
    .admin-ppt-color-grid { grid-template-columns: 1fr; }
    .admin-ppt-slides { grid-template-columns: 1fr; }
    .admin-ppt-footer { flex-wrap: wrap; padding: 11px; }
    .admin-ppt-footer > span { width: 100%; margin: 0; }
    .admin-org-grid { grid-template-columns: 1fr; }
    .admin-organization-modal footer { grid-template-columns: 1fr 1fr; }
    .admin-organization-modal footer span { display: none; }
}

.login-brand .logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: transparent url("/app/templates/assets/ittention-logo-2026.png") center / contain no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Comparaison : tous les contrôles tiennent sur une barre unique. */
.compare-page .compare-control-deck {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact {
    flex: 1 1 auto;
    min-width: max-content;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button {
    flex: 1 0 auto;
}

.compare-page .compare-selection-btn,
.compare-page .compare-unified-display-controls {
    flex: 0 0 auto;
}

.compare-page .compare-unified-display-controls {
    margin: 0;
    white-space: nowrap;
}

.compare-page .compare-table .compare-aoi-row:not(.compare-reading-step-row) > td:first-child {
    grid-template-columns: minmax(0, 1fr);
}

.compare-page:not(.workspace-index-page) .compare-image-row-simple {
    grid-template-rows: minmax(0, 1fr);
}

.compare-page:not(.workspace-index-page) .compare-image-cell {
    grid-template-rows: minmax(0, 1fr);
}

header.app-header .logo,
header.app-header.history-app-header .logo {
    background-color: transparent;
    mix-blend-mode: normal;
}

header.app-header .ittention-logo-image,
header.app-header.history-app-header .ittention-logo-image {
    background-color: transparent;
    mix-blend-mode: multiply;
}

header.app-header .logo .material-icons,
header.app-header.history-app-header .logo .material-icons {
    display: none;
}

header.app-header .ittention-logo-image,
header.app-header.history-app-header .ittention-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

header.app-header .ittention-title-image,
header.app-header.history-app-header .ittention-title-image {
    display: block;
    width: 136px;
    height: auto;
    object-fit: contain;
}

.ittention-login-title-image {
    display: block;
    width: 172px;
    height: auto;
    padding: 7px 10px;
    object-fit: contain;
    background: var(--ittention-gradient);
    border-radius: 8px;
    box-sizing: border-box;
}

header.app-header .title,
header.app-header.history-app-header .title,
header.app-header:hover .title,
header.app-header:focus-within .title {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

header.app-header .app-sidebar-nav {
    width: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 0;
}

header.app-header .app-sidebar-link {
    position: relative;
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    gap: 15px;
    padding: 10px 14px;
    overflow: visible;
    color: rgba(255, 255, 255, .82);
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
}

header.app-header .app-sidebar-link::before {
    display: none;
}

header.app-header .app-sidebar-link .material-icons {
    width: 24px;
    flex: 0 0 24px;
    color: inherit;
    font-size: 22px;
}

header.app-header .app-sidebar-label,
header.app-header:hover .app-sidebar-label,
header.app-header:focus-within .app-sidebar-label {
    display: block;
    max-width: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    visibility: visible;
    color: inherit;
    font-size: 14px;
    white-space: nowrap;
}

header.app-header .app-sidebar-link:hover,
header.app-header .app-sidebar-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, .17);
    transform: none;
}

header.app-header .app-sidebar-link.active {
    font-weight: 600;
    box-shadow: inset 3px 0 0 #ffffff;
}

header.app-header > .toolbar:last-child,
header.app-header .header-actions,
header.app-header.history-app-header .header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

header.app-header .header-actions > .admin-link {
    grid-column: 1;
    justify-content: flex-start;
    min-height: 38px;
    padding: 8px 11px;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .14);
    font-size: 12px;
}

header.app-header .header-actions > .admin-link:hover {
    background: rgba(255, 255, 255, .2);
}

header.app-header .language-select,
header.app-header.history-app-header .language-select {
    grid-column: 2;
    width: 58px;
    min-height: 38px;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .18);
}

header.app-header .language-select option {
    color: var(--text);
    background: #ffffff;
}

header.app-header #auth-indicator,
header.app-header.history-app-header #auth-indicator {
    grid-column: 1 / -1;
    min-height: 52px;
    max-width: none;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 7px 9px;
    color: rgba(255, 255, 255, .74);
    background: rgba(0, 25, 120, .15);
    border-color: rgba(255, 255, 255, .14);
    border-radius: 11px;
    box-shadow: none;
}

header.app-header #auth-indicator strong {
    color: #ffffff;
}

.user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: #0033ff;
    background: #ffffff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
}

.user-copy {
    min-width: 0;
    display: grid;
    line-height: 1.15;
}

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

.user-copy small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
}

header.app-header .header-actions > .btn,
header.app-header.history-app-header .header-actions > .btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
    padding: 8px 11px;
    color: rgba(255, 255, 255, .88);
    background: transparent;
    border-color: transparent;
    border-radius: 9px;
}

header.app-header .header-actions > .btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .14);
}

header.app-header ~ main {
    width: calc(100% - var(--app-sidebar-width));
    max-width: none;
    min-height: 100vh;
    margin: 0 0 0 var(--app-sidebar-width);
    padding: 28px clamp(22px, 3vw, 46px) 52px;
}

main.workspace-index-page {
    padding: 28px clamp(22px, 3vw, 46px) 52px;
}

/* Overview */
.overview-page {
    display: grid;
    gap: 22px;
}

.overview-welcome {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 40px 44px;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(-50deg, #30d9f8, #0033ff);
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(0, 51, 255, .18);
}

.overview-welcome::before,
.overview-welcome::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 50%;
}

.overview-welcome::before {
    width: 260px;
    height: 260px;
    top: -145px;
    right: 16%;
}

.overview-welcome::after {
    width: 180px;
    height: 180px;
    right: -70px;
    bottom: -94px;
}

.overview-welcome-copy,
.overview-welcome-actions {
    position: relative;
    z-index: 1;
}

.overview-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.overview-welcome h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    letter-spacing: -.035em;
}

.overview-welcome p {
    max-width: 650px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: 15px;
}

.overview-light-btn {
    min-height: 44px;
    padding: 10px 16px;
    color: #0033ff;
    background: #ffffff;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 34, 135, .18);
}

.overview-light-btn:hover {
    color: #0033ff;
    background: #ffffff;
}

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

.overview-stat-card {
    min-width: 0;
    min-height: 138px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(225, 231, 239, .9);
    border-radius: 18px;
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

a.overview-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(93, 112, 138, .18);
}

.overview-stat-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
}

.overview-stat-icon .material-icons {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 30px;
    line-height: 1;
}
.overview-stat-icon.projects { color: #0033ff; background: #edf1ff; }
.overview-stat-icon.uploads { color: #0a9fbc; background: #eafcff; }
.overview-stat-icon.images { color: #9b5b00; background: #fff5dc; }
.overview-stat-icon.videos { color: #7a42d1; background: #f4edff; }

.overview-stat-copy {
    min-width: 0;
    display: grid;
}

.overview-stat-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.overview-stat-copy strong {
    margin: 2px 0;
    color: #17243a;
    font-size: 28px;
    line-height: 1.1;
}

.overview-stat-copy em {
    overflow: hidden;
    color: #9aa4b3;
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-dashboard-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.overview-card {
    min-width: 0;
    padding: 22px;
    background: #ffffff;
    border: 1px solid rgba(225, 231, 239, .9);
    border-radius: 15px;
    box-shadow: var(--shadow);
}

.overview-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.overview-card-header.compact { margin-bottom: 14px; }
.overview-card-header h2 { margin: 2px 0 0; color: #17243a; font-size: 18px; }
.overview-card-header > a { display: inline-flex; align-items: center; gap: 4px; color: #0033ff; font-size: 12px; font-weight: 700; text-decoration: none; }
.overview-card-header > a .material-icons { font-size: 16px; }
.page-eyebrow { color: #8d99aa; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

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

.overview-table {
    width: 100%;
    min-width: 620px;
    border-spacing: 0;
    border-collapse: separate;
}

.overview-table thead {
    color: #ffffff;
    background: linear-gradient(-50deg, #30d9f8, #0033ff);
}

.overview-table th {
    padding: 12px 13px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.overview-table th:first-child { border-radius: 12px 0 0 12px; }
.overview-table th:last-child { border-radius: 0 12px 12px 0; text-align: center; }
.overview-table td { padding: 11px 13px; border-bottom: 1px solid #eef1f5; color: #536176; font-size: 12px; }
.overview-table tbody tr:nth-child(even) { background: #fafbfc; }
.overview-table tbody tr:last-child td { border-bottom: 0; }
.overview-table td:last-child { text-align: center; }

.overview-media-cell {
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.overview-media-cell > span:last-child { min-width: 0; display: grid; }
.overview-media-cell strong { color: #243248; font-size: 12px; overflow-wrap: anywhere; white-space: normal; }
.overview-media-cell small { color: #9aa4b3; font-size: 10px; }

.overview-media-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #0033ff;
    background: #edf1ff;
    border-radius: 9px;
}

.overview-media-thumb.video { color: #7a42d1; background: #f4edff; }
.overview-media-thumb .material-icons { font-size: 19px; }
.overview-media-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }

.overview-type-pill,
.overview-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.overview-type-pill.image { color: #0033ff; background: #edf1ff; }
.overview-type-pill.video { color: #7a42d1; background: #f4edff; }
.overview-status { color: #4e5d72; background: #f1f3f6; }
.overview-status i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.overview-status.done { color: #008b4a; background: #e7f8ef; }
.overview-status.pending { color: #c27200; background: #fff5df; }
.overview-status.error { color: #d3314b; background: #ffedf0; }

.overview-row-action {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    color: #0033ff;
    background: #edf1ff;
    border-radius: 50%;
    text-decoration: none;
}

.overview-row-action .material-icons { font-size: 17px; }

.overview-side-column { display: grid; gap: 18px; }
.overview-progress-card { text-align: center; }

.overview-ring {
    position: relative;
    width: 142px;
    height: 142px;
    display: grid;
    place-items: center;
    margin: 16px auto 20px;
    border-radius: 50%;
}

.overview-ring::before {
    content: "";
    position: absolute;
    inset: 14px;
    background: #ffffff;
    border-radius: 50%;
}

.overview-ring > div { position: relative; z-index: 1; display: grid; }
.overview-ring strong { color: #17243a; font-size: 29px; line-height: 1.1; }
.overview-ring span { color: #8d99aa; font-size: 11px; }

.overview-legend { display: grid; gap: 8px; }
.overview-legend > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: #657287; font-size: 12px; text-align: left; }
.overview-legend strong { color: #243248; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.image { background: #0033ff; }
.legend-dot.video { background: #30d9f8; }

.overview-actions-card { display: grid; }
.overview-quick-action { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; color: inherit; border-bottom: 1px solid #eef1f5; text-decoration: none; }
.overview-quick-action:last-child { border-bottom: 0; }
.overview-quick-action > .material-icons:first-child { width: 38px; height: 38px; display: grid; place-items: center; color: #0033ff; background: #edf1ff; border-radius: 9px; font-size: 19px; }
.overview-quick-action > .material-icons:last-child { color: #a6afbc; font-size: 18px; }
.overview-quick-action > span:nth-child(2) { min-width: 0; display: grid; }
.overview-quick-action strong { color: #243248; font-size: 12px; }
.overview-quick-action small { overflow: hidden; color: #929dac; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.overview-empty { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 7px; color: #8c98a9; text-align: center; }
.overview-empty > .material-icons { color: #0033ff; font-size: 38px; }
.overview-empty strong { color: #304156; }
.overview-empty p { margin: 0 0 10px; }

.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-brand h2 { margin: 1px 0 0; }
.login-brand .logo { width: 48px; height: 48px; flex-basis: 48px; background-color: #0033ff; background-size: 42px; border-radius: 13px; }
.login-fields { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 1220px) {
    .overview-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .overview-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    :root { --app-sidebar-width: 72px; }

    header.app-header,
    header.app-header.compact-header,
    header.app-header.history-app-header {
        width: var(--app-sidebar-width);
        gap: 15px;
        padding: 14px 8px;
    }

    header.app-header:hover,
    header.app-header:focus-within,
    header.app-header.compact-header:hover,
    header.app-header.compact-header:focus-within,
    header.app-header.history-app-header:hover,
    header.app-header.history-app-header:focus-within {
        width: var(--app-sidebar-width);
    }

    header.app-header .brand,
    header.app-header:hover .brand,
    header.app-header:focus-within .brand {
        justify-content: center;
        padding: 0 0 12px;
    }

    header.app-header .logo,
    header.app-header.history-app-header .logo { width: 38px; height: 38px; flex-basis: 38px; }
    header.app-header .title,
    header.app-header.history-app-header .title,
    header.app-header:hover .title,
    header.app-header:focus-within .title { display: none; }

    header.app-header .app-sidebar-link { justify-content: center; padding: 10px 0; }
    header.app-header .app-sidebar-label,
    header.app-header:hover .app-sidebar-label,
    header.app-header:focus-within .app-sidebar-label {
        display: none;
        max-width: 0;
        opacity: 0;
        visibility: hidden;
    }

    header.app-header > .toolbar:last-child,
    header.app-header .header-actions,
    header.app-header.history-app-header .header-actions { grid-template-columns: 1fr; }

    header.app-header .header-actions > .admin-link { grid-column: 1; justify-content: center; padding: 0; font-size: 0; }
    header.app-header .language-select,
    header.app-header.history-app-header .language-select { grid-column: 1; width: 100%; padding-inline: 3px; background-image: none; text-align: center; }
    header.app-header #auth-indicator,
    header.app-header.history-app-header #auth-indicator { display: none; }
    header.app-header .header-actions > .btn,
    header.app-header.history-app-header .header-actions > .btn { justify-content: center; padding: 0; font-size: 0; }
    .logout-label { display: none; }

    header.app-header ~ main { width: calc(100% - var(--app-sidebar-width)); margin-left: var(--app-sidebar-width); padding: 20px; }
}

@media (max-width: 720px) {
    .overview-welcome { min-height: 0; align-items: flex-start; flex-direction: column; padding: 26px; }
    .overview-welcome-actions { width: 100%; }
    .overview-light-btn { width: 100%; }
    .overview-stat-grid,
    .overview-side-column { grid-template-columns: minmax(0, 1fr); }
    .overview-card { padding: 17px; }
}

@media (max-width: 480px) {
    :root { --app-sidebar-width: 58px; }
    header.app-header,
    header.app-header.compact-header,
    header.app-header.history-app-header { width: var(--app-sidebar-width); padding-inline: 6px; }
    header.app-header .logo,
    header.app-header.history-app-header .logo { width: 34px; height: 34px; flex-basis: 34px; }
    header.app-header ~ main { padding: 13px; }
    .overview-welcome { padding: 22px; border-radius: 14px; }
    .overview-welcome h1 { font-size: 27px; }
}

/* ===== Harmonisation des espaces de travail et vues d'analyse ===== */
main.history-page.workspace-index-page,
main.generation-page,
main.benchmark-page,
main.compare-page.workspace-index-page {
    align-content: start;
    padding-top: 12px;
}

.history-shell.projects-overview,
.tool-projects-overview {
    align-self: start;
    align-content: start;
    grid-auto-rows: max-content;
}

.history-page .projects-overview,
.tool-projects-overview {
    gap: 18px;
}

.history-page .projects-heading,
.tool-projects-heading {
    min-height: 64px;
    align-items: center;
}

.history-page .section-page-title .page-eyebrow,
.tool-projects-heading .page-eyebrow {
    margin-bottom: 3px;
    color: #8d99aa;
}

.history-page .section-page-title h1,
.tool-projects-heading h1 {
    color: #17243a;
    font-size: clamp(28px, 3vw, 34px);
}

.overview-heading-controls,
.history-search,
.history-limit {
    background: #ffffff;
    border-color: #e1e6ef;
}

.overview-heading-controls {
    box-shadow: 0 4px 16px rgba(79, 99, 128, .08);
}

.history-page .create-resource-card,
.tool-project-create-card {
    color: #0033ff;
    background: linear-gradient(145deg, #f3f6ff, #edf1ff);
    border-color: rgba(0, 51, 255, .26);
}

.history-page .create-resource-icon,
.tool-project-create-card > .material-icons {
    color: #0033ff;
    background: rgba(0, 51, 255, .09);
}

/* Navigation principale des résultats — toutes les métriques restent visibles. */
.results-page {
    padding-top: 10px;
}

.results-page .results-shell {
    padding: 10px;
    background: #ffffff;
    border-color: #e0e6ef;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.results-page .results-sticky-controls {
    margin-bottom: 10px;
    padding: 6px;
    background: #ffffff;
    border-color: #dfe5ee;
    border-radius: 13px;
    box-shadow: 0 4px 18px rgba(56, 78, 108, .08);
}

.results-page .result-tabs {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: start;
    gap: 7px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.results-page .results-toolbar-back {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    color: #0033ff;
    background: #edf1ff;
    border: 1px solid rgba(0, 51, 255, .12);
}

.results-page .result-tab-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 3px;
    overflow: visible;
    background: #f5f7fb;
    border-color: #e1e6ef;
}

.results-page .result-tab-group .result-tab {
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 11px;
}

.results-page .result-tab-group .result-tab:hover {
    color: #0033ff;
    background: #ffffff;
    border-color: rgba(0, 51, 255, .18);
}

.results-page .result-tab-group .result-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border-color: transparent;
    box-shadow: 0 5px 13px rgba(0, 51, 255, .22);
}

.results-page .result-action-group {
    min-height: 36px;
    align-items: center;
    gap: 2px;
    padding: 3px;
    overflow: visible;
    background: #f5f7fb;
    border-color: #e1e6ef;
}

.results-page .result-action-label {
    padding-inline: 6px;
    color: #8a96a8;
    font-size: 9px;
}

.results-page .result-export-btn {
    min-height: 30px;
    padding: 4px 7px;
    color: #536176;
    background: #ffffff;
    border-color: transparent;
    border-radius: 7px;
    font-size: 10px;
}

.results-page .result-export-btn.primary {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
}

.results-page .results-metric-heading.metric-in-panel {
    grid-template-columns: minmax(240px, 1fr) auto;
    grid-template-areas: "title controls";
    gap: 14px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e1e6ef;
    border-radius: 11px;
}

.results-page .results-metric-heading.metric-in-panel .report-section-title {
    grid-area: title;
    justify-self: start;
    justify-content: flex-start;
    margin: 0;
    text-align: left;
}

.results-page .results-metric-heading.metric-in-panel .result-canvas-controls {
    grid-area: controls;
    justify-self: end;
    padding: 3px;
    background: #f5f7fb;
    border: 1px solid #e1e6ef;
    border-radius: 9px;
}

.results-page .report-step,
.compare-page .report-step {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #30d9f8);
    border: 0;
}

.results-page .canvas-mode-option.active,
.compare-page .canvas-mode-option.active,
.results-page .segmented-btn.active,
.compare-page .segmented-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 51, 255, .18);
}

.results-page .canvas-aoi-toggle.active,
.compare-page .canvas-aoi-toggle.active {
    color: #007d94;
    background: #e8fbff;
    border-color: rgba(48, 217, 248, .46);
}

.results-page .overview-primary-panel,
.results-page .report-section,
.compare-page .compare-metric-panel {
    background: #f2f3f8;
    border-color: #e0e5ed;
}

.results-page .report-table th,
.compare-page .compare-table th {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff 0%, #176ff3 70%, #30d9f8 100%);
    border-color: rgba(255, 255, 255, .14);
}

.results-page .report-table tbody tr:nth-child(even),
.compare-page .compare-table tbody tr:nth-child(even) td {
    background: #f8f9fc;
}

/* Comparaison façon A/B Test historique : métriques puis options d'affichage. */
.compare-page:not(.workspace-index-page) {
    padding-top: 10px;
}

.compare-page .compare-shell {
    padding: 8px;
    background: #ffffff;
    border-color: #e0e6ef;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.compare-page .compare-metric-panel {
    gap: 9px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.compare-page .compare-control-deck {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 6px;
    background: #ffffff;
    border-color: #dfe5ee;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(56, 78, 108, .08);
}

.compare-page .compare-back-projects {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    color: #0033ff;
    background: #edf1ff;
    border-color: rgba(0, 51, 255, .12);
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: #f5f7fb;
    border-color: #e1e6ef;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button {
    flex: 1 1 120px;
    min-height: 30px;
    color: #667388;
    background: transparent;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border-color: transparent;
    box-shadow: 0 5px 13px rgba(0, 51, 255, .2);
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.active .material-icons,
.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.active strong {
    color: #ffffff;
}

.compare-page .compare-selection-btn {
    min-height: 36px;
    color: #243248;
    border-color: #dfe5ee;
}

.compare-display-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    padding: 9px 10px;
    background: #ffffff;
    border: 1px solid #e1e6ef;
    border-radius: 11px;
}

.compare-display-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.compare-display-heading > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.compare-display-heading strong {
    color: #243248;
    font-size: 14px;
}

.compare-display-heading small {
    overflow: hidden;
    color: #8793a4;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-page .compare-canvas-controls {
    margin: 0;
    padding: 3px;
    background: #f5f7fb;
    border-color: #e1e6ef;
    box-shadow: none;
}

.compare-page .compare-image-cell {
    border-color: #dfe5ee;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(67, 87, 115, .06);
}

.compare-page .compare-image-cell.reference {
    background: #edf1ff;
    border-color: rgba(0, 51, 255, .38);
    box-shadow: inset 0 0 0 1px rgba(0, 51, 255, .14);
}

.compare-page .compare-table {
    border-color: #dfe5ee;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(61, 82, 111, .07);
}

@media (max-width: 1080px) {
    .results-page .result-tabs,
    .compare-page .compare-control-deck {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .results-page .result-action-group,
    .compare-page .compare-selection-btn {
        grid-column: 2;
        justify-self: end;
    }
}

@media (max-width: 760px) {
    main.history-page.workspace-index-page,
    main.generation-page,
    main.benchmark-page,
    main.compare-page.workspace-index-page {
        padding-top: 8px;
    }

    .results-page .results-metric-heading.metric-in-panel,
    .compare-display-toolbar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
        align-items: stretch;
    }

    .results-page .results-metric-heading.metric-in-panel .report-section-title,
    .results-page .results-metric-heading.metric-in-panel .result-canvas-controls {
        grid-area: auto;
        justify-self: stretch;
    }

    .results-page .result-tabs,
    .compare-page .compare-control-deck {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .results-page .result-action-group,
    .compare-page .compare-selection-btn {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .compare-page .compare-canvas-controls {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Résultats — mise en page légère inspirée de l'interface Ittention historique. */
.results-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px clamp(14px, 2vw, 30px) 24px;
    background: #f7f8fb;
}

.results-page .results-content,
.results-page .image-results-layout {
    min-width: 0;
}

.results-page .results-sticky-controls {
    margin: 0 0 14px;
    padding: 0 0 7px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e4e7ed;
    border-radius: 0;
    box-shadow: none;
}

.results-page .result-tabs {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.results-page .results-toolbar-back {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    color: #536176;
    background: transparent;
    border: 0;
    border-radius: 9px;
}

.results-page .results-toolbar-back:hover {
    color: #0033ff;
    background: #edf1ff;
}

.results-page .result-tab-group {
    min-height: 44px;
    gap: 2px;
    padding: 0;
    background: transparent;
    border: 0;
}

.results-page .result-tab-group .result-tab {
    position: relative;
    min-height: 42px;
    padding: 8px 11px;
    color: #7b8494;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    font-weight: 720;
}

.results-page .result-tab-group .result-tab::after {
    position: absolute;
    right: 10px;
    bottom: -8px;
    left: 10px;
    height: 2px;
    content: "";
    background: #0033ff;
    border-radius: 999px;
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .16s ease, transform .16s ease;
}

.results-page .result-tab-group .result-tab:hover {
    color: #243248;
    background: transparent;
    border-color: transparent;
}

.results-page .result-tab-group .result-tab.active {
    color: #0033ff;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.results-page .result-tab-group .result-tab.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.results-page .result-action-group {
    min-height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
}

.results-page .result-action-label {
    display: none;
}

.results-page .result-export-btn,
.results-page .result-export-btn.primary {
    min-height: 34px;
    padding: 5px 8px;
    color: #687487;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
}

.results-page .result-export-btn:hover,
.results-page .result-export-btn.primary:hover {
    color: #0033ff;
    background: #edf1ff;
    border-color: rgba(0, 51, 255, .12);
}

.results-page .report-sections {
    gap: 0;
    margin: 0;
}

.results-page .report-section {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.results-page .results-metric-heading.metric-in-panel {
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.results-page .results-metric-heading.metric-in-panel .report-section-title h3 {
    color: #273247;
    font-size: 15px;
    font-weight: 750;
}

.results-page .results-metric-heading.metric-in-panel .report-section-title p {
    color: #8b94a4;
}

.results-page .results-metric-heading.metric-in-panel .result-canvas-controls {
    padding: 2px;
    background: #ffffff;
    border: 1px solid #e5e8ee;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(36, 50, 72, .04);
}

.results-page .report-section-grid {
    grid-template-columns: minmax(460px, 1.45fr) minmax(360px, 1fr);
    align-items: start;
    gap: 16px;
}

.results-page .report-mini-frame,
.results-page .report-table-wrap,
.results-page .size-chart,
.results-page .color-chart,
.results-page .overview-primary-panel {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(38, 52, 74, .055);
}

.results-page .report-mini-frame {
    min-height: clamp(480px, 67vh, 760px);
    padding: 10px;
}

.results-page .report-mini-frame img {
    max-height: min(68vh, 760px);
}

.results-page .report-table-wrap {
    max-height: calc(100vh - 205px);
    overflow: auto;
}

.results-page .report-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #697486;
    background: #f5f6f8;
    border-color: #e6e9ef;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.results-page .report-table td {
    padding: 6px;
    color: #3b4659;
    background: #ffffff;
    border-color: #eceef2;
    font-size: 12px;
}

.results-page .report-table th {
    padding: 6px;
}

.results-page .report-section-grid .report-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.results-page .report-section-grid .report-table th:first-child {
    width: 43%;
}

.results-page .report-section-grid .report-table th:nth-child(2) {
    width: 19%;
}

.results-page .report-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}

.results-page .report-table tbody tr:hover td {
    background: #f2f5ff;
}

.results-page .overview-primary-panel {
    padding: 12px;
}

.results-page .results-overview {
    margin: 0;
}

@media (max-width: 980px) {
    .results-page .report-section-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-page .report-table-wrap {
        max-height: none;
    }
}

@media (max-width: 760px) {
    .results-page {
        padding: 8px 10px 18px;
    }

    .results-page .result-tabs {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .results-page .result-action-group {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .results-page .result-tab-group {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* Ajustements de densité et de lisibilité des résultats. */
.results-page .results-sticky-controls {
    position: relative;
    margin-bottom: 16px;
    padding: 5px 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(252, 253, 255, .96));
    border: 1px solid #dfe4ec;
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(38, 52, 74, .08), 0 1px 2px rgba(38, 52, 74, .04);
}

.results-page .results-toolbar-back {
    color: #0033ff;
    background: #f0f3ff;
    border: 1px solid rgba(0, 51, 255, .1);
}

.results-page .result-tab-group .result-tab {
    border-radius: 8px;
}

.results-page .result-tab-group .result-tab.active {
    background: #f0f3ff;
}

.results-page .result-tab-group .result-tab::after {
    bottom: -6px;
}

.results-page .result-action-group {
    padding-left: 7px;
    border-left: 1px solid #e5e8ee;
}

.results-page .report-section-grid {
    grid-template-columns: minmax(430px, 1.22fr) minmax(390px, 1fr);
}

.results-page .report-mini-frame {
    min-height: clamp(440px, 62vh, 700px);
}

.results-page .report-mini-frame img {
    max-height: min(64vh, 700px);
}

.results-page .reading-table .reading-order-column {
    width: 58px !important;
    max-width: 58px;
    padding-right: 4px;
    padding-left: 4px;
    text-align: center !important;
    white-space: normal;
}

.results-page .reading-table th.reading-order-column {
    font-size: 9px;
    line-height: 1.08;
}

.results-page .reading-table td.reading-order-column {
    color: #0033ff;
    font-weight: 850;
}

.results-page .reading-table th:nth-child(2) {
    width: 31%;
}

.results-page .reading-table th:nth-child(3) {
    width: 16%;
}

.results-page .reading-table .reading-order-col { width: 13%; }
.results-page .reading-table .reading-name-col { width: 31%; }
.results-page .reading-table .reading-meta-col { width: 16%; }
.results-page .reading-table .reading-time-col { width: 20%; }
.results-page .reading-table .reading-total-col { width: 20%; }

.results-page .reading-table th,
.results-page .reading-table td {
    overflow: hidden;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.results-page .reading-table th {
    white-space: normal;
}

.results-page .reading-table td {
    white-space: nowrap;
}

.results-page .reading-table .report-name-text {
    max-width: calc(100% - 26px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .results-page .report-section-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .results-page .results-sticky-controls {
        padding: 5px;
        border-radius: 11px;
    }

    .results-page .result-action-group {
        padding-top: 5px;
        padding-left: 0;
        border-top: 1px solid #e5e8ee;
        border-left: 0;
    }
}

/* Navigation latérale rétractable : compacte au repos, déployée au survol. */
:root {
    --app-sidebar-width: 72px;
    --app-sidebar-expanded-width: 256px;
}

header.app-header,
header.app-header.compact-header,
header.app-header.history-app-header {
    width: var(--app-sidebar-width);
    gap: 15px;
    padding: 14px 8px;
    overflow-x: hidden;
    box-shadow: 5px 0 18px rgba(0, 51, 145, .14);
    transition: width .22s cubic-bezier(.2, .75, .25, 1), box-shadow .22s ease;
}

header.app-header:hover,
header.app-header:focus-within,
header.app-header.compact-header:hover,
header.app-header.compact-header:focus-within,
header.app-header.history-app-header:hover,
header.app-header.history-app-header:focus-within {
    width: var(--app-sidebar-expanded-width);
    box-shadow: 12px 0 30px rgba(0, 51, 145, .2);
}

header.app-header .brand {
    justify-content: center;
    gap: 0;
    padding: 0 0 12px;
}

header.app-header:hover .brand,
header.app-header:focus-within .brand {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 10px 12px;
}

header.app-header .logo,
header.app-header.history-app-header .logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

header.app-header .title,
header.app-header.history-app-header .title {
    display: block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-7px);
    transition: max-width .2s ease, opacity .14s ease, transform .2s ease;
}

header.app-header:hover .title,
header.app-header:focus-within .title {
    max-width: 160px;
    opacity: 1;
    transform: translateX(0);
}

header.app-header .app-sidebar-link {
    min-height: 46px;
    justify-content: center;
    gap: 0;
    padding: 10px 0;
    overflow: hidden;
    transition: padding .2s ease, gap .2s ease, background .16s ease;
}

header.app-header:hover .app-sidebar-link,
header.app-header:focus-within .app-sidebar-link {
    justify-content: flex-start;
    gap: 15px;
    padding: 10px 14px;
}

header.app-header .app-sidebar-label {
    display: block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-7px);
    visibility: hidden;
    transition: max-width .2s ease, opacity .14s ease, transform .2s ease, visibility 0s linear .2s;
}

header.app-header:hover .app-sidebar-label,
header.app-header:focus-within .app-sidebar-label {
    max-width: 155px;
    overflow: visible;
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
}

header.app-header > .toolbar:last-child,
header.app-header .header-actions,
header.app-header.history-app-header .header-actions {
    grid-template-columns: 1fr;
    gap: 7px;
}

header.app-header:hover > .toolbar:last-child,
header.app-header:focus-within > .toolbar:last-child,
header.app-header:hover .header-actions,
header.app-header:focus-within .header-actions,
header.app-header.history-app-header:hover .header-actions,
header.app-header.history-app-header:focus-within .header-actions {
    grid-template-columns: minmax(0, 1fr) 58px;
}

header.app-header .header-actions > .admin-link {
    grid-column: 1;
    justify-content: center;
    padding: 0;
    font-size: 0;
}

header.app-header:hover .header-actions > .admin-link,
header.app-header:focus-within .header-actions > .admin-link {
    justify-content: flex-start;
    padding: 8px 11px;
    font-size: 12px;
}

header.app-header .language-select,
header.app-header.history-app-header .language-select {
    grid-column: 1;
    width: 100%;
    padding-inline: 3px;
    background-image: none;
    text-align: center;
}

header.app-header:hover .language-select,
header.app-header:focus-within .language-select,
header.app-header.history-app-header:hover .language-select,
header.app-header.history-app-header:focus-within .language-select {
    grid-column: 2;
    width: 58px;
}

header.app-header #auth-indicator,
header.app-header.history-app-header #auth-indicator {
    display: none;
}

header.app-header:hover #auth-indicator,
header.app-header:focus-within #auth-indicator,
header.app-header.history-app-header:hover #auth-indicator,
header.app-header.history-app-header:focus-within #auth-indicator {
    display: flex;
}

header.app-header .header-actions > .btn,
header.app-header.history-app-header .header-actions > .btn {
    grid-column: 1;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    font-size: 0;
}

header.app-header:hover .header-actions > .btn,
header.app-header:focus-within .header-actions > .btn,
header.app-header.history-app-header:hover .header-actions > .btn,
header.app-header.history-app-header:focus-within .header-actions > .btn {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: 8px 11px;
    font-size: 12px;
}

header.app-header .logout-label {
    display: none;
}

header.app-header:hover .logout-label,
header.app-header:focus-within .logout-label {
    display: inline;
    white-space: nowrap;
}

header.app-header ~ main {
    width: calc(100% - var(--app-sidebar-width));
    margin-left: var(--app-sidebar-width);
}

@media (max-width: 960px) {
    :root { --app-sidebar-width: 64px; }

    header.app-header:hover,
    header.app-header:focus-within,
    header.app-header.compact-header:hover,
    header.app-header.compact-header:focus-within,
    header.app-header.history-app-header:hover,
    header.app-header.history-app-header:focus-within {
        width: var(--app-sidebar-width);
    }

    header.app-header:hover .title,
    header.app-header:focus-within .title,
    header.app-header:hover .app-sidebar-label,
    header.app-header:focus-within .app-sidebar-label,
    header.app-header:hover #auth-indicator,
    header.app-header:focus-within #auth-indicator {
        display: none;
        max-width: 0;
        opacity: 0;
        visibility: hidden;
    }

    header.app-header:hover .brand,
    header.app-header:focus-within .brand {
        justify-content: center;
        gap: 0;
        padding: 0 0 12px;
    }

    header.app-header:hover .app-sidebar-link,
    header.app-header:focus-within .app-sidebar-link {
        justify-content: center;
        gap: 0;
        padding: 10px 0;
    }

    header.app-header:hover .header-actions,
    header.app-header:focus-within .header-actions {
        grid-template-columns: 1fr;
    }

    header.app-header:hover .language-select,
    header.app-header:focus-within .language-select {
        grid-column: 1;
        width: 100%;
    }
}

@media (max-width: 480px) {
    :root { --app-sidebar-width: 58px; }
}

/* Overview desktop : tout le tableau de bord tient dans la hauteur disponible. */
@media (min-width: 1221px) and (min-height: 640px) {
    header.app-header ~ main.overview-page {
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        grid-template-rows: clamp(150px, 24vh, 220px) minmax(0, 1fr);
        gap: 12px;
        padding: 14px clamp(20px, 3vw, 38px);
        overflow: hidden;
        box-sizing: border-box;
    }

    .overview-page .overview-welcome {
        height: 100%;
        min-height: 0;
        padding: 24px 32px;
        border-radius: 20px;
    }

    .overview-page .overview-kicker {
        margin-bottom: 3px;
        font-size: 9px;
    }

    .overview-page .overview-welcome h1 {
        font-size: clamp(26px, 3vw, 34px);
    }

    .overview-page .overview-welcome p {
        margin-top: 4px;
        font-size: 13px;
    }

    .overview-page .overview-light-btn {
        min-height: 38px;
        padding: 8px 13px;
    }

    .overview-page .overview-stat-grid {
        height: 100%;
        gap: 12px;
    }

    .overview-page .overview-stat-card {
        height: 100%;
        min-height: 0;
        gap: 16px;
        padding: 14px 18px;
        border-radius: 16px;
    }

    .overview-page .overview-stat-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 14px;
    }

    .overview-page .overview-stat-icon .material-icons { font-size: 27px; }
    .overview-page .overview-stat-copy small { font-size: 11px; }
    .overview-page .overview-stat-copy strong { margin: 1px 0; font-size: 26px; }
    .overview-page .overview-stat-copy em { font-size: 10px; }

    .overview-page .overview-dashboard-grid {
        height: 100%;
        min-height: 0;
        align-items: stretch;
        gap: 14px;
    }

    .overview-page .overview-recent-card {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        padding: 14px 16px;
        overflow: hidden;
    }

    .overview-page .overview-card-header {
        margin-bottom: 9px;
    }

    .overview-page .overview-card-header.compact {
        margin-bottom: 7px;
    }

    .overview-page .overview-card-header h2 {
        font-size: 15px;
    }

    .overview-page .overview-table-wrap {
        min-height: 0;
        overflow: hidden;
    }

    .overview-page .overview-table {
        height: 100%;
        table-layout: fixed;
    }

    .overview-page .overview-table th {
        padding: 8px 9px;
        font-size: 8px;
    }

    .overview-page .overview-table td {
        padding: 5px 9px;
        font-size: 10px;
    }

    .overview-page .overview-media-cell {
        min-width: 0;
        gap: 7px;
    }

    .overview-page .overview-media-thumb {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 8px;
    }

    .overview-page .overview-media-thumb .material-icons { font-size: 16px; }
    .overview-page .overview-media-cell strong { max-width: 150px; font-size: 10px; }
    .overview-page .overview-media-cell small { font-size: 8px; }
    .overview-page .overview-type-pill,
    .overview-page .overview-status { padding: 3px 6px; font-size: 8px; }
    .overview-page .overview-row-action { width: 27px; height: 27px; }
    .overview-page .overview-row-action .material-icons { font-size: 15px; }

    .overview-page .overview-side-column {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, .94fr) minmax(0, 1.06fr);
        gap: 12px;
    }

    .overview-page .overview-side-column > .overview-card {
        height: 100%;
        min-height: 0;
        padding: 13px 15px;
        overflow: hidden;
        border-radius: 13px;
    }

    .overview-page .overview-progress-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .overview-page .overview-ring {
        width: clamp(76px, 13vh, 102px);
        height: clamp(76px, 13vh, 102px);
        margin: 2px auto 5px;
    }

    .overview-page .overview-ring::before { inset: 10px; }
    .overview-page .overview-ring strong { font-size: 23px; }
    .overview-page .overview-ring span { font-size: 9px; }
    .overview-page .overview-legend { gap: 4px; }
    .overview-page .overview-legend > div { font-size: 10px; }

    .overview-page .overview-actions-card {
        display: grid;
        grid-template-rows: auto;
        grid-auto-rows: minmax(0, 1fr);
    }

    .overview-page .overview-quick-action {
        min-height: 0;
        grid-template-columns: 31px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 4px 0;
    }

    .overview-page .overview-quick-action > .material-icons:first-child {
        width: 31px;
        height: 31px;
        border-radius: 8px;
        font-size: 16px;
    }

    .overview-page .overview-quick-action > .material-icons:last-child { font-size: 16px; }
    .overview-page .overview-quick-action strong { font-size: 10px; }
    .overview-page .overview-quick-action small { font-size: 8px; }
}

/* Structure : contenu direct, sans carte englobante autour des parcours. */
.results-page .structure-view {
    min-width: 0;
    align-self: flex-start;
    display: grid;
    align-content: start;
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.results-page .structure-view > .overview-journey-grid {
    margin: 0;
}

/* Résultats image : lecture plein écran et repères indépendants de la résolution. */
.results-page {
    --results-metric-text-size: 15px;
    --results-metric-line-height: 1.35;
}

.results-page .result-tab-group .result-tab {
    font-size: 13px;
}

.results-page .results-metric-heading.metric-in-panel .report-section-title h3 {
    font-size: 18px;
}

.results-page .results-metric-heading.metric-in-panel .report-section-title p {
    font-size: 12px;
    line-height: 1.35;
}

.results-page .report-table th,
.results-page .report-table td {
    padding: 10px 12px;
    line-height: 1.35;
}

.results-page .report-table th {
    font-size: 12px;
}

.results-page .report-table td {
    font-size: 14px;
}

.results-page .aoi-letter-chip {
    width: 24px;
    height: 24px;
    margin-right: 7px;
    font-size: 11px;
}

.results-page .size-chart,
.results-page .color-chart {
    padding: 14px;
}

.results-page .size-chart-row,
.results-page .color-chart-row {
    gap: 12px;
}

.results-page .size-chart-track,
.results-page .color-chart-track,
.results-page .color-chart-track span {
    min-height: 32px;
}

svg[result-aoi-overlay] .report-aoi-label-circle {
    r: 13px !important;
}

svg[result-aoi-overlay] .report-journey-bubble-circle {
    r: 18px !important;
}

svg[result-aoi-overlay] .report-aoi-label-text {
    font-size: 13px !important;
    stroke-width: 1.5px !important;
}

svg[result-aoi-overlay] .report-journey-bubble-text {
    font-size: 15px !important;
}

@media (min-width: 981px) {
    body.results-body {
        height: 100dvh;
        overflow: hidden;
    }

    body.results-body > .results-page {
        height: 100dvh;
        min-height: 0;
        display: block;
        padding: 12px clamp(14px, 2vw, 30px);
        overflow: hidden;
    }

    .results-page .results-content,
    .results-page .image-results-layout {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-page .image-results-layout {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .results-page .results-sticky-controls {
        margin-bottom: 12px;
        flex: 0 0 auto;
    }

    .results-page .report-sections,
    .results-page .report-section,
    .results-page .report-section-grid,
    .results-page .report-mini-visual {
        height: 100%;
        min-height: 0;
    }

    .results-page .report-sections {
        display: block;
        margin: 0;
        overflow: hidden;
    }

    .results-page .report-section {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    .results-page .report-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 18px;
        overflow: hidden;
    }

    .results-page .report-mini-visual {
        overflow: hidden;
    }

    .results-page .report-mini-frame {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        grid-template-rows: minmax(0, 1fr) auto;
        padding: 12px;
        overflow: hidden;
    }

    .results-page .report-mini-frame > div:not(.result-upload-caption) {
        max-width: 100%;
        max-height: 100%;
        align-self: center;
        justify-self: center;
    }

    .results-page .report-mini-frame img {
        max-width: 100%;
        max-height: calc(100dvh - 190px);
    }

    .results-page .report-table-wrap {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .results-page .report-section-grid .report-table {
        width: 100%;
        min-width: 100%;
        table-layout: fixed;
    }

    .results-page .report-section[ng-show*="efficiency"] .report-table,
    .results-page .report-section[ng-show*="reading"] .report-table {
        min-width: 900px;
        table-layout: auto;
    }

    .results-page .reading-report-grid {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) auto;
        overflow: hidden;
    }

    .results-page .reading-report-grid .report-table-wrap {
        height: auto;
    }

    .results-page .size-chart,
    .results-page .color-chart {
        height: 100%;
        min-height: 0;
        align-content: start;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .results-page .results-overview {
        height: 100%;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }
}

/* Results : la méta est disponible au survol du nom sans occuper une colonne. */
.results-page .report-name-cell[tabindex="0"],
.compare-page .compare-table td[tabindex="0"] {
    cursor: help;
}

.results-page .report-section-grid .report-table th:first-child {
    width: 50%;
}

.results-page .report-section-grid .report-table th:nth-child(2) {
    width: auto;
}

.results-page .reading-table .reading-order-col { width: 14%; }
.results-page .reading-table .reading-name-col { width: 36%; }
.results-page .reading-table .reading-time-col { width: 25%; }
.results-page .reading-table .reading-total-col { width: 25%; }
.results-page .reading-table th:nth-child(2) { width: 36%; }
.results-page .reading-table th:nth-child(3),
.results-page .reading-table th:nth-child(4) { width: 25%; }

/* Comparaison : navigation Projet > Uploads, calquée sur les tuiles de History. */
.compare-project-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.compare-library-project-card {
    width: 100%;
    height: 200px;
    min-height: 200px;
    display: grid;
    grid-template-rows: 124px minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(222, 228, 238, .94);
    border-radius: 18px;
    box-shadow: var(--shadow);
    cursor: pointer;
    text-align: left;
}

.compare-library-project-card:hover {
    border-color: rgba(0, 51, 255, .42);
    box-shadow: 0 12px 30px rgba(71, 92, 123, .17);
    transform: translateY(-2px);
}

.compare-library-project-card .project-thumbnails {
    width: 100%;
    height: 124px;
    border-radius: 0;
}

.compare-library-project-card .project-card-info {
    width: 100%;
    min-width: 0;
    padding: 13px 14px 14px;
}

.compare-project-card-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.compare-project-card-copy strong {
    overflow: hidden;
    color: #17243a;
    font-size: 16px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-project-card-copy small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.compare-project-card-copy .material-icons,
.compare-project-open-icon {
    color: #0033ff;
    font-size: 17px;
}

.compare-library-project-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.compare-library-project-heading > div {
    min-width: 0;
}

.compare-library-back {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    color: #0033ff;
    background: #edf1ff;
    border-color: rgba(0, 51, 255, .14);
}

.compare-project-search {
    width: min(360px, 34vw);
    max-width: 360px;
}

/* Comparaison : mêmes dimensions de bulles, boutons et textes que Results. */
.compare-page .compare-metric-switcher.compare-metric-switcher-compact button,
.compare-page .compare-selection-btn,
.compare-page .canvas-mode-option,
.compare-page .canvas-aoi-toggle {
    min-height: 38px;
    padding: 7px 11px;
    font-size: 13px;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact strong {
    font-size: 13px;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button > .material-icons,
.compare-page .canvas-mode-option .material-icons,
.compare-page .canvas-aoi-toggle .material-icons {
    font-size: 18px;
}

.compare-aoi-label-circle {
    fill: #071522;
    stroke: #ffffff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.compare-aoi-layer .compare-aoi-label-text {
    fill: #ffffff;
    stroke: #071522;
    stroke-width: 1.5px;
    paint-order: stroke;
    font-size: 16px;
}

.compare-journey-point circle {
    fill: #0033ff;
    stroke: #ffffff;
    stroke-width: 3;
}

.compare-journey-point text {
    fill: #ffffff;
    font-size: 15px;
}

.compare-page .compare-table th,
.compare-page .compare-table td {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.3;
}

.compare-page .compare-table th {
    font-size: 12px;
}

.compare-page .compare-table td:first-child {
    gap: 7px;
}

.compare-page .compare-aoi-letter {
    width: 24px;
    height: 24px;
    color: #ffffff;
    background: #071522;
    border: 2px solid #00bfff;
    font-size: 11px;
}

.compare-page .compare-image-cell > strong {
    font-size: 14px;
}

.compare-page .compare-image-cell > small,
.compare-page .compare-display-heading small {
    font-size: 12px;
}

@media (max-width: 760px) {
    .compare-project-library-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-library-header,
    .compare-library-project-header {
        align-items: stretch;
        flex-direction: column;
    }

    .compare-project-search,
    .compare-library-header .compare-search {
        width: 100%;
        max-width: none;
    }
}

/* Overrides finaux : la comparaison reste visuellement aussi plate que Results. */
body.compare-body,
body.compare-body .compare-page {
    background: #f7f8fb;
}

.compare-page .compare-shell {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.compare-page .compare-metric-panel,
.compare-page .compare-workspace,
.compare-page .compare-main-area {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.compare-page .compare-control-deck,
.compare-page .compare-display-toolbar {
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e1e6ef;
    border-radius: 0;
    box-shadow: none;
}

.compare-page .compare-image-cell,
.compare-page .compare-image-cell.reference {
    border-radius: 6px;
    box-shadow: none;
}

.results-page .report-section[ng-show*="reading"] .reading-table {
    width: 100%;
    min-width: 100% !important;
    table-layout: fixed !important;
}

@media (min-width: 981px) {
    .compare-page:not(.workspace-index-page) .compare-image-row-simple {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }
}

/* Comparaison : aperçu intégral et association visuelle des AOI. */
.compare-image-frame.compare-image-open {
    position: relative;
    padding: 5px;
    cursor: zoom-in;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.compare-image-frame.compare-image-open:hover,
.compare-image-frame.compare-image-open:focus-visible {
    background: #eef7ff;
    border-color: rgba(47, 128, 237, .7);
    box-shadow: inset 0 0 0 2px rgba(47, 128, 237, .16);
}

.compare-image-frame.compare-image-open::after {
    content: "zoom_in";
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: rgba(7, 21, 34, .78);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    font-family: "Material Icons";
    font-size: 18px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

.compare-image-frame.compare-image-open:hover::after,
.compare-image-frame.compare-image-open:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.compare-page:not(.workspace-index-page) .compare-image-stage img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(28dvh, 260px);
    object-fit: contain;
}

.compare-media-modal-overlay {
    padding: clamp(10px, 2vw, 24px);
    background: rgba(4, 12, 22, .72);
    backdrop-filter: blur(12px);
}

.compare-image-modal,
.compare-aoi-match-modal {
    width: min(1500px, 96vw);
    max-height: 94dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .36);
}

.compare-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.compare-modal-header > div {
    min-width: 0;
}

.compare-modal-header h2,
.compare-modal-header p {
    margin: 0;
}

.compare-modal-header h2 {
    color: #102437;
    font-size: clamp(19px, 2vw, 26px);
}

.compare-modal-header p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.compare-modal-kicker {
    display: block;
    margin-bottom: 3px;
    color: #1765c1;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.compare-image-modal-body,
.compare-modal-image-holder {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    background:
        linear-gradient(45deg, #eef2f6 25%, transparent 25%),
        linear-gradient(-45deg, #eef2f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef2f6 75%),
        linear-gradient(-45deg, transparent 75%, #eef2f6 75%),
        #f8fafc;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    border: 1px solid #dbe7f3;
    border-radius: 10px;
}

.compare-image-modal-body {
    padding: 10px;
}

.compare-modal-image-stage {
    position: relative;
    display: inline-grid;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
}

.compare-modal-image-stage img {
    grid-area: 1 / 1;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(94dvh - 112px);
    object-fit: contain;
}

.compare-modal-image-overlay {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.compare-aoi-match-modal {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.compare-aoi-match-grid {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    overflow: hidden;
}

.compare-aoi-match-pane {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #dbe7f3;
    border-radius: 10px;
    overflow: hidden;
}

.compare-aoi-match-pane.target {
    background: #f3f9ff;
    border-color: rgba(47, 128, 237, .45);
}

.compare-aoi-match-pane-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 11px;
}

.compare-aoi-match-pane-title strong {
    min-width: 0;
    overflow: hidden;
    color: #102437;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-aoi-match-modal .compare-modal-image-stage img {
    max-height: min(50dvh, 620px);
}

.compare-match-target-overlay {
    pointer-events: auto;
}

.compare-match-target-aoi {
    cursor: pointer;
    pointer-events: all;
}

.compare-match-target-aoi polygon {
    transition: fill .14s ease, stroke .14s ease, filter .14s ease;
}

.compare-match-target-aoi:hover polygon {
    fill: rgba(0, 191, 255, .34);
    stroke: #00a5dc;
    stroke-width: 5px;
    filter: drop-shadow(0 0 5px rgba(0, 165, 220, .72));
}

.compare-aoi-match-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
}

.compare-aoi-match-caption > span:last-child {
    min-width: 0;
    display: grid;
}

.compare-aoi-match-caption strong,
.compare-aoi-match-caption small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-aoi-match-caption small {
    color: var(--muted);
}

.compare-match-legend {
    min-height: 30px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.compare-match-legend span {
    flex: 0 0 auto;
    max-width: 180px;
    padding: 4px 7px;
    overflow: hidden;
    color: #526678;
    background: #ffffff;
    border: 1px solid #dbe7f3;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-match-legend span.selected {
    color: #9a2f07;
    background: #fff2e8;
    border-color: #ff9d70;
}

.compare-match-legend b {
    color: #ffffff;
    background: #071522;
    border-radius: 999px;
    padding: 1px 4px;
}

.compare-aoi-match-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.compare-aoi-match-actions p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #526678;
    font-size: 12px;
    font-weight: 700;
}

.compare-aoi-match-actions .material-icons {
    font-size: 18px;
}

@media (max-width: 820px) {
    .compare-aoi-match-modal {
        max-height: 96dvh;
        overflow: auto;
    }

    .compare-aoi-match-grid {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
    }

    .compare-aoi-match-pane {
        min-height: 360px;
    }

    .compare-aoi-match-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Priorité finale : la colonne Nom de Lecture conserve au moins 18 caractères. */
.results-page .report-section[ng-show*="reading"] .reading-table {
    width: 100%;
    min-width: 580px !important;
    table-layout: fixed !important;
}

.results-page .reading-table .reading-order-col { width: 12% !important; }
.results-page .reading-table .reading-name-col { width: 38% !important; }
.results-page .reading-table .reading-time-col,
.results-page .reading-table .reading-total-col { width: 25% !important; }
.results-page .reading-table th:nth-child(2) { width: 38% !important; }
.results-page .reading-table th:nth-child(3),
.results-page .reading-table th:nth-child(4) { width: 25% !important; }

.results-page .reading-table .report-name-text {
    width: 18ch !important;
    min-width: 18ch !important;
    max-width: 18ch !important;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

/* Benchmark : projets en tuiles History et comparaison alignée sur Results. */
.benchmark-project-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.benchmark-project-tile {
    min-width: 0;
    background: #ffffff;
    border-color: #e0e5ed;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(61, 82, 111, .06);
}

.benchmark-project-tile.selected {
    border-color: rgba(0, 51, 255, .42);
}

.benchmark-project-tile.complete {
    border-color: #0033ff;
    box-shadow: inset 0 0 0 1px #0033ff, 0 8px 20px rgba(0, 51, 255, .1);
}

.benchmark-project-tile-open {
    height: 132px;
}

.benchmark-project-tile .project-thumbnails {
    height: 132px;
    box-sizing: border-box;
    padding: 9px;
}

.benchmark-project-tile .project-thumb img {
    object-fit: cover;
}

.benchmark-project-tile-state {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #0033ff;
    background: rgba(255, 255, 255, .96);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(31, 52, 89, .16);
    font-size: 21px;
}

.benchmark-project-tile-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 13px 11px;
}

.benchmark-project-tile-copy {
    width: 100%;
}

.benchmark-project-tile-copy h2 {
    margin-bottom: 7px;
}

.benchmark-project-tile-copy .project-card-meta {
    flex-wrap: wrap;
    row-gap: 4px;
}

.benchmark-project-tile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid #edf0f5;
}

.benchmark-project-selection-count {
    color: #0033ff;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.benchmark-project-tile .benchmark-project-select {
    width: auto;
    min-width: 0;
    min-height: 32px;
    margin: 0 0 0 auto;
    padding: 5px 8px;
    color: #0033ff;
    background: #edf1ff;
    border: 0;
    border-radius: 6px;
    font-size: 10px;
    white-space: nowrap;
}

.benchmark-project-tile.complete .benchmark-project-select {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
}

body.benchmark-compare-body,
body.benchmark-compare-body .benchmark-compare-page {
    background: #f7f8fb;
}

.benchmark-compare-page {
    display: grid;
    align-content: start;
    gap: 10px;
    max-width: 1680px;
    padding-top: 10px;
}

.benchmark-compare-header {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e1e6ef;
    border-radius: 0;
    box-shadow: none;
}

.benchmark-compare-header .compare-back-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    color: #0033ff;
    background: #edf1ff;
    border: 1px solid rgba(0, 51, 255, .12);
    border-radius: 8px;
}

.benchmark-compare-header .compare-page-title {
    min-width: 0;
}

.benchmark-compare-header .compare-page-title h1,
.benchmark-compare-header .compare-page-title p {
    margin: 0;
}

.benchmark-compare-header .compare-page-title h1 {
    color: #17243a;
    font-size: 20px;
    line-height: 1.2;
}

.benchmark-compare-header .compare-page-title p {
    margin-top: 2px;
    color: #758196;
    font-size: 11px;
}

.benchmark-compare-context {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 360px;
    color: #536176;
}

.benchmark-compare-context > .material-icons {
    color: #0033ff;
    font-size: 19px;
}

.benchmark-compare-context > span:last-child {
    display: grid;
    min-width: 0;
}

.benchmark-compare-context small {
    color: #8a95a6;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.benchmark-compare-context strong {
    overflow: hidden;
    color: #243248;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benchmark-compare-workflow {
    min-width: 0;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e1e6ef;
}

.benchmark-compare-workflow > .workflow-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 6px 8px;
    background: #f5f7fb;
    border-bottom: 1px solid #e1e6ef;
}

.benchmark-compare-workflow > .workflow-tabs button {
    min-height: 32px;
    padding: 5px 9px;
    color: #667388;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.benchmark-compare-workflow > .workflow-tabs button span {
    width: 19px;
    height: 19px;
    background: #dfe4ed;
    font-size: 10px;
}

.benchmark-compare-workflow > .workflow-tabs button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    box-shadow: 0 5px 13px rgba(0, 51, 255, .18);
}

.benchmark-compare-workflow > .workflow-tabs button.active span {
    color: #0033ff;
    background: #ffffff;
}

.benchmark-compare-step-header {
    display: grid;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 10px;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    border-radius: 0;
}

.benchmark-reference-filter.benchmark-compare-step-header {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 360px) auto;
}

.benchmark-compare-selector.benchmark-compare-step-header {
    grid-template-columns: minmax(180px, .75fr) minmax(190px, .7fr) minmax(260px, 1fr) auto auto;
}

.benchmark-compare-step-header p {
    font-size: 10px;
}

.benchmark-compare-step-header .compare-search,
.benchmark-compare-step-header .benchmark-compare-select {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 36px;
    background: #f8f9fc;
    border-color: #e1e6ee;
    box-shadow: none;
}

.benchmark-selected-reference {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.benchmark-selected-reference-thumb {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #8d99aa;
    background: #f0f3f8;
    border: 1px solid #e1e6ee;
    border-radius: 6px;
}

.benchmark-selected-reference-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benchmark-selected-reference > span:last-child {
    display: grid;
    min-width: 0;
}

.benchmark-selected-reference small {
    color: #8a95a6;
    font-size: 9px;
}

.benchmark-selected-reference strong {
    overflow: hidden;
    color: #243248;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benchmark-compare-step-header .btn.primary,
.benchmark-compare-library-footer .btn.primary {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border: 0;
    border-radius: 7px;
    box-shadow: 0 5px 13px rgba(0, 51, 255, .18);
}

.benchmark-compare-library {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 10px;
    background: #ffffff;
}

.benchmark-compare-library-heading,
.benchmark-compare-library-heading > div,
.benchmark-compare-library-heading > div > span:last-child,
.benchmark-compare-panel-heading,
.benchmark-compare-panel-heading > div,
.benchmark-compare-panel-heading > div > span:last-child {
    display: flex;
    align-items: center;
}

.benchmark-compare-library-heading,
.benchmark-compare-panel-heading {
    justify-content: space-between;
    gap: 12px;
}

.benchmark-compare-library-heading > div,
.benchmark-compare-panel-heading > div {
    gap: 8px;
    min-width: 0;
}

.benchmark-compare-library-heading > div > span:last-child,
.benchmark-compare-panel-heading > div > span:last-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
}

.benchmark-compare-library-heading .material-icons,
.benchmark-compare-panel-heading .material-icons {
    color: #0033ff;
    font-size: 20px;
}

.benchmark-compare-library-heading small,
.benchmark-compare-panel-heading p {
    margin: 0;
    color: #758196;
    font-size: 10px;
}

.benchmark-compare-library-heading > span:last-child,
.benchmark-compare-panel-heading > span:last-child {
    color: #0033ff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.benchmark-compare-library .compare-reference-grid {
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 9px;
    margin: 0;
}

.benchmark-compare-library .compare-reference-card {
    grid-template-columns: auto 72px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border-color: #e1e6ee;
    border-radius: 7px;
    box-shadow: none;
}

.benchmark-compare-library .compare-reference-card.active {
    background: #f3f6ff;
    border-color: #0033ff;
    box-shadow: inset 0 0 0 1px #0033ff;
}

.benchmark-compare-library .compare-choice-thumb {
    height: 86px;
    border-radius: 5px;
}

.benchmark-compare-library-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 9px;
    border-top: 1px solid #edf0f5;
}

.benchmark-compare-library-footer .workflow-next {
    margin: 0;
}

.benchmark-compare-output {
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.benchmark-compare-visual,
.benchmark-compare-results {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.benchmark-compare-panel-heading {
    min-height: 52px;
    box-sizing: border-box;
    padding: 9px 10px;
    border-bottom: 1px solid #e1e6ef;
}

.benchmark-compare-panel-heading h3 {
    margin: 0;
    color: #243248;
    font-size: 13px;
}

.benchmark-compare-stage {
    width: min(100%, 420px);
    margin: 12px auto;
    background: #f7f8fb;
    border: 0;
    border-radius: 0;
}

.benchmark-compare-results .report-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.benchmark-compare-results .benchmark-compare-table {
    min-width: 720px;
}

.benchmark-compare-results .benchmark-compare-table thead th {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff 0%, #176ff3 72%, #30d9f8 100%);
    border-color: rgba(255, 255, 255, .14);
}

.benchmark-compare-results .benchmark-compare-table tbody tr:nth-child(even) td {
    background: #f8f9fc;
}

.benchmark-compare-aoi-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.benchmark-compare-aoi-label b {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #ffffff;
    background: #071522;
    border: 2px solid #00bfff;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
}

.benchmark-compare-aoi-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .benchmark-compare-selector.benchmark-compare-step-header {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .benchmark-compare-selector.benchmark-compare-step-header > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .benchmark-compare-output {
        grid-template-columns: minmax(0, 1fr);
    }

    .benchmark-compare-step-header,
    .benchmark-reference-filter.benchmark-compare-step-header,
    .benchmark-compare-selector.benchmark-compare-step-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .benchmark-compare-selector.benchmark-compare-step-header > div:first-child {
        grid-column: 1;
    }
}

@media (max-width: 620px) {
    .benchmark-project-tile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .benchmark-compare-header {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .benchmark-compare-context {
        grid-column: 2;
        max-width: none;
    }

    .benchmark-compare-workflow > .workflow-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .benchmark-compare-workflow > .workflow-tabs button {
        justify-content: center;
    }

    .benchmark-compare-library-heading,
    .benchmark-compare-panel-heading {
        align-items: flex-start;
    }
}

/* Benchmark compare : sélecteurs de modèle, cartes et focus AOI. */
.benchmark-compare-canvas-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.benchmark-compare-stage-controls {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 4;
    gap: 4px;
    padding: 3px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(23, 111, 243, .18);
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(13, 30, 53, .14);
    backdrop-filter: blur(8px);
}

.benchmark-compare-canvas-controls .canvas-mode-options {
    gap: 2px;
    padding: 2px;
    border-radius: 7px;
}

.benchmark-compare-canvas-controls .canvas-mode-option {
    min-height: 30px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 10px;
}

.benchmark-compare-canvas-controls .canvas-aoi-toggle {
    min-height: 34px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 10px;
}

.benchmark-compare-panel-heading .benchmark-compare-canvas-controls .canvas-mode-option.active,
.benchmark-compare-panel-heading .benchmark-compare-canvas-controls .canvas-mode-option.active .material-icons {
    color: #ffffff;
}

.benchmark-compare-panel-heading .benchmark-compare-canvas-controls .canvas-aoi-toggle.active,
.benchmark-compare-panel-heading .benchmark-compare-canvas-controls .canvas-aoi-toggle.active .material-icons {
    color: #06766c;
}

.benchmark-compare-model-switch {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    padding: 3px;
    background: #eef2f8;
    border: 1px solid #dfe5ef;
    border-radius: 9px;
}

.benchmark-compare-model-switch button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 8px;
    color: #59677b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
}

.benchmark-compare-model-switch button > span:last-child {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.benchmark-compare-model-switch button small {
    color: inherit;
    font-size: 9px;
    font-weight: 700;
    opacity: .72;
}

.benchmark-compare-model-switch button:hover {
    color: #0033ff;
    background: rgba(255, 255, 255, .72);
}

.benchmark-compare-model-switch button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border-color: #0033ff;
    box-shadow: 0 4px 10px rgba(0, 51, 255, .2);
}

.benchmark-compare-panel-heading .benchmark-compare-model-switch button.active .material-icons {
    color: #ffffff;
}

.benchmark-compare-table-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 10px;
    color: #66758a;
    background: #f7f9fc;
    border-bottom: 1px solid #e5e9f0;
    font-size: 10px;
}

.benchmark-compare-table-hint .material-icons {
    color: #176ff3;
    font-size: 15px;
}

.benchmark-compare-results .benchmark-compare-table tbody tr {
    cursor: pointer;
    outline: none;
}

.benchmark-compare-results .benchmark-compare-table tbody tr:hover td,
.benchmark-compare-results .benchmark-compare-table tbody tr:focus td {
    background: #f0f5ff;
}

.benchmark-compare-results .benchmark-compare-table tbody tr.selected td {
    background: #fff1df;
    box-shadow: inset 0 1px 0 rgba(239, 124, 22, .15), inset 0 -1px 0 rgba(239, 124, 22, .15);
}

.benchmark-compare-results .benchmark-compare-table tbody tr.selected td:first-child {
    box-shadow: inset 3px 0 0 #ef7c16, inset 0 1px 0 rgba(239, 124, 22, .15), inset 0 -1px 0 rgba(239, 124, 22, .15);
}

.benchmark-compare-results .benchmark-compare-table tbody tr.selected .benchmark-compare-aoi-label b {
    background: #ef7c16;
    border-color: #ffba65;
}

.benchmark-compare-overlay g {
    transition: opacity .16s ease;
}

.benchmark-compare-overlay .benchmark-compare-aoi-bubble {
    fill: rgba(7, 21, 34, .94);
    stroke: #ffffff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.benchmark-compare-overlay .benchmark-compare-aoi-letter {
    fill: #ffffff;
    stroke: none;
    stroke-width: 0;
    paint-order: normal;
    font-size: 12px;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: central;
}

.benchmark-compare-overlay.has-selection g:not(.selected) {
    opacity: .2;
}

.benchmark-compare-overlay g.selected polygon {
    fill: rgba(255, 166, 45, .3);
    stroke: #ff9d1c;
    stroke-width: 5;
}

.benchmark-compare-overlay g.selected .benchmark-compare-aoi-bubble {
    fill: #ef7c16;
    stroke: #ffffff;
    stroke-width: 3;
}

.benchmark-compare-overlay g.selected .benchmark-compare-aoi-letter {
    fill: #ffffff;
    stroke: none;
    stroke-width: 0;
}

@media (max-width: 1080px) {
    .benchmark-compare-panel-heading {
        flex-wrap: wrap;
    }
}

@media (max-width: 620px) {
    .benchmark-compare-model-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        box-sizing: border-box;
    }

    .benchmark-compare-stage-controls {
        top: 5px;
        right: 5px;
    }

    .benchmark-compare-model-switch button {
        justify-content: center;
    }

    .benchmark-compare-stage-controls .canvas-mode-option > span:last-child {
        display: none;
    }
}

.benchmark-compare-visual .benchmark-compare-panel-heading {
    min-height: 40px;
    padding-block: 6px;
}

.benchmark-compare-results .benchmark-compare-panel-heading {
    min-height: 44px;
    padding-block: 6px;
}

/* Benchmark compare : en-tête unique et commandes synchronisées sous l'image. */
.benchmark-compare-unified-header {
    grid-template-columns: 36px minmax(210px, .65fr) minmax(660px, 2fr);
    gap: 9px;
    padding: 8px 10px;
}

.benchmark-compare-unified-header .page-eyebrow {
    font-size: 8px;
}

.benchmark-compare-header-actions {
    display: grid;
    grid-template-columns: minmax(175px, .8fr) minmax(230px, 1.15fr) auto auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.benchmark-header-reference {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 40px;
    padding: 2px 7px 2px 2px;
    color: #334158;
    background: #f8f9fc;
    border: 1px solid #e1e6ee;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
}

.benchmark-header-reference.empty {
    grid-template-columns: 36px minmax(0, 1fr);
    border-style: dashed;
}

.benchmark-header-reference .benchmark-selected-reference-thumb {
    width: 34px;
    height: 34px;
    border-radius: 5px;
}

.benchmark-header-reference > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.benchmark-header-reference small {
    color: #8994a5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.benchmark-header-reference strong {
    overflow: hidden;
    color: #243248;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benchmark-header-reference-edit {
    color: #176ff3;
    font-size: 14px;
}

.benchmark-header-select {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 40px;
    background: #f8f9fc;
    border-color: #e1e6ee;
    box-shadow: none;
}

.benchmark-compare-header-actions > .btn {
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 7px;
    white-space: nowrap;
}

.benchmark-header-compare {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border: 0;
    box-shadow: 0 5px 13px rgba(0, 51, 255, .18);
}

.benchmark-header-create {
    color: #0033ff;
    background: #edf1ff;
    border-color: rgba(0, 51, 255, .12);
}

.benchmark-compare-workflow {
    background: transparent;
    border-bottom: 0;
}

.benchmark-compare-library-heading {
    flex-wrap: wrap;
}

.benchmark-library-project-filter {
    width: min(340px, 38vw);
    max-width: none;
    min-height: 34px;
    margin-left: auto;
    background: #f8f9fc;
    border-color: #e1e6ee;
    box-shadow: none;
}

.benchmark-compare-display-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: min(calc(100% - 20px), 420px);
    box-sizing: border-box;
    margin: 0 auto 10px;
    padding: 5px;
    background: #f5f7fb;
    border: 1px solid #e0e5ed;
    border-radius: 9px;
}

.benchmark-display-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: #e9eef5;
    border-radius: 7px;
}

.benchmark-display-group button,
.benchmark-display-aoi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 30px;
    padding: 4px 7px;
    color: #5b687b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.benchmark-display-group button .material-icons,
.benchmark-display-aoi .material-icons {
    font-size: 15px;
}

.benchmark-display-group button:hover:not(:disabled),
.benchmark-display-aoi:hover {
    color: #0033ff;
    background: rgba(255, 255, 255, .72);
}

.benchmark-display-group button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border-color: #0033ff;
    box-shadow: 0 3px 8px rgba(0, 51, 255, .18);
}

.benchmark-display-group button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.benchmark-display-aoi {
    color: #4d5e71;
    background: #ffffff;
    border-color: #d7dfe9;
}

.benchmark-display-aoi.active {
    color: #06766c;
    background: rgba(18, 165, 148, .13);
    border-color: rgba(18, 165, 148, .38);
}

.benchmark-display-separator {
    width: 1px;
    height: 24px;
    flex: 0 0 1px;
    background: #d8dee8;
}

@media (max-width: 1320px) {
    .benchmark-compare-unified-header {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .benchmark-compare-header-actions {
        grid-column: 1 / -1;
        grid-template-columns: minmax(175px, .8fr) minmax(230px, 1.15fr) auto auto;
    }
}

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

    .benchmark-header-reference,
    .benchmark-header-select {
        grid-column: span 1;
    }

    .benchmark-compare-header-actions > .btn {
        justify-content: center;
    }
}

@media (max-width: 620px) {
    .benchmark-compare-unified-header {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .benchmark-compare-header-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .benchmark-header-reference,
    .benchmark-header-select {
        grid-column: 1 / -1;
    }

    .benchmark-library-project-filter {
        order: 3;
        width: 100%;
    }

    .benchmark-compare-display-toolbar {
        flex-wrap: wrap;
    }

    .benchmark-display-separator {
        display: none;
    }

    .benchmark-model-group {
        order: 3;
        width: 100%;
    }

    .benchmark-model-group button {
        flex: 1 1 0;
    }
}

/* Benchmark compare : navigation projet > uploads et commandes complètes au-dessus du tableau. */
.benchmark-compare-project-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.benchmark-compare-project-tile {
    min-width: 0;
}

.benchmark-compare-project-tile .benchmark-project-tile-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.benchmark-compare-project-open {
    min-height: 30px;
    padding: 5px 8px;
    color: #0033ff;
    background: #edf1ff;
    border: 0;
    border-radius: 6px;
    font-size: 9px;
    white-space: nowrap;
}

.benchmark-compare-project-open .material-icons {
    font-size: 14px;
}

.benchmark-compare-library-search {
    width: min(360px, 40vw);
    margin-left: auto;
}

.benchmark-compare-project-detail {
    display: grid;
    gap: 10px;
}

.benchmark-compare-project-detail-heading > div:first-child {
    gap: 8px;
}

.benchmark-compare-project-detail-heading .icon-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    color: #0033ff;
    background: #edf1ff;
    border-color: rgba(0, 51, 255, .12);
}

.benchmark-compare-upload-grid {
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
}

.benchmark-compare-results .benchmark-compare-panel-heading {
    flex-wrap: wrap;
    min-height: 48px;
}

.benchmark-compare-results .benchmark-compare-display-toolbar {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin: 0 0 0 auto;
    padding: 4px;
    background: #f5f7fb;
}

.benchmark-compare-results .benchmark-display-group button,
.benchmark-compare-results .benchmark-display-aoi {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 10px;
}

@media (max-width: 1320px) {
    .benchmark-compare-results .benchmark-compare-display-toolbar {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {
    .benchmark-compare-library-search {
        order: 3;
        width: 100%;
        margin-left: 0;
    }

    .benchmark-compare-project-tile .benchmark-project-tile-info {
        grid-template-columns: minmax(0, 1fr);
    }

    .benchmark-compare-project-open {
        justify-self: stretch;
        justify-content: center;
    }

    .benchmark-compare-results .benchmark-compare-display-toolbar {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .benchmark-compare-project-grid,
    .benchmark-compare-upload-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .benchmark-compare-results .benchmark-compare-display-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .benchmark-compare-results .benchmark-display-group {
        width: 100%;
        box-sizing: border-box;
    }

    .benchmark-compare-results .benchmark-display-group button,
    .benchmark-compare-results .benchmark-display-aoi {
        flex: 1 1 0;
    }
}

/* Results : onglet de comparaison benchmark. */
.results-benchmark-tab-panel {
    display: grid;
    gap: 0;
    min-width: 0;
    background: #ffffff;
    border-top: 1px solid #e1e6ef;
}

.results-benchmark-tab-header {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(0, auto);
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 10px;
    border-bottom: 1px solid #e1e6ef;
}

.results-benchmark-tab-title,
.results-benchmark-tab-title > span:last-child,
.results-benchmark-tab-actions {
    display: flex;
    align-items: center;
}

.results-benchmark-tab-title {
    gap: 8px;
    min-width: 0;
}

.results-benchmark-tab-title > .material-icons {
    color: #0033ff;
    font-size: 20px;
}

.results-benchmark-tab-title > span:last-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
}

.results-benchmark-tab-title h3,
.results-benchmark-tab-title p {
    margin: 0;
}

.results-benchmark-tab-title h3 {
    color: #243248;
    font-size: 13px;
}

.results-benchmark-tab-title p {
    color: #758196;
    font-size: 10px;
    font-weight: 750;
}

.results-benchmark-tab-actions {
    display: grid;
    grid-template-columns: minmax(250px, 390px) 190px;
    justify-content: end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.results-benchmark-select {
    width: 100%;
    max-width: none;
    min-height: 36px;
    background: #f8f9fc;
    border-color: #e1e6ee;
    box-shadow: none;
}

.results-benchmark-model-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: #edf1f7;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
}

.results-benchmark-model-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 30px;
    min-width: 0;
    padding: 4px 8px;
    color: #59677b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.results-benchmark-model-switch button .material-icons {
    font-size: 15px;
}

.results-benchmark-model-switch button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff, #176ff3);
    border-color: #0033ff;
    box-shadow: 0 3px 8px rgba(0, 51, 255, .18);
}

.results-benchmark-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.results-benchmark-table {
    min-width: 720px;
}

.results-benchmark-table thead th {
    color: #ffffff;
    background: linear-gradient(135deg, #0033ff 0%, #176ff3 72%, #30d9f8 100%);
    border-color: rgba(255, 255, 255, .14);
}

.results-benchmark-table tbody tr {
    cursor: pointer;
}

.results-benchmark-table tbody tr:nth-child(even) td {
    background: #f8f9fc;
}

.results-benchmark-table tbody tr:hover td,
.results-benchmark-table tbody tr:focus td {
    background: #f0f5ff;
}

.results-benchmark-table tbody tr.selected td {
    background: #fff1df;
}

.results-benchmark-table td > strong,
.results-benchmark-table td > small {
    display: block;
}

.results-benchmark-table td > small {
    margin-top: 2px;
    color: #738096;
    font-size: 9px;
    white-space: nowrap;
}

.results-benchmark-table td > small span {
    margin-left: 4px;
    font-weight: 850;
}

.results-benchmark-empty {
    margin: 12px;
}

@media (max-width: 900px) {
    .results-benchmark-tab-header {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .results-benchmark-tab-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .results-benchmark-select {
        width: 100%;
    }

    .results-benchmark-model-switch button {
        min-width: 82px;
    }
}

@media (max-width: 620px) {
    .results-benchmark-tab-actions {
        grid-template-columns: 1fr;
    }

    .results-benchmark-model-switch button {
        min-width: 0;
    }
}

/* Results — Benchmark reprend la structure image + tableau des autres métriques. */
.results-page .results-benchmark-tab-panel {
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.results-page .results-benchmark-heading-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.results-page .results-benchmark-heading-controls .results-benchmark-select {
    flex: 0 1 300px;
    width: clamp(220px, 24vw, 300px);
    min-width: 220px;
    min-height: 36px;
    padding-inline: 8px;
    background: #ffffff;
}

.results-page .results-benchmark-heading-controls .canvas-mode-options,
.results-page .results-benchmark-heading-controls .results-benchmark-model-switch {
    flex: 0 0 auto;
}

.results-page .results-benchmark-heading-controls .canvas-mode-option,
.results-page .results-benchmark-heading-controls .results-benchmark-model-switch button {
    min-height: 30px;
    padding: 4px 7px;
    font-size: 10px;
}

.results-page .results-benchmark-heading-controls .canvas-aoi-toggle {
    min-height: 36px;
    padding: 5px 8px;
}

.results-page .results-benchmark-section-grid,
.results-page .results-efficiency-section-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: start;
    gap: 16px;
}

/* Results / Efficacité : garder les quatre colonnes visibles sans débordement. */
.results-page .results-efficiency-section-grid {
    grid-template-columns: minmax(190px, 34fr) minmax(0, 66fr);
}

.results-page .results-efficiency-section-grid > *,
.results-page .results-efficiency-section-grid .report-table-wrap {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.results-page .results-efficiency-section-grid .report-table-wrap {
    overflow-x: hidden;
}

.results-page .results-efficiency-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.results-page .results-efficiency-table .results-efficiency-name-col {
    width: 30%;
}

.results-page .results-efficiency-table .results-efficiency-metric-col {
    width: 23.333%;
}

.results-page .results-efficiency-table th,
.results-page .results-efficiency-table td {
    min-width: 0;
    padding: 7px clamp(2px, .35vw, 6px);
    font-size: clamp(9px, .72vw, 12px);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.results-page .results-efficiency-table td:not(:first-child) {
    white-space: nowrap;
}

.results-page .results-efficiency-section-grid .results-efficiency-table th:first-child {
    width: 30%;
}

.results-page .results-efficiency-table .report-name-cell {
    max-width: none;
    white-space: nowrap;
}

.results-page .results-efficiency-table .report-name-text {
    max-width: calc(100% - 30px);
}

@media (max-width: 1180px) {
    .results-page .results-efficiency-section-grid {
        grid-template-columns: minmax(160px, 30fr) minmax(0, 70fr);
        gap: 10px;
    }
}

.results-page .results-benchmark-image-frame {
    min-height: clamp(480px, 67vh, 760px);
}

.results-page .results-benchmark-image-frame img {
    max-height: min(68vh, 760px);
}

.results-page .results-benchmark-image-overlay .report-aoi-group {
    transition: opacity .16s ease;
}

.results-page .results-benchmark-image-overlay.has-selection .report-aoi-group:not(.selected) {
    opacity: .16;
}

.results-page .results-benchmark-table-column {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.results-page .results-benchmark-table-wrap {
    max-height: calc(100vh - 235px);
}

.results-page .results-benchmark-section-grid .results-benchmark-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.results-page .results-benchmark-section-grid .results-benchmark-table th.results-benchmark-name-col {
    width: 160px;
}

.results-page .results-benchmark-section-grid .results-benchmark-table th.results-benchmark-meta-col {
    width: 74px;
}

.results-page .results-benchmark-table th,
.results-page .results-benchmark-table td {
    padding: 8px 6px;
}

.results-page .results-benchmark-name-cell {
    width: 160px;
    max-width: 160px;
    white-space: nowrap;
}

.results-page .results-benchmark-name-cell .report-name-text {
    max-width: 112px;
    vertical-align: middle;
}

.results-page .results-benchmark-section-grid .results-benchmark-table td > small {
    max-width: 100%;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
}

.results-page .results-benchmark-table thead th {
    color: #697486;
    background: #f5f6f8;
    border-color: #e6e9ef;
}

.results-page .results-benchmark-table tbody tr:nth-child(even) td {
    background: #f8f9fc;
}

@media (max-width: 1180px) {
    .results-page .results-metric-heading.metric-in-panel:has(.results-benchmark-heading-controls) {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "controls";
    }

    .results-page .results-benchmark-heading-controls {
        justify-self: stretch;
        flex-wrap: wrap;
    }

    .results-page .results-benchmark-heading-controls .results-benchmark-select {
        flex: 1 1 260px;
        width: auto;
    }
}

@media (max-width: 980px) {
    .results-page .results-benchmark-section-grid,
    .results-page .results-efficiency-section-grid {
        grid-template-columns: 1fr;
    }

    .results-page .results-benchmark-image-frame {
        min-height: 360px;
    }

    .results-page .results-benchmark-table-wrap {
        max-height: none;
    }
}

@media (max-width: 620px) {
    .results-page .results-benchmark-heading-controls > * {
        flex: 1 1 auto;
    }

    .results-page .results-benchmark-heading-controls .results-benchmark-select {
        flex-basis: 100%;
        min-width: 0;
    }
}

/* Overview partagé et réglage administrateur. */
.overview-page .overview-media-cell strong {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.admin-overview-settings {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-overview-settings .panel-header,
.admin-overview-settings .panel-header h2,
.admin-overview-settings p {
    margin: 0;
}

.admin-overview-description {
    width: 100%;
    min-height: 88px;
    resize: vertical;
}

.admin-overview-settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.admin-overview-settings-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Cartes de l'activité récente sur Overview. */
.overview-activity-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    grid-auto-rows: minmax(188px, 204px);
    align-content: start;
    gap: 14px;
    padding: 2px 4px 6px 2px;
    overflow-y: auto;
}

.overview-activity-card {
    min-width: 0;
    min-height: 188px;
    height: 100%;
    max-height: 204px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    grid-template-areas: "content image";
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5eaf2;
    border-radius: 20px;
    box-shadow: 0 8px 22px rgba(56, 73, 101, .1);
    transition: transform .18s ease, box-shadow .18s ease;
}

.overview-activity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(56, 73, 101, .16);
}

.overview-activity-image {
    grid-area: image;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin: 12px 12px 12px 0;
    padding: 6px;
    color: #0033ff;
    background: #edf1ff;
    border-radius: 14px;
}

.overview-activity-image.video {
    color: #7a42d1;
    background: #f4edff;
}

.overview-activity-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.overview-activity-image > .material-icons {
    font-size: 48px;
}

.overview-activity-content {
    grid-area: content;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    overflow: hidden;
    box-sizing: border-box;
}

.overview-activity-heading {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

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

.overview-activity-heading h3 {
    margin: 0;
    display: -webkit-box;
    max-width: 100%;
    color: #243248;
    font-size: 14px;
    line-height: 1.35;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.overview-activity-heading .overview-type-pill {
    flex: 0 0 auto;
}

.overview-activity-heading small {
    display: block;
    margin-top: 3px;
    color: #9aa4b3;
    font-size: 10px;
}

.overview-activity-details {
    min-height: 0;
    display: grid;
    gap: 7px;
    overflow: hidden;
    color: #657287;
    font-size: 11px;
}

.overview-activity-details span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-activity-details .material-icons {
    flex: 0 0 auto;
    color: #8e9aae;
    font-size: 15px;
    font-style: normal;
}

.overview-activity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: auto;
}

.overview-activity-open {
    width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    text-decoration: none;
}

.overview-activity-open .material-icons {
    font-size: 18px;
}

@media (max-width: 700px) {
    .overview-activity-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(176px, 196px);
    }

    .overview-activity-card {
        min-height: 176px;
        max-height: 196px;
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .overview-activity-image {
        margin: 10px 10px 10px 0;
        padding: 5px;
    }
}

/* Comparaison : navigation façon Results et réglages alignés avec les images. */
.compare-page .compare-control-deck {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 0 7px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e4e7ed;
}

.compare-page .compare-back-projects {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    color: #536176;
    background: transparent;
    border: 0;
    border-radius: 9px;
}

.compare-page .compare-back-projects:hover {
    color: #0033ff;
    background: #edf1ff;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact {
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.result-tab {
    position: relative;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 8px 11px;
    color: #7b8494;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    font-weight: 720;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.result-tab::after {
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
    content: "";
    background: #0033ff;
    border-radius: 999px;
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .16s ease, transform .16s ease;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.result-tab:hover {
    color: #243248;
    background: transparent;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.result-tab.active,
.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.result-tab.active strong,
.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.result-tab.active .material-icons {
    color: #0033ff;
    background: transparent;
    box-shadow: none;
}

.compare-page .compare-metric-switcher.compare-metric-switcher-compact button.result-tab.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.compare-page .compare-selection-btn {
    grid-column: 3;
    justify-self: end;
    min-height: 36px;
    white-space: nowrap;
}

.compare-page .compare-display-bubble {
    grid-column: auto;
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
    padding: 10px;
    color: #536176;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .08);
}

.compare-page .compare-display-bubble .canvas-mode-option,
.compare-page .compare-display-bubble .canvas-aoi-toggle {
    width: 100%;
    min-height: 32px;
    justify-content: center;
    padding: 5px 7px;
    font-size: 11px;
}

.compare-page .compare-display-bubble .compare-time-toggle {
    width: 100%;
}

.compare-page .compare-display-bubble .compare-time-toggle button {
    flex: 1 1 50%;
    min-height: 30px;
    padding-inline: 5px;
    font-size: 11px;
}

.compare-visibility-score.best {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 3px 9px 3px 6px;
    color: #684b00;
    background: #fff2a8;
    border: 1px solid #e7c84f;
    border-radius: 999px;
    box-shadow: 0 2px 7px rgba(184, 137, 0, .15);
}

.compare-best-crown {
    font-size: 13px;
    line-height: 1;
}

.compare-page .compare-difference.positive {
    color: #087443;
    background: #dff7e9;
    border: 1px solid #9dddbb;
}

.compare-page .compare-difference.negative {
    color: #bd2525;
    background: #ffe5e5;
    border: 1px solid #f2aaaa;
}

@media (max-width: 760px) {
    .compare-page .compare-control-deck {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .compare-page .compare-selection-btn {
        grid-column: 3;
        width: auto;
    }
}

/* Saillance et AOI — état binaire signalé uniquement par un bleu plein. */
.results-page .canvas-mode-option.active,
.compare-page .canvas-mode-option.active,
.results-page .canvas-aoi-toggle.active,
.compare-page .canvas-aoi-toggle.active {
    color: #ffffff;
    background: #0033ff;
    border-color: #0033ff;
    box-shadow: none;
}

/* Le symbole et le nom Ittention restent entièrement blancs sur la sidebar. */
header.app-header .ittention-logo-image,
header.app-header.history-app-header .ittention-logo-image,
header.app-header .ittention-title-image,
header.app-header.history-app-header .ittention-title-image {
    filter: brightness(0) invert(1);
    mix-blend-mode: normal;
}

/* Comparaison : dimensions stables et association globale des AOI. */
.compare-page .compare-display-bubble {
    align-self: center;
    gap: 4px;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

.compare-page .compare-display-bubble .canvas-mode-options {
    padding: 2px;
}

.compare-page .compare-display-bubble .canvas-mode-option,
.compare-page .compare-display-bubble .canvas-aoi-toggle {
    min-height: 27px;
    padding: 3px 5px;
    font-size: 10px;
}

.compare-page .compare-display-bubble .canvas-mode-option .material-icons,
.compare-page .compare-display-bubble .canvas-aoi-toggle .material-icons {
    font-size: 14px;
}

.compare-page .compare-display-bubble .compare-time-toggle button {
    min-height: 26px;
    padding: 3px 4px;
    font-size: 10px;
}

.compare-page .compare-table .compare-aoi-row:not(.compare-reading-step-row) > td:first-child {
    grid-template-columns: minmax(0, 1fr) auto;
}

.compare-row-aoi-edit-btn {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
}

.compare-page .compare-difference {
    font-size: 15px;
    line-height: 1.15;
}

.compare-aoi-match-modal {
    width: min(1640px, 97vw);
}

.compare-aoi-match-all-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
    overflow: auto;
}

.compare-aoi-match-all-grid .compare-aoi-match-pane {
    min-height: 330px;
}

.compare-aoi-match-all-grid .compare-modal-image-holder {
    min-height: 0;
}

.compare-aoi-match-all-grid .compare-modal-image-stage img {
    max-height: min(46dvh, 520px);
}

.compare-aoi-match-actions .compare-aoi-match-validate {
    margin-left: auto;
}

.compare-aoi-match-actions .compare-aoi-match-validate:disabled {
    cursor: not-allowed;
    opacity: .5;
}

/* Comparaison : hauteur d’image identique dans tous les onglets. */
.compare-page:not(.workspace-index-page) .compare-main-area {
    --compare-fixed-image-height: clamp(220px, 30dvh, 280px);
    grid-template-rows: var(--compare-fixed-image-height) minmax(0, 1fr);
}

.compare-page:not(.workspace-index-page) .compare-image-row-simple,
.compare-page:not(.workspace-index-page) .compare-column-grid,
.compare-page:not(.workspace-index-page) .compare-image-cell,
.compare-page:not(.workspace-index-page) .compare-image-frame {
    height: 100%;
    min-height: 0;
}

.compare-page:not(.workspace-index-page) .compare-image-stage {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: calc(var(--compare-fixed-image-height) - 14px);
}

.compare-page:not(.workspace-index-page) .compare-image-stage img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(var(--compare-fixed-image-height) - 14px);
    object-fit: contain;
    object-position: center;
}

/* Petite bulle de réglages, alignée sous le bouton retour. */
.compare-page .compare-display-bubble {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    align-self: start;
    justify-self: start;
    box-sizing: border-box;
}

/* Results : tableaux harmonisés et visuels à largeur constante. */
.results-page {
    --results-panel-radius: 16px;
    --results-row-height: 48px;
    --results-surface: #ffffff;
    --results-row-surface: #f6f8fc;
    --results-row-hover: #edf2ff;
    --results-header-text: #7a8496;
}

.results-page .image-results-layout .report-section-grid,
.results-page .image-results-layout .results-efficiency-section-grid,
.results-page .image-results-layout .results-benchmark-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(16px, 2vw, 28px);
}

.results-page .image-results-layout .report-section-grid > *,
.results-page .image-results-layout .report-mini-visual,
.results-page .image-results-layout .report-table-wrap,
.results-page .image-results-layout .reading-report-grid,
.results-page .image-results-layout .size-chart,
.results-page .image-results-layout .color-chart {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.results-page .image-results-layout .report-mini-frame,
.results-page .image-results-layout .report-table-wrap,
.results-page .image-results-layout .size-chart,
.results-page .image-results-layout .color-chart {
    height: 100%;
    min-height: 0;
    max-height: none;
}

.results-page .image-results-layout .report-mini-frame {
    overflow: hidden;
    background: #f4f6fa;
    border: 0;
    border-radius: var(--results-panel-radius);
    box-shadow: none;
}

.results-page .image-results-layout .report-mini-frame img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.results-page .report-table-wrap,
.results-page .results-benchmark-table-wrap {
    padding: 8px;
    overflow: auto;
    background: var(--results-surface);
    border: 0;
    border-radius: var(--results-panel-radius);
    box-shadow: 0 10px 30px rgba(36, 50, 72, .07);
    scrollbar-gutter: stable;
}

.results-page .report-table,
.results-page .results-benchmark-table,
.results-page .video-report .report-table,
.results-page .video-report .video-transposed-table {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed !important;
    border-collapse: separate;
    border-spacing: 0 6px;
    background: transparent;
}

.results-page .report-table th,
.results-page .report-table td,
.results-page .results-benchmark-table th,
.results-page .results-benchmark-table td,
.results-page .video-report .report-table th,
.results-page .video-report .report-table td {
    height: var(--results-row-height);
    padding: 10px 14px;
    border: 0 !important;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.3;
    vertical-align: middle;
}

.results-page .report-table thead th,
.results-page .results-benchmark-table thead th,
.results-page .video-report .report-table thead th {
    height: 38px;
    padding-block: 7px;
    color: var(--results-header-text);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.results-page .report-table tbody td,
.results-page .results-benchmark-table tbody td,
.results-page .video-report .report-table tbody td {
    color: #344054;
    background: var(--results-row-surface);
    transition: background-color .16s ease, color .16s ease;
}

.results-page .report-table tbody tr:nth-child(even) td,
.results-page .results-benchmark-table tbody tr:nth-child(even) td,
.results-page .video-report .report-table tbody tr:nth-child(even) td {
    background: var(--results-row-surface);
}

.results-page .report-table tbody tr:hover td,
.results-page .report-table tbody tr:focus-visible td,
.results-page .results-benchmark-table tbody tr:hover td,
.results-page .results-benchmark-table tbody tr:focus-visible td,
.results-page .video-report .report-table tbody tr:hover td {
    background: var(--results-row-hover);
}

.results-page .report-table tbody td:first-child,
.results-page .results-benchmark-table tbody td:first-child,
.results-page .video-report .report-table tbody td:first-child {
    border-radius: 10px 0 0 10px;
}

.results-page .report-table tbody td:last-child,
.results-page .results-benchmark-table tbody td:last-child,
.results-page .video-report .report-table tbody td:last-child {
    border-radius: 0 10px 10px 0;
}

.results-page .report-table .report-aoi-row.selected td,
.results-page .results-benchmark-table tbody tr.selected td {
    color: #173a8f;
    background: #e5edff !important;
    box-shadow: none !important;
}

.results-page .report-table .report-aoi-row.selected td:first-child {
    box-shadow: none !important;
}

.results-page .report-table .report-total-row td,
.results-page .report-table .reading-total-row td {
    color: #1f2a3d;
    background: #eef1f6;
    font-weight: 800;
}

.results-page .report-section-grid .report-table th:first-child:nth-last-child(2) {
    width: 50%;
}

.results-page .report-section-grid .report-table th:first-child:nth-last-child(4) {
    width: 32%;
}

.results-page .reading-table .reading-order-col { width: 12% !important; }
.results-page .reading-table .reading-name-col { width: 38% !important; }
.results-page .reading-table .reading-time-col,
.results-page .reading-table .reading-total-col { width: 25% !important; }

.results-page .results-efficiency-table .results-efficiency-name-col { width: 34%; }
.results-page .results-efficiency-table .results-efficiency-metric-col { width: 22%; }

@media (max-width: 980px) {
    .results-page .image-results-layout .report-section-grid,
    .results-page .image-results-layout .results-efficiency-section-grid,
    .results-page .image-results-layout .results-benchmark-section-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-page .image-results-layout .report-mini-frame {
        min-height: clamp(320px, 56vh, 560px);
    }

    .results-page .image-results-layout .report-table-wrap,
    .results-page .image-results-layout .size-chart,
    .results-page .image-results-layout .color-chart {
        height: auto;
        max-height: none;
    }
}

@media (max-width: 620px) {
    .results-page {
        --results-row-height: 44px;
    }

    .results-page .report-table th,
    .results-page .report-table td,
    .results-page .results-benchmark-table th,
    .results-page .results-benchmark-table td {
        padding-inline: 10px;
        font-size: 12px;
    }
}

/* Results / Comparaison : correctifs de dimensionnement et langage visuel commun. */
.results-page {
    --results-media-height: clamp(360px, calc(100dvh - 210px), 700px);
}

@media (min-width: 981px) {
    .results-page .image-results-layout .report-mini-frame,
    .results-page .image-results-layout .report-section-grid > .report-table-wrap,
    .results-page .image-results-layout .report-section-grid > .result-table-column,
    .results-page .image-results-layout .size-chart,
    .results-page .image-results-layout .color-chart {
        height: var(--results-media-height);
        min-height: var(--results-media-height);
        max-height: var(--results-media-height);
    }

    .results-page .image-results-layout .report-mini-frame {
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .results-page .image-results-layout .report-mini-frame > div:not(.result-upload-caption) {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: calc(var(--results-media-height) - 48px);
    }

    .results-page .image-results-layout .report-mini-frame img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: calc(var(--results-media-height) - 48px);
    }
}

.results-page .result-table-column {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.results-page .result-table-column > .report-table-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.results-page .report-table .report-total-row td {
    color: #0b6b50;
    background: #dff5ec !important;
    box-shadow: none !important;
}

/* La navigation Results reprend exactement le traitement des onglets Comparaison. */
.results-page .results-sticky-controls {
    margin-bottom: 12px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e4e7ed;
    border-radius: 0;
    box-shadow: none;
}

.results-page .results-sticky-controls .result-tabs {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 0 7px;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.results-page .results-sticky-controls .result-tab-group {
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.results-page .results-sticky-controls .result-tab-group .result-tab {
    position: relative;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 8px 11px;
    color: #7b8494;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    font-weight: 720;
}

.results-page .results-sticky-controls .result-tab-group .result-tab::after {
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
    content: "";
    background: #0033ff;
    border-radius: 999px;
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .16s ease, transform .16s ease;
}

.results-page .results-sticky-controls .result-tab-group .result-tab:hover {
    color: #243248;
    background: transparent;
}

.results-page .results-sticky-controls .result-tab-group .result-tab.active,
.results-page .results-sticky-controls .result-tab-group .result-tab.active .material-icons {
    color: #0033ff;
    background: transparent;
    box-shadow: none;
}

.results-page .results-sticky-controls .result-tab-group .result-tab.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.results-page .results-sticky-controls .results-toolbar-back {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    color: #536176;
    background: transparent;
    border: 0;
    border-radius: 9px;
}

.results-page .results-sticky-controls .results-toolbar-back:hover {
    color: #0033ff;
    background: #edf1ff;
}

.results-page .results-sticky-controls .result-action-group {
    grid-column: 3;
    justify-self: end;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Contrôles de comparaison benchmark, placés au-dessus du tableau. */
.results-page .result-benchmark-controls {
    min-width: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.results-page .result-benchmark-toggle,
.results-page .result-benchmark-select {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    color: #536176;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 780;
}

.results-page .result-benchmark-toggle {
    padding: 7px 10px;
    cursor: pointer;
}

.results-page .result-benchmark-toggle:hover:not(:disabled):not(.active) {
    color: #0033ff;
    background: #edf1ff;
    border-color: rgba(0, 51, 255, .2);
}

.results-page .result-benchmark-toggle.active {
    color: #ffffff;
    background: #0033ff;
    border-color: #0033ff;
    box-shadow: none;
}

.results-page .result-benchmark-toggle:disabled {
    cursor: wait;
    opacity: .65;
}

.results-page .result-benchmark-toggle .material-icons,
.results-page .result-benchmark-select .material-icons {
    font-size: 17px;
}

.results-page .result-benchmark-select {
    min-width: min(280px, 100%);
    flex: 1 1 220px;
    padding: 0 8px;
}

.results-page .result-benchmark-select select {
    width: 100%;
    min-width: 0;
    height: 36px;
    color: #344054;
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 12px;
}

.results-page .result-benchmark-select option {
    font-size: 12px;
}

.results-page .result-benchmark-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.results-page .result-benchmark-status .material-icons {
    font-size: 15px;
    animation: spin 1.2s linear infinite;
}

.results-page .result-benchmark-status.error {
    color: #b42318;
}

.results-page .report-table.benchmark-active {
    min-width: 100% !important;
}

.results-page .report-table.benchmark-active th:first-child {
    width: 30%;
}

.results-page .results-efficiency-table.benchmark-active {
    min-width: 100% !important;
}

.results-page .results-efficiency-table.benchmark-active .results-efficiency-name-col { width: 24%; }
.results-page .results-efficiency-table.benchmark-active .results-efficiency-metric-col { width: 10%; }
.results-page .results-efficiency-table.benchmark-active .results-efficiency-benchmark-col { width: 15%; }
.results-page .results-efficiency-table.benchmark-active .results-efficiency-tercile-col { width: 16%; }

.results-page .report-table.benchmark-active th,
.results-page .results-efficiency-table.benchmark-active td {
    padding-inline: clamp(5px, .65vw, 10px);
}

.results-page .results-efficiency-table.benchmark-active th {
    padding-inline: 5px;
    font-size: 9px;
    white-space: normal;
}

.results-page .results-efficiency-table.benchmark-active td {
    font-size: 11px;
}

.results-page .result-benchmark-diff,
.results-page .result-tercile-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.results-page .result-tercile-pill {
    width: 76px;
    box-sizing: border-box;
}

.results-page .result-benchmark-diff.positive {
    color: #087443;
    background: transparent;
}

.results-page .result-benchmark-diff.negative {
    color: #bd2525;
    background: transparent;
}

.results-page .result-benchmark-diff.neutral {
    color: #667085;
    background: transparent;
}

.results-page .result-tercile-pill.top {
    color: #087443;
    background: #dff7e9;
}

.results-page .result-tercile-pill.middle {
    color: #875800;
    background: #fff3cf;
}

.results-page .result-tercile-pill.bottom {
    color: #bd2525;
    background: #ffe5e5;
}

/* Comparaison : les cellules utilisent les mêmes surfaces sans quadrillage. */
.compare-page .compare-table-wrap {
    padding: 8px;
    background: var(--results-surface);
    border: 0;
    border-radius: var(--results-panel-radius);
    box-shadow: 0 10px 30px rgba(36, 50, 72, .07);
}

.compare-page .compare-table {
    width: max-content;
    min-width: 100% !important;
    max-width: none;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.compare-page .compare-table th,
.compare-page .compare-table td {
    min-height: var(--results-row-height);
    padding: 10px 14px;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px;
    line-height: 1.3;
}

.compare-page .compare-table thead th {
    min-height: 38px;
    color: var(--results-header-text);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.compare-page .compare-table tbody td {
    margin-top: 6px;
    color: #344054;
    background: var(--results-row-surface);
    transition: background-color .16s ease, color .16s ease;
}

.compare-page .compare-table tbody tr:nth-child(even) td {
    background: var(--results-row-surface);
}

.compare-page .compare-table tbody tr:hover td,
.compare-page .compare-table tbody tr:focus-visible td {
    background: var(--results-row-hover);
}

.compare-page .compare-table tbody td:first-child,
.compare-page .compare-table tfoot td:first-child {
    background: var(--results-row-surface);
    border-radius: 10px 0 0 10px;
}

.compare-page .compare-table tbody td:last-child,
.compare-page .compare-table tfoot td:last-child {
    border-radius: 0 10px 10px 0;
}

.compare-page .compare-table .compare-aoi-row.selected td {
    color: #173a8f;
    background: #e5edff !important;
    box-shadow: none !important;
}

.compare-page .compare-table tfoot td {
    min-height: var(--results-row-height);
    margin-top: 6px;
    color: #0b6b50;
    background: #dff5ec !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Comparaison : les images et le tableau partagent exactement la même grille. */
.compare-page:not(.workspace-index-page) .compare-grid-scroll {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.compare-page:not(.workspace-index-page) .compare-grid-content {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
    gap: 6px;
}

.compare-page:not(.workspace-index-page) .compare-image-row-simple,
.compare-page:not(.workspace-index-page) .compare-column-grid,
.compare-page:not(.workspace-index-page) .compare-table-wrap,
.compare-page:not(.workspace-index-page) .compare-table {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
    box-sizing: border-box;
}

.compare-page:not(.workspace-index-page) .compare-column-grid {
    column-gap: 0;
    overflow: visible;
}

.compare-page:not(.workspace-index-page) .compare-display-bubble {
    width: calc(100% - 6px);
    min-width: 0;
    max-width: none;
}

.compare-page:not(.workspace-index-page) .compare-image-cell,
.compare-page:not(.workspace-index-page) .compare-image-spacer {
    margin-inline: 3px;
}

.compare-page:not(.workspace-index-page) .compare-image-spacer {
    grid-column: auto;
}

.compare-page:not(.workspace-index-page) .compare-table-wrap {
    padding-inline: 0;
    overflow-x: hidden;
    scrollbar-gutter: auto;
}

.compare-page:not(.workspace-index-page) .compare-column-heading,
.compare-page:not(.workspace-index-page) .compare-column-name {
    min-width: 0;
}

.compare-page:not(.workspace-index-page) .compare-column-heading {
    overflow: hidden;
    cursor: help;
}

.compare-page:not(.workspace-index-page) .compare-column-name {
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-page:not(.workspace-index-page) .compare-table th,
.compare-page:not(.workspace-index-page) .compare-table td {
    min-width: 0;
    padding-inline: clamp(4px, .75vw, 10px);
    overflow: hidden;
    font-size: clamp(9px, .86vw, 12px);
}

.compare-page:not(.workspace-index-page) .compare-table thead th {
    font-size: clamp(8px, .72vw, 10px);
}

.compare-page:not(.workspace-index-page) .compare-metric-value {
    gap: 3px;
}

.compare-page:not(.workspace-index-page) .compare-metric-value > strong {
    font-size: clamp(10px, 1.05vw, 14px);
}

.compare-page:not(.workspace-index-page) .compare-reference-diff,
.compare-page:not(.workspace-index-page) .compare-difference {
    min-height: 18px;
    padding: 1px clamp(3px, .45vw, 6px);
    font-size: clamp(8px, .78vw, 11px);
}

.compare-page:not(.workspace-index-page) .compare-reading-step-value {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-page:not(.workspace-index-page) .compare-reading-step-value > span {
    justify-content: center;
}

.compare-page .compare-aoi-layer polygon {
    fill: rgba(255, 255, 255, .06);
    stroke: #050505;
    stroke-width: 3px;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .75));
    vector-effect: non-scaling-stroke;
}

/* Results : contours AOI noirs et contrastés sur toutes les vues. */
.results-page .report-aoi-outline {
    fill: transparent;
    stroke: #000000;
    stroke-width: 4px;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .75));
}

.results-page .report-aoi-poly {
    fill: rgba(0, 190, 255, .16);
    stroke: #000000;
    stroke-width: 2.5px;
}

/* Association AOI : référence fixe à gauche et cible active à droite. */
.compare-aoi-match-modal .compare-aoi-match-all-grid {
    height: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}

.compare-aoi-match-modal {
    height: min(780px, 94dvh);
}

.compare-aoi-match-modal .compare-aoi-match-pane,
.compare-aoi-match-all-grid .compare-aoi-match-pane {
    height: 100%;
    min-height: 0;
    padding: 8px;
}

.compare-aoi-match-modal .compare-aoi-match-pane-heading {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.compare-aoi-match-modal .compare-aoi-match-target-tabs {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    background: #e8f1fa;
    border-radius: 10px;
}

.compare-aoi-match-modal .compare-aoi-match-target-tabs button {
    min-width: 0;
    max-width: 180px;
    min-height: 32px;
    flex: 0 0 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 9px;
    color: #60758a;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
}

/* Benchmarks — scores uniformes et palette officielle des terciles. */
.benchmark-meta-table th,
.benchmark-meta-table td,
.benchmark-meta-table td strong,
.benchmark-meta-table td small,
.benchmark-compare-table th,
.benchmark-compare-table td,
.benchmark-compare-table td strong,
.benchmark-compare-table td small {
    font-size: 12px !important;
    line-height: 1.25;
}

.results-page .result-tercile-pill.bottom {
    color: #ffffff;
    background: #ff3333;
}

.results-page .result-tercile-pill.middle,
.results-page .result-tercile-pill.medium {
    color: #ffffff;
    background: #f7721c;
}

.results-page .result-tercile-pill.top {
    color: #ffffff;
    background: #00ae3f;
}

.compare-aoi-match-modal .compare-aoi-match-target-tabs button > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-aoi-match-modal .compare-aoi-match-target-tabs button .material-icons {
    flex: 0 0 auto;
    color: #17884a;
    font-size: 15px;
}

.compare-aoi-match-modal .compare-aoi-match-target-tabs button:hover {
    color: #174d79;
    background: rgba(255, 255, 255, .62);
}

.compare-aoi-match-modal .compare-aoi-match-target-tabs button.active {
    color: #0f5ea8;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(38, 75, 112, .14);
}

.compare-aoi-match-modal .compare-modal-image-holder {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 5px;
    overflow: hidden;
}

.compare-aoi-match-modal .compare-modal-image-stage {
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    transition: opacity .12s ease;
}

.compare-aoi-match-modal .compare-modal-image-stage.is-fitted {
    opacity: 1;
}

.compare-aoi-match-modal .compare-modal-image-stage img,
.compare-aoi-match-all-grid .compare-modal-image-stage img {
    width: 0;
    height: 0;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.compare-aoi-match-modal .compare-modal-image-status {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: #60758a;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

.compare-aoi-match-modal .compare-modal-image-status .material-icons {
    font-size: 22px;
    animation: compare-modal-image-spin .9s linear infinite;
}

.compare-aoi-match-modal .compare-modal-image-status.is-empty .material-icons {
    animation: none;
}

@keyframes compare-modal-image-spin {
    to {
        transform: rotate(360deg);
    }
}

.compare-aoi-match-modal .compare-aoi-layer polygon,
.compare-aoi-match-modal .compare-aoi-layer.selected polygon {
    stroke: #000000 !important;
    stroke-width: 4px !important;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .8));
}

.compare-aoi-match-modal .compare-match-target-aoi:hover polygon {
    fill: rgba(0, 191, 255, .3);
    stroke: #000000 !important;
}

.compare-page .compare-aoi-layer.compare-selected-aoi-overlay,
.compare-aoi-match-modal .compare-aoi-layer.compare-selected-aoi-overlay {
    pointer-events: none;
}

.compare-page .compare-aoi-layer.compare-selected-aoi-overlay polygon,
.compare-aoi-match-modal .compare-aoi-layer.compare-selected-aoi-overlay polygon {
    fill: rgba(255, 107, 44, .46) !important;
    stroke: #ff4d00 !important;
    stroke-width: 7px !important;
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 1))
        drop-shadow(0 0 7px rgba(255, 61, 0, .95));
}

/* Lecture : repères plus discrets pour ne pas masquer l’image. */
.compare-page .compare-journey-point circle {
    stroke-width: 2px;
}

.compare-page .compare-journey-point text {
    stroke-width: 1.25px;
    font-size: 9px;
}

@media (min-width: 981px) {
    .compare-page:not(.workspace-index-page) .compare-main-area {
        --compare-fixed-image-height: clamp(170px, 25dvh, 235px);
        grid-template-rows: minmax(0, 1fr);
    }

    .compare-page:not(.workspace-index-page) .compare-grid-scroll,
    .compare-page:not(.workspace-index-page) .compare-grid-content {
        height: 100%;
        min-height: 0;
    }

    .compare-page:not(.workspace-index-page) .compare-grid-content {
        grid-template-rows: var(--compare-fixed-image-height) minmax(0, 1fr);
    }

    .compare-page:not(.workspace-index-page) .compare-table-wrap {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 980px) {
    .results-page .result-table-column {
        height: auto;
    }

    .results-page .results-sticky-controls .result-tabs {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .results-page .results-sticky-controls .result-action-group {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 820px) {
    .compare-aoi-match-modal .compare-aoi-match-all-grid {
        height: 100%;
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        grid-template-rows: minmax(0, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .compare-aoi-match-modal .compare-aoi-match-pane,
    .compare-aoi-match-all-grid .compare-aoi-match-pane {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .results-page .result-benchmark-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .results-page .result-benchmark-toggle,
    .results-page .result-benchmark-select {
        width: 100%;
    }
}

/* Modal de connexion partagée : identité et alignement identiques sur toutes les pages. */
.login-brand {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
}

.login-brand-logo {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    isolation: isolate;
}

.ittention-login-logo-image {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.login-brand-copy {
    min-width: 0;
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 5px;
}

.login-brand .page-eyebrow {
    margin: 0;
    line-height: 1;
}

.login-brand-title {
    margin: 0;
    line-height: 0;
}

.login-brand .ittention-login-title-image {
    width: 172px;
    height: 33px;
    padding: 7px 10px;
    object-position: left center;
}

.login-fields {
    width: 100%;
}

.login-fields > input,
.login-fields > .btn {
    width: 100%;
}

@media (max-width: 420px) {
    .login-box {
        padding: 22px;
    }

    .login-brand {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 11px;
    }

    .login-brand-logo {
        width: 50px;
        height: 50px;
    }

    .ittention-login-logo-image {
        width: 43px;
        height: 43px;
    }

    .login-brand .ittention-login-title-image {
        width: 155px;
        max-width: 100%;
        height: 30px;
        padding: 6px 9px;
    }
}

/* Compare & Results — une seule barre, sans sous-conteneur autour des boutons. */
.compare-page .compare-control-deck,
.results-page .results-sticky-controls .result-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 7px;
    overflow-x: auto;
    background: var(--ittention-gradient);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 51, 145, .2);
    scrollbar-width: none;
}

.compare-page .compare-control-deck::-webkit-scrollbar,
.results-page .results-sticky-controls .result-tabs::-webkit-scrollbar {
    display: none;
}

.results-page .results-sticky-controls {
    margin-bottom: 14px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.compare-page .compare-control-deck > .btn,
.compare-page .compare-control-deck > .result-tab,
.results-page .results-sticky-controls .result-tabs > .result-tab {
    min-height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    color: rgba(255, 255, 255, .9);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 720;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.compare-page .compare-control-deck > .result-tab strong,
.compare-page .compare-control-deck > .result-tab .material-icons,
.results-page .results-sticky-controls .result-tabs > .result-tab .material-icons {
    color: inherit;
}

.compare-page .compare-control-deck > .btn:hover,
.compare-page .compare-control-deck > .result-tab:hover,
.results-page .results-sticky-controls .result-tabs > .result-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .18);
}

.compare-page .compare-control-deck > .result-tab.active,
.compare-page .compare-control-deck > .result-tab.active strong,
.compare-page .compare-control-deck > .result-tab.active .material-icons,
.results-page .results-sticky-controls .result-tabs > .result-metric-tab.active,
.results-page .results-sticky-controls .result-tabs > .result-metric-tab.active .material-icons {
    color: #ffffff;
    background: #002b78;
    border-color: rgba(255, 255, 255, .2);
    box-shadow: 0 5px 14px rgba(0, 24, 88, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.compare-page .compare-control-deck > .compare-metric-tab.active,
.results-page .results-sticky-controls .result-tabs > .result-metric-tab.active {
    box-shadow: inset 0 0 0 1px #ffffff, 0 5px 14px rgba(0, 24, 88, .34);
}

.compare-page .compare-control-deck > .result-tab::after,
.results-page .results-sticky-controls .result-tabs > .result-tab::after {
    display: none;
}

.compare-page .compare-control-deck > .compare-back-projects,
.results-page .results-sticky-controls .result-tabs > .results-toolbar-back {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

.compare-page .compare-control-deck > .compare-selection-btn {
    margin-left: auto;
}

.results-page .results-sticky-controls .result-action-label {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding-left: 10px;
    color: rgba(255, 255, 255, .82);
    border-left: 1px solid rgba(255, 255, 255, .22);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.results-page .results-sticky-controls .result-action-label .material-icons {
    color: inherit;
    font-size: 17px;
}

@media (max-width: 760px) {
    .compare-page .compare-control-deck,
    .results-page .results-sticky-controls .result-tabs {
        border-radius: 13px;
    }

    .compare-page .compare-control-deck > .compare-selection-btn,
    .results-page .results-sticky-controls .result-action-label {
        margin-left: 0;
    }
}

/* Headers d'analyse Results / Comparaison — contrôles visuellement identiques. */
.results-page .result-canvas-controls,
.compare-page .compare-display-bubble {
    gap: 6px;
    padding: 6px;
    color: #536176;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

.results-page .result-canvas-controls .canvas-mode-options,
.compare-page .compare-display-bubble .canvas-mode-options,
.results-page .result-canvas-controls .compare-time-toggle,
.compare-page .compare-display-bubble .compare-time-toggle {
    gap: 3px;
    padding: 3px;
    background: #eef2f7;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
}

.results-page .result-canvas-controls .canvas-mode-option,
.compare-page .compare-display-bubble .canvas-mode-option,
.results-page .result-canvas-controls .canvas-aoi-toggle,
.compare-page .compare-display-bubble .canvas-aoi-toggle,
.results-page .result-canvas-controls .compare-time-toggle button,
.compare-page .compare-display-bubble .compare-time-toggle button {
    min-height: 34px;
    padding: 6px 9px;
    color: #536176;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    box-shadow: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 720;
    line-height: 1;
}

.results-page .result-canvas-controls .canvas-mode-option .material-icons,
.compare-page .compare-display-bubble .canvas-mode-option .material-icons,
.results-page .result-canvas-controls .canvas-aoi-toggle .material-icons,
.compare-page .compare-display-bubble .canvas-aoi-toggle .material-icons {
    color: inherit;
    font-size: 17px;
}

.results-page .result-canvas-controls .canvas-mode-option:hover:not(:disabled),
.compare-page .compare-display-bubble .canvas-mode-option:hover:not(:disabled),
.results-page .result-canvas-controls .canvas-aoi-toggle:hover,
.compare-page .compare-display-bubble .canvas-aoi-toggle:hover,
.results-page .result-canvas-controls .compare-time-toggle button:hover,
.compare-page .compare-display-bubble .compare-time-toggle button:hover {
    color: #0033ff;
    background: #ffffff;
    border-color: rgba(0, 51, 255, .16);
}

.results-page .result-canvas-controls .canvas-mode-option.active,
.compare-page .compare-display-bubble .canvas-mode-option.active,
.results-page .result-canvas-controls .canvas-aoi-toggle.active,
.compare-page .compare-display-bubble .canvas-aoi-toggle.active,
.results-page .result-canvas-controls .compare-time-toggle button.active,
.compare-page .compare-display-bubble .compare-time-toggle button.active {
    color: #ffffff;
    background: #0033ff;
    border-color: #0033ff;
    box-shadow: none;
}

/* Actions des barres Compare / Results — une classe unique, sans variante héritée. */
.compare-page .compare-control-deck > .page-bar-action,
.results-page .results-sticky-controls .result-tabs > .page-bar-action {
    width: auto;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    color: rgba(255, 255, 255, .92) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
}

.compare-page .compare-control-deck > .page-bar-action:hover,
.results-page .results-sticky-controls .result-tabs > .page-bar-action:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .2) !important;
}

.compare-page .compare-control-deck > .page-bar-back,
.results-page .results-sticky-controls .result-tabs > .page-bar-back {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

.compare-page .compare-control-deck > .page-bar-action .material-icons,
.results-page .results-sticky-controls .result-tabs > .page-bar-action .material-icons {
    color: inherit;
    font-size: 18px;
}

/* Logo partagé : même asset blanc et même rendu sur chaque sidebar. */
header.app-header .logo,
header.app-header.compact-header .logo,
header.app-header.history-app-header .logo {
    background-image: url("/app/templates/assets/ittention-logo-blanc-2026.png?v=20260903-2");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Results — nom principal et catégorie métier sur deux lignes. */
.results-page .report-name-stack {
    min-width: 0;
    max-width: calc(100% - 30px);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    vertical-align: middle;
}

.results-page .report-name-stack .report-name-text {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    line-height: 1.15;
}

.results-page .report-name-category {
    width: 100%;
    overflow: hidden;
    color: #8a94a5;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Taille — tableau détaillé et anneau d'occupation de l'image. */
.results-page .size-occupation-layout {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.results-page .size-occupation-table-wrap {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

.results-page .size-occupation-table th:first-child {
    width: 72%;
}

.results-page .size-occupation-table.benchmark-active th:first-child {
    width: 32%;
}

.results-page .size-occupation-table th:last-child,
.results-page .size-occupation-table td:last-child {
    text-align: right;
}

.results-page .size-donut-card {
    min-width: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-radius: 14px;
}

.results-page .size-donut {
    width: clamp(96px, 8vw, 112px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(24, 54, 104, .12);
}

.results-page .size-donut-center {
    width: 61%;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2px;
    color: #344054;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #e4e9f1;
}

.results-page .size-donut-center strong {
    color: #0033ff;
    font-size: 16px;
    line-height: 1;
}

.results-page .size-donut-center span,
.results-page .size-donut-card > small {
    color: #7a8496;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 1180px) {
    .results-page .size-occupation-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .results-page .size-donut-card {
        padding-inline: 8px;
    }
}

/* Results — socle typographique et chromatique commun à tous les tableaux. */
.results-page .report-table {
    color: #202733;
    font-size: 14px;
    line-height: 1.25;
}

.results-page .report-table thead th {
    padding: 9px 10px;
    color: #111111 !important;
    background: #eef2f7;
    border-bottom: 1px solid #d9e0e9 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.25;
}

.results-page .report-table tbody td {
    padding: 9px 10px;
    color: #273244;
    border-bottom-color: #e4e9f0;
    font-size: 14px !important;
    font-weight: 750;
    line-height: 1.25;
}

.results-page .report-table .report-name-text,
.results-page .report-table td > strong,
.results-page .report-table .reading-time-value,
.results-page .report-table .result-benchmark-diff,
.results-page .report-table .result-tercile-pill {
    font-size: 14px !important;
    line-height: 1.2;
}

.results-page .report-table .report-name-text,
.results-page .report-table td > strong {
    color: #202733;
    font-weight: 750;
}

.results-page .report-table .result-benchmark-diff,
.results-page .report-table .result-tercile-pill {
    font-weight: inherit;
    line-height: inherit;
}

.results-page .report-table .report-total-row td,
.results-page .report-table .reading-total-row td {
    font-size: 14px !important;
    font-weight: 750;
}

@media (max-width: 700px) {
    .results-page .size-occupation-layout {
        height: auto;
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Répartition / Efficacité — totaux bleus et repères AOI identiques aux images. */
.results-page .results-repartition-table .report-total-row td,
.results-page .results-efficiency-table .report-total-row td,
.results-page .size-occupation-table .report-total-row td {
    color: #0033ff;
    background: #e8edff !important;
}

.results-page .report-table .aoi-letter-chip {
    width: 22px;
    height: 22px;
    color: #ffffff;
    background: #071522;
    border: 1.5px solid #ffffff;
    box-shadow: none;
    font-size: 10px;
}

/* Connexion — même identité blanche et même dégradé bleu que la sidebar. */
.login-box[aria-label="Connexion à Ittention"] {
    color: #ffffff;
    background: var(--ittention-gradient);
    border-color: rgba(255, 255, 255, .25);
    box-shadow: 0 24px 64px rgba(0, 30, 105, .32);
}

.login-box[aria-label="Connexion à Ittention"] .login-brand-logo {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.login-box[aria-label="Connexion à Ittention"] .ittention-login-logo-image {
    mix-blend-mode: normal;
}

.login-box[aria-label="Connexion à Ittention"] .login-brand .page-eyebrow {
    color: rgba(255, 255, 255, .82);
}

.login-box[aria-label="Connexion à Ittention"] .ittention-login-title-image {
    padding: 0;
    background: transparent;
    filter: brightness(0) invert(1);
}

.login-box[aria-label="Connexion à Ittention"] .login-fields input {
    color: #172033;
    background: #ffffff;
    border-color: rgba(255, 255, 255, .6);
}

.login-box[aria-label="Connexion à Ittention"] .login-fields input::placeholder {
    color: #7b8799;
}

.login-box[aria-label="Connexion à Ittention"] .login-fields .btn.primary {
    color: #0033a0;
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 27, 94, .2);
}

.login-box[aria-label="Connexion à Ittention"] .login-fields .btn.primary:hover {
    color: #002b78;
    background: #f2f6ff;
    border-color: #f2f6ff;
}

/* Comparaison — valeurs et écarts alignés dans deux sous-colonnes. */
.compare-page .compare-table .compare-metric-value {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(48px, .8fr);
    align-items: center;
    gap: 6px;
}

.compare-page .compare-table .compare-metric-value > strong,
.compare-page .compare-table .compare-metric-value > small:first-child {
    justify-self: end;
    text-align: right;
}

.compare-page .compare-table .compare-difference,
.compare-page .compare-table .compare-difference-spacer {
    justify-self: start;
}

.compare-page .compare-table .compare-difference-spacer {
    min-width: 48px;
    min-height: 1px;
}

.compare-page .compare-table .compare-reading-step-value {
    width: 100%;
}

.compare-page .compare-table tfoot td {
    color: #0033ff;
    background: #e8edff !important;
}

/* Tableaux de comparaison — typographie, rythmes et en-têtes uniformes. */
.compare-page .compare-table,
.benchmark-compare-table {
    color: #202733;
    font-size: 12px;
    line-height: 1.25;
}

.compare-page .compare-table th,
.benchmark-compare-table th {
    color: #111111 !important;
    background: #eef2f7;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

.compare-page .compare-table td,
.compare-page .compare-table td > strong,
.compare-page .compare-table .compare-column-name,
.compare-page .compare-table .compare-metric-value > strong,
.compare-page .compare-table .compare-metric-value > small:first-child,
.compare-page .compare-table .compare-difference,
.compare-page .compare-table .compare-reading-order,
.benchmark-compare-table td,
.benchmark-compare-table td strong,
.benchmark-compare-table td small {
    font-size: 12px !important;
    line-height: 1.25;
}

.compare-page .compare-table td {
    color: #273244;
    font-weight: 500;
}

.compare-page .compare-table td > strong,
.compare-page .compare-table .compare-metric-value > strong,
.compare-page .compare-table .compare-column-name {
    font-weight: 750;
}

.compare-page .compare-table .compare-difference {
    min-height: 24px;
    padding: 3px 8px;
    font-weight: 750;
}

.compare-page .compare-table tfoot td {
    color: #0033ff;
    font-size: 12px !important;
    font-weight: 750;
}

/* Comparaison — rendu strictement identique entre Visibilité, Lecture et Taille. */
.compare-page .compare-table tbody td,
.compare-page .compare-table tbody td > strong,
.compare-page .compare-table tbody td > span:not(.compare-reading-order),
.compare-page .compare-table .compare-metric-value > strong,
.compare-page .compare-table .compare-metric-value > small:first-child,
.compare-page .compare-table .compare-reading-step-value,
.compare-page .compare-table .compare-reading-step-value small,
.compare-page .compare-table .compare-difference,
.compare-page .compare-table td.missing {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.compare-page .compare-table .compare-metric-value > strong,
.compare-page .compare-table .compare-metric-value > small:first-child {
    color: #273244;
    font-weight: 750;
}

.compare-page .compare-table .compare-reading-step-value {
    display: block;
    font-weight: 500;
}

/* Accès direct aux résultats depuis chaque image comparée. */
.compare-page .compare-image-frame {
    position: relative;
}

.compare-page .compare-image-results-link {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 4;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 7px;
    color: #ffffff;
    background: #0033ff;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 31, 120, .24);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
}

.compare-page .compare-image-results-link .material-icons {
    font-size: 15px;
}

.compare-page .compare-image-results-link:hover,
.compare-page .compare-image-results-link:focus-visible {
    color: #ffffff;
    background: #002b78;
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 1px;
}

/* Lecture Comparaison — repères numérotés noirs et blancs sur toutes les images. */
.compare-page .compare-journey-point circle {
    fill: #071522;
    stroke: #ffffff;
    stroke-width: 2.5px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.compare-page .compare-journey-point text {
    fill: #ffffff;
    stroke: #071522;
    stroke-width: 1px;
    paint-order: stroke;
}

/* Deux sous-colonnes égales par image : valeur à gauche, différence à droite. */
.compare-page .compare-table td:not(:first-child) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
}

.compare-page .compare-table .compare-metric-value {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.compare-page .compare-table .compare-difference-spacer {
    min-width: 0;
}

/* Les en-têtes et valeurs de chaque image partagent les mêmes deux sous-colonnes. */
.compare-page .compare-table .compare-column-heading {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 0;
}

.compare-page .compare-table .compare-column-heading > span {
    text-align: center;
}

.compare-page .compare-table .compare-reference-column {
    grid-template-columns: minmax(0, 1fr);
}

.compare-page .compare-table .compare-reference-column .compare-metric-value {
    grid-template-columns: minmax(0, 1fr);
}

.compare-page .compare-table .compare-reference-column .compare-difference-spacer {
    display: none;
}

.compare-page .compare-table .compare-column-heading > span + span,
.compare-page .compare-table .compare-metric-value > .compare-difference,
.compare-page .compare-table .compare-metric-value > .compare-difference-spacer {
    border-left: 1px solid #d9e0e9;
}

.compare-page .compare-table .compare-difference {
    background: transparent;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    justify-self: center;
    text-align: center;
}

.compare-page .compare-table .compare-metric-value > strong,
.compare-page .compare-table .compare-metric-value > small:first-child,
.compare-page .compare-table .compare-metric-value > .compare-difference,
.compare-page .compare-table .compare-difference-spacer {
    width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.compare-page .compare-table .compare-score,
.compare-page .compare-table .compare-difference {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.compare-page .compare-table .compare-aoi-row:not(.compare-reading-step-row) > td:first-child > strong {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-page .compare-table .compare-aoi-meta {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    color: #667085;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-page .compare-table .compare-row-aoi-edit-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Focus AOI : double contour blanc/noir, sans les autres zones concurrentes. */
.compare-page .compare-aoi-layer.compare-focused-aoi-overlay .compare-focused-aoi-halo {
    fill: transparent !important;
    stroke: #ffffff !important;
    stroke-width: 9px !important;
    filter: none !important;
    vector-effect: non-scaling-stroke;
}

.compare-page .compare-aoi-layer.compare-focused-aoi-overlay .compare-focused-aoi-stroke {
    fill: rgba(255, 255, 255, .06) !important;
    stroke: #050505 !important;
    stroke-width: 4px !important;
    filter: none !important;
    vector-effect: non-scaling-stroke;
}

/* Visibilité — meilleur score signalé en jaune avec une coupe. */
.compare-page .compare-table .compare-visibility-score.best {
    width: fit-content;
    justify-self: center;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 7px;
    color: #5c4500 !important;
    background: #ffd701;
    border: 1px solid #d8b800;
    border-radius: 999px;
    box-shadow: 0 2px 7px rgba(170, 128, 0, .18);
}

/* Les scores de Visibilité, Lecture et Taille partagent le même rendu. */
.compare-page .compare-table .compare-metric-value > strong,
.compare-page .compare-table .compare-metric-value > small:first-child,
.compare-page .compare-table .compare-difference,
.compare-page .compare-table .compare-reading-order,
.compare-page .compare-table td.missing {
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.25 !important;
}

.compare-page .compare-table .compare-best-crown {
    color: #6b5000;
    font-size: 14px !important;
    line-height: 1;
}

/* Lecture — numéros noirs et blancs, centrés dans le tableau et la modale. */
.compare-page .compare-table.reading-mode th:first-child,
.compare-page .compare-table.reading-mode td:first-child {
    justify-items: center;
    justify-content: center;
    text-align: center;
}

.compare-page .compare-table .compare-reading-order {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    justify-self: center;
    color: #ffffff;
    background: #071522;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(7, 21, 34, .16);
}

.compare-media-modal-overlay .compare-journey-point circle {
    fill: #071522;
    stroke: #ffffff;
    stroke-width: 2.5px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.compare-media-modal-overlay .compare-journey-point text {
    fill: #ffffff;
    stroke: #071522;
    stroke-width: 1px;
    paint-order: stroke;
}