/* =====================================================
   GUESTBOOK — SILVER AERO
   Windows XP Silver + Frutiger Aero / Y2K

   Основные принципы:
   - серебристые панели;
   - холодные голубые отблески;
   - глянцевые кнопки;
   - тонкие границы;
   - компактная геометрия интерфейса.
   ===================================================== */


/* =====================================================
   1. ОБЩИЕ НАСТРОЙКИ
   ===================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    padding: 16px;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    color: #303746;

    /*
       Светлый серебристый фон.

       Верхняя часть получает лёгкое голубое свечение,
       которое постепенно переходит в почти белый цвет.
    */
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(177, 216, 246, 0.42) 0%,
            rgba(223, 237, 249, 0.18) 38%,
            transparent 72%
        ),
        linear-gradient(
            180deg,
            #f5f8fc 0%,
            #e9edf4 42%,
            #f8f9fc 100%
        );

    background-attachment: fixed;
}


/* =====================================================
   2. ОСНОВНОЙ КОНТЕЙНЕР
   ===================================================== */

.guestbook {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;
}


/* =====================================================
   3. ЗАГОЛОВОК GUESTBOOK
   ===================================================== */

.guestbook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 14px;
    padding: 0 2px;
}

.guestbook-header h1 {
    margin: 0;

    font-family: "Trebuchet MS", Tahoma, sans-serif;
    font-size: 22px;
    font-weight: bold;

    color: #465773;

    /*
       Тонкий светлый отблеск под буквами.
       Делает заголовок немного объёмнее.
    */
    text-shadow:
        0 1px 0 #ffffff,
        0 2px 3px rgba(79, 110, 157, 0.15);
}

.guestbook-count {
    padding: 4px 9px;

    color: #56657c;
    font-size: 11px;

    border: 1px solid #b1bccd;
    border-radius: 3px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f1f5fa 48%,
        #dce4ed 100%
    );

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 1px 2px rgba(67, 88, 120, 0.08);
}


/* =====================================================
   4. ОСНОВНЫЕ ПАНЕЛИ
   ===================================================== */

.guestbook-section {
    margin-bottom: 14px;

    overflow: hidden;

    border: 1px solid #9ba8bd;
    border-radius: 4px;

    background: #ffffff;

    /*
       Внутренний светлый контур и мягкая внешняя тень.

       Тень специально слабая, чтобы интерфейс
       оставался похожим на Windows XP.
    */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 2px 5px rgba(66, 88, 124, 0.12);
}


/* =====================================================
   5. СЕРЕБРИСТЫЕ ШАПКИ ПАНЕЛЕЙ
   ===================================================== */

.section-title {
    position: relative;

    padding: 7px 10px;

    font-size: 12px;
    font-weight: bold;

    color: #3e4e68;

    /*
       Градиент состоит из нескольких переходов.

       Светлая верхняя часть имитирует отражение света
       на металлической поверхности.
    */
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f6f9fd 12%,
        #e2e9f2 46%,
        #c8d2e1 49%,
        #dce4ee 75%,
        #c6d1e0 100%
    );

    border-bottom: 1px solid #a2aec0;

    text-shadow: 0 1px 0 #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}


/* =====================================================
   6. ФОРМА ОТПРАВКИ
   ===================================================== */

#guestbook-form {
    display: flex;
    flex-direction: column;

    gap: 6px;
    padding: 12px;

    /*
       Почти белый фон с небольшим холодным оттенком.
    */
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f9fbfe 100%
    );
}

#guestbook-form label {
    color: #46536b;
    font-size: 12px;
}


/* =====================================================
   7. ПОЛЯ ВВОДА
   ===================================================== */

#guestbook-form input,
#guestbook-form textarea {
    width: 100%;

    padding: 6px 7px;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;

    color: #303746;

    background: #ffffff;

    border: 1px solid #91a6bf;
    border-radius: 2px;

    /*
       Внутренняя тень создаёт небольшое углубление,
       характерное для старых полей ввода.
    */
    box-shadow:
        inset 1px 1px 2px rgba(62, 83, 117, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.95);

    outline: none;
}

#guestbook-form input {
    height: 28px;
}

#guestbook-form textarea {
    min-height: 90px;
    resize: vertical;

    line-height: 1.5;
}

/*
   Вместо стандартной чёрной рамки браузера
   используем голубую рамку в стиле XP.
*/
#guestbook-form input:focus,
#guestbook-form textarea:focus {
    border-color: #649bd1;

    box-shadow:
        inset 1px 1px 2px rgba(62, 83, 117, 0.12),
        0 0 0 1px rgba(122, 184, 237, 0.22);
}


/* =====================================================
   8. НИЖНЯЯ ЧАСТЬ ФОРМЫ
   ===================================================== */

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    margin-top: 5px;
}

#character-count {
    color: #7b8799;
    font-size: 11px;
}


/* =====================================================
   9. КНОПКА SIGN GUESTBOOK
   ===================================================== */

.form-footer button {
    min-width: 120px;
    height: 30px;

    padding: 0 14px;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;

    color: #40536d;

    cursor: pointer;

    /*
       Небольшое скругление характерно для
       глянцевых кнопок эпохи Windows XP.
    */
    border: 1px solid #8198b4;
    border-radius: 5px;

    /*
       Основной Silver Aero градиент.

       Резкий переход около середины создаёт
       характерный глянцевый блик.
    */
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f5faff 18%,
        #dcebf9 47%,
        #b4cce6 49%,
        #c7dbed 75%,
        #a9bfd9 100%
    );

    text-shadow: 0 1px 0 #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(112, 140, 175, 0.25),
        0 1px 2px rgba(54, 79, 116, 0.16);
}

/* Наведение: немного усиливаем голубой оттенок. */
.form-footer button:hover {
    border-color: #4f8dc8;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #e7f6ff 18%,
        #c4e5fc 47%,
        #8fc5ee 49%,
        #aed8f4 75%,
        #83b8df 100%
    );
}

/*
   Нажатие: градиент становится темнее.

   Кнопка и её текст не смещаются.
*/
.form-footer button:active {
    background: linear-gradient(
        180deg,
        #a5bad2 0%,
        #c0d4e9 48%,
        #e2edf7 100%
    );

    box-shadow:
        inset 1px 1px 2px rgba(55, 77, 110, 0.25);
}


/* =====================================================
   10. СПИСОК ЗАПИСЕЙ
   ===================================================== */

#guestbook-entries {
    padding: 8px;

    background: linear-gradient(
        180deg,
        #f6f8fc 0%,
        #edf2f8 100%
    );
}


/* =====================================================
   11. КАРТОЧКИ СООБЩЕНИЙ
   ===================================================== */

.guestbook-entry {
    margin-bottom: 8px;

    overflow: hidden;

    border: 1px solid #aab7c9;
    border-radius: 3px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(65, 86, 116, 0.08);
}

/* Последняя карточка не получает нижний отступ. */
.guestbook-entry:last-child {
    margin-bottom: 0;
}


/* =====================================================
   12. ШАПКА СООБЩЕНИЯ
   ===================================================== */

.guestbook-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px 12px;

    padding: 7px 10px;

    /*
       Более спокойный металлический градиент,
       чем у основных панелей.
    */
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #edf3f9 44%,
        #dbe5f0 47%,
        #e4ebf4 100%
    );

    border-bottom: 1px solid #c2cddd;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.guestbook-entry-nickname {
    color: #32619c;

    font-size: 12px;
    font-weight: bold;

    text-shadow: 0 1px 0 #ffffff;
}

.guestbook-entry-date {
    color: #738299;
    font-size: 11px;
}


/* =====================================================
   13. ТЕКСТ СООБЩЕНИЯ
   ===================================================== */

.guestbook-entry-message {
    padding: 12px 10px;

    color: #303746;
    font-size: 12px;

    line-height: 1.55;

    /*
       Сохраняем переносы строк из сообщений.

       Длинные ссылки или слова не смогут
       растянуть карточку за пределы окна.
    */
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fcfdff 100%
    );
}


/* =====================================================
   14. ПУСТОЙ СПИСОК
   ===================================================== */

.empty-message {
    margin: 0;
    padding: 18px;

    text-align: center;

    color: #7c8798;
}


/* =====================================================
   15. АДАПТАЦИЯ ДЛЯ НЕБОЛЬШИХ ОКОН
   ===================================================== */

@media (max-width: 480px) {

    body {
        padding: 7px;
    }

    .guestbook-header h1 {
        font-size: 19px;
    }

    #guestbook-form {
        padding: 9px;
    }

    .guestbook-entry-header {
        padding: 6px 8px;
    }

    .guestbook-entry-message {
        padding: 10px 8px;
    }

}

/* =====================================================
   SILVER AERO — GLASS & GREEN ACCENTS

   Дополнительный слой оформления:
   - более объёмные серебристые панели;
   - стеклянные отблески;
   - мягкие холодные тени;
   - зелёная кнопка в стиле Windows XP Start.
   ===================================================== */


/* =========================================
   1. ФОН — СВЕЧЕНИЕ ЗА ИНТЕРФЕЙСОМ
   ========================================= */

body {
    background:
        radial-gradient(
            ellipse at 50% 12%,
            rgba(192, 229, 255, 0.55) 0%,
            rgba(192, 229, 255, 0) 62%
        ),
        radial-gradient(
            ellipse at 85% 80%,
            rgba(175, 213, 151, 0.18) 0%,
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #e2e9f2 52%,
            #f2f6fb 100%
        );

    background-attachment: fixed;
}


/* =========================================
   2. ПАНЕЛИ — СВЕТ И ГЛУБИНА
   ========================================= */

.guestbook-section {
    border-color: #8e9db4;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.9),
        0 4px 9px rgba(65, 87, 125, 0.18),
        0 12px 22px rgba(95, 126, 166, 0.08);
}


/* =========================================
   3. МЕТАЛЛИЧЕСКИЕ ШАПКИ
   ========================================= */

.section-title {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #ffffff 8%,
        #f5faff 27%,
        #e0e9f4 46%,
        #b9c9dc 49%,
        #d7e3ef 69%,
        #afc0d5 100%
    );

    border-bottom-color: #879ab4;

    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -1px 0 rgba(83, 111, 150, 0.18),
        0 1px 3px rgba(79, 110, 150, 0.12);
}


/* =========================================
   4. КАРТОЧКИ — ОБЪЁМ И ОТРАЖЕНИЕ
   ========================================= */

.guestbook-entry {
    border-color: #a2b1c6;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 4px rgba(67, 91, 129, 0.15),
        0 5px 10px rgba(82, 113, 155, 0.07);
}

.guestbook-entry-header {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f7fbff 18%,
        #e3edf6 47%,
        #c7d8e9 50%,
        #dfebf5 76%,
        #c8d9e9 100%
    );

    border-bottom-color: #b3c3d6;
}


/* =========================================
   5. ЗЕЛЁНАЯ КНОПКА — XP START
   ========================================= */

.form-footer button {
    color: #ffffff;

    border: 1px solid #417c2e;
    border-radius: 6px;

    background: linear-gradient(
        180deg,
        #d4ffad 0%,
        #9ce477 10%,
        #72c943 43%,
        #4da32c 49%,
        #5caf34 75%,
        #347d22 100%
    );

    text-shadow:
        0 1px 1px rgba(17, 75, 17, 0.85);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -2px 0 rgba(28, 95, 23, 0.35),
        0 2px 4px rgba(45, 100, 40, 0.22);
}

/* При наведении зелёная подсветка усиливается. */
.form-footer button:hover {
    border-color: #36852b;

    background: linear-gradient(
        180deg,
        #e5ffc9 0%,
        #b7f18b 10%,
        #8cde55 43%,
        #5cba33 49%,
        #70cb42 75%,
        #42952b 100%
    );

    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -2px 0 rgba(35, 107, 26, 0.35),
        0 0 7px rgba(118, 211, 80, 0.45);
}

/* Нажатая кнопка выглядит немного утопленной. */
.form-footer button:active {
    background: linear-gradient(
        180deg,
        #387f24 0%,
        #59ad37 45%,
        #9be375 100%
    );

    box-shadow:
        inset 1px 2px 4px rgba(23, 78, 19, 0.4);
}

/* =========================================
   GUESTBOOK — VISITOR WEBSITE LINK
   ========================================= */

.guestbook-entry-website {
    display: inline-block;

    margin: 0 10px 10px;
    padding: 4px 9px;

    color: #35669b;
    font-size: 11px;
    text-decoration: none;

    /* Небольшая серебристая кнопка-ссылка */
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #e8f0f8 48%,
        #ccd9e8 100%
    );

    border: 1px solid #a2b4c9;
    border-radius: 3px;

    box-shadow: inset 0 1px 0 #ffffff;
}

.guestbook-entry-website:hover {
    color: #24578c;
    border-color: #6297c8;
    text-decoration: underline;
}

/* =====================================================
   GUESTBOOK — SILVER AERO PAGINATION
   ===================================================== */

/* Контейнер кнопок под списком записей. */
#guestbook-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin: 12px 0 20px;
}

/* Обычная кнопка переключения страниц. */
.guestbook-page-button {
    min-width: 30px;
    height: 27px;

    padding: 0 9px;

    font: 11px Tahoma, Arial, sans-serif;
    color: #435674;

    border: 1px solid #9cabbe;
    border-radius: 4px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #eef5fc 45%,
        #c9d7e8 49%,
        #dce7f2 100%
    );

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 1px 3px rgba(65, 90, 130, 0.14);

    cursor: pointer;
}

/* Подсветка при наведении. */
.guestbook-page-button:hover:not(:disabled) {
    border-color: #6194c6;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #e5f5ff 45%,
        #acd5f2 49%,
        #c7e4f6 100%
    );
}

/* Нажатая кнопка. */
.guestbook-page-button:active:not(:disabled) {
    box-shadow:
        inset 1px 2px 3px rgba(55, 85, 125, 0.25);
}

/* Текущая страница. */
.guestbook-page-button.is-active {
    border-color: #5b8db8;

    background: linear-gradient(
        180deg,
        #bed5eb 0%,
        #e7f2fc 100%
    );

    font-weight: bold;
}

/* Недоступные Previous и Next. */
.guestbook-page-button:disabled {
    opacity: 0.45;
    cursor: default;
}


/* =====================================================
   GUESTBOOK — ADMIN LOGIN / SILVER AERO
   ===================================================== */

.admin-login-dialog {
    width: min(340px, calc(100% - 24px));
    padding: 0;

    border: 1px solid #7789a5;
    border-radius: 5px;

    background: #f5f8fc;

    color: #34445e;
    font: 12px Tahoma, sans-serif;

    box-shadow:
        0 12px 35px rgba(35, 54, 90, 0.3),
        inset 0 1px 0 #ffffff;
}

/* Затемнение страницы за окном. */
.admin-login-dialog::backdrop {
    background: rgba(32, 44, 67, 0.35);
}

/* Серебристая шапка. */
.admin-login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 10px;

    font-weight: bold;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #e2eaf4 46%,
        #bac9dc 49%,
        #d5e1ef 100%
    );

    border-bottom: 1px solid #91a3bd;
}

/* Кнопка закрытия. */
#admin-login-close {
    width: 22px;
    height: 22px;
    padding: 0;

    border: 1px solid #8998b0;
    border-radius: 3px;

    background: linear-gradient(#ffffff, #c5d2e3);
    cursor: pointer;
}

/* Поля авторизации. */
#admin-login-form {
    display: flex;
    flex-direction: column;

    gap: 8px;
    padding: 16px;
}

#admin-login-form input {
    height: 29px;
    padding: 5px 7px;

    border: 1px solid #91a6bf;
    border-radius: 2px;

    background: #ffffff;
    font: 12px Tahoma, sans-serif;
}

/* Серебристая кнопка входа. */
.admin-submit {
    height: 30px;
    margin-top: 8px;

    border: 1px solid #8198b4;
    border-radius: 4px;

    background: linear-gradient(
        #ffffff 0%,
        #e4eef8 47%,
        #b9cce3 49%,
        #d9e5f2 100%
    );

    color: #40536d;
    font: bold 12px Tahoma, sans-serif;

    cursor: pointer;
}

#admin-login-error {
    margin: 0;
    color: #a33b3b;
}

#admin-login-error:empty {
    display: none;
}

/* =====================================================
   GUESTBOOK — ADMIN MODERATION / SILVER AERO
   ===================================================== */

/* Скрываем панель, пока администратор не вошёл. */
#guestbook-admin-bar[hidden] {
    display: none !important;
}

/* Панель администратора над формой. */
#guestbook-admin-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
    padding: 7px 10px;

    border: 1px solid #8fa4bd;
    border-radius: 4px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #e7f0f9 46%,
        #bfd1e5 49%,
        #d9e6f3 100%
    );

    color: #3b5879;
    font-weight: bold;

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 2px 5px rgba(70, 95, 135, 0.15);
}

/* Кнопки модерации под записями. */
.guestbook-admin-controls {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
    padding: 8px 10px;

    border-top: 1px solid #d1dce9;
    background: #f2f6fb;
}

/* Общий стиль административных кнопок. */
.guestbook-admin-controls button,
#guestbook-admin-logout {
    min-height: 25px;
    padding: 4px 11px;

    border: 1px solid #91a6bf;
    border-radius: 4px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #ebf3fc 46%,
        #c3d5e9 49%,
        #d8e5f2 100%
    );

    color: #405875;
    font: 11px Tahoma, sans-serif;

    cursor: pointer;

    box-shadow: inset 0 1px 0 #ffffff;
}

/* Подсветка кнопок. */
.guestbook-admin-controls button:hover,
#guestbook-admin-logout:hover {
    border-color: #6096c7;
    filter: brightness(1.04);
}

/* Delete выделяем более тёплым оттенком. */
.guestbook-admin-controls .admin-delete-button {
    color: #a34444;
}


/* Скрытая запись остаётся видимой администратору,
   но становится полупрозрачной. */
.guestbook-entry.is-hidden-by-admin {
    opacity: 0.55;
}