/* ─── База ──────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0; background: #f5f7fb; color: #222; font-size: 14px;
}
a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eef0f3; padding: 2px 5px; border-radius: 3px; font-size: 13px; }

/* ─── Шапка ─────────────────────────────────────────── */
.topbar {
    background: #fff; border-bottom: 1px solid #e0e4ea;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 28px;
}
.topbar .brand a { font-weight: 700; font-size: 17px; color: #1a3f8f; }
.topbar .menu a, .topbar .menu .who {
    color: #5f6368; margin-left: 18px; font-size: 14px;
}
.topbar .menu .who { color: #1a73e8; font-weight: 500; }
.topbar .menu a:hover { color: #1a73e8; }

/* ─── Контент ───────────────────────────────────────── */
.content { max-width: 1100px; margin: 28px auto; padding: 0 28px; }
h1 { font-size: 24px; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 32px 0 14px; }
.sub { color: #5f6368; margin: 0 0 20px; }

/* ─── Карточка авторизации (регистрация/вход) ───────── */
.auth-card {
    max-width: 460px; margin: 40px auto;
    background: #fff; border: 1px solid #e0e4ea;
    border-radius: 10px; padding: 28px;
}
.auth-card h1 { margin-bottom: 6px; }
.auth-card .sub { font-size: 13px; }
.form-card label {
    display: block; margin-bottom: 14px; font-size: 13px; color: #5f6368;
}
.form-card input {
    display: block; width: 100%; margin-top: 4px;
    padding: 9px 11px; border: 1px solid #d0d4da; border-radius: 6px;
    font-size: 14px; font-family: inherit;
}
.form-card input:focus {
    outline: none; border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}
.actions-row { margin-top: 18px; display: flex; gap: 8px; }

/* ─── Кнопки ────────────────────────────────────────── */
.btn {
    display: inline-block; padding: 8px 15px; border-radius: 6px;
    border: 1px solid #d0d4da; background: #fff; color: #222;
    cursor: pointer; font-size: 14px; text-decoration: none;
    font-family: inherit;
}
.btn:hover { background: #f1f3f4; text-decoration: none; }
.btn.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.btn.primary:hover { background: #1666c9; }
.btn.disabled {
    background: #f1f3f4; color: #9aa0a6; border-color: #e0e4ea;
    cursor: not-allowed; pointer-events: none;
}
.inline { display: inline-block; margin: 0; }

/* ─── Карточка плагина ─────────────────────────────── */
.plugin-card {
    background: #fff; border: 1px solid #e0e4ea; border-radius: 10px;
    padding: 20px 22px; margin-bottom: 16px;
}
.plugin-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.plugin-card h3 { margin: 0 0 4px; font-size: 17px; color: #1a3f8f; }
.plugin-meta { display: flex; gap: 16px; font-size: 13px; color: #5f6368; flex-wrap: wrap; }
.plugin-meta b { color: #222; }
.plugin-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.plugin-desc {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f3;
    color: #3c4043; line-height: 1.55; white-space: pre-line;
}

/* ─── Таблица «Мои ключи» ───────────────────────────── */
.data {
    width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid #e0e4ea; border-radius: 10px; overflow: hidden;
}
.data th, .data td {
    padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
}
.data thead th {
    background: #f8f9fa; font-weight: 600; font-size: 12px;
    color: #5f6368; text-transform: uppercase;
}
.data tbody tr:hover { background: #f8f9fa; }
.data .empty { text-align: center; color: #80868b; padding: 24px; }

/* ─── Бейджи ────────────────────────────────────────── */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 12px; font-weight: 500; background: #eef0f3; color: #3c4043;
}
.badge.ok   { background: #e6f4ea; color: #137333; }
.badge.warn { background: #fef7e0; color: #b06000; }
.badge.bad  { background: #fce8e6; color: #a50e0e; }

/* ─── Алерты ────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert.ok    { background: #e6f4ea; color: #137333; border: 1px solid #b7e1c1; }
.alert.error { background: #fce8e6; color: #a50e0e; border: 1px solid #f5c6c2; }
.alert.warn  { background: #fef7e0; color: #7a4f00; border: 1px solid #f5dfa0; }

/* ─── Подвал ────────────────────────────────────────── */
.footer {
    text-align: center; color: #80868b; font-size: 12px;
    padding: 30px 20px;
}