/* BuzBolt V10.4 — tool-page visual polish only.
   Scoped to four tool pages. No changes to calculation or PDF generation scripts. */
body.bb-tool-page{
  --v104-accent:#087fab;
  --v104-strong:#075a91;
  --v104-deep:#102f61;
  --v104-light:#e0f7ff;
  --v104-faint:#f2fbff;
  --v104-border:#b7e7f6;
  --v104-glow:rgba(21,171,216,.19);
  background:linear-gradient(180deg,#f1faff 0,#f8fcff 410px,#fff 850px)!important;
}
body.bb-tool-invoice{
  --v104-accent:#7153e6;
  --v104-strong:#5c3fc7;
  --v104-deep:#35216b;
  --v104-light:#eae2ff;
  --v104-faint:#f8f5ff;
  --v104-border:#d9cbff;
  --v104-glow:rgba(116,82,224,.18);
  background:linear-gradient(180deg,#f7f3ff 0,#fbfaff 490px,#fff 960px)!important;
}
body.bb-tool-profit{
  --v104-accent:#079968;
  --v104-strong:#057857;
  --v104-deep:#064735;
  --v104-light:#d7f8e8;
  --v104-faint:#f1fcf7;
  --v104-border:#b2eed2;
  --v104-glow:rgba(4,159,108,.17);
  background:linear-gradient(180deg,#f0fcf6 0,#f9fefa 460px,#fff 900px)!important;
}
body.bb-tool-percentage{
  --v104-accent:#f27b20;
  --v104-strong:#b94c0c;
  --v104-deep:#743408;
  --v104-light:#ffead3;
  --v104-faint:#fff8f0;
  --v104-border:#ffd6ac;
  --v104-glow:rgba(235,137,51,.17);
  background:linear-gradient(180deg,#fff6e9 0,#fffcf9 460px,#fff 900px)!important;
}
/* A consistent, deliberate page intro. Never obscure the original title. */
body.bb-tool-page main.wrap{
  position:relative;
  isolation:isolate;
  padding-top:52px!important;
}
body.bb-tool-page main.wrap::before{opacity:.12!important;right:0;top:14px;background:radial-gradient(circle,var(--v104-accent),transparent 67%)!important;z-index:-1}
body.bb-tool-page main.wrap>.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px;
  margin-bottom:10px;
  color:var(--v104-strong)!important;
  background:#fff;
  border:1px solid var(--v104-border);
  border-radius:999px;
  font-size:11px;
  letter-spacing:.105em;
  box-shadow:0 8px 19px var(--v104-glow);
}
body.bb-tool-page main.wrap>.eyebrow .eyebrow-dot{background:var(--v104-accent)}
body.bb-tool-page main.wrap>h1{
  color:#13274c!important;
  font-size:clamp(2.5rem,4.65vw,4.25rem)!important;
  letter-spacing:-.055em!important;
  margin-top:9px!important;
  margin-bottom:14px!important;
  text-wrap:balance;
}
body.bb-tool-page main.wrap>.lead{
  color:#415570!important;
  font-size:clamp(1rem,1.35vw,1.15rem)!important;
  line-height:1.68;
  max-width:790px;
  margin-bottom:34px;
}
/* Hero-like workspace shell, without changing any form element or its behavior. */
body.bb-tool-page .tool,
body.bb-tool-page .editor{
  position:relative;
  border:1px solid var(--v104-border)!important;
  border-top:5px solid var(--v104-accent)!important;
  border-radius:23px!important;
  background:#fff!important;
  box-shadow:0 22px 54px rgba(18,47,77,.075),0 3px 15px var(--v104-glow)!important;
}
body.bb-tool-page .tool{overflow:hidden}
body.bb-tool-page .tool-body{
  background:linear-gradient(180deg,#fff 0,#fff 67%,var(--v104-faint) 100%);
}
/* High-clarity tab navigation. */
body.bb-tool-page .tabs,
body.bb-tool-page .mode-tabs{
  background:linear-gradient(100deg,var(--v104-light),var(--v104-faint))!important;
  border-color:var(--v104-border)!important;
  padding:11px;
  gap:9px;
}
body.bb-tool-page .tab,
body.bb-tool-page .mode-tab{
  color:#425875;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
body.bb-tool-page .tab.active,
body.bb-tool-page .mode-tab.active{
  background:#fff!important;
  color:var(--v104-strong)!important;
  border:1px solid var(--v104-border)!important;
  box-shadow:0 4px 13px var(--v104-glow)!important;
}
body.bb-tool-page .tab:hover:not(.active),
body.bb-tool-page .mode-tab:hover:not(.active){background:rgba(255,255,255,.58)}
/* Field states: more polished without moving labels or controls. */
body.bb-tool-page .tool input:not([type=hidden]),
body.bb-tool-page .tool select,
body.bb-tool-page .editor input:not([type=hidden]),
body.bb-tool-page .editor select,
body.bb-tool-page .editor textarea{
  border-color:#c9d8e6;
  background:#fff;
  box-shadow:0 2px 7px rgba(17,36,67,.025);
  transition:border-color .15s,box-shadow .15s;
}
body.bb-tool-page .tool input:focus,
body.bb-tool-page .tool select:focus,
body.bb-tool-page .editor input:focus,
body.bb-tool-page .editor textarea:focus,
body.bb-tool-page .editor select:focus{
  border-color:var(--v104-accent)!important;
  box-shadow:0 0 0 4px var(--v104-glow)!important;
}
body.bb-tool-page .private-note,
body.bb-tool-page .preview-head .private{color:#426275!important}
/* Dramatic, properly readable result surfaces. */
body.bb-tool-page .result{
  position:relative;
  overflow:hidden;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:linear-gradient(125deg,var(--v104-deep) 0%,var(--v104-strong) 72%,var(--v104-accent) 150%)!important;
  border-radius:18px!important;
  box-shadow:0 15px 33px var(--v104-glow)!important;
}
body.bb-tool-page .result:after{
  content:'';
  position:absolute;
  width:240px;height:240px;
  right:-155px;top:-170px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  box-shadow:0 0 0 36px rgba(255,255,255,.04),0 0 0 75px rgba(255,255,255,.03);
  pointer-events:none;
}
body.bb-tool-page .result-top,
body.bb-tool-page .result-top>span,
body.bb-tool-page .result-top .live-indicator,
body.bb-tool-page .result-top .format-label{
  color:#e0f3ff!important;
}
body.bb-tool-profit .result-top,
body.bb-tool-percentage .result-top{color:#fff!important}
body.bb-tool-page .answer{
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.055);
  letter-spacing:-.04em;
}
body.bb-tool-page .subanswer,
body.bb-tool-page .result-stats span,
body.bb-tool-page .result .hint,
body.bb-tool-page .result .input-suffix{color:#e9f5fc!important}
body.bb-tool-page .result-stats{border-color:rgba(255,255,255,.27)!important}
body.bb-tool-page .result-stats strong{color:#fff!important}
body.bb-tool-page .result .format-label select{
  background:#fff!important;
  color:#17304c!important;
  border:1px solid #d5e5ed!important;
  box-shadow:none;
}
body.bb-tool-page .result-stats>div{
  min-width:0;
  border:1px solid rgba(255,255,255,.19);
  background:rgba(255,255,255,.075);
  border-radius:12px;
  padding:14px 17px;
}
body.bb-tool-page .result .privacy-dot{background:#c2fff1}
/* Matching primary action style; unmodified click targets and IDs. */
body.bb-tool-page .btn.primary{
  background:linear-gradient(115deg,var(--v104-strong),var(--v104-accent))!important;
  border:1px solid var(--v104-strong)!important;
  color:#fff!important;
  box-shadow:0 8px 19px var(--v104-glow)!important;
  font-weight:800;
}
body.bb-tool-page .btn.primary:hover:not(:disabled){
  filter:brightness(.98);
  box-shadow:0 11px 24px var(--v104-glow)!important;
}
body.bb-tool-page .btn.secondary{
  border:1px solid var(--v104-border)!important;
  color:#17304a!important;
  background:#fff!important;
}
body.bb-tool-page .btn.secondary:hover:not(:disabled){background:var(--v104-faint)!important}
body.bb-tool-page :is(.btn,.tab,.mode-tab,input,select,textarea,a,summary,button):focus-visible{
  outline:3px solid var(--v104-accent)!important;outline-offset:3px;
}
/* Editorial sections and sample cards have the same visual language. */
body.bb-tool-page .below>h2{color:#142b4b;letter-spacing:-.035em}
body.bb-tool-page .steps>div,
body.bb-tool-page .examples>div{
  background:linear-gradient(145deg,var(--v104-faint),#fff)!important;
  border:1px solid var(--v104-border)!important;
  border-radius:15px!important;
  box-shadow:0 5px 20px rgba(29,44,62,.03);
}
body.bb-tool-page .steps b{color:var(--v104-strong)!important}
body.bb-tool-page .examples strong{color:#182e4b}
body.bb-tool-page .below details{border-color:#dae5ed}
body.bb-tool-page .below details summary:hover{color:var(--v104-strong)}
body.bb-tool-page .bb-related .bb-tile:hover{border-color:var(--v104-border)}
/* Time formula and conversion cards: coloured but not overwhelming. */
body.bb-tool-time .bb-time-formula{background:#e6f6ff;border-left-color:#087fab;border-color:#b9e5f7}
body.bb-tool-time .bb-time-example{background:#f4fbff;border-color:#d3edf7}
body.bb-tool-time .bb-time-guide-grid a{background:linear-gradient(135deg,#eefaff,#fff);border-color:#d4ecf7}
/* Invoice editor: keep the live paper itself and PDF drawing code unchanged. */
body.bb-tool-invoice .editor{
  background:linear-gradient(180deg,#fff 0%,#fff 74%,#fcfaff 100%)!important;
}
body.bb-tool-invoice .editor-top{padding-bottom:19px;border-bottom:1px solid #e8e2f9}
body.bb-tool-invoice .editor-top h2{color:#2d2459}
body.bb-tool-invoice .group-title{color:#28214d}
body.bb-tool-invoice .group-title .number{
  background:#e6dcff!important;color:#5b3fc2!important;
  box-shadow:inset 0 0 0 1px #d5c5fe;
}
body.bb-tool-invoice .upload{
  background:#f8f5ff!important;
  border:1.5px dashed #b8a2f7!important;
  color:#5136b6;
}
body.bb-tool-invoice .upload:hover{background:#f1eaff!important;border-color:#7856e3!important}
body.bb-tool-invoice .add-row{
  color:#593dc4!important;
  background:#f5efff!important;
  border-color:#d9caff!important;
}
body.bb-tool-invoice .clear-link{color:#5a43bb!important}
body.bb-tool-invoice .preview-column{
  border-radius:22px;
  padding:22px 20px 24px;
  border:1px solid #ded1ff;
  background:linear-gradient(145deg,#efebff 0%,#fbf9ff 60%,#f1ebff 100%);
  box-shadow:0 15px 38px rgba(78,48,132,.07);
}
body.bb-tool-invoice .preview-head{margin-bottom:18px}
body.bb-tool-invoice .preview-head h2{color:#32255a}
/* Do not alter .invoice-paper or descendants: ensures white-label PDF rendering stays independent. */
body.bb-tool-invoice .preview-column .small-foot{color:#514978}
/* Prevent clipped controls and ensure useful touch targets. */
@media(max-width:980px){
 body.bb-tool-invoice .preview-column{position:static}
}
@media(max-width:640px){
 body.bb-tool-page main.wrap{padding-top:34px!important}
 body.bb-tool-page main.wrap>.eyebrow{font-size:10px;padding:8px 11px;letter-spacing:.07em}
 body.bb-tool-page main.wrap>h1{font-size:clamp(2.3rem,9.2vw,3.3rem)!important}
 body.bb-tool-page main.wrap>.lead{font-size:15px!important}
 body.bb-tool-page .tabs,body.bb-tool-page .mode-tabs{gap:4px;padding:7px}
 body.bb-tool-page .tab,body.bb-tool-page .mode-tab{font-size:12px;line-height:1.32}
 body.bb-tool-page .result{padding:22px 18px!important}
 body.bb-tool-page .result-stats>div{padding:12px}
 body.bb-tool-invoice .preview-column{padding:16px 12px 20px}
 body.bb-tool-page .btn{min-height:50px}
}
@media(prefers-reduced-motion:reduce){
 body.bb-tool-page .tab,body.bb-tool-page .mode-tab,body.bb-tool-page input,body.bb-tool-page select,body.bb-tool-page textarea{transition:none}
}