:root {
    --bg: #1e1e2e;
    --panel: #282a36;
    --text: #f8f8f2;
    --accent: #bd93f9;
    --accent-hover: #ff79c6;
    --success: #50fa7b;
    --danger: #ff5555;
    --warning: #f1fa8c;
    --surface: #44475a;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
h1, h2, h3 { margin-top: 0; color: #fff; }
.panel {
    background: var(--panel);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
input[type="text"], input[type="number"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--surface);
    border-radius: 4px;
    background: #1e1e2e;
    color: white;
    transition: border 0.3s;
}
input:focus { border-color: var(--accent); outline: none; }
button {
    background: var(--accent);
    color: #1e1e2e;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    margin-right: 5px;
}
button:hover { background: var(--accent-hover); }
button:disabled { background: var(--surface); cursor: not-allowed; color: #888; }

.webcam-wrapper {
    position: relative;
    width: 380px;
    flex-shrink: 0;
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--surface);
    background: #000;
    margin-bottom: 0;
}
#webcam-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#webcam-container canvas { width: 100%; height: 100%; object-fit: cover; }

.webcam-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--warning);
    font-weight: bold;
    z-index: 5;
    backdrop-filter: blur(2px);
}

.cam-toggle-container {
    position: absolute;
    top: 1px; left: 1px; z-index: 10;
    display: none;
    background: rgba(40, 42, 54, 0.8);
    border: 1px solid var(--surface);
    padding: 3px 6px;
    border-radius: 20px;
    align-items: center;
    backdrop-filter: blur(4px);
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px; height: 24px;
    margin-left: 4px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute; content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input:checked + .slider { background-color: var(--success); }
input:checked + .slider:before { transform: translateX(20px); }

.mapping-row {
    display: flex; justify-content: space-between; align-items: center;
    background: #1e1e2e; padding: 10px; margin-bottom: 5px;
    border-radius: 4px; border: 1px solid var(--surface);
}
.mapping-row input { width: 100px; margin-bottom: 0; }

#console {
    background: #000; color: var(--success);
    font-family: 'Courier New', Courier, monospace;
    padding: 10px 15px; height: 100px;
    overflow-y: auto; border-radius: 8px;
    border: 1px solid var(--surface); font-size: 0.85em;
}

.cm-status { display: flex; align-items: center; gap: 10px; font-weight: bold; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.status-dot.connected { background: var(--success); box-shadow: 0 0 8px var(--success); }

.btn-disconnect { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-disconnect:hover { background: rgba(255,85,85,0.1); }
.btn-disconnect:disabled { border-color: #555; color: #555; background: transparent; cursor: not-allowed; }

#baud-rate-container { transition: opacity 0.3s ease; }

/* Injected UI Styles */
.fab-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; }
.fab-menu { background: var(--panel); border: 1px solid var(--surface); border-radius: 8px; padding: 10px; margin-bottom: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); display: none; flex-direction: column; gap: 5px; width: 180px; }
.fab-menu.show { display: flex; }
.fab-menu button { background: #21222c; color: var(--text); border: 1px solid var(--surface); width: 100%; text-align: left; margin: 0; padding: 10px; font-size: 0.9em; }
.fab-menu button:hover { background: var(--surface); color: var(--accent); }
.fab-btn { background: #50fa7b; color: #1e1e2e; border: none; padding: 6px 6px; border-radius: 50px; cursor: pointer; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-family: monospace; font-size: 1.4em; }

.watermark { text-align: left; font-size: 0.85em; color: rgba(255, 255, 255, 0.3); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; letter-spacing: 2px; }
.footer-area { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-top: 10px; }
.guide-btn { background: var(--surface); color: var(--text); border: 1px solid var(--accent); width: 35px; height: 35px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 1.5em; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.guide-btn:hover { background: var(--accent); color: var(--bg); }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.modal-content { background: var(--panel); padding: 30px; border-radius: 12px; max-width: 650px; width: 90%; max-height: 80vh; overflow-y: auto; border: 1px solid var(--surface); position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 1.8em; cursor: pointer; color: #aaa; transition: color 0.2s; }
.close-btn:hover { color: var(--danger); }
.guide-text { line-height: 1.6; color: #ccc; font-size: 0.95em; }
.guide-text h4 { color: var(--accent); margin-top: 20px; margin-bottom: 8px; font-size: 1.1em; }
.guide-text p { margin-top: 0; margin-bottom: 15px; }