/* ============================================================
   KMSPico — Auto-Detect System Checker + Animated Logo
   ============================================================ */

/* ─── Wrapper ─── */
.auto-checker {
  max-width: 680px;
  margin: 0 auto 2.5rem;
  position: relative;
  z-index: 2;
}

/* ════════════════════════════════════
   SCAN ANIMATION
════════════════════════════════════ */
.ac-scan-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1rem 1rem;
}

/* Animated scanning ring */
.ac-scan-ring {
  position: relative;
  width: 64px; height: 64px;
}
.ac-scan-ring::before,
.ac-scan-ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}
.ac-scan-ring::before {
  inset: 0;
  border-top-color: #00b4d8;
  border-right-color: #00b4d8;
  animation: ac-spin .9s linear infinite;
}
.ac-scan-ring::after {
  inset: 8px;
  border-bottom-color: #22c55e;
  border-left-color: #22c55e;
  animation: ac-spin .6s linear infinite reverse;
}
.ac-scan-ring-inner {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,.25), rgba(0,180,216,.05));
  animation: ac-pulse 1.2s ease-in-out infinite;
}
@keyframes ac-spin  { to { transform: rotate(360deg) } }
@keyframes ac-pulse { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.15);opacity:1} }

/* Scan lines */
.ac-scan-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
}
.ac-scan-line {
  color: #6e7681;
  transition: all .25s;
  display: block;
}
.ac-scan-line.active { color: #00b4d8; font-weight: 600; }
.ac-scan-line.done   { color: #22c55e; }

/* Animated progress bar */
.ac-progress-bar-wrap {
  width: 260px;
  height: 4px;
  background: rgba(48,54,61,.5);
  border-radius: 999px;
  overflow: hidden;
}
.ac-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00b4d8, #22c55e, #a78bfa, #00b4d8);
  background-size: 200%;
  animation: ac-progress-move 2.5s ease-in-out forwards, ac-bar-shimmer 1.2s linear infinite;
  transition: width .3s ease;
}
@keyframes ac-progress-move {
  0%  { width: 5%  }
  30% { width: 40% }
  60% { width: 70% }
  85% { width: 88% }
  100%{ width: 100%}
}
@keyframes ac-bar-shimmer {
  0%  { background-position: 0%   }
  100%{ background-position: 200% }
}

/* ════════════════════════════════════
   RESULT CARD
════════════════════════════════════ */
.ac-card {
  background: rgba(22,27,34,.97);
  border: 1px solid rgba(48,54,61,.9);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,180,216,.1), 0 24px 48px rgba(0,0,0,.5);
  animation: ac-in .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ac-in {
  from { opacity:0; transform:translateY(12px) scale(.97) }
  to   { opacity:1; transform:translateY(0) scale(1) }
}

/* ─── Status bar ─── */
.ac-status-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(245,158,11,.05));
  border-bottom: 1px solid rgba(239,68,68,.2);
}
.ac-status-icon {
  font-size: 1.5rem;
  animation: ac-pulse 1.5s ease-in-out infinite;
}
.ac-status-text strong {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  color: #fca5a5;
}
.ac-status-text span {
  font-size: .75rem;
  color: #8b949e;
}
.ac-status-badge {
  margin-left: auto;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.35);
  color: #f87171;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ─── Specs toggle button ─── */
.ac-specs-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .9rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,180,216,.06), rgba(34,197,94,.04));
  border: none;
  border-bottom: 1px solid rgba(48,54,61,.5);
  cursor: pointer;
  color: #e6edf3;
  transition: background .22s;
  position: relative;
  overflow: hidden;
}
.ac-specs-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,180,216,.07) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .45s ease;
}
.ac-specs-toggle:hover::before { transform: translateX(100%) }
.ac-specs-toggle:hover { background: linear-gradient(135deg,rgba(0,180,216,.1),rgba(34,197,94,.07)) }

.ac-specs-toggle-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.ac-specs-toggle-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00b4d8;
  box-shadow: 0 0 8px #00b4d8;
  animation: blink-dot 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
.ac-specs-toggle-label {
  font-size: .85rem;
  font-weight: 700;
  color: #00b4d8;
}
.ac-specs-toggle-sub {
  font-size: .72rem;
  color: #6e7681;
  margin-top: .1rem;
}
.ac-specs-arrow {
  font-size: .8rem;
  color: #6e7681;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}
.ac-specs-toggle.open .ac-specs-arrow { transform: rotate(180deg) }
.ac-specs-toggle.open .ac-specs-toggle-dot {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: none;
}
.ac-specs-toggle.open .ac-specs-toggle-label { color: #22c55e }

/* ─── Specs grid (collapsible) ─── */
.ac-specs-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.22,1,.36,1);
}
.ac-specs-collapse.open { max-height: 700px }

/* Sweep line that plays on open */
.ac-specs-sweep {
  height: 2px;
  background: linear-gradient(90deg, #00b4d8, #22c55e, #a78bfa);
  background-size: 200%;
  animation: ac-bar-shimmer 1.2s linear infinite;
  opacity: 0;
  transition: opacity .2s;
}
.ac-specs-collapse.open .ac-specs-sweep { opacity: 1 }

.ac-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-bottom: 1px solid rgba(48,54,61,.5);
}
.ac-spec-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 1.25rem;
  border-right: 1px solid rgba(48,54,61,.4);
  border-bottom: 1px solid rgba(48,54,61,.4);
  transition: background .2s, transform .2s;
  opacity: 0;
  transform: translateY(8px);
}
.ac-spec-card:hover {
  background: rgba(0,180,216,.05);
  transform: translateY(-1px) !important;
}
/* Each card revealed with stagger when grid opens */
.ac-specs-collapse.open .ac-spec-card {
  animation: spec-reveal .38s cubic-bezier(.22,1,.36,1) both;
}
.ac-specs-collapse.open .ac-spec-card:nth-child(1) { animation-delay:.04s }
.ac-specs-collapse.open .ac-spec-card:nth-child(2) { animation-delay:.1s  }
.ac-specs-collapse.open .ac-spec-card:nth-child(3) { animation-delay:.16s }
.ac-specs-collapse.open .ac-spec-card:nth-child(4) { animation-delay:.22s }
.ac-specs-collapse.open .ac-spec-card:nth-child(5) { animation-delay:.28s }
.ac-specs-collapse.open .ac-spec-card:nth-child(6) { animation-delay:.34s }
.ac-specs-collapse.open .ac-spec-card:nth-child(7) { animation-delay:.40s }
@keyframes spec-reveal {
  from { opacity:0; transform:translateY(10px) scale(.97) }
  to   { opacity:1; transform:translateY(0) scale(1) }
}

.ac-spec-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.ac-spec-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #6e7681;
  margin-bottom: .2rem;
}
.ac-spec-value {
  font-size: .88rem;
  font-weight: 700;
  color: #e6edf3;
  line-height: 1.3;
}
.ac-spec-sub {
  font-size: .72rem;
  color: #8b949e;
  margin-top: .1rem;
}

/* ─── Inner content (picker + dl) ─── */
.ac-inner { padding: 1.25rem 1.5rem; }

/* ─── Divider ─── */
.ac-divider {
  height: 1px;
  background: rgba(48,54,61,.6);
  margin: 0;
}

/* ─── Office picker ─── */
#ac-picker { padding: 1.1rem 1.5rem 1rem; }
.ac-picker-label {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6e7681;
  text-align: center;
  margin-bottom: .7rem;
}
.ac-office-grid {
  display: flex;
  justify-content: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.ac-off-btn {
  padding: .4rem .85rem;
  border-radius: 8px;
  border: 1.5px solid rgba(48,54,61,.9);
  background: rgba(28,33,40,.9);
  color: #c9d1d9;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
}
.ac-off-btn:hover {
  border-color: #00b4d8;
  background: rgba(0,180,216,.1);
  color: #00b4d8;
  transform: translateY(-1px);
}
.ac-off-btn.selected {
  border-color: #22c55e;
  background: rgba(34,197,94,.12);
  color: #4ade80;
}
.ac-skip {
  display: block;
  width: 100%;
  text-align: center;
  font-size: .73rem;
  color: #6e7681;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  padding: .2rem 0;
  transition: color .2s;
}
.ac-skip:hover { color: #8b949e; }

/* ─── Download area ─── */
#ac-dl-area { padding: 0 1.5rem 1.5rem; }
.ac-dl-area { animation: ac-in .35s cubic-bezier(.22,1,.36,1) both; }
.ac-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #000 !important;
  font-weight: 800;
  font-size: .98rem;
  border-radius: 10px;
  text-decoration: none !important;
  box-shadow: 0 4px 22px rgba(34,197,94,.45);
  animation: dl-pulse 2.5s ease-in-out infinite;
  transition: all .2s;
}
.ac-dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(34,197,94,.65);
}
@keyframes dl-pulse {
  0%,100% { box-shadow: 0 4px 22px rgba(34,197,94,.45) }
  50%      { box-shadow: 0 4px 30px rgba(34,197,94,.6), 0 0 0 6px rgba(34,197,94,.08) }
}
.ac-dl-meta {
  text-align: center;
  font-size: .72rem;
  color: #6e7681;
  margin-top: .5rem;
}
.ac-dl-meta span { color: #22c55e; font-weight: 600; }

/* ─── Fallback ─── */
.ac-fallback {
  text-align: center;
  font-size: .88rem;
  color: #8b949e;
  padding: 1rem;
}
.ac-fallback a { color: #00b4d8; font-weight: 700; text-decoration: underline; }

/* ════════════════════════════════════
   ANIMATED LOGO (header)
════════════════════════════════════ */
.logo-animated {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
}
.logo-rings {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.logo-rings svg.logo-svg {
  width: 32px; height: 32px;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 6px rgba(0,180,216,.7));
}
/* ring glow behind icon */
.logo-rings::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #00b4d8;
  border-bottom-color: #22c55e;
  animation: ac-spin 2.5s linear infinite;
}
.logo-text-animated {
  font-size: 1.25rem;
  font-weight: 800;
  background: linear-gradient(135deg, #00b4d8, #22c55e, #a78bfa, #00b4d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 300%;
  animation: logo-shift 4s linear infinite;
}
.logo-text-animated em {
  font-style: normal;
}
@keyframes logo-shift {
  0%   { background-position: 0%   }
  50%  { background-position: 100% }
  100% { background-position: 0%   }
}

/* ─── Video Guide ─── */
.video-guide {
  margin: 1.5rem 0 2rem;
  background: rgba(22,27,34,.97);
  border: 1px solid rgba(48,54,61,.9);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,180,216,.08), 0 8px 32px rgba(0,0,0,.35);
}
.video-guide-header {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.25rem;
  background: linear-gradient(135deg, rgba(0,180,216,.08), rgba(34,197,94,.05));
  border-bottom: 1px solid rgba(48,54,61,.6);
  font-size: .88rem;
  font-weight: 700;
  color: #00b4d8;
}
.vg-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 12px 0 0 #fbbf24, 24px 0 0 #22c55e;
  flex-shrink: 0;
}
.video-wrap { position: relative; background: #000; aspect-ratio: 16/9; }
.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ─── Responsive ─── */
@media(max-width:600px){
  .ac-specs-grid { grid-template-columns: 1fr 1fr }
  #ac-picker { padding: 1rem 1rem .9rem }
  #ac-dl-area { padding: 0 1rem 1.25rem }
  .ac-office-grid { gap: .3rem }
  .ac-off-btn { padding: .35rem .65rem; font-size: .75rem }
  .ac-dl-btn { font-size: .88rem; padding: .9rem }
  .ac-status-bar { padding: .85rem 1rem }
}