header{background:var(--dk);color:#fff;padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:4px solid var(--g)}

header h1{font-size:17px;margin:0;flex:1}

main{padding:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));max-width:1300px;margin:auto}

.card{background:var(--c);border:1px solid var(--ln);border-radius:8px;padding:10px;overflow-x:auto}
.card h2{font-size:13px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em;color:var(--m)}

.wide{grid-column:1/-1}

canvas{width:100%;height:235px;background:#0b0f07;border-radius:10px;display:block;display:block;cursor:pointer}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}

#setup,#end{max-width:640px;margin:20px auto;padding:0 12px}
#setup select{width:100%}
.mb{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9;padding:10px}
.mb .card{max-width:440px;width:100%;max-height:92vh;overflow:auto}

.fl{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
header button{background:#2b3a27;color:#fff;border-color:#3d4f38}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}