:root {
  --primary: #0067AC;
  --secondary: #CF2E26;
  --text: #ffffff;
  --card: rgba(0,0,0,.35);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; min-height:100%; font-family: Arial, Helvetica, sans-serif; background:#000; color:var(--text); }
body { background-size:cover; background-position:center; background-repeat:no-repeat; }
.body-overlay::before { content:''; position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:0; }
.page { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:clamp(16px, 3vw, 36px); }
.card { width:min(92vw, 540px); background:var(--card); backdrop-filter: blur(4px); border-radius:var(--radius); padding:clamp(18px, 3vw, 30px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.card.wide { width:min(96vw, 1200px); }
.stack { display:flex; flex-direction:column; gap:16px; }
.title { font-size:clamp(26px, 4vw, 42px); font-weight:800; text-align:center; margin:0; }
.subtitle { text-align:center; opacity:.9; margin:0; }
.label { font-size:14px; margin-bottom:6px; display:block; }
.input, select { width:100%; padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.95); color:#111; font-size:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:14px 20px; border:none; border-radius:14px; background:var(--primary); color:#fff; font-weight:700; cursor:pointer; text-decoration:none; }
.btn.secondary { background:#222; }
.btn.light { background:#fff; color:#111; }
.btn.full { width:100%; }
.row { display:flex; gap:14px; }
.row > * { flex:1; }
.error { background:rgba(207,46,38,.2); border:1px solid rgba(207,46,38,.5); color:#fff; border-radius:12px; padding:12px 14px; }
.success { background:rgba(60,147,70,.2); border:1px solid rgba(60,147,70,.5); color:#fff; border-radius:12px; padding:12px 14px; }
.result-visual { width:min(92vw, 720px); max-height:88vh; object-fit:contain; display:block; margin:0 auto; }
.logo { display:block; max-width:min(52vw, 220px); max-height:80px; object-fit:contain; margin:0 auto 10px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; background:#fff; color:#111; border-radius:14px; overflow:hidden; }
th, td { padding:10px 8px; border-bottom:1px solid #e5e5e5; text-align:left; }
th { background:#f6f6f6; }
@media (max-width: 768px) { .row { flex-direction:column; } .card.wide { width:100%; } }
@media (min-width: 1280px) and (min-aspect-ratio: 9/16) { .page { padding:24px; } .card { width:min(70vw, 700px); } }