:root{
  --brand:#ffc400;
  --brand-mid:#d88900;
  --brand-dark:#3b2600;
  --danger:#d84200;
  --border:rgba(255,210,70,.48);
  --bg:#0b0b0b;
  --bg-soft:#151515;
  --text:#f4ecd2;
  --muted:#c8bea3;
  --shadow:
    0 8px 22px rgba(0,0,0,.52),
    0 0 20px rgba(255,184,0,.12);
}

.app-card{
  max-width:650px;
  margin:25px auto;
  overflow:hidden;
  font-family:system-ui,Arial,sans-serif;
  font-size:.92rem;
  background:
    radial-gradient(circle at top,rgba(255,196,0,.10),transparent 28%),
    linear-gradient(180deg,#151515 0%,#080808 100%);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease;
}

.app-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,220,100,.82);
  box-shadow:
    0 12px 30px rgba(0,0,0,.62),
    0 0 28px rgba(255,184,0,.26);
}

.app-header{
  padding:13px 16px;
  text-align:center;
  color:#171000;
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  background:
    linear-gradient(135deg,rgba(255,255,255,.28),transparent 28%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 10px,
      rgba(0,0,0,.11) 10px,
      rgba(0,0,0,.11) 20px
    ),
    linear-gradient(180deg,#fff27a 0%,var(--brand) 35%,var(--brand-mid) 68%,var(--brand-dark) 100%);
  text-shadow:
    0 1px 0 rgba(255,255,255,.52),
    0 2px 3px rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,229,125,.55);
}

.app-table{
  width:100%;
  border-collapse:collapse;
}

.app-table th,
.app-table td{
  padding:10px 12px;
  vertical-align:middle;
}

.app-table th{
  width:35%;
  color:#fff2a3;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:.85rem;
  background:
    linear-gradient(90deg,#201600 0%,#3d2900 55%,#171000 100%);
  border-bottom:1px solid rgba(255,196,0,.30);
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}

.app-table td{
  color:var(--text);
  font-size:.9rem;
  background:
    linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,196,0,.035));
  border-bottom:1px solid rgba(255,255,255,.07);
}

.app-table tr:last-child th,
.app-table tr:last-child td{
  border-bottom:none;
}

.app-table tr:hover td{
  background:
    linear-gradient(90deg,rgba(255,196,0,.10),rgba(216,66,0,.06));
}

@media(max-width:640px){
  .app-table,
  .app-table tbody,
  .app-table tr,
  .app-table th,
  .app-table td{
    display:block;
    width:100%;
  }

  .app-table th{
    padding-bottom:8px;
  }

  .app-table td{
    padding-top:9px;
  }
}

.review-section{
  max-width:850px;
  margin:30px auto;
  display:flex;
  flex-direction:column;
  gap:18px;
  font-family:system-ui,Arial,sans-serif;
}

.review-card{
  position:relative;
  overflow:hidden;
  padding:17px 20px;
  background:
    radial-gradient(circle at top right,rgba(255,196,0,.08),transparent 34%),
    linear-gradient(180deg,#171717 0%,#090909 100%);
  border:1px solid rgba(255,196,0,.24);
  border-left:5px solid var(--brand);
  border-radius:10px;
  box-shadow:
    0 5px 14px rgba(0,0,0,.38),
    inset 0 0 14px rgba(255,255,255,.02);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.review-card::after{
  content:"";
  position:absolute;
  top:0;
  left:-80%;
  width:42%;
  height:100%;
  background:linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,.16),
    rgba(255,214,74,.18),
    transparent
  );
  transform:skewX(-22deg);
  transition:left .55s ease;
  pointer-events:none;
}

.review-card:hover::after{
  left:135%;
}

.review-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,210,70,.58);
  box-shadow:
    0 9px 20px rgba(0,0,0,.50),
    0 0 22px rgba(255,184,0,.18);
}

.review-author{
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#ffd84a;
  font-weight:800;
  font-size:15px;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}

.review-author::before{
  content:"💣";
  font-size:19px;
}

.review-card p{
  margin:0;
  color:#ddd4ba;
  font-size:14px;
  line-height:1.7;
}

.review-rating{
  margin-left:auto;
  font-weight:800;
  color:#fff2a3;
}

.stars{
  --rating:5;
  --star-size:1rem;
  --star-gap:2px;
  --star-empty:#42330b;
  --star-fill:#ffc400;
  position:relative;
  display:inline-block;
  font-size:var(--star-size);
  line-height:1;
  letter-spacing:var(--star-gap);
  filter:drop-shadow(0 0 4px rgba(255,196,0,.42));
}

.stars::before{
  content:"★★★★★";
  color:var(--star-empty);
}

.stars::after{
  content:"★★★★★";
  position:absolute;
  left:0;
  top:0;
  width:calc((var(--rating)/5)*100%);
  overflow:hidden;
  white-space:nowrap;
  pointer-events:none;
  color:var(--star-fill);
}

.stars.lg{
  --star-size:1.1rem;
  letter-spacing:3px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.badge small{
  color:#bdb398;
  font-weight:600;
}

@media(max-width:480px){
  .app-card{
    margin:20px 10px;
  }

  .app-header{
    font-size:1rem;
    padding:12px 10px;
  }

  .review-card{
    padding:15px 16px;
  }

  .review-author{
    flex-wrap:wrap;
  }

  .review-rating{
    margin-left:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .app-card,
  .review-card,
  .review-card::after{
    transition:none;
  }
}