:root {
  --qk-accent: #80bf41;
  --qk-accent-dark: #6da336;
  --qk-navy: #1a1a1a;
  --qk-text: #222222;
  --qk-label: #666666;
  --qk-border: #e5e5e5;
  --qk-subheader-bg: #f5f5f5;
  --qk-alt-row: #fafafa;
  --qk-page-bg: #f4f4f4;
  --qk-highlight-bg: #eef7e3;
  --qk-error: #b32020;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--qk-page-bg);
  color: var(--qk-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

.qk-header {
  background: var(--qk-navy);
  color: #fff;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.3px;
}

.qk-accent {
  background: var(--qk-accent);
  height: 4px;
}

.qk-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

.qk-card {
  background: #fff;
  border: 1px solid var(--qk-border);
  padding: 24px;
  font-size: 14px;
}

.qk-card h1, .qk-card h2, .qk-card h3 {
  color: var(--qk-navy);
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

.qk-card h1 { font-size: 20px; }
.qk-card h2 { font-size: 17px; border-bottom: 2px solid var(--qk-accent); padding-bottom: 4px; }
.qk-card h3 { font-size: 15px; }

.qk-card table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.qk-card th, .qk-card td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--qk-border);
  font-size: 13px;
}

.qk-card th {
  background: var(--qk-subheader-bg);
  font-weight: bold;
}

.qk-card tr:nth-child(even) td {
  background: var(--qk-alt-row);
}

.qk-card tr.qk-highlight td {
  background: var(--qk-highlight-bg);
  border-color: var(--qk-accent);
}

/* Detail row: continuation of the order row immediately above. Lighter background,
   smaller indented bullets, no zebra striping (overrides the :nth-child(even) rule). */
.qk-card tr.qk-detail td {
  background: #fbfbfb;
  border-top: none;
  padding: 4px 12px 10px 28px;
  color: var(--qk-label);
  font-size: 12.5px;
}
.qk-card tr.qk-detail ul {
  margin: 0;
  padding-left: 18px;
}
.qk-card tr.qk-detail li {
  margin: 2px 0;
}
/* If the parent row is highlighted, tint the detail row the same green so they read
   as a single block. The first td of qk-detail never contains 🟢, so the JS-applied
   .qk-highlight class won't land here automatically. */
.qk-card tr.qk-highlight + tr.qk-detail td {
  background: var(--qk-highlight-bg);
}

.qk-card ul { padding-left: 24px; }
.qk-card hr {
  border: 0;
  border-top: 1px solid var(--qk-border);
  margin: 20px 0;
}

.qk-stamp {
  color: var(--qk-label);
  font-size: 12px;
  margin-top: 18px;
}

.qk-footer {
  text-align: center;
  color: var(--qk-label);
  font-size: 12px;
  padding: 12px 16px 24px;
}

.qk-loading {
  color: var(--qk-label);
  font-style: italic;
}

.qk-error {
  color: var(--qk-error);
  font-weight: bold;
}