.carbon-hero { min-height:auto; padding:108px 0 42px; text-align:center; background:var(--hero-grad); }
.carbon-hero h1 { font-size:clamp(1.8rem,4vw,3rem); margin-bottom:10px; }
.carbon-hero .hero-sub { max-width:760px; margin:0 auto; color:var(--text-dim); }
.carbon-mode-bar { max-width:760px; margin:-22px auto 28px; padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:16px; position:relative; z-index:2; box-shadow:var(--shadow); }
.carbon-mode-btn { padding:14px 18px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--text-dim); font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer; }
.carbon-mode-btn.active { color:var(--btn-primary-text); background:var(--accent); box-shadow:0 4px 14px rgba(56,189,248,.2); }
.carbon-shell { max-width:1180px; margin:0 auto; padding:0 24px 64px; }
.carbon-intro { margin-bottom:18px; padding:16px 18px; color:var(--text-dim); font-size:.82rem; line-height:1.65; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:10px; }
.carbon-grid { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(0,1.35fr); gap:20px; align-items:start; }
.carbon-panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.carbon-panel-header { padding:18px 20px 12px; border-bottom:1px solid var(--border); }
.carbon-panel-header h2 { font-size:1rem; margin:0 0 4px; }
.carbon-panel-header p { margin:0; color:var(--text-dim); font-size:.75rem; }
.carbon-fields { padding:18px 20px; display:grid; gap:16px; }
.carbon-field label, .carbon-field-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; color:var(--text); font-size:.8rem; font-weight:600; }
.carbon-field small { display:block; color:var(--text-dim); font-size:.68rem; line-height:1.45; margin-top:5px; }
.carbon-field input, .carbon-field select { width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font:inherit; font-size:.82rem; }
.carbon-field input:focus, .carbon-field select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(56,189,248,.12); }
.carbon-field input[type=range] { padding:0; accent-color:var(--accent); }
.carbon-field-value { color:var(--accent); }
.carbon-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:18px; }
.carbon-result { min-height:110px; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.carbon-result.primary { border-color:var(--accent); background:linear-gradient(145deg,rgba(56,189,248,.1),var(--bg)); }
.carbon-result.warning { border-color:var(--gold); }
.carbon-result-label { color:var(--text-dim); font-size:.7rem; margin-bottom:7px; }
.carbon-result-value { color:var(--text); font-size:1.5rem; line-height:1.15; font-weight:750; overflow-wrap:anywhere; }
.carbon-result.primary .carbon-result-value { color:var(--accent); }
.carbon-result.warning .carbon-result-value { color:var(--gold); }
.carbon-result-unit { margin-top:5px; color:var(--text-dim); font-size:.68rem; }
.carbon-explain { grid-column:1/-1; padding:15px 16px; border:1px solid var(--border); border-radius:10px; color:var(--text-dim); font-size:.74rem; line-height:1.65; }
.carbon-explain strong { color:var(--text); }
.carbon-source { max-width:900px; margin:26px auto 0; color:var(--text-dim); text-align:center; font-size:.7rem; line-height:1.6; }
[hidden] { display:none !important; }
@media (max-width:820px) { .carbon-grid { grid-template-columns:1fr; } }
@media (max-width:520px) {
  .carbon-hero { padding:86px 16px 34px; }
  .carbon-mode-bar { margin:-18px 8px 22px; grid-template-columns:1fr; }
  .carbon-shell { padding:0 8px 40px; }
  .carbon-results { padding:10px; gap:8px; }
  .carbon-result { padding:12px 10px; min-height:104px; }
  .carbon-result-value { font-size:1.22rem; }
}
@media print {
  .nav, .carbon-mode-bar, .back-to-top { display:none !important; }
  .carbon-hero { padding:0 0 16px; }
  .carbon-shell { padding:0; }
  .carbon-grid { grid-template-columns:1fr 1.2fr; }
  .carbon-panel { box-shadow:none; break-inside:avoid; }
}