* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0d1117; color: #c9d1d9; min-height: 100vh; font-size: 14px; }

/* 浅色主题 */
body.light { background: #f6f8fa; color: #24292f; }
body.light .toolbar { background: #fff; border-color: #d0d7de; box-shadow: 0 1px 0 rgba(27,31,36,.04); }
body.light .toolbar h1 { color: #0969da; }
body.light .server-card { background: #fff; border-color: #d0d7de; }
body.light .server-header { border-color: #d0d7de; color: #24292f; }
body.light .server-item { border-color: #d0d7de; }
body.light .server-label { color: #656d76; }
body.light .server-value { color: #24292f; }
body.light .device-card { background: #fff; border-color: #d0d7de; }
body.light .device-header { border-color: #d0d7de; }
body.light .device-name { color: #24292f; }
body.light .device-meta { color: #656d76; }
body.light .prop-card { background: #f6f8fa; border-color: #d0d7de; }
body.light .prop-card .prop-name { color: #656d76; }
body.light .prop-card .prop-value { color: #24292f; }
body.light .prop-card.bool .prop-value { color: #1a7f37; }
body.light .prop-card.bool.off .prop-value { color: #cf222e; }
body.light .prop-card button.toggle { background: #fff; border-color: #d0d7de; color: #24292f; }
body.light .btn { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
body.light .btn:hover { background: #eaeef2; }
body.light .log-area { border-color: #d0d7de; }
body.light .log-line { border-color: #eaeef2; }
body.light .log-line.info { color: #656d76; }
body.light .log-line.send { color: #8250df; }
body.light .log-line.receive { color: #1a7f37; }
body.light .log-line .ts { color: #afb8c1; }
body.light .theme-btn { border-color: #d0d7de; color: #24292f; }
body.light .theme-btn:hover { background: #eaeef2; }
body.light .collapse-btn { color: #656d76; }
body.light .collapse-btn:hover { color: #24292f; }
body.light .delta-flash { background: #ddf4ff; }

.toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; background: #161b22; border-bottom: 1px solid #21262d; }
.toolbar h1 { font-size: 15px; color: #58a6ff; font-weight: 600; }
.theme-btn { background: none; border: 1px solid #30363d; border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 14px; color: #c9d1d9; }
.theme-btn:hover { background: #21262d; }

.main { padding: 16px 24px; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

/* 服务器卡片 */
.server-card { background: #161b22; border: 1px solid #21262d; border-radius: 10px; overflow: hidden; }
.server-header { padding: 10px 18px; font-size: 13px; font-weight: 600; color: #8b949e; border-bottom: 1px solid #21262d; text-transform: uppercase; letter-spacing: .5px; }
.server-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .server-grid { grid-template-columns: repeat(2, 1fr); } }
.server-item { padding: 10px 18px; border-right: 1px solid #21262d; display: flex; flex-direction: column; gap: 2px; }
.server-item:last-child { border-right: none; }
.server-label { font-size: 10px; color: #484f58; text-transform: uppercase; letter-spacing: .4px; }
.server-value { font-size: 12px; font-weight: 500; font-family: "SF Mono","Fira Code",monospace; }
body.light .server-value { font-family: "SF Mono","Fira Code",monospace; }

/* 设备卡片行 */
.devices-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .devices-row { grid-template-columns: 1fr; } }

/* 设备卡片 */
.device-card { background: #161b22; border: 1px solid #21262d; border-radius: 10px; overflow: hidden; }
.device-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #21262d; }
.device-header-left { display: flex; flex-direction: column; gap: 1px; }
.device-name { font-size: 15px; font-weight: 600; }
.device-meta { font-size: 10px; color: #484f58; font-family: "SF Mono","Fira Code",monospace; }

.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.status-badge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-badge.online { background: #1a7f3722; color: #3fb950; }
.status-badge.online .dot { background: #3fb950; box-shadow: 0 0 6px #3fb95088; }
.status-badge.offline { background: #da363322; color: #f85149; }
.status-badge.offline .dot { background: #f85149; }

.header-actions { display: flex; align-items: center; gap: 8px; }

.btn { padding: 5px 14px; border-radius: 6px; border: 1px solid #30363d; background: #21262d; color: #c9d1d9; cursor: pointer; font-size: 12px; font-weight: 500; transition: all .15s; white-space: nowrap; }
.btn:hover { background: #30363d; }
.btn-connect { background: #1a7f37; border-color: #2ea043; color: #fff; }
.btn-connect:hover { background: #2ea043; }
.btn-disconnect { background: #da3633; border-color: #f85149; color: #fff; }
.btn-disconnect:hover { background: #f85149; }

/* 属性网格 */
.properties { padding: 14px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.prop-card { background: #0d1117; border: 1px solid #21262d; border-radius: 8px; padding: 12px; text-align: center; transition: background .3s; }
.prop-card.delta-flash { background: #1a3a5c; border-color: #58a6ff; }
.prop-card .prop-name { font-size: 10px; color: #484f58; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.prop-card .prop-value { font-size: 20px; font-weight: 700; line-height: 1.2; }
.prop-card .prop-unit { font-size: 11px; color: #484f58; margin-left: 2px; }
.prop-card.bool .prop-value { color: #3fb950; }
.prop-card.bool.off .prop-value { color: #f85149; }
.prop-card button.toggle { width: 100%; margin-top: 7px; padding: 4px; border-radius: 4px; border: 1px solid #30363d; background: #21262d; color: #c9d1d9; cursor: pointer; font-size: 11px; }
.prop-card button.toggle:hover { background: #30363d; }

/* 日志区域 */
.log-toggle { padding: 6px 18px; border-top: 1px solid #21262d; }
.collapse-btn { background: none; border: none; color: #484f58; cursor: pointer; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.collapse-btn:hover { color: #8b949e; }
.log-area { border-top: 1px solid #21262d; max-height: 120px; overflow-y: auto; font-family: "SF Mono","Fira Code",monospace; font-size: 10px; padding: 6px 18px; }
.log-area.collapsed { display: none; }
.log-line { padding: 2px 0; border-bottom: 1px solid #0d1117; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-line .ts { color: #30363d; margin-right: 6px; }
.log-line.send { color: #d2a8ff; }
.log-line.receive { color: #7ee787; }
.log-line.info { color: #484f58; }
.log-line.warn { color: #d29922; }
.log-line.error { color: #f85149; }

.loading { text-align: center; color: #484f58; padding: 60px; grid-column: 1 / -1; }

/* 编辑按钮 */
.btn-edit { background: transparent; border: 1px dashed #30363d; color: #8b949e; }
.btn-edit:hover { border-color: #58a6ff; color: #58a6ff; background: #1f6feb11; }
body.light .btn-edit { border-color: #d0d7de; color: #656d76; }
body.light .btn-edit:hover { border-color: #0969da; color: #0969da; }

/* 编辑弹窗 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 999; display: flex; align-items: center; justify-content: center; }
.modal-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; width: 420px; max-width: 90vw; overflow: hidden; }
body.light .modal-card { background: #fff; border-color: #d0d7de; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #21262d; }
body.light .modal-header { border-color: #d0d7de; }
.modal-header h2 { font-size: 16px; font-weight: 600; color: #c9d1d9; }
body.light .modal-header h2 { color: #24292f; }
.modal-close { background: none; border: none; color: #8b949e; font-size: 22px; cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: #f85149; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid #21262d; display: flex; justify-content: flex-end; gap: 8px; }
body.light .modal-footer { border-color: #d0d7de; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 11px; color: #8b949e; text-transform: uppercase; letter-spacing: .3px; }
.form-group input { padding: 8px 12px; border-radius: 6px; border: 1px solid #30363d; background: #0d1117; color: #c9d1d9; font-size: 13px; font-family: "SF Mono","Fira Code",monospace; }
body.light .form-group input { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
.form-group input:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 2px #1f6feb22; }

.btn-primary { background: #1f6feb; border-color: #388bfd; color: #fff; }
.btn-primary:hover { background: #388bfd; }
.btn-cancel { background: transparent; border-color: #30363d; color: #c9d1d9; }
.btn-cancel:hover { background: #21262d; }

.btn-delete { background: transparent; border-color: #da363322; color: #f85149; }
.btn-delete:hover { background: #da363322; border-color: #f85149; }

.status-badge.ota { background: #d2992222; color: #d29922; font-size: 10px; }

/* Broker 输入 */
.server-item-full { grid-column: 1 / -1; border-right: none; }
.broker-input { width: 100%; padding: 6px 10px; border-radius: 6px; border: 1px solid #30363d; background: #0d1117; color: #c9d1d9; font-size: 12px; font-family: "SF Mono","Fira Code",monospace; }
.broker-input:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 2px #1f6feb22; }
body.light .broker-input { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }

/* 模板选择区 */
.template-section { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.template-label { font-size: 12px; color: #8b949e; font-weight: 600; white-space: nowrap; }
.template-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-template { background: #1f6feb11; border-color: #1f6feb44; color: #58a6ff; }
.btn-template:hover { background: #1f6feb22; border-color: #58a6ff; }
.btn-create { background: #3fb95011; border-color: #3fb95044; color: #3fb950; }
.btn-create:hover { background: #3fb95022; border-color: #3fb950; }
.btn-import { background: #d2992211; border-color: #d2992244; color: #d29922; }
.btn-import:hover { background: #d2992222; border-color: #d29922; }
body.light .btn-template { background: #ddf4ff; border-color: #54aeff66; color: #0969da; }
body.light .btn-create { background: #dafbe1; border-color: #4ac26b66; color: #1a7f37; }
body.light .btn-import { background: #fff8c5; border-color: #d4a72c66; color: #9a6700; }