/* Shared login and the existing administrative panel supply the design tokens. */
.central-page { background: var(--color-bg-page); }
.central-shell { display: grid; grid-template-columns: 2fr 1fr; min-height: 100dvh; }
.central-banners { height: 100dvh; overflow-y: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.central-banners img { display: block; flex: none; width: 100%; height: auto; border-radius: var(--radius-card); }
.central-workspace { padding: var(--space-6); display: flex; align-items: center; justify-content: center; min-width: 0; }
.central-card { background: var(--color-bg-surface); padding: var(--space-6); border-radius: var(--radius-card); width: 100%; max-width: 440px; display: grid; gap: var(--space-6); }
.central-logo { display: block; }
.central-logo img { display: block; width: 100%; height: auto; }
.central-heading h1 { font: 600 26px/34px 'Yandex Sans Display', Arial, sans-serif; color: var(--color-text-primary); margin: 0; }
.central-heading p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.central-card .central-heading { text-align: center; }
.central-form, .central-search, .central-list, .central-password-form { display: grid; gap: var(--space-4); }
.central-list { gap: var(--space-2); }
.central-card form { margin: 0; }
.central-secondary { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-control); background: var(--color-bg-surface); color: var(--color-text-primary); font: inherit; cursor: pointer; text-decoration: none; }
.central-secondary:hover { background: var(--color-bg-subtle); border-color: var(--color-border-hover); }
.central-secondary:active { background: var(--color-divider); }
.central-secondary:focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: 2px; }
.central-secondary:disabled { opacity: .5; cursor: default; }
.central-choice { flex-direction: column; align-items: flex-start; text-align: left; width: 100%; gap: var(--space-1); overflow-wrap: anywhere; }
.central-choice span { color: var(--color-text-secondary); }
.central-pagination, .central-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.central-pagination { margin: var(--space-4) 0; }
.central-admin { padding-top: 85px; padding-inline: var(--space-2); }
.central-admin-content label { font-size: 14px; line-height: 20px; font-weight: 500; }
.central-admin-content { width: 100%; padding: var(--space-4); margin-top: var(--space-4); border-radius: var(--radius-card); background: var(--color-bg-surface); display: grid; gap: var(--space-4); }
.central-admin-content h1 { position: static; width: auto; height: auto; }
.central-admin-content form { position: static; width: auto; height: auto; margin: 0; }
.central-admin-content .central-search { grid-template-columns: minmax(160px, 320px) auto; justify-content: start; align-items: end; gap: var(--space-2); }
.central-admin-content .central-search label { grid-column: 1 / -1; }
.central-account-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); overflow-wrap: anywhere; }
.central-admin-content .central-password-form { max-width: 440px; gap: var(--space-2); }
.central-password-form .central-actions { margin-top: var(--space-4); }
.central-admin-content input { width: 100%; min-width: 0; }
@media (max-width: 1023px) {
    .central-shell { grid-template-columns: 1fr; }
    .central-banners { display: none; }
}
@media (max-width: 767px) {
    .central-workspace { padding: var(--space-4); }
    .central-card { padding: var(--space-4); }
    .central-account-row { grid-template-columns: 1fr; gap: var(--space-2); }
    .central-admin-content .central-search { grid-template-columns: 1fr; justify-content: stretch; }
    .central-secondary { min-height: 44px; }
}

/* Inline CRM search: local feedback without the site's full-page loader. */
.central-live-search { gap: var(--space-2); }
.central-live-search label { font-size: 14px; line-height: 20px; font-weight: 500; }
.central-search-field { position: relative; }
.central-search-field .login-input { width: 100%; padding-right: calc(var(--control-height) + var(--space-6)); }
.central-search-spinner { position: absolute; right: var(--control-height); top: 50%; margin-top: -8px; width: 16px; height: 16px; border: 2px solid var(--color-border-default); border-top-color: var(--color-action-primary); border-right-color: var(--color-action-primary); border-radius: var(--radius-round); pointer-events: none; animation: central-search-spin .8s linear infinite; }
.central-search-status { color: var(--color-text-secondary); font-size: 13px; line-height: 18px; }
.central-search-empty { color: var(--color-text-secondary); padding: var(--space-4); background: var(--color-bg-subtle); border-radius: var(--radius-control); }
.central-results:empty { display: none; }
.central-back { width: 100%; }
.central-results .central-choice { transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.central-results .central-choice strong { font-weight: 600; }
@keyframes central-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .central-search-spinner { animation: none; }
    .central-results .central-choice { transition: none; }
}

.central-search-enhanced::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.central-search-clear { position: absolute; right: 0; top: 0; bottom: 0; width: var(--control-height); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.central-search-clear:hover { color: var(--color-action-primary); }
.central-search-clear svg { pointer-events: none; }

/* Branded CRM chooser; other central-login screens retain their styling. */
.central-choose-card {
    --central-choice-border: color-mix(in srgb, var(--color-action-primary) 24%, var(--color-border-default));
    border-radius: var(--space-4);
}
.central-choose-card .central-search-field .login-input {
    background: var(--color-action-primary-subtle);
    border-color: var(--central-choice-border);
    border-radius: var(--radius-card);
}
.central-choose-card .central-search-field .login-input:focus {
    background: var(--color-bg-surface);
    border-color: var(--color-action-primary);
    box-shadow: var(--input-focus-ring);
}
.central-choose-card .central-list { gap: var(--space-3); }
.central-choose-card .central-choice {
    padding: var(--space-3) var(--space-4);
    border-color: var(--central-choice-border);
    border-radius: var(--radius-card);
}
.central-choose-card .central-choice:hover,
.central-choose-card .central-choice:focus-visible {
    background: var(--color-action-primary-subtle);
    border-color: var(--color-action-primary);
}
.central-choose-card .central-choice:active { background: var(--color-status-blue-bg); }
.central-choose-card .central-choice strong { color: var(--color-action-primary); }
.central-choose-card .central-back {
    background: var(--color-action-primary-subtle);
    color: var(--color-action-primary);
    border-color: var(--central-choice-border);
    border-radius: var(--radius-card);
    font-weight: 500;
    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.central-choose-card .central-back:hover,
.central-choose-card .central-back:focus-visible {
    background: var(--color-status-blue-bg);
    border-color: var(--color-action-primary);
}
.central-choose-card .central-back:active {
    background: var(--color-status-blue-bg);
    color: var(--color-action-primary-hover);
    border-color: var(--color-action-primary-hover);
}
@media (prefers-reduced-motion: reduce) {
    .central-choose-card .central-back { transition: none; }
}