/* Fps Increaser — tool page. Loads after index2537.css for shared tokens. */

.tool-hero{padding:44px 0 8px;}
.tool-hero .eyebrow{margin-bottom:16px;}
.tool-head{
  font-family:var(--disp);
  text-transform:uppercase;
  font-size:clamp(34px,10vw,58px);
  line-height:1.0;
  margin-bottom:14px;
}
.tool-head span{color:var(--accent);}
.tool-sub{color:var(--muted);max-width:56ch;font-size:15px;line-height:1.6;margin-bottom:8px;}

/* step rail */
.steps{
  display:flex;gap:8px;margin:26px 0 6px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
}
.steps .step{
  flex:1;padding:10px 8px;text-align:center;border-radius:8px;
  background:var(--ink-2);color:var(--muted);border:1px solid var(--line);
}
.steps .step.active{background:var(--accent);color:var(--ink);border-color:var(--accent);}
.steps .step.done{color:var(--accent);border-color:var(--accent);}

.tool-panel{padding:34px 0 80px;}

.panel{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  margin-bottom:20px;
}
.panel-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
  display:block;
}

/* dropzone */
.dropzone{
  border:2px dashed var(--line);
  border-radius:14px;
  padding:40px 20px;
  text-align:center;
  transition:border-color .18s ease, background .18s ease;
  cursor:pointer;
}
.dropzone.drag{border-color:var(--accent);background:rgba(255,198,41,.06);}
.dropzone-icon{
  width:52px;height:52px;margin:0 auto 16px;
  border-radius:12px;background:var(--ink-3);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
}
.dropzone-icon svg{width:24px;height:24px;}
.dropzone h3{font-family:var(--disp);text-transform:uppercase;font-size:19px;margin-bottom:8px;font-weight:400;}
.dropzone p{color:var(--muted);font-size:13px;}
.dropzone input{display:none;}

.file-chip{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--ink-3);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-top:16px;
}
.file-chip .fname{
  font-family:var(--mono);font-size:13px;color:var(--paper);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%;
}
.file-chip button{color:var(--muted);font-size:20px;line-height:1;padding:2px 6px;}
.file-chip button:hover{color:var(--accent);}
.file-chip.hidden{display:none;}

.btn-full{width:100%;justify-content:center;margin-top:20px;}
.btn-full[disabled]{opacity:.4;pointer-events:none;}

/* progress */
.progress-wrap{display:none;}
.progress-wrap.show{display:block;}
.progress-label{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:10px;
}
.progress-label b{color:var(--accent);}
.progress-track{
  height:10px;border-radius:6px;background:var(--ink-3);overflow:hidden;border:1px solid var(--line);
}
.progress-fill{height:100%;width:0%;background:var(--accent);border-radius:6px;transition:width .12s linear;}
.progress-note{font-size:12px;color:var(--muted);margin-top:10px;font-family:var(--mono);}

/* result */
.result{display:none;}
.result.show{display:block;}
.detected-row{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px;
}
.detected-num{font-family:var(--disp);font-size:56px;color:var(--accent);line-height:1;}
.detected-unit{font-family:var(--mono);font-size:13px;text-transform:uppercase;color:var(--muted);}
.detected-note{font-size:13px;color:var(--muted);margin-top:8px;}
.detected-note.warn{color:var(--accent-2);}

.field{margin-top:22px;}
.field label{
  display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:10px;
}
.fps-input-row{display:flex;align-items:center;gap:12px;}
.fps-input-row input{
  flex:1;background:var(--ink-3);border:1px solid var(--line);border-radius:10px;
  padding:16px 16px;font-family:var(--disp);font-size:26px;color:var(--paper);
}
.fps-input-row input:focus{border-color:var(--accent);outline:none;}
.fps-input-row span{font-family:var(--mono);color:var(--muted);text-transform:uppercase;font-size:13px;}

.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.preset{
  padding:9px 14px;border-radius:8px;border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--muted);
}
.preset:hover, .preset.active{background:var(--accent);color:var(--ink);border-color:var(--accent);}

.hint{font-size:12px;color:var(--muted);margin-top:6px;min-height:16px;}
.hint.err{color:#ff8080;}

.reset-row{margin-top:18px;text-align:center;}
.reset-row button{
  font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;text-decoration:underline;
}
.reset-row button:hover{color:var(--accent);}

@media (min-width:760px){
  .panel{padding:36px;}
}