.device-tools{display:flex;align-items:center;gap:18px;font-size:13px}.pair-shell{max-width:1150px;min-height:70vh;margin:auto;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:65px;padding:45px 40px}.pair-copy h1{font-size:clamp(34px,4vw,62px);line-height:1.12;letter-spacing:-2px;margin:18px 0 25px}.pair-copy>p{font-size:18px;line-height:1.65;color:var(--ink-soft)}.verification-link{display:block;margin:25px 0 20px;color:var(--accent-dark);font-size:20px;font-weight:700;overflow-wrap:anywhere}.pair-code{font-size:clamp(36px,5vw,66px);font-weight:800;letter-spacing:7px;white-space:nowrap}.pair-qr{background:#fff;border:1px solid var(--line);padding:30px;border-radius:22px;text-align:center;box-shadow:var(--shadow)}.pair-qr img{width:100%;height:auto;max-width:280px;image-rendering:pixelated}.pair-qr p{color:var(--ink-soft);font-size:14px;line-height:1.7}.field-help{font-size:13px!important;color:var(--ink-soft);line-height:1.7}.device-message{max-width:1000px;margin:25px auto;padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:12px;line-height:1.6}.activation-shell{max-width:750px;margin:35px auto;padding:0 20px}.device-card{background:white;border:1px solid var(--line);border-radius:16px;padding:30px;margin-bottom:25px;box-shadow:0 5px 20px #10233b06}.device-card h1{font-size:30px;margin:14px 0 20px}.device-card p{color:var(--ink-soft);line-height:1.65}.device-card form{display:grid;gap:9px;margin-top:25px}.device-card label{font-size:13px;font-weight:650;margin-top:12px}.device-card input,.device-card select{width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit}.device-card form button{margin-top:18px}.registered-device{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}.registered-device p{font-size:12px;margin:8px 0}.activation-shell>.device-message{position:sticky;bottom:20px;box-shadow:var(--shadow)}@media(max-width:700px){.pair-shell{grid-template-columns:1fr;gap:25px;padding:25px}.pair-copy h1{font-size:34px;letter-spacing:-1px}.pair-qr{max-width:320px;margin:auto}.device-tools{gap:8px;font-size:11px;flex-wrap:wrap;justify-content:flex-end}.device-card{padding:22px}.registered-device{flex-direction:column;align-items:flex-start}.pair-code{font-size:36px;letter-spacing:4px}}

.device-home-links{display:grid;gap:16px;margin-top:28px;font-size:13px}.device-display .display-note{pointer-events:none}

.display-header-board {
  flex: 1;
  min-width: 0;
}

.display-header-board > * {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.display-header-board h1 {
  font-size: 14px;
  line-height: 15px;
}

.display-header-board p {
  color: #d8e4f2;
  font-size: 10px;
  line-height: 10px;
}

.display-note-form {
  max-width: 520px;
  margin: 16px 0;
}
.display-note-form label {
  display: block;
  margin: 0 0 6px;
}
.display-note-form textarea {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}
.display-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.registered-device .device-mode {
  max-width: 190px;
  font: inherit;
}
#fullscreen {
  touch-action: manipulation;
}
.device-display .can-move-notes .display-note {
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.device-display .can-move-notes .display-note:active {
  cursor: grabbing;
  z-index: 1;
}

.note-rotate-handle,
.note-completion {
  display: none;
}

.can-move-notes .note-rotate-handle,
.can-move-notes .note-completion {
  position: absolute;
  z-index: 2;
  top: .25rem;
  right: .25rem;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  font-size: .875rem;
  cursor: grab;
}

.can-move-notes .note-completion {
  top: calc(.25rem + 26px);
  cursor: pointer;
}

.note-completion[aria-pressed="true"] {
  color: white;
  background: #237047;
}

.photo-post .note-photo .display-note-photo {
  width: auto;
  max-height: 25vh;
}

.note-photo-open {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: zoom-in;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.note-photo-open img,
#display-preview-image {
  -webkit-touch-callout: none;
}

#display-photo-preview {
  position: fixed;
  inset: 0;
  width: 70vw;
  height: 70vh;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
}

#display-photo-preview::backdrop { background: rgb(0 0 0 / 72%); }
#display-preview-image { display: block; width: 100%; height: 100%; object-fit: contain; }
#close-display-preview {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.5rem;
  cursor: pointer;
}

#display-contribution {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  padding: 1rem;
  pointer-events: none;
}
.display-note-corner {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
}
#display-contribution .display-note-form,
.display-note-corner > * {
  pointer-events: auto;
}
#display-contribution .display-note-form {
  position: relative;
  width: min(520px, calc(100vw - 2rem));
  margin: 0;
  max-height: min(82dvh, 100%);
  overflow-y: auto;
}
#display-ink { margin: .5rem 0; }
#display-ink-pad {
  display: block;
  width: 100%;
  aspect-ratio: 960 / 460;
  max-height: 35dvh;
  border: 1px solid #b9c5d6;
  border-radius: 8px;
  background: #fff;
  touch-action: none;
  cursor: none;
}
#display-note-message {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #fff;
}

html:fullscreen:has(.device-display) {
  overflow: hidden;
}
:fullscreen .device-display {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
:fullscreen .device-display #forget {
  display: none;
}
.device-display:has(.registered-board:not([hidden])) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.device-display:has(.registered-board:not([hidden])) main,
.device-display .registered-board {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.device-display .registered-board {
  position: relative;
  padding: 1rem 0 0;
}
.device-display .display-canvas {
  flex: 1;
  min-height: 0;
  overflow: clip;
  isolation: isolate;
}
:fullscreen .device-display .display-note-form textarea {
  max-height: 24dvh;
  resize: none;
}