:root { 
    --bg: #f2ede4;          /* Soft Desert Sand */
    --panel: #fcfaf7;       /* Bleached Bone / Sunlight */
    --gold: #d46a43;        /* Burnt Orange (Primary Accent) */
    --cyan: #3b8a8a;        /* Aged Turquoise (Secondary Accent) */
    --err: #c04040;         /* Red Clay */
    --void: #110f0e;        /* Deep Black for Stage */
    --text: #4a4036;        /* Dark Earth / Charcoal */
    --sel: #e8e1d5;         /* Selection Highlight */
    --border: #d6cdc4;      /* Dust / Stone */
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Space Mono', monospace; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* MAIN LAYOUT */
#main-layout { flex: 1; display: flex; overflow: hidden; }

/* RACK (LEFT) */
#rack-panel { width: 280px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 10; box-shadow: 2px 0 20px rgba(0,0,0,0.05); }

.brand { padding: 40px 20px; font-family: 'Cinzel', serif; font-size: 36px; text-align: center; border-bottom: 1px solid var(--border); color: var(--gold); letter-spacing: 8px; font-weight: 700; }
.brand span { display: block; font-size: 13px; font-family: 'Space Mono'; color: #8f8074; margin-top: 15px; letter-spacing: 1px; text-transform: lowercase; font-weight: 700; line-height: 1.4; }

.rack-section { padding: 15px; }
.rack-header { font-size: 11px; font-weight: 700; color: #aaa095; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; letter-spacing: 1px; text-transform: uppercase; }
.rack-header button { background: none; border: none; color: var(--cyan); cursor: pointer; font-weight: bold; font-size: 14px; }

.layer-item { background: #fff; border: 1px solid var(--border); padding: 12px; margin-bottom: 6px; cursor: pointer; display: flex; align-items: center; transition: 0.2s; font-size: 11px; font-weight: bold; color: var(--text); border-radius: 3px; }
.layer-item:hover { border-color: var(--cyan); background: #fdfdfd; }
.layer-item.active { border-color: var(--gold); background: #fff; color: var(--gold); box-shadow: 0 4px 10px rgba(212, 106, 67, 0.1); }
.layer-item.vis { border-left: 5px solid var(--cyan); }
.layer-item.aud { border-left: 5px solid var(--gold); }

.layer-controls { margin-left: auto; display: flex; gap: 8px; }
.layer-btn { font-size: 9px; color: #c9c0b6; cursor: pointer; border:none; background:none; font-weight:bold; text-transform: uppercase; }
.layer-btn:hover { color: var(--text); }
.layer-btn.on { color: var(--cyan); }
.layer-btn.mute { color: #ddd; }

.global-btn { width: 100%; background: #fff; border: 1px solid var(--border); padding: 14px; margin-top: 8px; color: var(--text); font-size: 11px; cursor: pointer; text-align: left; font-family: 'Space Mono'; font-weight: bold; transition: 0.2s; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; }
.global-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* STAGE (CENTER) */
#stage-area { flex: 1; background: var(--void); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
#stage-wrap { box-shadow: 0 0 100px rgba(0,0,0,0.5); width: 100%; height: 100%; transition: all 0.3s; background: #000; }
canvas { display: block; width: 100%; height: 100%; }

/* EDITOR (BOTTOM) */
#editor-panel { height: 160px; background: var(--panel); border-top: 1px solid var(--border); display: flex; flex-direction: column; z-index: 20; padding: 20px 30px; box-shadow: 0 -5px 25px rgba(0,0,0,0.05); }

.editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11px; color: #aaa095; font-weight: bold; text-transform: uppercase; }
#editor-title { color: var(--gold); letter-spacing: 1px; }
.editor-tools button { background: #fff; border: 1px solid var(--border); color: var(--text); font-size: 10px; padding: 8px 15px; cursor: pointer; font-family: 'Space Mono'; margin-left: 10px; font-weight: bold; transition: 0.2s; border-radius: 3px; }
.editor-tools button:hover { border-color: var(--cyan); color: var(--cyan); }

.flux-wrap { flex: 1; display: flex; background: #fff; border: 1px solid var(--border); align-items: center; padding: 0 20px; position: relative; border-radius: 3px; }
.flux-wrap:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(59, 138, 138, 0.1); }
.flux-label { color: var(--gold); font-weight: bold; margin-right: 20px; font-size: 18px; font-family: 'Cinzel'; }
#code-input { flex: 1; background: transparent; border: none; color: #333; font-family: 'Space Mono'; font-size: 15px; height: 100%; outline: none; font-weight: 500; }
#syntax-status { font-size: 11px; color: var(--cyan); font-weight: bold; }
#syntax-status.err { color: var(--err); }

/* LIBRARY OVERLAY */
#library-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(74, 64, 54, 0.8); z-index: 100; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
#library-panel { width: 700px; height: 600px; background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.3); border-radius: 6px; overflow: hidden; }
.lib-header { padding: 25px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; font-weight: bold; color: var(--gold); font-family: 'Cinzel'; font-size: 24px; letter-spacing: 3px; background: #fff; }
.lib-header button { background: none; border: none; color: #aaa095; cursor: pointer; font-family: 'Space Mono'; font-weight: bold; font-size: 14px; }

.lib-tabs { display: flex; background: #eee7e0; }
.lib-tabs button { flex: 1; background: transparent; border: none; padding: 15px; color: #8f8074; cursor: pointer; font-family: 'Space Mono'; font-weight: bold; transition: 0.2s; border-bottom: 4px solid transparent; }
.lib-tabs button.active { background: var(--panel); color: var(--gold); border-bottom-color: var(--gold); }

.lib-content { flex: 1; overflow-y: auto; padding: 20px; background: var(--panel); }
.lib-item { padding: 15px 20px; border-bottom: 1px solid #eee; cursor: pointer; transition: 0.2s; background: #fff; margin-bottom: 8px; border-radius: 4px; border: 1px solid var(--border); }
.lib-item:hover { transform: translateX(8px); border-color: var(--cyan); }
.lib-item strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 5px; }
.lib-item small { color: #aaa095; font-size: 10px; font-family: 'Space Mono'; }

/* TOAST */
#toast { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; padding: 12px 30px; font-size: 12px; font-weight: bold; opacity: 0; pointer-events: none; transition: 0.4s; z-index: 1000; border-radius: 30px; box-shadow: 0 10px 30px rgba(212, 106, 67, 0.3); letter-spacing: 2px; text-transform: uppercase; }

.active-audio { animation: pulse-gold 2s infinite; color: var(--gold) !important; }
@keyframes pulse-gold { 0% {opacity: 1;} 50% {opacity: 0.5;} 100% {opacity: 1;} }

.recording { background: var(--err) !important; color: #fff !important; border-color: var(--err) !important; animation: pulse-rec 1s infinite; }
@keyframes pulse-rec { 0% {box-shadow: 0 0 0 0 rgba(192, 64, 64, 0.4);} 70% {box-shadow: 0 0 0 10px rgba(192, 64, 64, 0);} 100% {box-shadow: 0 0 0 0 rgba(192, 64, 64, 0);} }