
:root {
  --bg: #f3f3f4;
  --panel: #ffffff;
  --text: #1f2329;
  --muted: #686d76;
  --line: #dedee3;
  --lime: #CBD300;
  --lime-soft: #efefd9;
  --grey: #4B4B4D;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --shadow: 0 8px 24px rgba(0,0,0,0.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.app { max-width: none; width: 100%; margin: 0; padding: 22px 18px; }
.hero {
  width: 100%;
  margin: 0;
  background: radial-gradient(circle at top left, rgba(203,211,0,0.12), transparent 24%), linear-gradient(120deg, #1b1d22 0%, #343740 100%);
  color: white;
  border-radius: 32px;
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero__top { display: flex; gap: 24px; align-items: stretch; justify-content: space-between; flex-wrap: wrap; }
.hero__brand { display: flex; flex-direction: column; gap: 18px; max-width: 980px; flex: 1 1 760px; }
.hero__logo { width: min(580px, 100%); }
.hero__badge {
  display: inline-flex; align-items: center; width: fit-content; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); color: var(--lime); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 0.95rem;
}
.hero h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 0.95; }
.hero p { margin: 0; max-width: 980px; color: rgba(255,255,255,0.88); font-size: 1.22rem; line-height: 1.5; }
.hero__actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; justify-content: flex-end; align-self: stretch; min-width: 320px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.btn {
  border: 0; cursor: pointer; border-radius: 18px; padding: 14px 18px; font-weight: 800; font-size: 0.98rem; transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--lime); color: var(--grey); }
.btn--ghost { background: rgba(255,255,255,0.09); color: white; border: 1px solid rgba(255,255,255,0.15); }
.btn--outline { background: transparent; color: var(--lime); border: 1px solid rgba(203,211,0,.4); }
.btn--soft { background: var(--panel); color: var(--grey); border: 1px solid var(--line); }
.lang-switch { display: flex; gap: 10px; }
.flag-link {
  width: 56px; height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); display: grid; place-items: center;
}
.flag-link img { width: 34px; height: auto; }
.back-link { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 18px; border-radius: 18px; font-weight: 800; font-size: 0.98rem; color: white; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15); }
.back-link:hover { transform: translateY(-1px); }
.meta-note { color: rgba(255,255,255,0.72); font-size: .95rem; max-width: 360px; text-align: right; }
.meta-note:empty { display: none; }
.layout { margin-top: 24px; display: grid; gap: 24px; width: 100%; }
.section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.section__header { padding: 22px 24px 0; display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; }
.section__header h2 { margin: 0; font-size: 1.8rem; }
.section__body { padding: 22px 24px 24px; }
.company-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.input-card { background: #fafafa; border: 1px solid var(--line); border-radius: 22px; padding: 16px 16px 14px; }
.input-card label { display: block; font-size: .95rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.input-card input { width: 100%; border-radius: 14px; border: 1px solid var(--line); padding: 12px 14px; font-size: 1.03rem; font-weight: 700; }
.help { display: block; margin-top: 8px; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.group { margin-top: 20px; }
.group:first-child { margin-top: 0; }
.group__title { margin: 0 0 14px; font-size: 1.35rem; }
.cards { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(280px, 1fr)); }
.card { background: #fafafa; border: 1px solid var(--line); border-radius: 26px; padding: 18px; }
.card__header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.card__title { font-size: 1.16rem; font-weight: 900; }
.card__tag { padding: 8px 12px; border-radius: 999px; background: var(--lime-soft); color: var(--grey); font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: var(--shadow); }
.kpi__label { color: var(--muted); font-size: 1rem; margin-bottom: 10px; }
.kpi__value { font-size: clamp(1.8rem, 2vw, 2.7rem); line-height: 0.98; font-weight: 900; }
.kpi__sub { margin-top: 8px; color: var(--muted); line-height: 1.35; font-size: .96rem; }
.summary-grid { display: grid; gap: 24px; grid-template-columns: 1.05fr .95fr; }
.table-wrap { overflow-x: auto; }
.summary-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.summary-table th, .summary-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: right; }
.summary-table th:first-child, .summary-table td:first-child { text-align: left; }
.summary-table th { color: var(--muted); font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; }
.summary-table tfoot td { font-weight: 900; }
.row-label { font-weight: 800; }
.emph { color: var(--grey); font-weight: 900; }
.highlight { color: #2f6f1f; font-weight: 900; }
.note-box { border-radius: 24px; border: 1px solid rgba(203,211,0,.35); background: linear-gradient(180deg, rgba(203,211,0,.16) 0%, rgba(203,211,0,.08) 100%); padding: 18px; }
.note-box h3 { margin: 0 0 12px; font-size: 1.2rem; }
.note-box p, .note-box li { line-height: 1.55; color: var(--grey); }
.note-box ul { margin: 0; padding-left: 20px; }
.mix-bar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: #ececee; border: 1px solid var(--line); margin: 14px 0 8px; }
.mix-bar > span { display: block; height: 100%; }
.mix-diesel { background: #6a6d74; }
.mix-lng { background: #9aa84d; }
.mix-electric { background: var(--lime); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .93rem; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 99px; }
.footer-note { padding: 0 24px 24px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.print-only { display: none; }
@media (max-width: 1260px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .app { padding: 14px; }
  .hero { width: 100%; max-width: none; padding: 20px; }
  .cards, .company-grid, .grid-2, .kpis { grid-template-columns: 1fr; }
  .hero__actions { align-items: stretch; }
  .btn-row { justify-content: stretch; }
  .btn-row > * { flex: 1 1 auto; }
  .meta-note { text-align: left; max-width: none; }
}
@media print {
  body { background: white; }
  .app { max-width: none; padding: 0; }
  .hero, .section, .kpi { box-shadow: none; }
  .btn-row, .lang-switch, .back-link, .meta-note { display: none !important; }
  .cards { grid-template-columns: 1fr 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .section { break-inside: avoid; margin-top: 14px; }
}


/* v5 responsive hardening */
html, body { max-width: 100%; overflow-x: hidden; }
.app { max-width: 1680px; margin: 0 auto; padding: clamp(12px, 2vw, 22px); }
.hero { width: 100%; margin: 0; }
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}
.hero__brand { min-width: 0; flex: initial; max-width: none; }
.hero__actions { min-width: 0; width: 100%; max-width: 430px; }
.hero__logo { width: min(580px, 100%); }
.company-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.summary-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.summary-table { min-width: 760px; }
.section, .card, .input-card, .kpi, .note-box { min-width: 0; }
@media (max-width: 1100px) {
  .hero__top { grid-template-columns: 1fr; }
  .hero__actions { max-width: none; align-items: stretch; }
  .btn-row { justify-content: flex-start; }
  .summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .hero { padding: 18px; border-radius: 24px; }
  .hero__badge { font-size: .8rem; letter-spacing: .12em; }
  .hero h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1; }
  .hero p { font-size: 1rem; }
  .btn-row { display: grid; grid-template-columns: 1fr; }
  .lang-switch { justify-content: flex-start; }
  .section__header, .section__body { padding-left: 18px; padding-right: 18px; }
  .summary-table { min-width: 640px; font-size: .92rem; }
}
@media (max-width: 560px) {
  .app { padding: 10px; }
  .hero { padding: 16px; }
  .hero__logo { width: min(420px, 100%); }
  .hero__badge { font-size: .72rem; padding: 9px 12px; }
  .section__header h2 { font-size: 1.45rem; }
  .group__title { font-size: 1.15rem; }
  .card__header { flex-direction: column; align-items: flex-start; }
  .summary-table { min-width: 560px; }
  .footer-note { padding: 0 18px 18px; }
}


/* v6 readability tables */
.summary-grid--results { grid-template-columns: 1fr !important; }
.summary-grid--notes { grid-template-columns: repeat(2, minmax(0,1fr)); }
.table-wrap { width: 100%; overflow-x: auto; padding-bottom: 6px; }
.summary-table { width: 100%; min-width: 1180px; table-layout: auto; }
.summary-table th, .summary-table td { white-space: nowrap; vertical-align: middle; }
.summary-table th { white-space: normal; line-height: 1.15; }
.summary-table th:first-child, .summary-table td:first-child { white-space: normal; min-width: 180px; }
.summary-table td:nth-child(3), .summary-table th:nth-child(3) { min-width: 150px; }
.summary-table td:nth-child(4), .summary-table th:nth-child(4),
.summary-table td:nth-child(5), .summary-table th:nth-child(5),
.summary-table td:nth-child(6), .summary-table th:nth-child(6) { min-width: 170px; }
.summary-table td:nth-child(7), .summary-table th:nth-child(7),
.summary-table td:nth-child(8), .summary-table th:nth-child(8) { min-width: 150px; }
@media (max-width: 1100px) {
  .summary-grid--notes { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .summary-table { min-width: 980px; }
}

.summary-table--desktop { display: table; }
.summary-cards { display: none; gap: 14px; }
.summary-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fafafa;
  padding: 16px;
}
.summary-card__title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 14px;
}
.summary-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.summary-card__item {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.summary-card__item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.summary-card__label {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  line-height: 1.3;
}
.summary-card__value {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.15;
  word-break: break-word;
}
.summary-card--total {
  background: #fff;
  border: 2px solid var(--line);
}
@media (max-width: 1100px) {
  .summary-table--desktop { display: none; }
  .summary-cards { display: grid; }
  .table-wrap { overflow-x: visible; }
}
@media (max-width: 640px) {
  .summary-card__grid { grid-template-columns: 1fr; }
  .summary-card__item:nth-child(-n+2) { border-top: 1px solid var(--line); padding-top: 10px; }
  .summary-card__item:first-child { border-top: 0; padding-top: 0; }
}


/* print report v8 */
.print-only { display: none; }
.print-report { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html, body { margin: 0; padding: 0; background: white; color: #22252b; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .app > .hero, .app > .layout { display: none !important; }
  .print-only { display: block !important; }
  .print-report { display: block !important; }
  .print-page {
    page-break-after: always;
    break-after: page;
    box-sizing: border-box;
    padding: 14mm 14mm 12mm;
    background: white;
    overflow: hidden;
  }
  .print-page > * { break-inside: avoid; }
  .print-page:last-child { page-break-after: auto; break-after: auto; }
  .print-hero-img {
    width: 100%;
    display: block;
    border-radius: 16px;
    margin: 0 0 10mm;
  }
  .print-title { font-size: 30px; line-height: 1.05; margin: 0 0 6mm; font-weight: 900; color: #22252b; }
  .print-subtitle { margin: 0 0 9mm; color: #5d616b; font-size: 13px; line-height: 1.5; }
  .print-meta-grid, .print-kpi-grid, .print-params-grid {
    display: grid;
    gap: 4mm;
  }
  .print-meta-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 4mm; }
  .print-kpi-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 6mm; }
  .print-card, .print-kpi-card, .print-param-card, .print-note-box {
    border: 1px solid #d7d8de;
    border-radius: 16px;
    padding: 4.5mm;
    background: #fff;
  }
  .print-label { color: #666b76; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; margin-bottom: 2.5mm; }
  .print-card-value { font-size: 13px; font-weight: 900; line-height: 1.3; }
  .print-kpi-value { font-size: 22px; line-height: 1.02; font-weight: 900; margin-bottom: 1.5mm; }
  .print-kpi-sub { color: #666b76; font-size: 10px; line-height: 1.35; }
  .print-section-title { margin: 0 0 5mm; font-size: 22px; font-weight: 900; color: #22252b; }
  .print-group-title { margin: 0 0 3mm; font-size: 15px; font-weight: 900; color: #22252b; }
  .print-params-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 4mm; }
  .print-param-title { font-size: 14px; font-weight: 900; margin: 0 0 3mm; }
  .print-param-table { width: 100%; border-collapse: collapse; }
  .print-param-table td { padding: 1.6mm 0; border-bottom: 1px solid #ececf0; vertical-align: top; font-size: 11px; }
  .print-param-table td:first-child { color: #666b76; padding-right: 3mm; }
  .print-param-table td:last-child { text-align: right; font-weight: 800; }
  .print-param-table tr:last-child td { border-bottom: 0; }
  .print-table { width: 100%; border-collapse: collapse; margin-bottom: 4mm; table-layout: fixed; }
  .print-table th, .print-table td { border-bottom: 1px solid #e3e5ea; padding: 2.8mm 2mm; font-size: 11px; text-align: right; vertical-align: middle; }
  .print-table th { color: #666b76; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
  .print-table th:first-child, .print-table td:first-child { text-align: left; width: 24%; }
  .print-table--energy th:first-child, .print-table--energy td:first-child { width: 28%; }
  .print-table tfoot td { font-weight: 900; }
  .print-highlight { color: #3f7a28; font-weight: 900; }
  .print-mix-row { margin: 4mm 0 3mm; }
  .print-mix-svg { display:block; width:100%; height:14mm; }
  .print-legend { display: flex; gap: 6mm; flex-wrap: wrap; color: #666b76; font-size: 10px; }
  .print-legend span { display: inline-flex; align-items: center; gap: 2mm; }
  .print-legend i { width: 4mm; height: 4mm; border-radius: 999px; display: inline-block; }
  .print-summary-box { position: relative; border-radius: 18px; padding: 0; overflow: hidden; }
  .print-summary-bg { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .print-summary-content { position:relative; z-index:1; padding:7mm; }
  .print-summary-box p, .print-summary-box li { font-size: 12px; line-height: 1.55; color: #2a2d33; }
  .print-summary-box p { margin: 0 0 4mm; }
  .print-summary-box p:last-child { margin-bottom: 0; }
  .print-method-list { margin: 0; padding-left: 5mm; }
  .print-footer { margin-top: 9mm; border-top: 1px solid #d7d8de; padding-top: 3mm; color: #666b76; font-size: 10px; line-height: 1.5; }
  .print-empty { color: #666b76; font-size: 11px; border: 1px dashed #d7d8de; border-radius: 12px; padding: 4mm; }
}

@media print {
  .print-page--summary .print-table { margin-bottom: 3mm; }
  .print-page--summary .print-table th, .print-page--summary .print-table td { padding-top: 2.3mm; padding-bottom: 2.3mm; }
}
