/* ===== RESET & BASE STYLES ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-bg: #0a0a0a;
--secondary-bg: #111111;
--tertiary-bg: #1a1a1a;
--card-bg: rgba(255, 255, 255, 0.02);
--card-border: rgba(255, 255, 255, 0.08);
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--text-muted: #666666;
--accent-blue: #00d4ff;
--accent-cyan: #00ffff;
--accent-purple: #8b5cf6;
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: var(--accent-blue);
--border-radius: 12px;
--border-radius-lg: 16px;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Light theme variables */
:root[data-theme="light"] {
--primary-bg: #f8fafc;
--secondary-bg: #ffffff;
--tertiary-bg: #f1f5f9;
--card-bg: rgba(0, 0, 0, 0.03);
--card-border: rgba(0, 0, 0, 0.08);
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--accent-blue: #0ea5e9;
--accent-cyan: #06b6d4;
--accent-purple: #8b5cf6;
--success: #059669;
--warning: #d97706;
--error: #dc2626;
--info: var(--accent-blue);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--primary-bg);
background-attachment: fixed;
min-height: 100vh;
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* Background pattern */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(0, 255, 255, 0.02) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* Light theme background pattern */
:root[data-theme="light"] body::before {
background:
radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.06) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
}
/* ===== TOP HEADER ===== */
.top-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--secondary-bg);
border-bottom: 1px solid var(--card-border);
padding: 1rem;
z-index: 1000;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.theme-toggle-btn {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.theme-toggle-btn:hover {
border-color: var(--accent-blue);
background: rgba(0, 212, 255, 0.05);
color: var(--accent-blue);
transform: scale(1.05);
}
.theme-icon {
position: absolute;
transition: all 0.3s ease;
}
.theme-icon-moon {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.theme-icon-sun {
opacity: 0;
transform: scale(0.8) rotate(-90deg);
}
/* Light theme toggle button styling */
:root[data-theme="light"] .theme-toggle-btn {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.1);
color: var(--text-secondary);
}
:root[data-theme="light"] .theme-toggle-btn:hover {
border-color: var(--accent-blue);
background: rgba(14, 165, 233, 0.1);
}
/* Active theme states */
:root[data-theme="light"] .theme-icon-moon {
opacity: 0;
transform: scale(0.8) rotate(90deg);
}
:root[data-theme="light"] .theme-icon-sun {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.top-header-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
}
.top-header-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2rem;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.top-header-subtitle {
font-size: 0.9rem;
color: var(--text-secondary);
}
.top-header-subtitle a {
color: inherit;
text-decoration: underline;
}
.top-header-subtitle a:hover {
color: inherit;
}
/* ===== DASHBOARD LAYOUT ===== */
.dashboard {
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
position: relative;
z-index: auto;
margin-top: 5rem; /* Account for fixed header */
transition: grid-template-columns 0.3s ease;
}
.dashboard.sidebar-open {
grid-template-columns: 280px 1fr;
}
/* ===== MANUAL MODAL ===== */
.manual-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
}
.manual-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 1;
}
.manual-container {
position: relative;
z-index: 2;
background: var(--secondary-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 1200px;
max-height: 90vh;
width: 90%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.manual-header {
display: flex;
align-items: flex-start;
padding: 1.5rem 2rem;
border-bottom: 2px solid var(--card-border);
background: var(--card-bg);
}
.manual-header-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
overflow: hidden;
}
/* Manual submenu in modal header */
.manual-submenu {
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
/* Ensure scrolling by allowing natural width */
width: max-content;
max-width: 100%;
}
.manual-submenu::-webkit-scrollbar {
height: 4px;
}
.manual-submenu::-webkit-scrollbar-track {
background: transparent;
}
.manual-submenu::-webkit-scrollbar-thumb {
background: rgba(0, 212, 255, 0.3);
border-radius: 2px;
}
.manual-submenu::-webkit-scrollbar-thumb:hover {
background: rgba(0, 212, 255, 0.5);
}
.nav-subitem {
color: var(--text-secondary);
text-decoration: none;
padding: 0.375rem 0.75rem;
border-radius: var(--border-radius);
transition: var(--transition);
font-size: 0.85rem;
font-weight: 500;
border: 1px solid transparent;
background: rgba(0, 212, 255, 0.05);
white-space: nowrap;
flex-shrink: 0;
}
/* Manual parent in sidebar */
.manual-parent {
position: relative;
}
.nav-subitem:hover {
color: var(--accent-blue);
background: rgba(0, 212, 255, 0.1);
border-color: rgba(0, 212, 255, 0.3);
transform: translateY(-1px);
}
.nav-subitem.active {
color: var(--primary-bg);
background: var(--accent-blue);
border-color: var(--accent-blue);
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}
.manual-title {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
}
.close-manual-btn {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
}
.close-manual-btn:hover {
border-color: var(--error);
color: var(--error);
background: rgba(239, 68, 68, 0.1);
transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2);
}
.manual-body {
display: grid;
gap: 2.5rem;
padding: 2rem;
overflow-y: auto;
flex: 1;
}
.manual-section {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
padding: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
}
.manual-section:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: rgba(0, 212, 255, 0.2);
}
.manual-section h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.manual-section h2::before {
content: '';
width: 6px;
height: 24px;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
border-radius: 3px;
flex-shrink: 0;
}
.manual-section h2 .section-flag {
font-size: 0.75rem;
font-weight: 500;
padding: 0.25rem 0.5rem;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.025em;
margin-left: auto;
flex-shrink: 0;
}
.manual-section h2 .section-flag.necessary {
background: rgba(239, 68, 68, 0.15);
color: var(--error);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.manual-section h2 .section-flag.recommended {
background: rgba(245, 158, 11, 0.15);
color: var(--warning);
border: 1px solid rgba(245, 158, 11, 0.3);
}
.manual-section h2 .section-flag.optional {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.manual-section p {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1.25rem;
font-size: 1.05rem;
}
.manual-section p:last-child {
margin-bottom: 0;
}
.manual-section ol, .manual-section ul {
color: var(--text-secondary);
padding-left: 2rem;
margin-bottom: 1.25rem;
font-size: 1.05rem;
}
.manual-section li {
margin-bottom: 0.75rem;
line-height: 1.6;
}
.manual-section li:last-child {
margin-bottom: 0;
}
.manual-section ol li::marker {
color: var(--accent-blue);
font-weight: 600;
}
.manual-section ul li::marker {
color: var(--accent-cyan);
}
.mode-reference-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.875rem;
background: var(--bg-primary);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.mode-reference-table th,
.mode-reference-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--card-border);
}
.mode-reference-table th {
background: var(--card-bg-hover);
font-weight: 600;
color: var(--text-primary);
border-bottom: 2px solid var(--accent-blue);
}
.mode-reference-table td:first-child {
font-weight: 600;
color: var(--accent-blue);
font-family: 'Inter', monospace;
}
.mode-reference-table tbody tr:hover {
background: var(--card-bg-hover);
}
.mode-reference-table tbody tr:last-child td {
border-bottom: none;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.manual-container {
width: 95%;
max-height: 95vh;
}
.manual-title {
font-size: 1.75rem;
}
.manual-submenu {
gap: 0.375rem;
padding-bottom: 0.25rem;
}
.nav-subitem {
font-size: 0.8rem;
padding: 0.25rem 0.5rem;
flex-shrink: 0;
}
.manual-section {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.manual-header {
padding: 1rem 1.5rem;
}
.manual-body {
padding: 0;
}
.manual-submenu {
gap: 0.25rem;
padding-bottom: 0.25rem;
}
.manual-section {
border: none;
}
.nav-subitem {
font-size: 0.75rem;
padding: 0.2rem 0.4rem;
flex-shrink: 0;
}
}
/* ===== SIDEBAR ===== */
.sidebar {
background: var(--secondary-bg);
border-right: 1px solid var(--card-border);
padding: 1.5rem 0;
display: flex;
flex-direction: column;
position: fixed;
top: 5rem; /* Below the top header */
left: -280px; /* Hidden by default */
width: 280px;
height: calc(100vh - 5rem);
overflow-y: auto;
transition: left 0.3s ease, width 0.3s ease;
z-index: 999;
}
.sidebar.open {
left: 0;
}
.connect-panel {
margin: 0 1.5rem 0.5rem;
}
.actions-panel {
border-radius: var(--border-radius);
margin: 0 1.5rem 0.5rem;
}
.firmware-update-panel {
border-radius: var(--border-radius);
margin: 0 1.5rem 0.5rem;
background: var(--card-bg);
border: 1px solid var(--card-border);
padding: 1rem;
}
.battery-status-panel {
border-radius: var(--border-radius);
margin: 0 1.5rem 1rem 1.5rem;
background: var(--card-bg);
border: 1px solid var(--card-border);
padding: 1rem;
}
.battery-indicator {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.battery-icon {
display: flex;
align-items: center;
}
.battery-icon svg {
stroke: var(--text-secondary);
}
.battery-text {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-secondary);
}
.actions-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.btn-sidebar {
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
border: 1px solid var(--card-border);
background: var(--card-bg);
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
justify-content: flex-start;
text-align: left;
line-height: 1rem;
text-decoration: none;
}
.btn-sidebar:hover:not(:disabled) {
border-color: var(--accent-blue);
}
.btn-sidebar:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-sidebar.btn-success {
background: rgba(16, 185, 129, 0.1);
border-color: var(--success);
color: var(--success);
}
.btn-sidebar.btn-success:hover:not(:disabled) {
background: rgba(16, 185, 129, 0.2);
}
.btn-sidebar.btn-danger {
background: rgba(239, 68, 68, 0.1);
border-color: var(--error);
color: var(--error);
}
.btn-sidebar.btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.2);
}
.btn-sidebar.btn-danger.updating {
background: linear-gradient(
to right,
rgba(239, 68, 68, 0.3) var(--progress-percent, 0%),
rgba(239, 68, 68, 0.1) var(--progress-percent, 0%)
);
border-color: var(--error);
color: var(--error);
position: relative;
overflow: hidden;
}
.btn-sidebar.btn-primary {
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
color: var(--primary-bg);
border: 1px solid var(--accent-blue);
font-weight: 600;
}
.btn-sidebar.btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}
.btn-sidebar.btn-secondary {
background: var(--card-bg);
color: var(--text-primary);
border: 1px solid var(--card-border);
}
.btn-sidebar.btn-secondary:hover:not(:disabled) {
background: var(--tertiary-bg);
border-color: var(--accent-blue);
}
.btn-sidebar.btn-danger.updating::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--progress-percent, 0%);
background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
transition: width 0.3s ease;
z-index: -1;
}
/* ===== NOTIFICATION CONTAINER ===== */
.notification-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
max-width: 90vw;
width: auto;
min-width: 300px;
}
.notification-message {
border-radius: var(--border-radius);
padding: 1rem 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: var(--shadow-lg);
animation: notificationSlideIn 0.3s ease-out;
backdrop-filter: blur(10px);
}
.notification-message.error {
background: linear-gradient(135deg, var(--error), #dc2626);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.notification-message.success {
background: linear-gradient(135deg, var(--success), #059669);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.notification-message.connected {
background: linear-gradient(135deg, var(--success), #059669);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.notification-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.notification-message.error .notification-icon {
content: "⚠️";
}
.notification-message.success .notification-icon {
content: "✅";
}
.notification-message.connected .notification-icon {
content: "🔗";
}
.notification-message span {
color: white;
font-weight: 500;
font-size: 0.95rem;
line-height: 1.4;
}
@keyframes notificationSlideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes notificationFadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* ===== NAVIGATION ===== */
.nav-section {
padding: 1rem 1.5rem 0;
margin-top: 2rem;
border-top: 1px solid #00d4ff;
}
.nav-section .btn-sidebar {
margin-bottom: 0.5rem;
}
.nav-title {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 1rem 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
border: 1px solid var(--card-border);
color: var(--text-secondary);
text-decoration: none;
transition: var(--transition);
margin-bottom: 0.25rem;
font-size: 0.9rem;
font-weight: 500;
}
.nav-item:hover {
background: var(--card-bg);
color: var(--text-primary);
}
.nav-item.active {
background: var(--accent-blue);
color: var(--primary-bg);
}
.nav-icon {
width: 16px;
height: 16px;
}
/* ===== 3D MODEL VIEWER ===== */
.model-viewer-section {
margin-top: 1rem;
}
.model-viewer-title {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.model-container {
width: 100%;
height: 300px;
background: transparent;
overflow: hidden;
position: relative;
}
.model-container canvas {
width: 100% !important;
height: 100% !important;
display: block;
}
/* ===== MAIN CONTENT ===== */
.main-content {
padding: 2rem;
display: grid;
grid-template-columns: 1fr 320px;
gap: 2rem;
grid-column: 2;
}
/* ===== HEADER ===== */
.header {
background: var(--secondary-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
padding: 2rem;
margin-bottom: 2rem;
grid-column: 1 / -1;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.header-subtitle {
font-size: 0.9rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.header-actions {
display: flex;
gap: 1rem;
}
/* ===== MOBILE HEADER (deprecated - using top-header now) ===== */
.burger-menu-btn {
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
border: none;
padding: 0.5rem;
border-radius: var(--border-radius);
color: var(--primary-bg);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.burger-menu-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}
.burger-menu-btn svg {
width: 24px;
height: 24px;
}
/* Desktop AR logo styling */
@media (min-width: 1201px) {
.burger-menu-btn {
background: var(--accent-blue);
cursor: default;
position: relative;
}
.burger-menu-btn:hover {
transform: none;
box-shadow: none;
}
.burger-menu-btn::before {
content: "AR";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 700;
font-size: 18px;
color: black;
letter-spacing: -0.5px;
}
.burger-menu-btn svg {
opacity: 0;
}
}
.burger-line {
transition: all 0.3s ease;
transform-origin: 12px 12px;
}
.burger-menu-btn[aria-expanded="true"] .burger-line-1 {
transform: rotate(45deg) translate(0.5px, 4.5px);
}
.burger-menu-btn[aria-expanded="true"] .burger-line-2 {
opacity: 0;
}
.burger-menu-btn[aria-expanded="true"] .burger-line-3 {
transform: rotate(-45deg) translate(0.5px, -4.5px);
}
/* Mobile header title deprecated - using top-header-title now */
.mobile-overlay {
display: none;
position: fixed;
top: 0; /* Cover entire screen on mobile */
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 998;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-overlay.active {
display: block;
opacity: 1;
}
/* ===== CARDS ===== */
.card {
background: var(--card-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
padding: 2rem;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan), var(--accent-purple));
opacity: 0;
transition: var(--transition);
}
.card.highlight {
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.3), 0 8px 24px rgba(0, 212, 255, 0.4);
border-color: var(--accent-blue);
}
.card:hover {
border-color: rgba(0, 212, 255, 0.3);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.card:hover::before {
opacity: 1;
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.card-icon {
width: 24px;
height: 24px;
color: var(--accent-blue);
}
/* ===== BUTTON CONTROLS ===== */
.button-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.button-section {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.05) 100%);
border: 1px solid rgba(226, 232, 240, 0.3);
border-radius: var(--border-radius);
padding: 0.5rem;
}
/* Light theme button section */
:root[data-theme="light"] .button-section {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
border: 2px solid rgba(226, 232, 240, 0.6);
}
.button-section-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
text-align: center;
}
.button-matrix {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 0.25rem;
aspect-ratio: 1;
margin: 0 auto;
max-width: 280px;
}
.button-matrix.rotated {
transform: rotate(180deg);
}
.button-matrix.rotated .button-cell {
transform: rotate(180deg);
}
.button-cell {
background: var(--card-bg);
border: 2px solid var(--card-border);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
position: relative;
aspect-ratio: 1;
font-size: 0.9rem;
}
.button-cell:hover {
border-color: var(--accent-blue);
transform: scale(1.05);
}
.button-cell.repeat-mode {
background: linear-gradient(135deg, var(--success), #059669);
border-color: var(--success);
color: white;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}
.button-cell.hold-mode {
background: linear-gradient(135deg, var(--warning), #d97706);
border-color: var(--warning);
color: white;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}
.button-cell.special-functions-mode {
background: rgba(0, 212, 255, 0.1);
border-color: var(--accent-blue);
color: var(--accent-blue)
}
/* Active state overrides mode styling */
.button-cell.repeat-mode.active,
.button-cell.hold-mode.active,
.button-cell.special-functions-mode.active {
color: var(--primary-bg) !important;
box-shadow: 0 0 18px rgb(255 255 255) !important;
border-color: white;
background: none;
}
.button-mode-text {
font-size: 0.65rem;
font-weight: bold;
color: inherit;
text-align: center;
display: block;
line-height: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.025em;
user-select: none;
}
/* ===== CONTROL PANELS ===== */
.control-panel {
background: var(--tertiary-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
/* ===== SIDE SELECTOR ===== */
.side-selector {
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: var(--border-radius);
transition: var(--transition);
background: rgba(0, 212, 255, 0.1);
color: var(--accent-blue);
border: 1px solid rgba(0, 212, 255, 0.3);
font-weight: 600;
font-size: 0.9rem;
}
.side-selector:hover {
background: rgba(0, 212, 255, 0.2);
transform: scale(1.05);
}
/* ===== MOUNTING IMAGE ===== */
.slider-description {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.description-text {
flex: 1;
}
.mounting-image {
width: 120px;
height: 120px;
transition: var(--transition);
order: 2; /* Default to right side */
}
.mounting-image.left {
order: -1; /* Move to left side */
}
.mounting-image:hover {
border-color: var(--accent-blue);
transform: scale(1.05);
}
.control-group {
margin-bottom: 2rem;
}
.control-group:last-child {
margin-bottom: 0;
}
.manual-link-section {
margin-top: 2rem;
text-align: center;
}
.control-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-primary);
}
.control-value {
font-size: 1rem;
font-weight: 600;
color: var(--accent-blue);
font-variant-numeric: tabular-nums;
}
.control-input {
width: 100%;
padding: 0.75rem 1rem;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
color: var(--text-primary);
font-size: 0.9rem;
transition: var(--transition);
}
.control-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}
.control-input::placeholder {
color: var(--text-muted);
}
/* ===== SLIDERS ===== */
.slider-container {
position: relative;
margin: 1rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.slider-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
.slider-label-left {
text-align: right;
}
.slider-label-right {
text-align: left;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: var(--card-border);
outline: none;
cursor: pointer;
transition: var(--transition);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-blue);
cursor: pointer;
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
transition: var(--transition);
}
.slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.3);
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-blue);
cursor: pointer;
border: none;
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
transition: var(--transition);
}
.slider::-moz-range-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.3);
}
.slider-description {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 0.5rem;
line-height: 1.4;
}
/* ===== METRICS ===== */
.metrics-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.metric-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
padding: 1rem;
text-align: center;
}
.metric-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-blue);
margin-bottom: 0.25rem;
}
.metric-label {
font-size: 0.8rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* ===== ANIMATIONS ===== */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
.dashboard {
grid-template-columns: 1fr;
}
.main-content {
grid-template-columns: 1fr;
grid-column: 1;
}
.header {
grid-column: 1;
}
}
@media (max-width: 768px) {
.top-header {
padding: 0.75rem 1rem;
}
.burger-menu-btn {
width: 32px;
height: 32px;
padding: 0.375rem;
}
.burger-menu-btn svg {
width: 18px;
height: 18px;
}
.top-header-title {
font-size: 1.1rem;
}
.top-header-subtitle {
font-size: 0.8rem;
}
.sidebar {
width: 100vw; /* Full width on mobile */
left: -100vw; /* Hidden off-screen */
padding: 1rem;
transition: left 0.3s ease;
}
.sidebar.open {
left: 0;
width: 100vw;
}
/* On mobile, dashboard stays full width regardless of sidebar state */
.dashboard.sidebar-open {
grid-template-columns: 1fr;
}
.main-content {
padding: 1rem;
gap: 1rem;
}
.header {
padding: 1.5rem;
}
.header-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.header-actions {
width: 100%;
justify-content: center;
}
.button-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.button-matrix {
width: clamp(160px, 55vw, 240px);
}
.metrics-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.sidebar {
padding: 1rem;
}
.main-content {
padding: 0.5rem;
}
.card {
padding: 1rem;
}
.button-matrix {
width: clamp(140px, 50vw, 220px);
gap: 0.2rem;
}
.button-cell {
font-size: 0.75rem;
}
.button-mode-text {
font-size: 0.5rem;
letter-spacing: 0;
}
}
/* ===== SCROLL BEHAVIOR ===== */
html {
scroll-behavior: smooth;
}
/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
/* Focus styles */
.btn:focus-visible,
.control-input:focus-visible,
.button-cell:focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
/* ===== ANIMATIONS ===== */
.card {
animation: fadeInUp 0.6s ease-out;
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
/* ===== INFO SECTION ===== */
.info {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 255, 255, 0.03) 50%, rgba(139, 92, 246, 0.03) 100%);
border: 2px solid var(--accent-blue);
border-radius: 20px;
padding: 3rem;
margin-top: 2rem;
box-shadow:
0 8px 30px var(--shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
opacity: 0.9;
}
/* Light theme info section */
:root[data-theme="light"] .info {
background: linear-gradient(135deg, rgba(240, 249, 255, 0.9) 0%, rgba(224, 242, 254, 0.9) 50%, rgba(186, 230, 253, 0.9) 100%);
box-shadow:
0 8px 30px rgba(14, 165, 233, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.info::before {
content: '💡';
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 2.5rem;
opacity: 0.4;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.info::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Light theme info background pattern */
:root[data-theme="light"] .info::after {
background: url('data:image/svg+xml,');
}
.info h3 {
color: var(--text-primary);
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: 800;
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
z-index: 1;
}
/* Light theme info heading */
:root[data-theme="light"] .info h3 {
color: #0c4a6e;
}
.info h3::before {
content: '📖';
font-size: 1.75rem;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.info p {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 1.25rem;
font-size: 1.05rem;
position: relative;
z-index: 1;
}
/* Light theme info paragraph */
:root[data-theme="light"] .info p {
color: #075985;
}
.info p:last-child {
margin-bottom: 0;
}
.info strong {
color: var(--accent-blue);
font-weight: 700;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Light theme info strong text */
:root[data-theme="light"] .info strong {
background: linear-gradient(135deg, #0c4a6e, #0369a1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===== TIMING CONTROLS ===== */
.timing-controls {
margin-bottom: 1.5rem;
}
.advanced-section {
margin-top: 1.5rem;
}
.advanced-toggle {
text-align: center;
margin-bottom: 1.5rem;
}
.advanced-btn {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 250, 252, 0.1) 100%);
border: 2px solid var(--card-border);
border-radius: 12px;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
/* Light theme advanced button */
:root[data-theme="light"] .advanced-btn {
background: linear-gradient(135deg, rgba(241, 245, 249, 0.8) 0%, rgba(226, 232, 240, 0.8) 100%);
border: 2px solid rgba(203, 213, 225, 0.6);
color: #334155;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.advanced-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.1), transparent);
transition: left 0.5s ease;
}
.advanced-btn:hover::before {
left: 100%;
}
.advanced-btn:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(248, 250, 252, 0.2) 100%);
border-color: var(--accent-blue);
box-shadow: 0 6px 16px var(--shadow-lg);
transform: translateY(-2px);
}
/* Light theme advanced button hover */
:root[data-theme="light"] .advanced-btn:hover {
background: linear-gradient(135deg, rgba(226, 232, 240, 0.9) 0%, rgba(203, 213, 225, 0.9) 100%);
border-color: rgba(148, 163, 184, 0.8);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.advanced-controls {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 250, 252, 0.1) 100%);
border: 2px solid var(--card-border);
border-radius: 16px;
padding: 2rem;
margin-top: 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow);
}
/* Light theme advanced controls */
:root[data-theme="light"] .advanced-controls {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
border: 2px solid rgba(226, 232, 240, 0.7);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.advanced-controls h3 {
margin: 0 0 2rem 0;
color: #0f172a;
font-size: 1.4rem;
font-weight: 700;
text-align: center;
background: linear-gradient(135deg, #334155, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.advanced-timing-controls {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.hidden {
display: none;
}
.timing-control {
padding: 2.5rem;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 250, 252, 0.1) 100%);
border-radius: 16px;
border: 2px solid var(--card-border);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
var(--shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Light theme timing control */
:root[data-theme="light"] .timing-control {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
border: 2px solid rgba(226, 232, 240, 0.6);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.timing-control:hover {
border-color: rgba(14, 165, 233, 0.5);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transform: translateY(-3px);
}
.timing-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-weight: 700;
color: #1e293b;
font-size: 1.1rem;
}
.timing-value {
font-size: 1.4rem;
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
font-variant-numeric: tabular-nums;
padding: 0.5rem 1rem;
border-radius: 12px;
background-color: rgba(14, 165, 233, 0.08);
border: 1px solid rgba(14, 165, 233, 0.2);
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
}
.timing-slider {
width: 100%;
height: 10px;
border-radius: 6px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 250, 252, 0.1) 100%);
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
position: relative;
border: 1px solid var(--card-border);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Light theme timing slider */
:root[data-theme="light"] .timing-slider {
background: linear-gradient(135deg, rgba(226, 232, 240, 0.8) 0%, rgba(203, 213, 225, 0.8) 100%);
border: 1px solid rgba(148, 163, 184, 0.3);
}
.timing-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
cursor: pointer;
box-shadow:
0 4px 14px rgba(14, 165, 233, 0.4),
0 0 0 4px rgba(14, 165, 233, 0.1),
0 0 0 1px rgba(14, 165, 233, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.timing-slider::-webkit-slider-thumb:hover {
transform: scale(1.25);
box-shadow:
0 6px 24px rgba(14, 165, 233, 0.6),
0 0 0 6px rgba(14, 165, 233, 0.2),
0 0 0 1px rgba(14, 165, 233, 0.3);
}
.timing-slider::-webkit-slider-thumb:active {
transform: scale(1.15);
}
.timing-slider::-moz-range-thumb {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
cursor: pointer;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 4px 14px rgba(14, 165, 233, 0.4),
0 0 0 4px rgba(14, 165, 233, 0.1);
transition: all 0.3s ease;
}
.timing-slider::-moz-range-thumb:hover {
transform: scale(1.25);
box-shadow:
0 6px 24px rgba(14, 165, 233, 0.6),
0 0 0 6px rgba(14, 165, 233, 0.2);
}
.timing-description {
font-size: 0.95rem;
color: var(--text-secondary);
margin-top: 1rem;
line-height: 1.7;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-left: 4px solid var(--accent-blue);
}
/* Light theme timing description */
:root[data-theme="light"] .timing-description {
color: #64748b;
background: rgba(241, 245, 249, 0.6);
border-left: 4px solid rgba(14, 165, 233, 0.3);
}
/* ===== DEVICE NAME SECTION ===== */
.device-name-section {
margin-bottom: 1.5rem;
padding: 2.5rem;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 250, 252, 0.1) 100%);
border-radius: 16px;
border: 2px solid var(--card-border);
box-shadow:
var(--shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
/* Light theme device name section */
:root[data-theme="light"] .device-name-section {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
border: 2px solid rgba(226, 232, 240, 0.6);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.device-name-section:hover {
border-color: rgba(14, 165, 233, 0.5);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transform: translateY(-3px);
}
.device-name-section .timing-label {
margin-bottom: 1.5rem;
}
#deviceNameInput {
width: 100%;
padding: 1.25rem 1.5rem;
border: 2px solid var(--card-border);
border-radius: 12px;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--card-bg);
font-weight: 600;
color: var(--text-primary);
box-shadow: var(--shadow);
}
/* Light theme device name input */
:root[data-theme="light"] #deviceNameInput {
border: 2px solid rgba(203, 213, 225, 0.7);
background: rgba(255, 255, 255, 0.9);
color: #1e293b;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
#deviceNameInput:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow:
0 0 0 4px rgba(0, 212, 255, 0.15),
0 6px 16px rgba(0, 212, 255, 0.2),
0 2px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
background: var(--secondary-bg);
}
/* Light theme device name input focus */
:root[data-theme="light"] #deviceNameInput:focus {
border-color: #0ea5e9;
box-shadow:
0 0 0 4px rgba(14, 165, 233, 0.15),
0 6px 16px rgba(14, 165, 233, 0.2),
0 2px 8px rgba(0, 0, 0, 0.1);
background: white;
}
#deviceNameInput::placeholder {
color: var(--text-muted);
font-weight: 500;
}
/* Light theme device name input placeholder */
:root[data-theme="light"] #deviceNameInput::placeholder {
color: #94a3b8;
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
.container {
grid-template-columns: 1fr min(95vw, 1000px) 1fr;
gap: 1.5rem;
}
.config-sections {
gap: 1.5rem;
}
.config-section {
padding: 1.75rem;
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
padding: 1.5rem;
gap: 1.5rem;
}
.container > * {
grid-column: 1;
}
.header {
padding: 2.5rem 2rem;
}
.header h1 {
font-size: 2.25rem;
}
.header p {
font-size: 1rem;
}
.content {
padding: 1.5rem;
}
.config-sections {
gap: 1.25rem;
}
.config-section {
padding: 1.5rem;
}
.button-group {
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
gap: 1rem;
padding: 1.5rem;
}
.section-title {
font-size: 1.5rem;
}
.actions {
grid-template-columns: 1fr;
gap: 1rem;
}
.reset-btn, .save-btn, .bootloader-btn {
min-height: 56px;
font-size: 1rem;
}
.connect-btn {
padding: 1.125rem 2.25rem;
font-size: 1.1rem;
}
.timing-control {
padding: 1.75rem;
}
.advanced-timing-controls {
gap: 1.5rem;
}
}
@media (max-width: 480px) {
.container {
padding: 1rem;
gap: 1rem;
}
.header {
padding: 2rem 1.5rem;
}
.header h1 {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.header p {
font-size: 0.95rem;
max-width: none;
}
.content {
padding: 1rem;
}
.config-sections {
gap: 1rem;
}
.config-section.collapsed .section-content {
padding: 0 1.25rem;
}
.config-section:not(.collapsed) .section-content {
padding: 0 1.25rem 1.25rem 1.25rem;
}
.button-group {
grid-template-columns: 80px 80px 80px;
grid-template-rows: 80px 80px 80px;
gap: 0.75rem;
padding: 1.25rem;
}
.button-card {
padding: 0.75rem;
}
.button-icon {
font-size: 1.5rem;
}
.button-label {
font-size: 0.8rem;
}
.legend-header {
padding: 0.5rem 0.75rem;
}
.legend-title {
font-size: 0.8rem;
}
.section-title {
font-size: 1.4rem;
gap: 0.75rem;
}
.section-title::before,
.section-title::after {
width: 24px;
height: 3px;
}
.connect-btn {
padding: 1rem 1.75rem;
font-size: 1rem;
}
.reset-btn, .save-btn, .bootloader-btn {
padding: 1.25rem 1.5rem;
font-size: 0.95rem;
min-height: 52px;
}
.timing-control {
padding: 1.5rem;
}
.timing-label {
font-size: 1rem;
margin-bottom: 1rem;
}
.timing-value {
font-size: 1.2rem;
padding: 0.375rem 0.875rem;
}
.device-name-section {
padding: 2rem 1.5rem;
}
.info {
padding: 2rem 1.5rem;
}
.info h3 {
font-size: 1.3rem;
}
.info p {
font-size: 1rem;
}
}
/* Animations and interactions */
.card {
animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.15s; }
.card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.button-card {
transform: scale(1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.button-card:active {
transform: scale(0.92) translateY(-2px);
}
.connect-btn svg {
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
.connect-btn:hover svg {
transform: scale(1.15) rotate(5deg);
}
.save-btn svg, .reset-btn svg {
position: relative;
z-index: 1;
}
/* Button click ripple effect */
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
/* Loading animation for connect button */
.connect-btn.loading {
position: relative;
color: transparent;
}
.connect-btn.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Success animation */
@keyframes successPulse {
0% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
25% {
transform: scale(1.02);
box-shadow: 0 8px 30px rgba(14, 165, 233, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(14, 165, 233, 0.4);
}
75% {
transform: scale(1.02);
box-shadow: 0 8px 30px rgba(14, 165, 233, 0.3);
}
100% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
}
.status.success {
animation: successPulse 1.5s ease-in-out;
}
/* Smooth focus transitions */
input:focus, button:focus {
outline: 2px solid #0ea5e9;
outline-offset: 2px;
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== TIMING CONTROLS THEMING ===== */
/* Make timing controls green like repeat-mode buttons to show they only apply to repeat-mode buttons */
/* Keep all control values white (default text color) */
#timingControls .control-value {
color: var(--text-primary) !important;
}
/* Make debounce value white (not green) */
#debounceValue {
color: var(--text-primary) !important;
}
/* Target slider thumbs within timing group (repeat timing controls) */
#timingControls > div[style*="background: linear-gradient"] .slider::-webkit-slider-thumb {
background: var(--success) !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
#timingControls > div[style*="background: linear-gradient"] .slider::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.3) !important;
}
#timingControls > div[style*="background: linear-gradient"] .slider::-moz-range-thumb {
background: var(--success) !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
#timingControls > div[style*="background: linear-gradient"] .slider::-moz-range-thumb:hover {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.3) !important;
}
/* Make debounce slider thumb hard 50/50 green/orange split */
#debounceSlider::-webkit-slider-thumb {
background: linear-gradient(90deg, var(--success) 0%, var(--success) 50%, var(--warning) 50%, var(--warning) 100%) !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
#debounceSlider::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.3) !important;
}
#debounceSlider::-moz-range-thumb {
background: linear-gradient(90deg, var(--success) 0%, var(--success) 50%, var(--warning) 50%, var(--warning) 100%) !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
#debounceSlider::-moz-range-thumb:hover {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.3) !important;
}
/* Optional: Also make focus states green for repeat timing controls */
#timingControls > div[style*="background: linear-gradient"] .slider:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4) !important;
}
/* ===== FIRMWARE UPDATE ANIMATIONS ===== */
.animate-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ===== CHANGELOG MODAL ===== */
.changelog-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
}
.changelog-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 1;
}
.changelog-container {
position: relative;
z-index: 2;
background: var(--secondary-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 1200px;
max-height: 90vh;
width: 90%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.changelog-header {
display: flex;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 2px solid var(--card-border);
background: var(--card-bg);
position: relative;
}
.changelog-title {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
flex: 1;
}
.close-changelog-btn {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
}
.close-changelog-btn:hover {
border-color: var(--error);
color: var(--error);
background: rgba(239, 68, 68, 0.1);
transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2);
}
.changelog-body {
padding: 2rem;
overflow-y: auto;
flex: 1;
}
.changelog-version {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
}
.changelog-version:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: rgba(0, 212, 255, 0.2);
}
.changelog-version:last-child {
margin-bottom: 0;
}
.changelog-version-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
gap: 1rem;
}
.changelog-version-number {
font-size: 1.3rem;
font-weight: 600;
color: var(--accent-blue);
}
.changelog-version-date {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
}
.changelog-changes {
margin-left: 0;
padding-left: 1rem;
}
.changelog-changes li {
margin-bottom: 0.5rem;
line-height: 1.5;
color: var(--text-primary);
}
.changelog-breaking {
margin-top: 1rem;
padding: 1rem;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: var(--border-radius);
border-left: 4px solid var(--error);
}
.changelog-breaking h4 {
margin: 0 0 0.5rem 0;
color: var(--error);
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.changelog-breaking ul {
margin: 0;
padding-left: 1rem;
}
.changelog-breaking li {
color: var(--text-primary);
font-weight: 500;
}
/* ===== INLINE STYLES MOVED FROM INDEX.PHP ===== */
/* Notification container - initially hidden */
.notification-container {
display: none;
}
.notification-container.visible {
display: block;
}
/* Firmware update panel specific styles */
.firmware-update-panel .control-label:first-of-type {
margin-bottom: 6px;
}
.firmware-update-panel .control-label:nth-of-type(2) {
margin-top: 10px;
margin-bottom: 6px;
}
.firmware-update-panel .control-group > div:nth-child(3) {
margin-top: 12px;
}
#changelogBtn {
width: 100%;
margin-top: 1rem
}
/* Battery status panel specific styles */
.battery-status-panel .control-label {
margin-bottom: 6px;
}
/* How It Works card content styles */
.card[id="how-it-works"] > div {
color: var(--text-secondary);
line-height: 1.6;
}
.card[id="how-it-works"] ol {
padding-left: 20px;
}
/* Device naming warning paragraph */
.slider-description p {
color: var(--warning);
font-weight: 500;
margin-top: 8px;
}
/* Manual modal - initially hidden */
.manual-modal {
display: none;
}
/* Changelog modal - initially hidden */
.changelog-modal {
display: none;
}
/* ===== INLINE STYLES MOVED FROM JAVASCRIPT ===== */
/* Content visibility states */
.main-content.hidden {
display: none;
}
.manual-modal.visible {
display: flex;
}
.changelog-modal.visible {
display: flex;
}
/* Modal overlay states */
body.modal-open {
overflow: hidden;
}
/* Firmware update progress */
.firmware-update-btn {
--progress-percent: 0%;
}
/* Timing controls styling */
.timing-group {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.05) 100%);
border: 1px solid rgba(226, 232, 240, 0.3);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
position: relative;
}
/* Light theme timing group */
:root[data-theme="light"] .timing-group {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
border: 2px solid rgba(226, 232, 240, 0.6);
}
.timing-title {
margin: 0 0 1.5rem 0;
color: var(--success);
font-size: 1.1rem;
font-weight: 600;
text-align: center;
}
/* Control opacity states */
.control-group.fade-in {
opacity: 1;
transition: opacity 0.3s ease;
}
.control-group.fade-out {
opacity: 0.5;
transition: opacity 0.3s ease;
}
/* Button visibility states */
.btn-sidebar.visible {
display: flex;
}
.btn-sidebar.hidden {
display: none;
}
/* Notification animations */
.notification-container.fade-out {
animation: notificationFadeOut 0.3s ease-out forwards;
}
/* Battery status colors */
.battery-fill.low {
fill: var(--error);
}
.battery-fill.medium {
fill: var(--warning);
}
.battery-fill.high {
fill: var(--success);
}
.battery-level.low {
color: var(--error);
}
.battery-level.medium {
color: var(--warning);
}
.battery-level.high {
color: var(--success);
}
/* Changelog content styling */
.changelog-placeholder {
color: var(--text-secondary);
text-align: center;
}
.main-content.config-disabled {
pointer-events: none;
opacity: 0.35;
user-select: none;
filter: grayscale(0.4);
transition: opacity 0.3s ease, filter 0.3s ease;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.changelog-container {
width: 95%;
max-height: 95vh;
}
.changelog-header {
padding: 1rem 1.5rem;
}
.changelog-title {
font-size: 1.5rem;
}
.changelog-body {
padding: 0;
}
.changelog-version {
border: none;
padding: 1rem 0;
margin-bottom: 1.5rem;
}
}
/* ===== QUICK START WIZARD ===== */
/* ── Hide header + expand overlays when quick start is active (mobile) ── */
@media (max-width: 1200px) {
body.qs-active .top-header {
display: none;
}
body.qs-active .quickstart-modal,
body.qs-active .done-screen {
top: 0;
}
}
/* ── Done Screen ────────────────────────────────────────────── */
.done-screen {
display: none;
position: fixed;
top: 5rem;
left: 0;
right: 0;
bottom: 0;
z-index: 1003;
background: var(--primary-bg);
align-items: center;
justify-content: center;
flex-direction: column;
padding: 2rem;
}
.done-screen.visible {
display: flex;
}
.done-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 420px;
gap: 1rem;
}
.done-icon {
font-size: 5rem;
line-height: 1;
}
.done-title {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
}
.done-description {
font-size: 1.05rem;
color: var(--text-secondary);
line-height: 1.75;
margin: 0;
}
.done-configurator-link {
margin-top: 0.5rem;
font-size: 0.85rem;
}
/* ── Quick Start Modal ──────────────────────────────────────── */
.quickstart-modal {
display: none;
position: fixed;
top: 5rem; /* Below top header */
left: 0;
right: 0;
bottom: 0;
z-index: 1002;
background: rgba(275, 275, 275, 0.75);
backdrop-filter: blur(6px);
align-items: center;
justify-content: center;
padding: 0.5rem;
}
.quickstart-modal.visible {
display: flex;
}
.quickstart-container {
background: var(--secondary-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 560px;
max-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.quickstart-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan), var(--accent-purple));
}
.quickstart-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--card-border);
background: var(--card-bg);
gap: 1rem;
flex-shrink: 0;
}
.quickstart-progress {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.quickstart-step-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.quickstart-dots {
display: flex;
gap: 0.35rem;
align-items: center;
}
.quickstart-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--card-border);
transition: var(--transition);
flex-shrink: 0;
}
.quickstart-dot.active {
background: var(--accent-blue);
box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
transform: scale(1.3);
}
.quickstart-dot.completed {
background: var(--success);
}
.quickstart-close-btn {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
color: var(--text-secondary);
cursor: pointer;
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
font-weight: 500;
transition: var(--transition);
white-space: nowrap;
flex-shrink: 0;
}
.quickstart-close-btn:hover {
border-color: var(--text-muted);
color: var(--text-primary);
background: var(--tertiary-bg);
}
.quickstart-body {
padding: 2rem 1.5rem;
overflow-y: auto;
flex: 1;
}
/* Step content */
.qs-step {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.qs-icon {
font-size: 2.5rem;
text-align: center;
}
.qs-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
text-align: center;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
}
.qs-description {
font-size: 1rem;
color: var(--text-secondary);
text-align: center;
line-height: 1.6;
margin: 0;
}
.qs-instructions {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.qs-instructions p {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.qs-instructions p strong {
color: var(--text-primary);
}
.qs-connected-status {
text-align: center;
font-weight: 600;
color: var(--success);
font-size: 1rem;
padding: 0.75rem;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: var(--border-radius);
}
.qs-btn-row {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
margin-top: 0.5rem;
align-items: center;
}
.qs-btn-row.centered {
justify-content: center;
}
.qs-btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
color: var(--primary-bg);
border: none;
border-radius: var(--border-radius);
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.qs-btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.35);
}
.qs-btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.qs-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--card-bg);
color: var(--text-secondary);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
}
.qs-btn-secondary:hover:not(:disabled) {
border-color: var(--text-muted);
color: var(--text-primary);
background: var(--tertiary-bg);
}
/* Side selector */
.qs-side-toggle {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.qs-side-option {
flex: 1;
max-width: 180px;
padding: 1.25rem;
border: 2px solid var(--card-border);
border-radius: var(--border-radius);
background: var(--card-bg);
cursor: pointer;
transition: var(--transition);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.qs-side-option:hover {
border-color: var(--text-muted);
}
.qs-side-option.selected {
border-color: var(--accent-blue);
background: rgba(0, 212, 255, 0.08);
box-shadow: 0 0 0 1px var(--accent-blue);
}
.qs-side-img {
width: 90px;
height: 90px;
object-fit: contain;
transition: var(--transition);
opacity: 0.7;
}
.qs-side-option.selected .qs-side-img {
opacity: 1;
}
.qs-side-option-label {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.qs-side-option.selected .qs-side-option-label {
color: var(--accent-blue);
}
.qs-hint {
font-size: 0.82rem;
color: var(--text-muted);
text-align: center;
line-height: 1.4;
margin: 0;
}
/* Button waiting indicator */
.qs-waiting-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border: 2px dashed var(--card-border);
border-radius: var(--border-radius);
background: var(--card-bg);
transition: var(--transition);
}
.qs-waiting-indicator.assigned {
border-color: var(--success);
border-style: solid;
background: rgba(16, 185, 129, 0.06);
}
.qs-waiting-pulse {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(0, 212, 255, 0.15);
border: 2px solid var(--accent-blue);
display: flex;
align-items: center;
justify-content: center;
animation: qsPulse 1.5s ease-in-out infinite;
font-size: 1.25rem;
}
.qs-waiting-indicator.assigned .qs-waiting-pulse {
background: rgba(16, 185, 129, 0.15);
border-color: var(--success);
animation: none;
}
@keyframes qsPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
}
.qs-waiting-text {
font-size: 0.95rem;
color: var(--text-secondary);
text-align: center;
font-weight: 500;
}
.qs-waiting-indicator.assigned .qs-waiting-text {
color: var(--success);
font-weight: 600;
}
/* Done step */
.qs-summary {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.qs-summary-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
.qs-summary-item svg {
flex-shrink: 0;
color: var(--success);
}
.qs-save-status {
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
padding: 0.5rem;
}
/* Nav item style for Quick Start */
.nav-item-quickstart {
background: rgba(0, 212, 255, 0.06);
border-color: rgba(0, 212, 255, 0.25) !important;
color: var(--accent-blue) !important;
}
.nav-item-quickstart:hover {
background: rgba(0, 212, 255, 0.12) !important;
}
.nav-item-quickstart.active {
background: var(--accent-blue) !important;
color: var(--primary-bg) !important;
}
/* Demo mode link */
.qs-demo-link {
background: none;
border: none;
color: var(--accent-blue);
cursor: pointer;
font-size: inherit;
font-family: inherit;
padding: 0;
text-decoration: underline;
text-decoration-style: dotted;
transition: var(--transition);
}
.qs-demo-link:hover {
color: var(--accent-cyan);
}
/* Demo button crosses */
.qs-demo-crosses {
display: flex;
gap: 2rem;
justify-content: center;
align-items: flex-start;
}
.qs-cross-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.qs-cross-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.qs-cross-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 0.25rem;
width: 138px;
aspect-ratio: 1;
}
.qs-cross-btn {
background: var(--card-bg);
border: 2px solid var(--card-border);
border-radius: var(--border-radius);
color: var(--text-secondary);
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
aspect-ratio: 1;
width: 100%;
}
.qs-cross-btn:hover {
border-color: var(--accent-blue);
color: var(--accent-blue);
background: rgba(0, 212, 255, 0.08);
transform: scale(1.1);
box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}
/* empty grid cells (no button) */
.qs-cross-grid > :empty,
.qs-cross-grid > span {
pointer-events: none;
}
/* Recommendation hint (used on PTT assignment steps) */
.qs-hint-recommend {
display: inline-block;
background: rgba(0, 212, 255, 0.07);
border: 1px solid rgba(0, 212, 255, 0.25);
border-radius: var(--border-radius);
padding: 0.35rem 0.75rem;
font-size: 0.82rem;
color: var(--accent-blue);
margin-bottom: 0.25rem;
}
/* ── Flight computer selection ─────────────────────────────────────────── */
.qs-fc-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0.5rem 0 1rem;
}
.qs-fc-option {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem 1rem;
background: var(--card-bg);
border: 2px solid var(--card-border);
border-radius: var(--border-radius);
color: var(--text-primary);
font-size: 0.95rem;
font-family: inherit;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
text-align: left;
}
.qs-fc-option:hover:not(:disabled) {
border-color: var(--accent-blue);
background: rgba(0, 212, 255, 0.06);
color: var(--accent-blue);
}
.qs-fc-option.selected {
border-color: var(--accent-blue);
background: rgba(0, 212, 255, 0.1);
color: var(--accent-blue);
}
.qs-fc-disabled {
opacity: 0.45;
cursor: not-allowed;
}
.qs-fc-pending-badge {
font-size: 0.75rem;
font-weight: 400;
font-style: italic;
margin-left: 0.5rem;
}
/* ── Inline PTT conflict warning (shown after button press) ───────────── */
.qs-conflict-warning {
margin-top: 0.75rem;
padding: 0.65rem 0.9rem;
background: rgba(255, 180, 0, 0.08);
border: 1px solid rgba(255, 180, 0, 0.35);
border-radius: var(--border-radius);
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.5;
}
.qs-conflict-warning strong {
color: var(--text-primary);
}
/* ── Conflict warnings (summary block, kept for reference) ─────────────── */
.qs-warnings {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0 0.5rem;
}
.qs-warning-item {
padding: 0.65rem 0.9rem;
background: rgba(255, 180, 0, 0.08);
border: 1px solid rgba(255, 180, 0, 0.35);
border-radius: var(--border-radius);
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.45;
}
.qs-warning-item strong {
color: var(--text-primary);
}
@media (max-width: 768px) {
.quickstart-body {
padding: 1.5rem 1.25rem;
}
.qs-title {
font-size: 1.25rem;
}
.qs-side-option {
padding: 1rem;
}
.qs-demo-crosses {
gap: 1rem;
}
.qs-cross-grid {
width: 114px;
}
}