/* ============================================================
   app.css — стилі Plyvemo.
   Верх файлу — ДИЗАЙН-ТОКЕНИ (CSS-змінні): вся палітра, шрифти,
   відступи в одному місці. Змінюєш токен — змінюється весь продукт.
   Підхід: mobile-first, мінімалізм (орієнтир Google/Apple).
   ============================================================ */

:root {
    /* --- Кольори --- */
    --color-bg:        #f7f8fa;   /* фон сторінки */
    --color-surface:   #ffffff;   /* фон карток/форм */
    --color-text:      #1c1c1e;   /* основний текст */
    --color-muted:     #6e6e73;   /* другорядний текст */
    --color-accent:    #0a6e5c;   /* акцент: спокійний морський зелений */
    --color-accent-2:  #0b8a72;   /* акцент при наведенні */
    --color-danger:    #c0392b;   /* помилки */
    --color-warn-bg:   #fff6e5;   /* фон попереджень */
    --color-warn-line: #f0c36d;   /* рамка попереджень */
    --color-border:    #e3e5e8;   /* рамки полів */

    /* --- Типографіка --- */
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

    /* --- Розміри --- */
    --radius: 12px;               /* заокруглення */
    --space: 16px;                /* базовий відступ */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

/* --- Базове --- */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-main);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

/* --- Шапка --- */
.header {
    padding: var(--space);
    text-align: center;
}

.brand {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-text);
    text-decoration: none;
}

/* --- Основна зона --- */
.main {
    display: flex;
    justify-content: center;
    padding: var(--space);
}

/* --- Картка (форми, вміст) --- */
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: calc(var(--space) * 2);
    width: 100%;
    max-width: 420px;
}

.card h1 {
    font-size: 24px;
    margin: 0 0 var(--space);
}

/* --- Форми --- */
label {
    display: block;
    margin-bottom: var(--space);
    font-size: 15px;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    font-size: 16px; /* 16px = мобільний браузер не збільшує сторінку при фокусі */
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

input:focus {
    outline: none;
    border-color: var(--color-accent);
}

label small {
    display: block;
    margin-top: 4px;
    font-weight: 400;
    color: var(--color-muted);
    font-size: 13px;
}

/* --- Кнопки --- */
.btn {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

.btn:hover { background: var(--color-accent-2); }

/* --- Помилки --- */
.errors {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: var(--space);
}

.errors p {
    margin: 4px 0;
    color: var(--color-danger);
    font-size: 14px;
}

/* --- Попередження --- */
.notice {
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: var(--space) 0;
    font-size: 14px;
}

.notice-warning {
    background: var(--color-warn-bg);
    border: 1px solid var(--color-warn-line);
}

/* --- Код відновлення --- */
.recovery-code {
    font-family: var(--font-mono);
    font-size: 17px;
    text-align: center;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: var(--space);
    margin: var(--space) 0;
    word-break: break-all;
    user-select: all; /* клік = виділено все, легко копіювати */
}

/* --- Другорядний текст --- */
.muted {
    color: var(--color-muted);
    font-size: 14px;
}

/* --- Honeypot: поле-пастка для ботів, людині невидиме --- */
.hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
}