/* Minimal glassmorphism + SaaS style, responsive, card-based */
:root{
  /* warmer green / amber accent for clearer, friendly security tone */
  --g1: #16a34a; /* green */
  --g2: #f59e0b; /* amber */
  --glass-bg: rgba(255,255,255,0.07);
  --card-radius: 14px;
  --accent: linear-gradient(135deg,var(--g1),var(--g2));
  --text: #f8fafc;
  --shell-bg-start: rgba(255,255,255,0.03);
  --shell-bg-end: rgba(255,255,255,0.015);
}

/* subtle page background to ensure plugin cards stand out when embedded */

/* slightly lighter shell and card tones for contrast */
.hscg-shell{
  background: linear-gradient(180deg, var(--shell-bg-start), var(--shell-bg-end));
}
.hscg-card{
  background: linear-gradient(180deg, #8b5cf6, #031016);
  border:1px solid rgba(255,255,255,0.065);
  box-shadow: 0 8px 36px rgba(6,10,8,0.32);
}
body .hscg-app, #hscg-app{
  font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  box-sizing: border-box;
  background: linear-gradient(180deg, #8b5cf6, #031016);
}

/* container */
.hscg-shell{
  max-width:920px;
  margin:18px auto;
  padding:20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:18px;
  box-shadow: 0 6px 30px rgba(10,10,20,0.35);
  overflow:hidden;
}

/* top card */
.hscg-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius: var(--card-radius);
  padding:18px;
  backdrop-filter: blur(8px) saturate(120%);
  border:1px solid rgba(255,255,255,0.06);
  transition: transform .22s, box-shadow .22s;
}
.hscg-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 40px rgba(60,30,120,0.18); }

/* header */
.hscg-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.hscg-title{
  display:flex; gap:12px; align-items:center;
}
.hscg-logo{
  width:56px; height:56px; border-radius:12px;
  background: var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  box-shadow: 0 6px 24px rgba(102,126,234,0.18);
}

/* progress */
.hscg-progress-wrap{ margin: 12px 0; }
.hscg-progress{
  height:10px;
  background: rgba(255,255,255,0.06);
  border-radius:999px;
  overflow:hidden;
}
.hscg-progress > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg,var(--g1),var(--g2));
  transition: width .45s ease;
}

/* question area */
.hscg-quest{
  margin-top:16px;
}
.hscg-q-title{
  font-size:20px;
  margin-bottom:10px;
}
.hscg-choices{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:12px;
}
.choice-card{
  background: var(--glass-bg);
  border-radius:12px;
  padding:12px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.04);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.choice-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.38); border-color: rgba(255,255,255,0.08); }
.choice-emoji{ font-size:22px; }
.choice-title{ font-weight:600; margin-top:8px; }
.choice-desc{ font-size:13px; color: rgba(255,255,255,0.8); margin-top:6px; }

/* single column on mobile */
@media (max-width:640px){
  .hscg-shell{ margin:10px; padding:14px; }
  .hscg-choices{ grid-template-columns: 1fr; }
  .hscg-logo{ width:48px;height:48px;border-radius:10px;}
}

/* email capture */
.hscg-email-form{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.hscg-email-form input[type="email"], .hscg-email-form input[type="text"]{
  padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); color:var(--text); min-width:220px;
}
.hscg-email-form .hscg-cta{
  background: linear-gradient(90deg,var(--g1),var(--g2));
  color:white; padding:12px 16px; border-radius:10px; border:none; cursor:pointer; font-weight:700;
  box-shadow: 0 8px 36px rgba(118,75,162,0.16);
}
.hscg-small{ font-size:13px; color: rgba(255,255,255,0.7); margin-top:8px; }

/* results */
.hscg-results{ margin-top:12px; display:grid; grid-template-columns: 1fr 360px; gap:14px; }
@media (max-width:980px){ .hscg-results{ grid-template-columns:1fr; } }

.checklist-panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:12px; padding:12px;
}
.priority-block{ margin-bottom:12px; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); }
.priority-title{font-weight:800;margin-bottom:8px;}
.item-row{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding:8px 6px; border-radius:8px; background: rgba(0,0,0,0.04); margin-bottom:8px; }
.item-text{flex:1;}
.item-title{ font-weight:700;}
.item-expl{ font-size:13px; color: rgba(255,255,255,0.78); margin-top:6px; }
.read-guide{ background:transparent; border-radius:10px; padding:8px 10px; border:1px solid rgba(255,255,255,0.06); color:var(--text); text-decoration:none; font-weight:600; white-space:nowrap; }

/* small helpers */
.hscg-center{ display:flex; align-items:center; justify-content:center; }
.hscg-hidden{ display:none !important; }