* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'Arial', 'Tahoma', sans-serif;
            background: #d4d0c8;
            color: #333333;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .program-window {
            width: 740px;
            min-width: 520px;
            max-width: 100%;
            background: #f0f0f0;
            border: 1px solid #888888;
            box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.15), 0 1px 0 #ffffff inset;
            overflow: hidden;
        }

#drvProgressFill{
    height: 100%;
    width: 83%;
    background: rgb(0 133 255)!important;
    border-radius: 2px;
    transition: width 0.3s;
}
#bleProgressFill{
    height: 100%;
    width: 83%;
    background: rgb(0 133 255)!important;
    border-radius: 2px;
    transition: width 0.3s;

}
#bmsProgressFill{
    height: 100%;
    width: 83%;
    background: rgb(0 133 255)!important;
    border-radius: 2px;
    transition: width 0.3s;

}




body > div > div.window-titlebar > div.window-controls{display:none;}
        .window-titlebar {
background: #2d2e2e;
    padding: 4px 10px 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    cursor: default;
    min-height: 28px;        }

        .window-titlebar .title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .window-titlebar .title .icon {
            font-size: 13px;
            color: #ffffff;
        }

        .window-titlebar .title .name {
            font-size: 12px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.2px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .window-titlebar .title .page-title {
            font-weight: 400;
            color: #8ab4ff;
            font-size: 10px;
            letter-spacing: 0;
            margin-left: 4px;
            transition: all 0.2s;
        }

        .window-titlebar .title .version {
            font-size: 10px;
            font-weight: 400;
            color: #8ab4ff;
            background: rgba(255, 255, 255, 0.1);
            padding: 0 8px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            margin-left: 4px;
        }

        .window-controls {
            display: flex;
            gap: 4px;
        }

        .window-controls .ctrl-btn {
            width: 20px;
            height: 20px;
            border: 1px solid #1a4a8a;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            color: #ffffff;
            background: #1a4a8a;
            padding: 0;
            line-height: 1;
        }

        .window-controls .ctrl-btn:hover {
            background: #2a5a9a;
            border-color: #2a5a9a;
        }

        .ctrl-close {
            background: #c03030;
            border-color: #a02020;
        }
        .ctrl-close:hover {
            background: #d04040 !important;
            border-color: #b03030 !important;
        }

        .ctrl-minimize {
            font-size: 14px;
            line-height: 16px;
        }

        .ctrl-maximize {
            font-size: 12px;
        }

        .window-body {
            padding: 8px 12px 12px 12px;
            background: #f0f0f0;
            border-bottom: 0px solid #c0c0c0;
            min-height: 80px;
        }

        .connection-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #e8e8e8;
            padding: 4px 12px;
            border: 1px solid #b0b0b0;
            border-radius: 2px;
            min-height: 32px;
            flex-wrap: nowrap;
            margin-bottom: 10px;
        }

        .connection-left {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            flex-shrink: 0;
            border: 1px solid rgba(0, 0, 0, 0.15);
            transition: all 0.3s;
        }

        .status-dot.online {
            background: #4CAF50;
            box-shadow: 0 0 4px rgba(76, 175, 80, 0.2);
        }

        .status-dot.offline {
            background: #b0b0b0;
        }
        
        .status-dot.orange {
            background: #d97706;
            animation: pulse-dot 0.8s infinite;
        }
        
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.8); }
        }

        .status-text {
            font-size: 12px;
            color: #333333;
            font-weight: 500;
            min-width: 64px;
        }

        .btn {
            padding: 2px 14px;
            border: 1px solid #a0a0a0;
            border-radius: 2px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            font-family: 'Segoe UI', 'Arial', sans-serif;
            height: 24px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.15s;
            background: #e0e0e0;
            color: #333333;
            text-transform: uppercase;
            letter-spacing: 0.2px;
            flex-shrink: 0;
        }

        .btn:hover:not(:disabled) {
            background: #d0d0d0;
            border-color: #888888;
        }
        .btn:active:not(:disabled) {
            background: #c0c0c0;
            border-color: #666666;
        }
        .btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .btn-connect {
            background: #dce8dc;
            border-color: #8aaa8a;
            color: #1a4a1a;
        }
        .btn-connect:hover:not(:disabled) {
            background: #c8dcc8;
            border-color: #6a9a6a;
        }

        .btn-disconnect {
            background: #e8dcdc;
            border-color: #aa8a8a;
            color: #4a1a1a;
        }
        .btn-disconnect:hover:not(:disabled) {
            background: #dcc8c8;
            border-color: #9a6a6a;
        }

        .connection-spacer {
            flex: 1;
            min-width: 12px;
        }

        .versions-group {
            display: flex;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
        }

        .version-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            font-size: 12px;
            border-right: 1px solid #d0d0d0;
            min-height: 24px;
        }

        .version-item:last-child {
            border-right: none;
        }

        .version-item .label {
            color: #666666;
            font-weight: 600;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .version-item .value {
            font-family: 'Consolas', 'Courier New', monospace;
            font-weight: 700;
            font-size: 14px;
            color: #888888;
            transition: color 0.3s;
            min-width: 50px;
            text-align: center;
        }

        .version-item.active .value {
            color: #1a6a1a;
        }

        .version-divider {
            width: 1px;
            height: 20px;
            background: #d0d0d0;
            flex-shrink: 0;
        }

        .content-area {
            background: #f0f0f0;
            padding: 4px 0;
            min-height: 40px;
        }

        .window-footer {
            background: #e8e8e8;
            border-top: 1px solid #c0c0c0;
            padding: 2px 12px;
            min-height: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 10px;
            color: #888888;
        }

        .window-footer .status-label {
            color: #666666;
        }

        .window-footer2 {
            background: #e8e8e8;
            border-top: 1px solid #c0c0c0;
            padding: 2px 12px;
            min-height: 22px;
            display: flex;

            justify-content: space-between;
            align-items: center;
            font-size: 10px;
            color: #888888;
        }

        .window-footer2 .status-label {
            padding: 0 4px;
        }

        .window-footer2 a {
            color: #0088cc;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.2s;
font-weight: 700;
        }

        .window-footer2 a:hover {
            text-decoration: none;
            color: #0055aa;
        }

        .window-footer2 a.active-link {
            color: #0a2a6a;
            font-weight: 700;

            text-decoration: none;
        }

        .window-footer a {
            color: #0088cc;
            text-decoration: none;
        }

        .window-footer a:hover {
            text-decoration: underline;
        }

        .btn-flash {
            width: 78px;
            min-width: 78px;
            max-width: 78px;
            padding: 1px 0;
            border: 1px solid #888;
            border-radius: 2px;
            background: #e8e8e8;
            color: #333;
            font-size: 11px;
            cursor: pointer;
            height: 24px;
            transition: all 0.15s;
            font-family: inherit;
            white-space: nowrap;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .btn-flash:hover:not(:disabled) {
            background: #d0d0d0 !important;
            border-color: #666 !important;
        }
        .btn-flash:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .btn-flash.flashing {
            background: #d0d0d0 !important;
            border-color: #888 !important;
            color: #555 !important;
        }
        .btn-flash.done {
            background: #d0d0d0 !important;
            border-color: #666 !important;
            color: #1a6a1a !important;
        }
        .btn-flash.error {
            background: #d0d0d0 !important;
            border-color: #666 !important;
            color: #dc2626 !important;
        }
        select:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        @media (max-width: 620px) {
            .program-window {
                min-width: unset;
                width: 100%;
                border-radius: 0;
            }
            .window-body {
                padding: 6px 8px 8px 8px;
            }
            .connection-bar {
                flex-wrap: wrap;
                gap: 6px;
                padding: 6px 10px;
            }
            .connection-left {
                flex-wrap: wrap;
                gap: 6px;
            }
            .connection-spacer {
                display: none;
            }
            .versions-group {
                flex-wrap: wrap;
                justify-content: flex-start;
                width: 100%;
                border-top: 1px solid #d0d0d0;
                padding-top: 4px;
                margin-top: 2px;
            }
            .version-item {
                border-right: none;
                border-bottom: 1px solid #d0d0d0;
                padding: 2px 6px;
            }
            .version-item:last-child {
                border-bottom: none;
            }
            .version-divider {
                display: none;
            }
            .window-titlebar .title .version {
                display: none;
            }
            .window-footer2 {
                flex-wrap: wrap;
                justify-content: center;
                gap: 4px;
            }
        }

        @media (max-width: 400px) {
            body {
                padding: 4px;
            }
            .window-titlebar {
                padding: 2px 6px;
            }
            .window-titlebar .title .name {
                font-size: 11px;
            }
            .btn {
                font-size: 10px;
                padding: 1px 10px;
                height: 20px;
            }
            .version-item .value {
                font-size: 12px;
                min-width: 32px;
            }
            .version-item .label {
                font-size: 9px;
            }
            .status-text {
                font-size: 11px;
                min-width: 40px;
            }
            .window-controls .ctrl-btn {
                width: 18px;
                height: 18px;
                font-size: 9px;
            }
        }