:root{ --hre-tint:#ffff00; --hre-font-scale:100%; }
.hre-toolbar{ position:fixed; right:16px; bottom:16px; z-index:999999; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.hre-toggle{ background:#111;color:#fff;border:none;padding:10px 12px;border-radius:999px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.25);font-weight:600;}
.hre-toggle:focus{ outline:2px solid #005fcc; outline-offset:2px; }
.hre-panel{ margin-top:8px;background:#fff;color:#111;width:360px;max-width:90vw;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:12px;border:1px solid #e6e6e6;}
.hre-section{ margin-bottom:10px;}
.hre-section strong{ display:block;margin-bottom:6px;}
.hre-row{ display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.hre-inline{ display:inline-flex;gap:8px;align-items:center;}
.hre-grid{ display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;}
.hre-btn{ background:#f2f2f2;border:1px solid #ddd;padding:6px 10px;border-radius:8px;cursor:pointer;}
.hre-btn:hover{ background:#e9e9e9;}
.hre-reset{ background:#fee;border-color:#f88;}
.hre-reset:hover{ background:#fdd;}
.hre-panel[hidden]{ display:none !important; }

/* Visual toggles */
body.hre-invert{ filter: invert(1) hue-rotate(180deg); }
body.hre-grayscale{ filter: grayscale(1); }
body.hre-underline a{ text-decoration: underline !important; }
body.hre-highlight a{ background: var(--hre-tint); outline: 2px solid rgba(0,0,0,.2); padding:0 2px; border-radius:3px; }
html{ font-size: var(--hre-font-scale); }

/* keyboard focus */
body.hre-keyboard :focus{ outline: 3px solid #005fcc !important; outline-offset:2px; }

/* Remove styles (reading mode) */
body.hre-remove *{ all: unset; display: revert; }
body.hre-remove{ all: revert; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important; line-height:1.6 !important; background:#fff !important; color:#111 !important; }
body.hre-remove img, body.hre-remove video, body.hre-remove iframe, body.hre-remove svg{ display:none !important; }
body.hre-remove a{ color:#0645ad !important; text-decoration: underline !important; }
body.hre-remove main, body.hre-remove article, body.hre-remove section{ max-width:900px; margin:0 auto; padding:16px; }


/* =========================
   Premium "Luxury" UI (2026)
   ========================= */
:root{
  --hre-accent: #d4af37;           /* luxury gold */
  --hre-glass: rgba(17,17,17,.62);
  --hre-glass2: rgba(255,255,255,.08);
  --hre-border: rgba(255,255,255,.16);
  --hre-shadow: 0 16px 40px rgba(0,0,0,.35);
  --hre-shadow-soft: 0 10px 28px rgba(0,0,0,.26);
  --hre-radius: 18px;
  --hre-radius-pill: 999px;
}

/* Top-right placement */
.hre-toolbar{
  right:max(16px, env(safe-area-inset-right));
  top:max(16px, env(safe-area-inset-top));
  bottom:auto;
}

/* Floating toggle: glass + glow */
.hre-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  height:46px;
  padding:0 14px;
  background: linear-gradient(135deg, var(--hre-glass), rgba(0,0,0,.55));
  border:1px solid var(--hre-border);
  border-radius:var(--hre-radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--hre-shadow-soft);
  letter-spacing:.2px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.hre-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
  border-color: rgba(212,175,55,.38);
}
.hre-toggle:active{ transform: translateY(0); }

.hre-toggle .hre-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.55), rgba(212,175,55,.18) 55%, rgba(255,255,255,.06) 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  font-size:16px;
  line-height:1;
}

/* Collapse/expand label for "premium" feel */
.hre-toggle .hre-label{
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transition: max-width .22s ease, opacity .18s ease;
}
.hre-toolbar.hre-open .hre-toggle .hre-label,
.hre-toggle:hover .hre-label{
  max-width:220px;
  opacity:1;
}

/* Glass panel + animation */
.hre-panel{
  background: linear-gradient(135deg, rgba(20,20,20,.78), rgba(10,10,10,.62));
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--hre-radius);
  box-shadow: var(--hre-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(-6px) scale(.985);
  opacity:0;
  transition: transform .18s ease, opacity .18s ease;
}
.hre-panel.hre-panel--open{
  transform: translateY(0) scale(1);
  opacity:1;
}

/* Buttons inside panel */
.hre-btn, .hre-pill{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  border-radius:12px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.hre-btn:hover, .hre-pill:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(212,175,55,.28);
  transform: translateY(-1px);
}
.hre-btn:active, .hre-pill:active{ transform: translateY(0); }

/* Inputs */
.hre-panel input[type="color"]{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.hre-panel input[type="range"]{ accent-color: var(--hre-accent); }

/* Typography */
.hre-section strong{ color: rgba(255,255,255,.92); }
.hre-panel small, .hre-panel label{ color: rgba(255,255,255,.82); }

/* Admin bar offset */
body.admin-bar .hre-toolbar{ top: calc(16px + 32px); }

/* Optional: subtle halo behind button */
.hre-toolbar::before{
  content:"";
  position:absolute;
  inset:-14px -14px auto auto;
  width:110px;
  height:110px;
  pointer-events:none;
  background: radial-gradient(circle at 35% 35%, rgba(212,175,55,.22), rgba(212,175,55,0) 55%);
  filter: blur(2px);
}