:root{
  --bg:#fbfcff;
  --card:rgba(255,255,255,.90);
  --text:#111827;
  --muted:#667085;
  --border:rgba(148,163,184,.23);
  --shadow:0 16px 42px rgba(15,23,42,.075);
  --shadow-soft:0 10px 26px rgba(15,23,42,.055);
  --teori:#9b72d9;
  --konsep:#3b82f6;
  --lembaga:#58bd7d;
  --literatur:#f5b942;
  --kasus:#ef7676;
  --tokoh:#35b9bd;
  --regulasi:#64748b;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 52% 26%, rgba(59,130,246,.045), transparent 28%),
    radial-gradient(circle at 24% 54%, rgba(88,189,125,.055), transparent 34%),
    var(--bg);
}

button,input{font:inherit}
button{border:0;background:none;cursor:pointer;color:inherit}

.atlas-app{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.map-stage{
  position:absolute;
  inset:0;
  padding:92px 410px 86px 58px;
}

#atlasSvg{
  width:100%;
  height:100%;
  overflow:visible;
}

.brand-card,
.search-card,
.top-tools button,
.detail-panel,
.mini-card,
.legend,
.mini-map,
.map-controls,
.layer-menu{
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(16px);
}

.brand-card{
  position:absolute;
  top:18px;
  left:18px;
  height:72px;
  min-width:250px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 16px;
  border-radius:18px;
  z-index:20;
}

.brand-logo{
  width:45px;
  height:45px;
  border-radius:50%;
  background:
    radial-gradient(circle,#1d8cf8 2px,transparent 3px) 0 0/10px 10px,
    radial-gradient(circle,#60a5fa 2px,transparent 3px) 5px 5px/10px 10px;
  -webkit-mask:radial-gradient(circle,#000 62%,transparent 63%);
  mask:radial-gradient(circle,#000 62%,transparent 63%);
}

.brand-card strong{
  display:block;
  font-size:18px;
  line-height:1.1;
  letter-spacing:-.02em;
}

.brand-card span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}

.search-card{
  position:absolute;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  width:min(520px,42vw);
  height:58px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 18px;
  border-radius:999px;
  z-index:30;
}

.search-icon{
  font-size:26px;
  transform:rotate(-20deg);
}

.search-card input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:15px;
}

.search-card kbd{
  color:#64748b;
  font-size:12px;
}

.search-results{
  position:absolute;
  top:66px;
  left:0;
  right:0;
  padding:8px;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}

.search-item{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
}

.search-item:hover{background:#f8fafc}
.search-item small{color:#64748b}

.top-tools{
  position:absolute;
  top:22px;
  right:22px;
  display:flex;
  gap:12px;
  z-index:30;
}

.top-tools button{
  height:54px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 17px;
  border-radius:15px;
  font-weight:700;
}

.top-tools .square{
  width:54px;
  justify-content:center;
  padding:0;
  font-size:21px;
}

.top-tools small{color:#64748b}

.layer-menu{
  position:absolute;
  top:86px;
  right:126px;
  width:220px;
  padding:14px;
  border-radius:18px;
  z-index:40;
}

.layer-menu strong{
  display:block;
  margin-bottom:10px;
}

.layer-menu label{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 4px;
  color:#334155;
  font-size:14px;
}

.detail-panel{
  position:absolute;
  top:150px;
  right:22px;
  width:375px;
  min-width:320px;
  min-height:360px;
  border-radius:20px;
  z-index:25;
  overflow:hidden;
}

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:22px 22px 16px;
  cursor:grab;
}

.panel-title{
  display:flex;
  align-items:center;
  gap:14px;
}

.panel-node-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf2ff;
  color:#2563eb;
  font-weight:800;
  font-size:21px;
}

.panel-title h1{
  margin:0;
  font-size:18px;
  letter-spacing:-.02em;
}

.panel-title span{
  display:block;
  margin-top:4px;
  color:#2563eb;
  font-size:12px;
  font-weight:750;
}

.window-actions{
  display:flex;
  gap:9px;
}

.window-actions button{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#475569;
  font-size:19px;
}

.window-actions button:hover{background:#f1f5f9}

.tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:0 20px;
  border-bottom:1px solid #e5eaf1;
}

.tabs button{
  position:relative;
  padding:15px 0 13px;
  color:#344054;
  font-size:13px;
  font-weight:700;
}

.tabs .active{color:#2563eb}

.tabs .active:after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:-1px;
  height:2px;
  background:#2563eb;
}

.panel-body{
  padding:18px 22px 22px;
}

.panel-body p{
  margin:0;
  color:#1f2937;
  font-size:14px;
  line-height:1.65;
}

.panel-body h2{
  margin:26px 0 12px;
  font-size:14px;
}

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tag-list button{
  padding:8px 14px;
  border:1px solid #d5e2f4;
  border-radius:999px;
  color:#1d5ca8;
  background:#f8fbff;
  font-size:13px;
  font-weight:700;
}

.panel-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 20px;
  border-top:1px solid #e5eaf1;
  color:#64748b;
  font-size:11px;
}

.panel-foot button{
  color:#2563eb;
  font-weight:800;
  white-space:nowrap;
}

.resize-grip{
  position:absolute;
  right:7px;
  bottom:7px;
  width:18px;
  height:18px;
  cursor:nwse-resize;
}

.resize-grip:before,
.resize-grip:after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  border-right:2px solid #94a3b8;
  border-bottom:2px solid #94a3b8;
}

.resize-grip:before{width:14px;height:14px}
.resize-grip:after{width:8px;height:8px}

.detail-panel.closed{display:none}

.detail-panel.maximized{
  top:96px!important;
  right:24px!important;
  left:auto!important;
  width:min(620px,44vw)!important;
  height:calc(100vh - 190px)!important;
}

.mini-card{
  position:absolute;
  top:610px;
  right:22px;
  width:375px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 18px;
  border-radius:17px;
  z-index:18;
}

.mini-icon{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--teori);
  background:rgba(155,114,217,.14);
}

.mini-card strong{display:block;font-size:16px}
.mini-card span{display:block;margin-top:3px;color:#64748b;font-size:12px}
.mini-card button{margin-left:auto;color:#64748b;font-size:18px}
.mini-card button + button{margin-left:4px}

.legend{
  position:absolute;
  left:18px;
  bottom:24px;
  width:280px;
  border-radius:17px;
  z-index:18;
  overflow:hidden;
}

.legend-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 16px;
}

.legend-body{
  display:grid;
  grid-template-columns:1fr 1.18fr;
  gap:14px;
  padding:0 16px 16px;
  font-size:11px;
  color:#334155;
}

.legend-body div{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.legend-body b{
  color:#64748b;
  margin-bottom:2px;
}

.legend.collapsed{width:130px}
.legend.collapsed .legend-body{display:none}

.dot{
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:7px;
  border-radius:50%;
}

.dot.teori{background:var(--teori)}
.dot.konsep{background:var(--konsep)}
.dot.lembaga{background:var(--lembaga)}
.dot.literatur{background:var(--literatur)}
.dot.kasus{background:var(--kasus)}

.rel{
  display:inline-block;
  width:24px;
  margin-right:7px;
  vertical-align:middle;
}

.rel.solid{border-top:1.5px solid #64748b}
.rel.dashed{border-top:1.5px dashed #64748b}
.rel.dotted{border-top:1.5px dotted #94a3b8}

.mini-map{
  position:absolute;
  right:420px;
  bottom:22px;
  width:180px;
  height:92px;
  padding:8px;
  border-radius:14px;
  z-index:16;
}

.mini-map svg{
  width:100%;
  height:100%;
}

.map-controls{
  position:absolute;
  right:22px;
  bottom:22px;
  display:flex;
  gap:7px;
  padding:9px;
  border-radius:18px;
  z-index:20;
}

.map-controls button{
  width:66px;
  height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:14px;
}

.map-controls button:hover{background:#f8fafc}

.map-controls b{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #e2e8f0;
  border-radius:50%;
  background:#fff;
  font-size:20px;
  font-weight:600;
}

.map-controls span{
  color:#334155;
  font-size:11px;
}

.loading{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:#64748b;
  box-shadow:var(--shadow-soft);
  z-index:60;
}

.loading.hidden{display:none}

.edge{
  fill:none;
  pointer-events:none;
}

.edge.direct{
  stroke-width:1.35;
  opacity:.48;
}

.edge.indirect{
  stroke-width:1.15;
  opacity:.40;
  stroke-dasharray:8 8;
}

.edge.reference{
  stroke:#a8b3c4!important;
  stroke-width:.9;
  opacity:.28;
  stroke-dasharray:2 5;
}

.edge.dimmed,
.node.dimmed,
.label.dimmed{
  opacity:.08!important;
}

.edge.highlight{
  stroke-width:2.4;
  opacity:.95;
}

.node{cursor:pointer}

.node circle.outer{
  opacity:.12;
}

.node circle.main{
  stroke:#fff;
  stroke-width:2;
}

.node.selected circle.main{
  stroke:#2563eb;
  stroke-width:4;
  filter:drop-shadow(0 10px 16px rgba(59,130,246,.25));
}

.node.hidden,
.edge.hidden,
.label.hidden{
  display:none;
}

.node-icon{
  pointer-events:none;
  font-size:17px;
  font-weight:800;
  text-anchor:middle;
  dominant-baseline:middle;
  fill:#fff;
}

.label{
  pointer-events:none;
  fill:#111827;
  font-weight:680;
  text-anchor:middle;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:4px;
  stroke-linejoin:round;
}

.label.large{font-size:19px;font-weight:850}
.label.medium{font-size:14px}
.label.small{font-size:12px;font-weight:560}
.label.muted{fill:#64748b;font-size:11px;font-weight:520}

body.dark{
  --bg:#0f172a;
  --card:rgba(15,23,42,.88);
  --text:#f8fafc;
  --muted:#94a3b8;
  --border:rgba(148,163,184,.22);
  background:
    radial-gradient(circle at 52% 26%, rgba(59,130,246,.14), transparent 28%),
    radial-gradient(circle at 24% 54%, rgba(88,189,125,.12), transparent 34%),
    #0f172a;
}

body.dark .detail-panel,
body.dark .brand-card,
body.dark .search-card,
body.dark .top-tools button,
body.dark .mini-card,
body.dark .legend,
body.dark .mini-map,
body.dark .map-controls,
body.dark .layer-menu,
body.dark .search-results{
  background:rgba(15,23,42,.88);
}

body.dark .search-card input,
body.dark .panel-body p,
body.dark .map-controls span,
body.dark .legend-body{
  color:#f8fafc;
}

body.dark .label{
  fill:#e5edf8;
  stroke:#0f172a;
}

body.dark .map-controls b,
body.dark .tag-list button{
  background:#111827;
  border-color:#334155;
}

body.dark .tabs,
body.dark .panel-foot{
  border-color:#263244;
}

@media(max-width:1100px){
  .map-stage{padding:120px 24px 140px}
  .brand-card{min-width:auto}
  .search-card{top:96px;width:calc(100vw - 36px)}
  .top-tools{top:164px;right:18px}
  .detail-panel{right:18px;top:auto;bottom:118px;width:calc(100vw - 36px)}
  .mini-card,.mini-map{display:none}
}

.atlas-panel-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 14px;
  background: rgba(248,250,252,.72);
}
.atlas-panel-meta div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
}
.atlas-panel-meta dt {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}
.atlas-panel-meta dd {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: #0f172a;
}
.atlas-panel-section {
  margin-top: 14px;
}
.atlas-panel-section ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.atlas-panel-section li {
  margin: 5px 0;
  font-size: 12px;
}

/* === ATLAS UI FIX STEP 8 START === */
.loading[hidden], .atlas-hidden { display: none !important; }
.tabs button { cursor: pointer; }
.tabs button.active { color: #2563eb; border-bottom: 2px solid #2563eb; font-weight: 800; }
.panel-meta { display: grid; gap: 8px; margin: 16px 0; padding: 14px; border: 1px solid rgba(148,163,184,.22); border-radius: 18px; background: rgba(248,250,252,.72); }
.panel-meta div { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: start; }
.panel-meta dt { font-size: 11px; color: #64748b; font-weight: 800; }
.panel-meta dd { margin: 0; font-size: 12px; color: #0f172a; overflow-wrap: anywhere; }
.panel-meta a { color: #2563eb; text-decoration: none; }
.panel-list { display: grid; gap: 10px; margin-top: 12px; }
.panel-list button, .inline-jumps button { width: 100%; border: 1px solid rgba(148,163,184,.25); border-radius: 16px; background: #fff; padding: 10px 12px; text-align: left; cursor: pointer; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.panel-list button strong { display: block; font-size: 13px; color: #0f172a; }
.panel-list button span { display: block; margin-top: 4px; font-size: 11px; color: #64748b; }
.inline-jumps { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-jumps button { width: auto; font-weight: 800; }
.empty-note { color: #64748b; font-size: 13px; line-height: 1.65; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80; display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(148,163,184,.24); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 24px 60px rgba(15,23,42,.15); }
.search-card { position: relative; }
.search-results button { border: 0; border-radius: 14px; background: #f8fafc; padding: 10px 12px; text-align: left; cursor: pointer; }
.search-results button strong { display: block; color: #0f172a; }
.search-results button span { display: block; color: #64748b; font-size: 11px; }
.top-tools button.active { background: #2563eb; color: #fff; }
.layer-menu button { border: 1px solid rgba(148,163,184,.24); border-radius: 999px; padding: 8px 11px; background: #fff; cursor: pointer; text-align: left; }
.detail-panel.is-maximized { position: fixed !important; inset: 24px !important; width: auto !important; height: auto !important; max-width: none !important; z-index: 120 !important; }
.detail-panel[style*="display: none"] + .mini-card { display: flex !important; }
.legend.is-collapsed .legend-body { display: none; }
.resize-grip { cursor: nwse-resize; }
.atlas-node text { pointer-events: none; user-select: none; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 4px; stroke-linejoin: round; }
.atlas-node circle { transition: r .15s ease, stroke-width .15s ease; }
body.atlas-dark { background: #020617; color: #e5e7eb; }
body.atlas-dark .brand-card, body.atlas-dark .search-card, body.atlas-dark .top-tools button, body.atlas-dark .detail-panel, body.atlas-dark .mini-card, body.atlas-dark .legend, body.atlas-dark .map-controls, body.atlas-dark .mini-map, body.atlas-dark .layer-menu { background: rgba(15,23,42,.92); color: #e5e7eb; border-color: rgba(148,163,184,.22); }
body.atlas-dark input { background: rgba(15,23,42,.9); color: #e5e7eb; }
body.atlas-dark .panel-meta, body.atlas-dark .panel-list button, body.atlas-dark .inline-jumps button, body.atlas-dark .search-results, body.atlas-dark .search-results button { background: rgba(15,23,42,.92); color: #e5e7eb; }
body.atlas-dark .panel-meta dd, body.atlas-dark .panel-list button strong, body.atlas-dark .search-results button strong { color: #e5e7eb; }
body.atlas-dark .atlas-node text { fill: #e5e7eb; stroke: rgba(2,6,23,.85); }
@media (max-width: 900px) {
  .detail-panel { left: 12px !important; right: 12px !important; width: auto !important; top: auto !important; bottom: 12px !important; max-height: 58vh; overflow: auto; }
}
/* === ATLAS UI FIX STEP 8 END === */

/* === ATLAS UI COMPACT STEP 9 FINAL START === */
:root{
  --atlas-glass-light:rgba(255,255,255,.72);
  --atlas-glass-light-strong:rgba(255,255,255,.84);
  --atlas-glass-dark:rgba(15,23,42,.70);
  --atlas-glass-dark-strong:rgba(15,23,42,.84);
  --atlas-navy:#07111f;
  --atlas-navy-2:#0b1628;
  --atlas-blue:#2563eb;
  --atlas-text-dark:#f8fafc;
  --atlas-muted-dark:#cbd5e1;
}

.brand-card,
.search-card,
.top-tools button,
.detail-panel,
.mini-card,
.legend,
.mini-map,
.map-controls,
.layer-menu,
.search-results{
  background:var(--atlas-glass-light)!important;
  backdrop-filter:blur(22px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.25)!important;
  border-color:rgba(148,163,184,.24)!important;
  box-shadow:0 14px 38px rgba(15,23,42,.08)!important;
}

.brand-card{
  top:14px!important;
  left:16px!important;
  height:50px!important;
  min-width:176px!important;
  padding:8px 12px!important;
  gap:9px!important;
  border-radius:16px!important;
}
.brand-logo{width:33px!important;height:33px!important;background-size:8px 8px,8px 8px!important;}
.brand-card strong{font-size:14px!important;line-height:1.05!important;letter-spacing:-.03em!important;}
.brand-card span{margin-top:3px!important;font-size:10.5px!important;}

.search-card{
  top:14px!important;
  height:46px!important;
  width:min(460px,36vw)!important;
  padding:0 14px!important;
  gap:10px!important;
  border-radius:999px!important;
}
.search-icon{font-size:20px!important;line-height:1!important;}
.search-card input{font-size:13px!important;}
.search-card kbd{font-size:10px!important;opacity:.72;}
.search-results{top:calc(100% + 8px)!important;border-radius:16px!important;}

.top-tools{
  top:14px!important;
  right:16px!important;
  gap:8px!important;
  align-items:center!important;
}
.top-tools button{
  position:relative!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  padding:0!important;
  justify-content:center!important;
  border-radius:14px!important;
  font-size:16px!important;
  font-weight:800!important;
}
.top-tools button span,
.top-tools button small{display:none!important;}
.top-tools button::after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:6px 9px;
  border-radius:10px;
  background:rgba(15,23,42,.92);
  color:#fff;
  font-size:11px;
  font-weight:700;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
  transition:.14s ease;
  z-index:200;
}
.top-tools button:hover::after,
.top-tools button:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0);}
.top-tools button.active{background:rgba(37,99,235,.90)!important;color:#fff!important;}

.layer-menu{
  top:68px!important;
  right:16px!important;
  width:210px!important;
  padding:12px!important;
  border-radius:16px!important;
}
.layer-menu label{font-size:12.5px!important;padding:7px 4px!important;}

.map-stage{padding:70px 405px 78px 52px!important;}

.detail-panel{
  top:128px!important;
  right:22px!important;
  width:352px!important;
  min-width:300px!important;
  min-height:315px!important;
  max-height:calc(100vh - 178px)!important;
  border-radius:19px!important;
}
.panel-head{padding:18px 18px 12px!important;gap:10px!important;}
.panel-title{gap:11px!important;}
.panel-node-icon{width:38px!important;height:38px!important;font-size:17px!important;}
.panel-title h1{font-size:17px!important;line-height:1.15!important;}
.panel-title span{font-size:11px!important;margin-top:3px!important;}
.window-actions{gap:6px!important;}
.window-actions button{width:24px!important;height:24px!important;font-size:16px!important;border-radius:8px!important;}
.tabs{padding:0 16px!important;}
.tabs button{padding:12px 0 10px!important;font-size:12px!important;}
.panel-body{padding:15px 18px 18px!important;max-height:calc(100vh - 310px);overflow:auto;}
.panel-body p{font-size:13px!important;line-height:1.62!important;}
.panel-body h2{margin:18px 0 10px!important;font-size:12.5px!important;}
.tag-list{gap:7px!important;}
.tag-list button{padding:7px 10px!important;font-size:11.5px!important;}
.panel-foot{padding:10px 16px!important;font-size:10px!important;}
.panel-meta{margin:12px 0!important;padding:11px!important;border-radius:14px!important;gap:6px!important;}
.panel-meta div{grid-template-columns:74px 1fr!important;gap:8px!important;}
.panel-meta dt{font-size:10px!important;}
.panel-meta dd{font-size:11px!important;}
.panel-list{gap:8px!important;}
.panel-list button,.inline-jumps button{border-radius:13px!important;padding:9px 10px!important;}
.panel-list button strong{font-size:12px!important;}
.panel-list button span{font-size:10.5px!important;}
.empty-note{font-size:12px!important;}

.mini-card{
  display:none;
  top:auto!important;
  right:22px!important;
  bottom:102px!important;
  width:352px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
}
.mini-icon{width:34px!important;height:34px!important;}
.mini-card strong{font-size:14px!important;}
.mini-card span{font-size:10.5px!important;}

.legend{
  left:16px!important;
  bottom:20px!important;
  width:248px!important;
  border-radius:16px!important;
}
.legend-head{padding:11px 14px!important;}
.legend-body{font-size:10px!important;padding:0 14px 13px!important;gap:10px!important;}
.legend.is-collapsed{width:118px!important;}
.legend.is-collapsed .legend-body{display:none!important;}

.mini-map{right:386px!important;bottom:20px!important;width:152px!important;height:78px!important;border-radius:13px!important;}
.map-controls{
  right:16px!important;
  bottom:20px!important;
  gap:5px!important;
  padding:7px!important;
  border-radius:16px!important;
}
.map-controls button{width:50px!important;height:48px!important;border-radius:12px!important;gap:4px!important;}
.map-controls b{width:24px!important;height:24px!important;font-size:16px!important;}
.map-controls span{font-size:9.5px!important;}
.map-controls #darkMode{display:none!important;}

body.atlas-dark,
body.dark{
  --bg:var(--atlas-navy)!important;
  --card:var(--atlas-glass-dark)!important;
  --text:var(--atlas-text-dark)!important;
  --muted:var(--atlas-muted-dark)!important;
  color:var(--atlas-text-dark)!important;
  background:
    radial-gradient(circle at 48% 22%, rgba(37,99,235,.18), transparent 30%),
    radial-gradient(circle at 22% 72%, rgba(20,184,166,.12), transparent 34%),
    linear-gradient(135deg,#06101f 0%,#0b1628 48%,#07111f 100%)!important;
}
body.atlas-dark .brand-card,
body.atlas-dark .search-card,
body.atlas-dark .top-tools button,
body.atlas-dark .detail-panel,
body.atlas-dark .mini-card,
body.atlas-dark .legend,
body.atlas-dark .mini-map,
body.atlas-dark .map-controls,
body.atlas-dark .layer-menu,
body.atlas-dark .search-results,
body.dark .brand-card,
body.dark .search-card,
body.dark .top-tools button,
body.dark .detail-panel,
body.dark .mini-card,
body.dark .legend,
body.dark .mini-map,
body.dark .map-controls,
body.dark .layer-menu,
body.dark .search-results{
  background:var(--atlas-glass-dark)!important;
  border-color:rgba(148,163,184,.22)!important;
  color:var(--atlas-text-dark)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24)!important;
}
body.atlas-dark .detail-panel,
body.dark .detail-panel{background:var(--atlas-glass-dark-strong)!important;}
body.atlas-dark .brand-card strong,
body.atlas-dark .panel-title h1,
body.atlas-dark .panel-body p,
body.atlas-dark .panel-body h2,
body.atlas-dark .legend-head strong,
body.atlas-dark .mini-card strong,
body.atlas-dark .search-results button strong,
body.atlas-dark .panel-list button strong,
body.atlas-dark .panel-meta dd,
body.dark .brand-card strong,
body.dark .panel-title h1,
body.dark .panel-body p,
body.dark .panel-body h2,
body.dark .legend-head strong,
body.dark .mini-card strong,
body.dark .search-results button strong,
body.dark .panel-list button strong,
body.dark .panel-meta dd{color:#f8fafc!important;}
body.atlas-dark .brand-card span,
body.atlas-dark .panel-title span,
body.atlas-dark .legend-body,
body.atlas-dark .legend-body b,
body.atlas-dark .panel-foot,
body.atlas-dark .map-controls span,
body.atlas-dark .mini-card span,
body.atlas-dark .panel-list button span,
body.atlas-dark .panel-meta dt,
body.atlas-dark .empty-note,
body.dark .brand-card span,
body.dark .panel-title span,
body.dark .legend-body,
body.dark .legend-body b,
body.dark .panel-foot,
body.dark .map-controls span,
body.dark .mini-card span,
body.dark .panel-list button span,
body.dark .panel-meta dt,
body.dark .empty-note{color:#cbd5e1!important;}
body.atlas-dark .tabs,
body.atlas-dark .panel-foot,
body.dark .tabs,
body.dark .panel-foot{border-color:rgba(148,163,184,.24)!important;}
body.atlas-dark .tabs button,
body.dark .tabs button{color:#cbd5e1!important;}
body.atlas-dark .tabs button.active,
body.dark .tabs button.active{color:#60a5fa!important;}
body.atlas-dark .panel-meta,
body.atlas-dark .panel-list button,
body.atlas-dark .inline-jumps button,
body.atlas-dark .search-results button,
body.atlas-dark .tag-list button,
body.dark .panel-meta,
body.dark .panel-list button,
body.dark .inline-jumps button,
body.dark .search-results button,
body.dark .tag-list button{
  background:rgba(2,6,23,.38)!important;
  border-color:rgba(148,163,184,.24)!important;
  color:#f8fafc!important;
}
body.atlas-dark .search-card input,
body.dark .search-card input{color:#f8fafc!important;background:transparent!important;}
body.atlas-dark .search-card input::placeholder,
body.dark .search-card input::placeholder{color:#cbd5e1!important;opacity:.88;}
body.atlas-dark .window-actions button,
body.dark .window-actions button{color:#cbd5e1!important;}
body.atlas-dark .window-actions button:hover,
body.dark .window-actions button:hover{background:rgba(148,163,184,.14)!important;}
body.atlas-dark .atlas-node text,
body.dark .atlas-node text{fill:#f8fafc!important;stroke:rgba(2,6,23,.92)!important;}
body.atlas-dark .loading,
body.dark .loading{background:rgba(15,23,42,.88)!important;color:#f8fafc!important;}

@media(max-width:1100px){
  .map-stage{padding:132px 20px 118px!important;}
  .brand-card{top:12px!important;left:12px!important;height:46px!important;min-width:158px!important;}
  .brand-logo{width:30px!important;height:30px!important;}
  .brand-card strong{font-size:13px!important;}
  .brand-card span{font-size:10px!important;}
  .search-card{top:64px!important;left:12px!important;right:12px!important;transform:none!important;width:auto!important;height:42px!important;}
  .top-tools{top:112px!important;left:12px!important;right:auto!important;gap:7px!important;}
  .top-tools button{width:42px!important;height:42px!important;min-width:42px!important;border-radius:13px!important;}
  .layer-menu{top:158px!important;left:12px!important;right:auto!important;width:min(230px,calc(100vw - 24px))!important;}
  .detail-panel{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:8px!important;
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-height:56vh!important;
    border-radius:22px 22px 16px 16px!important;
    overflow:hidden!important;
    z-index:70!important;
  }
  .detail-panel.is-maximized{inset:54px 8px 8px 8px!important;width:auto!important;height:auto!important;max-height:none!important;}
  .panel-head{padding:15px 16px 10px!important;}
  .panel-body{max-height:calc(56vh - 154px)!important;overflow:auto!important;padding:13px 16px 16px!important;}
  .panel-title h1{font-size:16px!important;}
  .tabs{padding:0 12px!important;}
  .tabs button{font-size:11.5px!important;padding:10px 0 9px!important;}
  .panel-foot{display:none!important;}
  .resize-grip{display:none!important;}
  .mini-card{position:fixed!important;left:10px!important;right:10px!important;bottom:8px!important;width:auto!important;z-index:72!important;}
  .legend{left:12px!important;bottom:72px!important;width:46px!important;height:46px!important;border-radius:15px!important;z-index:28!important;}
  .legend .legend-head{height:46px!important;padding:0!important;justify-content:center!important;}
  .legend .legend-head strong{display:none!important;}
  .legend #legendToggle{font-size:18px!important;}
  .legend .legend-body{display:none!important;}
  .legend:not(.is-collapsed){width:246px!important;height:auto!important;}
  .legend:not(.is-collapsed) .legend-head{justify-content:space-between!important;padding:11px 14px!important;}
  .legend:not(.is-collapsed) .legend-head strong{display:block!important;}
  .legend:not(.is-collapsed) .legend-body{display:grid!important;}
  .mini-map{display:none!important;}
  .map-controls{left:70px!important;right:10px!important;bottom:10px!important;justify-content:space-around!important;z-index:45!important;}
  .map-controls button{width:46px!important;height:42px!important;}
  .map-controls span{display:none!important;}
}

@media(max-width:520px){
  .map-stage{padding:160px 8px 86px!important;}
  .brand-card{width:auto!important;max-width:184px!important;}
  .search-card{top:66px!important;height:42px!important;}
  .top-tools{top:116px!important;}
  .top-tools button{width:40px!important;height:40px!important;min-width:40px!important;}
  .detail-panel{max-height:52vh!important;}
  .panel-body{max-height:calc(52vh - 140px)!important;}
}
/* === ATLAS UI COMPACT STEP 9 FINAL END === */

/* === ATLAS_STEP10_HIDE_UNDER_SEARCH_STRIP START ===
   Menghilangkan strip/pill transparan di bawah search bar.
   Patch ini sengaja tidak menyentuh search input, logo, toolbar, legenda, panel, minimap, dan kontrol zoom.
*/
.atlas-search-strip,
.atlas-focus-strip,
.atlas-status-strip,
.atlas-active-strip,
.atlas-filter-strip,
.atlas-current-strip,
.atlas-under-search,
.atlas-search-underbar,
.atlas-top-underbar,
.atlas-floating-status,
.atlas-load-pill,
.atlas-loading-pill,
.atlas-graph-status,
.atlas-mini-status,
.atlas-context-strip,
.atlas-command-strip,
.atlas-search-helper,
.atlas-search-suggestions,
.atlas-search-status,
.atlas-focus-status,
.atlas-layer-status,
.atlas-route-status,
.atlas-top-status,
.atlas-top-meta,
.atlas-progress-strip,
.atlas-progress-pill,
#atlasSearchStrip,
#atlasFocusStrip,
#atlasStatusStrip,
#atlasUnderSearch,
#atlasSearchUnderbar,
#atlasFloatingStatus,
#atlasLoadingPill,
#atlasGraphStatus,
#atlasTopStatus {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Jangan biarkan ada ruang kosong bekas strip di area atas peta. */
.atlas-hero,
.atlas-stage,
.atlas-canvas-wrap,
.atlas-graph-wrap {
  --atlas-under-search-strip-height: 0px !important;
}
/* === ATLAS_STEP10_HIDE_UNDER_SEARCH_STRIP END === */

/* === ATLAS STEP 12 STRIP LEGEND FIX START === */
/* Mask tipis di area toolbar agar label/node peta tidak tampak seperti strip di bawah search. */
.atlas-app::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:92px;
  z-index:16;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(251,252,255,.96) 0%, rgba(251,252,255,.86) 66%, rgba(251,252,255,0) 100%);
}
body.atlas-dark .atlas-app::before,
body.dark .atlas-app::before{
  background:linear-gradient(180deg, rgba(7,17,31,.96) 0%, rgba(7,17,31,.86) 66%, rgba(7,17,31,0) 100%);
}

/* Pastikan dropdown search hanya tampil saat benar-benar ada pencarian. */
#searchResults[hidden],
#searchResults:empty,
.search-card:not(:focus-within) #searchResults{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.search-card:focus-within #searchResults:not(:empty):not([hidden]){
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* Jangan biarkan isi SVG meluber ke area toolbar/search. */
#atlasSvg{
  overflow:hidden!important;
  clip-path:inset(0 0 0 0)!important;
}

/* Legenda baru sesuai data teori politik klasik. */
.legend-body{
  grid-template-columns:1fr 1.18fr!important;
}
.legend-body span{
  line-height:1.35!important;
}
.legend .dot.root{background:#0f172a;}
.legend .dot.domain{background:#2563eb;}
.legend .dot.subdomain{background:#7c3aed;}
.legend .dot.concept{background:#0891b2;}
.legend .dot.figure{background:#dc2626;}
.legend .dot.work{background:#ea580c;}
.legend .dot.source{background:#64748b;}
.legend .rel.structure{border-top:1.8px solid rgba(37,99,235,.78);}
.legend .rel.idea{border-top:1.8px solid rgba(8,145,178,.74);}
.legend .rel.critical{border-top:1.8px dashed rgba(220,38,38,.74);}
.legend .rel.literature{border-top:1.8px dotted rgba(234,88,12,.78);}

body.atlas-dark .legend .dot.root,
body.dark .legend .dot.root{background:#e5e7eb;}
body.atlas-dark .legend .rel.structure,
body.dark .legend .rel.structure{border-color:#60a5fa;}
body.atlas-dark .legend .rel.idea,
body.dark .legend .rel.idea{border-color:#22d3ee;}
body.atlas-dark .legend .rel.critical,
body.dark .legend .rel.critical{border-color:#f87171;}
body.atlas-dark .legend .rel.literature,
body.dark .legend .rel.literature{border-color:#fb923c;}

@media(max-width:1100px){
  .atlas-app::before{height:162px;}
}
/* === ATLAS STEP 12 STRIP LEGEND FIX END === */

/* === ATLAS MOBILE INSTAGRAM NAV STEP 14 START === */
:root{
  --atlas-footer-h:66px;
  --atlas-footer-gap:14px;
  --atlas-mobile-header-h:154px;
  --atlas-safe-bottom:env(safe-area-inset-bottom, 0px);
}

.atlas-svg-icon{
  width:19px;
  height:19px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.top-tools .atlas-svg-icon{width:18px;height:18px;}
.map-controls .atlas-svg-icon{width:21px;height:21px;}
.window-actions .atlas-svg-icon{width:14px;height:14px;}

.top-tools button,
.map-controls button,
.window-actions button,
.mini-card button{
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.top-tools button{
  justify-content:center!important;
  color:#0f172a;
}
.top-tools button span,
.top-tools button small{
  display:none!important;
}
.top-tools button:hover::after,
.top-tools button:focus-visible::after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  white-space:nowrap;
  padding:6px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:rgba(15,23,42,.88);
  color:#fff;
  box-shadow:0 12px 26px rgba(15,23,42,.18);
}

.brand-card,.search-card,.top-tools button,.map-controls,.detail-panel,.mini-card,.legend,.layer-menu{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(24px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(150%)!important;
}
body.atlas-dark .brand-card,
body.atlas-dark .search-card,
body.atlas-dark .top-tools button,
body.atlas-dark .map-controls,
body.atlas-dark .detail-panel,
body.atlas-dark .mini-card,
body.atlas-dark .legend,
body.atlas-dark .layer-menu,
body.dark .brand-card,
body.dark .search-card,
body.dark .top-tools button,
body.dark .map-controls,
body.dark .detail-panel,
body.dark .mini-card,
body.dark .legend,
body.dark .layer-menu{
  background:rgba(8,15,29,.78)!important;
  color:#f8fafc!important;
}

body:not(.atlas-has-search-query) #searchResults,
#searchResults[hidden],
#searchResults:empty{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.atlas-has-search-query #searchResults:not(:empty):not([hidden]){
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

.panel-body{
  scrollbar-width:thin;
  scrollbar-color:rgba(100,116,139,.42) transparent;
}
.panel-body::-webkit-scrollbar{width:7px;}
.panel-body::-webkit-scrollbar-track{background:transparent;}
.panel-body::-webkit-scrollbar-thumb{background:rgba(100,116,139,.36);border-radius:999px;}

@media(max-width:760px){
  html,body{overflow:hidden!important;}
  .atlas-app{
    background:
      radial-gradient(circle at 50% 8%, rgba(59,130,246,.055), transparent 32%),
      linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.96));
  }
  body.atlas-dark .atlas-app,
  body.dark .atlas-app{
    background:
      radial-gradient(circle at 50% 10%, rgba(59,130,246,.14), transparent 30%),
      linear-gradient(180deg, #07111f 0%, #0b1628 100%);
  }

  .atlas-app::before{
    height:var(--atlas-mobile-header-h)!important;
    z-index:18!important;
    background:linear-gradient(180deg, rgba(251,252,255,.98) 0%, rgba(251,252,255,.92) 76%, rgba(251,252,255,0) 100%)!important;
  }
  body.atlas-dark .atlas-app::before,
  body.dark .atlas-app::before{
    background:linear-gradient(180deg, rgba(7,17,31,.98) 0%, rgba(7,17,31,.92) 76%, rgba(7,17,31,0) 100%)!important;
  }

  .brand-card{
    top:10px!important;
    left:12px!important;
    height:42px!important;
    min-width:0!important;
    width:auto!important;
    max-width:178px!important;
    padding:8px 11px!important;
    gap:8px!important;
    border-radius:15px!important;
    z-index:42!important;
  }
  .brand-logo{width:28px!important;height:28px!important;flex:0 0 28px!important;}
  .brand-card strong{font-size:12.5px!important;line-height:1.05!important;}
  .brand-card span{font-size:9.5px!important;margin-top:2px!important;}

  .search-card{
    top:62px!important;
    left:12px!important;
    right:12px!important;
    transform:none!important;
    width:auto!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 12px!important;
    gap:9px!important;
    border-radius:19px!important;
    z-index:44!important;
  }
  .search-icon{font-size:18px!important;line-height:1!important;}
  .search-card input{font-size:12.5px!important;min-width:0!important;}
  .search-card kbd{font-size:9.5px!important;}

  .top-tools{
    position:fixed!important;
    top:109px!important;
    left:12px!important;
    right:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    z-index:45!important;
  }
  .top-tools button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    padding:0!important;
    border-radius:14px!important;
    box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
  }
  .top-tools button.active{
    color:#2563eb!important;
    background:rgba(219,234,254,.88)!important;
  }
  body.atlas-dark .top-tools button.active,
  body.dark .top-tools button.active{
    color:#93c5fd!important;
    background:rgba(30,64,175,.34)!important;
  }
  .top-tools button:hover::after,
  .top-tools button:focus-visible::after{display:none!important;}

  .layer-menu{
    position:fixed!important;
    top:152px!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-height:44vh!important;
    overflow:auto!important;
    border-radius:18px!important;
    z-index:70!important;
  }

  .map-stage{
    inset:0!important;
    padding:178px 8px calc(var(--atlas-footer-h) + var(--atlas-footer-gap) + var(--atlas-safe-bottom) + 28px) 8px!important;
  }
  #atlasSvg{overflow:hidden!important;}
  .label{font-size:9px!important;stroke-width:3px!important;}
  .label.large{font-size:11px!important;}
  .label.medium{font-size:9.5px!important;}
  .label.small{font-size:8.4px!important;}
  .node circle.main{stroke-width:1.7!important;}

  .detail-panel{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(var(--atlas-footer-h) + var(--atlas-footer-gap) + var(--atlas-safe-bottom) + 10px)!important;
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-height:48vh!important;
    height:auto!important;
    border-radius:22px!important;
    z-index:62!important;
    overflow:hidden!important;
    box-shadow:0 20px 56px rgba(15,23,42,.16)!important;
  }
  .detail-panel.is-maximized,
  .detail-panel.maximized{
    inset:58px 8px calc(var(--atlas-footer-h) + var(--atlas-footer-gap) + var(--atlas-safe-bottom) + 8px) 8px!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    z-index:74!important;
  }
  .panel-head{padding:13px 14px 8px!important;gap:8px!important;cursor:default!important;}
  .panel-node-icon{width:35px!important;height:35px!important;font-size:15px!important;}
  .panel-title{gap:10px!important;min-width:0!important;}
  .panel-title h1{font-size:15.5px!important;line-height:1.15!important;max-width:210px!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .panel-title span{font-size:10.5px!important;margin-top:2px!important;}
  .window-actions{gap:6px!important;}
  .window-actions button{width:25px!important;height:25px!important;border-radius:8px!important;}
  .tabs{padding:0 10px!important;}
  .tabs button{font-size:11px!important;padding:9px 0 8px!important;}
  .panel-body{
    padding:12px 14px 14px!important;
    max-height:calc(48vh - 116px)!important;
    overflow:auto!important;
  }
  .detail-panel.is-maximized .panel-body,
  .detail-panel.maximized .panel-body{max-height:calc(100vh - 210px)!important;}
  .panel-body p{font-size:12.5px!important;line-height:1.62!important;}
  .panel-body h2{font-size:12.5px!important;margin:16px 0 8px!important;}
  .panel-meta{margin:10px 0!important;padding:10px!important;border-radius:14px!important;}
  .panel-meta div{grid-template-columns:68px 1fr!important;gap:8px!important;}
  .panel-meta dt{font-size:9.5px!important;}
  .panel-meta dd{font-size:10.5px!important;}
  .panel-list{gap:8px!important;}
  .panel-list button,.inline-jumps button{padding:9px 10px!important;border-radius:13px!important;}
  .panel-list button strong{font-size:12px!important;}
  .panel-list button span{font-size:10px!important;}
  .panel-foot,.resize-grip{display:none!important;}

  .mini-card{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(var(--atlas-footer-h) + var(--atlas-footer-gap) + var(--atlas-safe-bottom) + 10px)!important;
    width:auto!important;
    min-height:52px!important;
    padding:10px 12px!important;
    border-radius:18px!important;
    z-index:63!important;
  }
  .mini-icon{width:34px!important;height:34px!important;}
  .mini-card strong{font-size:13px!important;}
  .mini-card span{font-size:10.5px!important;}

  .legend{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:152px!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    max-height:42vh!important;
    overflow:auto!important;
    border-radius:18px!important;
    z-index:71!important;
    display:block!important;
  }
  .legend[hidden]{display:none!important;}
  .legend .legend-head{height:auto!important;padding:12px 14px!important;justify-content:space-between!important;}
  .legend .legend-head strong{display:block!important;font-size:13px!important;}
  .legend #legendToggle{font-size:14px!important;}
  .legend .legend-body{display:grid!important;grid-template-columns:1fr 1fr!important;padding:0 14px 14px!important;font-size:10.5px!important;}
  .legend.is-collapsed .legend-body,
  .legend.collapsed .legend-body{display:grid!important;}

  .mini-map{display:none!important;}
  .map-controls{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(var(--atlas-safe-bottom) + 12px)!important;
    transform:translateX(-50%)!important;
    width:min(330px, calc(100vw - 34px))!important;
    height:var(--atlas-footer-h)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-around!important;
    gap:0!important;
    padding:7px 10px!important;
    border-radius:999px!important;
    z-index:80!important;
    box-shadow:0 18px 42px rgba(15,23,42,.18)!important;
  }
  .map-controls button{
    width:52px!important;
    height:52px!important;
    border-radius:50%!important;
    padding:0!important;
    gap:0!important;
    display:grid!important;
    place-items:center!important;
  }
  .map-controls button b{
    width:auto!important;
    height:auto!important;
    border:0!important;
    background:transparent!important;
    display:grid!important;
    place-items:center!important;
    font-size:0!important;
  }
  .map-controls button span{display:none!important;}
  .map-controls button:hover,
  .map-controls button:focus-visible{background:rgba(37,99,235,.10)!important;color:#2563eb!important;}
  body.atlas-dark .map-controls button:hover,
  body.atlas-dark .map-controls button:focus-visible,
  body.dark .map-controls button:hover,
  body.dark .map-controls button:focus-visible{background:rgba(96,165,250,.14)!important;color:#93c5fd!important;}
}

@media(max-width:390px){
  .panel-title h1{max-width:170px!important;}
  .map-controls{width:calc(100vw - 28px)!important;}
  .map-controls button{width:49px!important;height:49px!important;}
}
/* === ATLAS MOBILE INSTAGRAM NAV STEP 14 END === */

/* === ATLAS MOBILE HEADER SEARCH STEP 15 START === */
@media(max-width:760px){
  :root{
    --atlas-mobile-header-h:118px;
  }

  .atlas-app::before{
    height:128px!important;
  }

  .brand-card{
    top:10px!important;
    left:14px!important;
    right:auto!important;
    height:38px!important;
    max-width:154px!important;
    padding:7px 10px!important;
    border-radius:15px!important;
    z-index:52!important;
  }
  .brand-logo{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
  }
  .brand-card strong{
    font-size:11.5px!important;
    max-width:100px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .brand-card span{
    font-size:9px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .top-tools{
    top:10px!important;
    left:auto!important;
    right:14px!important;
    gap:6px!important;
    z-index:54!important;
  }
  .top-tools button{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:14px!important;
  }
  .top-tools .atlas-svg-icon{
    width:17px!important;
    height:17px!important;
  }

  .search-card{
    top:58px!important;
    left:14px!important;
    right:auto!important;
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
    box-sizing:border-box!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 12px!important;
    border-radius:19px!important;
    overflow:hidden!important;
    z-index:53!important;
  }
  .search-card input{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .search-card kbd{
    display:none!important;
  }

  .layer-menu,
  .legend{
    top:104px!important;
  }

  .map-stage{
    padding-top:134px!important;
  }
}

@media(max-width:390px){
  .brand-card{
    max-width:142px!important;
  }
  .brand-card strong{
    max-width:88px!important;
  }
  .top-tools{
    right:12px!important;
    gap:5px!important;
  }
  .top-tools button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:13px!important;
  }
  .search-card{
    left:12px!important;
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
  }
}

@media(max-width:350px){
  .brand-card{
    max-width:128px!important;
  }
  .brand-card strong{
    max-width:76px!important;
  }
  .top-tools button{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }
  .top-tools{
    gap:4px!important;
  }
}
/* === ATLAS MOBILE HEADER SEARCH STEP 15 END === */

/* === ATLAS FOCUS CLUSTER STEP 25 START === */
.atlas-mode-badge{
  position:fixed;
  left:50%;
  top:104px;
  transform:translateX(-50%);
  z-index:42;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(255,255,255,.74);
  color:#334155;
  font-size:11px;
  font-weight:850;
  letter-spacing:.01em;
  box-shadow:0 14px 36px rgba(15,23,42,.08);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  cursor:pointer;
  user-select:none;
}
body.atlas-dark .atlas-mode-badge,
body.dark .atlas-mode-badge{
  background:rgba(8,15,29,.76);
  color:#dbeafe;
  border-color:rgba(148,163,184,.22);
}
.atlas-node-label{
  pointer-events:none;
  user-select:none;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill:#0f172a;
  paint-order:stroke;
  stroke:rgba(255,255,255,.9);
  stroke-width:4px;
  stroke-linejoin:round;
  dominant-baseline:middle;
}
.atlas-label-large{font-size:18px;font-weight:900;letter-spacing:-.02em;}
.atlas-label-medium{font-size:13px;font-weight:850;}
.atlas-label-small{font-size:10.5px;font-weight:760;}
.atlas-edge{transition:stroke .16s ease, stroke-width .16s ease, opacity .16s ease;}
.atlas-edge.is-strong{opacity:1;}
.atlas-node circle{transition:r .14s ease, fill .14s ease, stroke-width .14s ease;}
.atlas-node:hover circle:nth-of-type(2){stroke-width:3;}
.atlas-node.selected circle:nth-of-type(2){filter:url(#atlasSelectedShadow);}
body[data-atlas-mode="overview"] #focusButton,
body[data-atlas-mode="cluster"] #focusButton,
body[data-atlas-mode="focus"] #focusButton,
body[data-atlas-mode="all"] #focusButton{position:relative;}
body[data-atlas-mode="all"] #allGraphButton{color:#2563eb!important;background:rgba(219,234,254,.88)!important;}
body.atlas-dark .atlas-node-label,
body.dark .atlas-node-label{fill:#f8fafc;stroke:rgba(2,6,23,.88);}
body.atlas-dark body[data-atlas-mode="all"] #allGraphButton,
body.dark body[data-atlas-mode="all"] #allGraphButton{color:#93c5fd!important;background:rgba(30,64,175,.34)!important;}
@media(max-width:760px){
  .atlas-mode-badge{
    top:102px;
    left:14px;
    right:14px;
    transform:none;
    text-align:center;
    padding:6px 10px;
    font-size:10px;
    max-width:none;
    z-index:41;
  }
  .map-stage{padding-top:136px!important;}
  .atlas-label-large{font-size:12px;}
  .atlas-label-medium{font-size:9.8px;}
  .atlas-label-small{font-size:8.2px;}
}
@media(max-width:390px){
  .atlas-mode-badge{font-size:9.4px;padding:5px 8px;}
}
/* === ATLAS FOCUS CLUSTER STEP 25 END === */

/* === ATLAS LAZY LOAD STEP 26 START === */
body[data-atlas-mode="overview"] .atlas-mode-badge::before,
body[data-atlas-mode="cluster"] .atlas-mode-badge::before,
body[data-atlas-mode="focus"] .atlas-mode-badge::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
  vertical-align:1px;
}
body[data-atlas-mode="all"] .atlas-mode-badge::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:999px;
  background:#f97316;
  box-shadow:0 0 0 4px rgba(249,115,22,.14);
  vertical-align:1px;
}
/* === ATLAS LAZY LOAD STEP 26 END === */

/* === ATLAS STEP 29 ADAPTIVE LAYOUT START === */
#atlasSvg{overflow:hidden;}
.atlas-node{
  transform-box:fill-box;
  transform-origin:center;
  animation:atlasNodeIn .22s ease-out both;
}
@keyframes atlasNodeIn{
  from{opacity:0;transform:scale(.94)}
  to{opacity:1;transform:scale(1)}
}
.atlas-node-label{
  paint-order:stroke;
  stroke-width:4.5px;
  stroke-linejoin:round;
  letter-spacing:-.015em;
}
.atlas-label-large{font-size:17px;font-weight:900;}
.atlas-label-medium{font-size:12.5px;font-weight:850;}
.atlas-label-small{font-size:9.8px;font-weight:780;}
.atlas-label-side-left{text-anchor:end;}
.atlas-label-side-right{text-anchor:start;}
body[data-atlas-mode="focus"] .atlas-edge:not(.is-strong){opacity:.46;stroke-width:.55!important;}
body[data-atlas-mode="cluster"] .atlas-edge:not(.is-strong){opacity:.52;stroke-width:.62!important;}
body[data-atlas-mode="all"] .atlas-node-label{display:none;}
body[data-atlas-mode="all"] .atlas-edge:not(.is-strong){opacity:.28;stroke-width:.38!important;}
.atlas-mode-badge{
  opacity:.72;
  transform:translateX(-50%) scale(.96);
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
}
.atlas-mode-badge:hover{opacity:1;transform:translateX(-50%) scale(1);}
body[data-atlas-mode="focus"] .atlas-mode-badge{opacity:.64;}
.window-actions button,
.mini-card button{
  transition:background .14s ease,color .14s ease,transform .14s ease;
}
.window-actions button:hover,
.mini-card button:hover{transform:translateY(-1px);}
@media(max-width:760px){
  .atlas-label-large{font-size:12.2px;stroke-width:3.5px;}
  .atlas-label-medium{font-size:9.8px;stroke-width:3.2px;}
  .atlas-label-small{display:none;}
  .atlas-mode-badge{opacity:.58;}
  .atlas-mode-badge:hover{opacity:.92;}
}
@media(prefers-reduced-motion:reduce){
  .atlas-node{animation:none!important;}
  .atlas-edge,.atlas-node circle,.atlas-mode-badge{transition:none!important;}
}
/* === ATLAS STEP 29 ADAPTIVE LAYOUT END === */

/* === ATLAS STEP 29C SPACE-AWARE LAYOUT START === */
#atlasSvg{overflow:hidden;}
.atlas-node{transition:opacity .18s ease, transform .22s cubic-bezier(.22,.9,.32,1);}
.atlas-edge{transition:opacity .18s ease, stroke-width .18s ease;}
.atlas-node-label{
  paint-order:stroke;
  stroke:rgba(248,250,252,.92);
  stroke-width:5px;
  stroke-linecap:round;
  stroke-linejoin:round;
  letter-spacing:-.025em;
  pointer-events:none;
}
body.is-dark .atlas-node-label,
body[data-theme="dark"] .atlas-node-label{
  stroke:rgba(15,23,42,.92);
}
.atlas-label-large{font-size:17px;font-weight:900;}
.atlas-label-medium{font-size:11.8px;font-weight:850;}
.atlas-label-small{font-size:9.1px;font-weight:760;opacity:.94;}
body[data-atlas-mode="overview"] .atlas-label-small{opacity:.76;}
body[data-atlas-mode="focus"] .atlas-label-small{font-size:8.8px;}
body[data-atlas-mode="focus"] .atlas-edge:not(.is-strong){opacity:.32!important;stroke-width:.5!important;}
body[data-atlas-mode="cluster"] .atlas-edge:not(.is-strong){opacity:.38!important;stroke-width:.52!important;}
body[data-atlas-mode="overview"] .atlas-edge:not(.is-strong){opacity:.30!important;stroke-width:.46!important;}
.atlas-mode-badge{
  opacity:.56!important;
  backdrop-filter:blur(14px);
  transform:translateX(-50%) scale(.92)!important;
}
.atlas-mode-badge:hover{opacity:.92!important;transform:translateX(-50%) scale(.98)!important;}
@media(max-width:760px){
  .atlas-label-large{font-size:12px;stroke-width:3.6px;}
  .atlas-label-medium{font-size:9.4px;stroke-width:3px;}
  .atlas-label-small{display:none!important;}
  body[data-atlas-mode="overview"] .atlas-node-label:not(.atlas-label-large):not(.atlas-label-medium){display:none!important;}
  .atlas-mode-badge{opacity:.45!important;}
}
@media(prefers-reduced-motion:reduce){
  .atlas-node,.atlas-edge{transition:none!important;animation:none!important;}
}
/* === ATLAS STEP 29C SPACE-AWARE LAYOUT END === */

/* === STEP 30: Panel state + macOS/iOS controls === */
.detail-panel[aria-hidden="true"],
.mini-card[aria-hidden="true"]{
  display:none!important;
  pointer-events:none!important;
}

body.atlas-panel-closed .mini-card,
body.atlas-panel-closed .detail-panel{
  display:none!important;
}

body.atlas-panel-open .mini-card{display:none!important;}
body.atlas-panel-minimized .detail-panel{display:none!important;}

.detail-panel{
  backdrop-filter:blur(20px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.12)!important;
}

.panel-head{
  min-height:54px!important;
  padding:12px 14px!important;
  cursor:grab;
}
.panel-head:active{cursor:grabbing;}

.window-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
}

.window-actions button{
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  min-height:14px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.12), 0 1px 2px rgba(15,23,42,.10)!important;
  font-size:0!important;
  line-height:1!important;
  display:grid!important;
  place-items:center!important;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease!important;
}

.window-actions button:hover{
  transform:scale(1.12)!important;
  filter:saturate(1.08) brightness(1.02)!important;
}

.window-actions button:active{transform:scale(.96)!important;}

#closePanel{background:#ff5f57!important;}
#minimizePanel{background:#ffbd2e!important;}
#maximizePanel{background:#28c840!important;}

.window-actions button svg{
  width:8px!important;
  height:8px!important;
  opacity:0!important;
  color:rgba(15,23,42,.70)!important;
  transition:opacity .16s ease!important;
}
.window-actions:hover button svg,
.window-actions button:focus-visible svg{opacity:.72!important;}

.mini-card{
  gap:10px!important;
  border-radius:22px!important;
  padding:10px 10px 10px 12px!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
}

.mini-card button{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  padding:0!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  font-size:0!important;
  background:rgba(148,163,184,.14)!important;
  border:1px solid rgba(148,163,184,.22)!important;
  color:#475569!important;
  transition:transform .16s ease, background .16s ease, color .16s ease!important;
}

.mini-card button:hover{transform:translateY(-1px)!important;background:rgba(37,99,235,.12)!important;color:#2563eb!important;}
.mini-card button svg{width:15px!important;height:15px!important;}
#closeMini{background:rgba(255,95,87,.12)!important;color:#dc2626!important;border-color:rgba(220,38,38,.18)!important;}
#closeMini:hover{background:rgba(255,95,87,.20)!important;color:#b91c1c!important;}

.panel-foot span{
  font-size:11px!important;
  opacity:.68!important;
}

body.atlas-dark .window-actions button,
body.dark .window-actions button{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 1px 3px rgba(0,0,0,.22)!important;
}
body.atlas-dark .mini-card button,
body.dark .mini-card button{
  background:rgba(15,23,42,.42)!important;
  border-color:rgba(148,163,184,.18)!important;
  color:#cbd5e1!important;
}
body.atlas-dark #closeMini,
body.dark #closeMini{
  background:rgba(248,113,113,.16)!important;
  color:#fca5a5!important;
}

@media (max-width:760px){
  .window-actions button{
    width:15px!important;
    height:15px!important;
    min-width:15px!important;
    min-height:15px!important;
  }
  .panel-head{min-height:48px!important;padding:10px 12px!important;}
  .mini-card{
    bottom:calc(var(--atlas-footer-h, 58px) + var(--atlas-footer-gap, 10px) + var(--atlas-safe-bottom, 0px) + 12px)!important;
    left:12px!important;
    right:12px!important;
    z-index:72!important;
  }
}

/* === STEP 30B MINI-CARD CLOSE FIX START === */
body.atlas-panel-closed #miniCard,
body.atlas-panel-open #miniCard,
body:not(.atlas-panel-minimized) #miniCard {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.atlas-panel-minimized #miniCard {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

body.atlas-panel-closed #detailPanel,
body.atlas-panel-minimized #detailPanel {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.atlas-panel-open #detailPanel {
  display: block;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

#miniCard button,
#detailPanel .window-actions button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin-left: 6px !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  background: rgba(241, 245, 249, .76) !important;
  color: #475569 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

#miniCard button svg,
#detailPanel .window-actions button svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

#miniCard button span,
#miniCard button b,
#detailPanel .window-actions button span,
#detailPanel .window-actions button b {
  display: none !important;
}

#closeMini,
#closePanel {
  background: rgba(254, 226, 226, .82) !important;
  color: #dc2626 !important;
  border-color: rgba(248, 113, 113, .34) !important;
}

#closeMini:hover,
#closePanel:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

#minimizePanel {
  background: rgba(254, 249, 195, .78) !important;
  color: #b45309 !important;
  border-color: rgba(251, 191, 36, .36) !important;
}

#maximizePanel,
#restoreMini {
  background: rgba(220, 252, 231, .78) !important;
  color: #16a34a !important;
  border-color: rgba(74, 222, 128, .34) !important;
}

body.atlas-dark #miniCard button,
body.atlas-dark #detailPanel .window-actions button,
body.dark #miniCard button,
body.dark #detailPanel .window-actions button {
  background: rgba(30, 41, 59, .72) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  color: #cbd5e1 !important;
}

body.atlas-dark #closeMini,
body.atlas-dark #closePanel,
body.dark #closeMini,
body.dark #closePanel {
  background: rgba(127, 29, 29, .72) !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, .34) !important;
}
/* === STEP 30B MINI-CARD CLOSE FIX END === */


/* === ATLAS STEP 31 CSS ONLY START === */
:root {
  --atlas-overlay-soft-bg: rgba(255, 255, 255, .76);
  --atlas-overlay-soft-border: rgba(15, 23, 42, .10);
  --atlas-overlay-soft-shadow: 0 14px 35px rgba(15, 23, 42, .10);
  --atlas-anim-fast: 180ms;
  --atlas-anim-med: 260ms;
}

body.dark,
body[data-theme="dark"],
.dark-mode {
  --atlas-overlay-soft-bg: rgba(15, 23, 42, .62);
  --atlas-overlay-soft-border: rgba(148, 163, 184, .16);
  --atlas-overlay-soft-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

#atlasModeBadge,
.atlas-mode-badge,
.mode-badge,
.graph-mode-badge,
[data-atlas-mode-badge] {
  opacity: .52 !important;
  transform: translateY(0) scale(.96);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  background: var(--atlas-overlay-soft-bg) !important;
  border-color: var(--atlas-overlay-soft-border) !important;
  box-shadow: var(--atlas-overlay-soft-shadow) !important;
  transition: opacity var(--atlas-anim-med) ease, transform var(--atlas-anim-med) ease, filter var(--atlas-anim-med) ease !important;
  pointer-events: auto;
}

#atlasModeBadge:hover,
.atlas-mode-badge:hover,
.mode-badge:hover,
.graph-mode-badge:hover,
[data-atlas-mode-badge]:hover {
  opacity: .94 !important;
  transform: translateY(-1px) scale(1);
}

#atlasMiniMap,
.atlas-minimap,
.minimap,
.graph-minimap,
[data-atlas-minimap] {
  opacity: .38 !important;
  filter: saturate(.84) contrast(.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity var(--atlas-anim-med) ease, filter var(--atlas-anim-med) ease, transform var(--atlas-anim-med) ease !important;
}

#atlasMiniMap:hover,
.atlas-minimap:hover,
.minimap:hover,
.graph-minimap:hover,
[data-atlas-minimap]:hover {
  opacity: .88 !important;
  filter: saturate(1) contrast(1);
  transform: translateY(-1px);
}

#legend,
#atlasLegend,
.atlas-legend,
.legend-panel,
[data-atlas-legend] {
  opacity: .72;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  transition: opacity var(--atlas-anim-med) ease, transform var(--atlas-anim-med) ease, box-shadow var(--atlas-anim-med) ease !important;
}

#legend:hover,
#atlasLegend:hover,
.atlas-legend:hover,
.legend-panel:hover,
[data-atlas-legend]:hover {
  opacity: .98;
  transform: translateY(-1px);
}

#loading,
#atlasLoading,
.atlas-loading,
.loading-overlay,
[data-atlas-loading] {
  transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease !important;
}

#graph svg,
#atlasGraph svg,
.atlas-graph svg,
.graph-canvas svg {
  overflow: visible;
}

#graph .node,
#atlasGraph .node,
.atlas-graph .node,
.graph-canvas .node,
#graph circle,
#atlasGraph circle,
.atlas-graph circle,
.graph-canvas circle {
  transition: transform var(--atlas-anim-med) cubic-bezier(.22,.61,.36,1), opacity var(--atlas-anim-med) ease, r var(--atlas-anim-med) ease, filter var(--atlas-anim-med) ease !important;
}

#graph .link,
#atlasGraph .link,
.atlas-graph .link,
.graph-canvas .link,
#graph line,
#atlasGraph line,
.atlas-graph line,
.graph-canvas line,
#graph path,
#atlasGraph path,
.atlas-graph path,
.graph-canvas path {
  transition: opacity var(--atlas-anim-med) ease, stroke-width var(--atlas-anim-med) ease, stroke var(--atlas-anim-med) ease !important;
}

#graph text,
#atlasGraph text,
.atlas-graph text,
.graph-canvas text {
  paint-order: stroke;
  stroke: rgba(255,255,255,.82);
  stroke-width: 3px;
  stroke-linejoin: round;
  transition: opacity var(--atlas-anim-fast) ease, transform var(--atlas-anim-fast) ease !important;
}

body.dark #graph text,
body.dark #atlasGraph text,
body.dark .atlas-graph text,
body.dark .graph-canvas text,
body[data-theme="dark"] #graph text,
body[data-theme="dark"] #atlasGraph text,
body[data-theme="dark"] .atlas-graph text,
body[data-theme="dark"] .graph-canvas text {
  stroke: rgba(15,23,42,.9);
}

.atlas-panel,
.detail-panel,
.node-panel,
#detailPanel,
#atlasDetailPanel {
  transition: transform var(--atlas-anim-med) cubic-bezier(.22,.61,.36,1), opacity var(--atlas-anim-med) ease, box-shadow var(--atlas-anim-med) ease !important;
}

.atlas-bottom-nav,
.bottom-nav,
.mobile-bottom-nav,
.footer-nav {
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  transition: opacity var(--atlas-anim-med) ease, transform var(--atlas-anim-med) ease !important;
}

@media (max-width: 768px) {
  #atlasModeBadge,
  .atlas-mode-badge,
  .mode-badge,
  .graph-mode-badge,
  [data-atlas-mode-badge] {
    opacity: .42 !important;
    transform: scale(.92);
  }

  #atlasMiniMap,
  .atlas-minimap,
  .minimap,
  .graph-minimap,
  [data-atlas-minimap] {
    opacity: .24 !important;
    transform: scale(.94);
  }

  #atlasMiniMap:hover,
  .atlas-minimap:hover,
  .minimap:hover,
  .graph-minimap:hover,
  [data-atlas-minimap]:hover {
    opacity: .78 !important;
  }

  #legend,
  #atlasLegend,
  .atlas-legend,
  .legend-panel,
  [data-atlas-legend] {
    opacity: .64;
  }

  #graph text,
  #atlasGraph text,
  .atlas-graph text,
  .graph-canvas text {
    stroke-width: 3.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
/* === ATLAS STEP 31 CSS ONLY END === */


/* === ATLAS STEP 40 FULL BLEED VIEWPORT START === */
/* Tujuan: graph memakai seluruh layar. Overlay tidak lagi mengurangi area kanvas. */
html,
body,
.atlas-app{
  width:100vw!important;
  height:100vh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  margin:0!important;
  overflow:hidden!important;
}

.atlas-app{
  position:relative!important;
}

.map-stage{
  position:fixed!important;
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100vw!important;
  height:100vh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  z-index:1!important;
}

#atlasSvg{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100vw!important;
  height:100vh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  touch-action:none!important;
}

.brand-card,
.search-card,
.top-tools,
.layer-menu,
.detail-panel,
.mini-card,
.legend,
.mini-map,
.map-controls{
  position:absolute;
  pointer-events:auto;
}

.brand-card{z-index:40!important;}
.search-card{z-index:45!important;}
.top-tools{z-index:45!important;}
.layer-menu{z-index:50!important;}
.detail-panel{z-index:55!important;}
.mini-card{z-index:52!important;}
.legend{z-index:42!important;}
.mini-map{z-index:42!important;}
.map-controls{z-index:42!important;}

/* Pastikan aturan media lama tidak mengembalikan padding map-stage. */
@media(max-width:1100px){
  .map-stage{padding:0!important;}
}

@media(max-width:900px){
  .map-stage{padding:0!important;}
}
/* === ATLAS STEP 40 FULL BLEED VIEWPORT END === */

/* ATLAS STEP 40B - PANEL BUTTONS CLEAN */
.detail-panel .panel-head{
  align-items:flex-start!important;
  gap:14px!important;
}

.detail-panel .panel-title{
  min-width:0!important;
  flex:1 1 auto!important;
}

.detail-panel .panel-title h1{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

.detail-panel .window-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin-left:10px!important;
  padding-top:0!important;
}

.detail-panel .window-actions button,
.detail-panel #minimizePanel,
.detail-panel #maximizePanel,
.detail-panel #closePanel{
  position:relative!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  line-height:1!important;
  font-size:0!important;
  font-weight:900!important;
  border:1px solid rgba(15,23,42,.11)!important;
  box-shadow:0 9px 20px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.78)!important;
  transform:none!important;
  opacity:1!important;
}

.detail-panel .window-actions button::before,
.detail-panel #minimizePanel::before,
.detail-panel #maximizePanel::before,
.detail-panel #closePanel::before{
  content:"";
  display:block;
  width:13px;
  height:13px;
  background:currentColor;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
}

.detail-panel #minimizePanel{
  color:#92400e!important;
  background:linear-gradient(180deg,#fef3c7 0%,#facc15 100%)!important;
}
.detail-panel #minimizePanel::before{
  height:3px;
  border-radius:999px;
  mask:none;
  -webkit-mask:none;
}

.detail-panel #maximizePanel{
  color:#166534!important;
  background:linear-gradient(180deg,#dcfce7 0%,#22c55e 100%)!important;
}
.detail-panel #maximizePanel::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 5h10v2H7v8H5V5Zm4 4h10v10H9V9Zm2 2v6h6v-6h-6Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 5h10v2H7v8H5V5Zm4 4h10v10H9V9Zm2 2v6h6v-6h-6Z'/%3E%3C/svg%3E");
}

.detail-panel #closePanel{
  color:#991b1b!important;
  background:linear-gradient(180deg,#fee2e2 0%,#ef4444 100%)!important;
}
.detail-panel #closePanel::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E");
}

.detail-panel .window-actions button:hover,
.detail-panel #minimizePanel:hover,
.detail-panel #maximizePanel:hover,
.detail-panel #closePanel:hover{
  transform:translateY(-1px)!important;
  filter:saturate(1.05) brightness(1.02)!important;
  box-shadow:0 12px 26px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.82)!important;
}

.detail-panel .window-actions button:active,
.detail-panel #minimizePanel:active,
.detail-panel #maximizePanel:active,
.detail-panel #closePanel:active{
  transform:translateY(0)!important;
}

body.atlas-dark .detail-panel .window-actions button,
body.dark .detail-panel .window-actions button{
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22)!important;
}

@media(max-width:900px){
  .detail-panel .window-actions{gap:8px!important;margin-left:6px!important;}
  .detail-panel .window-actions button,
  .detail-panel #minimizePanel,
  .detail-panel #maximizePanel,
  .detail-panel #closePanel{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }
}

/* ATLAS STEP 40C - PANEL COLORED SVG FIX */
.detail-panel .panel-head{
  align-items:flex-start!important;
  gap:14px!important;
}
.detail-panel .window-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin-left:12px!important;
  flex:0 0 auto!important;
}
.detail-panel .window-actions button,
.detail-panel #minimizePanel,
.detail-panel #maximizePanel,
.detail-panel #closePanel{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  margin:0!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  position:relative!important;
  background:#fff!important;
  border:1px solid rgba(148,163,184,.32)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85)!important;
  font-size:0!important;
  line-height:0!important;
  color:transparent!important;
}
.detail-panel .window-actions button > *:not(svg),
.detail-panel #minimizePanel > *:not(svg),
.detail-panel #maximizePanel > *:not(svg),
.detail-panel #closePanel > *:not(svg){
  display:none!important;
}
.detail-panel .window-actions button svg,
.detail-panel #minimizePanel svg,
.detail-panel #maximizePanel svg,
.detail-panel #closePanel svg{
  width:18px!important;
  height:18px!important;
  display:block!important;
  overflow:visible!important;
  flex:none!important;
}
.detail-panel .window-actions button svg *{
  vector-effect:non-scaling-stroke;
}
.detail-panel #minimizePanel{
  background:linear-gradient(180deg,#fef3c7 0%, #facc15 100%)!important;
  border-color:#fbbf24!important;
}
.detail-panel #minimizePanel svg,
.detail-panel #minimizePanel svg *{
  stroke:#7c2d12!important;
  fill:none!important;
  stroke-width:2.6!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.detail-panel #maximizePanel{
  background:linear-gradient(180deg,#dcfce7 0%, #22c55e 100%)!important;
  border-color:#16a34a!important;
}
.detail-panel #maximizePanel svg,
.detail-panel #maximizePanel svg *{
  stroke:#14532d!important;
  fill:none!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.detail-panel #closePanel{
  background:linear-gradient(180deg,#fee2e2 0%, #ef4444 100%)!important;
  border-color:#dc2626!important;
}
.detail-panel #closePanel svg,
.detail-panel #closePanel svg *{
  stroke:#7f1d1d!important;
  fill:none!important;
  stroke-width:2.4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.detail-panel .window-actions button:hover,
.detail-panel #minimizePanel:hover,
.detail-panel #maximizePanel:hover,
.detail-panel #closePanel:hover{
  transform:translateY(-1px)!important;
  filter:saturate(1.05) brightness(1.02)!important;
  box-shadow:0 14px 28px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.86)!important;
}
.detail-panel .window-actions button:active,
.detail-panel #minimizePanel:active,
.detail-panel #maximizePanel:active,
.detail-panel #closePanel:active{
  transform:translateY(0)!important;
}
body.atlas-dark .detail-panel .window-actions button,
body.dark .detail-panel .window-actions button{
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18)!important;
}
@media (max-width:900px){
  .detail-panel .window-actions{gap:8px!important;margin-left:8px!important;}
  .detail-panel .window-actions button,
  .detail-panel #minimizePanel,
  .detail-panel #maximizePanel,
  .detail-panel #closePanel{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
  }
  .detail-panel .window-actions button svg,
  .detail-panel #minimizePanel svg,
  .detail-panel #maximizePanel svg,
  .detail-panel #closePanel svg{
    width:16px!important;
    height:16px!important;
  }
}

/* ATLAS STEP 40D - PANEL ICON DEDUP */
.detail-panel .window-actions button,
.detail-panel #minimizePanel,
.detail-panel #maximizePanel,
.detail-panel #closePanel{
  position:relative!important;
}
.detail-panel .window-actions button::before,
.detail-panel .window-actions button::after,
.detail-panel #minimizePanel::before,
.detail-panel #minimizePanel::after,
.detail-panel #maximizePanel::before,
.detail-panel #maximizePanel::after,
.detail-panel #closePanel::before,
.detail-panel #closePanel::after{
  content:none!important;
  display:none!important;
}
.detail-panel .window-actions button > :not(.atlas-panel-icon-svg),
.detail-panel #minimizePanel > :not(.atlas-panel-icon-svg),
.detail-panel #maximizePanel > :not(.atlas-panel-icon-svg),
.detail-panel #closePanel > :not(.atlas-panel-icon-svg){
  display:none!important;
}
.detail-panel .window-actions button svg:not(.atlas-panel-icon-svg),
.detail-panel #minimizePanel svg:not(.atlas-panel-icon-svg),
.detail-panel #maximizePanel svg:not(.atlas-panel-icon-svg),
.detail-panel #closePanel svg:not(.atlas-panel-icon-svg),
.detail-panel .window-actions button span,
.detail-panel .window-actions button i,
.detail-panel .window-actions button img,
.detail-panel .window-actions button .icon,
.detail-panel .window-actions button .iconify,
.detail-panel .window-actions button .lucide,
.detail-panel .window-actions button .material-symbols-rounded,
.detail-panel .window-actions button .material-icons,
.detail-panel .window-actions button .fa,
.detail-panel .window-actions button .fas,
.detail-panel .window-actions button .far{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.detail-panel .atlas-panel-icon-svg{
  position:absolute!important;
  inset:0!important;
  margin:auto!important;
  width:18px!important;
  height:18px!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
}
@media (max-width:900px){
  .detail-panel .atlas-panel-icon-svg{
    width:16px!important;
    height:16px!important;
  }
}

/* ATLAS STEP 40E - TOOLBAR PANEL FONT FIX */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root{
  --atlas-ui-font: "Plus Jakarta Sans", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body,
input,
button,
textarea,
select,
#detailPanel,
#miniCard,
#legendCard,
.atlas-app,
.atlas-shell,
.atlas-toolbar,
.search-shell,
.search-input{
  font-family: var(--atlas-ui-font)!important;
}
#detailPanel .title,
#detailPanel .node-title,
#detailPanel .summary,
#detailPanel .content,
#detailPanel .tabs button,
#miniCard,
.atlas-toolbar button,
.header-actions button{
  font-family: var(--atlas-ui-font)!important;
}
/* Grafik label: usahakan tidak terlalu tebal */
svg text,
.atlas-graph text,
.graph-layer text,
.vis-network + canvas,
.vis-network canvas{
  font-family: var(--atlas-ui-font)!important;
  font-weight: 500!important;
}
/* Matikan tooltip hitam pada tombol header dan tombol panel */
.atlas-control-btn::before,
.atlas-control-btn::after,
.atlas-toolbar button::before,
.atlas-toolbar button::after,
.header-actions button::before,
.header-actions button::after,
.window-actions button::before,
.window-actions button::after,
#detailPanel [title]::before,
#detailPanel [title]::after{
  display:none!important;
  content:none!important;
}
.tippy-box,
.atlas-tooltip,
.tooltip,
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-title]:hover::after,
[data-title]:hover::before{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
/* Biar tombol panel tetap rapi */
#detailPanel .window-actions button,
#miniCard button{
  font-size:0!important;
}
/* Saat panel ditutup, klik node berikutnya boleh buka lagi */
body.atlas-panel-closed #detailPanel{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.atlas-panel-open #detailPanel,
body.atlas-panel-reopen #detailPanel{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}