.calc {
      max-width: 760px; margin: 0 auto; background: var(--card);
      border-radius: var(--radius); box-shadow: 0 6px 24px rgba(2,8,20,.06);
      overflow: hidden; border: 1px solid #e5e7eb;
    }
    .calc header {
      padding: 18px 22px;
      border-bottom: 1px solid #e5e7eb;
    }
    .calc header h1 {
      margin: 0; font-size: 18px; letter-spacing: .2px;
    }
    .content { padding: 22px; display: grid; gap: 18px; }
    .grid {
      display: grid; gap: 14px;
      grid-template-columns: repeat(12, 1fr);
      align-items: end;
    }
    .col-6 { grid-column: span 6; }
    .col-4 { grid-column: span 4; }
    .col-3 { grid-column: span 3; }
    .col-2 { grid-column: span 2; }
    label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
    input[type="number"] {
      width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #d1d5db;
      font-size: 16px; background: #000; color: var(--ink);
      transition: border-color .15s, box-shadow .15s;
      appearance: textfield;
    }
    input[type="number"]:focus {
      outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring);
    }
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .actions { display: flex; gap: 12px; align-items: center; }
    button {
      appearance: none; border: 0; background: var(--brand); color: #fff;
      padding: 10px 16px; border-radius: 10px; font-weight: 600; cursor: pointer;
      box-shadow: 0 6px 16px rgba(14,165,233,.25);
    }
    button:active { transform: translateY(1px); }
    .hint { font-size: 12px; color: var(--muted); }
    .error { color: var(--warn); font-size: 13px; }
    .results {
      display: grid; gap: 14px; grid-template-columns: repeat(3,1fr);
      border-top: 1px dashed #e5e7eb; padding-top: 16px;
    }
    ._card {
      grid-column: span 4;
      border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px;
      background: #fff;
    }
    ._card h3 { margin: 0 0 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
    .val { font-size: 20px; font-weight: 700; letter-spacing: .3px; }
    .small { font-size: 12px; color: var(--muted); margin-top: 6px; }
    .footnote {
      font-size: 12px; color: var(--muted); margin-top: 8px;
    }
    @media (max-width: 720px) {
      .col-6, .col-4, .card { grid-column: span 12; }
      .actions { flex-direction: column; align-items: stretch; }
      button { width: 100%; }
    }