<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{% block title %}ORA Editor{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
        /* Prevent double-tap zoom and improve touch response */
        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }
        
        button, input, select, textarea {
            -webkit-user-select: text;
            user-select: text;
        }
        
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #374151; }
        ::-webkit-scrollbar-thumb { background: #6B7280; border-radius: 4px; }
        
        /* Mobile touch improvements */
        @media (max-width: 1023px) {
            body {
                touch-action: manipulation;
            }
            input[type="range"] {
                height: 1.5rem !important;
            }
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body class="bg-gray-900 text-white">
    {% block body %}{% endblock %}
    
    {% block scripts %}{% endblock %}
</body>
</html>
