:root {
            --bg-color: #0f172a;
            --sidebar-bg: #1e293b;
            --card-bg: #334155;
            --accent-color: #fb8500;
            --shape-active: #22d3ee;
            --accent-hover: #ffb703;
            --success-color: #2ec4b6;
            --danger-color: #e63946;
            --text-color: #f8fafc;
            --text-muted: #94a3b8;
        }
        body {
            font-family: 'Outfit', sans-serif;
            background: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
        .sidebar {
            width: 380px;
            background: var(--sidebar-bg);
            border-right: 1px solid #475569;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        h1 {
            font-size: 1.4rem;
            margin: 0 0 5px 0;
            color: var(--accent-color);
            text-align: center;
        }
        .subtitle {
            font-size: 0.9rem;
            color: var(--text-muted);
            text-align: center;
            margin: 0 0 15px 0;
        }
        label {
            font-size: 0.85rem;
            font-weight: bold;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        select, button, input {
            background: var(--card-bg);
            border: 1px solid #475569;
            color: var(--text-color);
            padding: 10px;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            transition: all 0.2s;
        }
        select:focus, button:hover {
            border-color: var(--accent-color);
        }
        button {
            cursor: pointer;
            font-weight: bold;
        }
        button.primary {
            background: var(--accent-color);
            color: #fff;
            border: none;
        }
        button.primary:hover {
            background: var(--accent-hover);
        }
        button.success {
            background: var(--success-color);
            color: #fff;
            border: none;
        }
        button.success:hover {
            opacity: 0.9;
        }
        button.danger {
            background: var(--danger-color);
            color: #fff;
            border: none;
        }
        button.danger:hover {
            opacity: 0.9;
        }
        .concept-preview {
            display: flex;
            align-items: center;
            gap: 15px;
            background: var(--card-bg);
            padding: 15px;
            border-radius: 12px;
            border: 1px solid #475569;
        }
        .concept-preview img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            background: #fff;
            border-radius: 8px;
            padding: 5px;
        }
        .concept-preview div {
            display: flex;
            flex-direction: column;
        }
        .concept-name {
            font-size: 1.1rem;
            font-weight: bold;
        }
        .concept-id {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .workspace {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 20px;
            position: relative;
            background: #020617;
            overflow: hidden;             /* l'image zoomée reste dans le plan de travail */
            touch-action: none;           /* le pincement ne zoome pas la page */
        }
        .image-container {
            position: relative;
            display: inline-block;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            border-radius: 12px;
            overflow: visible;            /* laisse les poignées / le X déborder hors de l'image */
            border: 2px solid #475569;
            transform-origin: 0 0;        /* zoom calculé depuis le coin haut-gauche */
            --vz: 1;                      /* inverse du zoom : garde les traits à épaisseur constante */
        }
        .image-container img {
            display: block;
            max-width: 75vw;
            max-height: 80vh;
            object-fit: contain;
            border-radius: 10px;          /* l'image garde ses coins arrondis */
        }
        #svg-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: visible;            /* poignées hors-cadre toujours visibles */
            z-index: 10;
        }
        .image-container .active-pointer {
            cursor: crosshair;
        }
        svg path.current-drawing {
            fill: rgba(251, 133, 0, 0.3);
            stroke: var(--accent-color);
            stroke-width: calc(1.5 * var(--vz));
            stroke-dasharray: 4;
        }
        svg path.saved-shape {
            fill: rgba(46, 196, 182, 0.2);
            stroke: var(--success-color);
            stroke-width: calc(1.5 * var(--vz));
        }
        svg .saved-shape-circle {
            fill: rgba(46, 196, 182, 0.2);
            stroke: var(--success-color);
            stroke-width: calc(1.5 * var(--vz));
        }
        /* Selected tracing in editing mode — accent color */
        svg path.saved-shape.selected-trace {
            stroke: var(--shape-active);
            stroke-width: calc(3 * var(--vz));
        }
        svg .saved-shape-circle.selected-trace {
            stroke: var(--shape-active);
            stroke-width: calc(3 * var(--vz));
        }
        /* Edit handles — touch-friendly */
        svg .edit-handle {
            stroke: var(--accent-color);
            stroke-width: calc(0.7 * var(--vz));
            cursor: grab;
            pointer-events: all;
            /* Critical for touch: without this the browser treats a drag as a
               scroll/pan and fires pointercancel, killing the drag mid-course.
               touch-action:none keeps the whole drag owned by our pointer handlers. */
            touch-action: none;
            filter: drop-shadow(0 0.3px 0.6px rgba(0, 0, 0, 0.6));
        }
        svg .edit-handle.active-handle { fill: #fff; stroke-width: calc(1.0 * var(--vz)); }
        svg .edit-handle.inactive-handle { fill: rgba(255, 255, 255, 0.7); }
        svg .edit-handle.edge-handle.active-handle { fill: #ffd24a; }
        svg .edit-handle.edge-handle.inactive-handle { fill: rgba(255, 210, 74, 0.75); }
        svg .edit-handle:hover { stroke-width: calc(1.3 * var(--vz)); transform-origin: center; }
        svg .edit-handle.dragging { cursor: grabbing; fill: var(--accent-hover); stroke-width: calc(1.2 * var(--vz)); }
        /* Uniform stroke regardless of the preserveAspectRatio=none stretch */
        svg .saved-shape, svg .saved-shape-circle, svg .current-drawing, svg .shape-preview, svg .sel-box { vector-effect: non-scaling-stroke; }
        /* Live preview of the shape being drawn */
        svg .shape-preview { fill: rgba(34,211,238,0.16); stroke: var(--shape-active); stroke-width: calc(1.5 * var(--vz)); stroke-dasharray: 3; }
        /* Selection bounding box */
        svg .sel-box { fill: none; stroke: var(--shape-active); stroke-width: calc(1 * var(--vz)); stroke-dasharray: 2; pointer-events: none; }
        /* Generous invisible touch target so handles grab from further away */
        svg .handle-hit { fill: transparent; stroke: none; pointer-events: all; touch-action: none; cursor: pointer; }
        svg rect.edit-handle { fill: #fff; stroke: var(--shape-active); stroke-width: calc(0.8 * var(--vz)); pointer-events: none; }
        svg .node-handle { fill: var(--shape-active); stroke: #fff; stroke-width: calc(0.5 * var(--vz)); pointer-events: none; }
        svg .node-handle.selected { fill: #fff; stroke: var(--shape-active); stroke-width: calc(1.2 * var(--vz)); }
        svg .node-handle.hover { stroke: var(--shape-active); stroke-width: calc(2.5 * var(--vz)); stroke-opacity: 0.55; }
        svg .node-preview { fill: var(--shape-active); opacity: 0.75; stroke: none; pointer-events: none; }
        svg .del-bg { fill: var(--danger-color); pointer-events: none; }
        svg .del-x { fill: none; stroke: #fff; stroke-width: calc(2.5 * var(--vz)); stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
        svg .del-bg.hover { fill: #b3121f; }
        svg .del-x.hover { stroke-width: calc(3.2 * var(--vz)); }
        svg .rotate-handle { fill: var(--shape-active); pointer-events: none; }
        svg .rotate-arrow { fill: #fff; stroke: none; pointer-events: none; }
        svg .rotate-line { stroke: var(--shape-active); stroke-width: calc(1 * var(--vz)); stroke-dasharray: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
        /* Vertical tool palette over the canvas (bspline-style) */
        .tool-palette { position: relative; align-self: center; z-index: 30; display: flex; flex-direction: row; gap: 4px; flex-shrink: 0;
            background: rgba(30,41,59,0.92); padding: 5px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.45); }
        .tool-palette[hidden] { display: none; }
        .tool-palette .tool-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
            background: transparent; border: 1px solid transparent; border-radius: 8px; color: #cbd5e1; cursor: pointer; padding: 0; }
        .tool-palette .tool-btn:hover { background: rgba(255,255,255,0.08); }
        .tool-palette .tool-btn.active { background: var(--shape-active); color: #0f172a; border-color: var(--shape-active); }
        .tool-palette .tool-btn svg { width: 20px; height: 20px; }
        .wand-controls { display: flex; align-items: center; gap: 8px; background: rgba(30,41,59,0.92); padding: 6px 12px; border-radius: 8px; color: var(--text-color); font-size: 0.8rem; }
        .wand-controls[hidden] { display: none; }
        .wand-controls input[type=range] { cursor: pointer; }
        .draw-controls { display: flex; align-items: center; gap: 16px; background: rgba(30,41,59,0.92); padding: 6px 14px; border-radius: 8px; color: var(--text-color); font-size: 0.8rem; position: relative; z-index: 30; }
        .draw-controls[hidden] { display: none; }
        .draw-controls .dc-grp { display: flex; align-items: center; gap: 8px; }
        .draw-controls .dc-grp[hidden] { display: none; }
        .draw-controls input[type=range] { cursor: pointer; }
        .draw-controls .dc-toggle { cursor: pointer; }
        .tool-palette .tool-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.18); margin: 0 3px; align-self: center; }
        @media (max-width: 768px) {
            .workspace { flex-direction: row; gap: 6px; padding: 8px; }
            .tool-palette { flex-direction: column; }
            .tool-palette .tool-sep { width: 22px; height: 1px; margin: 3px 0; }
        }
        /* Hover feedback: thicker but translucent stroke */
        svg .saved-shape.hovered, svg .saved-shape-circle.hovered { stroke: var(--shape-active); stroke-width: calc(3 * var(--vz)); stroke-opacity: 0.45; }
        .props-panel label { margin-top: 6px; margin-bottom: 2px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
        .pp-head { margin-top: 10px; margin-bottom: 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: bold; }
        .media-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
        .pp-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
        .concept-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
        .concept-row input { flex: 1; }
        .pp-line-label { flex: 1; font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .badge-x { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--bg-color); color: var(--danger-color); cursor: pointer; font-size: 0.8rem; line-height: 20px; padding: 0; text-align: center; }
        .badge-x:hover { background: var(--danger-color); color: #fff; }
        .picto-thumb { width: 46px; height: 46px; background: #fff; border-radius: 8px; object-fit: contain; cursor: pointer; padding: 3px; box-sizing: border-box; }
        .picto-wrap { position: relative; display: inline-block; line-height: 0; }
        .picto-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--bg-color); color: var(--danger-color); cursor: pointer; font-size: 0.8rem; line-height: 18px; padding: 0; text-align: center; }
        .picto-x:hover { background: var(--danger-color); color: #fff; }
        .picto-thumb:hover { outline: 2px solid var(--accent-hover); }
        .snd-wrap { display: flex; gap: 6px; }
        .icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid transparent; border-radius: 8px; color: var(--text-color); cursor: pointer; padding: 0; }
        .icon-btn:hover { border-color: var(--accent-hover); }
        .icon-btn.icon-del { color: var(--danger-color); }
        .icon-btn svg { width: 20px; height: 20px; }
        .layers { display: flex; flex-direction: column; gap: 2px; }
        .layer-row { display: flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 4px; background: var(--card-bg); }
        .layer-row.active { background: #3a4d63; outline: 1px solid var(--shape-active); }
        .layer-row .lyr-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); display: flex; cursor: pointer; }
        .layer-row .lyr-icon svg { width: 16px; height: 16px; }
        .layer-row .lyr-name { flex: 1; font-size: 0.74rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .layer-row .lyr-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0 2px; font-size: 0.72rem; line-height: 1; }
        .layer-row .lyr-btn:hover:not(:disabled) { color: var(--text-color); }
        .layer-row .lyr-btn:disabled { opacity: 0.25; cursor: default; }
        .layer-row .lyr-del { color: var(--danger-color); font-size: 0.8rem; }
        .layer-row .lyr-del:hover { color: #ff6b75; }
        /* Tracé list in props */
        .props-hint { color: var(--text-muted); font-size: 0.72rem; margin: 4px 0 8px; line-height: 1.3; }
        .trace-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; background: var(--card-bg); margin-bottom: 4px; }
        .trace-row.active { outline: 1px solid var(--accent-color); }
        .trace-row .trace-lbl { flex: 1; cursor: pointer; font-size: 0.8rem; }
        .trace-row .del { background: transparent; border: none; color: var(--danger-color); cursor: pointer; }
        .shapes-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 200px;
            overflow-y: auto;
            background: rgba(0,0,0,0.2);
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #475569;
        }
        .shape-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--card-bg);
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.85rem;
            border: 1px solid #475569;
        }
        .shape-item:hover {
            border-color: var(--accent-color);
        }
        .shape-item button {
            padding: 2px 6px;
            font-size: 0.8rem;
        }
        /* MODAL générique (utilisé pour "+ Nouvelle œuvre") */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.85);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .modal-backdrop.open { display: flex; }
        .modal-content {
            background: var(--sidebar-bg);
            border: 2px solid var(--accent-color);
            padding: 30px;
            border-radius: 16px;
            max-width: 560px;
            width: 100%;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            max-height: 90vh;
            overflow-y: auto;
        }
        .modal-content h2 {
            color: var(--accent-color);
            margin-top: 0;
            font-size: 1.4rem;
        }
        .modal-content label {
            display: block;
            margin-top: 14px;
            margin-bottom: 6px;
        }
        .modal-content input[type="text"],
        .modal-content input[type="file"],
        .modal-content textarea {
            width: 100%;
            box-sizing: border-box;
            font-family: inherit;
        }
        .modal-content textarea {
            min-height: 80px;
            resize: vertical;
        }
        .modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 20px;
        }
        .new-artwork-btn {
            background: var(--success-color);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            font-size: 0.95rem;
        }
        .new-artwork-btn:hover { opacity: 0.9; }

        /* Questions modal */
        .modal-wide { max-width: 760px; }
        .seq-card {
            background: rgba(0,0,0,0.25);
            border: 1px solid #475569;
            border-radius: 10px;
            padding: 14px;
            margin-top: 12px;
        }
        .seq-header {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 10px;
        }
        .seq-header input {
            flex: 1;
            font-weight: bold;
            background: var(--card-bg);
        }
        .concept-row {
            display: flex;
            gap: 10px;
            align-items: center;
            background: var(--card-bg);
            padding: 8px 10px;
            border-radius: 6px;
            margin-top: 6px;
            font-size: 0.9rem;
        }
        .concept-row img {
            width: 36px; height: 36px;
            object-fit: contain;
            background: #fff;
            border-radius: 4px;
            padding: 2px;
            flex-shrink: 0;
        }
        .concept-row .name { flex: 1; }
        .concept-row .id { color: var(--text-muted); font-size: 0.8rem; }
        .concept-row button { padding: 4px 8px; font-size: 0.8rem; }
        .add-btn-inline {
            background: transparent;
            color: var(--success-color);
            border: 1px dashed var(--success-color);
            margin-top: 8px;
            padding: 6px 10px;
            font-size: 0.85rem;
        }
        .add-btn-inline:hover {
            background: rgba(46, 196, 182, 0.1);
        }
        .dirty-flag {
            color: var(--accent-color);
            font-size: 0.85rem;
            font-weight: bold;
            margin-right: auto;
        }

        /* ARASAAC picker modal — sits ABOVE questions modal */
        #arasaac-modal { z-index: 100000; }
        #arasaac-modal .modal-content { max-width: 640px; }
        .arasaac-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 8px;
            max-height: 320px;
            overflow-y: auto;
            padding: 10px;
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
            margin-top: 10px;
        }
        .arasaac-grid .pic {
            background: #fff;
            border-radius: 6px;
            padding: 4px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.15s;
            position: relative;
        }
        .arasaac-grid .pic:hover { border-color: var(--accent-color); }
        .arasaac-grid .pic.selected { border-color: var(--success-color); }
        .arasaac-grid .pic img {
            width: 100%; height: auto;
            display: block;
        }
        .arasaac-grid .pic .pid {
            position: absolute;
            bottom: 2px;
            right: 4px;
            font-size: 0.65rem;
            color: #666;
            background: rgba(255,255,255,0.85);
            padding: 0 3px;
            border-radius: 3px;
        }
        .arasaac-grid .pic .pname {
            margin-top: 4px;
            font-size: 0.75rem;
            color: #1e293b;
            text-align: center;
            line-height: 1.1;
            max-height: 2.4em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            padding: 0 2px;
        }
        .search-row {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        .search-row input { flex: 1; }

        /* Sound picker */
        #sound-modal { z-index: 100000; }
        .sound-results {
            max-height: 320px;
            overflow-y: auto;
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
            padding: 8px;
            margin-top: 10px;
        }
        .sound-row {
            display: flex; align-items: center; gap: 10px;
            background: var(--card-bg); padding: 8px 10px; border-radius: 6px;
            margin-bottom: 6px;
        }
        .sound-row .play-btn {
            background: var(--accent-color); color: #fff; border: none;
            border-radius: 50%; width: 36px; height: 36px; font-size: 16px;
            cursor: pointer; flex-shrink: 0;
        }
        .sound-row .info { flex: 1; min-width: 0; }
        .sound-row .name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sound-row .meta { color: var(--text-muted); font-size: 0.8rem; }
        .sound-row .pick-btn {
            background: var(--success-color); color: #fff; border: none;
            padding: 6px 12px; border-radius: 6px; font-weight: bold; cursor: pointer;
            flex-shrink: 0;
        }
        .sound-row .pick-btn:disabled { opacity: 0.6; cursor: wait; }
        .current-sound-row {
            display: flex; align-items: center; gap: 8px;
            background: var(--card-bg); padding: 6px 8px; border-radius: 6px;
            margin-top: 6px; font-size: 0.85rem;
        }
        .current-sound-row .play-btn {
            background: var(--accent-color); color: #fff; border: none;
            border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer;
            flex-shrink: 0;
        }
        .current-sound-row .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
        .current-sound-row .del { background: transparent; border: none; color: var(--danger-color); cursor: pointer; padding: 2px 6px; }

        .sidebar-footer {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid #475569;
            font-size: 0.8rem;
            color: var(--text-muted);
            text-align: center;
        }
        .sidebar-footer a { color: var(--text-muted); cursor: pointer; text-decoration: underline; }
        .sidebar-footer a:hover { color: var(--accent-color); }

        /* Tree + properties panels */
        .sidebar { gap: 8px; }
        .sidebar-actions { display: flex; gap: 8px; }
        .sidebar-actions button { flex: 1; }
        .section-label {
            font-size: 0.75rem;
            font-weight: bold;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-top: 6px;
            padding: 4px 0;
            border-bottom: 1px solid #475569;
        }
        .tree-panel {
            flex: 0 0 45vh;
            height: 45vh;
            min-height: 200px;
            overflow-y: auto;
            font-size: 0.9rem;
        }
        .props-panel {
            flex: 0 0 30vh;
            height: 30vh;
            min-height: 180px;
            overflow-y: auto;
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
            padding: 10px;
            font-size: 0.9rem;
        }
        .props-empty { color: var(--text-muted); text-align: center; margin: 4px 0; font-size: 0.85rem; }

        /* Breadcrumb at the top of the properties panel */
        .props-crumb {
            font-size: 0.78rem;
            color: var(--text-muted);
            background: rgba(0, 0, 0, 0.3);
            padding: 6px 8px;
            border-radius: 6px;
            margin: -4px -4px 8px;
            line-height: 1.3;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: center;
        }
        .props-crumb .crumb-item {
            cursor: pointer;
            color: var(--text-color);
            opacity: 0.75;
            transition: opacity 0.15s;
        }
        .props-crumb .crumb-item:hover { opacity: 1; color: var(--accent-color); }
        .props-crumb .crumb-current { color: var(--accent-color); opacity: 1; cursor: default; }
        .props-crumb .crumb-sep { color: var(--text-muted); opacity: 0.5; }
        .props-panel label { display: block; margin-top: 8px; margin-bottom: 4px; font-size: 0.75rem; }
        .props-panel input, .props-panel textarea, .props-panel select {
            width: 100%; box-sizing: border-box; font-family: inherit;
        }
        .props-panel .btn-row { display: flex; gap: 6px; margin-top: 10px; }
        .props-panel .btn-row button { flex: 1; padding: 6px 8px; font-size: 0.8rem; }

        /* Tree node styling */
        .tnode { padding: 2px 0; }
        .tnode-row {
            display: flex; align-items: center; gap: 4px;
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            user-select: none;
        }
        @media (hover: hover) { .tnode-row:hover { background: rgba(255,255,255,0.05); } }
        .tnode-row.selected { background: rgba(251, 133, 0, 0.18); }
        .tnode-row.dragging { opacity: 0.45; }
        .tnode-row.drop-target {
            outline: 2px dashed var(--accent-color, #fb8500);
            outline-offset: -2px;
            background: rgba(251, 133, 0, 0.10);
        }
        .tnode-row .chevron {
            width: 14px;
            font-size: 0.7rem;
            color: var(--text-muted);
            flex-shrink: 0;
            text-align: center;
        }
        .tnode-row .chevron.clickable {
            cursor: pointer;
            /* Bigger touch target on mobile without enlarging the visual */
            padding: 4px 6px;
            margin: -4px -6px;
        }
        @media (hover: hover) { .tnode-row .chevron.clickable:hover { color: var(--accent-color); } }
        .tnode-row .chevron.leaf { color: #475569; }
        .tnode-row .icon { font-size: 0.95rem; flex-shrink: 0; }
        .tnode-row .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .tnode-row .label.muted { color: var(--text-muted); font-style: italic; }
        .tnode-row .meta { color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; }
        .tnode-row .del {
            visibility: hidden;
            background: transparent;
            border: none;
            color: var(--danger-color);
            cursor: pointer;
            padding: 0 4px;
            font-size: 0.8rem;
        }
        @media (hover: hover) { .tnode-row:hover .del { visibility: visible; } }
        /* Touch devices have no hover: a first tap would otherwise be absorbed by the
           sticky :hover state (revealing this ✕), forcing a SECOND tap to register the
           click. Showing it outright on touch removes that visibility change, so the
           first tap opens/selects the node directly. */
        @media (hover: none) { .tnode-row .del { visibility: visible; } }
        .tnode-children { padding-left: 14px; border-left: 1px dashed #334155; margin-left: 8px; }
        .tnode-add {
            color: var(--success-color);
            font-size: 0.8rem;
            cursor: pointer;
            padding: 3px 6px;
            border-radius: 3px;
            display: inline-block;
        }
        .tnode-add:hover { background: rgba(46, 196, 182, 0.1); }
        .dirty-pill {
            display: inline-block;
            background: var(--accent-color);
            color: #fff;
            border-radius: 10px;
            padding: 1px 8px;
            font-size: 0.7rem;
            margin-left: 6px;
        }

        /* ── App header (fixed at top, contains hamburger + title + save) ── */
        body { flex-direction: column; height: 100vh; overflow: hidden; }
        .app-header {
            flex: 0 0 52px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 14px;
            background: var(--sidebar-bg);
            border-bottom: 1px solid #475569;
            z-index: 200;
        }
        .app-header #mobile-hamburger {
            display: none;
            background: transparent;
            border: 1px solid #475569;
            color: var(--text-color);
            width: 36px;
            height: 36px;
            border-radius: 6px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            flex-shrink: 0;
        }
        .app-header .back-link {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            background: transparent;
            border: 1px solid #475569;
            color: var(--text-color);
            width: 36px;
            height: 36px;
            border-radius: 6px;
            font-size: 18px;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.15s, transform 0.15s;
        }
        .app-header .back-link:hover {
            background: var(--card-bg);
            transform: scale(1.05);
            color: var(--accent-color);
        }
        .app-header .app-title {
            font-weight: bold;
            color: var(--accent-color);
            font-size: 1rem;
        }
        .app-header .save-status {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .app-header #status-msg {
            font-size: 0.85rem;
            color: var(--text-muted);
            min-height: 1em;
        }
        .app-header #publish-btn {
            padding: 8px 16px;
            font-weight: bold;
            border-radius: 8px;
            border: none;
            background: var(--success-color);
            color: white;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .app-header #publish-btn:hover:not(:disabled) { background: #25b3a6; }
        .app-header #publish-btn:disabled {
            background: var(--card-bg);
            color: var(--text-muted);
            cursor: default;
        }
        /* Slow pulse while there are unsaved changes. */
        .app-header #publish-btn.pending-flash { animation: publish-pulse 1.8s ease-in-out infinite; }
        @keyframes publish-pulse {
            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,196,182,0.55); }
            50%      { opacity: 0.78; box-shadow: 0 0 0 6px rgba(46,196,182,0); }
        }
        @media (prefers-reduced-motion: reduce) { .app-header #publish-btn.pending-flash { animation: none; } }
        .app-header #cancel-btn {
            padding: 8px 14px;
            font-weight: bold;
            border-radius: 8px;
            border: 1px solid var(--danger-color);
            background: transparent;
            color: var(--danger-color);
            cursor: pointer;
            font-size: 0.9rem;
            margin-right: 6px;
        }
        .app-header #cancel-btn:hover:not(:disabled) { background: var(--danger-color); color: #fff; }
        .app-header #cancel-btn:disabled { border-color: var(--card-bg); color: var(--text-muted); cursor: default; }
        .app-header .dataset-bar { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
        .app-header #ds-select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--accent-color); background: var(--card-bg); color: var(--text-color); font-family: inherit; font-size: 0.85rem; max-width: 220px; }
        .app-header .dataset-bar button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--card-bg); background: var(--card-bg); color: var(--text-color); cursor: pointer; font-size: 0.85rem; padding: 0; }
        .app-header .dataset-bar button:hover:not(:disabled) { border-color: var(--accent-hover); }
        .app-header .dataset-bar button:disabled { opacity: 0.3; cursor: default; }
        @media (max-width: 768px) { .app-header .dataset-bar { margin-left: 6px; } .app-header #ds-select { max-width: 110px; } }
        .app-header .voice-bar { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
        .app-header .voice-bar .voice-ico { font-size: 1rem; opacity: 0.85; }
        .app-header #voice-select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--accent-color); background: var(--card-bg); color: var(--text-color); font-family: inherit; font-size: 0.85rem; max-width: 220px; }
        .app-header #voice-test { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--card-bg); background: var(--card-bg); color: var(--text-color); cursor: pointer; font-size: 0.85rem; padding: 0; }
        .app-header #voice-test:hover:not(:disabled) { border-color: var(--accent-hover); }
        .app-header #voice-test:disabled { opacity: 0.5; cursor: default; }
        .app-header #voice-speed { width: 84px; accent-color: var(--accent-color); cursor: pointer; }
        .app-header .voice-speed-val { font-size: 0.78rem; color: var(--text-muted); min-width: 34px; }
        @media (max-width: 768px) { .app-header .voice-bar { margin-left: 6px; } .app-header #voice-select { max-width: 120px; } .app-header #voice-speed { width: 56px; } .app-header .voice-speed-val { display: none; } }
        .app-main {
            flex: 1;
            display: flex;
            min-height: 0;
            overflow: hidden;
        }

        /* ── Teacher-space tabs (Chrome-style) ───────────────────────── */
        .tab-strip {
            flex: 0 0 auto;
            display: flex;
            gap: 4px;
            padding: 8px 14px 0;
            background: var(--bg-color);            /* darker than panels → inactive tabs recede */
            border-bottom: 1px solid #475569;
        }
        .tab-strip .tab {
            background: transparent;
            border: 1px solid transparent;
            border-bottom: none;
            color: var(--text-muted);
            padding: 9px 20px;
            border-radius: 10px 10px 0 0;
            font-family: inherit;
            font-weight: bold;
            font-size: 0.92rem;
            cursor: pointer;
            position: relative;
            bottom: -1px;                            /* overlap the strip border */
            transition: background 0.15s, color 0.15s;
        }
        .tab-strip .tab:hover { color: var(--text-color); background: rgba(255,255,255,0.06); }
        .tab-strip .tab.active {
            background: var(--sidebar-bg);           /* merges with the content below */
            color: var(--accent-color);
            border-color: #475569;
            border-bottom: 1px solid var(--sidebar-bg);
        }

        /* Tab panels: show only the active concern */
        body[data-tab="appreciation"] [data-tab-panel="organizer"]    { display: none !important; }
        body[data-tab="organizer"]    [data-tab-panel="appreciation"] { display: none !important; }

        /* Organizer placeholder (until the tab content is built) */
        .org-workspace { color: var(--text-muted); }
        .org-placeholder { max-width: 480px; text-align: center; margin: auto; padding: 24px; }
        .org-placeholder h2 { color: var(--accent-color); margin: 0 0 10px; }
        .org-placeholder p { margin: 6px 0; line-height: 1.5; }
        .org-placeholder .muted { font-size: 0.85rem; opacity: 0.7; }

        /* ── Organisateur tab ─────────────────────────────────────────── */
        .org-workspace { align-items: stretch; justify-content: flex-start; overflow-y: auto; padding: 0; }

        /* Sidebar tree leaves (reuse .tnode/.tnode-row from the appreciation tree) */
        #org-tree .org-leaf-img { width: 26px; height: 26px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; margin-right: 4px; flex-shrink: 0; }
        #org-tree .org-grouprow { cursor: default; }
        #org-tree .org-grouprow:hover { background: transparent; }
        .org-tag { font-size: 0.58rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.02em; padding: 1px 5px; border-radius: 99px; flex-shrink: 0; margin-left: 4px; }
        .tag-visible { background: rgba(96,165,250,0.2); color: #93c5fd; }
        .tag-sens { background: rgba(167,139,250,0.2); color: #c4b5fd; }
        .tag-element { background: rgba(52,211,153,0.18); color: #6ee7b7; }

        /* Canvas: in-document editable preview of the kid's view */
        .org-view { max-width: 820px; width: 100%; margin: 0 auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
        .org-view-head { display: flex; align-items: center; gap: 12px; }
        .org-level-switch { display: flex; gap: 2px; background: var(--card-bg); border: 1px solid #475569; border-radius: 10px; padding: 2px; }
        .org-lvl { border: none; background: transparent; color: var(--text-muted); font-weight: 900; font-size: 0.85rem; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
        .org-lvl.active { background: var(--accent-color); color: #fff; }
        .org-stage { text-align: center; }
        .org-stage-img { max-width: 100%; max-height: 38vh; object-fit: contain; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
        .org-qrow { display: flex; align-items: center; gap: 8px; background: var(--sidebar-bg); border: 1px solid #475569; border-radius: 10px; padding: 8px 12px; }
        .org-q-ico { font-size: 1.1rem; }
        .org-q-input { flex: 1; background: var(--bg-color); border: 1px solid #475569; color: var(--text-color); border-radius: 8px; padding: 8px 10px; font-size: 0.95rem; font-family: inherit; }
        .org-q-input:focus { border-color: var(--accent-color); outline: none; }
        .org-cards-group { background: var(--sidebar-bg); border: 1px solid #475569; border-radius: 12px; padding: 10px 12px; }
        .org-cards-head { font-size: 0.8rem; font-weight: bold; color: var(--text-muted); margin-bottom: 8px; }
        .org-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
        .org-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: var(--card-bg); border: 1px solid #475569; border-radius: 10px; }
        .org-card.editable { cursor: pointer; }
        .org-card.editable:hover { border-color: var(--accent-color); }
        .org-card img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
        .org-card-name { font-size: 0.78rem; font-weight: bold; text-align: center; line-height: 1.1; }
        .org-card-tags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
        .org-card-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--danger-color); color: #fff; font-size: 0.72rem; line-height: 1; padding: 0; cursor: pointer; display: none; align-items: center; justify-content: center; }
        .org-card.editable:hover .org-card-x { display: flex; }

        /* Concept folders */
        .org-card-folder { position: absolute; top: -8px; right: 18px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #475569; background: var(--card-bg); font-size: 0.7rem; line-height: 1; padding: 0; cursor: pointer; display: none; align-items: center; justify-content: center; }
        .org-card.editable:hover .org-card-folder { display: flex; }
        .org-card.org-folder .org-card-folder { display: flex; }
        .org-card-folder.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

        /* Unified items: green = in œuvre, red = wrong */
        .org-card.item-correct { background: rgba(46,196,182,0.16); border-color: var(--success-color); }
        .org-card.item-wrong { background: rgba(230,57,70,0.15); border-color: var(--danger-color); }
        .org-toggle { margin-top: 6px; width: 100%; border: 1px solid #475569; background: var(--bg-color); color: var(--text-color); border-radius: 6px; padding: 4px 6px; font-size: 0.72rem; font-weight: bold; cursor: pointer; }
        .org-card.item-correct .org-toggle { color: var(--success-color); border-color: var(--success-color); }
        .org-card.item-wrong .org-toggle { color: var(--danger-color); border-color: var(--danger-color); }
        .org-toggle:hover { filter: brightness(1.25); }
        /* N1 — one bordered panel per kid screen, laid side by side; "+ concept" sits below. */
        .org-screens { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 12px; }
        .org-screen { background: var(--bg-color); border: 1px solid #475569; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
        .org-screen-head { font-size: 0.78rem; font-weight: 900; color: var(--accent-color); letter-spacing: 0.03em; }
        .org-screen-choices { display: flex; gap: 12px; align-items: flex-start; justify-content: center; }
        .org-screen-choices .org-card { width: 108px; }
        .org-screen-choices .org-add { grid-column: auto; align-self: center; }
        /* hover-grow the corner buttons so they're easy to hit */
        .org-card-folder, .org-card-x { transition: transform 0.12s; }
        .org-card-folder:hover, .org-card-x:hover { transform: scale(1.35); z-index: 2; }

        /* Sound merged into the concept modal */
        #sound-modal { z-index: 100001; }   /* above the concept modal */
        .arasaac-sound { margin: 10px 0 0; }
        .arasaac-sound-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
        .arasaac-sound-label { color: var(--text-muted); font-size: 0.85rem; flex: 1; min-width: 80px; }

        /* Sound region trimmer (waveform + draggable handles) */
        .arasaac-sound-trim { margin-top: 8px; }
        .snd-trim { display: flex; flex-direction: column; gap: 6px; }
        .snd-trim-top { display: flex; align-items: center; gap: 10px; }
        .snd-trim-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #475569; background: var(--card-bg); color: var(--text-color); cursor: pointer; font-size: 0.9rem; }
        .snd-trim-play:hover { border-color: var(--accent-color); }
        .snd-trim-time { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
        .snd-trim-wave { position: relative; height: 56px; background: var(--bg-color); border: 1px solid #475569; border-radius: 8px; overflow: hidden; user-select: none; touch-action: none; }
        .snd-trim-canvas { position: absolute; inset: 0; }
        .snd-trim-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--accent-color); background: rgba(2,6,23,0.6); }
        .snd-trim-region { position: absolute; top: 0; bottom: 0; background: rgba(251,133,0,0.22); border-left: 2px solid var(--accent-color); border-right: 2px solid var(--accent-color); pointer-events: none; }
        .snd-trim-handle { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; cursor: ew-resize; z-index: 2; }
        .snd-trim-handle::after { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 4px; background: var(--accent-color); border-radius: 2px; }
        .snd-trim-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; display: none; pointer-events: none; }
        .org-snd-dot { font-size: 0.78rem; opacity: 0.85; }
        .tnode-action.snd-indicator { cursor: pointer; background: transparent; border-color: transparent; color: var(--accent-color); }
        .org-folder { grid-column: 1 / -1; align-items: stretch; }
        .org-folder-kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; width: 100%; }
        .org-subchip { position: relative; display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 4px; background: var(--bg-color); border: 1px solid #475569; border-radius: 99px; cursor: pointer; }
        .org-subchip img { width: 26px; height: 26px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
        .org-subchip-name { font-size: 0.78rem; font-weight: bold; }
        .org-subchip-x { border: none; background: transparent; color: var(--danger-color); cursor: pointer; font-size: 0.7rem; padding: 0 2px; }
        .org-subadd { background: transparent; border: 1px dashed #475569; color: var(--text-muted); border-radius: 99px; padding: 5px 12px; cursor: pointer; font-weight: bold; font-size: 0.8rem; }
        .org-subadd:hover { border-color: var(--accent-color); color: var(--text-color); }

        /* Card sound + duration */
        .org-card-sound { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
        .org-soundbtn { width: 24px; height: 24px; border: 1px solid #475569; background: var(--bg-color); color: var(--text-muted); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
        .org-soundbtn svg { width: 14px; height: 14px; }
        .org-soundbtn.has-sound { color: var(--accent-color); border-color: var(--accent-color); }
        .org-dur { width: 44px; background: var(--bg-color); border: 1px solid #475569; color: var(--text-color); border-radius: 6px; padding: 2px 4px; font-size: 0.75rem; }
        .org-dur-label { font-size: 0.72rem; color: var(--text-muted); }

        /* Folder rows in the organizer sidebar tree */
        #org-tree .org-folderrow .label { color: var(--accent-color); }
        #org-tree .org-subrow { margin-left: 20px; }

        /* Organizer sidebar: the tree fills the whole height (footer pinned bottom) */
        body[data-tab="organizer"] .sidebar [data-tab-panel="organizer"] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
        body[data-tab="organizer"] #org-tree.tree-panel { flex: 1 1 auto; height: auto; min-height: 0; }

        /* Propriétés merged into the tree (concept modal / inline question / shapes
           in tree / artwork modal) → hide the panel; the tree fills the sidebar. */
        .section-label[data-section="props"], #props { display: none !important; }
        body[data-tab="appreciation"] .sidebar > [data-tab-panel="appreciation"]:not(.sidebar-actions) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
        body[data-tab="appreciation"] #tree.tree-panel { flex: 1 1 auto; height: auto; min-height: 0; }

        /* Add-concept row + folder toggle in the picker modal */
        #org-tree .org-addrow { cursor: pointer; color: var(--accent-color); font-weight: bold; }
        #org-tree .org-addrow:hover { background: rgba(255,255,255,0.05); }
        #org-tree .org-addrow-label { font-size: 0.85rem; }
        .arasaac-folder { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: bold; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-color) !important; margin: 4px 0; }
        .arasaac-folder input { width: auto; }
        .arasaac-taxo { margin: 8px 0; }
        .arasaac-taxo-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .taxo-lbl { font-size: 0.85rem; color: var(--text-muted); font-weight: bold; }
        .taxo-cat { display: inline-flex; gap: 2px; background: var(--card-bg); border: 1px solid #475569; border-radius: 8px; padding: 2px; }
        .taxo-cat button { background: transparent; border: none; color: var(--text-muted); padding: 4px 12px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.8rem; }
        .taxo-cat button.active { background: var(--accent-color); color: #fff; }
        #arasaac-elem { padding: 5px 8px; width: auto; }
        #org-tree .org-folder-ico { margin-right: 2px; flex-shrink: 0; }

        /* Inline-editable tree label (single-click) */
        #org-tree span.org-rowlabel { cursor: text; border: 1px solid transparent; border-radius: 4px; padding: 1px 4px; }
        #org-tree span.org-rowlabel:hover { border-color: #475569; }
        #org-tree input.org-rowlabel { background: var(--bg-color); border: 1px solid var(--accent-color); color: var(--text-color); font: inherit; border-radius: 4px; padding: 1px 4px; min-width: 0; outline: none; }
        .org-add { grid-column: 1 / -1; justify-self: start; background: transparent; border: 1px dashed #475569; color: var(--text-muted); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: bold; }
        .org-add:hover { border-color: var(--accent-color); color: var(--text-color); }
        .org-empty { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
        .org-placeholder { color: var(--text-muted); }

        /* ✓ / ✗ status badge on a card */
        .org-card-badge { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 900; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
        .badge-correct { background: var(--success-color); }
        .badge-wrong { background: var(--danger-color); }

        /* N3 — the kid's evaluation table, editable (same UI as the organizer app). */
        .eval-table { border: 1px solid #475569; border-radius: 12px; overflow: hidden; }
        .eval-head, .eval-row { display: grid; grid-template-columns: 1fr 78px 78px 78px; align-items: center; }
        .eval-head { background: #0c1018; border-bottom: 2px solid #475569; }
        .eval-head .hcell { padding: 8px 6px; border-right: 1px solid #475569; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); text-align: center; }
        .eval-head .hcell:last-child { border-right: none; }
        .eval-head .hcell.left { align-items: flex-start; justify-content: center; color: var(--text-color); font-size: 0.74rem; }
        .eval-head .hcell img { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
        .eval-row { border-bottom: 1px solid #475569; min-height: 74px; }
        .eval-row:last-child { border-bottom: none; }
        .eval-row:nth-child(odd) { background: var(--card-bg); }
        .eval-subject { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-right: 1px solid #475569; height: 100%; position: relative; }
        .eval-subject.editable { cursor: pointer; }
        .eval-subject.editable:hover { background: rgba(255,255,255,0.04); }
        .eval-subject img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; flex-shrink: 0; }
        .eval-subject span { font-size: 0.9rem; font-weight: 900; color: var(--text-color); line-height: 1.15; }
        .eval-del-x { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--danger-color); color: #fff; font-size: 0.7rem; line-height: 1; padding: 0; cursor: pointer; display: none; align-items: center; justify-content: center; }
        .eval-subject.editable:hover .eval-del-x { display: flex; }
        .eval-cell { border-right: 1px solid #475569; display: flex; align-items: center; justify-content: center; height: 100%; }
        .eval-cell:last-child { border-right: none; }
        .check-btn { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid #475569; background: transparent; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s, border-color 0.18s, transform 0.15s; color: var(--text-muted); }
        .check-btn:hover:not(:disabled) { transform: scale(1.12); border-color: var(--accent-color); }
        .check-btn:disabled { cursor: default; opacity: 0.4; }
        .check-btn.selected-yes { background: rgba(46,196,182,0.2); border-color: var(--success-color); color: var(--success-color); }
        .check-btn.selected-no  { background: rgba(230,57,70,0.2);  border-color: var(--danger-color);  color: var(--danger-color); }
        .org-n3-adds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

        /* N5 — the kid's question table, editable (same UI as the organizer app).
           The question word per row is an editable input (per-artwork override). */
        .q5-table { border: 1px solid #475569; border-radius: 12px; overflow: hidden; }
        .q5-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; border-bottom: 1px solid #475569; min-height: 88px; }
        .q5-row:last-child { border-bottom: none; }
        .q5-row:nth-child(odd) { background: var(--card-bg); }
        .q5-word { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-right: 1px solid #475569; height: 100%; justify-content: center; }
        .q5-word img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; }
        .q5-word-input { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px; text-align: center; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 4px; }
        .q5-word-input::placeholder { color: inherit; opacity: 0.65; }
        .q5-word-input:hover { border-color: #475569; }
        .q5-word-input:focus { outline: none; border-color: var(--accent-color); background: var(--bg-color); }
        .q5-answer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-right: 1px solid #475569; height: 100%; }
        .q5-ans { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 70px; cursor: grab; }
        .q5-ans:active { cursor: grabbing; }
        .q5-ans.dragging { opacity: 0.4; }
        .q5-answer.drop-target { background: rgba(58,160,255,0.12); outline: 2px dashed var(--accent-color); outline-offset: -3px; border-radius: 6px; }
        .q5-ans-name { font-size: 0.66rem; font-weight: bold; color: var(--text-muted); text-align: center; line-height: 1.05; }
        .q5-ans-x { position: absolute; top: -8px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--danger-color); color: #fff; font-size: 0.7rem; line-height: 1; padding: 0; cursor: pointer; display: none; align-items: center; justify-content: center; }
        .q5-ans:hover .q5-ans-x { display: flex; }
        .ans-slot { width: 60px; height: 60px; background: var(--bg-color); border: 3px dashed #4a5f7a; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #4a5f7a; cursor: pointer; transition: border-color 0.2s, transform 0.15s, background 0.2s; flex-shrink: 0; }
        .ans-slot:hover { border-color: var(--accent-color); transform: scale(1.05); }
        .ans-slot.filled { border-style: solid; border-color: var(--success-color); background: #0c1018; }
        .ans-slot.filled img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; }

        /* Editable tag chips on a card */
        .org-tag.chip { cursor: pointer; border: 1px solid transparent; font-family: inherit; }
        .org-tag.chip:hover { filter: brightness(1.25); }
        .tag-none { background: rgba(148,163,184,0.18); color: var(--text-muted); }

        /* Appreciation tree: inline picto button + sound action on a concept */
        .icon-picto { padding: 0; border: none; background: transparent; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
        .icon-picto img { width: 26px; height: 26px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; }
        .icon-picto:hover img { outline: 2px solid var(--accent-color); }
        .tnode-action { margin-left: 4px; width: 26px; height: 26px; border: 1px solid #475569; background: var(--card-bg); color: var(--text-muted); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .tnode-action { width: 30px; height: 30px; padding: 0; }
        .tnode-action svg { width: 19px; height: 19px; display: block; }
        #org-tree .tnode-action { color: var(--text-color); }
        .tnode-del-x { border: none; background: transparent; color: var(--danger-color); cursor: pointer; font-size: 0.95rem; padding: 0 6px; line-height: 1; flex-shrink: 0; opacity: 0.75; transition: transform 0.12s, opacity 0.12s; }
        .tnode-del-x:hover { opacity: 1; transform: scale(1.25); }
        .tnode-inline-edit { flex: 1; min-width: 0; background: var(--bg-color); border: 1px solid var(--accent-color); color: var(--text-color); font: inherit; border-radius: 4px; padding: 2px 6px; outline: none; }
        .tnode-action:hover { color: var(--text-color); border-color: var(--accent-color); }
        .tnode-action.has-sound { color: var(--accent-color); border-color: var(--accent-color); }

        /* ── Mobile (drawer for tree + props fixed at bottom) ─────────── */
        #mobile-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.55);
            z-index: 900;
        }
        #mobile-overlay.open { display: block; }

        @media (max-width: 768px) {
            .app-header #mobile-hamburger { display: block; }
            .app-header .app-title { font-size: 0.9rem; }
            .app-header #publish-btn, .app-header #cancel-btn { padding: 6px 10px; font-size: 0.8rem; }

            .sidebar {
                position: fixed;
                top: 52px;
                left: -340px;
                width: 86%;
                max-width: 320px;
                height: calc(100% - 52px);
                z-index: 1000;
                transition: left 0.22s ease;
                padding-top: 14px;
                padding-bottom: 0;
                overflow-y: auto;
            }
            .sidebar.open { left: 0; }

            .props-panel {
                position: fixed;
                left: 0; right: 0; bottom: 0;
                width: 100%;
                max-height: 42vh;
                background: var(--sidebar-bg);
                border-top: 2px solid var(--accent-color);
                padding: 10px 14px 14px;
                margin: 0;
                box-shadow: 0 -4px 18px rgba(0,0,0,0.5);
                z-index: 50;
                box-sizing: border-box;
            }
            .section-label[data-section="props"] { display: none; }

            .workspace {
                flex: 1;
                padding: 10px;
                padding-bottom: calc(42vh + 10px);
                min-height: 0;
            }
            .image-container img {
                max-width: 96vw;
                max-height: calc(100vh - 52px - 42vh - 30px);
            }
            .sidebar-footer { margin-bottom: 20px; }
        }