/* mm-patch.css — safe visual patch. Remove the <link> to this file to undo everything. */

/* 1) Header wordmark: original text-only MACARANAS, gradient that never fades out */
#header a[aria-label="Home"] > span, header a.brand, header a.font-black.flex-shrink-0{
  background-image:linear-gradient(90deg,#f0e1ff 0%,#b084cc 55%,#9a5fd2 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important; color:transparent!important;
}

/* 2) Terminal: real prompt look — no boxed input, block cursor, calm focus line */
#terminal-input, #terminal-input:focus, #terminal-input:focus-visible{
  outline:0!important; box-shadow:none!important; border:0!important; background:transparent!important;
  caret-color:#b084cc; caret-shape:block; color:#e9e2f5; font-family:'JetBrains Mono',monospace;
}
#terminal-input-row{border-top:1px solid rgba(255,255,255,.07)!important; transition:background .2s, box-shadow .2s}
#terminal-input-row:focus-within{background:rgba(176,132,204,.07); box-shadow:inset 2px 0 0 #b084cc}
#terminal-input-row > span{color:#4ade80!important}              /* green prompt arrow */
#terminal-input::placeholder{color:rgba(255,255,255,.3); font-style:normal}

/* 3) Terminal mode switcher (terminal / globe / photo): one clean segmented control */
.display-mode-toggle{display:inline-flex!important;align-items:center;gap:2px!important;padding:3px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.display-mode-btn{width:32px!important;height:28px!important;border-radius:8px!important;border:0!important;
  background:transparent!important;color:rgba(255,255,255,.65)!important;font-size:.82rem!important;
  display:inline-flex!important;align-items:center;justify-content:center;transition:background .2s,color .2s,box-shadow .2s}
.display-mode-btn i{line-height:1;pointer-events:none}
.display-mode-btn:hover{background:rgba(176,132,204,.18)!important;color:#fff!important}
.display-mode-btn.active{background:linear-gradient(135deg,#d2b2ea,#8a55c4)!important;color:#1a0a2a!important;box-shadow:0 2px 10px rgba(176,132,204,.45)}
.display-mode-btn:focus-visible{outline:2px solid #e4c9ff;outline-offset:2px}
@media (max-width:480px){.display-mode-btn{width:36px!important;height:32px!important}}

/* 4) Globe mode: make the globe panel a true continuation of the terminal card
      (same glass background, border, rounded bottom) so all 3 modes match */
.terminal-window:has(+ #globe-display:not([style*="none"])){
  border-bottom-left-radius:0!important; border-bottom-right-radius:0!important; border-bottom-color:transparent!important;
}
#globe-display:not([style*="none"]){
  background-color:rgba(0,0,0,.6)!important; -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.1); border-top:0; border-radius:0 0 1rem 1rem; margin-top:-1px;
  box-shadow:0 25px 50px -12px rgba(176,132,204,.05);
}

/* 5) Mode buttons: all three glyphs the same visual size and perfectly centered
      (the globe glyph is drawn smaller by the icon font, so it gets a size boost) */
.display-mode-btn i{display:block;width:1em;height:1em;line-height:1em;text-align:center;font-size:.95rem!important}
#mode-btn-globe i{font-size:1.08rem!important}
#mode-btn-terminal i{font-size:.9rem!important}
#mode-btn-image i{font-size:.95rem!important}
.display-mode-btn{padding:0!important}

/* 6) header title: no hover lift */
#header a[aria-label="Home"],#header a[aria-label="Home"]:hover,#header a[aria-label="Home"]:focus-visible,header a.brand,header a.brand:hover,header a.font-black.flex-shrink-0,header a.font-black.flex-shrink-0:hover{transform:none!important;filter:none!important;animation:none!important}
#header a[aria-label="Home"]{cursor:pointer}
/* 7) enterprise icon tiles + badge images */
.mm-ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:1.45rem;color:#b084cc;background:linear-gradient(145deg,rgba(176,132,204,.14),rgba(92,45,145,.08));border:1px solid rgba(176,132,204,.28)}
.mm-badge-img{width:88px;height:88px;object-fit:contain;display:block;margin-left:auto;margin-right:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}