:root{--bg:#0b0f14;--panel:#111621;--muted:#6b7280;--text:#e5e7eb;--accent:#3b82f6;--card:#0f1522;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;--br:12px}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Arial,sans-serif}
#root{display:grid;grid-template-columns:1fr 520px;gap:16px;height:100vh;padding:16px;box-sizing:border-box}
#unity-container{position:relative;border-radius:var(--br);overflow:hidden;background:#000;box-shadow:0 6px 24px rgba(0,0,0,.35);width:100%;height:100%;display:flex}
#unity-canvas{width:100%;height:auto;aspect-ratio:16/9;max-height:100%;background:#000;display:block}
#unity-footer{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));padding:6px 8px;display:flex;align-items:center;gap:8px}
#unity-build-title{margin-left:auto;font-weight:600;color:#cbd5e1}
#side{display:flex;flex-direction:column;gap:12px;min-height:0}
.card{background:var(--panel);border-radius:var(--br);padding:14px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.card h3{margin:0 0 10px;font-size:14px;color:#cbd5e1;letter-spacing:.3px}
.grid{display:flex;flex-direction:column;gap:12px}
.row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:8px}
label{font-size:12px;color:var(--muted)}
select,.btn{width:100%;padding:10px;border-radius:10px;border:1px solid #1f2937;background:#0e1421;color:var(--text);outline:none}
select:disabled{opacity:.6;cursor:not-allowed}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:white;border:none;font-weight:600}
.btn.secondary{background:#1f2937}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn:active{transform:translateY(1px)}
.actions{display:flex;gap:8px;margin-top:8px}
.console{flex:1;min-height:120px;max-height:40vh;overflow:auto;background:#0a0f19;border:1px solid #1f2937;border-radius:10px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#console-card{display:flex;flex-direction:column;flex:1;min-height:0}
.log{white-space:pre-wrap;margin:0}
.log.warn{color:var(--warn)}.log.err{color:var(--err)}.log.ok{color:var(--ok)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pill{padding:4px 8px;border-radius:999px;background:#0e1421;border:1px solid #1f2937;font-size:12px}
.kv{display:flex;gap:6px;align-items:center}.kv b{font-weight:600;color:#cbd5e1}
.muted{color:var(--muted);margin-top:6px}
.inline{display:flex;gap:8px;align-items:center}
.spinner{width:14px;height:14px;border:2px solid #334155;border-top-color:#94a3b8;border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1100px){#root{grid-template-columns:1fr}#side{order:-1}}

/* Inputs (match select/.btn look & feel) */
.input, #ss-width, #ss-height, #ss-compression {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #1f2937;
    background: #0e1421;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
}

#ss-width, #ss-height {
    max-width: 120px;
}

/* Console: un peu moins haute + redimensionnable */
#console {
    max-height: 32vh; /* au lieu de 40vh */
    min-height: 80px; /* un peu plus compact */
    resize: vertical; /* l’utilisateur peut l’agrandir */
}

/* Blocking modal */
.modal {
    display: none; /* toggled by JS */
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.6);
    align-items: center;
    justify-content: center;
}

    .modal[aria-hidden="false"] {
        display: flex;
    }

.modal-content {
    background: #0f1522;
    border: 1px solid #1f2937;
    border-radius: 12px;
    width: min(420px, 92vw);
    padding: 18px;
    box-shadow: 0 12px 36px rgba(0,0,0,.35);
    text-align: center;
}

.progress-container {
    width: 100%;
    height: 22px;
    background: #0e1421;
    border: 1px solid #1f2937;
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #66b3ff);
    transition: width .25s ease;
}
.row.check-group {
    display: flex;
    flex-wrap: nowrap; /* empêche de passer à la ligne */
    gap: 20px; /* espace entre les cases */
    align-items: center;
}

    .row.check-group .pill {
        white-space: nowrap; /* évite que le texte coupe */
    }