* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: #f1f3f5; color: #212529; }
  .wrap { max-width: 520px; margin: 0 auto; padding: 0 12px 40px; }
  header { background: #1b5e20; color: #fff; padding: 18px 12px; text-align: center; }
  header img { height: 56px; vertical-align: middle; }
  header h1 { font-size: 18px; margin-top: 8px; }
  header p { font-size: 12px; opacity: .9; margin-top: 4px; }
  .steps { display: flex; gap: 6px; margin: 14px 0; }
  .step { flex: 1; background: #fff; border-radius: 10px; padding: 10px 6px; text-align: center; font-size: 11px; border: 2px solid #e0e0e0; }
  .step b { display: block; font-size: 16px; color: #1b5e20; }
  .step.on { border-color: #1b5e20; }
  .card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .card h2 { font-size: 16px; margin-bottom: 12px; color: #1b5e20; }
  label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
  input[type=text], input[type=number], select {
    width: 100%; font-size: 18px; padding: 12px; border: 2px solid #ced4da;
    border-radius: 10px; background: #fff;
  }
  input:focus, select:focus { border-color: #1b5e20; outline: none; }
  .row2 { display: flex; gap: 8px; }
  .row2 > div { flex: 1; }
  .btn {
    display: block; width: 100%; border: none; border-radius: 10px;
    padding: 14px; font-size: 17px; font-weight: 700; margin-top: 14px;
    cursor: pointer; text-align: center; text-decoration: none;
  }
  .btn-go { background: #1b5e20; color: #fff; }
  .btn-go:disabled { background: #9e9e9e; }
  .btn-warn { background: #ef6c00; color: #fff; }
  .result { display: none; margin-top: 14px; border-radius: 10px; padding: 14px; font-size: 14px; }
  .result.ok { display: block; background: #e8f5e9; border: 1px solid #a5d6a7; }
  .result.warn { display: block; background: #fff8e1; border: 1px solid #ffe082; }
  .result.err { display: block; background: #ffebee; border: 1px solid #ef9a9a; }
  .result table { width: 100%; border-collapse: collapse; margin: 8px 0; }
  .result td { padding: 4px 2px; vertical-align: top; }
  .result td.k { color: #555; width: 110px; }
  .bignum { font-size: 40px; font-weight: 800; color: #1b5e20; text-align: center; margin: 8px 0; }
  .item { border-bottom: 1px solid #eee; padding: 10px 2px; font-size: 13px; }
  .item:last-child { border-bottom: none; }
  .item b { font-size: 14px; }
  .badge { display: inline-block; background: #e8f5e9; color: #1b5e20; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 4px; }
  .muted { color: #757575; font-size: 12px; }
  .spin { text-align: center; padding: 16px; color: #555; font-size: 14px; }
  .loader { width: 38px; height: 38px; margin: 0 auto 10px; border: 4px solid #c8e6c9; border-top-color: #1b5e20; border-radius: 50%; animation: putar .9s linear infinite; }
  @keyframes putar { to { transform: rotate(360deg); } }
  footer { text-align: center; font-size: 11px; color: #9e9e9e; margin-top: 18px; line-height: 1.6; }