.smartsync-domain-page { color: #24364e; margin-block: 28px 48px; padding-inline-end: 20px; }
.smartsync-domain-page .domain-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 24px; }
.smartsync-domain-page .domain-workspace > main { min-width: 0; }
.smartsync-domain-page .domain-card { padding: 28px; border: 1px solid #dce5ef; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgb(22 43 70 / 2%); }
.smartsync-domain-page .domain-card h2 { margin: 10px 0 16px; color: #18314b; font-size: 22px; font-weight: 600; line-height: 1.4; }
.smartsync-domain-page .domain-card p { color: #475d73; font-size: 15px; line-height: 1.75; }
.smartsync-domain-page .domain-step-label { color: #3766a0; font-size: 13px; font-weight: 600; letter-spacing: .025em; }
.smartsync-domain-page .domain-connection { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; margin: 22px 0; padding: 18px; border-radius: 10px; background: #f3f7fc; }
.smartsync-domain-page .domain-connection :is(dt, span) { display: block; margin-bottom: 5px; color: #526779; font-size: 14px; }
.smartsync-domain-page .domain-connection :is(dd, strong) { display: block; margin: 0; color: #24364e; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.smartsync-domain-page .domain-context-note { padding: 14px 16px; border-inline-start: 3px solid #5184bf; border-radius: 6px; background: #f5f9ff; }
.smartsync-domain-page .domain-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.smartsync-domain-page .domain-actions a { padding: 8px 0; font-size: 14px; }
.smartsync-domain-page :is(.primary-btn, .secondary-btn) { min-height: 42px; margin: 0; padding: 10px 16px; border-radius: 8px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.smartsync-domain-page .primary-btn { border: 1px solid #1761c5; background: #1761c5; color: #fff; box-shadow: none; text-decoration: none; }
.smartsync-domain-page .primary-btn:hover:enabled { background: #124e9f; border-color: #124e9f; color: #fff; }
.smartsync-domain-page button:disabled { opacity: .6; cursor: default; }
.smartsync-domain-page button[data-busy]::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-inline-end: 8px; vertical-align: -1px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: domain-spin .8s linear infinite; }
.smartsync-domain-page .domain-feedback { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #cbdcf3; border-radius: 8px; background: #f1f6ff; }
.smartsync-domain-page .domain-feedback[data-kind="error"] { border-color: #e5b8b2; background: #fff3f1; color: #a33229; }
.smartsync-domain-page .domain-feedback[data-kind="success"] { border-color: #bdded0; background: #eef9f3; color: #1d6249; }
.smartsync-domain-page .domain-next { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding-top: 22px; border-top: 1px solid #e6ecf3; }
.smartsync-domain-page .domain-next > span { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 50%; background: #edf2f8; color: #526779; }
.smartsync-domain-page .domain-next strong { font-size: 15px; }
.smartsync-domain-page .domain-next p { margin: 5px 0 0; font-size: 14px; }
.smartsync-domain-page .domain-help { padding: 24px; }
.smartsync-domain-page .domain-help h2 { font-size: 20px; }
.smartsync-domain-page .domain-help ol { margin: 24px 0; padding-inline-start: 22px; }
.smartsync-domain-page .domain-help li { padding-inline-start: 5px; margin-bottom: 24px; color: #3766a0; }
.smartsync-domain-page .domain-help strong { color: #24364e; font-size: 15px; }
.smartsync-domain-page .domain-help p { margin: 6px 0 0; font-size: 15px; }
.smartsync-domain-page .domain-help a { font-size: 14px; }
.smartsync-domain-page .domain-connected { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #247355; font-size: 14px; }
.smartsync-domain-page .domain-connected > span:last-child { overflow-wrap: anywhere; color: #526779; }
.smartsync-domain-page .domain-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2b9b70; }
.smartsync-domain-page fieldset { margin: 0; padding: 0; border: 0; }
.smartsync-domain-page label { display: block; margin: 20px 0 8px; font-size: 15px; font-weight: 600; }
.smartsync-domain-page #custom-domain { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid #b8c8db; border-radius: 8px; background: #f7f9fc; color: #24364e; box-shadow: none; font-size: 16px; }
.smartsync-domain-page #custom-domain:focus { outline: none; border-color: #5b81b5; box-shadow: 0 0 0 3px rgb(23 97 197 / 8%); }
.smartsync-domain-page #custom-domain-description { margin: 8px 0; font-size: 14px; }
.smartsync-domain-page :is(#domain-message, #records) { overflow-wrap: anywhere; font-size: 14px; }
.smartsync-domain-page #records ul { padding: 0; list-style: none; }
.smartsync-domain-page #records li { margin: 12px 0; padding: 16px; border: 1px solid #dce5ef; border-radius: 8px; background: #f7f9fc; line-height: 1.8; }
.smartsync-domain-page .wizard-progress { margin: 28px 0; }
@keyframes domain-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .smartsync-domain-page .domain-workspace { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .smartsync-domain-page { margin-top: 18px; padding-inline-end: 10px; } .smartsync-domain-page .domain-card { padding: 20px; } .smartsync-domain-page .domain-connection { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .smartsync-domain-page button[data-busy]::before { animation: none; } }