:root {
    --primary-gradient: linear-gradient(90deg, #3f41a3 0%, #222 100%);
    --surface-dark: #f0f0f0;
    --surface: #f7f7f7;
    --surface-hover: #eaeaea;
    --border-light: #d0d0d0;
    --highlight: #0d9488;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
    --secondary: #468ae4;
    --white: #ffffff;
    --text: #222222;
    --muted: #666666;
    --icon-size: 28px;
    --radius: 16px;
    --gap: 24px;
    --transition: 0.22s cubic-bezier(.7, .17, .38, .97);
    }

    html, body {
      font-family: 'Inter', Arial, sans-serif;
      background: var(--background);
      overflow-x: hidden;
      font-size: 17px;
    }
    .logo1 {
      font-weight: 900;
      font-size: 1.5rem;
      letter-spacing: 1px;
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    /* MAIN CONTENT */
    main {
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }
    .aps-calculator-container {
      background: var(--surface);
      border-radius: var(--radius-lg);
      max-width: 768px;
      width: 100%;
      padding: 32px 34px;
      margin: 0 auto;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .form-title {
      font-size: 2.1rem;
      font-weight: 800;
      background: var(--primary-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent;
      margin-bottom: 10px;
      text-align: center;
    }
    .form-desc {
      font-size: 1rem;
      color: var(--muted);
      margin-bottom: 30px;
      text-align: center;
    }
    form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 30px;
    }
    .subjects-list {
      display: grid;
      grid-template-columns: 1fr 100px 60px;
      gap: 16px;
      align-items: center;
      width: 100%;
    }
    .subject-label {
      font-weight: 600;
      color: var(--secondary);
    }
    .subject-input,
    .percentage-input {
      width: calc(100%);
      padding: 10px 12px;
      border-radius: var(--radius);
      border: 1.5px solid var(--border-light);
      outline: none;
      background: var(--surface-hover);
      color: var(--text);
      font-size: 1rem;
      font-family: inherit;
      transition: border-color var(--transition), background var(--transition);
    }
    .subject-input:focus, .percentage-input:focus {
      border-color: var(--highlight);
      background: var(--surface);
    }
    .percentage-input {
      width: 70px;
      text-align: center;
    }
    .remove-btn {
      border: none;
      background: transparent;
      cursor: pointer;
      color: var(--danger);
      font-size: 1.45rem;
      padding: 2px 2px 0 0;
      transition: color var(--transition);
      display: flex; align-items: center;
    }
    .remove-btn:focus, .remove-btn:hover {
      color: var(--text);
    }
    .add-row-btn {
      margin: 6px auto 0 auto;
      background: var(--highlight);
      border: none;
      padding: 10px 24px;
      border-radius: 12px;
      color: var(--surface-dark);
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 7px;
      box-shadow: 0 2px 10px -2px rgba(94,234,212,.16);
      font-size: 1.04rem;
      transition: background var(--transition), color var(--transition), box-shadow var(--transition);
      cursor: pointer;
    }
    .add-row-btn:hover, .add-row-btn:focus {
      background: var(--success);
    }
    .calculate-btn {
      width: 100%;
      background: #222;
      color: var(--white);
      font-weight: 700;
      border: none;
      padding: 16px;
      font-size: 1.18rem;
      border-radius: 12px;
      margin-top: 10px;
      box-shadow: 0 2px 20px -4px rgba(73,140,255,0.28);
      cursor: pointer;
      letter-spacing: 1px;
      transition: background var(--transition), color var(--transition);
      border: 2px solid transparent;
    }
    .calculate-btn:active, .calculate-btn:focus, .calculate-btn:hover {
      background: none;
      border: 2px solid #222843;
      color: #222843;
    }
    .results-block {
      margin-top: 26px;
      background: var(--surface-hover);
      border-radius: var(--radius);
      padding: 22px 14px 18px 14px;
      box-shadow: 0 4px 24px 0 rgba(28,46,63,0.11);
      display: flex;
      flex-direction: column;
      min-width: 0;
      width: 100%;
      gap: 20px;
      align-items: center;
    }
    .results-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--highlight);
      letter-spacing: 1px;
      text-align: center;
      margin-bottom: 0.25em;
    }
    .aps-table {
      width: 100%;
      border-collapse: collapse;
      background: transparent;
    }
    .aps-table th, .aps-table td {
      padding: 8px 10px;
      text-align: center;
      font-size: 1rem;
    }
    .aps-table th {
      color: var(--secondary);
      font-weight: 700;
      border-bottom: 2px solid var(--border-light);
      background: transparent;
    }
    .aps-table tr td {
      border-bottom: 1px solid #23305e50;
    }
    .aps-score-row {
      font-weight: 700;
      font-size: 1.15rem;
      color: var(--highlight);
      background: var(--surface-dark);
    }
    .levels-indicator {
      display: flex;
      gap: 26px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 16px 0 0 0;
      width: 100%;
    }
    .level-card {
      flex: 1 1 130px;
      min-width: 148px;
      max-width: 200px;
      background: var(--surface-dark);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      padding: 14px 8px 12px 8px;
      border: 2px solid transparent;
      transition: border-color var(--transition), background var(--transition);
      text-align: center;
      margin-bottom: 6px;
    }
    .level-card.achieved {
      border-color: var(--success);
    }
    .level-card.not-achieved {
      border-color: var(--border-light);
      opacity: 0.75;
    }
    .level-title {
      font-size: 1.13rem;
      font-weight: 700;
    }
    .level-microdesc {
      font-size: 0.98rem;
      color: var(--muted);
      margin-bottom: 2px;
      min-height: 26px;
    }
    .level-check {
      font-size: 2.3rem;
      color: var(--success);
    }
    .level-x {
      font-size: 2.2rem;
      color: var(--danger);
    }
    .error-message {
      background: var(--danger);
      color: #fff;
      font-weight: 700;
      padding: 10px 12px;
      border-radius: 12px;
      max-width: 90vw;
      text-align: center;
      margin: 0 auto 14px auto;
      word-break: break-word;
      font-size: 1.04rem;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 8px -4px rgba(239,68,68,.18);
    }
    /* RESPONSIVE */
    @media (max-width: 780px) {
      .aps-calculator-container {
        padding-left: 8px;
        padding-right: 8px;
      }
    }
    @media (max-width: 600px) {
      .aps-calculator-container {
        padding: 18px 3vw;
      }
      .form-title { font-size: 1.3rem; }
      .results-title { font-size: 1rem; }
      .subjects-list { gap: 10px; }
    }
    @media (max-width: 510px) {
      .subjects-list {
        grid-template-columns: 1fr 64px 32px;
      }
      .form-title { font-size: 1.11rem; }
      .aps-calculator-container { padding: 8vw 2vw 12vw 2vw; }
      main { padding: 18px 3px 42px 3px; }
    }