html, body {
    margin:0;
    padding:0;
    height:100%;
    font-family:Arial;
}

body {
    display:flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
}

/* Header */
.header-bar {
    display:flex;
    align-items:center;
    padding:5px 10px;
    background:#007bff;
    color:#fff;
}

.toggle-btn {
    cursor:pointer;
    padding:5px 10px;
    background:#0056b3;
    border-radius:3px;
    margin-right:10px;
}

.title {
    font-weight:bold;
    font-size:16px;
}

.actions {
    margin-left:auto;
    display:flex;
    gap:8px;
}

/* Bouton verre */
.glass-btn {
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color:#fff;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
}

.glass-btn:hover {
    background: rgba(255,255,255,0.35);
}

/* Bouton Run spécifique (vert glass) */
.btn {
    margin-top:10px;
    background: #007bff; 
    border: 1px solid rgba(76,175,80,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, transform 0.1s;
}

/* Bouton Run spécifique (vert glass) */
.run-btn {
    background: #45a049; /* vert semi-transparent */
    border: 1px solid rgba(76,175,80,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, transform 0.1s;
}

.run-btn:hover {
    background: rgba(76, 175, 80, 0.6);
}

.run-btn:active {
    transform: scale(0.97);
}


/* Main */
.main {
    flex:1;
    display:flex;
    overflow:hidden;
}

.sidebar {
    width:220px;
    padding:10px;
    border-right:1px solid #ccc;
    background:#f7f7f7;
    overflow:auto;
    transition:0.3s;
}

.sidebar.hidden {
    width:0;
    padding:0;
    border:none;
}

.editor-wrapper {
    flex:1;
    display:flex;
}

.editor {
    width:50%;
    display:flex;
    flex-direction:column;
}

.editor textarea {
    flex:1;
    width:100%;
    resize:none;
    border:none;
    outline:none;
    font-family:monospace;
    font-size:14px;
    padding:10px;
}

.preview {
    width:50%;
    border-left:1px solid #ccc;
}

.preview iframe {
    width:100%;
    height:100%;
    border:none;
}