/* Основные стили */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0fff0; /* Светло-зеленый фон */
    color: #2e8b57; /* Темно-зеленый текст */
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff; /* Белый фон контейнера */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
}

h1 {
    text-align: center;
    color: #228b22; /* Зеленый заголовок */
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #2e8b57; /* Темно-зеленый текст */
}

input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #2e8b57; /* Зеленая рамка */
    border-radius: 5px;
    font-size: 16px;
    color: #2e8b57; /* Темно-зеленый текст */
    background-color: #f0fff0; /* Светло-зеленый фон */
}

input:focus {
    outline: none;
    border-color: #228b22; /* Ярко-зеленая рамка при фокусе */
    box-shadow: 0 0 5px rgba(34, 139, 34, 0.5); /* Зеленая тень */
}

button {
    width: 100%;
    padding: 10px;
    background-color: #228b22; /* Зеленый фон кнопки */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2e8b57; /* Темно-зеленый фон при наведении */
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.result {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0fff0; /* Светло-зеленый фон */
    border: 1px solid #2e8b57; /* Зеленая рамка */
    border-radius: 5px;
}

.result h3 {
    margin-top: 0;
    color: #228b22; /* Зеленый заголовок */
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #ffffff; /* Белый фон */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #2e8b57; /* Зеленая рамка */
    color: #2e8b57; /* Темно-зеленый текст */
}

/* SSL Pinning Test Styles */
.ssl-test-section {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Secure Communications Demo Styles */
.secure-comms-section {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f0fff0; /* Светло-зеленый фон */
}

.encryption-details {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0fff0; /* Светло-зеленый фон */
    border: 1px solid #2e8b57; /* Темно-зеленый бордер */
    border-radius: 5px;
}

.encryption-details h3 {
    margin-top: 0;
    color: #228b22; /* Зеленый заголовок */
}

.encryption-details pre {
    border-color: #2e8b57; /* Темно-зеленый бордер */
    color: #2e8b57; /* Темно-зеленый текст */
    font-family: monospace;
    font-size: 14px;
}

.result-box {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 50px;
}

.result-box.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.result-box.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

#retryButton {
    margin-top: 10px;
    background-color: #228b22;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

#retryButton:hover {
    background-color: #2e8b57;
}

hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #ddd;
}

.button-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.button-group button {
    flex: 0.48;
    min-height: 40px;
}

#sendSecureMessageBrowser {
    background-color: #228b22; /* Зеленый для браузера */
}

#sendSecureMessageBrowser:hover {
    background-color: #2e8b57; /* Темно-зеленый при наведении */
}

#sendSecureMessageSW {
    background-color: #228b22; /* Зеленый для Service Worker */
}

#sendSecureMessageSW:hover {
    background-color: #2e8b57; /* Темно-зеленый при наведении */
}

.mode-info {
    background-color: #f0fff0;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
    border-left: 4px solid #228b22; /* Зеленый бордер слева */
}

#processingMode {
    margin: 0;
    font-size: 0.9em;
    color: #343a40;
}

#service-worker-status {
    text-align: center;
    margin-top: 20px;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.sw-status {
    padding: 8px;
    border-radius: 4px;
}

.sw-status.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.sw-status.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Push Notifications Section Styles */
.push-notification-section {
    padding: 20px;
    background-color: #f9fff9; /* Slightly lighter than general background */
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #d0e8d0;
}

.push-notification-section h2 {
    color: #228b22;
    text-align: center;
    margin-bottom: 15px;
}

.info-box {
    background-color: #e7ffe7;
    border: 1px solid #c5eac5;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

.info-box h3 {
    margin-top: 0;
    color: #228b22;
    font-size: 16px;
}

.info-box ol {
    padding-left: 20px;
    margin-bottom: 0;
}

.step {
    font-weight: bold;
    color: #2e8b57;
}

.hidden {
    display: none;
}

#notification-status {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

#notification-status.success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}

#notification-status.error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

button#send-self-notification {
    background-color: #5cb85c;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    padding: 12px 20px;
    min-width: 240px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    margin: 10px 0;
}

button#send-self-notification:hover {
    background-color: #4cae4c;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Copy Protection Styles */
.status-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    z-index: 1000;
    max-width: 300px;
    animation: fadeIn 0.3s ease-in-out;
}

.status-notification.info {
    background-color: #3498db;
    color: white;
}

.status-notification.success {
    background-color: #2ecc71;
    color: white;
}

.status-notification.warning {
    background-color: #f39c12;
    color: white;
}

.status-notification.error {
    background-color: #e74c3c;
    color: white;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Restricted content styles - for user-select */
.restricted {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

.unrestricted {
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    cursor: auto;
}

/* Protection Testing Section Styles */
.protection-test-section {
    margin: 20px 0;
    padding: 20px;
    background-color: #f9fff9;
    border-radius: 8px;
    border: 1px solid #d0e8d0;
}

.protection-test-section h2 {
    color: #228b22;
    text-align: center;
    margin-bottom: 15px;
}

.protection-test-section .button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.protection-test-section .button-group button {
    flex: 1;
    min-width: 120px;
}

.protection-test-section .result {
    margin-top: 15px;
    padding: 15px;
    background-color: #f0fff0;
    border: 1px solid #2e8b57;
    border-radius: 5px;
}

.protection-test-section .result h3 {
    margin-top: 0;
    color: #228b22;
}

.protection-test-section .result pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.protection-test-section .result.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.protection-test-section .result.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.protection-test-section .result.info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
}