:root{
  --bg:#f5f6fb;
  --ink:#1c2230;
  --muted:#6b7280;
  --line:#e6e8f1;
  --card:#ffffff;
  --indigo:#4f46e5;
  --indigo-soft:#eef0fe;
  --amber:#f59e0b;
  --amber-soft:#fff5e6;
  --amber-ink:#92600a;
  --shadow:0 1px 2px rgba(20,24,40,.04), 0 8px 24px rgba(20,24,40,.06);
  --radius:14px;
  font-synthesis:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 18% -8%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 110% 10%, #eef1ff 0%, rgba(238,241,255,0) 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px clamp(16px,4vw,40px);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:
    linear-gradient(135deg,var(--indigo),#6d63ff);
  position:relative;box-shadow:0 6px 16px rgba(79,70,229,.32);
}
.logo::before,.logo::after{
  content:"";position:absolute;top:13px;width:9px;height:12px;border-radius:2px;background:#fff;
}
.logo::before{left:9px;opacity:.92}
.logo::after{right:9px;background:var(--amber)}
.brand-text h1{
  font-size:18px;font-weight:680;letter-spacing:-.02em;line-height:1.1;
}
.brand-text h1 span{color:var(--muted);font-weight:560}
.youline{font-size:12.5px;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.youline b{color:var(--indigo);font-weight:620}

.tools{display:flex;align-items:center;gap:10px;flex:none}
.search{
  width:min(220px,42vw);font:inherit;font-size:13px;color:var(--ink);
  padding:9px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);box-shadow:var(--shadow);outline:none;transition:border-color .15s,box-shadow .15s;
}
.search:focus{border-color:var(--indigo);box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.ghost{
  width:38px;height:38px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--muted);font-size:17px;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .12s,color .15s;
}
.ghost:hover{color:var(--indigo)}
.ghost:active{transform:scale(.94)}
.ghost.spin{animation:spin .7s linear}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- stage / map ---------- */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:4px clamp(12px,4vw,40px) 8px;min-height:0}
.map-wrap{
  position:relative;width:100%;max-width:1180px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:10px;overflow:hidden;
}
#floor{display:block;width:100%;height:auto}

.tip{
  position:fixed;z-index:40;pointer-events:none;
  background:#1c2230;color:#fff;font-size:12px;line-height:1.45;
  padding:8px 11px;border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:240px;transform:translate(-50%,-115%);transition:opacity .1s}
.tip b{font-weight:650}
.tip .t-sub{color:#aab2c8;display:block;margin-top:2px}

/* desk + zone svg styling */
.desk{cursor:pointer;transition:transform .12s ease}
.desk rect{transition:fill .18s,stroke .18s}
.desk:hover{transform:translateY(-1px)}
.desk .d-base{fill:#f1f2f7;stroke:#dcdfe9;stroke-width:1}
.desk .d-code{fill:#9aa1b2;font-size:9px;font-weight:600;letter-spacing:.02em;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;user-select:none}
.desk.s-mine .d-base{fill:var(--indigo-soft);stroke:var(--indigo);stroke-width:1.5}
.desk.s-mine .d-code{fill:var(--indigo)}
.desk.s-swap .d-base{fill:var(--amber-soft);stroke:var(--amber);stroke-width:1.5}
.desk.s-swap .d-code{fill:var(--amber-ink)}
.desk.s-mineswap .d-base{fill:var(--indigo-soft);stroke:var(--amber);stroke-width:2}
.desk.s-mineswap .d-code{fill:var(--indigo)}
.desk.s-swap,.desk.s-mineswap{filter:url(#glow)}
.desk.hit .d-base{stroke:#111827;stroke-width:2.4;stroke-dasharray:3 2}
.pulse{transform-origin:center;transform-box:fill-box}
.desk.s-swap .pulse,.desk.s-mineswap .pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.0}50%{opacity:.5}}

.pod-surface{fill:#e7e9f2;stroke:#d4d8e6;stroke-width:1}
.desk .d-base{fill:#fafbff;stroke:#dde1ec;stroke-width:1}
.pod-seam{stroke:#bcc2d4;stroke-width:2;stroke-linecap:round}
.seat{fill:#ffffff;stroke:#bfc4d4;stroke-width:1.5}
.zone-label{fill:#525a6b;font-size:13px;font-weight:670;letter-spacing:.04em;text-transform:uppercase}
.zone-sub{fill:#9aa1b2;font-size:10.5px;font-weight:500}
.atrium-ring{fill:#fbfaf4;stroke:#d8d3bf;stroke-width:1.5;stroke-dasharray:5 5}
.atrium-dot{fill:#c8ba8e}
.atrium-label{fill:#9c8f5f;font-size:15px;font-weight:640;letter-spacing:.16em;
  text-anchor:middle;dominant-baseline:central;text-transform:uppercase}

/* ---------- legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  padding:14px 8px 4px;font-size:12.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:7px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block;border:1.5px solid}
.sw-free{background:#f1f2f7;border-color:#dcdfe9}
.sw-mine{background:var(--indigo-soft);border-color:var(--indigo)}
.sw-swap{background:var(--amber-soft);border-color:var(--amber)}
.sw-mineswap{background:var(--indigo-soft);border-color:var(--amber)}

/* ---------- panel ---------- */
.scrim{position:fixed;inset:0;background:rgba(18,22,35,.32);z-index:50;
  backdrop-filter:blur(2px);animation:fade .18s ease}
@keyframes fade{from{opacity:0}}
.panel{
  position:fixed;top:0;right:0;height:100dvh;width:min(420px,100vw);z-index:60;
  background:var(--card);box-shadow:-20px 0 60px rgba(20,24,40,.18);
  border-left:1px solid var(--line);padding:30px 28px;overflow-y:auto;
  animation:slidein .26s cubic-bezier(.22,1,.36,1);
}
@keyframes slidein{from{transform:translateX(28px);opacity:.4}}
.panel-close{position:absolute;top:16px;right:18px;width:34px;height:34px;
  border:none;background:#f2f3f8;border-radius:9px;font-size:20px;color:var(--muted);
  cursor:pointer;line-height:1;transition:background .15s}
.panel-close:hover{background:#e9ebf3}

.p-kicker{font-size:11.5px;font-weight:680;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.p-kicker.amber{color:var(--amber-ink)}
.p-title{font-size:23px;font-weight:680;letter-spacing:-.02em;margin:7px 0 4px}
.p-meta{font-size:13px;color:var(--muted);margin-bottom:20px}
.p-meta b{color:var(--ink);font-weight:620}

.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:620;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:14px;color:var(--ink);
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fcfcfe;outline:none;transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:64px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--indigo);box-shadow:0 0 0 4px rgba(79,70,229,.12);background:#fff}
.hint{font-size:11.5px;color:var(--muted);margin-top:6px}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font:inherit;font-size:14.5px;font-weight:630;padding:13px 16px;border-radius:11px;
  border:1px solid transparent;cursor:pointer;transition:transform .12s,filter .15s,background .15s}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--indigo);color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.28)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-amber{background:var(--amber);color:#3a2600;box-shadow:0 8px 20px rgba(245,158,11,.3)}
.btn-amber:hover{filter:brightness(1.04)}
.btn-soft{background:#f2f3f8;color:var(--ink)}
.btn-soft:hover{background:#e9ebf3}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn-ghost:hover{color:var(--ink);border-color:#cfd3df}
.btn+.btn{margin-top:10px}
.btn[disabled]{opacity:.55;pointer-events:none}

.note-card{background:var(--amber-soft);border:1px solid #f3d9a6;color:var(--amber-ink);
  padding:13px 15px;border-radius:11px;font-size:13px;line-height:1.5;margin:6px 0 18px}
.note-card .nc-name{font-weight:680;color:#7a4f06}
.countdown{font-variant-numeric:tabular-nums;font-weight:680;color:var(--ink)}
.err{background:#fdecec;border:1px solid #f6c9c9;color:#a12626;font-size:12.5px;
  padding:10px 13px;border-radius:10px;margin-bottom:14px}
.divider{height:1px;background:var(--line);margin:22px 0}
.mini{font-size:12px;color:var(--muted);line-height:1.55}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  padding:18px 16px 26px;font-size:12px;color:var(--muted)}
.foot .dot{opacity:.5}

@media (max-width:560px){
  .brand-text h1{font-size:16px}
  .youline{max-width:52vw}
  .search{width:40vw}
  .panel{width:100vw;border-left:none;border-top-left-radius:18px;border-top-right-radius:18px;
    top:auto;bottom:0;height:88dvh;animation:sheet .28s cubic-bezier(.22,1,.36,1)}
  @keyframes sheet{from{transform:translateY(40px);opacity:.5}}
  .legend{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}