/* ==========================================================================
   CSS RESET & BASE CONFIGURATION
   ========================================================================== */
.sc-root *,
.sc-root *::before,
.sc-root *::after {
  box-sizing: border-box;
}

.sc-root {
  /* --- Unified Warm Orange/Light Theme Variables --- */
  --sc-primary: #ff5a1f;       /* Bright Orange (Logo primary) */
  --sc-amber: #f59e0b;         /* Warm Yellow/Amber (Logo accent) */
  --sc-teal: #0d9488;          /* Vibrant Teal accent for contrast stats */
  --sc-bg-light: #fff8f3;      /* Soft ice-peach/orange background */
  --sc-card-bg: #ffffff;      /* Pure white card/input background */
  --sc-input-bg: #ffffff;     /* Input fields background */
  --sc-text-main: #111827;    /* High-contrast dark text */
  --sc-muted: #4b5563;        /* Dark gray for secondary labels/text */
  --sc-line: rgba(255, 90, 31, 0.15); /* Warm soft orange borders */
  --sc-results-bg: rgb(255, 232, 214); /* Soft orangish shade for results */

  color: var(--sc-text-main);
  background: var(--sc-bg-light);
  border-radius: 20px;
  box-shadow: 0 10px 35px rgba(255, 90, 31, 0.08);
  max-width: 1080px;
  margin: auto;
  overflow: hidden;
  font-family: 'Space Grotesk', system-ui, sans-serif;

  background-image: 
    radial-gradient(circle at top right, rgba(255, 140, 0, 0.12), transparent 45%),
    radial-gradient(circle at bottom left, rgba(255, 90, 31, 0.08), transparent 50%);
}

/* ==========================================================================
   HERO HEADER
   ========================================================================== */
.sc-hero { 
  padding: 36px 32px 24px; 
  border-bottom: 1px solid var(--sc-line); 
  background: rgba(255, 255, 255, 0.5);
}

.sc-eyebrow {
  font-size: 12px; 
  letter-spacing: 0.14em; 
  text-transform: uppercase;
  color: var(--sc-primary); 
  font-weight: 700; 
  margin: 0 0 10px;
}

.sc-title {
  font-family: 'Fraunces', serif; 
  font-weight: 700; 
  font-size: 32px;
  line-height: 1.15; 
  margin: 0 0 8px; 
  color: var(--sc-text-main);
}

.sc-sub { 
  color: var(--sc-muted); 
  font-size: 14.5px; 
  margin: 0; 
  max-width: 56ch; 
  line-height: 1.5; 
}

/* ==========================================================================
   LAYOUT GRID
   ========================================================================== */
.sc-body { 
  display: grid; 
  grid-template-columns: 1.15fr 1fr; 
}

@media (max-width: 820px) { 
  .sc-body { grid-template-columns: 1fr; } 
}

/* ==========================================================================
   INPUTS SECTION (LEFT COLUMN)
   ========================================================================== */
.sc-inputs { 
  padding: 28px 32px 32px; 
  border-right: 1px solid var(--sc-line); 
  background: #ffffff;
}

@media (max-width: 820px) { 
  .sc-inputs { 
    border-right: none; 
    border-bottom: 1px solid var(--sc-line); 
  } 
}

.sc-section-title { 
  font-family: 'Fraunces', serif; 
  font-size: 18px; 
  font-weight: 700; 
  color: var(--sc-text-main); 
  margin: 0 0 4px; 
}

.sc-section-hint { 
  color: var(--sc-muted); 
  font-size: 12.5px; 
  margin: 0 0 16px; 
}

.sc-grid2 { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 14px; 
  margin-bottom: 28px; 
}

.sc-field { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
}

.sc-field-label { 
  font-size: 12px; 
  color: var(--sc-text-main); 
  font-weight: 600; 
}

.sc-field-input {
  display: flex; 
  align-items: center; 
  background: var(--sc-input-bg);
  border: 1.5px solid var(--sc-line); 
  border-radius: 10px; 
  padding: 0 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sc-field-input:focus-within { 
  border-color: var(--sc-primary); 
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.15);
}

.sc-field-input input {
  background: transparent; 
  border: none; 
  outline: none; 
  color: var(--sc-text-main);
  font-family: 'Space Grotesk', sans-serif; 
  font-size: 14.5px; 
  font-weight: 600;
  padding: 10px 0; 
  width: 100%; 
  min-width: 0;
}

.sc-field-suffix { 
  font-size: 12px; 
  color: var(--sc-muted); 
  font-weight: 500;
  white-space: nowrap; 
  margin-left: 8px; 
}

/* --- Appliance Dynamic Table --- */
.sc-appliance-head {
  display: grid; 
  grid-template-columns: 1.6fr 0.7fr 0.9fr 0.9fr auto; 
  gap: 8px;
  font-size: 11px; 
  color: var(--sc-muted); 
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em; 
  padding-bottom: 8px;
}

.sc-appliance-row {
  display: grid; 
  grid-template-columns: 1.6fr 0.7fr 0.9fr 0.9fr auto;
  gap: 8px; 
  align-items: center; 
  padding: 8px 0; 
  border-bottom: 1px solid var(--sc-line);
}

.sc-mini-input {
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  background: var(--sc-input-bg);
  border: 1.5px solid var(--sc-line);
  border-radius: 8px;
  color: var(--sc-text-main) !important;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: all 0.2s ease;
}

.sc-mini-input:focus {
  border-color: var(--sc-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}

/* Chrome, Edge, Safari */
.sc-mini-input::-webkit-outer-spin-button,
.sc-mini-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.sc-mini-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sc-remove-btn {
  background: none; 
  border: none; 
  color: var(--sc-muted); 
  cursor: pointer;
  font-size: 16px; 
  line-height: 1; 
  padding: 4px 6px; 
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.sc-remove-btn:hover { 
  color: #dc2626; 
  background: rgba(220, 38, 38, 0.1); 
}

.sc-add-btn {
  margin-top: 14px; 
  background: rgba(255, 90, 31, 0.08); 
  border: 1.5px dashed var(--sc-primary);
  color: var(--sc-primary); 
  font-family: 'Space Grotesk', sans-serif; 
  font-weight: 700;
  font-size: 13px; 
  padding: 10px 14px; 
  border-radius: 9px; 
  cursor: pointer; 
  width: 100%;
  transition: background 0.2s, border-color 0.2s;
}

.sc-add-btn:hover { 
  background: rgba(255, 90, 31, 0.15); 
}

.sc-compare {
  margin-top: 16px; 
  font-size: 12.5px; 
  color: var(--sc-text-main);
  background: rgba(255, 232, 214, 0.4); 
  border-radius: 9px; 
  padding: 10px 12px; 
  line-height: 1.5;
  border: 1px solid rgba(255, 90, 31, 0.18);
}

.sc-compare b { 
  color: var(--sc-primary); 
  font-weight: 700; 
}

/* ==========================================================================
   RESULTS PANEL (RIGHT COLUMN)
   ========================================================================== */
.sc-results { 
  padding: 28px 32px 32px; 
  background: var(--sc-results-bg); 
  background-image: linear-gradient(180deg, rgb(255, 238, 224) 0%, rgb(255, 224, 201) 100%);
}

.sc-gauge-wrap { 
  display: flex; 
  justify-content: center; 
  margin-bottom: 6px; 
}

.sc-gauge { 
  width: 220px; 
  height: auto; 
}

.sc-gauge-number { 
  font-family: 'Fraunces', serif; 
  font-size: 26px; 
  font-weight: 700; 
  fill: var(--sc-text-main); 
}

.sc-gauge-caption { 
  font-size: 10.5px; 
  fill: var(--sc-muted); 
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif; 
}

/* --- Stats Grid --- */
.sc-stat-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 10px; 
  margin: 18px 0 22px; 
}

.sc-stat { 
  background: rgba(255, 255, 255, 0.75); 
  border: 1px solid rgba(255, 255, 255, 0.9); 
  border-radius: 12px; 
  padding: 13px 14px; 
  box-shadow: 0 2px 8px rgba(255, 90, 31, 0.05);
}

.sc-stat-label { 
  font-size: 11px; 
  color: var(--sc-muted); 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  margin-bottom: 5px; 
}

.sc-stat-value { 
  font-family: 'Fraunces', serif; 
  font-size: 19px; 
  font-weight: 700; 
  color: var(--sc-text-main); 
}

.sc-stat-value.accent { 
  color: var(--sc-primary); 
}

.sc-stat-value.teal { 
  color: var(--sc-teal); 
}

/* --- Progress / Ray Bars --- */
.sc-rays-title { 
  font-size: 12px; 
  color: var(--sc-text-main); 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 0.06em; 
  margin: 4px 0 10px; 
}

.sc-ray-row { 
  display: grid; 
  grid-template-columns: 92px 1fr 56px; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 7px; 
}

.sc-ray-name { 
  font-size: 12px; 
  color: var(--sc-text-main); 
  font-weight: 600;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

.sc-ray-track { 
  height: 8px; 
  border-radius: 5px; 
  background: rgba(255, 255, 255, 0.65); 
  overflow: hidden; 
}

.sc-ray-fill { 
  height: 100%; 
  border-radius: 5px; 
  background: linear-gradient(90deg, var(--sc-amber), var(--sc-primary)); 
}

.sc-ray-value { 
  font-size: 11.5px; 
  color: var(--sc-muted); 
  font-weight: 600;
  text-align: right; 
}

.sc-footnote { 
  margin-top: 18px; 
  font-size: 11.5px; 
  color: var(--sc-muted); 
  line-height: 1.5; 
  border-top: 1px solid var(--sc-line); 
  padding-top: 14px; 
}


/* 

SUBTLE BLUE
==========================================================================
   CSS RESET & BASE CONFIGURATION
   ========================================================================== 
.sc-root *,
.sc-root *::before,
.sc-root *::after {
  box-sizing: border-box;
}

.sc-root {
  /* --- Unified Light Theme Variables --- 
  --sc-primary: #1e40af;       /* Strong blue accent 
  --sc-amber: #d97706;         /* Warm amber accent 
  --sc-teal: #0d9488;          /* Teal accent 
  --sc-bg-light: #f0f6fc;      /* Very soft ice-blue container background 
  --sc-card-bg: #ffffff;      /* Pure white card backgrounds 
  --sc-input-bg: #ffffff;     /* Clean input background 
  --sc-text-main: #111827;    /* High-contrast dark charcoal/black text 
  --sc-muted: #4b5563;        /* Dark gray for secondary text/labels 
  --sc-line: rgba(15, 23, 42, 0.12); /* Subtle dark border lines 
  --sc-results-bg: rgb(201, 221, 241); /* Base requested shade for results 

  color: var(--sc-text-main);
  background: var(--sc-bg-light);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  max-width: 1080px;
  margin: auto;
  overflow: hidden;
  font-family: 'Space Grotesk', system-ui, sans-serif;

  background-image: 
    radial-gradient(circle at top right, rgba(201, 221, 241, 0.6), transparent 45%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.8), transparent 50%);
}

/* ==========================================================================
   HERO HEADER
   ========================================================================== 
.sc-hero { 
  padding: 36px 32px 24px; 
  border-bottom: 1px solid var(--sc-line); 
  background: rgba(255, 255, 255, 0.4);
}

.sc-eyebrow {
  font-size: 12px; 
  letter-spacing: 0.14em; 
  text-transform: uppercase;
  color: var(--sc-primary); 
  font-weight: 700; 
  margin: 0 0 10px;
}

.sc-title {
  font-family: 'Fraunces', serif; 
  font-weight: 700; 
  font-size: 32px;
  line-height: 1.15; 
  margin: 0 0 8px; 
  color: var(--sc-text-main);
}

.sc-sub { 
  color: var(--sc-muted); 
  font-size: 14.5px; 
  margin: 0; 
  max-width: 56ch; 
  line-height: 1.5; 
}

/* ==========================================================================
   LAYOUT GRID
   ========================================================================== 
.sc-body { 
  display: grid; 
  grid-template-columns: 1.15fr 1fr; 
}

@media (max-width: 820px) { 
  .sc-body { grid-template-columns: 1fr; } 
}

/* ==========================================================================
   INPUTS SECTION (LEFT COLUMN)
   ========================================================================== 
.sc-inputs { 
  padding: 28px 32px 32px; 
  border-right: 1px solid var(--sc-line); 
  background: #ffffff;
}

@media (max-width: 820px) { 
  .sc-inputs { 
    border-right: none; 
    border-bottom: 1px solid var(--sc-line); 
  } 
}

.sc-section-title { 
  font-family: 'Fraunces', serif; 
  font-size: 18px; 
  font-weight: 700; 
  color: var(--sc-text-main); 
  margin: 0 0 4px; 
}

.sc-section-hint { 
  color: var(--sc-muted); 
  font-size: 12.5px; 
  margin: 0 0 16px; 
}

.sc-grid2 { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 14px; 
  margin-bottom: 28px; 
}

.sc-field { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
}

.sc-field-label { 
  font-size: 12px; 
  color: var(--sc-text-main); 
  font-weight: 600; 
}

.sc-field-input {
  display: flex; 
  align-items: center; 
  background: var(--sc-input-bg);
  border: 1.5px solid var(--sc-line); 
  border-radius: 10px; 
  padding: 0 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sc-field-input:focus-within { 
  border-color: var(--sc-primary); 
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.sc-field-input input {
  background: transparent; 
  border: none; 
  outline: none; 
  color: var(--sc-text-main);
  font-family: 'Space Grotesk', sans-serif; 
  font-size: 14.5px; 
  font-weight: 600;
  padding: 10px 0; 
  width: 100%; 
  min-width: 0;
}

.sc-field-suffix { 
  font-size: 12px; 
  color: var(--sc-muted); 
  font-weight: 500;
  white-space: nowrap; 
  margin-left: 8px; 
}

/* --- Appliance Dynamic Table --- 
.sc-appliance-head {
  display: grid; 
  grid-template-columns: 1.6fr 0.7fr 0.9fr 0.9fr auto; 
  gap: 8px;
  font-size: 11px; 
  color: var(--sc-muted); 
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em; 
  padding-bottom: 8px;
}

.sc-appliance-row {
  display: grid; 
  grid-template-columns: 1.6fr 0.7fr 0.9fr 0.9fr auto;
  gap: 8px; 
  align-items: center; 
  padding: 8px 0; 
  border-bottom: 1px solid var(--sc-line);
}

.sc-mini-input {
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  background: var(--sc-input-bg);
  border: 1.5px solid var(--sc-line);
  border-radius: 8px;
  color: var(--sc-text-main) !important;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: all 0.2s ease;
}

.sc-mini-input:focus {
  border-color: var(--sc-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Chrome, Edge, Safari 
.sc-mini-input::-webkit-outer-spin-button,
.sc-mini-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox 
.sc-mini-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sc-remove-btn {
  background: none; 
  border: none; 
  color: var(--sc-muted); 
  cursor: pointer;
  font-size: 16px; 
  line-height: 1; 
  padding: 4px 6px; 
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.sc-remove-btn:hover { 
  color: #dc2626; 
  background: rgba(220, 38, 38, 0.1); 
}

.sc-add-btn {
  margin-top: 14px; 
  background: rgb(225, 237, 248); 
  border: 1.5px dashed var(--sc-primary);
  color: var(--sc-primary); 
  font-family: 'Space Grotesk', sans-serif; 
  font-weight: 700;
  font-size: 13px; 
  padding: 10px 14px; 
  border-radius: 9px; 
  cursor: pointer; 
  width: 100%;
  transition: background 0.2s, border-color 0.2s;
}

.sc-add-btn:hover { 
  background: rgb(201, 221, 241); 
}

.sc-compare {
  margin-top: 16px; 
  font-size: 12.5px; 
  color: var(--sc-text-main);
  background: rgb(235, 243, 250); 
  border-radius: 9px; 
  padding: 10px 12px; 
  line-height: 1.5;
  border: 1px solid rgba(201, 221, 241, 0.8);
}

.sc-compare b { 
  color: var(--sc-primary); 
  font-weight: 700; 
}

/* ==========================================================================
   RESULTS PANEL (RIGHT COLUMN)
   ========================================================================== 
.sc-results { 
  padding: 28px 32px 32px; 
  background: var(--sc-results-bg); 
  background-image: linear-gradient(180deg, rgb(210, 227, 245) 0%, rgb(190, 213, 238) 100%);
}

.sc-gauge-wrap { 
  display: flex; 
  justify-content: center; 
  margin-bottom: 6px; 
}

.sc-gauge { 
  width: 220px; 
  height: auto; 
}

.sc-gauge-number { 
  font-family: 'Fraunces', serif; 
  font-size: 26px; 
  font-weight: 700; 
  fill: var(--sc-text-main); 
}

.sc-gauge-caption { 
  font-size: 10.5px; 
  fill: var(--sc-muted); 
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif; 
}

/* --- Stats Grid --- 
.sc-stat-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 10px; 
  margin: 18px 0 22px; 
}

.sc-stat { 
  background: rgba(255, 255, 255, 0.7); 
  border: 1px solid rgba(255, 255, 255, 0.8); 
  border-radius: 12px; 
  padding: 13px 14px; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.sc-stat-label { 
  font-size: 11px; 
  color: var(--sc-muted); 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  margin-bottom: 5px; 
}

.sc-stat-value { 
  font-family: 'Fraunces', serif; 
  font-size: 19px; 
  font-weight: 700; 
  color: var(--sc-text-main); 
}

.sc-stat-value.accent { 
  color: var(--sc-amber); 
}

.sc-stat-value.teal { 
  color: var(--sc-teal); 
}

/* --- Progress / Ray Bars --- 
.sc-rays-title { 
  font-size: 12px; 
  color: var(--sc-text-main); 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 0.06em; 
  margin: 4px 0 10px; 
}

.sc-ray-row { 
  display: grid; 
  grid-template-columns: 92px 1fr 56px; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 7px; 
}

.sc-ray-name { 
  font-size: 12px; 
  color: var(--sc-text-main); 
  font-weight: 600;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

.sc-ray-track { 
  height: 8px; 
  border-radius: 5px; 
  background: rgba(255, 255, 255, 0.6); 
  overflow: hidden; 
}

.sc-ray-fill { 
  height: 100%; 
  border-radius: 5px; 
  background: linear-gradient(90deg, var(--sc-teal), var(--sc-primary)); 
}

.sc-ray-value { 
  font-size: 11.5px; 
  color: var(--sc-muted); 
  font-weight: 600;
  text-align: right; 
}

.sc-footnote { 
  margin-top: 18px; 
  font-size: 11.5px; 
  color: var(--sc-muted); 
  line-height: 1.5; 
  border-top: 1px solid var(--sc-line); 
  padding-top: 14px; 
}*/