/* TTA World Map - front-end styles
   Visual language matched to the client-approved reference (blue #00ADEC dotted map + Map/List toggle). */
#ttamap-root{
  --t-blue:#00ADEC;
  --t-blue-dark:#0092c8;
  --t-text:#26313c;
  --t-text-light:#8a94a3;
  --t-border:#e7eaee;
  --t-dot:#d3d7dc;
  --t-bg:#ffffff;
  --t-panel-shadow:0 20px 45px rgba(10,40,60,.16);

  all:initial;
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:32px 20px 48px;
  background:var(--t-bg);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--t-text);
  line-height:1.5;
  isolation:isolate;
}
#ttamap-root *, #ttamap-root *::before, #ttamap-root *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* ===== Toolbar ===== */
#ttamap-root .ttamap-toolbar{
  display:flex;
  gap:12px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
#ttamap-root .ttamap-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  border:1px solid var(--t-border);
  background:#fff;
  color:#5a6472;
  cursor:pointer;
  transition:.2s ease;
  font-family:inherit;
}
#ttamap-root .ttamap-toggle-btn svg{ width:16px; height:16px; flex-shrink:0; }
#ttamap-root .ttamap-toggle-btn.active{
  background:var(--t-blue);
  border-color:var(--t-blue);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,173,236,.28);
}
#ttamap-root .ttamap-toggle-btn:not(.active):hover{
  border-color:var(--t-blue);
  color:var(--t-blue);
}

/* ===== Map area ===== */
#ttamap-root .ttamap-map-wrap{ position:relative; max-width:1100px; margin:0 auto; }
#ttamap-root .ttamap-map-stage{
  position:relative;
  width:100%;
  max-width:1100px;
  aspect-ratio:1440/564;
  margin:0 auto;
}
#ttamap-root .ttamap-dot-svg{
  position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;
}
#ttamap-root .ttamap-dot-svg circle{ fill:var(--t-dot); r:1.6px; }

/* ===== Markers ===== */
#ttamap-root .ttamap-marker{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:0;
  padding:5px 6px 5px 0;
  margin:0;
  cursor:pointer;
  transform:translate(-4.5px,-50%);
  font-family:inherit;
  z-index:2;
}
#ttamap-root .ttamap-marker .ttamap-dot-wrap{ position:relative; width:9px; height:9px; flex-shrink:0; }
#ttamap-root .ttamap-marker .ttamap-dot-core{
  position:absolute; inset:0; border-radius:50%;
  background:var(--t-blue);
  transition:transform .2s ease, background .2s ease;
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
}
#ttamap-root .ttamap-marker .ttamap-dot-pulse{
  position:absolute; inset:-7px; border-radius:50%;
  background:rgba(0,173,236,.35);
  animation:ttamapPulse 2.4s infinite ease-out;
}
#ttamap-root .ttamap-marker .ttamap-label{
  font-size:12px; font-weight:600; color:#3d4a58; white-space:nowrap; transition:color .2s ease;
}
#ttamap-root .ttamap-marker:hover .ttamap-dot-core,
#ttamap-root .ttamap-marker.active .ttamap-dot-core{ background:var(--t-blue-dark); transform:scale(1.35); }
#ttamap-root .ttamap-marker.active .ttamap-label,
#ttamap-root .ttamap-marker:hover .ttamap-label{ color:var(--t-blue-dark); }

@keyframes ttamapPulse{
  0%{ transform:scale(.6); opacity:.55; }
  75%{ transform:scale(1.9); opacity:0; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ===== Language toggle (server renders both, CSS shows one) ===== */
#ttamap-root .ttamap-en{ display:none; }
#ttamap-root.ttamap-lang-en .ttamap-zh{ display:none; }
#ttamap-root.ttamap-lang-en .ttamap-en{ display:inline; }

/* ===== Detail panel ===== */
#ttamap-root .ttamap-panel{
  background:#fff; border-radius:12px; overflow:hidden;
  border:1px solid var(--t-border); box-shadow:var(--t-panel-shadow);
}
#ttamap-root .ttamap-panel-header{
  background:var(--t-blue); color:#fff;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; font-size:15px; font-weight:700;
}
#ttamap-root .ttamap-panel-header svg{ width:20px; height:20px; flex-shrink:0; }
#ttamap-root .ttamap-panel-header span.ttamap-title{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#ttamap-root .ttamap-panel-close{
  background:none; border:0; color:#fff; opacity:.85; cursor:pointer;
  font-size:18px; line-height:1; padding:2px 4px;
}
#ttamap-root .ttamap-panel-close:hover{ opacity:1; }
#ttamap-root .ttamap-panel-body{
  padding:16px; font-size:13px; color:var(--t-text-light); line-height:1.7;
}

#ttamap-root .ttamap-detail-panel{
  position:absolute; top:0; right:0; width:300px; max-width:60%;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:20;
}
#ttamap-root .ttamap-detail-panel.visible{ opacity:1; visibility:visible; transform:translateY(0); }
#ttamap-root .ttamap-map-empty{
  position:absolute; top:0; right:0; width:280px; max-width:60%; padding:16px;
  border:1px dashed var(--t-border); border-radius:12px;
  font-size:13px; color:var(--t-text-light); text-align:center; background:#fafbfc;
}

/* ===== List mode ===== */
#ttamap-root .ttamap-list-wrap{ display:none; }
#ttamap-root.ttamap-mode-list .ttamap-list-wrap{ display:block; }
#ttamap-root.ttamap-mode-list .ttamap-map-wrap{ display:none; }

#ttamap-root .ttamap-list-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px;
}
#ttamap-root .ttamap-list-btn{
  padding:11px 14px; border:1px solid var(--t-border); border-radius:8px;
  background:#fff; font-size:13px; font-weight:600; color:var(--t-text);
  cursor:pointer; text-align:left; transition:.2s ease; font-family:inherit;
  display:flex; align-items:center; gap:8px;
}
#ttamap-root .ttamap-list-btn::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--t-blue); flex-shrink:0;
}
#ttamap-root .ttamap-list-btn:hover{ border-color:var(--t-blue); color:var(--t-blue); }
#ttamap-root .ttamap-list-btn.active{ background:var(--t-blue); border-color:var(--t-blue); color:#fff; }
#ttamap-root .ttamap-list-btn.active::before{ background:#fff; }
#ttamap-root .ttamap-list-panel-wrap{ margin-top:18px; }
#ttamap-root .ttamap-list-panel-wrap .ttamap-panel{ max-width:520px; }
#ttamap-root .ttamap-list-panel-wrap:empty{ display:none; }

#ttamap-root .ttamap-empty-state{
  padding:40px 20px; text-align:center; color:var(--t-text-light); font-size:14px;
  border:1px dashed var(--t-border); border-radius:12px;
}

/* ===== Responsive ===== */
@media(max-width:720px){
  #ttamap-root{ padding:24px 16px 36px; }
  #ttamap-root .ttamap-toggle-btn{ flex:1; justify-content:center; padding:11px 10px; }
  #ttamap-root .ttamap-marker .ttamap-label{ font-size:9.5px; }
  #ttamap-root .ttamap-marker{ padding:3px 4px 3px 0; }
  #ttamap-root .ttamap-detail-panel{
    position:static; width:100%; max-width:100%; margin-top:16px; transform:none; display:none;
  }
  #ttamap-root .ttamap-detail-panel.visible{ display:block; }
  #ttamap-root .ttamap-map-empty{ position:static; width:100%; max-width:100%; margin-top:16px; display:block; }
}