:root {
  --navy: #082e63;
  --blue: #1262df;
  --orange: #ff790b;
  --green: #32a927;
  --ink: #111827;
  --muted: #687386;
  --line: #e7ebf1;
  --surface: #ffffff;
  --canvas: #f6f8fc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 50% -5%, #eef5ff 0, var(--canvas) 40%);
}

.offline-shell { display: grid; width: min(calc(100% - 40px), 430px); min-height: 100dvh; margin: 0 auto; padding: 48px 24px; place-content: center; justify-items: center; text-align: center; }
.offline-shell img { border-radius: 20px; }
.offline-shell h1 { margin-top: 22px; }
.offline-shell p { max-width: 330px; color: var(--muted); line-height: 1.55; }
.offline-shell a { min-height: 43px; margin-top: 8px; padding: 0 18px; align-content: center; border-radius: 999px; color: #fff; background: var(--navy); text-decoration: none; }

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); font-weight: 750; }

.app-shell {
  --shell-padding: 20px;
  width: min(100%, 680px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 var(--shell-padding) 36px;
  background: rgba(255, 255, 255, .72);
}

.app-header { position: sticky; top: 0; z-index: 30; margin: 0 calc(-1 * var(--shell-padding)); padding: max(18px, env(safe-area-inset-top)) var(--shell-padding) 12px; background: #fff; box-shadow: 0 10px 24px rgba(24, 51, 90, .09); }
.topbar, .heading, .section-heading, .contact-card, .detail-row { display: flex; align-items: center; }
.topbar { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: clamp(8px, 1.8vw, 14px); }
.topbar-center { grid-column: 2; display: flex; width: 100%; min-width: 0; align-items: center; justify-content: center; overflow: hidden; text-align: center; pointer-events: none; }
.topbar-spacer { grid-column: 3; width: 42px; justify-self: end; }
.brand-actions { grid-column: 1; display: flex; min-width: 0; align-items: center; gap: 8px; }
.header-actions { grid-column: 3; display: flex; align-items: center; justify-self: end; gap: 9px; }
.profile-button { position: relative; display: grid; width: 42px; height: 42px; overflow: hidden; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--orange), #ffac3a); font-size: .9rem; text-decoration: none; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--navy);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.06em;
  text-decoration: none;
}
.brand > span:last-child > span { color: var(--orange); }
.brand-mark {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 5px solid var(--blue);
  border-right-color: var(--orange);
  border-radius: 13px;
  background: linear-gradient(135deg, #50bd33, #239729);
  color: #fff;
  font-size: .62rem;
  letter-spacing: -.08em;
  transform: rotate(-7deg);
}
.brand-mark span { transform: rotate(7deg); }
.add-app-button { display: inline-flex; width: auto; height: 34px; padding: 0 11px 0 8px; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 999px; color: var(--navy); background: #edf3ff; cursor: pointer; }
.add-app-button[hidden] { display: none; }
.add-app-button:disabled { cursor: wait; opacity: .7; }
.add-app-button svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.add-app-button span { font-size: .7rem; font-weight: 850; white-space: nowrap; }

.icon-button, .close-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--navy);
  background: #edf3ff;
}
.icon-button svg { width: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.icon-button:disabled { opacity: 1; }
.notification-button { position: relative; cursor: pointer; }
.notification-badge { position: absolute; top: -3px; right: -3px; display: grid; min-width: 19px; height: 19px; padding: 0 5px; place-items: center; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #ef4053; font-size: .62rem; font-weight: 900; line-height: 1; }
.notification-badge[hidden] { display: none; }

.heading { flex-direction: column; align-items: stretch; gap: 12px; margin: 24px 0 0; }
.calendar-overview-header[hidden] { display: none; }
.calendar-type-toolbar { position: relative; z-index: 4; display: flex; gap: 10px; margin: 10px 0 -8px; align-items: center; }
.calendar-type-tabs { display: flex; min-width: 0; gap: 7px; margin: 0; padding: 0 0 3px; align-items: center; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.calendar-type-tabs::-webkit-scrollbar { display: none; }
.calendar-type-tab { display: inline-flex; min-height: 36px; padding: 0 14px; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; box-shadow: 0 4px 12px rgba(7, 33, 73, .05); cursor: pointer; font-size: .78rem; font-weight: 850; white-space: nowrap; }
.calendar-type-tab.is-active { color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); box-shadow: 0 5px 13px rgba(8, 78, 183, .26); }
.calendar-type-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.calendar-type-icon.is-birthday { color: var(--orange); }
.calendar-type-icon.is-anniversary { color: #9b6cff; }
.calendar-type-tab.is-active .calendar-type-icon { color: #fff; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.page-total { flex: 0 0 auto; }
.eyebrow, .section-kicker { margin: 0 0 5px; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; color: var(--navy); font-size: clamp(2rem, 8vw, 2.65rem); letter-spacing: -.055em; line-height: 1; }

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 8px 25px rgba(36, 65, 107, .06);
}
.search-field svg { width: 21px; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-width: 2; }
.search-field input { width: 100%; height: 51px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-field input::placeholder { color: #9ca5b3; }
.connection-tagline { width: 100%; margin: -4px 0 0; text-align: center; font-size: .82rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.topbar-tagline { overflow: hidden; max-width: 100%; margin: 0; font-size: clamp(.55rem, 1vw, .68rem); letter-spacing: clamp(.025em, .08vw, .055em); text-overflow: clip; white-space: nowrap; }
.tagline-connect { color: var(--green); }
.tagline-share { color: var(--blue); }
.tagline-gather { color: var(--orange); }

.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid #e1e7f0;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8faff, #f1f5fb);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 7px 20px rgba(8, 46, 99, .075);
}
.header-tabs { margin-top: 14px; }
.header-search { margin-top: 8px; }
.header-search[hidden] { display: none; }
.header-search-results { position: absolute; top: calc(100% - 3px); right: var(--shell-padding); left: var(--shell-padding); z-index: 35; overflow: hidden auto; max-height: min(390px, calc(100dvh - var(--app-header-height, 200px) - 18px)); border: 1px solid #ccd8e8; border-radius: 0 0 17px 17px; background: #fff; box-shadow: 0 18px 38px rgba(8, 46, 99, .2); }
.header-search-results[hidden] { display: none; }
.header-search-result { min-height: 68px; padding-top: 9px; padding-bottom: 9px; cursor: pointer !important; user-select: auto; -webkit-touch-callout: default; }
.header-search-result:last-child { border-bottom: 0; }
.header-search-empty { margin: 0; padding: 18px; color: var(--muted); text-align: center; font-size: .86rem; }
.header-search-empty.is-compact { padding: 14px 18px; font-size: .8rem; }
.header-search-section-heading { display: flex; min-height: 38px; padding: 8px 14px; align-items: center; border-top: 6px solid #edf2f8; border-bottom: 1px solid var(--line); color: var(--navy); background: #f8fbff; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tab { position: relative; display: inline-flex; min-width: 0; min-height: 50px; padding: 5px 8px; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 13px; color: #59677b; background: transparent; cursor: pointer; font-weight: 800; font-size: .8rem; white-space: nowrap; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tab svg { width: 29px; height: 29px; padding: 6px; flex: 0 0 auto; border-radius: 10px; fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; background: #e7f0ff; transition: stroke .16s ease, background .16s ease, transform .16s ease; }
.tab[data-tab="connections"] svg { stroke: #24951d; background: #e7f7e5; }
.tab[data-tab="requests"] svg { stroke: #7b4ed2; background: #f0eaff; }
.tab:not(.is-active):hover { border-color: #d8e1ee; color: var(--navy); background: rgba(255, 255, 255, .82); box-shadow: 0 5px 13px rgba(8, 46, 99, .07); transform: translateY(-1px); }
.tab:not(.is-active):hover svg { transform: scale(1.05); }
.tab.is-active { color: #fff; border-color: transparent; box-shadow: 0 7px 17px rgba(8, 78, 183, .25); }
.tab.is-active[data-tab="all-contacts"] { background: linear-gradient(135deg, #0b3978, #1673e8); }
.tab.is-active[data-tab="connections"] { background: linear-gradient(135deg, #177d43, #39aa32); box-shadow: 0 7px 17px rgba(35, 143, 43, .23); }
.tab.is-active[data-tab="requests"] { background: linear-gradient(135deg, #6544c9, #8c5be5); box-shadow: 0 7px 17px rgba(104, 68, 201, .25); }
.tab.is-active svg { stroke: #fff; background: rgba(255, 255, 255, .17); }
.tab:active { transform: translateY(0); }

.tab-panel { padding-top: 14px; }
.contacts-panel { position: relative; min-height: 305px; padding-bottom: 88px; }
.groups-panel { position: relative; min-height: 305px; padding-bottom: 88px; }
.groups-view-filter { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.groups-only-switch { position: relative; display: inline-flex; min-height: 34px; align-items: center; gap: 9px; color: var(--navy); cursor: pointer; font-size: .82rem; font-weight: 800; }
.groups-only-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.groups-only-switch-track { position: relative; width: 42px; height: 24px; flex: 0 0 auto; border: 1px solid #c8d1df; border-radius: 999px; background: #e7ebf1; transition: border-color .18s ease, background .18s ease; }
.groups-only-switch-track::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(8, 46, 99, .25); content: ''; transition: transform .18s ease; }
.groups-only-switch input:checked + .groups-only-switch-track { border-color: var(--navy); background: var(--navy); }
.groups-only-switch input:checked + .groups-only-switch-track::after { transform: translateX(18px); }
.groups-only-switch input:focus-visible + .groups-only-switch-track { outline: 3px solid #74a9ff; outline-offset: 2px; }
.section-heading { justify-content: space-between; margin-bottom: 13px; }
.section-heading h2 { margin: 0; font-size: 1.32rem; letter-spacing: -.035em; }
.contact-total { padding: 7px 10px; border-radius: 999px; color: var(--blue); background: #eaf2ff; font-size: .77rem; font-weight: 800; }

.contacts-shell { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: start; gap: 7px; }
.contacts-list { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: 0 12px 28px rgba(26, 55, 98, .06); }
.groups-shell { display: block; }
.groups-list { overflow-x: hidden; overflow-y: auto; max-height: max(280px, calc(100dvh - var(--app-header-height, 200px) - 125px)); overscroll-behavior: contain; scrollbar-color: var(--blue) #edf3ff; scrollbar-width: thin; }
.groups-list::-webkit-scrollbar { width: 9px; }
.groups-list::-webkit-scrollbar-track { background: #edf3ff; }
.groups-list::-webkit-scrollbar-thumb { border: 2px solid #edf3ff; border-radius: 999px; background: var(--blue); }
.alphabetized-list { scroll-margin-top: 18px; }
.letter-heading { position: sticky; top: 0; z-index: 1; padding: 7px 16px 6px; border-bottom: 1px solid #edf0f5; color: var(--blue); background: linear-gradient(180deg, #f8fbff, #fff); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.contact-card { position: relative; gap: 13px; width: 100%; min-height: 77px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); color: inherit; text-align: left; background: transparent; cursor: pointer; }
.group-card.is-pinned { background: linear-gradient(90deg, rgba(255, 151, 29, .1), rgba(255, 255, 255, 0)); }
.contact-card:last-child { border-bottom: 0; }
.contact-card:active { background: #f4f8ff; }
.contact-card:focus-visible, .tab:focus-visible, .close-button:focus-visible { outline: 3px solid #74a9ff; outline-offset: -3px; }
.avatar { position: relative; display: grid; overflow: hidden; flex: 0 0 auto; width: 46px; height: 46px; place-items: center; border-radius: 50%; color: #fff; font-size: .85rem; font-weight: 800; letter-spacing: .02em; }
.profile-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.profile-image[hidden] { display: none; }
.avatar-0 { background: linear-gradient(135deg, #0b3670, #1672e8); }
.avatar-1 { background: linear-gradient(135deg, #ca5c10, #ff971d); }
.avatar-2 { background: linear-gradient(135deg, #138b47, #4dbe42); }
.avatar-3 { background: linear-gradient(135deg, #8039a7, #bd6ae0); }
.avatar-4 { background: linear-gradient(135deg, #b53f55, #ee6c73); }
.contact-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 3px; }
.contact-copy strong { overflow: hidden; font-size: 1rem; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.contact-copy span { overflow: hidden; color: var(--muted); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.contact-card-quick-actions { display: flex; flex: 0 0 auto; gap: 5px; margin-left: auto; }
.contact-card-quick-action { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #d8dee8; border-radius: 50%; text-decoration: none; }
.contact-card-quick-action svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.contact-card-quick-action.is-email.is-available { border-color: #b9d5ff; color: var(--blue); background: #eaf2ff; }
.contact-card-quick-action.is-phone.is-available { border-color: #a9dfa3; color: var(--green); background: #e7f8e5; }
.contact-card-quick-action.is-sms.is-available { border-color: #ffd09f; color: var(--orange); background: #fff3e7; }
.contact-card-quick-action.is-unavailable { color: #9ba5b3; background: #f1f3f6; }
.group-card-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; margin-left: auto; }
.group-pin-form { flex: 0 0 auto; margin: 0; }
.group-pin-button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: var(--navy); background: #edf3ff; cursor: pointer; }
.group-pin-button svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.group-card.is-pinned .group-pin-button { color: #fff; background: var(--orange); box-shadow: 0 6px 14px rgba(255, 121, 11, .22); }
.group-pin-button:disabled { cursor: wait; opacity: .7; }
.group-pin-button:focus-visible { outline: 3px solid #74a9ff; outline-offset: 2px; }
.group-card { cursor: grab; user-select: none; -webkit-touch-callout: none; }
.group-card[hidden] { display: none; }
.group-card.is-dragging { position: fixed; z-index: 30; margin: 0; border: 1px solid #a9c9f8; border-radius: 17px; background: #fff; box-shadow: 0 20px 45px rgba(8, 46, 99, .25); cursor: grabbing; pointer-events: none; }
.group-drag-placeholder { border: 2px dashed #8eb8f5; border-radius: 17px; background: #eef5ff; }
body.is-reordering-groups { cursor: grabbing; user-select: none; }
.group-card-error { margin: 8px 0; }
.alphabet-rail { position: sticky; top: calc(var(--app-header-height, 200px) + 8px); display: grid; gap: 1px; justify-items: center; padding: 3px 0; border-radius: 999px; background: rgba(255, 255, 255, .72); }
.alphabet-rail button { width: 18px; min-height: 14px; padding: 0; border: 0; border-radius: 999px; color: var(--blue); background: transparent; cursor: pointer; font-size: .55rem; font-weight: 900; line-height: 1; }
.alphabet-rail button:active, .alphabet-rail button:focus-visible { color: #fff; background: var(--blue); outline: 0; }

.empty-state, .placeholder-panel { min-height: 280px; padding: 45px 28px; border: 1px dashed #b9c6d8; border-radius: 20px; color: var(--muted); text-align: center; background: rgba(255, 255, 255, .75); }
.empty-state h2, .placeholder-panel h2 { margin: 12px 0 7px; color: var(--ink); font-size: 1.2rem; }
.empty-state p, .placeholder-panel p { margin-bottom: 0; line-height: 1.5; }
.empty-icon, .placeholder-icon { display: inline-grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: var(--blue); background: #eaf2ff; font-size: 1.65rem; font-weight: 800; }
.empty-search { padding: 22px; color: var(--muted); text-align: center; }
.calendar-panel { min-height: 380px; }
.calendar-source-picker { position: relative; flex: 0 0 auto; }
.calendar-source-picker > summary { display: flex; min-height: 36px; padding: 0 13px; align-items: center; gap: 7px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue); background: #fff; cursor: pointer; font-size: .78rem; font-weight: 850; list-style: none; }
.calendar-source-picker > summary::-webkit-details-marker { display: none; }
.calendar-source-picker > summary::after { content: '\25BE'; font-size: .7rem; }
.calendar-source-picker[open] > summary { color: #fff; background: var(--blue); }
.calendar-source-menu { position: absolute; top: calc(100% + 7px); right: 0; display: grid; width: min(330px, calc(100vw - 48px)); gap: 10px; padding: 13px; border: 1px solid #ccd8e8; border-radius: 15px; background: #fff; box-shadow: 0 18px 38px rgba(8, 46, 99, .2); }
.calendar-source-check, .calendar-group-check { display: flex; min-height: 39px; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; color: var(--ink); background: #f7f9fd; font-size: .88rem; font-weight: 750; }
.calendar-source-check input, .calendar-group-check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--blue); }
.calendar-group-search { min-height: 43px; border-radius: 11px; box-shadow: none; }
.calendar-group-search input { height: 41px; }
.calendar-group-matches { display: grid; gap: 6px; }
.calendar-group-empty, .calendar-source-status { margin: 0; color: var(--muted); font-size: .78rem; }
.calendar-source-status { font-weight: 700; }
.calendar-save-error { margin-top: 12px; }
.birthday-calendar-view, .calendar-upcoming-module { margin-top: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 10px 24px rgba(26, 55, 98, .06); }
.birthday-calendar-heading { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.birthday-calendar-heading h2 { margin: 0; color: var(--navy); font-size: 1rem; letter-spacing: -.02em; }
.calendar-period-controls { display: grid; grid-template-columns: repeat(3, 34px); align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #f7f9fd; }
.calendar-month-button, .calendar-expand-button { display: grid; width: 34px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 999px; color: var(--navy); background: transparent; cursor: pointer; line-height: 1; }
.calendar-month-button { font-size: 1.4rem; }
.calendar-expand-button svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; transition: transform .18s ease; }
.calendar-expand-button.is-expanded svg { transform: rotate(180deg); }
.calendar-month-button:hover, .calendar-expand-button:hover { background: #eaf2ff; }
.calendar-month-button:focus-visible, .calendar-expand-button:focus-visible { outline: 3px solid #74a9ff; outline-offset: 1px; }
.birthday-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.calendar-weekday { padding: 7px 2px; color: var(--muted); background: #f7f9fd; text-align: center; font-size: .61rem; font-weight: 850; text-transform: uppercase; }
.calendar-day { min-width: 0; min-height: 76px; padding: 5px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.is-outside { background: #fafbfc; }
.calendar-day-number { display: block; margin-bottom: 4px; color: var(--muted); font-size: .68rem; font-weight: 800; }
.calendar-day.is-today { position: relative; z-index: 1; background: #f1f6ff; box-shadow: inset 0 0 0 2px var(--navy); }
.calendar-day.is-today .calendar-day-number { display: grid; width: 22px; height: 22px; margin: 0 0 4px; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); }
.birthday-calendar-grid.is-week-view .calendar-day { min-height: 56px; padding: 7px 3px 5px; text-align: center; }
.birthday-calendar-grid.is-week-view .calendar-day-number { margin: 0 auto 6px; font-size: .75rem; }
.birthday-calendar-grid.is-week-view .calendar-day.is-today .calendar-day-number { margin: 0 auto 5px; }
.calendar-week-events { display: grid; width: 100%; min-height: 9px; gap: 3px; }
.calendar-week-event { display: block; overflow: hidden; width: 100%; min-width: 0; padding: 3px 4px; border: 0; border-radius: 5px; color: #fff; background: var(--orange); cursor: pointer; font-size: .55rem; font-weight: 800; line-height: 1.15; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.calendar-week-event[hidden] { display: none; }
.calendar-week-event.is-anniversary { background: var(--blue); }
.calendar-week-event:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.calendar-event-overflow { overflow: hidden; width: 100%; padding: 2px 1px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; font-size: .54rem; font-weight: 850; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-overflow:hover, .calendar-event-overflow[aria-expanded="true"] { color: var(--navy); background: #eaf2ff; }
.calendar-event-overflow:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.calendar-birthday-event { display: block; overflow: hidden; width: 100%; margin-top: 3px; padding: 3px 4px; border: 0; border-radius: 5px; color: #fff; background: var(--orange); cursor: pointer; font-size: .59rem; font-weight: 800; line-height: 1.15; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.calendar-birthday-event[hidden] { display: none; }
.calendar-birthday-event.is-anniversary { background: var(--blue); }
.calendar-month-event-overflow { margin-top: 3px; }
.calendar-upcoming-heading { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.calendar-upcoming-heading h2 { display: flex; margin: 0; align-items: center; gap: 6px; color: var(--navy); font-size: 1rem; letter-spacing: -.02em; }
.calendar-event-count { display: inline-grid; min-width: 24px; height: 24px; padding: 0 7px; place-items: center; border-radius: 999px; color: var(--blue); background: #eaf2ff; font-size: .68rem; font-weight: 900; }
.birthday-list { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.birthday-list-header, .birthday-list-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 8px; }
.birthday-list-header.has-event-column, .birthday-list-row.has-event-column { grid-template-columns: minmax(0, 1fr) 96px 96px; }
.birthday-list-header { padding: 9px 13px; color: var(--muted); background: #f7f9fd; font-size: .69rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.birthday-list-row { width: 100%; min-height: 52px; padding: 8px 13px; border: 0; border-top: 1px solid var(--line); color: var(--ink); text-align: left; background: #fff; cursor: pointer; }
.birthday-list-row:active { background: #f4f8ff; }
.birthday-list-name { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.birthday-list-date { color: var(--muted); font-size: .82rem; text-align: left; white-space: nowrap; }
.calendar-list-event { font-size: .78rem; font-weight: 800; }
.calendar-list-event.is-birthday { color: #c75d00; }
.calendar-list-event.is-anniversary { color: var(--blue); }
.calendar-list-see-more { width: 100%; min-height: 42px; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); color: var(--blue); background: #fff; cursor: pointer; font-size: .76rem; font-weight: 900; text-align: center; }
.calendar-list-see-more:hover, .calendar-list-see-more:active { background: #f4f8ff; }
.calendar-list-see-more:focus-visible { outline: 3px solid #74a9ff; outline-offset: -3px; }
.calendar-insights { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px; margin-top: 15px; }
.calendar-today-card, .calendar-summary-card { position: relative; min-width: 0; min-height: 132px; padding: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.calendar-today-card { display: flex; width: 100%; align-items: flex-start; flex-direction: column; color: #fff; border-color: transparent; background: linear-gradient(135deg, #8950e8, #6657df 58%, #7c5ee8); box-shadow: 0 10px 24px rgba(91, 68, 201, .2); cursor: pointer; text-align: left; }
.calendar-today-card:hover { filter: brightness(1.04); }
.calendar-today-card:active { filter: brightness(.97); }
.calendar-today-card:focus-visible, .calendar-summary-item:focus-visible { outline: 3px solid #74a9ff; outline-offset: 2px; }
.calendar-today-heading, .calendar-summary-card h2 { margin: 0; font-size: .82rem; letter-spacing: -.015em; }
.calendar-today-heading { position: relative; z-index: 1; color: #fff; font-weight: 800; }
.calendar-today-count { position: relative; z-index: 1; margin-top: 12px; font-size: 1.55rem; line-height: 1; }
.calendar-today-label { position: relative; z-index: 1; margin-top: 7px; color: rgba(255, 255, 255, .86); font-size: .7rem; font-weight: 700; }
.calendar-today-gift { position: absolute; right: -5px; bottom: -9px; width: 83px; fill: none; stroke: rgba(255, 255, 255, .14); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.calendar-summary-card { background: #fff; box-shadow: 0 10px 24px rgba(26, 55, 98, .06); }
.calendar-summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.calendar-summary-heading h2 { color: var(--navy); }
.calendar-summary-heading > span { color: var(--muted); font-size: .58rem; font-weight: 750; white-space: nowrap; }
.calendar-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 19px; }
.calendar-summary-item { display: grid; min-width: 0; min-height: 62px; padding: 5px 2px; place-items: center; gap: 3px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: center; }
.calendar-summary-item + .calendar-summary-item { border-left: 1px solid var(--line); }
.calendar-summary-item:hover, .calendar-summary-item:active { background: #f4f8ff; }
.calendar-summary-item strong { color: var(--navy); font-size: 1.05rem; line-height: 1; }
.calendar-summary-item span { overflow: hidden; max-width: 100%; color: var(--muted); font-size: .54rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.calendar-summary-item svg { width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.calendar-summary-item svg.is-birthday { color: var(--orange); }
.calendar-summary-item svg.is-anniversary { color: #9b6cff; }
.calendar-summary-item svg.is-total { color: var(--blue); }
.calendar-events-sheet { min-height: 300px; padding-top: 0; background: #f7f9fd; }
.calendar-events-dialog-header { position: relative; display: grid; min-height: 154px; margin: 0 -20px; padding: 36px 68px 23px 22px; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 15px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0c448d, #1262df); }
.calendar-events-dialog[data-insight="today"] .calendar-events-dialog-header { background: linear-gradient(135deg, #6845d8, #8b5be8); }
.calendar-events-dialog[data-insight="birthdays"] .calendar-events-dialog-header { background: linear-gradient(135deg, #e96512, #f34f88); }
.calendar-events-dialog[data-insight="anniversaries"] .calendar-events-dialog-header { background: linear-gradient(135deg, #6b4adb, #a94fc3); }
.calendar-events-dialog-header::after { position: absolute; right: -50px; bottom: -82px; width: 190px; height: 190px; border: 28px solid rgba(255, 255, 255, .08); border-radius: 50%; content: ''; pointer-events: none; }
.calendar-events-dialog-header .sheet-handle { position: absolute; top: 10px; left: 50%; z-index: 2; margin: 0; background: rgba(255, 255, 255, .52); transform: translateX(-50%); }
.calendar-events-dialog .close-button { top: 15px; z-index: 3; color: #fff; background: rgba(255, 255, 255, .17); }
.calendar-events-dialog .close-button:hover { background: rgba(255, 255, 255, .27); }
.calendar-events-dialog-icon { position: relative; z-index: 1; display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 17px; background: rgba(255, 255, 255, .17); box-shadow: 0 10px 25px rgba(21, 28, 73, .16); backdrop-filter: blur(4px); }
.calendar-events-dialog-icon svg { width: 30px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
.calendar-events-dialog-copy { position: relative; z-index: 1; min-width: 0; }
.calendar-events-dialog-copy .section-kicker { width: max-content; margin-bottom: 5px; padding: 3px 8px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .16); font-size: .62rem; letter-spacing: .075em; }
.calendar-events-dialog-header h2 { margin: 0 0 5px; color: #fff; font-size: 1.55rem; letter-spacing: -.04em; }
.calendar-events-dialog-copy > p:last-child { margin: 0; color: rgba(255, 255, 255, .86); font-size: .82rem; font-weight: 650; line-height: 1.35; }
.calendar-events-dialog-body { padding: 18px 0 3px; }
.calendar-insight-list { display: grid; gap: 10px; }
.calendar-insight-row { display: grid; width: 100%; min-height: 78px; padding: 11px 12px; grid-template-columns: 46px minmax(0, 1fr) 62px 16px; align-items: center; gap: 11px; border: 1px solid #e1e7f0; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 6px 16px rgba(25, 52, 91, .055); cursor: pointer; text-align: left; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.calendar-insight-row:hover { border-color: #cddaf0; box-shadow: 0 10px 23px rgba(25, 52, 91, .11); transform: translateY(-1px); }
.calendar-insight-row:active { background: #f8faff; box-shadow: 0 3px 9px rgba(25, 52, 91, .08); transform: translateY(0); }
.calendar-insight-row:focus-visible { outline: 3px solid #74a9ff; outline-offset: 2px; }
.calendar-insight-avatar { width: 46px; height: 46px; box-shadow: 0 5px 12px rgba(21, 43, 78, .16); font-size: .75rem; }
.calendar-insight-person { display: grid; min-width: 0; gap: 6px; }
.calendar-insight-person strong { overflow: hidden; color: var(--navy); font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-insight-meta { display: flex; min-width: 0; align-items: center; gap: 3px 6px; flex-wrap: wrap; color: var(--muted); font-size: .67rem; font-weight: 750; }
.calendar-insight-event { width: max-content; padding: 2px 7px; border-radius: 999px; color: #a74c00; background: #fff0e2; font-size: .64rem; font-weight: 850; }
.calendar-insight-event.is-anniversary { color: #6c42c7; background: #f1eaff; }
.calendar-insight-relative { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-insight-date { display: grid; width: 62px; min-height: 62px; padding: 5px 3px; place-items: center; align-content: center; gap: 0; border: 1px solid #dce6f5; border-radius: 13px; color: var(--navy); background: #f2f7ff; font-style: normal; text-align: center; }
.calendar-insight-date-month { color: var(--blue); font-size: .59rem; font-weight: 900; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.calendar-insight-row.is-birthday .calendar-insight-date { border-color: #ffe0c4; background: #fff7ef; }
.calendar-insight-row.is-birthday .calendar-insight-date-month { color: #d65d00; }
.calendar-insight-row.is-anniversary .calendar-insight-date { border-color: #e4d8ff; background: #f8f4ff; }
.calendar-insight-row.is-anniversary .calendar-insight-date-month { color: #7449ce; }
.calendar-insight-date-day { margin: 2px 0 1px; font-size: 1.25rem; font-weight: 900; line-height: 1; }
.calendar-insight-date-meta { color: var(--muted); font-size: .55rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.calendar-insight-chevron { width: 16px; fill: none; stroke: #9aa8bb; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.calendar-events-dialog-body .birthday-empty { margin: 0; background: #fff; box-shadow: 0 6px 16px rgba(25, 52, 91, .055); }
.birthday-empty { padding: 32px 18px; border: 1px dashed #b9c6d8; border-radius: 13px; color: var(--muted); background: rgba(255, 255, 255, .75); text-align: center; line-height: 1.45; }
.notice { margin: 0; padding: 14px; border: 1px solid #ffd59e; border-radius: 14px; color: #7a4400; background: #fff6e9; line-height: 1.45; }
.flash-stack { display: grid; gap: 9px; margin-top: 18px; }
.flash { margin: 0; padding: 12px 14px; border-radius: 13px; font-size: .9rem; line-height: 1.4; }
.flash-success { color: #145e20; background: #e9f8e7; border: 1px solid #b5e4af; }
.flash-error { color: #8a2731; background: #fff0f1; border: 1px solid #ffc7cc; }
.flash-info { color: #124b92; background: #eaf3ff; border: 1px solid #bfd9ff; }
.warning-dialog { width: min(calc(100% - 36px), 390px); margin: auto; padding: 0; border: 0; border-radius: 22px; color: var(--ink); background: transparent; box-shadow: 0 24px 70px rgba(7, 21, 44, .34); }
.warning-dialog::backdrop { background: rgba(7, 21, 44, .5); backdrop-filter: blur(2px); }
.warning-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 14px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: #fff; text-align: left; }
.warning-card h2 { grid-column: 2; margin: 1px 0 0; color: var(--navy); font-size: 1.25rem; letter-spacing: -.035em; }
.warning-card p { grid-column: 2; margin: 0; color: var(--muted); line-height: 1.45; }
.install-app-card { grid-template-columns: 56px minmax(0, 1fr); }
.install-app-card > div:nth-child(2) { align-self: center; }
.install-app-card h2 { grid-column: auto; margin-top: 0; }
.install-app-icon { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.install-app-instructions { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 8px; }
.install-app-instructions p { grid-column: auto; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); }
.install-app-instructions strong { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: .75rem; }
.share-app-card { grid-template-columns: 56px minmax(0, 1fr); }
.share-app-heading { align-self: center; }
.share-app-heading h2 { margin: 0; }
.share-app-icon { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.share-app-qr-wrap { display: grid; grid-column: 1 / -1; margin-top: 8px; padding: 12px; place-items: center; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.share-app-qr { display: block; width: min(230px, 70vw); height: auto; }
.share-app-card > .share-app-copy { grid-column: 1 / -1; text-align: center; }
.share-app-actions { grid-template-columns: 1fr; }
.warning-icon { display: grid; grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; place-items: center; align-self: center; border-radius: 50%; color: #fff; background: var(--orange); font-size: 1.45rem; font-weight: 900; }
.warning-actions { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 8px; }
.orange-button { min-height: 43px; border: 1px solid var(--orange); border-radius: 11px; color: #fff; background: var(--orange); box-shadow: 0 5px 13px rgba(255, 121, 11, .2); cursor: pointer; font-weight: 800; }

.contact-dialog { width: min(100%, 680px); max-width: 680px; min-height: 0; max-height: min(89dvh, 760px); margin: auto; padding: 0; border: 0; border-radius: 24px 24px 0 0; color: var(--ink); background: transparent; box-shadow: 0 -6px 35px rgba(10, 25, 53, .24); }
.contact-dialog::backdrop { background: rgba(7, 21, 44, .48); backdrop-filter: blur(2px); }
.contact-sheet { position: relative; overflow: auto; max-height: min(89dvh, 760px); padding: 11px 20px calc(28px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; }
.sheet-sticky-header { position: sticky; top: -11px; z-index: 6; margin: 0 -20px; padding: 0 20px; background: #fff; }
#contact-dialog { width: min(100vw, 680px); height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: 0 0 35px rgba(10, 25, 53, .2); }
#contact-dialog .contact-sheet { height: 100%; max-height: none; padding-top: 0; border-radius: 0; overscroll-behavior: contain; }
#contact-dialog .sheet-sticky-header { top: 0; padding-top: max(11px, env(safe-area-inset-top)); }
#contact-dialog .close-button { top: calc(max(11px, env(safe-area-inset-top)) + 8px); }
.sheet-handle { width: 40px; height: 4px; margin: 0 auto 21px; border-radius: 999px; background: #d8dee8; }
.close-button { position: absolute; top: 19px; right: 16px; width: 34px; height: 34px; color: var(--navy); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.detail-hero { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: start; column-gap: 16px; padding: 0 52px 22px 0; border-bottom: 1px solid var(--line); }
.detail-avatar { grid-column: 1; grid-row: 1 / span 3; width: 58px; height: 58px; margin: 0; align-self: center; font-size: 1rem; }
.detail-hero > :not(.detail-avatar) { grid-column: 2; min-width: 0; }
.detail-hero h2 { margin: 0 0 6px; overflow-wrap: anywhere; font-size: 1.65rem; letter-spacing: -.045em; }
.detail-hero > p:last-child { margin: 0; color: var(--muted); }
.detail-body { padding-top: 20px; }
.detail-section { margin-bottom: 24px; }
.detail-section h3 { margin: 0 0 8px; color: var(--navy); font-size: .78rem; letter-spacing: .075em; text-transform: uppercase; }
.detail-row { justify-content: space-between; gap: 24px; min-height: 45px; border-bottom: 1px solid #edf0f5; font-size: .9rem; }
.detail-row span { flex: 0 0 40%; color: var(--muted); }
.detail-row strong, .detail-row a { overflow-wrap: anywhere; font-weight: 650; text-align: right; }
.detail-row a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
#contact-dialog .detail-body { display: grid; gap: 14px; padding-top: 18px; }
#contact-dialog .detail-section { overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 7px 18px rgba(26, 55, 98, .055); }
#contact-dialog .detail-section h3 { display: flex; min-height: 44px; margin: 0; padding: 9px 12px; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: .84rem; letter-spacing: 0; text-transform: none; }
#contact-dialog .detail-section-icon { display: grid; width: 25px; height: 25px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--blue); }
#contact-dialog .detail-section-icon.is-profile { background: var(--orange); }
#contact-dialog .detail-section-icon.is-groups { background: var(--green); }
#contact-dialog .detail-section-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
#contact-dialog .detail-row { min-height: 49px; padding: 7px 12px; gap: 14px; }
#contact-dialog .detail-row:last-child { border-bottom: 0; }
#contact-dialog .detail-row span { flex: initial; }
#contact-dialog .detail-row > .detail-row-label { display: flex; min-width: 0; align-items: center; gap: 9px; flex: 1 1 46%; color: var(--muted); }
#contact-dialog .detail-row-label-text { overflow: hidden; min-width: 0; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
#contact-dialog .detail-row-icon { display: grid; width: 20px; height: 20px; place-items: center; flex: 0 0 20px; color: #6d7d94; }
#contact-dialog .detail-row-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
#contact-dialog .detail-row > strong, #contact-dialog .detail-row > a { min-width: 0; flex: 1 1 54%; color: var(--ink); font-weight: 700; text-align: right; }
#contact-dialog .detail-row > a { color: var(--blue); }
#contact-dialog .detail-row.is-multiline { align-items: flex-start; padding-top: 11px; padding-bottom: 11px; }
#contact-dialog .detail-row.is-multiline > .detail-row-label { padding-top: 1px; }
#contact-dialog .detail-row.is-multiline > strong, #contact-dialog .detail-row.is-multiline > a { line-height: 1.45; white-space: pre-line; }
#contact-dialog .detail-map-preview { height: 168px; margin: 10px 10px 0; overflow: hidden; border: 1px solid #d7e0ed; border-radius: 12px; background: #edf2f8; }
#contact-dialog .detail-map-preview iframe { display: block; width: 100%; height: 100%; border: 0; }
#contact-dialog .contact-groups-list { border: 0; border-radius: 0; }
.loading { color: var(--muted); }
.new-contact-button, .new-group-button { position: fixed; right: max(20px, calc((100vw - 680px) / 2 + 20px)); bottom: calc(40px + env(safe-area-inset-bottom)); z-index: 10; min-height: 47px; padding: 0 18px; border: 1px solid var(--navy); border-radius: 999px; color: #fff; background: var(--navy); box-shadow: 0 12px 28px rgba(8, 46, 99, .24); cursor: pointer; font-weight: 850; }
.new-contact-hero { padding-right: 44px; }
.new-contact-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 17px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: #f7f9fd; }
.new-contact-tab { min-height: 50px; padding: 0 5px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: .72rem; font-weight: 800; line-height: 1.15; }
.new-contact-tab.is-active { color: #fff; background: var(--navy); box-shadow: 0 5px 13px rgba(8, 46, 99, .18); }
.new-contact-panel { padding-top: 16px; }
.new-contact-panel[hidden] { display: none; }
.new-contact-form { box-shadow: none; }
.new-contact-form h3 { margin: 0; color: var(--navy); font-size: 1.1rem; letter-spacing: -.025em; }
.new-contact-form label { display: grid; gap: 7px; color: var(--ink); font-size: .86rem; font-weight: 750; }
.contact-import-options { display: grid; gap: 11px; }
.contact-import-options[hidden], .contact-import-review[hidden], .contact-picker-button[hidden], .contact-import-error[hidden], .contact-import-form input[type="file"][hidden] { display: none; }
.contact-picker-button, .new-contact-form .contact-file-button { display: flex; width: 100%; min-height: 49px; padding: 0 14px; align-items: center; justify-content: center; gap: 9px; text-align: center; }
.contact-picker-button svg, .contact-file-button svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.contact-import-capability { margin: -2px 0 1px; color: var(--muted); font-size: .78rem; line-height: 1.4; text-align: center; }
.contact-import-divider { display: flex; align-items: center; gap: 10px; color: #97a1b0; font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.contact-import-divider::before, .contact-import-divider::after { height: 1px; flex: 1 1 auto; background: var(--line); content: ''; }
.contact-import-privacy { margin: 0; padding: 11px 12px; border-radius: 11px; color: #536071; background: #f4f7fb; font-size: .76rem; line-height: 1.45; }
.contact-import-error { margin: 0; }
.contact-import-review { display: grid; gap: 13px; padding-top: 3px; }
.contact-import-review-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.contact-import-review-heading h3 { margin-bottom: 3px; }
.contact-import-review-heading p { margin: 0; }
.contact-import-list { display: grid; max-height: 310px; overflow: auto; border: 1px solid var(--line); border-radius: 13px; background: #fff; overscroll-behavior: contain; }
.new-contact-form .contact-import-choice { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 62px; padding: 9px 11px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.new-contact-form .contact-import-choice:last-child { border-bottom: 0; }
.new-contact-form .contact-import-choice.is-unavailable { color: #7d8796; background: #f8f9fb; cursor: default; }
.auth-card .contact-import-choice input[type="checkbox"] { width: 20px; min-width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; border: 0; border-radius: 4px; box-shadow: none; accent-color: var(--blue); }
.contact-import-contact-copy { display: grid; min-width: 0; gap: 3px; }
.contact-import-contact-copy strong, .contact-import-contact-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-import-contact-copy strong { color: var(--ink); font-size: .88rem; }
.contact-import-contact-copy span { color: var(--muted); font-size: .74rem; font-weight: 550; }
.contact-import-badge { padding: 4px 7px; border-radius: 999px; color: #8a4c00; background: #fff0dc; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.contact-detail-actions { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.contact-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 13px 8px; border: 1px solid #e1e8f2; border-radius: 18px; background: #fff; box-shadow: 0 7px 20px rgba(24, 51, 90, .065); }
.contact-quick-action { display: grid; width: 100%; min-width: 0; min-height: 66px; padding: 4px 2px; place-items: center; align-content: center; gap: 5px; border: 0; border-radius: 13px; color: var(--muted); background: transparent; cursor: pointer; font-size: .67rem; font-weight: 800; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.contact-quick-action svg { width: 41px; height: 41px; padding: 9px; border: 1px solid #d8dee8; border-radius: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; transition: box-shadow .16s ease, transform .16s ease; }
.contact-quick-action.is-email.is-available { color: var(--blue); }
.contact-quick-action.is-email.is-available svg { border-color: #b9d5ff; background: #eaf2ff; }
.contact-quick-action.is-phone.is-available { color: #23851e; }
.contact-quick-action.is-phone.is-available svg { border-color: #a9dfa3; background: #e7f8e5; }
.contact-quick-action.is-sms.is-available { color: #cf5e00; }
.contact-quick-action.is-sms.is-available svg { border-color: #ffd09f; background: #fff3e7; }
.contact-quick-action.is-map.is-available { color: #5c43bd; }
.contact-quick-action.is-map.is-available svg { border-color: #d8ccff; background: #f2edff; }
.contact-quick-action.is-available:hover { background: #f7f9fd; transform: translateY(-1px); }
.contact-quick-action.is-available:hover svg { box-shadow: 0 6px 14px rgba(24, 51, 90, .13); transform: scale(1.04); }
.contact-quick-action:focus-visible { outline: 3px solid #74a9ff; outline-offset: 1px; }
.contact-quick-action.is-unavailable { color: #9ba5b3; cursor: not-allowed; }
.contact-quick-action.is-unavailable svg { background: #f1f3f6; }
.contact-quick-action-label { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.contact-groups-list { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.contact-group-row { display: flex; width: 100%; min-height: 52px; padding: 9px 12px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: #fff; text-align: left; }
.contact-group-row:last-child { border-bottom: 0; }
.contact-group-row.is-openable { cursor: pointer; }
.contact-group-row.is-openable:active { background: #f2f7ff; }
.contact-group-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#contact-dialog.is-contact-profile .contact-sheet { background: #f4f7fb; }
#contact-dialog.is-contact-profile .sheet-sticky-header { overflow: hidden; background: radial-gradient(circle at 88% 18%, rgba(91, 180, 255, .35), transparent 29%), linear-gradient(135deg, #082e63, #1262df); box-shadow: 0 8px 24px rgba(8, 46, 99, .18); }
#contact-dialog.is-contact-profile .sheet-handle { background: rgba(255, 255, 255, .52); }
#contact-dialog.is-contact-profile .close-button { color: #fff; background: rgba(255, 255, 255, .16); }
#contact-dialog.is-contact-profile .close-button:hover { background: rgba(255, 255, 255, .26); }
#contact-dialog.is-contact-profile .detail-hero { grid-template-columns: 70px minmax(0, 1fr); min-height: 100px; padding: 2px 54px 23px 2px; column-gap: 17px; border-bottom: 0; }
#contact-dialog.is-contact-profile .detail-avatar { width: 70px; height: 70px; border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 22px rgba(5, 29, 66, .25); font-size: 1.12rem; }
#contact-dialog.is-contact-profile .detail-hero .section-kicker { width: max-content; margin-bottom: 5px; padding: 3px 8px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .16); font-size: .62rem; }
#contact-dialog.is-contact-profile .detail-hero h2 { margin-bottom: 7px; color: #fff; font-size: clamp(1.35rem, 6vw, 1.75rem); }
#contact-dialog.is-contact-profile .detail-hero > p:last-child { width: max-content; max-width: 100%; margin: 0; padding: 4px 9px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .1); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
#contact-dialog.is-contact-profile .detail-body { gap: 13px; padding-top: 16px; }
#contact-dialog.is-contact-profile .detail-section { border-color: #dfe6f0; border-radius: 18px; box-shadow: 0 7px 20px rgba(26, 55, 98, .065); }
#contact-dialog.is-contact-profile .detail-section h3 { min-height: 48px; padding: 10px 13px; border-bottom-color: #e6ebf3; background: #fafcff; font-size: .86rem; }
#contact-dialog.is-contact-profile .detail-section-icon { width: 29px; height: 29px; border-radius: 9px; box-shadow: 0 4px 9px rgba(24, 51, 90, .12); }
#contact-dialog.is-contact-profile .detail-section-icon svg { width: 16px; height: 16px; }
#contact-dialog.is-contact-profile .detail-row { min-height: 56px; padding: 9px 14px; }
#contact-dialog.is-contact-profile .detail-row > .detail-row-label { gap: 10px; }
#contact-dialog.is-contact-profile .detail-row-icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; color: #58708e; background: #f0f4f9; }
#contact-dialog.is-contact-profile .detail-row-icon svg { width: 15px; height: 15px; }
#contact-dialog.is-contact-profile .detail-row > strong, #contact-dialog.is-contact-profile .detail-row > a { font-weight: 750; }
#contact-dialog.is-contact-profile .detail-row > a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
#contact-dialog.is-contact-profile .detail-map-preview { height: 188px; margin: 12px 12px 2px; border-radius: 15px; box-shadow: 0 5px 14px rgba(24, 51, 90, .1); }
#contact-dialog.is-contact-profile .contact-groups-list { display: grid; gap: 8px; padding: 10px; background: #fff; }
#contact-dialog.is-contact-profile .contact-group-row { min-height: 56px; padding: 9px 10px; border: 1px solid #e5eaf2; border-radius: 13px; background: #f9fbfe; }
#contact-dialog.is-contact-profile .contact-group-row.is-openable::after { margin-left: auto; color: #94a3b8; content: '\203A'; font-size: 1.45rem; line-height: 1; }
#contact-dialog.is-contact-profile .contact-group-row.is-openable:hover { border-color: #cfdbec; background: #f1f6ff; }
#contact-dialog.is-contact-profile .contact-group-row.is-openable:focus-visible { outline: 3px solid #74a9ff; outline-offset: 1px; }
.notification-hero-icon svg { width: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.notification-error { margin: 15px 0 0; padding: 11px 13px; border: 1px solid #ffc7cc; border-radius: 12px; color: #8a2731; background: #fff0f1; font-size: .86rem; }
.notification-list { display: grid; gap: 10px; padding-top: 17px; }
.notification-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 7px 18px rgba(26, 55, 98, .05); }
.notification-avatar { width: 44px; height: 44px; font-size: .78rem; }
.notification-copy { display: grid; min-width: 0; gap: 3px; }
.notification-copy strong { color: var(--ink); font-size: .92rem; }
.notification-copy span { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.notification-actions { display: flex; gap: 7px; }
.notification-action { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-size: 1.2rem; font-weight: 900; line-height: 1; }
.notification-action.is-accept { border-color: #a9dfa3; color: #197127; background: #e7f8e5; }
.notification-action.is-decline { border-color: #f1b8be; color: #a82e3b; background: #fff0f1; }
.notification-action.is-dismiss { color: var(--muted); background: #f4f6f9; }
.notification-action:disabled { cursor: wait; opacity: .55; }
.notification-empty { display: grid; gap: 5px; padding: 30px 18px; border: 1px dashed #b9c6d8; border-radius: 16px; text-align: center; }
.notification-empty strong { color: var(--navy); }
.notification-empty span { color: var(--muted); font-size: .84rem; }
.new-group-sheet .detail-hero { padding-right: 44px; }
.new-group-card { margin-top: 20px; box-shadow: none; }
.new-group-card label { display: grid; gap: 7px; color: var(--ink); font-size: .86rem; font-weight: 750; }
.group-members-list { box-shadow: none; }
.group-member-search-wrap { position: relative; z-index: 4; }
.group-member-search-field { min-height: 45px; box-shadow: none; }
.group-member-search-field input { height: 45px; }
.group-member-search-results { top: calc(100% - 2px); right: 0; left: 0; z-index: 8; max-height: min(350px, 52dvh); }
.group-member-search-results[hidden] { display: none; }
.group-member-search-result { background: #fff; }
.group-members-shell { gap: 8px; }
.group-member-rail { top: calc(var(--detail-header-height, 120px) + 8px); }
.group-card { scroll-margin-top: calc(var(--app-header-height, 200px) + 8px); }
.member-name-line { display: flex; min-width: 0; align-items: center; gap: 7px; }
.contact-copy .member-name-line { overflow: visible; color: var(--ink); font-size: inherit; white-space: normal; }
.member-name-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-role-badge { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; color: var(--blue); background: #eaf2ff; font-size: .65rem; font-weight: 850; line-height: 1.2; white-space: nowrap; }
.group-detail { display: grid; gap: 16px; }
.group-detail-nav { display: flex; align-items: center; margin-bottom: -7px; }
.group-back-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); background: #fff; box-shadow: 0 5px 13px rgba(8, 46, 99, .1); cursor: pointer; font-weight: 850; }
.group-back-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.group-detail-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: #f7f9fd; }
.group-detail-tab { min-height: 40px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; }
.group-detail-tab.is-active { color: #fff; background: var(--navy); box-shadow: 0 5px 13px rgba(8, 46, 99, .18); }
.group-tab-panel { position: relative; display: grid; gap: 13px; min-height: 180px; padding-bottom: 62px; }
.group-tab-panel[hidden] { display: none; }
.group-settings-panel { gap: 15px; padding-bottom: 0; }
.partner-groups-panel { padding-bottom: 0; }
.partner-group-section { display: grid; gap: 9px; padding-top: 2px; }
.partner-group-section + .partner-group-section { padding-top: 13px; border-top: 1px solid #edf0f5; }
.partner-group-section h3 { margin-bottom: 0; color: var(--navy); font-size: 1rem; }
.partner-group-list { box-shadow: none; }
.partner-group-card:disabled { cursor: not-allowed; opacity: .62; }
.partner-name-row { display: flex; align-items: center; gap: 9px; min-height: 32px; color: var(--ink); font-size: .9rem; }
.limited-member-row { padding: 10px 0; border-bottom: 1px solid #edf0f5; }
.limited-member-row .member-name-line { flex: 1 1 auto; }
.mini-avatar { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--navy); background: #edf3ff; font-size: .68rem; font-weight: 900; }
.invite-button { position: absolute; right: 0; bottom: 0; min-height: 44px; padding: 0 18px; border: 1px solid var(--green); border-radius: 999px; color: #fff; background: var(--green); box-shadow: 0 10px 24px rgba(50, 169, 39, .22); cursor: pointer; font-weight: 850; }
.invite-notice { margin-bottom: 0; }
.group-settings-form { display: grid; gap: 10px; padding-top: 8px; border-top: 1px solid #edf0f5; }
.group-settings-form label { display: grid; gap: 7px; color: var(--ink); font-size: .86rem; font-weight: 750; }
.group-settings-form input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #d9e0e9; border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-weight: 500; }
.group-role-controls { display: grid; gap: 10px; padding-top: 8px; border-top: 1px solid #edf0f5; }
.group-role-controls h3 { margin-bottom: -2px; }
.role-bucket-list { display: grid; gap: 7px; padding: 10px 0 2px; }
.role-bucket-list > strong { color: var(--navy); font-size: .92rem; }
.role-chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.role-chip { padding: 6px 9px; border-radius: 999px; color: var(--navy); background: #edf3ff; font-size: .78rem; font-weight: 800; }
.role-bucket-editor { border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.role-bucket-editor summary { min-height: 40px; padding: 10px 12px; color: var(--blue); cursor: pointer; font-weight: 850; }
.role-picker-form { display: grid; gap: 11px; padding: 0 12px 12px; }
.role-picker-search { min-height: 43px; border-radius: 11px; box-shadow: none; }
.role-picker-search input { height: 41px; }
.role-picker-choices { display: grid; gap: 8px; }
.role-check-row { display: flex; min-height: 38px; align-items: center; gap: 9px; padding: 5px 7px; border-radius: 9px; color: var(--ink); background: #f8faff; font-size: .88rem; font-weight: 700; }
.role-check-row input { width: 18px; height: 18px; accent-color: var(--blue); }
.role-picker-status { margin: -2px 0 0; color: var(--muted); font-size: .76rem; font-weight: 700; }
.role-picker-empty { margin: 4px 0; }

.auth-intro { margin: 52px 0 24px; }
.auth-intro h1 { margin-bottom: 11px; }
.auth-intro > p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.5; }
.compact-intro { margin-top: 35px; }
.auth-card { display: grid; gap: 15px; padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 12px 28px rgba(26, 55, 98, .07); }
.auth-card h2 { margin: 0 0 2px; color: var(--navy); font-size: 1.25rem; letter-spacing: -.035em; }
.auth-card > label, .field-grid > label { display: grid; gap: 7px; color: var(--ink); font-size: .86rem; font-weight: 750; }
.auth-card input { width: 100%; min-height: 47px; padding: 0 12px; border: 1px solid #d9e0e9; border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-weight: 500; }
.password-input-wrap { position: relative; display: block; }
.auth-card .password-input-wrap input { padding-right: 49px; }
.password-visibility-button { position: absolute; top: 50%; right: 5px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-visibility-button:hover, .password-visibility-button:focus-visible { color: var(--blue); background: #edf3ff; outline: 0; }
.password-visibility-button svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.password-visibility-button .password-eye-hide, .password-visibility-button[aria-pressed="true"] .password-eye-show { display: none; }
.password-visibility-button[aria-pressed="true"] .password-eye-hide { display: block; }
.profile-form input::placeholder { color: #9ca5b3; font-style: italic; opacity: 1; }
.profile-form input.is-profile-locked { color: #536071; background: #f5f7fb; cursor: default; }
.auth-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #dceaff; }
.auth-card .role-picker-search input { height: 41px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.auth-card .role-picker-search input:focus { border: 0; box-shadow: none; }
.auth-card .role-check-row input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0; flex: 0 0 18px; border: 0; border-radius: 3px; box-shadow: none; accent-color: var(--blue); }
.auth-card .role-check-row span { min-width: max-content; flex: 1 1 auto; white-space: nowrap; }
.optional { color: var(--muted); font-size: .75rem; font-weight: 600; }
.primary-button, .secondary-button, .danger-button, .text-button { min-height: 43px; border-radius: 11px; cursor: pointer; font-weight: 800; }
.primary-button { border: 1px solid var(--navy); color: #fff; background: var(--navy); box-shadow: 0 5px 13px rgba(8, 46, 99, .18); }
.primary-button:disabled { border-color: #c7ced9; color: #fff; background: #aab3c1; box-shadow: none; cursor: not-allowed; }
.secondary-button { padding: 0 13px; border: 1px solid var(--blue); color: var(--blue); background: #fff; }
.danger-button { padding: 0 13px; border: 1px solid #e48a94; color: #a82e3b; background: #fff; }
.text-button { min-height: 32px; padding: 0; border: 0; color: var(--blue); background: transparent; }
.form-footer { margin: 0; color: var(--muted); font-size: .9rem; text-align: center; }
.verification-choice { display: grid; gap: 8px; margin: 2px 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.verification-choice legend { padding: 0 4px; color: var(--muted); font-size: .83rem; font-weight: 750; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 650; }
.check-row input { width: 18px; min-height: 18px; }
.verification-list { display: grid; gap: 14px; }
.verification-later-button { display: flex; width: 100%; margin-top: 17px; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.method-card { display: grid; grid-template-columns: 1fr auto; gap: 13px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 9px 22px rgba(26, 55, 98, .05); }
.method-card strong { display: block; overflow-wrap: anywhere; }
.method-card .missing-method-value { color: #9ca5b3; font-style: italic; }
.status-badge { align-self: start; padding: 5px 8px; border-radius: 999px; color: #8a5a00; background: #fff4da; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.status-badge.is-verified { color: #197127; background: #e7f8e5; }
.verify-method-actions { display: flex; grid-column: 1 / -1; align-items: center; gap: 18px; }
.verify-contact-error { grid-column: 1 / -1; }
.verify-contact-edit-form { display: grid; grid-column: 1 / -1; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #f8faff; }
.verify-contact-edit-form[hidden] { display: none; }
.verify-contact-edit-form label { display: grid; gap: 7px; color: var(--ink); font-size: .86rem; font-weight: 750; }
.verify-contact-edit-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.verify-contact-edit-actions .text-button { padding: 0 5px; }
.code-form { display: flex; grid-column: 1 / -1; gap: 8px; }
.code-form input { min-width: 0; flex: 1; min-height: 42px; padding: 0 10px; border: 1px solid #d9e0e9; border-radius: 10px; }
.centered { margin: 22px 0; }
.profile-heading { margin-bottom: 20px; }
.profile-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.profile-form { margin-bottom: 17px; }
.profile-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-card-heading h2 { margin: 0; }
.profile-icon-card { position: relative; overflow: hidden; gap: 15px; border-color: #dce6f5; background: radial-gradient(circle at 100% 0, rgba(18, 98, 223, .1), transparent 32%), #fff; }
.profile-icon-card .profile-card-heading { align-items: flex-start; }
.profile-icon-card .profile-card-heading .eyebrow { margin-bottom: 4px; }
.profile-icon-current { width: 74px; height: 74px; border: 4px solid #fff; box-shadow: 0 8px 22px rgba(8, 46, 99, .2); font-size: 1.1rem; }
.profile-icon-picker-row { display: flex; min-width: 0; align-items: center; gap: 11px; }
.profile-icon-choose { display: inline-flex; min-height: 43px; padding: 0 14px; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; cursor: pointer; text-align: center; }
.profile-icon-choose svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.profile-icon-file-name { overflow: hidden; min-width: 0; color: var(--muted); font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.profile-icon-editor { display: grid; gap: 13px; padding-top: 2px; }
.profile-icon-editor[hidden] { display: none; }
.profile-icon-crop-stage { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border: 5px solid #fff; border-radius: 20px; background: #e8edf5; box-shadow: 0 10px 28px rgba(8, 46, 99, .2); touch-action: none; }
.profile-icon-crop-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: 0; touch-action: none; }
.profile-icon-crop-stage canvas.is-dragging { cursor: grabbing; }
.profile-icon-crop-stage canvas:focus-visible { box-shadow: inset 0 0 0 4px #74a9ff; }
.profile-icon-crop-grid { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .72); background: linear-gradient(90deg, transparent 33.1%, rgba(255, 255, 255, .48) 33.3%, rgba(255, 255, 255, .48) 33.7%, transparent 33.9%, transparent 66.1%, rgba(255, 255, 255, .48) 66.3%, rgba(255, 255, 255, .48) 66.7%, transparent 66.9%), linear-gradient(transparent 33.1%, rgba(255, 255, 255, .48) 33.3%, rgba(255, 255, 255, .48) 33.7%, transparent 33.9%, transparent 66.1%, rgba(255, 255, 255, .48) 66.3%, rgba(255, 255, 255, .48) 66.7%, transparent 66.9%); box-shadow: inset 0 0 55px rgba(5, 22, 48, .18); pointer-events: none; }
.profile-icon-crop-help { margin: -2px 0 0; color: var(--muted); font-size: .78rem; font-weight: 700; text-align: center; }
.profile-icon-zoom { display: grid; grid-template-columns: 24px auto minmax(0, 1fr); align-items: center; gap: 8px; color: var(--navy); font-size: .82rem; font-weight: 850; }
.profile-icon-zoom svg { width: 22px; fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.profile-icon-zoom input { width: 100%; min-width: 0; accent-color: var(--blue); }
.profile-icon-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-icon-actions button { width: 100%; }
.profile-icon-status { min-height: 20px; margin: -3px 0 0; color: var(--muted); font-size: .8rem; font-weight: 750; text-align: center; }
.profile-icon-status.is-error { color: #a82e3b; }
.profile-icon-status.is-success { color: #197127; }
.profile-edit-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--orange); border-radius: 999px; color: var(--orange); background: #fff8f1; cursor: pointer; font-size: .78rem; font-weight: 850; white-space: nowrap; }
.group-settings-card { margin: 0; }
.group-settings-card .group-settings-form { padding-top: 0; border-top: 0; }
.group-settings-card .detail-row { min-height: 42px; }
.group-settings-card .detail-row:first-of-type { margin-top: -3px; }
.group-details-card > label { margin-top: 2px; }
.group-sharing-card { display: grid; gap: 13px; }
.group-sharing-bucket { display: grid; gap: 8px; padding-top: 5px; }
.group-sharing-bucket h3 { margin: 0; color: var(--navy); font-size: .92rem; }
.group-sharing-list { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.group-sharing-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 8px 11px; background: #fff; }
.group-sharing-row + .group-sharing-row { border-top: 1px solid #edf0f5; }
.group-sharing-copy { display: grid; min-width: 0; gap: 2px; }
.group-sharing-copy strong, .group-sharing-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-sharing-copy span { color: var(--muted); font-size: .76rem; }
.group-sharing-remove { min-height: 30px; color: #a82e3b; }
.group-sharing-add-form { padding-top: 0; border-top: 0; }
.group-sharing-add-form .secondary-button { width: 100%; }
.group-membership-card .group-settings-form, .group-membership-card .danger-button { width: 100%; }
#profile-icon, #profile-details, #email-verification, #phone-verification, #change-password { scroll-margin-top: 18px; }
#shared-contact-privacy { scroll-margin-top: 18px; }
.shared-privacy-form { display: grid; gap: 13px; }
.shared-privacy-options { display: grid; gap: 9px; }
.privacy-check-row { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 750; }
.group-settings-form .privacy-check-row { display: flex; grid-template-columns: none; align-items: center; }
.privacy-check-row input { width: 18px; min-height: 18px; accent-color: var(--blue); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.muted-copy { margin: -4px 0 2px; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.method-management { gap: 12px; }
.inline-card-error { margin: 0; }
.method-block { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid #edf0f5; }
.method-block:first-of-type { border-top: 0; padding-top: 0; }
.method-block.is-missing .method-line span:not(.status-badge) { color: #9ca5b3; font-style: italic; }
.method-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 5px; }
.method-line div { display: grid; gap: 3px; min-width: 0; }
.method-line span { overflow-wrap: anywhere; color: var(--muted); font-size: .86rem; }
.method-line .status-badge { color: #8a5a00; }
.method-line .status-badge.is-verified { color: #197127; }
.method-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.contact-method-form { display: grid; gap: 12px; padding-top: 6px; }
.contact-method-form > label { display: grid; gap: 7px; color: var(--ink); font-size: .86rem; font-weight: 750; }
.attach-method-heading { padding-top: 0; }
.method-status-line { justify-content: flex-end; }
.attach-method-form { padding-top: 0; }
.verification-control-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; gap: 9px; align-items: stretch; }
.verification-control-grid > form { display: contents; }
.verification-control-grid .contact-method-input { grid-column: 1; grid-row: 1; min-width: 0; }
.verification-control-grid .update-method-button { grid-column: 1; grid-row: 2; }
.verification-control-grid .verification-code-input { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
.verification-control-grid .verify-method-button { grid-column: 2 / 4; grid-row: 2; width: 100%; }
.verification-control-grid .send-code-button { grid-column: 3; grid-row: 1; }
.verification-control-grid button { min-width: 0; padding-right: 9px; padding-left: 9px; font-size: .78rem; line-height: 1.1; }
.verification-control-grid:not(.has-code-controls) .contact-method-input,
.verification-control-grid:not(.has-code-controls) .update-method-button { grid-column: 1 / -1; }
.change-password-form { display: grid; gap: 13px; }
.change-password-form label { display: grid; gap: 7px; color: var(--ink); font-size: .86rem; font-weight: 750; }
.password-2fa-panel { display: grid; gap: 14px; }
.password-2fa-code-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.password-2fa-code-form label { display: grid; min-width: 0; gap: 7px; color: var(--ink); font-size: .86rem; font-weight: 750; }
.password-2fa-code-form input { min-width: 0; }
.password-2fa-code-form .primary-button { min-height: 47px; white-space: nowrap; }
.password-2fa-send-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.password-2fa-send-row > strong { color: var(--navy); font-size: .86rem; }
.password-2fa-send-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.password-2fa-send-actions .secondary-button { min-width: 88px; }
.password-2fa-timer { min-height: 18px; margin: -5px 0 0; color: var(--muted); font-size: .78rem; font-weight: 700; text-align: right; }
.password-2fa-cancel-form { text-align: center; }
.profile-changelog-link { display: flex; width: calc(100% - 44px); box-sizing: border-box; align-items: center; justify-content: center; margin: -2px auto 17px; text-align: center; text-decoration: none; }
.changelog-card { margin-bottom: 17px; }
.changelog-date { margin-top: -9px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.changelog-notes { margin: 0; padding-left: 21px; color: var(--muted); line-height: 1.55; }
.changelog-section { margin-top: 22px; }
.changelog-section h3 { margin-bottom: 8px; color: var(--navy); font-size: 1rem; }
.changelog-section .changelog-notes { display: grid; gap: 6px; }
.changelog-known-issues { padding-top: 18px; border-top: 1px solid var(--line); }
.profile-share-button { display: inline-flex; min-height: 39px; padding: 0 14px; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid var(--navy); border-radius: 999px; color: #fff; background: var(--navy); box-shadow: 0 8px 20px rgba(8, 46, 99, .2); cursor: pointer; font-size: .8rem; font-weight: 850; }
.profile-share-button svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.profile-share-button:focus-visible { outline: 3px solid #74a9ff; outline-offset: 2px; }
.logout-form { margin: 24px 0 6px; text-align: center; }

@media (min-width: 681px) {
  body { padding: 25px 0; }
  .app-shell { min-height: calc(100dvh - 50px); border-radius: 28px; box-shadow: 0 18px 55px rgba(24, 51, 90, .12); }
  .app-header { border-radius: 28px 28px 0 0; }
  .contact-dialog:not(#contact-dialog) { border-radius: 24px; }
  .contact-dialog:not(#contact-dialog) .contact-sheet { border-radius: 24px; }
}

@media (max-width: 520px) {
  .topbar .brand > span:last-child { display: none; }
  .contact-card[data-contact-id] > .contact-copy > strong {
    overflow: visible;
    line-height: 1.25;
    overflow-wrap: normal;
    text-overflow: clip;
    white-space: normal;
    word-break: normal;
    hyphens: none;
  }
  .contact-card[data-contact-id] > .avatar,
  .contact-card[data-contact-id] > .contact-card-quick-actions { align-self: center; }
  .password-2fa-code-form { grid-template-columns: 1fr; }
  .password-2fa-code-form .primary-button { width: 100%; }
  .password-2fa-send-row { align-items: stretch; flex-direction: column; }
  .password-2fa-send-actions { justify-content: stretch; }
  .password-2fa-send-actions form { flex: 1 1 0; }
  .password-2fa-send-actions .secondary-button { width: 100%; }
  .password-2fa-timer { text-align: left; }
}

@media (max-width: 390px) {
  .app-shell { --shell-padding: 15px; }
  .topbar { gap: 8px; }
  .topbar .brand > span:last-child { display: none; }
  .topbar-tagline { font-size: .58rem; letter-spacing: .035em; }
  .tab { padding-right: 3px; padding-left: 3px; gap: 4px; font-size: .73rem; }
  .tab svg { width: 27px; height: 27px; padding: 5px; }
  .contact-card[data-contact-id], .group-member-card { gap: 9px; padding-right: 10px; padding-left: 10px; }
  .contact-card-quick-actions { gap: 3px; }
  .contact-card-quick-action { width: 29px; height: 29px; }
  .contact-card-quick-action svg { width: 15px; }
  .calendar-events-dialog-header { padding-right: 58px; padding-left: 18px; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .calendar-events-dialog-icon { width: 48px; height: 48px; border-radius: 15px; }
  .calendar-events-dialog-header h2 { font-size: 1.35rem; }
  .calendar-insight-row { padding: 10px; grid-template-columns: 42px minmax(0, 1fr) 57px 14px; gap: 8px; }
  .calendar-insight-avatar { width: 42px; height: 42px; }
  .calendar-insight-date { width: 57px; }
  .calendar-insight-chevron { width: 14px; }
  .field-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .topbar-center { display: none; }
  .birthday-calendar-view { width: calc(100% + var(--shell-padding) + var(--shell-padding)); margin-right: calc(-1 * var(--shell-padding)); margin-left: calc(-1 * var(--shell-padding)); padding-right: var(--shell-padding); padding-left: var(--shell-padding); border-right: 0; border-left: 0; border-radius: 0; }
}