@charset "UTF-8";
/* Public contact modules share the active palette; QR pixels stay original. */
.contacts-trigger {
 --contacts-action-ink:var(--theme-ui-accent);
 appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;
 min-height:29px;padding:5px 8px;flex-shrink:0;border:1px solid var(--theme-ui-border);border-radius:9px;
 color:var(--contacts-action-ink);background:var(--theme-ui-panel);font:inherit;font-size:10px;line-height:1.5;cursor:pointer;
 transition:background-color .2s,border-color .2s,color .2s,transform .2s;
}
:root[data-theme="blue"] .contacts-trigger {--contacts-action-ink:var(--tech-blue,#3968F1);}
.contacts-trigger>.icon {width:13px;height:13px;flex:0 0 13px;color:inherit;stroke-width:1.7;}
.contacts-trigger:hover {color:var(--theme-ui-text);background:var(--theme-ui-raised);border-color:var(--theme-ui-accent);}
.contacts-trigger:active {transform:translateY(1px);}
.contacts-trigger:focus-visible {outline:2px solid var(--theme-ui-accent);outline-offset:3px;}
.contacts-dialog.modal {
 --contacts-muted:var(--theme-ui-muted);--contacts-error-bg:#FFF0E9;
 --contacts-success:#5C7044;--contacts-success-bg:#F0F3E7;--contacts-success-line:#D6DFC6;
 width:min(660px,calc(100vw - 38px));max-width:660px;min-width:0;max-height:calc(100dvh - 38px);padding:0;
 color:var(--theme-ui-text);background:var(--theme-ui-panel);border-color:var(--theme-ui-border);border-radius:22px;box-shadow:var(--theme-ui-shadow);
}
:root[data-theme="red"] .contacts-dialog {--contacts-muted:var(--theme-dense-text);}
:root[data-theme="blackgold"] .contacts-dialog {--contacts-error-bg:#352221;--contacts-success:#BED09B;--contacts-success-bg:#273020;--contacts-success-line:#52613B;}
.contacts-dialog .modal-header {align-items:flex-start;gap:10px;padding:22px 24px 18px;color:var(--theme-ui-text);background:var(--theme-ui-panel);border-color:var(--theme-ui-border);}
.contacts-dialog .modal-header>div:first-child {flex:1;min-width:0;}
.contacts-dialog .modal-header h2 {margin:3px 0 0;color:var(--theme-ui-text);font-size:22px;font-weight:650;line-height:1.45;}
.contacts-dialog .modal-header .eyebrow {color:var(--theme-ui-accent);font-size:9px;letter-spacing:1.8px;}
.contacts-dialog .modal-header>.icon-button {color:var(--theme-ui-muted);background:var(--theme-ui-raised);border-color:var(--theme-ui-border);}
.contacts-description {margin:7px 0 0;color:var(--contacts-muted);font-size:11px;line-height:1.8;overflow-wrap:anywhere;}
.contacts-body {min-width:0;padding:18px 24px 23px;}
.contacts-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;min-width:0;margin:0 0 14px;padding:4px;border:1px solid var(--theme-ui-border);border-radius:12px;background:var(--theme-ui-raised);}
.contacts-tabs>button {appearance:none;min-width:0;min-height:34px;padding:7px 10px;border:1px solid transparent;border-radius:8px;color:var(--theme-dense-text);background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1.6;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s;}
.contacts-tabs>button.active,.contacts-tabs>button[aria-selected="true"] {color:var(--theme-dense-text);background:var(--theme-ui-panel);border-color:var(--theme-ui-border);box-shadow:0 1px 4px #00000008;}
.contacts-tabs>button:hover:not(:disabled) {border-color:var(--theme-ui-accent);}
.contacts-tabs>button:focus-visible {outline:2px solid var(--theme-ui-accent);outline-offset:2px;}
.contacts-tabs>button:disabled {cursor:wait;}
.contacts-status {display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 14px;padding:10px 12px;border:1px solid var(--theme-ui-border);border-radius:10px;color:var(--contacts-muted);background:var(--theme-ui-raised);font-size:11px;line-height:1.9;overflow-wrap:anywhere;}
.contacts-status[data-state="loading"]::before,.contacts-status[data-state="saving"]::before {content:"";display:block;width:12px;height:12px;flex:0 0 12px;border:2px solid var(--theme-ui-border);border-top-color:var(--theme-ui-accent);border-radius:50%;animation:contacts-loading-spin .9s linear infinite;}
.contacts-status[data-state="error"] {color:var(--theme-ui-error);background:var(--contacts-error-bg);border-color:var(--theme-ui-error);}
.contacts-status[data-state="success"] {color:var(--contacts-success);background:var(--contacts-success-bg);border-color:var(--contacts-success-line);}
.contacts-panel {display:grid;grid-template-columns:220px minmax(0,1fr);gap:15px 18px;min-width:0;padding:17px;border:1px solid var(--theme-ui-border);border-radius:17px;background:linear-gradient(135deg,var(--theme-ui-panel),var(--theme-ui-raised));box-shadow:0 2px 12px #00000005;}
.contacts-card-heading {grid-column:1/-1;display:flex;align-items:center;gap:10px;min-width:0;}
.contacts-contact-icon {display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border:1px solid var(--theme-ui-border);border-radius:11px;color:var(--theme-ui-accent);background:var(--theme-ui-raised);}
.contacts-contact-icon>.icon {width:20px;height:20px;stroke-width:1.7;}
.contacts-card-heading>div {min-width:0;}
.contacts-card-heading h3 {margin:0;color:var(--theme-ui-text);font-size:17px;font-weight:600;line-height:1.6;}
.contacts-card-heading p {margin:3px 0 0;color:var(--contacts-muted);font-size:10px;line-height:1.8;overflow-wrap:anywhere;}
.contacts-qr-frame {grid-column:1;grid-row:2/4;display:grid;place-items:center;align-self:start;box-sizing:border-box;width:min(220px,100%);aspect-ratio:1/1;padding:10px;border:1px solid #E6E1D6;border-radius:14px;background:#FFFFFF;box-shadow:0 4px 16px #0000000A;}
.contacts-qr-frame>img {display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;background:#FFFFFF;filter:none!important;}
.contacts-qr-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;padding:12px 7px;text-align:center;color:#5A554B;}
.contacts-qr-empty>.icon {width:30px;height:30px;color:#8C8374;stroke-width:1.5;}
.contacts-qr-empty strong {font-size:12px;font-weight:550;line-height:1.7;}
.contacts-qr-empty>span {max-width:100%;color:#746E62;font-size:10px;line-height:1.8;overflow-wrap:anywhere;}
.contacts-wechat {grid-column:2;grid-row:2/4;align-self:center;display:grid;justify-items:start;gap:8px;min-width:0;max-width:100%;}
.contacts-wechat>span {color:var(--contacts-muted);font-size:10px;line-height:1.8;}
.contacts-wechat>strong {min-width:0;max-width:100%;color:var(--theme-ui-text);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;font-weight:600;line-height:1.8;overflow-wrap:anywhere;user-select:text;}
.contacts-wechat>.button {min-height:32px;margin-top:3px;padding:7px 10px;font-size:10px;}
.contacts-settings-trigger {grid-column:1/-1;justify-self:end;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:29px;padding:6px 9px;border:1px solid var(--theme-ui-border);border-radius:8px;color:var(--theme-dense-text);background:var(--theme-ui-panel);font:inherit;font-size:10px;line-height:1.6;cursor:pointer;}
.contacts-settings-trigger>.icon {width:13px;height:13px;flex:0 0 13px;}
.contacts-settings-trigger:hover:not(:disabled) {border-color:var(--theme-ui-accent);background:var(--theme-ui-raised);}
.contacts-settings-trigger:focus-visible {outline:2px solid var(--theme-ui-accent);outline-offset:3px;}
.contacts-editor {position:relative;display:grid;gap:12px;min-width:0;margin-top:16px;padding:15px;border:1px solid var(--theme-ui-border);border-radius:14px;color:var(--theme-ui-text);background:var(--theme-ui-raised);}
.contacts-editor-heading {display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:5px 10px;min-width:0;}
.contacts-editor-heading h3 {margin:0;color:var(--theme-ui-text);font-size:13px;font-weight:600;line-height:1.7;}
.contacts-editor-heading>span {color:var(--contacts-muted);font-size:9px;line-height:1.8;}
.contacts-editor .field {min-width:0;margin:0;color:var(--theme-dense-text);font-size:11px;gap:6px;}
.contacts-editor .field input {width:100%;min-width:0;max-width:100%;min-height:36px;padding:8px 10px;font-size:12px;}
.contacts-upload-label {display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border:1px dashed var(--theme-ui-border);border-radius:10px;color:var(--theme-ui-text);background:var(--theme-ui-panel);cursor:pointer;}
.contacts-upload-label>.icon {width:22px;height:22px;flex:0 0 22px;color:var(--theme-ui-accent);stroke-width:1.6;}
.contacts-upload-label>span {min-width:0;}
.contacts-upload-label strong {display:block;font-size:11px;font-weight:550;line-height:1.8;}
.contacts-upload-label small {display:block;margin-top:3px;color:var(--contacts-muted);font-size:9px;line-height:1.8;overflow-wrap:anywhere;}
.contacts-upload-label:hover {border-color:var(--theme-ui-accent);background:var(--theme-ui-raised);}
.contacts-file-input {position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.contacts-upload-label:has(+.contacts-file-input:focus-visible) {outline:2px solid var(--theme-ui-accent);outline-offset:3px;}
.contacts-upload-label:has(+.contacts-file-input:disabled) {opacity:.6;cursor:not-allowed;}
.contacts-preview {display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:10px;border:1px solid var(--theme-ui-border);border-radius:10px;color:var(--contacts-muted);background:var(--theme-ui-panel);}
.contacts-preview>img {display:block;width:72px;height:72px;max-width:100%;object-fit:contain;border:1px solid #E6E1D6;border-radius:8px;background:#FFFFFF;filter:none!important;}
.contacts-preview>span {min-width:0;font-size:10px;line-height:1.8;overflow-wrap:anywhere;}
.contacts-preview>.button {min-height:29px;padding:6px 8px;font-size:9px;}
.contacts-remove {display:flex;align-items:center;gap:7px;min-width:0;color:var(--theme-ui-text);font-size:11px;line-height:1.8;cursor:pointer;}
.contacts-remove>input[type="checkbox"] {appearance:auto;width:14px;height:14px;min-height:0;flex:0 0 14px;margin:0;padding:0;accent-color:var(--theme-ui-accent);}
.contacts-remove:has(input:checked) {color:var(--theme-ui-error);}
.contacts-edit-note {min-width:0;margin:0;color:var(--contacts-muted);font-size:10px;line-height:1.9;overflow-wrap:anywhere;}
.contacts-editor-error {min-width:0;margin:0;padding:9px 11px;color:var(--theme-ui-error);background:var(--contacts-error-bg);border:1px solid var(--theme-ui-error);border-radius:9px;font-size:10px;line-height:1.9;overflow-wrap:anywhere;}
.contacts-editor-actions {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0;}
.contacts-editor-actions>.button {min-height:31px;padding:7px 10px;font-size:10px;}
.contacts-dialog .modal-footer {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:15px 24px;color:var(--theme-ui-muted);background:var(--theme-ui-raised);border-color:var(--theme-ui-border);}
.contacts-dialog .modal-footer>.button {min-height:33px;padding:7px 12px;font-size:11px;}
@keyframes contacts-loading-spin {to {transform:rotate(360deg);}}
@media(max-width:1100px) {
 .topbar:has(.contacts-trigger) #today,.topbar:has(.contacts-trigger) .topbar-divider {display:none;}
 .topbar-right:has(>.contacts-trigger) {gap:8px;}
}
@media(max-width:600px) {
 .contacts-dialog.modal {width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:17px;}
 .contacts-dialog .modal-header {padding:18px 17px 16px;}
 .contacts-dialog .modal-header h2 {font-size:20px;}
 .contacts-body {padding:16px 17px 18px;}
 .contacts-panel {grid-template-columns:minmax(0,1fr);justify-items:center;gap:13px;padding:14px;}
 .contacts-card-heading {justify-self:stretch;}
 .contacts-card-heading h3 {font-size:16px;}
 .contacts-qr-frame {grid-column:1;grid-row:auto;justify-self:center;}
 .contacts-wechat {grid-column:1;grid-row:auto;justify-items:center;text-align:center;}
 .contacts-wechat>strong {text-align:center;}
 .contacts-settings-trigger {grid-column:1;justify-self:center;}
 .contacts-dialog .modal-footer {padding:13px 17px;}
 .topbar:has(.contacts-trigger) .breadcrumb {display:none;}
 .topbar-right:has(>.contacts-trigger) {gap:5px;}
 .topbar-right>.contacts-trigger,.topbar-right:has(.contacts-trigger)>.lan-trigger,.topbar-right:has(.contacts-trigger)>.theme-trigger {width:28px;min-width:28px;min-height:28px;padding:6px;}
 .topbar-right>.contacts-trigger>span,.topbar-right:has(.contacts-trigger)>.lan-trigger>span,.topbar-right:has(.contacts-trigger)>.theme-trigger>span {position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 .topbar:has(.contacts-trigger) .live-status {font-size:8.5px;padding:5px 6px;gap:5px;}
}
@media(max-width:440px) {
 .contacts-editor {padding:12px;}
 .contacts-preview {grid-template-columns:64px minmax(0,1fr);gap:8px;}
 .contacts-preview>img {grid-column:1;grid-row:1/3;width:64px;height:64px;}
 .contacts-preview>span {grid-column:2;}
 .contacts-preview>.button {grid-column:2;justify-self:start;}
}
@media(prefers-reduced-motion:reduce) {
 .contacts-trigger,.contacts-tabs>button {transition:none!important;}
 .contacts-trigger:active {transform:none;}
 .contacts-status[data-state="loading"]::before,.contacts-status[data-state="saving"]::before {animation:none;}
}

/* Show the WeChat identity directly below the centered QR code. */
.contacts-dialog.modal {width:min(540px,calc(100vw - 24px));max-width:540px;}
.contacts-body {padding:16px 20px 18px;}
.contacts-tabs {margin-bottom:12px;}
.contacts-panel {grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px;padding:14px;}
.contacts-card-heading {grid-column:1;grid-row:auto;justify-self:center;max-width:100%;}
.contacts-qr-frame {grid-column:1;grid-row:auto;justify-self:center;align-self:auto;margin:0;}
.contacts-wechat {grid-column:1;grid-row:auto;align-self:auto;justify-self:stretch;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;min-width:0;margin:0;text-align:center;}
.contacts-wechat>span {line-height:1.6;}
.contacts-wechat>strong {flex:0 1 auto;min-width:0;max-width:100%;text-align:center;}
.contacts-wechat>.button {min-height:30px;margin:0;padding:6px 9px;}
.contacts-settings-trigger {grid-column:1;grid-row:auto;justify-self:center;min-height:28px;margin:0;padding:5px 8px;}
.contacts-dialog .modal-footer {padding:12px 20px;}