body { background: #f5f6fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        .container { max-width: 700px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); padding: 30px 20px; }
        .header { text-align: center; margin-bottom: 20px; }
        .header h1 { color: #2c3e50; margin-bottom: 10px; }
        .patient-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .patient-table th, .patient-table td { border: 1px solid #bdc3c7; padding: 10px; text-align: left; }
        .patient-table th { background: #f8f9fa;cursor: pointer;user-select: none; }
        .patient-table td.actions { text-align: center; }
        .action-btn { padding: 6px 14px; border: none; border-radius: 5px; font-size: 1em; cursor: pointer; margin: 0 2px; }
        .edit-btn { background: #f1c40f; color: #fff; }
        .edit-btn:hover { background: #d4ac0d; }
        .delete-btn { background: #e74c3c; color: #fff; }
        .delete-btn:hover { background: #c0392b; }
        .save-btn { background: #27ae60; color: #fff; }
        .save-btn:hover { background: #219150; }
        .cancel-btn { background: #95a5a6; color: #fff; }
        .cancel-btn:hover { background: #7f8c8d; }
        .add-btn { background: #3498db; color: #fff; margin-bottom: 18px; }
        .add-btn:hover { background: #2980b9; }
        .back-btn { display: inline-block; padding: 10px 20px; background: #95a5a6; color: white; text-decoration: none; border-radius: 5px; margin-bottom: 20px; transition: background-color 0.3s ease; }
        .back-btn:hover { background: #7f8c8d; }
        .scroll-table { max-height: 400px; overflow-y: auto; display: block; }
        .sort-icon {
        font-size: 0.8em;
        margin-left: 6px;
        opacity: 0.6;
        }

        @media (max-width: 600px) {
            .container { padding: 10px 2px; }
            .patient-table th, .patient-table td { padding: 6px; }
        }