.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1rem; margin: 20px 0; margin-left: auto; margin-right: auto; } .report-group { background: #f5f5f5; padding: 15px; border-radius: 8px; } .report-item { cursor: pointer; padding: 8px; margin: 4px 0; background: #e3f2fd; border-radius: 4px; } #query-result { margin-top: 20px; overflow-x: auto; } .sql-code { font-family: 'Courier New', Courier, monospace; background-color: #f4f4f4; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #4CAF50; color: white; } .ad-container { margin: 60px 0 30px; padding: 20px; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 10px; text-align: center; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .ad-label { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #4CAF50; color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.85em; font-weight: bold; letter-spacing: 0.5px; } .ad-content { margin: 15px 0; padding: 10px; background: white; border-radius: 6px; } .ad-note { color: #666; font-size: 0.9em; margin-top: 12px; font-style: italic; } @media (max-width: 768px) { .ad-container { margin: 40px 0 20px; padding: 15px; } .ad-label { font-size: 0.75em; top: -10px; } }