/* BUFF OS v69 — the dock's glass is yours to set.

   The dock was one fixed recipe: a 22px blur, a gradient to near-black, a
   saturation lift. Good on a photo, heavy on a plain card — and there is no one
   right answer, because it depends on the wallpaper of whatever is behind it and
   on taste. So the recipe is now driven by four custom properties and a slider
   writes them: --dg-k (the master 0..1), --dg-a1 and --dg-a2 (the gradient's two
   stops) and --dg-filter (the blur, or the literal `none` at zero, because a
   blur(0px) still makes a backdrop layer and still costs a composite).

   At zero there is no plate at all: the icons sit straight on the content, the
   way the Music mini-player looks when it is over a dark album. At the top it is
   frosted and near-opaque, but never solid — 0.95 is as far as the gradient
   goes, so a hint of the page always shows through. */
.tabbar{
  background:linear-gradient(180deg,
    rgba(13,15,20,0) 0%,
    rgba(13,15,20,var(--dg-a1,.55)) 34%,
    rgba(13,15,20,var(--dg-a2,.86)) 100%) !important;
  -webkit-backdrop-filter:var(--dg-filter,blur(22px) saturate(1.35)) !important;
  backdrop-filter:var(--dg-filter,blur(22px) saturate(1.35)) !important;
}
/* the 46px fade above the dock belongs to the same plate, so it dims with it */
.tabbar::before{opacity:var(--dg-k,1)}

/* ---------- the control, in Settings ---------- */
#dgCard .dg-sub{font-size:12.5px;line-height:1.5;color:var(--txt3);margin:-2px 0 12px}
#dgCard .dg-prev{position:relative;height:150px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);background:#0d0f14;margin-bottom:12px}
#dgCard .dg-prev-bg{position:absolute;inset:0;padding:11px 12px;display:flex;flex-direction:column;gap:8px}
#dgCard .dg-sw{flex:1 1 auto;min-height:62px;border-radius:10px;
  background:linear-gradient(118deg,rgba(var(--accent-rgb),.62),rgba(var(--accent-rgb),.14) 52%,rgba(90,170,255,.34))}
#dgCard .dg-l{height:9px;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.17),rgba(255,255,255,.05))}
#dgCard .dg-l.s{width:62%}
#dgCard .dg-l.t{width:38%}
#dgCard .dg-dock{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;
  padding:16px 6px 7px;
  background:linear-gradient(180deg,
    rgba(13,15,20,0) 0%,
    rgba(13,15,20,var(--dg-a1,.55)) 34%,
    rgba(13,15,20,var(--dg-a2,.86)) 100%);
  -webkit-backdrop-filter:var(--dg-filter,blur(22px) saturate(1.35));
  backdrop-filter:var(--dg-filter,blur(22px) saturate(1.35));
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 40%,#000 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 40%,#000 100%)}
#dgCard .dg-dock i{flex:1 1 0;display:flex;justify-content:center;color:var(--txt3)}
#dgCard .dg-dock i.on{color:var(--accent)}
#dgCard .dg-dock svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8}
#dgCard .dg-dock i.on svg{opacity:1;stroke-width:2.1;filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.5))}

#dgCard .dg-row{display:flex;align-items:center;gap:10px}
#dgCard .dg-end{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--txt3);flex:0 0 auto}
#dgCard input[type=range]{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;height:28px;background:transparent;margin:0}
#dgCard input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.09),rgba(var(--accent-rgb),.6))}
#dgCard input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;
  border-radius:50%;background:#fff;border:0;box-shadow:0 2px 9px rgba(0,0,0,.55)}
#dgCard input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
#dgCard input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff}
#dgCard .dg-read{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:8px 0 12px}
#dgCard .dg-read b{font-size:15px;font-weight:700}
#dgCard .dg-read span{font-size:12px;color:var(--txt3)}
#dgCard .dg-read span.un{color:var(--accent)}
#dgCard .dg-btns{display:flex;gap:8px}
#dgCard .dg-btns .btn{flex:1}