html.map-page {
  --bg: var(--bg-page);
  --s1: var(--surface-solid);
  --s2: var(--bg-elevated);
  --s3: color-mix(in srgb, var(--surface-solid) 88%, var(--text-muted) 12%);
  --b1: var(--border);
  --b2: var(--border-strong);
  --b3: var(--accent);
  --cyan: var(--info);
  --cyan2: var(--info);
  --cyan3: var(--info);
  --teal: var(--success);
  --teal2: var(--success);
  --blue: var(--accent);
  --blue2: var(--accent-hover);
  --yellow: var(--warning);
  --red: var(--danger);
  --green: var(--success);
  --dim: var(--text-muted);
  --muted: var(--text-faint);
  --key-clr: var(--info);
  --val-clr: var(--accent-hover);
  --shadow-cyan: var(--shadow-sm);
}

.app{position:relative;z-index:1;max-width:1340px;margin:0 auto;padding:18px;}

/* HEADER */
.hdr{display:flex;align-items:center;gap:18px;padding:22px 26px;margin-bottom:22px;
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);border-radius:18px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);}

.hdr-icon{width:58px;height:58px;background:var(--accent);border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;
  box-shadow:var(--shadow-sm);color:var(--surface-solid);}
.hdr h1{font-size:clamp(20px,3vw,32px);font-weight:700;
  color:var(--accent);
  -webkit-text-fill-color:currentColor;
  font-family:var(--font-mono),monospace;}
.hdr p{color:var(--dim);font-size:13px;margin-top:4px;}
.hdr-pills{margin-right:auto;display:flex;gap:8px;flex-wrap:wrap;}
.hpill{padding:4px 12px;border-radius:50px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;}
.hpill-c{background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.3);color:var(--cyan);}
.hpill-t{background:rgba(13,148,136,0.1);border:1px solid rgba(13,148,136,0.3);color:var(--teal2);}
.hpill-b{background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.3);color:var(--blue2);}

/* LAYOUT */
.layout{display:grid;grid-template-columns:1fr 380px;gap:18px;}
@media(max-width:1050px){.layout{grid-template-columns:1fr;}}

/* PANEL */
.panel{background:var(--s1);border:1px solid var(--b2);border-radius:14px;overflow:hidden;}
.ph{padding:12px 18px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;}
.ph .dot{width:7px;height:7px;border-radius:50%;}

/* LEFT */
.left{display:flex;flex-direction:column;gap:16px;}

/* OPS TABS */
.op-tabs{display:flex;background:var(--s2);padding:4px;border-radius:8px;gap:3px;margin-bottom:14px;}
.op-tab{flex:1;padding:8px 6px;background:transparent;border:none;border-radius:6px;
  color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer;
  transition:all 0.2s;text-align:center;}
.op-tab.active{background:var(--s3);color:var(--cyan);box-shadow:0 1px 4px rgba(0,0,0,0.4);}
.op-tab:hover:not(.active){color:var(--text);}

/* OP CARDS */
.op-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.op-card{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:14px;
  cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;}
.op-card::before{content:'';position:absolute;inset:0;background:transparent;transition:background 0.2s;}
.op-card:hover{border-color:var(--b3);transform:translateY(-2px);}
.op-card:hover::before{background:var(--info-muted);}
.op-card.active{border-color:var(--cyan);background:rgba(6,182,212,0.05);
  box-shadow:var(--shadow-cyan);}
.op-card .oc-method{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--cyan2);margin-bottom:4px;}
.op-card .oc-ar{font-size:12px;color:var(--dim);}
.op-card .oc-badge{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:9px;}
.oc-mut{background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.2);}
.oc-pure{background:rgba(34,197,94,0.1);color:#4ade80;border:1px solid rgba(34,197,94,0.2);}

/* FORM */
.form-area{padding:16px 18px;border-top:1px solid var(--b1);}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:12px;}
.fg{display:flex;flex-direction:column;gap:5px;}
.fg label{font-size:11px;color:var(--dim);font-family:'JetBrains Mono',monospace;}
.inp{background:var(--s3);border:1px solid var(--b2);border-radius:8px;padding:9px 12px;
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;outline:none;
  transition:all 0.2s;direction:ltr;}
.inp:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(6,182,212,0.1);}
.run-btn{padding:10px 24px;background:var(--accent);
  border:none;border-radius:8px;color:var(--surface-solid);font-family:var(--font-sans),sans-serif;
  font-weight:700;font-size:14px;cursor:pointer;transition:all 0.2s;}
.run-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);filter:brightness(1.05);}
.run-btn:active{transform:translateY(0);}

/* OP INFO */
.op-info{padding:14px 18px;background:var(--s2);border-top:1px solid var(--b1);}
.op-desc{font-size:13px;color:var(--dim);line-height:1.7;border-right:3px solid var(--cyan);
  padding-right:12px;background:var(--s3);padding:10px 14px;border-radius:8px;}
.badges-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.badge{padding:3px 10px;border-radius:50px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;}
.b-o1{background:rgba(6,182,212,0.1);color:var(--cyan);border:1px solid rgba(6,182,212,0.25);}
.b-on{background:rgba(234,179,8,0.1);color:var(--yellow);border:1px solid rgba(234,179,8,0.25);}
.b-mut{background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.2);}
.b-pure{background:rgba(34,197,94,0.1);color:#4ade80;border:1px solid rgba(34,197,94,0.2);}
.b-iter{background:rgba(59,130,246,0.1);color:var(--blue2);border:1px solid rgba(59,130,246,0.25);}

/* CODE */
.code-block{background:#020a12;border:1px solid var(--b2);border-radius:10px;overflow:hidden;margin:12px 0;}
.code-hdr{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--s2);border-bottom:1px solid var(--b1);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);}
.cdots{display:flex;gap:5px;}.cdots span{width:9px;height:9px;border-radius:50%;}
.code-
.cc{color:#1a3a52;} .ck{color:#c084fc;} .cm{color:var(--cyan2);} .cs{color:#4ade80;}
.cn{color:#60a5fa;} .co{color:var(--cyan3);} .cf{color:#fb923c;} .cb{color:#f472b6;}

/* RESULT */
.result-box{padding:12px 14px;background:var(--s2);border:1px solid var(--b2);border-radius:8px;margin:10px 0;display:none;}
.result-box.show{display:block;}
.rb-label{font-size:10px;color:var(--dim);font-family:'JetBrains Mono',monospace;margin-bottom:5px;}
.rb-val{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;}
.rb-ok{color:var(--green);} .rb-info{color:var(--cyan2);} .rb-err{color:var(--red);} .rb-warn{color:var(--yellow);}

/* STEP INSIGHT */
.insight{padding:10px 14px;background:var(--info-muted);
  border:1px solid var(--border-strong);border-radius:8px;margin:8px 0;display:none;}
.insight.show{display:block;}
.insight h4{font-size:12px;color:var(--cyan);margin-bottom:5px;display:flex;align-items:center;gap:6px;}
.insight p{font-size:12px;color:var(--dim);line-height:1.7;}

/* ====== MAP VISUAL ====== */
.map-visual{padding:20px 18px;}
.map-container{background:var(--s2);border:1px solid var(--b2);border-radius:12px;overflow:hidden;}
.map-col-header{display:grid;grid-template-columns:1fr 24px 1fr 120px;gap:0;
  padding:8px 16px;background:var(--s3);border-bottom:1px solid var(--b1);}
.mch{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);text-align:center;letter-spacing:1px;text-transform:uppercase;}
.map-rows{min-height:60px;max-height:320px;overflow-y:auto;}
.map-row{display:grid;grid-template-columns:1fr 24px 1fr 120px;
  padding:10px 16px;border-bottom:1px solid var(--b1);align-items:center;
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);cursor:default;position:relative;}
.map-row:last-child{border-bottom:none;}
.map-row:hover{background:rgba(6,182,212,0.04);}
.map-row.entering{animation:rowSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1);}
.map-row.updating{animation:rowFlash 0.5s ease;}
.map-row.removing{animation:rowSlideOut 0.35s ease forwards;}
.map-row.highlighted{background:rgba(6,182,212,0.08);border-right:3px solid var(--cyan);}
@keyframes rowSlideIn{from{opacity:0;transform:translateX(20px) scaleY(0.5);}to{opacity:1;transform:translateX(0) scaleY(1);}}
@keyframes rowFlash{0%{background:rgba(234,179,8,0.2);}100%{background:transparent;}}
@keyframes rowSlideOut{from{opacity:1;transform:scaleY(1);}to{opacity:0;transform:scaleY(0);max-height:0;padding:0;}}

.mr-key{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--key-clr);}
.mr-arrow{color:var(--dim);font-size:14px;text-align:center;}
.mr-val{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--val-clr);}
.mr-type{display:flex;gap:4px;justify-content:flex-end;}
.type-chip{padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:9px;}
.tc-str{background:rgba(34,197,94,0.1);color:#4ade80;border:1px solid rgba(34,197,94,0.2);}
.tc-num{background:rgba(96,165,250,0.1);color:#93c5fd;border:1px solid rgba(96,165,250,0.2);}
.tc-bool{background:rgba(244,114,182,0.1);color:#f9a8d4;border:1px solid rgba(244,114,182,0.2);}
.tc-obj{background:rgba(192,132,252,0.1);color:#d8b4fe;border:1px solid rgba(192,132,252,0.2);}
.tc-null{background:rgba(100,116,139,0.1);color:#94a3b8;border:1px solid rgba(100,116,139,0.2);}
.map-empty{padding:32px;text-align:center;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;}
.map-footer{display:flex;gap:12px;padding:10px 16px;background:var(--s3);border-top:1px solid var(--b1);}
.mf-stat{font-family:'JetBrains Mono',monospace;font-size:11px;}
.mf-stat span{color:var(--dim);} .mf-stat strong{color:var(--cyan2);}

/* SIZE ring */
.size-ring{position:relative;width:80px;height:80px;margin:0 auto 10px;flex-shrink:0;}
.size-ring svg{transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:var(--b2);stroke-width:6;}
.ring-fg{fill:none;stroke:var(--cyan);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset 0.5s ease;}
.ring-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;font-family:'JetBrains Mono',monospace;}
.ring-num{font-size:18px;font-weight:700;color:var(--cyan);}
.ring-label{font-size:9px;color:var(--dim);}

/* RIGHT */
.right{display:flex;flex-direction:column;gap:16px;}

/* HISTORY */
.hist-list{max-height:200px;overflow-y:auto;}
.hist-item{padding:9px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;animation:histIn 0.25s ease;}
@keyframes histIn{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:translateX(0);}}
.hist-item:last-child{border-bottom:none;}
.hi-method{color:var(--cyan);min-width:70px;font-size:10px;}
.hi-kv{color:var(--dim);flex:1;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hi-res{color:var(--yellow);font-size:10px;flex-shrink:0;}
.hi-t{color:var(--muted);font-size:9px;flex-shrink:0;}

/* COMPARE TABLE */
.cmp-table{width:100%;border-collapse:collapse;font-size:11px;font-family:'JetBrains Mono',monospace;}
.cmp-table th{padding:7px 12px;background:var(--s3);color:var(--dim);text-align:right;font-weight:600;border-bottom:1px solid var(--b1);}
.cmp-table td{padding:7px 12px;border-bottom:1px solid var(--b1);color:var(--text);vertical-align:top;}
.cmp-table tr:last-child td{border-bottom:none;}
.cmp-table td:first-child{color:var(--cyan2);font-weight:600;}
.cmp-table .obj-col{color:var(--yellow);}
.cmp-table .map-col{color:var(--cyan);}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--s1);}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--cyan);}

/* Iteration viz */
.iter-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  background:var(--s3);border:1px solid var(--b2);border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;margin:3px;}
.iter-chip .ic-k{color:var(--key-clr);}
.iter-chip .ic-arr{color:var(--dim);}
.iter-chip .ic-v{color:var(--val-clr);}
.iter-chip.active-chip{border-color:var(--cyan);background:rgba(6,182,212,0.08);animation:chipPulse 0.8s ease;}
@keyframes chipPulse{0%{box-shadow:0 0 0 0 rgba(6,182,212,0.4);}100%{box-shadow:0 0 0 8px rgba(6,182,212,0);}}