*{box-sizing:border-box}
body,html{margin:0;padding:0;height:100%;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#fff}
.page{min-height:100%;background:url('./assets/background.jpg') center/cover no-repeat fixed;position:relative}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.container{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;min-height:100vh;padding:32px}
.card{background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:none;background:#ffb703;color:#1a1a1a;font-weight:700;cursor:pointer;transition:transform .06s ease,opacity .2s}
.btn:active{transform:translateY(1px)}
.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;outline:none}
.input::placeholder{color:#ddd}
.grid{display:grid;gap:12px}
.label{font-size:14px;opacity:.85;margin-bottom:4px}
.title{font-size:28px;margin:0 0 10px 0;font-weight:800}
.notice{font-size:12px;opacity:.8}
.center{display:flex;justify-content:center;align-items:center}
.canvas-wrap{position:relative}
.pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:#00e5ff;border:3px solid #06202b;box-shadow:0 0 0 4px rgba(0,229,255,.35),0 4px 20px rgba(0,0,0,.6)}
.badge{padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.6);display:inline-block;font-size:12px;border:1px solid rgba(255,255,255,.15)}
.footer{padding:14px;text-align:center;opacity:.75}
.small{font-size:12px}
.hidden{display:none}
a.link{color:#ffd166}