/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #9DB4C3 0%, #B5A6B8 100%);
    min-height: 100vh;
    color: #333;
    overflow: hidden;
}

/* Container */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: none;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;
}

.header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 10;
}

.header h1 i {
    color: #8FA1B3;
    position: relative;
    z-index: 10;
}

.header-controls {
    display: flex;
    gap: 1rem;
}

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    position: relative;
    overflow: visible;
    background: transparent !important;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    color: #a0aec0;
}

.btn:disabled:hover,
.btn[disabled]:hover {
    transform: none;
}

.btn-primary {
    color: #8FA1B3;
}

.btn-primary:hover {
    color: #7B8FA3;
}

.btn-danger {
    color: #C9A19F;
}

.btn-danger:hover {
    color: #B89190;
}

/* Header specific buttons - black text and icons */
.header-controls #clearAll,
.header-controls #simulate {
    color: #2d3748 !important;
    transition: all 0.2s ease;
}

.header-controls #clearAll:hover,
.header-controls #simulate:hover {
    color: #1a202c !important;
    transform: translateY(-1px);
}

.header-controls #clearAll:active,
.header-controls #simulate:active {
    transform: translateY(0);
    color: #ffffff !important;
}

.header-controls #clearAll i,
.header-controls #simulate i {
    color: #2d3748 !important;
}

.header-controls #clearAll:hover i,
.header-controls #simulate:hover i {
    color: #1a202c !important;
}

.header-controls #clearAll:active i,
.header-controls #simulate:active i {
    color: #ffffff !important;
}

.btn-success {
    color: #A3B9A6;
}

.btn-success:hover {
    color: #93A996;
}

.btn-warning {
    color: #C9B19F;
}

.btn-warning:hover {
    color: #B8A190;
}

.btn-secondary {
    color: #A8ADB3;
}

.btn-secondary:hover {
    color: #98A0A6;
}

/* Main Content */
.main-content {
    display: flex;
    flex: 1;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
}

/* Panels */
.left-panel, .right-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.left-panel {
    flex: 1;
    min-width: 400px;
    max-width: 50%;
}

.right-panel {
    flex: 1;
    min-width: 400px;
    max-width: 50%;
}

.panel-header {
    padding: 1rem 1.5rem;
    border-bottom: none;
    background: rgba(143, 161, 179, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    overflow: visible; /* 允许标题栏里的下拉选择溢出显示 */
}

.panel-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 10;
}

.panel-header i {
    color: #8FA1B3;
    position: relative;
    z-index: 10;
}

/* 标题栏右侧动作区与分隔线 */
.panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-header-divider {
    width: 1px;
    height: 28px;
    background: rgba(0, 0, 0, 0.15);
    margin-left: 0.75rem;
}

/* Toolbar */
.toolbar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: rgba(248, 250, 252, 0.8);
    /* 允许tooltip显示在toolbar容器之外 */
    overflow: visible;
    position: relative;
}

.tool-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tool-group.drawing-tools {
    gap: 0.5rem;
}

.tool-group.delete-tools {
    gap: 0.5rem;
}

.toolbar-divider {
    width: 1px;
    height: 32px;
    background: rgba(0, 0, 0, 0.15);
    margin: 0 1rem;
    flex-shrink: 0;
}

.tool-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #4a5568;
    position: relative;
    overflow: visible;
}

.tool-btn:hover {
    color: #8FA1B3;
}

.tool-btn.active,
.tool-btn:active {
    color: #8FA1B3;
}

.tool-btn.active i,
.tool-btn:active i {
    color: #8FA1B3;
}

/* ---- Right sim-controls collapsible sections ---- */
.sim-section {
    padding: 1rem 1.5rem; /* 与左侧模式面板内容一致 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(248, 250, 252, 0.8);
}

.sim-section.hidden {
    display: none;
}

.tool-group.sim-tools {
    gap: 0.5rem;
}

.sim-section-btn {
    width: 40px;
    height: 40px;
}

.sim-section-btn.active {
    background: #8FA1B3;
    border-color: #8FA1B3;
    color: #fff;
}

.slider {
    width: 240px; /* 给滑杆更合理的宽度，提升可用性与对齐感 */
    height: 4px;
    border-radius: 2px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
    position: relative;
    z-index: 10;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8FA1B3;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8FA1B3;
    cursor: pointer;
    border: none;
}

/* ---- Simulation form layout tuning ---- */
/* 统一各控件行的标签宽度与对齐，使 Print Mode / Speed / Work Area 排版更整齐 */
.sim-controls .control-group {
    align-items: center;
}

.sim-controls .control-group label {
    width: 160px;
    min-width: 160px;
}

/* 滑速数值更易读并与滑杆对齐 */
#speedValue {
    min-width: 36px;
    text-align: left;
    font-weight: 600;
    color: #2d3748;
    position: relative;
    z-index: 10;
}

/* 工作区域输入框尺寸与间距优化 */
.work-area-inputs input {
    width: 72px;
}

.work-area-inputs span {
    margin: 0 0.25rem;
    color: #4a5568;
}

/* 模式选项之间的间距略增，视觉更舒适 */
.print-mode-selector {
    gap: 0.75rem;
}


/* Canvas Containers */
.canvas-container, .sim-canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    margin: 1rem;
    border-radius: 8px;
    background: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

/* 确保canvas不受rough.js装饰影响 */
.canvas-container > canvas,
.sim-canvas-container > div {
    position: relative;
    z-index: 2;
}

/* Rough.js SVG覆盖层基础样式 */
.rough-overlay,
.rough-button-overlay,
.rough-tool-overlay,
.rough-circle-overlay,
.rough-line-overlay,
.rough-input-overlay {
    pointer-events: none;
    user-select: none;
}

/* 确保UI元素内容在rough装饰之上 */
.btn > *:not(svg),
.tool-btn > *:not(svg),
.step-circle > *:not(svg),
.shape-btn > *:not(svg),
.object-shape-btn > *:not(svg) {
    position: relative;
    z-index: 2;
}

/* 确保所有文本内容在装饰层上方 */
h1, h2, h3, h4, h5, h6,
span, label, p, a, input, select, textarea {
    position: relative;
    z-index: 2;
}

#drawingCanvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

#threejsCanvas {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#threejsCanvas canvas {
    display: block;
    /* 让Three.js完全控制canvas的尺寸 */
}

/* Simulation Controls */
.sim-controls {
    padding: 0; /* 使用内部toolbar自身的内边距，使与左侧一致 */
    border-bottom: none; /* 去掉多余的下边线 */
    background: transparent; /* 透明背景，与左侧一致 */
}

.control-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

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

.control-group label {
    font-weight: 500;
    color: #4a5568;
    min-width: 120px;
    position: relative;
    z-index: 10;
}

.work-area-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 10;
}

.work-area-inputs input {
    width: 60px;
    padding: 0.25rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.work-area-inputs span {
    position: relative;
    z-index: 10;
}

/* Info Sections */
.path-info, .sim-info {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(248, 250, 252, 0.8);
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
}

.info-item {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9rem;
    position: relative;
    z-index: 10;
}

.info-item span:first-child {
    font-weight: 500;
    color: #4a5568;
    position: relative;
    z-index: 10;
}

.info-item span:last-child {
    color: #2d3748;
    font-weight: 600;
    position: relative;
    z-index: 10;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .main-content {
        flex-direction: column;
    }
    
    .left-panel, .right-panel {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .main-content {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .toolbar {
        padding: 0.75rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .toolbar-divider {
        height: 28px;
        margin: 0 0.75rem;
    }
    
    .tool-btn {
        width: 36px;
        height: 36px;
    }
    
    .tool-group.drawing-tools {
        gap: 0.4rem;
    }
    
    .tool-group.delete-tools {
        gap: 0.4rem;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Notification Styles */
.notification {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    word-wrap: break-word;
    transition: opacity 0.3s ease, transform 0.3s ease, top 0.3s ease;
    cursor: pointer;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-content i {
    font-size: 16px;
}

.notification:hover {
    opacity: 0.9;
    transform: translateX(-50%) translateY(-2px);
}

/* Notification Types */
.notification-info {
    background-color: #3182ce;
}

.notification-success {
    background-color: #38a169;
}

.notification-warning {
    background-color: #d69e2e;
}

.notification-error {
    background-color: #e53e3e;
}

/* Status Indicators */
.status-ready { color: #38a169; }
.status-running { color: #3182ce; }
.status-paused { color: #d69e2e; }
.status-error { color: #e53e3e; }

/* Shape Tool Container */
.shape-tool-container {
    position: relative;
    display: inline-block;
}

/* Shape Selector Styles */
.shape-selector {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-radius: 0;
    padding: 0.5rem;
    display: flex;
    gap: 0.25rem;
    box-shadow: none;
    z-index: 100;
    margin-top: 0.25rem;
}

.shape-selector.hidden {
    display: none;
}

.shape-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #4a5568;
    position: relative;
}

.shape-btn:hover {
    color: #8FA1B3;
    transform: scale(1.05);
}

.shape-btn.active {
    color: #8FA1B3;
}

.shape-btn.active i {
    color: #8FA1B3;
}


/* Tooltip Styles */
[title] {
    position: relative;
}

[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #2d3748;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: max-content;
    animation: fadeInTooltip 0.2s ease-out;
    pointer-events: none;
}

[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2d3748;
    z-index: 9999;
    margin-bottom: 3px;
    pointer-events: none;
}

/* 为toolbar中的按钮优化tooltip位置和对齐 */
.toolbar [title]:hover::after {
    left: 50%;
    transform: translateX(-50%);
    max-width: 180px;
    overflow: visible;
    text-overflow: ellipsis;
    margin-bottom: 8px;
    animation: fadeInTooltipToolbar 0.2s ease-out;
    z-index: 10000;
    pointer-events: none;
}

.toolbar [title]:hover::before {
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 3px;
    z-index: 9999;
    pointer-events: none;
}

/* 当屏幕宽度较小时，进一步调整tooltip位置 */
@media (max-width: 768px) {
    .toolbar [title]:hover::after {
        left: 50%;
        max-width: 150px;
        margin-bottom: 8px;
        z-index: 10000;
        overflow: visible;
    }

    .toolbar [title]:hover::before {
        left: 50%;
        margin-bottom: 3px;
        z-index: 9999;
    }
}

/* 通用tooltip动画效果 */
@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* toolbar按钮tooltip专用动画，确保位置计算正确 */
@keyframes fadeInTooltipToolbar {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Mode Panel Styles */
.mode-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mode-panel.hidden {
    display: none;
}

/* Object Selector Styles */
.object-selector-container {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(248, 250, 252, 0.8);
}

.object-selector-container label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.object-select {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
}

.object-select:hover {
    border-color: #667eea;
}

.object-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #4a5568;
    pointer-events: none;
    font-size: 0.8rem;
}

/* Object Tools */
.tool-group.object-tools {
    gap: 0.5rem;
}

/* Object Selector Tool Container */
.object-selector-tool-container {
    position: relative;
    display: inline-block;
}

/* Object Shape Selector Styles */
.object-shape-selector {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-radius: 0;
    padding: 0.5rem;
    display: flex;
    gap: 0.25rem;
    box-shadow: none;
    z-index: 100;
    margin-top: 0.25rem;
}

.object-shape-selector.hidden {
    display: none;
}

.object-shape-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #4a5568;
    position: relative;
}

.object-shape-btn:hover {
    color: #8FA1B3;
    transform: scale(1.05);
}

.object-shape-btn.active {
    color: #8FA1B3;
}

.object-shape-btn.active i {
    color: #8FA1B3;
}

/* Workspace Canvas Styles */
#workspaceCanvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
    display: block;
    object-fit: contain;
}

/* 确保画布容器保持正确比例 */
#workspaceContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* JS会根据打印床尺寸覆盖这个值, 默认为1:1 */
    aspect-ratio: 1 / 1;
}

.canvas-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Robot Status Indicators */
.status-ready { color: #38a169; }
.status-placing { color: #3182ce; }
.status-setting-target { color: #d69e2e; }
.status-simulating { color: #9f7aea; }
.status-completed { color: #38a169; }

/* Mode Toggle Active States */
.btn-secondary.robot-mode {
    background: #8FA1B3;
}

.btn-secondary.robot-mode:hover {
    background: #7B8FA3;
}

/* Printer Control Styles */
.print-mode-selector {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.mode-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.6rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    transition: all 0.2s;
}

.mode-option:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

.mode-option:has(input:checked) {
    background: rgba(143, 161, 179, 0.15);
    border-color: #8FA1B3;
}

.mode-option input[type="radio"] {
    cursor: pointer;
    margin: 0;
}

.mode-option span {
    font-size: 0.875rem;
    color: #4a5568;
    font-weight: 500;
}

.printer-controls {
    display: none;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.printer-controls.active {
    display: block;
}

/* 减少打印机控制组内的间距 */
.printer-controls .control-group {
    margin-bottom: 0;
}

/* Stepper for Real Print */
.stepper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin-bottom: 0;
    width: 100%;
    justify-content: space-between;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 0.9rem;
    position: relative;
    overflow: visible;
}

.step.active .step-circle {
    background: transparent;
    color: #8FA1B3;
    border: none;
}

.step.completed .step-circle {
    background: transparent;
    color: #A3B9A6;
    border: none;
}

.step-label {
    font-size: 0.75rem;
    color: #4a5568;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    z-index: 10;
    text-align: center;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    min-width: 16px;
    max-width: 40px;
    align-self: flex-start;
    margin-top: 17px;
}

.step-connector.completed {
    background: #A3B9A6;
}

/* Printer control card */
.printer-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.7); /* 降低透明度使其更轻盈 */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px; /* 减小圆角 */
    padding: 0.6rem; /* 减小内边距 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* 减小阴影 */
}

.printer-card .card-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem; /* 略微减小字体 */
    font-weight: 600; /* 从700降至600 */
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.printer-card .card-title i {
    font-size: 0.9rem; /* 图标略小 */
}

.button-grid.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    width: 100%;
}

/* Remove extra bottom margin inside button grids to keep equal heights */
.button-grid .btn-block {
    margin-bottom: 0;
}

/* 优化打印机控制中的按钮尺寸 */
.printer-controls .btn-block {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
}

.printer-controls .btn-block i {
    font-size: 1rem;
}

/* 确保按钮在2x2网格中保持一致高度 */
.printer-card .button-grid.two-col .btn-block {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .button-grid.two-col {
        grid-template-columns: 1fr;
    }
}

/* Hide simulation controls in real print mode */
.sim-only-control {
    display: block;
}

.sim-only-control.hidden {
    display: none;
}

/* Hide 3D canvas in real print mode */
.sim-canvas-container {
    display: block;
}

.sim-canvas-container.hidden {
    display: none !important;
}

/* Hide simulation info in real print mode */
.sim-info {
    display: flex;
}

.sim-info.hidden {
    display: none !important;
}

/* Printer model display */
.printer-select {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 2px solid #D4DBDF;
    background: rgba(248, 250, 252, 0.8);
    font-size: 0.875rem;
    color: #2d3748;
    position: relative;
    z-index: 10;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
}

.printer-select.readonly {
    cursor: default;
}

.printer-select:hover {
    border-color: #8FA1B3;
    background: rgba(248, 250, 252, 0.95);
}

/* Button block style for full width */
.btn-block {
    width: 100%;
    margin-bottom: 0.5rem;
}

.btn-block:last-child {
    margin-bottom: 0;
}

/* Better button spacing */
.control-group button {
    font-size: 0.875rem;
}

/* 优化打印机控制组内的label样式 */
.printer-controls .control-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
    min-width: auto;
    position: relative;
    z-index: 10;
    margin-bottom: 0.75rem;
    display: block;
}

/* Connection & Print 布局调整 */
.printer-controls .control-group:has(.button-grid) {
    flex-direction: column;
    align-items: stretch;
}

.printer-controls .control-group:has(.button-grid) label {
    margin-bottom: 0.75rem;
}

/* Stepper专用的control-group */
.printer-controls .control-group:has(.stepper) {
    margin-bottom: 1.25rem;
    flex-direction: column;
    align-items: stretch;
}

.printer-controls .control-group:has(.printer-select) {
    margin-bottom: 1rem;
    flex-direction: column;
    align-items: stretch;
}

.printer-status {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0;
    padding: 1rem 1.5rem;
    margin-top: 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: none;
    position: relative;
}

.printer-status.active {
    display: block;
}

.printer-status .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    font-size: 0.875rem;
    position: relative;
    z-index: 10;
}

.printer-status .info-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.printer-status .info-item span {
    position: relative;
    z-index: 10;
}

.printer-status .info-item span:first-child {
    font-weight: 600;
    color: #4a5568;
}

.printer-status .info-item span:last-child {
    font-weight: 500;
}

.status-disconnected {
    color: #e53e3e;
    font-weight: 500;
}

.status-connected {
    color: #38a169;
    font-weight: 500;
}

.status-connecting {
    color: #d69e2e;
    font-weight: 500;
}

.status-printing {
    color: #3182ce;
    font-weight: 500;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .printer-select {
        font-size: 0.8rem;
    }
    
    .mode-option span {
        font-size: 0.8rem;
    }
    
    .control-group button {
        font-size: 0.8rem;
    }
}