body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
select {
    border-width: 1px;
    border-color: rgb(181, 180, 180);
    color: grey;
    background-color: #f0f0f0;
    font-size: 14px;
}
input[type="color"] {
    width: 50px;
    height: 24px;
    background-color: #f0f0f0;
    border-width: 1px;
    border-color: rgb(181, 180, 180);
    padding: 0px;
}
input[type="number"] {
    width: 43px;
    height: 16px;
    background-color: #f0f0f0;
    border-width: 1px;
    border-color: rgb(181, 180, 180);
    padding: 2px;
    color: grey;
    font-size: 14px;
    font-weight: bold;
}
input[type="text"] {
    width: 60px;
    height: 32px;
    background-color: #e8e8e8;
    border-width: 1px;
    border-color: rgb(181, 180, 180);
    padding: 0px;
    font-size: 14px;
}
/* *-------- --------------------------------------*/
/* *--------        CONTROL BAR ELEMENTS.  ---------*/
/* *-------- --------------------------------------*/
.control-bar {
    background: rgba(240, 240, 240, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 0px solid rgba(0, 0, 0, 0.18);
    color: #222;
    font-family: system-ui, sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
/* *-------- --------------------------------------*/
/* *--------     TIMELINE  SCRUBBER----------------*/
/* *-------- --------------------------------------*/
.timeline-bar {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

    display: flex;
    align-items: center;

    font-family: system-ui, sans-serif;
    padding: 4px 8px;
}
.timeline-btn {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;

    color: #2d2f31;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    padding: 2px 6px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.timeline-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.timeline-btn:active {
    background: rgba(235, 235, 235, 0.9);
    transform: translateY(1px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}
.timeline-slider {
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    height: 4px;

    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    outline: none;
}
.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 18px;
    height: 18px;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.25);

    box-shadow: 0 0 0 1px #ffffff inset, 0 1px 2px rgba(0, 0, 0, 0.15);

    cursor: grab;
    transition: transform 0.12s ease, background 0.15s ease;
}
.timeline-slider::-webkit-slider-thumb:hover {
    background: white;
}
.timeline-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}
/* *-------- --------------------------------------*/
/* *--------                 BUTTONS             --*/
/* *-------- --------------------------------------*/
.iconbutton {
    background: rgba(255, 255, 255, 0.15); /* subtle frosted */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 90%;

    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.iconbutton:hover {
    transform: scale(1.15);
    filter: brightness(1.15);
}
.iconbutton:active {
    transform: scale(1.05) translateY(2px);
}
.win-action-button {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;

    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.15);

    padding: 4px 10px;
    font-family: system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2d2f31;

    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.win-action-button:hover {
    background: rgba(235, 245, 255, 0.85); /* cool tint = visible on white */
    border-color: rgba(90, 130, 180, 0.45); /* horizon-blue edge */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 1px 3px rgba(0, 0, 0, 0.15);
}
.win-action-button:active {
    background: rgba(240, 240, 240, 0.85);
    transform: translateY(2px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 1px 1px rgba(0, 0, 0, 0.18);
}
/* clear button to sit on top of element*/
.clear-button {
    background-color: #f0f0f000;
    transition-duration: 0.25s;
    border: none;
    cursor: pointer;
}
.clear-button:hover {
    background-color: #00000020;
}
.clear-button:active {
    background-color: #ffffff40;
}
.editor-mini-btn {
    width: 28px;
    height: 24px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #b4b4b8;
    border-radius: 4px;

    font-size: 16px;
    font-weight: 600;
    color: #474d56;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: background 0.12s ease, border-color 0.12s ease;
}
.editor-mini-btn:hover {
    background: #e9e9eb;
    border-color: #00a0ff;
}
.editor-mini-btn:active {
    background: #dcdcdc;
}
/* *-------- --------------------------------------*/
/* *--------                 TOGGLES              --*/
/* *-------- --------------------------------------*/
/* ============================================
   Light Mode — Frosted Glass OFF Tile
   ============================================ */
.std-toggle-off {
    width: 60px;
    height: 24px;

    background: rgba(255, 255, 255, 0.25); /* lighter than ON */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid #c9c9c9; /* soft neutral border */
    border-radius: 4px;

    /* very gentle inner highlight, less contrast than ON */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.1);

    color: #6f7379; /* muted grey text */
    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    user-select: none;

    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.std-toggle-off:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: #bfc8d4; /* very subtle cool shift */
    color: #4d5258;
}
.std-toggle-off:active {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 1px 1px rgba(0, 0, 0, 0.12);
}
.std-toggle-on {
    width: 60px;
    height: 24px;

    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid #9cb8d8; /* subtle blue tint border */
    border-radius: 4px;

    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset, 0 1px 2px rgba(0, 0, 0, 0.1);

    color: #2a70ff;
    text-shadow: 0 0 1px rgba(42, 112, 255, 0.55), 0 0 4px rgba(42, 112, 255, 0.25);

    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.std-toggle-on:hover {
    background: rgba(255, 255, 255, 0.55);
}
.std-toggle-on:active {
    background: rgba(255, 255, 255, 0.35);
}
/* *-------- --------------------------------------*/
/* *--------                MENU     -------------*/
/* *-------- --------------------------------------*/
.menu-item {
    background-color: #ffffff90;
    color: #202020;
    cursor: pointer;
    font-size: 12px;
    border-width: 1px;
    border-color: #808080;
    text-align: left;
    padding: 1px;
    z-index: 50;
}
.menu-item:hover {
    background-color: #9fcdf3;
    color: black;
}
.menu-item:active {
    transform: translateX(2px);
}
/* *-------- --------------------------------------*/
/* *--------            SVG            ----------------*/
.svgDisplayObject-design {
    stroke: #00a0ff;
    stroke-width: 3px;
    fill: transparent;
    opacity: 0;
    pointer-events: visiblePainted;
    filter: drop-shadow(0 0 4px rgba(0, 100, 255, 0.6));
}
.svgDisplayObject-design:hover {
    opacity: 1;
}
.svgDisplayObject-design:active {
    fill: #ffffff80;
}
.svgDisplayObject-run {
    stroke: #ffff0080;
    stroke-dasharray: 6, 6;
    stroke-width: 4px;
    fill: #00000000;
    opacity: 0;
}
.svgDisplayObject-run:hover {
    opacity: 1;
}
.svgDisplayObject-run:active {
    fill: #ffffff80;
}
@keyframes pulse {
    0% {
        stroke-width: 2px;
        opacity: 0.8;
    }
    50% {
        stroke-width: 3px;
        opacity: 1;
    }
    100% {
        stroke-width: 2px;
        opacity: 0.8;
    }
}
.highlight {
    stroke: #00a0ff;
    stroke-width: 4px;
    fill: transparent;
    animation: pulse 1s infinite;
    filter: drop-shadow(0 0 6px rgba(30, 120, 255, 0.8));
}
/* ROUTE HANDLE – Light Mode (modern, clean) */
.route-handle {
    stroke: #00a0ff; /* cyan accent */
    stroke-width: 2px;
    fill: rgba(0, 160, 255, 0.15); /* very soft cyan fill */

    cursor: pointer;
    transition: stroke 0.15s, fill 0.15s;
}
.route-handle:hover {
    stroke: #0090ee;
    fill: rgba(0, 160, 255, 0.35);
}
.route-handle:active {
    stroke: #005fa3;
    fill: rgba(0, 160, 255, 0.45);
}
.datatag-hit {
    fill: rgba(0, 0, 0, 0); /* transparent */
    stroke: none;
    cursor: move;
}
.datatag-hit:hover {
    fill: rgba(255, 255, 255, 0.05); /* faint glow */
}
/* ============================
   LINE HANDLE STYLE
   ============================ */
.svgLineHandle {
    stroke: #00a6dc; /* readable cyan */
    fill: rgba(255, 255, 255, 0.9);
    stroke-width: 2;
    pointer-events: auto; /* must receive drag events */
}
.svgLineHandle:hover {
    stroke: #00c8ff;
    fill: white;
}
/*.  Approach Point Handles */
.approach-handle {
    stroke: #00a6dc; /* readable cyan */
    fill: rgba(255, 255, 255, 0.2);
    stroke-width: 2;
    pointer-events: auto; /* must receive drag events */
}
.approach-handle:hover {
    stroke: #00c8ff;
    fill: rgba(255, 255, 255, 0.2);
}
/* *-------- --------------------------------------*/
/* *--------       Labels/text     ----------------*/
/* *-------- --------------------------------------*/
/* App Title — Light Mode (non-toggle, non-interactive) */
.app-title {
    font-family: system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5864e0;
    text-shadow: 0 0 1px rgba(88, 100, 224, 0.35);
}
.lbl-tooltip {
    pointer-events: none;

    padding: 4px 8px;
    border-radius: 6px;

    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

    font-family: system-ui, sans-serif;
    font-size: 12px;
    color: #2d2f31;
    font-weight: 600;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease-out, visibility 0s linear 0.12s;
    z-index: 9999;
}
.lbl-tooltip.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease-out, visibility 0s;
}
.lbl-panel-header {
    font-size: 14px;
    color: #474d56;
}
.lbl-time {
    font-size: 25px;
    color: #006eb0;
    font-weight: bold;
}
.obj-label {
    font-size: 13px;
    color: #474d56;
}
.tiny-label {
    font-size: 11px;
    color: #54575c;
    font-family: system-ui, sans-serif;
    letter-spacing: 0.03em;
}
.small-title {
    font-size: 15px;
    color: black;
}
.caption-mode {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;

    color: #6f7379; /* same grey tone as control labels */
    text-transform: uppercase;

    background-color: rgba(255, 255, 255, 0.6);
    padding: 3px 8px;
    border-radius: 4px;

    box-shadow: 0 0 0 1px #f3f4f6 inset;
}
.user-msg-banner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);

    padding: 4px 10px;
    border-radius: 4px;

    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);

    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

    font-size: 13px;
    font-weight: 600;
    color: #2d2f31;

    opacity: 0;
    transition: opacity 0.25s ease;
}
.user-msg-banner.show {
    opacity: 1;
}
/* *-------- --------------------------------------*/
/* *--------        App Specific        ----------------*/
/* *-------- --------------------------------------*/
.control-status-panel {
    background-color: #d6d7da;
    border: 1px solid #b4b4b8;
    box-shadow: 0 0 0 1px #f3f4f6 inset;
    font-family: system-ui, sans-serif;
}
/* Labels on the left */
.control-label {
    font-size: 11px;
    color: #6f7379;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
/* Values on the right */
.control-value {
    font-size: 13px;
    color: #2d2f31;
}
/* Emphasized numerical values */
.control-value-strong {
    font-size: 18px;
    font-weight: 600;
    color: #1d75cf; /* your blue */
}

/* ============================
   Right-Side Editor Drawer
   ============================ */
/* Light mode frosted drawer */
.editor-drawer {
    position: absolute;
    top: 80px;
    left: 100%;
    width: 260px;
    height: calc(100% - 80px - 48px);

    background: rgba(240, 240, 240, 0.4); /* translucent light */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border-left: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.18);
    transition: left 0.25s ease;
    overflow-y: auto;
}

.editor-drawer.open {
    left: calc(100% - 260px); /* slide into view */
}

/* ===============================================
   FIX / MAP ITEM EDITORS – SHARED EDITOR STYLES
   =============================================== */
.editor-window {
    background: rgba(240, 240, 240, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}
/* Base container for all editors inside the drawer */
.editor-panel {
    background: none; /* drawer provides background */
    border: none;
    margin: 0;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;

    display: block;
}
/* Section header inside editor */
.editor-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #474d56;
    margin: 12px 0 4px 0;
    letter-spacing: 0.04em;
}

/* Label for inputs inside drawer editors */
.editor-label {
    font-size: 12px;
    color: #6f7379;
    margin-bottom: 2px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Inputs (text, number, DMS fields) */
.editor-input {
    width: 80px;
    padding: 4px 6px;
    font-size: 13px;
    font-family: system-ui, sans-serif;

    border: 1px solid #b4b4b8;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.7);
    color: #2d2f31;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-input:focus {
    outline: none;
    border-color: #00a0ff;
    box-shadow: 0 0 0 1px #00a0ff inset;
}

/* Dropdowns */
.editor-select {
    width: 140px;
    padding: 4px 6px;
    font-size: 13px;
    color: #474d56;
    font-family: system-ui, sans-serif;

    border: 1px solid #b4b4b8;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.7);

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-select:focus {
    border-color: #00a0ff;
    box-shadow: 0 0 0 1px #00a0ff inset;
}

/* Lat/Lon 3-column grid (Deg / Min / Sec) */
.ll-grid {
    display: grid;
    grid-template-columns: 48px 48px 65px;
    gap: 4px;
}

/* Small action button (e.g., Recenter) */
.editor-button {
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;

    background-color: #d6d7da;
    color: #2d2f31;

    border: 1px solid #b4b4b8;
    border-radius: 4px;

    transition: background-color 0.12s ease;
}

.editor-button:hover {
    background-color: #c8c9cc;
}
.editor-routebox {
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 8px;
    border-radius: 6px;
    font-family: var(--ui-font);
    font-size: 14px;
    color: var(--text-color);
}
.rindex {
    display: inline-block;
    width: 18px;
    color: #375278; /* darker blue-grey */
    font-weight: 600;
    font-family: "Menlo", "Consolas", monospace;
}
/* ============================
   GEO MODE TOGGLE (DEC / DMS)
   ===== LIGHT MODE ===========
*/
.geo-toggle {
    position: relative;
    width: 110px;
    height: 26px;

    background: rgba(255, 255, 255, 0.6); /* light frosted */
    border: 1px solid #b4b4b8;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.geo-toggle-option {
    width: 55px;
    height: 100%;

    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    color: #6f7379;

    transition: color 0.15s ease;
}

.geo-toggle-option:hover {
    color: #000000;
}

.geo-toggle-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 26px;

    background: rgba(0, 0, 0, 0.08); /* darker instead of lighter */
    border-right: 1px solid #b4b4b8;
    border-left: 1px solid #b4b4b8;

    border-radius: 6px;
    z-index: 1;
    transition: left 0.18s ease;
}

/* LIGHT MODE — Softer frosted checkbox */
.styled-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;

    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;

    cursor: pointer;
    position: relative;
    display: inline-block;

    transition: background 0.15s, border-color 0.15s;
}

.styled-checkbox:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.35);
}

/* Checked = subtle blue edge and soft fill */
.styled-checkbox:checked {
    background: rgba(220, 235, 255, 0.9);
    border-color: #5a82c0;
}

/* Softer checkmark */
.styled-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 11px;

    border: solid #2d4f8f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);

    opacity: 0.9;
}