ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    text-align: left;
  }

  li {
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.25;
    color: #f3f4f6;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  li.success {
    background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(16,185,129,0.15));
    border-color: rgba(16,185,129,0.45);
    color: #bbf7d0;
    font-weight: 600;
  }

  li.error {
    background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(239,68,68,0.12));
    border-color: rgba(239,68,68,0.45);
    color: #fecaca;
  }

  li.clickable {
    cursor: pointer;
    outline: none;
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(245,158,11,0.15));
    border-color: rgba(245,158,11,0.5);
    color: #fff3cd;
  }

  li.clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  }

  li.clickable:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }

  /* Make non-clickable errors visually different (deeper red) */
  li.error:not(.clickable) {
    background: linear-gradient(135deg, rgba(239,68,68,0.28), rgba(239,68,68,0.18));
  }

  /* Button hover polish (inline styles exist; this adds interactions) */
  #btn-lewati:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgba(11,116,222,0.35);
  }
  #btn-lewati:active {
    transform: translateY(1px);
  }