*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#0b1020;color:#e8ecf1}
#app{display:flex;flex-direction:column;min-height:100vh}
header{padding:20px 24px;background:linear-gradient(90deg,#0b1020 0%,#14213d 100%);border-bottom:1px solid rgba(255,255,255,0.07)}
h1{margin:0;font-size:22px;letter-spacing:0.5px}
.tagline{margin:6px 0 0;color:#b7c3d7;font-size:12px}
main{display:flex;gap:16px;padding:16px;flex:1;min-height:0}
#canvas-container{flex:1;min-height:70vh;border-radius:16px;overflow:hidden;position:relative;background:#0a0f1a}
#panel{width:360px;max-width:40vw;background:#0d1428;border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:14px;overflow:auto}
.section{margin-bottom:16px;padding:12px;border:1px solid rgba(255,255,255,0.06);border-radius:12px;background:rgba(255,255,255,0.02)}
.intent-row{display:flex;gap:8px;margin-top:8px}
#intent{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.15);background:#0b1326;color:#e8ecf1}
#intentBtn{padding:10px 14px;border-radius:10px;background:#2a9d8f;color:#061017;border:none;cursor:pointer}
#intentBtn:hover{filter:brightness(1.05)}
#gui .dg{max-width:100%}
#suggestions{margin-top:10px;font-size:12px;color:#b7c3d7}
#stateList{list-style:none;margin:0;padding:0;font-size:12px;color:#cfe4ff}
#stateList li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,0.06)}
footer{padding:10px 16px;color:#a0aec0;border-top:1px solid rgba(255,255,255,0.07)}
.hint{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,0.45);padding:8px 10px;border-radius:10px;color:#cfe4ff;font-size:12px}