/* ===== 全局变量 ===== */
:root {
    --primary: #4a90d9;
    --primary-dark: #3a7bc8;
    --primary-light: rgba(74,144,217,0.12);
    --success: #27ae60;
    --warning: #f39c12;
    --danger: #e74c3c;
    --bg: #f5f6fa;
    --bg-dark: #1a1a2e;
    --surface: #fff;
    --surface-border: #eee;
    --text: #333;
    --text-secondary: #888;
    --text-muted: #bbb;
    --tab-height: 56px;
    --radius: 12px;
    --radius-sm: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); overflow:hidden; -webkit-tap-highlight-color:transparent; user-select:none; }

#app { height:100%; display:flex; flex-direction:column; }

/* ===== Tab Bar ===== */
.tab-bar { height:var(--tab-height); display:flex; background:#fff; border-top:1px solid #eee; flex-shrink:0; z-index:100; }
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:10px; padding:4px 0; }
.tab-item .tab-icon { font-size:22px; }
.tab-item.active { color:var(--primary); }

/* ===== Main Content ===== */
.main-content { flex:1; overflow:hidden; position:relative; background:var(--bg); }
.page { display:none; height:100%; }
.page.active { display:block; }
.page-scroll { height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 16px 80px; }

/* ===== 首页: 设备状态卡片 ===== */
.device-status-card {
    border-radius:16px; padding:20px; margin-bottom:16px;
    background: linear-gradient(135deg, #4a90d9, #357abd);
    color:#fff; box-shadow:0 4px 16px rgba(74,144,217,0.3);
}
.device-status-card.disconnected {
    background: linear-gradient(135deg, #8e9eab, #6c7a89);
    box-shadow:0 4px 16px rgba(0,0,0,0.1);
}
.card-top { display:flex; align-items:center; gap:14px; }
.robot-avatar { font-size:42px; }
.device-main-info { flex:1; }
.device-main-info h2 { font-size:18px; font-weight:600; margin-bottom:2px; }
.device-main-info p { font-size:13px; opacity:0.8; }
.connect-action { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.connect-icon { font-size:24px; font-weight:300; }

.device-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.2); }
.stat-item { text-align:center; }
.stat-icon { font-size:16px; display:block; }
.stat-val { display:block; font-size:14px; font-weight:600; margin:2px 0; }
.stat-label { font-size:10px; opacity:0.7; }

/* ===== Section ===== */
.section { margin-bottom:20px; }
.section-title { font-size:14px; font-weight:600; color:var(--text-secondary); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.section-title .close-btn { font-size:16px; cursor:pointer; color:var(--text-muted); padding:0 4px; }

/* ===== 快捷操作 ===== */
.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.action-card { background:var(--surface); border-radius:var(--radius); padding:14px 8px; text-align:center; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.06); transition:transform 0.2s; }
.action-card:active { transform:scale(0.95); }
.action-icon { font-size:28px; margin-bottom:4px; }
.action-name { font-size:12px; color:var(--text-secondary); }

/* ===== 引导测试流程 ===== */
.guide-flow { display:flex; flex-direction:column; gap:0; margin-bottom:12px; }
.guide-step-item { display:flex; align-items:center; gap:12px; padding:8px 0; }
.step-circle { width:32px; height:32px; border-radius:50%; border:2px solid #ddd; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--text-muted); flex-shrink:0; background:#f9f9f9; }
.step-circle.done { border-color:var(--success); background:var(--success); color:#fff; }
.step-circle.current { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.step-info { display:flex; flex-direction:column; }
.step-title { font-size:14px; font-weight:500; }
.step-status { font-size:11px; color:var(--text-muted); }
.step-status.done { color:var(--success); }
.step-status.current { color:var(--primary); }
.guide-line { width:2px; height:16px; background:#ddd; margin-left:15px; }
.guide-line.done { background:var(--success); }

/* ===== 信息列表 ===== */
.info-list { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #f0f0f0; }
.info-row:last-child { border-bottom:none; }
.info-label { font-size:14px; color:var(--text-secondary); }
.info-value { font-size:14px; font-weight:500; }

/* ===== 设备页 ===== */
.connect-methods { display:flex; flex-direction:column; gap:8px; }
.method-card { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--surface); border-radius:var(--radius); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.06); transition:transform 0.2s; }
.method-card:active { transform:scale(0.98); }
.method-icon { font-size:28px; }
.method-info { flex:1; }
.method-name { font-size:15px; font-weight:500; display:block; }
.method-desc { font-size:12px; color:var(--text-muted); }
.method-arrow { font-size:20px; color:var(--text-muted); }

/* BLE 兼容性提示 */
.compat-hint { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#fff8e1; border-radius:var(--radius-sm); margin-top:8px; font-size:13px; color:#8d6e00; }
.compat-hint .hint-icon { font-size:16px; flex-shrink:0; }
.compat-hint strong { color:#e65100; }

/* WiFi 表单 */
.sub-tabs { display:flex; background:#eee; border-radius:var(--radius-sm); padding:2px; margin-bottom:12px; }
.sub-tab { flex:1; padding:8px; border:none; border-radius:6px; background:transparent; color:var(--text-secondary); font-size:13px; cursor:pointer; }
.sub-tab.active { background:#fff; color:var(--text); font-weight:500; box-shadow:0 1px 3px rgba(0,0,0,0.1); }

.form-group { margin-bottom:10px; }
.input { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:var(--radius-sm); background:#fff; font-size:14px; outline:none; }
.input:focus { border-color:var(--primary); }

.history-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.history-tag { padding:4px 10px; background:#f0f0f0; border-radius:12px; font-size:12px; color:var(--text-secondary); cursor:pointer; }
.history-tag:hover { background:var(--primary-light); color:var(--primary); }

/* 扫描指示器 */
.scan-indicator { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--primary); }
.spinner { width:14px; height:14px; border:2px solid #ddd; border-top-color:var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 设备列表 */
.device-list { display:flex; flex-direction:column; gap:8px; }
.device-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border-radius:var(--radius); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.device-item:active { background:#f0f0f0; }
.device-item .icon { font-size:28px; }
.device-item .info { flex:1; }
.device-item .name { font-size:14px; font-weight:500; display:block; }
.device-item .id { font-size:11px; color:var(--text-muted); }
.device-item .rssi-badge { padding:2px 8px; border-radius:10px; font-size:11px; background:#e8f5e9; color:var(--success); }

/* 已连接设备卡片 */
.device-card { padding:16px; background:var(--surface); border-radius:var(--radius); box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.device-card.connected { border:1px solid var(--primary-light); }
.device-card-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.device-avatar { font-size:36px; }
.device-card-info { flex:1; }
.device-card-name { font-size:16px; font-weight:600; display:block; }
.device-card-id { font-size:11px; color:var(--text-muted); }
.device-status-badge { padding:3px 10px; border-radius:10px; font-size:11px; font-weight:500; }
.device-status-badge.online { background:#e8f5e9; color:var(--success); }
.device-status-badge.offline { background:#f5f5f5; color:var(--text-muted); }
.device-card-actions { display:flex; gap:8px; }
.device-card-actions .btn-danger { background:var(--danger); color:#fff; border:none; }
.device-card-actions .btn-primary-outline { background:#fff; border:1px solid var(--primary); color:var(--primary); }

.empty-hint { text-align:center; padding:24px; color:var(--text-muted); font-size:13px; }

/* ===== 我的页面 ===== */
.profile-header { display:flex; align-items:center; gap:14px; padding:20px 0; margin-bottom:8px; }
.profile-avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#4a90d9,#27ae60); display:flex; align-items:center; justify-content:center; font-size:28px; }
.profile-name { font-size:18px; font-weight:600; display:block; }
.profile-desc { font-size:13px; color:var(--text-secondary); }

.history-list { display:flex; flex-direction:column; gap:6px; }
.history-item { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border-radius:var(--radius-sm); box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.history-item .h-icon { font-size:20px; }
.history-item .h-info { flex:1; }
.history-item .h-name { font-size:13px; font-weight:500; display:block; }
.history-item .h-time { font-size:11px; color:var(--text-muted); }

.menu-list { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.menu-item { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.menu-item:last-child { border-bottom:none; }
.menu-item:active { background:#f5f5f5; }
.menu-icon { font-size:20px; }
.menu-text { flex:1; font-size:14px; }
.menu-arrow { color:var(--text-muted); font-size:16px; }
.menu-extra { font-size:12px; color:var(--text-muted); }

/* 参数列表 */
.param-list { background:var(--surface); border-radius:var(--radius); padding:12px 16px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.param-row { display:flex; align-items:center; gap:8px; padding:6px 0; }
.param-label { font-size:13px; color:var(--text-secondary); min-width:56px; }
.param-val { font-size:14px; font-weight:600; min-width:28px; text-align:right; }

/* Switch */
.switch { position:relative; width:44px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; inset:0; background:#ddd; border-radius:12px; cursor:pointer; transition:background 0.2s; }
.switch .slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.2s; }
.switch input:checked + .slider { background:var(--primary); }
.switch input:checked + .slider::before { transform:translateX(20px); }

/* ===== 全屏面板(遥控/校准) ===== */
.fullscreen-panel { position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column; }
.panel-header { height:48px; display:flex; align-items:center; padding:0 12px; background:#fff; border-bottom:1px solid #eee; flex-shrink:0; }
.back-btn { border:none; background:none; font-size:22px; color:var(--primary); cursor:pointer; padding:4px 8px; }
.panel-title { flex:1; text-align:center; font-size:16px; font-weight:600; }
.panel-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.panel-body { flex:1; overflow-y:auto; padding:12px 16px; -webkit-overflow-scrolling:touch; }

/* ===== 遥控 ===== */
.ctrl-section { margin-bottom:14px; background:#fff; border-radius:var(--radius); padding:12px 14px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }

.gait-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gait-btn { padding:10px 4px; border:2px solid #eee; border-radius:var(--radius-sm); background:#fff; cursor:pointer; text-align:center; transition:all 0.2s; }
.gait-btn .icon { font-size:20px; display:block; }
.gait-btn span:last-child { font-size:12px; color:var(--text-secondary); }
.gait-btn.active { border-color:var(--primary); background:var(--primary-light); }
.gait-btn.active span:last-child { color:var(--primary); }

.height-control { display:flex; align-items:center; gap:8px; }
.ctrl-val { font-size:16px; font-weight:700; min-width:28px; text-align:right; }
.height-presets { display:flex; gap:6px; margin-top:8px; justify-content:center; }
.btn-xs { padding:4px 14px; font-size:12px; }

.joystick-section { padding:8px !important; }
.joystick-area { display:flex; justify-content:space-around; padding:8px 0; }
.joystick-container { display:flex; flex-direction:column; align-items:center; }
.joystick-label { font-size:11px; color:var(--text-muted); margin-bottom:6px; }
.joystick { width:140px; height:140px; border-radius:50%; background:#f5f5f5; border:2px solid #e0e0e0; position:relative; touch-action:none; cursor:pointer; }
.joystick-cross { position:absolute; top:50%; left:50%; width:60%; height:60%; transform:translate(-50%,-50%); }
.joystick-cross::before,.joystick-cross::after { content:''; position:absolute; background:rgba(0,0,0,0.08); }
.joystick-cross::before { top:50%; left:0; right:0; height:1px; }
.joystick-cross::after { left:50%; top:0; bottom:0; width:1px; }
.joystick-handle { position:absolute; width:50px; height:50px; background:rgba(74,144,217,0.5); border:2px solid var(--primary); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; }
.joystick-handle.active { background:rgba(74,144,217,0.8); box-shadow:0 0 12px rgba(74,144,217,0.4); }
.joystick-values { font-size:11px; font-family:monospace; color:var(--primary); margin-top:4px; }

.action-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.action-btn { padding:10px 4px; border:none; border-radius:var(--radius-sm); background:#f5f6fa; cursor:pointer; font-size:13px; transition:all 0.2s; }
.action-btn:active { background:#e8e9ed; transform:scale(0.96); }

.collapse-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:#fff; border-radius:var(--radius); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.arrow { font-size:12px; transition:transform 0.3s; }
.arrow.up { transform:rotate(180deg); }

.switch-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.posture-row { display:flex; align-items:center; gap:6px; padding:4px 0; }
.posture-row .label { font-size:12px; color:var(--text-secondary); min-width:40px; }
.ctrl-val-sm { font-size:13px; font-weight:500; min-width:30px; text-align:right; }

.emergency-stop { position:absolute; bottom:20px; right:16px; width:60px; height:60px; border-radius:50%; background:var(--danger); border:none; color:#fff; font-weight:700; font-size:14px; cursor:pointer; box-shadow:0 4px 12px rgba(231,76,60,0.4); z-index:10; }

/* ===== 校准 ===== */
.step-card { text-align:center; padding:24px 16px; background:#fff; border-radius:var(--radius); margin:12px 0; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.step-icon { font-size:48px; margin-bottom:10px; }
.step-card h3 { font-size:18px; margin-bottom:6px; }
.step-card p { font-size:13px; color:var(--text-secondary); line-height:1.6; }
.step-nav { display:flex; gap:10px; margin-top:12px; }
.step-nav .btn { flex:1; }

.result-msg { text-align:center; padding:12px; border-radius:var(--radius-sm); font-size:14px; margin:8px 0; }
.result-msg.success { background:#e8f5e9; color:var(--success); }
.result-msg.fail { background:#fdeaea; color:var(--danger); }

.progress-bar { height:4px; background:#eee; border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:var(--primary); transition:width 0.3s; }
.progress-text { text-align:right; font-size:12px; color:var(--text-muted); margin:4px 0; }

.selector-group { margin-bottom:14px; }
.selector-label { font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.selector-buttons { display:flex; gap:6px; }
.sel-btn { flex:1; padding:8px; border:1px solid #ddd; border-radius:var(--radius-sm); background:#fff; cursor:pointer; font-size:13px; }
.sel-btn.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }

.fine-control { background:#fff; border-radius:var(--radius); padding:16px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,0.06); margin-bottom:14px; }
.fine-info { font-size:14px; color:var(--text-secondary); margin-bottom:8px; }
.fine-offset { font-size:42px; font-weight:700; color:var(--primary); margin-bottom:10px; }
.step-size-selector { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:12px; }
.step-size-selector span { font-size:13px; color:var(--text-secondary); }
.step-btn { padding:4px 10px; border:1px solid #ddd; border-radius:12px; background:#fff; font-size:12px; cursor:pointer; }
.step-btn.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.adjust-row { display:flex; gap:8px; justify-content:center; }
.adjust-btn { min-width:64px; background:var(--primary); color:#fff; border:none; }
.adjust-btn:active { background:var(--primary-dark); }

.offset-overview { background:#fff; border-radius:var(--radius); padding:12px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.offset-row { display:flex; align-items:center; gap:4px; padding:4px 0; }
.offset-row .leg-name { font-size:11px; color:var(--primary); font-weight:600; min-width:28px; }
.offset-cells { display:flex; gap:4px; flex:1; }
.offset-cell { flex:1; text-align:center; padding:4px 2px; background:#f5f6fa; border-radius:4px; border:1px solid transparent; font-size:12px; }
.offset-cell.active { border-color:var(--primary); background:var(--primary-light); }
.offset-cell .jname { display:block; font-size:9px; color:#888; font-weight:500; }

.action-row { display:flex; gap:8px; }
.action-row .btn { flex:1; }

/* ===== 按钮 ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border:none; border-radius:var(--radius-sm); font-size:14px; cursor:pointer; transition:all 0.2s; }
.btn:active { transform:scale(0.96); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-secondary { background:#f0f0f0; color:var(--text); border:1px solid #ddd; }
.btn-outline { background:#fff; border:1px solid #ccc; color:#555; }
.btn-warning-outline { background:#fff; border:1px solid var(--warning); color:var(--warning); }
.btn-danger-outline { background:#fff; border:1px solid var(--danger); color:var(--danger); }
.btn-primary-outline { background:#fff; border:1px solid var(--primary); color:var(--primary); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-block { width:100%; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }

/* ===== Toast ===== */
.toast-container { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { padding:8px 20px; border-radius:20px; font-size:13px; color:#fff; pointer-events:auto; white-space:nowrap; animation:toastIn 0.3s,toastOut 0.3s 2.7s; }
.toast.info { background:rgba(74,144,217,0.92); }
.toast.success { background:rgba(39,174,96,0.92); }
.toast.error { background:rgba(231,76,60,0.92); }
.toast.warn { background:rgba(243,156,18,0.92); }
@keyframes toastIn { from { opacity:0; transform:translateY(-16px); } }
@keyframes toastOut { to { opacity:0; transform:translateY(-16px); } }

/* ===== Modal ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:400; display:flex; align-items:center; justify-content:center; }
.modal-box { background:#fff; border-radius:16px; padding:24px; max-width:320px; width:85%; }
.modal-title { font-size:16px; font-weight:600; margin-bottom:10px; }
.modal-body { font-size:14px; color:var(--text-secondary); margin-bottom:18px; line-height:1.6; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; }

/* ===== Range ===== */
input[type="range"] { flex:1; height:4px; -webkit-appearance:none; appearance:none; background:#e0e0e0; border-radius:2px; outline:none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--primary); cursor:pointer; }
input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--primary); cursor:pointer; border:none; }

/* ===== 响应式 ===== */
@media(min-width:768px) {
    .page-scroll { max-width:500px; margin:0 auto; }
    .joystick { width:170px; height:170px; }
    .joystick-handle { width:58px; height:58px; }
}

/* ===== 深色模式 ===== */
body.dark-mode {
    --bg:#121220; --surface:#1e1e32; --surface-border:#2a2a44;
    --text:#eee; --text-secondary:#999; --text-muted:#555;
    --primary-light:rgba(74,144,217,0.2);
}
body.dark-mode .device-status-card.disconnected { background:linear-gradient(135deg,#3a3a52,#2a2a42); }
body.dark-mode .action-card,.dark-mode .method-card,.dark-mode .info-list,.dark-mode .menu-list,.dark-mode .ctrl-section,.dark-mode .step-card,.dark-mode .fine-control,.dark-mode .offset-overview { background:var(--surface); box-shadow:none; }
body.dark-mode .device-item { background:var(--surface); }
body.dark-mode .sub-tab.active { background:var(--surface); color:var(--text); }
body.dark-mode .input { background:var(--surface); border-color:var(--surface-border); color:var(--text); }
body.dark-mode .panel-header,.dark-mode .collapse-header { background:var(--surface); border-color:var(--surface-border); }
body.dark-mode .sel-btn { background:var(--surface); border-color:var(--surface-border); color:var(--text); }
body.dark-mode .btn-outline { background:var(--surface); border-color:var(--primary); color:var(--primary); }
body.dark-mode .reset-btn { background:var(--primary); color:#fff; }
body.dark-mode .offset-cell { background:rgba(74,144,217,0.12); border:1px solid rgba(74,144,217,0.25); }
body.dark-mode .offset-val { color:var(--primary); font-weight:600; }
body.dark-mode .leg-name { color:var(--primary); font-weight:600; }
body.dark-mode .jname { color:#aaa; }