/* Webscepts hosting palette. Color-only layer shared by billing and auth views. */
:root {
  --webscepts-blue: #0066ff;
  --webscepts-blue-hover: #0055d9;
  --webscepts-ink: #122d63;
  --webscepts-blue-soft: #edf5ff;
  --webscepts-blue-line: #dce7f5;
  --webscepts-blue-muted: #627793;
  --cool-primary: var(--webscepts-blue);
  --cool-primary-hover: var(--webscepts-blue-hover);
}
:root, body.workspace-admin, body.admin-auth {
  --ink: var(--webscepts-ink);
  --accent: var(--webscepts-blue);
  --tint: var(--webscepts-blue-soft);
  --sidebar: #f7f9fc;
  --line: var(--webscepts-blue-line);
  --muted: var(--webscepts-blue-muted);
}
:root[data-theme="light"] {
  --cool-primary: var(--webscepts-blue);
  --cool-primary-hover: var(--webscepts-blue-hover);
  --cool-bg: #f8faff;
  --cool-text: var(--webscepts-ink);
  --cool-muted: var(--webscepts-blue-muted);
  --cool-border: var(--webscepts-blue-line);
}
/* Important declarations replace the older billing stylesheet's important gradients. */
.cool-btn, .billing-submit-btn, .submit-button {
  background: var(--webscepts-blue) !important;
  border-color: var(--webscepts-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 5px #0066ff18;
}
.cool-btn:hover, .billing-submit-btn:hover, .submit-button:hover {
  background: var(--webscepts-blue-hover) !important;
  border-color: var(--webscepts-blue-hover) !important;
  box-shadow: 0 3px 8px #0066ff22;
}
.cool-btn.secondary {
  background: var(--cool-surface-solid, #fff) !important;
  color: var(--cool-text, var(--webscepts-ink)) !important;
  border-color: var(--cool-border, var(--webscepts-blue-line)) !important;
  box-shadow: none;
}
.cool-btn.secondary:hover {
  border-color: var(--webscepts-blue) !important;
  background: var(--cool-surface-solid, var(--webscepts-blue-soft)) !important;
}
.workspace .cool-btn.secondary:hover { background: var(--webscepts-blue-soft) !important; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline-color: var(--webscepts-blue);
}
.field input:focus, .billing-input:focus, .cool-input:focus, .table-search input:focus, #workspace-search:focus {
  border-color: var(--webscepts-blue);
  box-shadow: 0 0 0 3px #0066ff15;
}
.field input[aria-invalid="true"] { border-color: #be5650; }
::selection { background: #dcecff; color: var(--webscepts-ink); }
/* Authentication: keep white space and paper cards, with the hosting site's blues. */
.brand > span:first-of-type { color: var(--webscepts-blue); }
.workspace-icon, .admin-auth .workspace-icon {
  background: #f3f8ff; border-color: var(--webscepts-blue-line); color: var(--webscepts-blue);
}
.story-section, .admin-auth .story-section { background: #f4f9ff; }
.serif-title, .admin-auth .serif-title { color: var(--webscepts-blue); }
.eyebrow, .story-kicker, .admin-auth .story-kicker { color: #507bb3; }
.kicker-line { background: #84aee8; }
.signup-line a { color: #0055d9; }
.workspace-preview, .welcome-sheet, .operations-sheet { border-color: var(--webscepts-blue-line); box-shadow: 0 18px 45px -22px #123d7026; }
.mini-logo, .admin-auth .mini-logo, .row-icon { background: #e7f1ff; color: var(--webscepts-blue); border-color: var(--webscepts-blue-line); }
.preview-heading > span { color: #5694ed; }
.preview-tab.active { color: #0055d9; border-bottom-color: var(--webscepts-blue); }
.preview-tab:hover { color: var(--webscepts-blue); }
.preview-badge { background: #e7f1ff; color: #235caa; }
.preview-toolbar, .preview-tabs, .preview-note, .preview-bottom, .sheet-heading, .sheet-note, .notebook-row, .onboarding-list li { border-color: var(--webscepts-blue-line); }
.preview-bottom, .sheet-note, .operations-sheet .sheet-note { background: #f5f9ff; color: #617c9d; }
.step-number, .notebook-row > i, .sheet-heading > i { color: #5b8fce; }
.step-label { color: #235caa; }
.story-caption, .admin-auth .story-caption, .preview-note { color: #627793; }
.small-dot { background: var(--webscepts-blue); }
/* Workspace views: navy type, restrained blue navigation, pale blue covers. */
.workspace-cover, .workspace-admin .workspace-cover { background: #edf5ff; }
.cover-rule, .workspace-admin .cover-rule { background: #bad3f6; }
.cover-mark, .workspace-admin .cover-mark { color: var(--webscepts-blue); }
.cover-caption, .workspace-admin .cover-caption { color: #5980af; }
.cover-grid, .cover-grid::before, .cover-grid::after,
.workspace-admin .cover-grid, .workspace-admin .cover-grid::before, .workspace-admin .cover-grid::after { border-color: #c4dbfa; }
.cover-grid > span, .workspace-admin .cover-grid > span { color: #8bb9f7; }
.portal-nav-link.active, .portal-nav-link.active:visited {
  background: var(--webscepts-blue-soft) !important;
  color: #154b95 !important;
  border-color: var(--webscepts-blue-line) !important;
  box-shadow: none;
}
.portal-nav-link.active .portal-nav-icon,
.portal-nav-link.active .portal-nav-icon i {
  background: transparent !important;
  color: var(--webscepts-blue) !important;
  border-color: transparent !important;
  box-shadow: none;
}
.workspace .portal-nav-link:hover { background: #f0f5fc; color: var(--webscepts-ink); }
.workspace .portal-brand-main { color: var(--webscepts-blue); }
.workspace .billing-avatar { border-color: var(--webscepts-blue-line); }
.workspace .billing-metric-card .portal-nav-icon { color: #6696d1; }
.workspace .billing-metric-value { color: var(--webscepts-ink); }
.workspace .billing-table th { background: #f7faff; color: #657b98; }
.workspace .billing-table td strong { color: var(--webscepts-ink); }
.workspace .billing-table tbody tr:hover { background: #f5f9ff; }
.workspace .whmcs-server-tag { color: #396cae; background: #edf5ff; }
.workspace .cool-card .cool-card { background: #f8fbff; }
.workspace .domain-option-card:hover { border-color: #b9d3f6; background: #f7faff; }
.workspace-callout { background: #f3f8ff; border-color: var(--webscepts-blue-line); }
.callout-symbol { color: #81aeea; }
.workspace-search-dialog { border-color: var(--webscepts-blue-line); }
.search-close { background: #edf5ff; color: #426a9a; }
/* Status colors stay semantic: green paid/success, amber pending, red errors. */

/* Visible account entry buttons on the login and registration pages. */
.auth-nav-button {
  padding: 10px 16px;
  min-height: 40px;
  border: 1px solid var(--webscepts-blue);
  border-radius: 6px;
  background: var(--webscepts-blue);
  color: #fff;
  font-weight: 550;
  white-space: nowrap;
  box-shadow: 0 2px 5px #0066ff18;
}
.auth-nav-button:hover {
  background: var(--webscepts-blue-hover);
  border-color: var(--webscepts-blue-hover);
  color: #fff;
}

/* Social sign-in uses real server routes and works without client-side JavaScript. */
.social-signin { display: grid; gap: 10px; margin-top: 24px; }
.social-signin-button {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 45px; padding: 11px 16px; border: 1px solid var(--webscepts-blue-line);
  border-radius: 6px; font-size: 13px; font-weight: 550; background: #fff;
  color: var(--webscepts-ink); box-shadow: 0 1px 2px #122d6305;
}
.social-signin-button i { width: 18px; text-align: center; font-size: 18px; }
.social-google i { color: #4285f4; }
.social-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.social-google:hover { background: #f7faff; border-color: #a9c8f2; }
.social-facebook:hover { background: #1465d0; border-color: #1465d0; }
.signin-divider { display: flex; align-items: center; gap: 12px; margin: 23px 0; font-size: 11px; color: var(--webscepts-blue-muted); }
.signin-divider::before, .signin-divider::after { content: ''; height: 1px; flex: 1; background: var(--webscepts-blue-line); }

.social-settings form { display: grid; gap: 20px; }
.social-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.social-provider-settings { display: grid; align-content: start; gap: 16px; padding: 22px; border: 1px solid var(--cool-border, var(--webscepts-blue-line)); border-radius: 7px; min-width: 0; }
.social-provider-settings h3 { display: flex; gap: 10px; align-items: center; margin: 0; }
.social-provider-settings h3 i { color: var(--webscepts-blue); }
.social-enable { display: flex; gap: 9px; align-items: center; font-size: 13px; cursor: pointer; }
.social-enable input { accent-color: var(--webscepts-blue); width: 17px; height: 17px; flex-shrink: 0; }
.social-settings .billing-submit-btn { justify-self: start; }
.social-settings input[readonly] { font-size: 12px; }
@media (max-width: 960px) { .social-settings-grid { grid-template-columns: 1fr; } }
.admin-settings .whmcs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-settings .cool-card, .admin-settings .billing-field, .admin-settings form { min-width: 0; }
.admin-settings .cool-table-responsive { max-width: 100%; overflow-x: auto; }
@media (max-width: 1100px) { .admin-settings .whmcs-grid-2 { grid-template-columns: minmax(0, 1fr); } }