:root{--uaf-blue:#236192;--uaf-gold:#ffcd00;--text:#1c2430;--muted:#5b6573;--surface:#f4f6f9;color:var(--text);background:var(--surface);font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;padding:24px 16px 48px}main{max-width:560px;margin:0 auto}h1{color:var(--uaf-blue);border-bottom:4px solid var(--uaf-gold);margin:0 0 20px;padding-bottom:8px}.controls{grid-template-columns:1fr 1fr;gap:14px 20px;margin-bottom:20px;display:grid}label{color:var(--muted);flex-direction:column;gap:6px;font-size:14px;display:flex}.wide,.colors{grid-column:1/-1}input[type=url]{font:inherit;color:var(--text);border:1px solid #c8cfd8;border-radius:8px;padding:10px 12px;font-size:16px}input[type=url]:focus{outline:2px solid var(--uaf-blue);outline-offset:1px}.colors{flex-wrap:wrap;align-items:flex-end;gap:16px;display:flex}.colors label{flex-direction:row;align-items:center}input[type=color]{background:0 0;border:1px solid #c8cfd8;border-radius:6px;width:36px;height:28px;padding:0}.qr{aspect-ratio:1;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px #00000014}.qr svg{width:100%;height:100%;display:block}.error{color:#b42318}.actions{gap:12px;margin-top:16px;display:flex}button{font:inherit;background:var(--uaf-blue);color:#fff;cursor:pointer;border:0;border-radius:8px;flex:1;padding:12px;font-weight:600}button:hover{filter:brightness(1.1)}@media (width<=480px){.controls{grid-template-columns:1fr}}