.sh-rcf-app{
  --sh-rcf-bg: #0b0d12;
  --sh-rcf-panel: #0f1320;
  --sh-rcf-panel2: #121a2b;
  --sh-rcf-text: #f3f6ff;
  --sh-rcf-muted: rgba(243,246,255,.72);
  --sh-rcf-line: rgba(255,255,255,.10);
  --sh-rcf-shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Site Hub-inspired accents (approx, based on logo colors) */
  --sh-rcf-accent: #8BC53F;   /* green */
  --sh-rcf-accent2: #00A3AD;  /* teal */
  --sh-rcf-ink: #2f3337;      /* logo dark gray */

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--sh-rcf-text);
}

.sh-rcf-app *{box-sizing:border-box;}
.sh-rcf-app a{color: var(--sh-rcf-accent2); text-decoration:none;}
.sh-rcf-app a:hover{text-decoration:underline;}

.sh-rcf-app .rcf-shell{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(0,163,173,.18), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(139,197,63,.12), transparent 60%),
    var(--sh-rcf-bg);
  border: 1px solid var(--sh-rcf-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-rcf-shadow);
}

.sh-rcf-app .rcf-wrap{max-width:1100px;margin:0 auto;padding:20px;}
.sh-rcf-app header{display:grid;gap:10px;margin:4px 0 16px;}
.sh-rcf-app .titleRow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;}
.sh-rcf-app h1{font-size:20px;margin:0;letter-spacing:.2px;}
.sh-rcf-app .sub{margin:0;color:var(--sh-rcf-muted);line-height:1.35;max-width:72ch;font-size:13px;}

.sh-rcf-app .toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.sh-rcf-app button{
  border:1px solid var(--sh-rcf-line);
  background: rgba(255,255,255,.04);
  color: var(--sh-rcf-text);
  border-radius:999px;
  padding:9px 12px;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
.sh-rcf-app button:hover{background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18);}
.sh-rcf-app button:active{transform: translateY(1px);}
.sh-rcf-app button.primary{
  background: linear-gradient(90deg, rgba(0,163,173,.20), rgba(139,197,63,.20));
  border-color: rgba(0,163,173,.35);
}
.sh-rcf-app button.primary:hover{background: linear-gradient(90deg, rgba(0,163,173,.28), rgba(139,197,63,.28));}
.sh-rcf-app button.danger{background: rgba(255,123,114,.12); border-color: rgba(255,123,114,.25);}
.sh-rcf-app button.danger:hover{background: rgba(255,123,114,.18);}

.sh-rcf-app .chip{
  border:1px solid var(--sh-rcf-line);
  background: rgba(0,0,0,.14);
  color: var(--sh-rcf-text);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
}
.sh-rcf-app .chip.good{border-color: rgba(139,197,63,.35); background: rgba(139,197,63,.10);}
.sh-rcf-app .chip.warn{border-color: rgba(255,211,110,.35); background: rgba(255,211,110,.10);}
.sh-rcf-app .chip.bad{border-color: rgba(255,123,114,.35); background: rgba(255,123,114,.10);}

.sh-rcf-app .grid{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start;}
@media (max-width:980px){.sh-rcf-app .grid{grid-template-columns:1fr;}}

.sh-rcf-app .card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--sh-rcf-line);
  border-radius: 18px;
  overflow:hidden;
}
.sh-rcf-app .cardHeader{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--sh-rcf-line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.sh-rcf-app .cardHeader h2{font-size:14px;margin:0;letter-spacing:.2px;}
.sh-rcf-app .cardHeader p{margin:8px 0 0;color:var(--sh-rcf-muted);font-size:12.5px;line-height:1.35;}
.sh-rcf-app .cardBody{padding:14px;}

.sh-rcf-app .steps{display:grid;gap:10px;}
.sh-rcf-app .step{
  border:1px solid var(--sh-rcf-line);
  border-radius:12px;
  background: rgba(0,0,0,.12);
  padding:11px 12px;
  display:grid;
  gap:8px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sh-rcf-app .step:hover{border-color: rgba(255,255,255,.18); background: rgba(0,0,0,.18);}
.sh-rcf-app .step.active{border-color: rgba(0,163,173,.40); background: rgba(0,163,173,.10);}
.sh-rcf-app .stepTop{display:flex;justify-content:space-between;gap:10px;align-items:center;}
.sh-rcf-app .stepTitle{font-size:13px;margin:0;}
.sh-rcf-app .small{color: var(--sh-rcf-muted); font-size:12px; line-height:1.35; margin:0;}

.sh-rcf-app .meter{height:6px;border-radius:999px;background: rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.06);}
.sh-rcf-app .bar{height:100%; width:0%; background: linear-gradient(90deg, rgba(0,163,173,.85), rgba(139,197,63,.85)); transition: width .25s ease;}

.sh-rcf-app .section{display:none;}
.sh-rcf-app .section.active{display:block;}

.sh-rcf-app .field{margin-bottom:12px;}
.sh-rcf-app label{
  display:flex; justify-content:space-between; gap:8px;
  font-size:12.5px; color: var(--sh-rcf-muted); margin:0 0 6px;
}
.sh-rcf-app textarea, .sh-rcf-app input, .sh-rcf-app select{
  width:100%;
  border:1px solid var(--sh-rcf-line);
  background: rgba(0,0,0,.22);
  color: var(--sh-rcf-text);
  border-radius: 12px;
  padding: 10px 10px;
  font-size: 13.5px;
  outline: none;
}
.sh-rcf-app textarea{min-height:90px;resize:vertical;}
.sh-rcf-app textarea:focus, .sh-rcf-app input:focus, .sh-rcf-app select:focus{
  border-color: rgba(0,163,173,.45);
}

.sh-rcf-app .twoCol{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:680px){.sh-rcf-app .twoCol{grid-template-columns:1fr;}}

.sh-rcf-app .hintBox{
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  border-radius:12px;
  padding:10px 10px;
  color: var(--sh-rcf-muted);
  font-size:12.5px;
  line-height:1.35;
  margin:12px 0 0;
}
.sh-rcf-app .hintBox strong{color: var(--sh-rcf-text); font-weight:600;}
.sh-rcf-app .bullets{margin:8px 0 0; padding-left:18px;}
.sh-rcf-app .bullets li{margin:4px 0;}

.sh-rcf-app .rowBtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.sh-rcf-app .hr{height:1px;background: var(--sh-rcf-line); margin:14px 0;}

.sh-rcf-app .summary{display:grid;gap:10px;}
.sh-rcf-app .summaryBox{
  border:1px solid var(--sh-rcf-line);
  border-radius:12px;
  background: rgba(0,0,0,.18);
  padding:12px;
}
.sh-rcf-app .summaryBox h3{margin:0 0 8px;font-size:13px;letter-spacing:.2px;}
.sh-rcf-app .summaryBox p{margin:0;color: var(--sh-rcf-muted);font-size:13px;line-height:1.4;white-space:pre-wrap;}

.sh-rcf-app footer{color: var(--sh-rcf-muted); font-size:12px; margin-top:14px; line-height:1.35;}
.sh-rcf-app code.kbd{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--sh-rcf-text);
}

@media print{
  .sh-rcf-app .toolbar, .sh-rcf-app aside{display:none !important;}
  .sh-rcf-app .grid{grid-template-columns:1fr;}
  .sh-rcf-app .rcf-wrap{padding:0;}
  .sh-rcf-app .rcf-shell{border:none; box-shadow:none;}
}