/* =========================================================
   DOVE TECHNOLOGY — HOMEPAGE ULTRA THEME
   - animated gradient sky + radial glow + subtle noise
   - glassmorphism cards, shimmer hover, neon borders
   - pulsing status pill, tactile search, pretty scrollbars
   - reduced-motion friendly
   ========================================================= */

/* ---------- Palette & knobs ---------- */
:root{
  --dt-bg-1:#0b1220;
  --dt-bg-2:#0f172a;
  --dt-bg-3:#111827;

  --dt-accent:#7dd3fc;       /* sky-300 */
  --dt-accent-2:#a78bfa;     /* violet-400 */
  --dt-accent-3:#34d399;     /* emerald-400 */

  --dt-fg:#e5e7eb;
  --dt-muted:#9ca3af;

  --dt-card:rgba(17,24,39,0.68);
  --dt-card-hover:rgba(17,24,39,0.9);
  --dt-border:#ffffff18;

  --dt-radius:18px;
  --dt-blur:8px;
  --dt-shadow:0 10px 30px rgba(0,0,0,.45);
  --dt-ring:0 0 0 2px rgba(125,211,252,.25), 0 0 0 8px rgba(125,211,252,.07);
}

/* ---------- Background: animated gradient + star noise ---------- */
html, body{
  min-height:100%;
  color:var(--dt-fg) !important;
  background:
    radial-gradient(1200px 600px at 80% -10%, #1e293b 0%, transparent 60%) ,
    conic-gradient(from 180deg at 50% 120%, rgba(125,211,252,.08), transparent 35%, rgba(167,139,250,.06) 55%, transparent 75%, rgba(52,211,153,.06) 95%) ,
    linear-gradient(135deg, var(--dt-bg-1), var(--dt-bg-2)) !important;
  position:relative;
  overflow-x:hidden;
}

/* star/noise overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 10% 20%, #fff3 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 30%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 80%, #fff2 50%, transparent 51%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2" seed="2"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>');
  mix-blend-mode:screen;
  z-index:0;
}

@keyframes bg-roll {
  0%{ background-position: 0% 0%, 0% 0%, 0% 0% }
  50%{ background-position: 100% 50%, 50% 50%, 100% 100% }
  100%{ background-position: 0% 0%, 0% 0%, 0% 0% }
}
@media (prefers-reduced-motion: no-preference){
  html, body { animation: bg-roll 40s linear infinite; }
}

/* ---------- Typography & headers ---------- */
.section-title, h1.section-title, h2.section-title{
  font-weight:800 !important;
  letter-spacing:.3px !important;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* ---------- Card base (services + bookmarks) ---------- */
.card, .service-card, .service, .bookmark{
  background:var(--dt-card) !important;
  border:1px solid var(--dt-border) !important;
  border-radius:var(--dt-radius) !important;
  box-shadow:var(--dt-shadow) !important;
  backdrop-filter: blur(var(--dt-blur));
  -webkit-backdrop-filter: blur(var(--dt-blur));
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
  position:relative;
  overflow:hidden;
}

/* soft inner gradient */
.card::before, .service-card::before, .service::before, .bookmark::before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background:radial-gradient(600px 220px at 15% -10%, rgba(125,211,252,.08), transparent 60%),
             radial-gradient(500px 200px at 100% 120%, rgba(167,139,250,.08), transparent 60%);
}

/* neon border glow on hover + tiny lift */
.card:hover, .service-card:hover, .service:hover, .bookmark:hover{
  transform: translateY(-3px) scale(1.005);
  border-color: rgba(125,211,252,.45) !important;
  background: var(--dt-card-hover) !important;
  box-shadow: 0 20px 50px rgba(2,6,23,.55) !important;
}

/* shimmer sweep */
@keyframes shimmer {
  0% { transform: translateX(-150%); opacity:.0 }
  50% { opacity:.25 }
  100% { transform: translateX(150%); opacity:0 }
}
.card:hover::after, .service:hover::after, .bookmark:hover::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.11) 50%, transparent 60%);
  transform: translateX(-150%);
  animation: shimmer 1.2s ease-out forwards;
}

/* title + subtitle in cards */
.description, .subtitle, .subtext { color:var(--dt-muted) !important; }

/* ---------- Ping pill (ms) ---------- */
.badge, .badge.pill{
  border-radius:999px !important;
  background:linear-gradient(90deg, var(--dt-accent), var(--dt-accent-2)) !important;
  color:#071018 !important;
  font-weight:700 !important;
  box-shadow:0 0 0 2px rgba(125,211,252,.2), 0 4px 18px rgba(125,211,252,.25);
}
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(125,211,252,.35) }
  70%{ box-shadow:0 0 0 10px rgba(125,211,252,0) }
  100%{ box-shadow:0 0 0 0 rgba(125,211,252,0) }
}
@media (prefers-reduced-motion: no-preference){
  .badge, .badge.pill { animation:pulse 3s ease-out infinite }
}

/* ---------- Search bar ---------- */
.search input, .search .input, input[type="search"]{
  background:rgba(11,18,32,.8) !important;
  border:1px solid var(--dt-border) !important;
  color:var(--dt-fg) !important;
  border-radius:14px !important;
  padding:12px 16px !important;
  box-shadow: var(--dt-shadow);
  transition: box-shadow .15s ease, border-color .15s ease !important;
}
.search input:focus, .search .input:focus{
  outline:none !important;
  border-color: rgba(125,211,252,.45) !important;
  box-shadow: var(--dt-ring);
}

/* ---------- Links & buttons ---------- */
a, .link { color: var(--dt-accent) !important; }
a:hover, .link:hover { color: var(--dt-accent-2) !important; }

/* ---------- Bookmark widget tweaks ---------- */
.bookmark a{
  text-decoration:none !important;
}
.bookmark .title{ font-weight:700 !important; }
.bookmark:hover .title{ color:#c7d2fe !important; }

/* ---------- Footer ---------- */
footer, .footer, .footer * { color: var(--dt-muted) !important; }

/* ---------- Scrollbar (Chromium/Edge/Firefox w/ modern flags) ---------- */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.5) transparent;
}
*::-webkit-scrollbar{ height:10px; width:10px }
*::-webkit-scrollbar-track{ background: transparent }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,211,252,.6), rgba(167,139,250,.6));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ---------- Error panels soften ---------- */
.alert.error{
  background: #3b0d0d !important;
  border-color:#ef4444aa !important;
  color:#fecaca !important;
}

/* ---------- Light mode fallback (if someone toggles) ---------- */
@media (prefers-color-scheme: light){
  :root{
    --dt-fg:#0b1220; --dt-muted:#334155;
    --dt-card:rgba(255,255,255,0.7); --dt-card-hover:rgba(255,255,255,0.92);
    --dt-border:#0b122015;
  }
  html, body{
    color:var(--dt-fg) !important;
    background:
      radial-gradient(1200px 600px at 80% -10%, #93c5fd40 0%, transparent 60%),
      linear-gradient(135deg, #e6f0ff, #f8fbff) !important;
  }
}

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

/* ==== PATCH: soften cards, fix clipping, nicer spacing ==== */

/* more breathing room between rows */
.services, .bookmarks, .grid, .section {
  gap: 18px !important;
}

/* cards: larger radius, no clipping, comfy padding */
.card, .service-card, .service, .bookmark {
  border-radius: 22px !important;
  overflow: visible !important;               /* let glow/pill breathe */
  padding: 14px 16px !important;              /* reduce the crammed feel */
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.40) !important;
}

/* make pseudo-elements respect rounded corners */
.card::before, .service-card::before, .service::before, .bookmark::before,
.card::after,  .service-card::after,  .service::after,  .bookmark::after {
  border-radius: inherit !important;
  inset: 0 !important;                        /* no 1px “line” at the bottom */
}

/* title/subtitle spacing inside cards */
.card .title, .service .title, .bookmark .title { 
  margin-bottom: 2px !important;
}
.description, .subtitle, .subtext { 
  margin-top: 0 !important; 
}

/* status pill sits above glows and doesn't get clipped */
.badge, .badge.pill {
  position: relative !important;
  z-index: 2 !important;
  padding: 3px 10px !important;
}

/* search bar: reduce the boxy look */
.search input, .search .input, input[type="search"]{
  border-radius: 14px !important;
  padding: 11px 14px !important;
}

/* bookmark rows: align content & soften edges */
.bookmark a{
  padding: 12px 14px !important;
  border-radius: inherit !important;
}

/* when hovering, keep it elegant, not “glowing box” */
.card:hover, .service-card:hover, .service:hover, .bookmark:hover{
  transform: translateY(-2px) scale(1.003) !important;
  box-shadow: 0 18px 42px rgba(2,6,23,.48) !important;
  border-color: rgba(125,211,252,.28) !important;
}

/* tighten section titles a touch */
.section-title, h1.section-title, h2.section-title { 
  margin-bottom: 10px !important; 
}

/* ===== PATCH v2: compact layout + no clipping anywhere ===== */

/* tighter vertical rhythm */
.section, .services, .bookmarks, .grid { gap: 12px !important; }

/* compact cards */
.card, .service-card, .service, .bookmark {
  border-radius: 16px !important;
  padding: 10px 14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
  /* stop outer clipping */
  overflow: visible !important;
}

/* some homepage builds wrap content in extra boxes that clip —
   force ALL immediate children to allow overflow and inherit radius */
.card > *, .service-card > *, .service > *, .bookmark > * {
  overflow: visible !important;
  border-radius: inherit !important;
}

/* and their children too (covers icon/title rows, inner frames) */
.card > * > *, .service > * > *, .bookmark > * > * {
  overflow: visible !important;
  border-radius: inherit !important;
}

/* pseudo elements should match radius and not create a thin line */
.card::before, .card::after,
.service-card::before, .service-card::after,
.service::before, .service::after,
.bookmark::before, .bookmark::after {
  inset: 0 !important;
  border-radius: inherit !important;
}

/* status pill: a touch smaller so it never touches edges */
.badge, .badge.pill { padding: 2px 9px !important; font-weight: 600 !important; }

/* search: shorter & less boxy */
.search input, .search .input, input[type="search"]{
  border-radius: 12px !important;
  padding: 9px 12px !important;
}

/* bookmark rows: reduce height */
.bookmark a{ padding: 10px 12px !important; }

/* hover: subtler lift so it doesn't look huge */
.card:hover, .service-card:hover, .service:hover, .bookmark:hover{
  transform: translateY(-1px) scale(1.001) !important;
  box-shadow: 0 14px 32px rgba(2,6,23,.42) !important;
}

/* small screens: even tighter */
@media (max-width: 900px){
  .card, .service-card, .service, .bookmark { padding: 8px 10px !important; border-radius: 14px !important; }
  .search input, .search .input, input[type="search"]{ padding: 8px 10px !important; }
}


/* ===== PATCH v3: nuke inner overflow + compact nicely ===== */

/* 1) Stop clipping anywhere inside the Services stack */
#services [class*="overflow-hidden"],
#services [class*="overflow-clip"],
#services .services-list,
#services .services-list * {
  overflow: visible !important;
}

/* 2) Make each <li class="service"> the clipping boundary (but still show glows) */
#services li.service {
  border-radius: 16px !important;
  overflow: visible !important;       /* we show glows/pill outside */
}

/* 3) The “service-card” inner container sometimes adds its own overflow */
#services .service-card,
#services .service-card > * {
  overflow: visible !important;
  border-radius: inherit !important;
}

/* 4) Tighter vertical spacing so cards feel less huge */
#services .services-list { gap: 10px !important; }
.section, .services, .bookmarks, .grid { gap: 12px !important; }

/* 5) Softer, smaller cards */
.card, .service-card, .service, .bookmark {
  border-radius: 16px !important;
  padding: 10px 12px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.34) !important;
}

/* 6) Ensure pseudo elements match radius and never create a bottom line */
.card::before, .card::after,
.service-card::before, .service-card::after,
.service::before, .service::after,
.bookmark::before, .bookmark::after {
  inset: 0 !important;
  border-radius: inherit !important;
}

/* 7) Status pill: a hair smaller and lifted above decorations */
.badge, .badge.pill {
  padding: 2px 9px !important;
  z-index: 3 !important;
  position: relative !important;
}

/* 8) Search bar a touch shorter */
.search input, .search .input, input[type="search"]{
  padding: 9px 12px !important;
  border-radius: 12px !important;
}

/* 9) Bookmarks rows not so tall */
.bookmark a{ padding: 10px 12px !important; }

/* 10) Subtle hover so size doesn’t feel jumpy */
.card:hover, .service-card:hover, .service:hover, .bookmark:hover{
  transform: translateY(-1px) scale(1.001) !important;
  box-shadow: 0 14px 30px rgba(2,6,23,.42) !important;
}

/* ===== PATCH v4: Bookmarks – no clipping + compact, pretty ===== */

/* kill any Tailwind overflow on the bookmarks column/wrappers */
#bookmarks [class*="overflow-hidden"],
#bookmarks [class*="overflow-clip"],
#bookmarks .bookmark-list,
#bookmarks .bookmark-list * {
  overflow: visible !important;
}

/* each list item should be the rounded boundary (but still allow glows) */
#bookmarks li.bookmark {
  border-radius: 16px !important;
  overflow: visible !important;
}

/* the anchor is the visible row; give it padding and inherit radius */
#bookmarks li.bookmark > a {
  border-radius: inherit !important;
  overflow: visible !important;
  padding: 10px 12px !important;      /* shorter row height */
  display: flex; align-items: center; gap: 12px;
}

/* compact vertical spacing between rows */
#bookmarks .bookmark-list { gap: 10px !important; }

/* icon + text blocks shouldn’t clip either */
#bookmarks .bookmark-icon,
#bookmarks .bookmark-text,
#bookmarks .bookmark-text * {
  overflow: visible !important;
  border-radius: inherit !important;
}

/* hover effect consistent with services (subtle lift + glow) */
#bookmarks li.bookmark:hover {
  transform: translateY(-1px) scale(1.001) !important;
  box-shadow: 0 14px 30px rgba(2,6,23,.42) !important;
}