:root {
  --bg: #05080d;
  --bg2: #080c12;
  --card: #101820;
  --card2: #16212c;
  --border: #1e2935;
  --cyan: #00d9ff;
  --blue: #008cff;
  --green: #5fffcb;
  --yellow: #ffc928;
  --orange: #ff7a00;
  --red: #ff1645;
  --text: #f5f7fa;
  --muted: #a7b0bc;
  --dim: #6b7684;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; overflow-x: hidden; }
body:before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to bottom, black, transparent 75%); z-index: -2; }
.ambient { position: fixed; width: 520px; height: 520px; border-radius: 50%; filter: blur(120px); opacity: .08; pointer-events: none; z-index: -1; }
.ambient-1 { background: var(--cyan); top: -220px; left: -180px; }
.ambient-2 { background: var(--blue); right: -220px; top: 35%; }
.topbar { min-height: 70px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 12px 5%; background: rgba(5, 8, 13, .82); border-bottom: 1px solid rgba(30, 41, 53, .7); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
/* .brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; background: rgba(0, 217, 255, .1); border: 1px solid rgba(0, 217, 255, .28); color: var(--cyan); font-size: 18px; box-shadow: 0 0 20px rgba(0, 217, 255, .09); } */
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; background: rgba(0, 217, 255, .1); border: 1px solid rgba(0, 217, 255, .28); box-shadow: 0 0 20px rgba(0, 217, 255, .09); overflow: hidden; flex-shrink: 0; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 14px; }
.brand span { color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: 1.25px; }
nav { display: flex; gap: 23px; }
nav a { color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; }
nav a:hover { color: var(--cyan); }
.theme-toggle { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 14px; transition: .2s; }
.theme-toggle:hover { color: var(--cyan); border-color: var(--cyan); }
main { width: min(1180px, 92%); margin: auto; }
.quickbar { display: flex; gap: 8px; overflow: auto; padding: 18px 0 22px; scrollbar-width: thin; }
.quickbar button { white-space: nowrap; border: 1px solid var(--border); border-radius: 9px; padding: 10px 13px; background: var(--card); color: var(--muted); font: 600 11px Inter; cursor: pointer; transition: .2s; }
.quickbar button:hover, .quickbar button.active { color: #05080d; background: var(--cyan); border-color: var(--cyan); }
.workbench { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .72fr); gap: 16px; align-items: start; }
.glass { background: linear-gradient(145deg, rgba(16, 24, 32, .92), rgba(11, 17, 24, .8)); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.calculator { border-radius: 20px; overflow: clip; }
.calc-head { padding: 23px 25px 19px; border-bottom: 1px solid var(--border); display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.calc-head h2 { font-size: 24px; letter-spacing: -1px; margin-top: 5px; }
.calc-head p { color: var(--dim); font-size: 11px; margin-top: 4px; }
.section-kicker { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: var(--cyan); text-transform: uppercase; }
.chip { flex: none; color: var(--cyan); font-size: 10px; font-weight: 800; border: 1px solid rgba(0, 217, 255, .24); padding: 7px 10px; border-radius: 999px; background: rgba(0, 217, 255, .06); }
.calc-body { padding: 24px 25px; }
.calc-panel { display: none; }
.calc-panel.active { display: block; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.field label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .25px; margin: 0 0 7px; }
.field small { color: var(--dim); font-weight: 500; }
.field-box { display: flex; align-items: center; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; transition: .2s; }
.field-box:focus-within { border-color: rgba(0, 217, 255, .65); box-shadow: 0 0 0 3px rgba(0, 217, 255, .07); }
input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 12px; color: var(--text); font: 600 14px Inter; }
select { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 9px; outline: 0; background: var(--bg2); padding: 12px; color: var(--text); font: 600 12px Inter; }
select:focus { border-color: rgba(0, 217, 255, .65); box-shadow: 0 0 0 3px rgba(0, 217, 255, .07); }
input::placeholder { color: #53606d; }
.unit { padding: 0 11px; color: var(--dim); font-size: 10px; white-space: nowrap; border-left: 1px solid var(--border); }
.calc-action { display: flex; gap: 10px; align-items: center; margin-top: 19px; }
.calc-action { scroll-margin-top: 82px; }
.calc-panel.active { scroll-margin-top: 88px; }
.result { scroll-margin-top: 88px; }
.formula { margin-top: 18px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 217, 255, .045); color: var(--muted); font-size: 10px; line-height: 1.5; }
.formula strong { color: var(--cyan); font-size: 9px; letter-spacing: 1px; }
.formula code { color: var(--text); font: 600 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.converter-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.converter-tabs button { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--bg2); color: var(--muted); font: 600 10px Inter; cursor: pointer; }
.converter-tabs button.active { background: rgba(0, 217, 255, .13); color: var(--cyan); border-color: rgba(0, 217, 255, .58); }
.converter-form { display: none; }
.converter-form.active { display: block; }
.btn { border: 1px solid transparent; border-radius: 9px; padding: 12px 16px; font: 700 11px Inter; cursor: pointer; transition: .2s; }
.btn-primary { background: var(--cyan); color: #05080d; box-shadow: 0 0 24px rgba(0, 217, 255, .12); }
.btn-primary:hover { background: #2be4ff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); background: var(--card2); }
.result { margin-top: 22px; padding: 17px; border-radius: 12px; border: 1px solid rgba(0, 217, 255, .2); background: linear-gradient(100deg, rgba(0, 217, 255, .08), rgba(0, 140, 255, .03)); display: none; }
.result.show { display: block; }
.result-top { display: flex; justify-content: space-between; align-items: center; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 13px; }
.metric { padding: 11px; border-radius: 9px; background: rgba(5, 8, 13, .46); border: 1px solid rgba(255, 255, 255, .05); }
.metric span { display: block; color: var(--dim); font-size: 9px; }
.metric b { display: block; font-size: 20px; line-height: 1.2; margin-top: 3px; letter-spacing: -.6px; }
.metric b em { font-size: 10px; color: var(--muted); font-style: normal; font-weight: 600; }
.result-note { margin-top: 12px; color: var(--muted); font-size: 10px; }
.invalid { color: #ff9aae; }
.side { display: grid; gap: 16px; }
.side-card { padding: 19px; border-radius: 16px; }
.side-head { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; }
.side-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: rgba(0, 217, 255, .1); color: var(--cyan); }
.warning .side-icon { background: rgba(255, 201, 40, .1); color: var(--yellow); }
.side-card ul { list-style: none; margin-top: 14px; }
.side-card li { position: relative; padding-left: 16px; color: var(--muted); font-size: 10px; margin: 9px 0; }
.side-card li:before { content: ""; position: absolute; left: 0; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.warning li:before { background: var(--yellow); }
details { border-top: 1px solid var(--border); padding: 11px 0; }
details:first-of-type { margin-top: 12px; }
summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary:after { content: "+"; color: var(--cyan); }
details[open] summary:after { content: "?"; }
details p { color: var(--dim); font-size: 10px; margin: 9px 0 2px; }
.hint { position: relative; display: inline-grid; place-items: center; vertical-align: middle; width: 15px; height: 15px; margin-left: 4px; border: 1px solid #40505f; border-radius: 50%; background: transparent; color: var(--dim); font: 700 9px Inter; cursor: pointer; }
.hint.open { color: var(--cyan); border-color: var(--cyan); }
.hint:after { content: attr(data-tip); position: absolute; z-index: 9; left: 50%; bottom: calc(100% + 8px); width: 205px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: #0b1118; color: var(--muted); font: 400 10px Inter; line-height: 1.45; text-align: left; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: .15s; }
.hint.open:after { opacity: 1; transform: translate(-50%, 0); }
.help { margin: 18px 0; border-radius: 20px; padding: 25px; }
.help-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 18px; }
.help h2 { font-size: 25px; letter-spacing: -1px; margin-top: 4px; }
.help-head p { max-width: 430px; text-align: right; color: var(--dim); font-size: 11px; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.guide-card { background: rgba(5, 8, 13, .42); border: 1px solid var(--border); border-radius: 13px; padding: 17px; }
.guide-card h3 { font-size: 13px; margin: 10px 0 6px; }
.guide-card p { color: var(--muted); font-size: 10px; }
.guide-card .tag { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
.guide-card ul { margin: 11px 0 0; padding-left: 15px; }
.guide-card li { color: var(--dim); font-size: 10px; margin: 5px 0; }
.guide-card a { color: var(--cyan); font-size: 10px; text-decoration: none; }
.guide-card a:hover, .techno-link:hover { text-decoration: underline; }
.notes { margin: 18px 0 70px; border-radius: 18px; padding: 23px; }
.notes-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.notes h2 { font-size: 22px; letter-spacing: -1px; margin-top: 4px; }
.notes p { color: var(--dim); font-size: 11px; margin-top: 4px; }
.notes-area { width: 100%; height: 98px; resize: vertical; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: 12px Inter; padding: 13px; margin-top: 16px; outline: 0; }
.notes-area:focus { border-color: rgba(0, 217, 255, .65); box-shadow: 0 0 0 3px rgba(0, 217, 255, .07); }
.save-msg { font-size: 10px; color: var(--green); visibility: hidden; }
.save-msg.show { visibility: visible; }
.disclaimer { border-top: 1px solid var(--border); padding: 20px 5%; display: flex; justify-content: space-between; gap: 20px; color: var(--dim); font-size: 9px; }
.disclaimer b { color: var(--yellow); }
.techno-link { color: var(--cyan); text-decoration: none; }
body.light-theme { --bg: #eef5f8; --bg2: #ffffff; --card: #ffffff; --card2: #dceaf0; --border: #8ba5b0; --text: #10232e; --muted: #284653; --dim: #46636f; --shadow: 0 12px 30px rgba(23, 47, 60, .14); }
body.light-theme:before { background-image: linear-gradient(rgba(0, 80, 110, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 80, 110, .055) 1px, transparent 1px); }
body.light-theme .topbar { background: rgba(238, 245, 248, .9); border-bottom-color: var(--border); }
body.light-theme .glass { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(244, 250, 252, .92)); }
body.light-theme .field-box, body.light-theme .notes-area { background: #fff; }
body.light-theme .guide-card, body.light-theme .metric { background: rgba(230, 242, 246, .72); }
body.light-theme .result { background: linear-gradient(100deg, rgba(0, 217, 255, .14), rgba(0, 140, 255, .05)); }
body.light-theme .hint:after { background: #fff; }
body.light-theme .brand strong, body.light-theme .calc-head h2, body.light-theme .help h2, body.light-theme .notes h2, body.light-theme .guide-card h3, body.light-theme .metric b { color: #10232e; }
body.light-theme .brand span, body.light-theme .calc-head p, body.light-theme .guide-card p, body.light-theme .notes p, body.light-theme .field label, body.light-theme .side-card li, body.light-theme .result-note { color: #284653; }
body.light-theme input { color: #10232e; }
body.light-theme select { color: #10232e; background: #fff; border-color: #8ba5b0; }
body.light-theme input::placeholder { color: #5c747e; opacity: 1; }
body.light-theme .unit { color: #35525e; border-left-color: #9ab1bb; }
body.light-theme .quickbar button, body.light-theme .btn-ghost, body.light-theme .theme-toggle { background: #fff; color: #183743; border-color: #8ba5b0; }
body.light-theme .quickbar button.active, body.light-theme .quickbar button:hover { color: #003c4b; background: #63dff3; border-color: #007c98; }
body.light-theme .btn-primary { color: #003c4b; background: #39d5ee; border-color: #007c98; box-shadow: none; }
body.light-theme .btn-ghost:hover, body.light-theme .theme-toggle:hover { color: #003c4b; background: #d8f4fa; border-color: #007c98; }
body.light-theme .side-icon, body.light-theme .brand-mark { border-color: #58b9cd; background: #d8f4fa; color: #005d73; }
body.light-theme .warning .side-icon { color: #724f00; background: #fff0c2; }
body.light-theme .hint { color: #274c59; border-color: #5d8998; }
body.light-theme .formula { background: #edfaff; border-color: #8acfe0; color: #284653; }
body.light-theme .converter-tabs button { background: #fff; color: #284653; border-color: #9eb8c2; }
body.light-theme .converter-tabs button.active { background: #cceff8; color: #005d73; border-color: #007e9b; }
@media (max-width: 800px) { nav { display: none; } .workbench { grid-template-columns: 1fr; } .side { grid-template-columns: repeat(2, 1fr); } .side-card:last-child { grid-column: 1 / -1; } .help-grid { grid-template-columns: 1fr 1fr; } .disclaimer { display: block; } .disclaimer span + span { display: block; margin-top: 6px; } }
@media (max-width: 520px) { body { font-size: 16px; } nav { display: none; } main { width: min(94%, 1180px); } .topbar { padding: 11px 4%; } .calc-head, .calc-body { padding: 19px; } .calc-head h2 { font-size: 23px; } .calc-head p, .field label, .field small, .result-note, .side-card li, .guide-card p, .guide-card li, .notes p { font-size: 12px; } .section-kicker { font-size: 10px; } input { font-size: 16px; padding: 13px; } .unit { font-size: 11px; } .btn { font-size: 12px; } .chip { display: none; } .form-grid, .result-grid, .side, .help-grid { grid-template-columns: 1fr; } .result-grid { gap: 7px; } .metric { display: flex; justify-content: space-between; align-items: center; } .metric b { margin: 0; } .side-card:last-child { grid-column: auto; } .help { padding: 19px; } .help-head { display: block; } .help-head p { text-align: left; margin-top: 8px; } .notes { padding: 19px; } .notes-head { display: block; } .calc-action { flex-wrap: wrap; } .calc-action .btn { flex: 1; } }

[hidden] { display: none !important; }
.install-button { border: 1px solid var(--cyan); border-radius: 9px; padding: 8px 11px; background: rgba(0, 217, 255, .1); color: var(--cyan); font: 700 10px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.install-button:hover { background: rgba(0, 217, 255, .18); }
.result-steps { margin-top: 14px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: rgba(5, 8, 13, .28); }
.result-steps summary { color: var(--cyan); }
.result-steps summary:after { content: "+"; }
.result-steps[open] summary:after { content: "−"; }
.result-steps p { margin-top: 9px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.result-steps code { color: var(--text); font: 600 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.result-checklist { margin-top: 14px; padding: 12px 14px; border-radius: 9px; background: rgba(95, 255, 203, .055); border: 1px solid rgba(95, 255, 203, .17); }
.result-checklist strong { color: var(--green); font-size: 10px; letter-spacing: .4px; text-transform: uppercase; }
.result-checklist ul { margin: 8px 0 0; padding-left: 17px; }
.result-checklist li { margin: 5px 0; color: var(--muted); font-size: 10px; }
.result-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.result-tools .btn { padding: 9px 12px; }
#copy-status { color: var(--green); font-size: 10px; }
body.light-theme .result-steps { background: #f4fafc; }
body.light-theme .result-steps code { color: #10232e; }
body.light-theme .result-checklist { background: #eaf8f3; border-color: #8bcbb6; }
body.light-theme .result-checklist li { color: #284653; }
@media print {
  @page { margin: 14mm; }
  html, body { min-height: 0 !important; background: #fff !important; color: #111 !important; }
  body { overflow: visible !important; }
  body > * { display: none !important; }
  body > #print-sheet { display: block !important; position: static !important; width: 100%; color: #111 !important; background: #fff !important; font: 10pt/1.45 Arial, sans-serif; }
  #print-sheet, #print-sheet * { visibility: visible !important; box-shadow: none !important; text-shadow: none !important; }
  #print-sheet .print-sheet-inputs { display: block !important; margin: 0 0 14px; padding: 0 0 12px; border: 0; border-bottom: 1px solid #888; border-radius: 0; color: #111 !important; background: #fff !important; }
  #print-sheet .print-sheet-inputs > strong { font-size: 13pt; }
  #print-sheet .print-sheet-inputs dl { display: grid; grid-template-columns: minmax(55%, 1fr) 1fr; gap: 4px 14px; margin: 8px 0 0; font-size: 9pt; }
  #print-sheet .print-sheet-inputs dt { font-weight: 700; }
  #print-sheet .print-sheet-inputs dd { margin: 0; }
  #print-sheet .print-sheet-result { position: static !important; inset: auto !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: #111 !important; background: #fff !important; }
  #print-sheet .result-top { margin-bottom: 8px; color: #111 !important; }
  #print-sheet .result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #print-sheet .metric { break-inside: avoid; padding: 9px; border: 1px solid #bbb; background: #fff !important; }
  #print-sheet .metric span, #print-sheet .metric b, #print-sheet .metric b em, #print-sheet .package-exact { color: #111 !important; }
  #print-sheet .result-steps { display: block !important; margin-top: 12px; padding: 9px 0; border: 0; border-top: 1px solid #bbb; border-radius: 0; background: #fff !important; }
  #print-sheet .result-steps p, #print-sheet .result-steps code { color: #111 !important; font-size: 9pt; white-space: normal; overflow-wrap: anywhere; }
  #print-sheet .result-note { margin-top: 8px; color: #111 !important; font-size: 9pt; }
}

/* Light mode: high contrast for pharmacy counters, retaining the cyan/blue identity. */
body.light-theme {
  --bg: #f2f6fa; --bg2: #ffffff; --card: #ffffff; --card2: #e9f0f6;
  --border: #c5d2de; --text: #172536; --muted: #33485d; --dim: #53697d;
  --cyan: #006b80; --blue: #075eaa; --green: #087451; --yellow: #805700;
  --orange: #a9430b; --red: #a51d2d; --shadow: 0 12px 30px rgba(24, 48, 70, .11);
}
body.light-theme:before { background-image: linear-gradient(rgba(0, 86, 116, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 86, 116, .035) 1px, transparent 1px); }
body.light-theme .topbar { background: rgba(255,255,255,.94); border-bottom-color: var(--border); }
body.light-theme .glass { background: linear-gradient(145deg, #fff, #f8fbfd); border-color: var(--border); }
body.light-theme .guide-card, body.light-theme .metric, body.light-theme .field-box, body.light-theme select, body.light-theme .notes-area { background: #f6f9fc; }
body.light-theme .result { background: linear-gradient(110deg, #e7f6fa, #f0f6fc); border-color: #9bcbd5; }
body.light-theme .quickbar button, body.light-theme .converter-tabs button, body.light-theme .btn-ghost, body.light-theme .theme-toggle { background: #fff; color: #24394d; border-color: #aebfce; }
body.light-theme .quickbar button.active, body.light-theme .converter-tabs button.active { background: #dff2f6; color: #005a70; border-color: #26849a; }
body.light-theme .btn-primary { background: #087e9a; border-color: #087e9a; color: #fff; }
body.light-theme .btn-primary:hover { background: #06677f; }
body.light-theme .hint { color: #075e70; border-color: #6e9eaa; }
body.light-theme .formula { background: #edf6fa; border-color: #bdd5df; color: #33485d; }
.print-inputs { display: none; margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
#print-sheet { display: none; }
.print-inputs dl { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin: 8px 0 0; font-size: 12px; }
.print-inputs dd { margin: 0; }

/* Clear, counter-friendly controls and concise help copy. */
.calc-action { flex-wrap: wrap; }
.rule-three-note, .rule-three-example { margin: 10px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.field label { font-size: 11px; }
.guide-card p, .guide-card li, .side-card li, details p { font-size: 11px; line-height: 1.6; }
.controlled-steps { margin: 9px 0 8px; padding-left: 20px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.controlled-steps li { margin: 5px 0; }
.install-help-status { color: var(--cyan) !important; font-weight: 600; }
.install-button:disabled { opacity: .8; cursor: default; }
body.light-theme {
  --bg: #f4f7fb; --bg2: #fff; --card: #fff; --card2: #eaf0f6;
  --border: #b7c6d5; --text: #14253a; --muted: #30465d; --dim: #4a6076;
  --cyan: #00677f; --blue: #075eaa; --green: #087451; --yellow: #805700;
  --orange: #a9430b; --red: #a51d2d; --shadow: 0 10px 26px rgba(24, 48, 70, .10);
}
body.light-theme .topbar { background: rgba(255,255,255,.97); }
body.light-theme .glass { background: #fff; }
body.light-theme .guide-card, body.light-theme .metric, body.light-theme .field-box, body.light-theme select, body.light-theme .notes-area { background: #f7f9fc; }
body.light-theme .brand span, body.light-theme .calc-head p, body.light-theme .guide-card p, body.light-theme .notes p, body.light-theme .side-card li, body.light-theme .guide-card li, body.light-theme details p { color: #344b62; }
body.light-theme .field label { color: #263d54; }
body.light-theme .field small, body.light-theme .unit, body.light-theme input::placeholder { color: #526a80; }
body.light-theme .unit { border-left-color: #bdcad8; }
body.light-theme .guide-card a, body.light-theme .techno-link, body.light-theme nav a { color: #075b87; }
body.light-theme .hint:after { color: #24394d; border-color: #bdcad8; }
body.light-theme .quickbar button:hover, body.light-theme .btn-ghost:hover, body.light-theme .theme-toggle:hover { color: #064d61; background: #e1f1f5; }
body.light-theme .warning .side-icon { color: #744b00; background: #fff0cb; }

/* Controle compacto, como parte das ações do cálculo. */
.rounding-option { display: none; flex: 0 0 auto; align-items: center; gap: 7px; margin-right: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--dim); font-size: 10px; cursor: pointer; user-select: none; }
.rounding-option:not([hidden]) { display: flex; }
.rounding-option input { appearance: none; flex: 0 0 auto; width: 15px; height: 15px; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--bg2); cursor: pointer; }
.rounding-option input:checked { background: var(--cyan); border-color: var(--cyan); }
.rounding-option input:checked:after { content: "✓"; display: block; color: #fff; font-size: 11px; line-height: 14px; text-align: center; }
.rounding-option span { display: inline; }
.rounding-option strong, .rounding-option small { display: none; }
.hint:after { width: min(220px, calc(100vw - 42px)); font-size: 10px; }
@media (max-width: 520px) {
  .calc-action { gap: 8px; }
  .rounding-option:not([hidden]) { flex: 0 0 100%; width: 100%; margin: 0 0 2px; }
  .calc-action .btn { min-width: 0; }
  .metric { flex-wrap: wrap; }
  .metric .package-exact { flex: 1 0 100%; margin-top: 3px; text-align: right; }
}

/* Contraste reforçado para leitura em balcões muito iluminados. */
body.light-theme {
  --bg: #edf1f5; --bg2: #fff; --card: #fff; --card2: #e1e8ef;
  --border: #8999a9; --text: #101e2d; --muted: #26394d; --dim: #3e5267;
  --cyan: #005b72; --blue: #064f91; --green: #075f43; --yellow: #674700;
  --orange: #853707; --red: #941b2a; --shadow: 0 10px 26px rgba(24, 48, 70, .12);
}
body.light-theme .guide-card, body.light-theme .metric, body.light-theme .field-box, body.light-theme select, body.light-theme .notes-area { background: #fff; }
body.light-theme .quickbar button.active, body.light-theme .converter-tabs button.active { background: #005b72; color: #fff; border-color: #00475a; }
body.light-theme .btn-primary { background: #005b72; border-color: #00475a; color: #fff; }
body.light-theme .btn-primary:hover { background: #00475a; }
body.light-theme .hint { color: #183d4b; border-color: #476c79; }
body.light-theme .hint:after { color: #162838; border-color: #8999a9; }
body.light-theme .rounding-option { color: #26394d; }
body.light-theme .rounding-option input:checked:after { color: #fff; }
.workbench.controlled-mode .rounding-option { color: var(--yellow); font-weight: 800; }
.workbench.controlled-mode .rounding-option input { outline: 2px solid rgba(255, 190, 55, .35); outline-offset: 2px; }
.controlled-alert { margin-top: 12px; padding: 11px 13px; border: 1px solid rgba(255, 190, 55, .38); border-left: 3px solid var(--yellow); border-radius: 9px; background: rgba(255, 190, 55, .07); color: var(--muted); font-size: 11px; line-height: 1.5; }
.controlled-alert strong { display: flex; align-items: center; gap: 7px; color: var(--yellow); font-size: 11px; }
.controlled-alert strong span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--yellow); color: var(--bg2); font-size: 11px; }
.controlled-alert ul { display: grid; gap: 3px; margin: 7px 0 0; padding-left: 20px; }
body.light-theme .controlled-alert { border-color: #d5b65f; border-left-color: #876000; background: #fff8e5; color: #34475b; }
body.light-theme .controlled-alert strong { color: #704900; }
body.light-theme .controlled-alert strong span { background: #704900; color: #fff; }
.package-exact { display: block; margin-top: 4px; color: var(--dim); font-size: 9px; font-weight: 500; line-height: 1.35; }
.reference-link { color: var(--cyan); font-size: 10px; font-weight: 600; text-decoration: none; }
.reference-link:hover { text-decoration: underline; }
body.light-theme .reference-link { color: #075b87; }
.project-details { margin-top: 20px; padding: 0; border: 0; }
.project-details > summary { display: inline-flex; justify-content: center; width: auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--dim); font-size: 10px; }
.project-details > summary:hover { color: var(--cyan); border-color: var(--cyan); }
.project-details > summary:after { margin-left: 10px; }
.project-details[open] > summary:after { content: "−"; }
.project-details-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.project-details-content h3 { margin-bottom: 6px; font-size: 12px; }
.project-details-content p { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.6; }
@media (max-width: 520px) { .project-details-content { grid-template-columns: 1fr; } }