/* app.css */
/* Application styles: shared tokens, native controls, page layouts, dialogs, and responsive refinements. Rule order preserves the current compact layouts. */

:root {
  --bg: #f7f7f7;
  --paper: #fff;
  --ink: #2e3034;
  --muted: #676b70;
  --line: #e0e2e4;
  --accent: #3e4248;
  --accent-strong: #2c2f34;
  --accent-soft: #eef0f2;
  --shadow: 0 16px 50px #25252510;
  --font: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.6 var(--font);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  color: inherit;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #b7b7b7;
  outline-offset: 3px;
}

button svg,
svg.icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

button {
  border: 0;
  background: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  line-height: 1.4;
}

input,
textarea,
select {
  min-width: 0;
}

a {
  color: var(--accent);
}

[hidden] {
  display: none!important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app {
  min-height: 0;
}

/* Identity and shared controls. */

.brand-mark {
  width: 37px;
  height: 37px;
  color: var(--accent);
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  background: var(--c,var(--accent));
}

.main {
  min-width: 0;
  padding: 0 32px 25px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.top-actions {
  display: flex;
  align-items: center;
}

.save-status {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #919191;
  font-size: 10px;
  margin-right: 8px;
}

.save-status .dot {
  width: 5px;
  height: 5px;
  background: #a3a3a3;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #e3e3e3;
  background: #fff;
  border-radius: 7px;
  padding: 9px 13px;
  font-size: 12px;
  white-space: nowrap;
  transition: background .15s,transform .15s;
}

.btn:hover {
  background: #f4f4f4;
  border-color: #cdcdcd;
}

.btn:active {
  transform: translateY(1px);
}

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

.btn.primary:hover {
  background: var(--accent-strong);
}

.btn.ghost {
  border-color: transparent;
  background: transparent;
}

.btn.danger {
  color: #aa5b4e;
  background: #fff6f3;
  border-color: #f1dcd6;
}

.btn.small {
  padding: 6px 10px;
  font-size: 11px;
}

.btn svg {
  width: 15px;
  height: 15px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border-radius: 6px;
  color: #8c8c8c;
}

.icon-btn:hover {
  background: #f0f0f0;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 278px;
  gap: 19px;
  align-items: start;
}

.workspace {
  min-width: 0;
}

.graph-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 18px #40404003;
}

.search-wrap {
  position: relative;
  flex: 0 1 216px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fbfbfb;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  padding: 8px 10px;
}

.search svg {
  width: 14px;
  height: 14px;
  color: #a7a7a7;
}

.search input {
  background: none;
  border: 0;
  outline: none;
  width: 100%;
  font-size: 11px;
  color: #5f5f5f;
  padding: 0;
}

.search input::placeholder {
  color: #a7a7a7;
}

.search-key {
  color: #b7b7b7;
  font-size: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  padding: 0 4px;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  max-width: 75vw;
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px;
  box-shadow: var(--shadow);
  z-index: 12;
  max-height: 300px;
  overflow: auto;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  width: 100%;
  text-align: left;
  border-radius: 6px;
}

.search-result:hover {
  background: #f5f5f5;
}

.search-result strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.search-result small {
  font-size: 10px;
  color: var(--muted);
}

.mini-avatar {
  width: 29px;
  height: 29px;
  border-radius: 22%;
  background: var(--avbg,#f0f0f0);
  color: var(--avfg,#7e7e7e);
  display: inline-grid;
  place-items: center;
  flex: none;
  font-size: 11px;
}

.filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 14px 18px 10px;
}

.filter {
  font-size: 10px;
  color: #999999;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter .dot {
  width: 5px;
  height: 5px;
}

.filter:hover {
  background: #f8f8f8;
}

.filter.active {
  background: #f3f3f3;
  border-color: #eaeaea;
  color: #6c6c6c;
}

.graph-area {
  position: relative;
  height: 535px;
  background-image: radial-gradient(#e4e4e4 .75px,transparent .75px);
  background-size: 18px 18px;
  background-position: 7px 7px;
  overflow: hidden;
  touch-action: none;
}

.graph-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: grab;
}

.graph-svg:active {
  cursor: grabbing;
}

.graph-svg text {
  font-family: var(--font);
  pointer-events: none;
}

.edge-hit {
  stroke: transparent;
  stroke-width: 18;
  fill: none;
  cursor: pointer;
  pointer-events: stroke;
}

.edge-path {
  fill: none;
  stroke-width: 1.6;
  pointer-events: none;
}

.edge-label rect {
  stroke: none;
  fill: #fff;
  fill-opacity: 1;
}

.edge-label text {
  font-size: 11px;
  font-weight: 400;
  fill: var(--relation-color, #9c9c9c);
}

.graph-node {
  cursor: pointer;
  outline: none;
}

.graph-node .node-name {
  font-size: 12px;
  fill: #5b5b5b;
  font-weight: 500;
}

.graph-node .node-role {
  font-size: 9px;
  fill: #a6a6a6;
}

.graph-node .family-card {
  fill: #fff;
  stroke: #e6e6e6;
  stroke-width: 1;
}

.family-generation {
  font-size: 10px;
  fill: #b4b4b4;
  letter-spacing: 1px;
}

.center-caption {
  position: absolute;
  top: 11px;
  left: 20px;
  color: #a9a9a9;
  font-size: 10px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.center-caption svg {
  width: 12px;
  height: 12px;
}

.view-actions {
  position: absolute;
  background: white;
  border: 1px solid #e7e7e7;
  border-radius: 7px;
  display: flex;
  padding: 3px;
  align-items: center;
  box-shadow: 0 3px 8px #5e5e5e09;
  gap: 2px;
}

.view-actions button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #888888;
}

.view-actions button:hover {
  background: #f2f2f2;
}

.view-actions button svg {
  width: 14px;
  height: 14px;
}

.zoom-value {
  font-size: 10px;
  color: #929292;
  min-width: 35px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.control-separator {
  height: 15px;
  width: 1px;
  background: #eaeaea;
  margin: 0 3px;
}

.graph-footer {
  border-top: 1px solid #f0f0f0;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: #a0a0a0;
}

.graph-footer .status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b3b3b3;
  display: inline-block;
  margin-right: 6px;
}

.text-action {
  font-size: 10px;
  color: #848484;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}

.text-action svg {
  width: 12px;
  height: 12px;
}

/* Person detail content. */

.detail-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}

.detail-heading {
  padding: 17px 19px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #949494;
}

.detail-hero {
  text-align: center;
  padding: 6px 20px 21px;
}

.profile-avatar {
  position: relative;
  width: 68px;
  height: 68px;
  margin: 0 auto 11px;
  background: var(--avbg,#ebebeb);
  color: var(--avfg,#747474);
  border-radius: 22%;
  display: grid;
  place-items: center;
  font-size: 28px;
  border: 5px solid #f8f8f8;
}

.profile-avatar .self-indicator {
  position: absolute;
  bottom: -1px;
  right: -3px;
  background: var(--accent);
  color: #fff;
  border: 3px solid #fff;
  font-size: 9px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.profile-name {
  font-size: 20px;
  font-weight: 550;
  letter-spacing: 2px;
}

.profile-original-name {
  font-size: 12px;
  color: #949494;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.profile-bio {
  font-size: 10px;
  color: #9f9f9f;
  margin-top: 5px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 13px;
}

.tag {
  font-size: 9px;
  background: #f5f5f5;
  color: #636363;
  padding: 3px 7px;
  border-radius: 4px;
}

.profile-actions {
  display: flex;
  gap: 8px;
  margin-top: 19px;
}

.profile-actions .btn {
  flex: 1;
  font-size: 10px;
  padding: 8px 7px;
}

.profile-actions .btn svg {
  width: 13px;
  height: 13px;
}

.detail-section {
  padding: 17px 19px;
  border-top: 1px solid #f0f0f0;
}

.section-heading {
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
  color: #797979;
}

.section-heading span {
  font-size: 10px;
  color: #adadad;
  font-weight: 400;
}

.info-row {
  display: flex;
  gap: 10px;
  font-size: 10px;
  margin: 10px 0;
  align-items: flex-start;
}

.info-row svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: #a9a9a9;
  margin-top: 1px;
}

.info-row .info-label {
  color: #a7a7a7;
  min-width: 36px;
}

.info-row .info-value {
  color: #7d7d7d;
  overflow-wrap: anywhere;
}

.relation-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.relation-item {
  display: flex;
  gap: 9px;
  width: 100%;
  align-items: center;
  text-align: left;
  padding: 0;
}

.relation-item:hover strong {
  color: var(--accent-strong);
}

.relation-item .mini-avatar {
  width: 30px;
  height: 30px;
}

.relation-item .relation-person {
  flex: 1;
  min-width: 0;
}

.relation-person strong {
  font-size: 11px;
  font-weight: 450;
  display: block;
}

.relation-person small {
  font-size: 9px;
  color: #a7a7a7;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.relation-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--badge-bg,#f5f2ec);
  color: var(--badge-fg,#a88d6e);
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-more {
  width: 100%;
  font-size: 10px;
  color: #9e9e9e;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.detail-more svg {
  width: 12px;
  height: 12px;
}

.profile-note {
  font-size: 10px;
  color: #a7a7a7;
  line-height: 1.9;
}

.shared-row {
  font-size: 10px;
  color: #929292;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.shared-row button {
  font-size: 9px;
  color: var(--accent);
  padding: 3px 5px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  flex: none;
}

.shared-row small {
  display: block;
  color: #b1b1b1;
  font-size: 9px;
}

.detail-close {
  display: none;
}

/* Directory cards and relationship type lists. */

.directory-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  margin-bottom: 14px;
}

.directory-toolbar .search {
  max-width: 330px;
  flex: 1;
  padding: 9px 12px;
}

.directory-toolbar .search input {
  font-size: 12px;
}

.directory-count {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
  font-size: 10px;
  color: #999999;
}

.directory-count>span {
  white-space: nowrap;
}

.directory-count strong {
  font-size: 18px;
  font-weight: 450;
  color: #676767;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(215px,1fr));
  gap: 12px;
}

.person-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  text-align: left;
  width: 100%;
  transition: box-shadow .15s,border .15s;
}

.person-card:hover {
  border-color: #bebebe;
  box-shadow: 0 5px 22px #53535309;
}

.person-card-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
}

.person-card-head .mini-avatar {
  width: 35px;
  height: 35px;
  font-size: 15px;
}

.person-card-head h3 {
  font-size: 14px;
  font-weight: 500;
}

.person-card-head small {
  font-size: 10px;
  color: var(--muted);
}

.person-card-line {
  font-size: 11px;
  color: #979797;
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
}

.person-card-line svg {
  width: 12px;
  height: 12px;
}

.person-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #efefef;
  font-size: 10px;
  color: #a2a2a2;
}

.person-card-foot .tag {
  margin: 0;
}

.types-list {
  display: flex;
  flex-direction: column;
}

.type-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.type-symbol {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f5f5f5;
}

.type-symbol svg {
  width: 19px;
  height: 19px;
}

.type-name {
  flex: 1;
  min-width: 0;
}

.type-name strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}

.type-name small {
  font-size: 10px;
  color: #999999;
}

.type-meta {
  font-size: 10px;
  color: #a0a0a0;
}

.type-row .tag {
  color: #a2a2a2;
  background: #f4f4f4;
}

.empty-state {
  padding: 65px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #979797;
  grid-column: 1/-1;
}

.empty-state svg {
  width: 35px;
  height: 35px;
  margin-bottom: 12px;
}

.empty-state p {
  font-size: 12px;
  margin: 8px 0 18px;
}

/* Native dialogs and forms. */

dialog {
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 0;
  width: min(540px,calc(100vw - 30px));
  max-height: 90vh;
  box-shadow: 0 24px 100px #32323233;
  color: var(--ink);
  background: #fff;
  overflow: auto;
}

dialog::backdrop {
  background: #34343455;
  backdrop-filter: blur(3px);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 25px 16px;
}

.modal-head h2 {
  font-size: 19px;
  font-weight: 550;
  letter-spacing: .5px;
}

.modal-sub {
  padding: 0 25px 18px;
  font-size: 11px;
  color: #969696;
}

.form-body {
  padding: 0 25px 23px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: #828282;
}

.form-field.full {
  grid-column: 1/-1;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: #fbfbfb;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 10px 11px;
  color: #505050;
  outline: none;
  font-size: 12px;
  transition: border .15s;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: #a3a3a3;
}

.form-field textarea {
  resize: vertical;
  min-height: 72px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #b3b3b3;
}

.form-field small {
  font-size: 10px;
  color: #a9a9a9;
}

.required {
  color: #ad8e6e;
}

.form-divider {
  grid-column: 1/-1;
  border-top: 1px solid #eeeeee;
  padding-top: 17px;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #848484;
  font-size: 11px;
}

.custom-field-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 28px;
  gap: 7px;
  margin-top: 8px;
}

.custom-field-row input {
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  background: #fbfbfb;
  padding: 9px 10px;
  width: 100%;
  font-size: 11px;
}

.relation-preview {
  background: #f5f5f5;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 14px;
  font-size: 12px;
  color: #797979;
  line-height: 1.9;
}

.relation-preview small {
  display: block;
  color: #9e9e9e;
  font-size: 10px;
}

.form-error {
  font-size: 11px;
  color: #ac5f4c;
  background: #fff4ef;
  border-radius: 5px;
  padding: 9px 11px;
  margin-top: 14px;
}

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 16px 25px;
  border-top: 1px solid #efefef;
  background: #fcfcfc;
}

.modal-foot .push-left {
  margin-right: auto;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.color-option {
  display: flex;
}

.color-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.color-option span {
  display: block;
  width: 25px;
  height: 25px;
  background: var(--color);
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px transparent;
  cursor: pointer;
}

.color-option input:checked+span {
  box-shadow: 0 0 0 1.5px var(--color);
}

.color-option input:focus-visible+span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.relation-record {
  padding: 15px;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  margin-bottom: 12px;
}

.record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-top strong {
  font-size: 13px;
  font-weight: 500;
}

.relation-record p {
  font-size: 11px;
  color: #9b9b9b;
  margin-top: 7px;
}

.record-meta {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #a5a5a5;
}

.confirm-text {
  padding: 0 25px 25px;
  line-height: 1.9;
  font-size: 12px;
  color: #8b8b8b;
}

.toast {
  position: fixed;
  left: 50%;
  transform: translate(-50%,20px);
  opacity: 0;
  background: #4b4b4b;
  color: white;
  border-radius: 9px;
  box-shadow: var(--shadow);
  padding: 12px 19px;
  font-size: 12px;
  z-index: 1000;
  pointer-events: none;
  transition: opacity .2s,transform .2s;
  max-width: calc(100vw - 30px);
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%,0);
}

.detail-overlay {
  display: none;
}

@media(min-width:1600px) {

  .main {
    padding-left: 43px;
    padding-right: 43px;
  }

  .content-grid {
    grid-template-columns: minmax(0,1fr) 300px;
    gap: 24px;
  }

  .graph-area {
    height: 610px;
  }

  .detail-section {
    padding: 20px 22px;
  }

  .detail-hero {
    padding-bottom: 25px;
  }
}

@media(max-width:1200px) {

  .main {
    padding: 0 22px 20px;
  }

  .content-grid {
    grid-template-columns: minmax(0,1fr) 250px;
    gap: 14px;
  }

  .search-wrap {
    flex-basis: 175px;
  }

  .filters {
    padding: 12px 12px 8px;
    gap: 2px;
  }

  .filter {
    padding: 5px 7px;
  }

  .detail-section {
    padding: 15px;
  }

  .graph-area {
    height: 510px;
  }
}

@media(max-width:1020px) {

  .content-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .detail-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100dvh;
    width: 310px;
    z-index: 60;
    border-radius: 14px 0 0 14px;
    overflow: auto;
    transform: translateX(105%);
    transition: transform .2s;
    box-shadow: var(--shadow);
  }

  .detail-panel.open {
    transform: translateX(0);
  }

  .detail-close {
    display: inline-grid;
  }

  .detail-overlay.open {
    display: block;
    position: fixed;
    inset: 0;
    background: #2d2d2d40;
    z-index: 59;
  }

  .graph-area {
    height: 570px;
  }

  .save-status {
    display: none;
  }

  .search-wrap {
    flex-basis: 230px;
  }

  .filters {
    padding: 13px 18px 8px;
  }

  .filter {
    padding: 5px 10px;
  }
}

@media(max-width:650px) {

  .app {
    display: block;
  }

  .main {
    padding: 0 15px 15px;
  }

  .top-actions>.btn {
    font-size: 10px;
    padding: 8px 10px;
  }

  .top-actions .btn svg {
    width: 13px;
  }

  .search-wrap {
    flex: 1;
    min-width: 0;
  }

  .search {
    padding: 8px;
    gap: 5px;
  }

  .search input {
    font-size: 10px;
  }

  .search-key {
    display: none;
  }

  .search input::placeholder {
    font-size: 9px;
  }

  .filters {
    padding: 10px 10px 7px;
    gap: 2px;
  }

  .filter {
    padding: 4px 6px;
    font-size: 9px;
  }

  .filter .dot {
    width: 4px;
    height: 4px;
  }

  .graph-area {
    height: 520px;
  }

  .graph-footer {
    padding: 11px 12px;
    font-size: 9px;
  }

  .graph-footer .text-action {
    font-size: 9px;
  }

  .center-caption {
    left: 13px;
    font-size: 9px;
    top: 8px;
  }

  .view-actions {
    right: 12px;
    bottom: 12px;
  }

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

  .person-card {
    padding: 11px 10px;
  }

  .person-card-head {
    gap: 7px;
    margin-bottom: 8px;
  }

  .person-card-head .mini-avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .person-card-head h3 {
    font-size: 12px;
  }

  .person-card-head small {
    font-size: 9px;
  }

  .person-card-line {
    font-size: 9px;
    gap: 5px;
  }

  .person-card-foot {
    font-size: 9px;
    gap: 4px;
  }

  .person-card-foot .tag {
    font-size: 8px;
    padding: 2px 4px;
  }

  .person-card-head small {
    max-width: 90px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .type-name strong {
    font-size: 12px;
  }

  .type-name small {
    font-size: 9px;
  }

  .type-meta {
    font-size: 9px;
  }

  .type-row .tag {
    display: none;
  }

  .type-symbol {
    width: 30px;
    height: 30px;
  }

  .modal-head {
    padding: 20px 19px 14px;
  }

  .modal-sub {
    padding: 0 19px 16px;
  }

  .form-body {
    padding: 0 19px 20px;
  }

  .modal-foot {
    padding: 14px 19px;
  }

  .form-grid {
    gap: 14px 10px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px;
    padding: 9px;
  }

  .form-field {
    font-size: 11px;
  }

  .custom-field-row input {
    font-size: 16px;
  }

  .form-grid .form-divider {
    font-size: 11px;
  }

  .relation-preview {
    font-size: 11px;
  }

  .detail-panel {
    width: min(310px,92vw);
  }

  .confirm-text {
    padding: 0 19px 20px;
  }

  .toast {
    font-size: 11px;
    bottom: 20px;
  }
}

.search-key {
  white-space: nowrap;
  flex: none;
}

@media(min-width:1021px) {

  .detail-panel {
    max-height: 695px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #e3e3e3 transparent;
  }
}

@media(min-width:1600px) {

  .detail-panel {
    max-height: 770px;
  }
}

/* Settings navigation. */

.settings-entry {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 780px;
  padding: 23px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  text-align: left;
}

.settings-entry:hover {
  border-color: #c8c8c8;
  background: #fcfcfc;
}

.settings-entry .type-symbol {
  color: var(--accent);
  background: var(--accent-soft);
}

.settings-entry .type-name small {
  display: block;
  margin-top: 4px;
}

.settings-entry>.icon {
  width: 16px;
  height: 16px;
  color: #9e9e9e;
}

.settings-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8d8d8d;
  font-size: 11px;
  padding: 0;
  margin-bottom: 18px;
}

.settings-back svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

@media(max-width:650px) {

  .settings-entry {
    padding: 18px 14px;
    gap: 11px;
  }

  .settings-entry .type-meta {
    display: none;
  }
}

.top-heading {
  display: flex;
  align-items: center;
  min-width: 0;
}

.top-actions {
  flex: none;
}

@media(max-width:650px) {

  .top-heading {
    flex: 1;
  }

  .main {
    padding-bottom: 88px;
  }
}

.circles-entry {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: #d4d4d4;
}

.circles-entry:hover {
  background: #e8e8e8;
  border-color: #b6b6b6;
}

.relation-people-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr);
  align-items: end;
  gap: 10px;
  grid-column: 1/-1;
  min-width: 0;
}

.relation-people-row>.form-field {
  min-width: 0;
}

.relation-people-row select {
  height: 40px;
}

.relation-swap {
  width: 36px;
  height: 40px;
  padding: 0;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: #d4d4d4;
}

.relation-swap:hover {
  background: #e8e8e8;
  border-color: #b6b6b6;
}

.relation-swap svg {
  width: 18px;
  height: 18px;
}

@media(max-width:650px) {

  .relation-people-row {
    grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr);
    gap: 8px;
  }

  .relation-people-row select,
  .relation-swap {
    height: 44px;
  }

  .relation-swap {
    width: 40px;
  }
}

.type-group-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: #fbfbfb;
}

.type-group-actions .push-left {
  margin-right: auto;
}

.group-dialog {
  width: min(420px,calc(100vw - 30px));
}

.group-delete-summary {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

#deleteGroupNoTarget {
  margin: 12px 0 0;
}

.type-group-actions .btn:disabled {
  opacity: .5;
}

.type-search-empty {
  padding: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.direction-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  grid-column: 1/-1;
}

.direction-field legend {
  font-size: 11px;
  color: #828282;
  padding: 0;
  margin-bottom: 8px;
}

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

.direction-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.direction-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.direction-choice>span {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  padding: 12px 5px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fbfbfb;
  color: #898989;
}

.direction-choice input:checked+span {
  border-color: #9f9f9f;
  background: #f1f1f1;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px #9f9f9f;
}

.direction-choice input:focus-visible+span {
  outline: 3px solid #b7b7b7;
  outline-offset: 2px;
}

/* Graph footer and interaction states. */

.graph-footer-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 230px;
}

.graph-footer-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 8px;
  flex: none;
  margin-left: auto;
}

.main[data-page="graph"] .graph-footer {
  padding: 5px 10px;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 10px;
}

.graph-footer .text-action {
  min-height: 24px;
}

.graph-context-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 12px;
  min-width: 0;
  flex: 1;
}

.graph-footer .center-caption {
  position: static;
  inset: auto;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  line-height: 18px;
  flex-wrap: wrap;
  z-index: auto;
}

.graph-footer .hierarchy-hint {
  line-height: 18px;
}

.graph-focus-actions {
  margin-left: auto;
}

.main[data-page="graph"] #graphFilters {
  padding: 6px 12px 3px;
  gap: 3px;
}

.main[data-page="graph"] #graphFilters .filter {
  padding: 3px 7px;
}

.graph-footer .hierarchy-hint {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.graph-focus-actions,
.graph-footer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.graph-focus-actions .text-action,
.graph-footer-actions .text-action {
  white-space: nowrap;
  min-height: 28px;
}

.graph-focus-actions .text-action {
  min-height: 24px;
}

.graph-edge,
.graph-node,
.node-expand {
  opacity: 1;
}

.edge-label {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.edge-label.revealed {
  visibility: visible;
  opacity: 1;
}

.graph-edge.dimmed,
.graph-node.dimmed,
.node-expand.dimmed,
.edge-label.revealed.dimmed {
  opacity: .35;
}

.graph-edge.revealed .edge-path,
.graph-edge:focus-visible .edge-path {
  stroke-width: 2.2;
  opacity: 1;
}

.graph-node.selected .family-card {
  fill: #f7f7f7;
}

.graph-node.center .family-card {
  stroke: #afafaf;
}

.graph-node:focus-visible .family-card {
  stroke: #7d7d7d;
  stroke-width: 2.5;
}

.node-expand {
  cursor: pointer;
  outline: none;
}

.node-expand rect {
  fill: #f3f3f3;
  stroke: #c3c3c3;
  stroke-width: 1;
}

.node-expand text {
  font-size: 11px;
  fill: #696969;
}

.node-expand:hover rect,
.node-expand:focus-visible rect {
  fill: #e6e6e6;
  stroke: #7d7d7d;
  stroke-width: 2;
}

.graph-edge {
  outline: none;
}

@media(max-width:650px) {

  .main[data-page="graph"] .graph-footer {
    padding: 5px 10px;
  }

  .graph-footer-controls {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }

  .graph-footer-controls .graph-focus-actions {
    margin-left: 0;
  }

  .graph-context-copy {
    gap: 1px 10px;
  }

  .main[data-page="graph"] #graphFilters {
    padding: 6px 10px 3px;
  }

  .main[data-page="graph"] #graphFilters .filter {
    padding: 3px 6px;
  }

  .graph-footer .hierarchy-hint {
    font-size: 10px;
    line-height: 1.8;
  }

  .graph-focus-actions {
    gap: 10px;
  }

  .graph-focus-actions .text-action {
    font-size: 10px;
  }

  .graph-footer-actions {
    gap: 10px;
  }

  .graph-footer {
    flex-wrap: wrap;
  }

  .graph-footer-actions {
    margin-left: auto;
  }
}

.graph-footer .view-actions {
  position: static;
  inset: auto;
  z-index: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  flex: none;
  gap: 2px;
}

.graph-footer .graph-footer-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 8px;
  max-width: 100%;
}

.graph-footer .graph-focus-actions {
  gap: 8px;
  margin-left: 0;
}

.graph-footer-controls {
  max-width: 100%;
}

@media(min-width:768px) {

  .graph-footer-info {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 10px;
    flex: 1 1 auto;
  }

  .graph-footer-info .graph-context-copy {
    flex: 0 1 auto;
  }

  .graph-footer #graphSummary {
    white-space: nowrap;
  }
}

.compact-control-label,
.compact-action-icon {
  display: none;
}

@media(max-width:767px) {

  .main[data-page="graph"] .graph-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 7px 10px;
  }

  .graph-footer .graph-footer-info {
    flex: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .graph-footer .graph-context-copy {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .graph-footer .center-caption {
    display: block;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px;
    font-size: 10px;
  }

  .graph-footer .center-caption>.icon,
  .graph-footer #hierarchyHint,
  .graph-footer .graph-summary-scope,
  .graph-footer .status-dot {
    display: none;
  }

  .graph-footer #graphSummary {
    flex: none;
    white-space: nowrap;
    font-size: 10px;
    line-height: 20px;
  }

  .graph-footer .graph-footer-controls {
    width: 100%;
    max-width: none;
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .graph-footer .graph-focus-actions {
    flex: none;
    gap: 4px;
    margin: 0;
  }

  .graph-footer .graph-footer-actions {
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
  }

  .graph-footer-controls .control-label {
    display: none;
  }

  .graph-footer-controls .compact-control-label {
    display: inline;
    font-size: 10px;
  }

  .graph-footer .compact-action-icon {
    display: block;
    width: 15px;
    height: 15px;
  }

  .graph-footer .graph-focus-actions .text-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    width: 28px;
  }

  .graph-footer .graph-footer-actions>.text-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    min-width: 24px;
  }

  .graph-footer .view-actions {
    gap: 1px;
  }

  .graph-footer .view-actions button {
    width: 28px;
    height: 32px;
  }

  .graph-footer .zoom-value {
    min-width: 32px;
    font-size: 10px;
  }

  .graph-footer .control-separator {
    margin: 0 2px;
  }
}

@media(max-width:767px) {

  .graph-footer .graph-footer-controls {
    flex-wrap: wrap;
  }

  .graph-footer .graph-footer-actions {
    flex: 1 0 auto;
    flex-wrap: wrap;
  }
}

.direction-example {
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1.4;
}

.direction-choice strong {
  font-size: 11px;
  font-weight: 500;
}

.direction-preview {
  grid-column: 1/-1;
  padding: 13px 16px;
  background: #f5f5f5;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  color: #797979;
}

.direction-preview-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.direction-preview-line>span:not(.direction-arrow) {
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.direction-preview-line small {
  display: block;
  font-size: 10px;
  color: #9e9e9e;
}

.direction-preview-line strong {
  font-size: 13px;
  font-weight: 500;
}

.direction-arrow {
  font-size: 27px;
  line-height: 1.2;
}

.direction-preview p {
  font-size: 10px;
  color: #969696;
  text-align: center;
  margin-top: 8px;
}

.type-usage-note {
  font-size: 11px;
  color: #8c8467;
  background: #f8f5ed;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.type-direction-symbol {
  font-size: 25px;
  line-height: 1;
}

.relation-direction-line {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-bottom: 8px;
  color: #666666;
}

.relation-direction-line span {
  font-size: 22px;
}

.type-row .type-name small {
  overflow-wrap: anywhere;
}

@media(max-width:650px) {

  .direction-options {
    gap: 6px;
  }

  .direction-example {
    font-size: 17px;
  }

  .direction-choice>span {
    padding: 10px 3px;
  }

  .direction-choice strong {
    font-size: 10px;
  }

  .direction-preview-line {
    gap: 10px;
  }

  .type-row .type-meta {
    max-width: 54px;
    text-align: center;
  }
}

.directory-toolbar .search {
  min-width: 120px;
}

.directory-group {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 164px;
  min-width: 130px;
  color: #8f8f8f;
}

.directory-group select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 27px 9px 31px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fbfbfb;
  color: #7d7d7d;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
  text-overflow: ellipsis;
}

.directory-group>svg {
  position: absolute;
  left: 10px;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.directory-group>.group-chevron {
  left: auto;
  right: 9px;
  width: 11px;
  height: 11px;
  transform: rotate(90deg);
}

.directory-group.active select {
  background: var(--accent-soft);
  border-color: #d4d4d4;
  color: var(--accent);
}

.directory-group-value {
  display: none;
}

.directory-count {
  margin-left: auto;
}

.empty-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

@media(max-width:650px) {

  .directory-toolbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) 148px;
  }

  .directory-toolbar .search {
    min-width: 0;
    max-width: none;
  }

  .directory-group {
    min-width: 0;
  }

  .directory-count {
    grid-column: 1/-1;
    justify-content: flex-end;
  }

  .directory-group select {
    font-size: 10px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

@media(max-width:650px) {

  .directory-toolbar {
    gap: 10px;
    padding-top: 12px;
    margin-bottom: 12px;
  }

  .directory-toolbar .search {
    padding: 9px;
  }

  .directory-count {
    gap: 10px;
    font-size: 9px;
  }

  .directory-count strong {
    font-size: 14px;
    margin-right: 2px;
  }
}

html,
body {
  height: 100%;
  overflow: hidden;
}

/* Avoid a stacking context here: the mobile drawer must stay above its full-screen backdrop. */

.app {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #d2d2d2 transparent;
}

.main {
  padding-bottom: 20px;
}

@media(prefers-reduced-motion:reduce) {

  * {
    transition: none!important;
    scroll-behavior: auto!important;
  }
}

.type-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  color: #929292;
  font-size: 10px;
}

.type-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #676767;
  font-weight: 500;
}

.type-group-heading svg {
  width: 15px;
  height: 15px;
}

.type-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.type-group-empty {
  border-radius: 9px;
  color: #979797;
  font-size: 12px;
}

.type-row {
  padding: 13px 16px;
}

.type-symbol {
  flex: none;
}

.type-group .type-row .type-name {
  overflow-wrap: anywhere;
}

.type-group .type-row .tag {
  white-space: nowrap;
}

@media(max-width:650px) {

  .type-row {
    padding: 12px 10px;
    gap: 8px;
  }

  .type-row .type-meta {
    display: none;
  }

  .type-row .icon-btn {
    flex: none;
    width: 28px;
  }

  .type-group-heading {
    margin-top: 2px;
  }
}

.types-list {
  gap: 6px;
}

.type-group {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.type-group-heading {
  margin: 0;
  min-height: 44px;
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.type-group-heading::-webkit-details-marker {
  display: none;
}

.type-group-heading:hover {
  background: #f8f8f8;
}

.type-group-heading:focus-visible {
  outline: 3px solid #b7b7b7;
  outline-offset: -3px;
}

.type-group-title {
  font-size: 13px;
}

.type-group-summary-end {
  display: flex;
  align-items: center;
  gap: 12px;
}

.type-group-summary-end svg {
  width: 14px;
  height: 14px;
  transition: transform .15s;
}

.type-group[open]>.type-group-heading .type-group-summary-end svg {
  transform: rotate(90deg);
}

.type-group[open]>.type-group-heading {
  border-bottom: 1px solid var(--line);
}

.type-group-list {
  padding: 8px;
  background: #fbfbfb;
}

.type-group-empty {
  background: transparent;
  border: 0;
  padding: 14px;
}

.type-group-title svg {
  width: 17px;
  height: 17px;
}

#typesList .type-group-list {
  gap: 5px;
  padding: 6px 8px;
}

#typesList .type-row {
  min-height: 48px;
  padding: 7px 10px;
  gap: 9px;
}

#typesList .type-row .type-symbol {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

#typesList .type-row .type-symbol svg {
  width: 16px;
  height: 16px;
}

#typesList .type-row .type-name strong {
  line-height: 1.35;
}

#typesList .type-row .type-name small {
  display: block;
  line-height: 1.4;
}

#typesList .type-row .icon-btn {
  width: 30px;
  height: 30px;
  flex: none;
}

#typesList .type-group-actions {
  padding: 7px 10px;
  gap: 6px;
}

.subpage-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subpage-nav .settings-back {
  margin: 0;
}

.subpage-nav .btn {
  margin-left: auto;
}

.hierarchy-hint {
  padding: 0 20px 12px;
  font-size: 10px;
  color: #969696;
  line-height: 1.6;
}

/* Compact page headers share the same spacing across all views. */

.topbar {
  height: 54px;
  gap: 12px;
}

.top-heading {
  gap: 13px;
}

.top-actions {
  gap: 8px;
}

.top-actions>.btn,
.subpage-nav>.btn {
  height: 32px;
  padding: 6px 11px;
  font-size: 11px;
  gap: 5px;
}

.top-actions>.btn svg,
.subpage-nav>.btn svg {
  width: 14px;
  height: 14px;
}

#settingsView {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

.subpage-nav {
  min-height: 50px;
  padding: 7px 0;
  margin-bottom: 6px;
}

.subpage-nav .settings-back {
  min-height: 36px;
  padding: 7px 0;
  font-size: 11px;
}

.main[data-page="types"] .subpage-nav {
  gap: 10px;
  margin-bottom: 4px;
}

.main[data-page="types"] .subpage-nav .settings-back {
  flex: none;
  white-space: nowrap;
}

.main[data-page="types"] .subpage-nav>.btn {
  flex: none;
  margin-left: 0;
}

.type-header-search {
  flex: 0 1 240px;
  min-width: 0;
  margin-left: auto;
}

.search.app-search,
.main[data-page="people"] .directory-group select {
  min-width: 0;
  height: 32px;
  background: #f1f1f1;
  border-color: transparent;
  border-radius: 9px;
  transition: background .15s,border-color .15s,box-shadow .15s;
}

.search.app-search {
  padding: 6px 10px;
}

.search.app-search:hover,
.main[data-page="people"] .directory-group select:hover {
  border-color: #e1e1e1;
  background: #f4f4f4;
}

.search.app-search:focus-within,
.main[data-page="people"] .directory-group select:focus {
  background: #fff;
  border-color: #c3c3c3;
  box-shadow: 0 0 0 3px #c3c3c325;
  outline: none;
}

.search.app-search svg {
  flex: none;
  color: #979797;
}

.search.app-search input {
  min-width: 0;
  font-size: 11px;
}

.search.app-search input::placeholder {
  color: #9a9a9a;
}

.search.app-search .search-key {
  color: #979797;
  border-color: #e1e1e1;
  background: #ebebeb;
  border-radius: 4px;
  font-size: 9px;
}

#graphFilters {
  padding: 9px 12px 7px;
  gap: 4px;
}

#graphFilters .filter {
  padding: 4px 8px;
}

.hierarchy-hint {
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 8px;
}

@media(max-width:650px) {

  .topbar {
    height: 52px;
    gap: 8px;
  }

  .top-heading {
    gap: 8px;
  }

  .top-actions {
    gap: 6px;
  }

  .top-actions>.btn,
  .subpage-nav>.btn {
    height: 36px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .subpage-nav {
    min-height: 50px;
    padding: 7px 0;
    margin-bottom: 4px;
  }

  .main[data-page="types"] .subpage-nav {
    gap: 8px;
  }

  .type-header-search {
    flex-basis: 190px;
  }

  .search.app-search,
  .main[data-page="people"] .directory-group select {
    height: 36px;
  }

  .search.app-search {
    padding: 7px 8px;
    gap: 6px;
  }

  .search.app-search input {
    font-size: 10px;
  }

  #settingsView {
    padding-top: 10px;
  }

  #graphFilters {
    padding: 8px 10px 6px;
    gap: 3px;
  }

  #graphFilters .filter {
    padding: 4px 6px;
  }
}

/* Keep page navigation and contacts controls visible above the scrolling content. */

.main {
  --header-inset: 32px;
}

@media(min-width:1600px) {

  .main {
    --header-inset: 43px;
  }
}

@media(max-width:1200px) {

  .main {
    --header-inset: 22px;
  }
}

@media(max-width:650px) {

  .main {
    --header-inset: 15px;
  }
}

.topbar,
.subpage-nav {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--bg);
  border-bottom: 0;
}

.topbar::before,
.subpage-nav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--header-inset));
  right: calc(-1 * var(--header-inset));
  z-index: -1;
  background: var(--bg);
  box-shadow: 0 5px 16px #3333331a,0 1px 4px #3333330d;
  pointer-events: none;
}

.main[data-page="people"] .directory-toolbar {
  top: 54px;
  z-index: 24;
  background: var(--bg);
}

@media(max-width:650px) {

  .main[data-page="people"] .directory-toolbar {
    top: 52px;
  }
}

.subpage-nav .graph-header-search {
  flex: 0 1 240px;
  margin-left: auto;
  min-width: 0;
}

.graph-header-search .search-results {
  z-index: 40;
}

@media(max-width:650px) {

  .subpage-nav .graph-header-search {
    flex-basis: 190px;
  }

  .subpage-nav {
    gap: 10px;
  }

  .subpage-nav .settings-back {
    white-space: nowrap;
  }
}

.graph-scroll {
  position: absolute;
  inset: 0;
  overflow: scroll;
  overscroll-behavior: contain;
  scrollbar-width: auto;
  scrollbar-color: #b5b5b5 #f2f2f2;
}

.graph-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.graph-scroll::-webkit-scrollbar-track,
.graph-scroll::-webkit-scrollbar-corner {
  background: #f2f2f2;
}

.graph-scroll::-webkit-scrollbar-thumb {
  background: #b5b5b5;
  border: 3px solid #f2f2f2;
  border-radius: 8px;
}

.graph-scroll .graph-svg {
  max-width: none;
  max-height: none;
}

.center-caption {
  z-index: 2;
}

.view-actions {
  z-index: 3;
  right: 26px;
  bottom: 26px;
}

.main[data-page="graph"] {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  padding-inline: 0;
}

.main[data-page="graph"] .subpage-nav {
  flex: none;
  padding-inline: var(--header-inset);
}

.main[data-page="graph"] .subpage-nav::before {
  inset-inline: 0;
}

.main[data-page="graph"] #contentGrid {
  flex: 1;
  min-height: 0;
}

.main[data-page="graph"] .workspace,
.main[data-page="graph"] #graphView {
  height: 100%;
  min-height: 0;
}

.main[data-page="graph"] .graph-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}

.main[data-page="graph"] .graph-area {
  flex: 1;
  min-height: 0;
  height: auto;
}

.main[data-page="graph"] #graphFilters,
.main[data-page="graph"] .hierarchy-hint,
.main[data-page="graph"] .graph-footer {
  flex: none;
}

.main[data-page="graph"] .detail-panel {
  max-height: 100%;
}

/* Contacts scroll inside the list, below the fixed heading and filters. */

.app[data-page="people"] {
  overflow: hidden;
  scrollbar-gutter: auto;
}

.main[data-page="people"] {
  --directory-inset: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.main[data-page="people"] .topbar {
  flex: none;
  margin-inline: var(--directory-inset);
}

@media(min-width:1600px) {

  .main[data-page="people"] {
    --directory-inset: 43px;
  }
}

@media(max-width:1200px) {

  .main[data-page="people"] {
    --directory-inset: 22px;
  }
}

@media(max-width:650px) {

  .main[data-page="people"] {
    --directory-inset: 15px;
  }
}

.main[data-page="people"] #contentGrid {
  flex: 1;
  min-height: 0;
}

.main[data-page="people"] .workspace {
  height: 100%;
  min-height: 0;
}

.main[data-page="people"] #peopleView {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.main[data-page="people"] .directory-toolbar {
  position: static;
  flex: none;
  box-shadow: none;
}

.main[data-page="people"] #peopleGrid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 0;
  padding-bottom: 6px;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.main[data-page="people"] #peopleGrid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.main[data-page="people"] .detail-panel {
  max-height: 100%;
}

.main[data-page="people"] #peopleGrid[data-layout="list"] {
  display: block;
  background: #fff;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Virtualized contact rows and alphabet navigation. */

.person-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  text-align: left;
  background: #fff;
  transition: background .15s;
}

.person-row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 66px;
  right: 12px;
  border-bottom: 1px solid #f1f1f1;
}

.person-row:last-child::after {
  display: none;
}

.person-row:hover {
  background: #f7f7f7;
}

.person-row.selected {
  background: #f1f1f1;
}

.person-row:focus-visible {
  outline-offset: -3px;
}

.person-row>.mini-avatar {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.person-row-body {
  flex: 1;
  min-width: 0;
}

.person-row-name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
  min-width: 0;
}

.person-row-name strong {
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-row-name .tag {
  padding: 1px 5px;
  font-size: 9px;
}

.person-row-preview {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  color: #929292;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  max-width: 90px;
  flex: none;
}

.person-row-count {
  font-size: 10px;
  color: #9d9d9d;
  white-space: nowrap;
}

.person-row-meta .tag {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 6px;
}

.person-card.selected {
  border-color: #b6b6b6;
}

@media(max-width:650px) {

  .person-row-name strong {
    font-size: 13px;
  }

  .person-row-preview {
    font-size: 10px;
  }

  .person-row-meta {
    max-width: 64px;
  }

  .person-row-count {
    font-size: 9px;
  }

  .person-row-meta .tag {
    max-width: 64px;
    font-size: 8px;
  }
}

/* The transparent index floats at the list edge without reserving a column. */

.main[data-page="people"] #peopleView {
  position: relative;
  padding-right: 0;
}

.main[data-page="people"] #peopleGrid {
  display: block;
  scroll-padding-top: 34px;
}

.people-letter-section {
  margin: 0 0 10px;
  min-width: 0;
}

.people-letter-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin: 0 0 6px;
  padding: 2px 8px;
  background: var(--bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  line-height: 20px;
  border-bottom: 1px solid var(--line);
}

.people-letter-heading small {
  font-size: 10px;
  font-weight: 400;
  color: #a8a8a8;
}

.people-section-items {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(192px,1fr));
  gap: 8px;
}

@media(min-width:768px) {

  .person-card {
    padding: 9px 11px;
    border-radius: 8px;
  }

  .person-card-head {
    gap: 8px;
    margin-bottom: 6px;
  }

  .person-card-head .mini-avatar {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .person-card-head>div {
    min-width: 0;
  }

  .person-card-head h3 {
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .person-card-head small {
    display: block;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .person-card-head .tag {
    padding: 1px 5px;
    font-size: 8px;
  }

  .person-card-line {
    gap: 5px;
    line-height: 1.4;
    margin: 2px 0;
  }

  .person-card-line>span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .person-card-foot {
    gap: 6px;
    margin-top: 6px;
    padding-top: 5px;
    line-height: 1.4;
  }

  .person-card-foot>span:first-child {
    white-space: nowrap;
  }

  .person-card-foot .tag {
    max-width: 45%;
    padding: 1px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

#peopleGrid[data-layout="list"] .people-letter-section {
  margin: 0;
}

#peopleGrid[data-layout="list"] .people-letter-heading {
  margin: 0;
  padding: 2px 12px;
  height: 24px;
  line-height: 20px;
  background: #f3f3f3;
  border-bottom: 0;
  font-size: 11px;
}

#peopleGrid[data-layout="list"] .people-section-items {
  display: block;
}

.people-alphabet {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  height: min(560px,calc(100% - 16px));
  padding: 6px 3px;
  background: transparent;
  border: 0;
  user-select: none;
  touch-action: none;
  z-index: 4;
}

.alphabet-buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
}

.alphabet-buttons button {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 550;
  line-height: 1;
  color: #7e7e7e;
}

.alphabet-buttons button:hover:enabled {
  background: #e4e4e4;
  color: var(--accent-strong);
}

.alphabet-buttons button:disabled {
  color: #bbbbbb;
  opacity: .65;
  cursor: default;
}

.alphabet-buttons button.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 1px 4px #5d5d5d25;
}

.alphabet-buttons button:focus-visible {
  outline-offset: 0;
  outline-width: 2px;
}

.alphabet-track {
  display: none;
}

.alphabet-bubble {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: grid;
  place-items: center;
  width: 56px;
  height: 62px;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  box-shadow: 0 8px 24px #4f4f4f26;
  pointer-events: none;
}

@media(max-width:767px) {

  .people-alphabet {
    width: 22px;
    padding: 5px 2px;
  }

  .person-row-meta {
    margin-right: 10px;
  }

  .alphabet-buttons button {
    font-size: 9px;
  }

  .alphabet-bubble {
    right: 38px;
    width: 48px;
    height: 54px;
    font-size: 26px;
  }
}

.person-relations-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: #f7f7f7;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.person-relations-row strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.person-relations-row small {
  display: block;
  color: #959595;
  font-size: 10px;
  margin-top: 3px;
}

.person-relations-row .btn {
  flex: none;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.field-label-row .text-action {
  font-size: 11px;
}

.new-group-field {
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #f9f9f9;
}

/* Compact person editor keeps the standard form visible without scrolling. */

#personDialog {
  width: min(600px,calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}

#personDialog .modal-head {
  padding: 14px 20px 10px;
}

#personDialog .modal-head h2 {
  font-size: 18px;
}

#personDialog .form-body {
  padding: 0 20px 12px;
}

#personDialog .person-relations-row {
  padding: 8px 10px;
  margin-bottom: 12px;
  gap: 8px;
}

#personDialog .form-grid {
  gap: 10px 14px;
}

#personDialog .form-field {
  gap: 4px;
}

#personDialog .form-field input {
  padding: 7px 10px;
  min-height: 34px;
}

#personDialog .form-field textarea {
  padding: 7px 10px;
  min-height: 50px;
  height: 50px;
}

#personDialog .form-divider {
  padding-top: 9px;
  margin-top: 0;
}

#personDialog #attributeFields:empty {
  display: none;
}

#personDialog .custom-field-row {
  margin-top: 0;
}

#personDialog .custom-field-row+.custom-field-row {
  margin-top: 7px;
}

#personDialog .custom-field-row input {
  padding: 7px 9px;
}

#personDialog .modal-foot {
  padding: 10px 20px;
}

#personDialog .modal-foot .btn {
  padding: 8px 12px;
}

#detailPanel .info-row {
  align-items: center;
  min-height: 28px;
  padding: 2px 0;
}

#detailPanel .info-row>svg {
  margin-top: 0;
}

#detailPanel .info-row>.info-label {
  flex: 0 0 36px;
}

.info-row .phone-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.phone-value>span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.phone-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #f4f4f4;
  color: var(--accent);
  font-size: 10px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.phone-call:hover {
  background: #ececec;
  border-color: #c6c6c6;
}

.phone-call:disabled {
  background: #f5f5f5;
  color: #a9a9a9;
  border-color: #eaeaea;
}

.info-row .phone-call svg {
  width: 12px;
  height: 12px;
  color: currentColor;
  margin-top: 0;
}

#personRelationsDialog {
  width: min(590px,calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
}

#personRelationsDialog[open] {
  display: flex;
  flex-direction: column;
}

#personRelationsDialog .modal-head,
#personRelationsDialog .modal-foot {
  flex: none;
}

#personRelationsDialog .modal-head {
  padding: 17px 20px 12px;
}

#personRelationsDialog .form-body {
  padding: 0 20px 18px;
  overflow-y: auto;
  min-height: 0;
}

#personRelationsDialog .modal-foot {
  padding: 12px 20px;
}

.person-relations-summary {
  font-size: 11px;
  color: #959595;
  margin-bottom: 12px;
}

.managed-person {
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-top: 10px;
  overflow: hidden;
}

.managed-person-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9f9f9;
}

.managed-person-head>div {
  flex: 1;
  min-width: 0;
}

.managed-person-head strong {
  display: block;
  font-size: 12px;
  font-weight: 550;
  overflow-wrap: anywhere;
}

.managed-person-head small {
  display: block;
  font-size: 10px;
  color: #9e9e9e;
}

.managed-person-head>span:last-child {
  font-size: 10px;
  color: #9e9e9e;
  white-space: nowrap;
}

.managed-relation {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid #efefef;
}

.managed-relation-copy {
  flex: 1;
  min-width: 0;
}

.managed-relation-copy strong {
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.managed-relation-copy small {
  display: block;
  font-size: 10px;
  line-height: 1.7;
  color: #9a9a9a;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.managed-relation-copy .relation-time {
  font-size: 9px;
  color: #a9a9a9;
}

.managed-relation .icon-btn {
  flex: none;
}

.managed-relations-empty {
  padding: 35px 10px;
  text-align: center;
  color: #9d9d9d;
  font-size: 12px;
}

body.auth-screen .app,
body.auth-screen .detail-overlay {
  display: none!important;
}

/* Authentication and loading states. */

.auth-view {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  padding: 28px 18px;
  overflow-y: auto;
  background: radial-gradient(ellipse at 18% 15%,#efefef 0,transparent 44%),radial-gradient(ellipse at 90% 85%,#f0f0f0 0,transparent 40%),var(--bg);
}

.auth-shell {
  width: 410px;
  max-width: 100%;
  flex: none;
  margin: auto;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0 4px;
}

.auth-brand .brand-mark {
  width: 33px;
  height: 33px;
}

.auth-brand strong {
  font-size: 25px;
  letter-spacing: 3px;
  font-weight: 650;
}

.auth-brand>span {
  font-size: 11px;
  color: #9c9c9c;
  margin-left: auto;
}

.auth-card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 18px;
  padding: 24px 28px 26px;
  box-shadow: 0 12px 44px #46464610;
}

.auth-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
  margin-bottom: 9px;
}

.auth-demo-badge {
  margin-left: auto;
  background: #f2f2f2;
  color: #8c8c8c;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 5px;
}

.auth-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #888888;
  font-size: 11px;
  padding: 0;
}

.auth-back svg {
  width: 13px;
  height: 13px;
  transform: rotate(180deg);
}

#authTitle:focus {
  outline: none;
}

.auth-card h1 {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .5px;
}

.auth-intro {
  font-size: 12px;
  color: #9c9c9c;
  line-height: 1.7;
  margin: 5px 0 20px;
  overflow-wrap: anywhere;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #f4f4f4;
  border-radius: 9px;
  margin-bottom: 20px;
}

.auth-tabs button {
  padding: 8px;
  border-radius: 6px;
  color: #9b9b9b;
  font-size: 13px;
}

.auth-tabs button.active {
  background: #fff;
  color: var(--accent);
  font-weight: 550;
  box-shadow: 0 1px 5px #4141410a;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: #828282;
}

.auth-field input {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fcfcfc;
  color: #474747;
  font-size: 14px;
  outline: none;
  transition: border-color .15s,box-shadow .15s;
}

.auth-field input::placeholder {
  color: #b7b7b7;
}

.auth-field input:focus {
  border-color: #a3a3a3;
  box-shadow: 0 0 0 3px #ededed;
}

.auth-password {
  display: block;
  position: relative;
}

.auth-password input {
  padding-right: 44px;
}

.auth-eye {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  width: 39px;
  display: grid;
  place-items: center;
  color: #a6a6a6;
  border-radius: 6px;
}

.auth-eye:hover {
  color: var(--accent);
  background: #f3f3f3;
}

.auth-eye svg {
  width: 17px;
  height: 17px;
}

.auth-link {
  padding: 0;
  color: #777777;
  font-size: 11px;
  line-height: 1.6;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-form-links {
  display: flex;
  justify-content: flex-end;
  margin-top: -7px;
}

.auth-submit {
  width: 100%;
  min-height: 43px;
  margin-top: 1px;
  font-size: 14px;
  border-radius: 8px;
}

.auth-form-note {
  color: #a0a0a0;
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
}

.auth-recovery-note {
  text-align: left;
  margin-top: -1px;
}

.auth-feedback {
  background: #f4f4f4;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #777777;
  line-height: 1.8;
}

.auth-feedback.error {
  background: #fff5f0;
  border-color: #f0ded4;
  color: #ac6550;
}

.auth-local-note {
  display: flex;
  gap: 7px;
  justify-content: center;
  align-items: flex-start;
  font-size: 10px;
  line-height: 1.8;
  color: #a2a2a2;
  margin: 17px 0 0;
  padding: 0 5px;
}

.auth-local-note svg {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  flex: none;
}

.settings-auth-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 780px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  margin-bottom: 14px;
}

.settings-auth-panel>.type-symbol {
  width: 36px;
  height: 36px;
}

.settings-auth-panel .account-session-copy {
  flex: 1;
  min-width: 0;
}

.account-session-copy strong {
  font-size: 12px;
  font-weight: 550;
  display: block;
}

.account-session-copy small {
  display: block;
  font-size: 10px;
  color: #9f9f9f;
  overflow-wrap: anywhere;
  margin-top: 3px;
}

.settings-auth-panel .btn {
  flex: none;
}

@media(max-width:480px) {

  .auth-view {
    padding: 22px 16px;
  }

  .auth-shell {
    width: 380px;
  }

  .auth-card {
    padding: 20px;
    border-radius: 14px;
  }

  .auth-brand {
    margin-bottom: 18px;
  }

  .auth-brand strong {
    font-size: 24px;
  }

  .auth-field input {
    font-size: 16px;
  }

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

  .settings-auth-panel {
    padding: 14px;
    gap: 10px;
  }
}

.header-profile {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 22%;
  background: transparent;
}

.header-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 22%;
  background: var(--avbg,#ebebeb);
  color: var(--avfg,#747474);
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  box-shadow: 0 0 0 2px #fff,0 0 0 3px #e2e2e2;
}

.header-profile:focus-visible {
  outline: 2px solid #aeaeae;
  outline-offset: 3px;
}

.app {
  height: 100%;
  scrollbar-gutter: auto;
}

.toast {
  bottom: calc(12px + env(safe-area-inset-bottom,0px));
}

#contactsTab svg {
  transform: rotate(180deg);
}

.header-menu-control {
  position: relative;
  flex: none;
  z-index: 40;
}

.header-menu-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f1f1f1;
  color: #707070;
}

.header-menu-toggle:hover,
.header-menu-toggle[aria-expanded="true"] {
  background: #e9e9e9;
  color: #5b5b5b;
}

.header-menu-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.directory-content-entry {
  flex: none;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: #f1f1f1;
  color: var(--accent);
  font-size: 11px;
  white-space: nowrap;
}

.directory-content-entry:hover {
  background: #e9e9e9;
}

.directory-content-entry:focus-visible {
  outline: 2px solid #aeaeae;
  outline-offset: 2px;
}

@media(max-width:420px) {

  .directory-content-entry {
    padding-inline: 6px;
    font-size: 10px;
  }
}

.header-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  width: 154px;
  max-width: calc(100vw - 24px);
  padding: 5px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 11px;
  box-shadow: 0 9px 30px #3a3a3a20,0 2px 6px #3a3a3a0a;
}

.header-menu>[role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 7px;
  text-align: left;
  color: #636363;
  font-size: 13px;
}

.header-menu>[role="menuitem"]:hover,
.header-menu>[role="menuitem"]:focus-visible {
  background: #f2f2f2;
}

.header-menu>[role="menuitem"] svg {
  width: 17px;
  height: 17px;
}

#batchBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #f3f3f3;
  flex: none;
}

#batchBar[hidden] {
  display: none;
}

#peopleView:has(#batchBar:not([hidden])) {
  padding-top: var(--batch-toolbar-height,52px);
}

#batchBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

.batch-mark {
  display: none;
}

.batch-mode .batch-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid #b4b4b4;
  border-radius: 50%;
  color: transparent;
  margin-right: 8px;
}

.batch-mode [aria-pressed="true"] .batch-mark {
  color: white;
  background: #5b5b5b;
}

.batch-mode .person-card .batch-mark {
  position: absolute;
  right: 10px;
  top: 10px;
}

.batch-mode .person-card {
  position: relative;
}

.batch-mode [aria-pressed="true"] {
  outline: 2px solid #9a9a9a;
  outline-offset: -2px;
}

@media(max-width:600px) {

  #peopleView:has(#batchBar:not([hidden])) {
    padding-top: var(--batch-toolbar-height,94px);
  }

  #batchBar {
    gap: 6px;
  }

  #batchCount {
    width: 100%;
  }
}

/* Account loading progress. */

#accountLoading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #f7f7f7;
  padding: 24px;
}

/* Initial data can be browsed while the remaining response pages arrive. */
.directory-loading-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: #f7f7f8;
  color: var(--muted);
  font-size: 12px;
}
.directory-loading-status[hidden] { display: none; }
.directory-loading-copy { flex: 1; min-width: 0; }
.directory-loading-copy small { display: block; margin-top: 3px; font-size: 11px; }
.directory-loading-copy progress { display: block; width: 100%; max-width: 260px; height: 3px; margin-top: 6px; accent-color: #60646b; }
.directory-loading-copy progress[hidden] { display: none; }
.directory-loading-status .text-action { flex: none; font-size: 12px; }
.directory-loading:not(.directory-profile-open) #contentGrid { grid-template-columns: minmax(0,1fr) !important; }
.graph-profile-closed #contentGrid { grid-template-columns: minmax(0,1fr) !important; }
.directory-loading #detailPanel .detail-close { display: inline-grid; }
.directory-count-loading { color: var(--muted); font-size: 11px; }
@media(max-width:480px) {
  .directory-loading-status { gap: 8px; padding: 8px 12px; }
  .directory-loading-copy small { font-size: 10px; }
}

#accountLoading[hidden] {
  display: none;
}

.account-loading-card {
  text-align: center;
  max-width: 360px;
  width: 100%;
}

.account-loading-card h2 {
  font-size: 21px;
  margin: 24px 0 10px;
}

.account-loading-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.account-spinner {
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 3px solid #e5e5e5;
  border-top-color: #5f5f5f;
  border-radius: 50%;
  animation: account-spin .85s linear infinite;
}

#accountLoading:has(#accountLoadingRetry:not([hidden])) .account-spinner {
  animation: none;
  border-color: #cbcbcb;
}

@keyframes account-spin {

  to {
    transform: rotate(360deg);
  }
}

@media(prefers-reduced-motion:reduce) {

  .account-spinner {
    animation-duration: 2.5s;
  }
}

.account-progress {
  height: 7px;
  border-radius: 8px;
  overflow: hidden;
  background: #e8e8e8;
  margin: 0 auto 10px;
  position: relative;
}

.account-progress progress {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  appearance: none;
  background: transparent;
}

.account-progress progress::-webkit-progress-bar {
  background: transparent;
}

.account-progress progress::-webkit-progress-value {
  background: #707070;
  border-radius: 8px;
  transition: width .25s;
}

.account-progress progress::-moz-progress-bar {
  background: #707070;
  border-radius: 8px;
}

.account-progress.waiting:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent,#ffffff80,transparent);
  transform: translateX(-100%);
  animation: account-transfer 1.6s linear infinite;
  pointer-events: none;
}

#accountLoadingStage {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 20px;
}

@keyframes account-transfer {

  to {
    transform: translateX(100%);
  }
}

@media(prefers-reduced-motion:reduce) {

  .account-progress.waiting:after {
    animation: none;
  }
}

/* Keep settings cards compact while preserving readable labels and tap targets. */

#settingsView {
  padding-top: 8px;
}

#settingsView .offline-bar {
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

#settingsView .offline-bar-actions {
  margin-left: auto;
}

#settingsView .settings-entry {
  padding: 12px 16px;
}

#settingsView .settings-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

#settingsView .settings-list .settings-entry {
  min-height: 62px;
  gap: 12px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  transition: background-color 140ms ease-out;
}

#settingsView .settings-list .settings-entry:first-child {
  border-radius: 11px 11px 0 0;
}

#settingsView .settings-list .settings-entry:last-child {
  border-bottom: 0;
  border-radius: 0 0 11px 11px;
}

#settingsView .settings-list .settings-entry:focus-visible {
  outline-offset: -3px;
}

#settingsView .settings-list .settings-entry:active {
  background: var(--accent-soft);
}

@media(hover:hover) and (pointer:fine) {
  #settingsView .settings-list .settings-entry:hover {
    background: #f6f6f6;
  }
}

#settingsView .settings-entry .type-name small {
  margin-top: 2px;
  line-height: 1.45;
}

#settingsView .settings-auth-panel {
  padding: 12px 16px;
  margin-top: 12px;
  margin-bottom: 0;
}

.person-card-head h3 {
  flex-wrap: wrap;
}

.account-id-copy {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--accent);
  font-size: 10px;
  line-height: 1.6;
  vertical-align: baseline;
  white-space: nowrap;
}

#settingsView .account-session-copy small {
  margin-top: 2px;
  line-height: 1.45;
}

@media(max-width:650px) {

  #settingsView .settings-entry,
  #settingsView .settings-auth-panel {
    padding: 10px 14px;
  }
}

#graphOverview {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

#graphScroll {
  z-index: 1;
}

.search-result-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-result-row .search-result {
  flex: 1;
  min-width: 0;
  width: auto;
}

.search-result-row .search-result>span {
  min-width: 0;
}

.search-result-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-locate {
  flex: none;
  padding: 8px 6px;
  border-radius: 5px;
  font-size: 10px;
  color: var(--accent);
}

.search-locate:hover {
  background: #f1f1f1;
}

.graph-inspection {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #f4f4f4;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: #686868;
}

.graph-inspection>span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.graph-inspection>button {
  flex: none;
  white-space: nowrap;
}

.graph-node.on-relation-path .family-card {
  stroke: #5f5f5f;
  stroke-width: 2.5;
  fill: #f4f4f4;
}

.graph-edge.on-relation-path .edge-path {
  stroke-width: 3;
}

.graph-node.focus-neighbor .family-card {
  stroke: var(--neighbor-relation-color);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.graph-node.focus-neighbor:focus-visible .family-card {
  stroke-width: 2.5;
}

.graph-node.selected .family-card {
  stroke: var(--selected-relation-color, #e6e6e6);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.graph-node.selected.center .family-card {
  stroke: var(--selected-relation-color, #afafaf);
}

.graph-node.selected:focus-visible .family-card {
  stroke-width: 4.5;
}

.graph-edge.focus-connection .edge-path {
  stroke-width: 2.8;
}


.graph-edge.focus-connection.on-relation-path .edge-path {
  stroke-width: 3;
}

.edge-label.focus-label text {
  font-weight: 600;
}


.graph-junction {
  pointer-events: none;
}

.edge-label rect {
  pointer-events: all;
  cursor: pointer;
}

.edge-label .edge-label-hit {
  fill: transparent;
}

.edge-label text {
  pointer-events: none;
}

.graph-svg.is-rearranging {
  cursor: move;
}

.graph-svg.is-rearranging .graph-node:not(.selected):not(.focus-neighbor) .family-card {
  stroke: #626262;
}

#graphPathDialog {
  width: min(660px,calc(100vw - 24px));
}

.path-query-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 14px;
}

.path-person-picker {
  position: relative;
}

.path-person-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 8;
  max-height: 250px;
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: var(--shadow);
  padding: 4px;
}

.path-person-results button {
  display: block;
  width: 100%;
  padding: 9px 8px;
  text-align: left;
  border-radius: 5px;
  font-size: 12px;
}

.path-person-results button:hover {
  background: #f1f1f1;
}

.path-person-results small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

#graphPathDetails {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

#graphPathDetailsSummary {
  font-size: 12px;
  color: #676767;
  margin-bottom: 10px;
}

.path-step {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.8;
}

.path-step button {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.path-step small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.path-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
  font-size: 11px;
}

@media(max-width:600px) {

  #graphPathDialog .form-grid {
    grid-template-columns: 1fr;
  }

  .graph-inspection {
    font-size: 10px;
    gap: 7px;
  }

  .graph-footer .graph-footer-actions {
    flex-wrap: wrap;
  }
}

.offline-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  background: #f1f1f1;
  border-bottom: 1px solid #e1e1e1;
  color: #585858;
  font-size: 12px;
}

.offline-bar-copy {
  min-width: 0;
}

.offline-bar-copy strong {
  font-weight: 600;
  margin-right: 8px;
}

.offline-bar-actions {
  display: flex;
  gap: 7px;
  flex: none;
}

.offline-bar .btn {
  padding: 6px 10px;
  font-size: 12px;
}

.offline-bar[data-conflict="true"] {
  background: #fff5e7;
  color: #805c31;
  border-color: #eddfc6;
}

.offline-change {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.offline-change h3 {
  font-size: 15px;
}

.offline-change p {
  font-size: 12px;
  color: var(--muted);
  margin: 5px 0 10px;
}

.offline-change table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.offline-change th,
.offline-change td {
  text-align: left;
  padding: 7px 6px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  vertical-align: top;
}

.offline-change th:first-child {
  width: 20%;
}

.offline-change-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#offlineChangesDialog {
  width: min(760px,calc(100vw - 28px));
}

#offlineChangesError {
  color: #a45445;
  margin-bottom: 12px;
}

@media(max-width:560px) {

  .offline-bar {
    gap: 8px;
    padding: 8px 12px;
    align-items: flex-start;
  }

  .offline-bar-copy strong {
    display: block;
    margin-right: 0;
  }

  .offline-bar-actions {
    gap: 4px;
  }

  .offline-bar .btn {
    padding: 6px 8px;
    font-size: 11px;
  }

  .offline-change {
    padding: 10px;
  }
}

.offline-change-links {
  font-size: 12px;
  margin: 10px 0;
  color: var(--muted);
}

.offline-change-links summary {
  cursor: pointer;
  color: var(--accent);
  padding: 4px 0;
}

.offline-change-links>div {
  padding: 7px 0;
}

.offline-change-links ul {
  margin: 5px 0 0;
  padding-left: 20px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.friend-readonly-note {
  font-size: 12px;
  line-height: 1.7;
  padding: 10px 12px;
  margin: 0 0 14px;
  border-radius: 9px;
  background: #f1f1f1;
  color: #6d6d6d;
}

.friend-readonly-badge {
  font-size: 10px;
  color: #818181;
  align-self: flex-start;
}

.form-field [data-friend-readonly] {
  background: #f1f1f1;
  color: #707070;
  cursor: default;
}

#personDialog.is-add-contact[open] {
  display: flex;
  flex-direction: column;
  height: min(700px,calc(100dvh - 24px));
  overflow: hidden;
}

#personDialog.is-add-contact>.modal-head {
  flex: none;
}

#addContactTabs {
  display: flex;
  gap: 6px;
  padding: 6px 20px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

#addContactTabs>button {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#addContactTabs>button[aria-selected="true"] {
  background: #efefef;
  color: var(--accent);
  font-weight: 600;
}

#addContactTabs>button:focus-visible {
  outline: 2px solid #b7b7b7;
  outline-offset: 1px;
}

#addContactTabs>button:disabled {
  opacity: .5;
  cursor: default;
}

#personDialog.is-add-contact #personForm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#personDialog.is-add-contact #personForm>.form-body {
  padding-top: 16px;
  flex: 1;
  overflow: auto;
  min-height: 0;
}

#personDialog.is-add-contact #personForm>.modal-foot {
  flex: none;
}

#addFriendsPanel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#addAccountPanel {
  padding: 18px 20px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

#addAccountPanel .friends-toolbar {
  margin: 8px 0 0;
}

#addAccountPanel .friends-note {
  margin-top: 12px;
}

#addAccountPanel .friends-card {
  margin-top: 14px;
}

@media(max-width:380px) {

  #addContactTabs {
    padding-inline: 14px;
    gap: 2px;
  }

  #addContactTabs>button {
    padding-inline: 4px;
    font-size: 12px;
  }

  #addAccountPanel {
    padding-inline: 16px;
  }
}

/* A quiet profile sheet: one surface, clear typography and field-level privacy. */

#personDialog.is-self-profile {
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid #ffffff;
  border-radius: 22px;
  box-shadow: 0 32px 110px #32323233,0 4px 20px #32323210;
}

#personDialog.is-self-profile::backdrop {
  background: #35353559;
  backdrop-filter: blur(6px);
}

#personDialog.is-self-profile[open] {
  display: flex;
  flex-direction: column;
}

#personDialog.is-self-profile>.modal-head {
  flex: none;
}

#personDialog.is-self-profile .modal-head h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #393939;
}

#personDialog.is-self-profile .modal-head .icon-btn {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #f2f2f2;
  color: #8c8c8c;
}

#personDialog.is-self-profile #personForm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#personDialog.is-self-profile .form-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #dbdbdb transparent;
}

#selfProfileSummary {
  display: flex;
  align-items: center;
  border: 0;
}

.self-profile-avatar {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 22%;
  background: var(--avbg,#ebebeb);
  color: var(--avfg,#747474);
  font-weight: 500;
  border: 4px solid #ffffffdb;
}

.self-profile-summary-copy {
  flex: 1;
  min-width: 0;
}

.self-profile-summary-copy strong {
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .2px;
  color: #434343;
  overflow-wrap: anywhere;
}

.self-profile-summary-copy p {
  color: #949494;
  line-height: 1.7;
}

#selfProfileAvatarArea {
  flex: none;
  max-width: 45%;
}

#selfProfileAvatarArea:empty {
  display: none;
}

#selfProfileAvatarArea:not(:empty) {
  border-radius: 999px;
}

#selfProfilePermissionsStatus:empty {
  display: none;
}

.form-grid.self-profile-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0;
}

.self-profile-section {
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

.self-profile-section:last-child {
  border-bottom: 0;
  padding-bottom: 7px;
}

.self-profile-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
}

.self-profile-section-title svg {
  width: 25px;
  height: 25px;
  padding: 5px;
  border-radius: 7px;
  background: #f0f0f0;
  color: #8b8b8b;
  stroke-width: 1.6;
}

.self-profile-section-grid {
  display: grid;
  min-width: 0;
}

#personDialog.is-self-profile .form-field {
  min-width: 0;
}

#personDialog.is-self-profile .form-field input:not([type="checkbox"]),
#personDialog.is-self-profile .form-field select:not([data-self-friend-policy]),
#personDialog.is-self-profile .form-field textarea {
  min-width: 0;
  border: 1px solid #e7e7e7;
  line-height: 1.5;
  color: #4b4b4b;
  transition: background .18s,border-color .18s,box-shadow .18s;
}

#personDialog.is-self-profile .form-field input:not([type="checkbox"]):hover,
#personDialog.is-self-profile .form-field textarea:hover {
  border-color: #d3d3d3;
}

#personDialog.is-self-profile .form-field input:not([type="checkbox"]):focus,
#personDialog.is-self-profile .form-field textarea:focus {
  border-color: #a4a4a4;
  background: #fff;
  box-shadow: 0 0 0 3px #eeeeee;
}

#personDialog.is-self-profile .form-field input::placeholder,
#personDialog.is-self-profile .form-field textarea::placeholder {
  color: #b6b6b6;
  font-size: 12px;
}

#personDialog.is-self-profile .form-field textarea {
  min-height: 86px;
}

#personDialog.is-self-profile .form-field.full {
  grid-column: 1/-1;
}

#personDialog.is-self-profile .custom-field-row {
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) 32px;
}

#personDialog.is-self-profile .custom-field-row input {
  min-width: 0;
}

#personDialog.is-self-profile .form-divider {
  padding-top: 13px;
  margin: 0;
  border-top: 1px dashed #eaeaea;
  color: #969696;
  font-size: 11px;
}

#personDialog.is-self-profile .self-friend-permissions {
  gap: 5px 8px;
}

#personDialog.is-self-profile .self-friend-permissions label {
  min-height: 22px;
  gap: 5px;
}

#personDialog.is-self-profile .self-friend-permissions input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  width: 26px;
  height: 16px;
  min-height: 16px;
  border: 0;
  border-radius: 99px;
  background: #dcdcdc;
  padding: 0;
  margin: 0;
  cursor: pointer;
  vertical-align: middle;
  transition: background .18s;
  flex: none;
}

#personDialog.is-self-profile .self-friend-permissions input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #2f2f2f24;
  transition: transform .18s;
}

#personDialog.is-self-profile .self-friend-permissions input[type="checkbox"]:checked {
  background: #7a7a7a;
}

#personDialog.is-self-profile .self-friend-permissions input[type="checkbox"]:checked::after {
  transform: translateX(10px);
}

#personDialog.is-self-profile .self-friend-permissions input[type="checkbox"]:focus-visible {
  outline: 2px solid #9c9c9c;
  outline-offset: 3px;
}

#personDialog.is-self-profile .self-friend-permissions input[type="checkbox"]:disabled {
  cursor: default;
  opacity: .5;
}

#personDialog.is-self-profile .self-friend-permissions select {
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  background: #f4f4f4;
  color: #898989;
  height: 20px;
  min-height: 20px;
  line-height: 16px;
  font-size: 10px;
  padding: 0 3px;
}

#personDialog.is-self-profile .self-friend-permissions--lookup {
  padding-top: 1px;
  row-gap: 4px;
  font-size: 11px;
  color: #898989;
}

#personDialog.is-self-profile .self-friend-permissions small {
  font-size: 10px;
  line-height: 1.6;
}

#personDialog.is-self-profile [name="accountId"] {
  font-family: ui-monospace,SFMono-Regular,monospace;
  font-size: 12px;
  color: #909090;
  background: #f4f4f4;
  border-style: dashed;
}

#personDialog.is-self-profile #personError {
  flex: none;
  margin: 0;
  border-radius: 0;
  padding: 9px 28px;
  border-top: 1px solid #efdfd7;
}

#personDialog.is-self-profile .modal-foot {
  flex: none;
  padding: 14px 28px;
  gap: 10px;
}

#personDialog.is-self-profile .modal-foot>.btn {
  min-width: 96px;
  min-height: 40px;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
}

#personDialog.is-self-profile .modal-foot>.btn.primary {
  min-width: 132px;
  background: #626262;
  border-color: #626262;
  box-shadow: 0 4px 12px #52525214;
}

#personDialog.is-self-profile .modal-foot>.btn.primary:hover {
  background: #515151;
  border-color: #515151;
}

#personDialog.is-self-profile .modal-foot>.btn.ghost {
  color: #929292;
  background: transparent;
  border-color: transparent;
}

@media(max-width:520px) {

  #personDialog.is-self-profile {
    max-height: calc(100dvh - 16px);
    border-radius: 17px;
  }

  .is-self-profile .modal-head h2 {
    font-size: 18px;
  }

  #selfProfileSummary {
    grid-template-columns: 56px minmax(0,1fr);
    border-radius: 13px;
  }

  .self-profile-avatar {
    grid-row: 1/3;
  }

  .self-profile-summary-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .self-profile-avatar {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  #selfProfileAvatarArea {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .self-profile-section {
    padding: 18px 1px 21px;
  }

  .self-profile-section-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 15px;
  }

  .self-profile-section-title {
    margin-bottom: 13px;
  }

  #personDialog.is-self-profile .form-field input:not([type="checkbox"]),
  #personDialog.is-self-profile .form-field textarea {
    min-height: 43px;
  }

  #personDialog.is-self-profile [name="accountId"] {
    font-size: 12px;
  }

  #personDialog.is-self-profile .modal-foot {
    padding: 12px 18px;
  }

  .is-self-profile .modal-foot>.btn:not([hidden]) {
    flex: 1;
    min-width: 0!important;
  }

  #personDialog.is-self-profile #personError {
    padding-inline: 18px;
  }
}

/* Profile categories keep one small, orderly set of fields visible at a time. */

#personDialog.is-self-profile {
  width: min(680px,calc(100vw - 32px));
  height: min(780px,calc(100dvh - 32px));
  background: #fff;
}

#personDialog.is-self-profile>.modal-head {
  padding: 22px 26px 10px;
  border-bottom: 0;
  background: #fff;
}

#personDialog.is-self-profile .form-body {
  padding: 0 26px 22px;
  background: #fff;
}

#selfProfileSummary {
  padding: 17px 0 19px;
  margin: 0;
  background: none;
  gap: 14px;
  border-radius: 0;
}

.self-profile-avatar {
  width: 52px;
  height: 52px;
  font-size: 23px;
  border-width: 3px;
  box-shadow: 0 0 0 1px #e7e7e7;
}

.self-profile-summary-copy strong {
  font-size: 20px;
}

.self-profile-summary-copy p {
  font-size: 11px;
  margin: 3px 0 0;
}

#selfProfileAvatarArea:not(:empty) {
  padding: 5px 0;
  border: 0;
  background: transparent;
}

#selfProfileTabs {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 4px;
  padding: 5px;
  margin: 0 0 13px;
  background: #f3f3f3;
  border-radius: 11px;
}

#selfProfileTabs button {
  flex: 1;
  min-width: 0;
  padding: 10px 2px;
  border-radius: 8px;
  color: #8c8c8c;
  font-size: 12px;
  white-space: nowrap;
  line-height: 1.4;
}

#selfProfileTabs button[aria-selected="true"] {
  color: #525252;
  background: #fff;
  font-weight: 600;
  box-shadow: 0 2px 5px #4040400d;
}

#selfProfileTabs button:focus-visible {
  outline: 2px solid #a6a6a6;
  outline-offset: 1px;
}

#selfProfileTabs button:disabled {
  cursor: default;
  opacity: .6;
}

#personDialog.is-self-profile [data-profile-panel][hidden] {
  display: none;
}

#selfProfilePermissionsStatus .self-friend-permission-heading {
  margin: 0 0 6px;
}

#selfProfilePermissionsStatus .self-friend-permission-status {
  color: #929292;
  font-size: 11px;
  line-height: 1.65;
}

.self-profile-section {
  padding: 18px 0 21px;
  border: 0;
}

.self-profile-section-title {
  font-size: 12px;
  color: #8f8f8f;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 16px;
}

.self-profile-section-title svg {
  display: none;
}

[data-profile-panel]:not([data-profile-panel="more"]) .self-profile-section-title {
  display: none;
}

[data-profile-panel="more"] .self-profile-section+.self-profile-section {
  border-top: 1px solid #efefef;
}

.self-profile-section-grid {
  grid-template-columns: minmax(0,1fr);
  gap: 22px;
}

#personDialog.is-self-profile .form-field {
  font-size: 12px;
  color: #5d5d5d;
  gap: 8px;
}

#personDialog.is-self-profile .form-field input:not([type="checkbox"]),
#personDialog.is-self-profile .form-field select:not([data-self-friend-policy]),
#personDialog.is-self-profile .form-field textarea {
  background: #f9f9f9;
  border-color: #ececec;
  border-radius: 9px;
  min-height: 45px;
  padding: 11px 13px;
  font-size: 14px;
}

#personDialog.is-self-profile .self-friend-permissions {
  color: #8d8d8d;
  font-size: 11px;
}

#personDialog.is-self-profile .self-friend-permissions small {
  max-width: 100%;
  color: #a1a1a1;
}

#personDialog.is-self-profile .form-field>small,
#personDialog.is-self-profile .self-friend-input-label>small {
  color: #a1a1a1;
  font-size: 11px;
  line-height: 1.6;
}

#personDialog.is-self-profile .modal-foot {
  background: #fff;
  border-top: 1px solid #efefef;
  box-shadow: none;
}

@media(min-width:701px) {

  .self-profile-section-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 22px;
  }
}

@media(max-width:520px) {

  #personDialog.is-self-profile {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
  }

  #personDialog.is-self-profile>.modal-head {
    padding: 18px 18px 8px;
  }

  #personDialog.is-self-profile .form-body {
    padding: 0 18px 18px;
  }

  #selfProfileSummary {
    display: flex;
    padding: 15px 0 18px;
    gap: 12px;
  }

  .self-profile-summary-copy strong {
    font-size: 18px;
  }

  .self-profile-summary-copy p {
    font-size: 10px;
  }

  #selfProfileAvatarArea {
    max-width: 48%;
    margin: 0;
    padding: 0!important;
  }

  #selfProfileTabs {
    gap: 2px;
  }

  #selfProfileTabs button {
    font-size: 12px;
    padding: 10px 1px;
  }

  #personDialog.is-self-profile .form-field input:not([type="checkbox"]),
  #personDialog.is-self-profile .form-field textarea {
    font-size: 16px;
  }
}

#personDialog.is-self-profile .self-profile-section {
  padding-top: 12px;
}

#personDialog.is-self-profile .self-profile-section-grid {
  row-gap: 17px;
}

#selfProfileTabs {
  margin-bottom: 7px;
}

@media(prefers-reduced-motion:reduce) {

  #personDialog.is-self-profile .self-friend-permissions input[type="checkbox"],
  #personDialog.is-self-profile .self-friend-permissions input[type="checkbox"]::after {
    transition: none;
  }
}

#personDialog.is-lookup-only #addContactTabs {
  display: none;
}

/* Compact person detail drawer; retain accessible edit/close actions. */

@media(min-width:1021px) {

  #detailPanel {
    position: relative;
  }
}

#detailPanel .detail-heading {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 2;
  padding: 0;
  justify-content: flex-end;
}

#detailPanel .detail-heading>div {
  display: flex;
  gap: 4px;
}

#detailPanel .detail-hero {
  padding: 12px 16px 14px;
  display: grid;
  grid-template-columns: 68px minmax(0,1fr);
  gap: 12px 14px;
  align-items: center;
  text-align: left;
}

#detailPanel .profile-summary {
  min-width: 0;
  padding-top: 26px;
}

#detailPanel .profile-name {
  overflow-wrap: anywhere;
}

#detailPanel .profile-summary .tags {
  justify-content: flex-start;
}

#detailPanel .profile-avatar {
  width: 68px;
  height: 68px;
  font-size: 28px;
  margin: 26px 0 0;
  align-self: start;
}

#detailPanel .tags {
  margin-top: 8px;
}

#detailPanel .tags:empty {
  display: none;
}

#detailPanel .profile-actions {
  grid-column: 1/-1;
  margin-top: 0;
  gap: 8px;
}

#detailPanel .detail-section {
  padding: 13px 16px;
}

#detailPanel .section-heading {
  margin-bottom: 9px;
}

#detailPanel .detail-relations-heading {
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 8px;
}

#detailPanel .detail-relations-count {
  margin-left: auto;
}

#detailPanel .detail-add-relation {
  min-height: 32px;
  margin-left: auto;
  font: inherit;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--ink);
}

#detailPanel .detail-add-relation:active:not(:disabled) {
  background: #e1e3e6;
}

#detailPanel .info-row {
  margin: 8px 0;
}

#detailPanel .relation-list {
  gap: 10px;
}

#detailPanel .profile-relations-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

#detailPanel .profile-relations-status .profile-note {
  margin: 0;
}

#detailPanel .profile-relations-status .btn {
  flex-shrink: 0;
}

/* Plain avatar tiles without decorative rings. */

.mini-avatar,
.profile-avatar,
.header-avatar,
.self-profile-avatar {
  border: 0;
  box-shadow: none;
}

.header-profile:hover .header-avatar {
  box-shadow: none;
}

#settingsView a.settings-entry {
  color: inherit;
  text-decoration: none;
}

#settingsView a.settings-entry:active {
  filter: brightness(.94);
}

#androidAppInstalledVersion[hidden],
#androidAppUpdateStatus[hidden],
#androidAppDownloadHint[hidden] {
  display: none;
}

#downloadAndroidApp .type-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

#androidAppUpdateStatus[data-state="available"] {
  color: #30343a;
  font-weight: 600;
}

/* Compact directory row; narrow search expands on focus without moving the menu. */

.main[data-page="people"] .topbar {
  display: grid;
  grid-template-columns: 40px max-content minmax(0,1fr) 40px;
  align-items: center;
  height: auto;
  min-height: 56px;
  padding: 6px 0;
  gap: 8px;
  border: 0;
}

.main[data-page="people"] .topbar .top-heading,
.main[data-page="people"] .topbar .top-actions {
  display: contents;
}

.main[data-page="people"] .topbar .save-status {
  display: none;
}

.main[data-page="people"] .topbar .header-profile {
  grid-column: 1;
  grid-row: 1;
  width: 40px;
  height: 40px;
}

.main[data-page="people"] .topbar .directory-count {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 1px;
  margin: 0;
  padding: 0 2px 0 0;
  border: 0;
  font-size: 10px;
  line-height: 1.4;
}

.main[data-page="people"] .topbar .directory-count strong {
  font-size: 13px;
  font-weight: 600;
  margin-right: 3px;
  color: var(--ink);
}

.main[data-page="people"] .topbar .directory-toolbar {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.main[data-page="people"] .topbar .directory-group {
  flex: 0 1 136px;
  min-width: 100px;
  display: flex;
}

.main[data-page="people"] .topbar .directory-group select {
  height: 38px;
  padding: 7px 26px 7px 29px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  border-radius: 10px;
}

.main[data-page="people"] .topbar .directory-group.active select {
  color: var(--ink);
  font-weight: 550;
}

.main[data-page="people"] .topbar .directory-group-value {
  display: none;
}

.main[data-page="people"] .topbar .directory-toolbar .search {
  flex: 1 1 90px;
  min-width: 80px;
  max-width: none;
  height: 38px;
  padding: 6px 10px;
  gap: 6px;
  border-radius: 10px;
}

.main[data-page="people"] .topbar .directory-toolbar .search input {
  font-size: 11px;
  min-height: 24px;
}

.main[data-page="people"] .topbar .directory-toolbar .search input::placeholder {
  font-size: inherit;
}

.main[data-page="people"] .topbar .directory-content-compact {
  display: none;
}

.main[data-page="people"] .topbar .directory-content-entry {
  min-height: 38px;
  padding: 7px 8px;
  font-size: 11px;
  border-radius: 10px;
}

.main[data-page="people"] .topbar .directory-toolbar:has(.directory-content-entry:not([hidden])) .directory-group {
  flex-basis: 112px;
}

.main[data-page="people"] .topbar .header-menu-control {
  position: relative;
  grid-column: 4;
  grid-row: 1;
  inset: auto;
  justify-self: end;
}

.main[data-page="people"] .topbar .header-menu-toggle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
}

.main[data-page="people"] .topbar .header-menu-toggle:hover,
.main[data-page="people"] .topbar .header-menu-toggle[aria-expanded="true"] {
  background: #e9e9eb;
}

.main[data-page="people"] .topbar #retryServerData:not([hidden]) {
  grid-column: 2/4;
  grid-row: 2;
  justify-self: end;
  width: auto;
  min-height: 36px;
}

@media(max-width:619px) {

  .main[data-page="people"] .topbar {
    grid-template-columns: 40px minmax(0,max-content) minmax(64px,1fr) minmax(36px,1.3fr) 36px;
    min-height: 56px;
    gap: 4px;
    padding: 6px 0;
  }

  .main[data-page="people"] .topbar .directory-count {
    flex-direction: column;
    gap: 1px;
    padding: 0;
    font-size: 9px;
  }

  .main[data-page="people"] .topbar .directory-count>span {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .main[data-page="people"] .topbar .directory-count strong {
    font-size: 12px;
  }

  .main[data-page="people"] .topbar .header-menu-control {
    grid-column: 5;
  }

  .main[data-page="people"] .topbar .header-menu-toggle {
    width: 36px;
  }

  .main[data-page="people"] .topbar .directory-toolbar {
    display: contents;
  }

  .main[data-page="people"] .topbar .directory-group {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    width: 100%;
  }

  .main[data-page="people"] .topbar .directory-group select {
    padding-left: 22px;
    padding-right: 19px;
    font-size: 10px;
  }

  .main[data-page="people"] .topbar .directory-group>svg {
    left: 6px;
    width: 12px;
  }

  .main[data-page="people"] .topbar .directory-group>.group-chevron {
    left: auto;
    right: 5px;
    width: 10px;
  }

  .main[data-page="people"] .topbar .directory-toolbar .search {
    grid-column: 4;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    padding: 6px;
    gap: 4px;
    cursor: text;
  }

  .main[data-page="people"] .topbar .directory-toolbar .search svg {
    width: 14px;
    height: 14px;
  }

  .main[data-page="people"] .topbar .directory-toolbar .search input {
    width: 100%;
    min-width: 1px;
  }

  .main[data-page="people"] .topbar .directory-toolbar .search:focus-within {
    position: absolute;
    grid-column: 1/-1;
    z-index: 3;
    top: 1px;
    left: 0;
    right: 44px;
    width: auto;
    padding-inline: 10px;
    background: var(--paper);
  }

  .main[data-page="people"] .topbar:has(#peopleGroupContent:not([hidden])) {
    grid-template-columns: 40px minmax(0,max-content) minmax(48px,1fr) minmax(32px,1fr) max-content 36px;
  }

  .main[data-page="people"] .topbar:has(#peopleGroupContent:not([hidden])) .header-menu-control {
    grid-column: 6;
  }

  .main[data-page="people"] .topbar .directory-content-entry {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    padding-inline: 6px;
    font-size: 10px;
  }

  .main[data-page="people"] .topbar:has(#peopleGroupContent:not([hidden])) .directory-group>svg:not(.group-chevron) {
    display: none;
  }

  .main[data-page="people"] .topbar:has(#peopleGroupContent:not([hidden])) .directory-group select {
    padding-left: 6px;
  }

  .main[data-page="people"] .topbar #retryServerData:not([hidden]) {
    grid-column: 1/-1;
    grid-row: 3;
  }
}

@media(max-width:359px) {

  .main[data-page="people"] .topbar .directory-content-label {
    display: none;
  }

  .main[data-page="people"] .topbar .directory-content-compact {
    display: block;
    line-height: 1.25;
  }

  .main[data-page="people"] .topbar .directory-content-entry {
    min-width: 36px;
  }
}

/* Static document layout; data-driven colors and graph coordinates stay in JS. */
#authAccountId {
  overflow-wrap: anywhere;
  user-select: text;
}
#attributeFields, #relationPreview {
  grid-column: 1 / -1;
}

/* Structural styles for generated content; coordinates and user colors stay in JS. */
.people-section-window {
  position: relative;
  min-width: 0;
}
.people-section-window > .people-section-items {
  position: absolute;
  inset: 0 0 auto;
}
.graph-node .node-avatar-text {
  font-size: 15px;
}
.graph-node .node-original-name {
  font-size: 9px;
  fill: #999999;
}
.graph-friend-badge text {
  font-size: 9px;
}
.record-top .dot {
  margin-right: 6px;
}
.search-empty {
  padding: 12px;
}

/* Native, local search actions keep focus and avoid another search surface. */
.search.app-search .search-clear {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-block: -4px;
  margin-right: -4px;
  padding: 5px;
  border-radius: 7px;
  color: var(--muted);
  transition: background-color 120ms ease-out;
}

.search.app-search .search-clear svg {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.search.app-search .search-clear:active {
  background: #dfe1e4;
}

@media(hover:hover) and (pointer:fine) {
  .search.app-search .search-clear:hover {
    background: #e5e7e9;
  }
}

@media(max-width:619px) {
  .main[data-page="people"] .topbar .search:not(:focus-within) .search-clear {
    display: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  #settingsView .settings-list .settings-entry,
  .search.app-search .search-clear {
    transition: none;
  }
}
.clipboard-copy-field {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}

.edge-label-leader { fill: none; stroke: var(--relation-color, #9c9c9c); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }


/* share.css */
/* Public graph styles and shared accessible interaction feedback. */

.sv-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  overflow: hidden;
  color: #454545;
  font: 14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}

.sv-shell button {
  border: 0;
  background: transparent;
  font: inherit;
  color: #676767;
  cursor: pointer;
  border-radius: 7px;
  padding: 6px 10px;
}

.sv-shell button:hover {
  background: #f1f1f1;
}

.sv-shell button:disabled {
  opacity: .4;
  cursor: default;
}

.sv-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #efefef;
}

.sv-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f1f1;
  border-radius: 11px;
  padding: 8px 12px;
  max-width: 300px;
  flex: 1;
  color: #a4a4a4;
}

.sv-search input {
  border: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  color: #505050;
  width: 100%;
  min-width: 0;
}

.sv-results {
  position: absolute;
  z-index: 5;
  margin: 55px 12px 0;
  background: white;
  border: 1px solid #e4e4e4;
  box-shadow: 0 5px 20px #34343415;
  border-radius: 10px;
  padding: 6px;
  max-width: 330px;
  max-height: 300px;
  overflow: auto;
}

.sv-results button {
  display: block;
  width: 100%;
  text-align: left;
}

.sv-results p {
  padding: 8px;
  margin: 0;
  font-size: 12px;
  color: #8e8e8e;
}

.sv-stage {
  position: relative;
  flex: 1;
  min-height: 280px;
  background-image: radial-gradient(#e1e1e1 .7px,transparent .7px);
  background-size: 18px 18px;
  overflow: hidden;
}

.sv-stage svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  cursor: grab;
  position: absolute;
  inset: 0;
}

.sv-stage svg:active {
  cursor: grabbing;
}

.sv-node,
.sv-expand,
.sv-edge {
  cursor: pointer;
  outline: none;
}

.sv-node:focus-visible>rect,
.sv-expand:focus-visible>rect {
  stroke: #636363;
  stroke-width: 3;
}

.sv-node text,
.sv-expand text {
  pointer-events: none;
}

.sv-avatar {
  font-size: 18px;
}

.sv-name {
  font-size: 13px;
  fill: #525252;
  font-weight: 600;
}

.sv-subtitle {
  font-size: 10px;
}

.sv-expand text {
  font-size: 11px;
  fill: #696969;
}

.sv-edge-label {
  pointer-events: all;
  cursor: pointer;
  font-size: 11px;
  font-weight: 400;
  fill: var(--sv-relation-color, #bfbfbf);
  stroke: none;
}

.sv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 6px 10px;
  border-top: 1px solid #eeeeee;
  font-size: 11px;
  color: #969696;
}

.sv-summary {
  min-width: 0;
}

.sv-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  flex-wrap: wrap;
}

.sv-actions button {
  font-size: 11px;
  padding: 6px 7px;
  white-space: nowrap;
}

.sv-scale {
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sv-message {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  background: #fafafa;
  color: #939393;
  text-align: center;
  padding: 24px;
}

.sv-message[hidden] {
  display: none;
}

.sv-blocked .sv-footer,
.sv-blocked .sv-search,
.sv-blocked [data-sv="detail"] {
  visibility: hidden;
}

.sv-detail {
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  max-width: 480px;
  width: calc(100% - 40px);
  max-height: 85dvh;
  padding: 24px;
  overflow: auto;
  color: #515151;
  font: 14px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}

.sv-detail::backdrop {
  background: #33333355;
  backdrop-filter: blur(3px);
}

.sv-detail h2 {
  margin: 0 0 6px;
  font-size: 23px;
}

.sv-detail h3 {
  font-size: 14px;
  margin: 22px 0 12px;
}

.sv-detail dl {
  margin: 18px 0;
}

.sv-detail dl>div {
  display: flex;
  gap: 16px;
  padding: 7px 0;
}

.sv-detail dt {
  color: #979797;
  width: 48px;
  flex: none;
}

.sv-detail dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.sv-detail p small {
  display: block;
  color: #979797;
}

.sv-subtle {
  color: #9b9b9b;
  font-size: 12px;
}

.sv-detail [data-sv="close-detail"] {
  float: right;
  border: 1px solid #e3e3e3;
}

@media(max-width:650px) {

  .sv-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 7px 10px;
  }

  .sv-summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sv-actions {
    justify-content: space-between;
    border-top: 1px solid #efefef;
    padding-top: 4px;
    flex-wrap: nowrap;
  }

  .sv-actions button {
    padding: 6px 4px;
    font-size: 11px;
  }

  .sv-detail {
    padding: 20px;
  }

  .sv-shell {
    border-radius: 10px;
  }

  .sv-tools {
    padding: 8px 10px;
  }
}

.sv-group {
  font: inherit;
  font-size: 12px;
  border: 0;
  border-radius: 9px;
  background: #f1f1f1;
  color: #808080;
  padding: 8px;
  max-width: 160px;
  min-width: 0;
}

.sv-call {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dfdfdf;
  background: #f3f3f3;
  color: #676767;
  padding: 1px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
}

.sv-blocked .sv-group {
  visibility: hidden;
}

@media(max-width:420px) {

  .sv-group {
    max-width: 92px;
    padding: 8px 3px;
  }

  .sv-tools {
    gap: 5px;
  }

  .sv-tools>button {
    padding: 6px 5px;
  }

  .sv-search {
    padding: 8px;
  }
}

.sv-label-owner { visibility: hidden; pointer-events: none; }
.sv-label-owner.sv-label-visible { visibility: visible; }
.sv-edge.sv-dimmed,
.sv-node.sv-dimmed,
.sv-expand.sv-dimmed,
.sv-label-owner.sv-dimmed { opacity: .35; }
.sv-label-owner rect { stroke: none; pointer-events: all; cursor: pointer; }
.sv-label-background { fill: #fff; }
.sv-label-hit { fill: transparent; }
.sv-label-leader { fill: none; stroke: var(--sv-relation-color, #bfbfbf); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }

.sv-edge:hover>path:first-of-type,
.sv-edge:focus-visible>path:first-of-type {
  stroke-width: 2.3px;
}

.sv-edge.sv-edge-incident>path:first-of-type {
  stroke-width: 2.8px;
}

.sv-edge-label.sv-label-incident {
  font-weight: 600;
}

.sv-node.sv-focus-neighbor>rect:first-of-type {
  stroke: var(--sv-neighbor-color, #bfbfbf);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.sv-node.sv-focus-neighbor:focus-visible>rect:first-of-type {
  stroke-width: 2.5px;
}

.sv-node.sv-focused>rect:first-of-type {
  stroke: var(--sv-selected-color, #a4a4a4);
  stroke-width: 4px;
  vector-effect: non-scaling-stroke;
}

.sv-node.sv-focused:focus-visible>rect:first-of-type {
  stroke-width: 4.5px;
}

.share-content-picker>[data-content-confirm-label] {
  margin-top: 10px;
  align-items: flex-start;
}

.sv-graph-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sv-content-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #eaeaea;
  flex: none;
}

.sv-content-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 10px 8px;
  color: #8e8e8e;
  font-size: 12px;
}

.sv-content-tabs button[aria-selected=true] {
  background: #f1f1f1;
  color: #606060;
  font-weight: 600;
}

.sv-content-tabs button:focus-visible {
  outline: 2px solid #adadad;
}

.sv-content-pane {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px;
  background: #fbfbfb;
}

.sv-content-tabs[hidden],
.sv-graph-pane[hidden],
.sv-content-pane[hidden] {
  display: none!important;
}

.sv-content-group {
  max-width: 680px;
  margin: 0 auto 28px;
}

.sv-content-group>h2 {
  font-size: 17px;
  color: #545454;
  margin: 0 0 14px;
}

.sv-introduction {
  padding: 16px 18px;
  border-radius: 12px;
  background: #f2f2f2;
  margin-bottom: 24px;
}

.sv-introduction h3,
.sv-timeline-title {
  font-size: 12px;
  letter-spacing: .3px;
  color: #898989;
  margin: 0 0 12px;
}

.sv-introduction summary {
  font-size: 13px;
  line-height: 1.9;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.sv-content-pane p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.9;
  color: #717171;
}

.sv-timeline {
  border-left: 1px solid #dfdfdf;
  margin-left: 5px;
  padding-left: 22px;
}

.sv-timeline-item {
  position: relative;
  padding: 0 0 24px;
}

.sv-timeline-item:before {
  content: '';
  position: absolute;
  left: -27px;
  top: 5px;
  width: 8px;
  height: 8px;
  border: 2px solid #fbfbfb;
  border-radius: 50%;
  background: #9f9f9f;
}

.sv-timeline-item time {
  display: block;
  color: #a3a3a3;
  font-size: 11px;
  margin-bottom: 7px;
}

.sv-timeline-item summary {
  font-size: 14px;
  font-weight: 500;
  color: #5a5a5a;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.sv-note-people {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sv-note-people span {
  background: #f0f0f0;
  color: #8f8f8f;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 10px;
}

.sv-content-more {
  display: block;
  margin: 10px auto;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 9px 20px;
  background: #f4f4f4;
  color: #757575;
}

.sv-content-status {
  font-size: 12px;
  color: #a36e4f;
}

.sv-content-pane:empty {
  padding: 0;
}

@media(max-width:520px) {

  .sv-content-pane {
    padding: 16px;
  }

  .sv-introduction {
    padding: 12px 14px;
  }
}

/* Shared, restrained UI feedback for browser and the packaged Android WebView. */

:root {
  --ui-fast: 120ms;
  --ui-layer: 180ms;
  --ui-page: 200ms;
  --ui-ease: cubic-bezier(.2,.7,.2,1);
  --ui-muted: #6e6e6e;
  --ui-focus: #5b5b5b;
  --ui-radius: 9px;
}

:where(button,input,select,textarea,summary) {
  -webkit-tap-highlight-color: transparent;
}

:where(button,summary) {
  touch-action: manipulation;
}

:where(button) {
  transition: background-color var(--ui-fast) ease-out,border-color var(--ui-fast) ease-out,color var(--ui-fast) ease-out,filter var(--ui-fast) ease-out,scale var(--ui-fast) ease-out;
}

:where(button):not(:disabled):not([aria-disabled="true"]):active {
  filter: brightness(.94);
}

:where(.btn,.icon-btn,.gc-text-button,.gc-close,.header-menu-toggle,.sv-actions button):not(:disabled):not([aria-disabled="true"]):active {
  scale: .985;
}

:where(button,input,select,textarea,summary,a[href],[tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

:where(button):disabled,
:where(button)[aria-disabled="true"] {
  cursor: default;
  filter: none;
  scale: 1;
}

:where(button):disabled {
  opacity: .62;
}

:where(dialog,.header-menu,.sv-detail) {
  box-shadow: 0 12px 40px #37373724;
}

:where(dialog) {
  border-color: #e0e0e0;
}

:where(dialog)[open] {
  animation: ui-layer-in var(--ui-layer) var(--ui-ease);
}

:where(dialog)[open]::backdrop {
  animation: ui-backdrop-in var(--ui-layer) ease-out;
}

.header-menu:not([hidden]) {
  animation: ui-layer-in 160ms var(--ui-ease);
}

#peopleView:not([hidden]),
#settingsView:not([hidden]),
#typesView:not([hidden]),
#graphView:not([hidden]) {
  animation: ui-content-in var(--ui-page) ease-out;
}

:where(details[open])>:not(summary) {
  animation: ui-content-in 160ms ease-out;
}

:where(.share-tabs,.sv-content-tabs,#selfProfileTabs,#addContactTabs) {
  gap: 4px;
}

:where(.share-tabs,.sv-content-tabs,#selfProfileTabs,#addContactTabs) button {
  border-radius: var(--ui-radius);
}

:where(.profile-bio,.person-row-preview,.profile-original-name,.info-label,.info-value,.section-heading span,.person-row-count,.share-note,.gc-muted,.sv-summary,.sv-subtitle) {
  color: var(--ui-muted);
}

.sv-subtitle {
  fill: var(--ui-muted);
}

#detailPanel .info-row .info-label {
  color: #707070;
}

#detailPanel .info-row .info-value {
  color: #595959;
}

#detailPanel .profile-bio,
.person-row .person-row-preview,
.person-row .person-row-count {
  color: var(--ui-muted);
}

#detailPanel {
  transition: transform var(--ui-layer) var(--ui-ease);
}

:where(.form-field input,.form-field select,.form-field textarea,.share-field input,.share-field select,.share-field textarea) {
  transition: border-color var(--ui-fast) ease-out,background-color var(--ui-fast) ease-out;
}

:where(.form-field input,.form-field select,.form-field textarea,.share-field input,.share-field select,.share-field textarea):focus {
  border-color: #929292;
}

@media(hover:hover) and (pointer:fine) {

  :where(.btn,.gc-text-button,.header-menu button,.sv-actions button):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(.97);
  }
}

@media(hover:none) {

  .person-row:hover:not(.selected) {
    background: #fff;
  }

  .header-menu>[role="menuitem"]:hover:not(:focus-visible) {
    background: transparent;
  }
}

@media(pointer:coarse) {

  :where(.icon-btn,.header-menu-toggle,.gc-close,.share-close,.gc-text-button) {
    min-width: 40px;
    min-height: 40px;
  }

  #detailPanel .detail-heading {
    top: 4px;
    right: 8px;
  }

  #detailPanel .detail-heading>div {
    gap: 4px;
  }

  #detailPanel .detail-heading .icon-btn {
    width: 40px;
    height: 40px;
  }

  #detailPanel .profile-summary {
    padding-top: 34px;
  }

  #detailPanel .profile-avatar {
    margin-top: 34px;
  }

  .header-menu>[role="menuitem"] {
    min-height: 42px;
  }

  :where(.share-tabs,.sv-content-tabs,#selfProfileTabs,#addContactTabs) button {
    min-height: 40px;
  }
}

@keyframes ui-layer-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ui-content-in {

  from {
    opacity: .5;
  }

  to {
    opacity: 1;
  }
}

@keyframes ui-backdrop-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* No timing-dependent behavior: changing the OS preference takes effect at once. */

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }

  button:active {
    scale: 1!important;
  }

  .account-spinner {
    border-color: #cfcfcf;
    border-top-color: #5f5f5f;
  }
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation: none!important;
  transition: none!important;
  scroll-behavior: auto!important;
}

html[data-reduce-motion="true"] button:active {
  scale: 1!important;
}

@media(forced-colors:active) {

  :where(button,input,select,textarea,summary,a[href],[tabindex]):focus-visible {
    outline-color: Highlight;
  }

  :where(button):disabled {
    opacity: 1;
    color: GrayText;
  }
}

/* Readable supporting text on the neutral surfaces. */

:where(input,textarea)::placeholder {
  color: #727272;
  opacity: 1;
}

.sv-avatar {
  fill: #5f5f5f;
}


/* Public share page layout. Scoped separately from the signed-in application. */

:where(.public-share-page, .public-share-page *) {
  box-sizing: border-box;
}

body.public-share-page {
  margin: 0;
  background: #f7f7f7;
  color: #464646;
  font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 0 16px;
}

.public-share-page header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 20px 13px;
  flex: none;
  text-align: center;
}

.public-share-page h1 {
  width: 100%;
  font-size: 18px;
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: center;
}

.public-share-page header span {
  font-size: 11px;
  color: #a0a0a0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.public-share-page main {
  min-height: 0;
  flex: 1;
}

.public-share-page .sv-shell {
  border-inline: 0;
  border-radius: 0;
}

@media(max-width:650px) {

  body.public-share-page {
    padding: 0 0 10px;
  }

  .public-share-page header {
    padding: 13px 10px;
  }

  .public-share-page h1 {
    font-size: 16px;
  }
}


/* group-content.css */
.group-content-dialog{box-sizing:border-box;width:min(760px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:1px solid #e5e5e5;border-radius:20px;background:#fff;color:#464646;box-shadow:0 24px 90px #38383830;overflow:hidden;font:inherit}.group-content-dialog[open]{display:flex;flex-direction:column}.group-content-dialog::backdrop{background:#3b3b3b5c;backdrop-filter:blur(5px)}.group-content-dialog [hidden]{display:none!important}.gc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid #efefef;flex:none}.gc-head h2{margin:0;font-size:22px;line-height:1.3}.gc-eyebrow{margin:0 0 5px;color:#979797;font-size:11px;letter-spacing:.08em}.gc-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;flex:none;border:0;border-radius:50%;font-size:25px;font-weight:300;line-height:1;color:#8c8c8c;background:#f4f4f4;cursor:pointer}.gc-scroll{min-height:0;overflow:auto;padding:0 24px 22px;overscroll-behavior:contain}.gc-introduction{padding:20px 0;border-bottom:1px solid #ececec}.gc-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}.gc-section-heading h3{font-size:15px;margin:0}.gc-section-heading .btn{min-height:32px;padding:6px 11px;font-size:12px}.gc-text-button{border:0;background:transparent;color:#777777;padding:3px 0;font:inherit;font-size:12px;cursor:pointer}.gc-prose{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;font-size:13px;margin:5px 0;color:#727272}.gc-muted{font-size:12px;color:#9b9b9b;line-height:1.7;margin:5px 0}.gc-intro-details summary,.gc-note-details summary{list-style:none;font-size:13px;line-height:1.85;color:#727272;white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer}.gc-intro-details summary::-webkit-details-marker,.gc-note-details summary::-webkit-details-marker{display:none}.gc-intro-details[open] summary>span:first-child,.gc-note-details[open] summary>span:first-child{display:none}.gc-intro-details[open] summary .gc-text-button,.gc-note-details[open] summary .gc-text-button{font-size:0}.gc-intro-details[open] summary .gc-text-button:after,.gc-note-details[open] summary .gc-text-button:after{content:'收起';font-size:12px}.gc-notes{padding-top:20px}.gc-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gc-search{display:flex;align-items:center;gap:8px;flex:1;min-width:140px;min-height:34px;background:#f3f3f3;border-radius:11px;padding:0 11px;color:#999999}.gc-search svg{width:15px;height:15px;flex:none}.gc-search input{width:100%;height:34px;border:0;outline:0;background:transparent;color:#5a5a5a;padding:0;font:inherit;font-size:12px;min-width:0}.gc-filters>select{height:34px;max-width:115px;border:0;border-radius:9px;padding:0 9px;background:#f5f5f5;color:#787878;font:inherit;font-size:12px}.gc-filter-details{position:relative;flex:none}.gc-filter-details summary{cursor:pointer;list-style:none;font-size:12px;padding:8px;color:#7d7d7d}.gc-filter-options{z-index:2;position:absolute;right:0;top:36px;background:#fff;border:1px solid #e6e6e6;box-shadow:0 10px 35px #4a4a4a20;border-radius:12px;width:min(290px,calc(100vw - 78px));box-sizing:border-box;padding:14px}.gc-filter-options>label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#8a8a8a;margin-bottom:11px}.gc-filter-options input{height:34px;min-width:0;box-sizing:border-box;width:100%;border:1px solid #e6e6e6;border-radius:8px;padding:6px 9px;background:#f9f9f9;font:inherit;color:#5a5a5a}.gc-filter-options button,.gc-person-results button{display:block;width:100%;border:0;text-align:left;font:inherit;font-size:12px;padding:7px 8px;background:#fff;color:#5a5a5a;cursor:pointer;border-radius:7px;overflow-wrap:anywhere}.gc-filter-options button:hover,.gc-person-results button:hover{background:#f3f3f3}.gc-status{font-size:12px;line-height:1.6;color:#898989;margin:8px 0;min-height:16px}.gc-status.is-error{color:#a56950}.gc-month{font-size:12px;letter-spacing:.04em;color:#878787;margin:17px 0 12px 69px;font-weight:600}.gc-note{display:grid;grid-template-columns:53px minmax(0,1fr);gap:16px;position:relative;margin:0;padding:0 0 14px}.gc-note:before{position:absolute;content:'';left:60px;top:7px;bottom:-5px;width:1px;background:#e3e3e3}.gc-note:after{position:absolute;content:'';left:57px;top:9px;width:7px;height:7px;border-radius:50%;background:#a2a2a2;box-shadow:0 0 0 4px #fff}.gc-note:last-child:before{bottom:20px}.gc-note>time{font-size:11px;color:#989898;text-align:right;line-height:27px;white-space:nowrap}.gc-note-card{min-width:0;padding:9px 12px 10px;border-radius:12px;background:#f9f9f9;border:1px solid #efefef}.gc-note-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.gc-note-heading h5{font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}.gc-note-actions{display:flex;flex:none;gap:9px}.gc-note-actions button{border:0;padding:2px 0;background:transparent;color:#9b9b9b;font:inherit;font-size:11px;cursor:pointer}.gc-note-actions button:hover{color:#5e5e5e}.gc-note-people{margin:7px 0 0;display:flex;gap:5px;flex-wrap:wrap}.gc-note-people>span{color:#909090;background:#f1f1f1;border-radius:5px;padding:2px 6px;font-size:10px}.gc-delete-confirm{font-size:11px;line-height:1.7;border-top:1px solid #e5e5e5;padding-top:9px;margin-top:10px;color:#a36e55;display:flex;gap:9px;flex-wrap:wrap}.gc-delete-confirm button{border:0;background:transparent;padding:0;font:inherit;color:#936c57;cursor:pointer}.gc-empty{text-align:center;padding:35px 10px;font-size:13px;line-height:1.7;color:#9e9e9e}.gc-load-more{display:block;margin:6px auto 0;border:1px solid #e3e3e3;border-radius:9px;font:inherit;font-size:12px;background:#f9f9f9;color:#7f7f7f;padding:8px 22px;cursor:pointer}.gc-editor{width:min(650px,calc(100vw - 28px))}.gc-editor>form{display:flex;flex-direction:column;min-height:0;max-height:inherit}.gc-edit-body{overflow:auto;padding:19px 24px;min-height:0;overscroll-behavior:contain}.gc-field{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px;color:#7c7c7c}.gc-field input,.gc-field textarea,.gc-field select{font:inherit;font-size:13px;color:#5a5a5a;min-width:0;width:100%;box-sizing:border-box;border:1px solid #e7e7e7;background:#f8f8f8;border-radius:10px;padding:10px 12px}.gc-field textarea{resize:vertical;line-height:1.8;min-height:135px}.gc-body-field textarea{color:#727272}.gc-title-label{display:flex;align-items:center;justify-content:space-between;gap:10px}.gc-title-colors{display:flex;align-items:center;gap:9px}.gc-title-color-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#898989}.gc-title-color-label input[type=color]{width:25px;height:25px;min-height:0;padding:2px;border:1px solid #e2e2e2;border-radius:7px;background:#fff;cursor:pointer}.gc-title-color-label input[type=color]::-webkit-color-swatch-wrapper{padding:0}.gc-title-color-label input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}.gc-title-colors .gc-text-button{font-size:11px;white-space:nowrap}.gc-title-colors .gc-text-button[aria-pressed=true]{color:#9b9b9b}.gc-edit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:17px}.gc-wide{grid-column:1/-1}.gc-edit-status{padding:0 24px}.gc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;background:#fafafa;border-top:1px solid #ebebeb;flex:none}.gc-foot>span{font-size:11px;color:#9c9c9c}.gc-foot>div{display:flex;align-items:center;gap:8px}.gc-foot .btn{min-height:34px;padding:7px 18px;font-size:12px}.gc-person-chip{border:0;border-radius:7px;font:inherit;font-size:11px;background:#f1f1f1;color:#777777;padding:6px 8px;margin:0 5px 5px 0;cursor:pointer}.gc-person-chip>span{color:#9e9e9e;margin-left:5px}.gc-person-results{max-height:180px;overflow:auto}.group-content-dialog button:disabled{opacity:.5;cursor:wait}.group-content-dialog :focus-visible{outline:2px solid #acacac;outline-offset:2px}.group-content-dialog button,.group-content-dialog summary{touch-action:manipulation}#groupNoteUndo{font-size:12px;color:#8b8b8b;margin-top:12px}@media(max-width:520px){.group-content-dialog{width:calc(100vw - 18px);max-height:calc(100dvh - 18px);border-radius:16px}.gc-head{padding:16px 17px}.gc-head h2{font-size:19px}.gc-scroll{padding:0 16px 17px}.gc-introduction{padding:16px 0}.gc-notes{padding-top:16px}.gc-note{grid-template-columns:43px minmax(0,1fr);gap:13px}.gc-note:before{left:48px}.gc-note:after{left:45px}.gc-month{margin-left:56px}.gc-note-card{padding:8px 10px}.gc-note-heading{gap:6px;flex-wrap:wrap}.gc-note-actions{margin-left:auto}.gc-edit-body{padding:16px}.gc-edit-grid{gap:14px}.gc-foot{padding:12px 16px;flex-wrap:wrap}.gc-foot>span{width:100%}.gc-foot>div{margin-left:auto}.gc-edit-status{padding:0 16px}.gc-filters{gap:5px}.gc-search{min-width:130px}}
.gc-head-title{flex:1;min-width:0}.gc-head-title h2{overflow-wrap:anywhere}#groupContentGroup{font:inherit;font-size:12px;min-width:0;max-width:42%;height:34px;border:0;border-radius:9px;background:#f2f2f2;color:#787878;padding:0 10px}.gc-status .gc-text-button{margin-left:6px}
.gc-conflict-preview{max-height:180px;overflow:auto;padding:9px 12px;border:1px solid #e6e6e6;border-radius:9px;background:#f8f8f8;overflow-wrap:anywhere}.gc-conflict-preview summary{cursor:pointer;color:#6b6b6b}.gc-conflict-preview p{margin:5px 0}.gc-edit-status>p{margin:0 0 7px}.gc-edit-status>.gc-text-button{margin:6px 0 0}

.gc-note-group{display:inline-block;margin:7px 0 0;padding:2px 6px;border:1px solid #e3e3e3;border-radius:5px;background:#fff;color:#7c7c7c;font:inherit;font-size:10px;cursor:pointer}.gc-note-group:hover{background:#f2f2f2}.gc-group-view{font-size:11px;white-space:nowrap}.gc-person-view .gc-head{gap:10px}.gc-person-view #groupContentGroup{max-width:28%}@media(max-width:520px){.gc-person-view .gc-head{flex-wrap:wrap}.gc-person-view .gc-head-title{flex-basis:calc(100% - 46px)}.gc-person-view .gc-close{order:1}.gc-person-view .gc-group-view{order:2}.gc-person-view #groupContentGroup{order:3;margin-left:auto;flex:1;max-width:60%}}

@media(pointer:coarse) {
  .gc-note-actions {
    gap: 4px;
  }
  .gc-note-actions button {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 5px;
  }
}


/* activity-manager.css */
/* Activity dialogs, profile status, and check-in controls. */

.activity-dialog {
  width: min(640px,calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  background: #fff;
  color: #484848;
  overflow: hidden;
}

.activity-dialog[open],
.activity-dialog>form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.activity-dialog::backdrop {
  background: #37373766;
  backdrop-filter: blur(4px);
}

.activity-dialog [hidden],
.activity-profile[hidden],
.activity-settings[hidden] {
  display: none!important;
}

.activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #ebebeb;
  flex: none;
}

.activity-head h2 {
  font-size: 18px;
  margin: 0;
}

.activity-head button {
  border: 0;
  background: transparent;
  color: #8c8c8c;
  padding: 3px 6px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.activity-body {
  padding: 16px 20px;
  overflow: auto;
  min-height: 0;
}

.activity-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #ebebeb;
  background: #fbfbfb;
  flex: none;
}

.activity-foot .btn {
  min-width: 66px;
}

.activity-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #7d7d7d;
  font-size: 12px;
  margin-bottom: 14px;
}

.activity-field input:not([type=checkbox]),
.activity-field select {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #e4e4e4;
  border-radius: 9px;
  background: #f6f6f6;
  color: #5a5a5a;
  font: inherit;
  font-size: 13px;
}

.activity-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7e7e7e;
  font-size: 12px;
  line-height: 1.8;
}

.activity-check input {
  accent-color: #6c6c6c;
  width: 15px;
  height: 15px;
  margin: 0;
}

.activity-note {
  font-size: 11px;
  line-height: 1.75;
  color: #959595;
  margin: 7px 0 10px;
  overflow-wrap: anywhere;
}

.activity-alert {
  font-size: 12px;
  line-height: 1.65;
  background: #fff7f1;
  color: #a65c42;
  border: 1px solid #ecd8cd;
  border-radius: 8px;
  padding: 9px 11px;
  margin: 0 0 12px;
}

.activity-empty {
  text-align: center;
  font-size: 13px;
  color: #999999;
  padding: 24px 6px;
}

.activity-item {
  padding: 12px 13px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.activity-item h3 {
  margin: 0;
  font-size: 14px;
}

.activity-item p {
  margin: 5px 0;
  color: #8d8d8d;
  font-size: 12px;
  line-height: 1.7;
}

.activity-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.activity-actions .btn {
  font-size: 11px;
  padding: 5px 10px;
  min-height: 29px;
}

.activity-unread {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  text-align: center;
  background: #ececec;
  color: #676767;
  border-radius: 10px;
  font-size: 10px;
  vertical-align: middle;
}

.activity-unread[hidden] {
  display: none;
}

.activity-menu-dot {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 7px;
  height: 7px;
  background: #8b8b8b;
  border: 2px solid #f8f8f8;
  border-radius: 50%;
}

.activity-menu-dot[hidden] {
  display: none;
}

.activity-profile h3 {
  margin-bottom: 11px;
}

.activity-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  line-height: 1.7;
  margin: 7px 0;
}

.activity-profile-row>span:first-child {
  color: #9b9b9b;
  flex: none;
}

.activity-profile-row>span:nth-child(2) {
  color: #6e6e6e;
  text-align: right;
  overflow-wrap: anywhere;
}

.activity-profile .btn {
  font-size: 11px;
  min-height: 29px;
  padding: 5px 10px;
}

.activity-profile .activity-note {
  margin-bottom: 0;
}

.activity-settings {
  margin: 12px 0 0;
  padding-top: 13px;
  border-top: 1px solid #ebebeb;
}

.activity-settings h3 {
  font-size: 13px;
  margin: 0 0 10px;
  color: #646464;
}

.activity-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: #6c6c6c;
  font-size: 12px;
}

.activity-setting-row .self-friend-permissions {
  grid-column: auto;
  grid-row: auto;
}

.activity-setting-row .self-friend-permissions label {
  white-space: nowrap;
}

.activity-setting-row input:disabled {
  opacity: .5;
}

.activity-settings .activity-note {
  margin-top: 3px;
}

.activity-item[data-unread=true] {
  background: #f7f7f7;
  border-color: #d6d6d6;
}

.activity-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.activity-toolbar p {
  margin: 0;
}

.activity-toolbar .btn {
  font-size: 11px;
  padding: 5px 10px;
  min-height: 29px;
}

.activity-pending {
  color: #9b7d4b!important;
}

@media(max-width:600px) {

  .activity-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .activity-head {
    padding: 13px 15px;
  }

  .activity-body {
    padding: 13px 15px;
  }

  .activity-foot {
    padding: 11px 15px;
  }

  .activity-item {
    padding: 10px 11px;
  }

  .activity-field input:not([type=checkbox]),
  .activity-field select {
    font-size: 16px;
  }
}

/* Keep the personal check-in action centered, with a comfortable touch target. */

.activity-profile .activity-check-in-actions {
  justify-content: center;
  margin-top: 14px;
}

.activity-profile [data-activity-check-in] {
  width: min(100%,240px);
  max-width: 100%;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 10px;
  background: #3f444c;
  border-color: #3f444c;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background-color var(--ui-fast,120ms) var(--ui-ease,ease),border-color var(--ui-fast,120ms) var(--ui-ease,ease),scale var(--ui-fast,120ms) var(--ui-ease,ease);
}

.activity-profile .activity-check-in-actions+.activity-note {
  text-align: center;
}

@media(hover:hover) and (pointer:fine) {

  .activity-profile [data-activity-check-in]:hover:not(:disabled) {
    background: #30353c;
    border-color: #30353c;
  }
}

.activity-profile [data-activity-check-in]:active:not(:disabled) {
  background: #25292f;
  border-color: #25292f;
  transform: none;
  scale: .975;
}

.activity-profile [data-activity-check-in]:disabled {
  background: #e5e7eb;
  border-color: #d7d9dd;
  color: #727780;
  opacity: 1;
  transform: none;
  scale: 1;
}

.activity-profile [data-activity-check-in] {
  font-variant-numeric: tabular-nums;
}

.activity-time-toggle {
  min-height: 32px;
  max-width: 100%;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.6;
  text-align: inherit;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: underline dotted #9b9b9b;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.activity-time-toggle[aria-pressed="true"] {
  background: #f0f1f3;
  text-decoration-style: solid;
}

@media(hover:hover) and (pointer:fine) {

  .activity-time-toggle:hover {
    background: #f0f1f3;
  }
}

.activity-time-toggle:active {
  background: #e9eaec;
}


/* directory-tools.css */
.directory-tools-dialog{width:min(720px,calc(100vw - 28px));padding:0;max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:16px;color:var(--ink)}
.directory-tools-dialog[open]{display:flex;flex-direction:column}.dt-scroll{overflow:auto;min-height:0;padding:18px 24px}.dt-intro,.dt-empty,.dt-status{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:14px}.dt-status:not(:empty){margin-top:12px}.dt-candidate{padding:14px 0;border-bottom:1px solid var(--line)}.dt-candidate>p{font-size:11px;color:var(--muted);margin:4px 0}.dt-candidate label{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:13px}.dt-candidate small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.dt-candidate>button{margin-top:8px}.dt-page{margin-right:auto;font-size:11px;color:var(--muted)}.dt-merge-direction{display:flex;gap:16px;align-items:center;padding:14px;background:#f4f4f4;border-radius:10px;margin-bottom:12px;font-size:11px}.dt-merge-direction strong{display:block;font-size:15px;margin-top:5px}.dt-merge-direction button{margin-left:auto}.dt-fields label{display:grid;grid-template-columns:85px minmax(0,1fr);gap:12px;align-items:center;font-size:12px;padding:7px 0}.dt-fields select{width:100%;min-width:0;max-width:100%;background:#f7f7f7;border:1px solid var(--line);padding:9px;border-radius:7px}.dt-ack{display:flex;gap:8px;font-size:12px;padding:14px 0;line-height:1.7}.dt-warning{margin-top:14px;padding:14px;background:#fff6ef;border:1px solid #eedbcd;border-radius:9px;font-size:12px;line-height:1.7}.dt-warning ul{padding-left:20px;margin:8px 0}.dt-warning label{display:flex;align-items:center;gap:8px}.relation-evidence{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}.relation-evidence summary{font-size:12px;cursor:pointer;color:var(--muted);margin-bottom:10px}.relation-evidence .form-grid{gap:12px}.relation-verification{display:inline-flex;font-size:10px;border-radius:4px;padding:3px 6px;background:#f2f2f2;color:#707070}.relation-verification.pending{color:#976a2e;background:#faf1df}.relation-evidence-copy{white-space:pre-wrap}
@media(max-width:500px){.dt-scroll{padding:15px}.dt-fields label{grid-template-columns:64px minmax(0,1fr)}.dt-merge-direction{gap:9px}.directory-tools-dialog .modal-foot{padding:12px 15px;gap:6px}.dt-page{font-size:10px}}
.dt-merge-direction>span{min-width:0;flex:1}.dt-merge-direction>span:nth-child(2){flex:0 0 auto}.dt-merge-direction strong,.dt-candidate label span,.dt-warning li{overflow-wrap:anywhere}.dt-candidate label span{min-width:0}@media(max-width:400px){.directory-tools-dialog .modal-foot{flex-wrap:wrap}.dt-page{flex-basis:100%}.dt-merge-direction>button{padding:5px 7px}}


/* share-manager.css */
.share-dialog[open] {
  display: flex;
  flex-direction: column;
}

.share-dialog>form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}

.share-dialog .share-head,.share-dialog .share-foot {
  flex: none;
}

.share-dialog .share-body {
  min-height: 0;
  overflow: auto;
}

.share-dialog {
  width: min(940px,calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #e4e4e4;
  border-radius: 15px;
  overflow: hidden;
  color: #515151;
}

.share-dialog::backdrop {
  background: #37373766;
  backdrop-filter: blur(4px);
}

.share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #efefef;
}

.share-head h2 {
  font-size: 20px;
  margin: 0;
}

.share-body {
  padding: 18px 22px;
}

.share-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.share-toolbar input {
  flex: 1;
  min-width: 0;
}

.share-toolbar select {
  min-width: 0;
  max-width: 150px;
}

.share-toolbar input,.share-toolbar select,.share-field input,.share-field select,.share-field textarea {
  border: 1px solid #e4e4e4;
  background: #f6f6f6;
  color: #5a5a5a;
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
}

.share-toolbar input:focus,.share-field input:focus,.share-field textarea:focus {
  outline: 2px solid #c9c9c9;
  outline-offset: 1px;
}

.share-card {
  border: 1px solid #e6e6e6;
  border-radius: 11px;
  padding: 15px 16px;
  margin: 10px 0;
  background: #fff;
}

.share-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.share-card h3 {
  font-size: 15px;
  margin: 0;
}

.share-card-head h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.share-card-head .share-status {
  flex: none;
}

.share-card p {
  font-size: 11px;
  line-height: 1.8;
  color: #959595;
  margin: 7px 0;
}

.share-card .share-group-summary {
  font-size: 12px;
  color: #757575;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.share-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.share-status {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 5px;
  background: #f1f1f1;
  color: #797979;
  white-space: nowrap;
}

.share-status[data-status=REVOKED],.share-status[data-status=EXPIRED] {
  background: #fbede7;
  color: #a46e55;
}

.share-status[data-status=DISABLED] {
  background: #efefef;
  color: #919191;
}

.share-empty {
  text-align: center;
  color: #9e9e9e;
  font-size: 13px;
  padding: 32px 12px;
}

.share-error {
  padding: 9px 12px;
  border: 1px solid #ecd8cd;
  background: #fff7f1;
  color: #a65c42;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.share-error[hidden] {
  display: none;
}

.share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 18px;
}

.share-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #878787;
  min-width: 0;
}

.share-field input,.share-field select,.share-field textarea {
  width: 100%;
  min-width: 0;
}

.share-field textarea {
  resize: vertical;
  min-height: 66px;
  line-height: 1.5;
  box-sizing: border-box;
}

.share-owner-note {
  font-size: 12px;
  line-height: 1.6;
  color: #7e7e7e;
  margin: 10px 0;
  overflow-wrap: anywhere;
}

.share-owner-note strong {
  font-weight: 500;
  margin-right: 6px;
}

.share-owner-note span {
  white-space: pre-wrap;
}

.share-span {
  grid-column: 1/-1;
}

.share-section {
  border-top: 1px solid #efefef;
  margin-top: 18px;
  padding-top: 15px;
}

.share-section h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
}

.share-note {
  font-size: 11px;
  color: #9b9b9b;
  line-height: 1.8;
  margin: 7px 0;
}

.share-options {
  display: flex;
  gap: 7px 15px;
  flex-wrap: wrap;
}

.share-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #7a7a7a;
  line-height: 1.7;
}

.share-check input {
  accent-color: #6c6c6c;
  margin: 0;
}

.share-scope-picker {
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  padding: 10px;
}

.share-scope-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-scope-tools>input {
  flex: 1;
  min-width: 0;
  background: #f5f5f5;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 12px;
  color: #5a5a5a;
}

.share-scope-tools>.share-check {
  white-space: nowrap;
}

.share-scope-list {
  max-height: 250px;
  overflow: auto;
  overscroll-behavior: contain;
}

.share-scope-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
}

.share-scope-heading>.share-check {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.share-scope-expand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: #8c8c8c;
  font-size: 11px;
  padding: 5px;
}

.share-scope-expand[aria-expanded=true] {
  color: #606060;
}

.share-scope-group[hidden],.share-scope-group .share-options[hidden],#shareScopeEmpty[hidden] {
  display: none;
}

.share-scope-group {
  border: 1px solid #e7e7e7;
  border-radius: 0;
  margin: 0;
  padding: 3px 2px;
  border-width: 0 0 1px;
}

.share-scope-group>.share-check {
  font-weight: 600;
  margin-bottom: 5px;
}

.share-scope-group .share-options {
  padding: 6px 12px 12px 21px;
}

.share-disclosure {
  margin-top: 12px;
  border: 1px solid #e7e7e7;
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 12px;
  color: #898989;
}

.share-disclosure summary {
  cursor: pointer;
}

.share-exclusions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height: 170px;
  overflow: auto;
  gap: 6px;
  padding-top: 10px;
}

.share-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px 22px;
  background: #fbfbfb;
  border-top: 1px solid #ebebeb;
}

.share-foot .share-save-note {
  margin-right: auto;
  font-size: 11px;
  color: #979797;
}

.share-link {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.share-link input {
  flex: 1;
  min-width: 0;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 9px;
  font-size: 12px;
  color: #777777;
  background: #f4f4f4;
}

.share-preview-graph {
  height: min(530px,65dvh);
  min-height: 320px;
  margin-top: 12px;
}

.share-confirm {
  max-width: 450px;
}

.share-confirm p {
  font-size: 13px;
  line-height: 1.8;
  color: #8d8d8d;
}

.share-dialog input[type=checkbox] {
  width: 15px;
  height: 15px;
}

.share-dialog .btn:disabled {
  opacity: .5;
  cursor: wait;
}

.share-preview-warning {
  font-size: 12px;
  color: #9b805b;
  background: #faf5e9;
  padding: 9px 12px;
  border-radius: 8px;
}

.share-dialog .share-close {
  font-size: 23px;
  line-height: 1;
}

.share-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.share-toast {
  font-size: 12px;
  color: #717171;
  min-height: 18px;
  margin: 8px 0 0;
}

@media(max-width:650px) {
  .share-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }
  .share-head {
    padding: 14px 16px;
  }
  .share-head h2 {
    font-size: 18px;
  }
  .share-body {
    padding: 14px 16px;
  }
  .share-grid {
    gap: 11px 12px;
  }
  .share-toolbar {
    flex-wrap: wrap;
  }
  .share-toolbar input {
    flex-basis: 100%;
  }
  .share-toolbar select {
    flex: 1;
    max-width: none;
  }
  .share-toolbar .btn {
    padding: 8px 10px;
  }
  .share-field input,.share-field select,.share-field textarea {
    font-size: 16px;
    padding: 8px;
  }
  .share-exclusions {
    grid-template-columns: 1fr;
  }
  .share-foot {
    padding: 12px 16px;
  }
  .share-foot .share-save-note {
    flex-basis: 100%;
    margin: 0;
  }
  .share-card {
    padding: 12px;
  }
  .share-details-grid {
    grid-template-columns: 1fr;
  }
  .share-options {
    gap: 7px 12px;
  }
}

.share-editor {
  height: min(860px,calc(100dvh - 32px));
}

.share-editor>form {
  flex: 1;
  overflow: hidden;
}

.share-tabs {
  display: flex;
  gap: 6px;
  flex: none;
  padding: 9px 22px;
  border-bottom: 1px solid #ebebeb;
  background: #fbfbfb;
}

.share-tabs [role=tab] {
  border: 0;
  border-radius: 8px;
  padding: 8px 15px;
  background: transparent;
  color: #888888;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.share-tabs [role=tab][aria-selected=true] {
  background: #eeeeee;
  color: #5f5f5f;
  font-weight: 600;
}

.share-tabs [role=tab]:focus-visible {
  outline: 2px solid #b7b7b7;
  outline-offset: 2px;
}

.share-tab-panel {
  flex: 1;
}

.share-tab-panel[hidden] {
  display: none!important;
}

.share-preview-panel {
  display: flex;
  flex-direction: column;
}

.share-preview-panel>p {
  flex: none;
}

.share-preview-state {
  font-size: 12px;
  line-height: 1.6;
  color: #878787;
  margin: 5px 0;
}

.share-preview-panel .share-preview-graph {
  height: auto;
  min-height: 320px;
  flex: 1;
  margin-top: 5px;
}

.share-preview-graph .sv-shell {
  min-height: 320px;
}

.share-preview-graph .sv-stage {
  min-height: 180px;
}

.share-preview-panel #sharePreviewRetry {
  align-self: flex-start;
  margin: 5px 0;
}

.share-editor .share-foot [hidden] {
  display: none!important;
}

@media(max-width:650px) {
  .share-editor {
    height: min(860px,calc(100dvh - 16px));
  }
  .share-tabs {
    padding: 8px 16px;
  }
  .share-tabs [role=tab] {
    padding: 8px 13px;
  }
}

.share-editor .share-foot #shareSave,.share-editor .share-foot #sharePreviewSave {
  min-width: 148px;
  height: 38px;
  justify-content: center;
}

.share-editor .share-foot>.btn.ghost {
  min-width: 56px;
  height: 38px;
}

.share-permission-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}

.share-permission-row .share-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.share-permission-row .share-field select {
  width: 118px;
  min-width: 0;
  height: 34px;
  padding: 5px 8px;
  font-size: 13px;
}

@media(max-width:650px) {
  .share-permission-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 8px 12px;
  }
  .share-permission-row .share-field {
    gap: 6px;
  }
  .share-permission-row .share-field select {
    flex: 1;
    width: 0;
    height: 36px;
    min-width: 0;
    padding: 5px 4px;
    font-size: 16px;
  }
}

@media(max-width:360px) {
  .share-permission-row {
    column-gap: 6px;
  }
  .share-permission-row .share-field {
    gap: 3px;
  }
  .share-permission-row .share-field select {
    padding-left: 3px;
    padding-right: 3px;
  }
}

.share-exclusion-panel {
  min-width: 0;
}

.share-exclusion-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.share-exclusion-tools>input {
  flex: 1 1 140px;
  min-width: 0;
  width: 100%;
  border: 0;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 9px;
  font: inherit;
  font-size: 12px;
  color: #5a5a5a;
}

.share-exclusion-tools>.share-check {
  font-size: 11px;
  white-space: nowrap;
}

.share-exclusion-pages {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  font-size: 11px;
}

.share-exclusions .share-check {
  min-width: 0;
  overflow-wrap: anywhere;
  align-items: flex-start;
}

.share-exclusions .share-check input {
  flex: none;
  margin-top: 3px;
}

.share-exclusion-pages .btn:disabled {
  cursor: default;
}

.share-exclusion-panel .share-exclusions {
  grid-template-columns: 1fr;
  max-height: 240px;
  overscroll-behavior: contain;
}


/* contacts-import.css */
#contactImportDialog {
  width: min(720px,calc(100vw - 24px));
  max-height: calc(100dvh - 28px);
  border: 1px solid #e4e4e4;
  border-radius: 15px;
  padding: 0;
  overflow: hidden;
  color: #515151;
}

#contactImportDialog[open],#contactImportForm {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#contactImportForm {
  max-height: inherit;
}

#contactImportDialog::backdrop {
  background: #37373766;
  backdrop-filter: blur(4px);
}

.ci-head,.ci-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  flex: none;
}

.ci-head {
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;
}

.ci-head h2 {
  font-size: 19px;
}

.ci-body {
  padding: 16px 20px;
  overflow: auto;
  min-height: 0;
}

.ci-foot {
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid #ebebeb;
  background: #fbfbfb;
}

.ci-foot>span {
  margin-right: auto;
  color: #8f8f8f;
  font-size: 11px;
}

.ci-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #7f7f7f;
}

.ci-group select {
  min-width: 0;
  flex: 1;
  border: 0;
  border-radius: 9px;
  background: #f2f2f2;
  padding: 10px;
  color: #5a5a5a;
  font: inherit;
}

.ci-sources {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ci-sources .btn {
  flex: 1;
  min-width: 140px;
  justify-content: center;
}

.ci-note {
  font-size: 12px;
  line-height: 1.8;
  color: #8f8f8f;
  margin: 10px 0;
}

.ci-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 13px 0 9px;
}

.ci-tools>input {
  flex: 1;
  min-width: 120px;
  background: #f2f2f2;
  border: 0;
  border-radius: 9px;
  padding: 10px;
  font: inherit;
  font-size: 12px;
  color: #5a5a5a;
}

.ci-tools button {
  font-size: 12px;
  color: #6e6e6e;
  white-space: nowrap;
}

.ci-list {
  max-height: min(360px,40dvh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
}

.ci-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid #efefef;
  text-align: left;
  font-size: 13px;
}

.ci-row:last-child {
  border: 0;
}

.ci-row input {
  flex: none;
  accent-color: #6c6c6c;
  width: 16px;
  height: 16px;
}

.ci-row span {
  min-width: 0;
  flex: 1;
}

.ci-row strong,.ci-row small {
  display: block;
  overflow-wrap: anywhere;
}

.ci-row small {
  font-size: 11px;
  color: #969696;
  margin-top: 3px;
  line-height: 1.6;
}

.ci-row .ci-duplicate {
  font-size: 11px;
  flex: none;
  color: #9a8b6d;
}

.ci-row:has(input:disabled) {
  background: #f8f8f8;
}

.ci-warning {
  font-size: 12px;
  color: #9b754b;
  background: #faf6ec;
  padding: 9px 11px;
  border-radius: 8px;
  line-height: 1.8;
  margin: 10px 0;
  overflow-wrap: anywhere;
}

.ci-warning summary {
  cursor: pointer;
}

.ci-warning ul {
  padding-left: 20px;
  max-height: 120px;
  overflow: auto;
}

.ci-error {
  font-size: 12px;
  color: #a45c44;
  background: #fff5ee;
  border-radius: 8px;
  padding: 10px;
  line-height: 1.8;
  margin: 10px 0;
}

.ci-result {
  padding: 20px 8px;
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
}

.ci-result small {
  display: block;
  font-size: 12px;
  color: #8e8e8e;
}

.ci-empty {
  font-size: 12px;
  padding: 18px;
  text-align: center;
  color: #949494;
}

#contactImportDialog [hidden] {
  display: none!important;
}

#contactImportClose {
  font-size: 24px;
  line-height: 1;
  padding: 3px 5px;
  color: #8c8c8c;
}

#contactImportSummary {
  font-size: 12px;
  line-height: 1.8;
  color: #7e7e7e;
  margin: 10px 0;
}

@media(max-width:450px) {
  .ci-head,.ci-foot {
    padding: 13px 15px;
  }
  .ci-body {
    padding: 14px 15px;
  }
  .ci-foot>span {
    flex-basis: 100%;
  }
  .ci-foot>.btn {
    min-height: 38px;
  }
  .ci-row {
    padding: 10px 8px;
    gap: 8px;
  }
}


/* friends.css */
.friends-dialog {
  width: min(760px,calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  overflow: hidden;
  color: #484848;
  background: #fff;
}

.friends-dialog[open] {
  display: flex;
  flex-direction: column;
}

.friends-dialog>form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}

.friends-dialog::backdrop {
  background: #37373766;
  backdrop-filter: blur(4px);
}

.friends-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #ebebeb;
  flex: none;
}

.friends-head h2 {
  font-size: 19px;
  margin: 0;
}

.friends-close {
  font: inherit;
  font-size: 24px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: #8c8c8c;
  cursor: pointer;
  padding: 4px 7px;
}

.friends-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 15px;
  border-bottom: 1px solid #ececec;
  overflow: auto;
  flex: none;
  scrollbar-width: none;
}

.friends-tabs button {
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  white-space: nowrap;
  font: inherit;
  font-size: 12px;
  color: #878787;
  background: transparent;
  cursor: pointer;
}

.friends-tabs button[aria-selected=true] {
  background: #efefef;
  color: #5f5f5f;
  font-weight: 600;
}

.friends-count,.friend-account-badge {
  font-size: 10px;
  padding: 2px 6px;
  line-height: 1.5;
  border-radius: 5px;
  background: #efefef;
  color: #696969;
  white-space: nowrap;
}

.friends-count {
  margin-left: 4px;
}

.friends-body {
  padding: 14px 20px;
  overflow: auto;
  min-height: 0;
}

.friends-note {
  font-size: 12px;
  color: #959595;
  line-height: 1.7;
  margin: 6px 0 12px;
}

.friends-alert {
  border: 1px solid #ecd8cd;
  background: #fff7f1;
  color: #a65c42;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 10px;
}

.friends-alert[hidden],.friends-dialog [hidden] {
  display: none!important;
}

.friends-status {
  font-size: 12px;
  min-height: 18px;
  line-height: 1.6;
  color: #717171;
  margin: 6px 0 0;
}

.friends-empty {
  text-align: center;
  color: #999999;
  padding: 25px 6px;
  font-size: 13px;
}

.friends-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.friends-toolbar input {
  flex: 1;
  min-width: 0;
}

.friends-input,.friends-field input,.friends-field select,.friends-field textarea {
  border: 1px solid #e4e4e4;
  background: #f6f6f6;
  color: #5a5a5a;
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  min-width: 0;
}

.friends-field input,.friends-field select,.friends-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.friends-field textarea {
  resize: vertical;
  min-height: 66px;
}

.friends-input:focus,.friends-field input:focus,.friends-field select:focus,.friends-field textarea:focus {
  outline: 2px solid #c5c5c5;
  outline-offset: 1px;
}

.friends-card {
  padding: 12px 13px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 9px;
}

.friends-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.friends-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 22%;
  background: #ececec;
  color: #646464;
  font-size: 18px;
}

.friends-card-title {
  flex: 1;
  min-width: 0;
}

.friends-card h3 {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.friends-card-meta {
  font-size: 11px;
  color: #9b9b9b;
  line-height: 1.6;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.friends-card-message {
  font-size: 12px;
  color: #7c7c7c;
  white-space: pre-wrap;
  margin: 9px 0;
  overflow-wrap: anywhere;
}

.friends-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.friends-actions .btn {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
}

.friends-link {
  font-size: 11px;
  color: #878787;
  border: 0;
  background: transparent;
  padding: 3px;
  cursor: pointer;
}

.friends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 15px;
}

.friends-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #8e8e8e;
  min-width: 0;
}

.friends-span {
  grid-column: 1/-1;
}

.friends-policy {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  border: 0;
  padding: 0;
  margin: 10px 0;
}

.friends-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #7e7e7e;
  line-height: 1.8;
}

.friends-check input {
  accent-color: #6c6c6c;
  width: 15px;
  height: 15px;
  margin: 0;
}

.friends-policy select {
  border: 1px solid #e2e2e2;
  background: #f7f7f7;
  border-radius: 7px;
  color: #717171;
  font: inherit;
  font-size: 12px;
  padding: 5px 7px;
}

.friends-section {
  border-top: 1px solid #efefef;
  padding-top: 12px;
  margin-top: 13px;
}

.friends-section h3 {
  font-size: 14px;
  margin: 0 0 7px;
}

.friends-foot {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 12px 20px;
  background: #fbfbfb;
  border-top: 1px solid #ebebeb;
}

.friends-foot .btn {
  min-width: 66px;
}

.friends-dialog button:disabled {
  opacity: .55;
  cursor: default;
}

.friends-policy:disabled {
  opacity: .6;
}

.friends-confirm {
  width: min(430px,calc(100vw - 28px));
}

.friends-confirm p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  white-space: pre-line;
  color: #878787;
}

.friends-details {
  margin-top: 9px;
  font-size: 12px;
  color: #808080;
}

.friends-details summary {
  cursor: pointer;
}

.friends-profile-row {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  line-height: 1.6;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.friends-profile-row>span:first-child {
  color: #9d9d9d;
  flex: 0 0 42px;
}

.friends-profile-row>span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.friends-profile-row .btn {
  padding: 3px 7px;
  min-height: 26px;
  font-size: 11px;
  align-self: center;
  flex: none;
}

.friend-source-note {
  font-size: 11px;
  color: #9c9c9c;
  line-height: 1.7;
}

.friend-account-badge {
  display: inline-block;
  vertical-align: middle;
}

.friends-busy {
  height: 3px;
  border-radius: 2px;
  background: #f0f0f0;
  overflow: hidden;
  margin-bottom: 12px;
}

.friends-busy:after {
  content: '';
  display: block;
  height: 100%;
  width: 35%;
  background: #a0a0a0;
  animation: friends-loading 1s ease-in-out infinite;
}

@keyframes friends-loading {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(390%);
  }
}

@media(prefers-reduced-motion:reduce) {
  .friends-busy:after {
    animation: none;
    width: 100%;
  }
}

@media(max-width:600px) {
  .friends-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .friends-head {
    padding: 13px 15px;
  }
  .friends-body {
    padding: 12px 15px;
  }
  .friends-tabs {
    padding: 7px 10px;
  }
  .friends-tabs button {
    padding: 8px;
  }
  .friends-field input,.friends-field select,.friends-field textarea,.friends-input {
    font-size: 16px;
  }
  .friends-grid {
    gap: 10px;
  }
  .friends-foot {
    padding: 11px 15px;
  }
  .friends-card {
    padding: 11px;
  }
  .friends-toolbar {
    gap: 7px;
  }
  .friends-toolbar .btn {
    padding: 9px 11px;
  }
  .friends-policy {
    gap: 8px 13px;
  }
}

.friends-toolbar.friends-filter-toolbar {
  margin-bottom: 6px;
}

.friends-filter-search.search.app-search {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 6px 10px;
  background: #f1f1f1;
  border: 1px solid transparent;
  border-radius: 9px;
  transition: background .15s,border-color .15s,box-shadow .15s;
}

.friends-filter-search.search.app-search:hover {
  border-color: #e1e1e1;
  background: #f4f4f4;
}

.friends-filter-search.search.app-search:focus-within {
  background: #fff;
  border-color: #c3c3c3;
  box-shadow: 0 0 0 3px #c3c3c325;
  outline: none;
}

.friends-filter-search.search.app-search svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: #979797;
}

.friends-filter-search.search.app-search input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  font: inherit;
  font-size: 11px;
  line-height: 18px;
  color: #5a5a5a;
}

.friends-filter-search.search.app-search input::placeholder {
  color: #9a9a9a;
}

.friends-toolbar.friends-lookup-toolbar {
  gap: 8px;
  margin: 0 0 4px;
}

.friends-lookup-toolbar>.btn {
  flex: none;
  height: 32px;
  min-height: 32px;
  padding: 5px 13px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
}

@media(max-width:600px) {
  .friends-lookup-toolbar .friends-filter-search.search.app-search input {
    font-size: 16px;
  }
}

.friends-manager-embedded {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 20px 16px;
  color: #484848;
}

.friends-manager-embedded>.friends-tabs {
  padding: 0 0 10px;
  border-bottom: 1px solid #ececec;
  gap: 3px;
}

.friends-manager-embedded>.friends-body {
  padding: 14px 0 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.friends-manager-embedded [hidden] {
  display: none!important;
}

.friends-manager-embedded .friends-tabs button {
  padding: 7px 8px;
}

.friends-manager-embedded button:disabled {
  opacity: .55;
  cursor: default;
}

@media(max-width:600px) {
  .friends-manager-embedded {
    padding: 10px 15px 14px;
  }
}

#friendDefaultsForm > h3 {
  font-size: 14px;
  margin: 0 0 8px;
}

#friendEditContent > .friends-card-head > h3 {
  font-size: 15px;
}


/* self-friend-permissions.css */
.is-self-profile .form-field.self-friend-field,[data-self-friend-layout] .form-field.self-friend-field {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px 8px;
  align-items: center;
}

.self-friend-input-label {
  display: contents;
}

.self-friend-input-label>input,.self-friend-input-label>textarea,.self-friend-input-label>select,.self-friend-input-label>small {
  grid-column: 1/-1;
  min-width: 0;
}

.self-friend-permissions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #898989;
  grid-column: 2;
  grid-row: 1;
}

.self-friend-permissions label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 400;
}

.self-friend-permissions input[type=checkbox] {
  width: 13px;
  height: 13px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: #6c6c6c;
  flex: none;
}

.self-friend-permissions select {
  width: auto;
  max-width: 100%;
  min-height: 25px;
  padding: 2px 6px;
  font: inherit;
  background: #f5f5f5;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  color: #727272;
}

.self-friend-permissions input:disabled,.self-friend-permissions select:disabled {
  opacity: .55;
  cursor: default;
}

.self-friend-permissions--lookup {
  grid-column: 1/-1;
  grid-row: auto;
  justify-content: flex-start;
  gap: 3px 8px;
  margin-top: 1px;
}

.self-friend-permissions--avatar {
  justify-content: flex-start;
  grid-column: auto;
  grid-row: auto;
}

.self-friend-permissions small {
  flex-basis: 100%;
  font-size: 10px;
  line-height: 1.5;
  color: #979797;
}

.self-friend-permission-heading {
  margin: 0 0 10px;
}

.self-friend-permission-status {
  min-width: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #8f8f8f;
  margin: 0;
}

.self-friend-permission-status[data-error=true] {
  color: #a16448;
}


/* account-services.css */
.account-service-dialog{width:min(600px,calc(100% - 24px));max-height:88vh;border:1px solid #d8d8d8;border-radius:12px;padding:0;color:#222;background:#fff}.account-service-dialog::backdrop{background:#0005}.account-service-dialog .modal-head,.account-service-dialog .modal-foot{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #eee}.account-service-dialog .modal-foot{justify-content:flex-end;border-top:1px solid #eee;border-bottom:0}.account-service-dialog h2{font-size:19px;margin:0}.account-service-dialog .form-body{padding:18px 22px;max-height:63vh;overflow:auto}.account-service-dialog .form-error{padding:0 22px;white-space:pre-wrap}.account-service-dialog .form-error:empty{display:none}.account-service-dialog .form-field{display:grid;gap:7px;margin:15px 0;font-size:13px}.account-service-dialog input,.account-service-dialog textarea,.account-service-dialog select{font:inherit;padding:10px;border:1px solid #ccc;border-radius:6px;width:100%;box-sizing:border-box}.account-service-dialog textarea{min-height:110px;resize:vertical}.account-service-dialog .btn{margin:5px 8px 5px 0;white-space:normal}.service-note{font-size:13px;color:#707070;line-height:1.8}.service-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.8}.service-record{display:grid;text-align:left;border:0;border-bottom:1px solid #eee;background:transparent;width:100%;gap:8px;padding:16px 0;color:inherit;cursor:pointer;font:inherit}.service-record small,.service-message small{font-size:12px;color:#777}.service-message{border-top:1px solid #eee;padding-top:12px;margin-top:12px}.service-announcement{border-bottom:1px solid #e5e5e5;padding:15px 0}.service-announcement summary{cursor:pointer;font-weight:600}.service-public-footer{display:flex;gap:18px;justify-content:center;padding:14px;background:#fafafa;position:relative;z-index:2}.service-public-footer button{border:0;background:transparent;color:#777;font:12px inherit;cursor:pointer}.account-service-dialog button:focus-visible,.service-announcement summary:focus-visible{outline:2px solid #444;outline-offset:3px}@media(prefers-reduced-motion:reduce){.account-service-dialog *{transition:none!important}}