:root{
    --bg:#05060a; --panel:#0e0f14; --muted:#b3b7c2; --border:#232634; --accent:#7c8cff;
    --c1:#ffd166; --c2:#66e3ff; --c3:#ff66c4; --c4:#9cff66;
}
html,body{height:100%;margin:0;background:#000;color:#e6e8ee;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
#app{position:fixed;inset:0;overflow:hidden;}
canvas{display:block;}

.panel{
    position:absolute;left:50%;transform:translateX(-50%);top:12px;width:min(1100px,calc(100% - 24px));
    background: color-mix(in srgb, var(--panel) 75%, transparent);
    backdrop-filter: blur(6px);
    border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35);
    z-index:10;transition:opacity .3s ease, transform .3s ease;
}
.panel.hidden{opacity:0;transform:translateX(-50%) translateY(-10px);pointer-events:none;}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 8px;}
.panel-title{display:flex;align-items:center;gap:14px;}
.title{font-weight:600;}
.legend{display:flex;align-items:center;gap:10px;}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#d8dbff;background:#0c0f1a;border:1px solid #2a2d3a;padding:3px 8px;border-radius:999px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 6px currentColor;}
.c1{color:var(--c1)} .c2{color:var(--c2)} .c3{color:var(--c3)} .c4{color:var(--c4)}
.muted{color:var(--muted);font-size:12px;}

.row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px;}
.card{border:1px solid var(--border);border-radius:12px;padding:8px;background:#11131a88;}
.card h3{margin:0 0 6px;font-size:13px;color:#d8dbff;}
label{font-size:11px;color:var(--muted);display:grid;grid-template-columns:120px 1fr;align-items:center;gap:8px;}
input[type=number]{width:100%;box-sizing:border-box;background:#0b0d15;color:#e6e8ee;border:1px solid #2a2d3a;border-radius:8px;padding:6px 8px;margin:2px 0 6px;}
input[type=range]{width:100%}
button{cursor:pointer;border:1px solid #2a2d3a;background:#121523;color:#e8eaff;border-radius:10px;padding:8px 10px;}
button:hover{border-color:#3a3f55;background:#171b2d}
.btn-accent{background:#2a2fff;border-color:#464bff}
.btn-accent:hover{background:#353bff}

.btn-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.preset-col{display:flex;flex-direction:column;gap:6px;}

.footer{position:absolute;right:10px;bottom:10px;color:#9196a9;font-size:11px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.badge{background:#0c0f1acc;border:1px solid #2a2d3a;padding:4px 8px;border-radius:8px;}
.jsonbox{width:100%;min-height:96px;resize:vertical;box-sizing:border-box;background:#0b0f19;color:#e6e8ee;border:1px solid #2a2d3a;border-radius:8px;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.testlog{background:#0c0f1a;border:1px solid #2a2d3a;padding:6px 8px;border-radius:8px;max-height:160px;overflow:auto;}

#togglePanel{position:absolute;top:10px;right:10px;z-index:20;background:#121523cc;border:1px solid #2a2d3a;color:#e6e8ee;border-radius:8px;padding:6px 10px;}
#togglePanel:hover{background:#171b2d}

@media (max-width:1200px){
    .row{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
    .row{grid-template-columns:1fr;}
    label{grid-template-columns:100px 1fr;}
}