.spx-tool{
  --spx-bg:#ffffff;--spx-panel:#f7f6ff;--spx-border:#e2e0f4;--spx-text:#1b1740;--spx-muted:#5f5b86;
  --spx-indigo:#4f46e5;--spx-violet:#7c3aed;--spx-pink:#db2777;--spx-amber:#f59e0b;--spx-teal:#0d9488;--spx-sky:#0284c7;
  --spx-danger:#be123c;
  position:relative;overflow:hidden;box-sizing:border-box;max-width:860px;margin:28px auto;padding:30px 26px 26px;
  background:radial-gradient(circle at 100% 0,#f1ecff 0,rgba(241,236,255,0) 42%),radial-gradient(circle at 0 100%,#e6f6f4 0,rgba(230,246,244,0) 38%),var(--spx-bg);
  color:var(--spx-text);border:1px solid var(--spx-border);border-radius:20px;
  box-shadow:0 1px 2px rgba(27,23,64,.06),0 14px 40px rgba(79,70,229,.14);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;text-align:left
}
.spx-tool::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--spx-indigo),var(--spx-violet) 38%,var(--spx-pink) 72%,var(--spx-amber))
}
.spx-tool *,.spx-tool *::before,.spx-tool *::after{box-sizing:border-box}
.spx-tool h2,.spx-tool h3{margin:0;color:var(--spx-text);line-height:1.25}
.spx-tool .spx-title{display:flex;align-items:center;gap:12px;font-size:1.45rem;font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
.spx-title::before{
  flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;
  border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--spx-indigo),var(--spx-violet));
  box-shadow:0 6px 14px rgba(79,70,229,.35)
}
[data-spx-tool="speed"] .spx-title::before{content:"\26A1"}
[data-spx-tool="power"] .spx-title::before{content:"\1F4A1";background:linear-gradient(135deg,var(--spx-amber),var(--spx-pink));box-shadow:0 6px 14px rgba(219,39,119,.3)}
[data-spx-tool="battery"] .spx-title::before{content:"\1F50B";background:linear-gradient(135deg,var(--spx-teal),var(--spx-sky));box-shadow:0 6px 14px rgba(13,148,136,.32)}
[data-spx-tool="charge"] .spx-title::before{content:"\1F50C";background:linear-gradient(135deg,var(--spx-violet),var(--spx-pink));box-shadow:0 6px 14px rgba(124,58,237,.32)}
.spx-lead{margin:0 0 20px;color:var(--spx-muted);font-size:.97rem}
.spx-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.spx-field{display:flex;flex-direction:column;gap:6px}
.spx-label,.spx-cell-label{font-size:.84rem;font-weight:700;color:var(--spx-text)}
.spx-hint{font-weight:400;color:var(--spx-muted)}
.spx-input,.spx-select{
  width:100%;min-height:46px;padding:9px 13px;font:inherit;font-size:16px;color:var(--spx-text);background:#fff;
  border:1.5px solid var(--spx-border);border-radius:12px;transition:border-color .15s,box-shadow .15s;margin:0
}
.spx-input:hover,.spx-select:hover{border-color:#c4c0ec}
.spx-input:focus,.spx-select:focus,.spx-btn:focus-visible,.spx-remove:focus-visible{
  outline:none;border-color:var(--spx-violet);box-shadow:0 0 0 4px rgba(124,58,237,.18)
}
.spx-check{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 13px;background:#fff;border:1.5px solid var(--spx-border);border-radius:12px;font-size:.92rem;cursor:pointer}
.spx-check input{width:19px;height:19px;margin:0;accent-color:var(--spx-violet)}
.spx-full{grid-column:1/-1}
.spx-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.spx-btn{
  min-height:46px;padding:9px 20px;font:inherit;font-weight:700;font-size:.95rem;border-radius:12px;cursor:pointer;color:#fff;
  border:0;background:linear-gradient(135deg,var(--spx-indigo),var(--spx-violet));
  box-shadow:0 6px 16px rgba(79,70,229,.32);transition:transform .15s,box-shadow .15s,filter .15s
}
.spx-btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 9px 20px rgba(79,70,229,.38)}
.spx-btn:active{transform:translateY(0)}
.spx-btn-ghost{color:var(--spx-violet);background:#fff;border:1.5px solid #cfc7f5;box-shadow:none}
.spx-btn-ghost:hover{background:#f4f0ff;box-shadow:none;filter:none}
.spx-results{margin-top:24px;padding-top:22px;border-top:1.5px dashed #d6d1f3}
.spx-hero{
  position:relative;overflow:hidden;padding:26px 20px;text-align:center;color:#fff;border-radius:18px;
  background:linear-gradient(135deg,#4f46e5 0,#7c3aed 55%,#db2777 100%);box-shadow:0 14px 30px rgba(124,58,237,.34)
}
.spx-hero::before,.spx-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.spx-hero::before{width:220px;height:220px;right:-70px;top:-90px;background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 70%)}
.spx-hero::after{width:180px;height:180px;left:-60px;bottom:-90px;background:radial-gradient(circle,rgba(245,158,11,.38),rgba(245,158,11,0) 70%)}
.spx-hero>*{position:relative;z-index:1}
.spx-hero-label{display:inline-block;padding:3px 12px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.2);border-radius:999px}
.spx-hero-value{font-size:2.7rem;font-weight:800;line-height:1.15;margin:8px 0 4px;color:#fff;word-break:break-word;text-shadow:0 2px 12px rgba(27,23,64,.25)}
.spx-hero-sub{font-size:.93rem;color:rgba(255,255,255,.92)}
.spx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.spx-stat{padding:14px 15px;background:#fff;border:1px solid var(--spx-border);border-top:4px solid var(--spx-indigo);border-radius:14px;box-shadow:0 4px 12px rgba(27,23,64,.05)}
.spx-stat:nth-child(2){border-top-color:var(--spx-teal);background:linear-gradient(180deg,#effbf9,#fff 70%)}
.spx-stat:nth-child(3){border-top-color:var(--spx-amber);background:linear-gradient(180deg,#fff8e8,#fff 70%)}
.spx-stat:nth-child(1){background:linear-gradient(180deg,#f1f0ff,#fff 70%)}
.spx-stat-label{font-size:.78rem;color:var(--spx-muted);font-weight:700}
.spx-stat-value{font-size:1.25rem;font-weight:800;margin-top:2px;word-break:break-word}
.spx-tool .spx-sub{font-size:1.02rem;font-weight:800;margin:24px 0 12px}
.spx-bars{display:flex;flex-direction:column;gap:13px}
.spx-bar-head{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;margin-bottom:5px}
.spx-bar-name{font-weight:700}
.spx-bar-val{color:var(--spx-muted);text-align:right}
.spx-bar-track{height:11px;background:#efedfb;border-radius:999px;overflow:hidden}
.spx-bar-fill{height:100%;border-radius:999px;transition:width .3s;background:linear-gradient(90deg,#6366f1,#7c3aed)}
.spx-bar-row:nth-child(6n+2) .spx-bar-fill{background:linear-gradient(90deg,#8b5cf6,#db2777)}
.spx-bar-row:nth-child(6n+3) .spx-bar-fill{background:linear-gradient(90deg,#ec4899,#f59e0b)}
.spx-bar-row:nth-child(6n+4) .spx-bar-fill{background:linear-gradient(90deg,#f59e0b,#f97316)}
.spx-bar-row:nth-child(6n+5) .spx-bar-fill{background:linear-gradient(90deg,#14b8a6,#0d9488)}
.spx-bar-row:nth-child(6n+6) .spx-bar-fill{background:linear-gradient(90deg,#38bdf8,#0284c7)}
.spx-note{margin-top:18px}
.spx-note p{margin:0 0 8px;font-size:.92rem}
.spx-note p:not(.spx-fine){padding:10px 14px;background:#f1f0ff;border-left:4px solid var(--spx-violet);border-radius:0 10px 10px 0}
.spx-fine{color:var(--spx-muted);font-size:.82rem!important}
.spx-empty{margin:0;padding:20px;text-align:center;color:var(--spx-muted);background:var(--spx-panel);border:1.5px dashed #cfc7f5;border-radius:14px}
.spx-rows{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.spx-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr) 46px;gap:10px;align-items:end;padding:13px;background:linear-gradient(135deg,#f7f6ff,#fff4fa);border:1px solid var(--spx-border);border-left:4px solid var(--spx-violet);border-radius:14px}
.spx-row:nth-child(3n+2){border-left-color:var(--spx-pink)}
.spx-row:nth-child(3n+3){border-left-color:var(--spx-teal)}
.spx-cell{display:flex;flex-direction:column;gap:4px;margin:0}
.spx-remove{width:46px;height:46px;font-size:1.4rem;line-height:1;border-radius:12px;border:1.5px solid #f3c9d6;background:#fff;color:var(--spx-danger);cursor:pointer;padding:0;transition:background .15s}
.spx-remove:hover{background:#ffe9ef}
.spx-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;margin-bottom:6px}
.spx-faq{max-width:860px;margin:24px auto;color:#1b1740;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.spx-faq h2{font-size:1.3rem;margin:0 0 14px;color:#1b1740}
.spx-faq details{border:1px solid #e2e0f4;border-left:4px solid #7c3aed;border-radius:12px;padding:13px 16px;margin-bottom:10px;background:#fff;box-shadow:0 3px 10px rgba(27,23,64,.04)}
.spx-faq details:nth-of-type(4n+2){border-left-color:#db2777}
.spx-faq details:nth-of-type(4n+3){border-left-color:#0d9488}
.spx-faq details:nth-of-type(4n+4){border-left-color:#f59e0b}
.spx-faq details[open]{background:#faf9ff}
.spx-faq summary{cursor:pointer;font-weight:700;color:#1b1740}
.spx-faq details p{margin:10px 0 0;color:#4c4873}
@media (max-width:640px){
  .spx-tool{padding:26px 16px 18px;margin:18px 0;border-radius:16px}
  .spx-tool .spx-title{font-size:1.25rem}
  .spx-form{grid-template-columns:1fr}
  .spx-stats{grid-template-columns:1fr}
  .spx-hero-value{font-size:2.1rem}
  .spx-row{grid-template-columns:1fr 1fr;align-items:end}
  .spx-cell-name{grid-column:1/-1}
  .spx-remove{grid-column:2;justify-self:end}
  .spx-add{grid-template-columns:1fr}
  .spx-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.spx-bar-fill,.spx-input,.spx-btn{transition:none}.spx-btn:hover{transform:none}}