.pv-page {
  min-height: 100vh;
  padding: clamp(7.5rem, 11vw, 9.5rem) clamp(1rem, 3vw, 3rem) 5rem;
  color: #eaf8ff;
  background:
    radial-gradient(circle at 12% 4%, rgba(48, 182, 224, 0.16), transparent 27rem),
    radial-gradient(circle at 88% 16%, rgba(76, 210, 170, 0.11), transparent 28rem),
    linear-gradient(160deg, #050c16 0%, #071827 48%, #05101c 100%);
}

.pv-shell { width: min(1480px, 100%); margin: 0 auto; display: grid; gap: 1.25rem; }
.pv-hero { padding: clamp(1.5rem, 4vw, 3.2rem); border: 1px solid rgba(78, 203, 231, 0.32); border-radius: 28px; background: linear-gradient(135deg, rgba(13, 51, 73, 0.95), rgba(8, 24, 39, 0.96)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28); overflow: hidden; position: relative; }
.pv-hero::after { content: "Σ"; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); color: rgba(92, 221, 203, 0.09); font: 800 clamp(8rem, 18vw, 17rem)/1 system-ui, sans-serif; pointer-events: none; }
.pv-hero h1 { max-width: 930px; margin: .45rem 0 .8rem; color: #fff; font-size: clamp(2.1rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.045em; }
.pv-hero > p:not(.eyebrow) { max-width: 940px; margin: 0; color: #c5dce9; font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.75; }
.pv-back { display: inline-flex; margin-bottom: 1.25rem; color: #9cecff; font-weight: 800; text-decoration: none; }
.pv-back:hover { color: #fff; }
.pv-badges, .pv-legend { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.25rem; }
.pv-badges span, .pv-legend span { padding: .48rem .75rem; border: 1px solid rgba(151, 232, 246, .28); border-radius: 999px; background: rgba(8, 26, 42, .62); color: #dffaff; font-size: .78rem; font-weight: 800; }

.pv-card { padding: clamp(1.1rem, 2.5vw, 2rem); border: 1px solid rgba(97, 179, 207, .28); border-radius: 24px; background: rgba(13, 35, 53, .93); box-shadow: 0 18px 55px rgba(0, 0, 0, .2); }
.pv-card h2, .pv-card h3 { color: #fff; margin: 0; }
.pv-card h3 { margin-top: 1.6rem; font-size: 1rem; }
.pv-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pv-card-heading .eyebrow { color: #63dfc0; margin: 0 0 .25rem; }
.pv-step { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; flex: 0 0 auto; border-radius: 12px; color: #071823; background: linear-gradient(135deg, #67e2bf, #67c9ed); font-weight: 900; }
.pv-help, .pv-status, .pv-note, .pv-source { color: #b9cedb; line-height: 1.62; font-size: .9rem; }
.pv-help strong { color: #e8faff; }
.pv-status { min-height: 1.5em; margin: .8rem 0 0; font-weight: 800; color: #77e9c3; }
.pv-status.is-error { color: #ff9c9c; }

.pv-project-grid, .pv-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.pv-field { display: grid; gap: .4rem; color: #b7d1df; font-size: .79rem; font-weight: 800; }
.pv-field input, .pv-field select, .pv-table input { width: 100%; min-height: 2.65rem; border: 1px solid rgba(105, 191, 220, .32); border-radius: 10px; padding: .62rem .72rem; color: #f5fcff; background: #071b2b; font: inherit; }
.pv-field input:focus, .pv-field select:focus, .pv-table input:focus { outline: 2px solid rgba(103, 226, 191, .52); border-color: #67e2bf; }
.pv-field select { color-scheme: dark; }

.pv-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: .45rem; border: 1px solid rgba(88, 172, 204, .25); border-radius: 20px; background: #071522; }
.pv-tab { display: grid; gap: .3rem; min-height: 5.2rem; padding: .9rem 1.1rem; border: 1px solid transparent; border-radius: 15px; color: #bdd3df; background: transparent; font: 850 1rem/1.2 inherit; text-align: left; cursor: pointer; }
.pv-tab small { color: #7f9dad; font-size: .74rem; font-weight: 650; }
.pv-tab.is-active { border-color: rgba(95, 223, 197, .55); color: #071923; background: linear-gradient(135deg, #68e2c1, #82d9f1); }
.pv-tab.is-active small { color: #163d4d; }
.pv-panel[hidden], .pv-results[hidden] { display: none !important; }
.pv-panel { display: grid; gap: 1.25rem; }

.pv-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin: 1rem 0; }
.pv-button, .pv-file { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid rgba(98, 214, 190, .55); border-radius: 11px; color: #dffaf4; background: rgba(31, 112, 105, .17); font: 800 .82rem/1 inherit; cursor: pointer; }
.pv-button:hover, .pv-file:hover { background: rgba(54, 156, 141, .28); }
.pv-button.is-primary { border-color: transparent; color: #071a23; background: linear-gradient(135deg, #67e2bf, #79d8f1); box-shadow: 0 9px 24px rgba(76, 208, 180, .18); }
.pv-button.is-danger { border-color: rgba(255, 120, 120, .42); color: #ffc8c8; background: rgba(135, 35, 48, .15); }
.pv-button:disabled { opacity: .45; cursor: not-allowed; }
.pv-file input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }

.pv-table-wrap { overflow: auto; border: 1px solid rgba(93, 168, 194, .24); border-radius: 15px; background: rgba(4, 18, 30, .62); }
.pv-table { width: 100%; min-width: 760px; border-collapse: collapse; color: #d8e9f1; font-size: .78rem; }
.pv-table th, .pv-table td { padding: .68rem .62rem; border-bottom: 1px solid rgba(110, 174, 196, .16); text-align: left; white-space: nowrap; }
.pv-table th { position: sticky; top: 0; z-index: 1; color: #9bc1d1; background: #0c2639; font-size: .66rem; text-transform: uppercase; letter-spacing: .045em; }
.pv-table tbody tr:last-child td { border-bottom: 0; }
.pv-table tbody tr:hover { background: rgba(91, 203, 192, .045); }
.pv-table input { min-width: 110px; min-height: 2.25rem; padding: .42rem .5rem; font-size: .75rem; }
.pv-remove { width: 2.1rem; height: 2.1rem; border: 1px solid #a94f5a; border-radius: 9px; color: #ffb0b6; background: rgba(118, 24, 39, .18); cursor: pointer; font-weight: 900; }
.pv-condition { display: inline-flex; padding: .32rem .58rem; border-radius: 999px; font-weight: 900; font-size: .68rem; }
.pv-condition.is-cut { color: #ffd9a5; background: rgba(247, 149, 47, .16); border: 1px solid rgba(247, 149, 47, .4); }
.pv-condition.is-fill { color: #a9e8ff; background: rgba(45, 169, 228, .17); border: 1px solid rgba(45, 169, 228, .42); }
.pv-condition.is-grade { color: #b9f6de; background: rgba(74, 204, 150, .14); border: 1px solid rgba(74, 204, 150, .4); }

.pv-results { border-color: rgba(100, 222, 190, .42); }
.pv-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: .9rem 0 1.1rem; }
.pv-metrics > div { padding: .9rem; border: 1px solid rgba(92, 189, 205, .23); border-radius: 14px; background: rgba(5, 24, 38, .64); }
.pv-metrics span { display: block; color: #86a8b9; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.pv-metrics strong { display: block; margin-top: .34rem; color: #fff; font-size: clamp(1rem, 2vw, 1.45rem); }
.pv-chart { min-height: 390px; margin: 1rem 0; border: 1px solid rgba(97, 179, 207, .25); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(7, 24, 38, .9), rgba(5, 15, 25, .96)); }
.pv-chart svg { display: block; width: 100%; height: auto; min-height: 390px; }
.pv-chart .grid { stroke: rgba(150, 199, 218, .14); stroke-width: 1; }
.pv-chart .axis { stroke: rgba(206, 234, 244, .5); stroke-width: 1.2; }
.pv-chart .ground { fill: none; stroke: #67e2bf; stroke-width: 3; vector-effect: non-scaling-stroke; }
.pv-chart .design { fill: none; stroke: #68bfff; stroke-width: 3; stroke-dasharray: 10 6; vector-effect: non-scaling-stroke; }
.pv-chart .cut-area { fill: rgba(247, 149, 47, .28); stroke: none; }
.pv-chart .fill-area { fill: rgba(45, 169, 228, .27); stroke: none; }
.pv-chart text { fill: #a9c8d6; font: 12px system-ui, sans-serif; }
.pv-chart .point-ground { fill: #67e2bf; }
.pv-chart .point-design { fill: #68bfff; }
.pv-legend { margin: .6rem 0; }
.pv-legend span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .35rem; border-radius: 3px; vertical-align: -.1rem; }
.pv-legend .is-ground::before { background: #67e2bf; }
.pv-legend .is-design::before { background: #68bfff; }
.pv-legend .is-cut::before { background: #f7952f; }
.pv-legend .is-fill::before { background: #2da9e4; }
.pv-section-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pv-section-toolbar .pv-field { min-width: 190px; }
.pv-source, .pv-note { margin: 0; padding: 1rem 1.15rem; border-radius: 16px; }
.pv-source { border: 1px solid rgba(98, 200, 215, .25); background: rgba(12, 43, 59, .76); }
.pv-source a { color: #81dff4; font-weight: 800; }
.pv-note { border: 1px solid rgba(246, 177, 71, .3); background: rgba(94, 64, 18, .2); color: #ead9bd; }
.pv-print-sheet { display: none; }

@media (max-width: 980px) {
  .pv-project-grid, .pv-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pv-page { padding-inline: .65rem; }
  .pv-hero, .pv-card { border-radius: 18px; }
  .pv-hero::after { display: none; }
  .pv-project-grid, .pv-settings, .pv-tabs, .pv-metrics { grid-template-columns: 1fr; }
  .pv-tab { min-height: auto; }
  .pv-actions > *, .pv-button, .pv-file { width: 100%; }
  .pv-chart, .pv-chart svg { min-height: 310px; }
}

@media print {
  body > * { display: none !important; }
  body > .pv-print-sheet { display: block !important; color: #17202a; background: #fff; font: 10pt/1.35 Arial, sans-serif; }
  .pv-print-sheet header { display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 2px solid #0d4d85; }
  .pv-print-sheet header img { width: 100%; max-width: 180px; max-height: 72px; object-fit: contain; }
  .pv-print-sheet header img:last-child { justify-self: end; }
  .pv-print-sheet header div { text-align: center; }
  .pv-print-sheet h1 { margin: 0 0 4px; color: #0d4d85; font-size: 17pt; }
  .pv-print-sheet h2 { margin: 14px 0 7px; color: #123d5e; font-size: 12pt; }
  .pv-print-sheet h3 { margin: 12px 0 6px; font-size: 10pt; }
  .pv-print-sheet p { margin: 4px 0; }
  .pv-print-sheet a { color: #0d4d85; text-decoration: none; }
  .pv-print-sheet .print-meta, .pv-print-sheet .print-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; margin: 10px 0; padding: 9px; border: 1px solid #b9cbd7; background: #f5f9fb; }
  .pv-print-sheet .print-chart { margin: 8px 0; border: 1px solid #c3d1da; }
  .pv-print-sheet .print-chart svg { display: block; width: 100%; height: auto; max-height: 260px; }
  .pv-print-sheet table { width: 100%; border-collapse: collapse; font-size: 7.2pt; }
  .pv-print-sheet th, .pv-print-sheet td { padding: 4px; border: 1px solid #aebdc6; text-align: left; }
  .pv-print-sheet th { background: #e5eff5; }
  .pv-print-sheet footer { margin-top: 12px; padding-top: 7px; border-top: 1px solid #9fb3bf; color: #536671; font-size: 7.5pt; }
  @page { size: landscape; margin: 11mm; }
}