:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:#f8fafc; background:#07101b; }
[hidden] { display:none!important; }
.geofence-silent { min-width:0; color:#111; background:#fff; }
.geofence-unavailable { display:grid; min-height:100vh; place-items:center; padding:24px; background:#fff; }
.geofence-unavailable p { margin:0; color:#111; font:400 16px/1.5 Arial,sans-serif; text-align:center; }
.geofence-gate { display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 50% 0,#263853 0,#101b2a 45%,#060b12 100%); }
.geofence-card { width:min(480px,100%); padding:34px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:rgba(13,23,37,.94); box-shadow:0 28px 100px rgba(0,0,0,.48); text-align:center; }
.geofence-mark { position:relative; width:78px; height:78px; margin:0 auto 22px; border:2px solid #fb315f; border-radius:50%; box-shadow:0 0 0 10px rgba(251,49,95,.08); }
.geofence-mark::before { content:""; position:absolute; inset:17px; border:5px solid #fb315f; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.geofence-mark span { position:absolute; z-index:1; top:28px; left:31px; width:12px; height:12px; border-radius:50%; background:#fff; }
.geofence-kicker { margin:0 0 8px!important; color:#fb6a8b!important; font-size:10px!important; font-weight:900; letter-spacing:1.5px; }
h1 { margin:0; font-size:clamp(27px,7vw,38px); letter-spacing:-1px; }
.geofence-card>p { margin:11px auto 20px; max-width:390px; color:#aeb9c8; font-size:14px; line-height:1.6; }
.geofence-areas { display:grid; gap:5px; margin:20px 0; padding:14px; border:1px solid #2a394d; border-radius:12px; background:#111e2e; }
.geofence-areas small { color:#7f8ca0; font-size:9px; font-weight:900; letter-spacing:1.2px; }
.geofence-areas strong { color:#e7edf5; font-size:13px; }
#verifyLocation { width:100%; min-height:52px; padding:0 18px; border:0; border-radius:11px; color:#fff; background:#ed174c; box-shadow:0 12px 30px rgba(237,23,76,.25); font:900 13px/1 inherit; letter-spacing:.4px; cursor:pointer; }
#verifyLocation:hover:not(:disabled) { background:#ff245c; }
#verifyLocation:disabled { cursor:not-allowed; opacity:.55; }
.geofence-status { min-height:45px; margin:15px 0!important; padding:10px 12px; border-radius:9px; color:#abb7c8!important; background:#0a1421; font-size:12px!important; }
.geofence-status[data-kind="busy"] { color:#d7e6ff!important; }
.geofence-status[data-kind="success"] { color:#87e8b7!important; background:#09241b; }
.geofence-status[data-kind="error"] { color:#ff9db2!important; background:#2a0d17; }
details { margin-top:8px; color:#8996a8; font-size:11px; line-height:1.55; text-align:left; }
summary { color:#c4cedb; cursor:pointer; text-align:center; font-weight:750; }
details p { margin:9px 0 0; }
noscript { display:block; margin-top:15px; color:#ff9db2; }
@media (max-width:520px) { .geofence-card { padding:27px 20px; border-radius:18px; } }