:root {
      --green: #2f963b;
      --green-dark: #176127;
      --green-soft: #edf8ef;
      --green-line: #92ce9a;
      --blue-soft: #eef6ff;
      --blue-line: #8ab4e8;
      --blue-dark: #174f8a;
      --ink: #18211a;
      --muted: #55605a;
      --line: #d7ded8;
      --paper: #fff;
      --page: #f3f6f3;
      --danger: #b3261e;
      --shadow: 0 12px 36px rgba(22, 64, 31, .10);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--page);
      color: var(--ink);
      font-family: Nunito, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 18px;
      line-height: 1.45;
    }

    button, input { font: inherit; }

    button { -webkit-tap-highlight-color: transparent; }

    .prototype-bar {
      padding: 9px 16px;
      background: #163e20;
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      text-align: center;
    }

    .calculator {
      width: min(100% - 24px, 1060px);
      margin: 18px auto 56px;
      padding: 26px;
      border: 1px solid #e1e7e2;
      border-radius: 22px;
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 16px;
      margin-bottom: 20px;
    }

    .logo {
      color: var(--green-dark);
      font-size: 21px;
      font-weight: 950;
      letter-spacing: .04em;
    }

    .logo span { color: var(--green); }

    .installation-benefit {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
      padding: 16px 18px;
      border: 1px solid var(--green-line);
      border-left: 5px solid var(--green);
      border-radius: 12px;
      background: var(--green-soft);
      color: var(--ink);
      font-size: 20px;
      font-weight: 900;
      line-height: 1.32;
    }

    .installation-benefit-icon {
      display: inline-grid;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      place-items: center;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      font-size: 18px;
      line-height: 1;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1, h2, h3 { color: var(--green-dark); }

    h1 {
      max-width: 740px;
      margin-bottom: 18px;
      font-size: clamp(27px, 4vw, 40px);
      line-height: 1.12;
    }

    h2 {
      margin-bottom: 8px;
      font-size: clamp(25px, 3.4vw, 34px);
      line-height: 1.16;
    }

    h3 {
      margin-bottom: 14px;
      font-size: 22px;
      line-height: 1.25;
    }

    .delivery-card,
    .field,
    .result {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
    }

    .delivery-card {
      border: 2px solid var(--green-line);
      background: linear-gradient(180deg, #f6fff7 0%, #fff 100%);
    }

    .city-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
    }

    input[type="text"] {
      width: 100%;
      min-height: 58px;
      padding: 14px 16px;
      border: 2px solid #bdc8bf;
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      font-size: 18px;
      outline: none;
      transition: border-color .18s, box-shadow .18s;
    }

    input[type="text"]:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(47, 150, 59, .13);
    }

    .primary-btn,
    .category-btn,
    .calculate-btn,
    .small-action {
      border: 0;
      border-radius: 12px;
      background: var(--green);
      color: #fff;
      font-weight: 900;
      cursor: pointer;
      transition: transform .1s, background .18s;
    }

    .primary-btn:hover,
    .category-btn:hover,
    .calculate-btn:hover,
    .small-action:hover { background: var(--green-dark); }

    .primary-btn:active,
    .category-btn:active,
    .calculate-btn:active,
    .small-action:active { transform: scale(.99); }

    .primary-btn {
      min-height: 58px;
      padding: 14px 24px;
      white-space: nowrap;
    }

    .delivery-result {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      margin-top: 18px;
      padding: 18px;
      border: 2px solid var(--green);
      border-radius: 14px;
      background: var(--green-soft);
    }

    .delivery-result strong {
      display: block;
      color: var(--green-dark);
      font-size: 20px;
    }

    .delivery-result span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 17px;
      font-weight: 700;
    }

    .delivery-price {
      color: var(--green-dark);
      font-size: 20px;
      font-weight: 950;
      white-space: nowrap;
    }

    .flow {
      display: grid;
      gap: 20px;
      margin-top: 26px;
    }

    .flow.order-mode > .field,
    .flow.order-mode > .calculate-btn,
    .flow.order-mode > #formError {
      display: none !important;
    }

    .calculator.order-mode > .header,
    .calculator.order-mode > .delivery-card {
      display: none !important;
    }

    .field-title {
      display: block;
      margin-bottom: 14px;
      color: var(--ink);
      font-size: 22px;
      font-weight: 900;
    }

    .field-title.with-icon {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .field-title-icon {
      flex: 0 0 auto;
      width: 25px;
      height: 25px;
      color: var(--green-dark);
    }

    .gate-choice-title {
      margin-bottom: 18px;
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .category-btn {
      min-height: 72px;
      padding: 17px 20px;
      border: 2px solid var(--green);
      background: #fff;
      color: var(--green-dark);
      font-size: 22px;
    }

    .category-btn.active {
      background: var(--green);
      color: #fff;
      box-shadow: 0 0 0 4px rgba(47, 150, 59, .13);
    }

    .standard-guide {
      margin-top: 12px;
      padding: 15px 16px;
      border: 1px solid var(--green-line);
      border-left: 5px solid var(--green);
      border-radius: 12px;
      background: var(--green-soft);
    }

    .standard-guide strong {
      display: block;
      margin-bottom: 5px;
      color: var(--green-dark);
      font-size: 18px;
      font-weight: 950;
    }

    .standard-guide p {
      margin-bottom: 0;
      font-size: 17px;
      font-weight: 700;
    }

    .model-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .model-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 0;
      overflow: hidden;
      border: 2px solid var(--line);
      border-radius: 16px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      transition: border-color .18s, box-shadow .18s, transform .1s;
    }

    .model-card:hover { border-color: var(--green-line); }
    .model-card:active { transform: scale(.99); }

    .model-card.selected {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(47, 150, 59, .13);
    }

    .model-card img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: contain;
      background: #edf0ed;
    }

    .model-name {
      display: block;
      padding: 12px 14px 14px;
      color: var(--green-dark);
      font-size: 18px;
      font-weight: 900;
      line-height: 1.25;
      text-align: center;
    }

    .selected-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      display: none;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--green);
      color: #fff;
      font-size: 16px;
      font-weight: 900;
    }

    .model-card.selected .selected-badge { display: block; }

    .choice-list {
      display: grid;
      gap: 11px;
    }

    .choice {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: start;
      gap: 12px;
      width: 100%;
      padding: 16px;
      border: 2px solid var(--line);
      border-radius: 13px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .choice-dot,
    .check-box {
      width: 24px;
      height: 24px;
      border: 2px solid #8e9b91;
      background: #fff;
    }

    .choice-dot { border-radius: 50%; }
    .check-box { border-radius: 6px; }

    .choice.selected {
      border-color: var(--green);
      background: var(--green-soft);
    }

    .choice.selected .choice-dot {
      border: 7px solid var(--green);
    }

    .choice.selected .check-box {
      border-color: var(--green);
      background: var(--green);
    }

    .choice.selected .check-box::after {
      content: "✓";
      display: grid;
      place-items: center;
      height: 100%;
      color: #fff;
      font-size: 17px;
      font-weight: 950;
    }

    .choice-label {
      font-size: 18px;
      font-weight: 850;
    }

    .choice-note {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 17px;
      font-weight: 650;
    }

    .included-note {
      margin-bottom: 24px;
      padding: 17px 18px;
      border: 1px solid var(--green-line);
      border-left: 5px solid var(--green);
      border-radius: 12px;
      background: var(--green-soft);
      color: var(--ink);
      font-size: 17px;
      line-height: 1.5;
    }

    .included-note strong {
      color: var(--green-dark);
      font-weight: 950;
    }

    .width-help {
      margin: -4px 0 10px;
      font-size: 17px;
      font-weight: 700;
    }

    .width-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .width-field-label {
      display: block;
      margin-bottom: 7px;
      color: var(--ink);
      font-size: 18px;
      font-weight: 900;
    }

    .width-input-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .width-unit {
      min-width: 38px;
      color: var(--ink);
      font-size: 20px;
      font-weight: 950;
      text-align: center;
    }

    .width-feedback {
      margin: 10px 0 0;
      color: var(--green-dark);
      font-size: 17px;
      font-weight: 900;
    }

    .width-summary {
      display: grid;
      gap: 7px;
      margin-top: 14px;
      padding: 15px 17px;
      border: 1px solid var(--green-line);
      border-radius: 12px;
      background: var(--green-soft);
      color: var(--ink);
      font-size: 17px;
      font-weight: 800;
    }

    .width-summary strong {
      padding-top: 7px;
      border-top: 1px solid var(--green-line);
      color: var(--green-dark);
      font-size: 19px;
    }

    .important {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      margin-top: 14px;
      padding: 15px;
      border: 1px solid var(--green-line);
      border-radius: 12px;
      background: var(--green-soft);
      color: var(--green-dark);
      font-size: 17px;
      font-weight: 800;
    }

    .important-check {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      font-size: 16px;
      font-weight: 950;
      line-height: 1;
    }

    .calculate-btn {
      width: 100%;
      min-height: 62px;
      padding: 16px 20px;
      font-size: 20px;
    }

    .result {
      border: 2px solid var(--green);
      background: #fbfffb;
    }

    .result-grid {
      display: grid;
      gap: 0;
      margin-top: 14px;
      border-top: 1px solid var(--line);
    }

    .result-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      padding: 13px 0;
      border-bottom: 1px solid var(--line);
    }

    .result-row > span:last-child {
      font-weight: 900;
      text-align: right;
    }

    .result-row.total {
      color: var(--green-dark);
      font-size: 21px;
      font-weight: 950;
    }

    .order-terms {
      display: grid;
      gap: 10px;
      margin-top: 20px;
      padding: 18px;
      border: 1px solid var(--green-line);
      border-left: 5px solid var(--green);
      border-radius: 14px;
      background: var(--green-soft);
      font-size: 17px;
    }

    .order-term {
      margin: 0;
      color: var(--ink);
    }

    .order-term strong {
      color: var(--green-dark);
      font-weight: 950;
    }

    .posts-offer {
      margin-top: 20px;
      padding: 18px;
      border: 2px solid var(--green-line);
      border-radius: 14px;
      background: var(--green-soft);
    }

    .posts-offer strong {
      display: block;
      margin-bottom: 11px;
      color: var(--green-dark);
      font-size: 20px;
    }

    .small-action {
      width: 100%;
      min-height: 52px;
      padding: 12px 16px;
    }

    .step-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
    }

    .back-btn,
    .secondary-btn,
    .text-btn,
    .quantity-btn {
      border: 2px solid var(--green);
      border-radius: 11px;
      background: #fff;
      color: var(--green-dark);
      font-weight: 900;
      cursor: pointer;
    }

    .back-btn,
    .secondary-btn {
      min-height: 48px;
      padding: 10px 16px;
    }

    .back-btn:hover,
    .secondary-btn:hover,
    .quantity-btn:hover {
      background: var(--green-soft);
    }

    .back-btn:focus-visible,
    .secondary-btn:focus-visible,
    .text-btn:focus-visible,
    .quantity-btn:focus-visible,
    .post-option:focus-visible {
      outline: 4px solid rgba(47, 150, 59, .18);
      outline-offset: 2px;
    }

    .posts-panel {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 2px solid var(--green-line);
    }

    .posts-panel h3 { margin-bottom: 6px; }

    .posts-intro {
      margin-bottom: 18px;
      color: var(--muted);
      font-weight: 700;
    }

    .post-step {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .post-step + .post-step { margin-top: 16px; }

    .post-step-title {
      display: block;
      margin-bottom: 12px;
      color: var(--ink);
      font-size: 19px;
      font-weight: 950;
    }

    .post-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .selection-instruction {
      margin: -3px 0 12px;
      color: var(--muted);
      font-size: 17px;
      font-weight: 800;
    }

    .post-option {
      min-height: 56px;
      padding: 12px 14px;
      border: 2px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      font-weight: 850;
      cursor: pointer;
    }

    .post-option span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 16px;
      font-weight: 700;
    }

    .post-option.selected {
      border-color: var(--green);
      background: var(--green-soft);
      color: var(--green-dark);
    }

    .post-option.select-card {
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
    }

    .post-option-marker {
      display: grid !important;
      width: 26px;
      height: 26px;
      margin: 0 !important;
      place-items: center;
      border: 2px solid #8e9b91;
      border-radius: 50%;
      background: #fff;
      color: transparent !important;
      font-size: 16px !important;
      line-height: 1;
    }

    .post-option.selected .post-option-marker {
      border-color: var(--green);
      background: var(--green);
      color: #fff !important;
    }

    .post-option.selected .post-option-marker::after {
      content: "✓";
      font-weight: 950;
    }

    .post-option-copy {
      min-width: 0;
      margin: 0 !important;
      color: inherit !important;
      font-size: inherit !important;
      font-weight: inherit !important;
    }

    .post-option-detail {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 16px;
      font-weight: 700;
    }

    .quantity-control {
      display: inline-grid;
      grid-template-columns: 48px 82px 48px;
      align-items: center;
      overflow: hidden;
      border: 2px solid var(--green);
      border-radius: 12px;
    }

    .quantity-btn {
      width: 48px;
      height: 48px;
      padding: 0;
      border: 0;
      border-radius: 0;
      font-size: 25px;
      line-height: 1;
    }

    .quantity-input {
      width: 82px;
      height: 48px;
      padding: 0 8px;
      border: 0;
      border-right: 1px solid var(--green-line);
      border-left: 1px solid var(--green-line);
      color: var(--ink);
      text-align: center;
      font-weight: 950;
      outline: none;
      appearance: textfield;
      -moz-appearance: textfield;
    }

    .quantity-input::-webkit-outer-spin-button,
    .quantity-input::-webkit-inner-spin-button {
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
    }

    .quantity-help {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 16px;
      font-weight: 700;
    }

    .post-line-list {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .post-line {
      padding: 16px;
      border: 2px solid var(--green-line);
      border-radius: 13px;
      background: var(--green-soft);
    }

    .post-line-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start;
    }

    .post-line-title {
      color: var(--green-dark);
      font-weight: 950;
    }

    .post-line-meta {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 16px;
      font-weight: 700;
    }

    .post-line-price {
      color: var(--green-dark);
      font-weight: 950;
      white-space: nowrap;
    }

    .post-line-actions {
      display: flex;
      gap: 14px;
      margin-top: 10px;
    }

    .text-btn {
      min-height: 38px;
      padding: 5px 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      text-decoration: underline;
    }

    .text-btn.delete { color: var(--danger); }

    .add-post-type {
      width: 100%;
      margin-top: 12px;
    }

    .welding-choice {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .welding-list {
      display: grid;
      gap: 12px;
    }

    .welding-item {
      overflow: hidden;
      border: 2px solid var(--line);
      border-radius: 13px;
      background: #fff;
    }

    .welding-item.selected {
      border-color: var(--green);
      background: var(--green-soft);
    }

    .welding-select {
      display: grid;
      grid-template-columns: 27px minmax(0, 1fr);
      align-items: start;
      gap: 11px;
      width: 100%;
      padding: 15px;
      border: 0;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .welding-select:focus-visible {
      outline: 4px solid rgba(47, 150, 59, .18);
      outline-offset: -4px;
    }

    .weld-check {
      display: grid;
      width: 27px;
      height: 27px;
      place-items: center;
      border: 2px solid #8e9b91;
      border-radius: 7px;
      background: #fff;
      color: transparent;
    }

    .welding-select.selected .weld-check {
      border-color: var(--green);
      background: var(--green);
      color: #fff;
    }

    .welding-select.selected .weld-check::after {
      content: "✓";
      font-size: 17px;
      font-weight: 950;
    }

    .welding-select strong {
      display: block;
      color: var(--green-dark);
      font-size: 17px;
    }

    .welding-option-label {
      display: block;
      margin-top: 8px;
      font-weight: 900;
    }

    .welding-settings {
      display: grid;
      gap: 12px;
      padding: 0 15px 15px 53px;
    }

    .welding-quantity-label {
      display: block;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 900;
    }

    .welding-cost {
      display: grid;
      gap: 2px;
      padding: 12px 14px;
      border-radius: 10px;
      background: #fff;
      color: var(--green-dark);
    }

    .welding-cost strong { font-size: 19px; }

    .welding-cost small {
      color: var(--muted);
      font-size: 16px;
      font-weight: 750;
    }

    .posts-summary {
      margin-top: 18px;
      padding: 18px;
      border: 2px solid var(--green);
      border-radius: 14px;
      background: #fbfffb;
    }

    .posts-summary h3 { margin-bottom: 12px; }

    .result-row.grand-total {
      color: var(--green-dark);
      font-size: 24px;
      font-weight: 950;
    }

    .final-order-summary {
      margin-top: 20px;
      padding: 20px;
      border: 3px solid var(--green);
      border-radius: 16px;
      background: #fbfffb;
    }

    .final-order-summary h3 { margin-bottom: 5px; }

    .final-order-lead {
      margin-bottom: 15px;
      color: var(--muted);
      font-size: 17px;
      font-weight: 750;
    }

    .continue-order {
      width: 100%;
      min-height: 62px;
      margin-top: 18px;
      padding: 15px 20px;
      border: 0;
      border-radius: 12px;
      background: var(--green);
      color: #fff;
      font-size: 20px;
      font-weight: 950;
      cursor: pointer;
    }

    .continue-order:hover { background: var(--green-dark); }

    .continue-without-posts {
      width: 100%;
      margin-top: 10px;
    }

    .next-screen {
      padding: 4px;
    }

    .next-screen-check {
      display: grid;
      width: 54px;
      height: 54px;
      margin-bottom: 14px;
      place-items: center;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      font-size: 30px;
      font-weight: 950;
    }

    .next-screen p { font-size: 18px; }

    .order-ready-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      color: var(--green-dark);
      font-size: 26px;
      font-weight: 950;
    }

    .order-ready-check {
      display: inline-grid;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      place-items: center;
      border-radius: 5px;
      background: var(--green);
      color: #fff;
      font-size: 18px;
    }

    .order-section-title {
      margin: 0 0 8px;
      color: #687269;
      font-size: 16px;
      font-weight: 950;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .order-product-row {
      align-items: start;
      padding: 17px 0;
    }

    .order-product-copy > strong {
      display: block;
      color: var(--green-dark);
      font-size: 19px;
      font-weight: 950;
    }

    .order-dimensions {
      display: grid;
      gap: 3px;
      margin-top: 6px;
      color: var(--muted);
      font-size: 16px;
      font-weight: 750;
    }

    .detail-copy {
      display: grid;
      gap: 3px;
    }

    .detail-copy small {
      color: var(--muted);
      font-size: 16px;
      font-weight: 700;
    }

    .preliminary-note {
      margin: 20px 0 0;
      padding: 15px 17px;
      border-radius: 12px;
      background: #fff;
      color: var(--muted);
      font-size: 17px;
      font-weight: 700;
    }

    .order-actions {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .order-action,
    .order-action-link {
      display: flex;
      min-height: 58px;
      align-items: center;
      justify-content: center;
      padding: 12px 18px;
      border: 2px solid var(--green);
      border-radius: 12px;
      background: #fff;
      color: var(--green-dark);
      font-size: 18px;
      font-weight: 900;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
    }

    .order-action.primary {
      min-height: 68px;
      flex-direction: column;
      border-color: var(--green);
      background: var(--green);
      color: #fff;
      font-size: 20px;
      line-height: 1.25;
    }

    .order-action.primary small {
      margin-top: 3px;
      color: #fff;
      font-size: 17px;
      font-weight: 850;
    }

    .messenger-list {
      display: none;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .messenger-list.open { display: grid; }

    .messenger-link {
      display: flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      border-radius: 11px;
      color: #fff;
      font-size: 17px;
      font-weight: 900;
      text-decoration: none;
    }

    .messenger-link.viber { background: #7360f2; }
    .messenger-link.telegram { background: #2aabee; }
    .messenger-link.whatsapp { background: #25d366; }

    .save-options {
      display: none;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
    }

    .save-options.open { display: block; }

    .save-option {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 10px;
      width: 100%;
      padding: 15px 17px;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      font-size: 18px;
      font-weight: 850;
      text-align: left;
      cursor: pointer;
    }

    .save-option:last-child { border-bottom: 0; }
    .save-option:hover { background: var(--green-soft); }

    .save-option-icon { font-size: 21px; }

    .save-option small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 16px;
      font-weight: 650;
    }

    .action-toast {
      min-height: 24px;
      color: var(--green-dark);
      font-size: 16px;
      font-weight: 800;
      text-align: center;
    }

    .bottom-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .bottom-actions .order-action,
    .bottom-actions .order-action-link {
      min-height: 60px;
      border-color: var(--line);
      color: var(--ink);
    }

    .promo-line {
      margin: 12px 0 0;
      color: var(--ink);
      font-size: 16px;
      text-align: center;
    }

    .promo-line a {
      color: var(--green-dark);
      font-weight: 850;
    }

    .confirm-overlay {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(13, 28, 16, .56);
    }

    .confirm-dialog {
      width: min(100%, 440px);
      padding: 24px;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
    }

    .confirm-dialog h3 { margin-bottom: 8px; }
    .confirm-dialog p { margin-bottom: 18px; color: var(--muted); }

    .confirm-buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .confirm-buttons .order-action { min-height: 54px; }
    .confirm-buttons .danger-confirm { border-color: var(--green); background: var(--green); color: #fff; }

    .posts-error { margin-top: 10px; }

    .hidden { display: none !important; }

    .error {
      margin: 12px 0 0;
      color: var(--danger);
      font-size: 17px;
      font-weight: 850;
    }

    @media (max-width: 700px) {
      body { font-size: 18px; }

      .prototype-bar {
        padding: 10px 12px;
        font-size: 16px;
      }

      .calculator {
        width: 100%;
        margin: 0;
        padding: 16px 12px 40px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .header {
        align-items: flex-start;
        margin-bottom: 16px;
      }

      .installation-benefit {
        margin-top: 16px;
        padding: 15px 14px;
        font-size: 18px;
      }

      h1 { font-size: 29px; }
      h2 { font-size: 27px; }

      .delivery-card,
      .field,
      .result { padding: 18px 14px; }

      .city-row { grid-template-columns: 1fr; }

      .primary-btn {
        width: 100%;
        min-height: 60px;
        font-size: 19px;
      }

      .delivery-result {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 16px;
      }

      .delivery-price { text-align: left; }

      .category-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .category-btn {
        width: 100%;
        min-height: 68px;
        font-size: 24px;
      }

      .model-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .standard-guide { padding: 17px; }

      .standard-guide strong { font-size: 20px; }

      .standard-sizes {
        font-size: 21px;
        line-height: 1.35;
      }

      .field-title { font-size: 21px; }

      .choice {
        min-height: 60px;
        padding: 16px;
      }

      .choice-label { font-size: 18px; }
      .choice-note { font-size: 17px; }
      .width-help { font-size: 17px; }

      .width-fields { grid-template-columns: 1fr; }

      .included-note,
      .important,
      .order-terms { font-size: 17px; }

      .result { font-size: 18px; }

      .result-row.total { font-size: 24px; }

      .result-row { grid-template-columns: 1fr; gap: 3px; }
      .result-row > span:last-child { text-align: left; }

      .step-actions { align-items: stretch; }

      .back-btn { width: 100%; }

      .post-options,
      .welding-choice { grid-template-columns: 1fr; }

      .post-step { padding: 16px 13px; }

      .post-line-main { grid-template-columns: 1fr; }

      .welding-settings { padding-left: 15px; }

      .post-line-price { white-space: normal; }

      .final-order-summary { padding: 18px 14px; }

      .next-screen { padding: 0; }

      .order-ready-title { font-size: 24px; }

      .order-product-row { grid-template-columns: 1fr; gap: 7px; }

      .order-product-row > span:last-child { text-align: left; }

      .order-action,
      .order-action-link { font-size: 18px; }

      .messenger-list { grid-template-columns: 1fr; }

      .bottom-actions { grid-template-columns: 1fr; }

      .promo-line { font-size: 16px; line-height: 1.5; }

      .confirm-buttons { grid-template-columns: 1fr; }
    }