:root {
  --navy: #071a33;
  --navy2: #0d2b4c;
  --blue: #1677d2;
  --gold: #f2c14e;
  --green: #137a50;
  --bg: #f3f5f1;
  --card: #fff;
  --ink: #102019;
  --muted: #65736b;
  --line: #dce4de;
  --shadow: 0 14px 35px #071a3310;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
}
.top {
  height: 72px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 5px 20px #071a3340;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand > div {
  display: flex;
  flex-direction: column;
}
.brand b {
  font-size: 18px;
  letter-spacing: 0.08em;
}
.brand small {
  font-size: 9px;
  letter-spacing: 0.13em;
  color: #b7c9d9;
  margin-top: 3px;
}
.mark {
  width: 42px;
  height: 42px;
  background: var(--gold);
  color: var(--navy);
  clip-path: polygon(50% 0, 100% 100%, 73% 100%, 50% 50%, 26% 100%, 0 100%);
  display: grid;
  place-items: end center;
  padding-bottom: 4px;
  font: 900 14px Arial;
}
.proposalBrand .mark.hasLogo {
  clip-path: none;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
.topActions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.offline {
  font-size: 9px;
  color: #8ae0ae;
  letter-spacing: 0.12em;
  margin-right: 10px;
}
button {
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
button:hover {
  transform: translateY(-1px);
}
button.dark,
.primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
button.ghost {
  background: transparent;
  color: #fff;
  border-color: #ffffff50;
}
.intro {
  padding: 38px 4vw 30px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  background: linear-gradient(115deg, #fff 62%, #eaf2da 62%);
  border-bottom: 1px solid var(--line);
}
.eyebrow,
.sectionTitle small,
.designBox small {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #648052;
}
.intro h1 {
  font: 700 clamp(30px, 3.3vw, 48px)/1.02 Georgia;
  margin: 10px 0 0;
}
.intro h1 em {
  font-weight: 400;
  color: #67963c;
}
.introStat {
  background: var(--navy);
  color: #fff;
  padding: 18px 24px;
  min-width: 245px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.introStat span {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #a9bdce;
}
.introStat strong {
  font: 700 24px Georgia;
  color: var(--gold);
  margin: 6px 0;
}
.introStat small {
  font-size: 10px;
  color: #b8c6d0;
}
.steps {
  display: flex;
  padding: 0 4vw;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 72px;
  z-index: 9;
}
.steps a {
  text-decoration: none;
  color: #5f6c64;
  padding: 15px 24px;
  border-right: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
}
.steps a:first-child {
  border-left: 1px solid var(--line);
}
main {
  padding-bottom: 50px;
}
.panel {
  margin: 24px 3vw;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.sectionTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.sectionTitle h2 {
  font: 700 27px Georgia;
  margin: 6px 0 0;
}
.recordActions,
.sectionTitle > div:last-child {
  display: flex;
  gap: 8px;
}
.formGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.formGrid label,
.designGrid label,
label.full,
#settingsFields label,
#pinGate label {
  font-size: 11px;
  font-weight: 800;
  color: #4d5d54;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #cdd8d0;
  border-radius: 6px;
  padding: 11px;
  background: #fbfcfa;
  color: #18281f;
  font: 13px Arial;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #1677d230;
  border-color: var(--blue);
}
.hidden {
  display: none !important;
}
.designBox {
  margin-top: 22px;
  background: #f0f5ec;
  border-left: 4px solid var(--green);
  padding: 20px;
}
.designBox h3 {
  font: 700 20px Georgia;
  margin: 5px 0 16px;
}
.designGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.full {
  margin-top: 18px;
}
.computeBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--navy);
  color: #fff;
  padding: 18px 20px;
  margin-top: 20px;
  border-radius: 7px;
}
.computeBar div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.computeBar small {
  color: #adc0cf;
}
.computeBar .primary {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.pill {
  background: #e8f3d7;
  color: #426b25;
  padding: 8px 12px;
  border-radius: 30px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.metrics > div {
  background: #f5f7f3;
  border: 1px solid var(--line);
  padding: 17px;
}
.metrics small {
  display: block;
  font-size: 8px;
  letter-spacing: 0.13em;
  color: #728078;
}
.metrics strong {
  font: 700 27px Georgia;
  display: inline-block;
  margin: 7px 5px 0 0;
}
.metrics span {
  font-size: 10px;
  color: #738179;
}
.packageGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}
.package {
  border: 1px solid var(--line);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.package.recommended {
  border: 2px solid var(--green);
}
.package.future {
  border: 2px solid #d3a524;
}
.ribbon {
  position: absolute;
  right: -40px;
  top: 18px;
  transform: rotate(38deg);
  width: 160px;
  text-align: center;
  padding: 5px;
  background: var(--green);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
}
.future .ribbon {
  background: #d3a524;
  color: #1f2d22;
}
.package > small {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #6b7b72;
}
.package h3 {
  font: 700 25px Georgia;
  margin: 10px 0;
}
.price {
  font: 700 30px Georgia;
  color: var(--green);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.package ul {
  columns: 2;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.8;
  color: #516158;
  min-height: 115px;
}
.reason {
  margin-top: 18px;
  background: #eef4e8;
  padding: 18px;
  border-left: 4px solid #7aa843;
}
.reason p {
  margin: 6px 0 0;
  color: #57675e;
  font-size: 13px;
  line-height: 1.6;
}
.proposal {
  max-width: 1020px;
  margin: auto;
  border: 1px solid #cfd9d2;
  background: #fff;
  padding: 42px;
  box-shadow: 0 16px 40px #071a3316;
}
.proposalHead {
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-bottom: 3px solid var(--navy);
  padding-bottom: 17px;
}
.proposalHead > div:last-child {
  text-align: right;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 5px;
}
.proposalHead > div:last-child span {
  color: #6e7c74;
}
.proposalBrand b {
  color: var(--navy);
}
.proposalBrand small {
  color: #61756a;
}
.clientSummary {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1.1fr;
  gap: 15px;
  padding: 20px 0;
}
.clientSummary > div {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}
.clientSummary small,
.proposalHero small,
.roiGrid small {
  font-size: 8px;
  letter-spacing: 0.15em;
  color: #748178;
}
.clientSummary b {
  margin: 7px 0;
  font-size: 13px;
}
.clientSummary span {
  font-size: 10px;
  color: #6d7972;
}
.proposalHero {
  background: var(--navy);
  color: #fff;
  padding: 27px;
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  gap: 20px;
}
.proposalHero h2 {
  font: 700 28px Georgia;
  margin: 8px 0;
}
.proposalHero p {
  color: #c1ced7;
  font-size: 12px;
}
.proposalHero > div:last-child {
  text-align: right;
  display: flex;
  flex-direction: column;
}
.proposalHero strong {
  font: 700 29px Georgia;
  color: var(--gold);
  margin: 8px 0;
}
.proposalHero span {
  font-size: 9px;
  color: #b8c6d0;
}
.subhead {
  font: 700 20px Georgia;
  margin: 26px 0 10px;
}
.proposalTable {
  border-top: 1px solid var(--line);
}
.proposalRow {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.proposalRow b,
.proposalRow span {
  padding: 10px;
}
.proposalRow b {
  background: #f3f6f2;
}
.roiGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 22px 0;
}
.roiGrid > div {
  background: #edf3e7;
  padding: 15px;
}
.roiGrid b {
  display: block;
  margin-top: 6px;
  font: 700 18px Georgia;
}
.termsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.termsGrid h3 {
  font: 700 15px Georgia;
  margin: 10px 0 5px;
}
.termsGrid p {
  font-size: 10px;
  line-height: 1.55;
  color: #5d6d64;
}
.signature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  margin-top: 45px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 10px;
}
.signature b {
  display: block;
  margin-top: 15px;
}
.diagram {
  background: #f6f8f5;
  border: 1px solid var(--line);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  overflow: auto;
}
.node {
  min-width: 125px;
  background: #fff;
  border: 2px solid var(--navy);
  padding: 15px;
  text-align: center;
  box-shadow: 0 7px 18px #071a3310;
}
.node b {
  display: block;
  font-size: 12px;
}
.node span {
  font-size: 9px;
  color: #6c7a72;
  display: block;
  margin-top: 5px;
}
.arrow {
  font-size: 24px;
  color: #7ba33c;
  font-weight: 900;
}
.branch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diagramNote {
  text-align: center;
  color: #68776e;
  font-size: 10px;
  line-height: 1.5;
}
.clientMode .ownerOnly,
.clientMode .steps,
.clientMode .topActions .dark {
  display: none;
}
.clientMode .resultPanel,
.clientMode #proposal,
.clientMode #diagram {
  margin-left: 7vw;
  margin-right: 7vw;
}
.clientMode .top {
  position: relative;
}
.clientMode .steps {
  position: relative;
}
dialog {
  border: 0;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 25px 80px #071a3360;
  width: min(850px, 90vw);
}
dialog::backdrop {
  background: #071a3377;
}
.modal {
  padding: 28px;
}
.modal.small {
  max-width: 550px;
}
.modalHead {
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px;
}
.modalHead h2 {
  font: 700 25px Georgia;
  margin: 4px 0;
}
.modalHead button {
  border: 0;
}
.modalActions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.settingsTabs {
  display: flex;
  gap: 8px;
  margin: 18px 0;
}
.settingsTabs button {
  flex: 1;
}
.settingsTabs button.active {
  background: var(--navy);
  color: #fff;
}
.settingsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hint {
  font-size: 10px;
  color: #7b8981;
}
.savedItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px;
  border-bottom: 1px solid var(--line);
}
.savedItem span {
  font-size: 11px;
  color: #68776e;
}
.proposalPage {
  margin-top: 24px;
  min-height: 1120px;
  display: flex;
  flex-direction: column;
}
.pageHeading {
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--line);
}
.pageHeading small {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #748178;
  font-weight: 900;
}
.pageHeading h2 {
  font: 700 27px Georgia;
  margin: 7px 0;
}
.pageHeading p {
  font-size: 11px;
  color: #66756d;
  line-height: 1.55;
  margin: 0;
  max-width: 760px;
}
.proposalFooter {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  color: #7a8780;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.houseSystemVisual {
  margin-top: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #eef6fa, #fff);
  border-radius: 8px;
  padding: 12px;
}
.houseSystemVisual svg {
  display: block;
  width: 100%;
  max-height: 350px;
}
.proposalDiagram {
  min-height: 190px;
  padding: 18px;
  overflow: hidden;
}
.designNotesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.designNotesGrid > div {
  background: #f3f6f2;
  border: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.designNotesGrid b {
  font-size: 10px;
}
.designNotesGrid span {
  font-size: 9px;
  line-height: 1.45;
  color: #68776e;
}
.materialsTable {
  margin-top: 18px;
  border: 1px solid var(--line);
}
.materialsHead,
.materialsRow {
  display: grid;
  grid-template-columns: 1.2fr 0.25fr 0.3fr 1.6fr;
  gap: 0;
}
.materialsHead {
  background: var(--navy);
  color: #fff;
  font-size: 8px;
  letter-spacing: 0.1em;
}
.materialsHead b,
.materialsRow > * {
  padding: 9px;
  border-right: 1px solid var(--line);
}
.materialsRow {
  font-size: 9px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.materialsRow:nth-child(even) {
  background: #f6f8f5;
}
.materialsRow input {
  border: 0;
  background: transparent;
  padding: 3px;
  font-size: 9px;
}
.profileGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.profileGrid h3 {
  font: 700 15px Georgia;
  margin: 0 0 6px;
}
.profileGrid p {
  font-size: 9px;
  line-height: 1.55;
  color: #5d6d64;
  white-space: pre-line;
}
.signature span {
  display: block;
  margin-top: 5px;
  color: #78867e;
  font-size: 8px;
}
.catalogEditor {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: auto;
}
.catalogEditor table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 10px;
}
.catalogEditor th,
.catalogEditor td {
  padding: 7px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.catalogEditor th {
  background: #f0f5ec;
}
.catalogEditor input,
.catalogEditor select {
  padding: 7px;
  font-size: 10px;
}
.catalogEditor input[type="checkbox"] {
  width: auto;
}
.settingsWide {
  grid-column: 1/-1;
}
.serviceCalculator {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.serviceProposal {
  min-height: 980px;
  display: flex;
  flex-direction: column;
}
.serviceQuoteTitle {
  margin: 22px 0;
  padding: 22px;
  background: var(--navy);
  color: #fff;
  display: grid;
  grid-template-columns: 1.5fr 0.7fr;
  gap: 24px;
  align-items: center;
}
.serviceQuoteTitle small,
.serviceQuoteTitle span {
  display: block;
  font-size: 8px;
  letter-spacing: 0.12em;
  opacity: 0.78;
}
.serviceQuoteTitle h2 {
  font: 700 25px Georgia;
  margin: 7px 0;
}
.serviceQuoteTitle p {
  font-size: 10px;
  line-height: 1.5;
  margin: 0;
}
.serviceQuoteTitle strong {
  display: block;
  color: var(--gold);
  font: 700 28px Georgia;
  margin: 6px 0;
}
.serviceQuoteTable {
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.serviceQuoteHead,
.serviceQuoteRow,
.serviceGrand {
  display: grid;
  grid-template-columns: 1fr 180px;
  align-items: center;
}
.serviceQuoteHead {
  background: #eef3ec;
  font-size: 8px;
  letter-spacing: 0.12em;
}
.serviceQuoteHead b,
.serviceQuoteRow > *,
.serviceGrand > * {
  padding: 12px 14px;
}
.serviceQuoteHead b:last-child,
.serviceQuoteRow b,
.serviceGrand strong {
  text-align: right;
}
.serviceQuoteRow {
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.serviceGrand {
  background: var(--navy);
  color: #fff;
}
.serviceGrand strong {
  color: var(--gold);
  font-size: 18px;
}
.serviceTerms {
  margin-top: 6px;
}
.serviceSignature {
  margin-top: 28px;
}
.serviceActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.modal {
  max-height: 88vh;
  overflow: auto;
}
@media (max-width: 1000px) {
  .formGrid,
  .designGrid {
    grid-template-columns: 1fr 1fr;
  }
  .package ul {
    columns: 1;
  }
  .proposal {
    padding: 25px;
  }
  .diagram {
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  .top {
    padding: 0 15px;
  }
  .brand small,
  .offline {
    display: none;
  }
  .topActions button {
    padding: 8px;
    font-size: 10px;
  }
  .intro {
    padding: 25px 18px;
    display: block;
  }
  .introStat {
    margin-top: 20px;
  }
  .steps {
    padding: 0;
    overflow: auto;
  }
  .steps a {
    white-space: nowrap;
  }
  .panel {
    margin: 15px;
    padding: 18px;
  }
  .formGrid,
  .designGrid,
  .metrics,
  .packageGrid,
  .clientSummary,
  .proposalHero,
  .roiGrid,
  .termsGrid {
    grid-template-columns: 1fr;
  }
  .serviceQuoteTitle {
    grid-template-columns: 1fr;
  }
  .serviceQuoteHead,
  .serviceQuoteRow,
  .serviceGrand {
    grid-template-columns: 1fr 120px;
  }
  .computeBar {
    display: block;
  }
  .computeBar button {
    margin-top: 15px;
    width: 100%;
  }
  .sectionTitle {
    align-items: flex-start;
  }
  .proposal {
    padding: 16px;
  }
  .proposalHead {
    display: block;
  }
  .proposalHead > div:last-child {
    text-align: left;
    margin-top: 15px;
  }
  .proposalHero > div:last-child {
    text-align: left;
  }
  .package ul {
    min-height: 0;
  }
  .diagram {
    padding: 20px;
  }
  .settingsGrid {
    grid-template-columns: 1fr;
  }
  .designNotesGrid,
  .profileGrid {
    grid-template-columns: 1fr;
  }
  .proposalPage {
    min-height: auto;
  }
  .materialsHead,
  .materialsRow {
    grid-template-columns: 1.1fr 0.3fr 0.35fr 1.3fr;
  }
  .proposalDiagram {
    overflow: auto;
  }
  .houseSystemVisual svg {
    min-width: 720px;
  }
  .houseSystemVisual {
    overflow: auto;
  }
}
@media print {
  body {
    background: #fff;
  }
  .top,
  .steps,
  .intro,
  #assessment,
  #recommendation,
  .sectionTitle,
  #diagram {
    display: none !important;
  }
  #proposal {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .proposal {
    border: 0;
    box-shadow: none;
    max-width: none;
    padding: 18mm;
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    margin: 0;
    overflow: hidden;
    break-after: page;
    page-break-after: always;
  }
  .proposal * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  dialog {
    display: none;
  }
  .proposal:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .proposalPage {
    display: flex;
  }
  .houseSystemVisual svg {
    max-height: 285px;
  }
  .proposalDiagram {
    min-height: 150px;
  }
  .materialsRow {
    break-inside: avoid;
  }
  .proposalFooter {
    display: flex !important;
  }
  body:not(.printService) #serviceQuotation {
    display: none !important;
  }
  body.printService > .top,
  body.printService > main > :not(#serviceQuotation),
  body.printService #serviceQuotation > :not(#serviceProposalSheet) {
    display: none !important;
  }
  body.printService #serviceQuotation {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  body.printService #serviceProposalSheet {
    display: flex !important;
    border: 0;
    box-shadow: none;
    max-width: none;
    padding: 18mm;
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    margin: 0;
    overflow: hidden;
    break-after: auto;
    page-break-after: auto;
  }
  body.printService #proposal {
    display: none !important;
  }
}

/* Commercial Online foundation — preserves approved visual language */
.accountPanel{padding:4px 0 8px}.planCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.planCard{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;text-align:left;border:1px solid var(--line,#d9e0dc);border-radius:12px;background:#fff}.planCard b{font-size:15px}.planCard span{font-weight:700}.planCard small{opacity:.72;line-height:1.35}.planCard.active{outline:2px solid #173328;background:#f4f8f6}@media(max-width:700px){.planCards{grid-template-columns:1fr}.topActions{gap:6px;flex-wrap:wrap}.topActions button,.topActions .offline{font-size:11px}}


/* Commercial account entitlement + currency update */
.accountModal{max-width:850px}.accountState{padding:16px 0;color:var(--muted,#66726a)}
.authTabs{display:flex;gap:8px;margin:12px 0 18px}.authTabs button{border:1px solid var(--line,#d9e0dc);background:#fff;padding:9px 14px;border-radius:9px}.authTabs button.active{background:#173328;color:#fff;border-color:#173328}
.authPanel{display:grid;grid-template-columns:1fr 1fr;gap:12px}.authPanel .authNotice,.authPanel .accountPrimary{grid-column:1/-1}.authPanel label{display:flex;flex-direction:column;gap:6px}.accountPrimary{justify-self:start}.accountMessage{min-height:22px;margin:10px 0 0}.accountMessage.error{color:#a61b1b}.accountIdentityCard{display:flex;flex-direction:column;gap:3px;padding:12px 0}.accountIdentityCard b{font-size:17px}.accountIdentityCard span{font-size:12px;color:var(--muted,#66726a)}.accountSignOut{margin:8px 0 16px}
.activePlanCard{border:2px solid #173328;background:#f4f8f6;border-radius:14px;padding:18px;display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:start}.activePlanCard>div{display:flex;flex-direction:column;gap:4px}.activePlanCard small{font-size:10px;letter-spacing:.12em;color:#61745e}.activePlanCard strong{font-size:22px}.activePlanCard>span{font-weight:800}.activePlanCard p{grid-column:1/-1;margin:2px 0 0;color:#405048}.activePlanCard.inactiveSubscription{border-color:#b99849;background:#fffaf0}
.upgradeArea{margin-top:18px}.upgradeArea>small{display:block;font-weight:800;letter-spacing:.1em;font-size:10px;margin-bottom:9px}.upgradeButtons{display:flex;gap:10px;flex-wrap:wrap}.upgradeBtn,.premiumActive{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #173328;border-radius:10px;padding:11px 14px;font-weight:800;color:#173328;background:#fff}.upgradeBtn.premium{background:#173328;color:#fff}.premiumActive{background:#f4f8f6}.entitlementNote{margin-top:14px}.planHidden{display:none!important}
.currencySettings{padding:4px 0}.currencySettings h3{margin-top:0}.currencySettings #applyCurrencyBtn{margin-top:14px}.currencySymbolInline{font:inherit}
@media(max-width:700px){.authPanel{grid-template-columns:1fr}.activePlanCard{grid-template-columns:1fr}.activePlanCard p{grid-column:1}.upgradeButtons{flex-direction:column}.upgradeBtn{width:100%}}


/* Commercial access gate — calculator remains unavailable until authenticated + active subscription. */
.commercialAccessGate{position:fixed;inset:73px 0 0;z-index:900;background:rgba(7,26,51,.78);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:24px}
.commercialAccessGate.hidden{display:none!important}
.commercialAccessGateCard{width:min(560px,100%);background:#fff;border:1px solid rgba(255,255,255,.25);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.28);padding:32px;text-align:center}
.gateBrand{font-size:11px;font-weight:900;letter-spacing:.18em;color:#687e53;margin-bottom:10px}
.commercialAccessGateCard h2{margin:0 0 10px;color:#10253d;font-size:30px}
.commercialAccessGateCard p{margin:0 auto 20px;max-width:470px;color:#617080;line-height:1.55}
.commercialAccessGateCard button{min-width:210px}
body.appLocked main{user-select:none;pointer-events:none}
body.appLocked #clientModeBtn,body.appLocked #settingsBtn{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.commercialAccessGate{inset:108px 0 0;padding:16px}.commercialAccessGateCard{padding:24px 18px}.commercialAccessGateCard h2{font-size:24px}}
@media print{body.appLocked main,body.appLocked .commercialAccessGate{display:none!important}}