/* Extracted from style.css: calculator styles */

/* Calculator page content styles */
/* Calculator inner content only. Shared site chrome is in common.css. */
/* Calculator page */

.tool-content {
      --dash-bg: #f3f5f8;
      --dash-surface: #ffffff;
      --dash-surface-2: #f8fafc;
      --dash-text: #172033;
      --dash-muted: #6b7280;
      --dash-border: #dfe3e8;
      --dash-primary: #4f6f88;
      --dash-primary-soft: #edf3f7;
      --dash-success: #12805c;
      --dash-warning: #b7791f;
      --dash-shadow: 0 6px 20px rgba(30, 41, 59, .06);
}



.tool-content {
      background: var(--dash-bg);
      color: var(--dash-text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tool-content .ad-hero,
.tool-content .ad-slot {
      background: #f7f7f7;
      border: 1px dashed #b8c0cc;
      border-radius: 14px;
      color: var(--dash-muted);
      display: grid;
      place-items: center;
      text-align: center;
}

.tool-content .ad-hero {
      min-height: 210px;
}

.tool-content .ad-slot {
      min-height: 280px;
      padding: 1rem;
}

.tool-content .tool-shell {
      position: static;
}

.tool-content .calc-case,
.tool-content .content-card,
.tool-content .sidebar-card {
      background: var(--dash-surface);
      border: 1px solid var(--dash-border);
      border-radius: 14px;
      box-shadow: var(--dash-shadow);
}

.tool-content .calc-case {
      overflow: hidden;
}

.tool-content .calc-top {
      background: #fff;
      color: var(--dash-text);
      padding: 18px 18px 14px;
      border-bottom: 1px solid var(--dash-border);
}

.tool-content .calc-

.tool-content .calc-panel {
      background: #fff;
      border: 1px solid var(--dash-border);
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.tool-content .calc-panel+.calc-panel {
      margin-top: 12px;
}

.tool-content .calc-panel h2 {
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--dash-muted);
}

.tool-content .calc-panel label {
      font-weight: 650;
      font-size: .82rem;
      color: #344054;
}

.tool-content .field-unit,
.tool-content .field-unit-static {
      flex: 0 0 110px !important;
      width: 110px !important;
      min-width: 110px !important;
      max-width: 110px !important;
      color: #5f6b7a;
      background-color: #f7f9fc;
      font-size: .8rem;
}

.tool-content .field-unit-static {
      justify-content: center;
      white-space: nowrap;
}

.tool-content .form-control,
.tool-content .form-select {
      border-color: #d6dbe2;
      background-color: #fff;
      border-radius: 8px;
      min-height: 40px;
}

.tool-content .input-group>.form-control,
.tool-content .input-group>.form-select {
      border-radius: 8px;
}

.tool-content .input-group> :not(:last-child) {
      margin-right: 6px;
}

.tool-content .form-control:focus,
.tool-content .form-select:focus {
      border-color: var(--dash-primary);
      box-shadow: 0 0 0 .15rem rgba(79, 111, 136, .14);
}

.tool-content .btn-calc {
      background: var(--dash-primary);
      color: #fff;
      border: 1px solid var(--dash-primary);
      border-radius: 9px;
      box-shadow: 0 3px 8px rgba(79, 111, 136, .20);
      font-weight: 700;
}

.tool-content .btn-calc:hover {
      background: #435f75;
      color: #fff;
}

.tool-content .btn-key {
      background: #fff;
      color: #344054;
      border: 1px solid #cfd5dd;
      border-radius: 9px;
      box-shadow: none;
      font-weight: 650;
}

.tool-content .btn-key:hover {
      background: #f7f9fc;
      color: var(--dash-primary);
      border-color: #b9c3d0;
}

.tool-content .output-control[readonly],
.tool-content .output-control:disabled {
      background: #f8fafc;
      opacity: 1;
}

.tool-content .action-row {
      padding-top: 4px;
}

.tool-content .action-row .btn {
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border-radius: 9px;
      border-color: var(--dash-border);
      color: #5d6675;
      background: #fff;
}

.tool-content .action-row .btn:hover {
      background: var(--dash-primary-soft);
      color: var(--dash-primary);
      border-color: #c9d8e2;
}

.tool-content .like-wrap {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--dash-border);
      border-radius: 9px;
      overflow: hidden;
      background: #fff;
}

.tool-content .like-wrap .btn {
      border: 0;
      border-radius: 0;
}

.tool-content .like-count {
      min-width: 38px;
      text-align: center;
      font-size: .78rem;
      padding: 0 .45rem;
      color: var(--dash-muted);
      border-left: 1px solid var(--dash-border);
}

.tool-content .meaning-box,
.tool-content .scenario-item {
      border: 1px solid var(--dash-border);
      border-radius: 10px;
      background: var(--dash-surface-2);
      padding: 12px;
      font-size: .88rem;
}

.tool-content .scenario-item strong {
      color: var(--dash-primary);
}

.tool-content .content-card {
      padding: clamp(1.1rem, 2vw, 1.7rem);
}

.tool-content .content-card>section {
      border-top: 1px solid #edf0f3;
      padding-top: 1.25rem;
}

.tool-content .content-card>section:first-of-type {
      border-top: 0;
      padding-top: 0;
}

.tool-content .content-card h2.display-6 {
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      letter-spacing: -.035em;
}

.tool-content .content-card h3 {
      letter-spacing: -.015em;
}

.tool-content .sidebar-card {
      padding: 1rem;
}

.tool-content .sidebar-card h2 {
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #667085;
      font-size: .76rem !important;
}

.tool-content .purpose-box {
      border: 1px solid #d9e3ea;
      border-left: 4px solid var(--dash-primary);
      background: #f5f7f6;
      padding: 1rem;
      border-radius: 10px;
}

.tool-content .reviewer {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      border: 1px solid var(--dash-border);
      border-radius: 999px;
      padding: 6px 12px 6px 6px;
}

.tool-content .reviewer img {
      width: 42px;
      height: 42px;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px var(--dash-border);
}

.tool-content .reviewer-pop {
      position: absolute;
      z-index: 20;
      left: 0;
      top: calc(100% + 8px);
      width: 230px;
      background: #fff;
      color: var(--dash-text);
      border: 1px solid var(--dash-border);
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: .16s ease;
}

.tool-content .reviewer:hover .reviewer-pop,
.tool-content .reviewer:focus-within .reviewer-pop {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
}

.tool-content .reviewer-pop .text-white,
.tool-content .reviewer-pop a {
      color: var(--dash-primary) !important;
}

.tool-content .reviewer-pop .text-white-50 {
      color: var(--dash-muted) !important;
}

.tool-content .card {
      border-color: var(--dash-border) !important;
      border-radius: 11px;
      box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.tool-content .toc {
      background: #fbfcfe !important;
      border-color: var(--dash-border) !important;
}

.tool-content .toc a {
      text-decoration: none;
      color: var(--dash-primary);
}

.tool-content .toc a:hover {
      text-decoration: underline;
}

.tool-content .equation {
      font-family: Georgia, serif;
      font-size: 1.08rem;
      background: #f8fafc;
      border: 1px solid var(--dash-border);
      border-left: 4px solid var(--dash-primary);
      border-radius: 9px;
      padding: 12px 14px;
      overflow-x: auto;
}

.tool-content .table {
      --bs-table-bg: transparent;
}

.tool-content .table thead th {
      background: #f6f8fb;
      color: #475467;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .04em;
}

.tool-content .sidebar-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: .72rem .55rem;
      border-bottom: 1px solid #eef1f4;
      color: inherit;
      text-decoration: none;
      border-radius: 8px;
      font-size: .88rem;
}

.tool-content .sidebar-list a:last-child {
      border-bottom: 0;
}

.tool-content .sidebar-list a:hover {
      background: #f7f9fc;
      color: var(--dash-primary);
}

.tool-content .btn-outline-dark {
      border-color: #cfd5dd;
      color: #475467;
}

.tool-content .btn-outline-dark:hover {
      background: #f7f9fc;
      color: var(--dash-text);
      border-color: #b8c0cc;
}

/* Freelancer-inspired square utility theme */
.tool-content {
      --dash-bg: #f2f2f2;
      --dash-surface: #ffffff;
      --dash-surface-2: #f7f7f7;
      --dash-text: #1f2836;
      --dash-muted: #5c6673;
      --dash-border: #c9cdd2;
      --dash-primary: #139fe8;
      --dash-primary-soft: #eaf7fd;
      --dash-shadow: none;
}

.tool-content {
      background: #f2f2f2;
}

/* Square corners throughout controls, cards and utility elements */
.tool-content .btn,
.tool-content .form-control,
.tool-content .form-select,
.tool-content .input-group-text,
.tool-content .dropdown-menu,
.tool-content .modal-content,
.tool-content .card,
.tool-content .calc-case,
.tool-content .calc-panel,
.tool-content .content-card,
.tool-content .sidebar-card,
.tool-content .purpose-box,
.tool-content .reviewer,
.tool-content .reviewer-pop,
.tool-content .equation,
.tool-content .meaning-box,
.tool-content .scenario-item,
.tool-content .like-wrap,
.tool-content .sidebar-list a,
.tool-content .ad-slot,
.tool-content .toc {
      border-radius: 0 !important;
}

.tool-content .calc-case,
.tool-content .content-card,
.tool-content .sidebar-card {
      border-color: #d1d4d8;
      box-shadow: none;
}

.tool-content .calc-top {
      background: #fff;
      border-bottom: 1px solid #d1d4d8;
}

.tool-content .calc-

.tool-content .calc-panel {
      box-shadow: none;
      border-color: #d1d4d8;
}

.tool-content .form-control,
.tool-content .form-select {
      border-color: #bfc4c9;
      background-color: #fff;
}

.tool-content .input-group>.form-control,
.tool-content .input-group>.form-select {
      border-radius: 0 !important;
}

.tool-content .input-group> :not(:last-child) {
      margin-right: 0;
}

.tool-content .field-copy-btn {
      width: 40px;
      min-width: 40px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border: 1px solid #aeb4ba;
      background: #f1f3f5;
      color: #25313d;
      border-radius: 0 !important;
}

.tool-content .field-copy-btn:hover,
.tool-content .field-copy-btn:focus {
      background: #e2e6ea;
      color: #111820;
      border-color: #8f969d;
}

.tool-content .meaning-box {
      position: relative;
      padding-right: 58px;
}

.tool-content .meaning-box .copy-meaning-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      height: 34px;
      width: 34px;
      min-width: 34px;
}

.tool-content .meaning-box .copy-meaning-btn {
      background: #0D8DCC;
      border-color: #0D8DCC;
      color: #fff;
}

.tool-content .meaning-box .copy-meaning-btn:hover,
.tool-content .meaning-box .copy-meaning-btn:focus {
      background: #0B7DB5;
      border-color: #0B7DB5;
      color: #fff;
}

.tool-content .form-control:focus,
.tool-content .form-select:focus {
      border-color: #139fe8;
      box-shadow: 0 0 0 1px #139fe8;
}

.tool-content .btn-calc {
      background: #139fe8;
      border-color: #139fe8;
      box-shadow: none;
}

.tool-content .btn-calc:hover {
      background: #0d8dcc;
      border-color: #0d8dcc;
}

.tool-content .btn-key {
      border-color: #aeb4ba;
}

.tool-content .btn-key:hover {
      background: #f1f1f1;
      color: #172033;
      border-color: #8f969d;
}

.tool-content .action-row .btn {
      border-radius: 0 !important;
}

.tool-content .sidebar-list a:hover {
      background: #f2f2f2;
      color: #0b79b3;
}

.tool-content .toc {
      background: #f7f7f7 !important;
}

.tool-content .toc a,
.tool-content .reviewer-pop .text-white,
.tool-content .reviewer-pop a {
      color: #0b79b3 !important;
}

.tool-content .purpose-box {
      background: #f7fbfd;
      border-left-color: #139fe8;
}

.tool-content .equation {
      border-left-color: #139fe8;
}

.tool-content .scenario-item strong {
      color: #0b79b3;
}

.tool-content .like-line {
      font-size: .88rem;
      color: #5f6670;
}

.tool-content .like-line a {
      color: #0b79b3;
      text-decoration: none;
      font-weight: 600;
}

.tool-content .like-line a:hover {
      text-decoration: underline;
}

.tool-content .export-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
}

.tool-content .export-actions .btn {
      width: 38px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      padding: 0;
}

/* Section strips and reviewer profile */
.tool-content .section-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #111820;
      color: #fff;
      margin: -14px -14px 16px;
      padding: 9px 10px 9px 14px;
}

.tool-content .section-strip h2 {
      color: #fff;
      margin: 0;
      font-size: .8rem;
      letter-spacing: .06em;
      text-transform: uppercase;
}

.tool-content .strip-action {
      color: #fff;
      border: 1px solid #5a626b;
      background: transparent;
      padding: 4px 9px;
      font-size: .75rem;
      font-weight: 600;
}

.tool-content .strip-action:hover,
.tool-content .strip-action:focus {
      background: #202a35;
      color: #fff;
      border-color: #6c757d;
}

.tool-content .strip-menu-toggle::after {
      display: none !important;
}

.tool-content .strip-menu-toggle {
      width: 32px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      padding: 0;
}

.tool-content .section-strip .dropdown-menu {
      min-width: 150px;
      font-size: .82rem;
}

.tool-content .section-strip .dropdown-item i {
      width: 18px;
}

.tool-content .input-history-controls {
      display: inline-flex;
      align-items: center;
      gap: 4px;
}

.tool-content .history-nav-btn {
      width: 32px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      padding: 0;
}

.tool-content .history-nav-btn:disabled {
      opacity: .38;
      cursor: default;
}

.tool-content .view-actions {
      display: grid;
      gap: 8px;
      margin-top: 12px;
}

.tool-content .view-actions .btn {
      width: 100%;
      text-align: left;
      padding: .65rem .8rem;
      display: flex;
      align-items: center;
      gap: .65rem;
}

.tool-content .reviewer-card {
      border: 0;
      background: transparent;
      padding: 0;
}

.tool-content .reviewer-main {
      display: flex;
      align-items: flex-start;
      gap: 14px;
}

.tool-content .reviewer-main img {
      width: 64px;
      height: 64px;
      border-radius: 50% !important;
      object-fit: cover;
      flex: 0 0 auto;
      border: 1px solid #c9cdd2;
}

.tool-content .reviewer-bio {
      margin-top: 8px;
      color: #5c6673;
      font-size: .9rem;
}

.tool-content .reviewer-socials {
      display: flex;
      gap: 14px;
      margin-top: 10px;
}

.tool-content .reviewer-socials a {
      color: #0b79b3;
      font-size: 1.05rem;
}

.tool-content .example-title {
      color: #0b79b3;
      text-decoration: none;
}

.tool-content .example-title:hover {
      text-decoration: underline;
}

/* Side columns remain in normal document flow with no sticky/fixed rail behaviour. */
.tool-content .side-column {
      align-self: auto;
      position: static;
}

.tool-content .tool-shell,
.tool-content .right-rail {
      position: static !important;
      overflow: visible;
      max-height: none;
      width: auto !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      box-sizing: border-box;
}

.tool-content .tool-shell .calc-case {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
}

.tool-content .field-help {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      margin-left: 4px;
      border: 1px solid #8a94a3;
      border-radius: 50%;
      color: #697586;
      background: #fff;
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      cursor: help;
      vertical-align: 1px;
      user-select: none;
}

.tool-content .field-help:hover,
.tool-content .field-help:focus {
      color: #0D8DCC;
      border-color: #0D8DCC;
      outline: none;
}

@media (max-width: 1199.98px) {
      .tool-content .side-column {
            align-self: auto;
      }
}

@media (max-width: 767.98px) {
      .tool-content .ad-hero {
            min-height: 145px;
      }
}

/* v11 refinements */
.tool-content .category-more {
      margin-left: auto;
}

.tool-content .category-more .dropdown-menu {
      min-width: 150px;
      font-size: .86rem;
}

/* Give view actions more visual separation from the white calculator card. */
.tool-content .view-actions .btn {
      background: #eef1f3;
      border-color: #9aa3ab;
      color: #26313b;
      font-weight: 650;
}

.tool-content .view-actions .btn:hover,
.tool-content .view-actions .btn:focus {
      background: #e2e6e9;
      border-color: #7f8992;
      color: #111820;
}

/* Stripe controls use one muted grey tone for consistent contrast. */
.tool-content .section-strip .strip-action {
      background: #3f4a54 !important;
      border: 1px solid #68737d !important;
      color: #fff !important;
      box-shadow: none !important;
}

.tool-content .section-strip .strip-action:hover,
.tool-content .section-strip .strip-action:focus {
      background: #4b5660 !important;
      border-color: #7b858e !important;
      color: #fff !important;
}

.tool-content .purpose-box {
      padding-top: 1.45rem;
}

.tool-content .purpose-box h3 {
      margin-top: 0;
}

.tool-content .category-dropdown {
      position: relative;
}

.tool-content .category-dropdown .dropdown-menu {
      z-index: 3000;
}

/* Keep categories on one horizontal row on small screens. */
@media (max-width: 767.98px) {

      .tool-content .category-dropdown {
            flex: 0 0 auto;
      }

      .tool-content .category-dropdown .dropdown-menu {
            position: fixed !important;
            z-index: 4000 !important;
            transform: none !important;
      }
}

/* Ensure the first content section keeps breathing room inside its box. */
.tool-content .content-card>section.purpose-box {
      padding-top: 1.45rem !important;
}

/* Dark section headers for sidebar cards. */
.tool-content .sidebar-card>h2:first-child {
      background: #111820;
      color: #fff !important;
      margin: -1rem -1rem .6rem;
      padding: .7rem 1rem;
      font-size: .8rem !important;
      line-height: 1.2;
}

@media (max-width: 575.98px) {
}

/* Calculator engagement controls */
.tool-content .tool-engagement {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: .55rem 0 1rem;
}

.tool-content .tool-engagement .btn {
      width: 36px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      padding: 0;
}

.tool-content .engagement-stats {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-left: 2px;
      font-size: .84rem;
      color: #5f6670;
}

.tool-content .engagement-stats a {
      color: #0b79b3;
      text-decoration: none;
}

.tool-content .engagement-stats a:hover {
      text-decoration: underline;
}

/* Latest calculator colour and control refinements */
.tool-content .section-strip {
      background: #2B3340 !important;
}

.tool-content .sidebar-card>h2:first-child {
      background: #2B3340 !important;
}

.tool-content .section-strip .history-nav-btn:not(:disabled) {
      background: #FA5F9B !important;
      border-color: #FA5F9B !important;
      color: #fff !important;
      opacity: 1;
}

.tool-content .section-strip .history-nav-btn:not(:disabled):hover,
.tool-content .section-strip .history-nav-btn:not(:disabled):focus {
      background: #e65088 !important;
      border-color: #e65088 !important;
}

.tool-content .section-strip .history-nav-btn:disabled {
      background: #59616c !important;
      border-color: #6d7580 !important;
      color: #d9dde2 !important;
      opacity: .6 !important;
}

.tool-content .btn-calc {
      background: #5DC26A !important;
      border-color: #5DC26A !important;
      color: #fff !important;
}

.tool-content .btn-calc:hover,
.tool-content .btn-calc:focus {
      background: #4caf5a !important;
      border-color: #4caf5a !important;
      color: #fff !important;
}

.tool-content .tool-input-image {
      border: 1px solid var(--dash-border);
      overflow: hidden;
      background: #f3f5f8;
}

.tool-content .tool-input-image img {
      display: block;
      width: 100%;
      height: 135px;
      object-fit: cover;
}

/* Blue + magenta branded theme */
.tool-content {
      --brand-blue: #3657E8;
      --brand-blue-dark: #263B9C;
      --brand-magenta: #E83E8C;
      --brand-magenta-dark: #C92F75;
      --brand-navy: #202A44;
      --brand-soft-blue: #EEF2FF;
      --brand-soft-magenta: #FFF0F7;
      --dash-primary: var(--brand-blue);
      --dash-primary-soft: var(--brand-soft-blue);
}

.tool-content {
      background: #f4f5f9;
}

.tool-content .section-strip,
.tool-content .sidebar-card>h2:first-child {
      background: var(--brand-blue-dark) !important;
      border-color: var(--brand-blue-dark) !important;
}

.tool-content .section-strip .history-nav-btn:not(:disabled) {
      background: var(--brand-magenta) !important;
      border-color: var(--brand-magenta) !important;
}

.tool-content .section-strip .history-nav-btn:not(:disabled):hover,
.tool-content .section-strip .history-nav-btn:not(:disabled):focus {
      background: var(--brand-magenta-dark) !important;
      border-color: var(--brand-magenta-dark) !important;
}

.tool-content .btn-calc {
      background: var(--brand-magenta) !important;
      border-color: var(--brand-magenta) !important;
}

.tool-content .btn-calc:hover,
.tool-content .btn-calc:focus {
      background: var(--brand-magenta-dark) !important;
      border-color: var(--brand-magenta-dark) !important;
}

.tool-content .form-control:focus,
.tool-content .form-select:focus {
      border-color: var(--brand-blue) !important;
      box-shadow: 0 0 0 2px rgba(54, 87, 232, .14) !important;
}

.tool-content .calc-case,
.tool-content .content-card,
.tool-content .sidebar-card {
      border-color: #d8dbea;
      box-shadow: 0 2px 0 rgba(38, 59, 156, .05);
}

.tool-content .calc-top {
      border-top: 4px solid var(--brand-magenta);
}

.tool-content .content-card {
      border-top: 4px solid var(--brand-blue);
}

.tool-content .sidebar-card {
      border-top: 3px solid var(--brand-magenta);
}

.tool-content .purpose-box {
      background: #f2f8f5 !important;
      border-color: #dce3ff !important;
      border-left: 4px solid var(--brand-blue) !important;
}

.tool-content .equation {
      border-left-color: var(--brand-magenta) !important;
}

.tool-content .toc {
      background: #f7f8ff !important;
}

.tool-content a,
.tool-content .toc a,
.tool-content .engagement-stats a,
.tool-content .like-line a,
.tool-content .reviewer-pop .text-white,
.tool-content .reviewer-pop a {
      color: var(--brand-blue);
}

.tool-content a:hover,
.tool-content .toc a:hover,
.tool-content .engagement-stats a:hover,
.tool-content .like-line a:hover {
      color: var(--brand-magenta-dark);
}

.tool-content .field-copy-btn,
.tool-content .meaning-box .copy-meaning-btn {
      background: var(--brand-blue) !important;
      border-color: var(--brand-blue) !important;
      color: #fff !important;
}

.tool-content .field-copy-btn:hover,
.tool-content .field-copy-btn:focus,
.tool-content .meaning-box .copy-meaning-btn:hover,
.tool-content .meaning-box .copy-meaning-btn:focus {
      background: var(--brand-blue-dark) !important;
      border-color: var(--brand-blue-dark) !important;
      color: #fff !important;
}

.tool-content .tool-engagement .btn,
.tool-content .view-action-list .btn,
.tool-content .export-actions .btn {
      border-color: #bfc8f8;
      background: #f7f8ff;
      color: var(--brand-blue-dark);
}

.tool-content .tool-engagement .btn:hover,
.tool-content .view-action-list .btn:hover,
.tool-content .export-actions .btn:hover {
      background: var(--brand-soft-magenta);
      border-color: #f0a9ca;
      color: var(--brand-magenta-dark);
}

.tool-content .sidebar-list a:hover {
      background: var(--brand-soft-blue);
      color: var(--brand-blue-dark);
}

@media (max-width: 767.98px) {
}

/* Keep the calculator fully contained within the left Bootstrap column. */
.tool-content .side-column,
.tool-content .tool-shell,
.tool-content .calc-case,
.tool-content .calc-body,
.tool-content #calculatorForm,
.tool-content .calc-panel,
.tool-content .input-group {
  min-width: 0;
  max-width: 100%;
}

.tool-content .side-column {
  overflow: visible;
}

.tool-content .tool-shell,
.tool-content .calc-case {
  width: 100% !important;
}

.tool-content .calc-body {
  width: 100%;
  padding: 14px;
  overflow: hidden;
}

.tool-content #calculatorForm,
.tool-content .calc-panel {
  width: 100%;
}

.tool-content .input-group > .form-control,
.tool-content .input-group > .form-select {
  min-width: 0;
}

@media (max-width: 575.98px) {
  .tool-content .field-unit,
  .tool-content .field-unit-static {
    flex-basis: 86px !important;
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }
}

/* Keep clear separation between the input actions and the output panel. */
.tool-content #calculatorForm > .calc-panel + .calc-panel {
  margin-top: 30px !important;
}

/* Match the input/output ellipsis menu buttons to the History controls. */
.tool-content .section-strip .strip-menu-toggle {
      background: var(--brand-magenta) !important;
      border-color: var(--brand-magenta) !important;
      color: #fff !important;
}

.tool-content .section-strip .strip-menu-toggle:hover,
.tool-content .section-strip .strip-menu-toggle:focus,
.tool-content .section-strip .strip-menu-toggle[aria-expanded="true"] {
      background: var(--brand-magenta-dark) !important;
      border-color: var(--brand-magenta-dark) !important;
      color: #fff !important;
}



/* Calculator */
.tool-content {
  --dash-bg:#f7f7f7;
  --dash-surface:#fff;
  --dash-surface-2:#f5f5f5;
  --dash-text:#222325;
  --dash-muted:#74767e;
  --dash-border:#e4e5e7;
  --dash-primary:#1dbf73;
  --dash-primary-soft:#eaf8f1;
  background:#f7f7f7;
}
.tool-content .container-fluid { max-width:1700px; }
.tool-content .calc-case,
.tool-content .content-card,
.tool-content .sidebar-card {
  border:1px solid var(--dash-border);
  border-radius:8px;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
}
.tool-content .calc-top { background:#fff; border-top:4px solid var(--green); }
.tool-content .section-strip,
.tool-content .sidebar-card>h2:first-child {
  background:#404145!important;
  border:0!important;
  color:#fff;
}
.tool-content .section-strip { min-height:50px; padding:.7rem 1rem; }
.tool-content .section-strip .history-nav-btn:not(:disabled),
.tool-content .section-strip .strip-menu-toggle {
  background:#55565a!important;
  border:1px solid #68696d!important;
  color:#fff!important;
  border-radius:4px!important;
}
.tool-content .section-strip .history-nav-btn:not(:disabled):hover,
.tool-content .section-strip .strip-menu-toggle:hover,
.tool-content .section-strip .strip-menu-toggle:focus,
.tool-content .section-strip .strip-menu-toggle[aria-expanded="true"] { background:#62646a!important; }
.tool-content .calc-body { padding:18px; }
.tool-content .calc-panel { border-radius:6px; box-shadow:none; }
.tool-content .form-control,
.tool-content .form-select {
  min-height:44px;
  border-color:#c5c6c9;
  border-radius:4px;
  background:#fff;
}
.tool-content .input-group > .form-control:first-child { border-radius:4px 0 0 4px!important; }
.tool-content .input-group > .form-select:last-child { border-radius:0 4px 4px 0!important; }
.tool-content .form-control:focus,
.tool-content .form-select:focus { background:#fff; border-color:var(--green)!important; box-shadow:0 0 0 2px rgba(29,191,115,.13)!important; }
.tool-content .btn-calc {
  min-height:48px;
  border:1px solid var(--green)!important;
  border-radius:4px!important;
  background:var(--green)!important;
  box-shadow:none;
  font-weight:700;
}
.tool-content .btn-calc:hover,.tool-content .btn-calc:focus { background:var(--green-dark)!important; border-color:var(--green-dark)!important; }
.tool-content .content-card { padding:clamp(1.3rem,2vw,2rem); border-top:4px solid var(--green); }
.tool-content .content-card h1 { letter-spacing:-.04em; font-weight:800!important; }
.tool-content .purpose-box { border:1px solid #cfeadd!important; border-left:4px solid var(--green)!important; border-radius:6px!important; background:#eef9f3!important; box-shadow:none; }
.tool-content .toc { border:1px solid var(--border)!important; border-radius:6px!important; background:#f7f7f7!important; }
.tool-content .card { border:1px solid var(--border)!important; border-radius:6px; box-shadow:none; }
.tool-content .accordion-item { overflow:hidden; border:1px solid var(--border); border-radius:6px!important; margin-bottom:8px; }
.tool-content .accordion-button { font-weight:650; background:#fff; }
.tool-content .accordion-button:not(.collapsed) { color:var(--green-dark); background:#eef9f3; box-shadow:none; }
.tool-content .tool-engagement .btn,
.tool-content .view-action-list .btn,
.tool-content .export-actions .btn {
  border:1px solid #c5c6c9;
  border-radius:4px;
  background:#fff;
  color:#404145;
}
.tool-content .tool-engagement .btn:hover,
.tool-content .view-action-list .btn:hover,
.tool-content .export-actions .btn:hover { background:#f5f5f5; border-color:#95979d; color:var(--charcoal); }
.tool-content .sidebar-card { border-top:3px solid var(--green); }
.tool-content .sidebar-card>h2:first-child { margin:0!important; padding:1rem 1.1rem!important; }
.tool-content .sidebar-list a { border-radius:3px; margin:2px 6px; }
.tool-content .sidebar-list a:hover { background:#f5f5f5; color:var(--green-dark); }
.tool-content .ad-hero,.tool-content .ad-slot { border:1px dashed #c5c6c9; border-radius:6px; background:#fff; color:#95979d; }
.tool-content .reviewer-card { border:1px solid var(--border); border-radius:6px; background:#fff; }
.tool-content .reviewer-main img { border-radius:50%; box-shadow:none; }
.tool-content .equation { border-left:4px solid var(--green)!important; border-radius:4px; background:#eef9f3; }


/* Calculator refinement: remove dark bands and blend with the flat marketplace theme */
.tool-content .section-strip,
.tool-content .sidebar-card > h2:first-child {
  background:#f5f5f5!important;
  color:#222325!important;
  border-bottom:1px solid #e4e5e7!important;
}
.tool-content .section-strip {
  box-shadow:inset 4px 0 0 #1dbf73;
}
.tool-content .section-strip .h6,
.tool-content .section-strip h2,
.tool-content .sidebar-card > h2:first-child {
  color:#222325!important;
}
.tool-content .section-strip .strip-action,
.tool-content .section-strip .history-nav-btn:not(:disabled),
.tool-content .section-strip .strip-menu-toggle {
  background:#fff!important;
  border:1px solid #c5c6c9!important;
  color:#404145!important;
  box-shadow:none!important;
}
.tool-content .section-strip .history-nav-btn:not(:disabled):hover,
.tool-content .section-strip .strip-menu-toggle:hover,
.tool-content .section-strip .strip-menu-toggle:focus,
.tool-content .section-strip .strip-menu-toggle[aria-expanded="true"] {
  background:#eaf8f1!important;
  border-color:#1dbf73!important;
  color:#126f43!important;
}
.tool-content .sidebar-card > h2:first-child {
  padding-bottom:.85rem;
  border-left:4px solid #1dbf73!important;
}

/* Calculator copy buttons: flat Fiverr-inspired palette */
.tool-content .field-copy-btn,
.tool-content .copy-output-value,
.tool-content .meaning-box .copy-meaning-btn {
  background:#fff!important;
  border:1px solid #1dbf73!important;
  color:#126f43!important;
  box-shadow:none!important;
}
.tool-content .field-copy-btn:hover,
.tool-content .field-copy-btn:focus,
.tool-content .copy-output-value:hover,
.tool-content .copy-output-value:focus,
.tool-content .meaning-box .copy-meaning-btn:hover,
.tool-content .meaning-box .copy-meaning-btn:focus {
  background:#1dbf73!important;
  border-color:#1dbf73!important;
  color:#fff!important;
}
.tool-content #copyInputBtn,
.tool-content #copyOutputBtn,
.tool-content #copyCombinedBtn {
  color:#404145!important;
  background:#fff!important;
}
.tool-content #copyInputBtn:hover,
.tool-content #copyOutputBtn:hover,
.tool-content #copyCombinedBtn:hover,
.tool-content #copyInputBtn:focus,
.tool-content #copyOutputBtn:focus,
.tool-content #copyCombinedBtn:focus {
  color:#126f43!important;
  background:#eaf8f1!important;
}



/* Tool page layout: no left calculator column.
   Main content occupies the former left + middle columns; right rail stays unchanged. */
.tool-content .tool-main-column {
  min-width: 0;
}

@media (min-width: 1200px) {
  .tool-content .tool-main-column {
    flex: 0 0 auto;
    width: 75%;
  }
}