/* mark: two offset blocks, the device copy and the synced copy */
.mark {
  --sz: 30px;
  position: relative;
  display: inline-block;
  inline-size: var(--sz);
  block-size: var(--sz);
  border-radius: calc(var(--sz) * .3);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-border);
  flex: none;
}
.mark i { position: absolute; inline-size: calc(var(--sz) * .37); block-size: calc(var(--sz) * .37); border-radius: calc(var(--sz) * .1); }
.mark .b { top: calc(var(--sz) * .2); left: calc(var(--sz) * .2); background: var(--accent-soft); }
.mark .f { top: calc(var(--sz) * .37); left: calc(var(--sz) * .37); background: var(--accent); }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--sans);
  padding: 11px 16px;
  border-radius: 11px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-strong); }

.icon-btn {
  inline-size: 38px; block-size: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-secondary);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--ink); }

.dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
.cb { inline-size: 18px; block-size: 18px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; margin-top: 1px; }

.chip { font: 600 10px/1 var(--sans); padding: 4px 6px; border-radius: 6px; background: var(--surface-muted); color: var(--ink-muted); }
.chip.warn { background: var(--warn-tint); color: var(--warn-deep); }
.chip.danger { background: var(--danger-tint); color: var(--danger-deep); }
.chip.acc { background: var(--accent-tint); color: var(--accent-deep); }

.kbd { font: 500 11px/1 var(--mono); padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--ink-muted); background: var(--surface-sunken); }
.glyph {
  inline-size: 24px; block-size: 24px; border-radius: 7px;
  display: grid; place-items: center;
  font: 600 11px/1 var(--mono);
  background: var(--surface-muted);
  color: var(--ink-muted);
  flex: none;
}

.toast {
  position: fixed;
  left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  background: var(--ink); color: var(--page);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  max-width: calc(100% - 32px);
}