:root{--navy:#0A2540;--red:#C8102E}*{box-sizing:border-box}
body{margin:0;font-family:system-ui,sans-serif;background:#f3f5f8;color:#111}
header{background:var(--navy);color:#fff;padding:12px 12px 0;border-bottom:4px solid var(--red)}
h1{margin:0;font-size:1.3rem}header small{opacity:.8}
nav{display:flex;gap:4px;margin-top:8px}nav button{flex:1;background:transparent;color:#fff;border:0;padding:10px;font-size:1rem}
nav button.on{background:var(--red);border-radius:6px 6px 0 0}
main{padding:12px;max-width:640px;margin:auto}label{display:block;margin:10px 0;font-weight:600}
input,select{width:100%;padding:10px;font-size:1rem;border:1px solid #bbb;border-radius:6px;margin-top:4px}
button{padding:12px;font-size:1rem;border-radius:6px;border:1px solid var(--navy);background:#fff;color:var(--navy)}
button.primary,.big{background:var(--navy);color:#fff;width:100%}.big{display:block;text-align:center;padding:16px;border-radius:8px}
button:disabled{opacity:.5}.row{display:flex;gap:8px;align-items:center}.row button{flex:1}
#preview{max-width:100%;max-height:240px;display:block;margin:8px auto;border-radius:6px}
.match{display:block;width:100%;text-align:left;margin:4px 0}.match.on{border:2px solid var(--red)}
#list{list-style:none;padding:0}#list li{background:#fff;margin:6px 0;padding:10px;border-left:4px solid var(--red);border-radius:4px}
#list li button{padding:6px 8px;margin:4px 4px 0 0;font-size:.85rem}
#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px}