/* static/css/style.css */
body { font-family: 'Inter', sans-serif; background-color: #111827; color: #e5e7eb; -webkit-tap-highlight-color: transparent; }
.fade-in { animation: fadeIn 0.5s ease-in-out forwards; opacity: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tool-card.active { background-color: #38bdf8; border-color: #38bdf8; color: #111827; }
.tool-card.active svg, .tool-card.active h3 { color: #111827; }
.content-section { display: none; }
.content-section.active { display: block; }
.form-input { background-color: #1f2937; border: 1px solid #4b5563; color: #e5e7eb; }
.form-input:focus { border-color: #38bdf8; outline: none; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4); }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background: #1f2937; padding: 2rem; border-radius: 0.5rem; width: 90%; max-width: 500px; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details .accordion-arrow { transition: transform 0.3s; }
details[open] .accordion-arrow { transform: rotate(180deg); }