:root {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #e1ebe4; background: #070c09; color-scheme: dark; font-synthesis: none;
  --muted: #8aa393; --accent: #94d4aa; --line: #263c30;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; padding: 32px 0;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 15% 10%, #17382455 0, transparent 48%),
    radial-gradient(ellipse at 88% 90%, #17472c33 0, transparent 48%), #070c09;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible { outline: 2px solid #8dd9a5; outline-offset: 4px; }
[hidden] { display: none !important; }
.shell { position: relative; z-index: 1; width: min(100% - 40px, 550px); margin: 0 auto; }
.panel {
  background: linear-gradient(145deg, #09150e99, #08110da3); border: 1px solid #45644d80; border-radius: 24px; padding: 36px 38px;
  box-shadow: 0 24px 90px #0007, inset 0 1px 0 #b1ebc308; backdrop-filter: blur(8px);
}
.scene-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.scene-background.is-ready { opacity: 1; }
.scene-image, .scene-effects, .scene-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-image { object-fit: cover; object-position: center; }
.scene-shade { background: linear-gradient(90deg, #02090624, #02080548 45%, #02070512), linear-gradient(0deg, #02060460, transparent 45%, #02060424); }
.ambient-control { position: fixed; z-index: 2; right: max(18px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 7px; border: 1px solid #5a7d6266; background: #0b1913bd; color: #bbd7c4; backdrop-filter: blur(10px); border-radius: 24px; padding: 9px 14px; font-size: 11px; }
.ambient-control:hover { background: #173224e6; color: #e0f3e5; }
.ambient-control[aria-pressed="true"] { border-color: #79ad8999; }
@media (max-width: 480px) { .ambient-control { right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 8px 11px; } body { padding-bottom: 58px; } }
@media (prefers-reduced-motion: reduce) { .scene-background { transition: none; } }
h1 { font-size: 32px; line-height: 1.5; letter-spacing: -.8px; margin: 0 0 28px; font-weight: 700; }
.intro { font-size: 13px; line-height: 1.9; color: var(--muted); margin: 0 0 25px; }
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 10px; color: #b7c9bd; }
.password-wrap { display: flex; border: 1px solid #304b3a; border-radius: 11px; background: #070f0b; padding-right: 14px; }
.password-wrap:focus-within { border-color: #74ab87; box-shadow: 0 0 0 3px #6aa57b12; }
input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 15px; font-size: 14px; color: #e7f0e9; border-radius: 11px; }
input:focus { outline: none; }
input::placeholder { color: #637c6c; }
.text-button { border: 0; background: transparent; font-size: 12px; color: var(--accent); white-space: nowrap; padding: 8px 0; }
.text-button:hover { color: #c3f1d1; }
.primary { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #254c35; border: 1px solid #3b654a; border-radius: 11px; color: #e0f4e6; padding: 15px 18px; font-size: 14px; font-weight: 600; margin-top: 16px; transition: background .15s; }
.primary:hover { background: #315d42; }
.primary span { font-size: 18px; }
.message { min-height: 20px; font-size: 12px; line-height: 1.8; color: #acbdb1; margin: 14px 0 0; overflow-wrap: anywhere; }
.message:empty { min-height: 0; margin: 0; }
.topline { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: -8px 0 5px; }
.dashboard-title { font-size: 27px; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.live-dot { height: 7px; width: 7px; background: #79b890; border-radius: 50%; box-shadow: 0 0 12px #76c08f30; }
.sync { font-size: 11px; color: #9bbba4; background: #13271bcc; border: 1px solid #294332; padding: 10px 12px; border-radius: 8px; margin-bottom: 18px; }
.sync.warning { background: #2b2518; color: #c5b38e; border-color: #443c29; }
.cards { display: grid; gap: 14px; }
.card { border: 1px solid #294333; border-radius: 14px; padding: 19px 20px; background: linear-gradient(125deg, #14261a, #0f1a13); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #cfdfd3; }
.source-badge { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; margin-right: 8px; background: #254631; color: #9dd3ad; font-size: 12px; }
.source-badge.quark { background: #234239; color: #9acbb8; }
.ttl { font-size: 10px; font-weight: 400; color: #8aa08f; white-space: nowrap; }
.code-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 36px; font-weight: 600; letter-spacing: 5px; line-height: 1.2; color: #c7ebd2; }
.copy { background: #233e2c; color: #acd6b9; border: 1px solid #3a5a45; padding: 9px 13px; border-radius: 8px; font-size: 12px; flex-shrink: 0; }
.copy:hover { background: #2c4d36; }
.card-time { font-size: 10px; color: #7e9686; margin-top: 13px; }
.bottomline { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 21px; color: #8aa392; font-size: 10px; }
.empty { text-align: center; border: 1px dashed #304b3a; border-radius: 14px; padding: 26px 12px; }
.empty-icon { font-size: 38px; color: #739980; line-height: 1; }
.empty h2 { font-size: 15px; font-weight: 500; margin: 14px 0 9px; }
.empty p { font-size: 12px; color: #8ba493; line-height: 1.9; margin: 0; }
@media (max-width: 480px) {
  body { padding: 22px 0; } .shell { width: calc(100% - 28px); }
  .panel { padding: 28px 23px; border-radius: 19px; } h1 { font-size: 28px; }
  .code { font-size: 30px; letter-spacing: 4px; } .card { padding: 17px 16px; }
  .dashboard-title { font-size: 25px; }
}
.scene-background[data-scene="hearth"] .scene-image { object-position: 76% 50%; }
.scene-background[data-scene="bedroom"] .scene-image { object-position: 82% 50%; }
.scene-background[data-scene="conservatory"] .scene-image { object-position: 81% 50%; }
@media (max-width: 480px) { body { padding-bottom: 58px; } }