:root{
  --ssc-pink:#F43676;
  --ssc-bg:#ffffff;
  --ssc-fg:#333333;
  --ssc-muted:#6b7280;
  --ssc-card:#ffffff;
  --ssc-border:#e5e7eb;
  --ssc-dark-bg:#0f1115;
  --ssc-dark-card:#151922;
  --ssc-dark-fg:#e5e7eb;
  --ssc-dark-border:#232838;
}

.ssc-wrap{
  max-width: 880px;
  margin: 24px auto;
  padding: 20px;
  background: var(--ssc-bg);
  color: var(--ssc-fg);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

.ssc-wrap.dark{
  background: var(--ssc-dark-bg);
  color: var(--ssc-dark-fg);
}

.ssc-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.ssc-header h2{
  margin:0;
  color: var(--ssc-pink);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  letter-spacing:.2px;
}

.ssc-dark-toggle{
  min-width: 120px;
}

/* Tabs */
.ssc-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 12px 0 18px;
}

.ssc-tab{
  border:1px solid var(--ssc-border);
  background:#fff;
  color:#111827;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  transition: transform .06s ease, background .25s ease;
}
.ssc-wrap.dark .ssc-tab{ background:#0f1218; border-color:var(--ssc-dark-border); color:var(--ssc-dark-fg); }

.ssc-tab.active{
  background:var(--ssc-pink);
  color:#fff;
  border-color: transparent;
  transform: translateY(-1px);
}

.ssc-panel{ animation: sscFade .18s ease; }
@keyframes sscFade{ from{opacity:.6; transform:translateY(2px)} to{opacity:1; transform:none} }

/* Grid */
.ssc-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:16px;
}
@media (max-width: 700px){
  .ssc-grid{ grid-template-columns: 1fr; }
}

/* Fields */
.ssc-field label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  margin-bottom:6px;
}
.ssc-field input, .ssc-field select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--ssc-border);
  background:#fff;
  color:#111827;
  outline:none;
}
.ssc-wrap.dark .ssc-field input,
.ssc-wrap.dark .ssc-field select{
  background: var(--ssc-dark-card);
  color: var(--ssc-dark-fg);
  border-color: var(--ssc-dark-border);
}

.ssc-inline{ margin-top:8px; }

/* Buttons */
.ssc-btn{
  background: var(--ssc-pink);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:11px 16px;
  cursor:pointer;
  font-weight:600;
  transition: filter .18s ease, transform .06s ease;
}
.ssc-btn:hover{ filter:brightness(.95); }
.ssc-btn:active{ transform:translateY(1px); }

.ssc-outline{
  background: transparent;
  color: var(--ssc-pink);
  border:2px solid var(--ssc-pink);
}
.ssc-ghost{
  background: transparent;
  color: inherit;
  border:1px dashed var(--ssc-border);
}
.ssc-wrap.dark .ssc-ghost{ border-color: var(--ssc-dark-border); }

.ssc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 16px 0 10px;
}

/* Cards & results */
.ssc-card{
  border:1px solid var(--ssc-border);
  border-radius:16px;
  padding:16px;
  background: var(--ssc-card);
  margin-top:10px;
}
.ssc-wrap.dark .ssc-card{
  background: var(--ssc-dark-card);
  border-color: var(--ssc-dark-border);
}

.ssc-results{
  display:grid;
  gap:10px;
  margin-bottom:10px;
}

.ssc-muted{ color: var(--ssc-muted); font-size:.92rem; }
.ssc-wrap.dark .ssc-muted{ color:#9aa3b2; }

/* Table */
.ssc-table-wrap{ overflow:auto; border-radius:12px; border:1px solid var(--ssc-border); }
.ssc-wrap.dark .ssc-table-wrap{ border-color: var(--ssc-dark-border); }
.ssc-table{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
}
.ssc-table th, .ssc-table td{
  border-bottom:1px solid var(--ssc-border);
  padding:10px 12px;
  text-align:left;
  font-size:.96rem;
}
.ssc-wrap.dark .ssc-table th, .ssc-wrap.dark .ssc-table td{ border-color: var(--ssc-dark-border); }
.ssc-table thead th{
  background:#fafafa;
  font-weight:700;
}
.ssc-wrap.dark .ssc-table thead th{ background:#0f1218; }

/* Tooltips (click to toggle) */
.ssc-tip-icon{
  background: var(--ssc-pink);
  color:#fff;
  border-radius:999px;
  padding: 0 8px;
  font-size:.8rem;
  cursor:pointer;
  user-select:none;
}
.ssc-tip{
  display:none;
  margin-top:6px;
  background:#111827;
  color:#fff;
  padding:10px;
  border-radius:10px;
  font-size:.9rem;
}
.ssc-tip.active{ display:block; }

/* Print styling for PDF export */
@media print{
  body{ background:#fff !important; }
  #ssc-root{ box-shadow:none; padding:0; }
  .ssc-header, .ssc-tabs, .ssc-actions, .ssc-tip-icon, .ssc-tip{ display:none !important; }
  .ssc-print-area{ break-inside:avoid; }
  .ssc-card{ border:1px solid #e5e7eb; }
}