#title-banner{
  position:fixed; left:18px; top:18px; z-index:90;
  background: var(--panel);
  border:2px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 12px 36px rgba(0,0,0,.5);
}
#title-banner .title{font-weight:900; color:var(--gold); font-size:18px;}
#title-banner .subtitle{font-size:12px; color:var(--muted); margin-top:4px;}

#legend{
  position:fixed; left:18px; bottom:18px; z-index:80;
  width:320px; max-height:40vh; overflow:auto;
  background: var(--panel);
  border:2px solid var(--border);
  border-radius:14px;
  padding:10px;
  box-shadow:0 12px 36px rgba(0,0,0,.5);
}
.legend-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:12px; margin-bottom:8px;
}
.legend-left{display:flex; align-items:center; gap:10px; min-width:0;}
.dot{width:10px; height:10px; border-radius:999px; box-shadow:0 0 16px rgba(255,255,255,.12);}
#legend-note{font-size:12px; color:var(--muted); padding:4px 2px;}

#controls{
  position:fixed; right:18px; bottom:18px; z-index:85;
  display:flex; gap:10px; opacity:.85;
}
#controls:hover{opacity:1;}
#controls button{
  height:42px; padding:0 14px;
  border-radius:12px;
  border:2px solid var(--border);
  background: rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
#controls button:hover{background: rgba(255,255,255,.06);}

#panel{
  position:fixed; right:18px; top:18px; z-index:88;
  width:360px;
  background: var(--panel);
  border:2px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.5);
}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
#panel-name{font-weight:900; color:var(--gold); font-size:16px;}
#panel-close{
  width:36px; height:36px; border-radius:10px;
  border:2px solid var(--border);
  background: rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
}

.kv{margin-top:10px; display:grid; grid-template-columns:110px 1fr; gap:8px 10px; font-size:12px;}
.k{color:var(--muted);}
.v{color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.panel-actions{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px;}
.panel-actions button{
  padding:9px 11px; border-radius:10px;
  border:2px solid var(--border);
  background: rgba(0,0,0,.18);
  color:var(--text); cursor:pointer;
}
.panel-actions .danger{border-color: rgba(255,120,120,.55);}

#toast{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:999;
  background: var(--panel);
  border:2px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 12px 36px rgba(0,0,0,.55);
}
#toast.hidden{display:none;}

.modal{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  padding:14px;
}
.modal.hidden{display:none;}
.modal-card{
  width:min(820px,92vw);
  background: var(--panel);
  border:2px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.65);
}
.modal-title{font-weight:900; color:var(--gold); font-size:16px;}
.modal-sub{margin:6px 0 10px; font-size:12px; color:var(--muted);}
.grid{display:grid; gap:10px; margin-top:10px;}
.grid.one{grid-template-columns:1fr;}
.grid.two{grid-template-columns:1fr 1fr;}
label{font-size:12px; color:var(--muted);}
input,select,textarea{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
textarea{min-height:90px; resize:vertical;}
.actions{display:flex; justify-content:flex-end; gap:10px; margin-top:12px;}
.actions button{
  padding:10px 14px; border-radius:10px;
  border:2px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
}
.actions .primary{border-color: rgba(255,215,0,.55);}
.hint{margin-top:10px; font-size:12px; color:var(--muted);}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.sep{opacity:.2; width:100%;}
/* === BUGFIX: modal content must scroll === */
.modal-card{
  max-height: 88vh;
  overflow-y: auto;
}