.portfolio-template-page .calculator-hero::before { opacity: .48; background: radial-gradient(circle at 78% 20%, rgba(102,209,170,.34), transparent 26%), radial-gradient(circle at 10% 88%, rgba(255,91,69,.2), transparent 28%), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: auto, auto, 52px 52px, 52px 52px; }
.portfolio-template-page .calculator-hero h1 em { color: #7ce1bd; }
.portfolio-preview-card { transform: rotate(1deg); }
.portfolio-preview-card .portfolio-preview-row { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; }
.portfolio-preview-card .portfolio-preview-row span { color: #8ee9c7; font: 900 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.portfolio-preview-card .portfolio-preview-row strong { color: #f4f7fb; font-size: .86rem; line-height: 1.55; }
.portfolio-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.portfolio-sample-button { padding: 16px; text-align: left; color: var(--ink); background: #fff; border: 1px solid #dce2e9; border-radius: 14px; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.portfolio-sample-button:hover { transform: translateY(-2px); border-color: #58c7a0; }
.portfolio-sample-button span { display: block; margin-bottom: 6px; color: #238363; font: 900 .63rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.portfolio-sample-button strong { display: block; font-size: .9rem; line-height: 1.45; }
.portfolio-template-page .calculator-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-template-page .calculator-fields label.portfolio-field-wide { grid-column: 1 / -1; }
.portfolio-template-page .calculator-fields label > input,
.portfolio-template-page .calculator-fields label > select,
.portfolio-template-page .calculator-fields label > textarea { width: 100%; min-width: 0; padding: 13px 12px; color: var(--ink); background: #fbfcfd; border: 1px solid #cfd5de; border-radius: 11px; outline: none; font: 750 .9rem inherit; }
.portfolio-template-page .calculator-fields label > textarea { min-height: 88px; resize: vertical; line-height: 1.65; }
.portfolio-template-page .calculator-fields label > input:focus,
.portfolio-template-page .calculator-fields label > select:focus,
.portfolio-template-page .calculator-fields label > textarea:focus { border-color: #42b98e; box-shadow: 0 0 0 3px rgba(66,185,142,.13); }
.portfolio-template-page .calculator-result { background: #121f35; }
.portfolio-summary-block { margin-top: 13px; padding: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }
.portfolio-summary-block > span { display: block; margin-bottom: 9px; color: #8ee9c7; font: 900 .63rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.portfolio-summary-block pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #f3f6fa; font: 700 .79rem/1.75 inherit; }
.portfolio-time-chip { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 12px; padding: 13px 15px; color: #c8d2df; background: rgba(255,255,255,.05); border-radius: 12px; }
.portfolio-time-chip strong { color: #8ee9c7; }
.portfolio-generated-checklist { margin: 8px 0 0; padding: 0; list-style: none; }
.portfolio-generated-checklist li { padding: 7px 0 7px 21px; position: relative; color: #c5ceda; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .75rem; }
.portfolio-generated-checklist li::before { content: "✓"; position: absolute; left: 0; color: #8ee9c7; font-weight: 900; }
.portfolio-template-page .calculator-result .button { width: 100%; justify-content: center; margin-top: 14px; }
@media (max-width: 760px) {
  .portfolio-template-page .calculator-fields, .portfolio-samples { grid-template-columns: 1fr; }
  .portfolio-template-page .calculator-fields label.portfolio-field-wide { grid-column: auto; }
  .portfolio-preview-card { transform: none; }
}