/* MeroKalam.com official qr-code-generator styles. Unauthorized copying or republication is not permitted. */
* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: 100vh; color: #1e293b; line-height: 1.6;
        }
        .container { max-width: 960px; margin: 0 auto; padding: 2rem 1rem 3.5rem; }

        .header { text-align: center; margin-bottom: 2.5rem; }
        .header h1 {
            font-size: 2.5rem; font-weight: 800;
            background: linear-gradient(135deg, #2563eb, #0891b2);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
        }
        .header p { color: #64748b; font-size: 1.1rem; }

        .card {
            background: white; border-radius: 1.5rem;
            padding: 2.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            margin-bottom: 2rem;
        }

        /* Type tabs */
        .type-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
        .type-tab {
            padding: 0.45rem 1rem; border: 2px solid #e2e8f0; background: white;
            border-radius: 0.625rem; cursor: pointer; font-size: 0.85rem;
            font-weight: 600; color: #64748b; transition: all 0.2s; font-family: inherit;
        }
        .type-tab.active { background: #2563eb; color: white; border-color: #2563eb; }
        .type-tab:hover:not(.active) { border-color: #2563eb; color: #2563eb; }

        .input-panel { display: none; }
        .input-panel.active { display: block; }

        .field { margin-bottom: 1.1rem; }
        .field label { display: block; font-weight: 700; color: #374151; font-size: 0.9rem; margin-bottom: 0.4rem; }
        .field input, .field textarea, .field select {
            width: 100%; padding: 0.8rem 1rem; border: 2px solid #e2e8f0;
            border-radius: 0.75rem; font-size: 0.95rem; font-family: inherit;
            color: #1e293b; transition: border-color 0.2s, box-shadow 0.2s; background: white;
        }
        .field textarea { resize: vertical; min-height: 90px; }
        .field input:focus, .field textarea:focus, .field select:focus {
            outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
        }
        .field .hint { font-size: 0.77rem; color: #94a3b8; margin-top: 0.3rem; }

        /* Options */
        .options-row {
            display: grid; grid-template-columns: 1fr 1fr 1fr;
            gap: 1rem; margin-bottom: 1.5rem; padding: 1.25rem;
            background: #f8fafc; border-radius: 1rem; border: 1.5px solid #e2e8f0;
        }
        .option-group { display: flex; flex-direction: column; gap: 0.4rem; }
        .option-group label { font-size: 0.8rem; font-weight: 700; color: #374151; }
        .color-pick { display: flex; align-items: center; gap: 0.5rem; }
        .color-pick input[type="color"] {
            width: 38px; height: 38px; padding: 2px; border: 2px solid #e2e8f0;
            border-radius: 0.5rem; cursor: pointer; background: none;
        }
        .color-pick span { font-size: 0.8rem; color: #64748b; }
        .size-select {
            padding: 0.5rem 0.75rem; border: 2px solid #e2e8f0; border-radius: 0.5rem;
            font-family: inherit; font-size: 0.85rem; color: #374151; background: white;
        }

        .gen-btn {
            width: 100%; padding: 1rem;
            background: linear-gradient(135deg, #2563eb, #0891b2);
            color: white; border: none; border-radius: 0.875rem;
            font-size: 1.05rem; font-weight: 700; cursor: pointer;
            transition: all 0.2s; box-shadow: 0 4px 16px rgba(37,99,235,0.3);
            font-family: inherit;
        }
        .gen-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.4); }

        /* QR output */
        .qr-output { display: none; margin-top: 2rem; text-align: center; }
        .qr-output.show { display: block; }
        .qr-wrapper {
            display: inline-block; padding: 1.5rem; background: white;
            border-radius: 1.25rem; border: 2px solid #e2e8f0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 1.25rem;
        }
        .qr-wrapper canvas { display: block; }
        .qr-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
        .dl-btn {
            padding: 0.7rem 1.5rem; background: linear-gradient(135deg, #2563eb, #0891b2);
            color: white; border: none; border-radius: 0.625rem; font-weight: 700;
            font-size: 0.9rem; cursor: pointer; transition: all 0.2s; font-family: inherit;
        }
        .dl-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(37,99,235,0.35); }
        .dl-btn.outline {
            background: white; color: #2563eb; border: 2px solid #2563eb;
        }
        .dl-btn.outline:hover { background: #eff6ff; }
        .qr-meta { font-size: 0.77rem; color: #94a3b8; margin-top: 0.75rem; }

        /* SEO */
        .seo-section { background: white; border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.08); margin-top: 2rem; }
        .seo-section h2 { font-size: 1.75rem; font-weight: 800; color: #1e293b; margin-bottom: 1rem; line-height: 1.3; }
        .seo-section h3 { color: #1f2937; font-size: 1.05rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.6rem; padding-left: 0.85rem; border-left: 3px solid #2563eb; }
        .seo-section p { color: #475569; line-height: 1.85; font-size: 0.95rem; margin-bottom: 0.9rem; }
        .seo-section strong { color: #1e293b; }
        .article-meta { display: flex; gap: 0.75rem; align-items: center; font-size: 0.8rem; color: #94a3b8; margin-bottom: 1.25rem; flex-wrap: wrap; }
        .use-case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.25rem 0 0.5rem; }
        .use-case { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; transition: border-color 0.2s; }
        .use-case:hover { border-color: #bfdbfe; }
        .uc-icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
        .uc-title { font-weight: 700; color: #1e293b; font-size: 0.9rem; margin-bottom: 0.35rem; }
        .uc-desc { color: #64748b; font-size: 0.82rem; line-height: 1.65; }
        .faq-item { background: #f8fafc; border-left: 4px solid #2563eb; padding: 0.9rem 1.1rem; border-radius: 0 0.5rem 0.5rem 0; margin-bottom: 0.75rem; }
        .faq-q { font-weight: 700; color: #1e293b; font-size: 0.9rem; margin-bottom: 0.25rem; }
        .faq-a { color: #475569; font-size: 0.88rem; line-height: 1.65; }

        @media (max-width: 640px) {
            .header h1 { font-size: 1.75rem; }
            .type-tabs { gap: 0.4rem; }
            .type-tab { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
            .options-row { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
            .card { padding: 1.25rem; }
            .seo-section { padding: 1.25rem; }
            .use-case-grid { grid-template-columns: 1fr; }
            .qr-actions { flex-direction: column; align-items: center; }
            .dl-btn { width: 100%; max-width: 280px; }
            .faq-item { padding: 0.75rem 0.9rem; }
        }
        @media (max-width: 380px) {
            .options-row { grid-template-columns: 1fr; }
            .type-tab { font-size: 0.75rem; padding: 0.4rem 0.65rem; }
        }
@media (max-width: 480px) {
}
        
        /* ── Navbar handled by .mk-nav in mk-shared.css ── */
        
        /* ── Additional mobile optimizations ───────────────────────── */
        @media (max-width: 480px) {
            .page-title, .header h1 { font-size: 1.5rem !important; }
            .type-tabs { gap: 0.35rem; }
            .type-tab { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
            .options-row { grid-template-columns: 1fr 1fr !important; gap: 0.6rem; }
            .qr-output { padding: 1.25rem !important; }
            .qr-actions { flex-direction: column !important; align-items: center; }
            .action-btn { width: 100% !important; max-width: 260px; }
            textarea, input[type=text], input[type=url] { font-size: 0.95rem !important; }
        }

        /* ── Global mobile polish ───────────────────────────────────── */
        @media (max-width: 480px) {
            /* Comfortable touch targets */
            button, .btn, [role=button] { min-height: 44px; }
            input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
            /* Article/SEO content */
            .article p, .seo-section p, .article-section p { font-size: 0.9rem !important; line-height: 1.75 !important; }
            .article h3, .seo-section h3 { font-size: 1rem !important; }
            .article h2, .seo-section h2 { font-size: 1.2rem !important; }
            .faq-q { font-size: 0.88rem !important; }
            .faq-a { font-size: 0.85rem !important; }
            /* Prevent horizontal scroll */
            body { overflow-x: hidden; }
            img, canvas { max-width: 100%; height: auto; }
        }