
    body { font-family: Inter, sans-serif; }
    .tool-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: 0 3px 12px rgba(0,0,0,.04);
    }
    .tab-btn {
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      border: 1px solid #e5e7eb;
      background: #fff;
      color: #6b7280;
    }
    .tab-btn.active {
      background: #10b981;
      color: #fff;
      border-color: #10b981;
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }
    .preset-btn {
      border: 1px solid #d1d5db;
      border-radius: 0.6rem;
      padding: 0.5rem 0.75rem;
      text-align: left;
      background: #fff;
      transition: all 0.15s ease;
      font-size: 0.75rem;
      line-height: 1.3;
      cursor: pointer;
    }
    .preset-btn:hover { background: #f0fdf4; border-color: #10b981; }
    .result-box {
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 0.75rem;
      padding: 1.25rem;
    }
    .model-row { transition: background 0.1s; }
    .model-row:hover { background: #f9fafb; }
    .efficiency-bar-wrap { background: #e5e7eb; border-radius: 999px; height: 6px; flex:1; overflow:hidden; }
    .efficiency-bar { height: 6px; border-radius: 999px; transition: width 0.4s ease; }
    .badge {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .badge-green { background: #d1fae5; color: #065f46; }
    .badge-yellow { background: #fef3c7; color: #92400e; }
    .badge-red { background: #fee2e2; color: #991b1b; }
    select, input[type=number] { outline: none; }
  