:root {
      --paper: #F5F7FA;
      --line: #D6DEE9;
      --line-strong: #B9C5D6;
      --ink: #0F2038;
      --ink-soft: #51637D;
      --ink-faint: #8695AB;
      --accent: #2555E7;
      --accent-deep: #173CAE;
      --accent-soft: #E8EDFC;
      --ok: #0E9F6E;
      --ok-soft: #E4F7EF;
      --warn: #C97A1F;
      --danger: #D64545;
      --card: #FFFFFF;
      --radius: 14px;
      --shadow: 0 1px 2px rgba(15, 32, 56, .04), 0 8px 24px -12px rgba(15, 32, 56, .18);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--paper);
      background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 40px 40px;
      background-position: -1px -1px;
      color: var(--ink);
      font-family: 'Inter', "Hiragino Sans", "Yu Gothic", sans-serif;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }

    .display {
      font-family: 'Space Grotesk', 'Hiragino Sans', sans-serif;
    }

    .mono {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

    /* ---------- Top bar ---------- */
    .topbar {
      max-width: 1220px;
      margin: 0 auto;
      padding: 36px 24px 18px;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      row-gap: 8px;
      column-gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: .14em;
      color: var(--accent-deep);
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .eyebrow-label {
      white-space: nowrap;
    }

    .eyebrow .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
      flex: none;
    }

    .eyebrow .rule {
      flex: 1 1 50px;
      min-width: 20px;
      height: 1px;
      background: var(--line-strong);
    }

    .eyebrow-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid #2E7D52;
      background: #E8F5EE;
      color: #1F6F4C;
      text-decoration: none;
      font-size: 11px;
      line-height: 1;
      letter-spacing: .08em;
      font-weight: 700;
      white-space: nowrap;
      transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
      box-shadow: 0 4px 12px rgba(46, 125, 82, 0.12);
    }

    .eyebrow-back:hover {
      background: #D9F3E8;
      transform: translateY(-1px);
    }

    @media (max-width: 640px) {
      .eyebrow {
        font-size: 10px;
        letter-spacing: .08em;
      }

      .eyebrow-label {
        white-space: normal;
      }

      .eyebrow .rule {
        flex-basis: 100%;
        order: 3;
      }

      .eyebrow-back {
        width: 100%;
        order: 4;
        letter-spacing: .06em;
      }
    }

    h1.title {
      font-size: clamp(28px, 4vw, 40px);
      line-height: 1.15;
      margin: 0 0 8px;
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .sub {
      color: var(--ink-soft);
      font-size: 15px;
      max-width: 680px;
      line-height: 1.7;
      margin: 0;
    }

    /* ---------- Layout ---------- */
    .layout {
      max-width: 1220px;
      margin: 0 auto;
      padding: 12px 24px 80px;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 24px;
      align-items: start;
    }

    @media (max-width: 960px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 26px 26px 28px;
    }

    .panel+.panel {
      margin-top: 20px;
    }

    .panel-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px dashed var(--line-strong);
    }

    .panel-head .num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--ink-faint);
      letter-spacing: .1em;
    }

    .panel-head h2 {
      font-size: 17px;
      margin: 2px 0 0;
      font-weight: 600;
    }

    .panel-head .count-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      background: var(--accent-soft);
      color: var(--accent-deep);
      padding: 3px 10px;
      border-radius: 99px;
      font-weight: 600;
    }

    label.field {
      display: block;
      margin-bottom: 20px;
    }

    label.field:last-child {
      margin-bottom: 0;
    }

    .field-label {
      display: block;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink-soft);
      margin-bottom: 8px;
      letter-spacing: .02em;
    }

    .field-hint {
      font-size: 11.5px;
      color: var(--ink-faint);
      margin-top: 6px;
      line-height: 1.5;
    }

    select,
    input[type="text"],
    input[type="number"] {
      width: 100%;
      font: inherit;
      font-size: 14.5px;
      padding: 11px 12px;
      border-radius: 9px;
      border: 1px solid var(--line-strong);
      background: var(--paper);
      color: var(--ink);
      appearance: none;
      -webkit-appearance: none;
    }

    select {
      background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
      background-position: calc(100% - 18px) center, calc(100% - 13px) center;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 34px;
    }

    select:focus,
    input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .repair-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .repair-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 13px;
      border: 1px solid var(--line);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color .12s, background .12s;
    }

    .repair-item:hover {
      border-color: var(--accent);
    }

    .repair-item.checked {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .repair-item.disabled {
      cursor: not-allowed;
      opacity: .45;
    }

    .repair-item input {
      margin-top: 3px;
      accent-color: var(--accent);
      width: 16px;
      height: 16px;
      flex: none;
    }

    .repair-item .txt {
      flex: 1;
    }

    .repair-item .txt .name {
      font-size: 14px;
      font-weight: 600;
    }

    .repair-item .txt .desc {
      font-size: 12px;
      color: var(--ink-faint);
      margin-top: 2px;
      line-height: 1.5;
    }

    .repair-item .price {
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      color: var(--ink-soft);
      white-space: nowrap;
      padding-top: 2px;
    }

    .qty-row {
      margin-top: 22px;
    }

    .qty-line {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .qty-box {
      width: 132px;
      flex: none;
    }

    .qty-stepper {
      display: flex;
      align-items: stretch;
      border: 1px solid var(--line-strong);
      border-radius: 9px;
      overflow: hidden;
    }

    .qty-stepper button {
      width: 36px;
      border: none;
      background: var(--paper);
      color: var(--ink);
      font-size: 16px;
      cursor: pointer;
      font-family: 'JetBrains Mono', monospace;
    }

    .qty-stepper button:hover {
      background: var(--accent-soft);
      color: var(--accent-deep);
    }

    .qty-stepper input {
      border: none;
      text-align: center;
      width: 100%;
      border-left: 1px solid var(--line-strong);
      border-right: 1px solid var(--line-strong);
      border-radius: 0;
      -moz-appearance: textfield;
      appearance: textfield;
    }

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

    .preset-row {
      display: flex;
      gap: 6px;
      flex: 1;
    }

    .preset-btn {
      flex: 1;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      margin-top: 25px;
      padding: 0;
      height: 44px;
      border-radius: 9px;
      border: 1px solid var(--line-strong);
      background: var(--paper);
      color: var(--ink-soft);
      cursor: pointer;
    }

    .preset-btn:hover {
      border-color: var(--accent);
      color: var(--accent-deep);
    }

    .add-btn {
      width: 100%;
      margin-top: 14px;
      font: inherit;
      font-weight: 700;
      font-size: 14px;
      border-radius: 9px;
      padding: 0 18px;
      height: 46px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .add-btn:hover {
      opacity: .88;
    }

    .add-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 0;
      border-bottom: 1px solid var(--line);
    }

    .toggle-row:last-child {
      border-bottom: none;
    }

    .toggle-row .txt .name {
      font-size: 14px;
      font-weight: 500;
    }

    .toggle-row .txt .desc {
      font-size: 11.5px;
      color: var(--ink-faint);
      margin-top: 2px;
    }

    .switch {
      position: relative;
      width: 38px;
      height: 22px;
      flex: none;
    }

    .switch input {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      cursor: pointer;
    }

    .switch .track {
      position: absolute;
      inset: 0;
      background: var(--line-strong);
      border-radius: 99px;
      transition: .15s;
    }

    .switch .thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      transition: .15s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    }

    .switch input:checked+.track {
      background: var(--accent);
    }

    .switch input:checked+.track+.thumb {
      transform: translateX(16px);
    }

    /* ---------- Cart list (left, no-print) ---------- */
    .cart-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cart-empty {
      font-size: 13px;
      color: var(--ink-faint);
      text-align: center;
      padding: 24px 0;
      border: 1px dashed var(--line-strong);
      border-radius: 10px;
    }

    .cart-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--paper);
    }

    .cart-row .info {
      flex: 1;
      min-width: 0;
    }

    .cart-row .info .model {
      font-size: 13.5px;
      font-weight: 700;
    }

    .cart-row .info .badges {
      margin-top: 4px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .cart-row .badge {
      font-size: 10.5px;
      background: var(--accent-soft);
      color: var(--accent-deep);
      padding: 2px 7px;
      border-radius: 99px;
      font-weight: 600;
    }

    .cart-row .unit-price {
      font-size: 11px;
      color: var(--ink-faint);
      margin-top: 4px;
      font-family: 'JetBrains Mono', monospace;
    }

    .cart-row .qty-mini {
      display: flex;
      align-items: center;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      overflow: hidden;
      flex: none;
    }

    .cart-row .qty-mini button {
      width: 26px;
      height: 28px;
      border: none;
      background: #fff;
      cursor: pointer;
      font-family: 'JetBrains Mono', monospace;
    }

    .cart-row .qty-mini button:hover {
      background: var(--accent-soft);
    }

    .cart-row .qty-mini span {
      width: 38px;
      text-align: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      font-weight: 600;
    }

    .cart-row .remove {
      flex: none;
      width: 28px;
      height: 28px;
      border-radius: 7px;
      border: 1px solid var(--line-strong);
      background: #fff;
      color: var(--danger);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
    }

    .cart-row .remove:hover {
      background: #FDEDED;
      border-color: var(--danger);
    }

    .cart-total-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px dashed var(--line-strong);
      font-size: 13px;
      color: var(--ink-soft);
    }

    .cart-total-line b {
      font-family: 'JetBrains Mono', monospace;
      color: var(--ink);
      font-size: 15px;
    }

    /* ---------- Estimate slip ---------- */
    .slip {
      position: relative;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 34px 34px 30px;
    }

    .mark {
      position: absolute;
      width: 14px;
      height: 14px;
      pointer-events: none;
    }

    .mark::before,
    .mark::after {
      content: "";
      position: absolute;
      background: var(--line-strong);
    }

    .mark::before {
      width: 100%;
      height: 1px;
      top: 50%;
      left: 0;
    }

    .mark::after {
      width: 1px;
      height: 100%;
      left: 50%;
      top: 0;
    }

    .mark.tl {
      top: 14px;
      left: 14px;
    }

    .mark.tr {
      top: 14px;
      right: 14px;
    }

    .mark.bl {
      bottom: 14px;
      left: 14px;
    }

    .mark.br {
      bottom: 14px;
      right: 14px;
    }

    .slip-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 2px solid var(--ink);
    }

    .slip-head h2.doc-title {
      font-size: 16px;
      margin: 0 0 4px;
      letter-spacing: .06em;
    }

    .slip-meta {
      font-size: 11.5px;
      color: var(--ink-soft);
      font-family: 'JetBrains Mono', monospace;
      line-height: 1.9;
    }

    .slip-meta b {
      color: var(--ink);
      font-weight: 600;
    }

    .issuer {
      text-align: right;
      font-size: 12.5px;
      line-height: 1.65;
      color: var(--ink-soft);
      max-width: 230px;
    }

    .issuer [contenteditable] {
      outline: none;
      border-bottom: 1px dashed transparent;
    }

    .issuer [contenteditable]:hover,
    .issuer [contenteditable]:focus {
      border-bottom: 1px dashed var(--accent);
    }

    .issuer .shopname {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .sim-banner {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 22px;
      padding: 13px 16px;
      background: #FFF6EA;
      border: 1px solid #F0D6A8;
      border-radius: 10px;
      color: #8A5A15;
      font-size: 12.5px;
      line-height: 1.7;
    }

    .sim-banner svg {
      flex: none;
      margin-top: 1px;
      color: var(--warn);
    }

    .sim-banner b {
      color: #6E4200;
    }

    .summary-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 22px;
    }

    .summary-cell {
      background: var(--accent-soft);
      border: 1px solid #C9D6FA;
      border-radius: 10px;
      padding: 12px 14px;
    }

    .summary-cell .lbl {
      font-size: 10.5px;
      color: var(--accent-deep);
      letter-spacing: .06em;
    }

    .summary-cell .val {
      font-size: 19px;
      font-weight: 700;
      font-family: 'Space Grotesk', sans-serif;
      margin-top: 2px;
    }

    .summary-cell.alt {
      background: var(--ok-soft);
      border-color: #BEE9D4;
    }

    .summary-cell.alt .lbl {
      color: #0B7D57;
    }

    table.items {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 4px;
    }

    table.items thead th {
      text-align: left;
      font-size: 10.5px;
      letter-spacing: .06em;
      color: var(--ink-faint);
      font-weight: 600;
      padding: 0 0 8px;
      border-bottom: 1px solid var(--line-strong);
    }

    table.items thead th.num {
      text-align: right;
    }

    table.items tbody td {
      padding: 11px 0;
      font-size: 13px;
      border-bottom: 1px dashed var(--line);
      vertical-align: top;
    }

    table.items tbody td.num {
      text-align: right;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      white-space: nowrap;
    }

    table.items tbody td .item-name {
      font-weight: 700;
      font-size: 13.5px;
    }

    table.items tbody td .item-sub {
      font-size: 11px;
      color: var(--ink-faint);
      margin-top: 3px;
      line-height: 1.6;
    }

    table.items tbody tr.group-row td {
      border-bottom: 1px dashed var(--line);
    }

    table.items tbody tr.sum-row td {
      border-bottom: 1px solid var(--line-strong);
      background: var(--paper);
      font-weight: 600;
    }

    table.items tbody tr.empty td {
      text-align: center;
      color: var(--ink-faint);
      font-size: 13px;
      padding: 26px 0;
      border-bottom: 1px dashed var(--line);
    }

    table.items tbody tr.ship-row td {
      color: var(--ink-soft);
    }

    .totals {
      margin-top: 14px;
      padding-top: 6px;
    }

    .totals .row {
      display: flex;
      justify-content: space-between;
      font-size: 13.5px;
      padding: 7px 0;
      color: var(--ink-soft);
    }

    .totals .row .num {
      font-family: 'JetBrains Mono', monospace;
      color: var(--ink);
    }

    .totals .row.grand {
      margin-top: 8px;
      padding-top: 16px;
      border-top: 2px solid var(--ink);
      align-items: baseline;
    }

    .totals .row.grand .lbl {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }

    .totals .row.grand .num {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 30px;
      font-weight: 700;
      color: var(--accent-deep);
    }

    .notes {
      margin-top: 26px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      font-size: 11px;
      line-height: 1.85;
      color: var(--ink-faint);
    }

    .notes .lbl {
      font-size: 10.5px;
      letter-spacing: .08em;
      color: var(--ink-soft);
      font-weight: 600;
      margin-bottom: 6px;
    }

    .slip-foot {
      margin-top: 26px;
      padding-top: 14px;
      border-top: 1px dashed var(--line-strong);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .validity {
      font-size: 11px;
      color: var(--ink-faint);
    }

    .btn {
      font: inherit;
      font-weight: 600;
      font-size: 13.5px;
      border-radius: 9px;
      padding: 11px 18px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: transform .08s, opacity .12s;
    }

    .btn:hover {
      opacity: .88;
    }

    .btn:active {
      transform: translateY(1px);
    }

    footer.page-foot {
      max-width: 1220px;
      margin: 0 auto;
      padding: 0 24px 40px;
      font-size: 11.5px;
      color: var(--ink-faint);
      line-height: 1.8;
    }

    /* ---------- Print ---------- */
    @media print {
      body {
        background: #fff !important;
      }

      .topbar,
      .panel,
      footer.page-foot,
      .slip-foot .btn {
        display: none !important;
      }

      .layout {
        display: block;
        max-width: none;
        padding: 0;
        margin: 0;
      }

      .slip {
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
      }

      .mark {
        display: none;
      }

      table.items {
        page-break-inside: auto;
      }

      table.items tr {
        page-break-inside: avoid;
      }

      table.items thead {
        display: table-header-group;
      }

      @page {
        size: A4;
        margin: 16mm;
      }
    }