:root {
  --dkd-v21-cyan: #43ddff;
  --dkd-v21-blue: #4f8cff;
  --dkd-v21-violet: #9b7cff;
  --dkd-v21-green: #4ce6aa;
  --dkd-v21-orange: #ffb45f;
  --dkd-v21-red: #ff6e8b;
}

html { scroll-behavior: smooth; }
#dkd-app { font-size: 16px; line-height: 1.55; }
#dkd-app p,
#dkd-app small,
#dkd-app label,
#dkd-app [class*="subtitle"],
#dkd-app [class*="description"],
#dkd-app [class*="detail"],
#dkd-app [class*="meta"],
#dkd-app [class*="hint"],
#dkd-app [class*="help"],
#dkd-app [class*="eyebrow"] {
  font-size: max(14px, .875rem) !important;
  line-height: 1.55 !important;
  letter-spacing: .01em;
}
#dkd-app label { font-weight: 800 !important; color: #c9d4e6 !important; }
#dkd-app input,
#dkd-app select,
#dkd-app textarea,
#dkd-app button { font-size: 16px !important; }
#dkd-app input,
#dkd-app select,
#dkd-app textarea { min-height: 58px; }
#dkd-app button,
#dkd-app [role="button"],
#dkd-app .btn {
  min-height: 52px;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), filter .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#dkd-app button:active,
#dkd-app [role="button"]:active,
#dkd-app .btn:active,
#dkd-app .dkd-v21-pressed {
  transform: translateY(2px) scale(.965) !important;
  filter: brightness(1.18) saturate(1.16) !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.32), 0 0 0 2px rgba(67,221,255,.22) !important;
}
#dkd-app button:focus-visible,
#dkd-app input:focus-visible,
#dkd-app select:focus-visible,
#dkd-app textarea:focus-visible {
  outline: 3px solid rgba(67,221,255,.28) !important;
  outline-offset: 3px;
}

html.dkd-v21-global-loading::before {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  height: 4px;
  width: 42%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--dkd-v21-cyan), var(--dkd-v21-violet), var(--dkd-v21-green));
  box-shadow: 0 0 22px rgba(67,221,255,.75);
  animation: dkd-v21-progress 1.05s ease-in-out infinite;
}
@keyframes dkd-v21-progress {
  0% { transform: translateX(-110%); }
  55% { width: 58%; }
  100% { transform: translateX(245%); width: 38%; }
}
#dkd-app .dkd-v21-loading {
  position: relative !important;
  pointer-events: none !important;
  filter: saturate(.82) brightness(.92) !important;
}
#dkd-app .dkd-v21-loading::after {
  content: "";
  width: 20px;
  height: 20px;
  margin-left: 12px;
  flex: 0 0 20px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dkd-v21-spin .72s linear infinite;
}
@keyframes dkd-v21-spin { to { transform: rotate(360deg); } }

.dkd-v21-native-site-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.dkd-v21-site-search { display: grid; gap: 12px; width: 100%; }
.dkd-v21-site-search-box {
  min-height: 68px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(67,221,255,.42);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(12,37,57,.92), rgba(17,22,50,.96));
  box-shadow: 0 0 0 5px rgba(67,221,255,.055), inset 0 1px 0 rgba(255,255,255,.06), 0 18px 38px rgba(0,0,0,.22);
}
.dkd-v21-site-search-box:focus-within {
  border-color: rgba(67,221,255,.9);
  box-shadow: 0 0 0 5px rgba(67,221,255,.12), 0 0 28px rgba(67,221,255,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.dkd-v21-site-search-icon,
.dkd-v21-site-selected-icon { color: var(--dkd-v21-cyan); display: grid; place-items: center; }
.dkd-v21-site-search-icon svg,
.dkd-v21-site-selected-icon svg,
.dkd-v21-site-result svg,
.dkd-v21-site-selected i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dkd-v21-site-search-box input {
  width: 100%;
  min-width: 0;
  min-height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f7fbff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
.dkd-v21-site-search-box input::placeholder { color: #8f9ab0; opacity: 1; }
.dkd-v21-site-search-status {
  padding: 7px 9px;
  border-radius: 999px;
  color: var(--dkd-v21-cyan);
  background: rgba(67,221,255,.09);
  border: 1px solid rgba(67,221,255,.24);
  font-size: 10px !important;
  font-weight: 950;
  letter-spacing: .08em;
}
.dkd-v21-site-help { margin: 0 4px !important; color: #9da9bd !important; }
.dkd-v21-site-results {
  display: grid;
  gap: 8px;
  padding: 9px;
  max-height: 310px;
  overflow: auto;
  border: 1px solid rgba(82,114,159,.38);
  border-radius: 22px;
  background: rgba(7,13,30,.97);
  box-shadow: 0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.dkd-v21-site-result {
  width: 100%;
  min-height: 58px !important;
  padding: 12px 14px;
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid rgba(82,114,159,.28) !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, rgba(18,29,56,.92), rgba(9,20,39,.95)) !important;
  color: #f6f9ff !important;
}
.dkd-v21-site-result:hover { border-color: rgba(67,221,255,.62) !important; background: rgba(67,221,255,.08) !important; }
.dkd-v21-site-result span { color: var(--dkd-v21-cyan); display: grid; place-items: center; }
.dkd-v21-site-result strong { font-size: 15px; line-height: 1.3; }
.dkd-v21-site-result i { color: var(--dkd-v21-cyan); font-size: 10px; font-style: normal; font-weight: 950; }
.dkd-v21-site-empty { padding: 18px; text-align: center; color: #aeb9cb; font-size: 14px; }
.dkd-v21-site-selected {
  min-height: 64px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 25px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(76,230,170,.44);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(76,230,170,.12), rgba(67,221,255,.07));
  box-shadow: 0 12px 30px rgba(24,104,84,.12);
}
.dkd-v21-site-selected[hidden] { display: none !important; }
.dkd-v21-site-selected span:nth-child(2) { display: grid; gap: 2px; }
.dkd-v21-site-selected small { color: var(--dkd-v21-green) !important; font-size: 10px !important; font-weight: 950; letter-spacing: .08em; }
.dkd-v21-site-selected strong { color: #f5fff9; font-size: 15px; }
.dkd-v21-site-selected i { color: var(--dkd-v21-green); display: grid; place-items: center; }
#dkd-app .dkd-v21-gate-locked { opacity: .46 !important; cursor: not-allowed; }
#dkd-app .dkd-v21-security-mode-hidden { display: none !important; }

.dkd-v21-toast-root {
  position: fixed;
  z-index: 100001;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  width: min(92vw, 520px);
  transform: translateX(-50%);
  display: grid;
  gap: 9px;
  pointer-events: none;
}
.dkd-v21-toast {
  min-height: 58px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(67,221,255,.35);
  border-radius: 19px;
  background: rgba(7,15,31,.96);
  color: #f7faff;
  box-shadow: 0 22px 52px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(20px);
}
.dkd-v21-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.dkd-v21-toast strong { font-size: 14px; line-height: 1.4; }
.dkd-v21-toast-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: var(--dkd-v21-cyan); box-shadow: 0 0 16px currentColor; }
.dkd-v21-toast-success { border-color: rgba(76,230,170,.44); }
.dkd-v21-toast-success .dkd-v21-toast-dot { background: var(--dkd-v21-green); }
.dkd-v21-toast-error { border-color: rgba(255,110,139,.48); }
.dkd-v21-toast-error .dkd-v21-toast-dot { background: var(--dkd-v21-red); }

@media (max-width: 640px) {
  #dkd-app { font-size: 16px; }
  #dkd-app h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.12 !important; }
  #dkd-app h2 { font-size: clamp(21px, 6vw, 28px) !important; line-height: 1.22 !important; }
  #dkd-app h3 { font-size: 19px !important; line-height: 1.3 !important; }
  #dkd-app nav span,
  #dkd-app [class*="bottom"] span { font-size: 12px !important; }
  .dkd-v21-site-search-box { grid-template-columns: 25px minmax(0,1fr) auto; padding: 0 13px; }
  .dkd-v21-site-search-status { font-size: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
