*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #070d07;--surface: #0f1a0f;--surface2: #162416;--accent-ae: #4CAF50;--accent-mfl: #009688;--accent-sdg: #FFC107;--text: #d0e8d0;--text-dim: #6a8f6a;--card-w: 150px;--card-h: 210px}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{width:100vw;height:100vh;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;grid-template-areas:"ae   mfl" "mid  mfl" "sdg  mfl";overflow:hidden}.ae-banner{grid-area:ae;background:var(--surface);border-bottom:1px solid var(--surface2);padding:6px 8px;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center}.sdg-banner{grid-area:sdg;background:var(--surface);border-top:1px solid var(--surface2);padding:6px 8px;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center}.icon-bar{display:flex;gap:6px;align-items:center}.icon-btn{background:transparent;border:2px solid transparent;border-radius:8px;padding:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,box-shadow .2s;flex-shrink:0}.icon-btn-img{width:44px;height:44px;object-fit:contain;pointer-events:none}.icon-btn.ae.selected{border-color:var(--accent-ae);box-shadow:0 0 12px #4caf5080;background:#4caf501a}.icon-btn.mfl.selected{border-color:var(--accent-mfl);box-shadow:0 0 12px #00968880;background:#0096881a}.icon-btn.sdg.selected{border-color:var(--accent-sdg);box-shadow:0 0 12px #ffc10780;background:#ffc1071a}.mfl-sidebar{grid-area:mfl;background:var(--surface);border-left:1px solid var(--surface2);padding:8px 6px;overflow-y:auto;overflow-x:hidden;display:flex;align-items:center}.icon-column{display:flex;flex-direction:column;gap:4px;align-items:center}.center-field{grid-area:mid;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#0f1f0f 0%,var(--bg) 70%)}.field-label-top{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;gap:16px;font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);z-index:5;pointer-events:none}.field-label-top .label-ae{color:var(--accent-ae)}.field-label-top .label-mfl{color:var(--accent-mfl)}.field-label-top .label-sdg{color:var(--accent-sdg)}.field-label-top .label-count{color:var(--text)}.card-field{position:relative;width:100%;height:100%}.empty-cosmos{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:1.1rem;letter-spacing:3px;text-transform:uppercase;opacity:.5}.floating-card{position:absolute;width:var(--card-w);cursor:pointer;transform-origin:center center;will-change:transform}.floating-card.focused{position:fixed;width:var(--card-w)}.floating-card-inner{width:100%;aspect-ratio:150 / 210;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px #00000080}.floating-card.focused .floating-card-inner{box-shadow:0 0 50px #4caf5059,0 0 100px #4caf501a}.floating-card-img{width:100%;height:100%;object-fit:cover;display:block}.focus-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000000bf;display:flex;align-items:center;justify-content:center}.focus-layout{display:flex;align-items:center;gap:48px;max-width:90vw;max-height:90vh}.focus-card{flex-shrink:0}.focus-card-img{width:300px;height:420px;object-fit:cover;border-radius:12px;box-shadow:0 0 60px #4caf504d,0 8px 40px #0009;display:block}.focus-details{flex:1;min-width:0;max-width:480px;max-height:80vh;overflow-y:auto;padding:24px;border-radius:12px;background:#0f1a0feb;border:1px solid var(--surface2);box-shadow:0 8px 40px #00000080}.focus-details h2{font-size:1.6rem;color:var(--accent-ae);margin-bottom:20px;border-bottom:1px solid var(--surface2);padding-bottom:12px}.detail-section{margin-bottom:20px}.detail-section h3{font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);margin-bottom:6px}.focus-details .card-action{font-size:.95rem;color:var(--text);line-height:1.5}.focus-details .card-desc{font-size:.88rem;color:var(--text-dim);line-height:1.5;font-style:italic}.value-tags{display:flex;flex-direction:column;gap:8px}.icon-tags{display:flex;flex-wrap:wrap;gap:5px}.icon-tag{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;padding:4px 10px 4px 5px;border-radius:5px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.icon-tag-img{width:20px;height:20px;object-fit:contain}.icon-tag.ae{border-color:#4caf504d;color:var(--accent-ae)}.icon-tag.mfl{border-color:#0096884d;color:var(--accent-mfl)}.icon-tag.sdg{border-color:#ffc1074d;color:var(--accent-sdg)}.connection-lines{position:absolute;top:0;left:0;pointer-events:none;z-index:0}.ae-banner::-webkit-scrollbar,.sdg-banner::-webkit-scrollbar,.mfl-sidebar::-webkit-scrollbar{height:4px;width:4px}.ae-banner::-webkit-scrollbar-track,.sdg-banner::-webkit-scrollbar-track,.mfl-sidebar::-webkit-scrollbar-track{background:transparent}.ae-banner::-webkit-scrollbar-thumb,.sdg-banner::-webkit-scrollbar-thumb,.mfl-sidebar::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:2px}.focus-details::-webkit-scrollbar{width:4px}.focus-details::-webkit-scrollbar-track{background:transparent}.focus-details::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:2px}