/* Signature UI layer
   Distinctive light-theme details. Calculator data and estimation logic are unchanged. */
:root{
  --signature-ink:#1b2440;
  --signature-violet:#6555e8;
  --signature-cyan:#0899b8;
  --signature-pink:#d34b9c;
  --signature-lime:#5f9d24;
  --signature-line:#dce4f0;
  --signature-soft:#f7f9ff;
}

/* A restrained identity line, without dark surfaces. */
.setup-card,
.result-command-card,
.performance-fingerprint,
.modern-section-card,
.upgrade-lab-card{
  position:relative;
}
.setup-card::before,
.result-command-card::after,
.performance-fingerprint::before,
.modern-section-card::before,
.upgrade-lab-card::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 28px auto;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent,#6555e8 18%,#0aa2bd 50%,#d34b9c 82%,transparent);
  opacity:.82;
  pointer-events:none;
}

/* Build route */
.build-route{
  --route-pad:38px;
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 28px 6px;
  padding:20px 16px 18px;
  border:1px solid #e1e7f1;
  border-radius:20px;
  background:#fbfcff;
  box-shadow:inset 0 1px 0 #fff,0 8px 24px rgba(32,48,83,.045);
  overflow:hidden;
}
.build-route::after{
  content:"BUILD ROUTE";
  position:absolute;
  right:15px;
  top:8px;
  font-size:9px;
  line-height:1;
  letter-spacing:.18em;
  font-weight:900;
  color:#a3aec1;
}
.build-route-rail{
  position:absolute;
  left:calc(12.5% + 16px);
  right:calc(12.5% + 16px);
  top:38px;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:#e8edf5;
}
.build-route-rail i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#6555e8,#0aa2bd);
  box-shadow:0 0 14px rgba(10,162,189,.28);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.build-route-step{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.build-route-node{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#7d899e;
  background:#fff;
  border:1px solid #dce3ee;
  box-shadow:0 5px 14px rgba(31,48,82,.08);
  transition:transform .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.build-route-step.is-ready .build-route-node{
  color:#fff;
  border-color:#6555e8;
  background:#6555e8;
  box-shadow:0 8px 18px rgba(101,85,232,.22);
}
.build-route-step.is-current .build-route-node{
  color:#078ba8;
  border-color:#77ccdc;
  background:#eefafd;
  animation:routePulse 1.9s ease-in-out infinite;
}
.build-route-step div{min-width:0}
.build-route-step small{
  display:block;
  margin-bottom:2px;
  color:#7b879c;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.build-route-step strong{
  display:block;
  overflow:hidden;
  color:#263149;
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.build-route-step.is-ready strong{color:#1e2942}

/* Selected controls look deliberate, not gradient-heavy. */
body .modern-select-btn.has-value{
  border-color:#cbd3e4!important;
  box-shadow:inset 4px 0 0 #6555e8,0 5px 16px rgba(31,48,82,.06)!important;
}
body .required-field:nth-child(2) .modern-select-btn.has-value{box-shadow:inset 4px 0 0 #0a9ab8,0 5px 16px rgba(31,48,82,.06)!important}
body .required-field:nth-child(3) .modern-select-btn.has-value{box-shadow:inset 4px 0 0 #d34b9c,0 5px 16px rgba(31,48,82,.06)!important}
.required-field{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.required-field:hover{
  transform:translateY(-2px);
  border-color:#cfd7e6!important;
  box-shadow:0 12px 28px rgba(31,48,82,.07)!important;
}

/* Main action becomes a clear launch control. */
.refined-action{
  overflow:hidden;
}
.refined-action::before{
  content:"";
  position:absolute;
  inset:auto 8% -55px;
  height:90px;
  border-radius:50%;
  background:rgba(101,85,232,.10);
  filter:blur(22px);
  pointer-events:none;
}
.fps-calc-btn:not(:disabled){
  min-height:58px;
  letter-spacing:.01em;
  box-shadow:0 13px 28px rgba(101,85,232,.25)!important;
}
.fps-calc-btn:not(:disabled)::after,
.upgrade-compare-btn::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-35%;
  width:22%;
  height:200%;
  transform:rotate(18deg);
  background:rgba(255,255,255,.28);
  transition:left .55s ease;
  pointer-events:none;
}
.fps-calc-btn:not(:disabled):hover::after,
.upgrade-compare-btn:hover::after{left:118%}

/* Result command card */
.result-command-card{
  overflow:hidden;
}
.result-command-card .result-hero-grid{
  position:relative;
}
.result-command-card .result-hero-grid::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px dashed rgba(101,85,232,.13);
  border-radius:24px;
  pointer-events:none;
}
.fps-dial-wrap{
  isolation:isolate;
}
.fps-dial-wrap::before{
  content:"";
  position:absolute;
  width:244px;
  height:244px;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(101,85,232,.18) 0 1deg,transparent 1deg 9deg);
  mask:radial-gradient(circle,transparent 63%,#000 64% 66%,transparent 67%);
  opacity:.62;
  animation:signatureOrbit 28s linear infinite;
  pointer-events:none;
}
.fps-dial{
  animation:dialArrival .7s cubic-bezier(.2,.8,.2,1) both;
}
.result-stat{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.result-stat:hover{
  transform:translateY(-3px);
  border-color:#cfd6ed!important;
  box-shadow:0 10px 24px rgba(31,48,82,.075)!important;
}

/* Performance DNA */
.performance-fingerprint{
  overflow:hidden;
  padding:26px;
  border:1px solid #dce3ef;
  border-radius:26px;
  background:#fff;
  box-shadow:0 20px 55px rgba(31,48,82,.09),inset 0 1px 0 #fff;
}
.performance-fingerprint::after{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-95px;
  width:250px;
  height:250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(8,153,184,.10),transparent 68%);
  pointer-events:none;
}
.fingerprint-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}
.fingerprint-head h2{
  margin:5px 0 5px;
  color:#202a40;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-.035em;
}
.fingerprint-head p{
  margin:0;
  color:#6f7d93;
}
.fingerprint-code{
  flex:0 0 auto;
  min-width:140px;
  padding:12px 15px;
  border:1px solid #d8e1ed;
  border-radius:15px;
  background:#f7f9fd;
  text-align:left;
  box-shadow:inset 0 1px 0 #fff;
}
.fingerprint-code small{
  display:block;
  color:#8390a5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
}
.fingerprint-code strong{
  display:block;
  margin-top:4px;
  color:#4f43c7;
  font-size:15px;
  letter-spacing:.08em;
}
.fingerprint-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.fingerprint-metric{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  padding:15px;
  border:1px solid #e0e6ef;
  border-radius:18px;
  background:#fbfcff;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.fingerprint-metric:hover{
  transform:translateY(-3px);
  border-color:#cfd8e8;
  box-shadow:0 12px 26px rgba(31,48,82,.075);
}
.fingerprint-ring{
  --ring-color:#6555e8;
  flex:0 0 52px;
  width:52px;
  height:52px;
  padding:5px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--ring-color) var(--fingerprint),#e7ebf3 0);
  box-shadow:0 7px 16px color-mix(in srgb,var(--ring-color) 18%,transparent);
}
.fingerprint-ring span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--ring-color);
  font-size:15px;
}
.fingerprint-metric.cyan .fingerprint-ring{--ring-color:#0899b8}
.fingerprint-metric.pink .fingerprint-ring{--ring-color:#d34b9c}
.fingerprint-metric.lime .fingerprint-ring{--ring-color:#5f9d24}
.fingerprint-metric>div:last-child{min-width:0}
.fingerprint-metric small{
  display:block;
  color:#7c899e;
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.fingerprint-metric strong{
  display:block;
  margin:3px 0 2px;
  overflow:hidden;
  color:#273149;
  font-size:14px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.fingerprint-metric em{
  display:block;
  color:#94a0b2;
  font-size:10px;
  font-style:normal;
}
.fingerprint-wave{
  position:relative;
  z-index:1;
  height:44px;
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:18px;
  padding:8px 12px;
  border:1px solid #e3e8f0;
  border-radius:14px;
  background:#f8faff;
  overflow:hidden;
}
.fingerprint-wave i{
  flex:1;
  height:var(--wave);
  min-width:2px;
  border-radius:999px;
  background:linear-gradient(to top,#6555e8,#0aa2bd);
  opacity:.68;
  transform-origin:center;
  animation:waveSignal 1.8s ease-in-out infinite alternate;
  animation-delay:calc(var(--delay) * -55ms);
}
.fingerprint-note{
  position:relative;
  z-index:1;
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin:11px 2px 0;
  color:#738098;
  font-size:12px;
}
.fingerprint-note i{margin-top:2px;color:#0899b8}

/* Result cards and chart bars feel responsive while remaining light. */
.resolution-modern-item,
.hardware-component,
.advanced-modern-item,
.other-game-card,
.history-item{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.resolution-modern-item:hover,
.hardware-component:hover,
.advanced-modern-item:hover,
.other-game-card:hover,
.history-item:hover{
  transform:translateY(-3px);
  border-color:#cfd7e6!important;
  box-shadow:0 12px 28px rgba(31,48,82,.075)!important;
}
.resolution-meter i,
.fps-graph-track i,
.hardware-score-bar i,
.refresh-track-bar i{
  transform-origin:left;
  animation:barReveal .75s cubic-bezier(.2,.8,.2,1) both;
}
.fps-graph-row{transition:background .2s ease,border-color .2s ease,transform .2s ease}
.fps-graph-row:hover{transform:translateX(3px)}

/* Upgrade lab stays solid white, with a precise selection cue. */
.proposed-build-panel .modern-select-btn{
  min-height:76px;
}
.proposed-build-panel .modern-select-btn:not(.has-value){
  border-style:dashed!important;
  border-color:#bfc9da!important;
  background:#fbfcff!important;
}
.proposed-build-panel .modern-select-btn:not(.has-value):hover{
  border-style:solid!important;
  background:#f8f9ff!important;
}

/* Small identity details */
.brand-mark{position:relative;overflow:hidden}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:inherit;
}
.section-kicker{
  letter-spacing:.055em;
}
.card-title i,
.section-kicker i{
  filter:drop-shadow(0 4px 8px rgba(101,85,232,.16));
}

@keyframes routePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(8,153,184,.22),0 5px 14px rgba(31,48,82,.08)}
  50%{box-shadow:0 0 0 8px rgba(8,153,184,0),0 8px 18px rgba(31,48,82,.09)}
}
@keyframes signatureOrbit{to{transform:rotate(360deg)}}
@keyframes dialArrival{from{opacity:.2;transform:scale(.84) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes barReveal{from{transform:scaleX(0);opacity:.25}to{transform:scaleX(1);opacity:1}}
@keyframes waveSignal{from{transform:scaleY(.72);opacity:.46}to{transform:scaleY(1);opacity:.82}}

@media(max-width:900px){
  .build-route{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:28px}
  .build-route-rail{display:none}
  .fingerprint-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .build-route{margin:0 16px 4px;grid-template-columns:1fr;gap:10px}
  .build-route::after{right:12px;top:10px}
  .build-route-step{padding:4px 0}
  .build-route-node{width:34px;height:34px;flex-basis:34px;border-radius:11px}
  .performance-fingerprint{padding:21px 16px;border-radius:22px}
  .fingerprint-head{display:block}
  .fingerprint-code{display:inline-block;margin-top:14px;min-width:0}
  .fingerprint-grid{grid-template-columns:1fr}
  .fingerprint-metric{padding:13px}
  .result-command-card .result-hero-grid::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .build-route-step.is-current .build-route-node,
  .fps-dial-wrap::before,
  .fps-dial,
  .fingerprint-wave i,
  .resolution-meter i,
  .fps-graph-track i,
  .hardware-score-bar i,
  .refresh-track-bar i{animation:none!important}
  *{scroll-behavior:auto!important}
}