.watch-tools {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}
.watch-tool {
  position: absolute;
  top: 32px;
  width: 54px;
  height: 42px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: #090c0ab8;
  color: white;
  font-size: 19px;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
#history { left: 16px; border-radius: 0 23px 23px 0; padding-left: 9px; }
#settings { right: 16px; border-radius: 23px 0 0 23px; padding-right: 9px; }
.watch-tool:active { transform: scale(.94); }
.watch-copy { top: 46px; }
.watch.is-status .watch-copy { top: 64px; }
.watch.is-status #watch-subtitle {
  display: inline-block;
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  background: #050806de;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
}
.watch-time {
  left: 20%;
  width: 60%;
  padding: 2px 4px;
  border-radius: 4px;
  background: #050806c7;
  color: #fff;
}
.dot.online { background: #2e8b57; }
.dot.pending { background: #d18b23; }
.dot.offline { background: #b33b4f; }
.watch-panel {
  position: absolute;
  inset: 0;
  z-index: 7;
  padding: 58px 50px 34px;
  background: #080c09f2;
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.watch-panel button { pointer-events: auto; }
.watch-panel h2 { margin: 0 0 8px; font-size: 18px; }
.panel-back {
  position: absolute;
  z-index: 10;
  top: 28px;
  left: 25px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border-color: #ffffff4d;
  background: #17241dbd;
  color: #fff;
  font-size: 30px;
}
.watch-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; margin-bottom: 6px; }
.watch-theme-grid button { min-height: 25px; padding: 2px; border-color: #ffffff4d; background: #17241d; color: #fff; font-size: 10px; }
.watch-theme-grid button[aria-pressed=true] { background: #baf1cf; border-color: #baf1cf; color: #103d23; font-weight: 800; }
.watch-setting-row { display: flex; justify-content: space-between; border-top: 1px solid #ffffff33; padding: 4px; font-size: 12px; }
.watch-panel > p { margin: 4px 0 0; color: #b8c8bf; font-size: 9px; }
.watch-panel dl { display: grid; grid-template-columns: 68px 1fr; gap: 8px; margin: 12px 0; text-align: left; font-size: 11px; }
.watch-panel dt { color: #aebdb4; }
.watch-panel dd { margin: 0; font-weight: 750; overflow-wrap: anywhere; }
.watch.panel-open .watch-copy,
.watch.panel-open .watch-actions,
.watch.panel-open .watch-time,
.watch.panel-open .watch-tools { display: none; }
.watch.panel-history .edge-rings,
.watch.panel-history .edge-hit,
.watch.panel-history .edge-label,
.watch.panel-history .edge-output { display: none; }
.watch.panel-settings .edge-rings,
.watch.panel-settings .edge-label,
.watch.panel-settings .edge-output { z-index: 8; }
@keyframes copy-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes copy-cue {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.06); }
}
@keyframes status-enter {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes action-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.watch.is-alarm .watch-copy { animation: copy-enter 320ms ease-out both; }
.watch.is-alarm #watch-subtitle { animation: copy-enter 240ms 140ms ease-out both; }
.watch-copy.cue-pulse { animation: copy-cue 260ms ease-out; }
.watch.is-status #watch-subtitle { animation: status-enter 300ms ease-out both; }
.watch-actions .choice { animation: action-enter 260ms ease-out both; }
.watch-actions .choice:nth-child(2) { animation-delay: 70ms; }
.watch-actions .choice:nth-child(3) { animation-delay: 140ms; }
@media (prefers-reduced-motion: reduce) {
  .watch-copy,
  .watch-copy.cue-pulse,
  .watch.is-status #watch-subtitle,
  .watch-actions .choice { animation: none; }
  .edge-output { transition: none; }
}
.sync-help { margin:0 0 14px; color:#536a5c; font-size:13px; line-height:1.6; }
.qr-guide { display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; border:1px solid #c4d1c8; border-radius:6px; color:#243f2e; background:#fff; text-decoration:none; font-size:13px; }
#send-status { min-height:20px; margin:10px 0 0; color:#235a39; font-size:12px; }
.sync-card .section-title span { font-weight:750; color:#235a39; }
.schedule-fields { margin-top:-6px; grid-template-columns:1fr 1fr; }
.fortune-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px; border:1px solid #c4d1c8; border-radius:10px; background:#fff; }
.fortune-summary div { display:grid; gap:3px; }.fortune-summary span,.fortune-summary small { color:#63756a; font-size:12px; }.fortune-summary strong { font-size:17px; }.primary-link { display:inline-flex; align-items:center; min-height:44px; padding:9px 13px; border-radius:7px; background:#173e29; color:#fff; text-decoration:none; font-size:13px; font-weight:750; }
.fortune-setting { display:grid; gap:5px; margin:18px 2px 10px; }.fortune-setting span { color:#b8c8bf; font-size:10px; }.fortune-setting strong { font-size:15px; }.fortune-setting a { color:#baf1cf; font-size:11px; }
.mbti-mode { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }.mbti-mode button[aria-pressed=true] { border-color:#173e29; background:#173e29; color:#fff; }.mbti-fields { grid-template-columns:1fr 1fr; margin:0 0 14px; }.recommendation { display:grid; gap:5px; min-height:92px; padding:14px; border-radius:10px; background:#eaf3ed; }.recommendation span,.mbti-note { color:#536a5c; font-size:12px; }.recommendation strong { font-size:16px; line-height:1.55; }.mbti-note { margin:12px 0 0; }.controls .recommendation + .commands { margin-top:10px; }
.explain details { margin:0; padding:13px 0; border-top:1px solid #d9e2dc; }.explain details:first-of-type { border-top:0; }.explain summary { min-height:44px; display:flex; align-items:center; color:#213b2b; font-size:14px; font-weight:750; }.explain p { margin:2px 0 5px; color:#5b6d63; font-size:13px; line-height:1.7; }
:root { background:radial-gradient(circle at 50% 18%,#3d4d44 0,#222c27 46%,#151c18 100%); }
body { width:min(100%,430px); min-height:100vh; margin:0 auto; background:#f4f7f5; border-inline:1px solid #ffffff1f; box-shadow:0 0 52px #0008; }
main { max-width:100%; padding-inline:18px; }
@media(max-width:430px){:root{background:#f4f7f5}body{border-inline:0;box-shadow:none}main{padding-inline:16px}}
@media(max-width:440px){.fortune-summary{grid-template-columns:1fr}.primary-link{justify-content:center}.mbti-fields{grid-template-columns:1fr 1fr}}
dialog {
  width: min(310px, calc(100% - 32px));
  border: 1px solid #87988e;
  border-radius: 8px;
  padding: 18px;
  color: #17251f;
  background: #fff;
}
dialog::backdrop { background: #07100bb3; }
.dialog-title { display: flex; align-items: center; justify-content: space-between; }
.dialog-title .icon-button { font-size: 22px; border: 0; }
dialog dl {
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 10px 14px;
  margin: 20px 0 4px;
  font-size: 14px;
}
dialog dt { color: #63756a; }
dialog dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.controls.settings-focus { outline: 3px solid #2e7449; outline-offset: 5px; }