/* --- General & Typography --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #f0f2f5;
    color: #1d2129;
    margin: 0;
    padding: 2rem;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    padding: 2rem 3rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

a { color: #1877f2; text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: none; border-top: 1px solid #dddfe2; margin: 2rem 0; }

/* --- Header & Footer --- */
header { text-align: center; margin-bottom: 1.5rem; }
h1 { color: #1d2129; margin: 0; font-size: 2.5rem; }
.subtitle { color: #606770; font-style: italic; font-size: 1.1rem; }
footer { text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #dddfe2; font-size: 0.9rem; color: #606770; }

/* --- Input Area --- */
.description { text-align: center; color: #606770; margin-bottom: 1.5rem; }
.input-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .input-grid { grid-template-columns: repeat(3, 1fr); } }

.form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.form-group input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.checkbox-group { display: flex; align-items: center; gap: 0.5rem; }
#discoverButton {
    padding: 0.75rem 1.5rem;
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.2s;
}
#discoverButton:hover { background-color: #166fe5; }
#discoverButton:disabled { background-color: #a0bdf5; cursor: not-allowed; }

/* --- Output Area --- */
.output-area {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: #f7f8fa;
    border-radius: 8px;
    border: 1px solid #dddfe2;
    min-height: 100px;
}
.output-area .placeholder { color: #606770; }
.status-loading, .status-ready { text-align: center; color: #606770; font-style: italic; }
.status-error { color: #fa383e; font-weight: bold; }

.result-success { border-left: 5px solid #31a24c; padding-left: 1rem; }
.result-failure { border-left: 5px solid #fa383e; padding-left: 1rem; }

.formula {
    font-family: "Courier New", Courier, monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: #1d2129;
    background: #e7f3ff;
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    word-wrap: break-word;
}
.error-message {
    background-color: #ffebe_e;
    color: #c91c1f;
    padding: 1rem;
    border-radius: 6px;
    white-space: pre-wrap;
}
.message-info {
    background-color: #e7f3ff;
    color: #1877f2;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.validation-box {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.validation-box ul { padding-left: 20px; }
.validation-box li { color: #c91c1f; }


/* --- Modal Popup Styles --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 25px; border-radius: 8px; width: 90%; max-width: 600px; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; }
#quantitySearch { width: 100%; padding: 8px; margin-bottom: 1rem; box-sizing: border-box; }
#quantityList { list-style-type: none; padding: 0; max-height: 300px; overflow-y: auto; }
#quantityList li { padding: 8px; border-bottom: 1px solid #eee; }