:root{
  --accent: #F43676;
  --bg: #ffffff;
  --card: #fbfbfb;
  --text: #222;
  --muted: #6b6b6b;
  --radius: 14px;
}
.fps-calculator{
  max-width:980px;
  margin:12px auto;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  padding:14px;
  border-radius:18px;
  box-shadow:0 8px 30px rgba(10,10,10,0.06);
}
.fc-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px}
.fc-header h2{font-size:20px;margin:0}
.fc-header .tag{background:var(--accent);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px;margin-left:8px}

.controls .btn{margin-left:6px}

/* form */
.fc-form{display:grid;grid-template-columns:1fr;gap:12px;padding:8px}
.build, .settings, .options{background:var(--card);padding:12px;border-radius:12px}
.build h2, .settings h2, .options h2{margin:0 0 8px 0;color:var(--accent)}

.label, label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.input{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e6e6;background:#fff;font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row label{flex:1}

/* buttons */
.btn{background:var(--accent);color:#fff;border:none;padding:10px 12px;border-radius:10px;cursor:pointer}
.btn.small{padding:6px 8px;font-size:13px;border-radius:8px}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn.primary{box-shadow:0 6px 18px rgba(244,54,118,0.18)}
.info{background:transparent;border:1px dashed #ddd;padding:6px 8px;border-radius:8px;margin-left:6px;cursor:pointer}

/* profiles */
#profiles{display:flex;flex-direction:column;gap:10px}
.profile-card{display:grid;grid-template-columns:1fr 90px 36px;gap:8px;align-items:center;padding:10px;border-radius:10px;background:#fff;border:1px solid #f3f3f3}
.profile-card input[type="text"], .profile-card select{width:100%;padding:8px;border-radius:8px;border:1px solid #eee}
.removeProfile{background:#ff5b7f;color:#fff;border-radius:8px;border:none;padding:8px;cursor:pointer}

/* actions */
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.download-group{margin-left:auto;display:flex;gap:8px}

/* results */
.results{margin-top:12px;background:linear-gradient(180deg,#fff,#fcfcfc);padding:12px;border-radius:12px;border:1px solid #f1f1f1}
.hidden{display:none}
.summary{display:flex;gap:12px;flex-wrap:wrap}
.stat{flex:1;min-width:150px;padding:10px;border-radius:10px;background:#fff;border:1px solid #f4f4f4}
.stat label{font-size:12px;color:var(--muted);display:block}
.value{font-size:20px;font-weight:700;color:#222;margin-top:6px}

/* chart */
.chart-wrap{margin-top:12px;background:#fff;padding:10px;border-radius:10px;border:1px solid #f4f4f4}

/* notes */
.notes summary{cursor:pointer;padding:8px;border-radius:8px;background:#fff;border:1px solid #f4f4f4}

/* tooltip layer */
.tooltip-layer{position:fixed;right:18px;bottom:18px;z-index:9999;max-width:320px}
.tooltip{background:#fff;border-left:6px solid var(--accent);padding:10px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.12);margin-top:8px}
.tooltip h4{margin:0 0 6px 0;color:var(--accent)}
.tooltip p{margin:0;font-size:13px;color:var(--muted)}

/* footer */
.fc-footer{margin-top:12px;text-align:center;color:var(--muted);font-size:12px;padding:6px}

/* responsive */
@media(min-width:860px){
  .fc-form{grid-template-columns:1fr 360px}
  .build,.settings{min-height:200px}
}
@media(max-width:520px){
  .chart-wrap canvas{width:100% !important;height:140px !important}
  .row{flex-direction:column}
}
.dark-mode{
  --bg:#0f1114;
  --card:#141516;
  --text:#e9eef6;
  --muted:#b5bcc6;
  background:var(--bg);
  color:var(--text)
}
.dark-mode .input{background:#0f1316;color:var(--text);border:1px solid #222}
.dark-mode .profile-card{background:#0b0b0b;border:1px solid #151515}