/* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Montserrat', system-ui, sans-serif;
      background: #f3f4f6;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    /* ── Animation ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-up { animation: fadeUp 0.4s ease-out both; }

    /* ── Card ── */
    .plugin-card {
      max-width: 580px;
      width: 100%;
      margin: 0 auto;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
      overflow: hidden;
    }
    .plugin-card-content {
      padding: 40px 48px 32px;
    }
    @media (max-width: 600px) {
      .plugin-card { max-width: 100%; }
      .plugin-card-content { padding: 28px 20px; }
    }

    /* ── Title ── */
    .widget-title {
      color: #0E7569;
      font-weight: 700;
      font-size: 21px;
      text-align: center;
      margin-bottom: 24px;
      line-height: 1.3;
    }

    /* ── Form layout ── */
    .form-fields { display: flex; flex-direction: column; gap: 20px; }

    /* ── Field group ── */
    .field-group { display: flex; flex-direction: column; gap: 6px; }
    .field-label {
      font-size: 13px;
      font-weight: 500;
      color: #374151;
    }

    /* ── Select & Input shared ── */
    .field-select,
    .field-input {
      width: 100%;
      border-radius: 8px;
      background: #fff;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-size: 14px;
      color: #111827;
      padding: 11px 14px;
      border: 1px solid #e5e7eb;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      -webkit-appearance: none;
      appearance: none;
    }
    .field-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
    .field-select:focus,
    .field-input:focus {
      border-color: #0E7569;
      box-shadow: 0 0 0 3px rgba(14,117,105,0.08);
    }
    .field-input.has-error {
      border-color: #fca5a5;
    }
    .field-input.has-error:focus {
      border-color: #dc2626;
      box-shadow: 0 0 0 3px rgba(220,38,38,0.08);
    }
    .field-select:disabled,
    .field-input:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    /* ── Helper & error text ── */
    .helper-text { font-size: 11.5px; color: #9ca3af; }
    .error-text  { font-size: 11.5px; color: #dc2626; }

    /* ── Button ── */
    .btn-primary {
      width: 100%;
      border: none;
      border-radius: 8px;
      padding: 14px;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      background-color: #0E7569;
      cursor: pointer;
      transition: background-color 0.15s;
    }
    .btn-primary:hover:not(:disabled) { background-color: #0b6158; }
    .btn-primary:disabled {
      background-color: rgba(14,117,105,0.4);
      cursor: not-allowed;
    }
    .btn-primary:focus-visible {
      outline: 2px solid #0E7569;
      outline-offset: 2px;
    }

    /* ── Footer links ── */
    .footer-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding-top: 8px;
      font-size: 13px;
    }
    .footer-links p { text-align: center; color: #6b7280; }
    .footer-links a {
      color: #0E7569;
      font-weight: 600;
      text-decoration: none;
    }
    .footer-links a:hover { text-decoration: underline; }

    /* ── Grade bar ── */
    .grade-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 0;
    }
    .grade-pill {
      width: 80px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    .grade-pill:first-child { border-radius: 14px 0 0 14px; }
    .grade-pill:last-child  { border-radius: 0 14px 14px 0; }
    .grade-pill span {
      font-family: 'Inter', sans-serif;
      font-size: 32px;
      font-weight: 600;
      line-height: 28px;
      color: #fff;
    }

    /* Active pill overlay */
    .grade-pill-active {
      position: absolute;
      width: 90px;
      height: 78px;
      border-radius: 10px;
      border: 3px solid #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    .grade-pill-active span {
      font-family: 'Inter', sans-serif;
      font-size: 48px;
      font-weight: 700;
      line-height: 40px;
      color: #fff;
    }

    /* ── Results info ── */
    .results-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: #374151;
      font-size: 13.5px;
    }
    .results-info strong { font-weight: 700; }

    /* ── Results layout ── */
    .results-layout { display: flex; flex-direction: column; gap: 28px; }

    /* ── Durability gauge ── */
    .gauge-wrapper { position: relative; padding-top: 64px; }
    .gauge-cursor {
      position: absolute;
      top: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateX(-50%);
    }
    .gauge-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #1a2b3c;
      border-radius: 9999px;
      padding: 8px 20px;
      white-space: nowrap;
    }
    .gauge-badge-value {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
    }
    .gauge-badge-label {
      font-size: 11px;
      color: rgba(255,255,255,0.8);
      line-height: 1.2;
    }
    .gauge-triangle {
      width: 0; height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid #1a2b3c;
      margin-bottom: 12px;
    }
    .gauge-bar {
      display: flex;
      width: 100%;
      height: 12px;
      border-radius: 6px;
      overflow: hidden;
    }
    .gauge-segment { height: 100%; }

    /* ── Info box (optional grade description) ── */
    .info-box {
      background: #f9fafb;
      border-radius: 10px;
      padding: 16px 20px;
      font-size: 13px;
      color: #374151;
      line-height: 1.55;
      text-align: center;
    }

    /* ── Hide views ── */
    .view-hidden { display: none; }

    /* ── Number input hide spinner ── */
    .field-input[type=number]::-webkit-inner-spin-button,
    .field-input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .field-input[type=number] { -moz-appearance: textfield; }

    /* ── Responsive grade bar ── */
    @media (max-width: 480px) {
      .grade-pill { width: 56px; height: 52px; }
      .grade-pill span { font-size: 24px; }
      .grade-pill-active { width: 66px; height: 62px; }
      .grade-pill-active span { font-size: 36px; }
    }