style.css

:root {
    color-scheme: light;
    --sp-forest: #52735E;
    --sp-forest-dark: #3f5c4a;
    --sp-sage: #90AE9B;
    --sp-mist: #a0bfc3;
    --sp-cream: #f5f7f3;
    --sp-ink: #1f2a23;
    --sp-border: rgba(82, 115, 94, 0.25);
    --sp-shadow: 0 10px 24px rgba(28, 42, 33, 0.14), 0 2px 6px rgba(28, 42, 33, 0.08);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 10px;
    --body-bottom-padding: 24px;
}

body,
html {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Avenir Next", "Segoe UI Variable", "Futura", "Trebuchet MS", "Noto Sans", sans-serif;
    width: 100%;
    min-height: 100vh;
    color: var(--sp-ink);
    background:
        radial-gradient(1200px 520px at 10% -10%, rgba(160, 191, 195, 0.45), transparent 60%),
        linear-gradient(160deg, #eef3ef 0%, #dfe9e2 45%, #c6d6cc 100%);
    padding-bottom: var(--body-bottom-padding);
}

* {
    box-sizing: border-box;
}

.log {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    height: 200px;
    overflow-y: scroll;
    white-space: pre-wrap;
    display: none;
}

#settings-progress {
    display: none;
    border: 1px solid var(--sp-border);
    height: 14px;
    margin: 14px 0 18px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
}

#settings-progress div {
    background: linear-gradient(90deg, var(--sp-forest), var(--sp-mist));
    height: 100%;
}

.log-entry {
    margin-bottom: 5px;
}

.log-entry.error {
    color: red;
}

#header-section,
.status-section,
.features-section,
.settings-section,
.commands-section,
.map-section {
    padding: 18px 16px;
}

body.connected #header-section {
    padding-bottom: 0;
}

/* The legacy grid under the header is empty on this page; keep it from adding a gap. */
#container:empty {
    margin-top: 0;
}


.status-section,
.features-section,
.settings-section,
.commands-section,
.map-section {
    padding: 0 16px;
    margin-top: 12px;
    margin-bottom: 0;
}

#dfu-section {
    padding: 0 16px;
}

#composer-commands {
    padding-bottom: 0;
}

#composer-messenger {
    padding-bottom: 60px;
}

body.composer-notes-visible #composer-messenger {
    padding-bottom: 0;
}

body.composer-notes-visible #composer-firmware-notes {
    padding-bottom: 60px;
}

.section-card {
    width: 100%;
    box-sizing: border-box;
}

.section-card + .section-card {
    margin-top: 12px;
}

.settings-section + .commands-section,
.status-section + .dfu-waiting-overlay + .commands-section,
.commands-section + .map-section,
.settings-section + .map-section,
.status-section + .settings-section,
.status-section + .features-section,
.features-section + .settings-section,
.features-section + .commands-section,
.features-section + .map-section,
.status-section + .commands-section,
.status-section + .map-section,
.map-section + .commands-section,
.commands-section + .settings-section,
.commands-section + .commands-section {
    margin-top: 12px;
}

#firmware-notes-area:not(.hidden),
#composer-firmware-notes:not(.hidden) {
    margin-top: 12px;
}

body.dfu-active #firmware-notes-area.dfu-notes-mode {
    padding: 0;
    margin-top: 12px;
    margin-bottom: 12px;
}

.section-card-title {
    cursor: pointer;
    list-style: none;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--sp-forest-dark);
}

.section-card-title .icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    flex: 0 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dfu-card .section-card-title {
    cursor: default;
}

.dfu-card .section-card-title::after {
    display: none;
}

.section-card-title::-webkit-details-marker {
    display: none;
}

.section-card-title::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(31, 42, 35, 0.7);
    border-bottom: 2px solid rgba(31, 42, 35, 0.7);
    margin-left: auto;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

/* Only the card's own title turns its chevron: panels nest inside the Settings card. */
.section-card[open] > .section-card-title::after {
    transform: rotate(225deg);
}

.section-card-body {
    padding-top: 12px;
}

.map-status {
    font-size: 14px;
    color: rgba(31, 42, 35, 0.7);
    margin-bottom: 10px;
}

.map-frame {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(233, 239, 233, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    isolation: isolate;
}

.map-view-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 450;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(31, 42, 35, 0.2);
    background: rgba(255, 255, 255, 0.95);
    color: rgba(31, 42, 35, 0.9);
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(31, 42, 35, 0.18);
}

.map-view-toggle:hover {
    background: #fff;
}

.map-canvas {
    width: 100%;
    height: 100%;
}

.leaflet-container {
    z-index: 0;
}

.latest-position-marker-wrapper {
    background: transparent;
    border: 0;
}

.latest-position-marker {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1e7b3a;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(30, 123, 58, 0.5);
}

.map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    background: rgba(236, 242, 237, 0.9);
    color: rgba(31, 42, 35, 0.8);
    font-weight: 600;
}

body.map-fullscreen {
    overflow: hidden;
}

body.map-fullscreen .bottom-nav,
body.map-fullscreen .log-footer,
body.map-fullscreen .app-version-footer {
    display: none;
}

body.map-fullscreen #map-area {
    max-width: none;
    margin: 0;
}

body.map-fullscreen #map-area .section-card {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

body.map-fullscreen #map-area .section-card-title,
body.map-fullscreen #map-area #map-status,
body.map-fullscreen #map-area .log-actions {
    display: none;
}

body.map-fullscreen #map-area .section-card-body {
    padding: 0;
}

body.map-fullscreen #map-area .map-frame {
    position: fixed;
    inset: 0;
    height: 100vh;
    border-radius: 0;
    border: 0;
    z-index: 1300;
}

.page-section {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Keep the gap between cards even when hidden sections sit between them in the DOM. */
.status-section.page-section,
.features-section.page-section,
.settings-section.page-section,
.commands-section.page-section,
.map-section.page-section {
    margin: 12px auto 0;
}

.controls button {
    margin-bottom: 10px;
    margin-right: 10px;
}

.header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.header-select {
    min-width: 220px;
    flex: 1 1 280px;
}

.composer-page .header-actions {
    flex-direction: column;
    align-items: stretch;
}

.composer-page .header-select {
    width: 100%;
    flex: 1 1 auto;
}

.primary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    margin-bottom: 0;
}

.primary-actions .button,
.primary-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    width: 100%;
    height: 56px;
    padding: 0 18px;
    line-height: 1.2;
}

.composer-button {
    min-width: 0;
}

.composer-actions {
    margin-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.composer-actions .button,
.composer-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    width: 100%;
    height: 56px;
    padding: 0 18px;
    line-height: 1.2;
}

.scan-button {
    background: linear-gradient(145deg, #1f6feb, #1952b8);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 8px 16px rgba(25, 82, 184, 0.25);
    min-width: 0;
}

.scan-button:hover {
    background: linear-gradient(145deg, #2f7ef0, #184a9b);
}

.scan-settings-card {
    margin-top: 3px;
}

.scan-card .section-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.scan-card .section-card-title::after,
.composer-card .section-card-title::after {
    display: none;
}

.scan-settings-card .section-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.scan-settings-card .section-card-title {
    justify-content: center;
}

.scan-settings-card .section-card-title .icon {
    margin-right: 8px;
}

.scan-settings-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    color: rgba(31, 42, 35, 0.7);
    font-size: 13px;
    width: 100%;
}

.scan-settings-label input {
    width: 100%;
}

.scan-settings-label.pin-row .pincode {
    width: 100%;
    max-width: none;
}

.scan-settings-card #pin-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}


.pin-details {
    margin-top: 4px;
    color: rgba(31, 42, 35, 0.7);
    font-size: 13px;
}

.scan-filter-details {
    margin-top: 8px;
    color: rgba(31, 42, 35, 0.7);
    font-size: 13px;
}

.pin-details summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31, 42, 35, 0.15);
    background: rgba(255, 255, 255, 0.8);
}

.scan-filter-details summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31, 42, 35, 0.15);
    background: rgba(255, 255, 255, 0.8);
}

.pin-details summary::-webkit-details-marker {
    display: none;
}

.scan-filter-details summary::-webkit-details-marker {
    display: none;
}

.pin-details summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid rgba(31, 42, 35, 0.6);
    border-bottom: 2px solid rgba(31, 42, 35, 0.6);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-left: 4px;
}

.scan-filter-details summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid rgba(31, 42, 35, 0.6);
    border-bottom: 2px solid rgba(31, 42, 35, 0.6);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-left: 4px;
}

.pin-details[open] summary::after {
    transform: rotate(-135deg);
}

.scan-filter-details[open] summary::after {
    transform: rotate(-135deg);
}

.pin-details label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.scan-filter-details label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
}

.scan-filter-input {
    width: min(420px, 100%);
    height: 38px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31, 42, 35, 0.2);
    background: rgba(255, 255, 255, 0.95);
}

.scan-filter-input:focus {
    outline: none;
    border-color: rgba(31, 111, 235, 0.6);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15);
}

.button-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.section-action {
    width: 100%;
    margin-bottom: 10px;
}

.settings-options {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

/* Import and Export side by side, spaced like the Actions card. */
.settings-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.settings-actions .section-action {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.settings-actions .icon {
    width: 16px;
    height: 16px;
    filter: invert(1);
}

.settings-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.75);
}

.settings-option input {
    width: 16px;
    height: 16px;
}

.button-cluster .hidden-when-no-settings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.setting {
    opacity: 1;
    padding: 14px;
    word-wrap: break-word;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-lg);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sp-shadow);
    position: relative;
}

.input-error {
    color: red;
    font-size: 90%;
    font-weight: bold;
    padding-top: 3px;
}

.setting.with-controls {
    justify-content: space-between;
}

.setting.with-controls .input-container {
    flex-grow: 1;
}

.setting.value-not-default {
    background: linear-gradient(135deg, rgba(160, 191, 195, 0.35), rgba(255, 255, 255, 0.9));
    border-color: rgba(160, 191, 195, 0.6);
}

.setting.disabled {
    cursor: wait;
    opacity: 0.6;
}

.setting.disabled * {
    pointer-events: none;
}

.setting button {
    margin-top: 5px;
}

.setting.transparent {
    opacity: 0.6;
}

.setting h4 {
    padding: 0;
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.2px;
    word-break: break-all;
}

.setting h4 small {
    font-weight: normal;
}

.setting-heading,
.setting-select-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.setting-heading {
    justify-content: space-between;
}

.setting-select-label {
    flex: 1 1 auto;
    min-width: 0;
}

.setting-info-button,
.setting-info-button:hover,
.setting-info-button:active {
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(31, 42, 35, 0.18);
    background: rgba(160, 191, 195, 0.18);
    color: rgba(31, 42, 35, 0.8);
    box-shadow: none;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
    vertical-align: top;
    appearance: none;
    -webkit-appearance: none;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

.setting-info-button:hover,
.setting-info-button:active,
.setting-info-button:focus-visible {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

.setting-info-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(82, 115, 94, 0.18) !important;
}

.setting-info-button::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: min(280px, calc(100vw - 48px));
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: rgba(31, 42, 35, 0.96);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    white-space: pre-line;
    letter-spacing: 0;
    text-align: left;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
}

.setting-info-button:hover::after,
.setting-info-button:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.input-label {
    display: block;
    font-size: 11px;
    color: rgba(31, 42, 35, 0.75);
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.input-helper {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(31, 42, 35, 0.65);
}

.command-helper-label {
    font-size: 11px;
    color: rgba(31, 42, 35, 0.75);
    letter-spacing: 0.2px;
}

.command-helper-input {
    width: 100%;
}

.raw-value-label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(31, 42, 35, 0.65);
    letter-spacing: 0.2px;
}

.raw-value {
    margin-top: 2px;
    background: #e6ece9;
    border-color: #c7d2cc;
    color: rgba(31, 42, 35, 0.8);
}

.raw-value:read-only {
    cursor: not-allowed;
}

input,
select,
textarea {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
}

input,
select,
textarea,
button,
.button {
    font-size: 14px;
}

.setting .input-container input,
.setting .input-container select,
.setting .input-container textarea {
    width: 100%;
    display: block;
    margin-top: 6px;
    background: #fff;
    border: 1px solid rgba(31, 42, 35, 0.15);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.setting .input-container input:focus,
.setting .input-container select:focus,
.setting .input-container textarea:focus,
#settings-search:focus,
#settings-dropdown:focus,
#flash-log-type-select:focus,
#hex-output:focus {
    outline: none;
    border-color: var(--sp-forest);
    box-shadow: 0 0 0 3px rgba(82, 115, 94, 0.18);
}

.setting .input-container .checkbox-container input {
    width: auto;
}

.byte-array-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.byte-array-field label {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    color: rgba(31, 42, 35, 0.7);
}

.byte-array-help {
    color: rgba(31, 42, 35, 0.65);
    font-size: 11px;
    margin-top: 2px;
}

#commands-buttons-section {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.command {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(248, 251, 249, 0.98), rgba(240, 246, 242, 0.92));
    box-shadow: var(--sp-shadow);
}

.command-heading {
    align-items: flex-start;
}

.command-heading > .command-action-button {
    flex: 1 1 auto;
}

.command-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-forest-dark);
    line-height: 1.35;
}

.command-helper-label {
    font-size: 11px;
    color: rgba(31, 42, 35, 0.75);
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.command-helper-input {
    width: 100%;
}

.command-helper-fields {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(82, 115, 94, 0.12);
}

.command-meta {
    color: rgba(31, 42, 35, 0.65);
    font-size: 11px;
    letter-spacing: 0.2px;
    word-break: break-all;
}

#commands-section {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

#commands-buttons-section .command-action-button {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

.settings-container {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.settings-subsection {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(82, 115, 94, 0.2);
    background: linear-gradient(180deg, rgba(240, 246, 241, 0.92), rgba(255, 255, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.settings-subsection-header {
    display: grid;
    gap: 4px;
}

.settings-subsection-header h4 {
    margin: 0;
    font-size: 15px;
    color: var(--sp-forest-dark);
    letter-spacing: 0.2px;
}

.settings-subsection-header p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(31, 42, 35, 0.7);
}

.settings-subsection-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: inherit;
}

button,
.button {
    background: linear-gradient(145deg, var(--sp-forest), var(--sp-forest-dark));
    border: 1px solid transparent;
    color: #fff;
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    align-content: center;
    border-radius: var(--radius-pill);
    letter-spacing: 0.2px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 6px 14px rgba(44, 73, 58, 0.22);
}

button:hover,
.button:hover {
    background: linear-gradient(145deg, #5d826a, #3b5a48);
    transform: translateY(-1px);
}

button:active,
.button:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(44, 73, 58, 0.2);
}

button:disabled,
button:disabled:hover {
    background: #6e7d75;
    border-color: #6e7d75;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

button.secondary,
.button.secondary {
    background: #fff;
    color: var(--sp-forest);
    border: 1px solid rgba(82, 115, 94, 0.5);
    box-shadow: none;
}

button.secondary:hover,
.button.secondary:hover {
    background: rgba(144, 174, 155, 0.18);
    border-color: var(--sp-forest);
}

#disconnect-button {
    background: linear-gradient(145deg, #d64545, #b91c1c);
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(185, 28, 28, 0.25);
}

#disconnect-button,
#dfu-button,
#dfu-back-top {
    height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#disconnect-button:hover {
    background: linear-gradient(145deg, #e35d5d, #a51616);
}

/* The device card carries the Disconnect button while connected; the header's copy is only
   needed on the DFU page, where the card is hidden. */
body.connected:not(.dfu-active) #disconnect-button {
    display: none !important;
}

.controls .button-cluster {
    margin-left: auto;
}

.reboot-button {
    background: linear-gradient(145deg, #d64545, #b91c1c);
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(185, 28, 28, 0.25);
}

.reboot-button:hover {
    background: linear-gradient(145deg, #e35d5d, #a51616);
}

#hex-output.invalid {
    border: 2px solid red;
}

#container {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    margin-top: 10px;
}

.section {
    padding: 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(82, 115, 94, 0.2);
    box-shadow: var(--sp-shadow);
}

body.connected #commands-section {
    margin-bottom: 150px;
}

.section-card .section-card-body #commands-section {
    margin-bottom: 0;
}

.messenger-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.messenger-header {
    align-items: center;
}

.messenger-actions {
    display: flex;
    gap: 8px;
}

.messenger-actions-bottom {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.messenger-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.messenger-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f3f6;
    color: #1f2430;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.messenger-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #e2e6ee;
    background: #fbfcfe;
    max-height: 320px;
    overflow-y: auto;
}

.messenger-empty {
    color: #7c8797;
    font-size: 13px;
}

.messenger-message {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    box-shadow: 0 6px 18px rgba(12, 18, 31, 0.08);
}

.messenger-message.incoming {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid #e6ebf2;
}

.messenger-message.outgoing {
    align-self: flex-end;
    background: #e7f2ff;
    border: 1px solid #c7defa;
}

.messenger-meta-line {
    margin-top: 6px;
    font-size: 11px;
    color: #697386;
    display: flex;
    gap: 8px;
}

.messenger-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.messenger-input textarea {
    width: 100%;
    resize: vertical;
    min-height: 54px;
    border-radius: 12px;
    border: 1px solid #d7dbe4;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
}

.messenger-send-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.messenger-payload-output {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31, 42, 35, 0.2);
    background: #fff;
    color: #000;
    font-family: monospace;
}

.messenger-payload-output.invalid {
    border-color: #b42318;
}

.messenger-limit {
    font-size: 12px;
    color: #7c8797;
}

.messenger-limit-centered {
    text-align: center;
}

.messenger-send-button {
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}

.messenger-send-button:hover {
    background: linear-gradient(145deg, #4f8ef7, #1d4ed8);
}

.settings-group {
    margin-bottom: 10px;
}

.settings-group:last-child {
    margin-bottom: 0;
}

/* The Import / export group holds buttons and checkboxes, not setting rows. */
.settings-container.settings-transfer {
    display: block;
}

.settings-transfer .settings-options {
    margin-bottom: 0;
}

.search {
    margin-top: 0;
}

.group-toggle {
    width: 100%;
    text-align: left;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(82, 115, 94, 0.25);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--sp-forest-dark);
    box-shadow: 0 6px 14px rgba(31, 42, 35, 0.08);
}

.group-toggle:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: none;
}

/* The one open group stands out: its header turns forest green. */
.settings-group:not(.is-collapsed) .group-toggle,
.settings-group:not(.is-collapsed) .group-toggle:hover {
    background: linear-gradient(145deg, var(--sp-forest), var(--sp-forest-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(44, 73, 58, 0.22);
}

.settings-group:not(.is-collapsed) .group-caret {
    border-color: #fff;
}

.group-title {
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}

.group-caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--sp-forest);
    border-bottom: 2px solid var(--sp-forest);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.settings-group.is-collapsed .group-caret {
    transform: rotate(-45deg);
}

.settings-group.is-collapsed .settings-container {
    display: none;
}

.section h4 {
    margin: 0 0 6px 0;
}

h2 {
    margin: 6px 0 10px;
    font-size: 20px;
    letter-spacing: 0.3px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0 14px;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.app-menu {
    position: relative;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 1px solid rgba(31, 42, 35, 0.18);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 18px rgba(31, 42, 35, 0.12);
    color: var(--sp-ink);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

.menu-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 22px rgba(31, 42, 35, 0.16);
}

.menu-toggle-icon,
.menu-toggle .icon {
    width: 24px;
    height: 24px;
    display: block;
    background-size: 24px 24px;
}

.menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(31, 42, 35, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 32px rgba(31, 42, 35, 0.18);
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 1400;
}

.menu-panel.open {
    display: flex;
}

.menu-panel a,
.menu-panel button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: rgba(82, 115, 94, 0.08);
    color: var(--sp-ink);
    text-decoration: none;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.menu-panel .menu-debug-toggle.debug-enabled {
    background: rgba(200, 40, 40, 0.18);
    border-color: rgba(200, 40, 40, 0.35);
    color: #7a1111;
}

.menu-panel .menu-debug-toggle.debug-disabled {
    background: rgba(28, 132, 70, 0.16);
    border-color: rgba(28, 132, 70, 0.3);
    color: #0f5a2d;
}

.sw-cache-indicator {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
}

.sw-cache-indicator.hidden {
    display: none;
}

.sw-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(31, 42, 35, 0.2);
    border-top-color: rgba(31, 42, 35, 0.65);
    animation: sw-spin 0.9s linear infinite;
}

@keyframes sw-spin {
    to {
        transform: rotate(360deg);
    }
}

.debug-toggle-fab {
    position: fixed;
    right: 16px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(30, 86, 196, 0.55);
    background: rgba(37, 99, 235, 0.2);
    color: #1f4fd1;
    box-shadow: 0 14px 24px rgba(31, 42, 35, 0.18);
    cursor: pointer;
    z-index: 3000;
}

.debug-toggle-fab .icon {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    filter: none;
}

.debug-toggle-fab.debug-enabled {
    background: rgba(37, 99, 235, 0.85);
    border-color: rgba(30, 86, 196, 0.9);
    color: #fff;
}

.debug-toggle-fab.debug-disabled {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(30, 86, 196, 0.55);
    color: #1f4fd1;
}

.debug-toggle-fab.hidden {
    display: none;
}

.menu-panel a:hover,
.menu-panel button:hover {
    background: rgba(82, 115, 94, 0.16);
    border-color: rgba(82, 115, 94, 0.2);
}

.menu-panel .icon {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
}

.menu-panel .icon.toggle-log {
    filter: invert(1);
}


.brand-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid rgba(82, 115, 94, 0.2);
    box-shadow: 0 8px 16px rgba(31, 42, 35, 0.15);
    padding: 6px;
}

.brand-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--sp-forest-dark);
}

.brand-subtitle {
    font-size: 13px;
    letter-spacing: 0.3px;
    color: rgba(31, 42, 35, 0.7);
}

/* DFU (and Back on the DFU page) as a tile with the logo's size and shape. DFU keeps its
   blue scan-button colours; Back is a plain white tile. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 6px 0 14px; /* same vertical offset as the logo in .brand */
}

#dfu-button.header-tile,
#dfu-back-top.header-tile {
    width: 54px;
    height: 54px;
    padding: 0;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.4px;
}

#dfu-back-top.header-tile {
    background: #fff;
    border: 1px solid rgba(82, 115, 94, 0.2);
    box-shadow: 0 8px 16px rgba(31, 42, 35, 0.15);
    color: var(--sp-forest-dark);
}

#dfu-back-top.header-tile:hover {
    background: #f4f8f5;
    transform: translateY(-1px);
}

.app-version {
    font-size: 11px;
    letter-spacing: 0.2px;
    color: rgba(31, 42, 35, 0.5);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.app-version-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 18px 12px 28px;
    opacity: 0.85;
}

.app-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.app-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(31, 42, 35, 0.72);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.app-footer-link:hover {
    color: rgba(31, 42, 35, 0.92);
}

.app-footer-link .icon {
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
    flex: 0 0 auto;
}

/* Floating bar at the bottom */
#floating-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--sp-forest);
    color: white;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    justify-content: center;
    font-family: monospace;
    z-index: 20;
}

.checkbox-container {
    display: flex;
    align-items: center;
}

.checkbox-container.setting-select-row {
    align-items: flex-start;
}

.checkbox-container label {
    margin-left: 5px;
    cursor: pointer;
}

#payload-type {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31, 42, 35, 0.2);
    background: #fff;
    color: #000;
    font-family: monospace;
}

#hex-output {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    font-family: monospace;
    border: 1px solid rgba(31, 42, 35, 0.2);
    border-radius: var(--radius-sm);
    background: #fff;
    color: #000;
}

.payload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.payload-row #hex-output {
    flex: 1;
}

#copy-button {
    background: linear-gradient(145deg, #1f6feb, #1952b8);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 8px 16px rgba(25, 82, 184, 0.25);
    cursor: pointer;
    width: clamp(36px, 7vw, 44px);
    height: clamp(36px, 7vw, 44px);
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

#copy-button .payload-icon {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}

#copy-button:hover {
    background-color: rgba(144, 174, 155, 0.2);
}

/* Scrollable container for port checkboxes (for lr_send_flag, etc.) */
.checkbox-scroll {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid rgba(31, 42, 35, 0.15);
    padding: 8px;
    border-radius: var(--radius-sm);
    margin-top: 5px;
    background: #fafafa;
}

.data-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(31, 42, 35, 0.12);
}

.data-item:last-child {
    border-bottom: none;
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.status-header .status-item {
    margin-right: 0;
}

.status-items {
    display: flex;
    flex-wrap: wrap;
}

.status-item {
    display: flex;
    align-items: center;
    margin: 4px 10px 4px 0;
    padding: 6px 10px;
    background: rgba(144, 174, 155, 0.18);
    border-radius: var(--radius-pill);
    font-size: 13px;
}

.status-item .icon {
    margin-right: 5px;
}

.ublox-gps-tag {
    font-weight: 600;
}

.ublox-gps-tag.active {
    background: rgba(52, 168, 83, 0.2);
    border: 1px solid rgba(52, 168, 83, 0.45);
}

.ublox-gps-tag.inactive {
    background: rgba(123, 135, 151, 0.2);
    border: 1px solid rgba(123, 135, 151, 0.45);
}

.ublox-gps-tag.unknown {
    background: rgba(255, 196, 112, 0.25);
    border: 1px solid rgba(197, 121, 0, 0.35);
}

.features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.feature-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    color: inherit;
    text-align: left;
    background: rgba(123, 135, 151, 0.12);
    border: 1px solid rgba(123, 135, 151, 0.3);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.feature-item:hover,
.feature-item:focus-visible {
    transform: none;
    box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.18);
}

.feature-item.enabled {
    background: rgba(52, 168, 83, 0.12);
    border-color: rgba(52, 168, 83, 0.38);
}

.feature-item-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.feature-name {
    font-weight: 650;
}

.feature-detail {
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: rgba(31, 42, 35, 0.68);
    font-size: 12px;
    line-height: 1.3;
}

.feature-status {
    flex: 0 0 auto;
    padding: 3px 7px;
    color: #496252;
    font-size: 12px;
    font-weight: 650;
    background: rgba(52, 168, 83, 0.18);
    border-radius: var(--radius-pill);
}

.feature-item.disabled .feature-status {
    color: #697484;
    background: rgba(123, 135, 151, 0.18);
}

.features-empty {
    color: rgba(31, 42, 35, 0.68);
    font-size: 13px;
}

.ublox-disable-button {
    background: linear-gradient(145deg, #f59e0b, #d97706);
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(217, 119, 6, 0.3);
}

.ublox-disable-button:hover {
    background: linear-gradient(145deg, #f8b84a, #c56d05);
}

.lr-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 196, 112, 0.25);
    border: 1px solid rgba(197, 121, 0, 0.35);
}

.lr-update-title {
    font-weight: 700;
    font-size: 14px;
}

.lr-update-text {
    font-size: 13px;
    color: rgba(31, 42, 35, 0.85);
}

.lr-update-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.interval-container,
.setting-controls,
#main-commands {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.header-cards {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 10px;
}

.interval-unit-label {
    align-self: center;
    color: rgba(31, 42, 35, 0.75);
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid rgba(31, 42, 35, 0.2);
    border-radius: 8px;
    background: rgba(31, 42, 35, 0.06);
}

.hidden,
body:not(.connected) .hidden-when-disconnected,
body.connected .hidden-when-connected,
body:not(.has-settings) .hidden-when-no-settings,
body:not(.has-status) .hidden-when-no-status,
body:not(.bootstrapping) .hidden-when-not-bootstrapping {
    display: none !important;
}

body.bootstrapping .status-section,
body.bootstrapping .features-section,
body.bootstrapping .settings-section,
body.bootstrapping .commands-section:not(.hidden-when-not-bootstrapping),
body.bootstrapping .map-section {
    display: none !important;
}

body.bootstrapping .log-footer,
body.bootstrapping .debug-toggle-fab {
    z-index: 3002;
}

.connection-loading-overlay-card {
    width: min(420px, 90vw);
}

.connection-loading-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-forest-dark);
    margin-bottom: 4px;
}

.connection-loading-text {
    font-size: 14px;
    color: rgba(31, 42, 35, 0.72);
    font-weight: 500;
}

body.lr-update #settings-selection,
body.lr-update .settings-section,
body.lr-update .status-section,
body.lr-update .features-section,
body.lr-update #actions-area,
body.lr-update #logs-area,
body.lr-update .commands-section,
body.lr-update .map-section,
body.lr-update .lr-update-hide,
body.lr-update .button-cluster .hidden-when-no-settings {
    display: none !important;
}

body.firmware-v5-update #settings-selection,
body.firmware-v5-update .settings-section,
body.firmware-v5-update #actions-area,
body.firmware-v5-update #logs-area,
body.firmware-v5-update .commands-section,
body.firmware-v5-update .map-section,
body.firmware-v5-update .button-cluster .hidden-when-no-settings {
    display: none !important;
}

.dfu-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

#dfu-back-top {
    display: none;
}

.dfu-only {
    display: none !important;
}

body.dfu-active .dfu-only {
    display: inline-flex !important;
}

body.dfu-active .dfu-hide {
    display: none !important;
}

body.dfu-active .hidden-when-connected {
    display: none !important;
}

body.dfu-active .hidden-when-disconnected.dfu-keep-visible {
    display: block !important;
}

body.dfu-active .bottom-nav.dfu-keep-visible {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
}

body.dfu-active .bottom-nav .dfu-hide-nav {
    display: none !important;
}

body.dfu-active .bottom-nav .dfu-only-nav {
    display: inline-flex !important;
}

#dfu-section .section-card + .section-card {
    margin-top: 12px;
}

.dfu-connection-status {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.dfu-connection-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.dfu-connection-status[data-state="success"] .dfu-connection-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"%231e7b3a\"/><path d=\"M4.2 8.2l2.1 2.1 5-5\" fill=\"none\" stroke=\"%23ffffff\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');
}

.dfu-connection-status[data-state="error"] .dfu-connection-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"%23b42318\"/><path d=\"M5 5l6 6M11 5l-6 6\" fill=\"none\" stroke=\"%23ffffff\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');
}

.dfu-connection-status[data-state="pending"] .dfu-connection-icon,
.dfu-connection-status[data-state="neutral"] .dfu-connection-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"%23919e96\"/></svg>');
}

.dfu-device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
}

.dfu-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(31, 42, 35, 0.55);
}

.dfu-value {
    font-size: 15px;
    font-weight: 600;
    color: #1f2a23;
}

#dfu-device-name {
    color: #1f6feb;
}

.dfu-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 209, 102, 0.2);
    color: #8a5800;
    font-size: 13px;
}

.dfu-file-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 10px;
}

.dfu-bundled-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 10px;
}

.dfu-bundled-select {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(31, 42, 35, 0.2);
    background: #fff;
    color: #1f2a23;
    flex: 1 1 100%;
}

.dfu-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none;
}

#dfu-bundled-use,
.dfu-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.2;
}

.dfu-file-hint {
    font-size: 12px;
    color: rgba(31, 42, 35, 0.65);
}

.dfu-file-status {
    font-size: 13px;
    margin-bottom: 8px;
    color: rgba(31, 42, 35, 0.8);
}

.dfu-bundled-hint {
    flex: 1 1 100%;
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 209, 102, 0.22);
    color: #6f4600;
}

.dfu-user-status {
    font-size: 14px;
    margin-bottom: 12px;
    color: rgba(31, 42, 35, 0.8);
}

.dfu-user-status.success {
    color: #1e7b3a;
    font-weight: 600;
}

.dfu-user-status.warning {
    color: #8a5800;
    font-weight: 600;
}

.dfu-user-status.danger,
.dfu-user-status.error {
    color: #b42318;
    font-weight: 600;
}

.dfu-check-status {
    font-size: 14px;
    margin-bottom: 14px;
    color: rgba(31, 42, 35, 0.8);
}

.dfu-file-match {
    font-size: 13px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(31, 42, 35, 0.06);
    color: rgba(31, 42, 35, 0.8);
}

.dfu-file-match.success {
    background: rgba(30, 123, 58, 0.12);
    color: #1e7b3a;
    font-weight: 600;
}

.dfu-file-match.warning {
    background: rgba(255, 209, 102, 0.2);
    color: #8a5800;
    font-weight: 600;
}

.dfu-file-match.error {
    background: rgba(180, 35, 24, 0.12);
    color: #b42318;
    font-weight: 600;
}

.dfu-confirmation {
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(31, 42, 35, 0.04);
    border: 1px solid rgba(31, 42, 35, 0.12);
    display: grid;
    gap: 10px;
}

.dfu-confirmation-text {
    font-size: 13px;
    color: rgba(31, 42, 35, 0.8);
}

.dfu-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#dfu-confirmation .dfu-confirmation-actions {
    width: 100%;
}

#dfu-confirmation .dfu-confirmation-actions > button {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

.dfu-check-status.success {
    color: #1e7b3a;
    font-weight: 600;
}

.dfu-check-status.warning {
    color: #8a5800;
    font-weight: 600;
}

.dfu-check-status.danger {
    color: #b42318;
    font-weight: 700;
}

.dfu-check-status.error {
    color: #b42318;
    font-weight: 600;
}

.dfu-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.dfu-upload-panel {
    margin-top: 14px;
}

.dfu-upload-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.dfu-upload-setting {
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: rgba(31, 42, 35, 0.7);
}

.dfu-upload-setting input {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(31, 42, 35, 0.2);
    font-size: 14px;
}

.dfu-upload-status {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(31, 42, 35, 0.06);
}

.dfu-upload-status-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: rgba(31, 42, 35, 0.8);
}

.dfu-upload-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.dfu-upload-status-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    color: rgba(31, 42, 35, 0.75);
}

.dfu-upload-status-list li.active {
    color: #1f6feb;
    font-weight: 600;
}

.dfu-upload-status-list li.completed {
    color: #1e7b3a;
    font-weight: 600;
}

.dfu-upload-status-list li.error {
    color: #b42318;
    font-weight: 600;
}

.dfu-upload-status-list li.warning {
    color: #8a5800;
    font-weight: 600;
}

.dfu-upload-status-list li.danger {
    color: #b42318;
    font-weight: 700;
}

.dfu-upload-status-list .status-detail {
    font-variant-numeric: tabular-nums;
    color: rgba(31, 42, 35, 0.6);
}

.dfu-advanced-card {
    margin-top: 10px;
}

.dfu-advanced-card .section-card-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.dfu-advanced-card .section-card-title::after {
    display: inline-block;
}


.dfu-image-state {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(31, 42, 35, 0.04);
}

.dfu-image-state-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: rgba(31, 42, 35, 0.8);
}

.dfu-image-state-list {
    display: grid;
    gap: 10px;
}

.dfu-image-slot {
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(31, 42, 35, 0.12);
}

.dfu-image-slot.active {
    border-color: rgba(30, 123, 58, 0.5);
    box-shadow: 0 0 0 1px rgba(30, 123, 58, 0.15);
}

.dfu-image-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(31, 42, 35, 0.8);
}

.dfu-image-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px 10px;
    font-size: 12px;
    color: rgba(31, 42, 35, 0.7);
}

.dfu-image-slot-grid span {
    font-weight: 600;
    color: rgba(31, 42, 35, 0.9);
}

.dfu-image-state-empty {
    font-size: 12px;
    color: rgba(31, 42, 35, 0.6);
}

.dfu-waiting-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 24, 19, 0.45);
    backdrop-filter: blur(2px);
}

.dfu-waiting-card {
    display: grid;
    justify-items: center;
    gap: 16px;
    width: min(480px, 90vw);
    padding: 28px 32px;
    border-radius: 16px;
    background: #fff;
    color: rgba(31, 42, 35, 0.9);
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 20px 40px rgba(17, 28, 22, 0.25);
    text-align: center;
}

.dfu-waiting-countdown {
    font-size: 13px;
    color: rgba(31, 42, 35, 0.7);
}

.dfu-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid rgba(31, 42, 35, 0.2);
    border-top-color: #1f6feb;
    animation: dfu-spin 1s linear infinite;
}

.ublox-fix-card {
    width: min(540px, 92vw);
}

.flash-log-card {
    width: min(560px, 92vw);
}

.flash-log-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(31, 42, 35, 0.12);
    overflow: hidden;
}

.flash-log-progress div {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f6feb, #00b894);
    transition: width 0.2s ease;
}

.flash-log-progress.indeterminate div {
    width: 35%;
    animation: flash-log-indeterminate 1.25s ease-in-out infinite;
}

.flash-log-overlay-message {
    width: 100%;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.8);
    font-weight: 500;
    line-height: 1.45;
}

.flash-log-overlay-message.warning {
    color: #9b1c1c;
}

.flash-log-overlay-message a {
    color: #1f6feb;
    font-weight: 700;
    text-decoration: none;
}

.flash-log-overlay-message a:hover {
    text-decoration: underline;
}

.ublox-fix-results {
    width: 100%;
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.85);
    text-align: left;
}

.ublox-fix-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(144, 174, 155, 0.18);
}

.ublox-fix-row span:first-child {
    font-weight: 600;
    color: rgba(31, 42, 35, 0.9);
}

.ublox-fix-raw {
    width: 100%;
    font-size: 12px;
    color: rgba(31, 42, 35, 0.65);
    word-break: break-all;
    text-align: left;
}

.ublox-fix-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .ublox-fix-card {
        gap: 10px;
        padding: 18px 16px;
    }

    .ublox-fix-results {
        gap: 4px;
        font-size: 12px;
    }

    .ublox-fix-row {
        gap: 8px;
        padding: 4px 8px;
        border-radius: 10px;
    }

    .ublox-fix-actions {
        gap: 8px;
    }
}

.log-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.log-action-button {
    width: 100%;
}

.cmdq-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cmdq-results {
    border: 1px solid rgba(31, 42, 35, 0.12);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(246, 249, 247, 0.95), rgba(234, 241, 237, 0.95));
    padding: 14px;
}

.cmdq-empty,
.cmdq-result-message {
    color: rgba(31, 42, 35, 0.72);
    line-height: 1.5;
}

.cmdq-result-note {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(160, 191, 195, 0.16);
    border: 1px solid rgba(82, 115, 94, 0.18);
    color: rgba(31, 42, 35, 0.82);
    font-size: 13px;
    line-height: 1.5;
}

.status-log-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-log-card .status-header,
.status-log-card .log-actions {
    margin-top: 0;
    margin-bottom: 0;
}

.status-log-results {
    border: 1px solid rgba(31, 42, 35, 0.12);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(246, 249, 247, 0.95), rgba(234, 241, 237, 0.95));
    overflow: hidden;
}

.status-log-results .cmdq-empty {
    padding: 14px;
}

.status-log-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.status-log-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 12px;
}

.status-log-table th,
.status-log-table td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(82, 115, 94, 0.16);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.status-log-table th {
    font-size: 11px;
    color: rgba(31, 42, 35, 0.68);
    text-transform: uppercase;
}

.status-log-table tbody tr:last-child td {
    border-bottom: none;
}

.status-log-table code {
    font-size: 11px;
    white-space: nowrap;
}

.status-log-age {
    width: 1%;
    max-width: 64px;
    color: rgba(31, 42, 35, 0.72);
    font-variant-numeric: tabular-nums;
}

/* Recent messages of any type: a narrower table whose details column may wrap. */
.recent-log-header {
    margin-top: 14px;
}

.recent-log-heading {
    padding: 10px 12px 0;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.72);
}

.recent-log-table {
    min-width: 560px;
}

.recent-log-table td.recent-log-details {
    white-space: normal;
    min-width: 220px;
    max-width: 420px;
}

.recent-log-table td.recent-log-raw code {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

#recent-log-results {
    margin-top: 10px;
}

.cmdq-result-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scan-progress-card {
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 244, 0.96));
    border: 1px solid rgba(31, 42, 35, 0.08);
    box-shadow: 0 12px 24px rgba(31, 42, 35, 0.08);
}

.cmdq-result-card.is-empty {
    color: rgba(31, 42, 35, 0.8);
}

.cmdq-result-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: rgba(31, 42, 35, 0.78);
}

.scan-progress-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scan-progress-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(31, 42, 35, 0.55);
}

.scan-progress-detail {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-ink);
}

.cmdq-result-grid {
    display: grid;
    gap: 10px;
}

.cmdq-result-row {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(31, 42, 35, 0.08);
}

.cmdq-result-label {
    font-size: 11px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: rgba(31, 42, 35, 0.6);
}

.cmdq-result-value {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    word-break: break-word;
    color: rgba(31, 42, 35, 0.92);
}

.scan-results-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scan-results-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.scan-summary-block {
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 244, 0.96));
    border: 1px solid rgba(31, 42, 35, 0.08);
    box-shadow: 0 8px 18px rgba(31, 42, 35, 0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scan-summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(31, 42, 35, 0.55);
}

.scan-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-ink);
}

.scan-entry-list {
    display: grid;
    gap: 10px;
}

.scan-entry-card {
    position: relative;
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 245, 0.96));
    border: 1px solid rgba(31, 42, 35, 0.08);
    box-shadow: 0 12px 24px rgba(31, 42, 35, 0.08);
    overflow: hidden;
}

.scan-entry-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 16px 0 0 16px;
    background: rgba(82, 115, 94, 0.28);
}

.scan-entry-strong::before {
    background: linear-gradient(180deg, #1f9d55, #157347);
}

.scan-entry-medium::before {
    background: linear-gradient(180deg, #d97706, #b45309);
}

.scan-entry-weak::before {
    background: linear-gradient(180deg, #c2410c, #9a3412);
}

.scan-entry-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scan-entry-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.scan-entry-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.scan-entry-title {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-size: 19px;
    font-weight: 700;
    color: var(--sp-ink);
    word-break: break-word;
}

.scan-entry-subtitle {
    font-size: 12px;
    color: rgba(31, 42, 35, 0.62);
    letter-spacing: 0.2px;
}

.scan-entry-signal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

.scan-entry-rssi {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-forest-dark);
    white-space: nowrap;
}

.scan-entry-signal-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: rgba(31, 42, 35, 0.52);
}

.scan-entry-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scan-entry-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(227, 236, 231, 0.9);
    border: 1px solid rgba(82, 115, 94, 0.14);
    color: rgba(31, 42, 35, 0.78);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.fence-calibration {
    border: 1px solid rgba(31, 42, 35, 0.12);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.72);
    padding: 14px;
    margin-top: 8px;
}

.fence-calibration-help {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(160, 191, 195, 0.16);
    color: rgba(31, 42, 35, 0.82);
    line-height: 1.5;
    font-size: 13px;
}

.fence-calibration-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fence-calibration-row input {
    width: 100%;
    display: block;
    background: #fff;
    border: 1px solid rgba(31, 42, 35, 0.15);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-size: 14px;
}

.fence-calibration-row input:focus {
    outline: none;
    border-color: var(--sp-forest);
    box-shadow: 0 0 0 3px rgba(82, 115, 94, 0.18);
}

.fence-calibration-unit {
    color: rgba(31, 42, 35, 0.72);
    white-space: nowrap;
}

.log-actions .scan-button,
.log-actions .erase-logs-button {
    width: 100%;
    justify-content: center;
}

.erase-logs-button {
    background: linear-gradient(145deg, #d64545, #b91c1c);
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(185, 28, 28, 0.25);
}

.erase-logs-button:hover {
    background: linear-gradient(145deg, #e35d5d, #a51616);
}

/* LP0 offload card (firmware 8.1 development builds). */
.lp0-note {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(31, 42, 35, 0.75);
}

.lp0-fields {
    margin-bottom: 8px;
}

.lp0-job {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--sp-border);
    font-size: 13px;
    line-height: 1.45;
}

.lp0-job-state {
    font-weight: 700;
    color: var(--sp-forest-dark);
}

.lp0-job-state.is-failed {
    color: #b42318;
}

.lp0-job-state.is-done {
    color: #1e7a3c;
}

.lp0-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lp0-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f1f3f6;
    color: #1f2430;
    font-size: 12px;
    font-weight: 600;
}

.recent-log-more {
    margin-top: 6px;
    font-size: 12px;
}

.recent-log-more summary {
    cursor: pointer;
    color: var(--sp-forest-dark);
    font-weight: 600;
}

.recent-log-list {
    margin: 6px 0 0;
    padding-left: 18px;
    columns: 2;
    column-gap: 18px;
}

.recent-log-list li {
    break-inside: avoid;
}

.log-type-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(31, 42, 35, 0.18);
    background: #fff;
    box-sizing: border-box;
}

.ublox-fix-map {
    width: 100%;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(31, 42, 35, 0.12);
}

@keyframes dfu-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes flash-log-indeterminate {
    0% {
        transform: translateX(-130%);
    }
    100% {
        transform: translateX(330%);
    }
}

.dfu-progress {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(31, 42, 35, 0.12);
    overflow: hidden;
}

.dfu-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f6feb, #00b894);
    transition: width 0.2s ease;
}

.dfu-progress-text {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.8);
}

.import-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 24, 19, 0.5);
    display: grid;
    place-items: center;
    padding: 24px 16px;
    z-index: 1250; /* above the pending-changes bar (1200): on phones the bar covered the dialog footer */
}

.import-preview-dialog {
    width: min(960px, 100%);
    max-height: 88vh;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(82, 115, 94, 0.25);
    box-shadow: var(--sp-shadow);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.import-preview-header {
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(82, 115, 94, 0.18);
    background: rgba(245, 247, 243, 0.85);
}

.import-preview-header h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.import-preview-header p {
    margin: 0;
    color: rgba(31, 42, 35, 0.7);
    font-size: 13px;
}

.import-preview-note {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 209, 102, 0.22);
    color: #8a5800;
    font-size: 12px;
    font-weight: 600;
}

.import-preview-body {
    padding: 14px 20px 6px;
    overflow: auto;
}

.import-preview-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.7);
    margin-bottom: 10px;
}

.import-preview-progress {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(82, 115, 94, 0.2);
}

.import-preview-progress-text {
    font-size: 13px;
    font-weight: 600;
    color: rgba(31, 42, 35, 0.8);
    margin-bottom: 8px;
}

.import-preview-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(31, 42, 35, 0.08);
    overflow: hidden;
    margin-bottom: 10px;
}

.import-preview-progress-bar div {
    height: 100%;
    width: 0%;
    background: linear-gradient(145deg, var(--sp-forest), var(--sp-forest-dark));
    transition: width 0.2s ease;
}

.import-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.import-preview-table th,
.import-preview-table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(82, 115, 94, 0.18);
    vertical-align: top;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.import-preview-table th {
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(31, 42, 35, 0.7);
}

.import-preview-setting {
    font-weight: 600;
    margin-bottom: 2px;
}

.import-preview-meta {
    font-size: 12px;
    color: rgba(31, 42, 35, 0.6);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.import-preview-desc {
    font-size: 12px;
    margin-top: 6px;
    color: rgba(31, 42, 35, 0.65);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.import-preview-list {
    margin: 0;
    padding-left: 18px;
    color: rgba(31, 42, 35, 0.85);
}

.import-preview-list li {
    margin-bottom: 4px;
}

.import-preview-value {
    display: grid;
    gap: 4px;
}

.import-preview-subvalue {
    font-size: 12px;
    color: rgba(31, 42, 35, 0.55);
}

.import-preview-muted {
    color: rgba(31, 42, 35, 0.6);
}

.import-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.import-preview-tags span {
    background: rgba(144, 174, 155, 0.22);
    border-radius: var(--radius-pill);
    padding: 4px 8px;
    font-size: 12px;
}

.import-preview-tags .import-preview-tag-added {
    background: rgba(45, 106, 79, 0.22);
    color: #1f4f3b;
}

.import-preview-tags .import-preview-tag-removed {
    background: rgba(155, 75, 63, 0.2);
    color: #6b2f25;
    text-decoration: line-through;
}

.import-preview-checkboxes {
    display: grid;
    gap: 6px 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.import-preview-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(31, 42, 35, 0.85);
    min-width: 0;
}

.import-preview-checkbox input {
    margin: 0;
    flex: 0 0 auto;
}

.import-preview-checkbox label {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.import-preview-checkbox.import-preview-tag-added label {
    color: #1f4f3b;
    font-weight: 600;
}

.import-preview-checkbox.import-preview-tag-removed label {
    color: #6b2f25;
    text-decoration: line-through;
}

.import-preview-mono {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-size: 12px;
}

.import-preview-empty {
    color: rgba(31, 42, 35, 0.55);
}

.import-preview-bool {
    font-weight: 600;
    text-transform: lowercase;
}

.import-preview-bool-true {
    color: #2d6a4f;
}

.import-preview-bool-false {
    color: #9b4b3f;
}

.import-preview-footer {
    padding: 14px 20px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(82, 115, 94, 0.18);
    background: rgba(245, 247, 243, 0.85);
}

.import-preview-unchanged {
    background: rgba(144, 174, 155, 0.08);
}

.import-preview-cell-unchanged {
    color: rgba(31, 42, 35, 0.65);
}

.import-preview-unchanged-tag {
    display: inline-flex;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(144, 174, 155, 0.18);
    font-size: 11px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: rgba(31, 42, 35, 0.6);
}

.import-preview-change-tag {
    display: inline-flex;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 209, 102, 0.22);
    color: #8a5800;
    font-size: 11px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    font-weight: 600;
}

.import-preview-change-tag.updated {
    background: rgba(30, 123, 58, 0.12);
    color: #1e7b3a;
}

.import-preview-change-tag.error {
    background: rgba(180, 35, 24, 0.12);
    color: #b42318;
}

#main-commands button {
    margin: 0;
}

/* The device reports a LoRaWAN join error: the Join button stands out like Reboot does. */
#main-commands button.join-needed-button {
    background: linear-gradient(145deg, #d98b1f, #b46a0c);
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(180, 106, 12, 0.25);
}

#main-commands button.join-needed-button:hover {
    background: linear-gradient(145deg, #e39a33, #a05e08);
}

.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon.ble-scan {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><g transform="translate(32 0)"><path d="M292.6 171.1L249.7 214l-.3-86 43.2 43.1m-43.2 219.8l43.1-43.1-42.9-42.9-.2 86zM416 259.4C416 465 344.1 512 230.9 512S32 465 32 259.4 115.4 0 228.6 0 416 53.9 416 259.4zm-158.5 0l79.4-88.6L211.8 36.5v176.9L138 139.6l-27 26.9 92.7 93-92.7 93 26.9 26.9 73.8-73.8 2.3 170 127.4-127.5-83.9-88.7z"/></g></svg>');
}

.icon.hw-version {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M176 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c-35.3 0-64 28.7-64 64l-40 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l40 0 0 56-40 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l40 0 0 56-40 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l40 0c0 35.3 28.7 64 64 64l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40 56 0 0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40 56 0 0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40c35.3 0 64-28.7 64-64l40 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0 0-56 40 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0 0-56 40 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0c0-35.3-28.7-64-64-64l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40-56 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40-56 0 0-40zM160 128l192 0c17.7 0 32 14.3 32 32l0 192c0 17.7-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32l0-192c0-17.7 14.3-32 32-32zm192 32l-192 0 0 192 192 0 0-192z"/></svg>');
}

.icon.fw-version {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416l288 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>');
}

.icon.uptime {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M176 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l16 0 0 34.4C92.3 113.8 16 200 16 304c0 114.9 93.1 208 208 208s208-93.1 208-208c0-41.8-12.3-80.7-33.5-113.2l24.1-24.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L355.7 143c-28.1-23-62.2-38.8-99.7-44.6L256 64l16 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L224 0 176 0zm72 192l0 128c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-128c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>');
}

.icon.temperature {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c-26.5 0-48 21.5-48 48l0 164.5c0 17.3-7.1 31.9-15.3 42.5C86.2 332.6 80 349.5 80 368c0 44.2 35.8 80 80 80s80-35.8 80-80c0-18.5-6.2-35.4-16.7-48.9c-8.2-10.6-15.3-25.2-15.3-42.5L208 112c0-26.5-21.5-48-48-48zM48 112C48 50.2 98.1 0 160 0s112 50.1 112 112l0 164.4c0 .1 .1 .3 .2 .6c.2 .6 .8 1.6 1.7 2.8c18.9 24.4 30.1 55 30.1 88.1c0 79.5-64.5 144-144 144S16 447.5 16 368c0-33.2 11.2-63.8 30.1-88.1c.9-1.2 1.5-2.2 1.7-2.8c.1-.3 .2-.5 .2-.6L48 112zM208 368c0 26.5-21.5 48-48 48s-48-21.5-48-48c0-20.9 13.4-38.7 32-45.3L144 144c0-8.8 7.2-16 16-16s16 7.2 16 16l0 178.7c18.6 6.6 32 24.4 32 45.3z"/></svg>');
}

.icon.hw-type {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 80L0 229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7L48 32C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>');
}

.icon.messages {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>');
}

.icon.battery {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M464 160c8.8 0 16 7.2 16 16l0 160c0 8.8-7.2 16-16 16L80 352c-8.8 0-16-7.2-16-16l0-160c0-8.8 7.2-16 16-16l384 0zM80 96C35.8 96 0 131.8 0 176L0 336c0 44.2 35.8 80 80 80l384 0c44.2 0 80-35.8 80-80l0-16c17.7 0 32-14.3 32-32l0-64c0-17.7-14.3-32-32-32l0-16c0-44.2-35.8-80-80-80L80 96zm368 96L96 192l0 128 352 0 0-128z"/></svg>');
}

.icon.charging {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288l111.5 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7l-111.5 0L349.4 44.6z"/></svg>');
}

.icon.accelerometer {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z"/></svg>');
}

.icon.locked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"/></svg>');
}

.icon.errors {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>');
}

.icon.reset {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 224c0 17.7 14.3 32 32 32s32-14.3 32-32l0-224zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z"/></svg>');
}

.icon.refresh {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>');
}

.icon.close {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>');
}

.icon.toggle-log {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 0c53 0 96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4l112 0c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5l64.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6L272 240c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 239.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64.3 0c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"/></svg>');
}

.icon.ublox-time {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>');
}

.icon.ublox-location {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>');
}

.icon.electric-fence {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" fill=\"none\" stroke=\"black\" stroke-width=\"26\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M96 88V424\"/><path d=\"M256 88V424\"/><path d=\"M416 88V424\"/><path d=\"M80 160H432\"/><path d=\"M80 256H432\"/><path d=\"M80 352H432\"/><path d=\"M292 116L212 264H276L220 396L332 232H260L292 116Z\" fill=\"black\" stroke=\"black\"/></svg>');
}

.icon.square-poll-horizontal {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><rect x=\"32\" y=\"32\" width=\"448\" height=\"448\" rx=\"48\" ry=\"48\" fill=\"none\" stroke=\"black\" stroke-width=\"32\"/><rect x=\"128\" y=\"160\" width=\"256\" height=\"48\" rx=\"8\" fill=\"black\"/><rect x=\"128\" y=\"240\" width=\"192\" height=\"48\" rx=\"8\" fill=\"black\"/><rect x=\"128\" y=\"320\" width=\"144\" height=\"48\" rx=\"8\" fill=\"black\"/></svg>');
}

.icon.square-caret-up {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><rect x=\"32\" y=\"32\" width=\"384\" height=\"448\" rx=\"48\" ry=\"48\" fill=\"none\" stroke=\"black\" stroke-width=\"32\"/><path d=\"M224 168L112 280h224L224 168z\" fill=\"black\"/></svg>');
}

.icon.house {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M288 0L0 240h48v240h176V336h128v144h176V240h48L288 0z\" fill=\"black\"/></svg>');
}

.icon.bluetooth {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M388.6%20235.1L345.7%20278L345.4%20192L388.6%20235.1zM345.4%20454.9L388.5%20411.8L345.6%20368.9L345.4%20454.9zM512%20323.4C512%20529%20440.1%20576%20326.9%20576C213.7%20576%20128%20529%20128%20323.4C128%20117.8%20211.4%2064%20324.6%2064C437.8%2064%20512%20117.9%20512%20323.4zM353.5%20323.4L432.9%20234.8L307.8%20100.5L307.8%20277.4L234%20203.6L207%20230.5L299.7%20323.5L207%20416.5L233.9%20443.4L307.7%20369.6L310%20539.6L437.4%20412.1L353.5%20323.4z%22/%3E%3C/svg%3E');
}

.icon.wifi-scan {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%20fill=%22none%22%20stroke=%22%231f2a23%22%20stroke-width=%2244%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M128%20272C234.1%20177.3%20405.9%20177.3%20512%20272%22/%3E%3Cpath%20d=%22M208%20352C270.9%20299%20369.1%20299%20432%20352%22/%3E%3Cpath%20d=%22M272%20432C301.9%20409.4%20338.1%20409.4%20368%20432%22/%3E%3Ccircle%20cx=%22320%22%20cy=%22496%22%20r=%2232%22%20fill=%22%231f2a23%22%20stroke=%22none%22/%3E%3Cpath%20d=%22M480%20168L532%20168%22/%3E%3Cpath%20d=%22M506%20142L506%20194%22/%3E%3C/svg%3E');
}

.icon.heart-pulse {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%20fill=%22none%22%20stroke=%22%231f2a23%22%20stroke-width=%2248%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M320%20536C206%20461.8%20136%20399.2%2097.5%20344.8C66.7%20301.3%2053.9%20255.4%2064.8%20209.6C82.1%20136.7%20146.1%2088%20212.4%2088C254.9%2088%20294%20108.1%20320%20140.7C346%20108.1%20385.1%2088%20427.6%2088C493.9%2088%20557.9%20136.7%20575.2%20209.6C586.1%20255.4%20573.3%20301.3%20542.5%20344.8C504%20399.2%20434%20461.8%20320%20536z%22/%3E%3Cpath%20d=%22M168%20328L244%20328L282%20258L336%20394L388%20278L472%20278%22/%3E%3C/svg%3E');
}

.icon.gears {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M415.9%20274.5C428.1%20271.2%20440.9%20277%20446.4%20288.3L465%20325.9C475.3%20327.3%20485.4%20330.1%20494.9%20334L529.9%20310.7C540.4%20303.7%20554.3%20305.1%20563.2%20314L582.4%20333.2C591.3%20342.1%20592.7%20356.1%20585.7%20366.5L562.4%20401.4C564.3%20406.1%20566%20411%20567.4%20416.1C568.8%20421.2%20569.7%20426.2%20570.4%20431.3L608.1%20449.9C619.4%20455.5%20625.2%20468.3%20621.9%20480.4L614.9%20506.6C611.6%20518.7%20600.3%20526.9%20587.7%20526.1L545.7%20523.4C539.4%20531.5%20532.1%20539%20523.8%20545.4L526.5%20587.3C527.3%20599.9%20519.1%20611.3%20507%20614.5L480.8%20621.5C468.6%20624.8%20455.9%20619%20450.3%20607.7L431.7%20570.1C421.4%20568.7%20411.3%20565.9%20401.8%20562L366.8%20585.3C356.3%20592.3%20342.4%20590.9%20333.5%20582L314.3%20562.8C305.4%20553.9%20304%20540%20311%20529.5L334.3%20494.5C332.4%20489.8%20330.7%20484.9%20329.3%20479.8C327.9%20474.7%20327%20469.6%20326.3%20464.6L288.6%20446C277.3%20440.4%20271.6%20427.6%20274.8%20415.5L281.8%20389.3C285.1%20377.2%20296.4%20369%20309%20369.8L350.9%20372.5C357.2%20364.4%20364.5%20356.9%20372.8%20350.5L370.1%20308.7C369.3%20296.1%20377.5%20284.7%20389.6%20281.5L415.8%20274.5zM448.4%20404C424.1%20404%20404.4%20423.7%20404.5%20448.1C404.5%20472.4%20424.2%20492%20448.5%20492C472.8%20492%20492.5%20472.3%20492.5%20448C492.4%20423.6%20472.7%20404%20448.4%20404zM224.9%2018.5L251.1%2025.5C263.2%2028.8%20271.4%2040.2%20270.6%2052.7L267.9%2094.5C276.2%20100.9%20283.5%20108.3%20289.8%20116.5L331.8%20113.8C344.3%20113%20355.7%20121.2%20359%20133.3L366%20159.5C369.2%20171.6%20363.5%20184.4%20352.2%20190L314.5%20208.6C313.8%20213.7%20312.8%20218.8%20311.5%20223.8C310.2%20228.8%20308.4%20233.8%20306.5%20238.5L329.8%20273.5C336.8%20284%20335.4%20297.9%20326.5%20306.8L307.3%20326C298.4%20334.9%20284.5%20336.3%20274%20329.3L239%20306C229.5%20309.9%20219.4%20312.7%20209.1%20314.1L190.5%20351.7C184.9%20363%20172.1%20368.7%20160%20365.5L133.8%20358.5C121.6%20355.2%20113.5%20343.8%20114.3%20331.3L117%20289.4C108.7%20283%20101.4%20275.6%2095.1%20267.4L53.1%20270.1C40.6%20270.9%2029.2%20262.7%2025.9%20250.6L18.9%20224.4C15.7%20212.3%2021.4%20199.5%2032.7%20193.9L70.4%20175.3C71.1%20170.2%2072.1%20165.2%2073.4%20160.1C74.8%20155%2076.4%20150.1%2078.4%20145.4L55.1%20110.5C48.1%20100%2049.5%2086.1%2058.4%2077.2L77.6%2058C86.5%2049.1%20100.4%2047.7%20110.9%2054.7L145.9%2078C155.4%2074.1%20165.5%2071.3%20175.8%2069.9L194.4%2032.3C200%2021%20212.7%2015.3%20224.9%2018.5zM192.4%20148C168.1%20148%20148.4%20167.7%20148.4%20192C148.4%20216.3%20168.1%20236%20192.4%20236C216.7%20236%20236.4%20216.3%20236.4%20192C236.4%20167.7%20216.7%20148%20192.4%20148z%22/%3E%3C/svg%3E');
}

.icon.keyboard {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M96%20128C60.7%20128%2032%20156.7%2032%20192L32%20448C32%20483.3%2060.7%20512%2096%20512L544%20512C579.3%20512%20608%20483.3%20608%20448L608%20192C608%20156.7%20579.3%20128%20544%20128L96%20128zM112%20192L144%20192C152.8%20192%20160%20199.2%20160%20208L160%20240C160%20248.8%20152.8%20256%20144%20256L112%20256C103.2%20256%2096%20248.8%2096%20240L96%20208C96%20199.2%20103.2%20192%20112%20192zM96%20304C96%20295.2%20103.2%20288%20112%20288L144%20288C152.8%20288%20160%20295.2%20160%20304L160%20336C160%20344.8%20152.8%20352%20144%20352L112%20352C103.2%20352%2096%20344.8%2096%20336L96%20304zM208%20192L240%20192C248.8%20192%20256%20199.2%20256%20208L256%20240C256%20248.8%20248.8%20256%20240%20256L208%20256C199.2%20256%20192%20248.8%20192%20240L192%20208C192%20199.2%20199.2%20192%20208%20192zM192%20304C192%20295.2%20199.2%20288%20208%20288L240%20288C248.8%20288%20256%20295.2%20256%20304L256%20336C256%20344.8%20248.8%20352%20240%20352L208%20352C199.2%20352%20192%20344.8%20192%20336L192%20304zM208%20384L432%20384C440.8%20384%20448%20391.2%20448%20400L448%20432C448%20440.8%20440.8%20448%20432%20448L208%20448C199.2%20448%20192%20440.8%20192%20432L192%20400C192%20391.2%20199.2%20384%20208%20384zM288%20208C288%20199.2%20295.2%20192%20304%20192L336%20192C344.8%20192%20352%20199.2%20352%20208L352%20240C352%20248.8%20344.8%20256%20336%20256L304%20256C295.2%20256%20288%20248.8%20288%20240L288%20208zM304%20288L336%20288C344.8%20288%20352%20295.2%20352%20304L352%20336C352%20344.8%20344.8%20352%20336%20352L304%20352C295.2%20352%20288%20344.8%20288%20336L288%20304C288%20295.2%20295.2%20288%20304%20288zM384%20208C384%20199.2%20391.2%20192%20400%20192L432%20192C440.8%20192%20448%20199.2%20448%20208L448%20240C448%20248.8%20440.8%20256%20432%20256L400%20256C391.2%20256%20384%20248.8%20384%20240L384%20208zM400%20288L432%20288C440.8%20288%20448%20295.2%20448%20304L448%20336C448%20344.8%20440.8%20352%20432%20352L400%20352C391.2%20352%20384%20344.8%20384%20336L384%20304C384%20295.2%20391.2%20288%20400%20288zM480%20208C480%20199.2%20487.2%20192%20496%20192L528%20192C536.8%20192%20544%20199.2%20544%20208L544%20240C544%20248.8%20536.8%20256%20528%20256L496%20256C487.2%20256%20480%20248.8%20480%20240L480%20208zM496%20288L528%20288C536.8%20288%20544%20295.2%20544%20304L544%20336C544%20344.8%20536.8%20352%20528%20352L496%20352C487.2%20352%20480%20344.8%20480%20336L480%20304C480%20295.2%20487.2%20288%20496%20288z%22/%3E%3C/svg%3E');
}

.icon.square-poll-horizontal {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M544%20160C544%20124.7%20515.3%2096%20480%2096L160%2096C124.7%2096%2096%20124.7%2096%20160L96%20480C96%20515.3%20124.7%20544%20160%20544L480%20544C515.3%20544%20544%20515.3%20544%20480L544%20160zM352%20216C352%20229.3%20341.3%20240%20328%20240L216%20240C202.7%20240%20192%20229.3%20192%20216C192%20202.7%20202.7%20192%20216%20192L328%20192C341.3%20192%20352%20202.7%20352%20216zM424%20296C437.3%20296%20448%20306.7%20448%20320C448%20333.3%20437.3%20344%20424%20344L216%20344C202.7%20344%20192%20333.3%20192%20320C192%20306.7%20202.7%20296%20216%20296L424%20296zM288%20424C288%20437.3%20277.3%20448%20264%20448L216%20448C202.7%20448%20192%20437.3%20192%20424C192%20410.7%20202.7%20400%20216%20400L264%20400C277.3%20400%20288%20410.7%20288%20424z%22/%3E%3C/svg%3E');
}

.icon.power-off {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M352%2064C352%2046.3%20337.7%2032%20320%2032C302.3%2032%20288%2046.3%20288%2064L288%20320C288%20337.7%20302.3%20352%20320%20352C337.7%20352%20352%20337.7%20352%20320L352%2064zM210.3%20162.4C224.8%20152.3%20228.3%20132.3%20218.2%20117.8C208.1%20103.3%20188.1%2099.8%20173.6%20109.9C107.4%20156.1%2064%20233%2064%20320C64%20461.4%20178.6%20576%20320%20576C461.4%20576%20576%20461.4%20576%20320C576%20233%20532.6%20156.1%20466.3%20109.9C451.8%2099.8%20431.9%20103.3%20421.7%20117.8C411.5%20132.3%20415.1%20152.2%20429.6%20162.4C479.4%20197.2%20511.9%20254.8%20511.9%20320C511.9%20426%20425.9%20512%20319.9%20512C213.9%20512%20128%20426%20128%20320C128%20254.8%20160.5%20197.1%20210.3%20162.4z%22/%3E%3C/svg%3E');
}

.icon.bug {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M224%20160C224%20107%20267%2064%20320%2064C373%2064%20416%20107%20416%20160L416%20163.6C416%20179.3%20403.3%20192%20387.6%20192L252.5%20192C236.8%20192%20224.1%20179.3%20224.1%20163.6L224.1%20160zM569.6%20172.8C580.2%20186.9%20577.3%20207%20563.2%20217.6L465.4%20290.9C470.7%20299.8%20474.7%20309.6%20477.2%20320L576%20320C593.7%20320%20608%20334.3%20608%20352C608%20369.7%20593.7%20384%20576%20384L480%20384L480%20416C480%20418.6%20479.9%20421.3%20479.8%20423.9L563.2%20486.4C577.3%20497%20580.2%20517.1%20569.6%20531.2C559%20545.3%20538.9%20548.2%20524.8%20537.6L461.7%20490.3C438.5%20534.5%20395.2%20566.5%20344%20574.2L344%20344C344%20330.7%20333.3%20320%20320%20320C306.7%20320%20296%20330.7%20296%20344L296%20574.2C244.8%20566.5%20201.5%20534.5%20178.3%20490.3L115.2%20537.6C101.1%20548.2%2081%20545.3%2070.4%20531.2C59.8%20517.1%2062.7%20497%2076.8%20486.4L160.2%20423.9C160.1%20421.3%20160%20418.7%20160%20416L160%20384L64%20384C46.3%20384%2032%20369.7%2032%20352C32%20334.3%2046.3%20320%2064%20320L162.8%20320C165.3%20309.6%20169.3%20299.8%20174.6%20290.9L76.8%20217.6C62.7%20207%2059.8%20186.9%2070.4%20172.8C81%20158.7%20101.1%20155.8%20115.2%20166.4L224%20248C236.3%20242.9%20249.8%20240%20264%20240L376%20240C390.2%20240%20403.7%20242.8%20416%20248L524.8%20166.4C538.9%20155.8%20559%20158.7%20569.6%20172.8z%22/%3E%3C/svg%3E');
}

.icon.book {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M480%20576L192%20576C139%20576%2096%20533%2096%20480L96%20160C96%20107%20139%2064%20192%2064L496%2064C522.5%2064%20544%2085.5%20544%20112L544%20400C544%20420.9%20530.6%20438.7%20512%20445.3L512%20512C529.7%20512%20544%20526.3%20544%20544C544%20561.7%20529.7%20576%20512%20576L480%20576zM192%20448C174.3%20448%20160%20462.3%20160%20480C160%20497.7%20174.3%20512%20192%20512L448%20512L448%20448L192%20448zM224%20216C224%20229.3%20234.7%20240%20248%20240L424%20240C437.3%20240%20448%20229.3%20448%20216C448%20202.7%20437.3%20192%20424%20192L248%20192C234.7%20192%20224%20202.7%20224%20216zM248%20288C234.7%20288%20224%20298.7%20224%20312C224%20325.3%20234.7%20336%20248%20336L424%20336C437.3%20336%20448%20325.3%20448%20312C448%20298.7%20437.3%20288%20424%20288L248%20288z%22/%3E%3C/svg%3E');
}

.icon.circle-info {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20fill=%22black%22%20d=%22M256%20512C114.6%20512%200%20397.4%200%20256S114.6%200%20256%200s256%20114.6%20256%20256S397.4%20512%20256%20512zm0-384c-26.5%200-48%2021.5-48%2048s21.5%2048%2048%2048%2048-21.5%2048-48-21.5-48-48-48zm64%20264c0%208.8-7.2%2016-16%2016h-32v-96c0-8.8-7.2-16-16-16h-32c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016h16v80h-16c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016h80c8.8%200%2016-7.2%2016-16z%22/%3E%3C/svg%3E');
}

.icon.envelope {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M112%20128C85.5%20128%2064%20149.5%2064%20176C64%20191.1%2071.1%20205.3%2083.2%20214.4L291.2%20370.4C308.3%20383.2%20331.7%20383.2%20348.8%20370.4L556.8%20214.4C568.9%20205.3%20576%20191.1%20576%20176C576%20149.5%20554.5%20128%20528%20128L112%20128zM64%20260L64%20448C64%20483.3%2092.7%20512%20128%20512L512%20512C547.3%20512%20576%20483.3%20576%20448L576%20260L377.6%20408.8C343.5%20434.4%20296.5%20434.4%20262.4%20408.8L64%20260z%22/%3E%3C/svg%3E');
}

.icon.bars {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M64%20144C64%20126.3%2078.3%20112%2096%20112L544%20112C561.7%20112%20576%20126.3%20576%20144C576%20161.7%20561.7%20176%20544%20176L96%20176C78.3%20176%2064%20161.7%2064%20144zM64%20320C64%20302.3%2078.3%20288%2096%20288L544%20288C561.7%20288%20576%20302.3%20576%20320C576%20337.7%20561.7%20352%20544%20352L96%20352C78.3%20352%2064%20337.7%2064%20320zM96%20464C78.3%20464%2064%20449.7%2064%20432C64%20414.3%2078.3%20400%2096%20400L544%20400C561.7%20400%20576%20414.3%20576%20432C576%20449.7%20561.7%20464%20544%20464L96%20464z%22/%3E%3C/svg%3E');
}

.icon.gear {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M259.1%2073.5C262.1%2058.7%20275.2%2048%20290.4%2048L350.2%2048C365.4%2048%20378.5%2058.7%20381.5%2073.5L396%20143.5C410.1%20149.5%20423.3%20157.2%20435.3%20166.3L503.1%20143.8C517.5%20139%20533.3%20145%20540.9%20158.2L570.8%20210C578.4%20223.2%20575.7%20239.8%20564.3%20249.9L511%20297.3C511.9%20304.7%20512.3%20312.3%20512.3%20320C512.3%20327.7%20511.8%20335.3%20511%20342.7L564.4%20390.2C575.8%20400.3%20578.4%20417%20570.9%20430.1L541%20481.9C533.4%20495%20517.6%20501.1%20503.2%20496.3L435.4%20473.8C423.3%20482.9%20410.1%20490.5%20396.1%20496.6L381.7%20566.5C378.6%20581.4%20365.5%20592%20350.4%20592L290.6%20592C275.4%20592%20262.3%20581.3%20259.3%20566.5L244.9%20496.6C230.8%20490.6%20217.7%20482.9%20205.6%20473.8L137.5%20496.3C123.1%20501.1%20107.3%20495.1%2099.7%20481.9L69.8%20430.1C62.2%20416.9%2064.9%20400.3%2076.3%20390.2L129.7%20342.7C128.8%20335.3%20128.4%20327.7%20128.4%20320C128.4%20312.3%20128.9%20304.7%20129.7%20297.3L76.3%20249.8C64.9%20239.7%2062.3%20223%2069.8%20209.9L99.7%20158.1C107.3%20144.9%20123.1%20138.9%20137.5%20143.7L205.3%20166.2C217.4%20157.1%20230.6%20149.5%20244.6%20143.4L259.1%2073.5zM320.3%20400C364.5%20399.8%20400.2%20363.9%20400%20319.7C399.8%20275.5%20363.9%20239.8%20319.7%20240C275.5%20240.2%20239.8%20276.1%20240%20320.3C240.2%20364.5%20276.1%20400.2%20320.3%20400z%22/%3E%3C/svg%3E');
}

.icon.play {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M187.2%20100.9C174.8%2094.1%20159.8%2094.4%20147.6%20101.6C135.4%20108.8%20128%20121.9%20128%20136L128%20504C128%20518.1%20135.5%20531.2%20147.6%20538.4C159.7%20545.6%20174.8%20545.9%20187.2%20539.1L523.2%20355.1C536%20348.1%20544%20334.6%20544%20320C544%20305.4%20536%20291.9%20523.2%20284.9L187.2%20100.9z%22/%3E%3C/svg%3E');
}

.icon.location-dot {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M128%20252.6C128%20148.4%20214%2064%20320%2064C426%2064%20512%20148.4%20512%20252.6C512%20371.9%20391.8%20514.9%20341.6%20569.4C329.8%20582.2%20310.1%20582.2%20298.3%20569.4C248.1%20514.9%20127.9%20371.9%20127.9%20252.6zM320%20320C355.3%20320%20384%20291.3%20384%20256C384%20220.7%20355.3%20192%20320%20192C284.7%20192%20256%20220.7%20256%20256C256%20291.3%20284.7%20320%20320%20320z%22/%3E%3C/svg%3E');
}

.icon.tachograph-digital {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M32%20192C32%20156.7%2060.7%20128%2096%20128L544%20128C579.3%20128%20608%20156.7%20608%20192L608%20448C608%20483.3%20579.3%20512%20544%20512L96%20512C60.7%20512%2032%20483.3%2032%20448L32%20192zM96%20224L96%20256C96%20273.7%20110.3%20288%20128%20288L288%20288C305.7%20288%20320%20273.7%20320%20256L320%20224C320%20206.3%20305.7%20192%20288%20192L128%20192C110.3%20192%2096%20206.3%2096%20224zM120%20416C106.7%20416%2096%20426.7%2096%20440C96%20453.3%20106.7%20464%20120%20464L256%20464C269.3%20464%20280%20453.3%20280%20440C280%20426.7%20269.3%20416%20256%20416L120%20416zM376%20416C362.7%20416%20352%20426.7%20352%20440C352%20453.3%20362.7%20464%20376%20464L520%20464C533.3%20464%20544%20453.3%20544%20440C544%20426.7%20533.3%20416%20520%20416L376%20416zM528%20256C528%20220.7%20499.3%20192%20464%20192C428.7%20192%20400%20220.7%20400%20256C400%20291.3%20428.7%20320%20464%20320C499.3%20320%20528%20291.3%20528%20256zM120%20376C133.3%20376%20144%20365.3%20144%20352C144%20338.7%20133.3%20328%20120%20328C106.7%20328%2096%20338.7%2096%20352C96%20365.3%20106.7%20376%20120%20376zM224%20352C224%20338.7%20213.3%20328%20200%20328C186.7%20328%20176%20338.7%20176%20352C176%20365.3%20186.7%20376%20200%20376C213.3%20376%20224%20365.3%20224%20352zM280%20376C293.3%20376%20304%20365.3%20304%20352C304%20338.7%20293.3%20328%20280%20328C266.7%20328%20256%20338.7%20256%20352C256%20365.3%20266.7%20376%20280%20376z%22/%3E%3C/svg%3E');
}

.icon.file {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M192%2064C156.7%2064%20128%2092.7%20128%20128L128%20512C128%20547.3%20156.7%20576%20192%20576L448%20576C483.3%20576%20512%20547.3%20512%20512L512%20234.5C512%20217.5%20505.3%20201.2%20493.3%20189.2L386.7%2082.7C374.7%2070.7%20358.5%2064%20341.5%2064L192%2064zM453.5%20240L360%20240C346.7%20240%20336%20229.3%20336%20216L336%20122.5L453.5%20240z%22/%3E%3C/svg%3E');
}

.icon.file-arrow-down {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>');
}

.icon.file-arrow-up {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 408c0 13.3-10.7 24-24 24s-24-10.7-24-24V305.9l-31 31c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l72-72c9.4-9.4 24.6-9.4 33.9 0l72 72c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-31-31V408z"/></svg>');
}

.icon.screwdriver-wrench {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M102.8%2057.3C108.2%2051.9%20116.6%2051.1%20123%2055.3L241.9%20134.5C250.8%20140.4%20256.1%20150.4%20256.1%20161.1L256.1%20210.7L346.9%20301.5C380.2%20286.5%20420.8%20292.6%20448.1%20320L574.2%20446.1C592.9%20464.8%20592.9%20495.2%20574.2%20514L514.1%20574.1C495.4%20592.8%20465%20592.8%20446.2%20574.1L320.1%20448C292.7%20420.6%20286.6%20380.1%20301.6%20346.8L210.8%20256L161.2%20256C150.5%20256%20140.5%20250.7%20134.6%20241.8L55.4%20122.9C51.2%20116.6%2052%20108.1%2057.4%20102.7L102.8%2057.3zM247.8%20360.8C241.5%20397.7%20250.1%20436.7%20274%20468L179.1%20563C151%20591.1%20105.4%20591.1%2077.3%20563C49.2%20534.9%2049.2%20489.3%2077.3%20461.2L212.7%20325.7L247.9%20360.8zM416.1%2064C436.2%2064%20455.5%2067.7%20473.2%2074.5C483.2%2078.3%20485%2091%20477.5%2098.6L420.8%20155.3C417.8%20158.3%20416.1%20162.4%20416.1%20166.6L416.1%20208C416.1%20216.8%20423.3%20224%20432.1%20224L473.5%20224C477.7%20224%20481.8%20222.3%20484.8%20219.3L541.5%20162.6C549.1%20155.1%20561.8%20156.9%20565.6%20166.9C572.4%20184.6%20576.1%20203.9%20576.1%20224C576.1%20267.2%20558.9%20306.3%20531.1%20335.1L482%20286C448.9%20253%20403.5%20240.3%20360.9%20247.6L304.1%20190.8L304.1%20161.1L303.9%20156.1C303.1%20143.7%20299.5%20131.8%20293.4%20121.2C322.8%2086.2%20366.8%2064%20416.1%2063.9z%22/%3E%3C/svg%3E');
}

.icon.copy {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M288%2064C252.7%2064%20224%2092.7%20224%20128L224%20384C224%20419.3%20252.7%20448%20288%20448L480%20448C515.3%20448%20544%20419.3%20544%20384L544%20183.4C544%20166%20536.9%20149.3%20524.3%20137.2L466.6%2081.8C454.7%2070.4%20438.8%2064%20422.3%2064L288%2064zM160%20192C124.7%20192%2096%20220.7%2096%20256L96%20512C96%20547.3%20124.7%20576%20160%20576L352%20576C387.3%20576%20416%20547.3%20416%20512L416%20496L352%20496L352%20512L160%20512L160%20256L176%20256L176%20192L160%20192z%22/%3E%3C/svg%3E');
}

.icon.github {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20496%20512%22%20fill=%22%231f2a23%22%3E%3Cpath%20d=%22M248%208C111%208%200%20119%200%20256c0%20110.9%2071.8%20205%20171.4%20238.2c12.5%202.3%2017.1-5.4%2017.1-12v-42.2c-69.7%2015.2-84.4-29.6-84.4-29.6c-11.4-29-27.8-36.7-27.8-36.7c-22.7-15.5%201.7-15.2%201.7-15.2c25.1%201.8%2038.3%2025.8%2038.3%2025.8c22.3%2038.3%2058.6%2027.2%2072.9%2020.8c2.2-16.2%208.7-27.2%2015.8-33.4c-55.7-6.3-114.2-27.8-114.2-123.7c0-27.3%209.8-49.6%2025.8-67.1c-2.6-6.3-11.2-31.7%202.5-66.1c0%200%2021.1-6.8%2069.2%2025.6c20.1-5.6%2041.6-8.4%2063-8.5c21.4%20.1%2042.9%202.9%2063%208.5c48.1-32.4%2069.1-25.6%2069.1-25.6c13.8%2034.4%205.1%2059.8%202.5%2066.1c16.1%2017.5%2025.8%2039.8%2025.8%2067.1c0%2096.1-58.6%20117.3-114.5%20123.5c9%207.8%2017%2023.2%2017%2046.8v69.3c0%206.7%204.5%2014.4%2017.2%2012C424.2%20461%20496%20366.9%20496%20256C496%20119%20385%208%20248%208z%22/%3E%3C/svg%3E');
}

.log-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(31, 42, 35, 0.98), rgba(52, 71, 58, 0.98));
    color: white;
    transition: transform 0.3s ease;
    transform: translateY(100%);
    z-index: 1301;
}

.log-footer.open {
    transform: translateY(0);
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.log-header .icon {
    filter: invert(1);
}

.log-header .icon.close {
    filter: none;
}

.log-header-actions .icon {
    cursor: pointer;
}

.log-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.log-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.log-content {
    height: 22vh;
    overflow-y: auto;
    padding: 12px 16px;
    font-family: monospace;
}

#toast {
    visibility: hidden;
    /* Hidden by default */
    max-width: 90%;
    min-width: 250px;
    width: auto;
    margin: 0 auto;
    background-color: rgba(31, 42, 35, 0.95);
    color: #fff;
    text-align: center;
    border-radius: var(--radius-sm);
    padding: 15px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px 16px;
    margin: 6px 0 14px;
}

/* Style the search bar */
#settings-search {
    width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid rgba(31, 42, 35, 0.18);
    border-radius: var(--radius-pill);
    background: #fff;
    box-shadow: 0 2px 10px rgba(31, 42, 35, 0.08);
}

/* Adjust layout for smaller screens */
@media (max-width: 600px) {
    #settings-search {
        flex-grow: 1;
    }
}

#settings-dropdown {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(31, 42, 35, 0.18);
    background: #fff;
}

input,
select,
textarea {
    border-radius: var(--radius-lg);
}

#pin-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 42, 35, 0.15);
}

.pincode {
    width: 120px;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(31, 42, 35, 0.15);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pincode:focus {
    outline: none;
    border-color: var(--sp-forest);
    box-shadow: 0 0 0 3px rgba(82, 115, 94, 0.18);
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(31, 42, 35, 0.98), rgba(31, 42, 35, 0.92));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

.bottom-nav a,
.bottom-nav button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 10px 6px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav .nav-logo {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.bottom-nav .nav-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
}

.bottom-nav a:hover,
.bottom-nav button:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: none;
}

.bottom-nav a:active,
.bottom-nav button:active {
    transform: translateY(1px);
}

.bottom-nav .icon {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    filter: invert(1);
    opacity: 0.95;
}

.bottom-nav .icon.toggle-log {
    filter: none;
}

.bottom-nav.nav-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 901px) {
    :root {
        --body-bottom-padding: 24px;
    }

    .bottom-nav {
        top: 50%;
        bottom: auto;
        left: auto;
        right: 16px;
        transform: translateY(-50%);
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(180deg, rgba(31, 42, 35, 0.98), rgba(31, 42, 35, 0.92));
        box-shadow: 0 16px 30px rgba(17, 28, 22, 0.28);
    }

    .bottom-nav .nav-logo {
        display: flex;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .bottom-nav .nav-logo img {
        width: 34px;
        height: 34px;
    }

    .bottom-nav a,
    .bottom-nav button {
        border-radius: var(--radius-md);
        padding: 10px 8px;
        font-size: 11px;
        letter-spacing: 0;
    }

    .bottom-nav.nav-4 {
        grid-template-columns: 1fr;
    }

    body.dfu-active .bottom-nav.dfu-keep-visible {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }
}

@media (max-width: 900px) {
    :root {
        --body-bottom-padding: 24px;
    }

    #container,
    #commands-section,
    .settings-container {
        grid-template-columns: 1fr;
    }

    #main-commands,
    .setting-controls,
    .interval-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .status-item {
        font-size: 12px;
    }

    h2 {
        font-size: 18px;
    }

    .brand {
        gap: 10px;
    }

    #dfu-button.header-tile,
    #dfu-back-top.header-tile {
        width: 46px;
        height: 46px;
        font-size: 14px;
    }

    .brand-logo {
        width: 46px;
        height: 46px;
        border-radius: var(--radius-md);
    }
}

/* Save-file dialog shown on iOS, where a Blob cannot be downloaded. */
.save-file-card {
    width: min(560px, 92vw);
}

.save-file-contents {
    width: 100%;
    min-height: 160px;
    max-height: 40vh;
    resize: vertical;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 10px;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-md);
    background: rgba(245, 247, 243, 0.9);
    color: var(--sp-ink);
    white-space: pre;
    overflow: auto;
}

/* Browser support notice in the Scan card. */
.browser-support-note {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 209, 102, 0.22);
    color: #6f4600;
    font-size: 13px;
    line-height: 1.45;
}

.browser-support-note a {
    color: inherit;
    font-weight: 600;
}

.browser-support-note.info {
    background: rgba(160, 191, 195, 0.28);
    color: var(--sp-forest-dark);
}

/* Pending setting changes bar (review-then-apply) */
.pending-changes-bar {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: rgba(31, 42, 35, 0.96);
    color: #fff;
    box-shadow: var(--sp-shadow);
    max-width: calc(100vw - 32px);
}

.pending-changes-bar.hidden {
    display: none;
}

.pending-changes-text {
    font-weight: 600;
    white-space: nowrap;
}

.pending-changes-actions {
    display: flex;
    gap: 8px;
}

.pending-changes-bar button {
    margin: 0;
}

.pending-changes-bar button.secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.pending-changes-bar.applying .pending-changes-text::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: pending-changes-spin 0.8s linear infinite;
}

@keyframes pending-changes-spin {
    to { transform: rotate(360deg); }
}

body.has-pending-changes {
    --body-bottom-padding: 96px;
}

.setting.has-pending-change {
    border-color: var(--sp-forest);
    box-shadow: inset 4px 0 0 var(--sp-forest);
}

.setting.has-pending-change .setting-heading::after {
    content: 'changed';
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--sp-forest);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.import-preview-change-tag.warning {
    background: rgba(217, 119, 6, 0.15);
    color: #92400e;
}

@media (max-width: 600px) {
    .pending-changes-bar {
        left: 16px;
        right: 16px;
        transform: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .pending-changes-actions {
        justify-content: stretch;
    }

    .pending-changes-actions button {
        flex: 1;
    }
}

/* Guided settings panels */
.panel-card .section-card-body {
    display: grid;
    gap: 14px;
}

/* Grid items default to min-width:auto, which lets long unbroken text widen the card
   past a phone screen; allow everything in a panel to shrink and wrap instead. */
.panel-card .section-card-body > *,
.panel-fields > *,
.panel-field > *,
.panel-group > * {
    min-width: 0;
}

.panel-card {
    overflow-wrap: anywhere;
}

.panel-description {
    margin: 0;
    color: rgba(31, 42, 35, 0.75);
}

.panel-summary {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: rgba(82, 115, 94, 0.12);
    border-left: 4px solid var(--sp-forest);
    font-weight: 600;
    line-height: 1.45;
}

.panel-fields {
    display: grid;
    gap: 0 24px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.panel-field {
    display: grid;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(82, 115, 94, 0.16);
    align-content: start;
}

.panel-field-mode,
.panel-field-choice {
    padding-bottom: 14px;
}

.panel-field-switch {
    grid-column: 1 / -1;
}

.panel-duration-inputs {
    display: inline-flex;
    gap: 8px;
    flex: 1 1 auto;
}

.panel-duration-inputs.hidden {
    display: none;
}

.panel-field-mode,
.panel-field-choice,
.panel-group {
    grid-column: 1 / -1;
}

.panel-field-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-field-label {
    font-weight: 700;
}

/* Beta tag after a panel or card title (LP0 offload on 8.1 development firmware). */
.panel-beta-tag {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(217, 119, 6, 0.16);
    color: #7c2d12;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

.panel-field-badge {
    display: none;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--sp-forest);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.panel-field-badge.visible {
    display: inline-block;
}

.panel-field-help {
    font-size: 13px;
    color: rgba(31, 42, 35, 0.7);
    line-height: 1.4;
}

/* Experiment: help text folded behind an "i" button in the field head (panel-renderer.js). */
.panel-info-button,
.panel-info-button:hover,
.panel-info-button:active {
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(31, 42, 35, 0.18);
    background: rgba(160, 191, 195, 0.18);
    color: rgba(31, 42, 35, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    transform: none !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.panel-info-button.is-open,
.panel-info-button.is-open:hover {
    background: var(--sp-forest);
    border-color: transparent;
    color: #fff;
}

.panel-info-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(82, 115, 94, 0.18) !important;
}

.panel-field-help-collapsible {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: rgba(160, 191, 195, 0.14);
}

.panel-field-help[hidden] {
    display: none;
}

.panel-field-reason {
    font-size: 12px;
    color: #92400e;
}

.panel-field-reason:empty,
.panel-field-warning:empty,
.panel-field-error:empty {
    display: none;
}

.panel-field-warning {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: rgba(217, 119, 6, 0.12);
    border-left: 3px solid #d97706;
    color: #7c2d12;
    font-size: 13px;
    line-height: 1.4;
}

.panel-field-error {
    font-size: 12px;
    color: #b91c1c;
    font-weight: 600;
}

.panel-field-disabled {
    opacity: 0.55;
}

.panel-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.panel-input {
    flex: 1 1 110px;
    min-width: 90px;
    padding: 8px 10px;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-md);
}

.panel-input-hour {
    flex: 0 0 90px;
}

.panel-input-mono {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
}

.panel-select {
    flex: 0 1 130px;
    min-width: 0;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-md);
}

/* A select is as wide as its longest option unless told otherwise; keep it
   inside its column so long option labels do not push into the next field. */
.panel-control > * {
    min-width: 0;
}

.panel-unit,
.panel-hint {
    font-size: 13px;
    color: rgba(31, 42, 35, 0.7);
}

.panel-hint-active {
    color: var(--sp-forest);
    font-weight: 600;
}

.panel-options {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.panel-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-lg);
    background: #fff;
    cursor: pointer;
}

.panel-option.selected {
    border-color: var(--sp-forest);
    background: rgba(82, 115, 94, 0.1);
    box-shadow: inset 0 0 0 1px var(--sp-forest);
}

.panel-option input {
    margin-top: 3px;
}

.panel-option-body {
    display: grid;
    gap: 2px;
}

.panel-option-title {
    font-weight: 700;
}

.panel-option-help {
    font-size: 12px;
    color: rgba(31, 42, 35, 0.7);
    line-height: 1.35;
}

.panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.panel-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.panel-toggle-knob {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: rgba(31, 42, 35, 0.25);
    transition: background 0.15s ease;
}

.panel-toggle-knob::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.panel-toggle input:checked + .panel-toggle-knob {
    background: var(--sp-forest);
}

.panel-toggle input:checked + .panel-toggle-knob::after {
    transform: translateX(18px);
}

.panel-toggle input:focus-visible + .panel-toggle-knob {
    outline: 2px solid var(--sp-forest);
    outline-offset: 2px;
}

.panel-toggle-text {
    font-weight: 600;
}

.panel-group {
    border: 1px solid rgba(82, 115, 94, 0.2);
    border-radius: var(--radius-lg);
    padding: 0 14px 4px;
    background: rgba(82, 115, 94, 0.04);
    margin-top: 6px;
}

.panel-group-title {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 0;
}

.panel-group > .panel-fields > .panel-field:last-child,
.panel-body > .panel-fields > .panel-field:last-child {
    border-bottom: none;
}

.panel-group-help {
    margin: 4px 0 10px;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.7);
}

.panel-group > .panel-fields {
    margin-top: 6px;
}

.panel-group-summary {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: rgba(82, 115, 94, 0.1);
    border-left: 3px solid var(--sp-forest);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.panel-group-nested {
    border: none;
    border-top: 1px solid rgba(82, 115, 94, 0.16);
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin-top: 4px;
}

.panel-group-nested > .panel-group-title {
    font-size: 14px;
    padding: 12px 0 2px;
}

.panel-group-nested > .panel-group-help {
    margin: 2px 0 6px;
}

.panel-group-nested > .panel-fields {
    margin-top: 0;
}

.panel-daybar {
    display: grid;
    gap: 4px;
}

.panel-daybar-track {
    position: relative;
    height: 18px;
    border-radius: var(--radius-pill);
    background: rgba(31, 42, 35, 0.12);
    overflow: hidden;
}

.panel-daybar-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--sp-forest);
    opacity: 0.85;
}

.panel-daybar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(31, 42, 35, 0.6);
}

.panel-daybar-legend {
    font-size: 12px;
    color: rgba(31, 42, 35, 0.75);
}

@media (max-width: 600px) {
    .panel-fields {
        grid-template-columns: 1fr;
    }
}

/* Phase 2 panel controls */
.panel-select-wide {
    flex: 1 1 220px;
    width: 100%;
}

.panel-input-pin {
    flex: 0 0 110px;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    letter-spacing: 0.3em;
    text-align: center;
}

.panel-inline-button {
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
}

.panel-copy {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
}

.panel-copy .icon.copy {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1);
}

.panel-ports {
    display: grid;
    gap: 6px 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.panel-port {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* Message type name followed by its port number (settings list, previews, panels). */
.panel-port-label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.port-number {
    font-size: 0.8em;
    color: rgba(31, 42, 35, 0.55);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.import-preview-checkbox.import-preview-tag-removed label .port-number {
    text-decoration: inherit;
}

.panel-field-matrix {
    grid-column: 1 / -1;
}

.panel-matrix-wrap {
    overflow-x: auto;
    border: 1px solid rgba(82, 115, 94, 0.2);
    border-radius: var(--radius-lg);
}

.panel-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.panel-matrix th,
.panel-matrix td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(82, 115, 94, 0.14);
}

.panel-matrix th {
    position: sticky;
    top: 0;
    background: rgba(82, 115, 94, 0.1);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.panel-matrix th.panel-matrix-name,
.panel-matrix td.panel-matrix-name {
    text-align: left;
    white-space: nowrap;
}

.panel-matrix tbody tr:nth-child(even) {
    background: rgba(82, 115, 94, 0.04);
}

.panel-matrix tbody tr:last-child td {
    border-bottom: none;
}

.panel-matrix input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

@media (max-width: 600px) {
    .panel-matrix th:not(.panel-matrix-name) {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        padding: 10px 4px;
        vertical-align: bottom;
    }

    .panel-matrix th,
    .panel-matrix td {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Port tag under the name, so the name column stays as narrow as without it. */
    .panel-matrix td.panel-matrix-name .panel-port-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        line-height: 1.25;
    }
}

/* Panels sit inside one collapsible Settings card; they keep their border but drop the
   shadow, as nested cards. */
.panels-note {
    margin: 0 0 12px;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.75);
}

.panels-card .panel-card {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.75);
}

/* On phones the nested panels get a little more width, but the card keeps the vertical
   padding of every other card so its folded title has the same height. */
@media (max-width: 600px) {
    .panels-card {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.panel-field.panel-search-miss {
    display: none;
}

.panel-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.panel-actions .panel-reset {
    margin: 0;
    font-size: 13px;
    padding: 8px 12px;
}

/* Sticky status bar: slides in once the header has scrolled out of view. */
html {
    scroll-padding-top: 84px;
}

/* Device card above Status: sticky, compact once it is stuck to the top. */
.device-sentinel {
    height: 0;
}

.device-section {
    position: sticky;
    top: 0;
    z-index: 1100;
    padding: 0 16px;
    margin-top: 12px;
    overflow-anchor: none;
}

/* While stuck the wrapper keeps its full height (set inline), so the page below does not
   move when the card turns compact; the unused band lets taps through. */
.device-section.is-stuck {
    pointer-events: none;
}

.device-section.is-stuck .device-card {
    pointer-events: auto;
}

.device-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    transition: border-radius 0.16s ease, box-shadow 0.16s ease;
}

.device-section.is-stuck .device-card {
    padding: 6px 14px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: rgba(245, 247, 243, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(28, 42, 33, 0.14);
}

.sticky-status-identity,
.sticky-status-pending {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--sp-ink);
    font: inherit;
    letter-spacing: normal;
}

.sticky-status-identity:hover,
.sticky-status-pending:hover {
    background: none;
    transform: none;
}

.sticky-status-identity {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.device-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    color: var(--sp-forest-dark);
}

.device-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.device-section.is-stuck .device-icon {
    width: 34px;
    height: 34px;
}

.device-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.device-name-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 18px;
}

.device-section.is-stuck .device-name-row {
    font-size: 16px;
}

.device-type {
    font-size: 13px;
    color: rgba(31, 42, 35, 0.72);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-status-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a9d5d;
    box-shadow: 0 0 0 3px rgba(58, 157, 93, 0.2);
}

body.bootstrapping .sticky-status-dot {
    background: #c9a227;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

.sticky-status-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-status-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 13px;
    color: rgba(31, 42, 35, 0.75);
    white-space: nowrap;
}

.sticky-status-pending {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(82, 115, 94, 0.14);
    color: var(--sp-forest-dark);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.sticky-status-pending:hover {
    background: rgba(82, 115, 94, 0.22);
}

.sticky-status-pending.is-invalid {
    background: rgba(214, 69, 69, 0.14);
    color: #a51616;
}

.sticky-status-disconnect {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
    background: linear-gradient(145deg, #d64545, #b91c1c);
    border-color: transparent;
    box-shadow: 0 3px 8px rgba(185, 28, 28, 0.25);
}

.sticky-status-disconnect:hover {
    background: linear-gradient(145deg, #e35d5d, #a51616);
}

@media (max-width: 600px) {
    .device-card {
        gap: 8px;
        padding: 10px 12px;
    }

    .device-section.is-stuck .device-card {
        padding: 6px 12px;
    }

    .device-icon {
        width: 44px;
        height: 44px;
    }

    .device-section.is-stuck .device-type {
        display: none;
    }

    .sticky-status-fw {
        display: none;
    }
}

@media (max-width: 430px) {
    .sticky-status-battery {
        display: none;
    }

    .sticky-status-disconnect {
        padding: 0 10px;
    }
}