.unit-tool-page { --unit-gold: #f5b942; --unit-teal: #2dd4bf; --accent: var(--unit-gold) !important; }
    .unit-tool-page .premium-tool-hero { border-color: rgba(45,212,191,.22); background: linear-gradient(145deg,rgba(15,23,42,.98),rgba(20,35,52,.98)); }
    .unit-tool-page .premium-eyebrow, .unit-tool-page .premium-section-kicker { color: var(--unit-gold); }
    .unit-tool-page .premium-hero-pills span { border-color: rgba(45,212,191,.24); background: rgba(45,212,191,.07); color: #99f6e4; }
    .unit-tool-page .premium-hero-stat { border-color: rgba(245,185,66,.18); }
    /* ── Hero ── */
    .hero--inner        { padding: 1.75rem 2rem; }
    .hero--inner h1     { font-size: 1.9rem; }

    /* ── Breadcrumb ── */
    .breadcrumb {
      font-size: 0.8rem;
      color: var(--muted);
      margin-bottom: 0.6rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex-wrap: wrap;
    }
    .breadcrumb a        { color: var(--muted); transition: color 0.15s; }
    .breadcrumb a:hover  { color: var(--accent); }
    .breadcrumb .sep     { opacity: 0.4; }

    /* ── Tool widget ── */
    .unit-tool-page .tool-widget {
      background: linear-gradient(145deg, rgba(15,23,42,.98), rgba(20,35,52,.98));
      border: 1px solid rgba(45,212,191,.24);
      border-radius: 1.35rem;
      padding: 1.75rem;
      box-shadow: 0 22px 70px rgba(0,0,0,.22);
      margin-top: 1.5rem;
    }

    .tool-widget h2 {
      margin: 0 0 1.25rem;
      font-size: 1.05rem;
    }

    /* ── Two-col layout: inputs | results ── */
    .calc-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: start;
    }

    /* ── Inputs ── */
    .input-group        { margin-bottom: 1.1rem; }
    .input-group:last-child { margin-bottom: 0; }

    .input-group label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.4rem;
    }

    .input-group label .live-val {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--accent);
    }

    .input-group input[type="text"],
    .input-group select {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 0.5rem;
      color: var(--text);
      font-family: inherit;
      font-size: 0.95rem;
      padding: 0.65rem 0.85rem;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .input-group input:focus,
    .input-group select:focus {
      border-color: var(--unit-gold);
      box-shadow: 0 0 0 3px rgba(245,185,66,.15);
    }

    .input-hint { font-size: 0.775rem; color: var(--muted); margin-top: 0.3rem; }

    /* ── From / To pair with swap ── */
    .pair-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 0.6rem;
      align-items: end;
    }
    .swap-btn {
      width: 2.4rem;
      height: 2.4rem;
      flex-shrink: 0;
      background: linear-gradient(145deg,rgba(45,212,191,.18),rgba(245,185,66,.08));
      border: 1px solid rgba(45,212,191,.38);
      border-radius: 999px;
      color: var(--accent);
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, transform 0.15s;
      margin-bottom: 0.15rem;
    }
    .swap-btn:hover  { background: rgba(245,185,66,.18); border-color: rgba(245,185,66,.55); transform: rotate(180deg); }
    .swap-btn:active { transform: rotate(180deg) translateY(1px); }

    /* ── Results panel ── */
    .results-col {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .result-card {
      background: rgba(2,6,23,.34);
      border: 1px solid rgba(45,212,191,.2);
      border-radius: var(--radius);
      padding: 1rem 1.15rem;
    }

    .result-card.primary {
      background: linear-gradient(145deg,rgba(245,185,66,.13),rgba(45,212,191,.055));
      border-color: rgba(245,185,66,.42);
    }

    .result-card .result-label {
      font-size: 0.75rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.3rem;
    }

    .result-card .result-value {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--accent);
      line-height: 1.1;
      word-break: break-word;
    }

    .result-card.primary .result-value { font-size: 2.2rem; }

    .result-card .result-sub {
      font-size: 0.775rem;
      color: var(--muted);
      margin-top: 0.25rem;
    }

    /* ── Error ── */
    .calc-error {
      display: none;
      margin-top: 1rem;
      padding: 0.75rem 1rem;
      background: rgba(248,113,113,0.1);
      border: 1px solid rgba(248,113,113,0.3);
      border-radius: 0.5rem;
      color: #fca5a5;
      font-size: 0.875rem;
    }

    /* ── Copy link row ── */
    .share-line {
      display: none;
      margin-top: 1.25rem;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .copy-link-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: rgba(34,197,94,0.08);
      border: 1px solid rgba(34,197,94,0.3);
      border-radius: 999px;
      color: var(--accent);
      font-family: inherit;
      font-size: 0.85rem;
      font-weight: 600;
      padding: 0.45rem 1rem;
      cursor: pointer;
      transition: background 0.15s;
    }
    .copy-link-btn:hover { background: rgba(34,197,94,0.18); }
    .copy-confirm { font-size: 0.8rem; color: var(--accent); display: none; }
    .action-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
    .action-btn { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; color: var(--text); cursor: pointer; font-family: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.45rem 0.85rem; }
    .action-btn:hover { border-color: rgba(34,197,94,0.45); }
    .equivalents-list { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
    .equivalents-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
    .equivalents-list span:first-child { color: var(--muted); }
    .unit-search { margin: .6rem 0 .4rem; border-color: rgba(148,163,184,.24) !important; background: rgba(2,6,23,.5) !important; font-size: .82rem !important; padding: .48rem .65rem !important; }
    .category-label { display: block; margin-bottom: .4rem; color: var(--text); font-size: .875rem; font-weight: 600; }
    .category-quick { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin-top: .6rem; }
    .category-chip { min-width: 0; border: 1px solid rgba(148,163,184,.2); border-radius: .65rem; background: rgba(15,23,42,.7); color: #cbd5e1; cursor: pointer; font-family: inherit; font-size: .7rem; font-weight: 700; padding: .48rem .55rem; text-align: left; }
    .category-chip:hover, .category-chip:focus-visible { border-color: #f5b942 !important; color: #fde68a; box-shadow: 0 0 0 2px rgba(245,185,66,.16); outline: none; }
    .category-chip[aria-pressed="true"] { border-color: rgba(245,185,66,.5); background: rgba(245,185,66,.12); color: #fde68a; }
    .pair-tools { display: flex; gap: .55rem; align-items: center; margin-top: .75rem; }
    .favorite-btn[aria-pressed="true"] { border-color: rgba(245,185,66,.6); background: rgba(245,185,66,.14); color: #fde68a; }
    .saved-pairs { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgba(148,163,184,.14); }
    .saved-pairs-label { margin: 0 0 .5rem; color: #94a3b8; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .pair-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
    .pair-chip { border: 1px solid rgba(45,212,191,.25); border-radius: 999px; background: rgba(45,212,191,.07); color: #99f6e4; cursor: pointer; font-family: inherit; font-size: .7rem; font-weight: 700; padding: .35rem .58rem; }
    .pair-chip.is-favorite::before { content: "★ "; color: var(--unit-gold); }
    .unit-tool-page .copy-link-btn { border-color: rgba(245,185,66,.36); background: rgba(245,185,66,.09); color: #fde68a; }
    .unit-tool-page .copy-link-btn:hover { background: rgba(245,185,66,.17); }
    .unit-tool-page .result-card .result-value { color: var(--unit-gold); }
    .unit-tool-page .calc-layout { border-color: rgba(45,212,191,.2); background: rgba(2,6,23,.34); }
    .unit-tool-page .inputs-col { background: linear-gradient(145deg,rgba(15,23,42,.7),rgba(2,6,23,.48)); }
    .unit-tool-page .results-col { border-color: rgba(45,212,191,.18); background: linear-gradient(145deg,rgba(45,212,191,.085),rgba(15,23,42,.86)); }
    .unit-tool-page .input-group input[type="text"],
    .unit-tool-page .input-group select,
    .unit-tool-page .swap-btn,
    .unit-tool-page .result-card { border-color: rgba(148,163,184,.25); background-color: rgba(2,6,23,.52); }
    .unit-tool-page .result-card.primary { border-color: rgba(245,185,66,.42); background: linear-gradient(145deg,rgba(245,185,66,.14),rgba(45,212,191,.045)); }
    .unit-tool-page .result-card.primary .result-value { color: var(--unit-gold); }
    .unit-tool-page .swap-btn { border-color: rgba(45,212,191,.4); box-shadow: 0 8px 22px rgba(45,212,191,.1); }
    .result-options, .history-panel, .conversion-table-panel { border: 1px solid rgba(148,163,184,.2); border-radius: .75rem; background: rgba(2,6,23,.34); overflow: hidden; }
    .result-options > summary, .history-panel > summary, .conversion-table-panel > summary { display: flex; justify-content: space-between; padding: .75rem .9rem; color: #cbd5e1; cursor: pointer; font-size: .78rem; font-weight: 800; }
    .result-options[open] > summary, .history-panel[open] > summary, .conversion-table-panel[open] > summary { border-bottom: 1px solid rgba(148,163,184,.14); color: #fde68a; }
    .result-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; padding: .85rem .85rem .5rem; }
    .result-options label { display: grid; gap: .3rem; color: #94a3b8; font-size: .7rem; font-weight: 700; }
    .result-options select { width: 100%; border: 1px solid rgba(148,163,184,.25); border-radius: .5rem; background: #0f172a; color: #f8fafc; padding: .48rem; }
    .result-options > .action-btn { margin: .25rem .85rem .85rem; }
    .history-count { min-width: 1.35rem; border-radius: 999px; background: rgba(45,212,191,.12); color: #99f6e4; text-align: center; }
    .history-toolbar { display: flex; justify-content: flex-end; padding: .65rem .75rem 0; }
    .history-list { display: grid; gap: .5rem; max-height: 18rem; margin: 0; padding: .65rem .75rem .75rem; overflow: auto; list-style: none; }
    .history-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .35rem .55rem; padding: .65rem; border: 1px solid rgba(148,163,184,.15); border-radius: .6rem; background: rgba(15,23,42,.65); }
    .history-entry button { border: 0; background: transparent; color: inherit; cursor: pointer; }
    .history-equation { min-width: 0; color: #e2e8f0; text-align: left; font-size: .74rem; overflow-wrap: anywhere; }
    .history-actions { display: flex; align-items: center; }
    .history-actions button { padding: .2rem .35rem; color: #94a3b8; }
    .history-actions button:hover, .history-actions button[aria-pressed="true"] { color: var(--unit-gold); }
    .history-empty { padding: .75rem; color: #94a3b8; font-size: .75rem; text-align: center; }
    .history-confirm { max-width: 26rem; border: 1px solid rgba(245,185,66,.35); border-radius: 1rem; background: #0f172a; color: #f8fafc; box-shadow: 0 25px 70px rgba(0,0,0,.5); }
    .history-confirm::backdrop { background: rgba(2,6,23,.75); backdrop-filter: blur(4px); }
    .history-confirm h2 { margin: 0 0 .5rem; font-family: Georgia,"Times New Roman",serif; }
    .history-confirm p { color: #94a3b8; line-height: 1.55; }
    .history-confirm-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1rem; }
    .history-danger { border-color: rgba(251,113,133,.4); color: #fda4af; }
    .conversion-table-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; padding: .85rem .85rem .45rem; }
    .conversion-table-controls label { display: grid; gap: .3rem; color: #94a3b8; font-size: .7rem; font-weight: 700; }
    .conversion-table-controls input { min-width: 0; border: 1px solid rgba(148,163,184,.25); border-radius: .5rem; background: #0f172a; color: #f8fafc; padding: .5rem; }
    .conversion-table-hint, .conversion-table-status { margin: 0; padding: 0 .85rem; color: #94a3b8; font-size: .72rem; line-height: 1.45; }
    .conversion-table-status { padding-bottom: .8rem; color: #99f6e4; }
    .conversion-table-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding: .65rem .85rem; }
    .conversion-table-actions button:disabled { cursor: not-allowed; opacity: .45; }
    .conversion-table-scroll { max-height: 19rem; margin: 0 .85rem .75rem; border: 1px solid rgba(148,163,184,.16); border-radius: .55rem; overflow: auto; }
    .conversion-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
    .conversion-table th { position: sticky; top: 0; background: #111c2d; color: #fde68a; text-align: left; }
    .conversion-table th, .conversion-table td { padding: .5rem .65rem; border-bottom: 1px solid rgba(148,163,184,.12); font-size: .72rem; }
    .conversion-table td { color: #dbeafe; }
    .conversion-table tr:last-child td { border-bottom: 0; }

    /* ── SEO / content ── */
    .seo-section          { max-width: 740px; margin-top: 2rem; }
    .seo-section h2       { font-size: 1.1rem; margin: 0 0 0.5rem; }
    .seo-section p        { color: var(--muted); line-height: 1.75; margin: 0 0 0.75rem; }
    .seo-section p:last-child { margin-bottom: 0; }
    .seo-section ul       { color: var(--muted); line-height: 1.75; margin: 0 0 0.75rem; padding-left: 1.25rem; }

    .formula-block {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0.85rem 1.1rem;
      font-family: monospace;
      font-size: 0.9rem;
      color: var(--accent);
      margin: 0.75rem 0;
      line-height: 1.6;
    }

    /* ── FAQ ── */
    .faq-section { max-width: 740px; margin-top: 2rem; }
    .faq-section details { border: 1px solid var(--border); border-radius: 0.75rem; background: rgba(255,255,255,0.02); }
    .faq-section summary { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 1rem 3rem 1rem 1rem; cursor: pointer; list-style: none; }
    .faq-section summary::-webkit-details-marker { display: none; }
    .faq-section summary::after { position: absolute; top: 50%; right: 1rem; color: var(--accent); font-size: 1.2rem; content: "+"; transform: translateY(-50%); }
    .faq-section details[open] summary::after { content: "−"; }
    .faq-section summary h2 { margin: 0; color: var(--text); font-size: 0.98rem; }
    .faq-info-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(74,222,128,0.12); color: var(--accent); font-family: Georgia, serif; font-weight: 700; }
    .faq-content { padding: 0 1.25rem 1.25rem 3.8rem; border-top: 1px solid rgba(148,163,184,0.12); }
    .faq-list             { list-style: none; padding: 0; margin: 0; max-width: 740px; }
    .faq-item             { border-bottom: 1px solid var(--border); padding: 1rem 0; }
    .faq-item:last-child  { border-bottom: none; }
    .faq-item h3          { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--text); }
    .faq-item p           { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.65; }

    /* ── Related tools ── */
    .related-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0.85rem;
      margin-top: 1rem;
    }
    .related-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0.9rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      transition: border-color 0.15s, transform 0.15s;
    }
    .related-card:hover  { border-color: rgba(34,197,94,0.4); transform: translateY(-2px); }
    .related-card strong { font-size: 0.9rem; }
    .related-card span   { color: var(--muted); font-size: 0.8rem; }

    /* ── Responsive ── */
    @media (max-width: 800px) {
      .calc-layout { grid-template-columns: 1fr; }
      .swap-btn { transform: rotate(90deg); }
      .swap-btn:hover { transform: rotate(270deg); }
    }
    @media (max-width: 600px) {
      .hero--inner  { padding: 1.25rem; }
      .hero--inner h1 { font-size: 1.5rem; }
      .tool-widget  { padding: 1.25rem; }
      .result-card.primary .result-value { font-size: 1.75rem; }
      .pair-row { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
      .pair-row > div { min-width: 0; }
      .swap-btn { justify-self: center; margin: 0; }
      .input-group input[type="text"], .input-group select { min-height: 2.75rem; }
      .unit-search { margin-top: .45rem; }
      .equivalents-list li { align-items: start; }
      .equivalents-list strong { text-align: right; }
      .result-options-grid { grid-template-columns: 1fr; }
      .conversion-table-controls { grid-template-columns: 1fr; }
      .category-quick { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }

/* Focus Mode keeps the complete conversion workspace usable without page chrome. */
.unit-tool-page .tool-widget[data-focus-mode] .unit-app-title { padding-right: 2.75rem; }
.unit-tool-page .tool-widget.is-focus-mode { box-sizing: border-box; margin: 0; border-radius: 0; overflow: auto; }
.unit-tool-page .tool-widget.is-focus-mode .calc-layout { min-height: 0; }
.unit-tool-page .tool-widget.is-focus-mode .results-col { min-height: 100%; }
.unit-tool-page .tool-widget.is-focus-mode > .focus-mode-toggle { color: var(--unit-gold); border-color: rgba(245,185,66,.4); background: rgba(245,185,66,.1); }