@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #2d3748;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        .main-container {
            max-width: 2000px;
            min-height: 100vh;
            padding: 15px;
            margin: 0 auto;
            width: 100%;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 320px 1fr 320px;
            gap: 15px;
            min-height: calc(100vh - 30px);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            padding: 15px;
        }

        .panel {
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            overflow-y: auto;
            height: calc(100vh - 60px);
        }

        /* Controls panel (left) */
        .panel:first-child {
            background: white;
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: 320px;
            max-width: 320px;
        }

        /* Experiment area (middle) - exact 2PhaseCommit styling */
        .panel:nth-child(2) {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #e2e8f0 100%);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            padding: 0;
        }

        /* Observations panel (right) */
        .panel:nth-child(3) {
            background: white;
            display: flex;
            flex-direction: column;
            gap: 15px;
            min-width: 320px;
            max-width: 320px;
        }

        .panel-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f7fafc;
        }

        .step-counter {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #4a5568;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.875rem;
            background: white;
            color: #2d3748;
            transition: all 0.2s ease;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none;
            border-color: #3182ce;
            box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
        }

        /* Enhanced number input styling */
        .form-group input[type="number"] {
            -webkit-appearance: textfield;
            -moz-appearance: textfield;
            appearance: textfield;
        }

        .form-group input[type="number"]::-webkit-outer-spin-button,
        .form-group input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Helper text styling */
        .form-text {
            font-size: 0.75rem;
            color: #718096;
            margin-top: 4px;
            display: block;
        }

        .text-muted {
            color: #718096 !important;
        }

        /* Custom number input container */
        .number-input-container {
            display: flex;
            align-items: center;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.2s ease;
        }

        .number-input-container:focus-within {
            border-color: #3182ce;
            box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
        }

        .number-input {
            flex: 1;
            border: none;
            padding: 10px 12px;
            text-align: center;
            font-weight: 600;
            font-size: 1rem;
            background: transparent;
            color: #2d3748;
        }

        .number-input:focus {
            outline: none;
            box-shadow: none;
        }

        .number-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .number-btn:hover {
            background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
            transform: scale(1.05);
        }

        .number-btn:active {
            transform: scale(0.95);
        }

        .number-btn:disabled {
            background: #e2e8f0;
            color: #a0aec0;
            cursor: not-allowed;
            transform: none;
        }

        .minus-btn {
            border-radius: 0;
        }

        .plus-btn {
            border-radius: 0;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        .btn {
            background: linear-gradient(135deg, #3b82f6, #1e40af);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 8px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #718096, #4a5568);
        }

        .btn-secondary:hover {
            box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3);
        }

        .btn-danger {
            background: linear-gradient(135deg, #f56565, #e53e3e);
        }

        .btn-danger:hover {
            box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
        }

        .btn-download {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 600;
            position: relative;
            overflow: hidden;
        }

        .btn-download:hover {
            background: linear-gradient(135deg, #059669, #047857);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
            transform: translateY(-2px);
        }

        .btn-download:active {
            transform: translateY(0);
        }

        .download-icon {
            transition: transform 0.3s ease;
        }

        .btn-download:hover .download-icon {
            transform: translateY(2px);
        }

        .experiment-area {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 20px;
            height: 100%;
            overflow-y: auto;
        }

        .data-section {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .data-section:hover {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }

        .data-section h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #2d3748;
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e2e8f0;
        }

        /* Scrollbar styling for experiment area */
        .panel:nth-child(2)::-webkit-scrollbar {
            width: 6px;
        }

        .panel:nth-child(2)::-webkit-scrollbar-track {
            background: rgba(241, 245, 249, 0.8);
            border-radius: 3px;
        }

        .panel:nth-child(2)::-webkit-scrollbar-thumb {
            background: #4299e1;
            border-radius: 3px;
        }

        /* Scrollbar styling for other panels */
        .panel::-webkit-scrollbar {
            width: 6px;
        }

        .panel::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }

        .panel::-webkit-scrollbar-thumb {
            background: #4299e1;
            border-radius: 3px;
        }

        .data-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-start;
            align-items: center;
            min-height: 60px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            border: 1px solid rgba(226, 232, 240, 0.6);
            backdrop-filter: blur(5px);
            transition: all 0.2s ease;
        }

        .data-container:hover {
            background: rgba(255, 255, 255, 0.9);
            border-color: #4299e1;
        }

        .data-item {
            background: linear-gradient(135deg, #e6fffa 0%, #d6f8f1 100%);
            border: 1px solid #81e6d9;
            color: #234e52;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 500;
            margin: 2px;
            display: inline-block;
            transition: all 0.2s ease;
        }

        .data-item:hover {
            background: linear-gradient(135deg, #d6f8f1 0%, #c6f6d5 100%);
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(129, 230, 217, 0.3);
        }

        /* Individual data items within mappers/reducers */
        .mapper-data, .reducer-data {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        /* Worker data containers (used by JavaScript) */
        .worker-data {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        /* Bucket routing labels */
        .bucket-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #2d3748;
            margin: 8px 0 4px 0;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .bucket-label::before {
            content: '→';
            color: #4299e1;
            font-weight: bold;
        }

        /* Legacy support for existing mapper/reducer containers */
        .mapper-container, .reducer-container {
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid rgba(66, 153, 225, 0.6);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
            min-height: 120px;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(66, 153, 225, 0.1);
            display: flex;
            flex-direction: column;
        }

        .mapper-container:hover, .reducer-container:hover {
            background: rgba(255, 255, 255, 1);
            border-color: #4299e1;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(66, 153, 225, 0.2);
        }

        /* Unified title styling for all mapper/reducer containers */
        .mapper-title, .reducer-title, .mapper-node-title, .reducer-node-title {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 12px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
        }

        .mappers-container, .reducers-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            min-height: 140px;
            padding: 10px;
        }

        /* Individual mapper and reducer containers */
        .mapper-node, .reducer-node {
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid rgba(66, 153, 225, 0.6);
            border-radius: 12px;
            padding: 15px;
            min-height: 120px;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(66, 153, 225, 0.1);
            display: flex;
            flex-direction: column;
        }

        .mapper-node:hover, .reducer-node:hover {
            background: rgba(255, 255, 255, 1);
            border-color: #4299e1;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(66, 153, 225, 0.2);
        }

        /* Styling for mapper-card and reducer-card (used by JavaScript) */
        .mapper-card, .reducer-card {
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid rgba(66, 153, 225, 0.6);
            border-radius: 12px;
            padding: 15px;
            min-height: 120px;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(66, 153, 225, 0.1);
            margin-bottom: 15px;
        }

        .mapper-card:hover, .reducer-card:hover {
            background: rgba(255, 255, 255, 1);
            border-color: #4299e1;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(66, 153, 225, 0.2);
        }

        /* Titles inside mapper/reducer cards */
        .mapper-card h4, .reducer-card h4 {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 12px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
            margin-top: 0;
        }

        /* Individual mapper and reducer titles */
        .mapper-node-title, .reducer-node-title {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 12px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
        }

        .shuffle-container {
            min-height: auto;
            padding: 20px;
            background: rgba(254, 245, 231, 0.9);
            border: 2px solid rgba(246, 173, 85, 0.8);
            border-radius: 12px;
            font-weight: 600;
            color: #744210;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .shuffle-container:hover {
            background: rgba(254, 245, 231, 1);
            border-color: #f6ad55;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(246, 173, 85, 0.2);
        }

        /* Compact content within shuffle container */
        .shuffle-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
            max-width: 500px;
        }

        .shuffle-phase-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #744210;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .distribution-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 15px 0;
        }

        .stat-item {
            text-align: center;
        }

        .stat-label {
            font-size: 0.875rem;
            color: #8b4513;
            margin-bottom: 4px;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #744210;
        }

        .stat-value.highlight {
            color: #3182ce;
        }

        /* Mappers and reducers list in shuffle */
        .workers-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin: 10px 0;
        }

        .worker-item {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid #f6ad55;
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #744210;
        }

        .distribution-arrows {
            font-size: 1.2rem;
            color: #f6ad55;
            margin: 5px 0;
        }

        /* Shuffle animation specific styling */
        .shuffle-animation-container {
            width: 100%;
            max-width: 100%;
            padding: 0;
        }

        #animationArea {
            min-height: 140px !important;
            /* Remove fixed height to allow dynamic sizing */
            position: relative;
            background: linear-gradient(to right, rgba(239, 246, 255, 0.8), rgba(240, 253, 244, 0.8)) !important;
            border: 2px dashed rgba(246, 173, 85, 0.6) !important;
            border-radius: 8px !important;
            margin: 10px 0 !important;
            padding: 15px;
            overflow: visible;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Override Tailwind classes for shuffle animation */
        .shuffle-animation-container .h-40 {
            /* Remove fixed height - now using dynamic height from JavaScript */
            min-height: 140px !important;
            min-width: 500px !important;
        }

        .shuffle-animation-container .absolute {
            position: absolute !important;
        }

        .shuffle-animation-container .relative {
            position: relative !important;
        }

        /* Better positioning for mappers and reducers */
        .shuffle-animation-container .left-4 {
            left: 15px !important;
            width: 100px;
        }

        .shuffle-animation-container .right-4 {
            right: 15px !important;
            width: 100px;
        }

        .shuffle-animation-container .top-2 {
            top: 8px !important;
        }

        .shuffle-animation-container .top-8 {
            top: 30px !important;
        }

        .shuffle-animation-container .space-y-1 > * + * {
            margin-top: 4px !important;
        }

        /* Center animation area */
        .shuffle-animation-container .inset-x-0 {
            left: 110px !important;
            right: 110px !important;
        }

        .shuffle-animation-container .top-1\/2 {
            top: 50% !important;
        }

        .shuffle-animation-container .transform {
            transform: translateY(-50%) !important;
        }

        /* Animation elements */
        .shuffle-animation-container .animate-pulse {
            animation: pulse 1.5s ease-in-out infinite !important;
        }

        .shuffle-animation-container .text-center {
            text-align: center !important;
        }

        .shuffle-animation-container .text-2xl {
            font-size: 1.5rem !important;
        }

        /* Mapper and reducer boxes in animation */
        .shuffle-animation-container .w-12 {
            width: 36px !important;
            height: 24px !important;
            font-size: 0.75rem !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-bottom: 2px !important;
        }

        .shuffle-animation-container .h-6 {
            height: 24px !important;
        }

        .shuffle-animation-container .bg-blue-200 {
            background-color: rgba(191, 219, 254, 1) !important;
            border: 1px solid #3b82f6 !important;
        }

        .shuffle-animation-container .bg-green-200 {
            background-color: rgba(187, 247, 208, 1) !important;
            border: 1px solid #10b981 !important;
        }

        .shuffle-animation-container .rounded {
            border-radius: 4px !important;
        }

        .shuffle-animation-container .text-xs {
            font-size: 0.75rem !important;
        }

        .shuffle-animation-container .flex {
            display: flex !important;
        }

        .shuffle-animation-container .items-center {
            align-items: center !important;
        }

        .shuffle-animation-container .justify-center {
            justify-content: center !important;
        }

        /* Text styling in animation */
        .shuffle-animation-container .text-sm {
            font-size: 0.875rem !important;
        }

        .shuffle-animation-container .font-semibold {
            font-weight: 600 !important;
        }

        .shuffle-animation-container .text-blue-600 {
            color: #2563eb !important;
        }

        .shuffle-animation-container .text-green-600 {
            color: #16a34a !important;
        }

        .shuffle-animation-container .text-orange-700 {
            color: #c2410c !important;
        }

        /* Input and Output Data Visualization */
        #inputDataViz, #outputDataViz {
            width: 100% !important;
            min-height: 60px !important;
            padding: 12px !important;
        }

        #inputDataViz .flex, #outputDataViz .flex {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

        #inputDataViz span, #outputDataViz span {
            display: inline-block !important;
            margin: 2px !important;
            white-space: nowrap !important;
        }

        /* Activity Log Styles */
        .status-section {
            margin-bottom: 20px;
        }

        .status-section h4 {
            margin-bottom: 10px;
            color: #2d3748;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .logs {
            height: 250px;
            overflow-y: auto;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.8rem;
            line-height: 1.4;
            background: white;
            border-radius: 8px;
            padding: 15px;
            border: 1px solid #e2e8f0;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .log-entry {
            margin: 4px 0;
            padding: 6px 10px;
            border-radius: 6px;
            background: #f8fafc;
            border-left: 3px solid #94a3b8;
            animation: fadeIn 0.3s ease-in;
        }

        .log-entry.info {
            border-left-color: #3b82f6;
            background: #eff6ff;
            color: #2563eb;
        }

        .log-entry.success {
            border-left-color: #10b981;
            background: #f0fdf4;
            color: #059669;
        }

        .log-entry.error {
            border-left-color: #ef4444;
            background: #fef2f2;
            color: #dc2626;
        }

        .log-entry.warning {
            border-left-color: #f59e0b;
            background: #fffbeb;
            color: #d97706;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Statistics Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 10px;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #2d3748;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #4a5568;
            margin-bottom: 3px;
        }

        .stat-description {
            font-size: 0.75rem;
            color: #718096;
        }

        /* Specific stat value colors */
        #totalSortsCount { color: #10b981; }
        #totalElementsProcessed { color: #3b82f6; }
        #avgCommunicationRounds { color: #f59e0b; }
        #totalExperiments { color: #8b5cf6; }

        /* Distribution progress styling - override Tailwind classes */
        .distribution-progress {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            text-align: center;
        }

        .progress-stat {
            display: inline-block;
            margin: 0 15px;
            font-size: 0.875rem;
        }

        .progress-stat strong {
            color: #3182ce;
            font-size: 1.1rem;
        }

        /* Fix for distribution progress bar inside shuffle animation */
        #animationArea .absolute.bottom-2 {
            position: absolute !important;
            bottom: 8px !important;
            left: 16px !important;
            right: 16px !important;
        }

        #animationArea #progressBar {
            width: 0% !important;
            height: 8px !important;
            background: linear-gradient(to right, #3b82f6, #10b981) !important;
            border-radius: 9999px !important;
            transition: all 0.3s ease !important;
        }

        #animationArea .progress-label {
            font-size: 0.75rem !important;
            color: #6b7280 !important;
            margin-bottom: 4px !important;
            text-align: center !important;
            white-space: nowrap !important;
        }

        #animationArea .progress-container {
            width: 100% !important;
            background-color: #e5e7eb !important;
            border-radius: 9999px !important;
            height: 8px !important;
        }

        .observations-list {
            list-style: none;
            padding: 0;
        }

        .observations-list li {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 8px;
            font-size: 0.875rem;
            line-height: 1.4;
        }

        .observations-list li:before {
            content: "▶";
            color: #3182ce;
            font-weight: bold;
            margin-right: 8px;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            padding: 20px;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 30px;
            max-width: 600px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        @media (max-width: 768px) {
            .modal {
                padding: 15px;
            }
            
            .modal-content {
                padding: 20px;
                max-height: 85vh;
                border-radius: 10px;
            }
            
            .modal h2 {
                font-size: 1.25rem;
            }
            
            .instructions h3 {
                font-size: 1rem;
            }
            
            .instructions {
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 576px) {
            .modal {
                padding: 10px;
            }
            
            .modal-content {
                padding: 15px;
                max-height: 90vh;
            }
            
            .modal h2 {
                font-size: 1.1rem;
                margin-bottom: 15px;
            }
            
            .instructions h3 {
                font-size: 0.95rem;
                margin-top: 15px;
            }
            
            .instructions {
                font-size: 0.85rem;
                line-height: 1.5;
            }
            
            .instructions ul, .instructions ol {
                margin-left: 15px;
            }
        }

        .modal h2 {
            color: #2d3748;
            margin-bottom: 20px;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .modal-close {
            float: right;
            font-size: 24px;
            cursor: pointer;
            color: #718096;
            margin-top: -10px;
        }

        .modal-close:hover {
            color: #2d3748;
        }

        .instructions {
            line-height: 1.6;
            color: #4a5568;
        }

        .instructions h3 {
            color: #2d3748;
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .instructions ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .instructions li {
            margin-bottom: 5px;
        }

        .progress-bar {
            background: #e2e8f0;
            border-radius: 10px;
            height: 8px;
            margin: 15px 0;
            overflow: hidden;
        }

        .progress-fill {
            background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
            height: 100%;
            transition: width 0.3s ease;
        }

        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-waiting {
            background: #fbb6ce;
        }

        .status-running {
            background: #9ae6b4;
            animation: pulse 1s infinite;
        }

        .status-completed {
            background: #63b3ed;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Responsive design */
        
        /* Large screens (1400px and above) - default styles apply */
        
        /* Medium-large screens (1200px - 1400px) */
        @media (max-width: 1400px) {
            .grid-container {
                grid-template-columns: 280px 1fr 280px;
            }
            
            .panel:first-child,
            .panel:nth-child(3) {
                min-width: 280px;
                max-width: 280px;
            }
        }
        
        /* Medium screens / Tablets landscape (1024px - 1200px) */
        @media (max-width: 1200px) {
            .grid-container {
                grid-template-columns: 260px 1fr 260px;
                gap: 12px;
            }
            
            .panel:first-child,
            .panel:nth-child(3) {
                min-width: 260px;
                max-width: 260px;
            }
            
            .panel {
                padding: 15px;
            }
            
            .panel-title {
                font-size: 1.1rem;
            }
            
            .btn {
                padding: 10px 14px;
                font-size: 0.8rem;
            }
        }
        
        /* Tablets (768px - 1024px) - Stack to 2-column then single column */
        @media (max-width: 1024px) {
            .grid-container {
                grid-template-columns: 1fr 1fr;
                gap: 15px;
            }
            
            .panel {
                height: auto;
                max-height: none;
                min-width: unset;
                max-width: unset;
            }
            
            .panel:first-child {
                min-width: unset;
                max-width: unset;
                grid-column: 1 / 2;
            }
            
            .panel:nth-child(2) {
                grid-column: 1 / -1;
                grid-row: 2;
                min-height: 500px;
            }
            
            .panel:nth-child(3) {
                min-width: unset;
                max-width: unset;
                grid-column: 2 / 3;
                grid-row: 1;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .logs {
                height: 200px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Small tablets / Large phones (576px - 768px) */
        @media (max-width: 768px) {
            .main-container {
                padding: 10px;
            }
            
            .grid-container {
                grid-template-columns: 1fr;
                gap: 12px;
                padding: 12px;
            }
            
            .panel {
                padding: 15px;
                height: auto;
                max-height: none;
            }
            
            .panel:first-child,
            .panel:nth-child(2),
            .panel:nth-child(3) {
                grid-column: 1;
                grid-row: auto;
                min-width: unset;
                max-width: unset;
            }
            
            .panel:nth-child(2) {
                min-height: 400px;
            }
            
            .header {
                padding: 15px;
            }
            
            .header h1 {
                font-size: 1.5rem;
            }
            
            .panel-title {
                font-size: 1rem;
                margin-bottom: 12px;
            }
            
            .form-group {
                margin-bottom: 12px;
            }
            
            .btn {
                padding: 10px 12px;
                font-size: 0.8rem;
                margin-bottom: 6px;
            }
            
            .mappers-container, .reducers-container {
                grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                gap: 10px;
            }
            
            .mapper-node, .reducer-node,
            .mapper-card, .reducer-card {
                min-height: 100px;
                padding: 12px;
            }
            
            .data-section {
                padding: 15px;
            }
            
            .data-section h3 {
                font-size: 1rem;
            }
            
            .experiment-area {
                padding: 15px;
                gap: 15px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            
            .stat-card {
                padding: 12px;
            }
            
            .stat-value {
                font-size: 1.5rem;
            }
            
            .stat-label {
                font-size: 0.8rem;
            }
            
            .logs {
                height: 180px;
                font-size: 0.75rem;
            }
            
            /* Floating button adjustments */
            .floating-instructions {
                top: 15px;
                right: 15px;
                padding: 10px 18px;
                font-size: 0.8rem;
            }
            
            /* Number input adjustments */
            .number-btn {
                width: 28px;
                height: 28px;
                font-size: 1rem;
            }
            
            .number-input {
                padding: 8px 10px;
                font-size: 0.9rem;
            }
            
            /* Shuffle container */
            .shuffle-container {
                padding: 15px;
                overflow-x: auto;
            }
            
            #animationArea {
                min-height: 120px !important;
            }
            
            /* Shuffle animation responsive fixes */
            .shuffle-animation-container .h-40 {
                min-width: unset !important;
                width: 100% !important;
            }
            
            .shuffle-animation-container .left-4 {
                left: 10px !important;
                width: 70px !important;
            }
            
            .shuffle-animation-container .right-4 {
                right: 10px !important;
                width: 70px !important;
            }
            
            .shuffle-animation-container .inset-x-0 {
                left: 80px !important;
                right: 80px !important;
            }
            
            .shuffle-animation-container .w-12 {
                width: 32px !important;
                height: 22px !important;
                font-size: 0.7rem !important;
            }
        }

        /* Mobile phones (below 576px) */
        @media (max-width: 576px) {
            .main-container {
                padding: 8px;
            }
            
            .grid-container {
                padding: 10px;
                gap: 10px;
                border-radius: 15px;
            }
            
            .panel {
                padding: 12px;
                border-radius: 12px;
            }
            
            .panel-title {
                font-size: 0.95rem;
                margin-bottom: 10px;
                padding-bottom: 8px;
            }
            
            .step-counter {
                font-size: 0.8rem;
                padding: 6px 12px;
            }
            
            .form-group label {
                font-size: 0.85rem;
            }
            
            .form-group input, 
            .form-group select, 
            .form-group textarea {
                padding: 8px 10px;
                font-size: 0.8rem;
            }
            
            .form-group textarea {
                min-height: 60px;
            }
            
            .btn {
                padding: 10px;
                font-size: 0.8rem;
                border-radius: 6px;
            }
            
            .number-input-container {
                border-radius: 6px;
            }
            
            .number-btn {
                width: 32px;
                height: 32px;
                font-size: 1.1rem;
            }
            
            .number-input {
                padding: 8px;
                font-size: 0.9rem;
            }
            
            /* Data visualization */
            .data-section {
                padding: 12px;
                border-radius: 10px;
            }
            
            .data-section h3 {
                font-size: 0.9rem;
                margin-bottom: 10px;
                padding-bottom: 6px;
            }
            
            .data-container {
                padding: 10px;
                gap: 6px;
                min-height: 50px;
            }
            
            .data-item {
                padding: 4px 8px;
                font-size: 0.75rem;
            }
            
            .mappers-container, .reducers-container {
                grid-template-columns: 1fr;
                gap: 8px;
                padding: 8px;
            }
            
            .mapper-node, .reducer-node,
            .mapper-card, .reducer-card {
                min-height: 80px;
                padding: 10px;
                border-radius: 10px;
            }
            
            .mapper-title, .reducer-title,
            .mapper-node-title, .reducer-node-title {
                padding: 6px 10px;
                font-size: 0.8rem;
                border-radius: 6px;
            }
            
            /* Shuffle phase */
            .shuffle-container {
                padding: 12px;
                border-radius: 10px;
                overflow-x: auto;
            }
            
            #animationArea {
                min-height: 100px !important;
                padding: 10px;
                min-width: 280px !important;
            }
            
            /* Shuffle animation - mobile portrait fixes */
            .shuffle-animation-container {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
            }
            
            .shuffle-animation-container .h-40 {
                min-width: 280px !important;
                min-height: 100px !important;
                width: 100% !important;
            }
            
            .shuffle-animation-container .left-4 {
                left: 8px !important;
                width: 55px !important;
            }
            
            .shuffle-animation-container .right-4 {
                right: 8px !important;
                width: 55px !important;
            }
            
            .shuffle-animation-container .inset-x-0 {
                left: 65px !important;
                right: 65px !important;
            }
            
            .shuffle-animation-container .w-12 {
                width: 28px !important;
                height: 20px !important;
                font-size: 0.65rem !important;
            }
            
            .shuffle-animation-container .text-2xl {
                font-size: 1rem !important;
            }
            
            .shuffle-animation-container .text-sm {
                font-size: 0.7rem !important;
            }
            
            .shuffle-animation-container .text-xs {
                font-size: 0.6rem !important;
            }
            
            /* Stats */
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }
            
            .stat-card {
                padding: 10px;
                border-radius: 6px;
            }
            
            .stat-value {
                font-size: 1.3rem;
            }
            
            .stat-label {
                font-size: 0.75rem;
            }
            
            .stat-description {
                font-size: 0.65rem;
            }
            
            /* Logs */
            .logs {
                height: 150px;
                padding: 10px;
                font-size: 0.7rem;
            }
            
            .log-entry {
                padding: 5px 8px;
                margin: 3px 0;
            }
            
            /* Floating button */
            .floating-instructions {
                top: 10px;
                right: 10px;
                padding: 8px 14px;
                font-size: 0.75rem;
                border-radius: 20px;
            }
            
            .instruction-icon {
                font-size: 1em;
            }
            
            /* Progress bar */
            .progress-bar {
                height: 6px;
                margin: 10px 0;
            }
        }

        /* Extra small phones (below 400px) */
        @media (max-width: 400px) {
            .main-container {
                padding: 5px;
            }
            
            .grid-container {
                padding: 8px;
                border-radius: 12px;
            }
            
            .panel {
                padding: 10px;
            }
            
            .panel-title {
                font-size: 0.9rem;
            }
            
            .btn {
                padding: 8px;
                font-size: 0.75rem;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
                gap: 6px;
            }
            
            .stat-value {
                font-size: 1.2rem;
            }
            
            .floating-instructions {
                padding: 6px 12px;
                font-size: 0.7rem;
            }
            
            .floating-instructions .instruction-icon {
                display: none;
            }
            
            /* Shuffle animation - extra small screen fixes */
            .shuffle-container {
                padding: 8px;
                overflow-x: auto;
            }
            
            #animationArea {
                min-height: 90px !important;
                min-width: 250px !important;
                padding: 8px !important;
            }
            
            .shuffle-animation-container .h-40 {
                min-width: 250px !important;
                min-height: 90px !important;
            }
            
            .shuffle-animation-container .left-4 {
                left: 5px !important;
                width: 45px !important;
            }
            
            .shuffle-animation-container .right-4 {
                right: 5px !important;
                width: 45px !important;
            }
            
            .shuffle-animation-container .inset-x-0 {
                left: 52px !important;
                right: 52px !important;
            }
            
            .shuffle-animation-container .w-12 {
                width: 24px !important;
                height: 18px !important;
                font-size: 0.55rem !important;
            }
            
            .shuffle-animation-container .text-2xl {
                font-size: 0.9rem !important;
            }
            
            .shuffle-animation-container .text-sm {
                font-size: 0.6rem !important;
            }
        }

        /* Override Tailwind classes with 2PhaseCommit styling */
        .bg-white { background: white !important; }
        .bg-gray-100 { background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important; }
        .rounded-lg { border-radius: 12px !important; }
        .p-6 { padding: 20px !important; }
        .p-5 { padding: 15px !important; }
        .mb-4 { margin-bottom: 12px !important; }
        .gap-2 { gap: 8px !important; }
        .gap-4 { gap: 12px !important; }
        .gap-6 { gap: 20px !important; }
        .border { border: 1px solid #e2e8f0 !important; }
        .border-gray-300 { border-color: #e2e8f0 !important; }
        .shadow-sm { box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; }
        .text-blue-600 { color: #3b82f6 !important; }
        .text-purple-600 { color: #7c3aed !important; }
        .text-orange-600 { color: #ea580c !important; }
        .font-semibold { font-weight: 600 !important; }
        .text-lg { font-size: 1rem !important; }
        .text-xl { font-size: 1.1em !important; }
        .space-y-4 > * + * { margin-top: 12px !important; }
        .space-y-5 > * + * { margin-top: 15px !important; }
        .space-y-6 > * + * { margin-top: 20px !important; }
        .flex { display: flex !important; }
        .flex-col { flex-direction: column !important; }
        .flex-wrap { flex-wrap: wrap !important; }
        .grid { display: grid !important; }
        .col-span-3 { grid-column: span 3 !important; }
        .col-span-6 { grid-column: span 6 !important; }
        .grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; }
        .grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
        .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
        .justify-between { justify-content: space-between !important; }
        .items-center { align-items: center !important; }
        .w-full { width: 100% !important; }
        .h-full { height: 100% !important; }
        .min-h-12 { min-height: 48px !important; }
        .min-h-20 { min-height: 80px !important; }
        .max-h-screen { max-height: 100vh !important; }
        .overflow-y-auto { overflow-y: auto !important; }
        .flex-1 { flex: 1 !important; }
        .hidden { display: none !important; }

        /* Additional button and input styling to override Tailwind */
        .btn-large {
            background: linear-gradient(135deg, #3b82f6, #1e40af);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 20px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 8px;
        }

        .btn-large:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .input-large {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            background: white;
            color: #2d3748;
            transition: all 0.2s ease;
        }

        .input-large:focus {
            outline: none;
            border-color: #3182ce;
            box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
        }

        .btn-small {
            background: linear-gradient(135deg, #3b82f6, #1e40af);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            margin-bottom: 4px;
        }

        .btn-small:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        }

        /* Override for specific IDs to ensure compatibility */
        #stepBtn, #autoRunBtn, #pauseBtn, #resetBtn, #loadDataBtn {
            font-size: 0.875rem !important;
            padding: 12px 16px !important;
            margin-bottom: 8px !important;
        }

        #mapperCount, #reducerCount, #partitionStrategy, #inputData {
            width: 100% !important;
            padding: 10px 12px !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 8px !important;
            background: white !important;
            color: #2d3748 !important;
        }

        /* Enhanced mapper/reducer visualization */
        .mapper-content, .reducer-content {
            min-height: 80px;
            padding: 8px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* Content area within individual nodes */
        .mapper-node-content, .reducer-node-content {
            min-height: 80px;
            padding: 8px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .bucket-group {
            margin-bottom: 12px;
            padding: 8px;
            background: rgba(247, 250, 252, 0.8);
            border-radius: 8px;
            border-left: 3px solid #4299e1;
        }

        .bucket-group:last-child {
            margin-bottom: 0;
        }

        .bucket-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .bucket-title::before {
            content: '→';
            color: #4299e1;
            font-weight: bold;
            font-size: 0.9rem;
        }

        .bucket-data {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        /* Improved data items for buckets */
        .bucket-data .data-item {
            font-size: 0.75rem;
            padding: 4px 8px;
            margin: 0;
        }

        /* Floating Instructions Button */
        .floating-instructions {
            position: fixed;
            top: 25px;
            right: 25px;
            z-index: 1000;
            background: linear-gradient(145deg, #4299e1, #3182ce);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 12px 24px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(66, 153, 225, 0.3);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(10px);
        }

        .floating-instructions:hover {
            background: linear-gradient(145deg, #3182ce, #2c5282);
            box-shadow: 0 6px 30px rgba(66, 153, 225, 0.4);
            transform: translateY(-2px) scale(1.03);
        }

        .instruction-icon {
            font-size: 1.2em;
        }

        /* Instructions Modal */
        .instructions-modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .instructions-modal-content {
            background: white;
            margin: 2% auto;
            border-radius: 20px;
            width: 90%;
            max-width: 1200px;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            animation: modalSlideIn 0.3s ease-out;
            position: relative;
        }

        /* Modal Header */
        .modal-header {
            background: linear-gradient(135deg, #4299e1, #3182ce);
            color: white;
            padding: 24px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .header-content {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .header-icon {
            background: rgba(255, 255, 255, 0.2);
            padding: 12px;
            border-radius: 50%;
        }

        .header-text h2 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .header-text p {
            margin: 4px 0 0 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.875rem;
        }

        .modal-close {
            background: rgba(239, 68, 68, 0.2);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close:hover {
            background: rgba(239, 68, 68, 0.3);
            color: #fecaca;
        }

        /* Modal Body */
        .modal-body {
            padding: 32px;
            max-height: calc(90vh - 100px);
            overflow-y: auto;
        }

        .instructions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 32px;
        }

        .instruction-card {
            background: linear-gradient(145deg, #ffffff, #f8fafc);
            border: 1px solid rgba(66, 153, 225, 0.08);
            border-radius: 16px;
            padding: 24px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .instruction-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(66, 153, 225, 0.1);
        }

        .instruction-card .instruction-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            font-size: inherit;
        }

        .instruction-card .instruction-icon.blue {
            background: #dbeafe;
            color: #3182ce;
        }

        .instruction-card .instruction-icon.green {
            background: #d1fae5;
            color: #10b981;
        }

        .instruction-card .instruction-icon.orange {
            background: #fed7aa;
            color: #f59e0b;
        }

        .instruction-card .instruction-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #374151;
            margin: 0 0 16px 0;
        }

        .instruction-card .instruction-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .instruction-card .instruction-list li {
            padding: 8px 0;
            color: #6b7280;
            font-size: 0.95rem;
            line-height: 1.6;
            border-bottom: 1px solid rgba(66, 153, 225, 0.05);
        }

        .instruction-card .instruction-list li:last-child {
            border-bottom: none;
        }

        .instruction-card .instruction-list li strong {
            color: #374151;
            font-weight: 600;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Modal Responsive adjustments */
        @media (max-width: 1200px) {
            .instructions-grid {
                grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
                gap: 24px;
            }
            
            .instruction-card {
                padding: 20px;
            }
        }
        
        @media (max-width: 1024px) {
            .instructions-grid {
                grid-template-columns: 1fr;
            }
            
            .instructions-modal-content {
                margin: 5% auto;
                width: 95%;
            }
            
            .modal-header {
                padding: 20px 24px;
            }
            
            .header-text h2 {
                font-size: 1.3rem;
            }
            
            .modal-body {
                padding: 24px;
            }
        }
        
        @media (max-width: 768px) {
            .instructions-modal-content {
                margin: 2% auto;
                width: 98%;
                max-height: 96vh;
                border-radius: 15px;
            }
            
            .modal-header {
                padding: 16px 20px;
            }
            
            .header-content {
                gap: 12px;
            }
            
            .header-icon {
                padding: 8px;
            }
            
            .header-icon svg {
                width: 20px;
                height: 20px;
            }
            
            .header-text h2 {
                font-size: 1.1rem;
            }
            
            .header-text p {
                font-size: 0.75rem;
            }
            
            .modal-close {
                padding: 8px;
            }
            
            .modal-body {
                padding: 16px;
                max-height: calc(96vh - 80px);
            }
            
            .instructions-grid {
                gap: 16px;
            }
            
            .instruction-card {
                padding: 16px;
                border-radius: 12px;
            }
            
            .instruction-card .instruction-icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                margin-bottom: 12px;
            }
            
            .instruction-card .instruction-title {
                font-size: 1.1rem;
                margin-bottom: 12px;
            }
            
            .instruction-card .instruction-list li {
                font-size: 0.85rem;
                padding: 6px 0;
            }
        }
        
        @media (max-width: 576px) {
            .instructions-modal-content {
                margin: 0;
                width: 100%;
                max-height: 100vh;
                border-radius: 0;
            }
            
            .modal-header {
                padding: 14px 16px;
            }
            
            .header-icon {
                display: none;
            }
            
            .header-text h2 {
                font-size: 1rem;
            }
            
            .header-text p {
                display: none;
            }
            
            .modal-body {
                padding: 12px;
                max-height: calc(100vh - 60px);
            }
            
            .instructions-grid {
                gap: 12px;
            }
            
            .instruction-card {
                padding: 14px;
                border-radius: 10px;
            }
            
            .instruction-card .instruction-icon {
                width: 36px;
                height: 36px;
                margin-bottom: 10px;
            }
            
            .instruction-card .instruction-title {
                font-size: 1rem;
                margin-bottom: 10px;
            }
            
            .instruction-card .instruction-list li {
                font-size: 0.8rem;
                padding: 5px 0;
                line-height: 1.5;
            }
        }