:root {
  --accent: #2563eb;
  --accent-soft: #e0edff;
  --bg: #0f172a;
  --card-bg: #0b1120;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --border-subtle: #1f2937;
  --danger: #ef4444;
  --warning: #eab308;
  --success: #22c55e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #1e293b 0, #020617 55%, #000 100%);
  color: var(--text-main);
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

header {
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: inherit; /* Ensure color inherits in all contexts */
}

/* Ensure logo hover doesn't underline */
.logo:hover {
  text-decoration: none;
}

.logo-img {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: contain;
  background: #020617;
}

.logo-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

.nav-links {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}

.nav-links a:hover {
  background: rgba(15, 23, 42, 0.9);
  color: var(--text-main);
  text-decoration: none;
}

/* Active link state if needed (from docs.html) */
.nav-links a.active {
  /* color: var(--accent-soft); */ /* Optional, if used */
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* --- Hero Styles --- */

/* Base hero styles */
.hero {
  padding: 2rem 1.5rem; /* Default padding */
  margin-top: 1rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.25), transparent 55%),
    linear-gradient(to bottom right, rgba(15,23,42,0.95), rgba(15,23,42,0.98));
  border: 1px solid rgba(148,163,184,0.3);
  box-shadow: 0 18px 45px rgba(15,23,42,0.8);
}

/* Index page hero uses grid layout */
.hero.hero-landing {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .hero.hero-landing {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

.hero-kicker {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--accent-soft);
  margin-bottom: 0.5rem;
}

.hero h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.8rem, 3vw + 1.1rem, 2.6rem); /* Adjusted slightly to encompass both variants */
}

.hero p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  max-width: 44rem;
}

.hero-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(148,163,184,0.5);
  font-size: 0.75rem;
  color: var(--accent-soft);
  margin-bottom: 0.75rem;
}

.hero-highlight span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,0.25);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  font-size: 0.75rem;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem; /* or 0.5rem */
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9rem; /* or 0.92rem */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: rgba(191,219,254,0.5);
  box-shadow: 0 10px 25px rgba(37,99,235,0.45);
}

.btn-primary:hover {
  background: #1d4ed8;
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--text-main);
  border-color: rgba(148,163,184,0.5);
}

.btn-ghost:hover {
  background: rgba(15,23,42,0.85);
  text-decoration: none;
}

.btn-danger {
  background: rgba(239,68,68,0.18);
  color: var(--text-main);
  border-color: rgba(239,68,68,0.35);
}

.btn-danger:hover {
  background: rgba(239,68,68,0.26);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Cards & Layout Components --- */

.card {
  background: var(--card-bg);
  border-radius: 1rem;
  border: 1px solid var(--border-subtle);
  padding: 1rem 1.1rem;
}

/* In analyzer/extractor, cards are flex columns */
.card-flex {
  display: flex;
  flex-direction: column;
}

.card + .card {
  margin-top: 1rem;
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.25rem;
}

/* Analyzer/Extractor have a slightly different grid ratio, we can generalize or keep separate modifiers if needed.
   Index: 2.1fr 1.4fr
   Extractor: 1.7fr 1fr
   Analyzer: 1.6fr 1fr
   The difference is minor. We can let .layout-grid be generic or just use the index one.
*/

@media (max-width: 900px) {
  .layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

section {
  margin-bottom: 2rem;
}

section h2 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

section > p {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.hr {
  height: 1px;
  background: var(--border-subtle);
  margin: 0.9rem 0;
}

/* --- Product Showcase (Index) --- */

.product-showcase {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.product-img-main {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.product-img-secondary {
  position: absolute;
  width: 45%;
  height: auto;
  bottom: -15%;
  right: -10%;
  transition: transform 0.3s ease;
  opacity: 0.95;
}

.product-showcase:hover .product-img-main {
  transform: scale(1.02);
}

.product-showcase:hover .product-img-secondary {
  transform: scale(1.05);
}

@media (max-width: 900px) {
  .product-img-secondary {
    width: 40%;
    bottom: -10%;
    right: -5%;
  }
}

/* --- Video Section (Index) --- */

.video-section {
  margin: 3rem 0 2rem;
  padding: 2rem;
  border-radius: 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
}

.video-section h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  text-align: center;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(15,23,42,0.8));
  border: 1px solid rgba(148,163,184,0.3);
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
}

.video-placeholder-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(37,99,235,0.2);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--accent);
}

.video-placeholder-text {
  font-size: 1.25rem;
  color: var(--text-muted);
  text-align: center;
}

.video-placeholder-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* --- Pills & Status --- */

.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem; /* slightly tighter in index */
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(148,163,184,0.5);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.pill.good { border-color: rgba(34,197,94,0.45); color: #bbf7d0; }
.pill.warn { border-color: rgba(234,179,8,0.45); color: #fde68a; }
.pill.bad  { border-color: rgba(239,68,68,0.55); color: #fecaca; }

.status {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(2,6,23,0.55);
}

/* Margin top added only when appropriate (e.g. updater) or handled by utility helpers */
.status {
  margin-top: 1.5rem; /* Common in tools */
}
/* Override margin if inside card or other flow where not needed by default? 
   Better to keep class generic and add margin in HTML or context. 
   But "status" class usually implies that block. */

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.32rem;
  background: var(--text-muted);
  box-shadow: 0 0 0 7px rgba(156,163,175,0.12);
  flex: 0 0 auto;
}

.status.good .status-dot { background: var(--success); box-shadow: 0 0 0 7px rgba(34,197,94,0.18); }
.status.warn .status-dot { background: var(--warning); box-shadow: 0 0 0 7px rgba(234,179,8,0.18); }
.status.bad  .status-dot { background: var(--danger);  box-shadow: 0 0 0 7px rgba(239,68,68,0.18); }

.status-title { font-weight: 600; }
.status-body { color: var(--text-muted); font-size: 0.9rem; }

/* --- Lists (Quickstart, steps) --- */

ol.quickstart-list, .step-list, .troubleshooting-list, .list {
  margin: 0.3rem 0 0.2rem;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  color: var(--text-muted); /* Ensure extracted files get this color */
}

/* index.html sets color on body, but lists are usually text-muted */
/* .quickstart-list is specific to index and handled color there implicitly? 
   Actually index.html css for quickstart-list didn't specify color, just font-size.
   It inherited text-main. .step-list in updater sets color text-muted.
   I'll default to text-muted for lists if they are instructional.
*/

ol.quickstart-list li, .step-list li, .troubleshooting-list li, .list li {
  margin-bottom: 0.35rem;
}

.step-label {
  font-weight: 600;
  color: var(--text-main); /* Restore main color if list is muted */
}

.note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.small {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Tables (LED table & Analyzer tables) --- */

.led-table, table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

/* Specific LED table font size from index */
.led-table {
  font-size: 0.85rem;
}

.led-table th, .led-table td,
table th, table td {
  text-align: left;
  padding: 0.35rem 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

/* Analyzer sticky header */
th {
  color: var(--text-muted);
  font-weight: 600;
  /* background: rgba(2,6,23,0.35); */ /* Analyzer specific */
}

/* LED Dots */
.led-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.4rem;
}

.led-blue { background: #3b82f6; }
.led-red { background: var(--danger); }
.led-green { background: var(--success); }
.led-off { background: transparent; border: 1px solid var(--border-subtle); }
.led-purple { background: #a855f7; }
.led-amber { background: var(--warning); }

/* --- FAQ --- */

.faq-item + .faq-item {
  margin-top: 0.75rem;
}

.faq-q {
  font-weight: 600;
  font-size: 0.95rem;
}

.faq-a {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.compat-list {
  margin: 0.35rem 0 0.5rem;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

/* --- Updater / Tools Specifics --- */

.progress-bar {
  height: 4px;
  background: var(--border-subtle);
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.progress-val {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.2s;
}

.file-input-wrapper {
  position: relative;
  display: block;
  margin-top: 1rem;
}

.file-input-wrapper input[type=file] {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-muted);
}

/* --- Analyzer / Dropper --- */

.drop {
  border: 1px dashed rgba(148,163,184,0.45);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  background: rgba(2,6,23,0.45);
}

.drop.dragover {
  border-color: rgba(37,99,235,0.9);
  box-shadow: 0 0 0 6px rgba(37,99,235,0.12);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  background: #050a16;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 0.9rem;
  padding: 0.85rem;
  max-height: 360px; /* Extractor limit */
  overflow: auto;
  color: #a7f3d0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Analyzer expands flex */
.layout-grid .mono {
  /* flex: 1 1 auto; */ /* useful in flex containers */
  min-height: 120px; 
}

.click { cursor: pointer; }
.click:hover { background: rgba(15,23,42,0.6); }

textarea {
  width: 100%;
  min-height: 160px;
  background: rgba(2,6,23,0.35);
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 0.9rem;
  padding: 0.85rem;
  color: var(--text-main);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

code.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(148,163,184,0.35);
  padding: 0.12rem 0.35rem;
  border-radius: 6px;
  color: var(--accent-soft);
}

/* --- Docs Sidebar & Content --- */

/* Sidebar specific logic: docs.html uses a grid for main, different from others */
/* We can keep the grid definition in main, but docs.html overrides main grid config inline or via class?
   docs.html CSS:
   main { display: grid; grid-template-columns: ... } 
   Since we made main generic max-width 1200, we need a class for docs layout.
*/
.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 1.5rem;
}

@media (max-width: 800px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sidebar {
  align-self: flex-start;
  position: sticky;
  top: 56px;
}

.sidebar-card {
  background: var(--card-bg);
  border-radius: 1rem;
  border: 1px solid var(--border-subtle);
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
}

.sidebar h2 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 0.35rem;
}

.sidebar a {
  color: var(--text-muted);
  display: inline-block;
  padding: 0.15rem 0.25rem;
  border-radius: 0.4rem;
}

.sidebar a.active {
  color: var(--accent-soft);
  background: rgba(37,99,235,0.2);
}

.sidebar small {
  display: block;
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.content {
  background: var(--card-bg);
  border-radius: 1.25rem;
  border: 1px solid var(--border-subtle);
  padding: 1.25rem 1.3rem;
  min-height: 60vh;
}

.content h1 { font-size: 1.6rem; margin-top: 0; margin-bottom: 0.75rem; }
.content h2 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.content h3 { font-size: 1.05rem; margin-top: 1.1rem; margin-bottom: 0.4rem; }
.content p { margin: 0.35rem 0; color: var(--text-main); }

.content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
  background: #020617;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
}

.content pre {
  background: #020617;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.85rem;
}

.content pre code {
  background: transparent;
  padding: 0;
}

.content ul, .content ol {
  padding-left: 1.1rem;
  margin: 0.25rem 0 0.5rem;
}

.content blockquote {
  margin: 0.5rem 0;
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.content a {
  color: var(--accent-soft);
}

.content-loading {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- Footer --- */

footer {
  border-top: 1px solid var(--border-subtle);
  padding: 1.5rem 1rem 2rem;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}