/* WRAPPER */
#ht-pkac-wrapper * { box-sizing: border-box; }

/* Theme Variables */
#ht-pkac-wrapper {
  --bg: #f8fafc;
  --card: #ffffff;
  --accent: #0ea5e9;
  --muted: #475569;
  --glass: rgba(2,6,23,0.03);
  --glass-strong: rgba(2,6,23,0.06);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  padding:20px;
}

/* Card */
#ht-pkac-wrapper .htpkac-card{
  width:100%;
  max-width:880px;
  margin:auto;
  background: linear-gradient(180deg, var(--card), #fbfdff);
  border-radius:14px;
  padding:20px;
  box-shadow:0 8px 30px rgba(15,23,42,0.08);
  border:1px solid rgba(15,23,36,0.04);
  display:grid;
  grid-template-columns:1fr 380px;
  gap:18px;
}

/* Header */
#ht-pkac-wrapper .logo{
  width:56px;height:56px;
  background:linear-gradient(90deg,var(--accent),#7c3aed);
  color:#fff;
  font-weight:700;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(14,165,233,0.12);
}

#ht-pkac-wrapper form{
  display:flex;flex-direction:column;gap:12px;
}

#ht-pkac-wrapper input[type=number]{
  width:100%;
  padding:10px 12px;
  background:var(--glass);
  border:1px solid var(--glass-strong);
  border-radius:8px;
  font-size:15px;
  outline:none;
}
#ht-pkac-wrapper input[type=number]:focus{
  border-color:rgba(14,165,233,0.4);
  box-shadow:0 6px 18px rgba(14,165,233,0.08);
}

#ht-pkac-wrapper button{
  background:linear-gradient(90deg,var(--accent),#7c3aed);
  border:none;
  color:white;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
#ht-pkac-wrapper .secondary{
  background:transparent;
  border:1px solid rgba(15,23,36,0.06);
  color:var(--muted);
}

#ht-pkac-wrapper .output{
  background:rgba(0,0,0,0.02);
  padding:16px;
  border-radius:10px;
  border:1px solid rgba(15,23,36,0.06);
  display:flex;
  flex-direction:column;
  gap:10px;
}

#ht-pkac-wrapper .stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f4f7fb;
  padding:10px;
  border-radius:8px;
}

#ht-pkac-wrapper .big{font-size:20px; font-weight:800}
#ht-pkac-wrapper .muted{color:var(--muted)}
#ht-pkac-wrapper .small{color:var(--muted);font-size:12px}

/* Responsive */
@media(max-width:880px){
  #ht-pkac-wrapper .htpkac-card{grid-template-columns:1fr}
  #ht-pkac-wrapper .logo{width:44px;height:44px}
}