/*
 * ArcheSystem ARSYSplot  © 2026 by Antoni Canals-Salomó is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/4.0/
 */

/* Variables per Dark Mode */
:root {
    --bg-main: #ffffff;
    --bg-secondary: #f4f4f4;
    --bg-tertiary: #f9f9f9;
    --bg-canvas: #ffffff;
    --text-main: #000000;
    --text-secondary: #555555;
    --border-color: #aaa;
    --border-light: #ddd;
    --border-medium: #ccc;
    --button-radius: 8px;
    --app-btn-font-size: 12px;
    --app-btn-pad-y: 4px;
    --app-btn-pad-x: 8px;
    --app-btn-line-height: 1;
    --app-btn-min-height: 24px;
    --accent: #3498DB;
    --accent-strong: #2980B9;
    --accent-shadow: rgba(52, 152, 219, 0.3);
    --accent-soft: rgba(52, 152, 219, 0.16);
    --accent-soft-border: rgba(52, 152, 219, 0.35);
    --primary: #007bff;
    --primary-strong: #0069d9;
    --secondary: #6c757d;
    --secondary-strong: #5a6268;
    --success: #28a745;
    --success-strong: #218838;
    --info: #17a2b8;
    --info-strong: #117a8b;
    --warning: #ffc107;
    --warning-strong: #e0a800;
    --danger: #dc3545;
    --danger-strong: #c82333;
    --light: #f8f9fa;
    --light-strong: #e2e6ea;
    --dark: #343a40;
    --dark-strong: #23272b;
}

body[data-color-scheme="green"] {
    --accent: #2e7d32;
    --accent-strong: #1b5e20;
    --accent-shadow: rgba(46, 125, 50, 0.3);
    --accent-soft: rgba(46, 125, 50, 0.16);
    --accent-soft-border: rgba(46, 125, 50, 0.35);
}

body[data-color-scheme="yellow"] {
    --accent: #f4b400;
    --accent-strong: #c49000;
    --accent-shadow: rgba(244, 180, 0, 0.3);
    --accent-soft: rgba(244, 180, 0, 0.18);
    --accent-soft-border: rgba(244, 180, 0, 0.38);
}

body[data-color-scheme="red"] {
    --accent: #e53935;
    --accent-strong: #c62828;
    --accent-shadow: rgba(229, 57, 53, 0.3);
    --accent-soft: rgba(229, 57, 53, 0.16);
    --accent-soft-border: rgba(229, 57, 53, 0.35);
}

body[data-color-scheme="orange"] {
    --accent: #fb8c00;
    --accent-strong: #ef6c00;
    --accent-shadow: rgba(251, 140, 0, 0.3);
    --accent-soft: rgba(251, 140, 0, 0.18);
    --accent-soft-border: rgba(251, 140, 0, 0.38);
}

body[data-color-scheme="blue"] {
    --accent: #3498DB;
    --accent-strong: #2980B9;
    --accent-shadow: rgba(52, 152, 219, 0.3);
    --accent-soft: rgba(52, 152, 219, 0.16);
    --accent-soft-border: rgba(52, 152, 219, 0.35);
}

body[data-color-scheme="purple"] {
    --accent: #7e57c2;
    --accent-strong: #5e35b1;
    --accent-shadow: rgba(126, 87, 194, 0.3);
    --accent-soft: rgba(126, 87, 194, 0.16);
    --accent-soft-border: rgba(126, 87, 194, 0.35);
}

body[data-color-scheme="teal"] {
    --accent: #00897b;
    --accent-strong: #00695c;
    --accent-shadow: rgba(0, 137, 123, 0.3);
    --accent-soft: rgba(0, 137, 123, 0.16);
    --accent-soft-border: rgba(0, 137, 123, 0.35);
}

body[data-color-scheme="cyan"] {
    --accent: #00acc1;
    --accent-strong: #00838f;
    --accent-shadow: rgba(0, 172, 193, 0.3);
    --accent-soft: rgba(0, 172, 193, 0.16);
    --accent-soft-border: rgba(0, 172, 193, 0.35);
}

body[data-color-scheme="pink"] {
    --accent: #ec407a;
    --accent-strong: #d81b60;
    --accent-shadow: rgba(236, 64, 122, 0.3);
    --accent-soft: rgba(236, 64, 122, 0.16);
    --accent-soft-border: rgba(236, 64, 122, 0.35);
}

body[data-color-scheme="brown"] {
    --accent: #8d6e63;
    --accent-strong: #6d4c41;
    --accent-shadow: rgba(141, 110, 99, 0.3);
    --accent-soft: rgba(141, 110, 99, 0.16);
    --accent-soft-border: rgba(141, 110, 99, 0.35);
}

body[data-color-scheme="gray"] {
    --accent: #78909c;
    --accent-strong: #546e7a;
    --accent-shadow: rgba(120, 144, 156, 0.3);
    --accent-soft: rgba(120, 144, 156, 0.16);
    --accent-soft-border: rgba(120, 144, 156, 0.35);
}

body[data-color-scheme="lime"] {
    --accent: #9ccc65;
    --accent-strong: #7cb342;
    --accent-shadow: rgba(156, 204, 101, 0.3);
    --accent-soft: rgba(156, 204, 101, 0.18);
    --accent-soft-border: rgba(156, 204, 101, 0.38);
}

body[data-color-scheme="indigo"] {
    --accent: #5c6bc0;
    --accent-strong: #3949ab;
    --accent-shadow: rgba(92, 107, 192, 0.3);
    --accent-soft: rgba(92, 107, 192, 0.16);
    --accent-soft-border: rgba(92, 107, 192, 0.35);
}

body[data-color-scheme="violet"] {
    --accent: #8e24aa;
    --accent-strong: #6a1b9a;
    --accent-shadow: rgba(142, 36, 170, 0.3);
    --accent-soft: rgba(142, 36, 170, 0.16);
    --accent-soft-border: rgba(142, 36, 170, 0.35);
}

body[data-color-scheme="amber"] {
    --accent: #ffb300;
    --accent-strong: #ff8f00;
    --accent-shadow: rgba(255, 179, 0, 0.3);
    --accent-soft: rgba(255, 179, 0, 0.18);
    --accent-soft-border: rgba(255, 179, 0, 0.38);
}

body[data-color-scheme="navy"] {
    --accent: #1e3a8a;
    --accent-strong: #162c68;
    --accent-shadow: rgba(30, 58, 138, 0.3);
    --accent-soft: rgba(30, 58, 138, 0.16);
    --accent-soft-border: rgba(30, 58, 138, 0.35);
}

body[data-color-scheme="mint"] {
    --accent: #2dd4bf;
    --accent-strong: #14b8a6;
    --accent-shadow: rgba(45, 212, 191, 0.3);
    --accent-soft: rgba(45, 212, 191, 0.18);
    --accent-soft-border: rgba(45, 212, 191, 0.38);
}

body[data-color-scheme="olive"] {
    --accent: #7a8f2a;
    --accent-strong: #5f6f1f;
    --accent-shadow: rgba(122, 143, 42, 0.3);
    --accent-soft: rgba(122, 143, 42, 0.18);
    --accent-soft-border: rgba(122, 143, 42, 0.38);
}

body[data-color-scheme="coral"] {
    --accent: #ff6f61;
    --accent-strong: #e85a4f;
    --accent-shadow: rgba(255, 111, 97, 0.3);
    --accent-soft: rgba(255, 111, 97, 0.18);
    --accent-soft-border: rgba(255, 111, 97, 0.38);
}

body[data-color-scheme="magenta"] {
    --accent: #c2185b;
    --accent-strong: #a0124b;
    --accent-shadow: rgba(194, 24, 91, 0.3);
    --accent-soft: rgba(194, 24, 91, 0.16);
    --accent-soft-border: rgba(194, 24, 91, 0.35);
}

body[data-color-scheme="gold"] {
    --accent: #d4af37;
    --accent-strong: #b38f2a;
    --accent-shadow: rgba(212, 175, 55, 0.3);
    --accent-soft: rgba(212, 175, 55, 0.18);
    --accent-soft-border: rgba(212, 175, 55, 0.38);
}

body[data-color-scheme="sky"] {
    --accent: #4fc3f7;
    --accent-strong: #039be5;
    --accent-shadow: rgba(79, 195, 247, 0.3);
    --accent-soft: rgba(79, 195, 247, 0.18);
    --accent-soft-border: rgba(79, 195, 247, 0.38);
}

body[data-color-scheme="slate"] {
    --accent: #607d8b;
    --accent-strong: #455a64;
    --accent-shadow: rgba(96, 125, 139, 0.3);
    --accent-soft: rgba(96, 125, 139, 0.16);
    --accent-soft-border: rgba(96, 125, 139, 0.35);
}

body[data-color-scheme="maroon"] {
    --accent: #8e0038;
    --accent-strong: #6b002a;
    --accent-shadow: rgba(142, 0, 56, 0.3);
    --accent-soft: rgba(142, 0, 56, 0.16);
    --accent-soft-border: rgba(142, 0, 56, 0.35);
}

body[data-color-scheme="peach"] {
    --accent: #ffab91;
    --accent-strong: #ff8a65;
    --accent-shadow: rgba(255, 171, 145, 0.3);
    --accent-soft: rgba(255, 171, 145, 0.18);
    --accent-soft-border: rgba(255, 171, 145, 0.38);
}

body[data-color-scheme="aqua"] {
    --accent: #26c6da;
    --accent-strong: #00acc1;
    --accent-shadow: rgba(38, 198, 218, 0.3);
    --accent-soft: rgba(38, 198, 218, 0.18);
    --accent-soft-border: rgba(38, 198, 218, 0.38);
}

body[data-color-scheme="turquoise"] {
    --accent: #00bfa5;
    --accent-strong: #009688;
    --accent-shadow: rgba(0, 191, 165, 0.3);
    --accent-soft: rgba(0, 191, 165, 0.18);
    --accent-soft-border: rgba(0, 191, 165, 0.38);
}

body[data-color-scheme="graphite"] {
    --accent: #455a64;
    --accent-strong: #37474f;
    --accent-shadow: rgba(69, 90, 100, 0.3);
    --accent-soft: rgba(69, 90, 100, 0.16);
    --accent-soft-border: rgba(69, 90, 100, 0.35);
}

body[data-color-scheme="sand"] {
    --accent: #c2a772;
    --accent-strong: #a8884f;
    --accent-shadow: rgba(194, 167, 114, 0.3);
    --accent-soft: rgba(194, 167, 114, 0.18);
    --accent-soft-border: rgba(194, 167, 114, 0.38);
}

body[data-color-scheme="rosewood"] {
    --accent: #a14d5e;
    --accent-strong: #7d3a48;
    --accent-shadow: rgba(161, 77, 94, 0.3);
    --accent-soft: rgba(161, 77, 94, 0.16);
    --accent-soft-border: rgba(161, 77, 94, 0.35);
}

/* Mida única per a botons de l'aplicació (exclou splash) */
.main-layout button,
.app-header button,
#shortcutsModal button,
#importModal button,
#exportAdvancedModal button,
#modalOverlay button,
#profileSelectionModal button,
#profileBandModal button,
#profileZoomModal button,
#fileInfoModal button {
    font-size: var(--app-btn-font-size);
    padding: var(--app-btn-pad-y) var(--app-btn-pad-x);
    line-height: var(--app-btn-line-height);
    min-height: var(--app-btn-min-height);
    box-sizing: border-box;
}

#modalOverlay .modal-action-btn {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent-soft-border);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 110px;
}

#modalOverlay .modal-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

#modalOverlay .modal-close-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

#exportAdvancedModal button {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent-strong);
}

#exportAdvancedModal button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

#exportAdvancedModal #btnConfirmExport,
#exportAdvancedModal #btnCancelExport {
    background: var(--accent-soft);
    border-color: var(--accent-soft-border);
    color: var(--accent-strong);
}

#exportAdvancedModal #btnConfirmExport:hover {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

#exportAdvancedModal #btnCancelExport:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: #111111;
}

#exportAdvancedModal input[type="checkbox"],
#exportAdvancedModal input[type="radio"] {
    accent-color: var(--accent);
}

#exportAdvancedModal input:focus,
#exportAdvancedModal select:focus,
#exportAdvancedModal textarea:focus {
    outline: 2px solid var(--accent-soft-border);
    border-color: var(--accent);
}

/* Color del traç = text del botó/contenidor. No forçar fill:none: trencaria icones amb glif ple (p. ex. cancel). Les SVG només de traç ja porten fill="none" a la marca. */
#exportAdvancedModal .icon-placeholder svg,
#exportAdvancedModal .export-icon-placeholder svg,
#exportAdvancedModal #btnConfirmExportIcon svg,
#exportAdvancedModal #exportModalIcon svg {
    stroke: currentColor;
}

#modalContent .modal-header {
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#modalContent .modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#modalContent .modal-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

#modalContent .modal-controls-row>div,
#modalContent .modal-controls-row>label,
#modalContent .modal-controls-row>button {
    flex: 0 0 auto;
}

#modalContent .modal-controls-row #modalDensityControls {
    flex: 1 1 320px;
}

#modalDensityControls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    width: 100%;
}

#modalDensityControls .modal-density-label {
    font-weight: 600;
    color: var(--accent-strong);
    margin-right: 6px;
    align-self: center;
    flex: 0 0 auto;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

#modalDensityControls .modal-density-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 170px;
    min-width: 140px;
}

#modalDensityControls .modal-density-group-tight {
    flex: 0 1 auto;
    min-width: auto;
}

#modalDensityControls input,
#modalDensityControls select {
    max-width: 100%;
}

#modalContent .u-ai-center-bdb-1solidborder-light-d-flex-jc-space-between-mb-10-6ca {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

#modalContent .u-ai-center-d-flex-g-15-cbd {
    flex-wrap: wrap;
    gap: 10px 12px;
}

#modalContent #modalSizeControls,
#modalContent #modalVectorControls,
#modalContent #modalSymbolControls,
#modalContent #modalDensityControls,
#modalContent #modalRoseControls {
    flex-wrap: wrap;
    max-width: 100%;
}

#modalContent #modalDensityControls input,
#modalContent #modalDensityControls select,
#modalContent #modalVectorControls input,
#modalContent #modalVectorControls select,
#modalContent #modalSizeControls input,
#modalContent #modalSymbolControls select,
#modalContent #modalRoseControls input,
#modalContent #modalRoseControls select {
    max-width: 100%;
}

/* Modal Perfil X (vistes XY, YZ, XZ): botons esquema + tancar amb hover danger */
#profileBandModal button,
#profileZoomModal button {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent-soft-border);
}

#profileBandModal button:hover,
#profileZoomModal button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

#profileBandModal #closeProfileBandModal:hover,
#profileZoomModal #closeProfileZoomModal:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

#profileBandModal .zoom-modal-btn,
#profileZoomModal .zoom-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--app-btn-min-height);
    padding: var(--app-btn-pad-y) var(--app-btn-pad-x);
    font-size: var(--app-btn-font-size);
    line-height: var(--app-btn-line-height);
    justify-content: center;
    white-space: nowrap;
    min-width: 110px;
}

#profileBandModal .zoom-modal-btn .u-fs-11-8b6,
#profileZoomModal .zoom-modal-btn .u-fs-11-8b6 {
    font-size: inherit;
}

#profileBandModal,
#profileZoomModal {
    align-items: flex-start;
    padding: 20px 12px;
    overflow: auto;
}

#profileBandModal>div,
#profileZoomModal>div {
    max-height: calc(100vh - 40px);
    max-width: 96vw;
    overflow: auto;
}

#modalContent {
    max-height: 95vh;
    /* Important en layouts flex: evita que el contenidor del gràfic desbordi */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 95vh; /* estabilitza el càlcul d'alçades (evita 95% ambigu) */
    min-height: 0;
}

/* Àrea de gràfic del modal: ha d'ocupar l'espai restant sense desbordar */
#modalGraphContainer {
    flex: 1 1 auto;
    min-height: 0; /* clau perquè el fill pugui encongir-se dins d'un flex column */
    overflow: hidden;
    height: auto !important; /* sobreescriu utilitats tipus h-100% si cal */
}

#modalContent .u-bg-bg-main-bd-1solidborder-light-h-100pct-ov-hidden-pos-relative-w-1-d29 {
    /* Aquesta utilitat posa height:100% i causa desbordament en el modal (capçalera+gràfic > 95%). */
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

#modalGraphContainer svg.graph-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* SVGs dels gràfics: ajustar sempre al contenidor (evita desbordament per width/height fixes) */
svg.graph-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#modalGraphContainer foreignObject,
#modalGraphContainer foreignObject > div {
    overflow: hidden !important;
}

#profile-zoom-container {
    flex: 1 1 auto;
    min-height: 240px;
}

#modalOverlay .modal-action-btn {
    white-space: nowrap;
}

.graph-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent-soft-border);
}

.graph-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* Evita scroll chaining: en arribar al final del scroll del modal, el wheel no desplaça la pàgina de sota. */
#exportAdvancedModal {
    overscroll-behavior: contain;
}

/* Modal export: ample raonable sense estrènyer el contingut a una franja */
#exportAdvancedModal > div:first-of-type {
    max-width: min(98vw, 1280px);
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 0;
}

#exportPreviewSection {
    min-width: 0;
    max-width: 100%;
}

/*
 * Vista prèvia: àrea fixa dins el modal; el SVG s'escala com a "contain" (com el dibuix final
 * en paper / pantalla, però sense valor finalista). No forçar width:100% al svg: amb viewBox
 * molt ample (escala cartogràfica) desbordava en alçada i apareixia scroll.
 */
#exportPreview.export-preview-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 240px;
    height: min(52vh, 560px);
    max-height: min(52vh, 560px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

#exportPreview .export-preview-svg-host {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
    margin: 0 auto;
}

/* No heretar svg.graph-svg { width/height:100% } — això deixava Basic com a mosca. */
#exportPreview .export-preview-svg-host svg,
#exportPreview .export-preview-svg-host svg.graph-svg,
#exportPreview .export-preview-svg-host svg.export-preview-svg {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
}

.btn-primary:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    color: #ffffff;
}

.btn-secondary {
    background: var(--secondary);
    color: #ffffff;
    border: 1px solid var(--secondary);
}

.btn-secondary:hover {
    background: var(--secondary-strong);
    border-color: var(--secondary-strong);
    color: #ffffff;
}

.btn-success {
    background: var(--success);
    color: #ffffff;
    border: 1px solid var(--success);
}

.btn-success:hover {
    background: var(--success-strong);
    border-color: var(--success-strong);
    color: #ffffff;
}

.btn-info {
    background: var(--info);
    color: #ffffff;
    border: 1px solid var(--info);
}

.btn-info:hover {
    background: var(--info-strong);
    border-color: var(--info-strong);
    color: #ffffff;
}

.btn-warning {
    background: var(--warning);
    color: #212529;
    border: 1px solid var(--warning);
}

.btn-warning:hover {
    background: var(--warning-strong);
    border-color: var(--warning-strong);
    color: #212529;
}

.btn-danger {
    background: var(--danger);
    color: #ffffff;
    border: 1px solid var(--danger);
}

.btn-danger:hover {
    background: var(--danger-strong);
    border-color: var(--danger-strong);
    color: #ffffff;
}

#editDataSaveBtn:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: #212529;
}

#closeEditDataModal:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

.btn-light {
    background: var(--light);
    color: #212529;
    border: 1px solid var(--light);
}

.btn-light:hover {
    background: var(--light-strong);
    border-color: var(--light-strong);
    color: #212529;
}

.btn-dark {
    background: var(--dark);
    color: #ffffff;
    border: 1px solid var(--dark);
}

.btn-dark:hover {
    background: var(--dark-strong);
    border-color: var(--dark-strong);
    color: #ffffff;
}

body.dark-mode {
    --bg-main: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #252525;
    --bg-canvas: #2a2a2a;
    --text-main: #e0e0e0;
    --text-secondary: #aaaaaa;
    --border-color: #444;
    --border-light: #333;
    --border-medium: #3a3a3a;
    --plot-axis: #d0d0d0;
    --plot-tick: #b8b8b8;
    --plot-label: #e8e8e8;
    --plot-grid: #555555;
    --plot-chrome-muted: #9a9a9a;
}

/*
 * Eixos / graella / etiquetes dels gràfics en mode fosc.
 * Els SVG usen atributs stroke/fill clars; el CSS els sobreescriu (sense esperar redibuix).
 * No afecta SVG d’exportació (.export-preview-svg / .export-cartographic-svg).
 */
body.dark-mode svg.graph-svg line.export-axes,
body.dark-mode svg.graph-svg path.export-axes,
body.dark-mode svg.graph-svg .export-axis-tick-mark {
    stroke: var(--plot-axis) !important;
}
body.dark-mode svg.graph-svg text.export-axes,
body.dark-mode svg.graph-svg text.export-axis-h-ticks,
body.dark-mode svg.graph-svg text.export-axis-v-ticks,
body.dark-mode svg.graph-svg text.export-axis-h-label,
body.dark-mode svg.graph-svg text.export-axis-v-label {
    fill: var(--plot-label) !important;
    stroke: none !important;
}
body.dark-mode svg.graph-svg line.export-grid {
    stroke: var(--plot-grid) !important;
}
body.dark-mode svg.graph-svg .export-scale {
    stroke: var(--plot-axis) !important;
}
body.dark-mode svg.graph-svg text.export-scale {
    fill: var(--plot-label) !important;
    stroke: none !important;
}

/* Rampa / escala de densitat (etiquetes i ticks; fons dels modes isolínia) */
body.dark-mode svg.graph-svg .export-density-colorbar-label,
body.dark-mode #modalOverlay svg .export-density-colorbar-label,
body.dark-mode svg.graph-svg .export-density-colorbar text,
body.dark-mode #modalOverlay svg .export-density-colorbar text {
    fill: var(--plot-label) !important;
    stroke: none !important;
}
body.dark-mode svg.graph-svg .export-density-colorbar-tick,
body.dark-mode #modalOverlay svg .export-density-colorbar-tick,
body.dark-mode svg.graph-svg .export-density-colorbar line,
body.dark-mode #modalOverlay svg .export-density-colorbar line {
    stroke: var(--plot-tick) !important;
}
body.dark-mode svg.graph-svg .export-density-colorbar-bg,
body.dark-mode #modalOverlay svg .export-density-colorbar-bg {
    fill: rgba(30, 30, 30, 0.92) !important;
    stroke: var(--border-color) !important;
}

/* Rosa (azimut / inclinació): chrome sense classes export-* */
body.dark-mode svg.graph-svg [data-plot-chrome="axis"],
body.dark-mode svg.graph-svg [data-plot-chrome="tick"],
body.dark-mode svg.graph-svg [data-plot-chrome="guide"],
body.dark-mode svg.graph-svg [data-plot-chrome="ring"],
body.dark-mode svg.graph-svg [data-plot-chrome="divider"] {
    stroke: var(--plot-chrome-muted) !important;
}
body.dark-mode svg.graph-svg [data-plot-chrome="ring-major"] {
    stroke: var(--plot-axis) !important;
}
body.dark-mode svg.graph-svg [data-plot-chrome="label"],
body.dark-mode svg.graph-svg [data-plot-chrome="title"] {
    fill: var(--plot-label) !important;
    stroke: none !important;
}

/* Selecció de perfils (D3) */
body.dark-mode #profileSelectionSvg .ps-axis-x path,
body.dark-mode #profileSelectionSvg .ps-axis-x line,
body.dark-mode #profileSelectionSvg .ps-axis-y path,
body.dark-mode #profileSelectionSvg .ps-axis-y line,
body.dark-mode #profileSelectionSvg .ps-axis-x-top path,
body.dark-mode #profileSelectionSvg .ps-axis-x-top line,
body.dark-mode #profileSelectionSvg .ps-axis-y-right path,
body.dark-mode #profileSelectionSvg .ps-axis-y-right line,
body.dark-mode #profileSelectionZSvg .tick line,
body.dark-mode #profileSelectionZSvg .domain {
    stroke: var(--plot-axis) !important;
}
body.dark-mode #profileSelectionSvg .ps-axis-x text,
body.dark-mode #profileSelectionSvg .ps-axis-y text,
body.dark-mode #profileSelectionSvg .ps-label-x,
body.dark-mode #profileSelectionSvg .ps-label-y,
body.dark-mode #profileSelectionZSvg .tick text,
body.dark-mode #profileSelectionZSvg text.ps-axis-label {
    fill: var(--plot-label) !important;
}

/* Perfils / bandes que reutilitzen export-axes fora de .graph-svg */
body.dark-mode #profileBandModal line.export-axes,
body.dark-mode #profileBandModal path.export-axes,
body.dark-mode #profile-zoom-container line.export-axes,
body.dark-mode #profile-zoom-container path.export-axes,
body.dark-mode #profileSelectionModal line.export-axes,
body.dark-mode #profileSelectionModal path.export-axes {
    stroke: var(--plot-axis) !important;
}
body.dark-mode #profileBandModal text.export-axes,
body.dark-mode #profile-zoom-container text.export-axes,
body.dark-mode #profileSelectionModal text.export-axes {
    fill: var(--plot-label) !important;
    stroke: none !important;
}
body.dark-mode #profileBandModal line.export-grid,
body.dark-mode #profile-zoom-container line.export-grid,
body.dark-mode #profileSelectionModal line.export-grid {
    stroke: var(--plot-grid) !important;
}

body {
    font-family: var(--app-ui-font, sans-serif);
    margin: 0;
    padding: 0;
    background: var(--bg-main);
    color: var(--text-main);
    transition: background 0.3s, color 0.3s;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.mat-btn,
.splash-button,
.sidebar-show-button {
    border-radius: var(--button-radius) !important;
}

/* ============================================
           FASE 1: NOVA ESTRUCTURA DE LAYOUT
           ============================================ */

/* Header reorganitzat */
.app-header {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
    /* Z-index baix per assegurar que els tooltips estiguin per sobre */
}

.header-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-title {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-main);
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

body.dark-mode .app-title {
    color: var(--text-main);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.header-section.separator {
    border-left: 1px solid var(--border-light);
    padding-left: 20px;
}

.header-language {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-language-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.header-language-select {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 12px;
}

.header-language-select:focus {
    outline: 2px solid var(--accent-soft-border);
    border-color: var(--accent);
}

.header-section button {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-main);
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.header-section button:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

.header-section button.primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent-strong);
}

.header-section button.primary:hover {
    background: var(--accent-strong);
}

.header-file-info {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9em;
    font-weight: 500;
}

/* FASE 2.6: Indicador de càrrega subtil */
.loading-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
    font-size: 0.85em;
    color: var(--text-secondary);
}

.loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-light);
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading-text {
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* Sidebar lateral col·lapsable */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.sidebar {
    width: 280px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}

.sidebar.collapsed {
    transform: translateX(-100%);
    position: absolute;
    height: 100%;
    z-index: 999;
}

/* Botó per mostrar sidebar quan està oculta */
.sidebar-show-button {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 6px 0 0 6px;
    padding: 15px 8px;
    cursor: pointer;
    z-index: 998;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    display: none;
    transition: all 0.3s;
}

.sidebar-show-button:hover {
    background: var(--bg-tertiary);
    left: 0;
}

.sidebar.collapsed~.sidebar-show-button,
.sidebar.collapsed+.sidebar-show-button {
    display: block;
}

.sidebar-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-tertiary);
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: var(--text-main);
}

.sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: var(--text-main);
    font-size: 18px;
    display: flex;
    align-items: center;
}

.sidebar-panel {
    padding: 15px;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-panel-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.sidebar-panel-title:hover {
    color: var(--text-main);
}

.sidebar-panel-content {
    /* Desplegament complet: sense ascensor propi; el scroll és de la .sidebar */
    max-height: none;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.resource-summary {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light, #ddd);
    font-size: 0.9em;
    color: var(--text-secondary, #666);
}

.resource-summary-title {
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--text-main, #222);
    font-size: 1em;
}

.resource-memory-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.resource-memory-label {
    font-weight: 700;
}

.resource-memory-text {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.resource-memory-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-light, #ddd);
    overflow: hidden;
    margin-bottom: 8px;
}

.resource-memory-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--accent, #4a90d9);
    transition: width 0.35s ease, background-color 0.35s ease;
}

.resource-memory-fill.is-warn {
    background: var(--warning, #e6a700);
}

.resource-memory-fill.is-crit {
    background: var(--danger, #c62828);
}

.resource-memory-hint {
    margin: 0 0 8px;
    font-size: 0.85em;
    line-height: 1.3;
    opacity: 0.85;
}

/* FASE 2: Estils per als botons de filtre de materials */
.material-filter-btn {
    transition: all 0.2s;
}

.material-filter-btn:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

body.dark-mode .material-filter-btn:hover {
    background-color: var(--accent) !important;
}

#materialSearchInput:focus {
    outline: 2px solid var(--border-medium);
    outline-offset: 2px;
    border-color: var(--border-medium);
}

#actionsPanelContent {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.actions-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-main);
}

.action-toggle input {
    margin: 0;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

.action-toggle .excluded-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary);
}

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

.sidebar .sidebar-panel-content button {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent-strong);
}

.sidebar .sidebar-panel-content button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.sidebar .sidebar-panel-content #globalReset:hover {
    background: #ff4444;
    border-color: #ff4444;
    color: #ffffff;
}

.actions-scheme {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.actions-scheme label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.actions-scheme select {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 12px;
}

.representar-dimensions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.representar-dimensions-header > label {
    margin-bottom: 0 !important;
}

.representar-dimensions-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.representar-dimensions-btn {
    padding: 2px 8px !important;
    font-size: 11px !important;
    line-height: 1.3;
    border-radius: 4px;
    cursor: pointer;
    min-width: 0;
}

.sidebar-panel.collapsed > .sidebar-panel-content {
    display: none !important;
}

.sidebar-panel-icon {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.sidebar-panel.collapsed .sidebar-panel-icon {
    transform: rotate(-90deg);
}

/* Àrea principal de gràfics */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 0;
}

/* Sistema de tabs per controls de gràfics */
.graph-tabs {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 6px;
    background: var(--bg-secondary);
    padding: 4px 12px 0 12px;
}

.graph-name {
    font-weight: 600;
    font-size: 13px;
    color: #ffffff;
    margin-right: 15px;
    white-space: nowrap;
    padding: 6px 14px;
    background: var(--accent);
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px var(--accent-shadow);
}

.graph-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    transition: all 0.2s;
    position: relative;
    top: 2px;
}

.graph-tab:hover {
    color: var(--text-main);
    background: var(--bg-tertiary);
}

.graph-tab.active {
    color: var(--text-main);
    border-bottom-color: var(--accent);
    font-weight: bold;
}

.graph-container .controls .graph-action-btn,
.graph-container .controls .maximize-btn.graph-action-btn {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent-strong);
}

.graph-container .controls .graph-action-btn:hover,
.graph-container .controls .maximize-btn.graph-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.profile-select-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.graph-tab-content {
    display: none;
    padding: 10px 0;
}

.graph-tab-content.active {
    display: block;
}

/* Densitat: controls més compactes perquè l’àrea de dibuix no quedi encongida */
.graph-tab-content[id$="-density"] {
    padding: 4px 0;
}

/* Controls comuns a Bàsic i Densitat (sempre visibles) */
.graph-shared-view-controls {
    padding: 6px 0 2px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border-light);
}

/* Modal Selecció de perfils: barra d’eines + ajuda contextual */
.profile-selection-toolbar {
    gap: 8px;
}

.profile-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.profile-toolbar-row-mode {
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

.profile-toolbar-row-opts {
    padding-bottom: 2px;
}

/* Controls perfils d'angle: angle + rosa + pista */
.profile-sweep-controls {
    flex-wrap: wrap;
    align-items: center;
}

.profile-sweep-angle-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.profile-sweep-angle-rose {
    flex: 0 0 auto;
    display: block;
}

.profile-reference-legend {
    position: absolute;
    top: 22px;
    left: 5px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 10px;
    color: var(--text-secondary);
    pointer-events: none;
}

.profile-reference-legend-active::before,
.profile-reference-legend-other::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    vertical-align: -1px;
    border-radius: 2px;
    box-sizing: border-box;
}

.profile-reference-legend-active::before {
    background: var(--profile-legend-active-fill, rgba(255, 193, 7, 0.45));
    border: 1px solid var(--profile-legend-active-stroke, #ffc107);
}

.profile-reference-legend-other::before {
    background: var(--profile-legend-other-fill, rgba(180, 180, 180, 0.25));
    border: 1px solid var(--profile-legend-other-stroke, #b0b0b0);
}

.profile-reference-legend[data-legend-mode="polygon"] .profile-reference-legend-other {
    display: none;
}

.profile-help-panel {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-secondary);
}

.profile-help-panel-side {
    flex: 0 0 auto;
    max-height: 42%;
    min-height: 0;
    overflow: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid var(--border-color, var(--border-light));
    background: var(--bg-secondary);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border-color, #999) 35%, transparent);
}

.profile-help-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.profile-help-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.profile-help-mode {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-strong);
}

.profile-help-body[hidden] {
    display: none !important;
}

.profile-help-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

.profile-help-list li {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr;
    align-items: start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.profile-help-list .profile-polygon-key {
    justify-self: start;
    text-align: center;
    min-width: 0;
}

/* Legacy slot (per si queda referència); ja no s’usa al markup nou */
.profile-mode-aux-slot {
    margin: 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--border-light);
}

.profile-mode-aux-slot[hidden] {
    display: none !important;
}

.profile-polygon-vertex-hint {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.profile-polygon-vertex-hint strong {
    color: var(--text-main);
    font-weight: 700;
}

.profile-polygon-key {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 1px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.profile-polygon-vertex-hint[hidden] {
    display: none !important;
}

.profile-print-all-wrap[hidden] {
    display: none !important;
}

.profile-print-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--button-radius);
    cursor: pointer;
}

.profile-print-all-btn:hover {
    background: var(--accent-shadow);
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}

.profile-print-all-dialog {
    box-sizing: border-box;
    max-width: min(720px, 94vw);
    width: 100%;
    max-height: min(85vh, 900px);
}

.profile-print-all-modal-body {
    min-height: 120px;
    flex: 1;
    overflow: auto;
}

/* Modal Exportar gràfic: dues columnes (opcions + vista prèvia) i pestanyes a l'esquerra */
.export-advanced-dialog {
    box-sizing: border-box;
    max-width: min(1280px, 98vw);
    width: 100%;
    padding: 0 20px 20px;
    /* L’apilament ha de dependre de l’ample del diàleg, no del viewport (sino <960px trenca massa sovint en producció). */
    container-type: inline-size;
    container-name: export-advanced-dialog;
}

/* Capçalera: títol a l’esquerra, Cancel·lar / Desar a la dreta (mateixa línia) */
.export-advanced-dialog-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 14px;
    margin: 0;
    border-bottom: 2px solid var(--border-light, rgba(0, 0, 0, 0.12));
}

.export-advanced-dialog-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.export-advanced-dialog-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

@container export-advanced-dialog (max-width: 520px) {
    .export-advanced-dialog-header {
        flex-wrap: wrap;
    }

    .export-advanced-dialog-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.export-advanced-body {
    display: grid;
    /* Esquerra (opcions) una mica més estreta, dreta (vista prèvia) més ampla (~43% / ~57%) */
    grid-template-columns: minmax(0, 0.82fr) minmax(300px, 1.18fr);
    gap: 14px 18px;
    align-items: start;
}

.export-advanced-main {
    min-width: 0;
    max-height: min(78vh, 880px);
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
}

.export-advanced-preview-col {
    min-width: 0;
    position: sticky;
    top: 0;
    align-self: start;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid var(--border-light);
}

.export-preview-section-aside {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.export-advanced-preview-col #exportPreview.export-preview-panel {
    height: min(66vh, 680px);
    max-height: min(66vh, 680px);
}

/* Una columna només quan el quadre del modal és estret (mòbil / finestra molt petita) */
@container export-advanced-dialog (max-width: 720px) {
    .export-advanced-body {
        grid-template-columns: 1fr;
    }

    .export-advanced-main {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }

    .export-advanced-preview-col {
        position: relative;
        padding-left: 0;
        margin-left: 0;
        border-left: none;
        border-top: 1px solid var(--border-light);
        padding-top: 16px;
        margin-top: 8px;
    }

    .export-advanced-preview-col #exportPreview.export-preview-panel {
        height: min(52vh, 560px);
        max-height: min(52vh, 560px);
    }
}

/* Sense suport a @container: fallback per viewport molt estret (no usar 960px: trencava portàtils normals) */
@supports not (container-type: inline-size) {
    @media (max-width: 720px) {
        .export-advanced-body {
            grid-template-columns: 1fr;
        }

        .export-advanced-main {
            max-height: none;
            overflow-y: visible;
            padding-right: 0;
        }

        .export-advanced-preview-col {
            position: relative;
            padding-left: 0;
            margin-left: 0;
            border-left: none;
            border-top: 1px solid var(--border-light);
            padding-top: 16px;
            margin-top: 8px;
        }

        .export-advanced-preview-col #exportPreview.export-preview-panel {
            height: min(52vh, 560px);
            max-height: min(52vh, 560px);
        }
    }
}

.export-advanced-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 4px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border-light);
}

.export-advanced-tab {
    padding: 9px 14px;
    margin: 0;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.export-advanced-tab:hover {
    color: var(--text-main);
    background: var(--bg-tertiary);
}

.export-advanced-tab.active {
    color: var(--text-main);
    font-weight: 600;
    border-color: var(--border-light);
    box-shadow: 0 1px 0 0 var(--bg-main);
    background: var(--bg-main);
}

.export-advanced-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.export-advanced-panels {
    position: relative;
    min-height: 240px;
}

.export-advanced-panel {
    display: none;
}

.export-advanced-panel.active {
    display: block;
    animation: export-advanced-panel-in 0.18s ease;
}

@keyframes export-advanced-panel-in {
    from {
        opacity: 0.65;
    }

    to {
        opacity: 1;
    }
}

.export-advanced-field {
    box-sizing: border-box;
    width: 100%;
    max-width: min(100%, 42rem);
}

.export-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}

.export-format-option {
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.export-format-option:hover {
    border-color: var(--accent-soft-border);
}

.export-format-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

@media (max-width: 520px) {
    .export-advanced-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .export-advanced-tab {
        text-align: left;
    }
}

.control-group {
    margin-bottom: 12px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.control-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

input[type="text"],
input[type="number"],
input[type="file"],
input[type="range"],
select,
textarea {
    border-color: var(--border-light) !important;
    outline-color: var(--accent-soft-border) !important;
    caret-color: var(--accent);
}

input[type="range"] {
    accent-color: var(--accent);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="file"]:focus,
input[type="range"]:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent-soft-border) !important;
    border-color: var(--accent) !important;
}

.validation-valid {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent-soft-border);
}

.validation-invalid {
    border-color: #f44336 !important;
    box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.3);
}

.control-group-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Splash screen / Pàgina d'inici */
#splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fallback abans que JS apliqui el tema clar (abans era gradient violat fix) */
    background: linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%);
    color: var(--splash-text, #1a1a1a);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease-out;
    padding: 24px 40px 40px;
    box-sizing: border-box;
    overflow: auto;
}

/* Splash clar: sense ombres de text pensades per fons fosc; ombra suau a la imatge i botó */
#splashScreen.splash-theme-light .splash-tech-info h2,
#splashScreen.splash-theme-light .splash-tech-info p,
#splashScreen.splash-theme-light .splash-tech-info ul,
#splashScreen.splash-theme-light .splash-tech-info li,
#splashScreen.splash-theme-light .splash-title,
#splashScreen.splash-theme-light .splash-description,
#splashScreen.splash-theme-light .splash-description p {
    text-shadow: none;
}

#splashScreen.splash-theme-light img:not(.cc-icon),
#splashScreen.splash-theme-light .splash-image {
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1));
}

#splashScreen.splash-theme-light .splash-button {
    box-shadow: 0 2px 10px var(--accent-shadow, rgba(0, 0, 0, 0.12));
}

#splashScreen.splash-theme-light .splash-button:hover {
    box-shadow: 0 4px 14px var(--accent-shadow, rgba(0, 0, 0, 0.18));
}

#splashScreen.splash-theme-light .splash-language-selector .header-language-select {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid var(--border-light, #ddd);
}

.splash-layout {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(240px, 320px) minmax(320px, 1.2fr);
    grid-template-areas: "tech image content";
    align-items: start;
    justify-content: center;
    gap: 32px;
    margin-top: 0;
    justify-items: center;
}

#splashScreen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.splash-version-footer {
    position: fixed;
    left: 24px;
    bottom: 20px;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--splash-muted, #5a5a5a);
    letter-spacing: 0.02em;
    user-select: none;
    z-index: 10001;
}

.splash-legal-footer {
    position: fixed;
    right: 24px;
    bottom: 20px;
    left: auto;
    max-width: min(640px, calc(100vw - 180px));
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.peu-disclaimer {
    margin: 0;
    padding: 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--splash-muted, #5a5a5a);
    text-align: right;
    opacity: 0.92;
}

.peu-license {
    position: static;
    margin: 0;
    padding: 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--splash-muted, #5a5a5a);
    text-align: right;
    white-space: nowrap;
}

.peu-license a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.peu-license a:hover {
    color: var(--text-main, #222);
}

/* Must override #splashScreen img (max 360px / width 100%) */
#splashScreen .peu-license .cc-icon,
.peu-license .cc-icon {
    display: inline-block;
    width: 0.95em !important;
    height: 0.95em !important;
    max-width: 0.95em !important;
    max-height: 0.95em !important;
    margin: 0 0 0 0.2em;
    padding: 0;
    vertical-align: -0.12em;
    object-fit: contain;
    filter: none;
}

@media (max-width: 720px) {
    .splash-legal-footer {
        max-width: calc(100vw - 48px);
        right: 16px;
        bottom: 48px;
    }
    .splash-version-footer {
        left: 16px;
        bottom: 16px;
    }
}

.splash-image-column {
    grid-area: image;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 100%;
}

#splashScreen img:not(.cc-icon),
.splash-image {
    max-width: 360px;
    max-height: 460px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.splash-tech-info {
    text-align: left;
    max-width: 300px;
    padding-right: 20px;
    grid-area: tech;
    justify-self: start;
    font-size: 0.9em;
}

.splash-tech-info h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: var(--splash-heading, #FFD700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.splash-tech-info h2 .icon-placeholder {
    display: inline-flex;
    align-items: center;
}

.splash-tech-info p {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.splash-tech-info ul {
    font-size: 0.9em;
    line-height: 1.8;
    margin: 10px 0;
    padding-left: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.splash-tech-info li {
    margin-bottom: 8px;
}

.splash-content {
    text-align: left;
    max-width: 720px;
    grid-area: content;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-self: start;
}

.splash-title {
    font-size: clamp(1.9em, 2.5vw, 2.6em);
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.splash-description {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 40px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    flex: 1 1 auto;
}

.splash-description p {
    margin: 15px 0;
}

.splash-language-selector {
    position: absolute;
    top: 16px;
    right: 20px;
    left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--splash-text, #ffffff);
    font-size: 12px;
    z-index: 10001;
    pointer-events: auto;
}

html[dir="rtl"] .splash-language-selector {
    left: 20px;
    right: auto;
}

.splash-language-selector .header-language-select {
    background: rgba(255, 255, 255, 0.9);
    color: #222222;
    border: 1px solid rgba(255, 255, 255, 0.7);
    pointer-events: auto;
    cursor: pointer;
}

.splash-button {
    background: var(--splash-button-bg, #ffffff);
    color: var(--splash-button-text, #667eea);
    border: 1px solid var(--splash-button-border, transparent);
    padding: 15px 40px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.splash-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background: var(--splash-button-hover, #f0f0f0);
}

.splash-button:active {
    transform: translateY(0);
}

.splash-timer {
    margin-top: 20px;
    font-size: 0.9em;
    opacity: 0.85;
    color: var(--splash-muted, inherit);
}

.splash-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.shortcuts-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 12000;
}

.shortcuts-modal {
    width: min(520px, 92vw);
    background: var(--bg-main);
    color: var(--text-main);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 16px 18px;
}

.shortcuts-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.shortcuts-modal-header h2 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shortcuts-close {
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 18px;
    cursor: pointer;
}

.shortcuts-section {
    margin-bottom: 12px;
}

.shortcuts-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.shortcuts-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--border-light);
}

.shortcuts-item:last-child {
    border-bottom: none;
}

.shortcuts-key {
    font-weight: 600;
    color: var(--text-main);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    #splashScreen {
        padding: 30px;
    }

    #splashScreen img:not(.cc-icon) {
        max-width: 300px;
        max-height: 360px;
    }

    .splash-tech-info {
        max-width: 260px;
        padding-right: 0;
    }

    .splash-content {
        max-width: 640px;
    }
}

@media (max-width: 1200px) {
    .splash-layout {
        grid-template-columns: minmax(220px, 1fr) minmax(220px, 300px) minmax(300px, 1.2fr);
        gap: 24px;
    }
}

@media (max-width: 900px) {
    #splashScreen {
        padding: 24px;
    }

    .splash-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "image"
            "tech";
        gap: 20px;
    }

    .splash-content,
    .splash-tech-info {
        max-width: 100%;
    }

    #splashScreen img:not(.cc-icon) {
        max-height: 240px;
    }

    .splash-title {
        font-size: 2.1em;
    }

    .splash-description {
        font-size: 1.05em;
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) {
    #splashScreen {
        padding: 18px;
    }

    #splashScreen img:not(.cc-icon) {
        max-width: 80%;
        max-height: 200px;
    }

    .splash-tech-info {
        max-width: 100%;
    }

    .splash-title {
        font-size: 1.9em;
    }

    .splash-description {
        font-size: 1em;
    }

    .splash-button {
        padding: 12px 28px;
        font-size: 1em;
    }
}

/* Graella flexible */
.graph-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-content: stretch; /* ajuda a repartir alçada quan hi ha espai */
}

.graph-container {
    flex: 0 0 calc(50% - 10px);
    min-width: 300px;
    max-width: calc(50% - 10px);
    box-sizing: border-box;
    position: relative;
    border: 1px solid var(--border-color);
    /* Responsive: aprofita més alçada en pantalles grans */
    height: clamp(420px, 48vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    transition: all 0.3s;
    overflow: hidden; /* evita que l'SVG surti fora de la targeta */
}

@media (max-width: 900px) {
    .graph-container {
        height: clamp(360px, 55vh, 680px);
    }
}

.graph-plot-area {
    flex: 1 1 auto;
    min-height: 0; /* necessari en flex-column perquè el fill pugui encongir-se */
    position: relative;
    overflow: hidden;
    background: var(--bg-canvas);
}

/* FASE 2.5: Estil per indicar gràfic actiu (seleccionat per exportar) */
.graph-container.graph-active {
    border: 2px solid var(--border-medium);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Ajuda visual: punt de vista Transversal/Longitudinal sobre Planta — només pantalla */
#p1-container .planta-view-direction-hint {
    position: absolute;
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-main, #222);
    pointer-events: none;
}
#p1-container .planta-view-direction-hint.is-visible {
    display: flex;
}
/* Transversal (YZ): a la dreta, mira cap a dins (esquerra) */
#p1-container .planta-view-direction-hint.is-yz {
    right: 42px;
    top: 50%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
}
/* Longitudinal (XZ): mateix costat dret, desplaçat a baix; mira cap amunt */
#p1-container .planta-view-direction-hint.is-xz {
    right: 42px;
    bottom: 36px;
    left: auto;
    top: auto;
    transform: rotate(90deg);
    transform-origin: center center;
}
#p1-container .planta-view-direction-hint svg {
    width: 60px;
    height: 26px;
    flex-shrink: 0;
    overflow: visible;
    background: none;
}

#rose-container {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}

.controls {
    margin-bottom: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    transition: background 0.3s;
    /* Si el contenidor del gràfic queda amb pointer-events:none, els controls han de continuar clicables */
    pointer-events: auto;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

/* Botons Recalcular / Restaurar (Inclinació): sempre visibles, fora del tab-content */
#inclination-controls .g-angles-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 0 6px;
    margin-bottom: 2px;
    border-bottom: 1px dashed var(--border-light);
}

#inclination-controls .g-angles-btn {
    font-weight: 600;
}

/* Modal Recalcular G_* (paràmetres mètode millorat) */
.recompute-g-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5400;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 16px;
}
.recompute-g-modal {
    width: min(440px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: var(--bg-main, #fff);
    color: var(--text-main, #222);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}
.recompute-g-modal-header,
.recompute-g-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light, #ddd);
}
.recompute-g-modal-footer {
    border-bottom: none;
    border-top: 1px solid var(--border-light, #ddd);
    justify-content: flex-end;
    flex-wrap: wrap;
}
.recompute-g-modal-header span {
    font-weight: 700;
}
.recompute-g-modal-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.recompute-g-help-btn {
    padding: 4px 6px !important;
    flex: 0 0 auto;
}
.recompute-g-help-overlay {
    z-index: 5500;
}
.recompute-g-help-modal {
    width: min(560px, 100%);
}
.recompute-g-help-body {
    max-height: min(70vh, 520px);
    overflow: auto;
}
.recompute-g-help-body h4 {
    margin: 12px 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main, #222);
}
.recompute-g-help-body h4:first-of-type {
    margin-top: 4px;
}
.recompute-g-help-body p,
.recompute-g-help-body li {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-main, #222);
}
.recompute-g-help-body ul {
    margin: 0 0 8px;
    padding-left: 1.25rem;
}
.recompute-g-modal-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recompute-g-modal-intro,
.recompute-g-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary, #666);
}
.recompute-g-hint {
    font-size: 12px;
}
.recompute-g-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}
.recompute-g-check input {
    margin-top: 2px;
}
.recompute-g-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}
.recompute-g-field input {
    font: inherit;
    font-weight: 400;
    padding: 8px;
    border: 1px solid var(--border-light, #ccc);
    border-radius: 4px;
    background: var(--bg-secondary, #f7f7f7);
    color: inherit;
    max-width: 100%;
}
.recompute-g-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.recompute-g-reset {
    align-self: flex-start;
}
#recomputeGCancelBtn:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: #212529;
}
#recomputeGApplyBtn:hover {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
@media (max-width: 480px) {
    .recompute-g-field-row {
        grid-template-columns: 1fr;
    }
}

/* Atenuar només l’àrea de dibuix (no els controls ni les pestanyes) */
.graph-container.graph-panel-dimmed .graph-plot-area {
    opacity: 0.4;
    filter: grayscale(70%);
    pointer-events: none;
}

.graph-container.graph-panel-dimmed .controls,
.graph-container.graph-panel-dimmed .graph-tabs {
    pointer-events: auto;
    opacity: 1;
    filter: none;
}

.mat-btn {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s;
}

.mat-btn.inactive {
    background: #aaa;
    color: #555;
}

.tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 12px;
    display: none;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.4;
    max-width: 250px;
}

label {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
}

input[type=range] {
    vertical-align: middle;
}

input[type=number] {
    padding: 2px;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    background: var(--bg-main);
    color: var(--text-main);
}

input[type=color] {
    vertical-align: middle;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
}

select {
    vertical-align: middle;
    background: var(--bg-main);
    color: var(--text-main);
    border: 1px solid var(--border-medium);
}

/* Estil per al botó de maximitzar */
.maximize-btn {
    margin-left: 10px;
    padding: 0px 6px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.5;
}

/* Estil per al botó RESET global */
#actionsPanelContent button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.actions-buttons button {
    padding: 5px 6px;
    font-size: 11px;
}

#globalReset {
    background-color: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent-soft-border);
}

#globalReset:hover {
    background-color: #dc3545;
    color: #ffffff;
}

body.dark-mode #globalReset:hover {
    background-color: #c82333;
    color: #ffffff;
}

#globalReset:hover .icon-placeholder svg path {
    stroke: #ffffff !important;
}

/* Dark mode toggle */
#darkModeToggle {
    background-color: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent-soft-border);
}

#darkModeToggle:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

body.dark-mode #darkModeToggle:hover {
    background-color: var(--accent) !important;
}

#darkModeToggle:focus,
#darkModeToggle:focus-visible {
    outline: 2px solid var(--accent-soft-border);
    outline-offset: 2px;
}

#fileInfoBtn {
    background-color: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent-soft-border);
    display: none;
}

#fileInfoBtn:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

body.dark-mode #fileInfoBtn:hover {
    background-color: var(--accent);
}

#fileInfoBtn:focus,
#fileInfoBtn:focus-visible {
    outline: 2px solid var(--accent-soft-border);
    outline-offset: 2px;
}

#fileInfoBtn.visible {
    display: flex !important;
}

/* Botó Editar colors */
#toggleMaterialColors {
    background-color: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent-soft-border);
}

#toggleMaterialColors:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* Secció de densitat */
.density-section {
    background: var(--bg-tertiary);
    padding: 2px 4px;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    margin-right: 0;
    max-width: 100%;
    border: 1px solid var(--border-light);
    transition: all 0.3s;
    color: var(--text-main);
}

.graph-tab-content[id$="-density"] .graph-density-btn {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent-strong);
}

.graph-tab-content[id$="-density"] .graph-density-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}


/* Modal Editor de colors i Símbol */
.material-color-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 12000;
}

.material-color-modal-overlay.is-open {
    display: flex;
}

.material-color-modal {
    width: min(720px, 94vw);
    max-height: 85vh;
    background: var(--bg-main);
    color: var(--text-main);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.material-color-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--border-light);
    padding: 12px 16px;
    flex-shrink: 0;
}

.material-color-modal-header h2 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.material-color-modal-close {
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 18px;
    cursor: pointer;
}

.material-color-modal-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.material-color-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
    align-content: start;
}

.material-color-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.material-color-name {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-main);
}

.material-color-input {
    width: 34px;
    height: 22px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
}

.material-color-symbol-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.material-color-symbol {
    width: 100%;
    min-width: 0;
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-main);
    color: var(--text-main);
    cursor: pointer;
}

/* Estils per als botons d'exportació */
#calculateScaleBtn,
#refreshPreviewBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#customScaleOptions[style*="display: flex"] #calculateScaleBtn,
#customScaleOptions[style*="display:block"] #calculateScaleBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#exportPreviewSection[style*="display: block"] #refreshPreviewBtn,
#exportPreviewSection:not([style*="display: none"]) #refreshPreviewBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
           FASE 3.2.1: TOOLTIPS INTEL·LIGENTS (CONTROLS UI)
           Utilitzem .ui-tooltip per evitar conflictes amb .tooltip dels punts del gràfic
           ============================================ */

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

/* Assegurar que els elements dins del wrapper mantinguin el seu comportament */
.tooltip-wrapper>button {
    width: auto;
}

.tooltip-wrapper>label {
    width: auto;
}

.ui-tooltip {
    position: fixed;
    /* Fixed per assegurar que no quedi tapat pel header */
    z-index: 100000;
    /* Per sobre del header i tots els altres elements */
    background: var(--bg-main);
    color: var(--text-main);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    min-width: 200px;
    max-width: 350px;
    width: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    white-space: normal;
    word-wrap: break-word;
}

.ui-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* Tooltips utilitzen posició fixa calculada dinàmicament en JavaScript */
/* Les classes de posició només s'utilitzen per referència, no per CSS */
/* Amagar les fletxes per tooltips amb posició fixa */
.ui-tooltip::before {
    display: none;
}

/* Desactivar tooltips UI */
body.tooltips-disabled .ui-tooltip {
    display: none !important;
}

/* ============================================
           FASE 3.3.1: VALIDACIÓ MILLORADA
           ============================================ */

.input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-right: 28px;
    /* espai per a la icona fora del camp */
}

.input-wrapper.inline-icon {
    width: auto;
    padding-right: 28px;
    /* espai per a la icona dins del camp */
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
}

.validation-icon {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.input-wrapper.inline-icon .validation-icon {
    left: auto;
    right: 8px;
}

.material-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid var(--border-light);
}

.table-row-even {
    background: var(--bg-main);
}

.table-row-odd {
    background: var(--bg-secondary);
}

.point-exclusion-controls {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.point-exclusion-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-main);
}

.point-exclusion-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-main);
}

.point-exclusion-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.point-exclusion-actions button {
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-main);
}

.point-exclusion-actions button:hover {
    background: var(--bg-tertiary);
}

.point-exclusion-actions span {
    font-size: 12px;
    color: var(--text-secondary);
}

.validation-icon.show {
    opacity: 1;
}

.validation-icon.valid {
    background: #4CAF50;
    color: white;
}

.validation-icon.invalid {
    background: #f44336;
    color: white;
}

.validation-icon.pending {
    background: #ff9800;
    color: white;
}

.validation-message {
    margin-top: 4px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    display: none;
    transition: opacity 0.2s ease;
}

.validation-message.show {
    display: block;
}

.validation-message.valid {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border-left: 3px solid #4CAF50;
}

.validation-message.invalid {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
    border-left: 3px solid #f44336;
}

.validation-message.pending {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
    border-left: 3px solid #ff9800;
}

input:invalid,
select:invalid,
textarea:invalid {
    border-color: #f44336;
}

input:valid:not(:placeholder-shown),
select:valid,
textarea:valid:not(:placeholder-shown) {
    border-color: #4CAF50;
}

.material-color-reset {
    border: 1px solid var(--border-light);
    background: var(--bg-main);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 11px;
}

.material-color-empty {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Modal d'importació */
#importModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 4000;
    align-items: center;
    justify-content: center;
}

#importModal.show {
    display: flex;
    overscroll-behavior: contain;
}

body.import-modal-open,
html.import-modal-open {
    overflow: hidden !important;
}

#csvMappingModal {
    z-index: 5000;
}

.import-dialog {
    background: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.import-dialog h2 {
    margin-top: 0;
    color: var(--text-main);
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 10px;
}

.import-step {
    margin: 20px 0;
}

.import-step label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-main);
}

#previewContent {
    max-height: 400px;
    overflow: auto;
}

.file-type-selector {
    display: flex;
    gap: 15px;
    margin: 10px 0;
}

.file-type-btn {
    flex: 1;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    position: relative;
}

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

.file-type-btn.selected {
    background: var(--accent);
    color: white;
    border-color: var(--accent-strong);
}

.file-type-btn h3 {
    margin: 0 0 8px 0;
}

.file-type-btn p {
    margin: 0;
    font-size: 12px;
    opacity: 0.8;
}

.file-type-btn .csv-info-btn {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--accent-soft-border);
    background: var(--bg-main);
    color: var(--accent-strong);
    cursor: pointer;
    padding: 0;
}

.file-type-btn .csv-info-btn:hover {
    background: var(--accent-soft);
}

.file-type-btn.selected .csv-info-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.preview-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
    max-height: 300px;
    overflow: auto;
    overscroll-behavior: contain;
    font-family: monospace;
    font-size: 11px;
    white-space: pre;
    color: var(--text-main);
}

.csv-mapping-cell,
.csv-preview-th {
    min-width: 120px;
}

.csv-mapping-select {
    min-width: 120px;
    cursor: pointer;
}

.import-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.import-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--app-btn-min-height);
    padding: var(--app-btn-pad-y) var(--app-btn-pad-x);
    border: 1px solid var(--accent-soft-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--app-btn-font-size);
    line-height: var(--app-btn-line-height);
    font-weight: 400;
    transition: all 0.2s;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.import-btn.primary {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-color: var(--accent-soft-border);
}

#btnConfirmImport:hover:not(:disabled) {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

.import-btn.secondary {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-color: var(--accent-soft-border);
}

#btnCancelImport:hover:not(:disabled) {
    background: var(--warning);
    border-color: var(--warning);
    color: #212529;
}

.import-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.u-bd-1solidborder-light-br-4-fs-12-p-4-w-50-36a {
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 12px;
    padding: 4px;
    width: 50px
}

.u-ai-center-bg-6c757d-bd-none-br-4-tc-white-cur-pointer-d-inline-flex-23c {
    background: #6c757d;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap
}

.u-bg-bg-main-tc-text-main-fs-12-w-100pct-582 {
    background: var(--bg-main);
    border-collapse: collapse;
    color: var(--text-main);
    font-size: 12px;
    width: 100%
}

.u-fwgt-bold-minw-30-136 {
    font-family: monospace;
    font-weight: bold;
    min-width: 30px;
    text-align: center
}

.u-d-none-fd-column-g-10-ml-20-8ed {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-left: 20px
}

.u-bd-1solidborder-light-p-6-3d1 {
    border: 1px solid var(--border-light);
    padding: 6px
}

.u-ai-center-tc-text-main-d-none-fw-wrap-fs-13-g-10-97f {
    align-items: center;
    color: var(--text-main);
    display: none;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 10px
}

.u-tc-555-fs-12-fwgt-bold-m-0-372 {
    color: #555;
    font-size: 12px;
    font-weight: bold;
    margin: 0
}

.u-ai-center-bg-bg-secondary-br-4-d-none-g-10-p-38-ea1 {
    align-items: center;
    background: var(--bg-secondary);
    border-radius: 4px;
    display: none;
    gap: 10px;
    padding: 3px 8px
}

.u-mt-10-w-100pct-01c {
    border-top: 1px solid var(--border-light);
    box-sizing: border-box;
    margin-top: 10px;
    padding-top: 10px;
    width: 100%
}

.u-d-flex-g-10-871 {
    display: flex;
    gap: 10px
}

.u-ai-center-bg-color-primary-bd-none-br-4-tc-rgb-12-12-12-cur-pointer-f57 {
    background: var(--color-primary);
    border: none;
    border-radius: 4px;
    color: rgb(12, 12, 12);
    cursor: pointer;
    font-size: 13px;
    margin-left: auto;
    padding: 6px 12px
}

.u-tc-text-secondary-fs-12-fwgt-bold-ml-3-950 {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: bold;
    margin-left: 3px
}

.u-d-inline-block-2c6 {
    display: inline-block;
    vertical-align: middle
}

.u-d-grid-g-15-73d {
    display: grid;
    gap: 15px
}

.u-ai-center-bg-bg-secondary-br-4-d-none-g-5-p-38-4c9 {
    align-items: center;
    background: var(--bg-secondary);
    border-radius: 4px;
    display: none;
    gap: 5px;
    padding: 3px 8px
}

.u-d-flex-fd-column-g-8-685 {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.u-d-flex-g-8-9c6 {
    display: flex;
    gap: 8px
}

.u-ai-center-tc-text-main-d-flex-fs-14-fwgt-bold-g-8-mb-8-258 {
    color: var(--text-main);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px
}

.u-ai-center-d-flex-g-8-mb-8-0a0 {
    margin-bottom: 8px
}

.u-ai-start-d-flex-g-10-jc-space-between-d63 {
    align-items: start;
    display: flex;
    gap: 10px;
    justify-content: space-between
}

.u-ai-center-bg-28a745-bd-none-br-3-tc-white-cur-pointer-d-inline-flex-915 {
    background: #28a745;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    margin-left: 6px;
    padding: 2px 8px
}

.u-fs-11-ml-3-1cd {
    font-size: 11px;
    margin-left: 3px
}

.u-ai-center-bg-rgba-0-0-0-0-8-d-none-h-100pct-jc-center-l-0-pos-fixed-83a {
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000
}

.u-bg-bg-secondary-bdl-4solid2196F3-br-4-m-200-p-12-c75 {
    background: var(--bg-secondary);
    border-left: 4px solid #2196F3;
    border-radius: 4px;
    margin: 20px 0;
    padding: 12px
}

.u-d-none-cb4 {
    display: none
}

.u-ai-center-bg-rgba-0-0-0-0-7-d-none-h-100pct-jc-center-l-0-ov-auto-po-ae4 {
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 18000
}

.u-ai-center-bg-color-primary-bd-none-br-4-tc-rgb-12-12-12-cur-pointer-84f {
    background: var(--color-primary);
    border: none;
    border-radius: 4px;
    color: rgb(12, 12, 12);
    cursor: pointer;
    font-size: 13px;
    padding: 6px 12px
}

.u-cur-pointer-b20 {
    cursor: pointer
}

.u-fs-11-ml-5-mr-5-e75 {
    font-size: 11px;
    margin-left: 5px;
    margin-right: 5px
}

.u-fs-11-w-60-351 {
    font-size: 11px;
    width: 60px
}

.u-d-flex-fw-wrap-g-15-56d {
    display: flex;
    flex-wrap: wrap;
    gap: 15px
}

.u-ai-center-bg-28a745-bd-none-br-3-tc-white-cur-pointer-d-inline-flex-d91 {
    align-items: center;
    background: #28a745;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
    padding: 4px 10px
}

.u-ai-center-tc-text-main-d-flex-fs-14-fwgt-bold-g-8-mb-10-445 {
    color: var(--text-main);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px
}

.u-fwgt-bold-minw-20-5e2 {
    font-family: monospace;
    font-weight: bold;
    min-width: 20px;
    text-align: center
}

.u-ai-center-bg-28a745-bd-none-br-3-tc-white-cur-pointer-d-inline-flex-dae {
    background: #28a745;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    padding: 3px 8px
}

.u-d-grid-g-20-mt-12-470 {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px
}

.u-fs-11-p-2-c21 {
    font-size: 11px;
    padding: 2px
}

.u-ov-hidden-to-ellipsis-ws-nowrap-7af {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.u-ai-center-bdb-1solidborder-light-d-flex-jc-space-between-p-8-615 {
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    padding: 8px
}

.u-mb-10-a74 {
    margin-bottom: 10px
}

.u-fs-12-6b9 {
    font-size: 12px
}

.u-ai-center-bg-rgba-0-0-0-0-85-d-none-h-100pct-jc-center-l-0-pos-fixed-3d1 {
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 17500
}

.u-d-none-fd-column-g-10-ml-40-f68 {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-left: 40px
}

.u-bd-1solidborder-light-br-4-cur-pointer-h-28-w-40-63b {
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    height: 28px;
    width: 40px
}

.u-bg-bg-canvas-bd-1solidborder-color-minh-250-pos-relative-115 {
    background: var(--bg-canvas);
    border: 1px solid var(--border-color);
    min-height: 250px;
    position: relative
}

.u-bg-bg-tertiary-fwgt-bold-e1c {
    background: var(--bg-tertiary);
    font-weight: bold
}

.u-tc-text-main-fs-13-f0e {
    color: var(--text-main);
    font-size: 13px
}

.u-w-35-f0b {
    width: 35px
}

.u-ai-center-d-flex-g-8-ml-6-1da {
    margin-left: 6px
}

.u-cur-grab-h-100pct-w-100pct-440 {
    cursor: grab;
    height: 100%;
    width: 100%
}

.u-bg-fff3cd-bd-1solidffc107-br-4-tc-856404-d-none-mt-10-p-10-7d7 {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    display: none;
    margin-top: 10px;
    padding: 10px
}

.u-bg-bg-secondary-bd-1solidborder-light-tc-text-main-cur-pointer-fwgt-b7e {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    cursor: pointer;
    font-weight: bold;
    height: 24px;
    width: 24px
}

.u-tc-text-secondary-fs-13-c56 {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6
}

.u-cur-pointer-m-0-94e {
    cursor: pointer;
    flex-shrink: 0;
    margin: 0
}

.u-ai-center-bg-bg-secondary-br-4-d-flex-g-5-p-38-cd3 {
    align-items: center;
    background: var(--bg-secondary);
    border-radius: 4px;
    display: flex;
    gap: 5px;
    padding: 3px 8px
}

.u-tc-text-main-m-0-49a {
    color: var(--text-main);
    flex: 1;
    margin: 0
}

.u-bg-bg-secondary-bd-1solidborder-light-br-4-tc-text-main-fs-13-p-8-w-15f {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 13px;
    padding: 8px;
    width: 100%
}

.u-ai-center-cur-pointer-d-flex-g-5-73d {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 5px
}

.u-mb-8-pos-relative-w-100pct-b28 {
    box-sizing: border-box;
    margin-bottom: 8px;
    position: relative;
    width: 100%
}

.u-bdb-2solidborder-color-bb5 {
    border-bottom: 2px solid var(--border-color)
}

.u-w-70-f95 {
    width: 70px
}

.u-bg-bg-main-bd-1solidborder-light-h-100pct-ov-hidden-pos-relative-w-1-d29 {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.u-ai-center-bg-bg-secondary-br-4-cur-pointer-d-flex-g-8-mb-8-p-8-0ca {
    background: var(--bg-secondary);
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 8px;
    padding: 8px
}

.u-bg-bg-main-bd-2solidborder-color-br-8-sh-0420rgba-0-0-0-0-3-m-20auto-0d7 {
    background: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
    max-height: 90vh;
    max-width: 600px;
    overflow-y: auto;
    padding: 20px;
    width: 90%
}

.u-u-da5 {
    flex: 1
}

.u-l-8-op-0-5-pos-absolute-t-50pct-870 {
    left: 8px;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.u-d-flex-fd-column-g-6-350 {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.u-ai-center-d-inline-flex-82e {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0
}

.u-tc-text-secondary-fs-12-fwgt-bold-f18 {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: bold
}

.u-ai-center-cur-pointer-d-flex-g-8-009 {
    cursor: pointer
}

.u-fs-11-ml-5-aa8 {
    font-size: 11px;
    margin-left: 5px
}

.u-bg-bg-main-bd-1solidborder-light-br-4-tc-text-main-fs-12-p-46-w-60-7bf {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 12px;
    padding: 4px 6px;
    width: 60px
}

.u-tc-text-main-fs-12-ce6 {
    color: var(--text-main);
    font-size: 12px
}

.u-tc-text-main-fs-1em-6ca {
    color: var(--text-main);
    font-size: 1em
}

.u-ai-center-d-flex-g-15-cbd {
    align-items: center;
    display: flex;
    gap: 15px
}

.u-ai-center-bg-bg-tertiary-bdb-1solidborder-light-d-flex-fs-12-g-10-p-51b {
    align-items: center;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    font-size: 12px;
    gap: 10px;
    padding: 6px 8px
}

.u-ai-center-bdb-2solidborder-light-tc-text-main-d-flex-jc-space-betwee-5f7 {
    align-items: center;
    border-bottom: 2px solid var(--border-light);
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    margin-top: 0;
    padding-bottom: 10px
}

.u-bg-bg-secondary-bd-1solidborder-color-br-4-tc-text-main-cur-pointer-4c2 {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-main);
    cursor: pointer;
    flex: 1;
    font-size: 11px;
    min-width: 60px;
    padding: 4px 6px;
    transition: all 0.2s
}

.u-ai-center-bg-bg-tertiary-bdb-1solidborder-light-d-none-fw-wrap-g-10-5be {
    align-items: center;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px
}

.u-tc-text-secondary-fs-0-9em-b57 {
    color: var(--text-secondary);
    font-size: 0.9em
}

.u-d-inline-block-6a1 {
    display: inline-block
}

.u-d-flex-fw-wrap-g-6-207 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.u-tc-text-secondary-fs-12-567 {
    color: var(--text-secondary);
    font-size: 12px
}

.u-tc-text-secondary-fwgt-normal-b61 {
    color: var(--text-secondary);
    font-weight: normal
}

.u-fs-11-8b6 {
    font-size: 11px
}

.u-tc-text-main-fwgt-bold-mb-8-6fc {
    color: var(--text-main);
    font-weight: bold;
    margin-bottom: 8px
}

.u-ai-center-bg-28a745-bd-none-br-4-tc-white-cur-pointer-d-inline-flex-e46 {
    background: #28a745;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap
}

.u-d-grid-g-5-w-100pct-779 {
    box-sizing: border-box;
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 1fr;
    width: 100%
}

.u-bg-bg-secondary-bd-1solidborder-light-br-4-tc-text-main-fs-13-p-6-w-f91 {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 13px;
    padding: 6px;
    width: 80px
}

.u-tc-text-main-m-0-bdd {
    color: var(--text-main);
    margin: 0
}

.u-ai-center-bdb-2solidborder-light-tc-text-main-d-flex-g-8-mt-0-a28 {
    border-bottom: 2px solid var(--border-light);
    color: var(--text-main);
    margin-top: 0;
    padding-bottom: 10px
}

.u-w-50-9ab {
    width: 50px
}

.u-tc-text-main-fwgt-bold-minw-50-fb4 {
    color: var(--text-main);
    font-weight: bold;
    min-width: 50px;
    text-align: right
}

.u-ai-center-bg-4CAF50-bd-none-br-4-tc-white-cur-pointer-d-inline-flex-388 {
    align-items: center;
    background: #4CAF50;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    display: inline-flex;
    font-weight: bold;
    gap: 8px;
    padding: 10px 20px
}

.u-bg-bg-secondary-bd-1solidborder-light-br-4-tc-text-main-cur-pointer-3b6 {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    cursor: pointer;
    font-weight: bold;
    padding: 10px 20px
}

.u-bg-bg-secondary-br-4-d-block-m-200-p-12-95d {
    background: var(--bg-secondary);
    border-radius: 4px;
    display: block;
    margin: 20px 0;
    padding: 12px
}

.u-d-none-fd-column-g-8-ml-40-b2d {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-left: 40px
}

.u-tc-text-secondary-fs-11-m-8000-b91 {
    color: var(--text-secondary);
    font-size: 11px;
    margin: 8px 0 0 0
}

.u-m-50-8ac {
    margin: 5px 0
}

.u-tc-text-secondary-fwgt-bold-d9a {
    color: var(--text-secondary);
    font-weight: bold
}

.u-bg-bg-main-br-6-sh-0824rgba-0-0-0-0-35-tc-text-main-d-flex-fd-column-f61 {
    background: var(--bg-main);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    height: 90%;
    max-width: 1100px;
    padding: 12px;
    position: relative;
    width: 95%;
    min-height: 0;
    overflow: hidden
}

.u-bg-fff-bd-1solidccc-cur-pointer-fwgt-bold-h-24-w-24-c16 {
    background: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
    height: 24px;
    width: 24px
}

.u-fs-11-mr-5-7ac {
    font-size: 11px;
    margin-right: 5px
}

.u-fs-13-304 {
    font-size: 13px
}

.u-tc-text-secondary-fs-12-fwgt-bold-ml-5-b70 {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: bold;
    margin-left: 5px
}

.u-mt-20-c6b {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 20px;
    padding-top: 15px
}

.u-w-200-8f7 {
    width: 200px
}

.u-bg-ff4444-bd-none-br-3-tc-white-cur-pointer-p-410-bc3 {
    background: #ff4444;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    padding: 4px 10px
}

.u-d-flex-g-10-jc-flex-end-mt-20-034 {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px
}

.u-tc-text-secondary-fs-11-fwgt-bold-l-5-pos-absolute-t-5-z-10-013 {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: bold;
    left: 5px;
    position: absolute;
    top: 5px;
    z-index: 10
}

.u-d-flex-fd-column-g-6-mb-8-483 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px
}

.u-ai-center-d-flex-fw-wrap-g-8-ml-26-540 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 26px
}

.u-d-flex-g-5-pos-absolute-r-5-t-5-z-10-655 {
    display: flex;
    gap: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10
}

.u-mt-5-351 {
    margin-top: 5px
}

.u-bg-bg-main-bd-1solidborder-color-br-4-tc-text-main-fs-12-p-68628-w-1-123 {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--text-main);
    font-size: 12px;
    padding: 6px 8px 6px 28px;
    width: 100%
}

.u-bg-fff3cd-bd-1solidffc107-br-6-p-12-564 {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px
}

.u-bg-bg-main-br-6-sh-0824rgba-0-0-0-0-4-tc-text-main-d-flex-fd-column-953 {
    background: var(--bg-main);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    max-width: 1200px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 90%
}

.u-tc-text-main-d-block-fs-13-mb-2-640 {
    color: var(--text-main);
    display: block;
    font-size: 13px;
    margin-bottom: 2px
}

.u-d-inline-block-mr-4-ea7 {
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle
}

.u-tc-text-main-212 {
    color: var(--text-main)
}

.u-ai-center-bg-rgba-0-0-0-0-8-d-none-h-100pct-jc-center-l-0-pos-fixed-8c3 {
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 17000
}

.u-bg-bg-secondary-bd-1solidborder-light-br-6-p-12-c42 {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px
}

.u-ai-center-d-flex-g-10-ml-20-mt-5-916 {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-left: 20px;
    margin-top: 5px
}

.u-mt-15-886 {
    margin-top: 15px
}

.u-w-60-c5a {
    width: 60px
}

.u-tc-text-secondary-ae9 {
    color: var(--text-secondary)
}

.u-ai-center-tc-text-main-d-none-fs-13-g-6-040 {
    align-items: center;
    color: var(--text-main);
    display: none;
    font-size: 13px;
    gap: 6px
}

.u-bd-1solidborder-light-p-8-8a6 {
    border: 1px solid var(--border-light);
    padding: 8px;
    text-align: left
}

.u-ai-center-bg-bg-main-bd-1solidborder-light-br-4-cur-pointer-d-flex-g-fce {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px
}

.u-ai-center-tc-text-main-d-flex-fs-13-g-4-b67 {
    align-items: center;
    color: var(--text-main);
    display: flex;
    font-size: 13px;
    gap: 4px
}

.u-d-flex-fw-wrap-g-10-265 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.u-tc-text-secondary-fs-12-fwgt-bold-m-0-cec {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: bold;
    margin: 0
}

.u-bg-bg-canvas-bd-1solidborder-color-ov-hidden-pos-relative-3ec {
    background: var(--bg-canvas);
    border: 1px solid var(--border-color);
    flex: 1;
    overflow: hidden;
    position: relative
}

.u-tc-text-secondary-fs-11-m-0-69f {
    color: var(--text-secondary);
    font-size: 11px;
    margin: 0
}

.u-ai-center-bg-none-bd-none-tc-text-main-cur-pointer-d-flex-fs-24-h-30-7d5 {
    align-items: center;
    background: none;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    font-size: 24px;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px
}

.u-bg-bg-main-bd-1solidborder-light-br-4-tc-text-main-fs-12-minw-80-p-4-7ad {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 12px;
    min-width: 80px;
    padding: 4px 6px
}

.u-tc-text-secondary-fs-12-ml-auto-minw-320-96a {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: auto;
    min-width: 320px;
    text-align: right
}

.u-ai-center-tc-text-main-d-flex-fs-13-g-6-704 {
    color: var(--text-main);
    font-size: 13px
}

.u-ai-center-d-flex-fw-wrap-g-10-240 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.u-tc-text-secondary-fs-11-21a {
    color: var(--text-secondary);
    font-size: 11px;
    font-style: italic
}

.u-ai-center-d-flex-fs-13-g-10-b95 {
    align-items: center;
    display: flex;
    font-size: 13px;
    gap: 10px
}

.u-bg-bg-main-br-6-sh-0824rgba-0-0-0-0-4-tc-text-main-d-flex-fd-column-0ab {
    background: var(--bg-main);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    height: 90%;
    max-width: 1400px;
    padding: 12px;
    position: relative;
    width: 95%
}

.u-bg-bg-main-bd-1solidborder-light-br-4-tc-text-main-fs-13-p-6-w-100pc-7fb {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 13px;
    padding: 6px;
    width: 100%
}

.u-w-180-1df {
    width: 180px
}

.u-tc-text-secondary-fs-13-m-20-de8 {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 20px
}

.u-w-40-93d {
    width: 40px
}

.u-tc-text-secondary-fs-0-85em-m-0-d3e {
    color: var(--text-secondary);
    font-size: 0.85em;
    grid-column: 1 / -1;
    margin: 0;
    overflow-wrap: break-word;
    word-wrap: break-word
}

.u-ai-center-d-flex-fw-wrap-g-16-82b {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.u-ai-center-d-flex-g-16-82b {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px
}

.u-tc-text-main-fs-13-fwgt-bold-c7b {
    color: var(--text-main);
    font-size: 13px;
    font-weight: bold
}

.u-tc-text-secondary-fs-0-9em-m-0-ae7 {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin: 0
}

.u-bg-bg-secondary-br-4-d-none-m-200-p-12-d80 {
    background: var(--bg-secondary);
    border-radius: 4px;
    display: none;
    margin: 20px 0;
    padding: 12px
}

.u-d-grid-g-8-minh-0-ov-auto-p-5-963 {
    display: grid;
    flex: 1;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    min-height: 0;
    overflow: auto;
    padding: 5px
}

.u-bg-ff4444-bd-none-br-3-tc-white-cur-pointer-fs-16-p-510-bc9 {
    background: #ff4444;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    padding: 5px 10px
}

.u-ai-center-d-flex-g-10-786 {
    align-items: center;
    display: flex;
    gap: 10px
}

.u-h-20-w-30-e6b {
    height: 20px;
    vertical-align: middle;
    width: 30px
}

.u-ai-center-bg-007bff-bd-none-br-3-tc-white-cur-pointer-d-inline-flex-0a8 {
    background: #007bff;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    padding: 3px 8px
}

.u-d-grid-g-15-805 {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr
}

.u-ai-center-bdb-1solidborder-light-d-flex-jc-space-between-mb-8-c43 {
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 4px
}

.u-tc-text-secondary-fs-12-fwgt-bold-ml-5-mr-5-f42 {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px
}

.u-d-block-m-0auto-ab2 {
    display: block;
    margin: 0 auto
}

.u-tc-text-main-fwgt-bold-mb-10-db1 {
    color: var(--text-main);
    font-weight: bold;
    margin-bottom: 10px
}

.u-tc-856404-fs-0-85em-mt-4-491 {
    color: #856404;
    font-family: monospace;
    font-size: 0.85em;
    margin-top: 4px
}

.u-bg-bg-secondary-bd-1solidborder-light-br-2-tc-text-main-fs-11-p-24-w-5a5 {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 2px;
    color: var(--text-main);
    font-size: 11px;
    padding: 2px 4px;
    width: 60px
}

.u-bg-bg-main-bd-1solidborder-light-br-4-tc-text-main-fs-12-p-46-567 {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 12px;
    padding: 4px 6px
}

.u-bg-bg-canvas-bd-1solidborder-color-pos-relative-560 {
    background: var(--bg-canvas);
    border: 1px solid var(--border-color);
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden
}

.u-mt-15-maxh-300-ovy-auto-473 {
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto
}

.u-fs-12-w-40-193 {
    font-size: 12px;
    width: 40px
}

.u-ai-center-bg-rgba-255-255-255-0-9-bd-1solidborder-color-br-4-d-none-f90 {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: none;
    font-size: 12px;
    gap: 8px;
    padding: 5px 10px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10
}

.u-bg-bg-secondary-br-4-m-200-p-12-fd4 {
    background: var(--bg-secondary);
    border-radius: 4px;
    margin: 20px 0;
    padding: 12px
}

.u-mt-8-w-100pct-36d {
    margin-top: 8px;
    width: 100%
}

.u-ai-center-bdb-1solidborder-light-d-flex-jc-space-between-mb-10-6ca {
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 5px
}

.u-tc-text-secondary-mt-5-dde {
    color: var(--text-secondary);
    margin-top: 5px
}

.u-bg-007bff-bd-none-br-4-tc-white-cur-pointer-fs-12-p-48-ws-nowrap-ca7 {
    background: #007bff;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap
}

.u-tc-text-main-d-block-fs-14-fwgt-bold-mb-8-269 {
    color: var(--text-main);
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px
}

.u-tc-666-fs-12-0bd {
    color: #666;
    font-size: 12px
}

.u-cur-pointer-p-28-fb4 {
    cursor: pointer;
    padding: 2px 8px
}

.u-m-0-138 {
    margin: 0
}

.u-d-flex-g-15-dce {
    display: flex;
    gap: 15px
}

.u-m-200-b49 {
    margin: 20px 0
}

.u-d-inline-block-m-100-315 {
    display: inline-block;
    margin: 10px 0;
    text-align: left
}

.u-bd-1solidborder-light-br-4-fs-12-p-4-w-45-da7 {
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 12px;
    padding: 4px;
    width: 45px
}

.u-cur-default-mb-10-2c7 {
    cursor: default;
    margin-bottom: 10px
}

.u-tc-text-main-mt-20-60a {
    color: var(--text-main);
    margin-top: 20px
}

/* Botons tancar: mida iconografia coherent amb la resta */

.u-fwgt-bold-90f {
    font-weight: bold;
    text-orientation: mixed;
    writing-mode: vertical-rl
}

.u-ai-center-tc-text-secondary-d-flex-fs-12-g-4-mt-4-8d5 {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 12px;
    gap: 4px;
    margin-top: 4px
}

.u-tc-text-main-d-block-fs-13-mb-4-82e {
    color: var(--text-main);
    display: block;
    font-size: 13px;
    margin-bottom: 4px
}

.u-ai-center-bg-rgba-0-0-0-0-75-d-none-h-100pct-jc-center-l-0-pos-fixed-192 {
    align-items: center;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 16000
}

/* Modal Selecció de perfils: esquema de color */
#profileSelectionModal button {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent-soft-border);
}

#profileSelectionModal h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#profileSelectionModal h3 .icon-placeholder {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

#profileSelectionModal button .icon-placeholder {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

#profileSelectionModal button .icon-placeholder svg {
    display: block;
}

#profileSelectionModal #clearProfilePolygon:hover,
#profileSelectionModal .profile-warning-btn:hover {
    background: #e0a800;
    border-color: #e0a800;
    color: #212529;
}

#profileSelectionModal #closeProfileSelection,
#profileSelectionModal .profile-close-btn,
#profileSelectionModal #clearProfilePolygon {
    border-radius: 3px;
    cursor: pointer;
}

#profileSelectionModal #closeProfileSelection:hover,
#profileSelectionModal .profile-close-btn:hover {
    background: #ff4444;
    border-color: #ff4444;
    color: #ffffff;
}

#profileSelectionModal select,
#profileSelectionModal input[type="range"] {
    accent-color: var(--accent);
}

#profileSelectionModal select:focus,
#profileSelectionModal input:focus {
    outline: 2px solid var(--accent-soft-border);
    border-color: var(--accent);
}

/* Modal Selecció de perfils: opcions en una sola línia */
#profileSelectionModal #profileOptionsLine,
#profileSelectionModal #profileAutoControls,
#profileSelectionModal #profileSweepControls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

#profileSelectionModal #profileOptionsLine>*,
#profileSelectionModal #profileAutoControls>*,
#profileSelectionModal #profileSweepControls>* {
    flex-shrink: 0;
}

#profileSelectionModal #profileOptionsRight {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    white-space: nowrap;
}

#profileSelectionModal #profileSelectionCount,
#profileSelectionModal #profileBandHoverInfo {
    white-space: nowrap;
}

#profileSelectionModal #profileBandHoverInfo {
    max-width: min(360px, 40vw);
    overflow: hidden;
    text-overflow: ellipsis;
}

#profileSelectionModal #profileAutoControls label,
#profileSelectionModal #profileSweepControls label {
    white-space: nowrap;
}

#profileSelectionModal .profile-ctrl-range,
#profileSelectionModal #profileZMinRange,
#profileSelectionModal #profileZMaxRange,
#profileSelectionModal #profileRotRange,
#profileSelectionModal #profileSymbolSizeRange,
#profileSelectionModal #profileSweepAngleRange {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    flex: 0 0 80px;
    box-sizing: border-box;
}

#profileSelectionModal .profile-ctrl-num,
#profileSelectionModal #profileZMinInput,
#profileSelectionModal #profileZMaxInput,
#profileSelectionModal #profileRotInput,
#profileSelectionModal #profileSweepAngle {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    box-sizing: border-box;
}

#profileSelectionModal #profileSymbolSizeValue {
    display: inline-block;
    width: 28px;
    min-width: 28px;
    text-align: center;
}

#profileSelectionModal #profileBandWidth,
#profileSelectionModal #profileSweepWidth {
    width: 40px;
}

#profileSelectionModal #profileBandWidthUnit,
#profileSelectionModal #profileSweepWidthUnit {
    width: 40px;
}

/* Modal Selecció de perfils: contenir el gràfic dins el modal */
#profileSelectionModal .u-bg-bg-main-br-6-sh-0824rgba-0-0-0-0-35-tc-text-main-d-flex-fd-column-f61 {
    height: 92vh;
    max-height: 92vh;
    max-width: min(1480px, 98vw);
    width: 98%;
    min-height: 0;
    overflow: hidden;
}

#profileSelectionModal .u-d-flex-fd-column-g-6-mb-8-483 {
    flex: 0 0 auto;
}

.profile-zmax-sub {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 11px;
}

.u-w-140-8f7 {
    width: 140px;
}

.profile-z-band-controls {
    flex-wrap: wrap;
}

.profile-selection-plots {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
    align-items: stretch;
}

.profile-selection-plot-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-canvas);
}

.profile-selection-xy-canvas {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.profile-selection-plot-z {
    flex: 0 0 clamp(220px, 24vw, 300px);
    min-width: 200px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.profile-selection-z-block {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid var(--border-color, var(--border-light));
    background: var(--bg-canvas);
}

.profile-plot-caption {
    flex: 0 0 auto;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

/* Modal desglossament perfil (XY / YZ / XZ / pla): cel·les iguals i SVG a mida del contenidor */
#profileBandModal > .u-bg-bg-main-br-6-sh-0824rgba-0-0-0-0-4-tc-text-main-d-flex-fd-column-953 {
    height: min(90vh, 920px);
}

#profileBandModal .profile-band-header {
    gap: 12px;
    flex-wrap: wrap;
}

#profileBandModal .profile-band-header-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

#profileBandModal .profile-band-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0;
}

#profileBandModal .profile-band-controls-row .modal-z-tick-subdiv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#profileBandModal .u-d-grid-g-8-minh-0-ov-auto-p-5-963 {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#profileBandModal .u-d-grid-g-8-minh-0-ov-auto-p-5-963 > div {
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#profileBandModal .profile-band-view-caption {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 20;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    pointer-events: none;
    max-width: calc(100% - 120px);
    line-height: 1.25;
}

#profileBandModal .u-d-flex-g-5-pos-absolute-r-5-t-5-z-10-655 {
    z-index: 20;
    background: color-mix(in srgb, var(--bg-main) 88%, transparent);
    border-radius: 4px;
    padding: 3px;
    pointer-events: auto;
}

/* Escala Isòtropa/Anisòtropa: contrast estable en repòs i hover
   (sense això, .profile-scale-mode-aniso deixa fons clar i el :hover posa text blanc). */
#profileBandModal #profileBandScaleModeBtn,
#profileZoomModal #profileZoomScaleModeBtn,
#modalOverlay #modalScaleModeBtn,
#xz-container #xzScaleModeBtn,
#yz-container #yzScaleModeBtn {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent-strong);
}

#profileBandModal #profileBandScaleModeBtn:hover,
#profileZoomModal #profileZoomScaleModeBtn:hover,
#modalOverlay #modalScaleModeBtn:hover,
#xz-container #xzScaleModeBtn:hover,
#yz-container #yzScaleModeBtn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

#profileBandModal #profileBandScaleModeBtn.profile-scale-mode-aniso,
#profileZoomModal #profileZoomScaleModeBtn.profile-scale-mode-aniso,
#modalOverlay #modalScaleModeBtn.profile-scale-mode-aniso,
#xz-container #xzScaleModeBtn.profile-scale-mode-aniso,
#yz-container #yzScaleModeBtn.profile-scale-mode-aniso {
    background: color-mix(in srgb, var(--accent) 28%, var(--bg-main));
    border-color: var(--accent);
    color: var(--accent-strong);
    font-weight: 600;
}

#modalOverlay .modal-z-tick-subdiv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    min-height: var(--app-btn-min-height);
    box-sizing: border-box;
}

#modalOverlay .modal-z-tick-subdiv label {
    white-space: nowrap;
    margin: 0;
}

#modalOverlay .modal-z-tick-subdiv input[type="number"] {
    width: 3.2rem;
    padding: 2px 4px;
    font-size: 12px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    background: var(--bg-main);
    color: var(--text-main);
}

#profileBandModal #profileBandScaleModeBtn.profile-scale-mode-aniso:hover,
#profileZoomModal #profileZoomScaleModeBtn.profile-scale-mode-aniso:hover,
#modalOverlay #modalScaleModeBtn.profile-scale-mode-aniso:hover,
#xz-container #xzScaleModeBtn.profile-scale-mode-aniso:hover,
#yz-container #yzScaleModeBtn.profile-scale-mode-aniso:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

#profileBandModal #profileBandSvgXY,
#profileBandModal #profileBandSvgYZ,
#profileBandModal #profileBandSvgXZ,
#profileBandModal #profileBandSvgReference {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}

.profile-zmax-hint {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.profile-selection-z-canvas {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

#profileSelectionModal .u-bg-bg-canvas-bd-1solidborder-color-pos-relative-560 {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#profileSelectionModal #profileSelectionSvg,
#profileSelectionModal #profileSelectionZSvg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 900px) {
    .profile-selection-plots {
        flex-direction: column;
    }
    .profile-selection-plot-z {
        flex: 0 0 220px;
        max-width: none;
        width: 100%;
    }
}

.u-mt-10-maxh-200-ovy-auto-508 {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto
}

.u-ai-center-bg-bg-main-bd-1solidborder-color-br-4-cur-pointer-d-flex-f-663 {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 12px;
    margin: 0;
    padding: 6px 8px;
    user-select: none;
    width: 100%
}

.u-bg-rgb-255-255-255-bd-1solidborder-light-br-4-maxh-300-maxw-100pct-o-dab {
    background: rgb(255, 255, 255);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    max-height: 300px;
    max-width: 100%;
    overflow: auto;
    padding: 10px;
    text-align: center
}

.u-tc-856404-fs-0-9em-mt-4-f13 {
    color: #856404;
    font-size: 0.9em;
    margin-top: 4px
}

.u-ai-center-tc-text-secondary-d-flex-fs-12-g-4-mt-8-2ca {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 12px;
    gap: 4px;
    margin-top: 8px
}

.u-d-flex-fw-wrap-g-10-ml-40-d58 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 40px
}

.u-bg-bg-main-br-5-d-flex-fd-column-h-95pct-p-10-pos-relative-w-95pct-268 {
    background: var(--bg-main);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    height: 95%;
    padding: 10px;
    position: relative;
    width: 95%
}

.u-maxh-400-ovy-auto-3cc {
    max-height: 400px;
    overflow-y: auto
}

.u-fs-12-p-2-41d {
    font-size: 12px;
    padding: 2px
}

.u-ai-center-d-flex-g-4-fd7 {
    align-items: center;
    display: flex;
    gap: 4px
}

.u-ai-center-d-flex-fs-12-g-4-m-0-907 {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 4px;
    margin: 0
}

.u-d-flex-fw-wrap-g-4-mb-8-w-100pct-5f9 {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    width: 100%
}

.u-bg-rgba-255-255-255-0-5-bdl-3solidffc107-br-4-mb-8-p-8-c15 {
    background: rgba(255, 255, 255, 0.5);
    border-left: 3px solid #ffc107;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 8px
}

.u-cur-pointer-op-0-9-f8b {
    cursor: pointer;
    opacity: 0.9
}

.u-bg-6c757d-bd-none-br-3-tc-white-cur-pointer-p-410-2e7 {
    background: #6c757d;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    padding: 4px 10px
}

.u-tc-text-main-d-block-fs-13-m-804-6ad {
    color: var(--text-main);
    display: block;
    font-size: 13px;
    margin: 8px 0 4px
}

.u-tc-856404-d0e {
    color: #856404
}

.u-layout-d-flex-ai-center-g-8-41e {
    display: flex;
    align-items: center;
    gap: 8px
}

.u-layout-d-flex-ai-center-g-6-0f9 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap
}

.u-layout-d-inline-flex-ai-center-g-4-186 {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

/* Editor de dades */
.edit-data-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px
}

.edit-data-search {
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    display: flex;
    gap: 6px;
    padding: 4px 8px
}

.edit-data-search input {
    background: transparent;
    border: none;
    color: var(--text-main);
    flex: 1;
    font-size: 12px;
    min-width: 220px;
    outline: none
}

.edit-data-search-clear {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    line-height: 1;
    min-height: 18px;
    min-width: 18px;
    opacity: 0.75;
    padding: 2px;
}

.edit-data-search-clear:hover {
    background: var(--border-light);
    color: var(--text-main);
    opacity: 1
}

.edit-data-search-clear[hidden] {
    display: none !important
}

.edit-data-pagination {
    align-items: center;
    display: flex;
    gap: 6px;
    margin-left: auto
}

.edit-data-pagination select {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 12px;
    padding: 2px 6px
}

.edit-data-table-wrapper {
    border: 1px solid var(--border-light);
    border-radius: 4px;
    max-height: 65vh;
    overflow: auto
}

.edit-data-table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%
}

.edit-data-table thead th {
    background: var(--accent);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 2
}

.edit-data-table th,
.edit-data-table td {
    border-bottom: 1px solid var(--border-light);
    padding: 4px 6px;
    white-space: nowrap
}

.edit-data-table th[data-sort] {
    cursor: pointer;
    user-select: none
}

.edit-data-table tbody tr:hover {
    background: var(--accent-soft)
}

.edit-data-row-active {
    background: var(--accent-soft-border)
}

.edit-data-id-text {
    display: inline-block;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: 3px;
    color: var(--accent-strong);
    font-size: 12px;
    padding: 2px 6px
}

.edit-data-table th.sort-asc::after,
.edit-data-table th.sort-desc::after {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    opacity: 0.85;
    content: "▲";
}

.edit-data-table th.sort-desc::after {
    content: "▼"
}

.edit-data-table {
    --sticky-actions-width: 60px;
    --sticky-id-width: 80px
}

.edit-data-table th.edit-data-sticky-actions,
.edit-data-table td.edit-data-sticky-actions {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--accent);
    color: #fff;
    min-width: var(--sticky-actions-width);
    width: var(--sticky-actions-width);
    box-sizing: border-box;
    text-align: center;
}

.edit-data-table td.edit-data-sticky-actions {
    background: var(--bg-main);
    color: var(--text-main);
    z-index: 3;
}

.edit-data-table th.edit-data-sticky-id,
.edit-data-table td.edit-data-sticky-id {
    position: sticky;
    left: var(--sticky-actions-width);
    z-index: 3;
    background: var(--accent);
    color: #fff;
    min-width: var(--sticky-id-width);
    width: var(--sticky-id-width);
    box-sizing: border-box;
}

.edit-data-table td.edit-data-sticky-id {
    background: var(--bg-main);
    color: var(--text-main);
    z-index: 2;
}

.edit-data-table input {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--text-main);
    font-size: 12px;
    min-width: 70px;
    padding: 2px 4px;
    width: 100%
}

.edit-data-delete {
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-main);
    cursor: pointer;
    padding: 2px 6px
}

.edit-data-delete svg {
    display: block
}

.edit-data-delete:hover {
    color: var(--danger)
}

.edit-data-row-invalid {
    background: rgba(255, 193, 7, 0.15)
}

.edit-data-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6px
}

.edit-data-status-danger {
    color: var(--danger);
    font-size: 13.5px;
    font-weight: bold;
    animation: editDataBlink 1.1s infinite
}

@keyframes editDataBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.35
    }
}

.edit-data-add-modal {
    width: 72%;
    max-width: 820px;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 6px 8px
}

.edit-data-add-header {
    margin-bottom: 6px;
    padding-bottom: 6px
}

.edit-data-add-body {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.edit-data-add-grid {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 6px;
    background: var(--bg-secondary);
    display: grid;
    gap: 6px 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.edit-data-add-grid label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px
}

.edit-data-add-grid input {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 11px;
    padding: 3px 5px;
    max-width: 90px
}

.edit-data-add-id {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: 4px;
    color: var(--accent-strong);
    font-size: 11px;
    padding: 3px 5px;
    max-width: 90px
}

.edit-data-add-row {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.edit-data-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.edit-data-add-actions .graph-action-btn {
    font-size: 12px;
    padding: 4px 8px;
    min-width: 100px;
    justify-content: center
}

#closeEditDataAddModal:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff
}

#editAddSave:hover {
    background: var(--success);
    border-color: var(--success);
    color: #fff
}

#editAddCancel:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff
}

/* Missatges globals */
.app-message-backdrop {
    background: rgba(0, 0, 0, 0.45);
    inset: 0;
    position: fixed;
    z-index: 12990;
}

.app-message {
    align-items: flex-start;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--info);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    color: var(--text-main);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: min(520px, calc(100vw - 32px));
    padding: 10px 12px;
    position: fixed;
    left: 50%;
    right: auto;
    top: 16px;
    transform: translateX(-50%);
    z-index: 13000
}

/* Confirmació modal: X dalt-dreta, text centrat, botó baix-dreta */
.app-message.app-message--confirm {
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: min(560px, calc(100vw - 32px));
    width: min(560px, calc(100vw - 32px));
    padding: 18px 20px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
}

.app-message.app-message--confirm > #appMessageClose {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    color: var(--text-main);
    font-size: 18px;
    line-height: 1;
    opacity: 0.7;
}

.app-message.app-message--confirm > #appMessageClose:hover {
    opacity: 1;
}

.app-message.app-message--confirm > #appMessageText {
    flex: 1 1 auto;
    width: 100%;
    text-align: left;
    padding: 8px 36px 8px 4px; /* espai a la dreta per no solapar la X */
    line-height: 1.45;
    align-self: stretch;
}

.app-message.app-message--confirm > #appMessageActions {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    align-self: flex-end;
}

.app-message[data-type="warning"] {
    border-left-color: var(--warning)
}

.app-message[data-type="danger"] {
    border-left-color: var(--danger)
}

.app-message[data-type="success"] {
    border-left-color: var(--success)
}

.app-message > #appMessageText {
    flex: 1 1 220px;
    min-width: 0;
    line-height: 1.35;
    order: 1;
}

/* El botó ✕ (tancar) — no els d’acció */
.app-message > #appMessageClose {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
    order: 2;
}

.app-message-actions {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    order: 3;
}

.app-message-actions .graph-action-btn {
    font-size: 12px;
    padding: 6px 10px;
    pointer-events: auto;
}

/* Guanya a .app-message button { background:transparent } (eliminat) */
.app-message-actions .graph-action-btn.btn-success {
    background: var(--success);
    border: 1px solid var(--success);
    color: #ffffff;
}

.app-message-actions .graph-action-btn.btn-success:hover {
    background: var(--success-strong);
    border-color: var(--success-strong);
    color: #ffffff;
}

.app-message-actions .graph-action-btn.btn-secondary {
    background: var(--secondary);
    border: 1px solid var(--secondary);
    color: #ffffff;
}

.app-message-actions .graph-action-btn.btn-secondary:hover {
    background: var(--secondary-strong);
    border-color: var(--secondary-strong);
    color: #ffffff;
}

.app-message-actions .graph-action-btn.btn-danger {
    background: var(--danger);
    border: 1px solid var(--danger);
    color: #ffffff;
}

.edit-data-match {
    background: rgba(255, 215, 0, 0.35) !important;
    color: #8a4b00 !important
}

.export-csv-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%
}

.export-csv-actions .graph-action-btn {
    min-width: 110px;
    justify-content: center
}

.export-csv-actions .graph-action-btn {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent-strong)
}

.export-csv-cancel:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: #212529
}

.export-csv-confirm:hover {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff
}

#closeCsvInfoModal:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff
}

/* CSV mapping: color per opcions (obligatori/optatiu) */
select option[data-required="true"] {
    color: var(--danger)
}

select option[data-optional="true"] {
    color: var(--warning)
}

.csv-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.csv-dot {
    display: inline-block;
    line-height: 1
}

.csv-square {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 1px
}

.csv-square-required {
    background: var(--danger)
}

.csv-square-optional {
    background: var(--warning)
}

.csv-legend-separator {
    display: inline-block;
    width: 10px
}

.app-message-progress {
    background: var(--info);
    border-radius: 0 0 4px 4px;
    bottom: 0;
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%
}

.app-message[data-type="warning"] .app-message-progress {
    background: var(--warning)
}

.app-message[data-type="danger"] .app-message-progress {
    background: var(--danger)
}

.app-message[data-type="success"] .app-message-progress {
    background: var(--success)
}

.app-message[data-animate="true"] .app-message-progress {
    animation: appMessageProgress var(--msg-time, 3000ms) linear forwards
}

@keyframes appMessageProgress {
    from {
        width: 100%
    }

    to {
        width: 0%
    }
}

/* Filtres de columna (sidebar) */
.column-filter-active-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.column-filter-chip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    background: var(--bg-secondary, #f5f5f5);
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-main, #222);
}

.column-filter-chip.is-disabled {
    opacity: 0.55;
    border-style: dashed;
}

.column-filter-chip-text {
    flex: 1 1 auto;
    min-width: 0;
}

.column-filter-chip-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.column-filter-chip-toggle {
    border: 1px solid var(--border-color, #ccc);
    border-radius: 3px;
    background: var(--bg-main, #fff);
    color: var(--text-main, #222);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    min-width: 28px;
}

.column-filter-chip-toggle[aria-pressed="true"] {
    background: var(--accent, #2c7be5);
    border-color: var(--accent, #2c7be5);
    color: #fff;
}

.column-filter-chip-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--text-secondary, #666);
    padding: 0 2px;
}

.column-filter-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.column-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary, #555);
}

.column-filter-field select,
.column-filter-field input {
    font-size: 12px;
    padding: 5px 6px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    background: var(--bg-main, #fff);
    color: var(--text-main, #222);
}

.column-filter-checklist {
    max-height: 160px;
    overflow: auto;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    padding: 4px 6px;
    background: var(--bg-main, #fff);
}

.column-filter-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 2px 0;
    cursor: pointer;
    color: var(--text-main, #222);
}

.column-filter-check-tools {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.column-filter-check-tools button,
.column-filter-btn {
    font-size: 11px;
    padding: 5px 8px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    background: var(--bg-secondary, #eee);
    color: var(--text-main, #222);
    cursor: pointer;
}

.column-filter-btn.primary {
    background: var(--accent, #2c7be5);
    border-color: var(--accent, #2c7be5);
    color: #fff;
}

.column-filter-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.column-filter-count,
.column-filter-hint,
.column-filter-empty {
    font-size: 11px;
    color: var(--text-secondary, #666);
    margin: 0;
}

.column-filter-count {
    margin-top: 8px;
    font-weight: 600;
}

.edit-data-search-wrap {
    align-items: center;
    display: flex;
    gap: 6px;
}

.edit-data-search-help-btn {
    flex-shrink: 0;
    min-width: 28px;
    padding: 4px 6px;
}

.edit-data-search-help-dialog {
    max-width: min(520px, calc(100vw - 32px));
    padding: 16px 18px;
}

.edit-data-search-help-close {
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
}

.edit-data-search-help-close:hover {
    opacity: 0.7;
}

.edit-data-search-help-body p {
    margin: 0 0 8px;
    line-height: 1.4;
}

.edit-data-search-help-examples {
    margin: 0 0 10px;
    padding-left: 18px;
    line-height: 1.45;
}

.edit-data-search-help-examples code {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 12px;
    padding: 1px 5px;
}

.edit-data-search-help-note {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 4px;
}