:root{--or:#d4af37;--noir:#110f19;--sarcelle:#508289;--vert:#059669}
body{margin:0;background:var(--noir);color:#cbd5e1;font-family:'Segoe UI',sans-serif}
header{background:#1a1829;border-bottom:2px solid var(--or);padding:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{background:#1e1b2e;border:1px solid var(--sarcelle);color:#cbd5e1;padding:6px 12px;border-radius:6px;cursor:pointer;font-weight:bold}
.btn.actif{background:var(--or);color:var(--noir)}
.main{display:flex;height:calc(100vh - 60px)}
.left{width:300px;background:#1a1829;border-right:1px solid #334155;overflow-y:auto;padding:10px}
.right{flex:1;background:radial-gradient(ellipse at center,#1e293b,#110f19);position:relative;display:flex;flex-direction:column;padding:10px}
.canvas-wrap{flex:1;background:white;border-radius:8px;overflow:auto;border:2px solid #334155}
canvas{width:2000px;height:900px;display:block}
.card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:8px;margin-bottom:6px;cursor:pointer}
.card.actif{border-color:var(--or);background:rgba(212,175,55,0.15)}
.badge{font-size:0.65rem;background:#334155;padding:2px 6px;border-radius:10px}
.detail{position:absolute;right:12px;top:12px;width:340px;background:rgba(17,15,25,0.96);border:2px solid var(--or);border-radius:10px;padding:12px;z-index:5}