.workspace-open-detail{margin-left:auto;padding:7px 12px}.workspace-detail-modal-box{width:min(1120px,calc(100vw - 24px));height:min(780px,calc(100dvh - 24px));display:flex;flex-direction:column;padding:clamp(16px,3vw,24px)}.workspace-detail-kicker{font:500 11px 'DM Mono',monospace;color:var(--muted);letter-spacing:.08em}.workspace-detail-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px;min-height:0;flex:1}.workspace-session-list{overflow:auto;border-right:1px solid var(--line);padding-right:12px;min-width:0}.workspace-session-list>button{width:100%;display:flex;flex-direction:column;gap:5px;text-align:left;border:0;border-radius:12px;background:transparent;color:inherit;padding:12px;cursor:pointer}.workspace-session-list>button:hover,.workspace-session-list>button.active{background:var(--bg)}.workspace-session-list small{color:var(--muted)}.workspace-record-panel{display:flex;flex-direction:column;min-width:0;min-height:0}.workspace-record-head{font-weight:600;padding:4px 0 12px}.workspace-record-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}.workspace-record{border:1px solid var(--line);border-radius:14px;padding:11px 13px;background:var(--bg)}.workspace-record.record-user{margin-left:12%;background:var(--accent-soft)}.workspace-record.record-assistant{margin-right:8%}.workspace-record header{display:flex;justify-content:space-between;gap:12px;font-size:12px}.workspace-record header time,.workspace-record small{color:var(--muted)}.workspace-record pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.65;margin:8px 0 0}.workspace-message-form{display:flex;gap:10px;align-items:flex-end;padding-top:12px}.workspace-message-form textarea{flex:1;min-width:0;min-height:72px;resize:vertical;border:1px solid var(--line);border-radius:12px;background:var(--card);color:inherit;padding:11px}.workspace-message-form button{flex:0 0 auto}.workspace-detail-locked{max-width:680px;padding:16px;line-height:1.7}.workspace-detail-locked code{word-break:break-all}.workspace-detail-layout.is-locked{display:block;overflow:auto}.workspace-detail-layout.is-locked .workspace-session-list{border:0;padding:0}.workspace-detail-layout.is-locked .workspace-record-panel{display:none}@media(max-width:900px){.workspace-detail-layout:not(.is-locked){grid-template-columns:1fr;grid-template-rows:minmax(120px,28vh) minmax(0,1fr)}.workspace-session-list{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:10px}.workspace-detail-modal-box{height:calc(100dvh - 24px)}}
:root {
  --bg:#edf0ed;
  --ink:#18211f;
  --muted:#78817d;
  --line:#d7ddd8;
  --card:#fff;
  --accent:#157e6c;
  --accent-soft:#d8eee8;
  --orange:#f29145;
  --orange-soft:#fff0df;
  --shadow:0 10px 30px rgba(34,48,43,.06)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px 'Noto Sans SC',system-ui,sans-serif;
  letter-spacing:.01em
}

button {
  font:inherit;
  cursor:pointer;
  border:0
}

.app {
  min-height:100vh;
  display:grid;
  grid-template-columns:244px 1fr
}

.sidebar {
  padding:28px 18px 50px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh
}

.brand {
  display:flex;
  gap:10px;
  align-items:center;
  padding:0 10px 32px;
  font-weight:700;
  font-size:17px
}

.logo {
  width:28px;
  height:28px;
  border-radius:9px;
  background:var(--accent);
  position:relative
}

.logo:after {
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid #fff;
  border-radius:50%;
  top:7px;
  left:7px
}

.nav {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:5px
}

.nav .nav-settings-button {
  margin-top:0
}

.nav button {
  background:transparent;
  color:#68726e;
  text-align:left;
  padding:11px 12px;
  border-radius:10px;
  display:flex;
  gap:12px;
  align-items:center;
  position:relative;
  overflow:hidden;
  transition:color .22s ease,background-color .22s ease,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease
}

.nav button:before {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:18px;
  border-radius:0 4px 4px 0;
  background:var(--accent);
  opacity:0;
  transform:translate(-4px,-50%) scaleY(.45);
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1)
}

.nav button:hover {
  color:var(--ink);
  background:rgba(255,255,255,.58);
  transform:translateX(2px)
}

.nav button.active {
  color:var(--ink);
  background:#fff;
  font-weight:600;
  box-shadow:0 6px 18px rgba(34,48,43,.08)
}

.nav button.active:before {
  opacity:1;
  transform:translate(0,-50%) scaleY(1)
}

.nav-label {
  display:inline-block;
  transform-origin:left center
}

.nav button.active .nav-label {
  animation:nav-label-in .34s cubic-bezier(.22,1,.36,1)
}

@keyframes nav-label-in {
  0% { opacity:.35; transform:translateX(-5px) scale(.97) }
  100% { opacity:1; transform:translateX(0) scale(1) }
}

.nav-item-hidden {
  display:none!important
}

.icon {
  width:18px;
  text-align:center;
  font-size:16px
}

.side-bottom {
  margin-top:auto;
  background:#dbe9e3;
  border-radius:15px;
  padding:15px
}

.side-bottom span {
  font-size:12px;
  color:#4b625a
}

.side-bottom strong {
  display:block;
  margin:5px 0 12px;
  font-size:14px
}

.side-bottom button {
  width:100%;
  padding:8px;
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  font-size:12px
}

main {
  max-width:2036px;
  width:100%;
  margin:auto;
  display:grid;
  grid-template-columns:250px minmax(0,1396px) minmax(250px,1fr);
  column-gap:28px;
  align-items:start;
  padding:108px 42px 50px
}

.top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0;
  padding:20px 42px 15px;
  position:fixed;
  top:0;
  left:244px;
  right:0;
  z-index:20;
  background:rgba(237,240,237,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(215,221,216,.72)
}

.eyebrow {
  color:var(--accent);
  font:500 12px 'DM Mono',monospace;
  letter-spacing:.08em;
  text-transform:uppercase
}

.top h1 {
  margin:5px 0 0;
  font-size:28px;
  letter-spacing:-.04em
}

.date {
  color:var(--muted);
  text-align:right;
  line-height:1.7
}

.date b {
  color:var(--ink);
  font-weight:600
}

.grid {
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr) minmax(0,.84fr);
  gap:16px;
  align-items:start;
  grid-auto-flow:row dense
}

.view-intro {
  grid-column:1;
  grid-row:1;
  position:sticky;
  top:126px;
  align-self:start;
  margin:0;
  padding:4px 8px 0 0;
  text-align:left
}

.view-intro h2 {
  margin:5px 0 6px;
  font-size:28px;
  letter-spacing:-.04em
}

.view-intro p {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7
}

.card {
  background:var(--card);
  border:1px solid #eef1ef;
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow)
}

.card h2 {
  margin:0;
  font-size:15px;
  letter-spacing:-.02em
}

.card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px
}

.more {
  color:var(--muted);
  background:transparent;
  font-size:18px;
  line-height:1
}

.status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent);
  font-size:12px
}

.dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)
}

.hero {
  grid-column:span 2;
  background:linear-gradient(125deg,#167b69,#255a52);
  color:white;
  min-height:253px;
  position:relative;
  overflow:hidden
}

.hero:before,.hero:after {
  content:'';
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15)
}

.hero:before {
  width:340px;
  height:340px;
  right:-122px;
  bottom:-190px
}

.hero:after {
  width:460px;
  height:460px;
  right:-185px;
  bottom:-270px
}

.hero .card-head {
  position:relative;
  z-index:1
}

.hero .status {
  color:#b9ece0
}

.hero .dot {
  background:#9ee6d2;
  box-shadow:0 0 0 3px rgba(158,230,210,.18)
}

.home-title {
  font-size:28px;
  margin-top:40px;
  font-weight:600;
  letter-spacing:-.04em;
  position:relative;
  z-index:1
}

.temp {
  font:600 50px/1 'DM Mono',monospace;
  letter-spacing:-.09em;
  position:relative;
  z-index:1;
  margin:12px 0 4px
}

.temp span {
  font-size:20px;
  vertical-align:top;
  letter-spacing:0
}

.temp #temperature {
  font:600 50px/1 'DM Mono',monospace;
  vertical-align:baseline;
  letter-spacing:-.09em
}

.subline {
  position:relative;
  z-index:1;
  color:#c6e1db;
  font-size:13px
}

.rooms {
  position:absolute;
  right:22px;
  bottom:21px;
  z-index:1;
  display:flex;
  gap:7px
}

.rooms span {
  background:rgba(255,255,255,.13);
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  font:11px 'DM Mono',monospace
}

.rooms .environment-slot {
  min-width:112px;
  max-width:150px;
  display:grid;
  gap:2px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:9px;
  background:rgba(255,255,255,.13);
  color:#fff;
  text-align:left;
  transition:background .18s,border-color .18s,transform .18s
}

.rooms .environment-slot:hover {
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-1px)
}

.rooms .environment-slot span {
  overflow:hidden;
  padding:0;
  border:0;
  background:transparent;
  color:#bfe2da;
  font:10px/1.35 'Noto Sans SC',sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap
}

.rooms .environment-slot strong {
  overflow:hidden;
  font:500 12px/1.35 'DM Mono',monospace;
  text-overflow:ellipsis;
  white-space:nowrap
}

.environment-picker-box {
  width:min(620px,calc(100vw - 36px))
}

.environment-picker-box .card-head>div {
  display:grid;
  gap:3px
}

.environment-slot-kicker {
  color:var(--accent);
  font:500 11px 'DM Mono',monospace;
  letter-spacing:.08em
}

.environment-picker-list {
  min-height:150px;
  display:grid;
  gap:12px;
  overflow:auto;
  padding:3px 2px 2px
}

.environment-sensor-group {
  overflow:hidden;
  border:1px solid #e2e9e5;
  border-radius:14px;
  background:#fbfcfb
}

.environment-sensor-group h3 {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:11px 13px;
  border-bottom:1px solid #e7ece9;
  color:#52605b;
  font-size:12px
}

.environment-sensor-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:10px
}

.environment-sensor-option {
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:53px;
  padding:9px 10px;
  border:1px solid #e2e8e4;
  border-radius:11px;
  background:#fff;
  cursor:pointer
}

.environment-sensor-option:has(input:checked) {
  border-color:#8bc7b8;
  background:#eef8f5;
  box-shadow:0 0 0 2px rgba(21,126,108,.08)
}

.environment-sensor-option input {
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--accent)
}

.environment-sensor-copy {
  min-width:0;
  display:grid;
  gap:2px
}

.environment-sensor-copy b,.environment-sensor-copy small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.environment-sensor-copy b {
  font-size:12px
}

.environment-sensor-copy small {
  color:var(--muted);
  font:10px 'DM Mono',monospace
}

.environment-sensor-value {
  color:var(--accent);
  font:500 12px 'DM Mono',monospace
}

.environment-sensor-empty {
  grid-column:1/-1;
  padding:12px;
  color:var(--muted);
  text-align:center;
  font-size:12px
}

.delivery {
  grid-column:3;
  min-height:253px
}

.delivery-restaurant {
  font-size:18px;
  font-weight:600;
  margin:5px 0 4px
}

.muted {
  color:var(--muted);
  font-size:12px
}

.progress {
  height:7px;
  background:#f1f2ef;
  border-radius:9px;
  margin:27px 0 12px;
  overflow:hidden
}

.stages {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted)
}

.stages b {
  color:var(--ink);
  font-weight:600
}

.eta {
  margin-top:20px;
  border-radius:10px;
  background:var(--orange-soft);
  padding:10px 12px;
  color:#a95c22;
  font-size:12px
}

.eta strong {
  float:right;
  font:500 16px 'DM Mono',monospace
}

.agenda {
  grid-column:span 2
}

.agenda-list {
  display:grid;
  gap:0
}

.agenda-row {
  display:grid;
  grid-template-columns:63px 1fr auto;
  align-items:center;
  padding:13px 0;
  border-top:1px solid #eef0ed
}

.agenda-row:first-child {
  border-top:0
}

.agenda-time {
  font:12px 'DM Mono',monospace;
  color:var(--accent)
}

.agenda-title {
  font-weight:500
}

.agenda-meta {
  color:var(--muted);
  font-size:12px
}

.tag {
  font-size:11px;
  padding:4px 8px;
  border-radius:6px;
  background:#f3f5f3;
  color:#65706b
}

.tag.work {
  background:#e9eefb;
  color:#5972b5
}

.tag.life {
  background:#fcebdc;
  color:#b76b31
}

.quick {
  grid-column:3;
  align-self:start
}

.quick .card-head {
  align-items:center
}

.quick .card-head>div {
  display:flex;
  gap:6px
}

.quick .more {
  width:32px;
  height:32px;
  min-width:32px;
  padding:0;
  border:1px solid #edf0ed;
  border-radius:10px;
  background:#fff;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1
}

.quick-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}

.quick-grid button {
  height:88px;
  min-width:0;
  text-align:left;
  border:1px solid #edf0ed;
  border-radius:12px;
  background:#fff;
  padding:11px 12px;
  color:var(--ink);
  transition:.2s;
  overflow:hidden
}

.quick-grid button:hover,.quick-grid button.on {
  border-color:#b9ddd3;
  background:#f1faf7
}

.quick .qicon {
  font-size:19px;
  display:block;
  margin-bottom:6px
}

.quick .qname {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500
}

.quick small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px
}

.quick-grid button.on small {
  color:var(--accent)
}

.card.is-hidden {
  display:none
}

.habit {
  grid-column:span 2
}

.habit-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:9px
}

.day {
  border-radius:10px;
  background:#f5f7f5;
  text-align:center;
  padding:10px 3px;
  font-size:11px;
  color:var(--muted)
}

.day b {
  display:block;
  color:var(--ink);
  font:500 16px 'DM Mono',monospace;
  margin:5px 0
}

.check {
  margin:auto;
  width:19px;
  height:19px;
  border-radius:50%;
  border:1px solid #d5dbd6
}

.done .check {
  border-color:var(--accent);
  background:var(--accent);
  position:relative
}

.done .check:after {
  content:'✓';
  color:#fff;
  font-size:12px;
  position:absolute;
  left:4px;
  top:0
}

.energy {
  grid-column:3
}

.energy .bars {
  display:flex;
  align-items:end;
  height:118px;
  gap:8px;
  padding-top:10px
}

.bar {
  flex:1;
  border-radius:5px 5px 2px 2px;
  background:#d7e9e3;
  position:relative
}

.bar i {
  position:absolute;
  bottom:0;
  width:100%;
  border-radius:5px 5px 2px 2px;
  background:var(--accent)
}

.bar em {
  position:absolute;
  top:-18px;
  font:10px 'DM Mono',monospace;
  color:#7c8580;
  left:50%;
  transform:translateX(-50%)
}

.energy-foot {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px;
  margin-top:9px
}

.devices {
  grid-column:span 3
}

.device-tools {
  display:flex;
  gap:9px;
  align-items:center
}

.device-search {
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 9px;
  width:180px;
  font-size:12px;
  outline:0
}

.device-list {
  display:block;
  gap:9px;
  max-height:540px;
  overflow:auto;
  padding-right:3px
}

.device-item {
  min-height:76px;
  text-align:left;
  padding:11px;
  border:1px solid #e8eeea;
  border-radius:11px;
  background:#fff;
  transition:.18s
}

.device-item:hover {
  border-color:#9fd3c6;
  background:#f4fbf8
}

.device-item strong,.device-item small {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.device-item strong {
  font-size:13px;
  margin-bottom:5px
}

.device-item small {
  font:11px 'DM Mono',monospace;
  color:var(--muted)
}

.device-item .state-on {
  color:var(--accent)
}

.select-list {
  max-height:340px;
  overflow:auto;
  border-top:1px solid var(--line);
  margin-top:13px
}

.select-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 2px;
  border-bottom:1px solid #eef1ef;
  font-size:13px
}

.select-row input {
  accent-color:var(--accent);
  width:16px;
  height:16px
}

.detail-state {
  font:600 30px 'DM Mono',monospace;
  color:var(--accent);
  margin:16px 0
}

.detail-attrs {
  display:grid;
  gap:7px;
  max-height:220px;
  overflow:auto
}

.detail-attrs div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:8px;
  background:#f5f7f5;
  border-radius:7px;
  font-size:12px
}

.detail-attrs b {
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-loader {
  position:fixed;
  inset:0;
  z-index:110;
  background:rgba(237,240,237,.96);
  display:grid;
  place-items:center;
  transition:opacity .35s,visibility .35s
}

.app-loader.hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}

.loader-box {
  width:min(320px,calc(100vw - 48px));
  text-align:center;
  color:var(--muted);
  animation:loader-enter .42s cubic-bezier(.22,1,.36,1) both
}

.loader-box b {
  display:block;
  color:var(--ink);
  font-size:16px;
  letter-spacing:.02em
}

.loader-box > span {
  display:block;
  min-height:20px;
  margin-top:8px;
  font-size:12px
}

/* ===== 加载页：Logo 外环走一圈 Material 风格的不定长弧线 ===== */
.loader-mark {
  position:relative;
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  margin:0 auto 20px
}

.loader-arc {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:loader-arc-rotate 1.9s linear infinite
}

.loader-arc circle {
  fill:none;
  stroke:var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  transform-origin:center;
  transform:rotate(-90deg);
  animation:loader-arc-dash 1.5s cubic-bezier(.4,0,.2,1) infinite
}

.logo.loader-logo {
  width:42px;
  height:42px;
  border-radius:14px;
  animation:loader-logo-breathe 2.6s ease-in-out infinite
}

.logo.loader-logo:after {
  width:15px;
  height:15px;
  top:10.5px;
  left:10.5px
}

.loader-box b.loader-greeting {
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:19px;
  font-weight:600;
  letter-spacing:.01em;
  animation:loader-greeting-in .46s cubic-bezier(.22,1,.36,1) both
}

.loader-box b.loader-greeting[hidden] { display:none }

/* 有问候语时，阶段标题退为次要信息，避免两行同样粗的大字 */
.loader-box.has-greeting > b#loader-title {
  color:var(--muted);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.03em
}

.loader-box.has-greeting > span#loader-detail {
  margin-top:3px;
  font-size:11.5px;
  opacity:.72
}

@keyframes loader-arc-rotate {
  to { transform:rotate(360deg) }
}

/* 弧线长度与偏移同时变化，得到「甩出去再收回来」的手感；213.6 = 2πr（r=34） */
@keyframes loader-arc-dash {
  0% { stroke-dasharray:4 213.6; stroke-dashoffset:0 }
  50% { stroke-dasharray:148 213.6; stroke-dashoffset:-30 }
  100% { stroke-dasharray:4 213.6; stroke-dashoffset:-213.6 }
}

@keyframes loader-logo-breathe {
  0%,100% { transform:scale(1) }
  50% { transform:scale(.93) }
}

@keyframes loader-greeting-in {
  from { opacity:0; transform:translateY(6px) }
  to { opacity:1; transform:none }
}

@keyframes loader-enter {
  from { opacity:0; transform:translateY(10px) scale(.98) }
  to { opacity:1; transform:none }
}

.modal {
  position:fixed;
  inset:0;
  z-index:30;
  background:rgba(16,27,24,.42);
  display:none;
  place-items:center;
  padding:18px
}

.modal.show {
  display:grid
}

.modal-box {
  width:min(440px,100%);
  background:#fff;
  border-radius:19px;
  padding:24px;
  box-shadow:0 25px 65px rgba(13,27,23,.25)
}

.modal-box h2 {
  font-size:20px;
  margin:0 0 7px
}

.modal-box p {
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
  margin:0 0 19px
}

.picker-box {
  width:min(680px,calc(100vw - 36px));
  max-height:min(720px,calc(100vh - 36px));
  display:flex;
  flex-direction:column;
  padding:22px
}

.picker-box .card-head {
  margin-bottom:4px
}

.picker-count {
  color:var(--accent);
  font:500 12px 'DM Mono',monospace;
  background:var(--accent-soft);
  padding:4px 8px;
  border-radius:99px
}

.picker-list {
  display:grid;
  gap:9px;
  overflow:auto;
  padding:4px 2px 2px;
  margin-top:4px
}

.device-group {
  border:1px solid #e6ece8;
  border-radius:13px;
  overflow:hidden;
  background:#fbfcfb
}

.device-group summary {
  list-style:none;
  display:grid;
  grid-template-columns:25px minmax(0,1fr) 74px 12px;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  cursor:pointer;
  font-weight:600
}

.device-group summary::-webkit-details-marker {
  display:none
}

.device-group summary:after {
  content:'⌄';
  grid-column:4;
  color:var(--muted);
  text-align:center;
  transition:.18s
}

.device-group[open] summary:after {
  transform:rotate(180deg)
}

.device-group-icon {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#e5f2ed;
  color:var(--accent);
  font-size:15px
}

.device-group small {
  grid-column:3;
  font-weight:400;
  color:var(--muted);
  margin:0;
  text-align:center;
  white-space:nowrap
}

.picker-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  padding:0 10px 11px
}

.picker-option {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:10px;
  border:1px solid #edf0ed;
  border-radius:10px;
  background:#fff;
  cursor:pointer
}

.picker-option:hover {
  border-color:#b9ddd3;
  background:#f1faf7
}

.picker-option input {
  accent-color:var(--accent);
  width:16px;
  height:16px;
  flex:none
}

.picker-option span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px
}

.empty-picker {
  padding:28px 8px;
  text-align:center;
  color:var(--muted)
}

.field {
  display:grid;
  gap:7px;
  margin:14px 0
}

.field label {
  font-size:12px;
  font-weight:600
}

.field input {
  height:43px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:0 11px;
  font:13px 'DM Mono',monospace;
  outline:none
}

.field input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)
}

.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px
}

.btn {
  padding:10px 14px;
  border-radius:9px;
  background:#edf0ed;
  color:#4b5652
}

.btn.primary {
  background:var(--accent);
  color:#fff
}

.connection-note {
  font-size:11px;
  color:var(--muted);
  margin-top:13px
}

.connection-note b {
  color:var(--accent)
}

.toast {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:40;
  background:#1e2a27;
  color:#fff;
  padding:11px 14px;
  border-radius:10px;
  font-size:13px;
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(12px);
  transition:.25s;
  pointer-events:none
}

.toast.show {
  opacity:1;
  transform:none
}

/* 登录页：左侧品牌介绍栏 + 右侧登录卡片，与主界面的绿色视觉保持一致。 */
.auth-gate {
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--bg);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  overflow:auto
}

.auth-gate.hidden {
  display:none
}

.auth-panel {
  position:relative;
  padding:44px 52px;
  background:linear-gradient(160deg,#0e2b25,#157e6c 135%);
  color:#eaf4f0;
  display:flex;
  flex-direction:column;
  gap:28px;
  overflow:hidden
}

.auth-panel:before,
.auth-panel:after {
  content:'';
  position:absolute;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  pointer-events:none
}

.auth-panel:before {
  width:340px;
  height:340px;
  right:-120px;
  bottom:-140px
}

.auth-panel:after {
  width:180px;
  height:180px;
  right:120px;
  bottom:-90px;
  border-color:rgba(255,255,255,.1)
}

.auth-brand {
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:700;
  font-size:17px;
  position:relative
}

.auth-panel .logo {
  background:rgba(255,255,255,.16)
}

.auth-copy {
  margin:auto 0;
  max-width:430px;
  position:relative
}

.auth-headline {
  font-size:30px;
  line-height:1.5;
  letter-spacing:.02em;
  margin:0 0 20px
}

.auth-points {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  font-size:13.5px;
  color:#cfe3dc
}

.auth-points li {
  display:flex;
  gap:12px;
  align-items:center
}

.pt-icon {
  width:32px;
  height:32px;
  border-radius:10px;
  background:rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  flex:none;
  font-size:14px
}

.auth-panel-foot {
  position:relative;
  font-size:12px;
  color:#a8c6bd;
  display:flex;
  gap:10px;
  align-items:center
}

.auth-mono {
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  padding:3px 9px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:99px;
  color:#dff0ea
}

.auth-card {
  align-self:center;
  justify-self:center;
  width:min(392px,100%);
  margin:22px;
  padding:36px 32px;
  background:var(--card);
  border:1px solid #e5ebe6;
  border-radius:22px;
  box-shadow:0 20px 60px rgba(28,46,39,.12);
  text-align:center
}

.auth-card .logo {
  margin:0 auto 18px;
  width:46px;
  height:46px;
  border-radius:14px
}

.auth-card .logo:after {
  width:18px;
  height:18px;
  top:12px;
  left:12px
}

.auth-card h1 {
  font-size:23px;
  margin:0 0 8px
}

.auth-card p {
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  margin:0 0 24px
}

.auth-card .btn {
  width:100%;
  font-weight:600;
  padding:12px 14px;
  font-size:14px
}

.auth-form {
  display:grid;
  gap:12px;
  text-align:left;
  margin:0 0 4px
}

.auth-field {
  display:grid;
  gap:6px
}

.auth-field label {
  font-size:12px;
  font-weight:500;
  color:var(--muted)
}

.auth-field input {
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fbfcfb;
  font:inherit;
  color:var(--ink);
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s
}

.auth-field input:focus {
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px rgba(21,126,108,.13)
}

.auth-submit {
  letter-spacing:normal
}

#auth-submit:disabled {
  cursor:not-allowed;
  opacity:.58
}

.auth-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 14px;
  color:var(--muted);
  font-size:12px
}

.auth-divider:before,
.auth-divider:after {
  content:'';
  flex:1;
  height:1px;
  background:var(--line)
}

.auth-error {
  color:#ba4d39;
  font-size:12px;
  margin-top:14px;
  min-height:18px;
  line-height:1.6
}

#auth-login:disabled {
  cursor:not-allowed;
  opacity:.58
}

.logout {
  margin-top:9px;
  background:transparent!important;
  color:#6c7671!important;
  text-decoration:underline
}

.auth-card-foot {
  margin-top:24px;
  padding-top:16px;
  border-top:1px dashed var(--line);
  font-size:11.5px;
  color:var(--muted);
  line-height:1.6
}

/* 登录方式互斥显示：先突出已发现的 SSO 身份，手动登录按需展开。 */
.auth-manual[hidden],
.auth-sso[hidden] { display:none }
.auth-mode-sso .auth-card > p { margin-bottom:20px }
.auth-mode-sso .auth-sso { margin:0; gap:16px }
.auth-mode-sso .auth-sso-continue { min-height:76px; border-radius:14px; box-shadow:0 10px 24px rgba(21,126,108,.16) }
.auth-mode-sso .auth-sso-switch { background:transparent; color:var(--muted); border:0; text-decoration:underline; font-size:12px; font-weight:500 }
.auth-mode-sso .auth-card-foot { margin-top:20px }
.auth-sso-empty { display:grid; gap:6px; padding:14px 0 4px; color:var(--muted); font-size:12px; line-height:1.6 }
.auth-sso-empty button { justify-self:start; padding:0; border:0; background:transparent; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline }

@media (max-width:900px) {
  .auth-gate {
    grid-template-columns:1fr;
    place-items:center
  }

  .auth-panel {
    display:none
  }

  .auth-card {
    margin:0
  }
}

@media (max-width:520px) {
  .auth-gate { padding:14px }
  .auth-card { width:100%; margin:0; padding:30px 22px; border-radius:18px }
  .auth-card h1 { font-size:22px }
  .auth-card .btn { min-height:46px }
}

.mobile-nav {
  display:none
}


/* 统一组件节奏：所有卡片共享同一内边距、圆角和最小高度，跨列只改变宽度。 */
.grid {
  grid-column:2;
  grid-row:1;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:auto;
  grid-auto-flow:row dense;
  align-items:start;
  align-content:start;
  justify-items:stretch;
  justify-content:start
}
.card {
  min-width:0;
  min-height:253px;
  padding:20px
}
.hero,.delivery { min-height:253px }
.agenda,.quick,.habit,.energy,.devices { align-self:stretch }
.settings-page { grid-column:2; grid-row:1; display:none; padding-bottom:30px; transform-origin:top left }
.settings-page.is-active { display:block }
.settings-card p { color:var(--muted); font-size:13px; margin:0; line-height:1.7 }
.settings-grid {
  display:grid;
  /* 细行高配合 JS 计算跨行数，形成会自动向上补位的瀑布流。 */
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:4px;
  grid-auto-flow:row dense;
  gap:16px;
  margin-top:0;
  align-items:start;
  align-content:start;
  justify-content:stretch
}
.settings-stack {
  min-width:0;
  display:contents
}
.settings-card { min-width:0; position:relative; align-self:start; background:var(--card); border:1px solid #eef1ef; border-radius:18px; padding:22px; box-shadow:var(--shadow) }
.settings-card > h3,.settings-card > p { padding-right:78px }
.settings-card > .widget-drag-handle { position:absolute; top:18px; right:54px; margin:0 }
.settings-card > .widget-menu { position:absolute; top:18px; right:18px; margin:0 }
.settings-card.size-small { grid-column:span 1 }
.settings-card.size-medium { grid-column:span 2 }
.settings-card.size-large { grid-column:span 3 }
.settings-card h3 { margin:0 0 6px; font-size:16px }
.profile-form { margin-top:15px }
.profile-form .field { margin:0 0 10px }
.profile-form .btn { width:100% }
.widget-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:18px }
.nav-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:18px }
.nav-settings .widget-toggle { min-height:54px }
.widget-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:11px 13px; border:1px solid #e8eeea; border-radius:12px; cursor:pointer; background:#fff }
.widget-toggle:hover { border-color:#b9ddd3; background:#f5fbf9 }
.widget-toggle span { min-width:0 }
.widget-toggle b,.widget-toggle small { display:block }
.widget-toggle b { font-size:13px; font-weight:600 }
.widget-toggle small { color:var(--muted); font-size:11px; margin-top:3px }
.widget-toggle input { position:absolute; opacity:0; pointer-events:none }
.widget-toggle i { flex:none; width:38px; height:22px; border-radius:99px; background:#d9dfdb; position:relative; transition:.2s }
.widget-toggle i:after { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #aeb8b2; transition:.2s }
.widget-toggle input:checked+i { background:var(--accent) }
.widget-toggle input:checked+i:after { transform:translateX(16px) }
.settings-actions { display:grid; gap:10px; margin-top:20px }
.settings-actions .btn { text-align:left }
.settings-version { display:grid; gap:13px; margin:0; padding:22px; border-color:#dceae4; background:linear-gradient(135deg,#f7fcfa,#edf7f3); color:var(--muted); font-size:12px; box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.8) }
.version-heading { display:flex; align-items:center; gap:10px }
.version-heading>span:last-child { display:grid; gap:3px }
.version-heading small { color:var(--muted); font-size:10px; letter-spacing:.06em; text-transform:uppercase }
.version-heading b { color:var(--ink); font-size:13px }
.version-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--accent); color:#fff; font-size:19px; box-shadow:0 5px 12px rgba(21,126,108,.2) }
.settings-version>strong { color:var(--accent); font:600 17px 'DM Mono',monospace; letter-spacing:-.04em }
.version-actions { display:flex; gap:8px }
.version-actions .btn { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:9px 10px; font-size:12px; text-decoration:none }
.version-status { min-height:16px; color:var(--muted); font-size:11px }
.version-status:before { content:'●'; color:var(--accent); margin-right:5px }
.version-actions button:disabled { cursor:wait; opacity:.65 }
.btn.danger { color:#b64d3d; background:#fff0ed }
.grid.is-hidden { display:none }

.scene-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.scene-item { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:11px; text-align:left; padding:13px; border:1px solid #e4ece8; border-radius:13px; background:#f9fbfa; color:var(--ink); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease }
.scene-item:hover { transform:translateY(-2px); border-color:#b8dacf; box-shadow:0 8px 18px rgba(21,126,108,.09) }
.scene-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--accent-soft); color:var(--accent); font-size:17px }
.scene-copy { display:grid; gap:3px; min-width:0 }
.scene-copy strong,.scene-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.scene-copy small { color:var(--muted); font:400 11px 'DM Mono',monospace }
.scene-action { padding:6px 9px; border-radius:8px; background:#fff; color:var(--accent); font-size:11px; font-weight:700; box-shadow:0 1px 4px rgba(30,50,44,.08) }

@media (max-width:700px) {
  .scene-list { grid-template-columns:1fr }
  .settings-version { align-items:flex-start; flex-direction:column }
  .settings-version strong { text-align:left }
}

@media (prefers-reduced-motion:reduce) {
  .scene-item { transition:none }
}

/* 三档统一尺寸：小=1列，中=2列，大=3列；所有卡片共享同一行高基准。 */
.grid > .card.size-small,
.grid > .card.size-medium,
.grid > .card.size-large {
  grid-column:auto;
  min-height:253px;
  align-self:start;
}
.grid > .card.size-small { grid-column:span 1 }
.grid > .card.size-medium { grid-column:span 2 }
.grid > .card.size-large { grid-column:span 3 }
.grid > .card.is-dragging,.settings-card.is-dragging { opacity:.62; border-color:#9fd3c6; box-shadow:0 14px 34px rgba(21,126,108,.13) }
.grid .card-head > h2 { margin-right:auto }
.widget-drag-handle { width:30px; height:30px; display:grid; grid-template-columns:repeat(2,4px); grid-template-rows:repeat(3,4px); place-content:center; gap:3px; flex:none; margin-left:8px; border:1px solid #e8eeea; border-radius:9px; background:#fff; color:#9aa39f; cursor:grab; user-select:none }
.widget-drag-handle:active { cursor:grabbing }
.widget-drag-handle:hover { color:var(--accent); border-color:#b9ddd3; background:#f1faf7 }
.widget-drag-handle i { display:block; width:4px; height:4px; border-radius:50%; background:currentColor; pointer-events:none }
.widget-menu { position:relative; flex:none; margin-left:8px; z-index:8 }
.widget-menu-trigger { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid #e8eeea; border-radius:9px; background:#fff; color:var(--muted); font-size:20px; line-height:1; transition:.18s }
.widget-menu-trigger:hover,.widget-menu.is-open .widget-menu-trigger { color:var(--accent); border-color:#b9ddd3; background:#f1faf7 }
.widget-menu-popover { position:fixed; top:0; left:0; z-index:80; width:164px; display:none; padding:6px; border:1px solid #e1e8e3; border-radius:12px; background:#fff; box-shadow:0 15px 38px rgba(25,40,35,.18); color:var(--ink); pointer-events:none }
.widget-menu-popover.is-open { display:grid; gap:3px; pointer-events:auto }
.widget-menu-popover button { position:relative; display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; min-height:38px; padding:9px 8px; border-radius:8px; background:transparent; color:var(--ink); text-align:left; font-size:12px }
.widget-menu-popover button > * { pointer-events:none }
.widget-menu-popover button:hover,.widget-menu-popover button.active { background:#eef8f4; color:var(--accent) }
.widget-menu-popover button.active:after { content:'✓'; position:absolute; right:12px }
.widget-menu-popover button small { color:var(--muted); font-size:10px; padding-right:14px }
.size-preview { display:block; height:14px; border:1.5px solid currentColor; border-radius:3px; opacity:.75 }
.size-preview.size-small { width:9px }
.size-preview.size-medium { width:17px }
.size-preview.size-large { width:25px }
.hero .widget-menu-trigger { color:#c6e1db; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.1) }
.hero .widget-menu-trigger:hover,.hero .widget-menu.is-open .widget-menu-trigger { color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.18) }
.hero .widget-drag-handle { color:#c6e1db; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.1) }
.hero .widget-drag-handle:hover { color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.18) }
.widget-drag-ghost { position:fixed; left:-1000px; top:-1000px; z-index:999; min-width:132px; height:42px; display:flex; align-items:center; gap:9px; padding:0 14px; border:1px solid #b9ddd3; border-radius:12px; background:rgba(255,255,255,.96); color:var(--ink); box-shadow:0 12px 30px rgba(25,40,35,.18); font-size:13px; font-weight:600 }
.widget-drag-ghost:before { content:'⠿'; color:var(--accent); font-size:19px; font-weight:400 }
@media(prefers-reduced-motion:reduce) {
  .grid > .card,.settings-page,.settings-card,.nav button,.nav button:before,.nav-label { animation:none!important; transition:none!important }
}
.widget-setting-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center }
.widget-size { height:42px; border:1px solid #e8eeea; border-radius:10px; padding:0 9px; color:var(--ink); background:#fff; font-size:12px; cursor:pointer }
.widget-size:focus { outline:2px solid var(--accent-soft); border-color:var(--accent) }
.ha-device-group { margin-bottom:9px }
.ha-device-group:last-child { margin-bottom:0 }
.device-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; padding:0 10px 10px }
.ha-device-group .device-item { min-height:68px }

/* 只有画布两侧都容得下说明栏时才启用三列；否则保持原来的 1480px 卡片画布。 */
@media(max-width:2279px) {
  main {
    display:block;
    max-width:1480px
  }

  .view-intro {
    position:static;
    margin:0 0 22px;
    padding:0
  }

  .grid,.settings-page {
    grid-column:auto;
    grid-row:auto
  }
}

@media(max-width:900px) {
  .widget-drag-handle { display:none }

  .app {
    display:block
  }

  .sidebar {
    display:none
  }

  main {
    display:block;
    padding:98px 18px 88px
  }

  .view-intro {
    position:static;
    margin:0 0 22px;
    padding:0
  }

  .grid,.settings-page {
    grid-column:auto;
    grid-row:auto
  }

  .top {
    left:0;
    padding:17px 18px 13px
  }

  .top h1 {
    font-size:24px
  }

  .date {
    font-size:12px
  }

  .grid {
    grid-template-columns:1fr 1fr;
    grid-auto-rows:auto;
    gap:12px
  }

  .hero,.agenda,.habit,.devices {
    grid-column:span 2
  }

  .delivery,.quick,.energy {
    grid-column:span 1
  }

  .mobile-nav {
    display:flex;
    position:fixed;
    z-index:10;
    bottom:0;
    left:0;
    right:0;
    height:67px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    justify-content:space-around;
    padding:8px
  }

  .mobile-nav button {
    background:transparent;
    color:var(--muted);
    font-size:10px;
    display:grid;
    place-items:center;
    gap:2px
  }

  .mobile-nav button:first-child {
    color:var(--accent);
    font-weight:700
  }

  .mobile-nav span {
    font-size:18px
  }

  .settings-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    align-items:start
  }

  .settings-stack { gap:12px }

  .settings-card.size-small,
  .settings-card.size-medium,
  .settings-card.size-large { grid-column:span 2 }

  .grid > .card.size-small,
  .grid > .card.size-medium,
  .grid > .card.size-large { grid-column:span 2 }

}

@media(max-width:580px) {
  main {
    padding:88px 13px 88px
  }

  .top {
    padding:15px 13px 11px
  }

  .date {
    display:none
  }

  .grid {
    grid-template-columns:1fr;
    gap:11px
  }

  .hero,.agenda,.habit,.devices,.delivery,.quick,.energy {
    grid-column:1
  }

  .hero {
    min-height:234px
  }

  .home-title {
    margin-top:34px
  }

  .rooms {
    right:15px
  }

  .card {
    padding:16px;
    border-radius:15px
  }
  .card { min-height:234px }

  .agenda-row {
    grid-template-columns:52px 1fr
  }

  .agenda-row .tag {
    display:none
  }

  .habit-grid {
    gap:5px
  }

  .day {
    padding:8px 1px
  }

  .quick-grid button {
    height:75px
  }

  .device-search {
    width:135px
  }

  .device-list {
    grid-template-columns:1fr
  }

  .picker-box {
    width:100%;
    max-height:88vh;
    border-radius:22px 22px 0 0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom))
  }

  .picker-options {
    grid-template-columns:1fr
  }

  .picker-box .modal-actions {
    position:sticky;
    bottom:0;
    background:#fff;
    padding-top:14px;
    margin-top:14px
  }
  .widget-settings { grid-template-columns:1fr }
  .nav-settings { grid-template-columns:1fr }
  .widget-setting-row { grid-template-columns:minmax(0,1fr) 76px }
  .settings-card { padding:18px; border-radius:15px }
  .settings-card > .widget-drag-handle { top:14px; right:50px }
  .settings-card > .widget-menu { top:14px; right:14px }
  .view-intro h2 { font-size:24px }

  .grid > .card.size-small,
  .grid > .card.size-medium,
  .grid > .card.size-large { grid-column:1 }
  .settings-card.size-small,
  .settings-card.size-medium,
  .settings-card.size-large { grid-column:1 }
  .device-items { grid-template-columns:1fr }
  .widget-menu { margin-left:5px }
  .widget-menu-popover { width:180px }

}

/* 环境传感器选择器可容纳较多实体，桌面和手机都只滚动选项区。 */
#environment-picker-modal {
  overflow-y:auto;
  align-items:start
}

#environment-picker-modal .environment-picker-box {
  max-height:min(720px,calc(100vh - 36px));
  margin:auto
}

#environment-picker-modal .environment-picker-list {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain
}

.environment-sensor-group h3 small {
  margin-left:auto;
  color:var(--muted);
  font-weight:400
}

@media(max-width:580px) {
  .card.hero {
    min-height:270px
  }

  .rooms .environment-slot {
    min-width:102px;
    max-width:124px
  }

  #environment-picker-modal {
    align-items:end;
    padding:0
  }

  #environment-picker-modal .environment-picker-box {
    width:100%;
    max-height:88vh;
    margin:0;
    border-radius:22px 22px 0 0
  }

  .environment-sensor-options {
    grid-template-columns:1fr
  }
}

/* 快捷设备选择器：保留自然的卡片尺寸；设备很多时只滚动展开项。 */
#picker-modal {
  overflow-y:auto;
  align-items:start
}

.picker-box {
  height:auto;
  max-height:none;
  min-height:0;
  margin:auto
}

.picker-box>p {
  flex:none
}

.picker-list {
  display:grid;
  flex:none;
  min-height:0;
  overflow:visible
}

.device-group[open] .picker-options {
  max-height:232px;
  overflow-y:scroll;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch
}

.picker-box .modal-actions {
  flex:none
}

@media(max-width:580px) {
  .picker-box {
    height:auto;
    max-height:none;
    margin:0 auto
  }

  .device-group[open] .picker-options {
    max-height:248px
  }

}

/* ===== 天气与预报 ===== */
.weather-body { display:grid; gap:14px }
.weather-now { display:flex; align-items:center; gap:14px }
.weather-icon { font-size:38px; line-height:1 }
.weather-main { display:grid; gap:2px }
.weather-main b { font:600 26px 'DM Mono',monospace; letter-spacing:-.02em }
.weather-main small, .weather-side small { color:var(--muted); font-size:12px }
.weather-side { margin-left:auto; text-align:right; display:grid; gap:2px; align-items:center }
.weather-days { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.weather-day { display:grid; justify-items:center; gap:3px; padding:10px 6px; background:var(--bg); border-radius:12px; font-size:11.5px; color:var(--muted) }
.weather-day span { font-size:20px; line-height:1 }
.weather-day b { color:var(--ink); font-size:12px; font-weight:500 }

/* ===== 纪念日与倒数 ===== */
.countdown-list { display:grid; gap:8px; align-content:start }
.countdown-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:var(--bg) }
.countdown-copy { display:grid; gap:2px; min-width:0 }
.countdown-copy b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.countdown-copy small { color:var(--muted); font-size:11.5px }
.countdown-pill { font:500 12px 'DM Mono',monospace; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:99px; white-space:nowrap }
.countdown-item.today .countdown-pill { background:var(--orange-soft); color:var(--orange) }
.countdown-settings { display:grid; gap:6px; margin:12px 0 4px }
.countdown-setting-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--bg); font-size:12.5px }
.countdown-setting-row > span { font-weight:500 }
.countdown-setting-row small { color:var(--muted); flex:1 }
.countdown-setting-row button { width:24px; height:24px; border-radius:8px; background:transparent; color:#b64d3d; font-size:15px; line-height:1 }
.countdown-empty { color:var(--muted); font-size:12.5px; padding:10px 0 }
.countdown-add { margin-top:10px }
.countdown-yearly { margin:2px 0 10px }

/* ===== AI 助手 ===== */
.nav-ai-button { color:var(--muted) }
.nav-ai-button .icon { color:var(--accent) }
.ai-launcher{position:fixed;right:20px;bottom:20px;z-index:91;width:50px;height:50px;border-radius:16px;background:var(--accent);color:#fff;font-size:24px;box-shadow:0 12px 30px rgba(21,126,108,.3);transition:transform .2s,opacity .2s}.ai-launcher:hover{transform:translateY(-3px)}.ai-launcher.is-hidden{opacity:0;pointer-events:none;transform:scale(.7)}
.ai-panel { position:fixed; right:18px; bottom:18px; width:clamp(320px,30vw,520px); height:clamp(360px,62vh,720px); min-width:300px; min-height:300px; max-width:calc(100vw - 28px); max-height:calc(100vh - 28px); resize:both; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 70px rgba(20,32,28,.25); display:flex; flex-direction:column; z-index:90; opacity:0; transform:translateY(14px) scale(.98); pointer-events:none; transition:opacity .22s,transform .22s }
.ai-panel.open { opacity:1; transform:none; pointer-events:auto }.ai-panel.minimized{opacity:0;pointer-events:none;transform:translateY(14px) scale(.96)}.ai-head-actions{display:flex;gap:4px}.ai-head-actions .more{width:28px;height:28px;display:grid;place-items:center}
.ai-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line) }
.ai-title { display:flex; align-items:center; gap:8px; font-size:14px }
.ai-title small { color:var(--muted); font-size:11px; font-family:'DM Mono',monospace; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ai-dot { width:8px; height:8px; border-radius:50%; background:#c9d4cd; flex:none }
.ai-dot.ok { background:var(--accent) }
.ai-messages { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px }
.ai-empty { margin:auto; text-align:center; color:var(--muted); font-size:12.5px; line-height:1.7; padding:0 18px }
.ai-empty-icon { font-size:26px; margin-bottom:6px }
.ai-hints { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px }
.ai-hint { font-size:12px; padding:6px 12px; border-radius:99px; background:var(--bg); border:1px solid var(--line); color:var(--ink) }
.ai-msg { max-width:86%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.65; white-space:pre-wrap; word-break:break-word }
.ai-msg.user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px }
.ai-msg.bot { align-self:flex-start; background:var(--bg); border-bottom-left-radius:4px }
.ai-msg.thinking { color:var(--muted) }
.ai-input { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line) }
.ai-input input { flex:1; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); font:inherit; color:var(--ink); outline:none }
.ai-input input:focus { border-color:var(--accent) }
.ai-input .btn { flex:none }
.ai-model-row { display:flex; gap:8px }
.ai-model-row select { flex:1; min-width:0 }
.ai-config-status { font-size:12px; color:var(--muted); min-height:16px; display:block; margin-top:8px }

/* ===== 外观主题切换 ===== */
.theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px }
.theme-options button { display:grid; justify-items:center; gap:4px; padding:12px 8px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:12px; color:var(--muted) }
.theme-options button span { font-size:18px; line-height:1 }
.theme-options button.active { border-color:var(--accent); color:var(--accent); background:var(--accent-soft) }

/* 下拉框与输入框统一质感 */
.field select, .ai-model-row select { width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg); font:inherit; color:var(--ink); outline:none }
.field select:focus, .ai-model-row select:focus { border-color:var(--accent) }

/* ===== 夜间模式 ===== */
[data-theme="dark"] {
  --bg:#0e1311;
  --ink:#e8efeb;
  --muted:#8d9a93;
  --line:#26312b;
  --card:#151d19;
  --accent:#22a68b;
  --accent-soft:#1b312a;
  --orange:#e6904c;
  --orange-soft:#38281a;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark
}
[data-theme="dark"] body { background:#0e1311 }
[data-theme="dark"] .btn { background:#1c2622; color:#c9d6cf }
[data-theme="dark"] .btn.primary { background:var(--accent); color:#04120d }
[data-theme="dark"] .btn.danger { background:#33201b; color:#e08a76 }
[data-theme="dark"] .btn.logout { background:transparent!important; color:#8d9a93!important }
[data-theme="dark"] .card, [data-theme="dark"] .settings-card { border-color:#232e28 }
[data-theme="dark"] .settings-version { background:linear-gradient(135deg,#16201c,#101815) }
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .ai-model-row select,
[data-theme="dark"] .device-search, [data-theme="dark"] .ai-input input, [data-theme="dark"] .auth-field input { background:#0f1714; border-color:#2a3630; color:var(--ink) }
[data-theme="dark"] .modal-box, [data-theme="dark"] .toast { background:#1a2420; color:var(--ink) }
[data-theme="dark"] .auth-gate { background:#0e1311 }
[data-theme="dark"] .auth-card { background:#151d19; border-color:#232e28 }
[data-theme="dark"] .auth-card-foot { border-color:#232e28 }
[data-theme="dark"] .auth-field input { background:#0f1714 }
[data-theme="dark"] .device-item, [data-theme="dark"] .environment-slot, [data-theme="dark"] .picker-option,
[data-theme="dark"] .quick-grid button, [data-theme="dark"] .ai-hint, [data-theme="dark"] .ai-msg.bot { background:#1a2420 }
[data-theme="dark"] .quick-grid button.on { background:var(--accent-soft); border-color:var(--accent) }
[data-theme="dark"] .weather-day, [data-theme="dark"] .countdown-item, [data-theme="dark"] .countdown-setting-row { background:#101815 }
[data-theme="dark"] .mobile-nav { background:rgba(21,29,25,.94) }
[data-theme="dark"] .app-loader { background:#0e1311; color:var(--muted) }
[data-theme="dark"] .loader-arc circle { stroke:#4fbf9b }
[data-theme="dark"] .hero .temp span, [data-theme="dark"] .home-title { color:var(--ink) }
[data-theme="dark"] .detail-state { background:#101815 }
[data-theme="dark"] .detail-attrs div { border-color:#232e28 }
[data-theme="dark"] .energy .bar { background:#1a2420 }
[data-theme="dark"] .habit-grid .day { background:#1a2420; border-color:#232e28 }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#2a3630 }
[data-theme="dark"] .sidebar { background:transparent }
[data-theme="dark"] .top .date b { color:var(--ink) }
[data-theme="dark"] .agenda-row { background:transparent }
[data-theme="dark"] .delivery .progress { background:#1a2420 }
[data-theme="dark"] .stages b { color:var(--ink) }
[data-theme="dark"] .ai-panel { box-shadow:0 24px 70px rgba(0,0,0,.55) }
[data-theme="dark"] .widget-menu-popover { background:#1a2420; color:var(--ink) }
[data-theme="dark"] .environment-sensor-option, [data-theme="dark"] .device-group { background:#101815 }
[data-theme="dark"] .device-group summary { border-color:#232e28 }
[data-theme="dark"] .device-item small.state-on { color:var(--accent) }
[data-theme="dark"] .picker-option:has(input:checked) { border-color:var(--accent) }

/* 夜间模式补充：开关行与开关轨道 */
[data-theme="dark"] .widget-toggle { background:#101815; border-color:#26312b }
[data-theme="dark"] .widget-toggle:hover { background:#141d18; border-color:#2f4a41 }
[data-theme="dark"] .widget-toggle i { background:#2a3630; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) }

/* 夜间模式完整表面层：覆盖旧组件中写死的白色与浅灰色，避免出现“白块”。 */
[data-theme="dark"] .top {
  background:rgba(14,19,17,.92);
  border-bottom-color:rgba(38,49,43,.86)
}

[data-theme="dark"] .nav button { color:#9aa8a1 }
[data-theme="dark"] .nav button:hover {
  color:var(--ink);
  background:rgba(255,255,255,.045)
}
[data-theme="dark"] .nav button.active {
  color:var(--ink);
  background:#18221e;
  box-shadow:0 7px 20px rgba(0,0,0,.28)
}
[data-theme="dark"] .side-bottom {
  background:#17241f;
  border:1px solid #26352e
}
[data-theme="dark"] .side-bottom span { color:#91a39a }
[data-theme="dark"] .side-bottom button { background:#26352f; color:var(--ink) }

[data-theme="dark"] .card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .ai-panel {
  background:var(--card);
  border-color:#26312b
}
[data-theme="dark"] .card.hero {
  background:linear-gradient(125deg,#167b69,#255a52);
  border-color:rgba(126,221,198,.14)
}
[data-theme="dark"] .settings-card.settings-version {
  background:linear-gradient(135deg,#16201c,#101815)
}

[data-theme="dark"] .environment-sensor-group,
[data-theme="dark"] .device-group {
  background:#101815;
  border-color:#26312b
}
[data-theme="dark"] .environment-sensor-group h3 {
  color:#aab7b0;
  border-bottom-color:#26312b
}
[data-theme="dark"] .environment-sensor-option,
[data-theme="dark"] .picker-option,
[data-theme="dark"] .device-item {
  background:#18221e;
  border-color:#2a3731;
  color:var(--ink)
}
[data-theme="dark"] .environment-sensor-option:has(input:checked),
[data-theme="dark"] .picker-option:has(input:checked) {
  background:#193029;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(34,166,139,.12)
}
[data-theme="dark"] .device-item:hover,
[data-theme="dark"] .picker-option:hover {
  background:#1b2d26;
  border-color:#39705f
}

[data-theme="dark"] .quick .more,
[data-theme="dark"] .quick-grid button,
[data-theme="dark"] .widget-drag-handle,
[data-theme="dark"] .widget-menu-trigger,
[data-theme="dark"] .widget-size,
[data-theme="dark"] .scene-action {
  background:#1a2420;
  border-color:#2a3731;
  color:var(--ink)
}
[data-theme="dark"] .quick-grid button:hover,
[data-theme="dark"] .quick-grid button.on,
[data-theme="dark"] .widget-drag-handle:hover,
[data-theme="dark"] .widget-menu-trigger:hover,
[data-theme="dark"] .widget-menu.is-open .widget-menu-trigger {
  background:#1b3029;
  border-color:#39705f;
  color:var(--accent)
}
[data-theme="dark"] .widget-menu-popover {
  background:#1a2420;
  border-color:#2d3a34;
  box-shadow:0 16px 42px rgba(0,0,0,.48)
}
[data-theme="dark"] .widget-menu-popover button { color:var(--ink) }
[data-theme="dark"] .widget-menu-popover button:hover,
[data-theme="dark"] .widget-menu-popover button.active {
  background:#1b3029;
  color:#5fd2b8
}
[data-theme="dark"] .widget-drag-ghost {
  background:rgba(26,36,32,.97);
  border-color:#39705f;
  color:var(--ink);
  box-shadow:0 14px 36px rgba(0,0,0,.48)
}
[data-theme="dark"] .hero .widget-menu-trigger,
[data-theme="dark"] .hero .widget-drag-handle {
  color:#c6e1db;
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.1)
}
[data-theme="dark"] .hero .widget-menu-trigger:hover,
[data-theme="dark"] .hero .widget-menu.is-open .widget-menu-trigger,
[data-theme="dark"] .hero .widget-drag-handle:hover {
  color:#fff;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.18)
}

[data-theme="dark"] .scene-item {
  background:#101815;
  border-color:#26312b
}
[data-theme="dark"] .scene-item:hover {
  background:#15231d;
  border-color:#39705f;
  box-shadow:0 8px 20px rgba(0,0,0,.24)
}
[data-theme="dark"] .scene-action { color:var(--accent) }

[data-theme="dark"] .progress,
[data-theme="dark"] .day,
[data-theme="dark"] .detail-attrs div,
[data-theme="dark"] .tag {
  background:#1a2420;
  border-color:#2a3731;
  color:#a5b2ab
}
[data-theme="dark"] .tag.work { background:#1d2940; color:#9cb4ef }
[data-theme="dark"] .tag.life { background:#38271c; color:#e6a16d }
[data-theme="dark"] .eta { color:#efaa70 }
[data-theme="dark"] .agenda-row { border-color:#26312b }
[data-theme="dark"] .check { border-color:#44524b }

[data-theme="dark"] .modal-box,
[data-theme="dark"] .auth-card {
  background:#151d19;
  border-color:#26312b;
  box-shadow:0 25px 70px rgba(0,0,0,.5)
}
[data-theme="dark"] .picker-box .modal-actions { background:#151d19 }
[data-theme="dark"] .detail-attrs div { color:var(--ink) }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color:var(--ink);
  caret-color:var(--accent)
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color:#718078; opacity:1 }
[data-theme="dark"] select option { background:#151d19; color:var(--ink) }
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #0f1714 inset;
  transition:background-color 9999s ease-out 0s
}

[data-theme="dark"] .theme-options button {
  background:#101815;
  border-color:#2a3731;
  color:#9aa8a1
}
[data-theme="dark"] .theme-options button.active {
  background:var(--accent-soft);
  border-color:var(--accent);
  color:#5fd2b8
}
[data-theme="dark"] .mobile-nav {
  background:rgba(21,29,25,.94);
  border-top-color:#26312b
}

/* DSH 工作区动态 */
.workspaces { min-height:270px }
.workspace-card-tools { display:flex; align-items:center; gap:8px }
.workspace-refresh { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--muted); font-size:17px; cursor:pointer; transition:.18s }
.workspace-refresh:hover { color:var(--accent); border-color:#b9ddd3; background:var(--accent-soft) }
.workspace-refresh.is-spinning { animation:workspace-spin .8s linear infinite }
.workspace-source-offline { color:#b56a16!important }
.workspace-summary { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 10px }
.workspace-summary span { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--muted); font-size:11px }
.workspace-summary b { color:var(--ink); font-variant-numeric:tabular-nums }
.workspace-list { display:grid; gap:8px; max-height:420px; overflow:auto; padding-right:2px }
.workspace-row { border:1px solid var(--line); border-radius:13px; background:var(--bg); overflow:hidden; transition:border-color .18s,box-shadow .18s }
.workspace-row[open] { border-color:#b9ddd3; box-shadow:0 7px 18px rgba(21,126,108,.08) }
.workspace-row summary { display:grid; grid-template-columns:12px minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:58px; padding:10px 12px; cursor:pointer; list-style:none }
.workspace-row summary::-webkit-details-marker { display:none }
.workspace-copy { display:grid; gap:3px; min-width:0 }
.workspace-copy b,.workspace-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.workspace-copy b { color:var(--ink); font-size:13px }
.workspace-copy small { color:var(--muted); font-size:10.5px }
.workspace-state { padding:4px 8px; border-radius:999px; background:var(--card); color:var(--muted); font-size:10.5px; white-space:nowrap }
.workspace-row time { color:var(--muted); font-size:10.5px; white-space:nowrap; font-variant-numeric:tabular-nums }
.workspace-detail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:0 12px 12px 34px }
.workspace-detail span { display:grid; gap:2px; padding:8px; border-radius:9px; background:var(--card); color:var(--muted); font-size:9.5px }
.workspace-detail b { color:var(--ink); font-size:12px; font-variant-numeric:tabular-nums }
.workspace-dot { width:9px; height:9px; display:inline-block; border-radius:50%; flex:none; background:#a7afa9; box-shadow:0 0 0 3px rgba(167,175,169,.12) }
.workspace-dot.state-working { background:#16a36a; box-shadow:0 0 0 4px rgba(22,163,106,.14); animation:workspace-pulse 1.7s ease-in-out infinite }
.workspace-dot.state-active { background:#4c8dff; box-shadow:0 0 0 3px rgba(76,141,255,.13) }
.workspace-dot.state-recent { background:#e7a22a; box-shadow:0 0 0 3px rgba(231,162,42,.13) }
.workspace-dot.state-idle { background:#9aa39f }
.workspace-dot.state-none { background:#c9cfcb }
.workspace-row.state-working .workspace-state { color:#08794a; background:rgba(22,163,106,.11) }
.workspace-row.state-active .workspace-state { color:#2c67c9; background:rgba(76,141,255,.11) }
.workspace-row.state-recent .workspace-state { color:#a46600; background:rgba(231,162,42,.13) }
.workspace-error { display:grid; gap:5px; padding:16px; border:1px dashed #e3b3b3; border-radius:12px; background:rgba(195,55,55,.06); color:#a53838 }
.workspace-error small { color:var(--muted); line-height:1.5 }
@keyframes workspace-pulse { 50% { transform:scale(.78); opacity:.65 } }
@keyframes workspace-spin { to { transform:rotate(360deg) } }
@media (max-width:700px) { .workspace-row summary { grid-template-columns:12px minmax(0,1fr) auto }.workspace-row time { grid-column:2/4 }.workspace-detail { grid-template-columns:1fr 1fr; padding-left:34px } }
@media (prefers-reduced-motion:reduce) { .workspace-dot.state-working,.workspace-refresh.is-spinning { animation:none } }

/* 管理员升级控制台 */
.upgrade-body { min-height:100vh; background:linear-gradient(145deg,#edf4f0,#eef1ef 48%,#e1eee8); color:var(--ink) }
.upgrade-shell { width:min(920px,calc(100% - 32px)); margin:0 auto; padding:36px 0 64px }
.upgrade-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px }
.upgrade-brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:17px; font-weight:700; text-decoration:none }
.upgrade-card { padding:clamp(22px,5vw,42px); border:1px solid #dbe7e1; border-radius:24px; background:rgba(255,255,255,.88); box-shadow:0 24px 70px rgba(24,59,47,.12); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
.upgrade-title { display:flex; justify-content:space-between; gap:18px; align-items:flex-start }
.upgrade-title h1 { margin:6px 0 9px; font-size:clamp(27px,5vw,38px); letter-spacing:-.05em }
.upgrade-title p { max-width:570px; margin:0; color:var(--muted); line-height:1.75 }
.upgrade-state { flex:none; padding:7px 10px; border-radius:999px; background:#edf1ee; color:var(--muted); font:500 11px 'DM Mono',monospace }
.upgrade-state[data-kind="working"] { background:#e7f4ef; color:var(--accent) }.upgrade-state[data-kind="ready"],.upgrade-state[data-kind="success"] { background:#dff3eb; color:#08794a }.upgrade-state[data-kind="error"] { background:#fff0ed; color:#ae4c3c }
.upgrade-versions { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px; margin:30px 0 24px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--bg) }
.upgrade-versions div { display:grid; gap:5px }.upgrade-versions div:last-child { text-align:right }.upgrade-versions small { color:var(--muted); font-size:11px }.upgrade-versions b { color:var(--accent); font:600 18px 'DM Mono',monospace; letter-spacing:-.04em }.upgrade-versions>span { color:var(--muted); font-size:19px }
.upgrade-progress { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--card) }.upgrade-progress-meta { display:flex; align-items:center; justify-content:space-between; gap:16px }.upgrade-progress-meta b { font-size:13px }.upgrade-progress-meta span { color:var(--accent); font:500 12px 'DM Mono',monospace }.upgrade-progress-track { height:8px; margin:12px 0 8px; overflow:hidden; border-radius:999px; background:#deebe5 }.upgrade-progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#157e6c,#4eb89e); transition:width .35s ease }.upgrade-progress p { min-height:20px; margin:0; color:var(--muted); font-size:12px; line-height:1.6 }
.upgrade-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0; margin:22px 0; list-style:none }.upgrade-steps li { display:flex; align-items:center; gap:8px; min-width:0; color:var(--muted) }.upgrade-steps i { width:27px; height:27px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--card); font:500 11px 'DM Mono',monospace; font-style:normal }.upgrade-steps span { display:grid; min-width:0; gap:2px }.upgrade-steps b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px }.upgrade-steps small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px }.upgrade-steps li.active i { border-color:var(--accent); color:#fff; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft) }.upgrade-steps li.done { color:var(--accent) }.upgrade-steps li.done i { border-color:var(--accent); background:var(--accent-soft); color:var(--accent) }.upgrade-steps li.done i::after { content:'✓'; position:absolute; font-weight:700 }
.upgrade-actions { display:flex; justify-content:flex-end; gap:9px; margin:24px 0 16px }.upgrade-actions .btn:disabled { cursor:not-allowed; opacity:.55 }
.upgrade-log { height:230px; margin:0; overflow:auto; padding:15px; border:1px solid #243730; border-radius:14px; background:#101815; color:#bfd9cf; font:11px/1.75 'DM Mono',monospace; white-space:pre-wrap; overflow-wrap:anywhere }.upgrade-log[data-kind="error"] { color:#ffc5b9 }
.upgrade-note { margin:14px 0 0; color:var(--muted); font-size:11px; line-height:1.7 }
@media(max-width:700px) { .upgrade-shell { width:min(100% - 20px,920px); padding-top:14px }.upgrade-card { border-radius:18px }.upgrade-title { display:grid }.upgrade-versions { margin-top:22px }.upgrade-steps { grid-template-columns:1fr 1fr }.upgrade-log { height:190px } }
@media(max-width:420px) { .upgrade-head { margin-bottom:16px }.upgrade-versions { padding:13px; gap:8px }.upgrade-versions b { font-size:15px }.upgrade-actions { display:grid; grid-template-columns:1fr 1fr }.upgrade-actions .btn { padding:10px 7px; font-size:12px } }
[data-theme="dark"] .upgrade-body { background:radial-gradient(circle at top,#17342b,#0e1311 55%) }[data-theme="dark"] .upgrade-card { background:rgba(21,29,25,.9); border-color:#2a3c34 }[data-theme="dark"] .upgrade-versions,[data-theme="dark"] .upgrade-progress { background:#101815; border-color:#26312b }[data-theme="dark"] .upgrade-progress-track { background:#20332b }

/* Narrow workspace dialogs must respond to their own width, not the viewport. */
.workspace-detail-modal-box{container-type:inline-size;container-name:workspace-detail;overflow:hidden}
.workspace-detail-modal-box .workspace-detail-layout,.workspace-detail-modal-box .workspace-record-panel,.workspace-detail-modal-box .workspace-record-list{min-width:0}
.workspace-detail-modal-box .workspace-record-list{overflow-x:hidden}
@container workspace-detail (max-width:760px){.workspace-detail-layout:not(.is-locked){display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(110px,28%) minmax(0,1fr)!important;gap:12px!important}.workspace-session-list{border-right:0!important;border-bottom:1px solid var(--line);padding:0 0 10px!important}.workspace-record{max-width:100%;margin-left:0!important;margin-right:0!important}.workspace-record header{align-items:flex-start;flex-wrap:wrap}.workspace-record header time{font-size:10px}.workspace-record pre{font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.workspace-message-form{gap:8px}.workspace-message-form textarea{min-height:58px;font-size:13px}.workspace-message-form button{padding:9px 12px}}
.modal-box.workspace-detail-modal-box{width:min(1120px,calc(100vw - 24px))!important;max-width:none!important;height:min(780px,calc(100dvh - 24px));padding:clamp(16px,3vw,24px)}

/* v1 升级控制台：独立于主看板的三列 main 网格，避免超宽屏时被压成细长卡片。 */
.upgrade-body { min-height:100vh; background:radial-gradient(circle at 50% -20%,#1a4135 0,#0c1511 44%,#080c0a 100%) !important }
.upgrade-body .upgrade-shell { display:block!important; width:min(1280px,calc(100% - 64px)); max-width:none!important; min-height:100vh; margin:0 auto; padding:38px 0 72px }
.upgrade-head-actions { display:flex; align-items:center; gap:12px }.upgrade-secure { padding:7px 10px; border:1px solid rgba(86,205,173,.24); border-radius:99px; color:#76d9be; background:rgba(21,126,108,.12); font:500 10px 'DM Mono',monospace; letter-spacing:.08em }
.upgrade-console { overflow:hidden; border:1px solid rgba(134,199,177,.2); border-radius:28px; background:rgba(14,25,20,.86); box-shadow:0 30px 90px rgba(0,0,0,.35) }
.upgrade-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.55fr); gap:42px; align-items:center; padding:48px 52px; border-bottom:1px solid rgba(134,199,177,.16); background:linear-gradient(120deg,rgba(22,78,62,.32),rgba(17,34,27,.16)) }
.upgrade-hero h1 { margin:8px 0 12px; font-size:clamp(36px,5vw,60px); line-height:1.08; letter-spacing:-.07em }.upgrade-hero p { max-width:680px; margin:0; color:#9caca4; font-size:15px; line-height:1.85 }.upgrade-hero .upgrade-versions { width:min(640px,100%); margin:28px 0 0; padding:18px 22px; background:rgba(6,14,11,.3); border-color:rgba(134,199,177,.18) }.upgrade-arrow { font-size:24px!important }
.upgrade-state-card { display:grid; gap:12px; padding:24px; border:1px solid rgba(134,199,177,.2); border-radius:20px; background:rgba(8,17,13,.56) }.upgrade-state-card>b { color:#eff7f2; font-size:18px }.upgrade-state-card>#progress-message { min-height:45px; color:#9baaa2; line-height:1.65 }.upgrade-state-foot { display:flex; justify-content:space-between; color:#8a9d93; font:11px 'DM Mono',monospace }.upgrade-state-foot span:first-child { color:#69d6b6 }
.upgrade-workspace { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(370px,.95fr); gap:0 }.upgrade-process { padding:42px 52px; border-right:1px solid rgba(134,199,177,.16) }.upgrade-section-head { display:flex; justify-content:space-between; gap:28px; align-items:flex-start }.upgrade-section-head h2 { margin:6px 0 0; color:#eef8f2; font-size:23px }.upgrade-section-head p { max-width:360px; margin:0; color:#8fa097; line-height:1.7; font-size:12px }
.upgrade-console .upgrade-steps { grid-template-columns:1fr 1fr; gap:12px; margin:32px 0 }.upgrade-console .upgrade-steps li { min-height:80px; padding:14px; border:1px solid rgba(134,199,177,.14); border-radius:15px; background:rgba(8,17,13,.28) }.upgrade-console .upgrade-steps i { width:34px; height:34px; border-color:rgba(134,199,177,.26); background:transparent }.upgrade-console .upgrade-steps b { color:#dce9e1; font-size:13px }.upgrade-console .upgrade-steps small { color:#82938a; font-size:11px }.upgrade-console .upgrade-steps li.active { border-color:#2ba786; background:rgba(21,126,108,.16) }.upgrade-console .upgrade-steps li.done { border-color:rgba(43,167,134,.42); background:rgba(21,126,108,.08) }
.upgrade-console .upgrade-actions { justify-content:flex-start; margin:0 }.upgrade-console .upgrade-actions .btn { min-width:140px }.upgrade-log-panel { min-width:0; display:flex; flex-direction:column; padding:32px; background:rgba(4,10,8,.3) }.upgrade-log-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; color:#dbeae2 }.upgrade-log-head>div { display:flex; align-items:center; gap:9px }.upgrade-log-head>span { color:#7d9186; font:11px 'DM Mono',monospace }.upgrade-log-dot { width:9px; height:9px; border-radius:50%; background:#32b58f; box-shadow:0 0 0 5px rgba(50,181,143,.14) }.upgrade-console .upgrade-log { flex:1; height:auto; min-height:280px; border-color:rgba(134,199,177,.18); background:#07100c; color:#b6d7c8 }
.dsh-pairing-panel { display:grid; gap:12px; margin:18px 0; padding:15px; border:1px solid #cae4da; border-radius:14px; background:#f5fbf8 }.dsh-pairing-heading { display:flex; gap:10px }.dsh-pairing-heading>span { width:28px; height:28px; display:grid; place-items:center; flex:none; border-radius:9px; background:var(--accent); color:#fff }.dsh-pairing-heading>div { display:grid; gap:3px }.dsh-pairing-heading b { font-size:13px }.dsh-pairing-heading small { color:var(--muted); font-size:11px; line-height:1.5 }.dsh-pairing-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap }.dsh-pairing-actions>span { color:var(--muted); font-size:11px }.dsh-pairing-code { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px; border:1px dashed #9fd2c3; border-radius:11px; background:#fff }.dsh-pairing-code>b { color:var(--accent); font:600 28px 'DM Mono',monospace; letter-spacing:.16em }.dsh-pairing-code>span { color:var(--muted); font-size:11px }.dsh-pairing-code .btn { margin-left:auto; padding:8px 10px; font-size:11px }
[data-theme="dark"] .dsh-pairing-panel { border-color:#2d5347; background:#101b16 }[data-theme="dark"] .dsh-pairing-code { border-color:#346b59; background:#0b130f }[data-theme="dark"] .dsh-pairing-heading>span { color:#04120d }
@media(max-width:860px){.upgrade-body .upgrade-shell{width:min(100% - 24px,1280px);padding:16px 0 36px}.upgrade-hero,.upgrade-workspace{grid-template-columns:1fr}.upgrade-hero{gap:28px;padding:30px}.upgrade-process{padding:30px;border-right:0;border-bottom:1px solid rgba(134,199,177,.16)}.upgrade-log-panel{padding:26px}.upgrade-section-head{display:grid}.upgrade-console .upgrade-log{min-height:230px}}
@media(max-width:540px){.upgrade-head-actions .upgrade-secure{display:none}.upgrade-hero,.upgrade-process{padding:22px}.upgrade-console .upgrade-steps{grid-template-columns:1fr}.upgrade-hero h1{font-size:38px}.upgrade-hero .upgrade-versions{padding:14px}.upgrade-state-card{padding:18px}.upgrade-log-panel{padding:20px}.dsh-pairing-code .btn{margin-left:0}}

.workspace-detail-modal-box .card-head>div:first-child{min-width:0;flex:1}.workspace-detail-modal-box .card-head>div:first-child h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-detail-modal-box .card-head>.more{width:30px;height:30px;display:grid;place-items:center;flex:none}.workspace-detail-launcher{position:fixed;right:78px;bottom:20px;z-index:91;width:50px;height:50px;display:none;border:0;border-radius:16px;background:#4c7dff;color:#fff;font-size:22px;box-shadow:0 12px 30px rgba(76,125,255,.28);cursor:pointer}.workspace-detail-launcher.show{display:grid;place-items:center}.workspace-detail-launcher:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce) { .loader-box,.loader-box b.loader-greeting,.logo.loader-logo { animation:none!important } .loader-arc { animation-duration:3s!important } .loader-arc circle { animation:none!important; stroke-dasharray:54 213.6 } }


/* DSH 工作区分组、会话状态与实时输出 */
.workspace-session-preview-list{display:grid;gap:6px;padding:0 12px 10px 34px}.workspace-session-preview{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);text-align:left}.workspace-session-preview:hover{border-color:#9fd3c6;background:var(--accent-soft)}.workspace-session-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600}.workspace-session-preview small{color:var(--muted);font-size:10px;white-space:nowrap}.workspace-session-empty{padding:8px 12px 12px 34px;color:var(--muted);font-size:11px}.workspace-open-detail{margin:0 12px 12px 34px}.workspace-session-list>button{display:grid;grid-template-columns:10px minmax(0,1fr);align-items:center;gap:8px}.workspace-session-list>button span{display:grid;gap:4px;min-width:0}.workspace-session-list>button b,.workspace-session-list>button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-record-head{display:flex;align-items:center;gap:8px}.workspace-record-state{width:10px;height:10px}.workspace-dot.state-completed{background:#357d63;box-shadow:0 0 0 3px rgba(53,125,99,.14)}.workspace-dot.state-error{background:#d05252;box-shadow:0 0 0 3px rgba(208,82,82,.14)}.workspace-dot.state-choice{background:#dc9a25;box-shadow:0 0 0 3px rgba(220,154,37,.16);animation:workspace-pulse 1.7s ease-in-out infinite}.workspace-dot.state-task{background:#248cdf;box-shadow:0 0 0 4px rgba(36,140,223,.15);animation:workspace-pulse 1.3s ease-in-out infinite}.workspace-dot.state-sleep{background:#9aa39f;box-shadow:0 0 0 3px rgba(154,163,159,.12)}.workspace-row.state-error{border-color:#edb0b0}.workspace-row.state-choice{border-color:#efd398}.workspace-row.state-task{border-color:#a9d7f5}.workspace-row.state-completed .workspace-state{color:#27664f;background:rgba(53,125,99,.12)}.workspace-row.state-error .workspace-state{color:#a13939;background:rgba(208,82,82,.11)}.workspace-row.state-choice .workspace-state{color:#8e6000;background:rgba(220,154,37,.13)}.workspace-row.state-task .workspace-state{color:#1764a3;background:rgba(36,140,223,.11)}.workspace-row.state-sleep .workspace-state{color:#69736f;background:rgba(154,163,159,.14)}
[data-theme="dark"] .workspace-session-preview{background:#18221e;border-color:#2a3731}[data-theme="dark"] .workspace-session-preview:hover{background:#1b3029;border-color:#39705f}[data-theme="dark"] .workspace-row.state-error{border-color:#6e3737}[data-theme="dark"] .workspace-row.state-choice{border-color:#6e5928}[data-theme="dark"] .workspace-row.state-task{border-color:#275b82}[data-theme="dark"] .workspace-row.state-completed .workspace-state{color:#7ad6b1;background:#18342a}[data-theme="dark"] .workspace-row.state-error .workspace-state{color:#f19b9b;background:#3b2121}[data-theme="dark"] .workspace-row.state-choice .workspace-state{color:#f0c76c;background:#3b3017}[data-theme="dark"] .workspace-row.state-task .workspace-state{color:#81c8fb;background:#182e3e}
@media(max-width:700px){.workspace-session-preview{grid-template-columns:10px minmax(0,1fr)}.workspace-session-preview small{grid-column:2}.workspace-session-preview-list,.workspace-session-empty,.workspace-open-detail{padding-left:34px;margin-left:0}.workspace-open-detail{margin-left:34px}}


/* 静默 SSO：登录页展示“以 *** 的身份继续”的身份卡片 */
.auth-sso{display:grid;gap:8px;margin:4px 0 2px;animation:auth-sso-in .32s cubic-bezier(.22,1,.36,1) both}
.auth-sso[hidden]{display:none}
.auth-card .auth-sso-continue{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;width:100%;padding:11px 13px;text-align:left}
.auth-sso-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.2);font:600 16px 'DM Mono',monospace}
.auth-sso-copy{display:grid;gap:2px;min-width:0}
.auth-sso-copy small{opacity:.82;font-size:11px}
.auth-sso-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.auth-card .auth-sso-switch{width:100%;padding:9px 12px;font-size:12px;font-weight:500}
@keyframes auth-sso-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
[data-theme="dark"] .auth-sso-avatar{background:rgba(255,255,255,.14)}
@media(prefers-reduced-motion:reduce){.auth-sso{animation:none}}

/* 登录页视觉升级：保持认证逻辑不变，只增强品牌层级、层次与反馈状态。 */
.auth-gate {
  background:
    radial-gradient(circle at 12% 18%, rgba(46,170,146,.12), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(67,111,145,.1), transparent 30%),
    #0b1110;
}
.auth-gate:before,
.auth-gate:after {
  content:'';
  position:fixed;
  pointer-events:none;
  border:1px solid rgba(120,210,188,.08);
  border-radius:50%;
}
.auth-gate:before { width:52vw; height:52vw; left:-25vw; top:-25vw }
.auth-gate:after { width:42vw; height:42vw; right:-20vw; bottom:-22vw }
.auth-panel {
  background:linear-gradient(155deg,rgba(17,47,40,.88),rgba(12,26,23,.94));
  border-right:1px solid rgba(139,220,198,.12);
}
.auth-card {
  position:relative;
  width:min(430px,calc(100% - 32px));
  margin:16px;
  padding:38px 36px 30px;
  background:rgba(19,29,26,.88);
  border:1px solid rgba(160,211,197,.16);
  border-radius:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
}
.auth-card:before {
  content:'';
  position:absolute;
  inset:0 18% auto 18%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(95,210,183,.65),transparent);
}
.auth-card-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-bottom:27px;
  color:#7da399;
  font:500 10px 'DM Mono',monospace;
  letter-spacing:.16em;
}
.auth-card-brand .logo {
  width:28px;
  height:28px;
  border-radius:9px;
  margin:0;
  box-shadow:0 5px 18px rgba(35,182,155,.22);
}
.auth-card-brand .logo:after { width:12px; height:12px; top:8px; left:8px }
.auth-card h1 {
  color:#f1f7f4;
  font-size:26px;
  letter-spacing:.02em;
  margin-bottom:9px;
}
.auth-card p { color:#8fa7a0; margin-bottom:27px }
.auth-card .auth-sso-continue {
  min-height:76px;
  background:linear-gradient(135deg,#1c8f7c,#176d60);
  border:1px solid rgba(130,237,211,.2);
  border-radius:16px;
  box-shadow:0 14px 28px rgba(5,83,68,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.auth-card .auth-sso-continue:hover {
  transform:translateY(-2px);
  filter:saturate(1.08);
  box-shadow:0 18px 34px rgba(5,83,68,.36), inset 0 1px 0 rgba(255,255,255,.15);
}
.auth-sso-avatar {
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(4,48,41,.28);
  color:#e5fff8;
}
.auth-sso-copy small { color:#bce5da; font-size:10px }
.auth-sso-copy b { color:#fff; font-size:15px }
.auth-card .auth-sso-switch {
  color:#8db1a7;
  padding:10px 12px 4px;
  text-decoration:none;
}
.auth-card .auth-sso-switch:hover { color:#c8eee4 }
.auth-sso-probe {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:76px;
  padding:15px 16px;
  border:1px solid rgba(119,196,178,.18);
  border-radius:16px;
  background:rgba(33,67,58,.48);
  text-align:left;
}
.auth-sso-probe .auth-sso-copy { gap:4px }
.auth-sso-probe small { color:#9dc2b8; font-size:10px }
.auth-sso-probe b { color:#e2f4ef; font-size:14px; font-weight:600 }
.auth-sso-spinner {
  width:30px;
  height:30px;
  margin:6px;
  border:2px solid rgba(151,224,207,.2);
  border-top-color:#55cbb1;
  border-radius:50%;
  animation:auth-sso-spin .8s linear infinite;
}
@keyframes auth-sso-spin { to { transform:rotate(360deg) } }
.auth-error {
  min-height:0;
  margin-top:16px;
  padding:10px 12px;
  border:1px solid rgba(222,104,88,.22);
  border-radius:11px;
  background:rgba(123,43,36,.18);
  color:#ed8d7e;
  text-align:left;
}
.auth-error:empty { display:none }
.logout {
  margin-top:28px;
  color:#91aaa2!important;
  text-decoration:none;
  font-size:12px!important;
}
.logout:hover { color:#d1eee7!important; background:rgba(255,255,255,.045)!important }
.auth-card-foot {
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(137,183,171,.13);
  color:#718b83;
  line-height:1.75;
}
@media (max-width:900px) {
  .auth-gate { background-color:#0b1110 }
  .auth-card { width:min(430px,calc(100% - 28px)); margin:14px }
}
@media (max-width:520px) {
  .auth-card { padding:31px 22px 25px; border-radius:22px }
  .auth-card-brand { margin-bottom:23px }
  .auth-card h1 { font-size:24px }
}
@media (prefers-reduced-motion:reduce) {
  .auth-sso-spinner { animation-duration:1.8s }
}