:root{color:#1d252d;background:#eef2f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}.visuallyHidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.appShell{height:100vh;min-height:100vh;padding:24px;overflow:hidden}.workspace{display:flex;flex-direction:column;height:calc(100vh - 48px);min-height:0;overflow:hidden;border:1px solid #d8e0e7;border-radius:8px;background:#f9fbfc;box-shadow:0 18px 60px #1d252d1f}.topBar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid #dfe6ec;background:#fff}.topBar h1,.topBar p,.centerState h2,.centerState p{margin:0}.topBar h1{color:#15202b;font-size:24px;font-weight:750}.filterDropdown{position:relative;width:max-content;color:#465866}.filterDropdownButton,.filterOption{display:inline-flex;align-items:center;gap:7px}.filterDropdownButton{min-height:34px;padding:0 12px;border:1px solid #d7e1e8;border-radius:7px;color:#24313b;background:#f8fafb;font-size:13px;font-weight:750;cursor:pointer;list-style:none}.filterDropdownButton::-webkit-details-marker{display:none}.filterCount{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;color:#fff;background:#1769aa;font-size:12px}.filterDropdownMenu{position:absolute;right:0;z-index:10;display:grid;gap:4px;min-width:220px;margin-top:8px;padding:8px;border:1px solid #d7e1e8;border-radius:7px;background:#fff;box-shadow:0 16px 40px #1d252d29}.filterOption{min-height:34px;padding:0 8px;border-radius:6px;font-size:13px;font-weight:650}.filterOption:hover{background:#f1f5f8}.filterOption input{width:16px;height:16px;accent-color:#1769aa}.eyebrow{color:#5d6f7c;font-size:12px;font-weight:700;letter-spacing:0;text-transform:uppercase}.topBarActions{display:flex;align-items:center;gap:10px}.settingsAction{position:relative}.settingsDialog{position:absolute;top:calc(100% + 10px);right:0;z-index:30;width:min(420px,calc(100vw - 48px));padding:18px;border:1px solid #d7e1e8;border-radius:7px;background:#fff;box-shadow:0 18px 50px #1d252d2e}.settingsDialogForm{display:grid;gap:16px}.settingsDialog h2{margin:0;color:#15202b;font-size:20px}.settingsField{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:12px;color:#26333d;font-size:14px;font-weight:700}.settingsField input{min-width:0;height:42px;padding:0 12px;border:1px solid #dfe6ec;border-radius:7px;outline:0;color:#1d252d;background:#fff}.settingsField input:focus{border-color:#1769aa;box-shadow:0 0 0 3px #1769aa1f}.settingsDialogActions{display:flex;justify-content:flex-end}.primaryButton,.secondaryButton,.iconButton,.dangerButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:1px solid transparent;border-radius:7px;font-weight:700}.primaryButton{padding:0 18px;color:#fff;background:#1769aa}.primaryButton:hover{background:#11598f}.secondaryButton,.iconButton{color:#24313b;background:#fff;border-color:#cfd9e1}.secondaryButton{padding:0 14px}.iconButton{width:40px}.dangerButton{padding:0 14px;color:#9b2f2f;background:#fff;border-color:#e3c2c2}.dangerButton:hover{background:#fff5f5}.contentGrid{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);min-height:0;flex:1;overflow:hidden}.contactPane{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid #dfe6ec;background:#fff}.paneControls{display:grid;gap:8px;padding:18px 18px 12px}.searchFilterRow{display:flex;align-items:center;gap:8px}.paneMeta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#61727f;font-size:13px;font-weight:700;white-space:nowrap}.searchBox{display:flex;align-items:center;gap:10px;height:44px;min-width:0;flex:1;margin:0;padding:0 12px;border:1px solid #cfd9e1;border-radius:7px;color:#60717f;background:#f8fafb}.searchBox:focus-within{border-color:#1769aa;box-shadow:0 0 0 3px #1769aa1f}.searchBox input{width:100%;min-width:0;border:0;outline:0;color:#1d252d;background:transparent}.searchClearButton{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border:0;border-radius:50%;color:#60717f;background:transparent}.searchClearButton:hover{color:#24313b;background:#e8eef3}.contactList{min-height:0;flex:1;overflow-y:auto;padding:0 10px 12px}.contactRow{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;width:100%;min-height:64px;gap:8px;padding:6px 8px;border:1px solid transparent;border-radius:7px;background:transparent}.contactRow:hover{background:#f1f5f8}.contactRow.active{border-color:#b6d5ee;background:#eaf4fc}.contactCheckbox{width:17px;height:17px;justify-self:center;accent-color:#1769aa}.contactRowButton{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;width:100%;min-height:52px;gap:12px;padding:4px 0;border:0;color:#26333d;text-align:left;background:transparent}.contactRow strong,.contactRow small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contactRow strong{font-size:14px}.contactRow small{color:#647583;font-size:13px}.avatar{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;overflow:hidden;border-radius:50%;color:#fff;background:#59788e;font-size:13px;font-weight:780;object-fit:cover}.avatar.large{width:88px;height:88px;font-size:28px}.detailPane{min-height:0;min-width:0;overflow:auto;background:#f7fafb}.contactDetail{max-width:820px;padding:34px}.detailHero{display:flex;align-items:center;gap:22px;padding-bottom:28px;border-bottom:1px solid #dfe6ec}.detailHero h2{margin:0;color:#15202b;font-size:34px;line-height:1.15}.detailHero p{margin:8px 0 0;color:#61727f;font-size:16px}.photoPicker{display:grid;gap:16px;padding:22px 0;border-bottom:1px solid #dfe6ec}.photoPickerHeader{display:flex;align-items:center;gap:18px}.immichImportControl{position:relative;display:grid;justify-items:center;gap:8px;margin-left:auto}.immichImportControl:after{position:absolute;z-index:2;top:calc(100% + 8px);right:0;width:max-content;max-width:260px;padding:7px 10px;border-radius:6px;color:#fff;background:#15202b;box-shadow:0 5px 14px #15202b3d;content:attr(data-tooltip);font-size:12px;font-weight:650;opacity:0;pointer-events:none;transform:translateY(-3px);transition:opacity .14s ease,transform .14s ease}.immichImportControl:hover:after,.immichImportControl:focus-within:after{opacity:1;transform:translateY(0)}.immichAvatarButton{position:relative;display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;padding:0;overflow:hidden;border:0;border-radius:50%;color:#60717f;background:#e8eef3;transition:box-shadow .15s ease,transform .15s ease}.immichProfileLink{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:0;border-radius:5px;color:#1769aa;background:transparent;font-size:13px;font-weight:700}.immichProfileLink:not(:disabled):hover,.immichProfileLink:not(:disabled):focus-visible{color:#0f527f;background:#e8f2fa}.immichAvatarButton img{width:100%;height:100%;object-fit:cover}.immichAvatarButton:not(:disabled):hover,.immichAvatarButton:not(:disabled):focus-visible{outline:4px solid rgba(23,105,170,.42);outline-offset:3px;box-shadow:0 8px 22px #1769aa47;transform:scale(1.06)}.photoPickerFooter{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.photoAvatarButton{display:inline-flex;padding:0;border:0;border-radius:50%;background:transparent}.photoAvatarButton:not(:disabled):hover .avatar,.photoAvatarButton:not(:disabled):focus-visible .avatar{outline:3px solid rgba(23,105,170,.28);outline-offset:3px}.photoCropper{display:grid;gap:14px;max-width:360px}.photoCropStage{position:relative;width:220px;height:220px;overflow:hidden;border:2px solid #1769aa;border-radius:50%;background:#dfe6ec;cursor:grab;touch-action:none}.photoCropStage:active{cursor:grabbing}.photoCropStage img{position:absolute;max-width:none;-webkit-user-select:none;user-select:none}.photoZoomControl{display:grid;gap:8px;color:#26333d;font-size:14px;font-weight:700}.photoZoomControl input{width:220px;accent-color:#1769aa}.photoPickerError{margin:0;color:#9b2f2f;font-size:13px;font-weight:650}.contactForm{display:grid;gap:16px;margin-top:24px}.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.formField{display:grid;gap:8px}.formField span{display:inline-flex;align-items:center;gap:8px;color:#26333d;font-size:14px;font-weight:700}.formField .formFieldHeader{justify-content:space-between}.formField .fieldMeta{color:#61727f;font-size:13px;font-weight:700}.formField input,.formField textarea{width:100%;min-width:0;border:1px solid #dfe6ec;border-radius:7px;outline:0;color:#1d252d;background:#fff;resize:vertical}.formField input{height:44px;padding:0 12px}.formField textarea{min-height:98px;padding:10px 12px}.formField input:focus,.formField textarea:focus{border-color:#1769aa;box-shadow:0 0 0 3px #1769aa1f}.formStatus{margin:0;padding:10px 12px;border-radius:7px;font-weight:650}.formStatus.error{color:#9b2f2f;background:#fff1f1}.formStatus.success{color:#43535f;background:#eaf6ef}.formActions{display:flex;align-items:center;justify-content:space-between;gap:10px}.formActionGroup{display:flex;align-items:center;gap:10px}.formActionGroup.right{margin-left:auto}.bulkActionBar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid #dfe6ec;background:#fff}.bulkActionGroup{display:flex;align-items:center;gap:10px;min-width:0}.bulkActionGroup.right{margin-left:auto}.replaceAction{position:relative}.replaceDialog{position:absolute;right:0;bottom:calc(100% + 10px);z-index:20;width:min(320px,calc(100vw - 36px));padding:14px;border:1px solid #d7e1e8;border-radius:7px;background:#fff;box-shadow:0 18px 50px #1d252d2e}.replaceDialogForm{display:grid;gap:12px}.replaceDialogActions{display:flex;justify-content:flex-end;gap:10px}.centerState{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:460px;padding:32px;color:#526472;text-align:center}.centerState.compact{min-height:100%}.centerState h2{color:#1f2b35;font-size:24px}.centerState p{max-width:520px}.centerState code{padding:2px 5px;border-radius:5px;color:#24313b;background:#e9eef2}.errorState{color:#a13b3b}.darkMode{color:#dbe4ec;background:#101820}.darkMode .workspace{border-color:#263647;background:#121c26;box-shadow:0 18px 60px #00000061}.darkMode .topBar,.darkMode .contactPane,.darkMode .bulkActionBar{border-color:#263647;background:#172331}.darkMode .detailPane{background:#101820}.darkMode .topBar h1,.darkMode .detailHero h2,.darkMode .centerState h2,.darkMode .formField span,.darkMode .detailSectionTitle h3{color:#f1f5f8}.darkMode .eyebrow{color:#9db3c7}.darkMode .filterDropdown,.darkMode .paneMeta,.darkMode .fieldMeta,.darkMode .detailHero p,.darkMode .centerState{color:#a7b6c5}.darkMode .filterDropdownButton,.darkMode .filterDropdownMenu,.darkMode .replaceDialog,.darkMode .settingsDialog,.darkMode .searchBox,.darkMode .formField input,.darkMode .formField textarea{color:#e8eef4;border-color:#34485c;background:#111b25}.darkMode .settingsDialog h2,.darkMode .settingsField{color:#f1f5f8}.darkMode .settingsField input{color:#e8eef4;border-color:#34485c;background:#111b25}.darkMode .settingsField input:focus{border-color:#66a8da;box-shadow:0 0 0 3px #66a8da2e}.darkMode .filterOption:hover{background:#1c2a38}.darkMode .searchBox input{color:#e8eef4}.darkMode .searchClearButton{color:#a7b6c5}.darkMode .searchClearButton:hover{color:#eef5fb;background:#24374a}.darkMode .secondaryButton,.darkMode .iconButton{color:#e8eef4;border-color:#3a5065;background:#1d2b3a}.darkMode .secondaryButton:hover,.darkMode .iconButton:hover{background:#24374a}.darkMode .dangerButton{color:#ffd0d0;border-color:#6d3940;background:#2b1c22}.darkMode .dangerButton:hover{background:#3a222a}.darkMode .contactRow:hover{background:#1c2a38}.darkMode .contactRow.active{border-color:#426b8c;background:#173047}.darkMode .contactRowButton{color:#e7edf4}.darkMode .contactRow small{color:#9eadba}.darkMode .avatar{color:#fff;background:#4c7291}.darkMode .detailHero,.darkMode .photoPicker{border-color:#263647}.darkMode .immichAvatarButton{color:#a7b6c5;background:#263647}.darkMode .immichProfileLink{color:#91c7ed}.darkMode .immichProfileLink:not(:disabled):hover,.darkMode .immichProfileLink:not(:disabled):focus-visible{color:#d5edff;background:#24374a}.darkMode .immichImportControl:after{color:#101820;background:#e8eef4;box-shadow:0 5px 14px #00000061}.darkMode .photoCropStage{border-color:#66a8da;background:#263647}.darkMode .photoZoomControl{color:#e8eef4}.darkMode .photoPickerError{color:#ffc6c6}.darkMode .formField input:focus,.darkMode .formField textarea:focus,.darkMode .searchBox:focus-within{border-color:#66a8da;box-shadow:0 0 0 3px #66a8da2e}.darkMode .formStatus.error{color:#ffc6c6;background:#3a1f26}.darkMode .formStatus.success{color:#ccefd7;background:#173222}.darkMode .centerState code{color:#e8eef4;background:#263647}.darkMode .errorState{color:#ffb8b8}.listState{display:flex;align-items:center;justify-content:center;gap:10px;min-height:130px;color:#667784}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:780px){.appShell{padding:0}.workspace{height:100vh;min-height:0;border:0;border-radius:0}.topBar{align-items:flex-start;padding:16px}.topBar h1{font-size:21px}.settingsDialog{position:fixed;top:72px;right:16px;left:16px;width:auto}.settingsField{grid-template-columns:1fr;gap:6px}.contentGrid{grid-template-columns:1fr}.contactPane{min-height:360px;border-right:0;border-bottom:1px solid #dfe6ec}.paneMeta{justify-content:flex-start}.contactList{max-height:360px}.contactDetail{padding:24px 18px}.detailHero{align-items:flex-start}.detailHero h2{font-size:26px}.formGrid{grid-template-columns:1fr}.formActions{align-items:stretch;flex-direction:column}.formActionGroup,.formActionGroup.right{width:100%;margin-left:0}.formActionGroup button{flex:1}.bulkActionBar{align-items:stretch;flex-direction:column}.bulkActionGroup,.bulkActionGroup.right{width:100%;margin-left:0}.bulkActionGroup button{flex:1}}