:root{
  --pink-100: #ffd6e8;
  --pink-200: #ff9fcf;
  --pink-300: #ff7fbf;
  --pink-400: #f06aa8;
  --yellow-100: #fff6d9;
  --yellow-200: #ffe38a;
  --yellow-300: #ffd24a;
  --bg: #000000;

  :root{
    --bg: #000000;
    --panel: #0f0f12;
    --accent-pink: #ff7fbf;
    --accent-yellow: #ffd24a;
    --yellow-dark: #e6b800;
    --muted: #9aa0a6;
    --text: #f6f7f9;
  }

  *{box-sizing:border-box}
  body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin:0; padding:0; background:var(--bg); color:var(--text);
  }

  /* Navbar */
  .navbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:linear-gradient(90deg,var(--accent-yellow),var(--yellow-dark));box-shadow:0 2px 6px rgba(0,0,0,0.6)}
  .navbar .brand{display:flex;align-items:center;gap:10px}
  .navbar .brand img{height:44px;width:auto;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.35)}
  .navbar .brand .title{font-weight:800;color:#1a1a1a}
  .navbar .nav-links > a{margin-left:14px;color:#1a1a1a;text-decoration:none;font-weight:700}
  .navbar .nav-links .drop-label{color:#1a1a1a;text-decoration:none;font-weight:700}
  .navbar .nav-links .dropdown-content a{color:var(--text)}
  .navbar .nav-links a:hover{text-decoration:underline}

  main{max-width:980px;margin:28px auto;padding:0 16px}

  .hero{padding:18px 0}
  .hero h1{color:var(--accent-pink);margin:0 0 6px}
  .hero p{color:var(--muted);margin:0}

  .card{border:1px solid rgba(255,255,255,0.03);padding:14px;margin-top:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}

  /* Tables */
  table{border-collapse:collapse;width:100%;background:var(--panel);box-shadow:0 1px 0 rgba(255,255,255,0.02)}
  th,td{padding:12px;border:1px solid rgba(255,255,255,0.04);vertical-align:top}
  th{background:linear-gradient(180deg, rgba(255,210,74,0.12), rgba(255,210,74,0.08));color:var(--text);text-align:left}
  tbody tr:nth-child(even){background:#080808}

  /* Headings */
  h1,h2{font-weight:700}
    --bg: #000000;
    --panel: #0f0f12;
    --accent-pink: #ff7fbf;
    --accent-yellow: #ffd24a;
    --yellow-dark: #e6b800;
    --muted: #9aa0a6;
    --text: #f6f7f9;
  }

  *{box-sizing:border-box}
  body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin:0; padding:0; background:var(--bg); color:var(--text);
  }

  /* Navbar */
  .navbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:linear-gradient(90deg,var(--accent-yellow),var(--yellow-dark));box-shadow:0 2px 6px rgba(0,0,0,0.6)}
  .navbar .brand{display:flex;align-items:center;gap:10px}
  .navbar .brand img{height:44px;width:auto;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.35)}
  .navbar .brand .title{font-weight:800;color:#1a1a1a}
  .navbar .nav-links > a{margin-left:14px;color:#1a1a1a;text-decoration:none;font-weight:700}
  .navbar .nav-links a:hover{text-decoration:underline}

  main{max-width:980px;margin:28px auto;padding:0 16px}

  .hero{padding:18px 0}
  .hero h1{color:var(--accent-pink);margin:0 0 6px}
  .hero p{color:var(--muted);margin:0}

  .card{border:1px solid rgba(255,255,255,0.03);padding:14px;margin-top:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}

  /* Tables */
  table{border-collapse:collapse;width:100%;background:var(--panel);box-shadow:0 1px 0 rgba(255,255,255,0.02)}
  th,td{padding:12px;border:1px solid rgba(255,255,255,0.04);vertical-align:top}
  th{background:linear-gradient(180deg, rgba(255,210,74,0.12), rgba(255,210,74,0.08));color:#0f0f12;text-align:left}
  tbody tr:nth-child(even){background:#080808}

  /* Headings */
  h1,h2{font-weight:700}
  h2{color:var(--accent-yellow)}

  .muted{color:var(--muted)}

  @media (max-width:640px){
    .navbar .brand img{height:36px}
    main{margin:16px auto;padding:0 12px}
    th,td{padding:8px}
  }

/* Dropdown menu for Requirements */
.dropdown{position:relative;display:inline-block;margin-left:10px}
.dropdown .drop-label{color:#1a1a1a;text-decoration:none;font-weight:700}
.dropdown-content{display:none;position:absolute;left:0;top:100%;background:var(--panel);min-width:140px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 18px rgba(0,0,0,0.6);padding:6px;border-radius:6px}
.dropdown-content a{display:block;padding:8px 10px;color:var(--text);text-decoration:none}
.dropdown-content a:hover{background:rgba(255,255,255,0.02)}
.dropdown:hover .dropdown-content{display:block}

.tab-btn{padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);margin-right:6px}
.tab-btn.active{background:linear-gradient(90deg, rgba(255,210,74,0.12), rgba(255,210,74,0.08));color:#0f0f12}

/* Search input */
.search-input{width:100%;max-width:420px;padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);margin:6px 0}

/* Sortable headers */
th.sortable{cursor:pointer;user-select:none}
th.sorted.asc::after{content:" ▲";font-size:0.85em}
th.sorted.desc::after{content:" ▼";font-size:0.85em}