/* ============================================================
   SparkMyName™ — Global Language + Currency widget
   Added 2026-09-03. Self-contained (uses explicit hex values, not
   design-system CSS variables) so it renders correctly on every
   page regardless of which stylesheet stack that page loads —
   including account.html / workspace.html, which are self-styled
   islands outside the shared styles.css system.
   ============================================================ */
.smnLC .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;
  border:0!important}
.smnLC{display:inline-flex;align-items:center;gap:6px;flex:none}
.smnSel{position:relative;display:inline-flex;align-items:center;height:40px;min-height:40px;
  border:1.5px solid #E6D9BA;border-radius:10px;background:#fff;padding:0 8px 0 30px;
  font:700 12.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:#3E3A32;transition:border-color .15s,background .15s}
.smnSel:focus-within{border-color:#7E6018;box-shadow:0 0 0 3px rgba(168,128,42,.18)}
.smnSel-i{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:13px;
  line-height:1;pointer-events:none;color:#7E6018}
.smnSel select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:0;
  background:transparent;color:inherit;font:inherit;padding:0 14px 0 0;cursor:pointer;
  outline:none;height:100%}
.smnSel::after{content:'';position:absolute;right:8px;top:50%;width:6px;height:6px;
  border-right:1.5px solid #7E6018;border-bottom:1.5px solid #7E6018;
  transform:translateY(-65%) rotate(45deg);pointer-events:none}
.smnSel select:focus-visible{outline:3px solid #9A6B2F;outline-offset:3px;border-radius:6px}

/* Dark-header contexts (midnight variants, if ever re-enabled) */
body.mgInner .smnSel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#F2F4F8}
body.mgInner .smnSel-i{color:#E7D9A8}
body.mgInner .smnSel::after{border-color:#E7D9A8}

/* Minimal/topbar header variant — tighter spacing, no border chrome */
.topbar .smnLC{gap:4px}
.topbar .smnSel{height:34px;padding:0 6px 0 26px;border-radius:8px;font-size:11.5px}
.topbar .smnSel-i{left:7px;font-size:12px}

@media(max-width:960px){
  .smnSel{padding:0 6px 0 28px}
  .smnSel select{padding-right:10px}
}
@media(max-width:560px){
  .smnLC{gap:4px}
  .smnSel{height:36px;padding:0 4px 0 26px;border-radius:8px}
  .smnSel-i{left:6px;font-size:12px}
  .smnSel select{font-size:11.5px;padding-right:8px}
}

/* ---- Google Translate integration cleanup ----
   The widget drives Google's translation engine but we render our own
   control; hide every trace of Google's default UI so the page looks
   untouched — no top banner, no layout shift, no dotted highlight boxes.
   Google's own banner/tooltip/menu markup uses obfuscated, frequently
   -changing class names (e.g. "VIpgJd-ZVi9od-ORHb-OEVmcd") rather than the
   older ".goog-te-banner-frame" name most tutorials reference — confirmed
   live on 2026-09-03. "skiptranslate" is the one stable class Google has
   kept on every one of these UI iframes across versions, so that's the
   primary selector; the legacy class names are kept too as a harmless
   belt-and-suspenders in case a page ever loads an older widget build. */
#google_translate_element{display:none!important}
iframe.skiptranslate{display:none!important;visibility:hidden!important;height:0!important}
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate{display:none!important;visibility:hidden!important}
body{top:0!important}
.goog-te-gadget-icon{display:none!important}
.goog-tooltip,.goog-tooltip:hover{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important;border:none!important}
.goog-te-balloon-frame{display:none!important}

@media (hover:hover) and (pointer:fine){
.smnSel:hover{border-color:#A8802A;background:#FBF6EA}
}