/* Общие компоненты интерфейса: сайт и админка (DESIGN.md, 4.2).
   Состояния у каждого: обычное, наведение, фокус (общий :focus-visible из base.css),
   нажатие, недоступно, ошибка, загрузка. Без inline-стилей и скриптов (CSP). */

/* ===== Кнопки ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:var(--control-h);padding:0 var(--space-6);border:var(--border-w) solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-primary);color:var(--color-primary-contrast);font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;line-height:1.2;text-align:center;transition:background-color var(--dur-base),color var(--dur-base),border-color var(--dur-base)}
.btn:hover{background:transparent;color:var(--color-primary)}
.btn:active{background:var(--color-surface-alt);color:var(--color-primary)}
.btn--secondary{background:transparent;color:var(--color-primary)}
.btn--secondary:hover{background:var(--color-primary);color:var(--color-primary-contrast)}
.btn--secondary:active{background:var(--color-text-muted);border-color:var(--color-text-muted);color:var(--color-primary-contrast)}
.btn--text{min-height:var(--touch);padding:0 var(--space-3);border-color:transparent;background:transparent;color:var(--color-primary);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.btn--text:hover{background:transparent;color:var(--color-accent-text)}
.btn--text:active{background:var(--color-surface);color:var(--color-accent-text)}
.btn--danger{border-color:var(--color-danger);background:var(--color-danger);color:#fff}
.btn--danger:hover{background:transparent;color:var(--color-danger)}
.btn--danger:active{background:var(--color-danger-bg);color:var(--color-danger)}
.btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-5)}
.btn--block{display:flex;width:100%}
.btn--icon{width:var(--control-h);padding:0;letter-spacing:0}
.btn--icon.btn--sm{width:var(--control-h-sm)}
.btn--icon .icon{width:1.35em;height:1.35em}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading{pointer-events:none;color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;width:1.25em;height:1.25em;border:2px solid var(--color-primary-contrast);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.btn--secondary.is-loading::after,.btn--text.is-loading::after{border-color:var(--color-primary);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* Ссылка-стрелка и ссылка в тексте */
.link{display:inline-flex;align-items:center;gap:var(--space-3);padding-block:var(--space-3);border-bottom:1px solid currentColor;font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:gap var(--dur-base),color var(--dur-base)}
.link:hover{gap:var(--space-4);color:var(--color-accent-text)}
.link:active{color:var(--color-text)}
.link[aria-disabled="true"]{opacity:.45;pointer-events:none}
.text-link{color:var(--color-accent-text);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.text-link:hover{color:var(--color-text)}

/* ===== Поля ===== */
.field{display:grid;gap:var(--space-2)}
.field__label{font-size:var(--text-sm);font-weight:500}
.field__label small{font-weight:400;color:var(--color-text-muted)}
.field__hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.field__error{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-danger)}
.field__error .icon{margin-top:.1em}
.control{width:100%;min-height:var(--control-h);padding:var(--space-3) var(--space-4);border:var(--border-w) solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
textarea.control{min-height:8rem;resize:vertical;line-height:1.5}
.control::placeholder{color:var(--color-text-muted);opacity:1}
.control:hover{border-color:var(--color-text)}
.control:focus-visible{outline-offset:1px;border-color:var(--color-focus)}
.control:disabled,.control[readonly]{background:var(--color-surface);color:var(--color-text-muted);cursor:not-allowed}
.control:disabled:hover{border-color:var(--color-border-strong)}
.control[aria-invalid="true"]{border-color:var(--color-danger);box-shadow:inset 3px 0 0 var(--color-danger)}
.control.is-loading{cursor:progress;background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-surface-alt) 50%,var(--color-surface) 75%) 0 0/200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
select.control{padding-right:var(--space-6)}

/* Поле кода 2FA: один input, крупные цифры с разрядкой */
.code-input{max-width:14rem;min-height:64px;padding-inline:var(--space-4);text-align:center;font-family:var(--font-body);font-size:2rem;font-weight:500;letter-spacing:.5em;text-indent:.5em;font-variant-numeric:tabular-nums}

/* Флажок и переключатель */
.check{display:flex;align-items:flex-start;gap:var(--space-3);min-height:var(--touch);padding-block:var(--space-2);cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--color-primary);cursor:pointer}
.check input:disabled{cursor:not-allowed}
.check:has(input:disabled){color:var(--color-text-muted);cursor:not-allowed}
.switch{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch);cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch__track{position:relative;flex:none;width:48px;height:28px;border:var(--border-w) solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface-alt);transition:background-color var(--dur-base),border-color var(--dur-base)}
.switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--color-primary);transition:transform var(--dur-base) var(--ease),background-color var(--dur-base)}
.switch input:checked+.switch__track{background:var(--color-primary);border-color:var(--color-primary)}
.switch input:checked+.switch__track::after{transform:translateX(20px);background:var(--color-primary-contrast)}
.switch input:focus-visible+.switch__track{outline:3px solid var(--color-focus);outline-offset:3px}
.switch:has(input:disabled){opacity:.5;cursor:not-allowed}

/* ===== Бейджи статусов ===== */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-pill);background:var(--color-surface-alt);color:var(--color-text);font-size:var(--text-xs);font-weight:500;line-height:1.5;white-space:nowrap}
.badge .icon{width:1em;height:1em}
.badge--success{background:var(--color-success-bg);color:var(--color-success)}
.badge--warning{background:var(--color-warning-bg);color:var(--color-warning)}
.badge--danger{background:var(--color-danger-bg);color:var(--color-danger)}
.badge--info{background:var(--color-info-bg);color:var(--color-info)}

/* ===== Уведомления ===== */
.alert{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-3);align-items:start;padding:var(--space-4);border-left:3px solid var(--alert-color,var(--color-info));border-radius:var(--radius-sm);background:var(--alert-bg,var(--color-info-bg));font-size:var(--text-sm);line-height:1.5}
.alert>.icon{margin-top:.15em;color:var(--alert-color,var(--color-info))}
.alert__title{display:block;font-weight:600}
.alert--success{--alert-color:var(--color-success);--alert-bg:var(--color-success-bg)}
.alert--warning{--alert-color:var(--color-warning);--alert-bg:var(--color-warning-bg)}
.alert--danger{--alert-color:var(--color-danger);--alert-bg:var(--color-danger-bg)}
.alert__close{display:grid;place-items:center;width:var(--touch);height:var(--touch);margin:calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0 0;border:0;background:transparent;border-radius:50%}
.alert__close:hover{background:rgb(33 31 28 / .08)}
.toasts{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:var(--z-toast);display:grid;gap:var(--space-2);width:min(24rem,100% - 2*var(--space-4))}
.toasts .alert{background:var(--color-bg);border:var(--border-w) solid var(--color-border);border-left:3px solid var(--alert-color,var(--color-info));box-shadow:var(--shadow-md)}

/* ===== Модальное окно (<dialog>) ===== */
.modal{width:min(32rem,100% - 2*var(--space-4));max-height:calc(100dvh - 2*var(--space-4));padding:0;border:0;border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-lg);overflow:auto}
.modal::backdrop{background:var(--color-scrim)}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-5) 0}
.modal__title{font-size:var(--text-xl)}
.modal__body{padding:var(--space-4) var(--space-5)}
.modal__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-5) var(--space-5)}

/* ===== Таблица ===== */
.table-wrap{overflow-x:auto;border:var(--border-w) solid var(--color-border);border-radius:var(--radius-sm)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table caption{padding:var(--space-4);text-align:left;font-weight:600}
.table th{padding:var(--space-3) var(--space-4);border-bottom:var(--border-w) solid var(--color-border-strong);text-align:left;font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);white-space:nowrap}
.table td{padding:var(--space-3) var(--space-4);border-bottom:var(--border-w) solid var(--color-border);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--color-surface)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table__actions{display:flex;justify-content:flex-end;gap:var(--space-1)}

/* ===== Список ===== */
.list{border-top:var(--border-w) solid var(--color-border)}
.list__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--control-h);padding-block:var(--space-3);border-bottom:var(--border-w) solid var(--color-border)}
.list__row small{display:block;color:var(--color-text-muted)}

/* ===== Вкладки ===== */
.tabs{display:flex;gap:var(--space-5);overflow-x:auto;border-bottom:var(--border-w) solid var(--color-border)}
.tab{flex:none;min-height:var(--touch);padding:0 var(--space-1);border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;font-size:var(--text-sm);color:var(--color-text-muted);transition:color var(--dur-fast),border-color var(--dur-fast)}
.tab:hover{color:var(--color-text)}
.tab[aria-selected="true"]{border-bottom-color:var(--color-primary);color:var(--color-text);font-weight:500}
.tab-panel{padding-top:var(--space-5)}

/* ===== Прогресс (нативный <progress>, значение — атрибутом) ===== */
.progress{display:block;width:100%;height:8px;border:0;border-radius:var(--radius-pill);background:var(--color-surface-alt);overflow:hidden;appearance:none}
.progress::-webkit-progress-bar{background:var(--color-surface-alt)}
.progress::-webkit-progress-value{background:var(--color-primary);transition:width var(--dur-base)}
.progress::-moz-progress-bar{background:var(--color-primary)}
.progress--success::-webkit-progress-value{background:var(--color-success)}
.progress--success::-moz-progress-bar{background:var(--color-success)}
.progress--danger::-webkit-progress-value{background:var(--color-danger)}
.progress--danger::-moz-progress-bar{background:var(--color-danger)}

/* ===== Аккордеон (<details>) ===== */
.accordion{border-top:var(--border-w) solid var(--color-border)}
.accordion details{border-bottom:var(--border-w) solid var(--color-border)}
.accordion summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--control-h);padding-block:var(--space-4);font-family:var(--font-heading);font-size:var(--text-lg);cursor:pointer;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:hover{color:var(--color-accent-text)}
.accordion summary .icon{transition:transform var(--dur-base) var(--ease)}
.accordion details[open] summary .icon{transform:rotate(180deg)}
.accordion__body{padding-bottom:var(--space-5);max-width:62ch;color:var(--color-text-muted)}

/* ===== Пустое состояние ===== */
.empty{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);text-align:center}
.empty .icon{width:2.5rem;height:2.5rem;color:var(--color-text-muted);stroke-width:1.25}
.empty h3{font-size:var(--text-xl)}
.empty p{max-width:40ch;color:var(--color-text-muted)}
.empty .btn{margin-top:var(--space-3)}