* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f5f7fa; color: #1e4b69; }
.container { max-width: 650px; margin: 0 auto; padding: 16px; }
h2 { text-align: center; font-size: 1.3rem; margin-bottom: 4px; }
.subtitle { text-align: center; font-size: 0.8rem; color: #94a3b8; margin-bottom: 16px; }
.map { display: flex; justify-content: center; margin-bottom: 12px; }
.ring { border-radius: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 20px; cursor: pointer; transition: box-shadow 0.3s, opacity 0.3s; position: relative; }
.ecosystem { width: 420px; height: 420px; background: #f1f5f9; border: 2px solid #94a3b8; }
.growth { width: 300px; height: 300px; background: #dbeafe; border: 2px solid #3b82f6; }
.core { width: 190px; height: 190px; background: #dcfce7; border: 2px solid #22c55e; }
.ring.highlighted { box-shadow: 0 0 0 4px rgba(30,75,105,0.3); }
.ring.dimmed { opacity: 0.35; }
.center-dot { width: 60px; height: 60px; border-radius: 50%; background: #d97706; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; text-align: center; line-height: 1.2; box-shadow: 0 3px 10px rgba(217,119,6,0.3); }
.int-dot { padding: 4px 10px; border-radius: 20px; background: #fff; font-size: 0.7rem; font-weight: 600; color: #1e4b69; box-shadow: 0 1px 4px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; z-index: 1; }
.int-dot:hover { transform: scale(1.1); box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.ring-labels { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.rl { font-size: 0.75rem; padding: 4px 10px; border-radius: 6px; }
.core-l { background: #dcfce7; color: #166534; }
.growth-l { background: #dbeafe; color: #1e40af; }
.eco-l { background: #f1f5f9; color: #475569; }
.tooltip { position: fixed; padding: 10px 14px; background: #1e293b; color: #f1f5f9; border-radius: 8px; font-size: 0.78rem; max-width: 260px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100; line-height: 1.4; }
.tooltip.visible { opacity: 1; }
@media (max-width: 500px) { .ecosystem { width: 320px; height: 320px; } .growth { width: 220px; height: 220px; } .core { width: 140px; height: 140px; } }