app/static/styles.css

*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:#0b1020;color:#e5e7eb}
header{padding:24px 20px;border-bottom:1px solid #1f2937;background:linear-gradient(180deg,#0b1020,#0b1020)}
h1{margin:0 0 6px 0;font-size:22px}
.sub{margin:0;color:#9ca3af}
main.grid{display:grid;gap:14px;grid-template-columns:1fr; padding:14px}
@media(min-width:1000px){main.grid{grid-template-columns:280px 1fr 420px}}
.panel{border:1px solid #1f2937;border-radius:14px;padding:12px;background:#0f172a}
.panel h2{margin:0 0 10px 0;font-size:16px}
.row{display:flex;gap:10px;align-items:center;margin-bottom:10px}
button{background:#111827;color:#e5e7eb;border:1px solid #374151;border-radius:10px;padding:8px 10px;cursor:pointer}
button:hover{border-color:#6b7280}
input{flex:1;background:#0b1020;color:#e5e7eb;border:1px solid #374151;border-radius:10px;padding:8px 10px}
textarea{width:100%;height:360px;background:#0b1020;color:#e5e7eb;border:1px solid #374151;border-radius:10px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.4}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid #374151;border-radius:12px;padding:8px}
.list li span{font-size:13px}
.list li button{padding:6px 8px}
.status{min-height:22px;color:#9ca3af;margin:8px 0}
video{width:100%;border-radius:12px;border:1px solid #374151;background:#000}
.hint{color:#9ca3af;font-size:12px}
footer{padding:12px 14px;color:#9ca3af;border-top:1px solid #1f2937}
code{color:#e5e7eb}