/**
 * This file is part of PmbH2OPen.
 *
 * PmbH2OPen - Interface pedagogique pour explorer le moteur de template h2o-php
 *
 * @author    Neveu Gregor <contact.neveugregor@proton.me>
 * @copyright 2025 Neveu Gregor
 * @license   CeCILL-B Free Software License Agreement
 *
 * This software is governed by the CeCILL-B license under French law and
 * abiding by the rules of distribution of free software. You can use,
 * modify and/or redistribute the software under the terms of the CeCILL-B
 * license as circulated by CEA, CNRS and INRIA at http://www.cecill.info.
 */*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #fff;--color-bg-alt: #f5f5f5;--color-border: #e0e0e0;--color-border-dark: #ccc;--color-text: #333;--color-text-muted: #777;--color-accent: #1976D2;--color-accent-hover: #1565C0;--color-danger: #c00;--color-danger-bg: #fff5f5;--color-active-bg: #e3f2fd;--color-active-border: #90caf9;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Fira Mono", "Consolas", "Courier New", monospace;--sidebar-width: 220px}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);font-size:14px;line-height:1.5}.app-layout{display:grid;grid-template-columns:var(--sidebar-width) 1fr;height:100vh;overflow:hidden}.sidebar{background:var(--color-bg-alt);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow-y:auto}.main-area{display:flex;flex-direction:column;overflow:hidden}.main-section{flex:1;border-bottom:1px solid var(--color-border);overflow:auto;display:flex;flex-direction:column}.main-section:last-child{border-bottom:none}.section-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--color-border);background:var(--color-bg-alt);flex-shrink:0}.section-label{text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--color-text-muted)}.btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:4px;border:1px solid var(--color-border-dark);background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:13px;cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--color-bg-alt)}.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn-danger{background:var(--color-danger-bg);color:var(--color-danger);border-color:var(--color-danger)}.btn-danger:hover{background:#fce8e8}.btn-add{border-style:dashed;color:var(--color-accent);border-color:var(--color-accent);background:transparent}.btn-add:hover{background:var(--color-active-bg)}.input,.select{font-family:var(--font-sans);font-size:13px;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border-dark);border-radius:4px;padding:4px 8px;outline:none;transition:border-color .15s}.input:focus,.select:focus{border-color:var(--color-accent)}.select{cursor:pointer}.dataset-item{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;cursor:pointer;border-left:3px solid transparent;transition:background .1s,border-color .1s}.dataset-item:hover{background:var(--color-bg)}.dataset-item.active{background:var(--color-active-bg);border-left-color:var(--color-active-border)}.delete-btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:3px;line-height:1;transition:color .15s,background .15s}.delete-btn:hover{color:var(--color-danger);background:var(--color-danger-bg)}.property-row{display:flex;align-items:center;gap:8px;padding:4px 12px}.property-children{padding-left:24px;border-left:2px solid var(--color-border);margin-left:16px}.collapse-toggle{flex:1;font-size:.7rem;color:var(--color-text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:4px}.collapse-toggle:hover{color:var(--color-accent)}.collapse-arrow{display:inline-block;font-size:.55rem;transition:transform .15s ease;transform:rotate(90deg)}.collapse-arrow.collapsed{transform:rotate(0)}.render-iframe{border:1px solid var(--color-border);border-radius:4px;width:100%;flex:1;display:block}.render-error{color:var(--color-danger);font-family:var(--font-mono);font-size:12px;padding:12px;background:var(--color-danger-bg);border-radius:4px;white-space:pre-wrap}