:root {
      --ink: #0f172a;
      --muted: #64748b;
      --surface: #ffffff;
      --surface-soft: #f8fbff;
      --line: #e5e7eb;
      --brand: #1f4ed8;
      --brand-deep: #1e40af;
      --accent: #f59e0b;
      --danger: #d65d5d;
      --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    }
    * {box-sizing: border-box;}
    body {
      margin: 0;
      font-family: 'Source Sans 3', Tahoma, sans-serif;
      color: var(--ink);
      min-height: 100vh;
      background:
        radial-gradient(circle at 8% 12%, rgba(31, 78, 216, 0.12), transparent 35%),
        radial-gradient(circle at 92% 18%, rgba(245, 158, 11, 0.1), transparent 32%),
        linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
    }
    h1, h2, h3 {
      font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
      letter-spacing: -0.02em;
      color: #0f172a;
    }
    .aps-shell {
      max-width: 1280px;
      margin: 0 auto;
      padding: 14px 20px 32px;
    }
    .hero {
      margin-top: 18px;
      background: linear-gradient(128deg, #0f172a 0%, #1f4ed8 54%, #3b82f6 100%);
      border-radius: 24px;
      color: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 18px;
      padding: 26px;
      animation: fadeSlide 700ms ease;
    }
    .hero::after {
      content: "";
      position: absolute;
      right: -120px;
      bottom: -130px;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
    }
    .hero-copy h1 {
      color: #fff;
      margin: 0 0 10px;
      font-size: clamp(1.9rem, 3.2vw, 2.8rem);
      line-height: 1.1;
    }
    .hero-copy p {
      margin: 0;
      font-size: 1.05rem;
      color: rgba(255, 255, 255, 0.92);
      max-width: 620px;
    }
    .hero-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .hero-pill {
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 0.9rem;
      color: #fff;
      backdrop-filter: blur(2px);
    }
    .hero-graphic {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    .hero-graphic svg {
      width: 100%;
      max-width: 420px;
      height: auto;
      filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.22));
    }
    .showcase {
      margin-top: 20px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 16px 18px;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
      animation: fadeSlide 800ms ease;
    }
    .showcase-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
    }
    .showcase-header h2 {
      margin: 0;
      font-size: 1.2rem;
      border: 0;
      padding: 0;
    }
    .showcase-header span {
      color: var(--muted);
      font-size: 0.95rem;
    }
    .logo-carousel {
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid #dbe4f0;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      padding: 10px 0;
    }
    .logo-track {
      display: flex;
      width: max-content;
      animation: logoScroll 38s linear infinite;
      will-change: transform;
    }
    .logo-carousel:hover .logo-track {
      animation-play-state: paused;
    }
    .logo-item {
      background: linear-gradient(180deg, #fff, #f8fbff);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      min-width: 150px;
      margin-right: 10px;
      height: 74px;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    .logo-item img {
      max-height: 46px;
      max-width: 100%;
      object-fit: contain;
      filter: saturate(1.08);
    }
    .logo-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
    }
    .container {
      max-width: 1280px;
      margin: 20px auto 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      animation: fadeSlide 900ms ease;
    }
    .card {
      background: var(--surface);
      border-radius: 16px;
      border: 1px solid var(--line);
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
      padding: 20px;
      margin-bottom: 16px;
      transition: transform 220ms ease, box-shadow 220ms ease;
    }
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    }
    h2 {
      margin: 0 0 16px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 10px;
      font-size: 1.3rem;
      color: #0f172a;
    }
    h3 {margin: 10px 0 0;}
    .subject {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 10px;
      background: var(--surface-soft);
      border: 1px solid #e9edf5;
      transition: border-color 180ms ease, transform 180ms ease;
    }
    .subject:hover {
      border-color: #c8d4e8;
      transform: translateY(-1px);
    }
    .subject.duplicate {
      border-color: var(--danger);
      background: #fff7f7;
    }
    .subject-name {font-weight: 600;color: #1e293b;}
    select, input[type="text"] {
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 9px 11px;
      font-size: 0.95rem;
      background: #fff;
      color: var(--ink);
      width: auto;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }
    select:focus, input[type="text"]:focus {
      border-color: #1f4ed8;
      outline: none;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
    }
    .subject .subject-select {flex: 1; min-width: 180px;}
    .subject .level-select {width: 105px;}
    .remove-btn {
      background: #b84545;
      color: #fff;
      border: 0;
      border-radius: 8px;
      padding: 8px 11px;
      font-size: 0.85rem;
      cursor: pointer;
    }
    .remove-btn:hover {background: #9d3939;}
    .btn-add, .btn-reset {
      width: 100%;
      border: 0;
      border-radius: 10px;
      padding: 11px 13px;
      color: #fff;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      margin-top: 10px;
      transition: transform 140ms ease, opacity 140ms ease;
    }
    .btn-add {background: linear-gradient(135deg, #1f4ed8 0%, #3b82f6 100%);}
    .btn-reset {background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);}
    .btn-add:hover, .btn-reset:hover {
      transform: translateY(-1px);
      opacity: 0.95;
    }
    .score-display {
      text-align: center;
      border-radius: 14px;
      padding: 20px;
      background: linear-gradient(140deg, #0f172a 0%, #1f4ed8 58%, #f59e0b 180%);
      color: #fff;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
    }
    .score-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 10px;
    }
    .btn-download {
      width: 100%;
      border: 0;
      border-radius: 10px;
      padding: 10px 13px;
      color: #fff;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      background: linear-gradient(135deg, #155ed8 0%, #0c47ab 100%);
      transition: transform 140ms ease, opacity 140ms ease;
    }
    .btn-download:hover {
      transform: translateY(-1px);
      opacity: 0.94;
    }
    .poster-hint {
      font-size: 0.82rem;
      color: var(--muted);
    }
    .aps-score {
      font-size: clamp(3rem, 6vw, 4.3rem);
      font-weight: 700;
      line-height: 1;
      margin: 7px 0;
    }
    .score-label {
      font-size: 1rem;
      opacity: 0.95;
    }
    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    .stat-box {
      text-align: center;
      border-radius: 10px;
      padding: 12px;
      background: #f8fbff;
      border: 1px solid #e5e7eb;
    }
    .stat-value {font-size: 1.7rem;font-weight: 700;color: #1f4ed8;}
    .stat-label {font-size: 0.87rem;color: var(--muted);}
    .qualification {
      padding: 12px;
      margin: 9px 0;
      border-radius: 11px;
      background: #f8fcfa;
      border: 1px solid #dcece6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .qualification::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.16;
      background-size: cover;
      background-position: center;
      pointer-events: none;
      z-index: -1;
    }
    #medicine::after {
      background-image: radial-gradient(circle at 85% 10%, rgba(20, 159, 75, 0.45) 0 18%, transparent 19%),
        linear-gradient(120deg, rgba(59, 130, 246, 0.2), transparent 65%);
    }
    #engineering::after {
      background-image: repeating-linear-gradient(135deg, rgba(21, 94, 216, 0.23) 0 10px, transparent 10px 20px);
    }
    #commerce::after {
      background-image: linear-gradient(140deg, rgba(249, 168, 38, 0.22), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(249, 168, 38, 0.4) 0 18%, transparent 20%);
    }
    #science::after {
      background-image: radial-gradient(circle at 76% 18%, rgba(98, 132, 255, 0.34) 0 18%, transparent 20%),
        radial-gradient(circle at 87% 38%, rgba(59, 130, 246, 0.22) 0 11%, transparent 12%);
    }
    #arts::after {
      background-image: linear-gradient(145deg, rgba(173, 102, 255, 0.24), transparent 62%);
    }
    #education::after {
      background-image: linear-gradient(145deg, rgba(5, 159, 142, 0.23), transparent 62%);
    }
    #diploma::after {
      background-image: linear-gradient(145deg, rgba(255, 145, 18, 0.22), transparent 62%);
    }
    #certificate::after {
      background-image: linear-gradient(145deg, rgba(122, 138, 150, 0.24), transparent 62%);
    }
    .qualification.met {border-left: 4px solid #1f4ed8;background: #eff6ff;}
    .qualification.not-met {border-left: 4px solid #cf6262;background: #fff5f5;}
    .status {
      white-space: nowrap;
      font-weight: 700;
      padding: 6px 11px;
      border-radius: 999px;
      font-size: 0.8rem;
      background: #dbeafe;
      color: #1d4ed8;
    }
    .not-met .status {background: #fbe3e3;color: #b44545;}
    .requirement {font-size: 0.9rem;color: var(--muted);margin-top: 4px;}
    .program-list {font-size: 0.92rem;color: #475569;margin-top: 4px;}
    .instructions {
      margin-top: 14px;
      background: #f8fbff;
      border: 1px solid #e4eaf4;
      border-radius: 10px;
      padding: 12px;
      line-height: 1.45;
      color: #475569;
    }
    .validation-note {
      font-size: 0.88rem;
      color: #ab3f3f;
      margin-top: 8px;
      min-height: 20px;
    }
    .programmes-board {
      margin-top: 18px;
    }
    .smart-reco-board {
      margin-top: 18px;
    }
    .smart-reco-summary {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 8px 0 12px;
    }
    .smart-reco-chip {
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #dbe5f5;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: 0.82rem;
      font-weight: 700;
    }
    .smart-reco-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .smart-reco-group {
      border: 1px solid #dbe5f5;
      border-radius: 12px;
      background: #fcfdff;
      padding: 10px;
    }
    .smart-reco-group h3 {
      margin: 0 0 8px;
      font-size: 1rem;
      color: #0f172a;
    }
    .smart-reco-list {
      display: grid;
      gap: 8px;
    }
    .smart-reco-item {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 9px;
      background: #fff;
    }
    .smart-reco-item-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .smart-reco-title {
      margin: 0;
      font-size: 0.95rem;
      color: #0f172a;
    }
    .smart-reco-score {
      font-size: 0.8rem;
      font-weight: 700;
      color: #1d4ed8;
      background: #eff6ff;
      border: 1px solid #dbeafe;
      border-radius: 999px;
      padding: 2px 8px;
      white-space: nowrap;
    }
    .smart-reco-meta {
      margin-top: 4px;
      font-size: 0.82rem;
      color: #64748b;
    }
    .smart-reco-message {
      margin-top: 5px;
      font-size: 0.83rem;
      color: #334155;
    }
    .smart-reco-actions {
      margin-top: 7px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .smart-reco-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 5px 10px;
      text-decoration: none;
      font-size: 0.79rem;
      font-weight: 700;
      border: 1px solid #dbe5f5;
      background: #eff6ff;
      color: #1d4ed8;
    }
    button.smart-reco-btn {
      cursor: pointer;
    }
    .smart-reco-btn.primary {
      background: #1f4ed8;
      border-color: #1f4ed8;
      color: #fff;
    }
    .program-toolbar {
      display: grid;
      gap: 10px;
      margin-bottom: 10px;
    }
    .program-count {
      font-size: 1.05rem;
      font-weight: 700;
      color: #0f172a;
    }
    .program-filter-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1.3fr;
      gap: 10px;
      align-items: center;
    }
    .program-aps-range {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .program-filters {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }
    #university-select, #program-search, #program-min-aps, #program-max-aps {width: 100%;}
    .program-chip-row {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin: 8px 0;
    }
    .program-chip {
      padding: 4px 10px;
      border-radius: 999px;
      background: #eff6ff;
      border: 1px solid #dbeafe;
      color: #1d4ed8;
      font-size: 0.82rem;
      font-weight: 700;
    }
    .program-cards-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 10px;
    }
    .program-card {
      position: relative;
      min-height: 250px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(16, 61, 52, 0.18);
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: flex-end;
      box-shadow: 0 10px 22px rgba(14, 49, 41, 0.13);
    }
    .program-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(9, 30, 28, 0.08) 8%, rgba(9, 30, 28, 0.78) 100%);
      z-index: 1;
      pointer-events: none;
    }
    .program-card-body {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 12px;
      color: #fff;
    }
    .program-card-aps {
      display: inline-flex;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.35);
      font-weight: 700;
      font-size: 0.86rem;
      margin-bottom: 8px;
    }
    .program-card-title {
      margin: 0;
      color: #fff;
      font-size: 1.22rem;
      line-height: 1.12;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    .program-card-meta {
      margin-top: 6px;
      font-size: 0.93rem;
      color: rgba(255, 255, 255, 0.95);
    }
    .program-card-foot {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .program-card-badge {
      font-size: 0.8rem;
      font-weight: 700;
      color: #1d4ed8;
      background: rgba(219, 234, 254, 0.95);
      border-radius: 999px;
      padding: 4px 10px;
    }
    .program-card-badge.borderline {
      color: #7a5600;
      background: rgba(255, 241, 206, 0.92);
    }
    .program-card-badge.below {
      color: #8f2f2f;
      background: rgba(255, 222, 222, 0.92);
    }
    .program-card-mini {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.95);
      max-width: 62%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .program-card-action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 700;
      color: #ffffff;
      background: rgba(31, 78, 216, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 999px;
      padding: 6px 12px;
      backdrop-filter: blur(1px);
      text-decoration: none;
      cursor: pointer;
      position: relative;
      z-index: 3;
    }
    .program-card-action i {
      font-size: 0.76rem;
    }
    .program-empty {
      border: 1px dashed #c8ddd6;
      border-radius: 10px;
      background: #f7fcfa;
      color: #51736b;
      padding: 12px;
      text-align: center;
    }
    .footer {
      text-align: center;
      color: #64748b;
      margin-top: 24px;
      padding: 18px;
      font-size: 0.9rem;
    }
    @keyframes fadeSlide {
      from {opacity: 0; transform: translateY(10px);}
      to {opacity: 1; transform: translateY(0);}
    }
    @keyframes logoScroll {
      from {transform: translateX(0);}
      to {transform: translateX(-50%);}
    }
    @media (max-width: 1120px) {
      .logo-item {width: 132px; min-width: 132px;}
    }
    @media (max-width: 980px) {
      .hero {grid-template-columns: 1fr; padding: 20px;}
      .container {grid-template-columns: 1fr;}
      .hero-graphic {order: -1;}
      .logo-item {width: 124px; min-width: 124px; height: 68px;}
      .aps-shell {padding: 12px 14px 28px;}
      .program-filter-grid {grid-template-columns: 1fr;}
      .program-cards-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
      .smart-reco-grid {grid-template-columns: 1fr;}
    }
    @media (max-width: 640px) {
      .logo-item {width: 116px; min-width: 116px; margin-right: 8px;}
      .subject {
        flex-direction: column;
        align-items: stretch;
      }
      .subject .subject-select, .subject .level-select {
        width: 100%;
      }
      .remove-btn {width: 100%;}
      .stats {grid-template-columns: 1fr;}
      .program-cards-grid {grid-template-columns: 1fr;}
      .program-card {min-height: 230px;}
    }
  </style>