/* ---- RESET + BASE ---- */
* { box-sizing: border-box; margin:0; padding:0; }
body { background:#101921; color:#f8fafc; font-family:'Segoe UI',Arial,sans-serif; }

/* ---- HEADER E NAV ---- */
.main-header {
  background: #151b24;
  box-shadow: 0 2px 8px #0008;
  padding: 1em 0;
  z-index: 30;
}
.main-header .container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-header .d-flex { display: flex; align-items: center; }
.main-header .nav { display: flex; gap: 1.2em; list-style: none; margin:0; padding:0;}
.main-header .nav-link {
  color: #aad6ff;
  font-weight: 600;
  transition: color 0.12s, background 0.14s;
  font-size: 1.08em;
  padding: 0.15em 0.95em;
  border-radius: 7px;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.main-header .nav-link:hover, .main-header .nav-link.active {
  color: #1fe9c7 !important;
  background: #18232b;
}
@media (max-width: 800px) {
  .main-header .container { flex-direction: column; gap: 1.1em; align-items: flex-start !important; }
  .main-header .nav { flex-direction: column; gap: 0.5em; padding: 0; }
  .main-header .nav-link { padding-left: 0; }
}

/* ---- FOOTER ---- */
footer {
  background: #151b24;
  padding: 2em;
  box-shadow: 0 -2px 8px #0008;
  font-size: .9em;
  color: #f8fafc;
}
footer .container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  text-align: center;
}
footer .donation { color: #f8fafc; line-height: 1.5; }
footer .gecko { display: flex; align-items: center; gap: .75em; }
footer .gecko img { height: 40px; width: auto; }
footer .gecko span { color: #f8fafc; }
footer .gecko a { color: #54b3ff; text-decoration: none; font-weight: 500; }
footer .gecko a:hover { text-decoration: underline; }
footer .legal { color: #f8fafc; line-height: 1.4; }
footer .legal a { color: #54b3ff; text-decoration: none; font-weight: 500; }
footer .legal a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  footer .container { padding:1em 0.5em; }
}

/* ---- TOOLTIP ---- */
.bubble-tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  min-width: 170px; background: #171f28f8; color: #fff;
  padding: 0.7em 1em; font-size: 1em;
  border-radius: 10px; border: 1.5px solid #5ad2ff;
  box-shadow: 0 4px 20px #0009;
  opacity: 0; transition: opacity 0.18s;
  white-space: pre-line; font-family: inherit;
}

/* ---- BUBBLES E LABELS ---- */
#chart { width: 100%; max-width: 1200px; height: 550px; margin: 1.7em auto; background: #19202a; border-radius: 1.5em; position: relative; }
circle.other { stroke: #fff; stroke-width: 3px; }
.bubble-label {
  text-shadow: 0 1px 4px #181a1a, 0 0px 1.5px #181a1a, 0 0.5px 0.5px #000b;
}

/* ---- PROJECT PANEL/DETAILS ---- */
.project-panel { background:#151b24; border-radius:12px; box-shadow:0 2px 14px #0002; padding:1.5em; }
.project-header { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.project-avatar { width:44px; height:44px; border-radius:8px; box-shadow:0 2px 8px #0005; background:#191c24; object-fit:contain; flex-shrink:0; }
.chain-icon { width:22px; height:22px; vertical-align:middle; border-radius:4px; background:#131a1e; margin-right:4px; }
.chain-icon-small { width:17px; height:17px; vertical-align:middle; border-radius:4px; background:#22282f; margin-right:5px; }
.project-tags { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:4px 0 2px 0; }
.cat-chip { background:#25374a; color:#8cf3fe; font-size:.95em; padding:2px 8px; border-radius:5px; margin-right:5px; }
.status-badge { display:inline-block; font-weight:700; font-size:1.01em; letter-spacing:1px; padding:2.5px 12px; border-radius:12px; margin-bottom:2px; }
.status-badge.active { background:#1d584c; color:#60ffd3; }
.status-badge.passive { background:#514f1b; color:#ffe184; }
.status-badge.dead { background:#5a1d2c; color:#ff6e90; }
.project-links { margin:10px 0; display:flex; flex-wrap:wrap; gap:8px; }
.project-links a {
  display: flex; align-items: center; gap: 4px;
  color: #57baff; background: #181f2a;
  border-radius: 5px; padding: 4px 10px; font-size: 1.04em; font-weight: 500;
  text-decoration: none; transition: background 0.18s, color 0.18s; border: 1px solid #232f3c;
}
.project-links a:hover { background: #244370; color: #fff; }
.contract-chip { background:#181e24; border-radius:6px; padding:2px 10px 2px 3px; margin-right:10px; display:inline-flex; align-items:center; gap:5px; }
.contract-address { color:#abe8ff; font-family:monospace; font-size:1em; letter-spacing:0.5px; }
.copy-btn { background:none; border:none; color:#8bcfff; cursor:pointer; margin-left:5px; font-size:1.08em; }
.back { display:inline-block; margin-bottom:1em; color:#54b3ff; cursor:pointer; text-decoration:underline; }

.panel-label { font-weight:600; color:#a8f7f2; font-size:.98em; display:block; margin-bottom:4px;}
.balances-list, .panel-col { margin-bottom:12px; }

/* ---- STATUS/LEGEND ---- */
.status-legend {
  max-width: 680px; margin: 18px auto 16px auto;
  background: #111b24; border-radius: 8px; padding: 12px 18px 10px 18px;
  color: #fff; font-size: .99em; text-align: center;
}
.status-legend b { display: inline-block; margin-bottom: 2px; }
.status-legend span { display: inline-block; margin-bottom: 2px; }

/* ---- STATS ---- */
.stats { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; max-width: 1200px; margin: 1em auto; }
.stat { background: #182330; border-radius: 12px; padding: 1em 1.5em; box-shadow: 0 4px 20px #0004; font-size: 1.1em; text-align: center; min-width: 140px; }

/* ---- BUTTONS ---- */
.share-btn {
  background: #19232b; color: #1fe9c7; border: 0px solid #1fe9c7;
  border-radius: 7px; padding: 7px 18px 7px 16px; font-size: 1em; cursor: pointer;
  transition: background 0.13s, color 0.13s, border 0.13s;
  box-shadow: none; margin: 0; vertical-align: middle; display: flex; align-items: center; gap: 0.5em;
}
.share-btn:hover { background: #1fe9c726; color: #8ff; border: 0px solid #53f6d4; }

/* ---- SHARE MODAL ---- */
.share-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0,0,0,0.5);}
.share-modal-content { background: #151b24; color: #eee; max-width: 340px; margin: 8% auto; padding: 2em 2em 1.5em 2em; border-radius: 18px; box-shadow: 0 8px 40px #0008; text-align: center; position: relative; }
.close-share-modal { position: absolute; top: 16px; right: 18px; cursor: pointer; font-size: 1.3em; color: #fff6; transition: color 0.2s; }
.close-share-modal:hover { color: #8ff; }
.share-url-input { width: 94%; padding: 8px; font-size: 1em; border-radius: 7px; border: none; background: #233; color: #fff; text-align: center; margin-bottom: 0.4em; }
.share-modal-btn { background: #182a36; color: #8ff; border-radius: 7px; border: none; padding: 7px 18px; margin: 0 6px; cursor: pointer; font-size: 1em; transition: background 0.14s; }
.share-modal-btn:hover { background: #1fe9c7; color: #151b24; }
.share-msg { margin-top: 1em; font-size: .98em; color: #95ffc2; }

@media (max-width: 800px) {
  .stats { flex-direction: column; gap: .8em; }
  #chart { height: 440px; }
  .main-header .container { flex-direction: column; gap: 1.1em; align-items: flex-start !important; }
  .main-header .nav { flex-direction: column; gap: 0.5em; padding: 0; }
  .main-header .nav-link { padding-left: 0; }
  footer .container { padding:1em 0.5em; }
}