/* Shared stylesheet of the legal and information pages (content/*.html): one copy instead of an inline
   block per page (ENH-021, 2 Oct 2026). The common rules came from the Privacy Policy's block; the box classes
   of every page are listed together, the Cookie Policy's table rules and the contact form's rules sit at the
   end. The gutter rule (16 px under 640 px, 80 px from 640 px) is the site's layout rule. */

:root {
    --primary: #8B5CF6;
    --primary-dark: #7C3AED;
    --secondary: #EC4899;
    --success: #51cf66;
    --warning: #ff9f43;
    --danger: #ff6b6b;
    --dark: #0a0a14;
    --light: #f8f9fa;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #a8a8b3;
    --gradient-1: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --gradient-2: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
    --gradient-3: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    --neon-blue: #3B82F6;
}

[data-theme="light"] {
    --dark: #f8f9fa;
    --light: #0a0a14;
    --glass-bg: rgba(0, 0, 0, 0.05);
    --glass-border: rgba(0, 0, 0, 0.1);
    --text-primary: #0a0a14;
    --text-secondary: #6c757d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.6;
    padding: 0 0 20px;
    padding-top: 80px;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(102, 102, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(81, 207, 102, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Side space (global layout rule): 16 px total on phones, 80 px for content from 640 px.
   The page provides the space; the card keeps an 8 px inner edge (border + padding) and no other side padding. */
.container a,
.container code {
    overflow-wrap: anywhere;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
}

.container {
    --content-gutter: 16px;
    width: calc(100% - 2 * (var(--content-gutter) - 8px));  /* 8 px = 1 px border + 7 px padding */
    max-width: 900px;
    margin: 20px auto;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 40px 7px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 0 80px rgba(102, 102, 255, 0.05);
}

@media (min-width: 640px) {
    .container {
        --content-gutter: 80px;
    }
}

@media (max-width: 639.98px) {
    .container {
        margin: 16px auto;
        padding: 24px 7px;
    }
}

h1 {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
}

h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--gradient-1);
    border-radius: 2px;
}

h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    position: relative;
    padding-left: 20px;
}

h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--gradient-1);
    border-radius: 2px;
}

h3 {
    color: var(--text-secondary);
    font-size: 1.2rem;
    font-weight: 500;
    margin: 1.5rem 0 0.8rem 0;
}

p {
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.7;
}

ul, ol {
    padding-left: 25px;
    margin-bottom: 1.5rem;
}

li {
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.6;
}

li strong {
    color: var(--primary);
}

.contact, .privacy-highlight, .data-info, .rights-info,
.checklist, .cookie-info, .privacy-note,
.architecture-info, .protection-info, .security-highlight, .contact-security,
.service-info, .license-info, .legal-notice {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 25px;
    border-radius: 15px;
    margin: 2rem 0;
    transition: all 0.3s ease;
}

.privacy-highlight, .checklist, .privacy-note, .security-highlight {
    border-left: 4px solid var(--success);
}

.legal-notice, .contact-security {
    border-left: 4px solid var(--warning);
}

.contact:hover, .privacy-highlight:hover, .data-info:hover, .rights-info:hover,
.checklist:hover, .cookie-info:hover, .privacy-note:hover,
.architecture-info:hover, .protection-info:hover, .security-highlight:hover, .contact-security:hover,
.service-info:hover, .license-info:hover, .legal-notice:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 102, 255, 0.1);
}

.last-updated {
    text-align: center;
    margin-top: 3rem;
    padding: 20px;
    background: var(--glass-bg);
    border-radius: 10px;
    color: var(--text-secondary);
    font-style: italic;
    border: 1px solid var(--glass-border);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-1);
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

a:hover {
    color: var(--primary-dark);
}

.theme-toggle {
    position: fixed;
    top: 90px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    z-index: 40;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 102, 255, 0.2);
}

@media (max-width: 768px) {
    body {
        padding: 0 0 15px;
        padding-top: 70px;
    }

    .container {
        border-radius: 15px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    .theme-toggle {
        width: 45px;
        height: 45px;
        top: 75px;
        right: 15px;
        font-size: 1.1rem;
    }
}

html {
    scroll-behavior: smooth;
}

/* Tables (Cookie Policy) */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
}

th, td {
    border: 1px solid var(--glass-border);
    padding: 12px;
    text-align: left;
    color: var(--text-primary);
}

th {
    background: var(--glass-bg);
    font-weight: bold;
    border-bottom: 2px solid var(--primary);
}

.last-updated {
    text-align: center;
    margin-top: 3rem;
    padding: 20px;
    background: var(--glass-bg);
    border-radius: 10px;
    color: var(--text-secondary);
    font-style: italic;
    border: 1px solid var(--glass-border);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-1);
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

a:hover {
    color: var(--primary-dark);
}

/* Contact Form Styles */
.contact-form {
    margin: 2rem 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-submit-btn {
    display: inline-block;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #ffffff;
    padding: 14px 36px;
    border-radius: 12px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.form-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 1rem;
    font-style: italic;
}

/* Site map: the small "(guide)" link after a tool name */
.muted { color: var(--text-secondary); font-size: 0.9em; }