.container {
      --primary: #0E7490;   /* teal */
      --accent:  #F59E0B;   /* amber */
      --bg:      #F8FAFC;   /* neutral background */
      --text:    #0F172A;   /* slate-900 */
      --border:  #CBD5E1;   /* slate-300 */

      max-width: 960px;
      margin: 0 auto;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
      background: var(--bg);
      min-height: 100vh;
      padding: 24px;
      box-sizing: border-box;
      color: var(--text);
    }

    /* Scope resets to container children only */
    .container * { box-sizing: border-box; }

    .dri-header { text-align: left; margin-bottom: 24px; }
    .dri-header h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
    .dri-header p { margin-top: 8px; line-height: 1.6; color: #334155; }

    /* Layout */
    .calculator-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 8px;
      grid-template-areas: "input results";
    }

    .card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }

    .card-title {
      font-size: 1.125rem;
      font-weight: 700;
      padding-bottom: 10px;
      margin-bottom: 16px;
      border-bottom: 3px solid var(--primary);
      color: var(--text);
      text-align: left;
    }

    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: #1f2937; }

    .radio-group, .inline-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .radio-option {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 12px; border: 2px solid var(--border); border-radius: 999px;
      background: #fff; cursor: pointer; transition: border-color .2s, background .2s, color .2s;
    }
    .radio-option:hover { border-color: var(--primary); }
    .radio-option.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
    .radio-option input[type="radio"] { margin: 0; }

    .select-field, .input-field {
      width: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: 10px;
      font-size: 1rem; background: #fff; transition: border-color .2s, box-shadow .2s;
    }
    .select-field:focus, .input-field:focus {
      outline: none; border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(14, 116, 144, .12);
    }

    .height-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    .primary-btn {
      width: 100%; padding: 14px; border: none; border-radius: 10px;
      background: var(--primary); color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .primary-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(14,116,144,.25); }
    .secondary-btn {
      padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; cursor: pointer;
      font-weight: 600; color: #0f172a;
      transition: background .15s ease, border-color .15s ease;
    }
    .secondary-btn:hover { background: #f1f5f9; border-color: #94a3b8; }

    /* Results card with subtle accent line */
    .results .result-item {
      border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fff;
    }
    .results .result-item h3 { font-size: .95rem; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
    .results .result-item p { font-size: 1.15rem; font-weight: 700; color: var(--primary); }

    /* Info section */
    .info-section { margin-top: 24px; }
    .info-section h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
    .info-section p { color: #334155; line-height: 1.6; margin-bottom: 10px; }
    .info-section ul { list-style: disc; padding-left: 1.25rem; color: #334155; }
    .info-section li { padding: 6px 0; border-bottom: 1px dashed #e2e8f0; }

    /* Scoped utilities */
    .container .error { color: #b91c1c; font-size: .9rem; margin-top: 6px; }
    .container .muted { color: #64748b; font-size: .92rem; }
    .container .hidden { display: none; }
    .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .card-input { grid-area: input; }
    .card-results { grid-area: results; }

    @media (max-width: 820px) {
      .calculator-wrapper { 
        grid-template-columns: 1fr; 
        grid-template-areas: 
          "input"
          "results";
      }
    }