:root {
  /* CNC Kadence Palette */
  --palette1: #006f86;      /* Primary accent — buttons, links */
  --palette2: #005a6c;      /* Darker accent — hover states */
  --palette3: #1A202C;      /* Headings text */
  --palette4: #2D3748;      /* Body text */
  --palette5: #4A5568;      /* Secondary text */
  --palette6: #718096;      /* Muted text */
  --palette7: #f5f7f8;      /* Light background */
  --palette8: #F7FAFC;      /* Lighter background */
  --palette9: #ffffff;      /* White */
  --palette11: #13612e;     /* Green — active/valid */
  --palette13: #b82105;     /* Red — expired/critical */
  --palette14: #f7630c;     /* Orange — warning */
  --palette15: #f5a524;     /* Yellow — caution */

  /* Aliases */
  --bg: var(--palette9);
  --card-bg: var(--palette9);
  --border: #e0e4ec;
  --text: var(--palette4);
  --text-muted: var(--palette6);
  --accent: var(--palette1);
  --accent-hover: var(--palette2);
  --green: var(--palette11);
  --orange: var(--palette14);
  --red: var(--palette13);
  --radius: 3px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 18px;
}

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

h1 { font-size: 32px; font-weight: 700; line-height: 1.5; color: var(--palette3); margin-bottom: 8px; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.5; color: var(--palette3); margin: 24px 0 12px; }
h3 { font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--palette3); margin-bottom: 8px; }

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

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

input, select {
  font-family: inherit;
  font-size: 1.125rem;
  padding: 10px 14px;
  border: 1px solid #d0d5dd;
  border-radius: var(--radius);
  background: var(--palette9);
  color: var(--palette4);
}

input { width: 100%; max-width: 400px; }

button {
  background: var(--accent);
  color: var(--palette9);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  font-size: 1.125rem;
  padding: .4em 1em;
  font-family: inherit;
  line-height: 1.6;
}
button:hover {
  background: var(--accent-hover);
  box-shadow: inset 0px 4px 8px 1px rgba(0,0,0,0.1);
}

.result-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.result-row:last-child { border-bottom: none; }

.name { font-weight: 700; font-size: 1.125rem; color: var(--palette3); }
.meta { font-size: 0.875rem; color: var(--text-muted); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-green { background: #ecfdf3; color: var(--green); }
.badge-orange { background: #fff4e5; color: var(--orange); }
.badge-red { background: #fef3f2; color: var(--red); }

.status-active { background: #ecfdf3; color: var(--green); }
.status-warning { background: #fff4e5; color: var(--orange); }
.status-expired { background: #fef3f2; color: var(--red); }

.recommendation {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.rec-renew { background: #fff4e5; color: var(--orange); }
.rec-expired { background: #fef3f2; color: var(--red); }
.rec-ok { background: #ecfdf3; color: var(--green); }

.muted { color: var(--text-muted); font-size: 0.875rem; }
.disclaimer { font-size: 0.75rem; color: var(--palette6); margin-top: 16px; }