:root{--green:#2bc163;--green2:#e4f8eb;--blue:#243b6b;--ink:#172033;--muted:#667085;--line:#e5e9f2;--bg:#f7f9fc;--danger:#e5484d;--shadow:0 14px 34px rgba(23,32,51,.08)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:16px;font-weight:800}.brandLogo{height:50px;width:auto;display:block;object-fit:contain}.logo{width:38px;height:38px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900}nav{display:flex;gap:18px;align-items:center}nav a{color:var(--ink);text-decoration:none;font-weight:650;font-size:14px}button,.fileLabel{border:0;background:var(--green);color:#fff;border-radius:999px;padding:11px 16px;font-weight:800;cursor:pointer;font-size:14px;box-shadow:0 8px 18px rgba(43,193,99,.22)}button.secondary,.fileLabel.secondary{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}button.ghost{background:#eef3f0;color:var(--ink);box-shadow:none}.fileLabel input{display:none}.hero{display:grid;grid-template-columns:1fr 430px;gap:34px;padding:58px 48px 34px;align-items:end}.kicker{margin:0 0 10px;color:var(--green);font-weight:900;letter-spacing:.03em}h1{font-size:48px;line-height:1.03;margin:0;letter-spacing:-.05em}.titleLine{display:flex;align-items:center;gap:16px}.editTitle{width:38px;height:38px;padding:0;border-radius:999px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;font-size:18px}.modalBackdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);display:none;align-items:center;justify-content:center;z-index:99}.modalBackdrop.open{display:flex}.modal{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 22px 70px rgba(15,23,42,.22);padding:24px;width:min(520px,calc(100vw - 36px))}.modal h3{margin:0 0 12px;font-size:22px}.modal p{margin:0 0 16px;color:var(--muted)}.modalActions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.lead{font-size:18px;color:var(--muted);max-width:720px;line-height:1.55;margin-bottom:10px}.privacyNote{font-size:15px;color:var(--ink);max-width:760px;line-height:1.5;background:var(--green2);border:1px solid rgba(43,193,99,.20);border-radius:18px;padding:12px 16px;margin:0 0 2px}.privacyNote strong{color:#057a5d}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.totals{display:grid;grid-template-columns:1fr;gap:12px}.totals div{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:var(--shadow)}.totals small{display:block;color:var(--muted);font-weight:750;margin-bottom:6px}.totals strong{font-size:28px;letter-spacing:-.03em}main{display:grid;grid-template-columns:560px minmax(700px,1fr);gap:24px;padding:0 48px 56px;align-items:start;grid-auto-rows:max-content}.panel,.diagramCard{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}.panel{padding:24px}.panelHead,.diagramHead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.costsHead{margin-top:28px}h2{margin:0;font-size:24px;letter-spacing:-.035em}.sub{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.35}.displayToggle{display:flex;gap:4px;background:#eef3f0;border:1px solid var(--line);padding:4px;border-radius:999px;white-space:nowrap}.displayToggle .toggle{box-shadow:none;background:transparent;color:var(--ink);padding:8px 12px;border-radius:999px;font-size:13px}.displayToggle .toggle.active{background:var(--green);color:#fff}.diagramControls{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.viewToggle{display:flex;gap:4px;background:#eef3f0;border:1px solid var(--line);padding:4px;border-radius:999px;white-space:nowrap}.viewToggle .viewBtn{box-shadow:none;background:transparent;color:var(--ink);padding:8px 12px;border-radius:999px;font-size:13px}.viewToggle .viewBtn.active{background:var(--blue);color:#fff}.statusSummary{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:16px 0 10px}.statusCard{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fbfcfe}.statusCard small{display:block;color:var(--muted);font-weight:800;margin-bottom:4px}.statusCard strong{font-size:18px}.statusCard.required{background:#f3f4f6}.statusCard.reduce{background:#fff7ed}.statusCard.cut{background:#fff1f2}.legend{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 10px;color:var(--muted);font-size:13px;font-weight:750}.legend span{display:flex;align-items:center;gap:6px}.dot{display:inline-block;width:10px;height:10px;border-radius:999px;background:#8b95a5}.dot.required{background:#6b7280}.dot.reduce{background:#f59e0b}.dot.cut{background:#ef4444}.list{display:flex;flex-direction:column;gap:10px}
.legalCard{display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:32px;
  margin:0 48px 32px;
  scroll-margin-top:96px;
}
.legalCard.open{display:block}.legalCard h2{margin-bottom:10px}
.legalCard h3{margin:24px 0 8px;font-size:17px;color:var(--blue)}
.legalCard p{margin:0 0 10px;color:var(--ink);line-height:1.65;font-size:15px}
.legalLead{color:var(--muted)!important}
.legalCard details{border:1px solid var(--line);border-radius:16px;background:#fbfcfe;margin:10px 0;padding:0;overflow:hidden}
.legalCard summary{cursor:pointer;font-weight:850;color:var(--ink);padding:14px 16px;list-style:none}
.legalCard summary::-webkit-details-marker{display:none}
.legalCard summary::after{content:'+';float:right;color:var(--green);font-weight:900}
.legalCard details[open] summary::after{content:'−'}
.legalCard details p{padding:0 16px 16px;margin:0}
.footerNav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  color:var(--muted);
  font-size:14px;
  font-weight:650;
  padding:8px 48px 36px;
}
.footerLink{background:transparent;border:0;box-shadow:none;color:var(--muted);text-decoration:none;font:inherit;font-weight:650;padding:0;cursor:pointer}.footerLink:hover{color:var(--ink)}.footerLink.active{color:var(--ink)}
@media(max-width:720px){
  .legalCard{display:none;margin:0 18px 24px;padding:22px}
  .footerNav{padding:6px 18px 28px;font-size:13px}
}

.printBtn{
  border:1px solid var(--line);
  background:#eef3f0;
  color:var(--ink);
  box-shadow:none;
  width:46px;
  height:38px;
  padding:0;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  font-size:17px;
}
.printBtn:hover{background:#e5ece8}
.tableControls{display:flex;align-items:center;gap:8px}
.diagramControls{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff!important;color:#111827!important}
  body.print-diagram header,
  body.print-diagram .hero,
  body.print-diagram .panel,
  body.print-diagram .tableCard,
  body.print-diagram .legalCard,
  body.print-diagram footer,
  body.print-table header,
  body.print-table .hero,
  body.print-table main,
  body.print-table .legalCard,
  body.print-table footer{display:none!important}
  body.print-diagram main{display:block!important;padding:0!important}
  body.print-diagram .diagramCard{
    display:block!important;
    position:static!important;
    box-shadow:none!important;
    border:0!important;
    padding:0!important;
    margin:0!important;
    min-height:auto!important;
    width:100%!important;
  }
  body.print-diagram .diagramHead,
  body.print-diagram .statusSummary,
  body.print-diagram .legend{display:none!important}
  body.print-diagram .chartFrame{
    box-shadow:none!important;
    border:0!important;
    padding:0!important;
    margin:0!important;
    width:100%!important;
  }
  body.print-diagram #chart{
    width:100%!important;
    height:176mm!important;
    min-height:176mm!important;
    margin:0!important;
    overflow:visible!important;
  }
  body.print-table .tableCard{
    display:block!important;
    box-shadow:none!important;
    border:0!important;
    margin:0!important;
    padding:0!important;
    width:100%!important;
  }
  body.print-table .tableHead{display:block!important;margin-bottom:10mm!important}
  body.print-table .tableToggle,
  body.print-table .printBtn{display:none!important}
  body.print-table .flowTable{
    border:0!important;
    padding:0!important;
    border-radius:0!important;
  }
  body.print-table .tableCell{
    font-size:12pt!important;
    padding:8pt 0!important;
    border-top:1px solid #d7dce5!important;
  }
  body.print-table .tableSectionTitle{font-size:12pt!important}
}

.tableCard{scroll-margin-top:96px;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:28px;margin:0 48px 48px;clear:both;position:relative;z-index:1}
.tableHead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.flowTable{border:1px solid var(--line);border-radius:22px;padding:28px 28px 24px;background:#fff}
.tableSectionTitle{font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:var(--blue);margin:0 0 10px;padding-top:4px}
.tableRows{display:grid;grid-template-columns:1fr 180px 120px;align-items:center}
.tableRow{display:contents}
.tableCell{padding:18px 0;border-top:2px solid #e7ebf2;font-size:20px;color:var(--blue)}
.tableCell.amount,.tableCell.percent{text-align:right;font-variant-numeric:tabular-nums}
.tableRow.sum .tableCell{color:#98a2b3;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.tableSpacer{height:34px}
@media(max-width:720px){.tableCard{padding:18px;margin:0 18px 32px}.flowTable{padding:18px}.tableHead{align-items:flex-start;flex-direction:column}.tableRows{grid-template-columns:1fr 120px 82px}.tableCell{font-size:15px;padding:14px 0}}
.incomeCard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:0 6px 18px rgba(23,32,51,.04)}.chartFrame{background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px 4px 28px;box-shadow:0 8px 22px rgba(23,32,51,.045);overflow:visible;flex:0 0 auto}.row{display:grid;grid-template-columns:26px 1fr 122px 38px;gap:8px;align-items:center}.positionRow{grid-template-columns:26px 1fr 105px 116px 38px;border-radius:16px;padding:4px}.positionRow.status-required{background:#f3f4f6}.positionRow.status-reduce{background:#fff7ed}.positionRow.status-cut{background:#fff1f2}.positionRow.status-required .posName{font-weight:850}input,select{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px;font-size:14px;background:#fbfcfe}select{padding:11px 9px;font-weight:750}input:focus,select:focus{outline:2px solid rgba(43,193,99,.20);border-color:var(--green)}.remove,.removePos,.removeCat{padding:0;width:38px;height:38px;background:#fff0f1;color:var(--danger);box-shadow:none;border:1px solid #ffd3d6;font-size:22px}.touchSorting{overscroll-behavior:none}.dragHandle{touch-action:none;height:38px;display:grid;place-items:center;color:#98a2b3;font-weight:900;cursor:grab;user-select:none}.dragHandle:active{cursor:grabbing}.draggable.dragging{opacity:.45}.dropzone.dragover{outline:2px dashed rgba(43,193,99,.50);outline-offset:4px;border-radius:16px;background:rgba(0,179,134,.035)}.category{border:1px solid var(--line);border-radius:18px;padding:0;overflow:hidden;background:#fbfcfe}.category summary{list-style:none;display:grid;grid-template-columns:26px 1fr auto 38px;gap:10px;align-items:center;padding:12px;cursor:pointer;background:#fff}.category summary::-webkit-details-marker{display:none}.catName{font-weight:700;background:#fff}.catTotal{font-weight:900;color:var(--green);white-space:nowrap;text-align:right;line-height:1.15}.catTotal .potential{display:block;color:#f59e0b;font-size:12px;margin-top:5px;font-weight:850}.catTotal .potential.zero{color:#98a2b3}.positions{display:flex;flex-direction:column;gap:8px;padding:12px 12px 8px 24px;min-height:54px}.addPosition{margin:0 0 14px 24px;background:var(--green2);color:#057a5d;box-shadow:none}.diagramCard{min-height:1080px;padding:24px;position:sticky;top:92px;height:auto;overflow:visible;align-self:start}.diagramHead p{margin:5px 0 0;color:var(--muted);font-weight:650}#chart{height:820px;width:100%;overflow:visible}@media(max-width:1320px){main{grid-template-columns:540px minmax(640px,1fr)}#chart{height:920px}.diagramCard{min-height:1070px}.statusSummary{grid-template-columns:repeat(2,1fr)}}@media(max-width:1180px){.hero,main{grid-template-columns:1fr}.diagramCard{position:static}#chart{height:1020px}}@media(max-width:720px){.chartFrame{padding:10px 8px 24px}.incomeCard{padding:10px}.diagramControls{align-items:flex-start}.topbar{padding:0 18px}nav a{display:none}.hero,main{padding-left:18px;padding-right:18px}h1{font-size:36px}.row,.positionRow{grid-template-columns:24px 1fr 95px 38px}.positionRow select{grid-column:2/4}.diagramHead{align-items:flex-start;flex-direction:column}.statusSummary{grid-template-columns:1fr}#chart{height:1120px}}

.diagramViewControls{display:flex;align-items:center;gap:8px}
.diagramControls{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.printBtn{
  border:1px solid var(--line);
  background:#eef3f0;
  color:var(--ink);
  box-shadow:none;
  width:46px;
  height:38px;
  padding:0;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  font-size:17px;
  line-height:1;
}
.printBtn:hover{background:#e5ece8}


.balance-positive .tableCell{color:#2bc163!important;font-weight:800}
.balance-negative .tableCell{color:#ef4444!important;font-weight:800}
.balance-neutral .tableCell{color:#98a2b3!important;font-weight:800}


.qrBtn{display:inline-flex;align-items:center;gap:8px}
.qrIcon{width:16px;height:16px;display:inline-block;background:
linear-gradient(#172033,#172033) 0 0/5px 5px no-repeat,
linear-gradient(#172033,#172033) 11px 0/5px 5px no-repeat,
linear-gradient(#172033,#172033) 0 11px/5px 5px no-repeat,
linear-gradient(#172033,#172033) 7px 7px/3px 3px no-repeat,
linear-gradient(#172033,#172033) 12px 9px/3px 3px no-repeat,
linear-gradient(#172033,#172033) 8px 13px/3px 3px no-repeat;
border:1px solid #172033;border-radius:2px}
.qrModalBox{max-width:580px}
.qrCanvas{display:block;width:320px;height:320px;margin:18px auto;border:1px solid var(--line);border-radius:18px;padding:12px;background:#fff}
.qrMeta{text-align:center;color:var(--muted);font-size:13px;margin:0 0 10px}
.qrLink{width:100%;min-height:88px;border:1px solid var(--line);border-radius:14px;padding:12px;font-size:12px;color:var(--muted);resize:vertical}


.qrBaseLabel{display:block;font-size:13px;font-weight:750;color:var(--muted);margin:8px 0 10px}
.qrBaseUrl{margin-top:6px;width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 12px;font-size:14px;background:#fbfcfe}
.qrMeta.warn{color:#e5484d;font-weight:800}


.saveModalBox{max-width:520px}
.fileNameLabel{display:block;font-size:13px;font-weight:800;color:var(--muted);margin-top:14px}
.fileNameRow{display:flex;align-items:center;gap:8px;margin-top:7px}
.fileNameRow input{flex:1}
.fileNameRow span{color:var(--muted);font-weight:850;background:#f3f6fa;border:1px solid var(--line);border-radius:12px;padding:11px 12px}



/* Release polish v53: logo color alignment and modal/context-dialog styling */
button:hover,.fileLabel:hover{filter:brightness(.97);transform:translateY(-1px)}
button:active,.fileLabel:active{transform:translateY(0);filter:brightness(.94)}
button.secondary:hover,.fileLabel.secondary:hover,.editTitle:hover,.printBtn:hover{background:#f6faf7;color:var(--ink);filter:none}
button.ghost:hover{background:#e6f3ea;filter:none}
.logo{background:var(--green)}
.modalBackdrop{background:rgba(23,32,51,.48);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:18px}
.modal{position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(229,233,242,.95);box-shadow:0 24px 80px rgba(23,32,51,.25);padding:0;width:min(560px,calc(100vw - 36px))}
.modal::before{content:none;display:none}
.modal h3{margin:24px 24px 10px;font-size:23px;letter-spacing:-.035em;color:var(--ink)}
.modal p{margin:0 24px 16px;color:var(--muted);line-height:1.55}
.modal label{margin-left:24px;margin-right:24px}
.modal input,.modal textarea,.modal select{border:1px solid var(--line);border-radius:16px;background:#fbfcfe;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.modal input{width:calc(100% - 48px);margin:0 24px;padding:12px 14px;font-size:15px}
.modal .fileNameRow input{width:auto;margin:0;min-width:0}
.modal .qrBaseUrl{width:100%;margin:6px 0 0}
.modal .qrLink{width:calc(100% - 48px);margin-left:24px;margin-right:24px}
.modalActions{margin:18px 0 0;padding:16px 24px 24px;background:#fbfcfe;border-top:1px solid var(--line);border-radius:0 0 28px 28px}.contextModalInput{font-family:inherit}.contextModalInput[hidden]{display:none!important}
.qrCanvas{box-shadow:var(--shadow)}
.fileNameLabel,.qrBaseLabel{color:var(--ink);font-weight:850}
.fileNameRow span{background:#eef6f1}
@media(max-width:720px){.modal{border-radius:24px}.modal h3{font-size:21px}.modalActions{justify-content:stretch;flex-direction:column}.modalActions button{width:100%}.brandLogo{height:44px}}


/* Mobile public RC polish v58 */
.mobileLandscapeHint{display:none;margin:0 0 12px;padding:11px 14px;border:1px solid rgba(43,193,99,.22);background:var(--green2);border-radius:16px;color:#057a5d;font-size:14px;font-weight:800;line-height:1.35}
.privacyNote{display:inline-block;width:auto;max-width:720px}
.tableRows{display:block}
.tableRow{display:grid;grid-template-columns:1fr 180px 120px;align-items:stretch;border-top:2px solid #e7ebf2}
.tableCell{border-top:0;min-width:0;overflow-wrap:anywhere;word-break:normal}
.tableCell.amount,.tableCell.percent{white-space:nowrap;padding-left:14px}
.modal{max-height:92dvh;overflow:auto;-webkit-overflow-scrolling:touch}
.qrModalBox{max-width:min(580px,calc(100vw - 24px))}

@media(max-width:1180px){
  .topbar{padding-left:24px;padding-right:24px}
  .hero,main{padding-left:24px;padding-right:24px}
  .tableCard,.legalCard{margin-left:24px;margin-right:24px}
  .privacyNote{max-width:680px;font-size:14px;padding:10px 14px;line-height:1.42}
}

@media(max-width:720px){
  html{-webkit-text-size-adjust:100%}
  input,select,textarea,.modal input,.modal textarea,.qrBaseUrl{font-size:16px!important}
  .topbar{height:auto;min-height:72px;align-items:center;gap:14px;padding:12px 18px;flex-wrap:wrap}
  .brand{min-width:0;flex:1 1 auto}
  .brandLogo{height:42px;max-width:190px}
  nav{width:100%;justify-content:flex-start;gap:10px;flex-wrap:wrap;padding-top:4px}
  nav button{padding:10px 13px;font-size:13px}
  .hero{padding-top:36px;gap:22px}
  .actions{margin-top:20px;gap:10px}
  .actions button,.actions .fileLabel{width:100%;text-align:center;justify-content:center}
  .privacyNote{display:block;width:100%;max-width:none;font-size:13.5px;padding:10px 12px;line-height:1.4;border-radius:16px}
  .mobileLandscapeHint{display:block}
  .tableRows{display:block}
  .tableRow{display:grid;grid-template-columns:minmax(0,1fr) 112px 72px;border-top:1px solid #e7ebf2}
  .tableCell{font-size:15px;padding:13px 0;line-height:1.3}
  .tableCell.amount,.tableCell.percent{padding-left:8px}
  .modalBackdrop{align-items:flex-start;padding:10px;overflow:auto}
  .modal{width:100%;max-height:calc(100dvh - 20px);border-radius:22px}
  .qrCanvas{width:min(240px,72vw);height:min(240px,72vw);margin:10px auto;padding:8px;border-radius:14px}
  .qrLink{min-height:70px;max-height:18vh;font-size:12px!important}
  .qrBaseLabel{margin-top:4px;margin-bottom:8px}
  .modal h3{margin-top:18px;font-size:20px}
  .modal p{margin-bottom:12px}
  .modalActions{position:sticky;bottom:0;padding:12px 18px 18px;margin-top:12px}
}

@media(max-width:1000px) and (orientation:landscape){
  .topbar{height:auto;min-height:62px;padding:8px 16px;gap:16px}
  .brandLogo{height:38px;max-width:210px}
  nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}
  nav a{display:none}
  nav button{padding:9px 12px;font-size:13px}
  .hero,main{padding-left:16px;padding-right:16px}
  .hero{padding-top:28px;padding-bottom:22px;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
  .totals div{padding:14px 16px;border-radius:18px}
  .totals strong{font-size:22px}
  .privacyNote{max-width:620px;font-size:13px;padding:9px 12px;line-height:1.35}
  h1{font-size:38px}
  main{grid-template-columns:minmax(420px,0.95fr) minmax(460px,1.05fr);gap:16px}
  .panel,.diagramCard{padding:18px;border-radius:22px}
  .diagramCard{position:static;min-height:auto}
  #chart{height:760px}
  .statusSummary{grid-template-columns:repeat(2,1fr)}
  .tableCard,.legalCard{margin-left:16px;margin-right:16px}
  .modalBackdrop{align-items:flex-start;padding:8px;overflow:auto}
  .modal{max-height:calc(100dvh - 16px)}
  .qrCanvas{width:190px;height:190px;margin:8px auto;padding:6px}
  .qrLink{min-height:58px;max-height:16vh;font-size:12px!important}
  .modal h3{margin-top:16px;font-size:19px}.modal p{margin-bottom:10px}.modalActions{padding-top:10px;padding-bottom:14px}
}


/* Public RC v59: responsive header, diagram controls and expandable mobile diagram */
.brandHome{border:0;background:transparent;box-shadow:none;padding:0;border-radius:0;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:flex-start}
.brandHome:hover,.brandHome:active{background:transparent;box-shadow:none;filter:none;transform:none}
.expandDiagramBtn{display:none;border:1px solid var(--line);background:#eef3f0;color:var(--ink);box-shadow:none;width:46px;height:38px;padding:0;border-radius:999px;place-items:center;font-size:18px;line-height:1}
.expandDiagramBtn:hover{background:#e5ece8;filter:none}
.diagramExpanded .expandDiagramBtn{background:var(--blue);color:#fff;border-color:var(--blue)}
.diagramExpanded .diagramCard{grid-column:1/-1;width:100%;position:static;min-height:auto}
.diagramExpanded main{grid-template-columns:minmax(0,1fr)!important}
.diagramExpanded #chart{height:980px}

@media(max-width:1180px){
  .expandDiagramBtn{display:inline-grid}
}

@media(max-width:720px){
  .topbar{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;min-height:64px}
  .brand{flex:0 1 auto;min-width:0}
  .brandLogo{height:38px;max-width:142px}
  nav{width:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding-top:0;flex-wrap:nowrap}
  nav a{display:none!important}
  nav button{white-space:nowrap;padding:9px 10px;font-size:12px;line-height:1;min-height:38px}
  .diagramViewControls{width:100%;display:grid;grid-template-columns:40px 40px minmax(0,1fr);gap:6px;align-items:center}
  .printBtn,.expandDiagramBtn{width:40px;height:36px;font-size:16px}
  .diagramControls{width:100%;align-items:stretch;gap:8px}
  .displayToggle,.viewToggle{width:100%;max-width:100%;overflow:hidden}
  .displayToggle .toggle,.viewToggle .viewBtn{flex:1 1 0;min-width:0;padding:8px 7px;font-size:12px;text-align:center;white-space:nowrap}
  .diagramExpanded #chart{height:980px}
}

@media(max-width:1000px) and (orientation:landscape){
  .topbar{flex-wrap:nowrap;justify-content:space-between;padding:8px 12px;gap:10px;min-height:58px}
  .brand{flex:0 1 auto;min-width:0}
  .brandLogo{height:36px;max-width:180px}
  nav{width:auto;flex:0 0 auto;justify-content:flex-end;gap:7px;flex-wrap:nowrap;padding-top:0}
  nav a{display:none!important}
  nav button{white-space:nowrap;padding:8px 10px;font-size:12px;line-height:1;min-height:36px}
  .diagramHead{align-items:flex-start;flex-direction:column;gap:12px}
  .diagramControls{width:100%;align-items:stretch;gap:8px}
  .displayToggle{align-self:flex-start;width:auto;max-width:100%}
  .diagramViewControls{width:100%;display:grid;grid-template-columns:40px 40px minmax(0,1fr);gap:8px;align-items:center}
  .printBtn,.expandDiagramBtn{width:40px;height:36px;font-size:16px}
  .viewToggle{width:100%;max-width:100%;min-width:0;overflow:hidden;display:flex}
  .viewToggle .viewBtn{flex:1 1 0;min-width:0;padding:8px 8px;font-size:12px;text-align:center;white-space:nowrap}
  .statusSummary{margin-top:10px}
  .diagramExpanded .diagramCard{grid-column:1/-1}
  .diagramExpanded #chart{height:850px}
}

/* Public RC v60: mobile/landscape layout fixes */
html{scroll-behavior:smooth}
.topbar{position:sticky;top:0;left:0;right:0;width:100%;max-width:none;z-index:1000;background:#fff;background-clip:border-box}
.brandHome{appearance:none;-webkit-appearance:none;text-decoration:none}

@media(max-width:720px){
  .topbar{position:sticky!important;top:0;flex-wrap:nowrap!important;min-height:58px;height:58px;padding:7px 10px!important;gap:8px!important;overflow:hidden;box-shadow:0 1px 0 var(--line)}
  .brandHome,.brand{flex:0 1 auto;min-width:0;max-width:42vw}
  .brandLogo{height:34px!important;max-width:148px!important}
  .topbar nav{width:auto!important;flex:1 1 auto!important;min-width:0;display:flex!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:nowrap!important;padding-top:0!important;overflow:hidden}
  .topbar nav a{display:none!important}
  .topbar nav button{flex:0 1 auto;white-space:nowrap;padding:8px 9px!important;font-size:11px!important;line-height:1!important;min-height:34px!important;max-width:42vw;overflow:hidden;text-overflow:ellipsis}
  .hero{padding-top:22px!important}
}

@media(max-width:1000px) and (orientation:landscape){
  body{overflow-x:hidden}
  .topbar{position:sticky!important;top:0;width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:56px;min-height:56px;padding:7px 14px!important;box-shadow:0 1px 0 var(--line);overflow:hidden}
  .brandHome,.brand{max-width:210px;min-width:0;flex:0 1 auto}
  .brandLogo{height:34px!important;max-width:190px!important}
  .topbar nav{width:auto!important;flex:1 1 auto!important;min-width:0;display:flex!important;justify-content:flex-end!important;gap:7px!important;flex-wrap:nowrap!important;padding-top:0!important;overflow:hidden}
  .topbar nav button{white-space:nowrap;padding:8px 10px!important;font-size:12px!important;line-height:1!important;min-height:34px!important}
  .hero,main{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:10px!important;padding-right:10px!important}
  main{grid-template-columns:minmax(350px,.88fr) minmax(0,1.12fr)!important;gap:12px!important;align-items:start}
  .panel,.diagramCard{padding:16px!important;border-radius:20px!important;min-width:0!important}
  .row{grid-template-columns:22px minmax(155px,1fr) 88px 34px!important;gap:6px!important}
  .positionRow{grid-template-columns:22px minmax(170px,1fr) 78px 74px 34px!important;gap:6px!important}
  .row input,.positionRow input,.positionRow select{min-width:0!important;padding-left:9px!important;padding-right:8px!important;font-size:16px!important}
  .positionRow select{font-size:12px!important;padding-left:5px!important;padding-right:2px!important;text-overflow:clip}
  .remove,.removePos,.removeCat{width:34px!important;height:34px!important;font-size:20px!important}
  .dragHandle{width:22px!important;min-width:22px!important}
  .diagramHead{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(260px,auto)!important;align-items:start!important;gap:10px!important}
  .diagramControls{width:auto!important;max-width:100%;align-items:flex-end!important;justify-self:end!important;gap:7px!important}
  .displayToggle{width:auto!important;max-width:100%;align-self:flex-end!important;overflow:hidden}
  .displayToggle .toggle{font-size:12px!important;padding:7px 10px!important}
  .diagramViewControls{width:auto!important;max-width:100%;display:flex!important;gap:6px!important;align-items:center!important;justify-content:flex-end!important;overflow:hidden}
  .printBtn,.expandDiagramBtn{width:38px!important;height:34px!important;font-size:15px!important;flex:0 0 38px!important}
  .viewToggle{width:auto!important;max-width:286px!important;min-width:0!important;display:flex!important;overflow:hidden}
  .viewToggle .viewBtn{flex:1 1 0!important;min-width:0!important;padding:7px 9px!important;font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .diagramExpanded main{grid-template-columns:minmax(0,1fr)!important}
  .diagramExpanded .diagramCard{grid-column:1/-1!important;width:100%!important;max-width:100%!important;position:static!important}
  .diagramExpanded #chart{height:850px!important}
}

@media(max-width:1180px){
  .expandDiagramBtn{display:inline-grid!important}
  .diagramExpanded .diagramCard{grid-column:1/-1!important;width:100%!important;max-width:100%!important;position:static!important}
}


/* Public RC v61: dedicated responsive landscape profile */
@media (max-width:1000px) and (orientation:landscape){
  body{overflow-x:hidden!important;background:var(--bg)}
  .topbar{
    width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
    height:58px!important;min-height:58px!important;padding:7px 16px!important;box-sizing:border-box!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
    background:#fff!important;z-index:3000!important;overflow:hidden!important;
  }
  .brandHome{display:flex!important;align-items:center!important;flex:0 1 210px!important;max-width:210px!important;min-width:0!important;text-decoration:none!important}
  .brandLogo{height:34px!important;max-width:190px!important;width:auto!important;display:block!important}
  .topbar nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;gap:8px!important;flex-wrap:nowrap!important;overflow:hidden!important;padding:0!important}
  .topbar nav a{display:none!important}
  .topbar nav button{flex:0 0 auto!important;min-height:36px!important;padding:8px 13px!important;font-size:12.5px!important;line-height:1!important;white-space:nowrap!important;border-radius:999px!important}

  .hero,main,.tableCard,.legalCard{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;box-sizing:border-box!important;padding-left:12px!important;padding-right:12px!important}
  .hero{padding-top:24px!important;padding-bottom:18px!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:18px!important}
  .privacyNote{max-width:560px!important;font-size:12.8px!important;line-height:1.32!important;padding:8px 11px!important;border-radius:14px!important}
  h1{font-size:34px!important;line-height:1.05!important}

  main{display:grid!important;grid-template-columns:minmax(420px,0.43fr) minmax(0,0.57fr)!important;gap:12px!important;align-items:start!important}
  .panel,.diagramCard{min-width:0!important;padding:16px!important;border-radius:20px!important;box-sizing:border-box!important}
  .panelHead{gap:10px!important;align-items:flex-start!important}
  .panelHead h2,.diagramHead h2{font-size:25px!important;line-height:1.12!important;letter-spacing:-.04em!important;margin:0!important}
  .panelHead .sub{font-size:14px!important;line-height:1.25!important;max-width:280px!important}
  .panelHead button{padding:12px 18px!important;font-size:14px!important;min-height:48px!important;white-space:nowrap!important}

  .row{grid-template-columns:22px minmax(190px,1fr) 92px 34px!important;gap:6px!important;align-items:center!important}
  .positionRow{grid-template-columns:22px minmax(205px,1fr) 82px 70px 34px!important;gap:6px!important;align-items:center!important}
  .row input,.positionRow input,.positionRow select{height:40px!important;min-width:0!important;font-size:16px!important;padding:8px 9px!important;box-sizing:border-box!important}
  .positionRow select{font-size:11px!important;padding-left:5px!important;padding-right:2px!important}
  .dragHandle{width:22px!important;min-width:22px!important}
  .remove,.removePos,.removeCat{width:34px!important;height:34px!important;min-width:34px!important;font-size:20px!important}

  .diagramCard{position:static!important;min-height:auto!important;overflow:visible!important}
  .diagramHead{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin-bottom:10px!important}
  .diagramHead>div:first-child{width:100%!important;min-width:0!important;display:block!important;padding-right:0!important}
  .diagramHead h2{max-width:100%!important;word-break:normal!important;hyphens:none!important}
  #hint{font-size:15px!important;line-height:1.2!important;margin-top:5px!important;max-width:100%!important}
  .diagramControls{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:minmax(118px,auto) minmax(0,1fr)!important;align-items:center!important;gap:8px!important;justify-self:stretch!important}
  .displayToggle{width:100%!important;max-width:142px!important;justify-self:start!important;display:flex!important;overflow:hidden!important}
  .displayToggle .toggle{flex:1 1 0!important;min-width:0!important;padding:7px 8px!important;font-size:12px!important;white-space:nowrap!important}
  .diagramViewControls{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:38px 38px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;justify-content:stretch!important;overflow:visible!important}
  .printBtn,.expandDiagramBtn{width:38px!important;height:34px!important;min-width:38px!important;font-size:15px!important;display:inline-grid!important;place-items:center!important;position:static!important;transform:none!important;margin:0!important;z-index:auto!important}
  .viewToggle{width:100%!important;max-width:100%!important;min-width:0!important;display:flex!important;overflow:hidden!important}
  .viewToggle .viewBtn{flex:1 1 0!important;min-width:0!important;padding:8px 7px!important;font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important}
  .statusSummary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:10px!important}
  .statusSummary .summaryBox{padding:12px 14px!important;border-radius:16px!important}
  .legend{gap:8px!important;font-size:12px!important;line-height:1.2!important;flex-wrap:wrap!important}
  .chartFrame{padding:8px 8px 18px!important;overflow:hidden!important}
  #chart{height:760px!important;min-height:760px!important;width:100%!important}

  body.diagramExpanded main{grid-template-columns:minmax(0,1fr)!important}
  body.diagramExpanded .diagramCard{grid-column:1/-1!important;width:100%!important;max-width:100%!important;position:static!important;order:2!important}
  body.diagramExpanded #chart{height:860px!important;min-height:860px!important}
}

@media (max-width:720px) and (orientation:portrait){
  .topbar{position:sticky!important;top:0!important;height:56px!important;min-height:56px!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;padding:7px 8px!important;gap:6px!important;background:#fff!important;z-index:3000!important;overflow:hidden!important;box-shadow:0 1px 0 var(--line)!important}
  .brandHome{display:flex!important;align-items:center!important;flex:0 1 136px!important;max-width:136px!important;min-width:0!important;text-decoration:none!important}
  .brandLogo{height:31px!important;max-width:132px!important;width:auto!important}
  .topbar nav{display:flex!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;justify-content:flex-end!important;align-items:center!important;gap:5px!important;flex-wrap:nowrap!important;overflow:hidden!important;padding:0!important}
  .topbar nav a{display:none!important}
  .topbar nav button{flex:0 1 auto!important;min-width:0!important;max-width:38vw!important;min-height:34px!important;padding:7px 8px!important;font-size:10.8px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;border-radius:999px!important}
  .diagramControls{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;gap:8px!important}
  .diagramViewControls{display:grid!important;grid-template-columns:40px 40px minmax(0,1fr)!important;width:100%!important;gap:6px!important;align-items:center!important}
  .viewToggle .viewBtn{font-size:12px!important;padding:8px 6px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}

/* Public RC v62: corrected iPhone landscape layout and full-width mobile header */
@media (max-width:1000px) and (orientation:landscape){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;margin:0!important;padding:0!important}
  body{background:var(--bg)!important}

  .topbar{
    position:sticky!important;top:0!important;left:0!important;right:0!important;
    width:100%!important;max-width:none!important;margin:0!important;
    height:58px!important;min-height:58px!important;
    padding:7px max(14px,env(safe-area-inset-right)) 7px max(14px,env(safe-area-inset-left))!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
    background:#fff!important;border-bottom:1px solid var(--line)!important;box-shadow:0 1px 0 var(--line)!important;
    z-index:5000!important;overflow:visible!important;box-sizing:border-box!important;
  }
  .topbar::before{content:"";position:fixed;left:0;right:0;top:0;height:58px;background:#fff;border-bottom:1px solid var(--line);z-index:-1;pointer-events:none}
  .brandHome,.brand{display:flex!important;align-items:center!important;flex:0 1 220px!important;max-width:220px!important;min-width:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;text-decoration:none!important}
  .brandLogo{height:34px!important;max-width:200px!important;width:auto!important;display:block!important}
  .topbar nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;gap:8px!important;flex-wrap:nowrap!important;overflow:hidden!important;padding:0!important}
  .topbar nav a{display:none!important}
  .topbar nav button{flex:0 0 auto!important;min-height:36px!important;padding:8px 13px!important;font-size:12.5px!important;line-height:1!important;white-space:nowrap!important;border-radius:999px!important;max-width:none!important}

  .hero,main,.tableCard,.legalCard{
    width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
    box-sizing:border-box!important;padding-left:12px!important;padding-right:12px!important;
  }
  .hero{padding-top:22px!important;padding-bottom:16px!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:18px!important}
  h1{font-size:34px!important;line-height:1.05!important}
  .privacyNote{max-width:560px!important;font-size:12.8px!important;line-height:1.32!important;padding:8px 11px!important;border-radius:14px!important}

  main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
  .panel,.diagramCard{min-width:0!important;max-width:100%!important;padding:16px!important;border-radius:20px!important;box-sizing:border-box!important}
  .panelHead{gap:10px!important;align-items:flex-start!important}
  .panelHead h2{font-size:25px!important;line-height:1.12!important;margin:0!important}
  .panelHead .sub{font-size:14px!important;line-height:1.25!important;max-width:300px!important}
  .panelHead button{padding:12px 18px!important;font-size:14px!important;min-height:48px!important;white-space:nowrap!important}

  .row{grid-template-columns:22px minmax(0,1fr) 92px 34px!important;gap:6px!important;align-items:center!important}
  .positionRow{grid-template-columns:22px minmax(0,1fr) 82px 70px 34px!important;gap:6px!important;align-items:center!important}
  .row input,.positionRow input,.positionRow select{height:40px!important;min-width:0!important;font-size:16px!important;padding:8px 9px!important;box-sizing:border-box!important}
  .positionRow select{font-size:11px!important;padding-left:5px!important;padding-right:2px!important}
  .dragHandle{width:22px!important;min-width:22px!important}
  .remove,.removePos,.removeCat{width:34px!important;height:34px!important;min-width:34px!important;font-size:20px!important}

  .diagramCard{position:static!important;min-height:auto!important;overflow:hidden!important}
  .diagramHead{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin-bottom:10px!important}
  .diagramHead>div:first-child{width:100%!important;min-width:0!important;display:block!important;padding-right:0!important}
  .diagramHead h2{font-size:24px!important;line-height:1.08!important;letter-spacing:-.04em!important;margin:0!important;max-width:100%!important;word-break:normal!important;hyphens:none!important}
  #hint{font-size:15px!important;line-height:1.22!important;margin-top:6px!important;max-width:100%!important}
  .diagramControls{width:100%!important;max-width:100%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;justify-self:stretch!important}
  .displayToggle{width:100%!important;max-width:none!important;display:flex!important;overflow:hidden!important;align-self:stretch!important}
  .displayToggle .toggle{flex:1 1 0!important;min-width:0!important;padding:7px 8px!important;font-size:12px!important;white-space:nowrap!important}
  .diagramViewControls{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:38px 38px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;justify-content:stretch!important;overflow:hidden!important}
  .printBtn,.expandDiagramBtn{width:38px!important;height:34px!important;min-width:38px!important;font-size:15px!important;display:inline-grid!important;place-items:center!important;position:static!important;transform:none!important;margin:0!important;z-index:auto!important}
  .viewToggle{width:100%!important;max-width:100%!important;min-width:0!important;display:flex!important;overflow:hidden!important}
  .viewToggle .viewBtn{flex:1 1 0!important;min-width:0!important;padding:8px 7px!important;font-size:11.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important}
  .statusSummary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:10px 0 8px!important}
  .statusCard{padding:10px 12px!important;border-radius:15px!important;min-width:0!important;overflow:hidden!important}
  .statusCard small{font-size:12px!important;line-height:1.15!important;white-space:normal!important}
  .statusCard strong{font-size:17px!important;line-height:1.15!important;white-space:nowrap!important}
  .legend{gap:8px!important;font-size:12px!important;line-height:1.2!important;flex-wrap:wrap!important;margin-bottom:8px!important}
  .chartFrame{padding:8px 8px 18px!important;overflow:hidden!important}
  #chart{height:720px!important;min-height:720px!important;width:100%!important}

  body.diagramExpanded main{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  body.diagramExpanded .panel{grid-column:1/-1!important}
  body.diagramExpanded .diagramCard{grid-column:1/-1!important;width:100%!important;max-width:100%!important;position:static!important;order:2!important;overflow:visible!important}
  body.diagramExpanded .diagramHead{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,auto)!important;align-items:start!important;gap:14px!important}
  body.diagramExpanded .diagramControls{display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:flex-end!important;gap:8px!important;width:auto!important}
  body.diagramExpanded .displayToggle{width:auto!important;min-width:180px!important;max-width:220px!important}
  body.diagramExpanded .diagramViewControls{width:auto!important;min-width:360px!important;grid-template-columns:38px 38px minmax(0,1fr)!important}
  body.diagramExpanded #chart{height:860px!important;min-height:860px!important}
}

@media (max-width:720px) and (orientation:portrait){
  .topbar{position:sticky!important;top:0!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;margin:0!important;background:#fff!important;border-bottom:1px solid var(--line)!important;box-shadow:0 1px 0 var(--line)!important;z-index:5000!important;overflow:visible!important}
  .topbar::before{content:"";position:fixed;left:0;right:0;top:0;height:56px;background:#fff;border-bottom:1px solid var(--line);z-index:-1;pointer-events:none}
}

/* Public RC v63: real fixed full-bleed mobile header; content no longer scrolls away */
@media (max-width: 1180px){
  body{padding-top:72px!important;}
  .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    height:72px!important;
    min-height:72px!important;
    padding:10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-left))!important;
    padding-right:max(16px, env(safe-area-inset-right))!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 1px 0 var(--line)!important;
    z-index:99999!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    overflow:hidden!important;
    transform:translateZ(0)!important;
    -webkit-transform:translateZ(0)!important;
  }
  .topbar::before{display:none!important;content:none!important;}
  .brandHome,.topbar .brand{flex:0 0 auto!important;min-width:0!important;display:flex!important;align-items:center!important;text-decoration:none!important;}
  .brandLogo{height:46px!important;max-width:210px!important;width:auto!important;display:block!important;}
  .topbar nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;gap:8px!important;flex-wrap:nowrap!important;overflow:hidden!important;padding:0!important;}
  .topbar nav a{display:none!important;}
  .topbar nav button{flex:0 1 auto!important;min-width:0!important;max-width:40vw!important;min-height:38px!important;padding:9px 14px!important;font-size:13px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;border-radius:999px!important;}
  .hero{padding-top:30px!important;}
}
@media (max-width: 1180px) and (orientation: landscape){
  body{padding-top:60px!important;}
  .topbar{
    height:60px!important;
    min-height:60px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
    padding-left:max(14px, env(safe-area-inset-left))!important;
    padding-right:max(14px, env(safe-area-inset-right))!important;
  }
  .brandLogo{height:44px!important;max-width:190px!important;}
  .topbar nav button{min-height:34px!important;padding:8px 12px!important;font-size:12.5px!important;max-width:34vw!important;}
  .hero{padding-top:24px!important;}
}
@media (max-width: 720px){
  body{padding-top:66px!important;}
  .topbar{height:66px!important;min-height:66px!important;}
  .brandLogo{height:42px!important;max-width:172px!important;}
  .topbar nav{gap:6px!important;}
  .topbar nav button{min-height:34px!important;padding:8px 9px!important;font-size:11px!important;max-width:35vw!important;}
}
@media (max-width: 720px) and (orientation: landscape){
  body{padding-top:56px!important;}
  .topbar{height:56px!important;min-height:56px!important;}
  .brandLogo{height:38px!important;max-width:160px!important;}
  .topbar nav button{font-size:10.5px!important;padding:7px 8px!important;max-width:32vw!important;}
}

/* Public RC v64: iOS Safari safe-area header hardening */
@media (max-width: 1180px){
  html, body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    margin:0!important;
  }
  body{
    padding-top:calc(72px + env(safe-area-inset-top, 0px))!important;
  }
  .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    height:calc(72px + env(safe-area-inset-top, 0px))!important;
    min-height:calc(72px + env(safe-area-inset-top, 0px))!important;
    padding-top:calc(10px + env(safe-area-inset-top, 0px))!important;
    padding-bottom:10px!important;
    padding-left:max(16px, env(safe-area-inset-left, 0px))!important;
    padding-right:max(16px, env(safe-area-inset-right, 0px))!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 1px 0 var(--line)!important;
    z-index:2147483000!important;
    overflow:hidden!important;
    transform:none!important;
    -webkit-transform:none!important;
    contain:none!important;
  }
  .topbar::before{
    content:""!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    height:calc(72px + env(safe-area-inset-top, 0px))!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    z-index:-1!important;
    pointer-events:none!important;
    display:block!important;
  }
  .hero{
    padding-top:34px!important;
    scroll-margin-top:calc(92px + env(safe-area-inset-top, 0px))!important;
  }
  main,.tableCard,.legalCard{
    scroll-margin-top:calc(92px + env(safe-area-inset-top, 0px))!important;
  }
}
@media (max-width: 1180px) and (orientation: landscape){
  body{
    padding-top:calc(68px + env(safe-area-inset-top, 0px))!important;
  }
  .topbar{
    height:calc(68px + env(safe-area-inset-top, 0px))!important;
    min-height:calc(68px + env(safe-area-inset-top, 0px))!important;
    padding-top:calc(8px + env(safe-area-inset-top, 0px))!important;
    padding-bottom:8px!important;
    padding-left:max(18px, env(safe-area-inset-left, 0px))!important;
    padding-right:max(18px, env(safe-area-inset-right, 0px))!important;
  }
  .topbar::before{
    height:calc(68px + env(safe-area-inset-top, 0px))!important;
  }
  .brandLogo{height:44px!important;max-width:205px!important;}
  .topbar nav button{min-height:36px!important;padding:8px 13px!important;font-size:12.5px!important;}
  .hero{padding-top:38px!important;}
}
@media (max-width: 720px){
  body{padding-top:calc(66px + env(safe-area-inset-top, 0px))!important;}
  .topbar{
    height:calc(66px + env(safe-area-inset-top, 0px))!important;
    min-height:calc(66px + env(safe-area-inset-top, 0px))!important;
  }
  .topbar::before{height:calc(66px + env(safe-area-inset-top, 0px))!important;}
}

/* Public RC v65: iOS full-bleed fixed header and safe modal placement */
@media (max-width:1180px){
  html,body{
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .topbar{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    margin:0!important;
    transform:translate3d(-50%,0,0)!important;
    -webkit-transform:translate3d(-50%,0,0)!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    z-index:2147483000!important;
    overflow:hidden!important;
  }
  .topbar::before,.topbar::after{display:none!important;content:none!important;}
  .modalBackdrop{
    z-index:2147483600!important;
    position:fixed!important;
    inset:0!important;
    padding:calc(18px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .modalBackdrop.open{display:flex!important;}
  .modal{
    margin:0 auto!important;
    width:min(560px,100%)!important;
    max-height:calc(100dvh - 36px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}
@media (max-width:720px){
  .topbar{
    height:calc(74px + env(safe-area-inset-top,0px))!important;
    min-height:calc(74px + env(safe-area-inset-top,0px))!important;
    padding-top:calc(12px + env(safe-area-inset-top,0px))!important;
    padding-bottom:10px!important;
    padding-left:max(14px,env(safe-area-inset-left,0px))!important;
    padding-right:max(14px,env(safe-area-inset-right,0px))!important;
  }
  body{padding-top:calc(74px + env(safe-area-inset-top,0px))!important;}
}
@media (max-width:1180px) and (orientation:landscape){
  .topbar{
    height:calc(64px + env(safe-area-inset-top,0px))!important;
    min-height:calc(64px + env(safe-area-inset-top,0px))!important;
    padding-top:calc(8px + env(safe-area-inset-top,0px))!important;
    padding-bottom:8px!important;
    padding-left:max(18px,env(safe-area-inset-left,0px))!important;
    padding-right:max(18px,env(safe-area-inset-right,0px))!important;
  }
  body{padding-top:calc(64px + env(safe-area-inset-top,0px))!important;}
  .modalBackdrop{
    padding-top:calc(14px + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
  }
  .modal{max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;}
}

/* Public RC v66: final mobile header bleed, action row and responsive controls */
@media (max-width:1180px){
  .topbar{
    left:0!important;
    right:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    transform:none!important;
    -webkit-transform:none!important;
    overflow:visible!important;
    background:transparent!important;
    border-bottom:0!important;
    padding-left:max(18px,env(safe-area-inset-left,0px))!important;
    padding-right:max(18px,env(safe-area-inset-right,0px))!important;
  }
  .topbar::before{
    content:""!important;
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:calc(-1 * env(safe-area-inset-left,0px))!important;
    right:calc(-1 * env(safe-area-inset-right,0px))!important;
    width:auto!important;
    height:inherit!important;
    min-height:inherit!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    z-index:-1!important;
    pointer-events:none!important;
  }
  .topbar::after{
    content:""!important;
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:-100vw!important;
    right:-100vw!important;
    height:inherit!important;
    min-height:inherit!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    z-index:-2!important;
    pointer-events:none!important;
  }
}
@media (max-width:1180px) and (orientation:landscape){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(300px,36vw)!important;
    gap:24px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .privacyNote{max-width:760px!important;}
  .actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    width:100%!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .actions button,.actions .fileLabel{
    width:auto!important;
    max-width:none!important;
    flex:0 0 auto!important;
    min-width:max-content!important;
    padding:11px 16px!important;
    font-size:14px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .actions .qrBtn{gap:8px!important;}
}
@media (max-width:720px) and (orientation:portrait){
  .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .actions button,.actions .fileLabel{width:100%!important;min-width:0!important;max-width:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
}

/* Table follows the global € / % / €/% switch */
.flowTable[data-display-mode="eur"] .tableCell.percent{display:none!important;}
.flowTable[data-display-mode="pct"] .tableCell.amount{display:none!important;}
.flowTable[data-display-mode="eur"] .tableRows{grid-template-columns:minmax(0,1fr) 180px!important;}
.flowTable[data-display-mode="pct"] .tableRows{grid-template-columns:minmax(0,1fr) 120px!important;}
.flowTable[data-display-mode="both"] .tableRows{grid-template-columns:minmax(0,1fr) 180px 120px!important;}
.flowTable[data-display-mode="eur"] .tableCell.amount,
.flowTable[data-display-mode="pct"] .tableCell.percent{display:block!important;}
.tableControls{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:8px!important;}
.tableControls .printBtn{align-self:flex-end!important;}
@media(max-width:720px){
  .flowTable[data-display-mode="eur"] .tableRows{grid-template-columns:minmax(0,1fr) 118px!important;}
  .flowTable[data-display-mode="pct"] .tableRows{grid-template-columns:minmax(0,1fr) 82px!important;}
  .flowTable[data-display-mode="both"] .tableRows{grid-template-columns:minmax(0,1fr) 112px 72px!important;}
}

/* v73: kompaktere Eingabelisten nur in mobiler Portrait-Ansicht */
@media (max-width: 767px) and (orientation: portrait) {
  .panel{padding:18px!important;border-radius:22px!important}
  .panelHead{gap:10px!important;margin-bottom:12px!important}
  .panelHead h2{font-size:24px!important;line-height:1.08!important}
  .sub{font-size:15px!important;line-height:1.35!important}
  .incomeCard{padding:10px!important;border-radius:16px!important}
  .list{gap:8px!important}
  .category{border-radius:16px!important}
  .category summary{grid-template-columns:24px minmax(0,1fr) auto 36px!important;gap:8px!important;padding:10px!important}
  .positions{gap:8px!important;padding:10px 10px 8px 16px!important}
  .row{grid-template-columns:22px minmax(0,1fr) 96px 36px!important;gap:7px!important}
  .positionRow{grid-template-columns:22px minmax(0,1fr) 94px 36px!important;gap:7px!important;padding:8px!important;border-radius:16px!important;align-items:center!important}
  .positionRow select{grid-column:2 / 4!important;margin-top:4px!important}
  input,select,.row input,.positionRow input,.positionRow select{font-size:16px!important;min-height:44px!important;height:44px!important;padding:9px 10px!important;border-radius:14px!important;line-height:1.15!important}
  .catName,.posName,.positionRow input:first-of-type{font-weight:750!important}
  .remove,.removePos,.removeCat{width:36px!important;height:36px!important;min-width:36px!important;font-size:20px!important}
  .dragHandle{width:22px!important;height:44px!important;font-size:16px!important}
  .addPosition{margin-left:16px!important;padding:9px 14px!important;font-size:14px!important}
}

/* v74: mobile table/control refinements */
@media (max-width: 720px) and (orientation: portrait) {
  .tableControls{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  .tableControls .printBtn{
    align-self:flex-end!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
  .tableControls .tableToggle,
  .tableControls .viewToggle{
    align-self:flex-end!important;
    margin-left:auto!important;
    margin-right:0!important;
    width:auto!important;
    max-width:100%!important;
  }
  .tableCard .expandDiagramBtn,
  .tableControls .expandDiagramBtn,
  .diagramCard .expandDiagramBtn{
    display:none!important;
  }
}

@media (max-width: 1000px) and (orientation: landscape) {
  .tableCard{padding:18px!important}
  .tableHead h2{font-size:24px!important;line-height:1.1!important}
  .tableHead p{font-size:15px!important;line-height:1.3!important}
  .tableSectionTitle{font-size:12px!important;letter-spacing:.10em!important;margin-bottom:6px!important}
  .tableRow{grid-template-columns:minmax(0,1fr) 128px 78px!important}
  .flowTable[data-display-mode="eur"] .tableRows,
  .flowTable[data-display-mode="eur"] .tableRow{grid-template-columns:minmax(0,1fr) 128px!important}
  .flowTable[data-display-mode="pct"] .tableRows,
  .flowTable[data-display-mode="pct"] .tableRow{grid-template-columns:minmax(0,1fr) 78px!important}
  .flowTable[data-display-mode="both"] .tableRows,
  .flowTable[data-display-mode="both"] .tableRow{grid-template-columns:minmax(0,1fr) 128px 78px!important}
  .tableCell{font-size:14px!important;line-height:1.22!important;padding:9px 0!important}
  .tableCell.amount,.tableCell.percent{font-size:14px!important;padding-left:8px!important;white-space:nowrap!important}
  .tableRow.sum .tableCell{font-size:14px!important;letter-spacing:.04em!important}
  .tableSpacer{height:18px!important}
  .flowTable{padding:16px!important}
}

/* v75: iOS Safari footer safe-area spacing for mobile portrait */
@media (max-width: 767px) and (orientation: portrait) {
  .footerNav {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* v76: mobile portrait category/editor layout cleanup */
@media (max-width: 767px) and (orientation: portrait) {
  /* Diagram toolbar: no expand button in portrait, clean two-row controls */
  .diagramCard .expandDiagramBtn,
  #expandDiagramBtn{
    display:none!important;
  }
  .diagramControls{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:10px!important;
  }
  .displayToggle{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:4px!important;
  }
  .displayToggle .toggle{
    width:100%!important;
    min-width:0!important;
    text-align:center!important;
    padding:9px 8px!important;
    font-size:15px!important;
  }
  .diagramViewControls{
    width:100%!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
  }
  .diagramViewControls .printBtn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:999px!important;
    margin:0!important;
    align-self:center!important;
  }
  .diagramViewControls .viewToggle{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
  }
  .diagramViewControls .viewBtn{
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    padding:9px 8px!important;
    font-size:13px!important;
  }
  .mobileLandscapeHint{
    font-size:14px!important;
    padding:10px 12px!important;
    margin-top:2px!important;
  }

  /* Category header: give names room and move saving potential to a separate, compact right block */
  .category summary{
    grid-template-columns:22px minmax(0,1fr) 40px 36px!important;
    grid-template-areas:
      "drag name edit remove"
      ". total total total"!important;
    align-items:center!important;
    gap:7px!important;
    padding:10px!important;
  }
  .category summary > .dragHandle{grid-area:drag!important;align-self:center!important}
  .category summary > .catName{grid-area:name!important;min-width:0!important;font-size:15px!important;height:42px!important;min-height:42px!important;font-weight:800!important}
  .category summary > .editCat{grid-area:edit!important;width:36px!important;height:36px!important;min-width:36px!important;padding:0!important}
  .category summary > .removeCat{grid-area:remove!important}
  .category summary > .catTotal{
    grid-area:total!important;
    justify-self:end!important;
    text-align:right!important;
    font-size:14px!important;
    max-width:100%!important;
    white-space:normal!important;
    line-height:1.2!important;
    color:var(--green)!important;
    margin-top:2px!important;
  }
  .catTotal .potential{
    display:inline!important;
    margin-left:8px!important;
    margin-top:0!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  /* Position rows: first line name + amount, second line priority + delete */
  .positions{padding:8px 10px 8px 12px!important;gap:7px!important}
  .positionRow{
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr) 96px 36px!important;
    grid-template-areas:
      "drag name amount remove"
      ". priority priority remove"!important;
    gap:6px 7px!important;
    align-items:center!important;
    padding:7px!important;
    border-radius:14px!important;
  }
  .positionRow > .dragHandle{grid-area:drag!important;align-self:center!important}
  .positionRow > .posName,
  .positionRow > input:first-of-type{
    grid-area:name!important;
    min-width:0!important;
    font-size:15px!important;
    height:42px!important;
    min-height:42px!important;
    padding:8px 9px!important;
    font-weight:700!important;
  }
  .positionRow > input[type="number"],
  .positionRow > input.amountInput,
  .positionRow > input:nth-of-type(2){
    grid-area:amount!important;
    min-width:0!important;
    font-size:15px!important;
    height:42px!important;
    min-height:42px!important;
    padding:8px 9px!important;
    font-weight:500!important;
  }
  .positionRow > select{
    grid-area:priority!important;
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    font-size:15px!important;
    padding:8px 10px!important;
    margin-top:0!important;
  }
  .positionRow > .removePos{
    grid-area:remove!important;
    align-self:center!important;
    justify-self:center!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }
  .row input{font-size:15px!important;height:42px!important;min-height:42px!important}
}

/* v76: compact table typography in mobile landscape */
@media (max-width: 1000px) and (orientation: landscape) {
  .tableCard{padding:16px!important;margin-left:12px!important;margin-right:12px!important}
  .flowTable{padding:14px!important;border-radius:18px!important}
  .tableSectionTitle{font-size:11px!important;letter-spacing:.10em!important;margin-bottom:4px!important}
  .tableCell{font-size:13px!important;line-height:1.18!important;padding:7px 0!important}
  .tableCell.amount,.tableCell.percent{font-size:13px!important;padding-left:6px!important}
  .tableRow.sum .tableCell{font-size:13px!important;letter-spacing:.04em!important}
  .tableSpacer{height:14px!important}
  .tableHead h2{font-size:22px!important}
  .tableHead p{font-size:13px!important}
}

/* v77: keep iOS landscape header full-bleed, but constrain page content to the safe area */
@media (max-width: 1000px) and (orientation: landscape) {
  body > .hero,
  body > main,
  body > .tableCard,
  body > .legalCard {
    width: auto !important;
    max-width: none !important;
    margin-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body > main {
    grid-template-columns: minmax(380px, .48fr) minmax(0, .52fr) !important;
    gap: 16px !important;
  }

  .diagramExpanded body > main,
  body.diagramExpanded > main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .panel,
  .diagramCard,
  .tableCard,
  .legalCard {
    max-width: 100% !important;
  }

  .diagramCard {
    min-width: 0 !important;
  }
}

/* v79: repair responsive landscape editor; keep v77 layout, no duplicate category badge */
@media (max-width: 1000px) and (orientation: landscape) {
  /* Preserve header/full-bleed behavior from v77 and only reorganize editor rows. */
  body > main {
    grid-template-columns: minmax(390px, .48fr) minmax(0, .52fr) !important;
    gap: 16px !important;
  }

  .panel,
  .diagramCard,
  .incomeCard,
  .category,
  .positionRow {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Category header: no second fake input/badge; use same logic as portrait.
     Category name gets the full first line, totals/potential move to second line. */
  .category summary {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 36px 34px !important;
    grid-template-areas:
      "drag name edit remove"
      ". total total total" !important;
    align-items: center !important;
    gap: 7px 8px !important;
    padding: 9px 10px !important;
  }

  .category summary::before {
    content: none !important;
    display: none !important;
  }

  .category summary > .dragHandle {
    grid-area: drag !important;
    align-self: center !important;
  }

  .category summary > .catName {
    grid-area: name !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .category summary > .editCat {
    grid-area: edit !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    justify-self: center !important;
  }

  .category summary > .removeCat {
    grid-area: remove !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    justify-self: center !important;
  }

  .category summary > .catTotal {
    grid-area: total !important;
    justify-self: end !important;
    max-width: 100% !important;
    text-align: right !important;
    font-size: 13px !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    color: var(--green) !important;
    margin-top: 0 !important;
  }

  .category summary > .catTotal .potential {
    display: inline !important;
    margin-left: 8px !important;
    margin-top: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .positions {
    padding: 8px 10px 8px 12px !important;
    gap: 7px !important;
  }

  /* Positions: same principle as portrait. Name and amount first row,
     priority gets a full second row so names stay readable. */
  .positionRow {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 92px 34px !important;
    grid-template-areas:
      "drag name amount remove"
      ". priority priority remove" !important;
    align-items: center !important;
    gap: 6px 7px !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }

  .positionRow > .dragHandle {
    grid-area: drag !important;
    align-self: center !important;
  }

  .positionRow > .posName,
  .positionRow > input:first-of-type {
    grid-area: name !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 7px 9px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .positionRow > input[type="number"],
  .positionRow > input.amountInput,
  .positionRow > input:nth-of-type(2) {
    grid-area: amount !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 7px 9px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .positionRow > select {
    grid-area: priority !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 7px 9px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
  }

  .positionRow > .removePos {
    grid-area: remove !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .addPosition {
    margin-left: 12px !important;
  }
}

/* v80: fix inner spacing of table view in responsive landscape */
@media (max-width: 1000px) and (orientation: landscape) {
  body > .tableCard {
    padding: 22px 26px 24px !important;
    box-sizing: border-box !important;
  }

  .tableCard .tableHead {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .tableCard .tableHead > div:first-child {
    min-width: 0 !important;
    padding-left: 0 !important;
  }

  .tableCard .tableControls {
    justify-self: end !important;
    align-items: flex-end !important;
    margin: 0 !important;
    max-width: min(420px, 48vw) !important;
  }

  .tableCard .flowTable {
    width: 100% !important;
    padding: 18px 22px 20px !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }

  .tableCard .tableCell:first-child,
  .tableCard .tableSectionTitle {
    padding-left: 0 !important;
  }
}

/* v81: restore readable inner spacing on footer content pages in mobile landscape */
@media (max-width: 1000px) and (orientation: landscape) {
  body > .legalCard {
    padding: 24px 28px 26px !important;
    margin-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .legalCard h2,
  .legalCard h3,
  .legalCard p,
  .legalCard details {
    max-width: 100% !important;
  }
}


/* v82: dynamic Sankey height without breaking mobile layouts.
   The CSS variable is written by app.js in commonPlot(). */
#chart{height:var(--sanky-chart-height,820px)!important;min-height:var(--sanky-chart-height,820px)!important;}
body.diagramExpanded #chart{height:var(--sanky-chart-expanded-height,var(--sanky-chart-height,980px))!important;min-height:var(--sanky-chart-expanded-height,var(--sanky-chart-height,980px))!important;}
.chartFrame{overflow:visible!important;}
.diagramCard{overflow:visible!important;}
@media (max-width:1180px){.diagramCard{position:static!important;height:auto!important;}}
@media (max-width:1180px) and (orientation:landscape){.chartFrame{overflow:visible!important;}.diagramCard{min-width:0!important;}}
@media (max-width:720px) and (orientation:portrait){.chartFrame{overflow:visible!important;}.diagramCard{min-width:0!important;}}

/* v83: iOS Safari input focus zoom fix */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1024px) {
    input,
    select,
    textarea,
    .row input,
    .positionRow input,
    .positionRow select,
    .modal input,
    .modal textarea,
    .qrBaseUrl,
    .catName,
    .posName,
    .posValue,
    .posStatus,
    .name,
    .value {
      font-size: 16px !important;
      -webkit-text-size-adjust: 100%;
    }
  }
}
html, body {
  -webkit-text-size-adjust: 100%;
}

/* v84: keep iOS no-zoom while making mobile portrait editor visually compact again */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) and (orientation: portrait) {
    .category summary > .catName,
    .positionRow > .posName,
    .positionRow > input:first-of-type,
    .positionRow > .posValue,
    .positionRow > input[type="number"],
    .positionRow > .posStatus,
    .row.incomeRow > input {
      font-size: 16px !important;
      line-height: 1.1 !important;
      padding-top: 7px !important;
      padding-bottom: 7px !important;
      min-height: 40px !important;
      height: 40px !important;
    }
    .positionRow > .posName,
    .positionRow > input:first-of-type,
    .category summary > .catName {
      font-weight: 400 !important;
      letter-spacing: -0.02em !important;
    }
    .positionRow > .posValue,
    .positionRow > input[type="number"] {
      font-weight: 650 !important;
      letter-spacing: -0.02em !important;
    }
    .positionRow{
      gap:5px 7px!important;
      padding:6px!important;
    }
    .positions{gap:6px!important;}

    /* Keep category sum and saving potential on one controlled line. */
    .category summary > .catTotal{
      display:flex!important;
      justify-content:flex-end!important;
      align-items:baseline!important;
      gap:7px!important;
      flex-wrap:nowrap!important;
      white-space:nowrap!important;
      font-size:13px!important;
      line-height:1.15!important;
      max-width:100%!important;
      overflow:hidden!important;
      text-overflow:clip!important;
    }
    .catTotal .potential{
      display:inline-flex!important;
      align-items:baseline!important;
      gap:3px!important;
      margin:0!important;
      font-size:12px!important;
      line-height:1.15!important;
      white-space:nowrap!important;
      flex:0 1 auto!important;
      min-width:0!important;
    }
  }
}


/* v85: category sum and saving potential are two clean lines again; hide potential when zero via app.js */
.category summary > .catTotal{
  display:block!important;
  line-height:1.16!important;
  white-space:normal!important;
}
.category summary > .catTotal .catTotalSum{
  display:block!important;
  white-space:nowrap!important;
}
.category summary > .catTotal .potential{
  display:block!important;
  margin:4px 0 0 0!important;
  white-space:nowrap!important;
}
@media (max-width:720px) and (orientation: portrait){
  .category summary > .catTotal{
    display:block!important;
    text-align:right!important;
    line-height:1.16!important;
    white-space:normal!important;
  }
  .category summary > .catTotal .catTotalSum{
    display:block!important;
    white-space:nowrap!important;
  }
  .category summary > .catTotal .potential{
    display:block!important;
    margin-top:4px!important;
    white-space:nowrap!important;
  }
}
@media (max-width:1000px) and (orientation: landscape){
  .category summary > .catTotal{
    display:block!important;
    text-align:right!important;
    line-height:1.16!important;
    white-space:normal!important;
  }
  .category summary > .catTotal .catTotalSum{
    display:block!important;
    white-space:nowrap!important;
  }
  .category summary > .catTotal .potential{
    display:block!important;
    margin-top:3px!important;
    white-space:nowrap!important;
  }
}


/* v87: calmer typography for cost positions and category headings */
.positionRow > .posName,
.positionRow > input.posName,
.positionRow > input:first-of-type {
  font-weight: 400 !important;
}

.positionRow.status-required .posName,
.positionRow.status-required input.posName,
.positionRow.status-required input:first-of-type,
.positionRow.status-reduce .posName,
.positionRow.status-reduce input.posName,
.positionRow.status-reduce input:first-of-type,
.positionRow.status-cut .posName,
.positionRow.status-cut input.posName,
.positionRow.status-cut input:first-of-type {
  font-weight: 400 !important;
}

.category summary > .catName,
.category summary input.catName {
  font-weight: 600 !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .positionRow > .posName,
  .positionRow > input.posName,
  .positionRow > input:first-of-type {
    font-weight: 400 !important;
  }

  .category summary > .catName,
  .category summary input.catName {
    font-weight: 600 !important;
  }
}

@media (max-width: 1000px) and (orientation: landscape) {
  .positionRow > .posName,
  .positionRow > input.posName,
  .positionRow > input:first-of-type {
    font-weight: 400 !important;
  }

  .category summary > .catName,
  .category summary input.catName {
    font-weight: 600 !important;
  }
}

/* v88: make position value fields and priority selects regular weight */
.positionRow > input.posValue,
.positionRow > .posValue,
.positionRow > input[type="number"],
.positionRow > input:nth-of-type(2),
.positionRow select.posStatus,
.positionRow > select,
.positionRow select.posStatus option,
.positionRow > select option {
  font-weight: 400 !important;
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 1024px) {
    .positionRow > input.posValue,
    .positionRow > .posValue,
    .positionRow > input[type="number"],
    .positionRow > input:nth-of-type(2),
    .positionRow select.posStatus,
    .positionRow > select,
    .positionRow select.posStatus option,
    .positionRow > select option {
      font-weight: 400 !important;
    }
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .positionRow > input.posValue,
  .positionRow > .posValue,
  .positionRow > input[type="number"],
  .positionRow > input:nth-of-type(2),
  .positionRow select.posStatus,
  .positionRow > select {
    font-weight: 400 !important;
  }
}

@media (max-width: 1000px) and (orientation: landscape) {
  .positionRow > input.posValue,
  .positionRow > .posValue,
  .positionRow > input[type="number"],
  .positionRow > input:nth-of-type(2),
  .positionRow select.posStatus,
  .positionRow > select {
    font-weight: 400 !important;
  }
}


/* v89: Sankey vertical zoom controls */
.zoomBtn{
  border:1px solid var(--line);
  background:#eef3f0;
  color:var(--ink);
  box-shadow:none;
  width:38px;
  height:38px;
  padding:0;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  font-weight:800;
}
.zoomBtn:hover{background:#e5ece8;filter:none;transform:none}
.zoomBtn:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:720px) and (orientation:portrait){
  .diagramViewControls{grid-template-columns:40px 40px 40px 40px minmax(0,1fr)!important;}
  .zoomBtn{width:40px!important;height:36px!important;font-size:18px!important;}
}
@media (max-width:1000px) and (orientation:landscape){
  .diagramViewControls{grid-template-columns:38px 38px 38px 38px minmax(0,1fr)!important;}
  .zoomBtn{width:38px!important;height:34px!important;min-width:38px!important;font-size:18px!important;}
}


/* v90: desktop/tablet expand is available; mobile portrait hides it because the layout is already one-column */
.expandDiagramBtn{
  display:inline-grid!important;
}
body.diagramExpanded .expandDiagramBtn{
  background:var(--blue)!important;
  color:#fff!important;
  border-color:var(--blue)!important;
  font-size:22px!important;
}
body.diagramExpanded main{
  grid-template-columns:minmax(0,1fr)!important;
}
body.diagramExpanded main > .panel{
  display:none!important;
}
body.diagramExpanded .diagramCard{
  grid-column:1/-1!important;
  width:100%!important;
  max-width:100%!important;
  position:static!important;
  top:auto!important;
  min-height:auto!important;
}
body.diagramExpanded .chartFrame,
body.diagramExpanded .diagramCard{
  overflow:visible!important;
}
body.diagramExpanded #chart{
  height:var(--sanky-chart-expanded-height,var(--sanky-chart-height,980px))!important;
  min-height:var(--sanky-chart-expanded-height,var(--sanky-chart-height,980px))!important;
}
@media (max-width:720px) and (orientation:portrait){
  .diagramCard .expandDiagramBtn,
  #expandDiagramBtn{
    display:none!important;
  }
}
@media (min-width:1181px){
  .diagramViewControls{
    display:grid!important;
    grid-template-columns:38px 38px 38px 38px minmax(0,auto)!important;
    gap:8px!important;
    align-items:center!important;
    justify-content:end!important;
  }
  .printBtn,.expandDiagramBtn,.zoomBtn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
}


/* v91: expand navigation and mobile portrait diagram controls cleanup */
@media (max-width:720px) and (orientation:portrait){
  .diagramControls{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .diagramViewControls{
    display:grid!important;
    grid-template-columns:44px 44px 44px!important;
    grid-template-areas:
      "zoomout zoomin print"
      "view view view"!important;
    justify-content:start!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
  }
  #expandDiagramBtn{display:none!important;}
  #zoomOutBtn{grid-area:zoomout!important;}
  #zoomInBtn{grid-area:zoomin!important;}
  #printDiagramBtn{grid-area:print!important;}
  .diagramViewControls .viewToggle{
    grid-area:view!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  .diagramViewControls .viewBtn{
    width:100%!important;
    min-width:0!important;
    padding:9px 8px!important;
    font-size:13px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
  }
  .printBtn,.zoomBtn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    font-size:18px!important;
  }
}

/* v92: robust expanded diagram controls and responsive-landscape expand behavior */
/* Keep desktop/tablet expanded mode useful, but never let controls overflow the card. */
.diagramControls,
.diagramViewControls,
.displayToggle,
.viewToggle{
  min-width:0!important;
}
.diagramViewControls{
  flex-wrap:wrap!important;
  overflow:visible!important;
}
.viewToggle{
  max-width:100%!important;
}
.viewToggle .viewBtn{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media (min-width: 1001px) and (max-width: 1380px){
  .diagramHead{
    display:grid!important;
    grid-template-columns:minmax(220px,1fr) minmax(0,auto)!important;
    align-items:start!important;
    gap:16px!important;
  }
  .diagramControls{
    justify-self:end!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:10px!important;
    max-width:min(720px, 58vw)!important;
  }
  .displayToggle{
    max-width:100%!important;
  }
  .diagramViewControls{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:8px!important;
    max-width:100%!important;
  }
  .diagramViewControls .viewToggle{
    flex:1 1 310px!important;
    max-width:380px!important;
  }
  .diagramViewControls .viewBtn{
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:13px!important;
  }
}

@media (min-width: 1181px){
  body.diagramExpanded .diagramHead{
    display:grid!important;
    grid-template-columns:minmax(260px,1fr) minmax(0,auto)!important;
    align-items:start!important;
    gap:18px!important;
  }
  body.diagramExpanded .diagramControls{
    justify-self:end!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:10px!important;
    max-width:min(780px, 62vw)!important;
  }
  body.diagramExpanded .diagramViewControls{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:wrap!important;
    max-width:100%!important;
  }
  body.diagramExpanded .displayToggle{
    max-width:260px!important;
  }
  body.diagramExpanded .viewToggle{
    flex:1 1 330px!important;
    max-width:430px!important;
  }
}

/* In responsive landscape there is no visible top-nav "Eingaben" link. Therefore expand should not hide inputs.
   It puts the diagram below the input panel, full width, like the previous mobile-landscape behavior. */
@media (max-width: 1000px) and (orientation: landscape){
  body.diagramExpanded > main{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  body.diagramExpanded main > .panel{
    display:block!important;
    grid-column:1/-1!important;
    order:1!important;
  }
  body.diagramExpanded .diagramCard{
    display:block!important;
    grid-column:1/-1!important;
    order:2!important;
    width:100%!important;
    max-width:100%!important;
    position:static!important;
    min-height:auto!important;
  }
  body.diagramExpanded .diagramHead{
    display:grid!important;
    grid-template-columns:minmax(220px,1fr) minmax(0,auto)!important;
    align-items:start!important;
    gap:12px!important;
  }
  body.diagramExpanded .diagramControls{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:auto!important;
    max-width:min(560px, 58vw)!important;
  }
  body.diagramExpanded .displayToggle{
    width:auto!important;
    max-width:220px!important;
    align-self:flex-end!important;
  }
  body.diagramExpanded .diagramViewControls{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    width:auto!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  body.diagramExpanded .viewToggle{
    flex:1 1 260px!important;
    max-width:330px!important;
    min-width:240px!important;
  }
  body.diagramExpanded .viewToggle .viewBtn{
    font-size:12px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  body.diagramExpanded #chart{
    height:var(--sanky-chart-expanded-height,var(--sanky-chart-height,860px))!important;
    min-height:var(--sanky-chart-expanded-height,var(--sanky-chart-height,860px))!important;
  }
}

/* Very narrow landscape: put controls below the title instead of squeezing them beside it. */
@media (max-width: 820px) and (orientation: landscape){
  body.diagramExpanded .diagramHead,
  .diagramHead{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  body.diagramExpanded .diagramControls,
  .diagramControls{
    width:100%!important;
    max-width:100%!important;
    align-items:stretch!important;
  }
  body.diagramExpanded .displayToggle,
  .displayToggle{
    width:100%!important;
    max-width:none!important;
  }
  body.diagramExpanded .diagramViewControls,
  .diagramViewControls{
    width:100%!important;
    justify-content:flex-start!important;
  }
  body.diagramExpanded .viewToggle,
  .viewToggle{
    flex:1 1 100%!important;
    min-width:0!important;
    max-width:none!important;
  }
}

/* v93: keep table toggle independent from expanded diagram state and tighten desktop diagram toggle */
/* The generic .viewToggle rules from diagram expanded mode must not affect the table controls. */
.tableCard .tableControls,
body.diagramExpanded .tableCard .tableControls{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:8px!important;
  max-width:100%!important;
}
.tableCard .tableControls .tableToggle,
body.diagramExpanded .tableCard .tableControls .tableToggle{
  width:auto!important;
  min-width:0!important;
  max-width:min(100%, 420px)!important;
  height:44px!important;
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  padding:4px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
  transform:none!important;
}
.tableCard .tableControls .tableToggle .viewBtn,
body.diagramExpanded .tableCard .tableControls .tableToggle .viewBtn{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:132px!important;
  max-width:190px!important;
  height:36px!important;
  min-height:36px!important;
  padding:8px 16px!important;
  font-size:13px!important;
  line-height:1!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  transform:none!important;
}

/* On desktop/intermediate widths the diagram view toggle should size to its content,
   not stretch with a long pale background after "Nach Optimierung". */
@media (min-width:1001px){
  .diagramCard .diagramViewControls{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:auto!important;
    max-width:100%!important;
    flex-wrap:wrap!important;
  }
  .diagramCard .diagramViewControls .viewToggle{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:4px!important;
    padding:4px!important;
    border-radius:999px!important;
    overflow:hidden!important;
  }
  .diagramCard .diagramViewControls .viewToggle .viewBtn{
    flex:0 0 auto!important;
    min-width:0!important;
    width:auto!important;
    padding:9px 22px!important;
    font-size:14px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  body.diagramExpanded .diagramCard .diagramViewControls .viewToggle{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:100%!important;
  }
}

/* Responsive landscape: table toggle remains compact even while the diagram is expanded. */
@media (max-width:1000px) and (orientation:landscape){
  .tableCard .tableControls .tableToggle,
  body.diagramExpanded .tableCard .tableControls .tableToggle{
    width:auto!important;
    max-width:min(100%, 360px)!important;
    height:42px!important;
    min-height:42px!important;
  }
  .tableCard .tableControls .tableToggle .viewBtn,
  body.diagramExpanded .tableCard .tableControls .tableToggle .viewBtn{
    min-width:120px!important;
    max-width:170px!important;
    height:34px!important;
    min-height:34px!important;
    padding:7px 13px!important;
    font-size:12px!important;
  }
}