/**
 * Shopno AI — Ultra Liquid Frosted Glassmorphism Design System
 * Inspired by Sofftysta Liquid UI & Apple VisionOS
 * https://surveymentor.org
 */

:root {
  --glass-bg-base: #050816;
  --glass-surface-1: rgba(15, 23, 42, 0.45);
  --glass-surface-2: rgba(22, 30, 56, 0.38);
  --glass-surface-hover: rgba(30, 41, 75, 0.65);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-specular: rgba(255, 255, 255, 0.45);
  --glass-border-left: rgba(255, 255, 255, 0.28);
  --glass-glow-cyan: #06b6d4;
  --glass-glow-violet: #8b5cf6;
  --glass-glow-magenta: #ec4899;
  --glass-blur: blur(32px) saturate(210%);
}

/* ==========================================================================
   GLOBAL BODY WALLPAPER & VOLUMETRIC LIQUID GLASS BACKGROUND
   ========================================================================== */
html, body {
  background-color: #050816 !important;
}

body,
body.liquid-glass-enabled,
body[data-theme="dark"],
.liquid-glass-bg {
  background-color: #050816 !important;
  background-image: 
    radial-gradient(circle at 18% 22%, rgba(139, 92, 246, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 82% 18%, rgba(6, 182, 212, 0.25) 0%, transparent 48%),
    radial-gradient(circle at 50% 80%, rgba(236, 72, 153, 0.18) 0%, transparent 50%),
    linear-gradient(rgba(5, 8, 22, 0.58), rgba(5, 8, 22, 0.72)),
    url('/assets/glass_bg_user.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: #f1f5f9 !important;
  min-height: 100vh;
}

/* Floating Bokeh Lighting Spheres */
.liquid-glass-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.liquid-glass-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: orbFloat 22s infinite ease-in-out alternate;
}
.orb-cyan {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, transparent 70%);
  top: -120px;
  left: -120px;
}
.orb-violet {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  top: 12%;
  right: -160px;
  animation-delay: -6s;
}
.orb-magenta {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%);
  bottom: -100px;
  left: 25%;
  animation-delay: -11s;
}

@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, 65px) scale(1.12); }
  100% { transform: translate(-35px, 30px) scale(0.92); }
}

/* ==========================================================================
   AUTHENTIC FROSTED GLASS CARDS & PANELS (Image media_1791315861687.jpg)
   ========================================================================== */
.glass-panel,
.glass-card,
.dash-card,
.stat-card,
.dash-hero,
.apikeys-table-wrap,
.license-card,
.wizard-card,
.payment-card,
.telemetry-card,
.download-card,
.card,
.auth-card,
.modal-content,
.amc-card {
  background: rgba(14, 21, 44, 0.46) !important;
  backdrop-filter: blur(34px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(210%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-left: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 25px 0 rgba(255, 255, 255, 0.02),
    0 25px 60px rgba(0, 0, 0, 0.65),
    0 0 35px rgba(99, 102, 241, 0.15) !important;
  border-radius: 24px !important;
  color: #f8fafc !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.glass-card:hover,
.dash-card:hover,
.stat-card:hover,
.download-card:hover {
  transform: translateY(-3px) !important;
  background: rgba(18, 26, 54, 0.55) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  border-top-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.45),
    0 35px 80px rgba(0, 0, 0, 0.75),
    0 0 45px rgba(6, 182, 212, 0.3) !important;
}

/* ==========================================================================
   FROSTED GLASS SIDEBAR & NAVIGATION (Image media_1791315861687.jpg)
   ========================================================================== */
.sidebar,
.chat-sidebar,
.amc-sidebar {
  background: rgba(11, 17, 36, 0.52) !important;
  backdrop-filter: blur(36px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(220%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    15px 0 45px rgba(0, 0, 0, 0.5) !important;
}

/* macOS Traffic Lights */
.macos-traffic-lights {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.macos-dot {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.macos-dot-red { background: #ef4444 !important; border: 1px solid #b91c1c !important; }
.macos-dot-yellow { background: #f59e0b !important; border: 1px solid #d97706 !important; }
.macos-dot-green { background: #10b981 !important; border: 1px solid #059669 !important; }

/* ==========================================================================
   HOMEPAGE-MATCHING FULL-WIDTH TOPBAR
   ========================================================================== */
.prototype-nav-dash {
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(7, 10, 24, 0.72) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.dash-top-link {
  color: #cbd5e1 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 8px 16px !important;
  border-radius: 9999px !important;
  transition: all 0.25s ease !important;
}
.dash-top-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   BUTTONS & INPUTS
   ========================================================================== */
.btn-primary,
.btn-vector.btn-primary,
.btn-submit {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(6, 182, 212, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: all 0.25s ease !important;
}
.btn-primary:hover,
.btn-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 35px rgba(6, 182, 212, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.form-control,
input.form-control,
select.form-control {
  background: rgba(10, 16, 32, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s ease !important;
}
.form-control:focus {
  outline: none !important;
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Glass Tables */
.table,
.table-modern,
.apikeys-table {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  width: 100% !important;
}
.table tr,
.apikeys-table tr {
  background: rgba(16, 24, 48, 0.55) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 14px !important;
  transition: all 0.2s ease !important;
}
.table tr:hover,
.apikeys-table tr:hover {
  background: rgba(26, 38, 74, 0.72) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 182, 212, 0.2) !important;
}