:root{
  --bg:#f5f7fb;
  --bg-soft:#eef3f9;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --text:#172033;
  --muted:#65738b;
  --line:#dce4ef;
  --line-strong:#c8d4e3;
  --accent:#2457d6;
  --accent-strong:#1746bd;
  --accent-soft:#edf3ff;
  --ok:#16835f;
  --ok-soft:#ecf8f3;
  --warn:#a66a09;
  --warn-soft:#fff7e8;
  --bad:#bf3f4b;
  --bad-soft:#fff0f2;
  --shadow:0 12px 30px rgba(31,49,77,.08);
  --shadow-soft:0 6px 18px rgba(31,49,77,.06);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:linear-gradient(180deg,#f8fafc 0%,var(--bg) 60%,#f4f7fb 100%);
  color:var(--text);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,calc(100% - 36px));margin:auto}

header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(203,214,229,.85);
  box-shadow:0 2px 12px rgba(40,58,89,.03);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:68px;
}
.brand{
  font-weight:800;
  letter-spacing:-.3px;
  font-size:21px;
  color:#10203b;
}
.brand span{color:var(--accent)}
.nav small{
  color:var(--muted);
  font-weight:600;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
}

.hero{
  padding:74px 0 42px;
}
.hero .container{
  background:
    radial-gradient(circle at 88% 20%, rgba(36,87,214,.08), transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:58px 54px;
}
.hero h1{
  font-size:clamp(38px,5.4vw,66px);
  line-height:1.02;
  letter-spacing:-2px;
  margin:0 0 18px;
  max-width:900px;
  color:#12213b;
}
.hero p{
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  max-width:760px;
  margin:0;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid #cfdbef;
  border-radius:999px;
  background:var(--accent-soft);
  color:#315cae;
  font-size:13px;
  font-weight:700;
  margin-bottom:20px;
}

.section{padding:34px 0}
.section h2{
  font-size:30px;
  letter-spacing:-.7px;
  margin:0 0 8px;
  color:#15233b;
}
.section>div>p,
.section>p{
  color:var(--muted);
  line-height:1.6;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:22px;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
  transition:.18s transform,.18s border-color,.18s box-shadow;
}
.card:hover{
  transform:translateY(-3px);
  border-color:#b8c9e5;
  box-shadow:0 14px 30px rgba(31,49,77,.10);
}
.card h3{
  margin:14px 0 8px;
  font-size:19px;
  letter-spacing:-.25px;
}
.card p{
  color:var(--muted);
  line-height:1.6;
  margin:0;
}
.card .meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid #edf1f6;
  color:#516078;
  font-size:13px;
}
.status{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f7f9fc;
  color:#5f6f88;
  font-size:12px;
  font-weight:700;
}
.status.live{
  color:var(--ok);
  border-color:#bfe8d7;
  background:var(--ok-soft);
}
.status.soon{
  color:var(--warn);
  border-color:#f2d49b;
  background:var(--warn-soft);
}

.tool-shell{padding:44px 0 72px}
.tool-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}
.tool-head h1{
  margin:0 0 10px;
  letter-spacing:-1px;
  font-size:clamp(32px,4vw,46px);
  color:#15233b;
}
.tool-head p{
  color:var(--muted);
  margin:0;
  max-width:760px;
  line-height:1.65;
}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow-soft);
}
.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.btn{
  appearance:none;
  border:1px solid var(--accent);
  background:var(--accent);
  color:white;
  border-radius:10px;
  padding:11px 16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 5px 12px rgba(36,87,214,.16);
}
.btn:hover{background:var(--accent-strong)}
.btn.secondary{
  background:#fff;
  border-color:var(--line-strong);
  color:#33445f;
  box-shadow:none;
}
.btn.secondary:hover{
  border-color:#adc0dd;
  background:#f9fbfe;
}
.btn.danger{
  border-color:#d48b94;
  background:#fff;
  color:var(--bad);
  box-shadow:none;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:18px 0 22px;
}
.metric{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:17px;
  box-shadow:var(--shadow-soft);
}
.metric b{
  display:block;
  font-size:24px;
  margin-top:7px;
  color:#17233a;
}
.metric span{
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}
.note{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
.ok{color:var(--ok)!important}
.warn{color:var(--warn)!important}
.bad{color:var(--bad)!important}

.keyboard{
  display:grid;
  grid-template-columns:repeat(12,minmax(36px,1fr));
  gap:8px;
  margin-top:20px;
}
.key{
  height:46px;
  border-radius:9px;
  border:1px solid var(--line-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  color:#34445e;
  font-weight:700;
  user-select:none;
  transition:.08s;
  box-shadow:inset 0 -2px 0 rgba(45,62,91,.04);
}
.key.active{
  background:var(--accent-soft);
  border-color:#7fa2ef;
  color:#1548c0;
  transform:translateY(1px);
  box-shadow:none;
}
.log{
  margin-top:16px;
  max-height:175px;
  overflow:auto;
  background:#f7f9fc;
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px;
  font-family:Consolas,monospace;
  font-size:12px;
  color:#53617a;
}
.click-zone{
  min-height:270px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:2px dashed #b9c9e0;
  border-radius:16px;
  background:#f8fbff;
  cursor:pointer;
  user-select:none;
  font-size:22px;
  font-weight:800;
  color:#24416f;
  padding:20px;
  margin-top:18px;
}
.click-zone:hover{
  background:#f2f7ff;
  border-color:#8fabd5;
}

.gamepad{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:18px;
  margin-top:18px;
}
.axes{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.axis{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.axis b{display:block;margin-top:6px}
.bar{
  height:9px;
  background:#e6edf6;
  border-radius:99px;
  overflow:hidden;
  margin-top:9px;
}
.bar>i{
  display:block;
  height:100%;
  width:50%;
  background:linear-gradient(90deg,#2b63df,#41a37a);
}
.buttons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}
.gpbtn{
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#f8fafc;
  text-align:center;
  color:#52617a;
  font-weight:700;
}
.gpbtn.on{
  border-color:#8fb0f0;
  background:var(--accent-soft);
  color:#174abf;
}

input[type="number"]{
  border:1px solid var(--line-strong);
  background:#fff;
  color:#263751;
  border-radius:8px;
  padding:8px 9px;
  outline:none;
}
input[type="number"]:focus{
  border-color:#7f9fe0;
  box-shadow:0 0 0 3px rgba(36,87,214,.08);
}

footer{
  border-top:1px solid var(--line);
  margin-top:48px;
  padding:30px 0;
  color:var(--muted);
  font-size:13px;
  background:rgba(255,255,255,.55);
}

@media(max-width:850px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .gamepad{grid-template-columns:1fr}
  .keyboard{grid-template-columns:repeat(6,1fr)}
  .hero .container{padding:42px 32px}
}
@media(max-width:560px){
  .container{width:min(100% - 24px,1160px)}
  .grid{grid-template-columns:1fr}
  .hero{padding-top:32px}
  .hero .container{padding:32px 22px;border-radius:18px}
  .hero h1{letter-spacing:-1.2px}
  .metric-grid{grid-template-columns:1fr 1fr}
  .tool-head{display:block}
  .keyboard{grid-template-columns:repeat(4,1fr)}
  .nav small{display:none}
}

.progress{height:12px;background:#e8eef6;border-radius:999px;overflow:hidden}
.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2457d6,#41a37a);transition:width .18s}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:13px 14px;border-bottom:1px solid #edf1f6;text-align:left;font-size:14px}
th{background:#f8fafc;color:#53617a;font-weight:700}
tr:last-child td{border-bottom:0}
.report-score{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.score-ring{width:116px;height:116px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) var(--score,0%),#e8eef6 0);position:relative}
.score-ring::after{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%}
.score-ring b{position:relative;z-index:1;font-size:28px}
.checklist{display:grid;gap:10px;margin-top:16px}
.checkitem{display:flex;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.checkitem small{color:var(--muted)}
.kpi-good{color:var(--ok);font-weight:800}.kpi-warn{color:var(--warn);font-weight:800}.kpi-bad{color:var(--bad);font-weight:800}

.test-text{
  font-size:19px;
  line-height:1.8;
  padding:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fafc;
  color:#53617a;
  margin-top:16px;
  user-select:none;
  white-space:pre-wrap;
  overflow-wrap:normal;
  word-break:normal;
  overflow-x:hidden;
  overflow-y:auto;
  max-height:260px;
  scroll-behavior:auto
}
.test-text .done{color:#16835f}
.test-text .wrong{color:#bf3f4b;background:#fff0f2;border-radius:3px}
.test-text .word{white-space:pre}
.test-text .word-wrong{color:#bf3f4b;background:#fff0f2;border-radius:4px}
.test-text .word-done{color:#16835f}
.test-text .current{background:#edf3ff;color:#1746bd;border-bottom:2px solid #2457d6}
.text-input{
  width:100%;min-height:120px;margin-top:14px;padding:16px;border:1px solid var(--line-strong);
  border-radius:14px;background:#fff;color:#172033;font:inherit;font-size:17px;line-height:1.65;resize:vertical;outline:none
}
.text-input:focus{border-color:#7f9fe0;box-shadow:0 0 0 3px rgba(36,87,214,.08)}
.big-number{font-size:clamp(42px,8vw,78px);font-weight:850;letter-spacing:-2px;color:#15233b}
.center-panel{text-align:center;padding:34px 24px}
.meter{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.trigger-box{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:18px}
.trigger-value{font-size:30px;font-weight:800;margin:8px 0}
@media(max-width:650px){.meter{grid-template-columns:1fr}}

.result-section{margin-top:18px}
.result-section h2{margin:0 0 6px;font-size:23px;letter-spacing:-.4px}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.mini-stat{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px}
.mini-stat span{display:block;color:var(--muted);font-size:12px;font-weight:700}
.mini-stat b{display:block;margin-top:6px;font-size:20px;color:#17233a}
.result-chart{display:block;width:100%;height:210px;margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#f2f5fa;border:1px solid var(--line);color:#4f6079;font-size:13px;font-weight:700}
.tag.badtag{background:var(--bad-soft);border-color:#efc4c9;color:#a63542}
.history-table{margin-top:14px}
.report-group{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.report-group:first-child{margin-top:0;padding-top:0;border-top:0}
.group-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.group-head h3{margin:0;font-size:18px}.group-head small{color:var(--muted)}
.info-pill{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef3fb;color:#456184;border:1px solid #d8e2f0;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.warn-box{padding:12px 14px;border-radius:12px;border:1px solid #f0d098;background:#fff8eb;color:#7a570f;margin-top:12px;font-size:13px;line-height:1.55}
@media(max-width:850px){.mini-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mini-grid{grid-template-columns:1fr 1fr}}


/* ===== V1.1 UX DESIGN SYSTEM ===== */
body{
  display:flex;
  flex-direction:column;
}
main{flex:1}
a,button,input,textarea{outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(36,87,214,.28);
}
.toplinks{
  display:flex;
  align-items:center;
  gap:6px;
}
.toplinks a{
  padding:9px 11px;
  border-radius:9px;
  color:#52617a;
  font-size:13px;
  font-weight:700;
}
.toplinks a:hover{
  color:#183e9f;
  background:#f1f5fb;
}
.toplinks .nav-cta{
  color:#fff;
  background:var(--accent);
  margin-left:6px;
  padding-inline:14px;
}
.toplinks .nav-cta:hover{
  color:#fff;
  background:var(--accent-strong);
}
.home-hero{
  padding:54px 0 26px;
}
.home-hero .hero-surface{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);
  gap:42px;
  align-items:center;
  background:
    radial-gradient(circle at 92% 10%,rgba(36,87,214,.10),transparent 34%),
    linear-gradient(145deg,#fff 0%,#f8fbff 100%);
  border:1px solid var(--line);
  border-radius:26px;
  padding:50px;
  box-shadow:var(--shadow);
}
.home-hero h1{
  margin:0 0 16px;
  max-width:760px;
  color:#11203a;
  font-size:clamp(38px,5vw,62px);
  line-height:1.03;
  letter-spacing:-2px;
}
.home-hero .lead{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
}
.btn-link{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:11px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:800;
  font-size:14px;
}
.btn-link:hover{background:var(--accent-strong)}
.btn-link.secondary{
  background:#fff;
  color:#33445f;
  border-color:var(--line-strong);
}
.btn-link.secondary:hover{background:#f7f9fc;border-color:#aabbd4}
.quick-panel{
  padding:22px;
  border:1px solid #d7e1f0;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 26px rgba(31,49,77,.07);
}
.quick-panel h2{
  margin:0 0 6px;
  font-size:19px;
  letter-spacing:-.25px;
}
.quick-panel>p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.issue-list{
  display:grid;
  gap:8px;
}
.issue-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:45px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:#30415f;
  font-size:14px;
  font-weight:750;
  transition:.16s;
}
.issue-link:hover{
  border-color:#a9bde0;
  background:#f6f9ff;
  transform:translateX(2px);
}
.issue-link span:last-child{color:#7890b4}
.trust-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}
.trust-item{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.trust-mark{
  width:25px;height:25px;display:grid;place-items:center;
  flex:0 0 auto;border-radius:50%;
  background:var(--ok-soft);color:var(--ok);
  font-weight:900;font-size:13px;
}
.trust-item b{display:block;font-size:13px}
.trust-item small{display:block;color:var(--muted);margin-top:2px;line-height:1.4}

.tool-search-wrap{
  margin:4px 0 28px;
}
.tool-search{
  display:flex;
  align-items:center;
  gap:10px;
  width:min(620px,100%);
  min-height:48px;
  padding:0 14px;
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:13px;
  box-shadow:var(--shadow-soft);
}
.tool-search:focus-within{
  border-color:#8ba7dc;
  box-shadow:0 0 0 4px rgba(36,87,214,.07);
}
.tool-search span{color:#71819c;font-size:17px}
.tool-search input{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:15px;
  outline:0;
}
.tool-search input::placeholder{color:#8996aa}

.category-section{
  padding:26px 0 12px;
  scroll-margin-top:86px;
}
.category-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:15px;
}
.category-title{
  display:flex;
  align-items:center;
  gap:12px;
}
.category-icon{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:12px;
  font-weight:900;
  font-size:15px;
  border:1px solid;
}
.category-icon.keyboard{background:#edf3ff;border-color:#cfdbef;color:#2853b7}
.category-icon.mouse{background:#ecf8f5;border-color:#c8e9df;color:#16765a}
.category-icon.gamepad{background:#f3efff;border-color:#ddd2fb;color:#6749b5}
.category-icon.performance{background:#fff6e8;border-color:#f0ddb6;color:#946217}
.category-head h2{
  margin:0 0 3px;
  font-size:25px;
  letter-spacing:-.55px;
}
.category-head p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.category-count{
  color:#73829a;
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
}
.tool-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.tool-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:172px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 4px 15px rgba(31,49,77,.045);
  transition:.16s transform,.16s border-color,.16s box-shadow;
}
.tool-card:hover{
  transform:translateY(-2px);
  border-color:#b4c5df;
  box-shadow:0 10px 22px rgba(31,49,77,.075);
}
.tool-card .tool-tag{
  align-self:flex-start;
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:#f3f6fa;
  color:#65758d;
  font-size:11px;
  font-weight:800;
}
.tool-card h3{
  margin:14px 0 7px;
  font-size:17px;
  letter-spacing:-.2px;
}
.tool-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.tool-card .tool-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
  color:#526785;
  font-size:12px;
  font-weight:750;
}
.tool-card .tool-foot strong{color:var(--accent)}
.tool-card[hidden]{display:none!important}

.health-banner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
  margin:34px 0 18px;
  padding:24px 26px;
  border:1px solid #cfdcf1;
  border-radius:18px;
  background:linear-gradient(120deg,#f1f6ff,#fff);
}
.health-banner h2{margin:0 0 6px;font-size:22px}
.health-banner p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}

.tool-shell{
  width:min(1040px,calc(100% - 36px));
}
.tool-head{
  padding-bottom:18px;
  border-bottom:1px solid #e6ebf2;
}
.tool-head h1{font-size:clamp(30px,4vw,43px)}
.tool-head p{font-size:15px}
.tool-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
  color:#687995;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.55px;
}
.tool-page-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.back-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 11px;
  border-radius:9px;
  color:#52617a;
  font-size:13px;
  font-weight:750;
}
.back-link:hover{background:#f2f5fa;color:#234caa}
.related-tools{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.related-tools h2{
  margin:0 0 12px;
  font-size:20px;
}
.related-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.related-row a{
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:#52617a;
  font-size:12px;
  font-weight:750;
}
.related-row a:hover{border-color:#afc1df;background:#f7faff;color:#264fae}

footer{
  margin-top:auto;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.footer-links a{color:#65748b}
.footer-links a:hover{color:#264fae}

@media(max-width:900px){
  .home-hero .hero-surface{grid-template-columns:1fr;padding:36px}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .toplinks a:not(.nav-cta){display:none}
}
@media(max-width:700px){
  .trust-strip{grid-template-columns:1fr}
  .health-banner{grid-template-columns:1fr}
  .category-head{align-items:flex-start}
}
@media(max-width:560px){
  .home-hero{padding-top:24px}
  .home-hero .hero-surface{padding:26px 20px;border-radius:18px;gap:26px}
  .home-hero h1{font-size:38px;letter-spacing:-1.25px}
  .home-hero .lead{font-size:16px}
  .tool-grid{grid-template-columns:1fr}
  .category-count{display:none}
  .category-icon{width:38px;height:38px}
  .footer-inner{align-items:flex-start;flex-direction:column}
  .tool-shell{width:min(100% - 24px,1040px)}
  .toplinks .nav-cta{font-size:0;padding:9px 10px}
  .toplinks .nav-cta::after{content:"Rapor";font-size:12px}
}


/* ===== V1.2 QUALITY UX ===== */
.control-label{
  display:inline-flex;align-items:center;gap:8px;color:#5c6d87;font-size:13px;font-weight:700
}
.select-control{
  min-height:40px;padding:8px 34px 8px 11px;border:1px solid var(--line-strong);
  border-radius:9px;background:#fff;color:#263751;font:inherit;font-size:13px;outline:none
}
.select-control:focus{border-color:#7f9fe0;box-shadow:0 0 0 3px rgba(36,87,214,.08)}
.result-panel{margin-top:18px}
.result-panel[hidden]{display:none}
.chart-shell{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:13px;background:#fbfcfe}
.chart-shell canvas{width:100%;height:190px;display:block}
.result-bars{display:grid;gap:9px;margin-top:14px}
.result-bar{display:grid;grid-template-columns:70px 1fr 72px;gap:10px;align-items:center}
.result-bar span{font-size:12px;color:var(--muted)}
.result-bar .track{height:9px;border-radius:99px;background:#e8eef6;overflow:hidden}
.result-bar .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2457d6,#5b82e8)}
.result-bar b{text-align:right;font-size:12px;color:#34445e}
.device-report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.device-report{
  border:1px solid var(--line);border-radius:15px;background:#fff;padding:18px;box-shadow:var(--shadow-soft)
}
.device-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}
.device-report h3{margin:0 0 4px;font-size:18px}.device-report p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.device-score{font-size:22px;font-weight:850;color:#233857;white-space:nowrap}
.device-score.good{color:var(--ok)}.device-score.warn{color:var(--warn)}.device-score.bad{color:var(--bad)}
.coverage-line{display:flex;justify-content:space-between;gap:12px;margin:11px 0 6px;color:#6b7b94;font-size:12px}
.device-report .progress{height:8px}
.report-overview{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
.coverage-card{border:1px solid var(--line);border-radius:15px;background:#f8fafc;padding:18px}
.coverage-card h3{margin:0 0 5px}.coverage-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.coverage-big{display:flex;align-items:flex-end;gap:7px;margin:16px 0 7px}
.coverage-big b{font-size:38px;line-height:1;color:#173c8e}.coverage-big span{font-size:13px;color:var(--muted);padding-bottom:4px}
.report-section{margin-top:22px}
.empty-state{padding:14px;border:1px dashed var(--line-strong);border-radius:11px;background:#fafbfd;color:var(--muted);font-size:13px}
.layout-note{margin-left:auto}
@media(max-width:850px){
  .device-report-grid{grid-template-columns:1fr}
  .report-overview{grid-template-columns:1fr}
}
@media(max-width:560px){
  .result-bar{grid-template-columns:55px 1fr 58px}
  .layout-note{width:100%;margin-left:0}
}


/* ===== V1.4 DEEP DIAGNOSTICS ===== */
.wizard-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px
}
.wizard-step{
  padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;
  color:#6b7b94;font-size:12px;font-weight:800;text-align:center
}
.wizard-step.active{background:var(--accent-soft);border-color:#9bb5e8;color:#1746bd}
.wizard-step.done{background:var(--ok-soft);border-color:#bfe8d7;color:var(--ok)}
.wizard-screen[hidden]{display:none}
.test-target{
  min-height:230px;display:flex;align-items:center;justify-content:center;text-align:center;
  border:2px dashed #b9c9e0;border-radius:16px;background:#f8fbff;color:#24416f;
  padding:24px;font-size:20px;font-weight:800;user-select:none;margin-top:15px
}
.test-target.good{background:var(--ok-soft);border-color:#86ceb2;color:#12694d}
.test-target.warn{background:var(--warn-soft);border-color:#e4bd72;color:#875b0b}
.test-target.bad{background:var(--bad-soft);border-color:#df959e;color:#9b2d39}
.diagnostic-summary{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:stretch
}
.summary-score{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:16px;background:#f8fafc;padding:24px
}
.summary-score .big{font-size:52px;font-weight:900;letter-spacing:-2px;color:#183b84}
.summary-score small{color:var(--muted)}
.summary-list{display:grid;gap:9px}
.summary-row{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:#fff
}
.summary-row span{color:#5b6b83;font-size:13px}.summary-row b{font-size:13px}
.gamepad-visual-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:18px}
.controller-card{border:1px solid var(--line);border-radius:16px;background:#f8fafc;padding:18px}
.controller-canvas{width:100%;height:330px;display:block}
.stick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stick-pad{
  position:relative;aspect-ratio:1/1;border-radius:50%;border:1px solid var(--line-strong);
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),#d8e0eb 50%,transparent calc(50% + .5px)),
    linear-gradient(0deg,transparent calc(50% - .5px),#d8e0eb 50%,transparent calc(50% + .5px)),
    radial-gradient(circle at center,#fff 0 10%,#f5f8fb 11% 100%);
  overflow:hidden
}
.stick-deadzone{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:16%;height:16%;border-radius:50%;border:1px dashed #9eb0c8;background:rgba(255,255,255,.55)
}
.stick-dot{
  position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  background:#2457d6;border:2px solid #fff;box-shadow:0 2px 8px rgba(36,87,214,.3);
  transform:translate(-50%,-50%)
}
.stick-readout{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:#62728b;font-size:12px}
.mapping-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}
.mapping-box{padding:12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.mapping-box span{display:block;color:var(--muted);font-size:11px}.mapping-box b{display:block;margin-top:5px;font-size:14px}
.heatmap-wrap{overflow:auto;margin-top:12px;padding-bottom:4px}
.key-heatmap{
  min-width:760px;display:grid;grid-template-columns:repeat(12,1fr);gap:7px
}
.heat-key{
  min-height:38px;border:1px solid var(--line-strong);border-radius:8px;background:#f8fafc;
  display:flex;align-items:center;justify-content:center;position:relative;font-size:12px;font-weight:800;color:#40506a
}
.heat-key small{
  position:absolute;right:4px;bottom:2px;font-size:9px;color:#7b4050
}
.heat-legend{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;margin-top:8px}
.heat-box{width:30px;height:9px;border-radius:99px;background:linear-gradient(90deg,#f8fafc,#f5c6cb,#bf3f4b)}
@media(max-width:850px){
  .diagnostic-summary,.gamepad-visual-grid{grid-template-columns:1fr}
  .wizard-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .stick-grid,.mapping-grid{grid-template-columns:1fr}
  .controller-canvas{height:250px}
}


/* ===== V1.5 ANALYTICS / RETENTION ===== */
.featured-section{padding:14px 0 26px}
.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.featured-card{
  position:relative;display:flex;flex-direction:column;min-height:190px;padding:19px;
  border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-soft);
  transition:.16s transform,.16s border-color,.16s box-shadow
}
.featured-card:hover{transform:translateY(-2px);border-color:#aebfdb;box-shadow:0 12px 24px rgba(31,49,77,.08)}
.featured-card .eyebrow{color:#5e7190;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.55px}
.featured-card h3{margin:11px 0 7px;font-size:18px;letter-spacing:-.25px}
.featured-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.featured-card .featured-foot{margin-top:auto;padding-top:15px;display:flex;justify-content:space-between;gap:10px;color:#5d6d86;font-size:12px;font-weight:800}
.featured-card .featured-foot strong{color:var(--accent)}
.drift-visuals{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.drift-card{border:1px solid var(--line);border-radius:15px;background:#f8fafc;padding:16px}
.drift-canvas{width:100%;aspect-ratio:1/1;display:block;border-radius:50%;background:#fff}
.drift-meta{display:flex;justify-content:space-between;gap:10px;margin-top:9px;color:#63738b;font-size:12px}
.history-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.history-card{padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff}
.history-card b{display:block;font-size:18px;color:#243a5b}.history-card span{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.4}
.finger-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.finger-card{padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff}
.finger-card b{display:block;font-size:14px;color:#283c5d}.finger-card span{display:block;margin-top:5px;color:var(--muted);font-size:12px}
.finger-card .finger-rate{font-size:20px;margin-top:7px;font-weight:850}
.finger-card.weak{border-color:#efbdc3;background:#fff7f8}.finger-card.weak .finger-rate{color:var(--bad)}
.finger-card.good{border-color:#c4e4d7;background:#f7fcfa}.finger-card.good .finger-rate{color:var(--ok)}
.comparison-line{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 13px;
  border:1px solid var(--line);border-radius:11px;background:#f8fafc;color:#5c6d86;font-size:13px
}
.comparison-line b{color:#283d5d}
@media(max-width:980px){.featured-grid{grid-template-columns:repeat(2,1fr)}.history-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.drift-visuals{grid-template-columns:1fr}.finger-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.featured-grid,.history-cards,.finger-grid{grid-template-columns:1fr}}


/* ===== V1.6 CONTENT / SEO ===== */
.info-content{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.info-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-box{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff}
.info-box h2{margin:0 0 9px;font-size:19px;letter-spacing:-.25px}
.info-box p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.info-box ol{margin:0;padding-left:20px;color:#52617a;font-size:14px;line-height:1.7}
.info-box li+li{margin-top:5px}
.faq-section{margin-top:28px}
.faq-section>h2{font-size:22px;margin:0 0 13px}
.faq-list{display:grid;gap:9px}
.faq-item{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.faq-item summary{cursor:pointer;padding:14px 16px;font-size:14px;font-weight:800;color:#30415f;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:#7184a1;font-size:18px;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:0;padding:0 16px 15px;color:var(--muted);font-size:13px;line-height:1.65}
.privacy-note{margin-top:22px;padding:14px 16px;border:1px solid #d5e3f7;border-radius:12px;background:#f6f9ff;color:#536783;font-size:13px;line-height:1.55}
@media(max-width:760px){.info-content-grid{grid-template-columns:1fr}}


/* ===== TESTARYA BRAND ===== */
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{display:block;width:154px;height:auto;max-height:40px}
@media(max-width:560px){.brand-logo{width:132px}}
.legal-shell{width:min(900px,calc(100% - 36px));margin:0 auto;padding:48px 0 70px}
.legal-shell h1{font-size:clamp(34px,5vw,52px);margin:0 0 14px;letter-spacing:-1.2px;color:#13223c}
.legal-shell h2{margin:28px 0 10px;font-size:21px;color:#223653}
.legal-shell p,.legal-shell li{color:#5d6d86;line-height:1.75;font-size:14px}
.legal-shell ul{padding-left:21px}
.error-page{min-height:62vh;display:grid;place-items:center;text-align:center}
.error-code{font-size:82px;font-weight:900;letter-spacing:-5px;color:#d8e2f2;line-height:1}
.error-page h1{margin:8px 0 8px}
.error-page p{max-width:520px;color:var(--muted);line-height:1.6}


/* ===== V1.8 GUIDED DIAGNOSTICS ===== */
.problem-chooser{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.problem-choice{appearance:none;text-align:left;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--text);cursor:pointer;box-shadow:var(--shadow-soft);transition:.15s border-color,.15s transform,.15s background}
.problem-choice:hover{border-color:#aabddd;transform:translateY(-1px)}
.problem-choice.active{border-color:#86a7e7;background:var(--accent-soft)}
.problem-choice b{display:block;font-size:16px;margin-bottom:5px}.problem-choice span{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.guided-stage{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px dashed #b8c8df;border-radius:17px;background:#f8fbff;padding:24px;margin-top:16px;user-select:none}
.guided-stage.ready{border-color:#89a9e6;background:#f3f7ff}.guided-stage.good{border-color:#86ceb2;background:var(--ok-soft)}.guided-stage.warn{border-color:#e3bb70;background:var(--warn-soft)}.guided-stage.bad{border-color:#de929c;background:var(--bad-soft)}
.guided-stage .cue{font-size:28px;font-weight:900;letter-spacing:-.5px;color:#1d3f7e}.guided-stage .cue-sub{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.55;max-width:560px}
.guided-progress{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;color:#65758d;font-size:12px}
.guided-progress b{color:#263b5d;font-size:13px}
.simple-result{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff;box-shadow:var(--shadow-soft)}
.simple-result.good{border-color:#b9dfd0;background:#f8fcfa}.simple-result.warn{border-color:#efd29b;background:#fffaf1}.simple-result.bad{border-color:#efbcc3;background:#fff8f9}
.simple-result .result-kicker{font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.6px;color:#687991}.simple-result h2{font-size:28px;letter-spacing:-.6px;margin:6px 0 9px}.simple-result p{margin:0;color:#5b6b83;line-height:1.65}.result-evidence{display:grid;gap:8px;margin:18px 0 0}.result-evidence div{padding:11px 13px;border:1px solid rgba(190,202,220,.8);border-radius:11px;background:rgba(255,255,255,.75);font-size:13px;color:#4e607a}.next-action{margin-top:18px;padding:15px 16px;border-radius:12px;background:#eef4ff;border:1px solid #c9daf7;color:#36557f;font-size:14px;line-height:1.55}.next-action b{color:#203f71}
.tech-details{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}.tech-details summary{cursor:pointer;padding:13px 15px;font-weight:800;color:#40526d;font-size:13px;list-style:none}.tech-details summary::-webkit-details-marker{display:none}.tech-details summary::after{content:'+';float:right}.tech-details[open] summary::after{content:'–'}.tech-details-body{padding:0 15px 15px;color:#66758c;font-size:12px;line-height:1.65}.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tech-cell{padding:10px;border:1px solid var(--line);border-radius:9px;background:#f8fafc}.tech-cell span{display:block;color:#78879c;font-size:10px;text-transform:uppercase;letter-spacing:.4px}.tech-cell b{display:block;margin-top:4px;color:#30445f;font-size:13px}
.button-check-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:15px}.button-check{padding:14px 8px;border:1px solid var(--line);border-radius:11px;background:#f8fafc;text-align:center;font-size:12px;font-weight:800;color:#66758d}.button-check.seen{background:var(--ok-soft);border-color:#a8d9c5;color:#147255}.protocol-note{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border:1px solid #d4e0f1;border-radius:11px;background:#f7faff;color:#536783;font-size:12px;line-height:1.5}.protocol-note b{color:#29486f}
.history-status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850}.history-status.good{background:var(--ok-soft);color:var(--ok)}.history-status.warn{background:var(--warn-soft);color:var(--warn)}.history-status.bad{background:var(--bad-soft);color:var(--bad)}
@media(max-width:700px){.problem-chooser{grid-template-columns:1fr}.button-check-grid{grid-template-columns:repeat(3,1fr)}.tech-grid{grid-template-columns:1fr 1fr}.guided-stage{min-height:220px}.guided-stage .cue{font-size:24px}}
@media(max-width:460px){.tech-grid{grid-template-columns:1fr}.button-check-grid{grid-template-columns:repeat(2,1fr)}}

.text-button{appearance:none;border:0;background:none;padding:0;color:var(--accent);font:inherit;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:2px}


/* ===== V1.7 BENEFIT-FIRST / A-B DIAGNOSIS ===== */
.benefit-section{padding:20px 0 10px}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.benefit-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px;box-shadow:var(--shadow-soft)}.benefit-card>span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef4ff;color:#2457d6;font-size:12px;font-weight:900}.benefit-card h3{margin:14px 0 7px;font-size:18px;letter-spacing:-.25px}.benefit-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.guided-entry{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin:18px 0;padding:18px 20px;border:1px solid #cbdaf2;border-radius:15px;background:linear-gradient(115deg,#f3f7ff,#fff)}.guided-entry h2{margin:4px 0 6px;font-size:19px}.guided-entry p{margin:0;color:#5d6d86;font-size:13px;line-height:1.55}.guided-entry .eyebrow{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.55px;color:#2457d6}
.control-verify{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:14px 15px;border:1px solid #e6c887;border-radius:12px;background:#fffaf0}.control-verify>div{display:grid;gap:3px}.control-verify span{color:#6d7180;font-size:12px}.control-verify.verified{border-color:#acd9c7;background:#f5fbf8}
.condition-compare{margin-top:18px;padding:17px;border:1px solid #c9daf7;border-radius:14px;background:#f7faff}.condition-compare-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.condition-compare-head>div{display:grid;gap:4px}.condition-compare-head b{color:#27456f}.condition-compare-head span:not(.info-pill){color:#65758d;font-size:12px;line-height:1.5}.condition-options{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.condition-options button{border:1px solid #c9d4e6;border-radius:9px;background:#fff;padding:9px 11px;color:#51647e;font-weight:750;font-size:12px;cursor:pointer}.condition-options button.selected{background:#eaf1ff;border-color:#7092d4;color:#1746aa}.condition-result{margin-top:15px;padding:15px 16px;border-radius:12px;border:1px solid var(--line);background:#fff}.condition-result.good{border-color:#b7dfcf;background:#f7fcf9}.condition-result.warn{border-color:#ecd198;background:#fffaf1}.condition-result.bad{border-color:#eab5bd;background:#fff7f8}.condition-result h3{margin:5px 0 6px;font-size:18px}.condition-result p{margin:0;color:#5f6f86;font-size:13px;line-height:1.6}
@media(max-width:780px){.benefit-grid{grid-template-columns:1fr}.guided-entry{grid-template-columns:1fr}.control-verify{align-items:stretch;flex-direction:column}.condition-compare-head{flex-direction:column}}


/* ===== V1.8 GAMEPAD FAULT ISOLATION ===== */
.benefit-callout{display:grid;gap:4px;margin-top:16px;padding:15px 16px;border:1px solid #c9daf7;border-radius:12px;background:#f5f8ff}.benefit-callout b{color:#224777}.benefit-callout span{color:#60728c;font-size:13px;line-height:1.55}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.setup-grid label{display:grid;gap:6px;color:#65758d;font-size:12px;font-weight:800}.setup-grid select{min-height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 11px;color:#30445f;font-weight:750}.device-line{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.device-line span{font-size:11px;color:#7a899c;text-transform:uppercase;letter-spacing:.4px}.device-line b{font-size:13px;color:#314761;overflow-wrap:anywhere}.device-line small{grid-column:2;color:#718096}
.dual-live{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.dual-live>div{padding:13px;border:1px solid var(--line);border-radius:11px;background:#f8fafc}.dual-live span{display:block;font-size:10px;text-transform:uppercase;color:#7b8a9d}.dual-live b{display:block;margin-top:4px;color:#29415f}
.return-dot-wrap{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;margin-top:15px}.return-cross{position:relative;width:180px;height:180px;border:1px solid var(--line);border-radius:50%;background:linear-gradient(#fff,#f8fafc)}.return-cross:before,.return-cross:after{content:'';position:absolute;background:#dfe6ef}.return-cross:before{left:50%;top:10%;bottom:10%;width:1px}.return-cross:after{top:50%;left:10%;right:10%;height:1px}.return-cross i{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:#2457d6;transform:translate(-50%,-50%);transition:transform .04s linear}.return-dot-wrap>div:last-child{display:grid;gap:5px}.return-dot-wrap span{font-size:11px;color:#7a899b;text-transform:uppercase}.return-dot-wrap b{font-size:26px;color:#27415f}.return-dot-wrap small{color:#6b7b91;line-height:1.5}
@media(max-width:680px){.setup-grid{grid-template-columns:1fr}.device-line{grid-template-columns:1fr}.device-line small{grid-column:1}.dual-live{grid-template-columns:1fr 1fr}.return-dot-wrap{grid-template-columns:1fr}.return-cross{margin:auto}}


/* ===== V1.9 KEYBOARD PROBLEM ISOLATION ===== */
.problem-link{text-decoration:none}
.diagnose-keyboard{display:grid;grid-template-columns:repeat(14,minmax(38px,1fr));gap:6px;margin-top:16px;max-height:320px;overflow:auto;padding:3px}
.diagnose-key{min-height:42px;border:1px solid var(--line);border-radius:9px;background:#f8fafc;color:#465973;font-weight:850;font-size:11px;cursor:pointer}
.diagnose-key:hover{border-color:#a4b8d8;background:#f3f7ff}
.diagnose-key.selected{border-color:#7195dd;background:#eaf1ff;color:#173f8d;box-shadow:inset 0 0 0 1px #7195dd}
.selected-key-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#f8fafc;color:#687992;font-size:12px}
.selected-key-line b{font-size:16px;color:#25466f}
.control-key-box{display:grid;grid-template-columns:1fr minmax(150px,220px);gap:16px;align-items:center;margin-top:12px;padding:15px;border:1px solid #d3def0;border-radius:12px;background:#f7faff}
.control-key-box>div{display:grid;gap:4px}.control-key-box b{color:#29486f}.control-key-box span{color:#687992;font-size:12px;line-height:1.5}
.cue-label{font-size:11px;font-weight:900;letter-spacing:.65px;color:#74849b;text-transform:uppercase;margin-bottom:8px}
.test-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.test-mini-stats>div{padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.test-mini-stats span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.45px;color:#7b8a9d}
.test-mini-stats b{display:block;margin-top:4px;font-size:17px;color:#29415f}
.stop-test{display:block;margin:15px auto 0;font-size:12px}
.compact-benefits{margin-top:14px}
@media(max-width:950px){.diagnose-keyboard{grid-template-columns:repeat(10,minmax(38px,1fr))}}
@media(max-width:700px){.diagnose-keyboard{grid-template-columns:repeat(6,minmax(40px,1fr));max-height:360px}.control-key-box{grid-template-columns:1fr}.test-mini-stats{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:440px){.diagnose-keyboard{grid-template-columns:repeat(4,minmax(42px,1fr))}.test-mini-stats{grid-template-columns:1fr}.guided-stage .cue{font-size:38px}}

/* ===== V2.0 HEALTH JOURNEY ===== */
.health-flow-bar{margin:0 0 22px;padding:16px 18px;border:1px solid #cddcf1;border-radius:14px;background:linear-gradient(180deg,#f8fbff,#f2f7ff)}
.health-flow-main{display:flex;align-items:center;justify-content:space-between;gap:18px}
.health-flow-main>div{display:grid;gap:3px}.health-flow-kicker{font-size:11px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;color:#2457d6}.health-flow-main b{font-size:17px;color:#223754}.health-flow-main small{color:#65768f;line-height:1.45}
.health-flow-next.disabled{pointer-events:none;opacity:.48;filter:grayscale(.2)}
.health-flow-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid #dbe6f4}.health-flow-step{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #d7e1ee;color:#65758c;font-size:12px;font-weight:700}.health-flow-step i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-style:normal;background:#edf2f8;color:#6a7b92;font-size:10px}.health-flow-step.current{border-color:#9bb6e6;color:#2457d6}.health-flow-step.current i{background:#e4edff;color:#2457d6}.health-flow-step.done{border-color:#b6dfcf;color:#167255;background:#f7fcfa}.health-flow-step.done i{background:#dff3ea;color:#167255}
.health-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.health-device-choice{appearance:none;text-align:left;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:.16s ease}.health-device-choice:hover{border-color:#9eb4d4;transform:translateY(-1px)}.health-device-choice.active{border-color:#789ee1;background:#f4f8ff;box-shadow:inset 0 0 0 1px #789ee1}.health-device-choice span{display:block;color:#6f7f95;font-size:11px}.health-device-choice b{display:block;margin:4px 0 5px;color:#223b59;font-size:18px}.health-device-choice small{display:block;color:#687991;line-height:1.45}
.health-plan{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:12px;align-items:stretch}.health-plan-main,.health-plan-side{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff}.health-plan-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.health-plan-head h2{margin:0 0 6px;font-size:21px}.health-plan-head p{margin:0;color:#687991;line-height:1.55}.health-plan-status{white-space:nowrap;padding:7px 10px;border-radius:999px;background:#edf2f8;color:#5f7087;font-size:11px;font-weight:800}.health-plan-status.done{background:#e7f7f0;color:#167255}.health-plan-status.warn{background:#fff6df;color:#8a6414}.health-plan-status.bad{background:#fff0f1;color:#a63a46}
.health-step-list{display:grid;gap:9px;margin:18px 0}.health-step-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border:1px solid #dce5f0;border-radius:11px;background:#fafcff}.health-step-row i{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#edf2f8;color:#6e7f95;font-size:11px;font-style:normal;font-weight:900}.health-step-row.done i{background:#daf2e7;color:#167255}.health-step-row b{display:block;color:#304762;font-size:13px}.health-step-row small{display:block;margin-top:2px;color:#7a889a;font-size:11px}.health-step-row a{font-size:12px;font-weight:800;color:#2457d6;text-decoration:none}.health-step-row a:hover{text-decoration:underline}
.health-plan-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.health-plan-side{display:flex;flex-direction:column;justify-content:center}.health-plan-side span{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#76859a}.health-plan-side strong{font-size:34px;color:#263f5f;margin:4px 0}.health-plan-side p{margin:0;color:#6f7e92;font-size:12px;line-height:1.5}.health-plan-side .progress{margin:10px 0}
.optional-tests{margin-top:18px}.optional-tests h2{margin-bottom:5px}.optional-tests>p{margin-top:0;color:#6e7e94}.optional-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.optional-card{display:block;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none}.optional-card b{display:block;color:#2e4562;font-size:13px}.optional-card span{display:block;margin-top:4px;color:#748399;font-size:11px;line-height:1.45}.optional-card strong{display:block;margin-top:9px;color:#2457d6;font-size:12px}
.report-section[hidden]{display:none!important}
@media(max-width:850px){.health-selector{grid-template-columns:1fr}.health-plan{grid-template-columns:1fr}.optional-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.health-flow-main{align-items:flex-start;flex-direction:column}.health-flow-next{width:100%;text-align:center}.health-flow-steps{display:grid;grid-template-columns:1fr}.health-selector{gap:8px}.health-step-row{grid-template-columns:28px 1fr}.health-step-row>a{grid-column:2}.optional-grid{grid-template-columns:1fr}.health-plan-head{flex-direction:column}.health-plan-status{white-space:normal}}
.health-complete-note{display:inline-flex;align-items:center;min-height:39px;padding:0 12px;border-radius:9px;background:#eaf8f1;color:#167255;font-weight:800;font-size:13px}.report-cleanup{display:flex;align-items:center;justify-content:space-between;gap:18px}.report-cleanup h2{margin:0 0 5px;font-size:18px}.report-cleanup p{margin:0}.health-plan-side.bad{border-color:#efc8cd;background:#fffafa}.health-plan-side.warn{border-color:#eadba8;background:#fffdf7}@media(max-width:600px){.report-cleanup{align-items:stretch;flex-direction:column}.report-cleanup .btn{width:100%}}
.report-last-update{color:#718198;font-size:11px;line-height:1.4;text-align:right;max-width:230px}@media(max-width:600px){.report-last-update{text-align:left;max-width:none}}

/* ===== V2.0 HEALTH JOURNEY POLISH ===== */
.health-device-choice{position:relative;min-height:128px}
.health-device-choice .device-completion{font-size:11px;font-weight:700;color:#7a8797}
.health-device-choice .device-completion.done{color:#28765d}
.health-device-choice .device-result{display:inline-flex;margin-top:10px;padding:5px 8px;border-radius:999px;font-style:normal;font-size:10px;font-weight:800;background:#eef2f7;color:#65758c}
.health-device-choice .device-result.done{background:#e7f7f0;color:#167255}.health-device-choice .device-result.warn{background:#fff6df;color:#8a6414}.health-device-choice .device-result.bad{background:#fff0f1;color:#a63a46}
.health-plan-side.complete{justify-content:flex-start;padding-top:20px}.health-plan-side .health-finished{font-size:23px;margin:7px 0 2px;color:#167255;letter-spacing:-.4px}
.side-result{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.side-result span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#7b8799}.side-result b{display:block;margin-top:5px;font-size:13px;color:#506078}.side-result.done b{color:#167255}.side-result.warn b{color:#8a6414}.side-result.bad b{color:#a63a46}
.health-result-strip{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;margin-top:17px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.health-result-strip>span{grid-row:1 / span 2;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#758399}.health-result-strip>b{font-size:14px;color:#3b4e68}.health-result-strip>small{color:#758399;line-height:1.45}.health-result-strip.done{border-color:#cee8dc;background:#f5fbf8}.health-result-strip.done>b{color:#167255}.health-result-strip.warn{border-color:#eadba8;background:#fffdf7}.health-result-strip.warn>b{color:#8a6414}.health-result-strip.bad{border-color:#efc8cd;background:#fffafa}.health-result-strip.bad>b{color:#a63a46}
.optional-tests{padding:0;overflow:hidden}.optional-tests summary{list-style:none}.optional-tests summary::-webkit-details-marker{display:none}.optional-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;cursor:pointer}.optional-summary:hover{background:#fbfcfe}.optional-summary h2{margin:0 0 4px}.optional-summary p{margin:0;color:#6e7e94;font-size:13px;line-height:1.5}.optional-toggle-text{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#2457d6;font-size:12px;font-weight:800}.optional-body{padding:0 20px 20px;border-top:1px solid var(--line)}.optional-body .optional-grid{padding-top:16px}
@media(max-width:700px){.health-result-strip{grid-template-columns:1fr}.health-result-strip>span{grid-row:auto}.optional-summary{align-items:flex-start}.health-plan-side.complete{padding-top:18px}}