:root {
        --bg: #090e1a;
        --bg-2: #0c1220;
        --bg-3: #0e1525;
        --card: #111a2b;
        --card-strong: #151f33;
        --card-soft: #182338;
        --stroke: #26334a;
        --stroke-strong: #35445f;
        --text: rgba(255, 255, 255, 0.95);
        --muted: rgba(255, 255, 255, 0.65);
        --muted-2: rgba(255, 255, 255, 0.45);
        --brand: #6db6ff;
        --brand-strong: #2b86ff;
        --brand-soft: rgba(56, 145, 255, 0.14);
        --teal: #35e0c1;
        --teal-soft: rgba(53, 224, 193, 0.14);
        --shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
        --shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.16);
        --radius: 18px;
        --radius-2: 14px;
        --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      }

      * { box-sizing: border-box; }

      [hidden] { display: none !important; }

      html, body { margin: 0; min-height: 100%; }

      body {
        min-height: 100vh;
        font-family: var(--sans);
        color: var(--text);
        background:
          radial-gradient(800px 420px at 50% -15%, rgba(43, 134, 255, 0.10), transparent 62%),
          linear-gradient(180deg, var(--bg), var(--bg-2) 55%, var(--bg-3));
        padding: 12px;
        display: grid;
        place-items: start center;
        overflow-x: hidden;
      }

      body::before,
      body::after { display: none; }

      .app {
        width: min(1080px, 100%);
        overflow: visible;
        position: relative;
      }

      .app::before { display: none; }

      .showdesktop {
        display: block;
      }

      .showmobile {
        display: none;
      }

      .header, .controls, .tableWrap, .footerNote { position: relative; }
      .header { z-index: 100; }
      .controls { z-index: 10; }
      .tableWrap, .footerNote { z-index: 1; }

      .header { padding: 8px 2px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

      .titleRow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
      .titleBlock { display: grid; gap: 6px; min-width: 0; }

      h1 { margin: 0; font-size: clamp(24px, 3vw, 30px); font-weight: 860; letter-spacing: -0.03em; }

      .subTitle { font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 640px; }

      .headerTools {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
        margin-left: auto;
      }

      .dropdown {
        position: relative;
      }

      .toolBtn {
        appearance: none;
        border: 1px solid var(--stroke);
        background: var(--card-soft);
        color: var(--text);
        border-radius: 999px;
        padding: 10px 12px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 820;
        cursor: pointer;
        box-shadow: none;
        transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease;
      }

      .toolBtn:hover {
        background: #1d2940;
        border-color: var(--stroke-strong);
      }

      .toolBtn[aria-expanded="true"] {
        border-color: rgba(94, 172, 255, 0.38);
        background: linear-gradient(180deg, rgba(43, 134, 255, 0.36), rgba(36, 114, 245, 0.18));
      }

      .toolIcon {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: inline-grid;
        place-items: center;
        background: var(--brand-soft);
        color: var(--brand);
        font-size: 13px;
        line-height: 1;
      }

      .toolChevron {
        color: var(--muted-2);
        font-size: 11px;
      }

      .dropdownMenu {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        width: max-content;
        min-width: min(280px, calc(100vw - 16px));
        max-width: min(320px, calc(100vw - 16px));
        max-height: min(520px, calc(100vh - 120px));
        overflow: auto;
        padding: 8px;
        border-radius: 16px;
        border: 1px solid var(--stroke-strong);
        background: #111a2b;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
        z-index: 1000;
        isolation: isolate;
        display: none;
      }

      .dropdown.open .dropdownMenu {
        display: grid;
        gap: 8px;
      }

      .dropdownMenu::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 17px;
        width: 12px;
        height: 12px;
        transform: rotate(45deg);
        background: #111a2b;
        border-left: 1px solid var(--stroke-strong);
        border-top: 1px solid var(--stroke-strong);
      }

      .dropdownHeader {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }

      .dropdownTitle {
        font-size: 13px;
        font-weight: 860;
        color: var(--text);
      }

      .controls { padding: 12px 0 14px; display: grid; gap: 14px; }

      .panel {
        border-radius: 22px;
        border: 1px solid var(--stroke);
        background: var(--card-strong);
        box-shadow: none;
      }

      .modePanel { padding: 0; display: grid; gap: 12px; max-width: none; width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; }

      .tab,
      .presetBtn,
      .recentBtn,
      .smallAction,
      .viewBtn {
        appearance: none;
        border: 1px solid var(--stroke);
        background: var(--card-soft);
        color: var(--muted);
        border-radius: 15px;
        font-weight: 780;
        cursor: pointer;
        transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
        box-shadow: none;
      }

      .tab:hover, .presetBtn:hover, .recentBtn:hover, .smallAction:hover, .viewBtn:hover {
        background: #202d45;
        border-color: var(--stroke-strong);
        color: var(--text);
      }

      .tab.active,
      .presetBtn.active,
      .viewBtn.active {
        color: #fff;
        border-color: rgba(94, 172, 255, 0.38);
        background: linear-gradient(180deg, #2c7be8, #256bd0);
        box-shadow: 0 4px 12px rgba(31, 114, 255, 0.18);
      }

      .tabsViewport { min-width: 0; position: relative; }
      .tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
      .tab { padding: 11px 14px; font-size: 13px; }

      .presetsPanel { padding: 12px; max-width: 860px; width: 100%; margin: 0 auto; display: grid; gap: 10px; }
      .sectionTitleRow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
      .sectionTitle { font-weight: 820; font-size: 14px; color: var(--text); }
      .sectionHint { font-size: 12px; color: var(--muted-2); }
      .presetGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
      .presetBtn { padding: 10px 11px; text-align: left; min-width: 0; }
      .presetName { display: block; color: var(--text); font-size: 12px; font-weight: 820; }
      .presetMeta { display: block; color: var(--muted-2); font-size: 11px; margin-top: 3px; font-family: var(--mono); }

      .inputsRow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 860px; width: 100%; margin: 0 auto; }

      .timeInputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }

      .field { padding: 6px; border-radius: 14px; border: 1px solid var(--stroke); background: #131d2f; display: grid; gap: 8px; min-width: 0; }

      .field label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 700; }
      .field label span { color: var(--muted-2); font-family: var(--mono); font-variant-numeric: tabular-nums; }

      input[type="number"] {
        width: 100%;
        min-width: 0;
        border: 1px solid rgba(255,255,255,0.08);
        outline: none;
        border-radius: 14px;
        padding: 12px 12px;
        background: #0c1423;
        color: var(--text);
        font-size: 18px;
        font-weight: 820;
        font-family: var(--mono);
        font-variant-numeric: tabular-nums;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      }

      input[type="number"]:focus { border-color: rgba(79, 163, 255, 0.55); box-shadow: 0 0 0 4px rgba(47, 129, 255, 0.16), inset 0 1px 0 rgba(255,255,255,0.05); }
      input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: auto; margin: 0; }
      input[type="number"] { -moz-appearance: auto; }

      .sliderWrap { position: relative; padding: 0; display: grid; gap: 0; overflow: visible; background: #10192a; }
      .sliderTop { display: grid; grid-template-columns: auto minmax(0, 420px) 38px; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 12px; }
      .label { font-size: 14px; color: var(--text); font-weight: 800; }
      .compactTimeInputs { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
      .compactTimeInputs .field { position: relative; display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
      .compactTimeInputs input[type="number"] { padding: 9px 36px 9px 9px; border-radius: 10px; font-size: 15px; }
      .compactTimeInputs input[type="number"]::-webkit-outer-spin-button,
      .compactTimeInputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
      .compactTimeInputs input[type="number"] { -moz-appearance: textfield; }
      .inputUnit { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); color: var(--muted-2); font-family: var(--mono); font-size: 9px; font-weight: 760; pointer-events: none; }

      .copyIconBtn { width: 38px; min-height: 38px; padding: 0; justify-content: center; justify-self: end; }
      .copyIconBtn .toolIcon { background: transparent; }

      .sliderRail { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 0; align-items: stretch; min-height: 64px; padding: 0; border-top: 1px solid var(--stroke); }
      .sliderRail input[type="range"] { width: calc(100% - 32px); justify-self: center; align-self: center; }

      .sliderNudge {
        appearance: none;
        width: 100%;
        height: 100%;
        min-height: 64px;
        border-radius: 0;
        border: 0;
        background: rgba(8, 17, 31, 0.28);
        color: var(--text);
        box-shadow: none;
        cursor: pointer;
        display: inline-grid;
        place-items: center;
        font-size: 28px;
        font-weight: 820;
        line-height: 1;
        transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      #timeMinus { border-right: 1px solid var(--stroke); }
      #timePlus { border-left: 1px solid var(--stroke); }

      .sliderNudge:hover { background: #202d45; border-color: var(--stroke-strong); }
      .sliderNudge:active { transform: translateY(0); background: linear-gradient(180deg, rgba(56,145,255,0.18), rgba(56,145,255,0.08)); box-shadow: 0 16px 34px rgba(35, 110, 255, 0.2); }
      .sliderNudge:focus-visible, .tab:focus-visible, .presetBtn:focus-visible, .recentBtn:focus-visible, .smallAction:focus-visible, .toolBtn:focus-visible, .viewBtn:focus-visible { outline: none; border-color: rgba(79, 163, 255, 0.72); box-shadow: 0 0 0 4px rgba(47, 129, 255, 0.22); }

      input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; cursor: pointer; }
      input[type="range"]:focus { outline: none; }
      input[type="range"]:focus-visible { outline: 3px solid rgba(79, 163, 255, 0.72); outline-offset: 7px; border-radius: 999px; }
      input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(56,145,255,0.68), rgba(83,205,255,0.78)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(47,129,255,0.18); }
      input[type="range"]::-moz-range-track { height: 12px; border: none; border-radius: 999px; background: linear-gradient(90deg, rgba(56,145,255,0.68), rgba(83,205,255,0.78)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(47,129,255,0.18); }
      input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #dbeafe; background: #2b86ff; margin-top: -7px; box-shadow: 0 4px 12px rgba(23, 79, 190, 0.28); }
      input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #dbeafe; background: #2b86ff; box-shadow: 0 4px 12px rgba(23, 79, 190, 0.28); }

      .quickMetrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--stroke); }
      .quickMetric { min-width: 0; padding: 11px 12px; border: 0; border-radius: 0; background: transparent; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
      .quickMetric + .quickMetric { border-left: 1px solid var(--stroke); }
      .quickMetricLabel { color: var(--muted-2); font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: 0.09em; }
      .quickMetricReadout { min-width: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
      .quickMetricValue { color: var(--text); font-family: var(--mono); font-size: 15px; font-weight: 820; font-variant-numeric: tabular-nums; white-space: nowrap; }
      .quickMetricValue small { color: var(--muted); font-size: 10px; font-weight: 700; margin-left: 4px; }
      .quickMetricSecondary { color: var(--muted-2); font-family: var(--mono); font-size: 10px; font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }

      .recentPanel { padding: 12px; max-width: 860px; width: 100%; margin: 0 auto; display: grid; gap: 10px; }
      .recentList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .recentBtn { padding: 10px 11px; text-align: left; display: grid; gap: 4px; min-width: 0; }
      .recentTop { font-size: 12px; font-weight: 820; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .recentBottom { font-size: 11px; color: var(--muted-2); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .smallAction { padding: 8px 10px; font-size: 12px; }
      .emptyRecent { font-size: 12px; color: var(--muted-2); padding: 8px 2px; }

      .dropdownMenu .presetGrid,
      .dropdownMenu .recentList {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .dropdownMenu .presetBtn,
      .dropdownMenu .recentBtn {
        padding: 9px 10px;
        border-radius: 14px;
        box-shadow: none;
        background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
      }

      .dropdownMenu .presetName,
      .dropdownMenu .recentTop {
        font-size: 12px;
      }

      .dropdownMenu .presetMeta,
      .dropdownMenu .recentBottom {
        font-size: 10.5px;
      }

      .dropdownMenu .smallAction {
        flex: 0 0 auto;
        padding: 7px 9px;
        border-radius: 999px;
        box-shadow: none;
      }


      .copyLinkBtn.copied {
        border-color: rgba(53, 224, 193, 0.38);
        background: linear-gradient(180deg, rgba(53, 224, 193, 0.18), rgba(53, 224, 193, 0.08));
      }

      .segmentedControl {
        max-width: 360px;
        width: 100%;
        margin: 0 auto;
        padding: 4px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.08);
        background: #0d1524;
        flex-wrap: nowrap;
      }

      .viewToggle {
        display: flex;
        gap: 3px;
        max-width: max-content;
        padding: 3px;
      }

      .viewBtn {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        border-radius: 999px;
        color: var(--muted);
        font-size: 11px;
        padding: 7px 11px;
      }

      .viewBtn.active { box-shadow: 0 3px 9px rgba(31, 114, 255, 0.16); }

      @media (max-width: 620px) {
        .tabsViewport::before,
        .tabsViewport::after {
          content: "";
          position: absolute;
          z-index: 2;
          top: 0;
          bottom: 4px;
          width: 28px;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.18s ease;
        }

        .tabsViewport::before { left: 0; background: linear-gradient(90deg, var(--bg-2), transparent); }
        .tabsViewport::after { right: 0; background: linear-gradient(270deg, var(--bg-2), transparent); }
        .tabsViewport.canScrollLeft::before,
        .tabsViewport.canScrollRight::after { opacity: 1; }

        .tabs {
          flex-wrap: nowrap;
          overflow-x: auto;
          justify-content: flex-start;
          padding-bottom: 4px;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .tabs::-webkit-scrollbar {
          display: none;
        }

        .tab {
          flex: 0 0 auto;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        body::before {
          animation: none;
        }

        *, *::before, *::after {
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
        }
      }

      .tableWrap { padding: 0; }
      .tableNote { margin: 10px 2px 0; color: var(--muted-2); font-size: 11px; line-height: 1.45; }
      table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--stroke); background: #10192a; box-shadow: 0 5px 14px rgba(0,0,0,0.14); }
      thead th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255,255,255,0.92); background: #205db1; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
      .distanceHeader { display: flex; align-items: center; gap: 9px; }
      .tableHeaderRight { text-align: right; }
      .columnHeader .viewToggle { background: rgba(8, 25, 54, 0.46); border-color: rgba(255,255,255,0.18); }
      .distanceHeader .viewToggle { margin: 0; }
      .columnHeader .viewBtn { color: rgba(255,255,255,0.78); }
      .columnHeader .viewBtn.active { color: #fff; background: rgba(10, 27, 57, 0.58); border-color: rgba(255,255,255,0.24); box-shadow: none; }
      .columnHeader th { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; }
      .columnHeader .viewToggle { padding: 2px; gap: 2px; }
      .columnHeader .viewBtn { padding: 5px 8px; font-size: 10px; }
      tbody td { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.92); font-weight: 680; font-size: 14px; }
      tbody tr:nth-child(even) td { background: #131d2f; }
      tbody tr:hover td { background: #18243a; }
      tbody tr.highlight td { background: linear-gradient(180deg, rgba(53,224,193,0.18), rgba(53,224,193,0.09)) !important; color: var(--text); border-top-color: rgba(255,255,255,0.08); }
      tbody tr.highlight td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
      tbody tr.reusable { cursor: pointer; }
      tbody tr.reusable:focus { outline: none; }
      tbody tr.reusable:focus-visible td { background: #1b2c47; box-shadow: inset 0 2px 0 rgba(79,163,255,0.72), inset 0 -2px 0 rgba(79,163,255,0.72); }
      tbody tr.reusable:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--brand), inset 0 2px 0 rgba(79,163,255,0.72), inset 0 -2px 0 rgba(79,163,255,0.72); }
      .distanceCell { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
      .badge { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
      .timeCell { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
      .timeCellInner { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
      .secondsContext { color: var(--muted-2); font-size: 11px; font-weight: 650; }
      .timeValue { color: var(--text); }
      .footerNote { padding: 0 18px 18px; color: var(--muted-2); font-size: 12px; line-height: 1.5; }
      .srOnly { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

      @media (max-width: 860px) { .presetGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media (max-width: 760px) { .recentList { grid-template-columns: 1fr; } }
      @media (max-width: 620px) {
        body { padding: 4px; }
        .header { padding: 6px 2px 9px; }
        .controls { padding: 8px 0 10px; }
        .tableWrap { padding: 0; }
        .footerNote { padding: 0 2px 8px; }
        .sliderTop { align-items: center; }

        .showdesktop {
          display: none;
        }

        .showmobile {
          display: block;
        }
      }
      @media (max-width: 520px) {
        .tabs { justify-content: flex-start; }
        .tab { font-size: 12px; padding: 10px 12px; }
        .presetGrid { grid-template-columns: 1fr; }
        input[type="number"] { font-size: 16px; padding: 10px 8px; }
        .compactTimeInputs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
        .compactTimeInputs input[type="number"] { padding: 7px 30px 7px 7px; font-size: 14px; }
        .inputUnit { right: 7px; font-size: 8px; }
        .sliderTop { grid-template-columns: auto minmax(0, 1fr) 38px; gap: 8px; padding: 8px; }
        .sliderTop .label { font-size: 12px; white-space: nowrap; }
        .sliderRail { grid-template-columns: 48px minmax(0, 1fr) 48px; min-height: 58px; }
        .sliderRail input[type="range"] { width: calc(100% - 20px); }
        .sliderNudge { min-height: 58px; font-size: 24px; }
        thead th, tbody td { padding-left: 8px; padding-right: 8px; }
        .timeCellInner { gap: 6px; }
        .secondsContext { font-size: 10px; }
        .quickMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
        .distanceHeader { gap: 5px; }
        .columnHeader .viewBtn { padding: 4px 6px; }
        .quickMetric { justify-content: center; padding: 7px 6px; gap: 4px; }
        .quickMetricLabel { display: none; }
        .quickMetricReadout { justify-content: center; gap: 5px; }
      }

      @media (max-width: 620px) {
        .titleRow { align-items: center; flex-wrap: nowrap; }
        .headerTools { width: auto; justify-content: flex-end; flex-wrap: nowrap; }
        .dropdown { flex: 0 0 auto; }
        .headerTools .toolBtn { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
        .headerTools .toolLabel, .headerTools .toolChevron { display: none; }
        .dropdownMenu { left: auto; right: 0; width: max-content; min-width: min(280px, calc(100vw - 16px)); max-width: min(320px, calc(100vw - 16px)); }
        .dropdownMenu::before { left: auto; right: 14px; }
        .toolBtn[data-tooltip] { position: relative; }
        .toolBtn[data-tooltip]::after {
          content: attr(data-tooltip);
          position: absolute;
          z-index: 1200;
          top: calc(100% + 8px);
          right: 0;
          padding: 6px 8px;
          border: 1px solid var(--stroke-strong);
          border-radius: 8px;
          background: #111a2b;
          color: var(--text);
          box-shadow: var(--shadow-soft);
          font-size: 10px;
          font-weight: 760;
          line-height: 1;
          white-space: nowrap;
          opacity: 0;
          transform: translateY(-3px);
          pointer-events: none;
          transition: opacity 0.15s ease, transform 0.15s ease;
        }
        .toolBtn[data-tooltip]:hover::after,
        .toolBtn[data-tooltip]:focus-visible::after { opacity: 1; transform: translateY(0); }
        .toolBtn[data-tooltip][aria-expanded="true"]::after { display: none; }
      }