/* Font Import and Family (Applied to Buttons Too) */
body, button {
    font-family: 'Hanuman', 'Cambria', sans-serif;
    line-height: 1.5;
    transition: background 0.3s, color 0.3s;
}

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

/* Light Theme */
body { background: #F0F0F0; color: #000000; }
header { background: #FFFFFF; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
a { color: #0000EE; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { color: #003399; }
.pass { color: #3CB371; font-weight: bold; }
.fail { color: #FF0000; font-weight: bold; }
.warn { color: #FFA500; }

/* Dark Theme */
body.dark { background: #2E2E2E; color: #FFFFFF; }
body.dark header { background: #3C3C3C; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
body.dark a { color: #6CB4EE; }
body.dark h1, body.dark h2 { color: #569CD6; }

/* Controls */
.controls { display: flex; justify-content: flex-start; align-items: center; gap: 20px; flex-wrap: wrap; }
button { padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; transition: background 0.2s; font-size: 1em; } /* Font applied */
button:hover { opacity: 0.9; }
button:disabled { background: #CCC; cursor: not-allowed; opacity: 0.6; }
.font-control { display: flex; align-items: center; gap: 5px; }

/* Tabs */
.tabs { display: flex; justify-content: center; border-bottom: 1px solid #DDD; margin: 10px 0; }
.tab-button { padding: 10px 20px; background: #EEE; border: none; cursor: pointer; border-radius: 4px 4px 0 0; margin: 0 5px; transition: background 0.2s; }
.tab-button.active { background: #FFF; border-bottom: 3px solid #003399; }
body.dark .tab-button { background: #3C3C3C; color: #FFF; }
body.dark .tab-button.active { background: #2E2E2E; border-bottom: 3px solid #569CD6; }
.tab-content { display: none; padding: 20px; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Content Font Size (Dynamic) */
.content-text { font-size: 14px; } /* Default; updated by JS */
.content-text h1 { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; }
.content-text h2 { font-size: 1.1em; font-weight: bold; margin: 15px 0 5px; }

/* Segment Container (Dynamic Side-by-Side on Desktop) */
#segments-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } /* Centered for better alignment */

/* Segment Styling */
.segment { border: 1px solid #DDD; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; width: 100%; } /* Fixed width to avoid stretching */
body.dark .segment { border: 1px solid #555; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.segment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.segment-header h3 { margin: 0; }
.remove-segment { background: #FF0000; color: #FFF; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 16px; line-height: 24px; text-align: center; display: flex; align-items: center; justify-content: center; } /* Centered "x" */
.remove-segment:hover { background: #CC0000; }

/* Input Pairs (Left Label, Right Input) */
.pair { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; margin-bottom: 15px; }
.pair label { text-align: left; font-weight: bold; white-space: nowrap; min-width: 100px; } /* Min-width for alignment */
.pair select, .pair input { width: 100%; }

/* Global Inputs (Centered and Fixed Wide Look) */
.global-inputs { max-width: 400px; margin: 20px auto; } /* Centered, match segment width */
.global-inputs .pair { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; margin-bottom: 15px; }
.global-inputs label { text-align: left; font-weight: bold; white-space: nowrap; min-width: 100px; }
#custom-inputs .pair { margin-bottom: 15px; } /* Consistent spacing for customs */

/* Buttons (Centered) */
.segment-controls, .buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 20px 0; }

/* Validation */
.input-error { border: 2px solid #FF0000 !important; }
.error-message { color: #FF0000; grid-column: span 2; font-size: 0.9em; }
.input-error { border: 2px solid #FF0000 !important; }
.error-message { color: #FF0000; font-size: 0.9em; margin-top: -5px; grid-column: 2 / span 1; text-align: left; }
#validation-summary { color: #FF0000; font-size: 1em; text-align: center; margin-top: 10px; }
#no-results-message { color: #FFA500; font-size: 1em; text-align: center; margin-top: 10px; }

/* Output (Centered) */
.output-section { margin: 20px auto; border: 1px solid #DDD; padding: 15px; background: #FFF; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 800px; } /* Centered, limited width */
body.dark .output-section { border: 1px solid #555; background: #1E1E1E; }
.output-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.output-table th, .output-table td { border: 1px solid #DDD; padding: 8px; text-align: left; }
body.dark .output-table th, body.dark .output-table td { border: 1px solid #555; }
.output-table th { background: #EEE; }
body.dark .output-table th { background: #3C3C3C; }
#loss-chart { width: 100%; height: 200px; margin: 20px 0; }

/* Image Section */
.image-section { text-align: center; margin-bottom: 20px; }
.image-section img { max-width: 100%; max-height: 50vh; height: auto; cursor: pointer; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: transform 0.2s; }
.image-section img:hover { transform: scale(1.02); }

/* Modal (Shared for Readme and Image) */
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; animation: fadeIn 0.3s; }
.modal-content { background: #FFF; padding: 20px; border-radius: 8px; max-width: 80%; box-shadow: 0 4px 8px rgba(0,0,0,0.2); overflow-y: auto; max-height: 90vh; }
body.dark .modal-content { background: #3C3C3C; color: #FFF; }
.close { color: #AAA; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: #FFF; }
.modal-image { max-width: 90%; max-height: 90vh; border-radius: 8px; }

/* Image Modal Close Button (Below Image) */
#image-modal { flex-direction: column; justify-content: center; align-items: center; }
.modal-image { margin-bottom: 10px; }
#image-modal .close { position: static; margin-top: 10px; font-size: 32px; color: #FFF; cursor: pointer; }
#image-modal .close:hover { color: #CCC; }

/* Tooltips (for educational help) */
label[title] { position: relative; cursor: help; }
label[title]:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 0; background: #333; color: #FFF; padding: 5px; border-radius: 4px; white-space: pre-wrap; width: 200px; z-index: 10; }

/* Responsiveness */
@media (min-width: 768px) {
    #segments-container { flex-wrap: wrap; justify-content: center; } /* Centered side-by-side on desktop */
}
@media (max-width: 600px) {
    .controls { flex-direction: column; align-items: flex-start; }
    .pair { grid-template-columns: 1fr; }
    .error-message { grid-column: 1; }
    .tabs { flex-direction: column; }
    .tab-button { margin: 5px 0; }
    #loss-chart { height: 150px; }
    .segment { max-width: 100%; }
    .global-inputs { max-width: 100%; }
    .output-section { max-width: 100%; }
    .segment-controls, .buttons { justify-content: flex-start; } /* Left on mobile for better touch */
}