html, body {
          height: 100%;
          margin: 0;
      }

      body {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
      }

      main.container {
          flex: 1 0 auto; /* Grows to fill available space */
      }
        :root {
            --pico-font-size: 16px;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }

        .input-section {
            margin-bottom: 1.5rem;
        }

        .input-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 0;
        }

            .input-tabs button {
                flex: 1;
                border-radius: 0;
                margin: 0;
                background: var(--pico-secondary-background);
                border: 1px solid var(--pico-muted-border-color);
            }

                .input-tabs button.active {
                    background: var(--pico-primary);
                    color: white;
                }

        .tab-content {
            display: none;
            padding: 1rem;
            border: 1px solid var(--pico-muted-border-color);
            border-top: none;
        }

            .tab-content.active {
                display: block;
            }

        textarea {
            min-height: 150px;
            font-family: monospace;
        }

        .options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .preview-table {
            width: 100%;
            margin-top: 1rem;
        }

            .preview-table th {
                text-align: left;
            }

            .preview-table td {
                vertical-align: middle;
            }

            .preview-table .qr-cell {
                width: 120px;
                text-align: center;
            }

                .preview-table .qr-cell img, .preview-table .qr-cell div {
                    max-width: 100px;
                    height: auto;
                }

                    .preview-table .qr-cell img:hover, .preview-table .qr-cell div:hover {
                        opacity: 0.8;
                    }

            .preview-table .data-cell {
                word-break: break-all;
            }

            .preview-table .filename-cell {
                font-family: monospace;
                font-size: 0.85rem;
            }

        .status {
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 4px;
        }

            .status.info {
                background: #e3f2fd;
            }

            .status.success {
                background: #e8f5e9;
            }

            .status.error {
                background: #ffebee;
            }

        .hidden {
            display: none;
        }

        #previewSection {
            margin-top: 2rem;
        }

        .btn-group {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
      
      /* Container styling */
.panel-footer {
    background-color: #f8f9fa; /* Light gray background */
    border-top: 1px solid #e7e7e7; /* Subtle top border */
    padding: 15px 20px;
    color: #666;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    /* Flexbox to separate left and right content */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

    /* Link styling */
    .panel-footer a {
        color: #007bff; /* Standard Link Blue */
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .panel-footer a:hover {
            color: #0056b3; /* Darker blue on hover */
            text-decoration: underline;
        }

    /* The right-side container */
    .panel-footer .pull-right {
        display: flex;
        flex-wrap: wrap;
        gap: 5px; /* Adds space between links if you remove   */
    }

    /* Mobile Responsive Adjustments */
    @media (max-width: 768px) {
      .panel-footer {
          flex-direction: column;
          text-align: center;
          gap: 10px;
      }

        .panel-footer .pull-right {
            justify-content: center;
        }
    }