/* Portable tool stylesheet: every application rule is isolated under .power-calculator-tool. */
    .power-calculator-tool /* This page is designed to "sit inside" your existing FX:Scape styles,.power-calculator-tool but includes a compact component layer to guarantee layout consistency
       even if global styles evolve. */

    .tool-shell{ position:relative; }
    .power-calculator-tool .tool-shell:before{
      content:"";
      position:absolute; inset:-28px -18px -28px -18px;
      background:
        radial-gradient(1000px 520px at 12% 10%, rgba(124,226,255,0.12), transparent 55%),
        radial-gradient(900px 520px at 88% 18%, rgba(139,255,176,0.10), transparent 55%),
        radial-gradient(900px 520px at 60% 95%, rgba(255,124,154,0.08), transparent 55%);
      pointer-events:none;
      filter: saturate(1.05);
      opacity: 0.9;
    }

    .power-calculator-tool .tool-grid{
      display:grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: 16px;
      align-items:start;
    }
    @media (max-width: 980px){
      .power-calculator-tool .tool-grid{ grid-template-columns: 1fr; }
    }

    .power-calculator-tool .tool-card{
      position:relative;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      box-shadow: 0 18px 50px rgba(0,0,0,0.35);
      overflow:hidden;
    }
    .power-calculator-tool .tool-card .hd{
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
    }
    .power-calculator-tool .tool-card .hd .t{
      font-weight: 900;
      letter-spacing: 0.2px;
      margin:0;
      font-size: 16px;
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap:wrap;
    }
    .power-calculator-tool .tool-card .hd .d{
      margin-top: 4px;
      color: rgba(255,255,255,0.72);
      font-size: 13px;
      line-height: 1.35;
      max-width: 66ch;
    }

    .power-calculator-tool .tool-pill{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.88);
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-size: 11px;
      white-space: nowrap;
    }

    .power-calculator-tool .tool-actions{ display:flex; gap:10px; flex-wrap:wrap; }
    .power-calculator-tool .tool-actions .btn{ cursor:pointer; }

    .power-calculator-tool .calc-wrap{ padding: 14px 18px 18px; }

    .power-calculator-tool .fields{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 720px){
      .power-calculator-tool .fields{ grid-template-columns: 1fr; }
    }

    .power-calculator-tool .field{
      background: rgba(0,0,0,0.18);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 16px;
      padding: 12px 12px 10px;
      transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
      position:relative;
    }
    .power-calculator-tool .field.source{
      border-color: rgba(139,255,176,0.34);
      box-shadow: 0 0 0 3px rgba(139,255,176,0.14);
    }
    .power-calculator-tool .field.calc{
      border-color: rgba(124,226,255,0.42);
      box-shadow: 0 0 0 3px rgba(124,226,255,0.16);
      background: rgba(124,226,255,0.06);
    }

    .power-calculator-tool .field-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
    }
    .power-calculator-tool .label{
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255,255,255,0.88);
    }

    .power-calculator-tool .tag{
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.80);
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.06);
      padding: 4px 8px;
      border-radius: 999px;
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      gap: 8px;
    }
    .power-calculator-tool .tag.calc{ border-color: rgba(124,226,255,0.36); background: rgba(124,226,255,0.10); }
    .power-calculator-tool .tag.src{ border-color: rgba(139,255,176,0.30); background: rgba(139,255,176,0.10); }

    .power-calculator-tool .autoHint{
      color: rgba(255,255,255,0.72);
      font-weight: 800;
      letter-spacing: 0.02em;
      text-transform: none;
      font-size: 11px;
      opacity: 0.95;
    }

    .power-calculator-tool .inputRow{
      display:grid;
      grid-template-columns: 1fr 150px;
      gap: 10px;
      margin-top: 10px;
      align-items:center;
    }

    .power-calculator-tool input.tool-in{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(0,0,0,0.22);
      color: rgba(255,255,255,0.92);
      font-weight: 850;
      font-size: 16px;
      outline:none;
    }
    .power-calculator-tool input.tool-in:focus{
      border-color: rgba(124,226,255,0.45);
      box-shadow: 0 0 0 3px rgba(124,226,255,0.16);
    }

    .power-calculator-tool select.tool-sel{
      width:100%;
      padding: 11px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(0,0,0,0.22);
      color: rgba(255,255,255,0.90);
      font-weight: 850;
      font-size: 14px;
      outline:none;
    }

    .power-calculator-tool .sub{
      margin-top: 8px;
      color: rgba(255,255,255,0.62);
      font-size: 12.5px;
      display:flex;
      justify-content:space-between;
      gap: 10px;
      flex-wrap:wrap;
    }
    .power-calculator-tool .sub .mono{ font-variant-numeric: tabular-nums; }
    .power-calculator-tool .sub .eng{ color: rgba(124,226,255,0.92); font-weight: 850; }

    .power-calculator-tool .note{
      margin-top: 14px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.78);
      font-size: 13px;
      line-height:1.45;
    }
    .power-calculator-tool .note.warn{ border-color: rgba(255,210,124,0.34); background: rgba(255,210,124,0.10); color: rgba(255,235,205,0.92); }
    .power-calculator-tool .note.bad{ border-color: rgba(255,124,154,0.30); background: rgba(255,124,154,0.09); color: rgba(255,220,229,0.94); }

    .power-calculator-tool .shareRow{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items:center;
      margin-top: 10px;
    }
    @media (max-width: 720px){
      .power-calculator-tool .shareRow{ grid-template-columns: 1fr; }
    }

    .power-calculator-tool input.shareUrl{
      width:100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.18);
      color: rgba(255,255,255,0.84);
      font-weight: 800;
      font-size: 13px;
      outline:none;
    }

    .power-calculator-tool .tiny{
      color: rgba(255,255,255,0.62);
      font-size: 12px;
      line-height:1.45;
    }

    .power-calculator-tool .hr{ height:1px; background: rgba(255,255,255,0.10); margin: 14px 0; }

    .power-calculator-tool .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      padding: 2px 6px;
      border: 1px solid rgba(255,255,255,0.16);
      border-bottom-color: rgba(255,255,255,0.22);
      border-radius: 8px;
      background: rgba(0,0,0,0.22);
      color: rgba(255,255,255,0.92);
      display:inline-block;
      transform: translateY(-1px);
    }

    .power-calculator-tool /* Make buttons match your site if your .btn exists; otherwise keep them usable */
    .btn.tool-btn{ padding: 10px 12px; border-radius: 12px; font-weight: 900; letter-spacing: 0.02em; }
    .power-calculator-tool .btn.tool-btn.primary{ box-shadow: 0 10px 22px rgba(0,0,0,0.22); }
    .power-calculator-tool .btn.tool-btn.ghost{ box-shadow: 0 10px 22px rgba(0,0,0,0.22); }

    .power-calculator-tool /* If your global CSS doesn't style .btn as button for <button>,.power-calculator-tool normalize */
    button.btn{ border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); }
    .power-calculator-tool button.btn.primary{ background: linear-gradient(180deg, rgba(124,226,255,0.22), rgba(124,226,255,0.10)); border-color: rgba(124,226,255,0.35); }
    .power-calculator-tool button.btn.ghost{ background: rgba(255,255,255,0.06); }
    .power-calculator-tool button.btn:hover{ transform: translateY(-1px); }
    .power-calculator-tool button.btn:active{ transform: translateY(0px) scale(0.99); }

/* ==========================================================
   PORTABLE SITE THEME BRIDGE
   The host site may override any --site-tool-* token. FX:Scape
   automatically falls back to its existing --fx-* variables.
   ========================================================== */
.power-calculator-tool{
  --power-bg:var(--site-tool-bg,var(--fx-bg,#f7f9fc));
  --power-surface:var(--site-tool-surface,var(--fx-surface,#ffffff));
  --power-surface-raised:var(--site-tool-surface-raised,var(--fx-surface-2,#f4f7fb));
  --power-control:var(--site-tool-control,var(--fx-bg-deep,#ffffff));
  --power-text:var(--site-tool-text,var(--fx-text,#13213a));
  --power-muted:var(--site-tool-muted,var(--fx-muted,#74839a));
  --power-line:var(--site-tool-line,var(--fx-line,#dfe4ea));
  --power-line-strong:var(--site-tool-line-strong,var(--fx-line-strong,#cfd6df));
  --power-accent:var(--site-tool-accent,var(--fx-primary,#5f9cff));
  --power-accent-hover:var(--site-tool-accent-hover,var(--fx-primary-2,#4f9bff));
  --power-accent-ink:var(--site-tool-accent-ink,var(--fx-primary-ink,#07111b));
  --power-accent-soft:var(--site-tool-accent-soft,rgba(99,200,255,.12));
  --power-source:#8bffb0;
  --power-source-soft:rgba(139,255,176,.5);
  min-height:100vh;
  background:var(--power-bg);
  color:var(--power-text);
  font-family:var(--site-tool-font,var(--fx-font,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif));
  font-size:16px;
  line-height:1.55;
}
.power-calculator-page>.fx-site-footer,.power-calculator-page>.site-footer{margin-top:0}
.power-calculator-tool .container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.power-calculator-tool .hero{padding:clamp(42px,6vw,78px) 0 clamp(28px,4vw,48px);background:var(--power-bg)}
.power-calculator-tool .eyebrow{margin-bottom:12px;color:var(--power-accent);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.power-calculator-tool .headline{max-width:19ch;margin:0;color:var(--power-text);font-size:clamp(2.15rem,4.5vw,3.65rem);line-height:1.04;letter-spacing:-.045em}
.power-calculator-tool .hero .subhead{max-width:78ch;margin:18px 0 0;color:var(--power-muted);font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.65}
.power-calculator-tool .tool-shell{padding:24px 0 clamp(42px,6vw,72px)}
.power-calculator-tool .wrapper{padding:clamp(44px,7vw,84px) 0;border-top:1px solid var(--power-line);background:var(--power-bg)}
.power-calculator-tool .wrapper .narrow{max-width:760px}
.power-calculator-tool .section-head h2{margin:0;color:var(--power-text);font-size:clamp(1.65rem,3vw,2.25rem);line-height:1.15}
.power-calculator-tool .muted{color:var(--power-muted)}
.power-calculator-tool .hero-cta{display:flex;margin-top:22px}
.power-calculator-tool .spacer-s{height:12px}

.power-calculator-tool .tool-card{
  border-color:var(--power-line);
  background:var(--power-surface);
  box-shadow:var(--site-tool-shadow,var(--fx-shadow,0 18px 46px rgba(29,48,77,.09)));
}
.power-calculator-tool .tool-card .hd{border-color:var(--power-line);background:var(--power-surface-raised)}
.power-calculator-tool .tool-card .hd .d{color:var(--power-muted);font-size:.875rem;line-height:1.5}
.power-calculator-tool .tool-pill,.power-calculator-tool .tag{
  border-color:var(--power-line-strong);
  background:var(--power-surface-raised);
  color:var(--power-text);
}
.power-calculator-tool .field{border-color:var(--power-line);background:var(--power-control)}
.power-calculator-tool .field.source{border-color:var(--power-source);box-shadow:0 0 0 3px var(--power-source-soft)}
.power-calculator-tool .field.calc{border-color:var(--power-accent);box-shadow:0 0 0 3px var(--power-accent-soft);background:var(--power-accent-soft)}
.power-calculator-tool .label{color:var(--power-text);font-size:.875rem}
.power-calculator-tool .tag.src{border-color:var(--power-source);background:var(--power-source-soft)}
.power-calculator-tool .tag.calc{border-color:var(--power-accent);background:var(--power-accent-soft)}
.power-calculator-tool .autoHint{color:var(--power-muted)}
.power-calculator-tool input.tool-in,
.power-calculator-tool select.tool-sel,
.power-calculator-tool input.shareUrl{
  border-color:var(--power-line);
  background:var(--power-bg);
  color:var(--power-text);
}
.power-calculator-tool input.tool-in:focus,
.power-calculator-tool select.tool-sel:focus,
.power-calculator-tool input.shareUrl:focus{border-color:var(--power-accent);box-shadow:0 0 0 3px var(--power-accent-soft)}
.power-calculator-tool .sub,.power-calculator-tool .tiny{color:var(--power-muted)}
.power-calculator-tool .sub{font-size:.8rem}
.power-calculator-tool .tiny{font-size:.82rem}
.power-calculator-tool .sub .eng,.power-calculator-tool .eng{color:var(--power-accent)}
.power-calculator-tool .note{border-color:var(--power-line);background:var(--power-surface-raised);color:var(--power-text);font-size:.875rem}
.power-calculator-tool .hr{background:var(--power-line)}
.power-calculator-tool .kbd{border-color:var(--power-line-strong);background:var(--power-bg);color:var(--power-text)}

.power-calculator-tool .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border:1px solid var(--power-line-strong);
  border-radius:12px;
  background:var(--power-surface-raised);
  color:var(--power-text);
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.power-calculator-tool .btn:hover{border-color:var(--power-accent);background:var(--power-accent-soft);color:var(--power-text)}
.power-calculator-tool .btn.primary,
.power-calculator-tool button.btn.primary{
  border-color:var(--power-accent);
  background:var(--power-accent);
  color:var(--power-accent-ink);
}
.power-calculator-tool .btn.primary:hover,
.power-calculator-tool button.btn.primary:hover{border-color:var(--power-accent-hover);background:var(--power-accent-hover);color:var(--power-accent-ink)}

@media(max-width:720px){
  .power-calculator-tool .container{width:min(100% - 24px,1180px)}
  .power-calculator-tool .hero{padding-top:34px}
  .power-calculator-tool .inputRow{grid-template-columns:minmax(0,1fr) 112px!important}
  .power-calculator-tool .hero-cta{align-items:stretch!important}
  .power-calculator-tool .hero-cta .btn{flex:1}
}
@media(max-width:430px){
  .power-calculator-tool .inputRow{grid-template-columns:1fr!important}
}

/* Clear All button */
.power-calculator-tool #btnClear {
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  opacity: 1;
}

.power-calculator-tool #btnClear:hover {
  color: #111827;
  background: #f1f5f9;
  border-color: #94a3b8;
}