.server-loading .list-panel, .server-loading .provider-toolbar { visibility:hidden; pointer-events:none; }
.server-loading::after { content:'正在读取服务端数据…'; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 35px #22375822; border-radius:10px; padding:20px 28px; color:#365fe9; z-index:100; }
.server-failed .list-panel, .server-failed .provider-toolbar { display:none; }
.server-error { padding:18px; border:1px solid var(--line); background:var(--panel-soft); color:#a84250; border-radius:8px; margin-bottom:15px; }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:20px; background:var(--panel-soft); }
.login-card { width:min(100%,420px); padding:35px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 15px 60px #22375812; }
.login-brand { color:#365fe9; font-size:24px; font-weight:700; margin-bottom:28px; }
.login-brand small { display:block; font-size:10px; letter-spacing:2px; margin-top:4px; }
.login-card h1 { font-size:21px; color:#223758; margin-bottom:10px; }
.login-card p { color:#7085a3; line-height:1.7; margin-bottom:22px; font-size:14px; }
.login-card input { width:100%; padding:12px; border:1px solid var(--line); border-radius:6px; font-size:16px; }
.login-card .btn { width:100%; margin-top:12px; }
.ns-payment { margin: 12px 0 2px; }
.live-confirm { display:flex; align-items:flex-start; gap:11px; padding:14px 15px; border:1px solid var(--line); background:var(--panel); border-radius:9px; color:#344d73; font-size:14px; line-height:1.6; cursor:pointer; transition:background .16s,border-color .16s; }
.live-confirm:hover { border-color:var(--line); }
.live-confirm:has(input:checked) { border-color:#93abea; background:var(--panel-soft); }
.live-confirm input { width:19px; height:19px; flex:0 0 auto; margin:2px 0 0; accent-color:#365fe9; cursor:pointer; }
.live-confirm strong { display:block; font-weight:600; }
.live-confirm small { display:block; margin-top:3px; color:#687f9f; font-size:12px; }
.ns-payment-help { margin:7px 2px 0; color:#6c809d; font-size:12px; line-height:1.7; }
.api-table .provider-type { white-space:nowrap; word-break:normal; }
@media (min-width:1280px) {
  .api-table .data-table { min-width:1100px; }
  .api-table .data-table th:nth-child(2) { width:11%; }
  .api-table .data-table th:nth-child(3) { width:13%; }
  .api-table .data-table th:nth-child(5) { width:23%; }
  .api-table .data-table th:nth-child(6) { width:7%; }
  .api-table .data-table th:nth-child(7) { width:9%; }
  .api-table .data-table th:nth-child(8) { width:16%; }
}

/* Authenticated administration and durable website jobs. */
.admin-reauth { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 17px; }
.admin-reauth .form-field:last-child { margin-bottom: 0; }
.totp-setup { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.totp-setup > div { flex: 1; min-width: 0; }
.totp-qr { flex: 0 0 200px; border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: #fff; }
.totp-setup input { font-family: Consolas, monospace; font-size: 13px; }
.totp-setup p { margin: 5px 0; color: #7385a0; font-size: 12px; line-height: 1.7; }
.modal.website-config-dialog { width: min(100%, 740px); }
.website-clear-password { display: flex; align-items: center; gap: 8px; color: #6d809e; font-size: 13px; margin: -5px 0 14px; }
.website-clear-password input { accent-color: #365fe9; width: 16px; height: 16px; }
.website-job-link { display: block; margin: 7px auto 0; padding: 4px 7px; color: #4669b5; border-radius: 5px; background: var(--panel-soft); font-size: 12px; line-height: 1.5; }
.website-job-link:hover { background: var(--panel-soft); }
.website-job-message { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: #526b91; line-height: 1.8; font-size: 14px; overflow-wrap: anywhere; }
.website-rotation-preview { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 18px 10px; margin-bottom: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 15px; color: #677e9f; }
.website-rotation-preview strong { color: #365fe9; overflow-wrap: anywhere; }
@media (max-width: 600px) { .totp-setup { flex-direction: column; align-items: stretch; gap: 13px; } .totp-qr { align-self: center; flex-basis: auto; } }