/* =========================================================
   米家智能家居管理系统 - 样式
   浅色家居控制台，主色：米家橙
   ========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#f2f5f2; --bg2:#ffffff; --card:#ffffff; --card2:#f7f9f7;
  --line:#e1e7e2; --line2:#cbd6ce;
  --text:#203129; --muted:#52665a; --dim:#6b7e72;
  --accent:#e95718; --accent2:#bd4616;
  --green:#16845a; --red:#b83f43; --yellow:#a17213; --blue:#32729a;
  --radius:8px;
}
html, body { height:100%; }
body {
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; overflow:hidden;
}
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#2a3343; border-radius:4px; }
::-webkit-scrollbar-track { background:transparent; }
button { font-family:inherit; }
a { color:var(--accent2); text-decoration:none; }
input, select, textarea {
  font-family:inherit; background:#10141d; color:var(--text);
  border:1px solid var(--line2); border-radius:8px; padding:8px 10px; font-size:13px; outline:none;
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
svg { display:block; }

/* ---------- 布局 ---------- */
.app { display:flex; height:100vh; }
.sidebar {
  width:224px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 12px;
}
.brand { display:flex; align-items:center; gap:10px; padding:0 8px 18px; }
.brand-logo { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#ff6900,#ff9432); display:flex; align-items:center; justify-content:center; }
.brand-name { font-size:16px; font-weight:700; color:#fff; line-height:1.2; }
.brand-sub { font-size:11px; color:var(--dim); }
.nav { flex:1; display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.nav-item {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  color:var(--muted); cursor:pointer; font-size:13.5px; transition:background .15s,color .15s;
}
.nav-item svg { width:18px; height:18px; }
.nav-item:hover { color:var(--text); background:var(--card); }
.nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(255,105,0,.18),rgba(255,105,0,.06)); }
.nav-item.active svg { color:var(--accent); }
.sidebar-foot { border-top:1px solid var(--line); padding-top:12px; }
.user-chip { display:flex; align-items:center; gap:9px; padding:8px 10px; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.user-info { flex:1; min-width:0; }
.user-name { font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:11px; color:var(--dim); }
.logout-btn { padding:8px; border:none; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px; }
.logout-btn:hover { color:var(--red); background:var(--card); }
.logout-btn svg { width:17px; height:17px; }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  height:56px; flex-shrink:0; display:flex; align-items:center; gap:14px;
  padding:0 22px; border-bottom:1px solid var(--line); background:var(--bg2);
}
.page-title { font-size:17px; font-weight:700; color:#fff; }
.page-sub { font-size:12px; color:var(--dim); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.search-box { position:relative; }
.search-box input { width:220px; padding-left:32px; border-color:var(--line); }
.search-box svg { position:absolute; left:9px; top:8px; width:15px; height:15px; color:var(--dim); }
.content { flex:1; overflow-y:auto; padding:20px 22px 30px; }

/* ---------- 通用组件 ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.card-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.card-title svg { width:16px; height:16px; color:var(--accent); }
.muted { color:var(--muted); }
.dim { color:var(--dim); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 16px; border-radius:9px; border:1px solid var(--line2);
  background:var(--card2); color:var(--text); font-size:13px; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.btn svg { width:15px; height:15px; }
.btn:hover { border-color:var(--accent); color:#fff; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn.primary:hover { background:var(--accent2); }
.btn.danger { border-color:#5a2430; color:#ff8090; }
.btn.danger:hover { background:#3a1620; }
.btn.danger-outline { border-color:#5a2430; color:#ff8090; }
.btn.danger-outline:hover { background:#3a1620; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn.ghost:hover { color:#fff; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { padding:5px 11px; font-size:12px; border-radius:7px; }
.btn-lg { padding:11px 22px; font-size:14px; }

.chip {
  display:inline-flex; align-items:center; gap:5px; padding:5px 13px; border-radius:20px;
  border:1px solid var(--line2); color:var(--muted); font-size:12.5px; cursor:pointer; background:var(--card);
}
.chip.active { color:#fff; border-color:var(--accent); background:rgba(255,105,0,.14); }
.chip svg { width:13px; height:13px; }
.device-toolbar { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
.tag {
  display:inline-block; padding:2px 9px; border-radius:5px; font-size:11px;
  background:rgba(74,168,255,.13); color:var(--blue);
}
.tag.green { background:rgba(61,220,132,.12); color:var(--green); }
.tag.red { background:rgba(255,84,112,.12); color:var(--red); }
.tag.yellow { background:rgba(255,197,61,.12); color:var(--yellow); }
.tag.red { background:rgba(255,84,112,.12); color:var(--red); }
.tag.orange { background:rgba(255,105,0,.14); color:var(--accent2); }
.tag.gray { background:#222a37; color:var(--muted); }

.badge-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.badge-dot.on { background:var(--green); box-shadow:0 0 6px rgba(61,220,132,.7); }
.badge-dot.off { background:#4a5468; }

/* 统计卡 */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; align-items:center; gap:14px; }
.stat-icon { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon svg { width:22px; height:22px; }
.stat-icon.orange { background:rgba(255,105,0,.15); color:var(--accent2); }
.stat-icon.green { background:rgba(61,220,132,.13); color:var(--green); }
.stat-icon.blue { background:rgba(74,168,255,.13); color:var(--blue); }
.stat-icon.yellow { background:rgba(255,197,61,.13); color:var(--yellow); }
.stat-num { font-size:24px; font-weight:800; color:#fff; line-height:1.1; }
.stat-label { font-size:12px; color:var(--muted); margin-top:2px; }

.panel-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-top:14px; }
.panel-grid .col { display:flex; flex-direction:column; gap:14px; min-width:0; }

/* 房间卡 */
.room-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.room-card { background:var(--card2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; }
.room-name { font-size:13.5px; font-weight:600; color:#fff; display:flex; align-items:center; gap:7px; }
.room-name svg { width:15px; height:15px; color:var(--accent2); }
.room-meta { font-size:12px; color:var(--muted); margin-top:4px; display:flex; gap:10px; }
.room-bar { height:4px; border-radius:2px; background:#232b39; margin-top:9px; overflow:hidden; }
.room-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); }

/* 类型分布 */
.type-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.type-bar-label { width:76px; font-size:12px; color:var(--muted); flex-shrink:0; }
.type-bar-track { flex:1; height:8px; background:#232b39; border-radius:4px; overflow:hidden; }
.type-bar-track i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.type-bar-num { width:38px; text-align:right; font-size:12px; color:#fff; }

/* 设备网格 */
.device-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:13px; }
.device-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; cursor:pointer; transition:border-color .15s, transform .15s; position:relative;
}
.device-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.device-head { display:flex; align-items:flex-start; gap:11px; }
.device-icon { width:42px; height:42px; border-radius:11px; background:rgba(255,105,0,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.device-icon svg { width:22px; height:22px; color:var(--accent2); }
.device-icon.power-on { background:rgba(255,105,0,.22); }
.device-name { font-size:14px; font-weight:700; color:#fff; }
.device-type { font-size:11.5px; color:var(--dim); margin-top:2px; }
.device-room { position:absolute; top:15px; right:15px; font-size:11px; color:var(--dim); background:#222a37; padding:2px 8px; border-radius:10px; }
.device-state { font-size:12px; color:var(--muted); margin-top:11px; display:flex; align-items:center; gap:7px; }
.device-foot { display:flex; align-items:center; gap:8px; margin-top:12px; }
.driver-badge { font-size:10.5px; color:var(--dim); }

/* 场景卡 */
.scene-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:13px; }
.scene-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.scene-icon { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.scene-icon svg { width:20px; height:20px; }
.scene-name { font-size:15px; font-weight:700; color:#fff; }
.scene-desc { font-size:12px; color:var(--muted); margin:7px 0 11px; min-height:34px; line-height:1.6; }
.scene-actions { display:flex; align-items:center; gap:8px; }

/* 表格 */
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; color:var(--muted); font-weight:600; font-size:12px; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(255,105,0,.035); }

/* 日志 */
.log-type { display:inline-flex; align-items:center; gap:5px; }
.log-list { display:flex; flex-direction:column; }
.log-item { display:flex; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); font-size:12.5px; }
.log-item:last-child { border-bottom:none; }
.log-time { color:var(--dim); flex-shrink:0; font-variant-numeric:tabular-nums; }
.log-action { font-weight:600; color:#fff; }
.log-detail { color:var(--muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- 弹窗 ---------- */
.overlay {
  position:fixed; inset:0; background:rgba(6,8,12,.68); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.modal { width:560px; max-width:94vw; max-height:88vh; overflow:auto; background:var(--bg2); border:1px solid var(--line2); border-radius:16px; padding:22px 24px; }
.modal.wide { width:760px; }
.modal-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.modal-title { font-size:16px; font-weight:700; color:#fff; flex:1; }
.modal-close { background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:20px; line-height:1; padding:4px 7px; border-radius:7px; }
.modal-close:hover { color:#fff; background:var(--card); }
.form-label { display:block; font-size:12.5px; color:var(--muted); margin:13px 0 6px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-row { display:flex; gap:10px; align-items:center; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.room-manage-list { display:grid; gap:8px; max-height:42vh; overflow-y:auto; }
.room-manage-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
.room-manage-row input { width:100%; min-width:0; }
.mi-sync-list { max-height:46vh; overflow-y:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mi-sync-row { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.mi-sync-row:last-child { border-bottom:0; }
.mi-sync-name { min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mi-sync-name small { display:block; color:var(--dim); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.mi-sync-result { max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 控件：开关 / 滑杆 / 分段选择 */
.ctl-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); }
.ctl-row:last-child { border-bottom:none; }
.ctl-label { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.ctl-value { font-size:12px; color:var(--accent2); min-width:52px; text-align:right; font-variant-numeric:tabular-nums; }
.toggle { width:46px; height:25px; border-radius:13px; background:#2a3343; position:relative; cursor:pointer; transition:background .18s; flex-shrink:0; }
.toggle i { position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#8b93a5; transition:left .18s,background .18s; }
.toggle.on { background:var(--accent); }
.toggle.on i { left:24px; background:#fff; }
input[type=range] { -webkit-appearance:none; appearance:none; width:170px; height:5px; border-radius:3px; background:#2a3343; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid #fff; }
.seg { display:flex; gap:5px; flex-wrap:wrap; }
.seg span { padding:5px 12px; border-radius:7px; background:#222a37; color:var(--muted); font-size:12px; cursor:pointer; border:1px solid transparent; }
.seg span.active { background:rgba(255,105,0,.18); color:var(--accent2); border-color:var(--accent); }
.num-stepper { display:flex; align-items:center; gap:8px; }
.num-stepper button { width:26px; height:26px; border-radius:7px; border:1px solid var(--line2); background:var(--card2); color:#fff; cursor:pointer; font-size:14px; }
.num-stepper button:hover { border-color:var(--accent); }

/* 场景动作构建 */
.act-item { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.act-item .act-info { flex:1; min-width:0; }
.act-item .act-name { font-size:13px; color:#fff; font-weight:600; }
.act-item .act-summary { font-size:11.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-item select { max-width:150px; }

/* 空状态 */
.empty { text-align:center; color:var(--dim); padding:44px 0; font-size:13px; }
.empty svg { width:42px; height:42px; margin:0 auto 12px; color:#2a3343; }

/* 登录页 */
.login-wrap { height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(1100px 500px at 70% -10%, rgba(255,105,0,.12), transparent), var(--bg); }
.login-card { width:400px; max-width:92vw; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px 36px; }
.login-logo { width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg,#ff6900,#ff9432); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.login-logo svg { width:30px; height:30px; color:#fff; }
.login-title { text-align:center; font-size:19px; font-weight:800; color:#fff; }
.login-sub { text-align:center; font-size:12.5px; color:var(--dim); margin:5px 0 22px; }

/* Toast */
.toasts { position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:9px; }
.toast {
  background:var(--card2); border:1px solid var(--line2); border-left:3px solid var(--accent);
  color:var(--text); padding:11px 16px; border-radius:9px; font-size:13px; min-width:220px; max-width:360px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); animation:toastIn .22s ease;
}
.toast.ok { border-left-color:var(--green); }
.toast.err { border-left-color:var(--red); }
@keyframes toastIn { from { opacity:0; transform:translateX(16px);} to { opacity:1; transform:none; } }

/* 加载 */
.spinner { width:26px; height:26px; border:3px solid #2a3343; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 场景图标配色 */
.scene-icon.c1 { background:rgba(255,105,0,.16); color:var(--accent2); }
.scene-icon.c2 { background:rgba(61,220,132,.14); color:var(--green); }
.scene-icon.c3 { background:rgba(74,168,255,.14); color:var(--blue); }
.scene-icon.c4 { background:rgba(255,197,61,.14); color:var(--yellow); }
.scene-icon.c5 { background:rgba(255,84,112,.14); color:#ff8090; }
.scene-icon.c6 { background:rgba(178,142,255,.14); color:#b28eff; }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .panel-grid { grid-template-columns:1fr; }
}

/* ===== 手机端自适应 ===== */
@media (max-width: 820px) {
  .app { flex-direction:column; }
  .sidebar {
    width:100%; flex-direction:row; align-items:center; gap:6px; padding:8px 10px;
    border-right:none; border-bottom:1px solid var(--line); overflow-x:auto;
  }
  .sidebar .brand { padding:0 6px 0 0; flex-shrink:0; }
  .brand-name { font-size:14px; }
  .brand-logo { width:30px; height:30px; border-radius:9px; }
  .sidebar .nav { flex-direction:row; align-items:center; gap:3px; margin-top:0; overflow-x:auto; }
  .nav-item { padding:7px 10px; font-size:12.5px; white-space:nowrap; }
  .sidebar-foot { border-top:none; padding-top:0; margin-left:auto; flex-shrink:0; }
  .user-chip { padding:4px 6px; }
  .user-info { display:none; }
  .avatar { width:26px; height:26px; font-size:12px; }
  .main { min-height:0; }
  .topbar { height:48px; padding:0 12px; }
  .topbar-title { font-size:15px; }
  .content { padding:12px 10px 26px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card { padding:12px; }
  .room-grid { grid-template-columns:1fr; }
  .device-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .scene-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .modal { width:94vw; padding:16px 14px; }
  .modal.wide { width:94vw; }
  .modal-foot { flex-wrap:wrap; }
  .modal-foot .btn { flex:1; justify-content:center; }
  .ctl-row { flex-wrap:wrap; gap:8px; }
  .seg { max-width:100%; overflow-x:auto; }
  .table-wrap { overflow-x:auto; }
  .btn { white-space:nowrap; }
  .type-bar-label { width:60px; }
  .device-card { padding:12px; }
  .device-toolbar { margin-left:0; width:100%; justify-content:flex-start; }
}

@media (max-width: 600px) {
  .device-grid { grid-template-columns:minmax(0,1fr); }
}

/* Navigation and device workspace */
.app { min-height:0; }
.sidebar { width:224px; padding:18px 10px; }
.brand { padding:0 8px 20px; }
.brand-name { font-size:14px; }
.brand-logo, .login-logo { background:var(--accent); border-radius:8px; }
.brand-logo svg { width:22px; height:22px; color:#fff; }
.nav-item { border-radius:6px; }
.nav-item.active { background:#30302b; color:#fff; }
.topbar { height:62px; padding:0 26px; }
.page-title { font-size:16px; }
.page-sub { margin-top:2px; }
.content { padding:22px 26px 40px; }
.btn { border-radius:6px; min-height:36px; }
.chip { border-radius:6px; white-space:nowrap; min-height:34px; }
.chip.active { background:#56351e; }
.mobile-nav { display:none; }
.device-page-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; min-width:0; }
.device-room-strip { display:flex; align-items:center; gap:6px; min-width:0; flex:1; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px; }
.device-room-strip .chip { flex-shrink:0; }
.device-toolbar { margin-left:0; flex-shrink:0; flex-wrap:nowrap; }
.icon-btn { width:36px; height:36px; padding:0; flex-shrink:0; }
.icon-btn svg { width:17px; height:17px; }
.device-menu-wrap { position:relative; }
.device-menu { position:absolute; z-index:20; right:0; top:calc(100% + 6px); width:190px; padding:5px; background:var(--bg2); border:1px solid var(--line2); border-radius:8px; box-shadow:0 14px 28px #0008; }
.device-menu[hidden] { display:none; }
.device-menu button, .more-list button { display:flex; align-items:center; gap:11px; width:100%; border:0; border-radius:5px; background:transparent; color:var(--text); font-size:13px; text-align:left; padding:11px 10px; cursor:pointer; }
.device-menu button:hover, .more-list button:hover { background:var(--card2); }
.device-menu button svg, .more-list button svg { width:17px; height:17px; color:var(--muted); }
.device-menu .menu-danger, .device-menu .menu-danger svg { color:var(--red); }
.device-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.device-card { padding:15px; border-radius:8px; min-width:0; }
.device-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.device-head { align-items:center; }
.device-icon { width:40px; height:40px; border-radius:7px; }
.device-heading { flex:1; min-width:0; }
.device-power-toggle { width:40px; height:24px; padding:0; border:0; border-radius:12px; background:#dce5de; position:relative; flex:0 0 40px; cursor:pointer; transition:background .18s; }
.device-power-toggle i { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; transition:left .18s; }
.device-power-toggle.on { background:var(--green); }
.device-power-toggle.on i { left:19px; }
.device-power-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.device-power-toggle:disabled { opacity:.6; cursor:wait; }
.device-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-state { min-height:20px; margin-top:13px; }
.device-foot { justify-content:space-between; min-width:0; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.device-room { position:static; border-radius:4px; background:#303633; color:var(--muted); padding:3px 7px; flex-shrink:0; }
.driver-badge { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.room-card, .scene-icon, .stat-icon, .login-card, .modal { border-radius:8px; }

/* Room editor */
.room-manage-list { display:block; max-height:min(48vh,440px); }
.room-manage-row { display:block; border-bottom:1px solid var(--line); }
.room-display { display:flex; align-items:center; gap:10px; min-height:62px; }
.room-list-icon { width:34px; height:34px; border-radius:6px; background:#36332b; color:var(--accent2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.room-list-icon svg { width:17px; height:17px; }
.room-list-info { display:flex; flex-direction:column; flex:1; min-width:0; gap:3px; }
.room-list-info strong { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-list-info small { color:var(--muted); font-size:11px; }
.room-edit-form { display:none; align-items:center; gap:7px; padding:10px 0; }
.room-edit-form input { flex:1; }
.room-manage-row.editing .room-display { display:none; }
.room-manage-row.editing .room-edit-form { display:flex; }
.room-add-form { border-top:1px solid var(--line); margin-top:16px; padding-top:8px; }
.room-add-form .form-row { align-items:stretch; }
.room-add-form input { min-width:0; flex:1; }
.room-delete-copy { font-size:13px; color:var(--muted); line-height:1.7; }
#room-move-to { width:100%; }
.more-list { display:grid; gap:3px; }
.more-list button { min-height:48px; font-size:14px; border-bottom:1px solid var(--line); }
.section-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; font-size:13px; }
.log-filters { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.log-filter-strip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }

@media (max-width: 820px) {
  .app { display:block; height:100dvh; }
  .sidebar { display:none; }
  .main { height:100%; }
  .topbar { height:auto; min-height:58px; padding:12px 16px; gap:10px; flex-wrap:wrap; align-items:center; }
  .topbar-heading { min-width:0; }
  .page-title { font-size:17px; }
  .page-sub { display:none; }
  .topbar-right { flex:1; justify-content:flex-end; }
  .topbar:has(.search-box) .topbar-right { width:100%; flex-basis:100%; margin:0; }
  .search-box, .search-box input { width:100%; }
  .search-box input { height:40px; font-size:14px; }
  .search-box svg { top:12px; }
  .content { padding:14px 14px calc(90px + env(safe-area-inset-bottom)); }
  .mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:calc(64px + env(safe-area-inset-bottom)); padding:4px 7px env(safe-area-inset-bottom); background:var(--bg2); border-top:1px solid var(--line); }
  .mobile-nav-item { border:0; background:transparent; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:inherit; font-size:10px; cursor:pointer; }
  .mobile-nav-item svg { width:21px; height:21px; }
  .mobile-nav-item.active { color:var(--accent2); }
  .device-page-head { display:block; margin-bottom:12px; }
  .device-room-strip { margin:0 -14px 12px; padding:0 14px 10px; width:calc(100% + 28px); }
  .device-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px; gap:8px; width:100%; }
  .device-toolbar > .btn { min-width:0; padding:8px 6px; }
  .device-toolbar > .btn svg { width:15px; }
  .device-menu-wrap > .btn { width:40px; height:38px; }
  .device-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  .device-card { padding:13px 14px; }
  .device-card:hover { transform:none; }
  .device-state { margin-top:9px; }
  .device-foot { margin-top:9px; padding-top:9px; }
  .stat-grid { gap:8px; }
  .stat-card { gap:8px; padding:11px; }
  .stat-icon { width:36px; height:36px; }
  .stat-icon svg { width:19px; height:19px; }
  .stat-num { font-size:20px; }
  .scene-grid { grid-template-columns:minmax(0,1fr); }
  .panel-grid { grid-template-columns:minmax(0,1fr) !important; }
  .log-filters { display:block; }
  .log-filter-strip { flex-wrap:nowrap; overflow-x:auto; margin:0 -14px 8px; padding:0 14px 7px; }
  .log-filter-strip .chip { flex-shrink:0; }
  .table-card { padding:0 !important; background:transparent; border:0; }
  .table-card .tbl, .table-card .tbl tbody, .table-card .tbl tr, .table-card .tbl td { display:block; width:100%; }
  .table-card .tbl thead { display:none; }
  .table-card .tbl tr { border-bottom:1px solid var(--line); padding:10px 0; }
  .table-card .tbl td { display:flex; align-items:center; gap:12px; border:0; padding:5px 0; min-width:0; overflow-wrap:anywhere; }
  .table-card .tbl td::before { content:attr(data-label); color:var(--dim); font-size:11px; width:66px; flex-shrink:0; font-weight:400; }
  .table-card .tbl td:not([data-label])::before { display:none; }
  .table-card .tbl td.table-actions { margin-top:6px; }
  .table-card .tbl td.table-actions > div { width:100%; }
  .table-card .tbl td.table-actions .btn { flex:1; min-width:0; padding:6px 4px; }
  .overlay { align-items:flex-end; }
  .modal, .modal.wide { width:100%; max-width:100%; max-height:calc(92dvh - env(safe-area-inset-bottom)); border-radius:12px 12px 0 0; padding:18px 16px calc(22px + env(safe-area-inset-bottom)); border-bottom:0; }
  .modal-head { margin-bottom:12px; }
  .modal-close { width:36px; height:36px; }
  .room-manage-list { max-height:48dvh; }
  .room-edit-form { flex-wrap:wrap; }
  .room-edit-form input { flex-basis:100%; }
  .room-add-form .form-row { gap:7px; }
  .room-add-form .btn { padding:8px 12px; }
  .toasts { top:10px; left:10px; right:10px; align-items:center; }
  .toast { max-width:100%; }
}

/* Light control-console visual system */
body { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#c7d1c8; }
input, select, textarea { background:#fff; color:var(--text); border-color:var(--line2); }
input::placeholder, textarea::placeholder { color:#829187; }
input:focus, select:focus, textarea:focus { box-shadow:0 0 0 3px #e9571820; }
.sidebar { background:#1e3830; border-right:0; }
.brand-logo { background:var(--accent); }
.brand-name, .user-name { color:#fff; }
.brand-sub, .user-role { color:#adbdaf; }
.nav-item { color:#c6d3ca; min-height:42px; }
.nav-item:hover { background:#2b4a3d; color:#fff; }
.nav-item.active { background:#fff; color:#1e3830; font-weight:700; }
.nav-item.active svg { color:var(--accent); }
.sidebar-foot { border-color:#38584a; }
.logout-btn { color:#c6d3ca; }
.logout-btn:hover { background:#2b4a3d; color:#fff; }
.topbar { background:#fff; border-color:var(--line); }
.page-title, .card-title, .stat-num, .room-name, .type-bar-num,
.device-name, .scene-name, .log-action, .modal-title, .act-item .act-name,
.login-title { color:var(--text); }
.search-box input { background:#f5f7f5; border-color:var(--line); }
.content { background:var(--bg); }
.card, .stat-card, .device-card, .scene-card { background:#fff; border-color:var(--line); }
.btn { background:#fff; color:var(--text); border-color:var(--line2); }
.btn:hover { border-color:var(--accent); color:var(--accent2); background:#fff8f3; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:#d34c13; color:#fff; }
.btn.ghost { color:var(--muted); }
.btn.ghost:hover { background:#edf2ed; color:var(--text); }
.btn.danger, .btn.danger-outline { color:var(--red); border-color:#eac4c4; background:#fff; }
.btn.danger:hover, .btn.danger-outline:hover { background:#fff1f0; }
.chip { background:#fff; color:var(--muted); border-color:var(--line); }
.chip.active { background:#fff0e8; color:var(--accent2); border-color:#f0b699; }
.tag { background:#e9f3f9; color:var(--blue); }
.tag.green { background:#e5f4eb; color:var(--green); }
.tag.red { background:#fae9e8; color:var(--red); }
.tag.yellow { background:#fcf3dd; color:var(--yellow); }
.tag.orange { background:#fff0e8; color:var(--accent2); }
.tag.gray { background:#edf1ee; color:var(--muted); }
.badge-dot.on { background:var(--green); box-shadow:0 0 0 3px #16845a20; }
.badge-dot.off { background:#a3b1a6; }
.stat-card { padding:17px; border-radius:8px; }
.stat-icon { border-radius:7px; }
.stat-icon.orange { background:#fff0e7; color:var(--accent2); }
.stat-icon.green { background:#e7f4ed; color:var(--green); }
.stat-icon.blue { background:#e8f2f8; color:var(--blue); }
.stat-icon.yellow { background:#fbf3e0; color:var(--yellow); }
.card-title-action { margin-left:auto; }
.card-title-action svg { color:var(--muted); }
.room-grid { gap:0 16px; }
.room-card { display:block; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:13px 4px; cursor:pointer; font:inherit; }
.room-card:hover { background:#f8faf8; }
.room-card .online-count { color:var(--green); }
.room-name svg { color:var(--accent); }
.room-bar, .type-bar-track { background:#e9eeea; }
.room-bar i, .type-bar-track i { background:var(--green); }
.log-item, .tbl td, .tbl th { border-color:var(--line); }
.tbl tr:hover td { background:#f8faf8; }
.overlay { background:#17251d66; backdrop-filter:blur(3px); }
.modal { background:#fff; border-color:var(--line); box-shadow:0 22px 60px #14251c30; }
.modal-close:hover { color:var(--text); background:#edf2ed; }
.room-manage-row, .mi-sync-row { border-color:var(--line); }
.room-list-icon { background:#eaf2ec; color:var(--green); }
.room-delete-copy { color:var(--muted); }
.ctl-row { border-color:var(--line); }
.toggle, input[type=range] { background:#dce5de; }
.toggle i { background:#fff; box-shadow:0 1px 3px #0002; }
.seg span { background:#edf2ed; color:var(--muted); }
.seg span.active { background:#fff0e8; color:var(--accent2); border-color:#f0b699; }
.num-stepper button { color:var(--text); background:#fff; }
.act-item { background:#f8faf8; border-color:var(--line); }
.empty svg { color:#b7c5b9; }
.login-wrap { background:var(--bg); }
.login-card { background:#fff; }
.toast { background:#fff; border-color:var(--line); box-shadow:0 10px 28px #1d302826; }
.spinner { border-color:#d8e2d9; border-top-color:var(--accent); }

/* Device view */
.device-workspace { display:grid; grid-template-columns:205px minmax(0,1fr); gap:24px; align-items:start; }
.room-rail { min-width:0; border-right:1px solid var(--line); padding:2px 16px 16px 0; position:sticky; top:0; max-height:calc(100dvh - 105px); overflow-y:auto; }
.room-rail-head { display:flex; align-items:center; justify-content:space-between; padding:2px 0 10px 12px; color:var(--text); }
.room-rail-head strong { font-size:14px; }
.room-rail-head .btn { width:30px; height:30px; }
.room-rail-list { display:grid; gap:3px; }
.room-rail-item { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:39px; width:100%; padding:8px 12px; border:0; border-left:3px solid transparent; border-radius:0 6px 6px 0; background:transparent; color:var(--muted); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.room-rail-item:hover { background:#e9f0e9; color:var(--text); }
.room-rail-item.active { background:#fff0e8; border-left-color:var(--accent); color:var(--accent2); font-weight:700; }
.room-rail-item span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-rail-item small { font-size:11px; font-weight:500; color:var(--dim); }
.device-results { min-width:0; }
.device-results .device-room-strip { display:none; }
.device-page-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 0 15px; margin-bottom:16px; }
.device-page-heading { display:flex; align-items:baseline; gap:10px; min-width:0; }
.device-page-heading h2 { font-size:17px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.device-page-heading span { font-size:12px; color:var(--dim); white-space:nowrap; }
.device-grid { grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:12px; }
.device-card { border-radius:8px; padding:16px; box-shadow:0 1px 2px #1933290a; }
.device-card:hover { border-color:#e9a77f; box-shadow:0 6px 20px #18312410; }
.device-icon { background:#e9f3ed; border-radius:7px; }
.device-icon svg { color:var(--green); }
.device-icon.power-on { background:#fff0e6; }
.device-icon.power-on svg, .device-card[data-type="socket"] .device-icon svg { color:var(--accent); }
.device-card[data-type="ac"] .device-icon { background:#e9f2f7; }
.device-card[data-type="ac"] .device-icon svg { color:var(--blue); }
.device-card[data-type="other"] .device-icon { background:#edf0ed; }
.device-card[data-type="other"] .device-icon svg { color:var(--dim); }
.device-state { color:var(--muted); }
.device-room { background:#edf3ee; color:#3e6550; }
.device-foot { border-color:var(--line); }
.device-menu { background:#fff; border-color:var(--line); box-shadow:0 14px 28px #1d30282a; }
.device-menu button, .more-list button { color:var(--text); }
.device-menu button:hover, .more-list button:hover { background:#f2f6f2; }

/* Room ordering */
.room-manage-list { max-height:min(52vh,480px); }
.room-manage-row { border-bottom:1px solid var(--line); }
.room-manage-row.dragging { background:#fff0e8; box-shadow:inset 3px 0 var(--accent); }
.room-display { gap:5px; min-height:58px; }
.room-drag-handle { width:32px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:transparent; border:0; border-radius:5px; color:var(--dim); cursor:grab; touch-action:none; }
.room-drag-handle:active { cursor:grabbing; }
.room-drag-handle:hover { background:#edf2ed; color:var(--text); }
.room-drag-handle:disabled { opacity:.45; }
.room-drag-handle svg { width:19px; height:19px; }
.room-position { width:24px; flex-shrink:0; color:#9aa99d; font-size:11px; font-variant-numeric:tabular-nums; }
.room-list-info { padding-left:3px; }
.room-list-info strong { color:var(--text); }
.room-row-actions { display:flex; gap:3px; flex-shrink:0; }
.room-row-actions .icon-btn { width:32px; height:32px; }
.room-row-actions .btn { background:transparent; border-color:transparent; }
.room-row-actions .btn:hover { background:#edf2ed; }
.room-row-actions .btn.danger-outline { color:var(--red); }
.room-row-actions .btn.danger-outline:hover { background:#fff1f0; }
.room-add-form { border-color:var(--line); }
.room-edit-form input { background:#fff; }

@media (max-width: 820px) {
  .topbar { background:#1e3830; border-bottom:0; }
  .topbar .page-title { color:#fff; }
  .topbar .btn.ghost { color:#fff; }
  .topbar .search-box input { background:#fff; border:0; }
  .content { padding-top:16px; }
  .mobile-nav { background:#fff; border-color:var(--line); box-shadow:0 -5px 20px #1d30280d; }
  .mobile-nav-item.active { color:var(--accent2); }
  .room-rail { display:none; }
  .device-workspace { display:block; }
  .device-results .device-room-strip { display:flex; }
  .device-page-head { display:block; border:0; padding:0; }
  .device-page-heading { margin-bottom:12px; }
  .device-page-heading h2 { font-size:16px; }
  .device-toolbar { margin:0; }
  .device-card { box-shadow:none; }
  .room-manage-list { max-height:50dvh; }
  .room-display { gap:3px; }
  .room-drag-handle { width:28px; }
  .room-position { width:18px; font-size:10px; }
  .room-row-actions .icon-btn { width:29px; height:32px; }
  .room-row-actions .icon-btn svg { width:15px; height:15px; }
}