.spc-wrapper{
  --spc-item-bg:#ffffff;
  --spc-item-text:#0f172a;
  --spc-desc-lines:2;
  --spc-fade-color:#ffffff;
  --spc-fade-height:120px;
  --spc-fade-opacity:1;
  --spc-reveal-btn-bottom:12px;
  --spc-reveal-zone:64px;
  --spc-security-track:#cbd5e1;
  --spc-security-percent-text:#0f172a;
  --spc-sec-0-20:#ef4444;
  --spc-sec-21-40:#f97316;
  --spc-sec-41-60:#f59e0b;
  --spc-sec-61-80:#22c55e;
  --spc-sec-81-100:#16a34a;
  --spc-popup-title-align-mode:smart;
  --spc-popup-desc-align-mode:smart;
  --spc-popup-note-align-mode:smart;
  position:relative;
}

.spc-grid-wrap{position:relative}

.spc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.spc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  background:var(--spc-item-bg);
  color:var(--spc-item-text);
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  min-height:unset;
  height:auto;
  transition:transform .18s ease, box-shadow .18s ease;
}
.spc-content{display:flex;flex-direction:column;gap:4px;min-width:0}

.spc-card.is-clickable{cursor:pointer}
.spc-card.is-clickable:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.12)}

.spc-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--spc-item-icon, currentColor);align-self:center}
.spc-icon svg,.spc-icon i{width:1em;height:1em;font-size:24px;color:currentColor;fill:currentColor;stroke:currentColor}
.spc-icon svg *{fill:currentColor;stroke:currentColor}

.spc-title{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.25;
  color:inherit;
}

.spc-description{
  margin:0;
  font-size:.93rem;
  line-height:1.4;
  opacity:.85;
  color:inherit;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--spc-desc-lines-item, var(--spc-desc-lines));
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:anywhere;
}

.spc-card.is-style_2,
.spc-card.is-style-2{
  justify-content:flex-start;
  align-items:stretch;
  min-height:96px;
  padding:12px 16px;
  display:grid;
  grid-template-columns:minmax(34px, 10%) minmax(0, 90%);
  grid-template-areas:"icon content";
  column-gap:12px;
  gap:10px;
}

.spc-card.is-style_3,
.spc-card.is-style-3{
  min-height:unset;
  padding:12px;
}

.spc-card.is-style_2 .spc-icon,
.spc-card.is-style-2 .spc-icon{
  grid-area:icon;
  align-self:center;
  justify-self:center;
  flex:0 0 auto;
}

.spc-card.is-style_2 .spc-content,
.spc-card.is-style-2 .spc-content{
  grid-area:content;
  align-self:center;
}

.spc-card.is-style_2 .spc-title,
.spc-card.is-style-2 .spc-title{
  margin:0;
  font-size:1rem;
  line-height:1.1;
}

.spc-card.is-style_2 .spc-description,
.spc-card.is-style-2 .spc-description{
  margin:0;
  font-size:.82rem;
  line-height:1.2;
}

.spc-security{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
}

.spc-security-score{
  --spc-security-pct:72;
  --spc-chart-size:56px;
  --spc-hole-offset:10px;
  --spc-security-deg:calc((var(--spc-security-pct) * 1deg) * 3.6);
  width:var(--spc-chart-size);
  height:var(--spc-chart-size);
  min-width:var(--spc-chart-size);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:conic-gradient(var(--spc-security-color, var(--spc-sec-81-100)) 0 var(--spc-security-deg),var(--spc-security-track) var(--spc-security-deg) 360deg);
  color:var(--spc-security-percent-text);
  font-weight:800;
  font-size:.95rem;
  position:relative;
}

.spc-security-score::before{
  content:"";
  position:absolute;
  inset:var(--spc-hole-offset);
  border-radius:50%;
  background:var(--spc-item-bg, #fff);
  z-index:0;
}

.spc-security-score > *{
  position:relative;
  z-index:1;
}

.spc-security-copy{display:flex;flex-direction:column;gap:2px}
.spc-security-note{
  display:inline-flex;
  align-items:center;
  background:rgba(2,132,199,.14);
  color:inherit;
  border-radius:999px;
  padding:4px 10px;
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
}
.spc-security-copy .spc-action-btn{
  margin-top:8px;
  align-self:flex-start;
}

.spc-action-btn{
  margin-top:8px;
  align-self:flex-start;
  border:0;
  background:#0ea5a4;
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
}

.spc-popover{
  position:absolute;
  z-index:40;
  width:min(420px, calc(100% - 12px));
  max-height:70vh;
  overflow:hidden;
  display:none;
  flex-direction:column;
  background:#fff;
  color:#0f172a;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 18px 40px rgba(2,6,23,.22);
  padding:14px 14px 12px;
}

.spc-popover.active{display:flex}

.spc-popover-close{
  position:absolute;
  top:6px;
  right:10px;
  border:0;
  background:transparent;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  color:inherit;
  z-index:2;
}

.spc-popover-arrow{
  position:absolute;
  top:-7px;
  left:50%;
  width:14px;
  height:14px;
  background:inherit;
  border-left:1px solid rgba(15,23,42,.12);
  border-top:1px solid rgba(15,23,42,.12);
  transform:translateX(-50%) rotate(45deg);
}

.spc-popover.is-above .spc-popover-arrow{
  top:auto;
  bottom:-7px;
  border-left:none;
  border-top:none;
  border-right:1px solid rgba(15,23,42,.12);
  border-bottom:1px solid rgba(15,23,42,.12);
}

.spc-popover-head{display:flex;align-items:center;gap:10px;padding-right:22px}
.spc-popover-head{
  position:sticky;
  top:0;
  background:inherit;
  z-index:2;
  padding-bottom:8px;
}
.spc-popover-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}
.spc-popover-icon svg,.spc-popover-icon i{color:currentColor;fill:currentColor;stroke:currentColor}
.spc-popover-icon svg *{fill:currentColor;stroke:currentColor}
.spc-popover-icon:empty{display:none}
.spc-popover-title{margin:0;font-size:1rem;font-weight:800}

.spc-popover-body{margin-top:6px;overflow:auto;padding-right:2px;flex:1 1 auto}
.spc-popover-body p{margin:0 0 10px 0}
.spc-popover-description{opacity:.9}
.spc-popover-note{font-weight:700}
.spc-popover-description:empty,
.spc-popover-note:empty,
.spc-popover-actions:empty{display:none}
.spc-popover-description.is-smart-justify,
.spc-popover-note.is-smart-justify,
.spc-popover-title.is-smart-justify{text-align:justify;text-justify:inter-word}
.spc-popover-description.is-smart-left,
.spc-popover-note.is-smart-left,
.spc-popover-title.is-smart-left{text-align:left}

.spc-popover-actions{
  display:flex;
  width:100%;
  margin-top:8px;
}

.spc-popover-actions.is-align-center{justify-content:center}
.spc-popover-actions.is-align-right{justify-content:flex-end}
.spc-popover-actions.is-align-left{justify-content:flex-start}

.spc-popover-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  text-decoration:none;
  border:0;
  border-radius:999px;
  padding:9px 14px;
  background:#0ea5a4;
  color:#fff;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.spc-popover-btn.is-icon-only{
  width:40px;
  height:40px;
  padding:0;
}

.spc-popover-btn-icon{display:inline-flex;line-height:1;color:inherit}
.spc-popover-btn-text{display:inline-flex;align-items:center;line-height:1.2;color:inherit}
.spc-popover-btn-icon svg,
.spc-popover-btn-icon i{
  width:1em;
  height:1em;
  display:block;
  color:currentColor;
  fill:currentColor;
  stroke:currentColor;
}

.spc-popover-btn[data-anim="lift"]:hover{transform:translateY(-2px)}
.spc-popover-btn[data-anim="grow"]:hover{transform:scale(1.04)}
.spc-popover-btn[data-anim="pulse"]{animation:spcPulse 1.8s ease-in-out infinite}

@keyframes spcPulse {
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}

.spc-popover-backdrop{
  position:fixed;
  inset:0;
  display:none;
  z-index:35;
  background:transparent;
}

.spc-popover-backdrop.active{display:block}

.spc-grid-wrap.has-mobile-reveal .spc-mobile-fade,
.spc-grid-wrap.has-mobile-reveal .spc-reveal-btn{display:none}

.spc-mobile-fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--spc-fade-height);
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    var(--spc-fade-color) calc(100% - var(--spc-reveal-zone)),
    var(--spc-fade-color) 100%
  );
  opacity:var(--spc-fade-opacity);
  z-index:2;
}

.spc-reveal-btn{
  position:absolute;
  left:50%;
  bottom:var(--spc-reveal-btn-bottom);
  transform:translateX(-50%);
  border:0;
  border-radius:999px;
  padding:10px 18px;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  z-index:4;
  white-space:nowrap;
  max-width:calc(100% - 24px);
}

.spc-grid-wrap[data-spc-reveal-style="native"] .spc-reveal-btn{
  background:#0f172a;
  color:#fff;
  box-shadow:0 8px 22px rgba(2,6,23,.2);
}

.spc-grid-wrap[data-spc-reveal-style="soft"] .spc-reveal-btn{
  background:rgba(255,255,255,.78);
  color:#0f172a;
  border:1px solid rgba(15,23,42,.12);
  backdrop-filter:blur(8px);
}

.spc-grid-wrap[data-spc-reveal-style="outline"] .spc-reveal-btn{
  background:transparent;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.28);
}

.spc-grid-wrap[data-spc-reveal-style="minimal"] .spc-reveal-btn{
  background:transparent;
  color:#0f172a;
  border:0;
  text-decoration:underline;
  text-underline-offset:4px;
}

@media (max-width:767px){
  .spc-grid{grid-template-columns:1fr}
  .spc-card{min-height:unset}
  .spc-card.is-style_2,
  .spc-card.is-style-2{
    grid-template-columns:minmax(28px, 12%) minmax(0, 88%);
    min-height:unset;
    border-radius:14px;
  }
  .spc-card.is-style_2 .spc-icon,
  .spc-card.is-style-2 .spc-icon{align-self:center}

  .spc-popover{
    width:min(340px, calc(100% - 14px));
    max-height:68vh;
  }

  .spc-popover.is-mobile{
    position:fixed;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%, -50%);
    width:min(360px, calc(100vw - 20px));
    max-height:72vh;
  }

  .spc-grid-wrap.has-mobile-reveal.is-collapsed{
    overflow:hidden;
    padding-bottom:calc(var(--spc-reveal-zone) + var(--spc-reveal-btn-bottom));
  }

  .spc-grid-wrap.has-mobile-reveal.is-expanded{
    padding-bottom:calc(var(--spc-reveal-zone) + var(--spc-reveal-btn-bottom));
  }

  .spc-grid-wrap.has-mobile-reveal.is-expanded .spc-reveal-btn{
    display:block;
  }

  .spc-grid-wrap.has-mobile-reveal.is-collapsed .spc-mobile-fade,
  .spc-grid-wrap.has-mobile-reveal.is-collapsed .spc-reveal-btn{
    display:block;
  }
}