/* nuxtui.css — Nuxt UI–like look & feel */
/* Design tokens (light) */
:root {
  /* base */
  --ui-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --ui-bg: #f8fafc;             /* slate-50 */
  --ui-card: #ffffff;
  --ui-card-border: #e5e7eb;    /* gray-200 */
  --ui-muted: #6b7280;          /* gray-500 */
  --ui-foreground: #0f172a;     /* slate-900 */

  /* primary (indigo) */
  --ui-primary: #4f46e5;        /* indigo-600 */
  --ui-primary-500: #6366f1;    /* indigo-500 */
  --ui-primary-400: #818cf8;    /* indigo-400 */
  --ui-primary-50: #eef2ff;     /* indigo-50 */

  /* success / warning / error */
  --ui-success: #16a34a;        /* green-600 */
  --ui-warning: #f59e0b;        /* amber-500 */
  --ui-error: #dc2626;          /* red-600 */

  /* surfaces */
  --ui-ring: rgba(79, 70, 229, 0.25);
  --ui-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);

  /* radii */
  --ui-rounded-sm: 0.5rem;
  --ui-rounded: 0.75rem;
  --ui-rounded-lg: 1rem;
  --ui-rounded-xl: 1.25rem;

  /* sizing */
  --ui-content-px: 1.25rem;
  --ui-content-py: 1.25rem;
}

/* Design tokens (dark) */
.dark {
  --ui-bg: #0b1220;            /* near slate-950 */
  --ui-card: #0f172a;          /* slate-900 */
  --ui-card-border: #1f2937;   /* gray-800 */
  --ui-muted: #94a3b8;         /* slate-400 */
  --ui-foreground: #e5e7eb;    /* gray-200 */

  --ui-primary: #818cf8;       /* indigo-400 */
  --ui-primary-500: #8b92fa;
  --ui-primary-400: #a5b4fc;
  --ui-primary-50: #111635;

  --ui-ring: rgba(129, 140, 248, 0.35);
  --ui-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--ui-font-sans);
  background: var(--ui-bg);
  color: var(--ui-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.container {
  max-width: 1100px;
  margin: 2rem auto;
  background: var(--ui-card);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-rounded-xl);
  box-shadow: var(--ui-shadow);
  overflow: clip;
}

.header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ui-card-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-primary) 9%, transparent), transparent);
}
.header h1 {
  margin: 0 0 .25rem;
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  letter-spacing: .2px;
}
.header p {
  margin: 0;
  color: var(--ui-muted);
  font-size: .9375rem; /* text-sm+ */
}

.content {
  padding: 1rem;
}
@media (min-width: 768px) {
  .content {
    padding: 1.25rem 1.5rem;
  }
}

/* Progress */
.progress-container {
  padding: .75rem 1rem;
  background: transparent;
  border-top: 1px solid var(--ui-card-border);
  border-bottom: 1px solid var(--ui-card-border);
}
.progress-bar {
  width: 100%;
  height: .625rem;           /* h-2.5 */
  background: color-mix(in srgb, var(--ui-card-border) 70%, transparent);
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  min-width: 2.5rem;
  background: var(--ui-primary);
  border-radius: 9999px;
  color: white;
  font-weight: 700;
  font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  transition: width .35s ease;
}

/* Sections (Cards) */
.test-section {
  margin-bottom: 1rem;
  background: var(--ui-card);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-rounded-lg);
  padding: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.test-section.testing {
  border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-card-border));
  box-shadow: 0 0 0 3px var(--ui-ring);
}
.test-section.completed { border-color: rgba(22,163,74,.35); } /* success ring */
.test-section.error { border-color: rgba(220,38,38,.45); }

.section-header {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .75rem;
}
.section-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 9999px;
  display: grid; place-items: center;
  font-size: 1.125rem;
  background: var(--ui-primary-50);
  color: var(--ui-primary);
  border: 1px solid color-mix(in srgb, var(--ui-primary) 25%, var(--ui-card-border));
}
.section-icon.testing {
  outline: 3px solid var(--ui-ring);
}
.section-icon.completed {
  background: color-mix(in srgb, var(--ui-success) 12%, transparent);
  color: var(--ui-success);
  border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-card-border));
}
.section-icon.error {
  background: color-mix(in srgb, var(--ui-error) 14%, transparent);
  color: var(--ui-error);
  border-color: color-mix(in srgb, var(--ui-error) 25%, var(--ui-card-border));
}
.section-title {
  font-size: 1rem;
  font-weight: 700;
}

/* Items (List) */
.test-items { margin-top: .25rem; }
.test-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem;
  border-radius: var(--ui-rounded);
  border: 1px solid var(--ui-card-border);
  background: color-mix(in srgb, var(--ui-card) 92%, transparent);
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
  margin-bottom: .5rem;
}
.test-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ui-card-border) 60%, var(--ui-primary) 12%);
}
.status-icon {
  width: 1.25rem; height: 1.25rem; display: grid; place-items: center;
  font-size: .95rem;
}
.test-label {
  flex: 1;
  color: var(--ui-foreground);
  font-weight: 600;
  font-size: .9375rem;
}
.test-value {
  font-weight: 700;
  font-size: .9rem;
}
.status-good { color: var(--ui-success); }
.status-warning { color: var(--ui-warning); }
.status-error { color: var(--ui-error); }

/* Spinner (Nuxt UI-ish) */
.spinner {
  width: 1rem; height: 1rem;
  border-radius: 9999px;
  border: 2px solid color-mix(in srgb, var(--ui-primary) 20%, transparent);
  border-top-color: var(--ui-primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Summary block */
.summary {
  margin-top: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--ui-primary-50) 65%, var(--ui-card));
  border: 1px solid color-mix(in srgb, var(--ui-primary) 18%, var(--ui-card-border));
  color: var(--ui-foreground);
  border-radius: var(--ui-rounded-lg);
  display: none;
}
.summary.show { display: block; }
.summary-header {
  font-size: 1.125rem; font-weight: 800; text-align: left;
  margin-bottom: .5rem;
}
.summary-score {
  font-size: 2rem; font-weight: 800;
  margin: .25rem 0 .5rem;
}
.issues-list {
  margin-top: .5rem;
  display: grid; gap: .5rem;
}
.issue-item {
  padding: .75rem .875rem;
  background: var(--ui-card);
  border: 1px solid var(--ui-card-border);
  border-left: 4px solid var(--ui-error);
  border-radius: calc(var(--ui-rounded) - 2px);
}
.issue-item.warning { border-left-color: var(--ui-warning); }
.issue-item.info { border-left-color: var(--ui-primary); }
.issue-title { font-weight: 700; margin-bottom: .125rem; }
.issue-recommendation { color: var(--ui-muted); font-size: .9rem; }

/* Actions / Buttons (Nuxt UI style) */
.actions {
  display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap;
}
.btn {
  appearance: none;
  border: 1px solid var(--ui-card-border);
  padding: .55rem .9rem;
  border-radius: .625rem;       /* rounded-lg-ish */
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  background: var(--ui-card);
  color: var(--ui-foreground);
  transition: transform .12s ease, box-shadow .15s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--ui-primary);
  border-color: color-mix(in srgb, var(--ui-primary) 60%, var(--ui-card-border));
  color: white;
}
.btn-primary:hover { background: var(--ui-primary-500); }

.btn-secondary {
  background: transparent;
}
.btn-secondary:hover {
  border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-card-border));
}

/* Start button */
.start-button {
  text-align: right; margin-top: .25rem;
  padding: 0 0 .25rem;
}
.btn-start {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 45%, var(--ui-card-border));
  background: var(--ui-primary);
  color: white;
  padding: .7rem 1.2rem;
  border-radius: .75rem;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}
.btn-start:hover { background: var(--ui-primary-500); box-shadow: var(--ui-shadow); }
.btn-start:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Utilities */
.hidden { display: none !important; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .container { border-radius: var(--ui-rounded); margin: 0; }
  .header { padding: 1rem 1.125rem; }
  .content { padding: .75rem; }
  .actions { flex-direction: column; }
  .summary-score { font-size: 1.6rem; }
}