*{box-sizing:border-box}
:root{
  --bg:#08101f;--text:#eef4ff;--muted:#cbd6f2;--line:rgba(160,178,255,.22);
  --panel:rgba(11,19,44,.72);--panel2:rgba(11,19,44,.55);--accent:#86baff;
  --cyan:#8dd6ff;--yellow:#ffd76a;--rose:#f0a6a6;
}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#08101f}
.bg{position:fixed;inset:0;background:linear-gradient(180deg,rgba(6,10,26,.28),rgba(6,10,26,.70)),url("m45.png") center/cover fixed no-repeat;z-index:0}
.page{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 12px 34px rgba(0,0,0,.18)}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:18px 22px;margin-bottom:16px}
.hero h1{margin:0 0 6px;font-size:clamp(1.8rem,3vw,3.2rem)}
.hero p{margin:0;color:var(--muted)}
.hero-note{color:var(--muted);font-size:.92rem;white-space:nowrap}
.layout{display:grid;grid-template-columns:360px 1fr;gap:14px}
.controls{padding:18px}
.controls h2,.controls h3{margin:0 0 10px}
label{display:block;font-size:.92rem;font-weight:700;margin-bottom:10px}
input[type=file],select,input[type=number]{width:100%;margin-top:6px;padding:10px 12px;border-radius:12px;border:1px solid rgba(132,152,236,.38);background:#0a1430;color:var(--text)}
.check{display:flex;align-items:center;gap:8px;font-weight:400}
.check input{width:auto;margin:0}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions{display:flex;gap:10px;margin:12px 0 14px}
button{flex:1;padding:11px 14px;border:0;border-radius:14px;color:#fff;cursor:pointer;background:linear-gradient(180deg,#6b90ff,#4e6fe2);box-shadow:0 0 18px rgba(93,132,255,.26)}
button.secondary{background:rgba(10,20,48,.9);border:1px solid rgba(132,152,236,.35);box-shadow:none}
.status{padding:12px;border-radius:14px;background:var(--panel2);border:1px solid rgba(132,152,236,.2);color:var(--muted);min-height:54px;white-space:pre-wrap}
.detected{margin-top:8px;max-height:330px;overflow:auto;padding-right:4px;color:var(--muted);font-size:.9rem;line-height:1.45}
.detected .item{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.detected .item strong{color:var(--text)}
.canvas-card{padding:14px}
.canvas-wrap{border-radius:18px;overflow:auto;background:rgba(2,8,18,.65);border:1px solid rgba(132,152,236,.2);min-height:760px;display:flex;align-items:center;justify-content:center}
canvas{display:block;max-width:100%;height:auto;background:#000}
@media (max-width:980px){.layout{grid-template-columns:1fr}.hero{flex-direction:column;align-items:start}.hero-note{white-space:normal}.canvas-wrap{min-height:420px}}