:root{
  --dt-primary:#0a84ff;
  --dt-primary-contrast:#fff;
  --dt-bg:#ffffff;
  --dt-fg:#111111;
  --dt-chip-bg:transparent;
  --dt-border:rgba(0,0,0,.12);
  --dt-hover-bg:rgba(0,0,0,.06);
  --dt-hover-border:rgba(0,0,0,.18);
  --dt-shadow:0 2px 10px rgba(0,0,0,.08);
  --dt-fab-bg:#111111;
  --dt-fab-fg:#ffffff
}
@media (prefers-color-scheme: dark){
  :root{
    --dt-bg:#0f1115;
    --dt-fg:#e8eaed;
    --dt-chip-bg:transparent;
    --dt-border:rgba(255,255,255,.14);
    --dt-hover-bg:rgba(255,255,255,.09);
    --dt-hover-border:rgba(255,255,255,.22);
    --dt-shadow:0 2px 10px rgba(0,0,0,.5);
    --dt-fab-bg:#1b1e24;
    --dt-fab-fg:#e8eaed
  }
}

#dt-translator-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:99997;
  background:#222;color:#fff;padding:10px 12px;font-size:13px
}
#dt-translator-bar .sep{opacity:.55;margin:0 8px}
#dt-translator-bar .dt-lang-btn{
  display:inline-block;margin-right:8px;padding:4px 10px;border-radius:8px;
  background:#444;color:#fff;text-decoration:none;transition:filter .15s
}
#dt-translator-bar .dt-lang-btn:hover{filter:brightness(1.1)}
#dt-translator-bar .dt-lang-btn.active{background:var(--dt-primary);color:var(--dt-primary-contrast)}
#dt-translator-bar .dt-edit-toggle{
  margin-left:12px;border:0;border-radius:10px;padding:6px 10px;cursor:pointer;
  background:var(--dt-primary);color:var(--dt-primary-contrast);transition:filter .15s
}
#dt-translator-bar .dt-edit-toggle:hover{filter:brightness(1.05)}

.dt-hover{outline:1px dashed rgba(0,0,0,.35);cursor:crosshair}
body.dt-edit-mode{padding-bottom:56px}
body.dt-edit-mode :is(a,button,[role="button"],p,h1,h2,h3,h4,h5,h6,span,li,strong,em,label,input,textarea,.uagb-heading-text,figcaption,.wp-caption-text,[class*="caption"]){
  outline:1px dashed rgba(0,0,0,.2);
  cursor:crosshair
}

.dt-lang-widget{position:fixed;right:20px;bottom:20px;z-index:99998}
#dt-lang-fab{
  width:46px;height:46px;border-radius:9999px;border:0;cursor:pointer;display:inline-grid;place-items:center;
  background:var(--dt-fab-bg);color:var(--dt-fab-fg);box-shadow:0 8px 18px rgba(0,0,0,.25);transition:transform .08s,filter .15s
}
#dt-lang-fab:active{transform:scale(.98)}
#dt-lang-fab:focus-visible{outline:2px solid var(--dt-primary);outline-offset:2px}
#dt-lang-panel{
  position:fixed;right:20px;bottom:76px;min-width:140px;display:none;
  background:var(--dt-bg);color:var(--dt-fg);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.25);
  padding:8px;gap:6px;flex-wrap:wrap
}
#dt-lang-panel.open{display:flex}
#dt-lang-panel a{
  display:inline-block;padding:6px 10px;border-radius:10px;text-decoration:none;font-weight:600;
  background:var(--dt-chip-bg);border:1px solid var(--dt-border);color:inherit;
  transition:background .15s,border-color .15s,box-shadow .15s,color .15s
}
#dt-lang-panel a:hover{background:var(--dt-hover-bg);border-color:var(--dt-hover-border);box-shadow:var(--dt-shadow)}
#dt-lang-panel a.active{background:var(--dt-primary);border-color:var(--dt-primary);color:var(--dt-primary-contrast)}

.dt-lang-shortcode{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.dt-lang-shortcode .dt-lang-item a{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:6px 12px;border-radius:9999px;text-decoration:none;font-weight:600;
  background:var(--dt-chip-bg);border:1px solid var(--dt-border);color:inherit;
  backdrop-filter:blur(6px);
  transition:background .15s,border-color .15s,box-shadow .15s,color .15s
}
.dt-lang-shortcode .dt-lang-item a:hover{background:var(--dt-hover-bg);border-color:var(--dt-hover-border);box-shadow:var(--dt-shadow)}
.dt-lang-shortcode .dt-lang-item a.active,
.dt-lang-shortcode .dt-lang-item a[aria-current="true"]{
  background:var(--dt-primary);border-color:var(--dt-primary);color:var(--dt-primary-contrast)
}
.dt-lang-shortcode .dt-lang-item a .dt-flag{height:16px;width:auto;border-radius:2px}
.dt-lang-label{margin-left:.35em}

li.dt-lang-item > a{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:6px 12px;border-radius:9999px;text-decoration:none;
  background:var(--dt-chip-bg);border:1px solid var(--dt-border);
  transition:background .15s,border-color .15s,box-shadow .15s,color .15s
}
li.dt-lang-item > a:hover{background:var(--dt-hover-bg);border-color:var(--dt-hover-border);box-shadow:var(--dt-shadow)}
li.dt-lang-item.current-lang > a{background:var(--dt-primary);border-color:var(--dt-primary);color:var(--dt-primary-contrast)}
li.dt-lang-item > a .dt-flag{height:16px;width:auto;border-radius:2px}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}