/*
 * O.Translator Tools - Base Styles (Media-Query Aware)
 * ---------------------------------------------------------
 */

/* 1. Global Styles (Light Theme Default) */
body {
    background-color: #F9FAFB; /* gray-50 */
    font-family: 'Inter', sans-serif;
    color: #1F2937; /* gray-800 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 2. Content Section Components */
.content-section {
    max-width: 64rem; margin: 4rem auto 0;
    background-color: #ffffff;
    border: 1px solid #E5E7EB; /* gray-200 */
    border-radius: 1rem; padding: 2.5rem; position: relative; overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.content-section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #3B82F6, transparent);
    animation: beam-animation 5s linear infinite; opacity: 0; transition: opacity 0.3s ease;
}

@keyframes beam-animation {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.section-title { font-size: 2.25rem; font-weight: 700; text-align: center; margin-bottom: 3rem; color: #111827; }

/* Feature/FAQ/Link Cards */
.feature-card, .faq-item details, .link-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.feature-card:hover, .link-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); }

.feature-card { background-color: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 0.75rem; padding: 1.5rem; }
.feature-icon { display: flex; align-items: center; justify-content: center; height: 4rem; width: 4rem; border-radius: 9999px; margin: 0 auto 1.5rem; font-weight: 700; font-size: 1.5rem; border-width: 2px; background-color: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.feature-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: #111827; }
.feature-description { font-size: 0.875rem; line-height: 1.25rem; color: #4B5563; }

.faq-item details { background-color: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 0.5rem; margin-bottom: 1rem; }
.faq-question { padding: 1rem; font-weight: 600; cursor: pointer; list-style-type: none; display: flex; justify-content: space-between; color: #111827; }
.faq-answer { padding: 1rem; border-top: 1px solid #E5E7EB; color: #4B5563; }

.link-card { background-color: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 0.75rem; padding: 1.5rem; }
.link-card-title { font-weight: 700; color: #1D4ED8; }
.link-card-description { font-size: 0.875rem; color: #4B5563; margin-top: 0.5rem; }

/*
 * Tool-Specific Styles
 * -----------------------------------------
 */

#font-style-container { display: none; }

.tool-wrapper { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 2rem; max-width: 48rem; margin: 0 auto; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.upload-label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 10rem; border: 2px dashed #d1d5db; border-radius: 0.5rem; cursor: pointer; background-color: #f9fafb; transition: background-color 0.3s, border-color 0.3s; }
.upload-label:hover { background-color: #f3f4f6; border-color: #9ca3af; }

.info-row { display: flex; justify-content: space-between; border-bottom: 1px solid #e5e7eb; padding: 0.4rem 0; }
.info-label { font-weight: 500; color: #6b7280; padding-right: 0.5rem; }
.info-value { color: #1f2937; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.char-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; background-color: #ffffff; aspect-ratio: 1 / 1; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.char-card:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); z-index: 10; }
.char-canvas { max-width: 100%; max-height: 100%; background-color: #e5e7eb; border-radius: 0.25rem; }
.char-input { width: 2.5rem; text-align: center; background-color: #f9fafb; border: 1px solid #d1d5db; border-radius: 0.25rem; padding: 0.25rem; font-size: 0.875rem; color: #1f2937; margin-top: 0.25rem; }
.char-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); }
.char-hex { font-size: 0.65rem; color: #6b7280; margin-top: 0.25rem; }

.pagination-button { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: #374151; background-color: #ffffff; border: 1px solid #d1d5db; border-radius: 0.375rem; transition: background-color 0.2s, border-color 0.2s; }
.pagination-button:hover:not(:disabled) { background-color: #f9fafb; border-color: #9ca3af; }
.pagination-button:disabled { opacity: 0.5; cursor: not-allowed; }

/*
 * Dark Theme Overrides
 * -----------------------------------------
 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #0D1117;
        color: #C9D1D9;
    }

    .content-section {
        background: linear-gradient(145deg, rgba(22, 27, 34, 0.6), rgba(13, 17, 23, 0.4));
        border-color: #30363d;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }

    .content-section::before { opacity: 1; }

    .section-title { color: #ffffff; text-shadow: 0 0 8px rgba(52, 152, 219, 0.5); }

    .feature-card:hover, .link-card:hover { box-shadow: 0 8px 25px rgba(48, 168, 255, 0.15); border-color: #30a8ff; }
    .feature-card { background-color: rgba(34, 41, 51, 0.5); border-color: #30363d; }
    .feature-icon { background-color: rgba(30, 58, 138, 0.5); color: #93c5fd; border-color: #1d4ed8; }
    .feature-title { color: #ffffff; }
    .feature-description { color: #9ca3af; }

    .faq-item details { background-color: rgba(34, 41, 51, 0.5); border-color: #30363d; }
    .faq-question { color: #ffffff; }
    .faq-answer { border-color: #374151; color: #9ca3af; }

    .link-card { background-color: rgba(34, 41, 51, 0.5); border-color: #30363d; }
    .link-card-title { color: #60a5fa; }
    .link-card:hover .link-card-title { color: #93c5fd; }
    .link-card-description { color: #9ca3af; }

    .tool-wrapper { background-color: #161b22; border-color: #30363d; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); }
    .upload-label { background-color: #2d3748; border-color: #4a5568; }
    .upload-label:hover { background-color: #4a5568; border-color: #60a5fa; }

    .info-row { border-color: #30363d; }
    .info-label { color: #8b949e; }
    .info-value { color: #c9d1d9; }

    .char-card { background-color: #0d1117; border-color: #30363d; }
    .char-card:hover { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
    .char-canvas { background-color: #9ca3af; }
    .char-input { background-color: #161b22; border-color: #4a5568; color: #c9d1d9; }
    .char-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
    .char-hex { color: #8b949e; }

    .pagination-button { color: #c9d1d9; background-color: #21262d; border-color: #30363d; }
    .pagination-button:hover:not(:disabled) { background-color: #30363d; border-color: #8b949e; }
}

/* Rule Set B: For Class-based toggling in React App */
.dark body {
    background-color: #0D1117;
    color: #C9D1D9;
}

.dark .content-section {
    background: linear-gradient(145deg, rgba(22, 27, 34, 0.6), rgba(13, 17, 23, 0.4));
    border-color: #30363d;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.dark .content-section::before { opacity: 1; }

.dark .section-title { color: #ffffff; text-shadow: 0 0 8px rgba(52, 152, 219, 0.5); }

.dark .feature-card:hover, .dark .link-card:hover { box-shadow: 0 8px 25px rgba(48, 168, 255, 0.15); border-color: #30a8ff; }
.dark .feature-card { background-color: rgba(34, 41, 51, 0.5); border-color: #30363d; }
.dark .feature-icon { background-color: rgba(30, 58, 138, 0.5); color: #93c5fd; border-color: #1d4ed8; }
.dark .feature-title { color: #ffffff; }
.dark .feature-description { color: #9ca3af; }

.dark .faq-item details { background-color: rgba(34, 41, 51, 0.5); border-color: #30363d; }
.dark .faq-question { color: #ffffff; }
.dark .faq-answer { border-color: #374151; color: #9ca3af; }

.dark .link-card { background-color: rgba(34, 41, 51, 0.5); border-color: #30363d; }
.dark .link-card-title { color: #60a5fa; }
.dark .link-card:hover .link-card-title { color: #93c5fd; }
.dark .link-card-description { color: #9ca3af; }

.dark .tool-wrapper { background-color: #161b22; border-color: #30363d; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); }
.dark .upload-label { background-color: #2d3748; border-color: #4a5568; }
.dark .upload-label:hover { background-color: #4a5568; border-color: #60a5fa; }

.dark .info-row { border-color: #30363d; }
.dark .info-label { color: #8b949e; }
.dark .info-value { color: #c9d1d9; }

.dark .char-card { background-color: #0d1117; border-color: #30363d; }
.dark .char-card:hover { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
.dark .char-canvas { background-color: #9ca3af; }
.dark .char-input { background-color: #161b22; border-color: #4a5568; color: #c9d1d9; }
.dark .char-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.dark .char-hex { color: #8b949e; }

.dark .pagination-button { color: #c9d1d9; background-color: #21262d; border-color: #30363d; }
.dark .pagination-button:hover:not(:disabled) { background-color: #30363d; border-color: #8b949e; }