* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .container {
      background: #ffffff;
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      width: 100%;
      max-width: 900px;
      animation: fadeIn 0.5s ease-in;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    h1 {
      text-align: center;
      margin-bottom: 10px;
      color: #2c3e50;
      font-size: 2.2em;
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .subtitle {
      text-align: center;
      color: #7f8c8d;
      margin-bottom: 35px;
      font-size: 0.95em;
    }

    .table-wrapper {
      overflow-x: auto;
      margin-bottom: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: #fff;
    }

    table th {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      padding: 16px 12px;
      text-align: left;
      font-weight: 600;
      font-size: 0.9em;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    table th:first-child {
      border-top-left-radius: 12px;
    }

    table th:last-child {
      border-top-right-radius: 12px;
      text-align: center;
    }

    table td {
      padding: 12px;
      border-bottom: 1px solid #ecf0f1;
      background: #fff;
      transition: background 0.2s ease;
    }

    table tr:hover td {
      background: #f8f9fa;
    }

    table tr:last-child td:first-child {
      border-bottom-left-radius: 12px;
    }

    table tr:last-child td:last-child {
      border-bottom-right-radius: 12px;
    }

    input, select {
      padding: 10px 12px;
      width: 100%;
      border: 2px solid #e0e6ed;
      border-radius: 8px;
      font-size: 0.95em;
      transition: all 0.3s ease;
      background: #fff;
      font-family: inherit;
    }

    input:focus, select:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    input::placeholder {
      color: #b0b7c3;
    }

    .btn {
      padding: 12px 24px;
      margin: 5px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.95em;
      transition: all 0.3s ease;
      font-family: inherit;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-add {
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
      color: #fff;
      width: 100%;
      font-size: 1em;
    }

    .btn-remove {
      background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
      color: #fff;
      padding: 8px 16px;
      font-size: 0.85em;
    }

    .btn-calc {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      display: block;
      margin: 25px auto;
      width: 100%;
      font-size: 1.1em;
      padding: 16px;
    }

    .button-group {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .result {
      text-align: center;
      font-size: 1.8em;
      padding: 25px;
      border-radius: 15px;
      font-weight: 700;
      margin-top: 20px;
      opacity: 0;
      transform: scale(0.9);
      transition: all 0.4s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

    .result.show {
      opacity: 1;
      transform: scale(1);
    }

    .high { 
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
      color: #fff;
    }

    .medium { 
      background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
      color: #fff;
    }

    .low { 
      background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
      color: #fff;
    }

    .action-cell {
      text-align: center;
    }

    @media (max-width: 768px) {
      .container {
        padding: 25px;
      }

      h1 {
        font-size: 1.8em;
      }

      table th, table td {
        padding: 10px 8px;
        font-size: 0.9em;
      }

      .result {
        font-size: 1.4em;
      }
    }

    .empty-state {
      text-align: center;
      padding: 40px 20px;
      color: #95a5a6;
    }

    .empty-state svg {
      width: 80px;
      height: 80px;
      margin-bottom: 15px;
      opacity: 0.3;
    }