:root {
  --brand-green: #0b8457;
  --accent-green: #10b981;
  --brand-blue: #0a7ea4;
  --accent-blue: #38bdf8;
  --bg: #f7f7f8;
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #1f2937;
  --muted: #6b7280;
}
body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  line-height: 1.6;
}
body.theme-green .site-header { background: linear-gradient(135deg, var(--brand-green), var(--accent-green)); }
body.theme-green .btn { background: var(--brand-green); }
body.theme-blue .site-header { background: linear-gradient(135deg, var(--brand-blue), var(--accent-blue)); }
body.theme-blue .btn { background: var(--brand-blue); }

.site-header { color: white; padding: 2rem 1rem; text-align: center; }
.wrap { max-width: 900px; margin: auto; padding: 1.25rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; margin: 1rem 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
label { font-weight: 600; }
input, select { padding: 0.6rem; border-radius: 8px; border: 1px solid var(--border); width: 100%; }
.btn { color: white; border: none; border-radius: 8px; padding: 0.6rem 1rem; cursor: pointer; font-weight: 600; margin-top: 0.5rem; }
.result { margin-top: 1rem; background: #f0fdf4; border-radius: 8px; padding: 1rem; }
table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
th, td { border: 1px solid var(--border); padding: 0.6rem; text-align: left; }
th { background: #f3f4f6; }
.color-swatch { width: 60px; height: 24px; border-radius: 4px; border: 1px solid var(--border); }
.color-swatch.warm { background: #ffd59e; }
.color-swatch.neutral { background: #f3f3f0; }
.color-swatch.daylight { background: #cfe9ff; }
.note { font-style: italic; color: var(--muted); margin-top: 0.5rem; }
.site-footer { background: white; border-top: 1px solid var(--border); color: var(--muted); text-align: center; padding: 1rem; }
.footer-nav a { color: var(--muted); margin: 0 0.5rem; text-decoration: none; }
.footer-nav a:hover { color: var(--text); }
.theme-switch button { margin: 0.25rem; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--card); }
.theme-switch button:hover { background: #f3f4f6; }
@media (max-width:640px){ .grid { grid-template-columns: 1fr; } }