[data-handle-field] { --handle-success: #137333; --handle-danger: var(--x-danger, #b6002a); }
:root[data-theme='dark'] [data-handle-field] { --handle-success: #65d99b; }
.site-handle-status { display: flex; align-items: center; gap: 7px; min-height: 18px; line-height: 18px; color: var(--x-muted); }
.site-handle-indicator { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.site-handle-status[data-state='available'] { color: var(--handle-success); }
.site-handle-status[data-state='available'] .site-handle-indicator { color: var(--x-bg); background: var(--handle-success); animation: handle-available-pulse 700ms ease-out 2; }
.site-handle-status[data-state='available'] .site-handle-indicator::before { content: '✓'; }
.x-auth-form label[data-handle-state='available'] input { border-color: var(--handle-success); }
.x-auth-form label[data-handle-state='available'] input:focus { outline-color: var(--handle-success); }
.site-handle-status:is([data-state='taken'],[data-state='invalid']) { color: var(--handle-danger); }
.site-handle-status:is([data-state='taken'],[data-state='invalid']) .site-handle-indicator { color: var(--x-bg); background: var(--handle-danger); }
.site-handle-status[data-state='taken'] .site-handle-indicator::before { content: '×'; }
.site-handle-status[data-state='invalid'] .site-handle-indicator::before { content: '!'; }
.x-auth-form label[data-handle-state='taken'] input, .x-auth-form label[data-handle-state='invalid'] input { border-color: var(--handle-danger); }
.x-auth-form label[data-handle-state='taken'] input:focus, .x-auth-form label[data-handle-state='invalid'] input:focus { outline-color: var(--handle-danger); }
.site-handle-status[data-state='checking'] .site-handle-indicator { border: 2px solid var(--x-border); border-top-color: var(--accent); animation: handle-check-spin 650ms linear infinite; }
.site-handle-status:is([data-state='error'],[data-state='hint']) .site-handle-indicator { display: none; }
@keyframes handle-available-pulse { 0% { box-shadow: 0 0 0 0 transparent; transform: scale(.8); } 30% { box-shadow: 0 0 0 4px color-mix(in srgb,var(--handle-success) 18%,transparent); transform: scale(1.08); } 100% { box-shadow: 0 0 0 9px transparent; transform: scale(1); } }
@keyframes handle-check-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .site-handle-indicator { animation: none !important; } }