/**
 * D-NET LAB: EMBEDDABLE WIDGET SCOPED STYLES
 * Scoped under .dnet-w class namespace to prevent styles leaking into host pages.
 */

.dnet-w {
  --w-primary: #00e0ff;
  --w-secondary: #3b82f6;
  --w-accent: #8b5cf6;
  --w-bg: #0d1117;
  --w-surface: #161b22;
  --w-text: #c9d1d9;
  --w-text-muted: #8b949e;
  --w-success: #2f855a;
  --w-error: #c53030;
  --w-star-gold: #00e0ff;
  --w-star-empty: #21262d;
  --w-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --w-radius: 16px;
  --w-radius-sm: 10px;
  --w-glass-bg: #161b22; /* Solid dark background to prevent washed-out look on light host pages */
  --w-glass-border: rgba(255, 255, 255, 0.08);
  --w-shadow-glow: 0 0 60px color-mix(in srgb, var(--w-accent) 8%, transparent);
  --w-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dnet-w {
  font-family: var(--w-font) !important;
  color: var(--w-text) !important;
  line-height: 1.6 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.dnet-w *, .dnet-w *::before, .dnet-w *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--w-font) !important;
}

.dnet-w .dnet-w-card {
  background: var(--w-glass-bg) !important;
  border: 1px solid var(--w-glass-border) !important;
  border-radius: 24px !important;
  padding: 40px 28px !important;
  box-shadow: var(--w-shadow-glow), 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  overflow: hidden !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

.dnet-w .dnet-w-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 70%, transparent) !important;
}

.dnet-w .dnet-w-header {
  text-align: center !important;
  margin-bottom: 36px !important;
}

.dnet-w .dnet-w-logo {
  width: 72px !important;
  height: 72px !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  margin: 0 auto 16px !important;
  border: 1px solid var(--w-glass-border) !important;
  background: var(--w-surface) !important;
  display: block !important;
}

.dnet-w .dnet-w-logo-placeholder {
  width: 72px !important;
  height: 72px !important;
  border-radius: 18px !important;
  margin: 0 auto 16px !important;
  background: linear-gradient(135deg, var(--w-accent), var(--w-primary)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: white !important;
  letter-spacing: -1px !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3) !important;
}

.dnet-w .dnet-w-bname {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--w-text) !important;
  margin-bottom: 4px !important;
  text-align: center !important;
}

.dnet-w .dnet-w-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  background: linear-gradient(135deg, var(--w-text) 0%, var(--w-text-muted) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.dnet-w .dnet-w-subtitle {
  font-size: .875rem !important;
  color: var(--w-text-muted) !important;
  text-align: center !important;
  line-height: 1.5 !important;
  margin-bottom: 32px !important;
}

.dnet-w .dnet-w-stars {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 0 12px !important;
}

.dnet-w .dnet-w-star {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  border-radius: 12px !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.dnet-w .dnet-w-star:hover {
  transform: scale(1.15) translateY(-2px) !important;
  background: rgba(0, 224, 255, 0.08) !important;
}

.dnet-w .dnet-w-star:active {
  transform: scale(0.92) !important;
}

.dnet-w .dnet-w-star svg {
  width: 44px !important;
  height: 44px !important;
  transition: filter 0.3s !important;
  display: block !important;
}

.dnet-w .dnet-w-star .sf {
  fill: var(--w-star-empty) !important;
  transition: fill 0.3s !important;
}

.dnet-w .dnet-w-star .ss {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.05) !important;
  stroke-width: 1 !important;
}

.dnet-w .dnet-w-star.active .sf {
  fill: var(--w-star-gold) !important;
}

.dnet-w .dnet-w-star.active svg {
  filter: drop-shadow(0 0 8px var(--w-star-gold)) !important;
}

.dnet-w .dnet-w-slabel {
  display: block !important;
  text-align: center !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  color: var(--w-text-muted) !important;
  margin-top: 8px !important;
  min-height: 20px !important;
  opacity: 0 !important;
  transition: color 0.3s, opacity 0.3s !important;
}

.dnet-w .dnet-w-slabel.visible {
  opacity: 1 !important;
}

.dnet-w .dnet-w-slabel.pos {
  color: var(--w-star-gold) !important;
}

.dnet-w .dnet-w-gate {
  display: none !important;
  opacity: 0 !important;
  transform: translateY(16px) !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dnet-w .dnet-w-gate.active {
  display: block !important;
}

.dnet-w .dnet-w-gate.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.dnet-w .dnet-w-divider {
  width: 48px !important;
  height: 3px !important;
  border-radius: 3px !important;
  margin: 24px auto !important;
  background: linear-gradient(90deg, var(--w-accent), var(--w-primary)) !important;
  opacity: 0.5 !important;
}

.dnet-w .dnet-w-gtitle {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  color: var(--w-text) !important;
}

.dnet-w .dnet-w-gbody {
  font-size: .875rem !important;
  color: var(--w-text-muted) !important;
  text-align: center !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

.dnet-w .dnet-w-gbtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 16px 24px !important;
  background: white !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: var(--w-radius) !important;
  font-family: var(--w-font) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.dnet-w .dnet-w-gbtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.dnet-w .dnet-w-gbtn svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

.dnet-w .dnet-w-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.dnet-w .dnet-w-field {
  margin-bottom: 16px !important;
}

.dnet-w .dnet-w-form label {
  display: block !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: var(--w-text-muted) !important;
  margin-bottom: 6px !important;
  text-align: left !important;
}

.dnet-w .dnet-w-input, .dnet-w .dnet-w-textarea, .dnet-w .dnet-w-select {
  width: 100% !important;
  padding: 14px 16px !important;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-glass-border) !important;
  border-radius: var(--w-radius-sm) !important;
  color: var(--w-text) !important;
  font-family: var(--w-font) !important;
  font-size: .9375rem !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  outline: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

.dnet-w .dnet-w-textarea {
  min-height: 120px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

.dnet-w .dnet-w-input::placeholder, .dnet-w .dnet-w-textarea::placeholder {
  color: var(--w-text-muted) !important;
  opacity: 0.6 !important;
}

.dnet-w .dnet-w-input:focus, .dnet-w .dnet-w-textarea:focus, .dnet-w .dnet-w-select:focus {
  border-color: var(--w-accent) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12) !important;
}

.dnet-w .dnet-w-chk-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: .9rem !important;
  color: var(--w-text-muted) !important;
  user-select: none !important;
  padding: 4px 0 !important;
}

.dnet-w .dnet-w-chk-label input {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--w-primary) !important;
  cursor: pointer !important;
}

.dnet-w .dnet-w-submit {
  width: 100% !important;
  padding: 16px 24px !important;
  background: linear-gradient(135deg, var(--w-accent), var(--w-secondary)) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--w-radius) !important;
  font-family: var(--w-font) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
}

.dnet-w .dnet-w-submit:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3) !important;
}

.dnet-w .dnet-w-submit:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.dnet-w .dnet-w-submit .spinner {
  display: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: white !important;
  border-radius: 50% !important;
  animation: dnet-spin 0.6s linear infinite !important;
  margin: 0 auto !important;
}

.dnet-w .dnet-w-submit.loading .btn-text {
  display: none !important;
}

.dnet-w .dnet-w-submit.loading .spinner {
  display: block !important;
}

@keyframes dnet-spin {
  to { transform: rotate(360deg); }
}

.dnet-w .dnet-w-check {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--w-success), #059669) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  animation: dnet-scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.3) !important;
}

.dnet-w .dnet-w-check svg {
  width: 36px !important;
  height: 36px !important;
  stroke: white !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  display: block !important;
}

@keyframes dnet-scaleIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.dnet-w-toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(100px) !important;
  background: var(--w-error) !important;
  color: white !important;
  padding: 14px 24px !important;
  border-radius: var(--w-radius-sm) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3) !important;
  z-index: 100000 !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  max-width: 90% !important;
  text-align: center !important;
  font-family: var(--w-font) !important;
}

.dnet-w-toast.visible {
  transform: translateX(-50%) translateY(0) !important;
}

.dnet-w .dnet-w-footer {
  text-align: center !important;
  margin-top: 20px !important;
  padding: 8px !important;
}

.dnet-w .dnet-w-footer a {
  font-size: .7rem !important;
  color: var(--w-text-muted) !important;
  text-decoration: none !important;
  opacity: 0.5 !important;
  transition: opacity 0.3s !important;
  letter-spacing: 0.04em !important;
  font-family: var(--w-font) !important;
  display: inline-block !important;
}

.dnet-w .dnet-w-footer a:hover {
  opacity: 0.8 !important;
}

.dnet-w .dnet-w-checkbox-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  margin-top: 6px !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
}

.dnet-w .dnet-w-grid-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  overflow-x: auto !important;
  margin-top: 10px !important;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-glass-border) !important;
  border-radius: var(--w-radius-sm) !important;
  padding: 12px !important;
}

.dnet-w .dnet-w-grid-header-row, .dnet-w .dnet-w-grid-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  min-width: max-content !important;
}

.dnet-w .dnet-w-grid-header-cell, .dnet-w .dnet-w-grid-row-label, .dnet-w .dnet-w-grid-cell {
  width: 70px !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  padding: 6px 4px !important;
}

.dnet-w .dnet-w-grid-row-label {
  text-align: left !important;
  font-weight: 600 !important;
  width: 90px !important;
  color: var(--w-text) !important;
}

.dnet-w .dnet-w-grid-header-cell.dnet-w-grid-corner {
  width: 90px !important;
  text-align: left !important;
  font-weight: 600 !important;
}

.dnet-w .dnet-w-grid-header-cell {
  font-weight: 600 !important;
  color: var(--w-text-muted) !important;
}

.dnet-w .dnet-w-grid-cell {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.dnet-w .dnet-w-grid-checkbox-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
}

.dnet-w .dnet-w-grid-checkbox {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--w-primary) !important;
  cursor: pointer !important;
}

@media(max-width:380px) {
  .dnet-w .dnet-w-card {
    padding: 32px 20px !important;
  }
  .dnet-w .dnet-w-star svg {
    width: 38px !important;
    height: 38px !important;
  }
  .dnet-w .dnet-w-stars {
    gap: 6px !important;
  }
  .dnet-w .dnet-w-title {
    font-size: 1.3rem !important;
  }
}