/* ============================================
   STARTDOCK MODERN — Visual Redesign
   Glassmorphic dark UI with mesh-gradient backgrounds
   ============================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  --sd-accent: #fe1101;
  --sd-accent-glow: rgba(254, 17, 1, .35);
  --sd-glass: rgba(255,255,255,.10);
  --sd-glass-hover: rgba(255,255,255,.15);
  --sd-glass-border: rgba(255,255,255,.18);
  --sd-glass-border-hover: rgba(255,255,255,.28);
  --sd-blur: 24px;
  --sd-radius: 16px;
  --sd-radius-sm: 10px;
  --sd-text: #fff;
  --sd-text-secondary: rgba(255,255,255,.65);
  --sd-text-tertiary: rgba(255,255,255,.4);
  --sd-shadow: 0 8px 32px rgba(0,0,0,.25);
  --sd-font: 'Inter', 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sd-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Background System ---------- */
/* Dedicated background div — bulletproof, jQuery Mobile can't touch it */
#sd-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 70% at 5% 95%, rgba(0,255,170,.50) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 92% 10%, rgba(100,0,255,.45) 0%, transparent 50%),
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,120,255,.25) 0%, transparent 50%),
    linear-gradient(160deg, #04080f 0%, #0a1a2e 35%, #162a40 100%);
  pointer-events: none;
}

html, body, #dvbody {
  margin: 0; padding: 0;
  min-height: 100vh;
  font-family: var(--sd-font);
  color: var(--sd-text);
  overflow-x: hidden;
  background: transparent !important;
  background-color: transparent !important;
}

/* Vivid mesh-gradient backgrounds */
.sd-bg-aurora {
  background:
    radial-gradient(ellipse 90% 70% at 5% 95%, rgba(0,255,170,.50) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 92% 10%, rgba(100,0,255,.45) 0%, transparent 50%),
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,120,255,.25) 0%, transparent 50%),
    linear-gradient(160deg, #04080f 0%, #0a1a2e 35%, #162a40 100%);
  background-attachment: fixed !important;
}

.sd-bg-sunset {
  background:
    radial-gradient(ellipse 80% 70% at 15% 100%, rgba(255,70,0,.55) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 85% 5%, rgba(220,0,120,.45) 0%, transparent 50%),
    radial-gradient(ellipse 90% 80% at 50% 55%, rgba(255,160,0,.20) 0%, transparent 50%),
    linear-gradient(160deg, #1a0510 0%, #35152a 35%, #2a0a30 100%);
  background-attachment: fixed !important;
}

.sd-bg-ocean {
  background:
    radial-gradient(ellipse 80% 70% at 10% 90%, rgba(0,220,220,.45) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 90% 15%, rgba(0,80,220,.40) 0%, transparent 50%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,160,200,.18) 0%, transparent 50%),
    linear-gradient(160deg, #020e18 0%, #082030 35%, #0a1a28 100%);
  background-attachment: fixed !important;
}

.sd-bg-cosmic {
  background:
    radial-gradient(ellipse 70% 70% at 20% 85%, rgba(200,0,255,.50) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 80% 10%, rgba(255,0,140,.38) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(120,0,220,.22) 0%, transparent 50%),
    linear-gradient(160deg, #08001a 0%, #1a0035 35%, #18002e 100%);
  background-attachment: fixed !important;
}

.sd-bg-forest {
  background:
    radial-gradient(ellipse 80% 70% at 15% 90%, rgba(0,200,90,.45) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 85% 15%, rgba(0,140,110,.35) 0%, transparent 50%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,120,70,.15) 0%, transparent 50%),
    linear-gradient(160deg, #03100a 0%, #0e2216 35%, #0a1e10 100%);
  background-attachment: fixed !important;
}

.sd-bg-midnight {
  background:
    radial-gradient(ellipse 60% 50% at 25% 75%, rgba(40,70,180,.40) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 75% 20%, rgba(80,50,160,.30) 0%, transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(20,30,80,.12) 0%, transparent 50%),
    linear-gradient(160deg, #020208 0%, #08081a 35%, #050510 100%);
  background-attachment: fixed !important;
}

.sd-bg-ember {
  background:
    radial-gradient(ellipse 80% 70% at 25% 90%, rgba(254,40,1,.45) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 75% 10%, rgba(255,140,0,.38) 0%, transparent 50%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(220,60,0,.15) 0%, transparent 50%),
    linear-gradient(160deg, #100204 0%, #22080a 35%, #1c0606 100%);
  background-attachment: fixed !important;
}

.sd-bg-lavender {
  background:
    radial-gradient(ellipse 80% 70% at 20% 88%, rgba(160,90,255,.45) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 80% 15%, rgba(220,140,255,.35) 0%, transparent 50%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(200,120,255,.15) 0%, transparent 50%),
    linear-gradient(160deg, #0a0518 0%, #1a0e28 35%, #140a22 100%);
  background-attachment: fixed !important;
}

/* When user has a custom image via backstretch, darken slightly */
body.sd-has-bg-image .backstretch img {
  filter: brightness(.75) saturate(1.1);
}
body.sd-has-bg-image #sd-hero,
body.sd-has-bg-image #sd-widgets {
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* ---------- 3. jQuery Mobile NUCLEAR Overrides ---------- */
/* This must override EVERYTHING jQuery Mobile paints opaque */
html .ui-mobile .ui-page,
html .ui-overlay-a,
html .ui-page-theme-a,
html .ui-page-theme-a .ui-body-inherit,
html .ui-page-theme-a .ui-panel-wrapper,
html [data-role="page"],
html .ui-content,
html .dv-ui-content,
html .ui-body-a,
html .ui-bar-a,
html .ui-page-active,
html #dv-page,
html #dv-main-page {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--sd-text) !important;
  text-shadow: none !important;
}

.ui-header, .ui-bar-a {
  border-bottom: none !important;
  box-shadow: none !important;
}

.ui-mobile [data-role=page],
.ui-mobile .ui-page {
  min-height: 0 !important;
  background: transparent !important;
}

/* Kill jQuery Mobile link colors globally */
a, a:visited, a:link, .ui-link, .ui-btn,
.ui-page-theme-a a, .ui-bar-a a {
  color: var(--sd-text) !important;
  text-shadow: none !important;
}
a:hover { color: var(--sd-accent) !important; }

/* jQuery Mobile button overrides for popups */
.ui-popup .ui-btn { color: #222 !important; }
.ui-popup .ui-btn-b { background: var(--sd-accent) !important; color: #fff !important; }

/* ---------- 4. Typography ---------- */
body { font-family: var(--sd-font); }

/* ---------- 5. Top Bar — hidden ---------- */
#topdvbar {
  display: none !important;
}

/* Floating logo */
#sd-floating-logo {
  position: fixed;
  top: 16px;
  left: 60px;
  z-index: 9500;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: rgba(255,255,255,.55) !important;
  text-decoration: none !important;
  letter-spacing: .3px;
  transition: color var(--sd-transition);
  line-height: 44px;
}
#sd-floating-logo:hover {
  color: rgba(255,255,255,.9) !important;
}

/* Floating hamburger button — TOP LEFT */
#sd-hamburger {
  display: flex !important;
  position: fixed !important;
  top: 16px;
  left: 14px;
  z-index: 9500;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 10px !important;
  cursor: pointer;
  color: rgba(255,255,255,.8);
  transition: all var(--sd-transition);
  padding: 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
#sd-hamburger:hover {
  background: rgba(255,255,255,.18) !important;
  color: #fff;
  transform: scale(1.05);
}

/* Floating sliders/settings button — TOP RIGHT */
#sd-floating-sliders {
  display: flex;
  position: fixed;
  top: 16px;
  right: 14px;
  z-index: 9500;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  cursor: pointer;
  color: rgba(255,255,255,.8);
  transition: all var(--sd-transition);
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
#sd-floating-sliders:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
  transform: scale(1.05);
}
#sd-floating-sliders svg { display: block; }

/* Kill ALL jQuery Mobile red/default theming */
.ui-bar-a, .ui-body-a, .ui-page-theme-a,
.ui-btn, .ui-btn-a, .ui-btn-active,
.ui-slider-track, .ui-slider-bg,
.ui-checkbox, .ui-radio,
.ui-select .ui-btn,
.ui-flipswitch-active,
.ui-icon-delete,
.ui-focus, .ui-btn:focus,
.ui-slider-handle,
.ui-controlgroup, .ui-controlgroup-controls,
.ui-input-text, .ui-input-search {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--sd-text) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Dead jQuery Mobile widget overrides removed — inputs now use data-role="none" */

#topdvbar .ui-grid-b {
  display: flex !important;
  align-items: center;
  padding: 0 12px;
  min-height: 52px;
}

#topdvbar .ui-block-a { flex: 0 0 auto; }
#topdvbar .ui-block-b { flex: 1; }
#topdvbar .ui-block-c { flex: 0 0 auto; }

.dv-logo-text {
  font-family: 'Raleway', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: .5px;
  padding: 0 8px !important;
}

/* Tab bar in top bar */
#topdvbar .ui-grid-solo { padding: 0 12px 8px; }

.dv-magic-table {
  margin-left: 8px !important;
  border-collapse: separate;
  border-spacing: 4px;
}

.ui-btn.dv-label {
  font-family: 'Raleway', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  margin: 2px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.75) !important;
  transition: all var(--sd-transition) !important;
  text-transform: none !important;
  letter-spacing: .3px;
}
.ui-btn.dv-label:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
}

.dv-magic-button-sel {
  background: var(--sd-accent) !important;
  color: #fff !important;
  border-color: var(--sd-accent) !important;
}
.dv-magic-button-sel:hover {
  background: #e50f00 !important;
  border-color: #e50f00 !important;
}

/* Top-bar right icons */
.dv-topbar-right { gap: 4px !important; padding-right: 4px !important; }

a.dv-topbar-icon, button.dv-topbar-icon {
  color: rgba(255,255,255,.65) !important;
  fill: rgba(255,255,255,.65) !important;
  stroke: rgba(255,255,255,.65);
  transition: all var(--sd-transition) !important;
  border-radius: 8px !important;
  padding: 7px !important;
}
a.dv-topbar-icon:hover, button.dv-topbar-icon:hover {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff;
  background: rgba(255,255,255,.1) !important;
}
a.dv-topbar-icon svg, button.dv-topbar-icon svg {
  stroke: currentColor;
}

.dv-topbar-link {
  color: rgba(255,255,255,.7) !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  transition: all var(--sd-transition) !important;
}
.dv-topbar-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.dv-topbar-signup {
  background: var(--sd-accent) !important;
  color: #fff !important;
}
.dv-topbar-signup:hover {
  background: #e50f00 !important;
  color: #fff !important;
}

/* ---------- 6. Hero Section ---------- */
#sd-hero {
  text-align: center;
  padding: 28px 20px 0;
  position: relative;
  z-index: 100;
}

#sd-clock {
  font-size: clamp(48px, 9vw, 80px);
  font-weight: 200;
  color: #fff;
  letter-spacing: -2px;
  line-height: 1;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}

#sd-greeting {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 300;
  color: rgba(255,255,255,.7);
  margin: 4px 0 0;
  letter-spacing: .5px;
}

#sd-date {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  margin: 3px 0 0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Search bar */
#sd-search-wrap {
  max-width: 480px;
  margin: 10px auto 0;
  position: relative;
}

#sd-search {
  width: 100%;
  padding: 11px 18px 11px 44px;
  font-size: 14px;
  font-family: var(--sd-font);
  font-weight: 400;
  color: #fff;
  background: var(--sd-glass);
  backdrop-filter: blur(var(--sd-blur));
  -webkit-backdrop-filter: blur(var(--sd-blur));
  border: 1px solid var(--sd-glass-border);
  border-radius: 14px;
  outline: none;
  transition: all var(--sd-transition);
  box-sizing: border-box;
}
#sd-search::placeholder { color: rgba(255,255,255,.35); }
#sd-search:focus {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
}

#sd-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255,255,255,.35);
}

/* ---------- 7. Widget Grid ---------- */
#sd-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 900px;
  margin: 10px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 100;
}

/* ---------- 8. Widget Cards ---------- */
.sd-widget {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--sd-radius-sm);
  padding: 12px 14px;
  transition: all var(--sd-transition);
  position: relative;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.sd-widget:hover {
  background: var(--sd-glass-hover);
  border-color: var(--sd-glass-border-hover);
  box-shadow: var(--sd-shadow);
  transform: translateY(-2px);
}

.sd-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sd-widget-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--sd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sd-widget-icon {
  font-size: 16px;
  opacity: .6;
}

/* Weather widget */
#sd-weather-temp {
  font-size: 28px;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 2px;
}

#sd-weather-desc {
  font-size: 11px;
  color: var(--sd-text-secondary);
  font-weight: 500;
}

#sd-weather-icon {
  font-size: 32px;
  position: absolute;
  top: 10px;
  right: 12px;
  opacity: .9;
  line-height: 1;
}

#sd-weather-details {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--sd-text-tertiary);
  font-weight: 500;
}

.sd-weather-loading {
  font-size: 11px;
  color: var(--sd-text-tertiary);
  padding: 8px 0;
}

/* Tasks widget */
#sd-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 100px;
  overflow-y: auto;
}

#sd-task-list::-webkit-scrollbar { width: 4px; }
#sd-task-list::-webkit-scrollbar-track { background: transparent; }
#sd-task-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

#sd-task-list li {
  display: flex;
  align-items: center;
  padding: 4px 0;
  gap: 6px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: opacity var(--sd-transition);
}
#sd-task-list li:last-child { border-bottom: none; }

#sd-task-list li.sd-task-done {
  opacity: .4;
  text-decoration: line-through;
}

#sd-task-list li .sd-task-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--sd-transition);
  font-size: 10px;
  color: transparent;
}
#sd-task-list li.sd-task-done .sd-task-check {
  border-color: var(--sd-accent);
  background: var(--sd-accent);
  color: #fff;
}

#sd-task-list li .sd-task-text { flex: 1; }

#sd-task-list li .sd-task-del {
  opacity: 0;
  color: rgba(255,255,255,.3);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  transition: all var(--sd-transition);
}
#sd-task-list li:hover .sd-task-del { opacity: 1; }
#sd-task-list li .sd-task-del:hover { color: var(--sd-accent); }

#sd-task-input-wrap {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

#sd-task-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 7px 10px;
  color: #fff;
  font-size: 12px;
  font-family: var(--sd-font);
  outline: none;
  transition: border-color var(--sd-transition);
}
#sd-task-input::placeholder { color: rgba(255,255,255,.25); }
#sd-task-input:focus { border-color: rgba(255,255,255,.25); }

/* RSS widget */
#sd-rss-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 100px;
  overflow-y: auto;
}

#sd-rss-list::-webkit-scrollbar { width: 4px; }
#sd-rss-list::-webkit-scrollbar-track { background: transparent; }
#sd-rss-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

#sd-rss-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#sd-rss-list li:last-child { border-bottom: none; }

#sd-rss-list li a {
  font-size: 11px !important;
  color: rgba(255,255,255,.8) !important;
  text-decoration: none !important;
  line-height: 1.4;
  display: block;
  transition: color var(--sd-transition) !important;
}
#sd-rss-list li a:hover { color: #fff !important; }

#sd-rss-list li .sd-rss-source {
  font-size: 10px;
  color: var(--sd-text-tertiary);
  margin-top: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Quote widget */
#sd-quote-text {
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,.75);
  line-height: 1.45;
  margin-bottom: 4px;
}

#sd-quote-author {
  font-size: 9px;
  font-weight: 600;
  color: var(--sd-text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ---------- 9. Tile Grid ---------- */
#dv-main-page {
  padding-top: 8px !important;
  padding-bottom: 30px !important;
}

#most-visited {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

#mv-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.mv-tile {
  background: var(--sd-glass) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--sd-glass-border) !important;
  border-radius: var(--sd-radius-sm) !important;
  overflow: hidden;
  position: relative;
  text-decoration: none !important;
  /* transition without !important so magnify dvtransition classes work */
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.mv-tile:hover {
  border-color: var(--sd-glass-border-hover) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.3) !important;
  /* NO transform here — magnify dvtransition classes handle hover scale */
  z-index: 10;
}

.mv-thumb {
  border-radius: 6px;
  overflow: hidden;
}
.mv-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}
.mv-tile:hover .mv-thumb img {
  transform: scale(1.04);
}

.mv-title {
  font-family: var(--sd-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.8) !important;
  padding: 6px 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv-favicon {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv-favicon img {
  border-radius: 2px;
}

/* Edit mode X button */
.mv-x {
  position: absolute !important;
  top: 6px;
  right: 6px;
  z-index: 20;
  display: none;
}
.mv-x.showsettings {
  display: flex !important;
  width: 22px; height: 22px;
  background: rgba(254,17,1,.85);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Add tile button */
.thumb_0 {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255,255,255,.15) !important;
  background: transparent !important;
}
.thumb_0:hover {
  border-color: rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.05) !important;
}

.mv-thumb-plus img {
  opacity: .3;
  transition: opacity var(--sd-transition);
  width: 32px !important;
}
.thumb_0:hover .mv-thumb-plus img { opacity: .6; }

/* ---------- 10. Sliders Panel (compact floating popup) ---------- */
#dv-sliders-panel,
.dv-sliders-panel {
  position: fixed !important;
  top: 66px !important;
  right: 14px !important;
  left: auto !important;
  width: 300px !important;
  max-width: 90vw !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(12,12,22,.94) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.5) !important;
  z-index: 10000 !important;
  font-family: var(--sd-font) !important;
}

/* Keep children within bounds — but don't break jQuery Mobile widgets */
#dv-sliders-panel > .dv-sliders-body,
#dv-sliders-panel > .dv-sliders-header {
  max-width: 100%;
  box-sizing: border-box;
}

.dv-sliders-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 16px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.dv-sliders-header span {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
}
.dv-sliders-header button {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,.4) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 0 2px !important;
  line-height: 1;
}
.dv-sliders-header button:hover { color: #fff !important; }

.dv-sliders-body {
  padding: 14px 16px 18px !important;
}
.dv-sliders-body label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: .4px;
}
.dv-sliders-body label span {
  color: var(--sd-accent) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Native range inputs (data-role="none" prevents jQuery Mobile wrapping) */
#dv-sliders-panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  outline: none;
  margin: 4px 0 14px;
  cursor: pointer;
}
#dv-sliders-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--sd-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px var(--sd-accent-glow);
}
#dv-sliders-panel input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--sd-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Native checkbox */
#dv-sliders-panel input[type="checkbox"] {
  accent-color: var(--sd-accent);
  margin-right: 6px;
  cursor: pointer;
}

/* Color picker button */
.dv-color-btn {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  font-family: var(--sd-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: 100% !important;
  text-align: center;
}
.dv-color-btn:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

/* File input */
.dv-file-input {
  width: 100% !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.5) !important;
}
.dv-file-input::file-selector-button {
  background: var(--sd-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-right: 8px !important;
}

/* Slider rows */
.dv-sliders-row {
  margin-bottom: 12px !important;
}
.dv-sliders-row label {
  margin-bottom: 6px !important;
}

/* Select native */
.dv-select {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-family: var(--sd-font) !important;
  font-size: 12px !important;
  width: 100% !important;
  outline: none !important;
}

/* Scrollbar inside panel */
#dv-sliders-panel::-webkit-scrollbar { width: 4px; }
#dv-sliders-panel::-webkit-scrollbar-track { background: transparent; }
#dv-sliders-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

/* Background gallery in sliders */
.sd-bg-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.sd-bg-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--sd-transition);
  position: relative;
}
.sd-bg-swatch:hover {
  transform: scale(1.08);
  border-color: rgba(255,255,255,.3);
}
.sd-bg-swatch.sd-bg-active {
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 2px var(--sd-accent-glow);
}

.sd-bg-swatch-aurora {
  background: radial-gradient(circle at 30% 70%, rgba(0,255,170,.4), transparent 60%), radial-gradient(circle at 70% 30%, rgba(100,0,255,.3), transparent 60%), #0d1b2a;
}
.sd-bg-swatch-sunset {
  background: radial-gradient(circle at 30% 70%, rgba(255,90,0,.4), transparent 60%), radial-gradient(circle at 70% 30%, rgba(200,0,120,.3), transparent 60%), #1a0a1e;
}
.sd-bg-swatch-ocean {
  background: radial-gradient(circle at 30% 70%, rgba(0,200,200,.4), transparent 60%), radial-gradient(circle at 70% 30%, rgba(0,80,200,.3), transparent 60%), #0b1d2e;
}
.sd-bg-swatch-cosmic {
  background: radial-gradient(circle at 30% 70%, rgba(180,0,255,.4), transparent 60%), radial-gradient(circle at 70% 30%, rgba(255,0,120,.3), transparent 60%), #1a0030;
}
.sd-bg-swatch-forest {
  background: radial-gradient(circle at 30% 70%, rgba(0,180,80,.4), transparent 60%), radial-gradient(circle at 70% 30%, rgba(0,120,100,.3), transparent 60%), #0c1e12;
}
.sd-bg-swatch-midnight {
  background: radial-gradient(circle at 30% 70%, rgba(30,60,150,.3), transparent 60%), #0a0a18;
}
.sd-bg-swatch-ember {
  background: radial-gradient(circle at 30% 70%, rgba(254,17,1,.4), transparent 60%), radial-gradient(circle at 70% 30%, rgba(255,120,0,.3), transparent 60%), #1e0a08;
}
.sd-bg-swatch-lavender {
  background: radial-gradient(circle at 30% 70%, rgba(140,80,255,.4), transparent 60%), radial-gradient(circle at 70% 30%, rgba(200,120,255,.3), transparent 60%), #160e22;
}

/* ---------- 11. Popup Restyling ---------- */
.ui-popup-container .ui-popup {
  background: rgba(20,20,30,.95) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--sd-glass-border) !important;
  border-radius: var(--sd-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
}

.zeplinaddheader, [data-role="header"][data-theme="b"] {
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--sd-radius) var(--sd-radius) 0 0 !important;
}

.zeplinaddfont, .smallzeplinaddfont {
  color: #fff !important;
  font-family: var(--sd-font) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.ui-popup input[type="text"],
.ui-popup input[type="search"] {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: var(--sd-font) !important;
}
.ui-popup input[type="text"]:focus,
.ui-popup input[type="search"]:focus {
  border-color: rgba(255,255,255,.3) !important;
}

.ui-popup .ui-btn {
  border-radius: 8px !important;
  font-family: var(--sd-font) !important;
}

.dvbtnleft {
  background: var(--sd-accent) !important;
  color: #fff !important;
  border: none !important;
}
.dvbtnright {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* Overlay */
.ui-popup-screen { background: rgba(0,0,0,.5) !important; }

/* ---------- 12. Animations ---------- */
@keyframes sd-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sd-fade-in-slow {
  from { opacity: 0; }
  to { opacity: 1; }
}

#sd-hero { animation: sd-fade-in .8s ease-out; }
#sd-widgets { animation: sd-fade-in .8s ease-out .15s both; }
#most-visited { animation: sd-fade-in .8s ease-out .3s both; }

.sd-widget {
  animation: sd-fade-in .5s ease-out both;
}
.sd-widget:nth-child(1) { animation-delay: .2s; }
.sd-widget:nth-child(2) { animation-delay: .3s; }
.sd-widget:nth-child(3) { animation-delay: .4s; }
.sd-widget:nth-child(4) { animation-delay: .5s; }

/* ---------- 13. Responsive ---------- */
/* ---------- 13b. Hamburger Menu ---------- */
/* (main #sd-hamburger styles are in section 5 — no duplicate needed) */
#sd-hamburger svg { display: block; }

/* Slide-out drawer */
#sd-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 11000;
  opacity: 0;
  transition: opacity .3s ease;
}
#sd-drawer-overlay.sd-open { display: block; opacity: 1; }

#sd-drawer {
  position: fixed;
  top: 0; right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  z-index: 11001;
  background: rgba(12,12,22,.96);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-left: 1px solid var(--sd-glass-border);
  box-shadow: -8px 0 40px rgba(0,0,0,.4);
  transition: right .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#sd-drawer.sd-open { right: 0; }

.sd-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sd-drawer-header span {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
#sd-drawer-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color var(--sd-transition);
}
#sd-drawer-close:hover { color: #fff; }

.sd-drawer-section {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sd-drawer-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--sd-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}

.sd-drawer-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sd-drawer-tabs a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--sd-font);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.7) !important;
  transition: all var(--sd-transition);
}
.sd-drawer-tabs a:hover {
  background: rgba(255,255,255,.08);
  color: #fff !important;
}
.sd-drawer-tabs a.sd-drawer-active {
  background: var(--sd-accent);
  color: #fff !important;
}

.sd-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sd-drawer-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--sd-font);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.65) !important;
  transition: all var(--sd-transition);
}
.sd-drawer-links a:hover {
  background: rgba(255,255,255,.08);
  color: #fff !important;
}
.sd-drawer-links a svg {
  flex-shrink: 0;
  opacity: .5;
  stroke: currentColor;
}

/* ---------- 13c. Responsive ---------- */
@media (max-width: 768px) {
  #sd-hero { padding-top: 30px; }
  #sd-clock { letter-spacing: -1px; }

  #sd-widgets {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px;
  }

  .dv-magic-table { margin-left: 4px !important; }
  .ui-btn.dv-label { font-size: 11px !important; padding: 4px 10px !important; }
}

@media (max-width: 480px) {
  #sd-hero { padding-top: 70px; }

  #sd-widgets {
    grid-template-columns: 1fr;
  }

  #topdvbar .ui-grid-b { padding: 0 6px; }
  .dv-logo-text { font-size: 17px !important; }
}

/* ---------- 14. Utility ---------- */
.sd-glass {
  background: var(--sd-glass);
  backdrop-filter: blur(var(--sd-blur));
  -webkit-backdrop-filter: blur(var(--sd-blur));
  border: 1px solid var(--sd-glass-border);
  border-radius: var(--sd-radius);
}

/* Editable labels in edit mode */
.dv-dynamic.editablelabel {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 6px !important;
  color: #fff !important;
  padding: 4px 8px !important;
  font-family: var(--sd-font) !important;
  font-size: 12px !important;
}

/* Label delete button */
.labeldel {
  width: 14px; height: 14px;
  background: var(--sd-accent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 2px;
  vertical-align: middle;
  position: relative;
}
.labeldel::after {
  content: '\00d7';
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

/* Tab edit icons — + and pencil */
.tab-more, .tab-icon, .tab-iconv, .tab-iconn {
  filter: brightness(0) invert(1);
  opacity: .6;
  transition: all var(--sd-transition);
  cursor: pointer;
}
.tab-more:hover, .tab-icon:hover { opacity: 1; transform: scale(1.15); }

/* Modern + button overlay */
.dv-magic-center {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  padding: 0 4px;
}

#dvmore {
  width: 22px !important;
  height: 22px !important;
  padding: 3px;
  background: var(--sd-accent);
  border-radius: 6px;
  filter: brightness(0) invert(1);
  opacity: .9;
  box-shadow: 0 2px 8px var(--sd-accent-glow);
  transition: all var(--sd-transition);
}
#dvmore:hover {
  opacity: 1;
  transform: scale(1.12);
  box-shadow: 0 4px 16px var(--sd-accent-glow);
}

#startedit, #dvmagicedit {
  width: 20px !important;
  height: 20px !important;
  padding: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.15);
  filter: brightness(0) invert(1);
  opacity: .7;
  transition: all var(--sd-transition);
}
#startedit:hover, #dvmagicedit:hover {
  opacity: 1;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.3);
  transform: scale(1.1);
}

/* Edit mode active state for pencil */
.tab-iconv {
  background: var(--sd-accent) !important;
  border-color: var(--sd-accent) !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px var(--sd-accent-glow) !important;
}

/* Delete icon in edit mode */
.tab-iconn {
  width: 16px !important;
  height: 16px !important;
  padding: 2px;
  filter: none !important;
  opacity: .8;
}

/* Specialdvleft cell for icons */
.specialdvleft {
  white-space: nowrap;
  vertical-align: middle;
}

/* Scrollbar global */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* Badge style for dv-title */
.dv-title.badclass { color: rgba(255,255,255,.8) !important; }

/* Remove old jQuery Mobile chrome */
.ui-header .ui-title { color: #fff !important; text-shadow: none !important; }
.ui-loader { backdrop-filter: blur(8px); border-radius: 12px; }

/* ---------- Photo Info Bar (Unsplash) ---------- */
#sd-photo-info {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  padding: 24px 20px 14px;
  pointer-events: none;
  animation: sd-fade-in-slow 1.5s ease;
}

#sd-photo-info-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: auto;
}

#sd-photo-desc {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sd-photo-credit {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}
#sd-photo-credit a {
  color: rgba(255,255,255,.65) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
#sd-photo-credit a:hover {
  color: #fff !important;
}

@media (max-width: 600px) {
  #sd-photo-info-inner { flex-direction: column; align-items: flex-start; gap: 4px; }
  #sd-photo-desc { max-width: 100%; }
}

/* Widget empty state */
.sd-empty-state {
  color: var(--sd-text-tertiary);
  font-size: 12px;
  text-align: center;
  padding: 16px 0;
}