:root{
  --bg:#0b0d12; --panel:#121620; --muted:#98a2b3; --text:#f8fafc; --brand:#7c3aed; --accent:#22d3ee; --ok:#22c55e;
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%, #111933 0%, #0b0d12 60%);color:var(--text);font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}

.topbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(10,12,18,.7);backdrop-filter:blur(8px);border-bottom:1px solid #1b2233;z-index:10}
.brand{font-weight:700}
.btn{display:inline-block;padding:8px 12px;border:1px solid #2a3347;border-radius:12px;color:var(--text);text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent));border:0}
.hint{color:var(--muted);font-size:.85rem}

.layout{display:grid;grid-template-columns: 1fr; gap: 16px; padding: 16px; height:calc(100% - 50px)}
.display{position:relative}
.map{position:absolute; inset:0; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.intro{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.intro-inner{background:rgba(8,10,16,.55); backdrop-filter:blur(6px); padding:24px 28px; border:1px solid #263048; border-radius:20px; text-align:center; animation: float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.toast{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); background:rgba(0,0,0,.7); padding:10px 14px; border-radius:999px; opacity:0; transition:opacity .3s}
.toast.show{opacity:1}
.qr{position:absolute; right:16px; bottom:16px; background:rgba(0,0,0,.55); padding:10px; border-radius:12px; border:1px solid #2a3347}

.input{max-width:720px; margin:0 auto}
.card{background:var(--panel); border:1px solid #1f2638; border-radius:16px; padding:16px; box-shadow:0 10px 25px rgba(0,0,0,.25)}
.card h2,.card h3{margin-top:0}
label{display:block; margin-bottom:12px}
input{width:100%; padding:10px 12px; border-radius:12px; border:1px solid #2b354a; background:#0f1422; color:var(--text)}
summary{cursor:pointer}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.list ul, .list li{margin:0; padding:0; list-style:none}
#list li{display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #263048}
#list li:last-child{border-bottom:0}
.pin{display:inline-flex; align-items:center; gap:8px}
.pin svg{width:16px; height:16px}

@media (min-width: 1024px){
  .layout{grid-template-columns: 2fr 1fr}
}